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

package/src/components/Input/Input.stories.tsx

@@ -6,8 +6,6 @@ import Label from "../Label/Label";
 import Button from "../Button/Button";
 import { ButtonTypes } from "../Button/ButtonTypes";
 import HelperErrorText from "../HelperErrorText/HelperErrorText";
-// eslint-disable-next-line id-blacklist
-import { text, boolean, select, number } from "@storybook/addon-knobs";
 import { action } from "@storybook/addon-actions";
 import { getCategory } from "../../utils/componentCategories";
 
@@ -16,47 +14,24 @@ export default {
   component: Input,
 };
 
-let showLabel, showHelperText;
-
 export const input = () => (
   <>
-    {boolean("Show Label", true) ? (showLabel = true) : (showLabel = false)}
-    {showLabel && (
-      <Label
-        htmlFor="inputID"
-        optReqFlag={select(
-          "Optional/Required Flag",
-          ["Required", "Optional", ""],
-          "Required"
-        )}
-        id={"label"}
-      >
-        {text("Input Label", "Choose your islander name: ")}
-      </Label>
-    )}
+    <Label htmlFor="inputID" optReqFlag="Required" id={"label"}>
+      Choose your islander name:
+    </Label>
     <Input
       id="inputID"
       ariaLabel="Input Label"
       ariaLabelledBy={"helperText"}
-      required={boolean("Input Required", false)}
-      placeholder={text("Input Placeholder", "CoolPerson99")}
-      type={select("Input Type", InputTypes, InputTypes.text)}
-      disabled={boolean("Disabled", false)}
+      required={false}
+      placeholder="CoolPerson99"
+      type={InputTypes.text}
+      disabled={false}
     ></Input>
-    {boolean("Show Helper Text", true)
-      ? (showHelperText = true)
-      : (showHelperText = false)}
-    {showHelperText && (
-      <HelperErrorText
-        isError={boolean("Helper Text Errored", false)}
-        id={"helperText"}
-      >
-        {text(
-          "Helper Text Content",
-          "Once you pick a name for your islander it cannot be changed, so choose wisely!"
-        )}
-      </HelperErrorText>
-    )}
+    <HelperErrorText isInvalid={false} id={"helperText"}>
+      Once you pick a name for your islander it cannot be changed, so choose
+      wisely!
+    </HelperErrorText>
   </>
 );
 
@@ -64,8 +39,7 @@ input.storyName = "Input";
 input.parameters = {
   design: {
     type: "figma",
-    url:
-      "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11895%3A547",
+    url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11895%3A547",
   },
   jest: ["Input.test.tsx"],
 };
