@nypl/design-system-react-components 0.25.2 → 0.25.6

package/src/components/Template/Template.stories.mdx

@@ -22,6 +22,7 @@ import Placeholder from "../Placeholder/Placeholder";
 import Hero from "../Hero/Hero";
 import { HeroTypes } from "../Hero/HeroTypes";
 import Image from "../Image/Image";
+import { ImageRatios, ImageSizes } from "../Image/ImageTypes";
 import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
 import HorizontalRule from "../HorizontalRule/HorizontalRule";
 import Heading from "../Heading/Heading";
@@ -35,13 +36,7 @@ import Form, { FormRow, FormField } from "../Form/Form";
 import TextInput from "../TextInput/TextInput";
 import Button from "../Button/Button";
 import Link from "../Link/Link";
-import Card, {
-  CardImage,
-  CardHeading,
-  CardContent,
-  CardActions,
-} from "../Card/Card";
-import { CardImageRatios, CardImageSizes } from "../Card/CardTypes";
+import Card, { CardHeading, CardContent, CardActions } from "../Card/Card";
 import Accordion from "../Accordion/Accordion";
 import { faqContent } from "../Accordion/Accordion.stories.mdx";
 import { NotificationTypes } from "../Notification/NotificationTypes";
@@ -509,13 +504,13 @@ This is best viewed in the Storybook "Canvas" and not "Docs" section.
             center
             imageSrc="https://placeimg.com/400/200/animals"
             imageAlt="Alt text"
-            imageAspectRatio={CardImageRatios.Square}
-            imageSize={CardImageSizes.Small}
+            imageAspectRatio={ImageRatios.Square}
+            imageSize={ImageSizes.Small}
           >
-            <CardHeading level={HeadingLevels.Three} id="heading1">
+            <CardHeading level={HeadingLevels.Two} id="heading1">
               Small Animal Image
             </CardHeading>
-            <CardHeading level={HeadingLevels.Five} id="heading2">
+            <CardHeading level={HeadingLevels.Three} id="heading2">
               Animal info
             </CardHeading>
             <CardContent>
@@ -530,12 +525,12 @@ This is best viewed in the Storybook "Canvas" and not "Docs" section.
           id="custom-card"
           imageAlt="Alt text"
           imageSrc="https://cdn-d8.nypl.org/s3fs-public/2020-05/NYPL_MainFacadeRev2Cam2.png"
-          imageAspectRatio={CardImageRatios.SixteenByNine}
+          imageAspectRatio={ImageRatios.SixteenByNine}
           layout="horizontal"
           backgroundColor="#616161"
           foregroundColor="#FFF"
         >
-          <CardHeading id="heading1" level={2}>
+          <CardHeading id="heading1-footer" level={HeadingLevels.Two}>
             Footer
           </CardHeading>
           <CardContent>
@@ -547,25 +542,25 @@ This is best viewed in the Storybook "Canvas" and not "Docs" section.
           </CardContent>
           <CardActions>
             <Link
-              href="javascript:void(0);"
               attributes={{
                 style: { color: "#FFF", textDecoration: "underline" },
               }}
+              href="#"
             >
               Facebook
             </Link>
             ,<Link
-              href="javascript:void(0);"
               attributes={{
                 style: { color: "#FFF", textDecoration: "underline" },
               }}
+              href="#"
             >
               Instagram
             </Link>,<Link
-              href="javascript:void(0);"
               attributes={{
                 style: { color: "#FFF", textDecoration: "underline" },
               }}
+              href="#"
             >
               Twitter
             </Link>

package/src/components/TextInput/TextInput.stories.mdx

