@ndla/ui 25.2.1 → 26.0.0

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 />

package/src/TreeStructure/NavigationLink.tsx

@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) 2022-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import styled from '@emotion/styled';
+import { colors, fonts, spacing } from '@ndla/core';
+import React, { KeyboardEvent, useEffect, useRef } from 'react';
+import SafeLink from '@ndla/safelink';
+import { arrowNavigation } from './arrowNavigation';
+import { CommonFolderItemsProps, FolderType } from './types';
+
+interface StyledProps {
+  selected?: boolean;
+}
+
+const StyledSafeLink = styled(SafeLink)<StyledProps>`
+  display: grid;
+  grid-template-columns: ${spacing.medium} 1fr;
+  align-items: center;
+  padding: ${spacing.xxsmall};
+  margin: ${spacing.xsmall} 0;
+  gap: ${spacing.xxsmall};
+  box-shadow: none;
+
+  color: ${({ selected }) => (selected ? colors.brand.primary : colors.text.primary)};
+  font-weight: ${({ selected }) => (selected ? fonts.weight.semibold : fonts.weight.normal)};
+  ${fonts.sizes('16px')};
+
+  :hover,
+  :focus {
+    color: ${colors.brand.primary};
+  }
+  svg {
+    height: 26px;
+    width: 26px;
+  }
+`;
+
+const IconWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+interface Props extends CommonFolderItemsProps {
+  isOpen: boolean;
+  folder: FolderType;
+}
+
+const NavigationLink = ({
+  loading,
+  folder,
+  selectedFolder,
+  focusedFolderId,
+  setSelectedFolder,
+  setFocusedId,
+  visibleFolders,
+  onOpenFolder,
+  onCloseFolder,
+}: Props) => {
+  const { id, icon, name } = folder;
+  const selected = selectedFolder && selectedFolder.id === id;
+  const ref = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
+  const focused = focusedFolderId === id;
+
+  const handleClick = () => {
+    if (!selected) {
+      setSelectedFolder(folder);
+      setFocusedId(id);
+    }
+  };
+
+  useEffect(() => {
+    if (focusedFolderId === id) {
+      ref.current?.focus();
+    }
+  }, [focusedFolderId, ref, id]);
+
+  return (
+    <StyledSafeLink
+      ref={ref}
+      onKeyDown={(e: KeyboardEvent<HTMLElement>) =>
+        arrowNavigation(e, id, visibleFolders, setFocusedId, onOpenFolder, onCloseFolder)
+      }
+      tabIndex={selected || focused ? 0 : -1}
+      selected={selected}
+      onFocus={() => setFocusedId(id)}
+      onClick={handleClick}
+      to={loading ? '' : `/minndla/${id}`}>
+      <IconWrapper>{icon}</IconWrapper>
+      {name}
+    </StyledSafeLink>
+  );
+};
+
+export default NavigationLink;