@thecb/components 10.12.1 → 10.12.3-beta.0

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@thecb/components",
-  "version": "10.12.1",
+  "version": "10.12.3-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,22 @@
     "@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-a11y": "7",
+    "@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",
+    "@storybook/test-runner": "0.18.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "axe-playwright": "^2.0.2",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.1.0",
     "babel-preset-env": "^1.7.0",
@@ -48,6 +56,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 +72,12 @@
     "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",
+    "storybook-addon-remix-react-router": "^3.0.0",
     "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 +93,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.mdx

@@ -0,0 +1,19 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as AlertStories from './Alert.stories.js';
+
+<Meta of={AlertStories} />
+
+<Title />
+
+The Alert component is a fully accesible element to provide notifications to a user. Its features include:
+
+- Multiple types: info, warn, error, success
+- Ability to allow user to dismiss the alert
+- Default support of heading text, body text, and customizable children elements
+- Highly customizable content via textOverride
+- Accessibility props for aria-role, aria-atomic, and aria-live
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>

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

@@ -1,28 +1,150 @@
-import React from "react";
-import { text, select, boolean } from "@storybook/addon-knobs";
+import React, { useState } from "react";
+import { CLOUDBURST_BLUE } from "../../../constants/colors";
+import Badge from "../badge/Badge";
+import ToggleSwitch from "../toggle-switch/ToggleSwitch";
+import { Cluster, Box, Stack } from "../layouts";
+import Text from "../text/Text";
 import Alert from "./Alert";
