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

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@thecb/components",
-  "version": "10.7.2-beta.0",
+  "version": "12.0.0-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
   "module": "dist/index.esm.js",
   "source": "src/index.js",
   "scripts": {
-    "storybook": "start-storybook",
-    "build": "rollup -cm"
+    "storybook": "storybook dev -p 6006",
+    "build": "rollup -cm",
+    "build-storybook": "storybook build"
   },
   "repository": {
     "type": "git",
@@ -30,15 +31,19 @@
     "@babel/preset-env": "^7.6.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.6.2",
+    "@chromatic-com/storybook": "^1.4.0",
     "@rollup/plugin-json": "^4.0.3",
-    "@storybook/addon-a11y": "6.4.22",
-    "@storybook/addon-actions": "^6.4.22",
-    "@storybook/addon-console": "^1.2.3",
-    "@storybook/addon-docs": "^6.4.22",
-    "@storybook/addon-knobs": "^5.3.14",
-    "@storybook/addon-storysource": "^6.4.22",
-    "@storybook/addon-viewport": "^6.4.22",
-    "@storybook/react": "^6.4.22",
+    "@storybook/addon-essentials": "^8.1.1",
+    "@storybook/addon-interactions": "^8.1.1",
+    "@storybook/addon-links": "^8.1.1",
+    "@storybook/addon-mdx-gfm": "^8.1.1",
+    "@storybook/addon-onboarding": "^8.1.1",
+    "@storybook/addon-themes": "^8.1.3",
+    "@storybook/blocks": "^8.1.1",
+    "@storybook/react": "^8.1.1",
+    "@storybook/react-vite": "^8.1.1",
+    "@storybook/test": "^8.1.1",
+    "@vitejs/plugin-react": "^4.2.1",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.1.0",
     "babel-preset-env": "^1.7.0",
@@ -48,6 +53,7 @@
     "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-storybook": "^0.8.0",
     "history": "^5.0.0",
     "husky": "^4.2.3",
     "prettier": "^1.19.1",
@@ -63,10 +69,11 @@
     "rollup-plugin-node-resolve": "^5.1.0",
     "rollup-plugin-ts": "^3.0.2",
     "rollup-plugin-visualizer": "^4.0.4",
-    "storybook": "^6.4.22",
+    "storybook": "^8.1.1",
     "styled-components": "^5.3.5",
     "styled-theming": "^2.2.0",
-    "typescript": "^4.8.2"
+    "typescript": "^4.8.2",
+    "vite": "^5.2.11"
   },
   "peerDependencies": {
     "react": "^16.13.1",
@@ -82,6 +89,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.15.4",
+    "@types/styled-components": "^5.1.34",
     "core-js": "^3.22.5",
     "formatted-input": "^1.0.0",
     "framer-motion": "^1.11.0",

package/src/components/atoms/alert/Alert.js

@@ -73,16 +73,7 @@ const Alert = ({
           </Box>
           <Cluster justify="flex-end" align="flex-start">
             {showQuitLink && (
-              <Box
-                padding="0"
-                minHeight="100%"
-                onClick={onLinkClick}
-                onKeyDown={e => e.key === "Enter" && onLinkClick()}
-                role="button"
-                tabIndex={0}
-                aria-label={`Close Alert: ${heading}`}
-                extraStyles="cursor: pointer;"
-              >
+              <Box padding="0" minHeight="100%" onClick={onLinkClick}>
                 <IconQuit />
               </Box>
             )}

package/src/components/atoms/button-with-action/ButtonWithAction.js

@@ -82,12 +82,16 @@ const ButtonWithAction = forwardRef(
     ref
   ) => {
     const themeContext = useContext(ThemeContext);
+    console.log("theme context is", themeContext);
+    console.log("fallback values are", fallbackValues);
+    console.log("variant is", variant);
     const themeValues = createThemeValues(
       themeContext,
       fallbackValues,
       "Button",
       variant
     );
+    console.log("theme values are", themeValues);
     const { isMobile } = themeContext;
 
     const hoverStyles = `

package/src/components/atoms/button-with-action/ButtonWithAction.oldstories.js

@@ -0,0 +1,56 @@
+import React, { Fragment, useState } from "react";
+import { text, select, boolean } from "@storybook/addon-knobs";
+import { Box } from "../layouts";
+import ButtonWithAction from "./ButtonWithAction";
+import page from "../../../../.storybook/page";
+
+const variantsLabel = "variant";
+const variants = {
+  primary: "primary",
+  secondary: "secondary",
+  back: "back",
+  smallPrimary: "smallPrimary",
+  smallSecondary: "smallSecondary",
+  ghost: "ghost",
+  smallGhost: "smallGhost",
+  tertiary: "tertiary",
+  danger: "danger",
+  dangerSecondary: "dangerSecondary",
+  whiteSecondary: "whiteSecondary",
+  whitePrimary: "whitePrimary",
+  None: undefined
+};
+const defaultValue = "primary";
+const groupId = "props";
+
+const buttonHandler = () => window.alert("Button click!");
+
+export const buttonWithAction = () => (
+  <Fragment>
+    {/* Uncomment to view buttons on a dark background */}
+    {/* <Box extraStyles="background-color: #000;">
+      <ButtonWithAction
+        variant={select(variantsLabel, variants, defaultValue, groupId)}
+        disabled={boolean("disabled", false, "props")}
+        text={text("text", "button", "props")}
+        isLoading={boolean("isLoading", false, "props")}
+        action={text("action", buttonHandler, "props")}
+      />
+    </Box> */}
+    <Box extraStyles="background-color: #fff;">
+      <ButtonWithAction
+        variant={select(variantsLabel, variants, defaultValue, groupId)}
+        disabled={boolean("disabled", false, "props")}
+        text={text("text", "button", "props")}
+        isLoading={boolean("isLoading", false, "props")}
+        action={text("action", buttonHandler, "props")}
+      />
+    </Box>
+  </Fragment>
+);
+
+const story = page({
+  title: "Components|Atoms/ButtonWithAction",
+  Component: ButtonWithAction
+});
+export default story;

package/src/components/atoms/button-with-action/ButtonWithAction.stories.js

@@ -1,56 +1,110 @@
-import React, { Fragment, useState } from "react";
-import { text, select, boolean } from "@storybook/addon-knobs";
-import { Box } from "../layouts";
+import { Button } from "../../../stories/Button";
 import ButtonWithAction from "./ButtonWithAction";
-import page from "../../../../.storybook/page";
-
-const variantsLabel = "variant";
-const variants = {
-  primary: "primary",
-  secondary: "secondary",
-  back: "back",
-  smallPrimary: "smallPrimary",
-  smallSecondary: "smallSecondary",
-  ghost: "ghost",
-  smallGhost: "smallGhost",
-  tertiary: "tertiary",
-  danger: "danger",
-  dangerSecondary: "dangerSecondary",
-  whiteSecondary: "whiteSecondary",
-  whitePrimary: "whitePrimary",
-  None: undefined
-};
-const defaultValue = "primary";
-const groupId = "props";
-
-const buttonHandler = () => window.alert("Button click!");
-
-export const buttonWithAction = () => (
-  <Fragment>
-    {/* Uncomment to view buttons on a dark background */}
-    {/* <Box extraStyles="background-color: #000;">
-      <ButtonWithAction
-        variant={select(variantsLabel, variants, defaultValue, groupId)}
-        disabled={boolean("disabled", false, "props")}
-        text={text("text", "button", "props")}
-        isLoading={boolean("isLoading", false, "props")}
-        action={text("action", buttonHandler, "props")}
-      />
-    </Box> */}
-    <Box extraStyles="background-color: #fff;">
-      <ButtonWithAction
-        variant={select(variantsLabel, variants, defaultValue, groupId)}
-        disabled={boolean("disabled", false, "props")}
-        text={text("text", "button", "props")}
-        isLoading={boolean("isLoading", false, "props")}
-        action={text("action", buttonHandler, "props")}
-      />
-    </Box>
-  </Fragment>
-);
-
-const story = page({
-  title: "Components|Atoms/ButtonWithAction",
-  Component: ButtonWithAction
-});
-export default story;
+import { fn } from "@storybook/test";
+
+const meta = {
+  title: "Atoms/ButtonWithAction",
+  component: ButtonWithAction,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  args: {
+    action: fn(),
+    dataQa: null,
+    textExtraStyles: "",
+    extraStyles: "",
+    extraDisabledStyles: ""
+  }
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    variant: "primary",
+    text: "Pay Now"
+  }
+};
+
+export const Secondary = {
+  args: {
+    ...Primary.args,
+    variant: "secondary"
+  }
+};
+
+export const Tertiary = {
+  args: {
+    ...Primary.args,
+    variant: "tertiary"
+  }
+};
+
+export const Back = {
+  args: {
+    ...Primary.args,
+    variant: "back"
+  }
+};
+
+export const Danger = {
+  args: {
+    ...Primary.args,
+    variant: "danger"
+  }
+};
+
+export const Ghost = {
+  args: {
+    ...Primary.args,
+    variant: "ghost"
+  }
+};
+
+export const LoadingPrimary = {
+  args: {
+    ...Primary.args,
+    isLoading: true
+  }
+};
+
+export const DisabledPrimary = {
+  args: {
+    ...Primary.args,
+    disabled: true
+  }
+};
+
+export const SmallGhost = {
+  args: {
+    ...Primary.args,
+    variant: "smallGhost"
+  }
+};
+
+export const SmallPrimary = {
+  args: {
+    ...Primary.args,
+    variant: "smallPrimary"
+  }
+};
+
+export const SmallSecondary = {
+  args: {
+    ...Primary.args,
+    variant: "smallSecondary"
+  }
+};
+
+export const WhitePrimary = {
+  args: {
+    ...Primary.args,
+    variant: "whitePrimary"
+  }
+};
+
+export const WhiteSecondary = {
+  ...Primary.args,
+  variant: "whiteSecondary"
+};

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

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from "react";
+import React from "react";
 import { Box, Cluster } from "../../atoms/layouts";
 import { Paragraph } from "../../atoms";
 import {
@@ -13,7 +13,6 @@ 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",
@@ -31,85 +30,55 @@ const ToastNotification = ({
   height = "56px",
   childGap = "1rem",
   backgroundColor,
-  role = "log",
+  role = "alert",
   ariaLive = "polite",
-  screenReaderMessage,
-  showScreenReaderMessage = true,
   ...rest
-}) => {
-  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);
+}) => (
+  <Box
+    onClick={closeToastNotification}
+    onKeyDown={e => e.key === "Enter" && closeToastNotification()}
+    background={
+      backgroundColor
+        ? backgroundColor
+        : variant === VARIANTS.SUCCESS
+        ? HINT_GREEN
+        : variant === VARIANTS.ERROR
+        ? ERROR_BACKGROUND_COLOR
+        : WHITE
     }
-  }, [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={`
+    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;
     `}
-        {...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>
-      )}
-    </>
-  );
-};
+    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>
+);
 
 export default ToastNotification;

package/src/constants/style_constants.js

@@ -24,15 +24,3 @@ export const SPACING = {
   XS: "1.0rem", // Figma: Spacing/XS
   MD: "1.5rem" // Figma: Spacing/Normal
 };
-export const SCREEN_READER_ONLY = {
-  border: 0,
-  clip: "rect(0 0 0 0)",
-  clipPath: "inset(50%)",
-  height: "1px",
-  margin: "-1px",
-  overflow: "hidden",
-  padding: 0,
-  position: "absolute",
-  width: "1px",
-  whiteSpace: "nowrap"
-};

package/src/stories/Button.stories.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof Button> = {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

package/src/stories/Button.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import './button.css';
+
+interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};