@@ -38,7 +38,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.22.0`   |
-| Latest            | `0.25.1`   |
+| Latest            | `0.25.4`   |
 
 <Description of={TextInput} />
 

package/src/components/TextInput/TextInput.tsx

@@ -16,10 +16,14 @@ import HelperErrorText from "../HelperErrorText/HelperErrorText";
 import generateUUID from "../../helpers/generateUUID";
 
 export interface InputProps {
+  /** Optionally pass in additional Chakra-based styles. */
+  additionalStyles?: { [key: string]: any };
   /** Additional attributes to pass to the `<input>` or `<textarea>` element */
   attributes?: { [key: string]: any };
   /** A class name for the TextInput parent div. */
   className?: string;
+  /** The starting value of the input field. */
+  defaultValue?: string;
   /** Populates the HelperErrorText for the standard state */
   helperText?: string;
   /** ID that other components can cross reference for accessibility purposes */
@@ -35,6 +39,8 @@ export interface InputProps {
   /** Provides text for a `Label` component if `showLabel` is set to true;
    * populates an `aria-label` attribute if `showLabel` is set to false. */
   labelText: string;
+  /** Used to reference the input element in forms. */
+  name?: string;
   /** The action to perform on the `input`/`textarea`'s onChange function  */
   onChange?: (
     event:
@@ -51,6 +57,8 @@ export interface InputProps {
   /** Offers the ability to show the "Required"/"Optional" label onscreen or
    * hide it. True by default. */
   showOptReqLabel?: boolean;
+  /** The amount to increase or decrease when using the number type. */
+  step?: number;
   /** 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 */
@@ -73,8 +81,10 @@ export type TextInputRefType = HTMLInputElement & HTMLTextAreaElement;
 const TextInput = React.forwardRef<TextInputRefType, InputProps>(
   (props, ref: React.Ref<TextInputRefType>) => {
     const {
+      additionalStyles = {},
       attributes = {},
       className,
+      defaultValue,
       helperText,
       id = generateUUID(),
       invalidText,
@@ -82,16 +92,19 @@ const TextInput = React.forwardRef<TextInputRefType, InputProps>(
       isInvalid = false,
       isRequired = false,
       labelText,
+      name,
       onChange,
       placeholder,
       showHelperInvalidText = true,
       showLabel = true,
       showOptReqLabel = true,
+      step = 1,
       type = TextInputTypes.text,
       value,
       variantType = TextInputVariants.Default,
     } = props;
     const styles = useMultiStyleConfig("TextInput", { variant: variantType });
+    const finalStyles = { ...styles, ...additionalStyles };
     const isTextArea = type === TextInputTypes.textarea;
     const isHidden = type === TextInputTypes.hidden;
     const optReqFlag = isRequired ? "Required" : "Optional";
@@ -128,33 +141,37 @@ const TextInput = React.forwardRef<TextInputRefType, InputProps>(
 
     // When the type is "hidden", the input element needs fewer attributes.
     options = isHidden
-      ? { id, "aria-hidden": isHidden, onChange, ref }
+      ? { id, "aria-hidden": isHidden, name, onChange, ref }
       : {
-          id,
           "aria-required": isRequired,
+          defaultValue,
+          id,
           isDisabled,
           isRequired,
           isInvalid,
           placeholder,
+          name,
           onChange,
           ref,
+          // The `step` attribute is useful for the number type.
+          step: type === TextInputTypes.number ? step : null,
           ...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} />;
+      fieldOutput = <ChakraInput {...options} __css={finalStyles.input} />;
     } else {
       fieldOutput = (
-        <ChakraTextarea {...options} __css={styles.textarea}>
+        <ChakraTextarea {...options} __css={finalStyles.textarea}>
           {value}
         </ChakraTextarea>
       );
     }
 
     return (
-      <Box __css={styles} className={className}>
+      <Box __css={finalStyles} className={className}>
         {labelText && showLabel && !isHidden && (
           <Label
             htmlFor={id}
@@ -166,7 +183,7 @@ const TextInput = React.forwardRef<TextInputRefType, InputProps>(
         )}
         {fieldOutput}
         {footnote && showHelperInvalidText && !isHidden && (
-          <Box __css={styles.helper} aria-disabled={isDisabled}>
+          <Box __css={finalStyles.helper} aria-disabled={isDisabled}>
             <HelperErrorText isInvalid={isInvalid} id={`${id}-helperText`}>
               {footnote}
             </HelperErrorText>

package/src/components/TextInput/TextInputTypes.tsx

@@ -11,6 +11,7 @@ export enum TextInputTypes {
   url = "url",
 }
 
+// Only used internally in `TextInput`.
 export enum TextInputFormats {
   email = "jdoe@domain.com",
   hidden = "",
@@ -23,6 +24,7 @@ export enum TextInputFormats {
   url = "https://domain.com",
 }
 
+// Only used internally in `TextInput` and `SearchBar`.
 export enum TextInputVariants {
   Default = "default",
   SearchBar = "searchBar",

package/src/components/VideoPlayer/VideoPlayer.stories.mdx

@@ -3,7 +3,6 @@ import {
   Story,
   Canvas,
   ArgsTable,
-  Preview,
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
@@ -46,7 +45,7 @@ The `VideoPlayer` component is used to embed a `Vimeo` or `YouTube` video player
 
 The `aspectRatio` prop is used to control the sizing of the space allotted for the video rendering. Ultimately, the `aspectRatio` prop should be set to match the aspect ratio of the video that is being rendered. The default aspect ratio is `16:9`.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story
     name="VideoPlayer"
     args={{
@@ -72,7 +71,7 @@ The `aspectRatio` prop is used to control the sizing of the space allotted for t
       />
     )}
   </Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="VideoPlayer" />
 

package/src/docs/Chakra.stories.mdx

@@ -87,8 +87,8 @@ wrap the elements in the `DSProvider` component.
 <Canvas>
   <DSProvider>
     <ButtonGroup>
-      <Button disabled={false}>Enabled</Button>
-      <Button disabled={true}>Disabled</Button>
+      <Button isDisabled={false}>Enabled</Button>
+      <Button isDisabled>Disabled</Button>
     </ButtonGroup>
   </DSProvider>
 </Canvas>

package/src/index.ts

@@ -4,6 +4,7 @@ import "./styles.scss";
 // components for usage in consuming applications.
 export {
   Box,
+  ButtonGroup,
   Center,
   Circle,
   Grid,
@@ -15,7 +16,8 @@ export {
 } from "@chakra-ui/react";
 export { default as Accordion } from "./components/Accordion/Accordion";
 export { default as Breadcrumbs } from "./components/Breadcrumbs/Breadcrumbs";
-export { default as Button, ButtonGroup } from "./components/Button/Button";
+export { ColorVariants } from "./components/Breadcrumbs/BreadcrumbsTypes";
+export { default as Button } from "./components/Button/Button";
 export { ButtonTypes } from "./components/Button/ButtonTypes";
 export {
   default as Card,
@@ -23,11 +25,7 @@ export {
   CardContent,
   CardHeading,
 } from "./components/Card/Card";
-export {
-  CardImageRatios,
-  CardImageSizes,
-  CardLayouts,
-} from "./components/Card/CardTypes";
+export { CardLayouts } 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";
@@ -35,6 +33,7 @@ export { CheckboxGroupLayoutTypes } from "./components/CheckboxGroup/CheckboxGro
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export { DatePickerTypes } from "./components/DatePicker/DatePickerTypes";
 export { default as DSProvider } from "./theme/provider";
+export { default as Fieldset } from "./components/Fieldset/Fieldset";
 export { default as Form, FormField, FormRow } from "./components/Form/Form";
 export { FormSpacing } from "./components/Form/FormTypes";
 export { GridGaps } from "./components/Grid/GridTypes";
@@ -49,13 +48,20 @@ export { HeroTypes } from "./components/Hero/HeroTypes";
 export { default as HorizontalRule } from "./components/HorizontalRule/HorizontalRule";
 export { default as Icon } from "./components/Icons/Icon";
 export {
+  IconAlign,
+  IconColors,
   IconNames,
-  LogoNames,
   IconRotationTypes,
-  IconColors,
   IconSizes,
+  IconTypes,
+  LogoNames,
 } from "./components/Icons/IconTypes";
 export { default as Image } from "./components/Image/Image";
+export {
+  ImageRatios,
+  ImageSizes,
+  ImageTypes,
+} from "./components/Image/ImageTypes";
 export { default as Input } from "./components/Input/Input";
 export { InputTypes } from "./components/Input/InputTypes";
 export { default as Label } from "./components/Label/Label";
@@ -67,18 +73,21 @@ export { default as Modal } from "./components/Modal/Modal";
 export { default as Notification } from "./components/Notification/Notification";
 export { NotificationTypes } from "./components/Notification/NotificationTypes";
 export { default as Pagination } from "./components/Pagination/Pagination";
+export { default as ProgressIndicator } from "./components/ProgressIndicator/ProgressIndicator";
 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 Select } from "./components/Select/Select";
 export { default as SimpleGrid } from "./components/Grid/SimpleGrid";
 export { default as SkeletonLoader } from "./components/SkeletonLoader/SkeletonLoader";
 export {
   SkeletonLoaderImageRatios,
   SkeletonLoaderLayouts,
 } from "./components/SkeletonLoader/SkeletonLoaderTypes";
-export { default as Select } from "./components/Select/Select";
+export { default as Slider } from "./components/Slider/Slider";
 export { default as StatusBadge } from "./components/StatusBadge/StatusBadge";
+export { StatusBadgeTypes } from "./components/StatusBadge/StatusBadgeTypes";
 export {
   Tabs,
   TabList,
@@ -86,8 +95,6 @@ export {
   TabPanels,
   TabPanel,
 } from "./components/Tabs/Tabs";
-export { default as Text } from "./components/Text/Text";
-export { TextDisplaySizes } from "./components/Text/TextTypes";
 export {
   TemplateAppContainer,
   Template,
@@ -99,7 +106,8 @@ export {
   TemplateContentSidebar,
   TemplateFooter,
 } from "./components/Template/Template";
-
+export { default as Text } from "./components/Text/Text";
+export { TextDisplaySizes } from "./components/Text/TextTypes";
 export {
   default as TextInput,
   TextInputRefType,

package/src/resources.scss

@@ -1,6 +1,6 @@
 // Resources to export as sass mixins
-@import "./styles/03-space/space-inline.scss";
-@import "./styles/03-space/space-inset.scss";
-@import "./styles/03-space/space-stack.scss";
-@import "./styles/base/02-breakpoints.scss";
-@import "./styles/base/03-mixins.scss";
+@import "./styles/base/01-breakpoints";
+@import "./styles/base/02-mixins";
+@import "./styles/space/space-inline";
+@import "./styles/space/space-inset";
+@import "./styles/space/space-stack";

package/src/styles/base/{_02-breakpoints.scss → _01-breakpoints.scss}

@@ -1,7 +1,6 @@
 /**
  * Breakpoint Configuration
  * @see https://github.com/Team-Sass/breakpoint/wiki
- *
  */
 
 // Global Breakpoints
@@ -12,17 +11,17 @@
 // Sass' breakpoint() mixin doesn't work without Sass variables.
 // CSS variables expose the breakpoint variables to consumers.
 :root {
-  --breakpoint-small: 320px;
-  --breakpoint-medium: 600px;
-  --breakpoint-large: 960px;
-  --breakpoint-xl: 1280px;
+  --nypl-breakpoint-small: 320px;
+  --nypl-breakpoint-medium: 600px;
+  --nypl-breakpoint-large: 960px;
+  --nypl-breakpoint-xl: 1280px;
 }
 
-$breakpoint-small: 320px;
-$breakpoint-medium: 600px;
-$breakpoint-large: 960px;
-$breakpoint-xl: 1280px;
+$nypl-breakpoint-small: 320px;
+$nypl-breakpoint-medium: 600px;
+$nypl-breakpoint-large: 960px;
+$nypl-breakpoint-xl: 1280px;
 // The max-width breakpoint is used when the design should be applied at
 // whatever the largest breakpoint is regardless of actual pixel value,
 // e.g. removing outer margin on body wrapper.
-$max-width: $breakpoint-xl;
+$nypl-max-width: $nypl-breakpoint-xl;

package/src/styles/base/{_03-mixins.scss → _02-mixins.scss}

@@ -3,7 +3,7 @@
 
 /// Mixin - Clearfix.
 /// Adds clearfix based on http://bourbon.io/docs/#clearfix
-/// use example =   @include clearfix
+/// use example = @include clearfix
 
 @mixin clearfix {
   &::after {
@@ -29,10 +29,10 @@
 /// Outer container mixin for large screens
 @mixin wrapper(
   $container-max-width: $max-width,
-  $outer-container-break: $breakpoint-small,
+  $outer-container-break: $nypl-breakpoint-small,
   $v-margin: 0,
   $v-padding: 0,
-  $h-padding: var(--space)
+  $h-padding: var(--nypl-space-s)
 ) {
   margin: #{$v-margin} auto;
   max-width: #{$container-max-width};
@@ -41,12 +41,12 @@
 }
 
 .container {
-  @include space-inset-s;
+  padding: var(--nypl-space-s);
 }
 
 /// Use the breakout mixin for elements that should be edge-to-edge
 /// Even when a parent container uses the wrapper mixin
-@mixin breakout($v-padding: var(--space)) {
+@mixin breakout($v-padding: var(--nypl-space-s)) {
   margin-left: calc(-50vw + 50%);
   margin-right: calc(-50vw + 50%);
 }
@@ -61,6 +61,17 @@
   word-wrap: normal;
 }
 
+// Focus state mixin
+@mixin focus-outline($darkBackground: false) {
+  outline: 2px solid var(--nypl-colors-ui-focus);
+  outline-offset: 2px;
+  z-index: 9999;
+
+  @if $darkBackground {
+    outline-color: var(--nypl-colors-ui-white);
+  }
+}
+
 //Convert pixel values to rem
 @function to-rem($size) {
   @return $size / 16px * 1rem;

package/src/styles/base/{_04-base.scss → _03-base.scss}

@@ -1,7 +1,8 @@
+// Kept for backwards compatibility.
 .nypl-ds {
   box-sizing: border-box;
-  color: var(--ui-black);
-  font-family: var(--typeface-body);
+  color: var(--nypl-colors-ui-black);
+  font-family: var(--nypl-fonts-body);
 
   // Sets up the base font-size, 1rem, for the system
   font-size: 16px;
@@ -12,6 +13,10 @@
   // our breakout mixin. Fix identified here: https://cloudfour.com/thinks/breaking-out-with-viewport-units-and-calc/#one-big-dumb-caveat
   overflow-x: hidden;
 
+  p {
+    margin: 0 0 var(--nypl-space-s);
+  }
+
   *,
   *::after,
   *::before {

package/src/styles/base/{_05-focus.scss → _04-focus.scss}

@@ -1,14 +1,3 @@
-// Focus state mixin
-@mixin focus-outline($darkBackground: false) {
-  outline: 2px solid var(--ui-focus);
-  outline-offset: 2px;
-  z-index: 9999;
-
-  @if $darkBackground {
-    outline-color: var(--ui-white);
-  }
-}
-
 // Apply :focus behavior to focusable elements only (For IE 11)
 .nypl-ds {
   input,
@@ -31,7 +20,3 @@
     }
   }
 }
-
-.focus {
-  @include focus-outline;
-}

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

@@ -1,8 +1,19 @@
 .placeholder {
-  --color-place-holder: var(--ui-gray-light-cool);
+  --color-place-holder: var(--nypl-colors-ui-gray-dark);
 
-  @include space-stack-page;
-  @include space-inset-s;
+  margin-bottom: var(--nypl-space-l);
+  @include breakpoint($nypl-breakpoint-large) {
+    margin-bottom: var(--nypl-space-xl);
+  }
+
+  &--full {
+    margin-bottom: var(--nypl-space-xxl);
+    @include breakpoint($nypl-breakpoint-large) {
+      margin-bottom: var(--nypl-space-xxxl);
+    }
+  }
+
+  padding: var(--nypl-space-s);
 
   align-items: center;
   border: 4px dashed var(--color-place-holder);

package/src/styles/{03-space → space}/_space-inline.scss

@@ -1,11 +1,11 @@
 /**
- * $space-xxs: $space / 4;   //  4px
- * $space-xs: $space / 2;    //  8px
- * $space-s: $space * 1;     // 16px
- * $space-m: $space * 1.5;   // 24px
- * $space-l: $space * 2;     // 32px
- * $space-xl: $space * 3;    // 48px
- * $space-xxl: $space * 4;   // 64px
+ * --nypl-space-xxs: --nypl-space-s / 4  //  4px or 0.25rem
+ * --nypl-space-xs: --nypl-space-s / 2   //  8px or 0.5rem
+ * --nypl-space-s: --nypl-space-s * 1;   // 16px or 1rem
+ * --nypl-space-m: --nypl-space * 1.5;   // 24px or 1.5rem
+ * --nypl-space-l: --nypl-space * 2;     // 32px or 2rem
+ * --nypl-space-xl: --nypl-space * 3;    // 48px or 3rem
+ * --nypl-space-xxl: --nypl-space * 4;   // 64px or 4rem
  */
 
 @mixin space-inline-none {
@@ -13,31 +13,31 @@
 }
 
 @mixin space-inline-xxs {
-  margin-right: var(--space-xxs);
+  margin-right: var(--nypl-space-xxs);
 }
 
 @mixin space-inline-xs {
-  margin-right: var(--space-xs);
+  margin-right: var(--nypl-space-xs);
 }
 
 @mixin space-inline-s {
-  margin-right: var(--space-s);
+  margin-right: var(--nypl-space-s);
 }
 
 @mixin space-inline-m {
-  margin-right: var(--space-m);
+  margin-right: var(--nypl-space-m);
 }
 
 @mixin space-inline-l {
-  margin-right: var(--space-l);
+  margin-right: var(--nypl-space-l);
 }
 
 @mixin space-inline-xl {
-  margin-right: var(--space-xl);
+  margin-right: var(--nypl-space-xl);
 }
 
 @mixin space-inline-xxl {
-  margin-right: var(--space-xxl);
+  margin-right: var(--nypl-space-xxl);
 }
 
 @mixin get-space-inline($id) {

package/src/styles/{03-space → space}/_space-inset.scss

@@ -1,9 +1,9 @@
 /**
- * $space-xs: $space / 2;    //  8px
- * $space-s: $space * 1;     // 16px
- * $space-m: $space * 1.5;   // 24px
- * $space-l: $space * 2;     // 32px
- * $space-xl: $space * 3;    // 48px
+ * --nypl-space-xs: --nypl-space-s / 2   //  8px or 0.5rem
+ * --nypl-space-s: --nypl-space-s * 1;   // 16px or 1rem
+ * --nypl-space-m: --nypl-space * 1.5;   // 24px or 1.5rem
+ * --nypl-space-l: --nypl-space * 2;     // 32px or 2rem
+ * --nypl-space-xl: --nypl-space * 3;    // 48px or 3rem
  */
 
 @mixin space-inset-none {
@@ -11,23 +11,23 @@
 }
 
 @mixin space-inset-xs {
-  padding: var(--space-xs);
+  padding: var(--nypl-space-xs);
 }
 
 @mixin space-inset-s {
-  padding: var(--space-s);
+  padding: var(--nypl-space-s);
 }
 
 @mixin space-inset-m {
-  padding: var(--space-m);
+  padding: var(--nypl-space-m);
 }
 
 @mixin space-inset-l {
-  padding: var(--space-l);
+  padding: var(--nypl-space-l);
 }
 
 @mixin space-inset-xl {
-  padding: var(--space-xl);
+  padding: var(--nypl-space-xl);
 }
 
 @mixin get-space-inset($id) {