@gv-tech/design-system 0.9.0 → 1.1.0

package/src/Button.tsx

@@ -1,384 +0,0 @@
-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>
-  );
-};

package/src/Icon.stories.tsx

@@ -1,101 +0,0 @@
-import { ComponentProps, Fragment } from 'react';
-import styled, { css } from 'styled-components';
-
-import { Icon } from './Icon';
-import { icons } from './shared/icons';
-
-const Meta = styled.div`
-  color: #666;
-  font-size: 12px;
-`;
-
-const Item = styled.li<{ minimal?: boolean }>`
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  flex: 0 1 20%;
-  min-width: 120px;
-
-  padding: 0px 7.5px 20px;
-
-  svg {
-    margin-right: 10px;
-    width: 24px;
-    height: 24px;
-  }
-
-  ${(props) =>
-    props.minimal &&
-    css`
-      flex: none;
-      min-width: auto;
-      padding: 0;
-      background: #fff;
-      border: 1px solid #666;
-
-      svg {
-        display: block;
-        margin-right: 0;
-        width: 48px;
-        height: 48px;
-      }
-    `};
-`;
-
-const List = styled.ul`
-  display: flex;
-  flex-flow: row wrap;
-  list-style: none;
-`;
-
-export default {
-  title: 'Design System/Icon',
-  component: Icon,
-};
-
-export const Labels = (_args: Record<string, unknown>) => (
-  <Fragment>
-    There are {Object.keys(icons).length} icons
-    <List>
-      {Object.keys(icons).map((key) => (
-        <Item key={key}>
-          <Icon icon={key} aria-hidden />
-          <Meta>{key}</Meta>
-        </Item>
-      ))}
-    </List>
-  </Fragment>
-);
-
-export const NoLabels = (_args: Record<string, unknown>) => (
-  <List>
-    {Object.keys(icons).map((key) => (
-      <Item minimal key={key}>
-        <Icon icon={key} aria-label={key} />
-      </Item>
-    ))}
-  </List>
-);
-
-NoLabels.storyName = 'no labels';
-
-export const Inline = (args: Partial<ComponentProps<typeof Icon>>) => (
-  <Fragment>
-    this is an inline <Icon {...(args as ComponentProps<typeof Icon>)} /> icon (default)
-  </Fragment>
-);
-Inline.args = {
-  icon: 'facehappy',
-  'aria-label': 'Happy face',
-};
-
-export const Block = (args: Partial<ComponentProps<typeof Icon>>) => (
-  <Fragment>
-    this is a block <Icon {...(args as ComponentProps<typeof Icon>)} /> icon
-  </Fragment>
-);
-Block.args = {
-  icon: 'facehappy',
-  'aria-label': 'Happy face',
-  block: true,
-};

package/src/Icon.tsx

@@ -1,64 +0,0 @@
-import styled from 'styled-components';
-import { icons } from './shared/icons';
-import { IconProps } from './types';
-
-/**
- * Props for styled Svg component
- */
-interface SvgProps {
-  block?: boolean;
-}
-
-/**
- * Styled SVG wrapper
- */
-const Svg = styled.svg<SvgProps>`
-  display: ${(props) => (props.block ? 'block' : 'inline-block')};
-  vertical-align: middle;
-
-  shape-rendering: inherit;
-  transform: translate3d(0, 0, 0);
-`;
-
-/**
- * Styled path element
- */
-const Path = styled.path`
-  fill: currentColor;
-`;
-
-/**
- * An Icon is a piece of visual element, but we must ensure its accessibility while using it.
- * It can have 2 purposes:
- *
- * - *decorative only*: for example, it illustrates a label next to it. We must ensure that it is ignored by screen readers, by setting `aria-hidden` attribute (ex: `<Icon icon="check" aria-hidden />`)
- * - *non-decorative*: it means that it delivers information. For example, an icon as only child in a button. The meaning can be obvious visually, but it must have a proper text alternative via `aria-label` for screen readers. (ex: `<Icon icon="print" aria-label="Print this document" />`)
- *
- * @example
- * ```tsx
- * <Icon icon="check" />
- * <Icon icon="user" block />
- * <Icon icon="print" aria-label="Print document" />
- * ```
- */
-export const Icon = ({ icon, block = false, ...props }: IconProps) => {
-  const path = icons[icon as keyof typeof icons];
-  if (!path) {
-    if (process.env.NODE_ENV !== 'production') {
-      console.warn(`Icon: icon key "${icon}" not found in icons map.`);
-    }
-
-    // Render an empty, aria-hidden SVG so consumers don't get a broken path element
-    return (
-      <Svg viewBox="0 0 1024 1024" width="20px" height="20px" block={block} aria-hidden {...props}>
-        <Path d="" />
-      </Svg>
-    );
-  }
-
-  return (
-    <Svg viewBox="0 0 1024 1024" width="20px" height="20px" block={block} {...props}>
-      <Path d={path} />
-    </Svg>
-  );
-};

