@ndla/ui 36.0.1 → 37.0.0

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,15 +23,8 @@ 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`;

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;

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)) {