@ndla/ui 15.2.0 → 16.1.1

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/Resource/resourceComponents.tsx

@@ -17,10 +17,8 @@ export interface ResourceImageProps {
   src: string;
 }
 
-export const ResourceTitle = styled.h2`
-  ${fonts.sizes(18)};
+export const ResourceTitle = styled.h3`
   min-width: 50px;
-  font-weight: ${fonts.weight.bold};
   margin: 0;
   flex: 1;
   overflow: hidden;

package/src/TreeStructure/TreeStructure.tsx

@@ -8,7 +8,7 @@
 
 import React, { useEffect, useState, useRef, useMemo } from 'react';
 import { uuid } from '@ndla/util';
-import Button from '@ndla/button';
+import { AddButton } from '@ndla/button';
 import Tooltip from '@ndla/tooltip';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
@@ -118,9 +118,6 @@ const TreeStructure = ({
     setFocusedFolderId(id);
   };
 
-  const disableAddFolderButton =
-    markedFolderId === undefined || getPathOfFolder(data, markedFolderId).length >= MAX_LEVEL_FOR_FOLDERS;
-
   return (
     <div
       ref={treestructureRef}
@@ -163,17 +160,14 @@ const TreeStructure = ({
             tooltip={t('myNdla.newFolderUnder', {
               folderName: getFolderName(data, markedFolderId),
             })}>
-            <Button
-              size="small"
-              light
-              disabled={disableAddFolderButton}
+            <AddButton
+              aria-label={t('myNdla.newFolder')}
               onClick={() => {
                 const paths = getPathOfFolder(data, markedFolderId || '');
                 const idPaths = getIdPathsOfFolder(data, markedFolderId || '');
                 setNewFolder({ idPaths, parentId: paths[paths.length - 1] });
-              }}>
-              {t('myNdla.newFolder')}
-            </Button>
+              }}
+            />
           </Tooltip>
         </AddFolderWrapper>
       )}

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

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

