@mitodl/smoot-design 0.0.0-7bc0c0f

package/dist/esm/components/SrAnnouncer/SrAnnouncer.js

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden";
+import { useEffect } from "react";
+import { useDevCheckStable } from "../../utils/useDevCheckStable";
+const DEFAULT_PROPS = {
+    loadingMessages: [
+        { delay: 1500, text: "Loading" },
+        { delay: 4000, text: "Still loading" },
+    ],
+};
+/**
+ * A component that announces messages to screen readers as they come in.
+ */
+const SrAnnouncer = ({ message, isLoading, loadingMessages = DEFAULT_PROPS.loadingMessages, }) => {
+    var _a;
+    const [loadingMsgIndex, setLoadingMsgIndex] = React.useState(-1);
+    /**
+     * If loadingMessages changes, the timeouts are reset.
+     * Desirable if the change is real, undesirable if it's a mistake (e.g., by
+     * passing an array literal as a prop).
+     */
+    useDevCheckStable(loadingMessages, "SrAnnouncer: loadingMessages changed (by ===) unexpectedly. This may interfere with loading message visibility");
+    useEffect(() => {
+        setLoadingMsgIndex(-1);
+    }, [isLoading, loadingMessages]);
+    useEffect(() => {
+        const next = loadingMessages[loadingMsgIndex + 1];
+        if (!isLoading || !next)
+            return () => { };
+        const id = setTimeout(() => {
+            setLoadingMsgIndex(loadingMsgIndex + 1);
+        }, next.delay);
+        return () => {
+            clearTimeout(id);
+        };
+    }, [isLoading, loadingMsgIndex, loadingMessages]);
+    const loadingTxt = (_a = loadingMessages[loadingMsgIndex]) === null || _a === void 0 ? void 0 : _a.text;
+    return (React.createElement(VisuallyHidden, { "aria-atomic": "true", "aria-live": "polite" }, isLoading ? loadingTxt : message));
+};
+export { SrAnnouncer };

package/dist/esm/components/SrAnnouncer/SrAnnouncer.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SrAnnouncer } from "./SrAnnouncer";
+declare const meta: Meta<typeof SrAnnouncer>;
+export default meta;
+type Story = StoryObj<typeof SrAnnouncer>;
+export declare const ScreenreaderAnnouncements: Story;

package/dist/esm/components/SrAnnouncer/SrAnnouncer.stories.js

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { SrAnnouncer } from "./SrAnnouncer";
+import styled from "@emotion/styled";
+const Container = styled.div(({ forceVisible }) => [
+    forceVisible && {
+        width: "100% !important",
+        height: "100px !important",
+        "& > *:first-of-type": {
+            width: "unset !important",
+            height: "unset !important",
+            clipPath: "none !important",
+            clip: "unset !important",
+            position: "unset !important",
+        },
+    },
+]);
+const meta = {
+    title: "smoot-design/ScreenreaderAnnouncer",
+    component: SrAnnouncer,
+    decorators: function Decorator(Story) {
+        const [forceVisible, setForceVisible] = React.useState(true);
+        return (React.createElement(React.Fragment, null,
+            React.createElement("label", null,
+                "Force Visible:",
+                React.createElement("input", { type: "checkbox", checked: forceVisible, onChange: (e) => setForceVisible(e.target.checked) }),
+                React.createElement("p", null, "By default, the content of this story is visually hidden.")),
+            React.createElement("hr", null),
+            React.createElement(Container, { forceVisible: forceVisible },
+                React.createElement(Story, null))));
+    },
+    args: {
+        message: "A message to read to user",
+        isLoading: true,
+        loadingMessages: [
+            { delay: 1000, text: "Loading" },
+            { delay: 3000, text: "Still loading" },
+        ],
+    },
+};
+export default meta;
+export const ScreenreaderAnnouncements = {};

package/dist/esm/components/SrAnnouncer/SrAnnouncer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/SrAnnouncer/SrAnnouncer.test.js

