@conveyorhq/arrow-ds 2.0.0-beta.6 → 2.0.0-beta.7

package/src/components/Markdown/Markdown.story.mdx

@@ -69,3 +69,70 @@ information systems is completed.
     }}
   </Story>
 </Preview>
+
+### Passing in custom renderers
+
+This example shows how you can use the `renderers` prop provided by react-markdown
+to render links to open in a new window. Keep in mind that this will make all
+anchor links open in a new window.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Markdown renderers">
+    {() => {
+      const content = `
+# Hello and welcome
+Go to our website at [Conveyor.com](https://www.conveyor.com/). This link will
+open in a **new window**. There you will find information about us
+and our company.
+`;
+      return (
+        <Markdown
+          renderers={{
+            link: (props) => (
+              <a href={props.href} target="_blank" rel="noopener noreferrer">
+                {props.children}
+              </a>
+            ),
+          }}
+        >
+          {content}
+        </Markdown>
+      );
+    }}
+  </Story>
+</Preview>
+
+### Passing in custom renderers along with rendering plain text
+
+When the `renderPlainText` prop is set to true, the component sets some custom
+renderers internally to strip out headings, emphasized and strong text. This
+example demonstrates how both sets of renders are merged into one object and
+then passed onto react-markdown. Plain text is renderered along with custom
+anchor links.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="Markdown renderers with renderPlainText">
+    {() => {
+      const content = `
+# Hello and welcome to plain text
+Go to our website at [Conveyor.com](https://www.conveyor.com/). This link will
+open in a **new window**. There you will find information about us
+and our company.
+`;
+      return (
+        <Markdown
+          renderPlainText
+          renderers={{
+            link: (props) => (
+              <a href={props.href} target="_blank" rel="noopener noreferrer">
+                {props.children}
+              </a>
+            ),
+          }}
+        >
+          {content}
+        </Markdown>
+      );
+    }}
+  </Story>
+</Preview>

package/src/components/Markdown/Markdown.tsx

