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

package/es/CampaignBlock/CampaignBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CampaignBlock.js","names":[],"sources":["../../src/CampaignBlock/CampaignBlock.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 { type ReactNode } from \"react\";\nimport { ArrowRightLine } from \"@ndla/icons\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLinkButton } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CampaignBlockEmbedData } from \"@ndla/types-embed\";\nimport type { HeadingLevel } from \"../types\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\ninterface Image {\n  src: string;\n  alt: string;\n}\n\ninterface Props {\n  title: string;\n  description: string;\n  headingLevel?: HeadingLevel;\n  url: {\n    url?: string;\n    text?: string;\n  };\n  image?: Image;\n  imageSide?: CampaignBlockEmbedData[\"imageSide\"];\n  className?: string;\n  path?: string;\n  background?: CampaignBlockEmbedData[\"background\"];\n}\n\nconst Wrapper = styled(\"div\", {\n  base: {\n    width: \"100%\",\n    height: \"100%\",\n    containerType: \"inline-size\",\n  },\n});\n\nconst Container = styled(\"div\", {\n  base: {\n    display: \"grid\",\n    gridTemplateColumns: \"1fr\",\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    backgroundColor: \"background.default\",\n    borderRadius: \"xsmall\",\n    boxShadow: \"full\",\n    overflow: \"hidden\",\n  },\n  variants: {\n    imageSide: {\n      left: {\n        \"@/tablet\": {\n          gridTemplateColumns: \"minmax(230px, 455px) auto\", //required for campaign block in myNdla\n        },\n        \"@supports not (container-type: inline-size)\": {\n          tabletWide: {\n            gridTemplateColumns: \"minmax(230px, 455px) auto\",\n          },\n        },\n      },\n      right: {\n        \"@/tablet\": {\n          gridTemplateColumns: \"auto minmax(230px, 455px)\", //required for campaign block in myNdla\n        },\n        \"@supports not (container-type: inline-size)\": {\n          tabletWide: {\n            gridTemplateColumns: \"auto minmax(230px, 455px)\",\n          },\n        },\n      },\n    },\n    background: {\n      neutral: {},\n      brand1: {\n        backgroundColor: \"surface.brand.1\",\n      },\n      brand3: {\n        backgroundColor: \"surface.brand.3\",\n      },\n    },\n  },\n  defaultVariants: {\n    imageSide: \"left\",\n    background: \"neutral\",\n  },\n});\n\nconst StyledImg = styled(\"img\", {\n  base: {\n    objectFit: \"cover\",\n    width: \"100%\",\n    height: \"215px\",\n    \"@/tablet\": {\n      height: \"340px\",\n    },\n    \"@supports not (container-type: inline-size)\": {\n      tablet: {\n        height: \"265px\",\n      },\n      tabletWide: {\n        height: \"340px\",\n      },\n    },\n    backgroundColor: \"background.default\",\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    width: \"100%\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"medium\",\n    alignItems: \"flex-start\",\n    justifyContent: \"center\",\n    paddingBlock: \"medium\",\n    paddingInline: \"medium\",\n    position: \"relative\",\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    tablet: {\n      display: \"block\",\n      overflow: \"hidden\",\n      position: \"relative\",\n      lineClamp: 4,\n      boxOrient: \"vertical\",\n    },\n  },\n});\n\ninterface LinkButtonProps {\n  url?: string;\n  path?: string;\n  children: ReactNode;\n}\n\nconst StyledSafeLinkButton = styled(SafeLinkButton, {\n  base: {\n    boxShadow: \"full\",\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n  },\n});\n\nconst LinkButton = ({ url, children, path }: LinkButtonProps) => {\n  if (url)\n    return (\n      <StyledSafeLinkButton to={getPossiblyRelativeUrl(url, path)} variant=\"secondary\" rel=\"noopener noreferrer\">\n        {children}\n      </StyledSafeLinkButton>\n    );\n  return children;\n};\n\nconst CampaignBlock = ({\n  title,\n  image,\n  imageSide = \"left\",\n  description,\n  headingLevel: InternalHeading = \"h2\",\n  url,\n  path,\n  className,\n  background,\n}: Props) => {\n  const imageComponent = image && <StyledImg src={`${image.src}?width=455`} height={340} width={455} alt={image.alt} />;\n\n  return (\n    <Wrapper>\n      <Container className={className} data-embed-type=\"campaign-block\" imageSide={imageSide} background={background}>\n        {imageSide === \"left\" && imageComponent}\n        <ContentWrapper>\n          <Text asChild consumeCss textStyle=\"heading.small\">\n            <InternalHeading>{parse(title)}</InternalHeading>\n          </Text>\n          <StyledText textStyle=\"body.xlarge\">{parse(description)}</StyledText>\n          {!!url?.url && (\n            <LinkButton url={url.url} path={path}>\n              {parse(url.text ?? \"\")}\n              <ArrowRightLine />\n            </LinkButton>\n          )}\n        </ContentWrapper>\n        {imageSide !== \"left\" && imageComponent}\n      </Container>\n    </Wrapper>\n  );\n};\n\nexport default CampaignBlock;\n"],"mappings":";;;;;;;;;;AAsCA,MAAM,UAAU,OAAO,OAAO,EAC5B,MAAM;CACJ,OAAO;CACP,QAAQ;CACR,eAAe;AAChB,EACF,EAAC;AAEF,MAAM,YAAY,OAAO,OAAO;CAC9B,MAAM;EACJ,SAAS;EACT,qBAAqB;EACrB,QAAQ;EACR,aAAa;EACb,iBAAiB;EACjB,cAAc;EACd,WAAW;EACX,UAAU;CACX;CACD,UAAU;EACR,WAAW;GACT,MAAM;IACJ,YAAY,EACV,qBAAqB,4BACtB;IACD,+CAA+C,EAC7C,YAAY,EACV,qBAAqB,4BACtB,EACF;GACF;GACD,OAAO;IACL,YAAY,EACV,qBAAqB,4BACtB;IACD,+CAA+C,EAC7C,YAAY,EACV,qBAAqB,4BACtB,EACF;GACF;EACF;EACD,YAAY;GACV,SAAS,CAAE;GACX,QAAQ,EACN,iBAAiB,kBAClB;GACD,QAAQ,EACN,iBAAiB,kBAClB;EACF;CACF;CACD,iBAAiB;EACf,WAAW;EACX,YAAY;CACb;AACF,EAAC;AAEF,MAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CACJ,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY,EACV,QAAQ,QACT;CACD,+CAA+C;EAC7C,QAAQ,EACN,QAAQ,QACT;EACD,YAAY,EACV,QAAQ,QACT;CACF;CACD,iBAAiB;AAClB,EACF,EAAC;AAEF,MAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CACJ,OAAO;CACP,SAAS;CACT,eAAe;CACf,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,cAAc;CACd,eAAe;CACf,UAAU;AACX,EACF,EAAC;AAEF,MAAM,aAAa,OAAO,MAAM,EAC9B,MAAM,EACJ,QAAQ;CACN,SAAS;CACT,UAAU;CACV,UAAU;CACV,WAAW;CACX,WAAW;AACZ,EACF,EACF,EAAC;AAQF,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM;CACJ,WAAW;CACX,QAAQ;CACR,aAAa;AACd,EACF,EAAC;AAEF,MAAM,aAAa,CAAC,EAAE,KAAK,UAAU,MAAuB,KAAK;AAC/D,KAAI,IACF,wBACE,IAAC;EAAqB,IAAI,uBAAuB,KAAK,KAAK;EAAE,SAAQ;EAAY,KAAI;EAClF;GACoB;AAE3B,QAAO;AACR;AAED,MAAM,gBAAgB,CAAC,EACrB,OACA,OACA,YAAY,QACZ,aACA,cAAc,kBAAkB,MAChC,KACA,MACA,WACA,YACM,KAAK;CACX,MAAM,iBAAiB,yBAAS,IAAC;EAAU,MAAM,EAAE,MAAM,IAAI;EAAa,QAAQ;EAAK,OAAO;EAAK,KAAK,MAAM;GAAO;AAErH,wBACE,IAAC,qCACC,KAAC;EAAqB;EAAW,mBAAgB;EAA4B;EAAuB;;GACjG,cAAc,UAAU;mBACzB,KAAC;oBACC,IAAC;KAAK;KAAQ;KAAW,WAAU;+BACjC,IAAC,6BAAiB,MAAM,MAAM,GAAmB;MAC5C;oBACP,IAAC;KAAW,WAAU;eAAe,MAAM,YAAY;MAAc;MAClE,KAAK,uBACN,KAAC;KAAW,KAAK,IAAI;KAAW;gBAC7B,MAAM,IAAI,QAAQ,GAAG,kBACtB,IAAC,mBAAiB;MACP;OAEA;GAChB,cAAc,UAAU;;GACf,GACJ;AAEb;AAED,4BAAe"}

