@superdispatch/ui-lab 0.50.4 → 0.50.5

package/src/alert/Alert.stories.tsx

@@ -0,0 +1,162 @@
+import {
+  AddAlertOutlined,
+  OutlinedFlag,
+  SecurityRounded,
+  WarningRounded,
+} from '@material-ui/icons';
+import { Meta } from '@storybook/react';
+import { Column, Columns, Inline, Stack } from '@superdispatch/ui';
+import { Button } from '../button/Button';
+import { Alert } from './Alert';
+
+export default {
+  title: 'Lab/Alert',
+  component: Alert,
+} as Meta;
+
+export const basic = () => (
+  <Columns collapseBelow="tablet" space="xsmall">
+    <Column>
+      <Stack>
+        <Alert severity="positive">
+          <Inline verticalAlign="center">
+            <span>This is a success alert — check it out!</span>
+            <Button variant="neutral" size="small">
+              Button
+            </Button>
+          </Inline>
+        </Alert>
+
+        <Alert severity="info">
+          <Inline verticalAlign="center">
+            <span>This is an info alert — check it out!</span>
+            <Button variant="neutral" size="small">
+              Button
+            </Button>
+          </Inline>
+        </Alert>
+
+        <Alert severity="caution">
+          <Inline verticalAlign="center">
+            <span>This is a warning alert — check it out!</span>
+            <Button variant="neutral" size="small">
+              Button
+            </Button>
+          </Inline>
+        </Alert>
+
+        <Alert severity="critical">
+          <Inline verticalAlign="center">
+            <span>This is an error alert — check it out!</span>
+            <Button variant="neutral" size="small">
+              Button
+            </Button>
+          </Inline>
+        </Alert>
+      </Stack>
+    </Column>
+
+    <Column>
+      <Stack>
+        <Alert severity="positive">
+          <Inline verticalAlign="center">
+            <span>
+              Uh-Oh! Your Super Carrier documents need review. please submit the
+              following documents. Don’t worry! Be happy!
+            </span>
+            <Button variant="neutral" size="small">
+              Button
+            </Button>
+          </Inline>
+        </Alert>
+
+        <Alert severity="info">
+          <Inline verticalAlign="center">
+            <span>
+              Uh-Oh! Your Super Carrier documents need review. please submit the
+              following documents. Don’t worry! Be happy!
+            </span>
+            <Button variant="neutral" size="small">
+              Button
+            </Button>
+          </Inline>
+        </Alert>
+
+        <Alert severity="caution">
+          <Inline verticalAlign="center">
+            <span>
+              Uh-Oh! Your Super Carrier documents need review. please submit the
+              following documents. Don’t worry! Be happy!
+            </span>
+            <Button variant="neutral" size="small">
+              Button
+            </Button>
+          </Inline>
+        </Alert>
+
+        <Alert severity="critical">
+          <Inline verticalAlign="center">
+            <span>
+              Uh-Oh! Your Super Carrier documents need review. please submit the
+              following documents. Don’t worry! Be happy!
+            </span>
+            <Button variant="neutral" size="small">
+              Button
+            </Button>
+          </Inline>
+        </Alert>
+      </Stack>
+    </Column>
+
+    <Column>
+      <Stack>
+        <Alert icon={<OutlinedFlag />} severity="positive">
+          <Inline verticalAlign="center">
+            <span>This is a success alert — check it out!</span>
+            <Button variant="neutral" size="small">
+              Button
+            </Button>
+          </Inline>
+        </Alert>
+
+        <Alert icon={<SecurityRounded />} severity="info">
+          <Inline verticalAlign="center">
+            <span>This is an info alert — check it out!</span>
+            <Button variant="neutral" size="small">
+              Button
+            </Button>
+          </Inline>
+        </Alert>
+
+        <Alert icon={<WarningRounded />} severity="caution">
+          <Inline verticalAlign="center">
+            <span>This is a warning alert — check it out!</span>
+            <Button variant="neutral" size="small">
+              Button
+            </Button>
+          </Inline>
+        </Alert>
+
+        <Alert icon={<AddAlertOutlined />} severity="critical">
+          <Inline verticalAlign="center">
+            <span>This is an error alert — check it out!</span>
+            <Button variant="neutral" size="small">
+              Button
+            </Button>
+          </Inline>
+        </Alert>
+
+        <Alert
+          severity="info"
+          onClose={() => {
+            return null;
+          }}
+        >
+          <Inline verticalAlign="center">
+            <span>This is an alert with close icon — check it out!</span>
+          </Inline>
+        </Alert>
+      </Stack>
+    </Column>
+  </Columns>
+);

package/src/alert/Alert.tsx

