@ndla/ui 45.0.17 → 46.0.1

package/src/Dialog/Dialog.tsx

@@ -1,80 +0,0 @@
-/**
- * Copyright (c) 2017-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 These component is used to render static markup serverside
-// Any interactivty is added by scripts located in the ndla-article-scripts package
-
-import { ReactNode } from 'react';
-import BEMHelper from 'react-bem-helper';
-import { createUniversalPortal } from '../utils/createUniversalPortal';
-
-const classes = new BEMHelper({
-  name: 'dialog',
-  prefix: 'c-',
-});
-
-interface Props {
-  id: string;
-  labelledby?: string;
-  label?: string;
-  hidden?: boolean;
-  children?: ReactNode;
-  messages?: {
-    close: string;
-  };
-  modifier?: string | string[];
-  disablePortal?: boolean;
-  onClose?: () => void;
-}
-
-export const Dialog = ({
-  children,
-  messages = { close: 'Lukk' },
-  id,
-  labelledby,
-  label,
-  modifier,
-  disablePortal = false,
-  hidden = true,
-  onClose,
-  ...rest
-}: Props) => {
-  const content = (
-    <div
-      {...classes('', modifier)}
-      data-dialog-id={id}
-      role="dialog"
-      aria-hidden={hidden}
-      aria-labelledby={labelledby}
-      aria-label={label}
-      {...rest}
-    >
-      <div {...classes('content')}>
-        <button
-          {...classes('close')}
-          type="button"
-          onClick={() => {
-            if (onClose) {
-              onClose();
-            }
-          }}
-        >
-          {messages.close}
-        </button>
-        {children}
-      </div>
-      <div className="o-backdrop" />
-    </div>
-  );
-
-  if (disablePortal) {
-    return content;
-  }
-
-  return createUniversalPortal(content, 'body');
-};

package/src/Dialog/component.dialog.scss

@@ -1,144 +0,0 @@
-.c-dialog {
-  text-align: left;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: none;
-  overflow: auto;
-  z-index: 9500;
-  align-items: center;
-  justify-content: center;
-  font-family: $font;
-  .o-backdrop {
-    display: none;
-    z-index: 1;
-  }
-  &:not(&--large, &--fullscreen) {
-    h1 {
-      @include font-size(22px, 26px);
-    }
-  }
-  &--small-heading {
-    h1 {
-      @include font-size(22px, 26px);
-    }
-  }
-
-  &--active {
-    display: flex;
-    .o-backdrop {
-      display: block;
-      animation-name: fadeIn;
-      animation-duration: 0.8s;
-    }
-  }
-
-  &__content {
-    overflow: hidden;
-    height: 0;
-    visibility: hidden;
-    position: relative;
-    z-index: 2;
-    color: $primary-color;
-    @include mq(tablet) {
-      min-width: 20rem;
-    }
-    @include font-size(18px, 1.33);
-  }
-
-  &--active &__content {
-    background-color: $brand-color--lighter;
-    box-shadow: 0 0 30px rgba($black, 0.2);
-    padding: $spacing--large $spacing;
-    @include mq($until: tablet) {
-      padding-left: 20px;
-      padding-right: 20px;
-    }
-    animation-name: zoomIn;
-    animation-duration: 0.3s;
-    overflow: auto;
-    height: 100vh;
-    width: 100vw;
-    -webkit-overflow-scrolling: touch;
-
-    @include mq(tablet) {
-      width: 90%;
-      max-height: 85vh;
-      // margin: 0 auto;
-      padding: $spacing--medium;
-      max-width: 613px;
-      min-width: 613px;
-      width: auto;
-      opacity: 1;
-      animation-name: fadeInBottomFixed;
-      height: auto;
-    }
-    visibility: visible;
-  }
-
-  &--active &__close {
-    display: block;
-    float: right;
-    position: relative;
-    z-index: 3;
-    background: transparent;
-    border: none;
-    color: $brand-color;
-    @include font-size(18px, 1.33);
-    font-weight: $font-weight-normal;
-    padding: 0;
-    box-shadow: $link;
-    height: 25px;
-    @include mq($until: tablet) {
-      + * {
-        margin-top: $spacing--large;
-      }
-    }
-    cursor: pointer;
-    &:hover {
-      box-shadow: $link--hover;
-    }
-  }
-
-  &--large &__content {
-    max-width: 970px;
-    width: 970px;
-    @include mq($until: 970px) {
-      max-height: 100vh;
-      min-height: 100vh;
-    }
-  }
-
-  &--medium &__content {
-    max-width: 790px;
-    width: 790px;
-    @include mq($until: 790px) {
-      max-height: 100vh;
-      min-height: 100vh;
-    }
-  }
-
-  &--fullscreen &__content {
-    @include mq(tablet) {
-      height: 100vh;
-      width: 90vw;
-      max-width: 90vw;
-      .c-figure-license__img {
-        max-height: 85vh;
-        max-height: 85vh;
-        width: auto;
-        margin: auto;
-      }
-    }
-  }
-}
-/*
-  Hack for fixing top padding on devices
-  where had to add position fixed to <html />
-  to prevent scrolling on background
-*/
-html.scrollFix .c-dialog--active .c-dialog__content {
-  padding-top: $spacing--large;
-}

