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

package/lib/Gloss/Gloss.js

@@ -0,0 +1,143 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_SpeechControl = require('../AudioPlayer/SpeechControl.js');
+const require_GlossExample = require('./GlossExample.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 react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+const __ark_ui_react = require_rolldown_runtime.__toESM(require("@ark-ui/react"));
+
+//#region src/Gloss/Gloss.tsx
+const getFilteredExamples = (glossData, exampleIds, exampleLangs) => {
+	if (exampleIds !== void 0 || exampleLangs !== void 0) {
+		const exampleIdsList = exampleIds?.toString()?.split(",") ?? [];
+		const exampleLangsList = exampleLangs?.split(",") ?? [];
+		const filteredExamples = glossData?.examples?.map((examples, i) => {
+			if (exampleIdsList.includes(i.toString())) return examples.filter((e) => exampleLangsList.includes(e.language));
+			return [];
+		}) ?? [];
+		const examplesWithoutEmpty = filteredExamples.filter((el) => !!el.length);
+		return examplesWithoutEmpty;
+	}
+	return glossData?.examples ?? [];
+};
+const Container = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between"
+} });
+const TextWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	gap: "small"
+} });
+const StyledAccordionItemContent = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.AccordionItemContent, { base: { paddingInline: "0" } });
+const StyledContainer = (0, __ndla_styled_system_jsx.styled)(Container, { base: { marginBlockStart: "3xsmall" } });
+const StyledAccordionItem = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.AccordionItem, {
+	base: {
+		paddingBlock: "small",
+		paddingInline: "medium"
+	},
+	defaultVariants: { variant: "simple" },
+	variants: { variant: {
+		simple: {},
+		bordered: {
+			border: "1px solid",
+			borderColor: "stroke.subtle",
+			borderRadius: "xsmall"
+		}
+	} }
+});
+const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }) => {
+	const { t } = (0, react_i18next.useTranslation)();
+	const filteredExamples = (0, react.useMemo)(() => getFilteredExamples(glossData, exampleIds, exampleLangs), [
+		exampleIds,
+		exampleLangs,
+		glossData
+	]);
+	if (!glossData) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.AccordionRoot, {
+		multiple: true,
+		variant: "clean",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledAccordionItem, {
+			value: "gloss",
+			variant,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TextWrapper, { children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+						textStyle: "label.medium",
+						fontWeight: "bold",
+						asChild: true,
+						consumeCss: true,
+						lang: glossData.originalLanguage,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: glossData.gloss })
+					}),
+					!!glossData.transcriptions.traditional && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+						textStyle: "label.medium",
+						asChild: true,
+						consumeCss: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-label": t("gloss.transcriptions.traditional"),
+							lang: glossData.originalLanguage,
+							children: glossData.transcriptions.traditional
+						}, t("gloss.transcriptions.traditional"))
+					}),
+					!!glossData.transcriptions.pinyin && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+						textStyle: "label.medium",
+						asChild: true,
+						consumeCss: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"data-pinyin": "",
+							"aria-label": t("gloss.transcriptions.pinyin"),
+							lang: glossData.originalLanguage,
+							children: glossData.transcriptions.pinyin
+						}, t("gloss.transcriptions.pinyin"))
+					}),
+					!!glossData.wordClass && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+						textStyle: "label.medium",
+						asChild: true,
+						consumeCss: true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"aria-label": t("gloss.wordClass"),
+							children: t(`wordClass.${glossData.wordClass}`).toLowerCase()
+						})
+					})
+				] }), !!audio?.src && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SpeechControl.SpeechControl_default, {
+					src: audio.src,
+					title: audio.title,
+					type: "gloss"
+				})] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledContainer, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+					textStyle: "label.medium",
+					asChild: true,
+					consumeCss: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						lang: title.language,
+						children: title.title
+					})
+				}), !!filteredExamples.length && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ark_ui_react.AccordionItemTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.IconButton, {
+						variant: "tertiary",
+						"aria-label": t("gloss.showExamples"),
+						title: t("gloss.showExamples"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.AccordionItemIndicator, {
+							asChild: true,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.ArrowDownShortLine, { size: "medium" })
+						})
+					})
+				})] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAccordionItemContent, { children: filteredExamples.map((examples, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_GlossExample.GlossExample_default, {
+					examples,
+					originalLanguage: glossData.originalLanguage
+				}, `gloss-example-${index}`)) })
+			]
+		})
+	});
+};
+var Gloss_default = Gloss;
+
+//#endregion
+exports.Gloss_default = Gloss_default;
+//# sourceMappingURL=Gloss.js.map

