@ndla/ui 50.7.3 → 50.8.1

package/src/Search/ContentTypeResultStyles.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { colors, spacing, spacingUnit, fonts, misc, animations, mq, breakpoints } from '@ndla/core';
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { colors, spacing, spacingUnit, fonts, misc, animations, mq, breakpoints } from "@ndla/core";
 
 export const highlightStyle = css`
   background: ${colors.brand.light};
@@ -95,12 +95,11 @@ export const StyledListItem = styled.li<StyledListItemProps>`
 export const StyledList = styled.ul<inMenuProps>`
   list-style: none;
   padding: 0;
-  margin: 0;
   ${(props) => {
     if (props.animateList && props.animateList > 0) {
       return animations.toggledContentWithSwitchAnimation(
         animations.durations.normal,
-        `contentTypeResultAnimation${props.animateList % 2 ? '1' : '2'}`,
+        `contentTypeResultAnimation${props.animateList % 2 ? "1" : "2"}`,
       );
     }
   }}
@@ -160,7 +159,7 @@ export const StyledTag = styled.span`
   background: ${colors.brand.greyLightest};
   border-radius: ${misc.borderRadius};
   color: ${colors.text.primary};
-  ${fonts.sizes('12px', '20px')};
+  ${fonts.sizes("12px", "20px")};
   font-weight: ${fonts.weight.semibold};
   margin: 0 0 0 ${spacing.small};
   height: ${spacing.normal};

package/src/Search/IsPathToHighlight.ts

@@ -8,5 +8,5 @@
 
 export const isPathToHighlight = (path: string, href: string | false | null): boolean => {
   const regexForPath = new RegExp(`^(/.*)?${path}$`);
-  return regexForPath.test(href || '') || path === href;
+  return regexForPath.test(href || "") || path === href;
 };

