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

package/src/docs/Welcome.stories.mdx

@@ -2,27 +2,13 @@ import { Meta } from "@storybook/addon-docs";
 
 import { Box, Center, Circle, VStack, Square } from "@chakra-ui/react";
 import Card, { CardHeading, CardContent } from "../components/Card/Card";
-import Hero from "../components/Hero/Hero";
-import { HeroTypes } from "../components/Hero/HeroTypes";
 import Heading from "../components/Heading/Heading";
-import {
-  HeadingLevels,
-  HeadingSizes,
-} from "../components/Heading/HeadingTypes";
 import Icon from "../components/Icons/Icon";
-import {
-  IconColors,
-  IconNames,
-  IconSizes,
-} from "../components/Icons/IconTypes";
 import Image from "../components/Image/Image";
 import Link from "../components/Link/Link";
-import { LinkTypes } from "../components/Link/LinkTypes";
 import Logo from "../components/Logo/Logo";
-import { LogoNames, LogoSizes } from "../components/Logo/LogoTypes";
 import SimpleGrid from "../components/Grid/SimpleGrid";
 import Text from "../components/Text/Text";
-import { TextSizes } from "../components/Text/TextTypes";
 import DSProvider from "../theme/provider";
 
 <Meta title="Welcome" />
@@ -30,11 +16,11 @@ import DSProvider from "../theme/provider";
 <DSProvider>
   <VStack spacing="s">
     <Center>
-      <Logo name={LogoNames.ReservoirVerticalColor} size={LogoSizes.Small} />
+      <Logo name="reservoirVerticalColor" size="small" />
     </Center>
     <Box>
       <Center>
-        <Heading level={HeadingLevels.One} size={HeadingSizes.Tertiary}>
+        <Heading level="one" size="tertiary">
           The React Component Library of the New York Public Library
         </Heading>
       </Center>
@@ -57,31 +43,29 @@ import DSProvider from "../theme/provider";
         }}
       >
         <Icon
-          name={IconNames.ActionCheckCircle}
-          size={IconSizes.ExtraExtraLarge}
-          color={IconColors.SectionEducationSecondary}
-          additionalStyles={{
-            marginBottom: "s",
-          }}
+          name="actionCheckCircle"
+          size="xxlarge"
+          color="section.education.secondary"
+          marginBottom="s"
         />
         <Card isCentered>
-          <CardHeading id="main-heading1" level={HeadingLevels.Three}>
+          <CardHeading id="main-heading1" level="three">
             Get Started
           </CardHeading>
           <CardContent>
-            <Text size={TextSizes.Caption}>
+            <Text size="caption">
               To start using Reservoir Design System, refer to Reservoir's
               Github{" "}
               <Link
                 href="https://github.com/NYPL/nypl-design-system/wiki"
-                type={LinkTypes.External}
+                type="external"
               >
                 Wiki
               </Link>{" "}
               and{" "}
               <Link
                 href="https://github.com/NYPL/nypl-design-system/blob/development/README.md"
-                type={LinkTypes.External}
+                type="external"
               >
                 ReadMe
               </Link>{" "}
@@ -101,19 +85,17 @@ import DSProvider from "../theme/provider";
         }}
       >
         <Icon
-          name={IconNames.Search}
-          size={IconSizes.ExtraExtraLarge}
-          color={IconColors.SectionEducationSecondary}
-          additionalStyles={{
-            marginBottom: "s",
-          }}
+          name="search"
+          size="xxlarge"
+          color="section.education.secondary"
+          marginBottom="s"
         />
         <Card isCentered>
-          <CardHeading id="main-heading1" level={HeadingLevels.Three}>
+          <CardHeading id="main-heading1" level="three">
             Find Components
           </CardHeading>
           <CardContent>
-            <Text size={TextSizes.Caption}>
+            <Text size="caption">
               For your convenience, the Reservoir Design System components have
               been organized into logical categories based on both form and
               function. Please refer to the <b>COMPONENTS</b> section in the
@@ -132,15 +114,13 @@ import DSProvider from "../theme/provider";
         }}
       >
         <Icon