package/lib/Gloss/Gloss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Gloss.js","names":["glossData: IGlossDataDTO | undefined","exampleIds: string | undefined","exampleLangs: string | undefined","AccordionItemContent","AccordionItem","AccordionRoot","Text","SpeechControl","AccordionItemTrigger","IconButton","AccordionItemIndicator","ArrowDownShortLine","GlossExample"],"sources":["../../src/Gloss/Gloss.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 { useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AccordionItemTrigger } from \"@ark-ui/react\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport {\n  AccordionItem,\n  AccordionItemContent,\n  AccordionItemIndicator,\n  AccordionRoot,\n  IconButton,\n  Text,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\nimport type { IGlossDataDTO, IGlossExampleDTO } from \"@ndla/types-backend/concept-api\";\nimport GlossExample from \"./GlossExample\";\nimport SpeechControl from \"../AudioPlayer/SpeechControl\";\n\n// TODO: Figure out padding between bordered and simple variant.\n// The design says that the content above the accordion content should have enough padding to align with the accordion content.\n// When a gloss is bordered there's way too much padding.\n\nconst getFilteredExamples = (\n  glossData: IGlossDataDTO | undefined,\n  exampleIds: string | undefined,\n  exampleLangs: string | undefined,\n): IGlossExampleDTO[][] => {\n  if (exampleIds !== undefined || exampleLangs !== undefined) {\n    const exampleIdsList = exampleIds?.toString()?.split(\",\") ?? [];\n    const exampleLangsList = exampleLangs?.split(\",\") ?? [];\n\n    const filteredExamples =\n      glossData?.examples?.map((examples, i) => {\n        if (exampleIdsList.includes(i.toString())) {\n          return examples.filter((e) => exampleLangsList.includes(e.language));\n        }\n        return [];\n      }) ?? [];\n    const examplesWithoutEmpty = filteredExamples.filter((el) => !!el.length);\n    return examplesWithoutEmpty;\n  }\n  return glossData?.examples ?? [];\n};\n\nconst Container = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"small\",\n  },\n});\n\nconst StyledAccordionItemContent = styled(AccordionItemContent, {\n  base: {\n    paddingInline: \"0\",\n  },\n});\n\nconst StyledContainer = styled(Container, {\n  base: {\n    marginBlockStart: \"3xsmall\",\n  },\n});\n\nconst StyledAccordionItem = styled(AccordionItem, {\n  base: {\n    paddingBlock: \"small\",\n    paddingInline: \"medium\",\n  },\n  defaultVariants: {\n    variant: \"simple\",\n  },\n  variants: {\n    variant: {\n      simple: {},\n      bordered: {\n        border: \"1px solid\",\n        borderColor: \"stroke.subtle\",\n        borderRadius: \"xsmall\",\n      },\n    },\n  },\n});\n\ntype GlossVariantProps = StyledVariantProps<typeof StyledAccordionItem>;\n\nexport interface Props {\n  title: {\n    title: string;\n    language: string;\n  };\n  glossData?: IGlossDataDTO;\n  audio?: {\n    title: string;\n    src?: string;\n  };\n  exampleIds?: string;\n  exampleLangs?: string;\n}\n\nconst Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }: Props & GlossVariantProps) => {\n  const { t } = useTranslation();\n\n  const filteredExamples = useMemo(\n    () => getFilteredExamples(glossData, exampleIds, exampleLangs),\n    [exampleIds, exampleLangs, glossData],\n  );\n\n  if (!glossData) return null;\n\n  return (\n    <AccordionRoot multiple variant=\"clean\">\n      <StyledAccordionItem value=\"gloss\" variant={variant}>\n        <Container>\n          <TextWrapper>\n            <Text textStyle=\"label.medium\" fontWeight=\"bold\" asChild consumeCss lang={glossData.originalLanguage}>\n              <span>{glossData.gloss}</span>\n            </Text>\n            {!!glossData.transcriptions.traditional && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  key={t(\"gloss.transcriptions.traditional\")}\n                  aria-label={t(\"gloss.transcriptions.traditional\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.traditional}\n                </span>\n              </Text>\n            )}\n            {!!glossData.transcriptions.pinyin && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span\n                  data-pinyin=\"\"\n                  key={t(\"gloss.transcriptions.pinyin\")}\n                  aria-label={t(\"gloss.transcriptions.pinyin\")}\n                  lang={glossData.originalLanguage}\n                >\n                  {glossData.transcriptions.pinyin}\n                </span>\n              </Text>\n            )}\n            {!!glossData.wordClass && (\n              <Text textStyle=\"label.medium\" asChild consumeCss>\n                <span aria-label={t(\"gloss.wordClass\")}>{t(`wordClass.${glossData.wordClass}`).toLowerCase()}</span>\n              </Text>\n            )}\n          </TextWrapper>\n          {!!audio?.src && <SpeechControl src={audio.src} title={audio.title} type=\"gloss\" />}\n        </Container>\n        <StyledContainer>\n          <Text textStyle=\"label.medium\" asChild consumeCss>\n            <span lang={title.language}>{title.title}</span>\n          </Text>\n          {!!filteredExamples.length && (\n            <AccordionItemTrigger asChild>\n              <IconButton variant=\"tertiary\" aria-label={t(\"gloss.showExamples\")} title={t(\"gloss.showExamples\")}>\n                <AccordionItemIndicator asChild>\n                  <ArrowDownShortLine size=\"medium\" />\n                </AccordionItemIndicator>\n              </IconButton>\n            </AccordionItemTrigger>\n          )}\n        </StyledContainer>\n        <StyledAccordionItemContent>\n          {filteredExamples.map((examples, index) => (\n            <GlossExample\n              key={`gloss-example-${index}`}\n              examples={examples}\n              originalLanguage={glossData.originalLanguage}\n            />\n          ))}\n        </StyledAccordionItemContent>\n      </StyledAccordionItem>\n    </AccordionRoot>\n  );\n};\n\nexport default Gloss;\n"],"mappings":"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"}

package/lib/Gloss/GlossExample.js

@@ -0,0 +1,47 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.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_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/Gloss/GlossExample.tsx
+const StyledGlossExample = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	borderTop: "1px solid",
+	borderColor: "stroke.subtle",
+	paddingBlock: "xsmall",
+	paddingInline: "medium",
+	_first: {
+		background: "surface.brand.1.subtle",
+		borderColor: "stroke.default",
+		"& p": { fontWeight: "bold" }
+	}
+} });
+const PinyinText = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Text, { base: { fontStyle: "italic" } });
+const GlossExample = ({ examples, originalLanguage }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: examples.map((examples$1, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledGlossExample, {
+			lang: examples$1.language,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+				textStyle: "label.medium",
+				lang: examples$1.language,
+				children: examples$1.example
+			})
+		}),
+		!!examples$1.transcriptions.pinyin && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledGlossExample, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PinyinText, {
+			"data-pinyin": "",
+			lang: originalLanguage,
+			textStyle: "label.medium",
+			children: examples$1.transcriptions?.pinyin
+		}) }),
+		!!examples$1.transcriptions?.traditional && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledGlossExample, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+			textStyle: "label.medium",
+			lang: originalLanguage,
+			children: examples$1.transcriptions.traditional
+		}) })
+	] }, index)) });
+};
+var GlossExample_default = GlossExample;
+
+//#endregion
+exports.GlossExample_default = GlossExample_default;
+//# sourceMappingURL=GlossExample.js.map

