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

package/src/components/atoms/layouts/Motion.styled.js

@@ -36,3 +36,39 @@ export const MotionWrapper = styled(motion.div)`
 
   ${({ extraStyles }) => extraStyles};
 `;
+
+export const MotionSpanWrapper = styled(motion.span)`
+  position: ${({ position }) => position};
+  display: ${({ display }) => display};
+  box-sizing: border-box;
+  padding: ${({ padding }) => padding};
+  border: ${({ borderShorthand }) => borderShorthand};
+  border-color: ${({ borderColor }) => borderColor};
+  border-size: ${({ borderSize }) => borderSize};
+  border-style: ${({ borderStyle }) => borderStyle};
+  border-width: ${({ borderWidth }) => borderWidth};
+  border-radius: ${({ borderRadius }) => borderRadius};
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  box-shadow: ${({ boxShadow }) => boxShadow};
+  min-height: ${({ minHeight }) => minHeight};
+  min-width: ${({ minWidth }) => minWidth};
+  height: ${({ height }) => height};
+  width: ${({ width }) => width};
+  text-align: ${({ textAlign }) => textAlign};
+  margin: ${({ margin }) => margin};
+
+  &:hover,
+  &:focus {
+    ${({ hoverStyles }) => hoverStyles};
+  }
+
+  &:active {
+    ${({ activeStyles }) => activeStyles};
+  }
+
+  &:disabled {
+    ${({ disabledStyles }) => disabledStyles};
+  }
+
+  ${({ extraStyles }) => extraStyles};
+`;

package/src/components/atoms/layouts/Stack.js

