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

package/src/components/Hero/_Hero.scss

@@ -1,256 +0,0 @@
-.hero {
-  background-color: var(--ui-gray-warm-xlight);
-}
-
-.hero--50-50 {
-  .hero__content {
-    @include wrapper;
-
-    align-items: center;
-    display: flex;
-    flex-flow: column nowrap;
-    padding: 0 var(--space) var(--space) var(--space);
-
-    @include breakpoint($breakpoint-large) {
-      flex-flow: row nowrap;
-      padding: unset;
-    }
-  }
-
-  .hero__image {
-    margin-bottom: var(--space-s);
-
-    @include breakpoint($breakpoint-large) {
-      margin-bottom: unset;
-      margin-right: var(--space-s);
-      max-width: 50%;
-    }
-  }
-}
-
-.hero--primary {
-  align-items: center;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  min-height: 350px;
-
-  @include breakpoint($breakpoint-medium) {
-    flex-flow: row nowrap;
-  }
-
-  .hero__content {
-    background-color: var(--ui-black);
-    color: var(--ui-white);
-    flex: 0 0 100%;
-    padding: var(--space-xxl) var(--space-l);
-
-    a {
-      color: inherit;
-      display: inline-block;
-    }
-
-    @include breakpoint($breakpoint-medium) {
-      flex: 0 0 60%;
-      max-width: 960px;
-    }
-
-    + .placeholder {
-      flex: 0 1 200px;
-      margin-left: var(--space-xl);
-    }
-  }
-
-  .hero__heading,
-  .hero__body-text {
-    @include space-stack-none;
-  }
-}
-
-.hero--secondary {
-  overflow-x: hidden;
-
-  .hero__content {
-    @include wrapper;
-
-    display: flex;
-    flex-flow: column nowrap;
-
-    @include breakpoint($breakpoint-medium) {
-      flex-flow: row wrap;
-    }
-
-    .hero__heading {
-      @include space-stack-none;
-
-      background-color: var(--ui-black);
-      color: var(--ui-white);
-      flex: 1 1 100%;
-      margin-top: 0;
-      padding-bottom: var(--space-xxs);
-      position: relative;
-      z-index: 0;
-
-      &::before {
-        background-color: var(--ui-black);
-        content: "";
-        height: 100%;
-        left: -2000px;
-        position: absolute;
-        width: 4000px;
-        z-index: -1;
-      }
-
-      @include breakpoint($breakpoint-medium) {
-        order: 1;
-      }
-
-      .nypl--books-and-more & {
-        background-color: var(--section-books-and-more-primary);
-
-        &::before {
-          background-color: var(--section-books-and-more-primary);
-        }
-      }
-
-      .nypl--locations & {
-        background-color: var(--section-locations-primary);
-
-        &::before {
-          background-color: var(--section-locations-primary);
-        }
-      }
-
-      .nypl--research & {
-        background-color: var(--section-research-primary);
-
-        &::before {
-          background-color: var(--section-research-primary);
-        }
-      }
-
-      .nypl--whats-on & {
-        background-color: var(--section-whats-on-primary);
-
-        &::before {
-          background-color: var(--section-whats-on-primary);
-        }
-      }
-    }
-
-    .hero__body-text {
-      margin-top: var(--space-xs);
-
-      @include breakpoint($breakpoint-medium) {
-        @include space-inline-xs;
-
-        flex: 1 1 50%;
-        order: 2;
-      }
-    }
-
-    .hero__image {
-      flex: 1 1 100%;
-      height: 150px;
-      min-width: 0; // https://github.com/philipwalton/flexbugs/issues/41
-      object-fit: cover;
-      width: 100%;
-
-      @include breakpoint($breakpoint-medium) {
-        flex: 0 0 250px;
-        order: 3;
-      }
-    }
-  }
-}
-
-.hero--tertiary {
-  background-color: var(--ui-gray-xdark);
-
-  .hero__content {
-    @include wrapper;
-
-    color: var(--ui-white);
-    display: flex;
-    flex-flow: column nowrap;
-    padding: var(--space-l) var(--space);
-
-    /* stylelint-disable */
-    .hero__heading {
-      @include space-stack-s;
-
-      &:last-child {
-        @include space-stack-none;
-      }
-    }
-    /* stylelint-enable */
-    p {
-      @include space-stack-none;
-    }
-  }
-}
-
-.hero--campaign {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  margin-bottom: var(--space-xxl);
-  min-height: 300px;
-  overflow: visible;
-  padding: var(--space-l);
-  position: relative;
-
-  @include breakpoint($breakpoint-medium) {
-    padding: 0;
-  }
-
-  .hero__content {
-    align-items: center;
-    background-color: var(--ui-black);
-    color: var(--ui-white);
-    display: flex;
-    flex-flow: column nowrap;
-    min-height: 320px;
-
-    .interior {
-      flex: 0 0 100%;
-      padding: var(--space-l);
-
-      @include breakpoint($breakpoint-medium) {
-        flex: 0 0 50%;
-        max-width: 960px;
-      }
-    }
-
-    a {
-      color: inherit;
-      display: inline-block;
-    }
-
-    @include breakpoint($breakpoint-medium) {
-      flex: 0 0 90%;
-      flex-flow: row nowrap;
-      max-width: var(--breakpoint-xl);
-      position: relative;
-      top: var(--space-xxl);
-    }
-
-    + .placeholder {
-      flex: 0 1 200px;
-      margin-left: var(--space-xl);
-    }
-  }
-
-  /* stylelint-disable */
-  .hero__image {
-    flex: 1 1 100%;
-    min-width: 0; // https://github.com/philipwalton/flexbugs/issues/41
-    object-fit: cover;
-    width: 100%;
-
-    @include breakpoint($breakpoint-medium) {
-      flex: 0 0 50%;
-      height: 320px;
-    }
-  }
-}

