@hyphen/hyphen-components 2.9.0

package/src/components/Heading/Heading.tsx

@@ -0,0 +1,67 @@
+import { FC, ReactNode, createElement } from 'react';
+import { FontColor, HeadingSize, ResponsiveProp } from '../../types';
+import {
+  HEADING_DEFAULT_SIZE_MAP,
+  HEADING_LEVELS_TYPE,
+} from './Heading.constants';
+
+import classNames from 'classnames';
+import { generateResponsiveClasses } from '../../lib/generateResponsiveClasses';
+import { getElementType } from '../../lib/getElementType';
+import styles from './Heading.module.scss';
+
+export interface HeadingProps {
+  /**
+   * The DOM tag or react component to use for the element.
+   * Select the appropriate semantic element (h1-h6).
+   */
+  as?: HEADING_LEVELS_TYPE;
+  /**
+   * Content of the heading. Can be a string or any valid DOM node.
+   */
+  children?: ReactNode;
+  /**
+   * Additional class names to add.
+   */
+  className?: string;
+  /**
+   * A variant token identifier to use for the text variant. Available variants found:
+   * [here](https://github.com/hyphen/hyphen-design-tokens/blob/main/properties/color/font.json).
+   */
+  color?: FontColor;
+  /**
+   * By default, size is determined by the chosen tag (e.g. h1 is bigger than h2).
+   * However, size can be set independently so that its size is appropriate for the surrounding content.
+   * Available sizes found:
+   * [here](https://github.com/hyphen/hyphen-design-tokens/blob/main/properties/size/font.json).
+   */
+  size?: HeadingSize | ResponsiveProp<HeadingSize>;
+  /**
+   * Additional props to be spread to rendered element
+   */
+  [x: string]: any; // eslint-disable-line
+}
+
+export const Heading: FC<HeadingProps> = ({
+  as = 'h4',
+  children,
+  className,
+  color,
+  size,
+  ...restProps
+}) => {
+  const element = getElementType(Heading, { as });
+
+  const headingSize = size || HEADING_DEFAULT_SIZE_MAP[as];
+
+  const classes = classNames(
+    styles.heading,
+    className,
+    generateResponsiveClasses('heading', headingSize),
+    {
+      [`font-color-${color}`]: color,
+    }
+  );
+
+  return createElement(element, { className: classes, ...restProps }, children);
+};

package/src/components/HelpText/HelpText.module.scss

@@ -0,0 +1,14 @@
+.help-text {
+  font-family: var(
+    --form-control-font-family,
+    var(--INTERNAL_form-control-font-family)
+  );
+  margin-top: var(
+    --form-control-help-margin,
+    var(--INTERNAL_form-control-help-margin)
+  );
+  font-weight: var(
+    --form-control-help-text-font-weight,
+    var(--INTERNAL_form-control-help-text-font-weight)
+  );
+}

package/src/components/HelpText/HelpText.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { Box } from '../Box/Box';
+import styles from './HelpText.module.scss';
+
+export interface HelpTextProps {
+  /**
+   * Contents of the help text.
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional class names to add.
+   */
+  className?: string;
+}
+
+export const HelpText = forwardRef<HTMLDivElement, HelpTextProps>(
+  ({ children, className }, ref) => (
+    <Box
+      ref={ref}
+      className={classNames(
+        'hyphen-components__variables__form-control',
+        styles['help-text'],
+        className
+      )}
+      display="block"
+      color="secondary"
+      fontSize="sm"
+    >
+      {children}
+    </Box>
+  )
+);

package/src/components/Icon/Icon.mdx

@@ -0,0 +1,40 @@
+import { Icon } from './Icon';
+import { Meta, Story, Canvas, ArgTypes } from '@storybook/addon-docs';
+
+import * as Stories from './Icon.stories';
+
+<Meta of={Stories} />
+
+# Icon
+
+Icons are used to visually communicate product functionality and actions.
+Use an icon only when it provides additional clarity or is necessary to draw attention to an element.
+
+<Canvas isExpanded of={Stories.Default} />
+
+## Props
+
+<ArgTypes of={Icon} />
+
+## Size
+
+The size of the icon can be set on the Icon itself, or inherited from its parent's `fontSize`.
+This allows for easy placement inside of other components.
+
+<Canvas of={Stories.Sizes} />
+
+## Color
+
+Similar to sizing, the color of the icon can be set on the Icon itself, or inherited from its parent.
+
+<Canvas of={Stories.Colors} />
+
+## Unknown Icon
+
+If a given icon name is not found in the dictionary, a red box with question marks will be displayed, as well as log an error to the console.
+
+<Canvas of={Stories.UnknownIcon} />
+
+## Available Icons
+
+<Canvas of={Stories.AvailableIcons} />

