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

package/es/FactBox/FactBox.js

@@ -1,177 +0,0 @@
-/**
- * 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 React, { forwardRef, useCallback, useEffect, useId, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { ArrowDownShortLine } from "@ndla/icons";
-import { IconButton } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledAside = styled("aside", {
-  base: {
-    position: "relative",
-    padding: "medium",
-    display: "grid",
-    gridTemplateRows: "0fr",
-    transitionProperty: "grid-template-rows",
-    transitionDuration: "slow",
-    transitionTimingFunction: "ease-in-out",
-    justifyItems: "center",
-    border: "1px solid",
-    borderColor: "stroke.default",
-    borderRadius: "xsmall",
-    clear: "both",
-    _open: {
-      gridTemplateRows: "1fr"
-    },
-    _closed: {
-      _print: {
-        overflow: "visible",
-        maxHeight: "500vh"
-      }
-    },
-    "& > div": {
-      minHeight: "surface.3xsmall"
-    }
-  },
-  variants: {
-    overflowHidden: {
-      true: {
-        "& > div": {
-          overflow: "hidden"
-        }
-      }
-    }
-  }
-});
-const StyledContent = styled("div", {
-  base: {
-    position: "relative",
-    width: "100%",
-    // Reset the top margin of the very first child.
-    "& :first-child": {
-      marginBlockStart: "0"
-    },
-    _after: {
-      content: '""',
-      textAlign: "center",
-      position: "absolute",
-      inset: "0",
-      transitionProperty: "opacity",
-      transitionDuration: "slow",
-      transitionTimingFunction: "ease-in-out",
-      gradientFrom: "surface.default/20",
-      gradientTo: "surface.default/95",
-      backgroundGradient: "to-b",
-      opacity: "1",
-      zIndex: "base",
-      pointerEvents: "none"
-    },
-    _print: {
-      overflow: "visible",
-      _after: {
-        display: "none"
-      }
-    },
-    _open: {
-      paddingBlockEnd: "xsmall",
-      _after: {
-        opacity: "0"
-      }
-    }
-  }
-});
-const StyledIconButton = styled(IconButton, {
-  base: {
-    position: "absolute",
-    bottom: "-medium",
-    zIndex: "base",
-    "& svg": {
-      transitionProperty: "transform",
-      transitionTimingFunction: "ease-in-out",
-      transitionDuration: "fast"
-    },
-    _open: {
-      "& svg": {
-        transform: "rotate(180deg)"
-      }
-    },
-    _print: {
-      display: "none"
-    }
-  }
-});
-
-// TODO: Consider moving the open trigger depending on whether the content is open or closed.
-
-const FactBox = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    children,
-    open,
-    onOpenChange,
-    defaultOpen = false,
-    ...rest
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  const [state, setState] = useState(defaultOpen ? "open" : "closed");
-  const [overflowHidden, setOverflowHidden] = useState(!defaultOpen);
-  const contentId = useId();
-  // Inert has existed since early 2023. It allows us to disable tabindex inside the content if it is closed, allowing us to be accessible for users with newish browsers. React 18 removes this because it doesn't recognize the attribute. This is a workaround for that.
-  // When running in React 18, we need to use an empty string instead of true.
-  // TODO: Remove this hack once we upgrade to React 19 as a peer dep.
-  const inertAttribute = useMemo(() => {
-    return state === "closed" ? {
-      inert: typeof React.use === "function" ? true : ""
-    } : {};
-  }, [state]);
-  useEffect(() => {
-    if (open !== undefined) {
-      setState(open ? "open" : "closed");
-    }
-  }, [open]);
-  const onClick = useCallback(() => {
-    const newState = state === "open" ? "closed" : "open";
-    setState(newState);
-    onOpenChange?.(newState === "open");
-  }, [state, onOpenChange]);
-  return /*#__PURE__*/_jsxs(StyledAside, {
-    "data-state": state,
-    "data-embed-type": "factbox",
-    ...rest,
-    ref: ref,
-    overflowHidden: overflowHidden,
-    onTransitionStart: e => {
-      if (e.target === e.currentTarget && state === "closed") {
-        setOverflowHidden(true);
-      }
-    },
-    onTransitionEnd: e => {
-      if (e.target === e.currentTarget && state === "open") {
-        setOverflowHidden(false);
-      }
-    },
-    children: [/*#__PURE__*/_jsx(StyledIconButton, {
-      "data-state": state,
-      onClick: onClick,
-      contentEditable: false,
-      "aria-expanded": state === "open",
-      "aria-controls": contentId,
-      "aria-label": t(`factbox.${state === "open" ? "close" : "open"}`),
-      children: /*#__PURE__*/_jsx(ArrowDownShortLine, {})
-    }), /*#__PURE__*/_jsx(StyledContent, {
-      id: contentId,
-      "data-state": state,
-      "aria-hidden": state === "closed",
-      ...inertAttribute,
-      children: children
-    })]
-  });
-});
-export default FactBox;

