@ndla/ui 50.9.7 → 50.9.9

package/lib/index.d.ts

@@ -7,7 +7,7 @@
  */
 export { ExpandableBox, ExpandableBoxSummary } from "./ExpandableBox";
 export { default as FramedContent } from "./FramedContent";
-export { ConceptNotionV2, ImageEmbed, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed, InlineConcept, BlockConcept, } from "./Embed";
+export { ConceptNotionV2, ImageEmbed, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed, InlineConcept, BlockConcept, UuDisclaimerEmbed, } from "./Embed";
 export { LicenseLink } from "./LicenseByline";
 export { ArticleByline, ArticleFootNotes, ArticleIntroduction, ArticleTitle, ArticleWrapper, ArticleHeaderWrapper, default as Article, } from "./Article";
 export { getPossiblyRelativeUrl } from "./utils/relativeUrl";
@@ -25,7 +25,7 @@ export { default as Image, ImageLink, makeSrcQueryString } from "./Image";
 export type { ImageCrop, ImageFocalPoint } from "./Image";
 export type { HeroContentType } from "./Hero";
 export { SubjectMaterialHero, TasksAndActivitiesHero, AssessmentResourcesHero, SubjectHero, ExternalLearningResourcesHero, SourceMaterialHero, Hero, NdlaFilmHero, HeroContent, } from "./Hero";
-export { FilterList, FilterListPhone, FilterButtons, ToggleItem } from "./Filter";
+export { FilterButtons, ToggleItem } from "./Filter";
 export { Footer, EditorName, FooterText } from "./Footer";
 export { Figure, FigureOpenDialogButton } from "./Figure";
 export type { FigureType } from "./Figure";

package/lib/index.js

@@ -339,18 +339,6 @@ Object.defineProperty(exports, "FilterButtons", {
     return _Filter.FilterButtons;
   }
 });
-Object.defineProperty(exports, "FilterList", {
-  enumerable: true,
-  get: function () {
-    return _Filter.FilterList;
-  }
-});
-Object.defineProperty(exports, "FilterListPhone", {
-  enumerable: true,
-  get: function () {
-    return _Filter.FilterListPhone;
-  }
-});
 Object.defineProperty(exports, "Folder", {
   enumerable: true,
   get: function () {
@@ -957,6 +945,12 @@ Object.defineProperty(exports, "UnknownEmbed", {
     return _Embed.UnknownEmbed;
   }
 });
+Object.defineProperty(exports, "UuDisclaimerEmbed", {
+  enumerable: true,
+  get: function () {
+    return _Embed.UuDisclaimerEmbed;
+  }
+});
 Object.defineProperty(exports, "WIDE_FRONTPAGE_ARTICLE_MAX_WIDTH", {
   enumerable: true,
   get: function () {

package/lib/locale/messages-en.d.ts

@@ -1318,6 +1318,9 @@ declare const messages: {
             pinyin: string;
         };
     };
+    uuDisclaimer: {
+        alternative: string;
+    };
     wordClass: {
         [x: string]: string;
     };

package/lib/locale/messages-en.js

@@ -1337,6 +1337,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/lib/locale/messages-nb.d.ts

@@ -1318,6 +1318,9 @@ declare const messages: {
             pinyin: string;
         };
     };
+    uuDisclaimer: {
+        alternative: string;
+    };
     wordClass: {
         [x: string]: string;
     };

package/lib/locale/messages-nb.js

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

package/lib/locale/messages-nn.d.ts

@@ -1318,6 +1318,9 @@ declare const messages: {
             pinyin: string;
         };
     };
+    uuDisclaimer: {
+        alternative: string;
+    };
     wordClass: {
         [x: string]: string;
     };

package/lib/locale/messages-nn.js

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

package/lib/locale/messages-se.d.ts

@@ -1318,6 +1318,9 @@ declare const messages: {
             pinyin: string;
         };
     };
+    uuDisclaimer: {
+        alternative: string;
+    };
     wordClass: {
         [x: string]: string;
     };

package/lib/locale/messages-se.js

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

package/lib/locale/messages-sma.d.ts

@@ -1318,6 +1318,9 @@ declare const messages: {
             pinyin: string;
         };
     };
+    uuDisclaimer: {
+        alternative: string;
+    };
     wordClass: {
         [x: string]: string;
     };

package/lib/locale/messages-sma.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "50.9.7",
+  "version": "50.9.9",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,19 +31,19 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^3.0.26",
-    "@ndla/button": "^12.0.31",
-    "@ndla/carousel": "^4.0.30",
+    "@ndla/accordion": "^3.0.27",
+    "@ndla/button": "^12.0.32",
+    "@ndla/carousel": "^4.0.31",
     "@ndla/core": "^4.4.0",
     "@ndla/dropdown-menu": "^1.0.28",
-    "@ndla/forms": "^5.2.22",
+    "@ndla/forms": "^5.2.23",
     "@ndla/hooks": "^2.1.5",
-    "@ndla/icons": "^5.0.9",
+    "@ndla/icons": "^5.0.10",
     "@ndla/licenses": "^7.2.5",
-    "@ndla/modal": "^5.0.29",
-    "@ndla/notion": "^6.0.30",
-    "@ndla/safelink": "^4.1.56",
-    "@ndla/select": "^3.3.4",
+    "@ndla/modal": "^5.0.30",
+    "@ndla/notion": "^6.0.31",
+    "@ndla/safelink": "^4.1.57",
+    "@ndla/select": "^3.3.5",
     "@ndla/switch": "^1.1.34",
     "@ndla/tabs": "^3.2.14",
     "@ndla/tooltip": "^6.0.17",
