@ndla/ui 4.3.0 → 5.0.0

package/src/SearchTypeResult/SearchHeader.tsx

@@ -5,19 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-
-import React, { FormEvent } from 'react';
+import React, { FormEvent, useEffect, useState } from 'react';
+import { WithTranslation, withTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
-
 import Button from '@ndla/button';
-import { WithTranslation, withTranslation } from 'react-i18next';
-import { FilterProps } from './ActiveFilterContent';
-import ActiveFilters from './ActiveFilters';
+
 import SearchFieldHeader from './SearchFieldHeader';
-import PopupFilter, { PopupFilterProps } from './PopupFilter';
 import { CompetenceGoalsItemType } from '../types';
 import CompetenceGoalItem from '../CompetenceGoalTab/CompetenceGoalItem';
+import SubjectFilters, { SubjectFilterProps } from './components/SubjectFilters';
 
 const Wrapper = styled.div`
   margin-top: ${spacing.normal};
@@ -58,13 +55,6 @@ const PhraseText = styled.div`
 `;
 const PhraseSuggestionText = styled.div``;
 
-const HideOnDesktopWrapper = styled.div`
-  display: none;
-  ${mq.range({ until: breakpoints.desktop })} {
-    display: block;
-  }
-`;
-
 const GoalsLabel = styled.div`
   ${fonts.sizes('16px', '32px')};
   text-transform: uppercase;
@@ -75,11 +65,8 @@ type Props = {
   searchPhraseSuggestion?: string;
   searchPhraseSuggestionOnClick?: () => void;
   searchValue?: string;
-  filters?: PopupFilterProps;
-  activeFilters?: {
-    filters: FilterProps[];
-    onFilterRemove: (value: string, name: string) => void;
-  };
+  filters: SubjectFilterProps['filters'];
+  activeFilters?: SubjectFilterProps['activeFilters'];
   competenceGoals?: CompetenceGoalsItemType[];
   onSearchValueChange: (value: string) => void;
   onSubmit: (event: FormEvent<HTMLFormElement>) => void;
@@ -99,9 +86,27 @@ const SearchHeader = ({
   noResults,
   t,
 }: Props & WithTranslation) => {
-  const phraseText = noResults
-    ? t('searchPage.noHitsShort', { query: searchPhrase })
-    : `${t('searchPage.resultType.showingSearchPhrase')} ${searchPhrase}`;
+  const [isNarrowScreen, setIsNarrowScreen] = useState<boolean | undefined>();
+
+  useEffect(() => {
+    const isNarrowScreenMatch = window.matchMedia(`(max-width: ${breakpoints.desktop})`);
+    const handleChange = (e: MediaQueryListEvent | MediaQueryList) => {
+      setIsNarrowScreen(e.matches);
+    };
+    isNarrowScreenMatch.addEventListener('change', handleChange);
+    handleChange(isNarrowScreenMatch);
+    return () => {
+      isNarrowScreenMatch.removeEventListener('change', handleChange);
+    };
+  }, []);
+
+  const phraseText = noResults ? (
+    t('searchPage.noHitsShort', { query: searchPhrase })
+  ) : (
+    <>
+      {t('searchPage.resultType.showingSearchPhrase')} <b>&ldquo;{searchPhrase}&rdquo;</b>
+    </>
+  );
   const removeFilterSuggestion =
     noResults && activeFilters?.filters.length ? t('searchPage.removeFilterSuggestion') : undefined;
   return (
@@ -113,6 +118,7 @@ const SearchHeader = ({
           onSubmit={onSubmit}
           activeFilters={activeFilters}
           filters={filters}
+          isNarrowScreen={isNarrowScreen}
         />
       </SearchInputWrapper>
       <PhraseWrapper>
@@ -126,7 +132,7 @@ const SearchHeader = ({
           <PhraseSuggestionText>
             {t('searchPage.resultType.searchPhraseSuggestion')}{' '}
             <Button link onClick={searchPhraseSuggestionOnClick}>
-              {searchPhraseSuggestion}
+              [{searchPhraseSuggestion}]
             </Button>
           </PhraseSuggestionText>
         )}
@@ -145,14 +151,8 @@ const SearchHeader = ({
           </CompetenceGoalsWrapper>
         )}
       </PhraseWrapper>
-      {activeFilters && (
-        <HideOnDesktopWrapper>
-          <ActiveFilters
-            {...activeFilters}
-            showOnSmallScreen
-            customElements={filters ? [<PopupFilter {...filters} />] : []}
-          />
-        </HideOnDesktopWrapper>
+      {isNarrowScreen && (
+        <SubjectFilters filters={filters} activeFilters={activeFilters} isNarrowScreen={isNarrowScreen} />
       )}
     </Wrapper>
   );

package/src/SearchTypeResult/SearchItem.tsx

@@ -6,23 +6,22 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
 import parse from 'html-react-parser';
-import { ChevronRight, Additional, Core } from '@ndla/icons/common';
+
 import SafeLink from '@ndla/safelink';
-import Button from '@ndla/button';
-import Modal, { ModalCloseButton } from '@ndla/modal';
+import { animations, colors, fonts, spacing } from '@ndla/core';
 
-import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import { useTranslation } from 'react-i18next';
 import { ContentType } from './SearchTypeResult';
 import constants from '../model';
-import ContentTypeBadge from '../ContentTypeBadge';
+import ItemContexts, { ItemContextsType } from './components/ItemContexts';
+import ItemTopicHeader from './components/ItemTopicHeader';
+import ItemResourceHeader from './components/ItemResourceHeader';
 
 const { contentTypes } = constants;
 
-const resourceTypeColor = (type: string) => {
+export const resourceTypeColor = (type: string) => {
   switch (type) {
     case contentTypes.SUBJECT_MATERIAL:
       return colors.subjectMaterial.light;
@@ -39,274 +38,187 @@ const resourceTypeColor = (type: string) => {
     case contentTypes.LEARNING_PATH:
       return colors.learningPath.light;
     default:
-      return null;
+      return '';
   }
 };
 
 type ItemTypeProps = {
-  type?: ContentType;
+  contentType?: ContentType;
+  isTopic?: boolean;
 };
 
-const ItemWrapper = styled.div`
-  flex-direction: column;
-`;
-
-const ItemHead = styled.div<ItemTypeProps>`
-  height: 200px;
-  position: relative;
-  a {
-    box-shadow: none;
-  }
-  ${mq.range({ from: breakpoints.tablet })} {
-    height: 160px;
-  }
-  ${mq.range({ from: breakpoints.desktop })} {
-    height: 100px;
-  }
-  border: 1px solid ${(props) => props.type && `${resourceTypeColor(props.type)};`};
-  border-bottom: 0;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-  img {
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-`;
-
-const ItemIcon = styled.div<ItemTypeProps>`
-  height: 100%;
-  background: #ccc;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
+const Container = styled.div`
   display: flex;
-  justify-content: center;
+  height: 400px;
   align-items: center;
-  ${(props) => props.type && `background: ${resourceTypeColor(props.type)};`}
-`;
-
-const ItemContent = styled.div<ItemTypeProps>`
-  border: 1px solid ${(props) => props.type && `${resourceTypeColor(props.type)};`};
-  border-top: 0;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-  padding: ${spacing.small};
+  justify-content: center;
 `;
 
-const ItemPillWrapper = styled.div`
-  margin-top: 8px;
+const ItemWrapper = styled.div`
+  flex-direction: column;
+  overflow: hidden;
   display: flex;
-  flex-wrap: wrap;
-`;
-const ItemPill = styled.div`
-  display: inline-block;
-  background: ${colors.brand.greyLightest};
-  padding: 2px 4px;
-  border-radius: 2px;
-  ${fonts.sizes('12px', '20px')};
-  font-weight: ${fonts.weight.semibold};
-  margin: 8px 4px 4px 0;
+  width: 100%;
+  height: 100%;
+  border: 1px solid ${colors.brand.neutral7};
+  border-radius: 5px;
+  transition: all ${animations.durations.fast} ease-in-out;
+  &:hover {
+    height: calc(100% + 4px);
+    width: calc(100% + 4px);
+    .topic-header-image {
+      height: calc(100% + 6px);
+      width: calc(100% + 6px);
+    }
+    .topic-label {
+      svg {
+        transform: scale(1.2);
+      }
+    }
+    .topic-label-list {
+      margin-left: 2px;
+    }
+    .resource-type-wrapper {
+      padding: 0 calc(${spacing.normal} + 2px);
+      .resource-icon-wrapper {
+        left: 19px;
+        svg {
+          transform: scale(1.2);
+        }
+      }
+    }
+    .resource-no-image {
+      background-color: ${colors.brand.greyLightest};
+      .c-content-type-badge {
+        width: 26px;
+        height: 26px;
+        left: 45px;
+        margin-left: 0;
+        top: 100%;
+        margin-top: -13px;
+        opacity: 1;
+      }
+    }
+  }
 `;
 
-const ItemTitle = styled.h3`
-  font-size: 18px;
-  line-height: 24px;
-  margin-top: ${spacing.small};
-  font-weight: 600;
-  overflow-wrap: anywhere;
-`;
-const ItemText = styled.p`
-  font-size: 15px;
-  line-height: 20px;
-  margin-bottom: ${spacing.small};
-  word-break: break-word;
-  overflow-wrap: anywhere;
-`;
-const BreadcrumbPath = styled.div`
-  color: ${colors.text.light};
-  font-size: 16px;
-  line-height: 24px;
+const ItemLink = styled(SafeLink)`
+  box-shadow: none;
+  color: unset;
+  text-decoration: none;
   display: flex;
-  align-items: center;
-  flex-wrap: wrap;
+  flex-direction: column;
+  position: relative;
+  min-height: 0;
+  flex: 1;
 `;
 
-const BreadcrumbItem = styled.span`
-  display: inline-flex;
-  align-items: center;
-  flex-wrap: wrap;
-  overflow-wrap: anywhere;
+const TextWrapper = styled.div`
+  padding: 0 ${spacing.normal} ${spacing.small};
+  transition: all ${animations.durations.fast} ease-in-out;
+  ${ItemWrapper}:hover & {
+    padding-left: calc(${spacing.normal} + 2px);
+    padding-right: calc(${spacing.normal} + 2px);
+  }
 `;
 
-const ContextsWrapper = styled.div`
+const ItemTitleWrapper = styled.div<ItemTypeProps>`
+  transition: all ${animations.durations.fast} ease-in-out;
   margin-top: ${spacing.small};
-  button {
-    ${fonts.sizes('16px', '24px')};
-    box-shadow: none;
-    &:hover {
-      box-shadow: inset 0 -1px;
-    }
-  }
+  ${(props) =>
+    props.isTopic &&
+    `${ItemWrapper}:hover & {
+    padding-left:2px; padding-right: 2px;}`};
 `;
 
-const ModalHeader = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: ${spacing.normal} ${spacing.small};
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding: ${spacing.normal} ${spacing.large};
+const ItemTitle = styled.h3<ItemTypeProps>`
+  ${fonts.sizes('24px', '28px')};
+  color: ${colors.brand.primary};
+  ${(props) => props.isTopic && `margin-bottom: ${spacing.small};`};
+  font-weight: ${fonts.weight.semibold};
+  overflow-wrap: anywhere;
+  display: inline;
+  ${ItemWrapper}:hover & {
+    box-shadow: inset 0 -1px;
+    background-color: transparent;
   }
 `;
-
-const ModalHeading = styled.h2`
-  margin: 0;
-  ${fonts.sizes('16px', '20px')};
-  font-weight: 600;
-`;
-
-const ModalContent = styled.div`
-  padding: 0 ${spacing.small} ${spacing.normal};
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding: 0 ${spacing.large} ${spacing.normal};
+const ItemText = styled.div<ItemTypeProps>`
+  overflow: hidden;
+  ${fonts.sizes('16px', '24px')};
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  transition: all ${animations.durations.fast} ease-in-out;
+  margin-top: ${spacing.small};
+  ${(props) =>
+    props.isTopic &&
+    `
+    ${fonts.sizes('18px', '28px')};
+    ${ItemWrapper}:hover & {
+    padding-left: 2px;
+    padding-right: 2px;
+  }`};
+`;
+
+const ContextWrapper = styled.div`
+  background: white;
+  z-index: 1;
+  padding: 0 ${spacing.normal} ${spacing.small};
+  transition: all ${animations.durations.fast} ease-in-out;
+  ${ItemWrapper}:hover & {
+    padding-left: calc(${spacing.normal} + 2px);
+    padding-right: calc(${spacing.normal} + 2px);
+    padding-bottom: calc(${spacing.small} + 2px);
   }
 `;
 
-const ContextList = styled.ul`
-  margin: 0;
-  padding: 0;
-  list-style: none;
-`;
-const ContextListItem = styled.li`
-  margin-bottom: ${spacing.normal};
-  ${fonts.sizes('16px', '28px')};
-`;
-
-const IconWrapper = styled.div`
-  margin-left: ${spacing.small};
-  display: flex;
-  align-items: center;
-`;
-
-type context = {
-  breadcrumb: string[];
-  url: string;
-  isAdditional?: boolean;
-};
-
-export type SearchItemType = {
+export type SearchItemProps = {
   id: string | number;
   title: string;
   url: string;
   ingress: string;
-  contexts?: context[];
+  contexts?: ItemContextsType['contexts'];
   img?: { url: string; alt: string };
   labels?: string[];
-  children?: ReactNode;
+  type?: ContentType;
 };
-type Props = {
-  item: SearchItemType;
+export type SearchItemType = {
+  item: SearchItemProps;
   type?: ContentType;
 };
-const SearchItem = ({ item, type }: Props) => {
-  const { t } = useTranslation();
+const SearchItem = ({ item, type }: SearchItemType) => {
   const { title, url, ingress, contexts, img = null, labels = [] } = item;
-  const mainContext = contexts?.[0];
 
-  const Breadcrumb = ({ breadcrumb, children }: { breadcrumb: string[]; children?: ReactNode }) => (
-    <BreadcrumbPath>
-      {breadcrumb.map((breadcrumbItem: string, i: number) => {
-        return (
-          <BreadcrumbItem key={`${breadcrumbItem}-${item.id}`}>
-            <span>{breadcrumbItem}</span>
-            {i !== breadcrumb.length - 1 && <ChevronRight />}
-          </BreadcrumbItem>
-        );
-      })}
-      {children}
-    </BreadcrumbPath>
-  );
+  const isTopic = type === contentTypes.TOPIC || type === contentTypes.MULTIDISCIPLINARY_TOPIC;
 
   return (
-    <>
+    <Container>
       <ItemWrapper>
-        <ItemHead type={type}>
-          {img ? (
-            <SafeLink to={url}>
-              <img src={img.url} alt={img.alt} />
-            </SafeLink>
+        <ItemLink to={url}>
+          {isTopic ? (
+            <ItemTopicHeader image={img} type={type}>
+              <ItemTitleWrapper isTopic>
+                <ItemTitle isTopic>{title}</ItemTitle>
+              </ItemTitleWrapper>
+              <ItemText isTopic>{parse(ingress)}</ItemText>
+            </ItemTopicHeader>
           ) : (
-            <SafeLink to={url}>
-              {type && (
-                <ItemIcon type={type}>
-                  <ContentTypeBadge type={type} size="small" border={false} />
-                </ItemIcon>
-              )}
-            </SafeLink>
-          )}
-        </ItemHead>
-        <ItemContent type={type}>
-          {labels.length > 0 && (
-            <ItemPillWrapper>
-              {labels.map((label) => (
-                <ItemPill key={label}>{label}</ItemPill>
-              ))}
-            </ItemPillWrapper>
-          )}
-          <ItemTitle>
-            <SafeLink to={url}>{title}</SafeLink>
-          </ItemTitle>
-          {item.children}
-          <ItemText>{parse(ingress)}</ItemText>
-          {mainContext && <Breadcrumb breadcrumb={mainContext.breadcrumb} />}
-          {contexts && contexts.length > 1 && (
-            <ContextsWrapper>
-              <Modal
-                activateButton={
-                  <Button link>
-                    {t('searchPage.contextModal.button', {
-                      count: contexts.length - 1,
-                    })}
-                  </Button>
-                }
-                animation="subtle"
-                animationDuration={50}
-                backgroundColor="white"
-                size="medium">
-                {(onClose: () => void) => (
-                  <>
-                    <ModalHeader>
-                      <ModalHeading>{t('searchPage.contextModal.heading')}</ModalHeading>
-                      <ModalCloseButton onClick={onClose} title={t('searchPage.close')} />
-                    </ModalHeader>
-                    <ModalContent>
-                      <ContextList>
-                        {contexts.map((context) => (
-                          <ContextListItem key={context.url}>
-                            <SafeLink to={context.url}>{title}</SafeLink>
-                            <Breadcrumb breadcrumb={context.breadcrumb}>
-                              <IconWrapper>
-                                {context.isAdditional ? (
-                                  <Additional style={{ width: '22px', height: '22px' }} />
-                                ) : (
-                                  <Core style={{ width: '22px', height: '22px' }} />
-                                )}
-                              </IconWrapper>
-                            </Breadcrumb>
-                          </ContextListItem>
-                        ))}
-                      </ContextList>
-                    </ModalContent>
-                  </>
-                )}
-              </Modal>
-            </ContextsWrapper>
+            <>
+              <ItemResourceHeader labels={labels} img={img} type={type} />
+              <TextWrapper>
+                <ItemTitleWrapper>
+                  <ItemTitle>{title}</ItemTitle>
+                </ItemTitleWrapper>
+                <ItemText>{parse(ingress)}</ItemText>
+              </TextWrapper>
+            </>
           )}
-        </ItemContent>
+          <ContextWrapper>
+            {contexts && contexts.length > 0 && <ItemContexts contexts={contexts} id={item.id} title={item.title} />}
+          </ContextWrapper>
+        </ItemLink>
       </ItemWrapper>
-    </>
+    </Container>
   );
 };