@ndla/ui 47.4.1 → 49.0.0

package/src/Navigation/NavigationTopicAbout.tsx

@@ -1,171 +0,0 @@
-import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import { css } from '@emotion/react';
-import { ButtonV2 } from '@ndla/button';
-import { ChevronDown, ChevronUp } from '@ndla/icons/common';
-import { useTranslation } from 'react-i18next';
-
-type InvertItProps = {
-  invertedStyle?: boolean;
-};
-
-const StyledWrapper = styled.section``;
-
-const StyledIngress = styled.div<InvertItProps>`
-  max-width: 612px;
-  ${(props) =>
-    props.invertedStyle &&
-    css`
-      color: #fff;
-    `}
-`;
-
-const StyledH1 = styled.h1<InvertItProps>`
-  ${fonts.sizes('24px', '28px')}
-  margin: ${spacing.medium} ${spacing.normal} ${spacing.normal} 0;
-  font-weight: ${fonts.weight.bold};
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin: 40px ${spacing.normal} 18px 0;
-    ${fonts.sizes('32px', '28px')};
-  }
-
-  ${mq.range({ from: breakpoints.desktop })} {
-    margin: 50px ${spacing.normal} 24px 0;
-    ${fonts.sizes('38px', '32px')};
-  }
-  ${(props) =>
-    props.invertedStyle &&
-    css`
-      color: #fff;
-    `}
-`;
-
-const LoaderText = styled.p<InvertItProps>`
-  ${(props) =>
-    props.invertedStyle &&
-    css`
-      color: #fff;
-    `}
-`;
-
-const StyledHeadingText = styled.span`
-  margin-right: 28px;
-`;
-
-const StyledAdditionalResourceMark = styled.span`
-  text-align: center;
-  display: inline-block;
-  line-height: 18px;
-  width: 20px;
-  height: 20px;
-  border: 1px solid ${colors.brand.dark};
-  border-radius: 100px;
-  margin-right: 7px;
-`;
-const StyledAdditionalResource = styled.span`
-  font-weight: ${fonts.weight.semibold};
-  ${fonts.sizes('12px', '15px')};
-  color: ${colors.brand.dark};
-`;
-
-const StyledButtonWrapper = styled.div<InvertItProps>`
-  margin-top: ${spacing.small};
-  padding: ${spacing.xsmall} 0 ${spacing.xsmall} ${spacing.medium};
-  border-left: 6px solid ${colors.brand.light};
-  ${(props) =>
-    props.invertedStyle &&
-    css`
-      button {
-        color: #fff;
-        &:hover,
-        &:focus {
-          color: #fff;
-        }
-      }
-    `}
-`;
-
-const StyledContentWrapper = styled.div<InvertItProps>`
-  padding-top: ${spacing.normal};
-  margin-top: 0;
-  border-left: 6px solid ${colors.brand.light};
-
-  ${(props) =>
-    props.invertedStyle &&
-    css`
-      background: #fff;
-    `}
-`;
-
-type Props = {
-  heading: string;
-  introduction: ReactNode;
-  onToggleShowContent: () => void;
-  showContent: boolean;
-  isLoading: boolean;
-  isAdditionalTopic?: boolean;
-  invertedStyle?: boolean;
-  children: ReactNode;
-};
-
-export const NavigationTopicAbout = ({
-  heading,
-  introduction,
-  onToggleShowContent,
-  showContent,
-  isLoading,
-  isAdditionalTopic,
-  invertedStyle,
-  children,
-}: Props) => {
-  const { t } = useTranslation();
-  return (
-    <StyledWrapper data-testid="nav-topic-about">
-      <StyledH1 invertedStyle={invertedStyle}>
-        <StyledHeadingText>{heading}</StyledHeadingText>
-        {isAdditionalTopic && (
-          <StyledAdditionalResource>
-            <StyledAdditionalResourceMark>T</StyledAdditionalResourceMark>
-            {t('navigation.additionalTopic')}
-          </StyledAdditionalResource>
-        )}
-      </StyledH1>
-      {isLoading ? (
-        <LoaderText invertedStyle={invertedStyle}>{t('navigation.loadingText')}</LoaderText>
-      ) : (
-        <>
-          <StyledIngress invertedStyle={invertedStyle}>
-            {introduction}
-            <StyledButtonWrapper invertedStyle={invertedStyle}>
-              <ButtonV2
-                aria-expanded={!!showContent}
-                variant="link"
-                onClick={() => {
-                  onToggleShowContent();
-                }}
-              >
-                {showContent ? (
-                  <>
-                    {t('navigation.showShorterDescription')} <ChevronUp />
-                  </>
-                ) : (
-                  <>
-                    {t('navigation.showLongerDescription')} <ChevronDown />
-                  </>
-                )}
-              </ButtonV2>
-            </StyledButtonWrapper>
-          </StyledIngress>
-          {showContent && <StyledContentWrapper invertedStyle={invertedStyle}>{children}</StyledContentWrapper>}
-        </>
-      )}
-    </StyledWrapper>
-  );
-};
-
-export default NavigationTopicAbout;

