@ndla/ui 34.6.1 → 34.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "34.6.1",
+  "version": "34.6.3",
   "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.7",
+    "@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.0",
+    "@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": "f4df50f25d48eeea4c064864366cf0ccb2d4f778"
+  "gitHead": "3be4405a57a209633f9e8534b5f208ab50bae6f0"
 }

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;

package/src/Embed/BrightcoveEmbed.tsx

@@ -0,0 +1,203 @@
+/**
+ * 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 sortBy from 'lodash/sortBy';
+import isNumber from 'lodash/isNumber';
+import styled from '@emotion/styled';
+import { spacing } from '@ndla/core';
+import { getGroupedContributorDescriptionList, getLicenseByAbbreviation } from '@ndla/licenses';
+import { useEffect, useRef, useState } from 'react';
+import { ModalV2 } from '@ndla/modal';
+import { SafeLinkButton } from '@ndla/safelink';
+import { BrightcoveEmbedData, BrightcoveMetaData, BrightcoveVideoSource } from '@ndla/types-embed';
+import { useTranslation } from 'react-i18next';
+import { ButtonV2, CopyButton } from '@ndla/button';
+import { Figure, FigureCaption } from '../Figure';
+import { FigureLicenseDialogContent } from '../Figure/FigureLicenseDialogContent';
+import { getFirstNonEmptyLicenseCredits } from './AudioEmbed';
+
+interface Props {
+  embed: BrightcoveMetaData;
+  isConcept?: boolean;
+}
+
+const LinkedVideoButton = styled(ButtonV2)`
+  margin-left: ${spacing.small};
+`;
+
+const BrightcoveIframe = styled.iframe`
+  height: auto;
+`;
+
+export const makeIframeString = (url: string, width: string | number, height: string | number, title: string = '') => {
+  const strippedWidth = isNumber(width) ? width : width.replace(/\s*px/, '');
+  const strippedHeight = isNumber(height) ? height : height.replace(/\s*px/, '');
+  const urlOrTitle = title || url;
+  return `<iframe title="${urlOrTitle}" aria-label="${urlOrTitle}" src="${url}" width="${strippedWidth}" height="${strippedHeight}" allowfullscreen scrolling="no" frameborder="0" loading="lazy"></iframe>`;
+};
+
+export const isNumeric = (value: any) => !Number.isNaN(value - parseFloat(value));
+
+const getIframeProps = (data: BrightcoveEmbedData, sources: BrightcoveVideoSource[]) => {
+  const { account, videoid, player = 'default' } = data;
+
+  const source = sortBy(
+    sources.filter((s) => s.width && s.height),
+    (s) => s.height,
+  )[0];
+
+  return {
+    src: `https://players.brightcove.net/${account}/${player}_default/index.html?videoId=${videoid}`,
+    height: source?.height ?? '480',
+    width: source?.width ?? '640',
+  };
+};
+const BrightcoveEmbed = ({ embed, isConcept }: Props) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [showOriginalVideo, setShowOriginalVideo] = useState(true);
+  const { t, i18n } = useTranslation();
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const { embedData } = embed;
+
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (iframe) {
+      const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];
+      iframe.style.aspectRatio = `${width}/${height}`;
+    }
+  }, []);
+  if (embed.status === 'error') {
+    return (
+      <Figure type={isConcept ? 'full-column' : 'full'} resizeIframe>
+        <BrightcoveIframe
+          ref={iframeRef}
+          title={`Video: ${embedData.videoid ?? ''}`}
+          aria-label={`Video: ${embedData.videoid ?? ''}`}
+          frameBorder="0"
+          {...getIframeProps(embedData, [])}
+          allowFullScreen
+        />
+        <figcaption>{t('video.error')}</figcaption>
+      </Figure>
+    );
+  }
+  const { data, seq } = embed;
+
+  const linkedVideoId = isNumeric(data.link?.text) ? data.link?.text : undefined;
+
+  const license = getLicenseByAbbreviation(data.copyright?.license.license ?? '', i18n.language);
+  const contributors = data.copyright
+    ? getGroupedContributorDescriptionList(data.copyright, i18n.language).map((item) => ({
+        name: item.description,
+        type: item.label,
+      }))
+    : [];
+
+  const { rightsholders = [], creators = [], processors = [] } = data.copyright ?? {};
+
+  const download = sortBy(
+    data.sources.filter((src) => src.container === 'MP4' && src.src),
+    (src) => src.size,
+  )?.[0]?.src;
+
+  const figureId = `figure-${seq}-${data.id}`;
+  const originalVideoProps = getIframeProps(embedData, data.sources);
+  const alternativeVideoProps = linkedVideoId
+    ? getIframeProps({ ...embedData, videoid: linkedVideoId }, data.sources)
+    : undefined;
+  const captionAuthors = getFirstNonEmptyLicenseCredits({ rightsholders, creators, processors });
+
+  return (
+    <Figure id={figureId} type={isConcept ? 'full-column' : 'full'} resizeIframe>
+      <div className="brightcove-video">
+        <BrightcoveIframe
+          ref={iframeRef}
+          className="original"
+          title={`Video: ${data.name}`}
+          aria-label={`Video: ${data.name}`}
+          frameBorder="0"
+          {...(alternativeVideoProps && !showOriginalVideo ? alternativeVideoProps : originalVideoProps)}
+          allowFullScreen
+        />
+      </div>
+      <FigureCaption
+        figureId={figureId}
+        id={data.id}
+        locale={i18n.language}
+        caption={embedData.caption ?? ''}
+        modalButton={
+          <ButtonV2 variant="outline" shape="pill" size="small" onClick={() => setIsOpen(true)}>
+            {t('video.reuse')}
+          </ButtonV2>
+        }
+        linkedVideoButton={
+          <LinkedVideoButton
+            variant="outline"
+            shape="pill"
+            size="small"
+            onClick={() => setShowOriginalVideo((p) => !p)}>
+            {t(`figure.button.${showOriginalVideo ? 'original' : 'alternative'}`)}
+          </LinkedVideoButton>
+        }
+        licenseRights={license.rights}
+        authors={captionAuthors}
+        hasLinkedVideo={!!linkedVideoId}
+      />
+      <ModalV2 controlled isOpen={isOpen} onClose={() => setIsOpen(false)} labelledBy="license-dialog-rules-heading">
+        {(close) => (
+          <FigureLicenseDialogContent
+            onClose={close}
+            title={data.name}
+            locale={i18n.language}
+            license={license}
+            authors={contributors}
+            type="video">
+            <VideoLicenseButtons
+              download={download}
+              licenseCode={data.copyright?.license.license}
+              src={originalVideoProps.src}
+              width={originalVideoProps.width}
+              height={originalVideoProps.height}
+              name={data.name}
+            />
+          </FigureLicenseDialogContent>
+        )}
+      </ModalV2>
+    </Figure>
+  );
+};
+
+interface VideoLicenseButtonsProps {
+  download: string;
+  licenseCode?: string;
+  src: string;
+  width: string | number;
+  height: string | number;
+  name?: string;
+}
+
+const VideoLicenseButtons = ({ download, src, width, height, name, licenseCode }: VideoLicenseButtonsProps) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      {licenseCode !== 'COPYRIGHTED' && (
+        <SafeLinkButton key="download" to={download} variant="outline" download>
+          {t('video.download')}
+        </SafeLinkButton>
+      )}
+      <CopyButton
+        variant="outline"
+        copyNode={t('license.hasCopiedTitle')}
+        onClick={() => navigator.clipboard.writeText(makeIframeString(src, width, height, name))}>
+        {t('license.embed')}
+      </CopyButton>
+    </>
+  );
+};
+
+export default BrightcoveEmbed;