package/es/CodeBlock/CodeBlock.js

@@ -0,0 +1,25 @@
+import { forwardRef, useMemo } from "react";
+import { styled } from "@ndla/styled-system/jsx";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@ndla/styled-system/css";
+
+//#region src/CodeBlock/CodeBlock.tsx
+const Pre = styled("pre", {});
+const Codeblock = forwardRef(({ highlightedCode, format, className,...props }, ref) => {
+	const codeWithLineNumbers = useMemo(() => {
+		return highlightedCode.split("\n").map((line, i) => {
+			return `<span class="linenumber">${i + 1}</span>${line}`;
+		}).join("\n");
+	}, [highlightedCode]);
+	return /* @__PURE__ */ jsx(Pre, {
+		className: cx("codeblock", `language-${format}`, className),
+		...props,
+		dangerouslySetInnerHTML: { __html: codeWithLineNumbers },
+		ref
+	});
+});
+var CodeBlock_default = Codeblock;
+
+//#endregion
+export { CodeBlock_default };
+//# sourceMappingURL=CodeBlock.js.map

package/es/CodeBlock/CodeBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.js","names":[],"sources":["../../src/CodeBlock/CodeBlock.tsx"],"sourcesContent":["/**\n * Copyright (c) 2020-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 ComponentPropsWithRef, forwardRef, useMemo } from \"react\";\nimport { cx } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { JsxStyleProps } from \"@ndla/styled-system/types\";\n\ninterface Props extends JsxStyleProps, ComponentPropsWithRef<\"pre\"> {\n  highlightedCode: string;\n  format: string;\n}\n\nconst Pre = styled(\"pre\", {});\n\nexport const Codeblock = forwardRef<HTMLPreElement, Props>(({ highlightedCode, format, className, ...props }, ref) => {\n  const codeWithLineNumbers = useMemo(() => {\n    return highlightedCode\n      .split(\"\\n\")\n      .map((line, i) => {\n        return `<span class=\"linenumber\">${i + 1}</span>${line}`;\n      })\n      .join(\"\\n\");\n  }, [highlightedCode]);\n\n  return (\n    <Pre\n      className={cx(\"codeblock\", `language-${format}`, className)}\n      {...props}\n      dangerouslySetInnerHTML={{ __html: codeWithLineNumbers }}\n      ref={ref}\n    />\n  );\n});\n\nexport default Codeblock;\n"],"mappings":";;;;;;AAkBA,MAAM,MAAM,OAAO,OAAO,CAAE,EAAC;AAE7B,MAAa,YAAY,WAAkC,CAAC,EAAE,iBAAiB,QAAQ,UAAW,GAAG,OAAO,EAAE,QAAQ;CACpH,MAAM,sBAAsB,QAAQ,MAAM;AACxC,SAAO,gBACJ,MAAM,KAAK,CACX,IAAI,CAAC,MAAM,MAAM;AAChB,WAAQ,2BAA2B,IAAI,EAAE,SAAS,KAAK;EACxD,EAAC,CACD,KAAK,KAAK;CACd,GAAE,CAAC,eAAgB,EAAC;AAErB,wBACE,IAAC;EACC,WAAW,GAAG,cAAc,WAAW,OAAO,GAAG,UAAU;EAC3D,GAAI;EACJ,yBAAyB,EAAE,QAAQ,oBAAqB;EACnD;GACL;AAEL,EAAC;AAEF,wBAAe"}

package/es/CodeBlock/codeLanguageOptions.js

@@ -0,0 +1,114 @@
+//#region src/CodeBlock/codeLanguageOptions.ts
+/**
+* Copyright (c) 2019-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 codeLanguageOptions = [
+	{
+		title: "Bash",
+		format: "bash"
+	},
+	{
+		title: "C",
+		format: "c"
+	},
+	{
+		title: "CSharp",
+		format: "csharp"
+	},
+	{
+		title: "CSS",
+		format: "css"
+	},
+	{
+		title: "Diff",
+		format: "diff"
+	},
+	{
+		title: "HTML",
+		format: "markup"
+	},
+	{
+		title: "Ini",
+		format: "ini"
+	},
+	{
+		title: "Java",
+		format: "java"
+	},
+	{
+		title: "Javascript",
+		format: "js"
+	},
+	{
+		title: "JSON",
+		format: "json"
+	},
+	{
+		title: "JSX",
+		format: "jsx"
+	},
+	{
+		title: "Kotlin",
+		format: "kotlin"
+	},
+	{
+		title: "LUA",
+		format: "lua"
+	},
+	{
+		title: "Markdown",
+		format: "markdown"
+	},
+	{
+		title: "Matlab",
+		format: "matlab"
+	},
+	{
+		title: "NSIS",
+		format: "nsis"
+	},
+	{
+		title: "PHP",
+		format: "php"
+	},
+	{
+		title: "Powershell",
+		format: "powershell"
+	},
+	{
+		title: "Python",
+		format: "python"
+	},
+	{
+		title: "Ruby",
+		format: "ruby"
+	},
+	{
+		title: "Rust",
+		format: "rust"
+	},
+	{
+		title: "SQL",
+		format: "sql"
+	},
+	{
+		title: "Text",
+		format: "text"
+	},
+	{
+		title: "VHDL",
+		format: "vhdl"
+	},
+	{
+		title: "XML",
+		format: "xml"
+	}
+];
+
+//#endregion
+export { codeLanguageOptions };
+//# sourceMappingURL=codeLanguageOptions.js.map

package/es/CodeBlock/codeLanguageOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"codeLanguageOptions.js","names":["codeLanguageOptions: Array<ICodeLangugeOption>"],"sources":["../../src/CodeBlock/codeLanguageOptions.ts"],"sourcesContent":["/**\n * Copyright (c) 2019-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\nexport const codeLanguageOptions: Array<ICodeLangugeOption> = [\n  {\n    title: \"Bash\",\n    format: \"bash\",\n  },\n  {\n    title: \"C\",\n    format: \"c\",\n  },\n  {\n    title: \"CSharp\",\n    format: \"csharp\",\n  },\n  {\n    title: \"CSS\",\n    format: \"css\",\n  },\n  {\n    title: \"Diff\",\n    format: \"diff\",\n  },\n  {\n    title: \"HTML\",\n    format: \"markup\",\n  },\n  {\n    title: \"Ini\",\n    format: \"ini\",\n  },\n  {\n    title: \"Java\",\n    format: \"java\",\n  },\n  {\n    title: \"Javascript\",\n    format: \"js\",\n  },\n  {\n    title: \"JSON\",\n    format: \"json\",\n  },\n  {\n    title: \"JSX\",\n    format: \"jsx\",\n  },\n  {\n    title: \"Kotlin\",\n    format: \"kotlin\",\n  },\n  {\n    title: \"LUA\",\n    format: \"lua\",\n  },\n  {\n    title: \"Markdown\",\n    format: \"markdown\",\n  },\n  {\n    title: \"Matlab\",\n    format: \"matlab\",\n  },\n  {\n    title: \"NSIS\",\n    format: \"nsis\",\n  },\n  {\n    title: \"PHP\",\n    format: \"php\",\n  },\n  {\n    title: \"Powershell\",\n    format: \"powershell\",\n  },\n  {\n    title: \"Python\",\n    format: \"python\",\n  },\n  {\n    title: \"Ruby\",\n    format: \"ruby\",\n  },\n  {\n    title: \"Rust\",\n    format: \"rust\",\n  },\n  {\n    title: \"SQL\",\n    format: \"sql\",\n  },\n  {\n    title: \"Text\",\n    format: \"text\",\n  },\n  {\n    title: \"VHDL\",\n    format: \"vhdl\",\n  },\n  {\n    title: \"XML\",\n    format: \"xml\",\n  },\n];\n\nexport interface ICodeLangugeOption {\n  title: string;\n  format: string;\n}\n"],"mappings":";;;;;;;;AAQA,MAAaA,sBAAiD;CAC5D;EACE,OAAO;EACP,QAAQ;CACT;CACD;EACE,OAAO;EACP,QAAQ;CACT;CACD;EACE,OAAO;EACP,QAAQ;CACT;CACD;EACE,OAAO;EACP,QAAQ;CACT;CACD;EACE,OAAO;EACP,QAAQ;CACT;CACD;EACE,OAAO;EACP,QAAQ;CACT;CACD;EACE,OAAO;EACP,QAAQ;CACT;CACD;EACE,OAAO;EACP,QAAQ;CACT;CACD;EACE,OAAO;EACP,QAAQ;CACT;CACD;EACE,OAAO;EACP,QAAQ;CACT;CACD;EACE,OAAO;EACP,QAAQ;CACT;CACD;EACE,OAAO;EACP,QAAQ;CACT;CACD;EACE,OAAO;EACP,QAAQ;CACT;CACD;EACE,OAAO;EACP,QAAQ;CACT;CACD;EACE,OAAO;EACP,QAAQ;CACT;CACD;EACE,OAAO;EACP,QAAQ;CACT;CACD;EACE,OAAO;EACP,QAAQ;CACT;CACD;EACE,OAAO;EACP,QAAQ;CACT;CACD;EACE,OAAO;EACP,QAAQ;CACT;CACD;EACE,OAAO;EACP,QAAQ;CACT;CACD;EACE,OAAO;EACP,QAAQ;CACT;CACD;EACE,OAAO;EACP,QAAQ;CACT;CACD;EACE,OAAO;EACP,QAAQ;CACT;CACD;EACE,OAAO;EACP,QAAQ;CACT;CACD;EACE,OAAO;EACP,QAAQ;CACT;AACF"}

package/es/Concept/Concept.js

@@ -0,0 +1,50 @@
+import { EmbedByline } from "../LicenseByline/EmbedByline.js";
+import { licenseAttributes } from "../utils/licenseAttributes.js";
+import { ImageEmbed_default } from "../Embed/ImageEmbed.js";
+import { H5pEmbed_default } from "../Embed/H5pEmbed.js";
+import { ExternalEmbed_default } from "../Embed/ExternalEmbed.js";
+import { IframeEmbed_default } from "../Embed/IframeEmbed.js";
+import { BrightcoveEmbed_default } from "../Embed/BrightcoveEmbed.js";
+import { forwardRef } from "react";
+import { Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/Concept/Concept.tsx
+const StyledFigure = styled(Figure, { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "medium"
+} });
+const ContentWrapper = styled("div", { base: {
+	textStyle: "body.large",
+	display: "inline",
+	"& p": { display: "inline" }
+} });
+const Concept = forwardRef(({ copyright, visualElement, lang, children, title, source, previewAlt,...rest }, ref) => {
+	const licenseProps = licenseAttributes(copyright?.license?.license, lang, source);
+	return /* @__PURE__ */ jsxs(StyledFigure, {
+		ref,
+		...rest,
+		...licenseProps,
+		children: [
+			/* @__PURE__ */ jsxs(ContentWrapper, {
+				lang,
+				children: [!!title && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("b", { children: title }), ` – `] }), children]
+			}),
+			visualElement?.resource === "image" ? /* @__PURE__ */ jsx(ImageEmbed_default, {
+				embed: visualElement,
+				lang,
+				previewAlt
+			}) : visualElement?.resource === "brightcove" ? /* @__PURE__ */ jsx(BrightcoveEmbed_default, { embed: visualElement }) : visualElement?.resource === "h5p" ? /* @__PURE__ */ jsx(H5pEmbed_default, { embed: visualElement }) : visualElement?.resource === "iframe" ? /* @__PURE__ */ jsx(IframeEmbed_default, { embed: visualElement }) : visualElement?.resource === "external" ? /* @__PURE__ */ jsx(ExternalEmbed_default, { embed: visualElement }) : null,
+			!!copyright && /* @__PURE__ */ jsx(EmbedByline, {
+				copyright,
+				type: "concept"
+			})
+		]
+	});
+});
+
+//#endregion
+export { Concept };
+//# sourceMappingURL=Concept.js.map

