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

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 { 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 } from "./components/Notification/Notification";
-export { NotificationTypes } from "./components/Notification/NotificationTypes";
+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/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],

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,9 +33,8 @@ const select = {
 
 const Select = {
   parts: ["helperText", "inline", "select"],
-  baseStyle: ({ labelPosition }) => {
+  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.

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;