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

package/lib/Article/Article.js

@@ -81,7 +81,9 @@ const ArticleHeader = exports.ArticleHeader = (0, _jsx2.styled)(_react2.ark.head
     gap: "medium",
     alignItems: "flex-start",
     width: "100%",
-    paddingBlockStart: "xxlarge"
+    paddingBlockStart: "xxlarge",
+    overflowWrap: "break-word",
+    hyphens: "auto"
   }
 }, {
   baseComponent: true

package/lib/Article/ArticleByline.js

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

package/lib/CampaignBlock/CampaignBlock.js

@@ -20,6 +20,13 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  *
  */
 
+const Wrapper = (0, _jsx2.styled)("div", {
+  base: {
+    width: "100%",
+    height: "100%",
+    containerType: "inline-size"
+  }
+});
 const Container = (0, _jsx2.styled)("div", {
   base: {
     display: "grid",
@@ -35,13 +42,23 @@ const Container = (0, _jsx2.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)"
+          }
         }
       }
     }
@@ -76,11 +93,16 @@ const StyledImg = (0, _jsx2.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"
+      }
     }
   }
 });
@@ -93,13 +115,12 @@ const ContentWrapper = (0, _jsx2.styled)("div", {
     alignItems: "flex-start",
     justifyContent: "center",
     paddingBlock: "medium",
-    paddingInline: "medium",
-    minWidth: "270px" //required for campaign block in myNdla
+    paddingInline: "medium"
   }
 });
 const StyledText = (0, _jsx2.styled)(_primitives.Text, {
   base: {
-    tabletWide: {
+    tablet: {
       display: "block",
       overflow: "hidden",
       position: "relative",
@@ -143,34 +164,36 @@ const CampaignBlock = _ref2 => {
     alt: image.alt
   });
   const HeaderComponent = url?.url ? LinkHeader : _primitives.Text;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
-    className: className,
-    "data-embed-type": "campaign-block",
-    imageSide: imageSide,
-    children: [imageSide === "left" && imageComponent, /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentWrapper, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MaybeLinkText, {
-        url: url?.url,
-        path: path,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderComponent, {
-          asChild: true,
-          consumeCss: true,
-          textStyle: "heading.small",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalHeading, {
-            children: (0, _htmlReactParser.default)(title)
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+      className: className,
+      "data-embed-type": "campaign-block",
+      imageSide: imageSide,
+      children: [imageSide === "left" && imageComponent, /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentWrapper, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MaybeLinkText, {
+          url: url?.url,
+          path: path,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderComponent, {
+            asChild: true,
+            consumeCss: true,
+            textStyle: "heading.small",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalHeading, {
+              children: (0, _htmlReactParser.default)(title)
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
+          textStyle: "body.xlarge",
+          children: (0, _htmlReactParser.default)(description)
+        }), !!url?.url && /*#__PURE__*/(0, _jsxRuntime.jsx)(MaybeLinkText, {
+          url: url.url,
+          path: path,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(LinkText, {
+            textStyle: "body.medium",
+            children: [(0, _htmlReactParser.default)(url.text ?? ""), /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.ArrowRightLine, {})]
           })
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
-        textStyle: "body.xlarge",
-        children: (0, _htmlReactParser.default)(description)
-      }), !!url?.url && /*#__PURE__*/(0, _jsxRuntime.jsx)(MaybeLinkText, {
-        url: url.url,
-        path: path,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(LinkText, {
-          textStyle: "body.medium",
-          children: [(0, _htmlReactParser.default)(url.text ?? ""), /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.ArrowRightLine, {})]
-        })
-      })]
-    }), imageSide !== "left" && imageComponent]
+        })]
+      }), imageSide !== "left" && imageComponent]
+    })
   });
 };
 var _default = exports.default = CampaignBlock;

package/lib/ContentTypeHero/ContentTypeHero.js

