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

package/lib/RelatedArticleList/RelatedArticleList.js

@@ -1,143 +1,99 @@
-"use strict";
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_ContentType = require('../model/ContentType.js');
+const require_ContentTypeBadge = require('../ContentTypeBadge/ContentTypeBadge.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
+const __ndla_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
+const __ndla_safelink = require_rolldown_runtime.__toESM(require("@ndla/safelink"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const __ndla_styled_system_patterns = require_rolldown_runtime.__toESM(require("@ndla/styled-system/patterns"));
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RelatedArticleList = exports.RelatedArticle = void 0;
-var _react = require("react");
-var _reactI18next = require("react-i18next");
-var _icons = require("@ndla/icons");
-var _primitives = require("@ndla/primitives");
-var _safelink = require("@ndla/safelink");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _patterns = require("@ndla/styled-system/patterns");
-var _ContentTypeBadge = require("../ContentTypeBadge/ContentTypeBadge");
-var _ContentType = require("../model/ContentType");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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.
- *
- */
-
-const StyledSpan = (0, _jsx2.styled)("span", {
-  base: {
-    display: "flex",
-    gap: "3xsmall"
-  }
-});
-const RelatedArticle = _ref => {
-  let {
-    title,
-    introduction,
-    to,
-    linkInfo = "",
-    target = "",
-    type = _ContentType.contentTypes.SUBJECT_MATERIAL
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.CardRoot, {
-    "data-embed-type": "related-article",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.CardContent, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ContentTypeBadge.ContentTypeBadge, {
-        contentType: type
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.CardHeading, {
-        asChild: true,
-        consumeCss: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_safelink.SafeLink, {
-            unstyled: true,
-            to: to,
-            target: target,
-            rel: linkInfo ? "noopener noreferrer" : undefined,
-            css: _patterns.linkOverlay.raw(),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledSpan, {
-              children: [title, target === "_blank" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ExternalLinkLine, {})]
-            })
-          })
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-        dangerouslySetInnerHTML: {
-          __html: introduction
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-        color: "text.subtle",
-        textStyle: "label.small",
-        children: linkInfo
-      })]
-    })
-  });
+//#region src/RelatedArticleList/RelatedArticleList.tsx
+const StyledSpan = (0, __ndla_styled_system_jsx.styled)("span", { base: {
+	display: "flex",
+	gap: "3xsmall"
+} });
+const RelatedArticle = ({ title, introduction, to, linkInfo = "", target = "", type = require_ContentType.contentTypes.SUBJECT_MATERIAL }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.CardRoot, {
+		"data-embed-type": "related-article",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.CardContent, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ContentTypeBadge.ContentTypeBadge, { contentType: type }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.CardHeading, {
+				asChild: true,
+				consumeCss: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_safelink.SafeLink, {
+					unstyled: true,
+					to,
+					target,
+					rel: linkInfo ? "noopener noreferrer" : void 0,
+					css: __ndla_styled_system_patterns.linkOverlay.raw(),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledSpan, { children: [title, target === "_blank" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ExternalLinkLine, {})] })
+				}) })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, { dangerouslySetInnerHTML: { __html: introduction } }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+				color: "text.subtle",
+				textStyle: "label.small",
+				children: linkInfo
+			})
+		] })
+	});
 };
-exports.RelatedArticle = RelatedArticle;
-const HeadingWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    width: "100%",
-    justifyContent: "space-between",
-    alignItems: "center",
-    alignSelf: "flex-start"
-  }
-});
-const ArticlesWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    display: "grid",
-    width: "100%",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "medium",
-    tabletDown: {
-      gridTemplateColumns: "1fr"
-    }
-  }
-});
-const StyledSection = (0, _jsx2.styled)("section", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    gap: "medium",
-    clear: "both"
-  }
-});
-const StyledButton = (0, _jsx2.styled)(_primitives.Button, {
-  base: {
-    marginBlockStart: "xsmall"
-  }
-});
-const RelatedArticleList = _ref2 => {
-  let {
-    children = [],
-    articleCount,
-    headingLevel: HeadingElement = "h2",
-    headingButtons,
-    ...rest
-  } = _ref2;
-  const [expanded, setExpanded] = (0, _react.useState)(false);
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  const childCount = (0, _react.useMemo)(() => articleCount ?? _react.Children.count(children), [children, articleCount]);
-  const childrenToShow = (0, _react.useMemo)(() => childCount > 2 && !expanded ? children?.slice(0, 2) : children, [childCount, children, expanded]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledSection, {
-    ...rest,
-    "data-embed-type": "related-content-list",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(HeadingWrapper, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
-        asChild: true,
-        consumeCss: true,
-        textStyle: "title.large",
-        fontWeight: "bold",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(HeadingElement, {
-          children: t("related.title")
-        })
-      }), headingButtons]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticlesWrapper, {
-      children: childrenToShow
-    }), childCount > 2 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledButton, {
-      variant: "secondary",
-      onClick: () => setExpanded(p => !p),
-      children: t(`related.show${expanded ? "Less" : "More"}`)
-    }) : null]
-  });
+const HeadingWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	width: "100%",
+	justifyContent: "space-between",
+	alignItems: "center",
+	alignSelf: "flex-start"
+} });
+const ArticlesWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "grid",
+	width: "100%",
+	gridTemplateColumns: "repeat(2, 1fr)",
+	gap: "medium",
+	tabletDown: { gridTemplateColumns: "1fr" }
+} });
+const StyledSection = (0, __ndla_styled_system_jsx.styled)("section", { base: {
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center",
+	gap: "medium",
+	clear: "both"
+} });
+const StyledButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Button, { base: { marginBlockStart: "xsmall" } });
+const RelatedArticleList = ({ children = [], articleCount, headingLevel: HeadingElement = "h2", headingButtons,...rest }) => {
+	const [expanded, setExpanded] = (0, react.useState)(false);
+	const { t } = (0, react_i18next.useTranslation)();
+	const childCount = (0, react.useMemo)(() => articleCount ?? react.Children.count(children), [children, articleCount]);
+	const childrenToShow = (0, react.useMemo)(() => childCount > 2 && !expanded ? children?.slice(0, 2) : children, [
+		childCount,
+		children,
+		expanded
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledSection, {
+		...rest,
+		"data-embed-type": "related-content-list",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HeadingWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Heading, {
+				asChild: true,
+				consumeCss: true,
+				textStyle: "title.large",
+				fontWeight: "bold",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeadingElement, { children: t("related.title") })
+			}), headingButtons] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArticlesWrapper, { children: childrenToShow }),
+			childCount > 2 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledButton, {
+				variant: "secondary",
+				onClick: () => setExpanded((p) => !p),
+				children: t(`related.show${expanded ? "Less" : "More"}`)
+			}) : null
+		]
+	});
 };
-exports.RelatedArticleList = RelatedArticleList;
+
+//#endregion
+exports.RelatedArticle = RelatedArticle;
+exports.RelatedArticleList = RelatedArticleList;
+//# sourceMappingURL=RelatedArticleList.js.map

package/lib/RelatedArticleList/RelatedArticleList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelatedArticleList.js","names":["contentTypes","CardRoot","CardContent","ContentTypeBadge","CardHeading","SafeLink","ExternalLinkLine","Text","Button","Heading"],"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,qCAAO,QAAQ,EAChC,MAAM;CACJ,SAAS;CACT,KAAK;AACN,EACF,EAAC;AAEF,MAAa,iBAAiB,CAAC,EAC7B,OACA,cACA,IACA,WAAW,IACX,SAAS,IACT,OAAOA,iCAAa,kBACA,KAAK;AACzB,wBACE,2BAACC;EAAS,mBAAgB;4BACxB,4BAACC;mBACC,2BAACC,6CAAiB,aAAa,OAAQ;mBACvC,2BAACC;IAAY;IAAQ;8BACnB,2BAAC,oCACC,2BAACC;KACC;KACI;KACI;KACR,KAAK,WAAW;KAChB,KAAK,0CAAY,KAAK;+BAEtB,4BAAC,yBACE,OACA,WAAW,4BAAY,2BAACC,kCAAmB,IACjC;MACJ,GACN;KACK;mBACd,2BAACC,0BAAK,yBAAyB,EAAE,QAAQ,aAAc,IAAI;mBAC3D,2BAACA;IAAK,OAAM;IAAc,WAAU;cACjC;KACI;MACK;GACL;AAEd;AAED,MAAM,iBAAiB,qCAAO,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,WAAW;AACZ,EACF,EAAC;AAEF,MAAM,kBAAkB,qCAAO,OAAO,EACpC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,qBAAqB;CACrB,KAAK;CACL,YAAY,EACV,qBAAqB,MACtB;AACF,EACF,EAAC;AAEF,MAAM,gBAAgB,qCAAO,WAAW,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,KAAK;CACL,OAAO;AACR,EACF,EAAC;AAEF,MAAM,eAAe,qCAAOC,0BAAQ,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,oBAAS,MAAM;CAC/C,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAC9B,MAAM,aAAa,mBAAQ,MAAM,gBAAgB,eAAS,MAAM,SAAS,EAAE,CAAC,UAAU,YAAa,EAAC;CACpG,MAAM,iBAAiB,mBACrB,MAAO,aAAa,MAAM,WAAW,UAAU,MAAM,GAAG,EAAE,GAAG,UAC7D;EAAC;EAAY;EAAU;CAAS,EACjC;AAED,wBACE,4BAAC;EAAc,GAAI;EAAM,mBAAgB;;mBACvC,4BAAC,6CACC,2BAACC;IAAQ;IAAQ;IAAW,WAAU;IAAc,YAAW;8BAC7D,2BAAC,4BAAgB,EAAE,gBAAgB,GAAkB;KAC7C,EACT,kBACc;mBACjB,2BAAC,6BAAiB,iBAAiC;GAClD,aAAa,oBACZ,2BAAC;IAAa,SAAQ;IAAY,SAAS,MAAM,YAAY,CAAC,OAAO,EAAE;cACpE,GAAG,cAAc,WAAW,SAAS,OAAO,EAAE;KAClC,GACb;;GACU;AAEnB"}

package/lib/RelatedArticleList/index.js

@@ -1,21 +1,8 @@
-"use strict";
+const require_RelatedArticleList = require('./RelatedArticleList.js');
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "RelatedArticle", {
-  enumerable: true,
-  get: function () {
-    return _RelatedArticleList.RelatedArticle;
-  }
-});
-exports.default = void 0;
-var _RelatedArticleList = require("./RelatedArticleList");
-/**
- * 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.
- *
- */
-var _default = exports.default = _RelatedArticleList.RelatedArticleList;
+//#region src/RelatedArticleList/index.ts
+var RelatedArticleList_default = require_RelatedArticleList.RelatedArticleList;
+
+//#endregion
+exports.RelatedArticleList_default = RelatedArticleList_default;
+//# sourceMappingURL=index.js.map

package/lib/RelatedArticleList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["RelatedArticleList"],"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,iCAAeA"}

package/lib/ResourceBox/ResourceBox.js