package/src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,72 @@
+import { Box } from '../Box/Box';
+import { ICON_NAMES } from '@hyphen/hyphen-design-tokens/build/assets/icons';
+import { IconName } from 'src/types';
+import { Icon } from './Icon';
+import type { Meta } from '@storybook/react';
+import React from 'react';
+
+const meta: Meta<typeof Icon> = {
+  title: 'Components/Icon',
+  component: Icon,
+};
+
+export default meta;
+
+export const Default = () => <Icon name="star" />;
+
+export const Sizes = () => (
+  <>
+    <Box direction="row" childGap="sm" margin="0 0 md 0" fontSize="xs">
+      <Icon name="remove" color="danger" />
+      <Box>Size is set by the Icon's parent</Box>
+    </Box>
+    <Box direction="row" fontSize="xl" childGap="sm">
+      <Icon name="star" color="warn" />
+      <Box>Size is set by the Icon's parent</Box>
+    </Box>
+  </>
+);
+
+export const Colors = () => (
+  <>
+    <Box direction="row" childGap="sm" margin="0 0 md 0">
+      <Icon name="remove" color="danger" />
+      <Box>Color is set at the Icon level</Box>
+    </Box>
+    <Box direction="row" childGap="sm" color="info">
+      <Icon name="add" />
+      <Box>Color is set by the Icon's parent</Box>
+    </Box>
+  </>
+);
+
+export const UnknownIcon = () => (
+  <Icon name={'does-not-exist' as any} className="font-size-2xl" />
+);
+
+export const AvailableIcons = () => (
+  <Box
+    style={{
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fill,minmax(6rem,1fr))',
+      gridAutoRows: '6rem',
+      gap: '1rem',
+    }}
+  >
+    {ICON_NAMES.map((iconName: IconName) => (
+      <Box
+        key={iconName}
+        fontSize="lg"
+        textAlign="center"
+        alignItems="center"
+        justifyContent="center"
+        childGap="sm"
+      >
+        <Icon className="neutral-500" name={iconName} />
+        <Box as="p" color="secondary" fontSize="sm">
+          {iconName}
+        </Box>
+      </Box>
+    ))}
+  </Box>
+);

package/src/components/Icon/Icon.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+
+import { Icon } from './Icon';
+import React from 'react';
+
+describe('Icon', () => {
+  test('default', () => {
+    render(<Icon name="user" />);
+    const icon = screen.getByTestId('icon-testid--user');
+    expect(icon).toBeInTheDocument();
+  });
+
+  test('does not add a class property if none is provided', () => {
+    render(<Icon name="user" />);
+    const icon = screen.getByTestId('icon-testid--user');
+    expect(icon).not.toHaveAttribute('class');
+  });
+
+  test('adds a class property if defined', () => {
+    render(<Icon name="user" className="testClass" />);
+    const icon = screen.getByTestId('icon-testid--user');
+    expect(icon.getAttribute('class')).toBe('testClass');
+  });
+
+  test('fallback', () => {
+    render(<Icon name={'does-not-exist' as 'user'} />);
+    const icon = screen.getByText('???');
+    expect(icon).toBeInTheDocument();
+  });
+});

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,61 @@
+import { FontColor, FontSize, IconName, ResponsiveProp } from '../../types';
+import React, { FC, forwardRef } from 'react';
+
+import { Box } from '../Box/Box';
+import classNames from 'classnames';
+import { generateResponsiveClasses } from '../../lib/generateResponsiveClasses';
+import icons from '@hyphen/hyphen-design-tokens/build/assets/icons/react';
+
+export interface IconProps {
+  className?: string;
+  /**
+   * A color token identifier to use for the text color.
+   */
+  color?: FontColor | ResponsiveProp<FontColor>;
+  /**
+   * A [font size token](/?path=/docs/design-tokens-design-tokens--page#font-size) identifier
+   */
+  size?: FontSize | ResponsiveProp<FontSize>;
+  /**
+   * Name of the icon
+   */
+  name: IconName;
+  /**
+   * Additional props to be spread to rendered element
+   */
+  [x: string]: any; // eslint-disable-line
+}
+
+export const Icon: FC<IconProps> = forwardRef<SVGSVGElement, IconProps>(
+  ({ className = undefined, name, color, size, ...restProps }, ref) => {
+    const IconComponent = icons[name];
+
+    if (!IconComponent) console.error(`Icon '${name}' not found`); // eslint-disable-line no-console
+
+    const iconClasses = classNames(
+      className,
+      generateResponsiveClasses('font-color', color),
+      generateResponsiveClasses('font-size', size)
+    );
+
+    return IconComponent ? (
+      <IconComponent
+        className={iconClasses || null}
+        ref={ref}
+        data-testid={`icon-testid--${name}`}
+        {...restProps}
+      />
+    ) : (
+      <Box
+        fontWeight="bold"
+        background="error"
+        color="white"
+        padding="2xs"
+        fontSize="sm"
+        display="inline"
+      >
+        ???
+      </Box>
+    );
+  }
+);

