@nypl/design-system-react-components 1.0.1 → 1.0.2

package/src/styles/base/_02-mixins.scss

@@ -0,0 +1,103 @@
+/////////////////////
+// General Mixins (put specific ones in component files where applicable)
+
+/// Mixin - Clearfix.
+/// Adds clearfix based on http://bourbon.io/docs/#clearfix
+/// use example = @include clearfix
+
+@mixin clearfix {
+  &::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
+}
+
+@mixin list-reset {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+@mixin fieldset-reset {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+/// Mixin - Wrapper
+/// Outer container mixin for large screens
+@mixin wrapper(
+  $container-max-width: $max-width,
+  $outer-container-break: $nypl-breakpoint-small,
+  $v-margin: 0,
+  $v-padding: 0,
+  $h-padding: var(--nypl-space-s)
+) {
+  margin: #{$v-margin} auto;
+  max-width: #{$container-max-width};
+  padding: #{$v-padding} #{$h-padding};
+  width: 100%;
+}
+
+.container {
+  padding: var(--nypl-space-s);
+}
+
+/// Use the breakout mixin for elements that should be edge-to-edge
+/// Even when a parent container uses the wrapper mixin
+@mixin breakout($v-padding: var(--nypl-space-s)) {
+  margin-left: calc(-50vw + 50%);
+  margin-right: calc(-50vw + 50%);
+}
+
+// Use the screenreader-only mixin for elements that you want to be visually hidden, but still want screenreaders to read out
+@mixin screenreader-only() {
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute !important;
+  width: 1px;
+  word-wrap: normal;
+}
+
+// Focus state mixin
+@mixin focus-outline($darkBackground: false) {
+  outline: 2px solid var(--nypl-colors-ui-focus);
+  outline-offset: 2px;
+  z-index: 9999;
+
+  @if $darkBackground {
+    outline-color: var(--nypl-colors-ui-white);
+  }
+}
+
+//Convert pixel values to rem
+@function to-rem($size) {
+  @return $size / 16px * 1rem;
+}
+
+//Process a color variable so that it can be used in a data URI/URL
+@function url-friendly-colour($colour) {
+  @return "%23" + str-slice("#{$colour}", 2, -1);
+}
+
+@mixin placeholder {
+  &::-webkit-input-placeholder {
+    @content;
+  }
+
+  &::-moz-placeholder {
+    @content;
+
+    opacity: 1;
+  }
+
+  &:-moz-placeholder {
+    @content;
+  }
+
+  &:-ms-input-placeholder {
+    @content;
+  }
+}

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

@@ -0,0 +1,33 @@
+// Only used for the `Placeholder` component, not to style
+// an `input`'s placeholder.
+.placeholder {
+  --color-place-holder: var(--nypl-colors-ui-gray-dark);
+
+  margin-bottom: var(--nypl-space-l);
+  @include breakpoint($nypl-breakpoint-large) {
+    margin-bottom: var(--nypl-space-l);
+  }
+
+  padding: var(--nypl-space-s);
+
+  align-items: center;
+  border: 4px dashed var(--color-place-holder);
+  color: var(--color-place-holder);
+  display: flex;
+  font-size: 3rem;
+  justify-content: center;
+  line-height: 1.4;
+  padding: 4rem 1rem;
+  width: 100%;
+
+  &--full {
+    margin-bottom: var(--nypl-space-xxl);
+    @include breakpoint($nypl-breakpoint-large) {
+      margin-bottom: var(--nypl-space-xxxl);
+    }
+  }
+
+  &--short {
+    padding: 1rem 1rem;
+  }
+}

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

@@ -0,0 +1,79 @@
+/**
+ * --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 {
+  margin-right: 0;
+}
+
+@mixin space-inline-xxs {
+  margin-right: var(--nypl-space-xxs);
+}
+
+@mixin space-inline-xs {
+  margin-right: var(--nypl-space-xs);
+}
+
+@mixin space-inline-s {
+  margin-right: var(--nypl-space-s);
+}
+
+@mixin space-inline-m {
+  margin-right: var(--nypl-space-m);
+}
+
+@mixin space-inline-l {
+  margin-right: var(--nypl-space-l);
+}
+
+@mixin space-inline-xl {
+  margin-right: var(--nypl-space-xl);
+}
+
+@mixin space-inline-xxl {
+  margin-right: var(--nypl-space-xxl);
+}
+
+@mixin get-space-inline($id) {
+  @if $id == "none" {
+    @include space-inline-none;
+  }
+
+  @if $id == "xxs" {
+    @include space-inline-xxs;
+  }
+
+  @if $id == "xs" {
+    @include space-inline-xs;
+  }
+
+  @if $id == "s" {
+    @include space-inline-s;
+  }
+
+  @if $id == "m" {
+    @include space-inline-m;
+  }
+
+  @if $id == "l" {
+    @include space-inline-l;
+  }
+
+  @if $id == "xl" {
+    @include space-inline-xl;
+  }
+
+  @if $id == "xxl" {
+    @include space-inline-xxl;
+  }
+
+  @if $id == "xxxl" {
+    @include space-inline-xxxl;
+  }
+}

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

@@ -0,0 +1,57 @@
+/**
+ * --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 {
+  padding: 0;
+}
+
+@mixin space-inset-xs {
+  padding: var(--nypl-space-xs);
+}
+
+@mixin space-inset-s {
+  padding: var(--nypl-space-s);
+}
+
+@mixin space-inset-m {
+  padding: var(--nypl-space-m);
+}
+
+@mixin space-inset-l {
+  padding: var(--nypl-space-l);
+}
+
+@mixin space-inset-xl {
+  padding: var(--nypl-space-xl);
+}
+
+@mixin get-space-inset($id) {
+  @if $id == "none" {
+    @include space-inset-none;
+  }
+
+  @if $id == "xs" {
+    @include space-inset-xs;
+  }
+
+  @if $id == "s" {
+    @include space-inset-s;
+  }
+
+  @if $id == "m" {
+    @include space-inset-m;
+  }
+
+  @if $id == "l" {
+    @include space-inset-l;
+  }
+
+  @if $id == "xl" {
+    @include space-inset-xl;
+  }
+}

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

@@ -0,0 +1,23 @@
+// Start libs
+
+// 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
+
+// Order important
+@import "./styles/base/_01-breakpoints";
+@import "./styles/base/_02-mixins";
+@import "./styles/base/_place-holder";
+@import "./styles/space/_space-inline";
+@import "./styles/space/_space-inset";
+@import "./styles/space/_space-stack";
+
+// Components.
+@import "./components/Autosuggest/_Autosuggest.scss";
+@import "./components/DatePicker/_DatePicker.scss";

package/src/theme/components/accordion.ts

@@ -0,0 +1,25 @@
+const containerStyles = {
+  border: "none",
+  width: "100%",
+};
+const buttonStyles = {
+  borderWidth: "1px",
+  fontWeight: "medium",
+};
+const panelStyles = {
+  padding: "s",
+  borderLeftWidth: "1px",
+  borderRightWidth: "1px",
+  borderBottomWidth: "1px",
+};
+
+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,94 @@
+// Variant styling
+const blogs = {
+  bg: "section.blogs.secondary",
+  color: "ui.black",
+  a: {
+    _hover: {
+      color: "ui.gray.xdark",
+    },
+  },
+  svg: {
+    fill: "ui.black",
+  },
+};
+const booksAndMore = {
+  bg: "section.books-and-more.secondary",
+};
+const education = {
+  bg: "section.education.secondary",
+};
+const locations = {
+  bg: "section.locations.primary",
+};
+const research = {
+  bg: "section.research.secondary",
+};
+const whatsOn = {
+  bg: "section.whats-on.secondary",
+};
+
+const Breadcrumb = {
+  baseStyle: {
+    bg: "ui.black",
+    color: "ui.white",
+    fontSize: "breadcrumbs.default",
+    fontWeight: "breadcrumbs.default",
+    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: "breadcrumbs.default", md: "breadcrumbs.lastChild" },
+      ".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-of-type(2)": {
+      display: "inline-block",
+      span: {
+        display: { base: "none", md: "inline" },
+      },
+    },
+  },
+  // Available variants:
+  variants: {
+    blogs,
+    booksAndMore,
+    education,
+    locations,
+    research,
+    whatsOn,
+  },
+};
+
+export default Breadcrumb;

package/src/theme/components/button.ts

@@ -0,0 +1,133 @@
+// Style object for base or default style
+const baseStyle = {
+  borderRadius: "sm",
+  lineHeight: "1.5",
+  display: "flex",
+  cursor: "pointer",
+  color: "ui.white",
+  justifyContent: "center",
+  maxHeight: "2.5rem",
+  py: "inset.narrow",
+  px: "inset.default",
+  textDecoration: "none",
+  wordWrap: "normal",
+  fontWeight: "button.default",
+  svg: {
+    fill: "currentColor",
+    marginTop: "xxs",
+  },
+  _hover: {
+    bg: "ui.link.secondary",
+  },
+  _visited: {
+    color: "ui.white",
+  },
+  _disabled: {
+    bg: "ui.gray.light-cool",
+    color: "ui.gray.dark",
+    pointerEvents: "none",
+    opacity: "1",
+  },
+};
+// Styles for different visual variants:
+// primary, secondary, link, pill, iconOnly, callout, searchbar, noBrand
+const primary = {
+  bg: "ui.link.primary",
+  minWidth: "none",
+  height: "none",
+  fontSize: "button.default",
+};
+const secondary = {
+  bg: "ui.white",
+  border: "1px solid",
+  borderColor: "ui.gray.light-cool",
+  color: "inherit",
+  fontSize: "button.default",
+  _hover: {
+    bg: "ui.gray.xx-light-cool",
+    borderColor: "ui.gray.medium",
+  },
+  _disabled: {
+    bg: "ui.gray.x-light-cool",
+  },
+};
+const link = {
+  bg: "transparent",
+  lineHeight: "2.5",
+  color: "ui.link.primary",
+  textDecoration: "underline",
+  _disabled: {
+    bg: "transparent",
+  },
+  _hover: {
+    bg: "transparent",
+    color: "ui.link.secondary",
+  },
+};
+const pill = {
+  bg: "ui.white",
+  border: "1px solid",
+  borderColor: "ui.gray.light-cool",
+  color: "inherit",
+  borderRadius: "pill",
+  py: "inset.narrow",
+  px: "inset.wide",
+  fontSize: "button.default",
+  _hover: {
+    bg: "ui.gray.xx-light-cool",
+    borderColor: "ui.gray.medium",
+  },
+  _disabled: {
+    bg: "ui.gray.x-light-cool",
+  },
+};
+const iconOnly = {
+  bg: "ui.white",
+  border: "1px solid",
+  borderColor: "ui.gray.light-cool",
+  color: "inherit",
+  _hover: {
+    bg: "ui.gray.xx-light-cool",
+    borderColor: "ui.gray.medium",
+  },
+  paddingInlineStart: "inset.narrow",
+  paddingInlineEnd: "inset.narrow",
+};
+const callout = {
+  bg: "brand.primary",
+  fontSize: "button.default",
+  _hover: {
+    bg: "brand.secondary",
+  },
+  _active: {
+    bg: "brand.secondary",
+  },
+};
+const noBrand = {
+  ...primary,
+  bg: "ui.black",
+  color: "ui.white",
+  _hover: {
+    bg: "ui.gray.xdark",
+  },
+};
+
+const Button = {
+  baseStyle,
+  // Available variants:
+  variants: {
+    primary,
+    secondary,
+    link,
+    pill,
+    iconOnly,
+    callout,
+    noBrand,
+  },
+  // Default values
+  defaultProps: {
+    variant: "primary",
+  },
+};
+
+export default Button;

package/src/theme/components/buttonGroup.ts

@@ -0,0 +1,10 @@
+const ButtonGroup = {
+  baseStyle: ({ buttonWidth }) => ({
+    width: buttonWidth === "default" ? "fit-content" : "100%",
+    button: {
+      flexGrow: buttonWidth === "default" ? undefined : "1",
+    },
+  }),
+};
+
+export default ButtonGroup;