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

package/lib/Embed/RelatedContentEmbed.js

@@ -1,61 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactI18next = require("react-i18next");
-var _ContentType = require("../model/ContentType");
-var _RelatedArticleList = require("../RelatedArticleList/RelatedArticleList");
-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 RelatedContentEmbed = _ref => {
-  let {
-    embed,
-    isOembed,
-    subject,
-    ndlaFrontendDomain
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  if (embed.status === "error") {
-    return null;
-  }
-  const {
-    data,
-    embedData
-  } = embed;
-  if (embedData.articleId && data) {
-    const typeId = data.resource?.resourceTypes.find(rt => _ContentType.contentTypeMapping[rt.id])?.id;
-    const type = typeId ? _ContentType.contentTypeMapping[typeId] : undefined;
-    const context = data.resource?.contexts.find(c => c.rootId === subject);
-    const url = context?.url ?? data.resource?.url ?? `/article/${embedData.articleId}`;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RelatedArticleList.RelatedArticle, {
-      title: data.article.title?.title ?? "",
-      introduction: data.article.metaDescription?.metaDescription ?? "",
-      target: isOembed ? "_blank" : undefined,
-      to: `${ndlaFrontendDomain ?? ""}${url ?? ""}`,
-      type: type
-    });
-  }
-  if (typeof embedData.url === "string") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RelatedArticleList.RelatedArticle, {
-      title: embedData.title ?? "",
-      introduction: "",
-      to: embedData.url,
-      target: "_blank",
-      type: "external",
-      linkInfo: `${t("related.linkInfo")} ${embedData.urlDomain}`
-    });
-  }
-  return null;
-};
-var _default = exports.default = RelatedContentEmbed;

package/lib/Embed/UnknownEmbed.js

@@ -1,37 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactI18next = require("react-i18next");
-var _primitives = require("@ndla/primitives");
-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 UnknownEmbed = _ref => {
-  let {
-    embed
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-    color: "text.error",
-    asChild: true,
-    consumeCss: true,
-    "data-embed-type": "unknown",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      children: t("embed.unsupported", {
-        type: embed.resource
-      })
-    })
-  });
-};
-var _default = exports.default = UnknownEmbed;

package/lib/Embed/UuDisclaimerEmbed.js

@@ -1,94 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactI18next = require("react-i18next");
-var _react = require("@ark-ui/react");
-var _icons = require("@ndla/icons");
-var _primitives = require("@ndla/primitives");
-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 DisclaimerWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "3xsmall",
-    clear: "both"
-  }
-});
-const StyledIconButton = (0, _jsx2.styled)(_primitives.IconButton, {
-  base: {
-    alignSelf: "flex-end"
-  }
-});
-const StyledErrorWarningFill = (0, _jsx2.styled)(_icons.ErrorWarningFill, {
-  base: {
-    alignSelf: "flex-end",
-    fill: "icon.subtle"
-  }
-});
-const StyledPopoverContent = (0, _jsx2.styled)(_primitives.PopoverContent, {
-  base: {
-    width: "surface.xlarge",
-    maxHeight: "50vh",
-    overflowY: "auto"
-  }
-});
-const UuDisclaimerEmbed = _ref => {
-  let {
-    embed,
-    transformedDisclaimer,
-    children
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  if (embed.status === "error") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DisclaimerWrapper, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledErrorWarningFill, {
-        "aria-label": t("embed.embedError", {
-          type: t("embed.type.disclaimer")
-        }),
-        title: t("embed.embedError", {
-          type: t("embed.type.disclaimer")
-        })
-      }), children]
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(DisclaimerWrapper, {
-    role: "region",
-    "data-embed-type": "uu-disclaimer",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.PopoverRoot, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.PopoverTrigger, {
-        asChild: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledIconButton, {
-          size: "small",
-          variant: "secondary",
-          "aria-label": t("uuDisclaimer.title"),
-          title: t("uuDisclaimer.title"),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.AccessibilityFill, {})
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Portal, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPopoverContent, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            children: transformedDisclaimer
-          })
-        })
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      "data-uu-content": "",
-      children: children
-    })]
-  });
-};
-var _default = exports.default = UuDisclaimerEmbed;

package/lib/Embed/index.js

