@hyphen/hyphen-components 2.9.0

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,157 @@
+import React, { FC, ReactNode, MouseEvent, KeyboardEvent } from 'react';
+import classNames from 'classnames';
+import { Box } from '../Box/Box';
+import { Icon } from '../Icon/Icon';
+import styles from './Alert.module.scss';
+import { AlertVariant } from './Alert.types';
+import { ALERT_ICONS_MAP } from './Alert.constants';
+
+export interface AlertProps {
+  /**
+   * Custom class to apply to the alert.
+   */
+  className?: string;
+  /**
+   * Custom text to use as a close button.
+   */
+  closeText?: string;
+  /**
+   * Whether the alert as an icon that corresponds to its variant (Success, warning, etc.).
+   */
+  hasIcon?: boolean;
+  /**
+   * Whether the alert can be closed by the user. If `true` it will render
+   * the 'close' icon on the right hand side of the alert.
+   */
+  isClosable?: boolean;
+  /**
+   * Renders a version of the alert with smaller padding.
+   */
+  isCompact?: boolean;
+  /**
+   * The text message or ReactNode to be rendered in the alert.
+   */
+  message?: string | ReactNode;
+  /**
+   * Whether the alert can be closed by the user. If `true` it will render
+   * the 'close' icon on the right hand side of the alert.
+   */
+  onClose?: (
+    event: MouseEvent<HTMLOrSVGElement> | KeyboardEvent<HTMLSpanElement>
+  ) => void;
+  /**
+   * A render function that returns JSX if preferred over a static ReactNode or string.
+   */
+  render?: () => ReactNode;
+  /**
+   * The title for the alert.
+   */
+  title?: string;
+  /**
+   * The type/color of the alert to show.
+   */
+  variant?: AlertVariant;
+  /**
+   * Additional props to be spread to rendered element
+   */
+  [x: string]: any; // eslint-disable-line
+}
+export const Alert: FC<AlertProps> = ({
+  className = '',
+  closeText = '',
+  hasIcon = false,
+  isCompact = false,
+  isClosable = false,
+  message = '',
+  onClose = undefined,
+  render = undefined,
+  title = '',
+  variant = 'default',
+  ...restProps
+}) => {
+  const handleClose = (
+    event: MouseEvent<HTMLOrSVGElement> | KeyboardEvent<HTMLSpanElement>
+  ): void => {
+    if (!onClose) return;
+
+    onClose(event);
+  };
+
+  const renderAlertIcon = (): ReactNode => (
+    <Box fontSize="md" className={styles[`alert__icon__${variant}`]}>
+      <Icon
+        name={ALERT_ICONS_MAP[variant].icon}
+        data-testid={`alert-icon-${variant}-test-id`}
+      />
+    </Box>
+  );
+
+  const renderCloseIcon = (): ReactNode => {
+    const handleCloseKeyPress = (
+      event: KeyboardEvent<HTMLSpanElement>
+    ): void => {
+      if (event.keyCode === 13) handleClose(event);
+    };
+
+    return (
+      <Box
+        margin="0 0 0 auto"
+        color="secondary"
+        className={styles['close-icon']}
+      >
+        <button
+          type="button"
+          onClick={handleClose}
+          onKeyUp={handleCloseKeyPress}
+        >
+          {closeText || (
+            <Icon name="remove" data-testid="alert-close-icon-test-id" />
+          )}
+        </button>
+      </Box>
+    );
+  };
+
+  const alertContainerClasses: string = classNames(
+    styles[`alert__${variant}`],
+    styles.alert,
+    className
+  );
+
+  return (
+    <Box
+      alignItems="flex-start"
+      gap="md"
+      className={alertContainerClasses}
+      direction="row"
+      padding={isCompact ? 'xs' : 'md'}
+      radius="md"
+      role="alert"
+      fontSize="sm"
+      {...restProps}
+    >
+      {hasIcon && renderAlertIcon()}
+      <div>
+        {render ? (
+          render()
+        ) : (
+          <Box display="block" childGap={message && title ? '2xs' : undefined}>
+            {title && (
+              <Box
+                as="h4"
+                fontSize="sm"
+                fontWeight="semibold"
+                className={styles['alert-heading']}
+              >
+                {title}
+              </Box>
+            )}
+            {message &&
+              (typeof message === 'string' ? <p>{message}</p> : message)}
+          </Box>
+        )}
+      </div>
+      {isClosable && renderCloseIcon()}
+    </Box>
+  );
+};

package/src/components/Alert/Alert.types.ts

@@ -0,0 +1,14 @@
+import { BackgroundColor, FontColor, IconName } from '../../types';
+
+export type AlertVariant =
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'default';
+
+export type AlertAttributes = {
+  icon: IconName;
+  color: FontColor;
+  background: BackgroundColor;
+};

package/src/components/Badge/Badge.mdx

