[Testimonial] Site refactor updates

.changeset/early-lamps-guess.md

@@ -0,0 +1,9 @@
+---
+'@primer/react-brand': minor
+---
+
+> **Warning**
+> This is a breaking change to the `Testimonial ` component. 
+
+- Update `Testimonial` component provider layout styles
+- Remove `Testimonial` `align` prop

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

@@ -46,7 +46,8 @@ Avatars and logos are optional and can be used to provide more credibility about
   <Dont>
     <img src="https://github.com/primer/brand/assets/912236/bcda5e31-1ccc-44a5-9d65-2f6aad326f4b" />
     <Caption>
-      Don't use illustrations or generic images. Use real life images to provide trust.
+      Don't use illustrations or generic images. Use real life images to provide
+      trust.
     </Caption>
   </Dont>
 </DoDontContainer>
@@ -119,9 +120,9 @@ The testimonial component uses the small size by default. Use the large size to
   <Dont>
     <img src="https://github.com/primer/brand/assets/912236/63143585-1c28-4380-853d-a6e5dff6f8c1" />
     <Caption>
-      Don't use the large size in small sized areas or components like rivers, so
-      they don't conflict with the main content. Even if the quote is short, use
-      the small size instead.
+      Don't use the large size in small sized areas or components like rivers,
+      so they don't conflict with the main content. Even if the quote is short,
+      use the small size instead.
     </Caption>
   </Dont>
 </DoDontContainer>
@@ -140,10 +141,6 @@ The testimonial component uses the small size by default. Use the large size to
   </Dont>
 </DoDontContainer>
 
-### Alignment
-
-Testimonials can be aligned to the start or center of the container. Aligning to the start is the default and recommended behavior. Use center alignment only when the overall page design calls for this alignment and the quotes aren't too long to avoid the content from looking too spread out.
-
 ## Related components
 
 - [Pillar](/components/Pillar): To display related content with less visual emphasis.

apps/docs/content/components/Testimonial/react.mdx

@@ -3,7 +3,7 @@ title: Testimonial
 status: Experimental
 figma: 'https://www.figma.com/file/BJ95AjraesmRCWsKA013GS/Primer-Brand?node-id=1852%3A27522'
 source: https://github.com/primer/brand/blob/main/packages/react/src/Testimonial/Testimonial.tsx
-storybook: '/brand/storybook/?path=/story/components-Testimonial--scale'
+storybook: '/brand/storybook/?path=/story/components-testimonial'
 description: Use the testimonial component to display a quote from a customer or user.
 ---
 
@@ -59,22 +59,6 @@ A logo (or similar) visual can be provided as an alternative to avatars.
 </Testimonial>
 ```
 
-### Alignment
-
-Use `align` to alternate the text direction. Available options are `start` (default) and `center`.
-
-```jsx live
-<Testimonial align="center">
-  <Testimonial.Quote>
-    GitHub helps us ensure that we have our security controls baked into our
-    pipelines all the way from the first line of code we&apos;re writing.
-  </Testimonial.Quote>
-  <Testimonial.Name position="Staff Software Engineer">
-    David Ross
-  </Testimonial.Name>
-</Testimonial>
-```
-
 ### Size
 
 Use `size` to alternate the text size. Available options are `small` (default) and `large`.
@@ -99,14 +83,14 @@ Use `Stack` to help position multiple, adjacent Testimonials alongside one anoth
 
 ```jsx live
 <Stack direction="horizontal" gap="spacious" padding="spacious">
-  <Testimonial align="center">
+  <Testimonial>
     <Testimonial.Quote>
       GitHub helps us ensure that we have our security controls baked into our
       pipelines all the way from the first line of code we&apos;re writing.
     </Testimonial.Quote>
     <Testimonial.Name>David Ross</Testimonial.Name>
   </Testimonial>
-  <Testimonial align="center">
+  <Testimonial>
     <Testimonial.Quote>
       GitHub helps us ensure that we have our security controls baked into our
       pipelines all the way from the first line of code we&apos;re writing.
@@ -143,7 +127,6 @@ Pass additional content about the testimonial provider using `position`.
 | `children`       | <PropTableValues addLineBreaks values={['Testimonial.Quote','Testimonial.Name','Testimonial.Logo','Testimonial.Avatar','React.ReactNode' ]} addLineBreaks /> |             | Valid child nodes                             |
 | `className`      | `string`                                                                                                                                                     |             | Sets a custom class                           |
 | `id`             | `string`                                                                                                                                                     |             | Sets a custom id                              |
