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

package/es/Embed/ImageEmbed.js

@@ -1,238 +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 parse from "html-react-parser";
-import { useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { AddLine } from "@ndla/icons";
-import { Figure, Image } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { EmbedByline } from "../LicenseByline";
-import { licenseAttributes } from "../utils/licenseAttributes";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const getLicenseCredits = copyright => {
-  return {
-    creators: copyright?.creators ?? [],
-    rightsholders: copyright?.rightsholders ?? [],
-    processors: copyright?.processors ?? []
-  };
-};
-const getFigureProps = (size, float) => {
-  const actualFloat = float === "left" ? "left" : float === "right" ? "right" : undefined;
-  const replacedSize = size?.replace("-hide-byline", "") ?? "full";
-  const actualSize = replacedSize === "fullwidth" ? "full" : replacedSize;
-  return {
-    float: actualFloat,
-    // Figure expects you to set a size when floating. If you don't, the figure will simply take up the available width. Fallback to medium in those cases.
-    size: actualSize === "full" && float ? "medium" : actualSize
-  };
-};
-const getSizes = (size, align) => {
-  if (align && size === "full") {
-    return "(min-width: 1024px) 512px, (min-width: 768px) 350px, 100vw";
-  }
-  if (align && size === "small") {
-    return "(min-width: 1024px) 350px, (min-width: 768px) 180px, 100vw";
-  }
-  if (align && size === "xsmall") {
-    return "(min-width: 1024px) 180px, (min-width: 768px) 180px, 100vw";
-  }
-  return "(min-width: 1024px) 1024px, 100vw";
-};
-export const getFocalPoint = data => {
-  const focalX = Number.parseFloat(data.focalX ?? "");
-  const focalY = Number.parseFloat(data.focalY ?? "");
-  if (!Number.isNaN(focalX) && !Number.isNaN(focalY)) {
-    return {
-      x: focalX,
-      y: focalY
-    };
-  }
-  return undefined;
-};
-export const getCrop = data => {
-  const lowerRightX = Number.parseFloat(data.lowerRightX ?? "");
-  const lowerRightY = Number.parseFloat(data.lowerRightY ?? "");
-  const upperLeftX = Number.parseFloat(data.upperLeftX ?? "");
-  const upperLeftY = Number.parseFloat(data.upperLeftY ?? "");
-  if (!Number.isNaN(lowerRightX) && !Number.isNaN(lowerRightY) && !Number.isNaN(upperLeftX) && !Number.isNaN(upperLeftY)) {
-    return {
-      startX: lowerRightX,
-      startY: lowerRightY,
-      endX: upperLeftX,
-      endY: upperLeftY
-    };
-  }
-  return undefined;
-};
-const expandedSizes = "(min-width: 1024px) 1024px, 100vw";
-const ImageWrapper = styled("div", {
-  base: {
-    overflow: "hidden",
-    position: "relative",
-    width: "100%",
-    "& img": {
-      width: "100%"
-    }
-  },
-  variants: {
-    svg: {
-      true: {
-        display: "flex",
-        justifyContent: "center"
-      },
-      false: {}
-    },
-    border: {
-      true: {
-        border: "1px solid",
-        borderColor: "stroke.subtle",
-        borderRadius: "xsmall",
-        "& img": {
-          borderRadius: "0"
-        }
-      },
-      false: {}
-    },
-    expandable: {
-      true: {
-        cursor: "pointer"
-      },
-      false: {}
-    }
-  }
-});
-const StyledFigure = styled(Figure, {
-  base: {
-    zIndex: "docked",
-    _hover: {
-      "& [data-byline-button]": {
-        background: "background.default"
-      },
-      "& button[data-expanded]": {
-        transform: "scale(1.2)"
-      }
-    },
-    "& button[data-expanded='true']": {
-      "& svg": {
-        transform: "rotate(-45deg)"
-      }
-    }
-  }
-});
-const ExpandButton = styled("button", {
-  base: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    cursor: "pointer",
-    position: "absolute",
-    padding: "0",
-    top: "xsmall",
-    right: "xsmall",
-    width: "medium",
-    height: "medium",
-    border: "2px solid",
-    borderColor: "background.default",
-    transitionProperty: "transform, background-color, color",
-    transitionDuration: "normal",
-    transitionTimingFunction: "ease-out",
-    color: "background.default",
-    backgroundColor: "surface.action",
-    borderRadius: "large",
-    "& svg": {
-      transitionProperty: "transform",
-      transitionDuration: "normal",
-      transitionTimingFunction: "ease-out"
-    },
-    tabletDown: {
-      display: "none"
-    }
-  }
-}, {
-  defaultProps: {
-    type: "button"
-  }
-});
-const ImageEmbed = _ref => {
-  let {
-    embed,
-    previewAlt,
-    lang,
-    renderContext = "article",
-    children
-  } = _ref;
-  const [imageSizes, setImageSizes] = useState(undefined);
-  const figureProps = getFigureProps(embed.embedData.size, embed.embedData.align);
-  const {
-    t
-  } = useTranslation();
-  const parsedDescription = useMemo(() => {
-    if (embed.embedData.caption || renderContext === "article") {
-      return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;
-    }
-    if (embed.status === "success" && embed.data.caption.caption) {
-      return parse(embed.data.caption.caption);
-    }
-  }, [embed, renderContext]);
-  if (embed.status === "error") {
-    return /*#__PURE__*/_jsx(EmbedErrorPlaceholder, {
-      type: "image",
-      figureType: figureProps?.size,
-      float: figureProps?.float
-    });
-  }
-  const {
-    data,
-    embedData
-  } = embed;
-  const altText = embedData.alt || "";
-  const sizes = getSizes(embedData.size, embedData.align);
-  const focalPoint = getFocalPoint(embedData);
-  const crop = getCrop(embedData);
-  const toggleImageSize = () => {
-    setImageSizes(sizes => !sizes ? expandedSizes : undefined);
-  };
-  const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);
-  const figureSize = figureProps?.float ? figureProps?.size ?? "medium" : "full";
-  return /*#__PURE__*/_jsxs(StyledFigure, {
-    float: figureProps?.float,
-    size: imageSizes ? "full" : figureSize,
-    "data-embed-type": "image",
-    ...licenseProps,
-    children: [children, /*#__PURE__*/_jsxs(ImageWrapper, {
-      border: embedData.border === "true",
-      expandable: !!figureProps?.float,
-      children: [/*#__PURE__*/_jsx(Image, {
-        focalPoint: focalPoint,
-        contentType: data.image.contentType,
-        crop: crop,
-        sizes: imageSizes ?? sizes,
-        alt: altText,
-        src: data.image.imageUrl,
-        lang: lang,
-        onClick: figureProps?.float ? toggleImageSize : undefined,
-        variant: "rounded"
-      }), (embedData.align === "right" || embedData.align === "left") && /*#__PURE__*/_jsx(ExpandButton, {
-        "aria-label": t(`license.images.itemImage.zoom${imageSizes ? "Out" : ""}ImageButtonLabel`),
-        onClick: toggleImageSize,
-        "data-expanded": !!imageSizes,
-        children: /*#__PURE__*/_jsx(AddLine, {})
-      })]
-    }), /*#__PURE__*/_jsx(EmbedByline, {
-      type: "image",
-      copyright: data.copyright,
-      description: parsedDescription,
-      hideDescription: embedData.hideCaption === "true",
-      hideCopyright: embedData.hideByline === "true",
-      visibleAlt: previewAlt ? embed.embedData.alt : ""
-    })]
-  });
-};
-export default ImageEmbed;

