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

package/src/hooks/useNYPLTheme.ts

@@ -22,8 +22,8 @@ function useNYPLTheme() {
     colors: {
       // primary, secondary
       brand: theme.colors.brand,
-      // blogs, books-and-more, locations, research,
-      // research-library, whats-on
+      // blogs, books-and-more, education, locations,
+      // research, research-library, whats-on
       section: theme.colors.section,
       transparent: theme.colors.transparent,
       // black, disabled, error, focus, gray, link,
@@ -32,19 +32,43 @@ function useNYPLTheme() {
     },
     fontSizes: {
       "-3": theme.fontSizes["-3"],
-      "-2": theme.fontSizes.xs,
-      "-1": theme.fontSizes.sm,
-      "0": theme.fontSizes.md,
-      "1": theme.fontSizes.lg,
+      "-2": theme.fontSizes["-2"],
+      "-1": theme.fontSizes["-1"],
+      "0": theme.fontSizes["0"],
+      "1": theme.fontSizes["1"],
       "2": theme.fontSizes["2"],
       "3": theme.fontSizes["3"],
       "4": theme.fontSizes["4"],
+      // default
+      breadcrumbs: theme.fontSizes.breadcrumbs,
+      // default
+      button: theme.fontSizes.button,
+      // primary, secondary, tertiary, callout
+      heading: theme.fontSizes.heading,
+      // default
+      helper: theme.fontSizes.helper,
+      // default, secondary
+      label: theme.fontSizes.label,
+      // default, caption, tag, mini
+      text: theme.fontSizes.text,
     },
     fontWeights: {
       light: theme.fontWeights.light,
       regular: theme.fontWeights.regular,
       medium: theme.fontWeights.medium,
       bold: theme.fontWeights.bold,
+      // default, lastChild
+      breadcrumbs: theme.fontWeights.breadcrumbs,
+      // default
+      button: theme.fontWeights.button,
+      // primary, secondary, tertiary, callout
+      heading: theme.fontWeights.heading,
+      // default
+      helper: theme.fontWeights.helper,
+      // default
+      label: theme.fontWeights.label,
+      // default, caption, tag, mini
+      text: theme.fontWeights.text,
     },
     fonts: {
       body: theme.fonts.body,

package/src/hooks/useWindowSize.stories.mdx

@@ -0,0 +1,23 @@
+import { Meta } from "@storybook/addon-docs";
+import { getCategory } from "../utils/componentCategories";
+
+<Meta title={getCategory("useWindowSize")} />
+
+# useWindowSize
+
+| Hook Version | DS Version |
+| ------------ | ---------- |
+| Added        | `0.25.2`   |
+| Latest       | `0.25.2`   |
+
+This hook is based on [Typescript hooks](https://usehooks-typescript.com/react-hook/use-window-size).
+It returns an object with `width` and `height` properties that can be used to
+update a component's UI based on the size of the browser window.
+
+## Usage
+
+For an example implementation, view the [`Tabs` component](https://github.com/NYPL/nypl-design-system/blob/development/src/components/Tabs/Tabs.tsx).
+
+```tsx
+const { height, width } = useWindowSize();
+```

package/src/index.ts

@@ -82,6 +82,7 @@ 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";
@@ -91,7 +92,7 @@ export { StatusBadgeTypes } from "./components/StatusBadge/StatusBadgeTypes";
 export { default as StructuredContent } from "./components/StructuredContent/StructuredContent";
 export { StructuredContentImagePosition } from "./components/StructuredContent/StructuredContentTypes";
 export {
-  Tabs,
+  default as Tabs,
   TabList,
   Tab,
   TabPanels,
@@ -118,7 +119,9 @@ export {
 export { TextInputTypes } from "./components/TextInput/TextInputTypes";
 export { default as Toggle } from "./components/Toggle/Toggle";
 export { ToggleSizes } from "./components/Toggle/ToggleTypes";
+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 {
   VideoPlayerAspectRatios,

package/src/styles/base/_place-holder.scss

@@ -5,7 +5,7 @@
 
   margin-bottom: var(--nypl-space-l);
   @include breakpoint($nypl-breakpoint-large) {
-    margin-bottom: var(--nypl-space-xl);
+    margin-bottom: var(--nypl-space-l);
   }
 
   padding: var(--nypl-space-s);

package/src/theme/components/button.ts

@@ -6,8 +6,9 @@ const baseStyle = {
   cursor: "pointer",
   color: "ui.white",
   justifyContent: "center",
-  py: "xs",
-  px: "s",
+  maxHeight: "2.5rem",
+  py: "inset.narrow",
+  px: "inset.default",
   textDecoration: "none",
   wordWrap: "normal",
   fontWeight: "button.default",
@@ -44,6 +45,10 @@ const secondary = {
   fontSize: "button.default",
   _hover: {
     bg: "ui.gray.xx-light-cool",
+    borderColor: "ui.gray.medium",
+  },
+  _disabled: {
+    bg: "ui.gray.x-light-cool",
   },
 };
 const link = {
@@ -65,12 +70,15 @@ const pill = {
   borderColor: "ui.gray.light-cool",
   color: "inherit",
   borderRadius: "pill",
-  py: "xs",
-  paddingInlineStart: "m",
-  paddingInlineEnd: "m",
+  py: "inset.narrow",
+  px: "inset.wide",
   fontSize: "button.default",
   _hover: {
     bg: "ui.gray.xx-light-cool",
+    borderColor: "ui.gray.medium",
+  },
+  _disabled: {
+    bg: "ui.gray.x-light-cool",
   },
 };
 const iconOnly = {
@@ -81,8 +89,8 @@ const iconOnly = {
   _hover: {
     bg: "ui.gray.xx-light-cool",
   },
-  paddingInlineStart: "xs",
-  paddingInlineEnd: "xs",
+  paddingInlineStart: "inset.narrow",
+  paddingInlineEnd: "inset.narrow",
 };
 const callout = {
   bg: "brand.primary",

package/src/theme/components/card.ts

@@ -6,38 +6,44 @@ const imageSizes = {
   large: { flex: { md: "0 0 360px" } },
 };
 // This is complicated and can be refactored later...
-const getBodyPaddingStyles = ({ border, hasImage, imageIsAtEnd, isRow }) => {
+const getBodyPaddingStyles = ({
+  hasImage,
+  isBordered,
+  imageIsAtEnd,
+  isRow,
+}) => {
   let bodyPadding = null;
-  if (border) {
-    bodyPadding = "s";
+  if (isBordered) {
+    bodyPadding = "inset.default";
     if (hasImage) {
-      bodyPadding = "0 var(--nypl-space-s) var(--nypl-space-s)";
+      bodyPadding =
+        "0 var(--nypl-space-inset-default) var(--nypl-space-inset-default)";
     }
   }
-  if (isRow && border) {
-    bodyPadding = "var(--nypl-space-s)";
+  if (isRow && isBordered) {
+    bodyPadding = "inset.default";
   }
-  if (isRow && border && hasImage) {
+  if (isRow && isBordered && hasImage) {
     bodyPadding = {
-      base: "0 var(--nypl-space-s) var(--nypl-space-s)",
-      md: "var(--nypl-space-s) var(--nypl-space-s) var(--nypl-space-s) 0",
+      base: "0 var(--nypl-space-inset-default) var(--nypl-space-inset-default)",
+      md: "var(--nypl-space-inset-default) var(--nypl-space-inset-default) var(--nypl-space-inset-default) 0",
     };
     if (imageIsAtEnd) {
       bodyPadding = {
-        base: "var(--nypl-space-s) var(--nypl-space-s) 0",
-        md: "var(--nypl-space-s) 0 var(--nypl-space-s) var(--nypl-space-s)",
+        base: "var(--nypl-space-inset-default) var(--nypl-space-inset-default) 0",
+        md: "var(--nypl-space-inset-default) 0 var(--nypl-space-inset-default) var(--nypl-space-inset-default)",
       };
     }
   }
   return bodyPadding;
 };
 const Card = {
-  parts: ["body", "heading"],
+  parts: ["actions", "body", "heading"],
   baseStyle: (props) => {
     const {
-      border,
       hasImage,
       imageIsAtEnd,
+      isBordered,
       isCentered,
       layout,
       mainActionLink,
@@ -55,14 +61,14 @@ const Card = {
           alignItems: isCentered ? "center" : null,
         }
       : {};
-    const baseBorderStyles = border
+    const baseBorderStyles = isBordered
       ? {
           border: "1px solid",
           borderColor: "ui.gray.medium",
         }
       : {};
     const bodyPadding = getBodyPaddingStyles({
-      border,
+      isBordered,
       hasImage,
       imageIsAtEnd,
       isRow,
@@ -79,9 +85,10 @@ const Card = {
       display: "flex",
       flexFlow: "column wrap",
       textAlign: isCentered ? "center" : null,
-      heading: {
-        marginBottom: "xs",
-        a: mainActionLink ? { color: "ui.black" } : null,
+      actions: {
+        width: ["100%", "100%", "180px"],
+        marginLeft: ["0", "0", "m"],
+        marginTop: ["xs", "xs", "0"],
       },
       body: {
         display: { md: "block" },
@@ -89,6 +96,10 @@ const Card = {
         margin: bodyMargin,
         padding: bodyPadding,
       },
+      heading: {
+        marginBottom: "xs",
+        a: mainActionLink ? { color: "ui.black" } : null,
+      },
       ...baseBorderStyles,
       ...layoutStyles,
     };
@@ -143,7 +154,7 @@ const CardContent = {
 };
 
 const CardImage = {
-  baseStyle: ({ imageIsAtEnd, isCentered, size, layout }) => {
+  baseStyle: ({ imageIsAtEnd, isCentered, layout, size }) => {
     // These sizes are only for the "row" layout.
     const imageSize = imageSizes[size] || {};
     const layoutStyles =

package/src/theme/components/checkbox.ts

@@ -4,7 +4,7 @@
 import {
   checkboxRadioLabelStyles,
   checkboxRadioControlSize,
-  checkboxRadioHelperStyle,
+  checkboxRadioHelperErrorTextStyle,
 } from "./global";
 
 // Style object for the Checkbox's visual icon.
@@ -36,8 +36,10 @@ const baseStyleControl = {
 
     _disabled: {
       bg: "ui.white",
-      borderColor: "ui.gray.medium",
-      color: "ui.gray.medium",
+      borderColor: "ui.disabled.primary",
+      svg: {
+        color: "ui.disabled.primary",
+      },
     },
 
     _indeterminate: {
@@ -53,7 +55,7 @@ const baseStyleControl = {
 
   _disabled: {
     bg: "ui.white",
-    borderColor: "ui.gray.medium",
+    borderColor: "ui.disabled.primary",
   },
 
   _focus: {
@@ -72,13 +74,13 @@ const baseStyleControl = {
 const baseStyleLabel = checkboxRadioLabelStyles;
 
 // Style object for the Checkbox's helper text
-const baseStyleHelper = checkboxRadioHelperStyle;
+const baseStyleHelperErrorText = checkboxRadioHelperErrorTextStyle;
 
 const baseStyle = {
   icon: baseStyleIcon,
   control: baseStyleControl,
   label: baseStyleLabel,
-  helper: baseStyleHelper,
+  helperErrorText: baseStyleHelperErrorText,
 };
 
 // Sticking to "lg" for the default size.
@@ -87,7 +89,7 @@ const sizes = {
     // Controls the width/height of the checkbox itself.
     control: {
       ...checkboxRadioControlSize,
-      borderRadius: "sm",
+      borderRadius: "checkbox",
     },
     // Controls the font-size of the label only.
     label: { fontSize: "label.default" },
@@ -95,7 +97,7 @@ const sizes = {
 };
 
 const Checkbox = {
-  parts: ["icon", "control", "label", "helper"],
+  parts: ["helperErrorText", "icon", "control", "label"],
   baseStyle,
   sizes,
   // Default values

package/src/theme/components/checkboxGroup.ts

@@ -1,7 +1,7 @@
 import { checkboxRadioGroupStyles } from "./global";
 
 const CheckboxGroup = {
-  parts: ["helper", "stack"],
+  parts: ["helperErrorText", "stack"],
   baseStyle: ({ isFullWidth = false }) => ({
     ...checkboxRadioGroupStyles(isFullWidth),
   }),

package/src/theme/components/componentWrapper.ts

@@ -1,7 +1,7 @@
 const ComponentWrapper = {
+  parts: ["helperErrorText"],
   baseStyle: ({ hasChildren }) => ({
-    helperText: {
-      marginBottom: "0",
+    helperErrorText: {
       marginTop: hasChildren ? "xs" : "0",
     },
   }),

package/src/theme/components/customTable.ts

@@ -1,4 +1,40 @@
-const baseStyle = ({
+export const baseTHStyles = (
+  showRowDividers = false,
+  columnHeadersTextColor = false
+) => ({
+  border: showRowDividers ? undefined : "none",
+  borderBottom: showRowDividers ? undefined : "0px",
+  color: columnHeadersTextColor ? columnHeadersTextColor : "ui.black",
+  fontSize: "0",
+  fontWeight: "bold",
+  letterSpacing: "0",
+  paddingLeft: 0,
+  paddingRight: "m",
+  textTransform: "capitalize",
+  _first: {
+    paddingLeft: showRowDividers ? "m" : null,
+  },
+  _last: {
+    paddingRight: showRowDividers ? "m" : "0",
+  },
+});
+export const baseTDStyles = (
+  showRowDividers = false,
+  useRowHeaders = false
+) => ({
+  border: showRowDividers ? undefined : "none",
+  borderBottom: showRowDividers ? undefined : "0px",
+  letterSpacing: "0",
+  paddingLeft: 0,
+  paddingRight: "m",
+  _first: {
+    paddingLeft: showRowDividers && !useRowHeaders ? "m" : null,
+  },
+  _last: {
+    paddingRight: showRowDividers ? "m" : "0",
+  },
+});
+export const baseStyle = ({
   columnHeadersTextColor,
   showRowDividers,
   useRowHeaders,
@@ -12,36 +48,8 @@ const baseStyle = ({
       color: "var(--nypl-colors-ui-black)",
     },
   },
-  th: {
-    border: showRowDividers ? undefined : "none",
-    borderBottom: showRowDividers ? undefined : "0px",
-    color: columnHeadersTextColor ? columnHeadersTextColor : "ui.black",
-    fontSize: "0",
-    fontWeight: "bold",
-    letterSpacing: "0",
-    paddingLeft: 0,
-    paddingRight: "m",
-    textTransform: "capitalize",
-    _first: {
-      paddingLeft: showRowDividers ? "m" : null,
-    },
-    _last: {
-      paddingRight: showRowDividers ? "m" : "0",
-    },
-  },
-  td: {
-    border: showRowDividers ? undefined : "none",
-    borderBottom: showRowDividers ? undefined : "0px",
-    letterSpacing: "0",
-    paddingLeft: 0,
-    paddingRight: "m",
-    _first: {
-      paddingLeft: showRowDividers && !useRowHeaders ? "m" : null,
-    },
-    _last: {
-      paddingRight: showRowDividers ? "m" : "0",
-    },
-  },
+  th: baseTHStyles(showRowDividers, columnHeadersTextColor),
+  td: baseTDStyles(showRowDividers, useRowHeaders),
   caption: {
     captionSide: "top",
     color: "ui.black",

package/src/theme/components/fieldset.ts

@@ -2,9 +2,9 @@ import { labelLegendText } from "./global";
 import { screenreaderOnly } from "./globalMixins";
 
 const Fieldset = {
-  parts: ["helper"],
   baseStyle: ({ isLegendHidden }) => {
     const screenreaderStyles = isLegendHidden ? screenreaderOnly : {};
+
     return {
       border: 0,
       padding: 0,
@@ -12,7 +12,6 @@ const Fieldset = {
         ...labelLegendText,
         ...screenreaderStyles,
       },
-      helper: { ...labelLegendText.helper },
     };
   },
 };

package/src/theme/components/global.ts

@@ -5,16 +5,12 @@ export { wrapperStyles } from "./globalMixins";
 
 // Used in `Select` and `TextInput`.
 const activeFocus = (darkMode = false) => ({
+  boxShadow: "none",
   outline: "2px solid",
   outlineOffset: "2px",
   outlineColor: darkMode ? "ui.white" : "ui.focus",
   zIndex: "9999",
 });
-// Used in `Select` and `TextInput`.
-const helperTextMargin = {
-  marginTop: "xxs",
-  marginBottom: "0",
-};
 // Used in `Checkbox` and `Radio`.
 const checkboxRadioLabelStyles = {
   userSelect: "none",
@@ -38,16 +34,16 @@ const checkboxRadioControlSize = {
   w: "1.375rem",
 };
 // Used in `Checkbox` and `Radio`.
-const checkboxRadioHelperStyle = {
-  ...helperTextMargin,
+const checkboxRadioHelperErrorTextStyle = {
   marginLeft: "30px", // calc(22px + var(--nypl-space-xs))
   _disabled: {
+    color: "ui.gray.dark",
     fontStyle: "italic",
   },
 };
 const checkboxRadioGroupStyles = (isFullWidth = false) => ({
-  helper: {
-    marginTop: "s",
+  helperErrorText: {
+    marginTop: "xs",
   },
   stack: {
     width: isFullWidth ? "100%" : "fit-content",
@@ -55,19 +51,27 @@ const checkboxRadioGroupStyles = (isFullWidth = false) => ({
 });
 // Used in `Label` and `Fieldset`.
 const labelLegendText = {
-  alignItems: "baseline",
-  width: "100%",
-  marginBottom: "xs",
+  display: "inline-block",
   fontSize: "label.default",
   fontWeight: "label.default",
-  display: "flex",
-  justifyContent: "space-between",
-  helper: {
-    marginLeft: "m",
-    fontSize: "helper.default",
-    fontWeight: "helper.default",
+  marginBottom: "xs",
+  width: "100%",
+  span: {
+    fontWeight: "regular",
   },
 };
+// Used for the disabled state of Select and TextInput
+const selectTextInputDisabledStyles = {
+  bg: "ui.disabled.secondary",
+  borderColor: "ui.disabled.primary",
+  color: "ui.gray.dark",
+  opacity: "1",
+};
+// Used for the focus state of Select and TextInput
+const selectTextInputFocusStyles = {
+  ...activeFocus(),
+  borderColor: "ui.focus",
+};
 // Used for p, ul, and ol
 const textMargin = {
   margin: "0",
@@ -78,9 +82,10 @@ export {
   activeFocus,
   checkboxRadioControlSize,
   checkboxRadioGroupStyles,
-  checkboxRadioHelperStyle,
+  checkboxRadioHelperErrorTextStyle,
   checkboxRadioLabelStyles,
-  helperTextMargin,
   labelLegendText,
+  selectTextInputDisabledStyles,
+  selectTextInputFocusStyles,
   textMargin,
 };

package/src/theme/components/heading.ts

@@ -8,7 +8,7 @@ const margins = {
 };
 
 // Heading Styles
-const headings = {
+export const headings = {
   h1: {
     fontSize: "heading.primary", // var(--nypl-fontSizes-4);
     fontWeight: "heading.primary",

package/src/theme/components/helperErrorText.ts

@@ -1,5 +1,6 @@
 const helperErrorText = {
   baseStyle: ({ isInvalid }) => ({
+    marginTop: "xxs",
     marginBottom: "0",
     fontSize: "helper.default",
     color: isInvalid ? "ui.error.primary" : "ui.black",

package/src/theme/components/hero.ts

@@ -5,8 +5,8 @@ const secondaryBase = {
   overflowX: "hidden",
   content: {
     ...wrapperStyles,
-    paddingRight: "s",
-    paddingLeft: "s",
+    paddingRight: "inset.default",
+    paddingLeft: "inset.default",
     display: "flex",
     flexFlow: {
       base: "column nowrap",
@@ -25,8 +25,9 @@ const secondaryBase = {
     },
   },
   bodyText: {
-    marginTop: "xs",
-    marginRight: { md: "xs" },
+    paddingBottom: "inset.default",
+    paddingTop: "inset.default",
+    paddingRight: { md: "inset.default" },
     flex: { md: "1 1 50%" },
     order: { md: "2" },
   },
@@ -83,10 +84,10 @@ const primary = {
       md: "0 0 60%",
     },
     maxWidth: { md: "960px" },
-    paddingTop: "xxl",
-    paddingBottom: "xxl",
-    paddingRight: "l",
-    paddingLeft: "l",
+    paddingTop: "inset.extrawide",
+    paddingBottom: "inset.extrawide",
+    paddingRight: "inset.wide",
+    paddingLeft: "inset.wide",
     a: {
       color: "inherit",
       display: "inline-block",
@@ -120,10 +121,7 @@ const tertiary = {
     color: "ui.white",
     display: "flex",
     flexFlow: "column nowrap",
-    paddingTop: "m",
-    paddingBottom: "m",
-    paddingRight: "s",
-    paddingLeft: "s",
+    padding: "inset.default",
     p: {
       marginBottom: "0",
       marginTop: "s",
@@ -147,7 +145,7 @@ const campaign = {
   minHeight: "300px",
   overflow: "visible",
   padding: {
-    base: "l",
+    base: "inset.wide",
     md: "0",
   },
   position: "relative",
@@ -185,7 +183,7 @@ const campaign = {
       base: "0 0 100%",
       md: "0 0 50%",
     },
-    padding: "l",
+    padding: "inset.wide",
     maxWidth: { md: "960px" },
   },
 };
@@ -221,7 +219,7 @@ const fiftyfifty = {
 };
 const Hero = {
   baseStyle: {
-    bg: "ui.gray.x-light-warm",
+    bg: "ui.gray.x-light-cool",
   },
   // Available variants:
   variants: {

package/src/theme/components/label.ts

@@ -1,10 +1,11 @@
 import { labelLegendText } from "./global";
 
 const Label = {
-  parts: ["helper"],
-  baseStyle: {
+  baseStyle: ({ isInlined }) => ({
     ...labelLegendText,
-  },
+    flex: isInlined ? "1" : null,
+    whiteSpace: isInlined ? "nowrap" : null,
+  }),
 };
 
 export default Label;