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

package/es/Article/ArticleByline.js

@@ -1,182 +0,0 @@
-/**
- * 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";
-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

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

@@ -1,11 +0,0 @@
-/**
- * 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

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