Skip to content

Commit 640709e

Browse files
rezrahrezrah
committed
restore docs
1 parent 47c12b4 commit 640709e

16 files changed

+377
-2
lines changed

‎apps/docs/content/components/Testimoinial/index.mdx

Whitespace-only changes.

‎apps/docs/content/components/Testimoinial/react.mdx

+209
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
---
2+
title: Testimonial
3+
figma: 'https://www.figma.com/file/BJ95AjraesmRCWsKA013GS/Primer-Brand?node-id=1852%3A27522'
4+
source: https://github.com/primer/brand/blob/main/packages/react/src/Testimonial/Testimonial.tsx
5+
storybook: '/brand/storybook/?path=/story/components-testimonial'
6+
description: Use the testimonial component to display a quote from a customer or user.
7+
---
8+
9+
import ComponentLayout from '../../../src/layouts/component-layout'
10+
export default ComponentLayout
11+
12+
import {
13+
TestimonialQuoteMarkColors,
14+
TestimonialVariants,
15+
defaultTestimonialVariant,
16+
} from '@primer/react-brand'
17+
import {Box as Container, Label} from '@primer/react'
18+
import {PropTableValues} from '../../../src/components'
19+
20+
```js
21+
import {Testimonial} from '@primer/react-brand'
22+
```
23+
24+
## Examples
25+
26+
### Default
27+
28+
```jsx live
29+
<Testimonial>
30+
<Testimonial.Quote>
31+
GitHub helps us ensure that we have our security controls baked into our
32+
pipelines all the way from the first line of code we&apos;re writing.
33+
</Testimonial.Quote>
34+
<Testimonial.Name position="Staff Security Engineer">
35+
David Ross
36+
</Testimonial.Name>
37+
<Testimonial.Avatar
38+
src="/brand/assets/avatar-mona.png"
39+
alt="Circular avatar from David Ross's GitHub profile"
40+
/>
41+
</Testimonial>
42+
```
43+
44+
### Variants
45+
46+
For an alternative visual appearance and layout, without altering semantic meaning.
47+
48+
```jsx live
49+
<Stack direction="horizontal" gap="spacious" padding="none">
50+
<Testimonial variant="default">
51+
<Testimonial.Quote>
52+
GitHub helps us ensure that we have our security controls baked into our
53+
pipelines all the way from the first line of code we&apos;re writing.
54+
</Testimonial.Quote>
55+
<Testimonial.Name position="Staff Security Engineer">
56+
David Ross
57+
</Testimonial.Name>
58+
<Testimonial.Avatar
59+
src="/brand/assets/avatar-mona.png"
60+
alt="Circular avatar from David Ross's GitHub profile"
61+
/>
62+
</Testimonial>
63+
<Testimonial variant="subtle">
64+
<Testimonial.Quote>
65+
GitHub helps us ensure that we have our security controls baked into our
66+
pipelines all the way from the first line of code we&apos;re writing.
67+
</Testimonial.Quote>
68+
<Testimonial.Name position="Staff Security Engineer">
69+
David Ross
70+
</Testimonial.Name>
71+
<Testimonial.Avatar
72+
src="/brand/assets/avatar-mona.png"
73+
alt="Circular avatar from David Ross's GitHub profile"
74+
/>
75+
</Testimonial>
76+
</Stack>
77+
```
78+
79+
### Logo
80+
81+
A logo (or similar) visual can be provided as an alternative to avatars.
82+
83+
```jsx live
84+
<Testimonial>
85+
<Testimonial.Quote>
86+
GitHub helps us ensure that we have our security controls baked into our
87+
pipelines all the way from the first line of code we&apos;re writing.
88+
</Testimonial.Quote>
89+
<Testimonial.Name>David Ross</Testimonial.Name>
90+
<Testimonial.Logo>
91+
<img
92+
alt="GitHub Logo"
93+
src="https://github.githubassets.com/images/modules/logos_page/GitHub-Logo.png"
94+
width={60}
95+
/>
96+
</Testimonial.Logo>
97+
</Testimonial>
98+
```
99+
100+
### Size
101+
102+
Use `size` to alternate the text size. Available options are `small` (default) and `large`.
103+
104+
```jsx live
105+
<Testimonial size="large">
106+
<Testimonial.Quote>
107+
GitHub helps us ensure that we have our security controls baked into our
108+
pipelines all the way from the first line of code we&apos;re writing.
109+
</Testimonial.Quote>
110+
<Testimonial.Name position="Staff Software Engineer">
111+
David Ross
112+
</Testimonial.Name>
113+
</Testimonial>
114+
```
115+
116+
### Layout
117+
118+
`Testimonial` will expand to fill the width of its parent by default.
119+
120+
Use `Stack` to help position multiple, adjacent Testimonials alongside one another.
121+
122+
```jsx live
123+
<Stack direction="horizontal" gap="spacious" padding="spacious">
124+
<Testimonial>
125+
<Testimonial.Quote>
126+
GitHub helps us ensure that we have our security controls baked into our
127+
pipelines all the way from the first line of code we&apos;re writing.
128+
</Testimonial.Quote>
129+
<Testimonial.Name>David Ross</Testimonial.Name>
130+
</Testimonial>
131+
<Testimonial>
132+
<Testimonial.Quote>
133+
GitHub helps us ensure that we have our security controls baked into our
134+
pipelines all the way from the first line of code we&apos;re writing.
135+
</Testimonial.Quote>
136+
<Testimonial.Name>David Ross</Testimonial.Name>
137+
</Testimonial>
138+
</Stack>
139+
```
140+
141+
### Position
142+
143+
Pass additional content about the testimonial provider using `position`.
144+
145+
```jsx live
146+
<Testimonial>
147+
<Testimonial.Quote>
148+
GitHub helps us ensure that we have our security controls baked into our
149+
pipelines all the way from the first line of code we&apos;re writing.
150+
</Testimonial.Quote>
151+
<Testimonial.Name position="Staff Software Engineer">
152+
David Ross
153+
</Testimonial.Name>
154+
</Testimonial>
155+
```
156+
157+
## Component props
158+
159+
### Testimonial <Label>Required</Label>
160+
161+
`Testimonial` passes contextual data to its child inputs, labels, validation messaging and more.
162+
163+
| Name | Type | Default | Description |
164+
| :--------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------: | :-------------------------------------------- |
165+
| `children` | <PropTableValues addLineBreaks values={['Testimonial.Quote','Testimonial.Name','Testimonial.Logo','Testimonial.Avatar','React.ReactNode' ]} addLineBreaks /> | | Valid child nodes |
166+
| `className` | `string` | | Sets a custom class |
167+
| `id` | `string` | | Sets a custom id |
168+
| `ref` | `React.RefObject` | | Forward a Ref to the underlying DOM node |
169+
| `size` | <PropTableValues addLineBreaks values={['small','large']}/> | `'small'` | Set size of quote's text |
170+
| `quoteMarkColor` | <PropTableValues addLineBreaks values={TestimonialQuoteMarkColors}/> | `'default'` | Color or gradient fill of the the quote mark. |
171+
| `variant` | <PropTableValues addLineBreaks values={TestimonialVariants}/> | `'minimal'` | Alternative visual appearance |
172+
173+
<h3 id="Testimonial-name">
174+
Testimonial.Name <Label>Required</Label>
175+
</h3>
176+
177+
`Testimonial.Name` indicates the name of the person (or organisation) that provided the testimonial.
178+
179+
| Name | Type | Default | Description |
180+
| :---------- | :---------------- | :-----: | :------------------------------------------------------------------ |
181+
| `children` | `string` | | Label text |
182+
| `className` | `string` | | Applies a custom class |
183+
| `id` | `string` | | Sets a custom id |
184+
| `ref` | `React.RefObject` | | Forward a Ref to the underlying DOM node |
185+
| `position` | `string` | | Optional. Applies additional content adjancent to the primary text. |
186+
187+
<h3 id="Testimonial-avatar">Testimonial.Avatar</h3>
188+
189+
`Testimonial.Avatar` represent users or organizations.
190+
191+
| Name | Type | Default | Description |
192+
| :---------- | :---------------- | :-----: | :----------------------------------------------------------------- |
193+
| `children` | `string` | | Label text |
194+
| `className` | `string` | | Applies a custom class |
195+
| `id` | `string` | | Sets a custom id |
196+
| `ref` | `React.RefObject` | | Forward a Ref to the underlying DOM node |
197+
| `src` | `string` | | Required. A url to the user or organisations GitHub profile avatar |
198+
| `alt` | `string` | | Required. Applied as alt text to the avatar. |
199+
200+
<h3 id="Testimonial-logo">Testimonial.Logo</h3>
201+
202+
`Testimonial.Logo` passes a visual that represents the users or organizations.
203+
204+
| Name | Type | Default | Description |
205+
| :---------- | :---------------------------------------------------------------------------- | :-----: | :----------------------------------------------------- |
206+
| `children` | <PropTableValues addLineBreaks values={['SVGElement', 'HTMLImageElement']} /> | | Accepts `<img>` and `<svg>` HTML elements as children. |
207+
| `className` | `string` | | Applies a custom class |
208+
| `id` | `string` | | Sets a custom id |
209+
| `ref` | `React.RefObject` | | Forward a Ref to the underlying DOM node |

