Remove Cross and Pencil usage

NDLANO · Nov 8, 2024 · 4a7ad03 · 4a7ad03
1 parent accc254
commit 4a7ad03
Show file tree

Hide file tree

Showing 24 changed files with 64 additions and 75 deletions.
diff --git a/src/components/AlertModal/AlertModal.tsx b/src/components/AlertModal/AlertModal.tsx
@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
 import { IconButtonV2 } from "@ndla/button";
 import { spacing, colors } from "@ndla/core";
-import { Cross } from "@ndla/icons/action";
+import { CloseLine } from "@ndla/icons/action";
 import { Warning } from "@ndla/icons/editor";
 import { ModalHeader, Modal, ModalContent } from "@ndla/modal";
 import AlertModalFooter from "./AlertModalFooter";
@@ -146,7 +146,7 @@ const AlertModal = ({ text, onCancel, title, actions, component, show, label, se
                 onCancel();
               }}
             >
-              <Cross data-severity={severity} />
+              <CloseLine data-severity={severity} />
             </CloseButton>
           </Header>
           <StyledBody>

diff --git a/src/components/DialogCloseButton.tsx b/src/components/DialogCloseButton.tsx
@@ -8,13 +8,13 @@
 
 import { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
-import { Cross } from "@ndla/icons/action";
+import { CloseLine } from "@ndla/icons/action";
 import { DialogCloseTrigger, IconButton, IconButtonProps } from "@ndla/primitives";
 
 export const DialogCloseButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   ({ children, variant = "clear", ...props }, ref) => {
     const { t } = useTranslation();
-    const content = children ?? <Cross />;
+    const content = children ?? <CloseLine />;
     const label = props["aria-label"] ?? t("close");
 
     return (

diff --git a/src/components/LastUpdatedLine/DateEdit.tsx b/src/components/LastUpdatedLine/DateEdit.tsx
@@ -6,7 +6,7 @@
  *
  */
 
-import { Pencil } from "@ndla/icons/action";
+import { PencilFill } from "@ndla/icons/action";
 import { Button } from "@ndla/primitives";
 import formatDate, { formatDateForBackend } from "../../util/formatDate";
 import DatePicker from "../DatePicker";
@@ -19,7 +19,7 @@ interface Props {
 const DateEdit = ({ published, onChange }: Props) => (
   <DatePicker value={new Date(published)} onChange={(date) => (date ? onChange(formatDateForBackend(date)) : {})}>
     <Button variant="link" data-testid="last-edited">
-      {formatDate(published)} <Pencil />
+      {formatDate(published)} <PencilFill />
     </Button>
   </DatePicker>
 );

diff --git a/src/components/QualityEvaluation/QualityEvaluationModal.tsx b/src/components/QualityEvaluation/QualityEvaluationModal.tsx
@@ -10,7 +10,7 @@ import { FieldHelperProps, FieldInputProps } from "formik";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Portal } from "@ark-ui/react";
-import { Pencil, PencilLine } from "@ndla/icons/action";
+import { PencilLine } from "@ndla/icons/action";
 import {
   DialogBody,
   DialogContent,

diff --git a/src/components/SlateEditor/plugins/audio/SlateAudio.tsx b/src/components/SlateEditor/plugins/audio/SlateAudio.tsx
@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
 import { Editor, Path, Transforms } from "slate";
 import { ReactEditor, RenderElementProps, useSelected } from "slate-react";
 import { Portal } from "@ark-ui/react";
-import { Pencil, DeleteBinLine } from "@ndla/icons/action";
+import { PencilFill, DeleteBinLine } from "@ndla/icons/action";
 import { Link } from "@ndla/icons/common";
 import { DialogContent, DialogRoot, DialogTrigger, IconButton } from "@ndla/primitives";
 import { SafeLinkIconButton } from "@ndla/safelink";
@@ -127,7 +127,7 @@ const SlateAudio = ({ element, editor, attributes, children }: Props) => {
                     variant="tertiary"
                     size="small"
                   >
-                    <Pencil />
+                    <PencilFill />
                   </IconButton>
                 </DialogTrigger>
               )}

diff --git a/src/components/SlateEditor/plugins/comment/CommentPopoverPortal.tsx b/src/components/SlateEditor/plugins/comment/CommentPopoverPortal.tsx
@@ -8,7 +8,7 @@
 
 import { useTranslation } from "react-i18next";
 import { Portal } from "@ark-ui/react";
-import { Cross, DeleteBinLine } from "@ndla/icons/action";
+import { CloseLine, DeleteBinLine } from "@ndla/icons/action";
 import { IconButton, PopoverContent, PopoverTitle } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { CommentEmbedData, CommentMetaData } from "@ndla/types-embed";
@@ -74,7 +74,7 @@ const CommentPopoverPortal = ({ onSave, embed, onDelete, onClose, onOpenChange,
               title={t("modal.closeModal")}
               onClick={onClose}
             >
-              <Cross />
+              <CloseLine />
             </IconButton>
           </ButtonContainer>
         </CommentHeader>

diff --git a/src/components/SlateEditor/plugins/concept/EditGlossExamplesModal.tsx b/src/components/SlateEditor/plugins/concept/EditGlossExamplesModal.tsx
@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
 import { Editor, Transforms } from "slate";
 import { ReactEditor } from "slate-react";
 import { Portal } from "@ark-ui/react";
-import { Pencil } from "@ndla/icons/action";
+import { PencilFill } from "@ndla/icons/action";
 import {
   DialogBackdrop,
   DialogPositioner,
@@ -89,7 +89,7 @@ const EditGlossExamplesModal = ({ concept, editor, element, embed }: Props) => {
             variant="tertiary"
             size="small"
           >
-            <Pencil />
+            <PencilFill />
           </IconButton>
         </DialogTrigger>
       ) : null}

diff --git a/src/components/SlateEditor/plugins/concept/EditGlossExamplesModalContent.tsx b/src/components/SlateEditor/plugins/concept/EditGlossExamplesModalContent.tsx
@@ -10,7 +10,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Editor, Transforms } from "slate";
 import { ReactEditor } from "slate-react";
-import { Cross } from "@ndla/icons/action";
+import { CloseLine } from "@ndla/icons/action";
 import { CheckLine } from "@ndla/icons/editor";
 import {
   Button,
@@ -94,7 +94,7 @@ const EditGlossExamplesModalContent = ({ originalLanguage, examples, editor, ele
         <DialogTitle>{t("form.gloss.editExamplesHeading")}</DialogTitle>
         <DialogCloseTrigger asChild>
           <IconButton variant="clear" title={t("form.close")} aria-label={t("form.close")}>
-            <Cross />
+            <CloseLine />
           </IconButton>
         </DialogCloseTrigger>
       </DialogHeader>

diff --git a/src/components/SlateEditor/plugins/copyright/SlateCopyright.tsx b/src/components/SlateEditor/plugins/copyright/SlateCopyright.tsx
@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
 import { Editor, Element, Path, Transforms } from "slate";
 import { ReactEditor, RenderElementProps } from "slate-react";
 import { Portal } from "@ark-ui/react";
-import { Pencil } from "@ndla/icons/action";
+import { PencilFill } from "@ndla/icons/action";
 import {
   DialogContent,
   DialogRoot,
@@ -151,7 +151,7 @@ const SlateCopyright = ({ attributes, children, element, editor }: Props) => {
               data-testid="edit-copyright"
               title={t("form.copyright.edit")}
             >
-              <Pencil />
+              <PencilFill />
             </IconButton>
           </DialogTrigger>
           <Portal>

diff --git a/src/components/SlateEditor/plugins/external/ExternalEmbedForm.tsx b/src/components/SlateEditor/plugins/external/ExternalEmbedForm.tsx
@@ -9,7 +9,7 @@
 import { Formik, useFormikContext } from "formik";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Cross } from "@ndla/icons/action";
+import { CloseLine } from "@ndla/icons/action";
 import { Information } from "@ndla/icons/common";
 import { CheckLine } from "@ndla/icons/editor";
 import {
@@ -295,7 +295,7 @@ const InnerForm = () => {
                     setFieldValue("validUrl", "", true);
                   }}
                 >
-                  <Cross />
+                  <CloseLine />
                 </IconButton>
               </InputContainer>
               <Button

diff --git a/src/components/SlateEditor/plugins/file/SlateFile.tsx b/src/components/SlateEditor/plugins/file/SlateFile.tsx
@@ -8,7 +8,7 @@
 
 import { KeyboardEvent, MouseEvent, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Cross, Pencil, DeleteBinLine } from "@ndla/icons/action";
+import { CloseLine, Pencil, DeleteBinLine } from "@ndla/icons/action";
 import { CheckboxCircleFill, CheckLine } from "@ndla/icons/editor";
 import {
   CheckboxControl,
@@ -154,7 +154,7 @@ export const SlateFile = ({
               variant="secondary"
               size="small"
             >
-              <Cross />
+              <CloseLine />
             </IconButton>
           ) : (
             <>

diff --git a/src/components/SlateEditor/plugins/file/SlateFileList.tsx b/src/components/SlateEditor/plugins/file/SlateFileList.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from "react-i18next";
 import { Editor, Element, Transforms } from "slate";
 import { ReactEditor, RenderElementProps } from "slate-react";
 import { Portal } from "@ark-ui/react";
-import { Cross, AddLine } from "@ndla/icons/action";
+import { CloseLine, AddLine } from "@ndla/icons/action";
 import {
   DialogBody,
   DialogContent,
@@ -150,7 +150,7 @@ const SlateFileList = ({ element, editor, attributes, children }: Props) => {
             onClick={removeFileList}
             size="small"
           >
-            <Cross />
+            <CloseLine />
           </IconButton>
         </HStack>
       </StyledHeaderWrapper>

diff --git a/src/components/SlateEditor/plugins/grid/SlateGrid.tsx b/src/components/SlateEditor/plugins/grid/SlateGrid.tsx
@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
 import { Editor, Path, Transforms } from "slate";
 import { ReactEditor, RenderElementProps } from "slate-react";
 import { Portal } from "@ark-ui/react";
-import { Pencil } from "@ndla/icons/action";
+import { PencilFill } from "@ndla/icons/action";
 import {
   DialogBody,
   DialogContent,
@@ -87,7 +87,7 @@ export const SlateGrid = ({ element, editor, children }: Props) => {
           <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 />
+              <PencilFill />
             </IconButton>
           </DialogTrigger>
           <Portal>

diff --git a/src/components/SlateEditor/plugins/h5p/EditMetadataModal.tsx b/src/components/SlateEditor/plugins/h5p/EditMetadataModal.tsx
@@ -10,7 +10,7 @@ import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Editor, Path, Transforms } from "slate";
 import { ReactEditor } from "slate-react";
-import { Pencil } from "@ndla/icons/action";
+import { PencilFill } from "@ndla/icons/action";
 import {
   Button,
   DialogBody,
@@ -75,7 +75,7 @@ const EditMetadataModal = ({ embed, editor, element }: Props) => {
           title={t("form.h5p.metadata.edit")}
           aria-label={t("form.h5p.metadata.edit")}
         >
-          <Pencil />
+          <PencilFill />
         </IconButton>
       </DialogTrigger>
       <DialogContent>

diff --git a/src/components/SlateEditor/plugins/link/EditLink.tsx b/src/components/SlateEditor/plugins/link/EditLink.tsx
@@ -10,7 +10,7 @@ import { useTranslation } from "react-i18next";
 import { Editor, Transforms, Element, Path } from "slate";
 import { ReactEditor } from "slate-react";
 import styled from "@emotion/styled";
-import { Cross } from "@ndla/icons/action";
+import { CloseLine } from "@ndla/icons/action";
 import { ModalBody, ModalHeader, ModalTitle } from "@ndla/modal";
 import { IconButton } from "@ndla/primitives";
 import { LinkElement, ContentLinkElement } from ".";
@@ -148,7 +148,7 @@ const EditLink = ({ model, closeEditMode, editor, element, handleRemove }: Props
       <StyledModalHeader>
         <ModalTitle>{t(`form.content.link.${isEdit ? "changeTitle" : "addTitle"}`)}</ModalTitle>
         <IconButton variant="tertiary" aria-label={t("close")} title={t("close")} onClick={onClose}>
-          <Cross />
+          <CloseLine />
         </IconButton>
       </StyledModalHeader>
       <StyledModalBody>

diff --git a/src/components/SlateEditor/plugins/uuDisclaimer/SlateDisclaimer.tsx b/src/components/SlateEditor/plugins/uuDisclaimer/SlateDisclaimer.tsx
@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
 import { Editor, Element, Path, Transforms } from "slate";
 import { ReactEditor, RenderElementProps } from "slate-react";
 import { Portal } from "@ark-ui/react";
-import { Pencil } from "@ndla/icons/action";
+import { PencilFill } from "@ndla/icons/action";
 import { DialogContent, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, IconButton } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { IArticleV2 } from "@ndla/types-backend/article-api";
@@ -145,7 +145,7 @@ const SlateDisclaimer = ({ attributes, children, element, editor }: Props) => {
               data-testid="edit-disclaimer"
               title={t("form.disclaimer.edit")}
             >
-              <Pencil />
+              <PencilFill />
             </IconButton>
           </DialogTrigger>
           <Portal>

diff --git a/src/containers/Messages/__tests__/__snapshots__/Messages-test.tsx.snap b/src/containers/Messages/__tests__/__snapshots__/Messages-test.tsx.snap
@@ -529,16 +529,13 @@ exports[`Messages > A message is removed if the modal is closed 1`] = `
             data-icon=""
             data-license="Apache License 2.0"
             data-severity="danger"
-            data-source="Material Design"
+            data-source="RemixIcon"
+            fill="currentColor"
             preserveAspectRatio="xMidYMid meet"
             viewBox="0 0 24 24"
           >
             <path
-              d="M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4l5.6 5.6L5 17.6 6.4 19l5.6-5.6 5.6 5.6 1.4-1.4-5.6-5.6z"
-            />
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
+              d="m12 10.59 4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
             />
           </svg>
         </button>
@@ -1133,16 +1130,13 @@ exports[`Messages > A single message renders correctly 1`] = `
             data-icon=""
             data-license="Apache License 2.0"
             data-severity="danger"
-            data-source="Material Design"
+            data-source="RemixIcon"
+            fill="currentColor"
             preserveAspectRatio="xMidYMid meet"
             viewBox="0 0 24 24"
           >
             <path
-              d="M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4l5.6 5.6L5 17.6 6.4 19l5.6-5.6 5.6 5.6 1.4-1.4-5.6-5.6z"
-            />
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
+              d="m12 10.59 4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
             />
           </svg>
         </button>
@@ -1715,16 +1709,13 @@ exports[`Messages > Several messages renders correctly 1`] = `
             data-icon=""
             data-license="Apache License 2.0"
             data-severity="danger"
-            data-source="Material Design"
+            data-source="RemixIcon"
+            fill="currentColor"
             preserveAspectRatio="xMidYMid meet"
             viewBox="0 0 24 24"
           >
             <path
-              d="M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4l5.6 5.6L5 17.6 6.4 19l5.6-5.6 5.6 5.6 1.4-1.4-5.6-5.6z"
-            />
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
+              d="m12 10.59 4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
             />
           </svg>
         </button>
@@ -1806,16 +1797,13 @@ exports[`Messages > Several messages renders correctly 1`] = `
             data-icon=""
             data-license="Apache License 2.0"
             data-severity="danger"
-            data-source="Material Design"
+            data-source="RemixIcon"
+            fill="currentColor"
             preserveAspectRatio="xMidYMid meet"
             viewBox="0 0 24 24"
           >
             <path
-              d="M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4l5.6 5.6L5 17.6 6.4 19l5.6-5.6 5.6 5.6 1.4-1.4-5.6-5.6z"
-            />
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
+              d="m12 10.59 4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
             />
           </svg>
         </button>
@@ -2465,16 +2453,13 @@ exports[`Messages > auth0 messages provides a cancel button 1`] = `
             data-icon=""
             data-license="Apache License 2.0"
             data-severity="danger"
-            data-source="Material Design"
+            data-source="RemixIcon"
+            fill="currentColor"
             preserveAspectRatio="xMidYMid meet"
             viewBox="0 0 24 24"
           >
             <path
-              d="M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4l5.6 5.6L5 17.6 6.4 19l5.6-5.6 5.6 5.6 1.4-1.4-5.6-5.6z"
-            />
-            <path
-              d="M0 0h24v24H0z"
-              fill="none"
+              d="m12 10.59 4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
             />
           </svg>
         </button>

diff --git a/src/containers/SearchPage/components/form/SearchTag.tsx b/src/containers/SearchPage/components/form/SearchTag.tsx
@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
 import { IconButtonV2 } from "@ndla/button";
 import { colors, spacing } from "@ndla/core";
-import { Cross } from "@ndla/icons/action";
+import { CloseLine } from "@ndla/icons/action";
 import { SearchFormSelector } from "./Selector";
 import formatDate from "../../../../util/formatDate";
 import { unreachable } from "../../../../util/guards";
@@ -104,7 +104,7 @@ const SearchTag = ({ tag, onRemoveItem }: Props) => {
     <StyledDl>
       <SearchTagContent tag={tag} tagValue={tagValue} />
       <IconButtonV2 aria-label={t("remove")} variant="ghost" title={t("remove")} onClick={onRemove} size="small">
-        <Cross />
+        <CloseLine />
       </IconButtonV2>
     </StyledDl>
   );