@ndla/ui 36.0.1 → 37.0.0

package/src/Embed/BrightcoveEmbed.tsx

@@ -10,20 +10,19 @@ import sortBy from 'lodash/sortBy';
 import isNumber from 'lodash/isNumber';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';
-import { getGroupedContributorDescriptionList, getLicenseByAbbreviation } from '@ndla/licenses';
 import { useEffect, useRef, useState } from 'react';
-import { ModalV2 } from '@ndla/modal';
-import { SafeLinkButton } from '@ndla/safelink';
 import { BrightcoveEmbedData, BrightcoveMetaData, BrightcoveVideoSource } from '@ndla/types-embed';
 import { useTranslation } from 'react-i18next';
-import { ButtonV2, CopyButton } from '@ndla/button';
-import { Figure, FigureCaption } from '../Figure';
-import { FigureLicenseDialogContent } from '../Figure/FigureLicenseDialogContent';
-import { getFirstNonEmptyLicenseCredits } from './AudioEmbed';
+import { ButtonV2 } from '@ndla/button';
+import { Figure } from '../Figure';
+import { EmbedByline } from '../LicenseByline';
+import EmbedErrorPlaceholder from './EmbedErrorPlaceholder';
+import { HeartButtonType } from './types';
 
 interface Props {
   embed: BrightcoveMetaData;
   isConcept?: boolean;
+  heartButton?: HeartButtonType;
 }
 
 const LinkedVideoButton = styled(ButtonV2)`
@@ -57,10 +56,9 @@ const getIframeProps = (data: BrightcoveEmbedData, sources: BrightcoveVideoSourc
     width: source?.width ?? '640',
   };
 };
-const BrightcoveEmbed = ({ embed, isConcept }: Props) => {
-  const [isOpen, setIsOpen] = useState(false);
+const BrightcoveEmbed = ({ embed, isConcept, heartButton: HeartButton }: Props) => {
   const [showOriginalVideo, setShowOriginalVideo] = useState(true);
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const { embedData } = embed;
 
@@ -75,7 +73,7 @@ const BrightcoveEmbed = ({ embed, isConcept }: Props) => {
   }, []);
   if (embed.status === 'error') {
     return (
-      <Figure type={isConcept ? 'full-column' : 'full'} resizeIframe>
+      <EmbedErrorPlaceholder type="video">
         <BrightcoveIframe
           ref={iframeRef}
           title={`Video: ${embedData.videoid ?? ''}`}
@@ -84,35 +82,18 @@ const BrightcoveEmbed = ({ embed, isConcept }: Props) => {
           {...getIframeProps(embedData, [])}
           allowFullScreen
         />
-        <figcaption>{t('video.error')}</figcaption>
-      </Figure>
+      </EmbedErrorPlaceholder>
     );
   }
   const { data, seq } = embed;
 
   const linkedVideoId = isNumeric(data.link?.text) ? data.link?.text : undefined;
 
-  const license = getLicenseByAbbreviation(data.copyright?.license.license ?? '', i18n.language);
-  const contributors = data.copyright
-    ? getGroupedContributorDescriptionList(data.copyright, i18n.language).map((item) => ({
-        name: item.description,
-        type: item.label,
-      }))
-    : [];
-
-  const { rightsholders = [], creators = [], processors = [] } = data.copyright ?? {};
-
-  const download = sortBy(
-    data.sources.filter((src) => src.container === 'MP4' && src.src),
-    (src) => src.size,
-  )?.[0]?.src;
-
   const figureId = `figure-${seq}-${data.id}`;
   const originalVideoProps = getIframeProps(embedData, data.sources);
   const alternativeVideoProps = linkedVideoId
     ? getIframeProps({ ...embedData, videoid: linkedVideoId }, data.sources)
     : undefined;
-  const captionAuthors = getFirstNonEmptyLicenseCredits({ rightsholders, creators, processors });
 
   return (
     <Figure id={figureId} type={isConcept ? 'full-column' : 'full'} resizeIframe>
@@ -127,82 +108,26 @@ const BrightcoveEmbed = ({ embed, isConcept }: Props) => {
           allowFullScreen
         />
       </div>
-      <FigureCaption
-        figureId={figureId}
-        id={data.id}
-        locale={i18n.language}
-        caption={embedData.caption ?? ''}
-        modalButton={
-          <ButtonV2 variant="outline" shape="pill" size="small" onClick={() => setIsOpen(true)}>
-            {t('video.reuse')}
-          </ButtonV2>
-        }
-        linkedVideoButton={
+      <EmbedByline
+        type="video"
+        copyright={data.copyright!}
+        description={embedData.caption ?? data.description ?? ''}
+        bottomRounded
+      >
+        {!!linkedVideoId && (
           <LinkedVideoButton
             variant="outline"
             shape="pill"
             size="small"
             onClick={() => setShowOriginalVideo((p) => !p)}
           >
-            {t(`figure.button.${showOriginalVideo ? 'original' : 'alternative'}`)}
+            {t(`figure.button.${!showOriginalVideo ? 'original' : 'alternative'}`)}
           </LinkedVideoButton>
-        }
-        licenseRights={license.rights}
-        authors={captionAuthors}
-        hasLinkedVideo={!!linkedVideoId}
-      />
-      <ModalV2 controlled isOpen={isOpen} onClose={() => setIsOpen(false)} labelledBy="license-dialog-rules-heading">
-        {(close) => (
-          <FigureLicenseDialogContent
-            onClose={close}
-            title={data.name}
-            locale={i18n.language}
-            license={license}
-            authors={contributors}
-            type="video"
-          >
-            <VideoLicenseButtons
-              download={download}
-              licenseCode={data.copyright?.license.license}
-              src={originalVideoProps.src}
-              width={originalVideoProps.width}
-              height={originalVideoProps.height}
-              name={data.name}
-            />
-          </FigureLicenseDialogContent>
         )}
-      </ModalV2>
+        {HeartButton && <HeartButton embed={embed} />}
+      </EmbedByline>
     </Figure>
   );
 };
 
-interface VideoLicenseButtonsProps {
-  download: string;
-  licenseCode?: string;
-  src: string;
-  width: string | number;
-  height: string | number;
-  name?: string;
-}
-
-const VideoLicenseButtons = ({ download, src, width, height, name, licenseCode }: VideoLicenseButtonsProps) => {
-  const { t } = useTranslation();
-  return (
-    <>
-      {licenseCode !== 'COPYRIGHTED' && (
-        <SafeLinkButton key="download" to={download} variant="outline" download>
-          {t('video.download')}
-        </SafeLinkButton>
-      )}
-      <CopyButton
-        variant="outline"
-        copyNode={t('license.hasCopiedTitle')}
-        onClick={() => navigator.clipboard.writeText(makeIframeString(src, width, height, name))}
-      >
-        {t('license.embed')}
-      </CopyButton>
-    </>
-  );
-};
-
 export default BrightcoveEmbed;

package/src/Embed/ConceptEmbed.stories.tsx

@@ -11,6 +11,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { ConceptData, ConceptEmbedData } from '@ndla/types-embed';
 import ConceptEmbed from './ConceptEmbed';
 import { defaultParameters } from '../../../../stories/defaults';
+import StoryFavoriteButton from '../../../../stories/StoryFavoriteButton';
 
 const blockEmbedData: ConceptEmbedData = {
   contentId: '35',
@@ -145,6 +146,7 @@ export default meta;
 
 export const Block: StoryObj<typeof ConceptEmbed> = {
   args: {
+    heartButton: StoryFavoriteButton,
     embed: {
       resource: 'concept',
       status: 'success',
@@ -157,6 +159,7 @@ export const Block: StoryObj<typeof ConceptEmbed> = {
 
 export const BlockFailed: StoryObj<typeof ConceptEmbed> = {
   args: {
+    heartButton: StoryFavoriteButton,
     embed: {
       resource: 'concept',
       status: 'error',
@@ -168,6 +171,7 @@ export const BlockFailed: StoryObj<typeof ConceptEmbed> = {
 
 export const Inline: StoryObj<typeof ConceptEmbed> = {
   args: {
+    heartButton: StoryFavoriteButton,
     embed: {
       resource: 'concept',
       status: 'success',
@@ -180,6 +184,7 @@ export const Inline: StoryObj<typeof ConceptEmbed> = {
 
 export const InlineFailed: StoryObj<typeof ConceptEmbed> = {
   args: {
+    heartButton: StoryFavoriteButton,
     embed: {
       resource: 'concept',
       status: 'error',

package/src/Embed/ConceptEmbed.tsx

@@ -6,23 +6,23 @@
  *
  */
 
-import { useCallback, useRef, useState } from 'react';
+import { ReactElement, ReactNode, useCallback, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { isMobile } from 'react-device-detect';
 import { Root, Trigger, Content, Anchor, Close, Portal } from '@radix-ui/react-popover';
-import { ButtonV2, IconButtonV2 } from '@ndla/button';
+import { IconButtonV2 } from '@ndla/button';
 import { Cross } from '@ndla/icons/action';
 import { breakpoints, colors, mq, spacing } from '@ndla/core';
-import { getGroupedContributorDescriptionList, getLicenseByAbbreviation, getLicenseCredits } from '@ndla/licenses';
-import { ModalV2 } from '@ndla/modal';
 import { ConceptMetaData } from '@ndla/types-embed';
 import Tooltip from '@ndla/tooltip';
 import { Notion as UINotion } from '../Notion';
-import { Figure, FigureCaption } from '../Figure';
-import { FigureLicenseDialogContent } from '../Figure/FigureLicenseDialogContent';
+import { Figure } from '../Figure';
 import { NotionImage } from '../Notion/NotionImage';
 import { ConceptNotionV2, ConceptNotionData } from './conceptComponents';
+import { EmbedByline } from '../LicenseByline';
+import EmbedErrorPlaceholder from './EmbedErrorPlaceholder';
+import { HeartButtonType } from './types';
 
 const BottomBorder = styled.div`
   margin-top: ${spacing.normal};
