@nypl/design-system-react-components 1.0.0 → 1.0.3-beta

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

@@ -1,103 +0,0 @@
-/////////////////////
-// 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

@@ -1,33 +0,0 @@
-// 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

@@ -1,79 +0,0 @@
-/**
- * --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

@@ -1,57 +0,0 @@
-/**
- * --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

@@ -1,116 +0,0 @@
-/**
- * --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

@@ -1,23 +0,0 @@
-// 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

@@ -1,25 +0,0 @@
-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

@@ -1,94 +0,0 @@
-// 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

@@ -1,132 +0,0 @@
-// 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",
-  },
-  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

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