@ndla/ui 50.7.3 → 50.8.1

package/src/Filter/FilterListPhone.tsx

@@ -6,14 +6,14 @@
  *
  */
 
-import debounce from 'lodash/debounce';
-import { ChangeEvent, useCallback, useEffect, useState } from 'react';
-import { ButtonV2 } from '@ndla/button';
-import { ChevronDown, ChevronUp } from '@ndla/icons/common';
-import { ModalHeader, ModalBody, ModalCloseButton, Modal, ModalTrigger, ModalContent } from '@ndla/modal';
-import { classes } from './filterClasses';
-import ToggleItem from './ToggleItem';
-import ActiveFilters from '../Search/ActiveFilters';
+import debounce from "lodash/debounce";
+import { ChangeEvent, useCallback, useEffect, useState } from "react";
+import { ButtonV2 } from "@ndla/button";
+import { ChevronDown, ChevronUp } from "@ndla/icons/common";
+import { ModalHeader, ModalBody, ModalCloseButton, Modal, ModalTrigger, ModalContent } from "@ndla/modal";
+import { classes } from "./filterClasses";
+import ToggleItem from "./ToggleItem";
+import ActiveFilters from "../Search/ActiveFilters";
 
 interface Option {
   title: string;
@@ -41,7 +41,7 @@ interface Props {
     openFilter: string;
     closeFilter: string;
   };
-  viewMode?: 'inlineDesktop' | 'allModal';
+  viewMode?: "inlineDesktop" | "allModal";
   isGroupedOptions?: boolean;
   showActiveFiltersOnSmallScreen?: boolean;
 }