package/src/components/InputValidationMessage/InputValidationMessage.module.scss

@@ -0,0 +1,3 @@
+.input-validation-message {
+  font-family: var(--form-control-font-family, var(--INTERNAL_form-control-font-family));
+}

package/src/components/InputValidationMessage/InputValidationMessage.tsx

@@ -0,0 +1,27 @@
+import React, { FC, ReactNode } from 'react';
+import classNames from 'classnames';
+import styles from './InputValidationMessage.module.scss';
+
+/**
+ * Used by form inputs such as TextInput, to display a validation message for an invalid input.
+ */
+
+export interface InputValidationMessageProps {
+  children: ReactNode;
+  size?: 'xs' | 'sm' | 'md';
+}
+
+export const InputValidationMessage: FC<InputValidationMessageProps> = ({
+  children,
+  size = 'sm',
+}) => {
+  const classes = classNames(
+    'hyphen-components__variables__form-control',
+    styles['input-validation-message'],
+    'font-color-danger',
+    `font-size-${size}`,
+    'm-top-xs'
+  );
+
+  return <div className={classes}>{children}</div>;
+};

package/src/components/Modal/Modal.mdx

@@ -0,0 +1,60 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { Modal } from './Modal';
+import * as Stories from './Modal.stories';
+
+<Meta of={Stories} />
+
+# Modal
+
+Modals are containers appearing in front of the main content to provide critical information or an actionable piece of content.
+These are specifically great for presenting new flows while preserving the state of content.
+
+The default behavior of a Modal is to focus on the first focusable item.
+Therefore, you should ensure that the first focusable item is non-destructive, such as a "cancel" or close button.
+
+Modal consists of three child components that are automatically included with the `<Modal />`:
+
+1. `<Modal.Header />` - a standard header of a Modal, which may contain a title for the Modal's contents and a close button
+1. `<Modal.Body />` - for the body of the Modal
+1. `<Modal.Footer />` - a place for primary actions for the Modals's contents
+
+## Basic Usage
+
+In order to hide or show the Modal, set the Modal's `isOpen` prop to `true` or `false`.
+
+<Canvas of={Stories.BasicUsage} />
+
+## Props
+
+<ArgTypes of={Modal} />
+
+## Body and Footer
+
+Use the `Modal.Body` and `Modal.Footer` to add body and footer content. These components simply wrap your content in consistent padding, otherwise you can pass whatever you want as content.
+
+<Canvas of={Stories.BodyAndFooter} />
+
+## Close button
+
+Set the `onDismiss` prop on the `Modal.Header` to true to automatically add a close button.
+
+<Canvas of={Stories.CloseButton} />
+## Without a Header
+
+Omit `<Modal.Header/>` to render a minimal modal without a header.
+
+<Canvas of={Stories.WithoutHeader} />
+
+## Fullscreen on mobile
+
+Use `fullScreenMobile` to enable fullscreen at mobile viewport widths.
+
+<Canvas of={Stories.FullscreenMobile} />
+
+## Max Width
+
+Use the `maxWidth` prop for modals that have minimal content or form fields that may not look right at a larger width.
+As with the `Box` component, this can be set to a specific pixel value, or any of the existing width tokens. For responsive
+maxWidth, use existing tokens only.
+
+<Canvas of={Stories.MaxWidth} />

