@ndla/ui 56.0.5-alpha.0 → 56.0.7-alpha.0

package/dist/panda.buildinfo.json

@@ -2,19 +2,21 @@
   "schemaVersion": "0.44.0",
   "styles": {
     "atomic": [
+      "paddingInline]___[value:8%",
+      "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",
       "display]___[value:flex",
       "flexDirection]___[value:column",
       "color]___[value:text.default",
-      "gap]___[value:xxlarge",
-      "background]___[value:surface.default",
-      "paddingBlock]___[value:xsmall",
-      "paddingInline]___[value:8%",
       "alignItems]___[value:center",
       "width]___[value:100%",
       "overflowWrap]___[value:break-word",
       "position]___[value:relative",
-      "paddingBlock]___[value:medium]___[cond:tablet",
-      "paddingBlock]___[value:xxlarge]___[cond:desktop",
       "transform]___[value:scaleY(100) translateY(0.075em)]___[cond:& mjx-stretchy-v > mjx-ext > mjx-c",
       "content]___[value:]___[cond:_after",
       "display]___[value:table]___[cond:_after",
@@ -28,13 +30,14 @@
       "top]___[value:medium]___[cond:tablet",
       "top]___[value:xxlarge]___[cond:desktop",
       "gap]___[value:medium",
+      "gap]___[value:xxlarge",
       "marginBlockStart]___[value:medium",
-      "paddingBlockStart]___[value:xsmall",
       "borderTop]___[value:1px solid",
       "borderColor]___[value:stroke.subtle",
       "flexDirection]___[value:column-reverse",
       "gap]___[value:3xsmall",
       "justifyContent]___[value:space-between",
+      "paddingBlock]___[value:xsmall",
       "textStyle]___[value:body.medium",
       "flexDirection]___[value:row]___[cond:tabletWide",
       "paddingBlockStart]___[value:xxlarge",
@@ -130,9 +133,6 @@
       "textDecoration]___[value:none]___[cond:_hover",
       "textDecoration]___[value:none]___[cond:_focusVisible",
       "display]___[value:none]___[cond:tabletDown",
-      "maxWidth]___[value:surface.xsmall",
-      "maxWidth]___[value:surface.medium]___[cond:mobileWide",
-      "maxWidth]___[value:1100px]___[cond:tabletWide",
       "alignSelf]___[value:center",
       "height]___[value:215px",
       "height]___[value:340px]___[cond:desktop",
@@ -171,7 +171,6 @@
       "opacity]___[value:0.7]___[cond:& .token.namespace",
       "display]___[value:inline",
       "display]___[value:inline]___[cond:& p",
-      "maxWidth]___[value:744px",
       "minWidth]___[value:surface.xxsmall",
       "padding]___[value:medium",
       "alignItems]___[value:unset]___[cond:tablet",
@@ -243,7 +242,6 @@
       "width]___[value:100%]___[cond:& iframe",
       "textStyle]___[value:label.xsmall]___[cond:& a",
       "marginInlineStart]___[value:1]___[cond:& a",
-      "borderColor]___[value:surface.brand.1.strong",
       "borderBottom]___[value:0",
       "borderBottomLeftRadius]___[value:0",
       "borderBottomRightRadius]___[value:0",

package/dist/styles.css

@@ -85,28 +85,28 @@
 }
 }
 
