From ab491e418a63d56b3da2523415065407314d96ea Mon Sep 17 00:00:00 2001
From: Jonas Carlsen <jonas.carlsen@knowit.no>
Date: Tue, 8 Oct 2024 09:46:20 +0200
Subject: [PATCH] refactor: use primitives in ContentLink

---
 .../ArticlePage/components/ContentLink.tsx    | 59 ++++++++-----------
 1 file changed, 24 insertions(+), 35 deletions(-)

diff --git a/src/containers/ArticlePage/components/ContentLink.tsx b/src/containers/ArticlePage/components/ContentLink.tsx
index e37fea256b..0d4a1549cb 100644
--- a/src/containers/ArticlePage/components/ContentLink.tsx
+++ b/src/containers/ArticlePage/components/ContentLink.tsx
@@ -7,25 +7,10 @@
  */
 
 import { useEffect, useMemo, useState } from "react";
-
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
-import { spacing } from "@ndla/core";
-import { FieldErrorMessage, InputV3, Label } from "@ndla/forms";
-import { FormControl } from "../../../components/FormField";
-
-const StyledContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  gap: ${spacing.small};
-`;
-
-const StyledSaveButton = styled(ButtonV2)`
-  align-self: flex-end;
-  width: auto;
-`;
+import { Button, FieldErrorMessage, FieldInput, FieldLabel, FieldRoot } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { FormActionsContainer, FormContent } from "../../../components/FormikForm";
 
 interface Props {
   onAddLink: (title: string, url: string) => void;
@@ -33,6 +18,12 @@ interface Props {
   initialUrl?: string;
 }
 
+const StyledFormContent = styled(FormContent, {
+  base: {
+    width: "100%",
+  },
+});
+
 const URL_PATTERN = /^((http:|https:)\/\/)/;
 
 const ContentLink = ({ onAddLink, initialTitle = "", initialUrl = "" }: Props) => {
@@ -62,35 +53,33 @@ const ContentLink = ({ onAddLink, initialTitle = "", initialUrl = "" }: Props) =
   };
 
   return (
-    <StyledContent>
-      <FormControl isRequired isInvalid={titleError}>
-        <Label textStyle="label-small" margin="none">
-          {t("form.name.title")}
-        </Label>
-        <InputV3
+    <StyledFormContent>
+      <FieldRoot required invalid={titleError}>
+        <FieldLabel>{t("form.name.title")}</FieldLabel>
+        <FieldErrorMessage>{t("form.relatedContent.link.missingTitle")}</FieldErrorMessage>
+        <FieldInput
           data-testid="addExternalTitleInput"
           type="text"
           placeholder={t("form.relatedContent.link.titlePlaceholder")}
           value={title}
           onChange={(e) => setTitle(e.target.value)}
         />
-        <FieldErrorMessage>{t("form.relatedContent.link.missingTitle")}</FieldErrorMessage>
-      </FormControl>
-      <FormControl isRequired isInvalid={urlError}>
-        <Label textStyle="label-small" margin="none">
-          {t("form.name.url")}
-        </Label>
-        <InputV3
+      </FieldRoot>
+      <FieldRoot required invalid={urlError}>
+        <FieldLabel>{t("form.name.url")}</FieldLabel>
+        <FieldErrorMessage>{t("form.relatedContent.link.missingUrl")}</FieldErrorMessage>
+        <FieldInput
           data-testid="addExternalUrlInput"
           type="text"
           placeholder={t("form.relatedContent.link.urlPlaceholder")}
           value={url}
           onChange={(e) => setUrl(e.target.value)}
         />
-        <FieldErrorMessage>{t("form.relatedContent.link.missingUrl")}</FieldErrorMessage>
-      </FormControl>
-      <StyledSaveButton onClick={handleSubmit}>{t("save")}</StyledSaveButton>
-    </StyledContent>
+      </FieldRoot>
+      <FormActionsContainer>
+        <Button onClick={handleSubmit}>{t("save")}</Button>
+      </FormActionsContainer>
+    </StyledFormContent>
   );
 };