@ndla/ui 16.0.0 → 16.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "16.0.0",
+  "version": "16.1.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "765457c9aae617b16a3a17269f4e9401f70057cc"
+  "gitHead": "d0828e0cc8cef62893e54aab44b37f6459438e9b"
 }

package/src/NDLAFilm/CategorySelect.tsx

@@ -1,14 +1,109 @@
 import React, { Component } from 'react';
-import BEMHelper from 'react-bem-helper';
 import FocusTrapReact from 'focus-trap-react';
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/core';
+import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { ChevronDown } from '@ndla/icons/common';
 import { WithTranslation, withTranslation } from 'react-i18next';
 import { MovieResourceType } from './types';
 
-const classes = new BEMHelper({
-  name: 'film-moviesearch',
-  prefix: 'c-',
-});
+const zoomInSelect = keyframes`
+  0% {
+    display: none;
+    opacity: 0;
+  }
+  1% {
+    display: flex;
+    transform: scale3d(0.95, 0.95, 0.95);
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+`;
+
+const DropdownContainer = styled.div`
+  position: relative;
+  margin: 0 0 ${spacing.normal};
+`;
+
+const DropdownButton = styled.button`
+  border-radius: 4px;
+  ${fonts.sizes('22px', '26px')};
+  border: 0;
+  text-transform: uppercase;
+  background: ${colors.ndlaFilm.filmColorBright};
+  color: ${colors.white};
+  padding: ${spacing.small} ${spacing.nsmall};
+  font-weight: ${fonts.weight.semibold};
+  display: flex;
+  align-items: center;
+  text-align: left;
+  justify-content: space-between;
+  width: 100%;
+  letter-spacing: 0.05em;
+  ${mq.range({ from: breakpoints.tablet })} {
+    padding: ${spacing.small} ${spacing.normal};
+  }
+  div:first-child {
+    ${mq.range({ until: breakpoints.tablet })} {
+      display: flex;
+      flex-direction: column;
+      small {
+        padding: 0;
+      }
+    }
+  }
+  small {
+    text-transform: none;
+    padding-left: ${spacing.small};
+    font-weight: normal;
+  }
+`;
+
+interface DropdownWrapperProps {
+  offsetDropdown: number;
+}
+
+const DropdownWrapper = styled.div<DropdownWrapperProps>`
+  top: -${(props) => props.offsetDropdown * 52 + 13}px;
+  ${DropdownButton} {
+    border-radius: 0;
+    text-transform: 0;
+    letter-spacing: 0;
+  }
+  display: flex;
+  flex-direction: column;
+  padding: $spacing--small 0;
+  background: ${colors.brand.lighter};
+  border-radius: 4px;
+  left: 0;
+  right: 0;
+  animation: ${zoomInSelect} 200ms ease;
+  box-shadow: 0 0 30px rgba(${colors.black}, 0.6);
+  position: absolute;
+  z-index: 9999;
+  button,
+  a {
+    color: ${colors.text.primary};
+    border: 0;
+    outline: 0;
+    text-align: left;
+    background: transparent;
+    padding: ${spacing.small};
+    padding-left: ${spacing.normal};
+    font-weight: ${fonts.weight.semibold};
+    text-decoration: none;
+    box-shadow: none;
+    transition: background 200ms ease;
+    &:hover,
+    &:focus {
+      color: ${colors.brand.primary};
+      background: rgba(0, 0, 0, 0.2);
+    }
+  }
+`;
 
 interface Props extends WithTranslation {
   resourceTypes: MovieResourceType[];
@@ -66,12 +161,11 @@ class CategorySelect extends Component<Props, State> {
       : 0;
 
     return (
-      <div {...classes('dropdown-container', '', 'u-12/12')}>
-        <button
+      <DropdownContainer className="u-12/12">
+        <DropdownButton
           aria-expanded={!resourceTypesIsOpen}
           aria-controls="selectCategory"
           type="button"
-          {...classes('dropdown-button', 'toggleButton')}
           tabIndex={resourceTypesIsOpen ? -1 : 0}
           onClick={this.openSelect}>
           <div>
@@ -83,7 +177,7 @@ class CategorySelect extends Component<Props, State> {
           <div>
             <ChevronDown className="c-icon--22" />
           </div>
-        </button>
+        </DropdownButton>
         {resourceTypesIsOpen && (
           <FocusTrapReact
             active={resourceTypesIsOpen}
@@ -94,32 +188,25 @@ class CategorySelect extends Component<Props, State> {
               clickOutsideDeactivates: true,
               escapeDeactivates: true,
             }}>
-            <div id="selectCategory" {...classes('dropdown-wrapper')} style={{ top: `-${offsetDropDown * 52 + 13}px` }}>
-              <button
-                aria-controls={ariaControlId}
-                type="button"
-                onClick={() => this.onSelect()}
-                {...classes('dropdown-button')}>
+            <DropdownWrapper id="selectCategory" offsetDropdown={offsetDropDown}>
+              <DropdownButton aria-controls={ariaControlId} type="button" onClick={() => this.onSelect()}>
                 <span>{t('ndlaFilm.search.categoryFromNdla')}</span>
-              </button>
+              </DropdownButton>
               {resourceTypes.map((resourceType) => (
-                <button
+                <DropdownButton
                   aria-controls={ariaControlId}
                   type="button"
                   ref={(el) => this.createRef(el, resourceType.id)}
                   onClick={() => this.onSelect(resourceType.id)}
-                  {...classes('dropdown-button', {
-                    selected: !!resourceTypeSelected && resourceTypeSelected.id === resourceType.id,
-                  })}
                   data-id={resourceType.id}
                   key={resourceType.id}>
                   <span>{resourceType.name}</span>
-                </button>
+                </DropdownButton>
               ))}
-            </div>
+            </DropdownWrapper>
           </FocusTrapReact>
         )}
-      </div>
+      </DropdownContainer>
     );
   }
 }

