@ndla/ui 56.0.27-alpha.0 → 56.0.29-alpha.0

package/dist/panda.buildinfo.json

@@ -65,6 +65,7 @@
       "maxWidth]___[value:surface.xlarge",
       "whiteSpace]___[value:pre-wrap]___[cond:& span > *",
       "alignSelf]___[value:flex-start",
+      "marginInlineStart]___[value:3xsmall",
       "borderBottomRadius]___[value:xsmall",
       "justifyContent]___[value:center",
       "paddingInline]___[value:medium",
@@ -244,8 +245,6 @@
       "width]___[value:surface.xlarge",
       "maxHeight]___[value:50vh",
       "overflowY]___[value:auto",
-      "display]___[value:block]___[cond:& li",
-      "color]___[value:text.error",
       "backgroundColor]___[value:surface.disabled",
       "fill]___[value:text.subtle]___[cond:& svg",
       "height]___[value:90%]___[cond:& svg",
@@ -304,14 +303,17 @@
       "marginBlock]___[value:xxlarge",
       "marginTop]___[value:3xsmall",
       "marginLeft]___[value:3xsmall",
-      "transitionProperty]___[value:max-height",
+      "gridTemplateRows]___[value:0fr",
+      "transitionProperty]___[value:grid-template-rows",
       "transitionDuration]___[value:slow",
       "transitionTimingFunction]___[value:ease-in-out",
-      "maxHeight]___[value:surface.xxsmall",
+      "justifyItems]___[value:center",
       "clear]___[value:both",
+      "gridTemplateRows]___[value:1fr]___[cond:_open",
       "overflow]___[value:visible]___[cond:_closed<___>_print",
       "maxHeight]___[value:500vh]___[cond:_closed<___>_print",
-      "maxHeight]___[value:500vh]___[cond:_open",
+      "minHeight]___[value:surface.3xsmall]___[cond:& > div",
+      "overflow]___[value:hidden]___[cond:& > div",
       "marginBlockStart]___[value:0]___[cond:& :first-child",
       "content]___[value:\"\"]___[cond:_after",
       "textAlign]___[value:center]___[cond:_after",
@@ -409,6 +411,7 @@
       "transitionProperty]___[value:max-height]___[cond:mobileWideDown",
       "transitionDuration]___[value:slow]___[cond:mobileWideDown",
       "transitionTimingFunction]___[value:ease-in]___[cond:mobileWideDown",
+      "marginInlineEnd]___[value:4xsmall]___[cond:mobileWideDown",
       "whiteSpace]___[value:pre-wrap]___[cond:mobileWideDown<___>_open",
       "maxHeight]___[value:none]___[cond:mobileWideDown<___>_open",
       "display]___[value:none]___[cond:mobileWide",

package/dist/styles.css

@@ -210,6 +210,10 @@
     max-width: var(--sizes-surface-xlarge);
 }
 
+  .ms_3xsmall {
+    margin-inline-start: var(--spacing-3xsmall);
+}
+
   .bdr-b_xsmall {
     border-bottom-left-radius: var(--radii-xsmall);
     border-bottom-right-radius: var(--radii-xsmall);
@@ -463,10 +467,6 @@
     max-height: 50vh;
 }
 
-  .c_text\.error {
-    color: var(--colors-text-error);
-}
-
   .p_0 {
     padding: 0;
 }
@@ -511,10 +511,6 @@
     margin-block: var(--spacing-xxlarge);
 }
 
-  .max-h_surface\.xxsmall {
-    max-height: var(--sizes-surface-xxsmall);
-}
-
   .clear_both {
     clear: both;
 }
@@ -793,9 +789,13 @@
     margin-left: var(--spacing-3xsmall);
 }
 
-  .trs-prop_max-height {
-    --transition-prop: max-height;
-    transition-property: max-height;
+  .grid-tr_0fr {
+    grid-template-rows: 0fr;
+}
+
+  .trs-prop_grid-template-rows {
+    --transition-prop: grid-template-rows;
+    transition-property: grid-template-rows;
 }
 
   .trs-dur_slow {
@@ -808,6 +808,10 @@
     transition-timing-function: ease-in-out;
 }
 
+  .justify-items_center {
+    justify-items: center;
+}
+
   .bottom_-medium {
     bottom: calc(var(--spacing-medium) * -1);
 }
@@ -1048,10 +1052,6 @@
     margin-block-start: var(--spacing-xsmall);
 }
 
-  .\[\&_li\]\:d_block li {
-    display: block;
-}
-
   .\[\&_svg\]\:fill_text\.subtle svg {
     fill: var(--colors-text-subtle);
 }
@@ -1092,8 +1092,12 @@
     color: var(--colors-text-strong);
 }
 
