@nypl/design-system-react-components 0.25.3 → 0.25.4

package/src/styles/base/{_04-base.scss → _03-base.scss}

@@ -1,7 +1,8 @@
+// Kept for backwards compatibility.
 .nypl-ds {
   box-sizing: border-box;
-  color: var(--ui-black);
-  font-family: var(--typeface-body);
+  color: var(--nypl-colors-ui-black);
+  font-family: var(--nypl-fonts-body);
 
   // Sets up the base font-size, 1rem, for the system
   font-size: 16px;
@@ -12,6 +13,10 @@
   // our breakout mixin. Fix identified here: https://cloudfour.com/thinks/breaking-out-with-viewport-units-and-calc/#one-big-dumb-caveat
   overflow-x: hidden;
 
+  p {
+    margin: 0 0 var(--nypl-space-s);
+  }
+
   *,
   *::after,
   *::before {

package/src/styles/base/{_05-focus.scss → _04-focus.scss}

@@ -1,14 +1,3 @@
-// Focus state mixin
-@mixin focus-outline($darkBackground: false) {
-  outline: 2px solid var(--ui-focus);
-  outline-offset: 2px;
-  z-index: 9999;
-
-  @if $darkBackground {
-    outline-color: var(--ui-white);
-  }
-}
-
 // Apply :focus behavior to focusable elements only (For IE 11)
 .nypl-ds {
   input,
@@ -31,7 +20,3 @@
     }
   }
 }
-
-.focus {
-  @include focus-outline;
-}

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

