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

package/es/CampaignBlock/CampaignBlock.js

@@ -1,180 +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 { ArrowRightLine } from "@ndla/icons";
-import { Text } from "@ndla/primitives";
-import { SafeLinkButton } from "@ndla/safelink";
-import { styled } from "@ndla/styled-system/jsx";
-import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Wrapper = styled("div", {
-  base: {
-    width: "100%",
-    height: "100%",
-    containerType: "inline-size"
-  }
-});
-const Container = styled("div", {
-  base: {
-    display: "grid",
-    gridTemplateColumns: "1fr",
-    border: "1px solid",
-    borderColor: "stroke.default",
-    backgroundColor: "background.default",
-    borderRadius: "xsmall",
-    boxShadow: "full",
-    overflow: "hidden"
-  },
-  variants: {
-    imageSide: {
-      left: {
-        "@/tablet": {
-          gridTemplateColumns: "minmax(230px, 455px) auto" //required for campaign block in myNdla
-        },
-        "@supports not (container-type: inline-size)": {
-          tabletWide: {
-            gridTemplateColumns: "minmax(230px, 455px) auto"
-          }
-        }
-      },
-      right: {
-        "@/tablet": {
-          gridTemplateColumns: "auto minmax(230px, 455px)" //required for campaign block in myNdla
-        },
-        "@supports not (container-type: inline-size)": {
-          tabletWide: {
-            gridTemplateColumns: "auto minmax(230px, 455px)"
-          }
-        }
-      }
-    },
-    background: {
-      neutral: {},
-      brand1: {
-        backgroundColor: "surface.brand.1"
-      },
-      brand3: {
-        backgroundColor: "surface.brand.3"
-      }
-    }
-  },
-  defaultVariants: {
-    imageSide: "left",
-    background: "neutral"
-  }
-});
-const StyledImg = styled("img", {
-  base: {
-    objectFit: "cover",
-    width: "100%",
-    height: "215px",
-    "@/tablet": {
-      height: "340px"
-    },
-    "@supports not (container-type: inline-size)": {
-      tablet: {
-        height: "265px"
-      },
-      tabletWide: {
-        height: "340px"
-      }
-    },
-    backgroundColor: "background.default"
-  }
-});
-const ContentWrapper = styled("div", {
-  base: {
-    width: "100%",
-    display: "flex",
-    flexDirection: "column",
-    gap: "medium",
-    alignItems: "flex-start",
-    justifyContent: "center",
-    paddingBlock: "medium",
-    paddingInline: "medium",
-    position: "relative"
-  }
-});
-const StyledText = styled(Text, {
-  base: {
-    tablet: {
-      display: "block",
-      overflow: "hidden",
-      position: "relative",
-      lineClamp: 4,
-      boxOrient: "vertical"
-    }
-  }
-});
-const StyledSafeLinkButton = styled(SafeLinkButton, {
-  base: {
-    boxShadow: "full",
-    border: "1px solid",
-    borderColor: "stroke.default"
-  }
-});
-const LinkButton = _ref => {
-  let {
-    url,
-    children,
-    path
-  } = _ref;
-  if (url) return /*#__PURE__*/_jsx(StyledSafeLinkButton, {
-    to: getPossiblyRelativeUrl(url, path),
-    variant: "secondary",
-    rel: "noopener noreferrer",
-    children: children
-  });
-  return children;
-};
-const CampaignBlock = _ref2 => {
-  let {
-    title,
-    image,
-    imageSide = "left",
-    description,
-    headingLevel: InternalHeading = "h2",
-    url,
-    path,
-    className,
-    background
-  } = _ref2;
-  const imageComponent = image && /*#__PURE__*/_jsx(StyledImg, {
-    src: `${image.src}?width=455`,
-    height: 340,
-    width: 455,
-    alt: image.alt
-  });
-  return /*#__PURE__*/_jsx(Wrapper, {
-    children: /*#__PURE__*/_jsxs(Container, {
-      className: className,
-      "data-embed-type": "campaign-block",
-      imageSide: imageSide,
-      background: background,
-      children: [imageSide === "left" && imageComponent, /*#__PURE__*/_jsxs(ContentWrapper, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          asChild: true,
-          consumeCss: true,
-          textStyle: "heading.small",
-          children: /*#__PURE__*/_jsx(InternalHeading, {
-            children: parse(title)
-          })
-        }), /*#__PURE__*/_jsx(StyledText, {
-          textStyle: "body.xlarge",
-          children: parse(description)
-        }), !!url?.url && /*#__PURE__*/_jsxs(LinkButton, {
-          url: url.url,
-          path: path,
-          children: [parse(url.text ?? ""), /*#__PURE__*/_jsx(ArrowRightLine, {})]
-        })]
-      }), imageSide !== "left" && imageComponent]
-    })
-  });
-};
-export default CampaignBlock;

