Hidden: rename prop on -> when and reformat stories and add e2e t…

…ests (#2985)

* Hidden: rename  ->  and reformat stories and add e2e tests

* Update generated/components.json

* update tests and story

* Update generated/components.json

* test(vrt): update snapshots

* add changeset

---------

Co-authored-by: broccolinisoup <broccolinisoup@users.noreply.github.com>

.changeset/seven-ears-know.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Hidden: rename prop 'on' -> 'when'

docs/content/drafts/Hidden.mdx

@@ -18,15 +18,15 @@ The `Hidden` component is a utility component that will help you hide or show co
 ### Single viewport value provided
 
 ```jsx live drafts
-<Hidden on="narrow">
+<Hidden when="narrow">
   <Placeholder height="80px" label="This is not visible in narrow viewport" />
 </Hidden>
 ```
 
 ### Multiple viewport values provided
 
 ```jsx live drafts
-<Hidden on={['narrow', 'wide']}>
+<Hidden when={['narrow', 'wide']}>
   <Placeholder height="80px" label="This is not visible in narrow and wide viewport" />
 </Hidden>
 ```

docs/content/drafts/PageHeader.mdx

@@ -293,10 +293,10 @@ import {PageHeader} from '@primer/react/drafts'
   <PageHeader.TitleArea>
     <PageHeader.Title as="h2">Webhooks</PageHeader.Title>
     <PageHeader.Actions>
-      <Hidden on={['narrow']}>
+      <Hidden when={['narrow']}>
         <Button variant="primary">New webhook</Button>
       </Hidden>
-      <Hidden on={['regular', 'wide']}>
+      <Hidden when={['regular', 'wide']}>
         <Button variant="primary">New</Button>
       </Hidden>
     </PageHeader.Actions>

e2e/components/Hidden.test.ts

@@ -0,0 +1,50 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+import {viewports} from '../test-helpers/viewports'
+
+test.describe('Hidden', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-hidden--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Regular size viewport
+          await page.setViewportSize({width: viewports['primer.breakpoint.md'], height: 768})
+          await page
+            .getByText('The below content is visible when the viewport is regular or wide but hidden when narrow:')
+            .waitFor()
+          expect(await page.screenshot()).toMatchSnapshot(`Hidden.Default.medium.${theme}.png`)
+          // Wide size viewport
+          await page.setViewportSize({width: viewports['primer.breakpoint.lg'], height: 768})
+          await page
+            .getByText('The below content is visible when the viewport is regular or wide but hidden when narrow:')
+            .waitFor()
+          expect(await page.screenshot()).toMatchSnapshot(`Hidden.Default.wide.${theme}.png`)
+          // Narrow size viewport
+          await page.setViewportSize({width: viewports['primer.breakpoint.xs'], height: 768})
+          await page
+            .getByText('The below content is visible when the viewport is regular or wide but hidden when narrow:')
+            .waitFor()
+          expect(await page.screenshot()).toMatchSnapshot(`Hidden.Default.narrow.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-hidden--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+})

generated/components.json

@@ -2268,10 +2268,15 @@
       "name": "Hidden",
       "status": "draft",
       "a11yReviewed": false,
-      "stories": [],
+      "stories": [
+        {
+          "id": "components-hidden--default",
+          "code": "() => (\n  <>\n    <Text>\n      The below content is visible when the viewport is regular or wide but\n      hidden when narrow:\n    </Text>\n    <Hidden when=\"narrow\">\n      This is the said content and it is visible when the viewport is regular or\n      wide but hidden when narrow\n    </Hidden>\n  </>\n)"
+        }
+      ],
       "props": [
         {
-          "name": "on",
+          "name": "when",
           "type": "'narrow' | 'wide' | 'regular' | Array<'narrow' | 'regular' | 'wide'>",
           "defaultValue": "",
           "description": "In which viewport(s) the children are going to be hidden"

script/generate-e2e-tests.js

@@ -374,6 +374,17 @@ const components = new Map([
       ],
     },
   ],
+  [
+    'Hidden',
+    {
+      stories: [
+        {
+          id: 'drafts-components-hidden--default',
+          name: 'Default',
+        },
+      ],
+    },
+  ],
   [
     'IconButton',
     {

src/Hidden/Hidden.docs.json

@@ -6,7 +6,7 @@
   "stories": [],
   "props": [
     {
-      "name": "on",
+      "name": "when",
       "type": "'narrow' | 'wide' | 'regular' | Array<'narrow' | 'regular' | 'wide'>",
       "defaultValue": "",
       "description": "In which viewport(s) the children are going to be hidden"

src/Hidden/examples.stories.tsx → src/Hidden/Hidden.examples.stories.tsx

@@ -4,7 +4,7 @@ import {Button, Link, Text, StateLabel, BranchName, Box} from '..'
 import {ArrowRightIcon} from '@primer/octicons-react'
 
 import {PageHeader} from '../PageHeader'
-import Hidden from '../Hidden'
+import Hidden from '.'
 
 export default {
   title: 'Drafts/Components/Hidden/Examples',
@@ -30,11 +30,11 @@ export const Webhooks = () => (
         <PageHeader.Title as="h2">Webhooks</PageHeader.Title>
 
         <PageHeader.Actions>
-          <Hidden on={['narrow']}>
+          <Hidden when={['narrow']}>
             <Button variant="primary">New webhook</Button>
           </Hidden>
 
-          <Hidden on={['regular', 'wide']}>
+          <Hidden when={['regular', 'wide']}>
             <Button variant="primary">New</Button>
           </Hidden>
         </PageHeader.Actions>
@@ -60,7 +60,7 @@ export const PullRequestPage = () => (
       </PageHeader.TitleArea>
       <PageHeader.Description>
         <StateLabel status="pullOpened">Open</StateLabel>
-        <Hidden on={['narrow']}>
+        <Hidden when={['narrow']}>
           <Text sx={{fontSize: 1, color: 'fg.muted'}}>
             <Link href="#" muted sx={{fontWeight: 'bold'}}>
               broccolinisoup
@@ -69,7 +69,7 @@ export const PullRequestPage = () => (
             <BranchName href="#">broccolinisoup/add-hidden-component</BranchName>
           </Text>
         </Hidden>
-        <Hidden on={['regular', 'wide']}>
+        <Hidden when={['regular', 'wide']}>
           <Text sx={{fontSize: 1, color: 'fg.muted'}}>
             <BranchName href="#">main</BranchName>
             <ArrowRightIcon />

src/Hidden/Hidden.features.stories.tsx

@@ -0,0 +1,29 @@
+import {ComponentMeta} from '@storybook/react'
+import React from 'react'
+import {Hidden} from './Hidden'
+import {Box, Button} from '..'
+
+export default {
+  title: 'Drafts/Components/Hidden/Features',
+  component: Hidden,
+} as ComponentMeta<typeof Hidden>
+
+export const HideContent = () => (
+  <Box>
+    <Hidden when="narrow"> This value is shown in regular and wide viewports</Hidden>
+    <Hidden when="regular"> This value is shown in narrow and wide viewports</Hidden>
+    <Hidden when="wide"> This value is shown in narrow and regular viewports</Hidden>
+  </Box>
+)
+
+export const RenderContentResponsively = () => (
+  <Box>
+    <Hidden when="narrow">
+      <Button variant="primary">I am visible when the viewport is regular or wide viewport</Button>
+    </Hidden>
+
+    <Hidden when={['regular', 'wide']}>
+      <Button variant="primary">I am visible when the viewport is narrow</Button>
+    </Hidden>
+  </Box>
+)

src/Hidden/Hidden.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import {ComponentMeta, ComponentStory} from '@storybook/react'
 
 import Hidden from '.'
+import Text from '../Text'
 
 export default {
   title: 'Drafts/Components/Hidden',
@@ -11,20 +12,29 @@ export default {
     },
   },
   args: {
-    on: ['regular'],
+    when: ['narrow'],
   },
   argTypes: {
-    on: {
+    when: {
       type: {
         name: 'enum',
         value: ['narrow', 'regular', 'wide'],
       },
       control: {type: 'multi-select'},
-      description: 'The viewport type to hide the content on.',
+      description: 'The viewport type where the content is hidden.',
     },
   },
 } as ComponentMeta<typeof Hidden>
 
+export const Default = () => (
+  <>
+    <Text>The below content is visible when the viewport is regular or wide but hidden when narrow:</Text>
+    <Hidden when="narrow">
+      This is the said content and it is visible when the viewport is regular or wide but hidden when narrow
+    </Hidden>
+  </>
+)
+
 export const Playground: ComponentStory<typeof Hidden> = args => (
-  <Hidden {...args}>The content is hidden on {Array(args.on).join(',')}</Hidden>
+  <Hidden {...args}>The content is hidden when the viewport is {Array(args.when).join(',')}</Hidden>
 )

src/Hidden/Hidden.test.tsx

@@ -20,8 +20,8 @@ describe('Hidden', () => {
     Component: Hidden,
     options: {skipAs: true, skipSx: true},
     toRender: () => (
-      <Hidden on={'narrow'}>
-        <div>Hidden on narrow</div>
+      <Hidden when={'narrow'}>
+        <div>Hidden when narrow</div>
       </Hidden>
     ),
   })
@@ -31,16 +31,16 @@ describe('Hidden', () => {
     Hidden,
   })
 
-  it('renders `on` prop as expected', () => {
+  it('renders `when` prop as expected', () => {
     const {container} = render(
-      <Hidden on={'narrow'}>
-        <div>Hidden on narrow</div>
+      <Hidden when={'narrow'}>
+        <div>Hidden when narrow</div>
       </Hidden>,
     )
     expect(container).toMatchSnapshot()
   })
 
-  it('renders the styles as expected when a single viewport value is provided as a string via `on` prop', () => {
+  it('renders the styles as expected when a single viewport value is provided as a string via `when` prop', () => {
     const expectedStyles = {
       // `.replace` is used because renderStyles return the JSON object without a space after the column
       [`${mediaQueries.regular.replace(': ', ':')}`]: {
@@ -49,14 +49,14 @@ describe('Hidden', () => {
     }
     expect(
       renderStyles(
-        <Hidden on="regular">
-          <div>This is hidden on regular viewports</div>
+        <Hidden when="regular">
+          <div>This is hidden when regular viewports</div>
         </Hidden>,
       ),
     ).toEqual(expect.objectContaining(expectedStyles))
   })
 
-  it('renders the styles as expected when multiple viewport values are provided as an array via `on` prop', () => {
+  it('renders the styles as expected when multiple viewport values are provided as an array via `when` prop', () => {
     const expectedStyles = {
       [`${mediaQueries.narrow.replace(': ', ':')}`]: {
         display: 'none',
@@ -67,13 +67,13 @@ describe('Hidden', () => {
     }
     expect(
       renderStyles(
-        <Hidden on={['narrow', 'wide']}>
-          <div>This is hidden on regular and wide viewports</div>
+        <Hidden when={['narrow', 'wide']}>
+          <div>This is hidden when regular and wide viewports</div>
         </Hidden>,
       ),
     ).toEqual(expect.objectContaining(expectedStyles))
   })
 })
 
-checkStoriesForAxeViolations('features', '../Hidden/')
-checkStoriesForAxeViolations('examples', '../Hidden/')
+checkStoriesForAxeViolations('Hidden.features', '../Hidden/')
+checkStoriesForAxeViolations('Hidden.examples', '../Hidden/')

src/Hidden/Hidden.tsx

@@ -6,10 +6,10 @@ import Box from '../Box'
 type Viewport = 'narrow' | 'regular' | 'wide'
 
 export type HiddenProps = {
-  on: Array<Viewport> | Viewport
+  when: Array<Viewport> | Viewport
   children: React.ReactNode
 }
-/* Normalize the value that is received from the prop `on`.
+/* Normalize the value that is received from the prop `when`.
  * For array types : ['narrow', 'wide'] -> {narrow: true, wide: true}
  * For string types: 'narrow' -> {narrow: true}
  */
@@ -30,9 +30,9 @@ function normalize(hiddenViewports: Array<Viewport> | Viewport): ResponsiveValue
   }
 }
 
-export const Hidden = ({on, children}: HiddenProps) => {
+export const Hidden = ({when, children}: HiddenProps) => {
   // Get breakpoint declarations for the normalized ResponsiveValue object
-  const styles = getBreakpointDeclarations(normalize(on), 'display', () => 'none')
+  const styles = getBreakpointDeclarations(normalize(when), 'display', () => 'none')
   // Render the children with the styles
   return styles ? <Box sx={styles}>{children}</Box> : null
 }

src/Hidden/__snapshots__/Hidden.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Hidden renders \`on\` prop as expected 1`] = `
+exports[`Hidden renders \`when\` prop as expected 1`] = `
 @media screen and (max-width:calc(768px - 0.02px)) {
   .c0 {
     display: none;
@@ -12,7 +12,7 @@ exports[`Hidden renders \`on\` prop as expected 1`] = `
     class="c0"
   >
     <div>
-      Hidden on narrow
+      Hidden when narrow
     </div>
   </div>
 </div>
@@ -29,7 +29,7 @@ exports[`Hidden renders consistently 1`] = `
   className="c0"
 >
   <div>
-    Hidden on narrow
+    Hidden when narrow
   </div>
 </div>
 `;