@ndla/ui 50.9.7 → 50.9.8

package/src/Embed/ExternalEmbed.stories.tsx

@@ -17,6 +17,15 @@ const embedData: OembedEmbedData = {
   type: "iframe",
 };
 
+const embedDataFullscreen: OembedEmbedData = {
+  resource: "external",
+  url: "https://embed.ted.com/talks/zahra_biabani_the_eco_creators_helping_the_climate_through_social_media",
+  type: "fullscreen",
+  title: "Zahra Biabani: The eco-creators helping the climate through social media",
+  caption: "Ted talk",
+  imageid: "65086",
+};
+
 const metaData: OembedData = {
   oembed: {
     type: "video",
@@ -81,3 +90,87 @@ export const Failed: StoryObj<typeof ExternalEmbed> = {
     },
   },
 };
+
+const opensInNewMetaData: OembedData = {
+  oembed: {
+    type: "video",
+    version: "1.0",
+    title: "Zahra Biabani: The eco-creators helping the climate through social media",
+    description:
+      '"Climate doom-ism," or a pessimistic outlook on the future of the planet, rivals climate denialism in holding up the fight against climate change, says activist Zahra Biabani. Illuminating how hope combats inaction, she takes us inside the world of eco-friendly content on TikTok -- and shows that we all have what it takes to make real change.',
+    authorName: "Zahra Biabani",
+    authorUrl: "https://www.ted.com/speakers/zahra_biabani",
+    providerName: "TED",
+    providerUrl: "https://www.ted.com",
+    cacheAge: 300,
+    thumbnailUrl:
+      "https://pi.tedcdn.com/r/talkstar-photos.s3.amazonaws.com/uploads/803ab5d5-2cff-4764-b5b6-545217159538/ZahraBiabani_2022T-embed.jpg?h=315&w=560",
+    thumbnailWidth: 560,
+    thumbnailHeight: 315,
+    width: 560,
+    height: 315,
+    html: '<iframe src="https://embed.ted.com/talks/zahra_biabani_the_eco_creators_helping_the_climate_through_social_media" width="560" height="315" frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>',
+  },
+  iframeImage: {
+    id: "65086",
+    metaUrl: "https://api.test.ndla.no/image-api/v3/images/65086",
+    title: {
+      title: "\nSamtale ",
+      language: "nb",
+    },
+    alttext: {
+      alttext: " To ungdommer sitter og snakker. Foto. ",
+      language: "nb",
+    },
+    copyright: {
+      license: {
+        license: "COPYRIGHTED",
+        description: "Copyrighted",
+      },
+      origin: "",
+      creators: [],
+      processors: [],
+      rightsholders: [
+        {
+          type: "rightsholder",
+          name: "Folkehelseprosjektet Helsefremmende miljø på sosial medier, Bergen kommune 2019-2022",
+        },
+      ],
+      processed: false,
+    },
+    tags: {
+      tags: ["samtale", "Dialog", "gutter"],
+      language: "nb",
+    },
+    caption: {
+      caption: 'Dette bildet skal bare brukes i casen "Livet på sosiale medier". ',
+      language: "nb",
+    },
+    supportedLanguages: ["nb"],
+    created: "2022-12-02T14:24:19Z",
+    createdBy: "oltQx44eGQp0DwkiR1NRo5qE",
+    modelRelease: "yes",
+    image: {
+      fileName: "IgOjO6og.jpg",
+      size: 176667,
+      contentType: "image/jpeg",
+      imageUrl: "https://api.test.ndla.no/image-api/raw/IgOjO6og.jpg",
+      dimensions: {
+        width: 1920,
+        height: 804,
+      },
+      language: "nb",
+    },
+  },
+};
+
+export const Fullscreen: StoryObj<typeof ExternalEmbed> = {
+  args: {
+    embed: {
+      resource: "external",
+      status: "success",
+      embedData: embedDataFullscreen,
+      data: opensInNewMetaData,
+    },
+  },
+};

package/src/Embed/IframeEmbed.tsx

@@ -9,6 +9,7 @@
 import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { IframeMetaData } from "@ndla/types-embed";
+import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import { Figure } from "../Figure";
 import { ResourceBox } from "../ResourceBox";
 