package/es/Concept/Concept.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Concept.js","names":["ImageEmbed","BrightcoveEmbed","H5pEmbed","IframeEmbed","ExternalEmbed"],"sources":["../../src/Concept/Concept.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 ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { IDraftCopyrightDTO as ConceptCopyright } from \"@ndla/types-backend/concept-api\";\nimport type { ConceptVisualElementMeta } from \"@ndla/types-embed\";\nimport { BrightcoveEmbed, ExternalEmbed, H5pEmbed, IframeEmbed, ImageEmbed } from \"../Embed\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\nexport interface ConceptProps extends ComponentPropsWithRef<\"figure\"> {\n  copyright?: ConceptCopyright;\n  visualElement?: ConceptVisualElementMeta;\n  lang?: string;\n  title?: string;\n  children?: ReactNode;\n  source?: string;\n  previewAlt?: boolean;\n}\n\nconst StyledFigure = styled(Figure, {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"medium\",\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    textStyle: \"body.large\",\n    display: \"inline\",\n    \"& p\": {\n      display: \"inline\",\n    },\n  },\n});\n\nexport const Concept = forwardRef<HTMLElement, ConceptProps>(\n  ({ copyright, visualElement, lang, children, title, source, previewAlt, ...rest }, ref) => {\n    const licenseProps = licenseAttributes(copyright?.license?.license, lang, source);\n\n    return (\n      <StyledFigure ref={ref} {...rest} {...licenseProps}>\n        <ContentWrapper lang={lang}>\n          {!!title && (\n            <>\n              <b>{title}</b>\n              {` – `}\n            </>\n          )}\n          {children}\n        </ContentWrapper>\n        {visualElement?.resource === \"image\" ? (\n          <ImageEmbed embed={visualElement} lang={lang} previewAlt={previewAlt} />\n        ) : visualElement?.resource === \"brightcove\" ? (\n          <BrightcoveEmbed embed={visualElement} />\n        ) : visualElement?.resource === \"h5p\" ? (\n          <H5pEmbed embed={visualElement} />\n        ) : visualElement?.resource === \"iframe\" ? (\n          <IframeEmbed embed={visualElement} />\n        ) : visualElement?.resource === \"external\" ? (\n          <ExternalEmbed embed={visualElement} />\n        ) : null}\n        {!!copyright && <EmbedByline copyright={copyright} type=\"concept\" />}\n      </StyledFigure>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;AA2BA,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;AACN,EACF,EAAC;AAEF,MAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CACJ,WAAW;CACX,SAAS;CACT,OAAO,EACL,SAAS,SACV;AACF,EACF,EAAC;AAEF,MAAa,UAAU,WACrB,CAAC,EAAE,WAAW,eAAe,MAAM,UAAU,OAAO,QAAQ,WAAY,GAAG,MAAM,EAAE,QAAQ;CACzF,MAAM,eAAe,kBAAkB,WAAW,SAAS,SAAS,MAAM,OAAO;AAEjF,wBACE,KAAC;EAAkB;EAAK,GAAI;EAAM,GAAI;;mBACpC,KAAC;IAAqB;iBACjB,yBACD,8CACE,IAAC,iBAAG,QAAU,GACZ,QACD,EAEJ;KACc;GAChB,eAAe,aAAa,0BAC3B,IAACA;IAAW,OAAO;IAAqB;IAAkB;KAAc,GACtE,eAAe,aAAa,+BAC9B,IAACC,2BAAgB,OAAO,gBAAiB,GACvC,eAAe,aAAa,wBAC9B,IAACC,oBAAS,OAAO,gBAAiB,GAChC,eAAe,aAAa,2BAC9B,IAACC,uBAAY,OAAO,gBAAiB,GACnC,eAAe,aAAa,6BAC9B,IAACC,yBAAc,OAAO,gBAAiB,GACrC;KACD,6BAAa,IAAC;IAAuB;IAAW,MAAK;KAAY;;GACvD;AAElB,EACF"}

