@ndla/ui 36.0.1 → 37.0.0

package/src/CampaignBlock/CampaignBlock.tsx

@@ -0,0 +1,99 @@
+/**
+ * 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 styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import SafeLink from '@ndla/safelink';
+import { Forward } from '@ndla/icons/common';
+import { breakpoints, colors, fonts, spacing, mq, misc } from '@ndla/core';
+import { HeadingLevel } from '../types';
+
+interface Image {
+  src: string;
+  alt: string;
+}
+interface Props {
+  title: {
+    title: string;
+    language: string;
+  };
+  description: {
+    text: string;
+    language: string;
+  };
+  headingLevel?: HeadingLevel;
+  url: {
+    url: string;
+    text: string;
+  };
+  imageBefore?: Image;
+  imageAfter?: Image;
+}
+
+const Container = styled.div`
+  max-width: 390px;
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.xsmall};
+  border: 1px ${colors.brand.lighter} solid;
+  border-radius: ${misc.borderRadius};
+  padding: ${spacing.normal} ${spacing.small};
+  ${mq.range({ from: breakpoints.tabletWide })} {
+    max-width: 1100px;
+    flex-direction: row;
+  }
+`;
+
+const headingStyle = css`
+  margin: 0;
+`;
+
+const StyledDescription = styled.p`
+  font-family: ${fonts.serif};
+  margin: ${spacing.normal} 0 ${spacing.medium};
+`;
+
+const StyledImg = styled.img`
+  max-height: 200px;
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    align-self: center;
+  }
+  ${mq.range({ from: breakpoints.tabletWide })} {
+    align-self: center;
+  }
+`;
+
+const StyledLink = styled(SafeLink)`
+  box-shadow: none;
+  text-decoration: underline;
+  color: ${colors.brand.primary};
+  &:hover,
+  &:focus-visible {
+    text-decoration: none;
+  }
+`;
+
+const CampaignBlock = ({ title, imageBefore, description, headingLevel: Heading = 'h2', imageAfter, url }: Props) => {
+  return (
+    <Container>
+      {imageBefore && <StyledImg src={imageBefore.src} data-left={true} />}
+      <div>
+        <Heading css={headingStyle}>{title.title}</Heading>
+        <StyledDescription>{description.text}</StyledDescription>
+        <StyledLink to={url.url}>
+          {url.text}
+          <Forward />
+        </StyledLink>
+      </div>
+      {imageAfter && <StyledImg src={imageAfter.src} data-right={true} />}
+    </Container>
+  );
+};
+
+export default CampaignBlock;

package/src/CampaignBlock/index.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+export { default as CampaignBlock } from './CampaignBlock';

package/src/ContactBlock/ContactBlock.tsx

@@ -25,16 +25,16 @@ interface Props {
   name: string;
   email: string;
 }
-const CardWrapper = styled.div`
+const BlockWrapper = styled.div`
   display: flex;
   flex-direction: column;
   padding: 0 0 ${spacing.medium} ${spacing.medium};
   font-family: ${fonts.sans};
-  justify-content: center;
   border-radius: ${misc.borderRadius};
   border: 1px solid ${colors.brand.lighter};
-  margin-top: ${spacing.mediumlarge};
+  max-width: 348px;
   ${mq.range({ from: breakpoints.tabletWide })} {
+    max-width: 773px;
     flex-direction: row;
     padding: 0 0 ${spacing.medium} ${spacing.medium};
     gap: ${spacing.nsmall};
@@ -48,12 +48,13 @@ const StyledHeader = styled.div`
   padding-top: ${spacing.medium};
 `;
 
-const StyledDescriptionInformation = styled.div`
+const StyledText = styled.div`
   display: flex;
   overflow-wrap: anywhere;
   color: ${colors.text.light};
   gap: ${spacing.xxsmall};
 `;
+
 const EmailLink = styled.a`
   color: ${colors.text.light};
   text-decoration-color: ${colors.text.light};
@@ -70,7 +71,7 @@ const SummaryBlock = styled.p`
   }
 `;
 
-const ContentWrapper = styled.div`
+const TextWrapper = styled.div`
   display: flex;
   overflow: hidden;
   justify-content: space-between;
@@ -82,18 +83,16 @@ const BlobWrapper = styled.div`
 `;
 
 const ImageWrapper = styled.div`
-  aspect-ratio: 16/9;
   display: flex;
   flex-direction: column;
   gap: ${spacing.small};
   padding: ${spacing.medium} ${spacing.medium} 0 0;
-
   ${mq.range({ from: breakpoints.tabletWide })} {
     padding-right: 0;
   }
 `;
 
-const blobStyle = css`
+const blobStyling = css`
   width: 165px;
   height: 180px;
   transform: translate(10%, 0);
@@ -101,6 +100,15 @@ const blobStyle = css`
 const Email = styled.div`
   min-width: 60px;
 `;
+
+const ContentWrapper = styled.div`
+  width: 100%;
+`;
+
+const StyledImage = styled.img`
+  object-fit: cover;
+`;
+
 const ContactBlock = ({ image, jobTitle, description, name, email, blobColor = 'green', blob = 'pointy' }: Props) => {
   const { t } = useTranslation();
   const isGreenBlob = blobColor === 'green';
@@ -108,11 +116,11 @@ const ContactBlock = ({ image, jobTitle, description, name, email, blobColor = '
   const authors = concat(image?.copyright.processors, image?.copyright.creators, image?.copyright.rightsholders);
 
   return (
-    <CardWrapper>
+    <BlockWrapper>
       <ImageWrapper>
         {image ? (
           <>
-            <img alt={image.alttext.alttext} src={`${image.image.imageUrl}?width=286`} />
+            <StyledImage alt={image.alttext.alttext} src={`${image.image.imageUrl}?width=286`} />
             {`${t('photo')}: ${authors.reduce((acc, name) => (acc = `${acc} ${name?.name}`), '')}  ${
               image.copyright.license.license
             }`}
@@ -121,23 +129,23 @@ const ContactBlock = ({ image, jobTitle, description, name, email, blobColor = '
           <img alt={t('image.error.url')} src={errorSvgSrc} />
         )}
       </ImageWrapper>
-      <div>
-        <ContentWrapper>
+      <ContentWrapper>
+        <TextWrapper>
           <div>
             <StyledHeader>{name}</StyledHeader>
-            <StyledDescriptionInformation>{jobTitle}</StyledDescriptionInformation>
-            <StyledDescriptionInformation>
+            <StyledText>{jobTitle}</StyledText>
+            <StyledText>
               <Email>{`${t('email')}:`}</Email>
               <EmailLink href={`mailto:${email}?subject=Contact us`}>{email}</EmailLink>
-            </StyledDescriptionInformation>
+            </StyledText>
           </div>
           <BlobWrapper>
-            <Blob css={blobStyle} color={isGreenBlob ? colors.support.greenLight : colors.support.redLight} />
+            <Blob css={blobStyling} color={isGreenBlob ? colors.support.greenLight : colors.support.redLight} />
           </BlobWrapper>
-        </ContentWrapper>
+        </TextWrapper>
         <SummaryBlock>{description}</SummaryBlock>
-      </div>
-    </CardWrapper>
+      </ContentWrapper>
+    </BlockWrapper>
   );
 };
 

package/src/ContactBlock/Contactblock.stories.tsx

@@ -77,7 +77,6 @@ export default {
   },
   parameters: {
     ...defaultParameters,
-    layout: 'centered',
   },
 } as Meta<typeof ContactBlock>;
 

package/src/Dialog/component.dialog.scss

@@ -17,12 +17,12 @@
   }
   &:not(&--large, &--fullscreen) {
     h1 {
-      @include inuit-font-size(22px, 26px);
+      @include font-size(22px, 26px);
     }
   }
   &--small-heading {
     h1 {
-      @include inuit-font-size(22px, 26px);
+      @include font-size(22px, 26px);
     }
   }
 
@@ -45,7 +45,7 @@
     @include mq(tablet) {
       min-width: 20rem;
     }
-    @include font-size(18px);
+    @include font-size(18px, 1.33);
   }
 
   &--active &__content {
@@ -90,7 +90,7 @@
     background: transparent;
     border: none;
     color: $brand-color;
-    @include font-size(20px);
+    @include font-size(18px, 1.33);
     font-weight: $font-weight-normal;
     padding: 0;
     box-shadow: $link;
@@ -124,7 +124,6 @@
     }
   }
 
-
   &--fullscreen &__content {
     @include mq(tablet) {
       height: 100vh;

package/src/Embed/AudioEmbed.stories.tsx

@@ -11,6 +11,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { AudioEmbedData, AudioMeta } from '@ndla/types-embed';
 import AudioEmbed from './AudioEmbed';
 import { defaultParameters } from '../../../../stories/defaults';
+import StoryFavoriteButton from '../../../../stories/StoryFavoriteButton';
 
 const embedData: AudioEmbedData = {
   resource: 'audio',
@@ -156,9 +157,6 @@ const meta: Meta<typeof AudioEmbed> = {
   title: 'Enkle komponenter/Embeds/AudioEmbed',
   component: AudioEmbed,
   tags: ['autodocs'],
-  args: {
-    articlePath: undefined,
-  },
   decorators: [
     (Story) => (
       <div className="o-wrapper">
@@ -179,6 +177,7 @@ export default meta;
 
 export const AudioEmbedStory: StoryObj<typeof AudioEmbed> = {
   args: {
+    heartButton: StoryFavoriteButton,
     embed: {
       resource: 'audio',
       status: 'success',
@@ -191,6 +190,7 @@ export const AudioEmbedStory: StoryObj<typeof AudioEmbed> = {
 
 export const AudioEmbedFailed: StoryObj<typeof AudioEmbed> = {
   args: {
+    heartButton: StoryFavoriteButton,
     embed: {
       resource: 'audio',
       status: 'error',
@@ -202,6 +202,7 @@ export const AudioEmbedFailed: StoryObj<typeof AudioEmbed> = {
 
 export const Podcast: StoryObj<typeof AudioEmbed> = {
   args: {
+    heartButton: StoryFavoriteButton,
     embed: {
       resource: 'audio',
       status: 'success',
@@ -214,6 +215,7 @@ export const Podcast: StoryObj<typeof AudioEmbed> = {
 
 export const PodcastFailed: StoryObj<typeof AudioEmbed> = {
   args: {
+    heartButton: StoryFavoriteButton,
     embed: {
       resource: 'audio',
       status: 'error',

package/src/Embed/AudioEmbed.tsx

@@ -6,30 +6,21 @@
  *
  */
 
