@ndla/ui 30.1.0 → 30.2.1

package/src/Article/ArticleHeaderWrapper.tsx

@@ -6,16 +6,15 @@
  *
  */
 
-import React, { Component, ComponentType, ReactNode } from 'react';
+import React, { ComponentType, ReactNode, useEffect, useState } from 'react';
 import BEMHelper from 'react-bem-helper';
-import { withTranslation, WithTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import Button from '@ndla/button';
 import { isMobile } from 'react-device-detect';
 import { fonts, colors } from '@ndla/core';
 
 import styled from '@emotion/styled';
 import { FooterHeaderIcon } from '@ndla/icons/common';
-// @ts-ignore
 import CompetenceGoalsDialog from '../CompetenceGoals/CompetenceGoalsDialog';
 
 const classes = new BEMHelper({
@@ -40,12 +39,11 @@ const CompetenceWrapper = styled.div`
 `;
 
 const CompetenceBadge = styled.span`
-  display: inline-block;
+  display: inline-flex;
   background: ${colors.brand.greyLighter};
   border-radius: 36px;
   font-weight: ${fonts.weight.semibold};
   ${fonts.sizes('12px', '15px')};
-  display: inline-flex;
   align-items: center;
   color: ${colors.text.primary};
   font-family: ${fonts.sans};
@@ -77,19 +75,11 @@ type Props = {
   children: ReactNode;
 };
 
-interface State {
-  isOpen: boolean;
-}
-
-class ArticleHeaderWrapper extends Component<Props & WithTranslation, State> {
-  constructor(props: Props & WithTranslation) {
-    super(props);
-    this.state = { isOpen: false };
-    this.closeDialog = this.closeDialog.bind(this);
-    this.openDialog = this.openDialog.bind(this);
-  }
+const ArticleHeaderWrapper = ({ children, competenceGoals, competenceGoalTypes }: Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { t } = useTranslation();
 
-  componentDidMount() {
+  useEffect(() => {
     if (isMobile) {
       const heroContentList: NodeListOf<HTMLElement> = document.querySelectorAll('.c-article__header');
       if (heroContentList.length === 1) {
@@ -97,58 +87,55 @@ class ArticleHeaderWrapper extends Component<Props & WithTranslation, State> {
         window.scrollBy(0, heroContentList[0].offsetTop - 120); // Adjust for header
       }
     }
-  }
+  }, []);
 
-  openDialog() {
-    this.setState({ isOpen: true });
-  }
+  const openDialog = () => {
+    setIsOpen(true);
+  };
 
-  closeDialog() {
-    this.setState({ isOpen: false });
-  }
+  const closeDialog = () => {
+    setIsOpen(false);
+  };
 
-  render() {
-    const { children, competenceGoals, competenceGoalTypes, t } = this.props;
-    if (!competenceGoals) {
-      return <div {...classes('header')}>{children}</div>;
-    }
+  if (!competenceGoals) {
+    return <div {...classes('header')}>{children}</div>;
+  }
 
-    const dialog =
-      typeof competenceGoals === 'function' ? (
-        competenceGoals({
-          Dialog: CompetenceGoalsDialog,
-          dialogProps: {
-            isOpen: this.state.isOpen,
-            onClose: this.closeDialog,
-          },
-        })
-      ) : (
-        <CompetenceGoalsDialog onClose={this.closeDialog} isOpen={this.state.isOpen}>
-          {competenceGoals}
-        </CompetenceGoalsDialog>
-      );
-    return (
-      <div {...classes('header')}>
-        {children}
-        <CompetenceWrapper>
-          {competenceGoalTypes &&
-            competenceGoalTypes.map((type) => (
-              <CompetenceBadge key={type}>
-                <FooterHeaderIcon />
-                <CompetenceBadgeText>{type}</CompetenceBadgeText>
-              </CompetenceBadge>
-            ))}
-          <CompetenceButtonWrapper addSpace={competenceGoalTypes && competenceGoalTypes.length > 0}>
-            <OpenButton onClick={this.openDialog}>
-              <FooterHeaderIcon />
-              <CompetenceBadgeText>{t('competenceGoals.showCompetenceGoals')}</CompetenceBadgeText>
-            </OpenButton>
-          </CompetenceButtonWrapper>
-        </CompetenceWrapper>
-        {dialog}
-      </div>
+  const dialog =
+    typeof competenceGoals === 'function' ? (
+      competenceGoals({
+        Dialog: CompetenceGoalsDialog,
+        dialogProps: {
+          isOpen: isOpen,
+          onClose: closeDialog,
+        },
+      })
+    ) : (
+      <CompetenceGoalsDialog onClose={closeDialog} isOpen={isOpen}>
+        {competenceGoals}
+      </CompetenceGoalsDialog>
     );
-  }
-}
+  return (
+    <div {...classes('header')}>
+      {children}
+      <CompetenceWrapper>
+        {competenceGoalTypes &&
+          competenceGoalTypes.map((type) => (
+            <CompetenceBadge key={type}>
+              <FooterHeaderIcon />
+              <CompetenceBadgeText>{type}</CompetenceBadgeText>
+            </CompetenceBadge>
+          ))}
+        <CompetenceButtonWrapper addSpace={competenceGoalTypes && competenceGoalTypes.length > 0}>
+          <OpenButton onClick={openDialog}>
+            <FooterHeaderIcon />
+            <CompetenceBadgeText>{t('competenceGoals.showCompetenceGoals')}</CompetenceBadgeText>
+          </OpenButton>
+        </CompetenceButtonWrapper>
+      </CompetenceWrapper>
+      {dialog}
+    </div>
+  );
+};
 
-export default withTranslation()(ArticleHeaderWrapper);
+export default ArticleHeaderWrapper;

package/src/Footer/FooterLinks.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { spacing, fonts, colors, mq, breakpoints, spacingUnit } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import { Forward, Launch } from '@ndla/icons/common';
-import { WithTranslation, withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 const StyledLinksWrapper = styled.div`
   display: flex;
@@ -92,43 +92,46 @@ const StyledHeaderLinks = styled.h1`
   margin: ${spacing.xsmall} 0;
 `;
 
-const FooterLinks = ({ t, links }: FooterLinksProps & WithTranslation) => (
-  <>
-    <StyledLinksWrapper>
-      <section>
-        <StyledHeaderLinks>
-          {t('footer.footerLinksHeader')} <Launch />
-        </StyledHeaderLinks>
-        <StyledNav>
-          {commonLinks.map((link) => (
-            <div key={link.url}>
-              <StyledSafeLink
-                key={t<string>(`footer.ndlaLinks.${link.key}`)}
-                aria-label={t(`footer.ndlaLinks.${link.key}`)}
-                to={link.url}
-                target="_blank"
-                rel="noopener noreferrer">
-                {t(`footer.ndlaLinks.${link.key}`)}
-              </StyledSafeLink>
-            </div>
-          ))}
-        </StyledNav>
-      </section>
-      <section>
-        <StyledNav>
-          {links.map((link) => (
-            <StyledSocialMediaLinkWrapper key={link.to}>
-              <StyledSocialMediaIcon>{link.icon}</StyledSocialMediaIcon>
-              <StyledSafeLink to={link.to}>
-                {link.text}
-                <Forward />
-              </StyledSafeLink>
-            </StyledSocialMediaLinkWrapper>
-          ))}
-        </StyledNav>
-      </section>
-    </StyledLinksWrapper>
-  </>
-);
+const FooterLinks = ({ links }: FooterLinksProps) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <StyledLinksWrapper>
+        <section>
+          <StyledHeaderLinks>
+            {t('footer.footerLinksHeader')} <Launch />
+          </StyledHeaderLinks>
+          <StyledNav>
+            {commonLinks.map((link) => (
+              <div key={link.url}>
+                <StyledSafeLink
+                  key={t<string>(`footer.ndlaLinks.${link.key}`)}
+                  aria-label={t(`footer.ndlaLinks.${link.key}`)}
+                  to={link.url}
+                  target="_blank"
+                  rel="noopener noreferrer">
+                  {t(`footer.ndlaLinks.${link.key}`)}
+                </StyledSafeLink>
+              </div>
+            ))}
+          </StyledNav>
+        </section>
+        <section>
+          <StyledNav>
+            {links.map((link) => (
+              <StyledSocialMediaLinkWrapper key={link.to}>
+                <StyledSocialMediaIcon>{link.icon}</StyledSocialMediaIcon>
+                <StyledSafeLink to={link.to}>
+                  {link.text}
+                  <Forward />
+                </StyledSafeLink>
+              </StyledSocialMediaLinkWrapper>
+            ))}
+          </StyledNav>
+        </section>
+      </StyledLinksWrapper>
+    </>
+  );
+};
 
-export default withTranslation()(FooterLinks);
+export default FooterLinks;

package/src/Frontpage/FrontpageFilm.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import SafeLink from '@ndla/safelink';
 import { Forward } from '@ndla/icons/common';
-import { withTranslation, WithTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { spacing, spacingUnit, colors, breakpoints, fonts, mq } from '@ndla/core';
 import SectionHeading from '../SectionHeading';
 
@@ -74,20 +74,23 @@ type Props = {
   imageUrl: string;
 };
 
-const FrontpageFilm = ({ url, imageUrl, t }: Props & WithTranslation) => (
-  <StyledSection>
-    <SectionHeading large>{t('welcomePage.film.header')}</SectionHeading>
-    <StyledImage imageUrl={imageUrl}>
-      <StyledText>{t('welcomePage.film.text')}</StyledText>
-      <StyledText narrow>{t('welcomePage.film.textShort')}</StyledText>
-    </StyledImage>
-    <div className="o-text-link__wrapper o-text-link__wrapper--right">
-      <SafeLink className="o-text-link" to={url}>
-        {t('welcomePage.film.linkLabel')}
-        <Forward />
-      </SafeLink>
-    </div>
-  </StyledSection>
-);
+const FrontpageFilm = ({ url, imageUrl }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <StyledSection>
+      <SectionHeading large>{t('welcomePage.film.header')}</SectionHeading>
+      <StyledImage imageUrl={imageUrl}>
+        <StyledText>{t('welcomePage.film.text')}</StyledText>
+        <StyledText narrow>{t('welcomePage.film.textShort')}</StyledText>
+      </StyledImage>
+      <div className="o-text-link__wrapper o-text-link__wrapper--right">
+        <SafeLink className="o-text-link" to={url}>
+          {t('welcomePage.film.linkLabel')}
+          <Forward />
+        </SafeLink>
+      </div>
+    </StyledSection>
+  );
+};
 
-export default withTranslation()(FrontpageFilm);
+export default FrontpageFilm;

package/src/Frontpage/FrontpageMultidisciplinarySubject.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import SafeLink, { SafeLinkButton } from '@ndla/safelink';
 import styled from '@emotion/styled';
 import { spacing, breakpoints, mq } from '@ndla/core';
-import { withTranslation, WithTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import SectionHeading from '../SectionHeading';
 import ComponentCursor from '../ComponentCursor';
 import { MultidisciplinarySubjectIllustration as Illustration } from './illustrations/FrontpageIllustrations';
@@ -74,33 +74,36 @@ type Props = {
   topics?: { url: string; title: string; id: string }[];
 };
 
-const FrontpageMultidisciplinarySubject = ({ url, t, topics }: Props & WithTranslation) => (
-  <StyledSection>
-    <ComponentCursor variant="left" text={t('frontpageMultidisciplinarySubject.cursorText')} />
-    <Wrapper>
-      <Content>
-        <SectionHeading large>{t('frontpageMultidisciplinarySubject.heading')}</SectionHeading>
-        {topics ? (
-          <Topics>
-            {topics.map((topic) => {
-              return (
-                <Topic key={topic.id}>
-                  <SafeLink to={topic.url}>{topic.title}</SafeLink>
-                </Topic>
-              );
-            })}
-          </Topics>
-        ) : null}
-        <StyledText>{t('frontpageMultidisciplinarySubject.text')}</StyledText>
-      </Content>
-    </Wrapper>
-    <TargetItem className="o-text-link__wrapper o-text-link__wrapper">
-      <SafeLinkButton to={url} buttonSize="medium" borderShape="rounded">
-        {t('frontpageMultidisciplinarySubject.linkText')}
-      </SafeLinkButton>
-    </TargetItem>
-    <Illustration />
-  </StyledSection>
-);
+const FrontpageMultidisciplinarySubject = ({ url, topics }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <StyledSection>
+      <ComponentCursor variant="left" text={t('frontpageMultidisciplinarySubject.cursorText')} />
+      <Wrapper>
+        <Content>
+          <SectionHeading large>{t('frontpageMultidisciplinarySubject.heading')}</SectionHeading>
+          {topics ? (
+            <Topics>
+              {topics.map((topic) => {
+                return (
+                  <Topic key={topic.id}>
+                    <SafeLink to={topic.url}>{topic.title}</SafeLink>
+                  </Topic>
+                );
+              })}
+            </Topics>
+          ) : null}
+          <StyledText>{t('frontpageMultidisciplinarySubject.text')}</StyledText>
+        </Content>
+      </Wrapper>
+      <TargetItem className="o-text-link__wrapper o-text-link__wrapper">
+        <SafeLinkButton to={url} buttonSize="medium" borderShape="rounded">
+          {t('frontpageMultidisciplinarySubject.linkText')}
+        </SafeLinkButton>
+      </TargetItem>
+      <Illustration />
+    </StyledSection>
+  );
+};
 
-export default withTranslation()(FrontpageMultidisciplinarySubject);
+export default FrontpageMultidisciplinarySubject;

package/src/Frontpage/FrontpageToolbox.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { WithTranslation, withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { spacing, breakpoints, mq } from '@ndla/core';
 import { SafeLinkButton } from '@ndla/safelink';
 import SectionHeading from '../SectionHeading';
@@ -46,21 +46,24 @@ type Props = {
   urlTeachers: string;
 };
 
-const FrontpageToolbox = ({ urlStudents, urlTeachers, t }: Props & WithTranslation) => (
-  <StyledSection>
-    <ComponentCursor variant="left" text={t('frontPageToolbox.cursorText')} />
-    <SectionHeading large>{t('frontPageToolbox.heading')}</SectionHeading>
-    <ToolboxWrapper>
-      <StyledText>{t('frontPageToolbox.text')}</StyledText>
-    </ToolboxWrapper>
-    <StyledStudentsButton to={urlStudents} buttonSize="medium" borderShape="rounded">
-      {t('frontPageToolbox.linkTextStudents')}
-    </StyledStudentsButton>
-    <SafeLinkButton to={urlTeachers} buttonSize="medium" borderShape="rounded">
-      {t('frontPageToolbox.linkTextTeachers')}
-    </SafeLinkButton>
-    <Illustration />
-  </StyledSection>
-);
+const FrontpageToolbox = ({ urlStudents, urlTeachers }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <StyledSection>
+      <ComponentCursor variant="left" text={t('frontPageToolbox.cursorText')} />
+      <SectionHeading large>{t('frontPageToolbox.heading')}</SectionHeading>
+      <ToolboxWrapper>
+        <StyledText>{t('frontPageToolbox.text')}</StyledText>
+      </ToolboxWrapper>
+      <StyledStudentsButton to={urlStudents} buttonSize="medium" borderShape="rounded">
+        {t('frontPageToolbox.linkTextStudents')}
+      </StyledStudentsButton>
+      <SafeLinkButton to={urlTeachers} buttonSize="medium" borderShape="rounded">
+        {t('frontPageToolbox.linkTextTeachers')}
+      </SafeLinkButton>
+      <Illustration />
+    </StyledSection>
+  );
+};
 
-export default withTranslation()(FrontpageToolbox);
+export default FrontpageToolbox;

package/src/LearningPaths/LearningPathLastStepNavigation.tsx

@@ -10,7 +10,7 @@ import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import SafeLink from '@ndla/safelink';
-import { withTranslation, WithTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { fonts, spacing, spacingUnit } from '@ndla/core';
 import { OneColumn, LayoutItem } from '../index';
 
@@ -51,32 +51,35 @@ interface Props {
   learningPathName: string;
 }
 
-const LearningPathLastStepNavigation = ({ subject, topic, learningPathName, children, t }: Props & WithTranslation) => (
-  <OneColumn css={OneColumnCss}>
-    <LayoutItem layout="center">
-      <StyledHeader className="c-article__title">
-        <span>{t('learningPath.lastStep.heading')}</span>
-        <StyledSmallText>
-          {t('learningPath.lastStep.headingSmall', {
-            learningPathName,
-          })}
-        </StyledSmallText>
-      </StyledHeader>
-      {subject && (
-        <StyledLinkWrapper>
-          {t('learningPath.lastStep.subjectHeading')}
-          <SafeLink to={subject.url}>{subject.name}</SafeLink>
-        </StyledLinkWrapper>
-      )}
-      {topic && (
-        <StyledLinkWrapper>
-          {t('learningPath.lastStep.topicHeading')}
-          <SafeLink to={topic.url}>{topic.name}</SafeLink>
-        </StyledLinkWrapper>
-      )}
-      {children}
-    </LayoutItem>
-  </OneColumn>
-);
+const LearningPathLastStepNavigation = ({ subject, topic, learningPathName, children }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <OneColumn css={OneColumnCss}>
+      <LayoutItem layout="center">
+        <StyledHeader className="c-article__title">
+          <span>{t('learningPath.lastStep.heading')}</span>
+          <StyledSmallText>
+            {t('learningPath.lastStep.headingSmall', {
+              learningPathName,
+            })}
+          </StyledSmallText>
+        </StyledHeader>
+        {subject && (
+          <StyledLinkWrapper>
+            {t('learningPath.lastStep.subjectHeading')}
+            <SafeLink to={subject.url}>{subject.name}</SafeLink>
+          </StyledLinkWrapper>
+        )}
+        {topic && (
+          <StyledLinkWrapper>
+            {t('learningPath.lastStep.topicHeading')}
+            <SafeLink to={topic.url}>{topic.name}</SafeLink>
+          </StyledLinkWrapper>
+        )}
+        {children}
+      </LayoutItem>
+    </OneColumn>
+  );
+};
 
-export default withTranslation()(LearningPathLastStepNavigation);
+export default LearningPathLastStepNavigation;

package/src/LearningPaths/LearningPathMenuAside.tsx

@@ -11,7 +11,7 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { Time } from '@ndla/icons/common';
 import { SafeLinkButton } from '@ndla/safelink';
-import { WithTranslation, withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { colors, spacing, spacingUnit, fonts, mq, breakpoints, animations } from '@ndla/core';
 import LearningPathMenuAsideCopyright from './LearningPathMenuAsideCopyright';
 
@@ -107,32 +107,28 @@ type Props = {
   };
 };
 
-const LearningPathMenuAside = ({
-  lastUpdated,
-  learningPathURL,
-  copyright,
-  isOpen,
-  invertedStyle,
-  t,
-}: Props & WithTranslation) => (
-  <StyledAside isOpen={isOpen} invertedStyle={invertedStyle}>
-    <div css={learningPathDetailsCSS}>
-      <Time />
-      <p>
-        {t('learningPath.lastUpdated')}: {lastUpdated}
-      </p>
-    </div>
-    {copyright.contributors && <LearningPathMenuAsideCopyright copyright={copyright} />}
-    <p css={infoTextCSS}>{t('learningPath.createLearningPathText')}</p>
-    <StyledSafeLinkButton
-      to={learningPathURL}
-      target="_blank"
-      rel="noopener noreferrer"
-      outline
-      invertedStyle={invertedStyle}>
-      {t('learningPath.createLearningPathButtonText')}
-    </StyledSafeLinkButton>
-  </StyledAside>
-);
+const LearningPathMenuAside = ({ lastUpdated, learningPathURL, copyright, isOpen, invertedStyle }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <StyledAside isOpen={isOpen} invertedStyle={invertedStyle}>
+      <div css={learningPathDetailsCSS}>
+        <Time />
+        <p>
+          {t('learningPath.lastUpdated')}: {lastUpdated}
+        </p>
+      </div>
+      {copyright.contributors && <LearningPathMenuAsideCopyright copyright={copyright} />}
+      <p css={infoTextCSS}>{t('learningPath.createLearningPathText')}</p>
+      <StyledSafeLinkButton
+        to={learningPathURL}
+        target="_blank"
+        rel="noopener noreferrer"
+        outline
+        invertedStyle={invertedStyle}>
+        {t('learningPath.createLearningPathButtonText')}
+      </StyledSafeLinkButton>
+    </StyledAside>
+  );
+};
 
