@ndla/ui 16.0.0 → 16.2.0

package/lib/index.d.ts

@@ -25,9 +25,12 @@ export { default as InfoWidget } from './InfoWidget';
 export { FrontpageInfo, FrontpageFilm, FrontpageToolbox, FrontpageMultidisciplinarySubject, FrontpageHeader, FrontpageSubjectIllustration, FrontpageSearch, FrontpageProgramMenu, } from './Frontpage';
 export { default as FactBox } from './FactBox';
 export { default as Image, ImageLink, makeSrcQueryString } from './Image';
+export type { ImageCrop, ImageFocalPoint } from './Image';
+export type { HeroContentType } from './Hero';
 export { SubjectMaterialHero, TasksAndActivitiesHero, AssessmentResourcesHero, SubjectHero, ExternalLearningResourcesHero, SourceMaterialHero, Hero, NdlaFilmHero, } from './Hero';
 export { Footer, EditorName, FooterText, FooterAuth } from './Footer';
-export { Figure, FigureCaption, FigureLicenseDialog, FigureExpandButton, FigureOpenDialogButton } from './Figure';
+export { Figure, FigureCaption, FigureLicenseDialog, FigureExpandButton, FigureOpenDialogButton, FigureBylineExpandButton, } from './Figure';
+export type { FigureType } from './Figure';
 export { LanguageSelector } from './LanguageSelector';
 export { LearningPathWrapper, LearningPathContent, LearningPathMenu, LearningPathSticky, LearningPathInformation, LearningPathStickySibling, LearningPathStickyPlaceholder, LearningPathLastStepNavigation, LearningPathMobileStepInfo, LearningPathMobileHeader, } from './LearningPaths';
 export { Translation, TranslationLine, TranslationBox } from './Translation';
@@ -62,7 +65,7 @@ export { default as Aside } from './Aside';
 export { default as AuthorInfo } from './AuthorInfo';
 export { default as Breadcrumb, HeaderBreadcrumb, HomeBreadcrumb, ActionBreadcrumb } from './Breadcrumb';
 export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from './Breadcrumb';
-export type { BreadcrumbItemProps } from './Breadcrumblist/Breadcrumblist';
+export type { BreadcrumbItemProps } from './Breadcrumblist';
 export { i18nInstance, formatNestedMessages, formatMessage } from './i18n';
 export { default as ResourceGroup } from './ResourceGroup';
 export { default as LayoutItem, OneColumn, PageContainer, Content } from './Layout';
@@ -75,6 +78,7 @@ export { default as ContentCard } from './ContentCard';
 export { default as CopyParagraphButton } from './CopyParagraphButton';
 export { default as ContentPlaceholder } from './ContentPlaceholder';
 export { Notion, ConceptNotion } from './Notion';
+export type { NotionVisualElementType, ConceptNotionType } from './Notion';
 export { BannerCard } from './BannerCard';
 export { VerticalNavigation, Folder, FolderInput } from './MyNdla';
 export { ListResource, BlockResource } from './Resource';

package/lib/index.js

@@ -68,6 +68,7 @@ var _exportNames = {
   FigureLicenseDialog: true,
   FigureExpandButton: true,
   FigureOpenDialogButton: true,
+  FigureBylineExpandButton: true,
   LanguageSelector: true,
   LearningPathWrapper: true,
   LearningPathContent: true,
@@ -560,6 +561,12 @@ Object.defineProperty(exports, "FigureOpenDialogButton", {
     return _Figure.FigureOpenDialogButton;
   }
 });
