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

package/src/components/Sticky/Sticky.tsx

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

package/src/components/Sticky/index.ts

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

package/src/components/Svg/Svg.md

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

package/src/components/Svg/Svg.story.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import Story from "../../storybook-components/Story";
-import { colors } from "../../tokens";
-import { Svg } from "./Svg";
-
-const stories = storiesOf("Components/Images/Svg", module);
-
-stories.add("Default", () => (
-  <Story title="Svg">
-    <Svg viewBox="0 0 300 100" fill={colors.gray["900"]}>
-      <circle cx="50" cy="50" r="40" />
-    </Svg>
-  </Story>
-));

package/src/components/Text/Text.md

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

package/src/components/Text/Text.story.tsx

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

package/src/components/TopBar/TopBar.story.mdx

@@ -1,154 +0,0 @@
-import { Meta, Preview, Props, Story } from "@storybook/addon-docs/blocks";
-import { TopBar } from "./TopBar";
-import { Button, BUTTON_VARIANT } from "../Button";
-import { Box } from "../Box";
-import { Reference } from "../Reference";
-
-<Meta title="Components/Layout/Top Bar" component={TopBar} />
-
-# TopBar
-
-```jsx
-import { TopBar } from "@conveyorhq/arrow-ds";
-```
-
-<Preview>
-  <Story name="TopBar">
-    <TopBar
-      leftSlot={
-        <TopBar.SubNav>
-          <TopBar.SubNavItem href="/" isActive>
-            Item One
-          </TopBar.SubNavItem>
-          <TopBar.SubNavItem href="/">Item Two</TopBar.SubNavItem>
-          <TopBar.SubNavItem href="/">Item Three</TopBar.SubNavItem>
-        </TopBar.SubNav>
-      }
-      rightSlot={
-        <Button.Group>
-          <Button variant={BUTTON_VARIANT.SECONDARY}>Secondary Action</Button>
-          <Button>Primary Action</Button>
-        </Button.Group>
-      }
-    />
-  </Story>
-</Preview>
-
-## `TopBar` Custom Props
-
-These are the custom props that extend [`BoxProps`](/?path=/docs/components-box--box#all-props).
-
-<Props of={TopBar} />
-
-## `TopBar.SubNav` Custom Props
-
-`TopBar.SubNav` simply extends [`BoxProps`](/?path=/docs/components-box--box#all-props) and does not have any custom props.
-
-## `TopBar.SubNavItem` Custom Props
-
-These are the custom props that extend [`LinkProps`](/?path=/docs/components-link--link#all-props)
-
-<Props of={TopBar.SubNavItem} />
-
-## `TopBar.Breadcrumbs` Custom Props
-
-These are the custom props that extend [`BoxProps`](/?path=/docs/components-box--box#all-props).
-
-<Props of={TopBar.Breadcrumbs} />
-
-## Demos
-
-### Breadcrumbs
-
-<Preview>
-  <Story name="TopBar with Breadcrumbs">
-    <TopBar
-      leftSlot={
-        <TopBar.Breadcrumbs
-          parentLinkTitle="My Shared Room"
-          parentLinkProps={{ className: "test-class" }}
-          currentPageTitle="SOC 2 Type 2 Report"
-          currentPageSubtitle="June 2018 — June 2019"
-        />
-      }
-    />
-  </Story>
-</Preview>
-
-### Breadcrumbs, actions, and SubNav
-
-When another row is needed, just use a second `TopBar`.
-
-<Preview>
-  <Story name="TopBar with Breadcrumbs, actions, and SubNav">
-    <Box>
-      <TopBar
-        leftSlot={
-          <TopBar.Breadcrumbs
-            parentLinkTitle="My Shared Room"
-            parentLinkProps={{ className: "test-class" }}
-            currentPageTitle="SOC 2 Type 2 Report"
-            currentPageSubtitle="June 2018 — June 2019"
-          />
-        }
-        rightSlot={
-          <Button.Group>
-            <Button variant={BUTTON_VARIANT.SECONDARY}>Secondary Action</Button>
-            <Button>Primary Action</Button>
-          </Button.Group>
-        }
-      />
-      <TopBar
-        leftSlot={
-          <TopBar.SubNav>
-            <TopBar.SubNavItem href="/" isActive>
-              Audience Activity
-            </TopBar.SubNavItem>
-            <TopBar.SubNavItem href="/">Properties</TopBar.SubNavItem>
-            <TopBar.SubNavItem href="/">Versions</TopBar.SubNavItem>
-          </TopBar.SubNav>
-        }
-      />
-    </Box>
-  </Story>
-</Preview>
-
-### Breadcrumbs with plain parent text
-
-When navigation back to a parent page is not needed, you can render text instead of a clickable link by using the `parentTitle` prop of `TopBar.Breadcrumbs`.
-
-<Preview>
-  <Story name="TopBar Breadcrumbs with plain parent">
-    <Box>
-      <TopBar
-        leftSlot={
-          <TopBar.Breadcrumbs
-            parentTitle="My Shared Room"
-            currentPageTitle="SOC 2 Type 2 Report"
-            currentPageSubtitle="June 2018 — June 2019"
-          />
-        }
-        rightSlot={
-          <Button.Group>
-            <Button variant={BUTTON_VARIANT.SECONDARY}>Secondary Action</Button>
-            <Button>Primary Action</Button>
-          </Button.Group>
-        }
-      />
-    </Box>
-  </Story>
-</Preview>
-
-### Middle
-
-There are a total of 3 slots available with `TopBar`.
-
-<Preview>
-  <Story name="Middle">
-    <TopBar
-      leftSlot={<TopBar.Breadcrumbs currentPageTitle="Page Title" />}
-      middleSlot={<Reference>Page level content</Reference>}
-      rightSlot={<Button>Primary Action</Button>}
-    />
-  </Story>
-</Preview>

package/src/components/TopBar/TopBar.tsx

@@ -1,40 +0,0 @@
-import React, { ReactNode } from "react";
-import classNames from "classnames";
-import { Flex } from "../Flex";
-import { bemHOF } from "../../utilities/bem";
-import { BoxProps } from "../Box";
-import { TopBarSubNavItem } from "./TopBarSubNavItem";
-import { TopBarSubNav } from "./TopBarSubNav";
-import { TopBarBreadcrumbs } from "./TopBarBreadcrumbs";
-
-const b = bemHOF("TopBar");
-
-export interface TopBarProps extends BoxProps {
-  leftSlot: ReactNode;
-  middleSlot?: ReactNode;
-  rightSlot?: ReactNode;
-}
-
-const TopBar = ({
-  leftSlot,
-  middleSlot,
-  rightSlot,
-  className,
-  ...rest
-}: TopBarProps) => {
-  return (
-    <Flex className={classNames(b(), className)} {...rest}>
-      <Flex className={b({ e: "left-slot" })}>{leftSlot}</Flex>
-      {middleSlot && (
-        <Flex className={b({ e: "middle-slot" })}>{middleSlot}</Flex>
-      )}
-      {rightSlot && <Flex className={b({ e: "right-slot" })}>{rightSlot}</Flex>}
-    </Flex>
-  );
-};
-
-TopBar.SubNav = TopBarSubNav;
-TopBar.SubNavItem = TopBarSubNavItem;
-TopBar.Breadcrumbs = TopBarBreadcrumbs;
-
-export { TopBar };

package/src/components/TopBar/TopBarBreadcrumbs.tsx

@@ -1,79 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import { BoxProps, Box } from "../Box";
-import { LinkProps, Link } from "../Link";
-import { bemHOF } from "../../utilities/bem";
-import { Icon, ICON_TYPE } from "../Icon";
-import { Flex } from "../Flex";
-import { Text } from "../Text";
-
-const b = bemHOF("TopBar");
-
-export interface BreadcrumbsProps extends BoxProps {
-  currentPageTitle: string;
-  currentPageSubtitle?: string;
-  parentTitle?: string;
-  parentLinkTitle?: string;
-  parentLinkProps?: LinkProps;
-}
-
-export const TopBarBreadcrumbs = (props: BreadcrumbsProps) => {
-  const {
-    className,
-    currentPageTitle,
-    currentPageSubtitle,
-    parentTitle,
-    parentLinkTitle,
-    parentLinkProps,
-    ...rest
-  } = props;
-  let parentElement = null;
-
-  if (parentLinkTitle) {
-    const propsClasses =
-      parentLinkProps !== undefined ? parentLinkProps.className : undefined;
-
-    const linkClasses = classNames(
-      b({ e: "bc-parent" }),
-      b({ e: "bc-parent", m: "link" }),
-      propsClasses,
-    );
-    parentElement = (
-      <Link noStyles {...parentLinkProps} className={linkClasses}>
-        <Icon
-          icon={ICON_TYPE.LEVEL_UP_ALT}
-          flip="horizontal"
-          className={b({ e: "bc-parent-link-icon" })}
-        />
-        {parentLinkTitle}
-      </Link>
-    );
-  }
-
-  if (parentTitle) {
-    parentElement = (
-      <Box
-        className={classNames(
-          b({ e: "bc-parent" }),
-          b({ e: "bc-parent", m: "title" }),
-        )}
-      >
-        {parentTitle}
-      </Box>
-    );
-  }
-
-  return (
-    <Flex className={classNames(b({ e: "bc" }), className)} {...rest}>
-      {parentElement}
-      <Text as="span" className={b({ e: "bc-page-title" })}>
-        {currentPageTitle}
-      </Text>
-      {currentPageSubtitle && (
-        <Text as="span" className={b({ e: "bc-page-subtitle" })}>
-          {currentPageSubtitle}
-        </Text>
-      )}
-    </Flex>
-  );
-};

package/src/components/TopBar/TopBarSubNav.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import { BoxProps } from "../Box";
-import { Flex } from "../Flex";
-import { bemHOF } from "../../utilities/bem";
-
-const b = bemHOF("TopBar");
-
-export const TopBarSubNav = (props: BoxProps) => {
-  const { className, ...rest } = props;
-
-  return (
-    <Flex
-      as="nav"
-      className={classNames(b({ e: "subnav" }), className)}
-      {...rest}
-    />
-  );
-};

package/src/components/TopBar/TopBarSubNavItem.tsx

@@ -1,21 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import { LinkProps, Link } from "../Link";
-import { bemHOF } from "../../utilities/bem";
-
-const b = bemHOF("TopBar");
-
-export interface SubNavItemProps extends LinkProps {
-  isActive?: boolean;
-}
-
-export const TopBarSubNavItem = (props: SubNavItemProps) => {
-  const { isActive = false, className, ...rest } = props;
-  const classes = classNames(
-    b({ e: "subnav-item" }),
-    { [b({ e: "subnav-item", m: "isActive" })]: isActive },
-    className,
-  );
-
-  return <Link className={classes} noStyles {...rest} />;
-};

package/src/components/TopBar/index.css

@@ -1,102 +0,0 @@
-.ads-TopBar {
-  @apply items-center
-    border-b
-    border-gray-400
-    relative
-    h-12
-    w-full
-    justify-between;
-}
-
-.ads-TopBar-left-slot,
-.ads-TopBar-middle-slot,
-.ads-TopBar-right-slot {
-  @apply items-center
-    h-full;
-}
-
-.ads-TopBar-left-slot {
-  @apply pl-8;
-}
-
-.ads-TopBar-right-slot {
-  @apply pr-8;
-}
-
-.ads-TopBar-subnav {
-  @apply h-full
-    items-end;
-}
-
-.ads-TopBar-subnav-item {
-  @apply inline
-    text-gray-600
-    border-b-2
-    border-transparent
-    pb-3
-    mr-7;
-}
-
-.ads-TopBar-subnav-item:focus {
-  @apply outline-none
-    shadow-focus;
-}
-
-.ads-TopBar-subnav-item--isActive {
-  @apply text-gray-900
-    border-brandGreen-400;
-}
-
-/* Breadcrumbs */
-.ads-TopBar-bc {
-  @apply items-center;
-}
-
-.ads-TopBar-bc-parent {
-  @apply flex
-    items-center
-    bg-gray-300
-    rounded-md
-    text-gray-700
-    font-medium
-    py-2
-    px-2
-    mr-3;
-}
-
-.ads-TopBar-bc-parent.ads-TopBar-bc-parent--link {
-  @apply cursor-pointer
-    transition
-    duration-150;
-}
-
-.ads-TopBar-bc-parent-link-icon {
-  @apply text-gray-600
-    mr-1
-    transition
-    duration-150;
-}
-
-.ads-TopBar-bc-parent--link:hover {
-  @apply shadow-buttonSecondary
-    text-gray-800;
-}
-
-.ads-TopBar-bc-parent--link:focus {
-  @apply outline-none
-    shadow-focus;
-}
-
-.ads-TopBar-bc-parent--link:hover .ads-TopBar-bc-parent-link-icon {
-  @apply text-gray-700;
-}
-
-.ads-TopBar-bc-page-title,
-.ads-TopBar-bc-page-subtitle {
-  @apply text-gray-800
-    mr-2;
-}
-
-.ads-TopBar-bc-page-title {
-  @apply font-medium;
-}

package/src/components/TopBar/index.ts

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