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

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

@@ -1,57 +1,163 @@
 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 fontWeights = {
-  FONT_WEIGHT_BOLD,
-  FONT_WEIGHT_SEMIBOLD,
-  FONT_WEIGHT_REGULAR
+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 variantsLabel = "variant";
-const variants = {
-  primary: "primary",
-  secondary: "secondary"
-};
-const defaultValue = "primary";
-const groupId = "props";
 
-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 default meta;
 
-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>
-);
+export const StandardInternalLink = {
+  render: args => (
+    <InternalLink {...args}>Cityville Activities Calendar</InternalLink>
+  ),
+  args: {
+    active: false,
+    to: "/activities-calendar"
+  }
+};
 
-const story = page({
-  title: "Components|Atoms/Link",
-  Component: InternalLink
-});
-export default story;
+export const StandardExternalLink = {
+  render: args => <ExternalLink {...args}>Austin City Hall</ExternalLink>
+};
+
+export const ActiveInternalLink = {
+  render: args => <InternalLink {...args}>Transaction History</InternalLink>,
+  args: {
+    active: "true",
+    to: "/transaction-history"
+  }
+};

package/src/components/atoms/loading/Loading.mdx

@@ -0,0 +1,13 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as LoadingStories from './Loading.stories.js';
+
+<Meta of={LoadingStories} />
+
+<Title />
+
+The Loading component is a small spinner animation that can be used to signal a loading state to a user. The spinner has a fixed size of 100px, and it is themed using the theme values in FCS. For a customizable size version, use the Spinner atom directly.
+
+<Story />
+
+<Controls />

package/src/components/atoms/loading/Loading.stories.js

@@ -0,0 +1,22 @@
+import Loading from "./Loading";
+import { Box } from "../layouts";
+
+const meta = {
+  title: "Atoms/Loading",
+  component: Loading,
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  tags: ["!autodocs"]
+};
+
+export default meta;
+
+export const Spinner = {
+  render: () => (
+    <Box>
+      <Loading />
+    </Box>
+  )
+};

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

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

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

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as LoadingLineStories from './LoadingLine.stories.js';
+
+<Meta of={LoadingLineStories} />
+
+<Title />
+
+The LoadingLine is a component with a gray ripple animation that can be used in place of an existing component as it renders. The LoadingLine can either be given an exact width and height using pixel strings, or it can be given an maximum and minimum width. If supplied with a maximum and minimum width, the component will have a random width within the range. Width values should be supplied as pixel values _without_ the "px" suffix. All supplied values will be applied as pixels in the component's style function.
+
+Using the minimum and maximum width values can be useful to represent a series of items without a fixed width, like text content, list items, or table values.
+
+<Story />
+
+<Controls />

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

@@ -1,28 +1,132 @@
-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;
+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/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 />