@ndla/ui 45.0.16 → 46.0.0

package/src/Notion/ConceptNotion.tsx

@@ -1,170 +0,0 @@
-/**
- * Copyright (c) 2022-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 { useEffect } from 'react';
-//@ts-ignore
-import { initArticleScripts } from '@ndla/article-scripts';
-import { useTranslation } from 'react-i18next';
-import { breakpoints, mq, spacing } from '@ndla/core';
-import { parseMarkdown } from '@ndla/util';
-import { getLicenseCredits } from '@ndla/licenses';
-import Notion, { NotionDialogContent, NotionDialogText, NotionDialogLicenses } from '@ndla/notion';
-import { Notion as UINotion } from '.';
-import { NotionImage } from './NotionImage';
-import NotionVisualElement from './NotionVisualElement';
-import type { NotionVisualElementType } from './NotionVisualElement';
-import FigureNotion from './FigureNotion';
-import { Copyright } from '../types';
-import { FigureType } from '../Figure';
-
-const ImageWrapper = styled.div`
-  float: right;
-  padding-left: ${spacing.normal};
-  position: relative;
-
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    width: 100%;
-    padding-left: 0;
-  }
-`;
-
-export interface ConceptNotionType {
-  id: number;
-  copyright?: Partial<Copyright>;
-  title: string;
-  text: string;
-  visualElement?: NotionVisualElementType;
-  source?: string;
-  image?: {
-    src: string;
-    alt: string;
-  };
-}
-interface Props {
-  type?: 'image' | 'video' | 'h5p' | 'iframe' | 'external';
-  concept: ConceptNotionType;
-  disableScripts?: boolean;
-  hideIconsAndAuthors?: boolean;
-  figureType?: FigureType;
-}
-
-const ConceptNotion = ({ concept, disableScripts, type, hideIconsAndAuthors, figureType }: Props) => {
-  const notionId = `notion-${concept.id}`;
-  const figureId = `notion-figure-${concept.id}`;
-  const visualElementId = `visual-element-${concept.id}`;
-  const { t } = useTranslation();
-
-  const { creators, rightsholders, processors } = getLicenseCredits(concept.copyright);
-
-  const authors = (creators.length || rightsholders.length ? [...creators, ...rightsholders] : [...processors]).map(
-    (author) => author.name,
-  );
-
-  useEffect(() => {
-    if (!disableScripts) {
-      initArticleScripts();
-    }
-  }, [disableScripts]);
-
-  return (
-    <FigureNotion
-      resizeIframe
-      id={figureId}
-      title={concept.title}
-      figureId={visualElementId}
-      copyright={concept.copyright}
-      licenseString={concept.copyright?.license?.license ?? ''}
-      type="concept"
-      hideIconsAndAuthors={hideIconsAndAuthors}
-      figureType={figureType}
-    >
-      <UINotion
-        id={notionId}
-        title={concept.title}
-        text={concept.text}
-        imageElement={
-          concept.visualElement?.resource === 'image' && concept.visualElement.image ? (
-            <ImageWrapper>
-              <Notion
-                id={notionId}
-                title={concept.title}
-                subTitle={t('searchPage.resultType.notionsHeading')}
-                hideBaselineIcon
-                content={
-                  <>
-                    <NotionDialogContent>
-                      {concept.visualElement?.resource === 'image' && concept.visualElement.image ? (
-                        <NotionVisualElement visualElement={concept.visualElement} id={notionId} figureId={figureId} />
-                      ) : undefined}
-                      <NotionDialogText>{parseMarkdown(concept.text, 'body')}</NotionDialogText>
-                    </NotionDialogContent>
-                    <NotionDialogLicenses
-                      authors={authors}
-                      license={concept.copyright?.license?.license ?? ''}
-                      source={concept.source}
-                    />
-                  </>
-                }
-              >
-                {concept.visualElement.image && (
-                  <NotionImage
-                    type={type}
-                    id={visualElementId}
-                    src={concept.visualElement.image.src}
-                    alt={concept.visualElement.image.alt ?? ''}
-                  />
-                )}
-              </Notion>
-            </ImageWrapper>
-          ) : undefined
-        }
-        visualElement={
-          concept.visualElement && concept.visualElement.resource !== 'image' && concept.visualElement.url ? (
-            <ImageWrapper>
-              <Notion
-                id={notionId}
-                title={concept.title}
-                hideBaselineIcon
-                subTitle={t('searchPage.resultType.notionsHeading')}
-                content={
-                  <>
-                    <NotionDialogContent>
-                      {concept.visualElement &&
-                      concept.visualElement?.resource !== 'image' &&
-                      concept.visualElement.url ? (
-                        <NotionVisualElement visualElement={concept.visualElement} id={notionId} figureId={figureId} />
-                      ) : undefined}
-
-                      <NotionDialogText>{parseMarkdown(concept.text, 'body')}</NotionDialogText>
-                    </NotionDialogContent>
-                    <NotionDialogLicenses
-                      authors={authors}
-                      license={concept.copyright?.license?.license ?? ''}
-                      source={concept.source}
-                    />
-                  </>
-                }
-              >
-                {concept.image && (
-                  <NotionImage
-                    type={type}
-                    id={visualElementId}
-                    src={concept.image?.src}
-                    alt={concept.image?.alt ?? ''}
-                  />
-                )}
-              </Notion>
-            </ImageWrapper>
-          ) : undefined
-        }
-      ></UINotion>
-    </FigureNotion>
-  );
-};
-
-export default ConceptNotion;

package/src/Notion/FigureNotion.tsx

@@ -1,104 +0,0 @@
-/**
- * Copyright (c) 2022-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 { colors, spacing } from '@ndla/core';
-import { getGroupedContributorDescriptionList, getLicenseByAbbreviation, getLicenseCredits } from '@ndla/licenses';
-import { ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Figure, FigureCaption, FigureLicenseDialog, FigureType } from '../Figure';
-import { Copyright } from '../types';
-
-const BottomBorder = styled.div`
-  margin-top: ${spacing.normal};
-  border-bottom: 1px solid ${colors.brand.greyLight};
-`;
-
-interface Props {
-  resizeIframe?: boolean;
-  figureId: string;
-  children: ReactNode | ((params: { typeClass: string }) => ReactNode);
-  id: string;
-  title: string;
-  copyright?: Partial<Copyright>;
-  licenseString: string;
-  type: 'video' | 'h5p' | 'image' | 'concept' | 'other';
-  hideFigCaption?: boolean;
-  hideIconsAndAuthors?: boolean;
-  figureType?: FigureType;
-  licenseButtons?: ReactNode;
-}
-
-const FigureNotion = ({
-  resizeIframe,
-  figureId,
-  children,
-  id,
-  copyright,
-  licenseString,
-  title,
-  type,
-  hideFigCaption,
-  hideIconsAndAuthors,
-  figureType,
-  licenseButtons,
-}: Props) => {
-  const { t, i18n } = useTranslation();
-  const license = getLicenseByAbbreviation(licenseString, i18n.language);
-  const licenseCredits = getLicenseCredits(copyright);
-  const { creators, rightsholders, processors } = licenseCredits;
-
-  const authors = creators.length || rightsholders.length ? [...creators, ...rightsholders] : [...processors];
-
-  const groupedAuthors = getGroupedContributorDescriptionList(licenseCredits, i18n.language).map((item) => ({
-    name: item.description,
-    type: item.label,
-  }));
-
-  return (
-    <Figure resizeIframe={resizeIframe} id={figureId} type={figureType || 'full-column'}>
-      {({ typeClass }) => (
-        <>
-          {typeof children === 'function' ? children({ typeClass }) : children}
-          {copyright?.license?.license ? (
-            <FigureCaption
-              hideFigcaption={hideFigCaption}
-              figureId={figureId}
-              id={id}
-              reuseLabel={t(`${type}.reuse`)}
-              authors={authors}
-              licenseRights={license.rights}
-              hideIconsAndAuthors={hideIconsAndAuthors}
-            >
-              <FigureLicenseDialog
-                id={id}
-                authors={groupedAuthors}
-                locale={i18n.language}
-                title={title}
-                origin={copyright?.origin}
-                license={license}
-                messages={{
-                  close: t('close'),
-                  rulesForUse: t(`license.${type}.rules`),
-                  source: t('source'),
-                  learnAboutLicenses: t('license.learnMore'),
-                  title: t('title'),
-                }}
-              >
-                {licenseButtons}
-              </FigureLicenseDialog>
-            </FigureCaption>
-          ) : (
-            <BottomBorder />
-          )}
-        </>
-      )}
-    </Figure>
-  );
-};
-
-export default FigureNotion;

package/src/Notion/NotionVisualElement.tsx

@@ -1,80 +0,0 @@
-/**
- * Copyright (c) 2022-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 { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { ReactNode } from 'react';
-import { Copyright } from '../types';
-import FigureNotion from './FigureNotion';
-
-const StyledIframe = styled.iframe<{ type: string }>`
-  ${(props) =>
-    props.type === 'video'
-      ? css`
-          min-height: 400px;
-        `
-      : ''}
-`;
-
-export type NotionVisualElementType = {
-  element?: ReactNode;
-  type?: 'video' | 'image' | 'h5p' | 'iframe';
-  resource?: string;
-  title?: string;
-  url?: string;
-  copyright?: Partial<Copyright>;
-  image?: {
-    src: string;
-    alt?: string;
-  };
-  licenseButtons?: ReactNode;
-};
-
-interface Props {
-  visualElement: NotionVisualElementType;
-  id: string;
-  figureId: string;
-}
-const supportedEmbedTypes = ['brightcove', 'h5p', 'iframe', 'external', 'image'];
-
-const getType = (resource: string) => {
-  if (resource === 'brightcove') {
-    return 'video';
-  }
-  if (resource === 'image' || resource === 'h5p') {
-    return resource;
-  }
-  return 'other';
-};
-
-const NotionVisualElement = ({ visualElement, id, figureId }: Props) => {
-  if (!visualElement.resource || !supportedEmbedTypes.includes(visualElement.resource)) {
-    return <p>Embed type is not supported!</p>;
-  }
-
-  const type = getType(visualElement.resource);
-
-  return (
-    <FigureNotion
-      resizeIframe
-      id={id}
-      figureId={figureId}
-      title={visualElement.title ?? ''}
-      copyright={visualElement.copyright}
-      licenseString={visualElement.copyright?.license?.license ?? ''}
-      licenseButtons={visualElement.licenseButtons}
-      type={type}
-    >
-      {visualElement.image?.src ? (
-        <img src={visualElement.image?.src} alt={visualElement.image.alt} />
-      ) : (
-        <StyledIframe allowFullScreen type={type} src={visualElement.url} title={visualElement.title} />
-      )}
-    </FigureNotion>
-  );
-};
-
-export default NotionVisualElement;

package/src/utils/createUniversalPortal.tsx

@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2016-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-// N.B This helper is intended to be used in https://github.com/ndlano/article-converter. It is not a general soultion for using portals in SSR applications.
-
-import { ReactNode } from 'react';
-import ReactDOM from 'react-dom';
-
-function canUseDOM() {
-  return !!(typeof window !== 'undefined' && window.document && !window.document.hidden); // window.document.hidden === jsdom check
-}
-
-export function createUniversalPortal(children: ReactNode, selector: string) {
-  if (!canUseDOM()) {
-    return <div data-react-universal-portal>{children}</div>;
-  }
-  return ReactDOM.createPortal(children, document.querySelector(selector) as Element);
-}