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

package/src/components/OptionButton/OptionButton.story.mdx

@@ -1,9 +1,18 @@
-import { Story, Preview, Props, Meta } from "@storybook/addon-docs/blocks";
+import {
+  Story,
+  Preview,
+  Props,
+  Meta,
+  SourceState,
+} from "@storybook/addon-docs/blocks";
+import classNames from "classnames";
 import { OptionButton } from "./OptionButton";
 import { Box } from "../Box";
 import { Button, BUTTON_SIZE } from "../Button";
 import { Modal } from "../Modal";
 import { Stack } from "../Stack";
+import { Flex } from "../Flex";
+import { Icon, ICON_TYPE } from "../Icon";
 import { useDisclosure } from "../../hooks";
 import { JUSTIFY } from "../../types";
 
@@ -17,7 +26,7 @@ The option button component is a fancy radio button used as an option selector.
 import { OptionButton } from "@conveyorhq/arrow-ds";
 ```
 
-<Preview>
+<Preview withSource={SourceState.OPEN}>
   <Story name="OptionButton">
     <OptionButton
       heading="Manual"
@@ -28,44 +37,143 @@ import { OptionButton } from "@conveyorhq/arrow-ds";
 
 ## Props
 
-These are the custom props that extend `React.HTMLProps<HTMLInputElement>`. Full list of props <a href="#all-props">below</a>.
+### OptionButton
+
+Extends `React.HTMLProps<HTMLInputElement>`
 
 <Props of={OptionButton} />
 
+### OptionButton.Group
+
+Extends `StackProps`
+
+<Props of={OptionButton.Group} />
+
+### OptionButton.Root
+
+Extends `React.HTMLProps<HTMLLabelElement>`
+
+### OptionButton.Content
+
+Extends `BoxProps`
+
+### OptionButton.Heading
+
+Extends `TextProps`
+
+### OptionButton.Description
+
+Extends `TextProps`
+
+### OptionButton.Input
+
+Extends `React.HTMLProps<HTMLInputElement>`
+
+### OptionButton.Backdrop
+
+Extends `BoxProps`
+
+### OptionButton.SelectedIcon
+
+Extends `BoxProps`
+
+## Component tree
+
+Each piece of the `OptionButton` component can be used individually to create a
+component with a custom layout. You’ll also be able to control the style of each
+individual element.
+
+The component tree is as follows:
+
+```jsx
+<OptionButton.Root>
+  <OptionButton.Content>
+    <OptionButton.Heading />
+    <OptionButton.Description />
+  </OptionButton.Content>
+  <OptionButton.Input />
+  <OptionButton.Backdrop />
+  <OptionButton.SelectedIcon />
+</OptionButton.Root>
+```
+
+When building a custom implementation, the following components are considered optional, which means they are not necessary for the overall structure of the component. They are also the components you’re likely to disregard if you’re building a custom layout.
+
+- `OptionButton.Heading`
+- `OptionButton.Description`
+- `OptionButton.SelectedIcon`
+
 ## Demos
 
-### Within Stack
+### Building a custom implementation
+
+This example shows how you can create a list of custom checkboxes.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Custom implementation">
+    <OptionButton.Group name="iconTypes" type="checkbox" spacing={4}>
+      {[
+        {
+          icon: ICON_TYPE.CALCULATOR,
+          name: "Calculator",
+        },
+        {
+          icon: ICON_TYPE.ENVELOPE,
+          name: "Envelope",
+        },
+        {
+          icon: ICON_TYPE.PAPERCLIP,
+          name: "Paperclip",
+        },
+      ].map((option) => (
+        <OptionButton.Root key={option.name} className="rounded p-3">
+          <OptionButton.Content>
+            <Flex className="items-center gap-x-2">
+              <Icon icon={option.icon} />
+              <Text className="font-medium">{option.name} icon</Text>
+            </Flex>
+          </OptionButton.Content>
+          <OptionButton.Input value="calculator" disabled={option.disabled} />
+          <OptionButton.Backdrop className="bg-white border border-border rounded" />
+        </OptionButton.Root>
+      ))}
+    </OptionButton.Group>
+  </Story>
+</Preview>
+
+### Within Group
+
+The main use case for the option button is to display multiple within a group. Make sure each option button has a unique `value` but shares the same `name`.
 
-The main use case for the option button is to display multiple within a [`Stack`](/?path=/docs/components-stack--stack) component. Make sure each option button has a unique `value` but shares the same `name`.
+The `name` prop can be added to `OptionButton.Group` and it will be passed onto each input.
 
-<Preview>
-  <Story name="Within Stack">
-    <Stack spacing={4}>
+This example renders each `OptionButton` as a radio button (default), but they can also be made checkboxes by passing `type="checkbox"` to the group or each `OptionButton`.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Within Group">
+    <OptionButton.Group name="template" type="radio" spacing={4}>
       <OptionButton
         heading="Manual"
         description="Don’t create any tickets for me, I’ll make them myself."
-        name="template"
         value="manual"
       />
       <OptionButton
         heading="Basic Recurring"
         description="Create tickets based on a single recurring schedule, without an asset type."
-        name="template"
         value="basic"
       />
       <OptionButton
         heading="Asset Based"
         description="Set a default, then create individual recurring or event-based schedules for any asset."
-        name="template"
         value="asset"
       />
-    </Stack>
+    </OptionButton.Group>
   </Story>
 </Preview>
 
 ### Within Modal
 
-<Preview>
+<Preview withSource={SourceState.OPEN}>
   <Story name="Within Modal">
     {() => {
       const { isOpen, onOpen, onClose } = useDisclosure();
@@ -78,26 +186,27 @@ The main use case for the option button is to display multiple within a [`Stack`
             onClose={onClose}
           >
             <Modal.Body>
-              <Stack spacing={4}>
+              <OptionButton.Group
+                name="template-modal"
+                type="radio"
+                spacing={4}
+              >
                 <OptionButton
                   heading="Manual"
                   description="Don’t create any tickets for me, I’ll make them myself."
-                  name="template"
                   value="manual"
                 />
                 <OptionButton
                   heading="Basic Recurring"
                   description="Create tickets based on a single recurring schedule, without an asset type."
-                  name="template"
                   value="basic"
                 />
                 <OptionButton
                   heading="Asset Based"
                   description="Set a default, then create individual recurring or event-based schedules for any asset."
-                  name="template"
                   value="asset"
                 />
-              </Stack>
+              </OptionButton.Group>
             </Modal.Body>
             <Modal.Footer>
               <Stack justify={JUSTIFY.END}>
@@ -111,8 +220,53 @@ The main use case for the option button is to display multiple within a [`Stack`
   </Story>
 </Preview>
 
-## All Props
+### Disabling an option
 
-Any valid attribute of `React.HTMLProps<HTMLInputElement>` is available to the option button component.
+If you need to disable an option, you can do so by passing `disabled` to
+OptionButton. This will apply different styles to the OptionButton which can’t
+be changed.
 
-<Props of={OptionButton} />
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Disabled">
+    <OptionButton
+      heading="Manual"
+      description="Don’t create any tickets for me, I’ll make them myself."
+      disabled
+    />
+  </Story>
+</Preview>
+
+You can also build your own custom OptionButton by composing each piece and in
+doing so, you’ll be able to set your own styles for the disabled state.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Disabled custom">
+    {() => {
+      const isDisabled = true;
+      return (
+        <OptionButton.Root
+          className={classNames(
+            isDisabled && "cursor-not-allowed",
+            "rounded p-3",
+          )}
+        >
+          <OptionButton.Content
+            className={classNames(isDisabled && "opacity-50")}
+          >
+            <Flex className="items-center gap-x-2">
+              <Icon icon={ICON_TYPE.CALCULATOR} />
+              <Text className="font-medium">Calculator icon</Text>
+            </Flex>
+          </OptionButton.Content>
+          <OptionButton.Input value="calculator" disabled={isDisabled} />
+          <OptionButton.Backdrop
+            className={classNames(
+              isDisabled ? "bg-gray-300" : "bg-white",
+              "border border-border rounded",
+            )}
+          />
+        </OptionButton.Root>
+      );
+    }}
+  </Story>
+</Preview>

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,14 +62,17 @@
 
 .ads-OptionButton-input:checked + .ads-OptionButton-backdrop {
   @apply bg-gray-200
-    border-gray-500;
+    border-blue-400;
 }
 
-.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 {
   @apply items-center
     justify-center

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>