@ndla/ui 36.0.2 → 37.0.1

package/src/Article/ArticleByline.tsx

@@ -6,36 +6,36 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useCallback, useEffect, useState } from 'react';
 import styled from '@emotion/styled';
-import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
-import { CopyButton, ButtonV2 } from '@ndla/button';
-import { colors, fonts, spacing } from '@ndla/core';
-import { copyTextToClipboard, printPage } from '@ndla/util';
+import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import { getLicenseByAbbreviation } from '@ndla/licenses';
-import { LicenseByline } from '@ndla/notion';
+import { AccordionRoot, AccordionHeader, AccordionContent, AccordionItem } from '@ndla/accordion';
 import { TFunction } from 'i18next';
+import { FootNote } from '../types';
+import ArticleFootNotes from './ArticleFootNotes';
+import LicenseLink from '../LicenseByline/LicenseLink';
 
 const Wrapper = styled.div`
   margin-top: ${spacing.normal};
   padding-top: ${spacing.normal};
   padding-bottom: ${spacing.xsmall};
   border-top: 1px solid ${colors.brand.greyLight};
-  ${fonts.sizes('14px', '18px')};
+  ${fonts.sizes('16px', '24px')};
   font-family: ${fonts.sans};
   color: ${colors.brand.greyDark};
 `;
 
 const TextWrapper = styled.div`
-  margin-top: 10px;
-`;
-
-const ButtonWrapper = styled.div`
-  margin-top: 18px;
-  button {
-    margin-bottom: 10px;
-    margin-right: 16px;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding-bottom: ${spacing.mediumlarge};
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    flex-direction: column;
+    flex-direction: column-reverse;
+    gap: ${spacing.xsmall};
   }
 `;
 
