@ndla/ui 56.0.14-alpha.0 → 56.0.16-alpha.0

package/dist/panda.buildinfo.json

@@ -2,19 +2,13 @@
   "schemaVersion": "0.44.0",
   "styles": {
     "atomic": [
-      "paddingInline]___[value:8%",
-      "width]___[value:100%",
-      "paddingBlockStart]___[value:xsmall",
-      "paddingBlockStart]___[value:medium]___[cond:tablet",
-      "paddingBlockStart]___[value:xxlarge]___[cond:desktop",
-      "paddingBlockEnd]___[value:xsmall",
-      "paddingBlockEnd]___[value:medium]___[cond:tablet",
-      "paddingBlockEnd]___[value:xxlarge]___[cond:desktop",
-      "background]___[value:surface.default",
+      "background]___[value:background.default",
       "display]___[value:flex",
       "flexDirection]___[value:column",
+      "gap]___[value:xxlarge",
       "color]___[value:text.default",
       "alignItems]___[value:center",
+      "width]___[value:100%",
       "overflowWrap]___[value:break-word",
       "position]___[value:relative",
       "transform]___[value:scaleY(100) translateY(0.075em)]___[cond:& mjx-stretchy-v > mjx-ext > mjx-c",
@@ -22,16 +16,12 @@
       "display]___[value:table]___[cond:_after",
       "clear]___[value:both]___[cond:_after",
       "alignItems]___[value:flex-start",
-      "gap]___[value:xsmall",
       "overflowWrap]___[value:anywhere]___[cond:& h1",
-      "position]___[value:absolute",
-      "right]___[value:8%",
-      "top]___[value:xsmall",
-      "top]___[value:medium]___[cond:tablet",
-      "top]___[value:xxlarge]___[cond:desktop",
       "gap]___[value:medium",
-      "gap]___[value:xxlarge",
+      "paddingBlockStart]___[value:xxlarge",
+      "paddingBlockEnd]___[value:5xlarge]___[cond:& > :is(:last-child)",
       "marginBlockStart]___[value:medium",
+      "paddingBlockStart]___[value:xsmall",
       "borderTop]___[value:1px solid",
       "borderColor]___[value:stroke.subtle",
       "flexDirection]___[value:column-reverse",
@@ -40,7 +30,7 @@
       "paddingBlock]___[value:xsmall",
       "textStyle]___[value:body.medium",
       "flexDirection]___[value:row]___[cond:tabletWide",
-      "paddingBlockStart]___[value:xxlarge",
+      "gap]___[value:xsmall",
       "listStyle]___[value:none",
       "textAlign]___[value:center]___[cond:&[data-align=\"center\"]",
       "direction]___[value:rtl]___[cond:&:has(span[dir=\"rtl\"])",
@@ -77,7 +67,6 @@
       "alignSelf]___[value:flex-start",
       "borderBottomRadius]___[value:xsmall",
       "justifyContent]___[value:center",
-      "background]___[value:background.default",
       "paddingInline]___[value:medium",
       "display]___[value:grid]___[cond:tabletWideDown",
       "paddingBlock]___[value:xsmall]___[cond:tabletWideDown",
@@ -133,9 +122,16 @@
       "textDecoration]___[value:none]___[cond:_hover",
       "textDecoration]___[value:none]___[cond:_focusVisible",
       "display]___[value:none]___[cond:tabletDown",
+      "fontWeight]___[value:bold",
       "alignSelf]___[value:center",
       "height]___[value:215px",
-      "height]___[value:340px]___[cond:desktop",
+      "height]___[value:340px]___[cond:mobileWide",
+      "width]___[value:auto]___[cond:tabletWide",
+      "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",
       "borderLeft]___[value:4px solid",
       "borderLeftColor]___[value:stroke.default",
       "boxSizing]___[value:border-box",
@@ -173,6 +169,7 @@
       "display]___[value:inline]___[cond:& p",
       "minWidth]___[value:surface.xxsmall",
       "padding]___[value:medium",
+      "background]___[value:surface.default",
       "alignItems]___[value:unset]___[cond:tablet",
       "flexDirection]___[value:row]___[cond:tablet",
       "zIndex]___[value:base",
@@ -226,6 +223,7 @@
       "backgroundColor]___[value:var(--background-color)",
       "opacity]___[value:1]___[cond:_hover<___>& [data-copy-button]",
       "cursor]___[value:pointer]___[cond:_hover<___>& [data-copy-button]",
+      "position]___[value:absolute",
       "left]___[value:-xxlarge",
       "top]___[value:-4xsmall",
       "opacity]___[value:0",
@@ -234,7 +232,6 @@
       "marginInlineStart]___[value:xsmall",
       "height]___[value:auto",
       "textStyle]___[value:label.large",
-      "fontWeight]___[value:bold",
       "marginBlockStart]___[value:xsmall]___[cond:& > *:not(:where(:first-child))",
       "width]___[value:surface.xlarge",
       "display]___[value:block]___[cond:& li",
@@ -266,6 +263,7 @@
       "transitionTimingFunction]___[value:ease-out]___[cond:& svg",
       "fill]___[value:primary]___[cond:& svg",
       "padding]___[value:0",
+      "top]___[value:xsmall",
       "right]___[value:xsmall",
       "width]___[value:medium",
       "height]___[value:medium",
@@ -433,7 +431,12 @@
       "padding]___[value:xsmall]___[cond:tabletDown",
       "aspectRatio]___[value:1/1",
       "width]___[value:100%]___[cond:tabletDown",
-      "borderRadius]___[value:0]___[cond:tabletDown"
+      "borderRadius]___[value:0]___[cond:tabletDown",
+      "overflow]___[value:hidden]___[cond:& span",
+      "textOverflow]___[value:ellipsis]___[cond:& span",
+      "maxHeight]___[value:inherit",
+      "overflow]___[value:auto",
+      "gap]___[value:10px"
     ],
     "recipes": {}
   }