@@ -0,0 +1,60 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import * as React from "react";
+import { render, act } from "@testing-library/react";
+import { SrAnnouncer } from "./SrAnnouncer";
+const sleep = (ms) => {
+    act(() => {
+        jest.advanceTimersByTime(ms);
+    });
+};
+describe("SrAnnouncer", () => {
+    beforeEach(() => {
+        jest.useFakeTimers();
+        jest.clearAllTimers();
+    });
+    test("Renders a message when not loading", () => {
+        const { container } = render(React.createElement(SrAnnouncer, { message: "Hello, world!", isLoading: false }));
+        expect(container.textContent).toBe("Hello, world!");
+    });
+    test("Renders a loading message when loading", () => __awaiter(void 0, void 0, void 0, function* () {
+        const loadingMessages = [
+            { delay: 100, text: "Loading 1" },
+            { delay: 200, text: "Loading 2" },
+        ];
+        const { container, rerender } = render(React.createElement(SrAnnouncer, { message: "Hello, world!", loadingMessages: loadingMessages, isLoading: true }));
+        expect(container.textContent).toBe("");
+        sleep(100);
+        expect(container.textContent).toBe("Loading 1");
+        sleep(100);
+        expect(container.textContent).toBe("Loading 1");
+        sleep(100);
+        expect(container.textContent).toBe("Loading 2");
+        sleep(1000);
+        expect(container.textContent).toBe("Loading 2");
+        rerender(React.createElement(SrAnnouncer, { message: "Hello, world!", loadingMessages: loadingMessages, isLoading: false }));
+        expect(container.textContent).toBe("Hello, world!");
+        rerender(React.createElement(SrAnnouncer, { message: "Hello, world!", loadingMessages: loadingMessages, isLoading: true }));
+        expect(container.textContent).toBe("");
+        sleep(100);
+        expect(container.textContent).toBe("Loading 1");
+        sleep(100);
+        expect(container.textContent).toBe("Loading 1");
+        sleep(100);
+        expect(container.textContent).toBe("Loading 2");
+    }));
+    test("Warns if loadingMessages changes unexpectedly", () => {
+        const error = jest.spyOn(console, "error").mockImplementation(() => { });
+        const { rerender } = render(React.createElement(SrAnnouncer, { message: "Hello, world!", isLoading: true }));
+        rerender(React.createElement(SrAnnouncer, { message: "Hello, world!", isLoading: true, loadingMessages: [{ delay: 100, text: "Loading" }] }));
+        expect(error).toHaveBeenCalled();
+        error.mockRestore();
+    });
+});

package/dist/esm/components/TabButtons/TabButtonList.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import type { TabProps } from "@mui/material/Tab";
+import type { TabListProps } from "@mui/lab/TabList";
+import type { ButtonLinkProps } from "../Button/Button";
+type StyleVariant = "chat";
+type TabButtonListProps = TabListProps & {
+    styleVariant?: StyleVariant;
+};
+declare const TabButtonList: React.FC<TabButtonListProps>;
+declare const TabLinkInner: React.ForwardRefExoticComponent<Omit<ButtonLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+type TabButtonProps = Omit<TabProps<"button">, "color"> & {
+    styleVariant?: StyleVariant;
+};
+/**
+ * Wrapper around [MUI Tab](https://mui.com/material-ui/api/tab/) using our
+ * Button as the `component` implementation.
+ */
+declare const TabButton: (props: TabButtonProps) => React.JSX.Element;
+/**
+ * Wrapper around [MUI Tab](https://mui.com/material-ui/api/tab/) using our
+ * ButtonLink as the `component` implementation.
+ */
+declare const TabButtonLink: ({ ...props }: TabProps<typeof TabLinkInner>) => React.JSX.Element;
+export { TabButtonList, TabButton, TabButtonLink };
+export type { TabButtonListProps, TabButtonProps };

package/dist/esm/components/TabButtons/TabButtonList.js