@@ -21,8 +22,6 @@ const IframeEmbed = ({ embed, isConcept }: Props) => {
   const { t } = useTranslation();
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
-  const { embedData } = embed;
-
   useEffect(() => {
     const iframe = iframeRef.current;
     if (iframe) {
@@ -33,8 +32,14 @@ const IframeEmbed = ({ embed, isConcept }: Props) => {
     }
   }, []);
 
+  if (embed.status === "error") {
+    return <EmbedErrorPlaceholder type="external" />;
+  }
+
+  const { embedData, data } = embed;
+
   if (embedData.type === "fullscreen") {
-    const iframeImage = embed.status === "success" ? embed.data.iframeImage : undefined;
+    const iframeImage = embed.status === "success" ? data.iframeImage : undefined;
     const alt = embedData.alt !== undefined ? embedData.alt : iframeImage?.alttext.alttext;
     const image = { src: iframeImage?.image.imageUrl ?? "", alt: alt ?? "" };
     return (

package/src/Embed/UuDisclaimerEmbed.stories.tsx

@@ -0,0 +1,150 @@
+/**
+ * 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 { UuDisclaimerEmbedData } from "@ndla/types-embed";
+import H5pEmbed from "./H5pEmbed";
+import IframeEmbed from "./IframeEmbed";
+import UuDisclaimerEmbed from "./UuDisclaimerEmbed";
+import { defaultParameters } from "../../../../stories/defaults";
+
+const embedData: UuDisclaimerEmbedData = {
+  resource: "uu-disclaimer",
+  disclaimer: "Dette inholdet er ikke tastaturvennlig.",
+  articleId: 123,
+};
+
+const meta: Meta<typeof UuDisclaimerEmbed> = {
+  title: "Embeds/UuDisclaimerEmbed",
+  component: UuDisclaimerEmbed,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="o-wrapper">
+        <article className="c-article c-article--clean">
+          <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
+            <section>
+              <Story />
+            </section>
+          </section>
+        </article>
+      </div>
+    ),
+  ],
+  parameters: defaultParameters,
+};
+
+export default meta;
+
+export const Regular: StoryObj<typeof UuDisclaimerEmbed> = {
+  args: {
+    embed: {
+      resource: "uu-disclaimer",
+      status: "success",
+      embedData: embedData,
+      data: {},
+    },
+  },
+};
+
+export const WithLink: StoryObj<typeof UuDisclaimerEmbed> = {
+  args: {
+    embed: {
+      resource: "uu-disclaimer",
+      status: "success",
+      embedData: embedData,
+      data: {
+        disclaimerLink: {
+          href: "https://ndla.no/article/123",
+          text: "Navn på artikkel med innhold",
+        },
+      },
+    },
+  },
+};
+
+export const WithIframe: StoryObj<typeof UuDisclaimerEmbed> = {
+  args: {
+    embed: {
+      resource: "uu-disclaimer",
+      status: "success",
+      embedData: embedData,
+      data: {},
+    },
+    children: (
+      <IframeEmbed
+        embed={{
+          resource: "iframe",
+          status: "success",
+          embedData: {
+            resource: "iframe",
+            type: "iframe",
+            url: "https://embed.kahoot.it/2a51c481-d362-475b-862b-e4b47b96b3c9",
+          },
+          data: {},
+        }}
+      />
+    ),
+  },
+};
+
+export const WithH5p: StoryObj<typeof UuDisclaimerEmbed> = {
+  args: {
+    embed: {
+      resource: "uu-disclaimer",
+      status: "success",
+      embedData: embedData,
+      data: {},
+    },
+    children: (
+      <H5pEmbed
+        embed={{
+          resource: "h5p",
+          status: "success",
+          embedData: {
+            resource: "h5p",
+            path: "/resource/c56368d0-0432-4ec3-97bd-f4ba4badf55e",
+            url: "https://h5p-test.ndla.no/resource/c56368d0-0432-4ec3-97bd-f4ba4badf55e?locale=nb-no&cssUrl=https://test.ndla.no/static/h5p-custom-css.css",
+          },
+          data: {
+            h5pUrl:
+              "https://h5p-test.ndla.no/resource/c56368d0-0432-4ec3-97bd-f4ba4badf55e?locale=nb-no&cssUrl=https://test.ndla.no/static/h5p-custom-css.css",
+            oembed: {
+              type: "proxy",
+              version: "1.0",
+              title: "Sorter avfall",
+              width: 600,
+              height: 300,
+              html: '<div><iframe width="600" height="300" allowfullscreen="allowfullscreen" src="https://h5p-test.ndla.no/resource/c56368d0-0432-4ec3-97bd-f4ba4badf55e?locale=nb-no&amp;cssUrl=https%3A%2F%2Ftest.ndla.no%2Fstatic%2Fh5p-custom-css.css" title="Sorter avfall"></iframe><script src="https://ca.h5p.ndla.no/h5p-php-library/js/h5p-resizer.js"></script></div>',
+            },
+          },
+        }}
+      />
+    ),
+  },
+};
+
+export const WithHtml: StoryObj<typeof UuDisclaimerEmbed> = {
+  args: {
+    embed: {
+      resource: "uu-disclaimer",
+      status: "success",
+      embedData: embedData,
+      data: {},
+    },
+    children: (
+      <>
+        <h2>Dette er html med en ekspanderboks</h2>
+        <details>
+          <summary>Tittel</summary>
+          <p>innhold</p>
+        </details>
+      </>
+    ),
+  },
+};

package/src/Embed/UuDisclaimerEmbed.tsx

@@ -0,0 +1,62 @@
+/**
+ * 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 { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { InformationOutline } from "@ndla/icons/common";
+import SafeLink from "@ndla/safelink";
+import { UuDisclaimerMetaData } from "@ndla/types-embed";
+import { MessageBox } from "../Messages";
+interface Props {
+  embed: UuDisclaimerMetaData;
+  children?: ReactNode;
+}
+
+const StyledMessageBox = styled(MessageBox)`
+  display: flex;
+  flex-align: center;
+`;
+
+const Disclaimer = styled.div`
+  display: flow;
+`;
+
+const UuDisclaimerEmbed = ({ embed, children }: Props) => {
+  const { t } = useTranslation();
+
+  if (embed.status === "error") {
+    return null;
+  }
+
+  const { embedData, data } = embed;
+
+  const disclaimerLink = data.disclaimerLink ? (
+    <>
+      {` ${t("uuDisclaimer.alternative")} `}
+      <SafeLink to={data.disclaimerLink.href} target="_blank" rel="noopener noreferrer">
+        {data.disclaimerLink.text}
+      </SafeLink>
+    </>
+  ) : null;
+
+  return (
+    <>
+      <StyledMessageBox type="info">
+        <InformationOutline />
+        <Disclaimer contentEditable={false}>
+          {embedData.disclaimer}
+          {disclaimerLink}
+        </Disclaimer>
+      </StyledMessageBox>
+      {children}
+    </>
+  );
+};
+
+export default UuDisclaimerEmbed;

package/src/Embed/index.ts

@@ -20,4 +20,5 @@ export { ConceptNotionV2 } from "./conceptComponents";
 export { default as ConceptListEmbed } from "./ConceptListEmbed";
 export { default as UnknownEmbed } from "./UnknownEmbed";
 export { InlineConcept, BlockConcept } from "./ConceptEmbed";
+export { default as UuDisclaimerEmbed } from "./UuDisclaimerEmbed";
 export type { HeartButtonType, CanonicalUrlFuncs, RenderContext } from "./types";

package/src/Messages/MessageBox.tsx

@@ -13,7 +13,7 @@ import { CloseButton } from "@ndla/button";
 import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
 import { Forward } from "@ndla/icons/common";
 
-type MessageBoxType = "ghost" | "danger";
+type MessageBoxType = "ghost" | "danger" | "info";
 
 interface LinkProps {
   href?: string;

package/src/RelatedArticleList/RelatedArticleList.tsx

@@ -125,7 +125,7 @@ const StyledSection = styled.section`
 export const RelatedArticleList = ({
   children = [],
   articleCount,
-  headingLevel = "h3",
+  headingLevel = "h2",
   headingButtons,
   ...rest
 }: Props) => {

package/src/index.ts

@@ -27,6 +27,7 @@ export {
   UnknownEmbed,
   InlineConcept,
   BlockConcept,
+  UuDisclaimerEmbed,
 } from "./Embed";
 
 export { LicenseLink } from "./LicenseByline";

package/src/locale/messages-en.ts

@@ -1355,6 +1355,9 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
+  uuDisclaimer: {
+    alternative: "You can find alternative content in the article",
+  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjective",
     [wordClass.wordClass.adverb]: "Adverb",

package/src/locale/messages-nb.ts

@@ -1353,6 +1353,9 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
+  uuDisclaimer: {
+    alternative: "Du kan finne alternativt innhold i artikkelen",
+  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/src/locale/messages-nn.ts

@@ -1353,6 +1353,9 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
+  uuDisclaimer: {
+    alternative: "Du kan finne alternativt innhald i artikkelen",
+  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/src/locale/messages-se.ts

@@ -1355,6 +1355,9 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
+  uuDisclaimer: {
+    alternative: "Du kan finne alternativt innhold i artikkelen",
+  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiivvat",
     [wordClass.wordClass.adverb]: "Advearba",

package/src/locale/messages-sma.ts

@@ -1357,6 +1357,9 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
+  uuDisclaimer: {
+    alternative: "Du kan finne alternativt innhold i artikkelen",
+  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",