@ndla/ui 34.6.2 → 34.6.3

package/src/Embed/ConceptEmbed.tsx

@@ -0,0 +1,408 @@
+/**
+ * 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 { useCallback, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { isMobile } from 'react-device-detect';
+import { Root, Trigger, Content, Anchor, Close, Portal } from '@radix-ui/react-popover';
+import { ButtonV2, IconButtonV2 } from '@ndla/button';
+import { Cross } from '@ndla/icons/action';
+import { breakpoints, colors, mq, spacing } from '@ndla/core';
+import { getGroupedContributorDescriptionList, getLicenseByAbbreviation, getLicenseCredits } from '@ndla/licenses';
+import { ModalV2 } from '@ndla/modal';
+import { ConceptMetaData } from '@ndla/types-embed';
+import Tooltip from '@ndla/tooltip';
+import { Notion as UINotion } from '../Notion';
+import { Figure, FigureCaption } from '../Figure';
+import { FigureLicenseDialogContent } from '../Figure/FigureLicenseDialogContent';
+import { NotionImage } from '../Notion/NotionImage';
+import { ConceptNotionV2, ConceptNotionData } from './conceptComponents';
+
+const BottomBorder = styled.div`
+  margin-top: ${spacing.normal};
+  border-bottom: 1px solid ${colors.brand.greyLight};
+`;
+
+interface PopoverPosition {
+  top?: number;
+}
+
+const PopoverWrapper = styled.div<PopoverPosition>`
+  div[data-radix-popper-content-wrapper] {
+    position: absolute !important;
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+    top: ${({ top }) => top}px !important;
+  }
+
+  ${mq.range({ until: breakpoints.tablet })} {
+    div[data-radix-popper-content-wrapper] {
+      // Fix for popover positioning on mobile.
+      // If we modify all popovers we break license icons.
+      // https://github.com/radix-ui/primitives/issues/1839
+      position: fixed !important;
+      transform: none !important;
+      top: 0 !important;
+      left: 0 !important;
+      width: 100vw;
+      z-index: 9999 !important;
+      height: 100vh;
+      min-width: 100vw !important;
+    }
+  }
+`;
+
+const ImageWrapper = styled.div`
+  float: right;
+  padding-left: ${spacing.normal};
+  position: relative;
+
+  ${mq.range({ until: breakpoints.tabletWide })} {
+    width: 100%;
+    padding-left: 0;
+  }
+`;
+
+interface Props {
+  embed: ConceptMetaData;
+  fullWidth?: boolean;
+}
+
+const StyledButton = styled.button`
+  background: none;
+  border: none;
+  font-family: inherit;
+  font-style: inherit;
+  line-height: 1em;
+  padding: 0 0 4px 0;
+  margin-bottom: -4px;
+  text-decoration: none;
+  color: #000;
+  position: relative;
+  cursor: pointer;
+  &:focus,
+  &:hover {
+    color: ${colors.brand.primary};
+    outline: none;
+  }
+`;
+
+export const ConceptEmbed = ({ embed, fullWidth }: Props) => {
+  if (embed.status === 'error') {
+    return <span>{embed.embedData.linkText}</span>;
+  }
+
+  const {
+    data: { concept, visualElement },
+  } = embed;
+
+  if (embed.embedData.type === 'block') {
+    return (
+      <BlockConcept
+        fullWidth={fullWidth}
+        title={concept.title.title}
+        content={concept.content?.content}
+        metaImage={concept.metaImage}
+        copyright={concept.copyright}
+        source={concept.source}
+        visualElement={visualElement}
+      />
+    );
+  } else if (embed.embedData.type === 'inline') {
+    return (
+      <InlineConcept
+        title={concept.title.title}
+        content={concept.content?.content}
+        metaImage={concept.metaImage}
+        copyright={concept.copyright}
+        source={concept.source}
+        visualElement={visualElement}
+        linkText={embed.embedData.linkText}
+      />
+    );
+  } else {
+    return (
+      <ConceptNotionV2
+        title={concept.title.title}
+        content={concept.content?.content}
+        metaImage={concept.metaImage}
+        copyright={concept.copyright}
+        source={concept.source}
+        visualElement={visualElement}
+      />
+    );
+  }
+};
+
+interface InlineConceptProps extends ConceptNotionData {
+  linkText: string;
+}
+
+const BaselineIcon = styled.span`
+  display: block;
+  border-bottom: 5px double currentColor;
+`;
+
+const NotionButton = styled.button`
+  background: none;
+  border: none;
+  font-family: inherit;
+  font-style: inherit;
+  line-height: 1em;
+  padding: 0 0 4px 0;
+  margin-bottom: -4px;
+  text-decoration: none;
+  position: relative;
+  text-align: left;
+  display: inline;
+  color: ${colors.notion.dark};
+  cursor: pointer;
+  &:focus,
+  &:hover {
+    background-color: ${colors.notion.dark};
+    color: ${colors.white};
+    outline: none;
+    ${BaselineIcon} {
+      border-color: transparent;
+    }
+  }
+
+  &:active {
+    color: ${colors.notion.dark};
+    background-color: ${colors.notion.light};
+    ${BaselineIcon} {
+      border-color: currentColor;
+    }
+  }
+`;
+
+const StyledAnchor = styled(Anchor)`
+  ${mq.range({ until: breakpoints.tablet })} {
+    position: fixed;
+    top: 0;
+  }
+`;
+
+const StyledAnchorSpan = styled.span`
+  position: absolute;
+  left: 50%;
+  align-self: center;
+`;
+
+const getModalPosition = (anchor: HTMLElement) => {
+  const article = document.querySelector('.c-article');
+  const articlePos = article?.getBoundingClientRect();
+  const anchorPos = anchor.getBoundingClientRect();
+  return anchorPos.top - (articlePos?.top || -window.scrollY);
+};
+
+const InlineConcept = ({ title, content, copyright, source, visualElement, linkText }: InlineConceptProps) => {
+  const { t } = useTranslation();
+  const anchorRef = useRef<HTMLDivElement>(null);
+  const [modalPos, setModalPos] = useState(-9999);
+
+  const onOpenChange = useCallback((open: boolean) => {
+    if (open) {
+      const anchor = anchorRef.current;
+      if (anchor) {
+        const top = getModalPosition(anchor);
+        setModalPos(top);
+      }
+    } else {
+      setModalPos(-9999);
+    }
+  }, []);
+
+  return (
+    <Root modal={isMobile} onOpenChange={onOpenChange}>
+      <StyledAnchor ref={anchorRef} asChild>
+        <StyledAnchorSpan />
+      </StyledAnchor>
+      <Trigger asChild>
+        <NotionButton>
+          {linkText}
+          {<BaselineIcon />}
+        </NotionButton>
+      </Trigger>
+      <Portal
+        container={
+          typeof document !== 'undefined'
+            ? (document.querySelector('.c-article') as HTMLElement | null) || undefined
+            : undefined
+        }>
+        <PopoverWrapper top={modalPos}>
+          <Content avoidCollisions={false} side="bottom" asChild>
+            <ConceptNotionV2
+              title={title}
+              content={content}
+              copyright={copyright}
+              source={source}
+              visualElement={visualElement}
+              inPopover
+              closeButton={
+                <Close asChild>
+                  <IconButtonV2 aria-label={t('close')} variant="ghost">
+                    <Cross />
+                  </IconButtonV2>
+                </Close>
+              }
+            />
+          </Content>
+        </PopoverWrapper>
+      </Portal>
+    </Root>
+  );
+};
+
+interface ConceptProps extends ConceptNotionData {
+  fullWidth?: boolean;
+}
+
+export const BlockConcept = ({
+  title,
+  content,
+  metaImage,
+  copyright,
+  source,
+  visualElement,
+  fullWidth,
+}: ConceptProps) => {
+  const { t, i18n } = useTranslation();
+  const anchorRef = useRef<HTMLDivElement>(null);
+  const [modalPos, setModalPos] = useState(-9999);
+
+  const [isOpen, setIsOpen] = useState(false);
+  const licenseCredits = getLicenseCredits(copyright);
+  const { creators, rightsholders, processors } = licenseCredits;
+  const authors = creators.length || rightsholders.length ? creators.concat(rightsholders) : processors;
+  const visualElementType =
+    visualElement?.embedData.resource === 'brightcove' ? 'video' : visualElement?.embedData.resource;
+
+  const groupedAuthors = getGroupedContributorDescriptionList(licenseCredits, i18n.language).map((item) => ({
+    name: item.description,
+    type: item.label,
+  }));
+  const license = copyright?.license && getLicenseByAbbreviation(copyright?.license?.license, i18n.language);
+
+  const onOpenChange = useCallback((open: boolean) => {
+    if (open) {
+      const anchor = anchorRef.current;
+      if (anchor) {
+        const top = getModalPosition(anchor);
+        setModalPos(top);
+      }
+    } else {
+      setModalPos(-9999);
+    }
+  }, []);
+
+  return (
+    <Root modal={isMobile} onOpenChange={onOpenChange}>
+      <StyledAnchor ref={anchorRef} />
+      <Figure resizeIframe type={fullWidth ? 'full' : 'full-column'}>
+        <UINotion
+          id=""
+          title={title}
+          text={content}
+          visualElement={
+            visualElement?.status === 'success' && (
+              <>
+                <ImageWrapper>
+                  <Tooltip tooltip={t('searchPage.resultType.showNotion')}>
+                    <Trigger asChild>
+                      <StyledButton type="button" aria-label={t('concept.showDescription', { title: title })}>
+                        {visualElement.resource === 'image' ? (
+                          <NotionImage
+                            type={visualElementType}
+                            id={''}
+                            src={visualElement.data.imageUrl}
+                            alt={visualElement.data.alttext.alttext}
+                          />
+                        ) : metaImage ? (
+                          <NotionImage
+                            type={visualElementType}
+                            id={''}
+                            src={metaImage?.url ?? ''}
+                            alt={metaImage?.alt ?? ''}
+                          />
+                        ) : undefined}
+                      </StyledButton>
+                    </Trigger>
+                  </Tooltip>
+                </ImageWrapper>
+                <Portal
+                  container={
+                    typeof document !== 'undefined'
+                      ? (document.querySelector('.c-article') as HTMLElement | null) || undefined
+                      : undefined
+                  }>
+                  <PopoverWrapper top={modalPos}>
+                    <Content avoidCollisions={false} asChild side="bottom">
+                      <ConceptNotionV2
+                        title={title}
+                        content={content}
+                        copyright={copyright}
+                        source={source}
+                        visualElement={visualElement}
+                        inPopover
+                        closeButton={
+                          <Close asChild>
+                            <IconButtonV2 aria-label={t('close')} variant="ghost">
+                              <Cross />
+                            </IconButtonV2>
+                          </Close>
+                        }
+                      />
+                    </Content>
+                  </PopoverWrapper>
+                </Portal>
+              </>
+            )
+          }
+        />
+        {copyright?.license && license ? (
+          <FigureCaption
+            figureId=""
+            id=""
+            authors={authors}
+            licenseRights={license.rights}
+            locale={i18n.language}
+            hideIconsAndAuthors
+            modalButton={
+              <ButtonV2 variant="outline" size="small" shape="pill" onClick={() => setIsOpen(true)}>
+                {t('concept.reuse')}
+              </ButtonV2>
+            }>
+            <ModalV2
+              controlled
+              isOpen={isOpen}
+              onClose={() => setIsOpen(false)}
+              labelledBy="license-dialog-rules-heading">
+              {(close) => (
+                <FigureLicenseDialogContent
+                  authors={groupedAuthors}
+                  locale={i18n.language}
+                  title={title}
+                  origin={copyright.origin}
+                  license={license}
+                  onClose={close}
+                  type="concept"
+                />
+              )}
+            </ModalV2>
+          </FigureCaption>
+        ) : (
+          <BottomBorder />
+        )}
+      </Figure>
+    </Root>
+  );
+};
+
+export default ConceptEmbed;

package/src/Embed/ConceptListEmbed.tsx

@@ -0,0 +1,64 @@
+/**
+ * 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 { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { colors } from '@ndla/core';
+import { ConceptListMetaData } from '@ndla/types-embed';
+import { Figure } from '../Figure';
+import { BlockConcept } from './ConceptEmbed';
+
+interface Props {
+  embed: ConceptListMetaData;
+}
+
+const ConceptList = styled.div`
+  & > figure:first-of-type {
+    margin-top: 32px;
+  }
+  & li {
+    display: block;
+  }
+`;
+
+const StyledSpan = styled.span`
+  color: ${colors.support.red};
+`;
+
+const ConceptListEmbed = ({ embed }: Props) => {
+  const { t } = useTranslation();
+  if (embed.status === 'error') {
+    return <StyledSpan>{t('embed.conceptListError')}</StyledSpan>;
+  }
+  const { embedData, data } = embed;
+  return (
+    <div>
+      <Figure type="full" resizeIframe>
+        {embedData.title && <h2>{embedData.title}</h2>}
+        <ConceptList>
+          <ul>
+            {data.concepts.map(({ concept, visualElement }) => (
+              <li key={concept.id}>
+                <BlockConcept
+                  title={concept.title.title}
+                  content={concept.content.content}
+                  metaImage={concept.metaImage}
+                  copyright={concept.copyright}
+                  source={concept.source}
+                  visualElement={visualElement}
+                />
+              </li>
+            ))}
+          </ul>
+        </ConceptList>
+      </Figure>
+    </div>
+  );
+};
+
+export default ConceptListEmbed;

package/src/Embed/ContentLinkEmbed.tsx

@@ -0,0 +1,41 @@
+/**
+ * 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 { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { colors } from '@ndla/core';
+import { ContentLinkMetaData } from '@ndla/types-embed';
+interface Props {
+  embed: ContentLinkMetaData;
+  isOembed?: boolean;
+}
+
+const StyledSpan = styled.span`
+  color: ${colors.support.red};
+`;
+
+const ContentLinkEmbed = ({ embed, isOembed }: Props) => {
+  const { t } = useTranslation();
+  if (embed.status === 'error') {
+    return <StyledSpan>{`${t('embed.linkError')}: ${embed.embedData.linkText}`}</StyledSpan>;
+  }
+
+  const { embedData, data } = embed;
+
+  if (embedData.openIn === 'new-context' || isOembed) {
+    return (
+      <a href={embed.data.path} target="_blank" rel="noopener noreferrer">
+        {embedData.linkText}
+      </a>
+    );
+  }
+
+  return <a href={data.path}>{embedData.linkText}</a>;
+};
+
+export default ContentLinkEmbed;

package/src/Embed/ExternalEmbed.tsx

@@ -0,0 +1,80 @@
+/**
+ * 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 styled from '@emotion/styled';
+import { OembedMetaData } from '@ndla/types-embed';
+import { useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Figure } from '../Figure';
+import { ResourceBox } from '../ResourceBox';
+import { errorSvgSrc } from './ImageEmbed';
+
+interface Props {
+  embed: OembedMetaData;
+  isConcept?: boolean;
+}
+
+const StyledFigure = styled.figure`
+  iframe {
+    height: auto;
+  }
+`;
+
+const ExternalEmbed = ({ embed, isConcept }: Props) => {
+  const { t } = useTranslation();
+  const figRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const iframe = figRef.current?.querySelector(`iframe`);
+    if (iframe) {
+      const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];
+      iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;
+    }
+  }, []);
+  if (embed.status === 'error') {
+    return (
+      <figure className={isConcept ? '' : 'c-figure'}>
+        <img alt={t('external.error')} src={errorSvgSrc} />
+        <figcaption>{t('external.error')}</figcaption>
+      </figure>
+    );
+  }
+
+  const { embedData, data } = embed;
+
+  if (embedData.type === 'fullscreen') {
+    const image = { src: data.iframeImage?.imageUrl ?? '', alt: data.iframeImage?.alttext?.alttext ?? '' };
+    return (
+      <Figure type="full">
+        <ResourceBox
+          image={image}
+          title={embedData.title ?? ''}
+          url={embedData.url}
+          caption={embedData.caption ?? ''}
+          buttonText={t('license.other.itemImage.ariaLabel')}
+        />
+      </Figure>
+    );
+  }
+
+  const fullColumnClass = isConcept ? 'c-figure--full-column' : '';
+  const classes = `c-figure ${fullColumnClass} c-figure--resize`;
+
+  return (
+    <StyledFigure
+      ref={figRef}
+      className={classes}
+      //@ts-ignore
+      // eslint-disable-next-line react/no-unknown-property
+      resizeiframe="true"
+      dangerouslySetInnerHTML={{ __html: data.oembed.html ?? '' }}
+    />
+  );
+};
+
+export default ExternalEmbed;

package/src/Embed/FootnoteEmbed.tsx

@@ -0,0 +1,30 @@
+/**
+ * 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 { FootnoteMetaData } from '@ndla/types-embed';
+import { useTranslation } from 'react-i18next';
+
+interface Props {
+  embed: FootnoteMetaData;
+}
+const FootnoteEmbed = ({ embed }: Props) => {
+  const { t } = useTranslation();
+  if (embed.status === 'error') {
+    return <div>{t('error')}</div>;
+  }
+
+  return (
+    <span id={`ref${embed.data.entryNum}`} className="c-footnotes__ref">
+      <sup>
+        <a href={`#note${embed.data.entryNum}`} target="_self">{`[${embed.data.entryNum}]`}</a>
+      </sup>
+    </span>
+  );
+};
+
+export default FootnoteEmbed;

package/src/Embed/H5pEmbed.tsx

@@ -0,0 +1,74 @@
+/**
+ * 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 styled from '@emotion/styled';
+import { H5pMetaData } from '@ndla/types-embed';
+import { useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { errorSvgSrc } from './ImageEmbed';
+
+interface Props {
+  embed: H5pMetaData;
+  isConcept?: boolean;
+}
+
+const StyledFigure = styled.figure`
+  iframe {
+    height: auto;
+  }
+`;
+
+const H5pEmbed = ({ embed, isConcept }: Props) => {
+  const { t } = useTranslation();
+
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const figRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const iframe =
+      embed.status === 'success' && embed.data.oembed ? figRef.current?.querySelector('iframe') : iframeRef.current;
+    if (iframe) {
+      const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];
+      iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;
+    }
+  }, [embed]);
+
+  if (embed.status === 'error') {
+    return (
+      <figure className={isConcept ? '' : 'c-figure'}>
+        <img alt={t('h5p.error')} src={errorSvgSrc} />
+        <figcaption>{t('h5p.error')}</figcaption>
+      </figure>
+    );
+  }
+  const fullColumnClass = isConcept ? 'c-figure--full-column' : '';
+  const classes = `c-figure ${fullColumnClass} c-figure--resize`;
+
+  if (embed.data.oembed) {
+    return (
+      <StyledFigure
+        className={classes}
+        ref={figRef}
+        //@ts-ignore
+        // eslint-disable-next-line react/no-unknown-property
+        resizeiframe="true"
+        dangerouslySetInnerHTML={{ __html: embed.data.oembed.html ?? '' }}
+      />
+    );
+  }
+
+  return (
+    //@ts-ignore
+    // eslint-disable-next-line react/no-unknown-property
+    <StyledFigure className={classes} resizeiframe="true">
+      <iframe title={embed.embedData.url} ref={iframeRef} aria-label={embed.embedData.url} src={embed.embedData.url} />
+    </StyledFigure>
+  );
+};
+
+export default H5pEmbed;