@conveyorhq/arrow-ds 2.0.0-beta.6 → 2.0.0-beta.7

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/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>

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

@@ -1,63 +0,0 @@
-import { useState } from "react";
-import { Story, Preview, Meta } from "@storybook/addon-docs/blocks";
-import { THEME } from "../../types";
-import { Checkbox } from "../../components/Checkbox";
-
-export const decorators = [
-  (storyFn) => (
-    <div className="p-8" style={{ backgroundColor: "#132433" }}>
-      {storyFn()}
-    </div>
-  ),
-];
-
-<Meta
-  title="Components/Forms/Checkbox (Branded)"
-  component={Checkbox}
-  decorators={decorators}
-/>
-
-# Brand Checkbox
-
-The [`Checkbox`](/?path=/docs/components-forms-checkbox--default) component is also available in a `brand` theme variant. Supported functionaliy for the brand theme `Checkbox` is shown below. If a `Checkbox` is within a brand themed [`FormGroup`](http://localhost:9002/?path=/docs/components-aptible-branding-formgroup--form-group), it will automatically use that as its `theme`. To override this, provide a value to the `Checkbox`'s `theme` prop.
-
-<Preview>
-  <Story name="Brand Checkbox - Default">
-    <Checkbox theme={THEME.BRAND} label="Unchecked" />
-    <Checkbox theme={THEME.BRAND} checked label="Checked" />
-  </Story>
-</Preview>
-
-## Demos
-
-### Interactive
-
-<Preview>
-  <Story name="Brand Checkbox - Interactive">
-    {() => {
-      const [checked, setChecked] = useState(false);
-      const handleCheckboxClick = () => {
-        setChecked(!checked);
-      };
-      return (
-        <Checkbox
-          theme={THEME.BRAND}
-          label="Interactive"
-          checked={checked}
-          onChange={handleCheckboxClick}
-        />
-      );
-    }}
-  </Story>
-</Preview>
-
-### Disabled
-
-<Preview>
-  <Story name="Brand Checkbox - Disabled">
-    <Checkbox theme={THEME.BRAND} label="Unchecked" />
-    <Checkbox theme={THEME.BRAND} checked label="Checked" />
-    <Checkbox theme={THEME.BRAND} label="Disabled" disabled />
-    <Checkbox theme={THEME.BRAND} label="Checked + Disabled" checked disabled />
-  </Story>
-</Preview>

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

@@ -1,76 +0,0 @@
-import { useState } from "react";
-import { Story, Preview, Meta } from "@storybook/addon-docs/blocks";
-import { THEME, STATUS_VARIANT } from "../../types";
-import { ThemeContext } from "../../contexts/theme";
-import { Input } from "../../components/Input";
-import { Button } from "../../components/Button";
-import { Textarea } from "../../components/Textarea";
-import { FormGroup } from "../../components/FormGroup";
-import { Description } from "../../components/Description";
-import { InputFeedback } from "../../components/InputFeedback";
-import { Label } from "../../components/Label";
-
-export const decorators = [
-  (storyFn) => <div className="p-8 bg-gray-800">{storyFn()}</div>,
-];
-
-<Meta
-  title="Components/Forms/Form Group (Branded)"
-  component={Input}
-  decorators={decorators}
-/>
-
-# Brand Form Group
-
-The [`FormGroup`](/?path=/docs/components-formgroup--formgroup) component is also available in a `brand` theme variant. `FormGroup` will act as a `ThemeContext.Provider` to its children, providing the brand theme to its `Labels`, `Descriptions`, and inputs. If a `FormGroup` itself is within a `ThemeContext.Provider`, it will automatically use that as its `theme`. To override this, provide a value to the `FormGroups`'s `theme` prop.
-
-<Preview>
-  <Story name="FormGroup">
-    <FormGroup theme={THEME.BRAND}>
-      <Label>Label</Label>
-      <Description>Additional descriptor text, if needed.</Description>
-      <Textarea rows={2} />
-    </FormGroup>
-  </Story>
-</Preview>
-
-## Demos
-
-### Required
-
-<Preview>
-  <Story name="Required">
-    {() => {
-      const [inputValue, setInputValue] = useState("");
-      const [isError, setIsError] = useState(false);
-      const handleInputChange = (e) => {
-        const newVal = e.target.value;
-        setInputValue(newVal);
-      };
-      const handleSubmit = (e) => {
-        e.preventDefault();
-        setIsError(!inputValue);
-      };
-      return (
-        <ThemeContext.Provider value={THEME.BRAND}>
-          <form onSubmit={handleSubmit}>
-            <FormGroup
-              isRequired
-              variant={isError ? STATUS_VARIANT.DANGER : STATUS_VARIANT.DEFAULT}
-            >
-              <Label>Label</Label>
-              <Description>Additional descriptor text, if needed.</Description>
-              <Textarea
-                rows={2}
-                value={inputValue}
-                onChange={handleInputChange}
-              />
-              {isError && <InputFeedback>This field is required</InputFeedback>}
-            </FormGroup>
-            <Button type="submit">Submit</Button>
-          </form>
-        </ThemeContext.Provider>
-      );
-    }}
-  </Story>
-</Preview>

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

@@ -1,41 +0,0 @@
-import { Story, Preview, Meta } from "@storybook/addon-docs/blocks";
-import { THEME } from "../../types";
-import { Input } from "../../components/Input";
-
-export const decorators = [
-  (storyFn) => <div className="p-8 bg-gray-800">{storyFn()}</div>,
-];
-
-<Meta
-  title="Components/Forms/Input (Branded)"
-  component={Input}
-  decorators={decorators}
-/>
-
-# Brand Input
-
-The [`Input`](/?path=/docs/components-input--input) component is also available in a `brand` theme variant. Supported functionaliy for the brand theme `Input` is shown below. If an `Input` is within a brand themed [`FormGroup`](http://localhost:9002/?path=/docs/components-aptible-branding-formgroup--form-group), it will automatically use that as its `theme`. To override this, provide a value to the `Input`'s `theme` prop.
-
-<Preview>
-  <Story name="Brand Input">
-    <Input type="text" theme={THEME.BRAND} />
-  </Story>
-</Preview>
-
-## Demos
-
-### Disabled
-
-<Preview>
-  <Story name="Disabled">
-    <Input type="text" theme={THEME.BRAND} value="Disabled" disabled />
-  </Story>
-</Preview>
-
-### With Placeholder
-
-<Preview>
-  <Story name="Placeholder">
-    <Input type="text" theme={THEME.BRAND} placeholder="Placeholder Text" />
-  </Story>
-</Preview>