@@ -0,0 +1,92 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+import MuiTab from "@mui/material/Tab";
+import MuiTabList from "@mui/lab/TabList";
+import styled from "@emotion/styled";
+import { Button, ButtonLink } from "../Button/Button";
+import { css } from "@emotion/react";
+const defaultTabListProps = {
+    variant: "scrollable",
+    allowScrollButtonsMobile: true,
+    scrollButtons: "auto",
+};
+const TabButtonList = styled((_a) => {
+    var { styleVariant } = _a, props = __rest(_a, ["styleVariant"]);
+    return (React.createElement(MuiTabList, Object.assign({}, defaultTabListProps, props)));
+})(({ theme, styleVariant }) => (Object.assign({ minHeight: "unset", ".MuiTabs-indicator": {
+        display: "none",
+    }, ".MuiTabs-flexContainer": {
+        gap: "8px",
+        alignItems: "center",
+    }, ".MuiTabs-scroller": {
+        display: "flex",
+    } }, (styleVariant === "chat" && {
+    flexGrow: 1,
+    ".MuiTabs-flexContainer": {
+        flexGrow: 1,
+        gap: "8px",
+        alignItems: "center",
+        backgroundColor: theme.custom.colors.lightGray1,
+        padding: "4px",
+        borderRadius: "8px",
+    },
+    button: Object.assign({ flexGrow: 1, backgroundColor: "transparent" }, theme.typography.body2),
+    "button[aria-selected=true], button[aria-selected=true]:hover": {
+        backgroundColor: theme.custom.colors.darkGray1,
+        color: theme.custom.colors.white,
+        cursor: "default",
+    },
+}))));
+const tabStyles = ({ theme }) => css({
+    minWidth: "auto",
+    ":focus-visible": {
+        outlineOffset: "-1px",
+    },
+    '&[aria-selected="true"]': {
+        backgroundColor: theme.custom.colors.white,
+        borderColor: theme.custom.colors.darkGray2,
+    },
+});
+const TabButtonStyled = styled(Button)(tabStyles);
+const TabLinkStyled = styled(ButtonLink)(tabStyles);
+const defaultTabButtonProps = {
+    variant: "tertiary",
+    size: "small",
+};
+const TabButtonInner = React.forwardRef(
+// Omits the `className` prop from the underlying Button so that MUI does not
+// style it. We style it ourselves.
+(props, ref) => {
+    const { className } = props, others = __rest(props, ["className"]);
+    return React.createElement(TabButtonStyled, Object.assign({}, defaultTabButtonProps, others, { ref: ref }));
+});
+TabButtonInner.displayName = "TabButtonInner";
+const TabLinkInner = React.forwardRef((props, ref) => {
+    const { className } = props, others = __rest(props, ["className"]);
+    return React.createElement(TabLinkStyled, Object.assign({}, defaultTabButtonProps, others, { ref: ref }));
+});
+TabLinkInner.displayName = "TabLinkInner";
+/**
+ * Wrapper around [MUI Tab](https://mui.com/material-ui/api/tab/) using our
+ * Button as the `component` implementation.
+ */
+const TabButton = (props) => (React.createElement(MuiTab, Object.assign({}, props, { component: TabButtonInner })));
+/**
+ * Wrapper around [MUI Tab](https://mui.com/material-ui/api/tab/) using our
+ * ButtonLink as the `component` implementation.
+ */
+const TabButtonLink = (_a) => {
+    var props = __rest(_a, []);
+    return (React.createElement(MuiTab, Object.assign({}, props, { component: TabLinkInner })));
+};
+export { TabButtonList, TabButton, TabButtonLink };

package/dist/esm/components/TabButtons/TabButtonList.stories.d.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { TabButtonListProps } from "./TabButtonList";
+type StoryProps = TabButtonListProps & {
+    count: number;
+};
+declare const meta: Meta<StoryProps>;
+export default meta;
+type Story = StoryObj<StoryProps>;
+/**
+ * Use `TabButtonList` and `TabButton` to render a list of tabs styled as our tertiary buttons:
+ */
+export declare const ButtonTabs: Story;
+/**
+ * `TabButtonList` chat style variant:
+ */
+export declare const ButtonTabsChatVariant: Story;
+/**
+ * By default, the tabs will be scrollable if there are too many to fit in the container:
+ */
+export declare const ManyButtonTabs: Story;
+/**
+ * Use `TabButtonLink` for tabs that should affect the URL:
+ */
+export declare const LinkTabs: Story;

package/dist/esm/components/TabButtons/TabButtonList.stories.js

