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

package/src/components/atoms/loading-line/LoadingLine.stories.js

@@ -0,0 +1,132 @@
+import LoadingLine from "./LoadingLine";
+import { Box, Cluster, Stack } from "../layouts";
+
+const meta = {
+  title: "Atoms/LoadingLine",
+  component: LoadingLine,
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  tags: ["!autodocs"],
+  args: {
+    minWidth: undefined,
+    maxWidth: undefined,
+    exactWidth: undefined,
+    height: "16px",
+    margin: "0px"
+  },
+  argTypes: {
+    minWidth: {
+      description:
+        "The minimum width of the loading pill. Value will be appended with px in styles.",
+      table: {
+        type: { summary: "string or number" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    maxWidth: {
+      description:
+        "The maximum width of the loading pill. Value will be appended with px in styles.",
+      table: {
+        type: { summary: "string or number" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    exactWidth: {
+      description:
+        "Exact width value for the loading pill. Value will be appended with px in styles.",
+      table: {
+        type: { summary: "string or number" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    height: {
+      description: "Height of the loading pill",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "16px" }
+      }
+    },
+    margin: {
+      description: "Margin value around the pill",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "0px" }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const BasicLoadingLine = {
+  args: {
+    minWidth: "350",
+    maxWidth: "600",
+    height: "20px"
+  },
+  render: args => (
+    <Box minWidth="325px">
+      <LoadingLine {...args} />
+    </Box>
+  )
+};
+
+export const LoadingLineAsShape = {
+  args: {
+    exactWidth: "375",
+    height: "325px"
+  },
+  render: args => (
+    <Box minWidth="375px">
+      <LoadingLine {...args} />
+    </Box>
+  )
+};
+
+const minWidthFunc = () => Math.random() * 75 + 20;
+
+const firstLineLength = Array.from({ length: 12 }, minWidthFunc);
+const secondLineLength = Array.from({ length: 15 }, minWidthFunc);
+const thirdLineLength = Array.from({ length: 8 }, minWidthFunc);
+const fourthLineLength = Array.from({ length: 20 }, minWidthFunc);
+
+const firstLine = firstLineLength.map(item => (
+  <LoadingLine key={`line-1-${item}`} minWidth={item} maxWidth="150" />
+));
+
+const secondLine = secondLineLength.map(item => (
+  <LoadingLine key={`line-2-${item}`} minWidth={item} maxWidth="150" />
+));
+const thirdLine = thirdLineLength.map(item => (
+  <LoadingLine key={`line-3-${item}`} minWidth={item} maxWidth="150" />
+));
+const fourthLine = fourthLineLength.map(item => (
+  <LoadingLine key={`line-4-${item}`} minWidth={item} maxWidth="150" />
+));
+
+export const LoadingTextContent = {
+  args: {
+    height: "12px",
+    margin: "0px"
+  },
+  render: args => (
+    <Box minWidth="400px" maxWidth="700px" minHeight="500px">
+      <Stack childGap="0.5rem">
+        <Cluster childGap="1rem" justify="flex-start" align="center">
+          {firstLine}
+        </Cluster>
+        <Cluster childGap="1rem" justify="flex-start" align="center">
+          {secondLine}
+        </Cluster>
+        <Cluster childGap="1rem" justify="flex-start" align="center">
+          {thirdLine}
+        </Cluster>
+        <Cluster childGap="1rem" justify="flex-start" align="center">
+          {fourthLine}
+        </Cluster>
+      </Stack>
+    </Box>
+  )
+};

package/src/components/atoms/loading-line/LoadingPill.styled.js

@@ -13,18 +13,19 @@ const shineFrames = keyframes`{
   }
 }`;
 
-export const LoadingPill = styled.div`
+export const LoadingPill = styled.span`
+  display: block;
   width: ${({ width }) => width}px;
-  background-color: ${colors.SEASHELL_WHITE};
+  background-color: ${({ backgroundColor }) => backgroundColor};
   margin: ${({ margin }) => margin};
   height: ${({ height }) => height};
   border-radius: 16px;
   background-image: linear-gradient(
     135deg,
-    ${colors.SEASHELL_WHITE} 0%,
-    ${colors.ALABASTER_WHITE} 40%,
-    ${colors.SEASHELL_WHITE} 60%,
-    ${colors.SEASHELL_WHITE} 100%
+    ${({ backgroundColor }) => backgroundColor} 0%,
+    ${({ foregroundColor }) => foregroundColor} 40%,
+    ${({ backgroundColor }) => backgroundColor} 60%,
+    ${({ backgroundColor }) => backgroundColor} 100%
   );
   background-size: 400%;
   animation: ${shineFrames} 2s infinite ease-in-out;

package/src/components/atoms/nav-footer/NavFooter.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as NavFooterStories from './NavFooter.stories.js';
+
+<Meta of={NavFooterStories} />
+
+<Title />
+
+The NavFooter component is a wrapper designed to create a page footer. The component accepts children components for its left and right side and sizes itself to the width of the page. The component can take a maxWidth value that will center the footer within it, no matter the overall size of the screen.
+
+The NavFooter can also be used to create a smaller subfooter by changing the minimum height value. Multiple footers can exist on one page, as long as they have proper key and aria-label values. The `largeSide` and `largeSideSize` props dictate which side of the footer is given more flex space.
+
+<Controls />
+
+<Story />

package/src/components/atoms/nav-footer/NavFooter.stories.js

@@ -0,0 +1,244 @@
+import NavFooter from "./NavFooter";
+import { Box, Cluster, Stack } from "../layouts";
+import ButtonWithAction from "../button-with-action";
+import React from "react";
+import { fn } from "@storybook/test";
+import ImageBox from "../image-box/ImageBox";
+import {
+  BRIGHT_GREY,
+  DUSTY_GREY,
+  ROYAL_BLUE_VIVID,
+  WHITE
+} from "../../../constants/colors";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import ExternalLink from "../link/ExternalLink";
+import ExternalLinkIcon from "../icons/ExternalLinkIcon";
+import Text from "../text";
+
+const meta = {
+  title: "Atoms/NavFooter",
+  component: NavFooter,
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  tags: ["!autodocs"],
+  args: {
+    leftContent: undefined,
+    rightContent: undefined,
+    footerMinHeight: "104px",
+    largeSide: "right",
+    largeSideSize: "2",
+    footerPadding: "1.5rem 1rem",
+    isMobile: false,
+    backgroundColor: undefined,
+    footerWidth: undefined
+  },
+  argTypes: {
+    leftContent: {
+      description: "Content that appears on the left side of the footer",
+      table: {
+        type: { summary: "React Component" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    rightContent: {
+      description: "Content that appears on the right side of the footer",
+      table: {
+        type: { summary: "React Component" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    footerMinHeight: {
+      description: "Minimum height of the footer",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "105px" }
+      }
+    },
+    isMobile: {
+      description:
+        "Whether the page is currently displaying on a mobile device",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    backgroundColor: {
+      description: "Background color of the footer",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    footerWidth: {
+      description:
+        "Optional value for maximum width of inner container. Component uses 76.5rem or 1224px if not specified. If page is larger than max width, container will be centered within.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
+
+export default meta;
+
+const logo = (
+  <ImageBox
+    maxWidth="150px"
+    minHeight="50px"
+    image={{
+      url:
+        "https://cb-public-assets.s3-us-west-2.amazonaws.com/cityville/logo-footer-white.svg",
+      altText: "Cityville Payment Portal Logo"
+    }}
+  />
+);
+
+const copyright = (
+  <Box padding="0.5rem">
+    <Text variant="pXS" color={WHITE}>
+      © 2024 City of Cityville
+    </Text>
+  </Box>
+);
+
+const logoutButton = (
+  <Box padding="0">
+    <ButtonWithAction
+      action={() => fn()}
+      variant="whitePrimary"
+      text="Log Out"
+      extraStyles={`
+          padding: 0.75rem 2rem; 
+          border: 2px solid ${WHITE}; 
+          color: ${WHITE};
+          &:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+            > * > span {
+              color: ${WHITE};
+              background-color: transparent;
+            }
+          }
+          &:active { 
+            border: 2px solid ${WHITE};
+            background-color: rgba(255, 255, 255, 0.25);
+            > * > span {
+              color: ${WHITE};
+              background-color: transparent;
+            }
+          };
+          &:focus { 
+            outline: 3px solid ${WHITE}; 
+            outline-offset: 2px; 
+          }
+          > * > span {
+            color: ${WHITE};
+          }`}
+    />
+  </Box>
+);
+
+const subfooterLinkList = [
+  {
+    text: "Demo Home",
+    link: "/"
+  },
+  {
+    text: "Privacy Policy",
+    link: "/"
+  },
+  {
+    text: "Join Cityville Utilities",
+    link: "/"
+  },
+  {
+    text: "Utility Blog",
+    link: "/"
+  },
+  {
+    text: "Report an Outage",
+    link: "/"
+  }
+];
+
+const subfooterLinks = subfooterLinkList.map((item, index) => (
+  <Box
+    padding="0"
+    key={`link-${item.text}`}
+    extraStyles={`max-height: 1.25rem;`}
+  >
+    <ExternalLink
+      newTab
+      href={item.link}
+      color={WHITE}
+      hoverColor={WHITE}
+      extraStyles={`text-decoration: none;
+        &:focus { 
+          outline: 3px solid ${WHITE}; 
+          outline-offset: 2px; 
+        }`}
+      size="0.875rem"
+      lineHeight="1.25rem"
+      weight={FONT_WEIGHT_SEMIBOLD}
+      ariaLabel={`Link to ${item.text} (opens in a new window)`}
+    >
+      <Cluster childGap="0.5rem" justify="center" align="center">
+        <Text
+          variant="pXS"
+          color={WHITE}
+          weight={FONT_WEIGHT_SEMIBOLD}
+          extraStyles={`cursor: pointer;   
+          &:focus { 
+            outline: 3px solid ${WHITE}; 
+            outline-offset: 2px; 
+          }`}
+        >
+          {item.text}
+        </Text>
+        <ExternalLinkIcon linkColor={WHITE} text={`link-icon-${index}`} />
+      </Cluster>
+    </ExternalLink>
+  </Box>
+));
+
+const subfooterLeftContent = (
+  <Cluster justify="flex-start" align="center" key="subfooter-left">
+    <Box padding={"0.5rem"} minWidth="100%">
+      <Stack direction={"row"} childGap={"2rem"}>
+        {[...subfooterLinks]}
+      </Stack>
+    </Box>
+  </Cluster>
+);
+
+export const BasicFooter = {
+  render: args => (
+    <Box minWidth="1200px">
+      <NavFooter
+        {...args}
+        leftContent={logo}
+        rightContent={logoutButton}
+        backgroundColor={ROYAL_BLUE_VIVID}
+      />
+    </Box>
+  )
+};
+
+export const BasicSubfooter = {
+  render: args => (
+    <Box minWidth="1200px" backgroundColor={DUSTY_GREY}>
+      <NavFooter
+        {...args}
+        leftContent={subfooterLeftContent}
+        rightContent={copyright}
+        backgroundColor={BRIGHT_GREY}
+        footerMinHeight="45px"
+        largeSide="left"
+        largeSideSize="4"
+        footerPadding="0 1rem"
+      />
+    </Box>
+  )
+};

package/src/components/atoms/nav-header/NavHeader.mdx

@@ -0,0 +1,13 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as NavHeaderStories from './NavHeader.stories.js';
+
+<Meta of={NavHeaderStories} />
+
+<Title />
+
+The NavHeader component is a wrapper designed to create a page header. The component accepts children components for its left and right side and sizes itself to the width of the page. The component can take a maxWidth value that will center the header within it, no matter the overall size of the screen.
+
+<Controls />
+
+<Story />

package/src/components/atoms/nav-header/NavHeader.stories.js

@@ -0,0 +1,130 @@
+import NavHeader from "./NavHeader";
+import { Box, Cover } from "../layouts";
+import HamburgerButton from "../hamburger-button";
+import React from "react";
+import { fn } from "@storybook/test";
+import ImageBox from "../image-box/ImageBox";
+import {
+  CATSKILL_WHITE,
+  DUSTY_GREY,
+  ROYAL_BLUE_VIVID,
+  SEASHELL_WHITE
+} from "../../../constants/colors";
+
+const meta = {
+  title: "Atoms/NavHeader",
+  component: NavHeader,
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  tags: ["!autodocs"],
+  args: {
+    leftContent: undefined,
+    rightContent: undefined,
+    headerHeight: "105px",
+    isMobile: false,
+    backgroundColor: undefined,
+    headerWidth: undefined
+  },
+  argTypes: {
+    leftContent: {
+      description: "Content that appears on the left side of the header",
+      table: {
+        type: { summary: "React Component" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    rightContent: {
+      description: "Content that appears on the right side of the header",
+      table: {
+        type: { summary: "React Component" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    headerHeight: {
+      description: "Height of the header container in pixels",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "105px" }
+      }
+    },
+    isMobile: {
+      description:
+        "Whether the page is currently displaying on a mobile device",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    backgroundColor: {
+      description: "Background color of the header",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    headerWidth: {
+      description:
+        "Optional value for maximum width of inner container. Component uses 76.5rem or 1224px if not specified. If page is larger than max width, container will be centered within.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
+
+export default meta;
+
+const logo = (
+  <ImageBox
+    maxWidth="150px"
+    minHeight="50px"
+    image={{
+      url:
+        "https://cb-public-assets.s3-us-west-2.amazonaws.com/cityville/logo-blue.svg",
+      altText: "Cityville Payment Portal Logo"
+    }}
+  />
+);
+
+const hamburger = (
+  <Box padding="0">
+    <Cover singleChild fillCenter>
+      <HamburgerButton
+        isActive={false}
+        onClick={() => fn()}
+        activeColor={ROYAL_BLUE_VIVID}
+        inactiveColor={ROYAL_BLUE_VIVID}
+      />
+    </Cover>
+  </Box>
+);
+
+export const BasicHeader = {
+  render: args => (
+    <Box minWidth="1200px">
+      <NavHeader
+        {...args}
+        leftContent={logo}
+        rightContent={hamburger}
+        backgroundColor={SEASHELL_WHITE}
+      />
+    </Box>
+  )
+};
+
+export const HeaderSmallerThanPage = {
+  render: args => (
+    <Box minWidth="1200px" backgroundColor={DUSTY_GREY}>
+      <NavHeader
+        {...args}
+        leftContent={logo}
+        rightContent={hamburger}
+        backgroundColor={CATSKILL_WHITE}
+        headerWidth="800px"
+      />
+    </Box>
+  )
+};

package/src/components/atoms/nav-tabs/NavTabs.mdx

@@ -0,0 +1,30 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as NavTabsStories from './NavTabs.stories.js';
+
+<Meta of={NavTabsStories} />
+
+<Title />
+
+The NavTabs component renders a configurable row of links on desktop, and a stack of links on mobile.
+
+- The links are horizontally centered
+- Each tab uses the `InternalLink` component, which uses the `Link` component from `react-router-dom`. 
+- The current, or active, page is determined by checking if `location.pathname` from the `useLocation` hook from `react-router-dom` includes a tab's `path`.
+- There is no default gap between links on desktop, so it's recommended to always provide a value for `tabGap`.
+- The font, link color, and active color are themeable.
+- Expands to fit the width of it's containing element.
+
+## Example `tabsConfig` Format
+
+```
+const tabs = [
+  { label: "Home", path: "/" },
+  { label: "About", path: "/about" },
+  { label: "Contact", path: "/contact" }
+];
+```
+
+<Story />
+
+<Controls />

package/src/components/atoms/nav-tabs/NavTabs.stories.js

@@ -0,0 +1,49 @@
+import NavTabs from "./NavTabs";
+
+const meta = {
+  title: "Atoms/NavTabs",
+  component: NavTabs,
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  args: {
+    tabsConfig: undefined,
+    tabGap: undefined
+  },
+  argTypes: {
+    tabsConfig: {
+      description: "Array of tab objects",
+      control: { type: "object" },
+      table: {
+        type: { summary: "array" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    tabGap: {
+      description:
+        "Gap between tabs. Passed to the Cluster component that wraps the tabs on desktop screens.",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
+
+const tabs = [
+  { label: "Home", path: "/" },
+  { label: "About", path: "/about" },
+  { label: "Contact", path: "/contact" }
+];
+
+export default meta;
+
+export const Basic = {
+  args: {
+    tabsConfig: tabs,
+    tabGap: "2rem"
+  }
+};

package/src/components/atoms/password-requirements/PasswordRequirements.js

@@ -16,7 +16,7 @@ import {
 import {
   MINESHAFT_GREY,
   ATHENS_GREY,
-  FOREST_GREEN,
+  SEA_GREEN,
   RAZZMATAZZ_RED
 } from "../../../constants/colors";
 
@@ -31,8 +31,8 @@ const PasswordRequirements = ({ password, isMobile }) => {
       color: RAZZMATAZZ_RED
     },
     [INPUT_STATE_VALID]: {
-      icon: <IconValid margin="0 0.5rem 0 0" />,
-      color: FOREST_GREEN
+      icon: <IconValid margin="0 0.5rem 0 0" bgFill={SEA_GREEN} />,
+      color: SEA_GREEN
     }
   };
 

package/src/components/atoms/password-requirements/PasswordRequirements.mdx

@@ -0,0 +1,39 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as PasswordRequirementsStories from './PasswordRequirements.stories.js';
+
+<Meta of={PasswordRequirementsStories} />
+
+<Title />
+
+PasswordRequirements is a small widget that can be used in addition to a form that requires a user to set a password. The widget displays a box listing requirements for the user's password, and whether the entered password meets those requirements.
+
+The requirements are currently hardcoded to meet the requirements for Navigate Frontend: passwords must be a minimum length of 8 characters and contain a number, uppercase letter, lowercase letter, and special character. Requirements can be changed or added to by modifying the code in the PasswordRequirements component.
+
+This component is *not* to be used with applications that support Okta SSO for user authentication, _unless_ they also support non-SSO-sign-on using User Management Service. For applications that exclusively use Okta SSO to manage user authentication, Okta provides its own password validation experience that can be used wholesale or forked.
+
+
+## Form Integration
+
+In order to properly demonstrate functionality, the PasswordRequirements story includes two FormInput components and Redux Freeform integration. The `password` prop required by PasswordRequirements takes the form of a Redux Freeform field object. This object _can_ be generated with [redux-freeform](https://github.com/CityBaseInc/redux-freeform). Below are example values for each prop with the minimum properties needed for a password field object.
+
+### field
+
+```
+{
+  "dirty": false,
+  "rawValue": "",
+  "errors": [
+    "error/REQUIRED",
+    "error/HAS_LENGTH",
+    "error/HAS_NUMBER",
+    "error/HAS_UPPERCASE_LETTER",
+    "error/HAS_LOWERCASE_LETTER",
+    "error/HAS_SPECIAL_CHARACTER"
+  ],
+  "hasErrors": true
+}
+```
+<Controls />
+
+<Story />