package/lib/Gloss/GlossExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlossExample.js","names":["Text","examples","Fragment"],"sources":["../../src/Gloss/GlossExample.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 { Fragment } from \"react\";\nimport { Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { IGlossExampleDTO } from \"@ndla/types-backend/concept-api\";\n\ninterface Props {\n  examples: IGlossExampleDTO[];\n  originalLanguage: string | undefined;\n}\n\nconst StyledGlossExample = styled(\"div\", {\n  base: {\n    borderTop: \"1px solid\",\n    borderColor: \"stroke.subtle\",\n    paddingBlock: \"xsmall\",\n    paddingInline: \"medium\",\n    _first: {\n      background: \"surface.brand.1.subtle\",\n      borderColor: \"stroke.default\",\n      \"& p\": {\n        fontWeight: \"bold\",\n      },\n    },\n  },\n});\n\nconst PinyinText = styled(Text, {\n  base: {\n    fontStyle: \"italic\",\n  },\n});\n\nconst GlossExample = ({ examples, originalLanguage }: Props) => {\n  return (\n    <div>\n      {examples.map((examples, index) => (\n        <Fragment key={index}>\n          <StyledGlossExample lang={examples.language}>\n            <Text textStyle=\"label.medium\" lang={examples.language}>\n              {examples.example}\n            </Text>\n          </StyledGlossExample>\n          {!!examples.transcriptions.pinyin && (\n            <StyledGlossExample>\n              <PinyinText data-pinyin=\"\" lang={originalLanguage} textStyle=\"label.medium\">\n                {examples.transcriptions?.pinyin}\n              </PinyinText>\n            </StyledGlossExample>\n          )}\n          {!!examples.transcriptions?.traditional && (\n            <StyledGlossExample>\n              <Text textStyle=\"label.medium\" lang={originalLanguage}>\n                {examples.transcriptions.traditional}\n              </Text>\n            </StyledGlossExample>\n          )}\n        </Fragment>\n      ))}\n    </div>\n  );\n};\n\nexport default GlossExample;\n"],"mappings":";;;;;;;AAkBA,MAAM,qBAAqB,qCAAO,OAAO,EACvC,MAAM;CACJ,WAAW;CACX,aAAa;CACb,cAAc;CACd,eAAe;CACf,QAAQ;EACN,YAAY;EACZ,aAAa;EACb,OAAO,EACL,YAAY,OACb;CACF;AACF,EACF,EAAC;AAEF,MAAM,aAAa,qCAAOA,wBAAM,EAC9B,MAAM,EACJ,WAAW,SACZ,EACF,EAAC;AAEF,MAAM,eAAe,CAAC,EAAE,UAAU,kBAAyB,KAAK;AAC9D,wBACE,2BAAC,mBACE,SAAS,IAAI,CAACC,YAAU,0BACvB,4BAACC;kBACC,2BAAC;GAAmB,MAAMD,WAAS;6BACjC,2BAACD;IAAK,WAAU;IAAe,MAAMC,WAAS;cAC3CA,WAAS;KACL;IACY;IAClBA,WAAS,eAAe,0BACzB,2BAAC,gDACC,2BAAC;GAAW,eAAY;GAAG,MAAM;GAAkB,WAAU;aAC1DA,WAAS,gBAAgB;IACf,GACM;IAEpBA,WAAS,gBAAgB,+BAC1B,2BAAC,gDACC,2BAACD;GAAK,WAAU;GAAe,MAAM;aAClCC,WAAS,eAAe;IACpB,GACY;MAlBV,MAoBJ,CACX,GACE;AAET;AAED,2BAAe"}

package/lib/Grid/Grid.js

@@ -0,0 +1,67 @@
+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"));
+
+//#region src/Grid/Grid.tsx
+const GridContainer = (0, __ndla_styled_system_jsx.styled)("div", {
+	base: {
+		display: "grid",
+		justifyContent: "center",
+		borderRadius: "xsmall",
+		gridRowGap: "large",
+		gridColumnGap: "medium",
+		width: "100%",
+		backgroundColor: "background.subtle",
+		minWidth: "surface.xxsmall",
+		gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+		"& :not(div[data-parallax-cell='true']) > div[data-embed-type='pitch']": {
+			height: "100%",
+			"& > :last-child": { marginTop: "auto" }
+		},
+		tabletDown: { gridTemplateColumns: "repeat(1, minmax(0, 1fr))" },
+		tabletToDesktop: {
+			gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+			"& > div:nth-child(3):last-child": {
+				display: "flex",
+				flexFlow: "column",
+				justifyContent: "center",
+				alignItems: "center",
+				gridColumn: "span 2"
+			}
+		}
+	},
+	variants: {
+		columns: {
+			"2": {},
+			"2x2": {},
+			"3": { desktop: { gridTemplateColumns: "repeat(3, minmax(0, 1fr))" } },
+			"4": { desktop: { gridTemplateColumns: "repeat(4, minmax(0, 1fr))" } }
+		},
+		background: {
+			white: { backgroundColor: "surface.default" },
+			transparent: { backgroundColor: "transparent" },
+			gray: { backgroundColor: "background.subtle" }
+		},
+		border: { lightBlue: {
+			padding: "xsmall",
+			border: "1px solid",
+			borderColor: "surface.brand.2"
+		} }
+	}
+});
+const Grid = ({ columns, border, children, background = "gray",...rest }) => {
+	const amountOfColumns = children?.length === 3 ? "3" : columns;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridContainer, {
+		"data-embed-type": "grid",
+		border: border === "none" ? void 0 : border,
+		columns: amountOfColumns,
+		background,
+		...rest,
+		children
+	});
+};
+
+//#endregion
+exports.Grid = Grid;
+//# sourceMappingURL=Grid.js.map

