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

package/src/components/TextInput/TextInput.tsx

@@ -1,106 +1,111 @@
 import * as React from "react";
-import bem from "../../utils/bem";
-import { TextInputTypes, TextInputFormats } from "./TextInputTypes";
+import {
+  Box,
+  Input as ChakraInput,
+  Textarea as ChakraTextarea,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
+
+import {
+  TextInputTypes,
+  TextInputFormats,
+  TextInputVariants,
+} from "./TextInputTypes";
 import Label from "../Label/Label";
 import HelperErrorText from "../HelperErrorText/HelperErrorText";
 import generateUUID from "../../helpers/generateUUID";
 
 export interface InputProps {
-  /** Additional attributes to pass to the `<input>` tag */
+  /** Additional attributes to pass to the `<input>` or `<textarea>` element */
   attributes?: { [key: string]: any };
-  /** HTML Input types as defined by MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input */
-  type?: TextInputTypes;
-  /** Will add 'aria-required: true' to input */
-  required?: boolean;
+  /** A class name for the TextInput parent div. */
+  className?: string;
+  /** Populates the HelperErrorText for the standard state */
+  helperText?: string;
+  /** ID that other components can cross reference for accessibility purposes */
+  id?: string;
+  /** Populates the HelperErrorText for the error state */
+  invalidText?: string;
+  /** Adds the `disabled` and `aria-disabled` prop to the input when true */
+  isDisabled?: boolean;
+  /** Adds errored styling to the input/textarea and helper text elements */
+  isInvalid?: boolean;
+  /** Will add `required` and `aria-required` props to the input/textarea elements */
+  isRequired?: boolean;
   /** Provides text for a `Label` component if `showLabel` is set to true;
-   * populates a `aria-label` sttribute if `showLabel` is set to false. */
+   * populates an `aria-label` attribute if `showLabel` is set to false. */
   labelText: string;
+  /** The action to perform on the `input`/`textarea`'s onChange function  */
+  onChange?: (
+    event:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.ChangeEvent<HTMLTextAreaElement>
+  ) => void;
+  /** Populates the placeholder for the input/textarea elements */
+  placeholder?: string;
   /** Offers the ability to show the label onscreen or hide it. Refer to the
    * `labelText` property for more information. */
   showLabel?: boolean;
   /** Offers the ability to show the "Required"/"Optional" label onscreen or
    * hide it. True by default. */
   showOptReqLabel?: boolean;
-  /** Populates the HelperErrorText for standard state */
-  helperText?: string;
-  /** Populates the HelperErrorText for error state */
-  invalidText?: string;
-  /** Populates the placeholder of the input */
-  placeholder?: string;
-  /** Populates the value of the input */
+  /** HTML Input types as defined by MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input */
+  type?: TextInputTypes;
+  /** Populates the value of the input/textarea elements */
   value?: string;
-  /** className you can add in addition to 'textinput' */
-  className?: string;
-  /** ID that other components can cross reference for accessibility purposes */
-  id?: string;
-  /** Helper for modifiers array; adds 'errored' styling */
-  errored?: boolean;
-  /** Adds the 'disabled' prop to the input when true */
-  disabled?: boolean;
-  /** Modifiers array for use with BEM. See how to work with modifiers and BEM
-   * here: http://getbem.com/introduction/ */
-  modifiers?: string[];
-  /** The action to perform on the `<input>`'s onChange function  */
-  onChange?: (
-    event:
-      | React.ChangeEvent<HTMLInputElement>
-      | React.ChangeEvent<HTMLTextAreaElement>
-  ) => void;
+  /** The variant to display. */
+  variantType?: TextInputVariants;
 }
 
-/** The type used for `ref`s. We want to extend both `input` and `textarea`
+/**
+ * The type used for `ref`s. We want to extend both `input` and `textarea`
  * since both are available to create through `TextInput`.
  */
 export type TextInputRefType = HTMLInputElement & HTMLTextAreaElement;
 
-/** Renders either an `input` element with a specified type or a `textarea`
- * element. All types will render an accessible Label component and an optional
- * HelperErrorText component.
+/**
+ * Renders either an `input` element with a specified type or a `textarea`
+ * element. All types will render an accessible `Label` component and an
+ * optional `HelperErrorText` component.
  */
 const TextInput = React.forwardRef<TextInputRefType, InputProps>(
   (props, ref: React.Ref<TextInputRefType>) => {
     const {
       attributes = {},
-      type = TextInputTypes.text,
-      required,
-      labelText,
-      showLabel = true,
-      showOptReqLabel = true,
+      className,
       helperText,
+      id = generateUUID(),
       invalidText,
+      isDisabled = false,
+      isInvalid = false,
+      isRequired = false,
+      labelText,
+      onChange,
       placeholder,
+      showLabel = true,
+      showOptReqLabel = true,
+      type = TextInputTypes.text,
       value,
-      className,
-      disabled,
-      errored,
-      onChange,
-      modifiers = [],
-      id = generateUUID(),
+      variantType = TextInputVariants.Default,
     } = props;
-
+    const styles = useMultiStyleConfig("TextInput", { variant: variantType });
     const isTextArea = type === TextInputTypes.textarea;
     const isHidden = type === TextInputTypes.hidden;
-    const optReqFlag = required ? "Required" : "Optional";
-    const errorOutput = invalidText
+    const optReqFlag = isRequired ? "Required" : "Optional";
+    const finalInvalidText = invalidText
       ? invalidText
       : "There is an error related to this field.";
-    let footnote;
+    let footnote: string | React.ReactNode = isInvalid
+      ? finalInvalidText
+      : helperText;
+    let fieldOutput;
     let options;
 
-    if (!showLabel) attributes["aria-label"] = labelText;
-    if (helperText) attributes["aria-describedby"] = helperText;
-
-    if (errored) {
-      modifiers.push("error");
-    }
-    if (isTextArea) {
-      modifiers.push("textarea");
-    }
-
-    if (errored) {
-      footnote = errorOutput;
-    } else {
-      footnote = helperText;
+    if (!showLabel) {
+      attributes["aria-label"] =
+        labelText && footnote ? `${labelText} - ${footnote}` : labelText;
+    } else if (helperText) {
+      attributes["aria-describedby"] = `${id}-helperText`;
     }
 
     if (
@@ -118,54 +123,55 @@ const TextInput = React.forwardRef<TextInputRefType, InputProps>(
       );
     }
 
-    options = {
-      id,
-      className: bem("inputfield", modifiers, "", [className]),
-      "aria-required": required,
-      "aria-hidden": isHidden,
-      disabled,
-      required,
-      placeholder,
-      onChange,
-      ref,
-      ...attributes,
-    };
+    // When the type is "hidden", the input element needs fewer attributes.
+    options = isHidden
+      ? { id, "aria-hidden": isHidden, onChange, ref }
+      : {
+          id,
+          "aria-required": isRequired,
+          isDisabled,
+          isRequired,
+          isInvalid,
+          placeholder,
+          onChange,
+          ref,
+          ...attributes,
+        };
     // For `input` and `textarea`, all attributes are the same but `input`
     // also needs `type` and `value` to render correctly.
     if (!isTextArea) {
       options = { type, value, ...options } as any;
+      fieldOutput = <ChakraInput {...options} __css={styles.input} />;
+    } else {
+      fieldOutput = (
+        <ChakraTextarea {...options} __css={styles.textarea}>
+          {value}
+        </ChakraTextarea>
+      );
     }
 
-    const fieldOutput = React.createElement(
-      isTextArea ? "textarea" : "input",
-      options,
-      isTextArea ? value : null
-    );
-
-    const transformedInput = (
-      <div className="textinput">
+    return (
+      <Box __css={styles} className={className}>
         {labelText && showLabel && !isHidden && (
           <Label
             htmlFor={id}
             optReqFlag={showOptReqLabel && optReqFlag}
-            id={id + `-label`}
+            id={`${id}-label`}
           >
             {labelText}
           </Label>
         )}
         {fieldOutput}
-        {((helperText && !isHidden) || errored) && (
-          <HelperErrorText isError={errored} id={id + `-helperText`}>
-            {footnote}
-          </HelperErrorText>
+        {footnote && !isHidden && (
+          <Box __css={styles.helper} aria-disabled={isDisabled}>
+            <HelperErrorText isError={isInvalid} id={`${id}-helperText`}>
+              {footnote}
+            </HelperErrorText>
+          </Box>
         )}
-      </div>
+      </Box>
     );
-
-    return transformedInput;
   }
 );
 
-TextInput.displayName = "TextInput";
-
 export default TextInput;

package/src/components/TextInput/TextInputTypes.tsx

@@ -23,6 +23,12 @@ export enum TextInputFormats {
   url = "https://domain.com",
 }
 
+export enum TextInputVariants {
+  Default = "default",
+  SearchBar = "searchBar",
+  SearchBarSelect = "searchBarSelect",
+}
+
 /*
 export enum TextInputPatterns {
   // eslint-disable-next-line prettier/prettier

package/src/components/VideoPlayer/_VideoPlayer.scss

@@ -14,7 +14,7 @@
     }
 
     &--errored {
-      background-color: var(--ui-gray-warm-light);
+      background-color: var(--ui-gray-light-warm);
       height: auto;
       padding: var(--space-s);
     }

package/src/docs/Chakra.stories.mdx

@@ -211,11 +211,11 @@ the `variants` object as in the following example.
   @include button-base;
 
   background-color: var(--ui-white);
-  border: 1px solid var(--ui-gray-light);
+  border: 1px solid var(--ui-gray-light-cool);
   color: inherit;
 
   &:hover {
-    background-color: var(--ui-gray-xxlight);
+    background-color: var(--ui-gray-xx-light-cool);
   }
 }
 
@@ -227,10 +227,10 @@ const Button = {
     secondary: {
       bg: "ui.white",
       border: "1px solid",
-      borderColor: "ui.gray.light",
+      borderColor: "ui.gray.light-cool",
       color: "inherit",
       _hover: {
-        bg: "ui.gray.xxlight",
+        bg: "ui.gray.xx-light-cool",
       },
     },
     // ... other variants,

package/src/docs/Intro.stories.mdx

@@ -4,24 +4,26 @@ import { HeroTypes } from "../components/Hero/HeroTypes.tsx";
 import Heading from "../components/Heading/Heading.tsx";
 import Image from "../components/Image/Image.tsx";
 import getCSSVariable from "../helpers/getCSSVariable";
+import DSProvider from "../theme/provider";
 
 <Meta title="Introduction" />
 
 # NYPL Design System
 
-<Hero
-  heroType={HeroTypes.FiftyFifty}
-  subHeaderText="With 92 locations across the Bronx, Manhattan, and Staten Island, The New York Public Library is an essential part of neighborhoods across the city. Visit us today."
-  image={
-    <Image
-      src="https://cdn-d8.nypl.org/s3fs-public/styles/2_1_960/public/2020-07/SASB_06_29_2020_Lions_mask-00207%20copy_0.jpeg?h=c8e955ed&itok=n_GLQgoe"
-      blockName="hero"
-      alt=""
-    />
-  }
-  backgroundColor={getCSSVariable("--section-books-and-more-primary")}
-  foregroundColor={getCSSVariable("--ui-white")}
-/>
+<DSProvider>
+  <Hero
+    heroType={HeroTypes.FiftyFifty}
+    subHeaderText="With 92 locations across the Bronx, Manhattan, and Staten Island, The New York Public Library is an essential part of neighborhoods across the city. Visit us today."
+    image={
+      <Image
+        src="https://cdn-d8.nypl.org/s3fs-public/styles/2_1_960/public/2020-07/SASB_06_29_2020_Lions_mask-00207%20copy_0.jpeg?h=c8e955ed&itok=n_GLQgoe"
+        alt=""
+      />
+    }
+    backgroundColor={getCSSVariable("--section-books-and-more-primary")}
+    foregroundColor={getCSSVariable("--ui-white")}
+  />
+</DSProvider>
 
 <br />
 

package/src/index.ts

@@ -6,6 +6,8 @@ export {
   Box,
   Center,
   Circle,
+  Grid,
+  GridItem,
   Square,
   Stack,
   HStack,
@@ -28,10 +30,13 @@ export {
 } from "./components/Card/CardTypes";
 export { default as CardEdition } from "./components/CardEdition/CardEdition";
 export { default as Checkbox } from "./components/Checkbox/Checkbox";
+export { default as CheckboxGroup } from "./components/CheckboxGroup/CheckboxGroup";
+export { CheckboxGroupLayoutTypes } from "./components/CheckboxGroup/CheckboxGroupLayoutTypes";
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export { DatePickerTypes } from "./components/DatePicker/DatePickerTypes";
 export { default as Form, FormField, FormRow } from "./components/Form/Form";
 export { FormSpacing } from "./components/Form/FormTypes";
+export { GridGaps } from "./components/Grid/GridTypes";
 export { default as Heading } from "./components/Heading/Heading";
 export {
   HeadingDisplaySizes,
@@ -69,6 +74,7 @@ export { default as Radio } from "./components/Radio/Radio";
 export { default as RadioGroup } from "./components/RadioGroup/RadioGroup";
 export { RadioGroupLayoutTypes } from "./components/RadioGroup/RadioGroupLayoutTypes";
 export { default as SearchBar } from "./components/SearchBar/SearchBar";
+export { default as SimpleGrid } from "./components/Grid/SimpleGrid";
 export { default as SkeletonLoader } from "./components/SkeletonLoader/SkeletonLoader";
 export {
   SkeletonLoaderImageRatios,
@@ -83,6 +89,20 @@ export {
   TabPanels,
   TabPanel,
 } from "./components/Tabs/Tabs";
+export { default as Text } from "./components/Text/Text";
+export { TextDisplaySizes } from "./components/Text/TextTypes";
+export {
+  TemplateAppContainer,
+  Template,
+  TemplateHeader,
+  TemplateBreakout,
+  TemplateContent,
+  TemplateContentTop,
+  TemplateContentPrimary,
+  TemplateContentSidebar,
+  TemplateFooter,
+} from "./components/Template/Template";
+
 export {
   default as TextInput,
   TextInputRefType,

package/src/styles/01-colors/_colors-brand.scss

@@ -22,6 +22,10 @@ $research-secondary: #006166;
 $locations-primary: $brand-primary;
 $locations-secondary: $brand-secondary;
 
+// Blogs is used for Blog pages.
+$blogs-primary: #e0e0e0;
+$blogs-secondary: #bdbdbd;
+
 // Research libraries with specific brand colors to adhere to.
 $research-library-lpa: #005d53;
 $research-library-schomburg: #a03e31;
@@ -44,6 +48,8 @@ $colors: (
   research-secondary: $research-secondary,
   locations-primary: $locations-primary,
   locations-secondary: $locations-secondary,
+  blogs-primary: $blogs-primary,
+  blogs-secondary: $blogs-secondary,
   research-library-lpa: $research-library-lpa,
   research-library-schomburg: $research-library-schomburg,
   research-library-schwartzman: $research-library-schwartzman,

package/src/styles/01-colors/_colors-utility.scss

@@ -9,16 +9,17 @@ $white: #ffffff;
 $gray-xdark: #424242;
 $gray-dark: #616161;
 $gray-medium: #bdbdbd;
-$gray-light: #e0e0e0;
-$gray-warm-light: #efedeb;
-$gray-xlight: #f5f5f5;
-$gray-warm-xlight: #f8f8f7;
-$gray-xxlight: #fafafa;
+$gray-light-cool: #e0e0e0;
+$gray-light-warm: #efedeb;
+$gray-x-light-cool: #f5f5f5;
+$gray-x-light-warm: #f8f8f7;
+$gray-xx-light-cool: #fafafa;
 
 // State and link utilities
 $disabled-primary: #e0e0e0;
 $disabled-secondary: #fafafa;
-$error: #97272c;
+$error-primary: #97272c;
+$error-secondary: #6f0106;
 $focus: #4181f1;
 $link-primary: #0576d3;
 $link-secondary: #004b98;
@@ -39,14 +40,15 @@ $colors: (
   gray-xdark: $gray-xdark,
   gray-dark: $gray-dark,
   gray-medium: $gray-medium,
-  gray-light: $gray-light,
-  gray-warm-light: $gray-warm-light,
-  gray-xlight: $gray-xlight,
-  gray-warm-xlight: $gray-warm-xlight,
-  gray-xxlight: $gray-xxlight,
+  gray-light-cool: $gray-light-cool,
+  gray-light-warm: $gray-light-warm,
+  gray-x-light-cool: $gray-x-light-cool,
+  gray-x-light-warm: $gray-x-light-warm,
+  gray-xx-light-cool: $gray-xx-light-cool,
   disabled-primary: $disabled-primary,
   disabled-secondary: $disabled-secondary,
-  error: $error,
+  error-primary: $error-primary,
+  error-secondary: $error-secondary,
   focus: $focus,
   link-primary: $link-primary,
   link-secondary: $link-secondary,

package/src/styles/base/_04-base.scss

@@ -8,7 +8,8 @@
   font-weight: 300;
   line-height: 1.5;
 
-  // Users with non-overlay scrollbars have a small horiznotal scrollbar from our breakout mixin. Fix identified here: https://cloudfour.com/thinks/breaking-out-with-viewport-units-and-calc/#one-big-dumb-caveat
+  // Users with non-overlay scrollbars have a small horizontal scrollbar from
+  // our breakout mixin. Fix identified here: https://cloudfour.com/thinks/breaking-out-with-viewport-units-and-calc/#one-big-dumb-caveat
   overflow-x: hidden;
 
   *,

package/src/styles/base/_place-holder.scss

@@ -1,5 +1,5 @@
 .placeholder {
-  --color-place-holder: var(--ui-gray-light);
+  --color-place-holder: var(--ui-gray-light-cool);
 
   @include space-stack-page;
   @include space-inset-s;

package/src/styles.scss

@@ -42,11 +42,8 @@
 @import "./styles/base/_card-grid";
 @import "./styles/base/_place-holder";
 @import "./styles/base/_typography";
-@import "./components/Icons/_Icons.scss";
 @import "./components/Button/_Button.scss";
-@import "./components/Link/_Link.scss";
 @import "./components/Input/_Input.scss";
-@import "./components/TextInput/_TextInput.scss";
 @import "./components/Autosuggest/_Autosuggest.scss";
 
 fieldset {
@@ -55,25 +52,26 @@ fieldset {
   }
 }
 
+// Copied over from Label.scss
+.fieldset {
+  @include fieldset-reset;
+}
+
+.legend {
+  border: 0;
+  font-weight: 500;
+}
+
 // Order not important
-@import "./components/Accordion/_Accordion.scss";
-@import "./components/Breadcrumbs/_Breadcrumbs.scss";
 @import "./components/Card/_Card.scss";
 @import "./components/CardEdition/_CardEdition.scss";
 @import "./components/DatePicker/_DatePicker.scss";
-@import "./components/Form/_Form.scss";
 @import "./components/HelperErrorText/_HelperErrorText.scss";
-@import "./components/Hero/_Hero.scss";
 @import "./components/HorizontalRule/_HorizontalRule.scss";
 @import "./components/Image/_Image.scss";
-@import "./components/Label/_Label.scss";
 @import "./components/List/_List.scss";
 @import "./components/Modal/_Modal.scss";
 @import "./components/Notification/_Notification.scss";
 @import "./components/Pagination/_Pagination.scss";
-@import "./components/SearchBar/_SearchBar.scss";
-@import "./components/Select/_Select.scss";
 @import "./components/SkeletonLoader/_SkeletonLoader.scss";
-@import "./components/StatusBadge/_StatusBadge.scss";
-@import "./components/Template/_Template.scss";
 @import "./components/VideoPlayer/_VideoPlayer.scss";

package/src/theme/components/accordion.ts

@@ -0,0 +1,30 @@
+const containerStyles = {
+  borderLeftWidth: "1px",
+  borderRightWidth: "1px",
+  borderColor: "ui.gray.medium",
+  width: "100%",
+};
+const buttonStyles = {
+  border: "none",
+  fontWeight: 500,
+  _hover: {
+    bg: "ui.gray.light-cool",
+  },
+};
+const panelStyles = {
+  paddingTop: "xs",
+  paddingRight: "xxxl",
+  paddingLeft: "s",
+  paddingBottom: "xs",
+};
+
+const Accordion = {
+  parts: ["container", "button", "panel"],
+  baseStyle: {
+    container: containerStyles,
+    button: buttonStyles,
+    panel: panelStyles,
+  },
+};
+
+export default Accordion;

package/src/theme/components/breadcrumb.ts

@@ -0,0 +1,77 @@
+// Variant styling
+const booksAndMore = {
+  bg: "section.books-and-more.secondary",
+};
+const locations = {
+  bg: "section.locations.secondary",
+};
+const research = {
+  bg: "section.research.secondary",
+};
+const whatsOn = {
+  bg: "section.whats-on.secondary",
+};
+
+const Breadcrumb = {
+  baseStyle: {
+    bg: "ui.black",
+    color: "ui.white",
+    fontSize: "-1",
+    fontWeight: "regular",
+    paddingBottom: "xs",
+    paddingTop: "xs",
+    ol: {
+      alignItems: { base: "center", md: "unset" },
+      display: { base: "flex", md: "block" },
+      margin: "auto",
+      maxWidth: "1280px",
+      paddingLeft: "s",
+      paddingRight: "s",
+    },
+    a: {
+      _hover: {
+        color: "ui.gray.light-cool",
+      },
+    },
+    "li:last-child": {
+      fontWeight: { base: "regular", md: "bold" },
+      ".chakra-breadcrumb__link": {
+        _hover: {
+          cursor: "default",
+          textDecoration: "none",
+        },
+      },
+      ".icon": {
+        display: "none",
+      },
+    },
+    "li:not(:last-child)": {
+      display: { base: "none", md: "inline-block" },
+      a: {
+        marginRight: { base: "xs", md: "0" },
+      },
+      ".icon": {
+        display: { base: "inline", md: "none" },
+      },
+      "span:not(.breadcrumb-label)": {
+        marginInlineEnd: "xxs",
+        marginInlineStart: "xxs",
+      },
+    },
+    "li:nth-last-child(2)": {
+      display: "inline-block",
+      span: {
+        display: { base: "none", md: "inline" },
+      },
+    },
+  },
+  // Available variants:
+  variants: {
+    booksAndMore,
+    locations,
+    research,
+    whatsOn,
+  },
+};
+
+export default Breadcrumb;