@mitodl/smoot-design 0.0.0-1967631

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

@@ -0,0 +1,132 @@
+import * as React from "react";
+import { Button, ButtonLink } from "./Button";
+import Grid from "@mui/material/Grid2";
+import Stack from "@mui/material/Stack";
+import { RiArrowLeftLine, RiDeleteBinLine, RiTestTubeLine, RiMailLine, } from "@remixicon/react";
+import { fn } from "@storybook/test";
+import { enumValues } from "../../story-utils";
+const ICONS = {
+    None: undefined,
+    ArrowBackIcon: React.createElement(RiArrowLeftLine, null),
+    DeleteIcon: React.createElement(RiDeleteBinLine, null),
+    TestTubeIcon: React.createElement(RiTestTubeLine, null),
+};
+const VARIANTS = enumValues({
+    primary: true,
+    secondary: true,
+    tertiary: true,
+    bordered: true,
+    text: true,
+});
+const STABLE_VARIANTS = VARIANTS.filter((v) => !v.startsWith("unstable"));
+const SIZES = enumValues({
+    small: true,
+    medium: true,
+    large: true,
+});
+const EDGES = enumValues({
+    circular: true,
+    rounded: true,
+    none: true,
+});
+const meta = {
+    title: "smoot-design/Button",
+    component: Button,
+    argTypes: {
+        startIcon: {
+            options: Object.keys(ICONS),
+            mapping: ICONS,
+        },
+        endIcon: {
+            options: Object.keys(ICONS),
+            mapping: ICONS,
+        },
+    },
+    args: {
+        onClick: fn(),
+    },
+};
+export default meta;
+export const VariantsAndEdge = {
+    render: (args) => (React.createElement(React.Fragment, null,
+        React.createElement(Stack, { direction: "row", gap: 2, sx: { my: 2 } },
+            React.createElement(Button, Object.assign({ edge: "none", variant: "primary" }, args), "Primary"),
+            React.createElement(Button, Object.assign({ edge: "none", variant: "secondary" }, args), "Secondary"),
+            React.createElement(Button, Object.assign({ edge: "none", variant: "tertiary" }, args), "Tertiary"),
+            React.createElement(Button, Object.assign({ edge: "none", variant: "bordered" }, args), "Bordered"),
+            React.createElement(Button, Object.assign({ edge: "none", variant: "text" }, args), "Text")),
+        React.createElement(Stack, { direction: "row", gap: 2, sx: { my: 2 } },
+            React.createElement(Button, Object.assign({ edge: "rounded", variant: "primary" }, args), "Primary"),
+            React.createElement(Button, Object.assign({ edge: "rounded", variant: "secondary" }, args), "Secondary"),
+            React.createElement(Button, Object.assign({ edge: "rounded", variant: "tertiary" }, args), "Tertiary"),
+            React.createElement(Button, Object.assign({ edge: "rounded", variant: "bordered" }, args), "Bordered"),
+            React.createElement(Button, Object.assign({ edge: "rounded", variant: "text" }, args), "Text")),
+        React.createElement(Stack, { direction: "row", gap: 2, sx: { my: 2 } },
+            React.createElement(Button, Object.assign({ edge: "circular", variant: "primary" }, args), "Primary"),
+            React.createElement(Button, Object.assign({ edge: "circular", variant: "secondary" }, args), "Secondary"),
+            React.createElement(Button, Object.assign({ edge: "circular", variant: "tertiary" }, args), "Tertiary"),
+            React.createElement(Button, Object.assign({ edge: "circular", variant: "bordered" }, args), "Bordered"),
+            React.createElement(Button, Object.assign({ edge: "circular", variant: "text" }, args), "Text")))),
+    tags: ["main"],
+};
+const RESPONSIVE = [true, false];
+export const Sizes = {
+    argTypes: {
+        size: { table: { disable: true } },
+    },
+    render: (args) => (React.createElement(Grid, { container: true, sx: { my: 2, maxWidth: "600px" }, alignItems: "center" }, RESPONSIVE.flatMap((responsive) => {
+        return (React.createElement(React.Fragment, { key: String(responsive) },
+            React.createElement(Grid, { size: { xs: 12 } },
+                React.createElement("code", null, `responsive={${responsive.toString()}}`)),
+            SIZES.map((size) => (React.createElement(Grid, { size: { xs: 4 }, gap: 2, display: "flex", alignItems: "center", key: size },
+                React.createElement(Button, Object.assign({}, args, { size: size, responsive: responsive }), size))))));
+    }))),
+};
+export const WithIcons = {
+    render: (args) => (React.createElement(Stack, { direction: "column", alignItems: "start", gap: 2, sx: { my: 2 } }, Object.entries(ICONS).map(([key, icon]) => (React.createElement(Button, Object.assign({}, args, { startIcon: icon, key: key }), key))))),
+};
+const EXTRA_PROPS = [
+    {},
+    /**
+     * Show RiTestTubeLine because it is a fairly thin icon
+     */
+    { startIcon: React.createElement(RiTestTubeLine, null) },
+    /**
+     * Show RiTestTubeLine because it is a fairly thick icon
+     */
+    { startIcon: React.createElement(RiMailLine, null) },
+    { endIcon: React.createElement(RiTestTubeLine, null) },
+    { endIcon: React.createElement(RiMailLine, null) },
+];
+/**
+ * `ButtonLink` is a styled `Button` that renders an anchor tag.
+ *
+ * To use a custom link component (E.g. `Link` from `react-router` or `next/link`),
+ * pass it as the `Component` prop. Alternatively, customize the project-wide
+ * default link adapter via [Theme's LinkAdapter](../?path=/docs/smoot-design-themeprovider--docs)
+ */
+export const Links = {
+    render: () => (React.createElement(Stack, { direction: "row", gap: 2, sx: { my: 2 } },
+        React.createElement(ButtonLink, { href: "#fake", variant: "primary" }, "Link"),
+        React.createElement(ButtonLink, { href: "#fake", variant: "secondary" }, "Link"),
+        React.createElement(ButtonLink, { href: "#fake", variant: "tertiary" }, "Link"),
+        React.createElement(ButtonLink, { href: "#fake", variant: "bordered" }, "Link"),
+        React.createElement(ButtonLink, { href: "#fake", variant: "text" }, "Link"))),
+};
+export const Showcase = {
+    render: (args) => (React.createElement(Grid, { container: true, rowGap: 2, sx: { maxWidth: "600px" } }, STABLE_VARIANTS.flatMap((variant) => EDGES.flatMap((edge) => EXTRA_PROPS.map((extraProps, i) => {
+        return (React.createElement(React.Fragment, { key: `${variant}-${edge}-${i}` },
+            React.createElement(Grid, { size: { xs: 3 } },
+                React.createElement("pre", null,
+                    "variant=",
+                    variant,
+                    React.createElement("br", null),
+                    "edge=",
+                    edge)),
+            SIZES.map((size) => (React.createElement(Grid, { size: { xs: 3 }, display: "flex", alignItems: "center", key: `${size}` },
+                React.createElement(Button, Object.assign({}, args, { variant: variant, edge: edge, size: size }, extraProps), args.children))))));
+    }))))),
+    args: {
+        children: "Click me",
+    },
+};

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

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

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

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { ThemeProvider, createTheme } from "../ThemeProvider/ThemeProvider";
+import { ButtonLink } from "./Button";
+import { ActionButtonLink } from "./ActionButton";
+const withLinkOverride = createTheme({
+    custom: {
+        LinkAdapter: React.forwardRef(function LinkAdapter(props, ref) {
+            return (
+            // eslint-disable-next-line jsx-a11y/anchor-has-content
+            React.createElement("a", Object.assign({ ref: ref, "data-custom": "theme-default" }, props)));
+        }),
+    },
+});
+describe.each([
+    //
+    { ButtonComponent: ButtonLink },
+    { ButtonComponent: ActionButtonLink },
+])("$ButtonComponent.displayName overrides", ({ ButtonComponent }) => {
+    test("Uses anchor by default", () => {
+        render(React.createElement(ButtonComponent, { href: "/test" }, "Link text here"), {
+            wrapper: ThemeProvider,
+        });
+        const link = screen.getByRole("link");
+        expect(link.dataset.custom).toBe(undefined);
+    });
+    test("Uses theme's override if supplied", () => {
+        render(React.createElement(ButtonComponent, { href: "/test" }, "Link text here"), {
+            wrapper: (props) => React.createElement(ThemeProvider, Object.assign({ theme: withLinkOverride }, props)),
+        });
+        const link = screen.getByRole("link");
+        expect(link.dataset.custom).toBe("theme-default");
+    });
+    test("Uses component's override if supplied", () => {
+        const LinkImplementation = (props) => (
+        // eslint-disable-next-line jsx-a11y/anchor-has-content
+        React.createElement("a", Object.assign({ "data-custom": "anchor-override" }, props)));
+        render(React.createElement(ButtonComponent, { Component: LinkImplementation, href: "/test" }, "Link text here"), {
+            wrapper: (props) => (React.createElement(ThemeProvider, Object.assign({ theme: withLinkOverride }, props))),
+        });
+        const link = screen.getByRole("link");
+        expect(link.dataset.custom).toBe("anchor-override");
+    });
+});

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+/**
+ * ImageAdapterPropsOverrides can be used with module augmentation to provide
+ * extra props to ButtonLink.
+ *
+ * For example, in a NextJS App, you might set `next/image` as your default
+ * image implementation, and use ImageAdapterPropsOverrides to provide
+ * `next/image`-specific props.
+ */
+interface ImageAdapterPropsOverrides {
+}
+type ImageAdapterProps = React.ComponentProps<"img"> & {
+    Component?: React.ElementType;
+} & ImageAdapterPropsOverrides;
+/**
+ * Overridable Image component.
+ * - If `Component` is provided, renders as `Component`
+ * - else, if `theme.custom.ImageAdapter` is provided, renders as `theme.custom.ImageAdapter`
+ * - else, renders as `img` tag
+ */
+declare const ImageAdapter: React.ForwardRefExoticComponent<Omit<ImageAdapterProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
+export { ImageAdapter };
+export type { ImageAdapterPropsOverrides, ImageAdapterProps };

