@mitodl/smoot-design 1.0.0

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,127 @@
+import * as React from "react"
+import {
+  createTheme as muiCreateTheme,
+  ThemeProvider as MuiThemeProvider,
+} from "@mui/material/styles"
+import type { ThemeOptions, Theme } from "@mui/material/styles"
+import type {} from "@mui/lab/themeAugmentation"
+import * as typography from "./typography"
+import * as buttons from "./buttons"
+import * as chips from "./chips"
+import { colors } from "./colors"
+import type { CustomTheme } from "../../types/theme"
+
+const shadow = {
+  shadowOffsetX: 3,
+  shadowOffsetY: 4,
+  shadowColor: "rgb(0 0 0 / 36%)",
+  shadowBlurRadius: 12,
+}
+
+// To replace ../scss/theme.scss for #236 as we refactor it out
+const custom: ThemeOptions["custom"] = {
+  transitionDuration: "300ms",
+  shadow: `${shadow.shadowOffsetX} ${shadow.shadowOffsetY} ${shadow.shadowBlurRadius} ${shadow.shadowColor}`,
+  colors,
+  dimensions: {
+    headerHeight: "72px",
+    headerHeightSm: "60px",
+  },
+}
+
+const BREAKPOINTS = {
+  values: {
+    xs: 0,
+    sm: 600,
+    md: 900,
+    lg: 1272 + 48,
+    xl: 1536,
+  },
+}
+
+const defaultThemeOptions: ThemeOptions = {
+  custom: custom,
+  palette: {
+    action: {
+      disabled: colors.lightGray2,
+    },
+    text: {
+      primary: "#000",
+      secondary: colors.silverGrayDark,
+    },
+    primary: {
+      main: colors.mitRed,
+      light: colors.lightRed,
+      active: colors.red,
+      contrastText: colors.white,
+    },
+    secondary: {
+      light: colors.darkGray2,
+      active: colors.silverGrayDark,
+      main: colors.black,
+      contrastText: colors.white,
+    },
+  },
+  shape: {
+    borderRadius: 8,
+  },
+  spacing: 8,
+  typography: typography.globalSettings,
+  breakpoints: BREAKPOINTS,
+  components: {
+    MuiButtonBase: buttons.buttonBaseComponent,
+    MuiTypography: typography.component,
+    MuiTabPanel: {
+      styleOverrides: {
+        root: {
+          padding: "0px",
+        },
+      },
+    },
+    MuiMenu: {
+      styleOverrides: { paper: { borderRadius: "4px" } },
+    },
+    MuiAutocomplete: {
+      styleOverrides: {
+        paper: { borderRadius: "4px" },
+        // Mui puts paddingRight: 2px, marginRight: -2px on the popupIndicator,
+        // which causes the browser to show a horizontal scrollbar on overflow
+        // containers when a scrollbar isn't really necessary.
+        popupIndicator: { paddingRight: 0, marginRight: 0 },
+      },
+    },
+    MuiChip: chips.chipComponent,
+  },
+}
+
+type ExtendedTheme = Theme & {
+  custom: CustomTheme
+}
+
+const createTheme = (options?: {
+  custom: Partial<ThemeOptions["custom"]>
+}): ExtendedTheme =>
+  muiCreateTheme({
+    ...defaultThemeOptions,
+    custom: {
+      ...defaultThemeOptions.custom,
+      ...options?.custom,
+    },
+  })
+
+const defaultTheme = createTheme()
+
+type ThemeProviderProps = {
+  children?: React.ReactNode
+  theme?: Theme
+}
+
+const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  theme = defaultTheme,
+}) => {
+  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
+}
+
+export { ThemeProvider, createTheme }
+export type { ThemeProviderProps, Theme }

package/src/components/ThemeProvider/Typography.stories.tsx

