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

package/es/Grid/Grid.js

@@ -1,94 +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 { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx } from "react/jsx-runtime";
-const GridContainer = styled("div", {
-  base: {
-    display: "grid",
-    justifyContent: "center",
-    borderRadius: "xsmall",
-    gridRowGap: "large",
-    gridColumnGap: "medium",
-    width: "100%",
-    backgroundColor: "background.subtle",
-    minWidth: "surface.xxsmall",
-    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-    "& :not(div[data-parallax-cell='true']) > div[data-embed-type='pitch']": {
-      height: "100%",
-      "& > :last-child": {
-        marginTop: "auto"
-      }
-    },
-    tabletDown: {
-      gridTemplateColumns: "repeat(1, minmax(0, 1fr))"
-    },
-    tabletToDesktop: {
-      gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-      "& > div:nth-child(3):last-child": {
-        display: "flex",
-        flexFlow: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        gridColumn: "span 2"
-      }
-    }
-  },
-  variants: {
-    columns: {
-      "2": {},
-      "2x2": {},
-      "3": {
-        desktop: {
-          gridTemplateColumns: "repeat(3, minmax(0, 1fr))"
-        }
-      },
-      "4": {
-        desktop: {
-          gridTemplateColumns: "repeat(4, minmax(0, 1fr))"
-        }
-      }
-    },
-    background: {
-      white: {
-        backgroundColor: "surface.default"
-      },
-      transparent: {
-        backgroundColor: "transparent"
-      },
-      gray: {
-        backgroundColor: "background.subtle"
-      }
-    },
-    border: {
-      lightBlue: {
-        padding: "xsmall",
-        border: "1px solid",
-        borderColor: "surface.brand.2"
-      }
-    }
-  }
-});
-export const Grid = _ref => {
-  let {
-    columns,
-    border,
-    children,
-    background = "gray",
-    ...rest
-  } = _ref;
-  const amountOfColumns = children?.length === 3 ? "3" : columns;
-  return /*#__PURE__*/_jsx(GridContainer, {
-    "data-embed-type": "grid",
-    border: border === "none" ? undefined : border,
-    columns: amountOfColumns,
-    background: background,
-    ...rest,
-    children: children
-  });
-};

package/es/Grid/GridParallaxItem.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 { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledGridParallaxItem = styled("div", {
-  base: {
-    position: "relative",
-    "& > div": {
-      top: "var(--masthead-height, 0px)",
-      position: "sticky"
-    }
-  }
-});
-export const GridParallaxItem = _ref => {
-  let {
-    children,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/_jsx(StyledGridParallaxItem, {
-    ...rest,
-    "data-embed-type": "grid-parallax",
-    children: /*#__PURE__*/_jsx("div", {
-      children: children
-    })
-  });
-};

package/es/Grid/index.js

@@ -1,10 +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 { Grid } from "./Grid";
-export { GridParallaxItem } from "./GridParallaxItem";

package/es/KeyFigure/KeyFigure.js

@@ -1,63 +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 { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ContentWrapper = styled("div", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "xsmall",
-    "&:not(:has(> img))": {
-      paddingBlock: "xxlarge"
-    }
-  }
-});
-const StyledImage = styled("img", {
-  base: {
-    height: "surface.3xsmall",
-    width: "surface.3xsmall",
-    borderRadius: "xsmall"
-  }
-});
-const TitleWrapper = styled("div", {
-  base: {
-    textStyle: "heading.large",
-    textAlign: "center"
-  }
-});
-const SubTitleWrapper = styled("div", {
-  base: {
-    textStyle: "title.medium",
-    textAlign: "center"
-  }
-});
-const KeyFigure = _ref => {
-  let {
-    image,
-    title,
-    subtitle
-  } = _ref;
-  return /*#__PURE__*/_jsxs(ContentWrapper, {
-    "data-embed-type": "key-figure",
-    children: [!!image && /*#__PURE__*/_jsx(StyledImage, {
-      src: `${image?.src}?width=150`,
-      width: 150,
-      height: 150,
-      alt: image?.alt
-    }), /*#__PURE__*/_jsx(TitleWrapper, {
-      children: parse(title)
-    }), /*#__PURE__*/_jsx(SubTitleWrapper, {
-      children: parse(subtitle)
-    })]
-  });
-};
-export default KeyFigure;

package/es/KeyFigure/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 KeyFigure } from "./KeyFigure";

package/es/LicenseByline/EmbedByline.js

