@nypl/design-system-react-components 2.0.0 → 2.0.1

package/lib/components/00-base/Container/Container.d.ts

@@ -1,6 +0,0 @@
-import * as React from "react";
-export interface ContainerProps {
-    modifiers?: string[];
-    blockName?: string;
-}
-export default function Container(props: React.PropsWithChildren<ContainerProps>): JSX.Element;

package/lib/components/00-base/Container/Container.js

@@ -1,19 +0,0 @@
-"use strict";
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const bem_1 = __importDefault(require("../../../utils/bem"));
-function Container(props) {
-    const { modifiers = [], blockName } = props;
-    return (React.createElement("div", { className: bem_1.default("container", modifiers, blockName) }, props.children));
-}
-exports.default = Container;

package/lib/components/00-base/Container/Modal.d.ts

@@ -1,12 +0,0 @@
-import * as React from "react";
-export interface ModalProps {
-    /** Optional modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-    /** Optional blockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
-}
-export default class Modal extends React.Component<ModalProps, {}> {
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-}

package/lib/components/00-base/Container/Modal.js

@@ -1,29 +0,0 @@
-"use strict";
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const bem_1 = __importDefault(require("../../../utils/bem"));
-/* Full-screen modal that appears on top of the body */
-class Modal extends React.Component {
-    componentDidMount() {
-        document.body.classList.add("no-scroll");
-    }
-    componentWillUnmount() {
-        document.body.classList.remove("no-scroll");
-    }
-    render() {
-        const { modifiers = [], blockName = "" } = this.props;
-        let baseClass = "modal";
-        return (React.createElement("div", { tabIndex: 0, className: bem_1.default(baseClass, modifiers, blockName) }, this.props.children));
-    }
-}
-exports.default = Modal;

package/lib/components/00-base/Container/Modal.stories.d.ts

@@ -1,7 +0,0 @@
-import Modal from "./Modal";
-declare const _default: {
-    title: string;
-    component: typeof Modal;
-};
-export default _default;
-export declare const modal: () => JSX.Element;

package/lib/components/00-base/Container/Modal.stories.js

@@ -1,20 +0,0 @@
-"use strict";
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const Modal_1 = __importDefault(require("./Modal"));
-exports.default = {
-    title: "Modal",
-    component: Modal_1.default,
-};
-exports.modal = () => React.createElement(Modal_1.default, null,
-    React.createElement("div", null, "Modal Content"));

package/lib/components/00-base/Placeholder.d.ts

@@ -1,10 +0,0 @@
-import * as React from "react";
-export interface PlaceholderProps {
-    modifiers?: string[];
-    blockName?: string;
-}
-/** Creates a gray box with an editable string for dropping in spaces
- * within components or on templates where a component will be but
- * that hasn't been created yet
- */
-export default function Placeholder(props: React.PropsWithChildren<PlaceholderProps>): JSX.Element;

package/lib/components/00-base/Placeholder.js

@@ -1,23 +0,0 @@
-"use strict";
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const bem_1 = __importDefault(require("../../utils/bem"));
-/** Creates a gray box with an editable string for dropping in spaces
- * within components or on templates where a component will be but
- * that hasn't been created yet
- */
-function Placeholder(props) {
-    const { modifiers = [], blockName } = props;
-    return (React.createElement("div", { className: bem_1.default("placeholder", modifiers, blockName) }, props.children));
-}
-exports.default = Placeholder;

package/lib/components/00-base/SectionName.d.ts

@@ -1,4 +0,0 @@
-declare const SectionName: ({ children }: {
-    children: any;
-}) => JSX.Element;
-export default SectionName;

package/lib/components/00-base/SectionName.js

@@ -1,16 +0,0 @@
-"use strict";
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const bem_1 = __importDefault(require("../../utils/bem"));
-const SectionName = ({ children }) => React.createElement("div", { className: bem_1.default('main', ['research']) }, children);
-exports.default = SectionName;

package/lib/components/01-atoms/Button/Button.d.ts

@@ -1,52 +0,0 @@
-import * as React from "react";
-import { ButtonTypes, ButtonIconPositions } from "./ButtonTypes";
-export interface ButtonOptions {
-    content?: JSX.Element;
-    id: string;
-    callback?: (event: React.MouseEvent | React.KeyboardEvent) => void;
-    attributes?: {};
-    modifiers?: string[];
-    blockName?: string;
-    buttonType?: ButtonTypes;
-    type?: "submit" | "button" | "reset";
-    mouseDown?: boolean;
-    iconPosition?: ButtonIconPositions;
-    iconName?: string;
-    iconModifiers?: string[];
-    iconDecorative?: boolean;
-    iconRole?: string;
-}
-interface ButtonProps {
-    id: string;
-    /** The action to perform on the <button>'s onClick function */
-    callback: (event: React.MouseEvent | React.KeyboardEvent) => void;
-    /** Additional attributes passed to the button */
-    attributes?: {};
-    /** Optional modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-    /** Optional blockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
-    /** The Kind of button */
-    buttonType?: ButtonTypes;
-    /** The html button attribute */
-    type?: "submit" | "button" | "reset";
-    mouseDown?: boolean;
-    /** If an icon is to be rendered, an `iconPosition` prop is required. */
-    iconPosition?: ButtonIconPositions;
-    /** The name of the icon.  Corresponds with the name of the icon's svg file */
-    iconName?: string;
-    /** Optional modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    iconModifiers?: string[];
-    /** Is the icon decorative */
-    iconDecorative?: boolean;
-    /** The role for the icon, if not decorative */
-    iconRole?: string;
-}
-export default class Button extends React.Component<ButtonProps, {}> {
-    static defaultProps: {
-        mouseDown: boolean;
-    };
-    constructor(props: ButtonProps);
-    render(): JSX.Element;
-}
-export {};

package/lib/components/01-atoms/Button/Button.js

@@ -1,76 +0,0 @@
-"use strict";
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const Icon_1 = __importDefault(require("../Images/Icons/Icon"));
-const bem_1 = __importDefault(require("../../../utils/bem"));
-const ButtonTypes_1 = require("./ButtonTypes");
-class Button extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-    render() {
-        const { id, callback, attributes, modifiers, blockName, buttonType, type = "submit", mouseDown, iconPosition, iconName, iconModifiers, iconDecorative, iconRole, children } = this.props;
-        let buttonModifiers = modifiers ? modifiers : [];
-        if (!buttonModifiers.find((mod) => mod === buttonType)) {
-            buttonModifiers.push(buttonType);
-        }
-        let button_base_class = "button";
-        let iconProps;
-        // An icon needs a position in order for it to be created and
-        // rendered in the button.
-        if (iconPosition) {
-            iconProps = {
-                name: iconName,
-                key: `icon-${id}`,
-                blockName: button_base_class,
-                modifiers: ["small"],
-                decorative: iconDecorative,
-                desc: iconDecorative,
-                role: iconDecorative ? undefined : iconRole,
-                title: iconDecorative
-            };
-            if (iconModifiers) {
-                iconProps.modifiers.push(...iconModifiers);
-            }
-            buttonModifiers.push("icon");
-            switch (iconPosition) {
-                case ButtonTypes_1.ButtonIconPositions.Left: {
-                    buttonModifiers.push("icon-left");
-                    iconProps.modifiers.push("icon-left");
-                    break;
-                }
-                case ButtonTypes_1.ButtonIconPositions.Right: {
-                    buttonModifiers.push("icon-right");
-                    iconProps.modifiers.push("icon-right");
-                    break;
-                }
-                case ButtonTypes_1.ButtonIconPositions.JustifyRight: {
-                    buttonModifiers.push("justify-right");
-                    iconProps.modifiers.push("justify-right");
-                    break;
-                }
-                default: {
-                    break;
-                }
-            }
-        }
-        let btnCallback = mouseDown ? { onMouseDown: callback } : { onClick: callback };
-        return (React.createElement("button", Object.assign({ id: "btn-" + id, className: bem_1.default(button_base_class, buttonModifiers, blockName), type: type }, attributes, btnCallback),
-            React.createElement("span", { className: bem_1.default("label", buttonModifiers, button_base_class) }, children),
-            iconProps && React.createElement(Icon_1.default, Object.assign({}, iconProps))));
-    }
-}
-exports.default = Button;
-Button.defaultProps = {
-    mouseDown: false
-};

