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

package/lib/FileList/File.js

@@ -1,108 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FileListElement = exports.File = void 0;
-var _react = require("react");
-var _reactI18next = require("react-i18next");
-var _icons = require("@ndla/icons");
-var _primitives = require("@ndla/primitives");
-var _safelink = require("@ndla/safelink");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _patterns = require("@ndla/styled-system/patterns");
-var _ = require(".");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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.
- *
- */
-
-const StyledSafeLink = (0, _jsx2.styled)(_safelink.SafeLink, {
-  base: {
-    textUnderlineOffset: "2px",
-    textDecoration: "underline",
-    _hover: {
-      textDecoration: "none"
-    }
-  }
-});
-const StyledHStack = (0, _jsx2.styled)(_jsx2.HStack, {
-  base: {
-    position: "relative",
-    paddingBlock: "small",
-    paddingInlineEnd: "medium",
-    paddingInlineStart: "small",
-    width: "100%"
-  }
-});
-const File = exports.File = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    title,
-    url,
-    fileExists,
-    fileType,
-    fileSize,
-    ...rest
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  const filename = `${title}-${url.split("/").pop() ?? ""}`;
-  const downloadUrl = `${url}?download=${filename}`;
-  const tooltip = `${t("download")} ${filename}`;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledHStack, {
-    justify: "space-between",
-    ref: ref,
-    ...rest,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsx2.HStack, {
-      gap: "xxsmall",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DownloadLine, {}), fileExists ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSafeLink, {
-        unstyled: true,
-        css: _patterns.linkOverlay.raw(),
-        to: downloadUrl,
-        title: tooltip,
-        children: title
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-        textStyle: "label.medium",
-        children: title
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-        textStyle: "label.large",
-        asChild: true,
-        consumeCss: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-          children: ["(", fileType?.toUpperCase(), ")"]
-        })
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-      textStyle: "label.large",
-      asChild: true,
-      consumeCss: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-        children: fileSize
-      })
-    })]
-  });
-});
-const FileListElement = _ref2 => {
-  let {
-    title,
-    url,
-    fileExists,
-    fileType,
-    fileSize
-  } = _ref2;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FileListItem, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(File, {
-      title: title,
-      url: url,
-      fileExists: fileExists,
-      fileType: fileType,
-      fileSize: fileSize
-    })
-  });
-};
-exports.FileListElement = FileListElement;

package/lib/FileList/FileList.js

@@ -1,54 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FileListWrapper = exports.FileListItem = exports.FileListEmbed = void 0;
-var _react = require("@ark-ui/react");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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.
- *
- */
-
-const FileListWrapper = exports.FileListWrapper = (0, _jsx2.styled)(_react.ark.ul, {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "xsmall",
-    clear: "both"
-  }
-}, {
-  baseComponent: true
-});
-const FileListItem = exports.FileListItem = (0, _jsx2.styled)(_react.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
-});
-const FileListEmbed = _ref => {
-  let {
-    children,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FileListWrapper, {
-    ...rest,
-    "data-embed-type": "file-list",
-    children: children
-  });
-};
-exports.FileListEmbed = FileListEmbed;

package/lib/FileList/PdfFile.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PdfFile = void 0;
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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.
- *
- */
-
-const StyledIframe = (0, _jsx2.styled)("iframe", {
-  base: {
-    width: "100%"
-  }
-});
-const StyledListElement = (0, _jsx2.styled)("li", {
-  base: {
-    listStyle: "none"
-  }
-});
-const StyledFigure = (0, _jsx2.styled)(_primitives.Figure, {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "xsmall"
-  }
-});
-const PdfFile = _ref => {
-  let {
-    title,
-    url
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledListElement, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledFigure, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
-        asChild: true,
-        consumeCss: true,
-        textStyle: "title.medium",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
-          children: title
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledIframe, {
-        title: title,
-        height: "1050",
-        src: url
-      })]
-    })
-  });
-};
-exports.PdfFile = PdfFile;

package/lib/FileList/index.js