@@ -71,7 +71,7 @@
   },
   "devDependencies": {
     "@ndla/types-backend": "^0.2.21",
-    "@ndla/types-embed": "^4.0.13",
+    "@ndla/types-embed": "^4.0.14",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
     "sass-loader": "^13.2.2",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0ac986c583fdda4957ce9dd298043ac459052704"
+  "gitHead": "fc3f24dabc60ff3f1f00984a38a9de4ff8fde3c7"
 }

package/src/AudioPlayer/AudioPlayer.tsx

@@ -13,6 +13,7 @@ import { ButtonV2 } from "@ndla/button";
 import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
 import { Cross as CrossIcon } from "@ndla/icons/action";
 import SafeLink from "@ndla/safelink";
+import { Heading, Text } from "@ndla/typography";
 import Controls from "./Controls";
 import SpeechControl from "./SpeechControl";
 
@@ -73,26 +74,12 @@ const TitleWrapper = styled.div`
   }
 `;
 
-const Title = styled.h2`
-  ${fonts.sizes("22px", "30px")};
-  margin: 0px;
+const Title = styled(Heading)`
   &[data-has-desc="true"] {
-    margin: 0 0 ${spacing.small};
+    margin: ${spacing.xsmall} 0 ${spacing.small};
   }
 `;
 
-const Subtitle = styled.h3`
-  ${fonts.sizes("18px", "28px")};
-  margin: 0;
-  font-weight: ${fonts.weight.semibold};
-`;
-
-const StyledDescription = styled.div`
-  ${fonts.sizes("16px", "30px")};
-  font-family: ${fonts.sans};
-  margin: 0;
-`;
-
 const LinkToTextVersionWrapper = styled.div`
   &[data-margin="true"] {
     margin-top: ${spacing.small};
@@ -125,7 +112,7 @@ const TextVersionHeadingWrapper = styled.div`
   align-items: flex-start;
 `;
 
-const TextVersionHeading = styled.h2`
+const TextVersionHeading = styled(Heading)`
   font-weight: ${fonts.weight.semibold};
   margin: ${spacing.small} 0 ${spacing.normal};
 `;
@@ -135,7 +122,6 @@ const LinkButton = styled(ButtonV2)`
   padding-left: 0;
   padding-right: 4px;
   min-height: ${spacing.medium};
-  ${fonts.sizes("16px", "25px")};
   flex: 0 0 auto;
   &:hover,
   &:focus {
@@ -214,24 +200,22 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
         <TextWrapper data-has-image={!!img}>
           <TitleWrapper>
             <div>
-              {subtitle && (
-                <Subtitle>
-                  {subtitle.url ? <SafeLink to={subtitle.url}>{subtitle.title}</SafeLink> : subtitle.title}
-                </Subtitle>
-              )}
-              <Title data-has-desc={!!description}>{title}</Title>
+              {subtitle && subtitle.url ? <SafeLink to={subtitle.url}>{subtitle.title}</SafeLink> : subtitle?.title}
+              <Title element="h3" headingStyle="h4" margin="none" data-has-desc={!!description}>
+                {title}
+              </Title>
             </div>
             {textVersion && !img && <TextVersionComponent />}
           </TitleWrapper>
           {description && (
-            <StyledDescription>
+            <Text element="p" textStyle="meta-text-small" margin="none">
               {showFullDescription || description.length < DESCRIPTION_MAX_LENGTH
                 ? description
                 : `${truncatedDescription}...`}
               <ButtonV2 variant="link" onClick={() => setShowFullDescription((p) => !p)}>
                 {t(`audio.${showFullDescription ? "readLessDescriptionLabel" : "readMoreDescriptionLabel"}`)}
               </ButtonV2>
-            </StyledDescription>
+            </Text>
           )}
           {textVersion && img && <TextVersionComponent margin />}
         </TextWrapper>
@@ -242,7 +226,9 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
       {textVersion && (showTextVersion || staticRenderId) && (
         <TextVersionWrapper id={staticRenderId} hidden={!!staticRenderId}>
           <TextVersionHeadingWrapper>
-            <TextVersionHeading>{t("audio.textVersion.heading")}</TextVersionHeading>
+            <TextVersionHeading element="h3" headingStyle="h2" margin="small">
+              {t("audio.textVersion.heading")}
+            </TextVersionHeading>
             <LinkButton
               variant="link"
               size="normal"

package/src/CampaignBlock/CampaignBlock.stories.tsx

@@ -57,3 +57,18 @@ export const ImageRight: StoryObj<typeof CampaignBlock> = {
     imageSide: "right",
   },
 };
+
+export const NoUrl: StoryObj<typeof CampaignBlock> = {
+  args: {
+    title: { title: "No url!!!", language: "nb-no" },
+    description: {
+      text: "Look ma, no url!",
+      language: "nb-no",
+    },
+    image: {
+      alt: "Tømmer",
+      src: "https://api.test.ndla.no/image-api/raw/stokkmarknes_004_d013e.jpg",
+    },
+    imageSide: "left",
+  },
+};

package/src/Embed/BrightcoveEmbed.stories.tsx

@@ -7,7 +7,7 @@
  */
 
 import { Meta, StoryObj } from "@storybook/react";
-import { BrightcoveData, BrightcoveEmbedData, BrightcoveMetaData, EmbedMetaData } from "@ndla/types-embed";
+import { BrightcoveData, BrightcoveEmbedData, BrightcoveMetaData } from "@ndla/types-embed";
 import BrightcoveEmbed from "./BrightcoveEmbed";
 import { defaultParameters } from "../../../../stories/defaults";
 import StoryFavoriteButton from "../../../../stories/StoryFavoriteButton";

package/src/Embed/ContentLinkEmbed.tsx

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

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>
+      </>
+    ),
+  },
+};