package/es/ContactBlock/ContactBlock.js

@@ -0,0 +1,145 @@
+import { LicenseContainerContent } from "../LicenseByline/EmbedByline.js";
+import { Text } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { useTranslation } from "react-i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ContactBlock/ContactBlock.tsx
+const BackgroundVariant = {
+	strong: { _before: { backgroundColor: "surface.brand.3" } },
+	moderate: { _before: { backgroundColor: "surface.brand.3.moderate" } },
+	subtle: { _before: { backgroundColor: "surface.brand.3.subtle" } }
+};
+const contactBlockBackgrounds = Object.keys(BackgroundVariant);
+const StyledWrapper = styled("div", { base: {
+	display: "flex",
+	minWidth: "surface.xxsmall",
+	padding: "medium",
+	alignItems: "center",
+	justifyContent: "space-between",
+	boxShadow: "full",
+	border: "1px solid",
+	gap: "medium",
+	position: "relative",
+	borderColor: "stroke.default",
+	borderRadius: "xsmall",
+	overflow: "hidden",
+	background: "surface.default",
+	flexDirection: "column-reverse",
+	tablet: {
+		alignItems: "unset",
+		flexDirection: "row"
+	}
+} });
+const EmailLink = styled("a", { base: {
+	color: "text.default",
+	textDecoration: "underline",
+	_hover: { textDecoration: "none" },
+	_focusVisible: { textDecoration: "none" }
+} });
+const HeaderWrapper = styled("div", {
+	base: {
+		position: "relative",
+		display: "flex",
+		flexDirection: "column",
+		gap: "3xsmall",
+		zIndex: "base",
+		_before: {
+			content: "\"\"",
+			position: "absolute",
+			top: "-60px",
+			left: "-50px",
+			right: "0",
+			bottom: "0",
+			height: "calc(100% + 50px)",
+			width: "surface.3xlarge",
+			transform: "rotate(-4deg)",
+			zIndex: "hide"
+		}
+	},
+	variants: {
+		variant: BackgroundVariant,
+		imageExists: { true: { tabletDown: { _before: { display: "none" } } } }
+	}
+});
+const ImageWrapper = styled("div", {
+	base: {
+		display: "flex",
+		gap: "xxsmall",
+		alignItems: "flex-start",
+		justifyContent: "flex-start",
+		flexDirection: "column",
+		zIndex: "base",
+		tabletDown: { _before: {
+			content: "\"\"",
+			position: "absolute",
+			top: "-50px",
+			left: "-50px",
+			right: "0",
+			bottom: "0",
+			height: "surface.xxsmall",
+			width: "surface.3xlarge",
+			transform: "rotate(-4deg)",
+			zIndex: "hide"
+		} }
+	},
+	variants: { variant: BackgroundVariant }
+});
+const StyledImage = styled("img", { base: {
+	borderRadius: "xsmall",
+	width: "surface.xsmall",
+	height: "surface.xsmall",
+	objectFit: "cover"
+} });
+const ContentWrapper = styled("div", { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "medium",
+	flex: "1",
+	width: "100%"
+} });
+const StyledDescription = styled(Text, { base: { fontFamily: "serif" } });
+const ContactBlock = ({ image, jobTitle, description, name, email, embedAlt, lang, backgroundColor = "strong" }) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsxs(StyledWrapper, {
+		"data-embed-type": "contact-block",
+		children: [/* @__PURE__ */ jsxs(ContentWrapper, { children: [/* @__PURE__ */ jsxs(HeaderWrapper, {
+			variant: backgroundColor,
+			imageExists: !!image,
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					lang,
+					fontWeight: "bold",
+					textStyle: "heading.small",
+					children: name
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					lang,
+					children: jobTitle
+				}),
+				/* @__PURE__ */ jsxs(Text, { children: [`${t("email")}: `, /* @__PURE__ */ jsx(EmailLink, {
+					href: `mailto:${email}`,
+					children: email
+				})] })
+			]
+		}), /* @__PURE__ */ jsx(StyledDescription, {
+			textStyle: "body.large",
+			children: description
+		})] }), !!image && /* @__PURE__ */ jsxs(ImageWrapper, {
+			variant: backgroundColor,
+			children: [/* @__PURE__ */ jsx(StyledImage, {
+				alt: embedAlt !== void 0 ? embedAlt : image.alttext.alttext,
+				src: image.image.imageUrl,
+				width: 300,
+				height: 300
+			}), /* @__PURE__ */ jsx(LicenseContainerContent, {
+				type: "image",
+				copyright: image.copyright
+			})]
+		})]
+	});
+};
+
+//#endregion
+export { ContactBlock, contactBlockBackgrounds };
+//# sourceMappingURL=ContactBlock.js.map

