@hyphen/hyphen-components 2.9.0

package/src/components/Card/Card.mdx

@@ -0,0 +1,46 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { Card } from './Card';
+import * as Stories from './Card.stories';
+
+<Meta of={Stories} />
+
+# Card
+
+A card is a stylized Box component that acts as a container to group related information and actions.
+It consists of three child components that are automatically included with the `<Card />`:
+
+1. `<Card.Header />` - should contain a descriptive title for the Card's contents
+1. `<Card.Section />` - for the body of the card, and can consists of many sections
+1. `<Card.Footer />` - a place for primary actions for the card's contents
+
+<Canvas of={Stories.OverviewCard} />
+
+## Props
+
+<ArgTypes of={Card} />
+
+## Examples
+
+Here are some common use cases of `<Card />`.
+
+### Sign Up Form
+
+<Canvas of={Stories.ExampleSignUpForm} />
+
+### Full Bleed Photo
+
+<Canvas of={Stories.ExampleFullBleedPhotos} />
+
+## Child Component Props
+
+### Card.Header Props
+
+<ArgTypes of={Card.Header} />
+
+### Card.Section Props
+
+<ArgTypes of={Card.Section} />
+
+### Card.Footer Props
+
+<ArgTypes of={Card.Footer} />

package/src/components/Card/Card.module.scss

@@ -0,0 +1,6 @@
+.card-section-border {
+  + .card-section-border {
+    border-top: 1px solid
+      var(--card-section-border-color, var(--color-border-subtle));
+  }
+}

package/src/components/Card/Card.stories.tsx

@@ -0,0 +1,101 @@
+import { Card } from './Card';
+import type { Meta } from '@storybook/react';
+import React from 'react';
+import { Box } from '../Box/Box';
+import { Button } from '../Button/Button';
+import { Heading } from '../Heading/Heading';
+import { TextInput } from '../TextInput/TextInput';
+import { allModes } from '../../modes';
+
+const meta: Meta<typeof Card> = {
+  title: 'Components/Card',
+  component: Card,
+  parameters: {
+    chromatic: {
+      modes: {
+        light: allModes['light'],
+        dark: allModes['dark'],
+      },
+    },
+  },
+};
+
+export default meta;
+
+export const OverviewCard = () => (
+  <Card>
+    <Card.Header title="Card Overview" />
+    <Card.Section>
+      <p>Card content</p>
+    </Card.Section>
+    <Card.Section title="Section Two">Another section</Card.Section>
+    <Card.Footer>Footer</Card.Footer>
+  </Card>
+);
+
+export const ExampleSignUpForm = () => (
+  <Box
+    alignItems="center"
+    alignContent="center"
+    padding="2xl"
+    background="secondary"
+  >
+    <Card maxWidth="9xl">
+      <Card.Section padding="5xl" gap="4xl">
+        <Box gap="sm" alignItems="center">
+          <Heading as="h1" size="lg">
+            Sign Up
+          </Heading>
+          <Box as="p" color="secondary" fontSize="sm">
+            Create your Hyphen account
+          </Box>
+        </Box>
+        <Box gap="2xl">
+          <TextInput
+            id="email"
+            value=""
+            label="Email Address"
+            onChange={() => null}
+          />
+          <TextInput
+            id="password"
+            type="password"
+            value=""
+            label="Password"
+            onChange={() => null}
+          />
+          <Button fullWidth variant="primary">
+            Sign Up
+          </Button>
+        </Box>
+        <Box alignItems="center" fontSize="sm" color="secondary">
+          <p>
+            Already have an account?{' '}
+            <a href="/#" className="font-color-primary">
+              Log in
+            </a>
+            .
+          </p>
+        </Box>
+      </Card.Section>
+    </Card>
+  </Box>
+);
+
+export const ExampleFullBleedPhotos = () => (
+  <>
+    <Card maxWidth="9xl">
+      <Card.Section padding="0" overflow="hidden" height="300px">
+        <img
+          src="https://images.unsplash.com/photo-1555412654-72a95a495858?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=80"
+          data-chromatic="ignore"
+          alt=""
+        />
+      </Card.Section>
+      <Card.Section childGap="xs">
+        <Heading>Headline</Heading>
+        <Box as="p">This is the body copy of the card.</Box>
+      </Card.Section>
+    </Card>
+  </>
+);

package/src/components/Card/Card.test.tsx

