@nypl/design-system-react-components 0.25.12 → 0.25.13

package/dist/helpers/enums.d.ts

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

package/dist/index.d.ts

@@ -1,15 +1,14 @@
 import "./styles.scss";
 export { Box, ButtonGroup, Center, Circle, Flex, Grid, GridItem, HStack, Spacer, Square, 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 { ColorVariants } from "./components/Breadcrumbs/BreadcrumbsTypes";
+export { BreadcrumbsTypes } from "./components/Breadcrumbs/BreadcrumbsTypes";
 export { default as Button } from "./components/Button/Button";
 export { ButtonTypes } from "./components/Button/ButtonTypes";
 export { default as Card, CardActions, CardContent, CardHeading, } from "./components/Card/Card";
-export { CardLayouts } from "./components/Card/CardTypes";
 export { default as Checkbox } from "./components/Checkbox/Checkbox";
 export { default as CheckboxGroup } from "./components/CheckboxGroup/CheckboxGroup";
-export { CheckboxGroupLayoutTypes } from "./components/CheckboxGroup/CheckboxGroupLayoutTypes";
 export { default as DatePicker, FullDateType, } from "./components/DatePicker/DatePicker";
 export { DatePickerTypes } from "./components/DatePicker/DatePickerTypes";
 export { default as DSProvider } from "./theme/provider";
@@ -18,7 +17,7 @@ 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 { HeadingDisplaySizes, HeadingLevels, } from "./components/Heading/HeadingTypes";
+export { HeadingSizes, HeadingLevels } from "./components/Heading/HeadingTypes";
 export { default as HelperErrorText } from "./components/HelperErrorText/HelperErrorText";
 export { default as Hero } from "./components/Hero/Hero";
 export { HeroTypes } from "./components/Hero/HeroTypes";
@@ -28,6 +27,7 @@ export { IconAlign, IconColors, IconNames, IconRotationTypes, IconSizes, IconTyp
 export { default as Image } from "./components/Image/Image";
 export { ImageRatios, ImageSizes, ImageTypes, } from "./components/Image/ImageTypes";
 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";
@@ -42,12 +42,11 @@ export { default as ProgressIndicator } from "./components/ProgressIndicator/Pro
 export { ProgressIndicatorSizes, ProgressIndicatorTypes, } from "./components/ProgressIndicator/ProgressIndicatorTypes";
 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 { SkeletonLoaderImageRatios } from "./components/SkeletonLoader/SkeletonLoaderTypes";
 export { default as Slider } from "./components/Slider/Slider";
 export { default as StatusBadge } from "./components/StatusBadge/StatusBadge";
 export { StatusBadgeTypes } from "./components/StatusBadge/StatusBadgeTypes";
@@ -56,11 +55,11 @@ export { StructuredContentImagePosition } from "./components/StructuredContent/S
 export { Tabs, TabList, Tab, TabPanels, TabPanel, } from "./components/Tabs/Tabs";
 export { TemplateAppContainer, Template, TemplateAboveHeader, TemplateHeader, TemplateBreakout, TemplateContent, TemplateContentTop, TemplateContentPrimary, TemplateContentSidebar, TemplateFooter, } from "./components/Template/Template";
 export { default as Text } from "./components/Text/Text";
-export { TextDisplaySizes } from "./components/Text/TextTypes";
+export { TextSizes } from "./components/Text/TextTypes";
 export { default as TextInput, TextInputRefType, } from "./components/TextInput/TextInput";
 export { TextInputTypes } from "./components/TextInput/TextInputTypes";
 export { default as Toggle } from "./components/Toggle/Toggle";
-export { ToggleSizes } from "./components/Toggle/ToggleSizes";
+export { ToggleSizes } from "./components/Toggle/ToggleTypes";
 export { default as useNYPLTheme } from "./hooks/useNYPLTheme";
 export { default as VideoPlayer } from "./components/VideoPlayer/VideoPlayer";
 export { VideoPlayerAspectRatios, VideoPlayerTypes, } from "./components/VideoPlayer/VideoPlayerTypes";

package/dist/theme/components/accordion.d.ts

@@ -2,23 +2,18 @@ declare const Accordion: {
     parts: string[];
     baseStyle: {
         container: {
-            borderLeftWidth: string;
-            borderRightWidth: string;
-            borderColor: string;
+            border: string;
             width: string;
         };
         button: {
-            border: string;
-            fontWeight: number;
-            _hover: {
-                bg: string;
-            };
+            borderWidth: string;
+            fontWeight: string;
         };
         panel: {
-            paddingTop: string;
-            paddingRight: string;
-            paddingLeft: string;
-            paddingBottom: string;
+            padding: string;
+            borderLeftWidth: string;
+            borderRightWidth: string;
+            borderBottomWidth: string;
         };
     };
 };

package/dist/theme/components/breadcrumb.d.ts

@@ -81,6 +81,9 @@ declare const Breadcrumb: {
                     color: string;
                 };
             };
+            svg: {
+                fill: string;
+            };
         };
         booksAndMore: {
             bg: string;

package/dist/theme/components/card.d.ts

@@ -169,10 +169,10 @@ declare const _default: {
         };
     };
     CardImage: {
-        baseStyle: ({ center, imageAtEnd, imageSize, layout }: {
-            center: any;
-            imageAtEnd: any;
-            imageSize: any;
+        baseStyle: ({ imageIsAtEnd, isCentered, size, layout }: {
+            imageIsAtEnd: any;
+            isCentered: any;
+            size: any;
             layout: any;
         }) => any;
     };

package/dist/theme/components/checkbox.d.ts

@@ -55,6 +55,7 @@ declare const Checkbox: {
             fontWeight: string;
             marginBottom: string;
             marginLeft: string;
+            width: string;
             _disabled: {
                 color: string;
                 opacity: number;

package/dist/theme/components/checkboxGroup.d.ts

@@ -1,6 +1,8 @@
 declare const CheckboxGroup: {
     parts: string[];
-    baseStyle: {
+    baseStyle: ({ isFullWidth }: {
+        isFullWidth?: boolean;
+    }) => {
         helper: {
             marginTop: string;
         };

package/dist/theme/components/global.d.ts

@@ -16,6 +16,7 @@ declare const checkboxRadioLabelStyles: {
     fontWeight: string;
     marginBottom: string;
     marginLeft: string;
+    width: string;
     _disabled: {
         color: string;
         opacity: number;
@@ -37,7 +38,7 @@ declare const checkboxRadioHelperStyle: {
     marginTop: string;
     marginBottom: string;
 };
-declare const checkboxRadioGroupStyles: {
+declare const checkboxRadioGroupStyles: (isFullWidth?: boolean) => {
     helper: {
         marginTop: string;
     };

package/dist/theme/components/hero.d.ts

@@ -396,7 +396,7 @@ declare const Hero: {
             alignItems: string;
             display: string;
             justifyContent: string;
-            marginBottom: string;
+            marginBottom: string[];
             minHeight: string;
             overflow: string;
             padding: {

package/dist/theme/components/image.d.ts

@@ -13,11 +13,11 @@ declare const CustomImage: {
         figure: any;
         figcaption: {
             fontStyle: string;
+            fontSize: string;
         };
         img: any;
         captionWrappers: {
             marginBottom: string;
-            fontSize: string;
         };
     };
 };

package/dist/theme/components/notification.d.ts

@@ -1,9 +1,9 @@
 declare const _default: {
     Notification: {
         parts: string[];
-        baseStyle: ({ centered, dismissible, noMargin, notificationType }: {
-            centered: any;
+        baseStyle: ({ dismissible, isCentered, noMargin, notificationType }: {
             dismissible: any;
+            isCentered: any;
             noMargin: any;
             notificationType: any;
         }) => {
@@ -72,9 +72,9 @@ declare const _default: {
     };
     NotificationHeading: {
         parts: string[];
-        baseStyle: ({ centered, icon, notificationType }: {
-            centered: any;
+        baseStyle: ({ icon, isCentered, notificationType }: {
             icon: any;
+            isCentered: any;
             notificationType: any;
         }) => {
             display: string;

package/dist/theme/components/pagination.d.ts

@@ -1,7 +1,6 @@
 declare const Pagination: {
     parts: string[];
     baseStyle: {
-        marginBottom: string;
         alignItems: string;
         display: string;
         width: string;
@@ -9,10 +8,8 @@ declare const Pagination: {
             lineHeight: string;
             textDecoration: string;
         };
-        li: {
-            _first: {
-                marginTop: string;
-            };
+        ul: {
+            marginBottom: string;
         };
     };
 };

package/dist/theme/components/radio.d.ts

@@ -60,6 +60,7 @@ declare const Radio: {
             fontWeight: string;
             marginBottom: string;
             marginLeft: string;
+            width: string;
             _disabled: {
                 color: string;
                 opacity: number;

package/dist/theme/components/radioGroup.d.ts

@@ -1,6 +1,8 @@
 declare const RadioGroup: {
     parts: string[];
-    baseStyle: {
+    baseStyle: ({ isFullWidth }: {
+        isFullWidth?: boolean;
+    }) => {
         helper: {
             marginTop: string;
         };

package/dist/theme/components/select.d.ts

@@ -2,6 +2,9 @@ declare const Select: {
     parts: string[];
     baseStyle: {
         marginBottom: string;
+        ".chakra-select__icon-wrapper": {
+            zIndex: string;
+        };
         helper: {
             marginTop: string;
             marginBottom: string;

package/dist/theme/components/toggle.d.ts

@@ -19,7 +19,7 @@ declare const _default: {
     };
     Switch: {
         baseStyle: ({ size }: {
-            size: any;
+            size: string;
         }) => {
             alignItems: string;
             opacity: number;
@@ -67,6 +67,18 @@ declare const _default: {
                 };
             };
         };
+        sizes: {
+            sm: {
+                container: {
+                    [x: string]: string;
+                };
+            };
+            lg: {
+                container: {
+                    [x: string]: string;
+                };
+            };
+        };
         defaultProps: {
             colorScheme: string;
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "0.25.12",
+  "version": "0.25.13",
   "description": "Design System React Components",
   "repository": {
     "type": "git",

package/src/components/AccessibilityGuide/SkipNavigation.stories.mdx

@@ -0,0 +1,34 @@
+import { Meta } from "@storybook/addon-docs";
+
+import { getCategory } from "../../utils/componentCategories";
+
+<Meta title={getCategory("Skip Navigation")} />
+
+# Skip Navigation
+
+| Table of Contents                              |
+| ---------------------------------------------- |
+| 1. [General Information](#general-information) |
+| 2. [Resources](#resources)                     |
+
+## General Information
+
+An application's "skip navigation link" is used to skip to the primary or main
+content of a page. This link is located at the top of the page and is usually
+visually hidden until a user focuses on the link. For most applications at
+NYPL, the [NYPL Header](https://github.com/NYPL/dgx-header-component) is used
+and this component already renders a skip navigation link.
+
+The link must target an existing anchor on the page and is typically the `id`
+`"#mainContent"` set on the `main` HTML element on the page. While the DS does not
+currently, as of `v0.25.13`, provide a skip navigation link, it does provide the
+anchor element for the link through the `TemplateAppContainer` component.
+
+The `TemplateAppContainer` component renders as a `main` HTML element with a
+default `id` of `"mainContent"`. This should be used as the anchor element that
+the skip navigation link points to.
+
+## Resources
+
+- [WebAim Skip Navigation Link](https://webaim.org/techniques/skipnav/)
+- [A11ymatters Skip Navigation Link](https://www.a11ymatters.com/pattern/skip-link/)