@ndla/ui 30.1.0 → 30.2.0

package/src/MyNdla/Resource/Folder.tsx

@@ -16,39 +16,72 @@ import { useTranslation } from 'react-i18next';
 import SafeLink from '@ndla/safelink';
 import { MenuButton, MenuItemProps } from '@ndla/button';
 
-interface FolderIconWrapperProps {
-  type?: LayoutType;
+type LayoutType = 'list' | 'listLarger' | 'block';
+interface LayoutProps {
+  type: LayoutType;
 }
 
-const FolderIconWrapper = styled.div<FolderIconWrapperProps>`
+const FolderWrapper = styled.div<LayoutProps>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${spacing.nsmall};
+  gap: ${spacing.small};
+
+  ${mq.range({ until: breakpoints.mobileWide })} {
+    ${({ type }) =>
+      type !== 'list' &&
+      css`
+        flex-direction: column;
+        align-items: unset;
+      `}
+  }
+
+  ${({ type }) =>
+    type === 'block' &&
+    css`
+      flex-direction: column;
+      align-items: unset;
+    `}
+
+  border: 1px solid ${colors.brand.neutral7};
+  cursor: pointer;
+  border-radius: 2px;
+  box-shadow: none;
+  text-decoration: none;
+  &:hover {
+    box-shadow: 1px 1px 6px 2px rgba(9, 55, 101, 0.08);
+    transition-duration: 0.2s;
+  }
+`;
+
+const TitleWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${spacing.xsmall};
+  justify-content: space-between;
+`;
+
+const IconWrapper = styled.div`
   display: flex;
   border-radius: 100%;
-  padding: ${spacing.small};
-  background-color: ${colors.brand.greyLighter};
+  color: ${colors.brand.primary};
   svg {
-    width: 18px;
-    height: 18px;
+    width: 20px;
+    height: 20px;
   }
-  ${(p) =>
-    p.type === 'block' &&
-    css`
-    background-color: transparent;
-    ${FolderWrapper}:hover & {
-      background-color: ${colors.brand.light};
-      transition-duration 0.5s;
-    }
-  `};
 `;
 
-const FolderTitleLink = styled(SafeLink)`
+const StyledLink = styled(SafeLink)`
   box-shadow: none;
-  color: ${colors.text.primary};
+  color: ${colors.brand.primary};
   flex: 1;
 `;
 
 const FolderTitle = styled.h2`
-  ${fonts.sizes(18)};
-  font-weight: ${fonts.weight.normal};
+  ${fonts.sizes('16px', '20px')};
+  font-weight: ${fonts.weight.semibold};
   margin: 0;
   flex: 1;
 
@@ -59,41 +92,50 @@ 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 FolderWrapper = styled.div`
+const MenuWrapper = styled.div`
+  overflow: hidden;
   display: flex;
+  flex-direction: row;
   align-items: center;
-  padding: ${spacing.small};
-  border: 1px solid ${colors.brand.neutral7};
-  cursor: pointer;
-  border-radius: 2px;
-  box-shadow: none;
-  text-decoration: none;
-  color: ${colors.brand.greyDark};
-  font-family: ${fonts.sans};
-  transition-duration: 0.2s;
+  gap: ${spacing.xsmall};
+  justify-content: space-between;
+  margin: -${spacing.nsmall};
+  margin-left: 0;
+`;
+
+const CountContainer = styled.div`
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
   gap: ${spacing.small};
-  &:hover {
-    box-shadow: 1px 1px 6px 2px rgba(9, 55, 101, 0.08);
-    transition-duration: 0.2s;
-    ${FolderTitle} {
-      color: ${colors.brand.primary};
-      text-decoration: underline;
-    }
-  }
 `;
 
-interface Props {
-  id: string;
-  title: string;
-  subFolders?: number;
-  subResources?: number;
-  description?: string;
-  link: string;
-  type: LayoutType;
-  menuItems?: MenuItemProps[];
-}
+const IconCountWrapper = styled.div<LayoutProps>`
+  display: flex;
+  align-items: center;
+  gap: ${spacing.xxsmall};
+  color: ${colors.brand.grey};
+  white-space: nowrap;
+  svg {
+    width: 13px;
+    height: 13px;
+  }
+  ${fonts.sizes(16)};
+  ${mq.range({ until: breakpoints.mobileWide })} {
+    ${({ type }) =>
+      type === 'list' &&
+      css`
+        display: none;
+      `}
+  }
+`;
 
 interface IconCountProps {
   type: 'resource' | 'folder';
@@ -101,30 +143,7 @@ interface IconCountProps {
   layoutType: LayoutType;
 }
 
-interface IconCountWrapperProps {
-  type: LayoutType;
-}
-
-const IconCountWrapper = styled.div<IconCountWrapperProps>`
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  ${fonts.sizes(16)};
-  ${(p) =>
-    p.type === 'block' &&
-    css`
-      opacity: 0;
-      ${FolderWrapper}:hover & {
-        opacity: 1;
-      }
-    `};
-
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    display: none;
-  }
-`;
-
-const IconCount = ({ type, count, layoutType }: IconCountProps) => {
+const Count = ({ type, count, layoutType }: IconCountProps) => {
   const Icon = type === 'resource' ? FileDocumentOutline : FolderOutlined;
   const { t } = useTranslation();
   if (!count) return null;
@@ -132,12 +151,21 @@ const IconCount = ({ type, count, layoutType }: IconCountProps) => {
   return (
     <IconCountWrapper type={layoutType}>
       <Icon aria-label={t(`myNdla.${type}s`)} />
-      <span>{layoutType === 'block' ? count : t(`myNdla.${type}s`, { count })}</span>
+      <span>{t(`myNdla.${type}s`, { count })}</span>
     </IconCountWrapper>
   );
 };
 
-type LayoutType = 'list' | 'block';
+interface Props {
+  id: string;
+  title: string;
+  subFolders?: number;
+  subResources?: number;
+  description?: string;
+  link: string;
+  type: LayoutType;
+  menuItems?: MenuItemProps[];
+}
 
 const Folder = ({ id, link, title, subFolders, subResources, type = 'list', menuItems }: Props) => {
   const { t } = useTranslation();
@@ -148,16 +176,22 @@ const Folder = ({ id, link, title, subFolders, subResources, type = 'list', menu
   };
 
   return (
-    <FolderWrapper onClick={onClick} id={id}>
-      <FolderIconWrapper type={type}>
-        <FolderOutlined aria-label={t('myNdla.folder.folder')} />
-      </FolderIconWrapper>
-      <FolderTitleLink to={link} ref={linkRef}>
-        <FolderTitle>{title}</FolderTitle>
-      </FolderTitleLink>
-      <IconCount layoutType={type} type={'folder'} count={subFolders} />
-      <IconCount layoutType={type} type={'resource'} count={subResources} />
-      {menuItems && menuItems.length > 0 && <MenuButton alignRight size="small" menuItems={menuItems} />}
+    <FolderWrapper type={type} onClick={onClick} id={id}>
+      <TitleWrapper>
+        <IconWrapper>
+          <FolderOutlined aria-label={t('myNdla.folder.folder')} />
+        </IconWrapper>
+        <StyledLink to={link} ref={linkRef}>
+          <FolderTitle>{title}</FolderTitle>
+        </StyledLink>
+      </TitleWrapper>
+      <MenuWrapper>
+        <CountContainer>
+          <Count layoutType={type} type={'folder'} count={subFolders} />
+          <Count layoutType={type} type={'resource'} count={subResources} />
+        </CountContainer>
+        {menuItems && menuItems.length > 0 && <MenuButton alignRight size="small" menuItems={menuItems} />}
+      </MenuWrapper>
     </FolderWrapper>
   );
 };

package/src/Resource/BlockResource.tsx

@@ -25,27 +25,12 @@ import {
 import ContentLoader from '../ContentLoader';
 import { contentTypeMapping } from '../model/ContentType';
 
-interface BlockResourceProps {
-  id: string;
-  link: string;
-  tagLinkPrefix?: string;
-  title: string;
-  resourceImage: ResourceImageProps;
-  tags?: string[];
-  description?: string;
-  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  menuItems?: MenuItemProps[];
-  isLoading?: boolean;
-  targetBlank?: boolean;
-  resourceTypes?: { id: string; name: string }[];
-}
-
 const BlockElementWrapper = styled.div`
   display: flex;
   text-decoration: none;
   box-shadow: none;
   flex-direction: column;
-  max-width: 300px;
+  max-width: 450px;
   max-height: 240px;
   border: 1px solid ${colors.brand.light};
   border-radius: 2px;
@@ -83,14 +68,18 @@ const BlockDescription = styled.p`
 
 const RightRow = styled(Row)`
   justify-content: flex-end;
-  margin-bottom: -${spacing.xxsmall};
+  margin: 0 -${spacing.small} -${spacing.small} 0;
 `;
 
 const BlockInfoWrapper = styled.div`
   display: flex;
   flex-direction: column;
   padding: ${spacing.small};
-  gap: ${spacing.xxsmall};
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
 `;
 
 const ImageWrapper = styled.div`
@@ -99,11 +88,11 @@ const ImageWrapper = styled.div`
   justify-content: center;
   overflow: hidden;
   align-items: center;
-  aspect-ratio: 3/4;
   img {
     min-width: 100%;
   }
 `;
+
 interface BlockImageProps {
   image: ResourceImageProps;
   loading?: boolean;
@@ -142,6 +131,21 @@ const ResourceTypeAndTitleLoader = ({ children, loading }: LoaderProps) => {
   return <>{children}</>;
 };
 
+interface Props {
+  id: string;
+  link: string;
+  tagLinkPrefix?: string;
+  title: string;
+  resourceImage: ResourceImageProps;
+  tags?: string[];
+  description?: string;
+  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  menuItems?: MenuItemProps[];
+  isLoading?: boolean;
+  targetBlank?: boolean;
+  resourceTypes?: { id: string; name: string }[];
+}
+
 const BlockResource = ({
   id,
   link,
@@ -155,7 +159,7 @@ const BlockResource = ({
   headingLevel = 'h2',
   targetBlank,
   resourceTypes,
-}: BlockResourceProps) => {
+}: Props) => {
   const linkRef = useRef<HTMLAnchorElement>(null);
   const firstResourceType = resourceTypes?.[0].id ?? '';
   const Title = ResourceTitle.withComponent(headingLevel);
@@ -176,15 +180,17 @@ const BlockResource = ({
         />
       </ImageWrapper>
       <BlockInfoWrapper>
-        <ResourceTypeAndTitleLoader loading={isLoading}>
-          <ResourceTitleLink title={title} target={targetBlank ? '_blank' : undefined} to={link} ref={linkRef}>
-            <Title>{title}</Title>
-          </ResourceTitleLink>
-        </ResourceTypeAndTitleLoader>
-        <ResourceTypeList resourceTypes={resourceTypes} />
-        <BlockDescription>{description}</BlockDescription>
+        <ContentWrapper>
+          <ResourceTypeAndTitleLoader loading={isLoading}>
+            <ResourceTitleLink title={title} target={targetBlank ? '_blank' : undefined} to={link} ref={linkRef}>
+              <Title>{title}</Title>
+            </ResourceTitleLink>
+          </ResourceTypeAndTitleLoader>
+          <ResourceTypeList resourceTypes={resourceTypes} />
+          <BlockDescription>{description}</BlockDescription>
+        </ContentWrapper>
         <RightRow>
-          {tags && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}
+          {tags && tags.length > 0 && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}
           {menuItems && menuItems.length > 0 && <MenuButton alignRight size="small" menuItems={menuItems} />}
         </RightRow>
       </BlockInfoWrapper>

package/src/Resource/ListResource.tsx

@@ -15,7 +15,7 @@ import {
   CompressedTagList,
   ResourceImageProps,
   ResourceTitle,
-  ResourceTitleLink,
+  ResourceTitleLink as StyledLink,
   ResourceTypeList,
   StyledContentIconWrapper,
   LoaderProps,
@@ -24,30 +24,13 @@ import ContentLoader from '../ContentLoader';
 import ContentTypeBadge from '../ContentTypeBadge';
 import { contentTypeMapping } from '../model/ContentType';
 
-const StyledResourceDescription = styled.p`
-  grid-area: description;
-  line-clamp: 2;
-  line-height: 1em;
-  height: 3.1em;
-  margin: 0;
-  overflow: hidden;
-  ${fonts.sizes(16)};
-  text-overflow: ellipsis;
-  // Unfortunate css needed for multi-line text overflow ellipsis.
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-`;
-
-const ResourceWrapper = styled.div`
+const ListResourceWrapper = styled.div`
   flex: 1;
   display: grid;
   grid-template-columns: auto 1fr auto;
   grid-template-areas:
     'image  topicAndTitle   tags'
     'image  description     description';
-
   ${mq.range({ until: breakpoints.mobileWide })} {
     grid-template-columns: auto 1fr;
     grid-template-areas:
@@ -56,46 +39,31 @@ const ResourceWrapper = styled.div`
       'tags                 tags';
   }
 
-  cursor: pointer;
   padding: ${spacing.small};
+  column-gap: ${spacing.small};
+  cursor: pointer;
   border: 1px solid ${colors.brand.neutral7};
   border-radius: 2px;
-  gap: 0 ${spacing.small};
 
   &:hover {
     box-shadow: 1px 1px 6px 2px rgba(9, 55, 101, 0.08);
     transition-duration: 0.2s;
-    ${() => ResourceTitleLink} {
+    ${() => StyledLink} {
       color: ${colors.brand.primary};
       text-decoration: underline;
     }
   }
 `;
 
-const TagsandActionMenu = styled.div`
-  box-sizing: content-box;
-  padding: 2px;
-  grid-area: tags;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  overflow: hidden;
-  align-self: flex-start;
-  justify-self: flex-end;
-  justify-content: flex-end;
-
-  ${mq.range({ from: breakpoints.mobileWide })} {
-    margin-top: -${spacing.xsmall};
-    margin-right: -${spacing.xxsmall};
-  }
-`;
+interface StyledImageProps {
+  imageSize: 'normal' | 'compact';
+}
 
-const StyledImageWrapper = styled.div<StyledImageProps>`
+const ImageWrapper = styled.div<StyledImageProps>`
   grid-area: image;
   width: ${(p) => (p.imageSize === 'normal' ? '136px' : '56px')};
   ${mq.range({ until: breakpoints.mobileWide })} {
-    width: 54px;
-    height: 40px;
+    width: 56px;
   }
   overflow: hidden;
   border-radius: 2px;
@@ -110,29 +78,48 @@ const StyledImage = styled(Image)`
   aspect-ratio: 4/3;
 `;
 
+const StyledResourceDescription = styled.p`
+  grid-area: description;
+  line-clamp: 2;
+  line-height: 1em;
+  height: 3.1em;
+  margin: 0;
+  margin-top: ${spacing.xxsmall};
+  overflow: hidden;
+  ${fonts.sizes(16)};
+  text-overflow: ellipsis;
+  // Unfortunate css needed for multi-line text overflow ellipsis.
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+`;
+
+const TagsandActionMenu = styled.div`
+  box-sizing: content-box;
+  grid-area: tags;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  overflow: hidden;
+  align-self: flex-start;
+  justify-self: flex-end;
+  justify-content: flex-end;
+  margin: -${spacing.small} -${spacing.small} 0 0;
+  ${mq.range({ until: breakpoints.mobileWide })} {
+    margin: 0 -${spacing.small} -${spacing.small} 0;
+  }
+`;
+
 const TopicAndTitleWrapper = styled.div`
   grid-area: topicAndTitle;
-  margin-top: 2px;
 `;
 
-interface StyledImageProps {
-  imageSize: 'normal' | 'compact';
-}
-
-export interface ListResourceProps {
-  id: string;
-  link: string;
-  tagLinkPrefix?: string;
-  title: string;
-  resourceImage: ResourceImageProps;
-  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  resourceTypes: { id: string; name: string }[];
-  tags?: string[];
-  description?: string;
-  menuItems?: MenuItemProps[];
-  isLoading?: boolean;
-  targetBlank?: boolean;
-}
+const StyledMenuButton = styled(MenuButton)`
+  :only-child {
+    margin-left: ${spacing.small};
+  }
+`;
 
 interface ListResourceImageProps {
   resourceImage: ResourceImageProps;
@@ -170,7 +157,7 @@ const ListResourceImage = ({ resourceImage, loading, type, contentType }: ListRe
   );
 };
 
-const ResourceTypeAndTitleLoader = ({ loading, children }: LoaderProps) => {
+const TypeAndTitleLoader = ({ loading, children }: LoaderProps) => {
   if (loading) {
     return (
       <ContentLoader height={'40px'} width={'100%'} viewBox={null} preserveAspectRatio="none">
@@ -188,7 +175,7 @@ interface ResourceDescriptionProps {
   loading?: boolean;
 }
 
-const ResourceDescription = ({ description, loading }: ResourceDescriptionProps) => {
+const Description = ({ description, loading }: ResourceDescriptionProps) => {
   if (loading) {
     return (
       <ContentLoader height={'20px'} width={'100%'} viewBox={null} preserveAspectRatio="none">
@@ -199,6 +186,21 @@ const ResourceDescription = ({ description, loading }: ResourceDescriptionProps)
   return <StyledResourceDescription>{description}</StyledResourceDescription>;
 };
 
+export interface ListResourceProps {
+  id: string;
+  link: string;
+  tagLinkPrefix?: string;
+  title: string;
+  resourceImage: ResourceImageProps;
+  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  resourceTypes: { id: string; name: string }[];
+  tags?: string[];
+  description?: string;
+  menuItems?: MenuItemProps[];
+  isLoading?: boolean;
+  targetBlank?: boolean;
+}
+
 const ListResource = ({
   id,
   link,
@@ -225,29 +227,29 @@ const ListResource = ({
   };
 
   return (
-    <ResourceWrapper onClick={handleClick} id={id}>
-      <StyledImageWrapper imageSize={imageType}>
+    <ListResourceWrapper onClick={handleClick} id={id}>
+      <ImageWrapper imageSize={imageType}>
         <ListResourceImage
           resourceImage={resourceImage}
           loading={isLoading}
           type={imageType}
           contentType={contentTypeMapping[firstContentType] ?? contentTypeMapping['default']}
         />
-      </StyledImageWrapper>
+      </ImageWrapper>
       <TopicAndTitleWrapper>
-        <ResourceTypeAndTitleLoader loading={isLoading}>
-          <ResourceTitleLink to={link} target={targetBlank ? '_blank' : undefined} ref={linkRef}>
+        <TypeAndTitleLoader loading={isLoading}>
+          <StyledLink to={link} target={targetBlank ? '_blank' : undefined} ref={linkRef}>
             <Title>{title}</Title>
-          </ResourceTitleLink>
+          </StyledLink>
           <ResourceTypeList resourceTypes={resourceTypes} />
-        </ResourceTypeAndTitleLoader>
+        </TypeAndTitleLoader>
       </TopicAndTitleWrapper>
-      {showDescription && <ResourceDescription description={description} loading={isLoading} />}
+      {showDescription && <Description description={description} loading={isLoading} />}
       <TagsandActionMenu>
-        {tags && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}
-        {menuItems && menuItems.length > 0 && <MenuButton alignRight size="small" menuItems={menuItems} />}
+        {tags && tags.length > 0 && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}
+        {menuItems && menuItems.length > 0 && <StyledMenuButton alignRight size="small" menuItems={menuItems} />}
       </TagsandActionMenu>
-    </ResourceWrapper>
+    </ListResourceWrapper>
   );
 };