From ec1f3b9e4d93d8315bdb4a56d0737f418107c29a Mon Sep 17 00:00:00 2001
From: Jonas Carlsen <jonas.carlsen@knowit.no>
Date: Tue, 8 Oct 2024 16:53:28 +0200
Subject: [PATCH] refactor: use primitives in SlateGrid

---
 .../SlateEditor/plugins/grid/SlateGrid.tsx    | 87 ++++++++++---------
 .../plugins/grid/SlateGridCell.tsx            | 52 +++++------
 2 files changed, 67 insertions(+), 72 deletions(-)

diff --git a/src/components/SlateEditor/plugins/grid/SlateGrid.tsx b/src/components/SlateEditor/plugins/grid/SlateGrid.tsx
index c055590fef..0605d481d6 100644
--- a/src/components/SlateEditor/plugins/grid/SlateGrid.tsx
+++ b/src/components/SlateEditor/plugins/grid/SlateGrid.tsx
@@ -10,36 +10,39 @@ import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Editor, Path, Transforms } from "slate";
 import { ReactEditor, RenderElementProps } from "slate-react";
-import styled from "@emotion/styled";
-import { spacing } from "@ndla/core";
+import { Portal } from "@ark-ui/react";
 import { Pencil } from "@ndla/icons/action";
-import { Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalTitle, ModalTrigger } from "@ndla/modal";
-import { IconButton } from "@ndla/primitives";
+import {
+  DialogBody,
+  DialogContent,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+  IconButton,
+} from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { EmbedWrapper, Grid, GridType } from "@ndla/ui";
 import { GridElement } from ".";
 import { GridProvider } from "./GridContext";
 import GridForm from "./GridForm";
 import DeleteButton from "../../../DeleteButton";
+import { DialogCloseButton } from "../../../DialogCloseButton";
 
 interface Props extends RenderElementProps {
   element: GridElement;
   editor: Editor;
 }
 
-const StyledModalHeader = styled(ModalHeader)`
-  padding-bottom: 0px;
-`;
-
-const StyledModalBody = styled(ModalBody)`
-  padding-top: 0px;
-`;
-
-const ButtonContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  right: -${spacing.large};
-`;
+const ButtonContainer = styled("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    position: "absolute",
+    right: "-xlarge",
+    gap: "3xsmall",
+  },
+});
 
 export const SlateGrid = ({ element, editor, children }: Props) => {
   const { t } = useTranslation();
@@ -78,31 +81,33 @@ export const SlateGrid = ({ element, editor, children }: Props) => {
   );
 
   return (
-    <EmbedWrapper>
-      <ButtonContainer>
-        <DeleteButton aria-label={t("delete")} data-testid="remove-grid" onClick={handleRemove} />
-        <Modal open={isEditing} onOpenChange={setIsEditing}>
-          <ModalTrigger>
+    <DialogRoot open={isEditing} size="small" onOpenChange={(details) => setIsEditing(details.open)}>
+      <EmbedWrapper>
+        <ButtonContainer>
+          <DeleteButton aria-label={t("delete")} data-testid="remove-grid" onClick={handleRemove} />
+          <DialogTrigger asChild>
             <IconButton variant="tertiary" aria-label={t("gridForm.title")} data-testid="edit-grid-button" size="small">
               <Pencil />
             </IconButton>
-          </ModalTrigger>
-          <ModalContent size="small">
-            <StyledModalHeader>
-              <ModalTitle>{t("gridForm.title")}</ModalTitle>
-              <ModalCloseButton />
-            </StyledModalHeader>
-            <StyledModalBody>
-              <GridForm onCancel={onClose} initialData={element.data} onSave={onSave} />
-            </StyledModalBody>
-          </ModalContent>
-        </Modal>
-      </ButtonContainer>
-      <GridProvider value={true}>
-        <Grid border="none" columns={element.data.columns} background={element.data.background}>
-          {children}
-        </Grid>
-      </GridProvider>
-    </EmbedWrapper>
+          </DialogTrigger>
+          <Portal>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>{t("gridForm.title")}</DialogTitle>
+                <DialogCloseButton />
+              </DialogHeader>
+              <DialogBody>
+                <GridForm onCancel={onClose} initialData={element.data} onSave={onSave} />
+              </DialogBody>
+            </DialogContent>
+          </Portal>
+        </ButtonContainer>
+        <GridProvider value={true}>
+          <Grid border="none" columns={element.data.columns} background={element.data.background}>
+            {children}
+          </Grid>
+        </GridProvider>
+      </EmbedWrapper>
+    </DialogRoot>
   );
 };
diff --git a/src/components/SlateEditor/plugins/grid/SlateGridCell.tsx b/src/components/SlateEditor/plugins/grid/SlateGridCell.tsx
index 2a5c5a1d1e..9519915da2 100644
--- a/src/components/SlateEditor/plugins/grid/SlateGridCell.tsx
+++ b/src/components/SlateEditor/plugins/grid/SlateGridCell.tsx
@@ -10,10 +10,9 @@ import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Editor, Transforms } from "slate";
 import { ReactEditor, RenderElementProps } from "slate-react";
-import styled from "@emotion/styled";
-import { spacing, colors, stackOrder } from "@ndla/core";
 import { Pin } from "@ndla/icons/common";
 import { IconButton } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { GridCellElement } from ".";
 
 interface Props extends RenderElementProps {
@@ -21,12 +20,14 @@ interface Props extends RenderElementProps {
   element: GridCellElement;
 }
 
-const StyledButton = styled(IconButton)`
-  position: absolute;
-  z-index: ${stackOrder.offsetDouble};
-  top: ${spacing.xxsmall};
-  right: ${spacing.xxsmall};
-`;
+const StyledIconButton = styled(IconButton, {
+  base: {
+    position: "absolute",
+    zIndex: "docked",
+    top: "4xsmall",
+    right: "4xsmall",
+  },
+});
 
 // TODO: Having the sticky button messes with the actual styling of the cell (I think)
 // TODO: We seem to render empty paragraphs in the grid cells, which messes with margin.
@@ -46,7 +47,7 @@ const GridCell = ({ element, editor, attributes, children }: Props) => {
 
   return (
     <StyledGridCell {...attributes} data-testid="slate-grid-cell">
-      <StyledButton
+      <StyledIconButton
         contentEditable={false}
         onClick={onClickSticky}
         variant={element.data?.parallaxCell === "true" ? "primary" : "tertiary"}
@@ -56,32 +57,21 @@ const GridCell = ({ element, editor, attributes, children }: Props) => {
         data-testid="grid-cell-parallax"
       >
         <Pin />
-      </StyledButton>
+      </StyledIconButton>
       {children}
     </StyledGridCell>
   );
 };
 
-const StyledGridCell = styled.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  border: 1px solid ${colors.brand.light};
-  min-width: 50px;
-
-  overflow-wrap: break-word;
-
-  > p {
-    padding: 0 ${spacing.xxsmall};
-    word-break: break-word;
-  }
-
-  > div,
-  > figure,
-  > iframe {
-    width: 100% !important;
-    inset: 0;
-  }
-`;
+const StyledGridCell = styled("div", {
+  base: {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    border: "1px solid",
+    borderColor: "stroke.default",
+    minWidth: "xxlarge",
+  },
+});
 
 export default GridCell;