@thecb/components 10.12.6-beta.0 → 11.0.0-beta.0

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

@@ -1,31 +1,244 @@
+import NavFooter from "./NavFooter";
+import { Box, Cluster, Stack } from "../layouts";
+import ButtonWithAction from "../button-with-action";
 import React from "react";
-import { text, select, boolean } from "@storybook/addon-knobs";
+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";
 
-import NavFooter from "./NavFooter";
-import page from "../../../../.storybook/page";
-import * as colors from "../../../constants/colors";
+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 }
+      }
+    }
+  }
+};
 
-const story = page({
-  title: "Components|Atoms/NavFooter",
-  Component: NavFooter
-});
-export default story;
+export default meta;
 
-const Left = () => (
-  <div style={{ border: "2px solid black", width: "50px" }}>Left Content</div>
+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 Right = () => (
-  <div style={{ border: "2px solid black", width: "50px" }}>Right Content</div>
+const copyright = (
+  <Box padding="0.5rem">
+    <Text variant="pXS" color={WHITE}>
+      © 2024 City of Cityville
+    </Text>
+  </Box>
 );
 
-export const navFooter = () => (
-  <NavFooter
-    leftContent={<Left />}
-    rightContent={<Right />}
-    $headerHeight={text("headerHeight", "105px", "props")}
-    backgroundColor={select("activeColor", colors, "white", "props")}
-    footerPadding={text("footerPadding", "1.5rem 1rem", "props")}
-    isMobile={boolean("isMobile", false, "props")}
-  />
+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

@@ -1,29 +1,130 @@
+import NavHeader from "./NavHeader";
+import { Box, Cover } from "../layouts";
+import HamburgerButton from "../hamburger-button";
 import React from "react";
-import { text, number, select } from "@storybook/addon-knobs";
+import { fn } from "@storybook/test";
+import ImageBox from "../image-box/ImageBox";
+import {
+  CATSKILL_WHITE,
+  DUSTY_GREY,
+  ROYAL_BLUE_VIVID,
+  SEASHELL_WHITE
+} from "../../../constants/colors";
 
-import NavHeader from "./NavHeader";
-import page from "../../../../.storybook/page";
-import * as colors 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 }
+      }
+    }
+  }
+};
 
-const story = page({
-  title: "Components|Atoms/NavHeader",
-  Component: NavHeader
-});
-export default story;
+export default meta;
 
-const Left = () => (
-  <div style={{ border: "2px solid black", width: "50px" }}>Left Content</div>
+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 Right = () => (
-  <div style={{ border: "2px solid black", width: "50px" }}>Right Content</div>
+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 navHeader = () => (
-  <NavHeader
-    leftContent={<Left />}
-    rightContent={<Right />}
-    headerHeight={text("headerHeight", "105px", "props")}
-    backgroundColor={select("activeColor", colors, "white", "props")}
-  />
-);
+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.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 />