-import page from "../../../../.storybook/page";
-
-const variantsLabel = "variant";
-const variants = {
-  info: "info",
-  warn: "warn",
-  error: "error",
-  success: "success"
+import { fn } from "@storybook/test";
+
+const meta = {
+  title: "Atoms/Alert",
+  component: Alert,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    heading: "This is an alert!",
+    text:
+      "We display this message when we want to alert the user to some sort of event or error, such as when an API request has completed or failed.",
+    textOverride: null,
+    variant: "info",
+    children: null,
+    height: null,
+    onLinkClick: fn(),
+    padding: "0.5rem",
+    showQuitLink: true,
+    extraStyles: null,
+    maxContentWidth: null,
+    noBorder: false,
+    enableBoxShadow: false,
+    enableSmallText: false,
+    innerContentPadding: "1rem",
+    iconPadding: "0 0 0 1rem",
+    contentFullHeight: false,
+    ariaRole: null,
+    ariaAtomic: true,
+    ariaLive: "polite"
+  },
+  argTypes: {
+    heading: {
+      description: "Text that appears in the alert heading",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    text: {
+      description: "Text that appears in the alert body",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    textOverride: {
+      description:
+        "A JSX component that replaces the content otherwise specified with the Heading, Text, and Children props.",
+      table: {
+        type: { summary: "React Component" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    variant: {
+      description: "The type of the alert",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "info" }
+      }
+    },
+    children: {
+      description: "A react component to display below the body text",
+      table: {
+        type: { summary: "React Component" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    showQuitLink: {
+      description: "Whether or not the alert is dismissable",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: true }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const Info = {
+  args: {
+    heading: "This is an info alert!"
+  }
+};
+
+export const Warn = {
+  args: {
+    variant: "warn",
+    heading: "This is a warning alert!"
+  }
+};
+
+export const Error = {
+  args: {
+    variant: "error",
+    heading: "This is an error alert!"
+  }
+};
+
+export const Success = {
+  args: {
+    variant: "success",
+    heading: "This is a success alert!"
+  }
+};
+
+const FancyAlert = props => {
+  const [toggleOn, setToggleOn] = useState(true);
+
+  return (
+    <Alert
+      {...props}
+      textOverride={
+        <Box padding="1rem" border={`1px dotted ${CLOUDBURST_BLUE}`}>
+          <Stack childGap="1.5rem" fullHeight>
+            <Text variant="pL" weight="600">
+              {`Alerts can be very fancy if you want!`}
+            </Text>
+            <Text variant="p" weight="400">
+              {`This particular alert uses the textOverride prop to supply a custom content component with unique text elements and a toggle switch. It also has a box shadow and the quit option to dismiss the alert has been disabled.`}
+            </Text>
+            <Cluster justify="space-between" align="center">
+              <ToggleSwitch
+                label="toggle!"
+                isOn={toggleOn}
+                onToggle={() => setToggleOn(!toggleOn)}
+              ></ToggleSwitch>
+              <Badge variant="warn" label="Oh No!"></Badge>
+            </Cluster>
+          </Stack>
+        </Box>
+      }
+      enableBoxShadow={true}
+      showQuitLink={false}
+    />
+  );
+};
+
+export const CustomAlert = {
+  render: args => <FancyAlert {...args} />
 };
-const defaultValue = "info";
-const groupId = "props";
-
-export const alert = () => (
-  <Alert
-    variant={select(variantsLabel, variants, defaultValue, groupId)}
-    text={text("text", "Alert Bar", "props")}
-    showQuitLink={boolean("showQuitLink", true, "props")}
-  />
-);
-
-const story = page({
-  title: "Components|Atoms/Alert",
-  Component: Alert
-});
-export default story;

package/src/components/atoms/badge/Badge.js

@@ -30,8 +30,8 @@ const StyledBadge = styled(Text)`
   }
 `;
 
-const Badge = ({ label, Icon, themeValues, iconOnLeft = true }) => (
-  <StyledBadgeContainer background={themeValues.background}>
+const Badge = ({ label, Icon, themeValues, iconOnLeft = true, id }) => (
+  <StyledBadgeContainer background={themeValues.background} id={id}>
     {iconOnLeft && Icon && (
       <Icon color={themeValues.color} fill={themeValues.color} />
     )}

package/src/components/atoms/badge/Badge.mdx

@@ -0,0 +1,27 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as BadgeStories from './Badge.stories.js';
+
+<Meta of={BadgeStories} />
+
+<Title />
+
+The Badge component is a small component used to provide information in the form of an icon and text string to users at a glance. Badges can be used in tables, as tags, in UI controls, or anywhere display of bite-sized information is needed.
+
+All themes use the same badge variants (and colors) as displayed here, but custom badges can be added to theme patterns in FCS if desired.
+
+Badges have these properties:
+
+- label (required)
+- Icon (optional)
+- variant (optional, default is "success")
+- iconOnLeft (optional, default is "true")
+
+Badge theme variants control *only* the background color of the badge and the color of its text. Icon color is either passed in as a prop to the Icon component (ideal), or controlled by the Icon themeing.
+
+Note: if using the second approach, it is possible for the color of badge text and icon to diverge, possibly in undersible ways, unless special variants are added to the Icon themes in the FCS theme patterns. See the "Payment History" badge - try changing the theme in storybook - for an example of this.
+
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>

package/src/components/atoms/badge/Badge.stories.js

@@ -1,33 +1,147 @@
 import React from "react";
-import { text, select } from "@storybook/addon-knobs";
+import {
+  MANATEE_GREY,
+  MATISSE_BLUE,
+  ROYAL_BLUE_VIVID,
+  ZEST_ORANGE
+} from "../../../constants/colors";
 import Badge from "./Badge";
-import page from "../../../../.storybook/page";
+import { Box, Stack, Cluster } from "../layouts";
 import AutopayIcon from "../icons/AutopayIcon";
+import MultiCartIcon from "../icons/MultiCartIcon";
+import RefundIconSmall from "../icons/RefundIconSmall";
+import TrashIconV2 from "../icons/TrashIconV2";
+import HistoryIconSmall from "../icons/HistoryIconSmall";
 
-const variantsLabel = "variants";
-const variants = {
-  info: "info",
-  warn: "warn",
-  primary: "primary",
-  success: "success",
-  disabled: "disabled"
-};
-
-const defaultValue = "success";
-const groupId = "props";
-const labelLabel = "label";
-const iconLabel = "Icon";
-
-export const badge = () => (
-  <Badge
-    variant={select(variantsLabel, variants, defaultValue, groupId)}
-    label={text(labelLabel, "Autopay Available", groupId)}
-    Icon={text(iconLabel, AutopayIcon, groupId)}
-  />
-);
-
-const story = page({
-  title: "Components|Atoms/Badge",
-  Component: Badge
-});
-export default story;
+const meta = {
+  title: "Atoms/Badge",
+  component: Badge,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    label: undefined,
+    Icon: undefined,
+    iconOnLeft: true,
+    variant: "success"
+  },
+  argTypes: {
+    label: {
+      description: "The text displayed inside the badge",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    Icon: {
+      description: "An icon component to display on the badge",
+      table: {
+        type: { summary: "React Component" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    iconOnLeft: {
+      description: "Position of the icon on the badge",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: true }
+      }
+    },
+    variant: {
+      description: "The style of the badge",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "success" }
+      }
+    }
+  }
+};
+
+export default meta;
+
+const SuccessBadge = props => {
+  return <Badge {...props} label={"Autopay On"} Icon={AutopayIcon} />;
+};
+
+const DisabledBadge = props => {
+  return (
+    <Badge
+      {...props}
+      label={"Enable Autopay"}
+      Icon={() => AutopayIcon({ fill: MANATEE_GREY })}
+      variant="disabled"
+    />
+  );
+};
+
+const PrimaryBadge = props => {
+  return (
+    <Badge
+      {...props}
+      label={"Item in Cart"}
+      Icon={() => MultiCartIcon({ color: ROYAL_BLUE_VIVID })}
+      variant="primary"
+    />
+  );
+};
+
+const InfoBadge = props => {
+  return (
+    <Badge
+      {...props}
+      label={"Payment History"}
+      Icon={() => HistoryIconSmall({ color: MATISSE_BLUE })}
+      variant="info"
+    />
+  );
+};
+
+const WarnBadge = props => {
+  return (
+    <Badge
+      {...props}
+      label={"Refund Payment"}
+      Icon={() => RefundIconSmall({ color: ZEST_ORANGE })}
+      variant="warn"
+    />
+  );
+};
+
+const RightIconBadge = props => {
+  return (
+    <Badge
+      {...props}
+      label={"Delete Record"}
+      Icon={() => TrashIconV2({ iconFill: ZEST_ORANGE })}
+      variant="warn"
+      iconOnLeft={false}
+    />
+  );
+};
+
+const NoIconBadge = props => {
+  return <Badge {...props} label={"Paid Off"} variant="success" />;
+};
+
+export const Badges = {
+  render: args => {
+    return (
+      <Box padding="1rem">
+        <Stack childGap="2rem">
+          <Cluster justify="flex-start" align="center" childGap="1.5rem">
+            <SuccessBadge {...args} />
+            <DisabledBadge {...args} />
+            <PrimaryBadge {...args} />
+            <WarnBadge {...args} />
+          </Cluster>
+          <Cluster justify="flex-start" align="center" childGap="1.5rem">
+            <InfoBadge {...args} />
+            <RightIconBadge {...args} />
+            <NoIconBadge {...args} />
+          </Cluster>
+        </Stack>
+      </Box>
+    );
+  }
+};

package/src/components/atoms/breadcrumb/Breadcrumb.mdx

@@ -0,0 +1,21 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as BreadcrumbStories from './Breadcrumb.stories.js';
+
+<Meta of={BreadcrumbStories} />
+
+<Title />
+
+Breadcrumb is a themeable component that generates a horizontal navigation with links separated by chevron icons.
+
+The component only takes on prop: `breadcrumbsList`, which must be an array of objects with the following properties:
+
+- `linkText`: string for the link's text
+- `linkDestination`: string or react-router path for the link's URL
+- `isActive`: boolean, changes the style and cursor of the link to represent the current page
+
+Breadcrumb uses the InternalLink component for each crumb, which uses the Link component from react-router-dom.
+
+<Story />
+
+<Controls />

package/src/components/atoms/breadcrumb/Breadcrumb.stories.js

@@ -1,38 +1,47 @@
-import React from "react";
-import { object } from "@storybook/addon-knobs";
 import Breadcrumb from "./Breadcrumb";
-import page from "../../../../.storybook/page";
 
-const labelInactive = "Inactive Breadcrumb";
-const defaultInactiveValue = {
-  linkText: "Home",
-  linkDestination: location.pathname,
-  isActive: false
+const meta = {
+  title: "Atoms/Breadcrumb",
+  component: Breadcrumb,
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  tags: ["!autodocs"],
+  args: {
+    breadcrumbsList: []
+  },
+  argTypes: {
+    breadcrumbsList: {
+      control: { type: "array" },
+      table: {
+        type: { summary: "array" },
+        defaultValue: { summary: [] }
+      }
+    }
+  }
 };
 
-const labelActive = "Active Breadcrumb";
-const defaultActiveValue = {
-  linkText: "Page",
-  linkDestination: location.pathname,
-  isActive: true
-};
-const groupId = "props";
+export default meta;
 
-export const breadcrumb = () => (
-  <Breadcrumb
-    breadcrumbsList={[
+export const Basic = {
+  args: {
+    breadcrumbsList: [
+      {
+        linkText: "Home",
+        linkDestination: "/",
+        isActive: false
+      },
       {
-        ...object(labelInactive, defaultInactiveValue, groupId)
+        linkText: "Page",
+        linkDestination: "/page",
+        isActive: false
       },
       {
-        ...object(labelActive, defaultActiveValue, groupId)
+        linkText: "Another Page",
+        linkDestination: "/another-page",
+        isActive: true
       }
-    ]}
-  />
-);
-
-const story = page({
-  title: "Components|Atoms/Breadcrumb",
-  Component: Breadcrumb
-});
-export default story;
+    ]
+  }
+};