@superdispatch/ui 0.21.6 → 0.21.13

package/src/avatar/__tests__/Avatar.spec.tsx

@@ -0,0 +1,71 @@
+import { Avatar } from '@material-ui/core';
+import { renderCSS, renderTheme } from '@superdispatch/ui-testutils';
+
+it('checks default props', () => {
+  const { props } = renderTheme();
+
+  expect(props.MuiAvatar).toMatchInlineSnapshot(`undefined`);
+});
+
+it('checks component css', () => {
+  expect(renderCSS(<Avatar />, ['MuiAvatar'])).toMatchInlineSnapshot(`
+.MuiAvatar-root {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  font-size: 14px;
+  align-items: center;
+  flex-shrink: 0;
+  font-family: 'Inter', sans-serif;
+  font-weight: 600;
+  line-height: 20px;
+  user-select: none;
+  border-radius: 50%;
+  text-transform: uppercase;
+  justify-content: center;
+}
+
+@media (min-width: 0px) and (max-width: 599.95px) {
+  .MuiAvatar-root {
+    font-size: 16px;
+    line-height: 24px;
+  }
+}
+
+@media (min-width: 600px) {
+  .MuiAvatar-root {
+    width: 32px;
+    height: 32px;
+  }
+}
+
+.MuiAvatar-colorDefault {
+  color: Color.Dark300;
+  background-color: Color.Silver300;
+}
+
+.MuiAvatar-rounded {
+  border-radius: 4px;
+}
+
+.MuiAvatar-square {
+  border-radius: 0;
+}
+
+.MuiAvatar-img {
+  color: transparent;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  text-align: center;
+  text-indent: 10000px;
+}
+
+.MuiAvatar-fallback {
+  width: 75%;
+  height: 75%;
+}
+`);
+});

package/src/avatar-button/AvatarButton.stories.tsx

@@ -0,0 +1,153 @@
+import { Meta } from '@storybook/react';
+import { UseState } from '@superdispatch/ui-docs';
+import { Inline } from '../inline/Inline';
+import { Stack } from '../stack/Stack';
+import { AvatarButton } from './AvatarButton';
+
+export default {
+  title: 'Inputs/Avatar Button',
+  component: AvatarButton,
+} as Meta;
+
+export const basic = () => (
+  <Inline space="small" verticalAlign="center">
+    <AvatarButton />
+    <AvatarButton size="large" />
+  </Inline>
+);
+
+export const disabled = () => (
+  <Inline space="small" verticalAlign="center">
+    <AvatarButton disabled={true} />
+    <AvatarButton size="large" disabled={true} />
+  </Inline>
+);
+
+export const loading = () => (
+  <Inline space="small" verticalAlign="center">
+    <AvatarButton isLoading={true} />
+    <AvatarButton size="large" isLoading={true} />
+  </Inline>
+);
+
+export const textBasic = () => (
+  <Inline space="small" verticalAlign="center">
+    <AvatarButton>AB</AvatarButton>
+    <AvatarButton size="large">AB</AvatarButton>
+  </Inline>
+);
+
+export const textDisabled = () => (
+  <Inline space="small" verticalAlign="center">
+    <AvatarButton disabled={true}>AB</AvatarButton>
+    <AvatarButton size="large" disabled={true}>
+      AB
+    </AvatarButton>
+  </Inline>
+);
+
+export const textLoading = () => (
+  <Inline space="small" verticalAlign="center">
+    <AvatarButton isLoading={true}>AB</AvatarButton>
+    <AvatarButton size="large" isLoading={true}>
+      AB
+    </AvatarButton>
+  </Inline>
+);
+
+export const pictureBasic = () => (
+  <Inline space="small" verticalAlign="center">
+    <AvatarButton src="https://images.unsplash.com/photo-1571816119607-57e48af1caa9?q=80&w=256&h=256" />
+    <AvatarButton
+      size="large"
+      src="https://images.unsplash.com/photo-1571816119607-57e48af1caa9?q=80&w=256&h=256"
+    />
+  </Inline>
+);
+
+export const pictureDisabled = () => (
+  <Inline space="small" verticalAlign="center">
+    <AvatarButton
+      disabled={true}
+      src="https://images.unsplash.com/photo-1571816119607-57e48af1caa9?q=80&w=256&h=256"
+    />
+    <AvatarButton
+      size="large"
+      disabled={true}
+      src="https://images.unsplash.com/photo-1571816119607-57e48af1caa9?q=80&w=256&h=256"
+    />
+  </Inline>
+);
+
+export const pictureLoading = () => (
+  <Inline space="small" verticalAlign="center">
+    <AvatarButton
+      isLoading={true}
+      src="https://images.unsplash.com/photo-1571816119607-57e48af1caa9?q=80&w=256&h=256"
+    />
+    <AvatarButton
+      size="large"
+      isLoading={true}
+      src="https://images.unsplash.com/photo-1571816119607-57e48af1caa9?q=80&w=256&h=256"
+    />
+  </Inline>
+);
+
+export const interactive = () => (
+  <UseState initialState={false}>
+    {(state, setState) => {
+      const handleClick = () => {
+        setState(true);
+        setTimeout(() => {
+          setState(false);
+        }, 500);
+      };
+
+      return (
+        <Stack space="small">
+          <Inline space="small" verticalAlign="center">
+            <AvatarButton disabled={state} onClick={handleClick}>
+              SM
+            </AvatarButton>
+            <AvatarButton size="large" disabled={state} onClick={handleClick}>
+              SM
+            </AvatarButton>
+
+            <AvatarButton isLoading={state} onClick={handleClick}>
+              SM
+            </AvatarButton>
+            <AvatarButton size="large" isLoading={state} onClick={handleClick}>
+              SM
+            </AvatarButton>
+          </Inline>
+
+          <Inline space="small" verticalAlign="center">
+            <AvatarButton
+              disabled={state}
+              onClick={handleClick}
+              src="https://images.unsplash.com/photo-1571816119607-57e48af1caa9?q=80"
+            />
+            <AvatarButton
+              size="large"
+              disabled={state}
+              onClick={handleClick}
+              src="https://images.unsplash.com/photo-1571816119607-57e48af1caa9?q=80"
+            />
+
+            <AvatarButton
+              isLoading={state}
+              onClick={handleClick}
+              src="https://images.unsplash.com/photo-1571816119607-57e48af1caa9?q=80"
+            />
+            <AvatarButton
+              size="large"
+              isLoading={state}
+              onClick={handleClick}
+              src="https://images.unsplash.com/photo-1571816119607-57e48af1caa9?q=80"
+            />
+          </Inline>
+        </Stack>
+      );
+    }}
+  </UseState>
+);

