@ndla/ui 30.8.2 → 30.9.0

package/lib/i18n/index.d.ts

@@ -7,4 +7,3 @@
  */
 export { i18nInstance } from './i18n';
 export { formatNestedMessages } from './formatNestedMessages';
-export { formatMessage } from './formatMessage';

package/lib/i18n/index.js

@@ -3,12 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "formatMessage", {
-  enumerable: true,
-  get: function get() {
-    return _formatMessage.formatMessage;
-  }
-});
 Object.defineProperty(exports, "formatNestedMessages", {
   enumerable: true,
   get: function get() {
@@ -22,5 +16,4 @@ Object.defineProperty(exports, "i18nInstance", {
   }
 });
 var _i18n = require("./i18n");
-var _formatNestedMessages = require("./formatNestedMessages");
-var _formatMessage = require("./formatMessage");
+var _formatNestedMessages = require("./formatNestedMessages");

package/lib/index.d.ts

@@ -70,7 +70,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';
-export { i18nInstance, formatNestedMessages, formatMessage } from './i18n';
+export { i18nInstance, formatNestedMessages } from './i18n';
 export { default as ResourceGroup } from './ResourceGroup';
 export { default as LayoutItem, OneColumn, PageContainer, Content } from './Layout';
 export { FilmSlideshow, MovieGrid, AboutNdlaFilm, FilmMovieSearch, FilmMovieList, AllMoviesAlphabetically, } from './NDLAFilm';

package/lib/index.js

@@ -133,7 +133,6 @@ var _exportNames = {
   ActionBreadcrumb: true,
   i18nInstance: true,
   formatNestedMessages: true,
-  formatMessage: true,
   ResourceGroup: true,
   LayoutItem: true,
   OneColumn: true,
@@ -1306,12 +1305,6 @@ Object.defineProperty(exports, "createUniversalPortal", {
     return _createUniversalPortal.createUniversalPortal;
   }
 });
-Object.defineProperty(exports, "formatMessage", {
-  enumerable: true,
-  get: function get() {
-    return _i18n.formatMessage;
-  }
-});
 Object.defineProperty(exports, "formatNestedMessages", {
   enumerable: true,
   get: function get() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "30.8.2",
+  "version": "30.9.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,29 +31,27 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/article-scripts": "^3.0.9",
-    "@ndla/button": "^6.0.2",
-    "@ndla/carousel": "^2.0.7",
-    "@ndla/core": "^3.0.2",
-    "@ndla/forms": "^4.0.14",
-    "@ndla/hooks": "^1.1.13",
-    "@ndla/icons": "^2.0.7",
-    "@ndla/licenses": "^6.0.9",
-    "@ndla/modal": "^2.1.2",
-    "@ndla/notion": "^4.0.16",
-    "@ndla/safelink": "^3.0.14",
-    "@ndla/switch": "^1.0.2",
-    "@ndla/tabs": "^2.0.9",
-    "@ndla/tooltip": "^3.0.5",
+    "@ndla/article-scripts": "^3.0.11",
+    "@ndla/button": "^6.0.4",
+    "@ndla/carousel": "^2.0.8",
+    "@ndla/core": "^3.0.3",
+    "@ndla/forms": "^4.0.16",
+    "@ndla/hooks": "^1.1.15",
+    "@ndla/icons": "^2.0.8",
+    "@ndla/licenses": "^6.0.10",
+    "@ndla/modal": "^2.1.3",
+    "@ndla/notion": "^4.0.18",
+    "@ndla/safelink": "^3.0.16",
+    "@ndla/switch": "^1.0.3",
+    "@ndla/tabs": "^2.0.11",
+    "@ndla/tooltip": "^3.0.6",
     "@ndla/types-learningpath-api": "^0.0.17",
-    "@ndla/util": "^3.1.7",
+    "@ndla/util": "^3.1.9",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
     "focus-trap-react": "^8.9.2",
     "html-react-parser": "^0.14.1",
     "i18next-browser-languagedetector": "^6.1.1",
-    "intl-format-cache": "^4.3.1",
-    "intl-messageformat": "5.4.3",
     "invariant": "^2.2.3",
     "lodash": "^4.17.20",
     "react-bem-helper": "1.4.1",
@@ -86,5 +84,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "87a608977cc0558fcf41dcf7c9f6e6414d7c7c02"
+  "gitHead": "68b1327bb5950eee8a41227b3b48589c7d428bd7"
 }

package/src/Article/Article.tsx

@@ -65,7 +65,7 @@ export const ArticleTitle = ({ children, icon, label }: ArticleTitleProps) => {
     <div {...classes('title', modifiers)}>
       {icon}
       {labelView}
-      <h1 tabIndex={0}>{children}</h1>
+      <h1 tabIndex={-1}>{children}</h1>
     </div>
   );
 };

package/src/Article/ArticleSideBar.tsx

@@ -74,7 +74,7 @@ const ArticleSideBar = ({
       //TOP
       if (resourcesRef.current.getBoundingClientRect().top <= 0) {
         setHide(true);
-      } else if (resourcesRef.current.getBoundingClientRect().top <= 0) {
+      } else if (resourcesRef.current.getBoundingClientRect().top >= 0) {
         setHide(false);
       }
     };

package/src/AudioPlayer/Controls.tsx

@@ -411,6 +411,7 @@ const Controls = ({ src, title }: Props) => {
 
   return (
     <div>
+      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
       <audio ref={audioRef} src={src} title={title} preload="metadata" />
       <ControlsWrapper>
         <PlayButton type="button" onClick={togglePlay} title="play" aria-label="play">

package/src/AudioPlayer/SpeechControl.tsx

@@ -52,6 +52,7 @@ const SpeechControl = ({ src, title }: Props) => {
   };
   return (
     <div>
+      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
       <audio ref={audioRef} src={src} title={title} preload="metadata" />
       <SpeechPlayButton type="button" onClick={togglePlay}>
         <VolumeUp role="img" aria-label="play" title="play" />

package/src/CopyParagraphButton/CopyParagraphButton.tsx

@@ -13,6 +13,11 @@ import { Link } from '@ndla/icons/common';
 import { useTranslation } from 'react-i18next';
 import Tooltip from '@ndla/tooltip';
 import { copyTextToClipboard } from '@ndla/util';
+import { colors } from '@ndla/core';
+
+const ContainerDiv = styled.div`
+  position: relative;
+`;
 
 const IconButton = styled.button`
   position: absolute;
@@ -23,18 +28,17 @@ const IconButton = styled.button`
   z-index: 1;
   transition: 0.2s;
   opacity: 0;
+  color: ${colors.brand.grey};
 
   & svg {
     width: 30px;
     height: 30px;
   }
-`;
 
-const ContainerDiv = styled.div`
-  position: relative;
-  &:hover button {
+  ${ContainerDiv}:hover &,
+  &:focus, &:focus-visible, &:active {
     cursor: pointer;
-    opacity: 0.5;
+    opacity: 1;
   }
 `;
 
@@ -54,12 +58,12 @@ interface CopyButtonProps {
 const CopyButton = ({ onClick, title, tooltip, content }: CopyButtonProps) => {
   return (
     <div>
-      <IconButton onClick={onClick} data-title={title}>
-        <Tooltip tooltip={tooltip}>
+      <Tooltip tooltip={tooltip}>
+        <IconButton onClick={onClick} data-title={title} aria-label={`${tooltip}: ${title}`}>
           <Link title={''} />
-        </Tooltip>
-      </IconButton>
-      <h2 id={title} tabIndex={0} dangerouslySetInnerHTML={{ __html: content || '' }} />
+        </IconButton>
+      </Tooltip>
+      <h2 id={title} tabIndex={-1} dangerouslySetInnerHTML={{ __html: content || '' }} />
     </div>
   );
 };

package/src/Frontpage/FrontpageSearch.tsx

@@ -141,17 +141,11 @@ const FrontpageSearch = ({
     return () => {
       noScroll(false, 'preventPageScroll');
       window.removeEventListener('scroll', resetScroll);
+      inputHasFocusRef.current = false;
     };
   }, [inputHasFocus]);
 
   const onBlur = () => {
-    setTimeout(() => {
-      if (searchFieldRef.current) {
-        if (!searchFieldRef.current.contains(document.activeElement)) {
-          onInputBlur();
-        }
-      }
-    }, 0);
     // This is needed when user tabs out of field
     if (!searchFieldValue) {
       onInputBlur();

package/src/MediaList/MediaList.tsx

@@ -147,6 +147,7 @@ export const MediaListItemMeta = ({ items = [] }: MediaListItemMetaProps) => {
 
   return (
     //@ts-ignore
+    // eslint-disable-next-line react/no-unknown-property
     <ul {...cClasses('actions')} property="cc:attributionName" content={attributionMeta}>
       {items.map((item) => (
         <li key={uuid()} className="c-medialist__meta-item">

package/src/Messages/MessageBox.tsx

@@ -138,7 +138,7 @@ export const MessageBox = ({ type, children = '', links, showCloseButton, onClos
           {links && (
             <LinkWrapper>
               {links.map((x) => (
-                <Link href={x.href}>
+                <Link href={x.href} key={x.href}>
                   <span>{x.text}</span>
                   <Forward />
                 </Link>

package/src/NDLAFilm/AllMoviesAlphabetically.tsx

@@ -170,7 +170,7 @@ const hasForEachPolyfill = () => {
   if ('NodeList' in window && !NodeList.prototype.forEach) {
     NodeList.prototype.forEach = function (callback, thisArg) {
       thisArg = thisArg || window;
-      for (var i = 0; i < this.length; i++) {
+      for (let i = 0; i < this.length; i++) {
         callback.call(thisArg, this[i], i, this);
       }
     };

package/src/NDLAFilm/FilmSlideshow.tsx

@@ -217,7 +217,7 @@ const FilmSlideshow = ({ autoSlide = false, slideshow = [], slideInterval = 5000
   const [animationComplete, setAnimationComplete] = useState(true);
   const slideRef = useRef<HTMLDivElement>(null);
   const slideText = useRef<HTMLDivElement>(null);
-  let timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const gotoSlide = useCallback((indexTarget: number, useAnimation = false) => {
     setSwipeDistance(0);

package/src/NDLAFilm/MovieGrid.tsx

@@ -66,8 +66,9 @@ const MovieGrid = ({
       <MovieListing marginLeft={autoSizedProps.margin}>
         {fetchingMoviesByType && <LoadingPlaceholder height={loadingPlaceholderHeight} />}
         {!fetchingMoviesByType &&
-          moviesByType.map((movie) => (
+          moviesByType.map((movie, index) => (
             <FilmContentCard
+              key={index}
               hideTags
               movie={movie}
               columnWidth={autoSizedProps.columnWidth}

package/src/Programme/Programme.tsx

@@ -3,8 +3,7 @@ import styled from '@emotion/styled';
 import { breakpoints, mq, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import LayoutItem, { OneColumn } from '../Layout';
-import ProgrammeSubjects from './ProgrammeSubjects';
-import { GradesProps } from './ProgrammeSubjects';
+import ProgrammeSubjects, { GradesProps } from './ProgrammeSubjects';
 import MessageBox from '../Messages/MessageBox';
 import { NavigationHeading } from '..';
 const StyledWrapper = styled.div`

package/src/ResourceGroup/ResourceItem.tsx

@@ -9,8 +9,7 @@
 import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import { keyframes } from '@emotion/react';
+import { css, keyframes } from '@emotion/react';
 import SafeLink from '@ndla/safelink';
 import { Additional, Core, HumanMaleBoard } from '@ndla/icons/common';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';

package/src/ResourceGroup/ResourceList.tsx

@@ -8,8 +8,7 @@
 
 import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import { keyframes } from '@emotion/react';
+import { css, keyframes } from '@emotion/react';
 import { useTranslation } from 'react-i18next';
 import NoContentBox from '../NoContentBox';
 import ResourceItem from './ResourceItem';

package/src/Search/SearchField.tsx

@@ -134,8 +134,7 @@ const SearchField = ({
             onChange('');
             onFocus?.();
             inputRef?.current?.focus();
-          }}
-          onBlur={onBlur}>
+          }}>
           {t('welcomePage.resetSearch')}
         </button>
       )}

package/src/Subject/SubjectNewContent.tsx

@@ -91,8 +91,8 @@ const SubjectNewContent = ({ heading, content }: Props) => (
     <StyledSubjectSectionTitle>{heading}</StyledSubjectSectionTitle>
     <nav>
       <StyledUl>
-        {content.map((item) => (
-          <StyledListItem>
+        {content.map((item, index) => (
+          <StyledListItem key={index}>
             <LeftWrapper>
               <ContentTypeBadge type={item.contentType} size="x-small" background border />
               <ContentLinkWrapper>

package/src/TopicMenu/component.topic-menu.scss

@@ -264,8 +264,7 @@ $navigation-row-width: 980px / 3;
 
     @include mq(desktop) {
       padding: $spacing--large;
-      margin: -($spacing + $spacing--small) $spacing + $spacing--small 0 $spacing +
-        $spacing--small;
+      margin: -($spacing + $spacing--small) $spacing + $spacing--small 0 $spacing + $spacing--small;
     }
 
     & > * {
@@ -362,7 +361,8 @@ $navigation-row-width: 980px / 3;
         @include inuit-font-size(26px);
       }
 
-      a, button {
+      a,
+      button {
         padding: 0;
         padding-right: $spacing--small;
         border: 0;
@@ -374,7 +374,8 @@ $navigation-row-width: 980px / 3;
         svg {
           transition: transform 100ms ease;
         }
-        &:hover, &:focus {
+        &:hover,
+        &:focus {
           svg {
             transform: translateX($spacing--small / 4);
           }
@@ -386,7 +387,8 @@ $navigation-row-width: 980px / 3;
 
       @include mq($until: tabletWide) {
         width: 100%;
-        a, button {
+        a,
+        button {
           background: $brand-color--lighter;
           box-shadow: none;
           width: 100%;
@@ -402,13 +404,14 @@ $navigation-row-width: 980px / 3;
         }
       }
       @include mq($until: mobileWide) {
-        a, button {
+        a,
+        button {
           padding: 0 $left-margin-narrow-screen;
         }
       }
     }
     &__menu-filter {
-      display:flex;
+      display: flex;
       flex-wrap: wrap;
       margin-top: -$spacing--small;
       button {
@@ -453,7 +456,7 @@ $navigation-row-width: 980px / 3;
 .c-topic-menu__back-button {
   display: flex;
   align-items: center;
-  cursor:pointer;
+  cursor: pointer;
   border: 0;
   padding: 0;
   color: $brand-color;
@@ -484,7 +487,7 @@ $navigation-row-width: 980px / 3;
   .c-topic-menu__back-button-slides {
     display: flex;
     align-items: center;
-    cursor:pointer;
+    cursor: pointer;
     border: 0;
     padding: 0;
     color: $brand-color;
@@ -734,7 +737,6 @@ $navigation-row-width: 980px / 3;
     &:active,
     &:focus {
       background-color: $brand-color--light;
-
     }
   }
 
@@ -745,13 +747,13 @@ $navigation-row-width: 980px / 3;
     height: auto;
     min-height: $link-height;
 
-    .c-topic-menu__link-wrapper{
+    .c-topic-menu__link-wrapper {
       border-bottom: 1px solid $brand-color--dark;
       padding-bottom: $spacing--small;
       display: flex;
       flex-wrap: wrap;
       @include mq($until: tabletWide) {
-        border:0;
+        border: 0;
         padding-bottom: 0;
       }
     }
@@ -871,6 +873,7 @@ $navigation-row-width: 980px / 3;
 
   &-right {
     justify-content: flex-end;
+    margin-right: 16px;
   }
 }
 .c-topic-menu__search {
@@ -940,7 +943,7 @@ $navigation-row-width: 980px / 3;
     padding-right: $spacing + $spacing--small;
   }
   & > nav:first-child {
-    margin-top:0;
+    margin-top: 0;
   }
 }
 

package/src/TreeStructure/AddFolderButton.tsx

@@ -19,6 +19,7 @@ interface AddFolderButtonProps {
   focusedFolder?: FolderType;
   setNewFolderParentId: (id?: string) => void;
   setShowTree: (value: boolean) => void;
+  loading?: boolean;
 }
 
 const StyledAddFolderButton = styled(Button)`
@@ -33,30 +34,28 @@ const StyledPlus = styled(Plus)`
   width: 24px;
 `;
 
-const AddFolderButton = ({ canAddFolder, setNewFolderParentId, focusedFolder, setShowTree }: AddFolderButtonProps) => {
+const AddFolderButton = ({
+  canAddFolder,
+  loading,
+  setNewFolderParentId,
+  focusedFolder,
+  setShowTree,
+}: AddFolderButtonProps) => {
   const { t } = useTranslation();
   const ref = useRef<HTMLButtonElement>(null);
+  const tooltip = loading
+    ? t('loading')
+    : canAddFolder
+    ? t('myNdla.newFolderUnder', { folderName: focusedFolder?.name })
+    : t('treeStructure.maxFoldersAlreadyAdded');
   return (
-    <Tooltip
-      tooltip={
-        canAddFolder
-          ? t('myNdla.newFolderUnder', {
-              folderName: focusedFolder?.name,
-            })
-          : t('treeStructure.maxFoldersAlreadyAdded')
-      }>
+    <Tooltip tooltip={tooltip}>
       <StyledAddFolderButton
         ref={ref}
         variant="outline"
         shape="pill"
-        disabled={!canAddFolder}
-        aria-label={
-          canAddFolder
-            ? t('myNdla.newFolderUnder', {
-                folderName: focusedFolder?.name,
-              })
-            : t('treeStructure.maxFoldersAlreadyAdded')
-        }
+        disabled={loading || !canAddFolder}
+        aria-label={tooltip}
         onMouseDown={(e) => {
           e.preventDefault();
           e.stopPropagation();

package/src/TreeStructure/ComboboxButton.tsx

@@ -6,16 +6,16 @@
  *
  */
 
-import React, { KeyboardEvent } from 'react';
+import React, { KeyboardEvent, forwardRef } from 'react';
 import styled from '@emotion/styled';
 import { useForwardedRef } from '@ndla/util';
 import { breakpoints, colors, mq, spacing } from '@ndla/core';
 import { ChevronUp, ChevronDown } from '@ndla/icons/common';
-import { forwardRef } from 'react';
 import { ButtonV2 as Button, IconButtonV2 as IconButton } from '@ndla/button';
 import { treestructureId } from './helperFunctions';
 import { FolderType, TreeStructureType } from './types';
 import { arrowNavigation } from './arrowNavigation';
+import ContentLoader from '../ContentLoader';
 
 interface StyledRowProps {
   isOpen: boolean;
@@ -52,6 +52,7 @@ interface Props {
   showTree: boolean;
   type: TreeStructureType;
   label?: string;
+  loading?: boolean;
   focusedFolder?: FolderType;
   selectedFolder?: FolderType;
   setSelectedFolder: (folder: FolderType) => void;
@@ -77,6 +78,7 @@ const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
       setFocusedFolder,
       onOpenFolder,
       onCloseFolder,
+      loading,
       ariaDescribedby,
     },
     ref,
@@ -116,25 +118,48 @@ const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
             innerRef.current?.focus();
           }
         }}>
-        <StyledSelectedFolder
-          ref={innerRef}
-          tabIndex={0}
-          id={treestructureId(type, 'combobox')}
-          role="combobox"
-          aria-controls={treestructureId(type, 'popup')}
-          aria-haspopup="tree"
-          aria-expanded={showTree}
-          aria-labelledby={label ? treestructureId(type, 'label') : undefined}
-          aria-activedescendant={focusedFolder ? treestructureId(type, focusedFolder.id) : undefined}
-          aria-describedby={ariaDescribedby}
+        {loading && (
+          <ContentLoader width={1000} height={40}>
+            <rect x="15" y="0" width="1000" rx="3" ry="3" r="15" height="40" />
+          </ContentLoader>
+        )}
+        {!loading && (
+          <StyledSelectedFolder
+            ref={innerRef}
+            tabIndex={0}
+            id={treestructureId(type, 'combobox')}
+            role="combobox"
+            aria-controls={treestructureId(type, 'popup')}
+            aria-haspopup="tree"
+            aria-expanded={showTree}
+            aria-labelledby={label ? treestructureId(type, 'label') : undefined}
+            aria-activedescendant={focusedFolder ? treestructureId(type, focusedFolder.id) : undefined}
+            aria-describedby={ariaDescribedby}
+            variant="ghost"
+            colorTheme="light"
+            fontWeight="normal"
+            shape="sharp"
+            onKeyDown={onKeyDown}
+            onClick={() => {
+              innerRef.current?.focus();
+              onToggleTree(!showTree);
+            }}>
+            {selectedFolder?.name}
+          </StyledSelectedFolder>
+        )}
+        <IconButton
+          disabled={loading}
+          aria-busy={loading}
+          aria-hidden
+          aria-label=""
+          tabIndex={-1}
           variant="ghost"
-          colorTheme="light"
-          fontWeight="normal"
-          shape="sharp"
-          onKeyDown={onKeyDown}>
-          {selectedFolder?.name}
-        </StyledSelectedFolder>
-        <IconButton aria-hidden aria-label="" tabIndex={-1} variant="ghost" colorTheme="greyLighter" size="small">
+          colorTheme="greyLighter"
+          size="small"
+          onClick={() => {
+            innerRef.current?.focus();
+            onToggleTree(!showTree);
+          }}>
           {showTree ? <ChevronUp /> : <ChevronDown />}
         </IconButton>
       </StyledRow>

package/src/TreeStructure/TreeStructure.tsx

@@ -189,6 +189,7 @@ const TreeStructure = ({
         {label && <StyledLabel id={treestructureId(type, 'label')}>{label}</StyledLabel>}
         {type === 'picker' && (
           <AddFolderButton
+            loading={loading}
             canAddFolder={!!canAddFolder}
             focusedFolder={focusedFolder}
             setNewFolderParentId={setNewFolderParentId}
@@ -203,6 +204,7 @@ const TreeStructure = ({
             showTree={showTree}
             type={type}
             label={label}
+            loading={loading}
             focusedFolder={focusedFolder}
             selectedFolder={selectedFolder}
             setSelectedFolder={setSelectedFolder}

package/src/i18n/index.ts

@@ -8,4 +8,3 @@
 
 export { i18nInstance } from './i18n';
 export { formatNestedMessages } from './formatNestedMessages';
-export { formatMessage } from './formatMessage';

package/src/index.ts

@@ -174,7 +174,7 @@ export { default as Breadcrumb, HeaderBreadcrumb, HomeBreadcrumb, ActionBreadcru
 export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from './Breadcrumb';
 
 export type { BreadcrumbItemProps } from './Breadcrumblist';
-export { i18nInstance, formatNestedMessages, formatMessage } from './i18n';
+export { i18nInstance, formatNestedMessages } from './i18n';
 export { default as ResourceGroup } from './ResourceGroup';
 
 export { default as LayoutItem, OneColumn, PageContainer, Content } from './Layout';