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

package/src/components/ArrowButton/ArrowButton.story.mdx

@@ -1,110 +0,0 @@
-import { Meta, Preview, Props, Story } from "@storybook/addon-docs/blocks";
-import { ArrowButton } from "./ArrowButton";
-
-export const decorators = [
-  (storyFn) => (
-    <div className="rounded p-8" style={{ backgroundColor: "#1c2c3a" }}>
-      {storyFn()}
-    </div>
-  ),
-];
-
-<Meta
-  title="Components/Buttons/Arrow Button"
-  component={ArrowButton}
-  decorators={decorators}
-/>
-
-export const Link = ({ to, children, ...rest }) => (
-  <a href={to} {...rest}>
-    {children}
-  </a>
-);
-
-# ArrowButton
-
-ArrowButton is a call-to-action button which uses Conveyor’s branding styles.
-It’s used on pages which are outside of the app (log in, sign up pages).
-
-There are no use cases for this button to be used within the app.
-
-It should always be used on top of a dark background.
-
-ArrowButton renders as an anchor element by default. It can also render as a
-button or React Router's `Link` component by passing it to the `as` prop.
-
-```jsx
-import { ArrowButton } from "@conveyorhq/arrow-ds";
-```
-
-<Preview>
-  <Story name="ArrowButton">
-    <ArrowButton href="/">Arrow Button</ArrowButton>
-  </Story>
-</Preview>
-
-## Props
-
-<Props of={ArrowButton} />
-
-## Demos
-
-### Render as a button
-
-Render as a button when an onClick handler is required.
-
-<Preview>
-  <Story name="ArrowButton as button">
-    <ArrowButton
-      as="button"
-      onClick={() => {
-        console.log("Clicked");
-      }}
-    >
-      Button
-    </ArrowButton>
-  </Story>
-</Preview>
-
-### Render as a Link
-
-Render as a Link when using React Router.
-
-<Preview>
-  <Story name="ArrowButton as Link">
-    <ArrowButton as={Link} to="/">
-      Link
-    </ArrowButton>
-  </Story>
-</Preview>
-
-### Disabled
-
-<Preview>
-  <Story name="DisabledLink">
-    <ArrowButton as={Link} to="/" disabled>
-      Disabled Link
-    </ArrowButton>
-  </Story>
-  <Story name="DisabledButton">
-    <ArrowButton
-      as="button"
-      onClick={() => {
-        console.log("Clicked");
-      }}
-      disabled
-    >
-      Disabled Button
-    </ArrowButton>
-  </Story>
-</Preview>
-
-### Loading
-
-<Preview>
-  <Story name="Loading">
-    <ArrowButton as={Link} to="/" loading>
-      Loading
-    </ArrowButton>
-  </Story>
-</Preview>

package/src/components/ArrowButton/ArrowButton.tsx

@@ -1,54 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import { Box } from "../Box";
-import { Svg } from "../Svg";
-import { bem } from "../../utilities/bem";
-import { Icon, ICON_TYPE } from "../Icon";
-
-const cn = "ArrowButton";
-
-const Arrow = () => (
-  <Svg width="20" height="20" viewBox="0 0 20 20" fill="none">
-    <path d="M20 10.0006L10.2324 -4.26954e-07L7.30217 -5.5504e-07L16.093 9.0005L3.42127e-06 9.0005L3.33385e-06 11.0006L16.093 11.0006L7.30217 20L10.2324 20L20 10.0006Z" />
-  </Svg>
-);
-
-export interface ArrowButtonProps {
-  children?: string;
-  as?: any;
-  className?: string;
-  disabled?: boolean;
-  loading?: boolean;
-  [key: string]: any;
-}
-
-export const ArrowButton = ({
-  children,
-  as: Component = "a",
-  className,
-  disabled,
-  loading,
-  ...rest
-}: ArrowButtonProps) => {
-  const isDisabled = disabled || loading;
-  return (
-    <Component
-      className={classNames(
-        bem(cn),
-        isDisabled && bem(cn, { m: "disabled" }),
-        className,
-      )}
-      disabled={Component === "button" && isDisabled}
-      {...rest}
-    >
-      {children}
-      <Box className={bem(cn, { e: "arrow" })}>
-        {loading ? (
-          <Icon className="arrow-button-arrow" icon={ICON_TYPE.SPINNER} spin />
-        ) : (
-          <Arrow />
-        )}
-      </Box>
-    </Component>
-  );
-};