@@ -1,212 +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 { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { AlertLine } from "@ndla/icons";
-import { getLicenseByAbbreviation, getLicenseCredits } from "@ndla/licenses";
-import { Button, Text } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
-import { LicenseLink } from "./LicenseLink";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const BylineWrapper = styled("figcaption", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    paddingBlock: "xsmall",
-    textStyle: "label.medium",
-    color: "text.subtle"
-  }
-});
-const ErrorBylineWrapper = styled(BylineWrapper, {
-  base: {
-    border: "1px solid",
-    borderColor: "stroke.error",
-    borderRadius: "xsmall",
-    background: "surface.dangerSubtle",
-    paddingInline: "medium",
-    paddingBlock: "medium"
-  }
-});
-const StyledText = styled(Text, {
-  base: {
-    fontStyle: "italic"
-  }
-});
-const ContentWrapper = styled("div", {
-  base: {
-    display: "flex",
-    gap: "xsmall",
-    alignItems: "center",
-    textStyle: "label.medium"
-  }
-});
-const BaseDescription = styled("div", {
-  base: {
-    display: "inline-flex",
-    whiteSpace: "pre-wrap"
-  }
-});
-export const EmbedByline = _ref => {
-  let {
-    type,
-    description,
-    children,
-    visibleAlt,
-    hideCopyright,
-    ...props
-  } = _ref;
-  const {
-    t
-  } = useTranslation();
-  if (props.error) {
-    const typeString = type === "h5p" ? "H5P" : t(`embed.type.${type}`).toLowerCase();
-    return /*#__PURE__*/_jsx(ErrorBylineWrapper, {
-      children: /*#__PURE__*/_jsxs(ContentWrapper, {
-        children: [/*#__PURE__*/_jsx(AlertLine, {}), /*#__PURE__*/_jsx(BaseDescription, {
-          children: /*#__PURE__*/_jsx("span", {
-            children: t("embed.embedError", {
-              type: typeString
-            })
-          })
-        })]
-      })
-    });
-  }
-  const {
-    copyright
-  } = props;
-  const hideByline = hideCopyright && !description;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [!hideByline && /*#__PURE__*/_jsx(BylineWrapper, {
-      children: /*#__PURE__*/_jsxs("div", {
-        children: [!!hideCopyright && description, !hideCopyright && /*#__PURE__*/_jsx(LicenseContainerContent, {
-          type: type,
-          copyright: copyright,
-          children: description
-        }), children]
-      })
-    }), visibleAlt ? /*#__PURE__*/_jsx(StyledText, {
-      color: "text.subtle",
-      textStyle: "label.medium",
-      asChild: true,
-      consumeCss: true,
-      children: /*#__PURE__*/_jsx("span", {
-        children: `Alt: ${visibleAlt}`
-      })
-    }) : null]
-  });
-};
-const StyledDescription = styled(BaseDescription, {
-  base: {
-    mobileWideDown: {
-      display: "grid",
-      gridTemplateColumns: "1fr auto",
-      alignItems: "center",
-      overflow: "hidden",
-      _open: {
-        display: "inline"
-      }
-    }
-  }
-});
-const TextContent = styled("span", {
-  base: {
-    mobileWideDown: {
-      whiteSpace: "nowrap",
-      maxHeight: "large",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      transitionProperty: "max-height",
-      transitionDuration: "slow",
-      transitionTimingFunction: "ease-in",
-      marginInlineEnd: "4xsmall",
-      _open: {
-        whiteSpace: "pre-wrap",
-        maxHeight: "none"
-      }
-    }
-  }
-});
-const StyledButton = styled(Button, {
-  base: {
-    mobileWide: {
-      display: "none"
-    }
-  }
-});
-const LicenseDescription = _ref2 => {
-  let {
-    children,
-    isOpen,
-    setIsOpen
-  } = _ref2;
-  const open = isOpen ? {
-    "data-open": ""
-  } : {};
-  const {
-    t
-  } = useTranslation();
-  const handleToggle = () => {
-    setIsOpen(!isOpen);
-  };
-  return /*#__PURE__*/_jsx(ContentWrapper, {
-    children: /*#__PURE__*/_jsxs(StyledDescription, {
-      ...open,
-      children: [/*#__PURE__*/_jsx(TextContent, {
-        ...open,
-        children: children
-      }), /*#__PURE__*/_jsx(StyledButton, {
-        variant: "link",
-        size: "small",
-        onClick: handleToggle,
-        children: isOpen ? `${t("audio.readLessDescriptionLabel")}` : `${t("audio.readMoreDescriptionLabel")}`
-      })]
-    })
-  });
-};
-export const LicenseContainerContent = _ref3 => {
-  let {
-    children,
-    copyright,
-    type
-  } = _ref3;
-  const {
-    t,
-    i18n
-  } = useTranslation();
-  const license = copyright ? getLicenseByAbbreviation(copyright.license?.license ?? "", i18n.language) : undefined;
-  const authors = getLicenseCredits(copyright);
-  const captionAuthors = Object.values(authors).find(i => i.length > 0) ?? [];
-  const [isOpen, setIsOpen] = useState(false);
-  const content = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [children, ` ${t(`embed.type.${type}`)}${captionAuthors.length ? ": " : ""}`, /*#__PURE__*/_jsx("span", {
-      children: captionAuthors.map(author => author.name).join(", ")
-    }), license ? /*#__PURE__*/_jsxs(_Fragment, {
-      children: [" / ", /*#__PURE__*/_jsx(LicenseLink, {
-        license: license,
-        hideLink: !isOpen && !!children
-      })]
-    }) : null]
-  });
-  if (children) {
-    return /*#__PURE__*/_jsx(LicenseDescription, {
-      isOpen: isOpen,
-      setIsOpen: setIsOpen,
-      children: content
-    });
-  }
-  return /*#__PURE__*/_jsx(Text, {
-    textStyle: "label.medium",
-    asChild: true,
-    consumeCss: true,
-    children: /*#__PURE__*/_jsx("span", {
-      children: content
-    })
-  });
-};