package/lib/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","names":[],"sources":["../../src/Grid/Grid.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 { type ComponentProps, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst GridContainer = styled(\"div\", {\n  base: {\n    display: \"grid\",\n    justifyContent: \"center\",\n    borderRadius: \"xsmall\",\n    gridRowGap: \"large\",\n    gridColumnGap: \"medium\",\n    width: \"100%\",\n    backgroundColor: \"background.subtle\",\n    minWidth: \"surface.xxsmall\",\n    gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n\n    \"& :not(div[data-parallax-cell='true']) > div[data-embed-type='pitch']\": {\n      height: \"100%\",\n      \"& > :last-child\": {\n        marginTop: \"auto\",\n      },\n    },\n    tabletDown: {\n      gridTemplateColumns: \"repeat(1, minmax(0, 1fr))\",\n    },\n    tabletToDesktop: {\n      gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n      \"& > div:nth-child(3):last-child\": {\n        display: \"flex\",\n        flexFlow: \"column\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n        gridColumn: \"span 2\",\n      },\n    },\n  },\n  variants: {\n    columns: {\n      \"2\": {},\n      \"2x2\": {},\n      \"3\": { desktop: { gridTemplateColumns: \"repeat(3, minmax(0, 1fr))\" } },\n      \"4\": { desktop: { gridTemplateColumns: \"repeat(4, minmax(0, 1fr))\" } },\n    },\n    background: {\n      white: { backgroundColor: \"surface.default\" },\n      transparent: { backgroundColor: \"transparent\" },\n      gray: { backgroundColor: \"background.subtle\" },\n    },\n    border: {\n      lightBlue: {\n        padding: \"xsmall\",\n        border: \"1px solid\",\n        borderColor: \"surface.brand.2\",\n      },\n    },\n  },\n});\n\nexport interface GridProps extends ComponentProps<\"div\"> {\n  columns: \"2\" | \"3\" | \"4\" | \"2x2\";\n  border?: \"none\" | \"lightBlue\";\n  background?: \"transparent\" | \"white\" | \"gray\";\n  children?: ReactNode[];\n}\n\nexport const Grid = ({ columns, border, children, background = \"gray\", ...rest }: GridProps) => {\n  const amountOfColumns = children?.length === 3 ? \"3\" : columns;\n\n  return (\n    <GridContainer\n      data-embed-type=\"grid\"\n      border={border === \"none\" ? undefined : border}\n      columns={amountOfColumns}\n      background={background}\n      {...rest}\n    >\n      {children}\n    </GridContainer>\n  );\n};\n"],"mappings":";;;;;;AAWA,MAAM,gBAAgB,qCAAO,OAAO;CAClC,MAAM;EACJ,SAAS;EACT,gBAAgB;EAChB,cAAc;EACd,YAAY;EACZ,eAAe;EACf,OAAO;EACP,iBAAiB;EACjB,UAAU;EACV,qBAAqB;EAErB,yEAAyE;GACvE,QAAQ;GACR,mBAAmB,EACjB,WAAW,OACZ;EACF;EACD,YAAY,EACV,qBAAqB,4BACtB;EACD,iBAAiB;GACf,qBAAqB;GACrB,mCAAmC;IACjC,SAAS;IACT,UAAU;IACV,gBAAgB;IAChB,YAAY;IACZ,YAAY;GACb;EACF;CACF;CACD,UAAU;EACR,SAAS;GACP,KAAK,CAAE;GACP,OAAO,CAAE;GACT,KAAK,EAAE,SAAS,EAAE,qBAAqB,4BAA6B,EAAE;GACtE,KAAK,EAAE,SAAS,EAAE,qBAAqB,4BAA6B,EAAE;EACvE;EACD,YAAY;GACV,OAAO,EAAE,iBAAiB,kBAAmB;GAC7C,aAAa,EAAE,iBAAiB,cAAe;GAC/C,MAAM,EAAE,iBAAiB,oBAAqB;EAC/C;EACD,QAAQ,EACN,WAAW;GACT,SAAS;GACT,QAAQ;GACR,aAAa;EACd,EACF;CACF;AACF,EAAC;AASF,MAAa,OAAO,CAAC,EAAE,SAAS,QAAQ,UAAU,aAAa,OAAQ,GAAG,MAAiB,KAAK;CAC9F,MAAM,kBAAkB,UAAU,WAAW,IAAI,MAAM;AAEvD,wBACE,2BAAC;EACC,mBAAgB;EAChB,QAAQ,WAAW,kBAAqB;EACxC,SAAS;EACG;EACZ,GAAI;EAEH;GACa;AAEnB"}

package/lib/Grid/GridParallaxItem.js

@@ -0,0 +1,22 @@
+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"));
+
+//#region src/Grid/GridParallaxItem.tsx
+const StyledGridParallaxItem = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	position: "relative",
+	"& > div": {
+		top: "var(--masthead-height, 0px)",
+		position: "sticky"
+	}
+} });
+const GridParallaxItem = ({ children,...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledGridParallaxItem, {
+	...rest,
+	"data-embed-type": "grid-parallax",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children })
+});
+
+//#endregion
+exports.GridParallaxItem = GridParallaxItem;
+//# sourceMappingURL=GridParallaxItem.js.map