-  .d_flex {
-    display: flex;
+  .px_8\% {
+    padding-inline: 8%;
 }
 
-  .c_text\.default {
-    color: var(--colors-text-default);
+  .pbs_xsmall {
+    padding-block-start: var(--spacing-xsmall);
 }
 
-  .gap_xxlarge {
-    gap: var(--spacing-xxlarge);
+  .pbe_xsmall {
+    padding-block-end: var(--spacing-xsmall);
 }
 
   .bg_surface\.default {
     background: var(--colors-surface-default);
 }
 
-  .py_xsmall {
-    padding-block: var(--spacing-xsmall);
+  .d_flex {
+    display: flex;
 }
 
-  .px_8\% {
-    padding-inline: 8%;
+  .c_text\.default {
+    color: var(--colors-text-default);
 }
 
   .w_100\% {
@@ -133,12 +133,12 @@
     gap: var(--spacing-medium);
 }
 
-  .mbs_medium {
-    margin-block-start: var(--spacing-medium);
+  .gap_xxlarge {
+    gap: var(--spacing-xxlarge);
 }
 
-  .pbs_xsmall {
-    padding-block-start: var(--spacing-xsmall);
+  .mbs_medium {
+    margin-block-start: var(--spacing-medium);
 }
 
   .bd-t_1px_solid {
@@ -149,6 +149,10 @@
     gap: var(--spacing-3xsmall);
 }
 
+  .py_xsmall {
+    padding-block: var(--spacing-xsmall);
+}
+
   .pbs_xxlarge {
     padding-block-start: var(--spacing-xxlarge);
 }
@@ -338,10 +342,6 @@
     text-decoration: underline;
 }
 
-  .max-w_surface\.xsmall {
-    max-width: var(--sizes-surface-xsmall);
-}
-
   .h_215px {
     height: 215px;
 }
@@ -366,10 +366,6 @@
     display: inline;
 }
 
-  .max-w_744px {
-    max-width: 744px;
-}
-
   .min-w_surface\.xxsmall {
     min-width: var(--sizes-surface-xxsmall);
 }
@@ -722,10 +718,6 @@
     background-color: var(--colors-surface-disabled);
 }
 
-  .bd-c_surface\.brand\.1\.strong {
-    border-color: var(--colors-surface-brand-1-strong);
-}
-
   .bdr-bl_0 {
     border-bottom-left-radius: 0;
 }
@@ -1420,9 +1412,6 @@
 }
 
   @media screen and (min-width: 29.75rem) {
-    .mobileWide\:max-w_surface\.medium {
-      max-width: var(--sizes-surface-medium);
-}
     .mobileWide\:d_none {
       display: none;
 }
@@ -1435,8 +1424,11 @@
 }
 
   @media screen and (min-width: 37.5625rem) {
-    .tablet\:py_medium {
-      padding-block: var(--spacing-medium);
+    .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);
@@ -1521,9 +1513,6 @@
 }
     .tabletWide\:max-w_532px {
       max-width: 532px;
-}
-    .tabletWide\:max-w_1100px {
-      max-width: 1100px;
 }
     .tabletWide\:flex-d_row {
       flex-direction: row;
@@ -1534,8 +1523,11 @@
 }
 
   @media screen and (min-width: 61.3125rem) {
-    .desktop\:py_xxlarge {
-      padding-block: var(--spacing-xxlarge);
+    .desktop\:pbs_xxlarge {
+      padding-block-start: var(--spacing-xxlarge);
+}
+    .desktop\:pbe_xxlarge {
+      padding-block-end: var(--spacing-xxlarge);
 }
     .desktop\:w_260px {
       width: 260px;

package/es/Article/Article.js

@@ -6,31 +6,84 @@
  *
  */
 
+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 ArticleByline from "./ArticleByline";
-import { ArticleContent } from "./ArticleContent";
+import { ArticleByline } from "./ArticleByline";
 import { ContentTypeBadgeNew } from "..";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ArticleWrapper = styled("article", {
+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,
+  variants: {
+    padStart: {
+      true: paddingBlockStart
+    },
+    padEnd: {
+      true: paddingBlockEnd
+    }
+  }
+}, {
+  baseComponent: true
+});
+const StyledArticleContent = styled(ark.section, {
+  base: {
+    background: "surface.default"
+  },
+  variants: {
+    padded: {
+      true: {
+        ...articlePadding,
+        ...paddingBlockStart,
+        ...paddingBlockEnd
+      }
+    }
+  }
+}, {
+  baseComponent: true
+});
+export const ArticleContent = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    className,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledArticleContent, {
+    className: cx("ndla-article", className),
+    ...props,
+    ref: ref
+  });
+});
+const StyledArticleWrapper = styled(ark.article, {
   base: {
     display: "flex",
     flexDirection: "column",
     color: "text.default",
-    gap: "xxlarge",
-    background: "surface.default",
-    paddingBlock: "xsmall",
-    paddingInline: "8%",
     alignItems: "center",
     width: "100%",
     overflowWrap: "break-word",
     position: "relative",
-    tablet: {
-      paddingBlock: "medium"
-    },
-    desktop: {
-      paddingBlock: "xxlarge"
-    },
     "& mjx-stretchy-v > mjx-ext > mjx-c": {
       transform: "scaleY(100) translateY(0.075em)"
     },
@@ -40,8 +93,15 @@ export const ArticleWrapper = styled("article", {
       clear: "both"
     }
   }
+}, {
+  baseComponent: true
 });
-const ArticleTitleWrapper = styled("hgroup", {
+export const ArticleWrapper = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(StyledArticleWrapper, {
+  "data-ndla-article": "",
+  ref: ref,
+  ...props
+}));
+export const ArticleHGroup = styled(ark.hgroup, {
   base: {
     display: "flex",
     width: "100%",
@@ -52,8 +112,10 @@ const ArticleTitleWrapper = styled("hgroup", {
       overflowWrap: "anywhere"
     }
   }
+}, {
+  baseComponent: true
 });
-const ArticleFavoritesButtonWrapper = styled("div", {
+export const ArticleActionWrapper = styled(ark.div, {
   base: {
     position: "absolute",
     right: "8%",
@@ -65,25 +127,83 @@ const ArticleFavoritesButtonWrapper = styled("div", {
       top: "xxlarge"
     }
   }
+}, {
+  baseComponent: true
 });
-export const ArticleHeader = styled("header", {
+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
+      }
+    }
   }
+}, {
+  baseComponent: true
 });
-export const ArticleFooter = styled("footer", {
+export const ArticleFooter = styled(ark.footer, {
   base: {
     display: "flex",
     flexDirection: "column",
+    background: "surface.default",
     gap: "xxlarge",
     width: "100%"
+  },
+  variants: {
+    padded: {
+      true: {
+        ...articlePadding,
+        ...paddingBlockEnd
+      }
+    }
   }
+}, {
+  baseComponent: true
 });
-export const Article = _ref => {
+export const ArticleTitle = _ref2 => {
+  let {
+    contentType,
+    heartButton,
+    title,
+    lang,
+    id,
+    introduction,
+    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
+      }), /*#__PURE__*/_jsx(Heading, {
+        textStyle: "heading.large",
+        id: id,
+        lang: lang,
+        children: title
+      })]
+    }), !!introduction && /*#__PURE__*/_jsx(Text, {
+      lang: lang,
+      textStyle: "body.xlarge",
+      asChild: true,
+      consumeCss: true,
+      children: /*#__PURE__*/_jsx("div", {
+        children: introduction
+      })
+    }), competenceGoals]
+  });
+};
+export const Article = _ref3 => {
   let {
     article,
     contentType,
@@ -93,7 +213,7 @@ export const Article = _ref => {
     id,
     heartButton,
     lang
-  } = _ref;
+  } = _ref3;
   const {
     title,
     introduction,
@@ -104,32 +224,19 @@ export const Article = _ref => {
   } = article;
   const authors = copyright?.creators.length || copyright?.rightsholders.length ? copyright.creators : copyright?.processors;
   return /*#__PURE__*/_jsxs(ArticleWrapper, {
-    "data-ndla-article": "",
-    children: [/*#__PURE__*/_jsxs(ArticleHeader, {
-      children: [/*#__PURE__*/_jsxs(ArticleTitleWrapper, {
-        children: [!!contentType && /*#__PURE__*/_jsx(ContentTypeBadgeNew, {
-          contentType: contentType
-        }), !!heartButton && /*#__PURE__*/_jsx(ArticleFavoritesButtonWrapper, {
-          children: heartButton
-        }), /*#__PURE__*/_jsx(Heading, {
-          textStyle: "heading.large",
-          id: id,
-          tabIndex: -1,
-          lang: lang,
-          children: title
-        })]
-      }), !!introduction && /*#__PURE__*/_jsx(Text, {
-        lang: lang,
-        textStyle: "body.xlarge",
-        asChild: true,
-        consumeCss: true,
-        children: /*#__PURE__*/_jsx("div", {
-          children: introduction
-        })
-      }), competenceGoals]
+    children: [/*#__PURE__*/_jsx(ArticleTitle, {
+      id: id,
+      contentType: contentType,
+      heartButton: heartButton,
+      title: title,
+      introduction: introduction,
+      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/ArticleByline.js

@@ -6,14 +6,14 @@
  *
  */
 
-import { useCallback, useEffect, useState } from "react";
+import { forwardRef, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import { ArrowDownShortLine } from "@ndla/icons/common";
 import { getLicenseByAbbreviation } from "@ndla/licenses";
 import { AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, Heading } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import ArticleFootNotes from "./ArticleFootNotes";
+import { ArticleFootNotes } from "./ArticleFootNotes";
 import { LicenseLink } from "../LicenseByline/LicenseLink";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Wrapper = styled("div", {
@@ -86,7 +86,7 @@ const StyledAccordionRoot = styled(AccordionRoot, {
 });
 const refRegexp = /note\d/;
 const footnotesAccordionId = "footnotes";
-const ArticleByline = _ref => {
+export const ArticleByline = _ref => {
   let {
     authors = [],
     suppliers = [],
@@ -145,46 +145,46 @@ const ArticleByline = _ref => {
       multiple: true,
       value: openAccordions,
       onValueChange: details => setOpenAccordions(details.value),
-      children: [licenseBox && /*#__PURE__*/_jsxs(AccordionItem, {
+      children: [!!licenseBox && /*#__PURE__*/_jsx(ArticleBylineAccordionItem, {
         value: accordionItemValue,
-        children: [/*#__PURE__*/_jsxs(AccordionItemTrigger, {
-          children: [/*#__PURE__*/_jsx(Heading, {
-            asChild: true,
-            consumeCss: true,
-            textStyle: "label.medium",
-            fontWeight: "bold",
-            children: /*#__PURE__*/_jsx("h2", {
-              children: t("article.useContent")
-            })
-          }), /*#__PURE__*/_jsx(AccordionItemIndicator, {
-            asChild: true,
-            children: /*#__PURE__*/_jsx(ArrowDownShortLine, {})
-          })]
-        }), /*#__PURE__*/_jsx(AccordionItemContent, {
-          children: licenseBox
-        })]
-      }), !!footnotes?.length && /*#__PURE__*/_jsxs(AccordionItem, {
+        accordionTitle: t("article.useContent"),
+        children: licenseBox
+      }), !!footnotes?.length && /*#__PURE__*/_jsx(ArticleBylineAccordionItem, {
         value: footnotesAccordionId,
-        children: [/*#__PURE__*/_jsxs(AccordionItemTrigger, {
-          children: [/*#__PURE__*/_jsx(Heading, {
-            asChild: true,
-            consumeCss: true,
-            textStyle: "label.medium",
-            fontWeight: "bold",
-            children: /*#__PURE__*/_jsx("h2", {
-              children: t("article.footnotes")
-            })
-          }), /*#__PURE__*/_jsx(AccordionItemIndicator, {
-            asChild: true,
-            children: /*#__PURE__*/_jsx(ArrowDownShortLine, {})
-          })]
-        }), /*#__PURE__*/_jsx(AccordionItemContent, {
-          children: /*#__PURE__*/_jsx(ArticleFootNotes, {
-            footNotes: footnotes
-          })
-        })]
+        accordionTitle: t("article.footnotes"),
+        children: /*#__PURE__*/_jsx(ArticleFootNotes, {
+          footNotes: footnotes
+        })
       })]
     })]
   });
 };
-export default ArticleByline;
+export const ArticleBylineAccordionItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    value,
+    accordionTitle,
+    children,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/_jsxs(AccordionItem, {
+    value: value,
+    ref: ref,
+    ...props,
+    children: [/*#__PURE__*/_jsxs(AccordionItemTrigger, {
+      children: [/*#__PURE__*/_jsx(Heading, {
+        asChild: true,
+        consumeCss: true,
+        textStyle: "label.medium",
+        fontWeight: "bold",
+        children: /*#__PURE__*/_jsx("h2", {
+          children: accordionTitle
+        })
+      }), /*#__PURE__*/_jsx(AccordionItemIndicator, {
+        asChild: true,
+        children: /*#__PURE__*/_jsx(ArrowDownShortLine, {})
+      })]
+    }), /*#__PURE__*/_jsx(AccordionItemContent, {
+      children: children
+    })]
+  });
+});

package/es/Article/ArticleFootNotes.js

@@ -48,7 +48,7 @@ const FootnoteList = styled("ol", {
     listStyle: "none"
   }
 });
-const ArticleFootNotes = _ref2 => {
+export const ArticleFootNotes = _ref2 => {
   let {
     footNotes
   } = _ref2;
@@ -57,5 +57,4 @@ const ArticleFootNotes = _ref2 => {
       footNote: footNote
     }, footNote.ref))
   });
-};
-export default ArticleFootNotes;
+};

package/es/Article/index.js

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

package/es/CampaignBlock/CampaignBlock.js

@@ -23,14 +23,8 @@ const Container = styled("div", {
     borderRadius: "xsmall",
     boxShadow: "full",
     marginBlockEnd: "4xsmall",
-    maxWidth: "surface.xsmall",
     overflow: "hidden",
-    mobileWide: {
-      maxWidth: "surface.medium"
-    },
     tabletWide: {
-      // TODO: This is probably not the correct max-width. And it should be a token
-      maxWidth: "1100px",
       flexDirection: "row"
     }
   }

package/es/Concept/Concept.js

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

package/es/ContactBlock/ContactBlock.js

@@ -32,7 +32,6 @@ export const contactBlockBackgrounds = Object.keys(BackgroundVariant);
 const StyledWrapper = styled("div", {
   base: {
     display: "flex",
-    maxWidth: "744px",
     minWidth: "surface.xxsmall",
     padding: "medium",
     alignItems: "center",

package/es/Embed/ConceptEmbed.js

@@ -69,10 +69,6 @@ export const ConceptEmbed = _ref => {
     children: parsedContent
   });
 };
-// TODO: Consider if we should make this act like the old concept popover.
-// Should it take up the entire screen height on mobile? I don't think we need to.
-// Should it always stay directly underneath the trigger?
-
 export const InlineConcept = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     linkText,

package/es/Embed/ImageEmbed.js

@@ -93,8 +93,7 @@ const ImageWrapper = styled("div", {
     border: {
       true: {
         border: "1px solid",
-        // TODO: Not sure if we want this color.
-        borderColor: "surface.brand.1.strong",
+        borderColor: "stroke.subtle",
         borderBottom: "0",
         borderRadius: "xsmall",
         borderBottomLeftRadius: "0",
@@ -127,8 +126,6 @@ const StyledFigure = styled(Figure, {
     }
   }
 });
-
-// TODO: Ask about BylineButton styling. Not included in design
 const BylineButton = styled("button", {
   base: {
     cursor: "pointer",