@ndla/ui 30.8.3 → 30.9.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/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';

package/es/i18n/formatMessage.js

@@ -1,45 +0,0 @@
-/**
- * Copyright (c) 2017-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import invariant from 'invariant';
-export var formatMessage = function formatMessage(locale, messages, getMessageFormat, id) {
-  var values = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
-  // `id` is a required parameter.
-  invariant(id, 'An `id` must be provided to format a message.');
-  var message = messages && messages[id];
-  var hasValues = Object.keys(values).length > 0;
-
-  // Avoid expensive message formatting for simple messages without values. In
-  // development messages will always be formatted in case of missing values.
-  if (!hasValues && process.env.NODE_ENV === 'production') {
-    return message || id;
-  }
-  var formattedMessage;
-  if (message) {
-    try {
-      var formatter = getMessageFormat(message, locale, {});
-      formattedMessage = formatter.format(values);
-    } catch (e) {
-      if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line no-console
-        console.error("Error formatting message: \"".concat(id, "\" for locale: \"").concat(locale, "\"\n").concat(e));
-      }
-    }
-  } else if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line no-console
-    console.error("Missing message: \"".concat(id, "\" for locale: \"").concat(locale, "\", using id as fallback"));
-    return id;
-  }
-  if (!formattedMessage) {
-    if (process.env.NODE_ENV !== 'production') {
-      // eslint-disable-next-line no-console
-      console.error("Cannot format message: \"".concat(id, "\", using message source as fallback."));
-    }
-  }
-  return formattedMessage || message || id;
-};

package/lib/i18n/formatMessage.d.ts

@@ -1,14 +0,0 @@
-/**
- * Copyright (c) 2017-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-interface Messages {
-    [key: string]: string;
-}
-export declare const formatMessage: (locale: string, messages: Messages, getMessageFormat: any, id: string, values?: {
-    [key: string]: any;
-}) => string;
-export {};

package/lib/i18n/formatMessage.js

@@ -1,53 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.formatMessage = void 0;
-var _invariant = _interopRequireDefault(require("invariant"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-/**
- * Copyright (c) 2017-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-var formatMessage = function formatMessage(locale, messages, getMessageFormat, id) {
-  var values = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
-  // `id` is a required parameter.
-  (0, _invariant["default"])(id, 'An `id` must be provided to format a message.');
-  var message = messages && messages[id];
-  var hasValues = Object.keys(values).length > 0;
-
-  // Avoid expensive message formatting for simple messages without values. In
-  // development messages will always be formatted in case of missing values.
-  if (!hasValues && process.env.NODE_ENV === 'production') {
-    return message || id;
-  }
-  var formattedMessage;
-  if (message) {
-    try {
-      var formatter = getMessageFormat(message, locale, {});
-      formattedMessage = formatter.format(values);
-    } catch (e) {
-      if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line no-console
-        console.error("Error formatting message: \"".concat(id, "\" for locale: \"").concat(locale, "\"\n").concat(e));
-      }
-    }
-  } else if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line no-console
-    console.error("Missing message: \"".concat(id, "\" for locale: \"").concat(locale, "\", using id as fallback"));
-    return id;
-  }
-  if (!formattedMessage) {
-    if (process.env.NODE_ENV !== 'production') {
-      // eslint-disable-next-line no-console
-      console.error("Cannot format message: \"".concat(id, "\", using message source as fallback."));
-    }
-  }
-  return formattedMessage || message || id;
-};
-exports.formatMessage = formatMessage;

package/src/i18n/__tests__/formatMessage-test.ts

@@ -1,34 +0,0 @@
-/**
- * Copyright (c) 2016-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-/* eslint-env jest */
-import IntlMessageFormat from 'intl-messageformat';
-import memoizeIntlConstructor from 'intl-format-cache';
-import { formatMessage } from '../formatMessage';
-
-const getMessageFormat = memoizeIntlConstructor(IntlMessageFormat);
-const locale = 'nb';
-const messages = {
-  helloworld: 'Hello world',
-  'test.me': 'Test me {test}',
-  'welcome.to.my.unittest': 'Welcome to my unittest',
-};
-
-test('@ndla/i18n/formatMessage message with matching ID', () => {
-  expect(formatMessage(locale, messages, getMessageFormat, 'helloworld')).toBe('Hello world');
-});
-test('@ndla/i18n/formatMessage message without matching ID', () => {
-  expect(formatMessage(locale, messages, getMessageFormat, 'does.not.exists')).toBe('does.not.exists');
-});
-test('@ndla/i18n/formatMessage matching message with value', () => {
-  expect(
-    formatMessage(locale, messages, getMessageFormat, 'test.me', {
-      test: '1337',
-    }),
-  ).toBe('Test me 1337');
-});

package/src/i18n/formatMessage.ts

@@ -1,61 +0,0 @@
-/**
- * Copyright (c) 2017-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import invariant from 'invariant';
-
-interface Messages {
-  [key: string]: string;
-}
-
-export const formatMessage = (
-  locale: string,
-  messages: Messages,
-  getMessageFormat: any,
-  id: string,
-  values: { [key: string]: any } = {},
-): string => {
-  // `id` is a required parameter.
-  invariant(id, 'An `id` must be provided to format a message.');
-
-  const message = messages && messages[id];
-  const hasValues = Object.keys(values).length > 0;
-
-  // Avoid expensive message formatting for simple messages without values. In
-  // development messages will always be formatted in case of missing values.
-  if (!hasValues && process.env.NODE_ENV === 'production') {
-    return message || id;
-  }
-
-  let formattedMessage;
-
-  if (message) {
-    try {
-      const formatter = getMessageFormat(message, locale, {});
-
-      formattedMessage = formatter.format(values);
-    } catch (e) {
-      if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line no-console
-        console.error(`Error formatting message: "${id}" for locale: "${locale}"\n${e}`);
-      }
-    }
-  } else if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line no-console
-    console.error(`Missing message: "${id}" for locale: "${locale}", using id as fallback`);
-    return id;
-  }
-
-  if (!formattedMessage) {
-    if (process.env.NODE_ENV !== 'production') {
-      // eslint-disable-next-line no-console
-      console.error(`Cannot format message: "${id}", using message source as fallback.`);
-    }
-  }
-
-  return formattedMessage || message || id;
-};