@@ -0,0 +1,74 @@
+import * as React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import Stack from "@mui/material/Stack"
+import Typography from "@mui/material/Typography"
+import type { TypographyProps } 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.
+ *
+ * ```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: Meta<typeof Typography> = {
+  title: "smoot-design/Typography",
+  tags: ["autodocs"],
+}
+
+export default meta
+
+type Story = StoryObj<typeof Typography>
+
+const text = "The quick brown fox jumps over the lazy dog. ".repeat(10)
+const INSTANCES: TypographyProps[] = [
+  { 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: Story = {
+  render: () => {
+    return (
+      <Stack gap="1rem">
+        {INSTANCES.map((props) => (
+          <Typography key={props.variant} {...props} />
+        ))}
+      </Stack>
+    )
+  },
+}

package/src/components/ThemeProvider/breakpoints.ts

@@ -0,0 +1,20 @@
+import type { ThemeOptions } from "@mui/material/styles"
+import { createTheme } from "@mui/material/styles"
+
+const BREAKPOINT_VALUES: ThemeOptions["breakpoints"] = {
+  values: {
+    xs: 0,
+    sm: 600,
+    md: 900,
+    lg: 1280,
+    xl: 1536,
+  },
+}
+
+const { breakpoints } = createTheme({
+  breakpoints: BREAKPOINT_VALUES,
+  // @ts-expect-error only using breakpoints
+  custom: {},
+})
+
+export { BREAKPOINT_VALUES, breakpoints }

package/src/components/ThemeProvider/buttons.ts

@@ -0,0 +1,22 @@
+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.
+ */
+const buttonBaseComponent: NonNullable<
+  ThemeOptions["components"]
+>["MuiButtonBase"] = {
+  defaultProps: {
+    disableRipple: true,
+  },
+  styleOverrides: {
+    root: {
+      ":focus-visible": {
+        outline: "revert",
+      },
+    },
+  },
+}
+
+export { buttonBaseComponent }

package/src/components/ThemeProvider/chips.tsx

@@ -0,0 +1,167 @@
+import * as React from "react"
+import type { ThemeOptions } from "@mui/material/styles"
+import { colors } from "./colors"
+import { RiCloseLine } from "@remixicon/react"
+
+const chipComponent: NonNullable<ThemeOptions["components"]>["MuiChip"] = {
+  defaultProps: {
+    size: "medium",
+    color: "default",
+    variant: "outlined",
+    deleteIcon: <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 }) => ({
+        ...theme.typography.body3,
+        boxSizing: "border-box",
+        height: "24px",
+        paddingRight: "12px",
+        paddingLeft: "12px",
+        ".MuiChip-label": {
+          paddingLeft: "0px",
+          paddingRight: "0px",
+        },
+      }),
+    },
+    {
+      props: { size: "large" },
+      style: ({ theme }) => ({
+        ...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/src/components/ThemeProvider/colors.ts

@@ -0,0 +1,33 @@
+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/src/components/ThemeProvider/typography.ts

@@ -0,0 +1,174 @@
+import type { ThemeOptions } from "@mui/material/styles"
+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: number) => `${px / 16}rem`
+
+const globalSettings: ThemeOptions["typography"] = {
+  // 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: NonNullable<ThemeOptions["components"]>["MuiTypography"] = {
+  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,
+  // @ts-expect-error: we only care about typography from this theme
+  custom: {},
+})
+
+export { globalSettings, component, pxToRem, typography }

package/src/index.ts

@@ -0,0 +1,24 @@
+"use client"
+/// <reference types="./types/theme.d.ts" />
+/// <reference types="./types/typography.d.ts" />
+
+export { default as styled } from "@emotion/styled"
+export { css, Global } from "@emotion/react"
+
+export { AppRouterCacheProvider as NextJsAppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter"
+
+export {
+  ThemeProvider,
+  createTheme,
+} from "./components/ThemeProvider/ThemeProvider"
+
+export {
+  Button,
+  ButtonLink,
+  ActionButton,
+  ActionButtonLink,
+} from "./components/Button/Button"
+
+export type { LinkAdapterPropsOverrides } from "./components/LinkAdapter/LinkAdapter"
+
+export type { ButtonProps, ButtonLinkProps } from "./components/Button/Button"

package/src/story-utils/index.ts

@@ -0,0 +1,28 @@
+/**
+ * Generate a string that represents an enum of the keys of the given object.
+ *
+ * Example:
+ * ```ts
+ * const SIZES = {
+ *   small: "irrelevant-value",
+ *   large: "irrelevant-value",
+ * }
+ * console.log(docsEnum(SIZES))
+ * // '"small" | "large"'
+ *
+ * ```
+ *
+ * Use case: Storybook docs are created with react-docgen, which fails to infer
+ * typescript enum types.
+ *
+ *
+ */
+const docsEnum = <T extends string>(values: T[]) => {
+  return values.map((key) => `"${key}"`).join(" | ")
+}
+
+const enumValues = <T extends string>(obj: Record<T, unknown>): T[] => {
+  return Object.keys(obj) as T[]
+}
+
+export { docsEnum, enumValues }