@nypl/design-system-react-components 0.25.0 → 0.25.1

package/src/components/Icons/IconTypes.tsx

@@ -1,76 +1,92 @@
 /* eslint-disable camelcase */
-export enum IconRotationTypes {
-  rotate0 = "rotate-0",
-  rotate90 = "rotate-90",
-  rotate180 = "rotate-180",
-  rotate270 = "rotate-270",
+export enum IconAlign {
+  Left = "left",
+  Right = "right",
+  None = "none",
 }
 
-export enum IconNames {
-  accessibility_full = "accessibility_full",
-  accessibility_partial = "accessibility_partial",
-  arrow = "arrow",
-  check = "check",
-  clock = "clock",
-  close = "close",
-  download = "download",
-  error_filled = "error_filled",
-  error_outline = "error_outline",
-  headset = "headset",
-  minus = "minus",
-  plus = "plus",
-  search = "search",
-  speaker_notes = "speaker_notes",
-  utility_account_filled = "utility_account_filled",
-  utility_account_unfilled = "utility_account_unfilled",
-  utility_hamburger = "utility_hamburger",
-  utility_search = "utility_search",
+export enum IconTypes {
+  Default = "default",
+  Breadcrumbs = "breadcrumbs",
 }
 
-export enum LogoNames {
-  brooklyn = "brooklyn",
-  logo_brooklyn = "logo_brooklyn",
-  logo_nypl = "logo_nypl",
-  logo_nypl_negative = "logo_nypl_negative",
-  logo_queens = "logo_queens",
-  lpa_negative = "lpa_negative",
-  lpa_positive = "lpa_positive",
-  nypl_circle_negative = "nypl_circle_negative",
-  nypl_circle_positive = "nypl_circle_positive",
-  nypl_full_lock_up_negative = "nypl_full_lock_up_negative",
-  nypl_full_lock_up = "nypl_full_lock_up",
-  nypl_no_lion_negative = "nypl_no_lion_negative",
-  nypl_no_lion_positive = "nypl_no_lion_positive",
-  queens_long = "queens_long",
-  queens_stacked = "queens_stacked",
-  schomburg_circle = "schomburg_circle",
-  schomburg_positive = "schomburg_positive",
-  simplye_black = "simplye_black",
-  simplye_color = "simplye_color",
-  snfl_negative = "snfl_negative",
-  snfl_positive = "snfl_positive",
+export enum IconRotationTypes {
+  Rotate0 = "rotate0",
+  Rotate90 = "rotate90",
+  Rotate180 = "rotate180",
+  Rotate270 = "rotate270",
 }
 
 export enum IconColors {
-  ui_black = "ui-black",
-  ui_white = "ui-white",
-  brand_primary = "brand-primary",
-  brand_secondary = "brand-secondary",
-  section_whats_on_primary = "section-whats-on-primary",
-  section_books_and_more_primary = "section-books-and-more-primary",
-  section_research_primary = "section-research-primary",
-  section_research_secondary = "section-research-secondary",
-  section_locations_primary = "section-locations-primary",
-  section_research_library_lpa = "section-research-library-lpa",
-  section_research_library_schomburg = "section-research-library-schomburg",
-  section_research_library_schwartzman = "section-research-library-schwartzman",
+  UiBlack = "ui.black",
+  UiWhite = "ui.white",
+  BrandPrimary = "brand.primary",
+  BrandSecondary = "brand.secondary",
+  SectionWhatsOnPrimary = "section.whats-on.primary",
+  SectionWhatsOnSecondary = "section.whats-on.secondary",
+  SectionBooksAndMorePrimary = "section.books-and-more.primary",
+  SectionBooksAndMoreSecondary = "section.books-and-more.secondary",
+  SectionResearchPrimary = "section.research.primary",
+  SectionResearchSecondary = "section.research.secondary",
+  SectionLocationsPrimary = "section.locations.primary",
+  SectionLocationsSecondary = "section.locations.secondary",
+  SectionBlogsPrimary = "section.blogs.primary",
+  SectionBlogsSecondary = "section.blogs.secondary",
+  SectionResearchLibraryLpa = "section.research-library.lpa",
+  SectionResearchLibrarySchomburg = "section.research-library.schomburg",
+  SectionResearchLibrarySchwartzman = "section.research-library.schwartzman",
 }
 
 export enum IconSizes {
-  small = "small",
-  medium = "medium",
-  large = "large",
-  xlarge = "xlarge",
-  xxlarge = "xxlarge",
-  xxxlarge = "xxxlarge",
+  Small = "small",
+  Medium = "medium",
+  Large = "large",
+  ExtraLarge = "xlarge",
+  ExtraExtraLarge = "xxlarge",
+  ExtraExtraExtraLarge = "xxxlarge",
+}
+
+export enum IconNames {
+  AccessibilityFull = "accessibility_full",
+  AccessibilityPartial = "accessibility_partial",
+  Arrow = "arrow",
+  Check = "check",
+  Clock = "clock",
+  Close = "close",
+  Download = "download",
+  ErrorFilled = "error_filled",
+  ErrorOutline = "error_outline",
+  Headset = "headset",
+  Minus = "minus",
+  Plus = "plus",
+  Search = "search",
+  SpeakerNotes = "speaker_notes",
+  UtilityAccountFilled = "utility_account_filled",
+  UtilityAccountUnfilled = "utility_account_unfilled",
+  UtilityHamburger = "utility_hamburger",
+  UtilitySearch = "utility_search",
+}
+
+export enum LogoNames {
+  Brooklyn = "brooklyn",
+  LogoBrooklyn = "logo_brooklyn",
+  LogoNypl = "logo_nypl",
+  LogoNyplNegative = "logo_nypl_negative",
+  LogoQueens = "logo_queens",
+  LpaNegative = "lpa_negative",
+  LpaPositive = "lpa_positive",
+  NyplCircleNegative = "nypl_circle_negative",
+  NyplCirclePositive = "nypl_circle_positive",
+  NyplFullLockUpNegative = "nypl_full_lock_up_negative",
+  NyplFullLockUp = "nypl_full_lock_up",
+  NyplNoLionNegative = "nypl_no_lion_negative",
+  NyplNoLionPositive = "nypl_no_lion_positive",
+  QueensLong = "queens_long",
+  QueensStacked = "queens_stacked",
+  SchomburgCircle = "schomburg_circle",
+  SchomburgPositive = "schomburg_positive",
+  SimplyeBlack = "simplye_black",
+  SimplyeColor = "simplye_color",
+  SnflNegative = "snfl_negative",
+  SnflPositive = "snfl_positive",
 }

package/src/components/Input/_Input.scss

@@ -38,7 +38,7 @@ $break-input-mobile: 400px;
   }
 
   &:disabled {
-    background-color: var(--ui-gray-xxlight);
+    background-color: var(--ui-gray-xx-light-cool);
     color: var(--ui-gray-xdark);
   }
 
@@ -53,7 +53,7 @@ $break-input-mobile: 400px;
   }
 
   &--error {
-    border: 1px solid var(--ui-error);
+    border: 1px solid var(--ui-error-primary);
   }
 }
 

