@ndla/ui 30.1.0 → 30.2.1

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

package/src/Resource/resourceComponents.tsx

@@ -7,7 +7,7 @@
  */
 
 import styled from '@emotion/styled';
-import { colors, fonts, misc, spacing } from '@ndla/core';
+import { colors, fonts, spacing } from '@ndla/core';
 import React, { MouseEvent, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MenuButton } from '@ndla/button';
@@ -38,7 +38,7 @@ export const ResourceTitle = styled.h2`
   line-clamp: 1;
   -webkit-box-orient: vertical;
   grid-area: resourceTitle;
-  ${fonts.sizes('18px', '18px')};
+  ${fonts.sizes('16px', '20px')};
 `;
 
 const StyledTagList = styled.ul`
@@ -48,6 +48,10 @@ const StyledTagList = styled.ul`
   padding: 2px;
   gap: ${spacing.xsmall};
   overflow: hidden;
+  padding-right: 14px;
+  :only-child {
+    margin-right: ${spacing.small};
+  }
 `;
 
 const StyledTagListElement = styled.li`
@@ -60,6 +64,8 @@ const StyledSafeLink = styled(SafeLink)`
   align-items: center;
   box-shadow: none;
   color: ${colors.brand.grey};
+  min-height: 44px;
+  min-width: 44px;
   &:hover {
     color: ${colors.brand.primary};
   }
@@ -94,12 +100,9 @@ export const Row = styled.div`
 `;
 
 const TagCounterWrapper = styled.span`
-  color: ${colors.brand.secondary};
-  box-shadow: none;
-  margin: 0;
+  display: flex;
   font-weight: ${fonts.weight.semibold};
   ${fonts.sizes('14px', '14px')};
-  padding: 5px;
 `;
 
 export interface ContentIconProps {
@@ -149,15 +152,6 @@ interface CompressedTagListProps {
   tagLinkPrefix?: string;
 }
 
-const TagMenuButton = styled(MenuButton)`
-  &:hover,
-  &:active,
-  &:focus {
-    transition: ${misc.transition.default};
-    border-radius: 100%;
-    background-color: ${colors.brand.light};
-  }
-`;
 export const CompressedTagList = ({ tags, tagLinkPrefix }: CompressedTagListProps) => {
   const navigate = useNavigate();
   const { t } = useTranslation();
@@ -175,12 +169,13 @@ export const CompressedTagList = ({ tags, tagLinkPrefix }: CompressedTagListProp
     <>
       <TagList tagLinkPrefix={tagLinkPrefix} tags={visibleTags} />
       {remainingTags.length > 0 && (
-        <TagMenuButton
-          hideMenuIcon={true}
+        <MenuButton
+          size="small"
+          menuIcon={<TagCounterWrapper>{`+${remainingTags.length}`}</TagCounterWrapper>}
           menuItems={remainingTags}
-          aria-label={t('myNdla.moreTags', { count: remainingTags.length })}>
-          <TagCounterWrapper>{`+${remainingTags.length}`}</TagCounterWrapper>
-        </TagMenuButton>
+          alignRight
+          aria-label={t('myNdla.moreTags', { count: remainingTags.length })}
+        />
       )}
     </>
   );

package/src/SearchTypeResult/ActiveFilterContent.tsx

@@ -11,7 +11,7 @@ import styled from '@emotion/styled';
 import { Cross } from '@ndla/icons/action';
 import { spacing, fonts } from '@ndla/core';
 import Button from '@ndla/button';
-import { WithTranslation, withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 export const StyledActiveFilterTitle = styled.span`
   white-space: nowrap;
@@ -35,18 +35,21 @@ type Props = {
   onFilterRemove: (value: string, name: string) => void;
 };
 
-const ActiveFilterContent = ({ filter, onFilterRemove, t }: Props & WithTranslation) => (
-  <StyledButton
-    aria-label={t('searchPage.searchFilterMessages.removeFilter', {
-      filterName: filter.title,
-    })}
-    type="button"
-    size="normal"
-    borderShape="rounded"
-    onClick={() => onFilterRemove(filter.value, filter.name)}>
-    <StyledActiveFilterTitle>{filter.title}</StyledActiveFilterTitle>
-    <Cross />
-  </StyledButton>
-);
+const ActiveFilterContent = ({ filter, onFilterRemove }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <StyledButton
+      aria-label={t('searchPage.searchFilterMessages.removeFilter', {
+        filterName: filter.title,
+      })}
+      type="button"
+      size="normal"
+      borderShape="rounded"
+      onClick={() => onFilterRemove(filter.value, filter.name)}>
+      <StyledActiveFilterTitle>{filter.title}</StyledActiveFilterTitle>
+      <Cross />
+    </StyledButton>
+  );
+};
 
-export default withTranslation()(ActiveFilterContent);
+export default ActiveFilterContent;

package/src/SearchTypeResult/SearchHeader.tsx

@@ -6,7 +6,7 @@
  *
  */
 import React, { FormEvent, useEffect, useState } from 'react';
