@ndla/ui 25.0.1 → 25.2.0

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;

package/src/Subject/SubjectShortcuts.tsx

@@ -1,13 +1,68 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { TransitionGroup } from 'react-transition-group';
-import BEMHelper from 'react-bem-helper';
+import styled from '@emotion/styled';
+import { colors, fonts, spacing } from '@ndla/core';
 import { Forward } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
 import { SubjectSectionTitle } from './Subject';
 import Fade from '../Animation/Fade';
 
-const classes = BEMHelper('c-subject-shortcuts');
+const SubjectShortcutsSection = styled.section`
+  margin-bottom: ${spacing.large};
+`;
+
+const StyledTransitionGroup = styled(TransitionGroup)`
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+
+const StyledListItem = styled.li`
+  display: block;
+  margin-right: 9px;
+  margin-bottom: 9px;
+
+  a {
+    display: block;
+    background: ${colors.brand.light};
+    box-shadow: none;
+    border-radius: 5px;
+    ${fonts.sizes('18px', '23px')};
+    font-weight: ${fonts.weight.semibold};
+    color: ${colors.brand.dark};
+    padding: 9px 20px;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: ${colors.brand.primary};
+      color: ${colors.white};
+    }
+  }
+`;
+
+const StyledButton = styled.button`
+  display: flex;
+  background: none;
+  border: 0;
+  align-items: center;
+  padding: 0;
+  color: ${colors.brand};
+  margin-top: ${spacing.normal};
+  cursor: pointer;
+
+  .c-icon {
+    width: 18px;
+    height: 18px;
+    margin-right: ${spacing.xsmall};
+  }
+
+  span {
+    ${fonts.sizes('14px', '18px')};
+  }
+`;
 
 interface Props {
   links: {
@@ -59,51 +114,36 @@ class SubjectShortcuts extends Component<Props, State> {
       const buttonText = isExpanded ? messages.showLess : messages.showMore;
 
       button = (
-        <button
+        <StyledButton
           type="button"
           aria-expanded={isExpanded}
           aria-controls={id}
-          onClick={() => this.handleOnExpand(!isExpanded)}
-          {...classes('expand-button')}>
+          onClick={() => this.handleOnExpand(!isExpanded)}>
           <Forward />
           <span>{buttonText}</span>
-        </button>
+        </StyledButton>
       );
 
       filteredLinks = this.props.links.filter((link, index) => index < this.state.visibleCount);
     }
     return (
-      <section {...classes('')}>
+      <SubjectShortcutsSection>
         <SubjectSectionTitle>{messages.heading}</SubjectSectionTitle>
         <nav id={id}>
-          <TransitionGroup className={classes('list').className} component="ul">
+          <StyledTransitionGroup component="ul">
             {filteredLinks.map((link) => (
               <Fade key={link.url}>
-                <li {...classes('item')}>
+                <StyledListItem>
                   <SafeLink to={link.url}>{link.text}</SafeLink>
-                </li>
+                </StyledListItem>
               </Fade>
             ))}
-          </TransitionGroup>
+          </StyledTransitionGroup>
         </nav>
         {button}
-      </section>
+      </SubjectShortcutsSection>
     );
   }
-  static propTypes = {
-    links: PropTypes.arrayOf(
-      PropTypes.shape({
-        url: PropTypes.string.isRequired,
-        text: PropTypes.string.isRequired,
-      }),
-    ).isRequired,
-    messages: PropTypes.shape({
-      heading: PropTypes.string.isRequired,
-      showMore: PropTypes.string.isRequired,
-      showLess: PropTypes.string.isRequired,
-    }).isRequired,
-    defaultVisableCount: PropTypes.number,
-  };
 
   static defaultProps = {
     defaultVisableCount,

package/src/Subject/SubjectSocial.tsx

@@ -1,30 +1,29 @@
+import styled from '@emotion/styled';
+import { breakpoints, mq, spacing } from '@ndla/core';
 import React, { ReactNode } from 'react';
-import PropTypes from 'prop-types';
-import BEMHelper from 'react-bem-helper';
 import { SubjectSectionTitle } from './Subject';
 
-const classes = BEMHelper('c-subject-social');
+const StyledSubjectSocialContent = styled.div`
+  display: none;
+  ${mq.range({ from: breakpoints.tabletWide })} {
+    display: flex;
+  }
+`;
 
 export const SubjectSocialContent = ({ children }: { children: ReactNode }) => (
-  <div {...classes('content')}>{children}</div>
+  <StyledSubjectSocialContent>{children}</StyledSubjectSocialContent>
 );
 
-SubjectSocialContent.propTypes = {
-  children: PropTypes.node.isRequired,
-};
+const StyledSection = styled.section`
+  flex-basis: 50%;
+  &:nth-child(odd) {
+    margin-right: ${spacing.normal};
+  }
+`;
 
-export const SubjectSocialSection = ({ children, title }: { children: ReactNode; title?: string }) => (
-  <section {...classes('section')}>
-    <SubjectSectionTitle className={classes('title').className}>{title}</SubjectSectionTitle>
+export const SubjectSocialSection = ({ children, title = '' }: { children: ReactNode; title?: string }) => (
+  <StyledSection>
+    <SubjectSectionTitle>{title}</SubjectSectionTitle>
     {children}
-  </section>
+  </StyledSection>
 );
-
-SubjectSocialSection.propTypes = {
-  children: PropTypes.node.isRequired,
-  title: PropTypes.string,
-};
-
-SubjectSocialSection.defaultProps = {
-  title: '',
-};

package/src/TagSelector/SuggestionInput.tsx

@@ -254,7 +254,7 @@ const SuggestionInput = ({
               ariaLabelActive={t('tagSelector.showAllTags')}
               ariaLabelInActive={t('tagSelector.hideAllTags')}
               active={expanded}
-              greyLighter
+              colorTheme="lighter"
               inactiveIcon={<ChevronDown />}
               activeIcon={<ChevronUp />}
               size="small"

package/src/Topic/Topic.tsx

@@ -339,6 +339,7 @@ const Topic = ({
               {onToggleShowContent && (
                 <StyledButtonWrapper invertedStyle={invertedStyle}>
                   <Button
+                    aria-expanded={!!showContent}
                     link
                     onClick={() => {
                       onToggleShowContent();