@@ -0,0 +1,28 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { Badge } from './Badge';
+import * as Stories from './Badge.stories';
+
+<Meta of={Stories} />
+
+# Badge
+
+Badges are used to display the status of an object or of an action that’s been taken.
+
+<Canvas of={Stories.Overview} />
+
+## Props
+
+<ArgTypes of={Badge} />
+
+## Variants
+
+Badges come in different variants based on the kind of message being delivered to the user.
+
+<Canvas of={Stories.Variants} />
+
+## Sizes
+
+Set the size of the badge to `sm`, `md`, `lg` or `xl`. `md` is the default size. A `ResponsiveProp` object may also be used
+so the badge can be a different size per breakpoint.
+
+<Canvas of={Stories.Sizes} />

package/src/components/Badge/Badge.module.scss

@@ -0,0 +1,155 @@
+@import '@hyphen/hyphen-design-tokens/build/scss/variables';
+
+@mixin size-sm {
+  font-size: var(--size-font-size-xs);
+  padding: var(--size-spacing-2xs) var(--size-spacing-sm);
+  border-radius: var(--size-border-radius-lg);
+}
+
+%size-sm {
+  @include size-sm;
+}
+.size-sm {
+  @extend %size-sm;
+}
+
+@mixin size-md {
+  font-size: var(--size-font-size-sm);
+  padding: var(--size-spacing-xs) var(--size-spacing-md);
+  border-radius: var(--size-border-radius-xl);
+}
+
+%size-md {
+  @include size-md;
+}
+.size-md {
+  @extend %size-md;
+}
+
+@mixin size-lg {
+  font-size: var(--size-font-size-md);
+  padding: var(--size-spacing-sm) var(--size-spacing-lg);
+  border-radius: var(--size-border-radius-2xl);
+}
+
+%size-lg {
+  @include size-lg;
+}
+.size-lg {
+  @extend %size-lg;
+}
+
+.badge {
+  border-style: solid;
+  border-width: var(--size-border-width-sm);
+  font-weight: var(--size-font-weight-semibold);
+  line-height: var(--size-line-height-base);
+
+  &.inverse {
+    background-color: var(--color-background-inverse);
+    border-color: var(--color-background-inverse);
+    color: var(--color-font-inverse);
+  }
+
+  &.purple {
+    background-color: var(--color-base-purple-500);
+    border-color: var(--color-base-purple-600);
+    color: var(--color-base-white);
+  }
+
+  &.green {
+    background-color: var(--color-base-green-500);
+    border-color: var(--color-base-green-600);
+    color: var(--color-base-white);
+  }
+
+  &.red {
+    background-color: var(--color-base-red-500);
+    border-color: var(--color-base-red-600);
+    color: var(--color-base-white);
+  }
+
+  &.blue {
+    background-color: var(--color-base-blue-500);
+    border-color: var(--color-base-blue-600);
+    color: var(--color-base-white);
+  }
+
+  &.yellow {
+    background-color: var(--color-base-yellow-400);
+    border-color: var(--color-base-yellow-500);
+    color: var(--color-base-black-500);
+  }
+
+  &.light-grey {
+    background-color: var(--color-base-grey-200);
+    border-color: var(--color-base-grey-200);
+    color: var(--color-base-grey-600);
+  }
+
+  &.dark-grey {
+    background-color: var(--color-base-grey-400);
+    border-color: var(--color-base-grey-400);
+    color: var(--color-base-white);
+  }
+
+  &.hyphen {
+    background: var(--color-background-brand-gradient);
+    border-color: var(--color-base-yellow-500);
+    color: var(--color-base-white);
+  }
+
+  &.size-sm {
+    @extend %size-sm;
+  }
+
+  &.size-md {
+    @extend %size-md;
+  }
+
+  &.size-lg {
+    @extend %size-lg;
+  }
+
+  @media (min-width: $size-breakpoint-tablet) {
+    &.size-sm-tablet {
+      @include size-sm;
+    }
+
+    &.size-md-tablet {
+      @include size-md;
+    }
+
+    &.size-lg-tablet {
+      @include size-lg;
+    }
+  }
+
+  @media (min-width: $size-breakpoint-desktop) {
+    &.size-sm-desktop {
+      @include size-sm;
+    }
+
+    &.size-md-desktop {
+      @include size-md;
+    }
+
+    &.size-lg-desktop {
+      @include size-lg;
+    }
+  }
+
+  @media (min-width: $size-breakpoint-hd) {
+    &.size-sm-hd {
+      @include size-sm;
+    }
+
+    &.size-md-hd {
+      @include size-md;
+    }
+
+    &.size-lg-hd {
+      @include size-lg;
+    }
+  }
+}