package/es/ContactBlock/ContactBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContactBlock.js","names":["BackgroundVariant: Record<ContactBlockBackground, SystemStyleObject>"],"sources":["../../src/ContactBlock/ContactBlock.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 { useTranslation } from \"react-i18next\";\nimport { Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { SystemStyleObject } from \"@ndla/styled-system/types\";\nimport type { IImageMetaInformationV3DTO } from \"@ndla/types-backend/image-api\";\nimport { LicenseContainerContent } from \"../LicenseByline/EmbedByline\";\n\nexport type ContactBlockBackground = \"strong\" | \"moderate\" | \"subtle\";\n\nconst BackgroundVariant: Record<ContactBlockBackground, SystemStyleObject> = {\n  strong: { _before: { backgroundColor: \"surface.brand.3\" } },\n  moderate: { _before: { backgroundColor: \"surface.brand.3.moderate\" } },\n  subtle: { _before: { backgroundColor: \"surface.brand.3.subtle\" } },\n};\n\nexport const contactBlockBackgrounds = Object.keys(BackgroundVariant) as ContactBlockBackground[];\n\nconst StyledWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    minWidth: \"surface.xxsmall\",\n    padding: \"medium\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    boxShadow: \"full\",\n    border: \"1px solid\",\n    gap: \"medium\",\n    position: \"relative\",\n    borderColor: \"stroke.default\",\n    borderRadius: \"xsmall\",\n    overflow: \"hidden\",\n    background: \"surface.default\",\n    flexDirection: \"column-reverse\",\n    tablet: {\n      alignItems: \"unset\",\n      flexDirection: \"row\",\n    },\n  },\n});\n\nconst EmailLink = styled(\"a\", {\n  base: {\n    color: \"text.default\",\n    textDecoration: \"underline\",\n    _hover: { textDecoration: \"none\" },\n    _focusVisible: { textDecoration: \"none\" },\n  },\n});\n\nconst HeaderWrapper = styled(\"div\", {\n  base: {\n    position: \"relative\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"3xsmall\",\n    zIndex: \"base\",\n    _before: {\n      content: '\"\"',\n      position: \"absolute\",\n      top: \"-60px\",\n      left: \"-50px\",\n      right: \"0\",\n      bottom: \"0\",\n      height: \"calc(100% + 50px)\",\n      width: \"surface.3xlarge\",\n      transform: \"rotate(-4deg)\",\n      zIndex: \"hide\",\n    },\n  },\n  variants: {\n    variant: BackgroundVariant,\n    imageExists: {\n      true: {\n        tabletDown: {\n          _before: {\n            display: \"none\",\n          },\n        },\n      },\n    },\n  },\n});\n\nconst ImageWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    gap: \"xxsmall\",\n    alignItems: \"flex-start\",\n    justifyContent: \"flex-start\",\n    flexDirection: \"column\",\n    zIndex: \"base\",\n    tabletDown: {\n      _before: {\n        content: '\"\"',\n        position: \"absolute\",\n        top: \"-50px\",\n        left: \"-50px\",\n        right: \"0\",\n        bottom: \"0\",\n        height: \"surface.xxsmall\",\n        width: \"surface.3xlarge\",\n        transform: \"rotate(-4deg)\",\n        zIndex: \"hide\",\n      },\n    },\n  },\n  variants: {\n    variant: BackgroundVariant,\n  },\n});\n\nconst StyledImage = styled(\"img\", {\n  base: {\n    borderRadius: \"xsmall\",\n    width: \"surface.xsmall\",\n    height: \"surface.xsmall\",\n    objectFit: \"cover\",\n  },\n});\n\nconst ContentWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"medium\",\n    flex: \"1\",\n    width: \"100%\",\n  },\n});\n\nconst StyledDescription = styled(Text, {\n  base: {\n    fontFamily: \"serif\",\n  },\n});\n\ninterface Props {\n  image?: IImageMetaInformationV3DTO;\n  jobTitle: string;\n  description: string;\n  backgroundColor?: ContactBlockBackground;\n  imageWidth?: number;\n  name: string;\n  email: string;\n  embedAlt?: string;\n  lang?: string;\n}\n\nexport const ContactBlock = ({\n  image,\n  jobTitle,\n  description,\n  name,\n  email,\n  embedAlt,\n  lang,\n  backgroundColor = \"strong\",\n}: Props) => {\n  const { t } = useTranslation();\n  return (\n    <StyledWrapper data-embed-type=\"contact-block\">\n      <ContentWrapper>\n        <HeaderWrapper variant={backgroundColor} imageExists={!!image}>\n          <Text lang={lang} fontWeight=\"bold\" textStyle=\"heading.small\">\n            {name}\n          </Text>\n          <Text lang={lang}>{jobTitle}</Text>\n          <Text>\n            {`${t(\"email\")}: `}\n            <EmailLink href={`mailto:${email}`}>{email}</EmailLink>\n          </Text>\n        </HeaderWrapper>\n        <StyledDescription textStyle=\"body.large\">{description}</StyledDescription>\n      </ContentWrapper>\n      {!!image && (\n        <ImageWrapper variant={backgroundColor}>\n          <StyledImage\n            alt={embedAlt !== undefined ? embedAlt : image.alttext.alttext}\n            src={image.image.imageUrl}\n            width={300}\n            height={300}\n          />\n          <LicenseContainerContent type=\"image\" copyright={image.copyright} />\n        </ImageWrapper>\n      )}\n    </StyledWrapper>\n  );\n};\n"],"mappings":";;;;;;;AAiBA,MAAMA,oBAAuE;CAC3E,QAAQ,EAAE,SAAS,EAAE,iBAAiB,kBAAmB,EAAE;CAC3D,UAAU,EAAE,SAAS,EAAE,iBAAiB,2BAA4B,EAAE;CACtE,QAAQ,EAAE,SAAS,EAAE,iBAAiB,yBAA0B,EAAE;AACnE;AAED,MAAa,0BAA0B,OAAO,KAAK,kBAAkB;AAErE,MAAM,gBAAgB,OAAO,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,UAAU;CACV,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,WAAW;CACX,QAAQ;CACR,KAAK;CACL,UAAU;CACV,aAAa;CACb,cAAc;CACd,UAAU;CACV,YAAY;CACZ,eAAe;CACf,QAAQ;EACN,YAAY;EACZ,eAAe;CAChB;AACF,EACF,EAAC;AAEF,MAAM,YAAY,OAAO,KAAK,EAC5B,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,QAAQ,EAAE,gBAAgB,OAAQ;CAClC,eAAe,EAAE,gBAAgB,OAAQ;AAC1C,EACF,EAAC;AAEF,MAAM,gBAAgB,OAAO,OAAO;CAClC,MAAM;EACJ,UAAU;EACV,SAAS;EACT,eAAe;EACf,KAAK;EACL,QAAQ;EACR,SAAS;GACP,SAAS;GACT,UAAU;GACV,KAAK;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,OAAO;GACP,WAAW;GACX,QAAQ;EACT;CACF;CACD,UAAU;EACR,SAAS;EACT,aAAa,EACX,MAAM,EACJ,YAAY,EACV,SAAS,EACP,SAAS,OACV,EACF,EACF,EACF;CACF;AACF,EAAC;AAEF,MAAM,eAAe,OAAO,OAAO;CACjC,MAAM;EACJ,SAAS;EACT,KAAK;EACL,YAAY;EACZ,gBAAgB;EAChB,eAAe;EACf,QAAQ;EACR,YAAY,EACV,SAAS;GACP,SAAS;GACT,UAAU;GACV,KAAK;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,OAAO;GACP,WAAW;GACX,QAAQ;EACT,EACF;CACF;CACD,UAAU,EACR,SAAS,kBACV;AACF,EAAC;AAEF,MAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ,cAAc;CACd,OAAO;CACP,QAAQ;CACR,WAAW;AACZ,EACF,EAAC;AAEF,MAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,MAAM;CACN,OAAO;AACR,EACF,EAAC;AAEF,MAAM,oBAAoB,OAAO,MAAM,EACrC,MAAM,EACJ,YAAY,QACb,EACF,EAAC;AAcF,MAAa,eAAe,CAAC,EAC3B,OACA,UACA,aACA,MACA,OACA,UACA,MACA,kBAAkB,UACZ,KAAK;CACX,MAAM,EAAE,GAAG,GAAG,gBAAgB;AAC9B,wBACE,KAAC;EAAc,mBAAgB;6BAC7B,KAAC,6CACC,KAAC;GAAc,SAAS;GAAiB,eAAe;;oBACtD,IAAC;KAAW;KAAM,YAAW;KAAO,WAAU;eAC3C;MACI;oBACP,IAAC;KAAW;eAAO;MAAgB;oBACnC,KAAC,oBACG,EAAE,EAAE,QAAQ,CAAC,qBACf,IAAC;KAAU,OAAO,SAAS,MAAM;eAAI;MAAkB,IAClD;;IACO,kBAChB,IAAC;GAAkB,WAAU;aAAc;IAAgC,IAC5D,IACd,yBACD,KAAC;GAAa,SAAS;8BACrB,IAAC;IACC,KAAK,sBAAyB,WAAW,MAAM,QAAQ;IACvD,KAAK,MAAM,MAAM;IACjB,OAAO;IACP,QAAQ;KACR,kBACF,IAAC;IAAwB,MAAK;IAAQ,WAAW,MAAM;KAAa;IACvD;GAEH;AAEnB"}

package/es/ContentTypeBadge/ContentTypeBadge.js

@@ -0,0 +1,41 @@
+import { ASSESSMENT_RESOURCES, AUDIO, CONCEPT, EXTERNAL, FRONTPAGE_ARTICLE, GLOSS, IMAGE, LEARNING_PATH, MISSING, MULTIDISCIPLINARY, PODCAST, PODCAST_SERIES, PROGRAMME, SOURCE_MATERIAL, SUBJECT, SUBJECT_MATERIAL, TASKS_AND_ACTIVITIES, TOPIC, VIDEO } from "../model/ContentType.js";
+import { forwardRef } from "react";
+import { Badge } from "@ndla/primitives";
+import { useTranslation } from "react-i18next";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/ContentTypeBadge/ContentTypeBadge.tsx
+const contentTypeToBadgeVariantMap = {
+	[SUBJECT_MATERIAL]: "brand1",
+	[TASKS_AND_ACTIVITIES]: "brand2",
+	[ASSESSMENT_RESOURCES]: "brand2",
+	[SUBJECT]: "neutral",
+	[SOURCE_MATERIAL]: "brand1",
+	[LEARNING_PATH]: "brand3",
+	[TOPIC]: "neutral",
+	[MULTIDISCIPLINARY]: "neutral",
+	[CONCEPT]: "brand1",
+	[EXTERNAL]: "brand2",
+	[IMAGE]: "brand1",
+	[AUDIO]: "brand1",
+	[PODCAST]: "brand1",
+	[VIDEO]: "brand1",
+	[MISSING]: "neutral",
+	[PODCAST_SERIES]: "brand1",
+	[GLOSS]: "brand1",
+	[PROGRAMME]: "neutral",
+	[FRONTPAGE_ARTICLE]: "brand2"
+};
+const ContentTypeBadge = forwardRef(({ contentType, children,...props }, ref) => {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsx(Badge, {
+		colorTheme: contentTypeToBadgeVariantMap[contentType ?? "missing"] ?? contentTypeToBadgeVariantMap["missing"],
+		...props,
+		ref,
+		children: children ?? t(`contentTypes.${contentType}`)
+	});
+});
+
+//#endregion
+export { ContentTypeBadge, contentTypeToBadgeVariantMap };
+//# sourceMappingURL=ContentTypeBadge.js.map

