@ndla/ui 41.2.4 → 41.2.5

package/src/MultidisciplinarySubject/MultidisciplinarySubjectHeader.tsx

@@ -1,125 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled';
-import { useTranslation } from 'react-i18next';
-import { breakpoints, mq, fonts, spacing } from '@ndla/core';
-import SafeLink from '@ndla/safelink';
-import {
-  ClimateIllustration,
-  DemocracyClimateIllustration,
-  DemocracyIllustration,
-  PublicHealthClimateIllustration,
-  PublicHealthDemocracyClimateIllustration,
-  PublicHealthDemocracyIllustration,
-  PublicHealthIllustration,
-} from './Illustrations';
-import { HomeBreadcrumb, SimpleBreadcrumbItem } from '../Breadcrumb';
-
-const StyledWrapper = styled.div`
-  width: 100%;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 68.75%, #ffffff 100%),
-    linear-gradient(336.12deg, #efeedc 35.53%, #faf6f0 74.23%), #ddd8af;
-
-  display: flex;
-  justify-content: center;
-  align-items: stretch;
-`;
-
-const ContentWrapper = styled.div`
-  max-width: 1440px;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-`;
-
-const TextWrapper = styled.div`
-  padding: 26px 26px 0;
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.small};
-  width: 100%;
-  z-index: 2;
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding: 44px 44px 0;
-  }
-`;
-
-const Heading = styled.div`
-  ${fonts.sizes('18px', '24px')};
-  margin-bottom: 10px;
-`;
-
-const SubjectsWrapper = styled.div`
-  ${fonts.sizes('14px', '18px')};
-`;
-
-type IllustrationsWrapperProps = {
-  subjectCount?: number;
-};
-const IllustrationsWrapper = styled.div<IllustrationsWrapperProps>`
-  display: flex;
-  align-items: flex-end;
-  margin-bottom: 24px;
-`;
-
-type subjects = 'climate' | 'democracy' | 'publicHealth';
-
-type subjectLink = {
-  label: string;
-  url: string;
-};
-
-type Props = {
-  subjects?: subjects[];
-  subjectsLinks?: subjectLink[];
-  breadcrumbs?: SimpleBreadcrumbItem[];
-};
-
-const MultidisciplinarySubjectHeader = ({ subjects = [], subjectsLinks = [], breadcrumbs = [] }: Props) => {
-  const { t } = useTranslation();
-  const getIllustration = () => {
-    if (subjects.length === 3) {
-      return <PublicHealthDemocracyClimateIllustration />;
-    }
-    if (subjects.includes('publicHealth') && subjects.includes('democracy')) {
-      return <PublicHealthDemocracyIllustration />;
-    }
-    if (subjects.includes('climate') && subjects.includes('democracy')) {
-      return <DemocracyClimateIllustration />;
-    }
-    if (subjects.includes('climate') && subjects.includes('publicHealth')) {
-      return <PublicHealthClimateIllustration />;
-    }
-    return (
-      <>
-        {subjects.includes('publicHealth') && <PublicHealthIllustration />}
-        {subjects.includes('democracy') && <DemocracyIllustration />}
-        {subjects.includes('climate') && <ClimateIllustration />}
-      </>
-    );
-  };
-  return (
-    <StyledWrapper>
-      <ContentWrapper>
-        <TextWrapper>
-          <HomeBreadcrumb items={breadcrumbs} />
-          <Heading>{t('frontpageMultidisciplinarySubject.heading')}</Heading>
-          <SubjectsWrapper>
-            {t('multidisciplinarySubject.subjectsLinksDescription')}:{' '}
-            {subjectsLinks.map((subject, index) => {
-              return (
-                <span key={subject.label}>
-                  {index > 0 && (index < subjectsLinks.length - 1 ? ', ' : ' og ')}
-                  <SafeLink to={subject.url}>{subject.label}</SafeLink>
-                </span>
-              );
-            })}
-          </SubjectsWrapper>
-        </TextWrapper>
-        <IllustrationsWrapper subjectCount={subjects.length}>{getIllustration()}</IllustrationsWrapper>
-      </ContentWrapper>
-    </StyledWrapper>
-  );
-};
-
-export default MultidisciplinarySubjectHeader;

package/src/Portrait/Portrait.tsx

@@ -1,45 +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 styled from '@emotion/styled';
-import React from 'react';
-
-interface PortraitWrapperProps {
-  size: string;
-}
-const PortraitWrapper = styled.div<PortraitWrapperProps>`
-  width: ${(p) => p.size};
-  height: ${(p) => p.size};
-  span {
-    display: block;
-    border-radius: 50%;
-    background-color: rgba(0, 0, 0, 0.16);
-    background-size: cover;
-    background-position: center center;
-    width: ${(p) => p.size};
-    height: ${(p) => p.size};
-  }
-`;
-
-interface Props {
-  src: string;
-  alt: string;
-  className?: string;
-  modifier?: 'small' | 'large';
-}
-
-const Portrait = ({ src, alt, modifier, className }: Props) => {
-  const size = modifier === 'small' ? '4rem' : modifier === 'large' ? '10rem' : '7rem';
-  return (
-    <PortraitWrapper size={size} className={className}>
-      <span role="img" aria-label={alt} style={{ backgroundImage: `url(${src})` }} />
-    </PortraitWrapper>
-  );
-};
-
-export default Portrait;

package/src/Portrait/index.ts

@@ -1,11 +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 Portrait from './Portrait';
-
-export default Portrait;