@ndla/ui 42.1.2 → 43.0.0

package/src/AudioPlayer/Controls.tsx

@@ -8,14 +8,14 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
-import { Root, Trigger, Item, Content, DropdownMenuPortal } from '@radix-ui/react-dropdown-menu';
 import { Root as SliderRoot, Track, Range, SliderThumb } from '@radix-ui/react-slider';
 import { Root as PopoverRoot, PopoverContent, PopoverTrigger, PopoverPortal } from '@radix-ui/react-popover';
 import { Play, Pause, VolumeUp } from '@ndla/icons/common';
-import { breakpoints, colors, fonts, misc, mq, spacing } from '@ndla/core';
+import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 import { Back15, Forward15 } from '@ndla/icons/action';
 import { ButtonV2, IconButtonV2 } from '@ndla/button';
+import { DropdownMenu, DropdownContent, DropdownItem, DropdownTrigger } from '@ndla/dropdown-menu';
 
 const ControlsWrapper = styled.div`
   border: 1px solid ${colors.brand.lighter};
@@ -59,22 +59,15 @@ const SpeedButton = styled(ButtonV2)`
   }
 `;
 
-const SpeedList = styled(Content)`
-  background: ${colors.white};
+const SpeedList = styled(DropdownContent)`
   border: 1px solid ${colors.brand.lighter};
-  border-radius: ${misc.borderRadius};
   padding: 5px 10px;
-  display: flex;
-  flex-direction: column;
   justify-content: center;
 `;
 
-const SpeedValueButton = styled(Item)`
-  height: 28px;
+const SpeedValueButton = styled(ButtonV2)`
   padding: 0 14px;
-  cursor: pointer;
-  font-weight: ${fonts.weight.semibold};
-  ${fonts.sizes('14px')};
+  gap: 0px;
   color: ${colors.text.light};
   display: flex;
   justify-content: center;
@@ -82,14 +75,13 @@ const SpeedValueButton = styled(Item)`
   &:active,
   &:focus,
   &[data-highlighted] {
-    background: ${colors.brand.greyLighter};
-    border-radius: 5px;
     outline: none;
     color: ${colors.text.primary};
   }
 `;
 
 const SpeedSelectedMark = styled.span`
+  align-self: flex-start;
   border-radius: 50%;
   background: #d1372e;
   width: 6px;
@@ -311,9 +303,8 @@ const Controls = ({ src, title }: Props) => {
         >
           <Back15 />
         </Back15SecButton>
-
-        <Root>
-          <Trigger asChild>
+        <DropdownMenu>
+          <DropdownTrigger>
             <SpeedButton
               shape="pill"
               variant="ghost"
@@ -324,17 +315,22 @@ const Controls = ({ src, title }: Props) => {
             >
               {speedValue}x
             </SpeedButton>
-          </Trigger>
-          <DropdownMenuPortal>
-            <SpeedList side="top">
-              {speedValues.map((speed) => (
-                <SpeedValueButton key={speed} onSelect={() => setSpeedValue(speed)}>
+          </DropdownTrigger>
+          <SpeedList side="top">
+            {speedValues.map((speed) => (
+              <DropdownItem key={speed}>
+                <SpeedValueButton
+                  variant="ghost"
+                  colorTheme="greyLighter"
+                  size="small"
+                  onSelect={() => setSpeedValue(speed)}
+                >
                   {speed}x{speed === speedValue && <SpeedSelectedMark />}
                 </SpeedValueButton>
-              ))}
-            </SpeedList>
-          </DropdownMenuPortal>
-        </Root>
+              </DropdownItem>
+            ))}
+          </SpeedList>
+        </DropdownMenu>
         <Forward15SecButton
           colorTheme="greyLighter"
           variant="ghost"

package/src/Breadcrumb/index.ts

@@ -14,6 +14,4 @@ export { default as HeaderBreadcrumb } from './HeaderBreadcrumb';
 
 export { default as HomeBreadcrumb } from './HomeBreadcrumb';
 
-export { default as ActionBreadcrumb } from './ActionBreadcrumb';
-
 export default Breadcrumb;

package/src/LanguageSelector/LanguageSelector.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { Root, Trigger, Item, Content, Portal, Arrow } from '@radix-ui/react-dropdown-menu';
+import { DropdownMenu, DropdownTrigger, DropdownContent, DropdownItem } from '@ndla/dropdown-menu';
 import { ButtonV2 } from '@ndla/button';
 import { useTranslation } from 'react-i18next';
 import { ChevronDown } from '@ndla/icons/common';
@@ -20,15 +20,12 @@ interface Props<T extends string> {
   inverted?: boolean;
 }
 
-const PopoverContent = styled(Content)`
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background-color: ${colors.white};
+const StyledDropdownContent = styled(DropdownContent)`
   border-radius: ${spacing.small};
   border: 1px solid ${colors.brand.tertiary};
-  fill: ${colors.brand.tertiary};
+  [data-arrow] {
+    fill: ${colors.brand.tertiary};
+  }
 `;
 
 const LanguageChoice = styled(ButtonV2)`
@@ -67,33 +64,30 @@ const Text = styled.span`
 const LanguageSelector = <T extends string>({ locales, onSelect, inverted }: Props<T>) => {
   const { t, i18n } = useTranslation();
   return (
-    <Root>
-      <Trigger asChild>
+    <DropdownMenu>
+      <DropdownTrigger>
         <ButtonV2 variant="outline" shape="pill" inverted={inverted} aria-label={t('footer.selectLanguage')}>
           {t(`languages.prefixChangeLanguage`)} <ChevronDown />
         </ButtonV2>
-      </Trigger>
-      <Portal>
-        <PopoverContent sideOffset={4}>
-          <Arrow aria-hidden />
-          {locales.map((locale) => (
-            <Item asChild key={locale}>
-              <LanguageChoice
-                role="link"
-                aria-current={i18n.language === locale}
-                variant="ghost"
-                shape="sharp"
-                aria-label={t(`changeLanguage.${locale}`)}
-                onClick={() => onSelect(locale)}
-              >
-                <ActivityIndicator>{i18n.language === locale && <ActiveIndicator />}</ActivityIndicator>
-                <Text>{t(`languages.${locale}`)}</Text>
-              </LanguageChoice>
-            </Item>
-          ))}
-        </PopoverContent>
-      </Portal>
-    </Root>
+      </DropdownTrigger>
+      <StyledDropdownContent sideOffset={4} showArrow>
+        {locales.map((locale) => (
+          <DropdownItem key={locale}>
+            <LanguageChoice
+              role="link"
+              aria-current={i18n.language === locale}
+              variant="ghost"
+              shape="sharp"
+              aria-label={t(`changeLanguage.${locale}`)}
+              onClick={() => onSelect(locale)}
+            >
+              <ActivityIndicator>{i18n.language === locale && <ActiveIndicator />}</ActivityIndicator>
+              <Text>{t(`languages.${locale}`)}</Text>
+            </LanguageChoice>
+          </DropdownItem>
+        ))}
+      </StyledDropdownContent>
+    </DropdownMenu>
   );
 };
 