+Object.defineProperty(exports, "FigureBylineExpandButton", {
+  enumerable: true,
+  get: function get() {
+    return _Figure.FigureBylineExpandButton;
+  }
+});
 Object.defineProperty(exports, "LanguageSelector", {
   enumerable: true,
   get: function get() {

package/lib/locale/messages-en.js

@@ -318,7 +318,7 @@ var messages = _objectSpread(_objectSpread({
     feide: 'This resource is accessible only to teachers who are logged in with Feide.',
     resources: 'This is not a complete course produced by NDLA, but a collection of resources we hope you will find useful.',
     subjectOutdated: 'This course is not updated to the current curriculum.',
-    subjectBeta: 'This course is in beta.',
+    subjectBeta: 'This course is in beta. New resources are being added continously.',
     newVersion: 'This learning resource is not updated to the current curriculum. You can find an updated version here: ',
     frontPageBeta: 'Revised subjects have been revised in accordance with the new curriculum that will be put into effect from August 2022. Beta versions of subjects are subjects we are still working on. We hope, however, that the learning resources available by now may come in useful already.',
     frontPageExpired: 'Expired subjects are not being taught any longer, but it may still be possible to take exams in these subjects.',

package/lib/locale/messages-nb.js

@@ -318,7 +318,7 @@ var messages = _objectSpread(_objectSpread({
     feide: 'Denne ressursen er bare tilgjengelig for lærere som er pålogget med Feide.',
     resources: 'Dette er ikke et komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan være nyttig for deg.',
     subjectOutdated: 'Dette faget følger en utgått læreplan.',
-    subjectBeta: 'Dette faget er i betaversjon.',
+    subjectBeta: 'Dette faget er i betaversjon. Vi fyller på med ressurser fortløpende.',
     newVersion: 'Denne læringsressursen er ikke oppdatert etter gjeldende læreplan. Du finner en oppdatert versjon her: ',
     frontPageBeta: 'Kommende fag er tilpassa ny læreplan som gjelder fra høsten 2022. Betafag er fag under arbeid. Vi håper likevel at læringsressursene i betafaga kan være nyttige allerede nå.',
     frontPageExpired: 'Utgåtte fag undervises det ikke i lenger, men det kan fortsatt være mulig å ta eksamen i faga som privatist.',

package/lib/locale/messages-nn.js

@@ -318,7 +318,7 @@ var messages = _objectSpread(_objectSpread({
     feide: 'Denne ressursen er berre tilgjengeleg for lærarar som er pålogga med Feide.',
     resources: 'Dette er ikkje eit komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan vere nyttig for deg.',
     subjectOutdated: 'Dette faget følgjer ein utgått læreplan.',
-    subjectBeta: 'Dette faget er i betaversjon.',
+    subjectBeta: 'Dette faget er i betaversjon. Vi fyller på med ressurser fortløpande.',
     newVersion: 'Denne læringsressursen er ikkje oppdatert etter gjeldande læreplan. Du finn ein oppdatert versjon her: ',
     frontPageBeta: 'Kommande fag er tilpassa ny læreplan som gjeld fra hausten 2022. Betafag er fag under arbeid. Vi håper likevel at læringsressursane i betafaga kan vere nyttige allereie no.',
     frontPageExpired: 'Utgåtte fag blir det ikkje undervist i lenger, men det kan framleis vere mogleg å ta eksamen i faget som privatist.',

package/lib/locale/messages-se.js

@@ -318,7 +318,7 @@ var messages = _objectSpread(_objectSpread({
     feide: 'Denne ressursen er bare tilgjengelig for lærere som er pålogget med Feide.',
     resources: 'Dette er ikke et komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan være nyttig for deg.',
     subjectOutdated: 'Dette faget følger en utgått læreplan.',
-    subjectBeta: 'Dette faget er i betaversjon.',
+    subjectBeta: 'Dette faget er i betaversjon. Vi fyller på med ressurser fortløpende.',
     newVersion: 'Denne læringsressursen er ikke oppdatert etter gjeldende læreplan. Du finner en oppdatert versjon her: ',
     frontPageBeta: 'Kommende fag er tilpassa ny læreplan som gjelder fra høsten 2022. Betafag er fag under arbeid. Vi håper likevel at læringsressursene i betafaga kan være nyttige allerede nå.',
     frontPageExpired: 'Utgåtte fag undervises det ikke i lenger, men det kan fortsatt være mulig å ta eksamen i faga som privatist.',

package/lib/locale/messages-sma.js

@@ -318,7 +318,7 @@ var messages = _objectSpread(_objectSpread({
     feide: 'Denne ressursen er bare tilgjengelig for lærere som er pålogget med Feide.',
     resources: 'Dette er ikke et komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan være nyttig for deg.',
     subjectOutdated: 'Dette faget følger en utgått læreplan.',
-    subjectBeta: 'Dette faget er i betaversjon.',
+    subjectBeta: 'Dette faget er i betaversjon. Vi fyller på med ressurser fortløpende.',
     newVersion: 'Denne læringsressursen er ikke oppdatert etter gjeldende læreplan. Du finner en oppdatert versjon her: ',
     frontPageBeta: 'Kommende fag er tilpassa ny læreplan som gjelder fra høsten 2022. Betafag er fag under arbeid. Vi håper likevel at læringsressursene i betafaga kan være nyttige allerede nå.',
     frontPageExpired: 'Utgåtte fag undervises det ikke i lenger, men det kan fortsatt være mulig å ta eksamen i faga som privatist.',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "16.0.0",
+  "version": "16.2.0",
   "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/carousel": "^1.2.9",
-    "@ndla/core": "^2.1.1",
+    "@ndla/button": "^2.5.0",
+    "@ndla/carousel": "^1.2.10",
+    "@ndla/core": "^2.2.0",
     "@ndla/hooks": "^1.1.4",
-    "@ndla/icons": "^1.8.1",
-    "@ndla/licenses": "^5.0.0",
-    "@ndla/modal": "^1.2.10",
-    "@ndla/notion": "^3.1.13",
-    "@ndla/safelink": "^2.0.4",
-    "@ndla/switch": "^0.1.5",
-    "@ndla/tabs": "^1.1.8",
-    "@ndla/tooltip": "^2.1.0",
+    "@ndla/icons": "^1.9.0",
+    "@ndla/licenses": "^5.0.1",
+    "@ndla/modal": "^1.2.11",
+    "@ndla/notion": "^3.1.15",
+    "@ndla/safelink": "^2.0.6",
+    "@ndla/switch": "^0.1.6",
+    "@ndla/tabs": "^1.1.9",
+    "@ndla/tooltip": "^2.1.1",
     "@ndla/util": "^3.0.0",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "765457c9aae617b16a3a17269f4e9401f70057cc"
+  "gitHead": "97d16d07a6f4d4fc04c5114f01aac6c9480b0341"
 }

package/src/Breadcrumblist/{index.tsx → index.ts}

@@ -1,3 +1,4 @@
 import Breadcrumblist from './Breadcrumblist';
 
+export type { BreadcrumbItemProps } from './Breadcrumblist';
 export default Breadcrumblist;

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