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

package/src/utils/componentCategories.ts

@@ -1,42 +1,38 @@
 // NYPL Design System Component Categories
 
 const categories = {
-  content: {
-    title: "Content Display",
+  basicContent: {
+    title: "Components/Basic Elements",
+    components: ["Card", "CardEdition", "Hero", "Promo", "Sponsor", "Table"],
+  },
+  contentDisplay: {
+    title: "Components/Content Display",
     components: [
       "AccessibilityDisplayHelper",
-      "Accordion",
       "AddressDisplayHelper",
-      "Card",
-      "ContentSwitcher",
       "DateDisplayHelper",
-      "DefinitionList",
-      "Heading",
-      "Hero",
+      "HelperErrorText",
       "HoursDisplayHelper",
-      "List",
-      "Modal",
       "OverflowMenu",
-      "Promo",
+      "StatusBadge",
     ],
   },
   deprecated: {
-    title: "Deprecated",
+    title: "Components/Deprecated",
     components: [],
   },
   feedback: {
-    title: "Feedback",
+    title: "Components/Feedback",
     components: [
       "Alert",
       "InlineLoading",
       "Notification",
       "ProgressIndicator",
       "SkeletonLoader",
-      "Tooltip",
     ],
   },
   forms: {
-    title: "Form Elements",
+    title: "Components/Form Elements",
     components: [
       "Button",
       "Checkbox",
@@ -59,24 +55,63 @@ const categories = {
     ],
   },
   layout: {
-    title: "Page Layout",
-    components: ["BasicPageSection", "Footer", "Grid", "Header", "Template"],
+    title: "Components/Page Layout",
+    components: [
+      "BasicPageSection",
+      "ContentSwitcher",
+      "Footer",
+      "Grid",
+      "Header",
+      "HorizontalRule",
+      "Section",
+      "SimpleGrid",
+      "Template",
+    ],
+  },
+  overlayContentSwitcher: {
+    title: "Components/Overlays & Switchers",
+    components: ["Accordion", "Modal", "Tabs", "Tooltip"],
   },
   media: {
-    title: "Media",
-    components: ["AudioPlayer", "Icon", "Image", "Logo", "Slideshow", "Video"],
+    title: "Components/Media & Icons",
+    components: [
+      "AudioPlayer",
+      "Icon",
+      "Image",
+      "Logo",
+      "Slideshow",
+      "VideoPlayer",
+    ],
   },
   navigation: {
-    title: "Navigation",
+    title: "Components/Navigation",
     components: ["Breadcrumbs", "Link", "Menu", "Pagination", "Subnavigation"],
   },
+  chakra: {
+    title: "Chakra/Layout",
+    components: [
+      "Box",
+      "Grid",
+      "Center, Circle, Square",
+      "Stack, HStack, VStack",
+    ],
+  },
+  typography: {
+    title: "Components/Typography & Styles",
+    components: ["Heading", "List", "Text"],
+  },
+  devguide: {
+    title: "Documentation/Development Guide",
+    components: ["Autosuggest"],
+  },
   styleguide: {
-    title: "Style Guide",
+    title: "Documentation/Style Guide",
     components: [
       "Bidirectionality",
       "Breakpoints",
       "Buttons",
       "Colors",
+      "Forms",
       "Iconography",
       "Spacing",
       "Template Bidirectionality",

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,5 +0,0 @@
-export declare const AccordionAsFAQSet: any;
-export declare const AccordionScroll: {
-    (_props: any): JSX.Element;
-    storyName: string;
-};

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

@@ -1,27 +0,0 @@
-import Card from "./Card";
-declare const _default: {
-    title: string;
-    component: typeof Card;
-};
-export default _default;
-export declare const card: {
-    (): JSX.Element;
-    storyName: string;
-    parameters: {
-        design: {
-            type: string;
-            url: string;
-        };
-    };
-};
-export declare const ExampleCard: {
-    (): JSX.Element;
-    storyName: string;
-    parameters: {
-        design: {
-            type: string;
-            url: string;
-        };
-        jest: string[];
-    };
-};

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

@@ -1,12 +0,0 @@
-import Label from "../Label/Label";
-declare const _default: {
-    title: any;
-    component: typeof Label;
-};
-export default _default;
-export declare const label: {
-    (): JSX.Element;
-    parameters: {
-        jest: string[];
-    };
-};

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

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

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

@@ -1,29 +0,0 @@
-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,65 +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";
-
-// 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"]}>
-    {new Array(count).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/Checkbox/_Checkbox.scss

@@ -1,97 +0,0 @@
-$checkbox-size: to-rem(22px);
-$checkmark-color: $focus;
-$checkmark-color-error: $error;
-$checkmark-color-disabled: $gray-dark;
-
-.input {
-  &__checkbox {
-    -webkit-appearance: none;
-    border: 2px solid $black;
-    border-radius: 3px;
-    display: inline-block;
-    height: $checkbox-size;
-    outline: none;
-    position: relative;
-    vertical-align: middle;
-    width: $checkbox-size;
-
-    &:before {
-      content: "";
-      display: block;
-      height: $checkbox-size;
-      left: 50%;
-      position: absolute;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      width: $checkbox-size;
-    }
-
-    &:checked {
-      border: 2px solid $focus;
-
-      &:before {
-        background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#{url-friendly-colour($checkmark-color)}" d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"/></svg>')
-          50% 50% no-repeat;
-      }
-    }
-
-    + 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: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#{url-friendly-colour($checkmark-color-error)}" d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"/></svg>')
-            50% 50% no-repeat;
-        }
-      }
-    }
-
-    &:disabled {
-      border-color: $gray-medium;
-
-      &:checked {
-        border-color: $gray-medium;
-
-        &:before {
-          background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#{url-friendly-colour($checkmark-color-disabled)}" d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"/></svg>')
-            50% 50% no-repeat;
-        }
-      }
-
-      + label {
-        color: $gray-dark;
-        font-style: italic;
-
-        + .helper-text {
-          color: $gray-dark;
-          font-style: italic;
-        }
-      }
-    }
-  }
-}

package/src/components/Form/_Form.scss

@@ -1,28 +0,0 @@
-.form {
-  @include space-stack-s;
-}
-
-.form-field {
-  @include space-stack-l;
-}
-
-.form-row {
-  @include space-stack-l;
-
-  display: block;
-
-  @include breakpoint($breakpoint-medium) {
-    display: flex;
-  }
-
-  .form-field {
-    @include breakpoint($breakpoint-medium) {
-      flex: 1 0;
-      margin-bottom: 0;
-
-      &:not(:last-child) {
-        @include space-inline-l;
-      }
-    }
-  }
-}