@ndla/ui 47.3.1 → 47.4.0

package/src/Embed/conceptComponents.tsx

@@ -35,6 +35,7 @@ export interface ConceptNotionData {
   visualElement?: ConceptVisualElementMeta;
   conceptType: ConceptData['concept']['conceptType'];
   glossData?: ConceptData['concept']['glossData'];
+  lang?: string;
 }
 
 interface ConceptNotionProps extends RefAttributes<HTMLDivElement>, ConceptNotionData {
@@ -179,6 +180,7 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
       conceptType,
       glossData,
       headerButtons,
+      lang,
       ...rest
     },
     ref,
@@ -202,7 +204,7 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
             <>
               <StyledNotionDialogContent>
                 {visualElement?.resource === 'image' ? (
-                  <ImageEmbed embed={visualElement} heartButton={heartButton} />
+                  <ImageEmbed embed={visualElement} heartButton={heartButton} lang={lang} />
                 ) : visualElement?.resource === 'brightcove' ? (
                   <BrightcoveEmbed embed={visualElement} heartButton={heartButton} />
                 ) : visualElement?.resource === 'h5p' ? (
@@ -212,7 +214,7 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
                 ) : visualElement?.resource === 'external' ? (
                   <ExternalEmbed embed={visualElement} />
                 ) : null}