@@ -1,150 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "AudioEmbed", {
-  enumerable: true,
-  get: function () {
-    return _AudioEmbed.default;
-  }
-});
-Object.defineProperty(exports, "BlockConcept", {
-  enumerable: true,
-  get: function () {
-    return _ConceptEmbed.BlockConcept;
-  }
-});
-Object.defineProperty(exports, "BrightcoveEmbed", {
-  enumerable: true,
-  get: function () {
-    return _BrightcoveEmbed.default;
-  }
-});
-Object.defineProperty(exports, "CodeEmbed", {
-  enumerable: true,
-  get: function () {
-    return _CodeEmbed.default;
-  }
-});
-Object.defineProperty(exports, "ConceptEmbed", {
-  enumerable: true,
-  get: function () {
-    return _ConceptEmbed.ConceptEmbed;
-  }
-});
-Object.defineProperty(exports, "ConceptInlineTriggerButton", {
-  enumerable: true,
-  get: function () {
-    return _ConceptInlineTriggerButton.ConceptInlineTriggerButton;
-  }
-});
-Object.defineProperty(exports, "ContentLinkEmbed", {
-  enumerable: true,
-  get: function () {
-    return _ContentLinkEmbed.default;
-  }
-});
-Object.defineProperty(exports, "CopyrightEmbed", {
-  enumerable: true,
-  get: function () {
-    return _CopyrightEmbed.default;
-  }
-});
-Object.defineProperty(exports, "EmbedWrapper", {
-  enumerable: true,
-  get: function () {
-    return _EmbedWrapper.EmbedWrapper;
-  }
-});
-Object.defineProperty(exports, "ExternalEmbed", {
-  enumerable: true,
-  get: function () {
-    return _ExternalEmbed.default;
-  }
-});
-Object.defineProperty(exports, "FootnoteEmbed", {
-  enumerable: true,
-  get: function () {
-    return _FootnoteEmbed.default;
-  }
-});
-Object.defineProperty(exports, "H5pEmbed", {
-  enumerable: true,
-  get: function () {
-    return _H5pEmbed.default;
-  }
-});
-Object.defineProperty(exports, "IframeEmbed", {
-  enumerable: true,
-  get: function () {
-    return _IframeEmbed.default;
-  }
-});
-Object.defineProperty(exports, "ImageEmbed", {
-  enumerable: true,
-  get: function () {
-    return _ImageEmbed.default;
-  }
-});
-Object.defineProperty(exports, "InlineConcept", {
-  enumerable: true,
-  get: function () {
-    return _ConceptEmbed.InlineConcept;
-  }
-});
-Object.defineProperty(exports, "InlineTriggerButton", {
-  enumerable: true,
-  get: function () {
-    return _InlineTriggerButton.InlineTriggerButton;
-  }
-});
-Object.defineProperty(exports, "RelatedContentEmbed", {
-  enumerable: true,
-  get: function () {
-    return _RelatedContentEmbed.default;
-  }
-});
-Object.defineProperty(exports, "UnknownEmbed", {
-  enumerable: true,
-  get: function () {
-    return _UnknownEmbed.default;
-  }
-});
-Object.defineProperty(exports, "UuDisclaimerEmbed", {
-  enumerable: true,
-  get: function () {
-    return _UuDisclaimerEmbed.default;
-  }
-});
-Object.defineProperty(exports, "getCrop", {
-  enumerable: true,
-  get: function () {
-    return _ImageEmbed.getCrop;
-  }
-});
-Object.defineProperty(exports, "getFocalPoint", {
-  enumerable: true,
-  get: function () {
-    return _ImageEmbed.getFocalPoint;
-  }
-});
-var _ImageEmbed = _interopRequireWildcard(require("./ImageEmbed"));
-var _InlineTriggerButton = require("./InlineTriggerButton");
-var _AudioEmbed = _interopRequireDefault(require("./AudioEmbed"));
-var _H5pEmbed = _interopRequireDefault(require("./H5pEmbed"));
-var _ExternalEmbed = _interopRequireDefault(require("./ExternalEmbed"));
-var _IframeEmbed = _interopRequireDefault(require("./IframeEmbed"));
-var _FootnoteEmbed = _interopRequireDefault(require("./FootnoteEmbed"));
-var _BrightcoveEmbed = _interopRequireDefault(require("./BrightcoveEmbed"));
-var _ContentLinkEmbed = _interopRequireDefault(require("./ContentLinkEmbed"));
-var _RelatedContentEmbed = _interopRequireDefault(require("./RelatedContentEmbed"));
-var _ConceptEmbed = require("./ConceptEmbed");
-var _UnknownEmbed = _interopRequireDefault(require("./UnknownEmbed"));
-var _UuDisclaimerEmbed = _interopRequireDefault(require("./UuDisclaimerEmbed"));
-var _CopyrightEmbed = _interopRequireDefault(require("./CopyrightEmbed"));
-var _CodeEmbed = _interopRequireDefault(require("./CodeEmbed"));
-var _EmbedWrapper = require("./EmbedWrapper");
-var _ConceptInlineTriggerButton = require("./ConceptInlineTriggerButton");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }

