@mitodl/smoot-design 0.0.0-0a23f44

package/dist/esm/components/Checkbox/Checkbox.js

@@ -0,0 +1,81 @@
+import * as React from "react";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+// prettier-ignore
+const hoverSprite = (theme) => css `
+  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0H17C17.5523 0 18 0.44772 18 1V17C18 17.5523 17.5523 18 17 18H1C0.44772 18 0 17.5523 0 17V1C0 0.44772 0.44772 0 1 0ZM2 2V16H16V2H2Z' fill='${encodeURIComponent(theme.custom.colors.silverGrayDark)}'/%3E%3C/svg%3E%0A");`;
+// prettier-ignore
+const checkedSprite = (theme) => css `
+  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0H17C17.5523 0 18 0.44772 18 1V17C18 17.5523 17.5523 18 17 18H1C0.44772 18 0 17.5523 0 17V1C0 0.44772 0.44772 0 1 0ZM8.0026 13L15.0737 5.92893L13.6595 4.51472L8.0026 10.1716L5.17421 7.3431L3.75999 8.7574L8.0026 13Z' fill='${encodeURIComponent(theme.custom.colors.red)}'/%3E%3C/svg%3E%0A");`;
+/**
+ * Base styles for child checkboxes.
+ */
+// prettier-ignore
+const childCheckboxStyles = (theme) => css `
+  input[type="checkbox"] {
+    margin-left: 0;
+    margin-right: 0;
+    height: 24px;
+    width: 24px;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0H17C17.5523 0 18 0.44772 18 1V17C18 17.5523 17.5523 18 17 18H1C0.44772 18 0 17.5523 0 17V1C0 0.44772 0.44772 0 1 0ZM2 2V16H16V2H2Z' fill='${encodeURIComponent(theme.custom.colors.silverGrayLight)}'/%3E%3C/svg%3E%0A");
+    background-repeat: no-repeat;
+    background-position: 3px 3px;
+    flex-shrink: 0;
+    cursor: pointer;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  input[type="checkbox"]:checked {
+    ${checkedSprite(theme)}
+    + .checkbox-label {
+      color: ${theme.custom.colors.darkGray2};
+    }
+  }
+
+  /*
+  * This also triggers when the label is hovered.
+  * See https://stackoverflow.com/a/9101344/2747370
+  */
+  input[type="checkbox"]:hover:not(:disabled, :checked) {
+    ${hoverSprite(theme)}
+    & + .checkbox-label {
+      color: ${theme.custom.colors.darkGray2};
+    }
+  }
+`;
+const Container = styled.div(({ theme }) => [
+    {
+        height: 24,
+        label: Object.assign({ display: "flex", alignItems: "center", cursor: "pointer" }, theme.typography.body2),
+        'input[type="checkbox"] + .checkbox-label': Object.assign({ color: theme.custom.colors.silverGrayDark }, theme.typography.body2),
+        'input[type="checkbox"]:disabled + .checkbox-label': {
+            cursor: "not-allowed",
+        },
+        'label:has(input[type="checkbox"]:disabled)': {
+            cursor: "not-allowed",
+        },
+        '&& input[type="checkbox"]': {
+            margin: 0,
+            marginRight: 4,
+            // Help avoid focus outline from being cutoff
+            ":focus-visible": {
+                outlineOffset: -1,
+            },
+        },
+    },
+    // Insert childCheckboxStyles and hoverSprite as additional css
+    childCheckboxStyles(theme),
+]);
+/**
+ * A standalone checkbox. For several checkboxes together, use the `CheckboxChoiceField` component.
+ */
+const Checkbox = ({ label, value, name, checked, onChange, className, disabled = false, }) => {
+    return (React.createElement(Container, { className: className }, label ? (React.createElement("label", null,
+        React.createElement("input", { type: "checkbox", name: name, value: value, checked: checked, onChange: onChange, disabled: disabled }),
+        React.createElement("span", { className: "checkbox-label" }, label))) : (React.createElement("input", { type: "checkbox", name: name, value: value, checked: checked, onChange: onChange, disabled: disabled }))));
+};
+export { Checkbox, childCheckboxStyles };

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Checkbox } from "./Checkbox";
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Simple: Story;
+export declare const WithLabel: Story;
+export declare const Disabled: Story;

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

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { useState } from "react";
+import { Checkbox } from "./Checkbox";
+const StateWrapper = (props) => {
+    const [checked, setChecked] = useState(!!props.checked);
+    const handleChange = (event) => {
+        var _a;
+        setChecked(event.target.checked);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    };
+    return React.createElement(Checkbox, Object.assign({}, props, { checked: checked, onChange: handleChange }));
+};
+const meta = {
+    title: "smoot-design/Checkbox",
+    component: Checkbox,
+    render: (args) => React.createElement(StateWrapper, Object.assign({}, args)),
+};
+export default meta;
+export const Simple = {};
+export const WithLabel = {
+    args: {
+        label: "Checkbox",
+    },
+};
+export const Disabled = {
+    args: {
+        label: "Disabled",
+        disabled: true,
+    },
+};

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

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { CheckboxProps } from "../Checkbox/Checkbox";
+type CheckboxChoice = Omit<CheckboxProps, "name" | "onChange" | "checked"> & {
+    value: string;
+};
+export type CheckboxChoiceFieldProps = {
+    label?: React.ReactNode;
+    value?: string[];
+    name?: string;
+    choices: CheckboxChoice[];
+    values?: string[];
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, values: string[]) => void;
+    className?: string;
+    vertical?: boolean;
+    disabled?: boolean;
+};
+/**
+ * Checkboxes grouped together as a fieldset with a label.
+ */
+declare const CheckboxChoiceField: React.FC<CheckboxChoiceFieldProps>;
+export { CheckboxChoiceField };

