@ndla/ui 42.1.1 → 43.0.0

package/src/Resource/BlockResource.stories.tsx

@@ -28,7 +28,7 @@ export default {
     headingLevel: {
       control: false,
     },
-    menuItems: {
+    menu: {
       control: false,
     },
   },

package/src/Resource/BlockResource.tsx

@@ -7,23 +7,21 @@
  */
 
 import styled from '@emotion/styled';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { colors, fonts, spacing } from '@ndla/core';
-import { MenuItemProps } from '@ndla/button';
 import ContentTypeBadge from '../ContentTypeBadge';
 import Image from '../Image';
 import {
   CompressedTagList,
   ResourceImageProps,
-  ResourceTitle,
   ResourceTypeList,
   ResourceTitleLink,
   LoaderProps,
-  StyledContentIconWrapper,
+  ContentIconWrapper,
+  resourceHeadingStyle,
 } from './resourceComponents';
 import ContentLoader from '../ContentLoader';
 import { contentTypeMapping, resourceEmbedTypeMapping } from '../model/ContentType';
-import { SettingsMenu } from '../MyNdla';
 
 const BlockElementWrapper = styled.div`
   display: flex;
@@ -41,11 +39,23 @@ const BlockElementWrapper = styled.div`
   &:hover {
     box-shadow: 1px 1px 6px 2px rgba(9, 55, 101, 0.08);
     transition-duration: 0.2s;
-    ${() => ResourceTitleLink} {
+    [data-link] {
       color: ${colors.brand.primary};
       text-decoration: underline;
     }
   }
+
+  &:hover,
+  &:focus,
+  &:focus-within {
+    [data-description] {
+      /* Unfortunate css needed for multi-line text overflow ellipsis. */
+      height: 3.1em;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+  }
 `;
 
 const BlockDescription = styled.p`
@@ -57,14 +67,6 @@ const BlockDescription = styled.p`
   overflow: hidden;
   text-overflow: ellipsis;
   transition: height 0.2s ease-out;
-  ${() => BlockElementWrapper}:hover &, ${() => BlockElementWrapper}:focus & ,  ${() =>
-    BlockElementWrapper}:focus-within & {
-    // Unfortunate css needed for multi-line text overflow ellipsis.
-    height: 3.1em;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    -webkit-box-orient: vertical;
-  }
 `;
 
 const TagsAndActionMenu = styled.div`
@@ -114,9 +116,9 @@ const BlockImage = ({ image, loading, contentType }: BlockImageProps) => {
   }
   if (image.src === '') {
     return (
-      <StyledContentIconWrapper contentType={contentType}>
+      <ContentIconWrapper contentType={contentType}>
         <ContentTypeBadge type={contentType} size="large" />
-      </StyledContentIconWrapper>
+      </ContentIconWrapper>
     );
   } else {
     return <Image alt={image.alt} src={image.src} fallbackWidth={300} />;
@@ -145,7 +147,7 @@ interface Props {
   tags?: string[];
   description?: string;
   headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  menuItems?: MenuItemProps[];
+  menu?: ReactNode;
   isLoading?: boolean;
   targetBlank?: boolean;
   resourceTypes?: { id: string; name: string }[];
@@ -159,14 +161,13 @@ const BlockResource = ({
   tags,
   resourceImage,
   description,
-  menuItems,
+  menu,
   isLoading,
-  headingLevel = 'h2',
+  headingLevel: Heading = 'h2',
   targetBlank,
   resourceTypes,
 }: Props) => {
   const firstResourceType = resourceTypes?.[0]?.id ?? '';
-  const Title = ResourceTitle.withComponent(headingLevel);
 
   return (
     <BlockElementWrapper id={id}>
@@ -184,16 +185,16 @@ const BlockResource = ({
       <BlockInfoWrapper>
         <ContentWrapper>
           <ResourceTypeAndTitleLoader loading={isLoading}>
-            <ResourceTitleLink title={title} target={targetBlank ? '_blank' : undefined} to={link}>
-              <Title>{title}</Title>
+            <ResourceTitleLink data-link="" title={title} target={targetBlank ? '_blank' : undefined} to={link}>
+              <Heading css={resourceHeadingStyle}>{title}</Heading>
             </ResourceTitleLink>
           </ResourceTypeAndTitleLoader>
           <ResourceTypeList resourceTypes={resourceTypes} />
-          <BlockDescription>{description}</BlockDescription>
+          <BlockDescription data-description="">{description}</BlockDescription>
         </ContentWrapper>
         <TagsAndActionMenu>
           {tags && tags.length > 0 && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}
-          {menuItems && menuItems.length > 0 && <SettingsMenu menuItems={menuItems} />}
+          {menu}
         </TagsAndActionMenu>
       </BlockInfoWrapper>
     </BlockElementWrapper>

package/src/Resource/ListResource.tsx

@@ -7,23 +7,21 @@
  */
 
 import styled from '@emotion/styled';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { fonts, spacing, colors, breakpoints, mq } from '@ndla/core';
-import { MenuItemProps } from '@ndla/button';
 import Image from '../Image';
 import {
   CompressedTagList,
   ResourceImageProps,
-  ResourceTitle,
+  resourceHeadingStyle,
   ResourceTitleLink as StyledLink,
   ResourceTypeList,
-  StyledContentIconWrapper,
   LoaderProps,
+  ContentIconWrapper,
 } from './resourceComponents';
 import ContentLoader from '../ContentLoader';
 import ContentTypeBadge from '../ContentTypeBadge';
 import { contentTypeMapping, resourceEmbedTypeMapping } from '../model/ContentType';
-import { SettingsMenu } from '../MyNdla';
 
 const ListResourceWrapper = styled.div`
   flex: 1;
@@ -48,7 +46,7 @@ const ListResourceWrapper = styled.div`
   &:hover {
     box-shadow: 1px 1px 6px 2px rgba(9, 55, 101, 0.08);
     transition-duration: 0.2s;
-    ${() => StyledLink} {
+    [data-link] {
       color: ${colors.brand.primary};
       text-decoration: underline;
     }
@@ -61,11 +59,7 @@ interface StyledImageProps {
 
 const ImageWrapper = styled.div<StyledImageProps>`
   grid-area: image;
-  width: ${(p) => (p.imageSize === 'normal' ? '136px' : '56px')};
-  ${mq.range({ until: breakpoints.mobileWide })} {
-    width: 56px;
-    margin-bottom: 0;
-  }
+  width: 56px;
   overflow: hidden;
   border-radius: 2px;
   display: flex;
@@ -73,6 +67,13 @@ const ImageWrapper = styled.div<StyledImageProps>`
   align-items: center;
   justify-content: center;
   aspect-ratio: 4/3;
+  &[data-image-size='normal'] {
+    width: 136px;
+  }
+  ${mq.range({ until: breakpoints.mobileWide })} {
+    width: 56px;
+    margin-bottom: 0;
+  }
 `;
 
 const StyledImage = styled(Image)`
@@ -138,9 +139,9 @@ const ListResourceImage = ({ resourceImage, loading, type, contentType, backgrou
   if (!loading) {
     if (resourceImage.src === '') {
       return (
-        <StyledContentIconWrapper contentType={contentType}>
+        <ContentIconWrapper contentType={contentType}>
           <ContentTypeBadge type={contentType} background={background} size="x-small" />
-        </StyledContentIconWrapper>
+        </ContentIconWrapper>
       );
     } else {
       return (
@@ -201,7 +202,7 @@ export interface ListResourceProps {
   resourceTypes: { id: string; name: string }[];
   tags?: string[];
   description?: string;
-  menuItems?: MenuItemProps[];
+  menu?: ReactNode;
   isLoading?: boolean;
   targetBlank?: boolean;
 }
@@ -215,7 +216,7 @@ const ListResource = ({
   resourceImage,
   resourceTypes,
   description,
-  menuItems,
+  menu,
   isLoading = false,
   targetBlank,
 }: ListResourceProps) => {
@@ -237,8 +238,10 @@ const ListResource = ({
       </ImageWrapper>
       <TopicAndTitleWrapper>
         <TypeAndTitleLoader loading={isLoading}>
-          <StyledLink to={link} target={targetBlank ? '_blank' : undefined}>
-            <ResourceTitle title={title}>{title}</ResourceTitle>
+          <StyledLink to={link} data-link="" target={targetBlank ? '_blank' : undefined}>
+            <h1 css={resourceHeadingStyle} title={title}>
+              {title}
+            </h1>
           </StyledLink>
           <ResourceTypeList resourceTypes={resourceTypes} />
         </TypeAndTitleLoader>
@@ -246,7 +249,7 @@ const ListResource = ({
       {showDescription && <Description description={description} loading={isLoading} />}
       <TagsandActionMenu>
         {tags && tags.length > 0 && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}
-        {menuItems && menuItems.length > 0 && <SettingsMenu menuItems={menuItems} />}
+        {menu}
       </TagsandActionMenu>
     </ListResourceWrapper>
   );

package/src/Resource/Resource.stories.tsx

@@ -8,8 +8,37 @@
 
 import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
-import { defaultParameters } from '../../../../stories/defaults';
+import { DropdownMenu, DropdownContent, DropdownItem, DropdownTrigger } from '@ndla/dropdown-menu';
+import { ButtonV2, IconButtonV2 } from '@ndla/button';
+import { HorizontalMenu } from '@ndla/icons/contentType';
+import { Pencil } from '@ndla/icons/action';
+import { DeleteForever } from '@ndla/icons/editor';
 import ListResource from './ListResource';
+import { defaultParameters } from '../../../../stories/defaults';
+
+const StoryResourceMenu = () => (
+  <DropdownMenu>
+    <DropdownTrigger>
+      <IconButtonV2 aria-label="Show more" title="Show more" variant="ghost" colorTheme="light">
+        <HorizontalMenu />
+      </IconButtonV2>
+    </DropdownTrigger>
+    <DropdownContent>
+      <DropdownItem>
+        <ButtonV2 variant="ghost" colorTheme="light" shape="sharp" size="small" fontWeight="normal">
+          <Pencil />
+          Rediger
+        </ButtonV2>
+      </DropdownItem>
+      <DropdownItem>
+        <ButtonV2 variant="ghost" colorTheme="danger" shape="sharp" size="small" fontWeight="normal">
+          <DeleteForever />
+          Slett
+        </ButtonV2>
+      </DropdownItem>
+    </DropdownContent>
+  </DropdownMenu>
+);
 
 export default {
   title: 'Components/Resources/ListResource',
@@ -28,7 +57,7 @@ export default {
     headingLevel: {
       control: false,
     },
-    menuItems: {
+    menu: {
       control: false,
     },
   },
@@ -41,6 +70,7 @@ export default {
       alt: '',
     },
     resourceTypes: [{ id: 'urn:resourcetype:learningPath', name: 'Læringssti' }],
+    menu: <StoryResourceMenu />,
     tags: ['tag', 'tag', 'tag', 'tag'],
   },
 } as Meta<typeof ListResource>;

package/src/Resource/resourceComponents.tsx

@@ -8,12 +8,13 @@
 
 import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
-import React, { ReactNode } from 'react';
+import React, { CSSProperties, HTMLAttributes, ReactNode, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { MenuButton } from '@ndla/button';
-import SafeLink from '@ndla/safelink';
-import { useNavigate } from 'react-router-dom';
+import { IconButtonV2 } from '@ndla/button';
+import SafeLink, { SafeLinkButton } from '@ndla/safelink';
 import { HashTag } from '@ndla/icons/common';
+import { css } from '@emotion/react';
+import { DropdownMenu, DropdownContent, DropdownTrigger, DropdownItem } from '@ndla/dropdown-menu';
 import resourceTypeColor from '../utils/resourceTypeColor';
 import { resourceEmbedTypeMapping } from '../model/ContentType';
 
@@ -37,7 +38,11 @@ export const ResourceTitleLink = styled(SafeLink)`
   }
 `;
 
-export const ResourceTitle = styled.span`
+const StyledTrigger = styled(IconButtonV2)`
+  margin: 0px ${spacing.xsmall};
+`;
+
+export const resourceHeadingStyle = css`
   margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -113,19 +118,32 @@ const TagCounterWrapper = styled.span`
   ${fonts.sizes('14px', '14px')};
 `;
 
-export interface ContentIconProps {
+interface ContentIconProps extends HTMLAttributes<HTMLSpanElement> {
   contentType: string;
+  children?: ReactNode;
 }
 
-export const StyledContentIconWrapper = styled.span<ContentIconProps>`
+const StyledContentIconWrapper = styled.span`
   width: 100%;
   aspect-ratio: 4/3;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: ${({ contentType }) => resourceTypeColor(contentType)};
+  background-color: var(--content-background-color);
 `;
 
+export const ContentIconWrapper = ({ contentType, children, ...props }: ContentIconProps) => {
+  const contentIconWrapperVars = useMemo(
+    () => ({ '--content-background-color': resourceTypeColor(contentType) } as unknown as CSSProperties),
+    [contentType],
+  );
+  return (
+    <StyledContentIconWrapper {...props} style={contentIconWrapperVars}>
+      {children}
+    </StyledContentIconWrapper>
+  );
+};
+
 interface TagListProps {
   tags?: string[];
   tagLinkPrefix?: string;
@@ -159,29 +177,40 @@ interface CompressedTagListProps {
 }
 
 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 {
-      icon: <HashTag />,
-      text: tag,
-      onClick: () => {
-        navigate(`${tagLinkPrefix ? tagLinkPrefix : ''}/${encodeURIComponent(tag)}`);
-      },
-    };
-  });
+  const visibleTags = useMemo(() => tags.slice(0, 3), [tags]);
+  const remainingTags = useMemo(() => tags.slice(3, tags.length), [tags]);
+
   return (
     <>
       <TagList tagLinkPrefix={tagLinkPrefix} tags={visibleTags} />
       {remainingTags.length > 0 && (
-        <MenuButton
-          size="small"
-          menuIcon={<TagCounterWrapper>{`+${remainingTags.length}`}</TagCounterWrapper>}
-          menuItems={remainingTags}
-          align="end"
-          aria-label={t('myNdla.moreTags', { count: remainingTags.length })}
-        />
+        <DropdownMenu>
+          <DropdownTrigger>
+            <StyledTrigger
+              size="xsmall"
+              variant="ghost"
+              colorTheme="light"
+              aria-label={t('myNdla.moreTags', { count: remainingTags.length })}
+            >
+              {<TagCounterWrapper>{`+${remainingTags.length}`}</TagCounterWrapper>}
+            </StyledTrigger>
+          </DropdownTrigger>
+          <DropdownContent showArrow>
+            {remainingTags.map((tag, i) => (
+              <DropdownItem key={`tag-${i}`}>
+                <SafeLinkButton
+                  to={`${tagLinkPrefix ?? ''}/${encodeURIComponent(tag)}`}
+                  variant="ghost"
+                  colorTheme="light"
+                >
+                  <HashTag />
+                  {tag}
+                </SafeLinkButton>
+              </DropdownItem>
+            ))}
+          </DropdownContent>
+        </DropdownMenu>
       )}
     </>
   );

package/src/TreeStructure/ComboboxButton.tsx

@@ -18,15 +18,13 @@ import { TreeStructureType } from './types';
 import { arrowNavigation } from './arrowNavigation';
 import ContentLoader from '../ContentLoader';
 
-interface StyledRowProps {
-  isOpen: boolean;
-}
-
-const StyledRow = styled.div<StyledRowProps>`
+const StyledRow = styled.div`
   display: flex;
   padding: ${spacing.xxsmall};
   align-items: center;
-  border-bottom: ${({ isOpen }) => isOpen && `1px solid ${colors.brand.tertiary}`};
+  &[data-open='true'] {
+    border-bottom: 1px solid ${colors.brand.tertiary};
+  }
 `;
 const StyledSelectedFolder = styled(Button)`
   flex: 1;
@@ -110,7 +108,7 @@ const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
 
     return (
       <StyledRow
-        isOpen={showTree}
+        data-open={showTree}
         onMouseDown={(e) => {
           if (!e.defaultPrevented) {
             e.preventDefault();

package/src/TreeStructure/FolderItem.tsx

@@ -6,21 +6,21 @@
  *
  */
 
-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';
 import { FolderOutlined, FolderShared } from '@ndla/icons/contentType';
 import { Done } from '@ndla/icons/editor';
 import { ButtonV2 as Button } from '@ndla/button';
-import { colors, spacing, animations, spacingUnit, misc, fonts } from '@ndla/core';
+import { colors, spacing, animations, misc, fonts } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import { IFolder } from '@ndla/types-backend/learningpath-api';
 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);
+    }
   }
 `;
 
@@ -57,57 +62,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)`
   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 +160,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 +212,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 +222,7 @@ const FolderItem = ({
       }}
       to={loading ? '' : linkPath}
       tabIndex={tabable ? 0 : -1}
-      selected={selected}
+      data-selected={selected}
       onFocus={() => setFocusedFolder(folder)}
       onClick={handleClickFolder}
     >
@@ -213,7 +230,7 @@ const FolderItem = ({
         <OpenButton
           aria-hidden
           tabIndex={-1}
-          isOpen={isOpen}
+          data-open={isOpen}
           onClick={(e) => {
             e.stopPropagation();
             e.preventDefault();
@@ -237,7 +254,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 +262,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);