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

package/src/components/Snackbar/Snackbar.tsx

@@ -1,69 +1,46 @@
-import React, { useEffect, useState } from "react";
-import toaster from "toasted-notes";
+import React from "react";
 import classNames from "classnames";
 import { Action } from "../../types";
 import { bemHOF } from "../../utilities/bem";
 import { Box } from "../Box";
 import { CloseButton } from "../CloseButton";
-import { Icon, IconProps, ICON_TYPE } from "../Icon";
+import { Icon, ICON_TYPE } from "../Icon";
 import { Link } from "../Link";
 import { Text } from "../Text";
+import { useSnackbarContext } from "./context";
+import {
+  SnackbarProps,
+  SnackbarRootProps,
+  SnackbarIconProps,
+  SnackbarTextProps,
+} from "./types";
+import { SnackbarProvider } from "./SnackbarProvider";
 
 const cn = bemHOF("Snackbar");
 
-const POSITION = "bottom-left";
-
-interface SharedProps {
-  /**
-   * The message shown in the Snackbar; ideally short and succinct
-   */
-  message: string;
-  /**
-   * Adds an action next to the message
-   */
-  action?: Action;
-  /**
-   * When a loading icon is detected, it will automatically spin.
-   *
-   * Sizing is handled automatically, too.
-   */
-  icon?: ICON_TYPE;
-  /**
-   * The amount of time (in milliseconds) the snackbar appears on-screen. If
-   * undefined, then the Snackbar will stay on-screen indefinitely. An undefined
-   * duration would be used in cases when the Snackbar is used as a loading
-   * message (e.g., an in progress API call).
-   */
-  duration?: number | null;
-  /**
-   * Prevent the close button from rendering. Useful in cases when the Snackbar
-   * is used as a loading message (e.g., an in progress API call).
-   */
-  disableClose?: boolean;
-}
-
-interface ShowSnackbarProps extends SharedProps {
-  /**
-   * Classname to apply to the Snackbar root element
-   */
-  className?: string;
-}
-
-interface SnackbarProps extends ShowSnackbarProps {
-  onClose: () => void;
-  id?: string;
-}
+export const SnackbarRoot = ({
+  children,
+  className,
+  ...rest
+}: SnackbarRootProps) => (
+  <Box className={classNames(cn(), className)} {...rest}>
+    {children}
+  </Box>
+);
 
-interface SnackbarHookProps extends SharedProps {
-  /**
-   * Whether or not the Snackar is visible
-   */
-  isVisible: boolean;
-}
+export const SnackbarIcon = ({ icon }: SnackbarIconProps) => (
+  <Icon
+    icon={icon}
+    spin={icon === ICON_TYPE.SPINNER || icon === ICON_TYPE.CIRCLE_NOTCH}
+    className={cn({ e: "icon" })}
+  />
+);
 
-const hideSnackbar = (id: number) => toaster.close(id, POSITION);
+export const SnackbarText = ({ children }: SnackbarTextProps) => (
+  <Text>{children}</Text>
+);
 
