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

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/HelperErrorText/HelperErrorText.stories.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import HelperErrorText from "./HelperErrorText";
-declare const _default: {
-    title: any;
-    component: typeof HelperErrorText;
-};
-export default _default;
-export declare const helperTextWithLink: {
-    (): JSX.Element;
-    parameters: {
-        jest: string[];
-    };
-};
-export declare const errorText: () => JSX.Element;
-export declare const longHelperText: () => JSX.Element;
-export declare const withAriaProps: () => JSX.Element;

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

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-import Image from "./Image";
-declare const _default: {
-    title: any;
-    component: typeof Image;
-};
-export default _default;
-export declare const ImageWithOptionalCaptionandCredit: {
-    (): JSX.Element;
-    storyName: string;
-    parameters: {
-        design: {
-            type: string;
-            url: string;
-        };
-        jest: string[];
-    };
-};

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

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export declare const animalCrossingDefinitions: {
-    term: string;
-    definition: string;
-}[];
-export declare const listRenderer: (args: any) => JSX.Element;
-export declare const cardsList: any[];

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/dist/theme/components/customRadioGroup.d.ts

@@ -1,17 +0,0 @@
-declare const CustomRadioGroup: {
-    parts: string[];
-    baseStyle: {
-        legend: {
-            marginBottom: number;
-        };
-        required: {
-            marginLeft: number;
-        };
-        helper: {
-            marginTop: number;
-        };
-    };
-    sizes: {};
-    defaultProps: {};
-};
-export default CustomRadioGroup;

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/Button/_Button.scss

@@ -1,56 +0,0 @@
-// Keeping `button-base` and `button--outline` for the
-// Accordion component until that component is updated.
-@mixin button-base {
-  border-radius: 2px !important;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  padding: var(--space-xs) var(--space-s) !important;
-  text-decoration: none;
-}
-
-@mixin button--outline {
-  @include button-base;
-
-  background-color: var(--ui-white);
-  border: 1px solid var(--ui-gray-light);
-  color: inherit;
-
-  &:visited {
-    color: inherit;
-  }
-
-  &:hover {
-    background-color: var(--ui-gray-xxlight);
-  }
-
-  &:disabled {
-    background-color: var(--ui-gray-light);
-    color: var(--ui-gray-dark);
-    pointer-events: none;
-  }
-}
-
-.button {
-  // These `icon` rules are a better fit for the Icon
-  // component but we'll keep them here for now.
-  .icon {
-    @include icon;
-
-    fill: currentColor;
-
-    &--small,
-    &--icon-left,
-    &--icon-right {
-      margin-top: var(--space-xxs);
-    }
-
-    &--icon-left {
-      margin-right: var(--space-xs);
-    }
-
-    &--icon-right {
-      margin-left: var(--space-xs);
-    }
-  }
-}