package/src/avatar-button/AvatarButton.tsx

@@ -0,0 +1,223 @@
+import {
+  Avatar,
+  AvatarClassKey,
+  AvatarTypeMap,
+  ButtonBase,
+  CircularProgress,
+} from '@material-ui/core';
+import { ClassNameMap, CSSProperties, makeStyles } from '@material-ui/styles';
+import clsx from 'clsx';
+import {
+  ButtonHTMLAttributes,
+  forwardRef,
+  ForwardRefExoticComponent,
+  ReactNode,
+  Ref,
+  RefAttributes,
+} from 'react';
+import { Color } from '../theme/Color';
+import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
+
+export type AvatarButtonClassKey =
+  | 'button'
+  | 'overlay'
+  | 'progress'
+  | 'withIcon'
+  | 'sizeLarge'
+  | Exclude<AvatarClassKey, 'circle'>;
+
+const useStyles = makeStyles(
+  (theme: SuperDispatchTheme): Record<AvatarButtonClassKey, CSSProperties> => {
+    const sm = theme.breakpoints.up('sm');
+
+    return {
+      button: {
+        borderRadius: '50%',
+
+        '&[disabled], &[aria-busy="true"]': {
+          '& > $overlay': {
+            backgroundColor: Color.White50,
+          },
+        },
+
+        '&:not([disabled])[aria-busy="false"]': {
+          '&:hover, &:focus': {
+            '&$withIcon > $overlay': {
+              backgroundColor: Color.Black50,
+
+              '& > svg': { opacity: 1 },
+            },
+
+            '&:not($withIcon) > $overlay': {
+              backgroundColor: Color.Black20,
+            },
+          },
+        },
+      },
+
+      overlay: {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        position: 'absolute',
+
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+
+        borderRadius: '50%',
+        backgroundColor: Color.Transparent,
+        transition: theme.transitions.create('background-color'),
+
+        '& > svg': {
+          opacity: 0,
+          color: Color.White,
+          transition: theme.transitions.create('opacity'),
+
+          fontSize: theme.spacing(3),
+          [sm]: { fontSize: theme.spacing(2) },
+        },
+      },
+
+      progress: {
+        top: 0,
+        left: 0,
+        position: 'absolute',
+
+        fontSize: theme.spacing(5),
+        [sm]: { fontSize: theme.spacing(4) },
+      },
+
+      withIcon: {},
+
+      sizeLarge: {
+        '& > $root': {
+          ...theme.typography.h2,
+
+          width: theme.spacing(7),
+          height: theme.spacing(7),
+
+          [sm]: {
+            width: theme.spacing(8),
+            height: theme.spacing(8),
+          },
+        },
+
+        '& > $overlay': {
+          '& > $progress': {
+            fontSize: theme.spacing(7),
+            [sm]: { fontSize: theme.spacing(8) },
+          },
+
+          '& > svg': {
+            fontSize: theme.spacing(4),
+            [sm]: { fontSize: theme.spacing(3) },
+          },
+        },
+      },
+
+      root: {},
+
+      colorDefault: {},
+      circular: {},
+      rounded: {},
+      square: {},
+      img: {},
+      fallback: {},
+    };
+  },
+  { name: 'SD-AvatarButton' },
+);
+
+export interface AvatarButtonProps
+  extends RefAttributes<HTMLButtonElement>,
+    ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: 'small' | 'large';
+  icon?: ReactNode;
+  isLoading?: boolean;
+
+  avatarRef?: Ref<HTMLDivElement>;
+  classes?: Partial<ClassNameMap<AvatarButtonClassKey>>;
+
+  variant?: AvatarTypeMap['props']['variant'];
+  alt?: AvatarTypeMap['props']['alt'];
+  src?: AvatarTypeMap['props']['src'];
+  sizes?: AvatarTypeMap['props']['sizes'];
+  srcSet?: AvatarTypeMap['props']['srcSet'];
+  imgProps?: AvatarTypeMap['props']['imgProps'];
+}
+
+export const AvatarButton: ForwardRefExoticComponent<AvatarButtonProps> =
+  forwardRef(
+    (
+      {
+        size,
+        icon,
+        isLoading = false,
+
+        classes,
+        disabled = false,
+        avatarRef,
+        className,
+
+        alt,
+        imgProps,
+        sizes,
+        src,
+        srcSet,
+        variant,
+        children,
+        ...props
+      },
+      ref,
+    ) => {
+      const {
+        button: buttonClassName,
+        overlay: overlayClassName,
+        progress: progressClassName,
+        withIcon: withIconClassName,
+        sizeLarge: sizeLargeClassName,
+        ...avatarClasses
+      } = useStyles({ classes });
+
+      return (
+        <ButtonBase
+          {...props}
+          ref={ref}
+          aria-busy={isLoading}
+          aria-disabled={disabled}
+          disabled={disabled || isLoading}
+          className={clsx(className, buttonClassName, {
+            [withIconClassName]: !!icon,
+            [sizeLargeClassName]: size === 'large',
+          })}
+        >
+          <Avatar
+            ref={avatarRef}
+            classes={avatarClasses}
+            variant={variant}
+            alt={alt}
+            src={src}
+            sizes={sizes}
+            srcSet={srcSet}
+            imgProps={imgProps}
+          >
+            {children}
+          </Avatar>
+
+          <div className={overlayClassName}>
+            {icon}
+
+            {isLoading && (
+              <CircularProgress
+                size="1em"
+                className={progressClassName}
+                thickness={size === 'large' ? 2.5 : 1.5}
+              />
+            )}
+          </div>
+        </ButtonBase>
+      );
+    },
+  );

