@nypl/design-system-react-components 0.25.2 → 0.25.6

package/src/styles/space/_space-stack.scss

@@ -0,0 +1,116 @@
+/**
+ * --nypl-space-xxs: --nypl-space-s / 4   //  4px or 0.25rem
+ * --nypl-space-xs: --nypl-space-s / 2    //  8px or 0.5rem
+ * --nypl-space-s: --nypl-space-s * 1;    // 16px or 1rem
+ * --nypl-space-m: --nypl-space-s * 1.5;  // 24px or 1.5rem
+ * --nypl-space-l: --nypl-space-s * 2;    // 32px or 2rem
+ * --nypl-space-xl: --nypl-space-s * 3;   // 48px or 3rem
+ * --nypl-space-xxl: --nypl-space-s * 4;  // 64px or 4rem
+ * --nypl-space-xxxl: --nypl-space-s * 6; // 96px or 6rem
+ */
+
+@mixin space-stack-none {
+  margin-bottom: 0;
+}
+
+@mixin space-stack-xxs {
+  margin-bottom: var(--nypl-space-xxs);
+}
+
+@mixin space-stack-xs {
+  margin-bottom: var(--nypl-space-xs);
+}
+
+@mixin space-stack-s {
+  margin-bottom: var(--nypl-space-s);
+}
+
+@mixin space-stack-m {
+  margin-bottom: var(--nypl-space-m);
+}
+
+@mixin space-stack-l {
+  margin-bottom: var(--nypl-space-l);
+}
+
+@mixin space-stack-xl {
+  margin-bottom: var(--nypl-space-xl);
+}
+
+@mixin space-stack-xxl {
+  margin-bottom: var(--nypl-space-xxl);
+}
+
+@mixin space-stack-xxxl {
+  margin-bottom: var(--nypl-space-xxxl);
+}
+
+@mixin space-stack-page {
+  @include space-stack-l;
+
+  @include breakpoint($nypl-breakpoint-large) {
+    @include space-stack-xl;
+  }
+
+  &--full {
+    @include space-stack-xxl;
+
+    @include breakpoint($nypl-breakpoint-large) {
+      @include space-stack-xxxl;
+    }
+  }
+}
+
+@mixin remove-stack-page {
+  margin-top: calc(-1 * 32px);
+
+  @include breakpoint($nypl-breakpoint-large) {
+    margin-top: calc(-1 * 48px);
+  }
+
+  &--full {
+    margin-top: calc(-1 * 64px);
+
+    @include breakpoint($nypl-breakpoint-large) {
+      margin-top: calc(-1 * 96px);
+    }
+  }
+}
+
+@mixin get-space-stack($id) {
+  @if $id == "none" {
+    @include space-stack-none;
+  }
+
+  @if $id == "xxs" {
+    @include space-stack-xxs;
+  }
+
+  @if $id == "xs" {
+    @include space-stack-xs;
+  }
+
+  @if $id == "s" {
+    @include space-stack-s;
+  }
+
+  @if $id == "m" {
+    @include space-stack-m;
+  }
+
+  @if $id == "l" {
+    @include space-stack-l;
+  }
+
+  @if $id == "xl" {
+    @include space-stack-xl;
+  }
+
+  @if $id == "xxl" {
+    @include space-stack-xxl;
+  }
+
+  @if $id == "xxxl" {
+    @include space-stack-xxxl;
+  }
+}

package/src/styles.scss

@@ -2,71 +2,29 @@
 
 // Better style reset
 @import "~normalize.css/normalize";
-
 // A cleaner way to do breakpoints/media queries, http://breakpoint-sass.com/
 @import "~breakpoint-sass/stylesheets/breakpoint";
 @import "~system-font-css/_system-font.scss";
-
 // For the React DatePicker package.
 @import "~react-datepicker/dist/react-datepicker.css";
-// End libs
 
-/*
- * The `css-vars` mixins have been included here 
- * because they are utilized in the colors SCSS files.
- */
-
-// generates a collection of CSS vars
-@mixin css-vars($map, $prefix) {
-  $prefix: str-insert($prefix, "-", str-length($prefix) + 1);
-
-  @each $name, $color in $map {
-    --#{$prefix}#{$name}: #{$color};
-  }
-}
+// End libs
 
 // Order important
