@ndla/ui 34.3.6 → 34.5.0

package/src/SearchTypeResult/SearchItem.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useRef } from 'react';
 import styled from '@emotion/styled';
 import parse from 'html-react-parser';
 
@@ -20,25 +20,19 @@ import ItemTopicHeader from './components/ItemTopicHeader';
 import ItemResourceHeader from './components/ItemResourceHeader';
 const { contentTypes } = constants;
 
-type ItemTypeProps = {
+interface ItemTypeProps {
   contentType?: ContentType;
   isTopic?: boolean;
-};
+}
 
-const Container = styled.div`
+const Container = styled.article`
+  cursor: pointer;
+  position: relative;
   display: flex;
-  height: 400px;
-  align-items: center;
-  justify-content: center;
-`;
-
-const ItemWrapper = styled.div`
   flex-direction: column;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  border: 1px solid ${colors.brand.neutral7};
   border-radius: 5px;
+  border: 1px solid ${colors.brand.neutral7};
+
   img {
     transition: all ${animations.durations.fast} ease-in-out;
   }
@@ -49,43 +43,36 @@ const ItemWrapper = styled.div`
   }
 `;
 
-const ItemLink = styled(SafeLink)`
-  box-shadow: none;
-  color: unset;
-  text-decoration: none;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  min-height: 0;
-  flex: 1;
-`;
-
-const TextWrapper = styled.div`
-  padding: 0 ${spacing.normal} ${spacing.small};
-`;
-
-const ItemTitleWrapper = styled.div<ItemTypeProps>`
-  margin-top: ${spacing.small};
-`;
-
 const ItemTitle = styled.h3<ItemTypeProps>`
+  display: inline;
   ${fonts.sizes('24px', '28px')};
   color: ${colors.brand.primary};
-  ${(props) => props.isTopic && `margin-bottom: ${spacing.small};`};
+  margin-bottom: ${(props) => props.isTopic && spacing.small};
   font-weight: ${fonts.weight.semibold};
-  overflow-wrap: anywhere;
-  display: inline;
-  ${ItemWrapper}:hover & {
-    box-shadow: inset 0 -1px;
-    background-color: transparent;
+  overflow-wrap: break-word;
+  margin: 0;
+  ${Container}:hover & {
+    box-shadow: 0 -1px inset;
+  }
+`;
+
+const StyledLink = styled(SafeLink)`
+  box-shadow: none;
+  color: ${colors.brand.primary};
+
+  :after {
+    content: '';
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
   }
 `;
+
 const ItemText = styled.div<ItemTypeProps>`
-  overflow: hidden;
   ${fonts.sizes('16px', '24px')};
-  word-break: break-word;
-  overflow-wrap: anywhere;
-  margin-top: ${spacing.small};
   ${(props) =>
     props.isTopic &&
     `
@@ -93,12 +80,14 @@ const ItemText = styled.div<ItemTypeProps>`
     `};
 `;
 
-const ContextWrapper = styled.div`
-  background: white;
-  padding: 0 ${spacing.normal} ${spacing.small};
+const ContentWrapper = styled.main`
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.small};
+  padding: ${spacing.small} ${spacing.normal};
 `;
 
