refactor(slice-machine-ui): merge SharedSliceSelectionCard and Shared…

…SliceViewCard
prismicio · Oct 20, 2023 · cf44e79 · cf44e79
1 parent e5f6172
commit cf44e79
Show file tree

Hide file tree

Showing 17 changed files with 277 additions and 256 deletions.
diff --git a/cypress/e2e/user-flows/scenario_slice_association.cy.js b/cypress/e2e/user-flows/scenario_slice_association.cy.js
@@ -87,7 +87,7 @@ describe.skip("I am an existing SM user (Next) and I want to associate a Slice t
     cy.visit(`/custom-types/${customTypeId}`);
 
     cy.get("[data-cy=update-slices]").click();
-    cy.get(`[data-cy=shared-slice-selection-card-${sliceId}]`).click();
+    cy.get(`[data-cy=shared-slice-card-${sliceId}]`).click();
     cy.get("[data-cy=update-slices-modal]").submit();
 
     customTypeBuilder.save();

diff --git a/cypress/pages/UpdateSliceZoneModal.js b/cypress/pages/UpdateSliceZoneModal.js
@@ -4,7 +4,7 @@ class UpdateSliceZoneModal {
   }
 
   selectSlice(sliceId) {
-    cy.get(`[data-cy=shared-slice-selection-card-${sliceId}]`).click();
+    cy.get(`[data-cy=shared-slice-card-${sliceId}]`).click();
     return this;
   }
 

diff --git a/cypress/pages/customTypes/customTypeBuilder.js b/cypress/pages/customTypes/customTypeBuilder.js
@@ -31,7 +31,7 @@ class CustomTypeBuilder extends BaseBuilder {
   async addSliceToSliceZone(sliceId) {
     await cy.findAllByText(/Add slices/)[0].click();
     this.updateSliceZoneButton.click();
-    cy.get(`[data-cy=shared-slice-selection-card-${sliceId}]`).click();
+    cy.get(`[data-cy=shared-slice-card-${sliceId}]`).click();
     cy.get("[data-cy=update-slices-modal]").submit();
     return this;
   }

diff --git a/packages/slice-machine/components/ChangesItems/ChangesItems.tsx b/packages/slice-machine/components/ChangesItems/ChangesItems.tsx
@@ -14,7 +14,7 @@ import { countMissingScreenshots } from "@src/domain/slice";
 import { useScreenshotChangesModal } from "@src/hooks/useScreenshotChangesModal";
 import { ModelStatus } from "@lib/models/common/ModelStatus";
 import { LocalOrRemoteCustomType } from "@lib/models/common/ModelData";
-import { SharedSliceViewCard } from "@src/features/slices/sliceCards/SharedSliceViewCard";
+import { SharedSliceCard } from "@src/features/slices/sliceCards/SharedSliceCard";
 
 interface ChangesItemsProps extends ModelStatusInformation {
   unSyncedCustomTypes: LocalOrRemoteCustomType[];
@@ -119,16 +119,18 @@ export const ChangesItems: React.FC<ChangesItemsProps> = ({
             renderElem={(slice) => {
               const modelStatus = modelsStatuses.slices[slice.model.id];
               return (
-                <SharedSliceViewCard
+                <SharedSliceCard
                   action={{ type: "status", authStatus, isOnline, modelStatus }}
-                  isDeletedSlice={modelStatus === ModelStatus.Deleted}
+                  isDeleted={modelStatus === ModelStatus.Deleted}
+                  mode="navigation"
                   onUpdateScreenshot={() => {
                     onOpenModal({
                       sliceFilterFn: (s) =>
                         s.filter((e) => e.model.id === slice.model.id),
                     });
                   }}
                   slice={slice}
+                  variant="solid"
                 />
               );
             }}

diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/List.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/List.tsx
@@ -10,8 +10,8 @@ import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { ToasterType } from "@src/modules/toaster";
 import { CustomTypeFormat } from "@slicemachine/manager";
 import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
-import { NonSharedSliceViewCard } from "@src/features/slices/sliceCards/NonSharedSliceViewCard";
-import { SharedSliceViewCard } from "@src/features/slices/sliceCards/SharedSliceViewCard";
+import { NonSharedSliceCard } from "@src/features/slices/sliceCards/NonSharedSliceCard";
+import { SharedSliceCard } from "@src/features/slices/sliceCards/SharedSliceCard";
 import { useLab } from "@src/features/labs/labsList/useLab";
 
 interface SlicesListProps {
@@ -69,20 +69,20 @@ export const SlicesList: React.FC<SlicesListProps> = ({
       renderElem={(slice) => {
         if (slice.type !== "SharedSlice") {
           const nonSharedSlice = slice.payload as NonSharedSliceInSliceZone;
-          return <NonSharedSliceViewCard slice={nonSharedSlice} path={path} />;
+          return <NonSharedSliceCard slice={nonSharedSlice} path={path} />;
         } else {
           const sharedSlice = slice.payload as ComponentUI;
           return (
-            <SharedSliceViewCard
+            <SharedSliceCard
               action={{
                 type: "remove",
                 onRemove: () => {
                   onRemoveSharedSlice(sharedSlice.model.id);
                 },
               }}
-              isDeletedSlice={false}
-              onUpdateScreenshot={undefined}
+              mode="navigation"
               slice={sharedSlice}
+              variant="solid"
             />
           );
         }

diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModalList.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModalList.tsx
@@ -3,7 +3,7 @@ import { FieldArray } from "formik";
 import Grid from "@components/Grid";
 import { SliceZoneFormValues } from "./UpdateSliceZoneModal";
 import { ComponentUI } from "@lib/models/common/ComponentUI";
-import { SharedSliceSelectionCard } from "@src/features/slices/sliceCards/SharedSliceSelectionCard";
+import { SharedSliceCard } from "@src/features/slices/sliceCards/SharedSliceCard";
 
 const UpdateSliceZoneModalList: React.FC<{
   availableSlices: ReadonlyArray<ComponentUI>;
@@ -23,8 +23,10 @@ const UpdateSliceZoneModalList: React.FC<{
             false;
           const isInSliceZone = values.sliceKeys.includes(slice.model.id);
           return (
-            <SharedSliceSelectionCard
+            <SharedSliceCard
+              action={{ type: "checkbox" }}
               isComingSoon={isComingSoon}
+              mode="selection"
               onSelectedChange={(selected) => {
                 if (selected) {
                   arrayHelpers.push(slice.model.id);
@@ -34,6 +36,7 @@ const UpdateSliceZoneModalList: React.FC<{
               }}
               selected={isInSliceZone}
               slice={slice}
+              variant="outlined"
             />
           );
         }}

diff --git a/packages/slice-machine/pages/slices.tsx b/packages/slice-machine/pages/slices.tsx
@@ -27,7 +27,7 @@ import { SliceMachineStoreType } from "@src/redux/type";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { getLibraries, getRemoteSlices } from "@src/modules/slices";
 import { useScreenshotChangesModal } from "@src/hooks/useScreenshotChangesModal";
-import { SharedSliceViewCard } from "@src/features/slices/sliceCards/SharedSliceViewCard";
+import { SharedSliceCard } from "@src/features/slices/sliceCards/SharedSliceCard";
 import { SLICES_CONFIG } from "@src/features/slices/slicesConfig";
 import { SliceToastMessage } from "@components/ToasterContainer";
 
@@ -171,7 +171,7 @@ const SlicesIndex: React.FunctionComponent = () => {
                           elems={components}
                           defineElementKey={(slice) => slice.model.name}
                           renderElem={(slice) => (
-                            <SharedSliceViewCard
+                            <SharedSliceCard
                               action={{
                                 type: "menu",
                                 onRemove: () => {
@@ -183,7 +183,7 @@ const SlicesIndex: React.FunctionComponent = () => {
                                   openRenameSliceModal();
                                 },
                               }}
-                              isDeletedSlice={false}
+                              mode="navigation"
                               onUpdateScreenshot={() => {
                                 onOpenModal({
                                   sliceFilterFn: (s) =>
@@ -193,6 +193,7 @@ const SlicesIndex: React.FunctionComponent = () => {
                                 });
                               }}
                               slice={slice}
+                              variant="solid"
                             />
                           )}
                           gridGap="32px 16px"

diff --git a/packages/slice-machine/src/components/Card/Card.css.ts b/packages/slice-machine/src/components/Card/Card.css.ts
@@ -25,8 +25,18 @@ export const size = styleVariants({
 });
 
 export const variant = styleVariants({
-  solid: [sprinkles({ backgroundColor: colors.grey3 })],
-  outlined: [sprinkles({ backgroundColor: colors.grey2 })],
+  solid: [
+    sprinkles({
+      backgroundColor: colors.grey3,
+      borderColor: selectors.checked(colors.purple10),
+    }),
+  ],
+  outlined: [
+    sprinkles({
+      backgroundColor: colors.grey2,
+      borderColor: selectors.checked(colors.purple8),
+    }),
+  ],
 });
 
 export const interactive = style({
@@ -40,10 +50,7 @@ export const interactive = style({
 export const interactiveVariant = {
   solid: sprinkles({
     backgroundColor: selectors.focusVisible(colors.grey5),
-    borderColor: {
-      ...selectors.checked(colors.purple10),
-      ...selectors.focusVisible(colors.purple10),
-    },
+    borderColor: selectors.focusVisible(colors.purple10),
   }),
   outlined: sprinkles({
     backgroundColor: {
@@ -53,7 +60,6 @@ export const interactiveVariant = {
     },
     borderColor: {
       ...selectors.active(colors.purple9),
-      ...selectors.checked(colors.purple8),
       ...selectors.focusVisible(colors.purple8),
     },
   }),

diff --git a/packages/slice-machine/src/components/Card/Card.stories.tsx b/packages/slice-machine/src/components/Card/Card.stories.tsx
@@ -20,7 +20,6 @@ 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" } },
@@ -35,6 +34,7 @@ export default meta;
 
 export const Default = {
   args: {
+    checked: false,
     children: (
       <>
         <CardMedia overlay={<></>} />

diff --git a/packages/slice-machine/src/components/Card/Card.tsx b/packages/slice-machine/src/components/Card/Card.tsx
@@ -17,6 +17,7 @@ import * as styles from "./Card.css";
 
 type CardProps = PropsWithChildren<
   {
+    checked?: boolean;
     size?: keyof typeof styles.size;
     style?: CSSProperties;
     variant?: keyof typeof styles.variant;
@@ -26,7 +27,6 @@ type CardProps = PropsWithChildren<
         component?: "a" | FC<LinkProps>;
       })
     | ({ interactive: true; href?: undefined } & {
-        checked?: boolean;
         disabled?: boolean;
         onClick?: (event: MouseEvent) => void;
       })
@@ -39,19 +39,20 @@ type LinkProps = {
 };
 
 export const Card: FC<CardProps> = (props) => {
-  const { size = "medium", variant = "solid" } = props;
+  const { checked = false, 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,
     }),
+    "data-state": checked === true ? "checked" : undefined,
   };
   if (props.interactive === true && props.href === undefined) {
     const {
+      checked: _checked,
       size: _size,
       variant: _variant,
       interactive: _interactive,
-      checked,
       disabled,
       onClick,
       ...otherProps
@@ -62,7 +63,6 @@ export const Card: FC<CardProps> = (props) => {
         {...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;
@@ -75,6 +75,7 @@ export const Card: FC<CardProps> = (props) => {
     );
   } else if (props.interactive === true) {
     const {
+      checked: _checked,
       size: _size,
       variant: _variant,
       interactive: _interactive,
@@ -93,6 +94,7 @@ export const Card: FC<CardProps> = (props) => {
     });
   } else {
     const {
+      checked: _checked,
       size: _size,
       variant: _variant,
       interactive: _interactive,

diff --git a/packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceButton.tsx b/packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceButton.tsx
@@ -20,7 +20,7 @@ import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { ToasterType } from "@src/modules/toaster";
 import { getFieldMappingFingerprint } from "@src/domain/slice";
 
-import { NonSharedSliceViewCardProps } from "../sliceCards/NonSharedSliceViewCard";
+import { NonSharedSliceCardProps } from "../sliceCards/NonSharedSliceCard";
 import { ConvertLegacySliceAsNewSliceDialog } from "./ConvertLegacySliceAsNewSliceDialog";
 import { ConvertLegacySliceAsNewVariationDialog } from "./ConvertLegacySliceAsNewVariationDialog";
 import { ConvertLegacySliceMergeWithIdenticalDialog } from "./ConvertLegacySliceMergeWithIdenticalDialog";
@@ -30,7 +30,7 @@ import {
   LegacySliceConversionType,
 } from "./types";
 
-type ConvertLegacySliceButtonProps = NonSharedSliceViewCardProps;
+type ConvertLegacySliceButtonProps = NonSharedSliceCardProps;
 
 export const ConvertLegacySliceButton: FC<ConvertLegacySliceButtonProps> = ({
   slice,

diff --git a/packages/slice-machine/src/features/slices/convertLegacySlice/types.ts b/packages/slice-machine/src/features/slices/convertLegacySlice/types.ts
@@ -1,7 +1,7 @@
 import { LibraryUI } from "@models/common/LibraryUI";
 import { ComponentUI } from "@models/common/ComponentUI";
 
-import { NonSharedSliceViewCardProps } from "../sliceCards/NonSharedSliceViewCard";
+import { NonSharedSliceCardProps } from "../sliceCards/NonSharedSliceCard";
 
 export type ConvertLegacySliceAndTrackArgs = {
   libraryID: string;
@@ -34,4 +34,4 @@ export type DialogProps = {
   libraries: readonly LibraryUI[];
   localSharedSlices: ComponentUI[];
   identicalSlices: IdenticalSlice[];
-} & Pick<NonSharedSliceViewCardProps, "path" | "slice">;
+} & Pick<NonSharedSliceCardProps, "path" | "slice">;
diff --git a/...ces/sliceCards/NonSharedSliceViewCard.tsx → .../slices/sliceCards/NonSharedSliceCard.tsx b/...ces/sliceCards/NonSharedSliceViewCard.tsx → .../slices/sliceCards/NonSharedSliceCard.tsx
@@ -8,7 +8,7 @@ import { useLab } from "@src/features/labs/labsList/useLab";
 
 import { ConvertLegacySliceButton } from "../convertLegacySlice/ConvertLegacySliceButton";
 
-export type NonSharedSliceViewCardProps = {
+export type NonSharedSliceCardProps = {
   slice: NonSharedSliceInSliceZone;
   path: {
     customTypeID: string;
@@ -17,7 +17,7 @@ export type NonSharedSliceViewCardProps = {
   };
 };
 
-export const NonSharedSliceViewCard: FC<NonSharedSliceViewCardProps> = ({
+export const NonSharedSliceCard: FC<NonSharedSliceCardProps> = ({
   slice,
   path,
 }) => {