feat: add support for size to Blankslate (#5899)

Co-authored-by: Lukas Oppermann <[email protected]>
Co-authored-by: Marie Lucca <[email protected]>

Author: 3 people

.changeset/famous-eagles-think.md

@@ -2,6 +2,7 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 import {viewports} from '../test-helpers/viewports'
+import {matrix, serialize} from '../test-helpers/matrix'
 
 const stories: Array<{title: string; id: string; viewports?: Array<keyof typeof viewports>}> = [
   {
@@ -41,6 +42,12 @@ const stories: Array<{title: string; id: string; viewports?: Array<keyof typeof
   },
 ]
 
+const scenarios = matrix({
+  size: ['small', 'medium', 'large'],
+  spacious: [true, false],
+  border: [true, false],
+})
+
 test.describe('Blankslate', () => {
   for (const story of stories) {
     test.describe(story.title, () => {
@@ -78,4 +85,20 @@ test.describe('Blankslate', () => {
       }
     })
   }
+
+  for (const scenario of scenarios) {
+    const id = serialize(scenario)
+
+    test.describe(id, () => {
+      test('default @vrt', async ({page}) => {
+        await visit(page, {
+          id: 'experimental-components-blankslate--playground',
+          args: scenario,
+        })
+
+        // Default state
+        expect(await page.screenshot()).toMatchSnapshot(`Blankslate.${id}.png`)
+      })
+    })
+  }
 })

.changeset/purple-numbers-leave.md

@@ -51,6 +51,12 @@
       "type": "string",
       "description": "Class name(s) for custom styling.",
       "defaultValue": ""
+    },
+    {
+      "name": "size",
+      "type": "'small' | 'medium' | 'large'",
+      "description": "The size of the componeont",
+      "defaultValue": "'medium'"
     }
   ],
   "subcomponents": [

.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-dark-colorblind-linux.png

@@ -87,7 +87,7 @@ export const WithBorder = () => (
 )
 
 export const Narrow = () => (
-  <Blankslate narrow>
+  <Blankslate border narrow>
     <Blankslate.Visual>
       <BookIcon size="medium" />
     </Blankslate.Visual>
@@ -105,3 +105,27 @@ export const Spacious = () => (
     <Blankslate.Description>Use it to provide information when no dynamic content exists.</Blankslate.Description>
   </Blankslate>
 )
+
+export const SizeSmall = () => (
+  <Blankslate border size="small">
+    <Blankslate.Visual>
+      <BookIcon size="medium" />
+    </Blankslate.Visual>
+    <Blankslate.Heading>Blankslate heading</Blankslate.Heading>
+    <Blankslate.Description>Use it to provide information when no dynamic content exists.</Blankslate.Description>
+    <Blankslate.PrimaryAction href="#">Primary action</Blankslate.PrimaryAction>
+    <Blankslate.SecondaryAction href="#">Secondary action</Blankslate.SecondaryAction>
+  </Blankslate>
+)
+
+export const SizeLarge = () => (
+  <Blankslate size="large">
+    <Blankslate.Visual>
+      <BookIcon size="medium" />
+    </Blankslate.Visual>
+    <Blankslate.Heading>Blankslate heading</Blankslate.Heading>
+    <Blankslate.Description>Use it to provide information when no dynamic content exists.</Blankslate.Description>
+    <Blankslate.PrimaryAction href="#">Primary action</Blankslate.PrimaryAction>
+    <Blankslate.SecondaryAction href="#">Secondary action</Blankslate.SecondaryAction>
+  </Blankslate>
+)

.playwright/snapshots/components/Blankslate.test.ts-snapshots/Blankslate-Default-dark-dimmed-linux.png

@@ -1,95 +1,73 @@
 import {Blankslate} from '../Blankslate'
 import figma from '@figma/code-connect'
 
+const props = {
+  leadingVisual: figma.nestedProps('_BlankslateVisual', {
+    item: figma.children('leadingVisual'),
+  }),
+  size: figma.enum('size', {
+    small: 'small',
+    medium: 'medium',
+    large: 'large',
+  }),
+  spacious: figma.boolean('spacious'),
+  border: figma.boolean('border'),
+  heading: figma.textContent('Text: Heading'),
+  description: figma.textContent('Text: Description'),
+  PrimaryAction: figma.children('_BlankSlate.PrimaryAction'),
+  SecondaryActionText: figma.boolean('SecondaryAction?', {
+    true: figma.textContent('Secondary action link'),
+    false: undefined,
+  }),
+}
+
 figma.connect(Blankslate, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4398-2383&m=dev', {
-  props: {
-    leadingVisual: figma.nestedProps('_BlankslateVisual', {
-      item: figma.children('leadingVisual'),
-    }),
-    narrow: figma.boolean('narrow?'),
-    spacious: figma.boolean('spacious?'),
-    border: figma.boolean('border?'),
-    heading: figma.textContent('Text: Heading'),
-    description: figma.textContent('Text: Description'),
-  },
-  variant: {primaryAction: 'false', secondaryAction: 'false'},
-  example: ({leadingVisual, border, spacious, narrow, description, heading}) => (
-    <Blankslate border={border} spacious={spacious} narrow={narrow}>
+  props,
+  variant: {'SecondaryAction?': 'true'},
+  example: ({leadingVisual, border, spacious, size, description, heading, SecondaryActionText, PrimaryAction}) => (
+    <Blankslate border={border} spacious={spacious} size={size}>
       <Blankslate.Visual>{leadingVisual.item}</Blankslate.Visual>
       <Blankslate.Heading>{heading}</Blankslate.Heading>
       <Blankslate.Description>{description}</Blankslate.Description>
+      <Blankslate.SecondaryAction href="">{SecondaryActionText}</Blankslate.SecondaryAction>
+      {PrimaryAction}
     </Blankslate>
   ),
 })
 figma.connect(Blankslate, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4398-2383&m=dev', {
-  props: {
-    leadingVisual: figma.nestedProps('_BlankslateVisual', {
-      item: figma.children('leadingVisual'),
-    }),
-    narrow: figma.boolean('narrow?'),
-    spacious: figma.boolean('spacious?'),
-    border: figma.boolean('border?'),
-    heading: figma.textContent('Text: Heading'),
-    description: figma.textContent('Text: Description'),
-    primaryAction: figma.nestedProps('Primary action', {
-      text: figma.textContent('Button'),
-    }),
-  },
-  variant: {primaryAction: 'true', secondaryAction: 'false'},
-  example: ({leadingVisual, border, spacious, narrow, description, heading, primaryAction}) => (
-    <Blankslate border={border} spacious={spacious} narrow={narrow}>
+  props,
+  variant: {'SecondaryAction?': 'false'},
+  example: ({leadingVisual, border, spacious, size, description, heading, PrimaryAction}) => (
+    <Blankslate border={border} spacious={spacious} size={size}>
       <Blankslate.Visual>{leadingVisual.item}</Blankslate.Visual>
       <Blankslate.Heading>{heading}</Blankslate.Heading>
       <Blankslate.Description>{description}</Blankslate.Description>
-      <Blankslate.PrimaryAction href="">{primaryAction.text}</Blankslate.PrimaryAction>
+      {PrimaryAction}
     </Blankslate>
   ),
 })
-figma.connect(Blankslate, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4398-2383&m=dev', {
-  props: {
-    leadingVisual: figma.nestedProps('_BlankslateVisual', {
-      item: figma.children('leadingVisual'),
-    }),
-    narrow: figma.boolean('narrow?'),
-    spacious: figma.boolean('spacious?'),
-    border: figma.boolean('border?'),
-    heading: figma.textContent('Text: Heading'),
-    description: figma.textContent('Text: Description'),
-    primaryAction: figma.nestedProps('Primary action', {
-      text: figma.textContent('Button'),
-    }),
-    secondaryAction: figma.textContent('Secondary action link'),
-  },
-  variant: {primaryAction: 'true', secondaryAction: 'true'},
-  example: ({leadingVisual, border, spacious, narrow, description, heading, primaryAction, secondaryAction}) => (
-    <Blankslate border={border} spacious={spacious} narrow={narrow}>
-      <Blankslate.Visual>{leadingVisual.item}</Blankslate.Visual>
-      <Blankslate.Heading>{heading}</Blankslate.Heading>
-      <Blankslate.Description>{description}</Blankslate.Description>
-      <Blankslate.PrimaryAction href="">{primaryAction.text}</Blankslate.PrimaryAction>
-      <Blankslate.SecondaryAction href="">{secondaryAction}</Blankslate.SecondaryAction>
-    </Blankslate>
-  ),
-})
-figma.connect(Blankslate, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4398-2383&m=dev', {
-  props: {
-    leadingVisual: figma.nestedProps('_BlankslateVisual', {
-      item: figma.children('leadingVisual'),
-    }),
-    narrow: figma.boolean('narrow?'),
-    spacious: figma.boolean('spacious?'),
-    border: figma.boolean('border?'),
-    heading: figma.textContent('Text: Heading'),
-    description: figma.textContent('Text: Description'),
-    secondaryAction: figma.textContent('Secondary action link'),
+
+figma.connect(
+  Blankslate,
+  'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=40491-3841&t=5mMfBZbhHgyouYtk-4',
+  {
+    props: {
+      PrimaryAction: figma.nestedProps('Primary action', {
+        text: figma.textContent('Button'),
+        icon: figma.children('icon'),
+        variant: figma.enum('variant', {
+          primary: 'primary',
+          secondary: 'secondary',
+          danger: 'danger',
+          invisible: 'invisible',
+        }),
+      }),
+    },
+    example: ({PrimaryAction}) => (
+      <Blankslate.PrimaryAction href="">
+        {PrimaryAction.icon}
+        {PrimaryAction.text}
+      </Blankslate.PrimaryAction>
+    ),
   },
-  variant: {primaryAction: 'false', secondaryAction: 'true'},
-  example: ({leadingVisual, border, spacious, narrow, description, heading, secondaryAction}) => (
-    <Blankslate border={border} spacious={spacious} narrow={narrow}>
-      <Blankslate.Visual>{leadingVisual.item}</Blankslate.Visual>
-      <Blankslate.Heading>{heading}</Blankslate.Heading>
-      <Blankslate.Description>{description}</Blankslate.Description>
-      <Blankslate.SecondaryAction href="">{secondaryAction}</Blankslate.SecondaryAction>
-    </Blankslate>
-  ),
-})
+)