@ndla/ui 16.0.0 → 16.2.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/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/FolderItem.tsx

@@ -11,7 +11,7 @@ import styled from '@emotion/styled';
 import { ArrowDropDown } from '@ndla/icons/common';
 import { FolderOutlined } from '@ndla/icons/contentType';
 import { colors, spacing, misc, animations } from '@ndla/core';
-import { SetFocusedFolderId } from './TreeStructure.types';
+import { SetFocusedFolderId, FolderChildFuncType } from './TreeStructure.types';
 
 const OpenButton = styled.button<{ isOpen: boolean }>`
   background: transparent;
@@ -37,6 +37,16 @@ const FolderItemWrapper = styled.div`
   align-items: center;
 `;
 
+const WrapperForFolderChild = styled.div<{ marked: boolean }>`
+  position: absolute;
+  right: ${spacing.xsmall};
+  opacity: ${({ marked }) => (marked ? 1 : 0.25)};
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+`;
+
 const FolderName = styled.button<{ marked: boolean; noArrow?: boolean }>`
   line-height: 1;
   background: ${({ marked }) => (marked ? colors.brand.lighter : 'transparent')};
@@ -45,6 +55,9 @@ const FolderName = styled.button<{ marked: boolean; noArrow?: boolean }>`
   &:focus {
     background: ${({ marked }) => (marked ? colors.brand.light : colors.brand.lightest)};
     color: ${colors.brand.primary};
+    + ${WrapperForFolderChild} {
+      opacity: 1;
+    }
   }
   transition: ${animations.durations.superFast};
   border: 0;
@@ -58,6 +71,7 @@ const FolderName = styled.button<{ marked: boolean; noArrow?: boolean }>`
   margin-left: ${({ noArrow }) => (noArrow ? `29px` : `0px`)};
   flex-grow: 1;
   box-shadow: none;