package/lib/components/01-atoms/Button/Button.stories.d.ts

@@ -1,14 +0,0 @@
-import Button from "./Button";
-declare const _default: {
-    title: string;
-    component: typeof Button;
-};
-export default _default;
-export declare const buttonFilledIcon: () => JSX.Element;
-export declare const buttonOutline: () => JSX.Element;
-export declare const buttonWithSpan: () => JSX.Element;
-export declare const buttonIconChildrenString: () => JSX.Element;
-export declare const buttonIconChildrenElement: () => JSX.Element;
-export declare const buttonFullWidthIconRight: () => JSX.Element;
-export declare const linkLikeButton: () => JSX.Element;
-export declare const linkLikeButtonIconLeft: () => JSX.Element;

package/lib/components/01-atoms/Button/Button.stories.js

@@ -1,33 +0,0 @@
-"use strict";
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const Button_1 = __importDefault(require("./Button"));
-const addon_actions_1 = require("@storybook/addon-actions");
-const ButtonTypes_1 = require("./ButtonTypes");
-exports.default = {
-    title: "Button",
-    component: Button_1.default,
-};
-exports.buttonFilledIcon = () => React.createElement(Button_1.default, { callback: addon_actions_1.action("clicked"), id: "button", buttonType: ButtonTypes_1.ButtonTypes.Filled, type: "submit", iconPosition: ButtonTypes_1.ButtonIconPositions.Left, iconName: "search-small", iconDecorative: true }, "Search");
-exports.buttonOutline = () => React.createElement(Button_1.default, { callback: addon_actions_1.action("clicked"), id: "button", type: "submit", buttonType: ButtonTypes_1.ButtonTypes.Outline }, "Hello World");
-exports.buttonWithSpan = () => React.createElement(Button_1.default, { callback: addon_actions_1.action("clicked"), id: "button", buttonType: ButtonTypes_1.ButtonTypes.Outline },
-    React.createElement("span", null, "Style my span!"));
-exports.buttonIconChildrenString = () => React.createElement(Button_1.default, { callback: addon_actions_1.action("clicked"), id: "button", buttonType: ButtonTypes_1.ButtonTypes.Filled, type: "submit", iconPosition: ButtonTypes_1.ButtonIconPositions.Right, iconName: "search-small", iconDecorative: true }, "Search!");
-exports.buttonIconChildrenElement = () => React.createElement(Button_1.default, { callback: addon_actions_1.action("clicked"), id: "button", buttonType: ButtonTypes_1.ButtonTypes.Outline, type: "button", iconPosition: ButtonTypes_1.ButtonIconPositions.Right, iconName: "search-small", iconDecorative: true },
-    React.createElement("span", null, "I'm wrapped in a span!"));
-exports.buttonFullWidthIconRight = () => React.createElement(Button_1.default, { callback: addon_actions_1.action("clicked"), id: "button", type: "submit", buttonType: ButtonTypes_1.ButtonTypes.Outline, iconPosition: ButtonTypes_1.ButtonIconPositions.JustifyRight, modifiers: ["large"], iconName: "plus", iconDecorative: true },
-    React.createElement("span", null, "button content"));
-exports.linkLikeButton = () => React.createElement(Button_1.default, { callback: addon_actions_1.action["clicked"], id: "button", type: "button", buttonType: ButtonTypes_1.ButtonTypes.Link },
-    React.createElement("span", null, "button content"));
-exports.linkLikeButtonIconLeft = () => React.createElement(Button_1.default, { callback: addon_actions_1.action["clicked"], id: "button", type: "button", buttonType: ButtonTypes_1.ButtonTypes.Link, iconPosition: ButtonTypes_1.ButtonIconPositions.Left, iconName: "arrow-xsmall", iconDecorative: true },
-    React.createElement("span", null, "button content"));