-          name={IconNames.FileTypeSpreadsheet}
-          size={IconSizes.ExtraExtraLarge}
-          color={IconColors.SectionEducationSecondary}
-          additionalStyles={{
-            marginBottom: "s",
-          }}
+          name="fileTypeSpreadsheet"
+          size="xxlarge"
+          color="section.education.secondary"
+          marginBottom="s"
         />
         <Card isCentered>
-          <CardHeading id="main-heading1" level={HeadingLevels.Three}>
+          <CardHeading id="main-heading1" level="three">
             View the Code
           </CardHeading>
           <CardContent>
@@ -149,13 +129,13 @@ import DSProvider from "../theme/provider";
               published on{" "}
               <Link
                 href="https://www.npmjs.com/package/@nypl/design-system-react-components"
-                type={LinkTypes.External}
+                type="external"
               >
                 npm
               </Link>
               . If you're looking to contribute to this project, checkout the <Link
                 href="https://github.com/NYPL/nypl-design-system"
-                type={LinkTypes.External}
+                type="external"
               >
                 nypl-design-system
               </Link> repo on Github for more information.

package/src/helpers/types.ts

@@ -0,0 +1 @@
+export type LayoutTypes = "column" | "row";

package/src/hooks/tests/useNYPLTheme.test.tsx

@@ -20,7 +20,7 @@ describe("useNYPLTheme", () => {
       wrapper: ({ children }) => <DSProvider>{children}</DSProvider>,
     });
     const allKeys = Object.keys(result.current);
