@ndla/ui 34.6.2 → 34.6.4

package/lib/locale/messages-se.js

@@ -587,7 +587,8 @@ var messages = _objectSpread(_objectSpread({
     originator: 'Ásaheaddji',
     published: 'Almmuhanbeaivi',
     rightsholder: 'Vuoigatvuođaguoddi',
-    source: 'Gáldu'
+    source: 'Gáldu',
+    info: 'Lisensinformasjon'
   },
   errorMessage: {
     title: 'Ops, juoga manai boastut',
@@ -722,6 +723,7 @@ var messages = _objectSpread(_objectSpread({
     hits: '{{count}} deaivama'
   },
   notions: {
+    tags: 'Liste og filter',
     usedIn: 'Adnojuvvo dás',
     closeNotion: 'Govčča'
   },
@@ -1062,7 +1064,30 @@ var messages = _objectSpread(_objectSpread({
       onDragEnd: 'Máhppa {{name}} luitojuvvui {{index}} posišuvdnii {{length}} posišuvnnas',
       onDragEndMissingOver: 'Máhppa {{name}} lea luitojuvvon',
       onDragCancel: 'Sirdin botkejuvvui. Máhppa {{name}} lea luitojuvvon.',
-      dragHandle: 'Ordne máhpa {{name}}'
+      dragHandle: 'Ordne máhpa {{name}}',
+      sharing: {
+        share: 'Del mappe',
+        shared: 'Delt',
+        unShare: 'Delingen er avsluttet. Mappen er ikke lenger delt.',
+        link: 'Lenken er kopiert',
+        header: {
+          "private": 'Vil du dele denne mappen?',
+          shared: 'Denne mappen er delt.',
+          unShare: 'Vil du avslutte deling av denne mappen?'
+        },
+        description: {
+          copy: 'Kopier og del denne lenken:',
+          "private": 'Når du deler en mappe lager du en lenke som er åpen for alle som har lenken. Du kan endre innholdet eller avslutte delingen når du ønsker.',
+          shared: 'Nå kan du dele denne lenken med elever eller andre lærere. Hvis du gjør endringer i mappen vil de bli synlige for alle du har delt lenken med.',
+          unShare: 'Når du avslutter deling vil lenken til den delte mappen slutte å virke. Dersom du har delt lenken med noen vil de ikke lengre kunne se innholdet i mappen.'
+        },
+        button: {
+          share: 'Del mappen',
+          preview: 'Forhåndsvis delt mappe',
+          unShare: 'Avslutt deling',
+          shareLink: 'Kopier lenke'
+        }
+      }
     },
     tagList: 'Fáddágilkor',
     tags: '{{count}} fáddágilkor',
@@ -1182,6 +1207,11 @@ var messages = _objectSpread(_objectSpread({
   },
   programme: {
     grades: 'Trinn'
+  },
+  embed: {
+    conceptListError: 'Klarte ikkje å vise forklaringsliste',
+    linkError: 'Klarte ikkje å vise lenke.',
+    unsupported: "Embed {{type}} er ikkje st\xF8tta."
   }
 });
 var _default = messages;

package/lib/locale/messages-sma.d.ts

@@ -88,6 +88,29 @@ declare const messages: {
             onDragEndMissingOver: string;
             onDragCancel: string;
             dragHandle: string;
+            sharing: {
+                share: string;
+                shared: string;
+                unShare: string;
+                link: string;
+                header: {
+                    private: string;
+                    shared: string;
+                    unShare: string;
+                };
+                description: {
+                    copy: string;
+                    private: string;
+                    shared: string;
+                    unShare: string;
+                };
+                button: {
+                    share: string;
+                    preview: string;
+                    unShare: string;
+                    shareLink: string;
+                };
+            };
         };
         tagList: string;
         tags: string;
@@ -208,6 +231,11 @@ declare const messages: {
     programme: {
         grades: string;
     };
+    embed: {
+        conceptListError: string;
+        linkError: string;
+        unsupported: string;
+    };
     common: {
         subject: string;
         subject_plural: string;
@@ -796,6 +824,7 @@ declare const messages: {
         published: string;
         rightsholder: string;
         source: string;
+        info: string;
     };
     errorMessage: {
         title: string;
@@ -930,6 +959,7 @@ declare const messages: {
         hits: string;
     };
     notions: {
+        tags: string;
         usedIn: string;
         closeNotion: string;
     };

package/lib/locale/messages-sma.js

@@ -587,7 +587,8 @@ var messages = _objectSpread(_objectSpread({
     originator: 'Opphaver',
     published: 'Publiseringsdato',
     rightsholder: 'Rettighetshaver',
-    source: 'Gaaltije'
+    source: 'Gaaltije',
+    info: 'Lisensinformasjon'
   },
   errorMessage: {
     title: 'Ovva, mij akt båajhtede sjïdtit',
@@ -722,6 +723,7 @@ var messages = _objectSpread(_objectSpread({
     hits: '{{count}} gaavnedimmieh'
   },
   notions: {
+    tags: 'Liste og filter',
     usedIn: 'Brukes i',
     closeNotion: 'Dahph'
   },
@@ -1062,7 +1064,30 @@ var messages = _objectSpread(_objectSpread({
       onDragEnd: 'Mappa {{name}} blei sloppe på posisjon {{index}} av {{length}}',
       onDragEndMissingOver: 'Mappa blei sloppe',
       onDragCancel: 'Flytting avbrutt. Mappa {{name}} blei sloppe',
-      dragHandle: 'Sorter mappen {{name}}'
+      dragHandle: 'Sorter mappen {{name}}',
+      sharing: {
+        share: 'Del mappe',
+        shared: 'Delt',
+        unShare: 'Delingen er avsluttet. Mappen er ikke lenger delt.',
+        link: 'Lenken er kopiert',
+        header: {
+          "private": 'Vil du dele denne mappen?',
+          shared: 'Denne mappen er delt.',
+          unShare: 'Vil du avslutte deling av denne mappen?'
+        },
+        description: {
+          copy: 'Kopier og del denne lenken:',
+          "private": 'Når du deler en mappe lager du en lenke som er åpen for alle som har lenken. Du kan endre innholdet eller avslutte delingen når du ønsker.',
+          shared: 'Nå kan du dele denne lenken med elever eller andre lærere. Hvis du gjør endringer i mappen vil de bli synlige for alle du har delt lenken med.',
+          unShare: 'Når du avslutter deling vil lenken til den delte mappen slutte å virke. Dersom du har delt lenken med noen vil de ikke lengre kunne se innholdet i mappen.'
+        },
+        button: {
+          share: 'Del mappen',
+          preview: 'Forhåndsvis delt mappe',
+          unShare: 'Avslutt deling',
+          shareLink: 'Kopier lenke'
+        }
+      }
     },
     tagList: 'Emneknagg',
     tags: '{{count}} emneknagg',
@@ -1182,6 +1207,11 @@ var messages = _objectSpread(_objectSpread({
   },
   programme: {
     grades: 'Trinn'
+  },
+  embed: {
+    conceptListError: 'Klarte ikkje å vise forklaringsliste',
+    linkError: 'Klarte ikkje å vise lenke.',
+    unsupported: "Embed {{type}} er ikkje st\xF8tta."
   }
 });
 var _default = messages;

package/lib/types.d.ts

@@ -39,7 +39,7 @@ export interface License {
     license: string;
 }
 export interface Copyright {
-    license: License;
+    license?: License;
     creators: Array<Contributor>;
     rightsholders: Array<Contributor>;
     processors: Array<Contributor>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "34.6.2",
+  "version": "34.6.4",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,28 +31,30 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/article-scripts": "^3.0.14",
-    "@ndla/button": "^9.1.3",
+    "@ndla/article-scripts": "^3.0.15",
+    "@ndla/button": "^9.1.4",
     "@ndla/carousel": "^3.0.3",
     "@ndla/core": "^3.1.2",
-    "@ndla/forms": "^4.2.6",
-    "@ndla/hooks": "^2.0.1",
+    "@ndla/forms": "^4.2.7",
+    "@ndla/hooks": "^2.0.2",
     "@ndla/icons": "^2.2.3",
     "@ndla/licenses": "^7.0.1",
     "@ndla/modal": "^2.2.7",
-    "@ndla/notion": "^4.2.3",
-    "@ndla/safelink": "^4.0.8",
+    "@ndla/notion": "^4.2.4",
+    "@ndla/safelink": "^4.0.9",
     "@ndla/switch": "^1.0.7",
-    "@ndla/tabs": "^2.1.6",
-    "@ndla/tooltip": "^4.0.9",
+    "@ndla/tabs": "^2.1.8",
+    "@ndla/tooltip": "^4.0.10",
     "@ndla/types-learningpath-api": "^0.0.17",
-    "@ndla/util": "^3.1.9",
+    "@ndla/util": "^3.1.10",
+    "@radix-ui/react-accordion": "1.1.0",
     "@radix-ui/react-dropdown-menu": "2.0.2",
+    "@radix-ui/react-popover": "^1.0.3",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
     "focus-trap-react": "^8.9.2",
     "framer-motion": "^6.5.1",
-    "html-react-parser": "^0.14.1",
+    "html-react-parser": "^3.0.8",
     "i18next-browser-languagedetector": "^6.1.1",
     "invariant": "^2.2.3",
     "react-bem-helper": "1.4.1",
@@ -73,6 +75,8 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.11.0",
+    "@ndla/types-embed": "^1.0.1",
+    "@ndla/types-image-api": "0.0.10",
     "@types/reach__dialog": "^0.1.0",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.2",
@@ -83,5 +87,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3ee77008faadb18e2316c564971b19d4ca0fc2c4"
+  "gitHead": "22850ec146bbc6fe00fe4e29801109edc0acc975"
 }

package/src/Article/Article.tsx

@@ -123,6 +123,7 @@ type Props = {
   modifier?: string;
   children?: ReactNode;
   messages: Messages;
+  contentTransformed?: boolean;
   locale: Locale;
   messageBoxLinks?: [];
   copyText?: string;
@@ -137,7 +138,10 @@ type Props = {
   accessMessage?: string;
 };
 
-const getArticleContent = (content: any, locale: Locale) => {
+const getArticleContent = (content: any, locale: Locale, contentTransformed?: boolean) => {
+  if (contentTransformed) {
+    return content;
+  }
   switch (typeof content) {
     case 'string':
       return <ArticleContent content={content} locale={locale} />;
@@ -166,6 +170,7 @@ export const Article = ({
   accessMessage,
   heartButton,
   copyText,
+  contentTransformed,
 }: Props) => {
   const articleRef = useRef<HTMLDivElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -232,7 +237,7 @@ export const Article = ({
               buttonOffsetRight={articlePositionRight}
             />
           )}
-          {getArticleContent(content, locale)}
+          {getArticleContent(content, locale, contentTransformed)}
         </LayoutItem>
 
         <LayoutItem layout="center">
@@ -242,7 +247,7 @@ export const Article = ({
             authors={authors}
             suppliers={rightsholders}
             published={published}
-            license={licenseObj.license}
+            license={licenseObj?.license ?? ''}
             licenseBox={licenseBox}
             printUrl={printUrl}
           />

package/src/Aside/Aside.tsx

@@ -21,12 +21,20 @@ interface Props {
   children?: ReactNode;
   narrowScreen?: boolean;
   wideScreen?: boolean;
+  alwaysShow?: boolean;
 }
 
-const Aside = ({ children, narrowScreen = false, dangerouslySetInnerHTML, wideScreen = false }: Props) => {
+const Aside = ({
+  children,
+  narrowScreen = false,
+  dangerouslySetInnerHTML,
+  wideScreen = false,
+  alwaysShow = false,
+}: Props) => {
   const modifiers = {
     narrowScreen,
     wideScreen,
+    alwaysShow,
   };
   return (
     <aside {...classes('', modifiers)}>

package/src/Aside/component.aside.scss

@@ -28,6 +28,9 @@
       display: none;
     }
   }
+  &--alwaysShow {
+    display: block !important;
+  }
 }
 
 .c-aside__content {

package/src/CopyParagraphButton/CopyParagraphButtonV2.tsx

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2021-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 { MouseEvent, ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { colors } from '@ndla/core';
+import Tooltip from '@ndla/tooltip';
+import { Link } from '@ndla/icons/common';
+import { copyTextToClipboard } from '@ndla/util';
+
+const ContainerDiv = styled.div`
+  position: relative;
+`;
+const IconButton = styled.button`
+  position: absolute;
+  left: -3em;
+  top: 0.1em;
+  background: none;
+  border: 0;
+  z-index: 1;
+  transition: 0.2s;
+  opacity: 0;
+  color: ${colors.brand.grey};
+
+  & svg {
+    width: 30px;
+    height: 30px;
+  }
+
+  ${ContainerDiv}:hover &,
+  &:focus, &:focus-visible, &:active {
+    cursor: pointer;
+    opacity: 1;
+  }
+`;
+
+interface Props {
+  // What to render within the h2
+  children: ReactNode;
+  copyText: string;
+}
+const CopyParagraphButtonV2 = ({ children, copyText }: Props) => {
+  const [hasCopied, setHasCopied] = useState(false);
+  const { t } = useTranslation();
+  const sanitizedTitle = useMemo(() => encodeURIComponent(copyText.replace(/ /g, '-')), [copyText]);
+
+  useEffect(() => {
+    if (hasCopied) {
+      setTimeout(() => setHasCopied(false), 3000);
+    }
+  }, [hasCopied]);
+
+  const onCopyClick = useCallback(() => {
+    setHasCopied(true);
+    const { location } = window;
+    const newHash = `#${sanitizedTitle}`;
+    const port = location.port ? `:${location.port}` : '';
+    const urlToCopy = `${location.protocol}//${location.hostname}${port}${location.pathname}${location.search}${newHash}`;
+
+    copyTextToClipboard(urlToCopy);
+  }, [sanitizedTitle]);
+
+  const tooltip = hasCopied ? t('article.copyPageLinkCopied') : t('article.copyHeaderLink');
+  return (
+    <ContainerDiv>
+      <Tooltip tooltip={tooltip}>
+        <IconButton onClick={onCopyClick} aria-label={`${tooltip}: ${copyText}`}>
+          <Link />
+        </IconButton>
+      </Tooltip>
+      <h2 id={sanitizedTitle} tabIndex={-1}>
+        {children}
+      </h2>
+    </ContainerDiv>
+  );
+};
+
+export default CopyParagraphButtonV2;

package/src/CopyParagraphButton/index.tsx

@@ -7,7 +7,8 @@
  */
 
 import CopyParagraphButton from './CopyParagraphButton';
+import CopyParagraphButtonV2 from './CopyParagraphButtonV2';
 import initCopyParagraphButtons from './initCopyParagraphButtons';
 
-export { CopyParagraphButton, initCopyParagraphButtons };
+export { CopyParagraphButton, initCopyParagraphButtons, CopyParagraphButtonV2 };
 export default CopyParagraphButton;

package/src/Embed/AudioEmbed.tsx

@@ -0,0 +1,249 @@
+/**
+ * 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 { AudioMetaData } from '@ndla/types-embed';
+import { ICopyright } from '@ndla/types-image-api';
+import {
+  figureApa7CopyString,
+  getGroupedContributorDescriptionList,
+  getLicenseByAbbreviation,
+  getLicenseCredits,
+} from '@ndla/licenses';
+import { ModalV2 } from '@ndla/modal';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+//@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 { Author } from './ImageEmbed';
+
+interface Props {
+  embed: AudioMetaData;
+  articlePath?: string;
+}
+export const getFirstNonEmptyLicenseCredits = (authors: {
+  creators: Author[];
+  rightsholders: Author[];
+  processors: Author[];
+}) => Object.values(authors).find((i) => i.length > 0) ?? [];
+
+const renderMarkdown = (text: string) => {
+  const md = new Remarkable();
+  const rendered = md.render(text);
+  return <span dangerouslySetInnerHTML={{ __html: rendered }} />;
+};
+
+const AudioEmbed = ({ embed, articlePath }: Props) => {
+  const { t, i18n } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+  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>
+    );
+  }
+
+  const { data, embedData, seq } = embed;
+
+  if (embedData.type === 'minimal') {
+    return <AudioPlayer speech src={data.audioFile.url} title={data.title.title} />;
+  }
+
+  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 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}
+        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>
+      {data.imageMeta && (
+        <ImageLicense
+          title={data.imageMeta.title.title}
+          imageUrl={data.imageMeta.imageUrl}
+          copyright={data.imageMeta.copyright}
+          articlePath={articlePath}
+        />
+      )}
+    </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;