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

package/lib/RelatedArticleList/RelatedArticleList.js

@@ -1,143 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RelatedArticleList = exports.RelatedArticle = 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 _ContentTypeBadge = require("../ContentTypeBadge/ContentTypeBadge");
-var _ContentType = require("../model/ContentType");
-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 StyledSpan = (0, _jsx2.styled)("span", {
-  base: {
-    display: "flex",
-    gap: "3xsmall"
-  }
-});
-const RelatedArticle = _ref => {
-  let {
-    title,
-    introduction,
-    to,
-    linkInfo = "",
-    target = "",
-    type = _ContentType.contentTypes.SUBJECT_MATERIAL
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.CardRoot, {
-    "data-embed-type": "related-article",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.CardContent, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ContentTypeBadge.ContentTypeBadge, {
-        contentType: type
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.CardHeading, {
-        asChild: true,
-        consumeCss: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_safelink.SafeLink, {
-            unstyled: true,
-            to: to,
-            target: target,
-            rel: linkInfo ? "noopener noreferrer" : undefined,
-            css: _patterns.linkOverlay.raw(),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledSpan, {
-              children: [title, target === "_blank" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ExternalLinkLine, {})]
-            })
-          })
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-        dangerouslySetInnerHTML: {
-          __html: introduction
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
-        color: "text.subtle",
-        textStyle: "label.small",
-        children: linkInfo
-      })]
-    })
-  });
-};
-exports.RelatedArticle = RelatedArticle;
-const HeadingWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    width: "100%",
-    justifyContent: "space-between",
-    alignItems: "center",
-    alignSelf: "flex-start"
-  }
-});
-const ArticlesWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    display: "grid",
-    width: "100%",
-    gridTemplateColumns: "repeat(2, 1fr)",
-    gap: "medium",
-    tabletDown: {
-      gridTemplateColumns: "1fr"
-    }
-  }
-});
-const StyledSection = (0, _jsx2.styled)("section", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    gap: "medium",
-    clear: "both"
-  }
-});
-const StyledButton = (0, _jsx2.styled)(_primitives.Button, {
-  base: {
-    marginBlockStart: "xsmall"
-  }
-});
-const RelatedArticleList = _ref2 => {
-  let {
-    children = [],
-    articleCount,
-    headingLevel: HeadingElement = "h2",
-    headingButtons,
-    ...rest
-  } = _ref2;
-  const [expanded, setExpanded] = (0, _react.useState)(false);
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
-  const childCount = (0, _react.useMemo)(() => articleCount ?? _react.Children.count(children), [children, articleCount]);
-  const childrenToShow = (0, _react.useMemo)(() => childCount > 2 && !expanded ? children?.slice(0, 2) : children, [childCount, children, expanded]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledSection, {
-    ...rest,
-    "data-embed-type": "related-content-list",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(HeadingWrapper, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
-        asChild: true,
-        consumeCss: true,
-        textStyle: "title.large",
-        fontWeight: "bold",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(HeadingElement, {
-          children: t("related.title")
-        })
-      }), headingButtons]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticlesWrapper, {
-      children: childrenToShow
-    }), childCount > 2 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledButton, {
-      variant: "secondary",
-      onClick: () => setExpanded(p => !p),
-      children: t(`related.show${expanded ? "Less" : "More"}`)
-    }) : null]
-  });
-};
-exports.RelatedArticleList = RelatedArticleList;

package/lib/RelatedArticleList/index.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "RelatedArticle", {
-  enumerable: true,
-  get: function () {
-    return _RelatedArticleList.RelatedArticle;
-  }
-});
-exports.default = void 0;
-var _RelatedArticleList = require("./RelatedArticleList");
-/**
- * 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.
- *
- */
-var _default = exports.default = _RelatedArticleList.RelatedArticleList;

package/lib/ResourceBox/ResourceBox.js