-                {content && <NotionDialogText>{content}</NotionDialogText>}
+                {content && <NotionDialogText lang={lang}>{content}</NotionDialogText>}
               </StyledNotionDialogContent>
               {tags && (
                 <ListWrapper>

package/src/Footer/Footer.stories.tsx

@@ -14,6 +14,24 @@ import { FooterText } from './FooterText';
 import { EditorName } from './EditorName';
 import { LanguageSelector } from '../LanguageSelector';
 
+const mockCommonLinks = [
+  {
+    to: 'https://ndla.no/about/om-ndla',
+    text: 'Om NDLA',
+    external: false,
+  },
+  {
+    to: 'https://ndla.no/about/about-ndla',
+    text: 'About NDLA',
+    external: false,
+  },
+  {
+    to: 'https://blogg.ndla.no/',
+    text: 'NDLA fagblogg',
+    external: true,
+  },
+];
+
 const mockFooterLinks = [
   {
     to: 'https://www.facebook.com/ndla.no',
@@ -84,6 +102,7 @@ export const Default: StoryObj<typeof Footer> = {};
 export const WithContentAndLinks: StoryObj<typeof Footer> = {
   args: {
     privacyLinks: privacyLinks,
+    commonLinks: mockCommonLinks,
     links: mockFooterLinks,
   },
 };
@@ -91,6 +110,7 @@ export const WithContentAndLinks: StoryObj<typeof Footer> = {
 export const WithoutContent: StoryObj<typeof Footer> = {
   args: {
     children: undefined,
+    commonLinks: mockCommonLinks,
     links: mockFooterLinks,
     privacyLinks: privacyLinks,
   },
@@ -99,6 +119,7 @@ export const WithoutContent: StoryObj<typeof Footer> = {
 export const WithLanguageSelector: StoryObj<typeof Footer> = {
   args: {
     privacyLinks: privacyLinks,
+    commonLinks: mockCommonLinks,
     links: mockFooterLinks,
     // eslint-disable-next-line no-console
     languageSelector: <LanguageSelector inverted locales={['nn', 'nb']} onSelect={console.log} />,
@@ -108,6 +129,7 @@ export const WithLanguageSelector: StoryObj<typeof Footer> = {
 export const WithAuthBlock: StoryObj<typeof Footer> = {
   args: {
     privacyLinks: privacyLinks,
+    commonLinks: mockCommonLinks,
     links: mockFooterLinks,
     // eslint-disable-next-line no-console
     languageSelector: <LanguageSelector inverted locales={['nn', 'nb']} onSelect={console.log} />,

package/src/Footer/Footer.tsx

@@ -113,6 +113,11 @@ const StyledLanguageWrapper = styled.div`
 type Props = {
   children: ReactNode;
   lang: Locale;
+  commonLinks?: {
+    to: string;
+    text: string;
+    external: boolean;
+  }[];
   links?: {
     to: string;
     text: string;
@@ -126,7 +131,7 @@ type Props = {
   auth?: ReactNode;
 };
 
-const Footer = ({ children, links, languageSelector, auth, privacyLinks }: Props) => {
+const Footer = ({ children, commonLinks, links, languageSelector, auth, privacyLinks }: Props) => {
   const { t } = useTranslation();
 
   const mainContent = (
@@ -136,23 +141,24 @@ const Footer = ({ children, links, languageSelector, auth, privacyLinks }: Props
     </>
   );
 
-  const footerContent = links ? (
-    <>
-      <StyledColumns>
-        <div>
-          <StyledFooterHeaderIcon />
-        </div>
-        <div>
-          <StyledHeader>{t('footer.vision')}</StyledHeader>
-          <FooterLinks links={links} />
-        </div>
-      </StyledColumns>
-      <StyledHr />
-      {mainContent}
-    </>
-  ) : (
-    mainContent
-  );
+  const footerContent =
+    links || commonLinks ? (
+      <>
+        <StyledColumns>
+          <div>
+            <StyledFooterHeaderIcon />
+          </div>
+          <div>
+            <StyledHeader>{t('footer.vision')}</StyledHeader>
+            <FooterLinks commonLinks={commonLinks} links={links} />
+          </div>
+        </StyledColumns>
+        <StyledHr />
+        {mainContent}
+      </>
+    ) : (
+      mainContent
+    );
 
   return (
     <>

package/src/Footer/FooterLinks.tsx

@@ -26,24 +26,18 @@ const StyledLinksWrapper = styled.div`
 `;
 
 type FooterLinksProps = {
-  links: {
+  commonLinks?: {
+    to: string;
+    text: string;
+    external: boolean;
+  }[];
+  links?: {
     to: string;
     text: string;
     icon: ReactNode;
   }[];
 };
 
-const commonLinks = [
-  { key: 'omNdla', url: 'https://om.ndla.no' },
-  {
-    key: 'aboutNdla',
-    url: 'https://om.ndla.no/about-ndla',
-  },
-  { key: 'blog', url: 'https://blogg.ndla.no' },
-  { key: 'tips', url: 'https://blogg.ndla.no/elever' },
-  { key: 'vacancies', url: 'https://om.ndla.no/jobb-for-ndla/' },
-];
-
 const StyledNav = styled.nav`
   display: flex;
   flex-direction: column;
@@ -89,33 +83,32 @@ const StyledHeaderLinks = styled.h3`
   margin: ${spacing.xsmall} 0;
 `;
 
-const FooterLinks = ({ links }: FooterLinksProps) => {
+const FooterLinks = ({ links, commonLinks }: FooterLinksProps) => {
   const { t } = useTranslation();
   return (
     <>
       <StyledLinksWrapper>
         <div>
-          <StyledHeaderLinks id="otherLinks">
-            {t('footer.linksHeader')} <Launch />
-          </StyledHeaderLinks>
+          <StyledHeaderLinks id="otherLinks">{t('footer.linksHeader')}</StyledHeaderLinks>
           <StyledNav aria-labelledby="otherLinks">
-            {commonLinks.map((link) => (
-              <div key={link.url}>
+            {commonLinks?.map((link) => (
+              <div key={link.to}>
                 <StyledSafeLink
-                  key={t(`footer.ndlaLinks.${link.key}`)}
-                  aria-label={t(`footer.ndlaLinks.${link.key}`)}
-                  to={link.url}
-                  target="_blank"
+                  key={link.text}
+                  aria-label={link.text}
+                  to={link.to}
+                  target={link.external ? '_blank' : ''}
                   rel="noopener noreferrer"
                 >
-                  {t(`footer.ndlaLinks.${link.key}`)}
+                  {link.text}
+                  {link.external && <Launch />}
                 </StyledSafeLink>
               </div>
             ))}
           </StyledNav>
         </div>
         <StyledNav aria-label={t('footer.socialMedia')}>
-          {links.map((link) => (
+          {links?.map((link) => (
             <StyledSocialMediaLinkWrapper key={link.to}>
               <StyledSocialMediaIcon>{link.icon}</StyledSocialMediaIcon>
               <StyledSafeLink to={link.to}>

package/src/FrontpageArticle/FrontpageArticle.tsx

@@ -19,6 +19,7 @@ interface Props {
   id: string;
   isWide?: boolean;
   licenseBox?: ReactNode;
+  lang?: string;
 }
 
 export const FRONTPAGE_ARTICLE_MAX_WIDTH = '773px';
@@ -56,7 +57,7 @@ const StyledArticle = styled.article`
   }
 `;
 
-export const FrontpageArticle = ({ article, id, isWide, licenseBox }: Props) => {
+export const FrontpageArticle = ({ article, id, isWide, licenseBox, lang }: Props) => {
   const { height = 0 } = useMastheadHeight();
   const cssVars = useMemo(() => ({ '--masthead-height': `${height}px` } as unknown as CSSProperties), [height]);
   const { title, introduction, content } = article;
@@ -71,10 +72,10 @@ export const FrontpageArticle = ({ article, id, isWide, licenseBox }: Props) =>
 
   return (
     <StyledArticle style={cssVars}>
-      <Heading id={id} headingStyle="h1-resource" element="h1" margin="normal" tabIndex={-1}>
+      <Heading id={id} headingStyle="h1-resource" element="h1" margin="normal" tabIndex={-1} lang={lang}>
         {title}
       </Heading>
-      <Text textStyle="ingress" element="div">
+      <Text textStyle="ingress" element="div" lang={lang}>
         {introduction}
       </Text>
       {content}

package/src/Image/Image.tsx

@@ -78,6 +78,7 @@ interface Props {
   crop?: ImageCrop;
   focalPoint?: ImageFocalPoint;
   border?: string;
+  lang?: string;
 }
 
 const Image = ({
@@ -92,6 +93,7 @@ const Image = ({
   expandButton,
   fallbackWidth = 1024,
   border,
+  lang,
   ...rest
 }: Props) => {
   const srcSet = rest.srcSet ?? getSrcSet(src, crop, focalPoint);
@@ -101,7 +103,7 @@ const Image = ({
   if (contentType && contentType === 'image/gif') {
     return (
       <StyledImageWrapper data-border={border}>
-        <StyledImage alt={alt} loading={loading} src={`${src}`} {...rest} data-border={border} />
+        <StyledImage alt={alt} loading={loading} src={`${src}`} {...rest} data-border={border} lang={lang} />
       </StyledImageWrapper>
     );
   }
@@ -110,7 +112,14 @@ const Image = ({
     <StyledImageWrapper data-svg={contentType === 'image/svg+xml'} data-border={border}>
       <picture>
         <source type={contentType} srcSet={srcSet} sizes={sizes} />
-        <StyledImage alt={alt} loading={loading} src={`${src}?${queryString}`} {...rest} data-border={border} />
+        <StyledImage
+          alt={alt}
+          loading={loading}
+          src={`${src}?${queryString}`}
+          {...rest}
+          data-border={border}
+          lang={lang}
+        />
       </picture>
       {expandButton}
     </StyledImageWrapper>

package/src/KeyFigure/KeyFigure.tsx

@@ -59,14 +59,15 @@ interface Props {
   };
   title: string;
   subtitle: string;
+  lang?: string;
 }
 
-const KeyFigure = ({ image, title, subtitle }: Props) => {
+const KeyFigure = ({ image, title, subtitle, lang }: Props) => {
   return (
     <ContentWrapper>
       <StyledImage src={image?.src} width={150} height={150} alt={image?.alt} />
-      <TitleWrapper>{title}</TitleWrapper>
-      <SubTitleWrapper>{subtitle}</SubTitleWrapper>
+      <TitleWrapper lang={lang}>{title}</TitleWrapper>
+      <SubTitleWrapper lang={lang}>{subtitle}</SubTitleWrapper>
     </ContentWrapper>
   );
 };

package/src/Notion/Notion.tsx

@@ -71,9 +71,10 @@ export type NotionProps = {
   visualElement: ReactNode;
   imageElement?: ReactNode;
   children?: ReactNode;
+  lang?: string;
 };
 
-const Notion = ({ id, labels = [], text, title, visualElement, imageElement, children }: NotionProps) => {
+const Notion = ({ id, labels = [], text, title, visualElement, imageElement, children, lang }: NotionProps) => {
   const { t } = useTranslation();
 
   return (
@@ -81,7 +82,7 @@ const Notion = ({ id, labels = [], text, title, visualElement, imageElement, chi
       <ContentWrapper>
         {imageElement}
         {visualElement}
-        <TextWrapper hasVisualElement={!!(imageElement || visualElement)}>
+        <TextWrapper hasVisualElement={!!(imageElement || visualElement)} lang={lang}>
           <b>{title.trim()}</b>
           {text}
           {!!labels.length && (

package/src/Table/Table.tsx

@@ -22,6 +22,7 @@ interface Props {
   dangerouslySetInnerHTML?: {
     __html: string;
   };
+  lang?: string;
 }
 
 const ScrollBorder = styled.div`

package/src/locale/messages-en.ts

@@ -1209,6 +1209,7 @@ const messages = {
     listView: 'List view',
     detailView: 'Detailed listview',
     shortView: 'Card view',
+    userPictureAltText: 'Profile picture',
     sharedFolder: {
       folderCopied: 'The folder was copied.',
       info: 'This folder contains learning resources and tasks from NDLA, gathered by a teacher.',

package/src/locale/messages-nb.ts

@@ -1206,6 +1206,7 @@ const messages = {
     listView: 'Listevisning',
     detailView: 'Detaljert listevisning',
     shortView: 'Kort visning',
+    userPictureAltText: 'Profilbilde',
     sharedFolder: {
       folderCopied: 'Mappen har blitt kopiert.',
       info: 'Denne mappa inneholder fagstoff og oppgaver fra NDLA, samlet av en lærer. ',

package/src/locale/messages-nn.ts

@@ -516,7 +516,7 @@ const messages = {
     associatedTopics: 'Tilhøyrande emne',
   },
   subjectFrontPage: {
-    buildsOn: 'Byggjer på',
+    buildsOn: 'Bygger på',
     connectedTo: 'Felles programfag saman med',
     leadsTo: 'Leier til',
   },
@@ -1206,6 +1206,7 @@ const messages = {
     listView: 'Listevisning',
     detailView: 'Detaljert listevisning',
     shortView: 'Kortvisning',
+    userPictureAltText: 'Profilbilete',
     sharedFolder: {
       folderCopied: 'Mappa vart kopiert.',
       info: 'Denne mappa inneheld fagstoff og oppgåver frå NDLA, samla av ein lærar.',

package/src/locale/messages-se.ts

@@ -1206,6 +1206,7 @@ const messages = {
     listView: 'Oppalašlistu',
     detailView: 'Bienalaš oppalašlistu',
     shortView: 'Oanehis listu',
+    userPictureAltText: 'Profiilagova',
     sharedFolder: {
       folderCopied: 'Máŋgejuvvon máhppa.',
       info: 'Dán máhpas lea NDLA fágasisdoallu ja bargobihtát, čohkkejuvvon oahpaheaddjis.',

package/src/locale/messages-sma.ts

@@ -1211,6 +1211,7 @@ const messages = {
     listView: 'Listevisning',
     detailView: 'Detaljert listevisning',
     shortView: 'Kort visning',
+    userPictureAltText: 'Profijleguvviem',
     sharedFolder: {
       folderCopied: 'Mappen har blitt kopiert.',
       info: 'Denne mappa inneheld fagstoff og oppgåver frå NDLA, samla av ein lærar.',