package/src/MyNdla/Resource/Folder.stories.tsx

@@ -2,6 +2,9 @@ import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { Pencil } from '@ndla/icons/action';
 import { DeleteForever } from '@ndla/icons/editor';
+import { DropdownMenu, DropdownTrigger, DropdownContent, DropdownItem } from '@ndla/dropdown-menu';
+import { ButtonV2, IconButtonV2 } from '@ndla/button';
+import { HorizontalMenu } from '@ndla/icons/contentType';
 import { defaultParameters } from '../../../../../stories/defaults';
 
 import Folder from './Folder';
@@ -14,7 +17,7 @@ export default {
     ...defaultParameters,
   },
   argTypes: {
-    menuItems: {
+    menu: {
       control: false,
     },
   },
@@ -26,10 +29,29 @@ export default {
     description: '',
     link: '',
     type: 'list',
-    menuItems: [
-      { icon: <Pencil />, text: 'Rediger', onClick: () => {} },
-      { icon: <DeleteForever />, text: 'Slett', onClick: () => {}, type: 'danger' },
-    ],
+    menu: (
+      <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>
+    ),
     isShared: true,
   },
 } as Meta<typeof Folder>;

package/src/MyNdla/Resource/Folder.tsx

@@ -7,14 +7,12 @@
  */
 
 import styled from '@emotion/styled';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { FolderOutlined, FolderShared } from '@ndla/icons/contentType';
 import { FileDocumentOutline, Share } from '@ndla/icons/common';
 import { fonts, spacing, colors, mq, breakpoints } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
-import { MenuItemProps } from '@ndla/button';
 import { ResourceTitleLink } from '../../Resource/resourceComponents';
-import FolderMenu from './FolderMenu';
 
 export type LayoutType = 'list' | 'listLarger' | 'block';
 
@@ -151,22 +149,11 @@ interface Props {
   description?: string;
   link: string;
   type?: LayoutType;
-  onViewTypeChange?: (type: LayoutType) => void;
-  menuItems?: MenuItemProps[];
+  menu?: ReactNode;
   isShared?: boolean;
 }
 