package/src/Search/LoadingWrapper.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { spacing, spacingUnit, animations } from '@ndla/core';
-import { Spinner } from '@ndla/icons';
+import styled from "@emotion/styled";
+import { spacing, spacingUnit, animations } from "@ndla/core";
+import { Spinner } from "@ndla/icons";
 
 const StyledWrapper = styled.div`
   position: absolute;
@@ -23,7 +23,7 @@ const StyledWrapper = styled.div`
     opacity: 0;
   }
   > div {
-    ${animations.fadeIn('1000ms')};
+    ${animations.fadeIn("1000ms")};
     transform: translateX(${spacingUnit * 1.5}px) translateY(-${spacing.xsmall});
   }
 `;

package/src/Search/SearchField.tsx

@@ -6,18 +6,18 @@
  *
  */
 
-import { FocusEvent, MouseEvent, RefObject } from 'react';
-import BEMHelper from 'react-bem-helper';
-import { useTranslation } from 'react-i18next';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { colors, spacing, mq, breakpoints, misc, fonts } from '@ndla/core';
-import { Search as SearchIcon } from '@ndla/icons/common';
+import { FocusEvent, MouseEvent, RefObject } from "react";
+import BEMHelper from "react-bem-helper";
+import { useTranslation } from "react-i18next";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { colors, spacing, mq, breakpoints, misc, fonts } from "@ndla/core";
+import { Search as SearchIcon } from "@ndla/icons/common";
 
-import ActiveFilters from './ActiveFilters';
-import LoadingWrapper from './LoadingWrapper';
+import ActiveFilters from "./ActiveFilters";
+import LoadingWrapper from "./LoadingWrapper";
 
-const classes = new BEMHelper('c-search-field');
+const classes = new BEMHelper("c-search-field");
 
 interface StyledInputProps {
   hasFilters?: boolean;
@@ -41,7 +41,7 @@ const StyledInput = styled.input<StyledInputProps>`
   ${mq.range({ from: breakpoints.tablet })} {
     height: 58px;
     line-height: 58px;
-    ${fonts.sizes('18px', '24px')};
+    ${fonts.sizes("18px", "24px")};
   }
 
   ${(p) =>
@@ -99,7 +99,7 @@ const SearchField = ({
     onFocus?.();
   };
   return (
-    <div {...classes('input-wrapper')}>
+    <div {...classes("input-wrapper")}>
       {loading && <LoadingWrapper value={value} />}
       <StyledInput
         hasFilters={!!filters?.length}
@@ -118,29 +118,29 @@ const SearchField = ({
         onClick={onClick}
       />
       {filters && filters.length > 0 && (
-        <div {...classes('filters')}>
+        <div {...classes("filters")}>
           <ActiveFilters filters={filters} onFilterRemove={handleOnFilterRemove} />
         </div>
       )}
-      {value !== '' && (
+      {value !== "" && (
         <button
-          {...classes('button', 'close')}
+          {...classes("button", "close")}
           type="button"
           onClick={() => {
-            onChange('');
+            onChange("");
             onFocus?.();
             inputRef?.current?.focus();
           }}
         >
-          {t('welcomePage.resetSearch')}
+          {t("welcomePage.resetSearch")}
         </button>
       )}
       <button
         tabIndex={-1}
-        {...classes('button', 'searchIcon')}
+        {...classes("button", "searchIcon")}
         type="submit"
         value="Search"
-        aria-label={t('siteNav.search')}
+        aria-label={t("siteNav.search")}
       >
         <SearchIcon />
       </button>

package/src/Search/SearchFieldForm.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { FormEvent, ReactNode } from 'react';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { spacing, mq, breakpoints } from '@ndla/core';
+import { FormEvent, ReactNode } from "react";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { spacing, mq, breakpoints } from "@ndla/core";
 
 interface Props {
   children: ReactNode;

package/src/Search/SearchResult.tsx

@@ -6,15 +6,15 @@
  *
  */
 
-import { ElementType, Fragment, ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { fonts, mq, spacing, breakpoints, colors, spacingUnit } from '@ndla/core';
-import { Spinner } from '@ndla/icons';
-import { ChevronRight } from '@ndla/icons/common';
-import SafeLink from '@ndla/safelink';
-import Tooltip from '@ndla/tooltip';
-import { uuid } from '@ndla/util';
+import { ElementType, Fragment, ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { fonts, mq, spacing, breakpoints, colors, spacingUnit } from "@ndla/core";
+import { Spinner } from "@ndla/icons";
+import { ChevronRight } from "@ndla/icons/common";
+import SafeLink from "@ndla/safelink";
+import Tooltip from "@ndla/tooltip";
+import { uuid } from "@ndla/util";
 
 interface ItemType {
   id: string | number;
@@ -69,7 +69,7 @@ const PillsWrapper = styled.div`
   margin-right: ${spacing.small};
   padding: 0 ${spacingUnit / 3}px;
   border-radius: 50%;
-  ${fonts.sizes('12px', '20px')};
+  ${fonts.sizes("12px", "20px")};
   font-weight: ${fonts.weight.semibold};
 `;
 
@@ -96,15 +96,15 @@ const StyledIngress = styled.p`
   margin: 0 0 ${spacing.normal} 0;
   width: 100%;
   flex-grow: 1;
-  ${fonts.sizes('14px', '22px')};
+  ${fonts.sizes("14px", "22px")};
 
   ${mq.range({ from: breakpoints.tablet })} {
-    ${fonts.sizes('16px', '24px')};
+    ${fonts.sizes("16px", "24px")};
     max-width: 550px;
   }
 
   ${mq.range({ from: breakpoints.desktop })} {
-    ${fonts.sizes('18px', '26px')};
+    ${fonts.sizes("18px", "26px")};
     max-width: 600px;
   }
 `;
@@ -114,17 +114,17 @@ const StyledSubjects = styled.div`
   align-items: center;
   flex-wrap: wrap;
   margin-bottom: ${spacing.normal};
-  ${fonts.sizes('14px', '16px')};
+  ${fonts.sizes("14px", "16px")};
 
   ${mq.range({ from: breakpoints.desktop })} {
-    ${fonts.sizes('16px', '18px')};
+    ${fonts.sizes("16px", "18px")};
   }
 
   & > span {
     text-transform: uppercase;
     color: ${colors.text.light};
     padding-right: ${spacing.small};
-    ${fonts.sizes('14px', '16px')};
+    ${fonts.sizes("14px", "16px")};
   }
 
   ul {
@@ -137,7 +137,7 @@ const StyledSubjects = styled.div`
   }
 
   li {
-    margin: 0;
+    padding: 0;
     position: relative;
     line-height: 1rem;
 
@@ -150,7 +150,7 @@ const StyledSubjects = styled.div`
     }
 
     &::after {
-      content: '';
+      content: "";
       width: 1px;
       height: 15px;
       background: ${colors.brand.greyLight};
@@ -194,10 +194,10 @@ const StyledSearchResultItem = styled.li`
 
   h1 {
     font-weight: 600;
-    ${fonts.sizes('16px', '20px')};
+    ${fonts.sizes("16px", "20px")};
 
     ${mq.range({ from: breakpoints.desktop })} {
-      ${fonts.sizes('22px', '28px')};
+      ${fonts.sizes("22px", "28px")};
     }
 
     a {
@@ -219,9 +219,9 @@ const StyledBreadcrumb = styled.div`
   flex-wrap: wrap;
   color: ${colors.text.light};
   margin-bottom: ${spacing.normal};
-  ${fonts.sizes('14px', '18px')};
+  ${fonts.sizes("14px", "18px")};
   ${mq.range({ from: breakpoints.desktop })} {
-    ${fonts.sizes('16px', '24px')};
+    ${fonts.sizes("16px", "24px")};
   }
   [data-icon] {
     width: ${spacing.small};
@@ -241,7 +241,7 @@ export const SearchResultItem = ({
   children,
 }: SearchResultItemProps) => {
   const itemBreadcrumb = (breadcrumbs: string[] = [], itemBreadcrumb?: boolean) => {
-    const Breadcrumb: ElementType = itemBreadcrumb ? StyledBreadcrumb : 'div';
+    const Breadcrumb: ElementType = itemBreadcrumb ? StyledBreadcrumb : "div";
     if (breadcrumbs.length > 0) {
       return (
         <Breadcrumb>
@@ -266,10 +266,10 @@ export const SearchResultItem = ({
       <article>
         <StyledHeader>
           <h1>
-            {item.url && typeof item.url !== 'string' ? (
+            {item.url && typeof item.url !== "string" ? (
               <a {...item.url}>{item.title}</a>
             ) : (
-              <SafeLink to={item.url ?? ''}>{item.title}</SafeLink>
+              <SafeLink to={item.url ?? ""}>{item.title}</SafeLink>
             )}
           </h1>
           <ContentTypeWrapper>{item.contentTypeIcon}</ContentTypeWrapper>
@@ -290,10 +290,10 @@ export const SearchResultItem = ({
               {item.subjects.map((subject) => (
                 <li key={uuid()}>
                   <Tooltip tooltip={itemBreadcrumb(subject.breadcrumb)}>
-                    {subject.url && typeof subject.url !== 'string' ? (
+                    {subject.url && typeof subject.url !== "string" ? (
                       <a {...subject.url}>{subject.title}</a>
                     ) : (
-                      <SafeLink to={subject.url ?? ''}>{subject.title}</SafeLink>
+                      <SafeLink to={subject.url ?? ""}>{subject.title}</SafeLink>
                     )}
                   </Tooltip>
                 </li>
@@ -314,28 +314,27 @@ interface SearchResultListProps {
 const EmptyResultList = styled.article`
   margin-top: ${spacing.large};
   h1 {
-    ${fonts.sizes('22px', '32px')};
+    ${fonts.sizes("22px", "32px")};
     font-weight: ${fonts.weight.bold};
     margin: 0 0 ${spacing.small};
   }
 
   p {
-    ${fonts.sizes('16px', '22px')};
+    ${fonts.sizes("16px", "22px")};
     margin: 0;
     font-family: ${fonts.serif};
 
     ${mq.range({ from: breakpoints.desktop })} {
-      ${fonts.sizes('18px', '32px')};
+      ${fonts.sizes("18px", "32px")};
     }
   }
 `;
 
 const ResultList = styled.ul`
   list-style: none;
-  margin: 0;
   padding: 0;
   ${mq.range({ from: breakpoints.desktop })} {
-    margin: ${spacing.medium} 0 0 0;
+    padding: ${spacing.medium} 0 0 0;
   }
 `;
 
@@ -349,17 +348,17 @@ export const SearchResultList = ({ results, loading }: SearchResultListProps) =>
   }
   return results.length === 0 ? (
     <EmptyResultList>
-      <h1>{t('searchPage.searchResultListMessages.noResultHeading')}</h1>
-      <p>{t('searchPage.searchResultListMessages.noResultDescription')}</p>
+      <h1>{t("searchPage.searchResultListMessages.noResultHeading")}</h1>
+      <p>{t("searchPage.searchResultListMessages.noResultDescription")}</p>
     </EmptyResultList>
   ) : (
     <ResultList>
       {results.map((item) => (
         <SearchResultItem
-          key={`search_result_item_${typeof item.url === 'object' ? item.url.href : item.url}`}
+          key={`search_result_item_${typeof item.url === "object" ? item.url.href : item.url}`}
           item={item}
-          additionalContentTooltip={t('resource.tooltipAdditionalTopic')}
-          subjectsLabel={t('searchPage.searchResultListMessages.subjectsLabel')}
+          additionalContentTooltip={t("resource.tooltipAdditionalTopic")}
+          subjectsLabel={t("searchPage.searchResultListMessages.subjectsLabel")}
         >
           {item.children}
         </SearchResultItem>

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/component.search-result.scss

@@ -293,7 +293,6 @@
       align-items: center;
       flex-wrap: wrap;
       list-style: none;
-      margin: 0;
       padding: 0;
     }
 

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