@ndla/ui 26.0.0 → 27.0.0

package/src/Resource/BlockResource.tsx

@@ -7,15 +7,23 @@
  */
 
 import styled from '@emotion/styled';
-import React from 'react';
-import SafeLink from '@ndla/safelink';
+import React, { useRef } from 'react';
 import { colors, fonts, spacing } from '@ndla/core';
 import { MenuButton, MenuItemProps } from '@ndla/button';
 import Image from '../Image';
-import { CompressedTagList, ResourceImageProps, ResourceTitle, Row, TopicList } from './resourceComponents';
+import {
+  CompressedTagList,
+  ResourceImageProps,
+  ResourceTitle,
+  Row,
+  TopicList,
+  ResourceTitleLink,
+  LoaderProps,
+} from './resourceComponents';
 import ContentLoader from '../ContentLoader';
 
 interface BlockResourceProps {
+  id: string;
   link: string;
   tagLinkPrefix?: string;
   title: string;
@@ -27,7 +35,7 @@ interface BlockResourceProps {
   isLoading?: boolean;
 }
 
-const BlockElementWrapper = styled(SafeLink)`
+const BlockElementWrapper = styled.div`
   display: flex;
   text-decoration: none;
   box-shadow: none;
@@ -37,6 +45,16 @@ const BlockElementWrapper = styled(SafeLink)`
   border: 1px solid ${colors.brand.light};
   border-radius: 2px;
   color: ${colors.brand.greyDark};
+  cursor: pointer;
+
+  &:hover {
+    box-shadow: 1px 1px 6px 2px rgba(9, 55, 101, 0.08);
+    transition-duration: 0.2s;
+    ${() => ResourceTitleLink} {
+      color: ${colors.brand.primary};
+      text-decoration: underline;
+    }
+  }
 `;
 
 const BlockDescription = styled.p`
@@ -48,7 +66,8 @@ const BlockDescription = styled.p`
   overflow: hidden;
   text-overflow: ellipsis;
   transition: height 0.2s ease-out;
-  ${() => BlockElementWrapper}:hover &, ${() => BlockElementWrapper}:focus & {
+  ${() => BlockElementWrapper}:hover &, ${() => BlockElementWrapper}:focus & ,  ${() =>
+    BlockElementWrapper}:focus-within & {
     // Unfortunate css needed for multi-line text overflow ellipsis.
     height: 3.1em;
     -webkit-line-clamp: 2;
@@ -59,6 +78,7 @@ const BlockDescription = styled.p`
 
 const RightRow = styled(Row)`
   justify-content: flex-end;
+  margin-bottom: -${spacing.xxsmall};
 `;
 
 const BlockInfoWrapper = styled.div`
@@ -97,28 +117,7 @@ const BlockImage = ({ image, loading }: BlockImageProps) => {
   return <Image alt={image.alt} src={image.src} fallbackWidth={300} />;
 };
 
-interface BlockTitleProps {
-  title: string;
-  loading?: boolean;
-}
-
-const BlockTitle = ({ title, loading }: BlockTitleProps) => {
-  if (loading) {
-    return (
-      <ContentLoader height={'18px'} width={'100%'} viewBox={null} preserveAspectRatio="none">
-        <rect x="0" y="0" rx="3" ry="3" width="100%" height="18px" />
-      </ContentLoader>
-    );
-  }
-  return <ResourceTitle>{title}</ResourceTitle>;
-};
-
-interface BlockTopicListProps {
-  topics: string[];
-  loading?: boolean;
-}
-
-const BlockTopicList = ({ topics, loading }: BlockTopicListProps) => {
+const TopicAndTitleLoader = ({ children, loading }: LoaderProps) => {
   if (loading) {
     return (
       <ContentLoader height={'18px'} width={'100%'} viewBox={null} preserveAspectRatio="none">
@@ -128,10 +127,11 @@ const BlockTopicList = ({ topics, loading }: BlockTopicListProps) => {
     );
   }
 
-  return <TopicList topics={topics} />;
+  return <>{children}</>;
 };
 
 const BlockResource = ({
+  id,
   link,
   tagLinkPrefix,
   title,
@@ -142,16 +142,26 @@ const BlockResource = ({
   menuItems,
   isLoading,
 }: BlockResourceProps) => {
+  const linkRef = useRef<HTMLAnchorElement>(null);
+
+  const handleClick = () => {
+    if (linkRef.current) {
+      linkRef.current.click();
+    }
+  };
+
   return (
-    <BlockElementWrapper to={link}>
+    <BlockElementWrapper onClick={handleClick} id={id}>
       <ImageWrapper>
         <BlockImage image={resourceImage} loading={isLoading} />
       </ImageWrapper>
       <BlockInfoWrapper>
-        <div>
-          <BlockTitle title={title} loading={isLoading} />
-        </div>
-        <BlockTopicList topics={topics} loading={isLoading} />
+        <TopicAndTitleLoader loading={isLoading}>
+          <ResourceTitleLink title={title} to={link} ref={linkRef}>
+            <ResourceTitle>{title}</ResourceTitle>
+          </ResourceTitleLink>
+        </TopicAndTitleLoader>
+        <TopicList topics={topics} />
         <BlockDescription>{description}</BlockDescription>
         <RightRow>
           {tags && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}

package/src/Resource/ListResource.tsx

@@ -7,12 +7,18 @@
  */
 
 import styled from '@emotion/styled';
-import React from 'react';
-import SafeLink from '@ndla/safelink';
+import React, { useRef } from 'react';
 import { fonts, spacing, colors, breakpoints, mq } from '@ndla/core';
 import { MenuButton, MenuItemProps } from '@ndla/button';
 import Image from '../Image';
-import { CompressedTagList, ResourceImageProps, ResourceTitle, TopicList } from './resourceComponents';
+import {
+  CompressedTagList,
+  ResourceImageProps,
+  ResourceTitle,
+  ResourceTitleLink,
+  TopicList,
+  LoaderProps,
+} from './resourceComponents';
 import ContentLoader from '../ContentLoader';
 
 const StyledResourceDescription = styled.p`
@@ -31,7 +37,7 @@ const StyledResourceDescription = styled.p`
   -webkit-box-orient: vertical;
 `;
 
-const ResourceWrapper = styled(SafeLink)`
+const ResourceWrapper = styled.div`
   flex: 1;
   display: grid;
   grid-template-columns: auto 1fr auto;
@@ -47,38 +53,38 @@ const ResourceWrapper = styled(SafeLink)`
       'tags                 tags';
   }
 
-  text-decoration: none;
-  box-shadow: none;
+  cursor: pointer;
   padding: ${spacing.small};
   border: 1px solid ${colors.brand.neutral7};
   border-radius: 2px;
-  color: ${colors.brand.greyDark};
   gap: 0 ${spacing.small};
 
   &:hover {
     box-shadow: 1px 1px 6px 2px rgba(9, 55, 101, 0.08);
     transition-duration: 0.2s;
-    ${ResourceTitle} {
+    ${() => ResourceTitleLink} {
       color: ${colors.brand.primary};
       text-decoration: underline;
     }
-    a {
-      display: flex;
-      align-items: center;
-    }
   }
 `;
 
 const TagsandActionMenu = styled.div`
+  box-sizing: content-box;
+  padding: 2px;
   grid-area: tags;
   display: flex;
   align-items: center;
   width: 100%;
   overflow: hidden;
-  gap: ${spacing.small};
   align-self: flex-start;
   justify-self: flex-end;
   justify-content: flex-end;
+
+  ${mq.range({ from: breakpoints.mobileWide })} {
+    margin-top: -${spacing.xsmall};
+    margin-right: -${spacing.xxsmall};
+  }
 `;
 
 const StyledImageWrapper = styled.div<StyledImageProps>`
@@ -100,7 +106,7 @@ const StyledImage = styled(Image)`
 
 const TopicAndTitleWrapper = styled.div`
   grid-area: topicAndTitle;
-  margin-top: ${spacing.xxsmall};
+  margin-top: 2px;
 `;
 
 interface StyledImageProps {
@@ -108,6 +114,7 @@ interface StyledImageProps {
 }
 
 export interface ListResourceProps {
+  id: string;
   link: string;
   tagLinkPrefix?: string;
   title: string;
@@ -145,13 +152,7 @@ const ListResourceImage = ({ resourceImage, loading, type }: ListResourceImagePr
   );
 };
 
-interface TopicAndTitleProps {
-  title: string;
-  topics: string[];
-  loading?: boolean;
-}
-
-const TopicAndTitle = ({ title, topics, loading }: TopicAndTitleProps) => {
+const TopicAndTitleLoader = ({ loading, children }: LoaderProps) => {
   if (loading) {
     return (
       <ContentLoader height={'40px'} width={'100%'} viewBox={null} preserveAspectRatio="none">
@@ -161,12 +162,7 @@ const TopicAndTitle = ({ title, topics, loading }: TopicAndTitleProps) => {
       </ContentLoader>
     );
   }
-  return (
-    <>
-      <ResourceTitle>{title}</ResourceTitle>
-      <TopicList topics={topics} />
-    </>
-  );
+  return <>{children}</>;
 };
 
 interface ResourceDescriptionProps {
@@ -186,6 +182,7 @@ const ResourceDescription = ({ description, loading }: ResourceDescriptionProps)
 };
 
 const ListResource = ({
+  id,
   link,
   tagLinkPrefix,
   title,
@@ -198,14 +195,25 @@ const ListResource = ({
 }: ListResourceProps) => {
   const showDescription = description !== undefined;
   const imageType = showDescription ? 'normal' : 'compact';
+  const linkRef = useRef<HTMLAnchorElement>(null);
+  const handleClick = () => {
+    if (linkRef.current) {
+      linkRef.current.click();
+    }
+  };
 
   return (
-    <ResourceWrapper to={link}>
+    <ResourceWrapper onClick={handleClick} id={id}>
       <StyledImageWrapper imageSize={imageType}>
         <ListResourceImage resourceImage={resourceImage} loading={isLoading} type={imageType} />
       </StyledImageWrapper>
       <TopicAndTitleWrapper>
-        <TopicAndTitle topics={topics} title={title} loading={isLoading} />
+        <TopicAndTitleLoader loading={isLoading}>
+          <ResourceTitleLink to={link} ref={linkRef}>
+            <ResourceTitle>{title}</ResourceTitle>
+          </ResourceTitleLink>
+          <TopicList topics={topics} />
+        </TopicAndTitleLoader>
       </TopicAndTitleWrapper>
       {showDescription && <ResourceDescription description={description} loading={isLoading} />}
       <TagsandActionMenu>

package/src/Resource/resourceComponents.tsx

@@ -7,19 +7,25 @@
  */
 
 import styled from '@emotion/styled';
-import { colors, fonts, spacing } from '@ndla/core';
-import React, { MouseEvent } from 'react';
-
+import { colors, fonts, misc, spacing } from '@ndla/core';
+import React, { MouseEvent, ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
 import { MenuButton } from '@ndla/button';
 import SafeLink from '@ndla/safelink';
 import { useNavigate } from 'react-router-dom';
+import { HashTag } from '@ndla/icons/common';
 
 export interface ResourceImageProps {
   alt: string;
   src: string;
 }
 
-export const ResourceTitle = styled.h3`
+export const ResourceTitleLink = styled(SafeLink)`
+  box-shadow: none;
+  color: ${colors.brand.primary};
+`;
+
+export const ResourceTitle = styled.h2`
   min-width: 50px;
   margin: 0;
   flex: 1;
@@ -32,13 +38,14 @@ export const ResourceTitle = styled.h3`
   line-clamp: 1;
   -webkit-box-orient: vertical;
   grid-area: resourceTitle;
+  ${fonts.sizes('18px', '18px')};
 `;
 
 const StyledTagList = styled.ul`
   list-style: none;
   display: flex;
   margin: 0;
-  padding: 0;
+  padding: 2px;
   gap: ${spacing.xsmall};
   overflow: hidden;
 `;
@@ -49,11 +56,10 @@ const StyledTagListElement = styled.li`
 `;
 
 const StyledSafeLink = styled(SafeLink)`
+  display: flex;
+  align-items: center;
   box-shadow: none;
   color: ${colors.brand.grey};
-  ::before {
-    content: '#';
-  }
   &:hover {
     color: ${colors.brand.primary};
   }
@@ -68,16 +74,18 @@ const StyledTopicList = styled.ul`
   grid-area: topicList;
 `;
 
+const StyledTopicDivider = styled.span`
+  margin: 0;
+  padding: 0 ${spacing.xxsmall};
+`;
+
 const StyledTopicListElement = styled.li`
   ${fonts.sizes(12)};
   margin: 0;
   line-height: 1.5;
   padding: 0;
-`;
-
-const StyledTopicDivider = styled.span`
-  margin: 0;
-  padding: 0 ${spacing.xxsmall};
+  display: flex;
+  align-items: center;
 `;
 
 export const Row = styled.div`
@@ -86,27 +94,36 @@ export const Row = styled.div`
   gap: ${spacing.xsmall};
 `;
 
-const TagCounterWrapper = styled.p`
-  color: ${colors.brand.primary};
+const TagCounterWrapper = styled.span`
+  color: ${colors.brand.secondary};
   box-shadow: none;
   margin: 0;
   font-weight: ${fonts.weight.semibold};
-  ${fonts.sizes(16)}
+  ${fonts.sizes('14px', '14px')};
+  padding: 5px;
 `;
 
 interface TagListProps {
   tags?: string[];
   tagLinkPrefix?: string;
 }
+
+export interface LoaderProps {
+  loading?: boolean;
+  children?: ReactNode;
+}
+
 export const TagList = ({ tags, tagLinkPrefix }: TagListProps) => {
+  const { t } = useTranslation();
   if (!tags) return null;
   return (
-    <StyledTagList>
+    <StyledTagList aria-label={t('myNdla.tagList')}>
       {tags.map((tag, i) => (
         <StyledTagListElement key={`tag-${i}`}>
           <StyledSafeLink
             onClick={(e: MouseEvent<HTMLAnchorElement | HTMLElement>) => e.stopPropagation()}
             to={`${tagLinkPrefix ? tagLinkPrefix : ''}/${tag}`}>
+            <HashTag />
             {tag}
           </StyledSafeLink>
         </StyledTagListElement>
@@ -120,25 +137,39 @@ interface CompressedTagListProps {
   tagLinkPrefix?: string;
 }
 
+const TagMenuButton = styled(MenuButton)`
+  &:hover,
+  &:active,
+  &:focus {
+    transition: ${misc.transition.default};
+    border-radius: 100%;
+    background-color: ${colors.brand.light};
+  }
+`;
+
 export const CompressedTagList = ({ tags, tagLinkPrefix }: CompressedTagListProps) => {
   const navigate = useNavigate();
+  const { t } = useTranslation();
   const visibleTags = tags.slice(0, 3);
   const remainingTags = tags.slice(3, tags.length).map((tag) => {
     return {
-      text: '#' + tag,
+      icon: <HashTag />,
+      text: tag,
       onClick: () => {
         navigate(`${tagLinkPrefix ? tagLinkPrefix : ''}/${tag}`);
       },
     };
   });
-
   return (
     <>
       <TagList tagLinkPrefix={tagLinkPrefix} tags={visibleTags} />
       {remainingTags.length > 0 && (
-        <MenuButton hideMenuIcon={true} menuItems={remainingTags}>
+        <TagMenuButton
+          hideMenuIcon={true}
+          menuItems={remainingTags}
+          aria-label={t('myNdla.moreTags', { count: remainingTags.length })}>
           <TagCounterWrapper>{`+${remainingTags.length}`}</TagCounterWrapper>
-        </MenuButton>
+        </TagMenuButton>
       )}
     </>
   );
@@ -149,14 +180,17 @@ interface TopicListProps {
 }
 
 export const TopicList = ({ topics }: TopicListProps) => {
+  const { t } = useTranslation();
   if (!topics) return null;
   return (
-    <StyledTopicList>
+    <StyledTopicList aria-label={t('navigation.topics')}>
       {topics.map((topic, i) => (
-        <StyledTopicListElement key={topic}>
-          {topic}
-          {i !== topics.length - 1 && <StyledTopicDivider>•</StyledTopicDivider>}
-        </StyledTopicListElement>
+        <>
+          <StyledTopicListElement key={topic}>
+            {topic}
+            {i !== topics.length - 1 && <StyledTopicDivider aria-hidden="true">•</StyledTopicDivider>}
+          </StyledTopicListElement>
+        </>
       ))}
     </StyledTopicList>
   );

package/src/TreeStructure/ComboboxButton.tsx

@@ -0,0 +1,189 @@
+/**
+ * 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 React, { KeyboardEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { useForwardedRef } from '@ndla/util';
+import Tooltip from '@ndla/tooltip';
+import { colors, spacing } from '@ndla/core';
+import { IFolder } from '@ndla/types-learningpath-api';
+import { Plus } from '@ndla/icons/action';
+import { ChevronUp, ChevronDown } from '@ndla/icons/common';
+import { forwardRef } from 'react';
+import { ButtonV2 as Button, IconButtonV2 as IconButton } from '@ndla/button';
+import { treestructureId } from './helperFunctions';
+import { FolderType, TreeStructureType } from './types';
+import { arrowNavigation } from './arrowNavigation';
+
+interface StyledRowProps {
+  isOpen: boolean;
+}
+
+const StyledRow = styled.div<StyledRowProps>`
+  display: flex;
+  justify-content: space-between;
+  padding: ${spacing.xxsmall};
+  border-bottom: ${({ isOpen }) => isOpen && `1px solid ${colors.brand.tertiary}`};
+`;
+const StyledSelectedFolder = styled(Button)`
+  flex: 1;
+  justify-content: flex-start;
+  color: ${colors.black};
+  :hover,
+  :focus {
+    background: none;
+    box-shadow: none;
+    border-color: transparent;
+  }
+  :focus-visible {
+    outline: none;
+  }
+`;
+
+const StyledAddFolderButton = styled(Button)`
+  &,
+  &:disabled {
+    border-color: transparent;
+  }
+`;
+
+const StyledPlus = styled(Plus)`
+  height: 24px;
+  width: 24px;
+`;
+
+interface Props {
+  showTree: boolean;
+  type: TreeStructureType;
+  label?: string;
+  focusedFolder?: FolderType;
+  selectedFolder?: FolderType;
+  setSelectedFolder: (folder?: FolderType) => void;
+  onToggleTree: (open: boolean) => void;
+  flattenedFolders: FolderType[];
+  onOpenFolder: (id: string) => void;
+  onCloseFolder: (id: string) => void;
+  setFocusedFolder: (folder?: FolderType) => void;
+  onNewFolder?: (name: string, parentId: string) => Promise<IFolder>;
+  maxLevel: number;
+  setNewFolderParentId: (id?: string) => void;
+}
+
+const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
+  (
+    {
+      showTree,
+      type,
+      label,
+      focusedFolder,
+      selectedFolder,
+      setSelectedFolder,
+      onToggleTree,
+      flattenedFolders,
+      setFocusedFolder,
+      onOpenFolder,
+      onCloseFolder,
+      onNewFolder,
+      maxLevel,
+      setNewFolderParentId,
+    },
+    ref,
+  ) => {
+    const { t } = useTranslation();
+    const innerRef = useForwardedRef(ref);
+
+    const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
+      if (e.key === 'Enter') {
+        if (showTree) {
+          setSelectedFolder(focusedFolder);
+        }
+        return;
+      }
+      if (e.key === 'Escape') {
+        onToggleTree(false);
+        return;
+      }
+      if (['ArrowUp', 'ArrowDown'].includes(e.key) && !showTree) {
+        onToggleTree(true);
+        return;
+      }
+      if (focusedFolder) {
+        arrowNavigation(e, focusedFolder.id, flattenedFolders, setFocusedFolder, onOpenFolder, onCloseFolder);
+      }
+    };
+
+    const canAddFolder = selectedFolder && selectedFolder?.breadcrumbs.length < (maxLevel || 1);
+    return (
+      <StyledRow isOpen={showTree}>
+        <StyledSelectedFolder
+          ref={innerRef}
+          tabIndex={0}
+          id={treestructureId(type, 'combobox')}
+          role="combobox"
+          aria-controls={treestructureId(type, 'popup')}
+          aria-haspopup="tree"
+          aria-expanded={showTree}
+          aria-labelledby={label ? treestructureId(type, 'label') : undefined}
+          aria-activedescendant={focusedFolder ? treestructureId(type, focusedFolder.id) : undefined}
+          variant="ghost"
+          colorTheme="light"
+          fontWeight="normal"
+          shape="sharp"
+          onKeyDown={onKeyDown}
+          onClick={() => {
+            onToggleTree(!showTree);
+          }}>
+          {selectedFolder?.name}
+        </StyledSelectedFolder>
+        {onNewFolder && showTree && (
+          <Tooltip
+            tooltip={
+              canAddFolder
+                ? t('myNdla.newFolderUnder', {
+                    folderName: selectedFolder?.name,
+                  })
+                : t('treeStructure.maxFoldersAlreadyAdded')
+            }>
+            <StyledAddFolderButton
+              variant="outline"
+              shape="pill"
+              disabled={!canAddFolder}
+              aria-label={
+                canAddFolder
+                  ? t('myNdla.newFolderUnder', {
+                      folderName: selectedFolder?.name,
+                    })
+                  : t('treeStructure.maxFoldersAlreadyAdded')
+              }
+              onClick={() => setNewFolderParentId(focusedFolder?.id)}>
+              <StyledPlus /> {t('myNdla.newFolder')}
+            </StyledAddFolderButton>
+          </Tooltip>
+        )}
+        <IconButton
+          aria-hidden
+          aria-label=""
+          tabIndex={-1}
+          variant="ghost"
+          colorTheme="greyLighter"
+          size="small"
+          onClick={() => {
+            if (!showTree) {
+              innerRef.current?.focus();
+            }
+            onToggleTree(!showTree);
+          }}>
+          {showTree ? <ChevronUp /> : <ChevronDown />}
+        </IconButton>
+      </StyledRow>
+    );
+  },
+);
+
+export default ComboboxButton;