-    const colorsKeys = Object.keys(result.current.colors);
+    const colorsKeys = Object.keys((result.current as any).colors);
 
     expect(allKeys).toEqual([
       "breakpoints",

package/src/hooks/useNYPLTheme.stories.mdx

@@ -55,8 +55,7 @@ This will allow you to use NYPL-specific styles in your components through CSS-i
 All DS components _should_ be used with their current styles. If a DS component
 needs an updated style, first contact the Design System and UX teams about this
 update. If you really _need_ to update a style and there is no available
-variant, then you can add styles directly to the `additionalStyles` prop. At the
-moment, not all DS components have this prop or feature.
+variant, then you can add styles directly as style prop.
 
 For example, if the `Heading` component should render the text in NYPL's green
 color used for "success primary" and add a bold font weight, then you can do
@@ -70,10 +69,8 @@ return (
   <div>
     <Heading
       level={2}
-      additionalStyles={{
-        color: theme.colors.ui.sucess.primary,
-        fontWeight: theme.fontWeights.bold,
-      }}
+      color={theme.colors.ui.success.primary}
+      fontWeight={theme.fontWeights.bold}
     >
       Get a Digital Library Card Today in a Few Easy Steps
     </Heading>

package/src/index.ts

@@ -4,7 +4,6 @@ import "./styles.scss";
 // components for usage in consuming applications.
 export {
   Box,
-  ButtonGroup,
   Center,
   Circle,
   Flex,
@@ -16,12 +15,16 @@ export {
   Stack,
   VStack,
 } from "@chakra-ui/react";
-export { default as Accordion } from "./components/Accordion/Accordion";
-export { AccordionTypes } from "./components/Accordion/AccordionTypes";
-export { default as Breadcrumbs } from "./components/Breadcrumbs/Breadcrumbs";
-export { BreadcrumbsTypes } from "./components/Breadcrumbs/BreadcrumbsTypes";
-export { default as Button } from "./components/Button/Button";
-export { ButtonTypes } from "./components/Button/ButtonTypes";
+export {
+  default as Accordion,
+  AccordionTypes,
+} from "./components/Accordion/Accordion";
+export {
+  default as Breadcrumbs,
+  BreadcrumbsTypes,
+} from "./components/Breadcrumbs/Breadcrumbs";
+export { default as Button, ButtonTypes } from "./components/Button/Button";
+export { default as ButtonGroup } from "./components/ButtonGroup/ButtonGroup";
 export {
   default as Card,
   CardActions,
@@ -32,65 +35,70 @@ export { default as Checkbox } from "./components/Checkbox/Checkbox";
 export { default as CheckboxGroup } from "./components/CheckboxGroup/CheckboxGroup";
 export {
   default as DatePicker,
+  DatePickerTypes,
   FullDateType,
 } 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 { FormGaps } from "./components/Form/FormTypes";
-export { GridGaps } from "./components/Grid/GridTypes";
-export { default as Heading } from "./components/Heading/Heading";
-export { HeadingSizes, HeadingLevels } from "./components/Heading/HeadingTypes";
+export {
+  default as Heading,
+  HeadingSizes,
+  HeadingLevels,
+} from "./components/Heading/Heading";
 export { default as HelperErrorText } from "./components/HelperErrorText/HelperErrorText";
-export { default as Hero } from "./components/Hero/Hero";
-export { HeroTypes } from "./components/Hero/HeroTypes";
+export { default as Hero, HeroTypes } from "./components/Hero/Hero";
 export { default as HorizontalRule } from "./components/HorizontalRule/HorizontalRule";
-export { default as Icon } from "./components/Icons/Icon";
 export {
+  default as Icon,
   IconAlign,
   IconColors,
   IconNames,
   IconRotationTypes,
   IconSizes,
   IconTypes,
-} from "./components/Icons/IconTypes";
-export { default as Image } from "./components/Image/Image";
+} from "./components/Icons/Icon";
 export {
+  default as Image,
   ImageRatios,
   ImageSizes,
   ImageTypes,
-} from "./components/Image/ImageTypes";
+} from "./components/Image/Image";
 export { default as Label } from "./components/Label/Label";
-export { LayoutTypes } from "./helpers/enums";
-export { default as Link } from "./components/Link/Link";
-export { LinkTypes } from "./components/Link/LinkTypes";
-export { default as List } from "./components/List/List";
-export { ListTypes } from "./components/List/ListTypes";
-export { default as Logo } from "./components/Logo/Logo";
-export { LogoColors, LogoNames, LogoSizes } from "./components/Logo/LogoTypes";
-export { default as Modal } from "./components/Modal/Modal";
-export { default as Notification } from "./components/Notification/Notification";
-export { NotificationTypes } from "./components/Notification/NotificationTypes";
+export { LayoutTypes } from "./helpers/types";
+export { default as Link, LinkTypes } from "./components/Link/Link";
+export { default as List, ListTypes } from "./components/List/List";
+export { default as Logo, LogoNames, LogoSizes } from "./components/Logo/Logo";
+export { ModalTrigger, useModal } from "./components/Modal/Modal";
+export {
+  default as Notification,
+  NotificationTypes,
+} from "./components/Notification/Notification";
 export { default as Pagination } from "./components/Pagination/Pagination";
-export { default as ProgressIndicator } from "./components/ProgressIndicator/ProgressIndicator";
 export {
+  default as ProgressIndicator,
   ProgressIndicatorSizes,
   ProgressIndicatorTypes,
-} from "./components/ProgressIndicator/ProgressIndicatorTypes";
+} from "./components/ProgressIndicator/ProgressIndicator";
 export { default as Radio } from "./components/Radio/Radio";
 export { default as RadioGroup } from "./components/RadioGroup/RadioGroup";
 export { default as SearchBar } from "./components/SearchBar/SearchBar";
-export { default as Select } from "./components/Select/Select";
-export { LabelPositions } from "./components/Select/SelectTypes";
-export { default as SimpleGrid } from "./components/Grid/SimpleGrid";
-export { default as SkeletonLoader } from "./components/SkeletonLoader/SkeletonLoader";
-export { SkeletonLoaderImageRatios } from "./components/SkeletonLoader/SkeletonLoaderTypes";
+export { default as Select, LabelPositions } from "./components/Select/Select";
+export { default as SimpleGrid, GridGaps } from "./components/Grid/SimpleGrid";
+export {
+  default as SkeletonLoader,
+  SkeletonLoaderImageRatios,
+} from "./components/SkeletonLoader/SkeletonLoader";
+export { default as SkipNavigation } from "./components/SkipNavigation/SkipNavigation";
 export { default as Slider } from "./components/Slider/Slider";
-export { default as StatusBadge } from "./components/StatusBadge/StatusBadge";
-export { StatusBadgeTypes } from "./components/StatusBadge/StatusBadgeTypes";
-export { default as StructuredContent } from "./components/StructuredContent/StructuredContent";
-export { StructuredContentImagePosition } from "./components/StructuredContent/StructuredContentTypes";
+export {
+  default as StatusBadge,
+  StatusBadgeTypes,
+} from "./components/StatusBadge/StatusBadge";
+export {
+  default as StructuredContent,
+  StructuredContentImagePosition,
+} from "./components/StructuredContent/StructuredContent";
 export {
   default as Tabs,
   TabList,
@@ -110,21 +118,19 @@ export {
   TemplateContentSidebar,
   TemplateFooter,
 } from "./components/Template/Template";
-export { default as Text } from "./components/Text/Text";
-export { TextSizes } from "./components/Text/TextTypes";
+export { default as Text, TextSizes } from "./components/Text/Text";
 export {
   default as TextInput,
   TextInputRefType,
+  TextInputTypes,
 } from "./components/TextInput/TextInput";
-export { TextInputTypes } from "./components/TextInput/TextInputTypes";
-export { default as Toggle } from "./components/Toggle/Toggle";
-export { ToggleSizes } from "./components/Toggle/ToggleTypes";
+export { default as Toggle, ToggleSizes } from "./components/Toggle/Toggle";
 export { default as useCarouselStyles } from "./hooks/useCarouselStyles";
 export { default as useNYPLTheme } from "./hooks/useNYPLTheme";
 export { default as useWindowSize } from "./hooks/useWindowSize";
-export { default as VideoPlayer } from "./components/VideoPlayer/VideoPlayer";
 export {
+  default as VideoPlayer,
   VideoPlayerAspectRatios,
   VideoPlayerTypes,
-} from "./components/VideoPlayer/VideoPlayerTypes";
+} from "./components/VideoPlayer/VideoPlayer";
 export { default as Table } from "./components/Table/Table";

package/src/styles.scss

@@ -21,4 +21,3 @@
 // Components.
 @import "./components/Autosuggest/_Autosuggest.scss";
 @import "./components/DatePicker/_DatePicker.scss";
-@import "./components/Modal/_Modal.scss";

package/src/theme/components/buttonGroup.ts

@@ -0,0 +1,10 @@
+const ButtonGroup = {
+  baseStyle: ({ buttonWidth }) => ({
+    width: buttonWidth === "default" ? "fit-content" : "100%",
+    button: {
+      flexGrow: buttonWidth === "default" ? undefined : "1",
+    },
+  }),
+};
+
+export default ButtonGroup;

package/src/theme/components/card.ts

@@ -1,3 +1,30 @@
+interface CardBaseStyleProps {
+  hasImage: boolean;
+  imageIsAtEnd: boolean;
+  isBordered: boolean;
+  isCentered: boolean;
+  layout: string;
+  mainActionLink: boolean;
+}
+interface BodyPaddingProps {
+  hasImage: boolean;
+  imageIsAtEnd: boolean;
+  isBordered: boolean;
+  isRow: boolean;
+}
+interface CardImageBaseStyleProps {
+  imageIsAtEnd: boolean;
+  isCentered: boolean;
+  size: keyof typeof imageSizes;
+  layout: string;
+}
+interface CardActionsBaseStyleProps {
+  bottomBorder: boolean;
+  isCentered: boolean;
+  layout: string;
+  topBorder: boolean;
+}
+
 const imageSizes = {
   xxsmall: { flex: { base: "0 0 100%", md: "0 0 64px" }, width: "100%" },
   xsmall: { flex: { md: "0 0 96px" } },
@@ -8,10 +35,10 @@ const imageSizes = {
 // This is complicated and can be refactored later...
 const getBodyPaddingStyles = ({
   hasImage,
-  isBordered,
   imageIsAtEnd,
+  isBordered,
   isRow,
-}) => {
+}: BodyPaddingProps) => {
   let bodyPadding = null;
   if (isBordered) {
     bodyPadding = "inset.default";
@@ -39,15 +66,14 @@ const getBodyPaddingStyles = ({
 };
 const Card = {
   parts: ["actions", "body", "heading"],
-  baseStyle: (props) => {
-    const {
-      hasImage,
-      imageIsAtEnd,
-      isBordered,
-      isCentered,
-      layout,
-      mainActionLink,
-    } = props;
+  baseStyle: ({
+    hasImage,
+    imageIsAtEnd,
+    isBordered,
+    isCentered,
+    layout,
+    mainActionLink,
+  }: CardBaseStyleProps) => {
     const isRow = layout === "row";
     const layoutStyles = isRow
       ? {
@@ -107,8 +133,12 @@ const Card = {
 };
 
 const CardActions = {
-  baseStyle: (props) => {
-    const { bottomBorder, isCentered, layout, topBorder } = props;
+  baseStyle: ({
+    bottomBorder,
+    isCentered,
+    layout,
+    topBorder,
+  }: CardActionsBaseStyleProps) => {
     let justifyContent = null;
     // Only center in the column layout.
     if (layout === "row") {
@@ -154,9 +184,14 @@ const CardContent = {
 };
 
 const CardImage = {
-  baseStyle: ({ imageIsAtEnd, isCentered, layout, size }) => {
+  baseStyle: ({
+    imageIsAtEnd,
+    isCentered,
+    layout,
+    size,
+  }: CardImageBaseStyleProps) => {
     // These sizes are only for the "row" layout.
-    const imageSize = imageSizes[size] || {};
+    const imageSize = size ? imageSizes[size] : {};
     const layoutStyles =
       layout === "row"
         ? {

package/src/theme/components/componentWrapper.ts

@@ -1,6 +1,10 @@
+interface ComponentWrapperProps {
+  hasChildren: boolean;
+}
+
 const ComponentWrapper = {
   parts: ["helperErrorText"],
-  baseStyle: ({ hasChildren }) => ({
+  baseStyle: ({ hasChildren }: ComponentWrapperProps) => ({
     helperErrorText: {
       marginTop: hasChildren ? "xs" : "0",
     },

package/src/theme/components/customTable.ts

@@ -1,6 +1,12 @@
+interface BaseStyleProps {
+  columnHeadersTextColor?: string;
+  showRowDividers?: boolean;
+  useRowHeaders?: boolean;
+}
+
 export const baseTHStyles = (
   showRowDividers = false,
-  columnHeadersTextColor = false
+  columnHeadersTextColor = ""
 ) => ({
   border: showRowDividers ? undefined : "none",
   borderBottom: showRowDividers ? undefined : "0px",
@@ -38,7 +44,7 @@ export const baseStyle = ({
   columnHeadersTextColor,
   showRowDividers,
   useRowHeaders,
-}) => ({
+}: BaseStyleProps) => ({
   // Headers `th` can be rendered as the first cell in every row through the
   // `useRowHeaders`. Whereas the header `th` in the `thead` can be rendered
   // with a custom color, the row header `th` in the `tbody` should always

package/src/theme/components/fieldset.ts

@@ -1,8 +1,12 @@
 import { labelLegendText } from "./global";
 import { screenreaderOnly } from "./globalMixins";
 
+interface FieldSetProps {
+  isLegendHidden?: boolean;
+}
+
 const Fieldset = {
-  baseStyle: ({ isLegendHidden }) => {
+  baseStyle: ({ isLegendHidden }: FieldSetProps) => {
     const screenreaderStyles = isLegendHidden ? screenreaderOnly : {};
 
     return {

package/src/theme/components/helperErrorText.ts

@@ -1,5 +1,9 @@
+interface HelperErrorTextBaseStyle {
+  isInvalid: boolean;
+}
+
 const helperErrorText = {
-  baseStyle: ({ isInvalid }) => ({
+  baseStyle: ({ isInvalid }: HelperErrorTextBaseStyle) => ({
     marginTop: "xxs",
     marginBottom: "0",
     fontSize: "helper.default",

package/src/theme/components/hero.ts

@@ -187,7 +187,7 @@ const campaign = {
     maxWidth: { md: "960px" },
   },
 };
-const fiftyfifty = {
+const fiftyFifty = {
   content: {
     ...wrapperStyles,
     alignItems: "center",
@@ -231,7 +231,7 @@ const Hero = {
     secondaryWhatsOn,
     tertiary,
     campaign,
-    fiftyfifty,
+    fiftyFifty,
   },
 };
 

package/src/theme/components/horizontalRule.ts

@@ -1,5 +1,9 @@
+interface HorizontalRuleBaseStyle {
+  align: string;
+}
+
 const HorizontalRule = {
-  baseStyle: ({ align }) => ({
+  baseStyle: ({ align }: HorizontalRuleBaseStyle) => ({
     bg: "ui.gray.light-cool",
     border: "0",
     height: "2px",

package/src/theme/components/icon.ts

@@ -52,8 +52,14 @@ const size = {
     width: "0.875rem",
   },
 };
+interface IconBaseStyle {
+  align: keyof typeof align;
+  color: string;
+  iconRotation: keyof typeof iconRotation;
+  size: keyof typeof size;
+}
 const Icon = {
-  baseStyle: (props) => {
+  baseStyle: (props: IconBaseStyle) => {
     const allStyles = {
       ...svgBase,
       ...align[props.align],

package/src/theme/components/image.ts

@@ -1,3 +1,11 @@
+interface CustomImageBaseStyle {
+  size: keyof typeof imageSizes;
+}
+interface CustomImageWrapperBaseStyle {
+  ratio: keyof typeof imageRatios;
+  size: keyof typeof imageSizes;
+}
+
 const imageWrap = {
   position: "relative",
   width: "100%",
@@ -75,7 +83,7 @@ const CustomImage = {
       },
     },
   },
-  baseStyle: ({ size = "default" }) => ({
+  baseStyle: ({ size = "default" }: CustomImageBaseStyle) => ({
     figure: {
       margin: "auto",
       ...imageSizes[size],
@@ -96,13 +104,16 @@ const CustomImage = {
       ...imageSizes[size],
     },
     captionWrappers: {
-      marginBottom: "xxs",
+      marginTop: "xxs",
     },
   }),
 };
 const CustomImageWrapper = {
   parts: ["crop"],
-  baseStyle: ({ ratio = "original", size = "default" }) => ({
+  baseStyle: ({
+    ratio = "original",
+    size = "default",
+  }: CustomImageWrapperBaseStyle) => ({
     marginLeft: "auto",
     marginRight: "auto",
     width: "100%",

package/src/theme/components/label.ts

@@ -1,7 +1,11 @@
 import { labelLegendText } from "./global";
 
+interface LabelBaseStyle {
+  isInlined: boolean;
+}
+
 const Label = {
-  baseStyle: ({ isInlined }) => ({
+  baseStyle: ({ isInlined }: LabelBaseStyle) => ({
     ...labelLegendText,
     flex: isInlined ? "1" : null,
     whiteSpace: isInlined ? "nowrap" : null,

package/src/theme/components/list.ts

@@ -1,5 +1,10 @@
 import { textMargin } from "./global";
 
+interface ListBaseStyle {
+  inline?: boolean;
+  noStyling: boolean;
+}
+
 export const baseListStyles = (inline = false, noStyling = false) => ({
   // Browser automatically applies margin, so by default we unset it.
   margin: noStyling ? "0" : "unset",
@@ -71,9 +76,10 @@ export const baseDefinitionStyles = {
 };
 
 const List = {
-  baseStyle: ({ inline, noStyling }) => baseListStyles(inline, noStyling),
+  baseStyle: ({ inline, noStyling }: ListBaseStyle) =>
+    baseListStyles(inline, noStyling),
   variants: {
-    ul: ({ noStyling }) => baseUnorderedStyles(noStyling),
+    ul: ({ noStyling }: ListBaseStyle) => baseUnorderedStyles(noStyling),
     ol: textMargin,
     dl: baseDefinitionStyles,
   },

package/src/theme/components/logo.ts

@@ -1,3 +1,7 @@
+interface LogoBaseStyle {
+  size: keyof typeof size;
+}
+
 const svgBase = {
   display: "inline-block",
   height: "auto",
@@ -35,7 +39,7 @@ const size = {
   },
 };
 const Logo = {
-  baseStyle: (props) => {
+  baseStyle: (props: LogoBaseStyle) => {
     const allStyles = {
       ...svgBase,
       ...size[props.size],