package/dist/esm/components/ImageAdapter/ImageAdapter.js

@@ -0,0 +1,27 @@
+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 { useTheme } from "@emotion/react";
+/**
+ * Overridable Image component.
+ * - If `Component` is provided, renders as `Component`
+ * - else, if `theme.custom.ImageAdapter` is provided, renders as `theme.custom.ImageAdapter`
+ * - else, renders as `img` tag
+ */
+const ImageAdapter = React.forwardRef(function ImageAdapter(_a, ref) {
+    var _b;
+    var { Component } = _a, props = __rest(_a, ["Component"]);
+    const theme = useTheme();
+    const ImgComponent = (_b = Component !== null && Component !== void 0 ? Component : theme.custom.ImgAdapter) !== null && _b !== void 0 ? _b : "img";
+    return React.createElement(ImgComponent, Object.assign({ ref: ref }, props));
+});
+export { ImageAdapter };

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

@@ -0,0 +1,116 @@
+import * as React from "react";
+import type { InputBaseProps } from "@mui/material/InputBase";
+import type { Theme } from "@mui/material/styles";
+type Size = "small" | "medium" | "large" | "chat" | "hero";
+type CustomInputProps = {
+    /**
+     * If true, the input will display one size smaller at mobile breakpoint.
+     */
+    responsive?: boolean;
+};
+type MuiDocOverride = {
+    size?: Size;
+    /**
+     * Slot for icon adornments.
+     *
+     * If the icon is a button, use `AdornmentButton` component.
+     */
+    startAdornment?: React.ReactNode;
+    /**
+     * Slot for icon adornments.
+     *
+     * If the icon is a button, use `AdornmentButton` component.
+     */
+    endAdornment?: React.ReactNode;
+};
+type InputProps = CustomInputProps & MuiDocOverride & Omit<InputBaseProps, "color" | keyof MuiDocOverride>;
+/**
+ * Base styles for Input and Select components. Includes border, color, hover effects.
+ */
+declare const baseInputStyles: (theme: Theme) => {
+    backgroundColor: string;
+    color: string;
+    borderColor: string;
+    borderWidth: string;
+    borderStyle: string;
+    borderRadius: string;
+    overflow: string;
+    "&.Mui-disabled": {
+        backgroundColor: string;
+    };
+    "&:hover:not(.Mui-disabled):not(.Mui-focused)": {
+        borderColor: string;
+    };
+    "&.Mui-focused": {
+        /**
+         * When change border width, it affects either the elements outside of it or
+         * inside based on the border-box setting.
+         *
+         * Instead of changing the border width, we hide the border and change width
+         * using outline.
+         */
+        borderColor: string;
+        outline: string;
+        outlineOffset: string;
+    };
+    "&.Mui-error": {
+        borderColor: string;
+        outlineColor: string;
+    };
+    "& input::placeholder, textarea::placeholder": {
+        color: string;
+        opacity: number;
+    };
+    "& input:placeholder-shown, textarea:placeholder-shown": {
+        textOverflow: string;
+    };
+    "& textarea": {
+        paddingTop: string;
+        paddingBottom: string;
+    };
+    "&.MuiInputBase-adornedStart": {
+        paddingLeft: string;
+        input: {
+            paddingLeft: string;
+        };
+    };
+    "&.MuiInputBase-adornedEnd": {
+        paddingRight: string;
+        input: {
+            paddingRight: string;
+        };
+    };
+};
+/**
+ * Use `Input` for a visually unlabelled input field. If used, it should still
+ * have an accessible label, e.g., provided via `aria-label`.
+ * For a labeled input field, use `TextField`. instead.
+ *
+ * **Note:** This component is a styled version of MUI's `InputBase`. See
+ * MUI's documentation for full info.
+ *
+ * - [Smoot Design Input Documentation](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-input--docs)
+ * - [InputBase Documentation](https://mui.com/api/input-base/)
+ */
+declare const Input: React.FC<InputProps>;
+declare const AdornmentButtonStyled: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+type AdornmentButtonProps = React.ComponentProps<typeof AdornmentButtonStyled>;
+/**
+ * Button to be used with `startAdornment` and `endAdornment` props on Input and
+ * TextField components. AdornmentButton takes care of positioning and other
+ * styling concerns.
+ *
+ * NOTES:
+ *  - It is generally expected that the content of the AdornmentButton is a
+ *    Remix Icon component. https://remixicon.com/
+ *  - By default, the AdornmentButton calls `preventDefault` on `mouseDown`
+ *    events. This prevents the button from stealing focus from the input on
+ *    click. The button is still focusable via keyboard events. You can override
+ *    this behavior by passing your own `onMouseDown` handler.
+ */
+declare const AdornmentButton: React.FC<AdornmentButtonProps>;
+export { AdornmentButton, Input, baseInputStyles };
+export type { InputProps, AdornmentButtonProps };