package/src/RelatedArticleList/RelatedArticleV2.tsx

@@ -1,101 +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 { Children, HTMLProps, ReactNode, useMemo, useState } from 'react';
-import BEMHelper from 'react-bem-helper';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { ButtonV2 } from '@ndla/button';
-import SafeLink from '@ndla/safelink';
-import { HeadingLevel } from '@ndla/typography';
-import SectionHeading from '../SectionHeading';
-import ContentTypeBadge from '../ContentTypeBadge';
-import { contentTypes } from '../model/ContentType';
-
-const classes = new BEMHelper({
-  name: 'related-articles',
-  prefix: 'c-',
-});
-
-interface RelatedArticleProps {
-  title: string;
-  introduction: string;
-  to: string;
-  linkInfo?: string;
-  target?: string;
-  type?: string;
-}
-
-export const RelatedArticleV2 = ({
-  title,
-  introduction,
-  to,
-  linkInfo = '',
-  target = '',
-  type = contentTypes.SUBJECT_MATERIAL,
-}: RelatedArticleProps) => {
-  return (
-    <article {...classes('item', type)}>
-      <h3 {...classes('title')}>
-        <ContentTypeBadge type={type} background size="small" />
-        <span {...classes('link-wrapper')}>
-          <SafeLink to={to} {...classes('link')} target={target} rel={linkInfo ? 'noopener noreferrer' : undefined}>
-            {title}
-          </SafeLink>
-        </span>
-      </h3>
-      <p {...classes('description')} dangerouslySetInnerHTML={{ __html: introduction }} />
-      {linkInfo && <p {...classes('link-info')}>{linkInfo}</p>}
-    </article>
-  );
-};
-
-const HeadingWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-
-interface Props extends HTMLProps<HTMLElement> {
-  children?: JSX.Element[];
-  articleCount?: number;
-  headingLevel?: HeadingLevel;
-  headingButtons?: ReactNode;
-}
-export const RelatedArticleListV2 = ({
-  children = [],
-  articleCount,
-  headingLevel = 'h3',
-  headingButtons,
-  ...rest
-}: Props) => {
-  const [expanded, setExpanded] = useState(false);
-  const { t } = useTranslation();
-  const childCount = useMemo(() => articleCount ?? Children.count(children), [children, articleCount]);
-  const childrenToShow = useMemo(
-    () => (childCount > 2 && !expanded ? children?.slice(0, 2) : children),
-    [childCount, children, expanded],
-  );
-
-  return (
-    <section {...classes('')} {...rest}>
-      <HeadingWrapper>
-        <SectionHeading headingLevel={headingLevel} className={classes('component-title').className}>
-          {t('related.title')}
-        </SectionHeading>
-        {headingButtons}
-      </HeadingWrapper>
-      <div {...classes('articles')}>{childrenToShow}</div>
-      {childCount > 2 ? (
-        <ButtonV2 onClick={() => setExpanded((p) => !p)} variant="outline">
-          {t(`related.show${expanded ? 'Less' : 'More'}`)}
-        </ButtonV2>
-      ) : null}
-    </section>
-  );
-};

package/src/Search/ToggleSearchButton.tsx