@@ -29,7 +29,7 @@ const contentTypeToHeroMap = exports.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/lib/Embed/BrightcoveEmbed.js

@@ -29,6 +29,7 @@ const LinkedVideoButton = (0, _jsx2.styled)(_primitives.Button, {
 });
 const BrightcoveIframe = (0, _jsx2.styled)("iframe", {
   base: {
+    border: 0,
     height: "auto",
     width: "100%"
   }
@@ -94,9 +95,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"
       })
     });
   }
@@ -120,9 +120,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__*/(0, _jsxRuntime.jsx)(_LicenseByline.EmbedByline, {
       type: "video",

package/lib/Embed/ImageEmbed.js

@@ -160,6 +160,9 @@ const ExpandButton = (0, _jsx2.styled)("button", {
       transitionProperty: "transform",
       transitionDuration: "normal",
       transitionTimingFunction: "ease-out"
+    },
+    tabletDown: {
+      display: "none"
     }
   }
 }, {
@@ -207,11 +210,12 @@ const ImageEmbed = _ref => {
     setImageSizes(sizes => !sizes ? expandedSizes : undefined);
   };
   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" : figureProps?.size ?? "medium",
+    size: imageSizes ? "full" : figureSize,
     "data-embed-type": "image",
     ...licenseProps,
     children: [children, /*#__PURE__*/(0, _jsxRuntime.jsxs)(ImageWrapper, {
@@ -227,16 +231,18 @@ const ImageEmbed = _ref => {
         lang: lang,
         onClick: figureProps?.float ? toggleImageSize : undefined,
         variant: "rounded"
-      }), !!embedData.align && /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandButton, {
+      }), (embedData.align === "right" || embedData.align === "left") && /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandButton, {
         "aria-label": t(`license.images.itemImage.zoom${imageSizes ? "Out" : ""}ImageButtonLabel`),
         onClick: toggleImageSize,
         "data-expanded": !!imageSizes,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.AddLine, {})
       })]
-    }), embedData.hideByline === "true" ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_LicenseByline.EmbedByline, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LicenseByline.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/lib/LicenseByline/EmbedByline.d.ts