-const SnackbarAction = ({ label, onClick, href, external }: Action) => {
+export const SnackbarAction = ({ label, onClick, href, external }: Action) => {
   const Component = typeof onClick === "function" ? "button" : "a";
   const type = Component === "button" ? "button" : undefined;
 
@@ -81,27 +58,33 @@ const SnackbarAction = ({ label, onClick, href, external }: Action) => {
   );
 };
 
+export const SnackbarCloseButton = () => {
+  const { onClose } = useSnackbarContext();
+
+  return (
+    <CloseButton
+      className={classNames(cn({ e: "dismiss" }))}
+      onClick={onClose}
+    />
+  );
+};
+
 export const Snackbar = ({
   message,
   action,
   icon,
-  id,
   className,
-  onClose,
   disableClose,
+  ...rest
 }: SnackbarProps) => {
-  const spin = icon === ICON_TYPE.SPINNER || icon === ICON_TYPE.CIRCLE_NOTCH;
-  const iconProps: IconProps | undefined = icon
-    ? {
-        icon,
-        spin,
-      }
-    : undefined;
+  const { onClose } = useSnackbarContext();
 
   return (
-    <Box className={classNames(cn(), className)} id={id}>
-      {iconProps && <Icon {...iconProps} className={cn({ e: "icon" })} />}
-      <Text>{message}</Text>
+    <SnackbarRoot className={className} {...rest}>
+      {icon && <SnackbarIcon icon={icon} />}
+
+      {message && <SnackbarText>{message}</SnackbarText>}
+
       {action && action.label && (
         <SnackbarAction
           {...action}
@@ -113,86 +96,14 @@ export const Snackbar = ({
           }}
         />
       )}
-      {!disableClose && (
-        <CloseButton
-          className={classNames(cn({ e: "dismiss" }))}
-          onClick={onClose}
-        />
-      )}
-    </Box>
-  );
-};
 
-export const showSnackbar = ({
-  message,
-  action,
-  icon,
-  duration = null,
-  className,
-  disableClose,
-}: ShowSnackbarProps) =>
-  toaster.notify(
-    ({ onClose, id }: { onClose: () => void; id: number }) => {
-      return (
-        <Snackbar
-          {...{
-            message,
-            onClose,
-            action,
-            icon,
-            className,
-            disableClose,
-            id: `snackbar-component-${id}`,
-          }}
-        />
-      );
-    },
-    {
-      position: POSITION,
-      duration,
-    },
+      {!disableClose && <SnackbarCloseButton />}
+    </SnackbarRoot>
   );
-
-export const useSnackbar = ({
-  message,
-  action,
-  isVisible,
-  icon,
-  duration,
-  disableClose,
-}: SnackbarHookProps) => {
-  const [snackbar, setSnackbar] = useState<{ id: number; position: string }>({
-    id: 0,
-    position: POSITION,
-  });
-  const [wasViewed, setWasViewed] = useState<boolean>(false);
-
-  useEffect(() => {
-    if (isVisible && !wasViewed) {
-      setSnackbar(
-        showSnackbar({
-          message,
-          action,
-          icon,
-          duration,
-          disableClose,
-        }),
-      );
-      setWasViewed(true);
-    }
-
-    if (!isVisible && wasViewed) {
-      hideSnackbar(snackbar.id);
-      setWasViewed(false);
-    }
-  }, [
-    message,
-    action,
-    isVisible,
-    icon,
-    duration,
-    disableClose,
-    snackbar,
-    wasViewed,
-  ]);
 };
+
+Snackbar.Provider = SnackbarProvider;
+Snackbar.Root = SnackbarRoot;
+Snackbar.Text = SnackbarText;
+Snackbar.Action = SnackbarAction;
+Snackbar.CloseButton = SnackbarCloseButton;

package/src/components/Snackbar/SnackbarProvider.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Box } from "../Box";
+import { SnackbarProviderProps } from "./types";
+import { DEFAULT_SNACKBAR_ID } from "./constants";
+import { SnackbarContext } from "./context";
+
+export const SnackbarProvider = ({
+  component,
+  id = DEFAULT_SNACKBAR_ID,
+  onClose,
+  duration,
+  position,
+  ...rest
+}: SnackbarProviderProps) => {
+  const componentId = "snackbar-provider";
+
+  return (
+    <SnackbarContext.Provider
+      value={{
+        id,
+        onClose,
+        duration,
+        position,
+      }}
+    >
+      <Box id={`${componentId}-${id}`} data-component={componentId} {...rest}>
+        {component}
+      </Box>
+    </SnackbarContext.Provider>
+  );
+};

package/src/components/Snackbar/constants.ts

@@ -0,0 +1,2 @@
+export const DEFAULT_SNACKBAR_ID = 0;
+export const DEFAULT_SNACKBAR_POSITION = "bottom-left";

package/src/components/Snackbar/context.ts