package/es/LicenseByline/LicenseLink.js

@@ -1,56 +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 { forwardRef } from "react";
-import { SafeLink } from "@ndla/safelink";
-import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledSafeLink = styled(SafeLink, {
-  base: {
-    color: "text.link",
-    textDecoration: "underline",
-    whiteSpace: "nowrap",
-    _hover: {
-      textDecoration: "none"
-    },
-    _focusWithin: {
-      textDecoration: "none"
-    },
-    mobileWideDown: {
-      _disabled: {
-        display: "none"
-      }
-    }
-  }
-});
-export const LicenseLink = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    license,
-    hideLink,
-    ...rest
-  } = _ref;
-  const disabled = hideLink ? {
-    "data-disabled": ""
-  } : {};
-  if (license.abbreviation === "unknown") {
-    return null;
-  }
-  if (license.url?.length) {
-    return /*#__PURE__*/_jsx(StyledSafeLink, {
-      to: license.url,
-      rel: "license",
-      ...disabled,
-      ...rest,
-      ref: ref,
-      children: license.abbreviation
-    });
-  }
-  return /*#__PURE__*/_jsx("span", {
-    children: license.abbreviation
-  });
-});

package/es/LicenseByline/index.js

@@ -1,10 +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 { EmbedByline } from "./EmbedByline";
-export { LicenseLink } from "./LicenseLink";

package/es/LinkBlock/LinkBlock.js

@@ -1,103 +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 } from "react";
-import { ArrowRightLine, CalendarLine } from "@ndla/icons";
-import { Heading } from "@ndla/primitives";
-import { SafeLink } 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 InfoWrapper = styled("div", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "xsmall"
-  }
-});
-const StyledSafeLink = styled(SafeLink, {
-  base: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    background: "surface.default",
-    padding: "medium",
-    border: "1px solid",
-    borderColor: "stroke.subtle",
-    borderRadius: "xsmall",
-    "& h3": {
-      textDecoration: "underline"
-    },
-    "& [data-forward]": {
-      transitionProperty: "width, height",
-      transitionTimingFunction: "ease-in-out",
-      transitionDuration: "fast"
-    },
-    _hover: {
-      "& h3": {
-        textDecoration: "none"
-      },
-      "& [data-forward]": {
-        width: "large",
-        height: "large"
-      }
-    }
-  }
-});
-const StyledDateContainer = styled("div", {
-  base: {
-    display: "flex",
-    alignItems: "center",
-    gap: "xxsmall"
-  }
-});
-const StyledCalendarEd = styled(CalendarLine, {
-  base: {
-    color: "icon.strong"
-  }
-});
-const LinkBlock = _ref => {
-  let {
-    title,
-    articleLanguage,
-    date,
-    url,
-    path
-  } = _ref;
-  const href = getPossiblyRelativeUrl(url, path);
-  const formattedDate = useMemo(() => {
-    if (!date) return null;
-    return new Intl.DateTimeFormat(articleLanguage, {
-      timeZone: "CET",
-      day: "2-digit",
-      month: "long",
-      year: "numeric"
-    }).format(new Date(date));
-  }, [date, articleLanguage]);
-  return /*#__PURE__*/_jsxs(StyledSafeLink, {
-    to: href,
-    "data-embed-type": "link-block",
-    children: [/*#__PURE__*/_jsxs(InfoWrapper, {
-      children: [/*#__PURE__*/_jsx(Heading, {
-        asChild: true,
-        consumeCss: true,
-        textStyle: "title.medium",
-        children: /*#__PURE__*/_jsx("h3", {
-          "data-heading": true,
-          children: parse(title)
-        })
-      }), !!date && /*#__PURE__*/_jsxs(StyledDateContainer, {
-        children: [/*#__PURE__*/_jsx(StyledCalendarEd, {}), formattedDate]
-      })]
-    }), /*#__PURE__*/_jsx(ArrowRightLine, {
-      "data-forward": true
-    })]
-  });
-};
-export default LinkBlock;

package/es/LinkBlock/LinkBlockSection.js

@@ -1,35 +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 } from "react";
-import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledList = styled("ul", {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "xsmall",
-    listStyle: "none"
-  }
-});
-const LinkBlockSection = _ref => {
-  let {
-    children,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/_jsx("nav", {
-    ...rest,
-    "data-embed-type": "link-block-list",
-    children: /*#__PURE__*/_jsx(StyledList, {
-      children: Children.map(children, child => /*#__PURE__*/_jsx("li", {
-        children: child
-      }))
-    })
-  });
-};
-export default LinkBlockSection;

package/es/LinkBlock/index.js

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