@ndla/ui 56.0.170-alpha.0 → 56.0.172-alpha.0

package/lib/index.js

@@ -1,3 +1,4 @@
+const require_rolldown_runtime = require('./_virtual/rolldown_runtime.js');
 const require_LicenseLink = require('./LicenseByline/LicenseLink.js');
 const require_EmbedByline = require('./LicenseByline/EmbedByline.js');
 const require_licenseAttributes = require('./utils/licenseAttributes.js');
@@ -26,10 +27,10 @@ const require_CodeBlock = require('./CodeBlock/CodeBlock.js');
 const require_codeLanguageOptions = require('./CodeBlock/codeLanguageOptions.js');
 const require_CodeEmbed = require('./Embed/CodeEmbed.js');
 const require_EmbedWrapper = require('./Embed/EmbedWrapper.js');
-const require_ArticleFootNotes = require('./Article/ArticleFootNotes.js');
-const require_ArticleByline = require('./Article/ArticleByline.js');
 const require_BadgesContainer = require('./Article/BadgesContainer.js');
 const require_Article = require('./Article/Article.js');
+const require_ArticleFootNotes = require('./Article/ArticleFootNotes.js');
+const require_ArticleByline = require('./Article/ArticleByline.js');
 const require_relativeUrl = require('./utils/relativeUrl.js');
 const require_FileList = require('./FileList/FileList.js');
 const require_File = require('./FileList/File.js');
@@ -40,16 +41,10 @@ const require_SubjectCategories = require('./model/SubjectCategories.js');
 const require_SubjectTypes = require('./model/SubjectTypes.js');
 const require_WordClass = require('./model/WordClass.js');
 const require_index = require('./model/index.js');
-const require_messages_nb = require('./locale/messages-nb.js');
-const require_messages_nn = require('./locale/messages-nn.js');
-const require_messages_en = require('./locale/messages-en.js');
-const require_messages_se = require('./locale/messages-se.js');
 const require_Breadcrumb = require('./Breadcrumb/Breadcrumb.js');
 const require_HomeBreadcrumb = require('./Breadcrumb/HomeBreadcrumb.js');
-const require_formatNestedMessages = require('./i18n/formatNestedMessages.js');
 const require_TagSelector = require('./TagSelector/TagSelector.js');
 const require_useComponentTranslations = require('./i18n/useComponentTranslations.js');
-const require_ContentTypeBadge = require('./ContentTypeBadge/ContentTypeBadge.js');
 const require_AnchorHeading = require('./AnchorHeading/AnchorHeading.js');
 const require_Pitch = require('./Pitch/Pitch.js');
 const require_KeyFigure = require('./KeyFigure/KeyFigure.js');
@@ -59,9 +54,9 @@ const require_Grid = require('./Grid/Grid.js');
 const require_LinkBlock = require('./LinkBlock/LinkBlock.js');
 const require_LinkBlockSection = require('./LinkBlock/LinkBlockSection.js');
 const require_ZendeskButton = require('./ZendeskButton/ZendeskButton.js');
+let _ndla_locales = require("@ndla/locales");
 
 exports.AnchorHeading = require_AnchorHeading.AnchorHeading;
-exports.Article = require_Article.Article;
 exports.ArticleByline = require_ArticleByline.ArticleByline;
 exports.ArticleBylineAccordionItem = require_ArticleByline.ArticleBylineAccordionItem;
 exports.ArticleContent = require_Article.ArticleContent;
@@ -85,7 +80,6 @@ exports.ConceptEmbed = require_ConceptEmbed.ConceptEmbed;
 exports.ConceptInlineTriggerButton = require_ConceptInlineTriggerButton.ConceptInlineTriggerButton;
 exports.ContactBlock = require_ContactBlock.ContactBlock;
 exports.ContentLinkEmbed = require_ContentLinkEmbed.ContentLinkEmbed;
-exports.ContentTypeBadge = require_ContentTypeBadge.ContentTypeBadge;
 exports.CopyrightEmbed = require_CopyrightEmbed.CopyrightEmbed;
 exports.EmbedByline = require_EmbedByline.EmbedByline;
 exports.EmbedWrapper = require_EmbedWrapper.EmbedWrapper;
@@ -132,17 +126,35 @@ exports.codeLanguageOptions = require_codeLanguageOptions.codeLanguageOptions;
 exports.constants = require_index.constants;
 exports.contactBlockBackgrounds = require_ContactBlock.contactBlockBackgrounds;
 exports.contentTypeMapping = require_ContentType.contentTypeMapping;
-exports.contentTypeToBadgeVariantMap = require_ContentTypeBadge.contentTypeToBadgeVariantMap;
 exports.contentTypes = require_ContentType.contentTypes;
