@gv-tech/design-system 0.8.0

package/src/Button.stories.tsx

@@ -0,0 +1,244 @@
+import type { ComponentProps } from 'react';
+import styled from 'styled-components';
+
+import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
+import { Button } from './Button';
+import { Icon } from './Icon';
+import { IconName } from './types';
+import { StoryLinkWrapper } from './StoryLinkWrapper';
+
+const CustomButton = styled.button`
+  border: 1px solid green;
+  background: lightgreen;
+  color: rebeccapurple;
+  padding: 1em;
+  font-size: 1.2em;
+`;
+
+function ButtonWrapper(props: ComponentProps<typeof CustomButton>) {
+  return <CustomButton {...props} />;
+}
+
+export default {
+  title: 'Design System/Button',
+  component: Button,
+};
+
+import type { StoryFn } from '@storybook/react';
+export const AllButtons: StoryFn = (_args: Record<string, unknown>) => (
+  <div>
+    <Button appearance="primary">Primary</Button>
+    <Button appearance="secondary">Secondary</Button>
+    <Button appearance="tertiary">Tertiary</Button>
+    <Button appearance="outline">Outline</Button>
+    <Button appearance="primaryOutline">Outline primary</Button>
+    <Button appearance="secondaryOutline">Outline secondary</Button>
+    <Button appearance="primary" disabled>
+      Disabled
+    </Button>
+    <br />
+    <Button appearance="primary" loading>
+      Primary
+    </Button>
+    <Button appearance="secondary" loading>
+      Secondary
+    </Button>
+    <Button appearance="tertiary" loading>
+      Tertiary
+    </Button>
+    <Button appearance="outline" loading>
+      Outline
+    </Button>
+    <Button appearance="outline" loading loadingText="Custom...">
+      Outline
+    </Button>
+    <br />
+    <Button appearance="primary" size="small">
+      Primary
+    </Button>
+    <Button appearance="secondary" size="small">
+      Secondary
+    </Button>
+    <Button appearance="tertiary" size="small">
+      Tertiary
+    </Button>
+    <Button appearance="outline" size="small">
+      Outline
+    </Button>
+    <Button appearance="primary" disabled size="small">
+      Disabled
+    </Button>
+    <Button appearance="outline" size="small" containsIcon>
+      <Icon icon={'link' as IconName} aria-label="Link" />
+    </Button>
+    <Button appearance="outline" size="small">
+      <Icon icon={'link' as IconName} />
+      Link
+    </Button>
+  </div>
+);
+
+AllButtons.storyName = 'all buttons';
+
+export const ButtonWrapperStory: StoryFn = (_args: Record<string, unknown>) => (
+  <div>
+    <ButtonWrapper>Original Button Wrapper</ButtonWrapper>
+    <br />
+    <Button ButtonWrapper={ButtonWrapper} appearance="primary">
+      Primary
+    </Button>
+    <Button ButtonWrapper={ButtonWrapper} appearance="secondary">
+      Secondary
+    </Button>
+    <Button ButtonWrapper={ButtonWrapper} appearance="tertiary">
+      Tertiary
+    </Button>
+    <Button ButtonWrapper={ButtonWrapper} appearance="outline">
+      Outline
+    </Button>
+    <Button ButtonWrapper={ButtonWrapper} appearance="primaryOutline">
+      Outline primary
+    </Button>
+    <Button ButtonWrapper={ButtonWrapper} appearance="secondaryOutline">
+      Outline secondary
+    </Button>
+    <Button ButtonWrapper={ButtonWrapper} appearance="primary" disabled>
+      Disabled
+    </Button>
+    <br />
+    <Button ButtonWrapper={ButtonWrapper} appearance="primary" loading>
+      Primary
+    </Button>
+    <Button ButtonWrapper={ButtonWrapper} appearance="secondary" loading>
+      Secondary
+    </Button>
+    <Button ButtonWrapper={ButtonWrapper} appearance="tertiary" loading>
+      Tertiary
+    </Button>
+    <Button ButtonWrapper={ButtonWrapper} appearance="outline" loading>
+      Outline
+    </Button>
+    <Button ButtonWrapper={ButtonWrapper} appearance="outline" loading loadingText="Custom...">
+      Outline
+    </Button>
+    <br />
+    <Button ButtonWrapper={ButtonWrapper} appearance="primary" size="small">
+      Primary
+    </Button>
+    <Button ButtonWrapper={ButtonWrapper} appearance="secondary" size="small">
+      Secondary
+    </Button>
+    <Button ButtonWrapper={ButtonWrapper} appearance="tertiary" size="small">
+      Tertiary
+    </Button>
+    <Button ButtonWrapper={ButtonWrapper} appearance="outline" size="small">
+      Outline
+    </Button>
+    <Button ButtonWrapper={ButtonWrapper} appearance="primary" disabled size="small">
+      Disabled
+    </Button>
+    <Button ButtonWrapper={ButtonWrapper} appearance="outline" size="small" containsIcon>
+      <Icon icon={'link' as IconName} aria-label="Link" />
+    </Button>
+    <Button ButtonWrapper={ButtonWrapper} appearance="outline" size="small">
+      <Icon icon={'link' as IconName} />
+      Link
+    </Button>
+  </div>
+);
+
+ButtonWrapperStory.storyName = 'button wrapper';
+
+export const AnchorWrapper: StoryFn = (_args: Record<string, unknown>) => (
+  <div>
+    <StoryLinkWrapper to="http://storybook.js.org">Original Link Wrapper</StoryLinkWrapper>
+    <br />
+    <Button ButtonWrapper={StoryLinkWrapper} appearance="primary">
+      Primary
+    </Button>
+    <Button ButtonWrapper={StoryLinkWrapper} appearance="secondary">
+      Secondary
+    </Button>
+    <Button ButtonWrapper={StoryLinkWrapper} appearance="tertiary">
+      Tertiary
+    </Button>
+    <Button ButtonWrapper={StoryLinkWrapper} appearance="outline">
+      Outline
+    </Button>
+    <Button ButtonWrapper={StoryLinkWrapper} appearance="primaryOutline">
+      Outline primary
+    </Button>
+    <Button ButtonWrapper={StoryLinkWrapper} appearance="secondaryOutline">
+      Outline secondary
+    </Button>
+    <Button ButtonWrapper={StoryLinkWrapper} appearance="primary" disabled>
+      Disabled
+    </Button>
+    <br />
+    <Button ButtonWrapper={StoryLinkWrapper} appearance="primary" loading>
+      Primary
+    </Button>
+    <Button ButtonWrapper={StoryLinkWrapper} appearance="secondary" loading>
+      Secondary
+    </Button>
+    <Button ButtonWrapper={StoryLinkWrapper} appearance="tertiary" loading>
+      Tertiary
+    </Button>
+    <Button ButtonWrapper={StoryLinkWrapper} appearance="outline" loading>
+      Outline
+    </Button>
+    <Button ButtonWrapper={StoryLinkWrapper} appearance="outline" loading loadingText="Custom...">
+      Outline
+    </Button>
+    <br />
+    <Button ButtonWrapper={StoryLinkWrapper} appearance="primary" size="small">
+      Primary
+    </Button>
+    <Button ButtonWrapper={StoryLinkWrapper} appearance="secondary" size="small">
+      Secondary
+    </Button>
+    <Button ButtonWrapper={StoryLinkWrapper} appearance="tertiary" size="small">
+      Tertiary
+    </Button>
+    <Button ButtonWrapper={StoryLinkWrapper} appearance="outline" size="small">
+      Outline
+    </Button>
+    <Button ButtonWrapper={StoryLinkWrapper} appearance="primary" disabled size="small">
+      Disabled
+    </Button>
+    <Button ButtonWrapper={StoryLinkWrapper} appearance="outline" size="small" containsIcon>
+      <Icon icon={'link' as IconName} aria-label="Link" />
+    </Button>
+    <Button ButtonWrapper={StoryLinkWrapper} appearance="outline" size="small">
+      <Icon icon={'link' as IconName} />
+      Link
+    </Button>
+  </div>
+);
+
+AnchorWrapper.storyName = 'anchor wrapper';
+
+/*
+ * New story using the play function.
+ * See https://storybook.js.org/docs/react/writing-stories/play-function
+ * to learn more about the play function.
+ */
+export const WithInteractions: StoryFn = (_args: Record<string, unknown>) => {
+  const args = _args as unknown as ComponentProps<typeof Button>;
+  return <Button {...args} />;
+};
+WithInteractions.args = {
+  appearance: 'primary',
+  href: 'http://storybook.js.org',
+  ButtonWrapper: StoryLinkWrapper,
+  children: 'Button',
+};
+
+WithInteractions.play = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+  // Assigns canvas to the component root element
+  const canvas = within(canvasElement);
+  await userEvent.click(canvas.getByRole('link'));
+  expect(canvas.getByRole('link')).toHaveAttribute('href', 'http://storybook.js.org');
+};