package/es/ContentTypeBadge/ContentTypeBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentTypeBadge.js","names":["contentTypeToBadgeVariantMap: Record<ContentType, BadgeVariant>"],"sources":["../../src/ContentTypeBadge/ContentTypeBadge.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 { forwardRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Badge, type BadgeProps, type BadgeVariant } from \"@ndla/primitives\";\nimport * as contentTypes from \"../model/ContentType\";\n\nexport interface ContentTypeBadgeProps extends Omit<BadgeProps, \"colorTheme\"> {\n  contentType: ContentType | undefined;\n}\n\nexport type StrictContentType =\n  | typeof contentTypes.SUBJECT_MATERIAL\n  | typeof contentTypes.TASKS_AND_ACTIVITIES\n  | typeof contentTypes.ASSESSMENT_RESOURCES\n  | typeof contentTypes.SUBJECT\n  | typeof contentTypes.SOURCE_MATERIAL\n  | typeof contentTypes.LEARNING_PATH\n  | typeof contentTypes.TOPIC\n  | typeof contentTypes.MULTIDISCIPLINARY\n  | typeof contentTypes.CONCEPT\n  | typeof contentTypes.EXTERNAL\n  | typeof contentTypes.IMAGE\n  | typeof contentTypes.AUDIO\n  | typeof contentTypes.VIDEO\n  | typeof contentTypes.MISSING\n  | typeof contentTypes.PODCAST\n  | typeof contentTypes.GLOSS\n  | typeof contentTypes.PROGRAMME\n  | typeof contentTypes.PODCAST_SERIES\n  | typeof contentTypes.FRONTPAGE_ARTICLE;\n\nexport type ContentType =\n  | StrictContentType\n  // This allows for us to fallback to string without getting a ts error, while still keeping intellisense\n  | (string & {});\n\nexport const contentTypeToBadgeVariantMap: Record<ContentType, BadgeVariant> = {\n  [contentTypes.SUBJECT_MATERIAL]: \"brand1\",\n  [contentTypes.TASKS_AND_ACTIVITIES]: \"brand2\",\n  [contentTypes.ASSESSMENT_RESOURCES]: \"brand2\",\n  [contentTypes.SUBJECT]: \"neutral\",\n  [contentTypes.SOURCE_MATERIAL]: \"brand1\",\n  [contentTypes.LEARNING_PATH]: \"brand3\",\n  [contentTypes.TOPIC]: \"neutral\",\n  [contentTypes.MULTIDISCIPLINARY]: \"neutral\",\n  [contentTypes.CONCEPT]: \"brand1\",\n  [contentTypes.EXTERNAL]: \"brand2\",\n  [contentTypes.IMAGE]: \"brand1\",\n  [contentTypes.AUDIO]: \"brand1\",\n  [contentTypes.PODCAST]: \"brand1\",\n  [contentTypes.VIDEO]: \"brand1\",\n  [contentTypes.MISSING]: \"neutral\",\n  [contentTypes.PODCAST_SERIES]: \"brand1\",\n  [contentTypes.GLOSS]: \"brand1\",\n  [contentTypes.PROGRAMME]: \"neutral\",\n  [contentTypes.FRONTPAGE_ARTICLE]: \"brand2\",\n};\n\nexport const ContentTypeBadge = forwardRef<HTMLDivElement, ContentTypeBadgeProps>(\n  ({ contentType, children, ...props }, ref) => {\n    const { t } = useTranslation();\n    return (\n      <Badge\n        colorTheme={contentTypeToBadgeVariantMap[contentType ?? \"missing\"] ?? contentTypeToBadgeVariantMap[\"missing\"]}\n        {...props}\n        ref={ref}\n      >\n        {children ?? t(`contentTypes.${contentType}`)}\n      </Badge>\n    );\n  },\n);\n"],"mappings":";;;;;;;AA2CA,MAAaA,+BAAkE;qBAC5C;yBACI;yBACA;YACb;oBACQ;kBACF;UACR;sBACY;YACV;aACC;UACH;UACA;YACE;UACF;YACE;mBACO;UACT;cACI;sBACQ;AACnC;AAED,MAAa,mBAAmB,WAC9B,CAAC,EAAE,aAAa,SAAU,GAAG,OAAO,EAAE,QAAQ;CAC5C,MAAM,EAAE,GAAG,GAAG,gBAAgB;AAC9B,wBACE,IAAC;EACC,YAAY,6BAA6B,eAAe,cAAc,6BAA6B;EACnG,GAAI;EACC;YAEJ,YAAY,GAAG,eAAe,YAAY,EAAE;GACvC;AAEX,EACF"}

package/es/ContentTypeBlockQuote/ContentTypeBlockQuote.js

@@ -0,0 +1,25 @@
+import { forwardRef } from "react";
+import { BlockQuote } from "@ndla/primitives";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/ContentTypeBlockQuote/ContentTypeBlockQuote.tsx
+const contentTypeToVariantMapping = {
+	"subject-material": "brand1",
+	"source-material": "brand1",
+	concept: "brand1",
+	"tasks-and-activities": "brand2",
+	"assessment-resources": "brand2"
+};
+const ContentTypeBlockQuote = forwardRef(({ variant, contentType,...props }, ref) => {
+	const color = contentType ? contentTypeToVariantMapping[contentType] ?? "brand1" : "brand1";
+	const variantColor = variant === "colored" ? color : void 0;
+	return /* @__PURE__ */ jsx(BlockQuote, {
+		...props,
+		variant: variantColor,
+		ref
+	});
+});
+
+//#endregion
+export { ContentTypeBlockQuote };
+//# sourceMappingURL=ContentTypeBlockQuote.js.map

package/es/ContentTypeBlockQuote/ContentTypeBlockQuote.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentTypeBlockQuote.js","names":[],"sources":["../../src/ContentTypeBlockQuote/ContentTypeBlockQuote.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 { forwardRef } from \"react\";\nimport { BlockQuote, type BlockQuoteProps, type BlockQuoteVariantProps } from \"@ndla/primitives\";\nimport type { ContentType } from \"../ContentTypeBadge/ContentTypeBadge\";\n\nexport type ContentTypeBlockQuoteVariant = \"colored\" | \"neutral\";\n\nconst contentTypeToVariantMapping = {\n  \"subject-material\": \"brand1\",\n  \"source-material\": \"brand1\",\n  concept: \"brand1\",\n  \"tasks-and-activities\": \"brand2\",\n  \"assessment-resources\": \"brand2\",\n} as Record<ContentType, NonNullable<BlockQuoteVariantProps>[\"variant\"]>;\n\ninterface Props extends Omit<BlockQuoteProps, \"variant\"> {\n  variant?: ContentTypeBlockQuoteVariant;\n  contentType?: ContentType;\n}\n\nexport const ContentTypeBlockQuote = forwardRef<HTMLQuoteElement, Props>(({ variant, contentType, ...props }, ref) => {\n  const color = contentType ? (contentTypeToVariantMapping[contentType] ?? \"brand1\") : \"brand1\";\n  const variantColor = variant === \"colored\" ? color : undefined;\n  return <BlockQuote {...props} variant={variantColor} ref={ref} />;\n});\n"],"mappings":";;;;;AAcA,MAAM,8BAA8B;CAClC,oBAAoB;CACpB,mBAAmB;CACnB,SAAS;CACT,wBAAwB;CACxB,wBAAwB;AACzB;AAOD,MAAa,wBAAwB,WAAoC,CAAC,EAAE,SAAS,YAAa,GAAG,OAAO,EAAE,QAAQ;CACpH,MAAM,QAAQ,cAAe,4BAA4B,gBAAgB,WAAY;CACrF,MAAM,eAAe,YAAY,YAAY;AAC7C,wBAAO,IAAC;EAAW,GAAI;EAAO,SAAS;EAAmB;GAAO;AAClE,EAAC"}

package/es/ContentTypeFramedContent/ContentTypeFramedContent.js

