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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "12.0.0-beta.0",
+  "version": "12.0.0-beta.2",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
@@ -22,7 +22,8 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "ai-docs"
   ],
   "homepage": "https://github.com/CityBaseInc/cb-components#readme",
   "devDependencies": {
@@ -33,6 +34,7 @@
     "@babel/register": "^7.6.2",
     "@chromatic-com/storybook": "^1.4.0",
     "@rollup/plugin-json": "^4.0.3",
+    "@storybook/addon-a11y": "7",
     "@storybook/addon-essentials": "^8.1.1",
     "@storybook/addon-interactions": "^8.1.1",
     "@storybook/addon-links": "^8.1.1",
@@ -43,7 +45,9 @@
     "@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",
@@ -70,18 +74,23 @@
     "rollup-plugin-ts": "^3.0.2",
     "rollup-plugin-visualizer": "^4.0.4",
     "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",
     "vite": "^5.2.11"
   },
   "peerDependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^16.13.1 || ^17.0.0",
+    "react-dom": "^16.13.1 || ^17.0.0",
     "react-router-dom": "^6.3.0",
     "styled-components": "^5.1.1",
     "styled-theming": "^2.2.0"
   },
+  "resolutions": {
+    "jackspeak": "2.1.1",
+    "strip-ansi": "6.0.1"
+  },
   "husky": {
     "hooks": {
       "pre-commit": "pretty-quick --staged"
@@ -92,12 +101,12 @@
     "@types/styled-components": "^5.1.34",
     "core-js": "^3.22.5",
     "formatted-input": "^1.0.0",
-    "framer-motion": "^1.11.0",
+    "framer-motion": "7.0.0",
     "numeral": "^2.0.6",
     "polished": "^4.0.3",
     "ramda": "^0.27.0",
     "react-aria-modal": "^4.0.0",
-    "react-pose": "^4.0.10",
-    "redux-freeform": "^5.9.0"
-  }
+    "redux-freeform": "6.2.1"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

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

@@ -73,7 +73,16 @@ const Alert = ({
           </Box>
           <Cluster justify="flex-end" align="flex-start">
             {showQuitLink && (
-              <Box padding="0" minHeight="100%" onClick={onLinkClick}>
+              <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;"
+              >
                 <IconQuit />
               </Box>
             )}

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

@@ -0,0 +1,150 @@
+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 { 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} />
+};

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

@@ -1,5 +1,5 @@
-import React from "react";
-import styled from "styled-components";
+import React, { useContext } from "react";
+import styled, { ThemeContext } from "styled-components";
 import Box from "../layouts/Box";
 import Text from "../../atoms/text/";
 import { themeComponent } from "../../../util/themeUtils";
@@ -15,31 +15,45 @@ const StyledBadgeContainer = styled(Box)`
 `;
 
 const StyledBadge = styled(Text)`
-  font-family: "Public Sans", sans-serif;
-  font-size: 10px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 150%; /* 15px */
-  letter-spacing: 0.2px;
+  line-height: 150%;
+  letter-spacing: ${props => (props.isMobile ? "0.2px" : "0.24px")};
   white-space: nowrap;
-
-  @media screen and (min-width: 1049px) {
-    font-size: 12px;
-    line-height: 150%; /* 18px */
-    letter-spacing: 0.24px;
-  }
 `;
 
-const Badge = ({ label, Icon, themeValues, iconOnLeft = true }) => (
-  <StyledBadgeContainer background={themeValues.background}>
-    {iconOnLeft && Icon && (
-      <Icon color={themeValues.color} fill={themeValues.color} />
-    )}
-    <StyledBadge color={themeValues.color}>{label}</StyledBadge>
-    {!iconOnLeft && Icon && (
-      <Icon color={themeValues.color} fill={themeValues.color} />
-    )}
-  </StyledBadgeContainer>
-);
+const Badge = ({
+  label,
+  Icon,
+  themeValues,
+  iconOnLeft = true,
+  id,
+  extraStyles
+}) => {
+  const { isMobile } = useContext(ThemeContext);
+
+  return (
+    <StyledBadgeContainer
+      background={themeValues.background}
+      id={id}
+      extraStyles={extraStyles}
+    >
+      {iconOnLeft && Icon && (
+        <Icon color={themeValues.color} fill={themeValues.color} />
+      )}
+      <StyledBadge
+        color={themeValues.color}
+        weight={themeValues.fontWeight}
+        fontSize={
+          isMobile ? themeValues.fontSizeMobile : themeValues.fontSizeDesktop
+        }
+        isMobile={isMobile}
+      >
+        {label}
+      </StyledBadge>
+      {!iconOnLeft && Icon && (
+        <Icon color={themeValues.color} fill={themeValues.color} />
+      )}
+    </StyledBadgeContainer>
+  );
+};
 
 export default themeComponent(Badge, "Badge", fallbackValues, "success");

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

@@ -0,0 +1,168 @@
+import React from "react";
+import {
+  MANATEE_GREY,
+  ROYAL_BLUE_VIVID,
+  ZEST_ORANGE,
+  CORNFLOWER_BLUE
+} from "../../../constants/colors";
+import Badge from "./Badge";
+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";
+import HistoryIconSmall from "../icons/HistoryIconSmall";
+
+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({ iconFill: ROYAL_BLUE_VIVID })}
+      variant="primary"
+    />
+  );
+};
+
+const PrimaryHeadlineBadge = props => {
+  return <Badge {...props} label={"Kiosk"} variant="primaryHeadline" />;
+};
+
+const SecondaryBadge = props => {
+  return (
+    <Badge
+      {...props}
+      label={"Item in Cart"}
+      Icon={() => MultiCartIcon({ iconFill: CORNFLOWER_BLUE })}
+      variant="secondary"
+    />
+  );
+};
+
+const SecondaryHeadlineBadge = props => {
+  return <Badge {...props} label={"Online"} variant="secondaryHeadline" />;
+};
+const InfoBadge = props => {
+  return (
+    <Badge
+      {...props}
+      label={"Payment History"}
+      Icon={HistoryIconSmall}
+      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}
+      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} />
+            <PrimaryHeadlineBadge {...args} />
+            <SecondaryBadge {...args} />
+            <SecondaryHeadlineBadge {...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/badge/Badge.theme.js

@@ -10,11 +10,20 @@ import {
   SEA_GREEN,
   ZEST_ORANGE
 } from "../../../constants/colors";
+import {
+  FONT_SIZE,
+  FONT_WEIGHT_REGULAR,
+  FONT_WEIGHT_SEMIBOLD
+} from "../../../constants/style_constants";
+import { fallbackValues as textTheme } from "../text/Text.theme";
 
 const background = {
   info: `${INFO_BLUE}`,
   warn: `${HALF_COLONIAL_WHITE}`,
   primary: `${CORNFLOWER_BLUE}`,
+  primaryHeadline: `${CORNFLOWER_BLUE}`,
+  secondary: `${ROYAL_BLUE_VIVID}`,
+  secondaryHeadline: `${ROYAL_BLUE_VIVID}`,
   success: `${HINT_GREEN}`,
   disabled: `${GRECIAN_GREY}`
 };
@@ -23,11 +32,50 @@ const color = {
   info: `${MATISSE_BLUE}`,
   warn: `${ZEST_ORANGE}`,
   primary: `${ROYAL_BLUE_VIVID}`,
+  primaryHeadline: `${ROYAL_BLUE_VIVID}`,
+  secondary: `${CORNFLOWER_BLUE}`,
+  secondaryHeadline: `${CORNFLOWER_BLUE}`,
   success: `${SEA_GREEN}`,
   disabled: `${MANATEE_GREY}`
 };
 
+const fontWeight = {
+  info: FONT_WEIGHT_REGULAR,
+  warn: FONT_WEIGHT_REGULAR,
+  primary: FONT_WEIGHT_REGULAR,
+  primaryHeadline: FONT_WEIGHT_SEMIBOLD,
+  secondary: FONT_WEIGHT_REGULAR,
+  secondaryHeadline: FONT_WEIGHT_SEMIBOLD,
+  success: FONT_WEIGHT_REGULAR,
+  disabled: FONT_WEIGHT_REGULAR
+};
+
+const fontSizeMobile = {
+  info: textTheme.fontSize.pXXS,
+  warn: textTheme.fontSize.pXXS,
+  primary: textTheme.fontSize.pXXS,
+  primaryHeadline: textTheme.fontSize.pXS,
+  secondary: textTheme.fontSize.pXXS,
+  secondaryHeadline: textTheme.fontSize.pXS,
+  success: textTheme.fontSize.pXXS,
+  disabled: textTheme.fontSize.pXXS
+};
+
+const fontSizeDesktop = {
+  info: textTheme.fontSize.pXS,
+  warn: textTheme.fontSize.pXS,
+  primary: textTheme.fontSize.pXS,
+  primaryHeadline: textTheme.fontSize.pS,
+  secondary: textTheme.fontSize.pXS,
+  secondaryHeadline: textTheme.fontSize.pS,
+  success: textTheme.fontSize.pXS,
+  disabled: textTheme.fontSize.pXS
+};
+
 export const fallbackValues = {
   background,
-  color
+  color,
+  fontWeight,
+  fontSizeMobile,
+  fontSizeDesktop
 };

package/src/components/atoms/badge/index.d.ts

@@ -5,6 +5,17 @@ export interface BadgeProps {
   label: string;
   Icon?: JSX.Element;
   iconOnLeft?: boolean;
+  variant?:
+    | "info"
+    | "warn"
+    | "primary"
+    | "primaryHeadline"
+    | "secondary"
+    | "secondaryHeadline"
+    | "success"
+    | "disabled";
+  id?: string;
+  extraStyles?: string;
 }
 
 export const Badge: React.FC<Expand<BadgeProps> & HTMLAttributes<HTMLElement>>;

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 />