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

package/es/Pitch/Pitch.js

@@ -1,83 +0,0 @@
-/**
- * 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.
- *
- */
-
-import parse from "html-react-parser";
-import { CardHeading, CardImage, CardRoot, Text } from "@ndla/primitives";
-import { SafeLink } from "@ndla/safelink";
-import { styled } from "@ndla/styled-system/jsx";
-import { linkOverlay } from "@ndla/styled-system/patterns";
-import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledCardHeading = styled(CardHeading, {
-  base: {
-    paddingBlockStart: "medium"
-  }
-});
-const StyledText = styled(Text, {
-  base: {
-    paddingBlockEnd: "medium"
-  }
-});
-const StyledCardRoot = styled(CardRoot, {
-  base: {
-    border: "0",
-    display: "flex",
-    flexDirection: "column",
-    gap: "small"
-  }
-});
-const StyledCardImage = styled(CardImage, {
-  base: {
-    aspectRatio: "16/9",
-    height: "unset"
-  }
-});
-export const Pitch = _ref => {
-  let {
-    title,
-    url,
-    metaImage,
-    path,
-    description
-  } = _ref;
-  const href = getPossiblyRelativeUrl(url, path);
-  return /*#__PURE__*/_jsx(StyledCardRoot, {
-    variant: "subtle",
-    "data-embed-type": "pitch",
-    asChild: true,
-    consumeCss: true,
-    children: /*#__PURE__*/_jsxs("div", {
-      children: [/*#__PURE__*/_jsx(StyledCardHeading, {
-        textStyle: "heading.small",
-        asChild: true,
-        consumeCss: true,
-        children: /*#__PURE__*/_jsx(SafeLink, {
-          to: href,
-          unstyled: true,
-          css: linkOverlay.raw(),
-          children: parse(title)
-        })
-      }), !!description && /*#__PURE__*/_jsx(StyledText, {
-        textStyle: "body.xlarge",
-        asChild: true,
-        consumeCss: true,
-        children: /*#__PURE__*/_jsx("div", {
-          children: parse(description)
-        })
-      }), /*#__PURE__*/_jsx(StyledCardImage, {
-        variant: "rounded",
-        src: metaImage.url,
-        alt: metaImage.alt,
-        sizes: "480px",
-        fallbackWidth: 300,
-        width: 550,
-        height: 310
-      })]
-    })
-  });
-};

package/es/Pitch/index.js

@@ -1,9 +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 { Pitch } from "./Pitch";

package/es/RelatedArticleList/RelatedArticleList.js

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

package/es/RelatedArticleList/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.
- *
- */
-
-import { RelatedArticle, RelatedArticleList } from "./RelatedArticleList";
-export { RelatedArticle };
-export default RelatedArticleList;

package/es/ResourceBox/ResourceBox.js

@@ -1,99 +0,0 @@
-/**
- * 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.
- *
- */
-
-import { breakpoints } from "@ndla/core";
-import { ShareBoxLine } from "@ndla/icons";
-import { Heading, Image, Text } from "@ndla/primitives";
-import { SafeLinkButton } from "@ndla/safelink";
-import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Container = 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 = styled("div", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start",
-    gap: "xsmall",
-    flex: "1",
-    tabletDown: {
-      padding: "xsmall"
-    }
-  }
-});
-const StyledImage = styled(Image, {
-  base: {
-    objectFit: "cover",
-    borderRadius: "xsmall",
-    width: "fit-content",
-    aspectRatio: "1/1",
-    tabletDown: {
-      width: "100%",
-      borderRadius: "0"
-    }
-  }
-});
-const StyledText = styled(Text, {
-  base: {
-    flex: "1"
-  }
-});
-export const ResourceBox = _ref => {
-  let {
-    image,
-    title,
-    caption,
-    url,
-    buttonText
-  } = _ref;
-  return /*#__PURE__*/_jsxs(Container, {
-    children: [image ? /*#__PURE__*/_jsx(StyledImage, {
-      src: image.src,
-      alt: image.alt,
-      sizes: `(min-width: ${breakpoints.desktop}) 150px, (max-width: ${breakpoints.tablet} ) 400px, 200px`,
-      variant: "rounded"
-    }) : null, /*#__PURE__*/_jsxs(ContentWrapper, {
-      children: [/*#__PURE__*/_jsx(Heading, {
-        textStyle: "label.large",
-        fontWeight: "bold",
-        asChild: true,
-        consumeCss: true,
-        children: /*#__PURE__*/_jsx("h3", {
-          children: title
-        })
-      }), /*#__PURE__*/_jsx(StyledText, {
-        textStyle: "body.medium",
-        children: caption
-      }), /*#__PURE__*/_jsxs(SafeLinkButton, {
-        to: url,
-        target: "_blank",
-        variant: "secondary",
-        children: [buttonText, /*#__PURE__*/_jsx(ShareBoxLine, {})]
-      })]
-    })]
-  });
-};
-export default ResourceBox;

package/es/ResourceBox/index.js

@@ -1,10 +0,0 @@
-/**
- * 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.
- *
- */
-
-import ResourceBox from "./ResourceBox";
-export { ResourceBox };

package/es/TagSelector/TagSelector.js

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

package/es/ZendeskButton/ZendeskButton.js

@@ -1,55 +0,0 @@
-/**
- * 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.
- *
- */
-
-import { forwardRef, useState } from "react";
-import { Button } from "@ndla/primitives";
-
-// TODO: Let's consider abandoning `disabled` on the button here. It should instead just open/close the widget based on its current state.
-import { jsx as _jsx } from "react/jsx-runtime";
-export const ZendeskButton = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    locale,
-    variant = "secondary",
-    widgetKey,
-    children,
-    ...rest
-  } = _ref;
-  const [loading, setLoading] = 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__*/_jsx(Button, {
-    onClick: handleClick,
-    variant: variant,
-    id: "zendeskButton",
-    disabled: loading,
-    ...rest,
-    ref: ref,
-    children: children
-  });
-});

package/es/i18n/formatNestedMessages.js

@@ -1,25 +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 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;
-};

package/es/i18n/i18n.js

@@ -1,35 +0,0 @@
-/**
- * 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.
- *
- */
-
-import i18n from "i18next";
-import { initReactI18next } from "react-i18next";
-import messagesEN from "../locale/messages-en";
-import messagesNB from "../locale/messages-nb";
-import messagesNN from "../locale/messages-nn";
-import messagesSE from "../locale/messages-se";
-export const supportedTranslationLanguages = ["nb", "nn", "en", "se"];
-const i18nInstance = i18n.use(initReactI18next);
-i18nInstance.init({
-  fallbackLng: "nb",
-  supportedLngs: supportedTranslationLanguages,
-  resources: {
-    en: {
-      translation: messagesEN
-    },
-    nn: {
-      translation: messagesNN
-    },
-    nb: {
-      translation: messagesNB
-    },
-    se: {
-      translation: messagesSE
-    }
-  }
-});
-export { i18nInstance };

package/es/i18n/index.js

@@ -1,11 +0,0 @@
-/**
- * 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.
- *
- */
-
-export { i18nInstance } from "./i18n";
-export { formatNestedMessages } from "./formatNestedMessages";
-export { useComboboxTranslations, useTagSelectorTranslations, useTagsInputTranslations, usePaginationTranslations, useAudioSearchTranslations, useImageSearchTranslations, useVideoSearchTranslations } from "./useComponentTranslations";