package/dist/esm/components/Input/Input.js

@@ -0,0 +1,232 @@
+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 styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import InputBase from "@mui/material/InputBase";
+import classnames from "classnames";
+const defaultProps = {
+    size: "medium",
+    multiline: false,
+};
+const responsiveSize = {
+    small: "small",
+    medium: "small",
+    large: "medium",
+    chat: "chat",
+    hero: "large",
+};
+const sizeStyles = ({ size, theme, multiline }) => css([
+    (size === "small" || size === "medium") && Object.assign({}, theme.typography.body2),
+    (size === "large" || size === "chat" || size === "hero") && Object.assign({ ".remixicon": {
+            width: "24px",
+            height: "24px",
+        } }, theme.typography.body1),
+    size === "medium" && {
+        paddingLeft: "12px",
+        paddingRight: "12px",
+    },
+    size === "small" &&
+        !multiline && {
+        height: "32px",
+    },
+    size === "medium" &&
+        !multiline && {
+        height: "40px",
+    },
+    size === "large" &&
+        !multiline && {
+        height: "48px",
+    },
+    size === "chat" &&
+        !multiline && {
+        height: "56px",
+    },
+    size === "hero" &&
+        !multiline && {
+        height: "72px",
+    },
+    size === "small" && {
+        padding: "0 8px",
+        ".Mit-AdornmentButton": {
+            width: "32px",
+            ".remixicon": {
+                width: "16px",
+                height: "16px",
+            },
+        },
+    },
+    size === "medium" && {
+        padding: "0 12px",
+        ".Mit-AdornmentButton": {
+            width: "40px",
+            ".remixicon": {
+                width: "20px",
+                height: "20px",
+            },
+        },
+    },
+    size === "large" && {
+        padding: "0 16px",
+        ".Mit-AdornmentButton": {
+            width: "48px",
+        },
+    },
+    size === "chat" && {
+        padding: "0 16px",
+        borderRadius: "8px",
+        borderColor: theme.custom.colors.silverGrayLight,
+        backgroundColor: theme.custom.colors.white,
+        ".Mit-AdornmentButton": {
+            padding: "0 16px",
+        },
+    },
+    size === "hero" && {
+        padding: "0 24px",
+        ".Mit-AdornmentButton": {
+            width: "72px",
+        },
+    },
+]);
+/**
+ * Base styles for Input and Select components. Includes border, color, hover effects.
+ */
+const baseInputStyles = (theme) => ({
+    backgroundColor: "white",
+    color: theme.custom.colors.darkGray2,
+    borderColor: theme.custom.colors.silverGrayLight,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: "4px",
+    overflow: "hidden",
+    "&.Mui-disabled": {
+        backgroundColor: theme.custom.colors.lightGray1,
+    },
+    "&:hover:not(.Mui-disabled):not(.Mui-focused)": {
+        borderColor: theme.custom.colors.darkGray2,
+    },
+    "&.Mui-focused": {
+        /**
+         * When change border width, it affects either the elements outside of it or
+         * inside based on the border-box setting.
+         *
+         * Instead of changing the border width, we hide the border and change width
+         * using outline.
+         */
+        borderColor: "transparent",
+        outline: "2px solid currentcolor",
+        outlineOffset: "-2px",
+    },
+    "&.Mui-error": {
+        borderColor: theme.custom.colors.red,
+        outlineColor: theme.custom.colors.red,
+    },
+    "& input::placeholder, textarea::placeholder": {
+        color: theme.custom.colors.silverGrayDark,
+        opacity: 1, // some browsers apply opacity to placeholder text
+    },
+    "& input:placeholder-shown, textarea:placeholder-shown": {
+        textOverflow: "ellipsis",
+    },
+    "& textarea": {
+        paddingTop: "8px",
+        paddingBottom: "8px",
+    },
+    "&.MuiInputBase-adornedStart": {
+        paddingLeft: "0",
+        input: {
+            paddingLeft: "8px",
+        },
+    },
+    "&.MuiInputBase-adornedEnd": {
+        paddingRight: "0",
+        input: {
+            paddingRight: "8px",
+        },
+    },
+});
+const noForward = Object.keys({
+    responsive: true,
+});
+/**
+ * Use `Input` for a visually unlabelled input field. If used, it should still
+ * have an accessible label, e.g., provided via `aria-label`.
+ * For a labeled input field, use `TextField`. instead.
+ *
+ * **Note:** This component is a styled version of MUI's `InputBase`. See
+ * MUI's documentation for full info.
+ *
+ * - [Smoot Design Input Documentation](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-input--docs)
+ * - [InputBase Documentation](https://mui.com/api/input-base/)
+ */
+const Input = styled(InputBase, {
+    shouldForwardProp: (prop) => !noForward.includes(prop),
+})(({ theme, size = defaultProps.size, multiline, responsive }) => [
+    baseInputStyles(theme),
+    sizeStyles({ size, theme, multiline }),
+    responsive && {
+        [theme.breakpoints.down("sm")]: sizeStyles({
+            size: responsiveSize[size],
+            theme,
+            multiline,
+        }),
+    },
+]);
+const AdornmentButtonStyled = styled.button(({ theme, disabled }) => (Object.assign(Object.assign({}, theme.typography.button), { 
+    // display
+    display: "flex", flexShrink: 0, justifyContent: "center", alignItems: "center", 
+    // background and border
+    border: "none", background: "transparent", transition: `background ${theme.transitions.duration.short}ms`, 
+    // cursor
+    cursor: disabled ? "default" : "pointer", ":disabled": {
+        cursor: "default",
+        svg: {
+            fill: theme.custom.colors.silverGray,
+        },
+    }, ":hover": {
+        background: disabled ? "inherit" : "rgba(0, 0, 0, 0.06)",
+    }, color: theme.custom.colors.silverGray, ".MuiInputBase-root:hover &": {
+        color: "inherit",
+    }, ".MuiInputBase-root.Mui-focused &": {
+        color: "inherit",
+    }, ".MuiInputBase-root.Mui-disabled &": {
+        color: "inherit",
+    }, height: "100%" })));
+const noFocus = (e) => e.preventDefault();
+/**
+ * Button to be used with `startAdornment` and `endAdornment` props on Input and
+ * TextField components. AdornmentButton takes care of positioning and other
+ * styling concerns.
+ *
+ * NOTES:
+ *  - It is generally expected that the content of the AdornmentButton is a
+ *    Remix Icon component. https://remixicon.com/
+ *  - By default, the AdornmentButton calls `preventDefault` on `mouseDown`
+ *    events. This prevents the button from stealing focus from the input on
+ *    click. The button is still focusable via keyboard events. You can override
+ *    this behavior by passing your own `onMouseDown` handler.
+ */
+const AdornmentButton = (_a) => {
+    var { className } = _a, others = __rest(_a, ["className"]);
+    return (React.createElement(AdornmentButtonStyled
+    /**
+     * If the input is focused and user clicks the AdornmentButton, we don't
+     * want to steal focus from the input.
+     */
+    , Object.assign({ 
+        /**
+         * If the input is focused and user clicks the AdornmentButton, we don't
+         * want to steal focus from the input.
+         */
+        onMouseDown: noFocus, className: classnames("Mit-AdornmentButton", className) }, others)));
+};
+export { AdornmentButton, Input, baseInputStyles };

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Input } from "./Input";
+declare const meta: Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof Input>;
+export declare const Sizes: Story;
+/**
+ * **Note:** Adornments should be wrapped in an `AdornmentButton` component.
+ *
+ * ```tsx
+ * <Input startAdornment={
+ *  <AdornmentButton>
+ *    <RiSearchLine />
+ *  </AdornmentButton>
+ * } {...otherProps} />
+ * ```
+ */
+export declare const Adornments: Story;
+export declare const States: Story;