-export default withTranslation()(LearningPathMenuAside);
+export default LearningPathMenuAside;

package/src/LearningPaths/LearningPathMobileHeader.tsx

@@ -9,7 +9,7 @@
 import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
 import React from 'react';
-import { WithTranslation, withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { LearningPathBadge } from '../ContentTypeBadge';
 
 const StyledWrapper = styled.div`
@@ -25,11 +25,14 @@ const StyledMiniHeader = styled.span`
   ${fonts.sizes(16, 1.1)};
 `;
 
-const LearningPathMobileHeader = ({ t }: WithTranslation) => (
-  <StyledWrapper>
-    <LearningPathBadge size="xx-small" background />
-    <StyledMiniHeader>{t('learningPath.youAreInALearningPath')}</StyledMiniHeader>
-  </StyledWrapper>
-);
+const LearningPathMobileHeader = () => {
+  const { t } = useTranslation();
+  return (
+    <StyledWrapper>
+      <LearningPathBadge size="xx-small" background />
+      <StyledMiniHeader>{t('learningPath.youAreInALearningPath')}</StyledMiniHeader>
+    </StyledWrapper>
+  );
+};
 
-export default withTranslation()(LearningPathMobileHeader);
+export default LearningPathMobileHeader;

package/src/LearningPaths/LearningPathMobileStepInfo.tsx

@@ -9,7 +9,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { mq, breakpoints, typography } from '@ndla/core';
-import { WithTranslation, withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 const StyledInfo = styled.div`
   ${typography.smallHeading}
@@ -24,13 +24,16 @@ type Props = {
   current: number;
 };
 
-const LearningPathMobileStepInfo = ({ total, current, t }: Props & WithTranslation) => (
-  <StyledInfo>
-    {t('learningPath.mobileStepInfo', {
-      totalPages: total,
-      currentPage: current,
-    })}
-  </StyledInfo>
-);
+const LearningPathMobileStepInfo = ({ total, current }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <StyledInfo>
+      {t('learningPath.mobileStepInfo', {
+        totalPages: total,
+        currentPage: current,
+      })}
+    </StyledInfo>
+  );
+};
 
-export default withTranslation()(LearningPathMobileStepInfo);
+export default LearningPathMobileStepInfo;