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

package/src/components/OptionButton/OptionButton.tsx

@@ -1,66 +1,254 @@
 import React, { HTMLProps } from "react";
 import classNames from "classnames";
 import { useId } from "@reach/auto-id";
-import { Box } from "../Box";
+import { Box, BoxProps } from "../Box";
 import { Input } from "../Input";
-import { Text } from "../Text";
+import { Text, TextProps } from "../Text";
 import { Icon, ICON_TYPE } from "../Icon";
+import { Stack, StackProps } from "../Stack";
 import { bem } from "../../utilities/bem";
 import isUndefined from "../../utilities/isUndefined";
+import { ORIENTATION } from "../../types";
+import { OptionButtonContext, useOptionButtonContext } from "./context";
 
 const cn = "OptionButton";
 
+/**
+ * OptionButton.Group
+ * =============================================================================
+ */
+export interface OptionButtonGroupProps extends StackProps {
+  /**
+   * Using context, the name prop is passed down to each input within the group.
+   * You may also define `name` on each individual `OptionButton` or
+   * `OptionButton.Input` manually if you choose not to use `OptionButton.Group`.
+   */
+  name?: string;
+  /**
+   * Defines the type of control to render each input as. This value is stored
+   * in the context and passed onto each input. You may also define `type` on
+   * each individual `OptionButton` or `OptionButton.Input` manually if you
+   * choose not to use `OptionButton.Group`.
+   */
+  type?: "radio" | "checkbox";
+}
+
+export const OptionButtonGroup = (props: OptionButtonGroupProps) => {
+  const {
+    name = "",
+    type = "radio",
+    orientation = ORIENTATION.VERTICAL,
+    ...rest
+  } = props;
+
+  return (
+    <OptionButtonContext.Provider
+      value={{
+        name,
+        type,
+      }}
+    >
+      <Stack orientation={orientation} {...rest} />
+    </OptionButtonContext.Provider>
+  );
+};
+
+/**
+ * OptionButton.Root
+ * =============================================================================
+ */
+export type OptionButtonRootProps = HTMLProps<HTMLLabelElement>;
+
+export const OptionButtonRoot = ({
+  children,
+  className,
+  ...rest
+}: OptionButtonRootProps) => {
+  return (
+    // eslint-disable-next-line jsx-a11y/label-has-associated-control
+    <label className={classNames(bem(cn), className)} {...rest}>
+      {children}
+    </label>
+  );
+};
+
+/**
+ * OptionButton.Input
+ * =============================================================================
+ */
+export type OptionButtonInputProps = HTMLProps<HTMLInputElement>;
+
+export const OptionButtonInput = (props: OptionButtonInputProps) => {
+  const {
+    name: nameFromContext,
+    type: typeFromContext,
+  } = useOptionButtonContext();
+  const {
+    id: idProp,
+    name: nameProp,
+    checked,
+    className,
+    defaultValue,
+    type: typeProp = "radio",
+    ...rest
+  } = props;
+
+  const fallbackId = `OptionButton:${useId()}`;
+  const id = isUndefined(idProp) ? fallbackId : idProp;
+  const name = isUndefined(nameFromContext) ? nameProp : nameFromContext;
+  const type = isUndefined(typeFromContext) ? typeProp : typeFromContext;
+
+  return (
+    <Input
+      id={id}
+      name={name}
+      type={type}
+      checked={checked}
+      className={classNames([bem(cn, { e: "input" }), className])}
+      defaultValue={defaultValue}
+      aria-checked={checked ? "true" : "false"}
+      {...rest}
+    />
+  );
+};
+
+/**
+ * OptionButton.Content
+ * =============================================================================
+ */
+export const OptionButtonContent = ({
+  className,
+  children,
+  ...rest
+}: BoxProps) => (
+  <Box className={classNames([bem(cn, { e: "content" }), className])} {...rest}>
+    {children}
+  </Box>
+);
+
+/**
+ * OptionButton.Heading
+ * =============================================================================
+ */
+export const OptionButtonHeading = ({
+  className,
+  children,
+  ...rest
+}: TextProps) => (
+  <Text
+    as="div"
+    className={classNames([bem(cn, { e: "heading" }), className])}
+    {...rest}
+  >
+    {children}
+  </Text>
+);
+
+/**
+ * OptionButton.Description
+ * =============================================================================
+ */
+export const OptionButtonDescription = ({
+  className,
+  children,
+  ...rest
+}: TextProps) => (
+  <Text
+    as="div"
+    className={classNames([bem(cn, { e: "description" }), className])}
+    {...rest}
+  >
+    {children}
+  </Text>
+);
+
+/**
+ * OptionButton.Backdrop
+ * =============================================================================
+ */
+export const OptionButtonBackdrop = ({ className, ...rest }: BoxProps) => (
+  <Box
+    className={classNames([bem(cn, { e: "backdrop" }), className])}
+    {...rest}
+  />
+);
+
+/**
+ * OptionButton.SelectedIcon
+ * =============================================================================
+ */
+export const OptionButtonSelectedIcon = ({ className, ...rest }: BoxProps) => (
+  <Box
+    className={classNames([bem(cn, { e: "selected" }), className])}
+    {...rest}
+  >
+    <Icon className={bem(cn, { e: "icon" })} icon={ICON_TYPE.CHECK} />
+    Selected
+  </Box>
+);
+
+/**
+ * OptionButton
+ * =============================================================================
+ */
 interface OptionButtonProps extends HTMLProps<HTMLInputElement> {
   heading: string;
   description?: string;
 }
 
 export const OptionButton = (props: OptionButtonProps) => {
+  const {
+    name: nameFromContext,
+    type: typeFromContext,
+  } = useOptionButtonContext();
   const {
     heading,
     description,
     id: idProp,
+    name: nameProp,
     checked,
     className,
     defaultValue,
+    type: typeProp = "radio",
     ...rest
   } = props;
 
   const fallbackId = `OptionButton:${useId()}`;
   const id = isUndefined(idProp) ? fallbackId : idProp;
+  const name = isUndefined(nameFromContext) ? nameProp : nameFromContext;
+  const type = isUndefined(typeFromContext) ? typeProp : typeFromContext;
 
   return (
-    <Box as="label" className={classNames(bem(cn), className)}>
-      <Box className={bem(cn, { e: "content" })}>
-        {heading && (
-          <Text as="div" className={bem(cn, { e: "heading" })}>
-            {heading}
-          </Text>
-        )}
+    <OptionButtonRoot className={classNames(bem(cn), className)}>
+      <OptionButtonContent>
+        {heading && <OptionButtonHeading>{heading}</OptionButtonHeading>}
 
         {description && (
-          <Text as="div" className={bem(cn, { e: "description" })}>
-            {description}
-          </Text>
+          <OptionButtonDescription>{description}</OptionButtonDescription>
         )}
-      </Box>
+      </OptionButtonContent>
 
-      <Input
+      <OptionButtonInput
         id={id}
-        type="radio"
+        name={name}
+        type={type}
         checked={checked}
-        className={bem(cn, { e: "input" })}
         defaultValue={defaultValue}
         aria-checked={checked ? "true" : "false"}
         {...rest}
       />
 
-      <Box className={bem(cn, { e: "backdrop" })} />
-
-      <Box className={bem(cn, { e: "selected" })}>
-        <Icon className={bem(cn, { e: "icon" })} icon={ICON_TYPE.CHECK} />
-        Selected
-      </Box>
-    </Box>
+      <OptionButtonBackdrop />
+      <OptionButtonSelectedIcon />
+    </OptionButtonRoot>
   );
 };
