@ndla/ui 56.0.184-alpha.0 → 56.0.186-alpha.0

package/lib/Pitch/Pitch.js

@@ -29,7 +29,6 @@ const StyledCardImage = (0, _ndla_styled_system_jsx.styled)(_ndla_primitives.Car
 	height: "unset"
 } });
 const Pitch = ({ title, url, metaImage, path, description }) => {
-	const href = require_relativeUrl.getPossiblyRelativeUrl(url, path);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCardRoot, {
 		nonInteractive: true,
 		"data-embed-type": "pitch",
@@ -41,7 +40,7 @@ const Pitch = ({ title, url, metaImage, path, description }) => {
 				asChild: true,
 				consumeCss: true,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ndla_safelink.SafeLink, {
-					to: href,
+					to: require_relativeUrl.getPossiblyRelativeUrl(url, path),
 					unstyled: true,
 					css: _ndla_styled_system_patterns.linkOverlay.raw(),
 					children: (0, html_react_parser.default)(title)

package/lib/Pitch/Pitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pitch.js","names":["CardHeading","Text","CardRoot","CardImage","getPossiblyRelativeUrl","SafeLink","linkOverlay"],"sources":["../../src/Pitch/Pitch.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { CardHeading, CardImage, CardRoot, Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport parse from \"html-react-parser\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\nexport interface Props {\n  title: string;\n  url: string;\n  description?: string;\n  metaImage: {\n    url: string;\n    alt: string;\n  };\n  path?: string;\n}\n\nconst StyledCardHeading = styled(CardHeading, {\n  base: {\n    paddingBlockStart: \"medium\",\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    paddingBlockEnd: \"medium\",\n  },\n});\n\nconst StyledCardRoot = styled(CardRoot, {\n  base: {\n    outline: \"0px\",\n    boxShadow: \"none\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"small\",\n  },\n});\n\nconst StyledCardImage = styled(CardImage, {\n  base: {\n    aspectRatio: \"16/9\",\n    height: \"unset\",\n  },\n});\n\nexport const Pitch = ({ title, url, metaImage, path, description }: Props) => {\n  const href = getPossiblyRelativeUrl(url, path);\n\n  return (\n    <StyledCardRoot nonInteractive data-embed-type=\"pitch\" asChild consumeCss>\n      <div>\n        <StyledCardHeading textStyle=\"heading.small\" asChild consumeCss>\n          <SafeLink to={href} unstyled css={linkOverlay.raw()}>\n            {parse(title)}\n          </SafeLink>\n        </StyledCardHeading>\n        {!!description && (\n          <StyledText textStyle=\"body.xlarge\" asChild consumeCss>\n            <div>{parse(description)}</div>\n          </StyledText>\n        )}\n        <StyledCardImage\n          variant=\"rounded\"\n          src={metaImage.url}\n          alt={metaImage.alt}\n          sizes=\"480px\"\n          fallbackWidth={300}\n          width={550}\n          height={310}\n        />\n      </div>\n    </StyledCardRoot>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA0BA,MAAM,qBAAA,GAAA,wBAAA,QAA2BA,iBAAAA,aAAa,EAC5C,MAAM,EACJ,mBAAmB,UACpB,EACF,CAAC;AAEF,MAAM,cAAA,GAAA,wBAAA,QAAoBC,iBAAAA,MAAM,EAC9B,MAAM,EACJ,iBAAiB,UAClB,EACF,CAAC;AAEF,MAAM,kBAAA,GAAA,wBAAA,QAAwBC,iBAAAA,UAAU,EACtC,MAAM;CACJ,SAAS;CACT,WAAW;CACX,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAM,mBAAA,GAAA,wBAAA,QAAyBC,iBAAAA,WAAW,EACxC,MAAM;CACJ,aAAa;CACb,QAAQ;CACT,EACF,CAAC;AAEF,MAAa,SAAS,EAAE,OAAO,KAAK,WAAW,MAAM,kBAAyB;CAC5E,MAAM,OAAOC,oBAAAA,uBAAuB,KAAK,KAAK;AAE9C,QACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EAAgB,gBAAA;EAAe,mBAAgB;EAAQ,SAAA;EAAQ,YAAA;YAC7D,iBAAA,GAAA,kBAAA,MAAC,OAAD,EAAA,UAAA;GACE,iBAAA,GAAA,kBAAA,KAAC,mBAAD;IAAmB,WAAU;IAAgB,SAAA;IAAQ,YAAA;cACnD,iBAAA,GAAA,kBAAA,KAACC,eAAAA,UAAD;KAAU,IAAI;KAAM,UAAA;KAAS,KAAKC,6BAAAA,YAAY,KAAK;8CAC1C,MAAM;KACJ,CAAA;IACO,CAAA;GACnB,CAAC,CAAC,eACD,iBAAA,GAAA,kBAAA,KAAC,YAAD;IAAY,WAAU;IAAc,SAAA;IAAQ,YAAA;cAC1C,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAA,WAAA,GAAA,kBAAA,SAAY,YAAY,EAAO,CAAA;IACpB,CAAA;GAEf,iBAAA,GAAA,kBAAA,KAAC,iBAAD;IACE,SAAQ;IACR,KAAK,UAAU;IACf,KAAK,UAAU;IACf,OAAM;IACN,eAAe;IACf,OAAO;IACP,QAAQ;IACR,CAAA;GACE,EAAA,CAAA;EACS,CAAA"}
+{"version":3,"file":"Pitch.js","names":["CardHeading","Text","CardRoot","CardImage","SafeLink","getPossiblyRelativeUrl","linkOverlay"],"sources":["../../src/Pitch/Pitch.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { CardHeading, CardImage, CardRoot, Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport parse from \"html-react-parser\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\nexport interface Props {\n  title: string;\n  url: string;\n  description?: string;\n  metaImage: {\n    url: string;\n    alt: string;\n  };\n  path?: string;\n}\n\nconst StyledCardHeading = styled(CardHeading, {\n  base: {\n    paddingBlockStart: \"medium\",\n  },\n});\n\nconst StyledText = styled(Text, {\n  base: {\n    paddingBlockEnd: \"medium\",\n  },\n});\n\nconst StyledCardRoot = styled(CardRoot, {\n  base: {\n    outline: \"0px\",\n    boxShadow: \"none\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    gap: \"small\",\n  },\n});\n\nconst StyledCardImage = styled(CardImage, {\n  base: {\n    aspectRatio: \"16/9\",\n    height: \"unset\",\n  },\n});\n\nexport const Pitch = ({ title, url, metaImage, path, description }: Props) => {\n  const href = getPossiblyRelativeUrl(url, path);\n\n  return (\n    <StyledCardRoot nonInteractive data-embed-type=\"pitch\" asChild consumeCss>\n      <div>\n        <StyledCardHeading textStyle=\"heading.small\" asChild consumeCss>\n          <SafeLink to={href} unstyled css={linkOverlay.raw()}>\n            {parse(title)}\n          </SafeLink>\n        </StyledCardHeading>\n        {!!description && (\n          <StyledText textStyle=\"body.xlarge\" asChild consumeCss>\n            <div>{parse(description)}</div>\n          </StyledText>\n        )}\n        <StyledCardImage\n          variant=\"rounded\"\n          src={metaImage.url}\n          alt={metaImage.alt}\n          sizes=\"480px\"\n          fallbackWidth={300}\n          width={550}\n          height={310}\n        />\n      </div>\n    </StyledCardRoot>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA0BA,MAAM,qBAAA,GAAA,wBAAA,QAA2BA,iBAAAA,aAAa,EAC5C,MAAM,EACJ,mBAAmB,UACpB,EACF,CAAC;AAEF,MAAM,cAAA,GAAA,wBAAA,QAAoBC,iBAAAA,MAAM,EAC9B,MAAM,EACJ,iBAAiB,UAClB,EACF,CAAC;AAEF,MAAM,kBAAA,GAAA,wBAAA,QAAwBC,iBAAAA,UAAU,EACtC,MAAM;CACJ,SAAS;CACT,WAAW;CACX,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAM,mBAAA,GAAA,wBAAA,QAAyBC,iBAAAA,WAAW,EACxC,MAAM;CACJ,aAAa;CACb,QAAQ;CACT,EACF,CAAC;AAEF,MAAa,SAAS,EAAE,OAAO,KAAK,WAAW,MAAM,kBAAyB;AAG5E,QACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EAAgB,gBAAA;EAAe,mBAAgB;EAAQ,SAAA;EAAQ,YAAA;YAC7D,iBAAA,GAAA,kBAAA,MAAC,OAAD,EAAA,UAAA;GACE,iBAAA,GAAA,kBAAA,KAAC,mBAAD;IAAmB,WAAU;IAAgB,SAAA;IAAQ,YAAA;cACnD,iBAAA,GAAA,kBAAA,KAACC,eAAAA,UAAD;KAAU,IANLC,oBAAAA,uBAAuB,KAAK,KAAK;KAMlB,UAAA;KAAS,KAAKC,6BAAAA,YAAY,KAAK;8CAC1C,MAAM;KACJ,CAAA;IACO,CAAA;GACnB,CAAC,CAAC,eACD,iBAAA,GAAA,kBAAA,KAAC,YAAD;IAAY,WAAU;IAAc,SAAA;IAAQ,YAAA;cAC1C,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAA,WAAA,GAAA,kBAAA,SAAY,YAAY,EAAO,CAAA;IACpB,CAAA;GAEf,iBAAA,GAAA,kBAAA,KAAC,iBAAD;IACE,SAAQ;IACR,KAAK,UAAU;IACf,KAAK,UAAU;IACf,OAAM;IACN,eAAe;IACf,OAAO;IACP,QAAQ;IACR,CAAA;GACE,EAAA,CAAA;EACS,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ndla/ui",
   "type": "module",
-  "version": "56.0.184-alpha.0",
+  "version": "56.0.186-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "exports": {
@@ -38,14 +38,14 @@
   "dependencies": {
     "@ark-ui/react": "^5.34.1",
     "@ndla/core": "^6.0.7-alpha.0",
-    "@ndla/icons": "^8.0.88-alpha.0",
+    "@ndla/icons": "^8.0.89-alpha.0",
     "@ndla/licenses": "^10.0.11-alpha.0",
-    "@ndla/locales": "^0.0.2",
-    "@ndla/primitives": "^1.0.126-alpha.0",
-    "@ndla/safelink": "^7.0.129-alpha.0",
-    "@ndla/styled-system": "^0.0.48",
-    "@ndla/util": "^5.0.19-alpha.0",
-    "html-react-parser": "^5.2.8"
+    "@ndla/locales": "^0.0.3",
+    "@ndla/primitives": "^1.0.128-alpha.0",
+    "@ndla/safelink": "^7.0.131-alpha.0",
+    "@ndla/styled-system": "^0.0.49",
+    "@ndla/util": "^5.0.21-alpha.0",
+    "html-react-parser": "^6.0.0"
   },
   "peerDependencies": {
     "i18next": ">= 25.0.0",
@@ -55,13 +55,13 @@
     "react-router": ">= 7.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.75",
+    "@ndla/preset-panda": "^0.0.76",
     "@ndla/types-backend": "^1.0.89",
     "@ndla/types-embed": "^5.0.21-alpha.0",
-    "@pandacss/dev": "^1.7.0"
+    "@pandacss/dev": "^1.10.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "74f4af9223bd5cbd27679b44b3cab1fcf4d26c76"
+  "gitHead": "f8a73392a71c05f052f6cc69d55ca57c38e0db5b"
 }

package/src/Article/ArticleByline.tsx

@@ -19,6 +19,7 @@ import {
 } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
+import { toIntlLanguage } from "@ndla/util";
 import { type ReactNode, forwardRef, useCallback, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import type { FootNote } from "../types";
@@ -112,7 +113,10 @@ export const ArticleByline = ({
   const { t, i18n } = useTranslation();
 
   const showPrimaryContributors = suppliers.length > 0 || authors.length > 0;
-  const listFormatter = new Intl.ListFormat(lang ?? i18n.language, { style: "long", type: "conjunction" });
+  const listFormatter = new Intl.ListFormat(toIntlLanguage(lang ?? i18n.language), {
+    style: "long",
+    type: "conjunction",
+  });
 
   return (
     <Wrapper>

package/src/FactBox/FactBox.tsx

@@ -6,8 +6,7 @@
  *
  */
 
-import { ArrowDownShortLine } from "@ndla/icons";
-import { IconButton } from "@ndla/primitives";
+import { Button } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import React, {
   type ComponentProps,
@@ -45,11 +44,10 @@ const StyledAside = styled("aside", {
     _open: {
       gridTemplateRows: "1fr",
     },
-    _closed: {
-      _print: {
-        overflow: "visible",
-        maxHeight: "500vh",
-      },
+    _print: {
+      gridTemplateRows: "1fr",
+      overflow: "visible",
+      maxHeight: "500vh",
     },
     "& > div": {
       minHeight: "surface.3xsmall",
@@ -60,6 +58,9 @@ const StyledAside = styled("aside", {
       true: {
         "& > div": {
           overflow: "hidden",
+          _print: {
+            overflow: "visible",
+          },
         },
       },
     },
@@ -74,51 +75,20 @@ const StyledContent = styled("div", {
     "& :first-child": {
       marginBlockStart: "0",
     },
-    _after: {
-      content: '""',
-      textAlign: "center",
-      position: "absolute",
-      inset: "0",
-      transitionProperty: "opacity",
-      transitionDuration: "slow",
-      transitionTimingFunction: "ease-in-out",
-      gradientFrom: "surface.default/20",
-      gradientTo: "surface.default/95",
-      backgroundGradient: "to-b",
-      opacity: "1",
-      zIndex: "base",
-      pointerEvents: "none",
-    },
     _print: {
       overflow: "visible",
-      _after: {
-        display: "none",
-      },
     },
     _open: {
       paddingBlockEnd: "xsmall",
-      _after: {
-        opacity: "0",
-      },
     },
   },
 });
 
-const StyledIconButton = styled(IconButton, {
+const StyledButton = styled(Button, {
   base: {
     position: "absolute",
     bottom: "-medium",
     zIndex: "base",
-    "& svg": {
-      transitionProperty: "transform",
-      transitionTimingFunction: "ease-in-out",
-      transitionDuration: "fast",
-    },
-    _open: {
-      "& svg": {
-        transform: "rotate(180deg)",
-      },
-    },
     _print: {
       display: "none",
     },
@@ -170,16 +140,16 @@ export const FactBox = forwardRef<HTMLElement, Props>(
           }
         }}
       >
-        <StyledIconButton
+        <StyledButton
           data-state={state}
           onClick={onClick}
           contentEditable={false}
           aria-expanded={state === "open"}
+          variant="secondary"
           aria-controls={contentId}
-          aria-label={t(`factbox.${state === "open" ? "close" : "open"}`)}
         >
-          <ArrowDownShortLine />
-        </StyledIconButton>
+          {t(`factbox.${state === "open" ? "showLess" : "showMore"}`)}
+        </StyledButton>
         <StyledContent id={contentId} data-state={state} aria-hidden={state === "closed"} {...inertAttribute}>
           {children}
         </StyledContent>

package/src/LinkBlock/LinkBlock.tsx

@@ -11,8 +11,10 @@ import { Heading } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
 import type { LinkBlockEmbedData } from "@ndla/types-embed";
+import { toIntlLanguage } from "@ndla/util";
 import parse from "html-react-parser";
 import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
 
 const InfoWrapper = styled("div", {
@@ -73,16 +75,17 @@ interface Props extends Omit<LinkBlockEmbedData, "resource"> {
 }
 
 export const LinkBlock = ({ title, articleLanguage, date, url, path }: Props) => {
+  const { i18n } = useTranslation();
   const href = getPossiblyRelativeUrl(url, path);
   const formattedDate = useMemo(() => {
     if (!date) return null;
-    return new Intl.DateTimeFormat(articleLanguage, {
+    return new Intl.DateTimeFormat(toIntlLanguage(articleLanguage ?? i18n.language), {
       timeZone: "CET",
       day: "2-digit",
       month: "long",
       year: "numeric",
     }).format(new Date(date));
-  }, [date, articleLanguage]);
+  }, [date, articleLanguage, i18n.language]);
   return (
     <StyledSafeLink to={href} data-embed-type="link-block">
       <InfoWrapper>