package/lib/Grid/GridParallaxItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridParallaxItem.js","names":[],"sources":["../../src/Grid/GridParallaxItem.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 { type HTMLAttributes } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\nconst StyledGridParallaxItem = styled(\"div\", {\n  base: {\n    position: \"relative\",\n    \"& > div\": {\n      top: \"var(--masthead-height, 0px)\",\n      position: \"sticky\",\n    },\n  },\n});\n\nexport const GridParallaxItem = ({ children, ...rest }: HTMLAttributes<HTMLDivElement>) => (\n  <StyledGridParallaxItem {...rest} data-embed-type=\"grid-parallax\">\n    <div>{children}</div>\n  </StyledGridParallaxItem>\n);\n"],"mappings":";;;;;;AAWA,MAAM,yBAAyB,qCAAO,OAAO,EAC3C,MAAM;CACJ,UAAU;CACV,WAAW;EACT,KAAK;EACL,UAAU;CACX;AACF,EACF,EAAC;AAEF,MAAa,mBAAmB,CAAC,EAAE,SAAU,GAAG,MAAsC,qBACpF,2BAAC;CAAuB,GAAI;CAAM,mBAAgB;2BAChD,2BAAC,SAAK,WAAe;EACE"}

package/lib/KeyFigure/KeyFigure.js

@@ -0,0 +1,47 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+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 react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/KeyFigure/KeyFigure.tsx
+const ContentWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center",
+	justifyContent: "center",
+	gap: "xsmall",
+	"&:not(:has(> img))": { paddingBlock: "xxlarge" }
+} });
+const StyledImage = (0, __ndla_styled_system_jsx.styled)("img", { base: {
+	height: "surface.3xsmall",
+	width: "surface.3xsmall",
+	borderRadius: "xsmall"
+} });
+const TitleWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	textStyle: "heading.large",
+	textAlign: "center"
+} });
+const SubTitleWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	textStyle: "title.medium",
+	textAlign: "center"
+} });
+const KeyFigure = ({ image, title, subtitle }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ContentWrapper, {
+		"data-embed-type": "key-figure",
+		children: [
+			!!image && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledImage, {
+				src: `${image?.src}?width=150`,
+				width: 150,
+				height: 150,
+				alt: image?.alt
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TitleWrapper, { children: (0, html_react_parser.default)(title) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubTitleWrapper, { children: (0, html_react_parser.default)(subtitle) })
+		]
+	});
+};
+var KeyFigure_default = KeyFigure;
+
+//#endregion
+exports.KeyFigure_default = KeyFigure_default;
+//# sourceMappingURL=KeyFigure.js.map

package/lib/KeyFigure/KeyFigure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyFigure.js","names":[],"sources":["../../src/KeyFigure/KeyFigure.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 { styled } from \"@ndla/styled-system/jsx\";\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: \"xsmall\",\n\n    \"&:not(:has(> img))\": {\n      paddingBlock: \"xxlarge\",\n    },\n  },\n});\n\nconst StyledImage = styled(\"img\", {\n  base: {\n    height: \"surface.3xsmall\",\n    width: \"surface.3xsmall\",\n    borderRadius: \"xsmall\",\n  },\n});\n\nconst TitleWrapper = styled(\"div\", {\n  base: {\n    textStyle: \"heading.large\",\n    textAlign: \"center\",\n  },\n});\n\nconst SubTitleWrapper = styled(\"div\", {\n  base: {\n    textStyle: \"title.medium\",\n    textAlign: \"center\",\n  },\n});\n\nexport interface Props {\n  image?: {\n    src?: string;\n    alt?: string;\n  };\n  title: string;\n  subtitle: string;\n}\n\nconst KeyFigure = ({ image, title, subtitle }: Props) => {\n  return (\n    <ContentWrapper data-embed-type=\"key-figure\">\n      {!!image && <StyledImage src={`${image?.src}?width=150`} width={150} height={150} alt={image?.alt} />}\n      <TitleWrapper>{parse(title)}</TitleWrapper>\n      <SubTitleWrapper>{parse(subtitle)}</SubTitleWrapper>\n    </ContentWrapper>\n  );\n};\n\nexport default KeyFigure;\n"],"mappings":";;;;;;AAWA,MAAM,iBAAiB,qCAAO,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,gBAAgB;CAChB,KAAK;CAEL,sBAAsB,EACpB,cAAc,UACf;AACF,EACF,EAAC;AAEF,MAAM,cAAc,qCAAO,OAAO,EAChC,MAAM;CACJ,QAAQ;CACR,OAAO;CACP,cAAc;AACf,EACF,EAAC;AAEF,MAAM,eAAe,qCAAO,OAAO,EACjC,MAAM;CACJ,WAAW;CACX,WAAW;AACZ,EACF,EAAC;AAEF,MAAM,kBAAkB,qCAAO,OAAO,EACpC,MAAM;CACJ,WAAW;CACX,WAAW;AACZ,EACF,EAAC;AAWF,MAAM,YAAY,CAAC,EAAE,OAAO,OAAO,UAAiB,KAAK;AACvD,wBACE,4BAAC;EAAe,mBAAgB;;KAC3B,yBAAS,2BAAC;IAAY,MAAM,EAAE,OAAO,IAAI;IAAa,OAAO;IAAK,QAAQ;IAAK,KAAK,OAAO;KAAO;mBACrG,2BAAC,0BAAc,+BAAM,MAAM,GAAgB;mBAC3C,2BAAC,6BAAiB,+BAAM,SAAS,GAAmB;;GACrC;AAEpB;AAED,wBAAe"}

