@ndla/ui 16.0.0 → 16.1.0

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

package/src/RadioButtonGroup/RadioButtonGroup.tsx

@@ -7,10 +7,9 @@
  */
 
 import React, { Fragment, Component, ChangeEvent } from 'react';
-import BEMHelper from 'react-bem-helper';
+import styled from '@emotion/styled';
 import { uuid } from '@ndla/util';
-
-const classes = BEMHelper('c-radio-button-group');
+import { spacing, fonts, colors } from '@ndla/core';
 
 interface Props {
   selected?: string;
@@ -28,6 +27,81 @@ interface State {
   selected: string;
 }
 
+const RadioButtonGroupWrapper = styled.div`
+  padding: ${spacing.small} 0;
+  font-family: ${fonts.sans};
+  display: flex;
+  align-items: center;
+`;
+
+const RadioButtonGroupLabelHeading = styled.h1`
+  ${fonts.sizes('16px', '20px')};
+  margin: 0 ${spacing.normal} 0 0;
+  font-weight: 600;
+`;
+
+const RadioButtonGroupLabel = styled.label`
+  ${fonts.sizes('16px', '28px')};
+  color: ${colors.brand.primary};
+  align-items: center;
+  display: inline-flex;
+  &:before {
+    content: '';
+    margin-right: ${spacing.small};
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+    border: 2px solid ${colors.brand.tertiary};
+    transition: 200ms border-color ease;
+  }
+  &:after {
+    content: '';
+    background: transparent;
+    width: 10px;
+    height: 10px;
+    border-radius: 100%;
+    position: absolute;
+    transform: translateX(5px) scale(0, 0);
+    transition: 200ms all ease;
+  }
+  &:not(:last-child) {
+    margin-right: ${spacing.medium};
+  }
+`;
+
+const RadioButtonGroupInput = styled.input`
+  opacity: 0;
+  position: absolute;
+  width: auto;
+  &:hover + ${RadioButtonGroupLabel} {
+    outline: 1px dotted #212121;
+    outline: -webkit-focus-ring-color auto 5px;
+    &:after {
+      transform: translateX(5px) scale(1, 1);
+      background: ${colors.brand.tertiary};
+    }
+  }
+  // emotion does not seem to support several selectors combined with targeting another emotion component
+  // so we duplicate the css for :hover and :focus.
+  &:focus + ${RadioButtonGroupLabel} {
+    outline: 1px dotted #212121;
+    outline: -webkit-focus-ring-color auto 5px;
+    &:after {
+      transform: translateX(5px) scale(1, 1);
+      background: ${colors.brand.tertiary};
+    }
+  }
+  &:checked + ${RadioButtonGroupLabel} {
+    &:before {
+      border-color: ${colors.brand.primary};
+    }
+    &:after {
+      transform: translateX(5px) scale(1, 1);
+      background: ${colors.brand.primary};
+    }
+  }
+`;
+
 class RadioButtonGroup extends Component<Props, State> {
   private readonly uuid?: string;
   constructor(props: Props) {
@@ -49,14 +123,13 @@ class RadioButtonGroup extends Component<Props, State> {
   render() {
     return (
       <section>
-        <div role="radiogroup" {...classes('wrapper')}>
-          {this.props.label && <h1 {...classes('label-heading')}>{this.props.label}</h1>}
+        <RadioButtonGroupWrapper role="radiogroup">
+          {this.props.label && <RadioButtonGroupLabelHeading>{this.props.label}</RadioButtonGroupLabelHeading>}
           {this.props.options.map((option) => {
             const id = this.uuid ? `${this.uuid}_${option.value}` : option.value;
             return (
               <Fragment key={option.value}>
-                <input
-                  {...classes('input')}
+                <RadioButtonGroupInput
                   disabled={option.disabled}
                   aria-checked={this.state.selected === option.value}
                   checked={this.state.selected === option.value}
@@ -66,13 +139,11 @@ class RadioButtonGroup extends Component<Props, State> {
                   name={id}
                   onChange={this.handleOnChange}
                 />
-                <label htmlFor={id} {...classes('label')}>
-                  {option.title}
-                </label>
+                <RadioButtonGroupLabel htmlFor={id}>{option.title}</RadioButtonGroupLabel>
               </Fragment>
             );
           })}
-        </div>
+        </RadioButtonGroupWrapper>
       </section>
     );
   }

package/src/main.scss

@@ -40,7 +40,4 @@
 @import 'FileList/component.file-list';
 @import 'SectionHeading/component.section-heading';
 @import 'AuthorInfo/component.author-info';
-@import 'RadioButtonGroup/component.radio-button-group';
-@import 'NDLAFilm/component.film-slideshow';
 @import 'NDLAFilm/component.film-movielist';
-@import 'NDLAFilm/component.film-moviesearch';

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

@@ -1,127 +0,0 @@
-.c-film-moviesearch {
-  margin: $spacing 0 $spacing--large;
-  &__topic-navigation {
-    margin: $spacing 0;
-    @include mq(tablet) {
-      display: flex;
-      align-items: flex-start;
-      padding: 0 $spacing;
-    }
-    ul {
-      list-style-type: none;
-      list-style-image: none;
-      display: flex;
-      align-items: flex-start;
-      flex-wrap: wrap;
-      padding: 0;
-      margin: $spacing--small 0;
-      @include mq(tablet) {
-        padding-left: $spacing;
-      }
-      li {
-        padding: 0;
-        width: 100%;
-        @include mq(tablet) {
-          width: 50%;
-        }
-        a {
-          color: #fff;
-          &:hover,
-          &:focus {
-            color: $brand-color--light;
-          }
-        }
-      }
-    }
-  }
-  &__dropdown-button {
-    border-radius: $border-radius;
-    @include font-size(22px, 26px);
-    border: 0;
-    text-transform: uppercase;
-    background: $film-color-bright;
-    color: #fff;
-    padding: $spacing--small $spacing--small * 1.5;
-    font-weight: $font-weight-semibold;
-    display: flex;
-    align-items: center;
-    text-align: left;
-    justify-content: space-between;
-    width: 100%;
-    letter-spacing: 0.05em;
-    @include mq(tablet) {
-      padding: $spacing--small $spacing;
-    }
-    div:first-child {
-      @include mq($until: tablet) {
-        display: flex;
-        flex-direction: column;
-        small {
-          padding: 0;
-        }
-      }
-    }
-    small {
-      text-transform: none;
-      padding-left: $spacing--small;
-      font-weight: normal;
-    }
-  }
-  &__dropdown-container {
-    position: relative;
-    margin: 0 0 $spacing;
-  }
-  &__dropdown-wrapper {
-    .c-film-moviesearch__dropdown-button {
-      border-radius: 0;
-      text-transform: none;
-      letter-spacing: 0;
-    }
-    display: flex;
-    flex-direction: column;
-    padding: $spacing--small 0;
-    background: #deebf6;
-    border-radius: $border-radius;
-    left: 0;
-    right: 0;
-    animation: zoomInSelect 200ms ease;
-    box-shadow: 0 0 30px rgba($black, 0.6);
-    position: absolute;
-    z-index: 9999;
-    button,
-    a {
-      color: $primary-color;
-      border: 0;
-      outline: 0;
-      text-align: left;
-      background: transparent;
-      padding: $spacing--small;
-      padding-left: $spacing;
-      font-weight: $font-weight-semibold;
-      text-decoration: none;
-      box-shadow: none;
-      transition: background 200ms ease;
-      &:hover,
-      &:focus {
-        color: $brand-color;
-        background: rgba(0, 0, 0, 0.2);
-      }
-    }
-  }
-}
-
-@keyframes zoomInSelect {
-  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);
-  }
-}