@ndla/ui 21.0.0 → 22.0.2

package/src/TreeStructure/FolderItem.tsx

@@ -7,8 +7,10 @@
  */
 
 import React, { KeyboardEvent, MouseEvent, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { ArrowDropDown } from '@ndla/icons/common';
+import { Done } from '@ndla/icons/editor';
 import { MenuButton } from '@ndla/button';
 import { FolderOutlined } from '@ndla/icons/contentType';
 import { colors, spacing, misc, animations } from '@ndla/core';
@@ -40,15 +42,11 @@ const FolderItemWrapper = styled.div`
   align-items: center;
 `;
 
-const WrapperForFolderChild = styled.div<{ selected?: boolean }>`
-  position: absolute;
-  right: ${spacing.xsmall};
-  opacity: ${({ selected }) => (selected ? 1 : 0.25)};
-  &:hover,
-  &:focus,
-  &:focus-within {
-    opacity: 1;
-  }
+const WrapperForFolderChild = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${spacing.xsmall};
 `;
 
 const shouldForwardProp = (name: string) => !['selected', 'noArrow'].includes(name);
@@ -59,9 +57,24 @@ interface FolderNameProps {
 }
 
 const FolderName = styled('button', { shouldForwardProp })<FolderNameProps>`
-  line-height: 1;
+  cursor: pointer;
+  padding: ${spacing.xsmall};
+  margin: 0;
+  margin-left: ${({ noArrow }) => (noArrow ? `29px` : `0px`)};
+  flex-grow: 1;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: ${spacing.xxsmall};
+  border: 0;
+  border-radius: ${misc.borderRadius};
+  box-shadow: none;
   background: ${({ selected }) => (selected ? colors.brand.lighter : 'transparent')};
   color: ${colors.text.primary};
+  transition: ${animations.durations.superFast};
+  text-align: left;
+  line-height: 1;
+  word-break: break-word;
   &:hover,
   &:focus {
     background: ${({ selected }) => (selected ? colors.brand.light : colors.brand.lightest)};
@@ -70,19 +83,10 @@ const FolderName = styled('button', { shouldForwardProp })<FolderNameProps>`
       opacity: 1;
     }
   }
