@ndla/ui 42.1.1 → 43.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "42.1.1",
+  "version": "43.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,23 +31,23 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^2.2.13",
-    "@ndla/article-scripts": "^3.0.18",
-    "@ndla/button": "^10.1.12",
-    "@ndla/carousel": "^3.1.10",
+    "@ndla/accordion": "^2.2.15",
+    "@ndla/article-scripts": "^3.0.19",
+    "@ndla/button": "^11.0.0",
+    "@ndla/carousel": "^3.1.11",
     "@ndla/core": "^4.1.4",
-    "@ndla/forms": "^4.3.13",
-    "@ndla/hooks": "^2.0.7",
-    "@ndla/icons": "^4.0.0",
+    "@ndla/dropdown-menu": "^1.0.0",
+    "@ndla/forms": "^4.3.15",
+    "@ndla/hooks": "^2.0.8",
+    "@ndla/icons": "^4.0.1",
     "@ndla/licenses": "^7.1.1",
-    "@ndla/modal": "^3.0.10",
-    "@ndla/notion": "^5.0.11",
-    "@ndla/safelink": "^4.1.12",
+    "@ndla/modal": "^3.0.11",
+    "@ndla/notion": "^5.0.13",
+    "@ndla/safelink": "^4.1.14",
     "@ndla/switch": "^1.1.8",
     "@ndla/tabs": "^3.0.4",
-    "@ndla/tooltip": "^4.1.12",
-    "@ndla/util": "^3.1.13",
-    "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@ndla/tooltip": "^4.1.13",
+    "@ndla/util": "^3.1.14",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-slider": "^1.1.2",
     "focus-trap-react": "^8.9.2",
@@ -67,8 +67,7 @@
     "i18next": "^21.9.2",
     "lodash": "^4.17.20",
     "react": ">= 16.8.0",
-    "react-i18next": "^11.18.6",
-    "react-router-dom": "^6.3.0"
+    "react-i18next": "^11.18.6"
   },
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.11.0",
@@ -83,5 +82,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4c4276e39a7529a8043ef1dcc3c1e9858f2ddca8"
+  "gitHead": "2aa95438581ea00bd5f1eac85a1514511bfe0de2"
 }

package/src/AudioPlayer/AudioPlayer.tsx

@@ -53,22 +53,17 @@ const ImageWrapper = styled.div`
   }
 `;
 
-type TextWrapperProps = {
-  hasImage?: boolean;
-};
-
-const TextWrapper = styled.div<TextWrapperProps>`
+const TextWrapper = styled.div`
   padding: ${spacing.small};
   width: 100%;
-
-  ${(props) =>
-    props.hasImage &&
-    `${mq.range({ from: breakpoints.tablet })} {
-    padding: ${spacing.small} ${spacing.normal};
+  &[data-has-image='true'] {
+    ${mq.range({ from: breakpoints.tablet })} {
+      padding: ${spacing.small} ${spacing.normal};
+    }
+    ${mq.range({ from: breakpoints.tabletWide })} {
+      padding: ${spacing.small} ${spacing.medium};
+    }
   }
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    padding: ${spacing.small} ${spacing.medium};
-  }`}
 `;
 
 const TitleWrapper = styled.div`
@@ -78,13 +73,12 @@ const TitleWrapper = styled.div`
   }
 `;
 
-type TitleProps = {
-  hasDescription?: boolean;
-};
-
-const Title = styled.h2<TitleProps>`
+const Title = styled.h2`
   ${fonts.sizes('22px', '30px')};
-  margin: 0 0 ${(props) => props.hasDescription && `${spacing.small}`};
+  margin: 0px;
+  &[data-has-desc='true'] {
+    margin: 0 0 ${spacing.small};
+  }
 `;
 
 const Subtitle = styled.h3`
@@ -99,14 +93,10 @@ const StyledDescription = styled.div`
   margin: 0;
 `;
 
-type LinkToTextVersionWrapperProps = {
-  noMargin?: boolean;
-};
-const LinkToTextVersionWrapper = styled.div<LinkToTextVersionWrapperProps>`
-  ${(props) =>
-    !props.noMargin &&
-    `margin-top: ${spacing.normal};
-  `}
+const LinkToTextVersionWrapper = styled.div`
+  &[data-margin='true'] {
+    margin-top: ${spacing.small};
+  }
   ${mq.range({ until: breakpoints.tabletWide })} {
     margin: ${spacing.small} 0;
   }
