@ndla/ui 36.0.2 → 37.0.1

package/src/Embed/ImageEmbed.stories.tsx

@@ -12,6 +12,7 @@ import { ImageEmbedData } from '@ndla/types-embed';
 import { IImageMetaInformationV2 } from '@ndla/types-backend/build/image-api';
 import ImageEmbed from './ImageEmbed';
 import { defaultParameters } from '../../../../stories/defaults';
+import StoryFavoriteButton from '../../../../stories/StoryFavoriteButton';
 
 const embedData: ImageEmbedData = {
   resource: 'image',
@@ -59,7 +60,6 @@ const meta: Meta<typeof ImageEmbed> = {
   component: ImageEmbed,
   tags: ['autodocs'],
   args: {
-    articlePath: undefined,
     previewAlt: true,
   },
   decorators: [
@@ -82,6 +82,7 @@ export default meta;
 
 export const ImageEmbedStory: StoryObj<typeof ImageEmbed> = {
   args: {
+    heartButton: StoryFavoriteButton,
     embed: {
       resource: 'image',
       status: 'success',
@@ -94,6 +95,7 @@ export const ImageEmbedStory: StoryObj<typeof ImageEmbed> = {
 
 export const Failed: StoryObj<typeof ImageEmbed> = {
   args: {
+    heartButton: StoryFavoriteButton,
     embed: {
       resource: 'image',
       status: 'error',

package/src/Embed/ImageEmbed.tsx

@@ -7,25 +7,21 @@
  */
 
 import isNumber from 'lodash/isNumber';
-import styled from '@emotion/styled';
-import { figureApa7CopyString, getGroupedContributorDescriptionList, getLicenseByAbbreviation } from '@ndla/licenses';
 import { ImageEmbedData, ImageMetaData } from '@ndla/types-embed';
 import { useTranslation } from 'react-i18next';
-import { ModalV2 } from '@ndla/modal';
-import { SafeLinkButton } from '@ndla/safelink';
 import { MouseEventHandler, useState } from 'react';
-import { ButtonV2, CopyButton } from '@ndla/button';
 import { ExpandTwoArrows } from '@ndla/icons/action';
 import { ArrowCollapse, ChevronDown, ChevronUp } from '@ndla/icons/common';
-import { Figure, FigureCaption, FigureType } from '../Figure';
+import { Figure, FigureType } from '../Figure';
 import Image, { ImageLink } from '../Image';
-import { FigureLicenseDialogContent } from '../Figure/FigureLicenseDialogContent';
-import { Copyright } from '../types';
+import { EmbedByline } from '../LicenseByline';
+import EmbedErrorPlaceholder from './EmbedErrorPlaceholder';
+import { HeartButtonType } from './types';
 
 interface Props {
   embed: ImageMetaData;
-  articlePath?: string;
   previewAlt?: boolean;
+  heartButton?: HeartButtonType;
 }
 
 export interface Author {
@@ -100,38 +96,20 @@ const getCrop = (data: ImageEmbedData) => {
   return undefined;
 };
 
-const StyledSpan = styled.span`
-  font-style: italic;
-  color: grey;
-`;
-
 const expandedSizes = '(min-width: 1024px) 1024px, 100vw';
 
-const ImageEmbed = ({ embed, articlePath, previewAlt }: Props) => {
-  const [isOpen, setIsOpen] = useState(false);
+const ImageEmbed = ({ embed, previewAlt, heartButton: HeartButton }: Props) => {
   const [isBylineHidden, setIsBylineHidden] = useState(hideByline(embed.embedData.size));
   const [imageSizes, setImageSizes] = useState<string | undefined>(undefined);
-  const { t, i18n } = useTranslation();
   if (embed.status === 'error') {
     const { align, size } = embed.embedData;
     const figureType = getFigureType(size, align);
-    return (
-      <Figure type={figureType}>
-        <div className="c-figure__img">
-          <img alt={t('image.error.url')} src={errorSvgSrc} />
-        </div>
-        <figcaption>{t('image.error.caption')}</figcaption>
-      </Figure>
-    );
+    return <EmbedErrorPlaceholder type={'image'} figureType={figureType} />;
   }
 
   const { data, embedData, seq } = embed;
 
-  const authors = getLicenseCredits(data.copyright);
-
   const altText = embedData.alt || '';
-  const caption = embedData.caption || '';
-  const license = getLicenseByAbbreviation(data.copyright.license.license, i18n.language);
 
   const figureType = getFigureType(embedData.size, embedData.align);
   const sizes = getSizes(embedData.size, embedData.align);
@@ -139,29 +117,22 @@ const ImageEmbed = ({ embed, articlePath, previewAlt }: Props) => {
   const focalPoint = getFocalPoint(embedData);
   const crop = getCrop(embedData);
 
-  const contributors = getGroupedContributorDescriptionList(data.copyright, i18n.language).map((item) => ({
-    name: item.description,
-    type: item.label,
-  }));
-
   const figureId = `figure-${seq}-${data.id}`;
 
-  const { creators, rightsholders, processors } = authors;
-  const captionAuthors = creators.length || rightsholders.length ? [...creators, ...rightsholders] : processors;
   return (
     <Figure
       id={figureId}
       type={imageSizes ? undefined : figureType}
       className={imageSizes ? 'c-figure--right expanded' : ''}
     >
-      <ImageWrapper src={data.imageUrl} crop={crop} size={embedData.size}>
+      <ImageWrapper src={data.image.imageUrl} crop={crop} size={embedData.size}>
         <Image
           focalPoint={focalPoint}
-          contentType={data.contentType}
+          contentType={data.image.contentType}
           crop={crop}
           sizes={imageSizes ?? sizes}
           alt={altText}
-          src={data.imageUrl}
+          src={data.image.imageUrl}
           expandButton={
             <ExpandButton
               size={embedData.size}
@@ -173,43 +144,17 @@ const ImageEmbed = ({ embed, articlePath, previewAlt }: Props) => {
           }
         />
       </ImageWrapper>
-      {previewAlt ? <StyledSpan>{`Alt: ${embedData.alt}`}</StyledSpan> : null}
-      <FigureCaption
-        hideFigcaption={isSmall(embedData.size) || isBylineHidden}
-        figureId={figureId}
-        id={figureId}
-        caption={caption}
-        reuseLabel={t('image.reuse')}
-        modalButton={
-          <ButtonV2 shape="pill" variant="outline" size="small" onClick={() => setIsOpen(true)}>
-            {t('image.reuse')}
-          </ButtonV2>
-        }
-        licenseRights={license.rights}
-        authors={captionAuthors}
-        locale={i18n.language}
-      >
-        <ModalV2 controlled isOpen={isOpen} onClose={() => setIsOpen(false)} labelledBy="license-dialog-rules-heading">
-          {(close) => (
-            <FigureLicenseDialogContent
-              title={data.title.title}
-              license={license}
-              onClose={close}
-              authors={contributors}
-              origin={data.copyright.origin}
-              locale={i18n.language}
-              type="image"
-            >
-              <ImageLicenseButtons
-                articlePath={articlePath}
-                title={data.title.title}
-                imageUrl={data.imageUrl}
-                copyright={data.copyright}
-              />
-            </FigureLicenseDialogContent>
-          )}
-        </ModalV2>
-      </FigureCaption>
+      {isBylineHidden || (isSmall(embedData.size) && !imageSizes) ? null : (
+        <EmbedByline
+          type="image"
+          copyright={data.copyright}
+          description={embedData.caption ?? data.caption.caption}
+          bottomRounded
+          visibleAlt={previewAlt ? embed.embedData.alt : ''}
+        >
+          {HeartButton && <HeartButton embed={embed} />}
+        </EmbedByline>
+      )}
     </Figure>
   );
 };
@@ -229,46 +174,6 @@ const hideByline = (size?: string): boolean => {
   return !!size && size.endsWith('-hide-byline');
 };
 
-interface ImageLicenseButtonsProps {
-  imageUrl: string;
-  title?: string;
-  articlePath?: string;
-  copyright?: Partial<Copyright>;
-}
-
-export const ImageLicenseButtons = ({ imageUrl, title, articlePath, copyright }: ImageLicenseButtonsProps) => {
-  const { t, i18n } = useTranslation();
-  if (!copyright?.license?.license || copyright?.license?.license === 'COPYRIGHTED') return null;
-
-  const copyString = figureApa7CopyString(
-    title,
-    undefined,
-    imageUrl,
-    articlePath,
-    copyright,
-    copyright?.license?.license,
-    '',
-    t,
-    i18n.language,
-  );
-
-  return (
-    <>
-      <CopyButton
-        variant="outline"
-        onClick={() => navigator.clipboard.writeText(copyString)}
-        copyNode={t('license.hasCopiedTitle')}
-        aria-live="assertive"
-      >
-        {t('license.copyTitle')}
-      </CopyButton>
-      <SafeLinkButton to={`${imageUrl}?download=true`} download variant="outline">
-        {t('image.download')}
-      </SafeLinkButton>
-    </>
-  );
-};
-
 const ImageWrapper = ({ src, crop, size, children }: ImageWrapperProps) => {
   const { t } = useTranslation();
   if (isSmall(size) || hideByline(size)) {

package/src/Embed/RelatedContentEmbed.tsx

@@ -30,7 +30,9 @@ const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }: P
     const typeId = data.resource?.resourceTypes.find((rt) => contentTypeMapping[rt.id])?.id;
     const type = typeId ? contentTypeMapping[typeId] : undefined;
     const path =
-      data.resource?.paths.find((p) => p.split('/')[1] === subject?.replace('urn:', '')) ?? data.resource?.path;
+      data.resource?.paths.find((p) => p.split('/')[1] === subject?.replace('urn:', '')) ??
+      data.resource?.path ??
+      `/article/${embedData.articleId}`;
     return (
       <RelatedArticleV2
         title={data.article.title?.title ?? ''}

package/src/Embed/conceptComponents.tsx

@@ -6,28 +6,24 @@
  *
  */
 
-import { forwardRef, ReactNode, RefAttributes, useEffect, useRef } from 'react';
+import { forwardRef, ReactNode, RefAttributes } from 'react';
 import { ConceptVisualElementMeta } from '@ndla/types-embed';
 import { useTranslation } from 'react-i18next';
-import { Root, Item, Header, Trigger, Content } from '@radix-ui/react-accordion';
-import { getGroupedContributorDescriptionList, getLicenseByAbbreviation, getLicenseCredits } from '@ndla/licenses';
 import { css } from '@emotion/react';
-import { ButtonV2 } from '@ndla/button';
 import { breakpoints, colors, fonts, misc, mq, spacing } from '@ndla/core';
-import { ChevronDown } from '@ndla/icons/common';
 import { parseMarkdown } from '@ndla/util';
 import styled from '@emotion/styled';
-import { NotionDialogContent, NotionDialogLicenses, NotionDialogText } from '@ndla/notion';
-import { Figure, FigureCaption } from '../Figure';
-import { NotionVisualElementType } from '../Notion';
-import { classLicenses, FigureLicenseByline, FigureLicenseCta } from '../Figure/FigureLicense';
+import { NotionDialogContent, NotionDialogText } from '@ndla/notion';
 import { Copyright } from '../types';
-import { ImageLicenseButtons } from './ImageEmbed';
+import ImageEmbed from './ImageEmbed';
+import BrightcoveEmbed from './BrightcoveEmbed';
+import H5pEmbed from './H5pEmbed';
+import { ExternalEmbed, HeartButtonType, IframeEmbed } from '.';
+import { EmbedByline } from '../LicenseByline';
 
 export interface ConceptNotionData {
   title: string;
   content?: string;
-  articlePath?: string;
   metaImage?: {
     url?: string;
     alt?: string;
@@ -44,42 +40,13 @@ interface ConceptNotionProps extends RefAttributes<HTMLDivElement>, ConceptNotio
   inPopover?: boolean;
   tags?: string[];
   subjects?: string[];
+  heartButton?: HeartButtonType;
+  conceptHeartButton?: ReactNode;
 }
 
-const getConceptVisualElement = (visualElement: ConceptVisualElementMeta): NotionVisualElementType | undefined => {
-  if (visualElement.status === 'error') {
-    return undefined;
-  }
-
-  if (visualElement.resource === 'image') {
-    return {
-      resource: visualElement.resource,
-      title: visualElement.data.title.title,
-      copyright: visualElement.data.copyright,
-      image: { src: visualElement.data.imageUrl, alt: visualElement.data.alttext.alttext },
-      url: visualElement.data.imageUrl,
-    };
-  } else if (visualElement.resource === 'brightcove') {
-    return {
-      resource: visualElement.resource,
-      title: visualElement.data.name,
-      url: `https://players.brightcove.net/${visualElement.embedData.account}/${visualElement.embedData.player}_default/index.html?videoId=${visualElement.embedData.videoid}`,
-      copyright: visualElement.data.copyright,
-    };
-  } else if (visualElement.resource === 'external' || visualElement.resource === 'iframe') {
-    return {
-      resource: visualElement.resource,
-      url: visualElement.embedData.url,
-      title: visualElement.embedData.url,
-    };
-  } else {
-    return {
-      resource: visualElement.resource,
-      url: visualElement.data.h5pUrl,
-      title: visualElement.embedData.title,
-    };
-  }
-};
+const ContentPadding = styled.div`
+  padding: ${spacing.normal};
+`;
 
 const notionContentCss = css`
   @keyframes animateIn {
@@ -95,7 +62,6 @@ const notionContentCss = css`
 
   animation-name: animateIn;
   animation-duration: 300ms;
-  padding: ${spacing.normal};
   background-color: white;
   z-index: 1;
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
@@ -115,11 +81,6 @@ const notionContentCss = css`
   }
 `;
 
-const StyledIframe = styled.iframe<{ type?: string }>`
-  height: auto;
-  min-height: ${(p) => p.type === 'video' && '400px'};
-`;
-
 const NotionHeader = styled.div`
   display: flex;
   align-items: center;
@@ -141,72 +102,6 @@ const NotionHeader = styled.div`
   }
 `;
 
-const StyledAccordionContent = styled(Content)`
-  background-color: ${colors.brand.lighter};
-  padding: ${spacing.small};
-  border-radius: ${misc.borderRadius};
-  overflow: hidden;
-  &[data-state='open'] {
-    animation: slideDown 300ms ease-out;
-  }
-  &[data-state='closed'] {
-    animation: slideUp 300ms ease-out;
-  }
-  @keyframes slideDown {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
-  @keyframes slideUp {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
-`;
-
-const StyledRoot = styled(Root)`
-  border-bottom: 1px solid ${colors.brand.greyLight};
-`;
-
-const StyledFigure = styled(Figure)`
-  && {
-    margin: ${spacing.normal} 0;
-  }
-  padding-bottom: 0;
-`;
-
-const StyledFigureCaption = styled(FigureCaption)`
-  border-bottom: 0;
-
-  h3 {
-    margin: 0;
-  }
-`;
-
-const StyledSpan = styled.span`
-  font-style: italic;
-  color: grey;
-`;
-
-const StyledAccordionTrigger = styled(ButtonV2)`
-  color: ${colors.brand.primary};
-  border-color: ${colors.brand.primary};
-  &[data-state='open'] {
-    svg {
-      transform: rotate(180deg);
-    }
-  }
-  svg {
-    transition: transform 300ms;
-  }
-`;
-
 const ListWrapper = styled.div`
   display: flex;
   gap: ${spacing.small};
@@ -215,6 +110,13 @@ const ListWrapper = styled.div`
 
 const StyledNotionDialogContent = styled(NotionDialogContent)`
   padding-top: ${spacing.small};
+  .c-figure {
+    left: unset !important;
+    width: 100% !important;
+    padding: 0;
+    margin: 0;
+    padding-bottom: ${spacing.normal};
+  }
 `;
 
 const StyledList = styled.ul`
@@ -237,7 +139,6 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
   (
     {
       visualElement,
-      articlePath,
       title,
       content,
       source,
@@ -247,154 +148,63 @@ export const ConceptNotionV2 = forwardRef<HTMLDivElement, ConceptNotionProps>(
       previewAlt,
       tags,
       subjects,
+      heartButton,
+      conceptHeartButton,
       ...rest
     },
     ref,
   ) => {
-    const { t, i18n } = useTranslation();
-    const iframeRef = useRef<HTMLIFrameElement>(null);
-
-    useEffect(() => {
-      const iframe = iframeRef.current;
-      if (iframe) {
-        const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];
-        iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;
-        iframe.width = '';
-        iframe.height = '';
-      }
-    }, []);
-
-    const licenseCredits = getLicenseCredits(copyright);
-    const { creators, rightsholders, processors } = licenseCredits;
-    const authors = creators.length || rightsholders.length ? creators.concat(rightsholders) : processors;
+    const { t } = useTranslation();
 
-    const visualElementType =
-      visualElement?.embedData.resource === 'brightcove' ? 'video' : visualElement?.embedData.resource;
-
-    const notionVisualElement = visualElement ? getConceptVisualElement(visualElement) : undefined;
-    const visualElementLicense = getLicenseByAbbreviation(
-      notionVisualElement?.copyright?.license?.license ?? '',
-      i18n.language,
-    );
-    const visualElementLicenseCredits = getLicenseCredits(notionVisualElement?.copyright);
-    const visualElementAuthors =
-      visualElementLicenseCredits.creators.length || visualElementLicenseCredits.rightsholders.length
-        ? visualElementLicenseCredits.creators.concat(visualElementLicenseCredits.rightsholders)
-        : visualElementLicenseCredits.processors;
-    const visualElementGroupedAuthors = getGroupedContributorDescriptionList(
-      visualElementLicenseCredits,
-      i18n.language,
-    ).map((item) => ({
-      name: item.description,
-      type: item.label,
-    }));
     return (
       <div css={inPopover ? notionContentCss : undefined} {...rest} ref={ref}>
-        <NotionHeader>
-          <h1>
-            {title} {<small>{t('searchPage.resultType.notionsHeading')}</small>}
-          </h1>
-          {closeButton}
-        </NotionHeader>
-        <StyledNotionDialogContent>
-          {notionVisualElement && (
-            <StyledFigure resizeIframe type={'full-column'}>
-              {notionVisualElement.image?.src ? (
-                <img src={notionVisualElement.image.src} alt={notionVisualElement.image.alt} />
-              ) : (
-                <StyledIframe
-                  ref={iframeRef}
-                  allowFullScreen
-                  type={visualElementType}
-                  src={notionVisualElement?.url}
-                  title={notionVisualElement?.title}
-                />
-              )}
-              {previewAlt && visualElement?.resource === 'image' ? (
-                <StyledSpan>{`Alt: ${visualElement.embedData.alt}`}</StyledSpan>
-              ) : null}
-              {visualElementLicense && (
-                <StyledRoot type="single" collapsible>
-                  <Item value="licenseInfo">
-                    <StyledFigureCaption
-                      figureId={''}
-                      id={''}
-                      modalButton={<></>}
-                      reuseLabel={t('reuse')}
-                      authors={visualElementAuthors}
-                      licenseRights={visualElementLicense.rights}
-                    >
-                      {visualElementLicense.abbreviation && (
-                        <Header>
-                          <Trigger asChild>
-                            <StyledAccordionTrigger variant="outline" shape="pill" size="small" colorTheme="lighter">
-                              {t('license.info')}
-                              <ChevronDown />
-                            </StyledAccordionTrigger>
-                          </Trigger>
-                        </Header>
-                      )}
-                    </StyledFigureCaption>
-                    <StyledAccordionContent>
-                      <div {...classLicenses()}>
-                        <h1 {...classLicenses('title')}>{t(`license.${visualElementType}.rules`)}</h1>
-                        <FigureLicenseByline
-                          license={visualElementLicense}
-                          messages={{
-                            learnAboutLicenses: t('license.learnMore'),
-                          }}
-                          locale={i18n.language}
-                        />
-                        <FigureLicenseCta
-                          authors={visualElementGroupedAuthors}
-                          title={notionVisualElement?.title}
-                          origin={notionVisualElement?.copyright?.origin}
-                          messages={{ source: t('source'), title: t('title') }}
-                        >
-                          {visualElementType === 'image' ? (
-                            <ImageLicenseButtons
-                              imageUrl={notionVisualElement.image?.src ?? ''}
-                              title={notionVisualElement.title}
-                              copyright={notionVisualElement.copyright}
-                              articlePath={articlePath}
-                            />
-                          ) : null}
-                        </FigureLicenseCta>
-                      </div>
-                    </StyledAccordionContent>
-                  </Item>
-                </StyledRoot>
-              )}
-            </StyledFigure>
+        <ContentPadding>
+          <NotionHeader>
+            <h1>
+              {title} {<small>{t('searchPage.resultType.notionsHeading')}</small>}
+            </h1>
+            {closeButton}
+          </NotionHeader>
+          <StyledNotionDialogContent>
+            {visualElement?.resource === 'image' ? (
+              <ImageEmbed embed={visualElement} heartButton={heartButton} />
+            ) : visualElement?.resource === 'brightcove' ? (
+              <BrightcoveEmbed embed={visualElement} heartButton={heartButton} />
+            ) : visualElement?.resource === 'h5p' ? (
+              <H5pEmbed embed={visualElement} />
+            ) : visualElement?.resource === 'iframe' ? (
+              <IframeEmbed embed={visualElement} />
+            ) : visualElement?.resource === 'external' ? (
+              <ExternalEmbed embed={visualElement} />
+            ) : null}
+            <NotionDialogText>{parseMarkdown(content ?? '', 'body')}</NotionDialogText>
+          </StyledNotionDialogContent>
+          {tags && (
+            <ListWrapper>
+              {`${t('notions.tags')}:`}
+              <StyledList>
+                {tags.map((tag, index) => (
+                  <li key={index}>{tag}</li>
+                ))}
+              </StyledList>
+            </ListWrapper>
           )}
-          <NotionDialogText>{parseMarkdown(content ?? '', 'body')}</NotionDialogText>
-        </StyledNotionDialogContent>
-        {tags && (
-          <ListWrapper>
-            {`${t('notions.tags')}:`}
-            <StyledList>
-              {tags.map((tag, index) => (
-                <li key={index}>{tag}</li>
-              ))}
-            </StyledList>
-          </ListWrapper>
-        )}
-        {subjects && (
-          <ListWrapper>
-            {`${t('notions.usedIn')}:`}
-            <StyledList>
-              {subjects.map((subject, index) => (
-                <li key={index}>{subject}</li>
-              ))}
-            </StyledList>
-          </ListWrapper>
+          {subjects && (
+            <ListWrapper>
+              {`${t('notions.usedIn')}:`}
+              <StyledList>
+                {subjects.map((subject, index) => (
+                  <li key={index}>{subject}</li>
+                ))}
+              </StyledList>
+            </ListWrapper>
+          )}
+        </ContentPadding>
+        {copyright && (
+          <EmbedByline copyright={copyright} type="concept">
+            {conceptHeartButton}
+          </EmbedByline>
         )}
-
-        <NotionDialogLicenses
-          authors={authors.map((a) => a.name)}
-          license={copyright?.license?.license ?? ''}
-          source={parseMarkdown(source ?? '', 'body')}
-        />
       </div>
     );
   },

package/src/Embed/index.ts

@@ -19,3 +19,4 @@ export { default as ConceptEmbed } from './ConceptEmbed';
 export { ConceptNotionV2 } from './conceptComponents';
 export { default as ConceptListEmbed } from './ConceptListEmbed';
 export { default as UnknownEmbed } from './UnknownEmbed';
+export type { HeartButtonType } from './types';

package/src/Embed/types.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2023-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 { ElementType } from 'react';
+import { EmbedMetaData } from '@ndla/types-embed';
+
+export type HeartButtonType = ElementType<{ embed: Extract<EmbedMetaData, { status: 'success' }> }>;