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

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,78 +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/Icons/_Icons.scss";
-@import "./components/Button/_Button.scss";
-@import "./components/Link/_Link.scss";
-@import "./components/Input/_Input.scss";
-@import "./components/TextInput/_TextInput.scss";
-@import "./components/Autosuggest/_Autosuggest.scss";
-
-fieldset {
-  .sr-only {
-    @include screenreader-only();
-  }
-}
+@import "./styles/space/_space-inline";
+@import "./styles/space/_space-inset";
+@import "./styles/space/_space-stack";
 
-// Order not important
-@import "./components/Accordion/_Accordion.scss";
-@import "./components/Breadcrumbs/_Breadcrumbs.scss";
-@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/Form/_Form.scss";
-@import "./components/HelperErrorText/_HelperErrorText.scss";
-@import "./components/Hero/_Hero.scss";
-@import "./components/HorizontalRule/_HorizontalRule.scss";
-@import "./components/Image/_Image.scss";
-@import "./components/Label/_Label.scss";
-@import "./components/List/_List.scss";
 @import "./components/Modal/_Modal.scss";
-@import "./components/Notification/_Notification.scss";
-@import "./components/Pagination/_Pagination.scss";
-@import "./components/SearchBar/_SearchBar.scss";
-@import "./components/Select/_Select.scss";
-@import "./components/SkeletonLoader/_SkeletonLoader.scss";
-@import "./components/StatusBadge/_StatusBadge.scss";
-@import "./components/Template/_Template.scss";
-@import "./components/VideoPlayer/_VideoPlayer.scss";

package/src/theme/components/accordion.ts

@@ -0,0 +1,30 @@
+const containerStyles = {
+  borderLeftWidth: "1px",
+  borderRightWidth: "1px",
+  borderColor: "ui.gray.medium",
+  width: "100%",
+};
+const buttonStyles = {
+  border: "none",
+  fontWeight: 500,
+  _hover: {
+    bg: "ui.gray.light-cool",
+  },
+};
+const panelStyles = {
+  paddingTop: "xs",
+  paddingRight: "xxxl",
+  paddingLeft: "s",
+  paddingBottom: "xs",
+};
+
+const Accordion = {
+  parts: ["container", "button", "panel"],
+  baseStyle: {
+    container: containerStyles,
+    button: buttonStyles,
+    panel: panelStyles,
+  },
+};
+
+export default Accordion;

package/src/theme/components/breadcrumb.ts

@@ -0,0 +1,77 @@
+// Variant styling
+const booksAndMore = {
+  bg: "section.books-and-more.secondary",
+};
+const locations = {
+  bg: "section.locations.secondary",
+};
+const research = {
+  bg: "section.research.secondary",
+};
+const whatsOn = {
+  bg: "section.whats-on.secondary",
+};
+
+const Breadcrumb = {
+  baseStyle: {
+    bg: "ui.black",
+    color: "ui.white",
+    fontSize: "-1",
+    fontWeight: "regular",
+    paddingBottom: "xs",
+    paddingTop: "xs",
+    ol: {
+      alignItems: { base: "center", md: "unset" },
+      display: { base: "flex", md: "block" },
+      margin: "auto",
+      maxWidth: "1280px",
+      paddingLeft: "s",
+      paddingRight: "s",
+    },
+    a: {
+      _hover: {
+        color: "ui.gray.light-cool",
+      },
+    },
+    "li:last-child": {
+      fontWeight: { base: "regular", md: "bold" },
+      ".chakra-breadcrumb__link": {
+        _hover: {
+          cursor: "default",
+          textDecoration: "none",
+        },
+      },
+      ".icon": {
+        display: "none",
+      },
+    },
+    "li:not(:last-child)": {
+      display: { base: "none", md: "inline-block" },
+      a: {
+        marginRight: { base: "xs", md: "0" },
+      },
+      ".icon": {
+        display: { base: "inline", md: "none" },
+      },
+      "span:not(.breadcrumb-label)": {
+        marginInlineEnd: "xxs",
+        marginInlineStart: "xxs",
+      },
+    },
+    "li:nth-last-child(2)": {
+      display: "inline-block",
+      span: {
+        display: { base: "none", md: "inline" },
+      },
+    },
+  },
+  // Available variants:
+  variants: {
+    booksAndMore,
+    locations,
+    research,
+    whatsOn,
+  },
+};
+
+export default Breadcrumb;

package/src/theme/components/button.ts