package/es/FactBox/index.js

@@ -1,10 +0,0 @@
-/**
- * Copyright (c) 2018-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 FactBox from "./FactBox";
-export default FactBox;

package/es/FileList/File.js

@@ -1,101 +0,0 @@
-/**
- * Copyright (c) 2023-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 { useTranslation } from "react-i18next";
-import { DownloadLine } from "@ndla/icons";
-import { Text } from "@ndla/primitives";
-import { SafeLink } from "@ndla/safelink";
-import { HStack, styled } from "@ndla/styled-system/jsx";
-import { linkOverlay } from "@ndla/styled-system/patterns";
-import { FileListItem } from ".";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledSafeLink = styled(SafeLink, {
-  base: {
-    textUnderlineOffset: "2px",
-    textDecoration: "underline",
-    _hover: {
-      textDecoration: "none"
-    }
-  }
-});
-const StyledHStack = styled(HStack, {
-  base: {
-    position: "relative",
-    paddingBlock: "small",
-    paddingInlineEnd: "medium",
-    paddingInlineStart: "small",
-    width: "100%"
-  }
-});
-export const File = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    title,
-    url,
-    fileExists,
-    fileType,
-    fileSize,
-    ...rest
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  const filename = `${title}-${url.split("/").pop() ?? ""}`;
-  const downloadUrl = `${url}?download=${filename}`;
-  const tooltip = `${t("download")} ${filename}`;
-  return /*#__PURE__*/_jsxs(StyledHStack, {
-    justify: "space-between",
-    ref: ref,
-    ...rest,
-    children: [/*#__PURE__*/_jsxs(HStack, {
-      gap: "xxsmall",
-      children: [/*#__PURE__*/_jsx(DownloadLine, {}), fileExists ? /*#__PURE__*/_jsx(StyledSafeLink, {
-        unstyled: true,
-        css: linkOverlay.raw(),
-        to: downloadUrl,
-        title: tooltip,
-        children: title
-      }) : /*#__PURE__*/_jsx(Text, {
-        textStyle: "label.medium",
-        children: title
-      }), /*#__PURE__*/_jsx(Text, {
-        textStyle: "label.large",
-        asChild: true,
-        consumeCss: true,
-        children: /*#__PURE__*/_jsxs("span", {
-          children: ["(", fileType?.toUpperCase(), ")"]
-        })
-      })]
-    }), /*#__PURE__*/_jsx(Text, {
-      textStyle: "label.large",
-      asChild: true,
-      consumeCss: true,
-      children: /*#__PURE__*/_jsx("span", {
-        children: fileSize
-      })
-    })]
-  });
-});
-export const FileListElement = _ref2 => {
-  let {
-    title,
-    url,
-    fileExists,
-    fileType,
-    fileSize
-  } = _ref2;
-  return /*#__PURE__*/_jsx(FileListItem, {
-    children: /*#__PURE__*/_jsx(File, {
-      title: title,
-      url: url,
-      fileExists: fileExists,
-      fileType: fileType,
-      fileSize: fileSize
-    })
-  });
-};

package/es/FileList/FileList.js

