@ndla/ui 47.3.0 → 47.4.0

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

@@ -155,6 +155,7 @@ declare const messages: {
         listView: string;
         detailView: string;
         shortView: string;
+        userPictureAltText: string;
         sharedFolder: {
             folderCopied: string;
             info: string;

package/lib/locale/messages-sma.js

@@ -1164,6 +1164,7 @@ var messages = _objectSpread(_objectSpread({
     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.',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "47.3.0",
+  "version": "47.4.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,23 +31,23 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^2.2.31",
-    "@ndla/button": "^12.0.5",
-    "@ndla/carousel": "^4.0.8",
-    "@ndla/core": "^4.2.2",
-    "@ndla/dropdown-menu": "^1.0.11",
-    "@ndla/forms": "^5.0.7",
+    "@ndla/accordion": "^2.2.32",
+    "@ndla/button": "^12.0.6",
+    "@ndla/carousel": "^4.0.9",
+    "@ndla/core": "^4.2.3",
+    "@ndla/dropdown-menu": "^1.0.12",
+    "@ndla/forms": "^5.0.8",
     "@ndla/hooks": "^2.1.1",
-    "@ndla/icons": "^4.1.3",
+    "@ndla/icons": "^4.1.4",
     "@ndla/licenses": "^7.2.2",
-    "@ndla/modal": "^5.0.5",
-    "@ndla/notion": "^6.0.7",
-    "@ndla/safelink": "^4.1.30",
-    "@ndla/select": "^3.1.3",
-    "@ndla/switch": "^1.1.17",
-    "@ndla/tabs": "^3.1.2",
-    "@ndla/tooltip": "^5.0.5",
-    "@ndla/typography": "^0.2.4",
+    "@ndla/modal": "^5.0.6",
+    "@ndla/notion": "^6.0.8",
+    "@ndla/safelink": "^4.1.31",
+    "@ndla/select": "^3.1.4",
+    "@ndla/switch": "^1.1.18",
+    "@ndla/tabs": "^3.1.3",
+    "@ndla/tooltip": "^5.0.6",
+    "@ndla/typography": "^0.2.5",
     "@ndla/util": "^4.0.0",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
@@ -80,5 +80,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6efaf50569b477800eb4a8093eb01c6ea2205479"
+  "gitHead": "726e4d5d54cad9fdd7090a2a1f92a36bc5893f65"
 }

package/src/CampaignBlock/CampaignBlock.tsx

@@ -99,8 +99,10 @@ const CampaignBlock = ({
     <Container className={className} data-type="campaign-block" data-image-side={imageSide}>
       {image && <StyledImg src={image.src} height={200} width={240} alt={image.alt} />}
       <TextWrapper>
-        <Heading css={headingStyle}>{title.title}</Heading>
-        <StyledDescription>{description.text}</StyledDescription>
+        <Heading css={headingStyle} lang={title.language}>
+          {title.title}
+        </Heading>
+        <StyledDescription lang={description.language}>{description.text}</StyledDescription>
         <StyledLink to={href}>
           {url.text}
           <Forward />

package/src/ContactBlock/ContactBlock.tsx

@@ -27,6 +27,7 @@ interface Props {
   imageWidth?: number;
   name: string;
   email: string;
+  lang?: string;
 }
 const BlockWrapper = styled.div`
   display: flex;
@@ -126,7 +127,16 @@ const StyledImage = styled(Image)`
   object-fit: cover;
 `;
 
-const ContactBlock = ({ image, jobTitle, description, name, email, blobColor = 'green', blob = 'pointy' }: Props) => {
+const ContactBlock = ({
+  image,
+  jobTitle,
+  description,
+  name,
+  email,
+  blobColor = 'green',
+  blob = 'pointy',
+  lang,
+}: Props) => {
   const { t } = useTranslation();
   const isGreenBlob = blobColor === 'green';
   const Blob = blob === 'pointy' ? BlobPointy : BlobRound;
@@ -153,8 +163,8 @@ const ContactBlock = ({ image, jobTitle, description, name, email, blobColor = '
       <ContentWrapper>
         <TextWrapper>
           <InfoWrapper>
-            <StyledHeader>{name}</StyledHeader>
-            <StyledText>{jobTitle}</StyledText>
+            <StyledHeader lang={lang}>{name}</StyledHeader>
+            <StyledText lang={lang}>{jobTitle}</StyledText>
             <StyledText>
               <Email>{`${t('email')}:`}</Email>
               <EmailLink href={`mailto:${email}`}>{email}</EmailLink>

package/src/CopyParagraphButton/CopyParagraphButtonV2.tsx

@@ -44,8 +44,9 @@ interface Props {
   // What to render within the h2
   children: ReactNode;
   copyText: string;
+  lang?: string;
 }
-const CopyParagraphButtonV2 = ({ children, copyText }: Props) => {
+const CopyParagraphButtonV2 = ({ children, copyText, lang }: Props) => {
   const [hasCopied, setHasCopied] = useState(false);
   const { t } = useTranslation();
   const sanitizedTitle = useMemo(() => encodeURIComponent(copyText.replace(/ /g, '-')), [copyText]);
@@ -74,7 +75,7 @@ const CopyParagraphButtonV2 = ({ children, copyText }: Props) => {
           <Link />
         </IconButton>
       </Tooltip>
-      <h2 id={sanitizedTitle} tabIndex={-1}>
+      <h2 id={sanitizedTitle} tabIndex={-1} lang={lang}>
         {children}
       </h2>
     </ContainerDiv>

package/src/Embed/ConceptEmbed.tsx

@@ -71,6 +71,7 @@ interface Props {
   embed: ConceptMetaData;
   fullWidth?: boolean;
   heartButton?: HeartButtonType;
+  lang?: string;
 }
 
 const StyledButton = styled.button`
@@ -92,7 +93,7 @@ const StyledButton = styled.button`
   }
 `;
 
-export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton }: Props) => {
+export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton, lang }: Props) => {
   const parsedContent = useMemo(() => {
     if (embed.status === 'error' || !embed.data.concept.content) return undefined;
     return parse(embed.data.concept.content.content);
@@ -121,6 +122,7 @@ export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton }: Pro
         conceptHeartButton={HeartButton && <HeartButton embed={embed} />}
         conceptType={concept.conceptType}
         glossData={concept.glossData}
+        lang={lang}
       />
     );
   } else if (embed.embedData.type === 'inline') {
@@ -137,6 +139,7 @@ export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton }: Pro
         conceptHeartButton={HeartButton && <HeartButton embed={embed} />}
         conceptType={concept.conceptType}
         glossData={concept.glossData}
+        lang={lang}
       />
     );
   } else {
@@ -152,6 +155,7 @@ export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton }: Pro
         conceptHeartButton={HeartButton && <HeartButton embed={embed} />}
         conceptType={concept.conceptType}
         glossData={concept.glossData}
+        lang={lang}
       />
     );
   }