@@ -1,106 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ResourceBox = void 0;
-var _core = require("@ndla/core");
-var _icons = require("@ndla/icons");
-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) 2022-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 Container = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    padding: "medium",
-    borderRadius: "xsmall",
-    border: "1px solid",
-    borderColor: "stroke.default",
-    boxShadow: "full",
-    marginBlockEnd: "medium",
-    gap: "medium",
-    tabletWideDown: {
-      padding: "xsmall"
-    },
-    tabletDown: {
-      flexDirection: "column",
-      gap: "0",
-      padding: "0"
-    }
-  }
-});
-const ContentWrapper = (0, _jsx2.styled)("div", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start",
-    gap: "xsmall",
-    flex: "1",
-    tabletDown: {
-      padding: "xsmall"
-    }
-  }
-});
-const StyledImage = (0, _jsx2.styled)(_primitives.Image, {
-  base: {
-    objectFit: "cover",
-    borderRadius: "xsmall",
-    width: "fit-content",
-    aspectRatio: "1/1",
-    tabletDown: {
-      width: "100%",
-      borderRadius: "0"
-    }
-  }
-});
-const StyledText = (0, _jsx2.styled)(_primitives.Text, {
-  base: {
-    flex: "1"
-  }
-});
-const ResourceBox = _ref => {
-  let {
-    image,
-    title,
-    caption,
-    url,
-    buttonText
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
-    children: [image ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledImage, {
-      src: image.src,
-      alt: image.alt,
-      sizes: `(min-width: ${_core.breakpoints.desktop}) 150px, (max-width: ${_core.breakpoints.tablet} ) 400px, 200px`,
-      variant: "rounded"
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(ContentWrapper, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
-        textStyle: "label.large",
-        fontWeight: "bold",
-        asChild: true,
-        consumeCss: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
-          children: title
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
-        textStyle: "body.medium",
-        children: caption
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_safelink.SafeLinkButton, {
-        to: url,
-        target: "_blank",
-        variant: "secondary",
-        children: [buttonText, /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ShareBoxLine, {})]
-      })]
-    })]
-  });
-};
-exports.ResourceBox = ResourceBox;
-var _default = exports.default = ResourceBox;

package/lib/ResourceBox/index.js

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

package/lib/TagSelector/TagSelector.js

