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

package/es/Article/ArticleByline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleByline.js","names":["contributors: SupplierProps[] | AuthorProps[]","t: TFunction","suppliers: SupplierProps[]","e: HashChangeEvent","authorLabel: Record<string, string>"],"sources":["../../src/Article/ArticleByline.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 { TFunction } from \"i18next\";\nimport { type ReactNode, forwardRef, useCallback, useEffect, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useLocation } from \"react-router-dom\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport {\n  AccordionItem,\n  AccordionItemContent,\n  AccordionItemIndicator,\n  type AccordionItemProps,\n  AccordionItemTrigger,\n  AccordionRoot,\n  Heading,\n} from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { ArticleFootNotes } from \"./ArticleFootNotes\";\nimport type { FootNote } from \"../types\";\n\nconst Wrapper = styled(\"div\", {\n  base: {\n    // TODO: Figure out if we want to remove this margin. It's only here to add some gap between the article content and the byline.\n    marginBlockStart: \"medium\",\n    paddingBlockStart: \"xsmall\",\n    borderTop: \"1px solid\",\n    borderColor: \"stroke.subtle\",\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"3xsmall\",\n    width: \"100%\",\n    justifyContent: \"space-between\",\n    paddingBlock: \"xsmall\",\n    textStyle: \"body.medium\",\n    '& [data-contributors=\"false\"]': {\n      marginInlineStart: \"auto\",\n    },\n  },\n  variants: {\n    learningpath: {\n      true: {},\n      false: {\n        tabletWide: {\n          flexDirection: \"row\",\n        },\n      },\n    },\n  },\n});\n\ntype AuthorProps = {\n  name: string;\n};\n\ntype SupplierProps = {\n  name: string;\n};\n\ntype Props = {\n  authors?: AuthorProps[];\n  suppliers?: SupplierProps[];\n  published?: string;\n  licenseBox?: ReactNode;\n  footnotes?: FootNote[];\n  displayByline?: boolean;\n  bylineType?: \"article\" | \"learningPath\" | \"external\";\n  bylineSuffix?: ReactNode;\n};\n\nconst renderContributors = (contributors: SupplierProps[] | AuthorProps[], t: TFunction) => {\n  const contributorsArray = contributors.map((contributor, index) => {\n    if (index < 1) return contributor.name;\n    const sep = index === contributors.length - 1 ? ` ${t(\"article.conjunction\")} ` : \", \";\n    return `${sep}${contributor.name}`;\n  });\n  return contributorsArray.join(\"\");\n};\n\nconst getSuppliersText = (suppliers: SupplierProps[], t: TFunction) => {\n  if (suppliers.length === 0) {\n    return \"\";\n  }\n  return suppliers.length > 1\n    ? t(\"article.multipleSuppliersLabel\", {\n        names: renderContributors(suppliers, t),\n        interpolation: { escapeValue: false },\n      })\n    : t(\"article.supplierLabel\", {\n        name: renderContributors(suppliers, t),\n        interpolation: { escapeValue: false },\n      });\n};\n\nconst StyledAccordionRoot = styled(AccordionRoot, {\n  base: {\n    paddingBlockStart: \"xxlarge\",\n  },\n});\n\nconst refRegexp = /note\\d/;\nconst footnotesAccordionId = \"footnotes\";\n\nexport const ArticleByline = ({\n  authors = [],\n  suppliers = [],\n  footnotes,\n  licenseBox,\n  published,\n  displayByline = true,\n  bylineType = \"article\",\n  bylineSuffix,\n}: Props) => {\n  const { t } = useTranslation();\n  const { pathname } = useLocation();\n  const [openAccordions, setOpenAccordions] = useState<string[]>([]);\n  const accordionItemValue = \"rulesForUse\";\n\n  const onHashChange = useCallback(\n    (e: HashChangeEvent) => {\n      const hash = e.newURL.split(\"#\")[1];\n      if (hash?.match(refRegexp) && !openAccordions.includes(footnotesAccordionId)) {\n        setOpenAccordions([...openAccordions, footnotesAccordionId]);\n        const el = document.getElementById(`#${hash}`);\n        el?.click();\n        el?.focus();\n      }\n    },\n    [openAccordions],\n  );\n\n  useEffect(() => {\n    setOpenAccordions((prev) => prev.filter((state) => state !== accordionItemValue));\n  }, [pathname]);\n\n  useEffect(() => {\n    window.addEventListener(\"hashchange\", onHashChange);\n    return () => window.removeEventListener(\"hashchange\", onHashChange);\n  }, [onHashChange]);\n\n  const showPrimaryContributors = suppliers.length > 0 || authors.length > 0;\n\n  const authorLabel: Record<string, string> = {\n    article: \"article.authorsLabel\",\n    learningPath: \"article.authorsLabelLearningpath\",\n    external: \"article.authorsLabelExternal\",\n  };\n\n  return (\n    <Wrapper>\n      {!!displayByline && (\n        <TextWrapper learningpath={bylineType === \"learningPath\"}>\n          {!!showPrimaryContributors && (\n            <span>\n              {authors.length > 0 &&\n                `${t(authorLabel[bylineType], {\n                  names: renderContributors(authors, t),\n                  interpolation: { escapeValue: false },\n                })}. `}\n              {getSuppliersText(suppliers, t)}\n            </span>\n          )}\n          {published ? (\n            <div data-contributors={showPrimaryContributors}>\n              {t(`${bylineType}.lastUpdated`)} {published}\n            </div>\n          ) : null}\n          {bylineSuffix}\n        </TextWrapper>\n      )}\n      {(!!licenseBox || !!footnotes?.length) && (\n        <StyledAccordionRoot\n          multiple\n          value={openAccordions}\n          onValueChange={(details) => setOpenAccordions(details.value)}\n        >\n          {!!licenseBox && (\n            <ArticleBylineAccordionItem value={accordionItemValue} accordionTitle={t(\"article.useContent\")}>\n              {licenseBox}\n            </ArticleBylineAccordionItem>\n          )}\n          {!!footnotes?.length && (\n            <ArticleBylineAccordionItem value={footnotesAccordionId} accordionTitle={t(\"article.footnotes\")}>\n              <ArticleFootNotes footNotes={footnotes} />\n            </ArticleBylineAccordionItem>\n          )}\n        </StyledAccordionRoot>\n      )}\n    </Wrapper>\n  );\n};\n\ninterface ArticleBylineAccordionprops extends AccordionItemProps {\n  accordionTitle: ReactNode;\n}\n\nexport const ArticleBylineAccordionItem = forwardRef<HTMLDivElement, ArticleBylineAccordionprops>(\n  ({ value, accordionTitle, children, ...props }, ref) => {\n    return (\n      <AccordionItem value={value} ref={ref} {...props}>\n        <Heading asChild consumeCss textStyle=\"label.medium\" fontWeight=\"bold\">\n          <h2>\n            <AccordionItemTrigger>\n              {accordionTitle}\n              <AccordionItemIndicator asChild>\n                <ArrowDownShortLine />\n              </AccordionItemIndicator>\n            </AccordionItemTrigger>\n          </h2>\n        </Heading>\n        <AccordionItemContent>{children}</AccordionItemContent>\n      </AccordionItem>\n    );\n  },\n);\n"],"mappings":"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"}

