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

package/src/theme/foundations/colors.ts

@@ -2,10 +2,16 @@ import { Colors } from "@chakra-ui/react";
 
 /**
  * Colors taken from "../../styles/01-colors/*.scss"
+ *
  * All UI colors can be found in Storybook:
- *   https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/style-guide-colors--colors-utility
+ *   https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/documentation-style-guide-colors--colors-utility
+ * and in Figma:
+ *   https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=14989%3A37
+ *
  * All Brand colors can be found in Storybook:
- *   https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/style-guide-colors--colors-brand
+ *   https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/documentation-style-guide-colors--colors-brand
+ * and in Figma:
+ *   https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=15454%3A47007
  *
  * At the end of this file, there are objects that extend Chakra's default
  * color shade palette for individual colors. WE DO NOT RECOMMEND to use them
@@ -14,8 +20,9 @@ import { Colors } from "@chakra-ui/react";
  */
 
 // Reusable variables:
-const grayLight = "#E0E0E0";
-const grayxxlight = "#FAFAFA";
+const grayLightCool = "#E0E0E0";
+const grayxxLightCool = "#FAFAFA";
+const grayMedium = "#BDBDBD";
 const brandPrimary = "#C60917";
 const brandSecondary = "#760000";
 const brandObj = {
@@ -32,10 +39,13 @@ const colors: Colors = {
     white: "#fff",
     /// State and link utilities
     disabled: {
-      primary: grayLight,
-      secondary: grayxxlight,
+      primary: grayLightCool,
+      secondary: grayxxLightCool,
+    },
+    error: {
+      primary: "#97272C",
+      secondary: "#6F0106",
     },
-    error: "#97272C",
     focus: "#4181F1",
     link: {
       primary: "#0576D3",
@@ -58,12 +68,12 @@ const colors: Colors = {
     gray: {
       xdark: "#424242",
       dark: "#616161",
-      medium: "#BDBDBD",
-      light: grayLight,
-      "warm-light": "#EFEDEB",
-      xlight: "#F5F5F5",
-      "warm-xlight": "#F8F8F7",
-      xxlight: grayxxlight,
+      medium: grayMedium,
+      "light-cool": grayLightCool,
+      "light-warm": "#EFEDEB",
+      "x-light-cool": "#F5F5F5",
+      "x-light-warm": "#F8F8F7",
+      "xx-light-cool": grayxxLightCool,
     },
   },
 
@@ -92,6 +102,12 @@ const colors: Colors = {
      * the exceptions of some research libraries. */
     locations: brandObj,
 
+    /** Blogs is used for the Blogs section. */
+    blogs: {
+      primary: grayLightCool,
+      secondary: grayMedium,
+    },
+
     /** Research libraries with specific brand colors to adhere to. */
     "research-library": {
       lpa: "#005d53",

package/src/theme/foundations/global.ts

@@ -10,6 +10,9 @@ const global = {
     bg: "ui.white",
     color: "ui.black",
     fontFamily: "body",
+    fontSize: 0,
+    fontWeight: "300",
+    lineHeight: "1.5",
   },
   // styles for the `a` element
   a: {

package/src/theme/foundations/shadows.ts

@@ -0,0 +1,5 @@
+const shadows = {
+  outline: "none",
+};
+
+export default shadows;

package/src/theme/index.ts

@@ -1,15 +1,31 @@
 import { extendTheme } from "@chakra-ui/react";
-import colors from "./foundations/colors";
+/** Global theme styles */
 import global from "./foundations/global";
-import typography from "./foundations/typography";
-import { spacing } from "./foundations/spacing";
 import breakpoints from "./foundations/breakpoints";
+import colors from "./foundations/colors";
+import shadows from "./foundations/shadows";
+import { spacing } from "./foundations/spacing";
+import typography from "./foundations/typography";
+/** Component styles */
+import Accordion from "./components/accordion";
+import Breadcrumb from "./components/breadcrumb";
 import Button from "./components/button";
 import Checkbox from "./components/checkbox";
-import Radio from "./components/radio";
+import CustomCheckboxGroup from "./components/customCheckboxGroup";
 import CustomRadioGroup from "./components/customRadioGroup";
-import Tabs from "./components/tabs";
+import CustomSelect from "./components/select";
 import Heading from "./components/heading";
+import Hero from "./components/hero";
+import Icon from "./components/icon";
+import Label from "./components/label";
+import Link from "./components/link";
+import Radio from "./components/radio";
+import SearchBar from "./components/searchBar";
+import StatusBadge from "./components/statusBadge";
+import Tabs from "./components/tabs";
+import TemplateStyles from "./components/template";
+import Text from "./components/text";
+import TextInput from "./components/textInput";
 
 /**
  * See Chakra default theme for shape of theme object:
@@ -33,19 +49,33 @@ const theme = extendTheme({
   styles: { global },
   breakpoints,
   colors,
-  ...typography,
+  shadows,
   space: spacing,
+  ...typography,
   /**
    * Chakra documentation on component styles:
    * https://chakra-ui.com/docs/theming/component-style
    */
   components: {
+    Accordion,
+    Breadcrumb,
     Button,
     Checkbox,
+    CustomCheckboxGroup,
+    CustomRadioGroup,
+    CustomSelect,
     Heading,
+    Hero,
+    Icon,
+    Label,
+    Link,
     Radio,
-    CustomRadioGroup,
+    SearchBar,
+    StatusBadge,
     Tabs,
+    ...TemplateStyles,
+    Text,
+    TextInput,
   },
   // Chakra prefixes its own CSS variables with `--chakra` by default but this
   // can be updated to be anything we want. This can be "nypl" to have the

package/src/utils/componentCategories.ts

@@ -64,6 +64,7 @@ const categories = {
       "Header",
       "HorizontalRule",
       "Section",
+      "SimpleGrid",
       "Template",
     ],
   },
@@ -88,11 +89,16 @@ const categories = {
   },
   chakra: {
     title: "Chakra/Layout",
-    components: ["Box", "Center, Circle, Square", "Stack, HStack, VStack"],
+    components: [
+      "Box",
+      "Grid",
+      "Center, Circle, Square",
+      "Stack, HStack, VStack",
+    ],
   },
   typography: {
     title: "Components/Typography & Styles",
-    components: ["Heading", "List"],
+    components: ["Heading", "List", "Text"],
   },
   devguide: {
     title: "Documentation/Development Guide",

package/src/utils/utils.ts

@@ -14,3 +14,16 @@ export const range = (start: number, stop: number, step = 1): number[] => {
     .fill(start)
     .map((x, y) => x + y * step);
 };
+
+/**
+ * Map an enum value to a component's Chakra theme variant object. If a wrong
+ * value is passed (typically in non-Typescript scenarios), then the "fallback"
+ * value, if provided, will be used.
+ */
+export const getVariant = (variant, collection, fallback = null) => {
+  const variantMap = {};
+  for (const type in collection) {
+    variantMap[collection[type]] = collection[type];
+  }
+  return variantMap[variant] || fallback;
+};

package/dist/components/Accordion/Accordion.stories.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export declare const AccordionAsFAQSet: any;
-export declare const AccordionScroll: {
-    (_props: any): JSX.Element;
-    storyName: string;
-};

package/dist/components/StatusBadge/StatusBadge.stories.d.ts

@@ -1,8 +0,0 @@
-import StatusBadge from "./StatusBadge";
-declare const _default: {
-    title: any;
-    component: typeof StatusBadge;
-    decorators: ((...args: any) => any)[];
-};
-export default _default;
-export declare const statusBadge: any;

package/dist/components/StyleGuide/Colors.stories.d.ts

@@ -1,25 +0,0 @@
-/// <reference types="react" />
-declare const _default: {
-    title: any;
-};
-export default _default;
-export declare const colorsBrand: {
-    (): JSX.Element;
-    storyName: string;
-    parameters: {
-        design: {
-            type: string;
-            url: string;
-        };
-    };
-};
-export declare const colorsUtility: {
-    (): JSX.Element;
-    storyName: string;
-    parameters: {
-        design: {
-            type: string;
-            url: string;
-        };
-    };
-};

package/dist/components/Template/Template.stories.d.ts

@@ -1,30 +0,0 @@
-/// <reference types="react" />
-import { Meta } from "@storybook/react/types-6-0";
-declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
-export default _default;
-export declare const Template: {
-    ({ showSidebar, sidebarSide }: {
-        showSidebar: any;
-        sidebarSide: any;
-    }): JSX.Element;
-    args: {
-        showSidebar: boolean;
-        sidebarSide: string;
-    };
-    argTypes: {
-        sidebarSide: {
-            control: {
-                type: string;
-                options: string[];
-            };
-        };
-    };
-    storyName: string;
-    parameters: {
-        design: {
-            type: string;
-            url: string;
-        };
-        layout: string;
-    };
-};

package/src/components/Accordion/Accordion.stories.tsx

@@ -1,66 +0,0 @@
-import * as React from "react";
-
-import Accordion from "./Accordion";
-import List from "../List/List";
-import { ListTypes } from "../List/ListTypes";
-import Link from "../Link/Link";
-import { listRenderer as ListStory } from "../List/List.stories";
-import { range } from "../../utils/utils";
-
-// Set up the reusable template to create a list of Accordion components.
-const AccordionListTemplate = ({ count, children, ...args }) => (
-  <List type={ListTypes.Unordered} modifiers={["no-list-styling"]}>
-    {range(1, count + 1).map((i) => (
-      <li key={i}>
-        <Accordion {...args} inputId={`${args.inputId}-${i}`}>
-          {children}
-        </Accordion>
-      </li>
-    ))}
-  </List>
-);
-
-const faqContent = (
-  <>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit
-      amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-      labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur
-      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-      magna aliqua.
-    </p>
-
-    <p>
-      <Link href="#">Learn More</Link>
-    </p>
-  </>
-);
-
-// This is one specific story where it will render a list of FAQs.
-export const AccordionAsFAQSet = AccordionListTemplate.bind({});
-AccordionAsFAQSet.args = {
-  accordionLabel: "FAQ Question Lorem Ipsum",
-  modifiers: ["faq"],
-  inputId: "accordionBtn",
-  children: faqContent,
-  count: 3,
-};
-
-// One accordion with scrollable list
-export const AccordionScroll = (_props) => (
-  <>
-    <div style={{ maxHeight: "300px", width: "500px" }}>
-      <Accordion
-        accordionLabel={"Content"}
-        modifiers={["fixed-height"]}
-        defaultOpen={true}
-      >
-        <ListStory type={ListTypes.Unordered} />
-      </Accordion>
-    </div>
-    <div>Example content underneath</div>
-  </>
-);
-
-AccordionScroll.storyName = "Accordion with Scrollable Content";

package/src/components/Accordion/_Accordion.scss

@@ -1,81 +0,0 @@
-.accordion {
-  border: 1px solid var(--ui-gray-medium);
-  color: inherit;
-  width: 100%;
-
-  &--fixed-height {
-    display: flex;
-    flex-direction: column;
-    max-height: inherit;
-  }
-
-  &__content {
-    display: none;
-    padding: var(--space-xxs) var(--space-xxxl) var(--space-xs) var(--space-s);
-    transition: all 0.35s;
-  }
-
-  &__label {
-    @include button--outline;
-
-    align-items: center;
-    border: none;
-    cursor: pointer;
-    font-weight: 500;
-    justify-content: space-between;
-
-    .icon--minus {
-      display: none;
-    }
-
-    &:focus {
-      position: relative;
-    }
-
-    &:hover {
-      background-color: var(--ui-gray-light);
-    }
-
-    &--faq {
-      font-size: var(--font-size-1);
-      padding: var(--space-s);
-    }
-  }
-
-  &__input {
-    opacity: 0;
-    position: absolute;
-    z-index: -1;
-
-    &:focus {
-      + .accordion__label {
-        @include focus-outline;
-      }
-    }
-
-    &:checked {
-      + .accordion__label .icon--minus {
-        display: inline;
-      }
-
-      + .accordion__label .icon--plus {
-        display: none;
-      }
-
-      ~ .accordion__content {
-        display: inline-block;
-
-        &--fixed-height {
-          // Adds margin so that content always appears outside the focus ring
-          margin-top: var(--space-xxs);
-          overflow-y: auto;
-        }
-      }
-    }
-  }
-
-  // Eliminates the double border on accordion sets in ul-lis
-  li:not(:first-of-type) & {
-    margin-top: -1px;
-  }
-}

package/src/components/Breadcrumbs/_Breadcrumbs.scss

@@ -1,97 +0,0 @@
-.breadcrumbs {
-  background-color: var(--ui-black);
-  padding-bottom: var(--space-xs);
-  padding-top: var(--space-xs);
-
-  &__item {
-    @include space-inline-xxs;
-
-    align-items: center;
-    display: inline;
-    font-size: var(--font-size--1);
-    line-height: 1.5;
-    position: relative;
-    word-break: break-word;
-
-    &:not(:last-child) {
-      &::after {
-        content: "/";
-        padding-left: var(--space-xxs);
-      }
-
-      display: none;
-
-      @include breakpoint($breakpoint-medium) {
-        display: inline;
-      }
-    }
-
-    &:last-child {
-      display: block;
-      padding-left: var(--space-m);
-
-      @include breakpoint($breakpoint-medium) {
-        display: inline;
-        padding-left: 0;
-      }
-    }
-  }
-
-  &__icon {
-    @include icon;
-
-    left: 0;
-    position: absolute;
-    top: 50%;
-    transform: rotate(90deg) translateX(-50%);
-
-    @include breakpoint($breakpoint-medium) {
-      display: none;
-    }
-  }
-
-  &__link,
-  &__link:link,
-  &__link:visited,
-  &__link:focus {
-    color: var(--ui-white);
-    text-decoration: none;
-  }
-
-  &__item a:hover {
-    color: var(--ui-gray-light);
-    text-decoration: underline;
-  }
-
-  &__list {
-    @include list-reset;
-    @include wrapper;
-
-    color: var(--ui-white);
-  }
-
-  .nypl--books-and-more & {
-    background-color: var(--section-books-and-more-secondary);
-  }
-
-  .nypl--locations & {
-    background-color: var(--section-locations-secondary);
-  }
-
-  .nypl--research & {
-    background-color: var(--section-research-secondary);
-  }
-
-  .nypl--whats-on & {
-    background-color: var(--section-whats-on-secondary);
-  }
-}
-
-.storybook-breadcrumbsExample {
-  .breadcrumbs {
-    flex: 1 1 50%;
-    margin-left: unset;
-    margin-right: var(--space-l);
-    max-height: 42px;
-  }
-}

package/src/components/Form/_Form.scss

@@ -1,67 +0,0 @@
-@mixin form-space-classes($map) {
-  @each $name, $id in $map {
-    &--spacing-#{$name} {
-      .form-field {
-        @include get-space-stack($id);
-      }
-
-      .form-row {
-        @include get-space-stack($id);
-
-        .form-field {
-          @include breakpoint($breakpoint-medium) {
-            &:not(:last-child) {
-              @include get-space-inline($id);
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-$sizes: (
-  "extra-extra-small": "xxs",
-  "extra-small": "xs",
-  "small": "s",
-  "medium": "m",
-  "large": "l",
-  "extra-large": "xl",
-);
-
-.form {
-  > .form-field {
-    &:not(:last-child) {
-      @include space-stack-l;
-    }
-  }
-
-  > .form-row {
-    &:not(:last-child) {
-      @include space-stack-l;
-    }
-
-    display: block;
-
-    @include breakpoint($breakpoint-medium) {
-      display: flex;
-    }
-
-    .form-field {
-      &:not(:last-child) {
-        @include space-stack-l;
-      }
-
-      @include breakpoint($breakpoint-medium) {
-        flex: 1 0;
-
-        &:not(:last-child) {
-          @include space-inline-l;
-          @include space-stack-none;
-        }
-      }
-    }
-  }
-
-  @include form-space-classes($sizes);
-}