@hyphen/hyphen-components 2.9.0

package/src/docs/Colors.mdx

@@ -0,0 +1,158 @@
+import { ColorPalette, ColorItem, Meta } from '@storybook/addon-docs';
+import designTokens from '@hyphen/hyphen-design-tokens/build/json/variables.json';
+
+<Meta title="Foundation/Colors" />
+
+## Base Colors
+
+<ColorPalette>
+  <ColorItem
+    title="color-base-white"
+    subtitle="White"
+    colors={[designTokens.color.base.white.value]}
+  />
+  <ColorItem
+    title="color-base-black"
+    subtitle="Black"
+    colors={[designTokens.color.base.black.value]}
+  />
+  <ColorItem
+    title="color-base-magenta"
+    subtitle="Black"
+    colors={[designTokens.color.base.magenta.value]}
+  />
+  <ColorItem
+    title="color-base-grey"
+    subtitle="Grey"
+    colors={Object.keys(designTokens.color.base.grey).reduce((acc, item, i) => {
+      acc[item] = Object.keys(designTokens.color.base.grey).map(
+        (g) => designTokens.color.base.grey[g].value
+      )[i];
+      return acc;
+    }, {})}
+  />
+  <ColorItem
+    title="color-base-primary"
+    subtitle="Primary"
+    colors={Object.keys(designTokens.color.base.primary).reduce(
+      (acc, item, i) => {
+        acc[item] = Object.keys(designTokens.color.base.primary).map(
+          (g) => designTokens.color.base.primary[g].value
+        )[i];
+        return acc;
+      },
+      {}
+    )}
+  />
+  <ColorItem
+    title="color-base-red"
+    subtitle="Red"
+    colors={Object.keys(designTokens.color.base.red).reduce((acc, item, i) => {
+      acc[item] = Object.keys(designTokens.color.base.red).map(
+        (g) => designTokens.color.base.red[g].value
+      )[i];
+      return acc;
+    }, {})}
+  />
+  <ColorItem
+    title="color-base-yellow"
+    subtitle="Primary"
+    colors={Object.keys(designTokens.color.base.yellow).reduce(
+      (acc, item, i) => {
+        acc[item] = Object.keys(designTokens.color.base.yellow).map(
+          (g) => designTokens.color.base.yellow[g].value
+        )[i];
+        return acc;
+      },
+      {}
+    )}
+  />
+  <ColorItem
+    title="color-base-green"
+    subtitle="Green"
+    colors={Object.keys(designTokens.color.base.green).reduce(
+      (acc, item, i) => {
+        acc[item] = Object.keys(designTokens.color.base.green).map(
+          (g) => designTokens.color.base.green[g].value
+        )[i];
+        return acc;
+      },
+      {}
+    )}
+  />
+  <ColorItem
+    title="color-base-blue"
+    subtitle="Blue"
+    colors={Object.keys(designTokens.color.base.blue).reduce(
+      (acc, item, i) => {
+        acc[item] = Object.keys(designTokens.color.base.blue).map(
+          (g) => designTokens.color.base.blue[g].value
+        )[i];
+        return acc;
+      },
+      {}
+    )}
+  />
+  <ColorItem
+    title="color-base-purple"
+    subtitle="Purple"
+    colors={Object.keys(designTokens.color.base.purple).reduce(
+      (acc, item, i) => {
+        acc[item] = Object.keys(designTokens.color.base.purple).map(
+          (g) => designTokens.color.base.purple[g].value
+        )[i];
+        return acc;
+      },
+      {}
+    )}
+  />
+
+</ColorPalette>
+
+## Backgrounds
+
+<ColorPalette>
+  <ColorItem
+    title="Backgrounds"
+    subtitle="used for backgrounds"
+    colors={Object.keys(designTokens.color.background).reduce(
+      (acc, item, i) => {
+        acc[item] = Object.keys(designTokens.color.background).map(
+          (g) => designTokens.color.background[g].value
+        )[i];
+        return acc;
+      },
+      {}
+    )}
+  />
+</ColorPalette>
+
+## Borders
+
+<ColorPalette>
+  <ColorItem
+    title="Backgrounds"
+    subtitle="used for borders"
+    colors={Object.keys(designTokens.color.border).reduce((acc, item, i) => {
+      acc[item] = Object.keys(designTokens.color.border).map(
+        (g) => designTokens.color.border[g].value
+      )[i];
+      return acc;
+    }, {})}
+  />
+</ColorPalette>
+
+## Text
+
+<ColorPalette>
+  <ColorItem
+    title="Text"
+    subtitle="used for text"
+    colors={Object.keys(designTokens.color.font).reduce((acc, item, i) => {
+      acc[item] = Object.keys(designTokens.color.font).map(
+        (g) => designTokens.color.font[g].value
+      )[i];
+      return acc;
+    }, {})}
+  />
+</ColorPalette>

