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

package/src/components/Radio/_Radio.scss

@@ -1,84 +0,0 @@
-.radio {
-  -webkit-appearance: none;
-  border: 2px solid $black;
-  border-radius: 50%;
-  display: inline-block;
-  height: 1.375rem;
-  outline: none;
-  position: relative;
-  vertical-align: middle;
-  width: 1.375rem;
-
-  &:before {
-    border-radius: 100%;
-    content: "";
-    display: block;
-    height: 0.75rem;
-    left: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: 0.75rem;
-  }
-
-  &:checked {
-    border-color: $focus;
-
-    &:before {
-      background-color: $focus;
-    }
-  }
-
-  + label {
-    display: inline-block;
-    font-size: var(--font-size-0);
-    font-weight: 300;
-    margin-bottom: 0px;
-    margin-left: var(--space-xs);
-    vertical-align: middle;
-
-    + .helper-text {
-      margin-bottom: 0;
-      margin-left: calc(22px + var(--space-xs));
-      margin-top: var(--space-xs);
-    }
-  }
-
-  &--error {
-    border-color: $error;
-
-    + label {
-      color: $error;
-
-      + .helper-text {
-        color: $error;
-      }
-    }
-
-    &:checked {
-      border-color: $error;
-
-      &:before {
-        background-color: $error;
-      }
-    }
-  }
-
-  &:disabled {
-    border-color: $gray-medium;
-
-    &:before {
-      background-color: $gray-medium;
-    }
-
-    + label {
-      color: $gray-dark;
-      font-style: italic;
-
-      + .helper-text {
-        color: $gray-dark;
-        font-style: italic;
-      }
-    }
-  }
-}

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,33 +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";
-
-export default {
-  title: "Status Badge",
-  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 = "Status Badge";
-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;
-  }
-}

package/src/components/StyleGuide/Colors.stories.tsx