package/src/components/Label/Label.stories.mdx

@@ -5,6 +5,7 @@ import {
   ArgsTable,
   Description,
 } from "@storybook/addon-docs/blocks";
+import { Box } from "@chakra-ui/react";
 
 import Label from "./Label";
 import { getCategory } from "../../utils/componentCategories";
@@ -16,7 +17,8 @@ import { getCategory } from "../../utils/componentCategories";
     jest: ["Label.test.tsx"],
   }}
   argTypes={{
-    attributes: { table: { disable: true } },
+    className: { table: { disable: true } },
+    id: { table: { disable: true } },
   }}
 />
 
@@ -25,7 +27,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.10`   |
-| Latest            | `0.24.0`   |
+| Latest            | `0.25.1`   |
 
 <Description of={Label} />
 
@@ -35,6 +37,7 @@ import { getCategory } from "../../utils/componentCategories";
     args={{
       text: "A label for a villager.",
       optReqFlag: "Required",
+      htmlFor: "id-of-input-element",
     }}
     argTypes={{
       optReqFlag: {
@@ -45,12 +48,30 @@ import { getCategory } from "../../utils/componentCategories";
       },
     }}
   >
-    {(args) => (
-      <Label htmlFor="some-input-element" id="label" {...args}>
-        {args.text}
-      </Label>
-    )}
+    {(args) => <Label {...args}>{args.text}</Label>}
   </Story>
 </Canvas>
 
 <ArgsTable story="Label" />
+
+## Required/Optional helper text
+
+An optional helper string can be rendered at the end of the `Label` text through
+the `optReqFlag` prop. Pass in either `"Required"`, `"Optional"`, or `""`. The
+default value is undefined for no helper text to appear.
+
+<Canvas>
+  <Story name="Required/Optional helper text">
+    <Box width="300px">
+      <Label htmlFor="some-id1" optReqFlag="">
+        No text
+      </Label>
+      <Label htmlFor="some-id2" optReqFlag="Required">
+        Required helper text
+      </Label>
+      <Label htmlFor="some-id3" optReqFlag="Optional">
+        Optional helper text
+      </Label>
+    </Box>
+  </Story>
+</Canvas>

package/src/components/Label/Label.test.tsx

@@ -1,13 +1,14 @@
 import * as React from "react";
 import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
 
 import Label from "./Label";
 
 describe("Label Accessibility", () => {
   it("passes axe accessibility test", async () => {
     const { container } = render(
-      <Label id="label" htmlFor="so-lonely">
+      <Label id="label" htmlFor="some-input-id">
         Cupcakes
       </Label>
     );
@@ -16,45 +17,75 @@ describe("Label Accessibility", () => {
 });
 
 describe("Label", () => {
-  it("Renders a <label> when passed text as children", () => {
+  it("renders a label element when passed text as children", () => {
     render(
-      <Label id="label" htmlFor="so-lonely">
+      <Label id="label" htmlFor="some-input-id">
         Cupcakes
       </Label>
     );
     expect(screen.getByText("Cupcakes")).toBeInTheDocument();
   });
 
-  it("Renders a <label> when passed element as children", () => {
+  it("renders a label element when passed element as children", () => {
     render(
-      <Label id="label" htmlFor="so-lonely">
+      <Label id="label" htmlFor="some-input-id">
         <span>Cupcakes</span>
       </Label>
     );
     expect(screen.getByText("Cupcakes")).toBeInTheDocument();
   });
 
-  it("Renders the optional or required helper text", () => {
-    const utils = render(
-      <Label id="label" htmlFor="so-lonely">
+  it("renders the optional or required helper text", () => {
+    const { rerender } = render(
+      <Label id="label" htmlFor="some-input-id">
         <span>Cupcakes</span>
       </Label>
     );
     expect(screen.queryByText("Optional")).not.toBeInTheDocument();
+    expect(screen.queryByText("Required")).not.toBeInTheDocument();
 
-    utils.rerender(
-      <Label id="label" htmlFor="so-lonely" optReqFlag="Optional">
+    rerender(
+      <Label id="label2" htmlFor="some-input-id" optReqFlag="Optional">
         <span>Cupcakes</span>
       </Label>
     );
     expect(screen.getByText("Optional")).toBeInTheDocument();
+    expect(screen.queryByText("Required")).not.toBeInTheDocument();
 
-    utils.rerender(
-      <Label id="label" htmlFor="so-lonely" optReqFlag="Required">
+    rerender(
+      <Label id="label3" htmlFor="some-input-id" optReqFlag="Required">
         <span>Cupcakes</span>
       </Label>
     );
     expect(screen.queryByText("Optional")).not.toBeInTheDocument();
     expect(screen.getByText("Required")).toBeInTheDocument();
   });
+
+  it("Renders the UI snapshot correctly", () => {
+    const simple = renderer
+      .create(
+        <Label id="label" htmlFor="some-input-id">
+          Cupcakes
+        </Label>
+      )
+      .toJSON();
+    const optional = renderer
+      .create(
+        <Label id="label2" htmlFor="some-input-id" optReqFlag="Optional">
+          Cupcakes
+        </Label>
+      )
+      .toJSON();
+    const required = renderer
+      .create(
+        <Label id="label3" htmlFor="some-input-id" optReqFlag="Required">
+          Cupcakes
+        </Label>
+      )
+      .toJSON();
+
+    expect(simple).toMatchSnapshot();
+    expect(optional).toMatchSnapshot();
+    expect(required).toMatchSnapshot();
+  });
 });

package/src/components/Label/Label.tsx

@@ -1,22 +1,17 @@
 import * as React from "react";
+import { Box, useMultiStyleConfig } from "@chakra-ui/react";
 
-import bem from "../../utils/bem";
+import generateUUID from "../../helpers/generateUUID";
 
 type optReqFlagType = "Required" | "Optional" | "" | undefined;
 
 interface LabelProps {
-  /** Additional attributes to pass to the <label> tag */
-  attributes?: { [key: string]: any };
-  /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-  blockName?: string;
-  /** className that appears in addition to "label" */
+  /** Additional CSS class name to render in the `label` element. */
   className?: string;
-  /** The id of the html element that this `Label` is describing */
-  htmlFor?: string;
+  /** The id of the html element that this `Label` is describing. */
+  htmlFor: string;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
-  /** Modifiers for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-  modifiers?: string[];
   /** Displays "Required" or "Optional" string alongside the label */
   optReqFlag?: optReqFlagType;
 }
@@ -24,36 +19,28 @@ interface LabelProps {
 /**
  * A label for form inputs. It should never be used alone.
  */
-export default function Label(props: React.PropsWithChildren<LabelProps>) {
+function Label(props: React.PropsWithChildren<LabelProps>) {
   const {
-    attributes,
-    blockName,
     children,
     className,
     htmlFor,
-    id,
-    modifiers = [],
+    id = generateUUID(),
     optReqFlag,
   } = props;
-  const baseClass = "label";
-  const labelAttributes = {
-    className: bem(baseClass, modifiers, blockName, [className]),
-    htmlFor,
-    id,
-  };
-  let helperString;
-
-  if (optReqFlag) {
-    helperString = (
-      <div className={bem("required-helper", [], baseClass)}>{optReqFlag}</div>
-    );
-  }
+  const styles = useMultiStyleConfig("Label", {});
 
-  return React.createElement(
-    "label",
-    labelAttributes,
-    attributes,
-    children,
-    helperString
+  return (
+    <Box
+      as="label"
+      id={id}
+      className={className}
+      htmlFor={htmlFor}
+      __css={styles}
+    >
+      {children}
+      {optReqFlag && <Box __css={styles.helper}>{optReqFlag}</Box>}
+    </Box>
   );
 }
+
+export default Label;

package/src/components/Label/__snapshots__/Label.test.tsx.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Label Renders the UI snapshot correctly 1`] = `
+<label
+  className="css-0"
+  htmlFor="some-input-id"
+  id="label"
+>
+  Cupcakes
+</label>
+`;
+
+exports[`Label Renders the UI snapshot correctly 2`] = `
+<label
+  className="css-0"
+  htmlFor="some-input-id"
+  id="label2"
+>
+  Cupcakes
+  <div
+    className="css-0"
+  >
+    Optional
+  </div>
+</label>
+`;
+
+exports[`Label Renders the UI snapshot correctly 3`] = `
+<label
+  className="css-0"
+  htmlFor="some-input-id"
+  id="label3"
+>
+  Cupcakes
+  <div
+    className="css-0"
+  >
+    Required
+  </div>
+</label>
+`;