package/lib/LicenseByline/EmbedByline.js

@@ -0,0 +1,134 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
+const require_LicenseLink = require('./LicenseLink.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_licenses = require_rolldown_runtime.__toESM(require("@ndla/licenses"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/LicenseByline/EmbedByline.tsx
+const BylineWrapper = (0, __ndla_styled_system_jsx.styled)("figcaption", { base: {
+	display: "flex",
+	flexDirection: "column",
+	paddingBlock: "xsmall",
+	textStyle: "label.medium",
+	color: "text.subtle"
+} });
+const ErrorBylineWrapper = (0, __ndla_styled_system_jsx.styled)(BylineWrapper, { base: {
+	border: "1px solid",
+	borderColor: "stroke.error",
+	borderRadius: "xsmall",
+	background: "surface.dangerSubtle",
+	paddingInline: "medium",
+	paddingBlock: "medium"
+} });
+const StyledText = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Text, { base: { fontStyle: "italic" } });
+const ContentWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "flex",
+	gap: "xsmall",
+	alignItems: "center",
+	textStyle: "label.medium"
+} });
+const BaseDescription = (0, __ndla_styled_system_jsx.styled)("div", { base: {
+	display: "inline-flex",
+	whiteSpace: "pre-wrap"
+} });
+const EmbedByline = ({ type, description, children, visibleAlt, hideCopyright,...props }) => {
+	const { t } = (0, react_i18next.useTranslation)();
+	if (props.error) {
+		const typeString = type === "h5p" ? "H5P" : t(`embed.type.${type}`).toLowerCase();
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorBylineWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ContentWrapper, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.AlertLine, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseDescription, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("embed.embedError", { type: typeString }) }) })] }) });
+	}
+	const { copyright } = props;
+	const hideByline = hideCopyright && !description;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [!hideByline && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BylineWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+		!!hideCopyright && description,
+		!hideCopyright && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseContainerContent, {
+			type,
+			copyright,
+			children: description
+		}),
+		children
+	] }) }), visibleAlt ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledText, {
+		color: "text.subtle",
+		textStyle: "label.medium",
+		asChild: true,
+		consumeCss: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: `Alt: ${visibleAlt}` })
+	}) : null] });
+};
+const StyledDescription = (0, __ndla_styled_system_jsx.styled)(BaseDescription, { base: { mobileWideDown: {
+	display: "grid",
+	gridTemplateColumns: "1fr auto",
+	alignItems: "center",
+	overflow: "hidden",
+	_open: { display: "inline" }
+} } });
+const TextContent = (0, __ndla_styled_system_jsx.styled)("span", { base: { mobileWideDown: {
+	whiteSpace: "nowrap",
+	maxHeight: "large",
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	transitionProperty: "max-height",
+	transitionDuration: "slow",
+	transitionTimingFunction: "ease-in",
+	marginInlineEnd: "4xsmall",
+	_open: {
+		whiteSpace: "pre-wrap",
+		maxHeight: "none"
+	}
+} } });
+const StyledButton = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Button, { base: { mobileWide: { display: "none" } } });
+const LicenseDescription = ({ children, isOpen, setIsOpen }) => {
+	const open = isOpen ? { "data-open": "" } : {};
+	const { t } = (0, react_i18next.useTranslation)();
+	const handleToggle = () => {
+		setIsOpen(!isOpen);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContentWrapper, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledDescription, {
+		...open,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextContent, {
+			...open,
+			children
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledButton, {
+			variant: "link",
+			size: "small",
+			onClick: handleToggle,
+			children: isOpen ? `${t("audio.readLessDescriptionLabel")}` : `${t("audio.readMoreDescriptionLabel")}`
+		})]
+	}) });
+};
+const LicenseContainerContent = ({ children, copyright, type }) => {
+	const { t, i18n } = (0, react_i18next.useTranslation)();
+	const license = copyright ? (0, __ndla_licenses.getLicenseByAbbreviation)(copyright.license?.license ?? "", i18n.language) : void 0;
+	const authors = (0, __ndla_licenses.getLicenseCredits)(copyright);
+	const captionAuthors = Object.values(authors).find((i) => i.length > 0) ?? [];
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		children,
+		` ${t(`embed.type.${type}`)}${captionAuthors.length ? ": " : ""}`,
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: captionAuthors.map((author) => author.name).join(", ") }),
+		license ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [" / ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LicenseLink.LicenseLink, {
+			license,
+			hideLink: !isOpen && !!children
+		})] }) : null
+	] });
+	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LicenseDescription, {
+		isOpen,
+		setIsOpen,
+		children: content
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
+		textStyle: "label.medium",
+		asChild: true,
+		consumeCss: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: content })
+	});
+};
+
+//#endregion
+exports.EmbedByline = EmbedByline;
+exports.LicenseContainerContent = LicenseContainerContent;
+//# sourceMappingURL=EmbedByline.js.map

