@ndla/ui 50.8.0 → 50.8.2

package/src/AudioPlayer/Controls.tsx

@@ -6,16 +6,16 @@
  *
  */
 
-import { useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { Root as PopoverRoot, PopoverContent, PopoverTrigger, PopoverPortal } from '@radix-ui/react-popover';
-import { Root as SliderRoot, Track, Range, SliderThumb } from '@radix-ui/react-slider';
-import { ButtonV2, IconButtonV2 } from '@ndla/button';
-import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import { DropdownMenu, DropdownContent, DropdownItem, DropdownTrigger } from '@ndla/dropdown-menu';
-import { Back15, Forward15 } from '@ndla/icons/action';
-import { Play, Pause, VolumeUp } from '@ndla/icons/common';
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { Root as PopoverRoot, PopoverContent, PopoverTrigger, PopoverPortal } from "@radix-ui/react-popover";
+import { Root as SliderRoot, Track, Range, SliderThumb } from "@radix-ui/react-slider";
+import { ButtonV2, IconButtonV2 } from "@ndla/button";
+import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
+import { DropdownMenu, DropdownContent, DropdownItem, DropdownTrigger } from "@ndla/dropdown-menu";
+import { Back15, Forward15 } from "@ndla/icons/action";
+import { Play, Pause, VolumeUp } from "@ndla/icons/common";
 
 const ControlsWrapper = styled.div`
   border: 1px solid ${colors.brand.lighter};
@@ -31,8 +31,8 @@ const ControlsWrapper = styled.div`
     padding: ${spacing.small};
     grid-template-columns: 1fr repeat(5, auto) 1fr;
     grid-template-areas:
-      'track  track track     track track     track   track'
-      '.      speed backwards play  forwards  volume  .';
+      "track  track track     track track     track   track"
+      ".      speed backwards play  forwards  volume  .";
   }
 `;
 
@@ -90,7 +90,7 @@ const SpeedSelectedMark = styled.span`
 `;
 
 const Time = styled.div`
-  ${fonts.sizes('16px')};
+  ${fonts.sizes("16px")};
 `;
 
 const ProgressWrapper = styled.div`
@@ -240,13 +240,13 @@ const Controls = ({ src, title }: Props) => {
         setPlaying(false);
       };
 
-      audioElement.addEventListener('timeupdate', handleTimeUpdate);
-      audioElement.addEventListener('loadedmetadata', handleLoadedMetaData);
-      audioElement.addEventListener('ended', handleTimeEnded);
+      audioElement.addEventListener("timeupdate", handleTimeUpdate);
+      audioElement.addEventListener("loadedmetadata", handleLoadedMetaData);
+      audioElement.addEventListener("ended", handleTimeEnded);
       return () => {
-        audioElement.removeEventListener('timeupdate', handleTimeUpdate);
-        audioElement.removeEventListener('loadedmetadata', handleLoadedMetaData);
-        audioElement.removeEventListener('ended', handleTimeEnded);
+        audioElement.removeEventListener("timeupdate", handleTimeUpdate);
+        audioElement.removeEventListener("loadedmetadata", handleLoadedMetaData);
+        audioElement.removeEventListener("ended", handleTimeEnded);
       };
     }
   }, []);