package/src/components/Link/Link.stories.mdx

@@ -3,18 +3,21 @@ import {
   Story,
   Canvas,
   ArgsTable,
-  Preview,
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
-import Link from "./Link";
 import {
   BrowserRouter as Router,
   Link as ReactRouterLink,
 } from "react-router-dom";
+import { VStack } from "@chakra-ui/react";
+
+import Link from "./Link";
 import { LinkTypes } from "./LinkTypes";
 import Icon from "../Icons/Icon";
+import { IconAlign, IconSizes } from "../Icons/IconTypes";
 import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
 
 <Meta
   title={getCategory("Link")}
@@ -24,18 +27,18 @@ import { getCategory } from "../../utils/componentCategories";
     design: {
       type: "figma",
       url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=16115%3A407",
+        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=36854%3A24387",
     },
     jest: ["Link.test.tsx"],
   }}
   argTypes={{
-    blockName: { table: { disable: true } },
-    modifiers: { table: { disable: true } },
+    attributes: { table: { disable: true } },
     children: { table: { disable: true } },
     type: {
       control: {
         type: "select",
       },
+      options: LinkTypes,
     },
   }}
 />
@@ -45,11 +48,11 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.20.2`   |
+| Latest            | `0.25.1`   |
 
 <Description of={Link} />
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story
     name="Basic"
     args={{
@@ -65,7 +68,7 @@ import { getCategory } from "../../utils/componentCategories";
   >
     {(args) => <Link {...args}>Link</Link>}
   </Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="Basic" />
 
@@ -75,42 +78,35 @@ To render an `Icon` as part of the link, make sure that the `Link` component
 wraps the `Icon`. Use `type={LinkTypes.Action}` to apply appropriate styling to
 links with icons. Icons can be rendered to the left or right of the link text.
 
-<Preview>
+<Canvas>
   <Story name="With Icons">
-    <>
+    <VStack spacing="xs" align="flex-start">
       <Link type={LinkTypes.Action} href="#passed-in-link">
-        <Icon
-          name={"headset"}
-          modifiers={["left", "small"]}
-          decorative={true}
-        />
+        <Icon name="headset" align={IconAlign.Left} size={IconSizes.Small} />
         Headset Link
       </Link>
-      <br />
       <Link type={LinkTypes.Action} href="#passed-in-link">
-        <Icon name={"clock"} modifiers={["left", "small"]} decorative={true} />
+        <Icon name="clock" align={IconAlign.Left} size={IconSizes.Small} />
         Clock Link
       </Link>
-      <br />
       <Link type={LinkTypes.Action} href="#passed-in-link">
-        <Icon name={"check"} modifiers={["left", "small"]} decorative={true} />
+        <Icon name="check" align={IconAlign.Left} size={IconSizes.Small} />
         Check Link
       </Link>
-      <br />
       <Link type={LinkTypes.Action} href="#passed-in-link-right">
         Check Link Right
-        <Icon name={"check"} modifiers={["right", "small"]} decorative={true} />
+        <Icon name="check" align={IconAlign.Right} size={IconSizes.Small} />
       </Link>
-    </>
+    </VStack>
   </Story>
-</Preview>
+</Canvas>
 
 ## Anchor Element Rendering
 
 `Link` can wrap an existing `<a>` tag or it can use the `href` prop to generate
 an `<a>` tag.
 
-<Preview>
+<Canvas>
   <Story name="Anchor Element Rendering">
     <>
       This is a{" "}
@@ -124,11 +120,11 @@ an `<a>` tag.
       where the Link component uses the `href` prop and has a string-only child.
     </>
   </Story>
-</Preview>
+</Canvas>
 
 ## Link with Routers
 
-<Preview>
+<Canvas>
   <Story name="Link with Routers">
     <div>With React Router</div>
     <Router>
@@ -143,7 +139,7 @@ an `<a>` tag.
       <Link type={LinkTypes.Action}>Next Page</Link>
     </NextJsLink>
   </Story>
-</Preview>
+</Canvas>
 
 ### React Router
 
@@ -151,7 +147,7 @@ The Design System's `Link` component should wrap around `react-router`'s own
 `Link` component. To avoid name conflicts, rename either the Design System's
 or `react-router`'s `Link` component.
 
-```js
+```jsx
 import {
   BrowserRouter as Router,
   Link as ReactRouterLink,
@@ -184,13 +180,15 @@ import DS from "@nypl/design-system-react-components";
 </DS.Link>;
 ```
 
