@mitodl/smoot-design 0.0.0-0a23f44

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

@@ -0,0 +1,99 @@
+import * as React from "react";
+import { ThemeProvider, createTheme } from "./ThemeProvider";
+import { ButtonLink } from "../Button/Button";
+const CustomLinkAdapater = React.forwardRef((props, ref) => (
+// eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+React.createElement("a", Object.assign({ ref: ref, onClick: (e) => {
+        e.preventDefault();
+        alert(`Custom link to: ${e.currentTarget.href}. (Preventing Navigation.)`);
+    }, "data-custom": "theme-default" }, props))));
+CustomLinkAdapater.displayName = "CustomLinkAdapter";
+const customTheme = createTheme({
+    custom: {
+        LinkAdapter: CustomLinkAdapater,
+    },
+});
+const meta = {
+    title: "smoot-design/ThemeProvider",
+    component: ThemeProvider,
+    argTypes: {
+        theme: {
+            options: ["Default", "Custom Link Adapter"],
+            mapping: {
+                Default: undefined,
+                "Custom Link Adapter": customTheme,
+            },
+        },
+        children: {
+            table: { disable: true },
+        },
+    },
+    id: "smoot-design/ThemeProvider",
+};
+/**
+ * `ThemeProvider` must wrap all components from `smoot`-design, and allows
+ *  styling any component via [`styled`](https://emotion.sh/docs/styled).
+ *
+ * In general, most useful theme properties are exposed on `theme.custom`. (Root
+ * `theme` properties are used internally by MUI.) See typescript definitions
+ * for more information about `theme.custom`.
+ *
+ * ## Further Customized Theme with `createTheme`
+ * Consuming applications can customize `smoot-design`'s default theme by creating
+ * a theme instance with `createTheme` and passing it to `ThemeProvider`:
+ *
+ * ```tsx
+ * const customTheme = createTheme({...})
+ *
+ * <ThemeProvider theme={customTheme}>
+ *   {children}
+ * </ThemeProvider>
+ * ```
+ *
+ * ### Custom Link Adapter
+ * One particularly notable property is `theme.custom.LinkAdapter`. Some `smoot-design`
+ * components render links. These links are native anchor tags by default. In
+ * order to use these components with custom routing libraries (e.g. `react-router`
+ * or `next/link`), you can provide a custom link adapter.
+ *
+ * Components such as `ButtonLink` will:
+ *   - use `Component` on `ButtonLink` if specified (`<ButtonLink Component={Link} />`)
+ *   - else, use `theme.custom.LinkAdapter` if specified,
+ *   - else, use `a` tag.
+ *
+ * For example, to use `next/link` as the default link implementation:
+ *
+ * ```tsx
+ * import Link from "next/link"
+ * const theme = createTheme({ LinkAdapter: Link })
+ * ```
+ *
+ * You can use [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation)
+ * to add the custom props to relevant components. For example, to expose
+ * `next/link`'s `scroll` prop on `ButtonLink`:
+ *
+ * ```ts
+ * // Add scroll prop to all components using LinkAdapter
+ * declare module "@mitodl/smoot-design" {
+ *   interface LinkAdapterPropsOverrides {
+ *     scroll?: boolean
+ *   }
+ * }
+ * ```
+ *
+ * ### ImageAdapter
+ * Similarly, `theme.custom.ImageAdapter` can be used to customize the image
+ * component used by `smoot-design`. By default, `ImageAdapter` uses a simple `img`
+ * tag. Interface `ImageAdapterPropsOverrides` is similarly available for
+ * augmentation.
+ */
+export const LinkAdapterOverride = {
+    args: {
+        theme: customTheme,
+    },
+    render: (args) => {
+        return (React.createElement(ThemeProvider, { theme: args.theme },
+            React.createElement(ButtonLink, { href: "https://mit.edu" }, args.theme ? "Custom theme in use" : "Default theme in use")));
+    },
+};
+export default meta;

package/dist/esm/components/ThemeProvider/Typography.stories.d.ts

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Typography from "@mui/material/Typography";
+/**
+ * Typography styles can be controlled via the `theme.typography` object when
+ * using the `styled` helper or via the `<Tyopgraphy variant="..." />` component.
+ *
+ * For the `Typography` component, see [MUI's documentation](https://mui.com/material-ui/react-typography/).
+ *
+ * ```tsx
+ * const MyHeading = styled(({ theme }) => ({
+ *   ...theme.typography.h2,
+ *   [theme.breakpoints.down("sm")]: {
+ *     ...theme.typography.h3,
+ *   },
+ * }))
+ *
+ * // or:
+ * <Typography component="h1" typography={
+ *   {
+ *     xs: "h3",  // above xs
+ *     sm: "h2"   // above sm
+ *   }
+ * }>
+ * Hello, world!
+ * </Typography>
+ * ```
+ *
+ */
+declare const meta: Meta<typeof Typography>;
+export default meta;
+type Story = StoryObj<typeof Typography>;
+/**
+ * Typography variants are shown below.
+ *
+ * **Note:** The typography variant is not related to the HTML element used. A
+ * `variant="h1"` component does not automatically render an `<h1>` element.
+ *
+ */
+export declare const Variants: Story;