package/es/CampaignBlock/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 { default as CampaignBlock } from "./CampaignBlock";

package/es/CodeBlock/CodeBlock.js

@@ -1,35 +0,0 @@
-/**
- * Copyright (c) 2020-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, useMemo } from "react";
-import { cx } from "@ndla/styled-system/css";
-import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx } from "react/jsx-runtime";
-const Pre = styled("pre", {});
-export const Codeblock = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    highlightedCode,
-    format,
-    className,
-    ...props
-  } = _ref;
-  const codeWithLineNumbers = useMemo(() => {
-    return highlightedCode.split("\n").map((line, i) => {
-      return `<span class="linenumber">${i + 1}</span>${line}`;
-    }).join("\n");
-  }, [highlightedCode]);
-  return /*#__PURE__*/_jsx(Pre, {
-    className: cx("codeblock", `language-${format}`, className),
-    ...props,
-    dangerouslySetInnerHTML: {
-      __html: codeWithLineNumbers
-    },
-    ref: ref
-  });
-});
-export default Codeblock;

package/es/CodeBlock/codeLanguageOptions.js

@@ -1,84 +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.
- *
- */
-
-export const codeLanguageOptions = [{
-  title: "Bash",
-  format: "bash"
-}, {
-  title: "C",
-  format: "c"
-}, {
-  title: "CSharp",
-  format: "csharp"
-}, {
-  title: "CSS",
-  format: "css"
-}, {
-  title: "Diff",
-  format: "diff"
-}, {
-  title: "HTML",
-  format: "markup"
-}, {
-  title: "Ini",
-  format: "ini"
-}, {
-  title: "Java",
-  format: "java"
-}, {
-  title: "Javascript",
-  format: "js"
-}, {
-  title: "JSON",
-  format: "json"
-}, {
-  title: "JSX",
-  format: "jsx"
-}, {
-  title: "Kotlin",
-  format: "kotlin"
-}, {
-  title: "LUA",
-  format: "lua"
-}, {
-  title: "Markdown",
-  format: "markdown"
-}, {
-  title: "Matlab",
-  format: "matlab"
-}, {
-  title: "NSIS",
-  format: "nsis"
-}, {
-  title: "PHP",
-  format: "php"
-}, {
-  title: "Powershell",
-  format: "powershell"
-}, {
-  title: "Python",
-  format: "python"
-}, {
-  title: "Ruby",
-  format: "ruby"
-}, {
-  title: "Rust",
-  format: "rust"
-}, {
-  title: "SQL",
-  format: "sql"
-}, {
-  title: "Text",
-  format: "text"
-}, {
-  title: "VHDL",
-  format: "vhdl"
-}, {
-  title: "XML",
-  format: "xml"
-}];

package/es/CodeBlock/index.js

@@ -1,10 +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.
- *
- */
-
-export { default as CodeBlock } from "./CodeBlock";
-export { codeLanguageOptions } from "./codeLanguageOptions";

package/es/Concept/Concept.js

@@ -1,72 +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 } from "react";
-import { Figure } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import { BrightcoveEmbed, ExternalEmbed, H5pEmbed, IframeEmbed, ImageEmbed } from "../Embed";
-import { EmbedByline } from "../LicenseByline/EmbedByline";
-import { licenseAttributes } from "../utils/licenseAttributes";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledFigure = styled(Figure, {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "medium"
-  }
-});
-const ContentWrapper = styled("div", {
-  base: {
-    textStyle: "body.large",
-    display: "inline",
-    "& p": {
-      display: "inline"
-    }
-  }
-});
-export const Concept = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    copyright,
-    visualElement,
-    lang,
-    children,
-    title,
-    source,
-    previewAlt,
-    ...rest
-  } = _ref;
-  const licenseProps = licenseAttributes(copyright?.license?.license, lang, source);
-  return /*#__PURE__*/_jsxs(StyledFigure, {
-    ref: ref,
-    ...rest,
-    ...licenseProps,
-    children: [/*#__PURE__*/_jsxs(ContentWrapper, {
-      lang: lang,
-      children: [!!title && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx("b", {
-          children: title
-        }), ` – `]
-      }), children]
-    }), visualElement?.resource === "image" ? /*#__PURE__*/_jsx(ImageEmbed, {
-      embed: visualElement,
-      lang: lang,
-      previewAlt: previewAlt
-    }) : visualElement?.resource === "brightcove" ? /*#__PURE__*/_jsx(BrightcoveEmbed, {
-      embed: visualElement
-    }) : visualElement?.resource === "h5p" ? /*#__PURE__*/_jsx(H5pEmbed, {
-      embed: visualElement
-    }) : visualElement?.resource === "iframe" ? /*#__PURE__*/_jsx(IframeEmbed, {
-      embed: visualElement
-    }) : visualElement?.resource === "external" ? /*#__PURE__*/_jsx(ExternalEmbed, {
-      embed: visualElement
-    }) : null, !!copyright && /*#__PURE__*/_jsx(EmbedByline, {
-      copyright: copyright,
-      type: "concept"
-    })]
-  });
-});

