@ndla/ui 17.0.0 → 18.0.0

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

@@ -64,6 +64,8 @@ declare const messages: {
         newFolderUnder: string;
         myAccount: string;
         favourites: string;
+        addToFavourites: string;
+        alreadyFavourited: string;
         help: string;
         more: string;
         listView: string;
@@ -124,6 +126,10 @@ declare const messages: {
         help: string;
     };
     treeStructure: {
+        folderChildOptions: {
+            edit: string;
+            delete: string;
+        };
         createFolder: string;
         newFolder: {
             placeholder: string;
@@ -131,6 +137,7 @@ declare const messages: {
         };
     };
     tagSelector: {
+        label: string;
         placeholder: string;
         removeTag: string;
         hideAllTags: string;

package/lib/locale/messages-nn.js

@@ -29,15 +29,20 @@ var titleTemplate = ' - NDLA';
 
 var messages = _objectSpread(_objectSpread({
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Endre mappenamn',
+      "delete": 'Slett'
+    },
     createFolder: 'Lag mappe',
     newFolder: {
-      placeholder: 'Skriv navn på mappe',
+      placeholder: 'Skriv namn på mappe',
       defaultName: 'Ny mappe'
     }
   },
   tagSelector: {
-    placeholder: 'Tilknytt tag',
-    removeTag: 'Ta vekk tilknytninga til {{name}}',
+    label: 'Legg til tag',
+    placeholder: 'Skriv tag namn',
+    removeTag: 'Ta vekk {{name}}',
     hideAllTags: 'Skjul alle tagger',
     showAllTags: 'Vis alle tagger'
   },
@@ -951,6 +956,8 @@ var messages = _objectSpread(_objectSpread({
     newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favorittar',
+    addToFavourites: 'Legg til i mine favorittar',
+    alreadyFavourited: 'Allereie lagt til i mine favorittar',
     help: 'Hjelp',
     more: 'Fleire val',
     listView: 'Listevisning',

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

@@ -64,6 +64,8 @@ declare const messages: {
         newFolderUnder: string;
         myAccount: string;
         favourites: string;
+        addToFavourites: string;
+        alreadyFavourited: string;
         help: string;
         more: string;
         listView: string;
@@ -124,6 +126,10 @@ declare const messages: {
         help: string;
     };
     treeStructure: {
+        folderChildOptions: {
+            edit: string;
+            delete: string;
+        };
         createFolder: string;
         newFolder: {
             placeholder: string;
@@ -131,6 +137,7 @@ declare const messages: {
         };
     };
     tagSelector: {
+        label: string;
         placeholder: string;
         removeTag: string;
         hideAllTags: string;

package/lib/locale/messages-se.js

@@ -29,6 +29,10 @@ var titleTemplate = ' - NDLA';
 
 var messages = _objectSpread(_objectSpread({
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Endre mappenavn',
+      "delete": 'Slett'
+    },
     createFolder: 'Lag mappe',
     newFolder: {
       placeholder: 'Skriv navn på mappe',
@@ -36,8 +40,9 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   tagSelector: {
-    placeholder: 'Legg til tag',
-    removeTag: 'Ta vekk tilknytninga til {{name}}',
+    label: 'Legg til tag',
+    placeholder: 'Skriv tag navn',
+    removeTag: 'Ta vekk {{name}}',
     hideAllTags: 'Skjul alla tags',
     showAllTags: 'Vis alla tags'
   },
@@ -951,6 +956,8 @@ var messages = _objectSpread(_objectSpread({
     newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favoritter',
+    addToFavourites: 'Legg til i mine favoritter',
+    alreadyFavourited: 'Allerede lagt til i mine favoritter',
     help: 'Hjelp',
     more: 'Flere valg',
     listView: 'Listevisning',

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

@@ -64,6 +64,8 @@ declare const messages: {
         newFolderUnder: string;
         myAccount: string;
         favourites: string;
+        addToFavourites: string;
+        alreadyFavourited: string;
         help: string;
         more: string;
         listView: string;
@@ -124,6 +126,10 @@ declare const messages: {
         help: string;
     };
     treeStructure: {
+        folderChildOptions: {
+            edit: string;
+            delete: string;
+        };
         createFolder: string;
         newFolder: {
             placeholder: string;
@@ -131,6 +137,7 @@ declare const messages: {
         };
     };
     tagSelector: {
+        label: string;
         placeholder: string;
         removeTag: string;
         hideAllTags: string;

package/lib/locale/messages-sma.js

@@ -29,6 +29,10 @@ var titleTemplate = ' - NDLA';
 
 var messages = _objectSpread(_objectSpread({
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Endre mappenavn',
+      "delete": 'Slett'
+    },
     createFolder: 'Lag mappe',
     newFolder: {
       placeholder: 'Skriv navn på mappe',
@@ -36,8 +40,9 @@ var messages = _objectSpread(_objectSpread({
     }
   },
   tagSelector: {
-    placeholder: 'Tilknytt tag',
-    removeTag: 'Ta vekk tilknytning til {{name}}',
+    label: 'Legg til tag',
+    placeholder: 'Skriv tag navn',
+    removeTag: 'Ta vekk {{name}}',
     hideAllTags: 'Skjul alle tagger',
     showAllTags: 'Vis alle tagger'
   },
@@ -951,6 +956,8 @@ var messages = _objectSpread(_objectSpread({
     newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favoritter',
+    addToFavourites: 'Legg til i mine favoritter',
+    alreadyFavourited: 'Allerede lagt til i mine favoritter',
     help: 'Hjelp',
     more: 'Flere valg',
     listView: 'Listevisning',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "17.0.0",
+  "version": "18.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,15 +31,15 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^2.5.1",
+    "@ndla/button": "^2.6.0",
     "@ndla/carousel": "^1.2.11",
     "@ndla/core": "^2.3.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.16",
-    "@ndla/safelink": "^2.0.7",
+    "@ndla/notion": "^3.1.17",
+    "@ndla/safelink": "^2.0.8",
     "@ndla/switch": "^0.1.7",
     "@ndla/tabs": "^1.1.10",
     "@ndla/tooltip": "^2.1.2",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "224c9c0d69875fa7d84a591cfbf15b6df340adc5"
+  "gitHead": "917673dcc652e2cbc9106b8b4c30cd393c00cff5"
 }

package/src/Article/ArticleFavoritesButton.tsx

@@ -23,14 +23,15 @@ export const ArticleFavoritesButton = ({ isFavorite, onToggleAddToFavorites, art
   const removeFromFavoritesLabel = t('myNdla.resource.addToMyNdla');
   const addToFavoritesLabel = t('myNdla.resource.addedToMyNdla');
   return (
-    <Tooltip tooltip={isFavorite ? removeFromFavoritesLabel : addToFavoritesLabel}>
+    <Tooltip tooltip={isFavorite ? addToFavoritesLabel : removeFromFavoritesLabel}>
       <IconButtonDualStates
-        ariaLabelActive={addToFavoritesLabel}
-        ariaLabelInActive={removeFromFavoritesLabel}
+        ariaLabelActive={t('myNdla.addToFavourites')}
+        ariaLabelInActive={t('myNdla.alreadyFavourited')}
         activeIcon={<Heart />}
         inactiveIcon={<HeartOutline />}
         active={isFavorite}
         size="small"
+        ghostPill
         onClick={() => onToggleAddToFavorites(articleId, !isFavorite)}
       />
     </Tooltip>

package/src/MyNdla/Resource/Folder.tsx

@@ -59,7 +59,7 @@ const FolderWrapper = styled(SafeLink)`
   display: flex;
   align-items: center;
   padding: ${spacing.small};
-  border: 1px solid ${colors.brand.light};
+  border: 1px solid ${colors.brand.neutral7};
   border-radius: 2px;
   box-shadow: none;
   text-decoration: none;

package/src/MyNdla/index.ts

@@ -1,4 +1,3 @@
 import Folder from './Resource/Folder';
 import FolderInput from './Resource/FolderInput';
-import { VerticalNavigation } from './Navigation';
-export { VerticalNavigation, Folder, FolderInput };
+export { Folder, FolderInput };

package/src/Resource/ListResource.tsx

@@ -47,7 +47,7 @@ const ResourceWrapper = styled(SafeLink)`
   text-decoration: none;
   box-shadow: none;
   padding: ${spacing.small};
-  border: 1px solid ${colors.brand.light};
+  border: 1px solid ${colors.brand.neutral7};
   border-radius: 2px;
   color: ${colors.brand.greyDark};
   gap: 0 ${spacing.small};

package/src/TagSelector/SuggestionInput.tsx

@@ -19,6 +19,39 @@ import { uuid } from '@ndla/util';
 import Suggestions from './Suggestions';
 import type { TagType } from './TagSelector';
 
+const SuggestionTextWrapper = styled.div`
+  ${fonts.sizes(18)};
+  position: absolute;
+  display: flex;
+  flex-grow: 1;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+  max-height: ${spacing.large};
+  padding: 8.333px;
+  padding-right: ${spacing.large};
+  span {
+    color: ${colors.brand.grey};
+    white-space: nowrap;
+    overflow: hidden !important;
+    text-overflow: ellipsis;
+    &:first-of-type {
+      color: transparent;
+    }
+  }
+`;
+
+const SuggestionText = ({ value, suggestionValue }: { value: string; suggestionValue: string }) => (
+  <SuggestionTextWrapper>
+    {!!value && (
+      <>
+        <span>{value}</span>
+        <span>{suggestionValue.substring(value.length)}</span>
+      </>
+    )}
+  </SuggestionTextWrapper>
+);
+
 const Cross = styled(CrossRaw)`
   margin-left: ${spacing.xxsmall};
 `;
@@ -31,15 +64,18 @@ const StyledInput = styled.input`
   flex-grow: 1;
   border: 0;
   outline: none;
-  background: transparent;
   ${fonts.sizes(18)};
+  z-index: 1;
+  position: relative;
+  background: transparent;
 `;
+
 const StyledInputWrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: ${spacing.xsmall};
   padding: ${spacing.small};
-  border: 1px solid ${colors.brand.greyLighter};
+  border: 1px solid ${colors.brand.neutral7};
   transition: border-color ${animations.durations.normal} ease;
   border-radius: ${misc.borderRadius};
   &:focus-within {
@@ -50,6 +86,12 @@ const StyledInputWrapper = styled.div`
 const CombinedInputAndDropdownWrapper = styled.div`
   display: flex;
   flex-grow: 1;
+  position: relative;
+`;
+
+const StyledTagButton = styled(Button)<{ enableTagButtonAnimation: boolean }>`
+  ${({ enableTagButtonAnimation }) =>
+    enableTagButtonAnimation ? animations.fadeInScaled(animations.durations.slow) : ''}
 `;
 
 interface SuggestionInputProps {
@@ -90,6 +132,7 @@ const SuggestionInput = ({
   const inputRef = useRef<HTMLInputElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const suggestionIdRef = useRef<string>(uuid());
+  const initalTags = useRef<string[]>(addedTags.map(({ id }) => id));
 
   useEffect(() => {
     setCurrentHighlightedIndex(0);
@@ -122,7 +165,8 @@ const SuggestionInput = ({
     <SuggestionInputContainer ref={containerRef}>
       <StyledInputWrapper>
         {addedTags.map(({ id, name }) => (
-          <Button
+          <StyledTagButton
+            enableTagButtonAnimation={!initalTags.current.includes(id)}
             aria-label={t('tagSelector.removeTag', { name })}
             onClick={() => onToggleTag(id)}
             light
@@ -132,9 +176,12 @@ const SuggestionInput = ({
             {prefix}
             {name}
             <Cross />
-          </Button>
+          </StyledTagButton>
         ))}
         <CombinedInputAndDropdownWrapper>
+          {suggestions[currentHighlightedIndex] && (
+            <SuggestionText value={value} suggestionValue={suggestions[currentHighlightedIndex].name} />
+          )}
           <StyledInput
             placeholder={t('tagSelector.placeholder')}
             value={value}
@@ -157,38 +204,57 @@ const SuggestionInput = ({
             }}
             ref={inputRef}
             onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+              if (!['Enter', ' ', 'Tab', 'ArrowDown', 'ArrowUp', 'Backspace'].includes(e.key)) {
+                return;
+              }
+              const trimmedValue = value.replace(/\s/g, '');
               if (e.key === 'Escape') {
                 setExpanded(false);
                 e.preventDefault();
-              } else if (e.key === 'Enter' || e.key === 'Tab') {
-                if (value !== '' || expanded) {
-                  if (suggestions.length > 0) {
-                    if (!hasBeenAdded(suggestions[currentHighlightedIndex].id)) {
-                      onToggleTag(suggestions[currentHighlightedIndex].id);
-                    }
-                    setInputValue('');
-                    if (e.key === 'Enter') {
-                      e.preventDefault();
-                    }
-                  } else {
-                    onCreateTag(value);
-                    setInputValue('');
-                    e.preventDefault();
-                  }
-                } else if (e.key === 'Enter') {
-                  e.preventDefault();
-                }
-              } else if (e.key === 'ArrowUp') {
+                return;
+              }
+              if (e.key === 'Backspace' && trimmedValue === '' && addedTags.length) {
+                // Remove the added last tag
+                onToggleTag(addedTags[addedTags.length - 1].id);
+                return;
+              }
+              if (e.key === 'ArrowUp') {
                 setCurrentHighlightedIndex(
                   currentHighlightedIndex - 1 < 0 ? suggestions.length - 1 : currentHighlightedIndex - 1,
                 );
                 e.preventDefault();
-              } else if (e.key === 'ArrowDown') {
+                return;
+              }
+              if (e.key === 'ArrowDown') {
                 setCurrentHighlightedIndex(
                   currentHighlightedIndex + 1 >= suggestions.length ? 0 : currentHighlightedIndex + 1,
                 );
                 e.preventDefault();
+                return;
+              }
+              if (trimmedValue === '' && !expanded) {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                }
+                return;
+              }
+              if (e.key === 'Enter' || e.key === 'Tab' || e.key === ' ') {
+                if (suggestions.length > 0) {
+                  if (!hasBeenAdded(suggestions[currentHighlightedIndex].id)) {
+                    onToggleTag(suggestions[currentHighlightedIndex].id);
+                  } else if (trimmedValue.length < suggestions[currentHighlightedIndex].name.length) {
+                    onCreateTag(trimmedValue);
+                    e.preventDefault();
+                  }
+                  setInputValue('');
+                  e.preventDefault();
+                  return;
+                }
+                onCreateTag(trimmedValue);
+                setInputValue('');
+                e.preventDefault();
               }
+              return;
             }}
           />
           <Tooltip tooltip={expanded ? t('tagSelector.hideAllTags') : t('tagSelector.showAllTags')}>

package/src/TagSelector/Suggestions.tsx

@@ -8,6 +8,7 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
+import { css } from '@emotion/core';
 import { Check } from '@ndla/icons/editor';
 import { spacing, colors, misc, animations, fonts, shadows } from '@ndla/core';
 import Button from '@ndla/button';
@@ -60,6 +61,7 @@ interface SuggestionButtonProps {
 const SuggestionButton = styled(Button)<SuggestionButtonProps>`
   display: flex;
   justify-content: space-between;
+  align-items: center;
   ${fonts.sizes(18)};
   transition: ${misc.transition.default};
   font-weight: 400;
@@ -72,6 +74,18 @@ const SuggestionButton = styled(Button)<SuggestionButtonProps>`
       }
     }
   }
+  ${({ isHighlighted }) =>
+    isHighlighted
+      ? css`
+          background: ${colors.brand.lighter};
+          &:disabled {
+            background: ${colors.brand.greyLighter};
+            svg {
+              fill: ${colors.brand.grey};
+            }
+          }
+        `
+      : ''}
 `;
 
 interface Props {

package/src/TagSelector/TagSelector.tsx

@@ -33,10 +33,12 @@ interface Props {
   prefix?: string;
 }
 
-const sortedTags = (tags: TagType[], selectedTags: string[]): TagType[] =>
-  tags
-    .filter(({ id }) => selectedTags.some((idSelected) => idSelected === id))
-    .sort((a, b) => a.name.localeCompare(b.name, 'nb'));
+const sortedTags = (tags: TagType[], selectedTags: string[]): TagType[] => {
+  const returnTags = selectedTags
+    .map((selectedId) => tags.find(({ id }) => selectedId === id))
+    .filter((notUndefined) => notUndefined) as unknown as TagType[];
+  return returnTags;
+};
 
 const getSuggestions = (tags: TagType[], inputValue: string): TagType[] => {
   if (inputValue === '') {

package/src/TreeStructure/FolderItem.tsx

@@ -42,7 +42,8 @@ const WrapperForFolderChild = styled.div<{ marked: boolean }>`
   right: ${spacing.xsmall};
   opacity: ${({ marked }) => (marked ? 1 : 0.25)};
   &:hover,
-  &:focus {
+  &:focus,
+  &:focus-within {
     opacity: 1;
   }
 `;
@@ -170,7 +171,9 @@ const FolderItem = ({
             {name}
           </FolderName>
           {folderChild && (
-            <WrapperForFolderChild marked={marked}>{folderChild(id, marked ? 0 : -1)}</WrapperForFolderChild>
+            <WrapperForFolderChild marked={marked}>
+              {folderChild(id, marked || id === focusedFolderId ? 0 : -1)}
+            </WrapperForFolderChild>
           )}
         </>
       )}

package/src/index.ts

@@ -236,7 +236,7 @@ export { Notion, ConceptNotion } from './Notion';
 export type { NotionVisualElementType, ConceptNotionType } from './Notion';
 
 export { BannerCard } from './BannerCard';
-export { VerticalNavigation, Folder, FolderInput } from './MyNdla';
+export { Folder, FolderInput } from './MyNdla';
 export { ListResource, BlockResource } from './Resource';
 export type { ListResourceProps } from './Resource';
 export type { TagType } from './TagSelector';

package/src/locale/messages-en.ts

@@ -15,6 +15,10 @@ const titleTemplate = ' - NDLA';
 
 const messages = {
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Edit foldername',
+      delete: 'Delete',
+    },
     createFolder: 'Create folder',
     newFolder: {
       placeholder: 'Add foldername',
@@ -22,7 +26,8 @@ const messages = {
     },
   },
   tagSelector: {
-    placeholder: 'Add to tag',
+    label: 'Add tag',
+    placeholder: 'Enter tag name',
     removeTag: 'Remove tag {{name}}',
     hideAllTags: 'Hide all tags',
     showAllTags: 'Show all tags',
@@ -989,6 +994,8 @@ const messages = {
     newFolderUnder: 'Create new folder under {{folderName}}',
     myAccount: 'My account',
     favourites: 'Favourites',
+    addToFavourites: 'Add to my favourites',
+    alreadyFavourited: 'Already in my favourites',
     help: 'Help',
     more: 'More options',
     listView: 'List view',
@@ -1007,6 +1014,7 @@ const messages = {
       terms: 'terms of use',
       feide: 'We have retrieved this information from Feide',
       newFavourite: 'Recently favourited',
+
       storageInfo: {
         title: 'How to save your favourite resources from NDLA',
         text: 'When you wish to save a resource, you can do so by clicking the heart on the top right corner of the page. You will then get an option to store the resource in a folder',

package/src/locale/messages-nb.ts

@@ -15,6 +15,10 @@ const titleTemplate = ' - NDLA';
 
 const messages = {
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Endre mappenavn',
+      delete: 'Slett',
+    },
     createFolder: 'Lag mappe',
     newFolder: {
       placeholder: 'Skriv navn på mappe',
@@ -22,8 +26,9 @@ const messages = {
     },
   },
   tagSelector: {
-    placeholder: 'Tilknytt tag',
-    removeTag: 'Ta vekk tilknytning til {{name}}',
+    label: 'Legg til tag',
+    placeholder: 'Skriv tag navn',
+    removeTag: 'Ta vekk {{name}}',
     hideAllTags: 'Skjul alle tagger',
     showAllTags: 'Vis alle tagger',
   },
@@ -987,6 +992,8 @@ const messages = {
     newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favoritter',
+    addToFavourites: 'Legg til i mine favoritter',
+    alreadyFavourited: 'Allerede lagt til i mine favoritter',
     help: 'Hjelp',
     more: 'Flere valg',
     listView: 'Listevisning',

package/src/locale/messages-nn.ts

@@ -15,15 +15,20 @@ const titleTemplate = ' - NDLA';
 
 const messages = {
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Endre mappenamn',
+      delete: 'Slett',
+    },
     createFolder: 'Lag mappe',
     newFolder: {
-      placeholder: 'Skriv navn på mappe',
+      placeholder: 'Skriv namn på mappe',
       defaultName: 'Ny mappe',
     },
   },
   tagSelector: {
-    placeholder: 'Tilknytt tag',
-    removeTag: 'Ta vekk tilknytninga til {{name}}',
+    label: 'Legg til tag',
+    placeholder: 'Skriv tag namn',
+    removeTag: 'Ta vekk {{name}}',
     hideAllTags: 'Skjul alle tagger',
     showAllTags: 'Vis alle tagger',
   },
@@ -988,6 +993,8 @@ const messages = {
     newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favorittar',
+    addToFavourites: 'Legg til i mine favorittar',
+    alreadyFavourited: 'Allereie lagt til i mine favorittar',
     help: 'Hjelp',
     more: 'Fleire val',
     listView: 'Listevisning',

package/src/locale/messages-se.ts

@@ -15,6 +15,10 @@ const titleTemplate = ' - NDLA';
 
 const messages = {
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Endre mappenavn',
+      delete: 'Slett',
+    },
     createFolder: 'Lag mappe',
     newFolder: {
       placeholder: 'Skriv navn på mappe',
@@ -22,8 +26,9 @@ const messages = {
     },
   },
   tagSelector: {
-    placeholder: 'Legg til tag',
-    removeTag: 'Ta vekk tilknytninga til {{name}}',
+    label: 'Legg til tag',
+    placeholder: 'Skriv tag navn',
+    removeTag: 'Ta vekk {{name}}',
     hideAllTags: 'Skjul alla tags',
     showAllTags: 'Vis alla tags',
   },
@@ -987,6 +992,8 @@ const messages = {
     newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favoritter',
+    addToFavourites: 'Legg til i mine favoritter',
+    alreadyFavourited: 'Allerede lagt til i mine favoritter',
     help: 'Hjelp',
     more: 'Flere valg',
     listView: 'Listevisning',