@superdispatch/ui-lab 0.50.5 → 0.50.7

package/src/button/Button.tsx

@@ -1,498 +0,0 @@
-import { CircularProgress } from '@material-ui/core';
-import { Color, ColorDynamic } from '@superdispatch/ui';
-import {
-  AriaAttributes,
-  FocusEventHandler,
-  forwardRef,
-  HTMLAttributes,
-  MouseEventHandler,
-  ReactNode,
-} from 'react';
-import styled, { css } from 'styled-components';
-
-export type ButtonSizeProp = 'small' | 'medium' | 'large';
-export type ButtonVariantProp =
-  | 'critical'
-  | 'default'
-  | 'inverted'
-  | 'neutral'
-  | 'primary'
-  | 'text'
-  | 'success';
-
-interface ButtonStyleProps {
-  disabled: boolean;
-  fullWidth: boolean;
-  size: ButtonSizeProp;
-  variant: ButtonVariantProp;
-}
-
-interface ButtonVariables {
-  fontSize: number;
-  fontSizeMobile: number;
-  lineHeight: number;
-  lineHeightMobile: number;
-
-  paddingX: number;
-  paddingXMobile: number;
-  paddingY: number;
-  paddingYMobile: number;
-
-  textColor: ColorDynamic | Color;
-  textColorHovered: ColorDynamic | Color;
-  textColorDisabled: ColorDynamic | Color;
-
-  iconColor: ColorDynamic | Color;
-
-  outlineColor: ColorDynamic;
-
-  borderColor: ColorDynamic;
-  borderColorHovered: ColorDynamic;
-  borderColorDisabled: ColorDynamic;
-
-  backgroundColor: ColorDynamic;
-  backgroundColorActive: ColorDynamic;
-  backgroundColorHovered: ColorDynamic;
-  backgroundColorDisabled: ColorDynamic;
-}
-
-function createButtonVariables(
-  size: ButtonSizeProp,
-  {
-    fontSize = size === 'large' ? 16 : 14,
-    lineHeight = size === 'large' ? 24 : 20,
-    fontSizeMobile = size === 'large' ? 18 : 16,
-    lineHeightMobile = size === 'large' ? 28 : 24,
-
-    paddingX = size === 'large' ? 32 : 16,
-    paddingY = size === 'large' ? 8 : size === 'small' ? 2 : 6,
-    paddingXMobile = size === 'large' ? 64 : 24,
-    paddingYMobile = size === 'large' ? 14 : size === 'small' ? 4 : 10,
-
-    textColor = ColorDynamic.Transparent,
-    textColorHovered = textColor,
-    textColorDisabled = textColor,
-
-    iconColor = textColor,
-
-    outlineColor = ColorDynamic.Transparent,
-
-    borderColor = ColorDynamic.Transparent,
-    borderColorHovered = borderColor,
-    borderColorDisabled = borderColor,
-
-    backgroundColor = ColorDynamic.Transparent,
-    backgroundColorHovered = backgroundColor,
-    backgroundColorActive = backgroundColorHovered,
-    backgroundColorDisabled = backgroundColor,
-  }: Partial<ButtonVariables>,
-): ButtonVariables {
-  return {
-    paddingX,
-    paddingY,
-    fontSize,
-    lineHeight,
-
-    paddingXMobile,
-    paddingYMobile,
-    fontSizeMobile,
-    lineHeightMobile,
-
-    textColor,
-    borderColor,
-    outlineColor,
-    backgroundColor,
-
-    textColorHovered,
-    borderColorHovered,
-    backgroundColorHovered,
-
-    backgroundColorActive,
-
-    textColorDisabled,
-    borderColorDisabled,
-    backgroundColorDisabled,
-
-    iconColor,
-  };
-}
-
-function getDefaultVariables(size: ButtonSizeProp): ButtonVariables {
-  return createButtonVariables(size, {
-    textColor: Color.White,
-    outlineColor: ColorDynamic.Blue30,
-    backgroundColor: ColorDynamic.Blue300,
-
-    textColorHovered: Color.White,
-    backgroundColorHovered: ColorDynamic.Blue500,
-
-    backgroundColorActive: ColorDynamic.Blue400,
-    textColorDisabled: Color.White50,
-    backgroundColorDisabled: ColorDynamic.Blue30,
-  });
-}
-
-function getPrimaryVariables(size: ButtonSizeProp): ButtonVariables {
-  return getDefaultVariables(size);
-}
-
-function getNeutralVariables(size: ButtonSizeProp): ButtonVariables {
-  return createButtonVariables(size, {
-    textColor: ColorDynamic.Dark500,
-    borderColor: ColorDynamic.Silver500,
-    outlineColor: ColorDynamic.Blue30,
-    backgroundColor: ColorDynamic.White,
-
-    textColorHovered: ColorDynamic.Blue500,
-    borderColorHovered: ColorDynamic.Blue500,
-    backgroundColorHovered: ColorDynamic.Blue50,
-
-    backgroundColorActive: ColorDynamic.Blue50,
-
-    textColorDisabled: ColorDynamic.Silver500,
-    iconColor: ColorDynamic.Dark100,
-  });
-}
-
-function getCriticalVariables(size: ButtonSizeProp): ButtonVariables {
-  return createButtonVariables(size, {
-    textColor: ColorDynamic.Red500,
-    borderColor: ColorDynamic.Red500,
-    outlineColor: ColorDynamic.Red30,
-    backgroundColor: ColorDynamic.Red50,
-
-    backgroundColorHovered: ColorDynamic.Red300Aplha20,
-
-    backgroundColorActive: ColorDynamic.Red10,
-
-    textColorDisabled: ColorDynamic.Red30,
-    borderColorDisabled: ColorDynamic.Red30,
-    backgroundColorDisabled: ColorDynamic.Red50,
-  });
-}
-
-function getTextVariables(size: ButtonSizeProp): ButtonVariables {
-  return createButtonVariables(size, {
-    textColor: ColorDynamic.Blue500,
-
-    outlineColor: ColorDynamic.Blue30,
-
-    textColorHovered: ColorDynamic.Blue500,
-    backgroundColorHovered: ColorDynamic.Blue50,
-
-    backgroundColorActive: ColorDynamic.Blue50,
-
-    textColorDisabled: ColorDynamic.Blue30,
-  });
-}
-
-function getInvertedVariables(size: ButtonSizeProp): ButtonVariables {
-  return createButtonVariables(size, {
-    textColor: ColorDynamic.White,
-    outlineColor: ColorDynamic.White40,
-    backgroundColor: ColorDynamic.White20,
-
-    textColorHovered: ColorDynamic.White,
-    backgroundColorHovered: ColorDynamic.White40,
-
-    backgroundColorActive: ColorDynamic.White20,
-
-    textColorDisabled: ColorDynamic.White50,
-    backgroundColorDisabled: ColorDynamic.White08,
-  });
-}
-
-function getSuccessVariables(size: ButtonSizeProp): ButtonVariables {
-  return createButtonVariables(size, {
-    textColor: Color.White,
-    outlineColor: ColorDynamic.Green30,
-    backgroundColor: ColorDynamic.Green300,
-
-    backgroundColorHovered: ColorDynamic.Green500,
-
-    backgroundColorActive: ColorDynamic.Green500,
-
-    textColorDisabled: Color.White50,
-    backgroundColorDisabled: ColorDynamic.Green30,
-  });
-}
-
-const ButtonRoot = styled.button<ButtonStyleProps>(
-  ({ size, theme, variant, fullWidth }) => {
-    const variables =
-      variant === 'primary'
-        ? getPrimaryVariables(size)
-        : variant === 'neutral'
-        ? getNeutralVariables(size)
-        : variant === 'critical'
-        ? getCriticalVariables(size)
-        : variant === 'text'
-        ? getTextVariables(size)
-        : variant === 'inverted'
-        ? getInvertedVariables(size)
-        : variant === 'success'
-        ? getSuccessVariables(size)
-        : getDefaultVariables(size);
-
-    return css`
-      /* Reset button styles */
-      border: 0;
-      margin: 0;
-      outline: 0;
-      position: relative;
-      vertical-align: middle;
-
-      /* Fixes for the anchor element */
-      cursor: pointer;
-      text-decoration: none;
-
-      &[aria-disabled='true'] {
-        cursor: default;
-        /* Disable link interactions */
-        pointer-events: none;
-      }
-
-      /* Firefox fixes */
-      -moz-appearance: none;
-
-      &::-moz-focus-inner {
-        /* Remove Firefox dotted outline */
-        border-style: none;
-      }
-
-      /* Webkit fixes */
-      -webkit-appearance: none;
-      -webkit-user-select: none;
-      -webkit-tap-highlight-color: transparent;
-      @media print {
-        -webkit-print-color-adjust: exact;
-      }
-
-      /* Button styles */
-
-      --button-visibility: visible;
-      --button-text-color: ${variables.textColor};
-      --button-border-color: ${variables.borderColor};
-      --button-outline-color: ${ColorDynamic.Transparent};
-      --button-background-color: ${variables.backgroundColor};
-      --button-icon-color: ${variables.iconColor};
-
-      --button-padding-x: ${variables.paddingXMobile}px;
-      --button-padding-y: ${variables.paddingYMobile}px;
-      --button-font-size: ${variables.fontSizeMobile}px;
-      --button-line-height: ${variables.lineHeightMobile}px;
-
-      ${theme.breakpoints.up('sm')} {
-        --button-padding-x: ${variables.paddingX}px;
-        --button-padding-y: ${variables.paddingY}px;
-        --button-font-size: ${variables.fontSize}px;
-        --button-line-height: ${variables.lineHeight}px;
-      }
-
-      &[aria-disabled='true'] {
-        --button-text-color: ${variables.textColorDisabled};
-        --button-border-color: ${variables.borderColorDisabled};
-        --button-background-color: ${variables.backgroundColorDisabled};
-        --button-icon-color: ${variables.textColorDisabled};
-
-        &[aria-busy='true'] {
-          --button-visibility: hidden;
-        }
-      }
-
-      &[aria-disabled='false'] {
-        &[aria-expanded='true'] {
-          --button-text-color: ${variables.textColorHovered};
-          --button-border-color: ${variables.borderColorHovered};
-          --button-background-color: ${variables.backgroundColorHovered};
-          --button-icon-color: ${variables.textColorHovered};
-        }
-
-        &,
-        &[aria-expanded='true'] {
-          &:focus {
-            --button-outline-color: ${variables.outlineColor};
-          }
-
-          @media (hover: hover) and (pointer: fine) {
-            &:hover {
-              --button-text-color: ${variables.textColorHovered};
-              --button-border-color: ${variables.borderColorHovered};
-              --button-background-color: ${variables.backgroundColorHovered};
-
-              span {
-                svg {
-                  fill: ${variables.textColorHovered};
-                }
-              }
-            }
-          }
-
-          &:active {
-            --button-background-color: ${variables.backgroundColorActive};
-          }
-        }
-      }
-
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-
-      min-width: 48px;
-      width: ${fullWidth ? '100%' : 'auto'};
-
-      border-radius: 4px;
-      font-family: ${theme.typography.fontFamily};
-      font-weight: ${theme.typography.fontWeightBold};
-
-      color: var(--button-text-color);
-      background-color: var(--button-background-color);
-      font-size: var(--button-font-size);
-      line-height: var(--button-line-height);
-      padding: var(--button-padding-y) var(--button-padding-x);
-
-      box-shadow: inset 0 0 0 1px var(--button-border-color),
-        0 0 0 2px var(--button-outline-color);
-
-      transition: ${theme.transitions.create([
-        'color',
-        'box-shadow',
-        'background-color',
-      ])};
-    `;
-  },
-);
-
-const ButtonLabel = styled.span`
-  display: inherit;
-  align-items: inherit;
-  justify-content: inherit;
-  visibility: var(--button-visibility);
-  --mui-svg-icon-size: var(--button-line-height);
-`;
-
-const ButtonStartIcon = styled.span`
-  margin-right: 4px;
-  color: var(--button-icon-color);
-`;
-
-const ButtonEndIcon = styled.span`
-  margin-left: 4px;
-  color: var(--button-icon-color);
-`;
-
-const ButtonPendingIndicator = styled.span`
-  left: 50%;
-  display: flex;
-  position: absolute;
-  visibility: visible;
-  transform: translate(-50%);
-`;
-
-interface BaseButtonProps<T extends HTMLElement>
-  extends Pick<
-    AriaAttributes,
-    'aria-label' | 'aria-controls' | 'aria-haspopup' | 'aria-labelledby'
-  > {
-  active?: boolean;
-  pending?: boolean;
-  disabled?: boolean;
-  autoFocus?: boolean;
-
-  fullWidth?: boolean;
-  size?: ButtonSizeProp;
-  variant?: ButtonVariantProp;
-
-  children?: ReactNode;
-  startIcon?: ReactNode;
-  endIcon?: ReactNode;
-
-  id?: string;
-  tabIndex?: number;
-
-  onClick?: MouseEventHandler<T>;
-  onFocus?: FocusEventHandler<T>;
-  onBlur?: FocusEventHandler<T>;
-
-  form?: string;
-}
-
-function useButtonProps<T extends HTMLElement>({
-  children,
-
-  endIcon,
-  startIcon,
-
-  tabIndex: tabIndexProp = 0,
-
-  active = false,
-  pending = false,
-  disabled: disabledProp = false,
-
-  size = 'medium',
-  fullWidth = false,
-  variant = 'default',
-  ...props
-}: BaseButtonProps<T>): ButtonStyleProps & HTMLAttributes<T> {
-  const disabled = pending || disabledProp;
-  const tabIndex = disabled ? -1 : tabIndexProp;
-
-  return {
-    ...props,
-    size,
-    variant,
-    fullWidth,
-    tabIndex,
-    disabled,
-    'aria-busy': pending,
-    'aria-expanded': active,
-    'aria-disabled': disabled,
-    children: (
-      <ButtonLabel>
-        {!!startIcon && <ButtonStartIcon>{startIcon}</ButtonStartIcon>}
-        {children}
-        {!!endIcon && <ButtonEndIcon>{endIcon}</ButtonEndIcon>}
-        {pending && (
-          <ButtonPendingIndicator>
-            <CircularProgress size="1em" color="inherit" />
-          </ButtonPendingIndicator>
-        )}
-      </ButtonLabel>
-    ),
-  };
-}
-
-export interface ButtonProps extends BaseButtonProps<HTMLButtonElement> {
-  type?: 'button' | 'submit';
-}
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ type = 'button', ...props }, ref) => {
-    const buttonProps = useButtonProps(props);
-
-    return <ButtonRoot {...buttonProps} ref={ref} type={type} />;
-  },
-);
-
-export interface AnchorButtonProps extends BaseButtonProps<HTMLAnchorElement> {
-  href: string;
-  target?: '_self' | '_blank';
-}
-
-export const AnchorButton = forwardRef<HTMLAnchorElement, AnchorButtonProps>(
-  ({ href, target, ...props }, ref) => {
-    const buttonProps = useButtonProps(props);
-    const rel = target === '_blank' ? 'noopener noreferrer' : undefined;
-
-    return (
-      <ButtonRoot
-        {...buttonProps}
-        as="a"
-        ref={ref}
-        rel={rel}
-        href={href}
-        target={target}
-      />
-    );
-  },
-);