package/src/docs/DesignTokens.mdx

@@ -0,0 +1,415 @@
+import { Meta } from '@storybook/blocks';
+import designTokens from '@hyphen/hyphen-design-tokens/build/json/variables.json';
+
+<Meta title="Foundation/Design Tokens" />
+
+# Design Tokens
+
+Design tokens are an abstraction of design decisions made to construct and maintain an application design system. Spacing, color, typography, styles and animation are represented as data, in our case json. They’re used in place of hard-coded values in order to ensure flexibility and unity across all our product experiences.
+
+Design tokens are directly integrated into our component library and cover properties like spacing, color and component state.
+
+We use [Style Dictionary](https://amzn.github.io/style-dictionary/) to generate style definitions across all platforms from a single source - removing roadblocks, errors, and inefficiencies across our workflow.
+
+## Source on Github
+
+[Hyphen Design Tokens](https://github.com/hyphen/hyphen-design-tokens) are available as an [npm package](https://www.npmjs.com/package/@hyphen/hyphen-design-tokens) so that you can create a Hyphen unified product experience for your platform of choice.
+
+## Border Radius
+
+Use these tokens for `border-radius`. They are defined in `rem`, which means they will scale when adjusting the root font size. Pixel values are calculated with a root font size of `16px`.
+
+<table width="100%">
+  <thead>
+    <tr>
+      <th>token name</th>
+      <th>prop value</th>
+      <th>value</th>
+      <th>px</th>
+    </tr>
+  </thead>
+  <tbody>
+    {Object.entries(designTokens.size['border-radius']).map(
+      ([name, entry], i) => (
+        <tr key={i}>
+          <td>
+            <code>{`size-border-radius-${name}`}</code>
+          </td>
+          <td>
+            <code>{name}</code>
+          </td>
+          <td>{entry.value}</td>
+          <td>{name !== 'circle' ? entry.original.value * 16 : ''}</td>
+        </tr>
+      )
+    )}
+  </tbody>
+</table>
+
+## Border Width
+
+Use these tokens for `border-width`.
+
+<table width="100%">
+  <thead>
+    <tr>
+      <th>token name</th>
+      <th>prop value</th>
+      <th>value</th>
+    </tr>
+  </thead>
+  <tbody>
+    {Object.entries(designTokens.size['border-width']).map(
+      ([name, entry], i) => (
+        <tr key={i}>
+          <td>
+            <code>{`size-border-width-${name}`}</code>
+          </td>
+          <td>
+            <code>{name}</code>
+          </td>
+          <td>{entry.value}</td>
+        </tr>
+      )
+    )}
+  </tbody>
+</table>
+
+## Box Shadow
+
+Used these tokens to set the outer shadow of an element.
+
+<table width="100%">
+  <thead>
+    <tr>
+      <th>token name</th>
+      <th>prop value</th>
+      <th>value</th>
+    </tr>
+  </thead>
+  <tbody>
+    {Object.entries(designTokens.size['box-shadow']).map(([name, entry], i) => (
+      <tr key={i}>
+        <td>
+          <code>{`size-box-shadow-${name}`}</code>
+        </td>
+        <td>
+          <code>{name}</code>
+        </td>
+        <td>{entry.original.value}</td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+
+## Breakpoints
+
+Hyphen components follow a "mobile-first" approach, where styles are set with mobile devices considered first. Then styling adjustments are made as each minimum viewport width &mdash; the breakpoint &mdash; is reached.
+
+The following breakpoints are used in utility classes, but you can use them to modify your application depending on the user's viewport size.
+
+<table width="100%">
+  <thead>
+    <tr>
+      <th>token name</th>
+      <th>value</th>
+    </tr>
+  </thead>
+  <tbody>
+    {Object.entries(designTokens.size.breakpoint).map(([name, entry], i) => (
+      <tr key={i}>
+        <td>
+          <code>{`size-breakpoint-${name}`}</code>
+        </td>
+        <td>{entry.original.value}px</td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+
+## Dimension
+
+Dimension tokens are intended for use with `width` and `height` properties. They are defined in `rem`, which means they will scale when adjusting the root font size. Pixel values are calculated with a root font size of `16px`.
+
+<table width="100%">
+  <thead>
+    <tr>
+      <th>token name</th>
+      <th>prop value</th>
+      <th>value</th>
+      <th>px</th>
+    </tr>
+  </thead>
+  <tbody>
+    {Object.entries(designTokens.size.dimension).map(([name, entry], i) => {
+      return (
+        <tr key={i}>
+          <td>
+            <code>{`size-dimension-${name}`}</code>
+          </td>
+          <td>
+            <code>{name}</code>
+          </td>
+          <td>{entry.value}</td>
+          <td>
+            {name === 'base'
+              ? '16'
+              : ['inherit', 'auto'].includes(name)
+              ? ''
+              : entry.original.value * 16}
+          </td>
+        </tr>
+      );
+    })}
+  </tbody>
+</table>
+
+<table width="100%">
+  <thead>
+    <tr>
+      <th>token name</th>
+      <th>prop value</th>
+      <th>value</th>
+      <th>px</th>
+    </tr>
+  </thead>
+  <tbody>
+    {Object.entries(designTokens.size.percentage).map(([name, entry], i) => {
+      return (
+        <tr key={i}>
+          <td>
+            <code>{`size-percentage-${name}`}</code>
+          </td>
+          <td>
+            <code>{name}</code>
+          </td>
+          <td>{entry.original.value}%</td>
+          <td>
+            {name === 'base'
+              ? '16'
+              : ['inherit', 'auto'].includes(name)
+              ? ''
+              : entry.original.value * 16}
+          </td>
+        </tr>
+      );
+    })}
+  </tbody>
+</table>
+
+## Font Family
+
+Use these tokens for `font-family`.
+
+<table>
+  <thead>
+    <tr>
+      <th>token name</th>
+      <th>prop value</th>
+      <th>value</th>
+    </tr>
+  </thead>
+  <tbody>
+    {Object.entries(designTokens.assets['font-family']).map(
+      ([name, entry], i) => (
+        <tr key={i}>
+          <td>
+            <code>{`asset-font-family-${name}`}</code>
+          </td>
+          <td>
+            <code>{name}</code>
+          </td>
+          <td>{entry.value}</td>
+        </tr>
+      )
+    )}
+  </tbody>
+</table>
+
+## Font Size
+
+Use these tokens for `font-size`. They are defined in `rem`, which means they will scale when adjusting the root font size. Pixel values are calculated with a root font size of `16px`.
+
+<table width="100%">
+  <thead>
+    <tr>
+      <th>token name</th>
+      <th>prop value</th>
+      <th>value</th>
+      <th>px</th>
+    </tr>
+  </thead>
+  <tbody>
+    {Object.entries(designTokens.size['font-size']).map(([name, entry], i) => (
+      <tr key={i}>
+        <td>
+          <code>{`size-font-size-${name}`}</code>
+        </td>
+        <td>
+          <code>{name}</code>
+        </td>
+        <td>{entry.value}</td>
+        <td>
+          {name === 'base'
+            ? '16'
+            : name === 'inherit'
+            ? ''
+            : entry.original.value * 16}
+        </td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+
+## Font Weight
+
+Use these tokens for `font-weight`.
+
+<table width="100%">
+  <thead>
+    <tr>
+      <th>token name</th>
+      <th>prop value</th>
+      <th>value</th>
+    </tr>
+  </thead>
+  <tbody>
+    {Object.entries(designTokens.size['font-weight']).map(
+      ([name, entry], i) => (
+        <tr key={i}>
+          <td>
+            <code>{`size-font-weight-${name}`}</code>
+          </td>
+          <td>
+            <code>{name}</code>
+          </td>
+          <td>{entry.original.value}</td>
+        </tr>
+      )
+    )}
+  </tbody>
+</table>
+
+## Heading Size
+
+Use these tokens for the `font-size` of Headings. They are defined in `rem`, which means they will scale when adjusting the root font size. Pixel values are calculated with a root font size of `16px`.
+
+<table width="100%">
+  <thead>
+    <tr>
+      <th>token name</th>
+      <th>prop value</th>
+      <th>value</th>
+      <th>px</th>
+    </tr>
+  </thead>
+  <tbody>
+    {Object.entries(designTokens.size.heading).map(([name, entry], i) => (
+      <tr key={i}>
+        <td>
+          <code>{`size-heading-${name}`}</code>
+        </td>
+        <td>
+          <code>{name}</code>
+        </td>
+        <td>{entry.value}</td>
+        <td>
+          {name === 'base'
+            ? '16'
+            : name === 'inherit'
+            ? ''
+            : entry.original.value * 16}
+        </td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+
+## Line Height
+
+Used these tokens to set the line-heights of elements.
+
+<table width="100%">
+  <thead>
+    <tr>
+      <th>token name</th>
+      <th>prop value</th>
+      <th>value</th>
+    </tr>
+  </thead>
+  <tbody>
+    {Object.entries(designTokens.size['line-height']).map(
+      ([name, entry], i) => (
+        <tr key={i}>
+          <td>
+            <code>{`size-line-height-${name}`}</code>
+          </td>
+          <td>
+            <code>{name}</code>
+          </td>
+          <td>{entry.original.value}</td>
+        </tr>
+      )
+    )}
+  </tbody>
+</table>
+
+## Spacing
+
+Spacing tokens are intended for use with `margin` and `padding` properties. They are defined in `rem`, which means they will scale when adjusting the root font size. Pixel values are calculated with a root font size of `16px`.
+
+<table width="100%">
+  <thead>
+    <tr>
+      <th>token name</th>
+      <th>prop value</th>
+      <th>value</th>
+      <th>px</th>
+    </tr>
+  </thead>
+  <tbody>
+    {Object.entries(designTokens.size.spacing).map(([name, entry], i) => {
+      return (
+        <tr key={i}>
+          <td>
+            <code>{`size-spacing-${name}`}</code>
+          </td>
+          <td>
+            <code>{name}</code>
+          </td>
+          <td>{entry.value}</td>
+          <td>
+            {name === 'base'
+              ? '16'
+              : ['inherit', 'auto'].includes(name)
+              ? ''
+              : entry.original.value * 16}
+          </td>
+        </tr>
+      );
+    })}
+  </tbody>
+</table>
+
+## Z-Index
+
+Used these tokens to set the z-index order of layering elements.
+
+<table width="100%">
+  <thead>
+    <tr>
+      <th>token name</th>
+      <th>value</th>
+    </tr>
+  </thead>
+  <tbody>
+    {Object.entries(designTokens.size['z-index']).map(([name, entry], i) => (
+      <tr key={i}>
+        <td>
+          <code>{`size-z-index-${name}`}</code>
+        </td>
+        <td>{entry.original.value}</td>
+      </tr>
+    ))}
+  </tbody>
+</table>

package/src/docs/GetStarted.mdx

@@ -0,0 +1,47 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="About/Get Started" />
+
+# Get Started
+
+### 1. Install
+
+`yarn add @hyphen/hyphen-components`
+
+or
+
+`npm install @hyphen/hyphen-components`
+
+### 2. Import Global CSS
+
+```jsx
+import '@hyphen/hyphen-components/dist/css/utilities.css';
+import '@hyphen/hyphen-components/dist/css/variables.css';
+import '@hyphen/hyphen-components/dist/css/index.css';
+```
+
+### 3. Import Global CSS Reset (Optional)
+
+```jsx
+import '@hyphen/hyphen-components/dist/css/reset.css';
+```
+
+### 4. Import Font (Optional)
+
+```jsx
+import '@hyphen/hyphen-components/dist/css/fonts';
+```
+
+### 5. Basic Usage
+
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Box } from '@hyphen/hyphen-components';
+
+function App() {
+  return <Box>Hello World</Box>;
+}
+
+ReactDOM.render(<App />, document.querySelector('#app'));
+```

package/src/docs/intro.mdx

@@ -0,0 +1,12 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="About/Introduction" />
+
+# Hyphen Design System
+
+Welcome to the Hyphen Design System, whose purpose is to help us deliver high quality Hyphen branded applications, faster and better. It consists of the following:
+
+- [Hyphen Components](https://github.com/hyphen/hyphen-components) - an open source, react-based, component library for Hyphen applications and websites.
+- [Hyphen Design Tokens](https://github.com/hyphen/hyphen-design-tokens) - A central location to store shared attributes of the Hyphen Design System. These include things like color, fonts, spacing, and more.
+
+❤️ The Hyphen Team

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export * from './useBreakpoint/useBreakpoint';
+export * from './useOpenClose/useOpenClose';
+export * from './useWindowSize/useWindowSize';
+export * from './useIsomorphicLayoutEffect/useIsomorphicLayouEffect';