-| `align`          | <PropTableValues addLineBreaks values={['start','center']}/>                                                                                                 |  `'start'`  | Set alignment of inner text                   |
 | `ref`            | `React.RefObject`                                                                                                                                            |             | Forward a Ref to the underlying DOM node      |
 | `size`           | <PropTableValues addLineBreaks values={['small','large']}/>                                                                                                  |  `'small'`  | Set size of quote's text                      |
 | `quoteMarkColor` | <PropTableValues addLineBreaks values={TestimonialQuoteMarkColors}/>                                                                                         | `'default'` | Color or gradient fill of the the quote mark. |

packages/design-tokens/src/tokens/functional/components/testimonial/base.json

@@ -4,34 +4,26 @@
       "quote": {
         "fontSize": {
           "default": {
-            "value": "var(--brand-text-size-300)"
+            "value": "var(--brand-text-size-400)"
           },
           "large": {
             "value": "var(--brand-text-size-600)"
           }
         },
         "fontWeight": {
           "default": {
-            "value": "var(--brand-text-weight-300)"
-          },
-          "large": {
             "value": "var(--brand-heading-weight-600)"
-          }
-        },
-        "lineHeight": {
-          "default": {
-            "value": "var(--brand-text-lineHeight-300)"
           },
           "large": {
-            "value": "var(--brand-text-lineHeight-600)"
+            "value": "var(--brand-heading-weight-600)"
           }
         },
         "letterSpacing": {
           "default": {
-            "value": "var(--brand-text-letterSpacing-300)"
+            "value": "var(--brand-text-letterSpacing-400)"
           },
           "large": {
-            "value": "var(--brand-text-letterSpacing-600)"
+            "value": "var(--brand-text-letterSpacing-900)"
           }
         }
       }

packages/react/src/Testimonial/Testimonial.module.css

@@ -1,12 +1,7 @@
 .Testimonial {
   display: grid;
-  gap: var(--base-size-16);
   color: var(--brand-color-text-default);
   font-family: var(--brand-fontStack-sansSerif);
-  font-size: var(--brand-Testimonial-quote-fontSize-default);
-  font-weight: var(--brand-Testimonial-quote-fontWeight-default);
-  letter-spacing: var(--brand-Testimonial-quote-letterSpacing-default);
-  line-height: var(--brand-Testimonial-quote-lineHeight-default);
 }
 
 .Testimonial__quoteMark {
@@ -39,33 +34,24 @@
   mask-composite: exclude;
 }
 
-.Testimonial--center {
-  text-align: center;
-  justify-items: center;
-}
-
-.Testimonial--size-large {
-  font-size: var(--brand-Testimonial-quote-fontSize-large);
-  font-weight: var(--brand-Testimonial-quote-fontWeight-large);
-  letter-spacing: var(--brand-Testimonial-quote-letterSpacing-large);
-  line-height: var(--brand-Testimonial-quote-lineHeight-large);
-  gap: var(--base-size-24);
-}
-
 .Testimonial--size-large .Testimonial__quoteMark {
-  font-size: 3em;
+  font-size: 7.5rem; /* 120px */
   line-height: 1;
 }
 
 .Testimonial-quote {
-  font-size: 1em;
   font-family: var(--brand-fontStack-sansSerif);
-  margin-top: calc(var(--base-size-16) * -1); /* negate grid gap */
+  font-size: var(--brand-Testimonial-quote-fontSize-default);
+  font-weight: var(--brand-Testimonial-quote-fontWeight-default);
+  letter-spacing: var(--brand-Testimonial-quote-letterSpacing-default);
+  line-height: 1.2; /* requires custom line-height */
   display: block;
 }
 
 .Testimonial--size-large .Testimonial-quote {
-  margin-top: calc(var(--base-size-24) * -1); /* negate grid gap */
+  font-size: var(--brand-Testimonial-quote-fontSize-large);
+  font-weight: var(--brand-Testimonial-quote-fontWeight-large);
+  letter-spacing: var(--brand-Testimonial-quote-letterSpacing-large);
 }
 
 .Testimonial-quote--muted {
@@ -77,19 +63,28 @@
   font-style: normal;
 }
 
