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

package/src/components/Paragraph/Paragraph.tsx

@@ -1,19 +1,11 @@
 import React from "react";
-import cn from "classnames";
+import classNames from "classnames";
 import { Text, TextProps } from "../Text";
+import { bemHOF } from "../../utilities/bem";
+
+const cn = bemHOF("Paragraph");
 
 export const Paragraph = (props: TextProps) => {
   const { className, ...rest } = props;
-  return (
-    <Text
-      {...rest}
-      className={cn([
-        "text-body",
-        "text-gray-700",
-        "leading-normal",
-        "my-6",
-        className,
-      ])}
-    />
-  );
+  return <Text className={classNames([cn(), className])} {...rest} />;
 };

package/src/components/Paragraph/index.css

@@ -0,0 +1,6 @@
+.ads-Paragraph {
+  @apply text-body
+    text-gray-700
+    leading-normal
+    my-6;
+}

package/src/components/Popover/index.css

@@ -20,27 +20,26 @@
 
 .ads-Popover-arrow[data-placement*="bottom"] {
   @apply border-t-0
-    top-0;
+    top-0
+    -mt-2;
 
   border-bottom-color: theme("colors.gray.400");
-  margin-top: theme("margin.-2");
 }
 
 .ads-Popover-arrow[data-placement*="top"] {
+  @apply -mb-2;
   border-top-color: theme("colors.gray.400");
-  margin-bottom: theme("margin.-2");
   top: 100%;
 }
 
 .ads-Popover-arrow[data-placement*="left"] {
+  @apply -mr-2;
   border-left-color: theme("colors.gray.400");
-  margin-right: theme("margin.-2");
   left: 100%;
 }
 
 .ads-Popover-arrow[data-placement*="right"] {
-  @apply border-l-0 left-0;
+  @apply border-l-0 left-0 -ml-2;
 
   border-right-color: theme("colors.gray.400");
-  margin-left: theme("margin.-2");
 }

package/src/components/Reference/Reference.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, ForwardRefExoticComponent } from "react";
 import classNames from "classnames";
 import { Box, BoxProps } from "../Box";
 import { bem } from "../../utilities/bem";
-import { ICON_STYLE_PREFIX, Icon, ICON_TYPE } from "../Icon";
+import { ICON_STYLE_PREFIX, Icon, IconType } from "../Icon";
 import { STATUS_VARIANT } from "../../types";
 import { Badge, BADGE_SIZE } from "../Badge";
 
