@ndla/ui 56.0.123-alpha.0 → 56.0.124-alpha.0

package/es/LinkBlock/LinkBlockSection.js

@@ -1,35 +1,23 @@
-/**
- * Copyright (c) 2023-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
 import { Children } from "react";
 import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledList = styled("ul", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "xsmall",
-    listStyle: "none"
-  }
-});
-const LinkBlockSection = _ref => {
-  let {
-    children,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/_jsx("nav", {
-    ...rest,
-    "data-embed-type": "link-block-list",
-    children: /*#__PURE__*/_jsx(StyledList, {
-      children: Children.map(children, child => /*#__PURE__*/_jsx("li", {
-        children: child
-      }))
-    })
-  });
+import { jsx } from "react/jsx-runtime";
+
+//#region src/LinkBlock/LinkBlockSection.tsx
+const StyledList = styled("ul", { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "xsmall",
+	listStyle: "none"
+} });
+const LinkBlockSection = ({ children,...rest }) => {
+	return /* @__PURE__ */ jsx("nav", {
+		...rest,
+		"data-embed-type": "link-block-list",
+		children: /* @__PURE__ */ jsx(StyledList, { children: Children.map(children, (child) => /* @__PURE__ */ jsx("li", { children: child })) })
+	});
 };
-export default LinkBlockSection;
+var LinkBlockSection_default = LinkBlockSection;
+
+//#endregion
+export { LinkBlockSection_default };
+//# sourceMappingURL=LinkBlockSection.js.map

package/es/LinkBlock/LinkBlockSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkBlockSection.js","names":[],"sources":["../../src/LinkBlock/LinkBlockSection.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Children, type HTMLAttributes, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props extends HTMLAttributes<HTMLElement> {\n  children: ReactNode;\n}\n\nconst StyledList = styled(\"ul\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    listStyle: \"none\",\n  },\n});\n\nconst LinkBlockSection = ({ children, ...rest }: Props) => {\n  return (\n    <nav {...rest} data-embed-type=\"link-block-list\">\n      <StyledList>\n        {Children.map(children, (child) => (\n          <li>{child}</li>\n        ))}\n      </StyledList>\n    </nav>\n  );\n};\n\nexport default LinkBlockSection;\n"],"mappings":";;;;;AAeA,MAAM,aAAa,OAAO,MAAM,EAC9B,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,WAAW;AACZ,EACF,EAAC;AAEF,MAAM,mBAAmB,CAAC,EAAE,SAAU,GAAG,MAAa,KAAK;AACzD,wBACE,IAAC;EAAI,GAAI;EAAM,mBAAgB;4BAC7B,IAAC,wBACE,SAAS,IAAI,UAAU,CAAC,0BACvB,IAAC,kBAAI,QAAW,CAChB,GACS;GACT;AAET;AAED,+BAAe"}

package/es/Pitch/Pitch.js

