@ndla/ui 25.0.0 → 25.1.0

package/src/Subject/SubjectArchive.tsx

@@ -1,13 +1,11 @@
-import React, { ReactNode, Component, createRef, Fragment, RefObject } from 'react';
-import PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
+import React, { ReactNode, Component, createRef, RefObject } from 'react';
+import styled from '@emotion/styled';
 import { Forward } from '@ndla/icons/common';
 import { Cross } from '@ndla/icons/action';
+import { breakpoints, colors, fonts, mq, spacing, utils } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import SectionHeading from '../SectionHeading';
 
-const classes = BEMHelper('c-subject-archive');
-
 interface Props {
   featuringArticle: {
     media: ReactNode;
@@ -26,6 +24,109 @@ interface State {
   minHeight: number | null;
 }
 
+interface SubjectArchiveSectionProps {
+  fixedWidth: boolean;
+  animate: boolean;
+}
+
+const ArchiveWrapper = styled.div`
+  display: flex;
+  flex-flow: column;
+`;
+
+const StyledSectionHeading = styled(SectionHeading)`
+  margin: 0 0 ${spacing.small} 0;
+  ${mq.range({ from: breakpoints.tablet })} {
+    ${utils.visuallyHidden};
+  }
+`;
+
+const ArchiveButon = styled.button`
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  margin: ${spacing.small} 0 0 0;
+  padding: ${spacing.xsmall} 0;
+  border: 0;
+  color: ${colors.brand.primary};
+  ${fonts.sizes('16px', '24px')};
+  font-weight: ${fonts.weight.semibold};
+  ${mq.range({ from: breakpoints.tablet })} {
+    margin: ${spacing.xsmall} ${spacing.normal} ${spacing.normal};
+  }
+  c-icon {
+    width: 18px;
+    height: 18px;
+    margin-right: ${spacing.small};
+  }
+`;
+
+interface StyledNavProps {
+  animate: boolean;
+}
+const StyledNav = styled.nav<StyledNavProps>`
+  padding: 0;
+  animation: ${(p) => p.animate && 'fadeIn 0.3s ease-in-out'};
+  ${mq.range({ from: breakpoints.tablet })} {
+    padding: ${spacing.large} ${spacing.large} 0 ${spacing.large};
+  }
+`;
+
+const StyledArchiveList = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    ${fonts.sizes('16px', '24px')};
+    margin-bottom: ${spacing.small};
+  }
+`;
+
+const MediaWrapper = styled.div`
+  width: 100%;
+  & > * {
+    width: 100%;
+  }
+`;
+
+const StyledContent = styled.div`
+  padding: ${spacing.small} 0 0 0;
+  ${mq.range({ from: breakpoints.tablet })} {
+    padding: ${spacing.normal};
+  }
+`;
+
+const StyledHeading = styled.h1`
+  ${fonts.sizes('20px', '32px')};
+  margin: 0 0 ${spacing.small} 0;
+  flex: 0 0 auto;
+`;
+
+const StyledDescription = styled.p`
+  margin: 0;
+  ${fonts.sizes('16px', '26px')}
+`;
+
+const SubjectArchiveSection = styled.section<SubjectArchiveSectionProps>`
+  margin-bottom: ${spacing.large};
+  display: flex;
+  flex-direction: column;
+  max-width: ${(p) => p.fixedWidth && '350px'};
+  animation: ${(p) => p.animate && 'fadeIn 0.3s ease-in-out'};
+
+  ${mq.range({ from: breakpoints.tablet })} {
+    border: 1px solid ${colors.brand.greyLight};
+  }
+`;
+
+interface FeaturingSectionProps {
+  animate: boolean;
+}
+const FeaturingSection = styled.section<FeaturingSectionProps>`
+  animation: ${(p) => p.animate && 'fadeIn 0.3s ease-in-out'};
+`;
+
 class SubjectArchive extends Component<Props, State> {
   wrapperRef: RefObject<HTMLElement> | null = createRef<HTMLElement>();
   constructor(props: Props) {
@@ -59,81 +160,51 @@ class SubjectArchive extends Component<Props, State> {
     const archiveId = 'subject-archive';
 
     const section = this.state.archiveOpen ? (
-      <nav id={archiveId} {...classes('archive')}>
-        <ul {...classes('archive-articles')}>
+      <StyledNav id={archiveId} animate={!!this.state.minHeight}>
+        <StyledArchiveList>
           {archiveArticles.map((article) => (
             <li key={article.heading}>
               <SafeLink to={article.url}>{article.heading}</SafeLink>
             </li>
           ))}
-        </ul>
-      </nav>
+        </StyledArchiveList>
+      </StyledNav>
     ) : (
-      <section {...classes('featuring')}>
-        <div {...classes('media-wrapper')}>{featuringArticle.media}</div>
-        <div {...classes('content')}>
-          <h1 {...classes('heading')}>
+      <FeaturingSection animate={!!this.state.minHeight}>
+        <MediaWrapper>{featuringArticle.media}</MediaWrapper>
+        <StyledContent>
+          <StyledHeading>
             <SafeLink to={featuringArticle.url}>{featuringArticle.heading}</SafeLink>
-          </h1>
-          <p {...classes('description')}>{featuringArticle.description}</p>
-        </div>
-      </section>
+          </StyledHeading>
+          <StyledDescription>{featuringArticle.description}</StyledDescription>
+        </StyledContent>
+      </FeaturingSection>
     );
 
-    const subClasses = Object.entries({ fixedWidth, animate: !!this.state.minHeight })
-      .filter(([_, include]) => include)
-      .map(([className, _]) => className);
-
     return (
-      <section {...classes('', subClasses)} ref={this.wrapperRef}>
-        <SectionHeading large className={classes('section-heading').className}>
-          {sectionHeading}
-        </SectionHeading>
-        <div {...classes('wrapper')}>
+      <SubjectArchiveSection animate={!!this.state.minHeight} fixedWidth={fixedWidth} ref={this.wrapperRef}>
+        <StyledSectionHeading large>{sectionHeading}</StyledSectionHeading>
+        <ArchiveWrapper>
           {section}
-          <button
+          <ArchiveButon
             type="button"
             aria-expanded={this.state.archiveOpen}
             aria-controls={archiveId}
-            className={classes('archive-button').className}
             onClick={this.handleToggleArchive}>
             {this.state.archiveOpen ? (
-              <Fragment>
+              <>
                 <Cross /> <span>{messages.close}</span>
-              </Fragment>
+              </>
             ) : (
-              <Fragment>
+              <>
                 <Forward /> <span>{messages.archive}</span>
-              </Fragment>
+              </>
             )}
-          </button>
-        </div>
-      </section>
+          </ArchiveButon>
+        </ArchiveWrapper>
+      </SubjectArchiveSection>
     );
   }
-  static propTypes = {
-    featuringArticle: PropTypes.shape({
-      media: PropTypes.node.isRequired,
-      heading: PropTypes.string.isRequired,
-      description: PropTypes.string.isRequired,
-      url: PropTypes.string.isRequired,
-    }).isRequired,
-    archiveArticles: PropTypes.arrayOf(
-      PropTypes.shape({
-        url: PropTypes.string.isRequired,
-        heading: PropTypes.string.isRequired,
-      }),
-    ).isRequired,
-    sectionHeading: PropTypes.string.isRequired,
-    fixedWidth: PropTypes.bool,
-    messages: PropTypes.shape({
-      archive: PropTypes.string.isRequired,
-    }),
-  };
-
-  static defaultProps = {
-    fixedWidth: false,
-  };
 }
 
 export default SubjectArchive;

package/src/Subject/SubjectCarousel.tsx

@@ -1,15 +1,13 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
 import { Carousel, CarouselAutosize } from '@ndla/carousel';
 import { withTranslation, WithTranslation } from 'react-i18next';
-import { spacingUnit } from '@ndla/core';
+import { breakpoints, mq, spacing, spacingUnit } from '@ndla/core';
 import { SafeLinkProps } from '@ndla/safelink';
 import { ContentCard } from '../index';
 import { SubjectSectionTitle } from './Subject';
 
-const subjectCarouselClasses = BEMHelper('c-subject-carousel');
-
 interface Props {
   subjects?: {
     id: string;
@@ -24,11 +22,42 @@ interface Props {
   wideScreen?: boolean;
 }
 
-const getSubclasses = (obj: Record<string, boolean>): string[] => {
-  return Object.entries(obj)
-    .filter(([_, value]) => !!value)
-    .map(([className, _]) => className);
-};
+interface StyledSectionProps {
+  narrowScreen: boolean;
+  wideScreen: boolean;
+}
+
+const StyledSection = styled.section<StyledSectionProps>`
+  margin-bottom: ${spacing.large};
+  ${mq.range({ from: breakpoints.tablet })} {
+    margin-bottom: 100px;
+  }
+  ${(p) =>
+    p.narrowScreen &&
+    css`
+      display: none;
+      ${mq.range({ from: breakpoints.tablet })} {
+        display: block;
+      }
+    `};
+  ${(p) =>
+    p.narrowScreen &&
+    css`
+      ${mq.range({ from: breakpoints.tablet })} {
+        display: block;
+      }
+    `};
+`;
+
+const StyledSubjectSectionTitle = styled(SubjectSectionTitle)`
+  ${mq.range({ from: breakpoints.tablet })} {
+    margin-left: ${spacing.medium} !important;
+  }
+
+  ${mq.range({ from: breakpoints.desktop })} {
+    margin-left: ${spacingUnit * 3}px !important;
+  }
+`;
 
 const SubjectCarousel = ({
   subjects = [],
@@ -37,7 +66,7 @@ const SubjectCarousel = ({
   wideScreen = false,
   t,
 }: Props & WithTranslation) => (
-  <section {...subjectCarouselClasses('', getSubclasses({ narrowScreen, wideScreen }))}>
+  <StyledSection narrowScreen={narrowScreen} wideScreen={wideScreen}>
     <CarouselAutosize
       breakpoints={[
         {
@@ -99,7 +128,7 @@ const SubjectCarousel = ({
       itemsLength={subjects?.length ?? 0}>
       {(autoSizedProps) => (
         <>
-          <SubjectSectionTitle {...subjectCarouselClasses('title')}>{title}</SubjectSectionTitle>
+          <StyledSubjectSectionTitle>{title}</StyledSubjectSectionTitle>
           <Carousel
             {...autoSizedProps}
             disableScroll={(autoSizedProps?.columnsPrSlide ?? 0) >= subjects.length}
@@ -122,30 +151,7 @@ const SubjectCarousel = ({
         </>
       )}
     </CarouselAutosize>
-  </section>
+  </StyledSection>
 );
 
-SubjectCarousel.propTypes = {
-  subjects: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      title: PropTypes.string.isRequired,
-      type: PropTypes.string,
-      text: PropTypes.string.isRequired,
-      image: PropTypes.string,
-      toLinkProps: PropTypes.func.isRequired,
-    }).isRequired,
-  ).isRequired,
-  title: PropTypes.string,
-  narrowScreen: PropTypes.bool,
-  wideScreen: PropTypes.bool,
-};
-
-SubjectCarousel.defaultProps = {
-  subjects: [],
-  title: '',
-  narrowScreen: false,
-  wideScreen: false,
-};
-
 export default withTranslation()(SubjectCarousel);

package/src/Subject/SubjectHeader.tsx

@@ -1,13 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
-
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
 import { breakpoints } from '@ndla/util';
-
+import { colors, fonts, mq, spacing, spacingUnit } from '@ndla/core';
 import OneColumn from '../Layout/OneColumn';
 
-const classes = BEMHelper('c-subject-header');
-
 type Types = 'mobile' | 'tablet' | 'desktop' | 'wide';
 
 interface Props {
@@ -18,36 +15,80 @@ interface Props {
   heading: string;
 }
 
-const SubjectHeader = ({ images, heading }: Props) => (
-  <header {...classes()}>
-    {images &&
-      images.map((image) =>
-        image.types.map((type) => (
-          <div
-            key={`${image.url}${type}`}
-            {...classes('background', type)}
-            style={{ backgroundImage: `url(${image.url})` }}
-          />
-        )),
-      )}
-    <OneColumn noPadding>
-      <h1 {...classes('heading')}>{heading}</h1>
-    </OneColumn>
-  </header>
-);
+const StyledHeader = styled.header`
+  width: 100%;
+  position: relative;
+  min-height: 180px;
+  display: flex;
+  justify-content: flex-start;
+  background: ${colors.brand.primary};
 
-SubjectHeader.propTypes = {
-  images: PropTypes.arrayOf(
-    PropTypes.shape({
-      url: PropTypes.string.isRequired,
-      types: PropTypes.arrayOf(PropTypes.oneOf(Object.keys(breakpoints))).isRequired,
-    }),
-  ),
-  heading: PropTypes.string.isRequired,
-};
+  ${mq.range({ from: breakpoints.tablet })} {
+    height: 320px;
+    align-items: center;
+  }
+`;
 
-SubjectHeader.defaultProps = {
-  images: null,
+const typeMap: Record<Types, { from?: string; until?: string }> = {
+  mobile: { from: breakpoints.mobile, until: breakpoints.tablet },
+  tablet: { from: breakpoints.tablet, until: breakpoints.desktop },
+  desktop: { from: breakpoints.desktop, until: breakpoints.wide },
+  wide: { from: breakpoints.wide },
 };
+interface StyledBackgroundProps {
+  type: Types;
+  imageUrl: string;
+}
+
+const StyledBackground = styled.div<StyledBackgroundProps>`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center right;
+  opacity: 0.5;
+  background-image: url(${(p) => p.imageUrl});
+  ${(p) =>
+    p.type &&
+    css`
+      display: none;
+      ${mq.range(typeMap[p.type])} {
+        display: block;
+      }
+    `};
+`;
+
+const StyledHeading = styled.h1`
+  ${fonts.sizes('24px', '28px')};
+  color: ${colors.white};
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+  margin: ${spacing.medium} 0 ${spacing.normal} 0;
+  font-weight: ${fonts.weight.bold};
+  padding: 0 ${spacing.normal};
+
+  ${mq.range({ from: breakpoints.tablet })} {
+    margin: 0;
+    ${fonts.sizes('40px', '40px')};
+    padding: 0 0 0 ${spacingUnit * 3}px;
+  }
+  ${mq.range({ from: breakpoints.desktop })} {
+    margin: 0;
+    ${fonts.sizes('52px', '52px')};
+    padding: 0 0 0 ${spacingUnit * 3}px;
+  }
+`;
+
+const SubjectHeader = ({ images = [], heading }: Props) => (
+  <StyledHeader>
+    {images?.map((image) =>
+      image.types.map((type) => <StyledBackground key={`${image.url}${type}`} imageUrl={image.url} type={type} />),
+    )}
+    <OneColumn noPadding>
+      <StyledHeading>{heading}</StyledHeading>
+    </OneColumn>
+  </StyledHeader>
+);
 
 export default SubjectHeader;

package/src/Subject/SubjectLinks.tsx

@@ -1,11 +1,23 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
+import styled from '@emotion/styled';
+import { spacing } from '@ndla/core';
 import SafeLink, { SafeLinkProps } from '@ndla/safelink';
 
 import { SubjectSectionTitle } from './Subject';
 
-const classes = BEMHelper('c-subject-links');
+const SubjectLinksSection = styled.section`
+  margin-bottom: ${spacing.large};
+`;
+
+const StyledSubjectSectionTitle = styled(SubjectSectionTitle)`
+  margin: 0 0 ${spacing.small} 0;
+`;
+
+const SubjectLinksList = styled.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+`;
 
 interface Props {
   links: {
@@ -16,28 +28,18 @@ interface Props {
 }
 
 const SubjectLinks = ({ links, heading }: Props) => (
-  <section {...classes()}>
-    <SubjectSectionTitle className={classes('heading').className}>{heading}</SubjectSectionTitle>
+  <SubjectLinksSection>
+    <StyledSubjectSectionTitle>{heading}</StyledSubjectSectionTitle>
     <nav>
-      <ul {...classes('list')}>
+      <SubjectLinksList>
         {links.map((link) => (
-          <li key={link.toLinkProps().to.toString()} {...classes('item')}>
+          <li key={link.toLinkProps().to.toString()}>
             <SafeLink {...link.toLinkProps()}>{link.text}</SafeLink>
           </li>
         ))}
-      </ul>
+      </SubjectLinksList>
     </nav>
-  </section>
+  </SubjectLinksSection>
 );
 
-SubjectLinks.propTypes = {
-  links: PropTypes.arrayOf(
-    PropTypes.shape({
-      toLinkProps: PropTypes.func.isRequired,
-      text: PropTypes.string.isRequired,
-    }),
-  ),
-  heading: PropTypes.string.isRequired,
-};
-
 export default SubjectLinks;

package/src/Subject/SubjectNewContent.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
+import styled from '@emotion/styled';
 import SafeLink from '@ndla/safelink';
+import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import ContentTypeBadge from '../ContentTypeBadge';
 import { SubjectSectionTitle } from './Subject';
 
-const classes = BEMHelper('c-subject-new-content');
-
 interface Props {
   heading: string;
   content: {
@@ -17,39 +15,96 @@ interface Props {
   }[];
 }
 
+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 }: Props) => (
-  <section {...classes()}>
-    <SubjectSectionTitle className={classes('heading').className}>{heading}</SubjectSectionTitle>
-    <nav {...classes('content')}>
-      <ul {...classes('list')}>
+  <StyledSection>
+    <StyledSubjectSectionTitle>{heading}</StyledSubjectSectionTitle>
+    <nav>
+      <StyledUl>
         {content.map((item) => (
-          <li {...classes('item')} key={item.url}>
-            <div {...classes('left-wrapper')}>
+          <StyledListItem>
+            <LeftWrapper>
               <ContentTypeBadge type={item.contentType} size="x-small" background border />
-              <div {...classes('content-link')}>
-                <div {...classes('date')}>{item.formattedDate}</div>
-                <SafeLink to={item.url} {...classes('link')}>
-                  {item.name}
-                </SafeLink>
-              </div>
-            </div>
-          </li>
+              <ContentLinkWrapper>
+                <DateWrapper>{item.formattedDate}</DateWrapper>
+                <StyledSafeLink to={item.url}>{item.name}</StyledSafeLink>
+              </ContentLinkWrapper>
+            </LeftWrapper>
+          </StyledListItem>
         ))}
-      </ul>
+      </StyledUl>
     </nav>
-  </section>
+  </StyledSection>
 );
 
-SubjectNewContent.propTypes = {
-  heading: PropTypes.string.isRequired,
-  content: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      url: PropTypes.string.isRequired,
-      formattedDate: PropTypes.string.isRequired,
-      contentType: PropTypes.string.isRequired,
-    }),
-  ).isRequired,
-};
-
 export default SubjectNewContent;