@ndla/ui 43.0.2 → 44.0.0

package/src/SnackBar/SnackbarProvider.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useCallback, useMemo, createContext, ReactNode, useState, useContext, useEffect } from 'react';
+import { useCallback, useMemo, createContext, ReactNode, useState, useContext, useEffect } from 'react';
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';

package/src/Subject/Subject.tsx

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

package/src/Subject/SubjectBanner.tsx

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

package/src/Subject/SubjectHeader.tsx

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

package/src/Subject/SubjectNewContent.tsx

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

package/src/Subject/SubjectSocial.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { breakpoints, mq, spacing } from '@ndla/core';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { HeadingLevel } from '../types';
 import { SubjectSectionTitle } from './Subject';
 

package/src/Table/Table.tsx

@@ -9,7 +9,7 @@
 import styled from '@emotion/styled';
 import { colors, spacing } from '@ndla/core';
 import throttle from 'lodash/throttle';
-import React, { ReactNode, UIEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ReactNode, UIEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import BEMHelper from 'react-bem-helper';
 
 type ScrollPosition = 'start' | 'end' | 'center';

package/src/TagSelector/Control.tsx

@@ -8,7 +8,6 @@
 
 import styled from '@emotion/styled';
 import { spacing, utils } from '@ndla/core';
-import React from 'react';
 import { ControlProps } from 'react-select';
 import { TagType } from './types';
 

package/src/TagSelector/DropdownIndicator.tsx

@@ -7,7 +7,7 @@
  */
 
 import { ChevronDown, ChevronUp } from '@ndla/icons/common';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
 import { DropdownIndicatorProps, components } from 'react-select';

package/src/TagSelector/Input.tsx

@@ -8,7 +8,6 @@
 
 import { css } from '@emotion/react';
 import { colors, spacing } from '@ndla/core';
-import React from 'react';
 import { components, InputProps } from 'react-select';
 import { TagType } from './types';
 import { StyledValueButton } from './ValueButton';

package/src/TagSelector/Menu.tsx

@@ -8,7 +8,6 @@
 
 import { css } from '@emotion/react';
 import { colors } from '@ndla/core';
-import React from 'react';
 import { MenuProps, components } from 'react-select';
 import { StyledMenuList } from './MenuList';
 import { TagType } from './types';

package/src/TagSelector/MenuList.tsx

@@ -8,7 +8,6 @@
 
 import styled from '@emotion/styled';
 import { utils } from '@ndla/core';
-import React from 'react';
 import { MenuListProps } from 'react-select';
 import { TagType } from './types';
 

package/src/TagSelector/Option.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { OptionProps } from 'react-select';
 import { buttonStyleV2 as buttonStyle } from '@ndla/button';
 import styled from '@emotion/styled';

package/src/TagSelector/SelectContainer.tsx

@@ -8,7 +8,6 @@
 
 import styled from '@emotion/styled';
 import { colors, fonts, misc } from '@ndla/core';
-import React from 'react';
 import { ContainerProps } from 'react-select';
 import { TagType } from './types';
 

package/src/TagSelector/TagSelector.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { KeyboardEvent, useMemo, useState } from 'react';
+import { KeyboardEvent, useMemo, useState } from 'react';
 import CreatableSelect from 'react-select/creatable';
 import { MultiValue, StylesConfig } from 'react-select';
 import styled from '@emotion/styled';

package/src/TagSelector/ValueButton.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import React from 'react';
 import { MultiValueProps } from 'react-select';
 import { buttonStyleV2 as buttonStyle } from '@ndla/button';
 import styled from '@emotion/styled';

package/src/ToolboxPage/ToolboxInfo.tsx

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

package/src/Topic/Loader.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import ContentLoader from '../ContentLoader';
 
 const Loader = () => (

package/src/Topic/Topic.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode, MouseEvent, ComponentType } from 'react';
+import { ReactNode, MouseEvent, useMemo } from 'react';
 import styled from '@emotion/styled';
 import { animations, breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 
@@ -17,12 +17,14 @@ import { ButtonV2 } from '@ndla/button';
 import { CursorClick, ExpandTwoArrows } from '@ndla/icons/action';
 import { css } from '@emotion/react';
 import { useTranslation } from 'react-i18next';
+import { EmbedMetaData } from '@ndla/types-embed';
 import Loader from './Loader';
 import { ItemProps } from '../Navigation/NavigationBox';
 import { NavigationBox } from '../Navigation';
 import { makeSrcQueryString, ImageCrop, ImageFocalPoint } from '../Image';
 import { MessageBox } from '../Messages';
 import { Heading } from '../Typography';
+import { getCrop, getFocalPoint } from '../Embed/ImageEmbed';
 
 type InvertItProps = {
   invertedStyle?: boolean;
@@ -71,6 +73,7 @@ const ShowVisualElementWrapper = styled.div`
   height: 100%;
   overflow: hidden;
   aspect-ratio: 1;
+  mask-image: radial-gradient(white, black);
   -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari fix */
 `;
 
@@ -187,31 +190,16 @@ const StyledModalHeader = styled(ModalHeader)`
   padding: ${spacing.small} ${spacing.nsmall};
 `;
 
-const icons: Record<VisualElementProps['type'], ComponentType> = {
-  image: ExpandTwoArrows,
-  video: PlayCircleFilled,
-  other: CursorClick,
-};
-
-type VisualElementProps = {
-  type: 'image' | 'video' | 'other';
-  element: ReactNode;
-};
-
 export type TopicProps = {
   id?: string;
-  topic?: {
-    title: string;
-    introduction: string;
-    image?: {
-      url: string;
-      alt: string;
-      crop?: ImageCrop;
-      focalPoint?: ImageFocalPoint;
-    };
-    visualElement?: VisualElementProps;
-    resources?: ReactNode;
+  metaImage?: {
+    url: string;
+    alt: string;
   };
+  title: string;
+  introduction: string;
+  resources?: ReactNode;
+  visualElementEmbedMeta?: EmbedMetaData;
   subTopics?: ItemProps[] | null | undefined;
   onSubTopicSelected?: (event: MouseEvent<HTMLElement>, id?: string) => void;
   isLoading?: boolean;
@@ -223,11 +211,21 @@ export type TopicProps = {
   frame?: boolean;
   messageBox?: string;
   children?: ReactNode;
+  visualElement?: ReactNode;
 };
 
+interface MetaImageType {
+  url: string;
+  alt: string;
+  crop?: ImageCrop;
+  focalPoint?: ImageFocalPoint;
+}
+
 const Topic = ({
   id,
-  topic,
+  title,
+  introduction,
+  resources,
   subTopics,
   onSubTopicSelected,
   isLoading,
@@ -235,17 +233,40 @@ const Topic = ({
   invertedStyle,
   onToggleShowContent,
   showContent,
+  metaImage: articleMetaImage,
   isAdditionalTopic,
   frame,
   messageBox,
+  visualElementEmbedMeta,
   children,
+  visualElement,
 }: TopicProps) => {
   const { t } = useTranslation();
   const contentId = `expanded-description-${id}`;
   const testId = 'nav-topic-about';
-  const VisualElementIcon = topic?.visualElement?.type ? icons[topic.visualElement.type] : null;
+
+  const VisualElementIcon = useMemo(() => {
+    if (!visualElementEmbedMeta || visualElementEmbedMeta.status === 'error') return null;
+    else if (visualElementEmbedMeta.resource === 'brightcove') {
+      return PlayCircleFilled;
+    } else if (visualElementEmbedMeta.resource === 'image') {
+      return ExpandTwoArrows;
+    } else return CursorClick;
+  }, [visualElementEmbedMeta]);
+
+  const metaImage: MetaImageType | undefined = useMemo(() => {
+    if (visualElementEmbedMeta?.resource === 'image' && visualElementEmbedMeta.status === 'success') {
+      return {
+        url: visualElementEmbedMeta.data.image?.imageUrl,
+        alt: visualElementEmbedMeta.data.alttext?.alttext,
+        crop: getCrop(visualElementEmbedMeta.embedData),
+        focalPoint: getFocalPoint(visualElementEmbedMeta.embedData),
+      };
+    } else return articleMetaImage;
+  }, [articleMetaImage, visualElementEmbedMeta]);
+
   const wrapperStyle = [frame ? frameStyle : undefined, invertedStyle ? _invertedStyle : undefined];
-  if (isLoading || !topic) {
+  if (isLoading) {
     return (
       <Wrapper css={wrapperStyle} data-testid={testId}>
         {isLoading ? <Loader /> : null}
@@ -259,7 +280,7 @@ const Topic = ({
         <div>
           <HeadingWrapper>
             <Heading element="h1" headingStyle="h2" id={id} tabIndex={-1}>
-              {topic.title}
+              {title}
             </Heading>
             {isAdditionalTopic && (
               <>
@@ -268,23 +289,21 @@ const Topic = ({
               </>
             )}
           </HeadingWrapper>
-          <TopicIntroduction>
-            {renderMarkdown ? parse(renderMarkdown(topic.introduction)) : topic.introduction}
-          </TopicIntroduction>
+          <TopicIntroduction>{renderMarkdown ? parse(renderMarkdown(introduction)) : introduction}</TopicIntroduction>
         </div>
-        {topic.image && (
+        {metaImage && (
           <TopicHeaderVisualElementWrapper>
-            {topic.visualElement ? (
+            {visualElementEmbedMeta?.status === 'success' ? (
               <Modal>
                 <ModalTrigger>
                   <VisualElementButton
                     variant="stripped"
-                    title={topic.visualElement.type === 'image' ? t('image.largeSize') : t('visualElement.show')}
+                    title={visualElementEmbedMeta.resource === 'image' ? t('image.largeSize') : t('visualElement.show')}
                   >
                     <ShowVisualElementWrapper>
                       <TopicHeaderImage
-                        src={`${topic.image.url}?${makeSrcQueryString(800, topic.image.crop, topic.image.focalPoint)}`}
-                        alt={topic.image.alt}
+                        src={`${metaImage.url}?${makeSrcQueryString(800, metaImage.crop, metaImage.focalPoint)}`}
+                        alt={metaImage.alt}
                       />
                       <TopicHeaderOverlay />
                     </ShowVisualElementWrapper>
@@ -300,13 +319,13 @@ const Topic = ({
                   <StyledModalHeader>
                     <ModalCloseButton />
                   </StyledModalHeader>
-                  {topic.visualElement && topic.visualElement.element}
+                  {visualElement}
                 </ModalContent>
               </Modal>
             ) : (
               <TopicHeaderImage
-                src={`${topic.image.url}?${makeSrcQueryString(400, topic.image.crop, topic.image.focalPoint)}`}
-                alt={topic.image.alt}
+                src={`${metaImage.url}?${makeSrcQueryString(400, metaImage.crop, metaImage.focalPoint)}`}
+                alt={metaImage.alt}
               />
             )}
           </TopicHeaderVisualElementWrapper>
@@ -349,7 +368,7 @@ const Topic = ({
           invertedStyle={invertedStyle}
         />
       )}
-      {topic.resources}
+      {resources}
     </Wrapper>
   );
 };

package/src/Translation/Translation.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
 
 const classes = new BEMHelper({

package/src/Translation/TranslationLine.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
 
 const classes = new BEMHelper({

package/src/TreeStructure/AddFolderButton.tsx

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

package/src/TreeStructure/ComboboxButton.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { KeyboardEvent, forwardRef } from 'react';
+import { KeyboardEvent, forwardRef } from 'react';
 import styled from '@emotion/styled';
 import { useForwardedRef } from '@ndla/util';
 import { breakpoints, colors, mq, spacing } from '@ndla/core';

package/src/TreeStructure/FolderItem.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { CSSProperties, KeyboardEvent, useEffect, useMemo, useRef } from 'react';
+import { CSSProperties, KeyboardEvent, useEffect, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { ArrowDropDownRounded } from '@ndla/icons/common';

package/src/TreeStructure/FolderItems.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { animations } from '@ndla/core';
 import { IFolder } from '@ndla/types-backend/learningpath-api';

package/src/TreeStructure/TreeStructure.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useEffect, useState, useMemo, useRef } from 'react';
+import { useEffect, useState, useMemo, useRef } from 'react';
 import styled from '@emotion/styled';
 import { colors, fonts, misc, utils } from '@ndla/core';
 import uniq from 'lodash/uniq';

package/src/User/UserInfo.tsx

@@ -7,7 +7,6 @@
 
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { FeideUserApiType } from './apiTypes';
 import { parseUserObject } from './parseUserObject';

package/src/index.ts

@@ -28,7 +28,6 @@ export {
 
 export {
   ArticleByline,
-  ArticleContent,
   ArticleFootNotes,
   ArticleIntroduction,
   ArticleTitle,
@@ -264,7 +263,7 @@ export { KeyFigure } from './KeyFigure';
 export { default as ContactBlock } from './ContactBlock';
 export type { HeartButtonType } from './Embed';
 export { CampaignBlock } from './CampaignBlock';
-export { Grid } from './Grid';
+export { Grid, GridParallaxItem } from './Grid';
 export type { GridType } from './Grid';
 export { Heading } from './Typography';
 export type { HeadingLevel } from './types';
@@ -274,3 +273,5 @@ export { DefinitionTerm, DefinitionDescription } from './DefinitionList';
 export type { ProgrammeV2 } from './ProgrammeCard';
 
 export { Gloss } from './Gloss';
+
+export { LinkBlock, LinkBlockSection } from './LinkBlock';

package/src/locale/LocaleProvider.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { I18nextProvider, useTranslation } from 'react-i18next';
 import { i18nInstance } from '../i18n';
 import { Locale } from '../types';

package/src/types.ts

@@ -68,7 +68,7 @@ export interface FootNote {
 export interface Article {
   title: string;
   introduction: string;
-  content: string | ReactNode;
+  content: ReactNode;
   footNotes: Array<FootNote>;
   copyright: Copyright;
   published: string;

package/src/utils/createUniversalPortal.tsx

@@ -8,7 +8,7 @@
 
 // N.B This helper is intended to be used in https://github.com/ndlano/article-converter. It is not a general soultion for using portals in SSR applications.
 
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import ReactDOM from 'react-dom';
 
 function canUseDOM() {

package/lib/Article/ArticleContent.d.ts

@@ -1,7 +0,0 @@
-import { Locale } from '../types';
-type Props = {
-    content: string;
-    locale: Locale;
-};
-declare const ArticleContent: ({ content, locale, ...rest }: Props) => import("@emotion/react/jsx-runtime").JSX.Element;
-export default ArticleContent;

package/src/Article/ArticleContent.tsx

@@ -1,40 +0,0 @@
-/*
- * Copyright (c) 2016-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 React, { useEffect } from 'react';
-import {
-  initArticleScripts,
-  removeEventListenerForResize,
-  // @ts-ignore
-} from '@ndla/article-scripts';
-import { initPopovers, initTooltips } from '@ndla/tooltip';
-import { initAudioPlayers } from '../AudioPlayer';
-import { initCopyParagraphButtons } from '../CopyParagraphButton';
-import { Locale } from '../types';
-
-type Props = {
-  content: string;
-  locale: Locale;
-};
-const ArticleContent = ({ content, locale, ...rest }: Props) => {
-  useEffect(() => {
-    removeEventListenerForResize();
-    initArticleScripts();
-    initAudioPlayers(locale);
-    initTooltips();
-    initPopovers();
-    initCopyParagraphButtons();
-    return () => {
-      removeEventListenerForResize();
-    };
-  }, [content, locale]);
-
-  return <div dangerouslySetInnerHTML={{ __html: content }} {...rest} />;
-};
-
-export default ArticleContent;