@ndla/ui 25.2.1 → 26.0.0

package/src/TreeStructure/TreeStructure.tsx

@@ -6,18 +6,20 @@
  *
  */
 
-import React, { useEffect, useState, useMemo } from 'react';
-import { AddButton } from '@ndla/button';
+import React, { useEffect, useState, useMemo, useRef } from 'react';
+import { ButtonV2 as Button, IconButtonDualStates } from '@ndla/button';
+import { Plus } from '@ndla/icons/action';
+import { ChevronDown, ChevronUp } from '@ndla/icons/common';
 import Tooltip from '@ndla/tooltip';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import { spacing, fonts } from '@ndla/core';
+import { colors, fonts, misc, spacing } from '@ndla/core';
+import { css } from '@emotion/core';
 import { uniq } from 'lodash';
 import { IFolder } from '@ndla/types-learningpath-api';
-import TreeStructureStyledWrapper from './TreeStructureWrapper';
 import FolderItems from './FolderItems';
 import { flattenFolders } from './helperFunctions';
-import { CommonTreeStructureProps, FolderType } from './types';
+import { CommonTreeStructureProps, FolderType, TreeStructureType } from './types';
 
 export const MAX_LEVEL_FOR_FOLDERS = 4;
 
@@ -25,15 +27,86 @@ const StyledLabel = styled.label`
   font-weight: ${fonts.weight.semibold};
 `;
 
