@thecb/components 10.12.3-beta.0 → 10.12.3-beta.1

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "@thecb/components",
-  "version": "10.12.3-beta.0",
+  "version": "10.12.3-beta.1",
   "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": "storybook dev -p 6006",
-    "build": "rollup -cm",
-    "build-storybook": "storybook build"
+    "storybook": "start-storybook",
+    "build": "rollup -cm"
   },
   "repository": {
     "type": "git",
@@ -31,22 +30,15 @@
     "@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": "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",
+    "@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",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.1.0",
     "babel-preset-env": "^1.7.0",
@@ -56,7 +48,6 @@
     "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",
@@ -72,12 +63,10 @@
     "rollup-plugin-node-resolve": "^5.1.0",
     "rollup-plugin-ts": "^3.0.2",
     "rollup-plugin-visualizer": "^4.0.4",
-    "storybook": "^8.1.1",
-    "storybook-addon-remix-react-router": "^3.0.0",
+    "storybook": "^6.4.22",
     "styled-components": "^5.3.5",
     "styled-theming": "^2.2.0",
-    "typescript": "^4.8.2",
-    "vite": "^5.2.11"
+    "typescript": "^4.8.2"
   },
   "peerDependencies": {
     "react": "^16.13.1",
@@ -93,7 +82,6 @@
   },
   "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.stories.js

@@ -1,150 +1,28 @@
-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 React from "react";
+import { text, select, boolean } from "@storybook/addon-knobs";
 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} />
+import page from "../../../../.storybook/page";
+
+const variantsLabel = "variant";
+const variants = {
+  info: "info",
+  warn: "warn",
+  error: "error",
+  success: "success"
 };
+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, id }) => (
-  <StyledBadgeContainer background={themeValues.background} id={id}>
+const Badge = ({ label, Icon, themeValues, iconOnLeft = true }) => (
+  <StyledBadgeContainer background={themeValues.background}>
     {iconOnLeft && Icon && (
       <Icon color={themeValues.color} fill={themeValues.color} />
     )}

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

@@ -1,147 +1,33 @@
 import React from "react";
-import {
-  MANATEE_GREY,
-  MATISSE_BLUE,
-  ROYAL_BLUE_VIVID,
-  ZEST_ORANGE
-} from "../../../constants/colors";
+import { text, select } from "@storybook/addon-knobs";
 import Badge from "./Badge";
-import { Box, Stack, Cluster } from "../layouts";
+import page from "../../../../.storybook/page";
 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 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>
-    );
-  }
-};
+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;

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

@@ -1,47 +1,38 @@
+import React from "react";
+import { object } from "@storybook/addon-knobs";
 import Breadcrumb from "./Breadcrumb";
+import page from "../../../../.storybook/page";
 
-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 labelInactive = "Inactive Breadcrumb";
+const defaultInactiveValue = {
+  linkText: "Home",
+  linkDestination: location.pathname,
+  isActive: false
 };
 
-export default meta;
+const labelActive = "Active Breadcrumb";
+const defaultActiveValue = {
+  linkText: "Page",
+  linkDestination: location.pathname,
+  isActive: true
+};
+const groupId = "props";
 
-export const Basic = {
-  args: {
-    breadcrumbsList: [
-      {
-        linkText: "Home",
-        linkDestination: "/",
-        isActive: false
-      },
+export const breadcrumb = () => (
+  <Breadcrumb
+    breadcrumbsList={[
       {
-        linkText: "Page",
-        linkDestination: "/page",
-        isActive: false
+        ...object(labelInactive, defaultInactiveValue, groupId)
       },
       {
-        linkText: "Another Page",
-        linkDestination: "/another-page",
-        isActive: true
+        ...object(labelActive, defaultActiveValue, groupId)
       }
-    ]
-  }
-};
+    ]}
+  />
+);
+
+const story = page({
+  title: "Components|Atoms/Breadcrumb",
+  Component: Breadcrumb
+});
+export default story;

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

@@ -1,109 +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 { 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"
-};
+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;