-export type SearchItemProps = {
+export interface SearchItemProps {
   id: string | number;
   title: string;
   url: string;
@@ -108,44 +97,39 @@ export type SearchItemProps = {
   labels?: string[];
   type?: ContentType;
   children?: ReactNode;
-};
-export type SearchItemType = {
+}
+
+export interface SearchItemType {
   item: SearchItemProps;
   type?: ContentType;
-};
+}
+
 const SearchItem = ({ item, type }: SearchItemType) => {
-  const { title, url, ingress, contexts, img = null, labels = [], children } = item;
+  const { title, url, ingress, contexts = [], img = null, labels = [] } = item;
+  const linkRef = useRef<HTMLAnchorElement>(null);
 
   const isTopic = type === contentTypes.TOPIC || type === contentTypes.MULTIDISCIPLINARY_TOPIC;
 
   return (
     <Container>
-      <ItemWrapper>
-        <ItemLink to={url}>
-          {isTopic ? (
-            <ItemTopicHeader image={img} type={type}>
-              <ItemTitleWrapper isTopic>
-                <ItemTitle isTopic>{title}</ItemTitle>
-              </ItemTitleWrapper>
-              <ItemText isTopic>{parse(ingress)}</ItemText>
-            </ItemTopicHeader>
-          ) : (
-            <>
-              <ItemResourceHeader labels={labels} img={img} type={type} />
-              <TextWrapper>
-                <ItemTitleWrapper>
-                  <ItemTitle>{title}</ItemTitle>
-                </ItemTitleWrapper>
-                <ItemText>{parse(ingress)}</ItemText>
-              </TextWrapper>
-            </>
-          )}
-          <ContextWrapper>
-            {contexts && contexts.length > 0 && <ItemContexts contexts={contexts} id={item.id} title={item.title} />}
-          </ContextWrapper>
-        </ItemLink>
-        {children}
-      </ItemWrapper>
+      {isTopic ? (
+        <ItemTopicHeader image={img} type={type}>
+          <StyledLink to={url} ref={linkRef}>
+            <ItemTitle>{title}</ItemTitle>
+          </StyledLink>
+        </ItemTopicHeader>
+      ) : (
+        <ItemResourceHeader labels={labels} img={img} type={type} />
+      )}
+      <ContentWrapper>
+        {!isTopic && (
+          <StyledLink to={url} ref={linkRef}>
+            <ItemTitle>{title}</ItemTitle>
+          </StyledLink>
+        )}
+        <ItemText isTopic={isTopic}>{parse(ingress)}</ItemText>
+        {contexts.length > 0 && <ItemContexts contexts={contexts} id={item.id} title={item.title} />}
+      </ContentWrapper>
     </Container>
   );
 };

package/src/SearchTypeResult/SearchItems.tsx

@@ -8,6 +8,7 @@
 
 import React, { memo } from 'react';
 import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 import { breakpoints, mq, spacing } from '@ndla/core';
 import SearchItem, { SearchItemProps } from './SearchItem';
 import { ContentType } from './SearchTypeResult';
@@ -18,41 +19,49 @@ const Wrapper = styled.div`
   position: relative;
 `;
 
-type ContainerProps = {
+interface ContainerProps {
   viewType: Props['viewType'];
-};
+}
 
-const Container = styled.div<ContainerProps>`
+const Container = styled.ul<ContainerProps>`
   display: grid;
+  align-items: flex-start;
+  list-style: none;
   row-gap: ${spacing.normal};
   grid-template-columns: repeat(1, 1fr);
 
   ${(props) =>
     props.viewType === 'grid' &&
-    `
-          ${mq.range({ from: breakpoints.tablet })} {
-    column-gap: ${spacing.normal};
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  ${mq.range({ from: breakpoints.desktop })} {
-    grid-template-columns: repeat(3, 1fr);
-  }`}
+    css`
+      ${mq.range({ from: breakpoints.tablet })} {
+        column-gap: ${spacing.normal};
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      ${mq.range({ from: breakpoints.desktop })} {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    `}
 `;
 
-type Props = {
+interface Props {
   items: SearchItemProps[];
   type?: ContentType;
   viewType?: 'grid' | 'list';
-};
+}
+
 const SearchItems = ({ items, type, viewType = 'grid' }: Props) => {
   return (
     <Wrapper>
-      <Container viewType={viewType}>
+      <Container aria-labelledby={`searchitem-header-${type}`} viewType={viewType}>
         {items.map((item) => {
           const contentType = type || item.type;
           const Component = viewType === 'list' ? SearchItemList : SearchItem;
-          return <Component item={item} key={`${item.id}`} type={contentType} />;
+          return (
+            <li key={`${item.id}`}>
+              <Component item={item} type={contentType} />
+            </li>
+          );
         })}
       </Container>
     </Wrapper>

package/src/SearchTypeResult/SearchTypeHeader.tsx

@@ -42,10 +42,13 @@ const BadgeWrapper = styled.span`
   margin-right: ${spacing.small};
 `;
 
-const SubjectName = styled.span`
+const SubjectName = styled.div`
+  display: flex;
+  gap: ${spacing.small};
   ${fonts.sizes('18px', '24px')};
   margin: 2px 0;
-  b {
+  h2 {
+    margin: 0;
     ${fonts.sizes('18px', '24px')};
     margin-right: 4px;
   }
@@ -97,7 +100,9 @@ const SearchTypeHeader = ({ filters = [], onFilterClick, totalCount, type }: Pro
             </BadgeWrapper>
           )}
           <SubjectName>
-            <b>{type ? t(`contentTypes.${type}`) : t(`searchPage.resultType.allContentTypes`)}</b>{' '}
+            <h2 id={`searchitem-header-${type}`}>
+              {type ? t(`contentTypes.${type}`) : t(`searchPage.resultType.allContentTypes`)}
+            </h2>
             {totalCount && <Count>{t(`searchPage.resultType.hits`, { count: totalCount })}</Count>}
           </SubjectName>
         </TypeWrapper>
@@ -107,6 +112,7 @@ const SearchTypeHeader = ({ filters = [], onFilterClick, totalCount, type }: Pro
           {filters.map((option: FilterOptionsType) => (
             <CategoryTypeButtonWrapper key={option.id}>
               <Button
+                aria-current={option.active}
                 size="xsmall"
                 borderShape="rounded"
                 greyLighter={!option.active}

package/src/SearchTypeResult/SearchTypeResult.tsx

@@ -16,7 +16,7 @@ import SearchItems from './SearchItems';
 import { SearchItemProps } from './SearchItem';
 import ResultNavigation, { PaginationType } from './ResultNavigation';
 
-const Wrapper = styled.div`
+const Wrapper = styled.section`
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -81,7 +81,7 @@ const SearchTypeResult = ({
     )}
     <SearchTypeHeader onFilterClick={onFilterClick} filters={filters} totalCount={totalCount} type={type} />
     <SearchItems items={items} type={type} viewType={viewType} />
-    {pagination && <ResultNavigation {...pagination} />}
+    {pagination && <ResultNavigation {...pagination} type={type} />}
     {children}
   </Wrapper>
 );

package/src/SearchTypeResult/components/ItemContexts.tsx

@@ -11,8 +11,8 @@ import SafeLink from '@ndla/safelink';
 import { Additional, Core } from '@ndla/icons/common';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import Button from '@ndla/button';
-import Modal, { ModalCloseButton } from '@ndla/modal';
+import { ButtonV2 } from '@ndla/button';
+import { ModalV2, ModalCloseButton } from '@ndla/modal';
 import { useTranslation } from 'react-i18next';
 
 const BreadcrumbPath = styled.div`