-<Preview>
-  <Router>
-    <Link type={LinkTypes.Action}>
-      <ReactRouterLink to="#">Next Page</ReactRouterLink>
-    </Link>
-  </Router>
-</Preview>
+<Canvas>
+  <DSProvider>
+    <Router>
+      <Link type={LinkTypes.Action}>
+        <ReactRouterLink to="#">Next Page</ReactRouterLink>
+      </Link>
+    </Router>
+  </DSProvider>
+</Canvas>
 
 ### NextJS
 
@@ -200,7 +198,7 @@ These props, along with an implicit `ref` from NextJS and the Design System's
 `Link` component `forwardRef` implementation, handle correctly routing between
 pages in a NextJS app.
 
-```js
+```jsx
 import { Link, LinkTypes } from "@nypl/design-system-react-components";
 
 /* This is just an example wrapper that works similarly to NextJS' `Link`
@@ -232,8 +230,10 @@ export const NextJsLink = (props) => (
   </div>
 );
 
-<Preview>
-  <NextJsLink href="#" passHref>
-    <Link type={LinkTypes.Action}>Next Page</Link>
-  </NextJsLink>
-</Preview>
+<Canvas>
+  <DSProvider>
+    <NextJsLink href="#" passHref>
+      <Link type={LinkTypes.Action}>Next Page</Link>
+    </NextJsLink>
+  </DSProvider>
+</Canvas>