@ndla/ui 20.0.3 → 22.0.1

package/src/SearchTypeResult/SearchItem.tsx

@@ -154,7 +154,6 @@ const ItemText = styled.div<ItemTypeProps>`
 
 const ContextWrapper = styled.div`
   background: white;
-  z-index: 1;
   padding: 0 ${spacing.normal} ${spacing.small};
   transition: all ${animations.durations.fast} ease-in-out;
   ${ItemWrapper}:hover & {

package/src/TopicMenu/TopicMenuButton.jsx

@@ -9,7 +9,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
-import { spacing, fonts, colors } from '@ndla/core';
+import { spacing, fonts, colors, mq, breakpoints } from '@ndla/core';
 import { Menu } from '@ndla/icons/common';
 import Button from '@ndla/button';
 
@@ -38,6 +38,10 @@ const style = css`
     background: ${colors.white};
     color: ${colors.brand.primary};
   }
+  ${mq.range({ until: breakpoints.tablet })} {
+    padding-left: ${spacing.xsmall};
+    padding-right: ${spacing.xsmall};
+  }
 `;
 
 const TopicMenuButton = ({ ndlaFilm, children, ...rest }) => (

package/src/TreeStructure/FolderItem.tsx

@@ -6,13 +6,16 @@
  *
  */
 
-import React, { KeyboardEvent, useEffect, useRef } from 'react';
+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';
 import SafeLink from '@ndla/safelink';
-import { SetFocusedFolderId, FolderChildFuncType } from './TreeStructure.types';
+import { CommonFolderItemsProps, FolderType } from './types';
 import { arrowNavigation } from './arrowNavigation';
 
 const OpenButton = styled.button<{ isOpen: boolean }>`
@@ -39,112 +42,123 @@ const FolderItemWrapper = styled.div`
   align-items: center;
 `;
 
-const WrapperForFolderChild = styled.div<{ marked: boolean }>`
-  position: absolute;
-  right: ${spacing.xsmall};
-  opacity: ${({ marked }) => (marked ? 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 FolderName = styled('button', { shouldForwardProp: (name) => !['marked', 'noArrow'].includes(name) })<{
-  marked: boolean;
+const shouldForwardProp = (name: string) => !['selected', 'noArrow'].includes(name);
+
+interface FolderNameProps {
+  selected?: boolean;
   noArrow?: boolean;
-}>`
-  line-height: 1;
-  background: ${({ marked }) => (marked ? colors.brand.lighter : 'transparent')};
+}
+
+const FolderName = styled('button', { shouldForwardProp })<FolderNameProps>`
+  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: ${({ marked }) => (marked ? colors.brand.light : colors.brand.lightest)};
+    background: ${({ selected }) => (selected ? colors.brand.light : colors.brand.lightest)};
     color: ${colors.brand.primary};
     + ${WrapperForFolderChild} {
       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);
 
-interface Props {
-  name: string;
-  id: string;
-  level: number;
-  onCloseFolder: (id: string) => void;
-  onOpenFolder: (id: string) => void;
-  onMarkFolder: (id: string) => void;
-  onSelectFolder?: (id: string) => void;
-  isOpen: boolean;
-  markedFolderId?: string;
-  focusedFolderId?: string;
-  visibleFolders: string[];
-  loading?: boolean;
-  openOnFolderClick?: boolean;
+interface Props extends CommonFolderItemsProps {
   hideArrow?: boolean;
-  setFocusedFolderId: SetFocusedFolderId;
-  icon?: React.ReactNode;
+  isOpen: boolean;
+  folder: FolderType;
   noPaddingWhenArrowIsHidden?: boolean;
-  folderChild?: FolderChildFuncType;
 }
 
 const FolderItem = ({
+  focusedFolderId,
+  menuItems,
   hideArrow,
-  loading,
+  folder,
+  isOpen,
   level,
-  name,
-  id,
-  visibleFolders,
+  loading,
+  selectedFolder,
+  noPaddingWhenArrowIsHidden,
   onCloseFolder,
   onOpenFolder,
-  onMarkFolder,
   onSelectFolder,
-  isOpen,
-  markedFolderId,
-  focusedFolderId,
   openOnFolderClick,
-  setFocusedFolderId,
-  icon,
-  noPaddingWhenArrowIsHidden,
-  folderChild,
+  setFocusedId,
+  setSelectedFolder,
+  targetResource,
+  visibleFolders,
 }: Props) => {
+  const { t } = useTranslation();
+  const { id, icon, name } = folder;
   const ref = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
-  const marked = markedFolderId === id;
+  const selected = selectedFolder && selectedFolder.id === id;
+  const focused = focusedFolderId === id;
 
-  const handleMarkFolder = () => {
-    onMarkFolder(id);
+  const handleClickFolder = () => {
     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(() => {
     if (focusedFolderId === id) {
-      if (ref.current) {
-        ref.current.focus();
-      }
+      ref.current?.focus();
     }
   }, [focusedFolderId, ref, id]);
 
+  const actions = menuItems?.map((item) => {
+    const { onClick } = item;
+    return {
+      ...item,
+      onClick: (e?: MouseEvent<HTMLDivElement>) => onClick(e, folder),
+    };
+  });
+
+  const linkPath = `/minndla${level > 0 ? '/folders' : ''}/${id}`;
+
+  const containsResource =
+    targetResource && folder.resources.some((resource) => resource.resourceId === targetResource.resourceId);
+
   return (
     <FolderItemWrapper>
       {!hideArrow && (
@@ -160,43 +174,40 @@ const FolderItem = ({
         <>
           <FolderName
             ref={ref}
-            onKeyDown={(e) => arrowNavigation(e, id, visibleFolders, setFocusedFolderId, onOpenFolder, onCloseFolder)}
+            onKeyDown={(e) => arrowNavigation(e, id, visibleFolders, setFocusedId, onOpenFolder, onCloseFolder)}
             noArrow={hideArrow && !noPaddingWhenArrowIsHidden}
-            tabIndex={marked ? 0 : -1}
-            marked={marked}
+            tabIndex={selected || focused ? 0 : -1}
+            selected={selected}
             disabled={loading}
-            onFocus={() => {
-              setFocusedFolderId(id);
-            }}
-            onClick={() => {
-              handleMarkFolder();
-              onSelectFolder(id);
-            }}>
+            onFocus={() => setFocusedId(id)}
+            onClick={handleClickFolder}>
             {icon || <FolderOutlined />}
             {name}
-          </FolderName>
-          {folderChild && (
-            <WrapperForFolderChild marked={marked}>
-              {folderChild(id, marked || 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
           ref={ref}
           onKeyDown={(e: KeyboardEvent<HTMLElement>) =>
-            arrowNavigation(e, id, visibleFolders, setFocusedFolderId, onOpenFolder, onCloseFolder)
+            arrowNavigation(e, id, visibleFolders, setFocusedId, onOpenFolder, onCloseFolder)
           }
           noArrow={hideArrow}
-          to={loading ? '' : `/minndla/${level > 1 ? 'folders/' : ''}${id}`}
-          tabIndex={marked || level === 1 ? 0 : -1}
-          marked={marked}
-          onFocus={() => {
-            setFocusedFolderId(id);
-          }}
-          onClick={() => {
-            handleMarkFolder();
-          }}>
+          to={loading ? '' : linkPath}
+          tabIndex={selected || focused || level === 0 ? 0 : -1}
+          selected={selected}
+          onFocus={() => setFocusedId(id)}
+          onClick={handleClickFolder}>
           {icon || <FolderOutlined />}
           {name}
         </FolderNameLink>

package/src/TreeStructure/FolderItems.tsx

@@ -11,7 +11,7 @@ import styled from '@emotion/styled';
 import { animations, spacing } from '@ndla/core';
 import FolderItem from './FolderItem';
 import FolderNameInput from './FolderNameInput';
-import { FolderItemsProps } from './TreeStructure.types';
+import { CommonFolderItemsProps, FolderType } from './types';
 
 const StyledUL = styled.ul<{ firstLevel?: boolean }>`
   ${animations.fadeInLeft(animations.durations.fast)};
@@ -30,85 +30,66 @@ const StyledLI = styled.li`
   padding: 0;
 `;
 
+export interface FolderItemsProps extends CommonFolderItemsProps {
+  folders: FolderType[];
+  editable?: boolean;
+  maximumLevelsOfFoldersAllowed: number;
+  newFolderParentId: string | undefined;
+  onCancelNewFolder: () => void;
+  onSaveNewFolder: (name: string, parentId: string) => void;
+  openFolders: string[];
+}
+
 const FolderItems = ({
-  loading,
+  editable,
   folders,
   level,
-  editable,
-  onSelectFolder,
-  onCloseFolder,
-  onOpenFolder,
-  onCreateNewFolder,
+  loading,
+  maximumLevelsOfFoldersAllowed,
+  newFolderParentId,
   onCancelNewFolder,
   onSaveNewFolder,
-  newFolderParentId,
-  visibleFolders,
   openFolders,
-  markedFolderId,
-  onMarkFolder,
-  openOnFolderClick,
-  focusedFolderId,
-  setFocusedFolderId,
-  folderChild,
-  maximumLevelsOfFoldersAllowed,
+  ...rest
 }: FolderItemsProps) => (
-  <StyledUL role="group" firstLevel={level === 1}>
-    {folders.map(({ name, subfolders, id, icon }, _index) => {
+  <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>
             <FolderItem
+              hideArrow={subfolders?.length === 0 || level > maximumLevelsOfFoldersAllowed}
+              folder={folder}
+              isOpen={isOpen}
               level={level}
-              icon={icon}
-              onSelectFolder={onSelectFolder}
-              openOnFolderClick={openOnFolderClick}
               loading={loading}
-              isOpen={isOpen}
-              id={id}
-              visibleFolders={visibleFolders}
-              name={name}
-              markedFolderId={markedFolderId}
-              focusedFolderId={focusedFolderId}
-              onMarkFolder={onMarkFolder}
-              onCloseFolder={onCloseFolder}
-              onOpenFolder={onOpenFolder}
-              hideArrow={subfolders?.length === 0 || level > maximumLevelsOfFoldersAllowed}
-              noPaddingWhenArrowIsHidden={editable && level === 1 && subfolders?.length === 0}
-              setFocusedFolderId={setFocusedFolderId}
-              folderChild={folderChild}
+              noPaddingWhenArrowIsHidden={editable && level === 0 && subfolders?.length === 0}
+              {...rest}
             />
           </div>
           {newFolderParentId === id && (
             <FolderNameInput
-              parentId={newFolderParentId}
               loading={loading}
               onCancelNewFolder={onCancelNewFolder}
               onSaveNewFolder={onSaveNewFolder}
+              parentId={newFolderParentId}
             />
           )}
           {subfolders && isOpen && (
             <FolderItems
-              onSelectFolder={onSelectFolder}
-              loading={loading}
-              newFolderParentId={newFolderParentId}
-              visibleFolders={visibleFolders}
-              openFolders={openFolders}
-              level={level + 1}
               editable={editable}
               folders={subfolders}
-              onCloseFolder={onCloseFolder}
-              onOpenFolder={onOpenFolder}
-              onCreateNewFolder={onCreateNewFolder}
-              onSaveNewFolder={onSaveNewFolder}
-              onCancelNewFolder={onCancelNewFolder}
-              markedFolderId={markedFolderId}
-              onMarkFolder={onMarkFolder}
-              openOnFolderClick={openOnFolderClick}
-              focusedFolderId={focusedFolderId}
-              setFocusedFolderId={setFocusedFolderId}
-              folderChild={folderChild}
+              level={level + 1}
+              loading={loading}
               maximumLevelsOfFoldersAllowed={maximumLevelsOfFoldersAllowed}
+              newFolderParentId={newFolderParentId}
+              onCancelNewFolder={onCancelNewFolder}
+              onSaveNewFolder={onSaveNewFolder}
+              openFolders={openFolders}
+              {...rest}
             />
           )}
         </StyledLI>

package/src/TreeStructure/FolderNameInput.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useEffect, useState, useRef } from 'react';
+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';
@@ -65,11 +65,9 @@ const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.select();
-      if (isMobile) {
-        inputRef.current.scrollIntoView({ behavior: 'smooth' });
-      }
+    inputRef.current?.select();
+    if (isMobile) {
+      inputRef.current?.scrollIntoView({ behavior: 'smooth' });
     }
   }, []);
 
@@ -85,7 +83,7 @@ const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading
           disabled={loading}
           value={name}
           onBlur={() => onCancelNewFolder()}
-          onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
             if (e.key === 'Escape') {
               onCancelNewFolder();
             } else if (e.key === 'Enter' || e.key === 'Tab') {
@@ -93,10 +91,7 @@ const FolderNameInput = ({ onSaveNewFolder, parentId, onCancelNewFolder, loading
               onSaveNewFolder(name, parentId);
             }
           }}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            const target = e.target;
-            setName(target.value);
-          }}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
         />
         {loading && <Spinner size="small" />}
       </InputWrapper>