@@ -24,7 +24,9 @@ const BreadcrumbPath = styled.div`
   }
 `;
 
-const ModalButton = styled(Button)`
+const ModalButton = styled(ButtonV2)`
+  z-index: 1;
+  position: relative;
   ${fonts.sizes('14px', '20px')};
   box-shadow: none;
   &:hover {
@@ -97,19 +99,17 @@ const ItemContexts = ({ contexts, id, title }: ItemContextsType) => {
     <Breadcrumb breadcrumb={mainContext.breadcrumb}>
       &nbsp;
       {contexts.length > 1 && (
-        <Modal
+        <ModalV2
           label={t('searchPage.contextModal.ariaLabel')}
           activateButton={
-            <ModalButton link>
+            <ModalButton variant="link">
               {t('searchPage.contextModal.button', {
                 count: contexts.length - 1,
               })}
             </ModalButton>
           }
           animation="subtle"
-          animationDuration={50}
-          backgroundColor="white"
-          size="medium">
+          animationDuration={50}>
           {(onClose: () => void) => (
             <>
               <ModalHeader>
@@ -130,7 +130,7 @@ const ItemContexts = ({ contexts, id, title }: ItemContextsType) => {
               </ModalContent>
             </>
           )}
-        </Modal>
+        </ModalV2>
       )}
     </Breadcrumb>
   );

package/src/SearchTypeResult/components/ItemResourceHeader.tsx

@@ -18,29 +18,20 @@ import { SearchItemType } from '../SearchItem';
 import resourceTypeColor from '../../utils/resourceTypeColor';
 import ContentTypeBadge from '../../ContentTypeBadge';
 
-type ItemTypeProps = {
+interface ItemTypeProps {
   contentType?: ContentType;
-};
+}
 
 const ImageElement = styled.img`
   width: 100%;
   height: 100%;
   object-fit: cover;
-`;
-
-const ImageWrapper = styled.div`
-  flex: 1;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
   overflow: hidden;
 `;
 
 const NoImageElement = styled.div<ItemTypeProps>`
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
   flex: 1;
   background: ${(props) => props.contentType && `${resourceTypeColor(props.contentType)}`};
-  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -59,7 +50,6 @@ const NoImageElement = styled.div<ItemTypeProps>`
 const ContentTypeWrapper = styled.div<ItemTypeProps>`
   height: 48px;
   background: ${(props) => props.contentType && `${resourceTypeColor(props.contentType)}`};
-  flex: 0 0 auto;
   position: relative;
   display: flex;
   align-items: center;
@@ -69,47 +59,59 @@ const ContentTypeWrapper = styled.div<ItemTypeProps>`
 `;
 
 const ContentTypeIcon = styled.span<ItemTypeProps>`
+  display: flex;
   position: absolute;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='23' viewBox='17 0 78 23' fill='none'%3E%3Cpath d='M35.6874 10.8284C37.0999 8.9889 38.405 7.28934 40 6C44.8452 2.08335 48.9078 0 56 0C63.0922 0 67.6548 2.5833 72.5 6.49995C74.0499 7.75284 75.2937 9.39082 76.6385 11.1617C80.0028 15.5921 83.9988 20.8545 95 23H17C27.9865 20.8573 32.1701 15.409 35.6874 10.8284ZM352' fill='${(
-    props,
-  ) => props.contentType && `${encodeURIComponent(resourceTypeColor(props.contentType))}`}'/%3E%3C/svg%3E");
-  background-position: top;
-  background-repeat: no-repeat;
-  left: 17px;
   top: -23px;