package/es/ContactBlock/ContactBlock.js

@@ -1,199 +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 { Text } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import { LicenseContainerContent } from "../LicenseByline/EmbedByline";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const BackgroundVariant = {
-  strong: {
-    _before: {
-      backgroundColor: "surface.brand.3"
-    }
-  },
-  moderate: {
-    _before: {
-      backgroundColor: "surface.brand.3.moderate"
-    }
-  },
-  subtle: {
-    _before: {
-      backgroundColor: "surface.brand.3.subtle"
-    }
-  }
-};
-export const contactBlockBackgrounds = Object.keys(BackgroundVariant);
-const StyledWrapper = styled("div", {
-  base: {
-    display: "flex",
-    minWidth: "surface.xxsmall",
-    padding: "medium",
-    alignItems: "center",
-    justifyContent: "space-between",
-    boxShadow: "full",
-    border: "1px solid",
-    gap: "medium",
-    position: "relative",
-    borderColor: "stroke.default",
-    borderRadius: "xsmall",
-    overflow: "hidden",
-    background: "surface.default",
-    flexDirection: "column-reverse",
-    tablet: {
-      alignItems: "unset",
-      flexDirection: "row"
-    }
-  }
-});
-const EmailLink = styled("a", {
-  base: {
-    color: "text.default",
-    textDecoration: "underline",
-    _hover: {
-      textDecoration: "none"
-    },
-    _focusVisible: {
-      textDecoration: "none"
-    }
-  }
-});
-const HeaderWrapper = styled("div", {
-  base: {
-    position: "relative",
-    display: "flex",
-    flexDirection: "column",
-    gap: "3xsmall",
-    zIndex: "base",
-    _before: {
-      content: '""',
-      position: "absolute",
-      top: "-60px",
-      left: "-50px",
-      right: "0",
-      bottom: "0",
-      height: "calc(100% + 50px)",
-      width: "surface.3xlarge",
-      transform: "rotate(-4deg)",
-      zIndex: "hide"
-    }
-  },
-  variants: {
-    variant: BackgroundVariant,
-    imageExists: {
-      true: {
-        tabletDown: {
-          _before: {
-            display: "none"
-          }
-        }
-      }
-    }
-  }
-});
-const ImageWrapper = styled("div", {
-  base: {
-    display: "flex",
-    gap: "xxsmall",
-    alignItems: "flex-start",
-    justifyContent: "flex-start",
-    flexDirection: "column",
-    zIndex: "base",
-    tabletDown: {
-      _before: {
-        content: '""',
-        position: "absolute",
-        top: "-50px",
-        left: "-50px",
-        right: "0",
-        bottom: "0",
-        height: "surface.xxsmall",
-        width: "surface.3xlarge",
-        transform: "rotate(-4deg)",
-        zIndex: "hide"
-      }
-    }
-  },
-  variants: {
-    variant: BackgroundVariant
-  }
-});
-const StyledImage = styled("img", {
-  base: {
-    borderRadius: "xsmall",
-    width: "surface.xsmall",
-    height: "surface.xsmall",
-    objectFit: "cover"
-  }
-});
-const ContentWrapper = styled("div", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "medium",
-    flex: "1",
-    width: "100%"
-  }
-});
-const StyledDescription = styled(Text, {
-  base: {
-    fontFamily: "serif"
-  }
-});
-export const ContactBlock = _ref => {
-  let {
-    image,
-    jobTitle,
-    description,
-    name,
-    email,
-    embedAlt,
-    lang,
-    backgroundColor = "strong"
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  return /*#__PURE__*/_jsxs(StyledWrapper, {
-    "data-embed-type": "contact-block",
-    children: [/*#__PURE__*/_jsxs(ContentWrapper, {
-      children: [/*#__PURE__*/_jsxs(HeaderWrapper, {
-        variant: backgroundColor,
-        imageExists: !!image,
-        children: [/*#__PURE__*/_jsx(Text, {
-          lang: lang,
-          fontWeight: "bold",
-          textStyle: "heading.small",
-          children: name
-        }), /*#__PURE__*/_jsx(Text, {
-          lang: lang,
-          children: jobTitle
-        }), /*#__PURE__*/_jsxs(Text, {
-          children: [`${t("email")}: `, /*#__PURE__*/_jsx(EmailLink, {
-            href: `mailto:${email}`,
-            children: email
-          })]
-        })]
-      }), /*#__PURE__*/_jsx(StyledDescription, {
-        textStyle: "body.large",
-        children: description
-      })]
-    }), !!image && /*#__PURE__*/_jsxs(ImageWrapper, {
-      variant: backgroundColor,
-      children: [/*#__PURE__*/_jsx(StyledImage, {
-        alt: embedAlt !== undefined ? embedAlt : image.alttext.alttext,
-        src: image.image.imageUrl,
-        width: 300,
-        height: 300
-      }), /*#__PURE__*/_jsx(LicenseContainerContent, {
-        type: "image",
-        copyright: image.copyright
-      })]
-    })]
-  });
-};

package/es/ContactBlock/index.js

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

package/es/ContentTypeBadge/ContentTypeBadge.js

@@ -1,50 +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 } from "react";
-import { useTranslation } from "react-i18next";
-import { Badge } from "@ndla/primitives";
-import * as contentTypes from "../model/ContentType";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const contentTypeToBadgeVariantMap = {
-  [contentTypes.SUBJECT_MATERIAL]: "brand1",
-  [contentTypes.TASKS_AND_ACTIVITIES]: "brand2",
-  [contentTypes.ASSESSMENT_RESOURCES]: "brand2",
-  [contentTypes.SUBJECT]: "neutral",
-  [contentTypes.SOURCE_MATERIAL]: "brand1",
-  [contentTypes.LEARNING_PATH]: "brand3",
-  [contentTypes.TOPIC]: "neutral",
-  [contentTypes.MULTIDISCIPLINARY]: "neutral",
-  [contentTypes.CONCEPT]: "brand1",
-  [contentTypes.EXTERNAL]: "brand2",
-  [contentTypes.IMAGE]: "brand1",
-  [contentTypes.AUDIO]: "brand1",
-  [contentTypes.PODCAST]: "brand1",
-  [contentTypes.VIDEO]: "brand1",
-  [contentTypes.MISSING]: "neutral",
-  [contentTypes.PODCAST_SERIES]: "brand1",
-  [contentTypes.GLOSS]: "brand1",
-  [contentTypes.PROGRAMME]: "neutral",
-  [contentTypes.FRONTPAGE_ARTICLE]: "brand2"
-};
-export const ContentTypeBadge = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    contentType,
-    children,
-    ...props
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  return /*#__PURE__*/_jsx(Badge, {
-    colorTheme: contentTypeToBadgeVariantMap[contentType ?? "missing"] ?? contentTypeToBadgeVariantMap["missing"],
-    ...props,
-    ref: ref,
-    children: children ?? t(`contentTypes.${contentType}`)
-  });
-});

package/es/ContentTypeBlockQuote/ContentTypeBlockQuote.js

@@ -1,32 +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 } from "react";
-import { BlockQuote } from "@ndla/primitives";
-import { jsx as _jsx } from "react/jsx-runtime";
-const contentTypeToVariantMapping = {
-  "subject-material": "brand1",
-  "source-material": "brand1",
-  concept: "brand1",
-  "tasks-and-activities": "brand2",
-  "assessment-resources": "brand2"
-};
-export const ContentTypeBlockQuote = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    variant,
-    contentType,
-    ...props
-  } = _ref;
-  const color = contentType ? contentTypeToVariantMapping[contentType] ?? "brand1" : "brand1";
-  const variantColor = variant === "colored" ? color : undefined;
-  return /*#__PURE__*/_jsx(BlockQuote, {
-    ...props,
-    variant: variantColor,
-    ref: ref
-  });
-});