@@ -1,47 +0,0 @@
-/**
- * Copyright (c) 2023-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 { ark } from "@ark-ui/react";
-import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const FileListWrapper = styled(ark.ul, {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "xsmall",
-    clear: "both"
-  }
-}, {
-  baseComponent: true
-});
-export const FileListItem = styled(ark.li, {
-  base: {
-    listStyle: "none",
-    background: "surface.infoSubtle",
-    borderBlockEnd: "1px solid",
-    borderColor: "stroke.default",
-    display: "flex",
-    justifyContent: "space-between",
-    _hover: {
-      backgroundColor: "surface.infoSubtle.hover"
-    }
-  }
-}, {
-  baseComponent: true
-});
-export const FileListEmbed = _ref => {
-  let {
-    children,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/_jsx(FileListWrapper, {
-    ...rest,
-    "data-embed-type": "file-list",
-    children: children
-  });
-};

package/es/FileList/PdfFile.js

@@ -1,50 +0,0 @@
-/**
- * Copyright (c) 2023-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 { Heading, Figure } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledIframe = styled("iframe", {
-  base: {
-    width: "100%"
-  }
-});
-const StyledListElement = styled("li", {
-  base: {
-    listStyle: "none"
-  }
-});
-const StyledFigure = styled(Figure, {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "xsmall"
-  }
-});
-export const PdfFile = _ref => {
-  let {
-    title,
-    url
-  } = _ref;
-  return /*#__PURE__*/_jsx(StyledListElement, {
-    children: /*#__PURE__*/_jsxs(StyledFigure, {
-      children: [/*#__PURE__*/_jsx(Heading, {
-        asChild: true,
-        consumeCss: true,
-        textStyle: "title.medium",
-        children: /*#__PURE__*/_jsx("h4", {
-          children: title
-        })
-      }), /*#__PURE__*/_jsx(StyledIframe, {
-        title: title,
-        height: "1050",
-        src: url
-      })]
-    })
-  });
-};

package/es/FileList/index.js

@@ -1,11 +0,0 @@
-/**
- * Copyright (c) 2018-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 { FileListEmbed, FileListItem, FileListWrapper } from "./FileList";
-export { File, FileListElement } from "./File";
-export { PdfFile } from "./PdfFile";

package/es/Gloss/Gloss.js

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

package/es/Gloss/GlossExample.js

@@ -1,64 +0,0 @@
-/**
- * Copyright (c) 2023-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 { Fragment } from "react";
-import { Text } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledGlossExample = styled("div", {
-  base: {
-    borderTop: "1px solid",
-    borderColor: "stroke.subtle",
-    paddingBlock: "xsmall",
-    paddingInline: "medium",
-    _first: {
-      background: "surface.brand.1.subtle",
-      borderColor: "stroke.default",
-      "& p": {
-        fontWeight: "bold"
-      }
-    }
-  }
-});
-const PinyinText = styled(Text, {
-  base: {
-    fontStyle: "italic"
-  }
-});
-const GlossExample = _ref => {
-  let {
-    examples,
-    originalLanguage
-  } = _ref;
-  return /*#__PURE__*/_jsx("div", {
-    children: examples.map((examples, index) => /*#__PURE__*/_jsxs(Fragment, {
-      children: [/*#__PURE__*/_jsx(StyledGlossExample, {
-        lang: examples.language,
-        children: /*#__PURE__*/_jsx(Text, {
-          textStyle: "label.medium",
-          lang: examples.language,
-          children: examples.example
-        })
-      }), !!examples.transcriptions.pinyin && /*#__PURE__*/_jsx(StyledGlossExample, {
-        children: /*#__PURE__*/_jsx(PinyinText, {
-          "data-pinyin": "",
-          lang: originalLanguage,
-          textStyle: "label.medium",
-          children: examples.transcriptions?.pinyin
-        })
-      }), !!examples.transcriptions?.traditional && /*#__PURE__*/_jsx(StyledGlossExample, {
-        children: /*#__PURE__*/_jsx(Text, {
-          textStyle: "label.medium",
-          lang: originalLanguage,
-          children: examples.transcriptions.traditional
-        })
-      })]
-    }, index))
-  });
-};
-export default GlossExample;

package/es/Gloss/index.js

@@ -1,10 +0,0 @@
-/**
- * Copyright (c) 2023-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 { default as Gloss } from "./Gloss";
-export { default as GlossExample } from "./GlossExample";