From 05435c4feb48b9a3277b112d177b7d9d41f2b576 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Fri, 2 Sep 2022 20:45:53 +1000
Subject: [PATCH 1/4] Add a new component called Hidden to handle responsive
 hide/show of content

---
 docs/content/Hidden.mdx                       | 56 +++++++++++++++++++
 .../src/@primer/gatsby-theme-doctocat/nav.yml |  2 +
 2 files changed, 58 insertions(+)
 create mode 100644 docs/content/Hidden.mdx

diff --git a/docs/content/Hidden.mdx b/docs/content/Hidden.mdx
new file mode 100644
index 00000000000..2ff6d268604
--- /dev/null
+++ b/docs/content/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 `<span />` 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
+  }}
+/>
diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
index 60e6565d437..dfa2e1b8307 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml
+++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -84,6 +84,8 @@
       url: /Header
     - title: Heading
       url: /Heading
+    - title: Hidden
+      url: /Hidden
     - title: IconButton
       url: /IconButton
     - title: Label

From 95909763ed21ffcf3cd3786c1ba929a77cdc3d64 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Fri, 2 Sep 2022 20:52:47 +1000
Subject: [PATCH 2/4] Create four-pandas-roll.md

---
 .changeset/four-pandas-roll.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/four-pandas-roll.md

diff --git a/.changeset/four-pandas-roll.md b/.changeset/four-pandas-roll.md
new file mode 100644
index 00000000000..e0059e64c5f
--- /dev/null
+++ b/.changeset/four-pandas-roll.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Hidden component

From 8af384dfc11bb4947f08a6913e53d01acc45caaa Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Thu, 15 Sep 2022 15:34:52 +1000
Subject: [PATCH 3/4] Add Hidden component implementation

---
 src/Hidden/Hidden.stories.tsx | 54 +++++++++++++++++++++++++++++++++++
 src/Hidden/Hidden.tsx         | 25 ++++++++++++++++
 src/Hidden/index.tsx          |  3 ++
 3 files changed, 82 insertions(+)
 create mode 100644 src/Hidden/Hidden.stories.tsx
 create mode 100644 src/Hidden/Hidden.tsx
 create mode 100644 src/Hidden/index.tsx

diff --git a/src/Hidden/Hidden.stories.tsx b/src/Hidden/Hidden.stories.tsx
new file mode 100644
index 00000000000..02f111cea46
--- /dev/null
+++ b/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>
+)
diff --git a/src/Hidden/Hidden.tsx b/src/Hidden/Hidden.tsx
new file mode 100644
index 00000000000..d986cebed71
--- /dev/null
+++ b/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
+}
diff --git a/src/Hidden/index.tsx b/src/Hidden/index.tsx
new file mode 100644
index 00000000000..72f57bdd264
--- /dev/null
+++ b/src/Hidden/index.tsx
@@ -0,0 +1,3 @@
+import {Hidden} from './Hidden'
+
+export default Hidden

From 02c5642b2a2456e088c61450e3fca40880162f06 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Thu, 15 Sep 2022 15:37:30 +1000
Subject: [PATCH 4/4] Add as a draft component

---
 docs/content/{ => drafts}/Hidden.mdx           | 2 +-
 docs/src/@primer/gatsby-theme-doctocat/nav.yml | 4 ++--
 src/drafts/index.ts                            | 2 ++
 3 files changed, 5 insertions(+), 3 deletions(-)
 rename docs/content/{ => drafts}/Hidden.mdx (91%)

diff --git a/docs/content/Hidden.mdx b/docs/content/drafts/Hidden.mdx
similarity index 91%
rename from docs/content/Hidden.mdx
rename to docs/content/drafts/Hidden.mdx
index 2ff6d268604..c20bc13626d 100644
--- a/docs/content/Hidden.mdx
+++ b/docs/content/drafts/Hidden.mdx
@@ -6,7 +6,7 @@ status: Alpha
 componentId: hidden
 ---
 
-The `Hidden` component is a `<span />` that will help you hide or show content/components in different viewports.
+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
diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
index dfa2e1b8307..71a548febde 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml
+++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -84,8 +84,6 @@
       url: /Header
     - title: Heading
       url: /Heading
-    - title: Hidden
-      url: /Hidden
     - title: IconButton
       url: /IconButton
     - title: Label
@@ -157,6 +155,8 @@
   children:
     - title: Dialog v2
       url: /drafts/Dialog
+    - title: Hidden
+      url: /Hidden
     - title: InlineAutocomplete
       url: /drafts/InlineAutocomplete
     - title: MarkdownEditor
diff --git a/src/drafts/index.ts b/src/drafts/index.ts
index 23bd8a7d9ba..21c700ad43a 100644
--- a/src/drafts/index.ts
+++ b/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,