@ndla/ui 33.0.0 → 33.0.2

package/src/Footer/FooterPrivacy.tsx

@@ -8,31 +8,19 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
 import { spacing, fonts, misc, mq, breakpoints } from '@ndla/core';
-import { OneColumn } from '../Layout';
-import { Locale } from '../types';
-
-import PrivacyNb from './privacy_nb';
-import PrivacyNn from './privacy_nn';
-import PrivacyEn from './privacy_en';
+import { useTranslation } from 'react-i18next';
 
 type FooterPrivacyProps = {
-  label: string;
-  lang: Locale;
+  privacyLinks: [
+    {
+      label: string;
+      url: string;
+    },
+  ];
 };
 
-const privacyTexts = (lang: string) => {
-  if (lang === 'nn') {
-    return <PrivacyNn />;
-  }
-  if (lang === 'en') {
-    return <PrivacyEn />;
-  }
-  return <PrivacyNb />;
-};
-
-const StyledPrivacyButton = styled.button`
+const StyledPrivacyLink = styled.a`
   background: none;
   color: #fff;
   border: 0;
@@ -40,6 +28,7 @@ const StyledPrivacyButton = styled.button`
   box-shadow: ${misc.textLinkBoxShadow};
   cursor: pointer;
   margin-bottom: ${spacing.large};
+  margin-left: ${spacing.small};
   &:hover,
   &:focus {
     box-shadow: none;
@@ -47,8 +36,9 @@ const StyledPrivacyButton = styled.button`
 `;
 const StyledFooterText = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
+  justify-content: center;
   > span {
     padding: ${spacing.xsmall} 0;
     text-align: center;
@@ -67,22 +57,18 @@ const StyledFooterText = styled.div`
   }
 `;
 
-const FooterPrivacy = ({ lang, label }: FooterPrivacyProps) => (
-  <StyledFooterText>
-    <Modal
-      label={label}
-      activateButton={<StyledPrivacyButton type="button">{label}</StyledPrivacyButton>}
-      size="fullscreen">
-      {(onClose: () => void) => (
-        <OneColumn cssModifier="medium">
-          <ModalHeader>
-            <ModalCloseButton onClick={onClose} title="Lukk" />
-          </ModalHeader>
-          <ModalBody>{privacyTexts(lang)}</ModalBody>
-        </OneColumn>
-      )}
-    </Modal>
-  </StyledFooterText>
-);
+const FooterPrivacy = ({ privacyLinks }: FooterPrivacyProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <StyledFooterText>
+      {privacyLinks.map((link) => (
+        <StyledPrivacyLink href={link.url} key={link.label}>
+          {link.label}
+        </StyledPrivacyLink>
+      ))}
+    </StyledFooterText>
+  );
+};
 
 export default FooterPrivacy;

package/src/Frontpage/FrontpageFilm.tsx

@@ -78,7 +78,9 @@ const FrontpageFilm = ({ url, imageUrl }: Props) => {
   const { t } = useTranslation();
   return (
     <StyledSection>
-      <SectionHeading large>{t('welcomePage.film.header')}</SectionHeading>
+      <SectionHeading headingLevel="h2" large>
+        {t('welcomePage.film.header')}
+      </SectionHeading>
       <StyledImage imageUrl={imageUrl}>
         <StyledText>{t('welcomePage.film.text')}</StyledText>
         <StyledText narrow>{t('welcomePage.film.textShort')}</StyledText>

package/src/Frontpage/FrontpageMultidisciplinarySubject.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import SectionHeading from '../SectionHeading';
 import ComponentCursor from '../ComponentCursor';
 import { MultidisciplinarySubjectIllustration as Illustration } from './illustrations/FrontpageIllustrations';
+import { HeadingLevel } from '../types';
 
 export const StyledSection = styled.section`
   position: relative;
