@ndla/ui 25.0.2 → 25.1.0

package/src/Subject/Subject.tsx

@@ -1,11 +1,76 @@
 import React, { ReactNode } 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, colors, mq, spacing, spacingUnit } from '@ndla/core';
 import SectionHeading from '../SectionHeading';
 
-const classes = BEMHelper('c-subject-content');
-
+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,
@@ -15,102 +80,116 @@ export const SubjectContent = ({
   breadcrumb: ReactNode;
   twoColumns?: boolean;
 }) => (
-  <div {...classes()}>
-    <div {...classes('breadcrumb')}>{breadcrumb}</div>
-    <div {...classes('content', { twoColumns })}>{children}</div>
-  </div>
+  <SubjectContentWrapper>
+    <StyledBreadcrumb>{breadcrumb}</StyledBreadcrumb>
+    <StyledSubjectContent twoColumns={twoColumns}>{children}</StyledSubjectContent>
+  </SubjectContentWrapper>
 );
 
-SubjectContent.propTypes = {
-  children: PropTypes.node.isRequired,
-  breadcrumb: PropTypes.node.isRequired,
-  twoColumns: PropTypes.bool,
-};
+const StyledSecondaryContent = styled.div`
+  background: ${colors.brand.greyLightest};
+  padding: ${spacing.large} 0;
+  margin-top: ${spacing.large};
 
-const secondaryContentClass = BEMHelper('c-subject-secondary-content');
+  ${mq.range({ from: breakpoints.tablet })} {
+    padding: ${spacingUnit * 3}px 0 ${spacing.large};
+    margin-bottom: 100px;
+    margin-top: 0;
+  }
+`;
 
 export const SubjectSecondaryContent = ({ children }: { children: ReactNode }) => (
-  <div {...secondaryContentClass()}>{children}</div>
+  <StyledSecondaryContent>{children}</StyledSecondaryContent>
 );
 
-SubjectSecondaryContent.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-const childContentClasses = BEMHelper('c-subject-child-content');
+const StyledChildContent = styled.div`
+  padding: 0 ${spacing.normal};
+`;
 
 export const SubjectChildContent = ({ children }: { children: ReactNode }) => (
-  <div {...childContentClasses()}>{children}</div>
+  <StyledChildContent>{children}</StyledChildContent>
 );
 
-SubjectChildContent.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-const topicClasses = BEMHelper('c-subject-topics');
-
 export const SubjectTopics = ({ messages, children }: { messages: { heading: string }; children: ReactNode }) => (
-  <section {...topicClasses()}>
-    <header {...topicClasses('header')}>
-      <h1 {...topicClasses('heading')}>{messages.heading}</h1>
+  <section>
+    <header>
+      <h1>{messages.heading}</h1>
     </header>
-    <div {...topicClasses('content')}>{children}</div>
+    <div>{children}</div>
   </section>
 );
 
-SubjectTopics.propTypes = {
-  messages: PropTypes.shape({
-    heading: PropTypes.string.isRequired,
-  }),
-  children: PropTypes.node.isRequired,
-};
+const SidebarWrapper = styled.div`
+  display: block;
+  margin: 0 ${spacing.normal};
+
+  & > *:last-child {
+    margin-bottom: 0;
+  }
 
-const sidebarClasses = BEMHelper('c-subject-sidebar-wrapper');
+  ${mq.range({ from: breakpoints.tablet })} {
+    flex-basis: 390px;
+    flex-shrink: 0;
+    margin: 0px 0 0 0;
+  }
+`;
 
 export const SubjectSidebarWrapper = ({ children }: { children: ReactNode }) => (
-  <div {...sidebarClasses()}>{children}</div>
+  <SidebarWrapper>{children}</SidebarWrapper>
 );
 
-SubjectSidebarWrapper.propTypes = {
-  children: PropTypes.node.isRequired,
-};
+interface StyledSubjectFlexWrapperProps {
+  noMargin: boolean;
+}
+const StyledSubjectFlexWrapper = styled.div<StyledSubjectFlexWrapperProps>`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: ${(p) => !p.noMargin && spacing.large};
 
-const subjectFlexWrapperClasses = BEMHelper('c-subject-flex');
+  ${mq.range({ from: breakpoints.tablet })} {
+    flex-direction: row;
+  }
+`;
 
 export const SubjectFlexWrapper = ({ children, noMargin = false }: { children: ReactNode; noMargin?: boolean }) => (
-  <div {...subjectFlexWrapperClasses('', { noMargin })}>{children}</div>
+  <StyledSubjectFlexWrapper noMargin={noMargin}>{children}</StyledSubjectFlexWrapper>
 );
 
-SubjectFlexWrapper.propTypes = {
-  children: PropTypes.node.isRequired,
-  noMargin: PropTypes.bool,
-};
+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;
+    }
+  }
+`;
 
 export const SubjectFlexChild = ({ children }: { children: ReactNode }) => (
-  <div className="c-subject-flex__child">{children}</div>
+  <StyledSubjectFlexChild>{children}</StyledSubjectFlexChild>
 );
 
-SubjectFlexChild.propTypes = {
-  children: PropTypes.node.isRequired,
-};
+const StyledSectionHeading = styled(SectionHeading)`
+  margin: 0 0 ${spacing.small} 0;
 
