@ndla/ui 36.0.1 → 37.0.0

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' }> }>;

package/src/FactBox/component.factbox.scss

@@ -7,7 +7,7 @@ $padding-bottom: 17px;
   overflow: hidden;
   padding-bottom: $padding-bottom;
 
-  @include inuit-font-size(16px);
+  @include font-size(16px, 1.5);
 
   &__content {
     position: relative;
@@ -148,7 +148,7 @@ $padding-bottom: 17px;
     border-bottom: 2px solid $brand-color;
     margin-top: 0;
     margin-bottom: $spacing;
-    @include inuit-font-size(22px, 34px);
+    @include font-size(22px, 34px);
     font-weight: $font-weight-bold;
     position: relative;
     z-index: 2;
@@ -159,7 +159,7 @@ $padding-bottom: 17px;
   h4,
   h5 {
     display: block;
-    @include inuit-font-size(16px);
+    @include font-size(16px, 1.5);
     letter-spacing: 0.1em;
     margin-top: $spacing;
     margin-bottom: $spacing--small;

package/src/Figure/component.figure-license.scss

@@ -7,7 +7,7 @@
 **/
 
 .c-figure-license {
-  @include font-size(16px);
+  @include font-size(16px, 1.5);
   font-family: $font-serif;
 }
 
@@ -57,7 +57,7 @@
   background: transparent;
   border: none;
   color: $brand-color;
-  @include font-size(20px);
+  @include font-size(18px, 1.33);
   font-weight: $font-weight-normal;
   z-index: 9;
   cursor: pointer;
@@ -71,7 +71,7 @@
 
 .c-figure-license__title {
   margin: 0 0 $spacing--small;
-  @include inuit-font-size(18px);
+  @include font-size(18px, 1.33);
   color: $brand-color;
 }
 .c-figure-license--fullscreen {
@@ -84,7 +84,7 @@
 }
 
 .c-figure-license__image-title {
-  @include inuit-font-size(28px);
+  @include font-size(28px, 30px);
   margin: $spacing 0 0;
   text-align: left;
 }

package/src/Figure/component.figure.scss

@@ -154,7 +154,7 @@
   margin-bottom: $spacing--small;
   font-family: $font;
   color: $primary-color;
-  @include inuit-font-size(16px, 24px);
+  @include font-size(16px, 24px);
   @include mq($from: tablet) {
     flex: 2;
     margin-bottom: $spacing--small;

package/src/KeyFigure/KeyFigure.stories.tsx

@@ -0,0 +1,36 @@
+/**
+ * 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, StoryFn } from '@storybook/react';
+import { defaultParameters } from '../../../../stories/defaults';
+import KeyFigure from './KeyFigure';
+
+export default {
+  title: 'Enkle komponenter/Nøkkeltall',
+  component: KeyFigure,
+  tags: ['autodocs'],
+  parameters: {
+    ...defaultParameters,
+    layout: 'centered',
+  },
+  args: {
+    title: '500',
+    subtitle: 'TVERRFAGLIGE RESSURSER',
+    image: {
+      alt: 'Nøkkeltall tverrfaglig',
+      src: 'https://api.test.ndla.no/image-api/raw/wMowCjRg.svg',
+    },
+  },
+} as Meta<typeof KeyFigure>;
+
+export const KeyFigureStory: StoryFn<typeof KeyFigure> = ({ ...args }) => {
+  return <KeyFigure {...args} />;
+};
+
+KeyFigureStory.storyName = 'Nøkkeltall';

package/src/{KeyPerformanceIndicator/KeyPerformanceIndicator.tsx → KeyFigure/KeyFigure.tsx}

@@ -8,7 +8,6 @@
 
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import { IImageMetaInformationV3 } from '@ndla/types-backend/build/image-api';
 
 const ContentWrapper = styled.div`
   display: flex;
@@ -48,19 +47,22 @@ const SubTitleWrapper = styled.div`
 `;
 
 interface Props {
-  image?: IImageMetaInformationV3;
+  image?: {
+    src?: string;
+    alt?: string;
+  };
   title: string;
-  subTitle: string;
+  subtitle: string;
 }
 
-const KeyPerformanceIndicator = ({ image, title, subTitle }: Props) => {
+const KeyFigure = ({ image, title, subtitle }: Props) => {
   return (
     <ContentWrapper>
-      <StyledImage src={image?.image.imageUrl} alt={image?.alttext.alttext} />
+      <StyledImage src={image?.src} alt={image?.alt} />
       <TitleWrapper>{title}</TitleWrapper>
-      <SubTitleWrapper>{subTitle}</SubTitleWrapper>
+      <SubTitleWrapper>{subtitle}</SubTitleWrapper>
     </ContentWrapper>
   );
 };
 
-export default KeyPerformanceIndicator;
+export default KeyFigure;

package/src/{KeyPerformanceIndicator → KeyFigure}/index.ts

@@ -6,4 +6,4 @@
  *
  */
 
-export { default as KeyPerformanceIndicator } from './KeyPerformanceIndicator';
+export { default as KeyFigure } from './KeyFigure';

package/src/LicenseByline/EmbedByline.stories.tsx

@@ -0,0 +1,83 @@
+/**
+ * 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, StoryFn } from '@storybook/react';
+import styled from '@emotion/styled';
+import { breakpoints, mq, spacing } from '@ndla/core';
+import { IconButtonV2 } from '@ndla/button';
+import { Switch } from '@ndla/switch';
+import { HeartOutline } from '@ndla/icons/action';
+import EmbedByline from './EmbedByline';
+import { defaultParameters } from '../../../../stories/defaults';
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  gap: ${spacing.small};
+  ${mq.range({ until: breakpoints.tablet })} {
+    flex: 1;
+    width: 100%;
+    justify-content: space-between;
+    align-items: space-between;
+  }
+`;
+
+export default {
+  title: 'Enkle komponenter/EmbedByline',
+  component: EmbedByline,
+  tags: ['autodocs'],
+  parameters: {
+    ...defaultParameters,
+  },
+  args: {
+    topRounded: true,
+    bottomRounded: true,
+    visibleAlt: 'Synlig alt-tekst kan legges her, eller fjernes helt',
+    type: 'image',
+    children: (
+      <ButtonWrapper>
+        <Switch checked={false} label="Bytt til synstolket video" onChange={() => {}} id="switch" />
+        <IconButtonV2 variant="ghost" aria-label="Legg til i favoritter">
+          <HeartOutline />
+        </IconButtonV2>
+      </ButtonWrapper>
+    ),
+    description:
+      'Bildetekst som kan være ganske lang. Denne roboten er laget av DALLE2, en helt vaskeekte AI. Hvis denne teksten blir veldig lang kommer den på flere linjer.',
+    copyright: {
+      license: {
+        license: 'CC-BY-SA-4.0',
+        description: 'Creative Commons Attribution-ShareAlike 4.0 International',
+        url: 'https://creativecommons.org/licenses/by-sa/4.0/',
+      },
+      origin: 'http://floradania.dk/forside/',
+      creators: [],
+      processors: [],
+      rightsholders: [
+        {
+          type: 'Supplier',
+          name: 'Floradania',
+        },
+      ],
+    },
+  },
+  argTypes: {
+    children: {
+      control: {
+        type: null,
+      },
+    },
+  },
+} as Meta<typeof EmbedByline>;
+
+export const EmbedBylineStory: StoryFn<typeof EmbedByline> = (args) => {
+  const { children, ...rest } = args;
+  return <EmbedByline {...rest}>{children}</EmbedByline>;
+};
+
+EmbedBylineStory.storyName = 'EmbedByline';