@ndla/ui 50.8.0 → 50.8.2

package/src/Search/ActiveFilterContent.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import { forwardRef } from 'react';
-import styled from '@emotion/styled';
-import { spacing, mq, breakpoints, colors, misc, fonts } from '@ndla/core';
-import { Cross } from '@ndla/icons/action';
+import { forwardRef } from "react";
+import styled from "@emotion/styled";
+import { spacing, mq, breakpoints, colors, misc, fonts } from "@ndla/core";
+import { Cross } from "@ndla/icons/action";
 
-const StyledActiveFilter = styled('button')`
+const StyledActiveFilter = styled("button")`
   height: 38px;
   border: 0;
   background: ${colors.brand.light};
@@ -23,18 +23,18 @@ const StyledActiveFilter = styled('button')`
   padding: 0 ${spacing.small};
   width: 100%;
   justify-content: space-between;
-  ${fonts.sizes('16px', '36px')};
+  ${fonts.sizes("16px", "36px")};
   font-weight: ${fonts.weight.semibold};
 
   ${mq.range({ from: breakpoints.desktop })} {
     width: auto;
     justify-content: flex-start;
-    ${fonts.sizes('18px', '40px')};
+    ${fonts.sizes("18px", "40px")};
     height: 40px;
   }
 `;
 
-export const StyledActiveFilterTitle = styled('span')`
+export const StyledActiveFilterTitle = styled("span")`
   white-space: nowrap;
   padding-right: ${spacing.small};
 `;

package/src/Search/ActiveFilters.tsx

@@ -6,19 +6,19 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { spacing, mq, breakpoints } from '@ndla/core';
-import Tooltip from '@ndla/tooltip';
-import ActiveFilterContent, { StyledActiveFilterTitle } from './ActiveFilterContent';
+import { useTranslation } from "react-i18next";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { spacing, mq, breakpoints } from "@ndla/core";
+import Tooltip from "@ndla/tooltip";
+import ActiveFilterContent, { StyledActiveFilterTitle } from "./ActiveFilterContent";
 
 interface StyledActiveFiltersProps {
   showOnSmallScreen?: boolean;
   filterLength?: number;
 }
 
-const StyledActiveFilters = styled('ul')<StyledActiveFiltersProps>`
+const StyledActiveFilters = styled("ul")<StyledActiveFiltersProps>`
   margin: 0;
   padding: 0;
   flex-direction: column;
@@ -67,7 +67,7 @@ const StyledActiveFilters = styled('ul')<StyledActiveFiltersProps>`
   }
 `;
 
-const StyledActiveFilterWrapper = styled('li')`
+const StyledActiveFilterWrapper = styled("li")`
   list-style: none;
   display: flex;
   margin-bottom: ${spacing.xsmall};
@@ -82,7 +82,7 @@ const StyledActiveFilterWrapper = styled('li')`
 `;
 
 const getFilterLength = (filters: Filter[]) =>
-  filters.filter((filter) => filter.filterName === 'filter_subjects' && filter.title).length;
+  filters.filter((filter) => filter.filterName === "filter_subjects" && filter.title).length;
 
 interface Filter {
   title: string;
@@ -108,13 +108,13 @@ const ActiveFilters = ({ filters, onFilterRemove, showOnSmallScreen }: Props) =>
         <StyledActiveFilterWrapper key={filterKey}>
           {filterLength > 1 ? (
             <Tooltip
-              tooltip={t('searchPage.searchFilterMessages.removeFilter', {
+              tooltip={t("searchPage.searchFilterMessages.removeFilter", {
                 filterName: filter.title,
               })}
             >
               <ActiveFilterContent
                 filter={filter}
-                ariaLabel={t('searchPage.searchFilterMessages.removeFilter', {
+                ariaLabel={t("searchPage.searchFilterMessages.removeFilter", {
                   filterName: filter.title,
                 })}
                 onFilterRemove={onFilterRemove}
@@ -124,7 +124,7 @@ const ActiveFilters = ({ filters, onFilterRemove, showOnSmallScreen }: Props) =>
             <ActiveFilterContent
               filter={filter}
               onFilterRemove={onFilterRemove}
-              ariaLabel={t('searchPage.searchFilterMessages.removeFilter', {
+              ariaLabel={t("searchPage.searchFilterMessages.removeFilter", {
                 filterName: filter.title,
               })}
             />

package/src/Search/ContentTypeResult.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import { ReactElement, useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ButtonV2 } from '@ndla/button';
-import { Additional, ChevronDown, ChevronUp } from '@ndla/icons/common';
-import SafeLink from '@ndla/safelink';
-import Tooltip from '@ndla/tooltip';
+import { ReactElement, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ButtonV2 } from "@ndla/button";
+import { Additional, ChevronDown, ChevronUp } from "@ndla/icons/common";
+import SafeLink from "@ndla/safelink";
+import Tooltip from "@ndla/tooltip";
 import {
   highlightStyle,
   noWidthhighlightStyle,
@@ -22,10 +22,10 @@ import {
   StyledNoHit,
   StyledTag,
   StyledWrapper,
-} from './ContentTypeResultStyles';
-import { isPathToHighlight } from './IsPathToHighlight';
-import ContentTypeBadge from '../ContentTypeBadge';
-import { ContentTypeResultType, Resource } from '../types';
+} from "./ContentTypeResultStyles";
+import { isPathToHighlight } from "./IsPathToHighlight";
+import ContentTypeBadge from "../ContentTypeBadge";
+import { ContentTypeResultType, Resource } from "../types";
 
 const renderAdditionalIcon = (label: string, isAdditional?: boolean): ReactElement | null => {
   if (isAdditional && label) {
@@ -93,8 +93,8 @@ const ContentTypeResult = ({
   useEffect(() => {
     if (showAll && showAllRef.current) {
       showAllRef.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
+        behavior: "smooth",
+        block: "nearest",
       });
     }
   }, [showAll]);
@@ -132,8 +132,8 @@ const ContentTypeResult = ({
             const anchor =
               keyboardPathNavigation instanceof HTMLElement &&
               keyboardPathNavigation &&
-              keyboardPathNavigation.querySelector('a');
-            const anchorHref = anchor && anchor.getAttribute('href');
+              keyboardPathNavigation.querySelector("a");
+            const anchorHref = anchor && anchor.getAttribute("href");
             const shouldHighlight = isPathToHighlight(path, anchorHref);
 
             return (
@@ -149,10 +149,10 @@ const ContentTypeResult = ({
                   }}
                 >
                   {unGrouped && !ignoreContentTypeBadge && (
-                    <ContentTypeBadge type={resource.contentType ?? ''} size="x-small" background border />
+                    <ContentTypeBadge type={resource.contentType ?? ""} size="x-small" background border />
                   )}
                   {linkContent}
-                  {renderAdditionalIcon(t('resource.additionalTooltip'), additional)}
+                  {renderAdditionalIcon(t("resource.additionalTooltip"), additional)}
                 </SafeLink>
               </StyledListItem>
             );

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};
@@ -99,7 +99,7 @@ export const StyledList = styled.ul<inMenuProps>`
     if (props.animateList && props.animateList > 0) {
       return animations.toggledContentWithSwitchAnimation(
         animations.durations.normal,
-        `contentTypeResultAnimation${props.animateList % 2 ? '1' : '2'}`,
+        `contentTypeResultAnimation${props.animateList % 2 ? "1" : "2"}`,
       );
     }
   }}
@@ -159,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 {
@@ -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,18 +314,18 @@ 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")};
     }
   }
 `;
@@ -348,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>