@@ -19,6 +19,7 @@ const Stack = ({
   children,
   direction = "column",
   justify,
+  extraStyles,
   ...rest
 }) => (
   <StackWrapper
@@ -27,6 +28,7 @@ const Stack = ({
     fullHeight={fullHeight}
     direction={direction}
     justify={justify}
+    extraStyles={extraStyles}
     {...rest}
   >
     {safeChildren(children, <Fragment />)}

package/src/components/atoms/layouts/Stack.styled.js

@@ -27,4 +27,6 @@ export const StackWrapper = styled.div`
     }
   `
       : ``};
+
+  ${({ extraStyles }) => extraStyles}
 `;

package/src/components/atoms/line-item/LineItem.mdx

@@ -0,0 +1,28 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as LineItemStories from './LineItem.stories.js';
+
+<Meta of={LineItemStories} />
+
+<Title />
+
+The LineItem component is small component that formats the description, subDescription, amount, and optionally quantity of a line item. LineItems are typically used in checkout flows and as a part of transaction details.
+
+The default styling of the LineItem uses flexbox. The description and subDescription are left-justified, while the formatted amount string is right-justified. An item's quantity, if displayed, sits evenly between the description and amount string. By default, elements of the LineItem have no gap between them. As shown below, the LineItem sizes itself to the width of its parent container, so gaps between items can be controlled by the size of the LineItem's parent.
+
+LineItems are typically rendered inside of other display components, like a DisplayBox or Card, as seen in the Line Item With Quantity story.
+
+The LineItem component can take the following props:
+
+- description (required, main description of the lineItem),
+- subDescription (optional, but should not be `null`),
+- amount (required, pre-formatted money string),
+- displayQuantity (optional, quantity of the item, if its display is desired)
+- customAttributes (optional, array of item's custom attributes, used in conjunction with visibleFields)
+- visibleFields (optional, an array that is a subset of customAttributes to display below the subDescription)
+
+NOTE: The LineItem currently supports unused functionality that can display a subset of an item's custom attributes as "visible fields". If this functionality is used in the future, a new story should be added to demonstrate it.
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>

package/src/components/atoms/line-item/LineItem.stories.js

@@ -0,0 +1,95 @@
+import React from "react";
+import LineItem from "./LineItem";
+import DisplayBox from "../display-box/DisplayBox";
+import { Box } from "../layouts";
+
+const meta = {
+  title: "Atoms/LineItem",
+  component: LineItem,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    description: "",
+    subDescription: "",
+    amount: "",
+    customAttributes: undefined,
+    visibleFields: [],
+    displayQuantity: null
+  },
+  argTypes: {
+    description: {
+      description: "The main description of the lineItem",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    subDescription: {
+      description: "Secondary description of the lineItem",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    amount: {
+      description: "The amount in a formatted string of the lineItem",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    customAttributes: {
+      description:
+        "A lineItem's custom attributes, currently unused functionality",
+      table: {
+        type: { summary: "array" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    visibleFields: {
+      description:
+        "An array of customAttributes to display below the subDescription, currently unused",
+      table: {
+        type: { summary: "array" },
+        defaultValue: { summary: [] }
+      }
+    },
+    displayQuantity: {
+      description:
+        "The quantity of the lineItem. Will only display if provided.",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const BasicLineItem = {
+  args: {
+    description: "Dog Registration Permit",
+    subDescription: "Small dogs under 50lbs (valid until 2026)",
+    amount: "$75.00"
+  }
+};
+
+const FancyLineItem = props => (
+  <DisplayBox>
+    <Box minWidth="400px" padding="0">
+      <LineItem
+        description="Masked Ball Permits"
+        subDescription="One permit per 10 attendees"
+        amount="$625.00"
+        displayQuantity={25}
+      />
+    </Box>
+  </DisplayBox>
+);
+
+export const LineItemWithQuantity = {
+  render: args => <FancyLineItem {...args} />
+};

package/src/components/atoms/link/ExternalLink.d.ts

@@ -9,6 +9,7 @@ export interface ExternalLinkProps {
   weight?: string;
   extraStyles?: string;
   variant?: string;
+  containerTabIndex?: string;
   tabIndex?: string;
   dataQa?: string;
   ariaLabel?: string;

package/src/components/atoms/link/ExternalLink.js

@@ -5,6 +5,8 @@ import { createThemeValues } from "../../../util/themeUtils";
 import { StyledExternalLink } from "./ExternalLink.styled";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 import { safeChildren } from "../../../util/general";
+import { Box } from "../layouts";
+import { LINK_TEXT_DECORATION } from "../../../constants/style_constants";
 
 const ExternalLink = forwardRef(
   (
@@ -16,9 +18,11 @@ const ExternalLink = forwardRef(
       weight = FONT_WEIGHT_REGULAR,
       extraStyles = ``,
       variant = "primary",
+      containerTabIndex = "-1",
       tabIndex = "0",
       dataQa,
       ariaLabel,
+      isUnderlined = true,
       children
     },
     ref
@@ -30,27 +34,41 @@ const ExternalLink = forwardRef(
       "Link",
       variant
     );
+    const handleKeyDown = event => {
+      // This is to address an issue on Safari where the link's tab order and Enter key were not being recognized
+      if (event.key === "Enter" || event.keyCode === 13) {
+        if (newTab) {
+          window.open(href, "_blank");
+        } else {
+          window.location.href = href;
+        }
+      }
+    };
 
     return (
-      <StyledExternalLink
-        href={href}
-        target={newTab ? "_blank" : ""}
-        color={themeValues.externalLinkColor}
-        size={size}
-        lineheight={lineHeight}
-        weight={weight}
-        hovercolor={themeValues.hoverColor}
-        activeColor={themeValues.activeColor}
-        fontFamily={themeValues.fontFamily}
-        tabIndex={tabIndex}
-        extrastyles={extraStyles}
-        rel={newTab ? "noopener" : ""}
-        data-qa={dataQa}
-        aria-label={ariaLabel}
-        ref={ref}
-      >
-        {safeChildren(children, <span />)}
-      </StyledExternalLink>
+      <Box padding="0" tabIndex={containerTabIndex} onKeyDown={handleKeyDown}>
+        <StyledExternalLink
+          href={href}
+          target={newTab ? "_blank" : ""}
+          color={themeValues.externalLinkColor}
+          size={size}
+          lineheight={lineHeight}
+          weight={weight}
+          hovercolor={themeValues.hoverColor}
+          activeColor={themeValues.activeColor}
+          fontFamily={themeValues.fontFamily}
+          tabIndex={tabIndex}
+          extrastyles={`text-decoration: ${
+            isUnderlined ? LINK_TEXT_DECORATION : "none"
+          }; ${extraStyles}`}
+          rel={newTab ? "noopener" : ""}
+          data-qa={dataQa}
+          aria-label={ariaLabel}
+          ref={ref}
+        >
+          {safeChildren(children, <span />)}
+        </StyledExternalLink>
+      </Box>
     );
   }
 );

package/src/components/atoms/link/ExternalLink.styled.js

@@ -26,11 +26,13 @@ export const StyledExternalLink = styled(
 
   &:hover {
     color: ${({ hoverColor }) => hoverColor};
+    text-decoration: ${LINK_TEXT_DECORATION};
   }
 
   &:focus {
     outline: 3px solid ${ROYAL_BLUE};
     outline-offset: 2px;
+    text-decoration: ${LINK_TEXT_DECORATION};
   }
 
   &:active {

package/src/components/atoms/link/InternalLink.js

@@ -19,7 +19,12 @@ const InternalLink = forwardRef(
       margin,
       tabIndex = "0",
       dataQa,
-      extraStyles = ``
+      extraStyles = ``,
+      isUnderlined = true,
+      hoverUnderline = true,
+      extraHoverStyles = ``,
+      extraActiveStyles = ``,
+      extraFocusStyles = ``
     },
     ref
   ) => {
@@ -44,7 +49,12 @@ const InternalLink = forwardRef(
         hoverColor={themeValues.hoverColor}
         activeColor={themeValues.activeColor}
         tabIndex={tabIndex}
+        underlined={isUnderlined}
+        hoverUnderline={hoverUnderline}
         extrastyles={extraStyles}
+        extraHoverStyles={extraHoverStyles}
+        extraActiveStyles={extraActiveStyles}
+        extraFocusStyles={extraFocusStyles}
         data-qa={dataQa}
         ref={ref}
       >

package/src/components/atoms/link/InternalLink.styled.js

@@ -15,7 +15,19 @@ const { LINK_TEXT_DECORATION } = styleConstants;
 export const StyledInternalLink = styled(
   forwardRef(
     (
-      { hoverColor, activeColor, active, color, extrastyles, ...props },
+      {
+        hoverColor,
+        activeColor,
+        active,
+        color,
+        extrastyles,
+        underlined,
+        hoverUnderline,
+        extraHoverStyles,
+        extraActiveStyles,
+        extraFocusStyles,
+        ...props
+      },
       ref
     ) => <Link {...props} ref={ref} />
   )
@@ -28,19 +40,27 @@ export const StyledInternalLink = styled(
   font-size: ${({ fontSize }) => fontSize};
   font-family: ${({ fontFamily }) => fontFamily};
   margin: ${({ margin }) => margin};
-  text-decoration: ${LINK_TEXT_DECORATION};
+  text-decoration: ${({ underlined }) =>
+    underlined ? LINK_TEXT_DECORATION : "none"};
 
   &:hover {
     color: ${({ hoverColor }) => hoverColor};
+    text-decoration: ${({ hoverUnderline }) =>
+      hoverUnderline ? LINK_TEXT_DECORATION : "none"};
+    ${({ extraHoverStyles }) => extraHoverStyles}
   }
 
   &:focus {
     outline: 3px solid ${ROYAL_BLUE};
     outline-offset: 2px;
+    text-decoration: ${({ hoverUnderline }) =>
+      hoverUnderline ? LINK_TEXT_DECORATION : "none"};
+    ${({ extraFocusStyles }) => extraFocusStyles}
   }
 
   &:active {
     color: ${({ activeColor }) => activeColor};
+    ${({ extraActiveStyles }) => extraActiveStyles}
   }
 
   ${({ extrastyles }) => extrastyles}

package/src/components/atoms/link/Link.mdx

@@ -0,0 +1,19 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as LinkStories from './Link.stories.js';
+
+<Meta of={LinkStories} />
+
+<Title />
+
+The Link component comes in two varieties: InternalLink and ExternalLink. We have two components because most of our frontend applications rely on some version of react-router for internal routing. The InternalLink component is a wrapper that applies react-router-dom's `<Link />` component, while ExternalLink uses a plain `<a />` tag. Either link component can be used as a wrapper around arbitrary children.
+
+Due to the components being written at different times, they have similar, but not identical, props. The props table identifies which props apply to InternalLinks and which apply to ExternalLinks.
+
+Currently, the InternalLink has a minor bug where it will not apply a theme color for a non-active, non-hover state. At the moment, the only way to get InternalLinks to apply the correct color is to pass the theme color in to the component using the `color` prop.
+
+<Controls />
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>

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

@@ -0,0 +1,183 @@
+import React from "react";
+import InternalLink from "./InternalLink";
+import ExternalLink from "./ExternalLink";
+
+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,
+    containerTabIndex: 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 }
+      }
+    },
+    containerTabIndex: {
+      description: "Override for tab index value for link's container",
+      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 }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const StandardInternalLink = {
+  render: args => (
+    <InternalLink {...args}>Cityville Activities Calendar</InternalLink>
+  ),
+  args: {
+    active: false,
+    to: "/activities-calendar"
+  }
+};
+
+export const InternalLinkNoUnderline = {
+  render: args => (
+    <InternalLink {...args} isUnderlined={false}>
+      Cityville Activities Calendar
+    </InternalLink>
+  ),
+  args: {
+    active: true,
+    to: "/activities-calendar"
+  }
+};
+
+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

@@ -1,21 +1,33 @@
 import React from "react";
 import { LoadingPill } from "./LoadingPill.styled";
+import { colors } from "../../../constants";
 
 const LoadingLine = ({
   minWidth,
   maxWidth,
   exactWidth = null,
   height = "16px",
-  margin = "0px"
-}) => (
-  <LoadingPill
-    margin={margin}
-    height={height}
-    width={
-      exactWidth ||
-      Math.floor(Math.random() * (maxWidth - minWidth + 1)) + minWidth
-    }
-  />
-);
+  margin = "0px",
+  backgroundColor = colors.SEASHELL_WHITE,
+  foregroundColor = colors.ALABASTER_WHITE,
+  ...props
+}) => {
+  const calculatedWidth = Math.floor(
+    Math.random() * (parseInt(maxWidth) - parseInt(minWidth) + 1) +
+      parseInt(minWidth)
+  );
+
+  return (
+    <LoadingPill
+      aria-label="loading"
+      margin={margin}
+      height={height}
+      width={exactWidth || calculatedWidth}
+      backgroundColor={backgroundColor}
+      foregroundColor={foregroundColor}
+      {...props}
+    />
+  );
+};
 
 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 />