@@ -1,83 +1,62 @@
-/**
- * Copyright (c) 2024-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import parse from "html-react-parser";
+import { getPossiblyRelativeUrl } from "../utils/relativeUrl.js";
 import { CardHeading, CardImage, CardRoot, Text } from "@ndla/primitives";
-import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
+import parse from "html-react-parser";
+import { SafeLink } from "@ndla/safelink";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { linkOverlay } from "@ndla/styled-system/patterns";
-import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledCardHeading = styled(CardHeading, {
-  base: {
-    paddingBlockStart: "medium"
-  }
-});
-const StyledText = styled(Text, {
-  base: {
-    paddingBlockEnd: "medium"
-  }
-});
-const StyledCardRoot = styled(CardRoot, {
-  base: {
-    border: "0",
-    display: "flex",
-    flexDirection: "column",
-    gap: "small"
-  }
-});
-const StyledCardImage = styled(CardImage, {
-  base: {
-    aspectRatio: "16/9",
-    height: "unset"
-  }
-});
-export const Pitch = _ref => {
-  let {
-    title,
-    url,
-    metaImage,
-    path,
-    description
-  } = _ref;
-  const href = getPossiblyRelativeUrl(url, path);
-  return /*#__PURE__*/_jsx(StyledCardRoot, {
-    variant: "subtle",
-    "data-embed-type": "pitch",
-    asChild: true,
-    consumeCss: true,
-    children: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx(StyledCardHeading, {
-        textStyle: "heading.small",
-        asChild: true,
-        consumeCss: true,
-        children: /*#__PURE__*/_jsx(SafeLink, {
-          to: href,
-          unstyled: true,
-          css: linkOverlay.raw(),
-          children: parse(title)
-        })
-      }), !!description && /*#__PURE__*/_jsx(StyledText, {
-        textStyle: "body.xlarge",
-        asChild: true,
-        consumeCss: true,
-        children: /*#__PURE__*/_jsx("div", {
-          children: parse(description)
-        })
-      }), /*#__PURE__*/_jsx(StyledCardImage, {
-        variant: "rounded",
-        src: metaImage.url,
-        alt: metaImage.alt,
-        sizes: "480px",
-        fallbackWidth: 300,
-        width: 550,
-        height: 310
-      })]
-    })
-  });
-};
+
+//#region src/Pitch/Pitch.tsx
+const StyledCardHeading = styled(CardHeading, { base: { paddingBlockStart: "medium" } });
+const StyledText = styled(Text, { base: { paddingBlockEnd: "medium" } });
+const StyledCardRoot = styled(CardRoot, { base: {
+	border: "0",
+	display: "flex",
+	flexDirection: "column",
+	gap: "small"
+} });
+const StyledCardImage = styled(CardImage, { base: {
+	aspectRatio: "16/9",
+	height: "unset"
+} });
+const Pitch = ({ title, url, metaImage, path, description }) => {
+	const href = getPossiblyRelativeUrl(url, path);
+	return /* @__PURE__ */ jsx(StyledCardRoot, {
+		variant: "subtle",
+		"data-embed-type": "pitch",
+		asChild: true,
+		consumeCss: true,
+		children: /* @__PURE__ */ jsxs("div", { children: [
+			/* @__PURE__ */ jsx(StyledCardHeading, {
+				textStyle: "heading.small",
+				asChild: true,
+				consumeCss: true,
+				children: /* @__PURE__ */ jsx(SafeLink, {
+					to: href,
+					unstyled: true,
+					css: linkOverlay.raw(),
+					children: parse(title)
+				})
+			}),
+			!!description && /* @__PURE__ */ jsx(StyledText, {
+				textStyle: "body.xlarge",
+				asChild: true,
+				consumeCss: true,
+				children: /* @__PURE__ */ jsx("div", { children: parse(description) })
+			}),
+			/* @__PURE__ */ jsx(StyledCardImage, {
+				variant: "rounded",
+				src: metaImage.url,
+				alt: metaImage.alt,
+				sizes: "480px",
+				fallbackWidth: 300,
+				width: 550,
+				height: 310
+			})
+		] })
+	});
+};
+
+//#endregion
+export { Pitch };
+//# sourceMappingURL=Pitch.js.map

