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

package/dist/panda.buildinfo.json

@@ -18,6 +18,7 @@
       "overflowWrap]___[value:anywhere]___[cond:& h1",
       "gap]___[value:medium",
       "paddingBlockStart]___[value:xxlarge",
+      "hyphens]___[value:auto",
       "gap]___[value:xxlarge",
       "paddingBlockEnd]___[value:5xlarge]___[cond:& > :is(:last-child)",
       "minHeight]___[value:xxlarge",
@@ -122,20 +123,23 @@
       "textDecoration]___[value:none]___[cond:_hover",
       "textDecoration]___[value:none]___[cond:_focusVisible",
       "display]___[value:none]___[cond:tabletDown",
+      "containerType]___[value:inline-size",
       "display]___[value:grid",
       "gridTemplateColumns]___[value:1fr",
-      "gridTemplateColumns]___[value:minmax(230px, 455px) auto]___[cond:tabletWide",
-      "gridTemplateColumns]___[value:auto minmax(230px, 455px)]___[cond:tabletWide",
+      "gridTemplateColumns]___[value:minmax(230px, 455px) auto]___[cond:@/tablet",
+      "gridTemplateColumns]___[value:minmax(230px, 455px) auto]___[cond:@supports not (container-type: inline-size)<___>tabletWide",
+      "gridTemplateColumns]___[value:auto minmax(230px, 455px)]___[cond:@/tablet",
+      "gridTemplateColumns]___[value:auto minmax(230px, 455px)]___[cond:@supports not (container-type: inline-size)<___>tabletWide",
       "fontWeight]___[value:bold",
       "height]___[value:215px",
-      "height]___[value:265px]___[cond:tablet",
-      "height]___[value:340px]___[cond:tabletWide",
-      "minWidth]___[value:270px",
-      "display]___[value:block]___[cond:tabletWide",
-      "overflow]___[value:hidden]___[cond:tabletWide",
-      "position]___[value:relative]___[cond:tabletWide",
-      "lineClamp]___[value:4]___[cond:tabletWide",
-      "boxOrient]___[value:vertical]___[cond:tabletWide",
+      "height]___[value:340px]___[cond:@/tablet",
+      "height]___[value:265px]___[cond:@supports not (container-type: inline-size)<___>tablet",
+      "height]___[value:340px]___[cond:@supports not (container-type: inline-size)<___>tabletWide",
+      "display]___[value:block]___[cond:tablet",
+      "overflow]___[value:hidden]___[cond:tablet",
+      "position]___[value:relative]___[cond:tablet",
+      "lineClamp]___[value:4]___[cond:tablet",
+      "boxOrient]___[value:vertical]___[cond:tablet",
       "borderLeft]___[value:4px solid",
       "borderLeftColor]___[value:stroke.default",
       "boxSizing]___[value:border-box",
@@ -390,6 +394,7 @@
       "maxWidth]___[value:1024px",
       "minHeight]___[value:100vh",
       "backgroundColor]___[value:#f8f8f8]___[cond:tablet",
+      "color]___[value:text.subtle",
       "borderColor]___[value:stroke.error",
       "background]___[value:surface.dangerSubtle",
       "whiteSpace]___[value:pre-wrap",
@@ -407,7 +412,7 @@
       "whiteSpace]___[value:pre-wrap]___[cond:mobileWideDown<___>_open",
       "maxHeight]___[value:none]___[cond:mobileWideDown<___>_open",
       "display]___[value:none]___[cond:mobileWide",
-      "color]___[value:primary",
+      "color]___[value:text.link",
       "whiteSpace]___[value:nowrap",
       "textDecoration]___[value:none]___[cond:_focusWithin",
       "textDecoration]___[value:underline]___[cond:& h3",

package/dist/styles.css

@@ -117,6 +117,11 @@
     padding-block-start: var(--spacing-xxlarge);
 }
 
+  .hy_auto {
+    hyphens: auto;
+    -webkit-hyphens: auto;
+}
+
   .gap_xxlarge {
     gap: var(--spacing-xxlarge);
 }
