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

package/src/components/OptionButton/OptionButton.tsx

@@ -1,66 +1,255 @@
 import React, { HTMLProps } from "react";
 import classNames from "classnames";
 import { useId } from "@reach/auto-id";
-import { Box } from "../Box";
+import { Box, BoxProps } from "../Box";
 import { Input } from "../Input";
-import { Text } from "../Text";
+import { Text, TextProps } from "../Text";
 import { Icon, ICON_TYPE } from "../Icon";
-import { bem } from "../../utilities/bem";
+import { Stack, StackProps } from "../Stack";
+import { bemHOF } from "../../utilities/bem";
 import isUndefined from "../../utilities/isUndefined";
+import { ORIENTATION } from "../../types";
+import { OptionButtonContext, useOptionButtonContext } from "./context";
 
-const cn = "OptionButton";
+const cn = bemHOF("OptionButton");
 
+/**
+ * OptionButton.Group
+ * =============================================================================
+ */
+export interface OptionButtonGroupProps extends StackProps {
+  /**
+   * Using context, the name prop is passed down to each input within the group.
+   * You may also define `name` on each individual `OptionButton` or
+   * `OptionButton.Input` manually if you choose not to use `OptionButton.Group`.
+   */
+  name?: string;
+  /**
+   * Defines the type of control to render each input as. This value is stored
+   * in the context and passed onto each input. You may also define `type` on
+   * each individual `OptionButton` or `OptionButton.Input` manually if you
+   * choose not to use `OptionButton.Group`.
+   */
+  type?: "radio" | "checkbox";
+}
+
+export const OptionButtonGroup = (props: OptionButtonGroupProps) => {
+  const {
+    name = "",
+    type = "radio",
+    orientation = ORIENTATION.VERTICAL,
+    ...rest
+  } = props;
+
+  return (
+    <OptionButtonContext.Provider
+      value={{
+        name,
+        type,
+      }}
+    >
+      <Stack orientation={orientation} {...rest} />
+    </OptionButtonContext.Provider>
+  );
+};
+
+/**
+ * OptionButton.Root
+ * =============================================================================
+ */
+export type OptionButtonRootProps = HTMLProps<HTMLLabelElement>;
+
+export const OptionButtonRoot = ({
+  children,
+  className,
+  ...rest
+}: OptionButtonRootProps) => {
+  return (
+    // eslint-disable-next-line jsx-a11y/label-has-associated-control
+    <label className={classNames(cn(), className)} {...rest}>
+      {children}
+    </label>
+  );
+};
+
+/**
+ * OptionButton.Input
+ * =============================================================================
+ */
+export type OptionButtonInputProps = HTMLProps<HTMLInputElement>;
+
+export const OptionButtonInput = (props: OptionButtonInputProps) => {
+  const {
+    name: nameFromContext,
+    type: typeFromContext,
+  } = useOptionButtonContext();
+  const {
+    id: idProp,
+    name: nameProp,
+    checked,
+    className,
+    defaultValue,
+    type: typeProp = "radio",
+    ...rest
+  } = props;
+
+  const fallbackId = `OptionButton:${useId()}`;
+  const id = isUndefined(idProp) ? fallbackId : idProp;
+  const name = isUndefined(nameFromContext) ? nameProp : nameFromContext;
+  const type = isUndefined(typeFromContext) ? typeProp : typeFromContext;
+
+  return (
+    <Input
+      id={id}
+      name={name}
+      type={type}
+      checked={checked}
+      className={classNames([cn({ e: "input" }), className])}
+      defaultValue={defaultValue}
+      aria-checked={checked ? "true" : "false"}
+      {...rest}
+    />
+  );
+};
+
+/**
+ * OptionButton.Content
+ * =============================================================================
+ */
+export const OptionButtonContent = ({
+  className,
+  children,
+  ...rest
+}: BoxProps) => (
+  <Box className={classNames([cn({ e: "content" }), className])} {...rest}>
+    {children}
+  </Box>
+);
+
+/**
+ * OptionButton.Heading
+ * =============================================================================
+ */
+export const OptionButtonHeading = ({
+  className,
+  children,
+  ...rest
+}: TextProps) => (
+  <Text
+    as="div"
+    className={classNames([cn({ e: "heading" }), className])}
+    {...rest}
+  >
+    {children}
+  </Text>
+);
+
+/**
+ * OptionButton.Description
+ * =============================================================================
+ */
+export const OptionButtonDescription = ({
+  className,
+  children,
+  ...rest
+}: TextProps) => (
+  <Text
+    as="div"
+    className={classNames([cn({ e: "description" }), className])}
+    {...rest}
+  >
+    {children}
+  </Text>
+);
+
+/**
+ * OptionButton.Backdrop
+ * =============================================================================
+ */
+export const OptionButtonBackdrop = ({ className, ...rest }: BoxProps) => (
+  <Box className={classNames([cn({ e: "backdrop" }), className])} {...rest} />
+);
+
+/**
+ * OptionButton.SelectedIcon
+ * =============================================================================
+ */
+export const OptionButtonSelectedIcon = ({ className, ...rest }: BoxProps) => (
+  <Box className={classNames([cn({ e: "selected" }), className])} {...rest}>
+    <Icon className={cn({ e: "icon" })} icon={ICON_TYPE.CHECK} />
+    Selected
+  </Box>
+);
+
+/**
+ * OptionButton
+ * =============================================================================
+ */
 interface OptionButtonProps extends HTMLProps<HTMLInputElement> {
   heading: string;
   description?: string;
 }
 
 export const OptionButton = (props: OptionButtonProps) => {
+  const {
+    name: nameFromContext,
+    type: typeFromContext,
+  } = useOptionButtonContext();
   const {
     heading,
     description,
     id: idProp,
+    name: nameProp,
     checked,
     className,
     defaultValue,
+    type: typeProp = "radio",
+    disabled = false,
     ...rest
   } = props;
 
-  const fallbackId = `OptionButton:${useId()}`;
+  const fallbackId = `OptionButton-${useId()}`;
   const id = isUndefined(idProp) ? fallbackId : idProp;
+  const name = isUndefined(nameFromContext) ? nameProp : nameFromContext;
+  const type = isUndefined(typeFromContext) ? typeProp : typeFromContext;
+  const rootClassName = classNames([
+    cn(),
+    disabled && cn({ m: "disabled" }),
+    className,
+  ]);
 
   return (
-    <Box as="label" className={classNames(bem(cn), className)}>
-      <Box className={bem(cn, { e: "content" })}>
-        {heading && (
-          <Text as="div" className={bem(cn, { e: "heading" })}>
-            {heading}
-          </Text>
-        )}
+    <OptionButtonRoot className={rootClassName}>
+      <OptionButtonContent>
+        {heading && <OptionButtonHeading>{heading}</OptionButtonHeading>}
 
         {description && (
-          <Text as="div" className={bem(cn, { e: "description" })}>
-            {description}
-          </Text>
+          <OptionButtonDescription>{description}</OptionButtonDescription>
         )}
-      </Box>
+      </OptionButtonContent>
 
-      <Input
+      <OptionButtonInput
         id={id}
-        type="radio"
+        name={name}
+        type={type}
         checked={checked}
-        className={bem(cn, { e: "input" })}
         defaultValue={defaultValue}
         aria-checked={checked ? "true" : "false"}
+        disabled={disabled}
         {...rest}
       />
 
-      <Box className={bem(cn, { e: "backdrop" })} />
-
-      <Box className={bem(cn, { e: "selected" })}>
-        <Icon className={bem(cn, { e: "icon" })} icon={ICON_TYPE.CHECK} />
-        Selected
-      </Box>
-    </Box>
+      <OptionButtonBackdrop />
+      <OptionButtonSelectedIcon />
+    </OptionButtonRoot>
   );
 };