@@ -16,6 +16,8 @@ interface BaseProps {
     children?: ReactNode;
     visibleAlt?: string;
     error?: true | false;
+    hideDescription?: boolean;
+    hideCopyright?: boolean;
 }
 export interface EmbedBylineErrorProps extends BaseProps {
     type: EmbedBylineTypeProps["type"] | "h5p" | "external";
@@ -47,7 +49,7 @@ interface CopyrightProps extends BaseProps {
 }
 export type EmbedBylineTypeProps = ImageProps | BrightcoveProps | AudioProps | PodcastProps | ConceptProps | CopyrightProps;
 type Props = EmbedBylineTypeProps | EmbedBylineErrorProps;
-export declare const EmbedByline: ({ type, description, children, visibleAlt, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const EmbedByline: ({ type, description, children, visibleAlt, hideCopyright, hideDescription, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 interface LicenseContainerProps {
     children?: ReactNode;
     copyright: EmbedBylineTypeProps["copyright"];

package/lib/LicenseByline/EmbedByline.js

@@ -26,7 +26,8 @@ const BylineWrapper = (0, _jsx2.styled)("figcaption", {
     flexDirection: "column",
     paddingBlock: "xsmall",
     background: "surface.default",
-    textStyle: "label.medium"
+    textStyle: "label.medium",
+    color: "text.subtle"
   }
 });
 const ErrorBylineWrapper = (0, _jsx2.styled)(BylineWrapper, {
@@ -64,6 +65,8 @@ const EmbedByline = _ref => {
     description,
     children,
     visibleAlt,
+    hideCopyright,
+    hideDescription,
     ...props
   } = _ref;
   const {
@@ -86,13 +89,14 @@ const EmbedByline = _ref => {
   const {
     copyright
   } = props;
+  const bylineDescription = hideDescription ? "" : description;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BylineWrapper, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LicenseContainerContent, {
+        children: [hideCopyright && bylineDescription, !hideCopyright && /*#__PURE__*/(0, _jsxRuntime.jsx)(LicenseContainerContent, {
           type: type,
           copyright: copyright,
-          children: description
+          children: bylineDescription
         }), children]
       })
     }), visibleAlt ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {

package/lib/LicenseByline/LicenseLink.js

@@ -17,7 +17,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const StyledSafeLink = (0, _jsx2.styled)(_safelink.SafeLink, {
   base: {
-    color: "primary",
+    color: "text.link",
     textDecoration: "underline",
     whiteSpace: "nowrap",
     _hover: {

package/lib/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.25-alpha.0",
+  "version": "56.0.27-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -34,11 +34,11 @@
   ],
   "dependencies": {
     "@ndla/core": "^5.0.2",
-    "@ndla/icons": "^8.0.16-alpha.0",
-    "@ndla/licenses": "^8.0.2-alpha.0",
-    "@ndla/primitives": "^1.0.22-alpha.0",
-    "@ndla/safelink": "^7.0.22-alpha.0",
-    "@ndla/styled-system": "^0.0.18",
+    "@ndla/icons": "^8.0.18-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/util": "^4.1.0",
     "html-react-parser": "^5.1.8",
     "i18next-browser-languagedetector": "^7.1.0"
@@ -53,7 +53,7 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.26",
+    "@ndla/preset-panda": "^0.0.28",
     "@ndla/types-backend": "^0.2.86",
     "@ndla/types-embed": "^5.0.1-alpha.0",
     "@pandacss/dev": "^0.46.0",
@@ -66,5 +66,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "19def84b2fdf322e30f85268906a572747fdc53c"
+  "gitHead": "45c12a953606ca3eb14c8d09c25401c8bc24ed22"
 }

package/src/Article/Article.tsx

@@ -80,6 +80,8 @@ export const ArticleHeader = styled(
       alignItems: "flex-start",
       width: "100%",
       paddingBlockStart: "xxlarge",
+      overflowWrap: "break-word",
+      hyphens: "auto",
     },
   },
   { baseComponent: true },

package/src/Article/ArticleByline.tsx

@@ -183,22 +183,24 @@ export const ArticleByline = ({
           </div>
         </TextWrapper>
       )}
-      <StyledAccordionRoot
-        multiple
-        value={openAccordions}
-        onValueChange={(details) => setOpenAccordions(details.value)}
-      >
-        {!!licenseBox && (
-          <ArticleBylineAccordionItem value={accordionItemValue} accordionTitle={t("article.useContent")}>
-            {licenseBox}
-          </ArticleBylineAccordionItem>
-        )}
-        {!!footnotes?.length && (
-          <ArticleBylineAccordionItem value={footnotesAccordionId} accordionTitle={t("article.footnotes")}>
-            <ArticleFootNotes footNotes={footnotes} />
-          </ArticleBylineAccordionItem>
-        )}
-      </StyledAccordionRoot>
+      {(!!licenseBox || !!footnotes?.length) && (
+        <StyledAccordionRoot
+          multiple
+          value={openAccordions}
+          onValueChange={(details) => setOpenAccordions(details.value)}
+        >
+          {!!licenseBox && (
+            <ArticleBylineAccordionItem value={accordionItemValue} accordionTitle={t("article.useContent")}>
+              {licenseBox}
+            </ArticleBylineAccordionItem>
+          )}
+          {!!footnotes?.length && (
+            <ArticleBylineAccordionItem value={footnotesAccordionId} accordionTitle={t("article.footnotes")}>
+              <ArticleFootNotes footNotes={footnotes} />
+            </ArticleBylineAccordionItem>
+          )}
+        </StyledAccordionRoot>
+      )}
     </Wrapper>
   );
 };