@ndla/ui 56.0.4-alpha.0 → 56.0.6-alpha.0

package/dist/panda.buildinfo.json

@@ -119,22 +119,17 @@
       "width]___[value:fit-content",
       "maxWidth]___[value:8xl",
       "flexWrap]___[value:wrap",
+      "gap]___[value:xxsmall",
       "alignItems]___[value:flex-start]___[cond:mobileDown",
       "justifyContent]___[value:center]___[cond:mobileDown",
       "flexDirection]___[value:column]___[cond:mobileDown",
-      "gap]___[value:xxsmall]___[cond:mobileDown",
       "color]___[value:inherit",
-      "gap]___[value:4xsmall",
       "alignItems]___[value:flex-end",
       "display]___[value:block]___[cond:tabletDown",
       "textDecoration]___[value:underline",
       "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",
-      "gap]___[value:xxsmall",
       "alignSelf]___[value:center",
       "height]___[value:215px",
       "height]___[value:340px]___[cond:desktop",
@@ -245,7 +240,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

@@ -326,26 +326,18 @@
     max-width: 8xl;
 }
 
-  .c_inherit {
-    color: inherit;
+  .gap_xxsmall {
+    gap: var(--spacing-xxsmall);
 }
 
-  .gap_4xsmall {
-    gap: var(--spacing-4xsmall);
+  .c_inherit {
+    color: inherit;
 }
 
   .td_underline {
     text-decoration: underline;
 }
 
-  .max-w_surface\.xsmall {
-    max-width: var(--sizes-surface-xsmall);
-}
-
-  .gap_xxsmall {
-    gap: var(--spacing-xxsmall);
-}
-
   .h_215px {
     height: 215px;
 }
@@ -726,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;
 }
@@ -1424,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;
 }
