@ndla/ui 25.3.0 → 26.0.0

package/lib/TreeStructure/types.d.ts

@@ -10,7 +10,9 @@ import { IFolder, IResource } from '@ndla/types-learningpath-api';
 import { MenuItemProps } from '@ndla/button';
 export interface FolderType extends IFolder {
     icon?: ReactNode;
+    isNavigation?: boolean;
 }
+export declare type TreeStructureType = 'normal' | 'navigation' | 'picker';
 export interface TreeStructureMenuProps extends Omit<MenuItemProps, 'onClick'> {
     onClick: (e: MouseEvent<HTMLDivElement> | undefined, folder: FolderType) => void;
 }
@@ -18,13 +20,14 @@ 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/lib/locale/messages-en.d.ts

@@ -169,6 +169,8 @@ declare const messages: {
             edit: string;
             delete: string;
         };
+        hideFolders: string;
+        showFolders: string;
         createFolder: string;
         maxFoldersAlreadyAdded: string;
         newFolder: {

package/lib/locale/messages-en.js

@@ -33,6 +33,8 @@ var messages = _objectSpread(_objectSpread({
       edit: 'Edit foldername',
       "delete": 'Delete'
     },
+    hideFolders: 'Hide all folders',
+    showFolders: 'Show all folders',
     createFolder: 'Create folder',
     maxFoldersAlreadyAdded: 'Maximum subfolders reached',
     newFolder: {

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

@@ -169,6 +169,8 @@ declare const messages: {
             edit: string;
             delete: string;
         };
+        hideFolders: string;
+        showFolders: string;
         createFolder: string;
         maxFoldersAlreadyAdded: string;
         newFolder: {

package/lib/locale/messages-nb.js

@@ -33,6 +33,8 @@ var messages = _objectSpread(_objectSpread({
       edit: 'Endre mappenavn',
       "delete": 'Slett'
     },
+    hideFolders: 'Skjul alle mapper',
+    showFolders: 'Vis alle mapper',
     createFolder: 'Lag mappe',
     maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {

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

@@ -169,6 +169,8 @@ declare const messages: {
             edit: string;
             delete: string;
         };
+        hideFolders: string;
+        showFolders: string;
         createFolder: string;
         maxFoldersAlreadyAdded: string;
         newFolder: {

package/lib/locale/messages-nn.js

@@ -33,6 +33,8 @@ var messages = _objectSpread(_objectSpread({
       edit: 'Endre mappenamn',
       "delete": 'Slett'
     },
+    hideFolders: 'Skjul alle mapper',
+    showFolders: 'Vis alle mapper',
     createFolder: 'Lag mappe',
     maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {

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

@@ -169,6 +169,8 @@ declare const messages: {
             edit: string;
             delete: string;
         };
+        hideFolders: string;
+        showFolders: string;
         createFolder: string;
         maxFoldersAlreadyAdded: string;
         newFolder: {

package/lib/locale/messages-se.js

@@ -33,6 +33,8 @@ var messages = _objectSpread(_objectSpread({
       edit: 'Rievdat máhpa nama',
       "delete": 'Sihko'
     },
+    hideFolders: 'Skjul alle mapper',
+    showFolders: 'Vis alle mapper',
     createFolder: 'Ráhkat máhpa',
     maxFoldersAlreadyAdded: 'Vuollemáhpaid badjerádji lea olahuvvon',
     newFolder: {

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

@@ -169,6 +169,8 @@ declare const messages: {
             edit: string;
             delete: string;
         };
+        hideFolders: string;
+        showFolders: string;
         createFolder: string;
         maxFoldersAlreadyAdded: string;
         newFolder: {

package/lib/locale/messages-sma.js

@@ -33,6 +33,8 @@ var messages = _objectSpread(_objectSpread({
       edit: 'Endre mappenavn',
       "delete": 'Slett'
     },
+    hideFolders: 'Skjul alle mapper',
+    showFolders: 'Vis alle mapper',
     createFolder: 'Lag mappe',
     maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "25.3.0",
+  "version": "26.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,18 +32,18 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.2",
-    "@ndla/button": "^3.4.1",
-    "@ndla/carousel": "^1.2.21",
+    "@ndla/button": "^3.5.0",
+    "@ndla/carousel": "^1.2.22",
     "@ndla/core": "^2.3.5",
-    "@ndla/forms": "^3.2.0",
+    "@ndla/forms": "^3.2.1",
     "@ndla/hooks": "^1.1.6",
-    "@ndla/icons": "^1.12.0",
-    "@ndla/licenses": "^5.0.15",
-    "@ndla/modal": "^1.3.5",
-    "@ndla/notion": "^3.1.39",
-    "@ndla/safelink": "^2.2.13",
+    "@ndla/icons": "^1.12.1",
+    "@ndla/licenses": "^5.0.16",
+    "@ndla/modal": "^1.3.6",
+    "@ndla/notion": "^3.1.40",
+    "@ndla/safelink": "^2.2.14",
     "@ndla/switch": "^0.1.13",
-    "@ndla/tabs": "^1.1.20",
+    "@ndla/tabs": "^1.1.21",
     "@ndla/tooltip": "^2.2.1",
     "@ndla/types-learningpath-api": "^0.0.13",
     "@ndla/util": "^3.1.0",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b00cf1eb600a2fa9b3113b51abd0c7b2f02d0860"
+  "gitHead": "e2029bce0a42c485f247a60ee895b2320fddc6ba"
 }

package/src/LanguageSelector/LanguageSelector.tsx

@@ -115,7 +115,9 @@ interface StyledButtonProps {
   inverted?: boolean;
 }
 
-const StyledButton = styled(Button)<StyledButtonProps>`
+const shouldForwardProp = (name: string) => name !== 'outline';
+
+const StyledButton = styled(Button, { shouldForwardProp })<StyledButtonProps>`
   border-color: ${({ inverted, outline }) =>
     outline ? (inverted ? colors.white : colors.brand.primary) : 'transparent'};
 `;
@@ -139,6 +141,7 @@ const LanguageSelector = ({ currentLanguage, outline, center, inverted, alwaysVi
         </StyledSpan>
         <ChevronDown />
       </StyledButton>
+
       {isOpen && (
         <FocusTrapReact
           active

package/src/TreeStructure/FolderItem.tsx

@@ -6,40 +6,38 @@
  *
  */
 
-import React, { KeyboardEvent, MouseEvent, useEffect, useRef } from 'react';
+import React, { KeyboardEvent, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
-import { ArrowDropDown } from '@ndla/icons/common';
+import { ArrowDropDownRounded } 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';
+import { ButtonV2 as Button } from '@ndla/button';
+import { colors, spacing, animations, spacingUnit, misc, fonts } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import { CommonFolderItemsProps, FolderType } from './types';
 import { arrowNavigation } from './arrowNavigation';
 
-const OpenButton = styled.button<{ isOpen: boolean }>`
-  background: transparent;
-  border: 0;
-  transform: rotate(${({ isOpen }) => (isOpen ? '0' : '-90')}deg);
-  padding: ${spacing.xsmall};
+const OpenButton = styled.span<{ isOpen: boolean }>`
   display: flex;
-  margin: 0;
-  color: ${colors.brand.secondary};
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  color: ${colors.brand.tertiary};
+  ${misc.transition.default};
   cursor: pointer;
   &:hover {
     color: ${colors.brand.primary};
   }
   svg {
-    width: 16px;
-    height: 16px;
-    transform: ${({ isOpen }) => (isOpen ? 'translateX(3px)' : 'translateY(3px)')};
+    width: 24px;
+    height: 24px;
+    transform: rotate(${({ isOpen }) => (isOpen ? '0' : '-90')}deg);
   }
 `;
 
-const FolderItemWrapper = styled.div`
-  display: flex;
-  align-items: center;
+const StyledName = styled.span`
+  grid-column-start: 2;
+  text-align: left;
 `;
 
 const WrapperForFolderChild = styled.div`
@@ -47,44 +45,39 @@ const WrapperForFolderChild = styled.div`
   flex-direction: row;
   align-items: center;
   gap: ${spacing.xsmall};
+  margin-left: auto;
 `;
 
-const shouldForwardProp = (name: string) => !['selected', 'noArrow', 'fullWidth'].includes(name);
+const shouldForwardProp = (name: string) => !['selected', 'noArrow', 'fullWidth', 'level'].includes(name);
 
 interface FolderNameProps {
   selected?: boolean;
   noArrow?: boolean;
   fullWidth?: boolean;
+  level: number;
+  isCreatingFolder?: boolean;
 }
 
-const FolderName = styled('button', { shouldForwardProp })<FolderNameProps>`
-  cursor: pointer;
-  padding: ${spacing.xsmall};
-  margin: 0;
-  outline-offset: -2px;
-  outline-color: ${colors.brand.primary};
-  margin-left: ${({ noArrow }) => (noArrow ? `29px` : `0px`)};
-  flex-grow: ${({ fullWidth }) => fullWidth && 1};
+const FolderName = styled(Button, { shouldForwardProp })<FolderNameProps>`
   display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
+  grid-template-columns: ${spacing.medium} 1fr auto;
+
+  padding-left: ${({ level }) => 0.75 * spacingUnit * level}px;
   gap: ${spacing.xxsmall};
-  border: 0;
-  border-radius: ${misc.borderRadius};
-  box-shadow: none;
-  background: ${({ selected }) => (selected ? colors.brand.lighter : 'transparent')};
-  color: ${colors.text.primary};
+  border: none;
+  outline: none;
+  background: ${({ selected, isCreatingFolder }) => selected && !isCreatingFolder && colors.brand.lighter};
+  color: ${({ isCreatingFolder, selected }) =>
+    isCreatingFolder && selected ? colors.brand.primary : colors.text.primary};
   transition: ${animations.durations.superFast};
-  text-align: left;
   line-height: 1;
   word-break: break-word;
   &:hover,
   &:focus {
+    box-shadow: none;
+    outline: none;
     background: ${({ selected }) => (selected ? colors.brand.light : colors.brand.lightest)};
-    color: ${colors.brand.primary};
-    + ${WrapperForFolderChild} {
-      opacity: 1;
-    }
+    color: ${colors.text.primary};
   }
 `;
 
@@ -92,25 +85,42 @@ const StyledDone = styled(Done)`
   color: ${colors.support.green};
 `;
 
-const FolderNameLink = FolderName.withComponent(SafeLink);
+const FolderNameLink = styled(SafeLink, { shouldForwardProp })<FolderNameProps>`
+  display: grid;
+  align-items: center;
+  grid-template-columns: ${spacing.medium} 1fr auto;
+  padding: ${spacing.small} ${spacing.xxsmall};
+  margin-left: ${({ level }) => 0.75 * spacingUnit * level}px;
+  gap: ${spacing.xxsmall};
+  cursor: pointer;
+
+  border: none;
+  box-shadow: none;
+  color: ${({ selected }) => (selected ? colors.brand.primary : colors.text.primary)};
+  font-weight: ${({ selected }) => selected && fonts.weight.semibold};
+  font-size: ${fonts.sizes('16px')};
+  transition: ${animations.durations.superFast};
+  line-height: 1;
+  word-break: break-word;
+  &:hover,
+  &:focus {
+    color: ${colors.brand.primary};
+  }
+`;
 
 interface Props extends CommonFolderItemsProps {
-  hideArrow?: boolean;
   isOpen: boolean;
   folder: FolderType;
-  noPaddingWhenArrowIsHidden?: boolean;
+  isCreatingFolder?: boolean;
 }
 
 const FolderItem = ({
   focusedFolderId,
-  menuItems,
-  hideArrow,
   folder,
   isOpen,
   level,
   loading,
   selectedFolder,
-  noPaddingWhenArrowIsHidden,
   onCloseFolder,
   onOpenFolder,
   onSelectFolder,
@@ -120,9 +130,11 @@ const FolderItem = ({
   targetResource,
   visibleFolders,
   framed,
+  maxLevel,
+  isCreatingFolder,
 }: Props) => {
   const { t } = useTranslation();
-  const { id, icon, name } = folder;
+  const { id, name } = folder;
   const ref = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
   const selected = selectedFolder && selectedFolder.id === id;
   const focused = focusedFolderId === id;
@@ -145,79 +157,89 @@ const FolderItem = ({
   };
 
   useEffect(() => {
-    if (focusedFolderId === id) {
+    if (focusedFolderId === id && !isCreatingFolder) {
       ref.current?.focus();
     }
-  }, [focusedFolderId, ref, id]);
-
-  const actions = menuItems?.map((item) => {
-    const { onClick } = item;
-    return {
-      ...item,
-      onClick: (e?: MouseEvent<HTMLDivElement>) => onClick(e, folder),
-    };
-  });
+  }, [focusedFolderId, ref, id, isCreatingFolder]);
 
   const linkPath = `/minndla${level > 0 ? '/folders' : ''}/${id}`;
 
   const containsResource =
     targetResource && folder.resources.some((resource) => resource.resourceId === targetResource.resourceId);
 
-  return (
-    <FolderItemWrapper>
+  const emptyFolder = folder.subfolders.length === 0;
+
+  const isMaxDepth = level > maxLevel;
+
+  const hideArrow = isMaxDepth || emptyFolder;
+
+  return onSelectFolder ? (
+    <FolderName
+      variant="ghost"
+      shape="sharp"
+      fontWeight="normal"
+      colorTheme="light"
+      ref={ref}
+      level={level}
+      fullWidth={framed}
+      onKeyDown={(e) => arrowNavigation(e, id, visibleFolders, setFocusedId, onOpenFolder, onCloseFolder)}
+      noArrow={hideArrow}
+      tabIndex={selected || focused ? 0 : -1}
+      selected={selected}
+      disabled={loading}
+      onFocus={() => setFocusedId(id)}
+      onClick={handleClickFolder}
+      isCreatingFolder={isCreatingFolder}>
       {!hideArrow && (
         <OpenButton
           tabIndex={-1}
           isOpen={isOpen}
-          disabled={loading}
-          onClick={() => (isOpen ? onCloseFolder(id) : onOpenFolder(id))}>
-          <ArrowDropDown />
+          onClick={() => {
+            ref.current?.focus();
+            if (isOpen) {
+              onCloseFolder(id);
+            } else {
+              onOpenFolder(id);
+            }
+          }}>
+          <ArrowDropDownRounded />
         </OpenButton>
       )}
-      {onSelectFolder ? (
-        <>
-          <FolderName
-            fullWidth={framed}
-            ref={ref}
-            onKeyDown={(e) => arrowNavigation(e, id, visibleFolders, setFocusedId, onOpenFolder, onCloseFolder)}
-            noArrow={hideArrow && !noPaddingWhenArrowIsHidden}
-            tabIndex={selected || focused ? 0 : -1}
-            selected={selected}
-            disabled={loading}
-            onFocus={() => setFocusedId(id)}
-            onClick={handleClickFolder}>
-            {icon || <FolderOutlined />}
-            {name}
-            <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
-          ref={ref}
-          onKeyDown={(e: KeyboardEvent<HTMLElement>) =>
-            arrowNavigation(e, id, visibleFolders, setFocusedId, onOpenFolder, onCloseFolder)
-          }
-          noArrow={hideArrow}
-          to={loading ? '' : linkPath}
-          tabIndex={selected || focused || level === 0 ? 0 : -1}
-          selected={selected}
-          onFocus={() => setFocusedId(id)}
-          onClick={handleClickFolder}>
-          {icon || <FolderOutlined />}
-          {name}
-        </FolderNameLink>
+      <StyledName>{name}</StyledName>
+      <WrapperForFolderChild>
+        {containsResource && <StyledDone title={t('myNdla.alreadyInFolder')} />}
+      </WrapperForFolderChild>
+    </FolderName>
+  ) : (
+    <FolderNameLink
+      ref={ref}
+      level={level}
+      onKeyDown={(e: KeyboardEvent<HTMLElement>) =>
+        arrowNavigation(e, id, visibleFolders, setFocusedId, onOpenFolder, onCloseFolder)
+      }
+      noArrow={!isMaxDepth}
+      to={loading ? '' : linkPath}
+      tabIndex={selected || focused ? 0 : -1}
+      selected={selected}
+      onFocus={() => setFocusedId(id)}
+      onClick={handleClickFolder}>
+      {(!hideArrow || level === 0) && (
+        <OpenButton
+          tabIndex={-1}
+          isOpen={isOpen}
+          onClick={() => {
+            ref.current?.focus();
+            if (isOpen) {
+              onCloseFolder(id);
+            } else {
+              onOpenFolder(id);
+            }
+          }}>
+          <ArrowDropDownRounded />
+        </OpenButton>
       )}
-    </FolderItemWrapper>
+      <StyledName>{name}</StyledName>
+    </FolderNameLink>
   );
 };
 

package/src/TreeStructure/FolderItems.tsx

@@ -8,12 +8,13 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import { animations, spacing } from '@ndla/core';
+import { animations } from '@ndla/core';
 import FolderItem from './FolderItem';
 import FolderNameInput from './FolderNameInput';
-import { CommonFolderItemsProps, FolderType } from './types';
+import { CommonFolderItemsProps, FolderType, TreeStructureType } from './types';
+import NavigationLink from './NavigationLink';
 
-const StyledUL = styled.ul<{ firstLevel?: boolean }>`
+const StyledUL = styled.ul`
   ${animations.fadeInLeft(animations.durations.fast)};
   animation-fill-mode: forwards;
   @media (prefers-reduced-motion: reduce) {
@@ -22,18 +23,22 @@ const StyledUL = styled.ul<{ firstLevel?: boolean }>`
   list-style: none;
   margin: 0;
   padding: 0;
-  margin-left: ${({ firstLevel }) => (firstLevel ? `-${spacing.xsmall}` : spacing.small)};
 `;
 
-const StyledLI = styled.li`
+interface StyledLiProps {
+  type?: TreeStructureType;
+}
+
+const StyledLI = styled.li<StyledLiProps>`
+  display: flex;
+  flex-direction: column;
+  align-items: ${({ type }) => type === 'navigation' && 'flex-start'};
   margin: 0;
   padding: 0;
 `;
 
 export interface FolderItemsProps extends CommonFolderItemsProps {
   folders: FolderType[];
-  editable?: boolean;
-  maximumLevelsOfFoldersAllowed: number;
   newFolderParentId: string | undefined;
   onCancelNewFolder: () => void;
   onSaveNewFolder: (name: string, parentId: string) => void;
@@ -41,56 +46,59 @@ export interface FolderItemsProps extends CommonFolderItemsProps {
 }
 
 const FolderItems = ({
-  editable,
   folders,
   level,
   loading,
-  maximumLevelsOfFoldersAllowed,
   newFolderParentId,
   onCancelNewFolder,
   onSaveNewFolder,
   openFolders,
+  type,
   ...rest
 }: FolderItemsProps) => (
-  <StyledUL role="group" firstLevel={level === 0}>
+  <StyledUL role={level === 0 ? 'tree' : 'group'}>
     {folders.map((folder) => {
       const { subfolders, id } = folder;
       const isOpen = openFolders?.includes(id);
 
       return (
-        <StyledLI key={id} role="treeitem">
-          <div>
-            <FolderItem
-              hideArrow={subfolders?.length === 0 || level > maximumLevelsOfFoldersAllowed}
-              folder={folder}
-              isOpen={isOpen}
-              level={level}
-              loading={loading}
-              noPaddingWhenArrowIsHidden={editable && level === 0 && subfolders?.length === 0}
-              {...rest}
-            />
-          </div>
-          {newFolderParentId === id && (
-            <FolderNameInput
-              loading={loading}
-              onCancelNewFolder={onCancelNewFolder}
-              onSaveNewFolder={onSaveNewFolder}
-              parentId={newFolderParentId}
-            />
-          )}
-          {subfolders && isOpen && (
-            <FolderItems
-              editable={editable}
-              folders={subfolders}
-              level={level + 1}
-              loading={loading}
-              maximumLevelsOfFoldersAllowed={maximumLevelsOfFoldersAllowed}
-              newFolderParentId={newFolderParentId}
-              onCancelNewFolder={onCancelNewFolder}
-              onSaveNewFolder={onSaveNewFolder}
-              openFolders={openFolders}
-              {...rest}
-            />
+        <StyledLI key={id} role="treeitem" type={type}>
+          {folder.isNavigation ? (
+            <NavigationLink folder={folder} isOpen={isOpen} level={level} type={type} loading={loading} {...rest} />
+          ) : (
+            <>
+              <FolderItem
+                folder={folder}
+                isOpen={isOpen}
+                level={level}
+                loading={loading}
+                type={type}
+                isCreatingFolder={newFolderParentId === folder.id}
+                {...rest}
+              />
+              {newFolderParentId === id && (
+                <FolderNameInput
+                  loading={loading}
+                  level={level}
+                  onCancelNewFolder={onCancelNewFolder}
+                  onSaveNewFolder={onSaveNewFolder}
+                  parentId={newFolderParentId}
+                />
+              )}
+              {subfolders && isOpen && (
+                <FolderItems
+                  folders={subfolders}
+                  level={level + 1}
+                  loading={loading}
+                  type={type}
+                  newFolderParentId={newFolderParentId}
+                  onCancelNewFolder={onCancelNewFolder}
+                  onSaveNewFolder={onSaveNewFolder}
+                  openFolders={openFolders}
+                  {...rest}
+                />
+              )}
+            </>
           )}
         </StyledLI>
       );