@@ -334,6 +339,10 @@
     text-decoration: underline;
 }
 
+  .cq-t_inline-size {
+    container-type: inline-size;
+}
+
   .d_grid {
     display: grid;
 }
@@ -342,10 +351,6 @@
     height: 215px;
 }
 
-  .min-w_270px {
-    min-width: 270px;
-}
-
   .bd-l_4px_solid {
     border-left: 4px solid;
 }
@@ -574,6 +579,10 @@
     min-height: 100vh;
 }
 
+  .c_text\.subtle {
+    color: var(--colors-text-subtle);
+}
+
   .bg_surface\.dangerSubtle {
     background: var(--colors-surface-danger-subtle);
 }
@@ -582,8 +591,8 @@
     white-space: pre-wrap;
 }
 
-  .c_primary {
-    color: var(--colors-primary);
+  .c_text\.link {
+    color: var(--colors-text-link);
 }
 
   .white-space_nowrap {
@@ -1430,6 +1439,28 @@
     height: var(--sizes-large);
 }
 
+  @supports not (container-type: inline-size) {
+    @media screen and (min-width: 37.5625rem) {
+      .\[\@supports_not_\(container-type\:_inline-size\)\]\:tablet\:h_265px {
+        height: 265px;
+}
+}
+}
+
+  @supports not (container-type: inline-size) {
+    @media screen and (min-width: 48rem) {
+      .\[\@supports_not_\(container-type\:_inline-size\)\]\:tabletWide\:h_340px {
+        height: 340px;
+}
+      .\[\@supports_not_\(container-type\:_inline-size\)\]\:tabletWide\:grid-tc_minmax\(230px\,_455px\)_auto {
+        grid-template-columns: minmax(230px, 455px) auto;
+}
+      .\[\@supports_not_\(container-type\:_inline-size\)\]\:tabletWide\:grid-tc_auto_minmax\(230px\,_455px\) {
+        grid-template-columns: auto minmax(230px, 455px);
+}
+}
+}
+
   @media screen and (min-width: 29.75rem) {
     .mobileWide\:d_none {
       display: none;
@@ -1440,14 +1471,41 @@
     .mobileWide\:pr_medium {
       padding-right: var(--spacing-medium);
 }
+}
+
+  @container  (min-width: 37.5625rem) {
+    .\@\/tablet\:h_340px {
+      height: 340px;
+}
+    .\@\/tablet\:grid-tc_minmax\(230px\,_455px\)_auto {
+      grid-template-columns: minmax(230px, 455px) auto;
+}
+    .\@\/tablet\:grid-tc_auto_minmax\(230px\,_455px\) {
+      grid-template-columns: auto minmax(230px, 455px);
+}
 }
 
   @media screen and (min-width: 37.5625rem) {
     .tablet\:px_medium {
       padding-inline: var(--spacing-medium);
 }
-    .tablet\:h_265px {
-      height: 265px;
+    .tablet\:d_block {
+      display: block;
+}
+    .tablet\:ov_hidden {
+      overflow: hidden;
+}
+    .tablet\:pos_relative {
+      position: relative;
+}
+    .tablet\:lc_4 {
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      -webkit-box-orient: vertical;
+}
+    .tablet\:box-orient_vertical {
+      box-orient: vertical;
 }
     .tablet\:h_26px {
       height: 26px;
@@ -1526,39 +1584,12 @@
 }
     .tabletWide\:max-w_532px {
       max-width: 532px;
-}
-    .tabletWide\:h_340px {
-      height: 340px;
-}
-    .tabletWide\:d_block {
-      display: block;
-}
-    .tabletWide\:ov_hidden {
-      overflow: hidden;
-}
-    .tabletWide\:pos_relative {
-      position: relative;
-}
-    .tabletWide\:lc_4 {
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-line-clamp: 4;
-      -webkit-box-orient: vertical;
-}
-    .tabletWide\:box-orient_vertical {
-      box-orient: vertical;
 }
     .tabletWide\:flex-d_row {
       flex-direction: row;
 }
     .tabletWide\:jc_space-between {
       justify-content: space-between;
-}
-    .tabletWide\:grid-tc_minmax\(230px\,_455px\)_auto {
-      grid-template-columns: minmax(230px, 455px) auto;
-}
-    .tabletWide\:grid-tc_auto_minmax\(230px\,_455px\) {
-      grid-template-columns: auto minmax(230px, 455px);
 }
 }
 

package/es/Article/Article.js

@@ -75,7 +75,9 @@ export const ArticleHeader = styled(ark.header, {
     gap: "medium",
     alignItems: "flex-start",
     width: "100%",
-    paddingBlockStart: "xxlarge"
+    paddingBlockStart: "xxlarge",
+    overflowWrap: "break-word",
+    hyphens: "auto"
   }
 }, {
   baseComponent: true

package/es/Article/ArticleByline.js

@@ -142,7 +142,7 @@ export const ArticleByline = _ref => {
       }), /*#__PURE__*/_jsxs("div", {
         children: [t(`${bylineType}.lastUpdated`), " ", published]
       })]
-    }), /*#__PURE__*/_jsxs(StyledAccordionRoot, {
+    }), (!!licenseBox || !!footnotes?.length) && /*#__PURE__*/_jsxs(StyledAccordionRoot, {
       multiple: true,
       value: openAccordions,
       onValueChange: details => setOpenAccordions(details.value),

package/es/CampaignBlock/CampaignBlock.js

@@ -13,6 +13,13 @@ import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
 import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Wrapper = styled("div", {
+  base: {
+    width: "100%",
+    height: "100%",
+    containerType: "inline-size"
+  }
+});
 const Container = styled("div", {
   base: {
     display: "grid",
@@ -28,13 +35,23 @@ const Container = styled("div", {
   variants: {
     imageSide: {
       left: {
-        tabletWide: {
+        "@/tablet": {
           gridTemplateColumns: "minmax(230px, 455px) auto" //required for campaign block in myNdla
+        },
+        "@supports not (container-type: inline-size)": {
+          tabletWide: {
+            gridTemplateColumns: "minmax(230px, 455px) auto"
+          }
         }
       },
       right: {
-        tabletWide: {
+        "@/tablet": {
           gridTemplateColumns: "auto minmax(230px, 455px)" //required for campaign block in myNdla
+        },
+        "@supports not (container-type: inline-size)": {
+          tabletWide: {
+            gridTemplateColumns: "auto minmax(230px, 455px)"
+          }
         }
       }
     }
@@ -69,11 +86,16 @@ const StyledImg = styled("img", {
     objectFit: "cover",
     width: "100%",
     height: "215px",
-    tablet: {
-      height: "265px"
-    },
-    tabletWide: {
+    "@/tablet": {
       height: "340px"
+    },
+    "@supports not (container-type: inline-size)": {
+      tablet: {
+        height: "265px"
+      },
+      tabletWide: {
+        height: "340px"
+      }
     }
   }
 });
@@ -86,13 +108,12 @@ const ContentWrapper = styled("div", {
     alignItems: "flex-start",
     justifyContent: "center",
     paddingBlock: "medium",
-    paddingInline: "medium",
-    minWidth: "270px" //required for campaign block in myNdla
+    paddingInline: "medium"
   }
 });
 const StyledText = styled(Text, {
   base: {
-    tabletWide: {
+    tablet: {
       display: "block",
       overflow: "hidden",
       position: "relative",
@@ -136,34 +157,36 @@ const CampaignBlock = _ref2 => {
     alt: image.alt
   });
   const HeaderComponent = url?.url ? LinkHeader : Text;
-  return /*#__PURE__*/_jsxs(Container, {
-    className: className,
-    "data-embed-type": "campaign-block",
-    imageSide: imageSide,
-    children: [imageSide === "left" && imageComponent, /*#__PURE__*/_jsxs(ContentWrapper, {
-      children: [/*#__PURE__*/_jsx(MaybeLinkText, {
-        url: url?.url,
-        path: path,
-        children: /*#__PURE__*/_jsx(HeaderComponent, {
-          asChild: true,
-          consumeCss: true,
-          textStyle: "heading.small",
-          children: /*#__PURE__*/_jsx(InternalHeading, {
-            children: parse(title)
+  return /*#__PURE__*/_jsx(Wrapper, {
+    children: /*#__PURE__*/_jsxs(Container, {
+      className: className,
+      "data-embed-type": "campaign-block",
+      imageSide: imageSide,
+      children: [imageSide === "left" && imageComponent, /*#__PURE__*/_jsxs(ContentWrapper, {
+        children: [/*#__PURE__*/_jsx(MaybeLinkText, {
+          url: url?.url,
+          path: path,
+          children: /*#__PURE__*/_jsx(HeaderComponent, {
+            asChild: true,
+            consumeCss: true,
+            textStyle: "heading.small",
+            children: /*#__PURE__*/_jsx(InternalHeading, {
+              children: parse(title)
+            })
+          })
+        }), /*#__PURE__*/_jsx(StyledText, {
+          textStyle: "body.xlarge",
+          children: parse(description)
+        }), !!url?.url && /*#__PURE__*/_jsx(MaybeLinkText, {
+          url: url.url,
+          path: path,
+          children: /*#__PURE__*/_jsxs(LinkText, {
+            textStyle: "body.medium",
+            children: [parse(url.text ?? ""), /*#__PURE__*/_jsx(ArrowRightLine, {})]
           })
-        })
-      }), /*#__PURE__*/_jsx(StyledText, {
-        textStyle: "body.xlarge",
-        children: parse(description)
-      }), !!url?.url && /*#__PURE__*/_jsx(MaybeLinkText, {
-        url: url.url,
-        path: path,
-        children: /*#__PURE__*/_jsxs(LinkText, {
-          textStyle: "body.medium",
-          children: [parse(url.text ?? ""), /*#__PURE__*/_jsx(ArrowRightLine, {})]
-        })
-      })]
-    }), imageSide !== "left" && imageComponent]
+        })]
+      }), imageSide !== "left" && imageComponent]
+    })
   });
 };
 export default CampaignBlock;

package/es/ContentTypeHero/ContentTypeHero.js

@@ -21,7 +21,7 @@ export const contentTypeToHeroMap = {
   [contentTypes.LEARNING_PATH]: "primary",
   [contentTypes.TOPIC]: "neutral",
   [contentTypes.MULTIDISCIPLINARY]: "primary",
-  [contentTypes.CONCEPT]: "brand1Subtle",
+  [contentTypes.CONCEPT]: "brand1Moderate",
   [contentTypes.EXTERNAL]: "primary",
   [contentTypes.IMAGE]: "primary",
   [contentTypes.AUDIO]: "primary",

package/es/Embed/BrightcoveEmbed.js

@@ -22,6 +22,7 @@ const LinkedVideoButton = styled(Button, {
 });
 const BrightcoveIframe = styled("iframe", {
   base: {
+    border: 0,
     height: "auto",
     width: "100%"
   }
@@ -85,9 +86,8 @@ const BrightcoveEmbed = _ref => {
         ref: iframeRef,
         title: embedData.alt ?? fallbackTitle,
         "aria-label": embedData.alt ?? fallbackTitle,
-        frameBorder: "0",
         ...getIframeProps(embedData, []),
-        allowFullScreen: true
+        allow: "fullscreen; encrypted-media"
       })
     });
   }
@@ -111,9 +111,8 @@ const BrightcoveEmbed = _ref => {
         className: "original",
         title: embedData.alt ?? data.name ?? fallbackTitle,
         "aria-label": embedData.alt ?? data.name ?? fallbackTitle,
-        frameBorder: "0",
         ...(alternativeVideoProps && !showOriginalVideo ? alternativeVideoProps : originalVideoProps),
-        allowFullScreen: true
+        allow: "fullscreen; encrypted-media"
       })
     }), /*#__PURE__*/_jsx(EmbedByline, {
       type: "video",

package/es/Embed/ImageEmbed.js

@@ -150,6 +150,9 @@ const ExpandButton = styled("button", {
       transitionProperty: "transform",
       transitionDuration: "normal",
       transitionTimingFunction: "ease-out"
+    },
+    tabletDown: {
+      display: "none"
     }
   }
 }, {
@@ -197,11 +200,12 @@ const ImageEmbed = _ref => {
     setImageSizes(sizes => !sizes ? expandedSizes : undefined);
   };
   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" : figureProps?.size ?? "medium",
+    size: imageSizes ? "full" : figureSize,
     "data-embed-type": "image",
     ...licenseProps,
     children: [children, /*#__PURE__*/_jsxs(ImageWrapper, {
@@ -217,16 +221,18 @@ const ImageEmbed = _ref => {
         lang: lang,
         onClick: figureProps?.float ? toggleImageSize : undefined,
         variant: "rounded"
-      }), !!embedData.align && /*#__PURE__*/_jsx(ExpandButton, {
+      }), (embedData.align === "right" || embedData.align === "left") && /*#__PURE__*/_jsx(ExpandButton, {
         "aria-label": t(`license.images.itemImage.zoom${imageSizes ? "Out" : ""}ImageButtonLabel`),
         onClick: toggleImageSize,
         "data-expanded": !!imageSizes,
         children: /*#__PURE__*/_jsx(AddLine, {})
       })]
-    }), embedData.hideByline === "true" ? null : /*#__PURE__*/_jsx(EmbedByline, {
+    }), /*#__PURE__*/_jsx(EmbedByline, {
       type: "image",
       copyright: data.copyright,
-      description: embedData.hideCaption === "true" ? "" : parsedDescription,
+      description: parsedDescription,
+      hideDescription: embedData.hideCaption === "true",
+      hideCopyright: embedData.hideByline === "true",
       visibleAlt: previewAlt ? embed.embedData.alt : ""
     })]
   });

package/es/LicenseByline/EmbedByline.js

@@ -20,7 +20,8 @@ const BylineWrapper = styled("figcaption", {
     flexDirection: "column",
     paddingBlock: "xsmall",
     background: "surface.default",
-    textStyle: "label.medium"
+    textStyle: "label.medium",
+    color: "text.subtle"
   }
 });
 const ErrorBylineWrapper = styled(BylineWrapper, {
@@ -58,6 +59,8 @@ export const EmbedByline = _ref => {
     description,
     children,
     visibleAlt,
+    hideCopyright,
+    hideDescription,
     ...props
   } = _ref;
   const {
@@ -80,13 +83,14 @@ export const EmbedByline = _ref => {
   const {
     copyright
   } = props;
+  const bylineDescription = hideDescription ? "" : description;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(BylineWrapper, {
       children: /*#__PURE__*/_jsxs("div", {
-        children: [/*#__PURE__*/_jsx(LicenseContainerContent, {
+        children: [hideCopyright && bylineDescription, !hideCopyright && /*#__PURE__*/_jsx(LicenseContainerContent, {
           type: type,
           copyright: copyright,
-          children: description
+          children: bylineDescription
         }), children]
       })
     }), visibleAlt ? /*#__PURE__*/_jsx(StyledText, {

package/es/LicenseByline/LicenseLink.js

@@ -11,7 +11,7 @@ import { styled } from "@ndla/styled-system/jsx";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledSafeLink = styled(SafeLink, {
   base: {
-    color: "primary",
+    color: "text.link",
     textDecoration: "underline",
     whiteSpace: "nowrap",
     _hover: {

package/es/styles.css

@@ -117,6 +117,11 @@
     padding-block-start: var(--spacing-xxlarge);
 }
 
+  .hy_auto {
+    hyphens: auto;
+    -webkit-hyphens: auto;
+}
+
   .gap_xxlarge {
     gap: var(--spacing-xxlarge);
 }
@@ -334,6 +339,10 @@
     text-decoration: underline;
 }
 
+  .cq-t_inline-size {
+    container-type: inline-size;
+}
+
   .d_grid {
     display: grid;
 }
@@ -342,10 +351,6 @@
     height: 215px;
 }
 
-  .min-w_270px {
-    min-width: 270px;
-}
-
   .bd-l_4px_solid {
     border-left: 4px solid;
 }
@@ -574,6 +579,10 @@
     min-height: 100vh;
 }
 
+  .c_text\.subtle {
+    color: var(--colors-text-subtle);
+}
+
   .bg_surface\.dangerSubtle {
     background: var(--colors-surface-danger-subtle);
 }
@@ -582,8 +591,8 @@
     white-space: pre-wrap;
 }
 
-  .c_primary {
-    color: var(--colors-primary);
+  .c_text\.link {
+    color: var(--colors-text-link);
 }
 
   .white-space_nowrap {
@@ -1430,6 +1439,28 @@
     height: var(--sizes-large);
 }
 
+  @supports not (container-type: inline-size) {
+    @media screen and (min-width: 37.5625rem) {
+      .\[\@supports_not_\(container-type\:_inline-size\)\]\:tablet\:h_265px {
+        height: 265px;
+}
+}
+}
+
+  @supports not (container-type: inline-size) {
+    @media screen and (min-width: 48rem) {
+      .\[\@supports_not_\(container-type\:_inline-size\)\]\:tabletWide\:h_340px {
+        height: 340px;
+}
+      .\[\@supports_not_\(container-type\:_inline-size\)\]\:tabletWide\:grid-tc_minmax\(230px\,_455px\)_auto {
+        grid-template-columns: minmax(230px, 455px) auto;
+}
+      .\[\@supports_not_\(container-type\:_inline-size\)\]\:tabletWide\:grid-tc_auto_minmax\(230px\,_455px\) {
+        grid-template-columns: auto minmax(230px, 455px);
+}
+}
+}
+
   @media screen and (min-width: 29.75rem) {
     .mobileWide\:d_none {
       display: none;
@@ -1440,14 +1471,41 @@
     .mobileWide\:pr_medium {
       padding-right: var(--spacing-medium);
 }
+}
+
+  @container  (min-width: 37.5625rem) {
+    .\@\/tablet\:h_340px {
+      height: 340px;
+}
+    .\@\/tablet\:grid-tc_minmax\(230px\,_455px\)_auto {
+      grid-template-columns: minmax(230px, 455px) auto;
+}
+    .\@\/tablet\:grid-tc_auto_minmax\(230px\,_455px\) {
+      grid-template-columns: auto minmax(230px, 455px);
+}
 }
 
   @media screen and (min-width: 37.5625rem) {
     .tablet\:px_medium {
       padding-inline: var(--spacing-medium);
 }
-    .tablet\:h_265px {
-      height: 265px;
+    .tablet\:d_block {
+      display: block;
+}
+    .tablet\:ov_hidden {
+      overflow: hidden;
+}
+    .tablet\:pos_relative {
+      position: relative;
+}
+    .tablet\:lc_4 {
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      -webkit-box-orient: vertical;
+}
+    .tablet\:box-orient_vertical {
+      box-orient: vertical;
 }
     .tablet\:h_26px {
       height: 26px;
@@ -1526,39 +1584,12 @@
 }
     .tabletWide\:max-w_532px {
       max-width: 532px;
-}
-    .tabletWide\:h_340px {
-      height: 340px;
-}
-    .tabletWide\:d_block {
-      display: block;
-}
-    .tabletWide\:ov_hidden {
-      overflow: hidden;
-}
-    .tabletWide\:pos_relative {
-      position: relative;
-}
-    .tabletWide\:lc_4 {
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-line-clamp: 4;
-      -webkit-box-orient: vertical;
-}
-    .tabletWide\:box-orient_vertical {
-      box-orient: vertical;
 }
     .tabletWide\:flex-d_row {
       flex-direction: row;
 }
     .tabletWide\:jc_space-between {
       justify-content: space-between;
-}
-    .tabletWide\:grid-tc_minmax\(230px\,_455px\)_auto {
-      grid-template-columns: minmax(230px, 455px) auto;
-}
-    .tabletWide\:grid-tc_auto_minmax\(230px\,_455px\) {
-      grid-template-columns: auto minmax(230px, 455px);
 }
 }