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

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

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

package/src/components/TextInput/_TextInput.scss

@@ -1,59 +0,0 @@
-$break-input-mobile: 400px;
-
-.textinput {
-  @include space-stack-xs;
-
-  .inputfield {
-    @include placeholder {
-      color: var(--ui-gray-dark);
-      font-style: italic;
-      line-height: 21px;
-    }
-
-    border: 1px solid var(--ui-gray-medium);
-    padding: var(--space-xs) var(--space-s);
-    width: 100%;
-
-    &--textarea {
-      line-height: 1.5;
-      min-height: var(--space-xxl);
-    }
-
-    &:hover {
-      border-color: var(--ui-gray-dark);
-    }
-
-    &:disabled {
-      background-color: var(--ui-gray-xxlight);
-      color: var(--ui-gray-xdark);
-      pointer-events: none;
-    }
-
-    &:active,
-    &:focus,
-    &:active:hover,
-    &:focus:hover {
-      border: 1px solid var(--ui-focus);
-      box-shadow: 0;
-      outline: 1px solid var(--ui-focus);
-      z-index: 9999;
-    }
-
-    &--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);
-  }
-}