@@ -1,64 +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.
- *
- */
-
-import { forwardRef } from 'react';
-import { spacing, breakpoints, mq, misc, fonts, colors } from '@ndla/core';
-import { Search } from '@ndla/icons/common';
-import { ButtonProps, ButtonV2 } from '@ndla/button';
-import styled from '@emotion/styled';
-
-interface Props extends ButtonProps {
-  ndlaFilm?: boolean;
-}
-
-const StyledButton = styled(ButtonV2)`
-  border-radius: ${misc.borderRadius};
-  border: 0;
-  color: ${colors.brand.primary};
-  align-items: center;
-  background: transparent;
-
-  svg {
-    height: 24px;
-    width: 24px;
-  }
-
-  ${fonts.sizes('16px', '32px')};
-
-  &[data-film='true'] {
-    background: ${colors.ndlaFilm.filmColorBright};
-    color: ${colors.white};
-  }
-
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    padding: ${spacing.small} ${spacing.normal};
-    background: ${colors.brand.greyLighter};
-  }
-  &:hover,
-  &:focus,
-  &:active {
-    border: 0;
-  }
-`;
-
-const StyledSpan = styled.span`
-  margin-right: ${spacing.normal};
-  font-weight: ${fonts.weight.normal};
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    display: none;
-  }
-`;
-
-const ToggleSearchButton = forwardRef<HTMLButtonElement, Props>(({ children, ndlaFilm, ...rest }, ref) => (
-  <StyledButton data-film={ndlaFilm} type="button" ref={ref} {...rest}>
-    <StyledSpan>{children}</StyledSpan>
-    <Search />
-  </StyledButton>
-));
-
-export default ToggleSearchButton;

package/src/Subject/Subject.tsx

