Update Pillar styles (#370)

* Pillar site refactor updates

.changeset/ten-ways-clean.md

@@ -0,0 +1,11 @@
+---
+'@primer/react-brand': patch
+---
+
+Updates `Pillar` icon size, spacing and font settings.
+
+- updated icon size to be medium (32px)
+- updated heading font settings to use size 6 (20px/14px)
+- updated spacing between icon and heading, heading and description, description and link
+- updated link spacing to use margin-top: auto. This property adjust the position depending on it's sibling height size.
+- added stacked with link story

packages/react/src/Pillar/Pillar.features.stories.tsx

@@ -147,10 +147,10 @@ type FixtureData = {
 
 export const Stacked: StoryFn<typeof Pillar> = () => {
   return (
-    <Stack direction="horizontal" gap={'spacious'} padding={'spacious'}>
+    <Stack direction={{narrow: 'vertical', regular: 'horizontal'}} gap="spacious" padding="spacious">
       {fixtureData.map(({heading, description, icon, iconColor}, id) => {
         return (
-          <Pillar key={id} style={{width: '33.3333%'}}>
+          <Pillar key={id} style={{flex: 1}}>
             <Pillar.Icon icon={icon} color={iconColor} />
             <Pillar.Heading>{heading}</Pillar.Heading>
             <Pillar.Description>{description}</Pillar.Description>
@@ -163,10 +163,10 @@ export const Stacked: StoryFn<typeof Pillar> = () => {
 
 export const StackedCentered: StoryFn<typeof Pillar> = () => {
   return (
-    <Stack direction="horizontal" gap={'spacious'} padding={'spacious'}>
+    <Stack direction={{narrow: 'vertical', regular: 'horizontal'}} gap="spacious" padding="spacious">
       {fixtureData.map(({heading, description, icon, iconColor}, id) => {
         return (
-          <Pillar align="center" key={id} style={{width: '33.3333%'}}>
+          <Pillar align="center" key={id} style={{flex: 1}}>
             <Pillar.Icon icon={icon} color={iconColor} />
             <Pillar.Heading>{heading}</Pillar.Heading>
             <Pillar.Description>{description}</Pillar.Description>
@@ -176,3 +176,20 @@ export const StackedCentered: StoryFn<typeof Pillar> = () => {
     </Stack>
   )
 }
+
+export const StackedWithLink: StoryFn<typeof Pillar> = () => {
+  return (
+    <Stack direction={{narrow: 'vertical', regular: 'horizontal'}} gap="spacious" padding="spacious">
+      {fixtureData.map(({heading, description, icon, iconColor, href}, id) => {
+        return (
+          <Pillar key={id} style={{flex: 1}}>
+            <Pillar.Icon icon={icon} color={iconColor} />
+            <Pillar.Heading>{heading}</Pillar.Heading>
+            <Pillar.Description>{description}</Pillar.Description>
+            <Pillar.Link href={href}>Read the documentation</Pillar.Link>
+          </Pillar>
+        )
+      })}
+    </Stack>
+  )
+}

packages/react/src/Pillar/Pillar.module.css

@@ -17,26 +17,19 @@
 
 .Pillar__icon {
   display: flex;
-  margin-bottom: var(--base-size-8);
+  margin-bottom: var(--base-size-24);
 }
 
 .Pillar__heading {
-  margin-bottom: var(--base-size-4);
-}
-
-/* Overrides the default size 6 to have a smaller font size, using 300 values instead of 400 */
-.Pillar__heading.Pillar__heading--size-6 {
-  font-size: var(--brand-text-size-300);
-  line-height: var(--brand-text-lineHeight-300);
-  letter-spacing: var(--brand-heading-letterSpacing-300);
+  margin-bottom: var(--base-size-16);
 }
 
 .Pillar__description {
-  color: var(--brand-color-text-muted);
+  margin-bottom: var(--base-size-24);
 }
 
 .Pillar__link {
-  margin-top: var(--base-size-8);
+  margin-top: auto;
 }
 
 .Pillar__icon--color-default {

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

@@ -4,7 +4,6 @@ declare const styles: {
   readonly "Pillar--align-start": string;
   readonly "Pillar__icon": string;
   readonly "Pillar__heading": string;
-  readonly "Pillar__heading--size-6": string;
   readonly "Pillar__description": string;
   readonly "Pillar__link": string;
   readonly "Pillar__icon--color-default": string;

packages/react/src/Pillar/Pillar.tsx

@@ -72,7 +72,7 @@ function PillarIcon({icon: Icon, className, color = defaultPillarIconColor, ...r
   return (
     <span className={clsx(styles.Pillar__icon, styles[`Pillar__icon--color-${color}`], className)} {...rest}>
       {typeof Icon === 'function' ? (
-        <Icon size={24} />
+        <Icon size="medium" />
       ) : (
         React.isValidElement(Icon) &&
         React.cloneElement(Icon as React.ReactElement, {

packages/react/src/Pillar/Pillar.visual.spec.ts

@@ -53,6 +53,15 @@ test.describe('Visual Comparison: Pillar', () => {
     expect(await page.screenshot()).toMatchSnapshot()
   })
 
+  test('Pillar / Stacked With Link', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-pillar-features--stacked-with-link&viewMode=story',
+    )
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
   test('Pillar / Default', async ({page}) => {
     await page.goto('http://localhost:6006/iframe.html?args=&id=components-pillar--default&viewMode=story')