@nypl/design-system-react-components 0.25.3 → 0.25.7

package/src/components/DatePicker/DatePicker.tsx

@@ -1,15 +1,16 @@
 import React, { useState, forwardRef } from "react";
 import ReactDatePicker from "react-datepicker";
 
-import { FormRow, FormField } from "../Form/Form";
 import { DatePickerTypes } from "./DatePickerTypes";
+import Fieldset from "../Fieldset/Fieldset";
+import { FormRow, FormField } from "../Form/Form";
+import { FormSpacing } from "../Form/FormTypes";
+import HelperErrorText from "../HelperErrorText/HelperErrorText";
 import TextInput, {
   InputProps,
   TextInputRefType,
 } from "../TextInput/TextInput";
-import HelperErrorText from "../HelperErrorText/HelperErrorText";
 import generateUUID from "../../helpers/generateUUID";
-import Fieldset from "../Fieldset/Fieldset";
 import { useMultiStyleConfig } from "@chakra-ui/system";
 
 // The object shape for the DatePicker's start and end date state values.
@@ -214,7 +215,9 @@ const DateRangeRow: React.FC<DateRangeRowProps> = ({
   children,
 }) =>
   isDateRange ? (
-    <FormRow id={`${id}-form-row`}>{children}</FormRow>
+    <FormRow id={`${id}-form-row`} gap={FormSpacing.ExtraSmall}>
+      {children}
+    </FormRow>
   ) : (
     <>{children}</>
   );

package/src/components/DatePicker/_DatePicker.scss

@@ -19,18 +19,18 @@
     &--keyboard-selected,
     &--in-range,
     &--in-selecting-range {
-      background-color: $black;
+      background-color: var(--nypl-colors-ui-black);
       border-radius: 0;
-      color: $white;
+      color: var(--nypl-colors-ui-white);
       opacity: 0.3;
     }
 
     // Selected states.
     &-text--selected,
     &--selected {
-      background-color: $black;
+      background-color: var(--nypl-colors-ui-black);
       border-radius: 0;
-      color: $white;
+      color: var(--nypl-colors-ui-white);
       opacity: 1;
     }
   }

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

@@ -18,7 +18,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 1`] = `
       </div>
     </legend>
     <div
-      className="css-7ft6bq"
+      className="css-ahcv85"
       id="basic-form-row"
     >
       <div
@@ -50,6 +50,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 1`] = `
                 onClick={[Function]}
                 onFocus={[Function]}
                 required={false}
+                step={null}
                 type="text"
                 value="1988-01-02"
               />
@@ -86,6 +87,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 1`] = `
                 onClick={[Function]}
                 onFocus={[Function]}
                 required={false}
+                step={null}
                 type="text"
                 value="1988-02-02"
               />
@@ -116,7 +118,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 2`] = `
       </div>
     </legend>
     <div
-      className="css-7ft6bq"
+      className="css-ahcv85"
       id="no-label-form-row"
     >
       <div
@@ -148,6 +150,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 2`] = `
                 onClick={[Function]}
                 onFocus={[Function]}
                 required={false}
+                step={null}
                 type="text"
                 value="1988-01-02"
               />
@@ -184,6 +187,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 2`] = `
                 onClick={[Function]}
                 onFocus={[Function]}
                 required={false}
+                step={null}
                 type="text"
                 value="1988-02-02"
               />
@@ -214,7 +218,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 3`] = `
       </div>
     </legend>
     <div
-      className="css-7ft6bq"
+      className="css-ahcv85"
       id="custom-format-form-row"
     >
       <div
@@ -246,6 +250,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 3`] = `
                 onClick={[Function]}
                 onFocus={[Function]}
                 required={false}
+                step={null}
                 type="text"
                 value="1988/02/01"
               />
@@ -282,6 +287,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 3`] = `
                 onClick={[Function]}
                 onFocus={[Function]}
                 required={false}
+                step={null}
                 type="text"
                 value="1988/02/02"
               />
@@ -312,7 +318,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 4`] = `
       </div>
     </legend>
     <div
-      className="css-7ft6bq"
+      className="css-ahcv85"
       id="invalid-form-row"
     >
       <div
@@ -345,6 +351,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 4`] = `
                 onClick={[Function]}
                 onFocus={[Function]}
                 required={false}
+                step={null}
                 type="text"
                 value="1988-01-02"
               />
@@ -396,6 +403,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 4`] = `
                 onClick={[Function]}
                 onFocus={[Function]}
                 required={false}
+                step={null}
                 type="text"
                 value="1988-02-02"
               />
@@ -449,7 +457,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 5`] = `
       </div>
     </legend>
     <div
-      className="css-7ft6bq"
+      className="css-ahcv85"
       id="disabled-form-row"
     >
       <div