package/dist/styles.css

@@ -85,34 +85,26 @@
 }
 }
 
-  .px_8\% {
-    padding-inline: 8%;
-}
-
-  .w_100\% {
-    width: 100%;
-}
-
-  .pbs_xsmall {
-    padding-block-start: var(--spacing-xsmall);
-}
-
-  .pbe_xsmall {
-    padding-block-end: var(--spacing-xsmall);
-}
-
-  .bg_surface\.default {
-    background: var(--colors-surface-default);
+  .bg_background\.default {
+    background: var(--colors-background-default);
 }
 
   .d_flex {
     display: flex;
 }
 
+  .gap_xxlarge {
+    gap: var(--spacing-xxlarge);
+}
+
   .c_text\.default {
     color: var(--colors-text-default);
 }
 
+  .w_100\% {
+    width: 100%;
+}
+
   .ov-wrap_break-word {
     overflow-wrap: break-word;
 }
@@ -121,26 +113,22 @@
     position: relative;
 }
 
-  .gap_xsmall {
-    gap: var(--spacing-xsmall);
-}
-
-  .pos_absolute {
-    position: absolute;
-}
-
   .gap_medium {
     gap: var(--spacing-medium);
 }
 
-  .gap_xxlarge {
-    gap: var(--spacing-xxlarge);
+  .pbs_xxlarge {
+    padding-block-start: var(--spacing-xxlarge);
 }
 
   .mbs_medium {
     margin-block-start: var(--spacing-medium);
 }
 
+  .pbs_xsmall {
+    padding-block-start: var(--spacing-xsmall);
+}
+
   .bd-t_1px_solid {
     border-top: 1px solid;
 }
@@ -153,8 +141,8 @@
     padding-block: var(--spacing-xsmall);
 }
 
-  .pbs_xxlarge {
-    padding-block-start: var(--spacing-xxlarge);
+  .gap_xsmall {
+    gap: var(--spacing-xsmall);
 }
 
   .li-s_none {
@@ -218,10 +206,6 @@
     border-bottom-right-radius: var(--radii-xsmall);
 }
 
-  .bg_background\.default {
-    background: var(--colors-background-default);
-}
-
   .px_medium {
     padding-inline: var(--spacing-medium);
 }
@@ -374,6 +358,10 @@
     padding: var(--spacing-medium);
 }
 
+  .bg_surface\.default {
+    background: var(--colors-surface-default);
+}
+
   .z_base {
     z-index: var(--z-index-base);
 }
@@ -426,6 +414,10 @@
     border: 2px solid;
 }
 
+  .pos_absolute {
+    position: absolute;
+}
+
   .op_0 {
     opacity: 0;
 }
@@ -611,6 +603,18 @@
     aspect-ratio: 1/1;
 }
 
