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

package/src/components/Loading/Loading.story.mdx

@@ -1,4 +1,10 @@
-import { Meta, Preview, Story } from "@storybook/addon-docs/blocks";
+import {
+  Meta,
+  Preview,
+  Story,
+  SourceState,
+  Props,
+} from "@storybook/addon-docs/blocks";
 import { Flex } from "../Flex";
 import { Text } from "../Text";
 import { Loading } from "./Loading";
@@ -17,16 +23,17 @@ Loading provides a loading animation.
 import { Loading } from "@conveyorhq/arrow-ds";
 ```
 
-<Preview>
+<Preview withSource={SourceState.OPEN}>
   <Story name="Loading">
     <Loading />
   </Story>
 </Preview>
 
-## Custom Props
+## Props
 
-There are no custom props for this component. The props extend
-[`BoxProps`](/?path=/docs/components-box--box#all-props).
+Inherits props of [ConveyorLogo](/docs/components-logos-conveyor-logo--logo).
+
+<Props of={Loading} />
 
 ## Demos
 
@@ -35,7 +42,7 @@ There are no custom props for this component. The props extend
 This example shows how you can center the loader in both directions within a
 larger container using flexbox.
 
-<Preview>
+<Preview withSource={SourceState.OPEN}>
   <Story name="Loading centering demo with flexbox">
     <ExampleContainer>
       <Flex className="w-full h-full items-center justify-center">
@@ -48,7 +55,7 @@ larger container using flexbox.
 If you don’t need to center the loading component vertically, you can use margin
 to center it horizontally.
 
-<Preview>
+<Preview withSource={SourceState.OPEN}>
   <Story name="Loading centering demo">
     <ExampleContainer>
       <Loading className="mx-auto" />
@@ -60,7 +67,7 @@ to center it horizontally.
 
 This example shows how you can add text above the loader while centering both.
 
-<Preview>
+<Preview withSource={SourceState.OPEN}>
   <Story name="Loading with text">
     <ExampleContainer>
       <Flex className="w-full h-full items-center justify-center flex-col">
@@ -78,7 +85,7 @@ This example shows how you can add text above the loader while centering both.
 This example shows how you can change the color of the loader when using on a
 dark background.
 
-<Preview>
+<Preview withSource={SourceState.OPEN}>
   <Story name="Loading on a dark background">
     <ExampleContainer>
       <Flex className="w-full h-full items-center justify-center flex-col bg-gray-900">

package/src/components/Loading/Loading.tsx

@@ -1,17 +1,26 @@
 import React from "react";
 import classNames from "classnames";
-import { Box, BoxProps } from "../Box";
 import { bem } from "../../utilities/bem";
+import { THEME } from "../../types";
+import { ConveyorLogo, ConveyorLogoProps } from "../ConveyorLogo";
 
 const cn = "Loading";
 
-export const Loading = ({ className, ...rest }: BoxProps) => {
+export type LoadingProps = Omit<ConveyorLogoProps, "variant">;
+
+export const Loading = ({
+  theme = THEME.BRAND,
+  height = 40,
+  className,
+  ...rest
+}: LoadingProps) => {
   return (
-    <Box className={classNames(bem(cn), className)} {...rest}>
-      <Box />
-      <Box />
-      <Box />
-      <Box />
-    </Box>
+    <ConveyorLogo
+      className={classNames(bem(cn), className)}
+      variant="icon"
+      height={height}
+      theme={theme}
+      {...rest}
+    />
   );
 };

package/src/components/Loading/index.css

@@ -1,69 +1,3 @@
 .ads-Loading {
-  @apply relative
-    w-10
-    h-10
-    text-gray-800;
-}
-
-.ads-Loading > div {
-  @apply float-left
-    relative;
-
-  width: 50%;
-  height: 50%;
-}
-
-.ads-Loading > div::before {
-  @apply absolute
-    top-0
-    left-0
-    w-full
-    h-full;
-
-  animation: fold 2.4s infinite linear both;
-  background-color: currentColor;
-  content: "";
-  transform-origin: 100% 100%;
-}
-
-.ads-Loading > div:nth-child(2) {
-  transform: rotateZ(90deg);
-}
-
-.ads-Loading > div:nth-child(4) {
-  transform: rotateZ(180deg);
-}
-
-.ads-Loading > div:nth-child(3) {
-  transform: rotateZ(270deg);
-}
-
-.ads-Loading > div:nth-child(2)::before {
-  animation-delay: 0.3s;
-}
-
-.ads-Loading > div:nth-child(4)::before {
-  animation-delay: 0.6s;
-}
-
-.ads-Loading > div:nth-child(3)::before {
-  animation-delay: 0.9s;
-}
-
-@keyframes fold {
-  0%,
-  10% {
-    transform: perspective(140px) rotateX(-180deg);
-    opacity: 0;
-  }
-  25%,
-  75% {
-    transform: perspective(140px) rotateX(0deg);
-    opacity: 1;
-  }
-  90%,
-  100% {
-    transform: perspective(140px) rotateY(180deg);
-    opacity: 0;
-  }
+  animation: spin 1.8s infinite linear both;
 }

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

@@ -1,6 +1,7 @@
 import React, { ReactNode } from "react";
 import classNames from "classnames";
 import ReactMarkdown, { ReactMarkdownProps } from "react-markdown";
+import remarkBreaks from "remark-breaks";
 import { bem } from "../../utilities/bem";
 import { Text } from "../Text";
 
@@ -26,9 +27,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 +44,8 @@ export const Markdown = ({
       source={children}
       escapeHtml={escapeHtml}
       skipHtml={skipHtml}
-      renderers={renderers}
+      renderers={{ ...plainTextRenderers, ...renderers }}
+      plugins={[remarkBreaks]}
       {...rest}
     />
   );

package/src/components/Markdown/index.css

@@ -1,7 +1,11 @@
 .ads-Markdown {
   @apply text-body
     text-gray-800
-    leading-normal;
+    leading-normal
+    flex
+    flex-col
+    w-full
+    gap-y-6;
 }
 
 .ads-Markdown a {
@@ -17,23 +21,17 @@
 }
 
 .ads-Markdown a:hover,
-.ads-Markdown a:active,
-.ads-Markdown a:focus {
+.ads-Markdown a:active {
   @apply text-blue-500;
 }
 
-.ads-Markdown a:focus {
-  @apply outline-none
-    shadow-focus;
-}
-
 .ads-Markdown h1,
 .ads-Markdown h2,
 .ads-Markdown h3,
 .ads-Markdown h4,
 .ads-Markdown h5,
 .ads-Markdown h6 {
-  @apply font-medium mb-6;
+  @apply font-medium;
 }
 
 .ads-Markdown h1 {
@@ -66,8 +64,7 @@
 .ads-Markdown blockquote,
 .ads-Markdown hr,
 .ads-Markdown pre {
-  @apply mb-6
-    mt-0;
+  @apply my-0;
 }
 
 .ads-Markdown ul,

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/Menu/index.css

@@ -31,23 +31,19 @@
 
 .ads-Menu-item:hover,
 .ads-Menu-item:active,
-.ads-Menu-item:focus,
 .ads-Menu-item--isHighlighted {
   @apply bg-gray-200
     text-gray-800;
 }
 
 .ads-Menu-item:focus {
-  @apply outline-none
-    shadow-focus
-    relative
+  @apply relative
     z-default;
 }
 
 .ads-Menu-item--isSelected,
 .ads-Menu-item--isSelected:hover,
-.ads-Menu-item--isSelected:active,
-.ads-Menu-item--isSelected:focus {
+.ads-Menu-item--isSelected:active {
   @apply bg-gray-400
     text-gray-800;
 }

package/src/components/MenuRenderer/MenuRenderer.story.mdx

@@ -32,7 +32,7 @@ import { MenuRenderer } from "@conveyorhq/arrow-ds";
             {["Item one", "Item two"].map((item) => (
               <Box
                 key={item}
-                className="px-4 py-3 rounded-sm focus:outline-none focus:shadow-focus"
+                className="px-4 py-3 rounded-sm"
                 onClick={() => {
                   console.log(item);
                   if (typeof onClose === "function") {

package/src/components/MenuRenderer/MenuRenderer.tsx

@@ -7,7 +7,7 @@ import React, {
 } from "react";
 import { useId } from "@reach/auto-id";
 import FocusLock from "react-focus-lock";
-import { usePopper } from "react-popper-2";
+import { usePopper } from "react-popper";
 import { animated, useTransition } from "react-spring";
 import { easeCubicInOut } from "d3-ease";
 import { useDisclosure, useKeyPress, useOutsideClick } from "../../hooks";

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

@@ -1004,3 +1004,86 @@ 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>
+
+### Dynamically controlling disableEscClose prop
+
+There are times when you might want to use <kbd>escape</kbd> to control a
+component inside of a modal. Previously, you would need to set `disableEscClose`
+to false in order to preserve <kbd>escape</kbd> for the component instead of
+closing the modal.
+
+Here’s an example showing a Select component inside of a modal and how you can
+control both the Select and Modal with <kbd>escape</kbd>.
+
+To do so, we need to track the open state of the select. Then we can pass that
+state variable to the `disableEscClose` prop.
+
+When the select menu is open, the first <kbd>escape</kbd> keypress closes the
+select menu. The second <kbd>escape</kbd> keypress closes the modal.
+
+<Preview>
+  <Story name="Dynamically controlling disableEscClose prop">
+    {() => {
+      const { isOpen, onOpen, onClose } = useDisclosure();
+      const [isSelectOpen, setIsSelectOpen] = React.useState(false);
+      return (
+        <Fragment>
+          <Button onClick={onOpen}>Show Modal</Button>
+          <Modal
+            title="Modal component"
+            isOpen={isOpen}
+            onClose={onClose}
+            disableEscClose={isSelectOpen}
+          >
+            <Modal.Body>
+              <Box style={{ height: "400px" }}>
+                <Select
+                  autoFocus
+                  placeholder="Favorite ice cream?"
+                  options={[
+                    { value: "chocolate", label: "Chocolate" },
+                    { value: "strawberry", label: "Strawberry" },
+                    { value: "vanilla", label: "Vanilla" },
+                  ]}
+                  onMenuOpen={() => {
+                    setIsSelectOpen(true);
+                  }}
+                  onMenuClose={() => {
+                    setIsSelectOpen(false);
+                  }}
+                  menuInPortal
+                />
+              </Box>
+            </Modal.Body>
+          </Modal>
+        </Fragment>
+      );
+    }}
+  </Story>
+</Preview>