@@ -481,6 +489,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 5`] = `
                 onClick={[Function]}
                 onFocus={[Function]}
                 required={false}
+                step={null}
                 type="text"
                 value="1988-01-02"
               />
@@ -517,6 +526,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 5`] = `
                 onClick={[Function]}
                 onFocus={[Function]}
                 required={false}
+                step={null}
                 type="text"
                 value="1988-02-02"
               />
@@ -616,7 +626,11 @@ exports[`DatePicker Single input renders the UI snapshot correctly 2`] = `
             onFocus={[Function]}
             required={false}
             type="text"
+<<<<<<< HEAD
+            value="2021-11-17"
+=======
             value="1988-01-02"
+>>>>>>> development
           />
         </div>
       </div>

package/src/components/Form/Form.stories.mdx

@@ -3,7 +3,6 @@ import {
   Story,
   Canvas,
   ArgsTable,
-  Preview,
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
@@ -57,7 +56,7 @@ The `Form` component renders a standard `<form>` element and should be used to h
 
 `FormRow` should be used as a parent of multiple `FormField` components when you need to render multiple input components in a horizontal row.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story
     name="Form"
     args={{
@@ -187,7 +186,7 @@ The `Form` component renders a standard `<form>` element and should be used to h
       </Form>
     )}
   </Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="Form" />
 
@@ -254,7 +253,7 @@ By default, the `Form` component will handle the NYPL spacing around form input
 
 Below are the spacing variants available with the `FormSpacing` enum.
 
-<Preview>
+<Canvas>
   <Story
     name="Spacing Variants"
     args={{
@@ -263,7 +262,7 @@ Below are the spacing variants available with the `FormSpacing` enum.
   >
     {getForms(sizes)}
   </Story>
-</Preview>
+</Canvas>
 
 ## Example Code
 

package/src/components/Grid/SimpleGrid.stories.mdx

@@ -161,6 +161,7 @@ for (const icon in IconNames) {
   const iname = `Example icon: ${IconNames[icon]}`;
   const iconRender = (
     <Icon
+      key={icon}
       name={IconNames[icon]}
       size={IconSizes.ExtraExtraExtraLarge}
       titleText={iname}

package/src/components/Hero/HeroTypes.tsx

@@ -10,6 +10,7 @@ export enum HeroTypes {
   FiftyFifty = "fiftyfifty",
 }
 
+// Only used for internal purposes.
 export const HeroSecondaryTypes = [
   HeroTypes.Secondary,
   HeroTypes.SecondaryBooksAndMore,

package/src/components/HorizontalRule/HorizontalRule.stories.mdx

@@ -3,7 +3,6 @@ import {
   Story,
   Canvas,
   ArgsTable,
-  Preview,
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
@@ -43,8 +42,8 @@ The `HorizontalRule` component renders a basic `<hr>` element. The `height`,
 number, a `px` value, a `em` value, or a `rem` value. Otherwise, the default
 value of "2px" will be used.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story name="HorizontalRule">{(args) => <HorizontalRule {...args} />}</Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="HorizontalRule" />

package/src/components/Icons/Icon.stories.mdx

@@ -28,8 +28,7 @@ import { getCategory } from "../../utils/componentCategories";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10734%3A3945",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10734%3A3945",
     },
     jest: ["Icon.test.tsx"],
   }}
@@ -45,7 +44,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.4`    |
-| Latest            | `0.25.3`   |
+| Latest            | `0.25.4`   |
 
 <Description of={Icon} />
 

package/src/components/Icons/IconSvgs.tsx

@@ -2,6 +2,9 @@
 import accessibility_full from "../../../icons/svg/accessibility_full.svg";
 import accessibility_partial from "../../../icons/svg/accessibility_partial.svg";
 import action_check_circle from "../../../icons/svg/action_check_circle.svg";
+import action_help_default from "../../../icons/svg/action_help_default.svg";
+import action_help_outline from "../../../icons/svg/action_help_outline.svg";
+import action_launch from "../../../icons/svg/action_launch.svg";
 import arrow from "../../../icons/svg/arrow.svg";
 import brooklyn from "../../../icons/svg/brooklyn.svg";
 import check from "../../../icons/svg/check.svg";