@@ -1,288 +0,0 @@
-import * as React from "react";
-
-import { select } from "@storybook/addon-knobs";
-import cssVariables from "../../helpers/CSSVariablesHelper";
-import getCSSVariable from "../../helpers/getCSSVariable";
-import UIDocCard from "./UIDocCard";
-import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
-import List from "../List/List";
-import Heading from "../Heading/Heading";
-import { ListTypes } from "../List/ListTypes";
-import { CSSVariablesInterface } from "../../interfaces";
-import sections from "../../utils/siteSections";
-import { getCategory } from "../../utils/componentCategories";
-
-export default {
-  title: getCategory("Colors"),
-};
-
-const uiVariables: CSSVariablesInterface = {};
-const grayScaleVariables: CSSVariablesInterface = {};
-
-for (const [key, value] of Object.entries(cssVariables)) {
-  if (key.startsWith(" --ui-gray")) {
-    grayScaleVariables[key] = value;
-  } else if (key.startsWith(" --ui")) {
-    uiVariables[key] = value;
-  }
-}
-
-const uiVariableDocs = [];
-const grayscaleDocs = [];
-
-const makeUIDocCard = function (key, value, docArray: React.ReactElement[]) {
-  docArray.push(
-    <li style={{ textAlign: "center" }}>
-      <UIDocCard backgroundColor={value}>
-        {key}: {value}
-      </UIDocCard>
-    </li>
-  );
-};
-
-for (const [key, value] of Object.entries(uiVariables)) {
-  makeUIDocCard(key, value, uiVariableDocs);
-}
-for (const [key, value] of Object.entries(grayScaleVariables)) {
-  makeUIDocCard(key, value, grayscaleDocs);
-}
-
-const sectionDefault = sections[3];
-
-export const colorsBrand = () => (
-  <>
-    <Heading level={1}>Brand</Heading>
-    <p>Brand fills are the NYPL primary and secondary colors.</p>
-    <List
-      type={ListTypes.Unordered}
-      modifiers={["no-list-styling"]}
-      className="card-grid__cards"
-    >
-      <li style={{ textAlign: "center" }}>
-        <UIDocCard backgroundColor={getCSSVariable("--brand-primary")}>
-          --brand-primary: {getCSSVariable("--brand-primary")}
-        </UIDocCard>
-      </li>
-      <li style={{ textAlign: "center" }}>
-        <UIDocCard backgroundColor={getCSSVariable("--brand-secondary")}>
-          --brand-secondary: {getCSSVariable("--brand-secondary")}
-        </UIDocCard>
-      </li>
-    </List>
-    <Heading level={1}>Section Colors</Heading>
-    <Heading level={2}>{"What's On"}</Heading>
-    <p>
-      Section colors are branding colors only in use at NYPL. Certain
-      components, such as Breadcrumbs below, change color based on the modifier
-      applied the body tag.
-    </p>
-    <div
-      className={
-        select("Section", sections, sectionDefault) +
-        " storybook-breadcrumbsExample"
-      }
-      style={{ marginBottom: "2%", display: "flex", width: "100%" }}
-    >
-      <Breadcrumbs
-        breadcrumbs={[
-          { url: "#", text: "Parent" },
-          { url: "#", text: "Home" },
-        ]}
-      />
-      <div
-        style={{
-          flex: "1 1 50%",
-          backgroundColor: "var(--ui-gray-xlight)",
-          padding: "2%",
-        }}
-      >
-        <pre>
-          <code>
-            {"<div className="}
-            {"'" + select("Section", sections, sectionDefault) + "'"}
-            {">\n"}
-            {"    <Breadcrumbs...></Breadcrumbs>"}
-            {"\n"}
-            {"</div>"}
-          </code>
-        </pre>
-      </div>
-    </div>
-    <p>What's On is used for Events, Exhibitions & Audio Guides.</p>
-    <List
-      type={ListTypes.Unordered}
-      modifiers={["no-list-styling"]}
-      className="card-grid__cards"
-    >
-      <li style={{ textAlign: "center" }}>
-        <UIDocCard
-          backgroundColor={getCSSVariable("--section-whats-on-primary")}
-        >
-          --section-whats-on-primary:{" "}
-          {getCSSVariable("--section-whats-on-primary")}
-        </UIDocCard>
-      </li>
-      <li style={{ textAlign: "center" }}>
-        <UIDocCard
-          backgroundColor={getCSSVariable("--section-whats-on-secondary")}
-        >
-          --section-whats-on-secondary:{" "}
-          {getCSSVariable("--section-whats-on-secondary")}
-        </UIDocCard>
-      </li>
-    </List>
-    <Heading level={2}>Books and More</Heading>
-    <p>
-      Books and More is used for the Catalog, Staff Picks, Recommendations, New
-      Arrivals, and E-Book Central.
-    </p>
-    <List
-      type={ListTypes.Unordered}
-      modifiers={["no-list-styling"]}
-      className="card-grid__cards"
-    >
-      <li style={{ textAlign: "center" }}>
-        <UIDocCard
-          backgroundColor={getCSSVariable("--section-books-and-more-primary")}
-        >
-          --section-books-and-more-primary:{" "}
-          {getCSSVariable("--section-books-and-more-primary")}
-        </UIDocCard>
-      </li>
-      <li style={{ textAlign: "center" }}>
-        <UIDocCard
-          backgroundColor={getCSSVariable("--section-books-and-more-secondary")}
-        >
-          --section-books-and-more-secondary:{" "}
-          {getCSSVariable("--section-books-and-more-secondary")}
-        </UIDocCard>
-      </li>
-    </List>
-    <Heading level={2}>Research</Heading>
-    <p>Research is used for the Research Catalog and SCC.</p>
-    <List
-      type={ListTypes.Unordered}
-      modifiers={["no-list-styling"]}
-      className="card-grid__cards"
-    >
-      <li style={{ textAlign: "center" }}>
-        <UIDocCard
-          backgroundColor={getCSSVariable("--section-research-primary")}
-        >
-          --section-research-primary:{" "}
-          {getCSSVariable("--section-research-primary")}
-        </UIDocCard>
-      </li>
-      <li style={{ textAlign: "center" }}>
-        <UIDocCard
-          backgroundColor={getCSSVariable("--section-research-secondary")}
-        >
-          --section-research-secondary:{" "}
-          {getCSSVariable("--section-research-secondary")}
-        </UIDocCard>
-      </li>
-    </List>
-    <Heading level={2}>Locations</Heading>
-    <p>
-      Locations is used for Location Finder and all branch pages with the
-      exceptions of some research libraries.
-    </p>
-    <List
-      type={ListTypes.Unordered}
-      modifiers={["no-list-styling"]}
-      className="card-grid__cards"
-    >
-      <li style={{ textAlign: "center" }}>
-        <UIDocCard
-          backgroundColor={getCSSVariable("--section-locations-primary")}
-        >
-          --section-locations-primary:{" "}
-          {getCSSVariable("--section-locations-primary")}
-        </UIDocCard>
-      </li>
-      <li style={{ textAlign: "center" }}>
-        <UIDocCard
-          backgroundColor={getCSSVariable("--section-locations-secondary")}
-        >
-          --section-locations-secondary:{" "}
-          {getCSSVariable("--section-locations-secondary")}
-        </UIDocCard>
-      </li>
-    </List>
-    <Heading level={2}>Research Libraries</Heading>
-    <p>Research libraries with specific brand colors to adhere to.</p>
-    <List
-      type={ListTypes.Unordered}
-      modifiers={["no-list-styling"]}
-      className="card-grid__cards"
-    >
-      <li style={{ textAlign: "center" }}>
-        <UIDocCard
-          backgroundColor={getCSSVariable("--section-research-library-lpa")}
-        >
-          --section-research-library-lpa:{" "}
-          {getCSSVariable("--section-research-library-lpa")}
-        </UIDocCard>
-      </li>
-      <li style={{ textAlign: "center" }}>
-        <UIDocCard
-          backgroundColor={getCSSVariable(
-            "--section-research-library-schomburg"
-          )}
-        >
-          --section-research-library-schomburg:{" "}
-          {getCSSVariable("--section-research-library-schomburg")}
-        </UIDocCard>
-      </li>
-      <li style={{ textAlign: "center" }}>
-        <UIDocCard
-          backgroundColor={getCSSVariable(
-            "--section-research-library-schwartzman"
-          )}
-        >
-          --section-research-library-schwartzman:{" "}
-          {getCSSVariable("--section-research-library-schwartzman")}
-        </UIDocCard>
-      </li>
-    </List>
-  </>
-);
-
-colorsBrand.storyName = "Colors—Brand";
-colorsBrand.parameters = {
-  design: {
-    type: "figma",
-    url:
-      "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=15454%3A47007",
-  },
-};
-
-export const colorsUtility = () => (
-  <>
-    <Heading level={1}>Utility Colors</Heading>
-    <List
-      type={ListTypes.Unordered}
-      modifiers={["no-list-styling"]}
-      className="card-grid__cards"
-    >
-      {uiVariableDocs}
-    </List>
-    <Heading level={1}>Grayscale</Heading>
-    <List
-      type={ListTypes.Unordered}
-      modifiers={["no-list-styling"]}
-      className="card-grid__cards"
-    >
-      {grayscaleDocs}
-    </List>
-  </>
-);
-
-colorsUtility.storyName = "Colors—Utility";
-colorsUtility.parameters = {
-  design: {
-    type: "figma",
-    url:
-      "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=14989%3A37",
-  },
-};