package/src/Dialog/index.ts

@@ -1,13 +0,0 @@
-/**
- * Copyright (c) 2017-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 { Dialog } from './Dialog';
-
-export { Dialog };
-
-export default Dialog;

package/src/Figure/FigureLicense.tsx

@@ -1,75 +0,0 @@
-/**
- * Copyright (c) 2018-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 component is used to render static markup serverside
-// Any interactivty is added by scripts located in the ndla-article-scripts package
-
-import { ReactNode } from 'react';
-import BEMHelper from 'react-bem-helper';
-import { uuid } from '@ndla/util';
-import { LicenseDescription } from '@ndla/notion';
-import { FigureLicense } from './Figure';
-import { Contributor } from '../types';
-
-export const classLicenses = new BEMHelper({
-  name: 'figure-license',
-  prefix: 'c-',
-});
-
-interface FigureLicenseCtaProps {
-  children?: ReactNode;
-  origin?: string;
-  authors?: Contributor[];
-  messages: {
-    source: string;
-    title: string;
-  };
-  title?: string;
-}
-
-export const FigureLicenseCta = ({ children, messages, authors, origin, title }: FigureLicenseCtaProps) => (
-  <div {...classLicenses('cta-wrapper')}>
-    <ul {...classLicenses('list')}>
-      {title && <li {...classLicenses('item')}>{`${messages.title}: ${title}`}</li>}
-      {authors?.map((author) => (
-        <li key={uuid()} {...classLicenses('item')}>{`${author.type}: ${author.name}`}</li>
-      ))}
-      {origin && (
-        <li {...classLicenses('item')}>
-          {messages.source}:{' '}
-          {origin.startsWith('http') ? (
-            <a href={origin} target="_blank" rel="noopener noreferrer">
-              {origin}
-            </a>
-          ) : (
-            origin
-          )}
-        </li>
-      )}
-    </ul>
-    <div {...classLicenses('cta-block')}>{children}</div>
-  </div>
-);
-
-interface Props {
-  messages: {
-    modelPremission?: string;
-    learnAboutLicenses: string;
-  };
-  license: FigureLicense;
-  locale: string;
-}
-
-export const FigureLicenseByline = ({ messages, license, locale }: Props) => (
-  <>
-    <LicenseDescription key="byline" highlightCC locale={locale} messages={messages} licenseRights={license.rights} />
-    <a key="link" {...classLicenses('link')} target="_blank" rel="noopener noreferrer" href={license.url}>
-      {license.linkText}
-    </a>
-  </>
-);

package/src/Figure/FigureLicenseDialog.tsx

@@ -1,51 +0,0 @@
-/**
- * Copyright (c) 2017-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 component is used to render static markup serverside
-// Any interactivty is added by scripts located in the ndla-article-scripts package
-
-import { ReactNode } from 'react';
-import Dialog from '../Dialog';
-import { classLicenses, FigureLicenseByline, FigureLicenseCta } from './FigureLicense';
-import { FigureLicense } from './Figure';
-import { Contributor } from '../types';
-
-export const FigureLicenseDialog = ({ children, messages, id, authors, origin, title, locale, license }: Props) => {
-  const headingLabelId = `heading-${id}`;
-  return (
-    <Dialog id={id} labelledby={headingLabelId} messages={messages}>
-      <div {...classLicenses()}>
-        <h1 id={headingLabelId} {...classLicenses('title')}>
-          {messages.rulesForUse}
-        </h1>
-        <FigureLicenseByline license={license} messages={messages} locale={locale} />
-        <FigureLicenseCta authors={authors} title={title} origin={origin} messages={messages}>
-          {children}
-        </FigureLicenseCta>
-      </div>
-    </Dialog>
-  );
-};
-
-interface Props {
-  id: string;
-  children?: ReactNode;
-  origin?: string;
-  authors?: Contributor[];
-  messages: {
-    modelPremission?: string;
-    close: string;
-    rulesForUse: string;
-    source: string;
-    learnAboutLicenses: string;
-    title: string;
-  };
-  title?: string;
-  license: FigureLicense;
-  locale: string;
-}

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;