@@ -0,0 +1,11 @@
+/* eslint-disable react/no-array-index-key */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Card } from './Card';
+
+describe('Card', () => {
+  test('card has overflow hidden by default', () => {
+    const { container } = render(<Card>test</Card>);
+    expect(container.children[0].classList).toContain('overflow-hidden');
+  });
+});

package/src/components/Card/Card.tsx

@@ -0,0 +1,61 @@
+import { Box, BoxProps } from '../Box/Box';
+import { CardFooter, CardHeader, CardSection } from './components';
+import React, { ReactNode } from 'react';
+
+export interface CardProps extends BoxProps {
+  /**
+   * The Card's contents.
+   */
+  children?: ReactNode;
+}
+
+export const CardBaseComponent: React.FC<CardProps> = React.forwardRef(
+  (
+    {
+      children,
+      subdued,
+      overflow = 'hidden',
+      display = 'block',
+      width = '100',
+      ...restProps
+    },
+    ref
+  ) => {
+    return (
+      <Box
+        background={subdued ? 'secondary' : 'primary'}
+        borderWidth="sm"
+        borderColor="subtle"
+        overflow={overflow}
+        display={display}
+        ref={ref}
+        shadow="2xs"
+        width={width}
+        radius="lg"
+        {...restProps}
+      >
+        {children}
+      </Box>
+    );
+  }
+);
+
+export interface CardStatic {
+  Header: typeof CardHeader;
+  Section: typeof CardSection;
+  Footer: typeof CardFooter;
+}
+
+export type CardWithStaticComponents = typeof CardBaseComponent & CardStatic;
+
+// Actual component is wrapped in an IIFE for the export
+// To allow tree-shaking even with static properties (subcomponents in this case).
+export const Card = (() => {
+  const Card = CardBaseComponent as CardWithStaticComponents; // eslint-disable-line no-shadow
+
+  Card.Header = CardHeader;
+  Card.Section = CardSection;
+  Card.Footer = CardFooter;
+
+  return Card;
+})();

package/src/components/Card/components/CardFooter/CardFooter.test.tsx

@@ -0,0 +1,11 @@
+/* eslint-disable react/no-array-index-key */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { CardFooter } from './CardFooter';
+
+describe('Card/CardFooter', () => {
+  test('lg padding class is applied by default', () => {
+    const { getByText } = render(<CardFooter>Test Box</CardFooter>);
+    expect(getByText('Test Box').classList).toContain('p-2xl');
+  });
+});

package/src/components/Card/components/CardFooter/CardFooter.tsx

@@ -0,0 +1,35 @@
+import { Box, BoxProps } from '../../../Box/Box';
+import React, { FC, ReactNode } from 'react';
+export interface CardFooterProps extends BoxProps {
+  /**
+   * Contents of the Footer.
+   */
+  children?: ReactNode;
+  /**
+   * Additional props to be spread to rendered element
+   */
+  [x: string]: any; // eslint-disable-line
+}
+
+export const CardFooter: FC<CardFooterProps> = ({
+  background = 'secondary',
+  borderColor = 'subtle',
+  borderWidth = 'xs 0 0 0',
+  children = null,
+  display = 'block',
+  padding = '2xl',
+  ...restProps
+}) => {
+  return (
+    <Box
+      display={display}
+      padding={padding}
+      background={background}
+      borderColor={borderColor}
+      borderWidth={borderWidth}
+      {...restProps}
+    >
+      {children}
+    </Box>
+  );
+};

package/src/components/Card/components/CardHeader/CardHeader.test.tsx

@@ -0,0 +1,23 @@
+/* eslint-disable react/no-array-index-key */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { CardHeader } from './CardHeader';
+
+describe('Card/CardHeader', () => {
+  test('correct padding classes are applied', () => {
+    const { getByText } = render(<CardHeader>Test Card Header</CardHeader>);
+    expect(getByText('Test Card Header').classList).toContain('p-2xl');
+  });
+
+  test('title is rendered as h4 if defined as a string', () => {
+    const { container } = render(<CardHeader title="card title" />);
+    expect(container.getElementsByTagName('h4')).toHaveLength(1);
+  });
+
+  test('title is rendered as node if defined as a node', () => {
+    const { container } = render(
+      <CardHeader title={<h1>card title node</h1>} />
+    );
+    expect(container.getElementsByTagName('h1')).toHaveLength(1);
+  });
+});

package/src/components/Card/components/CardHeader/CardHeader.tsx