@@ -1,150 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TagSelectorTrigger = exports.TagSelectorRoot = exports.TagSelectorLabel = exports.TagSelectorItemInput = exports.TagSelectorInputBase = exports.TagSelectorInput = exports.TagSelectorControl = exports.TagSelectorClearTrigger = void 0;
-var _react = require("react");
-var _react2 = require("@ark-ui/react");
-var _icons = require("@ndla/icons");
-var _primitives = require("@ndla/primitives");
-var _util = require("@ndla/util");
-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 TagSelectorRoot = _ref => {
-  let {
-    allowCustomValue = true,
-    multiple = true,
-    selectionBehavior = "clear",
-    editable,
-    addOnPaste = false,
-    onValueChange,
-    children,
-    value,
-    translations,
-    ...rest
-  } = _ref;
-  const ids = {
-    root: (0, _react.useId)(),
-    input: (0, _react.useId)(),
-    control: (0, _react.useId)()
-  };
-  const controlRef = (0, _react.useRef)(undefined);
-  (0, _react.useEffect)(() => {
-    if (!controlRef.current) {
-      controlRef.current = document.getElementById(ids.control);
-    }
-  }, [ids.control]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.ComboboxRoot, {
-    ids: ids,
-    asChild: true,
-    allowCustomValue: allowCustomValue,
-    multiple: multiple,
-    selectionBehavior: selectionBehavior,
-    onValueChange: onValueChange,
-    translations: translations,
-    onPointerDownOutside: event => {
-      if ((0, _util.contains)(controlRef.current, event.detail.originalEvent.target)) {
-        event.preventDefault();
-      }
-    },
-    value: value,
-    ...rest,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TagSelectorTagsInputRoot, {
-      ids: ids,
-      value: value,
-      editable: editable,
-      onValueChange: onValueChange,
-      addOnPaste: addOnPaste,
-      translations: translations,
-      children: children
-    })
-  });
-};
-exports.TagSelectorRoot = TagSelectorRoot;
-const TagSelectorTagsInputRoot = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const comboboxApi = (0, _react2.useComboboxContext)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TagsInputRoot, {
-    ref: ref,
-    onInputValueChange: details => comboboxApi.setInputValue(details.inputValue),
-    ...props
-  });
-});
-const TagSelectorLabel = exports.TagSelectorLabel = _primitives.ComboboxLabel;
-const TagSelectorItemInput = exports.TagSelectorItemInput = _primitives.TagsInputItemInput;
-const TagSelectorTrigger = exports.TagSelectorTrigger = _primitives.ComboboxTrigger;
-const TagSelectorControl = exports.TagSelectorControl = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
-  let {
-    children,
-    ...props
-  } = _ref2;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.ComboboxControl, {
-    ref: ref,
-    asChild: true,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TagsInputControl, {
-      ...props,
-      children: children
-    })
-  });
-});
-const TagSelectorClearTrigger = exports.TagSelectorClearTrigger = _primitives.ComboboxClearTrigger;
-// If you need to modify the TagsInputItem, you can use this.
-const TagSelectorInputBase = exports.TagSelectorInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
-  let {
-    children,
-    ...props
-  } = _ref3;
-  const tagsApi = (0, _react2.useTagsInputContext)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.ComboboxInput, {
-    ref: ref,
-    asChild: true,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TagsInputInput, {
-      onKeyDown: event => {
-        if (event.key === "Enter") {
-          tagsApi.addValue(tagsApi.inputValue);
-        }
-      },
-      ...props,
-      children: children
-    })
-  });
-});
-const TagSelectorInput = exports.TagSelectorInput = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
-  let {
-    children,
-    ...props
-  } = _ref4;
-  const tagsApi = (0, _react2.useTagsInputContext)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [tagsApi.value.map((value, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.TagsInputItem, {
-      index: index,
-      value: value,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.TagsInputItemPreview, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TagsInputItemText, {
-          children: value
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TagsInputItemDeleteTrigger, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CloseLine, {})
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TagsInputItemInput, {})]
-    }, value)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.ComboboxInput, {
-      ref: ref,
-      asChild: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.TagsInputInput, {
-        onKeyDown: event => {
-          if (event.key === "Enter") {
-            tagsApi.addValue(tagsApi.inputValue);
-          }
-        },
-        ...props,
-        children: children
-      })
-    })]
-  });
-});

package/lib/ZendeskButton/ZendeskButton.js

@@ -1,61 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ZendeskButton = void 0;
-var _react = require("react");
-var _primitives = require("@ndla/primitives");
-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.
- *
- */
-
-// TODO: Let's consider abandoning `disabled` on the button here. It should instead just open/close the widget based on its current state.
-
-const ZendeskButton = exports.ZendeskButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    locale,
-    variant = "secondary",
-    widgetKey,
-    children,
-    ...rest
-  } = _ref;
-  const [loading, setLoading] = (0, _react.useState)(false);
-  const handleClick = () => {
-    if (window && !window.zE) {
-      setLoading(true);
-      // Asynchronously load zendesk scripts for better performance
-      const script = document.createElement("script");
-      script.id = "ze-snippet";
-      script.type = "text/javascript";
-      script.async = true;
-      script.onload = () => {
-        if (window.zE) {
-          window.zE("webWidget", "setLocale", locale);
-          window.zE("webWidget:on", "close", () => {
-            setLoading(false);
-          });
-          window.zE("webWidget", "open");
-        }
-      };
-      script.src = `https://static.zdassets.com/ekr/snippet.js?key=${widgetKey}`;
-      document.body.appendChild(script);
-    } else if (window?.zE) {
-      window.zE("webWidget", "open");
-    }
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Button, {
-    onClick: handleClick,
-    variant: variant,
-    id: "zendeskButton",
-    disabled: loading,
-    ...rest,
-    ref: ref,
-    children: children
-  });
-});