@@ -72,16 +73,19 @@ const Topic = styled.div`
 type Props = {
   url: string;
   topics?: { url: string; title: string; id: string }[];
+  headingLevel: HeadingLevel;
 };
 
-const FrontpageMultidisciplinarySubject = ({ url, topics }: Props) => {
+const FrontpageMultidisciplinarySubject = ({ url, topics, headingLevel }: Props) => {
   const { t } = useTranslation();
   return (
     <StyledSection>
       <ComponentCursor variant="left" text={t('frontpageMultidisciplinarySubject.cursorText')} />
       <Wrapper>
         <Content>
-          <SectionHeading large>{t('frontpageMultidisciplinarySubject.heading')}</SectionHeading>
+          <SectionHeading headingLevel={headingLevel} large>
+            {t('frontpageMultidisciplinarySubject.heading')}
+          </SectionHeading>
           {topics ? (
             <Topics>
               {topics.map((topic) => {

package/src/Frontpage/FrontpageToolbox.tsx

@@ -6,6 +6,7 @@ import { SafeLinkButton } from '@ndla/safelink';
 import SectionHeading from '../SectionHeading';
 import ComponentCursor from '../ComponentCursor';
 import { ToolboxIllustration as Illustration } from './illustrations/FrontpageIllustrations';
+import { HeadingLevel } from '../types';
 
 const StyledSection = styled.section`
   margin-top: ${spacing.large};
@@ -44,14 +45,17 @@ const StyledStudentsButton = styled(SafeLinkButton)`
 type Props = {
   urlStudents: string;
   urlTeachers: string;
+  headingLevel: HeadingLevel;
 };
 
-const FrontpageToolbox = ({ urlStudents, urlTeachers }: Props) => {
+const FrontpageToolbox = ({ urlStudents, urlTeachers, headingLevel }: Props) => {
   const { t } = useTranslation();
   return (
     <StyledSection>
       <ComponentCursor variant="left" text={t('frontPageToolbox.cursorText')} />
-      <SectionHeading large>{t('frontPageToolbox.heading')}</SectionHeading>
+      <SectionHeading headingLevel={headingLevel} large>
+        {t('frontPageToolbox.heading')}
+      </SectionHeading>
       <ToolboxWrapper>
         <StyledText>{t('frontPageToolbox.text')}</StyledText>
       </ToolboxWrapper>

package/src/InfoWidget/InfoWidget.tsx

@@ -6,6 +6,7 @@ import SafeLink from '@ndla/safelink';
 import { colors, fonts, spacing } from '@ndla/core';
 
 import SectionHeading from '../SectionHeading';
+import { HeadingLevel } from '../types';
 
 interface InfoWidgetSectionProps {
   center?: boolean;
@@ -64,6 +65,7 @@ const StyledMainLink = styled.a`
 `;
 interface Props {
   heading: string;
+  headingLevel: HeadingLevel;
   description: string;
   mainLink: {
     name: string;
@@ -79,9 +81,11 @@ interface Props {
   center?: boolean;
 }
 
-const InfoWidget = ({ heading, description, mainLink, iconLinks, center = false }: Props) => (
+const InfoWidget = ({ heading, description, mainLink, iconLinks, headingLevel, center = false }: Props) => (
   <InfoWidgetSection center={center}>
-    <SectionHeading large>{heading}</SectionHeading>
+    <SectionHeading headingLevel={headingLevel} large>
+      {heading}
+    </SectionHeading>
     <InfoWidgetDescription>
       <p>{description}</p>
     </InfoWidgetDescription>

package/src/RelatedArticleList/RelatedArticleList.tsx

@@ -3,6 +3,7 @@ import BEMHelper from 'react-bem-helper';
 import Button from '@ndla/button';
 import SafeLink from '@ndla/safelink';
 import SectionHeading from '../SectionHeading';
+import { HeadingLevel } from '../types';
 
 const classes = new BEMHelper({
   name: 'related-articles',
@@ -51,13 +52,14 @@ interface Props {
     showMore: string;
     showLess: string;
   };
+  headingLevel: HeadingLevel;
   children?: ReactElement;
   dangerouslySetInnerHTML?: {
     __html: string;
   };
   articleCount?: number;
 }
-const RelatedArticleList = ({ messages, children, articleCount, dangerouslySetInnerHTML }: Props) => {
+const RelatedArticleList = ({ messages, children, articleCount, dangerouslySetInnerHTML, headingLevel }: Props) => {
   const clonedChildren =
     !dangerouslySetInnerHTML && children
       ? Children.map(children, (article, i) =>
@@ -70,7 +72,9 @@ const RelatedArticleList = ({ messages, children, articleCount, dangerouslySetIn
 
   return (
     <section {...classes('')}>
-      <SectionHeading className={classes('component-title').className}>{messages.title}</SectionHeading>
+      <SectionHeading headingLevel={headingLevel} className={classes('component-title').className}>
+        {messages.title}
+      </SectionHeading>
       <div {...classes('articles')} dangerouslySetInnerHTML={dangerouslySetInnerHTML}>
         {clonedChildren}
       </div>

package/src/SectionHeading/SectionHeading.tsx

@@ -1,13 +1,9 @@
 import React, { ElementType, ReactNode } from 'react';
 import { css } from '@emotion/react';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
-import styled from '@emotion/styled';
+import { HeadingLevel } from '../types';
 
-interface StyledWrapperProps {
-  large?: boolean;
-}
-
-const StyledWrapper = styled.h2<StyledWrapperProps>`
+const headingStyle = css`
   font-weight: ${fonts.weight.bold};
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -15,31 +11,30 @@ const StyledWrapper = styled.h2<StyledWrapperProps>`
   ${mq.range({ from: breakpoints.tablet })} {
     ${fonts.sizes('20px', '26px')};
   }