@@ -11,7 +11,7 @@ const cn = "Reference";
 export interface ReferenceProps {
   as?: any;
   disabled?: boolean;
-  icon?: ICON_TYPE;
+  icon?: IconType;
   iconPrefix?: ICON_STYLE_PREFIX;
   badgeVariant?: STATUS_VARIANT;
   badgeLabel?: string;

package/src/components/Select/Select.story.mdx

@@ -6,7 +6,6 @@ import { CloseButton } from "../CloseButton";
 import { Flex } from "../Flex";
 import { Icon, ICON_TYPE } from "../Icon";
 import { Tag } from "../Tag";
-import { IntegrationLogo } from "../IntegrationLogo";
 import { Reference } from "../Reference";
 import { Select } from "./Select";
 import { SelectPopover } from "./SelectPopover";
@@ -164,6 +163,20 @@ native HTML select element.
   </Story>
 </Preview>
 
+### With an options message
+
+<Preview>
+  <Story name="With an options message">
+    <Container>
+      <Select
+        options={options}
+        optionsMessage="Search feeling cluttered? Manage options in your organization preferences."
+        menuInPortal
+      />
+    </Container>
+  </Story>
+</Preview>
+
 ### Creatable
 
 <Preview>
@@ -465,8 +478,8 @@ See https://react-select.com/async for more info and examples.
 
 ### Select with custom option label and single value
 
-In this example, we want to show a logo next to each option within the menulist.
-However, we don’t want the logo to appear next to the selected value. This can be
+In this example, we want to show an icon next to each option within the menulist.
+However, we don’t want the icon to appear next to the selected value. This can be
 accomplished by using `formatOptionLabel` to create the custom options and then
 override the `SingleValue` component to only display the selected option’s label.
 
@@ -479,16 +492,16 @@ override the `SingleValue` component to only display the selected option’s lab
         isClearable
         options={[
           {
-            label: "AWS",
-            value: "aws",
+            label: "Calculator",
+            value: ICON_TYPE.CALCULATOR,
           },
           {
-            label: "Gitlab",
-            value: "gitlab",
+            label: "Clipboard",
+            value: ICON_TYPE.CLIPBOARD,
           },
           {
-            label: "Okta",
-            value: "okta",
+            label: "Key",
+            value: ICON_TYPE.KEY,
           },
         ]}
         components={{
@@ -500,7 +513,7 @@ override the `SingleValue` component to only display the selected option’s lab
           return (
             <Box className="flex justify-between">
               <Box>{label}</Box>
-              <IntegrationLogo size={12} logo={value} />
+              <Icon icon={value} />
             </Box>
           );
         }}

package/src/components/Select/Select.tsx

@@ -16,7 +16,7 @@ import ReactSelectCreatable, {
 import ReactSelectAsync, {
   Props as ReactSelectAsyncProps,
 } from "react-select/async";
-import { colors, height, zIndex } from "../../tokens";
+import { tokens } from "../../style-dictionary/dist/tokens";
 import { STATUS_VARIANT } from "../../types";
 import { bemHOF, toNumber } from "../../utilities";
 import { BoxProps, Box } from "../Box";
@@ -25,6 +25,7 @@ import { FormGroupContext } from "../FormGroup/FormGroupContext";
 import { Icon, ICON_TYPE } from "../Icon";
 import { CloseButton } from "../CloseButton";
 import { Token } from "../Token";
+import { Text } from "../Text";
 import { adsTheme } from "./theme";
 
 const cn = bemHOF("Select");
@@ -118,13 +119,31 @@ const getClassNames = (
   return classNames([cn(), cn({ m: variant }), classNameProp]);
 };
 
-const getMenuListComponent = (menuRef?: Ref<HTMLDivElement>) => ({
+const getMenuListComponent = ({
+  menuRef,
+  optionsMessage,
+}: {
+  menuRef?: Ref<HTMLDivElement>;
+  optionsMessage?: string;
+}) => ({
   innerRef,
   children,
+  options,
   ...listRest
 }: MenuListComponentProps<any>) => (
-  <ReactSelectComponents.MenuList innerRef={innerRef} {...listRest}>
-    <Box ref={menuRef}>{children}</Box>
+  <ReactSelectComponents.MenuList
+    innerRef={innerRef}
+    options={options}
+    {...listRest}
+  >
+    <Box ref={menuRef}>
+      <Box>{children}</Box>
+      {options.length > 0 && optionsMessage && (
+        <Text className="text-gray-600 text-icon leading-normal px-3 py-2">
+          {optionsMessage}
+        </Text>
+      )}
+    </Box>
   </ReactSelectComponents.MenuList>
 );
 
@@ -133,17 +152,20 @@ const generateHardcodedProps = ({
   menuInPortal,
   menuRef,
   components,
+  optionsMessage,
   styles,
 }: {
   controlHeight: number;
   menuInPortal: boolean;
   menuRef?: Ref<HTMLDivElement>;
   components?: Partial<SelectComponents<any>>;
+  optionsMessage?: string;
   styles?: ReactSelectStyles;
 }) => {
-  const customComponents = menuInPortal
-    ? { ...adsComponents, MenuList: getMenuListComponent(menuRef) }
-    : adsComponents;
+  const customComponents = {
+    ...adsComponents,
+    MenuList: getMenuListComponent({ menuRef, optionsMessage }),
+  };
   return {
     components: { ...customComponents, ...components },
     menuPortalTarget: menuInPortal ? document.body : undefined,
@@ -151,7 +173,7 @@ const generateHardcodedProps = ({
       ...styles,
       menuPortal: (base: CSSProperties): CSSProperties => ({
         ...base,
-        zIndex: zIndex.max,
+        zIndex: tokens.zIndex.max,
       }),
       singleValue: (base: CSSProperties, state: any): CSSProperties => {
         return {
@@ -159,7 +181,7 @@ const generateHardcodedProps = ({
           paddingLeft: state.selectProps.isSearchable ? "2px" : "0",
           color:
             state.selectProps.menuIsOpen && state.selectProps.isSearchable
-              ? colors.gray["600"]
+              ? tokens.color.gray["600"]
               : base.color,
         };
       },
@@ -179,6 +201,7 @@ type ArrowSelectProps = {
   menuInPortal?: boolean;
   menuRef?: Ref<HTMLDivElement>;
   height?: number;
+  optionsMessage?: string;
 };
 
 export type SelectProps = ReactSelectProps & ArrowSelectProps;
@@ -195,10 +218,11 @@ const SelectBase = ({
   variant: variantProp = STATUS_VARIANT.DEFAULT,
   id: idProp,
   className,
-  height: controlHeight = toNumber(height["10"]),
+  height: controlHeight = toNumber(tokens.height["10"]),
   menuInPortal = false,
   menuRef,
   components,
+  optionsMessage,
   styles,
   ...rest
 }: SelectBaseProps) => {
@@ -213,6 +237,7 @@ const SelectBase = ({
     menuRef,
     styles,
     components,
+    optionsMessage,
   });
 
   if (rest.type === "async") {

package/src/components/Select/SelectPopover.tsx

@@ -3,7 +3,7 @@ import classNames from "classnames";
 import { Modifier } from "react-popper";
 import { MenuListComponentProps } from "react-select";
 import FocusLock from "react-focus-lock";
-import { tokens } from "../../tokens";
+import { tokens } from "../../style-dictionary/dist/tokens";
 import { useOutsideClick } from "../../hooks";
 import { Box } from "../Box";
 import { Flex } from "../Flex";
@@ -55,19 +55,19 @@ export const SelectPopover = ({
   const selectStyles = {
     control: (provided: any) => ({
       ...provided,
-      width: `calc(100% - ${tokens.margin[6]})`,
-      margin: tokens.margin[3],
+      width: `calc(100% - ${tokens.spacing[6]})`,
+      margin: tokens.spacing[3],
     }),
     menu: (provided: any) => ({
       ...provided,
       boxShadow: "none !important", // override Arrow classname
       borderRadius: "0 !important", // override Arrow classname
       zIndex: "1 !important", // override Arrow classname
-      backgroundColor: tokens.colors.white,
+      backgroundColor: tokens.color.white,
       position: "relative",
-      marginTop: tokens.margin[3],
+      marginTop: tokens.spacing[3],
       marginBottom: 0,
-      borderTop: `1px solid ${tokens.colors.gray[300]}`,
+      borderTop: `1px solid ${tokens.color.gray[300]}`,
       maxHeight: "184px",
       overflowY: "auto",
     }),

package/src/components/Select/index.ts

@@ -1,2 +1,16 @@
 export * from "./Select";
 export * from "./SelectPopover";
+export { components as ReactSelectComponents } from "react-select";
+export type {
+  MenuProps as ReactSelectMenuProps,
+  GroupProps as ReactSelectGroupProps,
+  InputProps as ReactSelectInputProps,
+  OptionProps as ReactSelectOptionProps,
+  ControlProps as ReactSelectControlProps,
+  IndicatorProps as ReactSelectIndicatorProps,
+  MultiValueProps as ReactSelectMultiValueProps,
+  PlaceholderProps as ReactSelectPlaceholderProps,
+  SingleValueProps as ReactSelectSingleValueProps,
+  ValueContainerProps as ReactSelectValueContainerProps,
+  MenuListComponentProps as ReactSelectMenuListComponentProps,
+} from "react-select";

package/src/components/Select/theme.ts

@@ -1,31 +1,31 @@
 import { Theme } from "react-select";
-import { colors, borderRadius, height, margin } from "../../tokens";
+import { tokens } from "../../style-dictionary/dist/tokens";
 import { toNumber } from "../../utilities/toNumber";
 
 export const adsTheme: Theme = {
-  borderRadius: toNumber(borderRadius.DEFAULT),
+  borderRadius: toNumber(tokens.borderRadius.DEFAULT),
   colors: {
-    danger: colors.red["400"],
-    dangerLight: colors.red["300"],
-    neutral0: colors.white,
-    neutral5: colors.gray["100"],
-    neutral10: colors.gray["100"],
-    neutral20: colors.gray["200"],
-    neutral30: colors.gray["400"],
-    neutral40: colors.gray["500"],
-    neutral50: colors.gray["600"],
-    neutral60: colors.gray["700"],
-    neutral70: colors.gray["800"],
-    neutral80: colors.gray["900"],
-    neutral90: colors.gray["900"],
-    primary: colors.blue["500"],
-    primary25: colors.gray["300"],
-    primary50: colors.gray["300"],
-    primary75: colors.blue["400"],
+    danger: tokens.color.red["400"],
+    dangerLight: tokens.color.red["300"],
+    neutral0: tokens.color.white,
+    neutral5: tokens.color.gray["100"],
+    neutral10: tokens.color.gray["100"],
+    neutral20: tokens.color.gray["200"],
+    neutral30: tokens.color.gray["400"],
+    neutral40: tokens.color.gray["500"],
+    neutral50: tokens.color.gray["600"],
+    neutral60: tokens.color.gray["700"],
+    neutral70: tokens.color.gray["800"],
+    neutral80: tokens.color.gray["900"],
+    neutral90: tokens.color.gray["900"],
+    primary: tokens.color.blue["500"],
+    primary25: tokens.color.gray["300"],
+    primary50: tokens.color.gray["300"],
+    primary75: tokens.color.blue["400"],
   },
   spacing: {
-    baseUnit: toNumber(margin["1"]),
-    controlHeight: toNumber(height["10"]),
-    menuGutter: toNumber(margin["1"]),
+    baseUnit: toNumber(tokens.spacing["1"]),
+    controlHeight: toNumber(tokens.height["10"]),
+    menuGutter: toNumber(tokens.spacing["1"]),
   },
 };

package/src/components/Snackbar/Snackbar.story.mdx

@@ -10,7 +10,7 @@ import { ORIENTATION } from "../../types";
 import { Button } from "../Button";
 import { ICON_TYPE } from "../Icon";
 import { Stack } from "../Stack";
-import { Snackbar, useSnackbar, showSnackbar } from "./Snackbar";
+import { Snackbar, useSnackbar, showSnackbar, useSnackbarContext } from "./";
 
 <Meta title="Components/Feedback/Snackbar" component={Snackbar} />
 
@@ -27,13 +27,25 @@ The Snackbar component doesn’t get called directly. Instead use either
 on-screen. You will need a way to dynamically set the `isVisible` prop in order
 to show and hide the Snackbar on demand.
 
-The Snackbar will appear at the bottom-left of the screen. This is not
-configurable.
+The Snackbar can appear at either the bottom-left or bottom-right of the screen.
 
 ```jsx
 import { useSnackbar, showSnackbar } from "@conveyorhq/arrow-ds";
 ```
 
+export const CustomSnackbar = ({ children }) => {
+  const { onClose } = useSnackbarContext();
+  return (
+    <div
+      className="rounded p-10 bg-gold-200 m-4 leading-normal"
+      onClick={onClose}
+    >
+      <p>{children}</p>
+      <p>Click anywhere to close</p>
+    </div>
+  );
+};
+
 Here is a preview of how the Snackbar could look in its three different states.
 Don’t copy these examples because a Snackbar should be implemented using the
 `useSnackbar` hook, which is detailed below.
@@ -121,7 +133,7 @@ A duration can be used with an action if necessary.
           },
         });
       };
-      return <Button onClick={onClick}>Show Snackbar</Button>;
+      return <Button onClick={onClick}>Show Snackbar with action</Button>;
     }}
   </Story>
 </Preview>
@@ -142,12 +154,12 @@ hide the Snackbar with `useState` and `setTimeout`.
         }, 3000);
       };
       useSnackbar({
-        message: "Ok, here’s your snackbar",
+        message: "Snackbar triggered from a hook",
         isVisible,
       });
       return (
         <Button disabled={isVisible} onClick={onClick}>
-          I’m hungry
+          Use Snackbar
         </Button>
       );
     }}
@@ -201,10 +213,85 @@ happening is done.
   </Story>
 </Preview>
 
-## useSnackbar Props
+## Using a custom component
+
+If you need Snackbar functionality, but would like to use a custom UI, you can
+pass a `ReactNode` to the `component` prop. Note that you will need to handle
+closing of the Snackbar on your own, but that’s made easy using the context
+provider.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="showSnackbar function with a component">
+    {() => {
+      const CustomSnackbar = ({ children }) => {
+        const { onClose } = useSnackbarContext();
+        return (
+          <div
+            className="rounded p-10 bg-gold-200 m-4 leading-normal"
+            onClick={onClose}
+          >
+            <p>{children}</p>
+            <p>Click anywhere to close</p>
+          </div>
+        );
+      };
+      const onClick = () => {
+        showSnackbar({
+          component: (
+            <CustomSnackbar>
+              I am a custom snackbar without a duration
+            </CustomSnackbar>
+          ),
+          position: "bottom-right",
+        });
+      };
+      return <Button onClick={onClick}>Show Custom Snackbar</Button>;
+    }}
+  </Story>
+</Preview>
+
+A custom component can also be used with the `useSnackbar` hook.
 
-<Props of={useSnackbar} />
+<Preview withSource={SourceState.OPEN}>
+  <Story name="useSnackbar hook with a component">
+    {() => {
+      const CustomSnackbar = ({ children }) => {
+        const { onClose } = useSnackbarContext();
+        return (
+          <div
+            className="rounded p-10 bg-gold-200 m-4 leading-normal"
+            onClick={onClose}
+          >
+            <p>{children}</p>
+            <p>Click anywhere to close</p>
+          </div>
+        );
+      };
+      const [isVisible, setVisible] = React.useState(false);
+      useSnackbar({
+        component: (
+          <CustomSnackbar>
+            I am a custom snackbar and will close in 3 seconds
+          </CustomSnackbar>
+        ),
+        position: "bottom-right",
+        isVisible,
+      });
+      const onClick = () => {
+        setVisible(true);
+        setTimeout(() => {
+          setVisible(false);
+        }, 3000);
+      };
+      return (
+        <Button disabled={isVisible} onClick={onClick}>
+          Use Custom Snackbar
+        </Button>
+      );
+    }}
+  </Story>
+</Preview>
 
-## showSnackbar Props
+## API
 
 <Props of={showSnackbar} />