@ndla/ui 42.1.1 → 42.1.2

package/src/TreeStructure/FolderItem.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { KeyboardEvent, useEffect, useRef } from 'react';
+import React, { CSSProperties, KeyboardEvent, useEffect, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { ArrowDropDownRounded } from '@ndla/icons/common';
@@ -20,7 +20,7 @@ import { CommonFolderItemsProps } from './types';
 import { arrowNavigation } from './arrowNavigation';
 import { treestructureId } from './helperFunctions';
 
-const OpenButton = styled.span<{ isOpen: boolean }>`
+const OpenButton = styled.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -34,7 +34,12 @@ const OpenButton = styled.span<{ isOpen: boolean }>`
   svg {
     width: 24px;
     height: 24px;
-    transform: rotate(${({ isOpen }) => (isOpen ? '0' : '-90')}deg);
+    transform: rotate(-90deg);
+  }
+  &[data-open='true'] {
+    svg {
+      transform: rotate(0deg);
+    }
   }
 `;
 
@@ -59,55 +64,67 @@ const FolderIconWrapper = styled.div`
 
 const shouldForwardProp = (name: string) => !['selected', 'level', 'focused', 'isCreatingFolder'].includes(name);
 
-interface FolderNameProps {
-  selected?: boolean;
-  level: number;
-  isCreatingFolder?: boolean;
-  focused?: boolean;
-}
-
-const FolderName = styled(Button, { shouldForwardProp })<FolderNameProps>`
+const FolderName = styled(Button)`
   display: grid;
   grid-template-columns: auto 1fr auto;
-  padding-left: ${({ level }) => 0.75 * spacingUnit * level}px;
+  padding-left: calc(0.75 * ${spacing.normal} * var(--level));
   gap: ${spacing.xxsmall};
   border: none;
   outline: none;
-  background: ${({ selected, isCreatingFolder, focused }) =>
-    isCreatingFolder ? 'none' : selected ? colors.brand.lighter : focused && colors.brand.lightest};
-  color: ${({ isCreatingFolder, focused }) =>
-    isCreatingFolder && focused ? colors.brand.primary : colors.text.primary};
+  color: ${colors.text.primary};
   transition: ${animations.durations.superFast};
   word-break: break-word;
 
   &:hover {
     box-shadow: none;
     outline: none;
-    background: ${({ selected }) => (selected ? colors.brand.light : colors.brand.lightest)};
+    background: ${colors.brand.lightest};
     color: ${colors.text.primary};
   }
+
+  &[data-focused='true'] {
+    background: ${colors.brand.lightest};
+  }
+
+  &[data-selected='true'] {
+    background: ${colors.brand.lighter};
+    &:hover {
+      background: ${colors.brand.light};
+    }
+  }
+
+  &[data-creating='true'][data-focused='true'] {
+    color: ${colors.brand.primary};
+  }
+
+  &[data-creating='true'] {
+    background: none;
+  }
 `;
 
 const StyledDone = styled(Done)`
   color: ${colors.support.green};
 `;
 
-const FolderNameLink = styled(SafeLink, { shouldForwardProp })<FolderNameProps>`
+const FolderNameLink = styled(SafeLink, { shouldForwardProp })`
   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;
+  padding-left: calc(0.75 * ${spacing.normal} * var(--level));
   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};
+  color: ${colors.text.primary};
   font-size: ${fonts.sizes('16px')};
   transition: ${animations.durations.superFast};
   word-break: break-word;
+  &[data-selected='true'] {
+    color: ${colors.brand.primary};
+    font-weight: ${fonts.weight.semibold};
+  }
   &:hover,
   &:focus {
     color: ${colors.brand.primary};
@@ -145,6 +162,8 @@ const FolderItem = ({
   const ref = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
   const selected = selectedFolder ? selectedFolder.id === id : false;
 
+  const levelVariable = useMemo(() => ({ '--level': level } as unknown as CSSProperties), [level]);
+
   const focused = focusedFolder?.id === id;
 
   const handleClickFolder = () => {
@@ -195,7 +214,7 @@ const FolderItem = ({
       aria-current={selected ? 'page' : undefined}
       aria-describedby={containsResource ? `alreadyAdded-${folder.id}` : undefined}
       ref={ref}
-      level={level}
+      style={levelVariable}
       onKeyDown={(e: KeyboardEvent<HTMLElement>) => {
         if (e.key === 'Enter') {
           setSelectedFolder(folder);
@@ -205,7 +224,7 @@ const FolderItem = ({
       }}
       to={loading ? '' : linkPath}
       tabIndex={tabable ? 0 : -1}
-      selected={selected}
+      data-selected={selected}
       onFocus={() => setFocusedFolder(folder)}
       onClick={handleClickFolder}
     >
@@ -213,7 +232,7 @@ const FolderItem = ({
         <OpenButton
           aria-hidden
           tabIndex={-1}
-          isOpen={isOpen}
+          data-open={isOpen}
           onClick={(e) => {
             e.stopPropagation();
             e.preventDefault();
@@ -237,7 +256,7 @@ const FolderItem = ({
       id={treestructureId(type, folder.id)}
       aria-expanded={isMaxDepth || emptyFolder ? undefined : isOpen}
       aria-selected={selected}
-      focused={focusedFolder?.id === folder.id}
+      data-focused={focusedFolder?.id === folder.id}
       aria-describedby={containsResource ? `alreadyAdded-${folder.id}` : undefined}
       aria-label={`${name}${folder.status === 'shared' ? `, ${t('myNdla.folder.sharing.shared')}` : ''}`}
       variant="ghost"
@@ -245,21 +264,19 @@ const FolderItem = ({
       fontWeight="normal"
       colorTheme="light"
       ref={ref}
-      level={level}
-      selected={selected}
+      style={levelVariable}
+      data-selected={selected}
       disabled={loading}
-      onFocus={(e) => {
-        setFocusedFolder(focusedFolder || folder);
-      }}
+      onFocus={() => setFocusedFolder(focusedFolder || folder)}
       onClick={handleClickFolder}
-      isCreatingFolder={isCreatingFolder}
+      data-creating={isCreatingFolder}
     >
       <IconWrapper>
         {!hideArrow && (
           <OpenButton
             aria-hidden
             tabIndex={-1}
-            isOpen={isOpen}
+            data-open={isOpen}
             onClick={(e) => {
               e.stopPropagation();
               setFocusedFolder(folder);

package/src/TreeStructure/FolderItems.tsx

@@ -11,7 +11,7 @@ import styled from '@emotion/styled';
 import { animations } from '@ndla/core';
 import { IFolder } from '@ndla/types-backend/learningpath-api';
 import FolderItem from './FolderItem';
-import { CommonFolderItemsProps, NewFolderInputFunc, OnCreatedFunc, TreeStructureType } from './types';
+import { CommonFolderItemsProps, NewFolderInputFunc, OnCreatedFunc } from './types';
 import { treestructureId } from './helperFunctions';
 
 const StyledUL = styled.ul`
@@ -25,16 +25,14 @@ const StyledUL = styled.ul`
   padding: 0;
 `;
 
-interface StyledLiProps {
-  type?: TreeStructureType;
-}
-
-const StyledLI = styled.li<StyledLiProps>`
+const StyledLI = styled.li`
   display: flex;
   flex-direction: column;
-  align-items: ${({ type }) => type === 'navigation' && 'flex-start'};
   margin: 0;
   padding: 0;
+  &[data-type='navigation'] {
+    align-items: flex-start;
+  }
 `;
 
 export interface FolderItemsProps extends CommonFolderItemsProps {
@@ -80,7 +78,7 @@ const FolderItems = ({
       const isOpen = openFolders?.includes(id);
 
       return (
-        <StyledLI key={id} tabIndex={-1} role="none" type={type}>
+        <StyledLI key={id} tabIndex={-1} role="none" data-type={type}>
           <FolderItem
             index={index}
             folder={folder}

package/src/TreeStructure/TreeStructure.tsx

@@ -9,12 +9,11 @@
 import React, { useEffect, useState, useMemo, useRef } from 'react';
 import styled from '@emotion/styled';
 import { colors, fonts, misc, utils } from '@ndla/core';
-import { css } from '@emotion/react';
 import uniq from 'lodash/uniq';
 import { IFolder } from '@ndla/types-backend/learningpath-api';
 import FolderItems from './FolderItems';
 import { flattenFolders, treestructureId } from './helperFunctions';
-import { CommonTreeStructureProps, NewFolderInputFunc, TreeStructureType } from './types';
+import { CommonTreeStructureProps, NewFolderInputFunc } from './types';
 import ComboboxButton from './ComboboxButton';
 import AddFolderButton from './AddFolderButton';
 
@@ -36,35 +35,27 @@ const Row = styled.div`
   justify-content: space-between;
 `;
 
-const TreeStructureWrapper = styled.div<{ type: TreeStructureType }>`
+const TreeStructureWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  ${({ type }) =>
-    type === 'picker' &&
-    css`
-      overflow: hidden;
-      border: 1px solid ${colors.brand.neutral7};
-      border-radius: ${misc.borderRadius};
-      scroll-behavior: smooth;
-    `}
   transition: ${misc.transition.default};
+  &[data-type='picker'] {
+    overflow: hidden;
+    border: 1px solid ${colors.brand.neutral7};
+    border-radius: ${misc.borderRadius};
+    scroll-behavior: smooth;
+  }
   &:focus-within {
     border-color: ${colors.brand.tertiary};
   }
 `;
 
-interface ScrollableDivProps {
-  type: TreeStructureType;
-}
-
-const ScrollableDiv = styled.div<ScrollableDivProps>`
-  ${({ type }) =>
-    type === 'picker' &&
-    css`
-      overflow: auto;
-      overflow: overlay;
-      ${utils.scrollbar}
-    `}
+const ScrollableDiv = styled.div`
+  &[data-type='picker'] {
+    overflow: auto;
+    overflow: overlay;
+    ${utils.scrollbar}
+  }
 `;
 
 export interface TreeStructureProps extends CommonTreeStructureProps {
@@ -198,7 +189,7 @@ const TreeStructure = ({
           />
         )}
       </Row>
-      <TreeStructureWrapper aria-label={label} type={type}>
+      <TreeStructureWrapper aria-label={label} data-type={type}>
         {type === 'picker' && (
           <ComboboxButton
             ref={ref}
@@ -218,7 +209,7 @@ const TreeStructure = ({
           />
         )}
         {showTree && (
-          <ScrollableDiv type={type}>
+          <ScrollableDiv data-type={type}>
             <FolderItems
               focusedFolder={focusedFolder}
               folders={folders}