Hidden component

.changeset/four-pandas-roll.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Hidden component

docs/content/drafts/Hidden.mdx

@@ -0,0 +1,56 @@
+---
+title: Hidden
+description: Use Hidden to responsively hide or show content in narrow, regular and wide viewports.
+source: https://github.com/primer/react/blob/main/src/Hidden/index.tsx
+status: Alpha
+componentId: hidden
+---
+
+The `Hidden` component is a utility component that will help you hide or show content/components in different viewports.
+**Attention:** Use Hidden only to control behaviour in a responsive manner. It does not take any `sx` props.
+
+## Example
+
+```jsx live
+<Hidden when="narrow">
+  <Placeholder height="80px" label="This is not visible in narrow viewport" />
+</Hidden>
+```
+
+## Array as `when` prop
+
+```jsx live
+<Hidden when={['narrow', 'wide']}>
+  <Placeholder height="80px" label="This is not visible in narrow and wide viewport" />
+</Hidden>
+```
+
+## Props
+
+<PropsTable>
+  <PropsTableRow
+    name="when"
+    type="string or Array"
+    description="Can be one or more values of 'narrow', 'wide', 'regular'"
+  />
+</PropsTable>
+
+## Status
+
+<ComponentChecklist
+  items={{
+    propsDocumented: true,
+    noUnnecessaryDeps: true,
+    adaptsToThemes: true,
+    adaptsToScreenSizes: true,
+    fullTestCoverage: false,
+    usedInProduction: false,
+    usageExamplesDocumented: true,
+    designReviewed: false,
+    a11yReviewed: false,
+    stableApi: false,
+    addressedApiFeedback: false,
+    hasDesignGuidelines: false,
+    hasFigmaComponent: false
+  }}
+/>

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -155,6 +155,8 @@
   children:
     - title: Dialog v2
       url: /drafts/Dialog
+    - title: Hidden
+      url: /Hidden
     - title: InlineAutocomplete
       url: /drafts/InlineAutocomplete
     - title: MarkdownEditor

src/Hidden/Hidden.stories.tsx

@@ -0,0 +1,54 @@
+import {Meta} from '@storybook/react'
+import React from 'react'
+import {ThemeProvider} from '..'
+import {Hidden} from './Hidden'
+import BaseStyles from '../BaseStyles'
+import Box from '../Box'
+
+const meta: Meta = {
+  title: 'Layout components/Hidden',
+  component: Hidden,
+  decorators: [
+    (Story: React.ComponentType<React.PropsWithChildren<unknown>>): JSX.Element => (
+      <ThemeProvider>
+        <BaseStyles>
+          <Story />
+        </BaseStyles>
+      </ThemeProvider>
+    )
+  ],
+  parameters: {
+    controls: {
+      expanded: true
+    }
+  },
+  argTypes: {
+    on: {
+      type: {
+        name: 'enum',
+        value: ['narrow', 'regular', 'wide']
+      },
+      defaultValue: 'regular',
+      control: {type: 'radio'}
+    }
+  }
+}
+export default meta
+
+export const isVisibleInRegularOnly = () => (
+  <Box>
+    <Hidden on={['narrow', 'wide']}> This value is only shown in regular viewport</Hidden>
+  </Box>
+)
+
+export const isVisibleInNarrowOnly = () => (
+  <Box>
+    <Hidden on={['regular', 'wide']}> This value is only shown in narrow viewport</Hidden>
+  </Box>
+)
+
+export const isHiddenInNarrowOnly = () => (
+  <Box>
+    <Hidden on="narrow">This is hidden in narrow only</Hidden>
+  </Box>
+)

src/Hidden/Hidden.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import {useMedia} from '../hooks/useMedia'
+import {viewportRanges} from '../hooks/useResponsiveValue'
+
+type Viewports = 'narrow' | 'regular' | 'wide'
+
+type HiddenProps = {
+  on: Array<Viewports> | Viewports
+  children: React.ReactNode
+}
+
+export const Hidden = ({on: hiddenViewports, children}: HiddenProps) => {
+  const isNarrowViewport = useMedia(viewportRanges.narrow)
+  const isRegularViewport = useMedia(viewportRanges.regular)
+  const isWideViewport = useMedia(viewportRanges.wide)
+  let show = true
+  if (isNarrowViewport && (hiddenViewports === 'narrow' || hiddenViewports.indexOf('narrow') > -1)) {
+    show = false
+  } else if (isRegularViewport && (hiddenViewports === 'regular' || hiddenViewports.indexOf('regular') > -1)) {
+    show = false
+  } else if (isWideViewport && (hiddenViewports === 'wide' || hiddenViewports.indexOf('wide') > -1)) {
+    show = false
+  }
+  return show ? <>{children}</> : null
+}

src/Hidden/index.tsx

@@ -0,0 +1,3 @@
+import {Hidden} from './Hidden'
+
+export default Hidden

src/drafts/index.ts

@@ -6,6 +6,8 @@
  */
 export * from '../Dialog/Dialog'
 
+export * from '../Hidden' // Will be moved from drafts to main bundle after utility is proven
+
 export {default as InlineAutocomplete} from './InlineAutocomplete'
 export type {
   InlineAutocompleteProps,