+  .max-h_inherit {
+    max-height: inherit;
+}
+
+  .ov_auto {
+    overflow: auto;
+}
+
+  .gap_10px {
+    gap: 10px;
+}
+
   .flex-d_column {
     flex-direction: column;
 }
@@ -623,14 +627,6 @@
     align-items: flex-start;
 }
 
-  .right_8\% {
-    right: 8%;
-}
-
-  .top_xsmall {
-    top: var(--spacing-xsmall);
-}
-
   .bd-c_stroke\.subtle {
     border-color: var(--colors-stroke-subtle);
 }
@@ -682,6 +678,10 @@
     align-items: flex-end;
 }
 
+  .fw_bold {
+    font-weight: var(--font-weights-bold);
+}
+
   .as_center {
     align-self: center;
 }
@@ -722,10 +722,6 @@
     top: calc(var(--spacing-4xsmall) * -1);
 }
 
-  .fw_bold {
-    font-weight: var(--font-weights-bold);
-}
-
   .bg-c_surface\.disabled {
     background-color: var(--colors-surface-disabled);
 }
@@ -761,6 +757,10 @@
     transition-timing-function: ease-out;
 }
 
+  .top_xsmall {
+    top: var(--spacing-xsmall);
+}
+
   .right_xsmall {
     right: var(--spacing-xsmall);
 }
@@ -896,6 +896,10 @@
     overflow-wrap: anywhere;
 }
 
+  .\[\&_\>_\:is\(\:last-child\)\]\:pbe_5xlarge > :is(:last-child) {
+    padding-block-end: var(--spacing-5xlarge);
+}
+
   .\[\&\[data-align\=\"center\"\]\]\:ta_center[data-align="center"] {
     text-align: center;
 }
@@ -1171,6 +1175,14 @@
     text-decoration: underline;
 }
 
+  .\[\&_span\]\:ov_hidden span {
+    overflow: hidden;
+}
+
+  .\[\&_span\]\:tov_ellipsis span {
+    text-overflow: ellipsis;
+}
+
   .after\:content_0::after {
     content: 0;
 }
