@ndla/ui 55.0.12-alpha.0 → 55.0.14-alpha.0

package/src/ContentTypeBadge/ContentTypeBadgeNew.tsx

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { forwardRef } from "react";
+import { useTranslation } from "react-i18next";
+import { Badge, BadgeProps, type BadgeVariant } from "@ndla/primitives";
+import * as contentTypes from "../model/ContentType";
+
+export interface ContentTypeBadgeProps extends Omit<BadgeProps, "colorTheme"> {
+  contentType: ContentType | undefined;
+}
+
+type ContentType =
+  | typeof contentTypes.SUBJECT_MATERIAL
+  | typeof contentTypes.TASKS_AND_ACTIVITIES
+  | typeof contentTypes.ASSESSMENT_RESOURCES
+  | typeof contentTypes.SUBJECT
+  | typeof contentTypes.SOURCE_MATERIAL
+  | typeof contentTypes.LEARNING_PATH
+  | typeof contentTypes.TOPIC
+  | typeof contentTypes.MULTIDISCIPLINARY_TOPIC
+  | typeof contentTypes.CONCEPT
+  | typeof contentTypes.EXTERNAL
+  | typeof contentTypes.IMAGE
+  | typeof contentTypes.AUDIO
+  | typeof contentTypes.VIDEO
+  | typeof contentTypes.MISSING
+  // This allows for us to fallback to string without getting a ts error, while still keeping intellisense
+  | (string & {});
+
+export const contentTypeToBadgeVariantMap: Record<ContentType, BadgeVariant> = {
+  [contentTypes.SUBJECT_MATERIAL]: "brand1",
+  [contentTypes.TASKS_AND_ACTIVITIES]: "brand2",
+  [contentTypes.ASSESSMENT_RESOURCES]: "brand2",
+  [contentTypes.SUBJECT]: "neutral",
+  [contentTypes.SOURCE_MATERIAL]: "brand1",
+  [contentTypes.LEARNING_PATH]: "brand3",
+  [contentTypes.TOPIC]: "neutral",
+  // TODO: Verify this color
+  [contentTypes.MULTIDISCIPLINARY_TOPIC]: "neutral",
+  [contentTypes.CONCEPT]: "brand1",
+  // TODO: Verify this color
+  [contentTypes.EXTERNAL]: "brand2",
+  // TODO: Verify resourceEmbedTypeMapping colors
+  [contentTypes.IMAGE]: "brand1",
+  [contentTypes.AUDIO]: "brand1",
+  [contentTypes.VIDEO]: "brand1",
+  [contentTypes.MISSING]: "neutral",
+};
+
+export const ContentTypeBadge = forwardRef<HTMLDivElement, ContentTypeBadgeProps>(
+  ({ contentType, children, ...props }, ref) => {
+    const { t } = useTranslation();
+    return (
+      <Badge
+        colorTheme={contentTypeToBadgeVariantMap[contentType ?? "missing"] ?? contentTypeToBadgeVariantMap["missing"]}
+        {...props}
+        ref={ref}
+      >
+        {children ?? t(`contentTypes.${contentType}`)}
+      </Badge>
+    );
+  },
+);

package/src/Embed/AudioEmbed.tsx

@@ -6,11 +6,11 @@
  *
  */
 
+import { Figure } from "@ndla/primitives";
 import { AudioMetaData } from "@ndla/types-embed";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import { Author } from "./ImageEmbed";
 import AudioPlayer from "../AudioPlayer";
