@ndla/ui 50.8.0 → 50.8.2

package/src/Search/SearchResultSleeve.tsx

@@ -6,18 +6,18 @@
  *
  */
 
-import { useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { breakpoints, colors, fonts, misc, mq, spacing } from '@ndla/core';
-import { ChevronDown, ChevronUp, Esc, KeyboardReturn, Search as SearchIcon, Wrench } from '@ndla/icons/common';
-import SafeLink from '@ndla/safelink';
-import ContentTypeResult from './ContentTypeResult';
-import { highlightStyle } from './ContentTypeResultStyles';
-import { ContentTypeResultType, Resource } from '../types';
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { breakpoints, colors, fonts, misc, mq, spacing } from "@ndla/core";
+import { ChevronDown, ChevronUp, Esc, KeyboardReturn, Search as SearchIcon, Wrench } from "@ndla/icons/common";
+import SafeLink from "@ndla/safelink";
+import ContentTypeResult from "./ContentTypeResult";
+import { highlightStyle } from "./ContentTypeResultStyles";
+import { ContentTypeResultType, Resource } from "../types";
 
-const GO_TO_SEARCHPAGE = 'GO_TO_SEARCHPAGE';
-const GO_TO_SUGGESTION = 'GO_TO_SUGGESTION';
+const GO_TO_SEARCHPAGE = "GO_TO_SEARCHPAGE";
+const GO_TO_SUGGESTION = "GO_TO_SUGGESTION";
 
 const StyledNoHits = styled.div`
   ${fonts.sizes(16, 1.1)};
@@ -25,7 +25,7 @@ const StyledNoHits = styled.div`
 `;
 
 const StyledAside = styled.aside`
-  ${fonts.sizes('16px', '22px')};
+  ${fonts.sizes("16px", "22px")};
   display: flex;
   align-items: flex-start;
   margin: 0;
@@ -87,7 +87,7 @@ type WrapperProps = {
 const StyledSearchResultsWrapper = styled.section<WrapperProps>`
   background: #fff;
   width: 100%;
-  position: ${(props) => (props.frontpage ? 'absolute' : 'static')};
+  position: ${(props) => (props.frontpage ? "absolute" : "static")};
   left: 0;
   right: 0;
   top: 62px;
@@ -181,7 +181,7 @@ const findPathForKeyboardNavigation = (
   current: HTMLElement | string | null,
   direction: 1 | -1 | null,
 ): HTMLElement | string | null => {
-  const selectables = contentRef ? Array.from(contentRef.querySelectorAll('li')) : [];
+  const selectables = contentRef ? Array.from(contentRef.querySelectorAll("li")) : [];
   const resultsContainingPaths: Array<string | HTMLElement> = (
     [GO_TO_SEARCHPAGE, GO_TO_SUGGESTION] as Array<HTMLElement | string>
   ).concat(...selectables);
@@ -234,48 +234,48 @@ const SearchResultSleeve = ({
   const contentRef = useRef<HTMLDivElement>(null);
   const searchAllRef = useRef<HTMLDivElement>(null);
   const searchSuggestionRef = useRef<HTMLDivElement>(null);
-  const [keyboardPathNavigation, setKeyNavigation] = useState<HTMLElement | string | null>('');
+  const [keyboardPathNavigation, setKeyNavigation] = useState<HTMLElement | string | null>("");
 
   useEffect(() => {
     const onKeyDownEvent = (e: KeyboardEvent) => {
-      if (e.code === 'ArrowDown') {
+      if (e.code === "ArrowDown") {
         e.stopPropagation();
         e.preventDefault();
 
         setKeyNavigation((prevKeyPath) => {
           return findPathForKeyboardNavigation(contentRef.current, prevKeyPath, 1);
         });
-      } else if (e.code === 'ArrowUp') {
+      } else if (e.code === "ArrowUp") {
         e.stopPropagation();
         e.preventDefault();
 
         setKeyNavigation((prevKeyPath) => {
           return findPathForKeyboardNavigation(contentRef.current, prevKeyPath, -1);
         });
-      } else if (e.code === 'Enter') {
+      } else if (e.code === "Enter") {
         if (keyboardPathNavigation === GO_TO_SUGGESTION) {
-          searchSuggestionRef?.current?.closest('a')?.click();
+          searchSuggestionRef?.current?.closest("a")?.click();
         } else if (keyboardPathNavigation instanceof HTMLElement) {
           e.stopPropagation();
           e.preventDefault();
           const toClick =
             keyboardPathNavigation &&
             keyboardPathNavigation.querySelector &&
-            (keyboardPathNavigation.querySelector('a') || keyboardPathNavigation.querySelector('button'));
+            (keyboardPathNavigation.querySelector("a") || keyboardPathNavigation.querySelector("button"));
 
           toClick && toClick.click();
         }
-      } else if (e.code === 'Tab') {
-        setKeyNavigation('');
+      } else if (e.code === "Tab") {
+        setKeyNavigation("");
       }
     };
 
-    window.addEventListener('keydown', onKeyDownEvent);
+    window.addEventListener("keydown", onKeyDownEvent);
     setKeyNavigation((prevKeyNav) => {
       return findPathForKeyboardNavigation(contentRef.current, prevKeyNav, null);
     });
     return () => {
-      window.removeEventListener('keydown', onKeyDownEvent);
+      window.removeEventListener("keydown", onKeyDownEvent);
     };
   }, [result, contentRef, searchAllRef, keyboardPathNavigation]);
 
@@ -287,8 +287,8 @@ const SearchResultSleeve = ({
 
     if (highlightedElement) {
       highlightedElement.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
+        behavior: "smooth",
+        block: "nearest",
       });
     }
   }, [keyboardPathNavigation]);
@@ -311,7 +311,7 @@ const SearchResultSleeve = ({
             >
               <SearchIcon size="normal" />
               <strong ref={searchAllRef}>{searchString}</strong>
-              <small>{t('welcomePage.searchAllInfo')}</small>
+              <small>{t("welcomePage.searchAllInfo")}</small>
             </StyledSearchLink>
             {suggestion && suggestionUrl && (
               <StyledSearchLink
@@ -320,7 +320,7 @@ const SearchResultSleeve = ({
                 tabIndex={-1}
               >
                 <SearchIcon size="normal" />
-                <small>{t('searchPage.resultType.searchPhraseSuggestion')}</small>
+                <small>{t("searchPage.resultType.searchPhraseSuggestion")}</small>
                 <strong ref={searchSuggestionRef}>{suggestion}</strong>
               </StyledSearchLink>
             )}
@@ -336,14 +336,14 @@ const SearchResultSleeve = ({
               keyboardPathNavigation={keyboardPathNavigation}
               showAdditionalResources
               messages={{
-                allResultLabel: t('searchPage.searchField.contentTypeResultShowMoreLabel'),
-                showLessResultLabel: t('searchPage.searchField.contentTypeResultShowLessLabel'),
-                noHit: t('searchPage.searchField.contentTypeResultNoHit'),
+                allResultLabel: t("searchPage.searchField.contentTypeResultShowMoreLabel"),
+                showLessResultLabel: t("searchPage.searchField.contentTypeResultShowLessLabel"),
+                noHit: t("searchPage.searchField.contentTypeResultNoHit"),
               }}
             />
           ))}
           {result.length === 0 && !loading && (
-            <StyledNoHits>{t('searchPage.searchField.contentTypeResultNoHit')}</StyledNoHits>
+            <StyledNoHits>{t("searchPage.searchField.contentTypeResultNoHit")}</StyledNoHits>
           )}
         </div>
       </StyledScrollableContent>

package/src/Search/__tests__/Highlight-test.js

@@ -8,53 +8,53 @@
 
 /* eslint-env jest */
 
-import { isPathToHighlight } from '../IsPathToHighlight';
+import { isPathToHighlight } from "../IsPathToHighlight";
 
-test('Test that determining whether to highlight path works with locale and not', () => {
+test("Test that determining whether to highlight path works with locale and not", () => {
   const tests = [
     {
-      path: '/subject:123/topic:1:123/topic:2:5343/resource:1:1231231231',
-      href: '/subject:123/topic:1:123/topic:2:5343/resource:1:1231231231',
+      path: "/subject:123/topic:1:123/topic:2:5343/resource:1:1231231231",
+      href: "/subject:123/topic:1:123/topic:2:5343/resource:1:1231231231",
       expected: true,
     },
     {
-      path: '/subject:123/topic:1:123/topic:2:5343/resource:1:1231231231',
-      href: '/nn/subject:123/topic:1:123/topic:2:5343/resource:1:1231231231',
+      path: "/subject:123/topic:1:123/topic:2:5343/resource:1:1231231231",
+      href: "/nn/subject:123/topic:1:123/topic:2:5343/resource:1:1231231231",
       expected: true,
     },
     {
-      path: '/subject:123/topic:1:123/topic:2:5343/resource:1:1231231231',
-      href: '/nb/subject:123/topic:1:123/topic:2:5343/resource:1:1231231231',
+      path: "/subject:123/topic:1:123/topic:2:5343/resource:1:1231231231",
+      href: "/nb/subject:123/topic:1:123/topic:2:5343/resource:1:1231231231",
       expected: true,
     },
     {
-      path: '/subject:123/topic:1:123/topic:2:5343/resource:1:1231231231',
-      href: '/kultspråk/subject:123/topic:1:123/topic:2:5343/resource:1:1231231231',
+      path: "/subject:123/topic:1:123/topic:2:5343/resource:1:1231231231",
+      href: "/kultspråk/subject:123/topic:1:123/topic:2:5343/resource:1:1231231231",
       expected: true,
     },
     {
-      path: '/subject:123/topic:1:123/topic:2:5343/resource:1:1231231231',
-      href: '/nb/subject:123/topic:1:123/topic:2:5343',
+      path: "/subject:123/topic:1:123/topic:2:5343/resource:1:1231231231",
+      href: "/nb/subject:123/topic:1:123/topic:2:5343",
       expected: false,
     },
     {
-      path: '/subject:123/topic:1:123/topic:2:5343/resource:1:1231231231',
-      href: '/nb/subject:123/topic:1:123',
+      path: "/subject:123/topic:1:123/topic:2:5343/resource:1:1231231231",
+      href: "/nb/subject:123/topic:1:123",
       expected: false,
     },
     {
-      path: '/subject:123/topic:1:123/topic:2:5343/resource:1:1231231231',
-      href: '/nb/subject:123',
+      path: "/subject:123/topic:1:123/topic:2:5343/resource:1:1231231231",
+      href: "/nb/subject:123",
       expected: false,
     },
     {
-      path: '/subject:123/topic:1:123/topic:2:5343',
-      href: '/nb/subject:123/topic:1:123',
+      path: "/subject:123/topic:1:123/topic:2:5343",
+      href: "/nb/subject:123/topic:1:123",
       expected: false,
     },
     {
-      path: '/subject:123/topic:1:123/topic:2:5343',
-      href: '/nb/subject:123',
+      path: "/subject:123/topic:1:123/topic:2:5343",
+      href: "/nb/subject:123",
       expected: false,
     },
   ];

package/src/Search/index.ts

@@ -6,9 +6,9 @@
  *
  */
 
-import ActiveFilters from './ActiveFilters';
-import SearchField from './SearchField';
+import ActiveFilters from "./ActiveFilters";
+import SearchField from "./SearchField";
 
-import { SearchResultList, SearchResultItem } from './SearchResult';
+import { SearchResultList, SearchResultItem } from "./SearchResult";
 
 export { SearchField, SearchResultItem, SearchResultList, ActiveFilters };

package/src/SearchTypeResult/ActiveFilterContent.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import { forwardRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { ButtonV2 } from '@ndla/button';
-import { spacing, fonts } from '@ndla/core';
-import { Cross } from '@ndla/icons/action';
+import { forwardRef } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { ButtonV2 } from "@ndla/button";
+import { spacing, fonts } from "@ndla/core";
+import { Cross } from "@ndla/icons/action";
 
 export const StyledActiveFilterTitle = styled.span`
   white-space: nowrap;
@@ -39,7 +39,7 @@ const ActiveFilterContent = forwardRef<HTMLButtonElement, Props>(({ filter, onFi
   const { t } = useTranslation();
   return (
     <StyledButton
-      aria-label={t('searchPage.searchFilterMessages.removeFilter', {
+      aria-label={t("searchPage.searchFilterMessages.removeFilter", {
         filterName: filter.title,
       })}
       ref={ref}

package/src/SearchTypeResult/ActiveFilters.tsx

@@ -6,14 +6,14 @@
  *
  */
 
-import { ReactElement } from 'react';
-import { useTranslation } from 'react-i18next';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { ButtonV2 } from '@ndla/button';
-import { spacing, mq, breakpoints } from '@ndla/core';
-import Tooltip from '@ndla/tooltip';
-import ActiveFilterContent, { FilterProps, StyledActiveFilterTitle } from './ActiveFilterContent';
+import { ReactElement } from "react";
+import { useTranslation } from "react-i18next";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { ButtonV2 } from "@ndla/button";
+import { spacing, mq, breakpoints } from "@ndla/core";
+import Tooltip from "@ndla/tooltip";
+import ActiveFilterContent, { FilterProps, StyledActiveFilterTitle } from "./ActiveFilterContent";
 
 type StyledActiveFiltersProps = {
   showOnSmallScreen?: boolean;
@@ -119,7 +119,7 @@ const ActiveFilters = ({
       <StyledActiveFilterWrapper key={filterKey}>
         {filterLength > 1 ? (
           <Tooltip
-            tooltip={t('searchPage.searchFilterMessages.removeFilter', {
+            tooltip={t("searchPage.searchFilterMessages.removeFilter", {
               filterName: filter.title,
             })}
           >
@@ -137,9 +137,9 @@ const ActiveFilters = ({
       {filterItems}
       {filterLength > showFilterCount && (
         <StyledActiveFilterWrapper>
-          <Tooltip tooltip={t('searchPage.searchFilterMessages.noValuesButtonText')}>
+          <Tooltip tooltip={t("searchPage.searchFilterMessages.noValuesButtonText")}>
             <ButtonV2
-              aria-label={t('searchPage.searchFilterMessages.additionalSubjectFilters', {
+              aria-label={t("searchPage.searchFilterMessages.additionalSubjectFilters", {
                 count: filterLength - showFilterCount + 1,
               })}
               size="normal"
@@ -147,7 +147,7 @@ const ActiveFilters = ({
               onClick={onClickShowHiddenSubjects}
             >
               <StyledActiveFilterTitle>
-                {t('searchPage.searchFilterMessages.additionalSubjectFilters', {
+                {t("searchPage.searchFilterMessages.additionalSubjectFilters", {
                   count: filterLength - showFilterCount + 1,
                 })}
               </StyledActiveFilterTitle>

package/src/SearchTypeResult/PopupFilter.tsx

@@ -6,15 +6,15 @@
  *
  */
 
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { ButtonV2 } from '@ndla/button';
-import { breakpoints, mq, spacing } from '@ndla/core';
-import { ModalCloseButton, ModalBody, ModalTitle, ModalContent } from '@ndla/modal';
-import { ToggleItem } from '../Filter';
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { ButtonV2 } from "@ndla/button";
+import { breakpoints, mq, spacing } from "@ndla/core";
+import { ModalCloseButton, ModalBody, ModalTitle, ModalContent } from "@ndla/modal";
+import { ToggleItem } from "../Filter";
 
-import FrontpageAllSubjects, { subjectsProps } from '../Frontpage/FrontpageAllSubjects';
+import FrontpageAllSubjects, { subjectsProps } from "../Frontpage/FrontpageAllSubjects";
 
 const ModalWrapper = styled.div`
   display: flex;
@@ -56,8 +56,8 @@ const StyledListItem = styled.li`
   break-inside: avoid;
 `;
 
-const MENU_PROGRAMMES = 'programmes';
-const MENU_ALL_SUBJECTS = 'allSubjects';
+const MENU_PROGRAMMES = "programmes";
+const MENU_ALL_SUBJECTS = "allSubjects";
 
 type ProgrammeOptionProps = {
   name: string;
@@ -66,7 +66,7 @@ type ProgrammeOptionProps = {
 
 export type PopupFilterProps = {
   programmes?: { options: ProgrammeOptionProps[] };
-  subjectCategories?: { categories: subjectsProps['categories'] };
+  subjectCategories?: { categories: subjectsProps["categories"] };
   subjectValues: string[];
   programmesValues: string[];
   onToggleSubject: (value: string) => void;
@@ -90,29 +90,29 @@ const PopupFilter = ({
         <ModalWrapper>
           <Content>
             <ModalHeaderWrapper>
-              <ModalTitle>{t('searchPage.searchFilterMessages.filterLabel')}</ModalTitle>
+              <ModalTitle>{t("searchPage.searchFilterMessages.filterLabel")}</ModalTitle>
               <ModalCloseButton />
             </ModalHeaderWrapper>
             {subjectCategories && programmes && (
               <MainFilterButtonWrapper>
                 <ButtonV2
                   onClick={() => setSelectedMenu(MENU_ALL_SUBJECTS)}
-                  colorTheme={selectedMenu !== MENU_ALL_SUBJECTS ? 'lighter' : undefined}
+                  colorTheme={selectedMenu !== MENU_ALL_SUBJECTS ? "lighter" : undefined}
                   size="normal"
                   shape="pill"
                 >
-                  {t('frontpageMenu.allsubjects')}
+                  {t("frontpageMenu.allsubjects")}
                 </ButtonV2>
               </MainFilterButtonWrapper>
             )}
             {programmes && (
               <ButtonV2
                 onClick={() => setSelectedMenu(MENU_PROGRAMMES)}
-                colorTheme={selectedMenu !== MENU_PROGRAMMES ? 'lighter' : undefined}
+                colorTheme={selectedMenu !== MENU_PROGRAMMES ? "lighter" : undefined}
                 size="normal"
                 shape="pill"
               >
-                {t('frontpageMenu.program')}
+                {t("frontpageMenu.program")}
               </ButtonV2>
             )}
             {selectedMenu === MENU_ALL_SUBJECTS && subjectCategories && (

package/src/SearchTypeResult/ResultNavigation.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { ButtonV2 } from '@ndla/button';
-import { fonts, spacing, colors } from '@ndla/core';
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { ButtonV2 } from "@ndla/button";
+import { fonts, spacing, colors } from "@ndla/core";
 
 const ResultNav = styled.div`
   font-size: 14px;
@@ -29,7 +29,7 @@ const ResultNav = styled.div`
 `;
 
 const NavInfo = styled.div`
-  ${fonts.sizes('16px', '24px')};
+  ${fonts.sizes("16px", "24px")};
   font-weight: 400;
   margin-bottom: ${spacing.small};
 `;
@@ -62,7 +62,7 @@ interface Props extends PaginationType {
   type?: string;
 }
 
-const ResultNavigation = ({ onShowMore, totalCount, toCount, contentType = '', type }: Props) => {
+const ResultNavigation = ({ onShowMore, totalCount, toCount, contentType = "", type }: Props) => {
   const { t } = useTranslation();
   const isMore = toCount < totalCount;
   const progress = Math.ceil((toCount / totalCount) * 100);
@@ -71,7 +71,7 @@ const ResultNavigation = ({ onShowMore, totalCount, toCount, contentType = '', t
     window.scrollTo({
       top: 0,
       left: 0,
-      behavior: 'smooth',
+      behavior: "smooth",
     });
   };
 
@@ -79,23 +79,23 @@ const ResultNavigation = ({ onShowMore, totalCount, toCount, contentType = '', t
     <ResultNav>
       <NavInfo>
         {isMore
-          ? t('searchPage.resultType.showing', {
+          ? t("searchPage.resultType.showing", {
               count: toCount,
               totalCount,
               contentType,
             })
-          : t('searchPage.resultType.showingAll')}
+          : t("searchPage.resultType.showingAll")}
       </NavInfo>
       <ProgressBar>
         <Progress width={progress} />
       </ProgressBar>
       {isMore ? (
         <ButtonV2 className="nav" variant="outline" onClick={onShowMore} aria-describedby={`searchitem-header-${type}`}>
-          {t('searchPage.resultType.showMore')}
+          {t("searchPage.resultType.showMore")}
         </ButtonV2>
       ) : (
         <ButtonV2 className="nav" variant="outline" onClick={onToTopHandler}>
-          {t('searchPage.resultType.toTopOfPage')}
+          {t("searchPage.resultType.toTopOfPage")}
         </ButtonV2>
       )}
     </ResultNav>

package/src/SearchTypeResult/SearchFieldHeader.tsx

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { FormEvent, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { spacing, colors } from '@ndla/core';
-import { Cross as CrossIcon } from '@ndla/icons/action';
-import { Search as SearchIcon } from '@ndla/icons/common';
+import { FormEvent, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { spacing, colors } from "@ndla/core";
+import { Cross as CrossIcon } from "@ndla/icons/action";
+import { Search as SearchIcon } from "@ndla/icons/common";
 
-import SubjectFilters, { SubjectFilterProps } from './components/SubjectFilters';
+import SubjectFilters, { SubjectFilterProps } from "./components/SubjectFilters";
 
 type StyledProps = {
   inputHasFocus?: boolean;
@@ -63,8 +63,8 @@ const SearchInput = styled.input`
 `;
 
 const iconStyle = {
-  width: '24px',
-  height: '24px',
+  width: "24px",
+  height: "24px",
 };
 
 type Props = {
@@ -98,9 +98,9 @@ const SearchFieldHeader = ({
         id="search"
         name="search"
         placeholder={
-          isNarrowScreen ? t('searchPage.searchFieldPlaceholderShort') : t('searchPage.searchFieldPlaceholder')
+          isNarrowScreen ? t("searchPage.searchFieldPlaceholderShort") : t("searchPage.searchFieldPlaceholder")
         }
-        aria-label={t('searchPage.searchFieldPlaceholder')}
+        aria-label={t("searchPage.searchFieldPlaceholder")}
         value={value}
         onChange={(e) => onChange(e.target.value)}
         onFocus={() => setHasFocus(true)}
@@ -109,17 +109,17 @@ const SearchFieldHeader = ({
       {value && (
         <ClearButton
           type="button"
-          value={t('welcomePage.resetSearch')}
+          value={t("welcomePage.resetSearch")}
           onClick={() => {
-            onChange('');
+            onChange("");
             inputRef.current?.focus();
           }}
         >
-          <CrossIcon style={iconStyle} title={t('welcomePage.resetSearch')} />
+          <CrossIcon style={iconStyle} title={t("welcomePage.resetSearch")} />
         </ClearButton>
       )}
-      <SearchButton type="submit" value={t('searchPage.search')}>
-        <SearchIcon style={iconStyle} title={t('searchPage.search')} />
+      <SearchButton type="submit" value={t("searchPage.search")}>
+        <SearchIcon style={iconStyle} title={t("searchPage.search")} />
       </SearchButton>
     </StyledForm>
   );

package/src/SearchTypeResult/SearchFilterContent.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { spacing } from '@ndla/core';
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { spacing } from "@ndla/core";
 
-import SearchViewType, { SearchViewTypeProps } from './SearchViewType';
-import { FilterButtons } from '../Filter';
-import { FilterButtonsProps } from '../Filter/FilterButtons';
+import SearchViewType, { SearchViewTypeProps } from "./SearchViewType";
+import { FilterButtons } from "../Filter";
+import { FilterButtonsProps } from "../Filter/FilterButtons";
 
 const Container = styled.div`
   display: flex;
@@ -29,9 +29,9 @@ const FilterButtonsWrapper = styled.div`
 `;
 
 type Props = {
-  items: FilterButtonsProps['items'];
-  onFilterToggle: FilterButtonsProps['onFilterToggle'];
-  onRemoveAllFilters: FilterButtonsProps['onRemoveAllFilters'];
+  items: FilterButtonsProps["items"];
+  onFilterToggle: FilterButtonsProps["onFilterToggle"];
+  onRemoveAllFilters: FilterButtonsProps["onRemoveAllFilters"];
 };
 const SearchFilterContent = ({
   viewType,
@@ -49,7 +49,7 @@ const SearchFilterContent = ({
           onFilterToggle={onFilterToggle}
           onRemoveAllFilters={onRemoveAllFilters}
           labels={{
-            openFilter: t('searchPage.searchFilterMessages.resourceTypeFilter.button'),
+            openFilter: t("searchPage.searchFilterMessages.resourceTypeFilter.button"),
           }}
         />
       </FilterButtonsWrapper>