@@ -1436,6 +1448,9 @@
 }
 
   @media screen and (min-width: 29.75rem) {
+    .mobileWide\:h_340px {
+      height: 340px;
+}
     .mobileWide\:d_none {
       display: none;
 }
@@ -1448,12 +1463,6 @@
 }
 
   @media screen and (min-width: 37.5625rem) {
-    .tablet\:pbs_medium {
-      padding-block-start: var(--spacing-medium);
-}
-    .tablet\:pbe_medium {
-      padding-block-end: var(--spacing-medium);
-}
     .tablet\:px_medium {
       padding-inline: var(--spacing-medium);
 }
@@ -1468,9 +1477,6 @@
 }
     .tablet\:w_83\.333\% {
       width: 83.333%;
-}
-    .tablet\:top_medium {
-      top: var(--spacing-medium);
 }
     .tablet\:ai_unset {
       align-items: unset;
@@ -1537,6 +1543,27 @@
 }
     .tabletWide\:max-w_532px {
       max-width: 532px;
+}
+    .tabletWide\:w_auto {
+      width: auto;
+}
+    .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;
@@ -1547,23 +1574,11 @@
 }
 
   @media screen and (min-width: 61.3125rem) {
-    .desktop\:pbs_xxlarge {
-      padding-block-start: var(--spacing-xxlarge);
-}
-    .desktop\:pbe_xxlarge {
-      padding-block-end: var(--spacing-xxlarge);
-}
     .desktop\:w_260px {
       width: 260px;
 }
     .desktop\:h_260px {
       height: 260px;
-}
-    .desktop\:h_340px {
-      height: 340px;
-}
-    .desktop\:top_xxlarge {
-      top: var(--spacing-xxlarge);
 }
     .desktop\:grid-tc_repeat\(3\,_minmax\(0\,_1fr\)\) {
       grid-template-columns: repeat(3, minmax(0, 1fr));

package/es/Article/Article.js

@@ -10,61 +10,11 @@ import { forwardRef } from "react";
 import { ark } from "@ark-ui/react";
 import { Heading, Text } from "@ndla/primitives";
 import { cx } from "@ndla/styled-system/css";
-import { styled } from "@ndla/styled-system/jsx";
+import { Stack, styled } from "@ndla/styled-system/jsx";
 import { ArticleByline } from "./ArticleByline";
 import { ContentTypeBadgeNew } from "..";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const articlePadding = {
-  paddingInline: "8%"
-};
-const paddingBlockEnd = {
-  paddingBlockEnd: "xsmall",
-  tablet: {
-    paddingBlockEnd: "medium"
-  },
-  desktop: {
-    paddingBlockEnd: "xxlarge"
-  }
-};
-const paddingBlockStart = {
-  paddingBlockStart: "xsmall",
-  tablet: {
-    paddingBlockStart: "medium"
-  },
-  desktop: {
-    paddingBlockStart: "xxlarge"
-  }
-};
-export const ArticlePadding = styled(ark.div, {
-  base: {
-    ...articlePadding,
-    width: "100%"
-  },
-  variants: {
-    padStart: {
-      true: paddingBlockStart
-    },
-    padEnd: {
-      true: paddingBlockEnd
-    }
-  }
-}, {
-  baseComponent: true
-});
-const StyledArticleContent = styled(ark.section, {
-  base: {
-    background: "surface.default"
-  },
-  variants: {
-    padded: {
-      true: {
-        ...articlePadding,
-        ...paddingBlockStart,
-        ...paddingBlockEnd
-      }
-    }
-  }
-}, {
+const StyledArticleContent = styled(ark.section, {}, {
   baseComponent: true
 });
 export const ArticleContent = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -80,8 +30,10 @@ export const ArticleContent = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 const StyledArticleWrapper = styled(ark.article, {
   base: {
+    background: "background.default",
     display: "flex",
     flexDirection: "column",
+    gap: "xxlarge",
     color: "text.default",
     alignItems: "center",
     width: "100%",
@@ -110,7 +62,6 @@ export const ArticleHGroup = styled(ark.hgroup, {
     width: "100%",
     flexDirection: "column",
     alignItems: "flex-start",
-    gap: "xsmall",
     "& h1": {
       overflowWrap: "anywhere"
     }
@@ -118,37 +69,14 @@ export const ArticleHGroup = styled(ark.hgroup, {
 }, {
   baseComponent: true
 });
-export const ArticleActionWrapper = styled(ark.div, {
-  base: {
-    position: "absolute",
-    right: "8%",
-    top: "xsmall",
-    tablet: {
-      top: "medium"
-    },
-    desktop: {
-      top: "xxlarge"
-    }
-  }
-}, {
-  baseComponent: true
-});
 export const ArticleHeader = styled(ark.header, {
   base: {
     display: "flex",
     flexDirection: "column",
-    background: "surface.default",
     gap: "medium",
     alignItems: "flex-start",
-    width: "100%"
-  },
-  variants: {
-    padded: {
-      true: {
-        ...articlePadding,
-        ...paddingBlockStart
-      }
-    }
+    width: "100%",
+    paddingBlockStart: "xxlarge"
   }
 }, {
   baseComponent: true
@@ -157,21 +85,20 @@ export const ArticleFooter = styled(ark.footer, {
   base: {
     display: "flex",
     flexDirection: "column",
-    background: "surface.default",
     gap: "xxlarge",
-    width: "100%"
-  },
-  variants: {
-    padded: {
-      true: {
-        ...articlePadding,
-        ...paddingBlockEnd
-      }
+    width: "100%",
+    "& > :is(:last-child)": {
+      paddingBlockEnd: "5xlarge"
     }
   }
 }, {
   baseComponent: true
 });
+const StyledStack = styled(Stack, {
+  base: {
+    width: "100%"
+  }
+});
 export const ArticleTitle = _ref2 => {
   let {
     contentType,
@@ -183,12 +110,15 @@ export const ArticleTitle = _ref2 => {
     competenceGoals
   } = _ref2;
   return /*#__PURE__*/_jsxs(ArticleHeader, {
-    padded: true,
     children: [/*#__PURE__*/_jsxs(ArticleHGroup, {
-      children: [!!contentType && /*#__PURE__*/_jsx(ContentTypeBadgeNew, {
-        contentType: contentType
-      }), !!heartButton && /*#__PURE__*/_jsx(ArticleActionWrapper, {
-        children: heartButton
+      children: [/*#__PURE__*/_jsxs(StyledStack, {
+        justify: "space-between",
+        align: "center",
+        direction: "row",
+        gap: "small",
+        children: [!!contentType && /*#__PURE__*/_jsx(ContentTypeBadgeNew, {
+          contentType: contentType
+        }), heartButton]
       }), /*#__PURE__*/_jsx(Heading, {
         textStyle: "heading.large",
         id: id,
@@ -236,10 +166,8 @@ export const Article = _ref3 => {
       competenceGoals: competenceGoals,
       lang: lang
     }), /*#__PURE__*/_jsx(ArticleContent, {
-      padded: true,
       children: content
     }), /*#__PURE__*/_jsxs(ArticleFooter, {
-      padded: true,
       children: [/*#__PURE__*/_jsx(ArticleByline, {
         footnotes: footNotes,
         authors: authors,

package/es/Article/index.js

@@ -6,7 +6,7 @@
  *
  */
 
-export { Article, ArticleWrapper, ArticleHeader, ArticleFooter, ArticleTitle, ArticleActionWrapper, ArticleHGroup, ArticleContent, ArticlePadding } from "./Article";
+export { Article, ArticleWrapper, ArticleHeader, ArticleFooter, ArticleTitle, ArticleHGroup, ArticleContent } from "./Article";
 export { ArticleByline, ArticleBylineAccordionItem } from "./ArticleByline";
 export { ArticleFootNotes } from "./ArticleFootNotes";
 export { ArticleParagraph } from "./ArticleParagraph";

package/es/CampaignBlock/CampaignBlock.js

@@ -15,7 +15,9 @@ import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Container = styled("div", {
   base: {
+    width: "100%",
     display: "flex",
+    gap: "medium",
     flexDirection: "column",
     border: "1px solid",
     borderColor: "stroke.default",
@@ -34,6 +36,17 @@ const LinkText = styled(Text, {
     display: "flex",
     gap: "xxsmall",
     textDecoration: "underline",
+    _hover: {
+      textDecoration: "none"
+    },
+    paddingBlock: "xsmall",
+    fontWeight: "bold"
+  }
+});
+const LinkHeader = styled(Text, {
+  base: {
+    display: "flex",
+    textDecoration: "underline",
     _hover: {
       textDecoration: "none"
     }
@@ -45,8 +58,11 @@ const StyledImg = styled("img", {
     objectFit: "cover",
     width: "100%",
     height: "215px",
-    desktop: {
+    mobileWide: {
       height: "340px"
+    },
+    tabletWide: {
+      width: "auto"
     }
   }
 });
@@ -56,12 +72,24 @@ const ContentWrapper = styled("div", {
     position: "relative",
     display: "flex",
     flexDirection: "column",
-    gap: "xsmall",
+    gap: "medium",
     alignItems: "flex-start",
+    justifyContent: "center",
     paddingBlock: "medium",
     paddingInline: "medium"
   }
 });
+const StyledText = styled(Text, {
+  base: {
+    tabletWide: {
+      display: "block",
+      overflow: "hidden",
+      position: "relative",
+      lineClamp: 4,
+      boxOrient: "vertical"
+    }
+  }
+});
 const StyledSafeLink = styled(SafeLink, {
   base: {
     color: "inherit"
@@ -96,7 +124,7 @@ const CampaignBlock = _ref2 => {
     width: 455,
     alt: image.alt
   });
-  const HeaderComponent = url?.url ? LinkText : Text;
+  const HeaderComponent = url?.url ? LinkHeader : Text;
   return /*#__PURE__*/_jsxs(Container, {
     className: className,
     "data-embed-type": "campaign-block",
@@ -112,8 +140,8 @@ const CampaignBlock = _ref2 => {
             children: parse(title)
           })
         })
-      }), /*#__PURE__*/_jsx(Text, {
-        textStyle: "body.large",
+      }), /*#__PURE__*/_jsx(StyledText, {
+        textStyle: "body.xlarge",
         children: parse(description)
       }), !!url?.url && /*#__PURE__*/_jsx(MaybeLinkText, {
         url: url.url,

package/es/ContentTypeBadge/ContentTypeBadge.js

@@ -14,6 +14,8 @@ import { MenuSearchLine, LearningPath, SharedResource, TasksAndActivities } from
 import { ChatLine, FileListLine, LinkMedium, ImageLine, MovieLine } from "@ndla/icons/editor";
 import { styled } from "@ndla/styled-system/jsx";
 import * as contentTypes from "../model/ContentType";
+
+// TODO: Remove this component
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledContentTypeBadge = styled("div", {
   base: {