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

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/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
@@ -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";