@ndla/ui 56.0.109-alpha.0 → 56.0.111-alpha.0

package/dist/panda.buildinfo.json

@@ -1,5 +1,5 @@
 {
-  "schemaVersion": "0.52.0",
+  "schemaVersion": "0.53.3",
   "styles": {
     "atomic": [
       "background]___[value:background.default",

package/es/Embed/BrightcoveEmbed.js

@@ -101,6 +101,7 @@ const BrightcoveEmbed = _ref => {
     videoid: linkedVideoId
   }, data.sources) : undefined;
   const licenseProps = licenseAttributes(data?.copyright?.license.license, lang, embedData.pageUrl);
+  const title = data.name?.trim() ? `${t("embed.type.video")}: ${data.name}` : fallbackTitle;
   return /*#__PURE__*/_jsxs(Figure, {
     "data-embed-type": "brightcove",
     ...licenseProps,
@@ -109,8 +110,8 @@ const BrightcoveEmbed = _ref => {
       children: /*#__PURE__*/_jsx(BrightcoveIframe, {
         ref: iframeRef,
         className: "original",
-        title: embedData.alt || data.name || fallbackTitle,
-        "aria-label": embedData.alt || data.name || fallbackTitle,
+        title: title,
+        "aria-label": title,
         ...(alternativeVideoProps && !showOriginalVideo ? alternativeVideoProps : originalVideoProps),
         allow: "fullscreen; encrypted-media"
       })

package/es/Embed/H5pEmbed.js

@@ -6,6 +6,7 @@
  *
  */
 
+import { useTranslation } from "react-i18next";
 import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
@@ -30,6 +31,9 @@ const H5pEmbed = _ref => {
   let {
     embed
   } = _ref;
+  const {
+    t
+  } = useTranslation();
   if (embed.status === "error") {
     return /*#__PURE__*/_jsx(EmbedErrorPlaceholder, {
       type: "h5p"
@@ -43,11 +47,13 @@ const H5pEmbed = _ref => {
       }
     });
   }
+  const title = embed.embedData.title?.trim() ? embed.embedData.title : embed.data.h5pLicenseInformation?.h5p.title?.trim() ? embed.data.h5pLicenseInformation.h5p.title : embed.embedData.url;
+  const titleWithPrefix = `${t("embed.type.h5p")}: ${title}`;
   return /*#__PURE__*/_jsx(StyledFigure, {
     "data-embed-type": "h5p",
     children: /*#__PURE__*/_jsx("iframe", {
-      title: embed.embedData.url,
-      "aria-label": embed.embedData.url,
+      title: titleWithPrefix,
+      "aria-label": titleWithPrefix,
       src: embed.embedData.url
     })
   });

package/es/Embed/IframeEmbed.js

@@ -71,18 +71,17 @@ const IframeEmbed = _ref => {
   const {
     width,
     height,
-    title,
     url
   } = embedData;
   const strippedWidth = typeof width === "number" ? width : width?.replace(/\s*px/, "");
   const strippedHeight = typeof height === "number" ? height : height?.replace(/\s*px/, "");
-  const urlOrTitle = title || url;
+  const title = `${t("embed.type.external")}: ${embedData.title?.trim() ? embedData.title : url}`;
   return /*#__PURE__*/_jsx(StyledFigure, {
     "data-embed-type": "iframe",
     children: /*#__PURE__*/_jsx(StyledIframe, {
       ref: iframeRef,
-      title: urlOrTitle,
-      "aria-label": urlOrTitle,
+      title: title,
+      "aria-label": title,
       src: url,
       width: strippedWidth,
       height: strippedHeight,

package/es/ErrorMessage/index.js

@@ -5,5 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 import ErrorMessage from "./ErrorMessage";
 export default ErrorMessage;

package/es/FactBox/FactBox.js

@@ -141,6 +141,7 @@ const FactBox = /*#__PURE__*/forwardRef((_ref, ref) => {
     children: [/*#__PURE__*/_jsx(StyledIconButton, {
       "data-state": state,
       onClick: onClick,
+      contentEditable: false,
       "aria-expanded": state === "open",
       "aria-controls": contentId,
       "aria-label": t(`factbox.${state === "open" ? "close" : "open"}`),

package/lib/Embed/BrightcoveEmbed.js

@@ -110,6 +110,7 @@ const BrightcoveEmbed = _ref => {
     videoid: linkedVideoId
   }, data.sources) : undefined;
   const licenseProps = (0, _licenseAttributes.licenseAttributes)(data?.copyright?.license.license, lang, embedData.pageUrl);
+  const title = data.name?.trim() ? `${t("embed.type.video")}: ${data.name}` : fallbackTitle;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.Figure, {
     "data-embed-type": "brightcove",
     ...licenseProps,
@@ -118,8 +119,8 @@ const BrightcoveEmbed = _ref => {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BrightcoveIframe, {
         ref: iframeRef,
         className: "original",
-        title: embedData.alt || data.name || fallbackTitle,
-        "aria-label": embedData.alt || data.name || fallbackTitle,
+        title: title,
+        "aria-label": title,
         ...(alternativeVideoProps && !showOriginalVideo ? alternativeVideoProps : originalVideoProps),
         allow: "fullscreen; encrypted-media"
       })

package/lib/Embed/H5pEmbed.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _reactI18next = require("react-i18next");
 var _primitives = require("@ndla/primitives");
 var _jsx2 = require("@ndla/styled-system/jsx");
 var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
@@ -37,6 +38,9 @@ const H5pEmbed = _ref => {
   let {
     embed
   } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
   if (embed.status === "error") {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_EmbedErrorPlaceholder.default, {
       type: "h5p"
@@ -50,11 +54,13 @@ const H5pEmbed = _ref => {
       }
     });
   }
+  const title = embed.embedData.title?.trim() ? embed.embedData.title : embed.data.h5pLicenseInformation?.h5p.title?.trim() ? embed.data.h5pLicenseInformation.h5p.title : embed.embedData.url;
+  const titleWithPrefix = `${t("embed.type.h5p")}: ${title}`;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFigure, {
     "data-embed-type": "h5p",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
-      title: embed.embedData.url,
-      "aria-label": embed.embedData.url,
+      title: titleWithPrefix,
+      "aria-label": titleWithPrefix,
       src: embed.embedData.url
     })
   });

package/lib/Embed/IframeEmbed.js

@@ -78,18 +78,17 @@ const IframeEmbed = _ref => {
   const {
     width,
     height,
-    title,
     url
   } = embedData;
   const strippedWidth = typeof width === "number" ? width : width?.replace(/\s*px/, "");
   const strippedHeight = typeof height === "number" ? height : height?.replace(/\s*px/, "");
-  const urlOrTitle = title || url;
+  const title = `${t("embed.type.external")}: ${embedData.title?.trim() ? embedData.title : url}`;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFigure, {
     "data-embed-type": "iframe",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledIframe, {
       ref: iframeRef,
-      title: urlOrTitle,
-      "aria-label": urlOrTitle,
+      title: title,
+      "aria-label": title,
       src: url,
       width: strippedWidth,
       height: strippedHeight,

package/lib/FactBox/FactBox.js

@@ -149,6 +149,7 @@ const FactBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledIconButton, {
       "data-state": state,
       onClick: onClick,
+      contentEditable: false,
       "aria-expanded": state === "open",
       "aria-controls": contentId,
       "aria-label": t(`factbox.${state === "open" ? "close" : "open"}`),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.109-alpha.0",
+  "version": "56.0.111-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,12 +33,12 @@
   ],
   "dependencies": {
     "@ndla/core": "^5.0.3",
-    "@ndla/icons": "^8.0.52-alpha.0",
+    "@ndla/icons": "^8.0.53-alpha.0",
     "@ndla/licenses": "^9.0.1",
-    "@ndla/primitives": "^1.0.83-alpha.0",
-    "@ndla/safelink": "^7.0.84-alpha.0",
-    "@ndla/styled-system": "^0.0.32",
-    "@ndla/util": "^5.0.6-alpha.0",
+    "@ndla/primitives": "^1.0.85-alpha.0",
+    "@ndla/safelink": "^7.0.86-alpha.0",
+    "@ndla/styled-system": "^0.0.33",
+    "@ndla/util": "^5.0.7-alpha.0",
     "html-react-parser": "^5.1.19"
   },
   "peerDependencies": {
@@ -49,13 +49,13 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.51",
-    "@ndla/types-backend": "^1.0.1",
-    "@ndla/types-embed": "^5.0.11-alpha.0",
-    "@pandacss/dev": "^0.52.0"
+    "@ndla/preset-panda": "^0.0.52",
+    "@ndla/types-backend": "^1.0.39",
+    "@ndla/types-embed": "^5.0.12-alpha.0",
+    "@pandacss/dev": "^0.53.3"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0495950a3a24defc5d51cdbf14c2d989e9996f82"
+  "gitHead": "2636009581467510d1675793f45f1762065b5a81"
 }

package/src/Concept/Concept.stories.tsx

@@ -96,10 +96,10 @@ export default {
         description: "Creative Commons Attribution-ShareAlike 4.0 International",
         url: "https://creativecommons.org/licenses/by-sa/4.0/",
       },
-      creators: [{ type: "Writer", name: "Sissel Paaske" }],
+      creators: [{ type: "writer", name: "Sissel Paaske" }],
       processors: [
-        { type: "Processor", name: "Totaltekst" },
-        { type: "Correction", name: "Arbeidets art" },
+        { type: "processor", name: "Totaltekst" },
+        { type: "correction", name: "Arbeidets art" },
       ],
       rightsholders: [],
       processed: false,

package/src/Embed/BrightcoveEmbed.tsx

@@ -104,14 +104,16 @@ const BrightcoveEmbed = ({ embed, renderContext = "article", lang }: Props) => {
 
   const licenseProps = licenseAttributes(data?.copyright?.license.license, lang, embedData.pageUrl);
 
+  const title = data.name?.trim() ? `${t("embed.type.video")}: ${data.name}` : fallbackTitle;
+
   return (
     <Figure data-embed-type="brightcove" {...licenseProps}>
       <div className="brightcove-video">
         <BrightcoveIframe
           ref={iframeRef}
           className="original"
-          title={embedData.alt || data.name || fallbackTitle}
-          aria-label={embedData.alt || data.name || fallbackTitle}
+          title={title}
+          aria-label={title}
           {...(alternativeVideoProps && !showOriginalVideo ? alternativeVideoProps : originalVideoProps)}
           allow="fullscreen; encrypted-media"
         />

package/src/Embed/ConceptEmbed.stories.tsx

@@ -43,27 +43,20 @@ const conceptMetaData: ConceptData["concept"] = {
       description: "Creative Commons Attribution-ShareAlike 4.0 International",
       url: "https://creativecommons.org/licenses/by-sa/4.0/",
     },
-    creators: [{ type: "Writer", name: "Sissel Paaske" }],
+    creators: [{ type: "writer", name: "Sissel Paaske" }],
     processors: [
-      { type: "Processor", name: "Totaltekst" },
-      { type: "Correction", name: "Arbeidets art" },
+      { type: "processor", name: "Totaltekst" },
+      { type: "correction", name: "Arbeidets art" },
     ],
     rightsholders: [],
     processed: false,
   },
   source: "",
-  metaImage: {
-    url: "https://api.test.ndla.no/image-api/raw/id/52863",
-    alt: "Eksempel på hvordan borevæsken kan trenge ut i formasjonen fra borehullet og skade formasjonens permeabilitet. Illustrasjon.",
-    language: "nb",
-  },
   tags: { tags: ["Brønn:Reservoar:"], language: "nb" },
-  subjectIds: ["urn:subject:6"],
   created: "2018-07-02T10:53:40Z",
   updated: "2020-11-18T08:58:33Z",
   updatedBy: ["sPHJn0BEtfxw2d2DUpIuS3iY", "KBAJskRqPXZUv9LFjAbz8btB", "eEIRDzflTh9oUp_3CgpuIMOg"],
   supportedLanguages: ["nb", "nn"],
-  articleIds: [],
   status: { current: "PUBLISHED", other: [] },
   visualElement: {
     visualElement:
@@ -104,7 +97,7 @@ const visualElementData: ConceptData["visualElement"] = {
       origin: "",
       creators: [
         {
-          type: "Illustrator",
+          type: "illustrator",
           name: "Sissel Paaske",
         },
       ],

package/src/Embed/GlossEmbed.stories.tsx

@@ -43,16 +43,10 @@ const glossMetaData: ConceptData["concept"] = {
     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: [],

package/src/Embed/H5pEmbed.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+import { useTranslation } from "react-i18next";
 import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { H5pMetaData } from "@ndla/types-embed";
@@ -34,6 +35,7 @@ const FigureOembed = styled(Figure, {
 });
 
 const H5pEmbed = ({ embed }: Props) => {
+  const { t } = useTranslation();
   if (embed.status === "error") {
     return <EmbedErrorPlaceholder type="h5p" />;
   }
@@ -42,9 +44,17 @@ const H5pEmbed = ({ embed }: Props) => {
     return <FigureOembed data-embed-type="h5p" dangerouslySetInnerHTML={{ __html: embed.data.oembed.html ?? "" }} />;
   }
 
+  const title = embed.embedData.title?.trim()
+    ? embed.embedData.title
+    : embed.data.h5pLicenseInformation?.h5p.title?.trim()
+      ? embed.data.h5pLicenseInformation.h5p.title
+      : embed.embedData.url;
+
+  const titleWithPrefix = `${t("embed.type.h5p")}: ${title}`;
+
   return (
     <StyledFigure data-embed-type="h5p">
-      <iframe title={embed.embedData.url} aria-label={embed.embedData.url} src={embed.embedData.url} />
+      <iframe title={titleWithPrefix} aria-label={titleWithPrefix} src={embed.embedData.url} />
     </StyledFigure>
   );
 };

package/src/Embed/IframeEmbed.tsx

@@ -68,18 +68,18 @@ const IframeEmbed = ({ embed }: Props) => {
     );
   }
 
-  const { width, height, title, url } = embedData;
+  const { width, height, url } = embedData;
 
   const strippedWidth = typeof width === "number" ? width : width?.replace(/\s*px/, "");
   const strippedHeight = typeof height === "number" ? height : height?.replace(/\s*px/, "");
-  const urlOrTitle = title || url;
+  const title = `${t("embed.type.external")}: ${embedData.title?.trim() ? embedData.title : url}`;
 
   return (
     <StyledFigure data-embed-type="iframe">
       <StyledIframe
         ref={iframeRef}
-        title={urlOrTitle}
-        aria-label={urlOrTitle}
+        title={title}
+        aria-label={title}
         src={url}
         width={strippedWidth}
         height={strippedHeight}

package/src/Embed/RelatedContentEmbed.stories.tsx

@@ -42,17 +42,17 @@ const filmResourceMeta: RelatedContentMetaData = {
         origin: "",
         creators: [
           {
-            type: "Writer",
+            type: "writer",
             name: "Elisabeth Thoresen Olseng",
           },
         ],
         processors: [
           {
-            type: "Processor",
+            type: "processor",
             name: "Tone Hadler-Olsen",
           },
           {
-            type: "Correction",
+            type: "correction",
             name: "Totaltekst",
           },
         ],
@@ -231,7 +231,7 @@ const learningResourceMeta: RelatedContentMetaData = {
         origin: "",
         creators: [
           {
-            type: "Writer",
+            type: "writer",
             name: "Albertine Aaberge",
           },
         ],

package/src/ErrorMessage/index.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 import ErrorMessage from "./ErrorMessage";
 
 export default ErrorMessage;

package/src/FactBox/FactBox.tsx

@@ -149,6 +149,7 @@ const FactBox = forwardRef<HTMLElement, Props>(
         <StyledIconButton
           data-state={state}
           onClick={onClick}
+          contentEditable={false}
           aria-expanded={state === "open"}
           aria-controls={contentId}
           aria-label={t(`factbox.${state === "open" ? "close" : "open"}`)}