+
+OptionButton.Group = OptionButtonGroup;
+OptionButton.Root = OptionButtonRoot;
+OptionButton.Input = OptionButtonInput;
+OptionButton.Content = OptionButtonContent;
+OptionButton.Heading = OptionButtonHeading;
+OptionButton.Description = OptionButtonDescription;
+OptionButton.Backdrop = OptionButtonBackdrop;
+OptionButton.SelectedIcon = OptionButtonSelectedIcon;

package/src/components/OptionButton/context.ts

@@ -0,0 +1,22 @@
+import { Context, createContext, useContext } from "react";
+
+type OptionButtonContextType =
+  | { name?: string; type?: "radio" | "checkbox" }
+  | undefined;
+
+const defaultContext: OptionButtonContextType = {
+  name: "",
+  type: "radio",
+};
+
+export const OptionButtonContext: Context<OptionButtonContextType> = createContext<OptionButtonContextType>(
+  defaultContext,
+);
+
+export function useOptionButtonContext() {
+  const context = useContext<typeof defaultContext>(OptionButtonContext) || {
+    ...defaultContext,
+  };
+
+  return context;
+}

package/src/components/OptionButton/index.css

@@ -11,6 +11,10 @@
   flex: 1 1 0;
 }
 
+.ads-OptionButton--disabled {
+  @apply cursor-not-allowed;
+}
+
 .ads-OptionButton-content {
   @apply relative
     z-default;
@@ -32,6 +36,11 @@
     leading-normal;
 }
 
