@ndla/ui 19.1.1 → 20.0.2

package/lib/index.d.ts

@@ -34,7 +34,6 @@ 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';
-export { default as Spinner } from './Spinner';
 export { default as SearchResultSleeve } from './Search/SearchResultSleeve';
 export { default as ContentTypeResult } from './Search/ContentTypeResult';
 export { SearchFieldForm } from './Search/SearchFieldForm';

package/lib/index.js

@@ -83,7 +83,6 @@ var _exportNames = {
   Translation: true,
   TranslationLine: true,
   TranslationBox: true,
-  Spinner: true,
   SearchResultSleeve: true,
   ContentTypeResult: true,
   SearchFieldForm: true,
@@ -650,12 +649,6 @@ Object.defineProperty(exports, "TranslationBox", {
     return _Translation.TranslationBox;
   }
 });
-Object.defineProperty(exports, "Spinner", {
-  enumerable: true,
-  get: function get() {
-    return _Spinner["default"];
-  }
-});
 Object.defineProperty(exports, "SearchResultSleeve", {
   enumerable: true,
   get: function get() {
@@ -1336,8 +1329,6 @@ var _LearningPaths = require("./LearningPaths");
 
 var _Translation = require("./Translation");
 
-var _Spinner = _interopRequireDefault(require("./Spinner"));
-
 var _SearchResultSleeve = _interopRequireDefault(require("./Search/SearchResultSleeve"));
 
 var _ContentTypeResult = _interopRequireDefault(require("./Search/ContentTypeResult"));

package/lib/locale/messages-en.d.ts

@@ -62,6 +62,7 @@ declare const messages: {
             folder: string;
             delete: string;
             edit: string;
+            missingName: string;
         };
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
@@ -964,8 +965,10 @@ declare const messages: {
         open: string;
         close: string;
     };
+    cancel: string;
     close: string;
     title: string;
+    save: string;
     image: {
         altText: string;
         caption: string;

package/lib/locale/messages-en.js

@@ -823,8 +823,10 @@ var messages = _objectSpread(_objectSpread({
     open: 'Open menu',
     close: 'Close menu'
   },
+  cancel: 'Cancel',
   close: 'Close',
   title: 'Title',
+  save: 'Save',
   image: {
     altText: 'Alt-text',
     caption: 'Caption',
@@ -954,7 +956,8 @@ var messages = _objectSpread(_objectSpread({
     folder: {
       folder: 'Folder',
       "delete": 'Delete',
-      edit: 'Edit'
+      edit: 'Edit',
+      missingName: 'Folder name required'
     },
     confirmDeleteFolder: 'Are you sure you want to delete this folder? This process cannot be undone.',
     confirmDeleteTag: 'Are you sure you want to delete this tag? This process cannot be undone.',

package/lib/locale/messages-nb.d.ts

@@ -62,6 +62,7 @@ declare const messages: {
             folder: string;
             delete: string;
             edit: string;
+            missingName: string;
         };
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
@@ -966,6 +967,8 @@ declare const messages: {
     };
     close: string;
     title: string;
+    cancel: string;
+    save: string;
     image: {
         altText: string;
         caption: string;

package/lib/locale/messages-nb.js

@@ -825,6 +825,8 @@ var messages = _objectSpread(_objectSpread({
   },
   close: 'Lukk',
   title: 'Tittel',
+  cancel: 'Avbryt',
+  save: 'Lagre',
   image: {
     altText: 'Alt-tekst',
     caption: 'Bildetekst',
@@ -954,7 +956,8 @@ var messages = _objectSpread(_objectSpread({
     folder: {
       folder: 'Mappe',
       "delete": 'Slett',
-      edit: 'Rediger'
+      edit: 'Rediger',
+      missingName: 'Mappenavn er påkrevd'
     },
     confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke angres.',
     confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlingen kan ikke angres.',

package/lib/locale/messages-nn.d.ts

@@ -62,6 +62,7 @@ declare const messages: {
             folder: string;
             delete: string;
             edit: string;
+            missingName: string;
         };
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
@@ -964,8 +965,10 @@ declare const messages: {
         open: string;
         close: string;
     };
+    cancel: string;
     close: string;
     title: string;
+    save: string;
     image: {
         altText: string;
         caption: string;

package/lib/locale/messages-nn.js

@@ -823,8 +823,10 @@ var messages = _objectSpread(_objectSpread({
     open: 'Åpne meny',
     close: 'Lukk meny'
   },
+  cancel: 'Avbryt',
   close: 'Lukk',
   title: 'Tittel',
+  save: 'Lagre',
   image: {
     altText: 'Alt-tekst',
     caption: 'Bilettekst',
@@ -954,7 +956,8 @@ var messages = _objectSpread(_objectSpread({
     folder: {
       folder: 'Mappe',
       "delete": 'Slett',
-      edit: 'Rediger'
+      edit: 'Rediger',
+      missingName: 'Mappenavn er påkrevd'
     },
     confirmDeleteFolder: 'Er du sikker på at du vil slette mappa? Denne handlinga kan ikkje angres.',
     confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlinga kan ikkje angres.',

package/lib/locale/messages-se.d.ts

@@ -62,6 +62,7 @@ declare const messages: {
             folder: string;
             delete: string;
             edit: string;
+            missingName: string;
         };
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
@@ -964,8 +965,10 @@ declare const messages: {
         open: string;
         close: string;
     };
+    cancel: string;
     close: string;
     title: string;
+    save: string;
     image: {
         altText: string;
         caption: string;

package/lib/locale/messages-se.js

@@ -823,8 +823,10 @@ var messages = _objectSpread(_objectSpread({
     open: 'Åpne meny',
     close: 'Lukk meny'
   },
+  cancel: 'Avbryt',
   close: 'Lukk',
   title: 'Tittel',
+  save: 'Lagre',
   image: {
     altText: 'Alt-tekst',
     caption: 'Bilettekst',
@@ -954,7 +956,8 @@ var messages = _objectSpread(_objectSpread({
     folder: {
       folder: 'Mappe',
       "delete": 'Slett',
-      edit: 'Rediger'
+      edit: 'Rediger',
+      missingName: 'Mappenavn er påkrevd'
     },
     confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke angres.',
     confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlingen kan ikke angres.',

package/lib/locale/messages-sma.d.ts

@@ -62,6 +62,7 @@ declare const messages: {
             folder: string;
             delete: string;
             edit: string;
+            missingName: string;
         };
         confirmDeleteFolder: string;
         confirmDeleteTag: string;
@@ -964,8 +965,10 @@ declare const messages: {
         open: string;
         close: string;
     };
+    cancel: string;
     close: string;
     title: string;
+    save: string;
     image: {
         altText: string;
         caption: string;

package/lib/locale/messages-sma.js

@@ -823,8 +823,10 @@ var messages = _objectSpread(_objectSpread({
     open: 'Åpne meny',
     close: 'Lukk meny'
   },
+  cancel: 'Avbryt',
   close: 'Lukk',
   title: 'Tittel',
+  save: 'Lagre',
   image: {
     altText: 'Alt-tekst',
     caption: 'Bilettekst',
@@ -954,7 +956,8 @@ var messages = _objectSpread(_objectSpread({
     folder: {
       folder: 'Mappe',
       "delete": 'Slett',
-      edit: 'Rediger'
+      edit: 'Rediger',
+      missingName: 'Mappenavn er påkrevd'
     },
     confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke angres.',
     confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlingen kan ikke angres.',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "19.1.1",
+  "version": "20.0.2",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,18 +31,19 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^3.1.1",
-    "@ndla/carousel": "^1.2.11",
-    "@ndla/core": "^2.3.0",
+    "@ndla/button": "^3.1.5",
+    "@ndla/carousel": "^1.2.14",
+    "@ndla/core": "^2.3.2",
+    "@ndla/forms": "^3.1.2",
     "@ndla/hooks": "^1.1.4",
-    "@ndla/icons": "^1.10.0",
-    "@ndla/licenses": "^5.0.2",
-    "@ndla/modal": "^1.2.12",
-    "@ndla/notion": "^3.1.21",
-    "@ndla/safelink": "^2.1.2",
-    "@ndla/switch": "^0.1.7",
-    "@ndla/tabs": "^1.1.10",
-    "@ndla/tooltip": "^2.1.2",
+    "@ndla/icons": "^1.11.2",
+    "@ndla/licenses": "^5.0.5",
+    "@ndla/modal": "^1.2.15",
+    "@ndla/notion": "^3.1.25",
+    "@ndla/safelink": "^2.2.3",
+    "@ndla/switch": "^0.1.9",
+    "@ndla/tabs": "^1.1.13",
+    "@ndla/tooltip": "^2.1.4",
     "@ndla/util": "^3.0.0",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
@@ -81,5 +82,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "38b047f42fcb12c9b44d18246479c51f22d8bf63"
+  "gitHead": "8181e40829a9cbd8f2aaa1ccfb4dfdafa8560a5c"
 }

package/src/Masthead/Masthead.tsx

@@ -95,7 +95,10 @@ export const Masthead = ({
       )}
       <div id="masthead" {...classes('', { fixed: !!fixed, infoContent: !!infoContent, ndlaFilm: !!ndlaFilm })}>
         {messages?.map((message) => (
-          <MessageBanner showCloseButton={message.closable} onClose={() => onCloseAlert?.(message.number)}>
+          <MessageBanner
+            key={message.number}
+            showCloseButton={message.closable}
+            onClose={() => onCloseAlert?.(message.number)}>
             {message.content}
           </MessageBanner>
         ))}

package/src/Messages/MessageBanner.tsx

@@ -24,7 +24,7 @@ const MessageBannerWrapper = styled.div<WrapperProps>`
   padding: ${({ small }) => (small ? spacing.xxsmall : spacing.small)};
   background: ${colors.support.yellowLight};
   color: ${colors.brand.greyDark};
-  border: none;
+  border-bottom: solid 1px ${colors.white};
 `;
 
 const TextWrapper = styled.div`

package/src/MyNdla/Resource/FolderInput.tsx

@@ -10,24 +10,17 @@ import styled from '@emotion/styled';
 import { IconButton } from '@ndla/button';
 import { FolderOutlined } from '@ndla/icons/contentType';
 import { Cross } from '@ndla/icons/action';
-import React, { ChangeEvent, KeyboardEvent, useEffect, useRef, useState } from 'react';
+import React, { ChangeEvent, KeyboardEvent, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { colors, spacing } from '@ndla/core';
+import { Input } from '@ndla/forms';
+import { css } from '@emotion/core';
 
 // Source: https://kovart.github.io/dashed-border-generator/
 const borderStyle = `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='${encodeURIComponent(
   colors.brand.tertiary,
 )}' stroke-width='2' stroke-dasharray='8%2c8' stroke-dashoffset='4' stroke-linecap='square'/%3e%3c/svg%3e")`;
 
-const FolderInputWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: ${spacing.small};
-
-  background-image: ${borderStyle};
-`;
-
 const StyledFolderIcon = styled.span`
   display: flex;
   padding: ${spacing.small};
@@ -38,29 +31,33 @@ const StyledFolderIcon = styled.span`
   }
 `;
 
-const StyledInput = styled.input`
-  color: ${colors.brand.primary};
-  outline: none;
+const inputWrapperStyle = css`
+  padding: ${spacing.small};
+  background: none;
+  background-image: ${borderStyle};
   border: none;
-  margin-right: auto;
-  line-height: 1.75em;
+`;
 
-  ::selection {
-    background: ${colors.brand.lighter};
+const StyledInput = styled(Input)`
+  && {
+    line-height: 1.75em;
+    color: ${colors.brand.primary};
+    ::selection {
+      background: ${colors.brand.lighter};
+    }
   }
 `;
 
 interface Props {
   onAddFolder: (name: string) => void;
   onClose: () => void;
-  autoFocus?: boolean;
+  autoSelect?: boolean;
 }
 
-const FolderInput = ({ onAddFolder, onClose, autoFocus }: Props) => {
+const FolderInput = ({ onAddFolder, onClose, autoSelect }: Props) => {
   const { t } = useTranslation();
   const newFolderText = t('treeStructure.newFolder.defaultName');
   const [input, setInput] = useState<string>(newFolderText);
-  const [mounted, setMounted] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -68,36 +65,36 @@ const FolderInput = ({ onAddFolder, onClose, autoFocus }: Props) => {
   };
 
   const onKeydown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter' && input) {
+    if (e.key === 'Enter' && input.trim()) {
       e.preventDefault();
       onAddFolder(input);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      onClose();
     }
   };
 
-  useEffect(() => {
-    if (mounted && autoFocus) {
-      inputRef.current?.select();
-    } else {
-      setMounted(true);
-    }
-  }, [mounted, autoFocus]);
-
   return (
-    <FolderInputWrapper>
-      <StyledFolderIcon>
-        <FolderOutlined />
-      </StyledFolderIcon>
-      <StyledInput
-        ref={inputRef}
-        value={input}
-        onChange={handleInputChange}
-        onKeyDown={onKeydown}
-        aria-label={newFolderText}
-      />
-      <IconButton aria-label={t('close')} size="small" ghostPill onClick={onClose}>
-        <Cross />
-      </IconButton>
-    </FolderInputWrapper>
+    <StyledInput
+      autoSelect={autoSelect}
+      customCss={inputWrapperStyle}
+      warningText={!input.trim() ? t('myNdla.folder.missingName') : undefined}
+      ref={inputRef}
+      value={input}
+      onChange={handleInputChange}
+      onKeyDown={onKeydown}
+      aria-label={newFolderText}
+      iconLeft={
+        <StyledFolderIcon>
+          <FolderOutlined />
+        </StyledFolderIcon>
+      }
+      iconRight={
+        <IconButton aria-label={t('close')} size="small" ghostPill onClick={onClose}>
+          <Cross />
+        </IconButton>
+      }
+    />
   );
 };
 

package/src/NDLAFilm/FilmSlideshow.tsx

@@ -12,8 +12,8 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { breakpoints, mq, spacing, spacingUnit, fonts, colors } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
+import { Spinner } from '@ndla/icons';
 import { OneColumn } from '../Layout';
-import Spinner from '../Spinner';
 import NavigationArrow, { StyledNavigationArrow } from './NavigationArrow';
 import SlideshowIndicator from './SlideshowIndicator';
 import { MovieType } from './types';

package/src/Resource/ListResource.tsx

@@ -88,6 +88,7 @@ const StyledImageWrapper = styled.div<StyledImageProps>`
     width: 54px;
     height: 40px;
   }
+  overflow: hidden;
 `;
 
 const StyledImage = styled(Image)`

package/src/Search/LoadingWrapper.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { spacing, spacingUnit, animations } from '@ndla/core';
-import Spinner from '../Spinner';
+import { Spinner } from '@ndla/icons';
 
 const StyledWrapper = styled.div`
   position: absolute;

package/src/Search/SearchResult.jsx

@@ -9,7 +9,7 @@ import Button from '@ndla/button';
 import { FilterTabs } from '@ndla/tabs';
 import Tooltip from '@ndla/tooltip';
 import SafeLink from '@ndla/safelink';
-import Spinner from '../../lib/Spinner';
+import { Spinner } from '@ndla/icons';
 
 const resultClasses = BEMHelper('c-search-result');
 

package/src/SearchTypeResult/SearchTypeResult.tsx

@@ -9,7 +9,7 @@
 import React, { memo, ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';
-import Spinner from '../Spinner';
+import { Spinner } from '@ndla/icons';
 import constants from '../model';
 import SearchTypeHeader, { FilterOptionsType } from './SearchTypeHeader';
 import SearchItems from './SearchItems';

package/src/TopicMenu/TopicMenu.jsx

@@ -74,6 +74,7 @@ export const TopicMenu = ({
   currentProgramme,
   initialSelectedMenu,
   messages,
+  closeAlert,
   selectedGrade,
   onGradeChange,
 }) => {
@@ -149,11 +150,15 @@ export const TopicMenu = ({
   const disableSubTopic = disableMain && hasExpandedSubtopics;
 
   const sliderCounter = !expandedTopicId ? 0 : expandedSubtopicsId.length + 1;
-
   return (
     <nav>
       {messages?.map((message) => (
-        <MessageBanner>{message}</MessageBanner>
+        <MessageBanner
+          key={message.number}
+          showCloseButton={message.closable}
+          onClose={() => closeAlert?.(message.number)}>
+          {message.content}
+        </MessageBanner>
       ))}
       <ModalHeader modifier={['white', 'menu']}>
         <div {...classes('masthead-left')}>
@@ -358,6 +363,7 @@ TopicMenu.propTypes = {
   topics: PropTypes.arrayOf(TopicShape).isRequired,
   toFrontpage: PropTypes.func.isRequired,
   toTopic: PropTypes.func,
+  closeAlert: PropTypes.func,
   toSubject: PropTypes.func,
   close: PropTypes.func,
   defaultCount: PropTypes.number,
@@ -369,6 +375,13 @@ TopicMenu.propTypes = {
   hideSearch: PropTypes.bool,
   searchFieldComponent: PropTypes.node,
   locale: PropTypes.string,
+  messages: PropTypes.arrayOf(
+    PropTypes.shape({
+      content: PropTypes.string.isRequired,
+      closable: PropTypes.bool.isRequired,
+      number: PropTypes.number.isRequired,
+    }),
+  ),
   subjectCategories: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string.isRequired,