@@ -0,0 +1,136 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/* eslint-disable react-hooks/rules-of-hooks */
+import * as React from "react";
+import { useState } from "react";
+import { TabButtonList, TabButton, TabButtonLink } from "./TabButtonList";
+import TabContext from "@mui/lab/TabContext";
+import { Button } from "../Button/Button";
+import Stack from "@mui/material/Stack";
+import TabPanel from "@mui/lab/TabPanel";
+import Typography from "@mui/material/Typography";
+import { faker } from "@faker-js/faker/locale/en";
+import Container from "@mui/material/Container";
+const meta = {
+    title: "smoot-design/TabButtons",
+    argTypes: {
+        variant: {
+            options: ["scrollable", "fullWidth", "standard"],
+            control: { type: "radio" },
+        },
+        styleVariant: {
+            options: ["default", "chat"],
+            control: { type: "radio" },
+            defaultValue: "default",
+        },
+        scrollButtons: {
+            options: ["auto", true, false],
+            control: { type: "radio" },
+        },
+    },
+    args: {
+        count: 4,
+        variant: "scrollable",
+        allowScrollButtonsMobile: true,
+        scrollButtons: "auto",
+    },
+    render: (_a) => {
+        var { count } = _a, others = __rest(_a, ["count"]);
+        const [value, setValue] = React.useState("tab1");
+        return (React.createElement(Container, { maxWidth: "sm" },
+            React.createElement(TabContext, { value: value },
+                React.createElement(Stack, { direction: "row" },
+                    React.createElement(TabButtonList, Object.assign({}, others, { onChange: (_event, val) => setValue(val) }), Array(count)
+                        .fill(null)
+                        .map((_, i) => (React.createElement(TabButton, { key: `tab-${i}`, value: `tab${i + 1}`, label: `Tab ${i + 1}` })))),
+                    React.createElement(Stack, { direction: "row", justifyContent: "end", sx: { paddingLeft: "16px" } },
+                        React.createElement(Button, null, "Other UI"))),
+                Array(count)
+                    .fill(null)
+                    .map((_, i) => (React.createElement(TabPanel, { key: `tab-${i}`, value: `tab${i + 1}` },
+                    React.createElement(Typography, { variant: "h4", component: "h4" },
+                        "Header ",
+                        i + 1),
+                    faker.lorem.paragraphs(2)))))));
+    },
+};
+export default meta;
+/**
+ * Use `TabButtonList` and `TabButton` to render a list of tabs styled as our tertiary buttons:
+ */
+export const ButtonTabs = {};
+/**
+ * `TabButtonList` chat style variant:
+ */
+export const ButtonTabsChatVariant = {
+    args: {
+        styleVariant: "chat",
+        variant: "fullWidth",
+        visibleScrollbar: false,
+    },
+    render: (_a) => {
+        var { count } = _a, others = __rest(_a, ["count"]);
+        const [value, setValue] = React.useState("tab1");
+        return (React.createElement(Container, { maxWidth: "sm" },
+            React.createElement(TabContext, { value: value },
+                React.createElement(Stack, { direction: "row" },
+                    React.createElement(TabButtonList, Object.assign({}, others, { onChange: (_event, val) => setValue(val) }), Array(count)
+                        .fill(null)
+                        .map((_, i) => (React.createElement(TabButton, { key: `tab-${i}`, value: `tab${i + 1}`, label: `Tab ${i + 1}` }))))),
+                Array(count)
+                    .fill(null)
+                    .map((_, i) => (React.createElement(TabPanel, { key: `tab-${i}`, value: `tab${i + 1}` },
+                    React.createElement(Typography, { variant: "h4", component: "h4" },
+                        "Header ",
+                        i + 1),
+                    faker.lorem.paragraphs(2)))))));
+    },
+};
+/**
+ * By default, the tabs will be scrollable if there are too many to fit in the container:
+ */
+export const ManyButtonTabs = {
+    args: {
+        count: 12,
+    },
+};
+/**
+ * Use `TabButtonLink` for tabs that should affect the URL:
+ */
+export const LinkTabs = {
+    parameters: {
+        nextjs: {
+            appDirectory: true,
+            navigation: {
+                pathname: "/#link2",
+            },
+        },
+    },
+    render: () => {
+        const [hash, setHash] = useState(() => window.location.hash);
+        React.useEffect(() => {
+            const handler = () => setHash(window.location.hash);
+            window.addEventListener("hashchange", handler);
+            return () => {
+                window.removeEventListener("hashchange", handler);
+            };
+        }, []);
+        return (React.createElement("div", null,
+            "Current Location:",
+            React.createElement("pre", null, hash),
+            React.createElement(TabContext, { value: hash },
+                React.createElement(TabButtonList, null,
+                    React.createElement(TabButtonLink, { value: "#link1", href: "#link1", label: "Tab 1" }),
+                    React.createElement(TabButtonLink, { value: "#link2", href: "#link2", label: "Tab 2" }),
+                    React.createElement(TabButtonLink, { value: "#link3", href: "#link3", label: "Tab 3" })))));
+    },
+};

