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

package/components/Navigation/ChangesItem.tsx

@@ -1,6 +1,14 @@
 import { type FC } from "react";
 import { useRouter } from "next/router";
-import { Box, Button, Text } from "@prismicio/editor-ui";
+import { useMediaQuery } from "@prismicio/editor-support/React";
+import {
+  Box,
+  Button,
+  IconButton,
+  Text,
+  Tooltip,
+  breakpoints,
+} from "@prismicio/editor-ui";
 
 import {
   HoverCard,
@@ -13,6 +21,7 @@ import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { useNetwork } from "@src/hooks/useNetwork";
 import { useAuthStatus } from "@src/hooks/useAuthStatus";
 import { useUnSyncChanges } from "@src/features/sync/useUnSyncChanges";
+import { ChangesIcon } from "@src/icons/ChangesIcon";
 import { AuthStatus } from "@src/modules/userContext/types";
 import { useAutoSync } from "@src/features/sync/AutoSyncProvider";
 import { AutoSyncStatusIndicator } from "@src/features/sync/components/AutoSyncStatusIndicator";
@@ -22,6 +31,7 @@ export const ChangesItem: FC = () => {
   const open = useOpenChangesHoverCard();
   const router = useRouter();
   const { autoSyncStatus } = useAutoSync();
+  const isSmall = useMediaQuery(breakpoints.small);
 
   const onClose = () => {
     setSeenChangesToolTip();
@@ -29,18 +39,42 @@ export const ChangesItem: FC = () => {
 
   return (
     <HoverCard
+      align="start"
       open={open}
       openDelay={3000}
       onClose={onClose}
       side="right"
       sideOffset={24}
-      collisionPadding={280}
       trigger={
-        <Box padding={{ bottom: 24 }}>
+        <Box alignItems={isSmall ? "center" : undefined} flexDirection="column">
           {autoSyncStatus === "failed" ||
           autoSyncStatus === "synced" ||
           autoSyncStatus === "syncing" ? (
             <AutoSyncStatusIndicator autoSyncStatus={autoSyncStatus} />
+          ) : isSmall ? (
+            <Tooltip content="Review changes" side="right">
+              <Box position="relative">
+                {/*
+                 * TODO(DT-1942): This should be an IconButton with a link
+                 * component for accessibility
+                 */}
+                <IconButton
+                  icon={<ChangesIcon />}
+                  onClick={() => {
+                    void router.push("/changes");
+                  }}
+                  variant="solid"
+                />
+                <Box
+                  left="100%"
+                  position="absolute"
+                  top={0}
+                  transform="translate(-50%, -50%)"
+                >
+                  <ChangesCount color="purple" />
+                </Box>
+              </Box>
+            </Tooltip>
           ) : (
             // TODO(DT-1942): This should be a Button with a link component for
             // accessibility
@@ -52,7 +86,8 @@ export const ChangesItem: FC = () => {
               sx={{ width: "100%" }}
             >
               <Box alignItems="center" gap={4}>
-                <Text variant="bold">Review changes</Text> <ChangesCount />
+                <Text variant="bold">Review changes</Text>{" "}
+                <ChangesCount color="grey" />
               </Box>
             </Button>
           )}
@@ -70,7 +105,9 @@ export const ChangesItem: FC = () => {
   );
 };
 
-export const ChangesCount: FC = () => {
+type ChangesCountProps = { color: "grey" | "purple" };
+
+export const ChangesCount: FC<ChangesCountProps> = ({ color }) => {
   const isOnline = useNetwork();
   const authStatus = useAuthStatus();
   const { unSyncedSlices, unSyncedCustomTypes } = useUnSyncChanges();
@@ -91,8 +128,12 @@ export const ChangesCount: FC = () => {
   const formattedNumberOfChanges = numberOfChanges > 9 ? "+9" : numberOfChanges;
 
   return (
-    <Box padding={{ inline: 6 }} borderRadius={10} backgroundColor="grey5">
-      <Text color="grey11" variant="small">
+    <Box
+      padding={{ inline: 6 }}
+      borderRadius={10}
+      backgroundColor={color === "grey" ? "grey5" : "purple9"}
+    >
+      <Text color={color === "grey" ? "grey11" : "grey1"} variant="small">
         {formattedNumberOfChanges}
       </Text>
     </Box>

package/components/Navigation/index.test.tsx

@@ -98,7 +98,7 @@ describe("Side Navigation", () => {
     renderSideNavigation();
     expect(await screen.findByText("foo")).toBeVisible();
     expect(await screen.findByText("foo.prismic.io")).toBeVisible();
-    const link = await screen.findByTitle("Open Prismic repository");
+    const link = screen.getByTestId("prismic-repository-link");
     expect(link).toHaveAttribute("href", "https://foo.prismic.io");
     expect(link).toHaveAttribute("target", "_blank");
   });

package/components/Navigation/index.tsx

@@ -1,3 +1,4 @@
+import { Box } from "@prismicio/editor-ui";
 import { Suspense, type FC } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -65,7 +66,9 @@ const Navigation: FC = () => {
         href={repositoryUrl}
       />
 
-      <ChangesItem />
+      <Box flexDirection="column" padding={{ bottom: 24 }}>
+        <ChangesItem />
+      </Box>
 
       <SideNavList>
         <SideNavListItem>

package/out/404.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/4f1e84c70ef0e169.css" as="style"/><link rel="stylesheet" href="/_next/static/css/4f1e84c70ef0e169.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-9e5ae468938cc67a.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/6jRG4-M2kPuqHpE210vBe/_buildManifest.js" defer=""></script><script src="/_next/static/6jRG4-M2kPuqHpE210vBe/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"6jRG4-M2kPuqHpE210vBe","runtimeConfig":{"sentryEnvironment":"beta"},"nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
+<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/css/21654235130d0806.css" as="style"/><link rel="stylesheet" href="/_next/static/css/21654235130d0806.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-2f903acb0cccbf9e.js" defer=""></script><script src="/_next/static/chunks/framework-cdccea7a52cc6e81.js" defer=""></script><script src="/_next/static/chunks/main-5e6780279ca21cb9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-fe38e3feca584fa4.js" defer=""></script><script src="/_next/static/chunks/pages/_error-69b4f498bafdd188.js" defer=""></script><script src="/_next/static/BgmBc78JMOwL2qPVTvh8F/_buildManifest.js" defer=""></script><script src="/_next/static/BgmBc78JMOwL2qPVTvh8F/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"BgmBc78JMOwL2qPVTvh8F","runtimeConfig":{"sentryEnvironment":"beta"},"nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>

package/out/_next/static/{6jRG4-M2kPuqHpE210vBe → BgmBc78JMOwL2qPVTvh8F}/_buildManifest.js

@@ -1 +1 @@
-self.__BUILD_MANIFEST=function(s,c,a,e,t,i,b,d,n,f,u,h,l,k,j,p,g,o,r){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[a,j,p,"static/chunks/pages/index-cf93d16e9c63b6db.js"],"/_error":["static/chunks/pages/_error-69b4f498bafdd188.js"],"/changelog":[s,e,"static/chunks/870-0c7a8a9622de78b7.js","static/chunks/pages/changelog-57289ca6bc99702b.js"],"/changes":[s,t,"static/chunks/8eec4907-b712959d9f984b68.js",i,"static/chunks/918-5bb55fb464e34768.js",c,d,"static/css/838fd8bb5a7c32b0.css","static/chunks/pages/changes-23829ddb11cac992.js"],"/custom-types":[a,j,p,"static/chunks/pages/custom-types-3c8e721ec6802127.js"],"/custom-types/[customTypeId]":[s,n,f,u,h,e,b,i,l,g,c,a,k,o,r,"static/chunks/pages/custom-types/[customTypeId]-d1a4a07e6b600fa6.js"],"/labs":["static/chunks/pages/labs-49bed0a08da3772c.js"],"/page-types/[pageTypeId]":[s,n,f,u,h,e,b,i,l,g,c,a,k,o,r,"static/chunks/pages/page-types/[pageTypeId]-a724ff12ef322020.js"],"/settings":["static/css/ca32882a5d2d8d88.css","static/chunks/pages/settings-12f209f1d5d42b1c.js"],"/slices":[s,t,b,c,d,"static/css/f8eb526e10bc2441.css","static/chunks/pages/slices-01aa9c2bc7c192be.js"],"/slices/[lib]/[sliceName]/[variation]":[s,t,n,f,u,h,e,b,i,l,c,k,d,"static/css/b22c0750c14cc089.css","static/chunks/pages/slices/[lib]/[sliceName]/[variation]-ba6c3e2624f32fcd.js"],"/slices/[lib]/[sliceName]/[variation]/simulator":[t,"static/chunks/72585f70-28b4d7d5384b3703.js","static/chunks/18539003-a5a5d48f20a7b261.js","static/chunks/46-d22d7a121254e31d.js","static/chunks/pages/slices/[lib]/[sliceName]/[variation]/simulator-3eb0fdce3228d389.js"],sortedPages:["/","/_app","/_error","/changelog","/changes","/custom-types","/custom-types/[customTypeId]","/labs","/page-types/[pageTypeId]","/settings","/slices","/slices/[lib]/[sliceName]/[variation]","/slices/[lib]/[sliceName]/[variation]/simulator"]}}("static/chunks/59b4e022-7a3b5554b806349f.js","static/chunks/25-792af14760d9df34.js","static/chunks/799-9bea9069969f5fe0.js","static/chunks/183-4feb6bb3eddbc768.js","static/chunks/c8eae200-966ce352f7b5d2b9.js","static/chunks/543-f8766685f7f451e2.js","static/chunks/50-cfc2514205b86001.js","static/chunks/286-e0950c3083c672e8.js","static/chunks/f36c6662-03bb5e9d9aa0b0aa.js","static/chunks/4c744e84-e3161d754618373f.js","static/chunks/065a3ddb-9a38ca0d60f0bf2f.js","static/chunks/1cc2734a-2c5b6c0367fcde86.js","static/chunks/696-b992b9e1ce75777e.js","static/chunks/318-2426f74a0d6c3b89.js","static/chunks/727-df23c133f7cbf952.js","static/css/be1f49e49a5aa7eb.css","static/chunks/210-aee6116139329803.js","static/chunks/904-1a755ebb0f5ee4ac.js","static/css/72465cc1225f28a2.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
+self.__BUILD_MANIFEST=function(s,c,a,e,t,i,b,n,f,u,d,h,l,k,j,p,g,o,r){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[a,j,p,"static/chunks/pages/index-cf93d16e9c63b6db.js"],"/_error":["static/chunks/pages/_error-69b4f498bafdd188.js"],"/changelog":[s,e,"static/chunks/870-0c7a8a9622de78b7.js","static/chunks/pages/changelog-5c9ac93faf0df06b.js"],"/changes":[s,t,"static/chunks/8eec4907-b712959d9f984b68.js",i,"static/chunks/918-5bb55fb464e34768.js",c,n,"static/css/838fd8bb5a7c32b0.css","static/chunks/pages/changes-3e4989e09fd412a8.js"],"/custom-types":[a,j,p,"static/chunks/pages/custom-types-3c8e721ec6802127.js"],"/custom-types/[customTypeId]":[s,f,u,d,h,e,b,i,l,g,c,a,k,o,r,"static/chunks/pages/custom-types/[customTypeId]-d1a4a07e6b600fa6.js"],"/labs":["static/chunks/pages/labs-6f5925cd6cdcee9e.js"],"/page-types/[pageTypeId]":[s,f,u,d,h,e,b,i,l,g,c,a,k,o,r,"static/chunks/pages/page-types/[pageTypeId]-a724ff12ef322020.js"],"/settings":["static/css/ca32882a5d2d8d88.css","static/chunks/pages/settings-f0620e5b727cda03.js"],"/slices":[s,t,b,c,n,"static/css/f8eb526e10bc2441.css","static/chunks/pages/slices-77cff50b1df13579.js"],"/slices/[lib]/[sliceName]/[variation]":[s,t,f,u,d,h,e,b,i,l,c,k,n,"static/css/b22c0750c14cc089.css","static/chunks/pages/slices/[lib]/[sliceName]/[variation]-f0052f6f451357a6.js"],"/slices/[lib]/[sliceName]/[variation]/simulator":[t,"static/chunks/72585f70-28b4d7d5384b3703.js","static/chunks/18539003-a5a5d48f20a7b261.js","static/chunks/46-d22d7a121254e31d.js","static/chunks/pages/slices/[lib]/[sliceName]/[variation]/simulator-3eb0fdce3228d389.js"],sortedPages:["/","/_app","/_error","/changelog","/changes","/custom-types","/custom-types/[customTypeId]","/labs","/page-types/[pageTypeId]","/settings","/slices","/slices/[lib]/[sliceName]/[variation]","/slices/[lib]/[sliceName]/[variation]/simulator"]}}("static/chunks/59b4e022-7a3b5554b806349f.js","static/chunks/25-792af14760d9df34.js","static/chunks/799-7b910b896ff60ebe.js","static/chunks/183-ebd633fed7c74545.js","static/chunks/c8eae200-966ce352f7b5d2b9.js","static/chunks/543-f8766685f7f451e2.js","static/chunks/50-cfc2514205b86001.js","static/chunks/286-e0950c3083c672e8.js","static/chunks/f36c6662-03bb5e9d9aa0b0aa.js","static/chunks/4c744e84-e3161d754618373f.js","static/chunks/065a3ddb-9a38ca0d60f0bf2f.js","static/chunks/1cc2734a-2c5b6c0367fcde86.js","static/chunks/696-b992b9e1ce75777e.js","static/chunks/318-2426f74a0d6c3b89.js","static/chunks/727-2c302be2def92786.js","static/css/be1f49e49a5aa7eb.css","static/chunks/210-aee6116139329803.js","static/chunks/904-6fec9bac11fa810f.js","static/css/72465cc1225f28a2.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();