-  height: 45px;
-  width: 78px;
-  display: flex;
+  margin-left: ${spacing.small};
   justify-content: center;
-  align-items: center;
-  z-index: 2;
+  ::before {
+    content: '';
+    position: absolute;
+    height: 23px;
+    width: 78px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='23' viewBox='17 0 78 23' fill='none'%3E%3Cpath d='M35.6874 10.8284C37.0999 8.9889 38.405 7.28934 40 6C44.8452 2.08335 48.9078 0 56 0C63.0922 0 67.6548 2.5833 72.5 6.49995C74.0499 7.75284 75.2937 9.39082 76.6385 11.1617C80.0028 15.5921 83.9988 20.8545 95 23H17C27.9865 20.8573 32.1701 15.409 35.6874 10.8284ZM352' fill='${(
+      props,
+    ) => props.contentType && `${encodeURIComponent(resourceTypeColor(props.contentType))}`}'/%3E%3C/svg%3E");
+  }
+`;
+
+const StyledContentTypeBadge = styled(ContentTypeBadge)`
+  z-index: 1;
+  margin-top: ${spacing.xxsmall};
+
   svg {
     width: 20px;
     height: 20px;
   }
 `;
 
-type Props = {
+const Wrapper = styled.header`
+  display: grid;
+  grid-template-rows: 1fr auto;
+  overflow: hidden;
+  flex-direction: column;
+  height: 180px;
+`;
+
+interface Props {
   labels: SearchItemType['item']['labels'];
   img?: SearchItemType['item']['img'] | null;
   type?: ContentType;
-};
+}
 
 const ItemResourceHeader = ({ labels = [], img, type }: Props) => {
   const { t } = useTranslation();
   return (
-    <>
+    <Wrapper>
       {img ? (
-        <ImageWrapper>
-          <ImageElement src={img.url} alt={img.alt} />
-        </ImageWrapper>
+        <ImageElement src={img.url} alt={img.alt} />
       ) : (
         <NoImageElement contentType={type}>{type && <ContentTypeBadge type={type} border={false} />}</NoImageElement>
       )}
       <ContentTypeWrapper className="resource-type-wrapper" contentType={type}>
         {img && type && (
           <ContentTypeIcon className="resource-icon-wrapper" contentType={type}>
-            <ContentTypeBadge type={type} border={false} />
+            <StyledContentTypeBadge type={type} border={false} />
           </ContentTypeIcon>
         )}
         {type && t(`contentTypes.${type}`)}
@@ -124,7 +126,7 @@ const ItemResourceHeader = ({ labels = [], img, type }: Props) => {
           </>
         )}
       </ContentTypeWrapper>
-    </>
+    </Wrapper>
   );
 };
 

package/src/SearchTypeResult/components/ItemTopicHeader.tsx

@@ -15,11 +15,8 @@ import { SearchItemType } from '../SearchItem';
 import ContentTypeBadge from '../../ContentTypeBadge';
 import { ContentType } from '../SearchTypeResult';
 
-const Wrapper = styled.div`
-  padding: ${spacing.small} ${spacing.normal};
-  position: relative;
-  min-height: 0;
-  flex: 1;
+const Wrapper = styled.header`
+  padding: ${spacing.small} ${spacing.normal} 0;
 `;
 
 const Label = styled.div`
@@ -28,7 +25,7 @@ const Label = styled.div`
   height: 26px;
   display: flex;
   align-items: center;