+  text-align: left;
 `;
 
 const FolderNameLink = FolderName.withComponent('a');
@@ -77,6 +91,7 @@ interface Props {
   url?: string;
   icon?: React.ReactNode;
   noPaddingWhenArrowIsHidden?: boolean;
+  folderChild?: FolderChildFuncType;
 }
 
 const FolderItem = ({
@@ -94,6 +109,7 @@ const FolderItem = ({
   icon,
   url,
   noPaddingWhenArrowIsHidden,
+  folderChild,
 }: Props) => {
   const folderNameLinkRef = useRef<HTMLAnchorElement | null>(null);
   const folderNameButtonRef = useRef<HTMLButtonElement | null>(null);
@@ -134,24 +150,29 @@ const FolderItem = ({
           {name}
         </FolderNameLink>
       ) : (
-        <FolderName
-          ref={folderNameButtonRef}
-          noArrow={hideArrow && !noPaddingWhenArrowIsHidden}
-          tabIndex={marked ? 0 : -1}
-          marked={marked}
-          disabled={loading}
-          onFocus={() => {
-            setFocusedFolderId(id);
-          }}
-          onClick={() => {
-            onMarkFolder(id);
-            if (openOnFolderClick) {
-              onToggleOpen(id);
-            }
-          }}>
-          {icon || <FolderOutlined />}
-          {name}
-        </FolderName>
+        <>
+          <FolderName
+            ref={folderNameButtonRef}
+            noArrow={hideArrow && !noPaddingWhenArrowIsHidden}
+            tabIndex={marked ? 0 : -1}
+            marked={marked}
+            disabled={loading}
+            onFocus={() => {
+              setFocusedFolderId(id);
+            }}
+            onClick={() => {
+              onMarkFolder(id);
+              if (openOnFolderClick) {
+                onToggleOpen(id);
+              }
+            }}>
+            {icon || <FolderOutlined />}
+            {name}
+          </FolderName>
+          {folderChild && (
+            <WrapperForFolderChild marked={marked}>{folderChild(id, marked ? 0 : -1)}</WrapperForFolderChild>
+          )}
+        </>
       )}
     </FolderItemWrapper>
   );

package/src/TreeStructure/FolderItems.tsx

@@ -48,6 +48,7 @@ const FolderItems = ({
   focusedFolderId,
   setFocusedFolderId,
   firstLevel,
+  folderChild,
 }: FolderItemsProps) => (
   <StyledUL role="group" firstLevel={firstLevel}>
     {data.map(({ name, data: dataChildren, id, url, icon }, _index) => {
@@ -71,6 +72,7 @@ const FolderItems = ({
               hideArrow={dataChildren?.length === 0 || newIdPaths.length >= MAX_LEVEL_FOR_FOLDERS}
               noPaddingWhenArrowIsHidden={editable && firstLevel && dataChildren?.length === 0}
               setFocusedFolderId={setFocusedFolderId}
+              folderChild={folderChild}
             />
           </div>
           {newFolder?.parentId === id && (
@@ -98,6 +100,7 @@ const FolderItems = ({
               focusedFolderId={focusedFolderId}
               setFocusedFolderId={setFocusedFolderId}
               firstLevel={false}
+              folderChild={folderChild}
             />
           )}
         </StyledLI>

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';
@@ -40,6 +40,7 @@ const TreeStructure = ({
   framed,
   folderIdMarkedByDefault,
   defaultOpenFolders,
+  folderChild,
 }: TreeStructureProps) => {
   const { t } = useTranslation();
   const [newFolder, setNewFolder] = useState<NewFolderProps | undefined>();
@@ -118,9 +119,6 @@ const TreeStructure = ({
     setFocusedFolderId(id);
   };
 
-  const disableAddFolderButton =
-    markedFolderId === undefined || getPathOfFolder(data, markedFolderId).length >= MAX_LEVEL_FOR_FOLDERS;
-
   return (
     <div
       ref={treestructureRef}
@@ -155,6 +153,7 @@ const TreeStructure = ({
           focusedFolderId={focusedFolderId}
           setFocusedFolderId={setFocusedFolderId}
           firstLevel
+          folderChild={folderChild}
         />
       </TreeStructureStyledWrapper>
       {editable && (
@@ -163,17 +162,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/TreeStructure/TreeStructure.types.ts

@@ -6,7 +6,7 @@
  *
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 export interface FolderStructureProps {
   id: string;
@@ -17,7 +17,7 @@ export interface FolderStructureProps {
   status?: string;
   openAsDefault?: boolean;
   url?: string;
-  icon?: React.ReactNode;
+  icon?: ReactNode;
 }
 
 export interface NewFolderProps {
@@ -38,6 +38,7 @@ export interface TreeStructureProps extends CommonFolderProps {
   folderIdMarkedByDefault?: string;
   onNewFolder: (props: { value: string; parentId?: string; idPaths: number[] }) => Promise<string>;
   defaultOpenFolders?: string[];
+  folderChild?: FolderChildFuncType;
 }
 
 export type onCreateNewFolderProp = ({
@@ -51,6 +52,8 @@ export type onCreateNewFolderProp = ({
 export type SetOpenFolderProp = React.Dispatch<React.SetStateAction<Set<string>>>;
 export type SetFocusedFolderId = React.Dispatch<React.SetStateAction<string | undefined>>;
 
+export type FolderChildFuncType = (id: string, tabIndex: number) => ReactNode;
+
 export interface FolderItemsProps extends CommonFolderProps {
   onToggleOpen: (id: string) => void;
   onSaveNewFolder: (value: string) => void;
@@ -65,5 +68,6 @@ export interface FolderItemsProps extends CommonFolderProps {
   setFocusedFolderId: SetFocusedFolderId;
   firstLevel: boolean;
   keyNavigationFocusIsCreateFolderButton?: boolean;
-  icon?: React.ReactElement;
+  icon?: ReactNode;
+  folderChild?: FolderChildFuncType;
 }

package/src/TreeStructure/TreeStructureWrapper.tsx

@@ -15,7 +15,7 @@ const TreeStructureWrapper = styled.div<{ framed?: boolean }>`
   ${({ framed }) =>
     framed
       ? css`
-          border: 1px solid ${colors.brand.greyLighter};
+          border: 1px solid ${colors.brand.neutral7};
           border-radius: ${misc.borderRadius};
           max-height: 400px;
           overflow-y: scroll;

package/src/index.ts

@@ -67,7 +67,9 @@ export {
 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,
@@ -81,7 +83,15 @@ export {
 
 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';
 
@@ -157,7 +167,7 @@ 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';
 
@@ -221,7 +231,10 @@ 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/src/locale/messages-en.ts

@@ -347,7 +347,7 @@ const messages = {
     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:

package/src/locale/messages-nb.ts

@@ -346,7 +346,7 @@ const messages = {
     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:

package/src/locale/messages-nn.ts

@@ -347,7 +347,7 @@ const messages = {
     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:

package/src/locale/messages-se.ts

@@ -346,7 +346,7 @@ const messages = {
     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:

package/src/locale/messages-sma.ts

@@ -346,7 +346,7 @@ const messages = {
     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:

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