slice-machine-ui 1.15.1-dev-next-release.0 → 1.15.1-dev-next-release.1

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

@@ -0,0 +1,182 @@
+import { colors, selectors, sprinkles, vars } from "@prismicio/editor-ui";
+import { style, styleVariants } from "@vanilla-extract/css";
+import { calc } from "@vanilla-extract/css-utils";
+
+const flex = sprinkles({ all: "unset", display: "flex" });
+
+const column = style([flex, sprinkles({ flexDirection: "column" })]);
+
+export const root = style([
+  column,
+  sprinkles({
+    borderColor: colors.grey6,
+    borderRadius: 6,
+    borderStyle: "solid",
+    borderWidth: 1,
+    boxSizing: "border-box",
+    overflowX: "hidden",
+    position: "relative",
+  }),
+]);
+
+export const size = styleVariants({
+  small: { height: "240px" },
+  medium: { height: "320px" },
+});
+
+export const variant = styleVariants({
+  solid: [sprinkles({ backgroundColor: colors.grey3 })],
+  outlined: [sprinkles({ backgroundColor: colors.grey2 })],
+});
+
+export const interactive = style({
+  ":focus-visible": { boxShadow: "0px 0px 0px 4px hsla(251, 63%, 63%, 0.1)" },
+  selectors: {
+    "&[data-disabled]": { opacity: vars.opacity["50%"] },
+    "&:not([data-disabled])": { cursor: vars.cursor.pointer },
+  },
+});
+
+export const interactiveVariant = {
+  solid: sprinkles({
+    backgroundColor: selectors.focusVisible(colors.grey5),
+    borderColor: {
+      ...selectors.checked(colors.purple10),
+      ...selectors.focusVisible(colors.purple10),
+    },
+  }),
+  outlined: sprinkles({
+    backgroundColor: {
+      ...selectors.active(colors.grey4),
+      ...selectors.focusVisible(colors.grey1),
+      ...selectors.hover(colors.grey4),
+    },
+    borderColor: {
+      ...selectors.active(colors.purple9),
+      ...selectors.checked(colors.purple8),
+      ...selectors.focusVisible(colors.purple8),
+    },
+  }),
+};
+
+export const media = style([
+  column,
+  sprinkles({ flexBasis: 0, flexGrow: 1, minHeight: 0, position: "relative" }),
+  {
+    order: 0,
+    selectors: {
+      [`${variant.solid} > &`]: {
+        padding: calc.subtract(vars.space[32], vars.borderWidth[1]),
+      },
+      [`${variant.outlined} > &`]: {
+        backgroundColor: vars.color.greyLight3,
+        marginInline: calc.subtract(vars.space[16], vars.borderWidth[1]),
+        marginTop: calc.subtract(vars.space[16], vars.borderWidth[1]),
+        padding: vars.space[16],
+      },
+    },
+  },
+]);
+
+const grid = sprinkles({ all: "unset", display: "grid" });
+
+export const mediaComponent = styleVariants({
+  div: [grid, sprinkles({ flexGrow: 1 })],
+  img: [
+    sprinkles({ height: "100%", objectFit: "contain" }),
+    { selectors: { "&:not([src])": { visibility: "hidden" } } },
+  ],
+});
+
+export const mediaOverlay = style([
+  grid,
+  sprinkles({ inset: 0, position: "absolute", visibility: "hidden" }),
+  {
+    "::before": {
+      backgroundColor: vars.color.greyLight12,
+      content: "",
+      inset: vars.space[0],
+      opacity: vars.opacity["10%"],
+      position: "absolute",
+    },
+    selectors: {
+      [`${interactive}:focus-visible &, ${interactive}:not([data-disabled]) ${media}:hover > &`]:
+        { visibility: "visible" },
+      [`${interactive}:not([data-disabled]) &:has(:focus-visible)`]: {
+        visibility: "visible",
+      },
+    },
+  },
+]);
+
+const nonMedia = style([
+  flex,
+  sprinkles({
+    alignItems: "center",
+    boxSizing: "border-box",
+    flexDirection: "row",
+  }),
+  {
+    selectors: {
+      [`${variant.solid} > &`]: { backgroundColor: vars.color.greyLight1 },
+      [`${variant.solid} > &:not(:first-child)`]: {
+        borderTopColor: vars.color.greyLight6,
+        borderTopStyle: "inherit",
+        borderTopWidth: "inherit",
+      },
+    },
+  },
+]);
+
+export const actions = style([
+  nonMedia,
+  sprinkles({ height: 48, justifyContent: "space-between" }),
+  {
+    order: 1,
+    selectors: {
+      [`${variant.solid} > &`]: {
+        paddingLeft: calc.subtract(vars.space[12], vars.borderWidth[1]),
+        paddingRight: calc.subtract(vars.space[8], vars.borderWidth[1]),
+      },
+      [`${variant.outlined} > &`]: {
+        paddingInline: calc.subtract(vars.space[16], vars.borderWidth[1]),
+      },
+    },
+  },
+]);
+
+export const footer = style([
+  nonMedia,
+  sprinkles({ gap: 8, height: 60 }),
+  {
+    order: 2,
+    selectors: {
+      [`${variant.solid} > &`]: {
+        paddingInline: calc.subtract(vars.space[12], vars.borderWidth[1]),
+      },
+      [`${variant.outlined} > &`]: {
+        paddingInline: calc.subtract(vars.space[16], vars.borderWidth[1]),
+      },
+    },
+  },
+]);
+
+export const footerTexts = style([
+  column,
+  sprinkles({ flexBasis: 0, flexGrow: 1, minWidth: 0 }),
+  // Offset `title` and `subtitle` so that they are centered vertically despite
+  // having different line heights.
+  { marginBottom: `calc((${24 / 16}rem - ${16 / 16}rem) / 2)` },
+]);
+
+export const status = style([
+  column,
+  sprinkles({
+    height: 24,
+    insetInline: 0,
+    justifyContent: "center",
+    paddingInline: 8,
+    position: "absolute",
+  }),
+  { backgroundColor: "hsl(251, 91%, 95%)", color: "hsl(250, 43%, 48%)" },
+]);

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

