@ndla/ui 56.0.81-alpha.0 → 56.0.84-alpha.0

package/README.md

@@ -1,6 +1,6 @@
 # ndla-ui
 
-Main UI component library for NDLA
+Main UI component library for NDLA.
 
 ## Installation
 

package/es/Article/ArticleByline.js

@@ -116,11 +116,7 @@ export const ArticleByline = _ref => {
   return /*#__PURE__*/_jsxs(Wrapper, {
     children: [!!displayByline && /*#__PURE__*/_jsxs(TextWrapper, {
       learningpath: bylineType === "learningPath",
-      children: [!!showPrimaryContributors &&
-      /*#__PURE__*/
-      //eslint-disable-next-line react/no-unknown-property
-      _jsxs("span", {
-        property: "cc:attributionName",
+      children: [!!showPrimaryContributors && /*#__PURE__*/_jsxs("span", {
         children: [authors.length > 0 && `${t("article.authorsLabel", {
           names: renderContributors(authors, t),
           interpolation: {

package/es/Embed/RelatedContentEmbed.js

@@ -30,12 +30,13 @@ const RelatedContentEmbed = _ref => {
   if (embedData.articleId && data) {
     const typeId = data.resource?.resourceTypes.find(rt => contentTypeMapping[rt.id])?.id;
     const type = typeId ? contentTypeMapping[typeId] : undefined;
-    const path = data.resource?.paths.find(p => p.split("/")[1] === subject?.replace("urn:", "")) ?? data.resource?.path ?? `/article/${embedData.articleId}`;
+    const context = data.resource?.contexts.find(c => c.rootId === subject);
+    const url = context?.url ?? data.resource?.url ?? `/article/${embedData.articleId}`;
     return /*#__PURE__*/_jsx(RelatedArticle, {
       title: data.article.title?.title ?? "",
       introduction: data.article.metaDescription?.metaDescription ?? "",
       target: isOembed ? "_blank" : undefined,
-      to: `${ndlaFrontendDomain ?? ""}${path ?? ""}`,
+      to: `${ndlaFrontendDomain ?? ""}${url ?? ""}`,
       type: type
     });
   }

package/es/FileList/FileList.js

@@ -6,12 +6,10 @@
  *
  */
 
-import { useTranslation } from "react-i18next";
 import { ark } from "@ark-ui/react";
-import { Heading } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const FileListWrapper = styled("div", {
+import { jsx as _jsx } from "react/jsx-runtime";
+export const FileListWrapper = styled("ul", {
   base: {
     display: "flex",
     flexDirection: "column",
@@ -38,22 +36,9 @@ export const FileListEmbed = _ref => {
     children,
     ...rest
   } = _ref;
-  const {
-    t
-  } = useTranslation();
-  return /*#__PURE__*/_jsxs(FileListWrapper, {
+  return /*#__PURE__*/_jsx(FileListWrapper, {
     ...rest,
     "data-embed-type": "file-list",
-    children: [/*#__PURE__*/_jsx(Heading, {
-      fontWeight: "bold",
-      textStyle: "heading.small",
-      asChild: true,
-      consumeCss: true,
-      children: /*#__PURE__*/_jsx("h3", {
-        children: t("files")
-      })
-    }), /*#__PURE__*/_jsx("ul", {
-      children: children
-    })]
+    children: children
   });
 };

package/es/LicenseByline/EmbedByline.js

@@ -186,7 +186,6 @@ export const LicenseContainerContent = _ref3 => {
   const [isOpen, setIsOpen] = useState(false);
   const content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [children, ` ${t(`embed.type.${type}`)}${captionAuthors.length ? ": " : ""}`, /*#__PURE__*/_jsx("span", {
-      property: "cc:attributionName",
       children: captionAuthors.map(author => author.name).join(", ")
     }), license ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [" / ", /*#__PURE__*/_jsx(LicenseLink, {

package/lib/Article/ArticleByline.js

@@ -122,11 +122,7 @@ const ArticleByline = _ref => {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
     children: [!!displayByline && /*#__PURE__*/(0, _jsxRuntime.jsxs)(TextWrapper, {
       learningpath: bylineType === "learningPath",
-      children: [!!showPrimaryContributors &&
-      /*#__PURE__*/
-      //eslint-disable-next-line react/no-unknown-property
-      (0, _jsxRuntime.jsxs)("span", {
-        property: "cc:attributionName",
+      children: [!!showPrimaryContributors && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
         children: [authors.length > 0 && `${t("article.authorsLabel", {
           names: renderContributors(authors, t),
           interpolation: {

package/lib/Embed/RelatedContentEmbed.js

@@ -36,12 +36,13 @@ const RelatedContentEmbed = _ref => {
   if (embedData.articleId && data) {
     const typeId = data.resource?.resourceTypes.find(rt => _ContentType.contentTypeMapping[rt.id])?.id;
     const type = typeId ? _ContentType.contentTypeMapping[typeId] : undefined;
-    const path = data.resource?.paths.find(p => p.split("/")[1] === subject?.replace("urn:", "")) ?? data.resource?.path ?? `/article/${embedData.articleId}`;
+    const context = data.resource?.contexts.find(c => c.rootId === subject);
+    const url = context?.url ?? data.resource?.url ?? `/article/${embedData.articleId}`;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RelatedArticleList.RelatedArticle, {
       title: data.article.title?.title ?? "",
       introduction: data.article.metaDescription?.metaDescription ?? "",
       target: isOembed ? "_blank" : undefined,
-      to: `${ndlaFrontendDomain ?? ""}${path ?? ""}`,
+      to: `${ndlaFrontendDomain ?? ""}${url ?? ""}`,
       type: type
     });
   }

package/lib/FileList/FileList.d.ts

@@ -6,9 +6,9 @@
  *
  */
 import { type ComponentPropsWithoutRef } from "react";
-interface Props extends ComponentPropsWithoutRef<"div"> {
+interface Props extends ComponentPropsWithoutRef<"ul"> {
 }
-export declare const FileListWrapper: import("@ndla/styled-system/types").StyledComponent<"div", {}>;
+export declare const FileListWrapper: import("@ndla/styled-system/types").StyledComponent<"ul", {}>;
 export declare const FileListItem: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & import("@ark-ui/react").PolymorphicProps>, {}>;
 export declare const FileListEmbed: ({ children, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/FileList/FileList.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FileListWrapper = exports.FileListItem = exports.FileListEmbed = void 0;
-var _reactI18next = require("react-i18next");
 var _react = require("@ark-ui/react");
-var _primitives = require("@ndla/primitives");
 var _jsx2 = require("@ndla/styled-system/jsx");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -17,7 +15,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
-const FileListWrapper = exports.FileListWrapper = (0, _jsx2.styled)("div", {
+const FileListWrapper = exports.FileListWrapper = (0, _jsx2.styled)("ul", {
   base: {
     display: "flex",
     flexDirection: "column",
@@ -44,23 +42,10 @@ const FileListEmbed = _ref => {
     children,
     ...rest
   } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FileListWrapper, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FileListWrapper, {
     ...rest,
     "data-embed-type": "file-list",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
-      fontWeight: "bold",
-      textStyle: "heading.small",
-      asChild: true,
-      consumeCss: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
-        children: t("files")
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-      children: children
-    })]
+    children: children
   });
 };
 exports.FileListEmbed = FileListEmbed;

package/lib/LicenseByline/EmbedByline.js

@@ -193,7 +193,6 @@ const LicenseContainerContent = _ref3 => {
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [children, ` ${t(`embed.type.${type}`)}${captionAuthors.length ? ": " : ""}`, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      property: "cc:attributionName",
       children: captionAuthors.map(author => author.name).join(", ")
     }), license ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [" / ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_LicenseLink.LicenseLink, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.81-alpha.0",
+  "version": "56.0.84-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -35,8 +35,8 @@
     "@ndla/core": "^5.0.3",
     "@ndla/icons": "^8.0.48-alpha.0",
     "@ndla/licenses": "^8.0.6-alpha.0",
-    "@ndla/primitives": "^1.0.65-alpha.0",
-    "@ndla/safelink": "^7.0.66-alpha.0",
+    "@ndla/primitives": "^1.0.67-alpha.0",
+    "@ndla/safelink": "^7.0.68-alpha.0",
     "@ndla/styled-system": "^0.0.29",
     "@ndla/util": "^5.0.5-alpha.0",
     "html-react-parser": "^5.1.19",
@@ -58,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3d07532b83827e3b1dd62cbcfbe316797db14d4e"
+  "gitHead": "14e44312c9dd32cc892dac71c60b3569c2b3dfc8"
 }

package/src/Article/ArticleByline.tsx

@@ -153,8 +153,7 @@ export const ArticleByline = ({
       {!!displayByline && (
         <TextWrapper learningpath={bylineType === "learningPath"}>
           {!!showPrimaryContributors && (
-            //eslint-disable-next-line react/no-unknown-property
-            <span property="cc:attributionName">
+            <span>
               {authors.length > 0 &&
                 `${t("article.authorsLabel", {
                   names: renderContributors(authors, t),

package/src/Embed/RelatedContentEmbed.tsx

@@ -29,16 +29,14 @@ const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }: P
   if (embedData.articleId && data) {
     const typeId = data.resource?.resourceTypes.find((rt) => contentTypeMapping[rt.id])?.id;
     const type = typeId ? contentTypeMapping[typeId] : undefined;
-    const path =
-      data.resource?.paths.find((p) => p.split("/")[1] === subject?.replace("urn:", "")) ??
-      data.resource?.path ??
-      `/article/${embedData.articleId}`;
+    const context = data.resource?.contexts.find((c) => c.rootId === subject);
+    const url = context?.url ?? data.resource?.url ?? `/article/${embedData.articleId}`;
     return (
       <RelatedArticle
         title={data.article.title?.title ?? ""}
         introduction={data.article.metaDescription?.metaDescription ?? ""}
         target={isOembed ? "_blank" : undefined}
-        to={`${ndlaFrontendDomain ?? ""}${path ?? ""}`}
+        to={`${ndlaFrontendDomain ?? ""}${url ?? ""}`}
         type={type}
       />
     );

package/src/FileList/FileList.stories.tsx

@@ -95,7 +95,7 @@ export const DifferentFiles: StoryObj<typeof File> = {
   ),
 };
 
-export const NoHeader: StoryObj<typeof File> = {
+export const JustTheFileItems: StoryObj<typeof File> = {
   render: () => (
     <ul>
       <FileListItem>
@@ -108,7 +108,7 @@ export const NoHeader: StoryObj<typeof File> = {
   ),
 };
 
-export const FilesWithButtons: StoryObj<typeof File> = {
+export const FileItemsWithButtons: StoryObj<typeof File> = {
   render: () => (
     <ul>
       <FileListItem>

package/src/FileList/FileList.tsx

@@ -7,14 +7,12 @@
  */
 
 import { type ComponentPropsWithoutRef } from "react";
-import { useTranslation } from "react-i18next";
 import { ark } from "@ark-ui/react";
-import { Heading } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 
-interface Props extends ComponentPropsWithoutRef<"div"> {}
+interface Props extends ComponentPropsWithoutRef<"ul"> {}
 
-export const FileListWrapper = styled("div", {
+export const FileListWrapper = styled("ul", {
   base: {
     display: "flex",
     flexDirection: "column",
@@ -42,13 +40,9 @@ export const FileListItem = styled(
 );
 
 export const FileListEmbed = ({ children, ...rest }: Props) => {
-  const { t } = useTranslation();
   return (
     <FileListWrapper {...rest} data-embed-type="file-list">
-      <Heading fontWeight="bold" textStyle="heading.small" asChild consumeCss>
-        <h3>{t("files")}</h3>
-      </Heading>
-      <ul>{children}</ul>
+      {children}
     </FileListWrapper>
   );
 };

package/src/LicenseByline/EmbedByline.tsx

@@ -244,8 +244,7 @@ export const LicenseContainerContent = ({ children, copyright, type }: LicenseCo
     <>
       {children}
       {` ${t(`embed.type.${type}`)}${captionAuthors.length ? ": " : ""}`}
-      {/*eslint-disable-next-line react/no-unknown-property */}
-      <span property="cc:attributionName">{captionAuthors.map((author) => author.name).join(", ")}</span>
+      <span>{captionAuthors.map((author) => author.name).join(", ")}</span>
       {license ? (
         <>
           {" / "}