package/dist/esm/components/ThemeProvider/Typography.stories.js

@@ -0,0 +1,62 @@
+import * as React from "react";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+/**
+ * Typography styles can be controlled via the `theme.typography` object when
+ * using the `styled` helper or via the `<Tyopgraphy variant="..." />` component.
+ *
+ * For the `Typography` component, see [MUI's documentation](https://mui.com/material-ui/react-typography/).
+ *
+ * ```tsx
+ * const MyHeading = styled(({ theme }) => ({
+ *   ...theme.typography.h2,
+ *   [theme.breakpoints.down("sm")]: {
+ *     ...theme.typography.h3,
+ *   },
+ * }))
+ *
+ * // or:
+ * <Typography component="h1" typography={
+ *   {
+ *     xs: "h3",  // above xs
+ *     sm: "h2"   // above sm
+ *   }
+ * }>
+ * Hello, world!
+ * </Typography>
+ * ```
+ *
+ */
+const meta = {
+    title: "smoot-design/Typography",
+    component: Typography,
+};
+export default meta;
+const text = "The quick brown fox jumps over the lazy dog. ".repeat(10);
+const INSTANCES = [
+    { variant: "h1", children: "Heading level 1" },
+    { variant: "h2", children: "Heading level 2" },
+    { variant: "h3", children: "Heading level 3" },
+    { variant: "h4", children: "Heading level 4" },
+    { variant: "h5", children: "Heading level 5" },
+    { variant: "subtitle1", children: "Subtitle level 1" },
+    { variant: "subtitle2", children: "Subtitle level 2" },
+    { variant: "subtitle3", children: "Subtitle level 3" },
+    { variant: "subtitle4", children: "Subtitle level 4" },
+    { variant: "body1", children: `body level 1... ${text}` },
+    { variant: "body2", children: `body level 2... ${text}` },
+    { variant: "body3", children: `body level 3... ${text}` },
+    { variant: "body4", children: `body level 4... ${text}` },
+];
+/**
+ * Typography variants are shown below.
+ *
+ * **Note:** The typography variant is not related to the HTML element used. A
+ * `variant="h1"` component does not automatically render an `<h1>` element.
+ *
+ */
+export const Variants = {
+    render: () => {
+        return (React.createElement(Stack, { gap: "1rem" }, INSTANCES.map((props) => (React.createElement(Typography, Object.assign({ key: props.variant }, props))))));
+    },
+};

package/dist/esm/components/ThemeProvider/breakpoints.d.ts

@@ -0,0 +1,4 @@
+import type { ThemeOptions } from "@mui/material/styles";
+declare const BREAKPOINT_VALUES: ThemeOptions["breakpoints"];
+declare const breakpoints: import("@mui/material/styles").Breakpoints;
+export { BREAKPOINT_VALUES, breakpoints };

package/dist/esm/components/ThemeProvider/breakpoints.js

@@ -0,0 +1,15 @@
+import { createTheme } from "@mui/material/styles";
+const BREAKPOINT_VALUES = {
+    values: {
+        xs: 0,
+        sm: 600,
+        md: 900,
+        lg: 1280,
+        xl: 1536,
+    },
+};
+const { breakpoints } = createTheme({
+    breakpoints: BREAKPOINT_VALUES,
+    custom: {},
+});
+export { BREAKPOINT_VALUES, breakpoints };

package/dist/esm/components/ThemeProvider/buttons.d.ts

@@ -0,0 +1,7 @@
+import type { ThemeOptions } from "@mui/material/styles";
+/**
+ * We don't use MUI's button directly, but ButtonBase does get used internally
+ * by some MUI components, so we override a few styles.
+ */
+declare const buttonBaseComponent: NonNullable<ThemeOptions["components"]>["MuiButtonBase"];
+export { buttonBaseComponent };

package/dist/esm/components/ThemeProvider/buttons.js