-  margin-top: ${spacing.small};
+  margin: ${spacing.small} 0;
 
   .c-content-type-badge {
     width: 26px;
@@ -46,15 +43,11 @@ const Label = styled.div`
 const TopicHeaderVisualElementWrapper = styled.div`
   float: right;
   margin-left: ${spacing.small};
-  position: relative;
-  width: 112px;
-  height: 112px;
+  width: 110px;
+  height: 110px;
   display: flex;
-  justify-content: center;
-  align-items: center;
   overflow: hidden;
   border-radius: 50%;
-  -webkit-mask-image: -webkit-radial-gradient(white, black);
 `;
 
 const TopicHeaderImage = styled.img`
@@ -64,18 +57,19 @@ const TopicHeaderImage = styled.img`
   max-width: unset;
 `;
 
-type Props = {
+interface Props {
   children: ReactNode;
   image?: SearchItemType['item']['img'] | null;
   type?: ContentType;
-};
+}
+
 const ItemTopicHeader = ({ children, image, type }: Props) => {
   const { t } = useTranslation();
   return (
     <Wrapper>
       {image && (
         <TopicHeaderVisualElementWrapper>
-          <TopicHeaderImage className="topic-header-image" src={image.url} alt={image.alt} />
+          <TopicHeaderImage className="topic-header-image" src={image.url} alt="" />
         </TopicHeaderVisualElementWrapper>
       )}
       <Label className="topic-label">

package/src/locale/messages-en.ts

@@ -335,7 +335,7 @@ const messages = {
       multidisciplinarySubjects: 'Multidisciplinary subjects',
       toolboxStudents: 'Toolbox - for students',
       toolboxTeachers: 'Toolbox - for teachers',
-      film: 'NDLA Film',
+      film: 'NDLA film',
       about: {
         title: 'About NDLA',
         numbers: 'Numbers and reports',
@@ -793,7 +793,7 @@ const messages = {
     loadingMovies: 'Loading movies..',
     subjectsInMovies: 'Subjects in film',
     about: {
-      heading: 'About NDLA Film',
+      heading: 'About NDLA film',
       more: 'Read more about NDLA film',
       text: 'Ndla film er ei nettbasert filmtjeneste for elever og lærere i videregående skole. Her finn du spillefilmer, kortfilmer, dokumentarfilmer og TV-serier.',
     },
@@ -835,7 +835,7 @@ const messages = {
     },
     allMovieGroupTitleLabel: 'Movies starting with {{letter}}',
     moreAboutNdlaFilm: {
-      header: 'NDLA Film',
+      header: 'NDLA film',
       firstParagraph:
         "The films in the film service are taken from Norwegian and international film heritage and are linked to curricula in several subjects. They have been selected by NDLA's editors in collaboration with Norgesfilm AS.",
       secondParagraph:

package/src/locale/messages-nb.ts

@@ -334,7 +334,7 @@ const messages = {
       multidisciplinarySubjects: 'Tverrfaglige tema',
       toolboxStudents: 'Verktøykassa - for elever',
       toolboxTeachers: 'Verktøykassa - for lærere',
-      film: 'NDLA Film',
+      film: 'NDLA film',
       about: {
         title: 'Om NDLA',
         numbers: 'Tall og rapporter',
@@ -792,7 +792,7 @@ const messages = {
     loadingMovies: 'Henter filmer...',
     subjectsInMovies: 'Emner i film',
     about: {
-      heading: 'Om NDLA Film',
+      heading: 'Om NDLA film',
       more: 'Les mer om NDLA film',
       text: 'Ndla film er en nettbasert filmtjeneste for elever og lærere i videregående skole. Her funner du spillefilmer, kortfilmer, dokumentarfilmer og TV-serier.',
     },
@@ -834,7 +834,7 @@ const messages = {
     },
     allMovieGroupTitleLabel: 'Filmer som starter på {{letter}}',
     moreAboutNdlaFilm: {
-      header: 'NDLA Film',
+      header: 'NDLA film',
       firstParagraph:
         'Filmene i filmtjenesten er hentet fra norsk og internasjonal filmarv og kobles mot læreplaner i flere fag. De er valgt ut av NDLAs redaksjoner i samarbeid med Norgesfilm AS.',
       secondParagraph:

package/src/locale/messages-nn.ts

@@ -334,7 +334,7 @@ const messages = {
       multidisciplinarySubjects: 'Tverrfaglege tema',
       toolboxStudents: 'Verktøykassa - for elevar',
       toolboxTeachers: 'Verktøykassa - for lærarar',
-      film: 'NDLA Film',
+      film: 'NDLA film',
       about: {
         title: 'Om NDLA',
         numbers: 'Tall og rapporter',
@@ -792,7 +792,7 @@ const messages = {
     loadingMovies: 'Hentar filmar...',
     subjectsInMovies: 'Emne i film',
     about: {
-      heading: 'Om NDLA Film',
+      heading: 'Om NDLA film',
       more: 'Les meir om NDLA film',
       text: 'NDLA film er ei nettbasert filmteneste for elevar og lærarar i vidaregåande skule. Her finn du spelefilmar, kortfilmar, dokumentarfilmar og TV-seriar.',
     },
@@ -834,7 +834,7 @@ const messages = {
     },
     allMovieGroupTitleLabel: 'Filmar som startar på {{letter}}',
     moreAboutNdlaFilm: {
-      header: 'NDLA Film',
+      header: 'NDLA film',
       firstParagraph:
         'Filmane i filmtenesta er henta frå norsk og internasjonal filmarv og er kopla mot læreplanar i fleire fag. Dei er valde av redaksjonane til NDLA i samarbeid med Norgesfilm AS.',
       secondParagraph: