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

package/lib/LinkBlock/LinkBlock.js

@@ -1,110 +1,75 @@
-"use strict";
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_relativeUrl = require('../utils/relativeUrl.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 html_react_parser = require_rolldown_runtime.__toESM(require("html-react-parser"));
+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"));
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
-var _react = require("react");
-var _icons = require("@ndla/icons");
-var _primitives = require("@ndla/primitives");
-var _safelink = require("@ndla/safelink");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _relativeUrl = require("../utils/relativeUrl");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * 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 InfoWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "xsmall"
-  }
-});
-const StyledSafeLink = (0, _jsx2.styled)(_safelink.SafeLink, {
-  base: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    background: "surface.default",
-    padding: "medium",
-    border: "1px solid",
-    borderColor: "stroke.subtle",
-    borderRadius: "xsmall",
-    "& h3": {
-      textDecoration: "underline"
-    },
-    "& [data-forward]": {
-      transitionProperty: "width, height",
-      transitionTimingFunction: "ease-in-out",
-      transitionDuration: "fast"
-    },
-    _hover: {
-      "& h3": {
-        textDecoration: "none"
-      },
-      "& [data-forward]": {
-        width: "large",
-        height: "large"
-      }
-    }
-  }
-});
-const StyledDateContainer = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    alignItems: "center",
-    gap: "xxsmall"
-  }
-});
-const StyledCalendarEd = (0, _jsx2.styled)(_icons.CalendarLine, {
-  base: {
-    color: "icon.strong"
-  }
-});
-const LinkBlock = _ref => {
-  let {
-    title,
-    articleLanguage,
-    date,
-    url,
-    path
-  } = _ref;
-  const href = (0, _relativeUrl.getPossiblyRelativeUrl)(url, path);
-  const formattedDate = (0, _react.useMemo)(() => {
-    if (!date) return null;
-    return new Intl.DateTimeFormat(articleLanguage, {
-      timeZone: "CET",
-      day: "2-digit",
-      month: "long",
-      year: "numeric"
-    }).format(new Date(date));
-  }, [date, articleLanguage]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledSafeLink, {
-    to: href,
-    "data-embed-type": "link-block",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(InfoWrapper, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
-        asChild: true,
-        consumeCss: true,
-        textStyle: "title.medium",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
-          "data-heading": true,
-          children: (0, _htmlReactParser.default)(title)
-        })
-      }), !!date && /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledDateContainer, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCalendarEd, {}), formattedDate]
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ArrowRightLine, {
-      "data-forward": true
-    })]
-  });
+//#region src/LinkBlock/LinkBlock.tsx
+const InfoWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "xsmall"
+} });
+const StyledSafeLink = (0, __ndla_styled_system_jsx.styled)(__ndla_safelink.SafeLink, { base: {
+	display: "flex",
+	justifyContent: "space-between",
+	alignItems: "center",
+	background: "surface.default",
+	padding: "medium",
+	border: "1px solid",
+	borderColor: "stroke.subtle",
+	borderRadius: "xsmall",
+	"& h3": { textDecoration: "underline" },
+	"& [data-forward]": {
+		transitionProperty: "width, height",
+		transitionTimingFunction: "ease-in-out",
+		transitionDuration: "fast"
+	},
+	_hover: {
+		"& h3": { textDecoration: "none" },
+		"& [data-forward]": {
+			width: "large",
+			height: "large"
+		}
+	}
+} });
+const StyledDateContainer = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	alignItems: "center",
+	gap: "xxsmall"
+} });
+const StyledCalendarEd = (0, __ndla_styled_system_jsx.styled)(__ndla_icons.CalendarLine, { base: { color: "icon.strong" } });
+const LinkBlock = ({ title, articleLanguage, date, url, path }) => {
+	const href = require_relativeUrl.getPossiblyRelativeUrl(url, path);
+	const formattedDate = (0, react.useMemo)(() => {
+		if (!date) return null;
+		return new Intl.DateTimeFormat(articleLanguage, {
+			timeZone: "CET",
+			day: "2-digit",
+			month: "long",
+			year: "numeric"
+		}).format(new Date(date));
+	}, [date, articleLanguage]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledSafeLink, {
+		to: href,
+		"data-embed-type": "link-block",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InfoWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Heading, {
+			asChild: true,
+			consumeCss: true,
+			textStyle: "title.medium",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				"data-heading": true,
+				children: (0, html_react_parser.default)(title)
+			})
+		}), !!date && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledDateContainer, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCalendarEd, {}), formattedDate] })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ArrowRightLine, { "data-forward": true })]
+	});
 };
-var _default = exports.default = LinkBlock;
+var LinkBlock_default = LinkBlock;
+
+//#endregion
+exports.LinkBlock_default = LinkBlock_default;
+//# sourceMappingURL=LinkBlock.js.map

package/lib/LinkBlock/LinkBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkBlock.js","names":["SafeLink","CalendarLine","Heading","ArrowRightLine"],"sources":["../../src/LinkBlock/LinkBlock.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 parse from \"html-react-parser\";\nimport { useMemo } from \"react\";\nimport { ArrowRightLine, CalendarLine } from \"@ndla/icons\";\nimport { Heading } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { LinkBlockEmbedData } from \"@ndla/types-embed\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\nconst InfoWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n  },\n});\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n    background: \"surface.default\",\n    padding: \"medium\",\n    border: \"1px solid\",\n    borderColor: \"stroke.subtle\",\n    borderRadius: \"xsmall\",\n    \"& h3\": {\n      textDecoration: \"underline\",\n    },\n    \"& [data-forward]\": {\n      transitionProperty: \"width, height\",\n      transitionTimingFunction: \"ease-in-out\",\n      transitionDuration: \"fast\",\n    },\n    _hover: {\n      \"& h3\": {\n        textDecoration: \"none\",\n      },\n      \"& [data-forward]\": {\n        width: \"large\",\n        height: \"large\",\n      },\n    },\n  },\n});\n\nconst StyledDateContainer = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"xxsmall\",\n  },\n});\n\nconst StyledCalendarEd = styled(CalendarLine, {\n  base: {\n    color: \"icon.strong\",\n  },\n});\n\ninterface Props extends Omit<LinkBlockEmbedData, \"resource\"> {\n  path?: string;\n  articleLanguage?: string;\n}\n\nconst LinkBlock = ({ title, articleLanguage, date, url, path }: Props) => {\n  const href = getPossiblyRelativeUrl(url, path);\n  const formattedDate = useMemo(() => {\n    if (!date) return null;\n    return new Intl.DateTimeFormat(articleLanguage, {\n      timeZone: \"CET\",\n      day: \"2-digit\",\n      month: \"long\",\n      year: \"numeric\",\n    }).format(new Date(date));\n  }, [date, articleLanguage]);\n  return (\n    <StyledSafeLink to={href} data-embed-type=\"link-block\">\n      <InfoWrapper>\n        <Heading asChild consumeCss textStyle=\"title.medium\">\n          <h3 data-heading>{parse(title)}</h3>\n        </Heading>\n        {!!date && (\n          <StyledDateContainer>\n            <StyledCalendarEd />\n            {formattedDate}\n          </StyledDateContainer>\n        )}\n      </InfoWrapper>\n      <ArrowRightLine data-forward />\n    </StyledSafeLink>\n  );\n};\n\nexport default LinkBlock;\n"],"mappings":";;;;;;;;;;;AAiBA,MAAM,cAAc,qCAAO,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;AACN,EACF,EAAC;AAEF,MAAM,iBAAiB,qCAAOA,0BAAU,EACtC,MAAM;CACJ,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,aAAa;CACb,cAAc;CACd,QAAQ,EACN,gBAAgB,YACjB;CACD,oBAAoB;EAClB,oBAAoB;EACpB,0BAA0B;EAC1B,oBAAoB;CACrB;CACD,QAAQ;EACN,QAAQ,EACN,gBAAgB,OACjB;EACD,oBAAoB;GAClB,OAAO;GACP,QAAQ;EACT;CACF;AACF,EACF,EAAC;AAEF,MAAM,sBAAsB,qCAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,KAAK;AACN,EACF,EAAC;AAEF,MAAM,mBAAmB,qCAAOC,2BAAc,EAC5C,MAAM,EACJ,OAAO,cACR,EACF,EAAC;AAOF,MAAM,YAAY,CAAC,EAAE,OAAO,iBAAiB,MAAM,KAAK,MAAa,KAAK;CACxE,MAAM,OAAO,2CAAuB,KAAK,KAAK;CAC9C,MAAM,gBAAgB,mBAAQ,MAAM;AAClC,OAAK,KAAM,QAAO;AAClB,SAAO,IAAI,KAAK,eAAe,iBAAiB;GAC9C,UAAU;GACV,KAAK;GACL,OAAO;GACP,MAAM;EACP,GAAE,OAAO,IAAI,KAAK,MAAM;CAC1B,GAAE,CAAC,MAAM,eAAgB,EAAC;AAC3B,wBACE,4BAAC;EAAe,IAAI;EAAM,mBAAgB;6BACxC,4BAAC,0CACC,2BAACC;GAAQ;GAAQ;GAAW,WAAU;6BACpC,2BAAC;IAAG;cAAc,+BAAM,MAAM;KAAM;IAC5B,IACP,wBACD,4BAAC,kDACC,2BAAC,qBAAmB,EACnB,iBACmB,IAEZ,kBACd,2BAACC,+BAAe,uBAAe;GAChB;AAEpB;AAED,wBAAe"}

package/lib/LinkBlock/LinkBlockSection.js

@@ -1,41 +1,24 @@
-"use strict";
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const react = require_rolldown_runtime.__toESM(require("react"));
+const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _jsx2 = require("@ndla/styled-system/jsx");
-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 StyledList = (0, _jsx2.styled)("ul", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "xsmall",
-    listStyle: "none"
-  }
-});
-const LinkBlockSection = _ref => {
-  let {
-    children,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("nav", {
-    ...rest,
-    "data-embed-type": "link-block-list",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledList, {
-      children: _react.Children.map(children, child => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-        children: child
-      }))
-    })
-  });
+//#region src/LinkBlock/LinkBlockSection.tsx
+const StyledList = (0, __ndla_styled_system_jsx.styled)("ul", { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "xsmall",
+	listStyle: "none"
+} });
+const LinkBlockSection = ({ children,...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+		...rest,
+		"data-embed-type": "link-block-list",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledList, { children: react.Children.map(children, (child) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: child })) })
+	});
 };
-var _default = exports.default = LinkBlockSection;
+var LinkBlockSection_default = LinkBlockSection;
+
+//#endregion
+exports.LinkBlockSection_default = LinkBlockSection_default;
+//# sourceMappingURL=LinkBlockSection.js.map

package/lib/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,qCAAO,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,2BAAC;EAAI,GAAI;EAAM,mBAAgB;4BAC7B,2BAAC,wBACE,eAAS,IAAI,UAAU,CAAC,0BACvB,2BAAC,kBAAI,QAAW,CAChB,GACS;GACT;AAET;AAED,+BAAe"}

package/lib/Pitch/Pitch.js

