@conveyorhq/arrow-ds 2.0.0-beta.1 → 2.0.0-beta.10

package/src/components/AptibleLogo/AptibleLogo.story.tsx

@@ -1,22 +0,0 @@
-import * as React from "react";
-import { storiesOf } from "@storybook/react";
-import Story from "../../storybook-components/Story";
-import { THEME } from "../../types";
-import { Flex } from "../Flex";
-import { AptibleLogo } from "./AptibleLogo";
-
-const stories = storiesOf("Components/Logos/Aptible Logo", module);
-
-stories.add("Default", () => (
-  <Story title="AptibleLogo">
-    <Story title="Aptible Logo">
-      <Flex className="justify-center bg-gray-900 p-12">
-        <AptibleLogo height={40} />
-      </Flex>
-
-      <Flex className="justify-center bg-white p-12">
-        <AptibleLogo height={40} theme={THEME.PRODUCT} />
-      </Flex>
-    </Story>
-  </Story>
-));

package/src/components/AptibleLogo/AptibleLogo.tsx

@@ -1,42 +0,0 @@
-import React from "react";
-import { THEME } from "../../types";
-import { colors } from "../../tokens";
-
-const WIDTH = 803;
-const HEIGHT = 172;
-const RATIO: number = WIDTH / HEIGHT;
-
-const widthFromHeight = (height: number) => Math.ceil(height * RATIO);
-
-type AptibleLogoProps = {
-  height: number;
-  theme?: THEME;
-};
-
-export const AptibleLogo = (props: AptibleLogoProps) => {
-  const { height = HEIGHT, theme = THEME.BRAND } = props;
-
-  const textColor = {
-    brand: colors.white,
-    product: colors.gray["900"],
-  };
-
-  return (
-    <svg
-      width={widthFromHeight(height)}
-      height={height}
-      viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
-    >
-      <title>Aptible</title>
-
-      <path
-        d="M754.698 53.449c16.549 0 27.455 11.096 27.455 26.473H726.26c0-15.377 11.888-26.473 28.438-26.473zm.396 72.221c-18.103 0-28.819-13.823-28.819-30.562h76.311c0-35.429-15.757-57.827-47.872-57.827-29.992 0-48.887 20.258-48.887 52.564 0 31.148 18.895 52.564 49.838 52.564 25.522 0 40.326-14.409 45.367-33.29h-20.448c-1.744 6.041-8.561 16.551-25.49 16.551zm-86.461 13.822h20.638V.298h-20.638v139.194zm-64.555-13.874c-16.739 0-27.043-13.822-27.043-35.824 0-22.192 10.304-35.809 27.043-35.809 17.913 0 27.456 16.342 27.456 35.809s-9.543 35.824-27.456 35.824zm3.614-88.337c-15.376 0-25.108 7.211-30.372 14.806h-.38V.298h-20.449v139.194h20.449V128h.38c5.264 6.817 14.996 14.409 30.372 14.409 25.491 0 44.386-19.845 44.386-52.564 0-32.703-18.895-52.564-44.386-52.564zm-70.379-25.408c0 6.4-5.189 11.588-11.588 11.588-6.4 0-11.588-5.188-11.588-11.588 0-6.4 5.188-11.588 11.588-11.588 6.399 0 11.588 5.188 11.588 11.588zM515.5 139.544h20.449V40.059H515.5v99.485zm-36.736-99.486h18.705v16.737h-18.705v53.929c0 11.304 5.453 12.666 18.705 11.89v16.74c-4.09.965-8.592 1.552-14.045 1.552-16.327 0-25.299-7.404-25.299-28.422V56.795h-14.394V40.058h14.394V8.717h20.639v31.341zm-88.833 85.662c-16.55 0-26.853-13.823-26.853-35.825 0-22.192 10.303-35.809 26.853-35.809 17.912 0 27.455 16.342 27.455 35.809s-9.543 35.825-27.455 35.825zm3.899-88.389c-15.566 0-25.299 7.403-30.562 14.409h-.38V40.058h-20.639l-.001 132.264h20.639l.001-44.653h.38c5.263 7.403 14.996 14.79 30.562 14.79 25.3 0 44.194-19.845 44.194-52.564 0-32.703-18.894-52.564-44.194-52.564zM245.806 87.375l22.003-65.801h.38l21.812 65.801h-44.195zM255.729.348l-51.201 139.195h23.556l11.287-32.908h56.844l11.286 32.908h23.556L280.078.348h-24.349z"
-        fill={textColor[theme]}
-      />
-      <path
-        fill={colors.gold["400"]}
-        d="M89.718 33.061v106.52H114.3V90.418l49.163 49.163v-32.775L89.718 33.061M114.3.285H81.524l81.939 81.939V49.449L114.3.285M-.414 106.806v32.775l49.163-49.163v49.163h24.582V33.061L-.414 106.806M-.414 49.449v32.775L81.524.285H48.442L-.414 49.449"
-      />
-    </svg>
-  );
-};

package/src/components/AptibleLogo/index.ts

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

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";