@@ -1,199 +0,0 @@
-import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import { breakpoints, colors, mq, spacing, spacingUnit } from '@ndla/core';
-import { HeadingLevel } from '@ndla/typography';
-import SectionHeading from '../SectionHeading';
-
-const SubjectContentWrapper = styled.div`
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin-bottom: 100px;
-  }
-`;
-
-const StyledBreadcrumb = styled.div`
-  display: none;
-  margin: ${spacing.medium} 0 0 0;
-  ${mq.range({ from: breakpoints.tablet })} {
-    display: block;
-    margin-left: ${spacingUnit * 3}px;
-  }
-`;
-
-interface StyledSubjectContentProps {
-  twoColumns: boolean;
-}
-const StyledSubjectContent = styled.div<StyledSubjectContentProps>`
-  display: block;
-  flex-flow: column;
-  margin-top: ${spacing.small};
-  ${mq.range({ from: breakpoints.tablet })} {
-    display: flex;
-    flex-flow: row;
-    margin-top: ${spacing.large};
-    > *:not(:only-child):last-child {
-      padding-left: ${spacingUnit * 3}px;
-    }
-  }
-
-  & > *:first-child {
-    margin-bottom: ${spacing.large};
-    ${mq.range({ from: breakpoints.tablet })} {
-      margin-right: 80px;
-    }
-  }
-
-  ${(p) =>
-    !p.twoColumns &&
-    css`
-      ${mq.range({ from: breakpoints.desktop })} {
-        > *:not(:only-child) {
-          max-width: 50%;
-        }
-      }
-      ${mq.range({ until: breakpoints.desktop })} {
-        flex-direction: column;
-      }
-      ${mq.range({ from: breakpoints.tablet, until: breakpoints.desktop })} {
-        > *:not(:only-child):last-child {
-          padding-left: $subject-margin;
-        }
-      }
-    `};
-
-  ${(p) =>
-    p.twoColumns &&
-    css`
-      flex-flow: column;
-      & > *:first-child {
-        ${mq.range({ from: breakpoints.tablet })} {
-          margin-right: 0;
-        }
-      }
-    `};
-`;
-export const SubjectContent = ({
-  children,
-  breadcrumb,
-  twoColumns = false,
-}: {
-  children: ReactNode;
-  breadcrumb: ReactNode;
-  twoColumns?: boolean;
-}) => (
-  <SubjectContentWrapper>
-    <StyledBreadcrumb>{breadcrumb}</StyledBreadcrumb>
-    <StyledSubjectContent twoColumns={twoColumns}>{children}</StyledSubjectContent>
-  </SubjectContentWrapper>
-);
-
-const StyledSecondaryContent = styled.div`
-  background: ${colors.brand.greyLightest};
-  padding: ${spacing.large} 0;
-  margin-top: ${spacing.large};
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding: ${spacingUnit * 3}px 0 ${spacing.large};
-    margin-bottom: 100px;
-    margin-top: 0;
-  }
-`;
-
-export const SubjectSecondaryContent = ({ children }: { children: ReactNode }) => (
-  <StyledSecondaryContent>{children}</StyledSecondaryContent>
-);
-
-const StyledChildContent = styled.div`
-  padding: 0 ${spacing.normal};
-`;
-
-export const SubjectChildContent = ({ children }: { children: ReactNode }) => (
-  <StyledChildContent>{children}</StyledChildContent>
-);
-
-export const SubjectTopics = ({ messages, children }: { messages: { heading: string }; children: ReactNode }) => (
-  <section>
-    <header>
-      <h1>{messages.heading}</h1>
-    </header>
-    <div>{children}</div>
-  </section>
-);
-
-const SidebarWrapper = styled.div`
-  display: block;
-  margin: 0 ${spacing.normal};
-
-  & > *:last-child {
-    margin-bottom: 0;
-  }
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    flex-basis: 390px;
-    flex-shrink: 0;
-    margin: 0px 0 0 0;
-  }
-`;
-
-export const SubjectSidebarWrapper = ({ children }: { children: ReactNode }) => (
-  <SidebarWrapper>{children}</SidebarWrapper>
-);
-
-interface StyledSubjectFlexWrapperProps {
-  noMargin: boolean;
-}
-const StyledSubjectFlexWrapper = styled.div<StyledSubjectFlexWrapperProps>`
-  display: flex;
-  flex-direction: column;
-  margin-bottom: ${(p) => !p.noMargin && spacing.large};
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    flex-direction: row;
-  }
-`;
-
-export const SubjectFlexWrapper = ({ children, noMargin = false }: { children: ReactNode; noMargin?: boolean }) => (
-  <StyledSubjectFlexWrapper noMargin={noMargin}>{children}</StyledSubjectFlexWrapper>
-);
-
-const StyledSubjectFlexChild = styled.div`
-  box-sizing: border-box;
-  padding: 0 ${spacing.small};
-  ${mq.range({ from: breakpoints.tablet })} {
-    flex-basis: 50%;
-    flex-grow: 1;
-    flex-direction: row;
-  }
-
-  &:last-child {
-    & > * {
-      ${mq.range({ until: breakpoints.tablet })} {
-        margin-bottom: 0;
-      }
-    }
-  }
-  & > * {
-    ${mq.range({ from: breakpoints.tablet })} {
-      margin-bottom: o;
-    }
-  }
-`;
-
-const StyledSectionHeading = styled(SectionHeading)`
-  margin: 0 0 ${spacing.small} 0;
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin: 0 0 ${spacing.normal} 0;
-  }
-`;
-
-interface SubjectSectionTitleProps {
-  headingLevel: HeadingLevel;
-  children: ReactNode;
-}
-
-export const SubjectSectionTitle = ({ children, headingLevel = 'h2' }: SubjectSectionTitleProps) => (
-  <StyledSectionHeading large headingLevel={headingLevel}>
-    {children}
-  </StyledSectionHeading>
-);

package/src/Subject/SubjectNewContent.tsx

