@ndla/ui 36.0.2 → 37.0.1

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

package/src/Embed/H5pEmbed.stories.tsx

@@ -0,0 +1,92 @@
+/**
+ * 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 } from '@ndla/types-embed';
+import H5pEmbed from './H5pEmbed';
+import { defaultParameters } from '../../../../stories/defaults';
+
+const embedData: H5pEmbedData = {
+  resource: 'h5p',
+  path: '/resource/c56368d0-0432-4ec3-97bd-f4ba4badf55e',
+  title: 'Sorter avfall',
+  url: 'https://h5p-test.ndla.no/resource/c56368d0-0432-4ec3-97bd-f4ba4badf55e?locale=nb-no&cssUrl=https://test.ndla.no/static/h5p-custom-css.css',
+};
+
+const metaData: H5pData = {
+  h5pLicenseInformation: {
+    h5p: {
+      title: 'Sorter avfall',
+      source: null,
+      license: 'CC BY-SA',
+      licenseVersion: '4.0',
+      licenseExtras: null,
+      thumbnail: null,
+      authors: [
+        { name: 'Amendor AS', role: 'Author' },
+        { name: 'A B', role: 'Author' },
+      ],
+    },
+  },
+  h5pUrl:
+    'https://h5p-test.ndla.no/resource/c56368d0-0432-4ec3-97bd-f4ba4badf55e?locale=nb-no&cssUrl=https://test.ndla.no/static/h5p-custom-css.css',
+  oembed: {
+    type: 'proxy',
+    version: '1.0',
+    title: 'Sorter avfall',
+    width: 800,
+    height: 600,
+    html: '<div><iframe width="800" height="600" allowfullscreen="allowfullscreen" src="https://h5p-test.ndla.no/resource/c56368d0-0432-4ec3-97bd-f4ba4badf55e?locale=nb-no&amp;cssUrl=https%3A%2F%2Ftest.ndla.no%2Fstatic%2Fh5p-custom-css.css" title="Sorter avfall"></iframe><script src="https://ca.h5p.ndla.no/h5p-php-library/js/h5p-resizer.js"></script></div>',
+  },
+};
+
+const meta: Meta<typeof H5pEmbed> = {
+  title: 'Enkle komponenter/Embeds/H5pEmbed',
+  component: H5pEmbed,
+  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 H5pEmbed> = {
+  args: {
+    embed: {
+      resource: 'h5p',
+      status: 'success',
+      seq: 5,
+      embedData: embedData,
+      data: metaData,
+    },
+  },
+};
+
+export const Failed: StoryObj<typeof H5pEmbed> = {
+  args: {
+    embed: {
+      resource: 'h5p',
+      status: 'error',
+      seq: 3,
+      embedData: embedData,
+    },
+  },
+};

package/src/Embed/H5pEmbed.tsx

@@ -9,8 +9,7 @@
 import styled from '@emotion/styled';
 import { H5pMetaData } from '@ndla/types-embed';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { errorSvgSrc } from './ImageEmbed';
+import EmbedErrorPlaceholder from './EmbedErrorPlaceholder';
 
 interface Props {
   embed: H5pMetaData;
@@ -24,21 +23,14 @@ const StyledFigure = styled.figure`
 `;
 
 const H5pEmbed = ({ embed, isConcept }: Props) => {
-  const { t } = useTranslation();
-
   if (embed.status === 'error') {
-    return (
-      <figure className={isConcept ? '' : 'c-figure'}>
-        <img alt={t('h5p.error')} src={errorSvgSrc} />
-        <figcaption>{t('h5p.error')}</figcaption>
-      </figure>
-    );
+    return <EmbedErrorPlaceholder type="h5p" />;
   }
   const fullColumnClass = isConcept ? 'c-figure--full-column' : '';
   const classes = `c-figure ${fullColumnClass} c-figure--resize`;
 
   if (embed.data.oembed) {
-    return <StyledFigure className={classes} dangerouslySetInnerHTML={{ __html: embed.data.oembed.html ?? '' }} />;
+    return <figure className={classes} dangerouslySetInnerHTML={{ __html: embed.data.oembed.html ?? '' }} />;
   }
 
   return (

package/src/Embed/IframeEmbed.stories.tsx

@@ -0,0 +1,130 @@
+/**
+ * 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 { IframeData, IframeEmbedData } from '@ndla/types-embed';
+import IframeEmbed from './IframeEmbed';
+import { defaultParameters } from '../../../../stories/defaults';
+
+const embedData: IframeEmbedData = {
+  width: '708px',
+  title: 'Tittel på iframen!',
+  height: '278px',
+  type: 'iframe',
+  resource: 'iframe',
+  url: 'https://embed.kahoot.it/2a51c481-d362-475b-862b-e4b47b96b3c9',
+};
+
+const meta: Meta<typeof IframeEmbed> = {
+  title: 'Enkle komponenter/Embeds/IframeEmbed',
+  component: IframeEmbed,
+  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 IframeEmbed> = {
+  args: {
+    embed: {
+      resource: 'iframe',
+      status: 'success',
+      seq: 3,
+      embedData: embedData,
+      data: {},
+    },
+  },
+};
+
+export const Failed: StoryObj<typeof IframeEmbed> = {
+  args: {
+    embed: {
+      resource: 'iframe',
+      status: 'error',
+      seq: 3,
+      embedData: embedData,
+    },
+  },
+};
+
+const opensInNewEmbedData: IframeEmbedData = {
+  title: 'Kahoot!',
+  caption: 'Sjekk ut denne!',
+  imageid: '65086',
+  type: 'fullscreen',
+  resource: 'iframe',
+  url: 'https://embed.kahoot.it/2a51c481-d362-475b-862b-e4b47b96b3c9',
+};
+
+const opensInnewMetaData: IframeData = {
+  iframeImage: {
+    id: '65086',
+    metaUrl: 'https://api.test.ndla.no/image-api/v2/images/65086',
+    title: { title: '\nSamtale ', language: 'nb' },
+    alttext: { alttext: ' To ungdommer sitter og snakker. Foto. ', language: 'nb' },
+    imageUrl: 'https://api.test.ndla.no/image-api/raw/IgOjO6og.jpg',
+    size: 176667,
+    contentType: 'image/jpeg',
+    copyright: {
+      license: { license: 'COPYRIGHTED', description: 'Copyrighted' },
+      origin: '',
+      creators: [],
+      processors: [],
+      rightsholders: [
+        {
+          type: 'rightsholder',
+          name: 'Folkehelseprosjektet Helsefremmende miljø på sosial medier, Bergen kommune 2019-2022',
+        },
+      ],
+    },
+    tags: { tags: ['samtale', 'Dialog', 'gutter'], language: 'nb' },
+    caption: { caption: 'Dette bildet skal bare brukes i casen "Livet på sosiale medier". ', language: 'nb' },
+    supportedLanguages: ['nb'],
+    created: '2022-12-02T14:24:19Z',
+    createdBy: 'oltQx44eGQp0DwkiR1NRo5qE',
+    modelRelease: 'yes',
+    imageDimensions: { width: 1920, height: 804 },
+  },
+};
+
+export const OpensInNewWindow: StoryObj<typeof IframeEmbed> = {
+  args: {
+    embed: {
+      resource: 'iframe',
+      status: 'success',
+      seq: 4,
+      embedData: opensInNewEmbedData,
+      data: opensInnewMetaData,
+    },
+  },
+};
+
+export const OpensInNewWindowFailed: StoryObj<typeof IframeEmbed> = {
+  args: {
+    embed: {
+      resource: 'iframe',
+      status: 'error',
+      seq: 4,
+      embedData: opensInNewEmbedData,
+    },
+  },
+};

package/src/Embed/IframeEmbed.tsx

@@ -18,7 +18,7 @@ interface Props {
   isConcept?: boolean;
 }
 
-const ExternalEmbed = ({ embed, isConcept }: Props) => {
+const IframeEmbed = ({ embed, isConcept }: Props) => {
   const { t } = useTranslation();
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
@@ -36,7 +36,7 @@ const ExternalEmbed = ({ embed, isConcept }: Props) => {
 
   if (embedData.type === 'fullscreen') {
     const iframeImage = embed.status === 'success' ? embed.data.iframeImage : undefined;
-    const image = { src: iframeImage?.imageUrl ?? '', alt: iframeImage?.alttext?.alttext ?? '' };
+    const image = { src: iframeImage?.image.imageUrl ?? '', alt: iframeImage?.alttext?.alttext ?? '' };
     return (
       <Figure type="full">
         <ResourceBox
@@ -83,4 +83,4 @@ const ExternalEmbed = ({ embed, isConcept }: Props) => {
   );
 };
 
-export default ExternalEmbed;
+export default IframeEmbed;