package/lib/LicenseByline/EmbedByline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmbedByline.js","names":["Text","AlertLine","Button","LicenseLink"],"sources":["../../src/LicenseByline/EmbedByline.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 { type Dispatch, type ReactNode, type SetStateAction, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AlertLine } from \"@ndla/icons\";\nimport { getLicenseByAbbreviation, getLicenseCredits } from \"@ndla/licenses\";\nimport { Button, Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ICopyrightDTO as ArticleCopyright } from \"@ndla/types-backend/article-api\";\nimport type { ICopyrightDTO as AudioCopyright } from \"@ndla/types-backend/audio-api\";\nimport type { IDraftCopyrightDTO as ConceptCopyright } from \"@ndla/types-backend/concept-api\";\nimport type { ICopyrightDTO as ImageCopyright } from \"@ndla/types-backend/image-api\";\nimport type { BrightcoveCopyright } from \"@ndla/types-embed\";\nimport { LicenseLink } from \"./LicenseLink\";\n\ninterface BaseProps {\n  description?: ReactNode;\n  children?: ReactNode;\n  visibleAlt?: string;\n  error?: true | false;\n  hideDescription?: boolean;\n  hideCopyright?: boolean;\n}\n\nexport interface EmbedBylineErrorProps extends BaseProps {\n  type: EmbedBylineTypeProps[\"type\"] | \"h5p\" | \"external\" | \"code\";\n  error: true;\n}\n\ninterface ImageProps extends BaseProps {\n  type: \"image\";\n  copyright: ImageCopyright | undefined;\n}\n\ninterface BrightcoveProps extends BaseProps {\n  type: \"video\";\n  copyright: BrightcoveCopyright | undefined;\n}\n\ninterface AudioProps extends BaseProps {\n  type: \"audio\";\n  copyright: AudioCopyright | undefined;\n}\n\ninterface PodcastProps extends BaseProps {\n  type: \"podcast\";\n  copyright: AudioCopyright | undefined;\n}\n\ninterface ConceptProps extends BaseProps {\n  type: \"concept\" | \"gloss\";\n  copyright: ConceptCopyright | undefined;\n}\n\ninterface CopyrightProps extends BaseProps {\n  type: \"copyright\";\n  copyright: ArticleCopyright | undefined;\n}\n\nexport type EmbedBylineTypeProps =\n  | ImageProps\n  | BrightcoveProps\n  | AudioProps\n  | PodcastProps\n  | ConceptProps\n  | CopyrightProps;\n\ntype Props = EmbedBylineTypeProps | EmbedBylineErrorProps;\n\nconst BylineWrapper = styled(\"figcaption\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    paddingBlock: \"xsmall\",\n    textStyle: \"label.medium\",\n    color: \"text.subtle\",\n  },\n});\n\nconst ErrorBylineWrapper = styled(BylineWrapper, {\n  base: {\n    border: \"1px solid\",\n    borderColor: \"stroke.error\",\n    borderRadius: \"xsmall\",\n    background: \"surface.dangerSubtle\",\n    paddingInline: \"medium\",\n    paddingBlock: \"medium\",\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    fontStyle: \"italic\",\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xsmall\",\n    alignItems: \"center\",\n    textStyle: \"label.medium\",\n  },\n});\n\nconst BaseDescription = styled(\"div\", {\n  base: {\n    display: \"inline-flex\",\n    whiteSpace: \"pre-wrap\",\n  },\n});\n\nexport const EmbedByline = ({ type, description, children, visibleAlt, hideCopyright, ...props }: Props) => {\n  const { t } = useTranslation();\n\n  if (props.error) {\n    const typeString = type === \"h5p\" ? \"H5P\" : t(`embed.type.${type}`).toLowerCase();\n    return (\n      <ErrorBylineWrapper>\n        <ContentWrapper>\n          <AlertLine />\n          <BaseDescription>\n            <span>{t(\"embed.embedError\", { type: typeString })}</span>\n          </BaseDescription>\n        </ContentWrapper>\n      </ErrorBylineWrapper>\n    );\n  }\n\n  const { copyright } = props;\n  const hideByline = hideCopyright && !description;\n\n  return (\n    <>\n      {!hideByline && (\n        <BylineWrapper>\n          <div>\n            {!!hideCopyright && description}\n            {!hideCopyright && (\n              <LicenseContainerContent type={type} copyright={copyright}>\n                {description}\n              </LicenseContainerContent>\n            )}\n            {children}\n          </div>\n        </BylineWrapper>\n      )}\n      {visibleAlt ? (\n        <StyledText color=\"text.subtle\" textStyle=\"label.medium\" asChild consumeCss>\n          <span>{`Alt: ${visibleAlt}`}</span>\n        </StyledText>\n      ) : null}\n    </>\n  );\n};\n\ninterface LicenseContainerProps {\n  children?: ReactNode;\n  copyright: EmbedBylineTypeProps[\"copyright\"];\n  type: Props[\"type\"];\n}\n\nconst StyledDescription = styled(BaseDescription, {\n  base: {\n    mobileWideDown: {\n      display: \"grid\",\n      gridTemplateColumns: \"1fr auto\",\n      alignItems: \"center\",\n      overflow: \"hidden\",\n      _open: {\n        display: \"inline\",\n      },\n    },\n  },\n});\n\nconst TextContent = styled(\"span\", {\n  base: {\n    mobileWideDown: {\n      whiteSpace: \"nowrap\",\n      maxHeight: \"large\",\n      overflow: \"hidden\",\n      textOverflow: \"ellipsis\",\n      transitionProperty: \"max-height\",\n      transitionDuration: \"slow\",\n      transitionTimingFunction: \"ease-in\",\n      marginInlineEnd: \"4xsmall\",\n      _open: {\n        whiteSpace: \"pre-wrap\",\n        maxHeight: \"none\",\n      },\n    },\n  },\n});\n\nconst StyledButton = styled(Button, {\n  base: {\n    mobileWide: {\n      display: \"none\",\n    },\n  },\n});\n\ninterface LicenseDescriptionProps {\n  children?: ReactNode;\n  isOpen: boolean;\n  setIsOpen: Dispatch<SetStateAction<boolean>>;\n}\n\nconst LicenseDescription = ({ children, isOpen, setIsOpen }: LicenseDescriptionProps) => {\n  const open = isOpen ? { \"data-open\": \"\" } : {};\n  const { t } = useTranslation();\n\n  const handleToggle = () => {\n    setIsOpen(!isOpen);\n  };\n\n  return (\n    <ContentWrapper>\n      <StyledDescription {...open}>\n        <TextContent {...open}>{children}</TextContent>\n        <StyledButton variant=\"link\" size=\"small\" onClick={handleToggle}>\n          {isOpen ? `${t(\"audio.readLessDescriptionLabel\")}` : `${t(\"audio.readMoreDescriptionLabel\")}`}\n        </StyledButton>\n      </StyledDescription>\n    </ContentWrapper>\n  );\n};\n\nexport const LicenseContainerContent = ({ children, copyright, type }: LicenseContainerProps) => {\n  const { t, i18n } = useTranslation();\n  const license = copyright ? getLicenseByAbbreviation(copyright.license?.license ?? \"\", i18n.language) : undefined;\n  const authors = getLicenseCredits(copyright);\n  const captionAuthors = Object.values(authors).find((i) => i.length > 0) ?? [];\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n\n  const content = (\n    <>\n      {children}\n      {` ${t(`embed.type.${type}`)}${captionAuthors.length ? \": \" : \"\"}`}\n      <span>{captionAuthors.map((author) => author.name).join(\", \")}</span>\n      {license ? (\n        <>\n          {\" / \"}\n          {<LicenseLink license={license} hideLink={!isOpen && !!children} />}\n        </>\n      ) : null}\n    </>\n  );\n\n  if (children) {\n    return (\n      <LicenseDescription isOpen={isOpen} setIsOpen={setIsOpen}>\n        {content}\n      </LicenseDescription>\n    );\n  }\n\n  return (\n    <Text textStyle=\"label.medium\" asChild consumeCss>\n      <span>{content}</span>\n    </Text>\n  );\n};\n"],"mappings":"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"}