package/src/components/ArrowButton/index.css

@@ -1,42 +0,0 @@
-.ads-ArrowButton {
-  @apply inline-flex
-    items-center
-    text-white
-    cursor-pointer
-    font-medium
-    no-underline;
-
-  font-size: 18px;
-}
-
-.ads-ArrowButton-arrow {
-  @apply flex
-    items-center
-    justify-center
-    bg-gray-900
-    text-gold-400
-    border
-    rounded-full
-    ml-4
-    w-14
-    h-14;
-
-  border-color: rgba(255, 255, 255, 0.3);
-}
-
-.ads-ArrowButton:not(.ads-ArrowButton--disabled):hover .ads-ArrowButton-arrow,
-.ads-ArrowButton:not(.ads-ArrowButton--disabled):active .ads-ArrowButton-arrow,
-.ads-ArrowButton:not(.ads-ArrowButton--disabled):focus .ads-ArrowButton-arrow {
-  @apply bg-gold-400
-    border-gold-400
-    text-gray-900;
-}
-
-.ads-ArrowButton--disabled {
-  @apply cursor-default
-    opacity-50;
-}
-
-.ads-ArrowButton-arrow path {
-  @apply fill-current;
-}

package/src/components/ArrowButton/index.ts

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

package/src/components/ArrowLink/ArrowLink.story.mdx

@@ -1,65 +0,0 @@
-import {
-  Meta,
-  Preview,
-  Props,
-  Story,
-  SourceState,
-} from "@storybook/addon-docs/blocks";
-import { ComponentHeading, EnumTable } from "../../storybook-components";
-import { Text, STATUS_VARIANT } from "../..";
-import { ArrowLink } from "./ArrowLink";
-
-<Meta title="Components/Navigation/Arrow Link" component={ArrowLink} />
-
-<ComponentHeading
-  componentName="ArrowLink"
-  description="Link component with an arrow icon"
-  sourcePath="src/components/ArrowLink/ArrowLink.tsx"
-/>
-
-```jsx
-import { ArrowLink } from "@conveyorhq/arrow-ds";
-```
-
-<Preview>
-  <Story name="ArrowLink">
-    <ArrowLink>This is the ArrowLink component.</ArrowLink>
-  </Story>
-</Preview>
-
-## Props
-
-<Props of={ArrowLink} />
-
-<EnumTable enums={{ STATUS_VARIANT }} />
-
-## Demos
-
-### Disabled
-
-<Preview withSource={SourceState.OPEN}>
-  <Story name="Disabled">
-    <ArrowLink disabled>Arrow Link</ArrowLink>
-  </Story>
-</Preview>
-
-### Inline
-
-<Preview withSource={SourceState.OPEN}>
-  <Story name="Inline">
-    <Text>
-      Duis vulputate dui quis commodo cursus. In{" "}
-      <ArrowLink>Arrow Link</ArrowLink>
-      fermentum efficitur vehicula. Integer nec felis varius, ultrices erat ac, volutpat
-      lectus. Proin eu sed magna accumsan blandit a ac nisl. Nulla eros ante
-    </Text>
-  </Story>
-</Preview>
-
-### Full-width
-
-<Preview withSource={SourceState.OPEN}>
-  <Story name="Full-width">
-    <ArrowLink block>Arrow Link</ArrowLink>
-  </Story>
-</Preview>

package/src/components/ArrowLink/ArrowLink.tsx

