@thecb/components 10.12.3-beta.0 → 10.12.3

package/src/components/atoms/link/Link.stories.js

@@ -1,163 +1,57 @@
 import React from "react";
+import { boolean, select, text, number } from "@storybook/addon-knobs";
+import page from "../../../../.storybook/page";
 import InternalLink from "./InternalLink";
 import ExternalLink from "./ExternalLink";
+import {
+  FONT_WEIGHT_BOLD,
+  FONT_WEIGHT_SEMIBOLD,
+  FONT_WEIGHT_REGULAR
+} from "../../../constants/style_constants";
+import * as colors from "../../../constants/colors";
 
-const meta = {
-  title: "Atoms/Link",
-  component: InternalLink,
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["!autodocs"],
-  args: {
-    to: undefined,
-    href: undefined,
-    size: undefined,
-    weight: undefined,
-    color: undefined,
-    lineHeight: undefined,
-    active: undefined,
-    fontWeight: undefined,
-    fontSize: undefined,
-    margin: undefined,
-    tabIndex: undefined,
-    extraStyles: undefined,
-    dataQa: undefined,
-    ref: undefined,
-    ariaLabel: undefined,
-    newTab: false,
-    children: undefined
-  },
-  argTypes: {
-    to: {
-      description: "The destination for an InternalLink like /activities",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    href: {
-      description:
-        "The destination for an ExternalLink like www.eunasolutions.com",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    size: {
-      description: "Font size for an ExternalLink",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    weight: {
-      description: "Font weight for an ExternalLink",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    fontWeight: {
-      description: "Font weight for an InternalLink",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    fontSize: {
-      description: "Font size for an InternalLink",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    color: {
-      description: "Color value to use for InternalLinks",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    lineHeight: {
-      description: "Line height for a link",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    active: {
-      description: "Whether an InternalLink should use active color styling",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    margin: {
-      description: "Margin to apply to InternalLink element",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    tabIndex: {
-      description: "Override for tab index value for link",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    extraStyles: {
-      description: "Optional extra css styles to apply to link",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    dataQa: {
-      description: "data-qa value to use for E2E testing libraries",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    ariaLabel: {
-      description: "aria-label value for an ExternalLink",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    newTab: {
-      description: "Whether an ExternalLink should open in a new browser tab",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    }
-  }
+const fontWeights = {
+  FONT_WEIGHT_BOLD,
+  FONT_WEIGHT_SEMIBOLD,
+  FONT_WEIGHT_REGULAR
 };
-
-export default meta;
-
-export const StandardInternalLink = {
-  render: args => (
-    <InternalLink {...args}>Cityville Activities Calendar</InternalLink>
-  ),
-  args: {
-    active: false,
-    to: "/activities-calendar"
-  }
+const variantsLabel = "variant";
+const variants = {
+  primary: "primary",
+  secondary: "secondary"
 };
+const defaultValue = "primary";
+const groupId = "props";
 
-export const StandardExternalLink = {
-  render: args => <ExternalLink {...args}>Austin City Hall</ExternalLink>
-};
+export const internalLink = () => (
+  <InternalLink
+    variant={select(variantsLabel, variants, defaultValue, groupId)}
+    to={text("to", "https://google.com", "props")}
+    extraStyles={text("extraStyles", "text-align: center;", "props")}
+    margin={number("margin", 0, { min: 0, max: 99 }, "props")}
+    fontWeight={select("fontWeight", fontWeights, 400, "props")}
+    color={select("color", colors, "black", "props")}
+  >
+    Internal Link
+  </InternalLink>
+);
 
-export const ActiveInternalLink = {
-  render: args => <InternalLink {...args}>Transaction History</InternalLink>,
-  args: {
-    active: "true",
-    to: "/transaction-history"
-  }
-};
+export const externalLink = () => (
+  <ExternalLink
+    variant={select(variantsLabel, variants, defaultValue, groupId)}
+    href={text("href", "https://google.com", "props")}
+    newTab={boolean("newTab", true, "props")}
+    extraStyles={text("extraStyles", "text-align: center;", "props")}
+    margin={number("margin", 0, { min: 0, max: 99 }, "props")}
+    weight={select("weight", fontWeights, 400, "props")}
+    color={select("color", colors, "black", "props")}
+  >
+    External Link
+  </ExternalLink>
+);
+
+const story = page({
+  title: "Components|Atoms/Link",
+  Component: InternalLink
+});
+export default story;

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

@@ -7,19 +7,15 @@ const LoadingLine = ({
   exactWidth = null,
   height = "16px",
   margin = "0px"
-}) => {
-  const calculatedWidth = Math.floor(
-    Math.random() * (parseInt(maxWidth) - parseInt(minWidth) + 1) +
-      parseInt(minWidth)
-  );
-
-  return (
-    <LoadingPill
-      margin={margin}
-      height={height}
-      width={exactWidth || calculatedWidth}
-    />
-  );
-};
+}) => (
+  <LoadingPill
+    margin={margin}
+    height={height}
+    width={
+      exactWidth ||
+      Math.floor(Math.random() * (maxWidth - minWidth + 1)) + minWidth
+    }
+  />
+);
 
 export default LoadingLine;

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

@@ -1,132 +1,28 @@
-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>
-  )
-};
+import React from "react";
+import page from "../../../../.storybook/page";
+import LoadingLine from "../../atoms/loading-line";
+
+const numberOfRows = 10;
+const rowWidths = [50, 100, 50, 100, 50];
+
+export const loadingLine = () => (
+  <table>
+    {[...Array(numberOfRows)].map(r => (
+      <tr>
+        {rowWidths.map(rw => (
+          <td>
+            <LoadingLine exactWidth={rw} />
+          </td>
+        ))}
+      </tr>
+    ))}
+  </table>
+);
+
+loadingLine.storyName = "Loading Line";
+
+const story = page({
+  title: "Components|Atoms/LoadingLine",
+  Component: LoadingLine
+});
+export default story;

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

@@ -1,244 +1,31 @@
-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 }
-      }
-    }
-  }
-};
+import { text, select, boolean } from "@storybook/addon-knobs";
 
-export default meta;
+import NavFooter from "./NavFooter";
+import page from "../../../../.storybook/page";
+import * as colors from "../../../constants/colors";
 
-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 story = page({
+  title: "Components|Atoms/NavFooter",
+  Component: NavFooter
+});
+export default story;
 
-const copyright = (
-  <Box padding="0.5rem">
-    <Text variant="pXS" color={WHITE}>
-      © 2024 City of Cityville
-    </Text>
-  </Box>
+const Left = () => (
+  <div style={{ border: "2px solid black", width: "50px" }}>Left Content</div>
 );
 
-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 Right = () => (
+  <div style={{ border: "2px solid black", width: "50px" }}>Right Content</div>
 );
 
-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 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")}
+  />
 );
-
-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>
-  )
-};