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

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"
-}

package/dist/components/Logo/LogoTypes.d.ts

@@ -1,54 +0,0 @@
-export declare enum LogoColors {
-    Default = "",
-    UiBlack = "ui.black",
-    UiWhite = "ui.white"
-}
-export declare enum LogoSizes {
-    Default = "default",
-    ExtraExtraSmall = "xxsmall",
-    ExtraSmall = "xsmall",
-    Small = "small",
-    Medium = "medium",
-    Large = "large"
-}
-export declare enum LogoNames {
-    BrooklynPublicLibraryBlack = "logo_bpl_black",
-    BrooklynPublicLibraryWhite = "logo_bpl_white",
-    CleverColor = "logo_clever_color",
-    CleverWhite = "logo_clever_white",
-    FirstBookColor = "logo_firstbook_color",
-    FirstBookColorNegative = "logo_firstbook_color_negative",
-    LPAColor = "logo_lpa_color",
-    LPABlack = "logo_lpa_black",
-    LPAWhite = "logo_lpa_white",
-    MyLibraryNYCBlack = "logo_mln_black",
-    MyLibraryNYCWhite = "logo_mln_white",
-    NYPLBlack = "logo_nypl_full_black",
-    NYPLWhite = "logo_nypl_full_white",
-    NYPLLionBlack = "logo_nypl_lion_black",
-    NYPLLionWhite = "logo_nypl_lion_white",
-    OpenEBooksColor = "logo_openebooks_color",
-    OpenEBooksNegative = "logo_openebooks_negative",
-    OpenEBooksWithTextColor = "logo_openebooks_wtext_color",
-    OpenEBooksWithTextNegative = "logo_openebooks_wtext_negative",
-    QueensPublicLibraryColor = "logo_qpl_color",
-    QueensPublicLibraryBlack = "logo_qpl_black",
-    QueensPublicLibraryWhite = "logo_qpl_white",
-    QueensPublicLibraryAltBlack = "logo_qpl_alt_black",
-    QueensPublicLibraryAltWhite = "logo_qpl_alt_white",
-    ReservoirIconColor = "logo_reservoir_icon_color",
-    ReservoirVerticalColor = "logo_reservoir_vertical_color",
-    SchomburgColor = "logo_schomburg_color",
-    SchomburgBlack = "logo_schomburg_black",
-    SchomburgWhite = "logo_schomburg_white",
-    SchomburgCircleColor = "logo_schomburg_circle_color",
-    SchomburgCircleBlack = "logo_schomburg_circle_black",
-    SchomburgCircleWhite = "logo_schomburg_circle_white",
-    SimplyEColor = "logo_simplye_color",
-    SimplyEBlack = "logo_simplye_black",
-    SimplyEWhite = "logo_simplye_white",
-    SNFLBlack = "logo_snfl_black",
-    SNFLWhite = "logo_snfl_white",
-    TreasuresColor = "logo_treasures_color",
-    TreasuresColorNegative = "logo_treasures_color_negative"
-}

package/dist/components/Notification/NotificationTypes.d.ts

@@ -1,5 +0,0 @@
-export declare enum NotificationTypes {
-    Standard = "standard",
-    Announcement = "announcement",
-    Warning = "warning"
-}

package/dist/components/ProgressIndicator/ProgressIndicatorTypes.d.ts

@@ -1,8 +0,0 @@
-export declare enum ProgressIndicatorSizes {
-    Default = "default",
-    Small = "small"
-}
-export declare enum ProgressIndicatorTypes {
-    Circular = "circular",
-    Linear = "linear"
-}

package/dist/components/Select/SelectTypes.d.ts

@@ -1,8 +0,0 @@
-export declare enum SelectTypes {
-    Default = "default",
-    SearchBar = "searchbar"
-}
-export declare enum LabelPositions {
-    Default = "default",
-    Inline = "inline"
-}

package/dist/components/SkeletonLoader/SkeletonLoaderTypes.d.ts

@@ -1,5 +0,0 @@
-export declare enum SkeletonLoaderImageRatios {
-    Landscape = "landscape",
-    Portrait = "portrait",
-    Square = "square"
-}

package/dist/components/StatusBadge/StatusBadgeTypes.d.ts

@@ -1,5 +0,0 @@
-export declare enum StatusBadgeTypes {
-    Low = "low",
-    Medium = "medium",
-    High = "high"
-}

package/dist/components/StructuredContent/StructuredContentTypes.d.ts

@@ -1,5 +0,0 @@
-export declare enum StructuredContentImagePosition {
-    Left = "left",
-    Right = "right",
-    Center = "center"
-}

package/dist/components/Text/TextTypes.d.ts

@@ -1,6 +0,0 @@
-export declare enum TextSizes {
-    Default = "default",
-    Caption = "caption",
-    Tag = "tag",
-    Mini = "mini"
-}

package/dist/components/TextInput/TextInputTypes.d.ts

@@ -1,25 +0,0 @@
-export declare enum TextInputTypes {
-    email = "email",
-    hidden = "hidden",
-    number = "number",
-    password = "password",
-    text = "text",
-    textarea = "textarea",
-    tel = "tel",
-    url = "url"
-}
-export declare enum TextInputFormats {
-    email = "jdoe@domain.com",
-    hidden = "",
-    number = "",
-    password = "",
-    text = "",
-    tel = "(123) 123-1234",
-    textarea = "",
-    url = "https://domain.com"
-}
-export declare enum TextInputVariants {
-    Default = "default",
-    SearchBar = "searchBar",
-    SearchBarSelect = "searchBarSelect"
-}

package/dist/components/Toggle/ToggleTypes.d.ts

@@ -1,4 +0,0 @@
-export declare enum ToggleSizes {
-    Default = "default",
-    Small = "small"
-}

package/dist/components/VideoPlayer/VideoPlayerTypes.d.ts

@@ -1,9 +0,0 @@
-export declare enum VideoPlayerTypes {
-    Vimeo = "vimeo",
-    YouTube = "youtube"
-}
-export declare enum VideoPlayerAspectRatios {
-    FourByThree = "fourByThree",
-    SixteenByNine = "sixteenByNine",
-    Square = "square"
-}

package/dist/helpers/enums.d.ts

@@ -1,4 +0,0 @@
-export declare enum LayoutTypes {
-    Column = "column",
-    Row = "row"
-}

package/dist/utils/siteSections.d.ts

@@ -1,2 +0,0 @@
-declare const sections: string[];
-export default sections;

package/src/components/Accordion/AccordionTypes.tsx

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

package/src/components/Breadcrumbs/BreadcrumbsTypes.tsx

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

package/src/components/Button/ButtonTypes.tsx

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

package/src/components/DatePicker/DatePickerTypes.tsx

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

package/src/components/Form/FormTypes.tsx

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

package/src/components/Grid/GridTypes.tsx

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