@ndla/ui 35.0.8 → 35.0.10

package/src/Figure/FigureExpandButton.tsx

@@ -19,7 +19,8 @@ export function FigureExpandButton({ messages, typeClass }: Props) {
       data-ariaexpanded={messages.zoomOutImageButtonLabel}
       aria-label={messages.zoomImageButtonLabel}
       data-figure-button
-      data-classtype={typeClass}>
+      data-classtype={typeClass}
+    >
       <ExpandTwoArrows className="contracted-icon" />
       <ArrowCollapse className="expanded-icon" />
     </button>

package/src/Figure/FigureOpenDialogButton.tsx

@@ -24,7 +24,8 @@ export const FigureOpenDialogButton = ({ messages, type }: Props) => {
       className="c-figure__fullscreen-btn"
       data-aria={messages.zoomImageButtonLabel}
       data-ariaexpanded={messages.zoomOutImageButtonLabel}
-      aria-label={messages.zoomImageButtonLabel}>
+      aria-label={messages.zoomImageButtonLabel}
+    >
       {type === 'image' && <ExpandTwoArrows className="contracted-icon" />}
       {type === 'h5p' && <CursorClick style={{ width: '24px', height: '24px' }} />}
       {type === 'iframe' && <CursorClick style={{ width: '24px', height: '24px' }} />}

package/src/Filter/FilterButtons.tsx

@@ -117,7 +117,8 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
                 shape="pill"
                 onClick={() => {
                   onFilterToggle(item.value);
-                }}>
+                }}
+              >
                 <StyledButtonContent>{item.label}</StyledButtonContent>
                 <StyledButtonContentSelected>
                   <CrossIcon />
@@ -139,7 +140,8 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
                   </StyledButtonContentSelected>
                 </ButtonV2>
               </StyledButtonElementWrapper>