+.ads-OptionButton--disabled .ads-OptionButton-heading,
+.ads-OptionButton--disabled .ads-OptionButton-description {
+  @apply text-gray-600;
+}
+
 .ads-OptionButton-input {
   @apply visually-hidden;
 }
@@ -53,12 +62,15 @@
 
 .ads-OptionButton-input:checked + .ads-OptionButton-backdrop {
   @apply bg-gray-200
-    border-gray-500;
+    border-blue-400;
+}
+
+.ads-OptionButton-input:focus-visible + .ads-OptionButton-backdrop {
+  @apply focus-visible;
 }
 
-.ads-OptionButton-input:active + .ads-OptionButton-backdrop,
-.ads-OptionButton-input:focus + .ads-OptionButton-backdrop {
-  @apply shadow-focus;
+.ads-OptionButton--disabled .ads-OptionButton-backdrop {
+  @apply bg-gray-300;
 }
 
 .ads-OptionButton-selected {

package/src/components/Overlay/Overlay.story.mdx

@@ -0,0 +1,26 @@
+import { Meta, Preview, Props, Story } from "@storybook/addon-docs/blocks";
+import { ComponentHeading } from "../../storybook-components";
+import { Overlay } from "./Overlay";
+
+<Meta title="Components/Popovers/Overlay" component={Overlay} />
+
+<ComponentHeading
+  componentName="Overlay"
+  description=""
+  sourcePath="src/components/Overlay/Overlay.tsx"
+  hideDemosLink
+/>
+
+```jsx
+import { Overlay } from "@conveyorhq/arrow-ds";
+```
+
+<Preview>
+  <Story name="Overlay">
+    <Overlay />
+  </Story>
+</Preview>
+
+## Props
+
+<Props of={Overlay} />

package/src/components/Overlay/Overlay.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import classNames from "classnames";
-import { BoxProps } from "../Box";
-import { Fixed } from "../Fixed";
+import { Box, BoxProps } from "../Box";
 import { bem } from "../../utilities/bem";
 
 const cn = "Overlay";
@@ -9,5 +8,5 @@ const cn = "Overlay";
 export const Overlay = (props: BoxProps) => {
   const { className, ...rest } = props;
 
-  return <Fixed className={classNames(bem(cn), className)} {...rest} />;
+  return <Box className={classNames(bem(cn), className)} {...rest} />;
 };

package/src/components/Overlay/index.css

@@ -3,6 +3,7 @@
     left-0
     bottom-0
     right-0
+    fixed
     h-screen
     w-screen
     bg-screen

package/src/components/Paragraph/Paragraph.story.mdx

@@ -8,8 +8,6 @@ import { Paragraph } from "./Paragraph";
 The paragraph is used to render text with predefined leading and margin.
 Use paragraph when you want to show large blocks of text.
 
-Paragraph renders text with the following defaults: `["text-body", "text-gray-700", "leading-normal", "my-6"]`
-
 ```jsx
 import { Paragraph } from "@conveyorhq/arrow-ds";
 ```
@@ -23,3 +21,19 @@ import { Paragraph } from "@conveyorhq/arrow-ds";
 ## Props
 
 <Props of={Paragraph} />
+
+## Demos
+
+### Changing styles
+
+Paragraph renders text with the following defaults: `["text-body", "text-gray-700", "leading-normal", "my-6"]`.
+
+These can be overridden as needed.
+
+<Preview>
+  <Story name="Paragraph changing styles">
+    <Paragraph className="text-h2 text-blue-400 my-2">
+      This is the Paragraph component with custom styles
+    </Paragraph>
+  </Story>
+</Preview>

package/src/components/Paragraph/Paragraph.tsx

@@ -1,19 +1,11 @@
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { Text, TextProps } from "../Text";
+import { bemHOF } from "../../utilities/bem";
+
+const cn = bemHOF("Paragraph");
 
 export const Paragraph = (props: TextProps) => {
   const { className, ...rest } = props;
-  return (
-    <Text
-      {...rest}
-      className={cn([
-        "text-body",
-        "text-gray-700",
-        "leading-normal",
-        "my-6",
-        className,
-      ])}
-    />
-  );
+  return <Text className={classNames([cn(), className])} {...rest} />;
 };

package/src/components/Paragraph/index.css

@@ -0,0 +1,6 @@
+.ads-Paragraph {
+  @apply text-body
+    text-gray-700
+    leading-normal
+    my-6;
+}

package/src/components/Popover/Popover.tsx

@@ -12,7 +12,7 @@ import {
   Reference as PopperReference,
   Popper,
   PopperArrowProps,
-} from "react-popper-2";
+} from "react-popper";
 import { Box, BoxProps } from "../Box";
 import { Portal } from "../Portal";
 import { bemHOF } from "../../utilities/bem";

package/src/components/Popover/index.css

@@ -20,27 +20,26 @@
 
 .ads-Popover-arrow[data-placement*="bottom"] {
   @apply border-t-0
-    top-0;
+    top-0
+    -mt-2;
 
   border-bottom-color: theme("colors.gray.400");
-  margin-top: theme("margin.-2");
 }
 
 .ads-Popover-arrow[data-placement*="top"] {
+  @apply -mb-2;
   border-top-color: theme("colors.gray.400");
-  margin-bottom: theme("margin.-2");
   top: 100%;
 }
 
 .ads-Popover-arrow[data-placement*="left"] {
+  @apply -mr-2;
   border-left-color: theme("colors.gray.400");
-  margin-right: theme("margin.-2");
   left: 100%;
 }
 
 .ads-Popover-arrow[data-placement*="right"] {
-  @apply border-l-0 left-0;
+  @apply border-l-0 left-0 -ml-2;
 
   border-right-color: theme("colors.gray.400");
-  margin-left: theme("margin.-2");
 }

package/src/components/Radio/index.css

@@ -52,13 +52,10 @@
   content: "";
 }
 
