@ndla/ui 50.8.0 → 50.8.2

package/src/Figure/Figure.tsx

@@ -8,21 +8,21 @@
 
 // N.B These components is used to render static markup serverside
 
-import { ReactNode } from 'react';
-import BEMHelper from 'react-bem-helper';
-import { isFunction as isFunctionHelper } from '@ndla/util';
+import { ReactNode } from "react";
+import BEMHelper from "react-bem-helper";
+import { isFunction as isFunctionHelper } from "@ndla/util";
 const classes = new BEMHelper({
-  name: 'figure',
-  prefix: 'c-',
+  name: "figure",
+  prefix: "c-",
 });
 
-const Figure = ({ children, type = 'full', resizeIframe, className, ...rest }: Props) => {
-  const typeClass = type === 'full-column' ? 'c-figure--full-column' : `u-float-${type}`;
-  const right = ['small-right', 'xsmall-right'].includes(type);
+const Figure = ({ children, type = "full", resizeIframe, className, ...rest }: Props) => {
+  const typeClass = type === "full-column" ? "c-figure--full-column" : `u-float-${type}`;
+  const right = ["small-right", "xsmall-right"].includes(type);
   return (
     <figure
       data-sizetype={type}
-      {...classes('', { resize: !!resizeIframe, right }, `${typeClass} ${className ?? ''}`)}
+      {...classes("", { resize: !!resizeIframe, right }, `${typeClass} ${className ?? ""}`)}
       {...rest}
     >
       {isFunction(children) ? children({ typeClass }) : children}
@@ -35,14 +35,14 @@ const isFunction = (children: Function | ReactNode): children is Function => {
 };
 
 export type FigureType =
-  | 'full'
-  | 'full-column'
-  | 'left'
-  | 'small-left'
-  | 'right'
-  | 'small-right'
-  | 'xsmall-right'
-  | 'xsmall-left';
+  | "full"
+  | "full-column"
+  | "left"
+  | "small-left"
+  | "right"
+  | "small-right"
+  | "xsmall-right"
+  | "xsmall-left";
 
 interface Props {
   id?: string;

package/src/Figure/FigureOpenDialogButton.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import { ExpandTwoArrows, CursorClick } from '@ndla/icons/action';
-import { Play } from '@ndla/icons/common';
+import { ExpandTwoArrows, CursorClick } from "@ndla/icons/action";
+import { Play } from "@ndla/icons/common";
 
 interface Props {
-  type?: 'image' | 'video' | 'h5p' | 'iframe' | 'external' | 'audio';
+  type?: "image" | "video" | "h5p" | "iframe" | "external" | "audio";
   messages: {
     zoomImageButtonLabel: string;
     zoomOutImageButtonLabel: string;
@@ -25,11 +25,11 @@ export const FigureOpenDialogButton = ({ messages, type }: Props) => {
       data-ariaexpanded={messages.zoomOutImageButtonLabel}
       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' }} />}
-      {type === 'external' && <CursorClick style={{ width: '24px', height: '24px' }} />}
-      {type === 'video' && <Play style={{ width: '24px', height: '24px' }} />}
+      {type === "image" && <ExpandTwoArrows className="contracted-icon" />}
+      {type === "h5p" && <CursorClick style={{ width: "24px", height: "24px" }} />}
+      {type === "iframe" && <CursorClick style={{ width: "24px", height: "24px" }} />}
+      {type === "external" && <CursorClick style={{ width: "24px", height: "24px" }} />}
+      {type === "video" && <Play style={{ width: "24px", height: "24px" }} />}
     </div>
   );
 };

package/src/Figure/index.ts

@@ -6,7 +6,7 @@
  *
  */
 
-export { default as Figure } from './Figure';
-export { FigureOpenDialogButton } from './FigureOpenDialogButton';
+export { default as Figure } from "./Figure";
+export { FigureOpenDialogButton } from "./FigureOpenDialogButton";
 
-export type { FigureType } from './Figure';
+export type { FigureType } from "./Figure";

package/src/FileList/File.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { breakpoints, colors, mq, spacing } from '@ndla/core';
-import Format from './Format';
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { breakpoints, colors, mq, spacing } from "@ndla/core";
+import Format from "./Format";
 
 interface Props {
   title: string;
@@ -43,7 +43,7 @@ const StyledFileItem = styled.li`
 
 const File = ({ title, url, fileExists, fileType }: Props) => {
   const { t } = useTranslation();
-  const tooltip = `${t('download')} ${url.split('/').pop()}`;
+  const tooltip = `${t("download")} ${url.split("/").pop()}`;
 
   return (
     <StyledFileItem>

package/src/FileList/FileList.stories.tsx

@@ -6,24 +6,24 @@
  *
  */
 
-import { Meta, StoryObj } from '@storybook/react';
-import File from './File';
-import FileList from './FileList';
-import { defaultParameters } from '../../../../stories/defaults';
+import { Meta, StoryObj } from "@storybook/react";
+import File from "./File";
+import FileList from "./FileList";
+import { defaultParameters } from "../../../../stories/defaults";
 
 export default {
-  title: 'Components/FileList',
-  tags: ['autodocs'],
+  title: "Components/FileList",
+  tags: ["autodocs"],
   component: File,
   parameters: {
     inlineStories: true,
     ...defaultParameters,
   },
   args: {
-    title: 'Min fil',
-    url: 'https://www.ndla.no',
+    title: "Min fil",
+    url: "https://www.ndla.no",
     fileExists: true,
-    fileType: 'pdf',
+    fileType: "pdf",
   },
   render: (args) => (
     <FileList>

package/src/FileList/FileList.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import { ComponentProps, ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { colors, fonts, spacing } from '@ndla/core';
-import { Heading } from '@ndla/typography';
-interface Props extends ComponentProps<'section'> {
+import { ComponentProps, ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { colors, fonts, spacing } from "@ndla/core";
+import { Heading } from "@ndla/typography";
+interface Props extends ComponentProps<"section"> {
   children: ReactNode;
   headingButtons?: ReactNode;
 }
@@ -42,7 +42,7 @@ const FileList = ({ children, headingButtons, ...rest }: Props) => {
     <FileListSection {...rest}>
       <FileListHeaderWrapper>
         <Heading element="h3" headingStyle="list-title" margin="none">
-          {t('files')}
+          {t("files")}
         </Heading>
         <div>{headingButtons}</div>
       </FileListHeaderWrapper>

package/src/FileList/Format.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { colors, spacing } from '@ndla/core';
-import { Download } from '@ndla/icons/common';
-import SafeLink from '@ndla/safelink';
-import { Text } from '@ndla/typography';
-import { FileFormat } from './File';
+import styled from "@emotion/styled";
+import { colors, spacing } from "@ndla/core";
+import { Download } from "@ndla/icons/common";
+import SafeLink from "@ndla/safelink";
+import { Text } from "@ndla/typography";
+import { FileFormat } from "./File";
 
 const StyledText = styled(Text)`
   box-shadow: inset 0 -1px;

package/src/FileList/PdfFile.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { Figure } from '../Figure';
+import { Figure } from "../Figure";
 
 interface Props {
   title: string;

package/src/FileList/index.ts

@@ -6,10 +6,10 @@
  *
  */
 
-import FileList from './FileList';
+import FileList from "./FileList";
 
-export { default as File } from './File';
-export { default as PdfFile } from './PdfFile';
-export { default as Format } from './Format';
+export { default as File } from "./File";
+export { default as PdfFile } from "./PdfFile";
+export { default as Format } from "./Format";
 
 export default FileList;

package/src/Filter/FilterButtons.tsx

@@ -5,18 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { ButtonV2 } from '@ndla/button';
-import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import { Cross as CrossIcon, Plus as PlusIcon } from '@ndla/icons/action';
-import { ModalHeader, ModalBody, ModalCloseButton, Modal, ModalTrigger, ModalContent } from '@ndla/modal';
-import FilterCarousel from './FilterCarousel';
-import ToggleItem from './ToggleItem';
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { ButtonV2 } from "@ndla/button";
+import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
+import { Cross as CrossIcon, Plus as PlusIcon } from "@ndla/icons/action";
+import { ModalHeader, ModalBody, ModalCloseButton, Modal, ModalTrigger, ModalContent } from "@ndla/modal";
+import FilterCarousel from "./FilterCarousel";
+import ToggleItem from "./ToggleItem";
 
 const StyledHeading = styled.h3`
-  ${fonts.sizes('16px', '32px')};
+  ${fonts.sizes("16px", "32px")};
   margin: 0 0 ${spacing.small};
   color: ${colors.text.light};
   font-weight: ${fonts.weight.semibold};
@@ -64,7 +64,7 @@ const StyledRemoveWrapper = styled.div`
 `;
 
 const ButtonRemoveText = styled.span`
-  ${fonts.sizes('16px', '32px')};
+  ${fonts.sizes("16px", "32px")};
   font-weight: ${fonts.weight.semibold};
 `;
 
@@ -88,14 +88,14 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
   const [isNarrowScreen, setIsNarrowScreen] = useState(false);
 
   useEffect(() => {
-    const isNarrowScreenMatch = window.matchMedia('(max-width: 767px)');
+    const isNarrowScreenMatch = window.matchMedia("(max-width: 767px)");
     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);
     };
   }, []);
 
@@ -125,7 +125,7 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
               </ButtonV2>
             </StyledButtonElementWrapper>
           ))}
-          <Modal aria-label={t('searchPage.searchFilterMessages.resourceTypeFilter.button')}>
+          <Modal aria-label={t("searchPage.searchFilterMessages.resourceTypeFilter.button")}>
             <StyledButtonElementWrapper>
               <ModalTrigger>
                 <ButtonV2 colorTheme="light" size="normal" shape="pill">
@@ -169,7 +169,7 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
               <StyledButtonElementWrapper key={item.value}>
                 <ButtonV2
                   size="normal"
-                  colorTheme={!item.selected ? 'greyLighter' : undefined}
+                  colorTheme={!item.selected ? "greyLighter" : undefined}
                   shape="pill"
                   onClick={() => onFilterToggle(item.value)}
                 >

package/src/Filter/FilterCarousel.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import { ReactChild, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useSwipeable } from 'react-swipeable';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { ChevronLeft, ChevronRight } from '@ndla/icons/common';
+import { ReactChild, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useSwipeable } from "react-swipeable";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { ChevronLeft, ChevronRight } from "@ndla/icons/common";
 
 interface Props {
   children: ReactChild[];
@@ -30,7 +30,7 @@ const Inner = styled.div`
   padding: 8px 0;
 `;
 
-const NavButton = styled('button')<{
+const NavButton = styled("button")<{
   alignRight?: boolean;
 }>`
   box-sizing: border-box;
@@ -105,8 +105,8 @@ const FilterCarousel = ({ children }: Props) => {
       setTranslateX(0);
       showButtons();
     };
-    window.addEventListener('resize', resetTranslateX);
-    return () => window.removeEventListener('resize', resetTranslateX);
+    window.addEventListener("resize", resetTranslateX);
+    return () => window.removeEventListener("resize", resetTranslateX);
   }, []);
 
   const updateIndex = (direction: string) => {
@@ -115,7 +115,7 @@ const FilterCarousel = ({ children }: Props) => {
     if (carousel && inner) {
       const carouselWidth = carousel.offsetWidth;
       const innerWidth = inner.scrollWidth;
-      if (direction === 'NEXT') {
+      if (direction === "NEXT") {
         // If we cannot move more than one carouselWidth then just adjust to show all of the concealed items
         if (carouselWidth + translateX + carouselWidth > innerWidth) {
           const newOffset = innerWidth - carouselWidth;
@@ -141,8 +141,8 @@ const FilterCarousel = ({ children }: Props) => {
   };
 
   const handlers = useSwipeable({
-    onSwipedLeft: () => updateIndex('NEXT'),
-    onSwipedRight: () => updateIndex('PREV'),
+    onSwipedLeft: () => updateIndex("NEXT"),
+    onSwipedRight: () => updateIndex("PREV"),
     preventScrollOnSwipe: false,
     trackMouse: true,
   });
@@ -155,13 +155,13 @@ const FilterCarousel = ({ children }: Props) => {
         </Inner>
       </Carousel>
       {!hideNext && (
-        <NavButton title={t('carousel.forward')} onClick={() => updateIndex('NEXT')} alignRight>
-          <ChevronRight style={{ width: '18px', height: '18px' }} aria-hidden title="" />
+        <NavButton title={t("carousel.forward")} onClick={() => updateIndex("NEXT")} alignRight>
+          <ChevronRight style={{ width: "18px", height: "18px" }} aria-hidden title="" />
         </NavButton>
       )}
       {translateX >= 1 && (
-        <NavButton title={t('carousel.back')} onClick={() => updateIndex('PREV')}>
-          <ChevronLeft style={{ width: '18px', height: '18px' }} aria-hidden title="" />
+        <NavButton title={t("carousel.back")} onClick={() => updateIndex("PREV")}>
+          <ChevronLeft style={{ width: "18px", height: "18px" }} aria-hidden title="" />
         </NavButton>
       )}
     </div>

package/src/Filter/FilterList.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import { ReactNode, useState } from 'react';
-import { ChevronDown, ChevronUp } from '@ndla/icons/common';
+import { ReactNode, useState } from "react";
+import { ChevronDown, ChevronUp } from "@ndla/icons/common";
 
-import { classes } from './filterClasses';
-import ToggleItem from './ToggleItem';
+import { classes } from "./filterClasses";
+import ToggleItem from "./ToggleItem";
 
 interface Props {
   children?: ReactNode;
@@ -36,9 +36,9 @@ interface Props {
 }
 
 const FilterList = ({
-  modifiers = '',
-  preid = '',
-  label = 'FILTER:',
+  modifiers = "",
+  preid = "",
+  label = "FILTER:",
   labelNotVisible,
   options,
   values = [],
@@ -56,19 +56,19 @@ const FilterList = ({
   const labelModifiers = [];
 
   if (labelNotVisible) {
-    labelModifiers.push('hidden');
+    labelModifiers.push("hidden");
   }
 
   return (
-    <section {...classes('list', modifiers)}>
-      {label && <h1 {...classes('label', labelModifiers)}>{label}</h1>}
+    <section {...classes("list", modifiers)}>
+      {label && <h1 {...classes("label", labelModifiers)}>{label}</h1>}
       {noFilterSelectedLabel && options.length === 0 && (
-        <span {...classes('no-filter-selected')}>{noFilterSelectedLabel}</span>
+        <span {...classes("no-filter-selected")}>{noFilterSelectedLabel}</span>
       )}
       <ul
-        {...classes('item-wrapper', {
-          'aligned-grouping': !!alignedGroup,
-          'collapse-mobile': !!collapseMobile,
+        {...classes("item-wrapper", {
+          "aligned-grouping": !!alignedGroup,
+          "collapse-mobile": !!collapseMobile,
         })}
       >
         {options.map((option, index) => {
@@ -77,13 +77,13 @@ const FilterList = ({
           const checked = values.some((value) => value === option.value);
 
           if (!showAll && !checked && index + 1 > (visibleCount ?? 0)) {
-            itemModifiers.push('hidden');
+            itemModifiers.push("hidden");
           }
 
           const disabled = option.noResults || option.hits === 0;
 
           if (disabled) {
-            itemModifiers.push('no-results');
+            itemModifiers.push("no-results");
           }
 
           return (
@@ -113,7 +113,7 @@ const FilterList = ({
       </ul>
       {!showAll && (
         <button
-          {...classes('expand')}
+          {...classes("expand")}
           type="button"
           onClick={() => {
             setVisibleCount((prev) => (prev === defaultVisibleCount ? options.length : defaultVisibleCount));