package/src/NDLAFilm/FilmMovieList.tsx

@@ -6,15 +6,12 @@
  */
 
 import React from 'react';
-import BEMHelper from 'react-bem-helper';
 import { Carousel, CalculatedCarouselProps } from '@ndla/carousel';
+import styled from '@emotion/styled';
+import { breakpoints, mq, spacing } from '@ndla/core';
 import FilmContentCard from './FilmContentCard';
 import { MovieResourceType, MovieType } from './types';
-
-const classes = new BEMHelper({
-  name: 'film-movielist',
-  prefix: 'c-',
-});
+import { StyledHeadingH1 } from './filmStyles';
 
 interface Props {
   movies: MovieType[];
@@ -26,6 +23,13 @@ interface Props {
   resizeThumbnailImages?: boolean;
 }
 
+const StyledSection = styled.section`
+  margin-bottom: ${spacing.normal};
+  ${mq.range({ from: breakpoints.tablet })} {
+    margin-bottom: ${spacing.large};
+  }
+`;
+
 const FilmMovieList = ({
   name,
   movies = [],
@@ -35,10 +39,8 @@ const FilmMovieList = ({
   autoSizedProps,
   resizeThumbnailImages,
 }: Props) => (
-  <section {...classes()}>
-    <h1 {...classes('heading')} style={{ marginLeft: `${autoSizedProps.margin}px` }}>
-      {name}
-    </h1>
+  <StyledSection>
+    <StyledHeadingH1 marginLeft={autoSizedProps.margin}>{name}</StyledHeadingH1>
     <Carousel
       disableScroll={false}
       slideBackwardsLabel={slideBackwardsLabel}
@@ -56,7 +58,7 @@ const FilmMovieList = ({
       ))}
       {...autoSizedProps}
     />
-  </section>
+  </StyledSection>
 );
 
 export default FilmMovieList;

package/src/NDLAFilm/FilmMovieSearch.tsx

@@ -7,22 +7,53 @@
  */
 
 import React from 'react';
-import BEMHelper from 'react-bem-helper';
 import SafeLink from '@ndla/safelink';
 import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { spacing, mq, breakpoints, colors } from '@ndla/core';
 import CategorySelect from './CategorySelect';
 import { MovieResourceType } from './types';
 import { OneColumn } from '..';
+import { StyledHeadingH2 } from './filmStyles';
 
-const classes = new BEMHelper({
-  name: 'film-moviesearch',
-  prefix: 'c-',
-});
+const FilmMovieSearchContainer = styled.div`
+  margin: ${spacing.normal} 0 ${spacing.large};
+`;
 
-const classesMovieList = new BEMHelper({
-  name: 'film-movielist',
-  prefix: 'c-',
-});
+const TopicNavigation = styled.div`
+  margin: ${spacing.normal} 0;
+  ${mq.range({ from: breakpoints.tablet })} {
+    display: flex;
+    align-items: flex-start;
+    padding: 0 ${spacing.normal};
+  }
+  ul {
+    list-style-type: none;
+    list-style-image: none;
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    padding: 0;
+    margin: ${spacing.small} 0;
+    ${mq.range({ from: breakpoints.tablet })} {
+      padding-left: ${spacing.normal};
+    }
+    li {
+      padding: 0;
+      width: 100%;
+      ${mq.range({ from: breakpoints.tablet })} {
+        width: 50%;
+      }
+      a {
+        color: #fff;
+        &:hover,
+        &:focus {
+          color: ${colors.brand.light};
+        }
+      }
+    }
+  }
+`;
 
 interface Props {
   topics?: { id: string; path: string; name: string }[];
@@ -41,10 +72,10 @@ const FilmMovieSearch = ({
 }: Props) => {
   const { t } = useTranslation();
   return (
-    <div {...classes('')}>
+    <FilmMovieSearchContainer>
       <OneColumn>
-        <div {...classes('topic-navigation')}>
-          <h2 {...classesMovieList('heading', '', 'u-12/12 u-4/12@tablet')}>{t('ndlaFilm.subjectsInMovies')}:</h2>
+        <TopicNavigation>
+          <StyledHeadingH2 className="u-12/12 u-4/12@tablet">{t('ndlaFilm.subjectsInMovies')}:</StyledHeadingH2>
           <nav className="u-12/12 u-8/12@tablet">
             <ul>
               {topics.map((topic) => (
@@ -56,7 +87,7 @@ const FilmMovieSearch = ({
               ))}
             </ul>
           </nav>
-        </div>
+        </TopicNavigation>
         <CategorySelect
           onChangeResourceType={onChangeResourceType}
           resourceTypes={resourceTypes}
@@ -64,7 +95,7 @@ const FilmMovieSearch = ({
           ariaControlId={ariaControlId}
         />
       </OneColumn>
-    </div>
+    </FilmMovieSearchContainer>
   );
 };
 

package/src/NDLAFilm/FilmSlideshow.tsx

@@ -8,11 +8,13 @@
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { SwipeEventData, useSwipeable } from 'react-swipeable';
-import BEMHelper from 'react-bem-helper';
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
+import { breakpoints, mq, spacing, spacingUnit, fonts, colors } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import { OneColumn } from '../Layout';
 import Spinner from '../Spinner';
-import NavigationArrow from './NavigationArrow';
+import NavigationArrow, { StyledNavigationArrow } from './NavigationArrow';
 import SlideshowIndicator from './SlideshowIndicator';
 import { MovieType } from './types';
 
@@ -23,17 +25,180 @@ interface Props {
   slideInterval?: number;
 }
 
-const classes = new BEMHelper({
-  name: 'film-slideshow',
-  prefix: 'c-',
-});
+const SlideLinkWrapper = styled.div`
+  margin: 0 auto;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-end;
+  position: absolute;
+  z-index: 2;
+  height: 100vw;
+  width: 100%;
+  ${mq.range({ from: breakpoints.mobileWide })} {
+    height: 100vw;
+  }
+  ${mq.range({ from: breakpoints.tablet })} {
+    height: 75vw;
+  }
+  ${mq.range({ from: breakpoints.desktop })} {
+    height: 55vw;
+  }
+  ${mq.range({ from: breakpoints.wide })} {
+    height: 40vw;
+  }
+  ${mq.range({ from: breakpoints.ultraWide })} {
+    height: 36vw;
+  }
+`;
+
+const itemWrapperCSS = css`
+  display: flex;
+  box-shadow: none;
+`;
+
+interface SlideshowItemProps {
+  fadeOver?: boolean;
+}
+
+const SlideshowItem = styled.div<SlideshowItemProps>`
+  width: 100vw;
+  height: 100vw;
+  /* aspect ratios */
+  ${mq.range({ from: breakpoints.mobileWide })} {
+    height: 100vw;
+  }
+  ${mq.range({ from: breakpoints.tablet })} {
+    height: 75vw;
+  }
+  ${mq.range({ from: breakpoints.desktop })} {
+    height: 55vw;
+  }
+  ${mq.range({ from: breakpoints.wide })} {
+    height: 40vw;
+  }
+  ${mq.range({ from: breakpoints.ultraWide })} {
+    height: 36vw;
+  }
+  background-color: '#222';
+  background-size: cover;
+  background-position-x: center;
+  background-position-y: center;
+  border: 0;
+  position: ${(props) => (props.fadeOver ? 'absolute' : 'relative')};
+  animation: ${(props) => props.fadeOver && 'fadeIn 400ms ease'};
+  z-index: ${(props) => props.fadeOver && 1};
+  &:before {
+    content: '';
+    opacity: 0.4;
+    background: #091a2a;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    position: absolute;
+    z-index: 1;
+  }
+`;
+
+interface SlideshowLinkProps {
+  out?: boolean;
+}
+
+const SlideshowLink = styled(SafeLink)<SlideshowLinkProps>`
+  display: flex;
+  box-shadow: none;
+  transition: all 400ms ease;
+  opacity: ${(props) => props.out && 0};
+  animation: ${(props) => !props.out && 'fadeInBottomFixed 600ms ease'};
+  ${mq.range({ from: breakpoints.mobileWide })} {
+    padding-bottom: ${spacing.medium};
+  }
+  ${mq.range({ from: breakpoints.tablet })} {
+    padding-bottom: ${spacing.large};
+  }
+  ${mq.range({ from: breakpoints.desktop })} {
+    padding-bottom: ${spacingUnit * 3}px;
+  }
+  &:hover {
+    h1 {
+      text-decoration: underline;
+    }
+  }
+`;
+
+const SlideshowWrapper = styled.section`
+  &:hover {
+    ${StyledNavigationArrow} {
+      opacity: 1;
+      transform: translate(0, 0);
+    }
+  }
+`;
+
+const SlideshowInfo = styled.div`
+  border: 0;
+  background: none;
+  background-color: rgba(3, 23, 43, 0.7);
+  border-radius: 4px;
+  padding: ${spacing.medium} ${spacing.medium} ${spacing.medium} ${spacing.normal};
+  margin: 0 -20px;
+  width: 100vw;
+  ${mq.range({ from: breakpoints.mobileWide })} {
+    margin: 0;
+    width: 100%;
+    padding: ${spacing.medium} ${spacingUnit * 2}px ${spacing.medium} ${spacing.normal};
+  }
+  h1 {
+    ${fonts.sizes('22px', '30px')};
+    color: ${colors.white};
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+    margin: 0;
+    font-weight: ${fonts.weight.semibold};
+    ${mq.range({ from: breakpoints.mobileWide })} {
+      margin: 0 0 ${spacing.small};
+      ${fonts.sizes('26px', '30px')};
+    }
+    ${mq.range({ from: breakpoints.tablet })} {
+      ${fonts.sizes('40px', '44px')};
+    }
+    ${mq.range({ from: breakpoints.desktop })} {
+      ${fonts.sizes('48px', '54px')};
+    }
+  }
+
+  p {
+    color: ${colors.white};
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    border-radius: 4px;
+    ${fonts.sizes('12px', '18px')};
+    ${mq.range({ from: breakpoints.mobileWide })} {
+      ${fonts.sizes('15px', '20px')};
+    }
+    ${mq.range({ from: breakpoints.tablet })} {
+      ${fonts.sizes('18px', '24px')};
+    }
+    ${mq.range({ from: breakpoints.wide })} {
+      ${fonts.sizes('20px', '32px')};
+    }
+  }
+`;
+
+const EmptySlideshow = styled.div`
+  background: rgba(255, 255, 255, 0.08);
+  margin-bottom: $spacing--large * 4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40vw;
+`;
 
 const defaultTransitionSwipeEnd = 'transform 600ms cubic-bezier(0, 0.76, 0.09, 1)';
 const defaultTransitionText = 'opacity 600ms ease';
 
 const renderSlideItem = (slide: MovieType) => (
-  <div
-    {...classes('item')}
+  <SlideshowItem
     key={slide.id}
     role="img"
     aria-label={(slide.metaImage && slide.metaImage.alt) || ''}
@@ -190,9 +355,9 @@ const FilmSlideshow = ({ autoSlide = false, slideshow = [], slideInterval = 5000
   if (slideshow.length === 0) {
     return (
       <div>
-        <div {...classes('slideshow')}>
+        <EmptySlideshow>
           <Spinner inverted />
-        </div>
+        </EmptySlideshow>
       </div>
     );
   }
@@ -208,22 +373,18 @@ const FilmSlideshow = ({ autoSlide = false, slideshow = [], slideInterval = 5000
   const backgroundImage = slideshow[activeSlide].metaImage;
 
   return (
-    <section {...classes('')} {...handlers}>
+    <SlideshowWrapper {...handlers}>
       <>
-        <div {...classes('slide-link-wrapper')}>
+        <SlideLinkWrapper>
           <OneColumn>
-            <SafeLink
-              to={slideshow[activeSlide].path}
-              {...classes('item-wrapper', 'text', {
-                out: !animationComplete,
-              })}>
-              <div {...classes('slide-info')} ref={slideText}>
+            <SlideshowLink to={slideshow[activeSlide].path} out={!animationComplete}>
+              <SlideshowInfo ref={slideText}>
                 <h1>{slideshow[activeSlide].title}</h1>
                 <p>{slideshow[activeSlide].metaDescription}</p>
-              </div>
-            </SafeLink>
+              </SlideshowInfo>
+            </SlideshowLink>
           </OneColumn>
-        </div>
+        </SlideLinkWrapper>
         <NavigationArrow
           slideIndexTarget={slideIndexTarget > 0 ? slideIndexTarget - 1 : slideshow.length - 1}
           gotoSlide={gotoSlide}
@@ -234,8 +395,8 @@ const FilmSlideshow = ({ autoSlide = false, slideshow = [], slideInterval = 5000
           rightArrow
         />
         {!animationComplete && (
-          <div
-            {...classes('item', 'fade-over')}
+          <SlideshowItem
+            fadeOver
             role="img"
             onAnimationEnd={onChangedSlide}
             style={{
@@ -245,7 +406,7 @@ const FilmSlideshow = ({ autoSlide = false, slideshow = [], slideInterval = 5000
         )}
         <div
           ref={slideRef}
-          {...classes('item-wrapper')}
+          css={itemWrapperCSS}
           onTransitionEnd={onTransitionEnd}
           style={{
             width: slideshowWidth,
@@ -257,7 +418,7 @@ const FilmSlideshow = ({ autoSlide = false, slideshow = [], slideInterval = 5000
         </div>
         <SlideshowIndicator slideshow={slideshow} activeSlide={activeSlide} gotoSlide={gotoSlide} />
       </>
-    </section>
+    </SlideshowWrapper>
   );
 };
 

package/src/NDLAFilm/MovieGrid.tsx

@@ -1,15 +1,37 @@
 import React from 'react';
-import BEMHelper from 'react-bem-helper';
-import { css } from '@emotion/core';
+import styled from '@emotion/styled';
+import { spacing } from '@ndla/core/src';
 import { CalculatedCarouselProps } from '@ndla/carousel';
 import { useTranslation } from 'react-i18next';
 import FilmContentCard from './FilmContentCard';
 import { MovieResourceType, MovieType } from './types';
+import { setAnimations, StyledHeadingH1 } from './filmStyles';
 
-const movieListClasses = new BEMHelper({
-  name: 'film-movielist',
-  prefix: 'c-',
-});
+interface MovieListingProps {
+  marginLeft?: number;
+}
+
+const MovieListing = styled.div<MovieListingProps>`
+  display: flex;
+  flex-wrap: wrap;
+  margin: ${spacing.small} 0;
+  margin-left: ${(props) => props.marginLeft && `${props.marginLeft}px`};
+  ${setAnimations()};
+  > div {
+    opacity: 0;
+    animation-fill-mode: forwards;
+    animation-name: fadeIn;
+    animation-duration: 300ms;
+  }
+`;
+
+interface LoadingPlaceholderProps {
+  height?: string;
+}
+
+const LoadingPlaceholder = styled.div<LoadingPlaceholderProps>`
+  height: ${(props) => props.height};
+`;
 
 interface Props {
   autoSizedProps: CalculatedCarouselProps;
@@ -33,30 +55,16 @@ const MovieGrid = ({
   const { t } = useTranslation();
   return (
     <section>
-      <h1
-        {...movieListClasses('heading')}
-        css={css`
-          margin-left: ${autoSizedProps.margin}px;
-        `}>
+      <StyledHeadingH1 marginLeft={autoSizedProps.margin}>
         {resourceTypeName && resourceTypeName.name}
         <small>
           {fetchingMoviesByType
             ? t('ndlaFilm.loadingMovies')
             : `${moviesByType.length} ${t('ndlaFilm.movieMatchInCategory')}`}
         </small>
-      </h1>
-      <div
-        {...movieListClasses('movie-listing')}
-        css={css`
-          margin-left: ${autoSizedProps.margin}px;
-        `}>
-        {fetchingMoviesByType && (
-          <div
-            css={css`
-              height: ${loadingPlaceholderHeight};
-            `}
-          />
-        )}
+      </StyledHeadingH1>
+      <MovieListing marginLeft={autoSizedProps.margin}>
+        {fetchingMoviesByType && <LoadingPlaceholder height={loadingPlaceholderHeight} />}
         {!fetchingMoviesByType &&
           moviesByType.map((movie) => (
             <FilmContentCard
@@ -68,7 +76,7 @@ const MovieGrid = ({
               resizeThumbnailImages={resizeThumbnailImages}
             />
           ))}
-      </div>
+      </MovieListing>
     </section>
   );
 };