@ndla/ui 43.0.1 → 43.0.3

package/src/LearningPaths/LearningPathMenuAsideCopyright.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { User } from '@ndla/icons/common';
 import { spacing, fonts, colors } from '@ndla/core';

package/src/LearningPaths/LearningPathMenuContent.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { colors, spacing, spacingUnit, fonts, mq, breakpoints, animations, utils } from '@ndla/core';

package/src/LearningPaths/LearningPathMenuIntro.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { useTranslation } from 'react-i18next';

package/src/LearningPaths/LearningPathMenuModalWrapper.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode, useCallback, useState } from 'react';
+import { ReactNode, useCallback, useState } from 'react';
 import { spacing, mq, breakpoints, colors } from '@ndla/core';
 import { ModalHeader, ModalBody, ModalTrigger, ModalCloseButton, Modal, ModalContent } from '@ndla/modal';
 import { css } from '@emotion/react';

package/src/LearningPaths/LearningPathMobileHeader.tsx

@@ -8,7 +8,6 @@
 
 import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { LearningPathBadge } from '../ContentTypeBadge';
 

package/src/LearningPaths/LearningPathMobileStepInfo.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { mq, breakpoints, typography } from '@ndla/core';
 import { useTranslation } from 'react-i18next';

package/src/LearningPaths/LearningPathSticky.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import { colors, spacing, animations, mq, breakpoints } from '@ndla/core';

package/src/LearningPaths/LearningPathWrapper.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { spacing, spacingUnit, breakpoints, mq } from '@ndla/core';
 

package/src/LetterFilter/LetterFilter.stories.tsx

@@ -8,7 +8,6 @@
 
 import { Meta, StoryFn } from '@storybook/react';
 import { useArgs } from '@storybook/client-api';
-import React from 'react';
 import { defaultParameters } from '../../../../stories/defaults';
 import LetterFilter from './LetterFilter';
 

package/src/LetterFilter/LetterFilter.tsx