-  transition: ${animations.durations.superFast};
-  border: 0;
-  border-radius: ${misc.borderRadius};
-  display: flex;
-  gap: ${spacing.xxsmall};
-  align-items: center;
-  cursor: pointer;
-  padding: ${spacing.xsmall};
-  margin: 0;
-  margin-left: ${({ noArrow }) => (noArrow ? `29px` : `0px`)};
-  flex-grow: 1;
-  box-shadow: none;
-  text-align: left;
+`;
+
+const StyledDone = styled(Done)`
+  color: ${colors.support.green};
 `;
 
 const FolderNameLink = FolderName.withComponent(SafeLink);
@@ -110,24 +114,30 @@ const FolderItem = ({
   openOnFolderClick,
   setFocusedId,
   setSelectedFolder,
+  targetResource,
   visibleFolders,
 }: Props) => {
+  const { t } = useTranslation();
   const { id, icon, name } = folder;
   const ref = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
   const selected = selectedFolder && selectedFolder.id === id;
   const focused = focusedFolderId === id;
 
   const handleClickFolder = () => {
-    setSelectedFolder(folder);
-    setFocusedId(id);
-    onSelectFolder?.(id);
     if (openOnFolderClick) {
-      if (isOpen) {
-        onCloseFolder(id);
-      } else {
-        onOpenFolder(id);
+      if (selected) {
+        if (isOpen) {
+          onCloseFolder(id);
+        } else {
+          onOpenFolder(id);
+        }
       }
     }
+    if (!selected) {
+      setSelectedFolder(folder);
+      setFocusedId(id);
+    }
+    onSelectFolder?.(id);
   };
 
   useEffect(() => {
@@ -144,7 +154,10 @@ const FolderItem = ({
     };
   });
 
-  const linkPath = `/minndla${level > 1 ? '/folders' : ''}/${id}`;
+  const linkPath = `/minndla${level > 0 ? '/folders' : ''}/${id}`;
+
+  const containsResource =
+    targetResource && folder.resources.some((resource) => resource.resourceId === targetResource.resourceId);
 
   return (
     <FolderItemWrapper>
@@ -170,12 +183,18 @@ const FolderItem = ({
             onClick={handleClickFolder}>
             {icon || <FolderOutlined />}
             {name}
-          </FolderName>
-          {actions && (
-            <WrapperForFolderChild selected={selected}>
-              <MenuButton size="xsmall" menuItems={actions} tabIndex={selected || id === focusedFolderId ? 0 : -1} />
+            <WrapperForFolderChild>
+              {containsResource && <StyledDone title={t('myNdla.alreadyInFolder')} />}
+              {actions && (
+                <MenuButton
+                  onClick={(e) => e.stopPropagation()}
+                  size="xsmall"
+                  menuItems={actions}
+                  tabIndex={selected || id === focusedFolderId ? 0 : -1}
+                />
+              )}
             </WrapperForFolderChild>
-          )}
+          </FolderName>
         </>
       ) : (
         <FolderNameLink
@@ -185,7 +204,7 @@ const FolderItem = ({
           }
           noArrow={hideArrow}
           to={loading ? '' : linkPath}
-          tabIndex={selected || focused || level === 1 ? 0 : -1}
+          tabIndex={selected || focused || level === 0 ? 0 : -1}
           selected={selected}
           onFocus={() => setFocusedId(id)}
           onClick={handleClickFolder}>

package/src/TreeStructure/FolderItems.tsx

@@ -52,10 +52,11 @@ const FolderItems = ({
   openFolders,
   ...rest
 }: FolderItemsProps) => (
-  <StyledUL role="group" firstLevel={level === 1}>
+  <StyledUL role="group" firstLevel={level === 0}>
     {folders.map((folder) => {
       const { subfolders, id } = folder;
       const isOpen = openFolders?.includes(id);
+
       return (
         <StyledLI key={id} role="treeitem">
           <div>
@@ -65,7 +66,7 @@ const FolderItems = ({
               isOpen={isOpen}
               level={level}
               loading={loading}
-              noPaddingWhenArrowIsHidden={editable && level === 1 && subfolders?.length === 0}
+              noPaddingWhenArrowIsHidden={editable && level === 0 && subfolders?.length === 0}
               {...rest}
             />
           </div>

package/src/TreeStructure/TreeStructure.tsx

@@ -37,7 +37,7 @@ export interface TreeStructureProps extends CommonTreeStructureProps {
   framed?: boolean;
   label?: string;
   maximumLevelsOfFoldersAllowed?: number;
-  onNewFolder: (name: string, parentId: string) => Promise<IFolder>;
+  onNewFolder?: (name: string, parentId: string) => Promise<IFolder>;
 }
 
 const TreeStructure = ({
@@ -52,6 +52,7 @@ const TreeStructure = ({
   onNewFolder,
   onSelectFolder,
   openOnFolderClick,
+  targetResource,
 }: TreeStructureProps) => {
   const { t } = useTranslation();
 
@@ -68,10 +69,13 @@ const TreeStructure = ({
 
   useEffect(() => {
     if (defaultOpenFolders) {
-      setOpenFolders((prev) => {
-        return uniq(defaultOpenFolders.concat(prev));
-      });
+      if (!defaultOpenFolders.every((element) => openFolders.includes(element))) {
+        setOpenFolders((prev) => {
+          return uniq(defaultOpenFolders.concat(prev));
+        });
+      }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultOpenFolders]);
 
   useEffect(() => {
@@ -111,7 +115,7 @@ const TreeStructure = ({
   };
 
   const onSaveNewFolder = (name: string, parentId: string) => {
-    onNewFolder(name, parentId).then((newFolder) => {
+    onNewFolder?.(name, parentId).then((newFolder) => {
       if (newFolder) {
         setSelectedFolder(newFolder);
         setFocusedId(newFolder.id);
@@ -136,7 +140,7 @@ const TreeStructure = ({
           focusedFolderId={focusedId}
           menuItems={menuItems}
           folders={folders}
-          level={1}
+          level={0}
           loading={loading}
           selectedFolder={selectedFolder}
           maximumLevelsOfFoldersAllowed={maximumLevelsOfFoldersAllowed}
@@ -150,6 +154,7 @@ const TreeStructure = ({
           openOnFolderClick={openOnFolderClick}
           setFocusedId={setFocusedId}
           setSelectedFolder={setSelectedFolder}
+          targetResource={targetResource}
           visibleFolders={visibleFolderIds}
         />
       </TreeStructureStyledWrapper>

package/src/TreeStructure/types.ts

@@ -7,7 +7,7 @@
  */
 
 import { MouseEvent, ReactNode } from 'react';
-import { IFolder } from '@ndla/types-learningpath-api';
+import { IFolder, IResource } from '@ndla/types-learningpath-api';
 import { MenuItemProps } from '@ndla/button/src';
 
 export interface FolderType extends IFolder {
@@ -23,6 +23,7 @@ export interface CommonTreeStructureProps {
   onSelectFolder?: (id: string) => void;
   openOnFolderClick?: boolean;
   menuItems?: TreeStructureMenuProps[];
+  targetResource?: IResource;
 }
 
 export interface CommonFolderItemsProps extends CommonTreeStructureProps {

package/src/index.ts

@@ -240,8 +240,8 @@ export type { ListResourceProps } from './Resource';
 export type { TagType } from './TagSelector';
 export { TagSelector } from './TagSelector';
 
-export type { SnackBarItem } from './SnackBar';
-export { SnackBar } from './SnackBar';
+export { SnackbarProvider, useSnack, BaseSnack, DefaultSnackbar } from './SnackBar';
+export type { Snack, SnackContext } from './SnackBar';
 export { InfoBlock } from './InfoBlock';
 export { TreeStructure } from './TreeStructure';
 export type { FolderType, TreeStructureProps, TreeStructureMenuProps } from './TreeStructure';

package/src/locale/messages-en.ts

@@ -996,7 +996,10 @@ const messages = {
       delete: 'Delete',
       edit: 'Edit',
       missingName: 'Folder name required',
+      folderDeleted: '"{{folderName}}" deleted',
     },
+    tags: '{{count}} tag',
+    tags_plural: '{{count}} tags',
     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.',
     myFolders: 'My folders',
@@ -1007,6 +1010,7 @@ const messages = {
     favourites: 'Favourites',
     addToFavourites: 'Add to my favourites',
     alreadyFavourited: 'Already in my favourites',
+    alreadyInFolder: 'Already in folder',
     help: 'Help',
     more: 'More options',
     listView: 'List view',
@@ -1015,6 +1019,9 @@ const messages = {
     myPage: {
       myPage: 'My page',
       logout: 'Log out of My NDLA',
+      loginTerms: 'Log in with Feide to receive access. By logging on your accept your terms of service',
+      loginResourcePitch: 'Do you want to favorite this page?',
+      loginWelcome: 'Welcome to My NDLA! This page allows you to organize your articles in your <i>own</i> way!',
       deleteAccount: 'Delete My NDLA',
       welcome:
         'Welcome to my NDLA! You can now save your favourite resources from NDLA and organise them in folders with tags',
@@ -1047,9 +1054,17 @@ const messages = {
     resource: {
       add: 'Add folder/tag',
       remove: 'Remove',
+      removeTitle: 'Remove resource',
+      confirmRemove: 'Are you sure you want to remove the resource from this folder?',
       copyLink: 'Copy link to this page',
+      linkCopied: 'Copied to clipboard',
       addToMyNdla: 'Add to My NDLA',
       addedToMyNdla: 'Added to My NDLA',
+      addedToFolder: 'Resource added to "{{folderName}}"',
+      removedFromFolder: 'Removed from "{{folderName}}"',
+      titleUpdated: 'Title updated',
+      tagsUpdated: 'Tags updated',
+      show: 'Show',
     },
   },
   snackbar: {

package/src/locale/messages-nb.ts

@@ -994,7 +994,10 @@ const messages = {
       delete: 'Slett',
       edit: 'Rediger',
       missingName: 'Mappenavn er påkrevd',
+      folderDeleted: '"{{folderName}}" er slettet',
     },
+    tags: '{{count}} tag',
+    tags_plural: '{{count}} tags',
     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.',
     myFolders: 'Mine mapper',
@@ -1005,6 +1008,7 @@ const messages = {
     favourites: 'Favoritter',
     addToFavourites: 'Legg til i mine favoritter',
     alreadyFavourited: 'Allerede lagt til i mine favoritter',
+    alreadyInFolder: 'Finnes allerede i mappen',
     help: 'Hjelp',
     more: 'Flere valg',
     listView: 'Listevisning',
@@ -1014,6 +1018,9 @@ const messages = {
       myPage: 'Min side',
       deleteAccount: 'Slett Min NDLA',
       logout: 'Logg ut av Min NDLA',
+      loginTerms: 'Logg på med Feide for å få tilgang. Ved å logge på godkjenner du våre vilkår for bruk',
+      loginResourcePitch: 'Ønsker du å favorittmerke denne siden?',
+      loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på <i>din</i> måte!',
       welcome:
         'Velkommen til Min NDLA! Nå kan du lagre dine favorittressurser fra NDLA og organisere dem slik du ønsker i mapper og med tags.',
       read: { our: 'Les våre', ours: 'Les vår' },
@@ -1045,9 +1052,17 @@ const messages = {
     resource: {
       add: 'Legg til mappe/tag',
       remove: 'Fjern',
+      removeTitle: 'Fjern ressurs',
+      confirmRemove: 'Er du sikker på at du ønsker å fjerne ressursen fra denne mappen?',
       copyLink: 'Kopier lenke til siden',
+      linkCopied: 'Kopiert til utklippstavle',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA',
+      addedToFolder: 'Ressurs er lagt i "{{folderName}}"',
+      removedFromFolder: 'Fjernet fra "{{folderName}}"',
+      titleUpdated: 'Tittel oppdatert',
+      tagsUpdated: 'Tags oppdatert',
+      show: 'Vis',
     },
   },
   snackbar: {

package/src/locale/messages-nn.ts

@@ -995,7 +995,10 @@ const messages = {
       delete: 'Slett',
       edit: 'Rediger',
       missingName: 'Mappenavn er påkrevd',
+      folderDeleted: '"{{folderName}}" er sletta',
     },
+    tags: '{{count}} tag',
+    tags_plural: '{{count}} tags',
     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.',
     myFolders: 'Mine mapper',
@@ -1006,6 +1009,7 @@ const messages = {
     favourites: 'Favorittar',
     addToFavourites: 'Legg til i mine favorittar',
     alreadyFavourited: 'Allereie lagt til i mine favorittar',
+    alreadyInFolder: 'Finnes allereie i mappa',
     help: 'Hjelp',
     more: 'Fleire val',
     listView: 'Listevisning',
@@ -1015,6 +1019,9 @@ const messages = {
       myPage: 'Min side',
       deleteAccount: 'Slett Min NDLA',
       logout: 'Logg ut av Min NDLA',
+      loginTerms: 'Logg på med Feide for å få tilgang. Ved å logge på godkjennar du våre vilkår for bruk',
+      loginResourcePitch: 'Ønsker du å favorittmerke denne sida?',
+      loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på <i>din</i> måte!',
       welcome:
         'Velkommen til Min NDLA! Nå kan du lagre dine favorittressurser fra NDLA og organisere dem slik du ønsker i mapper og med tags.',
       read: { our: 'Les våre', ours: 'Les vår' },
@@ -1045,9 +1052,17 @@ const messages = {
     resource: {
       add: 'Legg til mappe/tag',
       remove: 'Fjern',
+      removeTitle: 'Fjern ressurs',
+      confirmRemove: 'Er du sikker på at du ønsker å fjerne ressursen frå denne mappen?',
       copyLink: 'Kopier lenke til sida',
+      linkCopied: 'Kopiert til utklippstavla',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA',
+      addedToFolder: 'Ressurs er lagt i "{{folderName}}"',
+      removedFromFolder: 'Fjernet fra "{{folderName}}"',
+      titleUpdated: 'Tittel oppdatert',
+      tagsUpdated: 'Tags oppdatert',
+      show: 'Vis',
     },
   },
   snackbar: {

package/src/locale/messages-se.ts

@@ -994,7 +994,10 @@ const messages = {
       delete: 'Slett',
       edit: 'Rediger',
       missingName: 'Mappenavn er påkrevd',
+      folderDeleted: '"{{folderName}}" er sletta',
     },
+    tags: '{{count}} tag',
+    tags_plural: '{{count}} tags',
     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.',
     myFolders: 'Mine mapper',
@@ -1005,6 +1008,7 @@ const messages = {
     favourites: 'Favoritter',
     addToFavourites: 'Legg til i mine favoritter',
     alreadyFavourited: 'Allerede lagt til i mine favoritter',
+    alreadyInFolder: 'Finnes allerede i mappen',
     help: 'Hjelp',
     more: 'Flere valg',
     listView: 'Listevisning',
@@ -1014,6 +1018,9 @@ const messages = {
       myPage: 'Min side',
       deleteAccount: 'Slett Min NDLA',
       logout: 'Logg ut av Min NDLA',
+      loginTerms: 'Logg på med Feide for å få tilgang. Ved å logge på godkjennar du våre vilkår for bruk',
+      loginResourcePitch: 'Ønsker du å favorittmerke denne sida?',
+      loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på <i>din</i> måte!',
       welcome:
         'Velkommen til Min NDLA! Nå kan du lagre dine favorittressurser fra NDLA og organisere dem slik du ønsker i mapper og med tags.',
       read: { our: 'Les våre', ours: 'Les vår' },
@@ -1045,9 +1052,17 @@ const messages = {
     resource: {
       add: 'Legg til mappe/tag',
       remove: 'Fjern',
+      removeTitle: 'Fjern ressurs',
+      confirmRemove: 'Er du sikker på at du ønsker å fjerne ressursen frå denne mappen?',
       copyLink: 'Kopier lenke til siden',
+      linkCopied: 'Kopiert til utklippstavla',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA',
+      addedToFolder: 'Ressurs er lagt i "{{folderName}}"',
+      removedFromFolder: 'Fjernet fra "{{folderName}}"',
+      titleUpdated: 'Tittel oppdatert',
+      tagsUpdated: 'Tags oppdatert',
+      show: 'Vis',
     },
   },
   snackbar: {

package/src/locale/messages-sma.ts

@@ -994,7 +994,10 @@ const messages = {
       delete: 'Slett',
       edit: 'Rediger',
       missingName: 'Mappenavn er påkrevd',
+      folderDeleted: '"{{folderName}}" er sletta',
     },
+    tags: '{{count}} tag',
+    tags_plural: '{{count}} tags',
     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.',
     myFolders: 'Mine mapper',
@@ -1005,6 +1008,7 @@ const messages = {
     favourites: 'Favoritter',
     addToFavourites: 'Legg til i mine favoritter',
     alreadyFavourited: 'Allerede lagt til i mine favoritter',
+    alreadyInFolder: 'Finnes allerede i mappen',
     help: 'Hjelp',
     more: 'Flere valg',
     listView: 'Listevisning',
@@ -1014,6 +1018,9 @@ const messages = {
       myPage: 'Min side',
       deleteAccount: 'Slett Min NDLA',
       logout: 'Logg ut av Min NDLA',
+      loginTerms: 'Logg på med Feide for å få tilgang. Ved å logge på godkjennar du våre vilkår for bruk',
+      loginResourcePitch: 'Ønsker du å favorittmerke denne sida?',
+      loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på <i>din</i> måte!',
       welcome:
         'Velkommen til Min NDLA! Nå kan du lagre dine favorittressurser fra NDLA og organisere dem slik du ønsker i mapper og med tags.',
       read: { our: 'Les våre', ours: 'Les vår' },
@@ -1045,9 +1052,17 @@ const messages = {
     resource: {
       add: 'Legg til mappe/tag',
       remove: 'Fjern',
+      removeTitle: 'Fjern ressurs',
+      confirmRemove: 'Er du sikker på at du ønsker å fjerne ressursen frå denne mappen?',
       copyLink: 'Kopier lenke til siden',
+      linkCopied: 'Kopiert til utklippstavla',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA',
+      addedToFolder: 'Ressurs er lagt i "{{folderName}}"',
+      removedFromFolder: 'Fjernet fra "{{folderName}}"',
+      titleUpdated: 'Tittel oppdatert',
+      tagsUpdated: 'Tags oppdatert',
+      show: 'Vis',
     },
   },
   snackbar: {