@nypl/design-system-react-components 0.26.0 → 0.28.0

package/src/theme/components/notification.ts

@@ -1,13 +1,32 @@
-import { NotificationTypes } from "../../components/Notification/NotificationTypes";
+import { NotificationTypes } from "../../components/Notification/Notification";
+
+interface NotificationBaseStyle {
+  dismissible: boolean;
+  isCentered: boolean;
+  noMargin: boolean;
+  notificationType: NotificationTypes;
+}
+interface NotificationContentBaseStyle {
+  alignText: boolean;
+  icon: boolean;
+  notificationType: NotificationTypes;
+}
+interface NotificationHeadingBaseStyle {
+  icon: boolean;
+  isCentered: boolean;
+  notificationType: NotificationTypes;
+}
 
 const Notification = {
   parts: ["container", "dismissibleButton", "icon"],
-  baseStyle: ({ dismissible, isCentered, noMargin, notificationType }) => {
+  baseStyle: ({
+    dismissible,
+    isCentered,
+    noMargin,
+    notificationType,
+  }: NotificationBaseStyle) => {
     let bg = "ui.status.primary";
-    if (
-      notificationType === NotificationTypes.Announcement ||
-      notificationType === NotificationTypes.Warning
-    ) {
+    if (notificationType === "announcement" || notificationType === "warning") {
       bg = "ui.gray.x-light-cool";
     }
     return {
@@ -55,14 +74,15 @@ const Notification = {
 
 const NotificationContent = {
   parts: ["content"],
-  baseStyle: ({ alignText, icon, notificationType }) => ({
+  baseStyle: ({
+    alignText,
+    icon,
+    notificationType,
+  }: NotificationContentBaseStyle) => ({
     display: "flex",
     justifyContent: "center",
     content: {
-      color:
-        notificationType === NotificationTypes.Warning
-          ? "brand.primary"
-          : "currentColor",
+      color: notificationType === "warning" ? "brand.primary" : "currentColor",
       marginTop: icon ? "xxxs" : "0",
       paddingLeft: alignText
         ? "calc(var(--nypl-space-m) + var(--nypl-space-s))"
@@ -81,11 +101,15 @@ const NotificationContent = {
 
 const NotificationHeading = {
   parts: ["heading"],
-  baseStyle: ({ icon, isCentered, notificationType }) => {
+  baseStyle: ({
+    icon,
+    isCentered,
+    notificationType,
+  }: NotificationHeadingBaseStyle) => {
     let color = "ui.black";
-    if (notificationType === NotificationTypes.Announcement) {
+    if (notificationType === "announcement") {
       color = "section.research.secondary";
-    } else if (notificationType === NotificationTypes.Warning) {
+    } else if (notificationType === "warning") {
       color = "brand.primary";
     }
     return {

package/src/theme/components/progressIndicator.ts

@@ -1,4 +1,9 @@
-import { ProgressIndicatorSizes } from "../../components/ProgressIndicator/ProgressIndicatorTypes";
+import { ProgressIndicatorSizes } from "../../components/ProgressIndicator/ProgressIndicator";
+
+interface ProgressIndicatorBaseStyle {
+  darkMode: boolean;
+  size: ProgressIndicatorSizes;
+}
 
 const ProgressIndicator = {
   parts: [
@@ -8,15 +13,15 @@ const ProgressIndicator = {
     "linearContainer",
     "linearPercentage",
   ],
-  baseStyle: ({ darkMode, size }) => {
+  baseStyle: ({ darkMode, size }: ProgressIndicatorBaseStyle) => {
     return {
       color: darkMode ? "ui.white" : "ui.black",
       circular: {
         // Note: we have to target the SVG HTMl elements in order
         // to override the default styles.
         svg: {
-          height: size === ProgressIndicatorSizes.Default ? "48px" : "24px",
-          width: size === ProgressIndicatorSizes.Default ? "48px" : "24px",
+          height: size === "default" ? "48px" : "24px",
+          width: size === "default" ? "48px" : "24px",
           display: "block",
           circle: {
             _first: {
@@ -44,7 +49,7 @@ const ProgressIndicator = {
         bg: darkMode ? "ui.gray.dark" : "ui.gray.light-cool",
         height: {
           base: "4px",
-          md: size === ProgressIndicatorSizes.Default ? "8px" : "4px",
+          md: size === "default" ? "8px" : "4px",
         },
       },
       linearContainer: {

package/src/theme/components/select.ts

@@ -3,6 +3,10 @@ import {
   selectTextInputFocusStyles,
 } from "./global";
 
+interface SelectBaseStyle {
+  labelPosition: string;
+}
+
 const select = {
   backgroundColor: "ui.white",
   borderRadius: "sm",
@@ -29,19 +33,14 @@ const select = {
 
 const Select = {
   parts: ["helperText", "inline", "select"],
-  baseStyle: ({ labelPosition, labelWidth }) => {
+  baseStyle: ({ labelPosition }: SelectBaseStyle) => {
     return {
-      marginBottom: "xs",
       // The backgroundColor set to "ui.white" hides the arrow SVG icon when
       // the component is focused. The background is added for dark mode and
       // so we need to add specific selector.
       ".chakra-select__icon-wrapper": {
         zIndex: "9999",
       },
-      helperText: {
-        marginLeft:
-          labelPosition === "inline" ? { md: `${labelWidth}px` } : null,
-      },
       inline: {
         display: { md: "flex" },
         gap: { md: "var(--nypl-space-xs)" },

package/src/theme/components/skeletonLoader.ts

@@ -1,5 +1,11 @@
 import { keyframes } from "@chakra-ui/system";
 
+interface SkeletonLoaderBaseStyle {
+  imageAspectRatio: keyof typeof imagePaddingBottomStyles;
+  isBordered: boolean;
+  showImage?: boolean;
+}
+
 const element = {
   borderRadius: "2px",
   boxSizing: "border-box",
@@ -23,7 +29,7 @@ const imageRowHeightStyles = {
 // NYPL's skeleton loader component.
 const SkeletonLoader = {
   parts: ["section", "image", "container", "heading", "content", "button"],
-  baseStyle: ({ imageAspectRatio, isBordered }) => {
+  baseStyle: ({ imageAspectRatio, isBordered }: SkeletonLoaderBaseStyle) => {
     const borderStyles = isBordered ? { ...borderRules } : {};
 
     return {
@@ -67,7 +73,7 @@ const SkeletonLoader = {
     };
   },
   variants: {
-    row: ({ imageAspectRatio, showImage }) => ({
+    row: ({ imageAspectRatio, showImage }: SkeletonLoaderBaseStyle) => ({
       alignItems: "flex-start",
       display: { md: "flex" },
       image: {

package/src/theme/components/skipNavigation.ts

@@ -0,0 +1,26 @@
+const SkipNavigation = {
+  baseStyle: {
+    // Don't display links by default...
+    a: {
+      backgroundColor: "ui.white",
+      height: "1px",
+      left: "-10000px",
+      overflow: "hidden",
+      position: "absolute",
+      top: "auto",
+      width: "1px",
+      // Only display when the user focuses on the links.
+      _focus: {
+        border: "1px solid var(—nypl-colors-ui-gray-dark)",
+        height: "auto",
+        left: "2rem",
+        padding:
+          "var(--nypl-space-inset-extranarrow) var(--nypl-space-inset-narrow)",
+        top: "3rem",
+        width: "auto",
+      },
+    },
+  },
+};
+
+export default SkipNavigation;

package/src/theme/components/slider.ts

@@ -1,3 +1,10 @@
+interface CustomSliderBaseStyle {
+  isDisabled: boolean;
+  isInvalid: boolean;
+  showBoxes: boolean;
+  showValues: boolean;
+}
+
 // Margins around the static display values.
 const staticValues = {
   marginTop: "xs",
@@ -16,7 +23,12 @@ const CustomSlider = {
     "track",
     "thumb",
   ],
-  baseStyle: ({ isDisabled, isInvalid, showBoxes, showValues }) => {
+  baseStyle: ({
+    isDisabled,
+    isInvalid,
+    showBoxes,
+    showValues,
+  }: CustomSliderBaseStyle) => {
     let baseColor = "ui.link.primary";
     if (isInvalid) {
       baseColor = "ui.error.primary";

package/src/theme/components/structuredContent.ts

@@ -9,9 +9,19 @@ import {
   baseUnorderedStyles,
 } from "./list";
 
+interface StructuredContentBaseStyle {
+  hasFigureImage: boolean;
+  imageAspectRatio: string;
+  imagePosition: string;
+}
+
 const StructuredContent = {
   parts: ["image", "imageFigure", "imageWrapper"],
-  baseStyle: ({ hasFigureImage, imageAspectRatio, imagePosition }) => {
+  baseStyle: ({
+    hasFigureImage,
+    imageAspectRatio,
+    imagePosition,
+  }: StructuredContentBaseStyle) => {
     const styles: { maxWidth?: string } = {};
     const wrapperStyles = {
       float: [

package/src/theme/components/text.ts

@@ -1,3 +1,10 @@
+interface TextBaseStyle {
+  isBold: boolean;
+  isItalic: boolean;
+  noSpace: boolean;
+  variant: string;
+}
+
 const variants = {
   default: {},
   caption: {
@@ -11,18 +18,18 @@ const variants = {
   },
 };
 const Text = {
-  baseStyle: (props) => {
-    const fontWeight = props.isBold
-      ? props.variant === "tag" || props.variant === "mini"
+  baseStyle: ({ isBold, isItalic, noSpace, variant }: TextBaseStyle) => {
+    const fontWeight = isBold
+      ? variant === "tag" || variant === "mini"
         ? "medium"
         : "bold"
       : null;
-    const fontStyle = props.isItalic ? "italic" : null;
+    const fontStyle = isItalic ? "italic" : null;
 
     return {
       fontStyle: fontStyle,
       fontWeight: fontWeight,
-      marginBottom: props.noSpace ? "0 !important" : null,
+      marginBottom: noSpace ? "0 !important" : null,
     };
   },
   variants,

package/src/theme/components/toggle.ts

@@ -1,10 +1,16 @@
 import { cssVar } from "@chakra-ui/theme-tools";
-import { ToggleSizes } from "../../components/Toggle/ToggleTypes";
 
-const toggleBaseStyle = ({ isDisabled, size }) => {
+import { ToggleSizes } from "../../components/Toggle/Toggle";
+
+interface ToggleBaseStyle {
+  isDisabled: boolean;
+  size: ToggleSizes;
+}
+
+const toggleBaseStyle = ({ isDisabled, size }: ToggleBaseStyle) => {
   const label = { alignItems: "start", display: "flex", width: "fit-content" };
   const helperErrorText = {
-    marginLeft: size === ToggleSizes.Default ? "xxl" : "xl",
+    marginLeft: size === "default" ? "xxl" : "xl",
     fontStyle: isDisabled ? "italic" : null,
   };
   return {

package/src/theme/index.ts

@@ -11,6 +11,7 @@ import typography from "./foundations/typography";
 import Accordion from "./components/accordion";
 import Breadcrumb from "./components/breadcrumb";
 import Button from "./components/button";
+import ButtonGroup from "./components/buttonGroup";
 import Card from "./components/card";
 import Checkbox from "./components/checkbox";
 import ComponentWrapper from "./components/componentWrapper";
@@ -35,6 +36,7 @@ import Radio from "./components/radio";
 import RadioGroup from "./components/radioGroup";
 import SearchBar from "./components/searchBar";
 import { Skeleton, SkeletonLoader } from "./components/skeletonLoader";
+import SkipNavigation from "./components/skipNavigation";
 import CustomSlider from "./components/slider";
 import StatusBadge from "./components/statusBadge";
 import StructuredContent from "./components/structuredContent";
@@ -80,6 +82,7 @@ const theme = extendTheme({
     Accordion,
     Breadcrumb,
     Button,
+    ButtonGroup,
     ...Card,
     Checkbox,
     CheckboxGroup,
@@ -106,6 +109,7 @@ const theme = extendTheme({
     SearchBar,
     Skeleton,
     SkeletonLoader,
+    SkipNavigation,
     CustomSlider,
     StatusBadge,
     StructuredContent,

package/src/theme/provider.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { ChakraProvider } from "@chakra-ui/react";
 import theme from "./index";
 
-const DSProvider = ({ children }) => (
+const DSProvider = ({ children }: React.PropsWithChildren<{}>) => (
   <ChakraProvider theme={theme}>{children}</ChakraProvider>
 );
 

package/src/utils/componentCategories.ts

@@ -53,6 +53,7 @@ const categories = {
     title: "Components/Form Elements",
     components: [
       "Button",
+      "ButtonGroup",
       "Checkbox",
       "CheckboxGroup",
       "DatePicker",
@@ -108,7 +109,14 @@ const categories = {
   },
   navigation: {
     title: "Components/Navigation",
-    components: ["Breadcrumbs", "Link", "Menu", "Pagination", "Subnavigation"],
+    components: [
+      "Breadcrumbs",
+      "Link",
+      "Menu",
+      "Pagination",
+      "SkipNavigation",
+      "Subnavigation",
+    ],
   },
   styleguide: {
     title: "Style Guide",
@@ -131,11 +139,11 @@ const categories = {
   },
 };
 
-export const getCategory = (component) => {
+export const getCategory = (component: string) => {
   let catPath = component;
-  Object.keys(categories).forEach((key) => {
-    const t = categories[key].title;
-    const c = categories[key].components;
+  Object.keys(categories).forEach((key: string) => {
+    const t = categories[key as keyof typeof categories].title;
+    const c = categories[key as keyof typeof categories].components;
     if (c.includes(component)) {
       catPath = `${t}/${component}`;
     }

package/src/utils/interfaces.ts

@@ -0,0 +1,5 @@
+export interface AriaAttributes {
+  "aria-label"?: string;
+  "aria-describedby"?: string;
+  "aria-labelledby"?: string;
+}

package/src/utils/utils.ts

@@ -15,43 +15,13 @@ export const range = (start: number, stop: number, step = 1): number[] => {
     .map((x, y) => x + y * step);
 };
 
-/**
- * Map an enum value to a component's Chakra theme variant object. If a wrong
- * value is passed (typically in non-Typescript scenarios), then the "fallback"
- * value, if provided, will be used.
- */
-export const getVariant = (variant, collection, fallback = null) => {
-  const variantMap = {};
-  for (const type in collection) {
-    variantMap[collection[type]] = collection[type];
-  }
-  return variantMap[variant] || fallback;
-};
-
-/**
- * Given an enum object and its name, this will return (1) an array `options`
- * of all values with the enum name as the prefix, and (2) a function that
- * returns the correct enum value given a string from the `options` array.
- * @NOTE this is only used for Storybook documentation.
- */
-export const getStorybookEnumValues = (enumObject, name) => {
-  const options = Object.keys(enumObject).map((key) => `${name}.${key}`);
-  const getValue = (key) => {
-    // In case no value is passed, return the first value from the array above
-    // as the default. Otherwise, remove the dot from the string and get the
-    // last part to be able to get the correct enum value.
-    return !key ? options[0] : enumObject[key.substr(key.indexOf(".") + 1)];
-  };
-  return { options, getValue };
-};
-
 /**
  * Given a pagination's pageCount, this will return (1) a page number,
  * derived from the current URL, and (2) a function that, when passed to
  * Pagination component, makes the URL change and refreshes the page.
  * @NOTE this is only used for Storybook documentation.
  */
-export const getStorybookHrefProps = (pageCount) => {
+export const getStorybookHrefProps = (pageCount: number) => {
   // This uses the `addon-queryparams` Storybook addon.
   const urlParams = new URLSearchParams(document.location.search);
   const pageParam = urlParams.get("page");
@@ -66,7 +36,7 @@ export const getStorybookHrefProps = (pageCount) => {
   const location = window.location;
   // Passing this function into `Pagination` makes the URL to change
   // and refreshes the page.
-  const getPageHref = (selectedPage) => {
+  const getPageHref = (selectedPage: number) => {
     return `${location.href}&page=${selectedPage}`;
   };
 

package/dist/components/Accordion/AccordionTypes.d.ts

@@ -1,5 +0,0 @@
-export declare enum AccordionTypes {
-    Default = "default",
-    Warning = "warning",
-    Error = "error"
-}

package/dist/components/Breadcrumbs/BreadcrumbsTypes.d.ts

@@ -1,8 +0,0 @@
-export declare enum BreadcrumbsTypes {
-    Blogs = "blogs",
-    BooksAndMore = "booksAndMore",
-    Education = "education",
-    Locations = "locations",
-    Research = "research",
-    WhatsOn = "whatsOn"
-}

package/dist/components/Button/ButtonTypes.d.ts

@@ -1,8 +0,0 @@
-export declare enum ButtonTypes {
-    Primary = "primary",
-    Secondary = "secondary",
-    Callout = "callout",
-    Pill = "pill",
-    Link = "link",
-    NoBrand = "noBrand"
-}

package/dist/components/DatePicker/DatePickerTypes.d.ts

@@ -1,5 +0,0 @@
-export declare enum DatePickerTypes {
-    Full = "full",
-    Month = "month",
-    Year = "year"
-}

package/dist/components/Form/FormTypes.d.ts

@@ -1,2 +0,0 @@
-import { GridGaps as FormGaps } from "../Grid/GridTypes";
-export { FormGaps };

package/dist/components/Grid/GridTypes.d.ts

@@ -1,9 +0,0 @@
-export declare enum GridGaps {
-    ExtraExtraSmall = "grid.xxs",
-    ExtraSmall = "grid.xs",
-    Small = "grid.s",
-    Medium = "grid.m",
-    Large = "grid.l",
-    ExtraLarge = "grid.xl",
-    ExtraExtraLarge = "grid.xxl"
-}

package/dist/components/Heading/HeadingTypes.d.ts

@@ -1,14 +0,0 @@
-export declare enum HeadingSizes {
-    Primary = "primary",
-    Secondary = "secondary",
-    Tertiary = "tertiary",
-    Callout = "callout"
-}
-export declare enum HeadingLevels {
-    One = "one",
-    Two = "two",
-    Three = "three",
-    Four = "four",
-    Five = "five",
-    Six = "six"
-}

package/dist/components/Hero/HeroTypes.d.ts

@@ -1,12 +0,0 @@
-export declare enum HeroTypes {
-    Primary = "primary",
-    Secondary = "secondary",
-    SecondaryBooksAndMore = "secondaryBooksAndMore",
-    SecondaryLocations = "secondaryLocations",
-    SecondaryResearch = "secondaryResearch",
-    SecondaryWhatsOn = "secondaryWhatsOn",
-    Tertiary = "tertiary",
-    Campaign = "campaign",
-    FiftyFifty = "fiftyfifty"
-}
-export declare const HeroSecondaryTypes: HeroTypes[];

package/dist/components/Icons/IconTypes.d.ts

@@ -1,77 +0,0 @@
-export declare enum IconAlign {
-    Left = "left",
-    Right = "right",
-    None = "none"
-}
-export declare enum IconTypes {
-    Default = "default",
-    Breadcrumbs = "breadcrumbs"
-}
-export declare enum IconRotationTypes {
-    Rotate0 = "rotate0",
-    Rotate90 = "rotate90",
-    Rotate180 = "rotate180",
-    Rotate270 = "rotate270"
-}
-export declare enum IconColors {
-    UiBlack = "ui.black",
-    UiWhite = "ui.white",
-    BrandPrimary = "brand.primary",
-    BrandSecondary = "brand.secondary",
-    SectionBlogsPrimary = "section.blogs.primary",
-    SectionBlogsSecondary = "section.blogs.secondary",
-    SectionBooksAndMorePrimary = "section.books-and-more.primary",
-    SectionBooksAndMoreSecondary = "section.books-and-more.secondary",
-    SectionEducationPrimary = "section.education.primary",
-    SectionEducationSecondary = "section.education.secondary",
-    SectionLocationsPrimary = "section.locations.primary",
-    SectionLocationsSecondary = "section.locations.secondary",
-    SectionResearchPrimary = "section.research.primary",
-    SectionResearchSecondary = "section.research.secondary",
-    SectionResearchLibraryLpa = "section.research-library.lpa",
-    SectionResearchLibrarySchomburg = "section.research-library.schomburg",
-    SectionResearchLibrarySchwartzman = "section.research-library.schwartzman",
-    SectionWhatsOnPrimary = "section.whats-on.primary",
-    SectionWhatsOnSecondary = "section.whats-on.secondary"
-}
-export declare enum IconSizes {
-    Default = "default",
-    Small = "small",
-    Medium = "medium",
-    Large = "large",
-    ExtraLarge = "xlarge",
-    ExtraExtraLarge = "xxlarge",
-    ExtraExtraExtraLarge = "xxxlarge"
-}
-export declare enum IconNames {
-    AccessibilityFull = "accessibility_full",
-    AccessibilityPartial = "accessibility_partial",
-    ActionCheckCircle = "action_check_circle",
-    ActionHelpDefault = "action_help_default",
-    ActionHelpOutline = "action_help_outline",
-    AlertNotificationImportant = "alert_notification_important",
-    ActionLaunch = "action_launch",
-    Arrow = "arrow",
-    Check = "check",
-    Clock = "clock",
-    Close = "close",
-    Download = "download",
-    ErrorFilled = "error_filled",
-    ErrorOutline = "error_outline",
-    FileTypeAudio = "file_type_audio",
-    FileTypeDoc = "file_type_doc",
-    FileTypeGenericDoc = "file_type_generic_doc",
-    FileTypeImage = "file_type_image",
-    FileTypePdf = "file_type_pdf",
-    FileTypeSpreadsheet = "file_type_spreadsheet",
-    FileTypeVideo = "file_type_video",
-    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"
-}

package/dist/components/Image/ImageTypes.d.ts

@@ -1,22 +0,0 @@
-export declare enum ImageRatios {
-    FourByThree = "fourByThree",
-    OneByTwo = "oneByTwo",
-    Original = "original",
-    SixteenByNine = "sixteenByNine",
-    Square = "square",
-    ThreeByFour = "threeByFour",
-    ThreeByTwo = "threeByTwo",
-    TwoByOne = "twoByOne"
-}
-export declare enum ImageSizes {
-    Default = "default",
-    ExtraExtraSmall = "xxsmall",
-    ExtraSmall = "xsmall",
-    Small = "small",
-    Medium = "medium",
-    Large = "large"
-}
-export declare enum ImageTypes {
-    Default = "default",
-    Circle = "circle"
-}

package/dist/components/Link/LinkTypes.d.ts

@@ -1,8 +0,0 @@
-export declare enum LinkTypes {
-    Action = "action",
-    Backwards = "backwards",
-    Button = "button",
-    Default = "default",
-    External = "external",
-    Forwards = "forwards"
-}

package/dist/components/List/ListTypes.d.ts

@@ -1,5 +0,0 @@
-export declare enum ListTypes {
-    Ordered = "ol",
-    Unordered = "ul",
-    Description = "dl"
-}