slice-machine-ui 1.26.1-beta.8 → 2.0.0

package/src/components/Card/Card.module.css

@@ -0,0 +1,202 @@
+.flex {
+  all: unset;
+  display: flex;
+}
+
+.grid {
+  all: unset;
+  display: grid;
+}
+
+.column {
+  composes: flex;
+  flex-direction: column;
+}
+
+.root {
+  composes: column;
+  position: relative;
+  box-sizing: border-box;
+  border-color: var(--grey6);
+  border-radius: 6px;
+  border-style: solid;
+  border-width: 1px;
+  overflow-x: hidden;
+}
+
+.size-small {
+  height: 240px;
+}
+
+.size-medium {
+  height: 320px;
+}
+
+.solid {
+  background-color: var(--grey3);
+
+  &[data-state="checked"] {
+    border-color: var(--purple10);
+  }
+}
+
+.outlined {
+  background-color: var(--grey2);
+
+  &[data-state="checked"] {
+    border-color: var(--purple8);
+  }
+}
+
+.interactive {
+  &:focus-visible {
+    box-shadow: var(--box-shadow-purple-focus);
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+  }
+
+  &:not([data-disabled]) {
+    cursor: pointer;
+  }
+
+  &.solid {
+    &:focus-visible {
+      background-color: var(--grey5);
+      border-color: var(--purple10);
+    }
+  }
+
+  &.outlined {
+    &:active {
+      background-color: var(--grey4);
+      border-color: var(--purple9);
+    }
+
+    &:focus-visible {
+      background-color: var(--grey1);
+      border-color: var(--purple8);
+    }
+
+    &:hover {
+      background-color: var(--grey4);
+    }
+  }
+}
+
+.media {
+  composes: column;
+  flex-basis: 0;
+  flex-grow: 1;
+  min-height: 0;
+  position: relative;
+  order: 0;
+}
+.solid > .media {
+  padding: 32px;
+}
+.outlined > .media {
+  background-color: var(--light-grey3);
+  margin-inline: 16px;
+  margin-top: 16px;
+  padding: 16px;
+}
+
+.mediaComponent-div {
+  composes: grid;
+  flex-grow: 1;
+}
+
+.mediaComponent-img {
+  height: 100%;
+  object-fit: contain;
+
+  &:not([src]) {
+    visibility: hidden;
+  }
+}
+
+.mediaOverlay {
+  composes: grid;
+  inset: 0;
+  position: absolute;
+  visibility: hidden;
+
+  &::before {
+    background-color: var(--light-grey12);
+    content: "";
+    inset: 0;
+    opacity: 0.1;
+    position: absolute;
+  }
+}
+.interactive:focus-visible .mediaOverlay,
+.interactive:not([data-disabled]) .mediaOverlay:has(:focus-visible),
+.interactive:not([data-disabled]) .media:hover > .mediaOverlay {
+  visibility: visible;
+}
+
+.nonMedia {
+  composes: flex;
+  align-items: center;
+  box-sizing: border-box;
+  flex-direction: row;
+}
+.solid > .nonMedia {
+  background-color: var(--light-grey1);
+
+  &:not(:first-child) {
+    border-top-color: var(--light-grey6);
+    border-top-style: solid;
+    border-top-width: inherit;
+  }
+}
+
+.actions {
+  composes: nonMedia;
+  height: 48px;
+  justify-content: space-between;
+  order: 1;
+}
+.solid > .actions {
+  padding-left: 12px;
+  padding-right: 8px;
+}
+.outlined > .actions {
+  padding-inline: 16px;
+}
+
+.footer {
+  composes: nonMedia;
+  gap: 8px;
+  height: 60px;
+  order: 2;
+}
+.solid > .footer {
+  padding-inline: 12px;
+}
+.outlined > .footer {
+  padding-inline: 16px;
+}
+
+.footerTexts {
+  composes: column;
+  flex-basis: 0;
+  flex-grow: 1;
+  min-width: 0px;
+  /* Offset `title` and `subtitle` so that they are centered vertically despite
+     having different line heights. */
+  margin-bottom: 4px;
+}
+
+.status {
+  composes: column;
+  height: 24px;
+  inset-inline: 0;
+  justify-content: center;
+  padding-inline: 8px;
+  position: absolute;
+  background-color: var(--purple4);
+  color: var(--purple11);
+}