package/es/Pitch/Pitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pitch.js","names":[],"sources":["../../src/Pitch/Pitch.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { CardHeading, CardImage, CardRoot, Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\nexport interface Props {\n  title: string;\n  url: string;\n  description?: string;\n  metaImage: {\n    url: string;\n    alt: string;\n  };\n  path?: string;\n}\n\nconst StyledCardHeading = styled(CardHeading, {\n  base: {\n    paddingBlockStart: \"medium\",\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    paddingBlockEnd: \"medium\",\n  },\n});\n\nconst StyledCardRoot = styled(CardRoot, {\n  base: {\n    border: \"0\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"small\",\n  },\n});\n\nconst StyledCardImage = styled(CardImage, {\n  base: {\n    aspectRatio: \"16/9\",\n    height: \"unset\",\n  },\n});\n\nexport const Pitch = ({ title, url, metaImage, path, description }: Props) => {\n  const href = getPossiblyRelativeUrl(url, path);\n\n  return (\n    <StyledCardRoot variant=\"subtle\" data-embed-type=\"pitch\" asChild consumeCss>\n      <div>\n        <StyledCardHeading textStyle=\"heading.small\" asChild consumeCss>\n          <SafeLink to={href} unstyled css={linkOverlay.raw()}>\n            {parse(title)}\n          </SafeLink>\n        </StyledCardHeading>\n        {!!description && (\n          <StyledText textStyle=\"body.xlarge\" asChild consumeCss>\n            <div>{parse(description)}</div>\n          </StyledText>\n        )}\n        <StyledCardImage\n          variant=\"rounded\"\n          src={metaImage.url}\n          alt={metaImage.alt}\n          sizes=\"480px\"\n          fallbackWidth={300}\n          width={550}\n          height={310}\n        />\n      </div>\n    </StyledCardRoot>\n  );\n};\n"],"mappings":";;;;;;;;;AA0BA,MAAM,oBAAoB,OAAO,aAAa,EAC5C,MAAM,EACJ,mBAAmB,SACpB,EACF,EAAC;AAEF,MAAM,aAAa,OAAO,MAAM,EAC9B,MAAM,EACJ,iBAAiB,SAClB,EACF,EAAC;AAEF,MAAM,iBAAiB,OAAO,UAAU,EACtC,MAAM;CACJ,QAAQ;CACR,SAAS;CACT,eAAe;CACf,KAAK;AACN,EACF,EAAC;AAEF,MAAM,kBAAkB,OAAO,WAAW,EACxC,MAAM;CACJ,aAAa;CACb,QAAQ;AACT,EACF,EAAC;AAEF,MAAa,QAAQ,CAAC,EAAE,OAAO,KAAK,WAAW,MAAM,aAAoB,KAAK;CAC5E,MAAM,OAAO,uBAAuB,KAAK,KAAK;AAE9C,wBACE,IAAC;EAAe,SAAQ;EAAS,mBAAgB;EAAQ;EAAQ;4BAC/D,KAAC;mBACC,IAAC;IAAkB,WAAU;IAAgB;IAAQ;8BACnD,IAAC;KAAS,IAAI;KAAM;KAAS,KAAK,YAAY,KAAK;eAChD,MAAM,MAAM;MACJ;KACO;KACjB,+BACD,IAAC;IAAW,WAAU;IAAc;IAAQ;8BAC1C,IAAC,mBAAK,MAAM,YAAY,GAAO;KACpB;mBAEf,IAAC;IACC,SAAQ;IACR,KAAK,UAAU;IACf,KAAK,UAAU;IACf,OAAM;IACN,eAAe;IACf,OAAO;IACP,QAAQ;KACR;MACE;GACS;AAEpB"}

package/es/RelatedArticleList/RelatedArticleList.js

@@ -1,135 +1,97 @@
-/**
- * Copyright (c) 2023-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
+import { contentTypes } from "../model/ContentType.js";
+import { ContentTypeBadge } from "../ContentTypeBadge/ContentTypeBadge.js";
 import { Children, useMemo, useState } from "react";
+import { Button, CardContent, CardHeading, CardRoot, Heading, Text } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { useTranslation } from "react-i18next";
 import { ExternalLinkLine } from "@ndla/icons";
-import { CardContent, CardHeading, CardRoot, Text, Heading, Button } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
-import { styled } from "@ndla/styled-system/jsx";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { linkOverlay } from "@ndla/styled-system/patterns";
-import { ContentTypeBadge } from "../ContentTypeBadge/ContentTypeBadge";
-import { contentTypes } from "../model/ContentType";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledSpan = styled("span", {
-  base: {
-    display: "flex",
-    gap: "3xsmall"
-  }
-});
-export const RelatedArticle = _ref => {
-  let {
-    title,
-    introduction,
-    to,
-    linkInfo = "",
-    target = "",
-    type = contentTypes.SUBJECT_MATERIAL
-  } = _ref;
-  return /*#__PURE__*/_jsx(CardRoot, {
-    "data-embed-type": "related-article",
-    children: /*#__PURE__*/_jsxs(CardContent, {
-      children: [/*#__PURE__*/_jsx(ContentTypeBadge, {
-        contentType: type
-      }), /*#__PURE__*/_jsx(CardHeading, {
-        asChild: true,
-        consumeCss: true,
-        children: /*#__PURE__*/_jsx("span", {
-          children: /*#__PURE__*/_jsx(SafeLink, {
-            unstyled: true,
-            to: to,
-            target: target,
-            rel: linkInfo ? "noopener noreferrer" : undefined,
-            css: linkOverlay.raw(),
-            children: /*#__PURE__*/_jsxs(StyledSpan, {
-              children: [title, target === "_blank" && /*#__PURE__*/_jsx(ExternalLinkLine, {})]
-            })
-          })
-        })
-      }), /*#__PURE__*/_jsx(Text, {
-        dangerouslySetInnerHTML: {
-          __html: introduction
-        }
-      }), /*#__PURE__*/_jsx(Text, {
-        color: "text.subtle",
-        textStyle: "label.small",
-        children: linkInfo
-      })]
-    })
-  });
+
+//#region src/RelatedArticleList/RelatedArticleList.tsx
+const StyledSpan = styled("span", { base: {
+	display: "flex",
+	gap: "3xsmall"
+} });
+const RelatedArticle = ({ title, introduction, to, linkInfo = "", target = "", type = contentTypes.SUBJECT_MATERIAL }) => {
+	return /* @__PURE__ */ jsx(CardRoot, {
+		"data-embed-type": "related-article",
+		children: /* @__PURE__ */ jsxs(CardContent, { children: [
+			/* @__PURE__ */ jsx(ContentTypeBadge, { contentType: type }),
+			/* @__PURE__ */ jsx(CardHeading, {
+				asChild: true,
+				consumeCss: true,
+				children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(SafeLink, {
+					unstyled: true,
+					to,
+					target,
+					rel: linkInfo ? "noopener noreferrer" : void 0,
+					css: linkOverlay.raw(),
+					children: /* @__PURE__ */ jsxs(StyledSpan, { children: [title, target === "_blank" && /* @__PURE__ */ jsx(ExternalLinkLine, {})] })
+				}) })
+			}),
+			/* @__PURE__ */ jsx(Text, { dangerouslySetInnerHTML: { __html: introduction } }),
+			/* @__PURE__ */ jsx(Text, {
+				color: "text.subtle",
+				textStyle: "label.small",
+				children: linkInfo
+			})
+		] })
+	});
+};
+const HeadingWrapper = styled("div", { base: {
+	display: "flex",
+	width: "100%",
+	justifyContent: "space-between",
+	alignItems: "center",
+	alignSelf: "flex-start"
+} });
+const ArticlesWrapper = styled("div", { base: {
+	display: "grid",
+	width: "100%",
+	gridTemplateColumns: "repeat(2, 1fr)",
+	gap: "medium",
+	tabletDown: { gridTemplateColumns: "1fr" }
+} });
+const StyledSection = styled("section", { base: {
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center",
+	gap: "medium",
+	clear: "both"
+} });
+const StyledButton = styled(Button, { base: { marginBlockStart: "xsmall" } });
+const RelatedArticleList = ({ children = [], articleCount, headingLevel: HeadingElement = "h2", headingButtons,...rest }) => {
+	const [expanded, setExpanded] = useState(false);
+	const { t } = useTranslation();
+	const childCount = useMemo(() => articleCount ?? Children.count(children), [children, articleCount]);
+	const childrenToShow = useMemo(() => childCount > 2 && !expanded ? children?.slice(0, 2) : children, [
+		childCount,
+		children,
+		expanded
+	]);
+	return /* @__PURE__ */ jsxs(StyledSection, {
+		...rest,
+		"data-embed-type": "related-content-list",
+		children: [
+			/* @__PURE__ */ jsxs(HeadingWrapper, { children: [/* @__PURE__ */ jsx(Heading, {
+				asChild: true,
+				consumeCss: true,
+				textStyle: "title.large",
+				fontWeight: "bold",
+				children: /* @__PURE__ */ jsx(HeadingElement, { children: t("related.title") })
+			}), headingButtons] }),
+			/* @__PURE__ */ jsx(ArticlesWrapper, { children: childrenToShow }),
+			childCount > 2 ? /* @__PURE__ */ jsx(StyledButton, {
+				variant: "secondary",
+				onClick: () => setExpanded((p) => !p),
+				children: t(`related.show${expanded ? "Less" : "More"}`)
+			}) : null
+		]
+	});
 };