package/es/Article/ArticleFootNotes.js

@@ -1,60 +1,40 @@
-/**
- * Copyright (c) 2017-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
 import { Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const citeDetailString = description => description ? `${description}. ` : "";
-const StyledCite = styled("cite", {
-  base: {
-    display: "flex",
-    alignItems: "center",
-    gap: "xsmall"
-  }
-});
-const FootNote = _ref => {
-  let {
-    footNote
-  } = _ref;
-  return /*#__PURE__*/_jsx("li", {
-    children: /*#__PURE__*/_jsx(Text, {
-      id: `note${footNote.ref}`,
-      asChild: true,
-      consumeCss: true,
-      textStyle: "body.medium",
-      children: /*#__PURE__*/_jsxs(StyledCite, {
-        children: [/*#__PURE__*/_jsx("a", {
-          href: `#ref${footNote.ref}`,
-          target: "_self",
-          children: footNote.ref
-        }), `«${footNote.title}». ${footNote.authors.join(" ")}. ${citeDetailString(footNote.edition)}${citeDetailString(footNote.publisher)}${footNote.year}. `, footNote.url ? /*#__PURE__*/_jsxs("a", {
-          href: footNote.url,
-          children: [footNote.url, "."]
-        }) : null]
-      })
-    })
-  });
-};
-const FootnoteList = styled("ol", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "medium",
-    listStyle: "none"
-  }
-});
-export const ArticleFootNotes = _ref2 => {
-  let {
-    footNotes
-  } = _ref2;
-  return /*#__PURE__*/_jsx(FootnoteList, {
-    children: footNotes.map(footNote => /*#__PURE__*/_jsx(FootNote, {
-      footNote: footNote
-    }, footNote.ref))
-  });
-};
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/Article/ArticleFootNotes.tsx
+const citeDetailString = (description) => description ? `${description}. ` : "";
+const StyledCite = styled("cite", { base: {
+	display: "flex",
+	alignItems: "center",
+	gap: "xsmall"
+} });
+const FootNote = ({ footNote }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Text, {
+	id: `note${footNote.ref}`,
+	asChild: true,
+	consumeCss: true,
+	textStyle: "body.medium",
+	children: /* @__PURE__ */ jsxs(StyledCite, { children: [
+		/* @__PURE__ */ jsx("a", {
+			href: `#ref${footNote.ref}`,
+			target: "_self",
+			children: footNote.ref
+		}),
+		`«${footNote.title}». ${footNote.authors.join(" ")}. ${citeDetailString(footNote.edition)}${citeDetailString(footNote.publisher)}${footNote.year}. `,
+		footNote.url ? /* @__PURE__ */ jsxs("a", {
+			href: footNote.url,
+			children: [footNote.url, "."]
+		}) : null
+	] })
+}) });
+const FootnoteList = styled("ol", { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "medium",
+	listStyle: "none"
+} });
+const ArticleFootNotes = ({ footNotes }) => /* @__PURE__ */ jsx(FootnoteList, { children: footNotes.map((footNote) => /* @__PURE__ */ jsx(FootNote, { footNote }, footNote.ref)) });
+
+//#endregion
+export { ArticleFootNotes };
+//# sourceMappingURL=ArticleFootNotes.js.map