@@ -201,10 +191,10 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
   };
 
   type TextVersionComponentProps = {
-    noMargin?: boolean;
+    margin?: boolean;
   };
-  const TextVersionComponent = ({ noMargin }: TextVersionComponentProps) => (
-    <LinkToTextVersionWrapper noMargin={noMargin}>
+  const TextVersionComponent = ({ margin }: TextVersionComponentProps) => (
+    <LinkToTextVersionWrapper data-margin={margin}>
       <ButtonV2 size="normal" shape="pill" onClick={toggleTextVersion} data-audio-text-button-id={staticRenderId}>
         {t('audio.textVersion.heading')}
       </ButtonV2>
@@ -219,7 +209,7 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
             <img src={img.url} alt={img.alt} />
           </ImageWrapper>
         )}
-        <TextWrapper hasImage={!!img}>
+        <TextWrapper data-has-image={!!img}>
           <TitleWrapper>
             <div>
               {subtitle && (
@@ -227,9 +217,9 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
                   {subtitle.url ? <SafeLink to={subtitle.url}>{subtitle.title}</SafeLink> : subtitle.title}
                 </Subtitle>
               )}
-              <Title hasDescription={!!description}>{title}</Title>
+              <Title data-has-desc={!!description}>{title}</Title>
             </div>
-            {textVersion && !img && <TextVersionComponent noMargin />}
+            {textVersion && !img && <TextVersionComponent />}
           </TitleWrapper>
           {description && (
             <StyledDescription>
@@ -241,7 +231,7 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
               </ButtonV2>
             </StyledDescription>
           )}
-          {textVersion && img && <TextVersionComponent />}
+          {textVersion && img && <TextVersionComponent margin />}
         </TextWrapper>
       </InfoWrapper>
       <div data-audio-player={1} data-src={src} data-title={title}>

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/CampaignBlock/CampaignBlock.tsx

@@ -18,6 +18,7 @@ interface Image {
   src: string;
   alt: string;
 }
+
 interface Props {
   title: {
     title: string;
@@ -62,12 +63,7 @@ const StyledDescription = styled.p`
 
 const StyledImg = styled.img`
   max-height: 200px;
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    align-self: center;
-  }
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    align-self: center;
-  }
+  align-self: center;
 `;
 
 const StyledLink = styled(SafeLink)`
@@ -84,6 +80,10 @@ const StyledLink = styled(SafeLink)`
   }
 `;
 