@@ -1,106 +1,75 @@
-"use strict";
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const __ndla_icons = require_rolldown_runtime.__toESM(require("@ndla/icons"));
+const __ndla_safelink = require_rolldown_runtime.__toESM(require("@ndla/safelink"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const __ndla_core = require_rolldown_runtime.__toESM(require("@ndla/core"));
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ResourceBox = void 0;
-var _core = require("@ndla/core");
-var _icons = require("@ndla/icons");
-var _primitives = require("@ndla/primitives");
-var _safelink = require("@ndla/safelink");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Copyright (c) 2022-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const Container = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    padding: "medium",
-    borderRadius: "xsmall",
-    border: "1px solid",
-    borderColor: "stroke.default",
-    boxShadow: "full",
-    marginBlockEnd: "medium",
-    gap: "medium",
-    tabletWideDown: {
-      padding: "xsmall"
-    },
-    tabletDown: {
-      flexDirection: "column",
-      gap: "0",
-      padding: "0"
-    }
-  }
-});
-const ContentWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start",
-    gap: "xsmall",
-    flex: "1",
-    tabletDown: {
-      padding: "xsmall"
-    }
-  }
-});
-const StyledImage = (0, _jsx2.styled)(_primitives.Image, {
-  base: {
-    objectFit: "cover",
-    borderRadius: "xsmall",
-    width: "fit-content",
-    aspectRatio: "1/1",
-    tabletDown: {
-      width: "100%",
-      borderRadius: "0"
-    }
-  }
-});
-const StyledText = (0, _jsx2.styled)(_primitives.Text, {
-  base: {
-    flex: "1"
-  }
-});
-const ResourceBox = _ref => {
-  let {
-    image,
-    title,
-    caption,
-    url,
-    buttonText
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
-    children: [image ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledImage, {
-      src: image.src,
-      alt: image.alt,
-      sizes: `(min-width: ${_core.breakpoints.desktop}) 150px, (max-width: ${_core.breakpoints.tablet} ) 400px, 200px`,
-      variant: "rounded"
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentWrapper, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
-        textStyle: "label.large",
-        fontWeight: "bold",
-        asChild: true,
-        consumeCss: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
-          children: title
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
-        textStyle: "body.medium",
-        children: caption
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_safelink.SafeLinkButton, {
-        to: url,
-        target: "_blank",
-        variant: "secondary",
-        children: [buttonText, /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ShareBoxLine, {})]
-      })]
-    })]
-  });
+//#region src/ResourceBox/ResourceBox.tsx
+const Container = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	padding: "medium",
+	borderRadius: "xsmall",
+	border: "1px solid",
+	borderColor: "stroke.default",
+	boxShadow: "full",
+	marginBlockEnd: "medium",
+	gap: "medium",
+	tabletWideDown: { padding: "xsmall" },
+	tabletDown: {
+		flexDirection: "column",
+		gap: "0",
+		padding: "0"
+	}
+} });
+const ContentWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "flex-start",
+	gap: "xsmall",
+	flex: "1",
+	tabletDown: { padding: "xsmall" }
+} });
+const StyledImage = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Image, { base: {
+	objectFit: "cover",
+	borderRadius: "xsmall",
+	width: "fit-content",
+	aspectRatio: "1/1",
+	tabletDown: {
+		width: "100%",
+		borderRadius: "0"
+	}
+} });
+const StyledText = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Text, { base: { flex: "1" } });
+const ResourceBox = ({ image, title, caption, url, buttonText }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container, { children: [image ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledImage, {
+		src: image.src,
+		alt: image.alt,
+		sizes: `(min-width: ${__ndla_core.breakpoints.desktop}) 150px, (max-width: ${__ndla_core.breakpoints.tablet} ) 400px, 200px`,
+		variant: "rounded"
+	}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ContentWrapper, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Heading, {
+			textStyle: "label.large",
+			fontWeight: "bold",
+			asChild: true,
+			consumeCss: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", { children: title })
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledText, {
+			textStyle: "body.medium",
+			children: caption
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_safelink.SafeLinkButton, {
+			to: url,
+			target: "_blank",
+			variant: "secondary",
+			children: [buttonText, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ShareBoxLine, {})]
+		})
+	] })] });
 };
-exports.ResourceBox = ResourceBox;
-var _default = exports.default = ResourceBox;
+var ResourceBox_default = ResourceBox;
+
+//#endregion
+exports.ResourceBox_default = ResourceBox_default;
+//# sourceMappingURL=ResourceBox.js.map