package/src/components/Template/Template.stories.tsx

@@ -1,85 +0,0 @@
-import * as React from "react";
-import bem from "../../utils/bem";
-import Placeholder from "../Placeholder/Placeholder";
-import { withDesign } from "storybook-addon-designs";
-import { Meta } from "@storybook/react/types-6-0";
-
-export default {
-  title: "Template",
-  decorators: [withDesign],
-} as Meta;
-
-export const Template = ({ showSidebar, sidebarSide }) => (
-  <>
-    <div className={bem("layout-container nypl-ds")}>
-      <header className={bem("header")}>
-        <Placeholder modifiers={["short"]}>NYPL Header</Placeholder>
-
-        <div className="content-header">
-          {<Placeholder modifiers={["short"]}>Breadcrumbs</Placeholder>}
-          {<Placeholder modifiers={["short"]}>Hero</Placeholder>}
-        </div>
-      </header>
-
-      <main className={showSidebar ? bem("main", ["with-sidebar"]) : "main"}>
-        <div className="content-top">
-          {<Placeholder>Content Top</Placeholder>}
-        </div>
-
-        {showSidebar && sidebarSide === "left" && (
-          <div className={bem("content-secondary", ["with-sidebar-left"])}>
-            <Placeholder>Left Sidebar</Placeholder>
-          </div>
-        )}
-
-        {showSidebar && sidebarSide === "left" && (
-          <div className={bem("content-primary", ["with-sidebar-left"])}>
-            <Placeholder>Main Content</Placeholder>
-            <div className="content-bottom">
-              {<Placeholder>Content Bottom</Placeholder>}
-            </div>
-          </div>
-        )}
-        {showSidebar && sidebarSide === "right" && (
-          <div className={bem("content-primary", ["with-sidebar-right"])}>
-            <Placeholder>Main Content</Placeholder>
-            <div className="content-bottom">
-              {<Placeholder>Content Bottom</Placeholder>}
-            </div>
-          </div>
-        )}
-        {!showSidebar && (
-          <div className={bem("content-primary")}>
-            <Placeholder>Main Content</Placeholder>
-            <div className="content-bottom">
-              {<Placeholder>Content Bottom</Placeholder>}
-            </div>
-          </div>
-        )}
-
-        {showSidebar && sidebarSide === "right" && (
-          <div className={bem("content-secondary", ["with-sidebar-right"])}>
-            <Placeholder>Right Sidebar</Placeholder>
-          </div>
-        )}
-      </main>
-    </div>
-    <footer className={bem("footer")}>
-      <Placeholder>Footer</Placeholder>
-    </footer>
-  </>
-);
-
-Template.args = { showSidebar: true, sidebarSide: "left" };
-Template.argTypes = {
-  sidebarSide: { control: { type: "select", options: ["left", "right"] } },
-};
-Template.storyName = "Template";
-Template.parameters = {
-  design: {
-    type: "figma",
-    url:
-      "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11982%3A47778",
-  },
-  layout: "fullscreen",
-};