@@ -288,7 +288,7 @@ const Controls = ({ src, title }: Props) => {
       <audio ref={audioRef} src={src} title={title} preload="metadata" />
       <ControlsWrapper>
         <PlayButton
-          aria-label={t(playing ? t('audio.pause') : t('audio.play'))}
+          aria-label={t(playing ? t("audio.pause") : t("audio.play"))}
           colorTheme="lighter"
           size="normal"
           onClick={togglePlay}
@@ -298,8 +298,8 @@ const Controls = ({ src, title }: Props) => {
         <Back15SecButton
           variant="ghost"
           colorTheme="greyLighter"
-          title={t('audio.controls.rewind15sec')}
-          aria-label={t('audio.controls.rewind15sec')}
+          title={t("audio.controls.rewind15sec")}
+          aria-label={t("audio.controls.rewind15sec")}
           onClick={() => onSeekSeconds(-15)}
         >
           <Back15 />
@@ -311,8 +311,8 @@ const Controls = ({ src, title }: Props) => {
               variant="ghost"
               size="normal"
               colorTheme="greyLighter"
-              title={t('audio.controls.selectSpeed')}
-              aria-label={t('audio.controls.selectSpeed')}
+              title={t("audio.controls.selectSpeed")}
+              aria-label={t("audio.controls.selectSpeed")}
             >
               {speedValue}x
             </SpeedButton>
@@ -335,8 +335,8 @@ const Controls = ({ src, title }: Props) => {
         <Forward15SecButton
           colorTheme="greyLighter"
           variant="ghost"
-          title={t('audio.controls.forward15sec')}
-          aria-label={t('audio.controls.forward15sec')}
+          title={t("audio.controls.forward15sec")}
+          aria-label={t("audio.controls.forward15sec")}
           onClick={() => onSeekSeconds(15)}
         >
           <Forward15 />
@@ -359,7 +359,7 @@ const Controls = ({ src, title }: Props) => {
         </ProgressWrapper>
         <VolumeWrapper>
           <PopoverTrigger asChild>
-            <VolumeButton variant="ghost" colorTheme="greyLighter" aria-label={t('audio.controls.adjustVolume')}>
+            <VolumeButton variant="ghost" colorTheme="greyLighter" aria-label={t("audio.controls.adjustVolume")}>
               <VolumeUp />
             </VolumeButton>
           </PopoverTrigger>

package/src/AudioPlayer/SpeechControl.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import { useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { IconButtonV2 } from '@ndla/button';
-import { VolumeUp } from '@ndla/icons/common';
-import Tooltip from '@ndla/tooltip';
+import { useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { IconButtonV2 } from "@ndla/button";
+import { VolumeUp } from "@ndla/icons/common";
+import Tooltip from "@ndla/tooltip";
 
 type Props = {
   src: string;
@@ -35,8 +35,8 @@ const SpeechControl = ({ src, title }: Props) => {
     <div>
       {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
       <audio ref={audioRef} src={src} title={title} preload="metadata" />
-      <Tooltip tooltip={t('audio.play')}>
-        <IconButtonV2 type="button" onClick={togglePlay} aria-label={t('audio.play')} variant="ghost">
+      <Tooltip tooltip={t("audio.play")}>
+        <IconButtonV2 type="button" onClick={togglePlay} aria-label={t("audio.play")} variant="ghost">
           <VolumeUp />
         </IconButtonV2>
       </Tooltip>

package/src/AudioPlayer/index.ts

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

package/src/BannerCard/BannerCard.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { colors, fonts, breakpoints, mq } from '@ndla/core';
-import SafeLink from '@ndla/safelink';
-import { Image } from '..';
+import styled from "@emotion/styled";
+import { colors, fonts, breakpoints, mq } from "@ndla/core";
+import SafeLink from "@ndla/safelink";
+import { Image } from "..";
 
 const BannerWrapper = styled.div`
   display: flex;

package/src/BannerCard/index.ts

@@ -6,6 +6,6 @@
  *
  */
 
-import BannerCard from './BannerCard';
+import BannerCard from "./BannerCard";
 
 export { BannerCard };

package/src/BlogPost/BlogPost.stories.tsx

@@ -6,26 +6,26 @@
  *
  */
 
-import { Meta, StoryFn } from '@storybook/react';
-import BlogPost, { Props } from './BlogPost';
-import { defaultParameters } from '../../../../stories/defaults';
+import { Meta, StoryFn } from "@storybook/react";
+import BlogPost, { Props } from "./BlogPost";
+import { defaultParameters } from "../../../../stories/defaults";
 
 const args: Props = {
-  title: { title: 'Min bloggpost', language: 'nb-no' },
-  author: 'Ola Nordmann',
-  url: '#',
-  headingLevel: 'h3',
-  size: 'large',
+  title: { title: "Min bloggpost", language: "nb-no" },
+  author: "Ola Nordmann",
+  url: "#",
+  headingLevel: "h3",
+  size: "large",
   metaImage: {
-    alt: 'Yonghetempelet i Beijing. Foto.',
-    url: 'https://api.test.ndla.no/image-api/raw/id//62870',
+    alt: "Yonghetempelet i Beijing. Foto.",
+    url: "https://api.test.ndla.no/image-api/raw/id//62870",
   },
 };
 
 export default {
-  title: 'Components/Blog Post',
+  title: "Components/Blog Post",
   component: BlogPost,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     ...defaultParameters,
   },
@@ -37,4 +37,4 @@ export const BlogPostStory: StoryFn<typeof BlogPost> = ({ ...args }) => {
 };
 
 BlogPostStory.args = args;
-BlogPostStory.storyName = 'BlogPost';
+BlogPostStory.storyName = "BlogPost";

package/src/BlogPost/BlogPost.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { breakpoints, colors, fonts, misc, mq, spacing } from '@ndla/core';
-import SafeLink from '@ndla/safelink';
-import { HeadingLevel } from '@ndla/typography';
-import { getPossiblyRelativeUrl } from '../utils/relativeUrl';
+import { useTranslation } from "react-i18next";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { breakpoints, colors, fonts, misc, mq, spacing } from "@ndla/core";
+import SafeLink from "@ndla/safelink";
+import { HeadingLevel } from "@ndla/typography";
+import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
 
 export interface Props {
   title: {
@@ -22,7 +22,7 @@ export interface Props {
   author?: string;
   url: string;
   headingLevel?: HeadingLevel;
-  size?: 'normal' | 'large';
+  size?: "normal" | "large";
   metaImage: {
     url: string;
     alt: string;
@@ -43,7 +43,7 @@ const Container = styled(SafeLink)`
   height: 100%;
   ${mq.range({ from: breakpoints.tabletWide })} {
     max-width: 350px;
-    &[data-size='large'] {
+    &[data-size="large"] {
       max-width: 532px;
     }
   }
@@ -60,7 +60,7 @@ const headingCss = css`
   width: fit-content;
   margin: 0;
   font-weight: ${fonts.weight.semibold};
-  ${fonts.sizes('26px', '36px')};
+  ${fonts.sizes("26px", "36px")};
 `;
 
 const AuthorContainer = styled.div`
@@ -82,16 +82,16 @@ const StyledImg = styled.img`
   border: 0;
 `;
 
-const BlogPost = ({ title, author, url, metaImage, headingLevel: Heading = 'h3', size = 'normal', path }: Props) => {
+const BlogPost = ({ title, author, url, metaImage, headingLevel: Heading = "h3", size = "normal", path }: Props) => {
   const { t } = useTranslation();
   const href = getPossiblyRelativeUrl(url, path);
   return (
     <Container data-size={size} to={href}>
-      <Heading className="blog-title" css={headingCss} lang={title.language === 'nb' ? 'no' : title.language}>
+      <Heading className="blog-title" css={headingCss} lang={title.language === "nb" ? "no" : title.language}>
         {title.title}
       </Heading>
       <StyledImg src={metaImage.url} alt={metaImage.alt} />
-      {!!author && <AuthorContainer aria-label={t('article.writtenBy', { authors: author })}>{author}</AuthorContainer>}
+      {!!author && <AuthorContainer aria-label={t("article.writtenBy", { authors: author })}>{author}</AuthorContainer>}
     </Container>
   );
 };

package/src/BlogPost/index.ts

@@ -6,4 +6,4 @@
  *
  */
 
-export { default as BlogPostV2 } from './BlogPost';
+export { default as BlogPostV2 } from "./BlogPost";

package/src/Breadcrumb/Breadcrumb.stories.tsx

@@ -6,33 +6,33 @@
  *
  */
 
-import { Meta, StoryObj } from '@storybook/react';
-import Breadcrumb from './Breadcrumb';
-import { defaultParameters } from '../../../../stories/defaults';
+import { Meta, StoryObj } from "@storybook/react";
+import Breadcrumb from "./Breadcrumb";
+import { defaultParameters } from "../../../../stories/defaults";
 
 const items = [
   {
-    name: 'Fag',
-    to: '#1',
+    name: "Fag",
+    to: "#1",
   },
   {
-    name: 'Hovedemne tittel',
-    to: '#2',
+    name: "Hovedemne tittel",
+    to: "#2",
   },
   {
-    name: 'Underemne tittel',
-    to: '#3',
+    name: "Underemne tittel",
+    to: "#3",
   },
   {
-    name: 'Tittel på side/ressurs',
-    to: '#4',
+    name: "Tittel på side/ressurs",
+    to: "#4",
   },
 ];
 
 export default {
-  title: 'Components/Breadcrumb/Breadcrumb',
+  title: "Components/Breadcrumb/Breadcrumb",
   component: Breadcrumb,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   args: {
     items: items,
   },
@@ -59,7 +59,7 @@ export const AutoCollapse: StoryObj<typeof Breadcrumb> = {
 export const CustomSeparator: StoryObj<typeof Breadcrumb> = {
   args: {
     renderSeparator: (item, totalCount) => (
-      <div style={{ padding: '0px 12px' }}>
+      <div style={{ padding: "0px 12px" }}>
         {item.index}/{totalCount}
       </div>
     ),

package/src/Breadcrumb/Breadcrumb.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import { ReactNode, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { useComponentSize, useIsomorphicLayoutEffect } from '@ndla/hooks';
-import BreadcrumbItem, { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from './BreadcrumbItem';
+import { ReactNode, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { useComponentSize, useIsomorphicLayoutEffect } from "@ndla/hooks";
+import BreadcrumbItem, { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from "./BreadcrumbItem";
 
 interface Props {
   items: SimpleBreadcrumbItem[];
@@ -56,7 +56,7 @@ const Breadcrumb = ({
 
     // Clear max width on all items
     items.forEach((el) => {
-      el.setMaxWidth('none');
+      el.setMaxWidth("none");
     });
 
     // Set maxWidth on breadcrumb text items iteratively until
@@ -64,13 +64,13 @@ const Breadcrumb = ({
     // if the height of the list is less then 70.
     items.forEach((el) => {
       if (olRef.current.offsetHeight > 60) {
-        el.setMaxWidth('40px');
+        el.setMaxWidth("40px");
       }
     });
   }, [size, items]);
 
   return (
-    <BreadcrumbNav ref={containerRef} aria-label={t('breadcrumb.breadcrumb')}>
+    <BreadcrumbNav ref={containerRef} aria-label={t("breadcrumb.breadcrumb")}>
       <StyledList ref={olRef}>
         {items.map((item, index) => (
           <BreadcrumbItem
@@ -84,14 +84,14 @@ const Breadcrumb = ({
                 (!collapseLast && index === items.length - 1)
               ) {
                 if (element) {
-                  element.setMaxWidth('none');
+                  element.setMaxWidth("none");
                 }
                 breadcrumbItemRefs.delete(item.to);
               } else {
                 breadcrumbItemRefs.set(item.to, element);
               }
             }}
-            key={typeof item.to === 'string' ? item.to : item.to.pathname}
+            key={typeof item.to === "string" ? item.to : item.to.pathname}
             totalCount={items.length}
             item={{ ...item, index }}
           />

package/src/Breadcrumb/BreadcrumbItem.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import { useRef, useImperativeHandle, ReactNode, forwardRef } from 'react';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { mq, spacing, breakpoints } from '@ndla/core';
-import { ChevronRight } from '@ndla/icons/common';
-import SafeLink from '@ndla/safelink';
+import { useRef, useImperativeHandle, ReactNode, forwardRef } from "react";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { mq, spacing, breakpoints } from "@ndla/core";
+import { ChevronRight } from "@ndla/icons/common";
+import SafeLink from "@ndla/safelink";
 
 export interface SimpleBreadcrumbItem {
   to: string | Partial<Location>;
@@ -91,7 +91,7 @@ const BreadcrumbItem = forwardRef<any, Props>(
     const { to, name, index } = item;
     const isLast = index === totalCount - 1;
     return (
-      <StyledListItem ref={liRef} autoCollapse={autoCollapse} aria-current={isLast ? 'page' : undefined}>
+      <StyledListItem ref={liRef} autoCollapse={autoCollapse} aria-current={isLast ? "page" : undefined}>
         <CollapseContainer autoCollapse={autoCollapse}>
           {renderItem ? (
             renderItem(item, totalCount)

package/src/Breadcrumb/HeaderBreadcrumb.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { colors, fonts, spacing } from '@ndla/core';
-import { ChevronRight } from '@ndla/icons/common';
-import SafeLink from '@ndla/safelink';
-import Breadcrumb from './Breadcrumb';
-import { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from './BreadcrumbItem';
+import styled from "@emotion/styled";
+import { colors, fonts, spacing } from "@ndla/core";
+import { ChevronRight } from "@ndla/icons/common";
+import SafeLink from "@ndla/safelink";
+import Breadcrumb from "./Breadcrumb";
+import { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from "./BreadcrumbItem";
 
 interface ThemeProps {
   light: boolean | undefined;

package/src/Breadcrumb/HomeBreadcrumb.stories.tsx

@@ -6,34 +6,34 @@
  *
  */
 
-import { Meta, StoryObj } from '@storybook/react';
-import { colors } from '@ndla/core';
-import HomeBreadcrumb from './HomeBreadcrumb';
-import { defaultParameters } from '../../../../stories/defaults';
+import { Meta, StoryObj } from "@storybook/react";
+import { colors } from "@ndla/core";
+import HomeBreadcrumb from "./HomeBreadcrumb";
+import { defaultParameters } from "../../../../stories/defaults";
 
 const items = [
   {
-    name: 'Fag',
-    to: '#1',
+    name: "Fag",
+    to: "#1",
   },
   {
-    name: 'Hovedemne tittel',
-    to: '#2',
+    name: "Hovedemne tittel",
+    to: "#2",
   },
   {
-    name: 'Underemne tittel',
-    to: '#3',
+    name: "Underemne tittel",
+    to: "#3",
   },
   {
-    name: 'Tittel på side/ressurs',
-    to: '#4',
+    name: "Tittel på side/ressurs",
+    to: "#4",
   },
 ];
 
 export default {
-  title: 'Components/Breadcrumb/HomeBreadcrumb',
+  title: "Components/Breadcrumb/HomeBreadcrumb",
   component: HomeBreadcrumb,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     inlineStories: true,
     ...defaultParameters,

package/src/Breadcrumb/HomeBreadcrumb.tsx

@@ -6,19 +6,19 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import { ChevronRight, Home } from '@ndla/icons/common';
-import SafeLink from '@ndla/safelink';
-import Breadcrumb from './Breadcrumb';
-import { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from './BreadcrumbItem';
+import styled from "@emotion/styled";
+import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
+import { ChevronRight, Home } from "@ndla/icons/common";
+import SafeLink from "@ndla/safelink";
+import Breadcrumb from "./Breadcrumb";
+import { IndexedBreadcrumbItem, SimpleBreadcrumbItem } from "./BreadcrumbItem";
 
 interface ThemeProps {
   light: boolean | undefined;
 }
 
 const StyledSeparator = styled.div<ThemeProps>`
-  ${fonts.sizes('14px')};
+  ${fonts.sizes("14px")};
   margin: 0 ${spacing.small};
   user-select: none;
   color: ${({ light }) => (light ? colors.white : colors.text.primary)};
@@ -57,7 +57,7 @@ const HomeBreadcrumb = ({ items, light }: Props) => {
     if (item.index === totalCount - 1) {
       return <StyledSpan light={light}>{item.name}</StyledSpan>;
     }
-    if (item.index === 0 && typeof item.name === 'string') {
+    if (item.index === 0 && typeof item.name === "string") {
       return (
         <StyledIconSafeLink aria-label={item.name} to={item.to}>
           <StyledHome title={item.name} light={light} />

package/src/Breadcrumb/index.ts

@@ -6,12 +6,12 @@
  *
  */
 
-import Breadcrumb from './Breadcrumb';
+import Breadcrumb from "./Breadcrumb";
 
-export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from './BreadcrumbItem';
+export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from "./BreadcrumbItem";
 
-export { default as HeaderBreadcrumb } from './HeaderBreadcrumb';
+export { default as HeaderBreadcrumb } from "./HeaderBreadcrumb";
 
-export { default as HomeBreadcrumb } from './HomeBreadcrumb';
+export { default as HomeBreadcrumb } from "./HomeBreadcrumb";
 
 export default Breadcrumb;

package/src/CampaignBlock/CampaignBlock.stories.tsx

@@ -6,14 +6,14 @@
  *
  */
 
-import { Meta, StoryObj } from '@storybook/react';
-import CampaignBlock from './CampaignBlock';
-import { defaultParameters } from '../../../../stories/defaults';
+import { Meta, StoryObj } from "@storybook/react";
+import CampaignBlock from "./CampaignBlock";
+import { defaultParameters } from "../../../../stories/defaults";
 
 export default {
-  title: 'Components/Campaign Block',
+  title: "Components/Campaign Block",
   component: CampaignBlock,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     ...defaultParameters,
   },
@@ -22,38 +22,38 @@ export default {
 
 export const ImageLeft: StoryObj<typeof CampaignBlock> = {
   args: {
-    title: { title: 'NDLA film', language: 'nb-no' },
+    title: { title: "NDLA film", language: "nb-no" },
     description: {
-      text: 'NDLA film er en tjeneste i samarbeid med Norgesfilm. Denne tjenesten lar deg se en rekke spillefilmer, kortfilmer, dokumentarer og serier. Du kan også se undervisningsfilm og filmklipp. Velkommen inn i filmens verden!',
-      language: 'nb-no',
+      text: "NDLA film er en tjeneste i samarbeid med Norgesfilm. Denne tjenesten lar deg se en rekke spillefilmer, kortfilmer, dokumentarer og serier. Du kan også se undervisningsfilm og filmklipp. Velkommen inn i filmens verden!",
+      language: "nb-no",
     },
-    headingLevel: 'h2',
+    headingLevel: "h2",
     url: {
-      url: '#',
-      text: 'Gå til NDLA film',
+      url: "#",
+      text: "Gå til NDLA film",
     },
     image: {
-      alt: '',
-      src: 'https://api.test.ndla.no/image-api/raw/n2UYRxEG.png',
+      alt: "",
+      src: "https://api.test.ndla.no/image-api/raw/n2UYRxEG.png",
     },
   },
 };
 
 export const ImageRight: StoryObj<typeof CampaignBlock> = {
   args: {
-    title: { title: 'FN-dagen 24. oktober!', language: 'nb-no' },
+    title: { title: "FN-dagen 24. oktober!", language: "nb-no" },
     description: {
-      text: ' Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation  quis nostrud exercitation ',
-      language: 'nb-no',
+      text: " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation  quis nostrud exercitation ",
+      language: "nb-no",
     },
     url: {
-      url: '#',
-      text: 'Les mer om FN-dagen',
+      url: "#",
+      text: "Les mer om FN-dagen",
     },
     image: {
-      alt: 'FN-symbol',
-      src: 'https://api.test.ndla.no/image-api/raw/LkmDGtip.png',
+      alt: "FN-symbol",
+      src: "https://api.test.ndla.no/image-api/raw/LkmDGtip.png",
     },
-    imageSide: 'right',
+    imageSide: "right",
   },
 };