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

package/lib/i18n/index.d.ts

@@ -7,4 +7,4 @@
  */
 export { i18nInstance } from "./i18n";
 export { formatNestedMessages } from "./formatNestedMessages";
-export { useComboboxTranslations, useTagSelectorTranslations, useTagsInputTranslations, usePaginationTranslations, useAudioSearchTranslations, useImageSearchTranslations, useVideoSearchTranslations, } from "./useComponentTranslations";
+export { useComboboxTranslations, useTagSelectorTranslations, useTagsInputTranslations, usePaginationTranslations, useAudioSearchTranslations, useImageSearchTranslations, useVideoSearchTranslations, useDatePickerTranslations, } from "./useComponentTranslations";

package/lib/i18n/useComponentTranslations.d.ts

@@ -6,7 +6,7 @@
  *
  */
 import type { CollectionItem } from "@ark-ui/react";
-import type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps } from "@ndla/primitives";
+import type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps, DatePickerRootProps } from "@ndla/primitives";
 import { type TagSelectorRootProps } from "../TagSelector/TagSelector";
 type DeepPartial<T> = {
     [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
@@ -53,4 +53,5 @@ interface ImageSearchTranslations {
 export declare const useImageSearchTranslations: (translations?: DeepPartial<ImageSearchTranslations>) => ImageSearchTranslations;
 export declare const useAudioSearchTranslations: (translations?: DeepPartial<AudioSearchTranslations>) => AudioSearchTranslations;
 export declare const useVideoSearchTranslations: (translations?: Partial<VideoTranslations>) => VideoTranslations;
+export declare const useDatePickerTranslations: (translations?: Partial<DatePickerRootProps["translations"]>) => NonNullable<DatePickerRootProps["translations"]>;
 export {};

package/lib/index.d.ts

@@ -26,7 +26,7 @@ export { default as messagesEN } from "./locale/messages-en";
 export { default as messagesSE } from "./locale/messages-se";
 export { default as Breadcrumb, HomeBreadcrumb } from "./Breadcrumb";
 export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from "./Breadcrumb";
-export { i18nInstance, formatNestedMessages, useTagsInputTranslations, useTagSelectorTranslations, useComboboxTranslations, usePaginationTranslations, useAudioSearchTranslations, useImageSearchTranslations, useVideoSearchTranslations, } from "./i18n";
+export { i18nInstance, formatNestedMessages, useTagsInputTranslations, useTagSelectorTranslations, useComboboxTranslations, usePaginationTranslations, useAudioSearchTranslations, useImageSearchTranslations, useVideoSearchTranslations, useDatePickerTranslations, } from "./i18n";
 export type { ContentTypeBadgeProps, StrictContentType, ContentType } from "./ContentTypeBadge/ContentTypeBadge";
 export { ContentTypeBadge, contentTypeToBadgeVariantMap } from "./ContentTypeBadge/ContentTypeBadge";
 export { ContentTypeBlockQuote } from "./ContentTypeBlockQuote/ContentTypeBlockQuote";

package/lib/locale/messages-en.d.ts

@@ -363,6 +363,40 @@ declare const messages: {
             is360Video: string;
             close: string;
         };
+        datePicker: {
+            dayCell: {
+                unavailable: string;
+                selected: string;
+                select: string;
+            };
+            nextTrigger: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            prevTrigger: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            monthSelect: string;
+            yearSelect: string;
+            viewTrigger: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            presetTrigger: {
+                single: string;
+                range: string;
+            };
+            clearTrigger: string;
+            trigger: {
+                open: string;
+                close: string;
+            };
+            content: string;
+        };
     };
     richTextEditor: {
         tooltip: {

package/lib/locale/messages-nb.d.ts

@@ -363,6 +363,40 @@ declare const messages: {
             is360Video: string;
             close: string;
         };
+        datePicker: {
+            dayCell: {
+                unavailable: string;
+                selected: string;
+                select: string;
+            };
+            nextTrigger: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            prevTrigger: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            monthSelect: string;
+            yearSelect: string;
+            viewTrigger: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            presetTrigger: {
+                single: string;
+                range: string;
+            };
+            clearTrigger: string;
+            trigger: {
+                open: string;
+                close: string;
+            };
+            content: string;
+        };
     };
     richTextEditor: {
         tooltip: {

package/lib/locale/messages-nn.d.ts

@@ -363,6 +363,40 @@ declare const messages: {
             is360Video: string;
             close: string;
         };
+        datePicker: {
+            dayCell: {
+                unavailable: string;
+                selected: string;
+                select: string;
+            };
+            nextTrigger: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            prevTrigger: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            monthSelect: string;
+            yearSelect: string;
+            viewTrigger: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            presetTrigger: {
+                single: string;
+                range: string;
+            };
+            clearTrigger: string;
+            trigger: {
+                open: string;
+                close: string;
+            };
+            content: string;
+        };
     };
     richTextEditor: {
         tooltip: {

package/lib/locale/messages-se.d.ts

@@ -363,6 +363,40 @@ declare const messages: {
             is360Video: string;
             close: string;
         };
+        datePicker: {
+            dayCell: {
+                unavailable: string;
+                selected: string;
+                select: string;
+            };
+            nextTrigger: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            prevTrigger: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            monthSelect: string;
+            yearSelect: string;
+            viewTrigger: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            presetTrigger: {
+                single: string;
+                range: string;
+            };
+            clearTrigger: string;
+            trigger: {
+                open: string;
+                close: string;
+            };
+            content: string;
+        };
     };
     richTextEditor: {
         tooltip: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.121-alpha.0",
+  "version": "56.0.122-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,11 +32,12 @@
     "types"
   ],
   "dependencies": {
+    "@ark-ui/react": "^5.9.0",
     "@ndla/core": "^6.0.0-alpha.0",
     "@ndla/icons": "^8.0.58-alpha.0",
     "@ndla/licenses": "^9.0.1",
-    "@ndla/primitives": "^1.0.87-alpha.0",
-    "@ndla/safelink": "^7.0.89-alpha.0",
+    "@ndla/primitives": "^1.0.88-alpha.0",
+    "@ndla/safelink": "^7.0.90-alpha.0",
     "@ndla/styled-system": "^0.0.34",
     "@ndla/util": "^5.0.8-alpha.0",
     "html-react-parser": "^5.1.19"
@@ -46,7 +47,7 @@
     "react": ">= 18",
     "react-dom": ">= 18",
     "react-i18next": "^15.4.1",
-    "react-router": ">= 6.0.0"
+    "react-router-dom": ">= 6.0.0"
   },
   "devDependencies": {
     "@ndla/preset-panda": "^0.0.54",
@@ -57,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d9ad62bb693321e31691b09d045af548f650c049"
+  "gitHead": "52adafa4348c1c02ebc4da28317aa5270cbe2a80"
 }

package/src/Article/ArticleByline.tsx

@@ -9,7 +9,7 @@
 import type { TFunction } from "i18next";
 import { type ReactNode, forwardRef, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router";
+import { useLocation } from "react-router-dom";
 import { ArrowDownShortLine } from "@ndla/icons";
 import {
   AccordionItem,

package/src/i18n/index.ts

@@ -16,4 +16,5 @@ export {
   useAudioSearchTranslations,
   useImageSearchTranslations,
   useVideoSearchTranslations,
+  useDatePickerTranslations,
 } from "./useComponentTranslations";

package/src/i18n/useComponentTranslations.ts

@@ -8,7 +8,7 @@
 
 import { useTranslation } from "react-i18next";
 import type { CollectionItem } from "@ark-ui/react";
-import type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps } from "@ndla/primitives";
+import type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps, DatePickerRootProps } from "@ndla/primitives";
 import { type TagSelectorRootProps } from "../TagSelector/TagSelector";
 import { useMemo } from "react";
 
@@ -198,3 +198,38 @@ export const useVideoSearchTranslations = (translations?: Partial<VideoTranslati
     [t, translations],
   );
 };
+
+export const useDatePickerTranslations = (
+  translations?: Partial<DatePickerRootProps["translations"]>,
+): NonNullable<DatePickerRootProps["translations"]> => {
+  const { t } = useTranslation("translation", { keyPrefix: "component.datePicker" });
+
+  return useMemo(
+    () => ({
+      dayCell: (state) => {
+        if (state.unavailable) {
+          return t("dayCell.unavailable", { date: state.formattedDate });
+        } else if (state.selected) {
+          return t("dayCell.selected", { date: state.formattedDate });
+        } else return t("dayCell.select", { date: state.formattedDate });
+      },
+      nextTrigger: (view) => t(`nextTrigger.${view}`),
+      prevTrigger: (view) => t(`prevTrigger.${view}`),
+      monthSelect: t("monthSelect"),
+      yearSelect: t("yearSelect"),
+      viewTrigger: (view) => t(`viewTrigger.${view}`),
+      presetTrigger: (value) => {
+        if (Array.isArray(value)) {
+          return t("presetTrigger.range", { start: value[0], end: value[1] });
+        } else return t("presetTrigger.single", { date: value });
+      },
+      clearTrigger: t("clearTrigger"),
+      trigger: (open) => t(`trigger.${open ? "close" : "open"}`),
+      content: t("content"),
+      placeholder: (_locale) => {
+        return { day: "dd", month: "mm", year: "yyyy" };
+      },
+    }),
+    [t, translations],
+  );
+};

package/src/index.ts

@@ -89,6 +89,7 @@ export {
   useAudioSearchTranslations,
   useImageSearchTranslations,
   useVideoSearchTranslations,
+  useDatePickerTranslations,
 } from "./i18n";
 
 export type { ContentTypeBadgeProps, StrictContentType, ContentType } from "./ContentTypeBadge/ContentTypeBadge";

package/src/locale/messages-en.ts

@@ -402,6 +402,40 @@ const messages = {
       is360Video: "VR video",
       close: "Lukk",
     },
+    datePicker: {
+      dayCell: {
+        unavailable: "Unavailable date. {{date}}",
+        selected: "Selected date. {{date}}",
+        select: "Select date. {{date}}",
+      },
+      nextTrigger: {
+        day: "Go to next month",
+        month: "Go to next year",
+        year: "Go to next decade",
+      },
+      prevTrigger: {
+        day: "Go to previous month",
+        month: "Go to previous year",
+        year: "Go to previous decade",
+      },
+      monthSelect: "Select month",
+      yearSelect: "Select year",
+      viewTrigger: {
+        day: "Switch to day view",
+        month: "Switch to month view",
+        year: "Switch to year view",
+      },
+      presetTrigger: {
+        single: "Select {{date}}",
+        range: "Select from {{start}} to {{end}}",
+      },
+      clearTrigger: "Clear selected dates",
+      trigger: {
+        open: "Open date picker",
+        close: "Close date picker",
+      },
+      content: "Calendar",
+    },
   },
   richTextEditor: {
     tooltip: {

package/src/locale/messages-nb.ts

@@ -403,6 +403,40 @@ const messages = {
       is360Video: "VR-video",
       close: "Lukk",
     },
+    datePicker: {
+      dayCell: {
+        unavailable: "Ikke tilgjengelig dato. {{date}}",
+        selected: "Valgt dato. {{date}}",
+        select: "Velg dato. {{date}}",
+      },
+      nextTrigger: {
+        day: "Gå til neste måned",
+        month: "Gå til neste år",
+        year: "Gå til neste tiår",
+      },
+      prevTrigger: {
+        day: "Gå til forrige måned",
+        month: "Gå til forrige år",
+        year: "Gå til forrige tiår",
+      },
+      monthSelect: "Velg måned",
+      yearSelect: "Velg år",
+      viewTrigger: {
+        day: "Bytt til dagvisning",
+        month: "Bytt til månedvisning",
+        year: "Bytt til årvisning",
+      },
+      presetTrigger: {
+        single: "Velg {{date}}",
+        range: "Velg fra {{start}} til {{end}}",
+      },
+      clearTrigger: "Fjern valgte datoer",
+      trigger: {
+        open: "Åpne datovelger",
+        close: "Lukk datovelger",
+      },
+      content: "Kalender",
+    },
   },
   richTextEditor: {
     tooltip: {

package/src/locale/messages-nn.ts

@@ -403,6 +403,40 @@ const messages = {
       is360Video: "VR-video",
       close: "Lukk",
     },
+    datePicker: {
+      dayCell: {
+        unavailable: "Ikkje tilgjengelig dato. {{date}}",
+        selected: "Valt dato. {{date}}",
+        select: "Velg dato. {{date}}",
+      },
+      nextTrigger: {
+        day: "Gå til neste måned",
+        month: "Gå til neste år",
+        year: "Gå til neste tiår",
+      },
+      prevTrigger: {
+        day: "Gå til forrige måned",
+        month: "Gå til forrige år",
+        year: "Gå til forrige tiår",
+      },
+      monthSelect: "Velg måned",
+      yearSelect: "Velg år",
+      viewTrigger: {
+        day: "Bytt til dagvising",
+        month: "Bytt til månedvising",
+        year: "Bytt til årvising",
+      },
+      presetTrigger: {
+        single: "Velg {{date}}",
+        range: "Velg fra {{start}} til {{end}}",
+      },
+      clearTrigger: "Fjern valte datoer",
+      trigger: {
+        open: "Åpne datoveljar",
+        close: "Lukk datoveljar",
+      },
+      content: "Kalender",
+    },
   },
   richTextEditor: {
     tooltip: {

package/src/locale/messages-se.ts

@@ -404,6 +404,40 @@ const messages = {
       is360Video: "VR-video",
       close: "Lukk",
     },
+    datePicker: {
+      dayCell: {
+        unavailable: "Ikke tilgjengelig dato. {{date}}",
+        selected: "Valgt dato. {{date}}",
+        select: "Velg dato. {{date}}",
+      },
+      nextTrigger: {
+        day: "Gå til neste måned",
+        month: "Gå til neste år",
+        year: "Gå til neste tiår",
+      },
+      prevTrigger: {
+        day: "Gå til forrige måned",
+        month: "Gå til forrige år",
+        year: "Gå til forrige tiår",
+      },
+      monthSelect: "Velg måned",
+      yearSelect: "Velg år",
+      viewTrigger: {
+        day: "Bytt til dagvisning",
+        month: "Bytt til månedvisning",
+        year: "Bytt til årvisning",
+      },
+      presetTrigger: {
+        single: "Velg {{date}}",
+        range: "Velg fra {{start}} til {{end}}",
+      },
+      clearTrigger: "Fjern valgte datoer",
+      trigger: {
+        open: "Åpne datovelger",
+        close: "Lukk datovelger",
+      },
+      content: "Kalender",
+    },
   },
   richTextEditor: {
     tooltip: {

package/es/Article/Article.js

@@ -1,199 +0,0 @@
-/**
- * Copyright (c) 2016-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 { ark } from "@ark-ui/react";
-import { Heading, Text } from "@ndla/primitives";
-import { cx } from "@ndla/styled-system/css";
-import { Stack, styled } from "@ndla/styled-system/jsx";
-import { ArticleByline } from "./ArticleByline";
-import { ContentTypeBadge } from "../ContentTypeBadge/ContentTypeBadge";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const StyledArticleContent = styled(ark.section, {}, {
-  baseComponent: true
-});
-export const ArticleContent = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    className,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/_jsx(StyledArticleContent, {
-    className: cx("ndla-article", className),
-    ...props,
-    ref: ref
-  });
-});
-const StyledArticleWrapper = styled(ark.article, {
-  base: {
-    background: "background.default",
-    display: "flex",
-    flexDirection: "column",
-    color: "text.default",
-    alignItems: "center",
-    width: "100%",
-    overflowWrap: "break-word",
-    position: "relative",
-    "& mjx-stretchy-v > mjx-ext > mjx-c": {
-      transform: "scaleY(100) translateY(0.075em)"
-    },
-    _after: {
-      content: "",
-      display: "table",
-      clear: "both"
-    }
-  }
-}, {
-  baseComponent: true
-});
-export const ArticleWrapper = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(StyledArticleWrapper, {
-  "data-ndla-article": "",
-  ref: ref,
-  ...props
-}));
-export const ArticleHGroup = styled(ark.hgroup, {
-  base: {
-    display: "flex",
-    width: "100%",
-    flexDirection: "column",
-    alignItems: "flex-start",
-    "& h1": {
-      overflowWrap: "anywhere"
-    }
-  }
-}, {
-  baseComponent: true
-});
-export const ArticleHeader = styled(ark.header, {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "medium",
-    alignItems: "flex-start",
-    width: "100%",
-    paddingBlockStart: "xxlarge",
-    overflowWrap: "anywhere"
-  }
-}, {
-  baseComponent: true
-});
-export const ArticleFooter = styled(ark.footer, {
-  base: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "xxlarge",
-    width: "100%",
-    "& > :is(:last-child)": {
-      paddingBlockEnd: "5xlarge"
-    }
-  }
-}, {
-  baseComponent: true
-});
-const StyledStack = styled(Stack, {
-  base: {
-    width: "100%",
-    minHeight: "xxlarge"
-  }
-});
-const StyledWrapper = styled("div", {
-  base: {
-    display: "flex",
-    gap: "small",
-    flexWrap: "wrap",
-    alignItems: "center"
-  }
-});
-export const ArticleTitle = _ref2 => {
-  let {
-    contentType,
-    heartButton,
-    title,
-    lang,
-    id,
-    introduction,
-    contentTypeLabel,
-    competenceGoals,
-    disclaimer
-  } = _ref2;
-  return /*#__PURE__*/_jsxs(ArticleHeader, {
-    children: [/*#__PURE__*/_jsxs(ArticleHGroup, {
-      children: [(!!contentType || !!heartButton) && /*#__PURE__*/_jsxs(StyledStack, {
-        justify: "space-between",
-        align: "center",
-        direction: "row",
-        gap: "small",
-        children: [!!contentType && /*#__PURE__*/_jsx(ContentTypeBadge, {
-          contentType: contentType,
-          children: contentTypeLabel
-        }), heartButton]
-      }), /*#__PURE__*/_jsx(Heading, {
-        textStyle: "heading.medium",
-        id: id,
-        lang: lang,
-        property: "dct:title",
-        children: title
-      })]
-    }), !!introduction && /*#__PURE__*/_jsx(Text, {
-      lang: lang,
-      textStyle: "body.xlarge",
-      asChild: true,
-      consumeCss: true,
-      children: /*#__PURE__*/_jsx("div", {
-        children: introduction
-      })
-    }), /*#__PURE__*/_jsxs(StyledWrapper, {
-      children: [competenceGoals, disclaimer]
-    })]
-  });
-};
-export const Article = _ref3 => {
-  let {
-    article,
-    contentType,
-    licenseBox,
-    children,
-    competenceGoals,
-    contentTypeLabel,
-    id,
-    heartButton,
-    lang,
-    disclaimer
-  } = _ref3;
-  const {
-    title,
-    introduction,
-    published,
-    content,
-    footNotes,
-    copyright
-  } = article;
-  const authors = copyright?.creators.length || copyright?.rightsholders.length ? copyright.creators : copyright?.processors;
-  return /*#__PURE__*/_jsxs(ArticleWrapper, {
-    children: [/*#__PURE__*/_jsx(ArticleTitle, {
-      id: id,
-      contentType: contentType,
-      heartButton: heartButton,
-      title: title,
-      introduction: introduction,
-      competenceGoals: competenceGoals,
-      lang: lang,
-      contentTypeLabel: contentTypeLabel,
-      disclaimer: disclaimer
-    }), /*#__PURE__*/_jsx(ArticleContent, {
-      children: content
-    }), /*#__PURE__*/_jsxs(ArticleFooter, {
-      children: [/*#__PURE__*/_jsx(ArticleByline, {
-        footnotes: footNotes,
-        authors: authors,
-        suppliers: copyright?.rightsholders,
-        published: published,
-        licenseBox: licenseBox
-      }), children]
-    })]
-  });
-};