@@ -54,7 +54,7 @@ const FilterListPhone = ({
   preid,
   label,
   labelNotVisible,
-  modifiers = '',
+  modifiers = "",
   onChange,
   options,
   values = [],
@@ -65,7 +65,7 @@ const FilterListPhone = ({
   collapseMobile = true,
   activeFiltersNarrow,
   messages,
-  viewMode = 'inlineDesktop',
+  viewMode = "inlineDesktop",
   isGroupedOptions,
   showActiveFiltersOnSmallScreen,
 }: Props) => {
@@ -76,11 +76,11 @@ const FilterListPhone = ({
   useEffect(() => {
     setScreenSize(true);
     const debounced = debounce(() => setScreenSize(false), 50);
-    window.addEventListener('resize', debounced);
+    window.addEventListener("resize", debounced);
 
     return () => {
       debounced.cancel();
-      window.removeEventListener('resize', debounced);
+      window.removeEventListener("resize", debounced);
     };
   }, []);
 
@@ -114,12 +114,12 @@ const FilterListPhone = ({
   const labelModifiers: string[] = [];
 
   if (labelNotVisible) {
-    labelModifiers.push('hidden');
+    labelModifiers.push("hidden");
   }
 
   const groupedOptions = is2DArray(options) ? options : [options];
 
-  if (isNarrowScreen || viewMode === 'allModal') {
+  if (isNarrowScreen || viewMode === "allModal") {
     let currentlyActiveFilters: Option[] = [];
     groupedOptions.forEach((options) => {
       const activeFilters = options.filter((option) => values.some((value) => value === option.value));
@@ -127,7 +127,7 @@ const FilterListPhone = ({
     });
 
     const wrapperClassName =
-      activeFiltersNarrow || viewMode === 'allModal' ? classes('narrow-active-filters').className : '';
+      activeFiltersNarrow || viewMode === "allModal" ? classes("narrow-active-filters").className : "";
     return (
       <div className={wrapperClassName}>
         {currentlyActiveFilters.length > 0 && (
@@ -144,15 +144,15 @@ const FilterListPhone = ({
         )}
         <Modal open={open} onOpenChange={setOpen}>
           <ModalTrigger>
-            <ButtonV2 variant="outline" {...classes('modal-button')}>
+            <ButtonV2 variant="outline" {...classes("modal-button")}>
               {messages.openFilter}
             </ButtonV2>
           </ModalTrigger>
           <ModalContent size="full">
             <ModalHeader>
-              <div {...classes('modal-header')}>
-                <div {...classes('modal-heading')}>
-                  {!isNarrowScreen && label && <h1 {...classes('label')}>{label}</h1>}
+              <div {...classes("modal-header")}>
+                <div {...classes("modal-heading")}>
+                  {!isNarrowScreen && label && <h1 {...classes("label")}>{label}</h1>}
                   <ButtonV2 variant="outline" onClick={onClose}>
                     {messages.useFilter}
                   </ButtonV2>
@@ -161,14 +161,14 @@ const FilterListPhone = ({
               </div>
             </ModalHeader>
             <ModalBody modifier="no-side-padding-mobile">
-              {isNarrowScreen && label && <h1 {...classes('label')}>{label}</h1>}
+              {isNarrowScreen && label && <h1 {...classes("label")}>{label}</h1>}
               {groupedOptions.map((options, index) => (
                 <ul
                   key={index}
-                  {...classes('item-wrapper', {
-                    'aligned-grouping': !!alignedGroup,
-                    'collapse-mobile': !!collapseMobile,
-                    'grouped-options': !!isGroupedOptions,
+                  {...classes("item-wrapper", {
+                    "aligned-grouping": !!alignedGroup,
+                    "collapse-mobile": !!collapseMobile,
+                    "grouped-options": !!isGroupedOptions,
                   })}
                 >
                   {options.map((option) => {
@@ -177,11 +177,11 @@ const FilterListPhone = ({
                     const checked = values.some((value) => value === option.value);
 
                     if (option.noResults) {
-                      itemModifiers.push('no-results');
+                      itemModifiers.push("no-results");
                     }
 
                     if (option.disabled) {
-                      itemModifiers.push('disabled');
+                      itemModifiers.push("disabled");
                     }
                     return (
                       <ToggleItem
@@ -199,7 +199,7 @@ const FilterListPhone = ({
                 </ul>
               ))}
 
-              <div {...classes('usefilter-wrapper')}>
+              <div {...classes("usefilter-wrapper")}>
                 <ButtonV2 variant="outline" onClick={onClose}>
                   {messages.useFilter}
                 </ButtonV2>
@@ -213,26 +213,26 @@ const FilterListPhone = ({
 
   return (
     <>
-      {isGroupedOptions && label && <h2 {...classes('label', labelModifiers)}>{label}</h2>}
+      {isGroupedOptions && label && <h2 {...classes("label", labelModifiers)}>{label}</h2>}
       {groupedOptions.map((options, index) => (
-        <section key={index} {...classes('list', modifiers)}>
-          {!isGroupedOptions && label && <h1 {...classes('label', labelModifiers)}>{label}</h1>}
-          <ul {...classes('item-wrapper')}>
+        <section key={index} {...classes("list", modifiers)}>
+          {!isGroupedOptions && label && <h1 {...classes("label", labelModifiers)}>{label}</h1>}
+          <ul {...classes("item-wrapper")}>
             {options.map((option, index) => {
               const itemModifiers = [];
 
               const checked = values.some((value) => value === option.value);
 
               if (!showAll && !checked && !!visibleCount && index + 1 > visibleCount) {
-                itemModifiers.push('hidden');
+                itemModifiers.push("hidden");
               }
 
               if (option.noResults) {
-                itemModifiers.push('no-results');
+                itemModifiers.push("no-results");
               }
 
               if (option.disabled) {
-                itemModifiers.push('disabled');
+                itemModifiers.push("disabled");
               }
 
               return (
@@ -252,7 +252,7 @@ const FilterListPhone = ({
           </ul>
           {!showAll && (
             <button
-              {...classes('expand')}
+              {...classes("expand")}
               type="button"
               onClick={() => {
                 setVisibleCount((prev) => (prev === defaultVisibleCount ? options.length : defaultVisibleCount));

package/src/Filter/ToggleItem.tsx

@@ -6,8 +6,8 @@
  *
  */
 
-import { ChangeEvent, ElementType } from 'react';
-import { classes } from './filterClasses';
+import { ChangeEvent, ElementType } from "react";
+import { classes } from "./filterClasses";
 
 interface Props {
   id: string;
@@ -27,16 +27,16 @@ const ToggleItem = ({
   checked = false,
   modifiers,
   label,
-  component: Component = 'li',
+  component: Component = "li",
   onChange,
   tabIndex,
   value,
   disabled,
   hits,
 }: Props) => (
-  <Component {...classes('item', modifiers)}>
+  <Component {...classes("item", modifiers)}>
     <input
-      {...classes('input')}
+      {...classes("input")}
       type="checkbox"
       id={id}
       value={value}
@@ -46,8 +46,8 @@ const ToggleItem = ({
       onChange={onChange}
     />
     <label htmlFor={id}>
-      <span {...classes('item-checkbox')} />
-      <span {...classes('text')}>
+      <span {...classes("item-checkbox")} />
+      <span {...classes("text")}>
         {label}
         {hits !== undefined && ` (${hits})`}
       </span>

package/src/Filter/filterClasses.ts

@@ -6,9 +6,9 @@
  *
  */
 
-import BEMHelper from 'react-bem-helper';
+import BEMHelper from "react-bem-helper";
 
 export const classes = new BEMHelper({
-  name: 'filter',
-  prefix: 'c-',
+  name: "filter",
+  prefix: "c-",
 });

package/src/Filter/index.ts

@@ -6,8 +6,8 @@
  *
  */
 
-export { default as FilterList } from './FilterList';
-export { default as FilterListPhone } from './FilterListPhone';
-export { default as ToggleItem } from './ToggleItem';
-export { classes as filterClasses } from './filterClasses';
-export { default as FilterButtons } from './FilterButtons';
+export { default as FilterList } from "./FilterList";
+export { default as FilterListPhone } from "./FilterListPhone";
+export { default as ToggleItem } from "./ToggleItem";
+export { classes as filterClasses } from "./filterClasses";
+export { default as FilterButtons } from "./FilterButtons";

package/src/Footer/Footer.stories.tsx

@@ -6,73 +6,79 @@
  *
  */
 
-import { Meta, StoryObj } from '@storybook/react';
-import { EmailOutline, Facebook, Instagram, LinkedIn, Share, Youtube } from '@ndla/icons/common';
-import { EditorName } from './EditorName';
-import Footer from './Footer';
-import { FooterText } from './FooterText';
-import { defaultParameters } from '../../../../stories/defaults';
-import { LanguageSelector } from '../LanguageSelector';
+import { Meta, StoryObj } from "@storybook/react";
+import { EmailOutline, Facebook, Instagram, LinkedIn, Share, Youtube } from "@ndla/icons/common";
+import { EditorName } from "./EditorName";
+import Footer from "./Footer";
+import { FooterText } from "./FooterText";
+import { defaultParameters } from "../../../../stories/defaults";
+import { LanguageSelector } from "../LanguageSelector";
 
 const mockCommonLinks = [
   {
-    to: 'https://ndla.no/about/om-ndla',
-    text: 'Om NDLA',
+    to: "https://ndla.no/about/om-ndla",
+    text: "Om NDLA",
     external: false,
   },
   {
-    to: 'https://ndla.no/about/about-ndla',
-    text: 'About NDLA',
+    to: "https://ndla.no/about/about-ndla",
+    text: "About NDLA",
     external: false,
   },
   {
-    to: 'https://blogg.ndla.no/',
-    text: 'NDLA fagblogg',
+    to: "https://blogg.ndla.no/",
+    text: "NDLA fagblogg",
     external: true,
   },
 ];
 
 const mockFooterLinks = [
   {
-    to: 'https://www.facebook.com/ndla.no',
-    text: 'NDLA på Facebook',
+    to: "https://www.facebook.com/ndla.no",
+    text: "NDLA på Facebook",
     icon: <Facebook />,
   },
   {
-    to: 'https://instagram.com/ndla_no/',
-    text: 'NDLA på Instagram',
+    to: "https://instagram.com/ndla_no/",
+    text: "NDLA på Instagram",
     icon: <Instagram />,
   },
   {
-    to: 'https://www.linkedin.com/company/ndla/',
-    text: 'NDLA på LinkedIn',
+    to: "https://www.linkedin.com/company/ndla/",
+    text: "NDLA på LinkedIn",
     icon: <LinkedIn />,
   },
   {
-    to: 'https://www.youtube.com/channel/UCBlt6T8B0mmvDh3k5q7EhsA',
-    text: 'NDLA på YouTube',
+    to: "https://www.youtube.com/channel/UCBlt6T8B0mmvDh3k5q7EhsA",
+    text: "NDLA på YouTube",
     icon: <Youtube />,
   },
   {
-    to: 'https://ndla.us6.list-manage.com/subscribe?u=99d41bbb28de0128915adebed&id=9a1d3ad1ea',
-    text: 'Meld deg på vårt nyhetsbrev',
+    to: "https://ndla.us6.list-manage.com/subscribe?u=99d41bbb28de0128915adebed&id=9a1d3ad1ea",
+    text: "Meld deg på vårt nyhetsbrev",
     icon: <EmailOutline />,
   },
   {
-    to: '#',
-    text: 'Del denne siden',
+    to: "#",
+    text: "Del denne siden",
     icon: <Share />,
   },
 ];
 
 const privacyLinks = [
-  { label: 'Personvernerklæring', url: 'https://ndla.no/article/personvernerklaering' },
-  { label: 'Erklæring om informasjonskapsler', url: 'https://ndla.no/article/erklaering-for-informasjonskapsler' },
+  {
+    label: "Personvernerklæring",
+    url: "https://ndla.no/article/personvernerklaering",
+  },
+  {
+    label: "Erklæring om informasjonskapsler",
+    url: "https://ndla.no/article/erklaering-for-informasjonskapsler",
+  },
 ];
 
 export default {
-  title: 'Components/Footer',
-  tags: ['autodocs'],
+  title: "Components/Footer",
+  tags: ["autodocs"],
   component: Footer,
   parameters: {
     inlineStories: true,
@@ -122,7 +128,7 @@ export const WithLanguageSelector: StoryObj<typeof Footer> = {
     commonLinks: mockCommonLinks,
     links: mockFooterLinks,
     // eslint-disable-next-line no-console
-    languageSelector: <LanguageSelector inverted locales={['nn', 'nb']} onSelect={console.log} />,
+    languageSelector: <LanguageSelector inverted locales={["nn", "nb"]} onSelect={console.log} />,
   },
 };
 
@@ -132,7 +138,7 @@ export const WithAuthBlock: StoryObj<typeof Footer> = {
     commonLinks: mockCommonLinks,
     links: mockFooterLinks,
     // eslint-disable-next-line no-console
-    languageSelector: <LanguageSelector inverted locales={['nn', 'nb']} onSelect={console.log} />,
+    languageSelector: <LanguageSelector inverted locales={["nn", "nb"]} onSelect={console.log} />,
     auth: <div>Auth info can be placed down here</div>,
   },
 };

package/src/Footer/Footer.tsx

@@ -6,15 +6,15 @@
  *
  */
 
-import { ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { colors, spacing, fonts, mq, breakpoints, spacingUnit } from '@ndla/core';
-import { FooterHeaderIcon } from '@ndla/icons/common';
-import FooterLinks from './FooterLinks';
-import FooterPrivacy from './FooterPrivacy';
-import { OneColumn } from '../Layout';
-import { Locale } from '../types';
+import { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { colors, spacing, fonts, mq, breakpoints, spacingUnit } from "@ndla/core";
+import { FooterHeaderIcon } from "@ndla/icons/common";
+import FooterLinks from "./FooterLinks";
+import FooterPrivacy from "./FooterPrivacy";
+import { OneColumn } from "../Layout";
+import { Locale } from "../types";
 
 const StyledBackground = styled.div`
   display: block;
@@ -32,7 +32,7 @@ const StyledDiv = styled.div`
   background: ${colors.brand.dark};
   overflow: hidden;
   z-index: 0;
-  &[data-margin='true'] {
+  &[data-margin="true"] {
     margin-top: ${spacing.xxlarge};
   }
 `;
@@ -147,7 +147,7 @@ const Footer = ({ children, commonLinks, links, languageSelector, auth, privacyL
             <StyledFooterHeaderIcon />
           </div>
           <div>
-            <StyledHeader>{t('footer.vision')}</StyledHeader>
+            <StyledHeader>{t("footer.vision")}</StyledHeader>
             <FooterLinks commonLinks={commonLinks} links={links} />
           </div>
         </StyledColumns>

package/src/Footer/FooterLinks.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import { ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { spacing, fonts, colors, mq, breakpoints, spacingUnit } from '@ndla/core';
-import { Forward, Launch } from '@ndla/icons/common';
-import SafeLink from '@ndla/safelink';
+import { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { spacing, fonts, colors, mq, breakpoints, spacingUnit } from "@ndla/core";
+import { Forward, Launch } from "@ndla/icons/common";
+import SafeLink from "@ndla/safelink";
 
 const StyledLinksWrapper = styled.div`
   display: flex;
@@ -97,7 +97,7 @@ const FooterLinks = ({ links, commonLinks }: FooterLinksProps) => {
     <>
       <StyledLinksWrapper>
         <div>
-          <StyledHeaderLinks id="otherLinks">{t('footer.linksHeader')}</StyledHeaderLinks>
+          <StyledHeaderLinks id="otherLinks">{t("footer.linksHeader")}</StyledHeaderLinks>
           <StyledNav aria-labelledby="otherLinks">
             {commonLinks?.map((link) => (
               <div key={link.to}>
@@ -105,7 +105,7 @@ const FooterLinks = ({ links, commonLinks }: FooterLinksProps) => {
                   key={link.text}
                   aria-label={link.text}
                   to={link.to}
-                  target={link.external ? '_blank' : ''}
+                  target={link.external ? "_blank" : ""}
                   rel="noopener noreferrer"
                 >
                   {link.text}
@@ -115,7 +115,7 @@ const FooterLinks = ({ links, commonLinks }: FooterLinksProps) => {
             ))}
           </StyledNav>
         </div>
-        <StyledNav aria-label={t('footer.socialMedia')}>
+        <StyledNav aria-label={t("footer.socialMedia")}>
           {links?.map((link) => (
             <StyledSocialMediaLinkWrapper key={link.to}>
               <StyledSocialMediaIcon>{link.icon}</StyledSocialMediaIcon>

package/src/Footer/FooterPrivacy.tsx

@@ -6,8 +6,8 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { spacing, fonts, mq, breakpoints } from '@ndla/core';
+import styled from "@emotion/styled";
+import { spacing, fonts, mq, breakpoints } from "@ndla/core";
 
 type FooterPrivacyProps = {
   privacyLinks: {

package/src/Footer/FooterText.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { spacing, fonts, mq, breakpoints } from '@ndla/core';
+import { ReactNode } from "react";
+import styled from "@emotion/styled";
+import { spacing, fonts, mq, breakpoints } from "@ndla/core";
 
 const StyledFooterText = styled.p`
   display: flex;

package/src/Footer/index.ts

@@ -6,8 +6,8 @@
  *
  */
 
-import { EditorName } from './EditorName';
-import Footer from './Footer';
-import { FooterText } from './FooterText';
+import { EditorName } from "./EditorName";
+import Footer from "./Footer";
+import { FooterText } from "./FooterText";
 
 export { Footer, FooterText, EditorName };

package/src/FramedContent/FramedContent.stories.tsx

@@ -6,15 +6,15 @@
  *
  */
 
-import { Meta, StoryObj } from '@storybook/react';
-import FramedContent from './FramedContent';
-import FigureImage from '../../../../stories/article/FigureImage';
-import { defaultParameters } from '../../../../stories/defaults';
+import { Meta, StoryObj } from "@storybook/react";
+import FramedContent from "./FramedContent";
+import FigureImage from "../../../../stories/article/FigureImage";
+import { defaultParameters } from "../../../../stories/defaults";
 
 export default {
-  title: 'Components/FramedContent',
+  title: "Components/FramedContent",
   component: FramedContent,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     inlineStories: true,
     ...defaultParameters,
@@ -29,7 +29,7 @@ export const WithFloating: StoryObj<typeof FramedContent> = {
     children: (
       <>
         <p>En boks med flytelementer</p>
-        <FigureImage embedData={{ alt: '', align: 'right' }} />
+        <FigureImage embedData={{ alt: "", align: "right" }} />
         <p>
           Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen
           du planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.

package/src/FramedContent/FramedContent.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import { ComponentPropsWithRef, forwardRef } from 'react';
-import styled from '@emotion/styled';
-import { colors, spacing } from '@ndla/core';
+import { ComponentPropsWithRef, forwardRef } from "react";
+import styled from "@emotion/styled";
+import { colors, spacing } from "@ndla/core";
 
 const StyledFramedContent = styled.div`
   padding: ${spacing.mediumlarge};
@@ -43,7 +43,7 @@ const StyledFramedContent = styled.div`
   }
 `;
 
-const FramedContent = forwardRef<HTMLDivElement, ComponentPropsWithRef<'div'>>(({ children, ...rest }, ref) => (
+const FramedContent = forwardRef<HTMLDivElement, ComponentPropsWithRef<"div">>(({ children, ...rest }, ref) => (
   <StyledFramedContent {...rest} ref={ref}>
     {children}
   </StyledFramedContent>

package/src/FramedContent/index.ts

@@ -6,5 +6,5 @@
  *
  */
 
-import FramedContent from './FramedContent';
+import FramedContent from "./FramedContent";
 export default FramedContent;