@@ -1525,9 +1510,6 @@
 }
     .tabletWide\:max-w_532px {
       max-width: 532px;
-}
-    .tabletWide\:max-w_1100px {
-      max-width: 1100px;
 }
     .tabletWide\:flex-d_row {
       flex-direction: row;
@@ -1723,9 +1705,6 @@
   @media screen and (max-width: 19.9975rem) {
     .mobileDown\:px_xsmall {
       padding-inline: var(--spacing-xsmall);
-}
-    .mobileDown\:gap_xxsmall {
-      gap: var(--spacing-xxsmall);
 }
     .mobileDown\:ai_flex-start {
       align-items: flex-start;

package/es/Article/Article.js

@@ -6,13 +6,29 @@
  *
  */
 
+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 { ContentTypeBadgeNew } from "..";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const ArticleWrapper = styled("article", {
+const StyledArticleContent = styled(ark.section, {}, {
+  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("article", {
   base: {
     display: "flex",
     flexDirection: "column",
@@ -41,7 +57,12 @@ export const ArticleWrapper = styled("article", {
     }
   }
 });
-const ArticleTitleWrapper = styled("hgroup", {
+export const ArticleWrapper = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(StyledArticleWrapper, {
+  "data-ndla-article": "",
+  ref: ref,
+  ...props
+}));
+export const ArticleHGroup = styled("hgroup", {
   base: {
     display: "flex",
     width: "100%",
@@ -53,7 +74,7 @@ const ArticleTitleWrapper = styled("hgroup", {
     }
   }
 });
-const ArticleFavoritesButtonWrapper = styled("div", {
+export const ArticleActionWrapper = styled("div", {
   base: {
     position: "absolute",
     right: "8%",
@@ -83,7 +104,40 @@ export const ArticleFooter = styled("footer", {
     width: "100%"
   }
 });
-export const Article = _ref => {
+export const ArticleTitle = _ref2 => {
+  let {
+    contentType,
+    heartButton,
+    title,
+    lang,
+    id,
+    introduction,
+    competenceGoals
+  } = _ref2;
+  return /*#__PURE__*/_jsxs(ArticleHeader, {
+    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 +147,7 @@ export const Article = _ref => {
     id,
     heartButton,
     lang
-  } = _ref;
+  } = _ref3;
   const {
     title,
     introduction,
@@ -104,29 +158,14 @@ 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, {
       children: content
     }), /*#__PURE__*/_jsxs(ArticleFooter, {

package/es/Article/index.js

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

package/es/Breadcrumb/Breadcrumb.js

@@ -16,12 +16,11 @@ const StyledList = styled("ol", {
     flexWrap: "wrap",
     alignItems: "center",
     listStyle: "none",
-    gap: "xsmall",
+    gap: "xxsmall",
     mobileDown: {
       alignItems: "flex-start",
       justifyContent: "center",
-      flexDirection: "column",
-      gap: "xxsmall"
+      flexDirection: "column"
     }
   }
 });

package/es/Breadcrumb/BreadcrumbItem.js

@@ -15,7 +15,7 @@ const StyledListItem = styled("li", {
   base: {
     display: "flex",
     color: "inherit",
-    gap: "4xsmall",
+    gap: "3xsmall",
     alignItems: "flex-end",
     tabletDown: {
       display: "block"

package/es/Breadcrumb/HomeBreadcrumb.js

@@ -6,7 +6,7 @@
  *
  */
 
-import { ArrowRightShortLine, HomeFill } from "@ndla/icons/common";
+import { ArrowRightShortLine, HomeLine } from "@ndla/icons/common";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
 import Breadcrumb from "./Breadcrumb";
@@ -49,7 +49,7 @@ const HomeBreadcrumb = _ref => {
       return /*#__PURE__*/_jsx(IconSafeLink, {
         "aria-label": item.name,
         to: item.to,
-        children: /*#__PURE__*/_jsx(HomeFill, {
+        children: /*#__PURE__*/_jsx(HomeLine, {
           title: item.name
         })
       });

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/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",

package/es/LinkBlock/LinkBlock.js

@@ -32,8 +32,8 @@ const StyledSafeLink = styled(SafeLink, {
     background: "surface.default",
     padding: "medium",
     border: "1px solid",
-    // TODO: Check if this is correct. Not part of design. Also check if this should have border-radius.
-    borderColor: "stroke.default",
+    borderColor: "stroke.subtle",
+    borderRadius: "xsmall",
     "& h3": {
       textDecoration: "underline"
     },

package/es/index.js

@@ -11,7 +11,7 @@
 
 export { ImageEmbed, getCrop, getFocalPoint, AudioEmbed, H5pEmbed, ExternalEmbed, IframeEmbed, FootnoteEmbed, BrightcoveEmbed, ContentLinkEmbed, RelatedContentEmbed, ConceptEmbed, ConceptListEmbed, UnknownEmbed, InlineConcept, BlockConcept, UuDisclaimerEmbed, CopyrightEmbed, CodeEmbed } from "./Embed";
 export { LicenseLink, EmbedByline } from "./LicenseByline";
-export { ArticleByline, ArticleFootNotes, ArticleWrapper, Article, ArticleParagraph, ArticleFooter, ArticleHeader, ArticleContent } from "./Article";
+export { ArticleByline, ArticleFootNotes, ArticleWrapper, Article, ArticleParagraph, ArticleFooter, ArticleHeader, ArticleContent, ArticleHGroup, ArticleActionWrapper, ArticleTitle } from "./Article";
 export { getPossiblyRelativeUrl } from "./utils/relativeUrl";
 export { default as ContentLoader } from "./ContentLoader";
 export { default as RelatedArticleList, RelatedArticle } from "./RelatedArticleList";

package/es/styles.css

@@ -326,26 +326,18 @@
     max-width: 8xl;
 }
 
-  .c_inherit {
-    color: inherit;
+  .gap_xxsmall {
+    gap: var(--spacing-xxsmall);
 }
 
-  .gap_4xsmall {
-    gap: var(--spacing-4xsmall);
+  .c_inherit {
+    color: inherit;
 }
 
   .td_underline {
     text-decoration: underline;
 }
 
-  .max-w_surface\.xsmall {
-    max-width: var(--sizes-surface-xsmall);
-}
-
-  .gap_xxsmall {
-    gap: var(--spacing-xxsmall);
-}
-
   .h_215px {
     height: 215px;
 }
@@ -726,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;
 }
@@ -1424,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;
 }
@@ -1525,9 +1510,6 @@
 }
     .tabletWide\:max-w_532px {
       max-width: 532px;
-}
-    .tabletWide\:max-w_1100px {
-      max-width: 1100px;
 }
     .tabletWide\:flex-d_row {
       flex-direction: row;
@@ -1723,9 +1705,6 @@
   @media screen and (max-width: 19.9975rem) {
     .mobileDown\:px_xsmall {
       padding-inline: var(--spacing-xsmall);
-}
-    .mobileDown\:gap_xxsmall {
-      gap: var(--spacing-xxsmall);
 }
     .mobileDown\:ai_flex-start {
       align-items: flex-start;

package/es/utils/relativeUrl.js

@@ -23,13 +23,15 @@ export const getPossiblyRelativeUrl = (url, path) => {
   // If the host is the same, return the relative path
   if (urlObj.hostname.replace(REPLACE_WWW, "") === pathObj.hostname.replace(REPLACE_WWW, "")) {
     // Replace the language part of the url with the language part of the path
+    // Keep the search params if they exist
+    const search = urlObj.search;
     // If the path language part does not exist, remove it.
     const urlMatch = urlObj.pathname.match(LANGUAGE_REGEX);
     const pathMatch = pathObj.pathname.match(LANGUAGE_REGEX);
     if (urlMatch?.[1] && urlMatch?.[1] !== pathMatch?.[1]) {
-      return urlObj.pathname.replace(urlMatch[1], pathMatch?.[1] || "");
+      return `${urlObj.pathname.replace(urlMatch[1], pathMatch?.[1] || "")}${search}`;
     }
-    return urlObj.pathname;
+    return `${urlObj.pathname}${search}`;
   }
   return url;
 };

package/lib/Article/Article.d.ts

@@ -8,10 +8,29 @@
 import { ReactNode } from "react";
 import { ContentType } from "../ContentTypeBadge/ContentTypeBadgeNew";
 import { Article as ArticleType } from "../types";
-export declare const ArticleWrapper: import("@ndla/styled-system/types").StyledComponent<"article", {}>;
+export declare const ArticleContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLElement>>;
+export declare const ArticleWrapper: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
+} & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export declare const ArticleHGroup: import("@ndla/styled-system/types").StyledComponent<"hgroup", {}>;
+export declare const ArticleActionWrapper: import("@ndla/styled-system/types").StyledComponent<"div", {}>;
 export declare const ArticleHeader: import("@ndla/styled-system/types").StyledComponent<"header", {}>;
 export declare const ArticleFooter: import("@ndla/styled-system/types").StyledComponent<"footer", {}>;
-type Props = {
+interface ArticleTitleProps {
+    heartButton?: ReactNode;
+    contentType?: ContentType;
+    competenceGoals?: ReactNode;
+    id: string;
+    lang?: string;
+    title?: ReactNode;
+    introduction?: ReactNode;
+}
+export declare const ArticleTitle: ({ contentType, heartButton, title, lang, id, introduction, competenceGoals, }: ArticleTitleProps) => import("react/jsx-runtime").JSX.Element;
+interface Props {
     heartButton?: ReactNode;
     article: ArticleType;
     licenseBox?: ReactNode;
@@ -20,6 +39,6 @@ type Props = {
     competenceGoals?: ReactNode;
     id: string;
     lang?: string;
-};
+}
 export declare const Article: ({ article, contentType, licenseBox, children, competenceGoals, id, heartButton, lang, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/Article/Article.js

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ArticleWrapper = exports.ArticleHeader = exports.ArticleFooter = exports.Article = void 0;
+exports.ArticleWrapper = exports.ArticleTitle = exports.ArticleHeader = exports.ArticleHGroup = exports.ArticleFooter = exports.ArticleContent = exports.ArticleActionWrapper = exports.Article = void 0;
+var _react = require("react");
+var _react2 = require("@ark-ui/react");
 var _primitives = require("@ndla/primitives");
+var _css = require("@ndla/styled-system/css");
 var _jsx2 = require("@ndla/styled-system/jsx");
 var _ArticleByline = _interopRequireDefault(require("./ArticleByline"));
-var _ArticleContent = require("./ArticleContent");
 var _ = require("..");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -19,7 +21,21 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  *
  */
 
-const ArticleWrapper = exports.ArticleWrapper = (0, _jsx2.styled)("article", {
+const StyledArticleContent = (0, _jsx2.styled)(_react2.ark.section, {}, {
+  baseComponent: true
+});
+const ArticleContent = exports.ArticleContent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    className,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledArticleContent, {
+    className: (0, _css.cx)("ndla-article", className),
+    ...props,
+    ref: ref
+  });
+});
+const StyledArticleWrapper = (0, _jsx2.styled)("article", {
   base: {
     display: "flex",
     flexDirection: "column",
@@ -48,7 +64,12 @@ const ArticleWrapper = exports.ArticleWrapper = (0, _jsx2.styled)("article", {
     }
   }
 });
-const ArticleTitleWrapper = (0, _jsx2.styled)("hgroup", {
+const ArticleWrapper = exports.ArticleWrapper = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledArticleWrapper, {
+  "data-ndla-article": "",
+  ref: ref,
+  ...props
+}));
+const ArticleHGroup = exports.ArticleHGroup = (0, _jsx2.styled)("hgroup", {
   base: {
     display: "flex",
     width: "100%",
@@ -60,7 +81,7 @@ const ArticleTitleWrapper = (0, _jsx2.styled)("hgroup", {
     }
   }
 });
-const ArticleFavoritesButtonWrapper = (0, _jsx2.styled)("div", {
+const ArticleActionWrapper = exports.ArticleActionWrapper = (0, _jsx2.styled)("div", {
   base: {
     position: "absolute",
     right: "8%",
@@ -90,7 +111,41 @@ const ArticleFooter = exports.ArticleFooter = (0, _jsx2.styled)("footer", {
     width: "100%"
   }
 });
-const Article = _ref => {
+const ArticleTitle = _ref2 => {
+  let {
+    contentType,
+    heartButton,
+    title,
+    lang,
+    id,
+    introduction,
+    competenceGoals
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleHeader, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleHGroup, {
+      children: [!!contentType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ContentTypeBadgeNew, {
+        contentType: contentType
+      }), !!heartButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleActionWrapper, {
+        children: heartButton
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
+        textStyle: "heading.large",
+        id: id,
+        lang: lang,
+        children: title
+      })]
+    }), !!introduction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
+      lang: lang,
+      textStyle: "body.xlarge",
+      asChild: true,
+      consumeCss: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: introduction
+      })
+    }), competenceGoals]
+  });
+};
+exports.ArticleTitle = ArticleTitle;
+const Article = _ref3 => {
   let {
     article,
     contentType,
@@ -100,7 +155,7 @@ const Article = _ref => {
     id,
     heartButton,
     lang
-  } = _ref;
+  } = _ref3;
   const {
     title,
     introduction,
@@ -111,30 +166,15 @@ const Article = _ref => {
   } = article;
   const authors = copyright?.creators.length || copyright?.rightsholders.length ? copyright.creators : copyright?.processors;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleWrapper, {
-    "data-ndla-article": "",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleHeader, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleTitleWrapper, {
-        children: [!!contentType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ContentTypeBadgeNew, {
-          contentType: contentType
-        }), !!heartButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleFavoritesButtonWrapper, {
-          children: heartButton
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
-          textStyle: "heading.large",
-          id: id,
-          tabIndex: -1,
-          lang: lang,
-          children: title
-        })]
-      }), !!introduction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-        lang: lang,
-        textStyle: "body.xlarge",
-        asChild: true,
-        consumeCss: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          children: introduction
-        })
-      }), competenceGoals]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArticleContent.ArticleContent, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleTitle, {
+      id: id,
+      contentType: contentType,
+      heartButton: heartButton,
+      title: title,
+      introduction: introduction,
+      competenceGoals: competenceGoals,
+      lang: lang
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleContent, {
       children: content
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleFooter, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ArticleByline.default, {

package/lib/Article/index.d.ts

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