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

package/README.md

@@ -1,6 +1,6 @@
 # ndla-ui
 
-Main UI component library for NDLA.
+Main UI component library for NDLA
 
 ## Installation
 

package/es/Article/Article.js

@@ -0,0 +1,199 @@
+/**
+ * Copyright (c) 2016-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 { forwardRef } from "react";
+import { ark } from "@ark-ui/react";
+import { Heading, Text } from "@ndla/primitives";
+import { cx } from "@ndla/styled-system/css";
+import { Stack, styled } from "@ndla/styled-system/jsx";
+import { ArticleByline } from "./ArticleByline";
+import { ContentTypeBadge } from "../ContentTypeBadge/ContentTypeBadge";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledArticleContent = styled(ark.section, {}, {
+  baseComponent: true
+});
+export const ArticleContent = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    className,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledArticleContent, {
+    className: cx("ndla-article", className),
+    ...props,
+    ref: ref
+  });
+});
+const StyledArticleWrapper = styled(ark.article, {
+  base: {
+    background: "background.default",
+    display: "flex",
+    flexDirection: "column",
+    color: "text.default",
+    alignItems: "center",
+    width: "100%",
+    overflowWrap: "break-word",
+    position: "relative",
+    "& mjx-stretchy-v > mjx-ext > mjx-c": {
+      transform: "scaleY(100) translateY(0.075em)"
+    },
+    _after: {
+      content: "",
+      display: "table",
+      clear: "both"
+    }
+  }
+}, {
+  baseComponent: true
+});
+export const ArticleWrapper = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(StyledArticleWrapper, {
+  "data-ndla-article": "",
+  ref: ref,
+  ...props
+}));
+export const ArticleHGroup = styled(ark.hgroup, {
+  base: {
+    display: "flex",
+    width: "100%",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    "& h1": {
+      overflowWrap: "anywhere"
+    }
+  }
+}, {
+  baseComponent: true
+});
+export const ArticleHeader = styled(ark.header, {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "medium",
+    alignItems: "flex-start",
+    width: "100%",
+    paddingBlockStart: "xxlarge",
+    overflowWrap: "anywhere"
+  }
+}, {
+  baseComponent: true
+});
+export const ArticleFooter = styled(ark.footer, {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "xxlarge",
+    width: "100%",
+    "& > :is(:last-child)": {
+      paddingBlockEnd: "5xlarge"
+    }
+  }
+}, {
+  baseComponent: true
+});
+const StyledStack = styled(Stack, {
+  base: {
+    width: "100%",
+    minHeight: "xxlarge"
+  }
+});
+const StyledWrapper = styled("div", {
+  base: {
+    display: "flex",
+    gap: "small",
+    flexWrap: "wrap",
+    alignItems: "center"
+  }
+});
+export const ArticleTitle = _ref2 => {
+  let {
+    contentType,
+    heartButton,
+    title,
+    lang,
+    id,
+    introduction,
+    contentTypeLabel,
+    competenceGoals,
+    disclaimer
+  } = _ref2;
+  return /*#__PURE__*/_jsxs(ArticleHeader, {
+    children: [/*#__PURE__*/_jsxs(ArticleHGroup, {
+      children: [(!!contentType || !!heartButton) && /*#__PURE__*/_jsxs(StyledStack, {
+        justify: "space-between",
+        align: "center",
+        direction: "row",
+        gap: "small",
+        children: [!!contentType && /*#__PURE__*/_jsx(ContentTypeBadge, {
+          contentType: contentType,
+          children: contentTypeLabel
+        }), heartButton]
+      }), /*#__PURE__*/_jsx(Heading, {
+        textStyle: "heading.medium",
+        id: id,
+        lang: lang,
+        property: "dct:title",
+        children: title
+      })]
+    }), !!introduction && /*#__PURE__*/_jsx(Text, {
+      lang: lang,
+      textStyle: "body.xlarge",
+      asChild: true,
+      consumeCss: true,
+      children: /*#__PURE__*/_jsx("div", {
+        children: introduction
+      })
+    }), /*#__PURE__*/_jsxs(StyledWrapper, {
+      children: [competenceGoals, disclaimer]
+    })]
+  });
+};
+export const Article = _ref3 => {
+  let {
+    article,
+    contentType,
+    licenseBox,
+    children,
+    competenceGoals,
+    contentTypeLabel,
+    id,
+    heartButton,
+    lang,
+    disclaimer
+  } = _ref3;
+  const {
+    title,
+    introduction,
+    published,
+    content,
+    footNotes,
+    copyright
+  } = article;
+  const authors = copyright?.creators.length || copyright?.rightsholders.length ? copyright.creators : copyright?.processors;
+  return /*#__PURE__*/_jsxs(ArticleWrapper, {
+    children: [/*#__PURE__*/_jsx(ArticleTitle, {
+      id: id,
+      contentType: contentType,
+      heartButton: heartButton,
+      title: title,
+      introduction: introduction,
+      competenceGoals: competenceGoals,
+      lang: lang,
+      contentTypeLabel: contentTypeLabel,
+      disclaimer: disclaimer
+    }), /*#__PURE__*/_jsx(ArticleContent, {
+      children: content
+    }), /*#__PURE__*/_jsxs(ArticleFooter, {
+      children: [/*#__PURE__*/_jsx(ArticleByline, {
+        footnotes: footNotes,
+        authors: authors,
+        suppliers: copyright?.rightsholders,
+        published: published,
+        licenseBox: licenseBox
+      }), children]
+    })]
+  });
+};