package/src/avatar-button/__tests__/AvatarButton.spec.tsx

@@ -0,0 +1,126 @@
+import { renderCSS } from '@superdispatch/ui-testutils';
+import { AvatarButton } from '../AvatarButton';
+
+it('checks component css', () => {
+  expect(renderCSS(<AvatarButton />, ['SD-AvatarButton']))
+    .toMatchInlineSnapshot(`
+    .SD-AvatarButton-button {
+      border-radius: 50%;
+    }
+
+    .SD-AvatarButton-button:not([disabled])[aria-busy='false']:hover.SD-AvatarButton-withIcon
+      > .SD-AvatarButton-overlay,
+    .SD-AvatarButton-button:not([disabled])[aria-busy='false']:focus.SD-AvatarButton-withIcon
+      > .SD-AvatarButton-overlay {
+      background-color: Color.Black50;
+    }
+
+    .SD-AvatarButton-button:not([disabled])[aria-busy='false']:hover:not(.SD-AvatarButton-withIcon)
+      > .SD-AvatarButton-overlay,
+    .SD-AvatarButton-button:not([disabled])[aria-busy='false']:focus:not(.SD-AvatarButton-withIcon)
+      > .SD-AvatarButton-overlay {
+      background-color: Color.Black20;
+    }
+
+    .SD-AvatarButton-button:not([disabled])[aria-busy='false']:hover.SD-AvatarButton-withIcon
+      > .SD-AvatarButton-overlay
+      > svg,
+    .SD-AvatarButton-button:not([disabled])[aria-busy='false']:focus.SD-AvatarButton-withIcon
+      > .SD-AvatarButton-overlay
+      > svg {
+      opacity: 1;
+    }
+
+    .SD-AvatarButton-button[disabled] > .SD-AvatarButton-overlay,
+    .SD-AvatarButton-button[aria-busy='true'] > .SD-AvatarButton-overlay {
+      background-color: Color.White50;
+    }
+
+    .SD-AvatarButton-overlay {
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      position: absolute;
+      transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+      align-items: center;
+      border-radius: 50%;
+      justify-content: center;
+      background-color: Color.Transparent;
+    }
+
+    .SD-AvatarButton-overlay > svg {
+      color: Color.White;
+      opacity: 0;
+      font-size: 24px;
+      transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    }
+
+    @media (min-width: 600px) {
+      .SD-AvatarButton-overlay > svg {
+        font-size: 16px;
+      }
+    }
+
+    .SD-AvatarButton-progress {
+      top: 0;
+      left: 0;
+      position: absolute;
+      font-size: 40px;
+    }
+
+    @media (min-width: 600px) {
+      .SD-AvatarButton-progress {
+        font-size: 32px;
+      }
+    }
+
+    .SD-AvatarButton-sizeLarge > .SD-AvatarButton-root {
+      width: 56px;
+      height: 56px;
+      font-size: 24px;
+      font-family: 'Inter', sans-serif;
+      font-weight: 500;
+      line-height: 28px;
+    }
+
+    .SD-AvatarButton-sizeLarge
+      > .SD-AvatarButton-overlay
+      > .SD-AvatarButton-progress {
+      font-size: 56px;
+    }
+
+    .SD-AvatarButton-sizeLarge > .SD-AvatarButton-overlay > svg {
+      font-size: 32px;
+    }
+
+    @media (min-width: 600px) {
+      .SD-AvatarButton-sizeLarge > .SD-AvatarButton-overlay > svg {
+        font-size: 24px;
+      }
+    }
+
+    @media (min-width: 600px) {
+      .SD-AvatarButton-sizeLarge
+        > .SD-AvatarButton-overlay
+        > .SD-AvatarButton-progress {
+        font-size: 64px;
+      }
+    }
+
+    @media (min-width: 0px) and (max-width: 599.95px) {
+      .SD-AvatarButton-sizeLarge > .SD-AvatarButton-root {
+        font-size: 22px;
+        line-height: 26px;
+      }
+    }
+
+    @media (min-width: 600px) {
+      .SD-AvatarButton-sizeLarge > .SD-AvatarButton-root {
+        width: 64px;
+        height: 64px;
+      }
+    }
+  `);
+});