-.ads-Radio-input:active + .ads-Radio-backdrop,
-.ads-Radio-input:focus + .ads-Radio-backdrop {
-  @apply shadow-focus;
-}
+.ads-Radio-input:focus-visible + .ads-Radio-backdrop {
+  @apply focus-visible;
 
-.ads-Radio-input:disabled + .ads-Radio-backdrop {
-  @apply shadow-none;
+  outline-offset: -1px;
 }
 
 .ads-Radio-icon {

package/src/components/Reference/Reference.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, ForwardRefExoticComponent } from "react";
 import classNames from "classnames";
 import { Box, BoxProps } from "../Box";
 import { bem } from "../../utilities/bem";
-import { ICON_STYLE_PREFIX, Icon, ICON_TYPE } from "../Icon";
+import { ICON_STYLE_PREFIX, Icon, IconType } from "../Icon";
 import { STATUS_VARIANT } from "../../types";
 import { Badge, BADGE_SIZE } from "../Badge";
 
@@ -11,7 +11,7 @@ const cn = "Reference";
 export interface ReferenceProps {
   as?: any;
   disabled?: boolean;
-  icon?: ICON_TYPE;
+  icon?: IconType;
   iconPrefix?: ICON_STYLE_PREFIX;
   badgeVariant?: STATUS_VARIANT;
   badgeLabel?: string;

package/src/components/Reference/index.css

@@ -19,16 +19,10 @@
 }
 
 .ads-Reference--isLink:hover,
-.ads-Reference--isLink:active,
-.ads-Reference--isLink:focus {
+.ads-Reference--isLink:active {
   @apply border-gray-500;
 }
 
-.ads-Reference--isLink:focus {
-  @apply outline-none
-    shadow-focus;
-}
-
 .ads-Reference--disabled {
   @apply pointer-events-none
     bg-gray-200

package/src/components/ScrollSpy/ScrollSpy.story.mdx

@@ -0,0 +1,14 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+import { ScrollSpy } from "./ScrollSpy";
+
+<Meta title="Components/Layout/Scroll Spy" component={ScrollSpy} />
+
+# Scroll Spy
+
+ScrollSpy tracks scrolling using IntersectionObserver.
+
+Documenation in progress…
+
+```jsx
+import { ScrollSpy } from "@conveyorhq/arrow-ds";
+```