@ndla/ui 25.3.0 → 26.1.0

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>
       );

package/src/TreeStructure/FolderNameInput.tsx

@@ -8,9 +8,7 @@
 
 import React, { useEffect, useState, useRef, ChangeEvent, KeyboardEvent } from 'react';
 import styled from '@emotion/styled';
-import { FolderOutlined } from '@ndla/icons/contentType';
-import { ArrowDropDown as ArrowDropDownRaw } from '@ndla/icons/common';
-import { spacing, colors, misc, animations } from '@ndla/core';
+import { spacing, colors, animations, spacingUnit } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import { isMobile } from 'react-device-detect';
 import { Spinner } from '@ndla/icons';
@@ -18,18 +16,22 @@ import { IconButton } from '@ndla/button';
 import { Cross } from '@ndla/icons/action';
 import { Done } from '@ndla/icons/editor';
 
-const ArrowRight = styled(ArrowDropDownRaw)`
-  color: ${colors.text.primary};
-  transform: rotate(-90deg);
-`;
+// 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 NewFolderWrapper = styled.div`
-  padding-left: ${spacing.normal};
-  ${animations.fadeInLeft(animations.durations.fast)};
-  animation-fill-mode: forwards;
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
+  background: linear-gradient(
+    to bottom,
+    ${colors.white} 0%,
+    ${colors.white} 15%,
+    ${colors.brand.lighter} 15%,
+    ${colors.brand.lighter} 85%,
+    ${colors.white} 85%,
+    ${colors.white} 100%
+  );
+  background-size: auto 100%;
 `;
 
 const Row = styled.div`
@@ -38,23 +40,31 @@ const Row = styled.div`
   padding-right: ${spacing.xsmall};
 `;
 
-const InputWrapper = styled.div<{ loading?: boolean }>`
+const InputWrapper = styled.div<{ level: number }>`
   display: flex;
   margin: ${spacing.xxsmall} 0;
+  margin-left: ${({ level }) => 0.75 * spacingUnit * level + 2 * spacingUnit}px;
+  margin-right: ${spacing.normal};
   align-items: center;
-  border: 1px solid ${({ loading }) => (loading ? colors.brand.lighter : colors.brand.primary)};
-  border-style: dashed;
-  border-radius: ${misc.borderRadius};
+  background-color: ${colors.white};
+  background-image: ${borderStyle};
   color: ${colors.brand.primary};
+
+  ${animations.fadeInLeft(animations.durations.fast)};
+  animation-fill-mode: forwards;
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
 `;
 
 const StyledInput = styled.input`
+  padding: ${spacing.small};
   flex-grow: 1;
   border: 0;
   outline: none;
   min-width: 0;
   background: transparent;
-  color: ${colors.text.primary};
+  color: ${colors.brand.primary};
   scroll-margin-top: 100px;
 `;
 
@@ -63,11 +73,12 @@ interface FolderNameInputProps {
   parentId: string;
   onCancelNewFolder: () => void;
   loading?: boolean;
+  level: number;
 }
 
-const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading }: FolderNameInputProps) => {
+const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading, level }: FolderNameInputProps) => {
   const { t } = useTranslation();
-  const [name, setName] = useState<string>(t('treeStructure.newFolder.defaultName'));
+  const [name, setName] = useState<string>('');
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -75,15 +86,14 @@ const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading
     if (isMobile) {
       inputRef.current?.scrollIntoView({ behavior: 'smooth' });
     }
-  }, []);
+    return () => {
+      onCancelNewFolder();
+    };
+  }, [onCancelNewFolder]);
 
   return (
     <NewFolderWrapper>
-      <InputWrapper loading={loading}>
-        <Row>
-          <ArrowRight />
-          <FolderOutlined />
-        </Row>
+      <InputWrapper level={level}>
         <StyledInput
           ref={inputRef}
           autoFocus
@@ -96,6 +106,10 @@ const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading
               onCancelNewFolder();
             } else if (e.key === 'Enter' || e.key === 'Tab') {
               e.preventDefault();
+              if (name === '') {
+                onCancelNewFolder();
+                return;
+              }
               onSaveNewFolder(name, parentId);
             }
           }}
@@ -104,12 +118,13 @@ const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading
         <Row>
           {!loading ? (
             <>
-              <IconButton aria-label={t('close')} size="xsmall" ghostPill onClick={onCancelNewFolder}>
+              <IconButton aria-label={t('close')} title={t('close')} size="small" ghostPill onClick={onCancelNewFolder}>
                 <Cross />
               </IconButton>
               <IconButton
                 aria-label={t('save')}
-                size="xsmall"
+                title={t('save')}
+                size="small"
                 ghostPill
                 onClick={() => onSaveNewFolder(name, parentId)}>
                 <Done />