package/lib/ResourceBox/ResourceBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceBox.js","names":["Image","Text","breakpoints","Heading","SafeLinkButton","ShareBoxLine"],"sources":["../../src/ResourceBox/ResourceBox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2022-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 { breakpoints } from \"@ndla/core\";\nimport { ShareBoxLine } from \"@ndla/icons\";\nimport { Heading, Image, Text } from \"@ndla/primitives\";\nimport { SafeLinkButton } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst Container = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    padding: \"medium\",\n    borderRadius: \"xsmall\",\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    boxShadow: \"full\",\n    marginBlockEnd: \"medium\",\n    gap: \"medium\",\n    tabletWideDown: {\n      padding: \"xsmall\",\n    },\n    tabletDown: {\n      flexDirection: \"column\",\n      gap: \"0\",\n      padding: \"0\",\n    },\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"flex-start\",\n    gap: \"xsmall\",\n    flex: \"1\",\n    tabletDown: {\n      padding: \"xsmall\",\n    },\n  },\n});\n\nconst StyledImage = styled(Image, {\n  base: {\n    objectFit: \"cover\",\n    borderRadius: \"xsmall\",\n    width: \"fit-content\",\n    aspectRatio: \"1/1\",\n    tabletDown: {\n      width: \"100%\",\n      borderRadius: \"0\",\n    },\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    flex: \"1\",\n  },\n});\n\ninterface ImageMeta {\n  src: string | undefined;\n  alt: string;\n}\n\ninterface Props {\n  image?: ImageMeta;\n  title: string;\n  caption: string;\n  url: string;\n  buttonText: string;\n}\n\nexport const ResourceBox = ({ image, title, caption, url, buttonText }: Props) => {\n  return (\n    <Container>\n      {image ? (\n        <StyledImage\n          src={image.src}\n          alt={image.alt}\n          sizes={`(min-width: ${breakpoints.desktop}) 150px, (max-width: ${breakpoints.tablet} ) 400px, 200px`}\n          variant=\"rounded\"\n        />\n      ) : null}\n      <ContentWrapper>\n        <Heading textStyle=\"label.large\" fontWeight=\"bold\" asChild consumeCss>\n          <h3>{title}</h3>\n        </Heading>\n        <StyledText textStyle=\"body.medium\">{caption}</StyledText>\n        <SafeLinkButton to={url} target=\"_blank\" variant=\"secondary\">\n          {buttonText}\n          <ShareBoxLine />\n        </SafeLinkButton>\n      </ContentWrapper>\n    </Container>\n  );\n};\n\nexport default ResourceBox;\n"],"mappings":";;;;;;;;;AAcA,MAAM,YAAY,qCAAO,OAAO,EAC9B,MAAM;CACJ,SAAS;CACT,SAAS;CACT,cAAc;CACd,QAAQ;CACR,aAAa;CACb,WAAW;CACX,gBAAgB;CAChB,KAAK;CACL,gBAAgB,EACd,SAAS,SACV;CACD,YAAY;EACV,eAAe;EACf,KAAK;EACL,SAAS;CACV;AACF,EACF,EAAC;AAEF,MAAM,iBAAiB,qCAAO,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,KAAK;CACL,MAAM;CACN,YAAY,EACV,SAAS,SACV;AACF,EACF,EAAC;AAEF,MAAM,cAAc,qCAAOA,yBAAO,EAChC,MAAM;CACJ,WAAW;CACX,cAAc;CACd,OAAO;CACP,aAAa;CACb,YAAY;EACV,OAAO;EACP,cAAc;CACf;AACF,EACF,EAAC;AAEF,MAAM,aAAa,qCAAOC,wBAAM,EAC9B,MAAM,EACJ,MAAM,IACP,EACF,EAAC;AAeF,MAAa,cAAc,CAAC,EAAE,OAAO,OAAO,SAAS,KAAK,YAAmB,KAAK;AAChF,wBACE,4BAAC,wBACE,wBACC,2BAAC;EACC,KAAK,MAAM;EACX,KAAK,MAAM;EACX,QAAQ,cAAcC,wBAAY,QAAQ,uBAAuBA,wBAAY,OAAO;EACpF,SAAQ;GACR,GACA,sBACJ,4BAAC;kBACC,2BAACC;GAAQ,WAAU;GAAc,YAAW;GAAO;GAAQ;6BACzD,2BAAC,kBAAI,QAAW;IACR;kBACV,2BAAC;GAAW,WAAU;aAAe;IAAqB;kBAC1D,4BAACC;GAAe,IAAI;GAAK,QAAO;GAAS,SAAQ;cAC9C,4BACD,2BAACC,8BAAe;IACD;KACF,IACP;AAEf;AAED,0BAAe"}