package/dist/esm/components/TextField/TextField.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import type { InputProps } from "../Input/Input";
+import type { FormFieldWrapperProps } from "../internal/FormHelpers/FormHelpers";
+type TextFieldProps = Omit<FormFieldWrapperProps, "children"> & {
+    name: string;
+    disabled?: boolean;
+    value?: string | null;
+    size?: InputProps["size"];
+    placeholder?: string;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    fullWidth?: boolean;
+    /**
+     * Props forwarded to root of `<Input />`
+     */
+    InputProps?: InputProps;
+} & Pick<InputProps, "type" | "startAdornment" | "endAdornment" | "multiline" | "required" | "minRows" | "inputProps">;
+/**
+ * A form field for text input. Supports labels, help text, error text, and
+ * start/end adornments. Add `multiline` for a text area.
+ *
+ * - [TextField Documentation](https://mitodl.github.io/smoot-design/https://mitodl.github.io/smoot-design/)
+ *
+ * **Note:** This component shares a name a purpose with MUI's TextField, but
+ * does not share its entire API.
+ */
+declare const TextField: React.FC<TextFieldProps>;
+export { TextField };
+export type { TextFieldProps };

package/dist/esm/components/TextField/TextField.js

@@ -0,0 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from "react";
+import { Input } from "../Input/Input";
+import { FormFieldWrapper } from "../internal/FormHelpers/FormHelpers";
+/**
+ * A form field for text input. Supports labels, help text, error text, and
+ * start/end adornments. Add `multiline` for a text area.
+ *
+ * - [TextField Documentation](https://mitodl.github.io/smoot-design/https://mitodl.github.io/smoot-design/)
+ *
+ * **Note:** This component shares a name a purpose with MUI's TextField, but
+ * does not share its entire API.
+ */
+const TextField = ({ label, size, value, name, placeholder, helpText, errorText, error, required, disabled, onChange, onBlur, multiline, type, startAdornment, endAdornment, minRows, className, id, InputProps, inputProps, fullWidth, }) => {
+    return (React.createElement(FormFieldWrapper, { id: id, label: label, required: required, helpText: helpText, error: error, errorText: errorText, className: className, fullWidth: fullWidth }, (_a) => {
+        var { labelId } = _a, childProps = __rest(_a, ["labelId"]);
+        return (React.createElement(Input, Object.assign({ size: size, value: value, name: name, placeholder: placeholder, onChange: onChange, onBlur: onBlur, multiline: multiline, type: type, startAdornment: startAdornment, endAdornment: endAdornment, minRows: minRows, disabled: disabled, inputProps: inputProps }, InputProps, childProps)));
+    }));
+};
+export { TextField };

package/dist/esm/components/TextField/TextField.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TextField } from "./TextField";
+declare const meta: Meta<typeof TextField>;
+export default meta;
+type Story = StoryObj<typeof TextField>;
+export declare const Simple: Story;
+export declare const Sizes: Story;
+export declare const Widths: Story;
+export declare const Adornments: Story;
+export declare const States: Story;

package/dist/esm/components/TextField/TextField.stories.js