-  .open\:max-h_500vh:is([open], [data-open], [data-state="open"]) {
-    max-height: 500vh;
+  .\[\&_\>_div\]\:min-h_surface\.3xsmall > div {
+    min-height: var(--sizes-surface-3xsmall);
+}
+
+  .\[\&_\>_div\]\:ov_hidden > div {
+    overflow: hidden;
 }
 
   .\[\&_\:first-child\]\:mbs_0 :first-child {
@@ -1246,6 +1250,10 @@
     margin-top: 0;
 }
 
+  .open\:grid-tr_1fr:is([open], [data-open], [data-state="open"]) {
+    grid-template-rows: 1fr;
+}
+
   .after\:content_\"\"::after {
     content: "";
 }
@@ -1725,6 +1733,9 @@
 }
     .mobileWideDown\:tov_ellipsis {
       text-overflow: ellipsis;
+}
+    .mobileWideDown\:me_4xsmall {
+      margin-inline-end: var(--spacing-4xsmall);
 }
     .mobileWideDown\:cg_3xsmall {
       column-gap: var(--spacing-3xsmall);

package/es/AudioPlayer/AudioPlayer.js

@@ -114,6 +114,11 @@ const TextVersionButton = styled(Button, {
     alignSelf: "flex-start"
   }
 });