package/es/Embed/InlineTriggerButton.js

@@ -1,37 +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, useCallback, useRef } from "react";
-import { styled } from "@ndla/styled-system/jsx";
-import { composeRefs } from "@ndla/util";
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledSpan = styled("span", {
-  base: {}
-});
-export const InlineTriggerButton = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    onClick,
-    ...props
-  } = _ref;
-  const spanRef = useRef(null);
-
-  // Emulate a button click when pressing Enter or Space
-  const onKeyboardEvent = useCallback(event => {
-    if (event.key === "Enter" || event.key === " ") {
-      spanRef.current?.click();
-    }
-  }, []);
-  return /*#__PURE__*/_jsx(StyledSpan, {
-    ref: composeRefs(spanRef, ref),
-    onKeyUp: onKeyboardEvent,
-    onClick: onClick,
-    role: "button",
-    tabIndex: 0,
-    ...props
-  });
-});

package/es/Embed/RelatedContentEmbed.js

@@ -1,55 +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 { useTranslation } from "react-i18next";
-import { contentTypeMapping } from "../model/ContentType";
-import { RelatedArticle } from "../RelatedArticleList/RelatedArticleList";
-import { jsx as _jsx } from "react/jsx-runtime";
-const RelatedContentEmbed = _ref => {
-  let {
-    embed,
-    isOembed,
-    subject,
-    ndlaFrontendDomain
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  if (embed.status === "error") {
-    return null;
-  }
-  const {
-    data,
-    embedData
-  } = embed;
-  if (embedData.articleId && data) {
-    const typeId = data.resource?.resourceTypes.find(rt => contentTypeMapping[rt.id])?.id;
-    const type = typeId ? 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__*/_jsx(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__*/_jsx(RelatedArticle, {
-      title: embedData.title ?? "",
-      introduction: "",
-      to: embedData.url,
-      target: "_blank",
-      type: "external",
-      linkInfo: `${t("related.linkInfo")} ${embedData.urlDomain}`
-    });
-  }
-  return null;
-};
-export default RelatedContentEmbed;

package/es/Embed/UnknownEmbed.js

@@ -1,31 +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 { useTranslation } from "react-i18next";
-import { Text } from "@ndla/primitives";
-import { jsx as _jsx } from "react/jsx-runtime";
-const UnknownEmbed = _ref => {
-  let {
-    embed
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  return /*#__PURE__*/_jsx(Text, {
-    color: "text.error",
-    asChild: true,
-    consumeCss: true,
-    "data-embed-type": "unknown",
-    children: /*#__PURE__*/_jsx("span", {
-      children: t("embed.unsupported", {
-        type: embed.resource
-      })
-    })
-  });
-};
-export default UnknownEmbed;

package/es/Embed/UuDisclaimerEmbed.js

@@ -1,88 +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 { useTranslation } from "react-i18next";
-import { Portal } from "@ark-ui/react";
-import { AccessibilityFill, ErrorWarningFill } from "@ndla/icons";
-import { IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DisclaimerWrapper = styled("div", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "3xsmall",
-    clear: "both"
-  }
-});
-const StyledIconButton = styled(IconButton, {
-  base: {
-    alignSelf: "flex-end"
-  }
-});
-const StyledErrorWarningFill = styled(ErrorWarningFill, {
-  base: {
-    alignSelf: "flex-end",
-    fill: "icon.subtle"
-  }
-});
-const StyledPopoverContent = styled(PopoverContent, {
-  base: {
-    width: "surface.xlarge",
-    maxHeight: "50vh",
-    overflowY: "auto"
-  }
-});
-const UuDisclaimerEmbed = _ref => {
-  let {
-    embed,
-    transformedDisclaimer,
-    children
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  if (embed.status === "error") {
-    return /*#__PURE__*/_jsxs(DisclaimerWrapper, {
-      children: [/*#__PURE__*/_jsx(StyledErrorWarningFill, {
-        "aria-label": t("embed.embedError", {
-          type: t("embed.type.disclaimer")
-        }),
-        title: t("embed.embedError", {
-          type: t("embed.type.disclaimer")
-        })
-      }), children]
-    });
-  }
-  return /*#__PURE__*/_jsxs(DisclaimerWrapper, {
-    role: "region",
-    "data-embed-type": "uu-disclaimer",
-    children: [/*#__PURE__*/_jsxs(PopoverRoot, {
-      children: [/*#__PURE__*/_jsx(PopoverTrigger, {
-        asChild: true,
-        children: /*#__PURE__*/_jsx(StyledIconButton, {
-          size: "small",
-          variant: "secondary",
-          "aria-label": t("uuDisclaimer.title"),
-          title: t("uuDisclaimer.title"),
-          children: /*#__PURE__*/_jsx(AccessibilityFill, {})
-        })
-      }), /*#__PURE__*/_jsx(Portal, {
-        children: /*#__PURE__*/_jsx(StyledPopoverContent, {
-          children: /*#__PURE__*/_jsx("div", {
-            children: transformedDisclaimer
-          })
-        })
-      })]
-    }), /*#__PURE__*/_jsx("div", {
-      "data-uu-content": "",
-      children: children
-    })]
-  });
-};
-export default UuDisclaimerEmbed;

package/es/Embed/index.js

@@ -1,25 +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 ImageEmbed, getCrop, getFocalPoint } from "./ImageEmbed";
-export { InlineTriggerButton } from "./InlineTriggerButton";
-export { default as AudioEmbed } from "./AudioEmbed";
-export { default as H5pEmbed } from "./H5pEmbed";
-export { default as ExternalEmbed } from "./ExternalEmbed";
-export { default as IframeEmbed } from "./IframeEmbed";
-export { default as FootnoteEmbed } from "./FootnoteEmbed";
-export { default as BrightcoveEmbed } from "./BrightcoveEmbed";
-export { default as ContentLinkEmbed } from "./ContentLinkEmbed";
-export { default as RelatedContentEmbed } from "./RelatedContentEmbed";
-export { ConceptEmbed, InlineConcept, BlockConcept } from "./ConceptEmbed";
-export { default as UnknownEmbed } from "./UnknownEmbed";
-export { default as UuDisclaimerEmbed } from "./UuDisclaimerEmbed";
-export { default as CopyrightEmbed } from "./CopyrightEmbed";
-export { default as CodeEmbed } from "./CodeEmbed";
-export { EmbedWrapper } from "./EmbedWrapper";
-export { ConceptInlineTriggerButton } from "./ConceptInlineTriggerButton";

package/es/Embed/types.js

@@ -1 +0,0 @@
-export {};

package/es/ErrorMessage/ErrorMessage.js

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

package/es/ErrorMessage/index.js

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