-const HeadingWrapper = styled("div", {
-  base: {
-    display: "flex",
-    width: "100%",
-    justifyContent: "space-between",
-    alignItems: "center",
-    alignSelf: "flex-start"
-  }
-});
-const ArticlesWrapper = styled("div", {
-  base: {
-    display: "grid",
-    width: "100%",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "medium",
-    tabletDown: {
-      gridTemplateColumns: "1fr"
-    }
-  }
-});
-const StyledSection = styled("section", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    gap: "medium",
-    clear: "both"
-  }
-});
-const StyledButton = styled(Button, {
-  base: {
-    marginBlockStart: "xsmall"
-  }
-});
-export const RelatedArticleList = _ref2 => {
-  let {
-    children = [],
-    articleCount,
-    headingLevel: HeadingElement = "h2",
-    headingButtons,
-    ...rest
-  } = _ref2;
-  const [expanded, setExpanded] = useState(false);
-  const {
-    t
-  } = useTranslation();
-  const childCount = useMemo(() => articleCount ?? Children.count(children), [children, articleCount]);
-  const childrenToShow = useMemo(() => childCount > 2 && !expanded ? children?.slice(0, 2) : children, [childCount, children, expanded]);
-  return /*#__PURE__*/_jsxs(StyledSection, {
-    ...rest,
-    "data-embed-type": "related-content-list",
-    children: [/*#__PURE__*/_jsxs(HeadingWrapper, {
-      children: [/*#__PURE__*/_jsx(Heading, {
-        asChild: true,
-        consumeCss: true,
-        textStyle: "title.large",
-        fontWeight: "bold",
-        children: /*#__PURE__*/_jsx(HeadingElement, {
-          children: t("related.title")
-        })
-      }), headingButtons]
-    }), /*#__PURE__*/_jsx(ArticlesWrapper, {
-      children: childrenToShow
-    }), childCount > 2 ? /*#__PURE__*/_jsx(StyledButton, {
-      variant: "secondary",
-      onClick: () => setExpanded(p => !p),
-      children: t(`related.show${expanded ? "Less" : "More"}`)
-    }) : null]
-  });
-};
+
+//#endregion
+export { RelatedArticle, RelatedArticleList };
+//# sourceMappingURL=RelatedArticleList.js.map