@@ -0,0 +1,20 @@
+import { Context, createContext, useContext } from "react";
+import { SnackbarContextProps } from "./types";
+import { DEFAULT_SNACKBAR_ID } from "./constants";
+
+const defaultContext: SnackbarContextProps = {
+  id: DEFAULT_SNACKBAR_ID,
+  onClose: () => {},
+};
+
+export const SnackbarContext: Context<SnackbarContextProps> = createContext<SnackbarContextProps>(
+  defaultContext,
+);
+
+export function useSnackbarContext() {
+  const context = useContext<typeof defaultContext>(SnackbarContext) || {
+    ...defaultContext,
+  };
+
+  return context;
+}

package/src/components/Snackbar/helpers.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import toaster from "toasted-notes";
+import { DEFAULT_SNACKBAR_POSITION } from "./constants";
+import { Snackbar } from "./Snackbar";
+import { SnackbarProvider } from "./SnackbarProvider";
+import {
+  HideSnackbarProps,
+  SnackbarToasterProps,
+  ShowSnackbarProps,
+} from "./types";
+
+export const hideSnackbar = ({
+  id,
+  position = DEFAULT_SNACKBAR_POSITION,
+}: HideSnackbarProps) => toaster.close(id, position);
+
+export const showSnackbar = ({
+  component,
+  message,
+  duration = null,
+  position = DEFAULT_SNACKBAR_POSITION,
+  ...rest
+}: ShowSnackbarProps) => {
+  return toaster.notify(
+    ({ onClose, id }: SnackbarToasterProps) => {
+      return (
+        <SnackbarProvider
+          {...{
+            id,
+            onClose,
+            duration,
+            position,
+            component: message ? (
+              <Snackbar
+                {...{
+                  message,
+                  ...rest,
+                }}
+              />
+            ) : (
+              component
+            ),
+          }}
+        />
+      );
+    },
+    {
+      position,
+      duration,
+    },
+  );
+};

package/src/components/Snackbar/hooks.ts

@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react";
+import { DEFAULT_SNACKBAR_ID, DEFAULT_SNACKBAR_POSITION } from "./constants";
+import { hideSnackbar, showSnackbar } from "./helpers";
+import { SnackbarHookProps, SnackbarStateProps } from "./types";
+
+export const useSnackbar = ({
+  component,
+  message,
+  position,
+  duration,
+  isVisible,
+  ...rest
+}: SnackbarHookProps) => {
+  const [snackbar, setSnackbar] = useState<SnackbarStateProps>({
+    id: DEFAULT_SNACKBAR_ID,
+    position: DEFAULT_SNACKBAR_POSITION,
+  });
+  const [wasViewed, setWasViewed] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (isVisible && !wasViewed) {
+      if (message) {
+        setSnackbar(
+          showSnackbar({
+            message,
+            position,
+            duration,
+            ...rest,
+          }),
+        );
+      } else {
+        setSnackbar(
+          showSnackbar({
+            component,
+            position,
+            duration,
+          }),
+        );
+      }
+      setWasViewed(true);
+    }
+
+    if (!isVisible && wasViewed) {
+      hideSnackbar({ id: snackbar.id, position });
+      setWasViewed(false);
+    }
+  }, [
+    component,
+    message,
+    position,
+    duration,
+    isVisible,
+    snackbar.id,
+    wasViewed,
+    rest,
+  ]);
+};

package/src/components/Snackbar/index.css

@@ -28,15 +28,10 @@
 }
 
 .ads-Snackbar-action:hover,