-import { Figure } from "../Figure";
 import { EmbedByline } from "../LicenseByline";
 
 interface Props {
@@ -42,7 +42,7 @@ const AudioEmbed = ({ embed, lang }: Props) => {
   const img = coverPhoto && { url: coverPhoto.url, alt: coverPhoto.altText };
 
   return (
-    <Figure type="full" lang={lang}>
+    <Figure lang={lang}>
       <AudioPlayer
         description={data.podcastMeta?.introduction ?? ""}
         img={img}

package/src/Embed/BrightcoveEmbed.stories.tsx

@@ -155,9 +155,6 @@ const meta: Meta<typeof BrightcoveEmbed> = {
   title: "Embeds/BrightcoveEmbed",
   component: BrightcoveEmbed,
   tags: ["autodocs"],
-  args: {
-    isConcept: false,
-  },
   decorators: [
     (Story) => (
       <OneColumn>

package/src/Embed/BrightcoveEmbed.tsx

@@ -9,28 +9,30 @@
 import parse from "html-react-parser";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
-import { spacing } from "@ndla/core";
+import { Button, Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { BrightcoveEmbedData, BrightcoveMetaData, BrightcoveVideoSource } from "@ndla/types-embed";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import { RenderContext } from "./types";
-import { Figure } from "../Figure";
 import { EmbedByline } from "../LicenseByline";
 
 interface Props {
   embed: BrightcoveMetaData;
-  isConcept?: boolean;
   renderContext?: RenderContext;
 }
 
-const LinkedVideoButton = styled(ButtonV2)`
-  margin-left: ${spacing.small};
-`;
+const LinkedVideoButton = styled(Button, {
+  base: {
+    marginInlineStart: "xsmall",
+  },
+});
 
-const BrightcoveIframe = styled.iframe`
-  height: auto;
-`;
+const BrightcoveIframe = styled("iframe", {
+  base: {
+    height: "auto",
+    width: "100%",
+  },
+});
 
 export const makeIframeString = (url: string, width: string | number, height: string | number, title = "") => {
   const strippedWidth = typeof width === "number" ? width : width.replace(/\s*px/, "");
@@ -52,7 +54,7 @@ const getIframeProps = (data: BrightcoveEmbedData, sources: BrightcoveVideoSourc
     width: source?.width ?? "640",
   };
 };
-const BrightcoveEmbed = ({ embed, isConcept, renderContext = "article" }: Props) => {
+const BrightcoveEmbed = ({ embed, renderContext = "article" }: Props) => {
   const [showOriginalVideo, setShowOriginalVideo] = useState(true);
   const { t } = useTranslation();
   const iframeRef = useRef<HTMLIFrameElement>(null);
@@ -99,7 +101,7 @@ const BrightcoveEmbed = ({ embed, isConcept, renderContext = "article" }: Props)
     : undefined;
 
   return (
-    <Figure type={isConcept ? "full-column" : "full"}>
+    <Figure>
       <div className="brightcove-video">
         <BrightcoveIframe
           ref={iframeRef}
@@ -112,13 +114,9 @@ const BrightcoveEmbed = ({ embed, isConcept, renderContext = "article" }: Props)
         />
       </div>
       <EmbedByline type="video" copyright={data.copyright!} description={parsedDescription} bottomRounded>
+        {/* TODO: Figure out if this button should still be here. If yes, figure out what it should look like. */}
         {!!linkedVideoId && (
-          <LinkedVideoButton
-            variant="outline"
-            shape="pill"
-            size="small"
-            onClick={() => setShowOriginalVideo((p) => !p)}
-          >
+          <LinkedVideoButton size="small" variant="secondary" onClick={() => setShowOriginalVideo((p) => !p)}>
             {t(`figure.button.${!showOriginalVideo ? "original" : "alternative"}`)}
           </LinkedVideoButton>
         )}

package/src/Embed/CodeEmbed.stories.tsx

@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { Meta, StoryObj } from "@storybook/react";
+import type { CodeEmbedData, CodeMetaData } from "@ndla/types-embed";
+import CodeEmbed from "./CodeEmbed";
+
+const codeEmbedData: CodeEmbedData = {
+  resource: "code-block",
+  title: "Litt css i hverdagen",
+  codeContent: `<div class="demo-content">
+  <h2>Lorem ipsum</h2>
+  <p>
+    <b>Lorem ipsum</b><br/>
+    <span>is simply dummy text of the printing and typesetting industry</span>
+  </p>
+  <p>
+    <b>Lorem ipsum</b><br/>
+    <span>is simply dummy text of the printing and typesetting industry</span>
+  </p>
+  <p>
+    <b>Lorem ipsum</b><br/>
+    <span>is simply dummy text of the printing and typesetting industry</span>
+  </p>
+</div>`,
+  codeFormat: "html",
+};
+
+const codeEmbed: CodeMetaData = {
+  status: "success",
+  resource: "code-block",
+  embedData: codeEmbedData,
+  data: {
+    highlightedCode: `<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>Lorem ipsum<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b</span><span class="token punctuation">></span></span>Lorem ipsum<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>is simply dummy text of the printing and typesetting industry<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b</span><span class="token punctuation">></span></span>Lorem ipsum<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>is simply dummy text of the printing and typesetting industry<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b</span><span class="token punctuation">></span></span>Lorem ipsum<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span><span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>is simply dummy text of the printing and typesetting industry<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>`,
+    decodedContent: `<div class="demo-content">
+  <h2>Lorem ipsum</h2>
+  <p>
+    <b>Lorem ipsum</b><br/>
+    <span>is simply dummy text of the printing and typesetting industry</span>
+  </p>
+  <p>
+    <b>Lorem ipsum</b><br/>
+    <span>is simply dummy text of the printing and typesetting industry</span>
+  </p>
+  <p>
+    <b>Lorem ipsum</b><br/>
+    <span>is simply dummy text of the printing and typesetting industry</span>
+  </p>
+</div>`,
+  },
+};
+
+export default {
+  title: "Embeds/CodeEmbed",
+  component: CodeEmbed,
+  tags: ["autodocs"],
+  parameters: {
+    inlineStories: true,
+  },
+  args: {
+    embed: codeEmbed,
+  },
+} as Meta<typeof CodeEmbed>;
+
+export const Default: StoryObj<typeof CodeEmbed> = {};
+
+export const Failed: StoryObj<typeof CodeEmbed> = {
+  args: {
+    embed: {
+      resource: "code-block",
+      embedData: codeEmbedData,
+      status: "error",
+      message: "Something horrible happened",
+    },
+  },
+};

package/src/Embed/CodeEmbed.tsx

@@ -6,24 +6,79 @@
  *
  */
 
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Copy } from "@ndla/icons/action";
+import { Done } from "@ndla/icons/editor";
+import { Button, Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { CodeMetaData } from "@ndla/types-embed";
-import { CodeBlock } from "../CodeBlock";
-import { Figure } from "../Figure";
+import { copyTextToClipboard } from "@ndla/util";
+import { CodeBlock, codeLanguageOptions } from "../CodeBlock";
+import { ICodeLangugeOption } from "../CodeBlock/codeLanguageOptions";
+
+// TODO: We need an error state for this
 
 interface Props {
   embed: CodeMetaData;
 }
+
+const StyledFigCaption = styled("figcaption", {
+  base: {
+    textStyle: "label.large",
+    fontWeight: "bold",
+  },
+});
+
+const StyledFigure = styled(Figure, {
+  base: {
+    // We apply margin here to allow for the float and size props on figure to work as intended.
+    "& > *:not(:where(:first-child))": {
+      marginBlockStart: "xsmall",
+    },
+  },
+});
+
+const getTitleFromFormat = (format: string) => {
+  const selectedLanguage = codeLanguageOptions.find((item: ICodeLangugeOption) => item.format === format);
+  if (selectedLanguage) {
+    return selectedLanguage.title;
+  }
+  return;
+};
+
 const CodeEmbed = ({ embed }: Props) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (isCopied) {
+      const timer = setInterval(() => setIsCopied(false), 3000);
+      // ensure interval is cleared - also if unmounted
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [isCopied]);
+
   return (
-    <Figure>
+    <StyledFigure>
+      <StyledFigCaption>{embed.embedData.title || getTitleFromFormat(embed.embedData.codeFormat)}</StyledFigCaption>
       <CodeBlock
-        title={embed.embedData.title}
-        code={embed.status === "success" ? embed.data.decodedContent : ""}
         highlightedCode={embed.status === "success" ? embed.data.highlightedCode : ""}
         format={embed.embedData.codeFormat}
-        showCopy
       />
-    </Figure>
+      <Button
+        variant="secondary"
+        onClick={() => {
+          copyTextToClipboard(embed.status === "success" ? embed.data.decodedContent : "");
+          setIsCopied(true);
+        }}
+      >
+        {isCopied ? <Done /> : <Copy />}
+        {isCopied ? t("codeBlock.copiedCode") : t("codeBlock.copyCode")}
+      </Button>
+    </StyledFigure>
   );
 };
 

package/src/Embed/ConceptEmbed.stories.tsx

@@ -8,7 +8,7 @@
 
 import { Meta, StoryObj } from "@storybook/react";
 import { ConceptData, ConceptEmbedData } from "@ndla/types-embed";
-import ConceptEmbed from "./ConceptEmbed";
+import { ConceptEmbed } from "./ConceptEmbed";
 import { ArticleWrapper } from "../Article";
 import LayoutItem, { OneColumn } from "../Layout";
 
@@ -19,13 +19,6 @@ const blockEmbedData: ConceptEmbedData = {
   linkText: "",
 };
 
-const glossBlockEmbedData: ConceptEmbedData = {
-  contentId: "4942",
-  resource: "concept",
-  type: "block",
-  linkText: "",
-};
-
 const inlineEmbedData: ConceptEmbedData = {
   contentId: "2318",
   linkText: "forklaring",
@@ -33,13 +26,6 @@ const inlineEmbedData: ConceptEmbedData = {
   type: "inline",
 };
 
-const glossInlineEmbedData: ConceptEmbedData = {
-  contentId: "23",
-  linkText: "glose",
-  resource: "concept",
-  type: "inline",
-};
-
 const conceptMetaData: ConceptData["concept"] = {
   id: 110,
   revision: 16,
@@ -87,68 +73,6 @@ const conceptMetaData: ConceptData["concept"] = {
   conceptType: "concept",
 };
 
-const glossMetaData: ConceptData["concept"] = {
-  id: 4942,
-  revision: 6,
-  title: {
-    title: "Ma Hong",
-    language: "nb",
-  },
-  content: {
-    content: "Hei",
-    htmlContent: "Hei",
-    language: "nb",
-  },
-  copyright: {
-    creators: [],
-    processors: [],
-    rightsholders: [],
-    processed: false,
-  },
-  source: "",
-  metaImage: {
-    url: "",
-    alt: "",
-    language: "und",
-  },
-  created: "2023-07-19T09:30:40.000Z",
-  updated: "2023-09-19T17:13:56.573Z",
-  updatedBy: ["XxnkdI7rApMl58MeG3p4g4B8", "hd5ZL5Lm4kKkumWgN2gjy9wx"],
-  supportedLanguages: ["nb"],
-  articleIds: [],
-  status: {
-    current: "IN_PROGRESS",
-    other: [],
-  },
-  responsible: {
-    responsibleId: "XxnkdI7rApMl58MeG3p4g4B8",
-    lastUpdated: "2023-07-19T09:30:40.000Z",
-  },
-  conceptType: "gloss",
-  glossData: {
-    gloss: "马红",
-    wordClass: "personal-pronoun",
-    originalLanguage: "zh",
-    transcriptions: {},
-    examples: [
-      [
-        {
-          example: "我叫马红",
-          language: "zh",
-          transcriptions: {
-            pinyin: "wo jiao ma hong ",
-          },
-        },
-        {
-          example: "Jeg heter ma hong",
-          language: "nb",
-          transcriptions: {},
-        },
-      ],
-    ],
-  },
-};
-
 const visualElementData: ConceptData["visualElement"] = {
   resource: "image",
   status: "success",
@@ -219,17 +143,10 @@ const blockMetaData: ConceptData = {
   visualElement: visualElementData,
 };
 
-const glossBlockData: ConceptData = {
-  concept: glossMetaData,
-};
-
 const meta: Meta<typeof ConceptEmbed> = {
   title: "Embeds/ConceptEmbed",
   component: ConceptEmbed,
   tags: ["autodocs"],
-  args: {
-    fullWidth: false,
-  },
   decorators: [
     (Story) => (
       <OneColumn>
@@ -257,16 +174,6 @@ export const Block: StoryObj<typeof ConceptEmbed> = {
     },
   },
 };
-export const GlossBlock: StoryObj<typeof ConceptEmbed> = {
-  args: {
-    embed: {
-      resource: "concept",
-      status: "success",
-      embedData: glossBlockEmbedData,
-      data: glossBlockData,
-    },
-  },
-};
 
 export const BlockFailed: StoryObj<typeof ConceptEmbed> = {
   args: {
@@ -289,17 +196,6 @@ export const Inline: StoryObj<typeof ConceptEmbed> = {
   },
 };
 
-export const GlossInline: StoryObj<typeof ConceptEmbed> = {
-  args: {
-    embed: {
-      resource: "concept",
-      status: "success",
-      embedData: glossInlineEmbedData,
-      data: glossBlockData,
-    },
-  },
-};
-
 export const InlineFailed: StoryObj<typeof ConceptEmbed> = {
   args: {
     embed: {