package/src/button-area/ButtonArea.stories.tsx

@@ -1,65 +0,0 @@
-import { ThumbDown, ThumbUp } from '@material-ui/icons';
-import { Meta } from '@storybook/react';
-import { Column, Columns, Stack } from '@superdispatch/ui';
-import { ButtonArea } from './ButtonArea';
-
-export default {
-  title: 'Lab/ButtonArea',
-  component: ButtonArea,
-} as Meta;
-
-export const basic = () => (
-  <Columns space="small">
-    <Column>
-      <Stack>
-        <ButtonArea fullWidth={true} icon={<ThumbUp />} variant="success">
-          Positive
-        </ButtonArea>
-
-        <ButtonArea
-          active={true}
-          fullWidth={true}
-          icon={<ThumbUp />}
-          variant="success"
-        >
-          Positive
-        </ButtonArea>
-
-        <ButtonArea
-          disabled={true}
-          fullWidth={true}
-          icon={<ThumbUp />}
-          variant="success"
-        >
-          Positive
-        </ButtonArea>
-      </Stack>
-    </Column>
-
-    <Column>
-      <Stack>
-        <ButtonArea fullWidth={true} icon={<ThumbDown />} variant="danger">
-          Negative
-        </ButtonArea>
-
-        <ButtonArea
-          active={true}
-          fullWidth={true}
-          icon={<ThumbDown />}
-          variant="danger"
-        >
-          Negative
-        </ButtonArea>
-
-        <ButtonArea
-          disabled={true}
-          fullWidth={true}
-          icon={<ThumbDown />}
-          variant="danger"
-        >
-          Negative
-        </ButtonArea>
-      </Stack>
-    </Column>
-  </Columns>
-);