-const AddFolderWrapper = styled.div`
+interface StyledRowProps {
+  isOpen: boolean;
+}
+
+const StyledRow = styled.div<StyledRowProps>`
+  display: flex;
+  justify-content: space-between;
+  padding: ${spacing.xxsmall};
+  border-bottom: ${({ isOpen }) => isOpen && `1px solid ${colors.brand.tertiary}`};
+`;
+
+const StyledTreeStructure = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+`;
+
+const TreeStructureWrapper = styled.div<{ type: TreeStructureType }>`
   display: flex;
-  margin-top: ${spacing.xsmall};
+  flex-direction: column;
+  ${({ type }) =>
+    (type === 'normal' || type === 'picker') &&
+    css`
+      overflow: hidden;
+      border: 1px solid ${colors.brand.neutral7};
+      border-radius: ${misc.borderRadius};
+      scroll-behavior: smooth;
+    `}
+  transition: ${misc.transition.default};
+  &:focus-within {
+    border-color: ${colors.brand.tertiary};
+  }
+`;
+interface ScrollableDivProps {
+  type: TreeStructureType;
+}
+const ScrollableDiv = styled.div<ScrollableDivProps>`
+  ${({ type }) =>
+    (type === 'picker' || type === 'normal') &&
+    css`
+      overflow: overlay;
+      ::-webkit-scrollbar {
+        width: ${spacing.small};
+      }
+      ::-webkit-scrollbar-thumb {
+        border: 4px solid transparent;
+        border-radius: 14px;
+        background-clip: padding-box;
+        padding: 0 4px;
+        background-color: ${colors.brand.neutral7};
+      }
+    `}
+`;
+
+const StyledSelectedFolder = styled(Button)`
+  flex: 1;
+  justify-content: flex-start;
+  :hover,
+  :focus {
+    background: none;
+    box-shadow: none;
+    border-color: transparent;
+  }
+`;
+
+const StyledAddFolderButton = styled(Button)`
+  &,
+  &:disabled {
+    border-color: transparent;
+  }
+`;
+
+const StyledPlus = styled(Plus)`
+  height: 24px;
+  width: 24px;
 `;
 
 export interface TreeStructureProps extends CommonTreeStructureProps {
   defaultOpenFolders?: string[];
   folders: FolderType[];
-  editable?: boolean;
   label?: string;
   maximumLevelsOfFoldersAllowed?: number;
   onNewFolder?: (name: string, parentId: string) => Promise<IFolder>;
@@ -41,10 +114,7 @@ export interface TreeStructureProps extends CommonTreeStructureProps {
 
 const TreeStructure = ({
   defaultOpenFolders,
-  editable,
-  menuItems,
   folders,
-  framed,
   label,
   loading,
   maximumLevelsOfFoldersAllowed = MAX_LEVEL_FOR_FOLDERS,
@@ -52,9 +122,12 @@ const TreeStructure = ({
   onSelectFolder,
   openOnFolderClick,
   targetResource,
+  type = 'normal',
 }: TreeStructureProps) => {
   const { t } = useTranslation();
 
+  const ref = useRef<HTMLDivElement>(null);
+
   const defaultSelectedFolderId = defaultOpenFolders && defaultOpenFolders[defaultOpenFolders.length - 1];
 
   const [openFolders, setOpenFolders] = useState<string[]>(defaultOpenFolders || []);
@@ -62,10 +135,25 @@ const TreeStructure = ({
   const [newFolderParentId, setNewFolderParentId] = useState<string | undefined>();
   const [focusedId, setFocusedId] = useState<string | undefined>();
   const [selectedFolder, setSelectedFolder] = useState<FolderType | undefined>();
+  const [showTree, setShowTree] = useState(type !== 'picker');
 
   const flattenedFolders = useMemo(() => flattenFolders(folders, openFolders), [folders, openFolders]);
   const visibleFolderIds = flattenedFolders.map((folder) => folder.id);
 
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (e.target instanceof Element && ref.current && !ref.current.contains(e.target)) {
+        setShowTree(false);
+      }
+    };
+    if (type === 'picker') {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [ref, type]);
+
   useEffect(() => {
     if (defaultOpenFolders) {
       if (!defaultOpenFolders.every((element) => openFolders.includes(element))) {
@@ -77,6 +165,10 @@ const TreeStructure = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultOpenFolders]);
 
+  useEffect(() => {
+    setNewFolderParentId(undefined);
+  }, [selectedFolder]);
+
   useEffect(() => {
     if (defaultSelectedFolderId !== undefined) {
       const selected = flattenFolders(folders).find((folder) => folder.id === defaultSelectedFolderId);
@@ -114,9 +206,9 @@ const TreeStructure = ({
   };
 
   const onSaveNewFolder = (name: string, parentId: string) => {
-    setNewFolderParentId(undefined);
     onNewFolder?.(name, parentId).then((newFolder) => {
       if (newFolder) {
+        setNewFolderParentId?.(undefined);
         setSelectedFolder(newFolder);
         onSelectFolder?.(newFolder.id);
         setFocusedId(newFolder.id);
@@ -126,60 +218,94 @@ const TreeStructure = ({
   };
 
   const onCancelNewFolder = () => {
-    setNewFolderParentId(undefined);
+    setNewFolderParentId?.(undefined);
   };
 
-  const canAddFolder =
-    editable && selectedFolder && selectedFolder?.breadcrumbs.length < (maximumLevelsOfFoldersAllowed || 1);
+  const canAddFolder = selectedFolder && selectedFolder?.breadcrumbs.length < (maximumLevelsOfFoldersAllowed || 1);
 
   return (
-    <div>
+    <StyledTreeStructure ref={ref}>
       {label && <StyledLabel>{label}</StyledLabel>}
-      <TreeStructureStyledWrapper aria-label="Menu tree" role="tree" framed={framed}>
-        <FolderItems
-          editable={editable}
-          focusedFolderId={focusedId}
-          menuItems={menuItems}
-          folders={folders}
-          level={0}
-          loading={loading}
-          selectedFolder={selectedFolder}
-          maximumLevelsOfFoldersAllowed={maximumLevelsOfFoldersAllowed}
-          newFolderParentId={newFolderParentId}
-          onCancelNewFolder={onCancelNewFolder}
-          onCloseFolder={onCloseFolder}
-          onOpenFolder={onOpenFolder}
-          onSaveNewFolder={onSaveNewFolder}
-          onSelectFolder={onSelectFolder}
-          openFolders={openFolders}
-          openOnFolderClick={openOnFolderClick}
-          setFocusedId={setFocusedId}
-          setSelectedFolder={setSelectedFolder}
-          targetResource={targetResource}
-          visibleFolders={visibleFolderIds}
-          framed={framed}
-        />
-      </TreeStructureStyledWrapper>
-      {editable && (
-        <AddFolderWrapper>
-          <Tooltip
-            tooltip={
-              canAddFolder
-                ? t('myNdla.newFolderUnder', {
-                    folderName: selectedFolder?.name,
-                  })
-                : t('treeStructure.maxFoldersAlreadyAdded')
-            }>
-            <AddButton
-              disabled={!canAddFolder}
-              aria-label={t('myNdla.newFolder')}
-              onClick={() => setNewFolderParentId(selectedFolder?.id)}>
-              {t('myNdla.newFolder')}
-            </AddButton>
-          </Tooltip>
-        </AddFolderWrapper>
-      )}
-    </div>
+      <TreeStructureWrapper aria-label={label} type={type}>
+        {type === 'picker' && (
+          <StyledRow isOpen={showTree}>
+            <StyledSelectedFolder
+              variant="ghost"
+              colorTheme="light"
+              fontWeight="normal"
+              shape="sharp"
+              onClick={() => {
+                setShowTree(!showTree);
+              }}>
+              {selectedFolder?.name}
+            </StyledSelectedFolder>
+            {onNewFolder && showTree && (
+              <Tooltip
+                tooltip={
+                  canAddFolder
+                    ? t('myNdla.newFolderUnder', {
+                        folderName: selectedFolder?.name,
+                      })
+                    : t('treeStructure.maxFoldersAlreadyAdded')
+                }>
+                <StyledAddFolderButton
+                  variant="outline"
+                  shape="pill"
+                  disabled={!canAddFolder}
+                  aria-label={
+                    canAddFolder
+                      ? t('myNdla.newFolderUnder', {
+                          folderName: selectedFolder?.name,
+                        })
+                      : t('treeStructure.maxFoldersAlreadyAdded')
+                  }
+                  onClick={() => setNewFolderParentId(selectedFolder?.id)}>
+                  <StyledPlus /> {t('myNdla.newFolder')}
+                </StyledAddFolderButton>
+              </Tooltip>
+            )}
+            <IconButtonDualStates
+              ariaLabelActive={t('treeStructure.hideFolders')}
+              ariaLabelInActive={t('treeStructure.showFolders')}
+              active={showTree}
+              variant="ghost"
+              colorTheme="greyLighter"
+              inactiveIcon={<ChevronDown />}
+              activeIcon={<ChevronUp />}
+              size="small"
+              onClick={() => {
+                setShowTree(!showTree);
+              }}
+            />
+          </StyledRow>
+        )}
+        {showTree && (
+          <ScrollableDiv type={type}>
+            <FolderItems
+              focusedFolderId={focusedId}
+              folders={folders}
+              level={0}
+              loading={loading}
+              selectedFolder={selectedFolder}
+              maxLevel={maximumLevelsOfFoldersAllowed}
+              newFolderParentId={newFolderParentId}
+              onCancelNewFolder={onCancelNewFolder}
+              onCloseFolder={onCloseFolder}
+              onOpenFolder={onOpenFolder}
+              onSaveNewFolder={onSaveNewFolder}
+              onSelectFolder={onSelectFolder}
+              openFolders={openFolders}
+              openOnFolderClick={openOnFolderClick}
+              setFocusedId={setFocusedId}
+              setSelectedFolder={setSelectedFolder}
+              targetResource={targetResource}
+              visibleFolders={visibleFolderIds}
+              type={type}
+            />
+          </ScrollableDiv>
+        )}
+      </TreeStructureWrapper>
+    </StyledTreeStructure>
   );
 };
 

package/src/TreeStructure/types.ts

@@ -12,8 +12,11 @@ import { MenuItemProps } from '@ndla/button';
 
 export interface FolderType extends IFolder {
   icon?: ReactNode;
+  isNavigation?: boolean;
 }
 
+export type TreeStructureType = 'normal' | 'navigation' | 'picker';
+
 export interface TreeStructureMenuProps extends Omit<MenuItemProps, 'onClick'> {
   onClick: (e: MouseEvent<HTMLDivElement> | undefined, folder: FolderType) => void;
 }
@@ -22,14 +25,15 @@ export interface CommonTreeStructureProps {
   loading?: boolean;
   onSelectFolder?: (id: string) => void;
   openOnFolderClick?: boolean;
-  menuItems?: TreeStructureMenuProps[];
   targetResource?: IResource;
   framed?: boolean;
+  type: TreeStructureType;
 }
 
 export interface CommonFolderItemsProps extends CommonTreeStructureProps {
   focusedFolderId?: string;
   level: number;
+  maxLevel: number;
   selectedFolder?: FolderType;
   onCloseFolder: (id: string) => void;
   onOpenFolder: (id: string) => void;

package/src/locale/messages-en.ts

@@ -19,6 +19,8 @@ const messages = {
       edit: 'Edit foldername',
       delete: 'Delete',
     },
+    hideFolders: 'Hide all folders',
+    showFolders: 'Show all folders',
     createFolder: 'Create folder',
     maxFoldersAlreadyAdded: 'Maximum subfolders reached',
     newFolder: {
@@ -248,13 +250,6 @@ const messages = {
         name: 'Follow us',
       },
     },
-    category: {
-      fellesfag: 'Common',
-      yrkesfag: 'Vocational',
-      studiespesialiserende: 'Specialization',
-      imported: 'Imported subjects',
-      heading: 'What will you learn?',
-    },
     film: {
       header: 'NDLA film',
       text: 'NDLA film is a service in collaboration with Norgesfilm. This service allows you to watch a range of feature films, short films, documentaries and series. You can also watch educational films and movie clips. Welcome to the world of cinema!',
@@ -824,18 +819,6 @@ const messages = {
       text: 'is created by',
     },
   },
-  fagfornyelse: {
-    frontpage: {
-      heading: 'Welcome to a sneak peek at Fagfornyelsen at NDLA',
-      text: 'The new curricula will take effect in the fall 2020. At NDLA we have already started this work. Those responsible for our content make new great learning resources every day, resources that are adapted to the new curricula. On this page you can already see them.',
-      blogHeading: 'Do you want to know more?',
-    },
-    badge: {
-      heading: 'This page is adapted for Fagfornyelsen 2020',
-      text: 'The content is in progress. Not what you were looking for?',
-      linkText: "Go to ndla.no for today's content",
-    },
-  },
   frontPageToolbox: {
     heading: 'Toolbox',
     text: 'Do you want to become good at presenting, or do you want to learn to study smarter using the right study technique? Need advice on how to read most effectively for the exam? In the NDLA Toolbox you will find lots of great tips and advice!',
@@ -1007,14 +990,15 @@ const messages = {
     folders_plural: '{{count}} Folders',
     folder: {
       folder: 'Folder',
-      delete: 'Delete',
-      edit: 'Edit',
+      delete: 'Delete folder',
+      edit: 'Edit folder',
       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.',
+    confirmDeleteFolder:
+      'Are you sure you want to delete this folder? Subfolders of this folder will also be deleted. This action cannot be undone.',
     confirmDeleteTag: 'Are you sure you want to delete this tag? This process cannot be undone.',
     myFolders: 'My folders',
     myTags: 'My tags',
@@ -1035,6 +1019,9 @@ const messages = {
       confirmDeleteAccountButton: 'Delete account',
       myPage: 'My page',
       logout: 'Log out of My NDLA',
+      loginText:
+        'Log in with Feide to receive access to My NDLA. We ask you not to write offensive or personally sensitive information in text fields. Read our ',
+      loginTextLink: 'privacy policy here',
       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!',

package/src/locale/messages-nb.ts

@@ -19,6 +19,8 @@ const messages = {
       edit: 'Endre mappenavn',
       delete: 'Slett',
     },
+    hideFolders: 'Skjul alle mapper',
+    showFolders: 'Vis alle mapper',
     createFolder: 'Lag mappe',
     maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {
@@ -247,13 +249,6 @@ const messages = {
         name: 'Følg oss',
       },
     },
-    category: {
-      fellesfag: 'Fellesfag',
-      yrkesfag: 'Yrkesfag',
-      studiespesialiserende: 'Studieforberedende',
-      imported: 'Spolte fag',
-      heading: 'Hva lærer du?',
-    },
     errorDescription: 'Beklager, en feil oppstod under lasting av fagene.',
     film: {
       header: 'NDLA film',
@@ -822,18 +817,6 @@ const messages = {
       text: 'er utarbeidet av',
     },
   },
-  fagfornyelse: {
-    frontpage: {
-      heading: 'Velkommen til sniktitt på Fagfornyelsen i NDLA',
-      text: 'Høsten 2020 og 2021 vil de nye læreplanene tre i kraft. I NDLA har vi startet med dette arbeidet allerede. Våre innholdsansvarlige lager hver dag nye supre læringsressurser som er tilrettelagt for de nye planene. På denne siden kan du se dem allerede nå.',
-      blogHeading: 'Vil du vite mer?',
-    },
-    badge: {
-      heading: 'Denne siden er tilrettelagt for fagfornyelsen 2020/2021',
-      text: 'Innholdet er under arbeid. Ikke på jakt etter dette?',
-      linkText: 'Gå til ndla.no for dagens innhold',
-    },
-  },
   frontPageToolbox: {
     heading: 'Verktøykassa',
     text: 'Har du lyst til å bli god til å presentere, eller vil du lære å studere smartere ved hjelp av riktig studieteknikk? Trenger du råd om hvordan du leser mest mulig effektivt til eksamen? I verktøykassa til NDLA finner du masse gode tips og råd!',
@@ -1005,14 +988,15 @@ const messages = {
     folders_plural: '{{count}} mapper',
     folder: {
       folder: 'Mappe',
-      delete: 'Slett',
-      edit: 'Rediger',
+      delete: 'Slett mappe',
+      edit: 'Rediger mappe',
       missingName: 'Skriv navn på mappe',
       folderDeleted: '"{{folderName}}" er slettet',
     },
     tags: '{{count}} emneknagg',
     tags_plural: '{{count}} emneknagger',
-    confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke endres.',
+    confirmDeleteFolder:
+      'Er du sikker på at du vil slette mappen? Dersom mappen har undermapper vil disse også slettes. Handlingen kan ikke endres.',
     confirmDeleteTag: 'Er du sikker på at du vil slette emneknagg? Denne handlingen kan ikke endres.',
     myFolders: 'Mine mapper',
     myTags: 'Mine emneknagger',
@@ -1034,6 +1018,9 @@ const messages = {
       myPage: 'Min side',
       deleteAccount: 'Slett Min NDLA',
       logout: 'Logg ut av Min NDLA',
+      loginText:
+        'Logg på med Feide for å få tilgang til Min NDLA. Vi ber om at du ikke skriver noe støtende, personsensitiv informasjon eller andre persondata i tekstfelt. Les vår ',
+      loginTextLink: 'personvernerklæring her',
       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!',
@@ -1073,7 +1060,7 @@ const messages = {
       linkCopied: 'Kopiert til utklippstavle',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA',
-      addedToFolder: 'Ressurs er lagt i "{{folderName}}"',
+      addedToFolder: 'Ressurs er lagt i ',
       removedFromFolder: 'Fjernet fra "{{folderName}}"',
       titleUpdated: 'Tittel oppdatert',
       tagsUpdated: 'Emneknagger oppdatert',

package/src/locale/messages-nn.ts

@@ -19,6 +19,8 @@ const messages = {
       edit: 'Endre mappenamn',
       delete: 'Slett',
     },
+    hideFolders: 'Skjul alle mapper',
+    showFolders: 'Vis alle mapper',
     createFolder: 'Lag mappe',
     maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {
@@ -247,13 +249,6 @@ const messages = {
         name: 'Følg oss',
       },
     },
-    category: {
-      fellesfag: 'Fellesfag',
-      yrkesfag: 'Yrkesfag',
-      studiespesialiserende: 'Studieførebuande',
-      imported: 'Spolte fag',
-      heading: 'Kva lærer du?',
-    },
     film: {
       header: 'NDLA film',
       text: 'NDLA film er ei teneste i samarbeid med Norgesfilm. Denne tenesta lar deg sjå ei rekkje spelefilmar, kortfilmar, dokumentarar og seriar. Du kan òg sjå undervisningsfilm og filmklipp. Velkomen inn i filmen si verd!',
@@ -823,18 +818,6 @@ const messages = {
       text: 'er utarbeida av',
     },
   },
-  fagfornyelse: {
-    frontpage: {
-      heading: 'Velkommen til sniktitt på Fagfornyelsen i NDLA',
-      text: 'Hausten 2020 og 2021 vil dei nye læreplanane tre i kraft. I NDLA har vi starta dette arbeidet allereie. Dei innhaldsansvarlege i NDLA lagar kvar dag nye supre læringsressursar som er tilrettelagte for dei nye planane. På denne sida kan du sjå dei allereie nå.',
-      blogHeading: 'Vil du vite meir?',
-    },
-    badge: {
-      heading: 'Denne sida er tilrettelagt for fagfornyelsen 2020/2021',
-      text: 'Innhaldet er under arbeid. Ikkje på jakt etter dette?',
-      linkText: 'Gå til ndla.no for dagens innhald',
-    },
-  },
   frontPageToolbox: {
     heading: 'Verktøykassa',
     text: 'Har du lyst til å bli god til å presentere, eller vil du lære å studere smartare ved hjelp av riktig studieteknikk? Treng du råd om korleis du les mest mogleg effektivt til eksamen? I verktøykassa til NDLA finn du masse gode tips og råd!',
@@ -1006,14 +989,15 @@ const messages = {
     folders_plural: '{{count}} mapper',
     folder: {
       folder: 'Mappe',
-      delete: 'Slett',
-      edit: 'Rediger',
+      delete: 'Slett mappe',
+      edit: 'Rediger mappe',
       missingName: 'Skriv namn på mappe',
       folderDeleted: '"{{folderName}}" er sletta',
     },
     tags: '{{count}} emneknagg',
     tags_plural: '{{count}} emneknaggar',
-    confirmDeleteFolder: 'Er du sikker på at du vil slette mappa? Denne handlinga kan ikkje endrast.',
+    confirmDeleteFolder:
+      'Er du sikker på at du vil slette mappa? Dersom mappa har undermapper vil desse også slettast. Denne handlinga kan ikkje endrast.',
     confirmDeleteTag: 'Er du sikker på at du vil slette tag? Denne handlinga kan ikkje endrast.',
     myFolders: 'Mine mapper',
     myTags: 'Emneknaggane mine',
@@ -1035,6 +1019,9 @@ const messages = {
       myPage: 'Mi side',
       deleteAccount: 'Slett Min NDLA',
       logout: 'Logg ut av Min NDLA',
+      loginText:
+        'Logg på med Feide for å få tilgang til Min NDLA. Vi ber om at du ikkje skriv noko støtande, personsensitiv informasjon eller andre persondata i tekstfelt. Les vår ',
+      loginTextLink: 'personvernerklæring her',
       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!',