package/lib/LicenseByline/LicenseLink.js

@@ -0,0 +1,32 @@
+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 __ndla_safelink = require_rolldown_runtime.__toESM(require("@ndla/safelink"));
+const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
+
+//#region src/LicenseByline/LicenseLink.tsx
+const StyledSafeLink = (0, __ndla_styled_system_jsx.styled)(__ndla_safelink.SafeLink, { base: {
+	color: "text.link",
+	textDecoration: "underline",
+	whiteSpace: "nowrap",
+	_hover: { textDecoration: "none" },
+	_focusWithin: { textDecoration: "none" },
+	mobileWideDown: { _disabled: { display: "none" } }
+} });
+const LicenseLink = (0, react.forwardRef)(({ license, hideLink,...rest }, ref) => {
+	const disabled = hideLink ? { "data-disabled": "" } : {};
+	if (license.abbreviation === "unknown") return null;
+	if (license.url?.length) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSafeLink, {
+		to: license.url,
+		rel: "license",
+		...disabled,
+		...rest,
+		ref,
+		children: license.abbreviation
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: license.abbreviation });
+});
+
+//#endregion
+exports.LicenseLink = LicenseLink;
+//# sourceMappingURL=LicenseLink.js.map

package/lib/LicenseByline/LicenseLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LicenseLink.js","names":["SafeLink"],"sources":["../../src/LicenseByline/LicenseLink.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 { forwardRef } from \"react\";\nimport type { LicenseLocaleType } from \"@ndla/licenses\";\nimport { SafeLink, type SafeLinkProps } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props extends Omit<SafeLinkProps, \"to\"> {\n  license: LicenseLocaleType;\n  hideLink?: boolean;\n}\n\nconst StyledSafeLink = styled(SafeLink, {\n  base: {\n    color: \"text.link\",\n    textDecoration: \"underline\",\n    whiteSpace: \"nowrap\",\n    _hover: {\n      textDecoration: \"none\",\n    },\n    _focusWithin: {\n      textDecoration: \"none\",\n    },\n    mobileWideDown: {\n      _disabled: {\n        display: \"none\",\n      },\n    },\n  },\n});\n\nexport const LicenseLink = forwardRef<HTMLAnchorElement, Props>(({ license, hideLink, ...rest }, ref) => {\n  const disabled = hideLink ? { \"data-disabled\": \"\" } : {};\n  if (license.abbreviation === \"unknown\") {\n    return null;\n  }\n  if (license.url?.length) {\n    return (\n      <StyledSafeLink to={license.url} rel=\"license\" {...disabled} {...rest} ref={ref}>\n        {license.abbreviation}\n      </StyledSafeLink>\n    );\n  }\n  return <span>{license.abbreviation}</span>;\n});\n"],"mappings":";;;;;;;AAkBA,MAAM,iBAAiB,qCAAOA,0BAAU,EACtC,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,QAAQ,EACN,gBAAgB,OACjB;CACD,cAAc,EACZ,gBAAgB,OACjB;CACD,gBAAgB,EACd,WAAW,EACT,SAAS,OACV,EACF;AACF,EACF,EAAC;AAEF,MAAa,cAAc,sBAAqC,CAAC,EAAE,SAAS,SAAU,GAAG,MAAM,EAAE,QAAQ;CACvG,MAAM,WAAW,WAAW,EAAE,iBAAiB,GAAI,IAAG,CAAE;AACxD,KAAI,QAAQ,iBAAiB,UAC3B,QAAO;AAET,KAAI,QAAQ,KAAK,OACf,wBACE,2BAAC;EAAe,IAAI,QAAQ;EAAK,KAAI;EAAU,GAAI;EAAU,GAAI;EAAW;YACzE,QAAQ;GACM;AAGrB,wBAAO,2BAAC,oBAAM,QAAQ,eAAoB;AAC3C,EAAC"}