package/src/button-area/ButtonArea.tsx

@@ -1,90 +0,0 @@
-import { ButtonBase, ButtonBaseProps, Typography } from '@material-ui/core';
-import { ColorDynamic, Stack } from '@superdispatch/ui';
-import { forwardRef, ReactNode } from 'react';
-import styled from 'styled-components';
-
-const ButtonRoot = styled(ButtonBase)`
-  padding: 12px 32px;
-
-  border-width: 1px;
-  border-radius: 4px;
-  border-style: solid;
-  border-color: ${ColorDynamic.Silver500};
-
-  color: ${ColorDynamic.Dark100};
-  background-color: ${ColorDynamic.White};
-
-  & svg {
-    color: inherit;
-    font-size: 24px;
-  }
-
-  &[data-full-width='true'] {
-    width: 100%;
-  }
-
-  &[data-disabled='true'] {
-    color: ${ColorDynamic.Silver500};
-    border-color: ${ColorDynamic.Silver400};
-  }
-
-  &[data-variant='success'] {
-    &:hover {
-      color: ${ColorDynamic.Green300};
-      box-shadow: 0 0 0 2px ${ColorDynamic.Green100};
-      border-color: ${ColorDynamic.Green300};
-    }
-
-    &[data-active='true'] {
-      color: ${ColorDynamic.Green300};
-      border-color: ${ColorDynamic.Green300};
-      background-color: ${ColorDynamic.Green50};
-    }
-  }
-
-  &[data-variant='danger'] {
-    &:hover {
-      color: ${ColorDynamic.Red300};
-      box-shadow: 0 0 0 2px ${ColorDynamic.Red100};
-      border-color: ${ColorDynamic.Red300};
-    }
-
-    &[data-active='true'] {
-      color: ${ColorDynamic.Red300};
-      border-color: ${ColorDynamic.Red300};
-      background-color: ${ColorDynamic.Red50};
-    }
-  }
-`;
-
-type ButtonAreaVariant = 'danger' | 'success';
-
-export interface ButtonAreaProps extends ButtonBaseProps {
-  icon: ReactNode;
-  active?: boolean;
-  fullWidth?: boolean;
-  variant?: ButtonAreaVariant;
-  children?: ReactNode;
-}
-
-export const ButtonArea = forwardRef<
-  HTMLButtonElement,
-  Omit<ButtonAreaProps, 'ref'>
->(({ icon, children, variant, active, disabled, fullWidth, ...props }, ref) => (
-  <ButtonRoot
-    ref={ref}
-    disabled={disabled}
-    data-active={active}
-    data-disabled={disabled}
-    data-variant={variant}
-    data-full-width={fullWidth}
-    {...props}
-  >
-    <Stack align="center" space="xxsmall">
-      {icon}
-      <Typography variant="h4" color={disabled ? 'inherit' : 'textPrimary'}>
-        {children}
-      </Typography>
-    </Stack>
-  </ButtonRoot>
-));