package/lib/components/01-atoms/Button/ButtonTypes.d.ts

@@ -1,10 +0,0 @@
-export declare enum ButtonTypes {
-    Outline = "outline",
-    Filled = "filled",
-    Link = "link"
-}
-export declare enum ButtonIconPositions {
-    Left = "icon-left",
-    Right = "icon-right",
-    JustifyRight = "justify-right"
-}

package/lib/components/01-atoms/Button/ButtonTypes.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var ButtonTypes;
-(function (ButtonTypes) {
-    ButtonTypes["Outline"] = "outline";
-    ButtonTypes["Filled"] = "filled";
-    ButtonTypes["Link"] = "link";
-})(ButtonTypes = exports.ButtonTypes || (exports.ButtonTypes = {}));
-var ButtonIconPositions;
-(function (ButtonIconPositions) {
-    ButtonIconPositions["Left"] = "icon-left";
-    ButtonIconPositions["Right"] = "icon-right";
-    ButtonIconPositions["JustifyRight"] = "justify-right";
-})(ButtonIconPositions = exports.ButtonIconPositions || (exports.ButtonIconPositions = {}));

package/lib/components/01-atoms/Forms/Checkbox.d.ts

@@ -1,21 +0,0 @@
-import * as React from "react";
-import { LabelOptions } from "./Label";
-interface CheckboxProps {
-    /** name of the checkbox */
-    name?: string;
-    /** Optional blockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
-    /** Optional modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-    modifiers?: string[];
-    /** Unique ID used by checkbox */
-    checkboxId: string;
-    labelOptions: LabelOptions;
-    isSelected?: boolean;
-    /** The action to perform on the <input>'s onChange function  */
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-/**
- * A Form Checkbox component that can be selected and deselected.
- */
-export default function Checkbox(props: CheckboxProps): JSX.Element;
-export {};

package/lib/components/01-atoms/Forms/Checkbox.js

@@ -1,27 +0,0 @@
-"use strict";
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const bem_1 = __importDefault(require("../../../utils/bem"));
-const Label_1 = __importDefault(require("./Label"));
-/**
- * A Form Checkbox component that can be selected and deselected.
- */
-function Checkbox(props) {
-    const { name, modifiers = [], blockName = "", checkboxId, labelOptions, isSelected, onChange } = props;
-    const baseClass = "checkbox";
-    return (React.createElement("div", { className: bem_1.default(baseClass, modifiers, blockName) },
-        React.createElement("input", { id: checkboxId, name: name, className: bem_1.default("input", [], baseClass), onChange: onChange, type: "checkbox", "aria-checked": isSelected, checked: isSelected }),
-        React.createElement("span", { className: bem_1.default("label", [], baseClass) },
-            React.createElement(Label_1.default, { referenceId: checkboxId, id: labelOptions.id }, labelOptions.labelContent))));
-}
-exports.default = Checkbox;

package/lib/components/01-atoms/Forms/Checkbox.stories.d.ts

@@ -1,7 +0,0 @@
-import Checkbox from "./Checkbox";
-declare const _default: {
-    title: string;
-    component: typeof Checkbox;
-};
-export default _default;
-export declare const checkbox: () => JSX.Element;

package/lib/components/01-atoms/Forms/Checkbox.stories.js

@@ -1,23 +0,0 @@
-"use strict";
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const Checkbox_1 = __importDefault(require("./Checkbox"));
-const addon_actions_1 = require("@storybook/addon-actions");
-exports.default = {
-    title: "Checkbox",
-    component: Checkbox_1.default,
-};
-exports.checkbox = () => React.createElement(Checkbox_1.default, { checkboxId: "checkbox", labelOptions: {
-        id: "label",
-        labelContent: React.createElement(React.Fragment, null, "Label Text")
-    }, onChange: addon_actions_1.action("changed") });

package/lib/components/01-atoms/Forms/DateRangeForm.d.ts

@@ -1,31 +0,0 @@
-import { ButtonOptions } from "../Button/Button";
-import { HelperErrorTextOptions } from "./HelperErrorText";
-import { InputOptions } from "./Input";
-import { LabelOptions } from "./Label";
-export interface DateCheckFormProps {
-    /** Optional blockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    blockName?: string;
-    /** Optional baseClass for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-    baseClass?: string;
-    /** The Label to describe the form */
-    formLabel: JSX.Element;
-    /** The Label to describe the from input */
-    fromLabelOpts: LabelOptions;
-    /** The from input */
-    fromInputOpts: InputOptions;
-    /** Helper text for the from input */
-    fromHelper?: HelperErrorTextOptions;
-    /** The Label to describe the to input */
-    toLabelOpts: LabelOptions;
-    /** The to input */
-    toInputOpts: InputOptions;
-    /** Helper text for the to input */
-    toHelper?: HelperErrorTextOptions;
-    /** Whether the form is currently in an error state */
-    showError: boolean;
-    /** The error text to render */
-    error?: HelperErrorTextOptions;
-    /** The submit button */
-    buttonOpts?: ButtonOptions;
-}
-export default function DateRangeForm(props: DateCheckFormProps): JSX.Element;

package/lib/components/01-atoms/Forms/DateRangeForm.js

@@ -1,27 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const Button_1 = __importDefault(require("../Button/Button"));
-const HelperErrorText_1 = __importDefault(require("./HelperErrorText"));
-const Input_1 = __importDefault(require("./Input"));
-const bem_1 = __importDefault(require("../../../utils/bem"));
-/* Input fields for date ranges. */
-function DateRangeForm(props) {
-    const { blockName = "date-range", baseClass, formLabel, fromLabelOpts, fromInputOpts, fromHelper, toLabelOpts, toInputOpts, toHelper, showError, error, buttonOpts } = props;
-    if (showError && !error) {
-        throw new Error("Error should be shown, but no Error Content exists");
-    }
-    return (react_1.default.createElement("fieldset", { className: bem_1.default(blockName, [], baseClass) },
-        react_1.default.createElement("legend", null, formLabel),
-        react_1.default.createElement("div", { className: "input-row" },
-            react_1.default.createElement(Input_1.default, { baseClass: "input-row", labelId: fromLabelOpts.id, labelContent: fromLabelOpts.labelContent, inputId: fromInputOpts.inputId, inputType: "number", inputValue: fromInputOpts.inputValue, onInputChange: fromInputOpts.onInputChange, helperContentOpts: fromHelper }),
-            react_1.default.createElement(Input_1.default, { baseClass: "input-row", labelId: toLabelOpts.id, labelContent: toLabelOpts.labelContent, inputId: toInputOpts.inputId, inputType: "number", inputValue: toInputOpts.inputValue, onInputChange: toInputOpts.onInputChange, helperContentOpts: toHelper })),
-        showError &&
-            react_1.default.createElement(HelperErrorText_1.default, { isError: true, id: error.id }, error.content),
-        buttonOpts &&
-            react_1.default.createElement(Button_1.default, Object.assign({ callback: buttonOpts.callback, id: buttonOpts.id }, buttonOpts), buttonOpts.content)));
-}
-exports.default = DateRangeForm;

package/lib/components/01-atoms/Forms/DateRangeForm.stories.d.ts

@@ -1,9 +0,0 @@
-import DateRangeForm from "./DateRangeForm";
-declare const _default: {
-    title: string;
-    component: typeof DateRangeForm;
-};
-export default _default;
-export declare const defaultState: () => JSX.Element;
-export declare const errorState: () => JSX.Element;
-export declare const noButton: () => JSX.Element;

package/lib/components/01-atoms/Forms/DateRangeForm.stories.js

@@ -1,23 +0,0 @@
-"use strict";
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const DateRangeForm_1 = __importDefault(require("./DateRangeForm"));
-const addon_actions_1 = require("@storybook/addon-actions");
-exports.default = {
-    title: "DateRangeForm",
-    component: DateRangeForm_1.default,
-};
-let callback = addon_actions_1.action("clicked");
-exports.defaultState = () => React.createElement(DateRangeForm_1.default, { formLabel: React.createElement(React.Fragment, null, "Publication Year"), fromLabelOpts: { labelContent: React.createElement(React.Fragment, null, "From"), id: "FromLabel" }, fromInputOpts: { inputId: "fromInput" }, fromHelper: { content: React.createElement(React.Fragment, null, "E.x., 1901"), id: "fromyearhelper", isError: false }, toLabelOpts: { labelContent: React.createElement(React.Fragment, null, "To"), id: "ToLabel" }, toInputOpts: { inputId: "toInput" }, toHelper: { content: React.createElement(React.Fragment, null, "E.x., 2000"), id: "toYearHelper", isError: false }, showError: false, error: { content: React.createElement(React.Fragment, null), id: "errorId", isError: true }, buttonOpts: { id: "submitButtonId", callback: callback, content: React.createElement(React.Fragment, null, "Submit") } });
-exports.errorState = () => React.createElement(DateRangeForm_1.default, { formLabel: React.createElement(React.Fragment, null, "Publication Year"), fromLabelOpts: { labelContent: React.createElement(React.Fragment, null, "From"), id: "FromLabel" }, fromInputOpts: { inputId: "fromInput" }, fromHelper: { content: React.createElement(React.Fragment, null, "E.x., 1901"), id: "fromyearhelper" }, toLabelOpts: { labelContent: React.createElement(React.Fragment, null, "To"), id: "ToLabel" }, toInputOpts: { inputId: "toInput" }, toHelper: { content: React.createElement(React.Fragment, null, "E.x., 2000"), id: "toYearHelper" }, showError: true, error: { content: React.createElement("div", null, "The end year should be the same year as or later than the start year"), id: "errorId" }, buttonOpts: { id: "submitButtonId", callback: callback, content: React.createElement(React.Fragment, null, "Submit") } });
-exports.noButton = () => React.createElement(DateRangeForm_1.default, { formLabel: React.createElement(React.Fragment, null, "Publication Year"), fromLabelOpts: { labelContent: React.createElement(React.Fragment, null, "From"), id: "FromLabel" }, fromInputOpts: { inputId: "fromInput" }, fromHelper: { content: React.createElement(React.Fragment, null, "E.x., 1901"), id: "fromyearhelper" }, toLabelOpts: { labelContent: React.createElement(React.Fragment, null, "To"), id: "ToLabel" }, toInputOpts: { inputId: "toInput" }, toHelper: { content: React.createElement(React.Fragment, null, "E.x., 2000"), id: "toYearHelper" }, showError: true, error: { content: React.createElement("div", null, "The end year should be the same year as or later than the start year"), id: "errorId" } });

package/lib/components/01-atoms/Forms/FormDropdown.d.ts

@@ -1,22 +0,0 @@
-import * as React from "react";
-export interface FormDropdownProps {
-    dropdownId: string;
-    blockName?: string;
-    modifiers?: string[];
-    labelId?: string;
-    isRequired: boolean;
-    ariaLabel?: string;
-    disabled?: boolean;
-    options: string[];
-    selectedOption?: string;
-    onSelectBlur: (event: React.FormEvent) => void;
-    onSelectChange: (event: React.FormEvent) => void;
-}
-export default class FormDropdown extends React.Component<FormDropdownProps, {
-    selectedOption: string;
-}> {
-    constructor(props: FormDropdownProps);
-    componentDidUpdate(): void;
-    onSelectChange(event: React.FormEvent, additionalChange: Function): void;
-    render(): JSX.Element;
-}

package/lib/components/01-atoms/Forms/FormDropdown.js

@@ -1,64 +0,0 @@
-"use strict";
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-// AF-121 Form Dropdown
-const React = __importStar(require("react"));
-const bem_1 = __importDefault(require("../../../utils/bem"));
-const Icon_1 = __importDefault(require("../Images/Icons/Icon"));
-class FormDropdown extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = { selectedOption: props.selectedOption };
-        this.onSelectChange.bind(this);
-    }
-    componentDidUpdate() {
-        if (this.state.selectedOption !== this.props.selectedOption) {
-            this.setState({ selectedOption: this.props.selectedOption });
-        }
-    }
-    onSelectChange(event, additionalChange) {
-        let target = event.target;
-        if (target) {
-            this.setState({ selectedOption: target.value });
-        }
-        additionalChange(event);
-    }
-    render() {
-        const { dropdownId, blockName = "form-item", options, labelId, isRequired, ariaLabel, disabled = false, selectedOption, onSelectBlur, onSelectChange } = this.props;
-        const modifiers = this.props.modifiers ? this.props.modifiers : [];
-        if (!labelId && !ariaLabel) {
-            throw new Error("Must either have labelId or aria-label");
-        }
-        let formItemBlockName = blockName;
-        let selectProps = {
-            id: dropdownId,
-            className: bem_1.default("select", modifiers, formItemBlockName),
-            "aria-required": isRequired,
-            value: this.state.selectedOption ? this.state.selectedOption : undefined,
-            disabled: disabled
-        };
-        if (labelId) {
-            selectProps["aria-labelledby"] = labelId;
-        }
-        else {
-            selectProps["aria-label"] = ariaLabel;
-        }
-        if (!options.length)
-            return;
-        return (React.createElement("div", { className: bem_1.default("dropdown", modifiers, formItemBlockName) },
-            React.createElement("select", Object.assign({}, selectProps, { onChange: (e) => this.onSelectChange(e, onSelectChange), onBlur: (e) => this.onSelectChange(e, onSelectBlur) }), options.map((child, key) => {
-                return React.createElement("option", { key: key.toString(), "aria-selected": child === this.state.selectedOption, value: child }, child);
-            })),
-            React.createElement(Icon_1.default, { decorative: true, name: "arrow", modifiers: ["small"] })));
-    }
-}
-exports.default = FormDropdown;