@ndla/ui 50.7.3 → 50.8.1

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;
@@ -21,7 +21,6 @@ type StyledActiveFiltersProps = {
 };
 
 const StyledActiveFilters = styled.ul<StyledActiveFiltersProps>`
-  margin: 0;
   padding: 0;
   display: none;
   ${(props: StyledActiveFiltersProps) =>
@@ -84,10 +83,10 @@ const StyledActiveFilters = styled.ul<StyledActiveFiltersProps>`
 const StyledActiveFilterWrapper = styled.li`
   list-style: none;
   display: flex;
-  margin: 0;
-  margin-right: ${spacing.xsmall};
+  padding: 0;
+  padding-right: ${spacing.xsmall};
   ${mq.range({ until: breakpoints.desktop })} {
-    margin-bottom: ${spacing.xsmall};
+    padding-bottom: ${spacing.xsmall};
   }
 `;
 
@@ -120,7 +119,7 @@ const ActiveFilters = ({
       <StyledActiveFilterWrapper key={filterKey}>
         {filterLength > 1 ? (
           <Tooltip
-            tooltip={t('searchPage.searchFilterMessages.removeFilter', {
+            tooltip={t("searchPage.searchFilterMessages.removeFilter", {
               filterName: filter.title,
             })}
           >
@@ -138,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"
@@ -148,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;
@@ -52,12 +52,12 @@ const StyledList = styled.ul`
   animation-duration: 500ms;
 `;
 const StyledListItem = styled.li`
-  margin-bottom: 0;
+  padding-bottom: 0;
   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>

package/src/SearchTypeResult/SearchHeader.tsx

@@ -5,17 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { FormEvent, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { ButtonV2 } from '@ndla/button';
-import { breakpoints, fonts, mq, spacing } from '@ndla/core';
+import { FormEvent, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { ButtonV2 } from "@ndla/button";
+import { breakpoints, fonts, mq, spacing } from "@ndla/core";
 
-import SubjectFilters, { SubjectFilterProps } from './components/SubjectFilters';
-import SearchFieldHeader from './SearchFieldHeader';
-import CompetenceGoalItem from '../CompetenceGoalTab/CompetenceGoalItem';
-import CoreElementItem from '../CompetenceGoalTab/CoreElementItem';
-import { CompetenceGoalsItemType, CoreElementsItemType } from '../types';
+import SubjectFilters, { SubjectFilterProps } from "./components/SubjectFilters";
+import SearchFieldHeader from "./SearchFieldHeader";
+import CompetenceGoalItem from "../CompetenceGoalTab/CompetenceGoalItem";
+import CoreElementItem from "../CompetenceGoalTab/CoreElementItem";
+import { CompetenceGoalsItemType, CoreElementsItemType } from "../types";
 
 const Wrapper = styled.div`
   margin-top: ${spacing.normal};
@@ -44,10 +44,9 @@ const GrepCodesWrapper = styled.div`
 
 const GrepCodesList = styled.ul`
   padding: 0;
-  margin: 0;
   li {
     border: 0;
-    margin: 0;
+    padding: 0;
   }
 `;
 
@@ -57,7 +56,7 @@ const PhraseText = styled.div`
 const PhraseSuggestionText = styled.div``;
 
 const GrepCodesLabel = styled.div`
-  ${fonts.sizes('16px', '32px')};
+  ${fonts.sizes("16px", "32px")};
   text-transform: uppercase;
 `;
 
@@ -66,8 +65,8 @@ type Props = {
   searchPhraseSuggestion?: string;
   searchPhraseSuggestionOnClick?: () => void;
   searchValue?: string;
-  filters: SubjectFilterProps['filters'];
-  activeFilters?: SubjectFilterProps['activeFilters'];
+  filters: SubjectFilterProps["filters"];
+  activeFilters?: SubjectFilterProps["activeFilters"];
   competenceGoals?: CompetenceGoalsItemType[];
   coreElements?: CoreElementsItemType[];
   onSearchValueChange: (value: string) => void;
@@ -98,22 +97,22 @@ const SearchHeader = ({
     const handleChange = (e: MediaQueryListEvent | MediaQueryList) => {
       setIsNarrowScreen(e.matches);
     };
-    isNarrowScreenMatch.addEventListener('change', handleChange);
+    isNarrowScreenMatch.addEventListener("change", handleChange);
     handleChange(isNarrowScreenMatch);
     return () => {
-      isNarrowScreenMatch.removeEventListener('change', handleChange);
+      isNarrowScreenMatch.removeEventListener("change", handleChange);
     };
   }, []);
 
   const phraseText = noResults ? (
-    t('searchPage.noHitsShort', { query: searchPhrase })
+    t("searchPage.noHitsShort", { query: searchPhrase })
   ) : (
     <>
-      {t('searchPage.resultType.showingSearchPhrase')} <b>&ldquo;{searchPhrase}&rdquo;</b>
+      {t("searchPage.resultType.showingSearchPhrase")} <b>&ldquo;{searchPhrase}&rdquo;</b>
     </>
   );
   const removeFilterSuggestion =
-    noResults && activeFilters?.filters.length ? t('searchPage.removeFilterSuggestion') : undefined;
+    noResults && activeFilters?.filters.length ? t("searchPage.removeFilterSuggestion") : undefined;
   return (
     <Wrapper>
       <SearchInputWrapper>
@@ -134,11 +133,11 @@ const SearchHeader = ({
               <PhraseText>{removeFilterSuggestion}</PhraseText>
             </>
           )}
-          {loading && <div aria-label={t('loading')} />}
+          {loading && <div aria-label={t("loading")} />}
         </div>
         {searchPhraseSuggestion && (
           <PhraseSuggestionText>
-            {t('searchPage.resultType.searchPhraseSuggestion')}{' '}
+            {t("searchPage.resultType.searchPhraseSuggestion")}{" "}
             <ButtonV2 variant="link" onClick={searchPhraseSuggestionOnClick}>
               [{searchPhraseSuggestion}]
             </ButtonV2>
@@ -148,7 +147,7 @@ const SearchHeader = ({
           <GrepCodesWrapper>
             {competenceGoals?.length && (
               <>
-                <GrepCodesLabel>{t('competenceGoals.competenceGoalItem.title')}</GrepCodesLabel>
+                <GrepCodesLabel>{t("competenceGoals.competenceGoalItem.title")}</GrepCodesLabel>
                 <GrepCodesList>
                   {competenceGoals.map((e) => (
                     <CompetenceGoalItem key={e.id} id={e.id} title={e.title} goals={e.goals} />
@@ -161,7 +160,7 @@ const SearchHeader = ({
         {!!coreElements?.length && (
           <GrepCodesWrapper>
             <>
-              <GrepCodesLabel>{t('competenceGoals.competenceTabCorelabel')}</GrepCodesLabel>
+              <GrepCodesLabel>{t("competenceGoals.competenceTabCorelabel")}</GrepCodesLabel>
               <GrepCodesList>
                 {coreElements.map((e) => (
                   <CoreElementItem key={e.id} id={e.id} title={e.title} text={e.text} url={e.url} />

package/src/SearchTypeResult/SearchItem.tsx

@@ -6,18 +6,18 @@
  *
  */
 
-import parse from 'html-react-parser';
-import { ReactNode, useRef } from 'react';
-import styled from '@emotion/styled';
-
-import { animations, colors, fonts, spacing } from '@ndla/core';
-import SafeLink from '@ndla/safelink';
-
-import ItemContexts, { ItemContextsType } from './components/ItemContexts';
-import ItemResourceHeader from './components/ItemResourceHeader';
-import ItemTopicHeader from './components/ItemTopicHeader';
-import { ContentType } from './SearchTypeResult';
-import constants from '../model';
+import parse from "html-react-parser";
+import { ReactNode, useRef } from "react";
+import styled from "@emotion/styled";
+
+import { animations, colors, fonts, spacing } from "@ndla/core";
+import SafeLink from "@ndla/safelink";
+
+import ItemContexts, { ItemContextsType } from "./components/ItemContexts";
+import ItemResourceHeader from "./components/ItemResourceHeader";
+import ItemTopicHeader from "./components/ItemTopicHeader";
+import { ContentType } from "./SearchTypeResult";
+import constants from "../model";
 const { contentTypes } = constants;
 
 interface ItemTypeProps {
@@ -51,7 +51,7 @@ const ButtonWrapper = styled.div`
 
 const ItemTitle = styled.h3<ItemTypeProps>`
   display: inline;
-  ${fonts.sizes('24px', '28px')};
+  ${fonts.sizes("24px", "28px")};
   color: ${colors.brand.primary};
   margin-bottom: ${(props) => props.isTopic && spacing.small};
   font-weight: ${fonts.weight.semibold};
@@ -67,7 +67,7 @@ const StyledLink = styled(SafeLink)`
   color: ${colors.brand.primary};
 
   :after {
-    content: '';
+    content: "";
     position: absolute;
     z-index: 1;
     top: 0;
@@ -78,11 +78,11 @@ const StyledLink = styled(SafeLink)`
 `;
 
 const ItemText = styled.div<ItemTypeProps>`
-  ${fonts.sizes('16px', '24px')};
+  ${fonts.sizes("16px", "24px")};
   ${(props) =>
     props.isTopic &&
     `
-    ${fonts.sizes('18px', '28px')};
+    ${fonts.sizes("18px", "28px")};
     `};
 `;
 
@@ -93,16 +93,12 @@ const ContentWrapper = styled.main`
   padding: ${spacing.small} ${spacing.normal};
 `;
 
-const ButtonContainer = styled.div`
-  z-index: 1;
-`;
-
 export interface SearchItemProps {
   id: string | number;
   title: string;
   url: string;
   ingress: string;
-  contexts?: ItemContextsType['contexts'];
+  contexts?: ItemContextsType["contexts"];
   img?: { url: string; alt: string };
   labels?: string[];
   type?: ContentType;

package/src/SearchTypeResult/SearchItemList.tsx

@@ -6,18 +6,18 @@
  *
  */
 
-import parse from 'html-react-parser';
-import { Fragment } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
+import parse from "html-react-parser";
+import { Fragment } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
 
-import { animations, colors, fonts, spacing } from '@ndla/core';
-import SafeLink from '@ndla/safelink';
+import { animations, colors, fonts, spacing } from "@ndla/core";
+import SafeLink from "@ndla/safelink";
 
-import ItemContexts from './components/ItemContexts';
-import { SearchItemType } from './SearchItem';
-import ContentTypeBadge from '../ContentTypeBadge';
-import constants from '../model';
+import ItemContexts from "./components/ItemContexts";
+import { SearchItemType } from "./SearchItem";
+import ContentTypeBadge from "../ContentTypeBadge";
+import constants from "../model";
 const { contentTypes } = constants;
 
 const Container = styled.div`
@@ -59,7 +59,7 @@ const TextWrapper = styled.div`
 const ContentTypeWrapper = styled.div`
   display: flex;
   align-items: center;
-  ${fonts.sizes('12px', '16px')};
+  ${fonts.sizes("12px", "16px")};
   font-weight: ${fonts.weight.semibold};
 `;
 const ContentTypeIconWrapper = styled.div`
@@ -71,7 +71,7 @@ const ItemTitleWrapper = styled.div`
 `;
 
 const ItemTitle = styled.h3`
-  ${fonts.sizes('24px', '28px')};
+  ${fonts.sizes("24px", "28px")};
   color: ${colors.brand.primary};
   font-weight: ${fonts.weight.semibold};
   overflow-wrap: anywhere;
@@ -84,7 +84,7 @@ const ItemTitle = styled.h3`
 `;
 
 const ItemText = styled.div`
-  ${fonts.sizes('16px', '24px')};
+  ${fonts.sizes("16px", "24px")};
   flex: 1 auto;
 `;
 
@@ -132,7 +132,7 @@ const SearchItemList = ({ item, type }: SearchItemType) => {
                 <>
                   {labels.map((label) => (
                     <Fragment key={label}>
-                      {' '}
+                      {" "}
                       <>&#8226;</> {label}
                     </Fragment>
                   ))}