@@ -1,44 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "File", {
-  enumerable: true,
-  get: function () {
-    return _File.File;
-  }
-});
-Object.defineProperty(exports, "FileListElement", {
-  enumerable: true,
-  get: function () {
-    return _File.FileListElement;
-  }
-});
-Object.defineProperty(exports, "FileListEmbed", {
-  enumerable: true,
-  get: function () {
-    return _FileList.FileListEmbed;
-  }
-});
-Object.defineProperty(exports, "FileListItem", {
-  enumerable: true,
-  get: function () {
-    return _FileList.FileListItem;
-  }
-});
-Object.defineProperty(exports, "FileListWrapper", {
-  enumerable: true,
-  get: function () {
-    return _FileList.FileListWrapper;
-  }
-});
-Object.defineProperty(exports, "PdfFile", {
-  enumerable: true,
-  get: function () {
-    return _PdfFile.PdfFile;
-  }
-});
-var _FileList = require("./FileList");
-var _File = require("./File");
-var _PdfFile = require("./PdfFile");

package/lib/Gloss/Gloss.js

@@ -1,181 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _reactI18next = require("react-i18next");
-var _react2 = require("@ark-ui/react");
-var _icons = require("@ndla/icons");
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _GlossExample = _interopRequireDefault(require("./GlossExample"));
-var _SpeechControl = _interopRequireDefault(require("../AudioPlayer/SpeechControl"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * 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.
- *
- */
-
-// 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.
-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 = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between"
-  }
-});
-const TextWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    gap: "small"
-  }
-});
-const StyledAccordionItemContent = (0, _jsx2.styled)(_primitives.AccordionItemContent, {
-  base: {
-    paddingInline: "0"
-  }
-});
-const StyledContainer = (0, _jsx2.styled)(Container, {
-  base: {
-    marginBlockStart: "3xsmall"
-  }
-});
-const StyledAccordionItem = (0, _jsx2.styled)(_primitives.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
-  } = (0, _reactI18next.useTranslation)();
-  const filteredExamples = (0, _react.useMemo)(() => getFilteredExamples(glossData, exampleIds, exampleLangs), [exampleIds, exampleLangs, glossData]);
-  if (!glossData) return null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.AccordionRoot, {
-    multiple: true,
-    variant: "clean",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledAccordionItem, {
-      value: "gloss",
-      variant: variant,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TextWrapper, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-            textStyle: "label.medium",
-            fontWeight: "bold",
-            asChild: true,
-            consumeCss: true,
-            lang: glossData.originalLanguage,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              children: glossData.gloss
-            })
-          }), !!glossData.transcriptions.traditional && /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-            textStyle: "label.medium",
-            asChild: true,
-            consumeCss: true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              "aria-label": t("gloss.transcriptions.traditional"),
-              lang: glossData.originalLanguage,
-              children: glossData.transcriptions.traditional
-            }, t("gloss.transcriptions.traditional"))
-          }), !!glossData.transcriptions.pinyin && /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-            textStyle: "label.medium",
-            asChild: true,
-            consumeCss: true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              "data-pinyin": "",
-              "aria-label": t("gloss.transcriptions.pinyin"),
-              lang: glossData.originalLanguage,
-              children: glossData.transcriptions.pinyin
-            }, t("gloss.transcriptions.pinyin"))
-          }), !!glossData.wordClass && /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-            textStyle: "label.medium",
-            asChild: true,
-            consumeCss: true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              "aria-label": t("gloss.wordClass"),
-              children: t(`wordClass.${glossData.wordClass}`).toLowerCase()
-            })
-          })]
-        }), !!audio?.src && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpeechControl.default, {
-          src: audio.src,
-          title: audio.title,
-          type: "gloss"
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledContainer, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-          textStyle: "label.medium",
-          asChild: true,
-          consumeCss: true,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            lang: title.language,
-            children: title.title
-          })
-        }), !!filteredExamples.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.AccordionItemTrigger, {
-          asChild: true,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.IconButton, {
-            variant: "tertiary",
-            "aria-label": t("gloss.showExamples"),
-            title: t("gloss.showExamples"),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.AccordionItemIndicator, {
-              asChild: true,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ArrowDownShortLine, {
-                size: "medium"
-              })
-            })
-          })
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledAccordionItemContent, {
-        children: filteredExamples.map((examples, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlossExample.default, {
-          examples: examples,
-          originalLanguage: glossData.originalLanguage
-        }, `gloss-example-${index}`))
-      })]
-    })
-  });
-};
-var _default = exports.default = Gloss;

package/lib/Gloss/GlossExample.js