package/es/Article/ArticleFootNotes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleFootNotes.js","names":["description: string | undefined"],"sources":["../../src/Article/ArticleFootNotes.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { FootNote as FootNoteType } from \"../types\";\n\nconst citeDetailString = (description: string | undefined) => (description ? `${description}. ` : \"\");\n\ntype FootNoteProps = {\n  footNote: FootNoteType;\n};\n\nconst StyledCite = styled(\"cite\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"xsmall\",\n  },\n});\n\nconst FootNote = ({ footNote }: FootNoteProps) => (\n  <li>\n    <Text id={`note${footNote.ref}`} asChild consumeCss textStyle=\"body.medium\">\n      <StyledCite>\n        <a href={`#ref${footNote.ref}`} target=\"_self\">\n          {footNote.ref}\n        </a>\n        {`«${footNote.title}». ${footNote.authors.join(\" \")}. ${citeDetailString(footNote.edition)}${citeDetailString(\n          footNote.publisher,\n        )}${footNote.year}. `}\n        {footNote.url ? (\n          <a href={footNote.url}>\n            {footNote.url}\n            {\".\"}\n          </a>\n        ) : null}\n      </StyledCite>\n    </Text>\n  </li>\n);\n\ntype ArticleFootNotesProps = {\n  footNotes: Array<FootNoteType>;\n};\n\nconst FootnoteList = styled(\"ol\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"medium\",\n    listStyle: \"none\",\n  },\n});\n\nexport const ArticleFootNotes = ({ footNotes }: ArticleFootNotesProps) => (\n  <FootnoteList>\n    {footNotes.map((footNote) => (\n      <FootNote key={footNote.ref} footNote={footNote} />\n    ))}\n  </FootnoteList>\n);\n"],"mappings":";;;;;AAYA,MAAM,mBAAmB,CAACA,gBAAqC,eAAe,EAAE,YAAY,MAAM;AAMlG,MAAM,aAAa,OAAO,QAAQ,EAChC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,KAAK;AACN,EACF,EAAC;AAEF,MAAM,WAAW,CAAC,EAAE,UAAyB,qBAC3C,IAAC,kCACC,IAAC;CAAK,KAAK,MAAM,SAAS,IAAI;CAAG;CAAQ;CAAW,WAAU;2BAC5D,KAAC;kBACC,IAAC;GAAE,OAAO,MAAM,SAAS,IAAI;GAAG,QAAO;aACpC,SAAS;IACR;GACF,GAAG,SAAS,MAAM,KAAK,SAAS,QAAQ,KAAK,IAAI,CAAC,IAAI,iBAAiB,SAAS,QAAQ,CAAC,EAAE,iBAC3F,SAAS,UACV,CAAC,EAAE,SAAS,KAAK;EACjB,SAAS,sBACR,KAAC;GAAE,MAAM,SAAS;cACf,SAAS,KACT;IACC,GACF;KACO;EACR,GACJ;AAOP,MAAM,eAAe,OAAO,MAAM,EAChC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,WAAW;AACZ,EACF,EAAC;AAEF,MAAa,mBAAmB,CAAC,EAAE,WAAkC,qBACnE,IAAC,0BACE,UAAU,IAAI,CAAC,6BACd,IAAC,YAAsC,YAAxB,SAAS,IAA2B,CACnD,GACW"}