package/src/button/Button.tsx

@@ -0,0 +1,51 @@
+import {
+  Button as MaterialButton,
+  ButtonProps as MuiButtonProps,
+  CircularProgress,
+} from '@material-ui/core';
+import { forwardRef, ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface ButtonProps
+  extends RefAttributes<HTMLButtonElement>,
+    Omit<MuiButtonProps, 'color'> {
+  rel?: string;
+  target?: string;
+  isActive?: boolean;
+  isLoading?: boolean;
+  color?: 'primary' | 'error' | 'success' | 'white';
+}
+
+export const Button: ForwardRefExoticComponent<ButtonProps> = forwardRef(
+  (
+    {
+      size,
+      children,
+      disabled,
+      isActive,
+      isLoading,
+      color = 'primary',
+      ...props
+    },
+    ref,
+  ) => (
+    <MaterialButton
+      {...props}
+      ref={ref}
+      size={size}
+      data-color={color}
+      aria-busy={isLoading}
+      aria-expanded={isActive}
+      disabled={disabled || isLoading}
+      color={color === 'primary' ? color : 'default'}
+    >
+      {!isLoading ? (
+        children
+      ) : (
+        <>
+          {children}
+          <CircularProgress size="1em" color="inherit" />
+        </>
+      )}
+    </MaterialButton>
+  ),
+);