@thecb/components 12.0.0-beta.0 → 12.0.0-beta.2

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.stories.js

@@ -0,0 +1,110 @@
+import React from "react";
+import TermsAndConditionsModal from "./TermsAndConditionsModal";
+
+const TermsContent = () => (
+  <p>
+    By enrolling, you agree to the automatic payment terms. Payments will be
+    processed on the first of each month using your selected payment method. You
+    may cancel at any time by contacting support. See our{" "}
+    <a href="#">Privacy Policy</a> for more details.
+  </p>
+);
+
+const meta = {
+  title: "Molecules/TermsAndConditionsModal",
+  component: TermsAndConditionsModal,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    link: "Terms and Conditions",
+    title: "Terms and Conditions",
+    terms: <TermsContent />,
+    isOpen: false,
+    linkVariant: "p",
+    initialFocusSelector: "[name='Cancel']"
+  },
+  argTypes: {
+    link: {
+      description: "Text displayed for the modal trigger link",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "Terms and Conditions" }
+      }
+    },
+    title: {
+      description: "Title displayed in the modal header",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "Terms & Conditions" }
+      }
+    },
+    isOpen: {
+      description: "Whether the modal is currently open",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    acceptText: {
+      description:
+        "Text for the accept button. If omitted, only a close button is shown.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    linkVariant: {
+      description: "Text size variant for the trigger link",
+      control: "select",
+      options: ["p", "pL", "pS", "pXS", "pXXS", "pXL"],
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "p" }
+      }
+    },
+    initialFocusSelector: {
+      description: "CSS selector for the element that receives initial focus",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const Default = {};
+
+export const SmallVariant = {
+  args: {
+    linkVariant: "pS"
+  }
+};
+
+export const ExtraSmallVariant = {
+  args: {
+    linkVariant: "pXS"
+  }
+};
+
+export const LargeVariant = {
+  args: {
+    linkVariant: "pL"
+  }
+};
+
+export const WithAcceptButton = {
+  args: {
+    acceptText: "I Accept"
+  }
+};
+
+export const CustomLinkText = {
+  args: {
+    link: "Learn More",
+    linkVariant: "pS"
+  }
+};

package/src/components/molecules/toast-notification/Toast.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as ToastStories from './Toast.stories.js';
+
+<Meta of={ToastStories} />
+
+<Title />
+
+The Toast is a fully accessible widget used to notify users of state changes and other important information. The Toast comes with the ability to properly notify users of screen reading devices by using the `screenReaderMessage` and `showScreenReaderMessage` props. By default the message uses the `aria-live` behavior of "polite", which tells the assistive technology to wait for a lull to notify the user, such as when they finish typing or after another sentence is read.
+
+If you are using a toast mesasge to notify users about very important, time-sensitive information, you can change the value of the `ariaLive` prop to "assertive" to force the screen reader message to be read as soon as the toast notification is rendered on the page.
+
+<Controls />
+
+<Story />

package/src/components/molecules/toast-notification/Toast.stories.js

@@ -0,0 +1,183 @@
+import React, { useState } from "react";
+import ToastNotification from "./ToastNotification";
+import { fn } from "@storybook/test";
+import { ButtonWithAction } from "../../atoms";
+import { Box, Stack } from "../../atoms/layouts";
+import { ONAHAU_BLUE } from "../../../constants/colors";
+
+export default {
+  title: "Molecules/Toast",
+  component: ToastNotification,
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  args: {
+    variant: "success",
+    message: "",
+    toastOpen: false,
+    closeToastNotification: fn(),
+    extraStyles: undefined,
+    minWidth: "112px",
+    maxWidth: "350px",
+    height: "56px",
+    childGap: "1rem",
+    backgroundColor: undefined,
+    role: "status",
+    ariaLive: "polite",
+    screenReaderMessage: undefined,
+    showScreenReaderMessage: true
+  },
+  argTypes: {
+    variant: {
+      description: "Type of toast notification, one of success/error.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    message: {
+      description: "Content of the toast notification",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    toastOpen: {
+      description: "Whether the toast is visible",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    closeToastNotification: {
+      description: "Function to run when user closes the toast",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    extraStyles: {
+      description: "Additional styles for toast notification",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    minWidth: {
+      description: "Minimum width of toast notification",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "112px" }
+      }
+    },
+    maxWidth: {
+      description: "Maximum width of toast notification",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "350px" }
+      }
+    },
+    height: {
+      description: "Height of toast notification",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "56px" }
+      }
+    },
+    childGap: {
+      description: "Gap between toast icon, content, and close button",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "1rem" }
+      }
+    },
+    backgroundColor: {
+      description: "Override for background color",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    role: {
+      description: "aria-role for screen reader message",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "status" }
+      }
+    },
+    ariaLive: {
+      description: "aria-live behavior for screen reader message",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "polite" }
+      }
+    },
+    screenReaderMessage: {
+      description: "Content of message to be read to users of screen readers",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    showScreenReaderMessage: {
+      description:
+        "Whether a message for screen reader users should appear when toast is displayed",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: true }
+      }
+    }
+  }
+};
+
+export const SuccessToast = {
+  args: {
+    message: "Account added to profile",
+    screenReaderMessage: "Account added to profile",
+    toastOpen: true
+  }
+};
+
+export const ErrorToast = {
+  args: {
+    variant: "error",
+    message:
+      "Error: payment unsuccessful. Please check your credit card details.",
+    screenReaderMessage:
+      "Payment unsuccessful. Please check your credit card details.",
+    toastOpen: true
+  }
+};
+
+export const CustomToast = {
+  args: {
+    message: "A toast notification can be used for any type of message",
+    screenReaderMessage: "Use toasts for any purpose",
+    backgroundColor: `${ONAHAU_BLUE}`
+  },
+  render: args => {
+    const [toastOpen, setToastOpen] = useState(false);
+
+    return (
+      <Box>
+        <Stack childGap="3rem">
+          <Box>
+            <ButtonWithAction
+              action={() => setToastOpen(!toastOpen)}
+              text="Trigger Toast"
+            />
+          </Box>
+          <Box>
+            <ToastNotification
+              {...args}
+              toastOpen={toastOpen}
+              closeToastNotification={() => setToastOpen(false)}
+            />
+          </Box>
+        </Stack>
+      </Box>
+    );
+  }
+};