@@ -26,9 +26,10 @@ export const Markdown = ({
   escapeHtml = true,
   skipHtml = false,
   renderPlainText = false,
+  renderers,
   ...rest
 }: MarkdownProps) => {
-  const renderers = renderPlainText
+  const plainTextRenderers = renderPlainText
     ? {
         heading: TextRenderer(),
         strong: TextRenderer("span"),
@@ -42,7 +43,7 @@ export const Markdown = ({
       source={children}
       escapeHtml={escapeHtml}
       skipHtml={skipHtml}
-      renderers={renderers}
+      renderers={{ ...plainTextRenderers, ...renderers }}
       {...rest}
     />
   );

package/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -9,7 +9,6 @@ import { useDisclosure } from "../../hooks";
 import { JUSTIFY } from "../../types";
 import { Box } from "../Box";
 import { Flex } from "../Flex";
-import { Fixed } from "../Fixed";
 import { Link } from "../Link";
 import { Markdown } from "../Markdown";
 import { Portal } from "../Portal";
@@ -99,7 +98,7 @@ export const MarkdownEditor = (props: MarkdownEditorProps) => {
     <Portal>
       <FocusLock returnFocus>
         <RemoveScroll>
-          <Fixed className={classNames(bem(cn), showBackdrop && "bg-screen")}>
+          <Flex className={classNames(bem(cn), showBackdrop && "bg-screen")}>
             <Flex className={bem(cn, { e: "popover" })}>
               <Box className="w-1/2">
                 <CodeMirror
@@ -161,7 +160,7 @@ export const MarkdownEditor = (props: MarkdownEditorProps) => {
                 </Flex>
               )}
             </Flex>
-          </Fixed>
+          </Flex>
         </RemoveScroll>
       </FocusLock>
     </Portal>

package/src/components/MarkdownEditor/MarkdownHelp.tsx

@@ -1,11 +1,8 @@
 import React from "react";
 import { bem } from "../../utilities/bem";
 import { Box } from "../Box";
-import { Fixed } from "../Fixed";
 import { Heading } from "../Heading";
 import { Paragraph } from "../Paragraph";
-import { Relative } from "../Relative";
-import { Absolute } from "../Absolute";
 import { CloseButton } from "../CloseButton";
 
 const cn = "MarkdownHelp";
@@ -41,14 +38,14 @@ export const MarkdownHelp = ({
   onClose: () => void;
 }) => {
   return isOpen ? (
-    <Fixed className={bem(cn)}>
-      <Fixed className={bem(cn, { e: "panel" })}>
-        <Relative className={bem(cn, { e: "header" })}>
+    <Box className={bem(cn)}>
+      <Box className={bem(cn, { e: "panel" })}>
+        <Box className={bem(cn, { e: "header" })}>
           <CloseButton
             className={bem(cn, { e: "closeButton" })}
             onClick={onClose}
           />
-        </Relative>
+        </Box>
 
         <Box className={bem(cn, { e: "scrollBox" })}>
           <Heading.H2 className="text-gray-400">Markdown help</Heading.H2>
@@ -128,8 +125,8 @@ export const MarkdownHelp = ({
             ]}
           </CodeExamples>
         </Box>
-      </Fixed>
-      <Absolute className={bem(cn, { e: "cover" })} onClick={onClose} />
-    </Fixed>
+      </Box>
+      <Box className={bem(cn, { e: "cover" })} onClick={onClose} />
+    </Box>
   ) : null;
 };

package/src/components/MarkdownEditor/index.css

@@ -7,7 +7,7 @@
   @apply top-0
     left-0
     z-modal
-    flex
+    fixed
     items-center
     justify-center
     w-screen
@@ -64,6 +64,7 @@
     justify-center
     top-0
     left-0
+    fixed
     z-toast
     w-screen
     h-screen;
@@ -72,6 +73,7 @@
 .ads-MarkdownHelp-panel {
   @apply bg-gray-900
     rounded
+    fixed
     z-default
     w-full
     max-w-lg;
@@ -81,6 +83,7 @@
 
 .ads-MarkdownHelp-header {
   @apply h-10
+    relative
     w-full;
 }
 
@@ -102,6 +105,7 @@
 .ads-MarkdownHelp-cover {
   @apply top-0
     left-0
+    absolute
     w-full
     h-full;
 }

package/src/components/MenuRenderer/MenuRenderer.tsx

@@ -8,7 +8,7 @@ import React, {
 import { useId } from "@reach/auto-id";
 import FocusLock from "react-focus-lock";
 import { usePopper } from "react-popper";
-import { animated, useTransition } from "react-spring";
+import { animated, useTransition } from "@react-spring/web";
 import { easeCubicInOut } from "d3-ease";
 import { useDisclosure, useKeyPress, useOutsideClick } from "../../hooks";
 import { KEY_CODE, PopperPlacement } from "../../types";
@@ -207,7 +207,7 @@ export const MenuRenderer = ({
 
   const PortalComponent = hasPortal ? Portal : Fragment;
 
-  const transitions = useTransition(isOpen, null, {
+  const transitions = useTransition(isOpen, {
     from: TRANSITION_START,
     enter: TRANSITION_END,
     leave: TRANSITION_START,
@@ -220,10 +220,10 @@ export const MenuRenderer = ({
   return (
     <Box className={className} ref={menuElement} {...rest}>
       <Box ref={setReferenceElement}>{trigger(triggerProps, triggerState)}</Box>
-      {transitions.map(
-        ({ item, key, props: transitionProps }) =>
+      {transitions(
+        ({ opacity, transform }, item) =>
           item && (
-            <PortalComponent key={key}>
+            <PortalComponent>
               <MenuContext.Provider value={context}>
                 <Box
                   className={hasPortal ? "z-toast" : "z-menu"}
@@ -233,8 +233,10 @@ export const MenuRenderer = ({
                 >
                   <FocusLock autoFocus={autoFocus}>
                     <animated.div
-                      key={key}
-                      style={transitionProps}
+                      style={{
+                        opacity,
+                        transform,
+                      }}
                       ref={menuListElement}
                     >
                       {typeof children === "function"

package/src/components/Modal/Modal.story.mdx

@@ -1004,3 +1004,29 @@ Show a table in a modal. Set Modal.Body padding to false.
     }}
   </Story>
 </Preview>
+
+### Without a header
+
+Hide the header to create a custom layout.
+
+<Preview>
+  <Story name="Without a header">
+    {() => {
+      const { isOpen, onOpen, onClose } = useDisclosure();
+      return (
+        <Fragment>
+          <Button onClick={onOpen}>Show Modal without a header</Button>
+          <Modal isOpen={isOpen} onClose={onClose} noHeader>
+            <Box className="p-10 relative">
+              <Modal.CloseButton className="absolute top-0 right-0" />
+              <Box>
+                I am not using any of the modal subcomponents. I am a custom
+                layout.
+              </Box>
+            </Box>
+          </Modal>
+        </Fragment>
+      );
+    }}
+  </Story>
+</Preview>

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
@@ -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.ts

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

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

@@ -4,6 +4,8 @@ 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";
 
@@ -28,38 +30,140 @@ 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.
+
+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
 
-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`.
+This example shows how you can create a list of custom checkboxes.
 
 <Preview>
-  <Story name="Within Stack">
-    <Stack spacing={4}>
+  <Story name="Custom implementation">
+    <OptionButton.Group name="iconTypes" type="checkbox" spacing={4}>
+      <OptionButton.Root className="rounded p-3">
+        <OptionButton.Content>
+          <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" />
+        <OptionButton.Backdrop className="bg-white border border-border rounded" />
+      </OptionButton.Root>
+      <OptionButton.Root className="rounded p-3">
+        <OptionButton.Content>
+          <Flex className="items-center gap-x-2">
+            <Icon icon={ICON_TYPE.ENVELOPE} />
+            <Text className="font-medium">Envelope icon</Text>
+          </Flex>
+        </OptionButton.Content>
+        <OptionButton.Input value="envelope" />
+        <OptionButton.Backdrop className="bg-white border border-border rounded" />
+      </OptionButton.Root>
+      <OptionButton.Root className="rounded p-3">
+        <OptionButton.Content>
+          <Flex className="items-center gap-x-2">
+            <Icon icon={ICON_TYPE.PAPERCLIP} />
+            <Text className="font-medium">Paperclip icon</Text>
+          </Flex>
+        </OptionButton.Content>
+        <OptionButton.Input value="paperclip" />
+        <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 `name` prop can be added to `OptionButton.Group` and it will be passed onto each input.
+
+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>
+  <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>
 
@@ -78,26 +182,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}>
@@ -110,9 +215,3 @@ The main use case for the option button is to display multiple within a [`Stack`
     }}
   </Story>
 </Preview>
-
-## All Props
-
-Any valid attribute of `React.HTMLProps<HTMLInputElement>` is available to the option button component.
-
-<Props of={OptionButton} />