‎apps/docs/content/components/Testimonial/index.mdx

+166
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
---
2+
title: Testimonial
3+
description: Use testimonial to display a quote from a customer or user.
4+
---
5+
6+
import ComponentLayout from '../../../src/layouts/component-layout'
7+
export default ComponentLayout
8+
9+
## Anatomy
10+
11+
![An image displaying a testimonial anatomy.](https://github.com/primer/brand/assets/912236/5072db4b-446f-4091-be35-48cc020d51ba)
12+
13+
- Quote: The quote from the customer.
14+
- Name: The name of the customer.
15+
- Position: The position or role of the customer.
16+
- Avatar or Logo: Optional avatar of the customer or the company logo.
17+
18+
## Usage
19+
20+
Use the testimonial component to showcase a quote or a review from a customer. Use the testimonials to build credibility, trust, and provide social proof by displaying customers' sentiments about the product.
21+
22+
Testimonials should be short and concise. Quotes should be not be longer than 3-4 lines. Avoid using long quotes that can be hard to understand or that don't provide enough context.
23+
24+
<DoDontContainer>
25+
<Do>
26+
<img src="https://github.com/primer/brand/assets/912236/ca8b16f9-ada6-49b7-a627-db039f5bd3d9" />
27+
<Caption>Use short and concise quotes.</Caption>
28+
</Do>
29+
<Dont>
30+
<img src="https://github.com/primer/brand/assets/912236/bb0ae79c-244f-4cdb-83e2-655bd99ee67e" />
31+
<Caption>
32+
Don't use long quotes that can be hard to read and understand.
33+
</Caption>
34+
</Dont>
35+
</DoDontContainer>
36+
37+
Use highlitghts to alternate the color of the quote mark and emphasize specific parts of the quote.
38+
39+
<DoDontContainer>
40+
<Do>
41+
<img src="https://github.com/primer/brand/assets/912236/0f81c397-c992-41be-8242-4d8500744213" />
42+
<Caption>
43+
Use emphasis to highlight te beginning of the quote and provide extra
44+
visual weight.
45+
</Caption>
46+
</Do>
47+
<Dont>
48+
<img src="https://github.com/primer/brand/assets/912236/107d6fc4-7010-4a7c-859b-6a15b2ad6cc8" />
49+
<Caption>
50+
Don't use multiple highlights in the same quote to avoid visual noise.
51+
</Caption>
52+
</Dont>
53+
</DoDontContainer>
54+
55+
Avatars and logos are optional and can be used to provide more credibility about the customer or the company. When using an avatar, use an image of the customer to make the testimonial more personal. If an image is not available, use a logo or a similar visual asset that represents the customer company or the organization.
56+
57+
<DoDontContainer>
58+
<Do>
59+
<img src="https://github.com/primer/brand/assets/912236/ed537938-cc59-4d02-9285-878ea03c6f5f" />
60+
<Caption>
61+
Use a real life image of the customer or the logo of the company.
62+
</Caption>
63+
</Do>
64+
<Dont>
65+
<img src="https://github.com/primer/brand/assets/912236/6320c943-64e7-4ed3-b337-3734372dcf16" />
66+
<Caption>
67+
Don't use illustrations or generic images. Use real life images to provide
68+
trust.
69+
</Caption>
70+
</Dont>
71+
</DoDontContainer>
72+
73+
Testimonials can be used individually or in a group. When using a group of testimonials, use the same size and alignment for all of them. When including an avatar or a logo, use them in all testimonials of the group and keep the same style and size— don't alternate between logos and avatars. We recommend using a maximum of 4 testimonials per group to avoid visual noise and to keep the quotes relevant.
74+
75+
<DoDontContainer stacked>
76+
<Do>
77+
<img src="https://github.com/primer/brand/assets/912236/fc8eb38a-c765-4730-8c27-98d460d2c03e" />
78+
<Caption>
79+
Use a maximum of 3 or 4 testimonials per group, with the same size and
80+
alginment.
81+
</Caption>
82+
</Do>
83+
<Dont>
84+
<img src="https://github.com/primer/brand/assets/912236/b8b84d81-e71e-4d44-87c7-d227222f2bc7" />
85+
<Caption>
86+
Don't use different sizes, alignments or alternate avatars and logos for
87+
groups of testimonials.
88+
</Caption>
89+
</Dont>
90+
</DoDontContainer>
91+
92+
Use a single testimonial to highlight a specific feature or benefit of the product. Use multiple testimonials to showcase each feature when in a list or a [river](/components/River).
93+
94+
<DoDontContainer>
95+
<Do>
96+
<img src="https://github.com/primer/brand/assets/912236/e6e233fd-46e1-4d7f-8b07-39bb9169d8d8" />
97+
<Caption>
98+
Use testimonials to enhance the credibility of an specific feature or
99+
benefit.
100+
</Caption>
101+
</Do>
102+
<Dont>
103+
<img src="https://github.com/primer/brand/assets/912236/841d578b-e353-4dee-acbb-5c8bc3e7c356" />
104+
<Caption>
105+
Don't use multiple testimonials to showcase the same feature to avoid
106+
visual noise.
107+
</Caption>
108+
</Dont>
109+
</DoDontContainer>
110+
111+
## Options
112+
113+
### Size
114+
115+
The testimonial component uses the small size by default. Use the large size to provide more visual weight.
116+
117+
<DoDontContainer>
118+
<Do>
119+
<img src="https://github.com/primer/brand/assets/912236/3eae1c3c-9a8d-4452-8f3a-a973fa103bd3" />
120+
<Caption>
121+
Use the large size when using a single, full-width testimonial.
122+
</Caption>
123+
</Do>
124+
<Dont>
125+
<img src="https://github.com/primer/brand/assets/912236/163324a6-0276-4aa9-94f0-e38d4aea8a3e" />
126+
<Caption>Don't use small size for full-width testimonials.</Caption>
127+
</Dont>
128+
</DoDontContainer>
129+
130+
<DoDontContainer>
131+
<Do>
132+
<img src="https://github.com/primer/brand/assets/912236/58036813-77a1-4af6-a2dc-d2ce05ac085d" />
133+
<Caption>
134+
Use the small size when paired with other components that showcase
135+
features, like rivers.
136+
</Caption>
137+
</Do>
138+
<Dont>
139+
<img src="https://github.com/primer/brand/assets/912236/626bae6a-4bdb-42cb-8b82-2f6615f83283" />
140+
<Caption>
141+
Don't use the large size in small sized areas or components like rivers,
142+
so they don't conflict with the main content. Even if the quote is short,
143+
use the small size instead.
144+
</Caption>
145+
</Dont>
146+
</DoDontContainer>
147+
148+
<DoDontContainer stacked>
149+
<Do>
150+
<img src="https://github.com/primer/brand/assets/912236/5ac744e5-045c-4acc-8dee-38ebc740a8e4" />
151+
<Caption>Use the small size for single row groups of testimonials.</Caption>
152+
</Do>
153+
<Dont>
154+
<img src="https://github.com/primer/brand/assets/912236/ef1e9bdb-2ab8-457f-b54b-ae224c9119c1" />
155+
<Caption>
156+
Don't use the large size in single row groups, even if the content is
157+
short. Stack them vertically and use 2 columns instead.
158+
</Caption>
159+
</Dont>
160+
</DoDontContainer>
161+
162+
## Related components
163+
164+
- [Pillar](/components/Pillar): To display related content with less visual emphasis.
165+
- [Card](/components/Card): To display navigational related content with higher visual weight.
166+
- [River](/components/River): To display navigational related content with higher visual weight.

‎packages/react/src/Testimonial/Testimonial.examples.stories.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import clsx from 'clsx'
55
import {Testimonial, TestimonialProps} from '.'
66
import {Box, FrostedGlassVFX, Grid, Image, Stack, ThemeProvider} from '../'
77
import monaAvatar from '../fixtures/images/avatar-mona.png'
8-
import startShape from '../fixtures/images/testimonial-bg-1.webp'
9-
import endShape from '../fixtures/images/testimonial-bg-2.webp'
8+
import startShape from '../fixtures/images/testimonial-bg-1.png'
9+
import endShape from '../fixtures/images/testimonial-bg-2.png'
1010

1111
import styles from './Testimonial.stories.module.css'
1212

‎packages/react/src/fixtures/images/background-copilot-section-dark.webp

-15.2 KB
Binary file not shown.

‎packages/react/src/fixtures/images/background-light-enterprise-shape-1.png

-231 KB
Loading

‎packages/react/src/fixtures/images/background-light-enterprise-shape-2.png

-285 KB
Loading

‎packages/react/src/fixtures/images/background-light-enterprise-shape-3.png

-300 KB
Loading

‎packages/react/src/fixtures/images/background-light-enterprise-shape-4.png

-101 KB
Loading

‎packages/react/src/fixtures/images/background-light-enterprise-shape-5.png

-317 KB
Loading

‎packages/react/src/fixtures/images/background-light-enterprise-shape-6.png

-81.3 KB
Loading

‎packages/react/src/fixtures/images/background-light-enterprise-shape-7.png

-293 KB
Loading

‎packages/react/src/fixtures/images/testimonial-bg-1.png

257 KB
Loading

‎packages/react/src/fixtures/images/testimonial-bg-1.webp

-43.9 KB
Binary file not shown.

‎packages/react/src/fixtures/images/testimonial-bg-2.png

293 KB
Loading

‎packages/react/src/fixtures/images/testimonial-bg-2.webp

-51.2 KB
Binary file not shown.

0 commit comments

Comments
 (0)