@@ -1,70 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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.
- *
- */
-
-const StyledGlossExample = (0, _jsx2.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 = (0, _jsx2.styled)(_primitives.Text, {
-  base: {
-    fontStyle: "italic"
-  }
-});
-const GlossExample = _ref => {
-  let {
-    examples,
-    originalLanguage
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    children: examples.map((examples, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGlossExample, {
-        lang: examples.language,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-          textStyle: "label.medium",
-          lang: examples.language,
-          children: examples.example
-        })
-      }), !!examples.transcriptions.pinyin && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGlossExample, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PinyinText, {
-          "data-pinyin": "",
-          lang: originalLanguage,
-          textStyle: "label.medium",
-          children: examples.transcriptions?.pinyin
-        })
-      }), !!examples.transcriptions?.traditional && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGlossExample, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-          textStyle: "label.medium",
-          lang: originalLanguage,
-          children: examples.transcriptions.traditional
-        })
-      })]
-    }, index))
-  });
-};
-var _default = exports.default = GlossExample;

package/lib/Gloss/index.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Gloss", {
-  enumerable: true,
-  get: function () {
-    return _Gloss.default;
-  }
-});
-Object.defineProperty(exports, "GlossExample", {
-  enumerable: true,
-  get: function () {
-    return _GlossExample.default;
-  }
-});
-var _Gloss = _interopRequireDefault(require("./Gloss"));
-var _GlossExample = _interopRequireDefault(require("./GlossExample"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/Grid/Grid.js

@@ -1,101 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Grid = void 0;
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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.
- *
- */
-
-const GridContainer = (0, _jsx2.styled)("div", {
-  base: {
-    display: "grid",
-    justifyContent: "center",
-    borderRadius: "xsmall",
-    gridRowGap: "large",
-    gridColumnGap: "medium",
-    width: "100%",
-    backgroundColor: "background.subtle",
-    minWidth: "surface.xxsmall",
-    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-    "& :not(div[data-parallax-cell='true']) > div[data-embed-type='pitch']": {
-      height: "100%",
-      "& > :last-child": {
-        marginTop: "auto"
-      }
-    },
-    tabletDown: {
-      gridTemplateColumns: "repeat(1, minmax(0, 1fr))"
-    },
-    tabletToDesktop: {
-      gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-      "& > div:nth-child(3):last-child": {
-        display: "flex",
-        flexFlow: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        gridColumn: "span 2"
-      }
-    }
-  },
-  variants: {
-    columns: {
-      "2": {},
-      "2x2": {},
-      "3": {
-        desktop: {
-          gridTemplateColumns: "repeat(3, minmax(0, 1fr))"
-        }
-      },
-      "4": {
-        desktop: {
-          gridTemplateColumns: "repeat(4, minmax(0, 1fr))"
-        }
-      }
-    },
-    background: {
-      white: {
-        backgroundColor: "surface.default"
-      },
-      transparent: {
-        backgroundColor: "transparent"
-      },
-      gray: {
-        backgroundColor: "background.subtle"
-      }
-    },
-    border: {
-      lightBlue: {
-        padding: "xsmall",
-        border: "1px solid",
-        borderColor: "surface.brand.2"
-      }
-    }
-  }
-});
-const Grid = _ref => {
-  let {
-    columns,
-    border,
-    children,
-    background = "gray",
-    ...rest
-  } = _ref;
-  const amountOfColumns = children?.length === 3 ? "3" : columns;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridContainer, {
-    "data-embed-type": "grid",
-    border: border === "none" ? undefined : border,
-    columns: amountOfColumns,
-    background: background,
-    ...rest,
-    children: children
-  });
-};
-exports.Grid = Grid;

package/lib/Grid/GridParallaxItem.js

@@ -1,39 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.GridParallaxItem = void 0;
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Copyright (c) 2024-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 StyledGridParallaxItem = (0, _jsx2.styled)("div", {
-  base: {
-    position: "relative",
-    "& > div": {
-      top: "var(--masthead-height, 0px)",
-      position: "sticky"
-    }
-  }
-});
-const GridParallaxItem = _ref => {
-  let {
-    children,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledGridParallaxItem, {
-    ...rest,
-    "data-embed-type": "grid-parallax",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      children: children
-    })
-  });
-};
-exports.GridParallaxItem = GridParallaxItem;

package/lib/Grid/index.js

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Grid", {
-  enumerable: true,
-  get: function () {
-    return _Grid.Grid;
-  }
-});
-Object.defineProperty(exports, "GridParallaxItem", {
-  enumerable: true,
-  get: function () {
-    return _GridParallaxItem.GridParallaxItem;
-  }
-});
-var _Grid = require("./Grid");
-var _GridParallaxItem = require("./GridParallaxItem");