@@ -0,0 +1,17 @@
+/**
+ * We don't use MUI's button directly, but ButtonBase does get used internally
+ * by some MUI components, so we override a few styles.
+ */
+const buttonBaseComponent = {
+    defaultProps: {
+        disableRipple: true,
+    },
+    styleOverrides: {
+        root: {
+            ":focus-visible": {
+                outline: "revert",
+            },
+        },
+    },
+};
+export { buttonBaseComponent };

package/dist/esm/components/ThemeProvider/chips.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeOptions } from "@mui/material/styles";
+declare const chipComponent: NonNullable<ThemeOptions["components"]>["MuiChip"];
+export { chipComponent };

package/dist/esm/components/ThemeProvider/chips.js

@@ -0,0 +1,151 @@
+import * as React from "react";
+import { colors } from "./colors";
+import { RiCloseLine } from "@remixicon/react";
+const chipComponent = {
+    defaultProps: {
+        size: "medium",
+        color: "default",
+        variant: "outlined",
+        deleteIcon: React.createElement(RiCloseLine, { "aria-hidden": "true" }),
+    },
+    styleOverrides: {
+        root: {
+            borderRadius: "100vh",
+            borderWidth: "1px",
+        },
+        deleteIcon: {
+            "&:hover": {
+                color: "inherit",
+            },
+            "&.MuiChip-deleteIconLarge": {
+                width: "16px",
+                height: "16px",
+            },
+            "&.MuiChip-deleteIconMedium": {
+                width: "14px",
+                height: "14px",
+            },
+            margin: "0 -2px 0 8px",
+            color: "inherit",
+        },
+        icon: {
+            margin: "0 8px 0 -2px",
+            color: "inherit",
+            "&.MuiChip-iconLarge": {
+                width: "16px",
+                height: "16px",
+            },
+            "&.MuiChip-iconMedium": {
+                width: "14px",
+                height: "14px",
+            },
+        },
+    },
+    variants: [
+        {
+            props: { size: "medium" },
+            style: ({ theme }) => (Object.assign(Object.assign({}, theme.typography.body3), { boxSizing: "border-box", height: "24px", paddingRight: "12px", paddingLeft: "12px", ".MuiChip-label": {
+                    paddingLeft: "0px",
+                    paddingRight: "0px",
+                } })),
+        },
+        {
+            props: { size: "large" },
+            style: ({ theme }) => (Object.assign(Object.assign({}, theme.typography.body2), { height: "32px", paddingLeft: "16px", paddingRight: "16px", ".MuiChip-label": {
+                    paddingLeft: "0px",
+                    paddingRight: "0px",
+                } })),
+        },
+        {
+            props: { variant: "outlined" },
+            style: {
+                borderColor: colors.silverGrayLight,
+                color: colors.darkGray1,
+                "&.Mui-focusVisible": {
+                    backgroundColor: "transparent",
+                },
+                "&.MuiChip-clickable:hover, &.MuiChip-deletable:hover": {
+                    color: colors.darkGray1,
+                    borderColor: colors.silverGrayDark,
+                    backgroundColor: "transparent", // mui has a default background color for hover
+                },
+            },
+        },
+        {
+            props: { variant: "outlinedWhite" },
+            style: {
+                backgroundColor: "white",
+                border: "1px solid",
+                borderColor: colors.silverGrayLight,
+                color: colors.darkGray1,
+                "&.Mui-focusVisible": {
+                    backgroundColor: "white",
+                },
+                "&.MuiChip-clickable:hover, &.MuiChip-deletable:hover": {
+                    color: colors.darkGray1,
+                    borderColor: colors.silverGrayDark,
+                    backgroundColor: "white", // mui has a default background color hover
+                },
+            },
+        },
+        {
+            props: { variant: "gray" },
+            style: {
+                backgroundColor: colors.lightGray2,
+                border: "none",
+                color: colors.darkGray2,
+                "&.Mui-focusVisible": {
+                    backgroundColor: colors.lightGray2,
+                },
+                "&.MuiChip-clickable:hover, &.MuiChip-deletable:hover": {
+                    color: colors.darkGray1,
+                    backgroundColor: colors.silverGrayLight,
+                },
+            },
+        },
+        {
+            props: { variant: "dark" },
+            style: {
+                backgroundColor: colors.silverGrayDark,
+                border: "none",
+                color: colors.white,
+                "&.Mui-focusVisible": {
+                    backgroundColor: colors.silverGrayDark,
+                },
+                "&.MuiChip-clickable:hover, &.MuiChip-deletable:hover": {
+                    backgroundColor: colors.darkGray1,
+                },
+            },
+        },
+        {
+            props: { variant: "darker" },
+            style: {
+                backgroundColor: colors.darkGray2,
+                border: `1px solid ${colors.darkGray1}`,
+                color: colors.white,
+                "&.Mui-focusVisible": {
+                    backgroundColor: colors.darkGray2,
+                },
+                "&.MuiChip-clickable:hover, &.MuiChip-deletable:hover": {
+                    backgroundColor: colors.black,
+                    border: `1px solid ${colors.silverGray}`,
+                },
+            },
+        },
+        {
+            props: { variant: "filled" },
+            style: {
+                backgroundColor: colors.mitRed,
+                border: "none",
+                color: colors.white,
+                "&.Mui-focusVisible": {
+                    backgroundColor: colors.mitRed,
+                },
+                "&.MuiChip-clickable:hover, &.MuiChip-deletable:hover": {
+                    backgroundColor: colors.red,
+                },
+            },
+        },
+    ],
+};
+export { chipComponent };

