@conveyorhq/arrow-ds 2.0.0-beta.5 → 2.0.0-beta.9

package/src/components/VendorLogo/VendorLogo.story.mdx

@@ -1,209 +0,0 @@
-import {
-  Meta,
-  Preview,
-  Props,
-  Story,
-  SourceState,
-} from "@storybook/addon-docs/blocks";
-import { VendorLogo } from "./VendorLogo";
-import { ICON_TYPE } from "../Icon";
-
-export const conveyor = {
-  name: "Conveyor",
-  logo: "https://logo.clearbit.com/conveyorhq.com",
-};
-
-export const sizes = [40, 20, 14, 10, 6, 4];
-
-<Meta title="Components/Logos/Vendor Logo" component={VendorLogo} />
-
-# VendorLogo
-
-The `VendorLogo` component shows a square image with a styled fallback appearance to the initial of the provided vendor name.
-
-<Preview withSource={SourceState.OPEN}>
-  <Story name="VendorLogo">
-    <VendorLogo
-      src="https://logo.clearbit.com/conveyorhq.com"
-      vendorName="Conveyor"
-    />
-  </Story>
-</Preview>
-
-## Usage
-
-```jsx
-import { VendorLogo } from "@conveyorhq/arrow-ds";
-```
-
-### Custom Props
-
-These are the custom props that extend [`BoxProps`](/?path=/docs/components-box--box#all-props).
-
-<Props of={VendorLogo} />
-
-## Demos
-
-### Sizes
-
-<Preview isColumn>
-  <Story name="Size4">
-    <VendorLogo
-      src="https://logo.clearbit.com/conveyorhq.com"
-      vendorName="Conveyor"
-      size={4}
-    />
-  </Story>
-  <Story name="Size6">
-    <VendorLogo
-      src="https://logo.clearbit.com/conveyorhq.com"
-      vendorName="Conveyor"
-      size={6}
-    />
-  </Story>
-  <Story name="Size10">
-    <VendorLogo
-      src="https://logo.clearbit.com/conveyorhq.com"
-      vendorName="Conveyor"
-      size={10}
-    />
-  </Story>
-  <Story name="Size14">
-    <VendorLogo
-      src="https://logo.clearbit.com/conveyorhq.com"
-      vendorName="Conveyor"
-      size={14}
-    />
-  </Story>
-  <Story name="Size20">
-    <VendorLogo
-      src="https://logo.clearbit.com/conveyorhq.com"
-      vendorName="Conveyor"
-      size={20}
-    />
-  </Story>
-  <Story name="Size40">
-    <VendorLogo
-      src="https://logo.clearbit.com/conveyorhq.com"
-      vendorName="Conveyor"
-      size={40}
-    />
-  </Story>
-</Preview>
-
-### With Badge
-
-<Preview isColumn>
-  <Story name="WithBadge4">
-    <VendorLogo
-      src="https://logo.clearbit.com/conveyorhq.com"
-      vendorName="Conveyor"
-      size={4}
-    >
-      <VendorLogo.Badge icon={ICON_TYPE.PLUS} />
-    </VendorLogo>
-  </Story>
-  <Story name="WithBadge6">
-    <VendorLogo
-      src="https://logo.clearbit.com/conveyorhq.com"
-      vendorName="Conveyor"
-      size={6}
-    >
-      <VendorLogo.Badge icon={ICON_TYPE.PLUS} />
-    </VendorLogo>
-  </Story>
-  <Story name="WithBadge10">
-    <VendorLogo
-      src="https://logo.clearbit.com/conveyorhq.com"
-      vendorName="Conveyor"
-      size={10}
-    >
-      <VendorLogo.Badge icon={ICON_TYPE.PLUS} />
-    </VendorLogo>
-  </Story>
-  <Story name="WithBadge14">
-    <VendorLogo
-      src="https://logo.clearbit.com/conveyorhq.com"
-      vendorName="Conveyor"
-      size={14}
-    >
-      <VendorLogo.Badge icon={ICON_TYPE.PLUS} />
-    </VendorLogo>
-  </Story>
-  <Story name="WithBadge20">
-    <VendorLogo
-      src="https://logo.clearbit.com/conveyorhq.com"
-      vendorName="Conveyor"
-      size={20}
-    >
-      <VendorLogo.Badge icon={ICON_TYPE.PLUS} />
-    </VendorLogo>
-  </Story>
-  <Story name="WithBadge40">
-    <VendorLogo
-      src="https://logo.clearbit.com/conveyorhq.com"
-      vendorName="Conveyor"
-      size={40}
-    >
-      <VendorLogo.Badge icon={ICON_TYPE.PLUS} />
-    </VendorLogo>
-  </Story>
-</Preview>
-
-### Missing Logo
-
-<Preview isColumn>
-  <Story name="MissingLogo4">
-    <VendorLogo src="http://localhost" vendorName="Conveyor" size={4} />
-  </Story>
-  <Story name="MissingLogo6">
-    <VendorLogo src="http://localhost" vendorName="Conveyor" size={6} />
-  </Story>
-  <Story name="MissingLogo10">
-    <VendorLogo src="http://localhost" vendorName="Conveyor" size={10} />
-  </Story>
-  <Story name="MissingLogo14">
-    <VendorLogo src="http://localhost" vendorName="Conveyor" size={14} />
-  </Story>
-  <Story name="MissingLogo20">
-    <VendorLogo src="http://localhost" vendorName="Conveyor" size={20} />
-  </Story>
-  <Story name="MissingLogo40">
-    <VendorLogo src="http://localhost" vendorName="Conveyor" size={40} />
-  </Story>
-</Preview>
-
-### Missing Logo With Badge
-
-<Preview isColumn>
-  <Story name="MissingLogoWithBadge4">
-    <VendorLogo src="http://localhost" vendorName="Conveyor" size={4}>
-      <VendorLogo.Badge icon={ICON_TYPE.PLUS} />
-    </VendorLogo>
-  </Story>
-  <Story name="MissingLogoWithBadge6">
-    <VendorLogo src="http://localhost" vendorName="Conveyor" size={6}>
-      <VendorLogo.Badge icon={ICON_TYPE.PLUS} />
-    </VendorLogo>
-  </Story>
-  <Story name="MissingLogoWithBadge10">
-    <VendorLogo src="http://localhost" vendorName="Conveyor" size={10}>
-      <VendorLogo.Badge icon={ICON_TYPE.PLUS} />
-    </VendorLogo>
-  </Story>
-  <Story name="MissingLogoWithBadge14">
-    <VendorLogo src="http://localhost" vendorName="Conveyor" size={14}>
-      <VendorLogo.Badge icon={ICON_TYPE.PLUS} />
-    </VendorLogo>
-  </Story>
-  <Story name="MissingLogoWithBadge20">
-    <VendorLogo src="http://localhost" vendorName="Conveyor" size={20}>
-      <VendorLogo.Badge icon={ICON_TYPE.PLUS} />
-    </VendorLogo>
-  </Story>
-  <Story name="MissingLogoWithBadge40">
-    <VendorLogo src="http://localhost" vendorName="Conveyor" size={40}>
-      <VendorLogo.Badge icon={ICON_TYPE.PLUS} />
-    </VendorLogo>
-  </Story>
-</Preview>

package/src/components/VendorLogo/VendorLogo.tsx

@@ -1,110 +0,0 @@
-import React, {
-  Children,
-  ReactElement,
-  cloneElement,
-  useState,
-  useEffect,
-} from "react";
-import classNames from "classnames";
-import { bem } from "../../utilities/bem";
-import { Box, BoxProps } from "../Box";
-import { Icon, ICON_TYPE } from "../Icon";
-
-const cn = "VendorLogo";
-
-export type VendorLogoSize = 4 | 6 | 10 | 14 | 20 | 40;
-
-interface VendorLogoBadgeProps extends BoxProps {
-  icon: ICON_TYPE;
-  size?: VendorLogoSize;
-}
-
-interface VendorLogoProps extends BoxProps {
-  /**
-   * Name of the vendor.  If a logo image src is not provided, a tile with the first letter of the `vendorName` will be shown instead
-   */
-  vendorName: string;
-  /**
-   * Specifies the path to the logo image
-   */
-  src?: string;
-  /**
-   * Specifies an alternate label for the image
-   */
-  alt?: string;
-  /**
-   * Sets the size of logo. Uses select tailwind height tokens.  Valid values are 4, 6, 10, 14, 20, 40.
-   */
-  size?: VendorLogoSize;
-  /**
-   * Optional `VendorLogo.Badge`
-   */
-  children?: ReactElement<VendorLogoBadgeProps>;
-}
-
-const VendorLogoBadge = ({
-  icon,
-  size = 10,
-  className,
-  ...rest
-}: VendorLogoBadgeProps) => {
-  return (
-    <Box
-      className={classNames(bem(cn, { e: "badge" }), className)}
-      style={{
-        fontSize: `${size}px`,
-      }}
-      {...rest}
-    >
-      <Icon className={bem(cn, { e: "icon" })} icon={icon} />
-    </Box>
-  );
-};
-
-export const VendorLogo = ({
-  src,
-  vendorName,
-  alt,
-  className,
-  size = 10,
-  children,
-}: VendorLogoProps) => {
-  const [loadSuccess, setLoadSuccess] = useState(!!src);
-  const firstLetter = vendorName && vendorName.length > 0 ? vendorName[0] : "";
-
-  useEffect(() => {
-    setLoadSuccess(!!src);
-  }, [src]);
-
-  return (
-    <Box className={classNames(`${bem(cn)} w-${size} h-${size}`, className)}>
-      {loadSuccess ? (
-        <img
-          className={bem(cn, { e: "img" })}
-          src={src}
-          alt={alt || vendorName || ""}
-          onError={() => {
-            setLoadSuccess(false);
-          }}
-        />
-      ) : (
-        <Box
-          className={bem(cn, { e: "placeholder" })}
-          style={{
-            fontSize: `${size * 1.6}px`,
-          }}
-        >
-          {firstLetter.toUpperCase()}
-        </Box>
-      )}
-
-      {Children.map(children, (child) => {
-        return cloneElement(child as ReactElement, {
-          size,
-        });
-      })}
-    </Box>
-  );
-};
-
-VendorLogo.Badge = VendorLogoBadge;

package/src/components/VendorLogo/index.css

@@ -1,46 +0,0 @@
-.ads-VendorLogo {
-  @apply bg-transparent
-    inline-flex
-    items-center
-    justify-center
-    relative
-    rounded;
-}
-
-.ads-VendorLogo-img {
-  @apply block
-    max-w-full
-    max-h-full
-    rounded;
-}
-
-.ads-VendorLogo-placeholder {
-  @apply rounded
-    w-full;
-}
-
-.ads-VendorLogo-placeholder {
-  @apply bg-gray-200
-    h-full
-    flex
-    items-center
-    justify-center
-    text-gray-700
-    font-medium;
-}
-
-.ads-VendorLogo-badge {
-  @apply bg-brandGreen-400
-    text-white
-    absolute
-    flex
-    items-center
-    justify-center
-    bottom-0
-    right-0
-    rounded-full;
-
-  transform: translate(25%, 25%);
-  height: 35%;
-  width: 35%;
-}

package/src/components/VendorLogo/index.ts

@@ -1 +0,0 @@
-export * from "./VendorLogo";

package/src/components/VisuallyHidden/VisuallyHidden.md

@@ -1,23 +0,0 @@
-# Usage
-
-`<VisuallyHidden />` provides text for screen readers that is visually hidden. It is the logical opposite of the aria-hidden attribute.
-
-`import { VisuallyHidden } from "@conveyorhq/arrow-ds"`
-
-In the following example, screen readers will announce "Sync" and will ignore the icon; the browser displays the icon and ignores the text.
-
-```jsx
-<button>
-  <VisuallyHidden>Sync</VisuallyHidden>
-  <Icon icon="sync" />
-</button>
-```
-
-Further reading: https://a11yproject.com/posts/how-to-hide-content/
-
-## Props
-
-| Prop | Type | Required | Description |
-|:--- |:--- |:--- |:--- |
-| className | ClassName | No | CSS Classname applied to underlying div
-| children | React.Node | Yes | Child nodes

package/src/components/VisuallyHidden/VisuallyHidden.story.tsx

@@ -1,19 +0,0 @@
-import * as React from "react";
-import { storiesOf } from "@storybook/react";
-import Story from "../../storybook-components/Story";
-import { Box } from "../Box";
-import { Icon, ICON_TYPE } from "../Icon";
-import { VisuallyHidden } from "./VisuallyHidden";
-
-const stories = storiesOf("Components/Disclosure/Visually Hidden", module);
-
-stories.add("Default", () => (
-  <Story title="VisuallyHidden">
-    <Box className="p-12">
-      <button type="button">
-        <VisuallyHidden as="span">Sync</VisuallyHidden>
-        <Icon icon={ICON_TYPE.SYNC} />
-      </button>
-    </Box>
-  </Story>
-));

package/src/components/useStep/ExampleSetupWizard.tsx

@@ -1,63 +0,0 @@
-import React from "react";
-import { Box } from "../Box";
-import { Panel } from "../Panel";
-import { Button, BUTTON_VARIANT } from "../Button";
-import { useStep } from "../../hooks/useStep";
-
-export const ExampleSetupWizard = ({
-  steps,
-  initialStep,
-}: {
-  steps: number;
-  initialStep?: number;
-}) => {
-  const { step, goToNextStep, goToPreviousStep, goToStep } = useStep({
-    steps,
-    initialStep,
-  });
-
-  return (
-    <Box>
-      <Panel className="p-8">
-        {step === 1 && <>Step 1</>}
-        {step === 2 && <>Step 2</>}
-        {step === 3 && <>Step 3</>}
-        {step === 4 && <>Step 4</>}
-      </Panel>
-
-      <Button.Group className="mt-4 justify-end">
-        {step !== 1 && (
-          <Button.Group className="mr-auto">
-            <Button
-              variant={BUTTON_VARIANT.SECONDARY}
-              onClick={goToPreviousStep}
-            >
-              Previous Step
-            </Button>
-          </Button.Group>
-        )}
-
-        <Button
-          variant={BUTTON_VARIANT.SECONDARY}
-          onClick={() => {
-            goToStep(1);
-          }}
-        >
-          Cancel
-        </Button>
-
-        {step === 4 ? (
-          <Button
-            onClick={() => {
-              console.log("Create button clicked");
-            }}
-          >
-            Create
-          </Button>
-        ) : (
-          <Button onClick={goToNextStep}>Next Step</Button>
-        )}
-      </Button.Group>
-    </Box>
-  );
-};

package/src/components/useStep/useStep.story.mdx

@@ -1,76 +0,0 @@
-import { Story, Preview, Props, Meta } from "@storybook/addon-docs/blocks";
-import { ExampleSetupWizard } from "./ExampleSetupWizard";
-
-<Meta title="Hooks/useStep" component={ExampleSetupWizard} />
-
-# useStep
-
-<Preview>
-  <Story name="useStep">
-    <ExampleSetupWizard steps={4} />
-  </Story>
-</Preview>
-
-## Props
-
-<Props of={ExampleSetupWizard} />
-
-## Example
-
-This code snippet is from the `ExampleSetupWizard` from above.
-
-To see an example within a modal, look at the [modal story](/?path=/docs/components-modal--default#set-up-wizard-example).
-
-```jsx
-export const ExampleSetupWizard = () => {
-  const { step, goToNextStep, goToPreviousStep, goToStep } = useStep({
-    steps: 4,
-    initialStep: 2,
-  });
-
-  return (
-    <Box>
-      <Panel className="p-8">
-        {step === 1 && <>Step 1</>}
-        {step === 2 && <>Step 2</>}
-        {step === 3 && <>Step 3</>}
-        {step === 4 && <>Step 4</>}
-      </Panel>
-
-      <Button.Group className="mt-4 justify-end">
-        {step !== 1 && (
-          <Button.Group className="mr-auto">
-            <Button
-              variant={BUTTON_VARIANT.SECONDARY}
-              onClick={goToPreviousStep}
-            >
-              Previous Step
-            </Button>
-          </Button.Group>
-        )}
-
-        <Button
-          variant={BUTTON_VARIANT.SECONDARY}
-          onClick={() => {
-            goToStep(1);
-          }}
-        >
-          Cancel
-        </Button>
-
-        {step === 4 ? (
-          <Button
-            onClick={() => {
-              console.log("Create button clicked");
-            }}
-          >
-            Create
-          </Button>
-        ) : (
-          <Button onClick={goToNextStep}>Next Step</Button>
-        )}
-      </Button.Group>
-    </Box>
-  );
-};
-```

package/src/docs/TailwindClasses.story.mdx

@@ -1,15 +0,0 @@
-import { Meta } from "@storybook/addon-docs/blocks";
-import {
-  TailwindPluginList,
-  TailwindPropertiesFullList,
-} from "../storybook-components";
-
-<Meta title="Tokens/Tailwind Classes" />
-
-# Tailwind Classes
-
-This is a full list of classes generated by [Arrow's Tailwind config](https://github.com/aptible/arrow-ds/blob/master/src/tailwind.config.js) and the files in our [tokens directory](https://github.com/aptible/arrow-ds/tree/master/src/tokens).
-
-<TailwindPluginList columnCount={5} />
-
-<TailwindPropertiesFullList />

package/src/docs/brand-components/BrandButton.story.mdx

@@ -1,103 +0,0 @@
-import { Meta, Preview, Story } from "@storybook/addon-docs/blocks";
-import { Button, BUTTON_VARIANT, BUTTON_SIZE } from "../../components/Button";
-import { Stack } from "../../components/Stack";
-import { THEME, ORIENTATION } from "../../types";
-import { ThemeContext } from "../../contexts/theme";
-
-export const decorators = [
-  (storyFn) => <div className="p-4 bg-gray-900">{storyFn()}</div>,
-];
-
-<Meta
-  title="Components/Buttons/Button (Branded)"
-  component={Button}
-  decorators={decorators}
-/>
-
-# Brand Button
-
-The [`Button`](/?path=/docs/components-buttons-button--button) component is also available in a `brand` theme variant. Supported functionaliy for the brand theme `Button` is shown below. If a `Button` is within a `ThemeContext.Provider`, it will automatically use that as its `theme`. To override this, provide a value to the `Button`'s `theme` prop.
-
-<Preview>
-  <Story name="BrandedButton">
-    <ThemeContext.Provider value={THEME.BRAND}>
-      <Button>Brand Button</Button>
-    </ThemeContext.Provider>
-  </Story>
-</Preview>
-
-## Demos
-
-### Variants
-
-<Preview>
-  <Story name="BrandedVariants">
-    <ThemeContext.Provider value={THEME.BRAND}>
-      <Stack reverse>
-        <Button variant={BUTTON_VARIANT.PRIMARY}>Primary</Button>
-        <Button variant={BUTTON_VARIANT.SECONDARY}>Secondary</Button>
-      </Stack>
-    </ThemeContext.Provider>
-  </Story>
-</Preview>
-
-### Sizes
-
-<Preview>
-  <Story name="SizesPrimary">
-    <ThemeContext.Provider value={THEME.BRAND}>
-      <Stack orientation={ORIENTATION.VERTICAL}>
-        <Button theme={THEME.BRAND} size={BUTTON_SIZE.LARGE}>
-          Large
-        </Button>
-        <Button theme={THEME.BRAND}>Medium</Button>
-      </Stack>
-    </ThemeContext.Provider>
-  </Story>
-  <Story name="SizesSecondary">
-    <ThemeContext.Provider value={THEME.BRAND}>
-      <Stack orientation={ORIENTATION.VERTICAL}>
-        <Button
-          theme={THEME.BRAND}
-          size={BUTTON_SIZE.LARGE}
-          variant={BUTTON_VARIANT.SECONDARY}
-        >
-          Large
-        </Button>
-        <Button theme={THEME.BRAND} variant={BUTTON_VARIANT.SECONDARY}>
-          Medium
-        </Button>
-      </Stack>
-    </ThemeContext.Provider>
-  </Story>
-</Preview>
-
-### Depressed
-
-<Preview>
-  <Story name="Depressed">
-    <ThemeContext.Provider value={THEME.BRAND}>
-      <Button depressed>Depressed</Button>
-    </ThemeContext.Provider>
-  </Story>
-</Preview>
-
-### Disabled
-
-<Preview>
-  <Story name="Disabled">
-    <ThemeContext.Provider value={THEME.BRAND}>
-      <Button disabled>Disabled</Button>
-    </ThemeContext.Provider>
-  </Story>
-</Preview>
-
-### Loading
-
-<Preview>
-  <Story name="Loading">
-    <ThemeContext.Provider value={THEME.BRAND}>
-      <Button isLoading>Loading</Button>
-    </ThemeContext.Provider>
-  </Story>
-</Preview>