package/src/components/Icons/_Icons.scss

@@ -1,116 +0,0 @@
-@mixin icon {
-  display: inline-block;
-  fill: currentColor;
-  height: 24px;
-  width: 24px;
-
-  // ROTATION
-  &--rotate-180 {
-    transform: rotate(180deg);
-  }
-
-  &--rotate-270 {
-    transform: rotate(270deg);
-  }
-
-  &--rotate-0 {
-    transform: rotate(0deg);
-  }
-
-  &--rotate-90 {
-    transform: rotate(90deg);
-  }
-
-  // ALIGNMENT SPACING
-  &--left {
-    margin-right: var(--space-xxs);
-  }
-
-  &--right {
-    margin-left: var(--space-xxs);
-  }
-
-  // SIZE
-  &--xxxlarge {
-    height: var(--space-xxl);
-    width: var(--space-xxl);
-  }
-
-  &--xxlarge {
-    height: var(--space-xl);
-    width: var(--space-xl);
-  }
-
-  &--xlarge {
-    height: var(--space-l);
-    width: var(--space-l);
-  }
-
-  &--large {
-    height: var(--space-m);
-    width: var(--space-m);
-  }
-
-  &--medium {
-    height: 1.125rem;
-    width: 1.125rem;
-  }
-
-  &--small {
-    height: 0.875rem;
-    width: 0.875rem;
-  }
-
-  // FILL COLOR
-  &--ui-black {
-    fill: $black;
-  }
-
-  &--ui-white {
-    fill: $white;
-  }
-
-  &--brand-primary {
-    fill: $brand-primary;
-  }
-
-  &--brand-secondary {
-    fill: $brand-secondary;
-  }
-
-  &--section-whats-on-primary {
-    fill: $whats-on-primary;
-  }
-
-  &--section-books-and-more-primary {
-    fill: $books-and-more-primary;
-  }
-
-  &--section-research-primary {
-    fill: $research-primary;
-  }
-
-  &--section-research-secondary {
-    fill: $research-secondary;
-  }
-
-  &--section-locations-primary {
-    fill: $locations-primary;
-  }
-
-  &--section-research-library-lpa {
-    fill: $research-library-lpa;
-  }
-
-  &--section-research-library-schomburg {
-    fill: $research-library-schomburg;
-  }
-
-  &--section-research-library-schwartzman {
-    fill: $research-library-schwartzman;
-  }
-}
-
-.icon {
-  @include icon;
-}

package/src/components/Label/_Label.scss

@@ -1,22 +0,0 @@
-.label {
-  @include space-stack-xs;
-
-  align-items: baseline;
-  display: flex;
-  font-weight: 500;
-  justify-content: space-between;
-
-  &__required-helper {
-    font-size: var(--font-size--1);
-    font-weight: 300;
-  }
-}
-
-.fieldset {
-  @include fieldset-reset;
-}
-
-.legend {
-  border: 0;
-  font-weight: 500;
-}

package/src/components/Link/_Link.scss

@@ -1,73 +0,0 @@
-@mixin link {
-  color: var(--ui-link-primary);
-
-  &--no-underline {
-    text-decoration: none;
-  }
-
-  &:hover {
-    color: var(--ui-link-secondary);
-  }
-
-  // .button links have a blue background
-  &.button {
-    color: var(--ui-white);
-  }
-
-  &[role="button"] {
-    cursor: pointer;
-  }
-
-  &--dark-background {
-    color: var(--ui-white);
-
-    &:hover {
-      color: var(--ui-gray-light);
-    }
-  }
-}
-
-@mixin more-link {
-  align-items: center;
-  color: var(--ui-link-primary);
-  display: inline-flex;
-  justify-content: space-between;
-  text-decoration: underline;
-
-  &:hover {
-    color: var(--ui-link-secondary);
-    text-decoration: underline;
-  }
-
-  &__icon {
-    @include icon;
-
-    height: var(--space-s);
-    text-decoration: none;
-    width: var(--space-s);
-
-    &--left {
-      margin-right: var(--space-xs);
-    }
-
-    &--right {
-      margin-left: var(--space-xs);
-    }
-
-    svg {
-      height: 100%;
-      width: 100%;
-    }
-  }
-}
-
-.nypl-ds {
-  a,
-  .link {
-    @include link;
-  }
-}
-
-.more-link {
-  @include more-link;
-}