@@ -0,0 +1,54 @@
+import React, { FC, ReactNode } from 'react';
+import { Box, BoxProps } from '../../../Box/Box';
+import { Heading } from '../../../Heading/Heading';
+
+export interface CardHeaderProps extends BoxProps {
+  /**
+   * contents of the Header
+   */
+  children?: ReactNode;
+  /**
+   * Additional class names to add
+   */
+  className?: string;
+  /**
+   * The title of the card
+   */
+  title?: ReactNode;
+  /**
+   * Additional props to be spread to rendered element
+   */
+  [x: string]: any; // eslint-disable-line
+}
+
+export const CardHeader: FC<CardHeaderProps> = ({
+  childGap = '2xs',
+  children = null,
+  className = undefined,
+  display = 'block',
+  padding = '2xl',
+  title = null,
+  ...restProps
+}) => {
+  const renderTitle = () =>
+    typeof title === 'string' ? (
+      <Heading size="sm" as="h4">
+        {title}
+      </Heading>
+    ) : (
+      title
+    );
+
+  return (
+    <Box
+      childGap={childGap}
+      display={display}
+      padding={padding}
+      className={className}
+      {...restProps}
+    >
+      {title && renderTitle()}
+      {children}
+    </Box>
+  );
+};

package/src/components/Card/components/CardSection/CardSection.test.tsx

@@ -0,0 +1,28 @@
+/* eslint-disable react/no-array-index-key */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { CardSection } from './CardSection';
+
+describe('Card/CardSection', () => {
+  test('2xl padding class is applied by default', () => {
+    const { container } = render(<CardSection>Test Card</CardSection>);
+    expect(container.children[0].classList).toContain('p-2xl');
+  });
+
+  test('is subdued', () => {
+    const { container } = render(<CardSection subdued>subdued</CardSection>);
+    expect(container.children[0].classList).toContain('card-subdued');
+  });
+
+  test('title is rendered as h4 if defined as a string', () => {
+    const { container } = render(<CardSection title="section title" />);
+    expect(container.getElementsByTagName('h4')).toHaveLength(1);
+  });
+
+  test('title is rendered as node if defined as a node', () => {
+    const { container } = render(
+      <CardSection title={<h1>section title node</h1>} />
+    );
+    expect(container.getElementsByTagName('h1')).toHaveLength(1);
+  });
+});

package/src/components/Card/components/CardSection/CardSection.tsx

@@ -0,0 +1,102 @@
+import { Box, BoxProps } from '../../../Box/Box';
+import React, { FC, ReactNode } from 'react';
+
+import classNames from 'classnames';
+import styles from '../../Card.module.scss';
+
+export interface CardSectionProps extends BoxProps {
+  /**
+   * Any valid background color token, or a `url()` for an image
+   */
+  background?: BoxProps['background'];
+  /**
+   * If defined as a prop, this value will take higher precedence than the corresponding component design token value
+   * Any valid border color token
+   * Or a responsive prop with borderColor for each breakpoint.
+   */
+  borderColor?: BoxProps['borderColor'];
+  /**
+   * If defined as a prop, this value will take higher precedence than the corresponding component design token value
+   * Width of the section's border
+   * Can be a single [border width token](/?path=/docs/foundation-design-tokens--docs#border-width).
+   * Can also be a string of [border width tokens](/?path=/docs/foundation-design-tokens--docs#border-width)
+   * that models itself after the css shorthand property,
+   * where you can set the border width on all four sides of an element.
+   * e.g: "0 sm xs 0" --> top: 0, right: sm, bottom: xs, left: 0;
+   */
+  borderWidth?: BoxProps['borderWidth'];
+  /**
+   * Contents of the Section.
+   */
+  children?: ReactNode;
+  /**
+   * Custom class to be applied to section container.
+   */
+  className?: string;
+  /**
+   * Visually subdued the appearance of the section.
+   */
+  subdued?: boolean;
+  /**
+   * Title for the section.
+   */
+  title?: ReactNode;
+  /**
+   * Additional props to be spread to rendered element
+   */
+  [x: string]: any; // eslint-disable-line
+}
+
+export const CardSection: FC<CardSectionProps> = ({
+  background = undefined,
+  borderColor = undefined,
+  borderWidth = undefined,
+  children = null,
+  childGap = undefined,
+  gap = undefined,
+  className = undefined,
+  display = 'block',
+  padding = '2xl',
+  subdued = undefined,
+  title = undefined,
+  ...restProps
+}) => {
+  const renderTitle =
+    typeof title === 'string' ? (
+      <Box className="m-bottom-md">
+        <Box as="h4" fontWeight="bold" fontSize="sm" color="base">
+          {title}
+        </Box>
+      </Box>
+    ) : (
+      title
+    );
+
+  const sectionClasses = classNames(
+    {
+      [styles['card-section-border']]:
+        borderColor === undefined && borderWidth === undefined,
+      [styles['card-subdued']]: subdued,
+    },
+    className
+  );
+
+  return (
+    <Box
+      background={background}
+      borderColor={borderColor}
+      borderWidth={borderWidth}
+      className={sectionClasses}
+      display={display}
+      padding={padding}
+      {...restProps}
+    >
+      {renderTitle}
+      <Box gap={gap} childGap={childGap}>
+        {children}
+      </Box>
+    </Box>
+  );
+};
+
+export default CardSection;

