@nypl/design-system-react-components 0.25.8 → 0.25.9

package/dist/components/CardEdition/CardEdition.d.ts

@@ -1,21 +0,0 @@
-import * as React from "react";
-interface CardEditionProps {
-    /** ClassName that appears in addition to "card" */
-    className?: string;
-    /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
-    /** Calls to Action for the card, such as "download" on a card for a book */
-    ctas?: React.ReactNode;
-    /** Footer that appears within the card but below the three columns within it */
-    footer?: React.ReactNode;
-    /** Heading that appears within the card but above the three columns within it */
-    heading?: React.ReactNode;
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
-    /** First column within the card */
-    image?: React.ReactNode;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-}
-export default function CardEdition(props: React.PropsWithChildren<CardEditionProps>): JSX.Element;
-export {};

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

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

package/dist/components/Input/Input.d.ts

@@ -1,36 +0,0 @@
-import * as React from "react";
-import { InputTypes } from "./InputTypes";
-export interface InputProps {
-    /** Additional attributes to pass to the <input> tag */
-    attributes?: {
-        [key: string]: any;
-    };
-    /** Populates the aria-label on the input */
-    ariaLabel?: string;
-    /** Populates the aria-labelledby on the input */
-    ariaLabelledBy?: string;
-    /** BlockName for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
-    /** className you can add in addition to 'input' */
-    className?: string;
-    /** ID that other components can cross reference for accessibility purposes */
-    id?: string;
-    /** Adds the 'disabled' prop to the input when true */
-    disabled?: boolean;
-    /** Helper for modifiers array; adds 'errored' styling */
-    errored?: boolean;
-    /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-    /** Populates the placeholder of the input */
-    placeholder?: string;
-    /** Will add 'aria-required: true' to input */
-    required?: boolean;
-    /** HTML Input types as defined by MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input */
-    type?: InputTypes;
-    /** Populates the value of the input */
-    value?: string | number;
-    /** The action to perform on the `<input>`'s onChange function  */
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
-export default Input;

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

@@ -1,29 +0,0 @@
-import React from "react";
-declare const _default: {
-    title: any;
-    component: React.ForwardRefExoticComponent<import("./Input").InputProps & React.RefAttributes<HTMLInputElement>>;
-};
-export default _default;
-export declare const input: {
-    (): JSX.Element;
-    storyName: string;
-    parameters: {
-        design: {
-            type: string;
-            url: string;
-        };
-        jest: string[];
-    };
-};
-export declare const inputGroup: {
-    (): JSX.Element;
-    storyName: string;
-    parameters: {
-        design: {
-            type: string;
-            url: string;
-        };
-        jest: string[];
-    };
-};
-export declare const inputAttributes: () => JSX.Element;

package/dist/components/Input/InputTypes.d.ts

@@ -1,6 +0,0 @@
-export declare enum InputTypes {
-    number = "number",
-    password = "password",
-    text = "text",
-    hidden = "hidden"
-}

package/dist/components/StyleGuide/UIDocCard.d.ts

@@ -1,11 +0,0 @@
-import * as React from "react";
-interface UIDocCardProps {
-    /** backgroundColor of the doc card */
-    backgroundColor: string;
-}
-/**
- * UIDocCard
- * Component only used for Storybook.
- */
-export default function UIDocCard(props: React.PropsWithChildren<UIDocCardProps>): JSX.Element;
-export {};

package/dist/helpers/CSSVariablesHelper.d.ts

@@ -1,3 +0,0 @@
-import { CSSVariablesInterface } from "../interfaces";
-declare const cssVariables: CSSVariablesInterface;
-export default cssVariables;

package/dist/helpers/getCSSVariable.d.ts

@@ -1 +0,0 @@
-export default function getCSSVariable(name: string): string;

package/dist/interfaces.d.ts

@@ -1,3 +0,0 @@
-export interface CSSVariablesInterface {
-    key?: string;
-}

package/dist/utils/bem.d.ts

@@ -1 +0,0 @@
-export default function bem(baseClass: string, modifiers?: string[], blockName?: string, extra?: string[]): string;

package/src/__tests__/utils/bem.test.ts

@@ -1,37 +0,0 @@
-import bem from "../../utils/bem";
-
-describe("bem", () => {
-  it("returns baseclass", () => {
-    expect(bem("unorder-list")).toEqual("unorder-list");
-  });
-
-  it("returns properly formatted classes from a baseclass and modifier", () => {
-    const modifiers = ["scroll"];
-    expect(bem("list-item", modifiers)).toEqual("list-item list-item--scroll");
-  });
-
-  it("returns properly formatted classes from a baseclass, modifier, and blockname", () => {
-    const modifiers = ["scroll"];
-    const blockName = "unordered-list";
-    expect(bem("list-item", modifiers, blockName)).toEqual(
-      "unordered-list__list-item unordered-list__list-item--scroll"
-    );
-  });
-
-  it("returns properly formatted classes from a baseclass and blockName", () => {
-    const blockName = "unordered-list";
-    expect(bem("list-item", [], blockName)).toEqual(
-      "unordered-list__list-item"
-    );
-  });
-
-  it("returns additional extra classes", () => {
-    const modifier = ["modifier"];
-    const blockName = "unordered-list";
-    const extra = ["extraClass"];
-
-    expect(bem("list-item", modifier, blockName, extra)).toEqual(
-      "unordered-list__list-item unordered-list__list-item--modifier extraClass"
-    );
-  });
-});

package/src/components/CardEdition/CardEdition.stories.tsx

@@ -1,122 +0,0 @@
-import * as React from "react";
-import { action } from "@storybook/addon-actions";
-
-import CardEdition from "./CardEdition";
-import Heading from "../Heading/Heading";
-import { HeadingLevels } from "../Heading/HeadingTypes";
-import Image from "../Image/Image";
-import Button from "../Button/Button";
-import Link from "../Link/Link";
-import Icon from "../Icons/Icon";
-import {
-  IconRotationTypes,
-  IconNames,
-  IconSizes,
-  IconAlign,
-} from "../Icons/IconTypes";
-import { LinkTypes } from "../Link/LinkTypes";
-import { ButtonTypes } from "../Button/ButtonTypes";
-import { getCategory } from "../../utils/componentCategories";
-
-export default {
-  title: getCategory("CardEdition"),
-  component: CardEdition,
-};
-
-const imageRatios = {
-  "1x1": "https://placeimg.com/100/100/animals",
-  "2x1": "https://placeimg.com/200/100/animals",
-  "3x4": "https://placeimg.com/150/200/animals",
-  "4x1": "https://placeimg.com/400/100/animals",
-  "4x3": "https://placeimg.com/200/150/animals",
-  "16x9": "https://placeimg.com/400/225/animals",
-};
-
-export const cardEdition = () => (
-  <>
-    <CardEdition
-      id="cardID"
-      heading={<Heading level={2} id="heading1" text="Header Content" />}
-      image={<Image src={imageRatios[2]} alt="" />}
-      ctas={
-        <Button
-          onClick={action("clicked")}
-          id="button1"
-          buttonType={ButtonTypes.Primary}
-          type="submit"
-        >
-          CTA Button Text
-        </Button>
-      }
-      footer={<>Footer content: </>}
-    >
-      Card Content:
-    </CardEdition>
-  </>
-);
-
-cardEdition.storyName = "CardEdition";
-
-cardEdition.parameters = {
-  design: {
-    type: "figma",
-    url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17167%3A58131",
-  },
-};
-
-export const ExampleCardEdition = () => (
-  <CardEdition
-    className="example-card-edition"
-    image={<Image src="https://placeimg.com/300/400/arch" alt={""} />}
-    ctas={
-      <>
-        <Link type={LinkTypes.Button} href="blah">
-          Reserve
-        </Link>
-        <div className="italicized ui-gray-dark">
-          0 of 11 copies available. 3 patrons in the queue.
-        </div>
-        <Link href="#url" type={LinkTypes.Forwards}>
-          View Book Details
-        </Link>
-      </>
-    }
-  >
-    <>
-      <Heading
-        level={HeadingLevels.Two}
-        id="heading1"
-        text="The Year of Magical Thinking"
-      />
-      <div className="book__callout">A portrait of loss and grief</div>
-      <div>
-        By <Link href="#joan-didion">Joan Didion</Link>,{" "}
-        <Link href="#another-author">Another Author</Link>,{" "}
-        <Link href="#third-author">Third Author</Link>
-      </div>
-      <div className="book__filetype">
-        <Icon
-          name={IconNames.Headset}
-          size={IconSizes.Small}
-          align={IconAlign.Left}
-          iconRotation={IconRotationTypes.Rotate0}
-        />
-        Audiobook
-      </div>
-      <div className="book__description">
-        An act of consummate literary bravery, a writer known for her clarity
-        allowing us to watch her mind as it becomes clouded...{" "}
-        <Link href="#">Read More</Link>
-      </div>
-    </>
-  </CardEdition>
-);
-
-ExampleCardEdition.storyName = "Example Card Edition";
-
-ExampleCardEdition.parameters = {
-  design: {
-    type: "figma",
-    url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17167%3A58131",
-  },
-};