@@ -1,111 +0,0 @@
-import styled from '@emotion/styled';
-import SafeLink from '@ndla/safelink';
-import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import { HeadingLevel } from '@ndla/typography';
-import ContentTypeBadge from '../ContentTypeBadge';
-import { SubjectSectionTitle } from './Subject';
-
-interface Props {
-  headingLevel: HeadingLevel;
-  heading: string;
-  content: {
-    name: string;
-    url: string;
-    formattedDate: string;
-    contentType: string;
-  }[];
-}
-
-const StyledSection = styled.section`
-  ${mq.range({ until: breakpoints.tablet })} {
-    margin-bottom: ${spacing.large};
-  }
-`;
-
-const StyledSubjectSectionTitle = styled(SubjectSectionTitle)`
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    margin-left: ${spacing.large} !important;
-  }
-`;
-
-const StyledUl = styled.ul`
-  margin: 0;
-  padding: 0;
-`;
-
-const StyledListItem = styled.li`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  &:last-child {
-    margin-bottom: 0;
-  }
-`;
-
-const LeftWrapper = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-
-  .c-icon {
-    width: 14px;
-    height: 14px;
-    margin-left: ${spacing.xsmall};
-    margin-right: ${spacing.xsmall};
-  }
-
-  .c-content-type-badge {
-    margin-top: 23px;
-    ${mq.range({ until: breakpoints.tabletWide })} {
-      display: none;
-    }
-  }
-`;
-
-const ContentLinkWrapper = styled.div`
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    padding-left: ${spacing.normal};
-  }
-  padding-bottom: ${spacing.small};
-`;
-
-const DateWrapper = styled.div`
-  color: ${colors.text.light};
-  ${fonts.sizes('14px', '18px')};
-  ${mq.range({ from: breakpoints.tablet })} {
-    ${fonts.sizes('16px', '20px')};
-  }
-`;
-
-const StyledSafeLink = styled(SafeLink)`
-  color: ${colors.brand.dark};
-  font-weight: 600;
-  ${fonts.sizes('16px', '20px')};
-  margin-bottom: ${spacing.xsmall};
-  ${mq.range({ from: breakpoints.tablet })} {
-    ${fonts.sizes('18px', '30px')};
-  }
-`;
-
-const SubjectNewContent = ({ heading, content, headingLevel }: Props) => (
-  <StyledSection>
-    <StyledSubjectSectionTitle headingLevel={headingLevel}>{heading}</StyledSubjectSectionTitle>
-    <nav>
-      <StyledUl>
-        {content.map((item, index) => (
-          <StyledListItem key={index}>
-            <LeftWrapper>
-              <ContentTypeBadge type={item.contentType} size="x-small" background border />
-              <ContentLinkWrapper>
-                <DateWrapper>{item.formattedDate}</DateWrapper>
-                <StyledSafeLink to={item.url}>{item.name}</StyledSafeLink>
-              </ContentLinkWrapper>
-            </LeftWrapper>
-          </StyledListItem>
-        ))}
-      </StyledUl>
-    </nav>
-  </StyledSection>
-);
-
-export default SubjectNewContent;

package/src/Subject/SubjectSocial.tsx

@@ -1,36 +0,0 @@
-import styled from '@emotion/styled';
-import { breakpoints, mq, spacing } from '@ndla/core';
-import { ReactNode } from 'react';
-import { HeadingLevel } from '@ndla/typography';
-import { SubjectSectionTitle } from './Subject';
-
-const StyledSubjectSocialContent = styled.div`
-  display: none;
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    display: flex;
-  }
-`;
-
-export const SubjectSocialContent = ({ children }: { children: ReactNode }) => (
-  <StyledSubjectSocialContent>{children}</StyledSubjectSocialContent>
-);
-
-const StyledSection = styled.section`
-  flex-basis: 50%;
-  &:nth-child(odd) {
-    margin-right: ${spacing.normal};
-  }
-`;
-
-interface SubjectSocialSectionProps {
-  children: ReactNode;
-  title?: string;
-  headingLevel: HeadingLevel;
-}
-
-export const SubjectSocialSection = ({ children, title = '', headingLevel }: SubjectSocialSectionProps) => (
-  <StyledSection>
-    <SubjectSectionTitle headingLevel={headingLevel}>{title}</SubjectSectionTitle>
-    {children}
-  </StyledSection>
-);

package/src/Translation/Translation.tsx

@@ -1,29 +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 } from 'react';
-import BEMHelper from 'react-bem-helper';
-
-const classes = new BEMHelper({
-  name: 'translation',
-  prefix: 'c-',
-});
-
-interface Props {
-  children: ReactNode;
-  index: number;
-}
-
-const Translation = ({ children, index }: Props) => (
-  <div {...classes('')}>
-    <div {...classes('index')}>{index}</div>
-    <dl {...classes('wrapper')}>{children}</dl>
-  </div>
-);
-
-export default Translation;