-            }>
+            }
+          >
             {(onClose: () => void) => (
               <>
                 <ModalHeader modifier={['left-align']}>
@@ -177,7 +179,8 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
                   size="normal"
                   colorTheme={!item.selected ? 'greyLighter' : undefined}
                   shape="pill"
-                  onClick={() => onFilterToggle(item.value)}>
+                  onClick={() => onFilterToggle(item.value)}
+                >
                   <StyledButtonContent>{item.label}</StyledButtonContent>
                   {item.selected && (
                     <StyledButtonContentSelected>

package/src/Filter/FilterList.tsx

@@ -69,7 +69,8 @@ const FilterList = ({
         {...classes('item-wrapper', {
           'aligned-grouping': !!alignedGroup,
           'collapse-mobile': !!collapseMobile,
-        })}>
+        })}
+      >
         {options.map((option, index) => {
           const itemModifiers = [];
 
@@ -116,7 +117,8 @@ const FilterList = ({
           type="button"
           onClick={() => {
             setVisibleCount((prev) => (prev === defaultVisibleCount ? options.length : defaultVisibleCount));
-          }}>
+          }}
+        >
           {visibleCount === defaultVisibleCount ? (
             <>
               <span>{showLabel}</span> <ChevronDown />

package/src/Filter/FilterListPhone.tsx

@@ -144,7 +144,8 @@ const FilterListPhone = ({
             <ButtonV2 variant="outline" {...classes('modal-button')}>
               {messages.openFilter}
             </ButtonV2>
-          }>
+          }
+        >
           {(onClose) => (
             <>
               <ModalHeader modifier={['left-align']}>
@@ -167,7 +168,8 @@ const FilterListPhone = ({
                       'aligned-grouping': !!alignedGroup,
                       'collapse-mobile': !!collapseMobile,
                       'grouped-options': !!isGroupedOptions,
-                    })}>
+                    })}
+                  >
                     {options.map((option) => {
                       const itemModifiers = [];
 
@@ -254,7 +256,8 @@ const FilterListPhone = ({
               type="button"
               onClick={() => {
                 setVisibleCount((prev) => (prev === defaultVisibleCount ? options.length : defaultVisibleCount));
-              }}>
+              }}
+            >
               {visibleCount === defaultVisibleCount ? (
                 <>
                   <span>{showLabel}</span> <ChevronDown />

package/src/Footer/FooterLinks.tsx

@@ -110,7 +110,8 @@ const FooterLinks = ({ links }: FooterLinksProps) => {
                   aria-label={t(`footer.ndlaLinks.${link.key}`)}
                   to={link.url}
                   target="_blank"
-                  rel="noopener noreferrer">
+                  rel="noopener noreferrer"
+                >
                   {t(`footer.ndlaLinks.${link.key}`)}
                 </StyledSafeLink>
               </div>

package/src/Frontpage/FrontpageAllSubjects.tsx

@@ -163,7 +163,8 @@ const renderList = (
                           onNavigate();
                         }
                       }}
-                      to={subject.path || ''}>
+                      to={subject.path || ''}
+                    >
                       {subject.name}
                     </SafeLink>
                     <StyledSpacingElement />

package/src/Frontpage/FrontpageProgramMenu.tsx

@@ -61,14 +61,16 @@ const FrontpageProgramMenu = ({ programItems, subjectCategories }: Props) => {
           onClick={() => toggleSubjects(false)}
           colorTheme={showSubjects ? 'lighter' : undefined}
           size="medium"
-          shape="pill">
+          shape="pill"
+        >
           <StyledMenuItem>{t('frontpageMenu.program')}</StyledMenuItem>
         </ButtonV2>
         <ButtonV2
           onClick={() => toggleSubjects(true)}
           colorTheme={!showSubjects ? 'lighter' : undefined}
           size="medium"
-          shape="pill">
+          shape="pill"
+        >
           <StyledMenuItem>{t('frontpageMenu.allsubjects')}</StyledMenuItem>
         </ButtonV2>
       </StyledMenu>

package/src/Image/ImageLink.tsx

@@ -29,7 +29,8 @@ export function ImageLink({ src, crop, children, ...rest }: Props) {
       target="_blank"
       href={`${src}?${makeSrcQueryString(undefined, crop)}`}
       rel="noopener noreferrer"
-      {...rest}>
+      {...rest}
+    >
       {children}
     </StyledLink>
   );

package/src/LanguageSelector/LanguageSelector.tsx

@@ -84,7 +84,8 @@ const LanguageSelector = <T extends string>({ locales, onSelect, inverted }: Pro
                 variant="ghost"
                 shape="sharp"
                 aria-label={t(`changeLanguage.${locale}`)}
-                onClick={() => onSelect(locale)}>
+                onClick={() => onSelect(locale)}
+              >
                 <ActivityIndicator>{i18n.language === locale && <ActiveIndicator />}</ActivityIndicator>
                 <Text>{t(`languages.${locale}`)}</Text>
               </LanguageChoice>

package/src/LearningPaths/LearningPathMenu.tsx

@@ -124,7 +124,8 @@ const LearningPathMenu = ({
             <div
               css={css`
                 padding-left: ${spacing.small};
-              `}>
+              `}
+            >
               <Tooltip tooltip={t('learningPath.openMenuTooltip')}>
                 <StyledToggleMenubutton type="button" onClick={() => toggleOpenState(!isOpen)}>
                   {!isOpen ? <ArrowExpandRight /> : <ArrowExpandLeft />}

package/src/LearningPaths/LearningPathMenuAside.tsx

@@ -109,7 +109,8 @@ const LearningPathMenuAside = ({ lastUpdated, learningPathURL, copyright, isOpen
         target="_blank"
         rel="noopener noreferrer"
         variant="outline"
-        inverted={invertedStyle}>
+        inverted={invertedStyle}
+      >
         {t('learningPath.createLearningPathButtonText')}
       </SafeLinkButton>
     </StyledAside>

package/src/LearningPaths/LearningPathMenuContent.tsx

@@ -249,11 +249,13 @@ const LearningPathMenuContent = ({
             afterCurrent={index > currentIndex}
             isOpen={isOpen}
             invertedStyle={invertedStyle}
-            indexNumber={index}>
+            indexNumber={index}
+          >
             <SafeLink
               onClick={onStepNavigate}
               to={toLearningPathUrl(learningPathId, id)}
-              aria-describedby={`read-${id}`}>
+              aria-describedby={`read-${id}`}
+            >
               <StyledContentType>
                 <ContentTypeBadge type={type ?? constants.contentTypes.LEARNING_PATH} background size="small" />
                 {hasRead(id, cookies) && (

package/src/LearningPaths/LearningPathMenuModalWrapper.tsx

@@ -47,7 +47,8 @@ const ModalWrapperComponent = ({ innerWidth, children }: ModalWrapperProps) => {
             <LearningPath />
             <span>{t('learningPath.openMenuTooltip')}</span>
           </ButtonV2>
-        }>
+        }
+      >
         {(closeModal: VoidFunction) => (
           <>
             <ModalHeader>

package/src/LetterFilter/LetterFilter.tsx

@@ -62,7 +62,8 @@ const LetterFilter = ({ value, onChange, enabledLetters }: Props) => {
               variant={!selected ? 'ghost' : undefined}
               colorTheme={!selected ? 'lighter' : 'primary'}
               disabled={disabled}
-              size="xsmall">
+              size="xsmall"
+            >
               {letter}
             </StyledButton>
           </li>

package/src/Logo/SvgLogo.tsx

@@ -37,7 +37,8 @@ export const SvgLogo = ({ name = true, color = '#000000', locale }: Props) => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 376 152"
     fill={color}
-    fillRule="evenodd">
+    fillRule="evenodd"
+  >
     <path d="M355 67h-84v51h102V51h-18v16zm0 14h-66v19h66V81zm-84-48v18h84V33h-84z" />
     <rect width="18" height="118" x="236" transform="matrix(-1 0 0 1 490 0)" />
     <path d="M201 100V51h-65v49h65zm18 18V0h-18v33h-83v85h101z" />

package/src/Masthead/Masthead.tsx

@@ -118,7 +118,8 @@ export const Masthead = ({ children, fixed, ndlaFilm, skipToMainContentId, messa
           <MessageBanner
             key={message.number}
             showCloseButton={message.closable}
-            onClose={() => onCloseAlert?.(message.number)}>
+            onClose={() => onCloseAlert?.(message.number)}
+          >
             {message.content}
           </MessageBanner>
         ))}

package/src/Masthead/MastheadAuthModal.tsx

@@ -49,7 +49,8 @@ const MastheadAuthModal = ({ inverted, ...rest }: Props) => {
           size="medium"
           colorTheme="lighter"
           variant="ghost"
-          aria-label={t('user.buttonLogIn')}>
+          aria-label={t('user.buttonLogIn')}
+        >
           {t('myNdla.myNDLA')}
           <Feide />
         </StyledButton>

package/src/Masthead/MastheadSearchModal.tsx

@@ -106,7 +106,8 @@ const MastheadSearchModal = ({ onClose: onSearchClose, children, hideOnNarrowScr
         <ToggleSearchButton hideOnNarrowScreen={hideOnNarrowScreen} ndlaFilm={ndlaFilm}>
           {t('masthead.menu.search')}
         </ToggleSearchButton>
-      }>
+      }
+    >
       {(closeModal: VoidFunction) => (
         <>
           <div css={extraBackdrop} />
@@ -116,7 +117,8 @@ const MastheadSearchModal = ({ onClose: onSearchClose, children, hideOnNarrowScr
               aria-label={t('welcomePage.closeSearch')}
               variant="ghost"
               colorTheme="light"
-              onClick={closeModal}>
+              onClick={closeModal}
+            >
               <Cross className="c-icon--medium" />
             </IconButton>
           </StyledHeader>

package/src/MyNdla/Resource/FolderInput.tsx

@@ -91,7 +91,8 @@ const FolderInput = forwardRef<HTMLInputElement, Props>(({ loading, error, onClo
                   aria-label={t('save')}
                   title={t('save')}
                   size="small"
-                  onClick={onSave}>
+                  onClick={onSave}
+                >
                   <Done />
                 </IconButtonV2>
               )}

package/src/NDLAFilm/CategorySelect.tsx

@@ -152,7 +152,8 @@ const CategorySelect = ({ resourceTypes, resourceTypeSelected, ariaControlId, on
         aria-controls="selectCategory"
         type="button"
         tabIndex={resourceTypesIsOpen ? -1 : 0}
-        onClick={() => setResourceTypesIsOpen(true)}>
+        onClick={() => setResourceTypesIsOpen(true)}
+      >
         <div>
           <span>{t('ndlaFilm.search.chooseCategory')}</span>
           <small>{(resourceTypeSelected && resourceTypeSelected.name) || t('ndlaFilm.search.categoryFromNdla')}</small>
@@ -168,7 +169,8 @@ const CategorySelect = ({ resourceTypes, resourceTypeSelected, ariaControlId, on
             onDeactivate: () => setResourceTypesIsOpen(false),
             clickOutsideDeactivates: true,
             escapeDeactivates: true,
-          }}>
+          }}
+        >
           <DropdownWrapper id="selectCategory" offsetDropdown={offsetDropDown}>
             <DropdownButton aria-controls={ariaControlId} type="button" onClick={() => onSelect()}>
               <span>{t('ndlaFilm.search.categoryFromNdla')}</span>
@@ -180,7 +182,8 @@ const CategorySelect = ({ resourceTypes, resourceTypeSelected, ariaControlId, on
                 ref={(el) => updateRef(el, resourceType.id)}
                 onClick={() => onSelect(resourceType.id)}
                 data-id={resourceType.id}
-                key={resourceType.id}>
+                key={resourceType.id}
+              >
                 <span>{resourceType.name}</span>
               </DropdownButton>
             ))}

package/src/NDLAFilm/FilmContentCard.tsx

@@ -43,13 +43,15 @@ const FilmContentCard = ({
       to={path}
       aria-describedby={contentTypeId}
       columnWidth={columnWidth}
-      style={{ marginRight: `${distanceBetweenItems}px` }}>
+      style={{ marginRight: `${distanceBetweenItems}px` }}
+    >
       <StyledImage
         role="img"
         columnWidth={columnWidth}
         style={{
           backgroundImage: `url(${backgroundImage}?${makeSrcQueryString(600)})`,
-        }}>
+        }}
+      >
         {movieResourceTypes && !hideTags && (
           <FilmContentCardTags
             id={contentTypeId}

package/src/NDLAFilm/FilmSlideshow.tsx

@@ -422,7 +422,8 @@ const FilmSlideshow = ({ autoSlide = false, slideshow = [], slideInterval = 5000
           style={{
             width: slideshowWidth,
             transform: getSlidePosition(slideIndex),
-          }}>
+          }}
+        >
           {renderSlideItem(slideshow[slideshow.length - 1])}
           {slideshow.map(renderSlideItem)}
           {renderSlideItem(slideshow[0])}

package/src/NDLAFilm/NavigationArrow.tsx

@@ -98,7 +98,8 @@ const NavigationArrow = ({ slideIndexTarget, gotoSlide, rightArrow }: Props) =>
         tabIndex={-1}
         onClick={() => {
           gotoSlide(slideIndexTarget, true);
-        }}>
+        }}
+      >
         <Chevron css={chevronCss} />
       </NavigationArrowButton>
     </StyledNavigationArrow>

package/src/NDLAFilm/SlideshowIndicator.tsx

@@ -71,7 +71,8 @@ const SlideshowIndicator = ({ slideshow, activeSlide, gotoSlide }: Props) => {
           active={index === activeSlide}
           key={`indicator_${index}`}
           type="button"
-          onClick={() => gotoSlide(index, true)}>
+          onClick={() => gotoSlide(index, true)}
+        >
           <span />
         </SlideshowIndicatorDot>
       ))}

package/src/Navigation/NavigationBox.tsx

@@ -233,7 +233,8 @@ export const NavigationBox = ({
             <StyledListElementWrapper
               isAdditionalResource={item.isAdditionalResource}
               lighter={colorMode === 'light'}
-              selected={item.selected}>
+              selected={item.selected}
+            >
               <ListElementType
                 to={item.url ?? ''}
                 colorTheme={item.selected ? 'darker' : colorMode}
@@ -244,12 +245,14 @@ export const NavigationBox = ({
                   if (onClick) {
                     onClick(e, item.id);
                   }
-                }}>
+                }}
+              >
                 <StyledButtonContent>
                   <StyledButtonContentText
                     isAdditionalResource={item.isAdditionalResource}
                     isRestrictedResource={item.isRestrictedResource}
-                    lighter={colorMode === 'light'}>
+                    lighter={colorMode === 'light'}
+                  >
                     <StyledMarksWrapper>
                       {item.isAdditionalResource && (
                         <StyledAdditionalResourceMark lighter={colorMode === 'light'} selected={item.selected}>

package/src/Navigation/NavigationTopicAbout.tsx

@@ -150,7 +150,8 @@ export const NavigationTopicAbout = ({
                 variant="link"
                 onClick={() => {
                   onToggleShowContent();
-                }}>
+                }}
+              >
                 {showContent ? (
                   <>
                     {t('navigation.showShorterDescription')} <ChevronUp />

package/src/Notion/ConceptNotion.tsx

@@ -81,7 +81,8 @@ const ConceptNotion = ({ concept, disableScripts, type, hideIconsAndAuthors, fig
       licenseString={concept.copyright?.license?.license ?? ''}
       type="concept"
       hideIconsAndAuthors={hideIconsAndAuthors}
-      figureType={figureType}>
+      figureType={figureType}
+    >
       <UINotion
         id={notionId}
         title={concept.title}
@@ -108,7 +109,8 @@ const ConceptNotion = ({ concept, disableScripts, type, hideIconsAndAuthors, fig
                       source={concept.source}
                     />
                   </>
-                }>
+                }
+              >
                 {concept.visualElement.image && (
                   <NotionImage
                     type={type}
@@ -146,7 +148,8 @@ const ConceptNotion = ({ concept, disableScripts, type, hideIconsAndAuthors, fig
                       source={concept.source}
                     />
                   </>
-                }>
+                }
+              >
                 {concept.image && (
                   <NotionImage
                     type={type}
@@ -158,7 +161,8 @@ const ConceptNotion = ({ concept, disableScripts, type, hideIconsAndAuthors, fig
               </Notion>
             </ImageWrapper>
           ) : undefined
-        }></UINotion>
+        }
+      ></UINotion>
     </FigureNotion>
   );
 };

package/src/Notion/FigureNotion.tsx

@@ -72,7 +72,8 @@ const FigureNotion = ({
               reuseLabel={t(`${type}.reuse`)}
               authors={authors}
               licenseRights={license.rights}
-              hideIconsAndAuthors={hideIconsAndAuthors}>
+              hideIconsAndAuthors={hideIconsAndAuthors}
+            >
               <FigureLicenseDialog
                 id={id}
                 authors={groupedAuthors}
@@ -86,7 +87,8 @@ const FigureNotion = ({
                   source: t('source'),
                   learnAboutLicenses: t('license.learnMore'),
                   title: t('title'),
-                }}>
+                }}
+              >
                 {licenseButtons}
               </FigureLicenseDialog>
             </FigureCaption>

package/src/Notion/NotionVisualElement.tsx

@@ -66,7 +66,8 @@ const NotionVisualElement = ({ visualElement, id, figureId }: Props) => {
       copyright={visualElement.copyright}
       licenseString={visualElement.copyright?.license?.license ?? ''}
       licenseButtons={visualElement.licenseButtons}
-      type={type}>
+      type={type}
+    >
       {visualElement.image?.src ? (
         <img src={visualElement.image?.src} alt={visualElement.image.alt} />
       ) : (

package/src/Programme/ProgrammeSubjects.tsx

@@ -61,7 +61,8 @@ const ProgrammeSubjects = ({ grades, onNavigate, selectedGrade = 'vg1' }: Props)
                 colorTheme={item !== grade ? 'lighter' : undefined}
                 shape="pill"
                 size="normal"
-                aria-current={current}>
+                aria-current={current}
+              >
                 {item.name}
               </SafeLinkButton>
             </li>

package/src/RelatedArticleList/RelatedArticleList.tsx

@@ -83,7 +83,8 @@ const RelatedArticleList = ({ messages, children, articleCount, dangerouslySetIn
           data-type="related-article-button"
           data-showmore={messages.showMore}
           data-showless={messages.showLess}
-          variant="outline">
+          variant="outline"
+        >
           {messages.showMore}
         </ButtonV2>
       )}

package/src/ResourceGroup/ResourceItem.tsx

@@ -241,7 +241,8 @@ const ResourceItem = ({
       hidden={hidden && !active}
       active={active}
       additional={additional}
-      extraBottomMargin={extraBottomMargin}>
+      extraBottomMargin={extraBottomMargin}
+    >
       <ResourceWrapper>
         <ContentBadgeWrapper>
           <ContentTypeBadge type={contentType ?? ''} background border={false} />

package/src/ResourcesWrapper/ResourcesTopicTitle.tsx

@@ -199,7 +199,8 @@ const ResourcesTopicTitle = ({
               <TooltipButton id={tooltipId} aria-label={t('resource.dialogTooltip')}>
                 <HelpIcon invertedStyle={invertedStyle} />
               </TooltipButton>
-            }>
+            }
+          >
             {(onClose: () => void) => (
               <>
                 <ModalHeader>

package/src/Search/ActiveFilterContent.tsx

@@ -46,7 +46,8 @@ const ActiveFilterContent = forwardRef<HTMLButtonElement, Props>(({ filter, onFi
     aria-label={ariaLabel}
     type="button"
     ref={ref}
-    onClick={() => onFilterRemove(filter.value, filter.filterName)}>
+    onClick={() => onFilterRemove(filter.value, filter.filterName)}
+  >
     <StyledActiveFilterTitle>{filter.title}</StyledActiveFilterTitle>
     <Cross />
   </StyledActiveFilter>

package/src/Search/ActiveFilters.tsx

@@ -103,7 +103,8 @@ const ActiveFilters = ({ filters, onFilterRemove, showOnSmallScreen }: Props) =>
             <Tooltip
               tooltip={t('searchPage.searchFilterMessages.removeFilter', {
                 filterName: filter.title,
-              })}>
+              })}
+            >
               <ActiveFilterContent
                 filter={filter}
                 ariaLabel={t('searchPage.searchFilterMessages.removeFilter', {

package/src/Search/ContentTypeResult.tsx

@@ -138,7 +138,8 @@ const ContentTypeResult = ({
                     if (onNavigate) {
                       onNavigate();
                     }
-                  }}>
+                  }}
+                >
                   {unGrouped && !ignoreContentTypeBadge && (
                     <ContentTypeBadge type={resource.contentType ?? ''} size="x-small" background border />
                   )}
@@ -156,7 +157,8 @@ const ContentTypeResult = ({
                 css={[showAllButtonStyle, shouldHighlightShowAllButton && noWidthhighlightStyle]}
                 data-highlighted={shouldHighlightShowAllButton}
                 onClick={() => toggleShowAll(!showAll)}
-                tabIndex={-1}>
+                tabIndex={-1}
+              >
                 {showAll ? messages.showLessResultLabel : messages.allResultLabel}
                 {showAll ? <ChevronUp /> : <ChevronDown />}
               </ButtonV2>

package/src/Search/SearchField.tsx

@@ -134,7 +134,8 @@ const SearchField = ({
             onChange('');
             onFocus?.();
             inputRef?.current?.focus();
-          }}>
+          }}
+        >
           {t('welcomePage.resetSearch')}
         </button>
       )}
@@ -143,7 +144,8 @@ const SearchField = ({
         {...classes('button', 'searchIcon')}
         type="submit"
         value="Search"
-        aria-label={t('siteNav.search')}>
+        aria-label={t('siteNav.search')}
+      >
         <SearchIcon />
       </button>
     </div>

package/src/Search/SearchResult.tsx

@@ -351,7 +351,8 @@ export const SearchResultList = ({ results, loading }: SearchResultListProps) =>
           key={`search_result_item_${typeof item.url === 'object' ? item.url.href : item.url}`}
           item={item}
           additionalContentTooltip={t('resource.tooltipAdditionalTopic')}
-          subjectsLabel={t('searchPage.searchResultListMessages.subjectsLabel')}>
+          subjectsLabel={t('searchPage.searchResultListMessages.subjectsLabel')}
+        >
           {item.children}
         </SearchResultItem>
       ))}

package/src/Search/SearchResultSleeve.tsx

@@ -318,7 +318,8 @@ const SearchResultSleeve = ({
             <StyledSearchLink
               css={keyboardPathNavigation === GO_TO_SEARCHPAGE && highlightStyle}
               to={allResultUrl}
-              tabIndex={-1}>
+              tabIndex={-1}
+            >
               <SearchIcon className="c-icon--22" />
               <strong ref={searchAllRef}>{searchString}</strong>
               <small>{t('welcomePage.searchAllInfo')}</small>
@@ -327,7 +328,8 @@ const SearchResultSleeve = ({
               <StyledSearchLink
                 css={keyboardPathNavigation === GO_TO_SUGGESTION && highlightStyle}
                 to={suggestionUrl}
-                tabIndex={-1}>
+                tabIndex={-1}
+              >
                 <SearchIcon className="c-icon--22" />
                 <small>{t('searchPage.resultType.searchPhraseSuggestion')}</small>
                 <strong ref={searchSuggestionRef}>{suggestion}</strong>

package/src/Search/ToggleSearchButton.tsx

@@ -64,7 +64,8 @@ const ToggleSearchButton = ({ children, ndlaFilm, hideOnNarrowScreen, hideOnWide
     hideOnNarrowScreen={hideOnNarrowScreen}
     hideOnWideScreen={hideOnWideScreen}
     type="button"
-    {...rest}>
+    {...rest}
+  >
     <StyledSpan>{children}</StyledSpan>
     <Search />
   </StyledButton>