@@ -1,258 +0,0 @@
-.c-film-slideshow {
-  &:hover {
-    .c-film-slideshow__navigation-arrows {
-      opacity: 1;
-      transform: translate(0, 0);
-    }
-  }
-  &__navigation-arrows {
-    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;
-    @include mq(tablet) {
-      height: 60vw;
-    }
-    @include mq(desktop) {
-      height: 55vw;
-    }
-    @include mq(wide) {
-      height: 40vw;
-    }
-    @include mq(ultraWide) {
-      height: 36vw;
-    }
-    transform: translate($spacing--small / 2, 0);
-    .c-icon {
-      fill: #fff;
-      width: 52px;
-      height: 52px;
-      @include mq(desktop) {
-        width: 78px;
-        height: 78px;
-      }
-      opacity: 0.7;
-      transition: transform 400ms ease, opacity 400ms ease;
-    }
-    button {
-      padding: $spacing 0;
-      border-radius: $border-radius;
-      outline: none;
-      background: transparent;
-      color: #fff;
-      border: 0;
-      &:hover,
-      &:focus {
-        .c-icon {
-          opacity: 1;
-        }
-        background: rgba(0, 0, 0, 0.1);
-      }
-    }
-    &--right {
-      right: 0;
-      transform: translate(-$spacing--small / 2, 0);
-    }
-  }
-  &__slide-link-wrapper {
-    margin: 0 auto;
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-end;
-    position: absolute;
-    z-index: 2;
-    height: 100vw;
-    width: 100%;
-    @include mq(mobileWide) {
-      height: 100vw;
-    }
-    @include mq(tablet) {
-      height: 75vw;
-    }
-    @include mq(desktop) {
-      height: 55vw;
-    }
-    @include mq(wide) {
-      height: 40vw;
-    }
-    @include mq(ultraWide) {
-      height: 36vw;
-    }
-  }
-  &__item-wrapper {
-    display: flex;
-    box-shadow: none;
-    &--text {
-      display: flex;
-      transition: all 400ms ease;
-      @include mq(mobileWide) {
-        padding-bottom: $spacing--medium;
-      }
-      @include mq(tablet) {
-        padding-bottom: $spacing--large;
-      }
-      @include mq(desktop) {
-        padding-bottom: $spacing--large * 1.5;
-      }
-      &:hover {
-        h1 {
-          text-decoration: underline;
-        }
-      }
-      &.out {
-        opacity: 0;
-      }
-      &:not(.out) {
-        animation: fadeInBottomFixed 600ms ease;
-      }
-    }
-  }
-  &__item {
-    width: 100vw;
-    height: 100vw;
-    /* aspect ratios */
-    @include mq(mobileWide) {
-      height: 100vw;
-    }
-    @include mq(tablet) {
-      height: 75vw;
-    }
-    @include mq(desktop) {
-      height: 55vw;
-    }
-    @include mq(wide) {
-      height: 40vw;
-    }
-    @include mq(ultraWide) {
-      height: 36vw;
-    }
-    background-color: '#222';
-    background-size: cover;
-    background-position-x: center;
-    background-position-y: center;
-    border: 0;
-    position: relative;
-    &:before {
-      content: '';
-      opacity: 0.4;
-      background: #091a2a;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      position: absolute;
-      z-index: 1;
-    }
-    &--fade-over {
-      position: absolute;
-      z-index: 1;
-      animation: fadeIn 400ms ease;
-    }
-  }
-  &__slide-info {
-    border: 0;
-    background: none;
-    background-color: rgba(3, 23, 43, 0.7);
-    border-radius: $border-radius;
-    padding: $spacing--medium $spacing--medium $spacing--medium $spacing;
-    margin: 0 -20px;
-    width: 100vw;
-    @include mq(mobileWide) {
-      margin: 0;
-      width: 100%;
-      padding: $spacing--medium $spacing--large * 2 $spacing--medium $spacing;
-    }
-    h1 {
-      @include font-size(22px, 30px);
-      color: $white;
-      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-      margin: 0;
-      font-weight: $font-weight-semibold;
-      @include mq(mobileWide) {
-        margin: 0 0 $spacing--small;
-        @include font-size(26px, 30px);
-      }
-      @include mq(tablet) {
-        @include font-size(40px, 44px);
-      }
-      @include mq(desktop) {
-        @include font-size(48px, 54px);
-      }
-    }
-
-    p {
-      color: #fff;
-      display: inline-block;
-      margin: 0;
-      padding: 0;
-      border-radius: $border-radius;
-      @include font-size(12px, 18px);
-      @include mq(mobileWide) {
-        @include font-size(15px, 20px);
-      }
-      @include mq(tablet) {
-        @include font-size(18px, 24px);
-      }
-      @include mq(wide) {
-        @include font-size(20px, 32px);
-      }
-    }
-  }
-  &__indicator-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: $spacing--small 0;
-    @include mq(mobileWide) {
-      margin: $spacing 0;
-    }
-    &--isMobile {
-      pointer-events: none;
-    }
-  }
-  &__indicator-dot {
-    border: 0;
-    display: flex;
-    justify-content: center;
-    background: transparent;
-    span {
-      background: $film-color-bright;
-      transition: background 100ms ease;
-      height: 8px;
-      width: 8px;
-      @include mq(mobileWide) {
-        height: 10px;
-        width: 10px;
-      }
-      @include mq(tablet) {
-        height: $spacing--small;
-        width: $spacing--small;
-      }
-      border-radius: 100%;
-    }
-    padding: $spacing--small / 2;
-    @include mq(tablet) {
-      padding: $spacing--small;
-    }
-    &:hover,
-    &:focus,
-    &--active {
-      span {
-        background: #fff;
-      }
-    }
-  }
-  &__slideshow {
-    background: rgba(255, 255, 255, 0.08);
-    margin-bottom: $spacing--large * 4;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 40vw;
-  }
-}

package/src/RadioButtonGroup/component.radio-button-group.scss

@@ -1,67 +0,0 @@
-.c-radio-button-group {
-  &__wrapper {
-    padding: $spacing--small 0;
-    font-family: $font;
-    display: flex;
-    align-items: center;
-    flex-flow: flow;
-  }
-  &__label-heading {
-    @include font-size(16px, 20px);
-    margin: 0 $spacing 0 0;
-    font-weight: 600;
-  }
-  &__label {
-    @include font-size(16px, 28px, $important: true);
-    color: $brand-color;
-    align-items: center;
-    display: inline-flex;
-    &:before {
-      content: "";
-      margin-right: $spacing--small;
-      width: 20px;
-      height: 20px;
-      border-radius: 100%;
-      border: 2px solid $brand-color--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;
-    }
-  }
-  &__input {
-    opacity: 0;
-    position: absolute;
-    width: auto;
-    &:hover, &:focus {
-      + .c-radio-button-group__label {
-        @include restore-outline();
-        &:after {
-          transform: translateX(5px) scale(1, 1);
-          background: $brand-color--tertiary;
-        }
-      }
-    }
-    &:checked {
-      + .c-radio-button-group__label {
-        &:before {
-          border-color: $brand-color;
-        }
-        &:after {
-          transform: translateX(5px) scale(1, 1);
-          background: $brand-color;
-        }
-      }
-    }
-  }
-}