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

package/src/components/StyleGuide/Colors.stories.mdx

@@ -10,31 +10,35 @@ import DSProvider from "../../theme/provider";
 
 export const cssVars = {
   brand: ["--nypl-colors-brand-primary", "--nypl-colors-brand-secondary"],
-  whatsOn: [
-    "--nypl-colors-section-whats-on-primary",
-    "--nypl-colors-section-whats-on-secondary",
+  blogs: [
+    "--nypl-colors-section-blogs-primary",
+    "--nypl-colors-section-blogs-secondary",
   ],
   booksAndMore: [
     "--nypl-colors-section-books-and-more-primary",
     "--nypl-colors-section-books-and-more-secondary",
   ],
-  research: [
-    "--nypl-colors-section-research-primary",
-    "--nypl-colors-section-research-secondary",
+  education: [
+    "--nypl-colors-section-education-primary",
+    "--nypl-colors-section-education-secondary",
   ],
   locations: [
     "--nypl-colors-section-locations-primary",
     "--nypl-colors-section-locations-secondary",
   ],
-  blogs: [
-    "--nypl-colors-section-blogs-primary",
-    "--nypl-colors-section-blogs-secondary",
+  research: [
+    "--nypl-colors-section-research-primary",
+    "--nypl-colors-section-research-secondary",
   ],
   researchLibraries: [
     "--nypl-colors-section-research-library-lpa",
     "--nypl-colors-section-research-library-schomburg",
     "--nypl-colors-section-research-library-schwartzman",
   ],
+  whatsOn: [
+    "--nypl-colors-section-whats-on-primary",
+    "--nypl-colors-section-whats-on-secondary",
+  ],
   ui: [
     "--nypl-colors-ui-black",
     "--nypl-colors-ui-white",
@@ -112,9 +116,9 @@ Section colors are branding colors only in use at NYPL.
 
 <Canvas>
   <DSProvider>
-    <Heading level={HeadingLevels.Two}>What's On</Heading>
-    <p>What's On is used for Events, Exhibitions &amp; Audio Guides.</p>
-    <SimpleGrid columns={1}>{getColorCards("whatsOn")}</SimpleGrid>
+    <Heading level={HeadingLevels.Two}>Blogs</Heading>
+    <p>Blogs is used for the Blogs section.</p>
+    <SimpleGrid columns={1}>{getColorCards("blogs")}</SimpleGrid>
   </DSProvider>
 </Canvas>
 
@@ -131,9 +135,12 @@ Section colors are branding colors only in use at NYPL.
 
 <Canvas>
   <DSProvider>
-    <Heading level={HeadingLevels.Two}>Research</Heading>
-    <p>Research is used for the Research Catalog and SCC.</p>
-    <SimpleGrid columns={1}>{getColorCards("research")}</SimpleGrid>
+    <Heading level={HeadingLevels.Two}>Education</Heading>
+    <p>
+      Education is used for the Education section front and all associated
+      sub-sections.
+    </p>
+    <SimpleGrid columns={1}>{getColorCards("education")}</SimpleGrid>
   </DSProvider>
 </Canvas>
 
@@ -150,9 +157,9 @@ Section colors are branding colors only in use at NYPL.
 
 <Canvas>
   <DSProvider>
-    <Heading level={HeadingLevels.Two}>Blogs</Heading>
-    <p>Blogs is used for the Blogs section.</p>
-    <SimpleGrid columns={1}>{getColorCards("blogs")}</SimpleGrid>
+    <Heading level={HeadingLevels.Two}>Research</Heading>
+    <p>Research is used for the Research Catalog and SCC.</p>
+    <SimpleGrid columns={1}>{getColorCards("research")}</SimpleGrid>
   </DSProvider>
 </Canvas>
 
@@ -164,6 +171,14 @@ Section colors are branding colors only in use at NYPL.
   </DSProvider>
 </Canvas>
 
+<Canvas>
+  <DSProvider>
+    <Heading level={HeadingLevels.Two}>What's On</Heading>
+    <p>What's On is used for Events, Exhibitions &amp; Audio Guides.</p>
+    <SimpleGrid columns={1}>{getColorCards("whatsOn")}</SimpleGrid>
+  </DSProvider>
+</Canvas>
+
 ## Utility Colors
 
 <Canvas>

package/src/components/Template/Template.stories.mdx

@@ -60,7 +60,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.3.6`    |
-| Latest            | `0.25.10`  |
+| Latest            | `0.25.12`  |
 
 ## TemplateAppContainer Component
 

package/src/components/Template/Template.tsx

@@ -39,15 +39,11 @@ export interface TemplateAppContainerProps
 
 /**
  * The main top-level parent component that wraps all template-related
- * components. For backwards compatibility, this renders a `nypl-ds` CSS class.
+ * components.
  */
 const Template = (props: React.PropsWithChildren<TemplateProps>) => {
   const styles = useStyleConfig("Template", {});
-  return (
-    <Box __css={styles} className="nypl-ds">
-      {props.children}
-    </Box>
-  );
+  return <Box __css={styles}>{props.children}</Box>;
 };
 
 /**

package/src/components/Template/__snapshots__/Template.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Template components Renders the UI snapshot correctly 1`] = `
 <div
-  className="nypl-ds css-0"
+  className="css-0"
 >
   <div
     className="css-0"
@@ -86,7 +86,7 @@ exports[`Template components Renders the UI snapshot correctly 1`] = `
 
 exports[`Template components Renders the UI snapshot correctly 2`] = `
 <div
-  className="nypl-ds css-0"
+  className="css-0"
 >
   <div
     className="css-0"

package/src/components/Toggle/Toggle.stories.mdx

@@ -55,7 +55,7 @@ export const sizeEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.8`   |
-| Latest            | `0.25.10`  |
+| Latest            | `0.25.12`  |
 
 <Description of={Toggle} />
 

package/src/components/Toggle/Toggle.tsx

@@ -77,7 +77,7 @@ const Toggle = React.forwardRef<HTMLInputElement, ToggleProps>(
     const footnote: HelperErrorTextType = isInvalid ? invalidText : helperText;
     const ariaAttributes = {};
     const styles = useMultiStyleConfig("Toggle", {});
-    const switchStyles = useStyleConfig("Switch");
+    const switchStyles = useStyleConfig("Switch", { size });
     ariaAttributes["aria-label"] =
       labelText && footnote ? `${labelText} - ${footnote}` : labelText;
 
@@ -92,6 +92,7 @@ const Toggle = React.forwardRef<HTMLInputElement, ToggleProps>(
             isRequired={isRequired}
             ref={ref}
             size={size === ToggleSizes.Large ? "lg" : "sm"}
+            lineHeight="1.5"
             {...(isChecked !== undefined
               ? {
                   isChecked,

package/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Toggle Renders the UI snapshot correctly 1`] = `
   className="css-0"
 >
   <label
-    className="chakra-switch css-16pgy8f"
+    className="chakra-switch css-18x0has"
     onClick={[Function]}
   >
     <input
@@ -66,7 +66,7 @@ exports[`Toggle Renders the UI snapshot correctly 2`] = `
   className="css-0"
 >
   <label
-    className="chakra-switch css-16pgy8f"
+    className="chakra-switch css-18x0has"
     data-checked=""
     onClick={[Function]}
   >
@@ -131,7 +131,7 @@ exports[`Toggle Renders the UI snapshot correctly 3`] = `
   className="css-0"
 >
   <label
-    className="chakra-switch css-16pgy8f"
+    className="chakra-switch css-18x0has"
     data-invalid=""
     onClick={[Function]}
   >
@@ -195,7 +195,7 @@ exports[`Toggle Renders the UI snapshot correctly 4`] = `
   className="css-0"
 >
   <label
-    className="chakra-switch css-16pgy8f"
+    className="chakra-switch css-18x0has"
     data-disabled=""
     onClick={[Function]}
   >

package/src/docs/Chakra.stories.mdx

@@ -64,7 +64,7 @@ const Application = (props) => {
   return (
     <DSProvider>
       <header>...</header>
-      <div className="my-app nypl-ds">
+      <div className="my-app">
         // ...
         {children}
       </div>

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

@@ -1,3 +1,5 @@
+// Only used for the `Placeholder` component, not to style
+// an `input`'s placeholder.
 .placeholder {
   --color-place-holder: var(--nypl-colors-ui-gray-dark);
 

package/src/styles.scss

@@ -13,8 +13,6 @@
 // Order important
 @import "./styles/base/_01-breakpoints";
 @import "./styles/base/_02-mixins";
-@import "./styles/base/_03-base";
-@import "./styles/base/_04-focus";
 @import "./styles/base/_place-holder";
 @import "./styles/space/_space-inline";
 @import "./styles/space/_space-inset";

package/src/theme/components/breadcrumb.ts

@@ -11,6 +11,9 @@ const blogs = {
 const booksAndMore = {
   bg: "section.books-and-more.secondary",
 };
+const education = {
+  bg: "section.education.secondary",
+};
 const locations = {
   bg: "section.locations.primary",
 };
@@ -78,6 +81,7 @@ const Breadcrumb = {
   variants: {
     blogs,
     booksAndMore,
+    education,
     locations,
     research,
     whatsOn,

package/src/theme/components/checkbox.ts

@@ -69,14 +69,10 @@ const baseStyleControl = {
 };
 
 // Style object for the Checkbox's label
-const baseStyleLabel = {
-  ...checkboxRadioLabelStyles,
-};
+const baseStyleLabel = checkboxRadioLabelStyles;
 
 // Style object for the Checkbox's helper text
-const baseStyleHelper = {
-  ...checkboxRadioHelperStyle,
-};
+const baseStyleHelper = checkboxRadioHelperStyle;
 
 const baseStyle = {
   icon: baseStyleIcon,
@@ -94,7 +90,7 @@ const sizes = {
       borderRadius: "sm",
     },
     // Controls the font-size of the label only.
-    label: { fontSize: "text.default" },
+    label: { fontSize: "label.default" },
   },
 };
 

package/src/theme/components/fieldset.ts

@@ -6,6 +6,8 @@ const Fieldset = {
   baseStyle: ({ isLegendHidden }) => {
     const screenreaderStyles = isLegendHidden ? screenreaderOnly : {};
     return {
+      border: 0,
+      padding: 0,
       legend: {
         ...labelLegendText,
         ...screenreaderStyles,

package/src/theme/components/global.ts

@@ -4,13 +4,12 @@ export { wrapperStyles } from "./globalMixins";
 /** Reusable component styles. */
 
 // Used in `Select` and `TextInput`.
-const activeFocus = {
-  border: "1px solid",
-  borderColor: "ui.focus",
+const activeFocus = (darkMode = false) => ({
+  outline: "2px solid",
+  outlineOffset: "2px",
+  outlineColor: darkMode ? "ui.white" : "ui.focus",
   zIndex: "9999",
-  outline: "1px solid",
-  outlineColor: "ui.focus",
-};
+});
 // Used in `Select` and `TextInput`.
 const helperTextMargin = {
   marginTop: "xxs",
@@ -19,11 +18,9 @@ const helperTextMargin = {
 // Used in `Checkbox` and `Radio`.
 const checkboxRadioLabelStyles = {
   userSelect: "none",
-  fontSize: "text.default",
   fontWeight: "text.default",
   marginBottom: "0",
   marginLeft: "xs",
-  verticalAlign: "middle",
   _disabled: {
     color: "ui.gray.dark",
     opacity: 1,
@@ -47,6 +44,14 @@ const checkboxRadioHelperStyle = {
     fontStyle: "italic",
   },
 };
+const checkboxRadioGroupStyles = {
+  helper: {
+    marginTop: "s",
+  },
+  stack: {
+    width: "fit-content",
+  },
+};
 // Used in `Label` and `Fieldset`.
 const labelLegendText = {
   alignItems: "baseline",
@@ -62,13 +67,10 @@ const labelLegendText = {
     fontWeight: "helper.default",
   },
 };
-const checkboxRadioGroupStyles = {
-  helper: {
-    marginTop: "s",
-  },
-  stack: {
-    width: "fit-content",
-  },
+// Used for p, ul, and ol
+const textMargin = {
+  margin: "0",
+  marginBottom: "s",
 };
 
 export {
@@ -79,4 +81,5 @@ export {
   checkboxRadioLabelStyles,
   helperTextMargin,
   labelLegendText,
+  textMargin,
 };

package/src/theme/components/globalMixins.ts

@@ -2,6 +2,14 @@
  * These objects are also SCSS mixins but are now JS objects in the
  * context of css-in-js and the custom NYPL-theme.
  */
+const screenreaderOnly = {
+  clip: "rect(1px, 1px, 1px, 1px)",
+  height: "1px",
+  overflow: "hidden",
+  position: "absolute !important",
+  width: "1px",
+  wordWrap: "normal",
+};
 const wrapperStyles = {
   marginY: "0",
   marginX: "auto",
@@ -12,13 +20,5 @@ const wrapperStyles = {
   paddingLeft: "0",
   width: "100%",
 };
-const screenreaderOnly = {
-  clip: "rect(1px, 1px, 1px, 1px)",
-  height: "1px",
-  overflow: "hidden",
-  position: "absolute !important",
-  width: "1px",
-  wordWrap: "normal",
-};
 
 export { screenreaderOnly, wrapperStyles };

package/src/theme/components/list.ts

@@ -1,3 +1,5 @@
+import { textMargin } from "./global";
+
 const List = {
   baseStyle: ({ inline, noStyling }) => ({
     // Browser automatically applies margin, so by default we unset it.
@@ -17,6 +19,7 @@ const List = {
   }),
   variants: {
     ul: ({ noStyling }) => ({
+      ...textMargin,
       listStyle: "none",
       li: {
         _before: {
@@ -33,6 +36,7 @@ const List = {
         },
       },
     }),
+    ol: textMargin,
     dl: {
       borderBottom: "1px solid",
       borderColor: "ui.gray.light-cool",

package/src/theme/components/notification.ts

@@ -38,6 +38,9 @@ const Notification = {
         position: "absolute",
         right: "0",
         top: "0",
+        svg: {
+          marginTop: "0",
+        },
         _hover: {
           bg: "inherit",
         },

package/src/theme/components/radio.ts

@@ -67,14 +67,10 @@ const baseStyleControl = {
 };
 
 // Style object for the Radio's label
-const baseStyleLabel = {
-  ...checkboxRadioLabelStyles,
-};
+const baseStyleLabel = checkboxRadioLabelStyles;
 
 // Style object for the Radio's helper text
-const baseStyleHelper = {
-  ...checkboxRadioHelperStyle,
-};
+const baseStyleHelper = checkboxRadioHelperStyle;
 
 const baseStyle = {
   // Chakra-inserted elements in the Chakra Radio component
@@ -90,6 +86,7 @@ const sizes = {
     control: {
       ...checkboxRadioControlSize,
     },
+    label: { fontSize: "label.default" },
   },
 };
 

package/src/theme/components/select.ts

@@ -4,15 +4,15 @@ const select = {
   backgroundColor: "ui.white",
   borderRadius: "sm",
   borderColor: "ui.gray.medium",
+  fontSize: "text.caption",
   paddingTop: "xs",
   paddingRight: "xl",
   paddingBottom: "xs",
   paddingLeft: "s",
   _hover: {
-    borderColor: "ui.gray.medium",
+    borderColor: "ui.gray.dark",
   },
-  _active: activeFocus,
-  _focus: activeFocus,
+  _active: activeFocus(),
   _disabled: {
     color: "ui.gray.xdark",
     bg: "ui.gray.xx-light-cool",

package/src/theme/components/slider.ts

@@ -3,7 +3,7 @@ const staticValues = {
   marginTop: "xs",
   marginBottom: "xs",
   marginRight: "s",
-  marginLeft: "s",
+  marginLeft: "0",
 };
 const CustomSlider = {
   parts: [
@@ -12,11 +12,12 @@ const CustomSlider = {
     "leftValue",
     "rightValue",
     "textInput",
+    "sliderContainer",
     "filledTrack",
     "track",
     "thumb",
   ],
-  baseStyle: ({ isDisabled, isInvalid, isRangeSlider, showBoxes }) => {
+  baseStyle: ({ isDisabled, isInvalid, showBoxes, showValues }) => {
     let baseColor = "ui.link.primary";
     if (isInvalid) {
       baseColor = "ui.error.primary";
@@ -32,15 +33,10 @@ const CustomSlider = {
       helper: {
         marginTop: "xs",
       },
-      leftValue: {
-        ...staticValues,
-        // If the text input boxes are shown, then there already is a
-        // margin, so we can set this static value to "0". But for the
-        // single Slider, we *do* need the margin set.
-        marginLeft: showBoxes && isRangeSlider ? "0" : "s",
-      },
+      leftValue: staticValues,
       rightValue: {
         ...staticValues,
+        marginLeft: "s",
         // If the text input boxes are shown, then there already is
         // a margin, so we can set this static value to "0".
         marginRight: showBoxes ? "0" : "s",
@@ -51,6 +47,13 @@ const CustomSlider = {
         minWidth: "65px",
         color: isInvalid ? "ui.error.primary" : "ui.black",
       },
+      // This is added to the container so that the slider thumbs don't
+      // overflow past the container when the value boxes or min/max values
+      // are not shown.
+      sliderContainer: {
+        marginLeft: !showValues ? "xs" : null,
+        marginRight: !showBoxes && !showValues ? "xs" : null,
+      },
       // Filled track doesn't have a _disabled or _invalid state...
       // so we manually do it through the props.
       filledTrack: {

package/src/theme/components/textInput.ts

@@ -16,8 +16,8 @@ const input = {
     color: "ui.gray.xdark",
     opacity: "1",
   },
-  _active: activeFocus,
-  _focus: activeFocus,
+  _active: activeFocus(),
+  _focus: activeFocus(),
   _placeholder: {
     color: "ui.gray.dark",
     fontStyle: "italic",

package/src/theme/components/toggle.ts

@@ -1,7 +1,7 @@
 import { helperTextMargin } from "./global";
 
 const baseStyle = {
-  label: { display: "flex", alignItems: "center", width: "fit-content" },
+  label: { alignItems: "start", display: "flex", width: "fit-content" },
   helper: {
     ...helperTextMargin,
     marginLeft: "xxs",
@@ -9,48 +9,52 @@ const baseStyle = {
 };
 
 const Switch = {
-  baseStyle: {
-    opacity: 0.4,
-    track: {
-      border: "1px solid",
-      borderColor: "ui.gray.medium",
-      p: "4px",
-      _checked: {
-        bg: "ui.link.primary",
-        borderColor: "ui.link.primary",
-        opacity: 1,
-      },
-      _invalid: {
-        bg: "inherit",
-        borderColor: "ui.error.primary",
-        "> span": {
-          bg: "ui.error.primary",
-        },
-      },
-      _disabled: {
-        bg: "ui.gray.medium",
+  baseStyle: ({ size }) => {
+    return {
+      alignItems: "start",
+      opacity: 0.4,
+      track: {
+        border: "1px solid",
         borderColor: "ui.gray.medium",
+        p: "4px",
         _checked: {
-          opacity: 0.4,
+          bg: "ui.link.primary",
+          borderColor: "ui.link.primary",
+          opacity: 1,
+        },
+        _invalid: {
+          bg: "inherit",
+          borderColor: "ui.error.primary",
+          "> span": {
+            bg: "ui.error.primary",
+          },
+        },
+        _disabled: {
+          bg: "ui.gray.medium",
+          borderColor: "ui.gray.medium",
+          _checked: {
+            opacity: 0.4,
+          },
+        },
+        _focus: {
+          outline: "2px solid",
+          outlineColor: "ui.focus",
+          outlineOffset: "2px",
+          zIndex: "9999",
         },
       },
-      _focus: {
-        outline: "2px solid",
-        outlineColor: "ui.focus",
-        outlineOffset: "2px",
-        zIndex: "9999",
+      label: {
+        fontSize: "label.default",
+        marginLeft: "xs",
+        marginTop: size === "lg" ? "6px" : null,
+        _disabled: { fontStyle: "italic" },
       },
-    },
-    label: {
-      fontSize: "label.default",
-      marginLeft: "xs",
-      _disabled: { fontStyle: "italic" },
-    },
-    thumb: {
-      _disabled: {
-        bg: "ui.error.primary",
+      thumb: {
+        _disabled: {
+          bg: "ui.error.primary",
+        },
       },
-    },
+    };
   },
   defaultProps: {
     colorScheme: "white",