package/src/components/molecules/toast-notification/ToastNotification.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef, useEffect } from "react";
 import { Box, Cluster } from "../../atoms/layouts";
 import { Paragraph } from "../../atoms";
 import {
@@ -13,6 +13,7 @@ import {
 } from "../../../constants/colors";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 import { generateShadows } from "../../../util/generateShadows";
+import { SCREEN_READER_ONLY } from "../../../constants/style_constants";
 
 const VARIANTS = {
   SUCCESS: "success",
@@ -30,55 +31,85 @@ const ToastNotification = ({
   height = "56px",
   childGap = "1rem",
   backgroundColor,
-  role = "alert",
+  role = "status",
   ariaLive = "polite",
+  screenReaderMessage,
+  showScreenReaderMessage = true,
   ...rest
-}) => (
-  <Box
-    onClick={closeToastNotification}
-    onKeyDown={e => e.key === "Enter" && closeToastNotification()}
-    background={
-      backgroundColor
-        ? backgroundColor
-        : variant === VARIANTS.SUCCESS
-        ? HINT_GREEN
-        : variant === VARIANTS.ERROR
-        ? ERROR_BACKGROUND_COLOR
-        : WHITE
+}) => {
+  const screenReaderMessageRef = useRef();
+  const LIVEREGION_TRANSITION_DELAY = 1000;
+
+  useEffect(() => {
+    if (showScreenReaderMessage) {
+      const timeout = setTimeout(() => {
+        if (screenReaderMessageRef.current) {
+          screenReaderMessageRef.current.textContent = `${
+            screenReaderMessage ? screenReaderMessage : message ? message : ""
+          }`;
+        }
+      }, LIVEREGION_TRANSITION_DELAY);
+
+      return () => clearTimeout(timeout);
     }
-    minWidth={minWidth}
-    minHeight={height && parseInt(height) < 100 ? height : "100px"}
-    height={height ? height : "auto"}
-    tabIndex={toastOpen ? "-1" : "0"}
-    padding="0rem 1rem"
-    borderRadius="4px"
-    boxShadow={generateShadows().standard.base}
-    extraStyles={`
+  }, [showScreenReaderMessage, screenReaderMessage, message]);
+
+  return (
+    <>
+      <Box
+        onClick={closeToastNotification}
+        onKeyDown={e => e.key === "Enter" && closeToastNotification()}
+        background={
+          backgroundColor
+            ? backgroundColor
+            : variant === VARIANTS.SUCCESS
+            ? HINT_GREEN
+            : variant === VARIANTS.ERROR
+            ? ERROR_BACKGROUND_COLOR
+            : WHITE
+        }
+        minWidth={minWidth}
+        minHeight={height && parseInt(height) < 100 ? height : "100px"}
+        height={height ? height : "auto"}
+        tabIndex={toastOpen ? "-1" : "0"}
+        padding="0rem 1rem"
+        borderRadius="4px"
+        boxShadow={generateShadows().standard.base}
+        extraStyles={`
       display: ${toastOpen ? "block" : "none"};
       position: fixed; bottom: 4rem; left: 4rem;
       ${extraStyles};
       cursor: pointer;
     `}
-    role={role}
-    aria-live={ariaLive}
-    {...rest}
-  >
-    <Cluster align="center" childGap={childGap} justify="space-between">
-      <Cluster align="center" childGap={childGap}>
-        {variant === VARIANTS.SUCCESS && <SuccessfulIconMedium />}
-        {variant === VARIANTS.ERROR && <ErroredIcon />}
-        <Box padding="1rem 0" maxWidth={maxWidth}>
-          <Paragraph
-            weight={FONT_WEIGHT_SEMIBOLD}
-            extraStyles={"word-break: break-word;"}
-          >
-            {message}
-          </Paragraph>
-        </Box>
-      </Cluster>
-      <IconQuitLarge />
-    </Cluster>
-  </Box>
-);
+        {...rest}
+      >
+        <Cluster align="center" childGap={childGap} justify="space-between">
+          <Cluster align="center" childGap={childGap}>
+            {variant === VARIANTS.SUCCESS && <SuccessfulIconMedium />}
+            {variant === VARIANTS.ERROR && <ErroredIcon />}
+            <Box padding="1rem 0" maxWidth={maxWidth}>
+              <Paragraph
+                weight={FONT_WEIGHT_SEMIBOLD}
+                extraStyles={"word-break: break-word;"}
+              >
+                {message}
+              </Paragraph>
+            </Box>
+          </Cluster>
+          <IconQuitLarge />
+        </Cluster>
+      </Box>
+      {showScreenReaderMessage && (
+        <span
+          ref={screenReaderMessageRef}
+          style={SCREEN_READER_ONLY}
+          role={role}
+          aria-live={ariaLive}
+          aria-atomic={true}
+        ></span>
+      )}
+    </>
+  );
+};
 
 export default ToastNotification;