-export const SubjectSectionTitle = ({
-  children,
-  className = null,
-}: {
-  children: ReactNode;
-  className?: string | null;
-}) => (
-  <SectionHeading large className={`c-subject-section-title ${className}`}>
-    {children}
-  </SectionHeading>
-);
-
-SubjectSectionTitle.propTypes = {
-  children: PropTypes.string.isRequired,
-  className: PropTypes.string,
-};
+  ${mq.range({ from: breakpoints.tablet })} {
+    margin: 0 0 ${spacing.normal} 0;
+  }
+`;
 
-SubjectSectionTitle.defaultProps = {
-  className: null,
-};
+export const SubjectSectionTitle = ({ children }: { children: ReactNode }) => (
+  <StyledSectionHeading large>{children}</StyledSectionHeading>
+);

package/src/Subject/SubjectAbout.tsx

@@ -1,10 +1,9 @@
 import React, { ReactNode } from 'react';
-import PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import SectionHeading from '../SectionHeading';
 
-const classes = BEMHelper('c-subject-about');
-
 interface Props {
   fixedWidth?: boolean;
   wide?: boolean;
@@ -13,30 +12,101 @@ interface Props {
   description: string;
 }
 
+interface SubjectAboutSectionProps {
+  fixedWidth: boolean;
+  wide: boolean;
+}
+
+const SubjectAboutSection = styled.section<SubjectAboutSectionProps>`
+  margin-bottom: ${spacing.large};
+  max-width: ${(p) => p.fixedWidth && '350px'};
+
+  ${(p) =>
+    p.wide &&
+    css`
+      margin: 40px 0;
+      ${mq.range({ from: breakpoints.tablet })} {
+        display: flex;
+        margin: 80px 0;
+      }
+    `};
+  ${mq.range({ from: breakpoints.tablet })} {
+    border: 1px solid ${colors.brand.greyLight};
+  }
+`;
+
+const StyledSectionHeading = styled(SectionHeading)`
+  margin: 0 0 ${spacing.small} 0;
+  ${mq.range({ from: breakpoints.tablet })} {
+    display: none;
+  }
+`;
+
+interface MediaWrapperProps {
+  wide?: boolean;
+}
+
+const MediaWrapper = styled.div<MediaWrapperProps>`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  & > *,
+  img {
+    width: 100%;
+  }
+  ${mq.range({ from: breakpoints.tablet })} {
+    width: 50%;
+    min-width: 50%;
+  }
+  ${mq.range({ from: breakpoints.desktop })} {
+    width: 40%;
+    min-width: 40%;
+  }
+  ${(p) =>
+    p.wide &&
+    css`
+      margin: 40px 0;
+      ${mq.range({ from: breakpoints.tablet })} {
+        display: flex;
+        margin: 80px 0;
+      }
+    `};
+`;
+
+const StyledContent = styled.div`
+  padding: ${spacing.small} 0 0 0;
+  ${mq.range({ from: breakpoints.tablet })} {
+    padding: ${spacing.normal};
+  }
+`;
+
+const StyledMainHeading = styled.h1`
+  margin: 0 0 ${spacing.small} 0;
+  ${fonts.sizes('14px', '32px')};
+  text-transform: uppercase;
+  font-weight: ${fonts.weight.bold};
+  display: none;
+  ${mq.range({ from: breakpoints.tablet })} {
+    display: block;
+  }
+`;
+
+const StyledDescription = styled.p`
+  margin: 0;
+  ${fonts.sizes('16px', '26px')};
+`;
+
 const SubjectAbout = ({ fixedWidth = false, media, heading, description, wide = false }: Props) => (
-  <section {...classes('', { fixedWidth, wide })}>
-    <SectionHeading large className={classes('top-heading').className}>
-      {heading}
-    </SectionHeading>
-    <div {...classes('media-wrapper', { wide })}>{media}</div>
-    <div {...classes('content')}>
-      <h1 {...classes('main-heading')}>{heading}</h1>
-      <p {...classes('description')}>{description}</p>
-    </div>
-  </section>
+  <SubjectAboutSection wide={wide} fixedWidth={fixedWidth}>
+    <StyledSectionHeading large>{heading}</StyledSectionHeading>
+    <MediaWrapper>{media}</MediaWrapper>
+    <StyledContent>
+      <StyledMainHeading>{heading}</StyledMainHeading>
+      <StyledDescription>{description}</StyledDescription>
+    </StyledContent>
+  </SubjectAboutSection>
 );
 
-SubjectAbout.propTypes = {
-  fixedWidth: PropTypes.bool,
-  wide: PropTypes.bool,
-  media: PropTypes.node.isRequired,
-  heading: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
-};
-
-SubjectAbout.defaultProps = {
-  fixedWidth: false,
-  wide: false,
-};
-
 export default SubjectAbout;

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;