package/dist/esm/components/CheckboxChoiceField/CheckboxChoiceField.js

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { Checkbox } from "../Checkbox/Checkbox";
+import FormControl from "@mui/material/FormControl";
+import FormLabel from "@mui/material/FormLabel";
+import styled from "@emotion/styled";
+const Container = styled.div(({ theme }) => ({
+    display: "flex",
+    gap: "32px",
+    flexDirection: "row",
+    [theme.breakpoints.down("md")]: {
+        flexDirection: "column",
+    },
+}));
+const VerticalContainer = styled(Container)({
+    gap: "18px",
+    flexDirection: "column",
+});
+const Label = styled(FormLabel)(({ theme }) => (Object.assign({ marginTop: "0", marginBottom: "16px", width: "100%", color: theme.custom.colors.darkGray2 }, theme.typography.subtitle2))); // https://mui.com/material-ui/guides/typescript/?srsltid=AfmBOoo9kvRiALbxt4kAarRGiKaiJ7tbui5tstoL23DYscJPyk6UaTul#complications-with-the-component-prop
+/**
+ * Checkboxes grouped together as a fieldset with a label.
+ */
+const CheckboxChoiceField = ({ label, name, choices, values, onChange, className, vertical = false, disabled = false, }) => {
+    const isChecked = (value) => {
+        if (values === undefined)
+            return undefined;
+        return values.includes(value);
+    };
+    const _Container = vertical ? VerticalContainer : Container;
+    const handleChange = (event) => {
+        const fieldset = event.target.closest("fieldset");
+        const checked = (fieldset === null || fieldset === void 0 ? void 0 : fieldset.querySelectorAll("input[type='checkbox']:checked")) || [];
+        onChange === null || onChange === void 0 ? void 0 : onChange(event, Array.from(checked).map((input) => input.value));
+    };
+    return (React.createElement(FormControl, { component: "fieldset", sx: { width: "100%" }, className: className, disabled: disabled },
+        label && React.createElement(Label, { component: "legend" }, label),
+        React.createElement(_Container, null, choices.map((choice) => {
+            return (React.createElement(Checkbox, Object.assign({ key: choice.value, name: name, checked: isChecked(choice.value), onChange: handleChange, disabled: disabled }, choice)));
+        }))));
+};
+export { CheckboxChoiceField };

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CheckboxChoiceField } from "./CheckboxChoiceField";
+declare const meta: Meta<typeof CheckboxChoiceField>;
+export default meta;
+type Story = StoryObj<typeof CheckboxChoiceField>;
+export declare const WithoutLabel: Story;
+export declare const WithLabel: Story;
+export declare const Disabled: Story;

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

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { CheckboxChoiceField, } from "./CheckboxChoiceField";
+import Typography from "@mui/material/Typography";
+import { fn } from "@storybook/test";
+const CHOICES = [
+    { label: "Choice 1", value: "1" },
+    { label: "Choice 2", value: "2" },
+    { label: "Choice 3", value: "3", disabled: true },
+    { label: "Choice 4", value: "4" },
+];
+const StateWrapper = (props) => {
+    var _a;
+    const [values, setValues] = React.useState((_a = props.value) !== null && _a !== void 0 ? _a : []);
+    const handleChange = (event, values) => {
+        fn()(event, values);
+        setValues(values);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(CheckboxChoiceField, Object.assign({}, props, { values: values, onChange: handleChange })),
+        React.createElement("br", null),
+        React.createElement("br", null),
+        React.createElement(Typography, { variant: "body1" },
+            "Selected: ", values === null || values === void 0 ? void 0 :
+            values.join(", "))));
+};
+const meta = {
+    title: "smoot-design/CheckboxChoiceField",
+    component: CheckboxChoiceField,
+    render: (args) => React.createElement(StateWrapper, Object.assign({}, args)),
+    args: {
+        choices: CHOICES,
+        name: "checkbox-group",
+    },
+};
+export default meta;
+export const WithoutLabel = {};
+export const WithLabel = {
+    args: {
+        label: "CheckboxChoiceField",
+    },
+};
+export const Disabled = {
+    args: {
+        label: "CheckboxChoiceField disabled",
+        disabled: true,
+    },
+};

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

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

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