package/src/components/Card/Card.module.css.d.ts

@@ -0,0 +1,22 @@
+declare const styles: {
+  readonly "actions": string;
+  readonly "column": string;
+  readonly "flex": string;
+  readonly "footer": string;
+  readonly "footerTexts": string;
+  readonly "grid": string;
+  readonly "interactive": string;
+  readonly "media": string;
+  readonly "mediaComponent-div": string;
+  readonly "mediaComponent-img": string;
+  readonly "mediaOverlay": string;
+  readonly "nonMedia": string;
+  readonly "outlined": string;
+  readonly "root": string;
+  readonly "size-medium": string;
+  readonly "size-small": string;
+  readonly "solid": string;
+  readonly "status": string;
+};
+export = styles;
+

package/src/components/Card/Card.stories.tsx

@@ -9,9 +9,9 @@ import {
 } from "@prismicio/editor-ui";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { AddPhotoAlternateIcon } from "@src/icons/AddPhotoAlternateIcon";
-import { ArrowDropDownIcon } from "@src/icons/ArrowDropDownIcon";
-import { SyncAltIcon } from "@src/icons/SyncAltIcon";
+import { AddPhotoAlternateIcon } from "@/icons/AddPhotoAlternateIcon";
+import { ArrowDropDownIcon } from "@/icons/ArrowDropDownIcon";
+import { SyncAltIcon } from "@/icons/SyncAltIcon";
 
 import { Card, CardActions, CardFooter, CardMedia, CardStatus } from "./Card";
 

package/src/components/Card/Card.tsx

@@ -1,8 +1,10 @@
+import type { UrlObject } from "node:url";
+
 import { findFocusableAncestor } from "@prismicio/editor-support/DOM";
 import { Text } from "@prismicio/editor-ui";
 import { clsx } from "clsx";