package/src/Intro.stories.tsx

@@ -1,20 +0,0 @@
-import { Meta } from '@storybook/react-vite';
-
-const meta: Meta = {
-  title: 'Design System/Introduction',
-  parameters: {
-    docs: {
-      description: {
-        component: `
-# Introduction to the Storybook design system tutorial
-
-The Storybook design system tutorial is a subset of the full [Storybook design system](https://github.com/storybookjs/design-system/), created as a learning resource for those interested in learning how to write and publish a design system using best practice techniques.
-
-Learn more in the [Storybook tutorials](https://storybook.js.org/tutorials/).
-        `,
-      },
-    },
-  },
-};
-
-export default meta;

package/src/Link.stories.tsx

@@ -1,69 +0,0 @@
-import styled from 'styled-components';
-import { action } from 'storybook/actions';
-
-import { Icon } from './Icon';
-import { Link } from './Link';
-import { StoryLinkWrapper } from './StoryLinkWrapper';
-
-const CustomLink = styled(Link)`
-  && {
-    color: red;
-  }
-`;
-
-const onLinkClick = action('onLinkClick');
-
-export default {
-  title: 'Design System/Link',
-  component: Link,
-};
-
-export const All = () => (
-  <div>
-    <Link href="https://storybook.js.org/tutorials/">Default</Link>
-    <br />
-    <Link secondary href="https://storybook.js.org/tutorials/">
-      Secondary
-    </Link>
-    <br />
-    <Link tertiary href="https://storybook.js.org/tutorials/">
-      tertiary
-    </Link>
-    <br />
-    <Link nochrome href="https://storybook.js.org/tutorials/">
-      nochrome
-    </Link>
-    <br />
-    <Link href="https://storybook.js.org/tutorials/">
-      <Icon icon="discord" aria-hidden />
-      With icon in front
-    </Link>
-    <br />
-    <Link containsIcon href="https://storybook.js.org/tutorials/" aria-label="Toggle side bar">
-      <Icon icon="sidebar" aria-hidden />
-    </Link>
-    <br />
-    <Link containsIcon withArrow href="https://storybook.js.org/tutorials/">
-      With arrow behind
-    </Link>
-    <br />
-    <span style={{ background: '#333' }}>
-      <Link inverse href="https://storybook.js.org/tutorials/">
-        Inverted colors
-      </Link>
-    </span>
-    <br />
-    {/* gatsby and styled-components don't work nicely together  */}
-    <Link isButton onClick={onLinkClick}>
-      is actually a button
-    </Link>
-    <br />
-    <Link tertiary LinkWrapper={StoryLinkWrapper} href="http://storybook.js.org">
-      has a LinkWrapper like GatsbyLink or NextLink
-    </Link>
-    <br />
-    <CustomLink tertiary LinkWrapper={StoryLinkWrapper} href="http://storybook.js.org">
-      has a LinkWrapper like GatsbyLink or NextLink with custom styling
-    </CustomLink>
-  </div>
-);