@@ -57,11 +57,8 @@ type Props = {
   published: string;
   license: string;
   licenseBox?: ReactNode;
-  copyPageUrlLink?: string;
-  printUrl?: string;
   locale?: string;
-  copyEmbedLink?: string;
-  copySourceReference?: string;
+  footnotes?: FootNote[];
 };
 
 const renderContributors = (contributors: SupplierProps[] | AuthorProps[], t: TFunction) => {
@@ -85,133 +82,87 @@ const getSuppliersText = (suppliers: SupplierProps[], t: TFunction) => {
     : t('article.supplierLabel', { name: renderContributors(suppliers, t), interpolation: { escapeValue: false } });
 };
 
+const LicenseWrapper = styled.div`
+  display: flex;
+  gap: ${spacing.small};
+`;
+
+const refRegexp = /note\d/;
+const referencesAccordionId = 'references';
+
 const ArticleByline = ({
   authors = [],
   suppliers = [],
-  license,
+  footnotes,
+  license: licenseString,
   licenseBox,
   published,
-  copyPageUrlLink,
-  printUrl,
   locale,
-  copyEmbedLink,
-  copySourceReference,
 }: Props) => {
   const { t } = useTranslation();
+  const [openAccordions, setOpenAccordions] = useState<string[]>([]);
+
+  const onHashChange = useCallback(
+    (e: HashChangeEvent) => {
+      const hash = e.newURL.split('#')[1];
+      if (hash.match(refRegexp) && !openAccordions.includes(referencesAccordionId)) {
+        setOpenAccordions([...openAccordions, referencesAccordionId]);
+        const el = document.getElementById(`#${hash}`);
+        el?.click();
+        el?.focus();
+      }
+    },
+    [openAccordions],
+  );
 
-  const copyLinkHandler = () => {
-    if (copyPageUrlLink) {
-      copyTextToClipboard(copyPageUrlLink);
-    }
-  };
-  const licenseRights = getLicenseByAbbreviation(license, locale).rights;
-
-  const copyLicense = () => {
-    if (copySourceReference) {
-      copyTextToClipboard(copySourceReference);
-    }
-  };
-  const copyEmbededLink = () => {
-    if (copyEmbedLink) {
-      copyTextToClipboard(copyEmbedLink);
-    }
-  };
+  useEffect(() => {
+    window.addEventListener('hashchange', onHashChange);
+    return () => window.removeEventListener('hashchange', onHashChange);
+  }, [onHashChange]);
+
+  const license = getLicenseByAbbreviation(licenseString, locale);
 
   const showPrimaryContributors = suppliers.length > 0 || authors.length > 0;
   const showSecondaryContributors = suppliers.length > 0 && authors.length > 0;
 
-  const buttonId = 'popupUseContent';
-
   return (
     <Wrapper>
-      <div>
-        {t('article.lastUpdated')} {published}
-      </div>
-      {(showPrimaryContributors || licenseRights.length > 0) && (
-        <TextWrapper>
-          <LicenseByline licenseRights={licenseRights}>
-            {showPrimaryContributors && (
-              <PrimaryContributorsWrapper>
-                {authors.length > 0
-                  ? t('article.authorsLabel', {
-                      names: renderContributors(authors, t),
-                      interpolation: { escapeValue: false },
-                    })
-                  : getSuppliersText(suppliers, t)}
-              </PrimaryContributorsWrapper>
-            )}
-          </LicenseByline>
-        </TextWrapper>
-      )}
+      <TextWrapper>
+        <LicenseWrapper>
+          <LicenseLink license={license} />
+          {showPrimaryContributors && (
+            <PrimaryContributorsWrapper>
+              {authors.length > 0
+                ? t('article.authorsLabel', {
+                    names: renderContributors(authors, t),
+                    interpolation: { escapeValue: false },
+                  })
+                : getSuppliersText(suppliers, t)}
+            </PrimaryContributorsWrapper>
+          )}
+        </LicenseWrapper>
+        <div>
+          {t('article.lastUpdated')} {published}
+        </div>
+      </TextWrapper>
       {showSecondaryContributors && <TextWrapper>{getSuppliersText(suppliers, t)}</TextWrapper>}
-      <ButtonWrapper>
+      <AccordionRoot type="multiple" onValueChange={setOpenAccordions} value={openAccordions}>
         {licenseBox && (
-          <Modal
-            labelledBy={buttonId}
-            activateButton={
-              <ButtonV2 id={buttonId} size="small" shape="pill" variant="outline">
-                {t('article.useContent')}
-              </ButtonV2>
-            }
-            backgroundColor="white"
-            position="top"
-            size="medium"
-          >
-            {(onClose: () => void) => (
-              <>
-                <ModalHeader modifier="no-bottom-padding">
-                  <ModalCloseButton onClick={onClose} title="Lukk" />
-                </ModalHeader>
-                <ModalBody>{licenseBox}</ModalBody>
-              </>
-            )}
-          </Modal>
-        )}
-        {copySourceReference && (
-          <CopyButton
-            size="small"
-            shape="pill"
-            variant="outline"
-            aria-live="assertive"
-            copyNode={t('license.hasCopiedTitle')}
-            data-copy-string={copySourceReference}
-            onClick={copyLicense}
-          >
-            {`${t('license.copy')} ${t('license.copyTitle').toLowerCase()}`}
-          </CopyButton>
+          <AccordionItem value="rulesForUse">
+            <AccordionHeader>{t('article.useContent')}</AccordionHeader>
+            <AccordionContent>{licenseBox}</AccordionContent>
+          </AccordionItem>
         )}
-        {copyPageUrlLink && (
-          <CopyButton
-            onClick={copyLinkHandler}
-            size="small"
-            shape="pill"
-            variant="outline"
-            aria-live="assertive"
-            data-copy-string={copyPageUrlLink}
-            copyNode={t('article.copyPageLinkCopied')}
-          >
-            {t('article.copyPageLink')}
-          </CopyButton>
-        )}
-        {copyEmbedLink && (
-          <CopyButton
-            size="small"
-            shape="pill"
-            variant="outline"
-            aria-live="assertive"
-            copyNode={t('license.hasCopiedTitle')}
-            data-copy-string={copyEmbedLink}
-            onClick={copyEmbededLink}
-          >
-            {`${t('license.copy')}  ${t('license.tabs.embedlink').toLowerCase()}`}
-          </CopyButton>
-        )}
-        {printUrl && (
-          <ButtonV2 size="small" shape="pill" variant="outline" onClick={() => printPage(printUrl)}>
-            {t('article.printPage')}
-          </ButtonV2>
+
+        {!!footnotes?.length && (
+          <AccordionItem value={referencesAccordionId}>
+            <AccordionHeader>Referanser</AccordionHeader>
+            <AccordionContent forceMount>
+              <ArticleFootNotes footNotes={footnotes} />
+            </AccordionContent>
+          </AccordionItem>
         )}
-      </ButtonWrapper>
+      </AccordionRoot>
     </Wrapper>
   );
 };

package/src/Article/ArticleFootNotes.tsx

@@ -7,6 +7,8 @@
  */
 
 import React from 'react';
+import styled from '@emotion/styled';
+import { colors, spacing } from '@ndla/core';
 import { FootNote as FootNoteType } from '../types';
 
 const citeDetailString = (description: string | undefined) => (description ? `${description}. ` : '');
@@ -15,14 +17,26 @@ type FootNoteProps = {
   footNote: FootNoteType;
 };
 
+const Cite = styled.cite`
+  display: flex;
+  gap: ${spacing.small};
+  a {
+    box-shadow: none;
+    text-decoration: underline;
+    text-underline-offset: ${spacing.xxsmall};
+    &:hover,
+    &:focus-visible {
+      text-decoration: none;
+    }
+  }
+`;
+
 const FootNote = ({ footNote }: FootNoteProps) => (
-  <li className="c-footnotes__item">
-    <cite className="c-footnotes__cite" id={`note${footNote.ref}`}>
-      <sup>
-        <a href={`#ref${footNote.ref}`} target="_self">
-          {footNote.ref}
-        </a>
-      </sup>
+  <li>
+    <Cite id={`note${footNote.ref}`}>
+      <a href={`#ref${footNote.ref}`} target="_self">
+        {footNote.ref}
+      </a>
       {`«${footNote.title}». ${footNote.authors.join(' ')}. ${citeDetailString(footNote.edition)}${citeDetailString(
         footNote.publisher,
       )}${footNote.year}. `}
@@ -32,7 +46,7 @@ const FootNote = ({ footNote }: FootNoteProps) => (
           {'.'}
         </a>
       ) : null}
-    </cite>
+    </Cite>
   </li>
 );
 
@@ -40,12 +54,21 @@ type ArticleFootNotesProps = {
   footNotes: Array<FootNoteType>;
 };
 
+const FootnoteList = styled.ol`
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  padding: ${spacing.small};
+  color: ${colors.text.light};
+`;
+
 const ArticleFootNotes = ({ footNotes }: ArticleFootNotesProps) => (
-  <ol className="c-footnotes">
+  <FootnoteList>
     {footNotes.map((footNote) => (
       <FootNote key={footNote.ref} footNote={footNote} />
     ))}
-  </ol>
+  </FootnoteList>
 );
 
 export default ArticleFootNotes;

package/src/Article/component.article.scss

@@ -4,15 +4,6 @@
 ** Title has icon when article is a resource type
 **/
 
-@mixin contentList() {
-  ul:not([class]),
-  ul.o-list--two-columns,
-  ul.o-list--bullets,
-  ol {
-    @content;
-  }
-}
-
 .c-article {
   font-family: $font-serif;
   background: $white;
@@ -33,58 +24,16 @@
       margin-bottom: 29px;
     }
   }
-  p {
-    @include chinese() {
-      @include font-size(20px, 35px);
-    }
-  }
-
-  @include contentList() {
-    @include chinese() {
-      @include font-size(20px, 35px);
-    }
-  }
-
-  @include chinese() {
-    @include contentList() {
-      @include font-size(22px, 35px);
-    }
-
-    p {
-      @include font-size(22px, 35px);
-    }
-  }
 
   @include mq(tablet) {
     @include font-size(20px, 35px);
 
-    p {
-      @include chinese() {
-        @include font-size(22px, 35px);
-      }
-    }
-
     > section > p {
       &:not([class]) {
         margin-bottom: 35px;
       }
     }
 
-    @include contentList() {
-      @include chinese() {
-        @include font-size(22px, 35px);
-      }
-    }
-
-    @include chinese() {
-      @include contentList() {
-        @include font-size(22px, 35px);
-      }
-      p {
-        @include font-size(22px, 35px);
-      }
-    }
-
     padding: 0 $spacing $spacing;
     margin-bottom: $spacing--large;
     margin-top: -$spacing * 6;
@@ -178,7 +127,7 @@
   }
 
   p {
-    @include inuit-font-size(16px, 20px);
+    @include font-size(16px, 20px);
     color: $text-light-color;
     text-transform: uppercase;
     margin-bottom: 0;

package/src/Article/component.footnotes.scss

@@ -17,7 +17,7 @@ $highlight-color: $brand-grey--lighter;
   display: block;
   border-top: 2px solid $brand-grey--lighter;
   color: gray;
-  @include inuit-font-size(15px);
+  @include font-size(15px, 1.6);
 }
 .c-footnotes__item {
   margin-bottom: $spacing--small;
@@ -37,7 +37,7 @@ $highlight-color: $brand-grey--lighter;
       padding: 10px 15px;
       box-shadow: none;
       text-decoration: underline;
-      @include inuit-font-size(15px);
+      @include font-size(15px, 1.6);
 
       &:hover,
       &:active,

package/src/Aside/component.aside.scss

@@ -6,7 +6,7 @@
 .c-aside {
   position: relative;
   margin: $spacing--large 0;
-  @include inuit-font-size(16px);
+  @include font-size(16px, 1.5);
   z-index: 1;
 
   @include mq(tablet) {
@@ -59,7 +59,7 @@
 .c-aside h1 {
   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;
@@ -70,7 +70,7 @@
 .c-aside h4,
 .c-aside 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/AudioPlayer/AudioPlayer.tsx

@@ -6,14 +6,13 @@
  *
  */
 
-import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import React, { ReactNode, useMemo, useState } from 'react';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { ButtonV2 } from '@ndla/button';
 import { Cross as CrossIcon } from '@ndla/icons/action';
 import { useTranslation } from 'react-i18next';
 import SafeLink from '@ndla/safelink';
-import shave from 'shave';
 import Controls from './Controls';
 import SpeechControl from './SpeechControl';
 
@@ -163,11 +162,7 @@ const TextVersionText = styled.div`
   max-width: 670px;
 `;
 
-export const truncateDescription = (el: HTMLElement, readMoreLabel: string | null) => {
-  shave(el, 90, {
-    character: `... <a href="#" onclick="(function(e){e.preventDefault(); const parentNode = e.target.parentNode; parentNode.nextSibling.style.display = 'inline'; parentNode.remove();return false;})(arguments[0]);return false;">${readMoreLabel}</a>`,
-  });
-};
+const DESCRIPTION_MAX_LENGTH = 200;
 
 type Props = {
   src: string;
@@ -177,7 +172,7 @@ type Props = {
     url?: string;
   };
   speech?: boolean;
-  description?: ReactNode;
+  description?: string;
   textVersion?: ReactNode;
   img?: {
     url: string;
@@ -189,15 +184,8 @@ type Props = {
 const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersion, staticRenderId }: Props) => {
   const { t } = useTranslation();
   const [showTextVersion, setShowTextVersion] = useState(false);
-
-  const descriptionRef = useRef<HTMLDivElement>(null);
-  const readMoreDescriptionLabel = t('audio.readMoreDescriptionLabel');
-
-  useEffect(() => {
-    if (descriptionRef?.current) {
-      truncateDescription(descriptionRef.current, readMoreDescriptionLabel);
-    }
-  }, [readMoreDescriptionLabel]);
+  const [showFullDescription, setShowFullDescription] = useState(false);
+  const truncatedDescription = useMemo(() => description?.slice(0, DESCRIPTION_MAX_LENGTH), [description]);
 
   if (speech) {
     return (
@@ -244,13 +232,12 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
           </TitleWrapper>
           {description && (
             <StyledDescription>
-              <div
-                ref={descriptionRef}
-                data-audio-player-description={1}
-                data-read-more-text={t('audio.readMoreDescriptionLabel')}
-              >
-                {description}
-              </div>
+              {showFullDescription || description.length < DESCRIPTION_MAX_LENGTH
+                ? description
+                : `${truncatedDescription}...`}
+              <ButtonV2 variant="link" onClick={() => setShowFullDescription((p) => !p)}>
+                {t(`audio.${showFullDescription ? 'readLessDescriptionLabel' : 'readMoreDescriptionLabel'}`)}
+              </ButtonV2>
             </StyledDescription>
           )}
           {textVersion && img && <TextVersionComponent />}

package/src/AudioPlayer/initAudioPlayers.tsx

@@ -7,11 +7,16 @@
  */
 import React from 'react';
 import ReactDOM from 'react-dom';
-
+import shave from 'shave';
 import Controls from './Controls';
 import SpeechControl from './SpeechControl';
 import { Locale } from '../types';
-import { truncateDescription } from './AudioPlayer';
+
+export const truncateDescription = (el: HTMLElement, readMoreLabel: string | null) => {
+  shave(el, 90, {
+    character: `... <a href="#" onclick="(function(e){e.preventDefault(); const parentNode = e.target.parentNode; parentNode.nextSibling.style.display = 'inline'; parentNode.remove();return false;})(arguments[0]);return false;">${readMoreLabel}</a>`,
+  });
+};
 
 const forEachElement = (selector: string, callback: Function) => {
   const nodeList = document.querySelectorAll(selector);

package/src/ContentTypeBadge/ContentTypeBadge.tsx

@@ -13,6 +13,7 @@ import {
 } from '@ndla/icons/contentType';
 
 import { MenuBook } from '@ndla/icons/action';
+import { Concept, Media, SquareAudio, SquareVideo } from '@ndla/icons/editor';
 
 import * as contentTypes from '../model/ContentType';
 
@@ -32,12 +33,8 @@ interface Props {
 
 export const ContentTypeBadge = ({ type, background, title, size = 'small', border = true, className }: Props) => {
   const modifiers = [type, size];
-  if (background) {
-    modifiers.push('background');
-  }
-  if (border) {
-    modifiers.push('border');
-  }
+
+  let embedResource = false;
 
   let icon = null;
   switch (type) {
@@ -68,9 +65,35 @@ export const ContentTypeBadge = ({ type, background, title, size = 'small', bord
     case contentTypes.MULTIDISCIPLINARY_TOPIC:
       icon = <MultidisciplinaryTopic />;
       break;
+    case contentTypes.resourceTypeMapping.image:
+      icon = <Media />;
+      embedResource = true;
+      break;
+    case contentTypes.resourceTypeMapping.audio:
+      icon = <SquareAudio />;
+      embedResource = true;
+      break;
+    case contentTypes.resourceTypeMapping.video:
+      icon = <SquareVideo />;
+      embedResource = true;
+      break;
+    case contentTypes.resourceTypeMapping.concept:
+      icon = <Concept />;
+      embedResource = true;
+      break;
     default:
       break;
   }
+
+  if (embedResource) {
+    modifiers.push('embed-resource');
+  }
+  if (background || embedResource) {
+    modifiers.push('background');
+  }
+  if (border) {
+    modifiers.push('border');
+  }
   return <div {...classes('', modifiers, className)}>{icon}</div>;
 };
 

package/src/ContentTypeBadge/component.content-type-badge.scss

@@ -6,10 +6,16 @@
   justify-content: center;
   border-radius: 100%;
   &--border {
-
     border: 2px solid $black;
   }
 
+  &--embed-resource {
+    border-color: $brand-grey;
+    &.c-content-type-badge--background {
+      background: $brand-grey--light;
+    }
+  }
+
   &--subject-material {
     border-color: $subject-material-dark;
 
@@ -165,9 +171,9 @@
       background: $subjecttype-background;
     }
   }
-  &--multidisciplinary-topic{
+  &--multidisciplinary-topic {
     &.c-content-type-badge--background {
-      background: #B9B37B;
+      background: #b9b37b;
     }
   }
 

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;