+const ShowMoreButton = styled(Button, {
+  base: {
+    marginInlineStart: "3xsmall"
+  }
+});
 const DESCRIPTION_MAX_LENGTH = 200;
 const AudioPlayer = _ref => {
   let {
@@ -174,7 +179,7 @@ const AudioPlayer = _ref => {
           }), !!textVersion && !img && textVersionButton]
         }), description && /*#__PURE__*/_jsxs(Text, {
           textStyle: "body.medium",
-          children: [showFullDescription || description.length < DESCRIPTION_MAX_LENGTH ? description : `${truncatedDescription}...`, description.length > DESCRIPTION_MAX_LENGTH && /*#__PURE__*/_jsx(Button, {
+          children: [showFullDescription || description.length < DESCRIPTION_MAX_LENGTH ? description : `${truncatedDescription}...`, description.length > DESCRIPTION_MAX_LENGTH && /*#__PURE__*/_jsx(ShowMoreButton, {
             variant: "link",
             onClick: () => setShowFullDescription(p => !p),
             children: t(`audio.${showFullDescription ? "readLessDescriptionLabel" : "readMoreDescriptionLabel"}`)

package/es/Concept/Concept.js

@@ -29,9 +29,6 @@ const ContentWrapper = styled("div", {
     }
   }
 });
-
-// TODO: Figure out if we need to support headerButtons.
-
 export const Concept = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     copyright,

package/es/Embed/ImageEmbed.js

@@ -201,8 +201,6 @@ const ImageEmbed = _ref => {
   };
   const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);
   const figureSize = figureProps?.float ? figureProps?.size ?? "medium" : "full";
-
-  // TODO: Check how this works with `children`. Will only be important for ED
   return /*#__PURE__*/_jsxs(StyledFigure, {
     float: figureProps?.float,
     size: imageSizes ? "full" : figureSize,

package/es/Embed/index.js

@@ -17,7 +17,6 @@ export { default as BrightcoveEmbed } from "./BrightcoveEmbed";
 export { default as ContentLinkEmbed } from "./ContentLinkEmbed";
 export { default as RelatedContentEmbed } from "./RelatedContentEmbed";
 export { ConceptEmbed, InlineConcept, BlockConcept } from "./ConceptEmbed";
-export { default as ConceptListEmbed } from "./ConceptListEmbed";
 export { default as UnknownEmbed } from "./UnknownEmbed";
 export { default as UuDisclaimerEmbed } from "./UuDisclaimerEmbed";
 export { default as CopyrightEmbed } from "./CopyrightEmbed";

package/es/FactBox/FactBox.js

@@ -14,27 +14,30 @@ import { styled } from "@ndla/styled-system/jsx";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StyledAside = styled("aside", {
   base: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
     position: "relative",
     padding: "medium",
-    transitionProperty: "max-height",
+    display: "grid",
+    gridTemplateRows: "0fr",
+    transitionProperty: "grid-template-rows",
     transitionDuration: "slow",
     transitionTimingFunction: "ease-in-out",
+    justifyItems: "center",
     border: "1px solid",
     borderColor: "stroke.default",
     borderRadius: "xsmall",
-    maxHeight: "surface.xxsmall",
     clear: "both",
+    _open: {
+      gridTemplateRows: "1fr"
+    },
     _closed: {
       _print: {
         overflow: "visible",
         maxHeight: "500vh"
       }
     },
-    _open: {
-      maxHeight: "500vh"
+    "& > div": {
+      minHeight: "surface.3xsmall",
+      overflow: "hidden"
     }
   }
 });

package/es/LicenseByline/EmbedByline.js

@@ -127,6 +127,7 @@ const TextContent = styled("span", {
       transitionProperty: "max-height",
       transitionDuration: "slow",
       transitionTimingFunction: "ease-in",
+      marginInlineEnd: "4xsmall",
       _open: {
         whiteSpace: "pre-wrap",
         maxHeight: "none"

package/es/RelatedArticleList/RelatedArticleList.js

@@ -8,6 +8,7 @@
 
 import { Children, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { ExternalLinkLine } from "@ndla/icons/common";
 import { CardContent, CardHeading, CardRoot, Text, Heading, Button } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
@@ -15,6 +16,12 @@ import { linkOverlay } from "@ndla/styled-system/patterns";
 import { ContentTypeBadge } from "../ContentTypeBadge/ContentTypeBadgeNew";
 import { contentTypes } from "../model/ContentType";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledSpan = styled("span", {
+  base: {
+    display: "flex",
+    gap: "3xsmall"
+  }
+});
 export const RelatedArticle = _ref => {
   let {
     title,
@@ -39,7 +46,9 @@ export const RelatedArticle = _ref => {
             target: target,
             rel: linkInfo ? "noopener noreferrer" : undefined,
             css: linkOverlay.raw(),
-            children: title
+            children: /*#__PURE__*/_jsxs(StyledSpan, {
+              children: [title, target === "_blank" && /*#__PURE__*/_jsx(ExternalLinkLine, {})]
+            })
           })
         })
       }), /*#__PURE__*/_jsx(Text, {

package/es/index.js

@@ -10,7 +10,7 @@
 // Move components to this file when they are migrated to typescript
 
 export { Concept } from "./Concept/Concept";
-export { ImageEmbed, getCrop, getFocalPoint, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed, InlineConcept, BlockConcept, UuDisclaimerEmbed, CopyrightEmbed, CodeEmbed, InlineTriggerButton } from "./Embed";
+export { ImageEmbed, getCrop, getFocalPoint, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, UnknownEmbed, InlineConcept, BlockConcept, UuDisclaimerEmbed, CopyrightEmbed, CodeEmbed, InlineTriggerButton } from "./Embed";
 export { LicenseLink, EmbedByline } from "./LicenseByline";
 export { ArticleByline, ArticleBylineAccordionItem, ArticleFootNotes, ArticleWrapper, Article, ArticleFooter, ArticleHeader, ArticleContent, ArticleHGroup, ArticleTitle } from "./Article";
 export { getPossiblyRelativeUrl } from "./utils/relativeUrl";

package/es/styles.css

@@ -210,6 +210,10 @@
     max-width: var(--sizes-surface-xlarge);
 }
 
+  .ms_3xsmall {
+    margin-inline-start: var(--spacing-3xsmall);
+}
+
   .bdr-b_xsmall {
     border-bottom-left-radius: var(--radii-xsmall);
     border-bottom-right-radius: var(--radii-xsmall);
@@ -463,10 +467,6 @@
     max-height: 50vh;
 }
 
-  .c_text\.error {
-    color: var(--colors-text-error);
-}
-
   .p_0 {
     padding: 0;
 }
@@ -511,10 +511,6 @@
     margin-block: var(--spacing-xxlarge);
 }
 
-  .max-h_surface\.xxsmall {
-    max-height: var(--sizes-surface-xxsmall);
-}
-
   .clear_both {
     clear: both;
 }
@@ -793,9 +789,13 @@
     margin-left: var(--spacing-3xsmall);
 }
 
-  .trs-prop_max-height {
-    --transition-prop: max-height;
-    transition-property: max-height;
+  .grid-tr_0fr {
+    grid-template-rows: 0fr;
+}
+
+  .trs-prop_grid-template-rows {
+    --transition-prop: grid-template-rows;
+    transition-property: grid-template-rows;
 }
 
   .trs-dur_slow {
@@ -808,6 +808,10 @@
     transition-timing-function: ease-in-out;
 }
 
+  .justify-items_center {
+    justify-items: center;
+}
+
   .bottom_-medium {
     bottom: calc(var(--spacing-medium) * -1);
 }
@@ -1048,10 +1052,6 @@
     margin-block-start: var(--spacing-xsmall);
 }
 
-  .\[\&_li\]\:d_block li {
-    display: block;
-}
-
   .\[\&_svg\]\:fill_text\.subtle svg {
     fill: var(--colors-text-subtle);
 }
@@ -1092,8 +1092,12 @@
     color: var(--colors-text-strong);
 }
 
-  .open\:max-h_500vh:is([open], [data-open], [data-state="open"]) {
-    max-height: 500vh;
+  .\[\&_\>_div\]\:min-h_surface\.3xsmall > div {
+    min-height: var(--sizes-surface-3xsmall);
+}
+
+  .\[\&_\>_div\]\:ov_hidden > div {
+    overflow: hidden;
 }
 
   .\[\&_\:first-child\]\:mbs_0 :first-child {
@@ -1246,6 +1250,10 @@
     margin-top: 0;
 }
 
+  .open\:grid-tr_1fr:is([open], [data-open], [data-state="open"]) {
+    grid-template-rows: 1fr;
+}
+
   .after\:content_\"\"::after {
     content: "";
 }
@@ -1725,6 +1733,9 @@
 }
     .mobileWideDown\:tov_ellipsis {
       text-overflow: ellipsis;
+}
+    .mobileWideDown\:me_4xsmall {
+      margin-inline-end: var(--spacing-4xsmall);
 }
     .mobileWideDown\:cg_3xsmall {
       column-gap: var(--spacing-3xsmall);

package/lib/AudioPlayer/AudioPlayer.js

@@ -120,6 +120,11 @@ const TextVersionButton = (0, _jsx2.styled)(_primitives.Button, {
     alignSelf: "flex-start"
   }
 });
+const ShowMoreButton = (0, _jsx2.styled)(_primitives.Button, {
+  base: {
+    marginInlineStart: "3xsmall"
+  }
+});
 const DESCRIPTION_MAX_LENGTH = 200;
 const AudioPlayer = _ref => {
   let {
@@ -180,7 +185,7 @@ const AudioPlayer = _ref => {
           }), !!textVersion && !img && textVersionButton]
         }), description && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.Text, {
           textStyle: "body.medium",
-          children: [showFullDescription || description.length < DESCRIPTION_MAX_LENGTH ? description : `${truncatedDescription}...`, description.length > DESCRIPTION_MAX_LENGTH && /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Button, {
+          children: [showFullDescription || description.length < DESCRIPTION_MAX_LENGTH ? description : `${truncatedDescription}...`, description.length > DESCRIPTION_MAX_LENGTH && /*#__PURE__*/(0, _jsxRuntime.jsx)(ShowMoreButton, {
             variant: "link",
             onClick: () => setShowFullDescription(p => !p),
             children: t(`audio.${showFullDescription ? "readLessDescriptionLabel" : "readMoreDescriptionLabel"}`)

package/lib/Concept/Concept.js

@@ -35,9 +35,6 @@ const ContentWrapper = (0, _jsx2.styled)("div", {
     }
   }
 });
-
-// TODO: Figure out if we need to support headerButtons.
-
 const Concept = exports.Concept = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     copyright,

package/lib/Embed/ImageEmbed.js

@@ -211,8 +211,6 @@ const ImageEmbed = _ref => {
   };
   const licenseProps = (0, _licenseAttributes.licenseAttributes)(data.copyright.license.license, lang, embedData.url);
   const figureSize = figureProps?.float ? figureProps?.size ?? "medium" : "full";
-
-  // TODO: Check how this works with `children`. Will only be important for ED
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledFigure, {
     float: figureProps?.float,
     size: imageSizes ? "full" : figureSize,

package/lib/Embed/index.d.ts

@@ -17,7 +17,6 @@ export { default as ContentLinkEmbed } from "./ContentLinkEmbed";
 export { default as RelatedContentEmbed } from "./RelatedContentEmbed";
 export { ConceptEmbed, InlineConcept, BlockConcept } from "./ConceptEmbed";
 export type { InlineConceptProps, BlockConceptProps } from "./ConceptEmbed";
-export { default as ConceptListEmbed } from "./ConceptListEmbed";
 export { default as UnknownEmbed } from "./UnknownEmbed";
 export { default as UuDisclaimerEmbed } from "./UuDisclaimerEmbed";
 export { default as CopyrightEmbed } from "./CopyrightEmbed";

package/lib/Embed/index.js

@@ -33,12 +33,6 @@ Object.defineProperty(exports, "ConceptEmbed", {
     return _ConceptEmbed.ConceptEmbed;
   }
 });
-Object.defineProperty(exports, "ConceptListEmbed", {
-  enumerable: true,
-  get: function () {
-    return _ConceptListEmbed.default;
-  }
-});
 Object.defineProperty(exports, "ContentLinkEmbed", {
   enumerable: true,
   get: function () {
@@ -134,7 +128,6 @@ var _BrightcoveEmbed = _interopRequireDefault(require("./BrightcoveEmbed"));
 var _ContentLinkEmbed = _interopRequireDefault(require("./ContentLinkEmbed"));
 var _RelatedContentEmbed = _interopRequireDefault(require("./RelatedContentEmbed"));
 var _ConceptEmbed = require("./ConceptEmbed");
-var _ConceptListEmbed = _interopRequireDefault(require("./ConceptListEmbed"));
 var _UnknownEmbed = _interopRequireDefault(require("./UnknownEmbed"));
 var _UuDisclaimerEmbed = _interopRequireDefault(require("./UuDisclaimerEmbed"));
 var _CopyrightEmbed = _interopRequireDefault(require("./CopyrightEmbed"));

package/lib/FactBox/FactBox.js

@@ -20,27 +20,30 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const StyledAside = (0, _jsx2.styled)("aside", {
   base: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
     position: "relative",
     padding: "medium",
-    transitionProperty: "max-height",
+    display: "grid",
+    gridTemplateRows: "0fr",
+    transitionProperty: "grid-template-rows",
     transitionDuration: "slow",
     transitionTimingFunction: "ease-in-out",
+    justifyItems: "center",
     border: "1px solid",
     borderColor: "stroke.default",
     borderRadius: "xsmall",
-    maxHeight: "surface.xxsmall",
     clear: "both",
+    _open: {
+      gridTemplateRows: "1fr"
+    },
     _closed: {
       _print: {
         overflow: "visible",
         maxHeight: "500vh"
       }
     },
-    _open: {
-      maxHeight: "500vh"
+    "& > div": {
+      minHeight: "surface.3xsmall",
+      overflow: "hidden"
     }
   }
 });

package/lib/LicenseByline/EmbedByline.js

@@ -134,6 +134,7 @@ const TextContent = (0, _jsx2.styled)("span", {
       transitionProperty: "max-height",
       transitionDuration: "slow",
       transitionTimingFunction: "ease-in",
+      marginInlineEnd: "4xsmall",
       _open: {
         whiteSpace: "pre-wrap",
         maxHeight: "none"

package/lib/RelatedArticleList/RelatedArticleList.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.RelatedArticleList = exports.RelatedArticle = void 0;
 var _react = require("react");
 var _reactI18next = require("react-i18next");
+var _common = require("@ndla/icons/common");
 var _primitives = require("@ndla/primitives");
 var _safelink = require("@ndla/safelink");
 var _jsx2 = require("@ndla/styled-system/jsx");
@@ -21,6 +22,12 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
+const StyledSpan = (0, _jsx2.styled)("span", {
+  base: {
+    display: "flex",
+    gap: "3xsmall"
+  }
+});
 const RelatedArticle = _ref => {
   let {
     title,
@@ -45,7 +52,9 @@ const RelatedArticle = _ref => {
             target: target,
             rel: linkInfo ? "noopener noreferrer" : undefined,
             css: _patterns.linkOverlay.raw(),
-            children: title
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledSpan, {
+              children: [title, target === "_blank" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.ExternalLinkLine, {})]
+            })
           })
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {

package/lib/index.d.ts

@@ -6,7 +6,7 @@
  *
  */
 export { Concept } from "./Concept/Concept";
-export { ImageEmbed, getCrop, getFocalPoint, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed, InlineConcept, BlockConcept, UuDisclaimerEmbed, CopyrightEmbed, CodeEmbed, InlineTriggerButton, } from "./Embed";
+export { ImageEmbed, getCrop, getFocalPoint, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, UnknownEmbed, InlineConcept, BlockConcept, UuDisclaimerEmbed, CopyrightEmbed, CodeEmbed, InlineTriggerButton, } from "./Embed";
 export { LicenseLink, EmbedByline } from "./LicenseByline";
 export { ArticleByline, ArticleBylineAccordionItem, ArticleFootNotes, ArticleWrapper, Article, ArticleFooter, ArticleHeader, ArticleContent, ArticleHGroup, ArticleTitle, } from "./Article";
 export { getPossiblyRelativeUrl } from "./utils/relativeUrl";

package/lib/index.js

@@ -141,12 +141,6 @@ Object.defineProperty(exports, "ConceptEmbed", {
     return _Embed.ConceptEmbed;
   }
 });
-Object.defineProperty(exports, "ConceptListEmbed", {
-  enumerable: true,
-  get: function () {
-    return _Embed.ConceptListEmbed;
-  }
-});
 Object.defineProperty(exports, "ContactBlock", {
   enumerable: true,
   get: function () {

package/lib/styles.css

@@ -210,6 +210,10 @@
     max-width: var(--sizes-surface-xlarge);
 }
 
+  .ms_3xsmall {
+    margin-inline-start: var(--spacing-3xsmall);
+}
+
   .bdr-b_xsmall {
     border-bottom-left-radius: var(--radii-xsmall);
     border-bottom-right-radius: var(--radii-xsmall);
@@ -463,10 +467,6 @@
     max-height: 50vh;
 }
 
-  .c_text\.error {
-    color: var(--colors-text-error);
-}
-
   .p_0 {
     padding: 0;
 }
@@ -511,10 +511,6 @@
     margin-block: var(--spacing-xxlarge);
 }
 
-  .max-h_surface\.xxsmall {
-    max-height: var(--sizes-surface-xxsmall);
-}
-
   .clear_both {
     clear: both;
 }
@@ -793,9 +789,13 @@
     margin-left: var(--spacing-3xsmall);
 }
 
-  .trs-prop_max-height {
-    --transition-prop: max-height;
-    transition-property: max-height;
+  .grid-tr_0fr {
+    grid-template-rows: 0fr;
+}
+
+  .trs-prop_grid-template-rows {
+    --transition-prop: grid-template-rows;
+    transition-property: grid-template-rows;
 }
 
   .trs-dur_slow {
@@ -808,6 +808,10 @@
     transition-timing-function: ease-in-out;
 }
 
+  .justify-items_center {
+    justify-items: center;
+}
+
   .bottom_-medium {
     bottom: calc(var(--spacing-medium) * -1);
 }
@@ -1048,10 +1052,6 @@
     margin-block-start: var(--spacing-xsmall);
 }
 
-  .\[\&_li\]\:d_block li {
-    display: block;
-}
-
   .\[\&_svg\]\:fill_text\.subtle svg {
     fill: var(--colors-text-subtle);
 }
@@ -1092,8 +1092,12 @@
     color: var(--colors-text-strong);
 }
 
-  .open\:max-h_500vh:is([open], [data-open], [data-state="open"]) {
-    max-height: 500vh;
+  .\[\&_\>_div\]\:min-h_surface\.3xsmall > div {
+    min-height: var(--sizes-surface-3xsmall);
+}
+
+  .\[\&_\>_div\]\:ov_hidden > div {
+    overflow: hidden;
 }
 
   .\[\&_\:first-child\]\:mbs_0 :first-child {
@@ -1246,6 +1250,10 @@
     margin-top: 0;
 }
 
+  .open\:grid-tr_1fr:is([open], [data-open], [data-state="open"]) {
+    grid-template-rows: 1fr;
+}
+
   .after\:content_\"\"::after {
     content: "";
 }
@@ -1725,6 +1733,9 @@
 }
     .mobileWideDown\:tov_ellipsis {
       text-overflow: ellipsis;
+}
+    .mobileWideDown\:me_4xsmall {
+      margin-inline-end: var(--spacing-4xsmall);
 }
     .mobileWideDown\:cg_3xsmall {
       column-gap: var(--spacing-3xsmall);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.27-alpha.0",
+  "version": "56.0.29-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -34,18 +34,16 @@
   ],
   "dependencies": {
     "@ndla/core": "^5.0.2",
-    "@ndla/icons": "^8.0.18-alpha.0",
+    "@ndla/icons": "^8.0.20-alpha.0",
     "@ndla/licenses": "^8.0.3-alpha.0",
-    "@ndla/primitives": "^1.0.24-alpha.0",
-    "@ndla/safelink": "^7.0.24-alpha.0",
-    "@ndla/styled-system": "^0.0.20",
+    "@ndla/primitives": "^1.0.26-alpha.0",
+    "@ndla/safelink": "^7.0.26-alpha.0",
+    "@ndla/styled-system": "^0.0.22",
     "@ndla/util": "^4.1.0",
     "html-react-parser": "^5.1.8",
     "i18next-browser-languagedetector": "^7.1.0"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
     "i18next": "^23.11.5",
     "react": ">= 18",
     "react-dom": ">= 18",
@@ -53,9 +51,9 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.28",
+    "@ndla/preset-panda": "^0.0.30",
     "@ndla/types-backend": "^0.2.86",
-    "@ndla/types-embed": "^5.0.1-alpha.0",
+    "@ndla/types-embed": "^5.0.2-alpha.0",
     "@pandacss/dev": "^0.46.0",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
@@ -66,5 +64,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "45c12a953606ca3eb14c8d09c25401c8bc24ed22"
+  "gitHead": "92e263c72d707da94f33fb1aae9ea8e586b29b6e"
 }

package/src/AudioPlayer/AudioPlayer.tsx

@@ -122,6 +122,12 @@ const TextVersionButton = styled(Button, {
   },
 });
 
+const ShowMoreButton = styled(Button, {
+  base: {
+    marginInlineStart: "3xsmall",
+  },
+});
+
 const DESCRIPTION_MAX_LENGTH = 200;
 
 type Props = {
@@ -191,9 +197,9 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
                 ? description
                 : `${truncatedDescription}...`}
               {description.length > DESCRIPTION_MAX_LENGTH && (
-                <Button variant="link" onClick={() => setShowFullDescription((p) => !p)}>
+                <ShowMoreButton variant="link" onClick={() => setShowFullDescription((p) => !p)}>
                   {t(`audio.${showFullDescription ? "readLessDescriptionLabel" : "readMoreDescriptionLabel"}`)}
-                </Button>
+                </ShowMoreButton>
               )}
             </Text>
           )}

package/src/Concept/Concept.tsx

@@ -43,8 +43,6 @@ const ContentWrapper = styled("div", {
   },
 });
 
-// TODO: Figure out if we need to support headerButtons.
-
 export const Concept = forwardRef<HTMLElement, ConceptProps>(
   ({ copyright, visualElement, lang, children, title, source, previewAlt, ...rest }, ref) => {
     const licenseProps = licenseAttributes(copyright?.license?.license, lang, source);

package/src/Embed/ImageEmbed.tsx

@@ -226,7 +226,6 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
 
   const figureSize = figureProps?.float ? figureProps?.size ?? "medium" : "full";
 
-  // TODO: Check how this works with `children`. Will only be important for ED
   return (
     <StyledFigure
       float={figureProps?.float}

package/src/Embed/RelatedContentEmbed.stories.tsx

@@ -386,6 +386,7 @@ const linkEmbed1: RelatedContentMetaData = {
     resource: "related-content",
     title: "Test",
     url: "https://example.com",
+    urlDomain: "example.com",
   },
   data: undefined,
   status: "success",
@@ -397,6 +398,7 @@ const linkEmbed2: RelatedContentMetaData = {
     resource: "related-content",
     title: "NDLA",
     url: "https://ndla.no",
+    urlDomain: "ndla.no",
   },
   data: undefined,
   status: "success",
@@ -408,6 +410,7 @@ const linkEmbed3: RelatedContentMetaData = {
     resource: "related-content",
     title: "Valg av tillitselev fra klassen",
     url: "https://xn--elevrd-mua.no",
+    urlDomain: "elevråd.no",
   },
   data: undefined,
   status: "success",

package/src/Embed/RelatedContentEmbed.tsx

@@ -50,7 +50,7 @@ const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }: P
         introduction=""
         to={embedData.url}
         target="_blank"
-        type={"external"}
+        type="external"
         linkInfo={`${t("related.linkInfo")} ${embedData.urlDomain}`}
       />
     );

package/src/Embed/index.ts

@@ -18,7 +18,6 @@ export { default as ContentLinkEmbed } from "./ContentLinkEmbed";
 export { default as RelatedContentEmbed } from "./RelatedContentEmbed";
 export { ConceptEmbed, InlineConcept, BlockConcept } from "./ConceptEmbed";
 export type { InlineConceptProps, BlockConceptProps } from "./ConceptEmbed";
-export { default as ConceptListEmbed } from "./ConceptListEmbed";
 export { default as UnknownEmbed } from "./UnknownEmbed";
 export { default as UuDisclaimerEmbed } from "./UuDisclaimerEmbed";
 export { default as CopyrightEmbed } from "./CopyrightEmbed";

package/src/FactBox/FactBox.tsx

@@ -21,27 +21,30 @@ interface Props extends ComponentProps<"aside"> {
 
 const StyledAside = styled("aside", {
   base: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
     position: "relative",
     padding: "medium",
-    transitionProperty: "max-height",
+    display: "grid",
+    gridTemplateRows: "0fr",
+    transitionProperty: "grid-template-rows",
     transitionDuration: "slow",
     transitionTimingFunction: "ease-in-out",
+    justifyItems: "center",
     border: "1px solid",
     borderColor: "stroke.default",
     borderRadius: "xsmall",
-    maxHeight: "surface.xxsmall",
     clear: "both",
+    _open: {
+      gridTemplateRows: "1fr",
+    },
     _closed: {
       _print: {
         overflow: "visible",
         maxHeight: "500vh",
       },
     },
-    _open: {
-      maxHeight: "500vh",
+    "& > div": {
+      minHeight: "surface.3xsmall",
+      overflow: "hidden",
     },
   },
 });

package/src/LicenseByline/EmbedByline.tsx

@@ -197,6 +197,7 @@ const TextContent = styled("span", {
       transitionProperty: "max-height",
       transitionDuration: "slow",
       transitionTimingFunction: "ease-in",
+      marginInlineEnd: "4xsmall",
       _open: {
         whiteSpace: "pre-wrap",
         maxHeight: "none",

package/src/RelatedArticleList/RelatedArticleList.tsx

@@ -8,6 +8,7 @@
 
 import { Children, ComponentPropsWithoutRef, ReactNode, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { ExternalLinkLine } from "@ndla/icons/common";
 import { CardContent, CardHeading, CardRoot, Text, Heading, Button } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
@@ -25,6 +26,13 @@ interface RelatedArticleProps {
   type?: string;
 }
 
+const StyledSpan = styled("span", {
+  base: {
+    display: "flex",
+    gap: "3xsmall",
+  },
+});
+
 export const RelatedArticle = ({
   title,
   introduction,
@@ -46,7 +54,10 @@ export const RelatedArticle = ({
               rel={linkInfo ? "noopener noreferrer" : undefined}
               css={linkOverlay.raw()}
             >
-              {title}
+              <StyledSpan>
+                {title}
+                {target === "_blank" && <ExternalLinkLine />}
+              </StyledSpan>
             </SafeLink>
           </span>
         </CardHeading>

package/src/index.ts

@@ -24,7 +24,6 @@ export {
   ContentLinkEmbed,
   RelatedContentEmbed,
   ConceptEmbed,
-  ConceptListEmbed,
   UnknownEmbed,
   InlineConcept,
   BlockConcept,

package/es/Embed/ConceptListEmbed.js

@@ -1,76 +0,0 @@
-/**
- * Copyright (c) 2023-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 { useTranslation } from "react-i18next";
-import { Figure } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import { BlockConcept } from "./ConceptEmbed";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// TODO: Find out if we're actually still going to use this.
-// If we are, we need to re-add some margin between the list items. We should also probably parse the concept content to HTML, like we do in ConceptEmbed.
-
-const ConceptList = styled("div", {
-  base: {
-    "& li": {
-      display: "block"
-    }
-  }
-});
-const StyledSpan = styled("span", {
-  base: {
-    color: "text.error"
-  }
-});
-const ConceptListEmbed = _ref => {
-  let {
-    embed,
-    lang
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  if (embed.status === "error") {
-    return /*#__PURE__*/_jsx(StyledSpan, {
-      children: t("embed.conceptListError")
-    });
-  }
-  const {
-    embedData,
-    data
-  } = embed;
-  return /*#__PURE__*/_jsx("div", {
-    "data-embed-type": "concept-list",
-    children: /*#__PURE__*/_jsxs(Figure, {
-      children: [embedData.title && /*#__PURE__*/_jsx("h2", {
-        lang: lang,
-        children: embedData.title
-      }), /*#__PURE__*/_jsx(ConceptList, {
-        children: /*#__PURE__*/_jsx("ul", {
-          lang: lang,
-          children: data.concepts.map(_ref2 => {
-            let {
-              concept,
-              visualElement
-            } = _ref2;
-            return /*#__PURE__*/_jsx("li", {
-              children: /*#__PURE__*/_jsx(BlockConcept, {
-                title: concept.title.title,
-                content: concept.content.content,
-                copyright: concept.copyright,
-                visualElement: visualElement,
-                lang: lang,
-                source: concept.source
-              })
-            }, concept.id);
-          })
-        })
-      })]
-    })
-  });
-};
-export default ConceptListEmbed;

package/lib/Embed/ConceptListEmbed.d.ts

@@ -1,14 +0,0 @@
-/**
- * Copyright (c) 2023-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 { ConceptListMetaData } from "@ndla/types-embed";
-interface Props {
-    embed: ConceptListMetaData;
-    lang?: string;
-}
-declare const ConceptListEmbed: ({ embed, lang }: Props) => import("react/jsx-runtime").JSX.Element;
-export default ConceptListEmbed;

package/lib/Embed/ConceptListEmbed.js

@@ -1,82 +0,0 @@
-"use strict";
-
-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 _ConceptEmbed = require("./ConceptEmbed");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Copyright (c) 2023-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-// TODO: Find out if we're actually still going to use this.
-// If we are, we need to re-add some margin between the list items. We should also probably parse the concept content to HTML, like we do in ConceptEmbed.
-
-const ConceptList = (0, _jsx2.styled)("div", {
-  base: {
-    "& li": {
-      display: "block"
-    }
-  }
-});
-const StyledSpan = (0, _jsx2.styled)("span", {
-  base: {
-    color: "text.error"
-  }
-});
-const ConceptListEmbed = _ref => {
-  let {
-    embed,
-    lang
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  if (embed.status === "error") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSpan, {
-      children: t("embed.conceptListError")
-    });
-  }
-  const {
-    embedData,
-    data
-  } = embed;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    "data-embed-type": "concept-list",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.Figure, {
-      children: [embedData.title && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-        lang: lang,
-        children: embedData.title
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ConceptList, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-          lang: lang,
-          children: data.concepts.map(_ref2 => {
-            let {
-              concept,
-              visualElement
-            } = _ref2;
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConceptEmbed.BlockConcept, {
-                title: concept.title.title,
-                content: concept.content.content,
-                copyright: concept.copyright,
-                visualElement: visualElement,
-                lang: lang,
-                source: concept.source
-              })
-            }, concept.id);
-          })
-        })
-      })]
-    })
-  });
-};
-var _default = exports.default = ConceptListEmbed;

package/src/Embed/ConceptListEmbed.tsx

@@ -1,68 +0,0 @@
-/**
- * Copyright (c) 2023-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 { useTranslation } from "react-i18next";
-import { Figure } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import { ConceptListMetaData } from "@ndla/types-embed";
-import { BlockConcept } from "./ConceptEmbed";
-
-interface Props {
-  embed: ConceptListMetaData;
-  lang?: string;
-}
-
-// TODO: Find out if we're actually still going to use this.
-// If we are, we need to re-add some margin between the list items. We should also probably parse the concept content to HTML, like we do in ConceptEmbed.
-
-const ConceptList = styled("div", {
-  base: {
-    "& li": {
-      display: "block",
-    },
-  },
-});
-
-const StyledSpan = styled("span", {
-  base: {
-    color: "text.error",
-  },
-});
-
-const ConceptListEmbed = ({ embed, lang }: Props) => {
-  const { t } = useTranslation();
-  if (embed.status === "error") {
-    return <StyledSpan>{t("embed.conceptListError")}</StyledSpan>;
-  }
-  const { embedData, data } = embed;
-  return (
-    <div data-embed-type="concept-list">
-      <Figure>
-        {embedData.title && <h2 lang={lang}>{embedData.title}</h2>}
-        <ConceptList>
-          <ul lang={lang}>
-            {data.concepts.map(({ concept, visualElement }) => (
-              <li key={concept.id}>
-                <BlockConcept
-                  title={concept.title.title}
-                  content={concept.content.content}
-                  copyright={concept.copyright}
-                  visualElement={visualElement}
-                  lang={lang}
-                  source={concept.source}
-                />
-              </li>
-            ))}
-          </ul>
-        </ConceptList>
-      </Figure>
-    </div>
-  );
-};
-
-export default ConceptListEmbed;