@@ -1,8 +1,19 @@
 .placeholder {
-  --color-place-holder: var(--ui-gray-light-cool);
+  --color-place-holder: var(--nypl-colors-ui-gray-dark);
 
-  @include space-stack-page;
-  @include space-inset-s;
+  margin-bottom: var(--nypl-space-l);
+  @include breakpoint($nypl-breakpoint-large) {
+    margin-bottom: var(--nypl-space-xl);
+  }
+
+  &--full {
+    margin-bottom: var(--nypl-space-xxl);
+    @include breakpoint($nypl-breakpoint-large) {
+      margin-bottom: var(--nypl-space-xxxl);
+    }
+  }
+
+  padding: var(--nypl-space-s);
 
   align-items: center;
   border: 4px dashed var(--color-place-holder);

package/src/styles/{03-space → space}/_space-inline.scss

@@ -1,11 +1,11 @@
 /**
- * $space-xxs: $space / 4;   //  4px
- * $space-xs: $space / 2;    //  8px
- * $space-s: $space * 1;     // 16px
- * $space-m: $space * 1.5;   // 24px
- * $space-l: $space * 2;     // 32px
- * $space-xl: $space * 3;    // 48px
- * $space-xxl: $space * 4;   // 64px
+ * --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 * 1.5;   // 24px or 1.5rem
+ * --nypl-space-l: --nypl-space * 2;     // 32px or 2rem
+ * --nypl-space-xl: --nypl-space * 3;    // 48px or 3rem
+ * --nypl-space-xxl: --nypl-space * 4;   // 64px or 4rem
  */
 
 @mixin space-inline-none {
@@ -13,31 +13,31 @@
 }
 
 @mixin space-inline-xxs {
-  margin-right: var(--space-xxs);
+  margin-right: var(--nypl-space-xxs);
 }
 
 @mixin space-inline-xs {
-  margin-right: var(--space-xs);
+  margin-right: var(--nypl-space-xs);
 }
 
 @mixin space-inline-s {
-  margin-right: var(--space-s);
+  margin-right: var(--nypl-space-s);
 }
 
 @mixin space-inline-m {
-  margin-right: var(--space-m);
+  margin-right: var(--nypl-space-m);
 }
 
 @mixin space-inline-l {
-  margin-right: var(--space-l);
+  margin-right: var(--nypl-space-l);
 }
 
 @mixin space-inline-xl {
-  margin-right: var(--space-xl);
+  margin-right: var(--nypl-space-xl);
 }
 
 @mixin space-inline-xxl {
-  margin-right: var(--space-xxl);
+  margin-right: var(--nypl-space-xxl);
 }
 
 @mixin get-space-inline($id) {

package/src/styles/{03-space → space}/_space-inset.scss

@@ -1,9 +1,9 @@
 /**
- * $space-xs: $space / 2;    //  8px
- * $space-s: $space * 1;     // 16px
- * $space-m: $space * 1.5;   // 24px
- * $space-l: $space * 2;     // 32px
- * $space-xl: $space * 3;    // 48px
+ * --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 * 1.5;   // 24px or 1.5rem
+ * --nypl-space-l: --nypl-space * 2;     // 32px or 2rem
+ * --nypl-space-xl: --nypl-space * 3;    // 48px or 3rem
  */
 
 @mixin space-inset-none {
@@ -11,23 +11,23 @@
 }
 
 @mixin space-inset-xs {
-  padding: var(--space-xs);
+  padding: var(--nypl-space-xs);
 }
 
 @mixin space-inset-s {
-  padding: var(--space-s);
+  padding: var(--nypl-space-s);
 }
 
 @mixin space-inset-m {
-  padding: var(--space-m);
+  padding: var(--nypl-space-m);
 }
 
 @mixin space-inset-l {
-  padding: var(--space-l);
+  padding: var(--nypl-space-l);
 }
 
 @mixin space-inset-xl {
-  padding: var(--space-xl);
+  padding: var(--nypl-space-xl);
 }
 
 @mixin get-space-inset($id) {

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,60 +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/Input/_Input.scss";
-@import "./components/Autosuggest/_Autosuggest.scss";
-
-// Used in `Input.tsx`
-.fieldset {
-  @include fieldset-reset;
-}
-
-.legend {
-  border: 0;
-  font-weight: 500;
-}
+@import "./styles/space/_space-inline";
+@import "./styles/space/_space-inset";
+@import "./styles/space/_space-stack";
 
-// Order not important
+// 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/Modal/_Modal.scss";

package/src/theme/components/button.ts

@@ -29,7 +29,7 @@ const baseStyle = {
   },
 };
 // Styles for different visual variants:
-// primary, secondary, link, pill, iconOnly, callout
+// primary, secondary, link, pill, iconOnly, callout, searchbar, noBrand
 const primary = {
   bg: "ui.link.primary",
   minWidth: "none",
@@ -100,11 +100,18 @@ const searchBar = {
   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,
   // Available variants:
-  // primary, secondary, link, pill, iconOnly, searchBar
   variants: {
     primary,
     secondary,
@@ -113,6 +120,7 @@ const Button = {
     iconOnly,
     callout,
     searchBar,
+    noBrand,
   },
   // Default values
   defaultProps: {

package/src/theme/components/card.ts

@@ -9,21 +9,21 @@ const getBodyPaddingStyles = ({ border, hasImage, imageAtEnd, isRow }) => {
   if (border) {
     bodyPadding = "s";
     if (hasImage) {
-      bodyPadding = "0 var(--space-s) var(--space-s)";
+      bodyPadding = "0 var(--nypl-space-s) var(--nypl-space-s)";
     }
   }
   if (isRow && border) {
-    bodyPadding = "var(--space-s)";
+    bodyPadding = "var(--nypl-space-s)";
   }
   if (isRow && border && hasImage) {
     bodyPadding = {
-      base: "0 var(--space-s) var(--space-s)",
-      md: "var(--space-s) var(--space-s) var(--space-s) 0",
+      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(--space-s) var(--space-s) 0",
-        md: "var(--space-s) 0 var(--space-s) var(--space-s)",
+        base: "var(--nypl-space-s) var(--nypl-space-s) 0",
+        md: "var(--nypl-space-s) 0 var(--nypl-space-s) var(--nypl-space-s)",
       };
     }
   }
@@ -108,7 +108,7 @@ const CardActions = {
       : {};
     return {
       marginBottom: "xs",
-      columnGap: "var(--space-xs)",
+      columnGap: "var(--nypl-space-xs)",
       display: "flex",
       _last: {
         marginBottom: "0",
@@ -147,8 +147,10 @@ const CardImage = {
             textAlign: "left",
             alignItems: center ? "center" : null,
             margin: {
-              base: imageAtEnd ? "var(--space-m) 0 0" : null,
-              md: imageAtEnd ? "0 0 0 var(--space-m)" : "0 var(--space-m) 0 0",
+              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,
           }

package/src/theme/components/datePicker.ts

@@ -8,7 +8,7 @@ const DatePicker = {
     subLabels: {
       label: {
         fontSize: "12px",
-        marginBottom: "xs",
+        marginBottom: "0",
       },
     },
   },

package/src/theme/components/list.ts

@@ -41,13 +41,13 @@ const List = {
         borderTop: "3px solid",
         borderColor: "section.research.primary",
         margin: "0",
-        padding: "var(--space-xs) 0 0",
+        padding: "var(--nypl-space-xs) 0 0",
       },
       dl: {
         display: "grid",
         gridTemplateColumns: { base: "100%", md: "max(250px) 1fr" },
         gridTemplateRows: "1fr",
-        margin: "var(--space-xs) 0 0",
+        margin: "var(--nypl-space-xs) 0 0",
       },
       dt: {
         borderTop: "1px solid",

package/src/theme/components/notification.ts

@@ -13,7 +13,7 @@ const Notification = {
       bg,
       display: "flex",
       fontSize: "-1",
-      padding: "var(--space) var(--space-l)",
+      padding: "var(--nypl-space-s) var(--nypl-space-l)",
       position: "relative",
       textAlign: centered ? "center" : null,
       borderRadius: noMargin ? "0" : "4px",
@@ -21,7 +21,7 @@ const Notification = {
       container: {
         margin: "auto",
         width: "100%",
-        maxWidth: "var(--breakpoint-large)",
+        maxWidth: "var(--nypl-breakpoint-large)",
       },
       dismissibleButton: {
         border: "none",
@@ -54,7 +54,9 @@ const NotificationContent = {
     justifyContent: "center",
     content: {
       width: "100%",
-      paddingLeft: alignText ? "calc(var(--space-m) + var(--space-s))" : null,
+      paddingLeft: alignText
+        ? "calc(var(--nypl-space-m) + var(--nypl-space-s))"
+        : null,
       color:
         notificationType === NotificationTypes.Warning
           ? "brand.primary"

package/src/theme/components/progressIndicator.ts

@@ -0,0 +1,62 @@
+import { ProgressIndicatorSizes } from "../../components/ProgressIndicator/ProgressIndicatorTypes";
+
+const ProgressIndicator = {
+  parts: [
+    "circular",
+    "circularLabel",
+    "linear",
+    "linearContainer",
+    "linearPercentage",
+  ],
+  baseStyle: ({ darkMode, size }) => {
+    return {
+      color: darkMode ? "ui.white" : "ui.black",
+      circular: {
+        // Note: we have to target the SVG HTMl elements in order
+        // to override the default styles.
+        svg: {
+          height: size === ProgressIndicatorSizes.Small ? "24px" : "48px",
+          width: size === ProgressIndicatorSizes.Small ? "24px" : "48px",
+          display: "block",
+          circle: {
+            _first: {
+              stroke: darkMode ? "ui.gray.dark" : "ui.gray.light-cool",
+            },
+            _last: {
+              stroke: darkMode ? "ui.white" : "ui.link.primary",
+            },
+          },
+        },
+      },
+      circularContainer: {
+        alignItems: "center",
+        display: "flex",
+        flexDirection: "column",
+        width: "fit-content",
+      },
+      linear: {
+        // Hard to target this specific element without using
+        // "Progress" as the key name in index.ts
+        "> div": {
+          bg: darkMode ? "ui.white" : "ui.link.primary",
+        },
+        flex: 25,
+        bg: darkMode ? "ui.gray.dark" : "ui.gray.light-cool",
+        height: {
+          base: "4px",
+          md: size === ProgressIndicatorSizes.Small ? "4px" : "8px",
+        },
+      },
+      linearContainer: {
+        display: "flex",
+        alignItems: "center",
+      },
+      linearPercentage: {
+        padding: "0 var(--nypl-space-xs)",
+        flex: 1,
+      },
+    };
+  },
+};
+
+export default ProgressIndicator;

package/src/theme/components/skeletonLoader.ts

@@ -92,7 +92,7 @@ const SkeletonLoader = {
 const fade = () =>
   keyframes({
     from: { opacity: 0.9 },
-    ["50%"]: { opacity: 0.7 },
+    "50%": { opacity: 0.7 },
     to: { opacity: 0.9 },
   });
 // Overriding Chakra's Skeleton animation.

package/src/theme/components/slider.ts

@@ -0,0 +1,79 @@
+// Margins around the static display values.
+const staticValues = {
+  marginTop: "xs",
+  marginBottom: "xs",
+  marginRight: "s",
+  marginLeft: "s",
+};
+const CustomSlider = {
+  parts: [
+    "container",
+    "helper",
+    "leftValue",
+    "rightValue",
+    "textInput",
+    "filledTrack",
+    "track",
+    "thumb",
+  ],
+  baseStyle: ({ isDisabled, isInvalid, isRangeSlider, showBoxes }) => {
+    let baseColor = "ui.link.primary";
+    if (isInvalid) {
+      baseColor = "ui.error.primary";
+    } else if (isDisabled) {
+      baseColor = "ui.gray.light-cool";
+    }
+
+    return {
+      container: {
+        display: "flex",
+        alignItems: "center",
+      },
+      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",
+      },
+      rightValue: {
+        ...staticValues,
+        // 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",
+      },
+      textInput: {
+        // Allows for three or more digits present in the
+        // min or max value text input.
+        minWidth: "65px",
+        color: isInvalid ? "ui.error.primary" : "ui.black",
+      },
+      // Filled track doesn't have a _disabled or _invalid state...
+      // so we manually do it through the props.
+      filledTrack: {
+        bgColor: baseColor,
+      },
+      track: {
+        bgColor: "ui.gray.light-cool",
+        _disabled: {
+          bgColor: "ui.gray.light-cool",
+        },
+      },
+      thumb: {
+        border: "1px solid",
+        // Thumb doesn't have an _invalid state...
+        // so we manually do it through the props.
+        borderColor: baseColor,
+        boxShadow: "none",
+        _active: {
+          transform: "translateY(-50%) scale(1.0)",
+        },
+      },
+    };
+  },
+};
+
+export default CustomSlider;

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.