@ndla/ui 36.0.1 → 37.0.0

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/BlogPost/BlogPost.tsx

@@ -33,18 +33,14 @@ const Container = styled(SafeLink)`
   flex-direction: column;
   color: ${colors.text.primary};
   max-width: 350px;
-  min-width: 350px;
   max-height: 415px;
-  min-height: 415px;
   gap: ${spacing.nsmall};
   box-shadow: none;
   border: 1px solid ${colors.brand.lightest};
   border-radius: ${misc.borderRadius};
   padding: ${spacing.normal} ${spacing.medium};
   &[data-size='large'] {
-    min-width: 532px;
     max-width: 532px;
-    min-height: 550px;
     max-height: 550px;
   }
   &:hover,

package/src/CampaignBlock/CampaignBlock.stories.tsx

@@ -0,0 +1,63 @@
+/**
+ * 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 CampaignBlock from './CampaignBlock';
+import { defaultParameters } from '../../../../stories/defaults';
+
+export default {
+  title: 'Enkle komponenter/Campaign Block',
+  component: CampaignBlock,
+  tags: ['autodocs'],
+  parameters: {
+    ...defaultParameters,
+  },
+  args: {},
+} as Meta<typeof CampaignBlock>;
+
+export const BothImages: StoryObj<typeof CampaignBlock> = {
+  args: {
+    title: { title: 'NDLA film', language: 'nb-no' },
+    description: {
+      text: 'NDLA film er en tjeneste i samarbeid med Norgesfilm. Denne tjenesten lar deg se en rekke spillefilmer, kortfilmer, dokumentarer og serier. Du kan også se undervisningsfilm og filmklipp. Velkommen inn i filmens verden!',
+      language: 'nb-no',
+    },
+    headingLevel: 'h2',
+    url: {
+      url: '#',
+      text: 'Gå til NDLA film',
+    },
+    imageBefore: {
+      alt: '',
+      src: 'https://api.test.ndla.no/image-api/raw/n2UYRxEG.png',
+    },
+    imageAfter: {
+      alt: '',
+      src: 'https://api.test.ndla.no/image-api/raw/8GOxOhjr.png',
+    },
+  },
+};
+
+export const SingleImage: StoryObj<typeof CampaignBlock> = {
+  args: {
+    title: { title: 'FN-dagen 24. oktober!', language: 'nb-no' },
+    description: {
+      text: ' Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation  quis nostrud exercitation ',
+      language: 'nb-no',
+    },
+    url: {
+      url: '#',
+      text: 'Les mer om FN-dagen',
+    },
+    imageAfter: {
+      alt: 'FN-symbol',
+      src: 'https://api.test.ndla.no/image-api/raw/LkmDGtip.png',
+    },
+  },
+};