-.Testimonial--size-large .Testimonial-quote {
-  font-weight: var(--base-text-weight-semibold);
-  letter-spacing: var(--brand-text-letterSpacing-900);
-  line-height: 1.2; /* requires custom line-height */
+.Testimonial__media {
+  display: flex;
+  gap: var(--base-size-16);
+  align-items: center;
+  margin-top: var(--base-size-24);
+}
+
+.Testimonial--size-large .Testimonial__media {
+  margin-top: var(--base-size-64);
+}
+
+.Testimonial-caption {
+  display: flex;
+  flex-direction: column;
 }
 
 .Testimonial-from {
-  font-family: var(--brand-fontStack-monospace);
+  font-weight: var(--base-text-weight-semibold);
 }
 
-.Testimonial--center .Testimonial-logo-image {
-  margin-left: auto;
-  margin-right: auto;
+.Testimonial-position {
+  font-family: var(--brand-fontStack-monospace);
 }
 
 .Testimonial__quoteMark--default {

packages/react/src/Testimonial/Testimonial.module.css.d.ts

@@ -1,12 +1,13 @@
 declare const styles: {
   readonly "Testimonial": string;
   readonly "Testimonial__quoteMark": string;
-  readonly "Testimonial--center": string;
   readonly "Testimonial--size-large": string;
   readonly "Testimonial-quote": string;
   readonly "Testimonial-quote--muted": string;
+  readonly "Testimonial__media": string;
+  readonly "Testimonial-caption": string;
   readonly "Testimonial-from": string;
-  readonly "Testimonial-logo-image": string;
+  readonly "Testimonial-position": string;
   readonly "Testimonial__quoteMark--default": string;
   readonly "Testimonial__quoteMark--blue": string;
   readonly "Testimonial__quoteMark--blue-purple": string;

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

@@ -8,7 +8,6 @@ export default {
   title: 'Components/Testimonial',
   component: Testimonial,
   args: {
-    align: 'start',
     quoteMarkColor: defaultQuoteMarkColor,
     name: 'David Ross',
     position: 'Staff Security Engineer',
@@ -19,9 +18,6 @@ export default {
     width: 400,
   },
   argTypes: {
-    align: {
-      options: ['start', 'center'],
-    },
     quoteMarkColor: {
       control: {
         type: 'radio',
@@ -178,9 +174,6 @@ Duo.parameters = {
     defaultViewport: 'ipad12p',
   },
 }
-Duo.args = {
-  align: 'center',
-}
 
 export const Trio = args => (
   <Stack
@@ -233,15 +226,12 @@ export const Trio = args => (
     </Testimonial>
   </Stack>
 )
-Trio.args = {
-  align: 'center',
-}
 
 export const ColoredQuoteMark = args => (
-  <Testimonial {...args}>
+  <Testimonial style={{width: 400}} {...args}>
     <Testimonial.Quote>
-      <em>GitHub helps us ensure that we have our security controls baked into our pipelines</em> all the way from the
-      first line of code we&apos;re writing.
+      GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line
+      of code we&apos;re writing.
     </Testimonial.Quote>
     <Testimonial.Name position="Staff Security Engineer">David Ross</Testimonial.Name>
 
@@ -257,13 +247,12 @@ ColoredQuoteMark.args = {
 }
 
 export const Large = args => (
-  <Testimonial {...args}>
+  <Testimonial style={{width: 720}} {...args}>
     <Testimonial.Quote>
       GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line
       of code we&apos;re writing.
     </Testimonial.Quote>
     <Testimonial.Name position="Staff Security Engineer">David Ross</Testimonial.Name>
-
     <Testimonial.Avatar
       src="https://avatars.githubusercontent.com/u/92997159?v=4"
       alt="Circular avatar from David Ross's GitHub profile"
@@ -275,8 +264,8 @@ Large.args = {
   size: 'large',
 }
 
-export const HighlightedPortion = args => (
-  <Testimonial {...args}>
+export const LargeHighlightedPortion = args => (
+  <Testimonial style={{width: 720}} {...args}>
     <Testimonial.Quote>
       <em>GitHub helps us ensure that we have our security controls baked into our pipelines</em> all the way from the
       first line of code we&apos;re writing.
@@ -290,6 +279,6 @@ export const HighlightedPortion = args => (
   </Testimonial>
 )
 
-HighlightedPortion.args = {
+LargeHighlightedPortion.args = {
   size: 'large',
 }