@@ -1,42 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import { Link, LinkProps } from "../Link";
-import { Icon, ICON_TYPE } from "../Icon";
-
-export interface ArrowLinkProps extends LinkProps {
-  block?: boolean;
-}
-
-const defaultArrowLinkProps: Partial<ArrowLinkProps> = {
-  block: false,
-};
-
-const ArrowLink = (props: ArrowLinkProps) => {
-  const {
-    className,
-    children,
-    block = defaultArrowLinkProps.block,
-    ...rest
-  } = props;
-
-  return (
-    <Link
-      className={classNames(
-        block ? "flex" : "inline-flex",
-        "items-center",
-        "justify-between",
-        "no-underline",
-        "font-medium",
-        className,
-      )}
-      {...rest}
-    >
-      <span className="mr-1">{children}</span>
-      <Icon icon={ICON_TYPE.LONG_ARROW_ALT_RIGHT} />
-    </Link>
-  );
-};
-
-ArrowLink.defaultProps = defaultArrowLinkProps;
-
-export { ArrowLink };

package/src/components/ArrowLink/index.ts

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

package/src/components/Aside/Aside.story.mdx

@@ -1,65 +0,0 @@
-import { Meta, Preview, Props, Story } from "@storybook/addon-docs/blocks";
-import { ComponentHeading, EnumTable } from "../../storybook-components";
-import { ORIENTATION } from "../..";
-import { Aside } from "./Aside";
-
-<Meta title="Components/Layout/Aside" component={Aside} />
-
-<ComponentHeading
-  componentName="Aside"
-  description="Component to help with sidebar layout"
-  sourcePath="src/components/Aside/Aside.tsx"
-  hideDemosLink
-/>
-
-```jsx
-import { Aside } from "@conveyorhq/arrow-ds";
-```
-
-<Preview>
-  <Story name="Aside">
-    <div className="h-64">
-      <Aside>
-        {[0, 1, 2].map((item) => (
-          <Aside.Item key={item}>This is the Aside component</Aside.Item>
-        ))}
-        <Aside.Divider />
-        {[0, 1, 2].map((item) => (
-          <Aside.Item key={item}>This is the Aside component</Aside.Item>
-        ))}
-        <Aside.Divider />
-        {[0, 1, 2].map((item) => (
-          <Aside.Item key={item}>This is the Aside component</Aside.Item>
-        ))}
-        <Aside.Divider />
-        {[0, 1, 2].map((item) => (
-          <Aside.Item key={item}>This is the Aside component</Aside.Item>
-        ))}
-        <Aside.Divider />
-        {[0, 1, 2].map((item) => (
-          <Aside.Item key={item}>This is the Aside component</Aside.Item>
-        ))}
-        <Aside.Divider />
-        {[0, 1, 2].map((item) => (
-          <Aside.Item key={item}>This is the Aside component</Aside.Item>
-        ))}
-      </Aside>
-    </div>
-  </Story>
-</Preview>
-
-## Props
-
-### Aside
-
-<Props of={Aside} />
-
-### Aside.Item
-
-<Props of={Aside.Item} />
-
-### Aside.Divider
-
-<Props of={Aside.Divider} />
-
-<EnumTable enums={{ ORIENTATION }} />

package/src/components/Aside/Aside.tsx

