@ndla/ui 50.2.1 → 50.4.0

package/src/NDLAFilm/index.ts

@@ -6,11 +6,10 @@
  *
  */
 
+import AllMoviesAlphabetically from './AllMoviesAlphabetically';
+import FilmMovieList from './FilmMovieList';
+import FilmMovieSearch from './FilmMovieSearch';
 import FilmSlideshow from './FilmSlideshow';
 import MovieGrid from './MovieGrid';
-import AboutNdlaFilm from './AboutNdlaFilm';
-import FilmMovieSearch from './FilmMovieSearch';
-import FilmMovieList from './FilmMovieList';
-import AllMoviesAlphabetically from './AllMoviesAlphabetically';
 
-export { FilmSlideshow, MovieGrid, AboutNdlaFilm, FilmMovieSearch, FilmMovieList, AllMoviesAlphabetically };
+export { FilmSlideshow, MovieGrid, FilmMovieSearch, FilmMovieList, AllMoviesAlphabetically };

package/src/NDLAFilm/types.ts

@@ -1,3 +1,11 @@
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
 export interface MovieType {
   id: number | string;
   metaDescription: string;

package/src/Navigation/NavigationBox.tsx

@@ -1,14 +1,22 @@
+/**
+ * Copyright (c) 2020-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 { MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { SafeLinkButton } from '@ndla/safelink';
 import { ButtonV2 } from '@ndla/button';
 import { breakpoints, colors, misc, mq, spacing } from '@ndla/core';
-import { css } from '@emotion/react';
-import { Switch } from '@ndla/switch';
-import { uuid } from '@ndla/util';
-import { useTranslation } from 'react-i18next';
 import { HumanMaleBoard } from '@ndla/icons/common';
+import { SafeLinkButton } from '@ndla/safelink';
+import { Switch } from '@ndla/switch';
 import { Heading } from '@ndla/typography';
+import { uuid } from '@ndla/util';
 
 const StyledWrapper = styled.nav`
   margin: 20px 0 34px;

package/src/Notion/Notion.tsx

@@ -6,8 +6,8 @@
  *
  */
 import { Fragment, ReactNode } from 'react';
-import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
 
 const ContentWrapper = styled.div`

package/src/Notion/NotionImage.tsx

@@ -2,14 +2,15 @@
  * 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. *
+ * LICENSE file in the root directory of this source tree.
+ *
  */
 
+import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { animations, breakpoints, mq, spacing } from '@ndla/core';
-import { useTranslation } from 'react-i18next';
-import Image from '../Image';
 import { Figure, FigureOpenDialogButton } from '../Figure';
+import Image from '../Image';
 
 const StyledImageWrapper = styled.div`
   overflow: hidden;

package/src/Notion/index.ts

@@ -1 +1,9 @@
+/**
+ * Copyright (c) 2021-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
 export { default as Notion } from './Notion';

package/src/Programme/Programme.tsx

@@ -1,9 +1,17 @@
+/**
+ * Copyright (c) 2020-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 { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { breakpoints, mq, spacing } from '@ndla/core';
-import { useTranslation } from 'react-i18next';
 import { Heading } from '@ndla/typography';
-import LayoutItem, { OneColumn } from '../Layout';
 import ProgrammeSubjects, { GradesProps } from './ProgrammeSubjects';
+import LayoutItem, { OneColumn } from '../Layout';
 import MessageBox from '../Messages/MessageBox';
 const StyledWrapper = styled.div`
   display: flex;

package/src/Programme/ProgrammeSubjects.tsx

@@ -11,8 +11,8 @@ import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';
 import { SafeLinkButton } from '@ndla/safelink';
-import { NavigationBox } from '../Navigation';
 import { MessageBox } from '../Messages';
+import { NavigationBox } from '../Navigation';
 
 const GradesMenu = styled.ul`
   display: flex;

package/src/ProgrammeCard/ProgrammeCard.tsx

@@ -7,8 +7,8 @@
  */
 
 import styled from '@emotion/styled';
-import SafeLink from '@ndla/safelink';
 import { spacing, colors, misc, breakpoints, mq, fonts } from '@ndla/core';
+import SafeLink from '@ndla/safelink';
 
 interface Image {
   src: string;

package/src/RelatedArticleList/RelatedArticleList.tsx

@@ -6,22 +6,16 @@
  *
  */
 
-import { Children, HTMLProps, ReactNode, useMemo, useState } from 'react';
-import BEMHelper from 'react-bem-helper';
+import { CSSProperties, Children, ComponentProps, ReactNode, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { ButtonV2 } from '@ndla/button';
+import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
-import { HeadingLevel } from '@ndla/typography';
-import SectionHeading from '../SectionHeading';
+import { Heading, HeadingLevel, Text } from '@ndla/typography';
 import ContentTypeBadge from '../ContentTypeBadge';
 import { contentTypes } from '../model/ContentType';
 
-const classes = new BEMHelper({
-  name: 'related-articles',
-  prefix: 'c-',
-});
-
 interface RelatedArticleProps {
   title: string;
   introduction: string;
@@ -31,6 +25,45 @@ interface RelatedArticleProps {
   type?: string;
 }
 
+const TitleWrapper = styled.div`
+  display: flex;
+  gap: ${spacing.small};
+  align-items: flex-start;
+  div {
+    min-width: 34px;
+    min-height: 34px;
+    max-width: 34px;
+    max-height: 34px;
+  }
+`;
+
+const StyledRelatedArticle = styled.article`
+  border-left: 6px solid var(--border-color, ${colors.brand.greyLight});
+  flex-grow: 0;
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.xsmall};
+  padding: 0px ${spacing.normal} 0px ${spacing.normal};
+`;
+
+const LinkInfo = styled(Text)`
+  font-weight: ${fonts.weight.bold};
+`;
+
+const LinkText = styled(Text)`
+  font-weight: ${fonts.weight.semibold};
+`;
+
+const colorMap = {
+  [contentTypes.SUBJECT_MATERIAL]: colors.subjectMaterial.light,
+  [contentTypes.TASKS_AND_ACTIVITIES]: colors.tasksAndActivities.background,
+  [contentTypes.ASSESSMENT_RESOURCES]: colors.assessmentResource.background,
+  [contentTypes.EXTERNAL_LEARNING_RESOURCES]: colors.externalLearningResource.background,
+  [contentTypes.SOURCE_MATERIAL]: colors.sourceMaterial.light,
+  [contentTypes.LEARNING_PATH]: colors.learningPath.background,
+  [contentTypes.SUBJECT]: colors.subject.light,
+};
+
 export const RelatedArticle = ({
   title,
   introduction,
@@ -40,33 +73,55 @@ export const RelatedArticle = ({
   type = contentTypes.SUBJECT_MATERIAL,
 }: RelatedArticleProps) => {
   return (
-    <article {...classes('item', type)}>
-      <h3 {...classes('title')}>
+    <StyledRelatedArticle style={{ '--border-color': colorMap[type] } as CSSProperties}>
+      <TitleWrapper>
         <ContentTypeBadge type={type} background size="small" />
-        <span {...classes('link-wrapper')}>
-          <SafeLink to={to} {...classes('link')} target={target} rel={linkInfo ? 'noopener noreferrer' : undefined}>
+        <LinkText element="span" textStyle="meta-text-medium" margin="none">
+          <SafeLink to={to} target={target} rel={linkInfo ? 'noopener noreferrer' : undefined}>
             {title}
           </SafeLink>
-        </span>
-      </h3>
-      <p {...classes('description')} dangerouslySetInnerHTML={{ __html: introduction }} />
-      {linkInfo && <p {...classes('link-info')}>{linkInfo}</p>}
-    </article>
+        </LinkText>
+      </TitleWrapper>
+      <Text textStyle="meta-text-small" margin="none" dangerouslySetInnerHTML={{ __html: introduction }} />
+      <LinkInfo textStyle="content" margin="none">
+        {linkInfo}
+      </LinkInfo>
+    </StyledRelatedArticle>
   );
 };
 
 const HeadingWrapper = styled.div`
   display: flex;
+  width: 100%;
   justify-content: space-between;
   align-items: center;
+  align-self: flex-start;
+`;
+
+const ArticlesWrapper = styled.div`
+  display: grid;
+  width: 100%;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: ${spacing.large};
+  ${mq.range({ until: breakpoints.tablet })} {
+    grid-template-columns: 1fr;
+  }
 `;
 
-interface Props extends HTMLProps<HTMLElement> {
+interface Props extends ComponentProps<'section'> {
   children?: JSX.Element[];
   articleCount?: number;
   headingLevel?: HeadingLevel;
   headingButtons?: ReactNode;
 }
+
+const StyledSection = styled.section`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${spacing.normal};
+`;
+
 export const RelatedArticleList = ({
   children = [],
   articleCount,
@@ -83,19 +138,19 @@ export const RelatedArticleList = ({
   );
 
   return (
-    <section {...classes('')} {...rest}>
+    <StyledSection {...rest}>
       <HeadingWrapper>
-        <SectionHeading headingLevel={headingLevel} className={classes('component-title').className}>
+        <Heading element={headingLevel} margin="none" headingStyle="list-title">
           {t('related.title')}
-        </SectionHeading>
+        </Heading>
         {headingButtons}
       </HeadingWrapper>
-      <div {...classes('articles')}>{childrenToShow}</div>
+      <ArticlesWrapper>{childrenToShow}</ArticlesWrapper>
       {childCount > 2 ? (
         <ButtonV2 onClick={() => setExpanded((p) => !p)} variant="outline">
           {t(`related.show${expanded ? 'Less' : 'More'}`)}
         </ButtonV2>
       ) : null}
-    </section>
+    </StyledSection>
   );
 };

package/src/Resource/BlockResource.stories.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import { Meta, StoryFn, StoryObj } from '@storybook/react';
 import styled from '@emotion/styled';
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
 import { spacing } from '@ndla/core';
-import { defaultParameters } from '../../../../stories/defaults';
 import BlockResource from './BlockResource';
 import { StoryResourceMenu, resourceTypesArr } from './storyComponents';
+import { defaultParameters } from '../../../../stories/defaults';
 
 export default {
   title: 'My NDLA/BlockResource',

package/src/Resource/BlockResource.tsx

@@ -6,11 +6,9 @@
  *
  */
 
-import styled from '@emotion/styled';
 import { ReactNode } from 'react';
+import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
-import ContentTypeBadge from '../ContentTypeBadge';
-import Image from '../Image';
 import {
   CompressedTagList,
   ResourceImageProps,
@@ -21,6 +19,8 @@ import {
   resourceHeadingStyle,
 } from './resourceComponents';
 import ContentLoader from '../ContentLoader';
+import ContentTypeBadge from '../ContentTypeBadge';
+import Image from '../Image';
 import { contentTypeMapping, resourceEmbedTypeMapping } from '../model/ContentType';
 
 const BlockElementWrapper = styled.div`

package/src/Resource/ListResource.stories.tsx

@@ -9,8 +9,8 @@
 import styled from '@emotion/styled';
 import { Meta, StoryFn, StoryObj } from '@storybook/react';
 import ListResource from './ListResource';
-import { defaultParameters } from '../../../../stories/defaults';
 import { StoryResourceMenu, resourceTypesArr } from './storyComponents';
+import { defaultParameters } from '../../../../stories/defaults';
 import { spacing } from '../../../core/src';
 
 export default {

package/src/Resource/ListResource.tsx

@@ -6,10 +6,9 @@
  *
  */
 
-import styled from '@emotion/styled';
 import { ReactNode } from 'react';
+import styled from '@emotion/styled';
 import { fonts, spacing, colors, breakpoints, mq } from '@ndla/core';
-import Image from '../Image';
 import {
   CompressedTagList,
   ResourceImageProps,
@@ -21,6 +20,7 @@ import {
 } from './resourceComponents';
 import ContentLoader from '../ContentLoader';
 import ContentTypeBadge from '../ContentTypeBadge';
+import Image from '../Image';
 import { contentTypeMapping, resourceEmbedTypeMapping } from '../model/ContentType';
 
 const ListResourceWrapper = styled.div`

package/src/Resource/resourceComponents.tsx

@@ -6,17 +6,17 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { colors, fonts, spacing } from '@ndla/core';
 import { CSSProperties, HTMLAttributes, ReactNode, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { IconButtonV2 } from '@ndla/button';
-import SafeLink, { SafeLinkButton } from '@ndla/safelink';
-import { HashTag } from '@ndla/icons/common';
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { IconButtonV2 } from '@ndla/button';
+import { colors, fonts, spacing } from '@ndla/core';
 import { DropdownMenu, DropdownContent, DropdownTrigger, DropdownItem } from '@ndla/dropdown-menu';
-import resourceTypeColor from '../utils/resourceTypeColor';
+import { HashTag } from '@ndla/icons/common';
+import SafeLink, { SafeLinkButton } from '@ndla/safelink';
 import { resourceEmbedTypeMapping } from '../model/ContentType';
+import resourceTypeColor from '../utils/resourceTypeColor';
 
 export interface ResourceImageProps {
   alt: string;

package/src/Resource/storyComponents.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { DropdownMenu, DropdownTrigger, DropdownContent, DropdownItem } from '@ndla/dropdown-menu';
 import { IconButtonV2, ButtonV2 } from '@ndla/button';
-import { HorizontalMenu } from '@ndla/icons/contentType';
+import { DropdownMenu, DropdownTrigger, DropdownContent, DropdownItem } from '@ndla/dropdown-menu';
 import { Pencil } from '@ndla/icons/action';
+import { HorizontalMenu } from '@ndla/icons/contentType';
 import { DeleteForever } from '@ndla/icons/editor';
 
 export const resourceTypesArr = [

package/src/ResourceBox/ResourceBox.tsx

@@ -1,5 +1,4 @@
 /**
- *
  * Copyright (c) 2022-present, NDLA.
  *
  * This source code is licensed under the GPLv3 license found in the
@@ -7,10 +6,10 @@
  *
  */
 
+import styled from '@emotion/styled';
 import { breakpoints, fonts, mq, colors, spacing } from '@ndla/core';
 import { Launch } from '@ndla/icons/common';
 import { SafeLinkButton } from '@ndla/safelink';
-import styled from '@emotion/styled';
 import Image from '../Image';
 
 const ResourceBoxContainer = styled.div`

package/src/ResourceGroup/ResourceGroup.tsx

@@ -7,8 +7,8 @@
  */
 
 import { ReactNode } from 'react';
-import styled from '@emotion/styled';
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
 
 import { HeadingLevel } from '@ndla/typography';

package/src/ResourceGroup/ResourceItem.tsx

@@ -8,14 +8,14 @@
 
 import { CSSProperties, ReactNode, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
 import { keyframes } from '@emotion/react';
-import SafeLink from '@ndla/safelink';
-import { Additional, Core, HumanMaleBoard } from '@ndla/icons/common';
+import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, misc, mq, spacing } from '@ndla/core';
-import { Resource } from '../types';
+import { Additional, Core, HumanMaleBoard } from '@ndla/icons/common';
+import SafeLink from '@ndla/safelink';
 import ContentTypeBadge from '../ContentTypeBadge';
 import * as contentTypes from '../model/ContentType';
+import { Resource } from '../types';
 
 const listElementActiveColor = (contentType?: string) => {
   switch (contentType) {

package/src/ResourceGroup/ResourceList.tsx

@@ -7,11 +7,11 @@
  */
 
 import { ReactNode } from 'react';
-import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
 import { fonts } from '@ndla/core';
-import NoContentBox from '../NoContentBox';
 import ResourceItem from './ResourceItem';
+import NoContentBox from '../NoContentBox';
 import { Resource } from '../types';
 
 const StyledResourceList = styled.ul`

package/src/ResourcesWrapper/ResourcesTopicTitle.tsx

@@ -1,11 +1,19 @@
+/**
+ * Copyright (c) 2018-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 { useTranslation } from 'react-i18next';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
+import { LearningPathQuiz } from '@ndla/icons/contentType';
 import { ModalBody, ModalHeader, ModalCloseButton, Modal, ModalTitle, ModalTrigger, ModalContent } from '@ndla/modal';
-import Tooltip from '@ndla/tooltip';
 import { Switch } from '@ndla/switch';
-import { LearningPathQuiz } from '@ndla/icons/contentType';
+import Tooltip from '@ndla/tooltip';
 
 interface HelpIconProps {
   invertedStyle: boolean;

package/src/Search/ActiveFilterContent.tsx

@@ -1,7 +1,15 @@
+/**
+ * Copyright (c) 2019-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 { forwardRef } from 'react';
 import styled from '@emotion/styled';
-import { Cross } from '@ndla/icons/action';
 import { spacing, mq, breakpoints, colors, misc, fonts } from '@ndla/core';
+import { Cross } from '@ndla/icons/action';
 
 const StyledActiveFilter = styled('button')`
   height: 38px;

package/src/Search/ActiveFilters.tsx

@@ -1,8 +1,16 @@
-import styled from '@emotion/styled';
+/**
+ * Copyright (c) 2018-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 { useTranslation } from 'react-i18next';
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { spacing, mq, breakpoints } from '@ndla/core';
 import Tooltip from '@ndla/tooltip';
-import { useTranslation } from 'react-i18next';
 import ActiveFilterContent, { StyledActiveFilterTitle } from './ActiveFilterContent';
 
 interface StyledActiveFiltersProps {

package/src/Search/ContentTypeResult.tsx

@@ -1,11 +1,17 @@
+/**
+ * Copyright (c) 2018-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 { ReactElement, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { ButtonV2 } from '@ndla/button';
 import { Additional, ChevronDown, ChevronUp } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 import Tooltip from '@ndla/tooltip';
-import { ReactElement, useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import ContentTypeBadge from '../ContentTypeBadge';
-import { ContentTypeResultType, Resource } from '../types';
 import {
   highlightStyle,
   noWidthhighlightStyle,
@@ -18,6 +24,8 @@ import {
   StyledWrapper,
 } from './ContentTypeResultStyles';
 import { isPathToHighlight } from './IsPathToHighlight';
+import ContentTypeBadge from '../ContentTypeBadge';
+import { ContentTypeResultType, Resource } from '../types';
 
 const renderAdditionalIcon = (label: string, isAdditional?: boolean): ReactElement | null => {
   if (isAdditional && label) {

package/src/Search/ContentTypeResultStyles.tsx

@@ -1,5 +1,13 @@
-import styled from '@emotion/styled';
+/**
+ * Copyright (c) 2019-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 { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { colors, spacing, spacingUnit, fonts, misc, animations, mq, breakpoints } from '@ndla/core';
 
 export const highlightStyle = css`

package/src/Search/IsPathToHighlight.ts

@@ -1,3 +1,11 @@
+/**
+ * Copyright (c) 2020-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
 export const isPathToHighlight = (path: string, href: string | false | null): boolean => {
   const regexForPath = new RegExp(`^(/.*)?${path}$`);
   return regexForPath.test(href || '') || path === href;

package/src/Search/LoadingWrapper.tsx

@@ -1,3 +1,11 @@
+/**
+ * Copyright (c) 2019-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 styled from '@emotion/styled';
 import { spacing, spacingUnit, animations } from '@ndla/core';
 import { Spinner } from '@ndla/icons';

package/src/Search/SearchField.tsx

@@ -1,4 +1,4 @@
-/*
+/**
  * Copyright (c) 2016-present, NDLA.
  *
  * This source code is licensed under the GPLv3 license found in the
@@ -7,12 +7,12 @@
  */
 
 import { FocusEvent, MouseEvent, RefObject } from 'react';
-import { useTranslation } from 'react-i18next';
 import BEMHelper from 'react-bem-helper';
+import { useTranslation } from 'react-i18next';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Search as SearchIcon } from '@ndla/icons/common';
 import { colors, spacing, mq, breakpoints, misc, fonts } from '@ndla/core';
+import { Search as SearchIcon } from '@ndla/icons/common';
 
 import ActiveFilters from './ActiveFilters';
 import LoadingWrapper from './LoadingWrapper';

package/src/Search/SearchFieldForm.tsx

@@ -1,6 +1,14 @@
+/**
+ * Copyright (c) 2019-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 { FormEvent, ReactNode } from 'react';
-import styled from '@emotion/styled';
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { spacing, mq, breakpoints } from '@ndla/core';
 
 interface Props {