-@import "./styles/01-colors/_colors-brand";
-@import "./styles/01-colors/_colors-utility";
-@import "./styles/02-typography/_type-scale";
-@import "./styles/02-typography/_type-weight";
-@import "./styles/02-typography/_typefaces";
-@import "./styles/03-space/_space";
-@import "./styles/03-space/_space-inline";
-@import "./styles/03-space/_space-inset";
-@import "./styles/03-space/_space-stack";
-@import "./styles/base/_02-breakpoints";
-@import "./styles/base/_03-mixins";
-@import "./styles/base/_04-base";
-@import "./styles/base/_05-focus";
-@import "./styles/base/_card-grid";
+@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/base/_typography";
-@import "./components/Button/_Button.scss";
-@import "./components/Input/_Input.scss";
-@import "./components/Autosuggest/_Autosuggest.scss";
-
-fieldset {
-  .sr-only {
-    @include screenreader-only();
-  }
-}
-
-// Copied over from Label.scss
-.fieldset {
-  @include fieldset-reset;
-}
+@import "./styles/space/_space-inline";
+@import "./styles/space/_space-inset";
+@import "./styles/space/_space-stack";
 
-.legend {
-  border: 0;
-  font-weight: 500;
-}
-
-// Order not important
-@import "./components/Card/_Card.scss";
+// Legacy/deprecated components:
 @import "./components/CardEdition/_CardEdition.scss";
+@import "./components/Input/_Input.scss";
+
+// Components.
+@import "./components/Autosuggest/_Autosuggest.scss"; // Depends on _Input.scss
 @import "./components/DatePicker/_DatePicker.scss";
-@import "./components/Image/_Image.scss";
 @import "./components/Modal/_Modal.scss";
-@import "./components/Pagination/_Pagination.scss";
-@import "./components/SkeletonLoader/_SkeletonLoader.scss";

package/src/theme/components/breadcrumb.ts

@@ -1,4 +1,13 @@
 // Variant styling
+const blogs = {
+  bg: "section.blogs.secondary",
+  color: "ui.black",
+  a: {
+    _hover: {
+      color: "ui.gray.xdark",
+    },
+  },
+};
 const booksAndMore = {
   bg: "section.books-and-more.secondary",
 };