@@ -1,59 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import { Box, BoxProps } from "../Box";
-import { Divider, DividerProps } from "../Divider";
-import { ScrollPane } from "../ScrollPane";
-import { bem } from "../../utilities/bem";
-
-const cn = "Aside";
-
-interface AsideProps extends BoxProps {
-  disableScrolling?: boolean;
-}
-
-interface AsideItemProps extends BoxProps {
-  removePadding?: boolean;
-}
-
-const AsideDivider = (props: DividerProps) => {
-  const { className, ...rest } = props;
-  return (
-    <Divider
-      className={classNames(bem(cn, { e: "item" }), classNames)}
-      {...rest}
-    />
-  );
-};
-
-const AsideItem = (props: AsideItemProps) => {
-  const { removePadding = false, className, ...rest } = props;
-
-  return (
-    <Box
-      className={classNames(
-        bem(cn, { e: "item" }),
-        !removePadding && bem(cn, { e: "item", m: "padded" }),
-        className,
-      )}
-      {...rest}
-    />
-  );
-};
-
-export const Aside = (props: AsideProps) => {
-  const { disableScrolling, children, className, ...rest } = props;
-
-  return (
-    <ScrollPane
-      as="aside"
-      disabled={disableScrolling}
-      className={className}
-      {...rest}
-    >
-      {children}
-    </ScrollPane>
-  );
-};
-
-Aside.Divider = AsideDivider;
-Aside.Item = AsideItem;

package/src/components/Aside/index.css

@@ -1,11 +0,0 @@
-.ads-Aside-item {
-  @apply my-6;
-}
-
-.ads-Aside-item:first-child {
-  @apply mt-8;
-}
-
-.ads-Aside-item--padded {
-  @apply px-8;
-}

package/src/components/Aside/index.ts

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

package/src/components/Fixed/Fixed.md

@@ -1,16 +0,0 @@
-# Usage
-
-`<Fixed />` is used for wrapping child nodes in an fixed-positioned Box.
-
-`import { Fixed } from "@conveyorhq/arrow-ds"`
-
-```jsx
-<Fixed>
-  {children}
-</Fixed>
-```
-
-## Props
-
-Fixed props extend `React.HTMLProps<HTMLDivElement>` via `BoxProps`, therefore
-any valid attributes for an HTML `div` element are accepted as props.

package/src/components/Fixed/Fixed.story.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import Story from "../../storybook-components/Story";
-import { Fixed } from "./Fixed";
-
-const stories = storiesOf("Components/Positioning/Fixed", module);
-
-stories.add("Default", () => (
-  <Story title="Fixed">
-    <Fixed>This is the Fixed component</Fixed>
-  </Story>
-));

package/src/components/Fixed/Fixed.tsx

@@ -1,9 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import { Box, BoxProps } from "../Box";
-
-export const Fixed = (props: BoxProps) => {
-  const { className, ...rest } = props;
-
-  return <Box className={classNames("fixed", className)} {...rest} />;
-};

package/src/components/Fixed/index.ts

@@ -1 +0,0 @@
-export { Fixed } from "./Fixed";

package/src/components/Flex/Flex.md

@@ -1,14 +0,0 @@
-# Usage
-
-`<Flex />` …
-
-`import { Flex } from "@conveyorhq/arrow-ds"`
-
-```jsx
-<Flex>{...}</Flex>
-```
-
-## Props
-
-| Prop | Type | Required | Default Value | Description |
-|:--- |:--- |:--- |:--- |:--- |

package/src/components/Flex/Flex.story.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import Story from "../../storybook-components/Story";
-import { Flex } from "./Flex";
-
-const stories = storiesOf("Components/Layout/Flex", module);
-
-stories.add("Default", () => (
-  <Story title="Flex">
-    <Flex>This is the Flex component</Flex>
-  </Story>
-));

package/src/components/IntegrationLogo/IntegrationLogo.story.mdx