@@ -0,0 +1,25 @@
+import { forwardRef } from "react";
+import { FramedContent } from "@ndla/primitives";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/ContentTypeFramedContent/ContentTypeFramedContent.tsx
+const contentTypeToVariantMapping = {
+	"subject-material": "brand1",
+	"source-material": "brand1",
+	concept: "brand1",
+	"tasks-and-activities": "brand2",
+	"assessment-resources": "brand2"
+};
+const ContentTypeFramedContent = forwardRef(({ variant = "neutral", contentType,...props }, ref) => {
+	const color = contentType ? contentTypeToVariantMapping[contentType] ?? "brand1" : "brand1";
+	const variantColor = variant === "colored" ? color : void 0;
+	return /* @__PURE__ */ jsx(FramedContent, {
+		...props,
+		colorTheme: variantColor,
+		ref
+	});
+});
+
+//#endregion
+export { ContentTypeFramedContent };
+//# sourceMappingURL=ContentTypeFramedContent.js.map

package/es/ContentTypeFramedContent/ContentTypeFramedContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentTypeFramedContent.js","names":[],"sources":["../../src/ContentTypeFramedContent/ContentTypeFramedContent.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 { forwardRef } from \"react\";\nimport { FramedContent, type FramedContentProps, type FramedContentVariantProps } from \"@ndla/primitives\";\nimport type { ContentType } from \"..\";\n\nconst contentTypeToVariantMapping = {\n  \"subject-material\": \"brand1\",\n  \"source-material\": \"brand1\",\n  concept: \"brand1\",\n  \"tasks-and-activities\": \"brand2\",\n  \"assessment-resources\": \"brand2\",\n} as Record<ContentType, NonNullable<FramedContentVariantProps>[\"colorTheme\"]>;\n\nexport type ContentTypeFramedContentVariant = \"colored\" | \"neutral\";\n\ninterface Props extends FramedContentProps {\n  variant?: ContentTypeFramedContentVariant;\n  contentType?: ContentType;\n}\n\nexport const ContentTypeFramedContent = forwardRef<HTMLDivElement, Props>(\n  ({ variant = \"neutral\", contentType, ...props }, ref) => {\n    const color = contentType ? (contentTypeToVariantMapping[contentType] ?? \"brand1\") : \"brand1\";\n    const variantColor = variant === \"colored\" ? color : undefined;\n    return <FramedContent {...props} colorTheme={variantColor} ref={ref} />;\n  },\n);\n"],"mappings":";;;;;AAYA,MAAM,8BAA8B;CAClC,oBAAoB;CACpB,mBAAmB;CACnB,SAAS;CACT,wBAAwB;CACxB,wBAAwB;AACzB;AASD,MAAa,2BAA2B,WACtC,CAAC,EAAE,UAAU,WAAW,YAAa,GAAG,OAAO,EAAE,QAAQ;CACvD,MAAM,QAAQ,cAAe,4BAA4B,gBAAgB,WAAY;CACrF,MAAM,eAAe,YAAY,YAAY;AAC7C,wBAAO,IAAC;EAAc,GAAI;EAAO,YAAY;EAAmB;GAAO;AACxE,EACF"}

package/es/ContentTypeHero/ContentTypeHero.js

@@ -0,0 +1,39 @@
+import { ASSESSMENT_RESOURCES, AUDIO, CONCEPT, EXTERNAL, FRONTPAGE_ARTICLE, GLOSS, IMAGE, LEARNING_PATH, MISSING, MULTIDISCIPLINARY, PODCAST, PODCAST_SERIES, PROGRAMME, SOURCE_MATERIAL, SUBJECT, SUBJECT_MATERIAL, TASKS_AND_ACTIVITIES, TOPIC, VIDEO } from "../model/ContentType.js";
+import { forwardRef } from "react";
+import { Hero } from "@ndla/primitives";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/ContentTypeHero/ContentTypeHero.tsx
+const contentTypeToHeroMap = {
+	[SUBJECT_MATERIAL]: "primary",
+	[TASKS_AND_ACTIVITIES]: "brand2Bold",
+	[ASSESSMENT_RESOURCES]: "brand2",
+	[SUBJECT]: "primary",
+	[SOURCE_MATERIAL]: "brand1",
+	[LEARNING_PATH]: "primary",
+	[TOPIC]: "neutral",
+	[MULTIDISCIPLINARY]: "primary",
+	[CONCEPT]: "brand1Moderate",
+	[EXTERNAL]: "primary",
+	[IMAGE]: "primary",
+	[AUDIO]: "primary",
+	[PODCAST]: "primary",
+	[VIDEO]: "primary",
+	[MISSING]: "neutral",
+	[GLOSS]: "brand1Moderate",
+	[PROGRAMME]: "primary",
+	[PODCAST_SERIES]: "primary",
+	[FRONTPAGE_ARTICLE]: "primary"
+};
+const ContentTypeHero = forwardRef(({ contentType, children,...props }, ref) => {
+	return /* @__PURE__ */ jsx(Hero, {
+		variant: contentTypeToHeroMap[contentType ?? "missing"] ?? contentTypeToHeroMap["missing"],
+		...props,
+		ref,
+		children
+	});
+});
+
+//#endregion
+export { ContentTypeHero };
+//# sourceMappingURL=ContentTypeHero.js.map

package/es/ContentTypeHero/ContentTypeHero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentTypeHero.js","names":["contentTypeToHeroMap: Record<ContentType, HeroVariant>"],"sources":["../../src/ContentTypeHero/ContentTypeHero.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 { forwardRef } from \"react\";\nimport { Hero, type HeroProps, type HeroVariant } from \"@ndla/primitives\";\nimport type { ContentType } from \"../ContentTypeBadge/ContentTypeBadge\";\nimport * as contentTypes from \"../model/ContentType\";\n\nexport const contentTypeToHeroMap: Record<ContentType, HeroVariant> = {\n  [contentTypes.SUBJECT_MATERIAL]: \"primary\",\n  [contentTypes.TASKS_AND_ACTIVITIES]: \"brand2Bold\",\n  [contentTypes.ASSESSMENT_RESOURCES]: \"brand2\",\n  // This will never happen\n  [contentTypes.SUBJECT]: \"primary\",\n  [contentTypes.SOURCE_MATERIAL]: \"brand1\",\n  // This will never happen\n  [contentTypes.LEARNING_PATH]: \"primary\",\n  [contentTypes.TOPIC]: \"neutral\",\n  [contentTypes.MULTIDISCIPLINARY]: \"primary\",\n  [contentTypes.CONCEPT]: \"brand1Moderate\",\n  [contentTypes.EXTERNAL]: \"primary\",\n  [contentTypes.IMAGE]: \"primary\",\n  [contentTypes.AUDIO]: \"primary\",\n  [contentTypes.PODCAST]: \"primary\",\n  [contentTypes.VIDEO]: \"primary\",\n  [contentTypes.MISSING]: \"neutral\",\n  [contentTypes.GLOSS]: \"brand1Moderate\",\n  // this will never happen\n  [contentTypes.PROGRAMME]: \"primary\",\n  // this will never happen\n  [contentTypes.PODCAST_SERIES]: \"primary\",\n  [contentTypes.FRONTPAGE_ARTICLE]: \"primary\",\n};\n\nexport interface ContentTypeHeroProps extends HeroProps {\n  contentType: ContentType | undefined;\n}\n\nexport const ContentTypeHero = forwardRef<HTMLDivElement, ContentTypeHeroProps>(\n  ({ contentType, children, ...props }, ref) => {\n    return (\n      <Hero\n        variant={contentTypeToHeroMap[contentType ?? \"missing\"] ?? contentTypeToHeroMap[\"missing\"]}\n        {...props}\n        ref={ref}\n      >\n        {children}\n      </Hero>\n    );\n  },\n);\n"],"mappings":";;;;;;AAaA,MAAaA,uBAAyD;qBACnC;yBACI;yBACA;YAEb;oBACQ;kBAEF;UACR;sBACY;YACV;aACC;UACH;UACA;YACE;UACF;YACE;UACF;cAEI;mBAEK;sBACG;AACnC;AAMD,MAAa,kBAAkB,WAC7B,CAAC,EAAE,aAAa,SAAU,GAAG,OAAO,EAAE,QAAQ;AAC5C,wBACE,IAAC;EACC,SAAS,qBAAqB,eAAe,cAAc,qBAAqB;EAChF,GAAI;EACC;EAEJ;GACI;AAEV,EACF"}

package/es/CopyParagraphButton/CopyParagraphButton.js