-const Folder = ({
-  id,
-  link,
-  title,
-  subFolders,
-  subResources,
-  type = 'list',
-  menuItems,
-  isShared,
-  onViewTypeChange,
-}: Props) => {
+const Folder = ({ id, link, title, subFolders, subResources, type = 'list', menu, isShared }: Props) => {
   const { t } = useTranslation();
   const Icon = isShared ? FolderShared : FolderOutlined;
 
@@ -196,9 +183,7 @@ const Folder = ({
           <Count layoutType={type} type={'folder'} count={subFolders} />
           <Count layoutType={type} type={'resource'} count={subResources} />
         </CountContainer>
-        {menuItems && menuItems.length > 0 && (
-          <FolderMenu menuItems={menuItems} viewType={type} onViewTypeChange={onViewTypeChange} />
-        )}
+        {menu}
       </MenuWrapper>
     </FolderWrapper>
   );

package/src/MyNdla/index.ts

@@ -1,5 +1,3 @@
 import Folder from './Resource/Folder';
 import FolderInput from './Resource/FolderInput';
-import FolderMenu from './Resource/FolderMenu';
-import SettingsMenu from './SettingsMenu';
-export { Folder, FolderInput, SettingsMenu, FolderMenu };
+export { Folder, FolderInput };

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,9 +7,8 @@
  */
 
 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 {
@@ -23,7 +22,6 @@ import {
 } from './resourceComponents';
 import ContentLoader from '../ContentLoader';
 import { contentTypeMapping, resourceEmbedTypeMapping } from '../model/ContentType';
-import { SettingsMenu } from '../MyNdla';
 
 const BlockElementWrapper = styled.div`
   display: flex;
@@ -149,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 }[];
@@ -163,7 +161,7 @@ const BlockResource = ({
   tags,
   resourceImage,
   description,
-  menuItems,
+  menu,
   isLoading,
   headingLevel: Heading = 'h2',
   targetBlank,
@@ -196,7 +194,7 @@ const BlockResource = ({
         </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,9 +7,8 @@
  */
 
 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,
@@ -23,7 +22,6 @@ import {
 import ContentLoader from '../ContentLoader';
 import ContentTypeBadge from '../ContentTypeBadge';
 import { contentTypeMapping, resourceEmbedTypeMapping } from '../model/ContentType';
-import { SettingsMenu } from '../MyNdla';
 
 const ListResourceWrapper = styled.div`
   flex: 1;
@@ -204,7 +202,7 @@ export interface ListResourceProps {
   resourceTypes: { id: string; name: string }[];
   tags?: string[];
   description?: string;
-  menuItems?: MenuItemProps[];
+  menu?: ReactNode;
   isLoading?: boolean;
   targetBlank?: boolean;
 }
@@ -218,7 +216,7 @@ const ListResource = ({
   resourceImage,
   resourceTypes,
   description,
-  menuItems,
+  menu,
   isLoading = false,
   targetBlank,
 }: ListResourceProps) => {
@@ -251,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

@@ -10,11 +10,11 @@ import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
 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';
 
@@ -38,6 +38,10 @@ export const ResourceTitleLink = styled(SafeLink)`
   }
 `;
 
+const StyledTrigger = styled(IconButtonV2)`
+  margin: 0px ${spacing.xsmall};
+`;
+
 export const resourceHeadingStyle = css`
   margin: 0;
   overflow: hidden;
@@ -173,34 +177,40 @@ interface CompressedTagListProps {
 }
 
 export const CompressedTagList = ({ tags, tagLinkPrefix }: CompressedTagListProps) => {
-  const navigate = useNavigate();
   const { t } = useTranslation();
   const visibleTags = useMemo(() => tags.slice(0, 3), [tags]);
-  const remainingTags = useMemo(
-    () =>
-      tags.slice(3, tags.length).map((tag) => {
-        return {
-          icon: <HashTag />,
-          text: tag,
-          onClick: () => {
-            navigate(`${tagLinkPrefix ? tagLinkPrefix : ''}/${encodeURIComponent(tag)}`);
-          },
-        };
-      }),
-    [navigate, tagLinkPrefix, 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/FolderItem.tsx

@@ -13,7 +13,7 @@ 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';
@@ -62,8 +62,6 @@ const FolderIconWrapper = styled.div`
   }
 `;
 
-const shouldForwardProp = (name: string) => !['selected', 'level', 'focused', 'isCreatingFolder'].includes(name);
-
 const FolderName = styled(Button)`
   display: grid;
   grid-template-columns: auto 1fr auto;
@@ -106,7 +104,7 @@ const StyledDone = styled(Done)`
   color: ${colors.support.green};
 `;
 
-const FolderNameLink = styled(SafeLink, { shouldForwardProp })`
+const FolderNameLink = styled(SafeLink)`
   display: grid;
   align-items: center;
   grid-template-columns: ${spacing.medium} 1fr auto;

package/src/index.ts

@@ -182,7 +182,7 @@ export { default as Topic } from './Topic';
 export type { TopicProps } from './Topic';
 export { default as Aside } from './Aside';
 
-export { default as Breadcrumb, HeaderBreadcrumb, HomeBreadcrumb, ActionBreadcrumb } from './Breadcrumb';
+export { default as Breadcrumb, HeaderBreadcrumb, HomeBreadcrumb } from './Breadcrumb';
 export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from './Breadcrumb';
 
 export { i18nInstance, formatNestedMessages } from './i18n';
@@ -242,7 +242,7 @@ export { Notion, ConceptNotion } from './Notion';
 export type { NotionVisualElementType, ConceptNotionType } from './Notion';
 
 export { BannerCard } from './BannerCard';
-export { Folder, FolderInput, FolderMenu } from './MyNdla';
+export { Folder, FolderInput } from './MyNdla';
 export { ListResource, BlockResource } from './Resource';
 export type { ListResourceProps } from './Resource';
 export type { TagType } from './TagSelector';