package/src/components/Template/_Template.scss

@@ -1,63 +0,0 @@
-$sidebar-width: 25%;
-$sidebar-width-s: calc(25% - calc(4 * var(--space-s)));
-
-.main {
-  @include wrapper;
-
-  display: block; // Fix for IE weirdness
-
-  &--with-sidebar {
-    display: flex;
-    flex-flow: column nowrap;
-
-    @include breakpoint($breakpoint-medium) {
-      flex-flow: row wrap;
-    }
-  }
-}
-
-.content-header {
-  @include breakout;
-
-  width: 100vw;
-}
-
-.content-top {
-  flex: 1 0 100%;
-}
-
-.content-primary {
-  flex: 1 1;
-  width: 100%;
-
-  &--with-sidebar-left {
-    display: flex;
-    flex-flow: column nowrap;
-    order: 1;
-
-    @include breakpoint($breakpoint-medium) {
-      @include space-inline-none;
-
-      min-width: 0;
-    }
-  }
-}
-
-.content-secondary {
-  flex: 0 0 $sidebar-width;
-
-  @include breakpoint($breakpoint-medium) {
-    order: 1;
-
-    &--with-sidebar-left {
-      @include space-inline-l;
-
-      flex-basis: $sidebar-width-s;
-    }
-
-    &--with-sidebar-right {
-      flex-basis: $sidebar-width-s;
-      margin-left: var(--space-l);
-    }
-  }
-}