@@ -0,0 +1,135 @@
+import { CheckCircle, Error, Info, WarningRounded } from '@material-ui/icons';
+import {
+  Alert as MaterialAlert,
+  AlertProps as MaterialAlertProps,
+} from '@material-ui/lab';
+import { ColorDynamic } from '@superdispatch/ui';
+import { forwardRef, ReactNode } from 'react';
+import styled, { css, SimpleInterpolation } from 'styled-components';
+
+function colorMixin(
+  textColor: ColorDynamic,
+  iconColor: ColorDynamic,
+  backgroundColor: ColorDynamic,
+  buttonHoverColor: ColorDynamic,
+): readonly SimpleInterpolation[] {
+  return css`
+    color: ${textColor};
+    border-color: ${textColor};
+    background-color: ${backgroundColor};
+
+    & .MuiAlert-icon {
+      color: ${iconColor};
+    }
+
+    & .MuiAlert-action {
+      color: ${iconColor};
+
+      & .MuiIconButton-root {
+        &:hover,
+        &:active {
+          color: ${buttonHoverColor};
+        }
+      }
+    }
+  `;
+}
+
+const StyledAlert = styled(MaterialAlert)`
+  &.MuiAlert-outlinedSuccess {
+    ${colorMixin(
+      ColorDynamic.Green500,
+      ColorDynamic.Green300,
+      ColorDynamic.Green50,
+      ColorDynamic.Green400,
+    )};
+  }
+
+  &.MuiAlert-outlinedInfo {
+    ${colorMixin(
+      ColorDynamic.Blue500,
+      ColorDynamic.Blue300,
+      ColorDynamic.Blue50,
+      ColorDynamic.Blue400,
+    )};
+  }
+
+  &.MuiAlert-outlinedWarning {
+    ${colorMixin(
+      ColorDynamic.Yellow500,
+      ColorDynamic.Yellow300,
+      ColorDynamic.Yellow50,
+      ColorDynamic.Yellow400,
+    )};
+  }
+
+  &.MuiAlert-outlinedError {
+    ${colorMixin(
+      ColorDynamic.Red500,
+      ColorDynamic.Red300,
+      ColorDynamic.Red50,
+      ColorDynamic.Red400,
+    )};
+  }
+
+  & .MuiAlert-icon {
+    opacity: 1;
+    padding: 8px 0;
+    font-size: 24px;
+  }
+
+  & .MuiAlert-action {
+    display: block;
+    padding-top: 5px;
+    margin-right: -3px;
+
+    & .MuiIconButton-root {
+      & .MuiSvgIcon-root {
+        font-size: 24px;
+      }
+    }
+  }
+`;
+
+export type AlertSeverityProp = 'positive' | 'info' | 'caution' | 'critical';
+
+export interface AlertProps {
+  onClose?: () => void;
+  children?: ReactNode;
+  icon?: ReactNode;
+  severity?: AlertSeverityProp;
+}
+
+function toMaterialSeverity(
+  severity: AlertSeverityProp,
+): MaterialAlertProps['severity'] {
+  return severity === 'info'
+    ? 'info'
+    : severity === 'caution'
+    ? 'warning'
+    : severity === 'critical'
+    ? 'error'
+    : 'success';
+}
+
+const iconMapping: MaterialAlertProps['iconMapping'] = {
+  success: <CheckCircle />,
+  info: <Info />,
+  error: <Error />,
+  warning: <WarningRounded />,
+};
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  ({ children, onClose, severity = 'positive', icon }, ref) => (
+    <StyledAlert
+      ref={ref}
+      variant="outlined"
+      icon={icon}
+      iconMapping={iconMapping}
+      severity={toMaterialSeverity(severity)}
+      onClose={onClose}
+    >
+      {children}
+    </StyledAlert>
+  ),
+);

package/src/banner/Banner.stories.tsx

@@ -0,0 +1,64 @@
+import { Link } from '@material-ui/core';
+import { Meta } from '@storybook/react';
+import { Inline, Stack } from '@superdispatch/ui';
+import { UseState } from '@superdispatch/ui-docs';
+import { Button } from '../button/Button';
+import { TextBox } from '../text-box/TextBox';
+import { Banner } from './Banner';
+
+export default {
+  title: 'Lab/Banner',
+  component: Banner,
+} as Meta;
+
+export const basic = () => (
+  <Stack>
+    <UseState initialState={true}>
+      {(open, setOpen) => (
+        <Stack space="none">
+          <Button
+            size="small"
+            variant="neutral"
+            aria-label="Rate Button"
+            onClick={() => {
+              setOpen(!open);
+            }}
+          >
+            {open ? 'Close' : 'Open'}
+          </Button>
+
+          <Banner
+            in={open}
+            border="top"
+            mountOnEnter={true}
+            unmountOnExit={true}
+          >
+            <Inline
+              verticalAlign="center"
+              horizontalAlign="center"
+              space="small"
+            >
+              <Inline
+                space="xxsmall"
+                verticalAlign="center"
+                horizontalAlign="center"
+              >
+                <TextBox color="inherit">
+                  Rate your recent experience with{' '}
+                </TextBox>
+                <Link
+                  color="inherit"
+                  target="_blank"
+                  rel="noreferrer"
+                  href="https://superdispatch.com/"
+                >
+                  SuperDispatch
+                </Link>
+              </Inline>
+            </Inline>
+          </Banner>
+        </Stack>
+      )}
+    </UseState>
+  </Stack>
+);

