@ndla/ui 15.1.4 → 16.1.0

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/BlockResource.tsx

@@ -11,7 +11,7 @@ import React, { ReactNode } from 'react';
 import SafeLink from '@ndla/safelink';
 import { colors, fonts, spacing } from '@ndla/core';
 import Image from '../Image';
-import { CompressTagsLength, ResourceImageProps, ResourceTitle, Row, TopicList } from './resourceComponents';
+import { CompressedTags, ResourceImageProps, ResourceTitle, Row, TopicList } from './resourceComponents';
 
 interface BlockResourceProps {
   link: string;
@@ -90,7 +90,7 @@ const BlockResource = ({ link, title, tags, resourceImage, topics, description,
         <TopicList topics={topics} />
         <BlockDescription>{description}</BlockDescription>
         <RightRow>
-          {tags && CompressTagsLength(tags)}
+          {tags && CompressedTags(tags)}
           {actionMenu}
         </RightRow>
       </BlockInfoWrapper>

package/src/Resource/ListResource.tsx

@@ -9,11 +9,12 @@
 import styled from '@emotion/styled';
 import React, { ReactNode } from 'react';
 import SafeLink from '@ndla/safelink';
-import { fonts, spacing, colors } from '@ndla/core';
+import { fonts, spacing, colors, breakpoints, mq } from '@ndla/core';
 import Image from '../Image';
-import { CompressTagsLength, ResourceImageProps, ResourceTitle, Row, TopicList } from './resourceComponents';
+import { CompressedTags, ResourceImageProps, ResourceTitle, TopicList } from './resourceComponents';
 
 const ResourceDescription = styled.p`
+  grid-area: description;
   line-clamp: 2;
   line-height: 1em;
   height: 3.1em;
@@ -30,14 +31,26 @@ const ResourceDescription = styled.p`
 
 const ResourceWrapper = styled(SafeLink)`
   display: grid;
-  grid-template-columns: auto 1fr;
+  flex: 1;
+  grid-template-areas:
+    'image  topicAndTitle   tags'
+    'image  description     description';
+  grid-template-columns: auto 1fr auto;
+  ${mq.range({ until: breakpoints.mobileWide })} {
+    grid-template-columns: auto 1fr;
+    grid-template-areas:
+      'image                topicAndTitle'
+      'description          description'
+      'tags                 tags';
+  }
+
   text-decoration: none;
   box-shadow: none;
   padding: ${spacing.small};
   border: 1px solid ${colors.brand.light};
   border-radius: 2px;
   color: ${colors.brand.greyDark};
-  gap: ${spacing.small};
+  gap: 0 ${spacing.small};
   &:hover {
     box-shadow: 1px 1px 6px 2px rgba(9, 55, 101, 0.08);
     transition-duration: 0.2s;
@@ -52,27 +65,43 @@ const ResourceWrapper = styled(SafeLink)`
   }
 `;
 
-const ResourceInfoWrapper = styled.div`
-  flex: 1;
+const TagsandActionMenu = styled.div`
+  grid-area: tags;
   display: flex;
-  flex-direction: column;
-  max-width: 100%;
+  align-items: center;
+  width: 100%;
   overflow: hidden;
+  gap: ${spacing.small};
+  align-self: flex-start;
+  justify-self: flex-end;
+  justify-content: flex-end;
 `;
 
-interface StyledImageProps {
-  imageSize: 'normal' | 'compact';
-}
+const StyledImageWrapper = styled.div<StyledImageProps>`
+  grid-area: image;
+  width: ${(p) => (p.imageSize === 'normal' ? '136px' : '56px')};
+  height: ${(p) => (p.imageSize === 'normal' ? '96px' : '40px')};
+  ${mq.range({ until: breakpoints.mobileWide })} {
+    width: 54px;
+    height: 40px;
+  }
+`;
 
-const StyledImage = styled(Image)<StyledImageProps>`
+const StyledImage = styled(Image)`
   display: flex;
   border-radius: 2px;
   object-fit: cover;
-  width: ${(p) => (p.imageSize === 'normal' ? '136px' : '56px')};
-  min-width: ${(p) => (p.imageSize === 'normal' ? '136px' : '56px')};
-  height: ${(p) => (p.imageSize === 'normal' ? '96px' : '40px')};
 `;
 
+const TopicAndTitle = styled.div`
+  grid-area: topicAndTitle;
+  margin-top: ${spacing.xxsmall};
+`;
+
+interface StyledImageProps {
+  imageSize: 'normal' | 'compact';
+}
+
 export interface ListResourceProps {
   link: string;
   title: string;
@@ -88,22 +117,18 @@ const ListResource = ({ link, title, tags, resourceImage, topics, description, a
 
   return (
     <ResourceWrapper to={link}>
-      <StyledImage alt={resourceImage.alt} src={resourceImage.src} imageSize={showDescription ? 'normal' : 'compact'} />
-      <ResourceInfoWrapper>
-        <Row>
-          <ResourceTitle>{title}</ResourceTitle>
-          {tags && CompressTagsLength(tags)}
-          {actionMenu}
-        </Row>
-        <Row>
-          <TopicList topics={topics} />
-        </Row>
-        {showDescription && (
-          <Row>
-            <ResourceDescription>{description}</ResourceDescription>
-          </Row>
-        )}
-      </ResourceInfoWrapper>
+      <StyledImageWrapper imageSize={showDescription ? 'normal' : 'compact'}>
+        <StyledImage alt={resourceImage.alt} src={resourceImage.src} />
+      </StyledImageWrapper>
+      <TopicAndTitle>
+        <ResourceTitle>{title}</ResourceTitle>
+        <TopicList topics={topics} />
+      </TopicAndTitle>
+      {showDescription && <ResourceDescription>{description}</ResourceDescription>}
+      <TagsandActionMenu>
+        {tags && CompressedTags(tags)}
+        {actionMenu}
+      </TagsandActionMenu>
     </ResourceWrapper>
   );
 };

package/src/Resource/resourceComponents.tsx

@@ -31,6 +31,7 @@ export const ResourceTitle = styled.h2`
   -webkit-line-clamp: 1;
   line-clamp: 1;
   -webkit-box-orient: vertical;
+  grid-area: resourceTitle;
 `;
 
 const StyledTagList = styled.ul`
@@ -57,6 +58,7 @@ const StyledTopicList = styled.ul`
   margin: 0;
   padding: 0;
   overflow: hidden;
+  grid-area: topicList;
 `;
 
 const StyledTopicListElement = styled.li`
@@ -100,9 +102,8 @@ export const TagList = ({ tags }: TagListProps) => {
   );
 };
 
-export const CompressTagsLength = (tags: string[]) => {
-  const tagCounter = tags?.length - 3;
-  const slicedTags = tags.slice(0, 3);
+export const CompressedTags = (tags: string[]) => {
+  const visibleTags = tags.slice(0, 3);
   const remainingTags = tags.slice(3, tags.length).map((tag) => {
     return {
       text: '#' + tag,
@@ -112,10 +113,10 @@ export const CompressTagsLength = (tags: string[]) => {
 
   return (
     <>
-      <TagList tags={slicedTags} />
+      <TagList tags={visibleTags} />
       {remainingTags.length > 0 && (
         <MenuButton hideMenuIcon={true} menuItems={remainingTags}>
-          <TagCounterWrapper>+{tagCounter}</TagCounterWrapper>
+          <TagCounterWrapper>{`+${remainingTags.length}`}</TagCounterWrapper>
         </MenuButton>
       )}
     </>
@@ -132,10 +133,8 @@ export const TopicList = ({ topics }: TopicListProps) => {
     <StyledTopicList>
       {topics.map((topic, i) => (
         <StyledTopicListElement key={topic}>
-          <>
-            {topic}
-            {i !== topics.length - 1 && <StyledTopicDivider>•</StyledTopicDivider>}
-          </>
+          {topic}
+          {i !== topics.length - 1 && <StyledTopicDivider>•</StyledTopicDivider>}
         </StyledTopicListElement>
       ))}
     </StyledTopicList>

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