-import { WithTranslation, withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
 import Button from '@ndla/button';
@@ -84,8 +84,8 @@ const SearchHeader = ({
   filters,
   competenceGoals,
   noResults,
-  t,
-}: Props & WithTranslation) => {
+}: Props) => {
+  const { t } = useTranslation();
   const [isNarrowScreen, setIsNarrowScreen] = useState<boolean | undefined>();
 
   useEffect(() => {
@@ -158,4 +158,4 @@ const SearchHeader = ({
   );
 };
 
-export default withTranslation()(SearchHeader);
+export default SearchHeader;

package/src/SearchTypeResult/SearchNotionsResult.tsx

@@ -11,7 +11,6 @@ import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { fonts, mq, breakpoints, spacing, colors } from '@ndla/core';
 import { ModalCloseButton } from '@ndla/modal';
-import { withTranslation, WithTranslation } from 'react-i18next';
 
 const Wrapper = styled.div`
   display: flex;
@@ -59,7 +58,7 @@ type Props = {
   children: ReactNode;
 };
 
-const SearchNotionsResult = ({ totalCount, onRemove, children }: Props & WithTranslation) => {
+const SearchNotionsResult = ({ totalCount, onRemove, children }: Props) => {
   const { t } = useTranslation();
   return (
     <Wrapper>
@@ -75,4 +74,4 @@ const SearchNotionsResult = ({ totalCount, onRemove, children }: Props & WithTra
   );
 };
 
-export default withTranslation()(SearchNotionsResult);
+export default SearchNotionsResult;

package/src/SearchTypeResult/SearchTypeHeader.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import React, { MouseEvent, memo } from 'react'; // useMemo , { Children }
+import React, { MouseEvent, memo } from 'react';
 import styled from '@emotion/styled';
 import Button from '@ndla/button';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
-import { withTranslation, WithTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { Cross } from '@ndla/icons/action';
 import ContentTypeBadge from '../ContentTypeBadge';
 import { ContentType } from './SearchTypeResult';
@@ -85,47 +85,50 @@ type Props = {
   totalCount: number;
   type?: ContentType;
 };
-const SearchTypeHeader = ({ filters = [], onFilterClick, totalCount, type, t }: Props & WithTranslation) => (
-  <Wrapper>
-    <HeaderWrapper>
-      <TypeWrapper>
-        {type && (
-          <BadgeWrapper>
-            <ContentTypeBadge type={type} title={t(`contentTypes.${type}`)} background border={false} size="large" />
-          </BadgeWrapper>
-        )}
-        <SubjectName>
-          <b>{type ? t(`contentTypes.${type}`) : t(`searchPage.resultType.allContentTypes`)}</b>{' '}
-          {totalCount && <Count>{t(`searchPage.resultType.hits`, { count: totalCount })}</Count>}
-        </SubjectName>
-      </TypeWrapper>
-    </HeaderWrapper>
-    {filters.length > 0 && (
-      <CategoryItems>
-        {filters.map((option: FilterOptionsType) => (
-          <CategoryTypeButtonWrapper key={option.id}>
-            <Button
-              size="xsmall"
-              borderShape="rounded"
-              greyLighter={!option.active}
-              onClick={(e: MouseEvent<HTMLButtonElement>) => {
-                if (e.currentTarget && option.active) {
-                  e.currentTarget.blur();
-                }
-                onFilterClick?.(option.id);
-              }}>
-              {option.name}
-              {option.active && (
-                <CategoryTypeCrossWrapper>
-                  <Cross />
-                </CategoryTypeCrossWrapper>
-              )}
-            </Button>
-          </CategoryTypeButtonWrapper>
-        ))}
-      </CategoryItems>
-    )}
-  </Wrapper>
-);
+const SearchTypeHeader = ({ filters = [], onFilterClick, totalCount, type }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <Wrapper>
+      <HeaderWrapper>
+        <TypeWrapper>
+          {type && (
+            <BadgeWrapper>
+              <ContentTypeBadge type={type} title={t(`contentTypes.${type}`)} background border={false} size="large" />
+            </BadgeWrapper>
+          )}
+          <SubjectName>
+            <b>{type ? t(`contentTypes.${type}`) : t(`searchPage.resultType.allContentTypes`)}</b>{' '}
+            {totalCount && <Count>{t(`searchPage.resultType.hits`, { count: totalCount })}</Count>}
+          </SubjectName>
+        </TypeWrapper>
+      </HeaderWrapper>
+      {filters.length > 0 && (
+        <CategoryItems>
+          {filters.map((option: FilterOptionsType) => (
+            <CategoryTypeButtonWrapper key={option.id}>
+              <Button
+                size="xsmall"
+                borderShape="rounded"
+                greyLighter={!option.active}
+                onClick={(e: MouseEvent<HTMLButtonElement>) => {
+                  if (e.currentTarget && option.active) {
+                    e.currentTarget.blur();
+                  }
+                  onFilterClick?.(option.id);
+                }}>
+                {option.name}
+                {option.active && (
+                  <CategoryTypeCrossWrapper>
+                    <Cross />
+                  </CategoryTypeCrossWrapper>
+                )}
+              </Button>
+            </CategoryTypeButtonWrapper>
+          ))}
+        </CategoryItems>
+      )}
+    </Wrapper>
+  );
+};
 
-export default memo(withTranslation()(SearchTypeHeader));
+export default memo(SearchTypeHeader);