@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { IconButton } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { useTranslation } from "react-i18next";
+import { LinkMedium } from "@ndla/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { copyTextToClipboard } from "@ndla/util";
+
+//#region src/CopyParagraphButton/CopyParagraphButton.tsx
+const ContainerDiv = styled("div", { base: {
+	position: "relative",
+	_hover: { "& [data-copy-button]": {
+		opacity: "1",
+		cursor: "pointer"
+	} }
+} });
+const StyledIconButton = styled(IconButton, { base: {
+	position: "absolute",
+	left: "-xxlarge",
+	top: "-4xsmall",
+	opacity: "0",
+	cursor: "pointer",
+	"&:focus, &:focus-visible, &:active": { opacity: "1" }
+} });
+const CopyParagraphButton = ({ children, copyText, lang }) => {
+	const [hasCopied, setHasCopied] = useState(false);
+	const { t } = useTranslation();
+	const sanitizedTitle = useMemo(() => encodeURIComponent(copyText.replace(/ /g, "-")), [copyText]);
+	useEffect(() => {
+		if (hasCopied) setTimeout(() => setHasCopied(false), 3e3);
+	}, [hasCopied]);
+	const onCopyClick = useCallback(() => {
+		setHasCopied(true);
+		const { location } = window;
+		const newHash = `#${sanitizedTitle}`;
+		const port = location.port ? `:${location.port}` : "";
+		const urlToCopy = `${location.protocol}//${location.hostname}${port}${location.pathname}${location.search}${newHash}`;
+		copyTextToClipboard(urlToCopy);
+	}, [sanitizedTitle]);
+	const tooltip = hasCopied ? t("article.copyPageLinkCopied") : t("article.copyHeaderLink");
+	return /* @__PURE__ */ jsxs(ContainerDiv, {
+		"data-embed-type": "copy-heading",
+		children: [/* @__PURE__ */ jsx(StyledIconButton, {
+			variant: "clear",
+			"data-copy-button": "",
+			onClick: onCopyClick,
+			title: tooltip,
+			"aria-label": `${tooltip}: ${copyText}`,
+			children: /* @__PURE__ */ jsx(LinkMedium, {})
+		}), /* @__PURE__ */ jsx("h2", {
+			id: sanitizedTitle,
+			tabIndex: -1,
+			lang,
+			children
+		})]
+	});
+};
+var CopyParagraphButton_default = CopyParagraphButton;
+
+//#endregion
+export { CopyParagraphButton_default };
+//# sourceMappingURL=CopyParagraphButton.js.map

package/es/CopyParagraphButton/CopyParagraphButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyParagraphButton.js","names":[],"sources":["../../src/CopyParagraphButton/CopyParagraphButton.tsx"],"sourcesContent":["/**\n * Copyright (c) 2021-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 ReactNode, useCallback, useEffect, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { LinkMedium } from \"@ndla/icons\";\nimport { IconButton } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { copyTextToClipboard } from \"@ndla/util\";\n\nconst ContainerDiv = styled(\"div\", {\n  base: {\n    position: \"relative\",\n    _hover: {\n      \"& [data-copy-button]\": {\n        opacity: \"1\",\n        cursor: \"pointer\",\n      },\n    },\n  },\n});\n\nconst StyledIconButton = styled(IconButton, {\n  base: {\n    position: \"absolute\",\n    left: \"-xxlarge\",\n    top: \"-4xsmall\",\n    opacity: \"0\",\n    cursor: \"pointer\",\n    \"&:focus, &:focus-visible, &:active\": {\n      opacity: \"1\",\n    },\n  },\n});\n\ninterface Props {\n  // What to render within the h2\n  children: ReactNode;\n  copyText: string;\n  lang?: string;\n}\nconst CopyParagraphButton = ({ children, copyText, lang }: Props) => {\n  const [hasCopied, setHasCopied] = useState(false);\n  const { t } = useTranslation();\n  const sanitizedTitle = useMemo(() => encodeURIComponent(copyText.replace(/ /g, \"-\")), [copyText]);\n\n  useEffect(() => {\n    if (hasCopied) {\n      setTimeout(() => setHasCopied(false), 3000);\n    }\n  }, [hasCopied]);\n\n  const onCopyClick = useCallback(() => {\n    setHasCopied(true);\n    const { location } = window;\n    const newHash = `#${sanitizedTitle}`;\n    const port = location.port ? `:${location.port}` : \"\";\n    const urlToCopy = `${location.protocol}//${location.hostname}${port}${location.pathname}${location.search}${newHash}`;\n\n    copyTextToClipboard(urlToCopy);\n  }, [sanitizedTitle]);\n\n  const tooltip = hasCopied ? t(\"article.copyPageLinkCopied\") : t(\"article.copyHeaderLink\");\n  return (\n    <ContainerDiv data-embed-type=\"copy-heading\">\n      <StyledIconButton\n        variant=\"clear\"\n        data-copy-button=\"\"\n        onClick={onCopyClick}\n        title={tooltip}\n        aria-label={`${tooltip}: ${copyText}`}\n      >\n        <LinkMedium />\n      </StyledIconButton>\n      <h2 id={sanitizedTitle} tabIndex={-1} lang={lang}>\n        {children}\n      </h2>\n    </ContainerDiv>\n  );\n};\n\nexport default CopyParagraphButton;\n"],"mappings":";;;;;;;;;AAeA,MAAM,eAAe,OAAO,OAAO,EACjC,MAAM;CACJ,UAAU;CACV,QAAQ,EACN,wBAAwB;EACtB,SAAS;EACT,QAAQ;CACT,EACF;AACF,EACF,EAAC;AAEF,MAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM;CACJ,UAAU;CACV,MAAM;CACN,KAAK;CACL,SAAS;CACT,QAAQ;CACR,sCAAsC,EACpC,SAAS,IACV;AACF,EACF,EAAC;AAQF,MAAM,sBAAsB,CAAC,EAAE,UAAU,UAAU,MAAa,KAAK;CACnE,MAAM,CAAC,WAAW,aAAa,GAAG,SAAS,MAAM;CACjD,MAAM,EAAE,GAAG,GAAG,gBAAgB;CAC9B,MAAM,iBAAiB,QAAQ,MAAM,mBAAmB,SAAS,QAAQ,MAAM,IAAI,CAAC,EAAE,CAAC,QAAS,EAAC;AAEjG,WAAU,MAAM;AACd,MAAI,UACF,YAAW,MAAM,aAAa,MAAM,EAAE,IAAK;CAE9C,GAAE,CAAC,SAAU,EAAC;CAEf,MAAM,cAAc,YAAY,MAAM;AACpC,eAAa,KAAK;EAClB,MAAM,EAAE,UAAU,GAAG;EACrB,MAAM,WAAW,GAAG,eAAe;EACnC,MAAM,OAAO,SAAS,QAAQ,GAAG,SAAS,KAAK,IAAI;EACnD,MAAM,aAAa,EAAE,SAAS,SAAS,IAAI,SAAS,SAAS,EAAE,KAAK,EAAE,SAAS,SAAS,EAAE,SAAS,OAAO,EAAE,QAAQ;AAEpH,sBAAoB,UAAU;CAC/B,GAAE,CAAC,cAAe,EAAC;CAEpB,MAAM,UAAU,YAAY,EAAE,6BAA6B,GAAG,EAAE,yBAAyB;AACzF,wBACE,KAAC;EAAa,mBAAgB;6BAC5B,IAAC;GACC,SAAQ;GACR,oBAAiB;GACjB,SAAS;GACT,OAAO;GACP,eAAa,EAAE,QAAQ,IAAI,SAAS;6BAEpC,IAAC,eAAa;IACG,kBACnB,IAAC;GAAG,IAAI;GAAgB,UAAU;GAAU;GACzC;IACE;GACQ;AAElB;AAED,kCAAe"}

package/es/CopyParagraphButton/index.js

@@ -0,0 +1,8 @@
+import { CopyParagraphButton_default } from "./CopyParagraphButton.js";
+
+//#region src/CopyParagraphButton/index.tsx
+var CopyParagraphButton_default$1 = CopyParagraphButton_default;
+
+//#endregion
+export { CopyParagraphButton_default$1 as CopyParagraphButton_default };
+//# sourceMappingURL=index.js.map