@@ -0,0 +1,50 @@
+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, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { CheckboxChoiceField, } from "./CheckboxChoiceField";
+import { ThemeProvider } from "../ThemeProvider/ThemeProvider";
+describe("CheckboxChoiceField (Controlled)", () => {
+    // Test scenarios where a `values` prop is provided.
+    it("should call onChange with correct arguments when a checkbox is clicked", () => __awaiter(void 0, void 0, void 0, function* () {
+        const handleChange = jest.fn();
+        const choices = [
+            { label: "Option 1", value: "1" },
+            { label: "Option 2", value: "2" },
+            { label: "Option 3", value: "3" },
+        ];
+        render(React.createElement(CheckboxChoiceField, { name: "test-group", choices: choices, values: ["2"], onChange: handleChange }), { wrapper: ThemeProvider });
+        const checkbox3 = screen.getByRole("checkbox", { name: "Option 3" });
+        yield userEvent.click(checkbox3);
+        expect(handleChange).toHaveBeenCalledTimes(1);
+        expect(handleChange).toHaveBeenCalledWith(expect.objectContaining({ target: checkbox3 }), ["2", "3"]);
+    }));
+});
+describe("CheckboxChoiceField (Uncontrolled)", () => {
+    // Test scenarios where a `values` prop is not provided.
+    it("should call onChange with correct arguments when a checkbox is clicked", () => __awaiter(void 0, void 0, void 0, function* () {
+        const handleChange = jest.fn();
+        const choices = [
+            { label: "Option 1", value: "1" },
+            { label: "Option 2", value: "2" },
+            { label: "Option 3", value: "3" },
+        ];
+        render(React.createElement(CheckboxChoiceField, { name: "test-group", choices: choices, onChange: handleChange }), { wrapper: ThemeProvider });
+        const checkbox2 = screen.getByRole("checkbox", { name: "Option 2" });
+        yield userEvent.click(checkbox2);
+        expect(handleChange).toHaveBeenCalledTimes(1);
+        expect(handleChange).toHaveBeenCalledWith(expect.objectContaining({ target: checkbox2 }), ["2"]);
+        const checkbox3 = screen.getByRole("checkbox", { name: "Option 3" });
+        yield userEvent.click(checkbox3);
+        expect(handleChange).toHaveBeenCalledTimes(2);
+        expect(handleChange).toHaveBeenCalledWith(expect.objectContaining({ target: checkbox3 }), ["2", "3"]);
+    }));
+});

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 };