package/src/Button.tsx

@@ -0,0 +1,384 @@
+import React, { Fragment, JSX } from 'react';
+import styled from 'styled-components';
+import { darken, rgba } from 'polished';
+
+import { color, typography } from './shared/styles';
+import { easing } from './shared/animation';
+import {
+  ButtonProps,
+  BUTTON_APPEARANCES,
+  BUTTON_SIZES,
+  SizeableProps,
+  AppearanceProps,
+  DisableableProps,
+  LoadableProps,
+} from './types';
+
+/**
+ * Props for styled button components
+ */
+interface StyledButtonProps extends SizeableProps, AppearanceProps, DisableableProps, LoadableProps {
+  isUnclickable?: boolean;
+  containsIcon?: boolean;
+}
+
+const APPEARANCES = BUTTON_APPEARANCES;
+const SIZES = BUTTON_SIZES;
+
+const Text = styled.span``;
+
+const Loading = styled.span``;
+
+const StyledButton = styled.button<StyledButtonProps>`
+  border: 0;
+  border-radius: 3em;
+  cursor: pointer;
+  display: inline-block;
+  overflow: hidden;
+  padding: ${(props) => (props.size === SIZES.SMALL ? '8px 16px' : '13px 20px')};
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transition: all 150ms ease-out;
+  transform: translate3d(0, 0, 0);
+  vertical-align: top;
+  white-space: nowrap;
+  user-select: none;
+  opacity: 1;
+  margin: 0;
+  background: transparent;
+
+  font-size: ${(props) => (props.size === SIZES.SMALL ? typography.size.s1 : typography.size.s2)}px;
+  font-weight: ${typography.weight.extrabold};
+  line-height: 1;
+
+  ${(props) =>
+    !props.isLoading &&
+    `
+      &:hover {
+        transform: translate3d(0, -2px, 0);
+        box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
+      }
+
+      &:active {
+        transform: translate3d(0, 0, 0);
+      }
+
+      &:focus {
+        box-shadow: ${rgba(color.primary, 0.4)} 0 1px 9px 2px;
+      }
+
+      &:focus:hover {
+        box-shadow: ${rgba(color.primary, 0.2)} 0 8px 18px 0px;
+      }
+    `}
+
+  ${Text} {
+    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
+    transition: transform 700ms ${easing.rubber};
+    opacity: 1;
+  }
+
+  ${Loading} {
+    transform: translate3d(0, 100%, 0);
+  }
+
+  svg {
+    height: ${(props) => (props.size === SIZES.SMALL ? '14' : '16')}px;
+    width: ${(props) => (props.size === SIZES.SMALL ? '14' : '16')}px;
+    vertical-align: top;
+    margin-right: ${(props) => (props.size === SIZES.SMALL ? '4' : '6')}px;
+    margin-top: ${(props) => (props.size === SIZES.SMALL ? '-1' : '-2')}px;
+    margin-bottom: ${(props) => (props.size === SIZES.SMALL ? '-1' : '-2')}px;
+
+    /* Necessary for js mouse events to not glitch out when hovering on svgs */
+    pointer-events: none;
+  }
+
+  ${(props) =>
+    props.disabled &&
+    `
+      cursor: not-allowed !important;
+      opacity: 0.5;
+      &:hover {
+        transform: none;
+      }
+    `}
+
+  ${(props) =>
+    props.isUnclickable &&
+    `
+      cursor: default !important;
+      pointer-events: none;
+      &:hover {
+        transform: none;
+      }
+    `}
+
+  ${(props) =>
+    props.isLoading &&
+    `
+      cursor: progress !important;
+      opacity: 0.7;
+
+      ${Loading} {
+        transition: transform 700ms ${easing.rubber};
+        transform: translate3d(0, -50%, 0);
+        opacity: 1;
+      }
+
+      ${Text} {
+        transform: scale3d(0, 0, 1) translate3d(0, -100%, 0);
+        opacity: 0;
+      }
+
+      &:hover {
+        transform: none;
+      }
+    `}
+
+  ${(props) =>
+    props.containsIcon &&
+    `
+      svg {
+        display: block;
+        margin: 0;
+      }
+      padding: ${props.size === SIZES.SMALL ? '7' : '12'}px;
+    `}
+
+  ${(props) =>
+    props.appearance === APPEARANCES.PRIMARY &&
+    `
+      background: ${color.primary};
+      color: ${color.lightest};
+
+      ${
+        !props.isLoading &&
+        `
+          &:hover {
+            background: ${darken(0.05, color.primary)};
+          }
+          &:active {
+            box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3em inset;
+          }
+          &:focus {
+            box-shadow: ${rgba(color.primary, 0.4)} 0 1px 9px 2px;
+          }
+          &:focus:hover {
+            box-shadow: ${rgba(color.primary, 0.2)} 0 8px 18px 0px;
+          }
+        `
+      }
+    `}
+
+  ${(props) =>
+    props.appearance === APPEARANCES.SECONDARY &&
+    `
+      background: ${color.secondary};
+      color: ${color.lightest};
+
+      ${
+        !props.isLoading &&
+        `
+          &:hover {
+            background: ${darken(0.05, color.secondary)};
+          }
+          &:active {
+            box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3em inset;
+          }
+          &:focus {
+            box-shadow: ${rgba(color.secondary, 0.4)} 0 1px 9px 2px;
+          }
+          &:focus:hover {
+            box-shadow: ${rgba(color.secondary, 0.2)} 0 8px 18px 0px;
+          }
+        `
+      }
+    `}
+
+  ${(props) =>
+    props.appearance === APPEARANCES.TERTIARY &&
+    `
+      background: ${color.tertiary};
+      color: ${color.darkest};
+
+      ${
+        !props.isLoading &&
+        `
+          &:hover {
+            background: ${darken(0.05, color.tertiary)};
+          }
+          &:active {
+            box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3em inset;
+          }
+          &:focus {
+            box-shadow: ${rgba(color.tertiary, 0.4)} 0 1px 9px 2px;
+          }
+          &:focus:hover {
+            box-shadow: ${rgba(color.tertiary, 0.2)} 0 8px 18px 0px;
+          }
+        `
+      }
+    `}
+
+  ${(props) =>
+    props.appearance === APPEARANCES.OUTLINE &&
+    `
+      box-shadow: ${color.medium} 0 0 0 1px inset;
+      color: ${color.dark};
+      background: transparent;
+
+      ${
+        !props.isLoading &&
+        `
+          &:hover {
+            box-shadow: ${color.mediumdark} 0 0 0 1px inset;
+          }
+
+          &:active {
+            background: ${color.medium};
+            box-shadow: ${color.medium} 0 0 0 1px inset;
+            color: ${color.darkest};
+          }
+          &:focus {
+            box-shadow: ${color.medium} 0 0 0 1px inset, ${rgba(color.secondary, 0.4)} 0 1px 9px 2px;
+          }
+          &:focus:hover {
+            box-shadow: ${color.medium} 0 0 0 1px inset, ${rgba(color.secondary, 0.2)} 0 8px 18px 0px;
+          }
+        `
+      };
+    `};
+
+  ${(props) =>
+    props.appearance === APPEARANCES.PRIMARY_OUTLINE &&
+    `
+        box-shadow: ${color.primary} 0 0 0 1px inset;
+        color: ${color.primary};
+
+        &:hover {
+          box-shadow: ${color.primary} 0 0 0 1px inset;
+          background: transparent;
+        }
+
+        &:active {
+          background: ${color.primary};
+          box-shadow: ${color.primary} 0 0 0 1px inset;
+          color: ${color.lightest};
+        }
+        &:focus {
+          box-shadow: ${color.primary} 0 0 0 1px inset, ${rgba(color.primary, 0.4)} 0 1px 9px 2px;
+        }
+        &:focus:hover {
+          box-shadow: ${color.primary} 0 0 0 1px inset, ${rgba(color.primary, 0.2)} 0 8px 18px 0px;
+        }
+      `};
+
+  ${(props) =>
+    props.appearance === APPEARANCES.SECONDARY_OUTLINE &&
+    `
+        box-shadow: ${color.secondary} 0 0 0 1px inset;
+        color: ${color.secondary};
+
+        &:hover {
+          box-shadow: ${color.secondary} 0 0 0 1px inset;
+          background: transparent;
+        }
+
+        &:active {
+          background: ${color.secondary};
+          box-shadow: ${color.secondary} 0 0 0 1px inset;
+          color: ${color.lightest};
+        }
+        &:focus {
+          box-shadow: ${color.secondary} 0 0 0 1px inset,
+            ${rgba(color.secondary, 0.4)} 0 1px 9px 2px;
+        }
+        &:focus:hover {
+          box-shadow: ${color.secondary} 0 0 0 1px inset,
+            ${rgba(color.secondary, 0.2)} 0 8px 18px 0px;
+        }
+      `};
+`;
+
+type WrapperProps = Record<string, unknown> & { children?: React.ReactNode };
+
+const ButtonLink: React.ComponentType<WrapperProps> = (props) => <StyledButton as="a" {...props} />;
+
+const applyStyle = (ButtonWrapper?: ButtonProps['ButtonWrapper']): React.ComponentType<WrapperProps> | undefined => {
+  if (!ButtonWrapper) return undefined;
+
+  const Wrapped = ({
+    containsIcon: _containsIcon,
+    isLoading: _isLoading,
+    isUnclickable: _isUnclickable,
+    children: _children,
+    ...rest
+  }: WrapperProps): JSX.Element => <ButtonWrapper {...(rest as Record<string, unknown>)}>{_children}</ButtonWrapper>;
+
+  return styled(StyledButton).attrs({ as: Wrapped })`` as unknown as React.ComponentType<WrapperProps>;
+};
+
+/**
+ * Button component with multiple appearance and size variants
+ *
+ * @example
+ * ```tsx
+ * <Button>Default Button</Button>
+ * <Button appearance="primary" size="large">Primary Large</Button>
+ * <Button loading loadingText="Saving...">Save</Button>
+ * <Button disabled>Disabled</Button>
+ * ```
+ */
+export const Button = ({
+  isLoading = false,
+  loadingText,
+  isLink = false,
+  appearance = APPEARANCES.TERTIARY,
+  isDisabled = false,
+  isUnclickable = false,
+  containsIcon = false,
+  size = SIZES.MEDIUM,
+  children,
+  ButtonWrapper,
+  ...props
+}: ButtonProps) => {
+  // Dev-time accessibility check: if the button is icon-only, require an accessible name
+  if (process.env.NODE_ENV !== 'production') {
+    const hasAriaLabel = Object.prototype.hasOwnProperty.call(props, 'aria-label');
+    const noVisibleChildren = !children || (typeof children === 'string' && children.trim() === '');
+    if (containsIcon && noVisibleChildren && !hasAriaLabel) {
+      console.warn('Button: icon-only buttons should include an `aria-label` or visible text for accessibility.');
+    }
+  }
+  const buttonInner = (
+    <Fragment>
+      <Text>{children}</Text>
+      {isLoading && <Loading>{loadingText || 'Loading...'}</Loading>}
+    </Fragment>
+  );
+
+  const StyledButtonWrapper = React.useMemo(() => applyStyle(ButtonWrapper), [ButtonWrapper]);
+
+  let SelectedButton: React.ComponentType<WrapperProps> = StyledButton as unknown as React.ComponentType<WrapperProps>;
+  if (ButtonWrapper && StyledButtonWrapper) {
+    SelectedButton = StyledButtonWrapper;
+  } else if (isLink) {
+    SelectedButton = ButtonLink;
+  }
+
+  return (
+    <SelectedButton
+      size={size}
+      appearance={appearance}
+      isLoading={isLoading}
+      disabled={isDisabled}
+      isUnclickable={isUnclickable}
+      containsIcon={containsIcon}
+      {...props}
+    >
+      {buttonInner}
+    </SelectedButton>
+  );
+};