@@ -51,6 +54,9 @@ export default {
   accessibility_full,
   accessibility_partial,
   action_check_circle,
+  action_help_default,
+  action_help_outline,
+  action_launch,
   arrow,
   brooklyn,
   check,

package/src/components/Icons/IconTypes.tsx

@@ -50,6 +50,9 @@ export enum IconNames {
   AccessibilityFull = "accessibility_full",
   AccessibilityPartial = "accessibility_partial",
   ActionCheckCircle = "action_check_circle",
+  ActionHelpDefault = "action_help_default",
+  ActionHelpOutline = "action_help_outline",
+  ActionLaunch = "action_launch",
   Arrow = "arrow",
   Check = "check",
   Clock = "clock",

package/src/components/Image/Image.stories.mdx

@@ -20,8 +20,7 @@ import { getCategory } from "../../utils/componentCategories";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11896%3A45379",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11896%3A45379",
     },
     jest: ["Image.test.tsx"],
   }}
@@ -37,7 +36,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.6`    |
-| Latest            | `0.25.2`   |
+| Latest            | `0.25.3`   |
 
 <Description of={Image} />
 

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
-        isInvalid={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 isInvalid={false} id={"helperText1"}>
-          {text("Input 1 Helper Text", "E.g., 10am")}
+          "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 isInvalid={false} id={"helperText2"}>
-          {text("Input 2 Helper Text", "E.g., 11am")}
+          E.g., 11am
         </HelperErrorText>
       </div>
     </div>
-    {groupErrored && (
-      <HelperErrorText isInvalid={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,8 +121,8 @@ export const inputAttributes = () => (
       attributes={{
         onBlur: action("onBlur"),
         onChange: action("onChange"),
-        maxLength: number("maxLength", 10),
-        tabIndex: number("tabIndex", 0),
+        maxLength: 10,
+        tabIndex: 0,
       }}
     ></Input>
     <HelperErrorText isInvalid={false} id="helperText-attrs">

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-xx-light-cool);
-    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-primary);
+    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/Modal/Modal.stories.mdx

@@ -3,7 +3,7 @@ import {
   Meta,
   Story,
   ArgsTable,
-  Preview,
+  Canvas,
   Description,
 } from "@storybook/addon-docs/blocks";
 import Modal from "./Modal";
@@ -118,11 +118,11 @@ export const ModalStory = (args) => {
   );
 };
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story name="Basic" args={{ open: false }}>
     {(args) => <ModalStory {...args} />}
   </Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="Basic" />
 

package/src/components/Modal/_Modal.scss

@@ -5,9 +5,9 @@
 }
 
 .modal {
-  @include space-inset-s;
+  padding: var(--nypl-space-s);
 
-  background-color: var(--ui-gray-x-light-warm);
+  background-color: var(--nypl-colors-ui-gray-x-light-warm);
   height: 100vh;
   left: 0;
   overflow-y: auto;

package/src/components/Notification/Notification.stories.mdx

@@ -39,7 +39,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.23.2`   |
-| Latest            | `0.25.2`   |
+| Latest            | `0.25.4`   |
 
 <Description of={Notification} />
 

package/src/components/Notification/Notification.tsx

@@ -11,7 +11,7 @@ import { NotificationTypes } from "./NotificationTypes";
 import generateUUID from "../../helpers/generateUUID";
 
 interface BaseProps {
-  /** Optional prop to control text alignment of the `Notification` content */
+  /** Optional prop to control text alignment in `NotificationContent` */
   alignText?: boolean;
   /** Optional prop to control horizontal alignment of the `Notification` content */
   centered?: boolean;
@@ -22,7 +22,12 @@ interface BaseProps {
   notificationType?: NotificationTypes;
 }
 
-export interface NotificationProps extends BaseProps {
+// Used for `NotificationHeading` and `Notification`
+type BasePropsWithoutAlignText = Omit<BaseProps, "alignText">;
+// Used for `NotificationContent`
+type BasePropsWithoutCentered = Omit<BaseProps, "centered">;
+
+export interface NotificationProps extends BasePropsWithoutAlignText {
   /** Additional `className` to add.  */
   className?: string;
   /** Optional prop to control whether a `Notification` can be dismissed
@@ -43,7 +48,9 @@ export interface NotificationProps extends BaseProps {
 /**
  * NotificationHeading child-component.
  */
-export function NotificationHeading(props: React.PropsWithChildren<BaseProps>) {
+export function NotificationHeading(
+  props: React.PropsWithChildren<BasePropsWithoutAlignText>
+) {
   const { centered, children, icon, notificationType } = props;
   const styles = useMultiStyleConfig("NotificationHeading", {
     centered,
@@ -62,7 +69,9 @@ export function NotificationHeading(props: React.PropsWithChildren<BaseProps>) {
 /**
  * NotificationContent child-component.
  */
-export function NotificationContent(props: React.PropsWithChildren<BaseProps>) {
+export function NotificationContent(
+  props: React.PropsWithChildren<BasePropsWithoutCentered>
+) {
   const { alignText, children, icon, notificationType } = props;
   const styles = useMultiStyleConfig("NotificationContent", {
     alignText,