package/src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,52 @@
+import { Meta } from '@storybook/react';
+import { Badge, BadgeVariant } from './Badge';
+import React from 'react';
+import { Box } from '../Box/Box';
+
+const meta: Meta<typeof Badge> = {
+  title: 'Components/Badge',
+  component: Badge,
+};
+
+export default meta;
+
+export const Overview = () => <Badge message="Hello world!" />;
+
+export const Variants = () => {
+  const variants = [
+    'light-grey',
+    'dark-grey',
+    'inverse',
+    'purple',
+    'blue',
+    'green',
+    'yellow',
+    'red',
+    'hyphen',
+  ] as BadgeVariant[];
+  return (
+    <Box direction="row" gap="sm">
+      {variants.map((variant) => (
+        <Badge message={variant} variant={variant} key={variant} />
+      ))}
+    </Box>
+  );
+};
+
+export const Sizes = () => (
+  <>
+    <Box direction="column" alignItems="flex-start" gap="md">
+      <Badge size="sm" message="Small" />
+      <Badge size="md" message="Medium" />
+      <Badge size="lg" message="Large" />
+      <Badge
+        size={{
+          base: 'sm',
+          tablet: 'md',
+          desktop: 'lg',
+        }}
+        message="Responsive"
+      />
+    </Box>
+  </>
+);

package/src/components/Badge/Badge.test.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Badge, BadgeSize, BadgeVariant } from './Badge';
+
+export const BADGE_VARIANTS: BadgeVariant[] = [
+  'light-grey',
+  'dark-grey',
+  'inverse',
+  'green',
+  'yellow',
+  'blue',
+  'red',
+  'purple',
+  'hyphen',
+];
+
+export const BADGE_SIZES: BadgeSize[] = ['sm', 'md', 'lg'];
+
+describe('Badge', () => {
+  test('Label correctly renders with base props', () => {
+    render(<Badge message="hello" />);
+    const badge = screen.getByText('hello');
+    expect(badge).toBeInTheDocument();
+  });
+
+  describe('Variants', () => {
+    BADGE_VARIANTS.map((variant) =>
+      describe(`${BADGE_VARIANTS}`, () => {
+        test(`it has a ${variant} class applied to it`, () => {
+          render(<Badge variant={variant} message={`${variant} Badge`} />);
+          const badge = screen.getByText(`${variant} Badge`);
+
+          expect(badge.getAttribute('class')).toContain(variant);
+        });
+      })
+    );
+  });
+
+  describe('Sizes', () => {
+    BADGE_SIZES.map((size) =>
+      describe(`${BADGE_SIZES}`, () => {
+        test(`it has a ${size} class applied to it`, () => {
+          render(<Badge size={size} message={`${size} Badge`} />);
+          const badge = screen.getByText(`${size} Badge`);
+
+          expect(badge.getAttribute('class')).toContain(`size-${size}`);
+        });
+      })
+    );
+
+    test('It applies responsive size classes', () => {
+      render(
+        <Badge
+          size={{
+            base: 'sm',
+            tablet: 'md',
+            desktop: 'lg',
+            hd: 'sm',
+          }}
+          message="badge"
+        >
+          button
+        </Badge>
+      );
+
+      const badge = screen.getByText('badge');
+
+      expect(badge.getAttribute('class')).toContain('size-sm');
+      expect(badge.getAttribute('class')).toContain('size-md-tablet');
+      expect(badge.getAttribute('class')).toContain('size-lg-desktop');
+      expect(badge.getAttribute('class')).toContain('size-sm-hd');
+    });
+  });
+});

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,70 @@
+import React, { FC, ReactNode } from 'react';
+import classNames from 'classnames';
+import { FontSize, BaseSpacing, ResponsiveProp } from '../../types';
+import { generateResponsiveClasses } from '../../lib/generateResponsiveClasses';
+import styles from './Badge.module.scss';
+import { Box } from '../Box/Box';
+
+export type BadgeSize = 'sm' | 'md' | 'lg';
+
+export type BadgeVariant =
+  | 'light-grey'
+  | 'dark-grey'
+  | 'inverse'
+  | 'green'
+  | 'yellow'
+  | 'blue'
+  | 'red'
+  | 'purple'
+  | 'hyphen';
+
+export type BadgeSizeAttributes = { fontSize: FontSize; padding: BaseSpacing };
+export interface BadgeProps {
+  /**
+   * Custom class to apply to the badge container div.
+   */
+  className?: string;
+  /**
+   * The text message or ReactNode to be rendered in the badge.
+   */
+  message?: string | ReactNode;
+  /**
+   * The size of the button.
+   */
+  size?: BadgeSize | ResponsiveProp<BadgeSize>;
+  /**
+   * The type/color of the badge to show.
+   */
+  variant?: BadgeVariant;
+  /**
+   * Additional props to be spread to rendered element
+   */
+  [x: string]: any; // eslint-disable-line
+}
+
+export const Badge: FC<BadgeProps> = ({
+  className = '',
+  message = '',
+  variant = 'light-grey',
+  size = 'md',
+  ...restProps
+}) => {
+  const responsiveClasses = generateResponsiveClasses('size', size).map(
+    (c) => styles[c]
+  );
+
+  const badgeClasses: string = classNames(
+    styles.badge,
+    className,
+    responsiveClasses,
+    {
+      [styles[variant]]: variant,
+    }
+  );
+
+  return (
+    <Box className={badgeClasses} display="inline-block" {...restProps}>
+      {message}
+    </Box>
+  );
+};