package/src/banner/Banner.tsx

@@ -0,0 +1,120 @@
+import { ColorDynamic } from '@superdispatch/ui';
+import { forwardRef, useEffect, useState } from 'react';
+import { CSSTransition } from 'react-transition-group';
+// eslint-disable-next-line import/no-internal-modules
+import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
+import styled, {
+  css,
+  Keyframes,
+  keyframes,
+  SimpleInterpolation,
+} from 'styled-components';
+
+function enterMixin(border: BorderPlacement): readonly SimpleInterpolation[] {
+  return css`
+  min-height: 56px;
+  color: ${ColorDynamic.Dark500};
+  background-color: ${ColorDynamic.White};
+
+  border-${border}: 1px #dfe3e8 solid;
+`;
+}
+
+function enterAnimation(border: BorderPlacement): Keyframes {
+  return keyframes`
+    0% { 
+      min-height: 0; 
+      color: ${ColorDynamic.White};  
+      background-color: ${ColorDynamic.Dark500};
+    }
+  
+    50% { 
+      min-height: 56px; 
+      color: ${ColorDynamic.White};
+      background-color: ${ColorDynamic.Dark500};
+    } 
+  
+    70% { 
+      min-height: 56px; 
+      color: ${ColorDynamic.White};
+      background-color: ${ColorDynamic.Dark500};
+    } 
+  
+    100% {
+      ${enterMixin(border)}
+    } 
+`;
+}
+
+type BorderPlacement = 'top' | 'bottom';
+
+type CustomerTransitionProps = CSSTransitionProps<HTMLDivElement> & {
+  className?: string;
+  border?: BorderPlacement;
+};
+
+const CustomTransition = forwardRef<
+  CSSTransition<HTMLDivElement>,
+  CustomerTransitionProps
+>(({ children, ...props }, ref) => (
+  <CSSTransition
+    {...props}
+    ref={ref}
+    timeout={3000}
+    classNames={props.className}
+  >
+    <div>{children}</div>
+  </CSSTransition>
+));
+
+const BannerContent = styled(CustomTransition)<CustomerTransitionProps>(
+  ({ border = 'bottom' }) => {
+    return css`
+      height: 0;
+      width: 100%;
+      overflow: hidden;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      color: ${ColorDynamic.White};
+      background-color: ${ColorDynamic.White};
+
+      &-enter-active {
+        animation: ${enterAnimation(border)} 2s 1s forwards;
+      }
+
+      &-enter-done {
+        ${enterMixin(border)};
+      }
+
+      &-exit {
+        ${enterMixin(border)};
+      }
+
+      &-exit-active {
+        min-height: 0;
+        transition: min-height 2s 1s;
+      }
+    `;
+  },
+);
+
+type BannerProps = Omit<
+  CustomerTransitionProps,
+  'timeout' | 'className' | 'classNames'
+>;
+
+export const Banner = forwardRef<CSSTransition<HTMLDivElement>, BannerProps>(
+  ({ in: inProp, ...props }, ref) => {
+    const [isIn, setIn] = useState(false);
+
+    // transition is not triggered on initial render with `in: true`
+    useEffect(() => {
+      setIn(!!inProp);
+    }, [inProp]);
+
+    return <BannerContent ref={ref} in={isIn} {...props} />;
+  },
+);

package/src/box/Box.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta } from '@storybook/react';
+import { Box } from './Box';
+
+export default { title: 'Lab/Box', component: Box } as Meta;
+
+export const basic = () => (
+  <Box
+    display="inline-block"
+    borderWidth="small"
+    borderTopRightRadius="small"
+    borderBottomRightRadius="small"
+    borderColor={['Blue200', 'Green200', 'Purple200']}
+    borderLeftWidth="large"
+    borderLeftColor={['Blue300', 'Green300', 'Purple300']}
+    padding={['large', 'medium', 'small']}
+    backgroundColor={['Blue50', 'Green50', 'Purple50']}
+  >
+    Hey
+  </Box>
+);