-exports.formatNestedMessages = require_formatNestedMessages.formatNestedMessages;
 exports.getCrop = require_ImageEmbed.getCrop;
 exports.getFocalPoint = require_ImageEmbed.getFocalPoint;
 exports.getPossiblyRelativeUrl = require_relativeUrl.getPossiblyRelativeUrl;
 exports.licenseAttributes = require_licenseAttributes.licenseAttributes;
-exports.messagesEN = require_messages_en;
-exports.messagesNB = require_messages_nb;
-exports.messagesNN = require_messages_nn;
-exports.messagesSE = require_messages_se;
+Object.defineProperty(exports, 'messagesEN', {
+  enumerable: true,
+  get: function () {
+    return _ndla_locales.messagesEN;
+  }
+});
+Object.defineProperty(exports, 'messagesNB', {
+  enumerable: true,
+  get: function () {
+    return _ndla_locales.messagesNB;
+  }
+});
+Object.defineProperty(exports, 'messagesNN', {
+  enumerable: true,
+  get: function () {
+    return _ndla_locales.messagesNN;
+  }
+});
+Object.defineProperty(exports, 'messagesSE', {
+  enumerable: true,
+  get: function () {
+    return _ndla_locales.messagesSE;
+  }
+});
 exports.resourceEmbedTypeMapping = require_ContentType.resourceEmbedTypeMapping;
 exports.subjectCategories = require_SubjectCategories.subjectCategories;
 exports.subjectTypes = require_SubjectTypes.subjectTypes;

package/lib/model/ContentType.js

@@ -18,11 +18,6 @@ const MULTIDISCIPLINARY = "multidisciplinary";
 const CONCEPT = "concept";
 const EXTERNAL = "external";
 const MISSING = "missing";
-const IMAGE = "image";
-const VIDEO = "video";
-const AUDIO = "audio";
-const PODCAST = "podcast";
-const GLOSS = "gloss";
 const PROGRAMME = "programme";
 const PODCAST_SERIES = "podcast-series";
 const FRONTPAGE_ARTICLE = "frontpage-article";
@@ -69,25 +64,6 @@ const resourceEmbedTypeMapping = {
 };
 
 //#endregion
-exports.ASSESSMENT_RESOURCES = ASSESSMENT_RESOURCES;
-exports.AUDIO = AUDIO;
-exports.CONCEPT = CONCEPT;
-exports.EXTERNAL = EXTERNAL;
-exports.FRONTPAGE_ARTICLE = FRONTPAGE_ARTICLE;
-exports.GLOSS = GLOSS;
-exports.IMAGE = IMAGE;
-exports.LEARNING_PATH = LEARNING_PATH;
-exports.MISSING = MISSING;
-exports.MULTIDISCIPLINARY = MULTIDISCIPLINARY;
-exports.PODCAST = PODCAST;
-exports.PODCAST_SERIES = PODCAST_SERIES;
-exports.PROGRAMME = PROGRAMME;
-exports.SOURCE_MATERIAL = SOURCE_MATERIAL;
-exports.SUBJECT = SUBJECT;
-exports.SUBJECT_MATERIAL = SUBJECT_MATERIAL;
-exports.TASKS_AND_ACTIVITIES = TASKS_AND_ACTIVITIES;
-exports.TOPIC = TOPIC;
-exports.VIDEO = VIDEO;
 exports.contentTypeMapping = contentTypeMapping;
 exports.contentTypes = contentTypes;
 exports.resourceEmbedTypeMapping = resourceEmbedTypeMapping;