@@ -7,7 +7,7 @@
  */
 
 import styled from '@emotion/styled';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { colors, fonts, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import { IconButtonV2 as IconButton } from '@ndla/button';

package/src/LicenseByline/EmbedByline.stories.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import styled from '@emotion/styled';
 import { breakpoints, mq, spacing } from '@ndla/core';

package/src/LicenseByline/EmbedByline.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { ReactNode } from 'react';
+import { ReactNode, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
@@ -17,6 +17,7 @@ import { ICopyright as AudioCopyright } from '@ndla/types-backend/audio-api';
 import { ICopyright as ConceptCopyright } from '@ndla/types-backend/concept-api';
 import { BrightcoveCopyright } from '@ndla/types-embed';
 import { WarningOutline } from '@ndla/icons/common';
+import { parseMarkdown } from '@ndla/util';
 import LicenseLink from './LicenseLink';
 import LicenseDescription from './LicenseDescription';
 
@@ -131,7 +132,7 @@ const EmbedByline = ({
   type,
   topRounded,
   bottomRounded,
-  description,
+  description: descriptionProp,
   children,
   visibleAlt,
   first = true,
@@ -139,7 +140,12 @@ const EmbedByline = ({
   ...props
 }: Props) => {
   const { t, i18n } = useTranslation();
-  const strippedDescription = description?.trim();
+  const strippedDescription = descriptionProp?.trim();
+
+  const description = useMemo(() => {
+    const stripped = strippedDescription?.trim() ?? '';
+    return parseMarkdown(stripped, 'caption');
+  }, [strippedDescription]);
 
   if (props.error) {
     const typeString = type === 'h5p' ? 'H5P' : t(`embed.type.${type}`).toLowerCase();

package/src/LicenseByline/LicenseDescription.tsx

@@ -7,18 +7,14 @@
  */
 
 import styled from '@emotion/styled';
-import { colors, spacing } from '@ndla/core';
+import { spacing } from '@ndla/core';
 import { ReactNode } from 'react';
 
 interface Props {
-  description: string;
+  description: ReactNode;
   icon?: ReactNode;
 }
 
-const StyledParagraph = styled.p`
-  margin: 0;
-`;
-
 const StyledFigCaption = styled.figcaption`
   display: flex;
   gap: ${spacing.small};
@@ -29,13 +25,16 @@ const StyledFigCaption = styled.figcaption`
   color: unset;
   padding-bottom: ${spacing.xsmall};
   border-bottom: inherit;
+  p {
+    margin: 0;
+  }
 `;
 
 const LicenseDescription = ({ description, icon }: Props) => {
   return (
     <StyledFigCaption>
       {icon}
-      <StyledParagraph>{description}</StyledParagraph>
+      {description}
     </StyledFigCaption>
   );
 };

package/src/Logo/Logo.tsx

@@ -7,7 +7,6 @@
  */
 /* eslint-disable max-len */
 
-import React from 'react';
 import BEMHelper from 'react-bem-helper';
 import SafeLink from '@ndla/safelink';
 import SvgLogo from './SvgLogo';

package/src/Logo/SvgLogo.tsx

@@ -7,7 +7,6 @@
  */
 /* eslint-disable max-len */
 
-import React from 'react';
 import { logoClasses } from './Logo';
 
 const LogoText = (locale?: string) => {

package/src/Masthead/Masthead.tsx

@@ -9,7 +9,7 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { MessageBanner } from '../Messages';
 import SkipToMainContent from './SkipToMainContent';
 

package/src/Masthead/MastheadSearchModal.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useCallback, useState } from 'react';
+import { ReactNode, useCallback, useState } from 'react';
 import { Drawer, Modal, ModalTrigger } from '@ndla/modal';
 import { IconButtonV2 as IconButton } from '@ndla/button';
 import { Cross } from '@ndla/icons/action';

package/src/Masthead/SkipToMainContent.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { colors } from '@ndla/core';

package/src/MediaList/MediaList.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import {
   getLicenseByAbbreviation,
   getResourceTypeNamespace,

package/src/Messages/MessageBanner.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { colors, spacing } from '@ndla/core';
 // @ts-ignore

package/src/Messages/MessageBox.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { InformationOutline, HumanMaleBoard, Forward, WarningOutline } from '@ndla/icons/common';

package/src/Messages/MessageBoxTag.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import styled from '@emotion/styled';

package/src/MultidisciplinarySubject/List.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { breakpoints, mq } from '@ndla/core';
 

package/src/MultidisciplinarySubject/ListItem.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { colors } from '@ndla/core';
 import SafeLink from '@ndla/safelink';

package/src/MultidisciplinarySubject/MultidisciplinarySubject.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { breakpoints, mq } from '@ndla/core';

package/src/MyNdla/Resource/Folder.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { Pencil } from '@ndla/icons/action';
 import { DeleteForever } from '@ndla/icons/editor';

package/src/MyNdla/Resource/Folder.tsx

@@ -7,7 +7,7 @@
  */
 
 import styled from '@emotion/styled';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { FolderOutlined, FolderShared } from '@ndla/icons/contentType';
 import { FileDocumentOutline, Share } from '@ndla/icons/common';
 import { fonts, spacing, colors, mq, breakpoints } from '@ndla/core';

package/src/MyNdla/Resource/FolderInput.tsx

@@ -9,7 +9,7 @@
 import styled from '@emotion/styled';
 import { IconButtonV2 } from '@ndla/button';
 import { Cross } from '@ndla/icons/action';
-import React, { ComponentProps, forwardRef, useEffect } from 'react';
+import { ComponentProps, forwardRef, useEffect } from 'react';
 import { isMobile } from 'react-device-detect';
 import { useTranslation } from 'react-i18next';
 import { colors, spacing } from '@ndla/core';

package/src/NDLAFilm/AboutNdlaFilm.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { ModalHeader, ModalBody, ModalCloseButton, Modal, ModalTrigger, ModalContent } from '@ndla/modal';

package/src/NDLAFilm/AllMoviesAlphabetically.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { RefObject, useMemo, useRef } from 'react';
+import { RefObject, useMemo, useRef } from 'react';
 import styled from '@emotion/styled';
 import { breakpoints, mq, spacing, spacingUnit, colors } from '@ndla/core';
 import SafeLink from '@ndla/safelink';

package/src/NDLAFilm/FilmContentCard.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { HTMLAttributes } from 'react';
+import { HTMLAttributes } from 'react';
 import { spacing, colors, fonts, breakpoints, misc } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import styled from '@emotion/styled';

package/src/NDLAFilm/FilmContentCardTags.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { spacing, spacingUnit, colors, fonts, misc } from '@ndla/core';
 import styled from '@emotion/styled';
 import { MovieResourceType } from './types';

package/src/NDLAFilm/FilmMovieList.tsx

@@ -5,7 +5,6 @@
  *
  */
 
-import React from 'react';
 import { Carousel, CalculatedCarouselProps } from '@ndla/carousel';
 import styled from '@emotion/styled';
 import { IconButtonV2 } from '@ndla/button';

package/src/NDLAFilm/FilmMovieSearch.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import SafeLink from '@ndla/safelink';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';

package/src/NDLAFilm/FilmSlideshow.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import styled from '@emotion/styled';
 import { Carousel, CarouselAutosize } from '@ndla/carousel';
 import { breakpoints, colors, misc, mq, spacing, spacingUnit } from '@ndla/core';

package/src/NDLAFilm/MovieGrid.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';
 import { CalculatedCarouselProps } from '@ndla/carousel';

package/src/NDLAFilm/NavigationArrow.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { ChevronRight, ChevronLeft } from '@ndla/icons/common';
 import styled from '@emotion/styled';
 import { breakpoints, colors, mq, spacing } from '@ndla/core';

package/src/NDLAFilm/SlideshowIndicator.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { breakpoints, colors, mq, spacing } from '@ndla/core';
 import { MovieType } from './types';

package/src/NDLAFilm/VisualElement.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import Image from '../Image';
 

package/src/Navigation/NavigationBox.tsx

@@ -1,8 +1,8 @@
-import React, { MouseEvent } from 'react';
+import { MouseEvent } from 'react';
 import styled from '@emotion/styled';
 import { SafeLinkButton } from '@ndla/safelink';
 import { ButtonV2 } from '@ndla/button';
-import { breakpoints, colors, fonts, misc, mq, spacing } from '@ndla/core';
+import { breakpoints, colors, misc, mq, spacing } from '@ndla/core';
 import { css } from '@emotion/react';
 import { Switch } from '@ndla/switch';
 import { uuid } from '@ndla/util';

package/src/Navigation/NavigationTopicAbout.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import parse from 'html-react-parser';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';

package/src/NoContentBox/NoContentBox.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { ButtonV2 } from '@ndla/button';
 
 interface Props {

package/src/Notion/ConceptNotion.tsx

@@ -6,7 +6,7 @@
  */
 import styled from '@emotion/styled';
 
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 //@ts-ignore
 import { initArticleScripts } from '@ndla/article-scripts';
 import { useTranslation } from 'react-i18next';

package/src/Notion/FigureNotion.tsx

@@ -8,7 +8,7 @@
 import styled from '@emotion/styled';
 import { colors, spacing } from '@ndla/core';
 import { getGroupedContributorDescriptionList, getLicenseByAbbreviation, getLicenseCredits } from '@ndla/licenses';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Figure, FigureCaption, FigureLicenseDialog, FigureType } from '../Figure';
 import { Copyright } from '../types';

package/src/Notion/Notion.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import React, { Fragment, ReactNode } from 'react';
+import { Fragment, ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
 import { parseMarkdown } from '@ndla/util';

package/src/Notion/NotionImage.tsx

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree. *
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { animations, breakpoints, mq, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';

package/src/Notion/NotionVisualElement.tsx

@@ -6,7 +6,7 @@
  */
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { Copyright } from '../types';
 import FigureNotion from './FigureNotion';
 

package/src/Programme/Programme.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { breakpoints, mq, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';

package/src/Programme/ProgrammeSubjects.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';

package/src/ProgrammeCard/ProgrammeCard.stories.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import ProgrammeCard from './ProgrammeCard';
 import { defaultParameters } from '../../../../stories/defaults';

package/src/RadioButtonGroup/RadioButtonGroup.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { Fragment, Component, ChangeEvent } from 'react';
+import { Fragment, Component, ChangeEvent } from 'react';
 import styled from '@emotion/styled';
 import { uuid } from '@ndla/util';
 import { spacing, fonts, colors } from '@ndla/core';

package/src/RelatedArticleList/RelatedArticleList.tsx

@@ -1,4 +1,4 @@
-import React, { Children, cloneElement, ReactElement } from 'react';
+import { Children, cloneElement, ReactElement } from 'react';
 import BEMHelper from 'react-bem-helper';
 import { ButtonV2 } from '@ndla/button';
 import SafeLink from '@ndla/safelink';

package/src/Resource/BlockResource.stories.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { defaultParameters } from '../../../../stories/defaults';
 import BlockResource from './BlockResource';

package/src/Resource/BlockResource.tsx

@@ -7,7 +7,7 @@
  */
 
 import styled from '@emotion/styled';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { colors, fonts, spacing } from '@ndla/core';
 import ContentTypeBadge from '../ContentTypeBadge';
 import Image from '../Image';

package/src/Resource/ListResource.tsx

@@ -7,7 +7,7 @@
  */
 
 import styled from '@emotion/styled';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { fonts, spacing, colors, breakpoints, mq } from '@ndla/core';
 import Image from '../Image';
 import {

package/src/Resource/Resource.stories.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { DropdownMenu, DropdownContent, DropdownItem, DropdownTrigger } from '@ndla/dropdown-menu';
 import { ButtonV2, IconButtonV2 } from '@ndla/button';

package/src/Resource/resourceComponents.tsx

@@ -8,7 +8,7 @@
 
 import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
-import React, { CSSProperties, HTMLAttributes, ReactNode, useMemo } from 'react';
+import { CSSProperties, HTMLAttributes, ReactNode, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IconButtonV2 } from '@ndla/button';
 import SafeLink, { SafeLinkButton } from '@ndla/safelink';

package/src/ResourceBox/ResourceBox.tsx

@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import React from 'react';
+
 import { breakpoints, fonts, mq, colors, spacing } from '@ndla/core';
 import { Launch } from '@ndla/icons/common';
 import { SafeLinkButton } from '@ndla/safelink';

package/src/ResourceGroup/ResourceGroup.tsx

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

package/src/ResourceGroup/ResourceItem.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { css, keyframes } from '@emotion/react';

package/src/ResourceGroup/ResourceList.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { css, keyframes } from '@emotion/react';
 import { useTranslation } from 'react-i18next';

package/src/ResourcesWrapper/ResourcesTopicTitle.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';

package/src/ResourcesWrapper/ResourcesWrapper.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';