@@ -0,0 +1,133 @@
+import * as React from "react";
+import { TextField } from "./TextField";
+import { AdornmentButton } from "../Input/Input";
+import Stack from "@mui/material/Stack";
+import Grid from "@mui/material/Grid";
+import { RiSearchLine, RiCalendarLine, RiCloseLine } from "@remixicon/react";
+import { fn } from "@storybook/test";
+import { enumValues } from "../../story-utils";
+const SIZES = enumValues({
+    small: true,
+    medium: true,
+    large: true,
+    chat: true,
+    hero: true,
+});
+const ADORNMENTS = {
+    None: undefined,
+    SearchIcon: (React.createElement(AdornmentButton, null,
+        React.createElement(RiSearchLine, null))),
+    CalendarTodayIcon: (React.createElement(AdornmentButton, null,
+        React.createElement(RiCalendarLine, null))),
+    CloseIcon: (React.createElement(AdornmentButton, null,
+        React.createElement(RiCloseLine, null))),
+    "Close and Calendar": (React.createElement(React.Fragment, null,
+        React.createElement(AdornmentButton, null,
+            React.createElement(RiCloseLine, null)),
+        React.createElement(AdornmentButton, null,
+            React.createElement(RiCalendarLine, null)))),
+};
+const meta = {
+    title: "smoot-design/TextField",
+    component: TextField,
+    argTypes: {
+        size: {
+            options: SIZES,
+            control: { type: "select" },
+        },
+        startAdornment: {
+            options: Object.keys(ADORNMENTS),
+            mapping: ADORNMENTS,
+            control: { type: "select" },
+        },
+        endAdornment: {
+            options: Object.keys(ADORNMENTS),
+            mapping: ADORNMENTS,
+            control: { type: "select" },
+        },
+    },
+    args: {
+        onChange: fn(),
+        multiline: false,
+        disabled: false,
+        value: "some value",
+        placeholder: "placeholder",
+        label: "Label",
+        helpText: "Help text the quick brown fox jumps over the lazy dog",
+        errorText: "Error text the quick brown fox jumps over the lazy dog",
+    },
+};
+export default meta;
+export const Simple = {
+    render: (args) => {
+        return React.createElement(TextField, Object.assign({}, args));
+    },
+};
+export const Sizes = {
+    render: (args) => {
+        return (React.createElement(Stack, { direction: "row", gap: 1 },
+            React.createElement(TextField, Object.assign({}, args, { size: "small" })),
+            React.createElement(TextField, Object.assign({}, args, { size: "medium" })),
+            React.createElement(TextField, Object.assign({}, args, { size: "large" })),
+            React.createElement(TextField, Object.assign({}, args, { size: "hero" }))));
+    },
+    argTypes: { size: { table: { disable: true } } },
+};
+export const Widths = {
+    render: (args) => {
+        return (React.createElement(Stack, { direction: "column", gap: 1 },
+            React.createElement(TextField, Object.assign({}, args, { label: "default" })),
+            React.createElement(TextField, Object.assign({}, args, { label: "fullWidth", fullWidth: true }))));
+    },
+    argTypes: { fullWidth: { table: { disable: true } } },
+};
+export const Adornments = {
+    render: (args) => {
+        const adornments = [
+            { startAdornment: ADORNMENTS.SearchIcon },
+            { endAdornment: ADORNMENTS.CloseIcon },
+            {
+                startAdornment: ADORNMENTS.SearchIcon,
+                endAdornment: ADORNMENTS["Close and Calendar"],
+            },
+        ];
+        return (React.createElement(Grid, { container: true, maxWidth: "600px", spacing: 2 }, Object.values(adornments).flatMap((props, i) => SIZES.map((size) => {
+            return (React.createElement(Grid, { item: true, xs: 6, key: `${i}-${size}` },
+                React.createElement(TextField, Object.assign({}, args, { size: size }, props))));
+        }))));
+    },
+    argTypes: {
+        startAdornment: { table: { disable: true } },
+        endAdornment: { table: { disable: true } },
+    },
+};
+export const States = {
+    render: (args) => {
+        return (React.createElement(Grid, { container: true, spacing: 2, alignItems: "top", maxWidth: "400px" },
+            React.createElement(Grid, { item: true, xs: 4 }, "Placeholder"),
+            React.createElement(Grid, { item: true, xs: 8 },
+                React.createElement(TextField, Object.assign({}, args, { value: "" }))),
+            React.createElement(Grid, { item: true, xs: 4 }, "Default"),
+            React.createElement(Grid, { item: true, xs: 8 },
+                React.createElement(TextField, Object.assign({}, args))),
+            React.createElement(Grid, { item: true, xs: 4 }, "Required"),
+            React.createElement(Grid, { item: true, xs: 8 },
+                React.createElement(TextField, Object.assign({ required: true }, args))),
+            React.createElement(Grid, { item: true, xs: 4 }, "Error"),
+            React.createElement(Grid, { item: true, xs: 8 },
+                React.createElement(TextField, Object.assign({}, args, { error: true }))),
+            React.createElement(Grid, { item: true, xs: 4 }, "Disabled"),
+            React.createElement(Grid, { item: true, xs: 8 },
+                React.createElement(TextField, Object.assign({}, args, { disabled: true })))));
+    },
+    args: {
+        placeholder: "This is placeholder text.",
+        value: "Some value",
+    },
+    argTypes: {
+        placeholder: { table: { disable: true } },
+        value: { table: { disable: true } },
+        error: { table: { disable: true } },
+        disabled: { table: { disable: true } },
+    },
+};

package/dist/esm/components/TextField/TextField.test.d.ts

@@ -0,0 +1 @@
+export {};