-.ads-Snackbar-action:active,
-.ads-Snackbar-action:focus {
+.ads-Snackbar-action:active {
   @apply text-blue-200;
 }
 
-.ads-Snackbar-action:focus {
-  @apply shadow-focusBrand;
-}
-
 .ads-Snackbar-dismiss {
   @apply text-gray-400;
 
@@ -46,11 +41,6 @@
 }
 
 .ads-Snackbar-dismiss:hover,
-.ads-Snackbar-dismiss:active,
-.ads-Snackbar-dismiss:focus {
+.ads-Snackbar-dismiss:active {
   @apply text-gray-500;
 }
-
-.ads-Snackbar-dismiss:focus {
-  @apply shadow-focusBrand;
-}

package/src/components/Snackbar/index.ts

@@ -1 +1,7 @@
+export * from "./constants";
+export * from "./context";
+export * from "./helpers";
+export * from "./hooks";
 export * from "./Snackbar";
+export * from "./SnackbarProvider";
+export * from "./types";

package/src/components/Snackbar/types.ts

@@ -0,0 +1,180 @@
+import {
+  Action,
+  RequiredToasterProps,
+  ToasterPositionOptions,
+} from "../../types";
+import { BoxProps } from "../Box";
+import { IconType } from "../Icon";
+
+/**
+ * Redefines RequiredToasterProps for Snackbar’s instance
+ */
+export type SnackbarToasterProps = RequiredToasterProps;
+
+/**
+ * The positioning options are a subset that are supported by Toaster; addtional
+ * options may be added as needed
+ */
+type SnackbarPosition = Extract<
+  ToasterPositionOptions,
+  "bottom-left" | "bottom-right"
+>;
+
+/**
+ * Props that are shared between all implementations of the Snackbar
+ */
+type SnackbarSharedProps = {
+  /**
+   * Position of the snackbar in relation to the browser window
+   */
+  position?: SnackbarPosition;
+  /**
+   * The amount of time (in milliseconds) the snackbar appears on-screen. If
+   * undefined, then the Snackbar will stay on-screen indefinitely. An undefined
+   * duration would be used in cases when the Snackbar is used as a loading
+   * message (e.g., an in progress API call).
+   */
+  duration?: number | null;
+};
+
+/**
+ * Defines the type for a custom Snackbar component
+ */
+type SnackbarWithComponentProps = {
+  /**
+   * Component to render as the Snackbar
+   */
+  component: React.ReactNode;
+  message?: never;
+};
+
+/**
+ * Defines the type for the default Snackbar which requires a message string
+ */
+type SnackbarWithMessageProps = {
+  /**
+   * The message shown in the Snackbar; ideally short and succinct
+   */
+  message: React.ReactNode;
+  component?: never;
+};
+
+/**
+ * Defines the type which determines if a Snackbar is visible
+ */
+type SnackbarIsVisibleProp = {
+  isVisible: boolean;
+};
+
+/**
+ * Additional props for the Snackbar component
+ */
+type SnackbarOtherProps = {
+  /**
+   * Adds an action next to the message
+   */
+  action?: Action;
+  /**
+   * When a loading icon is detected, it will automatically spin.
+   *
+   * Sizing is handled automatically, too.
+   */
+  icon?: IconType;
+  /**
+   * Prevent the close button from rendering. Useful in cases when the Snackbar
+   * is used as a loading message (e.g., an in progress API call).
+   */
+  disableClose?: boolean;
+};
+
+/**
+ * Snackbar component props
+ */
+export type SnackbarProps = Omit<SnackbarWithMessageProps, "component"> &
+  SnackbarOtherProps &
+  SnackbarSharedProps &
+  BoxProps;
+
+/**
+ * Snackbar.Root component props
+ */
+export type SnackbarRootProps = BoxProps;
+
+/**
+ * Snackbar.Icon component props
+ */
+export type SnackbarIconProps = Pick<SnackbarOtherProps, "icon">;
+
+/**
+ * Snackbar.Text component props
+ */
+export type SnackbarTextProps = { children: React.ReactNode };
+
+/**
+ * Snackbar state props
+ */
+export type SnackbarStateProps = Pick<SnackbarToasterProps, "id"> &
+  Pick<SnackbarSharedProps, "position">;
+
+/**
+ * Snackbar context props
+ */
+export type SnackbarContextProps = SnackbarToasterProps & SnackbarSharedProps;
+
+/**
+ * Snackbar provider props
+ */
+export type SnackbarProviderProps = SnackbarToasterProps &
+  SnackbarSharedProps &
+  Omit<SnackbarWithComponentProps, "message">;
+
+/**
+ * Defines the type for showing a Snackbar using the default component, which
+ * requires a message and includes optional other props
+ */
+type ShowSnackbarWithMessageProps = SnackbarWithMessageProps &
+  SnackbarOtherProps &
+  SnackbarSharedProps &
+  BoxProps;
+
+/**
+ * Defines the type for showing a Snackbar with a custom component
+ */
+type ShowSnackbarWithComponentProps = SnackbarWithComponentProps &
+  SnackbarSharedProps;
+
+/**
+ * Defines the type for the showSnackbar helper
+ */
+export type ShowSnackbarProps =
+  | ShowSnackbarWithMessageProps
+  | ShowSnackbarWithComponentProps;
+
+/**
+ * Redefines SnackbarStateProps for the hideSnackbar helper
+ */
+export type HideSnackbarProps = SnackbarStateProps;
+
+/**
+ * Defines the type for the hook to show a Snackbar using the default component,
+ * which requires a message and includes optional other props
+ */
+type SnackbarWithMessageHookProps = SnackbarWithMessageProps &
+  SnackbarOtherProps &
+  SnackbarSharedProps &
+  SnackbarIsVisibleProp &
+  BoxProps;
+
+/**
+ * Defines the type for the hook to showi a Snackbar with a custom component
+ */
+type SnackbarWithComponentHookProps = SnackbarWithComponentProps &
+  SnackbarSharedProps &
+  SnackbarIsVisibleProp;
+
+/**
+ * Defines the type for the useSnackbar hook
+ */
+export type SnackbarHookProps =
+  | SnackbarWithMessageHookProps
+  | SnackbarWithComponentHookProps;

package/src/components/SpeechBubble/SpeechBubble.story.mdx

@@ -0,0 +1,76 @@
+import {
+  Meta,
+  Preview,
+  Props,
+  Story,
+  SourceState,
+} from "@storybook/addon-docs/blocks";
+import { Stack, ORIENTATION } from "../..";
+import { ComponentHeading } from "../../storybook-components";
+import { SpeechBubble } from "./SpeechBubble";
+
+export const placementOptions = [
+  "top-start",
+  "top-end",
+  "bottom-start",
+  "bottom-end",
+];
+
+<Meta title="Components/Data/Speech Bubble" component={SpeechBubble} />
+
+<ComponentHeading
+  componentName="Speech Bubble"
+  description=""
+  sourcePath="src/components/SpeechBubble/SpeechBubble.tsx"
+/>
+
+Displays text in a box styled to look like a speech bubble. Ideally used for
+comments or quotes. It should not be used for general text.
+
+```jsx
+import { SpeechBubble } from "@conveyorhq/arrow-ds";
+```
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="SpeechBubble">
+    <SpeechBubble>This is the SpeechBubble component</SpeechBubble>
+  </Story>
+</Preview>
+
+## Props
+
+<Props of={SpeechBubble} />
+
+## Demos
+
+### Setting the placement of the arrow
+
+Each speech bubble can have its arrow positioned on one of the corners. If
+placement is not set explicitly, then the arrow will be positioned top-left.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="SpeechBubble placement">
+    <Stack className="w-full" orientation={ORIENTATION.VERTICAL} spacing={8}>
+      {placementOptions.map((placement) => (
+        <SpeechBubble placement={placement} key={placement}>
+          Placement: {placement}
+        </SpeechBubble>
+      ))}
+    </Stack>
+  </Story>
+</Preview>
+
+### Using custom styles
+
+An example to show how the styles of the speech bubble can be changed.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="SpeechBubble styles">
+    <SpeechBubble
+      className="w-56 bg-caution p-4 text-h4 text-black"
+      placement="top-start"
+    >
+      Styles are different
+    </SpeechBubble>
+  </Story>
+</Preview>