@ndla/ui 20.0.2 → 22.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "20.0.2",
+  "version": "22.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,19 +31,20 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^3.1.5",
-    "@ndla/carousel": "^1.2.14",
-    "@ndla/core": "^2.3.2",
-    "@ndla/forms": "^3.1.2",
+    "@ndla/button": "^3.2.0",
+    "@ndla/carousel": "^1.2.15",
+    "@ndla/core": "^2.3.3",
+    "@ndla/forms": "^3.1.3",
     "@ndla/hooks": "^1.1.4",
-    "@ndla/icons": "^1.11.2",
-    "@ndla/licenses": "^5.0.5",
-    "@ndla/modal": "^1.2.15",
-    "@ndla/notion": "^3.1.25",
-    "@ndla/safelink": "^2.2.3",
-    "@ndla/switch": "^0.1.9",
-    "@ndla/tabs": "^1.1.13",
-    "@ndla/tooltip": "^2.1.4",
+    "@ndla/icons": "^1.11.3",
+    "@ndla/licenses": "^5.0.6",
+    "@ndla/modal": "^1.2.16",
+    "@ndla/notion": "^3.1.26",
+    "@ndla/safelink": "^2.2.4",
+    "@ndla/switch": "^0.1.10",
+    "@ndla/tabs": "^1.1.14",
+    "@ndla/tooltip": "^2.1.5",
+    "@ndla/types-learningpath-api": "^0.0.12",
     "@ndla/util": "^3.0.0",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
@@ -82,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8181e40829a9cbd8f2aaa1ccfb4dfdafa8560a5c"
+  "gitHead": "683202fb5ba5a555e6a3d61c89e5cce4ae3b151c"
 }

package/src/LearningPaths/LearningPathInformation.tsx