package/lib/Embed/types.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/lib/ErrorMessage/ErrorMessage.js

@@ -1,101 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ErrorMessage = void 0;
-var _primitives = require("@ndla/primitives");
-var _safelink = require("@ndla/safelink");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Copyright (c) 2019-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: This has not been redesignet yet. This is just a rewrite of the previous design in panda
-const StyledErrorMessage = (0, _jsx2.styled)("article", {
-  base: {
-    textAlign: "center",
-    "& a": {
-      color: "text.strong"
-    },
-    "& h1": {
-      marginTop: "0"
-    }
-  }
-});
-const IllustrationWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    justifyContent: "center",
-    marginBottom: "medium",
-    tablet: {
-      marginTop: "xxlarge"
-    }
-  }
-});
-const Description = (0, _jsx2.styled)(_primitives.Text, {
-  base: {
-    marginBottom: "medium",
-    tablet: {
-      marginBottom: "xxlarge"
-    }
-  }
-});
-const CustomElementWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    marginBlock: "xxlarge"
-  }
-});
-const MessageWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    marginTop: "3xsmall"
-  }
-});
-const ErrorMessage = _ref => {
-  let {
-    children,
-    messages,
-    illustration,
-    illustrationElement,
-    customElement
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledErrorMessage, {
-    children: [!!illustration && /*#__PURE__*/(0, _jsxRuntime.jsx)(IllustrationWrapper, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-        src: illustration.url,
-        alt: illustration.altText
-      })
-    }), !!illustrationElement && /*#__PURE__*/(0, _jsxRuntime.jsx)(IllustrationWrapper, {
-      children: illustrationElement
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
-      children: messages.title
-    }), !!messages.description && /*#__PURE__*/(0, _jsxRuntime.jsx)(Description, {
-      children: messages.description
-    }), !!customElement && /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomElementWrapper, {
-      children: customElement
-    }), !!messages.linksTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-      children: messages.linksTitle
-    }), !!messages.back && /*#__PURE__*/(0, _jsxRuntime.jsx)(_safelink.SafeLink, {
-      to: `/#${encodeURI(messages.back)}`,
-      onClick: () => window.history.back(),
-      children: messages.back
-    }), !!messages.goToFrontPage && /*#__PURE__*/(0, _jsxRuntime.jsx)(MessageWrapper, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_safelink.SafeLink, {
-        to: "/",
-        children: messages.goToFrontPage
-      })
-    }), !!messages.logInFailed && /*#__PURE__*/(0, _jsxRuntime.jsx)(MessageWrapper, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_safelink.SafeLink, {
-        to: "/minndla",
-        children: messages.logInFailed
-      })
-    }), children]
-  });
-};
-exports.ErrorMessage = ErrorMessage;
-var _default = exports.default = ErrorMessage;

package/lib/ErrorMessage/index.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Copyright (c) 2019-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-var _default = exports.default = _ErrorMessage.default;

package/lib/FactBox/FactBox.js

@@ -1,184 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactI18next = require("react-i18next");
-var _icons = require("@ndla/icons");
-var _primitives = require("@ndla/primitives");
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * 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.
- *
- */
-
-const StyledAside = (0, _jsx2.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 = (0, _jsx2.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 = (0, _jsx2.styled)(_primitives.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__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    children,
-    open,
-    onOpenChange,
-    defaultOpen = false,
-    ...rest
-  } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  const [state, setState] = (0, _react.useState)(defaultOpen ? "open" : "closed");
-  const [overflowHidden, setOverflowHidden] = (0, _react.useState)(!defaultOpen);
-  const contentId = (0, _react.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 = (0, _react.useMemo)(() => {
-    return state === "closed" ? {
-      inert: typeof _react.default.use === "function" ? true : ""
-    } : {};
-  }, [state]);
-  (0, _react.useEffect)(() => {
-    if (open !== undefined) {
-      setState(open ? "open" : "closed");
-    }
-  }, [open]);
-  const onClick = (0, _react.useCallback)(() => {
-    const newState = state === "open" ? "closed" : "open";
-    setState(newState);
-    onOpenChange?.(newState === "open");
-  }, [state, onOpenChange]);
-  return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_icons.ArrowDownShortLine, {})
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledContent, {
-      id: contentId,
-      "data-state": state,
-      "aria-hidden": state === "closed",
-      ...inertAttribute,
-      children: children
-    })]
-  });
-});
-var _default = exports.default = FactBox;

package/lib/FactBox/index.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _FactBox = _interopRequireDefault(require("./FactBox"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * 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.
- *
- */
-var _default = exports.default = _FactBox.default;