@@ -72,6 +72,7 @@ const ImageWrapper = styled.div`
 interface Props {
   embed: ConceptMetaData;
   fullWidth?: boolean;
+  heartButton?: HeartButtonType;
 }
 
 const StyledButton = styled.button`
@@ -93,9 +94,11 @@ const StyledButton = styled.button`
   }
 `;
 
-export const ConceptEmbed = ({ embed, fullWidth }: Props) => {
-  if (embed.status === 'error') {
+export const ConceptEmbed = ({ embed, fullWidth, heartButton: HeartButton }: Props) => {
+  if (embed.status === 'error' && embed.embedData.type === 'inline') {
     return <span>{embed.embedData.linkText}</span>;
+  } else if (embed.status === 'error') {
+    return <EmbedErrorPlaceholder type="concept" />;
   }
 
   const {
@@ -112,6 +115,8 @@ export const ConceptEmbed = ({ embed, fullWidth }: Props) => {
         copyright={concept.copyright}
         source={concept.source}
         visualElement={visualElement}
+        heartButton={HeartButton}
+        conceptHeartButton={HeartButton && <HeartButton embed={embed} />}
       />
     );
   } else if (embed.embedData.type === 'inline') {
@@ -124,6 +129,8 @@ export const ConceptEmbed = ({ embed, fullWidth }: Props) => {
         source={concept.source}
         visualElement={visualElement}
         linkText={embed.embedData.linkText}
+        heartButton={HeartButton}
+        conceptHeartButton={HeartButton && <HeartButton embed={embed} />}
       />
     );
   } else {
@@ -135,6 +142,8 @@ export const ConceptEmbed = ({ embed, fullWidth }: Props) => {
         copyright={concept.copyright}
         source={concept.source}
         visualElement={visualElement}
+        heartButton={HeartButton}
+        conceptHeartButton={HeartButton && <HeartButton embed={embed} />}
       />
     );
   }
@@ -142,6 +151,8 @@ export const ConceptEmbed = ({ embed, fullWidth }: Props) => {
 
 interface InlineConceptProps extends ConceptNotionData {
   linkText: string;
+  heartButton?: HeartButtonType;
+  conceptHeartButton?: ReactNode;
 }
 
 const BaselineIcon = styled.span`
@@ -202,7 +213,16 @@ const getModalPosition = (anchor: HTMLElement) => {
   return anchorPos.top - (articlePos?.top || -window.scrollY);
 };
 
-const InlineConcept = ({ title, content, copyright, source, visualElement, linkText }: InlineConceptProps) => {
+const InlineConcept = ({
+  title,
+  content,
+  copyright,
+  source,
+  visualElement,
+  linkText,
+  heartButton,
+  conceptHeartButton,
+}: InlineConceptProps) => {
   const { t } = useTranslation();
   const anchorRef = useRef<HTMLDivElement>(null);
   const [modalPos, setModalPos] = useState(-9999);
@@ -240,6 +260,8 @@ const InlineConcept = ({ title, content, copyright, source, visualElement, linkT
               source={source}
               visualElement={visualElement}
               inPopover
+              heartButton={heartButton}
+              conceptHeartButton={conceptHeartButton}
               closeButton={
                 <Close asChild>
                   <IconButtonV2 aria-label={t('close')} variant="ghost">
@@ -257,6 +279,8 @@ const InlineConcept = ({ title, content, copyright, source, visualElement, linkT
 
 interface ConceptProps extends ConceptNotionData {
   fullWidth?: boolean;
+  heartButton?: HeartButtonType;
+  conceptHeartButton?: ReactElement;
 }
 
 export const BlockConcept = ({
@@ -267,24 +291,16 @@ export const BlockConcept = ({
   source,
   visualElement,
   fullWidth,
+  heartButton,
+  conceptHeartButton,
 }: ConceptProps) => {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
   const anchorRef = useRef<HTMLDivElement>(null);
   const [modalPos, setModalPos] = useState(-9999);
 
-  const [isOpen, setIsOpen] = useState(false);
-  const licenseCredits = getLicenseCredits(copyright);
-  const { creators, rightsholders, processors } = licenseCredits;
-  const authors = creators.length || rightsholders.length ? creators.concat(rightsholders) : processors;
   const visualElementType =
     visualElement?.embedData.resource === 'brightcove' ? 'video' : visualElement?.embedData.resource;
 
-  const groupedAuthors = getGroupedContributorDescriptionList(licenseCredits, i18n.language).map((item) => ({
-    name: item.description,
-    type: item.label,
-  }));
-  const license = copyright?.license && getLicenseByAbbreviation(copyright?.license?.license, i18n.language);
-
   const onOpenChange = useCallback((open: boolean) => {
     if (open) {
       const anchor = anchorRef.current;
@@ -316,7 +332,7 @@ export const BlockConcept = ({
                           <NotionImage
                             type={visualElementType}
                             id={''}
-                            src={visualElement.data.imageUrl}
+                            src={visualElement.data.image.imageUrl}
                             alt={visualElement.data.alttext.alttext}
                           />
                         ) : metaImage ? (
@@ -346,6 +362,8 @@ export const BlockConcept = ({
                         copyright={copyright}
                         source={source}
                         visualElement={visualElement}
+                        heartButton={heartButton}
+                        conceptHeartButton={conceptHeartButton}
                         inPopover
                         closeButton={
                           <Close asChild>
@@ -362,39 +380,10 @@ export const BlockConcept = ({
             )
           }
         />
-        {copyright?.license && license ? (
-          <FigureCaption
-            figureId=""
-            id=""
-            authors={authors}
-            licenseRights={license.rights}
-            locale={i18n.language}
-            hideIconsAndAuthors
-            modalButton={
-              <ButtonV2 variant="outline" size="small" shape="pill" onClick={() => setIsOpen(true)}>
-                {t('concept.reuse')}
-              </ButtonV2>
-            }
-          >
-            <ModalV2
-              controlled
-              isOpen={isOpen}
-              onClose={() => setIsOpen(false)}
-              labelledBy="license-dialog-rules-heading"
-            >
-              {(close) => (
-                <FigureLicenseDialogContent
-                  authors={groupedAuthors}
-                  locale={i18n.language}
-                  title={title}
-                  origin={copyright.origin}
-                  license={license}
-                  onClose={close}
-                  type="concept"
-                />
-              )}
-            </ModalV2>
-          </FigureCaption>
+        {copyright ? (
+          <EmbedByline copyright={copyright} bottomRounded topRounded type="concept">
+            {conceptHeartButton}
+          </EmbedByline>
         ) : (
           <BottomBorder />
         )}

package/src/Embed/EmbedErrorPlaceholder.tsx

@@ -0,0 +1,59 @@
+/**
+ * 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 { ReactNode } from 'react';
+import styled from '@emotion/styled';
+import { WarningOutline } from '@ndla/icons/common';
+import { colors, spacing } from '@ndla/core';
+import { Figure, FigureType } from '../Figure';
+import { EmbedByline } from '../LicenseByline';
+import { EmbedBylineErrorProps } from '../LicenseByline/EmbedByline';
+
+interface Props {
+  type: EmbedBylineErrorProps['type'];
+  figureType?: FigureType;
+  children?: ReactNode;
+}
+
+const ErrorPlaceholder = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${colors.brand.greyLighter};
+  height: 330px;
+
+  svg {
+    fill: ${colors.text.light};
+    height: 90%;
+    width: 90%;
+  }
+  &[data-embed-type='audio'] {
+    height: 150px;
+  }
+`;
+
+const StyledFigure = styled(Figure)`
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.xsmall};
+`;
+
+const EmbedErrorPlaceholder = ({ type, children, figureType }: Props) => {
+  return (
+    <StyledFigure type={figureType}>
+      {children ?? (
+        <ErrorPlaceholder data-embed-type={type}>
+          <WarningOutline />
+        </ErrorPlaceholder>
+      )}
+      <EmbedByline error type={type} topRounded bottomRounded />
+    </StyledFigure>
+  );
+};
+
+export default EmbedErrorPlaceholder;

package/src/Embed/ExternalEmbed.stories.tsx

@@ -0,0 +1,86 @@
+/**
+ * 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 React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { H5pEmbedData, H5pData, OembedEmbedData, OembedData } from '@ndla/types-embed';
+import ExternalEmbed from './ExternalEmbed';
+import { defaultParameters } from '../../../../stories/defaults';
+
+const embedData: OembedEmbedData = {
+  resource: 'external',
+  url: 'https://embed.ted.com/talks/zahra_biabani_the_eco_creators_helping_the_climate_through_social_media',
+  type: 'iframe',
+};
+
+const metaData: OembedData = {
+  oembed: {
+    type: 'video',
+    version: '1.0',
+    title: 'Zahra Biabani: The eco-creators helping the climate through social media',
+    description:
+      '"Climate doom-ism," or a pessimistic outlook on the future of the planet, rivals climate denialism in holding up the fight against climate change, says activist Zahra Biabani. Illuminating how hope combats inaction, she takes us inside the world of eco-friendly content on TikTok -- and shows that we all have what it takes to make real change.',
+    authorName: 'Zahra Biabani',
+    authorUrl: 'https://www.ted.com/speakers/zahra_biabani',
+    providerName: 'TED',
+    providerUrl: 'https://www.ted.com',
+    cacheAge: 300,
+    thumbnailUrl:
+      'https://pi.tedcdn.com/r/talkstar-photos.s3.amazonaws.com/uploads/803ab5d5-2cff-4764-b5b6-545217159538/ZahraBiabani_2022T-embed.jpg?h=315&w=560',
+    thumbnailWidth: 560,
+    thumbnailHeight: 315,
+    width: 560,
+    height: 315,
+    html: '<iframe src="https://embed.ted.com/talks/zahra_biabani_the_eco_creators_helping_the_climate_through_social_media" width="560" height="315" frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>',
+  },
+};
+
+const meta: Meta<typeof ExternalEmbed> = {
+  title: 'Enkle komponenter/Embeds/ExternalEmbed',
+  component: ExternalEmbed,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div className="o-wrapper">
+        <article className="c-article c-article--clean">
+          <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
+            <section>
+              <Story />
+            </section>
+          </section>
+        </article>
+      </div>
+    ),
+  ],
+  parameters: defaultParameters,
+};
+
+export default meta;
+
+export const Regular: StoryObj<typeof ExternalEmbed> = {
+  args: {
+    embed: {
+      resource: 'external',
+      status: 'success',
+      seq: 8,
+      embedData: embedData,
+      data: metaData,
+    },
+  },
+};
+
+export const Failed: StoryObj<typeof ExternalEmbed> = {
+  args: {
+    embed: {
+      resource: 'external',
+      status: 'error',
+      seq: 3,
+      embedData: embedData,
+    },
+  },
+};

package/src/Embed/ExternalEmbed.tsx

@@ -12,7 +12,7 @@ import { useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Figure } from '../Figure';
 import { ResourceBox } from '../ResourceBox';
-import { errorSvgSrc } from './ImageEmbed';
+import EmbedErrorPlaceholder from './EmbedErrorPlaceholder';
 
 interface Props {
   embed: OembedMetaData;
@@ -39,18 +39,13 @@ const ExternalEmbed = ({ embed, isConcept }: Props) => {
     }
   }, []);
   if (embed.status === 'error') {
-    return (
-      <figure className={isConcept ? '' : 'c-figure'}>
-        <img alt={t('external.error')} src={errorSvgSrc} />
-        <figcaption>{t('external.error')}</figcaption>
-      </figure>
-    );
+    return <EmbedErrorPlaceholder type="external" />;
   }
 
   const { embedData, data } = embed;
 
   if (embedData.type === 'fullscreen') {
-    const image = { src: data.iframeImage?.imageUrl ?? '', alt: data.iframeImage?.alttext?.alttext ?? '' };
+    const image = { src: data.iframeImage?.image.imageUrl ?? '', alt: data.iframeImage?.alttext?.alttext ?? '' };
     return (
       <Figure type="full">
         <ResourceBox