@ndla/ui 4.3.1 → 5.0.1

package/src/SearchTypeResult/ActiveFilters.tsx

@@ -7,31 +7,39 @@
  */
 
 import React, { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
 import css from '@emotion/css';
 import { spacing, mq, breakpoints } from '@ndla/core';
 import Tooltip from '@ndla/tooltip';
-import { useTranslation } from 'react-i18next';
+import Button from '@ndla/button';
 import ActiveFilterContent, { FilterProps, StyledActiveFilterTitle } from './ActiveFilterContent';
 
 type StyledActiveFiltersProps = {
   showOnSmallScreen?: boolean;
   filterLength?: number;
 };
+
 const StyledActiveFilters = styled.ul<StyledActiveFiltersProps>`
   margin: 0;
   padding: 0;
   display: none;
-
-  ${({ showOnSmallScreen }) =>
-    showOnSmallScreen &&
-    `
-    ${mq.range({ until: breakpoints.desktop })} {
+  ${(props: StyledActiveFiltersProps) =>
+    props.showOnSmallScreen &&
+    css`
+      ${StyledActiveFilterTitle} {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        padding-right: ${spacing.small};
+        display: block;
+        /* max-width: 200px; */
+      }
+      ${mq.range({ until: breakpoints.desktop })} {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
       }
-    ${mq.range({ until: breakpoints.tablet })} {
+      ${mq.range({ until: breakpoints.tablet })} {
         display: flex;
         flex-direction: column;
         align-items: stretch;
@@ -88,46 +96,72 @@ type Props = {
   onFilterRemove: (value: string, name: string) => void;
   showOnSmallScreen?: boolean;
   customElements?: ReactElement[];
+  onClickShowHiddenSubjects: () => void;
 };
 
-const ActiveFilters = ({ filters, onFilterRemove, showOnSmallScreen, customElements }: Props) => {
+const ActiveFilters = ({
+  filters,
+  onFilterRemove,
+  showOnSmallScreen,
+  customElements,
+  onClickShowHiddenSubjects,
+}: Props) => {
   const { t } = useTranslation();
-  if (filters && filters.length > 0) {
-    const filterLength = filters.length;
+  if (!filters) return null;
+  const showFilterCount = 3;
+  const filterLength = filters.length;
 
-    const filterItems = filters.map((filter) => {
-      const filterKey = filter.name ? `${filter.name}${filter.value}` : filter.value;
+  const visibleFilters = filterLength > showFilterCount ? filters.slice(0, showFilterCount - 1) : filters;
 
-      return (
-        <StyledActiveFilterWrapper key={filterKey}>
-          {filterLength > 1 ? (
-            <Tooltip
-              delay={2000}
-              align="bottom"
-              tooltip={t('searchPage.searchFilterMessages.removeFilter', {
-                filterName: filter.title,
-              })}>
-              <ActiveFilterContent filter={filter} onFilterRemove={onFilterRemove} />
-            </Tooltip>
-          ) : (
-            <ActiveFilterContent filter={filter} onFilterRemove={onFilterRemove} />
-          )}
-        </StyledActiveFilterWrapper>
-      );
-    });
+  const filterItems = visibleFilters.map((filter) => {
+    const filterKey = filter.name ? `${filter.name}${filter.value}` : filter.value;
 
     return (
-      <StyledActiveFilters showOnSmallScreen={showOnSmallScreen} filterLength={filterLength}>
-        {filterItems}
-        {customElements &&
-          customElements.map((item, index) => (
-            <StyledActiveFilterWrapper key={index}>{item}</StyledActiveFilterWrapper>
-          ))}
-      </StyledActiveFilters>
+      <StyledActiveFilterWrapper key={filterKey}>
+        {filterLength > 1 ? (
+          <Tooltip
+            delay={2000}
+            align="bottom"
+            tooltip={t('searchPage.searchFilterMessages.removeFilter', {
+              filterName: filter.title,
+            })}>
+            <ActiveFilterContent filter={filter} onFilterRemove={onFilterRemove} />
+          </Tooltip>
+        ) : (
+          <ActiveFilterContent filter={filter} onFilterRemove={onFilterRemove} />
+        )}
+      </StyledActiveFilterWrapper>
     );
-  }
+  });
 
-  return null;
+  return (
+    <StyledActiveFilters showOnSmallScreen={showOnSmallScreen} filterLength={filterLength}>
+      {filterItems}
+      {filterLength > showFilterCount && (
+        <StyledActiveFilterWrapper>
+          <Tooltip delay={2000} align="bottom" tooltip={t('searchPage.searchFilterMessages.noValuesButtonText')}>
+            <Button
+              aria-label={t('searchPage.searchFilterMessages.additionalSubjectFilters', {
+                count: filterLength - showFilterCount + 1,
+              })}
+              type="button"
+              size="normal"
+              borderShape="rounded"
+              onClick={onClickShowHiddenSubjects}>
+              <StyledActiveFilterTitle>
+                {t('searchPage.searchFilterMessages.additionalSubjectFilters', {
+                  count: filterLength - showFilterCount + 1,
+                })}
+              </StyledActiveFilterTitle>
+            </Button>
+          </Tooltip>
+        </StyledActiveFilterWrapper>
+      )}
+      {customElements?.map((item, index) => (
+        <StyledActiveFilterWrapper key={index}>{item}</StyledActiveFilterWrapper>
+      ))}
+    </StyledActiveFilters>
+  );
 };
 
 export default ActiveFilters;

package/src/SearchTypeResult/PopupFilter.tsx

@@ -6,12 +6,11 @@
  *
  */
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useState } from 'react';
 import styled from '@emotion/styled';
 import Modal, { ModalCloseButton, ModalBody } from '@ndla/modal';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
 import Button from '@ndla/button';
-import { Plus as PlusIcon } from '@ndla/icons/action';
 import { useTranslation } from 'react-i18next';
 // @ts-ignore
 import { ToggleItem } from '../Filter';
@@ -38,12 +37,6 @@ const ModalContent = styled.div`
   flex-grow: 1;
 `;
 
-const FilterButtonText = styled.span`
-  display: inline-block;
-  font-weight: 600;
-  margin-right: 10px;
-`;
-
 const MainFilterButtonWrapper = styled.div`
   display: inline-block;
   margin-right: ${spacing.xsmall};
@@ -71,165 +64,99 @@ const StyledListItem = styled.li`
 const MENU_PROGRAMMES = 'programmes';
 const MENU_ALL_SUBJECTS = 'allSubjects';
 
-type messagesProps = {
-  buttonText: string;
-  closeButton: string;
-  filterLabel: string;
-};
-
 type ProgrammeOptionProps = {
   name: string;
   id: string;
 };
-type ProgrammeProps = {
-  options: ProgrammeOptionProps[];
-  values: string[];
-  onProgrammeValuesChange: (values: string[]) => void;
-};
-
-type SubjectCategoriesProps = {
-  categories: subjectsProps['categories'];
-  values: string[];
-  onSubjectValuesChange: (values: string[]) => void;
-};
 
 export type PopupFilterProps = {
-  messages: messagesProps;
-  programmes?: ProgrammeProps;
-  subjectCategories?: SubjectCategoriesProps;
+  programmes?: { options: ProgrammeOptionProps[] };
+  subjectCategories?: { categories: subjectsProps['categories'] };
+  subjectValues: string[];
+  programmesValues: string[];
+  onClose: () => void;
+  onToggleSubject: (value: string) => void;
+  onToggleProgramme: (value: string) => void;
+  isOpen: boolean;
 };
 
-const PopupFilter = ({ messages, programmes, subjectCategories }: PopupFilterProps) => {
+const PopupFilter = ({
+  programmes,
+  subjectCategories,
+  subjectValues,
+  programmesValues,
+  onToggleSubject,
+  onToggleProgramme,
+  onClose,
+  isOpen,
+}: PopupFilterProps) => {
   const { t } = useTranslation();
   const [selectedMenu, setSelectedMenu] = useState(MENU_ALL_SUBJECTS);
-  const [subjectValues, setSubjectValues] = useState<Array<string>>([]);
-  const [programmesValues, setProgrammesValues] = useState<Array<string>>([]);
-  const [isOpen, setIsOpen] = useState(false);
-
-  const prevIsOpenRef = useRef<boolean>();
-  useEffect(() => {
-    prevIsOpenRef.current = isOpen;
-  });
-  const prevIsOpen = prevIsOpenRef.current;
-
-  useEffect(() => {
-    if (isOpen && isOpen !== prevIsOpen) {
-      if (subjectCategories) {
-        setSubjectValues([...subjectCategories.values]);
-      }
-      if (programmes) {
-        setProgrammesValues([...programmes.values]);
-      }
-    }
-  }, [isOpen, prevIsOpen, subjectCategories, programmes]);
-
-  const onToggleSubject = (subjectId: string) => {
-    let updatedFilter = [...subjectValues];
-    if (updatedFilter.includes(subjectId)) {
-      updatedFilter = subjectValues.filter((option) => option !== subjectId);
-    } else {
-      updatedFilter.push(subjectId);
-    }
-    setSubjectValues(updatedFilter);
-    if (subjectCategories) {
-      subjectCategories.onSubjectValuesChange(updatedFilter);
-    }
-  };
-
-  const onToggleProgramme = (programmeId: string) => {
-    let updatedFilter = [...programmesValues];
-    if (updatedFilter.includes(programmeId)) {
-      updatedFilter = programmesValues.filter((option) => option !== programmeId);
-    } else {
-      updatedFilter.push(programmeId);
-    }
-    setProgrammesValues(updatedFilter);
-    if (programmes) {
-      programmes.onProgrammeValuesChange(updatedFilter);
-    }
-  };
-
-  const buttonContent = (
-    <Button type="button" size="normal" light borderShape="rounded">
-      <FilterButtonText>{messages.buttonText}</FilterButtonText>
-      <PlusIcon />
-    </Button>
-  );
 
   return (
     <Modal
-      activateButton={buttonContent}
+      controllable
       backgroundColor="white"
       animation="subtle"
       animationDuration={50}
-      onClick={() => setIsOpen(true)}
-      onClose={() => setIsOpen(false)}
+      onClose={onClose}
+      isOpen={isOpen}
       size="fullscreen">
-      {(onClose: () => void) => (
-        <>
-          <ModalBody>
-            <ModalWrapper>
-              <ModalContent>
-                <ModalHeaderWrapper>
-                  <ModalHeading>{messages.filterLabel}</ModalHeading>
-                  <ModalCloseButton
-                    onClick={() => {
-                      setIsOpen(false);
-                      onClose();
-                    }}
-                    title={messages.closeButton}
-                  />
-                </ModalHeaderWrapper>
-                {subjectCategories && programmes && (
-                  <MainFilterButtonWrapper>
-                    <Button
-                      onClick={() => setSelectedMenu(MENU_ALL_SUBJECTS)}
-                      lighter={selectedMenu !== MENU_ALL_SUBJECTS}
-                      size="normal"
-                      borderShape="rounded">
-                      {t('frontpageMenu.allsubjects')}
-                    </Button>
-                  </MainFilterButtonWrapper>
-                )}
-                {programmes && (
+      {() => (
+        <ModalBody>
+          <ModalWrapper>
+            <ModalContent>
+              <ModalHeaderWrapper>
+                <ModalHeading>{t('searchPage.searchFilterMessages.filterLabel')}</ModalHeading>
+                <ModalCloseButton onClick={() => onClose()} title={t('searchPage.close')} />
+              </ModalHeaderWrapper>
+              {subjectCategories && programmes && (
+                <MainFilterButtonWrapper>
                   <Button
-                    onClick={() => setSelectedMenu(MENU_PROGRAMMES)}
-                    lighter={selectedMenu !== MENU_PROGRAMMES}
+                    onClick={() => setSelectedMenu(MENU_ALL_SUBJECTS)}
+                    lighter={selectedMenu !== MENU_ALL_SUBJECTS}
                     size="normal"
                     borderShape="rounded">
-                    {t('frontpageMenu.program')}
+                    {t('frontpageMenu.allsubjects')}
                   </Button>
-                )}
-                {selectedMenu === MENU_ALL_SUBJECTS && subjectCategories && (
-                  <FrontpageAllSubjects
-                    categories={subjectCategories.categories}
-                    selectedSubjects={subjectValues}
-                    onToggleSubject={onToggleSubject}
-                    subjectViewType="checkbox"
-                  />
-                )}
-                {selectedMenu === MENU_PROGRAMMES && programmes && (
-                  <StyledList>
-                    {programmes.options.map((item: ProgrammeOptionProps) => (
-                      <StyledListItem key={item.id}>
-                        <ToggleItem
-                          id={item.id}
-                          value={item.id}
-                          checked={programmesValues.includes(item.id)}
-                          label={item.name}
-                          component="div"
-                          onChange={() => {
-                            onToggleProgramme(item.id);
-                          }}
-                        />
-                      </StyledListItem>
-                    ))}
-                  </StyledList>
-                )}
-              </ModalContent>
-            </ModalWrapper>
-          </ModalBody>
-        </>
+                </MainFilterButtonWrapper>
+              )}
+              {programmes && (
+                <Button
+                  onClick={() => setSelectedMenu(MENU_PROGRAMMES)}
+                  lighter={selectedMenu !== MENU_PROGRAMMES}
+                  size="normal"
+                  borderShape="rounded">
+                  {t('frontpageMenu.program')}
+                </Button>
+              )}
+              {selectedMenu === MENU_ALL_SUBJECTS && subjectCategories && (
+                <FrontpageAllSubjects
+                  categories={subjectCategories.categories}
+                  selectedSubjects={subjectValues}
+                  onToggleSubject={onToggleSubject}
+                  subjectViewType="checkbox"
+                />
+              )}
+              {selectedMenu === MENU_PROGRAMMES && programmes && (
+                <StyledList>
+                  {programmes.options.map((item: ProgrammeOptionProps) => (
+                    <StyledListItem key={item.id}>
+                      <ToggleItem
+                        id={item.id}
+                        value={item.id}
+                        checked={programmesValues.includes(item.id)}
+                        label={item.name}
+                        component="div"
+                        onChange={() => onToggleProgramme(item.id)}
+                      />
+                    </StyledListItem>
+                  ))}
+                </StyledList>
+              )}
+            </ModalContent>
+          </ModalWrapper>
+        </ModalBody>
       )}
     </Modal>
   );

package/src/SearchTypeResult/ResultNavigation.tsx

@@ -8,19 +8,21 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import { ChevronDown } from '@ndla/icons/common';
 import Button from '@ndla/button';
-import { spacing } from '@ndla/core';
+import { fonts, spacing, colors } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
 
 const ResultNav = styled.div`
   font-size: 14px;
   font-weight: 600;
-  margin: ${spacing.normal} 0;
+  margin: ${spacing.medium} 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   button.nav {
-    margin-right: ${spacing.xsmall};
-    font-size: 18px;
     font-weight: 600;
+    border-width: 1px;
     &:disabled {
       opacity: 0.8;
     }
@@ -28,33 +30,69 @@ const ResultNav = styled.div`
 `;
 
 const NavInfo = styled.div`
-  font-size: 16px;
+  ${fonts.sizes('16px', '24px')};
   font-weight: 400;
   margin-bottom: ${spacing.small};
 `;
 
+const ProgressBar = styled.div`
+  width: 200px;
+  height: 2px;
+  background: ${colors.brand.tertiary};
+  margin: 0 0 ${spacing.small};
+`;
+
+type ProgressType = {
+  width: number;
+};
+const Progress = styled.span<ProgressType>`
+  display: block;
+  background: ${colors.brand.primary};
+  height: 2px;
+  width: ${(props) => props.width}%;
+`;
+
 export type PaginationType = {
   onShowMore: () => void;
   totalCount: number;
-  fromCount?: number;
   toCount: number;
+  contentType?: string;
 };
 
-const ResultNavigation = ({ onShowMore, totalCount, fromCount = 1, toCount }: PaginationType) => {
+const ResultNavigation = ({ onShowMore, totalCount, toCount, contentType = '' }: PaginationType) => {
   const { t } = useTranslation();
   const isMore = toCount < totalCount;
+  const progress = Math.ceil((toCount / totalCount) * 100);
+
+  const onToTopHandler = () => {
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: 'smooth',
+    });
+  };
+
   return (
     <ResultNav>
       <NavInfo>
-        {t('searchPage.resultType.showing', {
-          fromCount,
-          toCount,
-          totalCount,
-        })}
+        {isMore
+          ? t('searchPage.resultType.showing', {
+              count: toCount,
+              totalCount,
+              contentType,
+            })
+          : t('searchPage.resultType.showingAll')}
       </NavInfo>
-      {isMore && (
-        <Button className="nav" link onClick={onShowMore}>
-          {t('searchPage.resultType.showMore')} <ChevronDown />
+      <ProgressBar>
+        <Progress width={progress} />
+      </ProgressBar>
+      {isMore ? (
+        <Button className="nav" outline onClick={onShowMore}>
+          {t('searchPage.resultType.showMore')}
+        </Button>
+      ) : (
+        <Button className="nav" outline onClick={onToTopHandler}>
+          {t('searchPage.resultType.toTopOfPage')}
         </Button>
       )}
     </ResultNav>

package/src/SearchTypeResult/SearchFieldHeader.tsx

@@ -5,18 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-
-import React, { FormEvent, useEffect, useRef, useState } from 'react';
+import React, { FormEvent, useRef, useState } from 'react';
 import styled from '@emotion/styled';
-import { colors, breakpoints, mq } from '@ndla/core';
+import { colors } from '@ndla/core';
 import { Search as SearchIcon } from '@ndla/icons/common';
 import { spacing } from '@ndla/core';
 import { Cross as CrossIcon } from '@ndla/icons/action';
 
 import { useTranslation } from 'react-i18next';
-import ActiveFilters from './ActiveFilters';
-import PopupFilter, { PopupFilterProps } from './PopupFilter';
-import { FilterProps } from './ActiveFilterContent';
+import SubjectFilters, { SubjectFilterProps } from './components/SubjectFilters';
 
 type StyledProps = {
   inputHasFocus?: boolean;
@@ -42,13 +39,6 @@ const StyledForm = styled.form<StyledProps>`
   }
 `;
 
-const HideOnNarrowScreen = styled.div`
-  display: none;
-  ${mq.range({ from: breakpoints.desktop })} {
-    display: block;
-  }
-`;
-
 const SearchButton = styled.button`
   width: 40px;
   height: 40px;
@@ -82,39 +72,26 @@ type Props = {
   onSubmit: (event: FormEvent<HTMLFormElement>) => void;
   value?: string;
   onChange: (value: string) => void;
-  filters?: PopupFilterProps;
-  activeFilters?: {
-    filters: FilterProps[];
-    onFilterRemove: (value: string, name: string) => void;
-  };
+  isNarrowScreen?: boolean;
 };
 
-const SearchFieldHeader = ({ value, onSubmit, onChange, filters, activeFilters }: Props) => {
+const SearchFieldHeader = ({
+  value,
+  onSubmit,
+  onChange,
+  filters,
+  activeFilters,
+  isNarrowScreen,
+}: Props & SubjectFilterProps) => {
   const { t } = useTranslation();
   const [hasFocus, setHasFocus] = useState(false);
-  const [isNarrowScreen, setIsNarrowScreen] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  useEffect(() => {
-    const isNarrowScreenMatch = window.matchMedia(`(max-width: ${breakpoints.tablet})`);
-    const handleChange = (e: MediaQueryListEvent | MediaQueryList) => {
-      setIsNarrowScreen(e.matches);
-    };
-    isNarrowScreenMatch.addEventListener('change', handleChange);
-    handleChange(isNarrowScreenMatch);
-    return () => {
-      isNarrowScreenMatch.removeEventListener('change', handleChange);
-    };
-  }, []);
-
   return (
     <StyledForm action="/search/" inputHasFocus={hasFocus} onSubmit={onSubmit}>
-      {filters && (
-        <HideOnNarrowScreen>
-          <PopupFilter {...filters} />
-        </HideOnNarrowScreen>
+      {!isNarrowScreen && (
+        <SubjectFilters filters={filters} activeFilters={activeFilters} isNarrowScreen={isNarrowScreen} />
       )}
-      {activeFilters && <ActiveFilters {...activeFilters} />}
       <SearchInput
         ref={inputRef}
         type="search"
@@ -136,9 +113,7 @@ const SearchFieldHeader = ({ value, onSubmit, onChange, filters, activeFilters }
           value={t<string>('welcomePage.resetSearch')}
           onClick={() => {
             onChange('');
-            if (inputRef && inputRef.current) {
-              inputRef.current.focus();
-            }
+            inputRef.current?.focus();
           }}>
           <CrossIcon style={iconStyle} title={t<string>('welcomePage.resetSearch')} />
         </ClearButton>

package/src/SearchTypeResult/SearchFilterContent.tsx

@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2021-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { spacing } from '@ndla/core';
+
+import SearchViewType, { SearchViewTypeProps } from './SearchViewType';
+// @ts-ignore
+import { FilterButtons } from '../Filter';
+import { FilterButtonsProps } from '../Filter/FilterButtons';
+
+const Container = styled.div`
+  display: flex;
+  align-items: flex-start;
+  box-sizing: border-box;
+  max-width: 100%;
+`;
+
+const FilterButtonsWrapper = styled.div`
+  padding-top: 2px;
+  margin-right: ${spacing.small};
+  overflow-x: hidden;
+  margin-left: -13px;
+`;
+
+type Props = {
+  items: FilterButtonsProps['items'];
+  onFilterToggle: FilterButtonsProps['onFilterToggle'];
+  onRemoveAllFilters: FilterButtonsProps['onRemoveAllFilters'];
+};
+const SearchFilterContent = ({
+  viewType,
+  onChangeViewType,
+  items,
+  onFilterToggle,
+  onRemoveAllFilters,
+}: SearchViewTypeProps & Props) => {
+  const { t } = useTranslation();
+  return (
+    <Container>
+      <FilterButtonsWrapper>
+        <FilterButtons
+          items={items}
+          onFilterToggle={onFilterToggle}
+          onRemoveAllFilters={onRemoveAllFilters}
+          labels={{
+            openFilter: t('searchPage.searchFilterMessages.resourceTypeFilter.button'),
+          }}
+        />
+      </FilterButtonsWrapper>
+      <SearchViewType viewType={viewType} onChangeViewType={onChangeViewType} />
+    </Container>
+  );
+};
+
+export default SearchFilterContent;