@ndla/ui 15.2.0 → 16.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "15.2.0",
+  "version": "16.1.1",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,18 +31,18 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^2.4.0",
+    "@ndla/button": "^2.4.1",
     "@ndla/carousel": "^1.2.9",
     "@ndla/core": "^2.1.1",
     "@ndla/hooks": "^1.1.4",
     "@ndla/icons": "^1.8.1",
-    "@ndla/licenses": "^4.1.5",
+    "@ndla/licenses": "^5.0.0",
     "@ndla/modal": "^1.2.10",
-    "@ndla/notion": "^3.1.12",
-    "@ndla/safelink": "^2.0.4",
+    "@ndla/notion": "^3.1.14",
+    "@ndla/safelink": "^2.0.5",
     "@ndla/switch": "^0.1.5",
     "@ndla/tabs": "^1.1.8",
-    "@ndla/tooltip": "^2.0.0",
+    "@ndla/tooltip": "^2.1.0",
     "@ndla/util": "^3.0.0",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "21186f9391477c1c0507d44fffbc72730793017b"
+  "gitHead": "f0ced3947f6cb38fc17be3ba1b914ba21996e4b5"
 }

package/src/Article/ArticleContent.tsx

@@ -12,6 +12,7 @@ import {
   removeEventListenerForResize,
   // @ts-ignore
 } from '@ndla/article-scripts';
+import { initTooltips } from '@ndla/tooltip';
 import { initAudioPlayers } from '../AudioPlayer';
 import { initCopyParagraphButtons } from '../CopyParagraphButton';
 import { Locale } from '../types';
@@ -26,6 +27,7 @@ const ArticleContent = ({ content, locale, ...rest }: Props) => {
     initArticleScripts();
     initAudioPlayers(locale);
     initCopyParagraphButtons();
+    initTooltips();
     return () => {
       removeEventListenerForResize();
     };

package/src/FileList/File.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
-import BEMHelper from 'react-bem-helper';
 import { Download } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
+import Tooltip from '@ndla/tooltip';
+import React from 'react';
+import BEMHelper from 'react-bem-helper';
 import { FileFormat, FileType } from './FileList';
 
 const classes = BEMHelper('c-file-list');
@@ -16,9 +17,6 @@ const renderFormat = (format: FileFormat, title: string, isPrimary: boolean, id:
       <span key={format.url}>
         <Download />
         <span>{isPrimary ? titleWithFormat : `(${format.fileType.toUpperCase()})`}</span>
-        <span {...classes('tooltip')} aria-hidden role="tooltip" id={formatId}>
-          <span {...classes('tooltip-text')}>{format.tooltip}</span>
-        </span>
       </span>
     );
   }
@@ -32,12 +30,11 @@ const renderFormat = (format: FileFormat, title: string, isPrimary: boolean, id:
       aria-label={titleWithFormat}
       aria-describedby={formatId}>
       <Download />
-      <span {...classes('link-text')}>
-        <span>{isPrimary ? titleWithFormat : `(${format.fileType.toUpperCase()})`}</span>
-      </span>
-      <span {...classes('tooltip')} aria-hidden role="tooltip" id={formatId}>
-        <span {...classes('tooltip-text')}>{format.tooltip}</span>
-      </span>
+      <Tooltip tooltip={format.tooltip}>
+        <span {...classes('link-text')}>
+          <span>{isPrimary ? titleWithFormat : `(${format.fileType.toUpperCase()})`}</span>
+        </span>
+      </Tooltip>
     </SafeLink>
   );
 };

package/src/Filter/FilterButtons.tsx

@@ -24,15 +24,14 @@ const StyledHeading = styled.h3`
 `;
 
 const StyledButtonsWrapper = styled.div`
-  display: flex;
-  flex-wrap: nowrap;
-  position: relative;
+  display: inline-flex;
+  flex-wrap: wrap;
 `;
 
 const StyledButtonElementWrapper = styled.div`
   margin: 0 ${spacing.xsmall} ${spacing.xsmall} 0;
   break-inside: avoid;
-  flex: 1 0 auto;
+  flex-shrink: 0;
 `;
 
 const StyledList = styled.ul`

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