Merge pull request #235 from commitd/stuarthendren/issue233

Adds Hidden component

Author: stuarthendren

package-lock.json

@@ -152,8 +152,8 @@
   "devDependencies": {
     "@commitlint/cli": "^12.1.4",
     "@commitlint/config-conventional": "^12.1.4",
-    "@fontsource/dosis": "^4.5.0",
-    "@fontsource/inter": "^4.5.0",
+    "@fontsource/dosis": "^4.5.1",
+    "@fontsource/inter": "^4.5.1",
     "@size-limit/preset-small-lib": "^5.0.1",
     "@storybook/addon-docs": "^6.3.12",
     "@storybook/addon-essentials": "^6.3.12",
@@ -201,8 +201,8 @@
     "typescript": "^4.4.2"
   },
   "dependencies": {
-    "@committed/hooks": "^0.4.0",
-    "@mdi/js": "^6.4.95",
+    "@committed/hooks": "^0.5.0",
+    "@mdi/js": "^6.5.95",
     "@radix-ui/colors": "^0.1.7",
     "@radix-ui/react-accordion": "0.1.1",
     "@radix-ui/react-alert-dialog": "0.1.1",
@@ -221,6 +221,7 @@
     "@radix-ui/react-switch": "0.1.1",
     "@radix-ui/react-tabs": "0.1.1",
     "@radix-ui/react-tooltip": "0.1.1",
+    "@radix-ui/react-visually-hidden": "^0.1.1",
     "@stitches/react": "^1.2.5"
   }
 }

package.json

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+import { Close } from '../Icons'
+import { Button } from '../Button'
+import { Hidden } from '.'
+
+export default {
+  title: 'Components/Hidden',
+  component: Hidden,
+} as Meta
+
+export const Default: Story = (args) => (
+  <Button>
+    <Close />
+    <Hidden>Settings</Hidden>
+  </Button>
+)

src/components/Hidden/Hidden.stories.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { renderLight, renderDark } from 'test-utils'
+import { Default } from './Hidden.stories'
+
+it('renders light without error', () => {
+  const { asFragment } = renderLight(<Default />)
+  expect(asFragment()).toBeDefined()
+})
+
+it('renders dark without error', () => {
+  const { asFragment } = renderDark(<Default />)
+  expect(asFragment()).toBeDefined()
+})

src/components/Hidden/Hidden.test.tsx

@@ -0,0 +1,34 @@
+import React, { ElementRef, ComponentPropsWithoutRef, forwardRef } from 'react'
+import { useBoolean, useKeyboard } from '@committed/hooks'
+import { Root } from '@radix-ui/react-visually-hidden'
+
+/**
+ * Hidden component
+ *
+ * Visually hides the component while preserving the content in a screen accessible way.
+ *
+ * Based on [Radix VisuallyHidden](https://www.radix-ui.com/docs/primitives/utilities/visually-hidden).
+ *
+ * Has additional development mode function to show the hidden element when `alt` is pressed.
+ */
+export const Hidden = forwardRef<
+  ElementRef<typeof Root>,
+  ComponentPropsWithoutRef<typeof Root>
+>(({ children, ...props }, forwardedRef) => {
+  const [forceShow, { setTrue, setFalse }] = useBoolean(false)
+  useKeyboard('', setFalse, { event: 'keyup', development: true })
+  useKeyboard('alt', setTrue, {
+    event: 'keydown',
+    ignoreRepeat: true,
+    development: true,
+  })
+
+  if (forceShow) {
+    return <span>{children}</span>
+  }
+  return (
+    <Root {...props} ref={forwardedRef}>
+      {children}
+    </Root>
+  )
+})

src/components/Hidden/Hidden.tsx

@@ -0,0 +1 @@
+export * from './Hidden'

src/components/Hidden/index.ts

@@ -46,3 +46,4 @@ export * from './Tooltip'
 export * from './ThemeSwitch'
 export * from './Popover'
 export * from './Skeleton'
+export * from './Hidden'