@ndla/ui 43.0.3 → 44.0.0

package/src/Topic/Topic.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { 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/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/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/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 { 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;