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

package/src/components/Icons/IconTypes.tsx

@@ -1,72 +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",
+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/Image/Image.stories.tsx

@@ -2,9 +2,10 @@ import * as React from "react";
 
 import Image from "./Image";
 import { text, boolean, select } from "@storybook/addon-knobs";
+import { getCategory } from "../../utils/componentCategories";
 
 export default {
-  title: "Image",
+  title: getCategory("Image"),
   component: Image,
 };
 

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

@@ -0,0 +1,77 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  ArgsTable,
+  Description,
+} from "@storybook/addon-docs/blocks";
+import { Box } from "@chakra-ui/react";
+
+import Label from "./Label";
+import { getCategory } from "../../utils/componentCategories";
+
+<Meta
+  title={getCategory("Label")}
+  component={Label}
+  parameters={{
+    jest: ["Label.test.tsx"],
+  }}
+  argTypes={{
+    className: { table: { disable: true } },
+    id: { table: { disable: true } },
+  }}
+/>
+
+# Label
+
+| Component Version | DS Version |
+| ----------------- | ---------- |
+| Added             | `0.0.10`   |
+| Latest            | `0.25.1`   |
+
+<Description of={Label} />
+
+<Canvas>
+  <Story
+    name="Label"
+    args={{
+      text: "A label for a villager.",
+      optReqFlag: "Required",
+      htmlFor: "id-of-input-element",
+    }}
+    argTypes={{
+      optReqFlag: {
+        control: {
+          type: "select",
+        },
+        options: ["Required", "Optional", ""],
+      },
+    }}
+  >
+    {(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,63 +1,46 @@
 import * as React from "react";
-import bem from "../../utils/bem";
+import { Box, useMultiStyleConfig } from "@chakra-ui/react";
 
-export interface LabelOptions {
-  labelContent?: JSX.Element;
-  id?: string;
-  htmlFor?: string;
-}
+import generateUUID from "../../helpers/generateUUID";
 
-interface LabelProps {
-  /** Additional attributes to pass to the <label> tag */
-  attributes?: { [key: string]: any };
+type optReqFlagType = "Required" | "Optional" | "" | undefined;
 
-  /** 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" */
+interface LabelProps {
+  /** 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 label */
-  optReqFlag?: string;
+  /** Displays "Required" or "Optional" string alongside the label */
+  optReqFlag?: optReqFlagType;
 }
 
-/** A Label for form inputs.
- * It should never be used alone.
+/**
+ * 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 styles = useMultiStyleConfig("Label", {});
 
-  const baseClass = "label";
-  let helperString;
-
-  if (optReqFlag) {
-    helperString = (
-      <div className={bem("required-helper", [], baseClass)}>{optReqFlag}</div>
-    );
-  }
-
-  const labelAttributes = {
-    id: id,
-    htmlFor: htmlFor,
-    className: bem(baseClass, modifiers, blockName, [className]),
-  };
-  return React.createElement(
-    "label",
-    labelAttributes,
-    attributes,
-    props.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>
+`;