@nypl/design-system-react-components 0.25.1 → 0.25.5

package/src/theme/components/tabs.ts

@@ -1,24 +1,28 @@
+const tablist = {
+  borderColor: "ui.black",
+};
 const tab = {
   color: "black !important",
-  paddingInlineStart: "4",
-  paddingLeft: "4",
+  paddingInlineStart: "s",
+  paddingLeft: "s",
   background: "transparent",
   border: "0",
   borderBottom: "1px solid",
   borderColor: "red",
+  height: { base: "44px" },
   marginRight: {
     base: "0",
     md: "1px",
   },
   paddingRight: {
-    base: "4",
-    md: "8",
-    lg: "12",
+    base: "s",
+    md: "l",
+    lg: "xl",
   },
   whiteSpace: "nowrap",
   _hover: {
     bg: "ui.gray.x-light-warm",
-    borderTopRadius: "2",
+    borderTopRadius: "sm",
     borderBottom: "1px solid",
     borderBottomColor: "ui.black",
   },
@@ -26,7 +30,7 @@ const tab = {
     fontWeight: "bold",
     bg: "ui.gray.light-warm",
     border: "0",
-    borderTopRadius: "2",
+    borderTopRadius: "sm",
     borderBottom: "3px solid",
     borderBottomColor: "ui.black",
     paddingBottom: "5px",
@@ -38,16 +42,21 @@ const tab = {
 // Only display the previous/next arrow buttons on mobile.
 const buttonArrows = {
   border: "0",
+  borderRadius: "0",
   display: {
-    // "inline-block" - hiding until the full "arrow" functionality is built out
-    base: "none",
     // After 38em/600px, don't display the arrow button anymore.
     md: "none",
   },
   height: "44px",
   width: "44px !important",
+  top: "8px",
+  marginLeft: "4px",
+  marginRight: "4px",
+  // Code from https://codesandbox.io/s/fxjeo for the mobile carousel
+  pos: "absolute",
+  transition: "0.6s ease",
+  zIndex: "9999",
 };
-// Styles to better align the mobile arrow buttons with the tablist.
 const tablistWrapper = {
   display: "flex",
   alignItems: "center",
@@ -55,25 +64,46 @@ const tablistWrapper = {
     base: "0",
     md: "1px solid black",
   },
-  margin: {
-    base: "-4px",
-    md: "0",
-  },
+  height: { base: "58px", md: "auto" },
+  margin: "0",
   overflowX: { base: "auto", md: "visible" },
   paddingBottom: { base: "5px", md: "0" },
-  paddingLeft: { base: "xxs", md: "0" },
-  paddingRight: { base: "xxs", md: "0" },
-  paddingTop: { base: "xxs", md: "0" },
+  paddingLeft: { base: "4px", md: "0" },
+  paddingRight: { base: "4px", md: "0" },
+  paddingTop: { base: "4px", md: "0" },
+  position: "relative",
+};
+const tabpanels = {
+  paddingTop: "2px",
+};
+
+const carouselParent = {
+  position: { base: "absolute", md: "relative" },
+  left: { base: "50px", md: "auto" },
+  paddingBottom: { base: "5px", md: "0" },
+  paddingLeft: { base: "4px", md: "0" },
+  paddingRight: "0",
+  paddingTop: { base: "4px", md: "0" },
+  right: { base: "52px", md: "auto" },
+  top: { base: "4px", md: "0" },
+  overflowX: { base: "hidden", md: "visible" },
 };
 
 const CustomTabs = {
-  parts: ["tab", "buttonArrows", "tablistWrapper"],
+  // tablist, tab, and tabpanels are existing keys which are extended but
+  // buttonArrows, tablistWrapper, and carouselParent are custom elements
+  // in the `Tabs` component.
+  parts: ["buttonArrows", "tablistWrapper", "carouselParent"],
   baseStyle: {
+    tablist,
     tab,
+    // Only display the previous/next arrow buttons on mobile.
     buttonArrows,
+    // To better align the mobile arrow buttons with the tablist.
     tablistWrapper,
+    tabpanels,
+    carouselParent,
   },
-  defaultProps: {},
 };
 
 export default CustomTabs;

package/src/theme/components/template.ts

@@ -34,21 +34,21 @@ const Template = {
 };
 const TemplateHeader = {
   baseStyle: {
-    marginBottom: 8, // --space-l
+    marginBottom: 8, // --nypl-space-l
   },
 };
 const TemplateBreakout = {
   baseStyle: {
     ...breakout,
     width: "100vw",
-    marginBottom: 8, // --space-l
+    marginBottom: 8, // --nypl-space-l
   },
 };
 const TemplateContent = {
   baseStyle: {
     ...wrapperStyles,
     display: "block",
-    marginBottom: 8, // --space-l
+    marginBottom: 8, // --nypl-space-l
   },
   variants: {
     sidebar: {
@@ -63,13 +63,13 @@ const TemplateContent = {
 const TemplateContentTop = {
   baseStyle: {
     flex: "1 0 100%",
-    marginBottom: 8, // --space-l
+    marginBottom: 8, // --nypl-space-l
   },
 };
 const TemplateContentPrimary = {
   baseStyle: {
     flex: "1 1",
-    marginBottom: 8, // --space-l
+    marginBottom: 8, // --nypl-space-l
   },
   variants: {
     left: {
@@ -85,19 +85,19 @@ const TemplateContentSidebar = {
   baseStyle: {
     flex: "0 0 255px",
     order: { md: "1" },
-    marginBottom: 8, // --space-l
+    marginBottom: 8, // --nypl-space-l
   },
   variants: {
     left: {
       marginRight: {
         base: 0,
-        md: 12, // --space-xl
+        md: 12, // --nypl-space-xl
       },
     },
     right: {
       marginLeft: {
         base: 0,
-        md: 12, // --space-xl
+        md: 12, // --nypl-space-xl
       },
     },
   },

package/src/theme/components/textInput.ts

@@ -3,7 +3,7 @@ import { activeFocus, helperTextMargin } from "./global";
 const input = {
   border: "1px solid",
   borderColor: "ui.gray.medium",
-  borderRadius: "2px",
+  borderRadius: "sm",
   py: "xs",
   px: "s",
   _hover: {
@@ -31,7 +31,6 @@ const input = {
 const TextInput = {
   parts: ["helper", "input", "textarea"],
   baseStyle: {
-    marginBottom: "xs",
     helper: {
       ...helperTextMargin,
     },
@@ -46,13 +45,15 @@ const TextInput = {
     searchBar: {
       flex: "1 1 80%",
       input: {
-        borderRightRadius: "0",
+        borderRightRadius: "none",
       },
     },
     searchBarSelect: {
       flex: "1 1 80%",
       input: {
-        borderRadius: "0",
+        borderRadius: "none",
+        borderTopLeftRadius: { base: "sm", md: "none" },
+        borderTopRightRadius: { base: "sm", md: "none" },
       },
     },
   },

package/src/theme/components/videoPlayer.ts

@@ -0,0 +1,49 @@
+const fourByThree = {
+  inside: {
+    paddingBottom: "75%",
+  },
+};
+
+const square = {
+  inside: {
+    paddingBottom: "100%",
+  },
+};
+
+const invalid = {
+  backgroundColor: "ui.gray.light-warm",
+  height: "auto",
+  padding: "s",
+};
+
+const VideoPlayer = {
+  baseStyle: {
+    inside: {
+      //   backgroundColor: isInvalid ? "ui.gray.light.warm" : null,
+      height: "0",
+      overflow: "hidden",
+      //   padding: isInvalid ? "s" : null,
+      paddingBottom: "56.25%",
+      position: "relative",
+    },
+    iframe: {
+      height: "100%",
+      left: "0",
+      margin: "auto",
+      position: "absolute",
+      top: "0",
+      width: "100%",
+    },
+    helperText: {
+      marginBottom: "0",
+      marginTop: "xs",
+    },
+  },
+  variants: {
+    fourByThree,
+    invalid,
+    square,
+  },
+};
+
+export default VideoPlayer;

package/src/theme/foundations/breakpoints.ts

@@ -1,16 +1,16 @@
 import { createBreakpoints } from "@chakra-ui/theme-tools";
 
 /**
- * Breakpoints from "src/styles/base/_02-breakpoints.scss"
+ * Breakpoints from "src/styles/base/_01-breakpoints.scss"
  * How to use Chakra responsive styles: https://chakra-ui.com/docs/features/responsive-styles
  *
- * Chakra Value |     DS Variable      | EM/PX value
- * --------------------------------------------------
- *      sm      | --breakpoint-small   | 20em/320px
- *      md      | --breakpoint-medium  | 38em/600px
- *      lg      | --breakpoint-large   | 60em/960px
- *      xl      | --breakpoint-xl      | 80em/1280px
- *     2xl      |        N/A           | 96em/1536px
+ * Chakra Value |     DS Variable           | EM/PX value
+ * ------------------------------------------------------
+ *      sm      | --nypl-breakpoint-small   | 20em/320px
+ *      md      | --nypl-breakpoint-medium  | 38em/600px
+ *      lg      | --nypl-breakpoint-large   | 60em/960px
+ *      xl      | --nypl-breakpoint-xl      | 80em/1280px
+ *     2xl      |        N/A                | 96em/1536px
  *
  * @Note Chakra provides a 2xl option while the DS does not. We don't
  * recommend using this value until further notice.

package/src/theme/foundations/global.ts

@@ -7,12 +7,14 @@
 const global = {
   // styles for the `body` element
   body: {
+    boxSizing: "border-box",
     bg: "ui.white",
     color: "ui.black",
     fontFamily: "body",
-    fontSize: 0,
+    fontSize: "0",
     fontWeight: "300",
     lineHeight: "1.5",
+    overflowX: "hidden",
   },
   // styles for the `a` element
   a: {
@@ -21,6 +23,9 @@ const global = {
   svg: {
     display: "inline",
   },
+  p: {
+    margin: "0 0 var(--nypl-space-s",
+  },
 };
 
 export default global;

package/src/theme/foundations/radii.ts

@@ -0,0 +1,6 @@
+const radii = {
+  pill: "20px",
+  round: "100%",
+};
+
+export default radii;

package/src/theme/foundations/spacing.ts

@@ -7,14 +7,14 @@
  * That'll give you 10. Then use it in your component.
  *
  * The DS uses eight CSS variables/values found in "src/styles/03-space/_space.css":
- *   --space-xxs = 4px or 0.25rem
- *   --space-xs = 8px or 0.5rem
- *   --space-s = 16px or 1rem
- *   --space-m = 24px or 1.5rem
- *   --space-l = 32px or 2rem
- *   --space-xl = 48px or 3rem
- *   --space-xxl = 64px or 4rem
- *   --space-xxxl = 96px or 6rem
+ *   --nypl-space-xxs = 4px or 0.25rem
+ *   --nypl-space-xs = 8px or 0.5rem
+ *   --nypl-space-s = 16px or 1rem
+ *   --nypl-space-m = 24px or 1.5rem
+ *   --nypl-space-l = 32px or 2rem
+ *   --nypl-space-xl = 48px or 3rem
+ *   --nypl-space-xxl = 64px or 4rem
+ *   --nypl-space-xxxl = 96px or 6rem
  *
  * @note Even though all the following values are available through Chakra,
  * we recommend to only use the spacing values that map to the DS values
@@ -22,51 +22,51 @@
  *
  * Chakra Number Value | Chakra Name value | DS Variable
  * ------------------- | ----------------- | -----------------
- *        1            |         xxs       |   --space-xxs
- *        2            |         xs        |   --space-xs
- *        4            |         s         |   --space-s
- *        6            |         m         |   --space-m
- *        8            |         l         |   --space-l
- *        12           |         xl        |   --space-xl
- *        16           |         xxl       |   --space-xxl
- *        24           |         xxxl      |   --space-xxxl
+ *        1            |         xxs       |   --nypl-space-xxs
+ *        2            |         xs        |   --nypl-space-xs
+ *        4            |         s         |   --nypl-space-s
+ *        6            |         m         |   --nypl-space-m
+ *        8            |         l         |   --nypl-space-l
+ *        12           |         xl        |   --nypl-space-xl
+ *        16           |         xxl       |   --nypl-space-xxl
+ *        24           |         xxxl      |   --nypl-space-xxxl
  */
 export const spacing = {
   px: "1px",
   0: "0",
   0.5: "0.125rem",
-  // --space-xxs = 4px
+  // --nypl-space-xxs = 4px
   xxs: "0.25rem",
   1: "0.25rem",
   1.5: "0.375rem",
-  // --space-xs = 8px
+  // --nypl-space-xs = 8px
   xs: "0.5rem",
   2: "0.5rem",
   2.5: "0.625rem",
   3: "0.75rem",
   3.5: "0.875rem",
-  // --space-s = 16px
+  // --nypl-space-s = 16px
   s: "1rem",
   4: "1rem",
   5: "1.25rem",
-  // --space-m = 24px
+  // --nypl-space-m = 24px
   m: "1.5rem",
   6: "1.5rem",
   7: "1.75rem",
-  // --space-l = 32px
+  // --nypl-space-l = 32px
   l: "2rem",
   8: "2rem",
   9: "2.25rem",
   10: "2.5rem",
-  // --space-xl = 48px
+  // --nypl-space-xl = 48px
   xl: "3rem",
   12: "3rem",
   14: "3.5rem",
-  // --space-xxl = 64px
+  // --nypl-space-xxl = 64px
   xxl: "4rem",
   16: "4rem",
   20: "5rem",
-  // --space-xxxl = 96px
+  // --nypl-space-xxxl = 96px
   xxxl: "6rem",
   24: "6rem",
   28: "7rem",

package/src/theme/index.ts

@@ -3,6 +3,7 @@ import { extendTheme } from "@chakra-ui/react";
 import global from "./foundations/global";
 import breakpoints from "./foundations/breakpoints";
 import colors from "./foundations/colors";
+import radii from "./foundations/radii";
 import shadows from "./foundations/shadows";
 import { spacing } from "./foundations/spacing";
 import typography from "./foundations/typography";
@@ -10,22 +11,36 @@ import typography from "./foundations/typography";
 import Accordion from "./components/accordion";
 import Breadcrumb from "./components/breadcrumb";
 import Button from "./components/button";
+import Card from "./components/card";
 import Checkbox from "./components/checkbox";
-import CustomCheckboxGroup from "./components/customCheckboxGroup";
-import CustomRadioGroup from "./components/customRadioGroup";
+import ComponentWrapper from "./components/componentWrapper";
+import CheckboxGroup from "./components/checkboxGroup";
+import { CustomImage, CustomImageWrapper } from "./components/image";
 import CustomSelect from "./components/select";
+import DatePicker from "./components/datePicker";
+import Fieldset from "./components/fieldset";
 import Heading from "./components/heading";
+import HelperErrorText from "./components/helperErrorText";
 import Hero from "./components/hero";
+import HorizontalRule from "./components/horizontalRule";
 import Icon from "./components/icon";
 import Label from "./components/label";
 import Link from "./components/link";
+import List from "./components/list";
+import NotificationStyles from "./components/notification";
+import Pagination from "./components/pagination";
+import ProgressIndicator from "./components/progressIndicator";
 import Radio from "./components/radio";
+import RadioGroup from "./components/radioGroup";
 import SearchBar from "./components/searchBar";
+import { Skeleton, SkeletonLoader } from "./components/skeletonLoader";
+import CustomSlider from "./components/slider";
 import StatusBadge from "./components/statusBadge";
 import Tabs from "./components/tabs";
 import TemplateStyles from "./components/template";
 import Text from "./components/text";
 import TextInput from "./components/textInput";
+import VideoPlayer from "./components/videoPlayer";
 
 /**
  * See Chakra default theme for shape of theme object:
@@ -49,6 +64,7 @@ const theme = extendTheme({
   styles: { global },
   breakpoints,
   colors,
+  radii,
   shadows,
   space: spacing,
   ...typography,
@@ -60,29 +76,44 @@ const theme = extendTheme({
     Accordion,
     Breadcrumb,
     Button,
+    ...Card,
     Checkbox,
-    CustomCheckboxGroup,
-    CustomRadioGroup,
+    CheckboxGroup,
+    ComponentWrapper,
+    CustomImage,
+    CustomImageWrapper,
     CustomSelect,
+    DatePicker,
+    Fieldset,
     Heading,
+    HelperErrorText,
     Hero,
+    HorizontalRule,
     Icon,
     Label,
     Link,
+    List,
+    ...NotificationStyles,
+    Pagination,
+    ProgressIndicator,
     Radio,
+    RadioGroup,
     SearchBar,
+    Skeleton,
+    SkeletonLoader,
+    CustomSlider,
     StatusBadge,
     Tabs,
     ...TemplateStyles,
     Text,
     TextInput,
+    VideoPlayer,
+  },
+  // Use `cssVarPrefix` to set the prefix used on the CSS vars produced by
+  // Chakra. By default, Chakra prefixes its own CSS variables with `--chakra`.
+  config: {
+    cssVarPrefix: "nypl",
   },
-  // Chakra prefixes its own CSS variables with `--chakra` by default but this
-  // can be updated to be anything we want. This can be "nypl" to have the
-  // `--nypl` prefix or even "" to have no prefix.
-  // config: {
-  //   cssVarPrefix: "nypl",
-  // },
 });
 
 export default theme;

package/src/utils/componentCategories.ts

@@ -3,7 +3,7 @@
 const categories = {
   basicContent: {
     title: "Components/Basic Elements",
-    components: ["Card", "CardEdition", "Hero", "Promo", "Sponsor", "Table"],
+    components: ["Card", "Hero", "Promo", "Sponsor", "Table"],
   },
   contentDisplay: {
     title: "Components/Content Display",
@@ -19,7 +19,7 @@ const categories = {
   },
   deprecated: {
     title: "Components/Deprecated",
-    components: [],
+    components: ["CardEdition", "Input"],
   },
   feedback: {
     title: "Components/Feedback",
@@ -40,9 +40,9 @@ const categories = {
       "DatePicker",
       "DateRangePicker",
       "Dropdown",
+      "Fieldset",
       "FileUploader",
       "Form",
-      "Input",
       "Label",
       "NumberInput",
       "Radio",
@@ -111,6 +111,7 @@ const categories = {
       "Breakpoints",
       "Buttons",
       "Colors",
+      "Design Tokens",
       "Forms",
       "Iconography",
       "Spacing",

package/dist/components/HelperErrorText/HelperErrorText.stories.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import HelperErrorText from "./HelperErrorText";
-declare const _default: {
-    title: any;
-    component: typeof HelperErrorText;
-};
-export default _default;
-export declare const helperTextWithLink: {
-    (): JSX.Element;
-    parameters: {
-        jest: string[];
-    };
-};
-export declare const errorText: () => JSX.Element;
-export declare const longHelperText: () => JSX.Element;
-export declare const withAriaProps: () => JSX.Element;

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

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-import Image from "./Image";
-declare const _default: {
-    title: any;
-    component: typeof Image;
-};
-export default _default;
-export declare const ImageWithOptionalCaptionandCredit: {
-    (): JSX.Element;
-    storyName: string;
-    parameters: {
-        design: {
-            type: string;
-            url: string;
-        };
-        jest: string[];
-    };
-};

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

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export declare const animalCrossingDefinitions: {
-    term: string;
-    definition: string;
-}[];
-export declare const listRenderer: (args: any) => JSX.Element;
-export declare const cardsList: any[];

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

@@ -1,18 +0,0 @@
-declare const CustomCheckboxGroup: {
-    parts: string[];
-    baseStyle: {
-        legend: {
-            fontSize: string;
-            marginBottom: string;
-        };
-        required: {
-            marginLeft: string;
-        };
-        helper: {
-            marginTop: string;
-        };
-    };
-    sizes: {};
-    defaultProps: {};
-};
-export default CustomCheckboxGroup;

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

@@ -1,18 +0,0 @@
-declare const CustomRadioGroup: {
-    parts: string[];
-    baseStyle: {
-        legend: {
-            fontSize: string;
-            marginBottom: string;
-        };
-        required: {
-            marginLeft: string;
-        };
-        helper: {
-            marginTop: string;
-        };
-    };
-    sizes: {};
-    defaultProps: {};
-};
-export default CustomRadioGroup;

package/src/components/Button/_Button.scss

@@ -1,32 +0,0 @@
-// Keeping `button-base` and `button--outline` for the
-// Accordion component until that component is updated.
-@mixin button-base {
-  border-radius: 2px !important;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  padding: var(--space-xs) var(--space-s) !important;
-  text-decoration: none;
-}
-
-@mixin button--outline {
-  @include button-base;
-
-  background-color: var(--ui-white);
-  border: 1px solid var(--ui-gray-light-cool);
-  color: inherit;
-
-  &:visited {
-    color: inherit;
-  }
-
-  &:hover {
-    background-color: var(--ui-gray-xx-light-cool);
-  }
-
-  &:disabled {
-    background-color: var(--ui-gray-light-cool);
-    color: var(--ui-gray-dark);
-    pointer-events: none;
-  }
-}