@ndla/ui 42.1.0 → 42.1.2

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

@@ -11,38 +11,30 @@ import React 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 +44,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 +86,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 +106,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 +118,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 +136,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>
@@ -180,22 +171,24 @@ const Folder = ({
   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>

package/src/MyNdla/Resource/FolderInput.tsx

@@ -24,6 +24,10 @@ interface Props extends ComponentProps<typeof InputV2> {
   onSave: () => void;
 }
 
+const StyledSpinner = styled(Spinner)`
+  margin: ${spacing.small};
+`;
+
 // Source: https://kovart.github.io/dashed-border-generator/
 const borderStyle = (error?: boolean) =>
   `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='${encodeURIComponent(
@@ -102,7 +106,7 @@ const FolderInput = forwardRef<HTMLInputElement, Props>(({ loading, error, onClo
             </>
           )}
           <div aria-live="assertive">
-            {loading && <Spinner size="normal" margin={spacing.small} id="folder-spinner" aria-label={t('loading')} />}
+            {loading && <StyledSpinner size="normal" id="folder-spinner" aria-label={t('loading')} />}
           </div>
         </Row>
       }

package/src/Resource/BlockResource.tsx

@@ -15,11 +15,11 @@ 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';
@@ -41,11 +41,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 +69,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 +118,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} />;
@@ -161,12 +165,11 @@ const BlockResource = ({
   description,
   menuItems,
   isLoading,
-  headingLevel = 'h2',
+  headingLevel: Heading = 'h2',
   targetBlank,
   resourceTypes,
 }: Props) => {
   const firstResourceType = resourceTypes?.[0]?.id ?? '';
-  const Title = ResourceTitle.withComponent(headingLevel);
 
   return (
     <BlockElementWrapper id={id}>
@@ -184,12 +187,12 @@ 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} />}

package/src/Resource/ListResource.tsx

@@ -14,11 +14,11 @@ 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';
@@ -48,7 +48,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 +61,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 +69,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 +141,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 (
@@ -237,8 +240,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>

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 { HashTag } from '@ndla/icons/common';
+import { css } from '@emotion/react';
 import resourceTypeColor from '../utils/resourceTypeColor';
 import { resourceEmbedTypeMapping } from '../model/ContentType';
 
@@ -37,7 +38,7 @@ export const ResourceTitleLink = styled(SafeLink)`
   }
 `;
 
-export const ResourceTitle = styled.span`
+export const resourceHeadingStyle = css`
   margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -113,19 +114,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;
@@ -161,16 +175,21 @@ 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).map((tag) => {
+        return {
+          icon: <HashTag />,
+          text: tag,
+          onClick: () => {
+            navigate(`${tagLinkPrefix ? tagLinkPrefix : ''}/${encodeURIComponent(tag)}`);
+          },
+        };
+      }),
+    [navigate, tagLinkPrefix, tags],
+  );
+
   return (
     <>
       <TagList tagLinkPrefix={tagLinkPrefix} tags={visibleTags} />

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();