@ndla/ui 56.0.110-alpha.0 → 56.0.112-alpha.0

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/es/Grid/Grid.js

@@ -79,7 +79,8 @@ export const Grid = _ref => {
     columns,
     border,
     children,
-    background = "gray"
+    background = "gray",
+    ...rest
   } = _ref;
   const amountOfColumns = children?.length === 3 ? "3" : columns;
   return /*#__PURE__*/_jsx(GridContainer, {
@@ -87,6 +88,7 @@ export const Grid = _ref => {
     border: border === "none" ? undefined : border,
     columns: amountOfColumns,
     background: background,
+    ...rest,
     children: children
   });
 };

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/lib/Grid/Grid.d.ts

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { type ReactNode } from "react";
-export interface GridProps {
+import { type ComponentProps, type ReactNode } from "react";
+export interface GridProps extends ComponentProps<"div"> {
     columns: "2" | "3" | "4" | "2x2";
     border?: "none" | "lightBlue";
     background?: "transparent" | "white" | "gray";
     children?: ReactNode[];
 }
-export declare const Grid: ({ columns, border, children, background }: GridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Grid: ({ columns, border, children, background, ...rest }: GridProps) => import("react/jsx-runtime").JSX.Element;

package/lib/Grid/Grid.js

@@ -85,7 +85,8 @@ const Grid = _ref => {
     columns,
     border,
     children,
-    background = "gray"
+    background = "gray",
+    ...rest
   } = _ref;
   const amountOfColumns = children?.length === 3 ? "3" : columns;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridContainer, {
@@ -93,6 +94,7 @@ const Grid = _ref => {
     border: border === "none" ? undefined : border,
     columns: amountOfColumns,
     background: background,
+    ...rest,
     children: children
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.110-alpha.0",
+  "version": "56.0.112-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.53-alpha.0",
     "@ndla/licenses": "^9.0.1",
-    "@ndla/primitives": "^1.0.84-alpha.0",
-    "@ndla/safelink": "^7.0.85-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"
@@ -50,12 +50,12 @@
   },
   "devDependencies": {
     "@ndla/preset-panda": "^0.0.52",
-    "@ndla/types-backend": "^1.0.1",
-    "@ndla/types-embed": "^5.0.11-alpha.0",
+    "@ndla/types-backend": "^1.0.39",
+    "@ndla/types-embed": "^5.0.12-alpha.0",
     "@pandacss/dev": "^0.53.3"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "352d4d92fe6170d27fabe400e76c5b9ecd92d7d5"
+  "gitHead": "db91aaa57493b901a25c927167614a9d1518be48"
 }

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/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/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/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"}`)}

package/src/Grid/Grid.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { type ReactNode } from "react";
+import { type ComponentProps, type ReactNode } from "react";
 import { styled } from "@ndla/styled-system/jsx";
 
 const GridContainer = styled("div", {
@@ -63,14 +63,14 @@ const GridContainer = styled("div", {
   },
 });
 
-export interface GridProps {
+export interface GridProps extends ComponentProps<"div"> {
   columns: "2" | "3" | "4" | "2x2";
   border?: "none" | "lightBlue";
   background?: "transparent" | "white" | "gray";
   children?: ReactNode[];
 }
 
-export const Grid = ({ columns, border, children, background = "gray" }: GridProps) => {
+export const Grid = ({ columns, border, children, background = "gray", ...rest }: GridProps) => {
   const amountOfColumns = children?.length === 3 ? "3" : columns;
 
   return (
@@ -79,6 +79,7 @@ export const Grid = ({ columns, border, children, background = "gray" }: GridPro
       border={border === "none" ? undefined : border}
       columns={amountOfColumns}
       background={background}
+      {...rest}
     >
       {children}
     </GridContainer>