-import type { UrlObject } from "node:url";
 import {
+  createElement,
   type CSSProperties,
   type FC,
   type HTMLAttributes,
@@ -10,17 +12,16 @@ import {
   type MouseEvent,
   type PropsWithChildren,
   type ReactNode,
-  createElement,
 } from "react";
 
-import * as styles from "./Card.css";
+import styles from "./Card.module.css";
 
 type CardProps = PropsWithChildren<
   {
     checked?: boolean;
-    size?: keyof typeof styles.size;
+    size?: "small" | "medium";
     style?: CSSProperties;
-    variant?: keyof typeof styles.variant;
+    variant?: "solid" | "outlined";
   } & (
     | // Props for rendering a non-interactive `div` element.
     NarrowedCardProps<{ interactive?: false }>
@@ -76,9 +77,8 @@ export const Card: FC<CardProps> = (props) => {
   } = props;
   const elementProps = {
     ...otherProps,
-    className: clsx(styles.root, styles.size[size], styles.variant[variant], {
+    className: clsx(styles.root, styles[`size-${size}`], styles[variant], {
       [styles.interactive]: props.interactive,
-      [styles.interactiveVariant[variant]]: props.interactive,
     }),
     "data-state": checked === true ? "checked" : undefined,
   };
@@ -129,7 +129,7 @@ export const CardMedia: FC<CardMediaProps> = ({
   <div className={styles.media}>
     {createElement(component, {
       ...otherProps,
-      className: clsx(styles.mediaComponent[component], className),
+      className: clsx(styles[`mediaComponent-${component}`], className),
     })}
     {Boolean(overlay) ? (
       <div className={styles.mediaOverlay}>{overlay}</div>

package/src/components/CodeBlock/CodeBlock.module.css

@@ -0,0 +1,46 @@
+.block {
+  all: unset;
+  box-sizing: border-box;
+  font-family: var(--font-family-body);
+}
+
+.blockWithDisplayRevert {
+  composes: block;
+  display: revert;
+}
+
+.root {
+  composes: blockWithDisplayRevert;
+  border-width: 1px;
+  border-radius: 6px;
+  border-style: solid;
+  border-color: var(--grey6);
+}
+
+.header {
+  composes: block;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  background-color: var(--grey2);
+  border-bottom-color: var(--grey6);
+  padding-block: 4px;
+  padding-right: 4px;
+}
+
+.fileInfo {
+  composes: block;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.fileName {
+  composes: blockWithDisplayRevert;
+  font-size: calc(14rem / 16);
+  line-height: calc(32rem / 16);
+}

package/src/components/CodeBlock/CodeBlock.module.css.d.ts

@@ -0,0 +1,10 @@
+declare const styles: {
+  readonly "block": string;
+  readonly "blockWithDisplayRevert": string;
+  readonly "fileInfo": string;
+  readonly "fileName": string;
+  readonly "header": string;
+  readonly "root": string;
+};
+export = styles;
+

package/src/components/CodeBlock/CodeBlock.tsx

@@ -1,17 +1,17 @@
 import { IconButton, Text } from "@prismicio/editor-ui";
 import { type ReactNode, useEffect, useState } from "react";
 import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
-import tsx from "react-syntax-highlighter/dist/cjs/languages/prism/tsx";
 import markup from "react-syntax-highlighter/dist/cjs/languages/prism/markup";
+import tsx from "react-syntax-highlighter/dist/cjs/languages/prism/tsx";
 import { prism } from "react-syntax-highlighter/dist/cjs/styles/prism";
 
-import { CodeIcon } from "@src/icons/CodeIcon";
-import { JavaScript } from "@src/icons/JavaScript";
-import { TypeScript } from "@src/icons/TypeScript";
-import { Vue } from "@src/icons/Vue";
-import { Svelte } from "@src/icons/Svelte";
+import { CodeIcon } from "@/icons/CodeIcon";
+import { JavaScript } from "@/icons/JavaScript";
+import { Svelte } from "@/icons/Svelte";
+import { TypeScript } from "@/icons/TypeScript";
+import { Vue } from "@/icons/Vue";
 
-import * as styles from "./CodeBlock.css";
+import styles from "./CodeBlock.module.css";
 
 SyntaxHighlighter.registerLanguage("tsx", tsx);
 SyntaxHighlighter.registerLanguage("markup", markup);

package/src/components/ContentTabs/ContentTabs.module.css

@@ -0,0 +1,60 @@
+.flex {
+  all: unset;
+  display: flex;
+}
+
+.column {
+  composes: flex;
+  flex-direction: column;
+}
+
+.root {
+  composes: column;
+  background-color: var(--grey1);
+  min-height: 0;
+}
+
+.list {
+  composes: flex;
+  border-bottom: 1px solid var(--grey5);
+  padding-inline: 16px;
+}
+
+.trigger {
+  composes: column;
+  color: var(--grey11);
+  cursor: pointer;
+  padding-block: 8px;
+
+  &:not(:last-child) {
+    margin-right: 16px;
+  }
+
+  &[data-state="active"] {
+    /* stylelint-disable declaration-property-value-allowed-list -- very specific box shadow for this component */
+    box-shadow:
+      inset 0 -1px 0 0 currentColor,
+      0 1px 0 0 currentColor;
+    /* stylelint-end declaration-property-value-allowed-list */
+    color: var(--purple9);
+  }
+}
+
+.triggerText {
+  line-height: 32px;
+}
+
+.content {
+  composes: column;
+  min-height: 0;
+  outline: none;
+  flex: 1;
+
+  &[data-state="inactive"] {
+    display: none;
+  }
+}
+
+.scrollArea {
+  padding: 16px;
+}

package/src/components/ContentTabs/ContentTabs.module.css.d.ts

@@ -0,0 +1,12 @@
+declare const styles: {
+  readonly "column": string;
+  readonly "content": string;
+  readonly "flex": string;
+  readonly "list": string;
+  readonly "root": string;
+  readonly "scrollArea": string;
+  readonly "trigger": string;
+  readonly "triggerText": string;
+};
+export = styles;
+

package/src/components/ContentTabs/ContentTabs.tsx

@@ -1,8 +1,8 @@
+import { ScrollArea, Text } from "@prismicio/editor-ui";
 import * as Tabs from "@radix-ui/react-tabs";
 import type { CSSProperties, FC, ReactNode } from "react";
-import { ScrollArea, Text } from "@prismicio/editor-ui";
 
-import * as styles from "./ContentTabs.css";
+import styles from "./ContentTabs.module.css";
 
 type ContentTabsProps = {
   style?: CSSProperties;

package/src/components/Count/Count.tsx

@@ -1,6 +1,6 @@
 import { FC, PropsWithChildren } from "react";
 
-import { FlowerBackgroundIcon } from "@src/icons/FlowerBackgroundIcon";
+import { FlowerBackgroundIcon } from "@/icons/FlowerBackgroundIcon";
 
 import styles from "./Count.module.css";
 

package/src/components/Divider/Divider.module.css

@@ -0,0 +1,23 @@
+.base {
+  width: 100%;
+  border-style: none;
+  margin: 0px;
+}
+
+.variant-dashed {
+  composes: base;
+  border-color: currentColor;
+  border-top-style: dashed;
+  border-width: 1px;
+}
+
+.variant-edgeFaded {
+  composes: base;
+  height: 1px;
+  background-image: linear-gradient(
+    to right,
+    color-mix(in srgb, currentColor, transparent 100%),
+    currentColor,
+    color-mix(in srgb, currentColor, transparent 100%)
+  );
+}

package/src/components/Divider/Divider.module.css.d.ts

@@ -0,0 +1,7 @@
+declare const styles: {
+  readonly "base": string;
+  readonly "variant-dashed": string;
+  readonly "variant-edgeFaded": string;
+};
+export = styles;
+

package/src/components/Divider/Divider.stories.tsx

@@ -1,8 +1,7 @@
+import { theme } from "@prismicio/editor-ui";
 import type { Meta, StoryObj } from "@storybook/react";
-import { colors } from "@prismicio/editor-ui";
 
 import { Divider } from "./Divider";
-import { variants } from "./Divider.css";
 
 type Story = StoryObj<typeof meta>;
 
@@ -11,11 +10,11 @@ const meta = {
   argTypes: {
     variant: {
       control: { type: "select" },
-      options: Object.keys(variants),
+      options: ["dashed", "edgeFaded"],
     },
     color: {
       control: { type: "select" },
-      options: Object.keys(colors),
+      options: Object.keys(theme.color),
     },
   },
 } satisfies Meta<typeof Divider>;

package/src/components/Divider/Divider.tsx

@@ -1,11 +1,11 @@
-import { colors, sprinkles } from "@prismicio/editor-ui";
+import { theme } from "@prismicio/editor-ui";
 import { clsx } from "clsx";
 import type { FC } from "react";
 
-import * as styles from "./Divider.css";
+import styles from "./Divider.module.css";
 
 type DividerProps = {
-  color?: keyof typeof colors;
+  color?: keyof typeof theme.color;
   variant?: "dashed" | "edgeFaded";
   className?: string;
 };
@@ -15,11 +15,8 @@ export const Divider: FC<DividerProps> = (props) => {
 
   return (
     <hr
-      className={clsx(
-        styles.variants[variant],
-        sprinkles({ color: colors[color] }),
-        className,
-      )}
+      className={clsx(styles[`variant-${variant}`], className)}
+      style={{ color: theme.color[color] }}
     />
   );
 };

package/src/components/HoverCard/HoverCard.module.css

@@ -0,0 +1,79 @@
+.block {
+  all: unset;
+  box-sizing: border-box;
+  font-family: var(--font-family-body);
+}
+
+.blockWithDisplayRevert {
+  composes: block;
+  display: revert;
+}
+
+.root {
+  composes: blockWithDisplayRevert;
+  width: 288px;
+}
+
+.title {
+  composes: block;
+  align-items: center;
+  border-bottom-style: solid;
+  border-color: var(--grey6);
+  border-width: 1px;
+  color: var(--grey12);
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  padding-bottom: 4px;
+  padding-left: 16px;
+  padding-right: 6px;
+  padding-top: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.titleCloseIcon {
+  composes: block;
+  color: var(--grey11);
+  display: flex;
+  padding: 4px;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.mediaContainer {
+  composes: block;
+  display: flex;
+  margin-bottom: 8px;
+  padding-inline: 16px;
+}
+
+.media {
+  composes: blockWithDisplayRevert;
+  border-color: var(--grey6);
+  border-radius: 6px;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  width: 100%;
+  height: 146px;
+}
+
+.description {
+  composes: blockWithDisplayRevert;
+  color: var(--grey11);
+  margin-bottom: 16px;
+  padding-inline: 16px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.closeButtonContainer {
+  composes: blockWithDisplayRevert;
+  padding-bottom: 16px;
+  padding-inline: 16px;
+}

package/src/components/HoverCard/HoverCard.module.css.d.ts

@@ -0,0 +1,13 @@
+declare const styles: {
+  readonly "block": string;
+  readonly "blockWithDisplayRevert": string;
+  readonly "closeButtonContainer": string;
+  readonly "description": string;
+  readonly "media": string;
+  readonly "mediaContainer": string;
+  readonly "root": string;
+  readonly "title": string;
+  readonly "titleCloseIcon": string;
+};
+export = styles;
+

package/src/components/HoverCard/HoverCard.stories.tsx

@@ -1,12 +1,13 @@
+import { Button } from "@prismicio/editor-ui";
 import type { Meta, StoryObj } from "@storybook/react";
+
 import {
   HoverCard,
-  HoverCardDescription,
   HoverCardCloseButton,
+  HoverCardDescription,
   HoverCardMedia,
   HoverCardTitle,
 } from "./HoverCard";
-import { Button } from "@prismicio/editor-ui";
 
 const meta = {
   component: HoverCard,

package/src/components/HoverCard/HoverCard.test.tsx

@@ -1,8 +1,8 @@
 // @vitest-environment jsdom
 import React from "react";
-import { describe, test, expect, vi } from "vitest";
+import { describe, expect, test, vi } from "vitest";
 
-import { screen, render, waitFor } from "../../../test/__testutils__";
+import { render, screen, waitFor } from "../../../test/__testutils__";
 import { HoverCard, HoverCardCloseButton } from ".";
 
 vi.mock("next/router", () => import("next-router-mock"));

package/src/components/HoverCard/HoverCard.tsx

@@ -13,11 +13,11 @@ import {
   type VideoHTMLAttributes,
 } from "react";
 
-import { useDelayedAction } from "@src/hooks/useDelayedAction";
-import { CloseIcon } from "@src/icons/CloseIcon";
+import { useDelayedAction } from "@/hooks/useDelayedAction";
+import { CloseIcon } from "@/icons/CloseIcon";
 
 import { BaseHoverCard, type BaseHoverCardProps } from "../BaseHoverCard";
-import * as styles from "./HoverCard.css";
+import styles from "./HoverCard.module.css";
 
 type HoverCardProps = PropsWithChildren<{
   align?: BaseHoverCardProps["align"];