package/es/RelatedArticleList/RelatedArticleList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelatedArticleList.js","names":[],"sources":["../../src/RelatedArticleList/RelatedArticleList.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Children, type ComponentPropsWithoutRef, type ReactElement, type ReactNode, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ExternalLinkLine } from \"@ndla/icons\";\nimport { CardContent, CardHeading, CardRoot, Text, Heading, Button } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { ContentTypeBadge } from \"../ContentTypeBadge/ContentTypeBadge\";\nimport { contentTypes } from \"../model/ContentType\";\nimport type { HeadingLevel } from \"../types\";\n\ninterface RelatedArticleProps {\n  title: string;\n  introduction: string;\n  to: string;\n  linkInfo?: string;\n  target?: string;\n  type?: string;\n}\n\nconst StyledSpan = styled(\"span\", {\n  base: {\n    display: \"flex\",\n    gap: \"3xsmall\",\n  },\n});\n\nexport const RelatedArticle = ({\n  title,\n  introduction,\n  to,\n  linkInfo = \"\",\n  target = \"\",\n  type = contentTypes.SUBJECT_MATERIAL,\n}: RelatedArticleProps) => {\n  return (\n    <CardRoot data-embed-type=\"related-article\">\n      <CardContent>\n        <ContentTypeBadge contentType={type} />\n        <CardHeading asChild consumeCss>\n          <span>\n            <SafeLink\n              unstyled\n              to={to}\n              target={target}\n              rel={linkInfo ? \"noopener noreferrer\" : undefined}\n              css={linkOverlay.raw()}\n            >\n              <StyledSpan>\n                {title}\n                {target === \"_blank\" && <ExternalLinkLine />}\n              </StyledSpan>\n            </SafeLink>\n          </span>\n        </CardHeading>\n        <Text dangerouslySetInnerHTML={{ __html: introduction }} />\n        <Text color=\"text.subtle\" textStyle=\"label.small\">\n          {linkInfo}\n        </Text>\n      </CardContent>\n    </CardRoot>\n  );\n};\n\nconst HeadingWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    width: \"100%\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    alignSelf: \"flex-start\",\n  },\n});\n\nconst ArticlesWrapper = styled(\"div\", {\n  base: {\n    display: \"grid\",\n    width: \"100%\",\n    gridTemplateColumns: \"repeat(2, 1fr)\",\n    gap: \"medium\",\n    tabletDown: {\n      gridTemplateColumns: \"1fr\",\n    },\n  },\n});\n\nconst StyledSection = styled(\"section\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    gap: \"medium\",\n    clear: \"both\",\n  },\n});\n\nconst StyledButton = styled(Button, {\n  base: {\n    marginBlockStart: \"xsmall\",\n  },\n});\n\ninterface Props extends ComponentPropsWithoutRef<\"section\"> {\n  children?: ReactElement[];\n  articleCount?: number;\n  headingLevel?: HeadingLevel;\n  headingButtons?: ReactNode;\n}\n\nexport const RelatedArticleList = ({\n  children = [],\n  articleCount,\n  headingLevel: HeadingElement = \"h2\",\n  headingButtons,\n  ...rest\n}: Props) => {\n  const [expanded, setExpanded] = useState(false);\n  const { t } = useTranslation();\n  const childCount = useMemo(() => articleCount ?? Children.count(children), [children, articleCount]);\n  const childrenToShow = useMemo(\n    () => (childCount > 2 && !expanded ? children?.slice(0, 2) : children),\n    [childCount, children, expanded],\n  );\n\n  return (\n    <StyledSection {...rest} data-embed-type=\"related-content-list\">\n      <HeadingWrapper>\n        <Heading asChild consumeCss textStyle=\"title.large\" fontWeight=\"bold\">\n          <HeadingElement>{t(\"related.title\")}</HeadingElement>\n        </Heading>\n        {headingButtons}\n      </HeadingWrapper>\n      <ArticlesWrapper>{childrenToShow}</ArticlesWrapper>\n      {childCount > 2 ? (\n        <StyledButton variant=\"secondary\" onClick={() => setExpanded((p) => !p)}>\n          {t(`related.show${expanded ? \"Less\" : \"More\"}`)}\n        </StyledButton>\n      ) : null}\n    </StyledSection>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AA4BA,MAAM,aAAa,OAAO,QAAQ,EAChC,MAAM;CACJ,SAAS;CACT,KAAK;AACN,EACF,EAAC;AAEF,MAAa,iBAAiB,CAAC,EAC7B,OACA,cACA,IACA,WAAW,IACX,SAAS,IACT,OAAO,aAAa,kBACA,KAAK;AACzB,wBACE,IAAC;EAAS,mBAAgB;4BACxB,KAAC;mBACC,IAAC,oBAAiB,aAAa,OAAQ;mBACvC,IAAC;IAAY;IAAQ;8BACnB,IAAC,oCACC,IAAC;KACC;KACI;KACI;KACR,KAAK,WAAW;KAChB,KAAK,YAAY,KAAK;+BAEtB,KAAC,yBACE,OACA,WAAW,4BAAY,IAAC,qBAAmB,IACjC;MACJ,GACN;KACK;mBACd,IAAC,QAAK,yBAAyB,EAAE,QAAQ,aAAc,IAAI;mBAC3D,IAAC;IAAK,OAAM;IAAc,WAAU;cACjC;KACI;MACK;GACL;AAEd;AAED,MAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,WAAW;AACZ,EACF,EAAC;AAEF,MAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,qBAAqB;CACrB,KAAK;CACL,YAAY,EACV,qBAAqB,MACtB;AACF,EACF,EAAC;AAEF,MAAM,gBAAgB,OAAO,WAAW,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,KAAK;CACL,OAAO;AACR,EACF,EAAC;AAEF,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,kBAAkB,SACnB,EACF,EAAC;AASF,MAAa,qBAAqB,CAAC,EACjC,WAAW,CAAE,GACb,cACA,cAAc,iBAAiB,MAC/B,eACA,GAAG,MACG,KAAK;CACX,MAAM,CAAC,UAAU,YAAY,GAAG,SAAS,MAAM;CAC/C,MAAM,EAAE,GAAG,GAAG,gBAAgB;CAC9B,MAAM,aAAa,QAAQ,MAAM,gBAAgB,SAAS,MAAM,SAAS,EAAE,CAAC,UAAU,YAAa,EAAC;CACpG,MAAM,iBAAiB,QACrB,MAAO,aAAa,MAAM,WAAW,UAAU,MAAM,GAAG,EAAE,GAAG,UAC7D;EAAC;EAAY;EAAU;CAAS,EACjC;AAED,wBACE,KAAC;EAAc,GAAI;EAAM,mBAAgB;;mBACvC,KAAC,6CACC,IAAC;IAAQ;IAAQ;IAAW,WAAU;IAAc,YAAW;8BAC7D,IAAC,4BAAgB,EAAE,gBAAgB,GAAkB;KAC7C,EACT,kBACc;mBACjB,IAAC,6BAAiB,iBAAiC;GAClD,aAAa,oBACZ,IAAC;IAAa,SAAQ;IAAY,SAAS,MAAM,YAAY,CAAC,OAAO,EAAE;cACpE,GAAG,cAAc,WAAW,SAAS,OAAO,EAAE;KAClC,GACb;;GACU;AAEnB"}

package/es/RelatedArticleList/index.js

@@ -1,11 +1,8 @@
-/**
- * Copyright (c) 2017-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
+import { RelatedArticle, RelatedArticleList } from "./RelatedArticleList.js";
 
-import { RelatedArticle, RelatedArticleList } from "./RelatedArticleList";
-export { RelatedArticle };
-export default RelatedArticleList;
+//#region src/RelatedArticleList/index.ts
+var RelatedArticleList_default = RelatedArticleList;
+
+//#endregion
+export { RelatedArticleList_default };
+//# sourceMappingURL=index.js.map

package/es/RelatedArticleList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/RelatedArticleList/index.ts"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { RelatedArticle, RelatedArticleList } from \"./RelatedArticleList\";\n\nexport { RelatedArticle };\n\nexport default RelatedArticleList;\n"],"mappings":";;;AAYA,iCAAe"}