@ndla/ui 47.4.1 → 49.0.0

package/src/CopyParagraphButton/CopyParagraphButtonV2.tsx

@@ -1,85 +0,0 @@
-/**
- * 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;
-  lang?: string;
-}
-const CopyParagraphButtonV2 = ({ children, copyText, lang }: 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} lang={lang}>
-        {children}
-      </h2>
-    </ContainerDiv>
-  );
-};
-
-export default CopyParagraphButtonV2;

package/src/CopyParagraphButton/initCopyParagraphButtons.tsx

@@ -1,27 +0,0 @@
-/**
- * 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 ReactDOM from 'react-dom';
-import CopyParagraphButton from './CopyParagraphButton';
-
-const forEachElement = (selector: string, callback: Function) => {
-  const nodeList = document.querySelectorAll(selector);
-  for (let i = 0; i < nodeList.length; i += 1) {
-    callback(nodeList[i], i);
-  }
-};
-
-const initCopyParagraphButtons = () => {
-  forEachElement('[data-header-copy-container]', (el: HTMLElement) => {
-    const title = el.getAttribute('data-title');
-
-    // eslint-disable-next-line react/no-deprecated
-    ReactDOM.hydrate(<CopyParagraphButton title={title} content={title} hydrate />, el);
-  });
-};
-
-export default initCopyParagraphButtons;

package/src/FactBox/FactBoxV2.tsx

@@ -1,56 +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.
- *
- */
-
-import { ReactNode, useState } from 'react';
-import BEMHelper from 'react-bem-helper';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { IconButtonV2 } from '@ndla/button';
-import { ChevronDown, ChevronUp } from '@ndla/icons/common';
-
-const classes = new BEMHelper({
-  name: 'factbox',
-  prefix: 'c-',
-});
-
-interface Props {
-  children?: ReactNode;
-}
-
-const StyledAside = styled.aside`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-const StyledDiv = styled.div`
-  width: 100%;
-`;
-
-const StyledIconButton = styled(IconButtonV2)`
-  margin-top: -20px;
-  z-index: 1;
-`;
-
-const FactBox = ({ children }: Props) => {
-  const { t } = useTranslation();
-  const [isOpen, setIsOpen] = useState(false);
-
-  const additional = isOpen ? 'expanded' : '';
-
-  return (
-    <StyledAside {...classes(undefined, undefined, additional)}>
-      <StyledDiv {...classes('content')}>{children}</StyledDiv>
-      <StyledIconButton onClick={() => setIsOpen((p) => !p)} aria-label={t(`factbox.${isOpen ? 'close' : 'open'}`)}>
-        {isOpen ? <ChevronUp /> : <ChevronDown />}
-      </StyledIconButton>
-    </StyledAside>
-  );
-};
-
-export default FactBox;

package/src/Figure/FigureBylineExpandButton.tsx

@@ -1,34 +0,0 @@
-/**
- * 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 { ChevronUp, ChevronDown } from '@ndla/icons/common';
-
-interface Props {
-  messages: {
-    expandBylineButtonLabel: string;
-    minimizeBylineButtonLabel: string;
-  };
-  typeClass: string;
-}
-
-export const FigureBylineExpandButton = ({ messages, typeClass }: Props) => {
-  return (
-    <button
-      className="c-figure__show-byline-btn"
-      type="button"
-      data-figure-button
-      data-classtype={typeClass}
-      data-aria={messages.expandBylineButtonLabel}
-      data-ariaexpanded={messages.minimizeBylineButtonLabel}
-      aria-label={messages.expandBylineButtonLabel}
-    >
-      <ChevronUp className="expanded-icon" />
-      <ChevronDown className="contracted-icon" />
-    </button>
-  );
-};

package/src/Figure/FigureExpandButton.tsx

@@ -1,35 +0,0 @@
-/**
- * Copyright (c) 2019-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 { ArrowCollapse } from '@ndla/icons/common';
-import { ExpandTwoArrows } from '@ndla/icons/action';
-
-export function FigureExpandButton({ messages, typeClass }: Props) {
-  return (
-    <button
-      className="c-figure__fullscreen-btn"
-      type="button"
-      data-aria={messages.zoomImageButtonLabel}
-      data-ariaexpanded={messages.zoomOutImageButtonLabel}
-      aria-label={messages.zoomImageButtonLabel}
-      data-figure-button
-      data-classtype={typeClass}
-    >
-      <ExpandTwoArrows className="contracted-icon" />
-      <ArrowCollapse className="expanded-icon" />
-    </button>
-  );
-}
-
-interface Props {
-  messages: {
-    zoomImageButtonLabel: string;
-    zoomOutImageButtonLabel: string;
-  };
-  typeClass: string;
-}

package/src/FileList/FileListV2.tsx

@@ -1,58 +0,0 @@
-/**
- * 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 { colors, fonts, spacing } from '@ndla/core';
-import { ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-
-interface Props {
-  children: ReactNode;
-}
-
-const FileListSection = styled.section`
-  margin: ${spacing.large} 0;
-  padding: ${spacing.small} 0 ${spacing.normal} ${spacing.normal};
-  border-left: 2px solid ${colors.brand.greyLightest};
-  font-family: ${fonts.sans};
-
-  .c-icon {
-    margin-top: 3px;
-    flex-shrink: 0;
-    margin-right: ${spacing.small};
-    height: 18px;
-    width: 18px;
-  }
-`;
-
-const FileListHeading = styled.h3`
-  ${fonts.sizes('16px', '18px')};
-  letter-spacing: 0.05em;
-  margin: 0 0 ${spacing.xsmall} 0;
-  padding-bottom: ${spacing.xsmall};
-  border-bottom: 2px solid ${colors.brand.greyLight};
-  font-weight: ${fonts.weight.bold};
-  text-transform: uppercase;
-`;
-
-const FilesList = styled.ul`
-  margin: 0;
-  padding: 0;
-`;
-
-const FileListV2 = ({ children }: Props) => {
-  const { t } = useTranslation();
-  return (
-    <FileListSection>
-      <FileListHeading>{t('files')}</FileListHeading>
-      <FilesList>{children}</FilesList>
-    </FileListSection>
-  );
-};
-
-export default FileListV2;

package/src/FileList/FileV2.tsx

@@ -1,33 +0,0 @@
-/**
- * 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 File from './File';
-
-interface Props {
-  title: string;
-  url: string;
-  fileExists: boolean;
-  fileType: string;
-}
-
-const FileV2 = ({ title, url, fileExists, fileType }: Props) => {
-  const { t } = useTranslation();
-  const tooltip = `${t('download')} ${url.split('/').pop()}`;
-  return (
-    <File
-      file={{
-        title,
-        fileExists,
-        formats: [{ url, fileType, tooltip }],
-      }}
-    />
-  );
-};
-
-export default FileV2;

package/src/Frontpage/FrontpageFilm.tsx

@@ -1,97 +0,0 @@
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import SafeLink from '@ndla/safelink';
-import { Forward } from '@ndla/icons/common';
-import { useTranslation } from 'react-i18next';
-import { spacing, spacingUnit, colors, breakpoints, fonts, mq } from '@ndla/core';
-import SectionHeading from '../SectionHeading';
-
-const StyledSection = styled.section`
-  margin-top: ${spacing.large};
-  margin-bottom: ${spacing.large};
-`;
-
-type StyledImageProps = {
-  imageUrl: string;
-};
-
-const StyledImage = styled.div<StyledImageProps>`
-  background: ${colors.ndlaFilm.filmColorDark};
-  background-repeat: no-repeat;
-  background-position: ${spacing.small} center;
-  background-size: 110px;
-
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  min-height: 100px;
-  padding: ${spacingUnit}px ${spacing.medium} ${spacingUnit}px ${spacingUnit}px;
-
-  ${(props: StyledImageProps) =>
-    props.imageUrl &&
-    css`
-      background-image: url(${props.imageUrl});
-    `}
-
-  ${mq.range({ from: breakpoints.mobileWide })} {
-    background-size: contain;
-    min-height: 120px;
-    background-position: ${spacing.medium} center;
-  }
-
-  ${mq.range({ from: breakpoints.desktop })} {
-    min-height: 180px;
-    background-position: 72px center;
-  }
-`;
-
-type StyledTextProps = {
-  narrow?: boolean;
-};
-
-const StyledText = styled.span<StyledTextProps>`
-  color: #fff;
-  ${fonts.sizes('14px', '26px')};
-  width: 50%;
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    ${fonts.sizes('18px', '26px')};
-    padding-right: ${spacingUnit}px;
-    padding-left: 0;
-    width: 66.6%;
-  }
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    display: ${(props: StyledTextProps) => (props.narrow ? 'none' : 'flex')};
-  }
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    display: ${(props: StyledTextProps) => (!props.narrow ? 'none' : 'flex')};
-  }
-`;
-
-type Props = {
-  url: string;
-  imageUrl: string;
-};
-
-const FrontpageFilm = ({ url, imageUrl }: Props) => {
-  const { t } = useTranslation();
-  return (
-    <StyledSection>
-      <SectionHeading headingLevel="h2" large>
-        {t('welcomePage.film.header')}
-      </SectionHeading>
-      <StyledImage imageUrl={imageUrl}>
-        <StyledText>{t('welcomePage.film.text')}</StyledText>
-        <StyledText narrow>{t('welcomePage.film.textShort')}</StyledText>
-      </StyledImage>
-      <div className="o-text-link__wrapper o-text-link__wrapper--right">
-        <SafeLink className="o-text-link" to={url}>
-          {t('welcomePage.film.linkLabel')}
-          <Forward />
-        </SafeLink>
-      </div>
-    </StyledSection>
-  );
-};
-
-export default FrontpageFilm;

package/src/Frontpage/FrontpageHeader.tsx

@@ -1,72 +0,0 @@
-import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { colors, spacing, spacingUnit, mq, breakpoints } from '@ndla/core';
-import SafeLink from '@ndla/safelink';
-import FrontpageHeaderIllustration from './illustrations/FrontpageHeaderIllustration';
-import SvgLogo from '../Logo/SvgLogo';
-
-const StyledHeader = styled.div`
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  max-width: 1024px;
-  padding: ${spacing.normal} 0 0;
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding: ${spacing.large} 0 ${spacing.small};
-  }
-`;
-
-const StyledHeaderWrapper = styled.header`
-  background: ${colors.brand.lighter};
-  margin-bottom: ${spacingUnit * 3}px;
-`;
-
-const StyledLogo = styled(SafeLink)`
-  width: 135px;
-  box-shadow: none;
-  ${mq.range({ from: breakpoints.tablet })} {
-    width: 200px;
-  }
-`;
-
-const HeaderIllustrationWrapper = styled.div`
-  margin: ${spacing.small};
-  width: 100%;
-  padding: 0 ${spacing.normal};
-  text-align: center;
-  svg {
-    max-width: 100%;
-  }
-  ${mq.range({ from: breakpoints.tablet })} {
-    width: 480px;
-    margin: ${spacing.normal} 0 ${spacing.small};
-    padding: 0;
-  }
-`;
-
-interface FrontPageHeaderProps {
-  locale: string;
-  showHeader: boolean;
-  children?: ReactNode;
-}
-
-const FrontpageHeader = ({ locale, showHeader = true, children }: FrontPageHeaderProps) => (
-  <StyledHeaderWrapper>
-    <StyledHeader>
-      <StyledLogo to="/" aria-hidden="true">
-        <SvgLogo locale={locale} />
-      </StyledLogo>
-      {showHeader && (
-        <HeaderIllustrationWrapper aria-hidden="true">
-          <FrontpageHeaderIllustration />
-        </HeaderIllustrationWrapper>
-      )}
-      {children}
-    </StyledHeader>
-  </StyledHeaderWrapper>
-);
-
-export default FrontpageHeader;

package/src/Frontpage/FrontpageInfo.tsx

@@ -1,45 +0,0 @@
-import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { spacing, spacingUnit, mq, breakpoints } from '@ndla/core';
-
-const StyledWrapper = styled.div`
-  display: flex;
-  flex-flow: column;
-  margin-top: ${spacing.large};
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    flex-flow: row;
-    margin-top: ${spacingUnit * 3}px;
-  }
-
-  & > * {
-    margin-top: ${spacing.large};
-
-    ${mq.range({ from: breakpoints.tablet, until: breakpoints.desktop })} {
-      margin-right: ${spacing.normal};
-    }
-
-    ${mq.range({ from: breakpoints.desktop })} {
-      margin-right: ${spacing.large};
-    }
-
-    ${mq.range({ from: breakpoints.tablet })} {
-      flex-basis: 50%;
-      flex-grow: 0;
-      margin-top: 0;
-    }
-
-    &:last-child {
-      margin-right: 0;
-      margin-top: 0;
-    }
-  }
-`;
-
-type Props = {
-  children: ReactNode;
-};
-
-const FrontpageInfo = ({ children }: Props) => <StyledWrapper>{children}</StyledWrapper>;
-
-export default FrontpageInfo;

package/src/Frontpage/FrontpageMultidisciplinarySubject.tsx

@@ -1,110 +0,0 @@
-import SafeLink, { SafeLinkButton } from '@ndla/safelink';
-import styled from '@emotion/styled';
-import { spacing, breakpoints, mq } from '@ndla/core';
-import { useTranslation } from 'react-i18next';
-import { HeadingLevel } from '@ndla/typography';
-import SectionHeading from '../SectionHeading';
-import { MultidisciplinarySubjectIllustration as Illustration } from './illustrations/FrontpageIllustrations';
-
-export const StyledSection = styled.section`
-  position: relative;
-  margin-top: ${spacing.large};
-  margin-bottom: ${spacing.large};
-  background-color: rgb(250, 246, 240);
-  background: linear-gradient(304.38deg, rgba(239, 238, 220, 0.35), rgba(250, 246, 240, 0.75));
-  border-radius: 8px;
-  padding: ${spacing.medium};
-  ${mq.range({ from: breakpoints.desktop })} {
-    padding: ${spacing.large};
-    margin: 124px 0;
-  }
-`;
-
-export const Wrapper = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-`;
-export const Content = styled.div`
-  max-width: 720px;
-`;
-
-export const TargetItem = styled.div`
-  padding: ${spacing.small} 0 0;
-`;
-
-export const StyledText = styled.span`
-  width: 100%;
-  font-size: 16px;
-  line-height: 24px;
-  ${mq.range({ from: breakpoints.desktop })} {
-    font-size: 20px;
-    line-height: 32px;
-  }
-`;
-
-const Topics = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  padding: ${spacing.xxsmall} 0;
-  margin: ${spacing.small} 0;
-  ${mq.range({ from: breakpoints.tablet })} {
-    flex-direction: row;
-    margin: 0;
-  }
-`;
-
-const Topic = styled.div`
-  margin: ${spacing.small} 0;
-  &:first-of-type {
-    margin-left: 0;
-  }
-  &:last-of-type {
-    margin-right: 0;
-  }
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin: ${spacing.small};
-  }
-`;
-
-type Props = {
-  url: string;
-  topics?: { url: string; title: string; id: string }[];
-  headingLevel: HeadingLevel;
-};
-
-const FrontpageMultidisciplinarySubject = ({ url, topics, headingLevel }: Props) => {
-  const { t } = useTranslation();
-  return (
-    <StyledSection>
-      <Wrapper>
-        <Content>
-          <SectionHeading headingLevel={headingLevel} large>
-            {t('frontpageMultidisciplinarySubject.heading')}
-          </SectionHeading>
-          {topics ? (
-            <Topics>
-              {topics.map((topic) => {
-                return (
-                  <Topic key={topic.id}>
-                    <SafeLink to={topic.url}>{topic.title}</SafeLink>
-                  </Topic>
-                );
-              })}
-            </Topics>
-          ) : null}
-          <StyledText>{t('frontpageMultidisciplinarySubject.text')}</StyledText>
-        </Content>
-      </Wrapper>
-      <TargetItem className="o-text-link__wrapper o-text-link__wrapper">
-        <SafeLinkButton to={url} size="medium" shape="pill">
-          {t('frontpageMultidisciplinarySubject.linkText')}
-        </SafeLinkButton>
-      </TargetItem>
-      <Illustration />
-    </StyledSection>
-  );
-};
-
-export default FrontpageMultidisciplinarySubject;