slice-machine-ui 1.25.1-beta.4 → 1.25.1-beta.6

package/src/components/SideNav/SideNav.module.css

@@ -0,0 +1,318 @@
+.block {
+  all: unset;
+  box-sizing: border-box;
+  font-family: var(--font-family-body);
+}
+
+.blockWithDisplayRevert {
+  composes: block;
+  display: revert;
+}
+
+.interactiveElement {
+  transition-duration: 200ms;
+  transition-property: background-color, border-color, boxShadow, color;
+  transition-timing-function: ease-out;
+}
+
+.root {
+  composes: block;
+  background-color: var(--grey2);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding: 16px;
+  padding-bottom: 0px;
+  /* stylelint-disable-next-line declaration-property-value-allowed-list -- Accounts for the 1 px right border of the `PageLayoutPane` component. */
+  padding-right: calc(16px - 1px);
+}
+
+.logo {
+  composes: blockWithDisplayRevert;
+  height: 32px;
+  margin-bottom: 32px;
+  width: 32px;
+}
+
+.repository {
+  composes: block;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.repositoryInfo {
+  flex: 1;
+  min-width: 0;
+}
+
+.repositoryName {
+  composes: blockWithDisplayRevert;
+  color: var(--grey12);
+  font-size: calc(18rem / 16);
+  font-weight: 500;
+  line-height: calc(32rem / 16);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.repositoryDomain {
+  composes: blockWithDisplayRevert;
+  color: var(--grey11);
+  font-size: calc(12rem / 16);
+  line-height: calc(16rem / 16);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.repositoryLinkIcon {
+  composes: block interactiveElement;
+  align-items: center;
+  background-color: var(--grey2);
+  border-color: transparent;
+  border-radius: 6px;
+  border-style: solid;
+  border-width: 1px;
+  color: var(--grey11);
+  cursor: pointer;
+  display: flex;
+  height: 32px;
+  justify-content: center;
+  width: 32px;
+  &:hover {
+    background-color: var(--grey4);
+    border-color: var(--grey7);
+  }
+  &:focus-visible {
+    background-color: var(--grey2);
+    border-color: var(--purple8);
+  }
+  &:focus {
+    border-color: var(--purple10);
+    box-shadow: var(--box-shadow-purple-focus);
+  }
+}
+
+.list {
+  composes: blockWithDisplayRevert;
+  list-style-type: none;
+  &:last-child {
+    margin-bottom: 16px;
+  }
+}
+
+.listBottom {
+  margin-top: auto;
+  padding-top: 48px;
+}
+
+.listItem {
+  composes: blockWithDisplayRevert;
+  margin-top: 8px;
+  &:first-child {
+    margin-top: 0px;
+  }
+}
+
+.listTitle {
+  composes: blockWithDisplayRevert;
+  color: var(--grey11);
+  font-size: calc(12rem / 16);
+  font-weight: 600;
+  line-height: calc(16rem / 16);
+  margin-bottom: 8px;
+  margin-top: 16px;
+}
+
+.separator {
+  margin-top: 8px;
+}
+
+.link {
+  composes: block interactiveElement;
+  align-items: center;
+  border-radius: 6px;
+  border-style: solid;
+  border-width: 1px;
+  cursor: pointer;
+  display: flex;
+  font-size: calc(14rem / 16);
+  gap: 8px;
+  height: 48px;
+  line-height: calc(24rem / 16);
+  padding: 8px;
+  padding-right: 16px;
+  &:focus {
+    box-shadow: var(--box-shadow-purple-focus);
+  }
+  /* Not Active & Default */
+  &:not([data-active="true"]) {
+    border-color: transparent;
+    background-color: var(--grey2);
+    color: var(--grey12);
+  }
+  /* Parent list item is open */
+  [data-state="open"] > &,
+  [data-state="open"] > &:hover {
+    border-color: var(--purple10);
+    box-shadow: var(--box-shadow-purple-focus);
+  }
+  /* Not Active & Hover */
+  &:not([data-active="true"]):hover {
+    border-color: var(--grey7);
+    background-color: var(--grey4);
+  }
+  /* Not Active & Focus */
+  &:not([data-active="true"]):focus {
+    border-color: var(--purple10);
+  }
+  /* Active & Default */
+  &[data-active="true"] {
+    background-color: var(--purple3);
+    border-color: var(--purple10);
+    color: var(--purple10);
+  }
+  /* Active & Hover */
+  &[data-active="true"]:hover {
+    background-color: var(--grey1);
+  }
+}
+
+.linkIcon {
+  composes: blockWithDisplayRevert;
+  /* Not Active */
+  .link:not([data-active="true"]) & {
+    color: var(--grey11);
+  }
+  /* Active */
+  .link[data-active="true"] & {
+    color: var(--purple10);
+  }
+}
+
+.linkContent {
+  composes: block;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.linkText {
+  composes: blockWithDisplayRevert;
+  align-self: baseline;
+}
+
+.rightElementPill {
+  composes: block;
+  align-items: center;
+  align-self: center;
+  /* stylelint-disable-next-line declaration-property-value-allowed-list -- The component has a border radius of 32 px in Figma. */
+  border-radius: 32px;
+  border-style: solid;
+  border-width: 1px;
+  display: flex;
+  font-size: calc(12rem / 16);
+  font-weight: 500;
+  height: 20px;
+  justify-content: center;
+  line-height: calc(16rem / 16);
+  min-width: 20px;
+  padding-block: 0px;
+  padding-inline: 4px;
+  /* Not Active */
+  .link:not([data-active="true"]) & {
+    background-color: var(--purple9);
+    border-color: var(--purple10);
+    color: var(--purple3);
+  }
+  /* Active */
+  .link[data-active="true"] & {
+    border-color: transparent;
+    color: var(--grey11);
+  }
+}
+
+.rightElementText {
+  composes: blockWithDisplayRevert;
+  align-self: baseline;
+  color: var(--grey11);
+  font-size: calc(12rem / 16);
+  line-height: calc(16rem / 16);
+  max-width: 82px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.updateInfo {
+  composes: blockWithDisplayRevert;
+  background-color: var(--grey3);
+  border-radius: 6px;
+  margin-top: 32px;
+  padding: 16px;
+}
+
+.updateInfoTitle {
+  composes: blockWithDisplayRevert;
+  color: var(--grey12);
+  font-size: calc(12rem / 16);
+  font-weight: 600;
+  line-height: calc(20rem / 16);
+}
+
+.updateInfoText {
+  composes: blockWithDisplayRevert;
+  color: var(--grey11);
+  font-size: calc(12rem / 16);
+  line-height: calc(20rem / 16);
+}
+
+.updateInfoLink {
+  composes: block interactiveElement;
+  align-items: center;
+  background-color: var(--grey1);
+  border-color: var(--grey6);
+  border-radius: 6px;
+  border-style: solid;
+  border-width: 1px;
+  color: var(--grey12);
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  font-size: calc(14rem / 16);
+  font-weight: 600;
+  justify-content: center;
+  line-height: calc(24rem / 16);
+  margin-top: 16px;
+  padding-block: 4px;
+  padding-inline: 16px;
+  width: 100%;
+  &:hover {
+    background-color: var(--grey3);
+    border-color: var(--grey7);
+  }
+  &:focus {
+    border-color: var(--purple10);
+    box-shadow: var(--box-shadow-purple-focus);
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .repository {
+    align-self: center;
+    padding-bottom: 16px;
+  }
+
+  .repositoryInfo,
+  .listTitle,
+  .linkContent,
+  .updateInfo {
+    display: none;
+  }
+
+  .link {
+    padding-right: 8px;
+  }
+}

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

@@ -0,0 +1,29 @@
+declare const styles: {
+  readonly "block": string;
+  readonly "blockWithDisplayRevert": string;
+  readonly "interactiveElement": string;
+  readonly "link": string;
+  readonly "linkContent": string;
+  readonly "linkIcon": string;
+  readonly "linkText": string;
+  readonly "list": string;
+  readonly "listBottom": string;
+  readonly "listItem": string;
+  readonly "listTitle": string;
+  readonly "logo": string;
+  readonly "repository": string;
+  readonly "repositoryDomain": string;
+  readonly "repositoryInfo": string;
+  readonly "repositoryLinkIcon": string;
+  readonly "repositoryName": string;
+  readonly "rightElementPill": string;
+  readonly "rightElementText": string;
+  readonly "root": string;
+  readonly "separator": string;
+  readonly "updateInfo": string;
+  readonly "updateInfoLink": string;
+  readonly "updateInfoText": string;
+  readonly "updateInfoTitle": string;
+};
+export = styles;
+

package/src/components/SideNav/SideNav.stories.tsx

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { RadarIcon } from "@src/icons/RadarIcon";
 import { LightningIcon } from "@src/icons/Lightning";
 
+import { PageLayout, PageLayoutPane } from "../PageLayout";
 import {
   SideNav,
   SideNavList,
@@ -21,6 +22,15 @@ type Story = StoryObj<typeof meta>;
 const meta = {
   component: SideNav,
   argTypes: { children: { control: { disable: true } } },
+  decorators: [
+    (Story) => (
+      <PageLayout>
+        <PageLayoutPane>
+          <Story />
+        </PageLayoutPane>
+      </PageLayout>
+    ),
+  ],
   parameters: {
     docs: { story: { height: 256, inline: false } },
     layout: "fullscreen",
@@ -157,6 +167,5 @@ export const Default = {
         </SideNavList>
       </>
     ),
-    style: { minHeight: "100vh", width: "320px" },
   },
 } satisfies Story;

package/src/components/SideNav/SideNav.tsx

@@ -1,28 +1,25 @@
+import { useMediaQuery } from "@prismicio/editor-support/React";
+import { Tooltip, breakpoints } from "@prismicio/editor-ui";
+import { clsx } from "clsx";
+import type { UrlObject } from "node:url";
 import {
-  HTMLAttributes,
-  type CSSProperties,
+  forwardRef,
   type FC,
+  type HTMLAttributes,
   type LiHTMLAttributes,
   type MouseEvent,
   type PropsWithChildren,
   type ReactNode,
   type SVGProps,
-  createElement,
-  forwardRef,
 } from "react";
-import clsx from "clsx";
-import type { UrlObject } from "node:url";
 
-import LogoIcon from "@src/icons/LogoIcon";
+import { LogoIcon } from "@src/icons/LogoIcon";
 import OpenIcon from "@src/icons/OpenIcon";
 
 import { Divider } from "../Divider";
+import styles from "./SideNav.module.css";
 
-import * as styles from "./SideNav.css";
-
-type SideNavProps = PropsWithChildren<{ style?: CSSProperties }>;
-
-export const SideNav: FC<SideNavProps> = (props) => (
+export const SideNav: FC<PropsWithChildren> = (props) => (
   <nav {...props} className={styles.root} />
 );
 
@@ -49,14 +46,16 @@ export const SideNavRepository: FC<SideNavRepositoryProps> = ({
         <h2 className={styles.repositoryDomain}>{repositoryDomain}</h2>
       </div>
 
-      <a
-        className={styles.repositoryLinkIcon}
-        href={href}
-        target="_blank"
-        title="Open Prismic repository"
-      >
-        <OpenIcon />
-      </a>
+      <Tooltip content="Open Prismic repository" side="right">
+        <a
+          className={styles.repositoryLinkIcon}
+          data-testid="prismic-repository-link"
+          href={href}
+          target="_blank"
+        >
+          <OpenIcon />
+        </a>
+      </Tooltip>
     </div>
   );
 };
@@ -116,20 +115,22 @@ export const SideNavLink: FC<SideNavLinkProps> = ({
   RightElement,
   Icon,
   active,
-  component = "a",
+  component: Comp = "a",
   ...otherProps
-}) =>
-  createElement(
-    component,
-    { ...otherProps, ...{ className: styles.link, "data-active": active } },
-    <>
-      <Icon className={styles.linkIcon} />
-      <div className={styles.linkContent}>
-        <span className={styles.linkText}>{title}</span>
-        {RightElement}
-      </div>
-    </>,
+}) => {
+  const isSmall = useMediaQuery(breakpoints.small);
+  return (
+    <Tooltip content={title} side="right" visible={isSmall}>
+      <Comp {...otherProps} className={styles.link} data-active={active}>
+        <Icon className={styles.linkIcon} />
+        <div className={styles.linkContent}>
+          <span className={styles.linkText}>{title}</span>
+          {RightElement}
+        </div>
+      </Comp>
+    </Tooltip>
   );
+};
 
 type RightElementProps = PropsWithChildren<
   {
@@ -164,7 +165,7 @@ type UpdateInfoProps = {
 export const UpdateInfo: FC<UpdateInfoProps> = ({
   href,
   onClick,
-  component = "a",
+  component: Comp = "a",
 }) => (
   <div className={styles.updateInfo}>
     <h3 className={styles.updateInfoTitle}>Updates Available</h3>
@@ -176,11 +177,9 @@ export const UpdateInfo: FC<UpdateInfoProps> = ({
     {
       // TODO(DT-1942): This should be a Button with a link component for
       // accessibility
-      createElement(
-        component,
-        { ...{ className: styles.updateInfoLink, onClick }, href },
-        "Learn more",
-      )
     }
+    <Comp className={styles.updateInfoLink} href={href} onClick={onClick}>
+      Learn more
+    </Comp>
   </div>
 );

package/src/components/SideNav/SideNavEnvironmentSelector.module.css

@@ -0,0 +1,59 @@
+.logo {
+  display: block;
+  height: 40px;
+  margin-left: 4px;
+  width: 40px;
+  &[aria-haspopup="menu"]:not([data-disabled]) {
+    cursor: pointer;
+  }
+}
+
+.environmentDotBase {
+  border-radius: 50%;
+  flex-shrink: 0;
+  height: 10px;
+  width: 10px;
+}
+
+.environmentDot-prod {
+  composes: environmentDotBase;
+  background-color: var(--purple10);
+}
+
+.environmentDot-stage {
+  composes: environmentDotBase;
+  background-color: var(--indigo10);
+}
+
+.environmentDot-dev {
+  composes: environmentDotBase;
+  background-color: var(--amber10);
+}
+
+.menuItemEnvironmentDot {
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
+.activeEnvironmentDot {
+  bottom: 0;
+  outline-color: var(--grey2);
+  outline-style: solid;
+  outline-width: 3px;
+  position: absolute;
+  right: 0;
+  transform: translate(50%, 50%);
+}
+
+.activeEnvironmentName {
+  font-weight: 500;
+  line-height: 1.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.loginIcon {
+  height: 24px;
+  width: 24px;
+}

package/src/components/SideNav/SideNavEnvironmentSelector.module.css.d.ts

@@ -0,0 +1,13 @@
+declare const styles: {
+  readonly "activeEnvironmentDot": string;
+  readonly "activeEnvironmentName": string;
+  readonly "environmentDot-dev": string;
+  readonly "environmentDot-prod": string;
+  readonly "environmentDot-stage": string;
+  readonly "environmentDotBase": string;
+  readonly "loginIcon": string;
+  readonly "logo": string;
+  readonly "menuItemEnvironmentDot": string;
+};
+export = styles;
+