package/src/components/SearchBar/_SearchBar.scss

@@ -1,16 +0,0 @@
-.search-bar {
-  display: flex;
-  flex-flow: column nowrap;
-
-  @include breakpoint($breakpoint-medium) {
-    flex-flow: row nowrap;
-  }
-
-  .select {
-    flex: 1 1 25%;
-  }
-
-  .button {
-    @include space-stack-xs;
-  }
-}

package/src/components/Select/_Select.scss

@@ -1,82 +0,0 @@
-// CSS-only select styling (from https://github.com/filamentgroup/select-css)
-.select {
-  @include space-stack-xs;
-
-  .selectfield {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    appearance: none;
-    background-color: var(--ui-white);
-    /* Arrow svg */
-    /* More info here: https://css-tricks.com/probably-dont-base64-svg/ */
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M10.526 12.871L.263 1.676 1.737.324 12 11.52 22.263.324l1.474 1.352L13.474 12.87a2 2 0 01-2.948 0z'/%3E%3C/svg%3E");
-    background-position: right 0.7em top 70%;
-    background-repeat: no-repeat;
-    background-size: var(--space) auto;
-    border: 1px solid var(--ui-gray-medium);
-    border-radius: 2px;
-    display: block;
-    font-size: 1rem;
-    padding: var(--space-xs) var(--space-xl) var(--space-xs) var(--space-s);
-    width: 100%;
-
-    /* Hide arrow icon in IE browsers */
-    &::-ms-expand {
-      display: none;
-    }
-
-    &:hover {
-      border-color: var(--ui-gray-medium);
-    }
-
-    &:active,
-    &:focus {
-      border: 1px solid var(--ui-focus);
-      box-shadow: 0;
-      outline: 1px solid var(--ui-focus);
-      z-index: 9999;
-    }
-
-    &:disabled {
-      background-color: var(--ui-gray-xxlight);
-      color: var(--ui-gray-xdark);
-    }
-
-    &--error {
-      border: 1px solid var(--ui-error);
-
-      &:hover,
-      &:active,
-      &:focus,
-      &:active:hover,
-      &:focus:hover {
-        border: 1px solid var(--ui-error);
-      }
-    }
-  }
-
-  > .helper-text {
-    margin-bottom: 0;
-    margin-top: var(--space-xs);
-  }
-}
-
-/* Support for rtl text, explicit support for Arabic and Hebrew */
-*[dir="rtl"] .nypl-ds .select,
-:root:lang(ar) .nypl-ds .select,
-:root:lang(iw) .nypl-ds .select {
-  background-position: left 0.7em top 70%;
-  padding: var(--space-xs) var(--space-l) var(--space-xs) var(--space-s);
-}
-
-/* Disabled styles */
-.select-css:disabled,
-.select-css[aria-disabled="true"] {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.526 12.871L.263 1.676 1.737.324 12 11.52 22.263.324l1.474 1.352L13.474 12.87a2 2 0 01-2.948 0z'/%3E%3C/svg%3E");
-  color: var(--ui-gray-xdark);
-}
-
-.select-css:disabled:hover,
-.select-css[aria-disabled="true"] {
-  border-color: #aaa;
-}

package/src/components/StatusBadge/StatusBadge.stories.tsx

@@ -1,34 +0,0 @@
-import * as React from "react";
-
-import { Story } from "@storybook/react/types-6-0";
-import StatusBadge, { StatusBadgeProps } from "./StatusBadge";
-import { withDesign } from "storybook-addon-designs";
-import { getCategory } from "../../utils/componentCategories";
-
-export default {
-  title: getCategory("StatusBadge"),
-  component: StatusBadge,
-  decorators: [withDesign],
-};
-
-const StatusBadgeTemplate: Story<StatusBadgeProps> = (args) => (
-  <StatusBadge {...args} />
-);
-
-export const statusBadge = StatusBadgeTemplate.bind({});
-
-// The `args` allow these props to be updated in the UI through the
-// "Controls" tab.
-statusBadge.args = {
-  children: "Location is temporarily closed",
-};
-
-statusBadge.storyName = "StatusBadge";
-statusBadge.parameters = {
-  design: {
-    type: "figma",
-    url:
-      "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=11256%3A0",
-  },
-  jest: ["StatusBadge.test.tsx"],
-};

package/src/components/StatusBadge/_StatusBadge.scss

@@ -1,23 +0,0 @@
-.status-badge {
-  border-radius: var(--space-xxs);
-  color: var(--ui-black);
-  display: block;
-  font-size: var(--font-size--1);
-  font-style: italic;
-  padding: var(--space-xxs) var(--space-xs);
-  text-align: center;
-  width: fit-content;
-  width: -moz-fit-content;
-
-  &--low {
-    background-color: var(--ui-gray-light);
-  }
-
-  &--medium {
-    background-color: #f9e08e;
-  }
-
-  &--high {
-    background-color: #fbe7e1;
-  }
-}