package/es/AudioPlayer/AudioPlayer.js

@@ -1,218 +1,157 @@
-/**
- * Copyright (c) 2017-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
+import { Controls_default } from "./Controls.js";
+import { SpeechControl_default } from "./SpeechControl.js";
 import { useId, useMemo, useState } from "react";
+import { Button, Heading, Text } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { useTranslation } from "react-i18next";
-import { Heading, Text, Button } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
-import { styled } from "@ndla/styled-system/jsx";
-import Controls from "./Controls";
-import SpeechControl from "./SpeechControl";
+import { jsx, jsxs } from "react/jsx-runtime";
 
-// TODO: Could the audio metadata be more tightly coupled to the audio player?
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const AudioPlayerWrapper = styled("div", {
-  base: {
-    border: "1px solid",
-    borderColor: "stroke.default",
-    borderRadius: "xsmall",
-    boxShadow: "full",
-    marginBlockEnd: "4xsmall",
-    overflow: "hidden"
-  }
-});
-const InfoWrapper = styled("div", {
-  base: {
-    display: "flex",
-    tabletWideDown: {
-      display: "block"
-    }
-  }
-});
-const ImageWrapper = styled("div", {
-  base: {
-    display: "flex",
-    alignItems: "center",
-    flex: "1 0 auto",
-    width: "surface.4xsmall",
-    height: "surface.4xsmall",
-    overflow: "hidden",
-    "& img": {
-      width: "100%",
-      height: "100%",
-      objectFit: "cover"
-    },
-    desktop: {
-      width: "260px",
-      height: "260px"
-    },
-    tabletWideDown: {
-      maxHeight: "surface.small",
-      maxWidth: "100%",
-      width: "100%",
-      height: "auto"
-    }
-  }
-});
-const TextWrapper = styled("div", {
-  base: {
-    display: "flex",
-    alignItems: "flex-start",
-    flexDirection: "column",
-    gap: "xsmall",
-    padding: "xsmall",
-    width: "100%",
-    "&[data-has-image='true']": {
-      tablet: {
-        paddingBlock: "xsmall",
-        paddingInline: "medium"
-      }
-    }
-  }
-});
-const TitleWrapper = styled("div", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "xsmall",
-    fontFamily: "sans",
-    tabletWide: {
-      width: "100%",
-      flexDirection: "row",
-      justifyContent: "space-between"
-    }
-  }
-});
-const TextVersionWrapper = styled("div", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "xsmall",
-    borderBlockStart: "1px solid",
-    borderColor: "stroke.default",
-    paddingBlock: "medium",
-    paddingInline: "xsmall",
-    tablet: {
-      paddingInline: "medium"
-    }
-  }
-});
-const TextVersionText = styled("div", {
-  base: {
-    maxWidth: "surface.xlarge",
-    "& span > *": {
-      whiteSpace: "pre-wrap"
-    },
-    "& p:not(:first-child):not(:last-child)": {
-      marginBlock: "small"
-    },
-    '& p[data-align="center"]': {
-      textAlign: "center"
-    },
-    '& p:has(span[dir="rtl"])': {
-      direction: "rtl"
-    }
-  }
-});
-const TextVersionButton = styled(Button, {
-  base: {
-    alignSelf: "flex-start"
-  }
-});
-const ShowMoreButton = styled(Button, {
-  base: {
-    marginInlineStart: "3xsmall"
-  }
-});
+//#region src/AudioPlayer/AudioPlayer.tsx
+const AudioPlayerWrapper = styled("div", { base: {
+	border: "1px solid",
+	borderColor: "stroke.default",
+	borderRadius: "xsmall",
+	boxShadow: "full",
+	marginBlockEnd: "4xsmall",
+	overflow: "hidden"
+} });
+const InfoWrapper = styled("div", { base: {
+	display: "flex",
+	tabletWideDown: { display: "block" }
+} });
+const ImageWrapper = styled("div", { base: {
+	display: "flex",
+	alignItems: "center",
+	flex: "1 0 auto",
+	width: "surface.4xsmall",
+	height: "surface.4xsmall",
+	overflow: "hidden",
+	"& img": {
+		width: "100%",
+		height: "100%",
+		objectFit: "cover"
+	},
+	desktop: {
+		width: "260px",
+		height: "260px"
+	},
+	tabletWideDown: {
+		maxHeight: "surface.small",
+		maxWidth: "100%",
+		width: "100%",
+		height: "auto"
+	}
+} });
+const TextWrapper = styled("div", { base: {
+	display: "flex",
+	alignItems: "flex-start",
+	flexDirection: "column",
+	gap: "xsmall",
+	padding: "xsmall",
+	width: "100%",
+	"&[data-has-image='true']": { tablet: {
+		paddingBlock: "xsmall",
+		paddingInline: "medium"
+	} }
+} });
+const TitleWrapper = styled("div", { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "xsmall",
+	fontFamily: "sans",
+	tabletWide: {
+		width: "100%",
+		flexDirection: "row",
+		justifyContent: "space-between"
+	}
+} });
+const TextVersionWrapper = styled("div", { base: {
+	display: "flex",
+	flexDirection: "column",
+	gap: "xsmall",
+	borderBlockStart: "1px solid",
+	borderColor: "stroke.default",
+	paddingBlock: "medium",
+	paddingInline: "xsmall",
+	tablet: { paddingInline: "medium" }
+} });
+const TextVersionText = styled("div", { base: {
+	maxWidth: "surface.xlarge",
+	"& span > *": { whiteSpace: "pre-wrap" },
+	"& p:not(:first-child):not(:last-child)": { marginBlock: "small" },
+	"& p[data-align=\"center\"]": { textAlign: "center" },
+	"& p:has(span[dir=\"rtl\"])": { direction: "rtl" }
+} });
+const TextVersionButton = styled(Button, { base: { alignSelf: "flex-start" } });
+const ShowMoreButton = styled(Button, { base: { marginInlineStart: "3xsmall" } });
 const DESCRIPTION_MAX_LENGTH = 200;
-const AudioPlayer = _ref => {
-  let {
-    src,
-    title,
-    subtitle,
-    speech,
-    description,
-    img,
-    textVersion
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  const [showTextVersion, setShowTextVersion] = useState(false);
-  const [showFullDescription, setShowFullDescription] = useState(false);
-  const truncatedDescription = useMemo(() => description?.slice(0, DESCRIPTION_MAX_LENGTH), [description]);
-  const textDescriptionId = useId();
-  if (speech) {
-    return /*#__PURE__*/_jsx(SpeechControl, {
-      src: src,
-      title: title
-    });
-  }
-  const toggleTextVersion = () => {
-    setShowTextVersion(curr => !curr);
-  };
-  const textVersionButton = /*#__PURE__*/_jsx(TextVersionButton, {
-    variant: "secondary",
-    "aria-expanded": showTextVersion,
-    "aria-controls": textDescriptionId,
-    size: "small",
-    onClick: toggleTextVersion,
-    children: t(showTextVersion ? "audio.textVersion.close" : "audio.textVersion.heading")
-  });
-  return /*#__PURE__*/_jsxs(AudioPlayerWrapper, {
-    children: [/*#__PURE__*/_jsxs(InfoWrapper, {
-      children: [!!img && /*#__PURE__*/_jsx(ImageWrapper, {
-        children: /*#__PURE__*/_jsx("img", {
-          src: img.url,
-          alt: img.alt
-        })
-      }), /*#__PURE__*/_jsxs(TextWrapper, {
-        "data-has-image": !!img,
-        children: [/*#__PURE__*/_jsxs(TitleWrapper, {
-          children: [/*#__PURE__*/_jsxs("div", {
-            children: [subtitle?.url ? /*#__PURE__*/_jsx(SafeLink, {
-              to: subtitle.url,
-              children: subtitle.title
-            }) : subtitle?.title, /*#__PURE__*/_jsx(Heading, {
-              asChild: true,
-              consumeCss: true,
-              textStyle: "title.large",
-              children: /*#__PURE__*/_jsx("h3", {
-                children: title
-              })
-            })]
-          }), !!textVersion && !img && textVersionButton]
-        }), !!description && /*#__PURE__*/_jsxs(Text, {
-          textStyle: "body.medium",
-          children: [showFullDescription || description.length < DESCRIPTION_MAX_LENGTH ? description : `${truncatedDescription}...`, description.length > DESCRIPTION_MAX_LENGTH && /*#__PURE__*/_jsx(ShowMoreButton, {
-            variant: "link",
-            onClick: () => setShowFullDescription(p => !p),
-            children: t(`audio.${showFullDescription ? "readLessDescriptionLabel" : "readMoreDescriptionLabel"}`)
-          })]
-        }), !!textVersion && !!img && textVersionButton]
-      })]
-    }), /*#__PURE__*/_jsx(Controls, {
-      src: src,
-      title: title
-    }), !!textVersion && /*#__PURE__*/_jsxs(TextVersionWrapper, {
-      id: textDescriptionId,
-      hidden: !showTextVersion,
-      children: [/*#__PURE__*/_jsx(Heading, {
-        asChild: true,
-        textStyle: "title.medium",
-        consumeCss: true,
-        children: /*#__PURE__*/_jsx("h4", {
-          children: t("audio.textVersion.heading")
-        })
-      }), /*#__PURE__*/_jsx(TextVersionText, {
-        children: textVersion
-      })]
-    })]
-  });
+const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersion }) => {
+	const { t } = useTranslation();
+	const [showTextVersion, setShowTextVersion] = useState(false);
+	const [showFullDescription, setShowFullDescription] = useState(false);
+	const truncatedDescription = useMemo(() => description?.slice(0, DESCRIPTION_MAX_LENGTH), [description]);
+	const textDescriptionId = useId();
+	if (speech) return /* @__PURE__ */ jsx(SpeechControl_default, {
+		src,
+		title
+	});
+	const toggleTextVersion = () => {
+		setShowTextVersion((curr) => !curr);
+	};
+	const textVersionButton = /* @__PURE__ */ jsx(TextVersionButton, {
+		variant: "secondary",
+		"aria-expanded": showTextVersion,
+		"aria-controls": textDescriptionId,
+		size: "small",
+		onClick: toggleTextVersion,
+		children: t(showTextVersion ? "audio.textVersion.close" : "audio.textVersion.heading")
+	});
+	return /* @__PURE__ */ jsxs(AudioPlayerWrapper, { children: [
+		/* @__PURE__ */ jsxs(InfoWrapper, { children: [!!img && /* @__PURE__ */ jsx(ImageWrapper, { children: /* @__PURE__ */ jsx("img", {
+			src: img.url,
+			alt: img.alt
+		}) }), /* @__PURE__ */ jsxs(TextWrapper, {
+			"data-has-image": !!img,
+			children: [
+				/* @__PURE__ */ jsxs(TitleWrapper, { children: [/* @__PURE__ */ jsxs("div", { children: [subtitle?.url ? /* @__PURE__ */ jsx(SafeLink, {
+					to: subtitle.url,
+					children: subtitle.title
+				}) : subtitle?.title, /* @__PURE__ */ jsx(Heading, {
+					asChild: true,
+					consumeCss: true,
+					textStyle: "title.large",
+					children: /* @__PURE__ */ jsx("h3", { children: title })
+				})] }), !!textVersion && !img && textVersionButton] }),
+				!!description && /* @__PURE__ */ jsxs(Text, {
+					textStyle: "body.medium",
+					children: [showFullDescription || description.length < DESCRIPTION_MAX_LENGTH ? description : `${truncatedDescription}...`, description.length > DESCRIPTION_MAX_LENGTH && /* @__PURE__ */ jsx(ShowMoreButton, {
+						variant: "link",
+						onClick: () => setShowFullDescription((p) => !p),
+						children: t(`audio.${showFullDescription ? "readLessDescriptionLabel" : "readMoreDescriptionLabel"}`)
+					})]
+				}),
+				!!textVersion && !!img && textVersionButton
+			]
+		})] }),
+		/* @__PURE__ */ jsx(Controls_default, {
+			src,
+			title
+		}),
+		!!textVersion && /* @__PURE__ */ jsxs(TextVersionWrapper, {
+			id: textDescriptionId,
+			hidden: !showTextVersion,
+			children: [/* @__PURE__ */ jsx(Heading, {
+				asChild: true,
+				textStyle: "title.medium",
+				consumeCss: true,
+				children: /* @__PURE__ */ jsx("h4", { children: t("audio.textVersion.heading") })
+			}), /* @__PURE__ */ jsx(TextVersionText, { children: textVersion })]
+		})
+	] });
 };
