@ndla/ui 30.0.9 → 30.2.0

package/src/Resource/resourceComponents.tsx

@@ -7,7 +7,7 @@
  */
 
 import styled from '@emotion/styled';
-import { colors, fonts, misc, spacing } from '@ndla/core';
+import { colors, fonts, spacing } from '@ndla/core';
 import React, { MouseEvent, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MenuButton } from '@ndla/button';
@@ -38,7 +38,7 @@ export const ResourceTitle = styled.h2`
   line-clamp: 1;
   -webkit-box-orient: vertical;
   grid-area: resourceTitle;
-  ${fonts.sizes('18px', '18px')};
+  ${fonts.sizes('16px', '20px')};
 `;
 
 const StyledTagList = styled.ul`
@@ -48,6 +48,10 @@ const StyledTagList = styled.ul`
   padding: 2px;
   gap: ${spacing.xsmall};
   overflow: hidden;
+  padding-right: 14px;
+  :only-child {
+    margin-right: ${spacing.small};
+  }
 `;
 
 const StyledTagListElement = styled.li`
@@ -60,6 +64,8 @@ const StyledSafeLink = styled(SafeLink)`
   align-items: center;
   box-shadow: none;
   color: ${colors.brand.grey};
+  min-height: 44px;
+  min-width: 44px;
   &:hover {
     color: ${colors.brand.primary};
   }
@@ -94,12 +100,9 @@ export const Row = styled.div`
 `;
 
 const TagCounterWrapper = styled.span`
-  color: ${colors.brand.secondary};
-  box-shadow: none;
-  margin: 0;
+  display: flex;
   font-weight: ${fonts.weight.semibold};
   ${fonts.sizes('14px', '14px')};
-  padding: 5px;
 `;
 
 export interface ContentIconProps {
@@ -149,15 +152,6 @@ 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();
@@ -175,12 +169,13 @@ export const CompressedTagList = ({ tags, tagLinkPrefix }: CompressedTagListProp
     <>
       <TagList tagLinkPrefix={tagLinkPrefix} tags={visibleTags} />
       {remainingTags.length > 0 && (
-        <TagMenuButton
-          hideMenuIcon={true}
+        <MenuButton
+          size="small"
+          menuIcon={<TagCounterWrapper>{`+${remainingTags.length}`}</TagCounterWrapper>}
           menuItems={remainingTags}
-          aria-label={t('myNdla.moreTags', { count: remainingTags.length })}>
-          <TagCounterWrapper>{`+${remainingTags.length}`}</TagCounterWrapper>
-        </TagMenuButton>
+          alignRight
+          aria-label={t('myNdla.moreTags', { count: remainingTags.length })}
+        />
       )}
     </>
   );

package/src/TreeStructure/ComboboxButton.tsx

@@ -60,6 +60,7 @@ interface Props {
   onOpenFolder: (id: string) => void;
   onCloseFolder: (id: string) => void;
   setFocusedFolder: (folder: FolderType) => void;
+  ariaDescribedby?: string;
 }
 
 const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
@@ -76,6 +77,7 @@ const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
       setFocusedFolder,
       onOpenFolder,
       onCloseFolder,
+      ariaDescribedby,
     },
     ref,
   ) => {
@@ -124,6 +126,7 @@ const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
           aria-expanded={showTree}
           aria-labelledby={label ? treestructureId(type, 'label') : undefined}
           aria-activedescendant={focusedFolder ? treestructureId(type, focusedFolder.id) : undefined}
+          aria-describedby={ariaDescribedby}
           variant="ghost"
           colorTheme="light"
           fontWeight="normal"

package/src/TreeStructure/TreeStructure.tsx

@@ -74,6 +74,7 @@ export interface TreeStructureProps extends CommonTreeStructureProps {
   maxLevel?: number;
   newFolderInput?: NewFolderInputFunc;
   onSelectFolder?: (id: string) => void;
+  ariaDescribedby?: string;
 }
 
 const TreeStructure = ({
@@ -86,6 +87,7 @@ const TreeStructure = ({
   targetResource,
   type,
   newFolderInput,
+  ariaDescribedby,
 }: TreeStructureProps) => {
   const ref = useRef<HTMLButtonElement>(null);
 
@@ -209,6 +211,7 @@ const TreeStructure = ({
             flattenedFolders={flattenedFolders}
             onCloseFolder={onCloseFolder}
             onOpenFolder={onOpenFolder}
+            ariaDescribedby={ariaDescribedby}
           />
         )}
         {showTree && (