@@ -67,6 +76,7 @@ const Breadcrumb = {
   },
   // Available variants:
   variants: {
+    blogs,
     booksAndMore,
     locations,
     research,

package/src/theme/components/button.ts

@@ -10,6 +10,7 @@ const baseStyle = {
   px: "s",
   textDecoration: "none",
   wordWrap: "normal",
+  fontWeight: "regular",
   svg: {
     fill: "currentColor",
     marginTop: "xxs",
@@ -27,24 +28,20 @@ const baseStyle = {
     opacity: "1",
   },
 };
-// Styles for different "lg" size
-const sizes = {
-  lg: {
-    width: "150px",
-  },
-};
 // Styles for different visual variants:
-// primary, secondary, link, pill, icon-only, callout
+// primary, secondary, link, pill, iconOnly, callout, searchbar, noBrand
 const primary = {
   bg: "ui.link.primary",
   minWidth: "none",
   height: "none",
+  fontSize: "-1",
 };
 const secondary = {
   bg: "ui.white",
   border: "1px solid",
   borderColor: "ui.gray.light-cool",
   color: "inherit",
+  fontSize: "-1",
   _hover: {
     bg: "ui.gray.xx-light-cool",
   },
@@ -71,6 +68,7 @@ const pill = {
   py: "xs",
   paddingInlineStart: "m",
   paddingInlineEnd: "m",
+  fontSize: "-1",
   _hover: {
     bg: "ui.gray.xx-light-cool",
   },
@@ -88,6 +86,7 @@ const iconOnly = {
 };
 const callout = {
   bg: "brand.primary",
+  fontSize: "-1",
   _hover: {
     bg: "brand.secondary",
   },
@@ -98,27 +97,34 @@ const callout = {
 const searchBar = {
   ...primary,
   borderLeftRadius: "none",
+  borderRightRadius: { base: "none", md: "sm" },
+  lineHeight: "1.75",
+};
+const noBrand = {
+  ...primary,
+  bg: "ui.black",
+  color: "ui.white",
+  _hover: {
+    bg: "ui.gray.xdark",
+  },
 };
 
 const Button = {
   baseStyle,
-  sizes,
   // Available variants:
-  // primary, secondary, link, pill, icon-only, searchBar
   variants: {
     primary,
     secondary,
     link,
     pill,
-    ["icon-only"]: iconOnly,
+    iconOnly,
     callout,
     searchBar,
+    noBrand,
   },
   // Default values
   defaultProps: {
-    size: "md",
     variant: "primary",
-    colorScheme: "blue",
   },
 };
 

package/src/theme/components/card.ts

@@ -0,0 +1,174 @@
+const imageSizes = {
+  small: { flex: { md: "0 0 165px" } },
+  medium: { flex: { md: "0 0 225px" } },
+  large: { flex: { md: "0 0 360px" } },
+};
+// This is complicated and can be refactored later...
+const getBodyPaddingStyles = ({ border, hasImage, imageAtEnd, isRow }) => {
+  let bodyPadding = null;
+  if (border) {
+    bodyPadding = "s";
+    if (hasImage) {
+      bodyPadding = "0 var(--nypl-space-s) var(--nypl-space-s)";
+    }
+  }
+  if (isRow && border) {
+    bodyPadding = "var(--nypl-space-s)";
+  }
+  if (isRow && border && 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",
+    };
+    if (imageAtEnd) {
+      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)",
+      };
+    }
+  }
+  return bodyPadding;
+};
+const Card = {
+  parts: ["body", "heading"],
+  baseStyle: (props) => {
+    const { border, center, hasImage, imageAtEnd, layout } = props;
+    const isRow = layout === "row";
+    const layoutStyles = isRow
+      ? {
+          display: "flex",
+          flexFlow: {
+            base: "column nowrap",
+            md: "row",
+          },
+          maxWidth: "100%",
+          textAlign: "left",
+          alignItems: center ? "center" : null,
+        }
+      : {};
+    const baseBorderStyles = border
+      ? {
+          border: "1px solid",
+          borderColor: "ui.gray.medium",
+        }
+      : {};
+    const bodyPadding = getBodyPaddingStyles({
+      border,
+      hasImage,
+      imageAtEnd,
+      isRow,
+    });
+    let bodyMargin = null;
+    if (center) {
+      bodyMargin = "auto";
+      if (isRow) {
+        bodyMargin = "0";
+      }
+    }
+    return {
+      alignItems: "flex-start",
+      display: "flex",
+      flexFlow: "column wrap",
+      textAlign: center ? "center" : null,
+      heading: {
+        marginBottom: "xs",
+      },
+      body: {
+        display: { md: "block" },
+        flexFlow: { md: "row nowrap" },
+        margin: bodyMargin,
+        padding: bodyPadding,
+      },
+      ...baseBorderStyles,
+      ...layoutStyles,
+    };
+  },
+};
+
+const CardActions = {
+  baseStyle: (props) => {
+    const { bottomBorder, center, layout, topBorder } = props;
+    let justifyContent = null;
+    if (center) {
+      justifyContent = "center";
+    } else if (layout === "row") {
+      justifyContent = "left";
+    }
+    const topBorderStyles = topBorder
+      ? {
+          borderTop: "1px solid",
+          paddingTop: "xs",
+        }
+      : {};
+    const bottomBorderStyles = bottomBorder
+      ? {
+          borderBottom: "1px solid",
+          paddingBottom: "xs",
+        }
+      : {};
+    return {
+      marginBottom: "xs",
+      columnGap: "var(--nypl-space-xs)",
+      display: "flex",
+      _last: {
+        marginBottom: "0",
+      },
+      ...topBorderStyles,
+      ...bottomBorderStyles,
+      justifyContent,
+      borderColor: "ui.gray.medium",
+    };
+  },
+};
+
+const CardContent = {
+  baseStyle: {
+    marginBottom: "xs",
+    _last: {
+      marginBottom: "0",
+    },
+  },
+};
+
+const CardImage = {
+  baseStyle: ({ center, imageSize, imageAtEnd, layout }) => {
+    // These sizes are only for the "row" layout.
+    const size = imageSizes[imageSize] || {};
+    const layoutStyles =
+      layout === "row"
+        ? {
+            display: "flex",
+            flexFlow: {
+              base: "column nowrap",
+              md: "row",
+            },
+            flex: { md: "0 0 225px" },
+            maxWidth: { base: "100%", md: "50%" },
+            textAlign: "left",
+            alignItems: center ? "center" : null,
+            margin: {
+              base: imageAtEnd ? "var(--nypl-space-m) 0 0" : null,
+              md: imageAtEnd
+                ? "0 0 0 var(--nypl-space-m)"
+                : "0 var(--nypl-space-m) 0 0",
+            },
+            ...size,
+          }
+        : {
+            marginBottom: "xs",
+          };
+    const imageAtEndStyles = imageAtEnd
+      ? {
+          marginBottom: "0",
+          marginTop: "s",
+          order: "2",
+        }
+      : {};
+    return {
+      ...imageAtEndStyles,
+      ...layoutStyles,
+    };
+  },
+};
+
+export default { Card, CardActions, CardContent, CardImage };

package/src/theme/components/checkbox.ts

@@ -39,11 +39,16 @@ const baseStyleControl = {
       borderColor: "ui.gray.medium",
       color: "ui.gray.medium",
     },
+
+    _indeterminate: {
+      color: "ui.focus",
+      borderColor: "ui.focus",
+    },
   },
 
   _indeterminate: {
-    bg: "ui.white",
-    borderColor: "ui.gray.medium",
+    color: "ui.focus",
+    borderColor: "ui.focus",
   },
 
   _disabled: {

package/src/theme/components/checkboxGroup.ts

@@ -0,0 +1,8 @@
+import { checkboxRadioGroupStyles } from "./global";
+
+const CheckboxGroup = {
+  parts: ["helper", "stack"],
+  baseStyle: checkboxRadioGroupStyles,
+};
+
+export default CheckboxGroup;

package/src/theme/components/datePicker.ts

@@ -0,0 +1,17 @@
+/**
+ * Note: these styles are only used when the
+ * DatePicker is in "date range" mode.
+ */
+const DatePicker = {
+  parts: ["subLabels"],
+  baseStyle: {
+    subLabels: {
+      label: {
+        fontSize: "12px",
+        marginBottom: "0",
+      },
+    },
+  },
+};
+
+export default DatePicker;

package/src/theme/components/fieldset.ts

@@ -0,0 +1,18 @@
+import { labelLegendText } from "./global";
+import { screenreaderOnly } from "./globalMixins";
+
+const Fieldset = {
+  parts: ["helper"],
+  baseStyle: ({ isLegendHidden }) => {
+    const screenreaderStyles = isLegendHidden ? screenreaderOnly : {};
+    return {
+      legend: {
+        ...labelLegendText,
+        ...screenreaderStyles,
+      },
+      helper: { ...labelLegendText.helper },
+    };
+  },
+};
+
+export default Fieldset;

package/src/theme/components/global.ts

@@ -39,19 +39,6 @@ const checkboxRadioControlSize = {
   h: "1.375rem",
   w: "1.375rem",
 };
-// Used in `CheckboxGroup` and `RadioGroup`.
-const checkboxRadioGroupLayout = {
-  legend: {
-    fontSize: "14px",
-    marginBottom: "s",
-  },
-  required: {
-    marginLeft: "m",
-  },
-  helper: {
-    marginTop: "s",
-  },
-};
 // Used in `Checkbox` and `Radio`.
 const checkboxRadioHelperStyle = {
   ...helperTextMargin,
@@ -60,12 +47,36 @@ const checkboxRadioHelperStyle = {
     fontStyle: "italic",
   },
 };
+// Used in `Label` and `Fieldset`.
+const labelLegendText = {
+  alignItems: "baseline",
+  width: "100%",
+  marginBottom: "s",
+  fontSize: "14px",
+  fontWeight: "medium",
+  display: "flex",
+  justifyContent: "space-between",
+  helper: {
+    marginLeft: "m",
+    fontWeight: "300",
+    fontSize: "-1",
+  },
+};
+const checkboxRadioGroupStyles = {
+  helper: {
+    marginTop: "s",
+  },
+  stack: {
+    width: "fit-content",
+  },
+};
 
 export {
   activeFocus,
-  checkboxRadioLabelStyles,
   checkboxRadioControlSize,
-  checkboxRadioGroupLayout,
+  checkboxRadioGroupStyles,
   checkboxRadioHelperStyle,
+  checkboxRadioLabelStyles,
   helperTextMargin,
+  labelLegendText,
 };

package/src/theme/components/globalMixins.ts

@@ -12,5 +12,13 @@ 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 { wrapperStyles };
+export { screenreaderOnly, wrapperStyles };

package/src/theme/components/heading.ts

@@ -60,6 +60,11 @@ const variants = {
 };
 
 const Heading = {
+  baseStyle: {
+    a: {
+      color: "ui.black",
+    },
+  },
   // Available variants:
   // h1, h2, h3, h4, h5, h6,
   // primary, secondary, tertiary, callout