-export default AudioPlayer;
+var AudioPlayer_default = AudioPlayer;
+
+//#endregion
+export { AudioPlayer_default };
+//# sourceMappingURL=AudioPlayer.js.map

package/es/AudioPlayer/AudioPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioPlayer.js","names":["SpeechControl","Controls"],"sources":["../../src/AudioPlayer/AudioPlayer.tsx"],"sourcesContent":["/**\n * Copyright (c) 2017-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ReactNode, useId, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Heading, Text, Button } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport Controls from \"./Controls\";\nimport SpeechControl from \"./SpeechControl\";\n\n// TODO: Could the audio metadata be more tightly coupled to the audio player?\n\nconst AudioPlayerWrapper = styled(\"div\", {\n  base: {\n    border: \"1px solid\",\n    borderColor: \"stroke.default\",\n    borderRadius: \"xsmall\",\n    boxShadow: \"full\",\n    marginBlockEnd: \"4xsmall\",\n    overflow: \"hidden\",\n  },\n});\n\nconst InfoWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    tabletWideDown: {\n      display: \"block\",\n    },\n  },\n});\n\nconst ImageWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"center\",\n    flex: \"1 0 auto\",\n    width: \"surface.4xsmall\",\n    height: \"surface.4xsmall\",\n    overflow: \"hidden\",\n    \"& img\": {\n      width: \"100%\",\n      height: \"100%\",\n      objectFit: \"cover\",\n    },\n    desktop: {\n      width: \"260px\",\n      height: \"260px\",\n    },\n    tabletWideDown: {\n      maxHeight: \"surface.small\",\n      maxWidth: \"100%\",\n      width: \"100%\",\n      height: \"auto\",\n    },\n  },\n});\n\nconst TextWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    padding: \"xsmall\",\n    width: \"100%\",\n    \"&[data-has-image='true']\": {\n      tablet: {\n        paddingBlock: \"xsmall\",\n        paddingInline: \"medium\",\n      },\n    },\n  },\n});\n\nconst TitleWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    fontFamily: \"sans\",\n    tabletWide: {\n      width: \"100%\",\n      flexDirection: \"row\",\n      justifyContent: \"space-between\",\n    },\n  },\n});\n\nconst TextVersionWrapper = styled(\"div\", {\n  base: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"xsmall\",\n    borderBlockStart: \"1px solid\",\n    borderColor: \"stroke.default\",\n    paddingBlock: \"medium\",\n    paddingInline: \"xsmall\",\n    tablet: {\n      paddingInline: \"medium\",\n    },\n  },\n});\n\nconst TextVersionText = styled(\"div\", {\n  base: {\n    maxWidth: \"surface.xlarge\",\n    \"& span > *\": {\n      whiteSpace: \"pre-wrap\",\n    },\n    \"& p:not(:first-child):not(:last-child)\": {\n      marginBlock: \"small\",\n    },\n    '& p[data-align=\"center\"]': {\n      textAlign: \"center\",\n    },\n    '& p:has(span[dir=\"rtl\"])': {\n      direction: \"rtl\",\n    },\n  },\n});\n\nconst TextVersionButton = styled(Button, {\n  base: {\n    alignSelf: \"flex-start\",\n  },\n});\n\nconst ShowMoreButton = styled(Button, {\n  base: {\n    marginInlineStart: \"3xsmall\",\n  },\n});\n\nconst DESCRIPTION_MAX_LENGTH = 200;\n\ntype Props = {\n  src: string;\n  title: string;\n  subtitle?: {\n    title: string;\n    url?: string;\n  };\n  speech?: boolean;\n  description?: string;\n  textVersion?: ReactNode;\n  img?: {\n    url: string;\n    alt: string;\n  };\n};\n\nconst AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersion }: Props) => {\n  const { t } = useTranslation();\n  const [showTextVersion, setShowTextVersion] = useState(false);\n  const [showFullDescription, setShowFullDescription] = useState(false);\n  const truncatedDescription = useMemo(() => description?.slice(0, DESCRIPTION_MAX_LENGTH), [description]);\n  const textDescriptionId = useId();\n\n  if (speech) {\n    return <SpeechControl src={src} title={title} />;\n  }\n\n  const toggleTextVersion = () => {\n    setShowTextVersion((curr) => !curr);\n  };\n\n  const textVersionButton = (\n    <TextVersionButton\n      variant=\"secondary\"\n      aria-expanded={showTextVersion}\n      aria-controls={textDescriptionId}\n      size=\"small\"\n      onClick={toggleTextVersion}\n    >\n      {t(showTextVersion ? \"audio.textVersion.close\" : \"audio.textVersion.heading\")}\n    </TextVersionButton>\n  );\n\n  return (\n    <AudioPlayerWrapper>\n      <InfoWrapper>\n        {!!img && (\n          <ImageWrapper>\n            <img src={img.url} alt={img.alt} />\n          </ImageWrapper>\n        )}\n        <TextWrapper data-has-image={!!img}>\n          <TitleWrapper>\n            <div>\n              {subtitle?.url ? <SafeLink to={subtitle.url}>{subtitle.title}</SafeLink> : subtitle?.title}\n              <Heading asChild consumeCss textStyle=\"title.large\">\n                <h3>{title}</h3>\n              </Heading>\n            </div>\n            {!!textVersion && !img && textVersionButton}\n          </TitleWrapper>\n          {!!description && (\n            <Text textStyle=\"body.medium\">\n              {showFullDescription || description.length < DESCRIPTION_MAX_LENGTH\n                ? description\n                : `${truncatedDescription}...`}\n              {description.length > DESCRIPTION_MAX_LENGTH && (\n                <ShowMoreButton variant=\"link\" onClick={() => setShowFullDescription((p) => !p)}>\n                  {t(`audio.${showFullDescription ? \"readLessDescriptionLabel\" : \"readMoreDescriptionLabel\"}`)}\n                </ShowMoreButton>\n              )}\n            </Text>\n          )}\n          {!!textVersion && !!img && textVersionButton}\n        </TextWrapper>\n      </InfoWrapper>\n      <Controls src={src} title={title} />\n      {!!textVersion && (\n        <TextVersionWrapper id={textDescriptionId} hidden={!showTextVersion}>\n          <Heading asChild textStyle=\"title.medium\" consumeCss>\n            <h4>{t(\"audio.textVersion.heading\")}</h4>\n          </Heading>\n          <TextVersionText>{textVersion}</TextVersionText>\n        </TextVersionWrapper>\n      )}\n    </AudioPlayerWrapper>\n  );\n};\n\nexport default AudioPlayer;\n"],"mappings":"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"}