+const TextWrapper = styled.div`
+  flex-grow: 1;
+`;
+
 const CampaignBlock = ({
   title,
   imageBefore,
@@ -95,16 +95,16 @@ const CampaignBlock = ({
 }: Props) => {
   return (
     <Container className={className}>
-      {imageBefore && <StyledImg src={imageBefore.src} data-left={true} />}
-      <div>
+      {imageBefore && <StyledImg src={imageBefore.src} />}
+      <TextWrapper>
         <Heading css={headingStyle}>{title.title}</Heading>
         <StyledDescription>{description.text}</StyledDescription>
         <StyledLink to={url.url}>
           {url.text}
           <Forward />
         </StyledLink>
-      </div>
-      {imageAfter && <StyledImg src={imageAfter.src} data-right={true} />}
+      </TextWrapper>
+      {imageAfter && <StyledImg src={imageAfter.src} />}
     </Container>
   );
 };

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/LicenseByline/EmbedByline.tsx

@@ -124,7 +124,7 @@ const StyledSpan = styled.span`
 
 const LicenseInformationWrapper = styled.div`
   flex: 1;
-  padding-right: ${spacing.xsmall}}
+  padding-right: ${spacing.xsmall};
 `;
 
 const EmbedByline = ({

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,42 +7,32 @@
  */
 
 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 { css } from '@emotion/react';
 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';
-interface LayoutProps {
-  type: LayoutType;
-}
 
-const FolderWrapper = styled.div<LayoutProps>`
+const FolderWrapper = styled.div`
   display: flex;
   position: relative;
   align-items: center;
   justify-content: space-between;
 
   ${mq.range({ until: breakpoints.mobileWide })} {
-    ${({ type }) =>
-      type !== 'list' &&
-      css`
-        flex-direction: column;
-        align-items: unset;
-      `}
-  }
-
-  ${({ type }) =>
-    type === 'block' &&
-    css`
+    &:not([data-type='list']) {
       flex-direction: column;
       align-items: unset;
-    `}
+    }
+  }
+
+  &[data-type='block'] {
+    flex-direction: column;
+    align-items: unset;
+  }
 
   border: 1px solid ${colors.brand.neutral7};
   cursor: pointer;
@@ -52,17 +42,23 @@ const FolderWrapper = styled.div<LayoutProps>`
   &:hover {
     box-shadow: 1px 1px 6px 2px rgba(9, 55, 101, 0.08);
     transition-duration: 0.2s;
+    [data-title] {
+      color: ${colors.brand.primary};
+      text-decoration: underline;
+    }
   }
 `;
 
-const TitleWrapper = styled.div<LayoutProps>`
+const TitleWrapper = styled.div`
   display: flex;
   margin: ${spacing.nsmall};
-  margin-bottom: ${({ type }) => type === 'block' && 0};
   flex-direction: row;
   align-items: center;
   gap: ${spacing.xsmall};
   justify-content: space-between;
+  &[data-type='block'] {
+    margin-bottom: 0;
+  }
 `;
 
 const IconWrapper = styled.div`
@@ -88,11 +84,6 @@ const FolderTitle = styled.h2`
   -webkit-line-clamp: 1;
   line-clamp: 1;
   -webkit-box-orient: vertical;
-
-  ${FolderWrapper}:hover & {
-    color: ${colors.brand.primary};
-    text-decoration: underline;
-  }
 `;
 
 const MenuWrapper = styled.div`
@@ -113,7 +104,7 @@ const CountContainer = styled.div`
   margin: 0 ${spacing.small} 0 ${spacing.nsmall};
 `;
 
-const IconTextWrapper = styled.div<LayoutProps>`
+const IconTextWrapper = styled.div`
   display: flex;
   align-items: center;
   gap: ${spacing.xxsmall};
@@ -125,11 +116,9 @@ const IconTextWrapper = styled.div<LayoutProps>`
   }
   ${fonts.sizes(16)};
   ${mq.range({ until: breakpoints.mobileWide })} {
-    ${({ type }) =>
-      type === 'list' &&
-      css`
-        display: none;
-      `}
+    &[data-type='list'] {
+      display: none;
+    }
   }
 `;
 
@@ -145,7 +134,7 @@ const Count = ({ type, count, layoutType }: IconCountProps) => {
   if (!count) return null;
 
   return (
-    <IconTextWrapper type={layoutType}>
+    <IconTextWrapper data-type={layoutType}>
       <Icon />
       <span>{t(`myNdla.${type}s`, { count })}</span>
     </IconTextWrapper>
@@ -160,42 +149,33 @@ 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;
 
   return (
-    <FolderWrapper type={type} id={id}>
-      <TitleWrapper type={type}>
+    <FolderWrapper data-type={type} id={id}>
+      <TitleWrapper data-type={type}>
         <IconWrapper
           aria-label={`${isShared ? `${t('myNdla.folder.sharing.shared')} ` : ''}${t('myNdla.folder.folder')}`}
         >
           <Icon />
         </IconWrapper>
         <ResourceTitleLink to={link}>
-          <FolderTitle title={title}>{title}</FolderTitle>
+          <FolderTitle data-title="" title={title}>
+            {title}
+          </FolderTitle>
         </ResourceTitleLink>
       </TitleWrapper>
       <MenuWrapper>
         <CountContainer>
           {isShared && (
             // Information regarding the shared status of a folder is read previously, ignore this
-            <IconTextWrapper type={type} aria-hidden>
+            <IconTextWrapper data-type={type} aria-hidden>
               <Share />
               <span>{t('myNdla.folder.sharing.shared')}</span>
             </IconTextWrapper>
@@ -203,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 };