+
+OptionButton.Group = OptionButtonGroup;
+OptionButton.Root = OptionButtonRoot;
+OptionButton.Input = OptionButtonInput;
+OptionButton.Content = OptionButtonContent;
+OptionButton.Heading = OptionButtonHeading;
+OptionButton.Description = OptionButtonDescription;
+OptionButton.Backdrop = OptionButtonBackdrop;
+OptionButton.SelectedIcon = OptionButtonSelectedIcon;

package/src/components/OptionButton/context.ts

@@ -0,0 +1,22 @@
+import { Context, createContext, useContext } from "react";
+
+type OptionButtonContextType =
+  | { name?: string; type?: "radio" | "checkbox" }
+  | undefined;
+
+const defaultContext: OptionButtonContextType = {
+  name: "",
+  type: "radio",
+};
+
+export const OptionButtonContext: Context<OptionButtonContextType> = createContext<OptionButtonContextType>(
+  defaultContext,
+);
+
+export function useOptionButtonContext() {
+  const context = useContext<typeof defaultContext>(OptionButtonContext) || {
+    ...defaultContext,
+  };
+
+  return context;
+}

package/src/components/OptionButton/index.css

@@ -53,10 +53,9 @@
 
 .ads-OptionButton-input:checked + .ads-OptionButton-backdrop {
   @apply bg-gray-200
-    border-gray-500;
+    border-blue-400;
 }
 