package/es/Article/ArticleByline.js

@@ -0,0 +1,182 @@
+/**
+ * Copyright (c) 2020-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 { forwardRef, useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocation } from "react-router-dom";
+import { ArrowDownShortLine } from "@ndla/icons";
+import { AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, Heading } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { ArticleFootNotes } from "./ArticleFootNotes";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+const Wrapper = styled("div", {
+  base: {
+    // 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.
+    marginBlockStart: "medium",
+    paddingBlockStart: "xsmall",
+    borderTop: "1px solid",
+    borderColor: "stroke.subtle"
+  }
+});
+const TextWrapper = styled("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "3xsmall",
+    width: "100%",
+    justifyContent: "space-between",
+    paddingBlock: "xsmall",
+    textStyle: "body.medium",
+    '& [data-contributors="false"]': {
+      marginInlineStart: "auto"
+    }
+  },
+  variants: {
+    learningpath: {
+      true: {},
+      false: {
+        tabletWide: {
+          flexDirection: "row"
+        }
+      }
+    }
+  }
+});
+const renderContributors = (contributors, t) => {
+  const contributorsArray = contributors.map((contributor, index) => {
+    if (index < 1) return contributor.name;
+    const sep = index === contributors.length - 1 ? ` ${t("article.conjunction")} ` : ", ";
+    return `${sep}${contributor.name}`;
+  });
+  return contributorsArray.join("");
+};
+const getSuppliersText = (suppliers, t) => {
+  if (suppliers.length === 0) {
+    return "";
+  }
+  return suppliers.length > 1 ? t("article.multipleSuppliersLabel", {
+    names: renderContributors(suppliers, t),
+    interpolation: {
+      escapeValue: false
+    }
+  }) : t("article.supplierLabel", {
+    name: renderContributors(suppliers, t),
+    interpolation: {
+      escapeValue: false
+    }
+  });
+};
+const StyledAccordionRoot = styled(AccordionRoot, {
+  base: {
+    paddingBlockStart: "xxlarge"
+  }
+});
+const refRegexp = /note\d/;
+const footnotesAccordionId = "footnotes";
+export const ArticleByline = _ref => {
+  let {
+    authors = [],
+    suppliers = [],
+    footnotes,
+    licenseBox,
+    published,
+    displayByline = true,
+    bylineType = "article",
+    bylineSuffix
+  } = _ref;
+  const {
+    t
+  } = useTranslation();
+  const {
+    pathname
+  } = useLocation();
+  const [openAccordions, setOpenAccordions] = useState([]);
+  const accordionItemValue = "rulesForUse";
+  const onHashChange = useCallback(e => {
+    const hash = e.newURL.split("#")[1];
+    if (hash?.match(refRegexp) && !openAccordions.includes(footnotesAccordionId)) {
+      setOpenAccordions([...openAccordions, footnotesAccordionId]);
+      const el = document.getElementById(`#${hash}`);
+      el?.click();
+      el?.focus();
+    }
+  }, [openAccordions]);
+  useEffect(() => {
+    setOpenAccordions(prev => prev.filter(state => state !== accordionItemValue));
+  }, [pathname]);
+  useEffect(() => {
+    window.addEventListener("hashchange", onHashChange);
+    return () => window.removeEventListener("hashchange", onHashChange);
+  }, [onHashChange]);
+  const showPrimaryContributors = suppliers.length > 0 || authors.length > 0;
+  const authorLabel = {
+    article: "article.authorsLabel",
+    learningPath: "article.authorsLabelLearningpath",
+    external: "article.authorsLabelExternal"
+  };
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    children: [!!displayByline && /*#__PURE__*/_jsxs(TextWrapper, {
+      learningpath: bylineType === "learningPath",
+      children: [!!showPrimaryContributors && /*#__PURE__*/_jsxs("span", {
+        children: [authors.length > 0 && `${t(authorLabel[bylineType], {
+          names: renderContributors(authors, t),
+          interpolation: {
+            escapeValue: false
+          }
+        })}. `, getSuppliersText(suppliers, t)]
+      }), published ? /*#__PURE__*/_jsxs("div", {
+        "data-contributors": showPrimaryContributors,
+        children: [t(`${bylineType}.lastUpdated`), " ", published]
+      }) : null, bylineSuffix]
+    }), (!!licenseBox || !!footnotes?.length) && /*#__PURE__*/_jsxs(StyledAccordionRoot, {
+      multiple: true,
+      value: openAccordions,
+      onValueChange: details => setOpenAccordions(details.value),
+      children: [!!licenseBox && /*#__PURE__*/_jsx(ArticleBylineAccordionItem, {
+        value: accordionItemValue,
+        accordionTitle: t("article.useContent"),
+        children: licenseBox
+      }), !!footnotes?.length && /*#__PURE__*/_jsx(ArticleBylineAccordionItem, {
+        value: footnotesAccordionId,
+        accordionTitle: t("article.footnotes"),
+        children: /*#__PURE__*/_jsx(ArticleFootNotes, {
+          footNotes: footnotes
+        })
+      })]
+    })]
+  });
+};
+export const ArticleBylineAccordionItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    value,
+    accordionTitle,
+    children,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/_jsxs(AccordionItem, {
+    value: value,
+    ref: ref,
+    ...props,
+    children: [/*#__PURE__*/_jsx(Heading, {
+      asChild: true,
+      consumeCss: true,
+      textStyle: "label.medium",
+      fontWeight: "bold",
+      children: /*#__PURE__*/_jsx("h2", {
+        children: /*#__PURE__*/_jsxs(AccordionItemTrigger, {
+          children: [accordionTitle, /*#__PURE__*/_jsx(AccordionItemIndicator, {
+            asChild: true,
+            children: /*#__PURE__*/_jsx(ArrowDownShortLine, {})
+          })]
+        })
+      })
+    }), /*#__PURE__*/_jsx(AccordionItemContent, {
+      children: children
+    })]
+  });
+});

package/es/Article/ArticleFootNotes.js

@@ -0,0 +1,60 @@
+/**
+ * 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))
+  });
+};

package/es/Article/index.js

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ */
+
+export { Article, ArticleWrapper, ArticleHeader, ArticleFooter, ArticleTitle, ArticleHGroup, ArticleContent } from "./Article";
+export { ArticleByline, ArticleBylineAccordionItem } from "./ArticleByline";
+export { ArticleFootNotes } from "./ArticleFootNotes";

package/es/AudioPlayer/AudioPlayer.js

@@ -0,0 +1,218 @@
+/**
+ * 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 { useId, useMemo, useState } from "react";
+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";
+
+// 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"
+  }
+});
+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
+      })]
+    })]
+  });
+};
+export default AudioPlayer;