-  ${(p) =>
-    p.large &&
-    css`
-      margin: 0 0 ${spacing.small} 0;
-      ${fonts.sizes('16px', '32px')};
-      ${mq.range({ from: breakpoints.tablet })} {
-        ${fonts.sizes('22px')};
-      }
-    `};
 `;
 
-const LargeStyledWrapper = StyledWrapper.withComponent('h1');
+const largeHeadingStyle = css`
+  margin: 0 0 ${spacing.small} 0;
+  ${fonts.sizes('16px', '32px')};
+  ${mq.range({ from: breakpoints.tablet })} {
+    ${fonts.sizes('22px')};
+  }
+`;
 
 interface Props {
   children: ReactNode;
   large?: boolean;
   className?: string;
+  headingLevel: HeadingLevel;
 }
 
-const SectionHeading = ({ children, large = false, className }: Props) => {
-  const Wrapper: ElementType = large ? LargeStyledWrapper : StyledWrapper;
+const SectionHeading = ({ children, large = false, className, headingLevel = 'h2' }: Props) => {
+  const Element: ElementType = headingLevel;
+  const styles = large ? [headingStyle, largeHeadingStyle] : [headingStyle];
   return (
-    <Wrapper large={large} className={className}>
+    <Element css={styles} className={className}>
       {children}
-    </Wrapper>
+    </Element>
   );
 };
 

package/src/Subject/Subject.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { breakpoints, colors, mq, spacing, spacingUnit } from '@ndla/core';
 import SectionHeading from '../SectionHeading';
+import { HeadingLevel } from '../types';
 
 const SubjectContentWrapper = styled.div`
   ${mq.range({ from: breakpoints.tablet })} {
@@ -190,6 +191,13 @@ const StyledSectionHeading = styled(SectionHeading)`
   }
 `;
 
-export const SubjectSectionTitle = ({ children }: { children: ReactNode }) => (
-  <StyledSectionHeading large>{children}</StyledSectionHeading>
+interface SubjectSectionTitleProps {
+  headingLevel: HeadingLevel;
+  children: ReactNode;
+}
+
+export const SubjectSectionTitle = ({ children, headingLevel = 'h2' }: SubjectSectionTitleProps) => (
+  <StyledSectionHeading large headingLevel={headingLevel}>
+    {children}
+  </StyledSectionHeading>
 );

package/src/Subject/SubjectAbout.tsx

@@ -3,6 +3,7 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import SectionHeading from '../SectionHeading';
+import { HeadingLevel } from '../types';
 
 interface Props {
   fixedWidth?: boolean;
@@ -10,6 +11,7 @@ interface Props {
   media: ReactNode;
   heading: string;
   description: string;
+  headingLevel: HeadingLevel;
 }
 
 interface SubjectAboutSectionProps {
@@ -98,9 +100,11 @@ const StyledDescription = styled.p`
   ${fonts.sizes('16px', '26px')};
 `;
 
-const SubjectAbout = ({ fixedWidth = false, media, heading, description, wide = false }: Props) => (
+const SubjectAbout = ({ fixedWidth = false, media, heading, description, wide = false, headingLevel }: Props) => (
   <SubjectAboutSection wide={wide} fixedWidth={fixedWidth}>
-    <StyledSectionHeading large>{heading}</StyledSectionHeading>
+    <StyledSectionHeading headingLevel={headingLevel} large>
+      {heading}
+    </StyledSectionHeading>
     <MediaWrapper>{media}</MediaWrapper>
     <StyledContent>
       <StyledMainHeading>{heading}</StyledMainHeading>

package/src/Subject/SubjectArchive.tsx

@@ -5,6 +5,7 @@ import { Cross } from '@ndla/icons/action';
 import { breakpoints, colors, fonts, mq, spacing, utils } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import SectionHeading from '../SectionHeading';
+import { HeadingLevel } from '../types';
 
 interface Props {
   featuringArticle: {
@@ -13,6 +14,7 @@ interface Props {
     description: string;
     url: string;
   };
+  headingLevel: HeadingLevel;
   archiveArticles: { url: string; heading: string }[];
   sectionHeading: string;
   fixedWidth?: boolean;
@@ -155,7 +157,14 @@ class SubjectArchive extends Component<Props, State> {
   }
 
   render() {
-    const { fixedWidth = false, featuringArticle, messages, sectionHeading, archiveArticles } = this.props;
+    const {
+      fixedWidth = false,
+      headingLevel,
+      featuringArticle,
+      messages,
+      sectionHeading,
+      archiveArticles,
+    } = this.props;
 
     const archiveId = 'subject-archive';
 
@@ -183,7 +192,9 @@ class SubjectArchive extends Component<Props, State> {
 
     return (
       <SubjectArchiveSection animate={!!this.state.minHeight} fixedWidth={fixedWidth} ref={this.wrapperRef}>
-        <StyledSectionHeading large>{sectionHeading}</StyledSectionHeading>
+        <StyledSectionHeading headingLevel={headingLevel} large>
+          {sectionHeading}
+        </StyledSectionHeading>
         <ArchiveWrapper>
           {section}
           <ArchiveButon

package/src/Subject/SubjectCarousel.tsx

@@ -7,6 +7,7 @@ import { breakpoints, mq, spacing, spacingUnit } from '@ndla/core';
 import { SafeLinkProps } from '@ndla/safelink';
 import { ContentCard } from '../index';
 import { SubjectSectionTitle } from './Subject';
+import { HeadingLevel } from '../types';
 
 interface Props {
   subjects?: {
@@ -17,6 +18,7 @@ interface Props {
     image?: string | undefined | null;
     toLinkProps: () => SafeLinkProps;
   }[];
+  headingLevel: HeadingLevel;
   title?: string;
   narrowScreen?: boolean;
   wideScreen?: boolean;
@@ -59,7 +61,13 @@ const StyledSubjectSectionTitle = styled(SubjectSectionTitle)`
   }
 `;
 
-const SubjectCarousel = ({ subjects = [], title = '', narrowScreen = false, wideScreen = false }: Props) => {
+const SubjectCarousel = ({
+  subjects = [],
+  title = '',
+  narrowScreen = false,
+  wideScreen = false,
+  headingLevel,
+}: Props) => {
   const { t } = useTranslation();
   return (
     <StyledSection narrowScreen={narrowScreen} wideScreen={wideScreen}>
@@ -124,7 +132,7 @@ const SubjectCarousel = ({ subjects = [], title = '', narrowScreen = false, wide
         itemsLength={subjects?.length ?? 0}>
         {(autoSizedProps) => (
           <>
-            <StyledSubjectSectionTitle>{title}</StyledSubjectSectionTitle>
+            <StyledSubjectSectionTitle headingLevel={headingLevel}>{title}</StyledSubjectSectionTitle>
             <Carousel
               {...autoSizedProps}
               disableScroll={(autoSizedProps?.columnsPrSlide ?? 0) >= subjects.length}

package/src/Subject/SubjectLinks.tsx

@@ -4,6 +4,7 @@ import { spacing } from '@ndla/core';
 import SafeLink, { SafeLinkProps } from '@ndla/safelink';
 
 import { SubjectSectionTitle } from './Subject';
+import { HeadingLevel } from '../types';
 
 const SubjectLinksSection = styled.section`
   margin-bottom: ${spacing.large};
@@ -20,6 +21,7 @@ const SubjectLinksList = styled.ul`
 `;
 
 interface Props {
+  headingLevel: HeadingLevel;
   links: {
     toLinkProps: () => SafeLinkProps;
     text: string;
@@ -27,9 +29,9 @@ interface Props {
   heading: string;
 }
 
-const SubjectLinks = ({ links, heading }: Props) => (
+const SubjectLinks = ({ links, heading, headingLevel }: Props) => (
   <SubjectLinksSection>
-    <StyledSubjectSectionTitle>{heading}</StyledSubjectSectionTitle>
+    <StyledSubjectSectionTitle headingLevel={headingLevel}>{heading}</StyledSubjectSectionTitle>
     <nav>
       <SubjectLinksList>
         {links.map((link) => (

package/src/Subject/SubjectNewContent.tsx

@@ -4,8 +4,10 @@ import SafeLink from '@ndla/safelink';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import ContentTypeBadge from '../ContentTypeBadge';
 import { SubjectSectionTitle } from './Subject';
+import { HeadingLevel } from '../types';
 
 interface Props {
+  headingLevel: HeadingLevel;
   heading: string;
   content: {
     name: string;
@@ -86,9 +88,9 @@ const StyledSafeLink = styled(SafeLink)`
   }
 `;
 
-const SubjectNewContent = ({ heading, content }: Props) => (
+const SubjectNewContent = ({ heading, content, headingLevel }: Props) => (
   <StyledSection>
-    <StyledSubjectSectionTitle>{heading}</StyledSubjectSectionTitle>
+    <StyledSubjectSectionTitle headingLevel={headingLevel}>{heading}</StyledSubjectSectionTitle>
     <nav>
       <StyledUl>
         {content.map((item, index) => (

package/src/Subject/SubjectShortcuts.tsx

@@ -1,17 +1,25 @@
+/**
+ * Copyright (c) 2022-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 React, { Component } from 'react';
-import { TransitionGroup } from 'react-transition-group';
 import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
 import { Forward } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 import { SubjectSectionTitle } from './Subject';
 import Fade from '../Animation/Fade';
+import { HeadingLevel } from '../types';
 
 const SubjectShortcutsSection = styled.section`
   margin-bottom: ${spacing.large};
 `;
 
-const StyledTransitionGroup = styled(TransitionGroup)`
+const StyledList = styled.ul`
   display: flex;
   flex-wrap: wrap;
   list-style: none;
@@ -23,7 +31,6 @@ const StyledListItem = styled.li`
   display: block;
   margin-right: 9px;
   margin-bottom: 9px;
-
   a {
     display: block;
     background: ${colors.brand.light};
@@ -33,7 +40,6 @@ const StyledListItem = styled.li`
     font-weight: ${fonts.weight.semibold};
     color: ${colors.brand.dark};
     padding: 9px 20px;
-
     &:hover,
     &:active,
     &:focus {
@@ -52,13 +58,11 @@ const StyledButton = styled.button`
   color: ${colors.brand};
   margin-top: ${spacing.normal};
   cursor: pointer;
-
   .c-icon {
     width: 18px;
     height: 18px;
     margin-right: ${spacing.xsmall};
   }
-
   span {
     ${fonts.sizes('14px', '18px')};
   }
@@ -69,6 +73,7 @@ interface Props {
     url: string;
     text: string;
   }[];
+  headingLevel: HeadingLevel;
   messages: {
     heading: string;
     showMore: string;
@@ -102,7 +107,7 @@ class SubjectShortcuts extends Component<Props, State> {
   }
 
   render() {
-    const { links, messages, defaultVisableCount } = this.props;
+    const { links, messages, defaultVisableCount, headingLevel } = this.props;
     const id = 'subject-shortcut';
 
     const showExpand = defaultVisableCount < links.length;
@@ -128,17 +133,17 @@ class SubjectShortcuts extends Component<Props, State> {
     }
     return (
       <SubjectShortcutsSection>
-        <SubjectSectionTitle>{messages.heading}</SubjectSectionTitle>
+        <SubjectSectionTitle headingLevel={headingLevel}>{messages.heading}</SubjectSectionTitle>
         <nav id={id}>
-          <StyledTransitionGroup component="ul">
+          <StyledList>
             {filteredLinks.map((link) => (
-              <Fade key={link.url}>
+              <Fade key={link.url} show={true}>
                 <StyledListItem>
                   <SafeLink to={link.url}>{link.text}</SafeLink>
                 </StyledListItem>
               </Fade>
             ))}
-          </StyledTransitionGroup>
+          </StyledList>
         </nav>
         {button}
       </SubjectShortcutsSection>

package/src/Subject/SubjectSocial.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import { breakpoints, mq, spacing } from '@ndla/core';
 import React, { ReactNode } from 'react';
+import { HeadingLevel } from '../types';
 import { SubjectSectionTitle } from './Subject';
 
 const StyledSubjectSocialContent = styled.div`
@@ -21,9 +22,15 @@ const StyledSection = styled.section`
   }
 `;
 
-export const SubjectSocialSection = ({ children, title = '' }: { children: ReactNode; title?: string }) => (
+interface SubjectSocialSectionProps {
+  children: ReactNode;
+  title?: string;
+  headingLevel: HeadingLevel;
+}
+
+export const SubjectSocialSection = ({ children, title = '', headingLevel }: SubjectSocialSectionProps) => (
   <StyledSection>
-    <SubjectSectionTitle>{title}</SubjectSectionTitle>
+    <SubjectSectionTitle headingLevel={headingLevel}>{title}</SubjectSectionTitle>
     {children}
   </StyledSection>
 );

package/src/locale/messages-en.ts

@@ -618,12 +618,13 @@ const messages = {
   footer: {
     aboutNDLA: 'About NDLA',
     selectLanguage: 'Choose language (språk): ',
-    footerInfo: 'This webapplication is developed by NDLA as Open Source code.',
-    footerEditiorInChief: 'Editor in chief: ',
-    footerManagingEditor: 'Managing editor: ',
-    footerPrivacyLink: 'Cookies Policy',
+    info: 'This webapplication is developed by NDLA as Open Source code.',
+    editorInChief: 'Editor in chief: ',
+    managingEditor: 'Managing editor: ',
+    linksHeader: 'Other NDLA sites',
+    privacyLink: 'Privacy statement',
+    cookiesLink: 'Statement about cookies',
     vision: 'We create the learning of the future together',
-    footerLinksHeader: 'Other NDLA sites',
     socialMediaLinks: {
       facebook: 'NDLA on Facebook',
       facebookAria: 'Visit NDLA on Facebook',

package/src/locale/messages-nb.ts

@@ -618,11 +618,12 @@ const messages = {
     aboutNDLA: 'Om NDLA',
     selectLanguage: 'Velg språk (language): ',
     vision: 'Sammen skaper vi framtidas læring',
-    footerLinksHeader: 'Andre NDLA-nettsteder',
-    footerInfo: 'Nettstedet er utarbeidet av NDLA med åpen kildekode.',
-    footerEditiorInChief: 'Ansvarlig redaktør: ',
-    footerManagingEditor: 'Utgaveansvarlig: ',
-    footerPrivacyLink: 'Personvernerklæring og cookies',
+    linksHeader: 'Andre NDLA-nettsteder',
+    info: 'Nettstedet er utarbeidet av NDLA med åpen kildekode.',
+    editorInChief: 'Ansvarlig redaktør: ',
+    managingEditor: 'Utgaveansvarlig: ',
+    privacyLink: 'Personvernerklæring',
+    cookiesLink: 'Erklæring om informasjonskapslar',
     socialMediaLinks: {
       facebook: 'NDLA på Facebook',
       facebookAria: 'Besøk NDLA på Facebook',

package/src/locale/messages-nn.ts

@@ -619,11 +619,12 @@ const messages = {
     aboutNDLA: 'Om NDLA',
     selectLanguage: 'Vel språk (language): ',
     vision: 'Saman skapar vi framtidas læring',
-    footerLinksHeader: 'Andre NDLA-nettstader',
-    footerInfo: 'Nettstaden er utarbeida av NDLA med open kjeldekode.',
-    footerEditiorInChief: 'Ansvarleg redaktør: ',
-    footerManagingEditor: 'Utgåveansvarleg: ',
-    footerPrivacyLink: 'Personvernerklæring og cookies',
+    linksHeader: 'Andre NDLA-nettstader',
+    info: 'Nettstaden er utarbeida av NDLA med open kjeldekode.',
+    editorInChief: 'Ansvarleg redaktør: ',
+    managingEditor: 'Utgåveansvarleg: ',
+    privacyLink: 'Personvernerklæring og cookies',
+    cookiesLink: 'Erklæring om informasjonskapslar',
     socialMediaLinks: {
       facebook: 'NDLA på Facebook',
       facebookAria: 'Besøk NDLA på Facebook',