-.ads-OptionButton-input:active + .ads-OptionButton-backdrop,
 .ads-OptionButton-input:focus + .ads-OptionButton-backdrop {
   @apply shadow-focus;
 }

package/src/components/Overlay/Overlay.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import classNames from "classnames";
-import { BoxProps } from "../Box";
-import { Fixed } from "../Fixed";
+import { Box, BoxProps } from "../Box";
 import { bem } from "../../utilities/bem";
 
 const cn = "Overlay";
@@ -9,5 +8,5 @@ const cn = "Overlay";
 export const Overlay = (props: BoxProps) => {
   const { className, ...rest } = props;
 
-  return <Fixed className={classNames(bem(cn), className)} {...rest} />;
+  return <Box className={classNames(bem(cn), className)} {...rest} />;
 };

package/src/components/Overlay/index.css

@@ -3,6 +3,7 @@
     left-0
     bottom-0
     right-0
+    fixed
     h-screen
     w-screen
     bg-screen

package/src/components/Paragraph/Paragraph.story.mdx

@@ -8,8 +8,6 @@ import { Paragraph } from "./Paragraph";
 The paragraph is used to render text with predefined leading and margin.
 Use paragraph when you want to show large blocks of text.
 
-Paragraph renders text with the following defaults: `["text-body", "text-gray-700", "leading-normal", "my-6"]`
-
 ```jsx
 import { Paragraph } from "@conveyorhq/arrow-ds";
 ```
@@ -23,3 +21,19 @@ import { Paragraph } from "@conveyorhq/arrow-ds";
 ## Props
 
 <Props of={Paragraph} />
+
+## Demos
+
+### Changing styles
+
+Paragraph renders text with the following defaults: `["text-body", "text-gray-700", "leading-normal", "my-6"]`.
+
+These can be overridden as needed.
+
+<Preview>
+  <Story name="Paragraph changing styles">
+    <Paragraph className="text-h2 text-blue-400 my-2">
+      This is the Paragraph component with custom styles
+    </Paragraph>
+  </Story>
+</Preview>

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

@@ -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,
@@ -179,6 +201,7 @@ type ArrowSelectProps = {
   menuInPortal?: boolean;
   menuRef?: Ref<HTMLDivElement>;
   height?: number;
+  optionsMessage?: string;
 };
 
 export type SelectProps = ReactSelectProps & ArrowSelectProps;
@@ -199,6 +222,7 @@ const SelectBase = ({
   menuInPortal = false,
   menuRef,
   components,
+  optionsMessage,
   styles,
   ...rest
 }: SelectBaseProps) => {
@@ -213,6 +237,7 @@ const SelectBase = ({
     menuRef,
     styles,
     components,
+    optionsMessage,
   });
 
   if (rest.type === "async") {