@nypl/design-system-react-components 0.26.0 → 0.28.0

package/src/components/List/List.tsx

@@ -1,27 +1,25 @@
 import { As, Box, chakra, useStyleConfig } from "@chakra-ui/react";
 import * as React from "react";
 
-import { ListTypes } from "./ListTypes";
 import Heading from "../Heading/Heading";
-import { HeadingLevels } from "../Heading/HeadingTypes";
+
+export type ListTypes = "ol" | "ul" | "dl";
 interface DescriptionProps {
   term: string;
   description: string | JSX.Element;
 }
 export interface ListProps {
-  /** Optionally pass in additional Chakra-based styles. */
-  additionalStyles?: { [key: string]: any };
   /** ClassName you can add in addition to 'list' */
   className?: string;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
   /** Display the list in a row. */
   inline?: boolean;
-  /** Data to render if children are not passed. For `ListTypes.Ordered` and
-   * `ListTypes.Unordered` `List` types, the data structure is an array of
-   * strings to renders as `li` items. For `ListTypes.Description` `List` types,
-   * the data structure is an array of objects with `term` and `description`
-   * properties to render `dt` and `dd` elements, respectively.
+  /** Data to render if children are not passed. For `listTypes` orderd `"ol"`
+   * and unordered `"ul"` `List` types, the data structure is an array of strings
+   * to renders as `li` items. For descroption `"dl"` `List` types, the data
+   * structure is an array of objects with `term` and `description` properties
+   * to render `dt` and `dd` elements, respectively.
    */
   listItems?: (string | JSX.Element | DescriptionProps)[];
   /** Remove list styling. */
@@ -29,7 +27,7 @@ export interface ListProps {
   /** An optional title that will appear over the list. This prop only applies
    * to Description Lists. */
   title?: string;
-  /** The type of list: Ordered, Unordered, or Description. Unordered by default. */
+  /** The type of list: "ol", "ul", or "dl". "ul" by default. */
   type: ListTypes;
 }
 
@@ -40,7 +38,6 @@ export interface ListProps {
  */
 export const List = chakra((props: React.PropsWithChildren<ListProps>) => {
   const {
-    additionalStyles = {},
     children,
     className,
     id,
@@ -48,16 +45,15 @@ export const List = chakra((props: React.PropsWithChildren<ListProps>) => {
     listItems,
     noStyling = false,
     title,
-    type = ListTypes.Unordered,
+    type = "ul",
     ...rest
   } = props;
   const styles = useStyleConfig("List", { inline, noStyling, variant: type });
-  const finalStyles = { ...styles, ...additionalStyles };
   let listElement = null;
 
   // Either li/dt/dd children elements must be passed or the `listItems`
   // prop must be used.
-  if (children && (listItems || listItems?.length > 0)) {
+  if (children && listItems && listItems?.length > 0) {
     console.warn(
       "NYPL Reservoir List: Pass in either `<li>`, `<dt>`, or `<dd>` " +
         "children or use the `listItems` data prop. Do not use both."
@@ -75,17 +71,20 @@ export const List = chakra((props: React.PropsWithChildren<ListProps>) => {
   /**
    * This returns either the `children` elements passed to the `List` component
    * first, otherwise it will check and render the data passed into the
-   * `listItems` props based on the `ListType` type. If it is of type "Unordered"
-   * or "Ordered", it will return `li` elements. Otherwise, it will return a
-   * combination of `dt` and `dd` elements for the "Description" type.
+   * `listItems` props based on the `ListType` type. If it is of type unordered
+   * or ordered, it will return `li` elements. Otherwise, it will return a
+   * combination of `dt` and `dd` elements for the description type.
    */
   const listChildrenElms = (listType: ListTypes) => {
     if (children) {
       return children;
     }
-    if (listType === ListTypes.Ordered || listType === ListTypes.Unordered) {
+    if (!listItems) {
+      return null;
+    }
+    if (listType === "ol" || listType === "ul") {
       return listItems.map((item, i) => <li key={i}>{item}</li>);
-    } else if (listType === ListTypes.Description) {
+    } else if (listType === "dl") {
       return (listItems as DescriptionProps[]).map((item, i) => [
         <dt key={`${i}-term`}>{item.term}</dt>,
         <dd key={`${i}-des`}>{item.description}</dd>,
@@ -98,7 +97,7 @@ export const List = chakra((props: React.PropsWithChildren<ListProps>) => {
    * children are different HTML elements.
    */
   const checkListChildrenError = (listType: ListTypes) => {
-    React.Children.map(children, (child: React.ReactElement) => {
+    React.Children.map(children as JSX.Element, (child: React.ReactElement) => {
       if (child && child?.type !== "li" && child?.props?.mdxType !== "li") {
         console.warn(
           `NYPL Reservoir List: Direct children of \`List\` (${listType}) must be \`<li>\`s.`
@@ -111,7 +110,7 @@ export const List = chakra((props: React.PropsWithChildren<ListProps>) => {
    * children are different HTML elements.
    */
   const checkDescriptionChildrenError = () => {
-    React.Children.map(children, function (child: React.ReactElement) {
+    React.Children.map(children as JSX.Element, (child: React.ReactElement) => {
       if (
         child.type !== "dt" &&
         child.type !== "dd" &&
@@ -128,34 +127,24 @@ export const List = chakra((props: React.PropsWithChildren<ListProps>) => {
     });
   };
 
-  if (type === ListTypes.Ordered || type === ListTypes.Unordered) {
+  if (type === "ol" || type === "ul") {
     checkListChildrenError(type);
     listElement = (
       <Box
         as={type as As}
         id={id}
         className={className}
-        __css={finalStyles}
+        __css={styles}
         {...rest}
       >
         {listChildrenElms(type)}
       </Box>
     );
-  } else if (type === ListTypes.Description) {
+  } else if (type === "dl") {
     checkDescriptionChildrenError();
     listElement = (
-      <Box
-        as="section"
-        id={id}
-        className={className}
-        __css={finalStyles}
-        {...rest}
-      >
-        {title && (
-          <Heading id={`${id}-heading`} level={HeadingLevels.Two}>
-            {title}
-          </Heading>
-        )}
+      <Box as="section" id={id} className={className} __css={styles} {...rest}>
+        {title && <Heading id={`${id}-heading`}>{title}</Heading>}
         <dl>{listChildrenElms(type)}</dl>
       </Box>
     );

package/src/components/Logo/Logo.stories.mdx

@@ -8,18 +8,11 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import Logo from "./Logo";
-import { LogoNames, LogoSizes } from "./LogoTypes";
 import logoSvgs from "./LogoSvgs";
 import Heading from "../Heading/Heading";
-import { HeadingLevels } from "../Heading/HeadingTypes";
 import List from "../List/List";
-import { ListTypes } from "../List/ListTypes";
 import SimpleGrid from "../Grid/SimpleGrid";
 import { getCategory } from "../../utils/componentCategories";
-import { getStorybookEnumValues } from "../../utils/utils";
-
-export const namesEnumValues = getStorybookEnumValues(LogoNames, "LogoNames");
-export const sizesEnumValues = getStorybookEnumValues(LogoSizes, "LogoSizes");
 
 <Meta
   title={getCategory("Logo")}
@@ -36,14 +29,8 @@ export const sizesEnumValues = getStorybookEnumValues(LogoSizes, "LogoSizes");
     children: { table: { disable: true } },
     className: { control: false },
     id: { control: false },
-    name: {
-      control: { type: "select" },
-      options: namesEnumValues.options,
-    },
     size: {
-      control: { type: "select" },
-      table: { defaultValue: { summary: "LogoSizes.Medium" } },
-      options: sizesEnumValues.options,
+      table: { defaultValue: { summary: "medium" } },
     },
     title: {
       control: false,
@@ -57,7 +44,7 @@ export const sizesEnumValues = getStorybookEnumValues(LogoSizes, "LogoSizes");
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.9`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -78,20 +65,19 @@ export const sizesEnumValues = getStorybookEnumValues(LogoSizes, "LogoSizes");
   <Story
     name="Logo with Controls"
     args={{
-      additionalStyles: undefined,
       className: undefined,
       decorative: true,
       id: "logo-id",
-      name: "LogoNames.NYPLBlack",
-      size: "LogoSizes.Large",
+      name: "nyplFullBlack",
+      size: "large",
       title: undefined,
     }}
   >
     {(args) => (
       <div
         style={
-          args.name.indexOf("White") !== -1 ||
-          args.name.indexOf("Negative") !== -1
+          args.name.indexOf("white") !== -1 ||
+          args.name.indexOf("negative") !== -1
             ? {
                 backgroundColor: "var(--nypl-colors-ui-gray-xdark)",
                 display: "inline-block",
@@ -101,11 +87,7 @@ export const sizesEnumValues = getStorybookEnumValues(LogoSizes, "LogoSizes");
             : undefined
         }
       >
-        <Logo
-          name={namesEnumValues.getValue(args.name)}
-          size={sizesEnumValues.getValue(args.size)}
-          title={args.title}
-        />
+        <Logo {...args} />
       </div>
     )}
   </Story>
@@ -117,7 +99,7 @@ export const logoRow = (logo, opts = {}) => {
   // We'll use this setup function to render all the logos in a list item.
   // Some logos display better with a dark background.
   const styles = { textAlign: "center" };
-  const { size = LogoSizes.Large, displayValue } = opts;
+  const { size = "large", displayValue } = opts;
   let key = logo;
   if (logo.indexOf("White") !== -1 || logo.indexOf("Negative") !== -1) {
     styles.backgroundColor = "var(--nypl-colors-ui-gray-xdark)";
@@ -125,26 +107,77 @@ export const logoRow = (logo, opts = {}) => {
     styles.paddingBottom = "var(--nypl-space-l)";
     styles.paddingTop = "var(--nypl-space-l)";
   }
-  if (size !== LogoSizes.Large) {
+  if (size !== "large") {
     key += `-${size}`;
   }
   return (
     <div style={styles} key={key}>
-      <Heading level={HeadingLevels.Four}>{displayValue}</Heading>
-      <Logo name={LogoNames[logo]} size={size} />
+      <Heading level="four">{displayValue}</Heading>
+      <Logo name={logo} size={size} />
     </div>
   );
 };
 export const logos = [];
 export const sizes = [];
-for (const logo in LogoNames) {
-  logos.push(logoRow(logo, { displayValue: `LogoNames.${logo}` }));
+export const logoNameValues = [
+  "bplBlack",
+  "bplWhite",
+  "cleverColor",
+  "cleverWhite",
+  "firstbookColor",
+  "firstbookColorNegative",
+  "lpaColor",
+  "lpaBlack",
+  "lpaWhite",
+  "mlnBlack",
+  "mlnWhite",
+  "nyplFullBlack",
+  "nyplFullWhite",
+  "nyplLionBlack",
+  "nyplLionWhite",
+  "openebooksColor",
+  "openebooksNegative",
+  "openebooksWithTextColor",
+  "openebooksWithTextNegative",
+  "qplColor",
+  "qplBlack",
+  "qplWhite",
+  "qplAltBlack",
+  "qplAltWhite",
+  "reservoirIconColor",
+  "reservoirVerticalColor",
+  "schomburgColor",
+  "schomburgBlack",
+  "schomburgWhite",
+  "schomburgCircleColor",
+  "schomburgCircleBlack",
+  "schomburgCircleWhite",
+  "simplyeColor",
+  "simplyeBlack",
+  "simplyeWhite",
+  "snflBlack",
+  "snflWhite",
+  "treasuresColor",
+  "treasuresColorNegative",
+];
+export const logoSizeValues = [
+  "default",
+  "xxsmall",
+  "xsmall",
+  "small",
+  "medium",
+  "large",
+];
+for (const logo in logoNameValues) {
+  logos.push(
+    logoRow(logoNameValues[logo], { displayValue: logoNameValues[logo] })
+  );
 }
-for (const logoSize in LogoSizes) {
+for (const logoSize in logoSizeValues) {
   sizes.push(
-    logoRow("NYPLBlack", {
-      displayValue: `LogoSizes.${logoSize}`,
-      size: LogoSizes[logoSize],
+    logoRow("nyplFullBlack", {
+      displayValue: logoSizeValues[logoSize],
+      size: logoSizeValues[logoSize],
     })
   );
 }
@@ -155,11 +188,11 @@ export const allLogosGrid = (list) => (
 
 ## Accessibility
 
-For accessibility purposes, every Reservoir Design System (DS) `Logo` will 
-render the `svg` element with its `svg` file name in the `title` element. The 
-default text in the `title` element is the logo's code name. Pass in better 
-descriptive text in the `title` prop when using the `Logo` component in your 
-application. This will give screenreaders a better descriptive title for the 
+For accessibility purposes, every Reservoir Design System (DS) `Logo` will
+render the `svg` element with its `svg` file name in the `title` element. The
+default text in the `title` element is the logo's code name. Pass in better
+descriptive text in the `title` prop when using the `Logo` component in your
+application. This will give screenreaders a better descriptive title for the
 `svg` graphic.
 
 `Logos`s are decorative by default. This means that they are presentational and
@@ -174,15 +207,16 @@ Resources:
 
 ## Logo Sizes
 
-Update the size of the `Logo` component by passing the `size` prop with a value from
-`LogoSizes`. The `LogoSizes` enum can be found in`src/components/Logo/LogoTypes.tsx`.
+Update the size of the `Logo` component by passing the `size` prop with a value
+from the `LogoSizes` type. The values are `"default"`, `"xxsmall"`, `"xsmall"`,
+`"small"`, `"medium"`, and `"large"`.
 
-Note: `LogoSizes.Default` sets the width to `100%` and the rendered logo will expand to
+Note: `"default"` sets the width to `100%` and the rendered logo will expand to
 fill the full width of the parent element.
 
 ```jsx
 // Example
-<Logo name={LogoNames.NYPLBlack} size={LogoSizes.Large} />
+<Logo name="nyplFullBlack" size="large" />
 ```
 
 <Canvas>
@@ -191,11 +225,21 @@ fill the full width of the parent element.
 
 ## All Logos
 
-The `Logo` component contains the logos most commonly used by are listed available
-logos are listed in the `LogoNames` enum in `src/components/Logos/LogoTypes.tsx`.
-
-If you feel a necessary logo should be added to the `Logo` component, please reach out
-to the DS team.
+Update the icon of the `Logo` component by passing the `name` prop with a value
+from the `LogoNames` type. The values are `"bplBlack"`, `"bplWhite"`,
+`"cleverColor"`, `"cleverWhite"`, `"firstbookColor"`, `"firstbookColorNegative"`,
+`"lpaBlack"`, `"lpaColor"`, `"lpaWhite"`, `"mlnBlack"`, `"mlnWhite"`,
+`"nyplFullBlack"`, `"nyplFullWhite"`, `"nyplLionBlack"`, `"nyplLionWhite"`,
+`"openebooksColor"`, `"openebooksNegative"`, `"openebooksWithTextColor"`,
+`"openebooksWithTextNegative"`, `"qplAltBlack"`, `"qplAltWhite"`, `"qplBlack"`,
+`"qplColor"`, `"qplWhite"`, `"reservoirIconColor"`, `"reservoirVerticalColor"`,
+`"schomburgBlack"`, `"schomburgCircleBlack"`, `"schomburgCircleColor"`,
+`"schomburgCircleWhite"`, `"schomburgColor"`, `"schomburgWhite"`, `"simplyeBlack"`,
+`"simplyeWhite"`, `"simplyeColor"`, `"snflBlack"`, `"snflWhite"`, `"treasuresColor"`,
+`"treasuresColorNegative"`.
+
+If you feel a necessary logo should be added to the `Logo` component, please
+reach out to the DS team.
 
 <Canvas withToolbar>
   <Story name="All Logos">{allLogosGrid(logos)}</Story>
@@ -225,7 +269,7 @@ child to the `Logo` component.
   <Story
     name="Custom Logos"
     args={{
-      size: LogoSizes.Large,
+      size: "large",
     }}
   >
     {(args) => (

package/src/components/Logo/Logo.test.tsx

@@ -4,11 +4,10 @@ import { axe } from "jest-axe";
 import renderer from "react-test-renderer";
 
 import Logo from "./Logo";
-import { LogoNames, LogoSizes } from "./LogoTypes";
 
 describe("Logo Accessibility", () => {
   it("passes axe accessibility test", async () => {
-    const { container } = render(<Logo name={LogoNames.NYPLBlack} />);
+    const { container } = render(<Logo name="nyplFullBlack" />);
     expect(await axe(container)).toHaveNoViolations();
   });
 });
@@ -17,7 +16,7 @@ describe("Logo", () => {
   it("consoles a warning if both name and children are passed to Logo", () => {
     const warn = jest.spyOn(console, "warn");
     render(
-      <Logo name={LogoNames.NYPLBlack}>
+      <Logo name="nyplFullBlack">
         <svg viewBox="0 0 24 14" xmlns="http://www.w3.org/2000/svg">
           <path
             fillRule="evenodd"
@@ -51,7 +50,7 @@ describe("Logo", () => {
   });
 
   it("renders a logo based on the logo `name` prop", () => {
-    const { container } = render(<Logo name={LogoNames.NYPLBlack} />);
+    const { container } = render(<Logo name="nyplFullBlack" />);
     expect(container.querySelector("svg")).toBeInTheDocument();
   });
 
@@ -60,13 +59,13 @@ describe("Logo", () => {
   // In order to test this, we can check the `title` attribute in the svg
   // element itself. Inspect the `Logo` in Storybook to see the `title` element.
   it("renders a title element", () => {
-    const { container, rerender } = render(<Logo name={LogoNames.NYPLBlack} />);
+    const { container, rerender } = render(<Logo name="nyplFullBlack" />);
     expect(container.querySelector("svg")).toHaveAttribute(
       "title",
-      "logo_nypl_full_black logo"
+      "nyplFullBlack logo"
     );
 
-    rerender(<Logo name={LogoNames.NYPLBlack} title="title content" />);
+    rerender(<Logo name="nyplFullBlack" title="title content" />);
     expect(container.querySelector("svg")).toHaveAttribute(
       "title",
       "title content"
@@ -90,31 +89,23 @@ describe("Logo", () => {
 
   it("renders the UI snapshot correctly", () => {
     const standard = renderer
-      .create(<Logo id="test-logo" name={LogoNames.NYPLBlack} />)
+      .create(<Logo id="test-logo" name="nyplFullBlack" />)
       .toJSON();
     const withCustomSize = renderer
-      .create(
-        <Logo
-          id="test-logo-size"
-          name={LogoNames.NYPLBlack}
-          size={LogoSizes.Large}
-        />
-      )
+      .create(<Logo id="test-logo-size" name="nyplFullBlack" size="large" />)
       .toJSON();
     const withChakraProps = renderer
       .create(
         <Logo
           id="chakra"
-          name={LogoNames.NYPLBlack}
+          name="nyplFullBlack"
           p="20px"
           color="ui.error.primary"
         />
       )
       .toJSON();
     const withOtherProps = renderer
-      .create(
-        <Logo id="props" name={LogoNames.NYPLBlack} data-testid="props" />
-      )
+      .create(<Logo id="props" name="nyplFullBlack" data-testid="props" />)
       .toJSON();
 
     expect(standard).toMatchSnapshot();

package/src/components/Logo/Logo.tsx

@@ -6,12 +6,56 @@ import {
 } from "@chakra-ui/react";
 import * as React from "react";
 
-import { LogoNames, LogoSizes } from "./LogoTypes";
 import logoSvgs from "./LogoSvgs";
 
+export type LogoNames =
+  | "bplBlack"
+  | "bplWhite"
+  | "cleverColor"
+  | "cleverWhite"
+  | "firstbookColor"
+  | "firstbookColorNegative"
+  | "lpaBlack"
+  | "lpaColor"
+  | "lpaWhite"
+  | "mlnBlack"
+  | "mlnWhite"
+  | "nyplFullBlack"
+  | "nyplFullWhite"
+  | "nyplLionBlack"
+  | "nyplLionWhite"
+  | "openebooksColor"
+  | "openebooksNegative"
+  | "openebooksWithTextColor"
+  | "openebooksWithTextNegative"
+  | "qplAltBlack"
+  | "qplAltWhite"
+  | "qplBlack"
+  | "qplColor"
+  | "qplWhite"
+  | "reservoirIconColor"
+  | "reservoirVerticalColor"
+  | "schomburgBlack"
+  | "schomburgCircleBlack"
+  | "schomburgCircleColor"
+  | "schomburgCircleWhite"
+  | "schomburgColor"
+  | "schomburgWhite"
+  | "simplyeBlack"
+  | "simplyeWhite"
+  | "simplyeColor"
+  | "snflBlack"
+  | "snflWhite"
+  | "treasuresColor"
+  | "treasuresColorNegative";
+export type LogoSizes =
+  | "default"
+  | "xxsmall"
+  | "xsmall"
+  | "small"
+  | "medium"
+  | "large";
 export interface LogoProps {
-  /** Optionally pass in additional Chakra-based styles. */
-  additionalStyles?: { [key: string]: any };
   /** Optional className that will be added to the parent element */
   className?: string;
   /** Logos designated as decorative will be ignored by screenreaders. False
@@ -35,13 +79,12 @@ export interface LogoProps {
  */
 export const Logo = chakra((props: React.PropsWithChildren<LogoProps>) => {
   const {
-    additionalStyles = {},
     children,
     className,
     decorative = false,
     id,
     name,
-    size = LogoSizes.Medium,
+    size = "medium",
     title = `${name} logo`,
     ...rest
   } = props;
@@ -78,13 +121,7 @@ export const Logo = chakra((props: React.PropsWithChildren<LogoProps>) => {
   // render the SVG child with NYPL-theme styling.
   if (name) {
     const SvgComponent: any = logoSvgs[name];
-    return (
-      <ChakraIcon
-        as={SvgComponent}
-        {...logoProps}
-        __css={{ ...styles, ...additionalStyles }}
-      />
-    );
+    return <ChakraIcon as={SvgComponent} {...logoProps} __css={styles} />;
   }
 
   // If no `name` prop was passed, we expect a child SVG element to be passed.
@@ -104,11 +141,7 @@ export const Logo = chakra((props: React.PropsWithChildren<LogoProps>) => {
     );
   }
 
-  return (
-    <Box __css={styles} {...rest}>
-      {childSVG}
-    </Box>
-  );
+  return <Box __css={styles}>{childSVG}</Box>;
 });
 
 export default Logo;