package/src/components/Modal/Modal.module.scss

@@ -0,0 +1,135 @@
+@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+
+.modal-close {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: var(--size-spacing-xs);
+  color: var(--color-font-secondary);
+  line-height: var(--size-line-height-base);
+  border-radius: var(--size-border-radius-sm);
+
+  &:hover {
+    color: var(--color-font-secondary);
+  }
+
+  // Show focus styles on keyboard focus.
+  &:focus-visible {
+    outline: 0;
+    box-shadow: var(
+      --modal-close-button-box-shadow-focus,
+      0 0 0 4px var(--color-base-grey-200)
+    );
+  }
+
+  // Hide focus styles if they are not needed, for example,
+  // when an element receives focus via the mouse.
+  &:focus:not(:focus-visible) {
+    outline: 0;
+    box-shadow: none;
+  }
+}
+
+.modal {
+  display: flex;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  align-items: flex-end;
+  z-index: var(--size-z-index-overlay);
+  background: hsl(0deg 0% 0% / 33%);
+  background-color: rgb(77 82 79 / 50%);
+  overflow: hidden;
+
+  :global {
+    animation: fadeIn 0.2s;
+  }
+}
+
+.modal {
+  .modal-content {
+    display: flex;
+    position: absolute;
+    bottom: 0;
+    flex-direction: column;
+    grid-row: 1;
+    grid-column: 1;
+    z-index: var(--size-z-index-modal);
+    margin: 0;
+    background-color: var(--color-background-primary);
+    padding: 0;
+    width: 100%;
+    border-radius: var(--size-border-radius-md) var(--size-border-radius-md) 0 0;
+
+    :global {
+      animation: slideInUp 0.3s;
+    }
+
+    @media (min-width: $size-breakpoint-tablet) {
+      position: initial;
+      grid-row: 2;
+      grid-column: 2;
+      margin: auto;
+      outline: none;
+      border-radius: var(--size-border-radius-md);
+      box-shadow: var(--modal-box-shadow, var(--size-box-shadow-md));
+      width: 70vw;
+      min-height: unset;
+      max-height: calc(100vh - 80px);
+
+      :global {
+        animation: fadeInUp 0.2s ease-out;
+      }
+    }
+
+    @media (min-width: $size-breakpoint-desktop) {
+      width: 50vw;
+    }
+  }
+}
+
+:global(.fullscreen) {
+  .modal-content {
+    position: fixed;
+    top: env(safe-area-inset-top, 0);
+    right: env(safe-area-inset-right, 0);
+    bottom: env(safe-area-inset-bottom, 0);
+    left: env(safe-area-inset-left, 0);
+    border-radius: 0;
+  }
+
+  @media (min-width: $size-breakpoint-tablet) {
+    display: grid;
+    grid-template-rows: minmax(var(--size-spacing-2xl), 1fr) auto minmax(
+        var(--size-spacing-2xl),
+        1fr
+      );
+    grid-template-columns: var(--size-spacing-2xl) auto var(--size-spacing-2xl);
+    align-items: center;
+    overflow: hidden;
+
+    // should no longer be fullscreen on tablet and larger
+    .modal-content {
+      position: unset;
+      grid-row: 2;
+      grid-column: 2;
+      margin: auto;
+      outline: none;
+      border-radius:var(--size-border-radius-md);
+      box-shadow: var(--size-box-shadow-md);
+      width: 70vw;
+      min-height: unset;
+      max-height: calc(100vh - 80px);
+
+      :global {
+        animation: fadeInUp 0.2s ease-out;
+      }
+
+      @media (min-width: $size-breakpoint-desktop) {
+        width: 50vw;
+      }
+    }
+  }
+}