@ndla/ui 4.3.0 → 4.3.3-alpha.12

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;

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