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

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/SkeletonLoader/_SkeletonLoader.scss

@@ -1,142 +0,0 @@
-@mixin skeleton-highlight {
-  animation: Pulsate 1000ms cubic-bezier(0.25, -0.5, 1, 0) infinite;
-  background: var(--ui-gray-warm-light);
-}
-
-.skeleton-loader {
-  margin: auto;
-  width: 100%;
-
-  .skeleton-section {
-    margin-bottom: var(--space-s);
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .skeleton-element {
-    border-radius: 2px;
-    box-sizing: border-box;
-    margin-bottom: var(--space-xs);
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .skeleton-loader-image {
-    @include skeleton-highlight;
-
-    box-sizing: border-box;
-    height: 0;
-    overflow: hidden;
-    padding-bottom: 100%;
-    position: relative;
-    width: 100%;
-
-    &--square {
-      padding-bottom: 100%;
-    }
-
-    &--portrait {
-      padding-bottom: 200%;
-    }
-
-    &--landscape {
-      padding-bottom: 50%;
-    }
-  }
-
-  .skeleton-loader-heading {
-    @include skeleton-highlight;
-
-    height: 32px;
-
-    &:last-child {
-      width: 80%;
-    }
-  }
-
-  .skeleton-loader-content {
-    @include skeleton-highlight;
-
-    height: 20px;
-
-    &:last-child {
-      width: 30%;
-    }
-  }
-
-  .skeleton-loader-button {
-    @include skeleton-highlight;
-
-    border-radius: 16px;
-    height: 32px;
-    margin: auto;
-    max-width: 160px;
-    width: 100%;
-  }
-
-  &--border {
-    border: 1px solid var(--ui-gray-light);
-    padding: var(--space-s);
-  }
-
-  &--horizontal {
-    @include breakpoint($breakpoint-medium) {
-      display: flex;
-
-      /* stylelint-disable */
-      .skeleton-section {
-        margin-right: var(--space-m);
-
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-
-      > .skeleton-section:first-child {
-        margin-bottom: 0;
-      }
-
-      .skeleton-loader-image {
-        height: 0;
-        overflow: visible;
-        padding-bottom: 0;
-        position: relative;
-        width: 220px;
-
-        &--square {
-          height: 220px;
-        }
-
-        &--portrait {
-          height: 440px;
-        }
-
-        &--landscape {
-          height: 110px;
-        }
-      }
-
-      .skeleton-loader-button {
-        margin: 0;
-      }
-    }
-  }
-}
-
-@keyframes Pulsate {
-  from {
-    opacity: 0.9;
-  }
-
-  50% {
-    opacity: 0.6;
-  }
-
-  to {
-    opacity: 0.9;
-  }
-}

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;
-  }
-}

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

@@ -1,289 +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 { HeadingLevels } from "../Heading/HeadingTypes";
-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={HeadingLevels.One}>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={HeadingLevels.One}>Section Colors</Heading>
-    <Heading level={HeadingLevels.Two}>{"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={HeadingLevels.Two}>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={HeadingLevels.Two}>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={HeadingLevels.Two}>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={HeadingLevels.Two}>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={HeadingLevels.One}>Utility Colors</Heading>
-    <List
-      type={ListTypes.Unordered}
-      modifiers={["no-list-styling"]}
-      className="card-grid__cards"
-    >
-      {uiVariableDocs}
-    </List>
-    <Heading level={HeadingLevels.One}>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,86 +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";
-import { getCategory } from "../../utils/componentCategories";
-
-export default {
-  title: getCategory("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",
-};