@ndla/ui 15.1.4 → 16.1.0

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>
   );
 };

package/src/NDLAFilm/NavigationArrow.tsx

@@ -7,8 +7,10 @@
  */
 
 import React from 'react';
-import BEMHelper from 'react-bem-helper';
 import { ChevronRight, ChevronLeft } from '@ndla/icons/common';
+import styled from '@emotion/styled';
+import { breakpoints, colors, mq, spacing } from '@ndla/core';
+import { css } from '@emotion/core';
 
 interface Props {
   slideIndexTarget: number;
@@ -17,25 +19,89 @@ interface Props {
   rightArrow?: boolean;
 }
 
-const classes = new BEMHelper({
-  name: 'film-slideshow',
-  prefix: 'c-',
-});
+interface StyledNavigationArrowProps {
+  right?: boolean;
+}
+
+export const StyledNavigationArrow = styled.div<StyledNavigationArrowProps>`
+  opacity: 0;
+  transition: transform 800ms ease, opacity 800ms ease;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  position: absolute;
+  align-items: center;
+  z-index: 2;
+  height: 70vw;
+  ${mq.range({ from: breakpoints.tablet })} {
+    height: 60vw;
+  }
+  ${mq.range({ from: breakpoints.desktop })} {
+    height: 55vw;
+  }
+  ${mq.range({ from: breakpoints.wide })} {
+    height: 40vw;
+  }
+  ${mq.range({ from: breakpoints.ultraWide })} {
+    height: 36vw;
+  }
+  transform: translate(${spacing.xsmall}, 0);
+  ${(props) =>
+    props.right &&
+    `
+    right: 0;
+    transform: translate(${spacing.xsmall}, 0);
+  `}
+`;
+
+const NavigationArrowButton = styled.button`
+  padding: ${spacing.normal} 0;
+  border-radius: 4px;
+  outline: none;
+  background: transparent;
+  color: ${colors.white};
+  border: 0;
+  &:hover,
+  &:focus {
+    .c-icon {
+      opacity: 1;
+    }
+    background: rgba(0, 0, 0, 0.1);
+  }
+`;
+
+const chevronCss = css`
+  fill: ${colors.white};
+  width: 52px;
+  height: 52px;
+  ${mq.range({ from: breakpoints.desktop })} {
+    width: 78px;
+    height: 78px;
+  }
+  opacity: 0.7;
+  transition: transform 400ms ease, opacity 400ms ease;
+  ${NavigationArrowButton}:focus {
+    opacity: 1;
+  }
+  ${NavigationArrowButton}:hover {
+    opacity: 1;
+  }
+`;
 
 const NavigationArrow = ({ slideIndexTarget, gotoSlide, rightArrow }: Props) => {
   const Chevron = rightArrow ? ChevronRight : ChevronLeft;
 
   return (
-    <div {...classes('navigation-arrows', rightArrow ? 'right' : '')}>
-      <button
+    <StyledNavigationArrow right={rightArrow}>
+      <NavigationArrowButton
         type="button"
         tabIndex={-1}
         onClick={() => {
           gotoSlide(slideIndexTarget, true);
         }}>
-        <Chevron />
-      </button>
-    </div>
+        <Chevron css={chevronCss} />
+      </NavigationArrowButton>
+    </StyledNavigationArrow>
   );
 };
 

package/src/NDLAFilm/SlideshowIndicator.tsx

@@ -7,7 +7,8 @@
  */
 
 import React from 'react';
-import BEMHelper from 'react-bem-helper';
+import styled from '@emotion/styled';
+import { breakpoints, colors, mq, spacing } from '@ndla/core';
 import { MovieType } from './types';
 
 interface Props {
@@ -16,24 +17,65 @@ interface Props {
   gotoSlide: (indexTarget: number, useAnimation: boolean) => void;
 }
 
-const classes = new BEMHelper({
-  name: 'film-slideshow',
-  prefix: 'c-',
-});
+const SlideshowIndicatorWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: ${spacing.small} 0;
+  ${mq.range({ from: breakpoints.mobileWide })} {
+    margin: ${spacing.normal} 0;
+  }
+`;
+
+interface SlideshowIndicatorDotProps {
+  active?: boolean;
+}
+
+const SlideshowIndicatorDot = styled.button<SlideshowIndicatorDotProps>`
+  border: 0;
+  display: flex;
+  justify-content: center;
+  background: transparent;
+  span {
+    background: ${(props) => (props.active ? colors.white : colors.ndlaFilm.filmColorBright)};
+    transition: background 100ms ease;
+    height: 8px;
+    width: 8px;
+    ${mq.range({ from: breakpoints.mobileWide })} {
+      height: 10px;
+      width: 10px;
+    }
+    ${mq.range({ from: breakpoints.tablet })} {
+      height: ${spacing.small};
+      width: ${spacing.small};
+    }
+    border-radius: 100%;
+  }
+  padding: ${spacing.xsmall};
+  ${mq.range({ from: breakpoints.tablet })} {
+    padding: ${spacing.small};
+  }
+  &:hover,
+  &:focus {
+    span {
+      background: ${colors.white};
+    }
+  }
+`;
 
 const SlideshowIndicator = ({ slideshow, activeSlide, gotoSlide }: Props) => {
   return (
-    <div {...classes('indicator-wrapper')}>
-      {slideshow.map((slide, index) => (
-        <button
+    <SlideshowIndicatorWrapper>
+      {slideshow.map((_, index) => (
+        <SlideshowIndicatorDot
+          active={index === activeSlide}
           key={`indicator_${index}`}
           type="button"
-          {...classes('indicator-dot', index === activeSlide ? 'active' : '')}
           onClick={() => gotoSlide(index, true)}>
           <span />
-        </button>
+        </SlideshowIndicatorDot>
       ))}
-    </div>
+    </SlideshowIndicatorWrapper>
   );
 };
 

package/src/NDLAFilm/component.film-movielist.scss

@@ -7,52 +7,6 @@
 }
 
 .c-film-movielist {
-  margin-bottom: $spacing;
-  @include mq(tablet) {
-    margin-bottom: $spacing--large;
-  }
-  &__heading {
-    @include font-size(22px, 26px);
-    font-weight: $font-weight-semibold;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: #fff;
-    margin: $spacing--small 0;
-    small {
-      font-weight: normal;
-      padding-left: $spacing--small;
-      color: $brand-grey--light;
-    }
-  }
-  &__movie-listing {
-    display: flex;
-    flex-wrap: wrap;
-    margin: $spacing--small 0;
-    @include set-animations();
-    > div {
-      opacity: 0;
-      animation-fill-mode: forwards;
-      animation-name: fadeIn;
-      animation-duration: 300ms;
-    }
-  }
-  &__movie-item {
-    box-shadow: none;
-    padding: $spacing--small / 2;
-    @include mq(tablet) {
-      margin-bottom: $spacing--large;
-    }
-    @include mq($from: tablet) {
-      width: 25%;
-    }
-    @include mq($from: mobileWide, $until: tablet) {
-      width: 33.3%;
-    }
-    @include mq($until: mobileWide) {
-      width: 50%;
-    }
-  }
-
   &__carousel-wrapper-buttons {
     > div {
       @include set-animations();

package/src/NDLAFilm/filmStyles.ts

@@ -0,0 +1,33 @@
+import styled from '@emotion/styled';
+import { fonts, spacing, colors } from '@ndla/core';
+
+export const setAnimations = () => {
+  const styles: any = {};
+  for (let i = 1; i < 20; i++) {
+    styles[`> div:nth-child(${i + 1})`] = {
+      'animation-delay': `${i * 50}ms`,
+    };
+  }
+  return styles;
+};
+
+interface StyledHeadingProps {
+  marginLeft?: number;
+}
+
+export const StyledHeadingH1 = styled.h1<StyledHeadingProps>`
+  ${fonts.sizes('22px', '26px')};
+  font-weight: ${fonts.weight.semibold};
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: ${colors.white};
+  margin: ${spacing.small} 0;
+  margin-left: ${(props) => props.marginLeft && `${props.marginLeft}px`};
+  small {
+    font-weight: normal;
+    padding-left: ${spacing.small};
+    color: ${colors.brand.grey};
+  }
+`;
+
+export const StyledHeadingH2 = StyledHeadingH1.withComponent('h2');