package/lib/i18n/formatNestedMessages.js

@@ -1,32 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.formatNestedMessages = void 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.
- *
- */
-
-const formatNestedMessages = function (phrases) {
-  let formattedMessages = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  let prefix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
-  const messages = formattedMessages;
-  Object.keys(phrases).forEach(key => {
-    const value = phrases[key];
-    if ({}.hasOwnProperty.call(phrases, key)) {
-      const keyWithPrefix = prefix ? `${prefix}.${key}` : key;
-      if (typeof value === "object") {
-        formatNestedMessages(value, formattedMessages, keyWithPrefix);
-      } else {
-        messages[keyWithPrefix] = value;
-      }
-    }
-  });
-  return messages;
-};
-exports.formatNestedMessages = formatNestedMessages;

package/lib/i18n/i18n.js

@@ -1,41 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.supportedTranslationLanguages = exports.i18nInstance = void 0;
-var _i18next = _interopRequireDefault(require("i18next"));
-var _reactI18next = require("react-i18next");
-var _messagesEn = _interopRequireDefault(require("../locale/messages-en"));
-var _messagesNb = _interopRequireDefault(require("../locale/messages-nb"));
-var _messagesNn = _interopRequireDefault(require("../locale/messages-nn"));
-var _messagesSe = _interopRequireDefault(require("../locale/messages-se"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Copyright (c) 2021-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 supportedTranslationLanguages = exports.supportedTranslationLanguages = ["nb", "nn", "en", "se"];
-const i18nInstance = exports.i18nInstance = _i18next.default.use(_reactI18next.initReactI18next);
-i18nInstance.init({
-  fallbackLng: "nb",
-  supportedLngs: supportedTranslationLanguages,
-  resources: {
-    en: {
-      translation: _messagesEn.default
-    },
-    nn: {
-      translation: _messagesNn.default
-    },
-    nb: {
-      translation: _messagesNb.default
-    },
-    se: {
-      translation: _messagesSe.default
-    }
-  }
-});

package/lib/i18n/index.js

@@ -1,62 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "formatNestedMessages", {
-  enumerable: true,
-  get: function () {
-    return _formatNestedMessages.formatNestedMessages;
-  }
-});
-Object.defineProperty(exports, "i18nInstance", {
-  enumerable: true,
-  get: function () {
-    return _i18n.i18nInstance;
-  }
-});
-Object.defineProperty(exports, "useAudioSearchTranslations", {
-  enumerable: true,
-  get: function () {
-    return _useComponentTranslations.useAudioSearchTranslations;
-  }
-});
-Object.defineProperty(exports, "useComboboxTranslations", {
-  enumerable: true,
-  get: function () {
-    return _useComponentTranslations.useComboboxTranslations;
-  }
-});
-Object.defineProperty(exports, "useImageSearchTranslations", {
-  enumerable: true,
-  get: function () {
-    return _useComponentTranslations.useImageSearchTranslations;
-  }
-});
-Object.defineProperty(exports, "usePaginationTranslations", {
-  enumerable: true,
-  get: function () {
-    return _useComponentTranslations.usePaginationTranslations;
-  }
-});
-Object.defineProperty(exports, "useTagSelectorTranslations", {
-  enumerable: true,
-  get: function () {
-    return _useComponentTranslations.useTagSelectorTranslations;
-  }
-});
-Object.defineProperty(exports, "useTagsInputTranslations", {
-  enumerable: true,
-  get: function () {
-    return _useComponentTranslations.useTagsInputTranslations;
-  }
-});
-Object.defineProperty(exports, "useVideoSearchTranslations", {
-  enumerable: true,
-  get: function () {
-    return _useComponentTranslations.useVideoSearchTranslations;
-  }
-});
-var _i18n = require("./i18n");
-var _formatNestedMessages = require("./formatNestedMessages");
-var _useComponentTranslations = require("./useComponentTranslations");