package/lib/model/ContentType.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentType.js","names":[],"sources":["../../src/model/ContentType.ts"],"sourcesContent":["/**\n * Copyright (c) 2017-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\nexport const SUBJECT_MATERIAL = \"subject-material\";\nexport const TASKS_AND_ACTIVITIES = \"tasks-and-activities\";\nexport const ASSESSMENT_RESOURCES = \"assessment-resources\";\nexport const SUBJECT = \"subject\";\nexport const SOURCE_MATERIAL = \"source-material\";\nexport const LEARNING_PATH = \"learning-path\";\nexport const TOPIC = \"topic\";\nexport const MULTIDISCIPLINARY = \"multidisciplinary\";\nexport const CONCEPT = \"concept\";\nexport const EXTERNAL = \"external\";\nexport const MISSING = \"missing\";\nexport const IMAGE = \"image\";\nexport const VIDEO = \"video\";\nexport const AUDIO = \"audio\";\nexport const PODCAST = \"podcast\";\nexport const GLOSS = \"gloss\";\nexport const PROGRAMME = \"programme\";\nexport const PODCAST_SERIES = \"podcast-series\";\nexport const FRONTPAGE_ARTICLE = \"frontpage-article\";\n\nexport const contentTypes = {\n  SUBJECT_MATERIAL,\n  TASKS_AND_ACTIVITIES,\n  ASSESSMENT_RESOURCES,\n  SUBJECT,\n  SOURCE_MATERIAL,\n  LEARNING_PATH,\n  TOPIC,\n  MULTIDISCIPLINARY,\n  CONCEPT,\n  EXTERNAL,\n  MISSING,\n  PROGRAMME,\n  PODCAST_SERIES,\n};\n\nexport const RESOURCE_TYPE_LEARNING_PATH = \"urn:resourcetype:learningPath\";\nexport const RESOURCE_TYPE_SUBJECT_MATERIAL = \"urn:resourcetype:subjectMaterial\";\nexport const RESOURCE_TYPE_TASKS_AND_ACTIVITIES = \"urn:resourcetype:tasksAndActivities\";\nexport const RESOURCE_TYPE_ASSESSMENT_RESOURCES = \"urn:resourcetype:reviewResource\";\nexport const RESOURCE_TYPE_SOURCE_MATERIAL = \"urn:resourcetype:SourceMaterial\";\nexport const RESOURCE_TYPE_CONCEPT = \"urn:resourcetype:concept\";\n\nexport const contentTypeMapping: Record<string, string> = {\n  [RESOURCE_TYPE_LEARNING_PATH]: LEARNING_PATH,\n  [RESOURCE_TYPE_SUBJECT_MATERIAL]: SUBJECT_MATERIAL,\n  [RESOURCE_TYPE_TASKS_AND_ACTIVITIES]: TASKS_AND_ACTIVITIES,\n  [RESOURCE_TYPE_ASSESSMENT_RESOURCES]: ASSESSMENT_RESOURCES,\n  [RESOURCE_TYPE_SOURCE_MATERIAL]: SOURCE_MATERIAL,\n  [RESOURCE_TYPE_CONCEPT]: CONCEPT,\n  [MULTIDISCIPLINARY]: MULTIDISCIPLINARY,\n  [TOPIC]: TOPIC,\n  [FRONTPAGE_ARTICLE]: FRONTPAGE_ARTICLE,\n  default: SUBJECT_MATERIAL,\n};\n\nexport const resourceEmbedTypeMapping: Record<string, string> = {\n  image: \"image\",\n  video: \"video\",\n  concept: \"concept\",\n  audio: \"audio\",\n  podcast: \"podcast\",\n  gloss: \"gloss\",\n};\n"],"mappings":";;;;;;;;;AAQA,MAAa,mBAAmB;AAChC,MAAa,uBAAuB;AACpC,MAAa,uBAAuB;AACpC,MAAa,UAAU;AACvB,MAAa,kBAAkB;AAC/B,MAAa,gBAAgB;AAC7B,MAAa,QAAQ;AACrB,MAAa,oBAAoB;AACjC,MAAa,UAAU;AACvB,MAAa,WAAW;AACxB,MAAa,UAAU;AACvB,MAAa,QAAQ;AACrB,MAAa,QAAQ;AACrB,MAAa,QAAQ;AACrB,MAAa,UAAU;AACvB,MAAa,QAAQ;AACrB,MAAa,YAAY;AACzB,MAAa,iBAAiB;AAC9B,MAAa,oBAAoB;AAEjC,MAAa,eAAe;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,8BAA8B;AAC3C,MAAa,iCAAiC;AAC9C,MAAa,qCAAqC;AAClD,MAAa,qCAAqC;AAClD,MAAa,gCAAgC;AAC7C,MAAa,wBAAwB;AAErC,MAAa,qBAA6C;EACvD,8BAA8B;EAC9B,iCAAiC;EACjC,qCAAqC;EACrC,qCAAqC;EACrC,gCAAgC;EAChC,wBAAwB;EACxB,oBAAoB;EACpB,QAAQ;EACR,oBAAoB;CACrB,SAAS;CACV;AAED,MAAa,2BAAmD;CAC9D,OAAO;CACP,OAAO;CACP,SAAS;CACT,OAAO;CACP,SAAS;CACT,OAAO;CACR"}
+{"version":3,"file":"ContentType.js","names":[],"sources":["../../src/model/ContentType.ts"],"sourcesContent":["/**\n * Copyright (c) 2017-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\nexport const SUBJECT_MATERIAL = \"subject-material\";\nexport const TASKS_AND_ACTIVITIES = \"tasks-and-activities\";\nexport const ASSESSMENT_RESOURCES = \"assessment-resources\";\nexport const SUBJECT = \"subject\";\nexport const SOURCE_MATERIAL = \"source-material\";\nexport const LEARNING_PATH = \"learning-path\";\nexport const TOPIC = \"topic\";\nexport const MULTIDISCIPLINARY = \"multidisciplinary\";\nexport const CONCEPT = \"concept\";\nexport const EXTERNAL = \"external\";\nexport const MISSING = \"missing\";\nexport const IMAGE = \"image\";\nexport const VIDEO = \"video\";\nexport const AUDIO = \"audio\";\nexport const PODCAST = \"podcast\";\nexport const GLOSS = \"gloss\";\nexport const PROGRAMME = \"programme\";\nexport const PODCAST_SERIES = \"podcast-series\";\nexport const FRONTPAGE_ARTICLE = \"frontpage-article\";\n\nexport const contentTypes = {\n  SUBJECT_MATERIAL,\n  TASKS_AND_ACTIVITIES,\n  ASSESSMENT_RESOURCES,\n  SUBJECT,\n  SOURCE_MATERIAL,\n  LEARNING_PATH,\n  TOPIC,\n  MULTIDISCIPLINARY,\n  CONCEPT,\n  EXTERNAL,\n  MISSING,\n  PROGRAMME,\n  PODCAST_SERIES,\n};\n\nexport const RESOURCE_TYPE_LEARNING_PATH = \"urn:resourcetype:learningPath\";\nexport const RESOURCE_TYPE_SUBJECT_MATERIAL = \"urn:resourcetype:subjectMaterial\";\nexport const RESOURCE_TYPE_TASKS_AND_ACTIVITIES = \"urn:resourcetype:tasksAndActivities\";\nexport const RESOURCE_TYPE_ASSESSMENT_RESOURCES = \"urn:resourcetype:reviewResource\";\nexport const RESOURCE_TYPE_SOURCE_MATERIAL = \"urn:resourcetype:SourceMaterial\";\nexport const RESOURCE_TYPE_CONCEPT = \"urn:resourcetype:concept\";\n\nexport const contentTypeMapping: Record<string, string> = {\n  [RESOURCE_TYPE_LEARNING_PATH]: LEARNING_PATH,\n  [RESOURCE_TYPE_SUBJECT_MATERIAL]: SUBJECT_MATERIAL,\n  [RESOURCE_TYPE_TASKS_AND_ACTIVITIES]: TASKS_AND_ACTIVITIES,\n  [RESOURCE_TYPE_ASSESSMENT_RESOURCES]: ASSESSMENT_RESOURCES,\n  [RESOURCE_TYPE_SOURCE_MATERIAL]: SOURCE_MATERIAL,\n  [RESOURCE_TYPE_CONCEPT]: CONCEPT,\n  [MULTIDISCIPLINARY]: MULTIDISCIPLINARY,\n  [TOPIC]: TOPIC,\n  [FRONTPAGE_ARTICLE]: FRONTPAGE_ARTICLE,\n  default: SUBJECT_MATERIAL,\n};\n\nexport const resourceEmbedTypeMapping: Record<string, string> = {\n  image: \"image\",\n  video: \"video\",\n  concept: \"concept\",\n  audio: \"audio\",\n  podcast: \"podcast\",\n  gloss: \"gloss\",\n};\n"],"mappings":";;;;;;;;;AAQA,MAAa,mBAAmB;AAChC,MAAa,uBAAuB;AACpC,MAAa,uBAAuB;AACpC,MAAa,UAAU;AACvB,MAAa,kBAAkB;AAC/B,MAAa,gBAAgB;AAC7B,MAAa,QAAQ;AACrB,MAAa,oBAAoB;AACjC,MAAa,UAAU;AACvB,MAAa,WAAW;AACxB,MAAa,UAAU;AAMvB,MAAa,YAAY;AACzB,MAAa,iBAAiB;AAC9B,MAAa,oBAAoB;AAEjC,MAAa,eAAe;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,8BAA8B;AAC3C,MAAa,iCAAiC;AAC9C,MAAa,qCAAqC;AAClD,MAAa,qCAAqC;AAClD,MAAa,gCAAgC;AAC7C,MAAa,wBAAwB;AAErC,MAAa,qBAA6C;EACvD,8BAA8B;EAC9B,iCAAiC;EACjC,qCAAqC;EACrC,qCAAqC;EACrC,gCAAgC;EAChC,wBAAwB;EACxB,oBAAoB;EACpB,QAAQ;EACR,oBAAoB;CACrB,SAAS;CACV;AAED,MAAa,2BAAmD;CAC9D,OAAO;CACP,OAAO;CACP,SAAS;CACT,OAAO;CACP,SAAS;CACT,OAAO;CACR"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ndla/ui",
   "type": "module",
-  "version": "56.0.170-alpha.0",
+  "version": "56.0.172-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "exports": {
@@ -36,12 +36,13 @@
     "types"
   ],
   "dependencies": {
-    "@ark-ui/react": "^5.25.0",
+    "@ark-ui/react": "^5.30.0",
     "@ndla/core": "^6.0.7-alpha.0",
     "@ndla/icons": "^8.0.77-alpha.0",
     "@ndla/licenses": "^10.0.9-alpha.0",
-    "@ndla/primitives": "^1.0.117-alpha.0",
-    "@ndla/safelink": "^7.0.120-alpha.0",
+    "@ndla/locales": "^0.0.1",
+    "@ndla/primitives": "^1.0.119-alpha.0",
+    "@ndla/safelink": "^7.0.122-alpha.0",
     "@ndla/styled-system": "^0.0.46",
     "@ndla/util": "^5.0.18-alpha.0",
     "html-react-parser": "^5.2.8"
@@ -50,7 +51,7 @@
     "i18next": ">= 25.0.0",
     "react": ">= 18",
     "react-dom": ">= 18",
-    "react-i18next": "^15.4.1",
+    "react-i18next": ">= 16",
     "react-router": ">= 7.0.0"
   },
   "devDependencies": {
@@ -62,5 +63,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "176b61e29793f21b58a53fd9f72e3b4b88d6843e"
+  "gitHead": "36c5e7334db527a79bf6c0b498e21b72c643ebf2"
 }

package/src/Article/Article.tsx

@@ -12,9 +12,7 @@ import { Heading, Text } from "@ndla/primitives";
 import { cx } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import type { StyledProps } from "@ndla/styled-system/types";
-import { ArticleByline } from "./ArticleByline";
 import { BadgesContainer } from "./BadgesContainer";
-import type { Article as ArticleType } from "../types";
 
 const StyledArticleContent = styled(ark.section, {}, { baseComponent: true });
 
@@ -170,59 +168,3 @@ export const ArticleTitle = ({
     </ArticleHeader>
   );
 };
-
-interface Props {
-  badges?: ReactNode;
-  heartButton?: ReactNode;
-  article: ArticleType;
-  licenseBox?: ReactNode;
-  children?: ReactNode;
-  competenceGoals?: ReactNode;
-  id: string;
-  lang?: string;
-  disclaimer?: ReactNode;
-}
-
-export const Article = ({
-  badges,
-  article,
-  licenseBox,
-  children,
-  competenceGoals,
-  id,
-  heartButton,
-  lang,
-  disclaimer,
-}: Props) => {
-  const { title, introduction, published, content, footNotes, copyright } = article;
-
-  const authors =
-    copyright?.creators.length || copyright?.rightsholders.length ? copyright.creators : copyright?.processors;
-
-  return (
-    <ArticleWrapper>
-      <ArticleTitle
-        id={id}
-        badges={badges}
-        heartButton={heartButton}
-        title={title}
-        introduction={introduction}
-        competenceGoals={competenceGoals}
-        lang={lang}
-        disclaimer={disclaimer}
-      />
-      <ArticleContent>{content}</ArticleContent>
-      <ArticleFooter>
-        <ArticleByline
-          lang={lang}
-          footnotes={footNotes}
-          authors={authors}
-          suppliers={copyright?.rightsholders}
-          published={published}
-          licenseBox={licenseBox}
-        />
-        {children}
-      </ArticleFooter>
-    </ArticleWrapper>
-  );
-};

package/src/Article/ArticleByline.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import { type ReactNode, forwardRef, useCallback, useEffect, useState } from "react";
+import { type ReactNode, forwardRef, useCallback, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { useLocation } from "react-router";
+import { useAccordionContext } from "@ark-ui/react";
 import { ArrowDownShortLine } from "@ndla/icons";
 import {
   AccordionItem,
@@ -95,6 +95,7 @@ const StyledAccordionRoot = styled(AccordionRoot, {
 
 const refRegexp = /note\d/;
 const footnotesAccordionId = "footnotes";
+const accordionItemValue = "rulesForUse";
 
 export const ArticleByline = ({
   lang,
@@ -109,31 +110,6 @@ export const ArticleByline = ({
   learningpathCopiedFrom,
 }: Props) => {
   const { t, i18n } = useTranslation();
-  const { pathname } = useLocation();
-  const [openAccordions, setOpenAccordions] = useState<string[]>([]);
-  const accordionItemValue = "rulesForUse";
-
-  const onHashChange = useCallback(
-    (e: HashChangeEvent) => {
-      const hash = e.newURL.split("#")[1];
-      if (hash?.match(refRegexp) && !openAccordions.includes(footnotesAccordionId)) {
-        setOpenAccordions([...openAccordions, footnotesAccordionId]);
-        const el = document.getElementById(`#${hash}`);
-        el?.click();
-        el?.focus();
-      }
-    },
-    [openAccordions],
-  );
-
-  useEffect(() => {
-    setOpenAccordions((prev) => prev.filter((state) => state !== accordionItemValue));
-  }, [pathname]);
-
-  useEffect(() => {
-    window.addEventListener("hashchange", onHashChange);
-    return () => window.removeEventListener("hashchange", onHashChange);
-  }, [onHashChange]);
 
   const showPrimaryContributors = suppliers.length > 0 || authors.length > 0;
   const listFormatter = new Intl.ListFormat(lang ?? i18n.language, { style: "long", type: "conjunction" });
@@ -162,21 +138,13 @@ export const ArticleByline = ({
         </TextWrapper>
       )}
       {(!!licenseBox || !!footnotes?.length) && (
-        <StyledAccordionRoot
-          multiple
-          value={openAccordions}
-          onValueChange={(details) => setOpenAccordions(details.value)}
-        >
+        <StyledAccordionRoot multiple>
           {!!licenseBox && (
             <ArticleBylineAccordionItem value={accordionItemValue} accordionTitle={t("article.useContent")}>
               {licenseBox}
             </ArticleBylineAccordionItem>
           )}
-          {!!footnotes?.length && (
-            <ArticleBylineAccordionItem value={footnotesAccordionId} accordionTitle={t("article.footnotes")}>
-              <ArticleFootNotes footNotes={footnotes} />
-            </ArticleBylineAccordionItem>
-          )}
+          {!!footnotes?.length && <ArticleBylineFootnotes footnotes={footnotes} />}
         </StyledAccordionRoot>
       )}
     </Wrapper>
@@ -187,6 +155,43 @@ interface ArticleBylineAccordionprops extends AccordionItemProps {
   accordionTitle: ReactNode;
 }
 
+interface ArticleBylineFootnotesProps {
+  footnotes: FootNote[];
+}
+
+export const ArticleBylineFootnotes = ({ footnotes }: ArticleBylineFootnotesProps) => {
+  const { t } = useTranslation();
+  const { value, setValue } = useAccordionContext();
+  const ref = useRef<HTMLDivElement>(null);
+
+  const onHashChange = useCallback(
+    (e: HashChangeEvent) => {
+      const hash = e.newURL.split("#")[1];
+      if (hash?.match(refRegexp) && !value.includes(footnotesAccordionId)) {
+        ref.current?.scrollIntoView({ behavior: "smooth" });
+        setValue([...value, footnotesAccordionId]);
+        setTimeout(() => {
+          const el = document.getElementById(`${hash}`);
+          el?.click();
+          el?.focus();
+        }, 300);
+      }
+    },
+    [value, setValue],
+  );
+
+  useEffect(() => {
+    window.addEventListener("hashchange", onHashChange);
+    return () => window.removeEventListener("hashchange", onHashChange);
+  }, [onHashChange]);
+
+  return (
+    <ArticleBylineAccordionItem ref={ref} value={footnotesAccordionId} accordionTitle={t("article.footnotes")}>
+      <ArticleFootNotes footNotes={footnotes} />
+    </ArticleBylineAccordionItem>
+  );
+};
+
 export const ArticleBylineAccordionItem = forwardRef<HTMLDivElement, ArticleBylineAccordionprops>(
   ({ value, accordionTitle, children, ...props }, ref) => {
     return (

package/src/Article/ArticleFootNotes.tsx

@@ -26,7 +26,7 @@ const StyledCite = styled("cite", {
 
 const FootNote = ({ footNote }: FootNoteProps) => (
   <li>
-    <Text id={`note${footNote.ref}`} asChild consumeCss textStyle="body.medium">
+    <Text id={`note${footNote.ref}`} asChild consumeCss textStyle="body.medium" tabIndex={-1}>
       <StyledCite>
         <a href={`#ref${footNote.ref}`} target="_self">
           {footNote.ref}

package/src/Grid/Grid.tsx

@@ -52,7 +52,7 @@ const GridContainer = styled("div", {
       lightBlue: {
         padding: "xsmall",
         border: "1px solid",
-        borderColor: "surface.brand.2",
+        borderColor: "stroke.subtle",
       },
     },
   },
@@ -66,7 +66,7 @@ const StyledGridItem = styled("div", {
     border: {
       true: {
         outline: "1px solid",
-        outlineColor: "stroke.default",
+        outlineColor: "stroke.subtle",
       },
     },
   },

package/src/index.ts

@@ -33,7 +33,6 @@ export { EmbedByline } from "./LicenseByline/EmbedByline";
 
 export {
   ArticleWrapper,
-  Article,
   ArticleFooter,
   ArticleHeader,
   ArticleContent,
@@ -65,16 +64,12 @@ export { subjectTypes } from "./model/SubjectTypes";
 export { wordClass } from "./model/WordClass";
 export { subjectCategories } from "./model/SubjectCategories";
 
-export { default as messagesNB } from "./locale/messages-nb";
-export { default as messagesNN } from "./locale/messages-nn";
-export { default as messagesEN } from "./locale/messages-en";
-export { default as messagesSE } from "./locale/messages-se";
+export { messagesNB, messagesNN, messagesSE, messagesEN } from "@ndla/locales";
 
 export { Breadcrumb } from "./Breadcrumb/Breadcrumb";
 export { HomeBreadcrumb } from "./Breadcrumb/HomeBreadcrumb";
 export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from "./Breadcrumb/BreadcrumbItem";
 
-export { formatNestedMessages } from "./i18n/formatNestedMessages";
 export {
   useTagsInputTranslations,
   useTagSelectorTranslations,
@@ -86,9 +81,6 @@ export {
   useDatePickerTranslations,
 } from "./i18n/useComponentTranslations";
 
-export type { ContentTypeBadgeProps, StrictContentType, ContentType } from "./ContentTypeBadge/ContentTypeBadge";
-export { ContentTypeBadge, contentTypeToBadgeVariantMap } from "./ContentTypeBadge/ContentTypeBadge";
-
 export { AnchorHeading } from "./AnchorHeading/AnchorHeading";
 
 export type { TagSelectorControlProps, TagSelectorInputProps, TagSelectorRootProps } from "./TagSelector/TagSelector";

package/es/ContentTypeBadge/ContentTypeBadge.mjs

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

package/es/ContentTypeBadge/ContentTypeBadge.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ContentTypeBadge.mjs","names":["contentTypes.SUBJECT_MATERIAL","contentTypes.TASKS_AND_ACTIVITIES","contentTypes.ASSESSMENT_RESOURCES","contentTypes.SUBJECT","contentTypes.SOURCE_MATERIAL","contentTypes.LEARNING_PATH","contentTypes.TOPIC","contentTypes.MULTIDISCIPLINARY","contentTypes.CONCEPT","contentTypes.EXTERNAL","contentTypes.IMAGE","contentTypes.AUDIO","contentTypes.PODCAST","contentTypes.VIDEO","contentTypes.MISSING","contentTypes.PODCAST_SERIES","contentTypes.GLOSS","contentTypes.PROGRAMME","contentTypes.FRONTPAGE_ARTICLE"],"sources":["../../src/ContentTypeBadge/ContentTypeBadge.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 { forwardRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Badge, type BadgeProps, type BadgeVariant } from \"@ndla/primitives\";\nimport * as contentTypes from \"../model/ContentType\";\n\nexport interface ContentTypeBadgeProps extends Omit<BadgeProps, \"colorTheme\"> {\n  contentType: ContentType | undefined;\n}\n\nexport type StrictContentType =\n  | typeof contentTypes.SUBJECT_MATERIAL\n  | typeof contentTypes.TASKS_AND_ACTIVITIES\n  | typeof contentTypes.ASSESSMENT_RESOURCES\n  | typeof contentTypes.SUBJECT\n  | typeof contentTypes.SOURCE_MATERIAL\n  | typeof contentTypes.LEARNING_PATH\n  | typeof contentTypes.TOPIC\n  | typeof contentTypes.MULTIDISCIPLINARY\n  | typeof contentTypes.CONCEPT\n  | typeof contentTypes.EXTERNAL\n  | typeof contentTypes.IMAGE\n  | typeof contentTypes.AUDIO\n  | typeof contentTypes.VIDEO\n  | typeof contentTypes.MISSING\n  | typeof contentTypes.PODCAST\n  | typeof contentTypes.GLOSS\n  | typeof contentTypes.PROGRAMME\n  | typeof contentTypes.PODCAST_SERIES\n  | typeof contentTypes.FRONTPAGE_ARTICLE;\n\nexport type ContentType =\n  | StrictContentType\n  // This allows for us to fallback to string without getting a ts error, while still keeping intellisense\n  | (string & {});\n\nexport const contentTypeToBadgeVariantMap: Record<ContentType, BadgeVariant> = {\n  [contentTypes.SUBJECT_MATERIAL]: \"brand1\",\n  [contentTypes.TASKS_AND_ACTIVITIES]: \"brand2\",\n  [contentTypes.ASSESSMENT_RESOURCES]: \"brand2\",\n  [contentTypes.SUBJECT]: \"neutral\",\n  [contentTypes.SOURCE_MATERIAL]: \"brand1\",\n  [contentTypes.LEARNING_PATH]: \"brand3\",\n  [contentTypes.TOPIC]: \"neutral\",\n  [contentTypes.MULTIDISCIPLINARY]: \"neutral\",\n  [contentTypes.CONCEPT]: \"brand1\",\n  [contentTypes.EXTERNAL]: \"brand2\",\n  [contentTypes.IMAGE]: \"brand1\",\n  [contentTypes.AUDIO]: \"brand1\",\n  [contentTypes.PODCAST]: \"brand1\",\n  [contentTypes.VIDEO]: \"brand1\",\n  [contentTypes.MISSING]: \"neutral\",\n  [contentTypes.PODCAST_SERIES]: \"brand1\",\n  [contentTypes.GLOSS]: \"brand1\",\n  [contentTypes.PROGRAMME]: \"neutral\",\n  [contentTypes.FRONTPAGE_ARTICLE]: \"brand2\",\n};\n\nexport const ContentTypeBadge = forwardRef<HTMLDivElement, ContentTypeBadgeProps>(\n  ({ contentType, children, ...props }, ref) => {\n    const { t } = useTranslation();\n    return (\n      <Badge\n        colorTheme={contentTypeToBadgeVariantMap[contentType ?? \"missing\"] ?? contentTypeToBadgeVariantMap[\"missing\"]}\n        {...props}\n        ref={ref}\n      >\n        {children ?? t(`contentTypes.${contentType}`)}\n      </Badge>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;AA2CA,MAAa,+BAAkE;EAC5EA,mBAAgC;EAChCC,uBAAoC;EACpCC,uBAAoC;EACpCC,UAAuB;EACvBC,kBAA+B;EAC/BC,gBAA6B;EAC7BC,QAAqB;EACrBC,oBAAiC;EACjCC,UAAuB;EACvBC,WAAwB;EACxBC,QAAqB;EACrBC,QAAqB;EACrBC,UAAuB;EACvBC,QAAqB;EACrBC,UAAuB;EACvBC,iBAA8B;EAC9BC,QAAqB;EACrBC,YAAyB;EACzBC,oBAAiC;CACnC;AAED,MAAa,mBAAmB,YAC7B,EAAE,aAAa,UAAU,GAAG,SAAS,QAAQ;CAC5C,MAAM,EAAE,MAAM,gBAAgB;AAC9B,QACE,oBAAC;EACC,YAAY,6BAA6B,eAAe,cAAc,6BAA6B;EACnG,GAAI;EACC;YAEJ,YAAY,EAAE,gBAAgB,cAAc;GACvC;EAGb"}

package/es/i18n/formatNestedMessages.mjs

@@ -1,17 +0,0 @@
-//#region src/i18n/formatNestedMessages.ts
-const formatNestedMessages = (phrases, formattedMessages = {}, prefix = "") => {
-	const messages = formattedMessages;
-	Object.keys(phrases).forEach((key) => {
-		const value = phrases[key];
-		if ({}.hasOwnProperty.call(phrases, key)) {
-			const keyWithPrefix = prefix ? `${prefix}.${key}` : key;
-			if (typeof value === "object") formatNestedMessages(value, formattedMessages, keyWithPrefix);
-			else messages[keyWithPrefix] = value;
-		}
-	});
-	return messages;
-};
-
-//#endregion
-export { formatNestedMessages };
-//# sourceMappingURL=formatNestedMessages.mjs.map

package/es/i18n/formatNestedMessages.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"formatNestedMessages.mjs","names":[],"sources":["../../src/i18n/formatNestedMessages.ts"],"sourcesContent":["/**\n * Copyright (c) 2017-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\ninterface Phrases {\n  [key: string]: string | Phrases;\n}\n\ninterface FormattedMessages {\n  [key: string]: string;\n}\n\nexport const formatNestedMessages = (\n  phrases: Phrases,\n  formattedMessages: FormattedMessages = {},\n  prefix: string = \"\",\n) => {\n  const messages = formattedMessages;\n\n  Object.keys(phrases).forEach((key) => {\n    const value = phrases[key];\n    if ({}.hasOwnProperty.call(phrases, key)) {\n      const keyWithPrefix = prefix ? `${prefix}.${key}` : key;\n      if (typeof value === \"object\") {\n        formatNestedMessages(value, formattedMessages, keyWithPrefix);\n      } else {\n        messages[keyWithPrefix] = value;\n      }\n    }\n  });\n\n  return messages;\n};\n"],"mappings":";AAgBA,MAAa,wBACX,SACA,oBAAuC,EAAE,EACzC,SAAiB,OACd;CACH,MAAM,WAAW;AAEjB,QAAO,KAAK,QAAQ,CAAC,SAAS,QAAQ;EACpC,MAAM,QAAQ,QAAQ;AACtB,MAAI,EAAE,CAAC,eAAe,KAAK,SAAS,IAAI,EAAE;GACxC,MAAM,gBAAgB,SAAS,GAAG,OAAO,GAAG,QAAQ;AACpD,OAAI,OAAO,UAAU,SACnB,sBAAqB,OAAO,mBAAmB,cAAc;OAE7D,UAAS,iBAAiB;;GAG9B;AAEF,QAAO"}