@@ -1,159 +0,0 @@
-import { Story, Preview, Props, Meta } from "@storybook/addon-docs/blocks";
-import { Flex } from "../Flex";
-import { Table } from "../Table";
-import { IntegrationLogo } from "./IntegrationLogo";
-
-<Meta title="Components/Logos/Integration Logo" component={IntegrationLogo} />
-
-# Integration logo
-
-A specific component to display the logo of a supported integration. This is
-separate from VendorLogo because we need more control over the logo and its
-size for rendering within the UI.
-
-Each logo's size has been set to match it's current use case within the Comply
-app (24 px tall), so in most cases, you shouldn't need to resize it. However,
-the size can be changed by applying styles via `className` or `style`.
-
-## Sizing
-
-### With `size` prop
-
-The easiest way to style `IntegrationLogo` is to use the `size` prop. This
-prop defines the height of the icon (as well as the width if you are using the
-`square` prop).
-
-### With CSS
-
-When styling the `height` property via CSS, the `width` will be calculated
-automatically. When styling the `width`, however, the `height` will need to be
-set to `auto` to be calculated automatically.
-
-```jsx
-import { IntegrationLogo } from "@conveyorhq/arrow-ds";
-```
-
-export const logos = [
-  "addigy",
-  "aws",
-  "bamboohr",
-  "bitbucket",
-  "conveyor",
-  "deploy",
-  "events-api",
-  "gcp",
-  "github",
-  "gitlab",
-  "gsuite",
-  "jamf",
-  "jira",
-  "jumpcloud",
-  "okta",
-  "onelogin",
-  "salesforce",
-  "slack",
-  "zoom",
-  "[ no match ]",
-];
-
-<Preview>
-  <Story name="Integration logo">
-    <div>
-      <Table>
-        <Table.Head>
-          <Table.Row>
-            <Table.HeaderCell sortable={false}>Logo</Table.HeaderCell>
-            <Table.HeaderCell sortable={false}>Regular</Table.HeaderCell>
-            <Table.HeaderCell sortable={false}>Square</Table.HeaderCell>
-          </Table.Row>
-        </Table.Head>
-        <Table.Body>
-          {logos.map((logo) => (
-            <Table.Row key={logo}>
-              <Table.Cell>{logo}</Table.Cell>
-              <Table.Cell>
-                <IntegrationLogo logo={logo} />
-              </Table.Cell>
-              <Table.Cell>
-                <IntegrationLogo logo={logo} square />
-              </Table.Cell>
-            </Table.Row>
-          ))}
-        </Table.Body>
-      </Table>
-    </div>
-  </Story>
-</Preview>
-
-## `IntegrationLogo` Custom Props
-
-These are the custom props that extend `React.SVGAttributes<SVGElement>`.
-
-<Props of={IntegrationLogo} />
-
-## Demos
-
-### Simple Use case
-
-<Preview>
-  <Story name="IntegrationLogo Simple">
-    <IntegrationLogo logo="gsuite" />
-  </Story>
-</Preview>
-
-### Square logo
-
-<Preview>
-  <Story name="Square logo">
-    <IntegrationLogo logo="okta" square />
-  </Story>
-</Preview>
-
-### Size
-
-<Preview>
-  <Story name="Size">
-    <div>
-      <Flex className="mb-12 items-center justify-between">
-        <IntegrationLogo logo="okta" size={24} />
-        <IntegrationLogo logo="okta" size={48} />
-        <IntegrationLogo logo="okta" size={72} />
-      </Flex>
-      <Flex className="items-center justify-between">
-        <IntegrationLogo logo="okta" size={24} square />
-        <IntegrationLogo logo="okta" size={48} square />
-        <IntegrationLogo logo="okta" size={72} square />
-      </Flex>
-    </div>
-  </Story>
-</Preview>
-
-### Okta logo with container
-
-<Preview>
-  <Story name="Okta logo with container">
-    <Flex
-      className="rounded w-12 h-12 items-center justify-center"
-      style={{ backgroundColor: "#0a7ec2" }}
-    >
-      <IntegrationLogo
-        logo="okta"
-        color="white"
-        style={{ width: "42px", height: "auto" }}
-      />
-    </Flex>
-  </Story>
-</Preview>
-
-### Jamf logo with container
-
-<Preview>
-  <Story name="Jamf logo with container">
-    <Flex
-      className="rounded w-12 h-12 items-center justify-center"
-      style={{ backgroundColor: "#434a54" }}
-    >
-      <IntegrationLogo logo="jamf" size={32} square />
-    </Flex>
-  </Story>
-</Preview>