@ndla/ui 19.1.0 → 20.0.0

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.0",
+  "version": "20.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,17 +31,18 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^3.1.0",
-    "@ndla/carousel": "^1.2.11",
+    "@ndla/button": "^3.1.3",
+    "@ndla/carousel": "^1.2.12",
     "@ndla/core": "^2.3.0",
+    "@ndla/forms": "^3.1.0",
     "@ndla/hooks": "^1.1.4",
-    "@ndla/icons": "^1.10.0",
-    "@ndla/licenses": "^5.0.2",
-    "@ndla/modal": "^1.2.12",
-    "@ndla/notion": "^3.1.20",
-    "@ndla/safelink": "^2.1.1",
+    "@ndla/icons": "^1.11.0",
+    "@ndla/licenses": "^5.0.3",
+    "@ndla/modal": "^1.2.13",
+    "@ndla/notion": "^3.1.23",
+    "@ndla/safelink": "^2.2.1",
     "@ndla/switch": "^0.1.7",
-    "@ndla/tabs": "^1.1.10",
+    "@ndla/tabs": "^1.1.11",
     "@ndla/tooltip": "^2.1.2",
     "@ndla/util": "^3.0.0",
     "@reach/menu-button": "^0.16.2",
@@ -81,5 +82,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "74b5027e25a33f81802c72b11901d59085bb290a"
+  "gitHead": "92e4a15ab1e19af2c7b1055f56f90f5c415f87e7"
 }

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/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/TreeStructure/FolderItem.tsx

@@ -6,13 +6,14 @@
  *
  */
 
-import React, { useEffect, useRef } from 'react';
+import React, { KeyboardEvent, useEffect, useRef } from 'react';
 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 SafeLink from '@ndla/safelink';
 import { SetFocusedFolderId, FolderChildFuncType } from './TreeStructure.types';
+import { arrowNavigation } from './arrowNavigation';
 
 const OpenButton = styled.button<{ isOpen: boolean }>`
   background: transparent;
@@ -49,7 +50,10 @@ const WrapperForFolderChild = styled.div<{ marked: boolean }>`
   }
 `;
 
-const FolderName = styled.button<{ marked: boolean; noArrow?: boolean }>`
+const FolderName = styled('button', { shouldForwardProp: (name) => !['marked', 'noArrow'].includes(name) })<{
+  marked: boolean;
+  noArrow?: boolean;
+}>`
   line-height: 1;
   background: ${({ marked }) => (marked ? colors.brand.lighter : 'transparent')};
   color: ${colors.text.primary};
@@ -81,16 +85,19 @@ const FolderNameLink = FolderName.withComponent(SafeLink);
 interface Props {
   name: string;
   id: string;
-  onToggleOpen: (id: string) => void;
+  level: number;
+  onCloseFolder: (id: string) => void;
+  onOpenFolder: (id: string) => void;
   onMarkFolder: (id: string) => void;
+  onSelectFolder?: (id: string) => void;
   isOpen: boolean;
   markedFolderId?: string;
   focusedFolderId?: string;
+  visibleFolders: string[];
   loading?: boolean;
   openOnFolderClick?: boolean;
   hideArrow?: boolean;
   setFocusedFolderId: SetFocusedFolderId;
-  url?: string;
   icon?: React.ReactNode;
   noPaddingWhenArrowIsHidden?: boolean;
   folderChild?: FolderChildFuncType;
@@ -99,62 +106,61 @@ interface Props {
 const FolderItem = ({
   hideArrow,
   loading,
+  level,
   name,
   id,
-  onToggleOpen,
+  visibleFolders,
+  onCloseFolder,
+  onOpenFolder,
   onMarkFolder,
+  onSelectFolder,
   isOpen,
   markedFolderId,
   focusedFolderId,
   openOnFolderClick,
   setFocusedFolderId,
   icon,
-  url,
   noPaddingWhenArrowIsHidden,
   folderChild,
 }: Props) => {
-  const folderNameLinkRef = useRef<HTMLAnchorElement | null>(null);
-  const folderNameButtonRef = useRef<HTMLButtonElement | null>(null);
+  const ref = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
+  const marked = markedFolderId === id;
+
+  const handleMarkFolder = () => {
+    onMarkFolder(id);
+    if (openOnFolderClick) {
+      if (isOpen) {
+        onCloseFolder(id);
+      } else {
+        onOpenFolder(id);
+      }
+    }
+  };
+
   useEffect(() => {
     if (focusedFolderId === id) {
-      if (url && folderNameLinkRef.current) {
-        folderNameLinkRef.current.focus();
-      } else if (folderNameButtonRef.current) {
-        folderNameButtonRef.current.focus();
+      if (ref.current) {
+        ref.current.focus();
       }
     }
-  }, [focusedFolderId, folderNameLinkRef, folderNameButtonRef, url, id]);
-  const marked = markedFolderId === id;
+  }, [focusedFolderId, ref, id]);
+
   return (
     <FolderItemWrapper>
       {!hideArrow && (
-        <OpenButton tabIndex={-1} isOpen={isOpen} disabled={loading} onClick={() => onToggleOpen(id)}>
+        <OpenButton
+          tabIndex={-1}
+          isOpen={isOpen}
+          disabled={loading}
+          onClick={() => (isOpen ? onCloseFolder(id) : onOpenFolder(id))}>
           <ArrowDropDown />
         </OpenButton>
       )}
-      {url ? (
-        <FolderNameLink
-          ref={folderNameLinkRef}
-          noArrow={hideArrow}
-          to={loading ? '' : url}
-          tabIndex={marked ? 0 : -1}
-          marked={marked}
-          onFocus={() => {
-            setFocusedFolderId(id);
-          }}
-          onClick={() => {
-            onMarkFolder(id);
-            if (openOnFolderClick) {
-              onToggleOpen(id);
-            }
-          }}>
-          {icon || <FolderOutlined />}
-          {name}
-        </FolderNameLink>
-      ) : (
+      {onSelectFolder ? (
         <>
           <FolderName
-            ref={folderNameButtonRef}
+            ref={ref}
+            onKeyDown={(e) => arrowNavigation(e, id, visibleFolders, setFocusedFolderId, onOpenFolder, onCloseFolder)}
             noArrow={hideArrow && !noPaddingWhenArrowIsHidden}
             tabIndex={marked ? 0 : -1}
             marked={marked}
@@ -163,10 +169,8 @@ const FolderItem = ({
               setFocusedFolderId(id);
             }}
             onClick={() => {
-              onMarkFolder(id);
-              if (openOnFolderClick) {
-                onToggleOpen(id);
-              }
+              handleMarkFolder();
+              onSelectFolder(id);
             }}>
             {icon || <FolderOutlined />}
             {name}
@@ -177,6 +181,25 @@ const FolderItem = ({
             </WrapperForFolderChild>
           )}
         </>
+      ) : (
+        <FolderNameLink
+          ref={ref}
+          onKeyDown={(e: KeyboardEvent<HTMLElement>) =>
+            arrowNavigation(e, id, visibleFolders, setFocusedFolderId, onOpenFolder, onCloseFolder)
+          }
+          noArrow={hideArrow}
+          to={loading ? '' : `/minndla/${level > 1 ? 'folders/' : ''}${id}`}
+          tabIndex={marked || level === 1 ? 0 : -1}
+          marked={marked}
+          onFocus={() => {
+            setFocusedFolderId(id);
+          }}
+          onClick={() => {
+            handleMarkFolder();
+          }}>
+          {icon || <FolderOutlined />}
+          {name}
+        </FolderNameLink>
       )}
     </FolderItemWrapper>
   );