@@ -8,7 +8,8 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import { fonts, spacing, spacingUnit, breakpoints, mq } from '@ndla/core';
+import { fonts, spacing, spacingUnit, breakpoints, mq, colors } from '@ndla/core';
+import { getLicenseByAbbreviation, LicenseByline } from '@ndla/licenses';
 
 type StyledWrapperProps = {
   invertedStyle?: boolean;
@@ -50,6 +51,17 @@ const StyledWrapper = styled.div<StyledWrapperProps>`
   }
 `;
 
+const LicenseWrapper = styled.div`
+  ul {
+    margin-left: 0;
+    margin-bottom: ${spacing.small};
+  }
+`;
+
+const StyledHeader = styled.h1`
+  margin-bottom: ${spacing.small};
+`;
+
 interface Props {
   description?: string;
   title: string;
@@ -59,14 +71,17 @@ interface Props {
   };
 }
 
-export const LearningPathInformation = ({ description, title, license, invertedStyle }: Props) => (
-  <section className="o-wrapper">
-    <StyledWrapper invertedStyle={invertedStyle} className="c-article">
-      <div>
-        <h1>{title}</h1>
-        {license && license.license}
-      </div>
-      {description && <div dangerouslySetInnerHTML={{ __html: description }} />}
-    </StyledWrapper>
-  </section>
-);
+export const LearningPathInformation = ({ description, title, license, invertedStyle }: Props) => {
+  const { rights } = getLicenseByAbbreviation(license?.license || '', 'nb');
+  return (
+    <section className="o-wrapper">
+      <StyledWrapper invertedStyle={invertedStyle} className="c-article">
+        <LicenseWrapper>
+          <StyledHeader>{title}</StyledHeader>
+          <LicenseByline licenseRights={rights} color={colors.brand.tertiary} />
+        </LicenseWrapper>
+        {description && <div dangerouslySetInnerHTML={{ __html: description }} />}
+      </StyledWrapper>
+    </section>
+  );
+};

package/src/LearningPaths/LearningPathMenu.tsx

@@ -76,6 +76,7 @@ export type StepProps = {
 };
 
 interface Props {
+  onToggleAddToFavorites?: () => void;
   learningsteps: StepProps[];
   name: string;
   lastUpdated: string;
@@ -109,6 +110,7 @@ const LearningPathMenu = ({
   learningPathURL,
   invertedStyle,
   cookies,
+  onToggleAddToFavorites,
 }: Props) => {
   const { t } = useTranslation();
   const [isOpen, toggleOpenState] = useState(false);
@@ -129,7 +131,13 @@ const LearningPathMenu = ({
                 </StyledToggleMenubutton>
               </Tooltip>
             </div>
-            <LearningPathMenuIntro isOpen={isOpen} name={name} invertedStyle={invertedStyle} />
+            <LearningPathMenuIntro
+              isOpen={isOpen}
+              name={name}
+              invertedStyle={invertedStyle}
+              id={learningPathId}
+              onToggleAddToFavorites={onToggleAddToFavorites}
+            />
             <LearningPathMenuContent
               learningsteps={learningsteps}
               learningPathId={learningPathId}

package/src/LearningPaths/LearningPathMenuAsideCopyright.tsx

@@ -9,22 +9,20 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { User } from '@ndla/icons/common';
-import { spacing, fonts } from '@ndla/core';
+import { spacing, fonts, colors } from '@ndla/core';
+import { getLicenseByAbbreviation, LicenseByline } from '@ndla/licenses';
 
 const StyledLearningPathDetails = styled.div`
   ${fonts.sizes(14, 1.1)};
   font-weight: ${fonts.weight.normal};
-  margin: 0;
+`;
+
+const UserLine = styled.div`
   display: flex;
-  align-items: flex-start;
-  justify-items: flex-start;
   margin-bottom: ${spacing.xsmall};
-  p {
-    margin: 0;
-    padding-left: ${spacing.xsmall};
-  }
+
   span {
-    display: block;
+    margin-left: ${spacing.xsmall};
   }
 `;
 
@@ -40,16 +38,20 @@ type Props = {
   };
 };
 
-const LearningPathMenuAsideCopyright = ({ copyright }: Props) => (
-  <StyledLearningPathDetails>
-    <User />
-    <p>
-      {copyright.contributors.map((contributor) => (
-        <span key={contributor.name}>{contributor.name}</span>
-      ))}
-      <span>{copyright.license.license}</span>
-    </p>
-  </StyledLearningPathDetails>
-);
+const LearningPathMenuAsideCopyright = ({ copyright }: Props) => {
+  const { rights } = getLicenseByAbbreviation(copyright.license.license || '', 'nb');
+  return (
+    <StyledLearningPathDetails>
+      <UserLine>
+        <User />
+        {copyright.contributors.map((contributor) => (
+          <span key={contributor.name}>{contributor.name}</span>
+        ))}
+      </UserLine>
+
+      <LicenseByline licenseRights={rights} color={colors.brand.tertiary} />
+    </StyledLearningPathDetails>
+  );
+};
 
 export default LearningPathMenuAsideCopyright;

package/src/LearningPaths/LearningPathMenuIntro.tsx

@@ -11,6 +11,7 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { useTranslation } from 'react-i18next';
 import { colors, spacing, spacingUnit, fonts, typography, mq, breakpoints, animations } from '@ndla/core';
+import { ArticleFavoritesButton } from '../Article';
 
 const StyledInfoHeader = styled.p`
   ${typography.smallHeading}
@@ -94,18 +95,30 @@ const StyledIntroHeader = styled.h1`
   margin: ${spacing.small} 0 ${spacing.normal};
 `;
 
+const StyledRow = styled.div`
+  display: flex;
+  gap: ${spacing.small};
+`;
+
 interface Props {
   isOpen: boolean;
   invertedStyle?: boolean;
   name: string;
+  onToggleAddToFavorites?: () => void;
+  id: number;
 }
 
-const LearningPathMenuIntro = ({ isOpen, name, invertedStyle }: Props) => {
+const LearningPathMenuIntro = ({ isOpen, name, invertedStyle, onToggleAddToFavorites, id }: Props) => {
   const { t } = useTranslation();
   return (
     <StyledMenuIntro isOpen={isOpen} invertedStyle={invertedStyle}>
       <div>
-        <StyledInfoHeader>{t('learningPath.youAreInALearningPath')}</StyledInfoHeader>
+        <StyledRow>
+          <StyledInfoHeader>{t('learningPath.youAreInALearningPath')}</StyledInfoHeader>
+          {onToggleAddToFavorites && (
+            <ArticleFavoritesButton onToggleAddToFavorites={onToggleAddToFavorites} articleId={id.toString()} />
+          )}
+        </StyledRow>
         <StyledIntroHeader>{name}</StyledIntroHeader>
       </div>
     </StyledMenuIntro>

package/src/MyNdla/Resource/Folder.tsx

@@ -141,7 +141,7 @@ const Folder = ({ link, title, subFolders, subResources, type = 'list', menuItem
       <FolderTitle>{title}</FolderTitle>
       <IconCount layoutType={type} type={'folder'} count={subFolders} />
       <IconCount layoutType={type} type={'resource'} count={subResources} />
-      {menuItems && menuItems.length > 0 && <MenuButton size="small" menuItems={menuItems} />}
+      {menuItems && menuItems.length > 0 && <MenuButton alignRight size="small" menuItems={menuItems} />}
     </FolderWrapper>
   );
 };

package/src/Resource/BlockResource.tsx

@@ -92,7 +92,7 @@ const BlockResource = ({ link, title, tags, resourceImage, topics, description,
         <BlockDescription>{description}</BlockDescription>
         <RightRow>
           {tags && <CompressedTagList tags={tags} />}
-          {menuItems && menuItems.length > 0 && <MenuButton size="small" menuItems={menuItems} />}
+          {menuItems && menuItems.length > 0 && <MenuButton alignRight size="small" menuItems={menuItems} />}
         </RightRow>
       </BlockInfoWrapper>
     </BlockElementWrapper>

package/src/Resource/ListResource.tsx

@@ -131,7 +131,7 @@ const ListResource = ({ link, title, tags, resourceImage, topics, description, m
       {showDescription && <ResourceDescription>{description}</ResourceDescription>}
       <TagsandActionMenu>
         {tags && <CompressedTagList tags={tags} />}
-        {menuItems && menuItems.length > 0 && <MenuButton size="small" menuItems={menuItems} />}
+        {menuItems && menuItems.length > 0 && <MenuButton alignRight size="small" menuItems={menuItems} />}
       </TagsandActionMenu>
     </ResourceWrapper>
   );

package/src/ResourceGroup/ResourceGroup.tsx

@@ -36,7 +36,7 @@ const StyledHeading = styled.h1`
 type Props = {
   invertedStyle?: boolean;
   toggleAdditionalResources: () => void;
-  onToggleAddToFavorites: (id: string | number, add: string) => void;
+  onToggleAddToFavorites: (id: string) => void;
   showAddToFavoriteButton: boolean;
 };
 

package/src/ResourceGroup/ResourceItem.tsx

@@ -229,7 +229,7 @@ type Props = {
   showAdditionalResources?: boolean;
   access?: 'teacher';
   isFavorite?: boolean;
-  onToggleAddToFavorites: (id: string, add: boolean) => void;
+  onToggleAddToFavorites: (id: string) => void;
   showAddToFavoriteButton: boolean;
 };
 
@@ -305,7 +305,7 @@ const ResourceItem = ({
           <ArticleFavoritesButton
             isFavorite={isFavorite}
             articleId={id}
-            onToggleAddToFavorites={() => onToggleAddToFavorites(id, true)}
+            onToggleAddToFavorites={() => onToggleAddToFavorites(id)}
           />
         )}
       </TypeWrapper>

package/src/ResourceGroup/ResourceList.tsx

@@ -48,7 +48,7 @@ export type ResourceListProps = {
   contentType?: string;
   title?: string;
   showAdditionalResources?: boolean;
-  onToggleAddToFavorites: (id: string, add: boolean) => void;
+  onToggleAddToFavorites: (id: string) => void;
   showAddToFavoriteButton: boolean;
 };
 

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,14 @@
  *
  */
 
-import React, { KeyboardEvent, useEffect, useRef } from 'react';
+import React, { KeyboardEvent, MouseEvent, useEffect, useRef } from 'react';
 import styled from '@emotion/styled';
 import { ArrowDropDown } from '@ndla/icons/common';
+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,10 +40,10 @@ const FolderItemWrapper = styled.div`
   align-items: center;
 `;
 
-const WrapperForFolderChild = styled.div<{ marked: boolean }>`
+const WrapperForFolderChild = styled.div<{ selected?: boolean }>`
   position: absolute;
   right: ${spacing.xsmall};
-  opacity: ${({ marked }) => (marked ? 1 : 0.25)};
+  opacity: ${({ selected }) => (selected ? 1 : 0.25)};
   &:hover,
   &:focus,
   &:focus-within {
@@ -50,16 +51,20 @@ const WrapperForFolderChild = styled.div<{ marked: boolean }>`
   }
 `;
 
-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;
-}>`
+}
+
+const FolderName = styled('button', { shouldForwardProp })<FolderNameProps>`
   line-height: 1;
-  background: ${({ marked }) => (marked ? colors.brand.lighter : 'transparent')};
+  background: ${({ selected }) => (selected ? colors.brand.lighter : 'transparent')};
   color: ${colors.text.primary};
   &: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;
@@ -82,52 +87,40 @@ const FolderName = styled('button', { shouldForwardProp: (name) => !['marked', '
 
 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,
+  visibleFolders,
 }: Props) => {
+  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 = () => {
+    setSelectedFolder(folder);
+    setFocusedId(id);
+    onSelectFolder?.(id);
     if (openOnFolderClick) {
       if (isOpen) {
         onCloseFolder(id);
@@ -139,12 +132,20 @@ const FolderItem = ({
 
   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 > 1 ? '/folders' : ''}/${id}`;
+
   return (
     <FolderItemWrapper>
       {!hideArrow && (
@@ -160,24 +161,19 @@ 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)}
+          {actions && (
+            <WrapperForFolderChild selected={selected}>
+              <MenuButton size="xsmall" menuItems={actions} tabIndex={selected || id === focusedFolderId ? 0 : -1} />
             </WrapperForFolderChild>
           )}
         </>
@@ -185,18 +181,14 @@ const FolderItem = ({
         <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 === 1 ? 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,65 @@ 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) => {
+    {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}
+              {...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>