@ndla/ui 50.7.3 → 50.8.1

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",
   },
 };

package/src/CampaignBlock/CampaignBlock.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { breakpoints, colors, fonts, spacing, mq, misc } from '@ndla/core';
-import { Forward } from '@ndla/icons/common';
-import SafeLink from '@ndla/safelink';
-import { HeadingLevel } from '@ndla/typography';
-import { getPossiblyRelativeUrl } from '../utils/relativeUrl';
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { breakpoints, colors, fonts, spacing, mq, misc } from "@ndla/core";
+import { Forward } from "@ndla/icons/common";
+import SafeLink from "@ndla/safelink";
+import { HeadingLevel } from "@ndla/typography";
+import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
 
 interface Image {
   src: string;
@@ -29,12 +29,12 @@ interface Props {
     language: string;
   };
   headingLevel?: HeadingLevel;
-  url?: {
-    url: string;
-    text: string;
+  url: {
+    url?: string;
+    text?: string;
   };
   image?: Image;
-  imageSide?: 'left' | 'right';
+  imageSide?: "left" | "right";
   className?: string;
   path?: string;
 }
@@ -47,13 +47,13 @@ const Container = styled.div`
   border-radius: ${misc.borderRadius};
   padding: ${spacing.normal};
   background-color: ${colors.white};
-  &[data-image-side='right'] {
+  &[data-image-side="right"] {
     flex-direction: column-reverse;
   }
   ${mq.range({ from: breakpoints.tabletWide })} {
     max-width: 1100px;
     flex-direction: row;
-    &[data-image-side='right'] {
+    &[data-image-side="right"] {
       flex-direction: row-reverse;
     }
   }
@@ -87,9 +87,9 @@ const TextWrapper = styled.div`
 const CampaignBlock = ({
   title,
   image,
-  imageSide = 'left',
+  imageSide = "left",
   description,
-  headingLevel: Heading = 'h2',
+  headingLevel: Heading = "h2",
   url,
   path,
   className,
@@ -98,13 +98,13 @@ const CampaignBlock = ({
     <Container className={className} data-type="campaign-block" data-image-side={imageSide}>
       {image && <StyledImg src={image.src} height={200} width={240} alt={image.alt} />}
       <TextWrapper>
-        <Heading css={headingStyle} lang={title.language === 'nb' ? 'no' : title.language}>
+        <Heading css={headingStyle} lang={title.language === "nb" ? "no" : title.language}>
           {title.title}
         </Heading>
-        <StyledDescription lang={description.language === 'nb' ? 'no' : description.language}>
+        <StyledDescription lang={description.language === "nb" ? "no" : description.language}>
           {description.text}
         </StyledDescription>
-        {url && (
+        {url.url && (
           <StyledLink to={getPossiblyRelativeUrl(url.url, path)}>
             {url.text}
             <Forward />

package/src/CampaignBlock/index.ts

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

package/src/CompetenceGoalTab/CompetenceGoalItem.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import SearchButton from './SearchButton';
-import { GoalItem, GoalList, GoalText, GoalsHeading, ListItemContent } from './styles';
-import { CompetenceGoalsItemType } from '../types';
+import { useTranslation } from "react-i18next";
+import SearchButton from "./SearchButton";
+import { GoalItem, GoalList, GoalText, GoalsHeading, ListItemContent } from "./styles";
+import { CompetenceGoalsItemType } from "../types";
 
 const CompetenceGoalItem = ({ title, goals, isOembed }: CompetenceGoalsItemType) => {
   const { t } = useTranslation();
@@ -25,7 +25,7 @@ const CompetenceGoalItem = ({ title, goals, isOembed }: CompetenceGoalsItemType)
                 <SearchButton
                   url={goal.url}
                   isOembed={isOembed}
-                  searchText={t('competenceGoals.competenceGoalResourceSearchText', { code: goal.id })}
+                  searchText={t("competenceGoals.competenceGoalResourceSearchText", { code: goal.id })}
                 />
               )}
             </ListItemContent>

package/src/CompetenceGoalTab/CompetenceGoalTab.tsx

@@ -6,16 +6,16 @@
  *
  */
 
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { ButtonV2 } from '@ndla/button';
-import { spacing } from '@ndla/core';
-import { BY, CC } from '@ndla/licenses';
-import { LicenseByline } from '@ndla/notion';
-import SafeLink from '@ndla/safelink';
-import Tooltip from '@ndla/tooltip';
-import CompetenceItem, { ListItemProp } from './CompetenceItem';
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { ButtonV2 } from "@ndla/button";
+import { spacing } from "@ndla/core";
+import { BY, CC } from "@ndla/licenses";
+import { LicenseByline } from "@ndla/notion";
+import SafeLink from "@ndla/safelink";
+import Tooltip from "@ndla/tooltip";
+import CompetenceItem, { ListItemProp } from "./CompetenceItem";
 
 type CompetenceProps = {
   list: ListItemProp[];
@@ -47,16 +47,16 @@ const CompetenceGoalTab = ({ list, isOembed }: CompetenceProps) => {
             return (
               <Tooltip
                 tooltip={
-                  type === 'coreElement'
-                    ? t('competenceGoals.competenceTabCoreTooltip')
-                    : t('competenceGoals.showCompetenceGoals')
+                  type === "coreElement"
+                    ? t("competenceGoals.competenceTabCoreTooltip")
+                    : t("competenceGoals.showCompetenceGoals")
                 }
                 key={`tabitem-${id}`}
               >
                 <ButtonV2
                   shape="pill"
                   aria-current={id === currentTabItem.id}
-                  colorTheme={id !== currentTabItem.id ? 'lighter' : undefined}
+                  colorTheme={id !== currentTabItem.id ? "lighter" : undefined}
                   onClick={() => setCurrentTab(list[index])}
                 >
                   {tabTitle}
@@ -70,11 +70,11 @@ const CompetenceGoalTab = ({ list, isOembed }: CompetenceProps) => {
       <LicenseByline licenseRights={[CC, BY]}>
         <LicenseIconsTextWrapper>UDIR</LicenseIconsTextWrapper>
       </LicenseByline>
-      {`${t('competenceGoals.licenseData')} `}
+      {`${t("competenceGoals.licenseData")} `}
       <SafeLink to="https://data.norge.no/nlod/no" target="_blank">
         NLOD
       </SafeLink>
-      {`, ${t('competenceGoals.licenseFrom')} `}
+      {`, ${t("competenceGoals.licenseFrom")} `}
       <SafeLink to="https://data.udir.no/" target="_blank">
         data.udir.no
       </SafeLink>

package/src/CompetenceGoalTab/CompetenceItem.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { colors, spacing } from '@ndla/core';
-import { MenuBook } from '@ndla/icons/action';
-import CompetenceGoalItem from './CompetenceGoalItem';
-import CoreElementItem from './CoreElementItem';
-import { CompetenceGoalsItemType, CoreElementsItemType } from '../types';
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { colors, spacing } from "@ndla/core";
+import { MenuBook } from "@ndla/icons/action";
+import CompetenceGoalItem from "./CompetenceGoalItem";
+import CoreElementItem from "./CoreElementItem";
+import { CompetenceGoalsItemType, CoreElementsItemType } from "../types";
 
 const GroupedElementWrapper = styled.div`
   margin: ${spacing.normal} 0 ${spacing.large};
@@ -36,12 +36,11 @@ const GoalsInfo = styled.p`
 `;
 
 const GoalList = styled.ul`
-  margin: 0;
   padding: 0;
   list-style-type: none;
 `;
 
-export type CompetenceTypeProps = 'competenceGoals' | 'coreElement';
+export type CompetenceTypeProps = "competenceGoals" | "coreElement";
 export type CompetenceGoals = {
   title: string;
   elements: CompetenceGoalsItemType[];
@@ -67,7 +66,7 @@ const CompetenceItem = ({ item, isOembed }: ListItemProps) => {
   const { type, groupedCompetenceGoals, groupedCoreElementItems } = item;
 
   switch (type) {
-    case 'competenceGoals':
+    case "competenceGoals":
       return (
         <>
           {groupedCompetenceGoals?.map((group) => (
@@ -78,7 +77,7 @@ const CompetenceItem = ({ item, isOembed }: ListItemProps) => {
                     <MenuBook />
                     {group.title}
                   </GroupedGoalsTitle>
-                  <GoalsInfo>{t('competenceGoals.competenceGoalTitle')}</GoalsInfo>
+                  <GoalsInfo>{t("competenceGoals.competenceGoalTitle")}</GoalsInfo>
                 </hgroup>
               </GroupedGoalsTitleWrapper>
               {group.elements.length > 0 && (
@@ -98,7 +97,7 @@ const CompetenceItem = ({ item, isOembed }: ListItemProps) => {
           ))}
         </>
       );
-    case 'coreElement':
+    case "coreElement":
       return (
         <>
           {groupedCoreElementItems?.map((group) => (

package/src/CompetenceGoalTab/CoreElementItem.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import SearchButton from './SearchButton';
-import { GoalItem, GoalList, GoalText, GoalsHeading, ListItemContent } from './styles';
-import { CoreElementsItemType } from '../types';
+import { useTranslation } from "react-i18next";
+import SearchButton from "./SearchButton";
+import { GoalItem, GoalList, GoalText, GoalsHeading, ListItemContent } from "./styles";
+import { CoreElementsItemType } from "../types";
 
 const CoreElementItem = ({ title, text, url, id, isOembed }: CoreElementsItemType) => {
   const { t } = useTranslation();
@@ -24,7 +24,9 @@ const CoreElementItem = ({ title, text, url, id, isOembed }: CoreElementsItemTyp
               <SearchButton
                 url={url}
                 isOembed={isOembed}
-                searchText={t('competenceGoals.coreResourceSearchText', { code: id })}
+                searchText={t("competenceGoals.coreResourceSearchText", {
+                  code: id,
+                })}
               />
             )}
           </ListItemContent>

package/src/CompetenceGoalTab/SearchButton.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { spacing, mq, breakpoints } from '@ndla/core';
-import { Search } from '@ndla/icons/common';
-import { SafeLinkButton } from '@ndla/safelink';
+import styled from "@emotion/styled";
+import { spacing, mq, breakpoints } from "@ndla/core";
+import { Search } from "@ndla/icons/common";
+import { SafeLinkButton } from "@ndla/safelink";
 
 const StyledSearch = styled(Search)`
   height: ${spacing.normal};
@@ -40,7 +40,7 @@ interface SearchButtonProps {
 const SearchButton = ({ url, isOembed, searchText }: SearchButtonProps) => {
   return (
     <GoalSearchWrapper>
-      <SafeLinkButton variant="outline" to={url} target={isOembed ? '_blank' : '_self'}>
+      <SafeLinkButton variant="outline" to={url} target={isOembed ? "_blank" : "_self"}>
         <StyledSearch size="normal" />
         <span>{searchText}</span>
       </SafeLinkButton>

package/src/CompetenceGoalTab/index.ts

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

package/src/CompetenceGoalTab/styles.ts

@@ -6,13 +6,13 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
+import styled from "@emotion/styled";
+import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
 
 export const ListItemContent = styled.div`
   display: flex;
   justify-content: space-between;
-  ${fonts.sizes('22px', '32px')};
+  ${fonts.sizes("22px", "32px")};
   ${mq.range({ until: breakpoints.tabletWide })} {
     flex-direction: column;
   }
@@ -21,6 +21,7 @@ export const ListItemContent = styled.div`
 export const GoalItem = styled.li`
   margin: ${spacing.medium} 0;
   border-bottom: 1px solid ${colors.brand.neutral7};
+  padding: 0;
 `;
 
 export const GoalsHeading = styled.h3`

package/src/ContactBlock/ContactBlock.tsx

@@ -6,19 +6,19 @@
  *
  */
 
-import concat from 'lodash/concat';
-import { ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { spacing, fonts, colors, mq, breakpoints, misc } from '@ndla/core';
-import { BlobPointy, BlobRound } from '@ndla/icons/common';
-import { COPYRIGHTED, getLicenseByAbbreviation } from '@ndla/licenses';
-import { IImageMetaInformationV3 } from '@ndla/types-backend/image-api';
-import { CanonicalUrlFuncs } from '../Embed';
-import { errorSvgSrc } from '../Embed/ImageEmbed';
-import Image, { ImageLink } from '../Image';
-import LicenseLink from '../LicenseByline/LicenseLink';
+import concat from "lodash/concat";
+import { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { spacing, fonts, colors, mq, breakpoints, misc } from "@ndla/core";
+import { BlobPointy, BlobRound } from "@ndla/icons/common";
+import { COPYRIGHTED, getLicenseByAbbreviation } from "@ndla/licenses";
+import { IImageMetaInformationV3 } from "@ndla/types-backend/image-api";
+import { CanonicalUrlFuncs } from "../Embed";
+import { errorSvgSrc } from "../Embed/ImageEmbed";
+import Image, { ImageLink } from "../Image";
+import LicenseLink from "../LicenseByline/LicenseLink";
 
 const BLOB_WIDTH = 90;
 
@@ -26,14 +26,14 @@ interface Props {
   image?: IImageMetaInformationV3;
   jobTitle: string;
   description: string;
-  blobColor?: 'pink' | 'green';
-  blob?: 'pointy' | 'round';
+  blobColor?: "pink" | "green";
+  blob?: "pointy" | "round";
   imageWidth?: number;
   name: string;
   email: string;
   embedAlt?: string;
   lang?: string;
-  imageCanonicalUrl?: CanonicalUrlFuncs['image'];
+  imageCanonicalUrl?: CanonicalUrlFuncs["image"];
 }
 const BlockWrapper = styled.div`
   display: flex;
@@ -56,7 +56,7 @@ const BlockWrapper = styled.div`
 `;
 
 const StyledHeader = styled.div`
-  ${fonts.sizes('22px', '30px')};
+  ${fonts.sizes("22px", "30px")};
   font-weight: ${fonts.weight.bold};
   margin: 0 0 ${spacing.xsmall} 0;
   padding-top: ${spacing.medium};
@@ -64,7 +64,7 @@ const StyledHeader = styled.div`
 
 const StyledText = styled.div`
   display: flex;
-  ${fonts.sizes('16px', '26px')};
+  ${fonts.sizes("16px", "26px")};
   overflow-wrap: anywhere;
   color: ${colors.text.light};
   gap: ${spacing.xxsmall};
@@ -109,7 +109,7 @@ const ImageWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${spacing.xsmall};
-  ${fonts.sizes('16px', '26px')};
+  ${fonts.sizes("16px", "26px")};
   padding: ${spacing.medium} ${spacing.medium} 0 0;
   ${mq.range({ from: breakpoints.tablet })} {
     padding-right: 0;
@@ -152,14 +152,14 @@ const ContactBlock = ({
   name,
   email,
   embedAlt,
-  blobColor = 'green',
-  blob = 'pointy',
+  blobColor = "green",
+  blob = "pointy",
   imageCanonicalUrl,
   lang,
 }: Props) => {
   const { t, i18n } = useTranslation();
-  const isGreenBlob = blobColor === 'green';
-  const Blob = blob === 'pointy' ? BlobPointy : BlobRound;
+  const isGreenBlob = blobColor === "green";
+  const Blob = blob === "pointy" ? BlobPointy : BlobRound;
   const authors = concat(image?.copyright.processors, image?.copyright.creators, image?.copyright.rightsholders);
   const license = image?.copyright
     ? getLicenseByAbbreviation(image.copyright.license.license, i18n.language)
@@ -180,12 +180,12 @@ const ContactBlock = ({
               />
             </LinkWrapper>
             <span>
-              {`${t('embed.type.image')}: ${authors.map((author) => `${author?.name}`).join(', ')} `}
+              {`${t("embed.type.image")}: ${authors.map((author) => `${author?.name}`).join(", ")} `}
               {!!license && <LicenseLink license={license} asLink={!!license.url.length} />}
             </span>
           </>
         ) : (
-          <img alt={t('image.error.url')} src={errorSvgSrc} />
+          <img alt={t("image.error.url")} src={errorSvgSrc} />
         )}
       </ImageWrapper>
       <ContentWrapper>
@@ -194,7 +194,7 @@ const ContactBlock = ({
             <StyledHeader lang={lang}>{name}</StyledHeader>
             <StyledText lang={lang}>{jobTitle}</StyledText>
             <StyledText>
-              <Email>{`${t('email')}:`}</Email>
+              <Email>{`${t("email")}:`}</Email>
               <EmailLink href={`mailto:${email}`}>{email}</EmailLink>
             </StyledText>
           </InfoWrapper>

package/src/ContactBlock/Contactblock.stories.tsx

@@ -6,79 +6,79 @@
  *
  */
 
-import { Meta, StoryFn } from '@storybook/react';
-import ContactBlock from './ContactBlock';
-import { defaultParameters } from '../../../../stories/defaults';
+import { Meta, StoryFn } from "@storybook/react";
+import ContactBlock from "./ContactBlock";
+import { defaultParameters } from "../../../../stories/defaults";
 
 export default {
-  title: 'Components/Contact block',
+  title: "Components/Contact block",
   component: ContactBlock,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   args: {
     image: {
-      id: '65750',
-      metaUrl: 'https://api.test.ndla.no/image-api/v3/images/65750',
+      id: "65750",
+      metaUrl: "https://api.test.ndla.no/image-api/v3/images/65750",
       title: {
-        title: 'Sigurd Trageton',
-        language: 'nb',
+        title: "Sigurd Trageton",
+        language: "nb",
       },
       alttext: {
-        alttext: 'Sigurd Trageton',
-        language: 'nb',
+        alttext: "Sigurd Trageton",
+        language: "nb",
       },
       copyright: {
         license: {
-          license: 'CC-BY-SA-4.0',
-          description: 'Creative Commons Attribution-ShareAlike 4.0 International',
-          url: 'https://creativecommons.org/licenses/by-sa/4.0/',
+          license: "CC-BY-SA-4.0",
+          description: "Creative Commons Attribution-ShareAlike 4.0 International",
+          url: "https://creativecommons.org/licenses/by-sa/4.0/",
         },
-        origin: '',
+        origin: "",
         creators: [
           {
-            type: 'photographer',
-            name: 'Tom Knudsen',
+            type: "photographer",
+            name: "Tom Knudsen",
           },
         ],
         processors: [],
         rightsholders: [
           {
-            type: 'rightsholder',
-            name: 'NTB',
+            type: "rightsholder",
+            name: "NTB",
           },
         ],
         processed: false,
       },
       tags: {
-        tags: ['Sigurd', 'Trageton', 'Portrett'],
-        language: 'nb',
+        tags: ["Sigurd", "Trageton", "Portrett"],
+        language: "nb",
       },
       caption: {
-        caption: 'Sigurd Trageton',
-        language: 'nb',
+        caption: "Sigurd Trageton",
+        language: "nb",
       },
-      supportedLanguages: ['nb', 'nn'],
-      created: '2023-03-29T07:15:50Z',
-      createdBy: 'f-jBTU8O8kYbUW20lMeIuTSv',
-      modelRelease: 'not-set',
+      supportedLanguages: ["nb", "nn"],
+      created: "2023-03-29T07:15:50Z",
+      createdBy: "f-jBTU8O8kYbUW20lMeIuTSv",
+      modelRelease: "not-set",
       image: {
-        fileName: 'RVrVQIKh.jpg',
+        fileName: "RVrVQIKh.jpg",
         size: 404340,
-        contentType: 'image/jpeg',
-        imageUrl: 'https://api.test.ndla.no/image-api/raw/RVrVQIKh.jpg',
+        contentType: "image/jpeg",
+        imageUrl: "https://api.test.ndla.no/image-api/raw/RVrVQIKh.jpg",
         dimensions: {
           width: 1600,
           height: 2000,
         },
-        language: 'nb',
+        language: "nb",
       },
     },
-    jobTitle: 'Daglig leder og ansvarlig redaktør, Vestland fylkeskommune',
+    jobTitle: "Daglig leder og ansvarlig redaktør, Vestland fylkeskommune",
     description:
-      'Sigurd har variert ledererfaring fra utdanningssektoren, både fra videregående skole, nasjonalt senter og fra universitets/høgskolesektoren. Ansvarsområdene dekker bl.a. utdanning/opplæring/studiekvalitet, økonomi, HR, stratgi og IT-utvikling/-drift.',
-    name: 'Sigurd Trageton',
-    email: 'sigurd@ndla.no',
-    blobColor: 'green',
-    blob: 'pointy',
+      "Sigurd har variert ledererfaring fra utdanningssektoren, både fra videregående skole, nasjonalt senter og fra universitets/høgskolesektoren. Ansvarsområdene dekker bl.a. utdanning/opplæring/studiekvalitet, økonomi, HR, stratgi og IT-utvikling/-drift.",
+    name: "Sigurd Trageton",
+    email: "sigurd@ndla.no",
+    blobColor: "green",
+    blob: "pointy",
   },
   parameters: {
     ...defaultParameters,
@@ -89,4 +89,4 @@ export const ContactBlockStory: StoryFn<typeof ContactBlock> = ({ ...args }) =>
   return <ContactBlock {...args} />;
 };
 
-ContactBlockStory.storyName = 'Contact block';
+ContactBlockStory.storyName = "Contact block";

package/src/ContactBlock/index.ts

@@ -5,6 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import ContactBlock from './ContactBlock';
+import ContactBlock from "./ContactBlock";
 
 export default ContactBlock;