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

package/src/components/StatusLabel/StatusLabel.story.mdx

@@ -1,316 +0,0 @@
-import { Story, Preview, Props, Meta } from "@storybook/addon-docs/blocks";
-import { capitalize } from "../../utilities/strings";
-import Examples from "../../storybook-components/Examples";
-import { EnumTable } from "../../storybook-components/EnumTable";
-import { STATUS_VARIANT } from "../../types";
-import { Box } from "../Box";
-import { ICON_TYPE } from "../Icon";
-import { StatusLabel, STATUS_LABEL_ICON_POSITION } from "./StatusLabel";
-
-export const variants = Object.values(STATUS_VARIANT);
-export const defaultText = capitalize(STATUS_VARIANT.DEFAULT);
-export const dangerText = capitalize(STATUS_VARIANT.DANGER);
-export const warningText = capitalize(STATUS_VARIANT.WARNING);
-export const successText = capitalize(STATUS_VARIANT.SUCCESS);
-
-<Meta title="Components/Data/Status Label" component={StatusLabel} />
-
-# Status label
-
-Status label shows text using a status variant with or without an icon.
-By default, a "stoplight" icon is rendered, but a custom icon can be
-rendered instead. It is used to display successes, warnings and errors,
-but should not be used for long-form messages. For those, use
-[banner](/?path=/docs/components-banner--default).
-
-[See examples](#demos)
-
-```jsx
-import { StatusLabel } from "@conveyorhq/arrow-ds";
-```
-
-<Preview>
-  <Story name="Default">
-    <StatusLabel variant={STATUS_VARIANT.DEFAULT}>{defaultText}</StatusLabel>
-  </Story>
-</Preview>
-
-## Props
-
-These are the custom props that extend `BoxProps`. Full list of props <a href="#all-props">below</a>.
-
-<Props of={StatusLabel} />
-<EnumTable enums={{ ICON_TYPE, STATUS_LABEL_ICON_POSITION, STATUS_VARIANT }} />
-
-## Demos
-
-### Variants
-
-<Preview>
-  <Story name="Variant">
-    <Examples>
-      <StatusLabel variant={STATUS_VARIANT.DEFAULT}>{defaultText}</StatusLabel>
-      <StatusLabel variant={STATUS_VARIANT.DANGER}>{dangerText}</StatusLabel>
-      <StatusLabel variant={STATUS_VARIANT.WARNING}>{warningText}</StatusLabel>
-      <StatusLabel variant={STATUS_VARIANT.SUCCESS}>{successText}</StatusLabel>
-    </Examples>
-  </Story>
-</Preview>
-
-### Color label
-
-<Preview>
-  <Story name="Color label">
-    <Examples>
-      <StatusLabel variant={STATUS_VARIANT.DEFAULT} colorLabel>
-        {defaultText}
-      </StatusLabel>
-      <StatusLabel variant={STATUS_VARIANT.DANGER} colorLabel>
-        {dangerText}
-      </StatusLabel>
-      <StatusLabel variant={STATUS_VARIANT.WARNING} colorLabel>
-        {warningText}
-      </StatusLabel>
-      <StatusLabel variant={STATUS_VARIANT.SUCCESS} colorLabel>
-        {successText}
-      </StatusLabel>
-    </Examples>
-  </Story>
-</Preview>
-
-### Custom icon
-
-<Preview>
-  <Story name="Custom icon">
-    <Examples>
-      <StatusLabel variant={STATUS_VARIANT.DEFAULT} icon={ICON_TYPE.TAG}>
-        {defaultText}
-      </StatusLabel>
-      <StatusLabel variant={STATUS_VARIANT.DANGER} icon={ICON_TYPE.TAG}>
-        {dangerText}
-      </StatusLabel>
-      <StatusLabel variant={STATUS_VARIANT.WARNING} icon={ICON_TYPE.TAG}>
-        {warningText}
-      </StatusLabel>
-      <StatusLabel variant={STATUS_VARIANT.SUCCESS} icon={ICON_TYPE.TAG}>
-        {successText}
-      </StatusLabel>
-    </Examples>
-  </Story>
-</Preview>
-
-### Icon position, left
-
-Left is the default position.
-
-<Preview>
-  <Story name="Icon position, left">
-    <Examples>
-      <StatusLabel
-        variant={STATUS_VARIANT.DEFAULT}
-        iconPosition={STATUS_LABEL_ICON_POSITION.LEFT}
-      >
-        {defaultText}
-      </StatusLabel>
-      <StatusLabel
-        variant={STATUS_VARIANT.DANGER}
-        iconPosition={STATUS_LABEL_ICON_POSITION.LEFT}
-      >
-        {dangerText}
-      </StatusLabel>
-      <StatusLabel
-        variant={STATUS_VARIANT.WARNING}
-        iconPosition={STATUS_LABEL_ICON_POSITION.LEFT}
-      >
-        {warningText}
-      </StatusLabel>
-      <StatusLabel
-        variant={STATUS_VARIANT.SUCCESS}
-        iconPosition={STATUS_LABEL_ICON_POSITION.LEFT}
-      >
-        {successText}
-      </StatusLabel>
-    </Examples>
-  </Story>
-</Preview>
-
-### Icon position, right
-
-<Preview>
-  <Story name="Icon position, right">
-    <Examples>
-      <StatusLabel
-        variant={STATUS_VARIANT.DEFAULT}
-        iconPosition={STATUS_LABEL_ICON_POSITION.RIGHT}
-      >
-        {defaultText}
-      </StatusLabel>
-      <StatusLabel
-        variant={STATUS_VARIANT.DANGER}
-        iconPosition={STATUS_LABEL_ICON_POSITION.RIGHT}
-      >
-        {dangerText}
-      </StatusLabel>
-      <StatusLabel
-        variant={STATUS_VARIANT.WARNING}
-        iconPosition={STATUS_LABEL_ICON_POSITION.RIGHT}
-      >
-        {warningText}
-      </StatusLabel>
-      <StatusLabel
-        variant={STATUS_VARIANT.SUCCESS}
-        iconPosition={STATUS_LABEL_ICON_POSITION.RIGHT}
-      >
-        {successText}
-      </StatusLabel>
-    </Examples>
-  </Story>
-</Preview>
-
-### Bold text
-
-<Preview>
-  <Story name="Bold text">
-    <Examples>
-      <StatusLabel variant={STATUS_VARIANT.DEFAULT} className="font-medium">
-        {defaultText}
-      </StatusLabel>
-      <StatusLabel variant={STATUS_VARIANT.DANGER} className="font-medium">
-        {dangerText}
-      </StatusLabel>
-      <StatusLabel variant={STATUS_VARIANT.WARNING} className="font-medium">
-        {warningText}
-      </StatusLabel>
-      <StatusLabel variant={STATUS_VARIANT.SUCCESS} className="font-medium">
-        {successText}
-      </StatusLabel>
-    </Examples>
-  </Story>
-</Preview>
-
-### Font size
-
-Status label size can be changed by manipulating the parent font size.
-
-<Preview>
-  <Story name="Font size">
-    <Examples>
-      <Box as="span" className="text-h6">
-        <StatusLabel variant={STATUS_VARIANT.DEFAULT}>
-          {defaultText}
-        </StatusLabel>
-      </Box>
-      <Box as="span" className="text-h6">
-        <StatusLabel variant={STATUS_VARIANT.DANGER}>{defaultText}</StatusLabel>
-      </Box>
-      <Box as="span" className="text-h6">
-        <StatusLabel variant={STATUS_VARIANT.WARNING}>
-          {defaultText}
-        </StatusLabel>
-      </Box>
-      <Box as="span" className="text-h6">
-        <StatusLabel variant={STATUS_VARIANT.SUCCESS}>
-          {defaultText}
-        </StatusLabel>
-      </Box>
-      <br />
-      <Box as="span" className="text-h1">
-        <StatusLabel variant={STATUS_VARIANT.DEFAULT}>
-          {defaultText}
-        </StatusLabel>
-      </Box>
-      <Box as="span" className="text-h1">
-        <StatusLabel variant={STATUS_VARIANT.DANGER}>{defaultText}</StatusLabel>
-      </Box>
-      <Box as="span" className="text-h1">
-        <StatusLabel variant={STATUS_VARIANT.WARNING}>
-          {defaultText}
-        </StatusLabel>
-      </Box>
-      <Box as="span" className="text-h1">
-        <StatusLabel variant={STATUS_VARIANT.SUCCESS}>
-          {defaultText}
-        </StatusLabel>
-      </Box>
-    </Examples>
-  </Story>
-</Preview>
-
-### Icon size
-
-Default iconFontSize is 60% of parent font size. Font size can be
-defined as a percentage or pixel value.
-
-<Preview>
-  <Story name="Icon size">
-    <Examples>
-      <StatusLabel variant={STATUS_VARIANT.DEFAULT} iconFontSize="0.5em">
-        {defaultText}
-      </StatusLabel>
-      <StatusLabel variant={STATUS_VARIANT.DANGER} iconFontSize="0.5em">
-        {dangerText}
-      </StatusLabel>
-      <StatusLabel variant={STATUS_VARIANT.WARNING} iconFontSize="0.5em">
-        {warningText}
-      </StatusLabel>
-      <StatusLabel variant={STATUS_VARIANT.SUCCESS} iconFontSize="0.5em">
-        {successText}
-      </StatusLabel>
-      <br />
-      <StatusLabel variant={STATUS_VARIANT.DEFAULT} iconFontSize="16px">
-        {defaultText}
-      </StatusLabel>
-      <StatusLabel variant={STATUS_VARIANT.DANGER} iconFontSize="16px">
-        {dangerText}
-      </StatusLabel>
-      <StatusLabel variant={STATUS_VARIANT.WARNING} iconFontSize="16px">
-        {warningText}
-      </StatusLabel>
-      <StatusLabel variant={STATUS_VARIANT.SUCCESS} iconFontSize="16px">
-        {successText}
-      </StatusLabel>
-      <br />
-      <StatusLabel variant={STATUS_VARIANT.DEFAULT} iconFontSize="200%">
-        {defaultText}
-      </StatusLabel>
-      <StatusLabel variant={STATUS_VARIANT.DANGER} iconFontSize="200%">
-        {dangerText}
-      </StatusLabel>
-      <StatusLabel variant={STATUS_VARIANT.WARNING} iconFontSize="200%">
-        {warningText}
-      </StatusLabel>
-      <StatusLabel variant={STATUS_VARIANT.SUCCESS} iconFontSize="200%">
-        {successText}
-      </StatusLabel>
-    </Examples>
-  </Story>
-</Preview>
-
-### Remove icon
-
-If `removeIcon` is set to true, `colorLabel` should also be true.
-
-<Preview>
-  <Story name="Remove icon">
-    <Examples>
-      <StatusLabel variant={STATUS_VARIANT.DEFAULT} removeIcon colorLabel>
-        {defaultText}
-      </StatusLabel>
-      <StatusLabel variant={STATUS_VARIANT.DANGER} removeIcon colorLabel>
-        {dangerText}
-      </StatusLabel>
-      <StatusLabel variant={STATUS_VARIANT.WARNING} removeIcon colorLabel>
-        {warningText}
-      </StatusLabel>
-      <StatusLabel variant={STATUS_VARIANT.SUCCESS} removeIcon colorLabel>
-        {successText}
-      </StatusLabel>
-    </Examples>
-  </Story>
-</Preview>
-
-## All Props
-
-Any valid attribute of `BoxProps` is available to the status label component.
-
-<Props of={StatusLabel} />

package/src/components/StatusLabel/StatusLabel.tsx

@@ -1,112 +0,0 @@
-import React, { ReactNode } from "react";
-import classNames from "classnames";
-import { Box, BoxProps } from "../Box";
-import { bem } from "../../utilities/bem";
-import { STATUS_VARIANT } from "../../types";
-import { Flex } from "../Flex";
-import { Icon, ICON_TYPE } from "../Icon";
-import { Text } from "../Text";
-
-const cn = "StatusLabel";
-
-export enum STATUS_LABEL_ICON_POSITION {
-  LEFT = "left",
-  RIGHT = "right",
-}
-
-export interface StatusLabelProps extends BoxProps {
-  icon?: ICON_TYPE;
-  iconPosition?: STATUS_LABEL_ICON_POSITION;
-  iconFontSize?: string;
-  variant?: STATUS_VARIANT;
-  colorLabel?: boolean;
-  removeIcon?: boolean;
-}
-
-type StatusIconProps = {
-  icon: ICON_TYPE;
-  iconPosition: STATUS_LABEL_ICON_POSITION;
-  iconFontSize: string;
-  variant: STATUS_VARIANT;
-};
-
-type StatusTextProps = {
-  children: ReactNode;
-  variant: STATUS_VARIANT;
-  colorLabel?: boolean;
-};
-
-const StatusIcon = ({
-  icon,
-  iconPosition,
-  iconFontSize,
-  variant,
-}: StatusIconProps) => (
-  <Icon
-    style={{ fontSize: iconFontSize }}
-    className={classNames(
-      bem(cn, { e: "icon" }),
-      bem(cn, { e: "icon", m: variant }),
-      { right: "ml-1", left: "mr-1" }[
-        iconPosition === STATUS_LABEL_ICON_POSITION.RIGHT ? "right" : "left"
-      ],
-    )}
-    icon={icon}
-  />
-);
-
-const StatusText = ({ children, variant, colorLabel }: StatusTextProps) => (
-  <Text
-    className={classNames(
-      bem(cn, { e: "label" }),
-      colorLabel && bem(cn, { e: "label", m: variant }),
-    )}
-  >
-    {children}
-  </Text>
-);
-
-export const StatusLabel = (props: StatusLabelProps) => {
-  const {
-    icon = ICON_TYPE.CIRCLE,
-    iconPosition = STATUS_LABEL_ICON_POSITION.LEFT,
-    iconFontSize = "60%",
-    variant = STATUS_VARIANT.DEFAULT,
-    colorLabel,
-    removeIcon,
-    className,
-    children,
-    ...rest
-  } = props;
-
-  const iconProps = {
-    icon,
-    iconPosition,
-    iconFontSize,
-    variant,
-  };
-
-  if (removeIcon) {
-    return (
-      <Box className={classNames(bem(cn), className)} {...rest}>
-        <StatusText colorLabel={colorLabel} variant={variant}>
-          {children}
-        </StatusText>
-      </Box>
-    );
-  }
-
-  return (
-    <Flex className={classNames(bem(cn), className)} {...rest}>
-      {iconPosition === STATUS_LABEL_ICON_POSITION.LEFT && (
-        <StatusIcon {...iconProps} />
-      )}
-      <StatusText colorLabel={colorLabel} variant={variant}>
-        {children}
-      </StatusText>
-      {iconPosition === STATUS_LABEL_ICON_POSITION.RIGHT && (
-        <StatusIcon {...iconProps} />
-      )}
-    </Flex>
-  );
-};

package/src/components/StatusLabel/index.css

@@ -1,23 +0,0 @@
-.ads-StatusLabel {
-  @apply items-center;
-}
-
-.ads-StatusLabel-icon--default,
-.ads-StatusLabel-label--default {
-  @apply text-gray-700;
-}
-
-.ads-StatusLabel-icon--success,
-.ads-StatusLabel-label--success {
-  @apply text-success;
-}
-
-.ads-StatusLabel-icon--warning,
-.ads-StatusLabel-label--warning {
-  @apply text-caution;
-}
-
-.ads-StatusLabel-icon--danger,
-.ads-StatusLabel-label--danger {
-  @apply text-failure;
-}

package/src/components/StatusLabel/index.ts

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

package/src/components/StatusPanel/StatusPanel.story.mdx

@@ -1,109 +0,0 @@
-import { Meta, Preview, Props, Story } from "@storybook/addon-docs/blocks";
-import { useState } from "react";
-import { StatusPanel } from "./StatusPanel";
-import { Checkbox } from "../Checkbox";
-import { ArrowLink } from "../ArrowLink";
-import { SmallCaps } from "../SmallCaps";
-import { Text } from "../Text";
-import { Stack } from "../Stack";
-import { STATUS_VARIANT, ORIENTATION } from "../../types";
-import { EnumTable } from "../../storybook-components/EnumTable";
-import { capitalize } from "../../utilities/strings";
-
-<Meta title="Components/Data/Status Panel" component={StatusPanel} />
-
-# StatusPanel
-
-The StatusPanel is a container styled with an accent border that can be used to indicate status of its content.
-
-```jsx
-import { StatusPanel } from "@conveyorhq/arrow-ds";
-```
-
-export const variants = Object.values(STATUS_VARIANT);
-
-<Preview>
-  <Story name="StatusPanel">
-    <StatusPanel />
-  </Story>
-</Preview>
-
-## Custom Props
-
-These are the custom props that extend `BoxProps>`. Full list of props <a href="#all-props">below</a>.
-
-<Props of={StatusPanel} />
-<EnumTable enums={{ STATUS_VARIANT }} />
-
-## Demos
-
-### Status Variants
-
-<Preview>
-  <Story name="Status Variants">
-    <Stack orientation={ORIENTATION.VERTICAL}>
-      {variants.map((variant) => (
-        <StatusPanel key={variant} variant={variant} />
-      ))}
-    </Stack>
-  </Story>
-</Preview>
-
-### Hoverable
-
-<Preview>
-  <Story name="Hoverable">
-    <Stack orientation={ORIENTATION.VERTICAL}>
-      {variants.map((variant) => (
-        <StatusPanel hoverable key={variant} variant={variant} />
-      ))}
-    </Stack>
-  </Story>
-</Preview>
-
-### Clickable Children
-
-export const InteractiveCheckbox = ({ label, ...rest }) => {
-  const [checked, setChecked] = useState(false);
-  const handleCheckboxClick = () => {
-    setChecked(!checked);
-  };
-  return (
-    <Checkbox
-      onClick={handleCheckboxClick}
-      checked={checked}
-      {...rest}
-      label={label}
-    />
-  );
-};
-
-<Preview>
-  <Story name="ClickableChildren">
-    <Stack orientation={ORIENTATION.VERTICAL}>
-      {variants.map((variant) => (
-        <StatusPanel key={variant} variant={variant} hoverable>
-          <label className="self-stretch flex-grow flex items-center px-2 cursor-pointer">
-            <InteractiveCheckbox className="mr-2" />
-            <SmallCaps className="w-14" variant={variant}>
-              {variant}
-            </SmallCaps>
-            <Text className="font-medium" variant={variant}>
-              {capitalize(variant)}
-            </Text>
-          </label>
-          <ArrowLink
-            className="self-stretch flex-no-grow px-2"
-            onClick={() => console.log("link clicked")}
-          >
-            A link
-          </ArrowLink>
-        </StatusPanel>
-      ))}
-    </Stack>
-  </Story>
-</Preview>
-
-## All Props
-
-<Props of={StatusPanel} />

package/src/components/StatusPanel/StatusPanel.tsx

@@ -1,51 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-import { Box, BoxProps } from "../Box";
-import { bem } from "../../utilities/bem";
-import { STATUS_VARIANT } from "../../types";
-
-const cn = "StatusPanel";
-
-export interface StatusPanelProps extends BoxProps {
-  variant?: STATUS_VARIANT;
-  hoverable?: boolean;
-}
-
-const defaultStatusPanelProps: Partial<StatusPanelProps> = {
-  variant: STATUS_VARIANT.DEFAULT,
-  hoverable: false,
-};
-
-const StatusPanel = (props: StatusPanelProps) => {
-  const {
-    variant = defaultStatusPanelProps.variant,
-    hoverable = defaultStatusPanelProps.hoverable,
-    className,
-    children,
-    ...rest
-  } = props;
-
-  return (
-    <Box className={classNames(bem(cn, { e: "wrapper" }), className)} {...rest}>
-      <Box
-        className={classNames(
-          bem(cn),
-          hoverable && bem(cn, { m: "hoverable" }),
-          bem(cn, { m: variant }),
-        )}
-      >
-        {children}
-      </Box>
-      <Box
-        className={classNames(
-          bem(cn, { e: "accent" }),
-          bem(cn, { e: "accent", m: variant }),
-        )}
-      />
-    </Box>
-  );
-};
-
-StatusPanel.defaultProps = defaultStatusPanelProps;
-
-export { StatusPanel };

package/src/components/StatusPanel/index.css

@@ -1,52 +0,0 @@
-.ads-StatusPanel-wrapper {
-  @apply relative
-    w-full;
-}
-
-.ads-StatusPanel {
-  @apply bg-gray-200
-    rounded-sm
-    border
-    border-gray-400
-    min-h-8
-    h-full
-    flex
-    items-center;
-
-  border-radius: 3px;
-}
-
-.ads-StatusPanel--hoverable {
-  @apply duration-100;
-}
-
-.ads-StatusPanel--hoverable:hover {
-  @apply border-gray-500
-    bg-gray-400;
-}
-
-.ads-StatusPanel-accent {
-  @apply absolute
-    top-0
-    left-0
-    bottom-0
-    border;
-
-  border-radius: 3px 0px 0px 3px;
-}
-
-.ads-StatusPanel-accent--default {
-  @apply border-gray-700;
-}
-
-.ads-StatusPanel-accent--success {
-  @apply border-success;
-}
-
-.ads-StatusPanel-accent--warning {
-  @apply border-caution;
-}
-
-.ads-StatusPanel-accent--danger {
-  @apply border-failure;
-}

package/src/components/StatusPanel/index.ts

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

package/src/components/Sticky/Sticky.md

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

package/src/components/Sticky/Sticky.story.tsx

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