package/dist/esm/components/ThemeProvider/colors.d.ts

@@ -0,0 +1,32 @@
+declare const colors: {
+    mitRed: string;
+    brightRed: string;
+    black: string;
+    white: string;
+    darkGray2: string;
+    darkGray1: string;
+    silverGrayDark: string;
+    silverGray: string;
+    silverGrayLight: string;
+    lightGray2: string;
+    lightGray1: string;
+    navGray: string;
+    darkPink: string;
+    pink: string;
+    lightPink: string;
+    darkPurple: string;
+    purple: string;
+    lightPurple: string;
+    darkBlue: string;
+    blue: string;
+    lightBlue: string;
+    darkGreen: string;
+    green: string;
+    lightGreen: string;
+    darkRed: string;
+    red: string;
+    lightRed: string;
+    orange: string;
+    yellow: string;
+};
+export { colors };

package/dist/esm/components/ThemeProvider/colors.js

@@ -0,0 +1,32 @@
+const colors = {
+    mitRed: "#750014",
+    brightRed: "#FF1423",
+    black: "#000000",
+    white: "#FFFFFF",
+    darkGray2: "#212326",
+    darkGray1: "#40464C",
+    silverGrayDark: "#626A73",
+    silverGray: "#8B959E",
+    silverGrayLight: "#B8C2CC",
+    lightGray2: "#DDE1E6",
+    lightGray1: "#F3F4F8",
+    navGray: "#303337",
+    darkPink: "#750062",
+    pink: "#FF14F0",
+    lightPink: "#FFB3FF",
+    darkPurple: "#3E006B",
+    purple: "#93F",
+    lightPurple: "#BFB3FF",
+    darkBlue: "#002896",
+    blue: "#1966FF",
+    lightBlue: "#99EBFF",
+    darkGreen: "#004D1A",
+    green: "#00AD00",
+    lightGreen: "#AF3",
+    darkRed: "#83192A",
+    red: "#A31F34",
+    lightRed: "#D02E44",
+    orange: "#FAB005",
+    yellow: "#FFEB00",
+};
+export { colors };

package/dist/esm/components/ThemeProvider/typography.d.ts

@@ -0,0 +1,18 @@
+import type { ThemeOptions } from "@mui/material/styles";
+/**
+ * This function converts from pixels to rems, assuming a base font size of 16px
+ * (which is the default for most modern browsers).
+ *
+ * Using this function, we can:
+ * - match desgins that are in pixels for default font size
+ * - allow users to scale the font size up or down by chaning base font size.
+ *
+ * For example, a Chrome user might specify a base font size of 20px ("large")
+ * in their browser settings. Then, `pxToRem(32)` would actually be 40px for
+ * that user.
+ */
+declare const pxToRem: (px: number) => string;
+declare const globalSettings: ThemeOptions["typography"];
+declare const component: NonNullable<ThemeOptions["components"]>["MuiTypography"];
+declare const typography: import("@mui/material/styles").TypographyVariants;
+export { globalSettings, component, pxToRem, typography };

package/dist/esm/components/ThemeProvider/typography.js