@@ -0,0 +1,166 @@
+import {
+  Badge,
+  Box,
+  Button,
+  Checkbox,
+  IconButton,
+  Text,
+  tokens,
+} 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 { Card, CardActions, CardFooter, CardMedia, CardStatus } from "./Card";
+
+type Story = StoryObj<typeof meta>;
+
+const meta = {
+  component: Card,
+  argTypes: {
+    checked: { if: { arg: "interactive" } },
+    children: { control: { disable: true } },
+    component: { control: { disable: true }, if: { arg: "interactive" } },
+    disabled: { if: { arg: "interactive" } },
+    href: { if: { arg: "interactive" } },
+    onClick: { if: { arg: "interactive" } },
+    size: { control: "select", options: ["small", "medium"] },
+    variant: { control: "select", options: ["solid", "outlined"] },
+  },
+} satisfies Meta<typeof Card>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    children: (
+      <>
+        <CardMedia overlay={<></>} />
+        <CardActions />
+        <CardFooter
+          action={<Button variant="secondary">Action</Button>}
+          subtitle="Subtitle"
+          title="Title"
+        />
+        <CardStatus />
+      </>
+    ),
+    interactive: false,
+    size: "medium",
+    variant: "solid",
+  },
+} satisfies Story;
+
+export const SolidWithImg = {
+  args: {
+    ...Default.args,
+    children: (
+      <>
+        <CardMedia
+          overlay={
+            <Box alignItems="center" justifyContent="center">
+              <Button
+                renderStartIcon={() => (
+                  <AddPhotoAlternateIcon color={tokens.color.greyLight11} />
+                )}
+                variant="secondary"
+              >
+                Update screenshot
+              </Button>
+            </Box>
+          }
+          src="https://images.unsplash.com/photo-1588315029754-2dd089d39a1a?w=512"
+        />
+        <CardFooter
+          action={<IconButton icon="close" />}
+          subtitle="Default • Edited 19 minutes ago"
+          title="Hello"
+        />
+        <CardStatus>Missing screenshot</CardStatus>
+      </>
+    ),
+    interactive: true,
+    style: { width: "448px" },
+  },
+  parameters: { controls: { hideNoControlsWarning: true, include: [] } },
+} satisfies Story;
+
+export const SolidWithDiv = {
+  args: {
+    ...SolidWithImg.args,
+    children: (
+      <>
+        <CardMedia component="div">
+          <Box alignItems="center" justifyContent="center">
+            <Text color="grey11" component="span">
+              No screenshot available
+            </Text>
+          </Box>
+        </CardMedia>
+        <CardActions>
+          <Badge color="purple" title="Legacy Slice" />
+          <Button
+            renderEndIcon={() => (
+              <ArrowDropDownIcon color={tokens.color.greyLight11} />
+            )}
+            renderStartIcon={() => (
+              <SyncAltIcon color={tokens.color.greyLight11} />
+            )}
+            variant="secondary"
+          >
+            Turn into shared Slice
+          </Button>
+        </CardActions>
+        <CardFooter subtitle="Default • Edited 19 minutes ago" title="Hello" />
+      </>
+    ),
+    interactive: false,
+  },
+  parameters: SolidWithImg.parameters,
+} satisfies Story;
+
+export const OutlinedWithImg = {
+  args: {
+    ...Default.args,
+    children: (
+      <>
+        <CardMedia src="https://images.unsplash.com/photo-1588315029754-2dd089d39a1a?w=512" />
+        <CardFooter
+          action={<Checkbox />}
+          subtitle="Library • Edited 19 minutes ago"
+          title="Name"
+        />
+      </>
+    ),
+    interactive: true,
+    size: "small",
+    style: { width: "320px" },
+    variant: "outlined",
+  },
+  parameters: { controls: { hideNoControlsWarning: true, include: [] } },
+} satisfies Story;
+
+export const OutlinedWithDiv = {
+  args: {
+    ...OutlinedWithImg.args,
+    children: (
+      <>
+        <CardMedia component="div">
+          <Box alignItems="center" justifyContent="center">
+            <Text color="grey11" component="span">
+              No screenshot available
+            </Text>
+          </Box>
+        </CardMedia>
+        <CardFooter
+          action={<Checkbox />}
+          subtitle="Library • Edited 19 minutes ago"
+          title="Name"
+        />
+      </>
+    ),
+  },
+  parameters: OutlinedWithImg.parameters,
+} satisfies Story;