package/src/components/Card/components/index.ts

@@ -0,0 +1,3 @@
+export * from './CardFooter/CardFooter';
+export * from './CardHeader/CardHeader';
+export * from './CardSection/CardSection';

package/src/components/CheckboxInput/CheckboxInput.mdx

@@ -0,0 +1,98 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { CheckboxInput } from './CheckboxInput';
+import * as Stories from './CheckboxInput.stories';
+
+<Meta of={Stories} />
+
+# CheckboxInput
+
+Use a CheckboxInput to allow users to make a range of selections (zero, one or many).
+
+<Canvas isExpanded of={Stories.Basic} />
+
+## Props
+
+<ArgTypes of={CheckboxInput} />
+
+## Default
+
+All that is required to render a basic version of the CheckboxInput is a unique `id`, a `label`, `isChecked`, and an onchange event handler passed to the `onChange` prop.
+
+<Canvas of={Stories.Default} />
+
+## States
+
+The state of a checkbox can be `checked`, `unchecked` or `indeterminate`. For More
+details on indeterminate checkboxes [See Here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate).
+
+An important consideration is that a checkbox being `indeterminate` has no effect on the value of it's `checked` value. Accordingly
+we have kept this prop separate and affect the checkbox visually as well as the value of the indeterminate HTML attribute on the checkbox
+element. I.E: A checkbox can be indeterminate while being either checked or unchecked. The logic for such UI implementations is left
+up to the user.
+
+<Canvas of={Stories.States} />
+
+## Indeterminate Checkboxes
+
+Use cases for intermediate checkboxes can sometimes be unclear. Below is an example of when to use this UI pattern.
+
+<Canvas of={Stories.IndeterminateCheckboxes} />
+
+## Required
+
+Use the `isRequired` prop to set the `required` and `aria-required` on the underlying input element.
+
+<Canvas of={Stories.Required} />
+
+You can remove or customize the required indicator using the `requiredIndicator` prop.
+
+<Canvas of={Stories.CustomRequiredIndicator} />
+
+## Sizes
+
+Set the size of the checkbox and label with the `size` prop.
+
+<Canvas of={Stories.Sizes} />
+
+## Help Text
+
+Use `helpText` to add additional context to the checkbox.
+This can help keep checkbox label concise.
+
+<Canvas of={Stories.HelpText} />
+
+## Checked Initial State
+
+Use the `isChecked` prop to mark the input as checked upon initial render.
+
+<Canvas of={Stories.CheckedInitialState} />
+
+## Hidden Label
+
+The `label` is a required prop, but if you need to hide it for stylistic reasons, you can do
+so with the `hideLabel` prop. The checkbox will still utilize the label string value to
+populate the `aria-label` property on the input for accessibility reasons.
+
+<Canvas of={Stories.HiddenLabel} />
+
+## Disabled and Unchecked
+
+Use the `isDisabled` prop to disable an input.
+
+<Canvas of={Stories.DisabledAndUnchecked} />
+
+## Disabled and Checked
+
+Use the `isDisabled` and `isChecked` props to disable an input in a checked state.
+
+<Canvas of={Stories.DisabledAndChecked} />
+
+## Error
+
+Use the `error` prop to mark the input as invalid. `error` accepts a `boolean`, `string`, or `node`. If either a `string` or `node` is passed, a validation message is displayed below it.
+
+<Canvas of={Stories.Error} />
+
+## Component Design Tokens
+
+This component shares component design tokens with all form controls. For a complete list of tokens, see the [Theming Form Controls documentation](/docs/theming-form-controls--custom-theme-form).