-import { AudioMetaData } from '@ndla/types-embed';
-import { ICopyright } from '@ndla/types-backend/image-api';
-import {
-  figureApa7CopyString,
-  getGroupedContributorDescriptionList,
-  getLicenseByAbbreviation,
-  getLicenseCredits,
-} from '@ndla/licenses';
-import { ModalV2 } from '@ndla/modal';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { AudioMetaData, ImageMetaData } from '@ndla/types-embed';
 //@ts-ignore
 import { Remarkable } from 'remarkable';
-import { ButtonV2, CopyButton } from '@ndla/button';
-import { SafeLinkButton } from '@ndla/safelink';
 import AudioPlayer from '../AudioPlayer';
-import { Figure, FigureCaption } from '../Figure';
-import { FigureLicenseDialogContent } from '../Figure/FigureLicenseDialogContent';
+import { Figure } from '../Figure';
 import { Author } from './ImageEmbed';
+import { EmbedByline } from '../LicenseByline';
+import EmbedErrorPlaceholder from './EmbedErrorPlaceholder';
+import { HeartButtonType } from './types';
 
 interface Props {
   embed: AudioMetaData;
-  articlePath?: string;
+  heartButton?: HeartButtonType;
 }
+
 export const getFirstNonEmptyLicenseCredits = (authors: {
   creators: Author[];
   rightsholders: Author[];
@@ -42,29 +33,25 @@ const renderMarkdown = (text: string) => {
   return <span dangerouslySetInnerHTML={{ __html: rendered }} />;
 };
 
-const AudioEmbed = ({ embed, articlePath }: Props) => {
-  const { t, i18n } = useTranslation();
-  const [isOpen, setIsOpen] = useState(false);
+const imageMetaToMockEmbed = (
+  imageMeta: Extract<AudioMetaData, { status: 'success' }>,
+): Extract<ImageMetaData, { status: 'success' }> => ({
+  resource: 'image',
+  status: 'success',
+  // Make sure the seq is unused. It's rarely used, but it's nice to ensure uniqueness.
+  seq: imageMeta.seq + 0.1,
+  // We check that this exists where the function is used.
+  data: imageMeta.data.imageMeta!,
+  embedData: {
+    resource: 'image',
+    resourceId: imageMeta.data.imageMeta?.id?.toString() || '',
+    alt: imageMeta.data.imageMeta?.alttext.alttext ?? '',
+  },
+});
+
+const AudioEmbed = ({ embed, heartButton: HeartButton }: Props) => {
   if (embed.status === 'error') {
-    return (
-      <Figure>
-        <svg
-          fill="#8A8888"
-          height="50"
-          viewBox="0 0 24 12"
-          width="100%"
-          xmlns="http://www.w3.org/2000/svg"
-          style={{ backgroundColor: '#EFF0F2' }}
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            transform="scale(0.3) translate(28, 8.5)"
-            d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-          />
-        </svg>
-        <figcaption>{t('audio.error.caption')}</figcaption>
-      </Figure>
-    );
+    return <EmbedErrorPlaceholder type={embed.embedData.type === 'standard' ? 'audio' : 'podcast'} />;
   }
 
   const { data, embedData, seq } = embed;
@@ -75,181 +62,47 @@ const AudioEmbed = ({ embed, articlePath }: Props) => {
 
   const subtitle = data.series ? { title: data.series.title.title, url: `/podkast/${data.series.id}` } : undefined;
 
-  const textVersion = data.manuscript && renderMarkdown(data.manuscript.manuscript);
-  const description = renderMarkdown(data.podcastMeta?.introduction ?? '');
+  const textVersion = data.manuscript?.manuscript.length ? renderMarkdown(data.manuscript.manuscript) : undefined;
 
   const coverPhoto = data.podcastMeta?.coverPhoto;
 
   const img = coverPhoto && { url: coverPhoto.url, alt: coverPhoto.altText };
 
-  const authors = getLicenseCredits(data.copyright);
-
-  const license = getLicenseByAbbreviation(data.copyright.license.license, i18n.language);
-
-  const contributors = getGroupedContributorDescriptionList(data.copyright, i18n.language).map((item) => ({
-    name: item.description,
-    type: item.label,
-  }));
-
   const figureId = `figure-${seq}-${data.id}`;
 
-  const copyString =
-    data.audioType === 'podcast'
-      ? figureApa7CopyString(
-          data.title.title,
-          undefined,
-          data.audioFile.url,
-          articlePath,
-          data.copyright,
-          data.copyright.license.license,
-          '',
-          (id: string) => t(id),
-          i18n.language,
-        )
-      : undefined;
-  const captionAuthors = getFirstNonEmptyLicenseCredits(authors);
   return (
     <Figure id={figureId} type="full">
       <AudioPlayer
-        description={description}
+        description={data.podcastMeta?.introduction ?? ''}
         img={img}
         src={data.audioFile.url}
         textVersion={textVersion}
         title={data.title.title}
         subtitle={subtitle}
       />
-      <FigureCaption
-        id=""
-        figureId=""
-        modalButton={
-          <ButtonV2 variant="outline" shape="pill" size="small" onClick={() => setIsOpen(true)}>
-            {t('audio.reuse')}
-          </ButtonV2>
-        }
-        licenseRights={license.rights}
-        authors={captionAuthors}
-        locale={i18n.language}
-      />
-      <ModalV2 controlled isOpen={isOpen} onClose={() => setIsOpen(false)} labelledBy="license-dialog-rules-heading">
-        {(close) => (
-          <FigureLicenseDialogContent
-            onClose={close}
-            title={data.title.title}
-            license={license}
-            authors={contributors}
-            origin={data.copyright.origin}
-            locale={i18n.language}
-            type="audio"
-          >
-            {data.copyright.license.license !== 'COPYRIGHT' && (
-              <>
-                {copyString && (
-                  <CopyButton
-                    variant="outline"
-                    copyNode={t('license.hasCopiedTitle')}
-                    onClick={() => navigator.clipboard.writeText(copyString)}
-                  >
-                    {t('license.copyTitle')}
-                  </CopyButton>
-                )}
-                <SafeLinkButton download to={data.audioFile.url} variant="outline">
-                  {t('audio.download')}
-                </SafeLinkButton>
-              </>
-            )}
-          </FigureLicenseDialogContent>
-        )}
-      </ModalV2>
+      <EmbedByline
+        error={false}
+        type={embedData.type === 'standard' ? 'audio' : 'podcast'}
+        topRounded={false}
+        bottomRounded={!data.imageMeta}
+        copyright={embed.data.copyright}
+      >
+        {HeartButton && <HeartButton embed={embed} />}
+      </EmbedByline>
       {data.imageMeta && (
-        <ImageLicense
-          title={data.imageMeta.title.title}
-          imageUrl={data.imageMeta.imageUrl}
+        <EmbedByline
+          error={false}
+          first={false}
+          type="image"
+          topRounded={false}
+          bottomRounded
           copyright={data.imageMeta.copyright}
-          articlePath={articlePath}
-        />
+        >
+          {HeartButton && <HeartButton embed={imageMetaToMockEmbed(embed)} />}
+        </EmbedByline>
       )}
     </Figure>
   );
 };
 
-interface ImageLicenseProps {
-  title: string;
-  imageUrl: string;
-  copyright: ICopyright;
-  articlePath?: string;
-}
-
-const ImageLicense = ({ articlePath, title, imageUrl, copyright }: ImageLicenseProps) => {
-  const { t, i18n } = useTranslation();
-  const [isOpen, setIsOpen] = useState(false);
-  const copyString = figureApa7CopyString(
-    title,
-    undefined,
-    imageUrl,
-    articlePath,
-    copyright,
-    copyright.license.license,
-    undefined,
-    (id: string) => t(id),
-    i18n.language,
-  );
-  const license = getLicenseByAbbreviation(copyright.license.license, i18n.language);
-  const authors = getLicenseCredits(copyright);
-
-  const contributors = getGroupedContributorDescriptionList(copyright, i18n.language).map((item) => ({
-    name: item.description,
-    type: item.label,
-  }));
-
-  const captionAuthors = getFirstNonEmptyLicenseCredits(authors);
-
-  return (
-    <>
-      <FigureCaption
-        figureId=""
-        id=""
-        licenseRights={license.rights}
-        modalButton={
-          <ButtonV2 variant="outline" shape="pill" size="small" onClick={() => setIsOpen(true)}>
-            {t('image.reuse')}
-          </ButtonV2>
-        }
-        authors={captionAuthors}
-        locale={i18n.language}
-      >
-        <ModalV2 controlled isOpen={isOpen} onClose={() => setIsOpen(false)}>
-          {(close) => (
-            <FigureLicenseDialogContent
-              onClose={close}
-              title={title}
-              license={license}
-              authors={contributors}
-              origin={copyright.origin}
-              locale={i18n.language}
-              type="image"
-            >
-              {copyright.license.license !== 'COPYRIGHTED' && (
-                <>
-                  {copyString && (
-                    <CopyButton
-                      variant="outline"
-                      copyNode={t('license.hasCopiedTitle')}
-                      onClick={() => navigator.clipboard.writeText(copyString)}
-                    >
-                      {t('license.copyTitle')}
-                    </CopyButton>
-                  )}
-                  <SafeLinkButton download to={imageUrl} variant="outline">
-                    {t('image.download')}
-                  </SafeLinkButton>
-                </>
-              )}
-            </FigureLicenseDialogContent>
-          )}
-        </ModalV2>
-      </FigureCaption>
-    </>
-  );
-};
-
 export default AudioEmbed;

package/src/Embed/BrightcoveEmbed.stories.tsx

@@ -8,9 +8,10 @@
 
 import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import { BrightcoveData, BrightcoveEmbedData, BrightcoveMetaData } from '@ndla/types-embed';
+import { BrightcoveData, BrightcoveEmbedData, BrightcoveMetaData, EmbedMetaData } from '@ndla/types-embed';
 import BrightcoveEmbed from './BrightcoveEmbed';
 import { defaultParameters } from '../../../../stories/defaults';
+import StoryFavoriteButton from '../../../../stories/StoryFavoriteButton';
 
 const embedData: BrightcoveEmbedData = {
   resource: 'brightcove',
@@ -179,6 +180,7 @@ export default meta;
 
 export const BrightcoveEmbedStory: StoryObj<typeof BrightcoveEmbed> = {
   args: {
+    heartButton: StoryFavoriteButton,
     embed: {
       resource: 'brightcove',
       status: 'success',
@@ -191,12 +193,14 @@ export const BrightcoveEmbedStory: StoryObj<typeof BrightcoveEmbed> = {
 
 export const VisuallyInterpreted: StoryObj<typeof BrightcoveEmbed> = {
   args: {
+    heartButton: StoryFavoriteButton,
     embed: visuallyInterpretedEmbedMetaData,
   },
 };
 
 export const BrightcoveFailed: StoryObj<typeof BrightcoveEmbed> = {
   args: {
+    heartButton: StoryFavoriteButton,
     embed: {
       resource: 'brightcove',
       status: 'error',