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

package/src/components/Modal/Modal.tsx

@@ -3,12 +3,13 @@ import classNames from "classnames";
 import RoModal, { ModalProps as RoModalProps } from "react-overlays/Modal";
 import { Box, BoxProps } from "../Box";
 import { Flex } from "../Flex";
-import { CloseButton } from "../CloseButton";
+import { CloseButton, CloseButtonProps } from "../CloseButton";
 import { Stack, StackProps } from "../Stack";
 import { bem } from "../../utilities/bem";
 import { Tab } from "../Tab";
 import { Heading } from "../Heading";
 import { Overlay } from "../Overlay";
+import { ModalContext, useModalContext } from "./context";
 
 const cn = "Modal";
 
@@ -93,6 +94,12 @@ export interface ModalProps extends RoModalProps {
    * Whether or not to show the backdrop overlay between the modal and the content it covers.
    */
   disableBackdrop?: boolean;
+  /*
+   * When true, the prop prevents the header from rendering and the
+   * following props will be ignored: `title`, `secondaryTitle`,
+   * `hideCloseButton`. Use when you want a custom layout.
+   */
+  noHeader?: boolean;
 }
 
 export interface ModalBodyProps extends BoxProps {
@@ -124,7 +131,7 @@ export interface ModalFooterMultiStepProps extends BoxProps {
   rightButtonLabel?: string;
 }
 
-const ModalHeader = (props: BoxProps) => {
+export const ModalHeader = (props: BoxProps) => {
   const { className, ...rest } = props;
   return (
     <Flex
@@ -191,7 +198,7 @@ export const ModalFooterMultiStep = ({
         </Box>
       </Flex>
 
-      <Box className="relative">
+      <Box className={bem(cn, { e: "progressDots-container" })}>
         {children}
 
         <Flex className={bem(cn, { e: "progressDots" })}>
@@ -213,6 +220,17 @@ export const ModalFooterMultiStep = ({
   );
 };
 
+export const ModalCloseButton = ({ className, ...rest }: CloseButtonProps) => {
+  const { onClose } = useModalContext();
+  return (
+    <CloseButton
+      className={classNames(bem(cn, { e: "close" }), className)}
+      onClick={onClose}
+      {...rest}
+    />
+  );
+};
+
 export const Modal = (props: ModalProps) => {
   const {
     title,
@@ -227,6 +245,7 @@ export const Modal = (props: ModalProps) => {
     size = MODAL_SIZE.DEFAULT,
     center = false,
     disableBackdrop = false,
+    noHeader = false,
     className,
     style,
     ...rest
@@ -235,57 +254,56 @@ export const Modal = (props: ModalProps) => {
   const showHeader = title || secondaryTitle || !hideCloseButton;
 
   return (
-    <RoModal
-      className={classNames([
-        bem(`${cn}Container`),
-        enableOutsideClick && "pointer-events-none",
-      ])}
-      show={isOpen}
-      onHide={onClose}
-      autoFocus={autoFocus}
-      keyboard={!disableEscClose}
-      renderBackdrop={disableBackdrop ? undefined : (p) => <Overlay {...p} />}
-      {...rest}
-    >
-      <Box
+    <ModalContext.Provider value={{ onClose }}>
+      <RoModal
         className={classNames([
-          bem(cn),
-          bem(cn, { m: size }),
-          center && bem(cn, { m: "center" }),
-          enableOutsideClick && "pointer-events-auto",
-          className,
+          bem(`${cn}Container`),
+          enableOutsideClick && "pointer-events-none",
         ])}
-        style={style}
+        show={isOpen}
+        onHide={onClose}
+        autoFocus={autoFocus}
+        keyboard={!disableEscClose}
+        renderBackdrop={disableBackdrop ? undefined : (p) => <Overlay {...p} />}
+        {...rest}
       >
-        {showHeader && (
-          <ModalHeader>
-            {title && <Heading.H2>{title}</Heading.H2>}
+        <Box
+          className={classNames([
+            bem(cn),
+            bem(cn, { m: size }),
+            center && bem(cn, { m: "center" }),
+            enableOutsideClick && "pointer-events-auto",
+            className,
+          ])}
+          style={style}
+        >
+          {!noHeader && showHeader && (
+            <ModalHeader>
+              {title && <Heading.H2>{title}</Heading.H2>}
 
-            <Stack className="flex-shrink-0" spacing={5}>
-              {secondaryTitle && (
-                <Heading.H5 className="text-gray-600">
-                  {secondaryTitle}
-                </Heading.H5>
-              )}
+              <Stack className="flex-shrink-0" spacing={5}>
+                {secondaryTitle && (
+                  <Heading.H5 className="text-gray-600">
+                    {secondaryTitle}
+                  </Heading.H5>
+                )}
 
-              {!hideCloseButton && (
-                <CloseButton
-                  className={bem(cn, { e: "close" })}
-                  onClick={onClose}
-                />
-              )}
-            </Stack>
-          </ModalHeader>
-        )}
+                {!hideCloseButton && <ModalCloseButton />}
+              </Stack>
+            </ModalHeader>
+          )}
 
-        {children}
-      </Box>
-    </RoModal>
+          {children}
+        </Box>
+      </RoModal>
+    </ModalContext.Provider>
   );
 };
 
 Modal.Root = Modal;
 Modal.Tabs = ModalTabs;
+Modal.Header = ModalHeader;
 Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 Modal.FooterMultiStep = ModalFooterMultiStep;
+Modal.CloseButton = ModalCloseButton;

package/src/components/Modal/context.ts

@@ -0,0 +1,20 @@
+import { Context, createContext, useContext } from "react";
+import { DisclosureProps } from "../../types";
+
+type ModalContextType = Partial<DisclosureProps>;
+
+const defaultContext: ModalContextType = {
+  onClose: () => {},
+};
+
+export const ModalContext: Context<ModalContextType> = createContext<ModalContextType>(
+  defaultContext,
+);
+
+export function useModalContext() {
+  const context = useContext<typeof defaultContext>(ModalContext) || {
+    ...defaultContext,
+  };
+
+  return context;
+}

package/src/components/Modal/index.css

@@ -4,7 +4,8 @@
 }
 
 .ads-ModalContainer {
-  @apply top-0
+  @apply fixed
+    top-0
     left-0
     z-modal
     flex
@@ -90,12 +91,12 @@
 .ads-Modal-body {
   @apply flex
     flex-col
-    justify-between;
+    justify-between
+    overflow-y-auto;
 
   max-height: calc(
     var(--modal-max-height) - theme("height.15") - theme("height.20")
   );
-  overflow-y: auto;
 }
 
 .ads-Modal-body--padded {
@@ -103,6 +104,10 @@
     py-4;
 }
 
+.ads-Modal-progressDots-container {
+  @apply relative;
+}
+
 .ads-Modal-progressDots {
   @apply absolute
     w-full

package/src/components/Modal/index.ts

@@ -1 +1,2 @@
 export * from "./Modal";
+export * from "./context";

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>