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

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.tsx

@@ -330,9 +330,6 @@ export const BlockConcept = ({
   const anchorRef = useRef<HTMLDivElement>(null);
   const [modalPos, setModalPos] = useState(-9999);
 
-  const visualElementType =
-    visualElement?.embedData.resource === "brightcove" ? "video" : visualElement?.embedData.resource;
-
   const onOpenChange = useCallback((open: boolean) => {
     if (open) {
       const anchor = anchorRef.current;
@@ -369,16 +366,11 @@ export const BlockConcept = ({
                         >
                           {visualElement.resource === "image" ? (
                             <NotionImage
-                              type={visualElementType}
                               src={visualElement.data.image.imageUrl}
                               alt={visualElement.data.alttext.alttext}
                             />
                           ) : metaImage ? (
-                            <NotionImage
-                              type={visualElementType}
-                              src={metaImage?.url ?? ""}
-                              alt={metaImage?.alt ?? ""}
-                            />
+                            <NotionImage src={metaImage?.url ?? ""} alt={metaImage?.alt ?? ""} />
                           ) : undefined}
                         </StyledButton>
                       </Trigger>

package/src/Embed/EmbedErrorPlaceholder.tsx

@@ -7,51 +7,54 @@
  */
 
 import { ReactNode } from "react";
-import styled from "@emotion/styled";
-import { colors, spacing } from "@ndla/core";
 import { WarningOutline } from "@ndla/icons/common";
-import { Figure, FigureType } from "../Figure";
+import { Figure, type FigureFloat, type FigureSize } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { EmbedByline } from "../LicenseByline";
 import { EmbedBylineErrorProps } from "../LicenseByline/EmbedByline";
 
 interface Props {
   type: EmbedBylineErrorProps["type"];
-  figureType?: FigureType;
+  figureType?: FigureSize;
+  float?: FigureFloat;
   children?: ReactNode;
 }
 
-const ErrorPlaceholder = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: ${colors.brand.greyLighter};
-  height: 330px;
+const ErrorPlaceholder = styled("div", {
+  base: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "surface.disabled",
+    height: "surface.xsmall",
+    "& svg": {
+      fill: "text.subtle",
+      height: "90%",
+      width: "90%",
+    },
+    "&[data-embed-type='audio']": {
+      height: "surface.3xsmall",
+    },
+  },
+});
 
-  svg {
-    fill: ${colors.text.light};
-    height: 90%;
-    width: 90%;
-  }
-  &[data-embed-type="audio"] {
-    height: 150px;
-  }
-`;
+const StyledFigure = styled(Figure, {
+  base: {
+    "& > *:not(:first-child)": {
+      marginBlockStart: "3xsmall",
+    },
+  },
+});
 
-const StyledFigure = styled(Figure)`
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.xsmall};
-`;
-
-const EmbedErrorPlaceholder = ({ type, children, figureType }: Props) => {
+const EmbedErrorPlaceholder = ({ type, children, figureType, float }: Props) => {
   return (
-    <StyledFigure type={figureType}>
+    <StyledFigure size={figureType} float={float}>
       {children ?? (
         <ErrorPlaceholder data-embed-type={type}>
           <WarningOutline />
         </ErrorPlaceholder>
       )}
-      <EmbedByline error type={type} topRounded bottomRounded />
+      <EmbedByline error type={type} />
     </StyledFigure>
   );
 };

package/src/Embed/ImageEmbed.stories.tsx

@@ -7,11 +7,15 @@
  */
 
 import { ReactNode } from "react";
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { Text } from "@ndla/primitives";
+import { css } from "@ndla/styled-system/css";
+import { styled } from "@ndla/styled-system/jsx";
 import { IImageMetaInformationV3 } from "@ndla/types-backend/image-api";
 import { ImageEmbedData } from "@ndla/types-embed";
 import ImageEmbed from "./ImageEmbed";
 import { ArticleWrapper } from "../Article";
+import { Grid } from "../Grid";
 import LayoutItem, { OneColumn } from "../Layout";
 
 const embedData: ImageEmbedData = {
@@ -184,26 +188,27 @@ export const Cropped: StoryObj<typeof ImageEmbed> = {
 };
 
 const TextWrapper = ({ children }: { children: ReactNode }) => (
-  <>
-    <p>
+  // TODO: Replace this with regular css once we drop emotion
+  <styled.div css={css.raw({ "& > p": { marginBlock: "medium", width: "100%" } })}>
+    <Text>
       Du har en kjempegod idé til en kortfilm. Men det koster mange penger å produsere filmen. Derfor er du avhengig av
       at noen tenner på idéen din og bestemmer seg for å bruke ressurser på nettopp dette prosjektet.
-    </p>
+    </Text>
     {children}
 
-    <p>
+    <Text>
       Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen du
       planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
-    </p>
-    <p>
+    </Text>
+    <Text>
       Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen du
       planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
-    </p>
-    <p>
+    </Text>
+    <Text>
       Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen du
       planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
-    </p>
-  </>
+    </Text>
+  </styled.div>
 );
 
 export const FloatLeft: StoryObj<typeof ImageEmbed> = {
@@ -324,3 +329,40 @@ export const FloatLeftExtraSmall: StoryObj<typeof ImageEmbed> = {
     </TextWrapper>
   ),
 };
+
+export const In2x2Grid: StoryFn<typeof ImageEmbed> = (args) => {
+  const items = new Array(4).fill(
+    <ImageEmbed
+      {...args}
+      embed={{
+        resource: "image",
+        status: "success",
+        embedData: {
+          ...embedData,
+          align: "left",
+          border: "true",
+        },
+        data: metaData,
+      }}
+    />,
+  );
+  return <Grid columns="2x2">{items}</Grid>;
+};
+
+export const In4Grid: StoryFn<typeof ImageEmbed> = (args) => {
+  const items = new Array(4).fill(
+    <ImageEmbed
+      {...args}
+      embed={{
+        resource: "image",
+        status: "success",
+        embedData: {
+          ...embedData,
+          border: "true",
+        },
+        data: metaData,
+      }}
+    />,
+  );
+  return <Grid columns="4">{items}</Grid>;
+};