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

package/src/styles.scss

@@ -2,76 +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/HelperErrorText/_HelperErrorText.scss";
-@import "./components/HorizontalRule/_HorizontalRule.scss";
-@import "./components/Image/_Image.scss";
-@import "./components/List/_List.scss";
 @import "./components/Modal/_Modal.scss";
-@import "./components/Notification/_Notification.scss";
-@import "./components/Pagination/_Pagination.scss";
-@import "./components/SkeletonLoader/_SkeletonLoader.scss";
-@import "./components/VideoPlayer/_VideoPlayer.scss";

package/src/theme/components/button.ts

@@ -1,6 +1,6 @@
 // Style object for base or default style
 const baseStyle = {
-  borderRadius: "2px",
+  borderRadius: "sm",
   lineHeight: "1.5",
   display: "flex",
   cursor: "pointer",
@@ -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",
   },
@@ -67,10 +64,11 @@ const pill = {
   border: "1px solid",
   borderColor: "ui.gray.light-cool",
   color: "inherit",
-  borderRadius: "20px",
+  borderRadius: "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",
   },
@@ -97,28 +96,35 @@ const callout = {
 };
 const searchBar = {
   ...primary,
-  borderLeftRadius: "0",
+  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: {
@@ -86,7 +91,7 @@ const sizes = {
     // Controls the width/height of the checkbox itself.
     control: {
       ...checkboxRadioControlSize,
-      borderRadius: "3px",
+      borderRadius: "sm",
     },
     // Controls the font-size of the label only.
     label: { fontSize: "md" },

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/componentWrapper.ts

@@ -0,0 +1,10 @@
+const ComponentWrapper = {
+  baseStyle: ({ hasChildren }) => ({
+    helperText: {
+      marginBottom: "0",
+      marginTop: hasChildren ? "xs" : "0",
+    },
+  }),
+};
+
+export default ComponentWrapper;

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,33 +39,44 @@ const checkboxRadioControlSize = {
   h: "1.375rem",
   w: "1.375rem",
 };
-// Used in `CheckboxGroup` and `RadioGroup`.
-const checkboxRadioGroupLayout = {
-  legend: {
-    fontSize: "14px",
-    marginBottom: "s",
+// Used in `Checkbox` and `Radio`.
+const checkboxRadioHelperStyle = {
+  ...helperTextMargin,
+  marginLeft: "30px", // calc(22px + var(--nypl-space-xs))
+  _disabled: {
+    fontStyle: "italic",
   },
-  required: {
+};
+// 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",
   },
-};
-// Used in `Checkbox` and `Radio`.
-const checkboxRadioHelperStyle = {
-  ...helperTextMargin,
-  marginLeft: "30px", // calc(22px + var(--space-xs))
-  _disabled: {
-    fontStyle: "italic",
+  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

@@ -8,7 +8,7 @@ const margins = {
 // Heading Styles
 const headings = {
   h1: {
-    fontSize: "4", // var(--font-size-4);
+    fontSize: "4", // var(--nypl-fontSizes-4);
     fontWeight: "light",
     letterSpacing: "0",
     lineHeight: "1.1",
@@ -16,28 +16,28 @@ const headings = {
     width: "auto",
   },
   h2: {
-    fontSize: "3", // var(--font-size-3);
+    fontSize: "3", // var(--nypl-fontSizes-3);
     fontWeight: "medium",
     lineHeight: "1.25",
     ...margins,
     width: "auto",
   },
   h3: {
-    fontSize: "2", // var(--font-size-2);
+    fontSize: "2", // var(--nypl-fontSizes-2);
     fontWeight: "medium",
     lineHeight: "1.25",
     ...margins,
     width: "auto",
   },
   h4: {
-    fontSize: "1", // var(--font-size-1);
+    fontSize: "1", // var(--nypl-fontSizes-1);
     fontWeight: "medium",
     lineHeight: "1.15",
     ...margins,
     width: "auto",
   },
   fallback: {
-    fontSize: "1", // var(--font-size-1);
+    fontSize: "1", // var(--nypl-fontSizes-1);
     fontWeight: "regular",
     lineHeight: "1.15",
     ...margins,
@@ -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

package/src/theme/components/helperErrorText.ts

@@ -0,0 +1,9 @@
+const helperErrorText = {
+  baseStyle: ({ isInvalid }) => ({
+    marginBottom: "0",
+    fontSize: "-1",
+    color: isInvalid ? "ui.error.primary" : "ui.black",
+  }),
+};
+
+export default helperErrorText;

package/src/theme/components/hero.ts

@@ -120,16 +120,17 @@ const tertiary = {
     color: "ui.white",
     display: "flex",
     flexFlow: "column nowrap",
-    paddingTop: "l",
-    paddingBottom: "l",
+    paddingTop: "m",
+    paddingBottom: "m",
     paddingRight: "s",
     paddingLeft: "s",
     p: {
       marginBottom: "0",
+      marginTop: "s",
     },
   },
   heading: {
-    marginBottom: "s",
+    marginBottom: "0",
     _lastChild: {
       marginBottom: "0",
     },

package/src/theme/components/horizontalRule.ts

@@ -0,0 +1,13 @@
+const HorizontalRule = {
+  baseStyle: ({ align }) => ({
+    bg: "ui.gray.light-cool",
+    border: "0",
+    height: "2px",
+    marginBottom: "s",
+    marginTop: "s",
+    marginLeft: align === "left" ? 0 : "auto",
+    marginRight: align === "right" ? 0 : "auto",
+  }),
+};
+
+export default HorizontalRule;

package/src/theme/components/icon.ts

@@ -25,20 +25,20 @@ const iconRotation = {
 };
 const size = {
   xxxlarge: {
-    height: "var(--space-xxl)",
-    width: "var(--space-xxl)",
+    height: "var(--nypl-space-xxl)",
+    width: "var(--nypl-space-xxl)",
   },
   xxlarge: {
-    height: "var(--space-xl)",
-    width: "var(--space-xl)",
+    height: "var(--nypl-space-xl)",
+    width: "var(--nypl-space-xl)",
   },
   xlarge: {
-    height: "var(--space-l)",
-    width: "var(--space-l)",
+    height: "var(--nypl-space-l)",
+    width: "var(--nypl-space-l)",
   },
   large: {
-    height: "var(--space-m)",
-    width: "var(--space-m)",
+    height: "var(--nypl-space-m)",
+    width: "var(--nypl-space-m)",
   },
   medium: {
     height: "1.125rem",
@@ -70,7 +70,7 @@ const Icon = {
   variants: {
     default: {},
     breadcrumbs: {
-      fill: "var(--ui-white)",
+      fill: "var(--nypl-colors-ui-white)",
       display: { md: "none" },
     },
   },