@ndla/ui 55.0.18-alpha.0 → 55.0.19-alpha.0

package/src/Embed/ContentLinkEmbed.tsx

@@ -34,7 +34,7 @@ const ContentLinkEmbed = ({ embed, isOembed, children }: Props) => {
 
   if (embedData.openIn === "new-context" || isOembed) {
     return (
-      <a href={data.path} target="_blank" rel="noopener noreferrer">
+      <a href={data.path} data-embed-type="content-link" target="_blank" rel="noopener noreferrer">
         {children}
       </a>
     );

package/src/Embed/CopyrightEmbed.tsx

@@ -17,7 +17,7 @@ interface Props {
 
 const CopyrightEmbed = ({ embed, children }: Props) => {
   return (
-    <figure>
+    <figure data-embed-type="copyright">
       {children}
       <EmbedByline type="copyright" copyright={embed.embedData.copyright} />
     </figure>

package/src/Embed/EmbedErrorPlaceholder.tsx

@@ -48,7 +48,7 @@ const StyledFigure = styled(Figure, {
 
 const EmbedErrorPlaceholder = ({ type, children, figureType, float }: Props) => {
   return (
-    <StyledFigure size={figureType} float={float}>
+    <StyledFigure size={figureType} float={float} data-embed-type={type}>
       {children ?? (
         <ErrorPlaceholder data-embed-type={type}>
           <WarningOutline />

package/src/Embed/ExternalEmbed.tsx

@@ -53,7 +53,7 @@ const ExternalEmbed = ({ embed }: Props) => {
       alt: embedData.alt !== undefined ? embedData.alt : data.iframeImage?.alttext?.alttext ?? "",
     };
     return (
-      <Figure>
+      <Figure data-embed-type="external">
         <ResourceBox
           image={image}
           title={embedData.title ?? ""}
@@ -65,7 +65,13 @@ const ExternalEmbed = ({ embed }: Props) => {
     );
   }
 
-  return <StyledFigure ref={figRef} dangerouslySetInnerHTML={{ __html: data.oembed.html ?? "" }} />;
+  return (
+    <StyledFigure
+      data-embed-type="external"
+      ref={figRef}
+      dangerouslySetInnerHTML={{ __html: data.oembed.html ?? "" }}
+    />
+  );
 };
 
 export default ExternalEmbed;

package/src/Embed/FootnoteEmbed.tsx

@@ -30,7 +30,7 @@ const FootnoteEmbed = ({ embed }: Props) => {
   }
 
   return (
-    <span id={`ref${embed.data.entryNum}`}>
+    <span id={`ref${embed.data.entryNum}`} data-embed-type="footnote">
       <StyledSup>
         <a href={`#note${embed.data.entryNum}`} target="_self">{`[${embed.data.entryNum}]`}</a>
       </StyledSup>

package/src/Embed/GlossEmbed.tsx

@@ -57,7 +57,7 @@ export const GlossEmbed = ({ embed }: Props) => {
   }
 
   return (
-    <Figure>
+    <Figure data-embed-type="gloss">
       <Gloss glossData={concept.glossData} title={concept.title} audio={audio} variant="bordered" />
     </Figure>
   );

package/src/Embed/H5pEmbed.tsx

@@ -39,11 +39,11 @@ const H5pEmbed = ({ embed }: Props) => {
   }
 
   if (embed.data.oembed) {
-    return <FigureOembed dangerouslySetInnerHTML={{ __html: embed.data.oembed.html ?? "" }} />;
+    return <FigureOembed data-embed-type="h5p" dangerouslySetInnerHTML={{ __html: embed.data.oembed.html ?? "" }} />;
   }
 
   return (
-    <StyledFigure>
+    <StyledFigure data-embed-type="h5p">
       <iframe title={embed.embedData.url} aria-label={embed.embedData.url} src={embed.embedData.url} />
     </StyledFigure>
   );

package/src/Embed/IframeEmbed.tsx

@@ -49,7 +49,7 @@ const IframeEmbed = ({ embed }: Props) => {
     const alt = embedData.alt !== undefined ? embedData.alt : iframeImage?.alttext.alttext;
     const image = { src: iframeImage?.image.imageUrl ?? "", alt: alt ?? "" };
     return (
-      <Figure>
+      <Figure data-embed-type="iframe">
         <ResourceBox
           image={image}
           title={embedData.title ?? ""}
@@ -68,7 +68,7 @@ const IframeEmbed = ({ embed }: Props) => {
   const urlOrTitle = title || url;
 
   return (
-    <Figure>
+    <Figure data-embed-type="iframe">
       <StyledIframe
         ref={iframeRef}
         title={urlOrTitle}

package/src/Embed/ImageEmbed.tsx

@@ -250,7 +250,11 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
 
   // TODO: Check how this works with `children`. Will only be important for ED
   return (
-    <StyledFigure float={figureProps?.float} size={imageSizes ? "full" : figureProps?.size ?? "medium"}>
+    <StyledFigure
+      float={figureProps?.float}
+      size={imageSizes ? "full" : figureProps?.size ?? "medium"}
+      data-embed-type="image"
+    >
       {children}
       <ImageWrapper border={embedData.border === "true"} expandable={!!figureProps?.float}>
         <Image

package/src/Embed/UnknownEmbed.tsx

@@ -17,7 +17,7 @@ interface Props {
 const UnknownEmbed = ({ embed }: Props) => {
   const { t } = useTranslation();
   return (
-    <Text color="text.error" asChild consumeCss>
+    <Text color="text.error" asChild consumeCss data-embed-type="unknown">
       <span>{t("embed.unsupported", { type: embed.resource })}</span>
     </Text>
   );

package/src/Embed/UuDisclaimerEmbed.tsx

@@ -50,7 +50,7 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
   ) : null;
 
   return (
-    <div role="region">
+    <div role="region" data-embed-type="uu-disclaimer">
       <StyledMessageBox variant="warning" contentEditable={false}>
         <InformationOutline />
         <Disclaimer>

package/src/ErrorMessage/ErrorResourceAccessDenied.tsx

@@ -7,8 +7,8 @@
  */
 
 import { useTranslation } from "react-i18next";
-import { ButtonV2 } from "@ndla/button";
 import { HumanMaleBoard, LogIn } from "@ndla/icons/common";
+import { Button } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import ErrorMessage from "./ErrorMessage";
 
@@ -34,12 +34,12 @@ const ErrorResourceAccessDenied = ({ onAuthenticateClick }: Props) => {
       }}
       illustrationElement={<HumanMaleBoard size="medium" />}
       customElement={
-        <ButtonV2 size="medium" onClick={onAuthenticateClick}>
+        <Button onClick={onAuthenticateClick}>
           {t("user.buttonLogIn")}
           <StyledLogInIconWrapper aria-hidden>
             <LogIn size="medium" />
           </StyledLogInIconWrapper>
-        </ButtonV2>
+        </Button>
       }
     />
   );

package/src/FactBox/FactBox.tsx

@@ -132,7 +132,7 @@ const FactBox = forwardRef<HTMLElement, Props>(
     }, [state, onOpenChange]);
 
     return (
-      <StyledAside data-state={state} {...rest} ref={ref}>
+      <StyledAside data-state={state} data-embed-type="factbox" {...rest} ref={ref}>
         <StyledIconButton
           data-state={state}
           onClick={onClick}

package/src/LinkBlock/LinkBlock.tsx

@@ -82,7 +82,7 @@ const LinkBlock = ({ title, articleLanguage, date, url, path }: Props) => {
     return format(new Date(date), "dd. LLLL yyyy", { locale });
   }, [date, articleLanguage]);
   return (
-    <StyledSafeLink to={href}>
+    <StyledSafeLink to={href} data-embed-type="link-block">
       <InfoWrapper>
         <Heading asChild consumeCss textStyle="title.medium">
           <h3 data-heading>{parse(title)}</h3>

package/src/RelatedArticleList/RelatedArticleList.tsx

@@ -34,7 +34,7 @@ export const RelatedArticle = ({
   type = contentTypes.SUBJECT_MATERIAL,
 }: RelatedArticleProps) => {
   return (
-    <CardRoot>
+    <CardRoot data-embed-type="related-article">
       <CardContent>
         <ContentTypeBadge contentType={type} />
         <CardHeading asChild consumeCss>
@@ -119,7 +119,7 @@ export const RelatedArticleList = ({
   );
 
   return (
-    <StyledSection {...rest}>
+    <StyledSection {...rest} data-embed-type="related-content-list">
       <HeadingWrapper>
         <Heading asChild consumeCss textStyle="title.large" fontWeight="bold">
           <HeadingElement>{t("related.title")}</HeadingElement>

package/src/TreeStructure/AddFolderButton.tsx

@@ -11,7 +11,6 @@ import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
 import { ButtonV2 as Button } from "@ndla/button";
 import { Plus } from "@ndla/icons/action";
-import { Tooltip } from "@ndla/tooltip";
 import { IFolder } from "@ndla/types-backend/myndla-api";
 
 interface AddFolderButtonProps {
@@ -49,32 +48,31 @@ const AddFolderButton = ({
       ? t("myNdla.newFolderUnder", { folderName: focusedFolder?.name })
       : t("treeStructure.maxFoldersAlreadyAdded");
   return (
-    <Tooltip tooltip={tooltip}>
-      <StyledAddFolderButton
-        ref={ref}
-        variant="outline"
-        shape="pill"
-        disabled={loading || !canAddFolder}
-        aria-label={tooltip}
-        onMouseDown={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          ref.current?.focus();
-        }}
-        onMouseUp={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          ref.current?.focus();
-        }}
-        onClick={(e) => {
-          e.currentTarget.focus();
-          setNewFolderParentId(focusedFolder?.id);
-          setShowTree(true);
-        }}
-      >
-        <StyledPlus /> {t("myNdla.newFolder")}
-      </StyledAddFolderButton>
-    </Tooltip>
+    <StyledAddFolderButton
+      ref={ref}
+      variant="outline"
+      shape="pill"
+      disabled={loading || !canAddFolder}
+      title={tooltip}
+      aria-label={tooltip}
+      onMouseDown={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        ref.current?.focus();
+      }}
+      onMouseUp={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        ref.current?.focus();
+      }}
+      onClick={(e) => {
+        e.currentTarget.focus();
+        setNewFolderParentId(focusedFolder?.id);
+        setShowTree(true);
+      }}
+    >
+      <StyledPlus /> {t("myNdla.newFolder")}
+    </StyledAddFolderButton>
   );
 };
 

package/src/TreeStructure/TreeStructure.stories.tsx

@@ -13,10 +13,10 @@ import styled from "@emotion/styled";
 import { Meta, StoryFn } from "@storybook/react";
 import { IconButtonV2 } from "@ndla/button";
 import { spacing } from "@ndla/core";
-import { FieldErrorMessage, FieldHelper, FormControl, InputContainer, InputV3, Label } from "@ndla/forms";
 import { Spinner } from "@ndla/icons";
 import { Cross } from "@ndla/icons/action";
 import { Done } from "@ndla/icons/editor";
+import { FieldErrorMessage, FieldLabel, FieldRoot, InputContainer, FieldHelper, FieldInput } from "@ndla/primitives";
 import { IFolder } from "@ndla/types-backend/myndla-api";
 import { uuid } from "@ndla/util";
 import { flattenFolders } from "./helperFunctions";
@@ -253,11 +253,11 @@ const NewFolder = ({ parentId, onClose, structure, setStructure, onCreate }: New
   }, [name]);
 
   return (
-    <FormControl id="folder-name" isRequired isInvalid={!!error}>
-      <Label visuallyHidden>Mine mapper</Label>
+    <FieldRoot required invalid={!!error}>
+      <FieldLabel srOnly>Mine mapper</FieldLabel>
       <FieldErrorMessage>{error}</FieldErrorMessage>
       <InputContainer>
-        <InputV3
+        <FieldInput
           autoComplete="off"
           disabled={loading}
           ref={inputRef}
@@ -307,6 +307,6 @@ const NewFolder = ({ parentId, onClose, structure, setStructure, onCreate }: New
           )}
         </Row>
       </InputContainer>
-    </FormControl>
+    </FieldRoot>
   );
 };