package/src/components/Card/Card.tsx

@@ -0,0 +1,171 @@
+import { findFocusableAncestor } from "@prismicio/editor-support/DOM";
+import { Text } from "@prismicio/editor-ui";
+import { clsx } from "clsx";
+import type { UrlObject } from "node:url";
+import {
+  type CSSProperties,
+  type FC,
+  type HTMLAttributes,
+  type ImgHTMLAttributes,
+  type MouseEvent,
+  type PropsWithChildren,
+  type ReactNode,
+  createElement,
+} from "react";
+
+import * as styles from "./Card.css";
+
+type CardProps = PropsWithChildren<
+  {
+    size?: keyof typeof styles.size;
+    style?: CSSProperties;
+    variant?: keyof typeof styles.variant;
+  } & (
+    | { interactive?: false }
+    | ({ interactive: true; href: string } & {
+        component?: "a" | FC<LinkProps>;
+      })
+    | ({ interactive: true; href?: undefined } & {
+        checked?: boolean;
+        disabled?: boolean;
+        onClick?: (event: MouseEvent) => void;
+      })
+  )
+>;
+
+type LinkProps = {
+  href: string | UrlObject;
+  onClick?: (event: MouseEvent) => void;
+};
+
+export const Card: FC<CardProps> = (props) => {
+  const { size = "medium", variant = "solid" } = props;
+  const elementProps = {
+    className: clsx(styles.root, styles.size[size], styles.variant[variant], {
+      [styles.interactive]: props.interactive,
+      [styles.interactiveVariant[variant]]: props.interactive,
+    }),
+  };
+  if (props.interactive === true && props.href === undefined) {
+    const {
+      size: _size,
+      variant: _variant,
+      interactive: _interactive,
+      checked,
+      disabled,
+      onClick,
+      ...otherProps
+    } = props;
+    return (
+      <div
+        {...otherProps}
+        {...elementProps}
+        // TODO: add missing ARIA attributes and keyboard event handlers.
+        data-disabled={disabled === true ? "" : undefined}
+        data-state={checked === true ? "checked" : undefined}
+        onClick={(event) => {
+          if (disabled === true || onClick === undefined) return;
+          const target = event.target as HTMLElement;
+          if (findFocusableAncestor(target) === event.currentTarget) {
+            onClick(event);
+          }
+        }}
+        tabIndex={disabled === true ? undefined : 0}
+      />
+    );
+  } else if (props.interactive === true) {
+    const {
+      size: _size,
+      variant: _variant,
+      interactive: _interactive,
+      component = "a",
+      ...otherProps
+    } = props;
+    return createElement(component, {
+      ...otherProps,
+      ...elementProps,
+      onClick: (event) => {
+        const target = event.target as HTMLElement;
+        if (findFocusableAncestor(target) !== event.currentTarget) {
+          event.preventDefault();
+        }
+      },
+    });
+  } else {
+    const {
+      size: _size,
+      variant: _variant,
+      interactive: _interactive,
+      ...otherProps
+    } = props;
+    return <div {...otherProps} {...elementProps} />;
+  }
+};
+
+type CardMediaProps = { overlay?: ReactNode } & (
+  | ({ component?: "img" } & ImgHTMLAttributes<HTMLImageElement>)
+  | ({ component: "div" } & HTMLAttributes<HTMLDivElement>)
+);
+
+export const CardMedia: FC<CardMediaProps> = ({
+  className,
+  component = "img",
+  overlay,
+  ...otherProps
+}) => (
+  <div className={styles.media}>
+    {createElement(component, {
+      ...otherProps,
+      className: clsx(styles.mediaComponent[component], className),
+    })}
+    {Boolean(overlay) ? (
+      <div className={styles.mediaOverlay}>{overlay}</div>
+    ) : undefined}
+  </div>
+);
+
+export const CardActions: FC<PropsWithChildren> = (props) => (
+  <div {...props} className={styles.actions} />
+);
+
+type CardFooterProps = {
+  action?: ReactNode;
+  subtitle?: ReactNode;
+  title?: ReactNode;
+};
+
+export const CardFooter: FC<CardFooterProps> = ({
+  action,
+  subtitle,
+  title,
+  ...otherProps
+}) => (
+  <div {...otherProps} className={styles.footer}>
+    <div className={styles.footerTexts}>
+      <Text component="span" noWrap variant="bold">
+        {title}
+      </Text>
+      <Text color="grey11" component="span" noWrap variant="small">
+        {subtitle}
+      </Text>
+    </div>
+    {action}
+  </div>
+);
+
+export const CardStatus: FC<PropsWithChildren> = ({
+  children,
+  ...otherProps
+}) => (
+  <div {...otherProps} className={styles.status}>
+    <Text
+      align="center"
+      color="inherit"
+      component="span"
+      noWrap
+      variant="smallBold"
+    >
+      {children}
+    </Text>
+  </div>
+);

