Merge pull request #2579 from NDLANO/refactor/visualelement-picker

Add styled variants to visualelementmenu
NDLANO · Nov 1, 2024 · 536ec2b · 536ec2b
2 parents fdef765 + 251e842
commit 536ec2b
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 75 deletions.
diff --git a/e2e/specs/blockpicker_learning_resource.spec.ts b/e2e/specs/blockpicker_learning_resource.spec.ts
@@ -95,19 +95,17 @@ test("opens and closes video", async ({ page }) => {
 
 test("opens and closes audio", async ({ page }) => {
   await page.getByTestId("create-audio").click();
-  await expect(page.getByTestId("modal-header")).toBeVisible();
   await page.getByRole("button").getByText("Velg lyd").first().click();
-  await expect(page.getByTestId("modal-header")).toHaveCount(0);
   await expect(page.getByTestId("remove-element")).toBeVisible();
   await page.getByTestId("remove-element").click();
   await expect(page.getByTestId("remove-element")).toHaveCount(0);
 });
 
 test("opens and closes file", async ({ page }) => {
   await page.getByTestId("create-file").click();
-  await expect(page.getByTestId("modal-header")).toBeVisible();
-  await page.getByTestId("close-modal-button").click();
-  await expect(page.getByTestId("modal-header")).toHaveCount(0);
+  await expect(page.getByRole("dialog")).toBeVisible();
+  await page.getByRole("dialog").getByRole("button", { name: "Avbryt" }).click();
+  await expect(page.getByRole("dialog")).toHaveCount(0);
 });
 
 test("opens and closes url", async ({ page }) => {

diff --git a/src/containers/VisualElement/VisualElementMenu.tsx b/src/containers/VisualElement/VisualElementMenu.tsx
@@ -7,30 +7,20 @@
  */
 
 import { useState } from "react";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
-import { colors, spacing } from "@ndla/core";
 import { Cross, Plus } from "@ndla/icons/action";
 import { Audio } from "@ndla/icons/common";
 import { Camera, H5P, Link, Video } from "@ndla/icons/editor";
+import { Button } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 
-const StyledButton = styled(ButtonV2)`
-  border-radius: 100%;
-  height: 40px;
-  width: 40px;
-  border: 1px solid ${colors.brand.greyMedium};
-  color: ${colors.brand.grey};
-  svg {
-    min-width: 20px;
-    width: 20px;
-    height: 20px;
-  }
-`;
-
-const ButtonContainer = styled.div`
-  display: flex;
-  gap: ${spacing.xsmall};
-`;
+const ButtonWrapper = styled("div", {
+  base: {
+    display: "flex",
+    marginBlockStart: "xsmall",
+    flexDirection: "row",
+    gap: "xsmall",
+  },
+});
 
 interface Props {
   types?: VisualElementType[];
@@ -74,26 +64,21 @@ const VisualElementMenu = ({ onSelect, types = ["image", "video", "h5p", "url"]
   ];
 
   return (
-    <ButtonContainer>
-      <StyledButton variant="outline" onClick={toggleIsOpen} colorTheme="lighter">
+    <ButtonWrapper>
+      <Button variant="secondary" onClick={toggleIsOpen}>
         {isOpen ? <Cross /> : <Plus />}
-      </StyledButton>
+      </Button>
       {isOpen &&
         visualElementButtons
           .filter((button) => types.find((type) => type === button.type))
           .map((button) => {
             return (
-              <StyledButton
-                key={button.type}
-                variant="outline"
-                colorTheme="lighter"
-                onClick={() => handleSelect(button.type)}
-              >
+              <Button key={button.type} variant="secondary" onClick={() => handleSelect(button.type)}>
                 {button.component}
-              </StyledButton>
+              </Button>
             );
           })}
-    </ButtonContainer>
+    </ButtonWrapper>
   );
 };
 

diff --git a/src/containers/VisualElement/VisualElementModalWrapper.tsx b/src/containers/VisualElement/VisualElementModalWrapper.tsx
@@ -7,9 +7,21 @@
  */
 
 import { ReactElement, useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { ModalHeader, ModalBody, ModalCloseButton, Modal, ModalContent } from "@ndla/modal";
+import { DialogBody, DialogRoot, DialogContent, DialogHeader } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { DialogCloseButton } from "../../components/DialogCloseButton";
+
+const StyledDialogContent = styled(DialogContent, {
+  base: {
+    overflow: "hidden",
+  },
+});
+
+const StyledDialogHeader = styled(DialogHeader, {
+  base: {
+    justifyContent: "flex-end",
+  },
+});
 
 interface Props {
   resource: string;
@@ -19,27 +31,7 @@ interface Props {
   label?: string;
 }
 
-const StyledModalContent = styled(ModalContent)`
-  padding: 0;
-  width: 100% !important;
-  height: 100%;
-  max-height: 95%;
-  overflow: hidden;
-`;
-
-const StyledVisualElementModalContent = styled(ModalContent)`
-  h2 {
-    margin-top: 0 !important;
-  }
-`;
-
-const StyledModalBody = styled.div`
-  display: flex;
-  height: 100%;
-`;
-
 const VisualElementModalWrapper = ({ resource, children, onClose, isOpen, label }: Props) => {
-  const { t } = useTranslation();
   const onOpenChange = useCallback(
     (open: boolean) => {
       if (!open) {
@@ -51,23 +43,23 @@ const VisualElementModalWrapper = ({ resource, children, onClose, isOpen, label
 
   if (resource === "h5p") {
     return (
-      <Modal open={isOpen} onOpenChange={onOpenChange}>
-        <StyledModalContent size="large">
-          <StyledModalBody>{children}</StyledModalBody>
-        </StyledModalContent>
-      </Modal>
+      <DialogRoot size="large" open={isOpen} onOpenChange={(details) => onOpenChange(details.open)}>
+        <StyledDialogContent>
+          <DialogBody>{children}</DialogBody>
+        </StyledDialogContent>
+      </DialogRoot>
     );
   }
 
   return (
-    <Modal open={isOpen} onOpenChange={onOpenChange}>
-      <StyledVisualElementModalContent aria-label={label} size="large">
-        <ModalHeader>
-          <ModalCloseButton />
-        </ModalHeader>
-        <ModalBody>{children}</ModalBody>
-      </StyledVisualElementModalContent>
-    </Modal>
+    <DialogRoot open={isOpen} size="large" onOpenChange={(details) => onOpenChange(details.open)}>
+      <DialogContent aria-label={label}>
+        <StyledDialogHeader>
+          <DialogCloseButton />
+        </StyledDialogHeader>
+        <DialogBody>{children}</DialogBody>
+      </DialogContent>
+    </DialogRoot>
   );
 };
 

diff --git a/src/containers/VisualElement/VisualElementPicker.tsx b/src/containers/VisualElement/VisualElementPicker.tsx
@@ -8,7 +8,6 @@
 
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-
 import { Editor, Element, Transforms } from "slate";
 import VisualElementMenu, { VisualElementType } from "./VisualElementMenu";
 import SlateVisualElementPicker from "../../components/SlateEditor/plugins/blockPicker/SlateVisualElementPicker";

diff --git a/src/containers/VisualElement/VisualElementSearch.tsx b/src/containers/VisualElement/VisualElementSearch.tsx
@@ -9,6 +9,7 @@
 import { TFunction } from "i18next";
 import { useTranslation } from "react-i18next";
 import { AudioSearch } from "@ndla/audio-search";
+import { Heading } from "@ndla/primitives";
 import { IAudioSummary, ISearchParams } from "@ndla/types-backend/audio-api";
 import { IImageMetaInformationV3 } from "@ndla/types-backend/image-api";
 import { BrightcoveApiType } from "@ndla/types-embed";
@@ -95,7 +96,7 @@ const VisualElementSearch = ({
     case "video": {
       return (
         <>
-          <h2>{titles(t, selectedResource)[selectedResource]}</h2>
+          <Heading textStyle="title.medium">{titles(t, selectedResource)[selectedResource]}</Heading>
           <VideoSearch
             searchVideos={(query: VideoSearchQuery) => searchVideos(query)}
             locale={locale}
@@ -166,7 +167,7 @@ const VisualElementSearch = ({
         />
       );
     default:
-      return <h3>{`Embedtag ${selectedResource} is not supported.`}</h3>;
+      return <Heading textStyle="title.medium">{`Embedtag ${selectedResource} is not supported.`}</Heading>;
   }
 };