add hasBorder prop to pillar and increase border radius on Card

.changeset/cold-ears-breathe.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Increased border radius of `Card` from `large` (`16px`) to `xlarge` (`24px`)

.changeset/gorgeous-frogs-buy.md

@@ -0,0 +1,7 @@
+---
+'@primer/react-brand': patch
+---
+
+Added `hasBorder` prop to `Pillar` for alternative presentation
+
+🔗 (See Storybook for an example)[https://primer.style/brand/storybook/?path=/story/components-pillar-features--with-border]

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

@@ -67,6 +67,20 @@ You can add an image to enhance the visual context.
 </Pillar>
 ```
 
+### Border
+
+You can add an optional border to create a visual boundary around the pillar content.
+
+```jsx live
+<Pillar hasBorder>
+  <Pillar.Heading>Code search & code view</Pillar.Heading>
+  <Pillar.Description>
+    Enables you to rapidly search, navigate, and understand code, right from
+    GitHub.com.
+  </Pillar.Description>
+</Pillar>
+```
+
 ### Link
 
 You can add an external link to the Pillar using the `Link` component.

packages/react/src/Card/Card.module.css

@@ -1,7 +1,7 @@
 .Card {
   text-decoration: none;
   color: var(--brand-color-text-default);
-  border-radius: var(--brand-borderRadius-large);
+  border-radius: var(--brand-borderRadius-xlarge);
   transition: transform var(--brand-Card-animation-duration) var(--brand-Card-animation-easing);
   padding: var(--base-size-32);
   display: grid;
@@ -65,7 +65,7 @@
 
 .Card__outer {
   height: 100%;
-  border-radius: var(--brand-borderRadius-large);
+  border-radius: var(--brand-borderRadius-xlarge);
 }
 
 .Card__outer:focus-within {

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

@@ -267,3 +267,19 @@ FrostedGlassEffect.decorators = [
 FrostedGlassEffect.parameters = {
   layout: 'full',
 }
+
+export const WithBorder: StoryFn<typeof Pillar> = () => {
+  return (
+    <Pillar hasBorder>
+      <Pillar.Image
+        aspectRatio="16:10"
+        src={placeholderImage}
+        alt="placeholder, blank area with a gray background color"
+      />
+      <Pillar.Heading>Code search & code view</Pillar.Heading>
+      <Pillar.Description>
+        Enables you to rapidly search, navigate, and understand code, right from GitHub.com.
+      </Pillar.Description>
+    </Pillar>
+  )
+}

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

@@ -5,6 +5,12 @@
   flex-direction: column;
 }
 
+.Pillar--has-border {
+  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+  border-radius: var(--brand-borderRadius-xlarge);
+  padding: var(--base-size-32);
+}
+
 .Pillar.Pillar--align-center {
   align-items: center;
   text-align: center;
@@ -35,7 +41,7 @@
   margin-bottom: var(--base-size-16);
 }
 
-.Pillar__description {
+.Pillar__description:not(.Pillar--has-border .Pillar__description:last-child) {
   margin-bottom: var(--base-size-24);
 }
 

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

@@ -1,5 +1,6 @@
 declare const styles: {
   readonly "Pillar": string;
+  readonly "Pillar--has-border": string;
   readonly "Pillar--align-center": string;
   readonly "Pillar--align-start": string;
   readonly "Pillar__image": string;

packages/react/src/Pillar/Pillar.test.tsx

@@ -118,4 +118,19 @@ describe('Pillar', () => {
     expect(pillarEl).toHaveClass(classToCheckLink)
     expect(pillarEl).toHaveClass(classToCheckLinkColor)
   })
+
+  it('renders a border class correctly into the document', () => {
+    const mockTestId = 'test'
+    const classToCheck = 'Pillar--has-border'
+
+    const {getByTestId} = render(
+      <Pillar data-testid={mockTestId} hasBorder>
+        <Pillar.Heading>{mockHeading}</Pillar.Heading>
+        <Pillar.Description>{mockDescription}</Pillar.Description>
+      </Pillar>,
+    )
+
+    const pillarEl = getByTestId(mockTestId)
+    expect(pillarEl).toHaveClass(classToCheck)
+  }
 })

packages/react/src/Pillar/Pillar.tsx

@@ -28,11 +28,24 @@ export type PillarProps<C extends keyof JSX.IntrinsicElements = 'div'> = React.H
    * Aligns the pillar content
    */
   align?: 'start' | 'center'
+  /**
+   * Enables optional border around the pillar content
+   */
+  hasBorder?: boolean
 } & (C extends 'article' ? PropsWithChildren<BaseProps<HTMLElement>> : PropsWithChildren<BaseProps<HTMLDivElement>>)
 
 const PillarRoot = forwardRef(
   (
-    {children, className, animate, as = 'div', align = 'start', style, ...rest}: PropsWithChildren<PillarProps>,
+    {
+      children,
+      className,
+      animate,
+      as = 'div',
+      align = 'start',
+      style,
+      hasBorder = false,
+      ...rest
+    }: PropsWithChildren<PillarProps>,
     ref: Ref<HTMLDivElement>,
   ) => {
     const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)
@@ -57,7 +70,13 @@ const PillarRoot = forwardRef(
 
     return (
       <Component
-        className={clsx(styles.Pillar, styles[`Pillar--align-${align}`], animationClasses, className)}
+        className={clsx(
+          styles.Pillar,
+          styles[`Pillar--align-${align}`],
+          hasBorder && styles['Pillar--has-border'],
+          animationClasses,
+          className,
+        )}
         ref={ref}
         {...(rest as HTMLAttributes<HTMLElement>)}
         style={{...animationInlineStyles, ...style}}

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

@@ -93,4 +93,11 @@ test.describe('Visual Comparison: Pillar', () => {
     await page.waitForTimeout(3000)
     expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
   })
+
+  test('Pillar / With Border', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-pillar-features--with-border&viewMode=story')
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
+  })
 })