package/src/components/Card/index.ts

@@ -0,0 +1 @@
+export { Card, CardActions, CardFooter, CardMedia, CardStatus } from "./Card";

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

@@ -10,6 +10,10 @@ import { Button } from "@prismicio/editor-ui";
 
 const meta = {
   component: HoverCard,
+  argTypes: {
+    children: { control: { disable: true } },
+    trigger: { control: { disable: true } },
+  },
   parameters: { layout: "fullscreen" },
 } satisfies Meta<typeof HoverCard>;
 

package/src/components/Table/Table.tsx

@@ -1,3 +1,4 @@
+import { findFocusableAncestor } from "@prismicio/editor-support/DOM";
 import {
   type FC,
   type MouseEventHandler,
@@ -45,31 +46,20 @@ type TableRowProps = PropsWithChildren<{
   onClick?: MouseEventHandler<HTMLTableRowElement>;
 }>;
 
-const tableRowTag = "prismicTableRow";
-
 export const TableRow: FC<TableRowProps> = ({ children, onClick }) => {
   const section = useTableSection();
 
   return (
     <tr
-      data-tag={tableRowTag}
       className={clsx(styles.row, {
         [styles.rowClickable]: !!onClick,
         [styles.bodyRow]: section === "body",
       })}
       onClick={(event) => {
-        if (!onClick) {
-          return;
-        }
-
+        if (!onClick) return;
         const target = event.target as HTMLElement;
-        const isClickOnTableRow = !!target.closest(
-          `tr[data-tag=${tableRowTag}]`
-        );
-
-        // Prevent a click event propagation from outside of the table DOM structure
-        // E.g.: Dropdown menu item selection that will trigger this onClick function
-        if (isClickOnTableRow) {
+        const focusableAncestor = findFocusableAncestor(target);
+        if (focusableAncestor?.contains(event.currentTarget) ?? true) {
           onClick(event);
         }
       }}

package/src/components/TextLink/TextLink.stories.tsx

@@ -8,13 +8,10 @@ type Story = StoryObj<typeof meta>;
 const meta = {
   component: TextLink,
   argTypes: {
-    color: {
-      control: { type: "select" },
-      options: ["primary", "secondary"],
-    },
+    color: { control: "select", options: ["primary", "secondary"] },
     endIcon: { control: { disable: true } },
     textVariant: {
-      control: { type: "select" },
+      control: "select",
       options: ["normal", "smallBold", "inherit"],
     },
   },

package/src/components/Window/Window.tsx

@@ -1,3 +1,4 @@
+import { findFocusableAncestor } from "@prismicio/editor-support/DOM";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -64,10 +65,13 @@ export const WindowTabsTrigger: FC<WindowTabsTriggerProps> = ({
     {...otherProps}
     asChild
     onMouseDown={(event) => {
-      let target = event.target as HTMLElement | null;
-      while (target !== null && target !== event.currentTarget) {
-        if (target.tabIndex >= 0) event.preventDefault();
-        target = target.parentElement;
+      const target = event.target as HTMLElement;
+      const focusableAncestor = findFocusableAncestor(target);
+      if (
+        focusableAncestor !== event.currentTarget &&
+        focusableAncestor !== event.currentTarget.parentElement
+      ) {
+        event.preventDefault();
       }
       if (target === event.currentTarget) {
         target.scrollIntoView({

package/src/features/slices/sliceBuilder/FloatingBackButton.tsx

@@ -1,10 +1,4 @@
-import {
-  Box,
-  Button,
-  ButtonGroup,
-  ErrorBoundary,
-  tokens,
-} from "@prismicio/editor-ui";
+import { Box, Button, ButtonGroup, ErrorBoundary } from "@prismicio/editor-ui";
 import { useRouter } from "next/router";
 import { type FC, Suspense, useState } from "react";
 
@@ -63,9 +57,7 @@ const BackButton: FC<BackButtonProps> = ({ sourceCustomTypeId }) => {
           onClick={() => {
             void router.push(url);
           }}
-          renderStartIcon={() => (
-            <UndoIcon height={tokens.size[20]} width={tokens.size[20]} />
-          )}
+          renderStartIcon={() => <UndoIcon />}
         >
           Return to {sourceCustomType.label}
         </Button>
@@ -73,9 +65,7 @@ const BackButton: FC<BackButtonProps> = ({ sourceCustomTypeId }) => {
           onClick={() => {
             setVisible(false);
           }}
-          renderStartIcon={() => (
-            <CloseIcon height={tokens.size[20]} width={tokens.size[20]} />
-          )}
+          renderStartIcon={() => <CloseIcon />}
         />
       </ButtonGroup>
     );

package/src/icons/AddPhotoAlternateIcon.tsx

@@ -0,0 +1,19 @@
+import type { FC, SVGProps } from "react";
+
+export const AddPhotoAlternateIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4 5.5C4 4.67157 4.67157 4 5.5 4H18.5C19.3284 4 20 4.67157 20 5.5V12.4413C20 12.4512 19.9997 12.461 19.9991 12.4707C20.0072 12.6083 19.9586 12.7485 19.8536 12.8536C19.6583 13.0488 19.3417 13.0488 19.1464 12.8536L16.3536 10.0607C16.1583 9.8654 15.8417 9.8654 15.6464 10.0607L11.8536 13.8536C11.6583 14.0488 11.3417 14.0488 11.1464 13.8536L9.35355 12.0607C9.15829 11.8654 8.84171 11.8654 8.64645 12.0607L5 15.7071V18.5C5 18.7761 5.22386 19 5.5 19H12.5C12.7761 19 13 19.2239 13 19.5C13 19.7761 12.7761 20 12.5 20H5.5C4.67157 20 4 19.3284 4 18.5V15.5003V15.4997V5.5ZM11.5 12.7929L14.9393 9.35355C15.5251 8.76777 16.4749 8.76777 17.0607 9.35355L19 11.2929V5.5C19 5.22386 18.7761 5 18.5 5H5.5C5.22386 5 5 5.22386 5 5.5V14.2929L7.93934 11.3536C8.52513 10.7678 9.47487 10.7678 10.0607 11.3536L11.5 12.7929ZM16.5 13C16.7761 13 17 13.2239 17 13.5V16H19.5C19.7761 16 20 16.2239 20 16.5C20 16.7761 19.7761 17 19.5 17H17V19.5C17 19.7761 16.7761 20 16.5 20C16.2239 20 16 19.7761 16 19.5V17H13.5C13.2239 17 13 16.7761 13 16.5C13 16.2239 13.2239 16 13.5 16H16V13.5C16 13.2239 16.2239 13 16.5 13Z"
+      fill="currentColor"
+    />
+  </svg>
+);

package/src/icons/ArrowDropDownIcon.tsx

@@ -0,0 +1,14 @@
+import type { FC, SVGProps } from "react";
+
+export const ArrowDropDownIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M12 15L8 10H16L12 15Z" fill="currentColor" />
+  </svg>
+);