@ndla/ui 55.0.13-alpha.0 → 55.0.15-alpha.0

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}
@@ -111,14 +113,10 @@ const BrightcoveEmbed = ({ embed, isConcept, renderContext = "article" }: Props)
           allowFullScreen
         />
       </div>
-      <EmbedByline type="video" copyright={data.copyright!} description={parsedDescription} bottomRounded>
+      <EmbedByline type="video" copyright={data.copyright!} description={parsedDescription}>
+        {/* 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/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: {