@@ -1,15 +1,20 @@
-// style object for base or default style
+// Style object for base or default style
 const baseStyle = {
-  borderRadius: "2px",
+  borderRadius: "sm",
   lineHeight: "1.5",
   display: "flex",
   cursor: "pointer",
   color: "ui.white",
   justifyContent: "center",
-  py: 2, // var(--space-xs)
-  px: 4, // var(--space-s)
+  py: "xs",
+  px: "s",
   textDecoration: "none",
   wordWrap: "normal",
+  fontWeight: "regular",
+  svg: {
+    fill: "currentColor",
+    marginTop: "xxs",
+  },
   _hover: {
     bg: "ui.link.secondary",
   },
@@ -17,94 +22,109 @@ const baseStyle = {
     color: "ui.white",
   },
   _disabled: {
-    bg: "ui.gray.light",
+    bg: "ui.gray.light-cool",
     color: "ui.gray.dark",
     pointerEvents: "none",
     opacity: "1",
   },
 };
-// styles for different sizes ("sm", "md", "lg")
-const sizes = {
-  lg: {
-    width: "150px",
-  },
+// Styles for different visual variants:
+// primary, secondary, link, pill, iconOnly, callout, searchbar, noBrand
+const primary = {
+  bg: "ui.link.primary",
+  minWidth: "none",
+  height: "none",
+  fontSize: "-1",
 };
-// styles for different visual variants:
-// primary, secondary, link, pill, icon-only
-const variants = {
-  primary: {
-    bg: "ui.link.primary",
-    minWidth: "none",
-    height: "none",
+const secondary = {
+  bg: "ui.white",
+  border: "1px solid",
+  borderColor: "ui.gray.light-cool",
+  color: "inherit",
+  fontSize: "-1",
+  _hover: {
+    bg: "ui.gray.xx-light-cool",
   },
-  secondary: {
-    bg: "ui.white",
-    border: "1px solid",
-    borderColor: "ui.gray.light",
-    color: "inherit",
-    _hover: {
-      bg: "ui.gray.xxlight",
-    },
+};
+const link = {
+  bg: "transparent",
+  lineHeight: "2.5",
+  color: "ui.link.primary",
+  textDecoration: "underline",
+  _disabled: {
+    bg: "transparent",
   },
-  link: {
+  _hover: {
     bg: "transparent",
-    lineHeight: "2.5",
-    color: "ui.link.primary",
-    textDecoration: "underline",
-    _disabled: {
-      bg: "transparent",
-    },
-    _hover: {
-      bg: "transparent",
-      color: "ui.link.secondary",
-    },
+    color: "ui.link.secondary",
+  },
+};
+const pill = {
+  bg: "ui.white",
+  border: "1px solid",
+  borderColor: "ui.gray.light-cool",
+  color: "inherit",
+  borderRadius: "pill",
+  py: "xs",
+  paddingInlineStart: "m",
+  paddingInlineEnd: "m",
+  fontSize: "-1",
+  _hover: {
+    bg: "ui.gray.xx-light-cool",
   },
-  pill: {
-    bg: "ui.white",
-    border: "1px solid",
-    borderColor: "ui.gray.light",
-    color: "inherit",
-    borderRadius: "20px",
-    py: 2, // var(--space-xs)
-    paddingInlineStart: 6, // var(--space-m)
-    paddingInlineEnd: 6, // var(--space-m)
-    _hover: {
-      bg: "ui.gray.xxlight",
-    },
+};
+const iconOnly = {
+  bg: "ui.white",
+  border: "1px solid",
+  borderColor: "ui.gray.light-cool",
+  color: "inherit",
+  _hover: {
+    bg: "ui.gray.xx-light-cool",
+  },
+  paddingInlineStart: "xs",
+  paddingInlineEnd: "xs",
+};
+const callout = {
+  bg: "brand.primary",
+  fontSize: "-1",
+  _hover: {
+    bg: "brand.secondary",
   },
-  "icon-only": {
-    bg: "ui.white",
-    border: "1px solid",
-    borderColor: "ui.gray.light",
-    color: "inherit",
-    _hover: {
-      bg: "ui.gray.xxlight",
-    },
-    paddingInlineStart: 1, // var(--space-xs)
-    paddingInlineEnd: 1, //var(--space-xs)
+  _active: {
+    bg: "brand.secondary",
   },
-  callout: {
-    bg: "brand.primary",
-    _hover: {
-      bg: "brand.secondary",
-    },
-    _active: {
-      bg: "brand.secondary",
-    },
+};
+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
-  variants,
+  variants: {
+    primary,
+    secondary,
+    link,
+    pill,
+    iconOnly,
+    callout,
+    searchBar,
+    noBrand,
+  },
   // Default values
   defaultProps: {
-    size: "md",
     variant: "primary",
-    colorScheme: "blue",
   },
 };