@@ -1,91 +1,63 @@
-"use strict";
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_relativeUrl = require('../utils/relativeUrl.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 html_react_parser = require_rolldown_runtime.__toESM(require("html-react-parser"));
+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.Pitch = void 0;
-var _htmlReactParser = _interopRequireDefault(require("html-react-parser"));
-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 _relativeUrl = require("../utils/relativeUrl");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * 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.
- *
- */
-
-const StyledCardHeading = (0, _jsx2.styled)(_primitives.CardHeading, {
-  base: {
-    paddingBlockStart: "medium"
-  }
-});
-const StyledText = (0, _jsx2.styled)(_primitives.Text, {
-  base: {
-    paddingBlockEnd: "medium"
-  }
-});
-const StyledCardRoot = (0, _jsx2.styled)(_primitives.CardRoot, {
-  base: {
-    border: "0",
-    display: "flex",
-    flexDirection: "column",
-    gap: "small"
-  }
-});
-const StyledCardImage = (0, _jsx2.styled)(_primitives.CardImage, {
-  base: {
-    aspectRatio: "16/9",
-    height: "unset"
-  }
-});
-const Pitch = _ref => {
-  let {
-    title,
-    url,
-    metaImage,
-    path,
-    description
-  } = _ref;
-  const href = (0, _relativeUrl.getPossiblyRelativeUrl)(url, path);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCardRoot, {
-    variant: "subtle",
-    "data-embed-type": "pitch",
-    asChild: true,
-    consumeCss: true,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCardHeading, {
-        textStyle: "heading.small",
-        asChild: true,
-        consumeCss: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_safelink.SafeLink, {
-          to: href,
-          unstyled: true,
-          css: _patterns.linkOverlay.raw(),
-          children: (0, _htmlReactParser.default)(title)
-        })
-      }), !!description && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
-        textStyle: "body.xlarge",
-        asChild: true,
-        consumeCss: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          children: (0, _htmlReactParser.default)(description)
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.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 = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.CardHeading, { base: { paddingBlockStart: "medium" } });
+const StyledText = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Text, { base: { paddingBlockEnd: "medium" } });
+const StyledCardRoot = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.CardRoot, { base: {
+	border: "0",
+	display: "flex",
+	flexDirection: "column",
+	gap: "small"
+} });
+const StyledCardImage = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.CardImage, { base: {
+	aspectRatio: "16/9",
+	height: "unset"
+} });
+const Pitch = ({ title, url, metaImage, path, description }) => {
+	const href = require_relativeUrl.getPossiblyRelativeUrl(url, path);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCardRoot, {
+		variant: "subtle",
+		"data-embed-type": "pitch",
+		asChild: true,
+		consumeCss: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCardHeading, {
+				textStyle: "heading.small",
+				asChild: true,
+				consumeCss: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_safelink.SafeLink, {
+					to: href,
+					unstyled: true,
+					css: __ndla_styled_system_patterns.linkOverlay.raw(),
+					children: (0, html_react_parser.default)(title)
+				})
+			}),
+			!!description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledText, {
+				textStyle: "body.xlarge",
+				asChild: true,
+				consumeCss: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: (0, html_react_parser.default)(description) })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCardImage, {
+				variant: "rounded",
+				src: metaImage.url,
+				alt: metaImage.alt,
+				sizes: "480px",
+				fallbackWidth: 300,
+				width: 550,
+				height: 310
+			})
+		] })
+	});
 };
-exports.Pitch = Pitch;
+
+//#endregion
+exports.Pitch = Pitch;
+//# sourceMappingURL=Pitch.js.map

package/lib/Pitch/Pitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pitch.js","names":["CardHeading","Text","CardRoot","CardImage","SafeLink"],"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,qCAAOA,+BAAa,EAC5C,MAAM,EACJ,mBAAmB,SACpB,EACF,EAAC;AAEF,MAAM,aAAa,qCAAOC,wBAAM,EAC9B,MAAM,EACJ,iBAAiB,SAClB,EACF,EAAC;AAEF,MAAM,iBAAiB,qCAAOC,4BAAU,EACtC,MAAM;CACJ,QAAQ;CACR,SAAS;CACT,eAAe;CACf,KAAK;AACN,EACF,EAAC;AAEF,MAAM,kBAAkB,qCAAOC,6BAAW,EACxC,MAAM;CACJ,aAAa;CACb,QAAQ;AACT,EACF,EAAC;AAEF,MAAa,QAAQ,CAAC,EAAE,OAAO,KAAK,WAAW,MAAM,aAAoB,KAAK;CAC5E,MAAM,OAAO,2CAAuB,KAAK,KAAK;AAE9C,wBACE,2BAAC;EAAe,SAAQ;EAAS,mBAAgB;EAAQ;EAAQ;4BAC/D,4BAAC;mBACC,2BAAC;IAAkB,WAAU;IAAgB;IAAQ;8BACnD,2BAACC;KAAS,IAAI;KAAM;KAAS,KAAK,0CAAY,KAAK;eAChD,+BAAM,MAAM;MACJ;KACO;KACjB,+BACD,2BAAC;IAAW,WAAU;IAAc;IAAQ;8BAC1C,2BAAC,mBAAK,+BAAM,YAAY,GAAO;KACpB;mBAEf,2BAAC;IACC,SAAQ;IACR,KAAK,UAAU;IACf,KAAK,UAAU;IACf,OAAM;IACN,eAAe;IACf,OAAO;IACP,QAAQ;KACR;MACE;GACS;AAEpB"}