@@ -0,0 +1,167 @@
+import { createTheme } from "@mui/material/styles";
+const fontWeights = {
+    text: {
+        roman: 400,
+        medium: 500,
+        bold: 700,
+    },
+};
+/**
+ * This function converts from pixels to rems, assuming a base font size of 16px
+ * (which is the default for most modern browsers).
+ *
+ * Using this function, we can:
+ * - match desgins that are in pixels for default font size
+ * - allow users to scale the font size up or down by chaning base font size.
+ *
+ * For example, a Chrome user might specify a base font size of 20px ("large")
+ * in their browser settings. Then, `pxToRem(32)` would actually be 40px for
+ * that user.
+ */
+const pxToRem = (px) => `${px / 16}rem`;
+const globalSettings = {
+    // Note: Figma calls this "Neue Haas Grotesk Text", but that is incorrect based on Adobe's font family.
+    fontFamily: "neue-haas-grotesk-text, sans-serif",
+    fontWeightLight: fontWeights.text.roman,
+    fontWeightRegular: fontWeights.text.roman,
+    fontWeightMedium: fontWeights.text.medium,
+    fontWeightBold: fontWeights.text.bold,
+    h1: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.bold,
+        fontStyle: "normal",
+        fontSize: pxToRem(52),
+        lineHeight: pxToRem(60),
+    },
+    h2: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.bold,
+        fontStyle: "normal",
+        fontSize: pxToRem(34),
+        lineHeight: pxToRem(40),
+    },
+    h3: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.bold,
+        fontStyle: "normal",
+        fontSize: pxToRem(28),
+        lineHeight: pxToRem(36),
+    },
+    h4: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.bold,
+        fontStyle: "normal",
+        fontSize: pxToRem(24),
+        lineHeight: pxToRem(30),
+    },
+    h5: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.medium,
+        fontStyle: "normal",
+        fontSize: pxToRem(18),
+        lineHeight: pxToRem(22),
+    },
+    subtitle1: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.medium,
+        fontStyle: "normal",
+        fontSize: pxToRem(16),
+        lineHeight: pxToRem(20),
+    },
+    subtitle2: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.medium,
+        fontStyle: "normal",
+        fontSize: pxToRem(14),
+        lineHeight: pxToRem(18),
+    },
+    subtitle3: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.medium,
+        fontStyle: "normal",
+        fontSize: pxToRem(12),
+        lineHeight: pxToRem(16),
+    },
+    subtitle4: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.medium,
+        fontStyle: "normal",
+        fontSize: pxToRem(10),
+        lineHeight: pxToRem(14),
+    },
+    body1: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.roman,
+        fontStyle: "normal",
+        fontSize: pxToRem(16),
+        lineHeight: pxToRem(20),
+    },
+    body2: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.roman,
+        fontStyle: "normal",
+        fontSize: pxToRem(14),
+        lineHeight: pxToRem(18),
+    },
+    body3: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.roman,
+        fontStyle: "normal",
+        fontSize: pxToRem(12),
+        lineHeight: pxToRem(16),
+    },
+    body4: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.roman,
+        fontStyle: "normal",
+        fontSize: pxToRem(10),
+        lineHeight: pxToRem(14),
+    },
+    buttonLarge: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.medium,
+        fontStyle: "normal",
+        fontSize: pxToRem(16),
+        lineHeight: pxToRem(20),
+    },
+    button: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.medium,
+        fontStyle: "normal",
+        fontSize: pxToRem(14),
+        lineHeight: pxToRem(18),
+        textTransform: "none",
+    },
+    buttonSmall: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.medium,
+        fontStyle: "normal",
+        fontSize: pxToRem(12),
+        lineHeight: pxToRem(16),
+    },
+};
+const component = {
+    defaultProps: {
+        variantMapping: {
+            h1: "span",
+            h2: "span",
+            h3: "span",
+            h4: "span",
+            h5: "span",
+            body1: "p",
+            body2: "p",
+            body3: "p",
+            body4: "p",
+            subtitle1: "p",
+            subtitle2: "p",
+            subtitle3: "p",
+            subtitle4: "p",
+            button: "span",
+        },
+    },
+};
+const { typography } = createTheme({
+    typography: globalSettings,
+    custom: {},
+});
+export { globalSettings, component, pxToRem, typography };

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

@@ -0,0 +1,24 @@
+/**
+ * VisuallyHidden is a utility component that hides its children from sighted
+ * users, but keeps them accessible to screen readers.
+ *
+ * Often, screenreader-only content can be handled with an `aria-label`. However,
+ * occasionally we need actual elements.
+ *
+ * Example:
+ *  - a visually hidden aria-live section that reads announcements that
+ *    isual users can ascertain in some other way.
+ *  - a visually hidden Heading for a section whose purpose is clear for sighted users
+ *  - a visually hidden description used for aria-describeddby
+ *     - There is an aria-description attribute that can be used to provide a
+ *       without an actual element on the page. However, it is introduced in
+ *       ARIA 1.3 (working draft), not compatible with some screen readers, and
+ *       flagged problematic by our linting.
+ *
+ * The CSS here is based on https://inclusive-components.design/tooltips-toggletips/
+ */
+declare const VisuallyHidden: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export { VisuallyHidden };