@@ -234,6 +238,7 @@ export const InlineConcept = ({
   glossData,
   conceptType,
   headerButtons,
+  lang,
 }: InlineConceptProps) => {
   const { t } = useTranslation();
   const anchorRef = useRef<HTMLDivElement>(null);
@@ -275,6 +280,7 @@ export const InlineConcept = ({
               heartButton={heartButton}
               headerButtons={headerButtons}
               conceptHeartButton={conceptHeartButton}
+              lang={lang}
               closeButton={
                 <Close asChild>
                   <IconButtonV2 aria-label={t('close')} variant="ghost">
@@ -310,6 +316,7 @@ export const BlockConcept = ({
   conceptHeartButton,
   glossData,
   conceptType,
+  lang,
 }: ConceptProps) => {
   const { t } = useTranslation();
   const anchorRef = useRef<HTMLDivElement>(null);
@@ -339,6 +346,7 @@ export const BlockConcept = ({
             id=""
             title={title.title}
             text={content}
+            lang={lang}
             visualElement={
               visualElement?.status === 'success' && (
                 <>
@@ -383,6 +391,7 @@ export const BlockConcept = ({
                           heartButton={heartButton}
                           conceptHeartButton={conceptHeartButton}
                           inPopover
+                          lang={lang}
                           closeButton={
                             <Close asChild>
                               <IconButtonV2 aria-label={t('close')} variant="ghost">

package/src/Embed/ConceptListEmbed.tsx

@@ -15,6 +15,7 @@ import { BlockConcept } from './ConceptEmbed';
 
 interface Props {
   embed: ConceptListMetaData;
+  lang?: string;
 }
 
 const ConceptList = styled.div`
@@ -30,7 +31,7 @@ const StyledSpan = styled.span`
   color: ${colors.support.red};
 `;
 
-const ConceptListEmbed = ({ embed }: Props) => {
+const ConceptListEmbed = ({ embed, lang }: Props) => {
   const { t } = useTranslation();
   if (embed.status === 'error') {
     return <StyledSpan>{t('embed.conceptListError')}</StyledSpan>;
@@ -39,9 +40,9 @@ const ConceptListEmbed = ({ embed }: Props) => {
   return (
     <div>
       <Figure type="full" resizeIframe>
-        {embedData.title && <h2>{embedData.title}</h2>}
+        {embedData.title && <h2 lang={lang}>{embedData.title}</h2>}
         <ConceptList>
-          <ul>
+          <ul lang={lang}>
             {data.concepts.map(({ concept, visualElement }) => (
               <li key={concept.id}>
                 <BlockConcept

package/src/Embed/ImageEmbed.tsx

@@ -27,6 +27,7 @@ interface Props {
   path?: string;
   heartButton?: HeartButtonType;
   inGrid?: boolean;
+  lang?: string;
 }
 
 export interface Author {
@@ -104,7 +105,7 @@ export const getCrop = (data: ImageEmbedData) => {
 
 const expandedSizes = '(min-width: 1024px) 1024px, 100vw';
 
-const ImageEmbed = ({ embed, previewAlt, heartButton: HeartButton, inGrid, path }: Props) => {
+const ImageEmbed = ({ embed, previewAlt, heartButton: HeartButton, inGrid, path, lang }: Props) => {
   const [isBylineHidden, setIsBylineHidden] = useState(hideByline(embed.embedData.size));
   const [imageSizes, setImageSizes] = useState<string | undefined>(undefined);
 
@@ -162,6 +163,7 @@ const ImageEmbed = ({ embed, previewAlt, heartButton: HeartButton, inGrid, path
               onHideByline={() => setIsBylineHidden((p) => !p)}
             />
           }
+          lang={lang}
         />
       </ImageWrapper>
       {isBylineHidden || (isSmall(embedData.size) && !imageSizes) ? null : (

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 {
@@ -112,9 +113,11 @@ const NotionHeader = styled.div`
     ${fonts.sizes('22px', 1.2)};
   }
   small {
-    padding-left: ${spacing.small};
-    margin-left: ${spacing.xsmall};
-    border-left: 1px solid ${colors.brand.greyLight};
+    &[data-show-separator='true'] {
+      border-left: 1px solid ${colors.brand.greyLight};
+      padding-left: ${spacing.small};
+      margin-left: ${spacing.xsmall};
+    }
     ${fonts.sizes('20px', 1.2)};
     font-weight: ${fonts.weight.normal};
   }
@@ -177,29 +180,31 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
       conceptType,
       glossData,
       headerButtons,
+      lang,
       ...rest
     },
     ref,
   ) => {
     const { t } = useTranslation();
-
+    const isConcept = conceptType === 'concept';
     return (
       <div css={inPopover ? notionContentCss : undefined} {...rest} ref={ref}>
         <ContentPadding>
-          <NotionHeader>
+          <NotionHeader data-show-separator={isConcept}>
             <h1>
-              {title.title} {<small>{t(`searchPage.resultType.${conceptType}`)}</small>}
+              {isConcept && title.title}
+              {<small data-show-separator={isConcept}>{t(`searchPage.resultType.${conceptType}`)}</small>}
             </h1>
             <ButtonWrapper>
               {headerButtons}
               {closeButton}
             </ButtonWrapper>
           </NotionHeader>
-          {conceptType !== 'gloss' ? (
+          {isConcept ? (
             <>
               <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' ? (
@@ -209,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/Gloss/Gloss.tsx

@@ -38,6 +38,7 @@ export interface Props {
 }
 
 const Container = styled.div`
+  font-family: ${fonts.sans};
   display: flex;
   flex-direction: column;
   background-color: ${colors.background.lightBlue};

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`