@ndla/ui 25.2.1 → 26.0.0

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

@@ -92,6 +92,8 @@ declare const messages: {
             myPage: string;
             deleteAccount: string;
             logout: string;
+            loginText: string;
+            loginTextLink: string;
             loginTerms: string;
             loginResourcePitch: string;
             loginWelcome: string;
@@ -167,6 +169,8 @@ declare const messages: {
             edit: string;
             delete: string;
         };
+        hideFolders: string;
+        showFolders: string;
         createFolder: string;
         maxFoldersAlreadyAdded: string;
         newFolder: {
@@ -392,13 +396,6 @@ declare const messages: {
                 name: string;
             };
         };
-        category: {
-            fellesfag: string;
-            yrkesfag: string;
-            studiespesialiserende: string;
-            imported: string;
-            heading: string;
-        };
         errorDescription: string;
         film: {
             header: string;
@@ -955,18 +952,6 @@ declare const messages: {
             text: string;
         };
     };
-    fagfornyelse: {
-        frontpage: {
-            heading: string;
-            text: string;
-            blogHeading: string;
-        };
-        badge: {
-            heading: string;
-            text: string;
-            linkText: string;
-        };
-    };
     frontPageToolbox: {
         heading: string;
         text: string;

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: {
@@ -248,13 +250,6 @@ var messages = _objectSpread(_objectSpread({
         name: 'Følg oss'
       }
     },
-    category: {
-      fellesfag: 'Fellesfag',
-      yrkesfag: 'Yrkesfag',
-      studiespesialiserende: 'Studieforberedende',
-      imported: 'Spolte fag',
-      heading: 'Hva lærer du?'
-    },
     errorDescription: 'Beklager, en feil oppstod under lasting av fagene.',
     film: {
       header: 'NDLA film',
@@ -787,18 +782,6 @@ var messages = _objectSpread(_objectSpread({
       text: 'er utarbeidet av'
     }
   },
-  fagfornyelse: {
-    frontpage: {
-      heading: 'Velkommen til sniktitt på Fagfornyelsen i NDLA',
-      text: 'Høsten 2020 og 2021 vil de nye læreplanene tre i kraft. I NDLA har vi startet med dette arbeidet allerede. Våre innholdsansvarlige lager hver dag nye supre læringsressurser som er tilrettelagt for de nye planene. På denne siden kan du se dem allerede nå.',
-      blogHeading: 'Vil du vite mer?'
-    },
-    badge: {
-      heading: 'Denne siden er tilrettelagt for fagfornyelsen 2020/2021',
-      text: 'Innholdet er under arbeid. Ikke på jakt etter dette?',
-      linkText: 'Gå til ndla.no for dagens innhold'
-    }
-  },
   frontPageToolbox: {
     heading: 'Verktøykassa',
     text: 'Har du lyst til å bli god til å presentere, eller vil du lære å studere smartere ved hjelp av riktig studieteknikk? Trenger du råd om hvordan du leser mest mulig effektivt til eksamen? I verktøykassa til NDLA finner du masse gode tips og råd!',
@@ -970,14 +953,14 @@ var messages = _objectSpread(_objectSpread({
     folders_plural: '{{count}} mapper',
     folder: {
       folder: 'Mappe',
-      "delete": 'Slett',
-      edit: 'Rediger',
+      "delete": 'Slett mappe',
+      edit: 'Rediger mappe',
       missingName: 'Skriv navn på mappe',
       folderDeleted: '"{{folderName}}" er slettet'
     },
     tags: '{{count}} emneknagg',
     tags_plural: '{{count}} emneknagger',
-    confirmDeleteFolder: 'Er du sikker på at du vil slette mappen? Denne handlingen kan ikke endres.',
+    confirmDeleteFolder: 'Er du sikker på at du vil slette mappa? Dersom mappa har undermappar vil disse også slettes. Denne handlinga kan ikkje endrast.',
     confirmDeleteTag: 'Er du sikker på at du vil slette emneknagg? Denne handlingen kan ikke endres.',
     myFolders: 'Mine mapper',
     myTags: 'Mine emneknagger',
@@ -999,6 +982,8 @@ var messages = _objectSpread(_objectSpread({
       myPage: 'Min side',
       deleteAccount: 'Slett Min NDLA',
       logout: 'Logg ut av Min NDLA',
+      loginText: 'Logg på med Feide for å få tilgang til Min NDLA. Vi ber om at du ikkje skriver noko støtende, personsensitiv informasjon eller andre persondata i tekstfelt. Les vår ',
+      loginTextLink: 'personvernerklæring her',
       loginTerms: 'Logg på med Feide for å få tilgang. Ved å logge på godkjenner du våre vilkår for bruk',
       loginResourcePitch: 'Ønsker du å favorittmerke denne siden?',
       loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på <i>din</i> måte!',
@@ -1043,7 +1028,7 @@ var messages = _objectSpread(_objectSpread({
       linkCopied: 'Kopiert til utklippstavle',
       addToMyNdla: 'Legg i Min NDLA',
       addedToMyNdla: 'Lagt i Min NDLA',
-      addedToFolder: 'Ressurs er lagt i "{{folderName}}"',
+      addedToFolder: 'Ressurs er lagt i ',
       removedFromFolder: 'Fjernet fra "{{folderName}}"',
       titleUpdated: 'Tittel oppdatert',
       tagsUpdated: 'Emneknagger oppdatert',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "25.2.1",
+  "version": "26.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,22 +31,22 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/article-scripts": "^3.0.1",
-    "@ndla/button": "^3.4.0",
-    "@ndla/carousel": "^1.2.20",
+    "@ndla/article-scripts": "^3.0.2",
+    "@ndla/button": "^3.5.0",
+    "@ndla/carousel": "^1.2.22",
     "@ndla/core": "^2.3.5",
-    "@ndla/forms": "^3.1.9",
-    "@ndla/hooks": "^1.1.5",
-    "@ndla/icons": "^1.11.8",
-    "@ndla/licenses": "^5.0.14",
-    "@ndla/modal": "^1.3.4",
-    "@ndla/notion": "^3.1.38",
-    "@ndla/safelink": "^2.2.12",
+    "@ndla/forms": "^3.2.1",
+    "@ndla/hooks": "^1.1.6",
+    "@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.19",
+    "@ndla/tabs": "^1.1.21",
     "@ndla/tooltip": "^2.2.1",
     "@ndla/types-learningpath-api": "^0.0.13",
-    "@ndla/util": "^3.0.1",
+    "@ndla/util": "^3.1.0",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
     "focus-trap-react": "^8.9.2",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "49b8d92c63e8aac6fb8891404d0262383c6523cb"
+  "gitHead": "e2029bce0a42c485f247a60ee895b2320fddc6ba"
 }

package/src/Article/ArticleByline.tsx

@@ -75,8 +75,11 @@ const getSuppliersText = (suppliers: SupplierProps[], t: TFunction) => {
     return '';
   }
   return suppliers.length > 1
-    ? t('article.multipleSuppliersLabel', { names: renderContributors(suppliers, t) })
-    : t('article.supplierLabel', { name: renderContributors(suppliers, t) });
+    ? t('article.multipleSuppliersLabel', {
+        names: renderContributors(suppliers, t),
+        interpolation: { escapeValue: false },
+      })
+    : t('article.supplierLabel', { name: renderContributors(suppliers, t), interpolation: { escapeValue: false } });
 };
 
 const ArticleByline = ({
@@ -114,7 +117,10 @@ const ArticleByline = ({
             {showPrimaryContributors && (
               <PrimaryContributorsWrapper>
                 {authors.length > 0
-                  ? t('article.authorsLabel', { names: renderContributors(authors, t) })
+                  ? t('article.authorsLabel', {
+                      names: renderContributors(authors, t),
+                      interpolation: { escapeValue: false },
+                    })
                   : getSuppliersText(suppliers, t)}
               </PrimaryContributorsWrapper>
             )}
@@ -150,6 +156,7 @@ const ArticleByline = ({
             size="small"
             borderShape="rounded"
             outline
+            aria-live="assertive"
             data-copy-string={copyPageUrlLink}
             copyNode={t('article.copyPageLinkCopied')}>
             {t('article.copyPageLink')}

package/src/Article/ArticleSideBar.tsx

@@ -89,6 +89,7 @@ const ArticleSideBar = ({
             size="small"
             width="full"
             outline
+            aria-live="assertive"
             copyNode={t('article.copyPageLinkCopied')}
             data-copy-string={copyPageUrlLink}>
             {t('article.copyPageLink')}

package/src/Breadcrumb/BreadcrumbItem.tsx

@@ -92,7 +92,7 @@ const BreadcrumbItem = forwardRef<any, Props>(
     const { to, name, index } = item;
     const isLast = index === totalCount - 1;
     return (
-      <StyledListItem ref={liRef} autoCollapse={autoCollapse}>
+      <StyledListItem ref={liRef} autoCollapse={autoCollapse} aria-current={isLast ? 'page' : undefined}>
         <CollapseContainer autoCollapse={autoCollapse}>
           {renderItem ? (
             renderItem(item, totalCount)

package/src/ErrorMessage/ErrorMessage.tsx

@@ -47,6 +47,7 @@ interface Props {
     linksTitle?: string;
     back?: string;
     goToFrontPage?: string;
+    logInFailed?: string;
   };
   illustration?: {
     url: string;
@@ -78,6 +79,11 @@ export const ErrorMessage = ({ children, messages, illustration, illustrationEle
         <SafeLink to="/">{messages.goToFrontPage}</SafeLink>
       </div>
     )}
+    {messages.logInFailed && (
+      <div css={{ marginTop: spacing.xsmall }}>
+        <SafeLink to="/minndla">{messages.logInFailed}</SafeLink>
+      </div>
+    )}
     {children}
   </StyledErrorMessage>
 );

package/src/Frontpage/FrontpageHeader.tsx

@@ -2,7 +2,6 @@ import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { colors, spacing, spacingUnit, mq, breakpoints } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
-import { WithTranslation, withTranslation } from 'react-i18next';
 import FrontpageHeaderIllustration from './illustrations/FrontpageHeaderIllustration';
 import SvgLogo from '../Logo/SvgLogo';
 
@@ -48,16 +47,16 @@ const HeaderIllustrationWrapper = styled.div`
   }
 `;
 
-export type FrontPageHeaderProps = {
+interface FrontPageHeaderProps {
   locale: string;
   showHeader: boolean;
   children?: ReactNode;
-};
+}
 
-const FrontpageHeader = ({ locale, showHeader = true, children, t }: FrontPageHeaderProps & WithTranslation) => (
+const FrontpageHeader = ({ locale, showHeader = true, children }: FrontPageHeaderProps) => (
   <StyledHeaderWrapper>
     <StyledHeader>
-      <StyledLogo to="/" aria-label={t('logo.altText')}>
+      <StyledLogo to="/" aria-hidden="true">
         <SvgLogo locale={locale} />
       </StyledLogo>
       {showHeader && (
@@ -70,4 +69,4 @@ const FrontpageHeader = ({ locale, showHeader = true, children, t }: FrontPageHe
   </StyledHeaderWrapper>
 );
 
-export default withTranslation()(FrontpageHeader);
+export default FrontpageHeader;

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/LearningPaths/LearningPathInformation.tsx

@@ -66,18 +66,19 @@ interface Props {
   description?: string;
   title: string;
   invertedStyle?: boolean;
+  id?: string;
   license?: {
     license: string;
   };
 }
 
-export const LearningPathInformation = ({ description, title, license, invertedStyle }: Props) => {
+export const LearningPathInformation = ({ description, title, license, invertedStyle, id }: Props) => {
   const { rights } = getLicenseByAbbreviation(license?.license || '', 'nb');
   return (
     <section className="o-wrapper">
       <StyledWrapper invertedStyle={invertedStyle} className="c-article">
         <LicenseWrapper>
-          <StyledHeader>{title}</StyledHeader>
+          <StyledHeader id={id}>{title}</StyledHeader>
           <LicenseByline licenseRights={rights} color={colors.brand.tertiary} />
         </LicenseWrapper>
         {description && <div dangerouslySetInnerHTML={{ __html: description }} />}

package/src/Subject/SubjectHeader.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
-import { breakpoints } from '@ndla/util';
-import { colors, fonts, mq, spacing, spacingUnit } from '@ndla/core';
+import { colors, fonts, mq, spacing, spacingUnit, breakpoints } from '@ndla/core';
 import OneColumn from '../Layout/OneColumn';
 
 type Types = 'mobile' | 'tablet' | 'desktop' | 'wide';

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