@@ -74,12 +48,7 @@ let groupErrored;
 
 export const inputGroup = () => (
   <fieldset className="fieldset">
-    {boolean("Input Group Errored", false)
-      ? (groupErrored = true)
-      : (groupErrored = false)}
-    <legend className="legend">
-      {text("Input Group Label", "Construction Time Request Form: ")}
-    </legend>
+    <legend className="legend">Construction Time Request Form:</legend>
     <div className="input-group">
       <div style={{ flex: "1" }}>
         <Label htmlFor="input1" id={"label1"}>
@@ -87,17 +56,13 @@ export const inputGroup = () => (
         </Label>
         <Input
           id="input1"
-          ariaLabelledBy={
-            groupErrored
-              ? "helperText1 sharedHelperText label1"
-              : "helperText1 label1"
-          }
+          ariaLabelledBy="helperText1 sharedHelperText label1"
           errored={groupErrored ? true : false}
           required={true}
           type={InputTypes.text}
         ></Input>
-        <HelperErrorText isError={false} id={"helperText1"}>
-          {text("Input 1 Helper Text", "E.g., 10am")}
+        <HelperErrorText isInvalid={false} id={"helperText1"}>
+          "E.g., 10am"
         </HelperErrorText>
       </div>
 
@@ -112,23 +77,15 @@ export const inputGroup = () => (
               ? "helperText2 sharedHelperText label2"
               : "helperText2 label2"
           }
-          errored={groupErrored ? true : false}
+          errored={false}
           required={true}
           type={InputTypes.text}
         ></Input>
-        <HelperErrorText isError={false} id={"helperText2"}>
-          {text("Input 2 Helper Text", "E.g., 11am")}
+        <HelperErrorText isInvalid={false} id={"helperText2"}>
+          E.g., 11am
         </HelperErrorText>
       </div>
     </div>
-    {groupErrored && (
-      <HelperErrorText isError={true} id={"sharedHelperText"}>
-        {text(
-          "Additional Error Text",
-          "Sorry villager! Those times are not available right now."
-        )}
-      </HelperErrorText>
-    )}
     <Button
       onClick={action("clicked")}
       id="button"
@@ -144,8 +101,7 @@ inputGroup.storyName = "Input Group";
 inputGroup.parameters = {
   design: {
     type: "figma",
-    url:
-      "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11895%3A547",
+    url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11895%3A547",
   },
   jest: ["Input.test.tsx"],
 };
@@ -165,11 +121,11 @@ export const inputAttributes = () => (
       attributes={{
         onBlur: action("onBlur"),
         onChange: action("onChange"),
-        maxLength: number("maxLength", 10),
-        tabIndex: number("tabIndex", 0),
+        maxLength: 10,
+        tabIndex: 0,
       }}
     ></Input>
-    <HelperErrorText isError={false} id="helperText-attrs">
+    <HelperErrorText isInvalid={false} id="helperText-attrs">
       {"Change the max length for 'text' input as an example! And note " +
         "the actions being called for the passed object in the `attributes` props."}
     </HelperErrorText>

package/src/components/Input/Input.test.tsx

@@ -98,7 +98,7 @@ describe("Input with Label", () => {
           placeholder="Input Placeholder"
           type={InputTypes.text}
         />
-        <HelperErrorText isError={false} id="helperText">
+        <HelperErrorText isInvalid={false} id="helperText">
           Helper Text Content
         </HelperErrorText>
       </>
@@ -140,7 +140,7 @@ describe("Input Group", () => {
               required={true}
               type={InputTypes.text}
             ></Input>
-            <HelperErrorText isError={false} id={"helperText1"}>
+            <HelperErrorText isInvalid={false} id={"helperText1"}>
               Input 1 Helper Text
             </HelperErrorText>
           </>
@@ -155,12 +155,12 @@ describe("Input Group", () => {
               required={true}
               type={InputTypes.text}
             ></Input>
-            <HelperErrorText isError={false} id={"helperText2"}>
+            <HelperErrorText isInvalid={false} id={"helperText2"}>
               Input 2 Helper Text
             </HelperErrorText>
           </>
         </>
-        <HelperErrorText isError={true} id={"sharedHelperText"}>
+        <HelperErrorText isInvalid={true} id={"sharedHelperText"}>
           Additional Error Text
         </HelperErrorText>
       </fieldset>

package/src/components/Input/_Input.scss

@@ -1,10 +1,10 @@
 $break-input-mobile: 400px;
 
 .input {
-  @include space-inset-xs;
-  @include space-stack-xs;
+  padding: var(--nypl-space-xs);
+  margin-bottom: var(--nypl-space-xs);
 
-  border: 1px solid var(--ui-gray-medium);
+  border: 1px solid var(--nypl-colors-ui-gray-medium);
 
   &[type="text"],
   &[type="number"],
@@ -17,43 +17,43 @@ $break-input-mobile: 400px;
 
     + .label {
       display: unset;
-      margin-left: var(--space-s);
+      margin-left: var(--nypl-space-s);
     }
   }
 
   &::-webkit-input-placeholder {
-    color: var(--ui-gray-dark);
+    color: var(--nypl-colors-ui-gray-dark);
   }
 
   &:-moz-placeholder {
-    color: var(--ui-gray-dark);
+    color: var(--nypl-colors-ui-gray-dark);
   }
 
   &:-ms-input-placeholder {
-    color: var(--ui-gray-dark);
+    color: var(--nypl-colors-ui-gray-dark);
   }
 
   &:hover {
-    border-color: var(--ui-gray-dark);
+    border-color: var(--nypl-colors-ui-gray-dark);
   }
 
   &:disabled {
-    background-color: var(--ui-gray-xxlight);
-    color: var(--ui-gray-xdark);
+    background-color: var(--nypl-colors-ui-gray-xx-light-cool);
+    color: var(--nypl-colors-ui-gray-xdark);
   }
 
   &:active,
   &:focus,
   &:active:hover,
   &:focus:hover {
-    border: 1px solid var(--ui-focus);
+    border: 1px solid var(--nypl-colors-ui-focus);
     box-shadow: 0;
-    outline: 1px solid var(--ui-focus);
+    outline: 1px solid var(--nypl-colors-ui-focus);
     z-index: 9999;
   }
 
   &--error {
-    border: 1px solid var(--ui-error);
+    border: 1px solid var(--nypl-colors-ui-error-primary);
   }
 }
 
@@ -63,7 +63,16 @@ $break-input-mobile: 400px;
     justify-content: space-between;
 
     > *:not(:last-child) {
-      @include space-inline-m;
+      margin-right: var(--nypl-space-m);
     }
   }
 }
+
+// Used in `Input.stories.tsx`
+.fieldset {
+  @include fieldset-reset;
+}
+.legend {
+  border: 0;
+  font-weight: 500;
+}

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>
+`;