@ndla/ui 50.8.0 → 50.8.2

package/src/Resource/resourceComponents.tsx

@@ -6,17 +6,17 @@
  *
  */
 
-import { CSSProperties, HTMLAttributes, ReactNode, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { IconButtonV2 } from '@ndla/button';
-import { colors, fonts, spacing } from '@ndla/core';
-import { DropdownMenu, DropdownContent, DropdownTrigger, DropdownItem } from '@ndla/dropdown-menu';
-import { HashTag } from '@ndla/icons/common';
-import SafeLink, { SafeLinkButton } from '@ndla/safelink';
-import { resourceEmbedTypeMapping } from '../model/ContentType';
-import resourceTypeColor from '../utils/resourceTypeColor';
+import { CSSProperties, HTMLAttributes, ReactNode, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { IconButtonV2 } from "@ndla/button";
+import { colors, fonts, spacing } from "@ndla/core";
+import { DropdownMenu, DropdownContent, DropdownTrigger, DropdownItem } from "@ndla/dropdown-menu";
+import { HashTag } from "@ndla/icons/common";
+import SafeLink, { SafeLinkButton } from "@ndla/safelink";
+import { resourceEmbedTypeMapping } from "../model/ContentType";
+import resourceTypeColor from "../utils/resourceTypeColor";
 
 export interface ResourceImageProps {
   alt: string;
@@ -28,7 +28,7 @@ export const ResourceTitleLink = styled(SafeLink)`
   color: ${colors.brand.primary};
   flex: 1;
   :after {
-    content: '';
+    content: "";
     position: absolute;
     z-index: 1;
     top: 0;
@@ -112,7 +112,7 @@ const StyledResourceListElement = styled.li`
 const TagCounterWrapper = styled.span`
   display: flex;
   font-weight: ${fonts.weight.semibold};
-  ${fonts.sizes('14px', '14px')};
+  ${fonts.sizes("14px", "14px")};
 `;
 
 interface ContentIconProps extends HTMLAttributes<HTMLSpanElement> {
@@ -131,7 +131,10 @@ const StyledContentIconWrapper = styled.span`
 
 export const ContentIconWrapper = ({ contentType, children, ...props }: ContentIconProps) => {
   const contentIconWrapperVars = useMemo(
-    () => ({ '--content-background-color': resourceTypeColor(contentType) }) as unknown as CSSProperties,
+    () =>
+      ({
+        "--content-background-color": resourceTypeColor(contentType),
+      }) as unknown as CSSProperties,
     [contentType],
   );
   return (
@@ -155,10 +158,10 @@ export const TagList = ({ tags, tagLinkPrefix }: TagListProps) => {
   const { t } = useTranslation();
   if (!tags) return null;
   return (
-    <StyledTagList aria-label={t('myNdla.tagList')}>
+    <StyledTagList aria-label={t("myNdla.tagList")}>
       {tags.map((tag, i) => (
         <StyledTagListElement key={`tag-${i}`}>
-          <StyledSafeLink to={`${tagLinkPrefix ? tagLinkPrefix : ''}/${encodeURIComponent(tag)}`}>
+          <StyledSafeLink to={`${tagLinkPrefix ? tagLinkPrefix : ""}/${encodeURIComponent(tag)}`}>
             <HashTag />
             {tag}
           </StyledSafeLink>
@@ -188,7 +191,7 @@ export const CompressedTagList = ({ tags, tagLinkPrefix }: CompressedTagListProp
               size="xsmall"
               variant="ghost"
               colorTheme="light"
-              aria-label={t('myNdla.moreTags', { count: remainingTags.length })}
+              aria-label={t("myNdla.moreTags", { count: remainingTags.length })}
             >
               {<TagCounterWrapper>{`+${remainingTags.length}`}</TagCounterWrapper>}
             </StyledTrigger>
@@ -197,7 +200,7 @@ export const CompressedTagList = ({ tags, tagLinkPrefix }: CompressedTagListProp
             {remainingTags.map((tag, i) => (
               <DropdownItem key={`tag-${i}`}>
                 <SafeLinkButton
-                  to={`${tagLinkPrefix ?? ''}/${encodeURIComponent(tag)}`}
+                  to={`${tagLinkPrefix ?? ""}/${encodeURIComponent(tag)}`}
                   variant="ghost"
                   colorTheme="light"
                 >
@@ -221,7 +224,7 @@ export const ResourceTypeList = ({ resourceTypes }: ResourceTypeListProps) => {
   const { t } = useTranslation();
   if (!resourceTypes) return null;
   return (
-    <StyledResourceTypeList aria-label={t('navigation.topics')}>
+    <StyledResourceTypeList aria-label={t("navigation.topics")}>
       {resourceTypes.map((resource, i) => (
         <StyledResourceListElement key={resource.id}>
           {resourceEmbedTypeMapping[resource.id]

package/src/Resource/storyComponents.tsx

@@ -6,19 +6,22 @@
  *
  */
 
-import { IconButtonV2, ButtonV2 } from '@ndla/button';
-import { DropdownMenu, DropdownTrigger, DropdownContent, DropdownItem } from '@ndla/dropdown-menu';
-import { Pencil } from '@ndla/icons/action';
-import { HorizontalMenu } from '@ndla/icons/contentType';
-import { DeleteForever } from '@ndla/icons/editor';
+import { IconButtonV2, ButtonV2 } from "@ndla/button";
+import { DropdownMenu, DropdownTrigger, DropdownContent, DropdownItem } from "@ndla/dropdown-menu";
+import { Pencil } from "@ndla/icons/action";
+import { HorizontalMenu } from "@ndla/icons/contentType";
+import { DeleteForever } from "@ndla/icons/editor";
 
 export const resourceTypesArr = [
-  { id: 'urn:resourcetype:learningPath', name: 'Læringssti' },
-  { id: 'urn:resourcetype:subjectMaterial', name: 'Fagstoff' },
-  { id: 'urn:resourcetype:tasksAndActivities', name: 'Oppgaver og aktiviteter' },
-  { id: 'urn:resourcetype:reviewResource', name: 'Vurderingsressurs' },
-  { id: 'urn:resourcetype:externalResource', name: 'Ekstern læringsressurs' },
-  { id: 'urn:resourcetype:SourceMaterial', name: 'Kildemateriale' },
+  { id: "urn:resourcetype:learningPath", name: "Læringssti" },
+  { id: "urn:resourcetype:subjectMaterial", name: "Fagstoff" },
+  {
+    id: "urn:resourcetype:tasksAndActivities",
+    name: "Oppgaver og aktiviteter",
+  },
+  { id: "urn:resourcetype:reviewResource", name: "Vurderingsressurs" },
+  { id: "urn:resourcetype:externalResource", name: "Ekstern læringsressurs" },
+  { id: "urn:resourcetype:SourceMaterial", name: "Kildemateriale" },
 ];
 
 export const StoryResourceMenu = () => (

package/src/ResourceBox/ResourceBox.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { breakpoints, fonts, mq, colors, spacing } from '@ndla/core';
-import { Launch } from '@ndla/icons/common';
-import { SafeLinkButton } from '@ndla/safelink';
-import Image from '../Image';
+import styled from "@emotion/styled";
+import { breakpoints, fonts, mq, colors, spacing } from "@ndla/core";
+import { Launch } from "@ndla/icons/common";
+import { SafeLinkButton } from "@ndla/safelink";
+import Image from "../Image";
 
 const ResourceBoxContainer = styled.div`
   display: flex;

package/src/ResourceBox/index.ts

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

package/src/ResourceGroup/ResourceGroup.tsx

@@ -6,20 +6,20 @@
  *
  */
 
-import { ReactNode } from 'react';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { colors, fonts, spacing } from '@ndla/core';
+import { ReactNode } from "react";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { colors, fonts, spacing } from "@ndla/core";
 
-import { HeadingLevel } from '@ndla/typography';
-import ResourceList, { ResourceListProps } from './ResourceList';
+import { HeadingLevel } from "@ndla/typography";
+import ResourceList, { ResourceListProps } from "./ResourceList";
 
 const Wrapper = styled.section`
   margin-bottom: ${spacing.large};
 `;
 
 const headingStyle = css`
-  ${fonts.sizes('16px', '18px')};
+  ${fonts.sizes("16px", "18px")};
   font-weight: ${fonts.weight.bold};
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -44,7 +44,7 @@ const ResourceGroup = ({
   toggleAdditionalResources,
   contentType,
   invertedStyle: invertedStyleProp,
-  headingLevel: Heading = 'h1',
+  headingLevel: Heading = "h1",
   heartButton,
 }: Props & ResourceListProps) => (
   <Wrapper>

package/src/ResourceGroup/ResourceItem.stories.tsx

@@ -6,24 +6,24 @@
  *
  */
 
-import { Meta, StoryObj } from '@storybook/react';
-import { FavoriteButton } from '@ndla/button';
-import ResourceItem from './ResourceItem';
-import { defaultParameters } from '../../../../stories/defaults';
+import { Meta, StoryObj } from "@storybook/react";
+import { FavoriteButton } from "@ndla/button";
+import ResourceItem from "./ResourceItem";
+import { defaultParameters } from "../../../../stories/defaults";
 
 export default {
-  title: 'Components/ResourceItem',
-  tags: ['autodocs'],
+  title: "Components/ResourceItem",
+  tags: ["autodocs"],
   component: ResourceItem,
   parameters: {
     inlineStories: true,
     ...defaultParameters,
   },
   args: {
-    id: 'urn:resource:a7a49c0a-32ea-4343-8b11-bd6d65c24f87',
-    name: 'Refleksjonsoppgave om ideer og idéutvikling',
-    path: '',
-    contentType: 'subject-material',
+    id: "urn:resource:a7a49c0a-32ea-4343-8b11-bd6d65c24f87",
+    name: "Refleksjonsoppgave om ideer og idéutvikling",
+    path: "",
+    contentType: "subject-material",
     additional: false,
     heartButton: () => <FavoriteButton />,
     access: undefined,
@@ -34,8 +34,8 @@ export const Default: StoryObj<typeof ResourceItem> = {};
 
 export const WithCoreOrAdditionalIndicator: StoryObj<typeof ResourceItem> = {
   args: {
-    contentTypeName: 'Fagstoff',
-    contentTypeDescription: 'Kjernestoff',
+    contentTypeName: "Fagstoff",
+    contentTypeDescription: "Kjernestoff",
     showAdditionalResources: true,
   },
 };
@@ -43,22 +43,22 @@ export const WithCoreOrAdditionalIndicator: StoryObj<typeof ResourceItem> = {
 export const WithCoreOrAdditionalIndicatorAdditional: StoryObj<typeof ResourceItem> = {
   args: {
     additional: true,
-    contentTypeName: 'Fagstoff',
-    contentTypeDescription: 'Tilleggsstoff',
+    contentTypeName: "Fagstoff",
+    contentTypeDescription: "Tilleggsstoff",
     showAdditionalResources: true,
   },
 };
 
 export const RelevanceIndicatorWithoutLabel: StoryObj<typeof ResourceItem> = {
   args: {
-    contentTypeDescription: 'Kjernestoff',
+    contentTypeDescription: "Kjernestoff",
     showAdditionalResources: true,
   },
 };
 
 export const OnlyAvailableForTeachers: StoryObj<typeof ResourceItem> = {
   args: {
-    access: 'teacher',
+    access: "teacher",
   },
 };
 
@@ -68,36 +68,36 @@ export const CurrentPage: StoryObj<typeof ResourceItem> = {
 
 export const SubjectMaterial: StoryObj<typeof ResourceItem> = {
   args: {
-    contentType: 'subject-material',
+    contentType: "subject-material",
   },
 };
 
 export const TasksAndActivities: StoryObj<typeof ResourceItem> = {
   args: {
-    contentType: 'tasks-and-activities',
+    contentType: "tasks-and-activities",
   },
 };
 
 export const AssessmentResource: StoryObj<typeof ResourceItem> = {
   args: {
-    contentType: 'assessment-resources',
+    contentType: "assessment-resources",
   },
 };
 
 export const ExternalLearningResource: StoryObj<typeof ResourceItem> = {
   args: {
-    contentType: 'external-learning-resources',
+    contentType: "external-learning-resources",
   },
 };
 
 export const SourceMaterial: StoryObj<typeof ResourceItem> = {
   args: {
-    contentType: 'source-material',
+    contentType: "source-material",
   },
 };
 
 export const LearningPath: StoryObj<typeof ResourceItem> = {
   args: {
-    contentType: 'learning-path',
+    contentType: "learning-path",
   },
 };

package/src/ResourceGroup/ResourceItem.tsx

@@ -6,16 +6,16 @@
  *
  */
 
-import { CSSProperties, ReactNode, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { keyframes } from '@emotion/react';
-import styled from '@emotion/styled';
-import { breakpoints, colors, fonts, misc, mq, spacing } from '@ndla/core';
-import { Additional, Core, HumanMaleBoard } from '@ndla/icons/common';
-import SafeLink from '@ndla/safelink';
-import ContentTypeBadge from '../ContentTypeBadge';
-import * as contentTypes from '../model/ContentType';
-import { Resource } from '../types';
+import { CSSProperties, ReactNode, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+import { breakpoints, colors, fonts, misc, mq, spacing } from "@ndla/core";
+import { Additional, Core, HumanMaleBoard } from "@ndla/icons/common";
+import SafeLink from "@ndla/safelink";
+import ContentTypeBadge from "../ContentTypeBadge";
+import * as contentTypes from "../model/ContentType";
+import { Resource } from "../types";
 
 const listElementActiveColor = (contentType?: string) => {
   switch (contentType) {
@@ -34,7 +34,7 @@ const listElementActiveColor = (contentType?: string) => {
     default:
       break;
   }
-  return 'none';
+  return "none";
 };
 
 const fadeInAdditionalsKeyframe = keyframes`
@@ -67,7 +67,7 @@ const ListElement = styled.li`
   justify-content: space-between;
   align-items: center;
   padding: ${spacing.small};
-  &[data-additional='true'] {
+  &[data-additional="true"] {
     border-style: dashed;
     animation-duration: 0.8s;
     animation-fill-mode: forwards;
@@ -79,10 +79,10 @@ const ListElement = styled.li`
       height ease-out 0.2s,
       width ease-out 0.2s;
   }
-  &[data-active='true'] {
+  &[data-active="true"] {
     &:before {
       ${mq.range({ from: breakpoints.tablet })} {
-        content: '';
+        content: "";
         display: block;
         position: absolute;
         width: ${spacing.small};
@@ -104,12 +104,12 @@ const ResourceLink = styled(SafeLink)`
   text-decoration: underline;
   text-underline-offset: 5px;
   color: ${colors.brand.dark};
-  ${fonts.sizes('16px', '26px')};
+  ${fonts.sizes("16px", "26px")};
   ${mq.range({ from: breakpoints.tablet })} {
-    ${fonts.sizes('18px', '26px')};
+    ${fonts.sizes("18px", "26px")};
   }
   ${mq.range({ from: breakpoints.desktop })} {
-    ${fonts.sizes('20px', '26px')};
+    ${fonts.sizes("20px", "26px")};
   }
   &:hover {
     text-decoration: none;
@@ -143,7 +143,7 @@ const TypeWrapper = styled.div`
 
 const ContentTypeName = styled.span`
   font-family: ${fonts.sans};
-  ${fonts.sizes('14px', '18px')};
+  ${fonts.sizes("14px", "18px")};
   font-weight: ${fonts.weight.semibold};
   color: ${colors.text.light};
   text-align: right;
@@ -166,10 +166,10 @@ const ResourceWrapper = styled.div`
         width: 20px;
         height: 20px;
       }
-      [data-type='subject-material'],
-      [data-type='learning-path'],
-      [data-type='source-material'],
-      [data-type='external-learning-resources'] {
+      [data-type="subject-material"],
+      [data-type="learning-path"],
+      [data-type="source-material"],
+      [data-type="external-learning-resources"] {
         svg {
           width: 26px;
           height: 26px;
@@ -191,17 +191,13 @@ interface Props {
   extraBottomMargin?: boolean;
   showAdditionalResources?: boolean;
   language?: string;
-  access?: 'teacher';
+  access?: "teacher";
   heartButton?: (path: string) => ReactNode;
 }
 
 const IconWrapper = styled.div`
   display: flex;
   flex-grow: 1;
-  svg {
-    width: 26px;
-    height: 26px;
-  }
 `;
 
 const ResourceItem = ({
@@ -226,12 +222,14 @@ const ResourceItem = ({
   const hidden = additional ? !showAdditionalResources : false;
   const listElementVars = useMemo(() => {
     if (!contentType) return {};
-    return { '--contentTypeBg': listElementActiveColor(contentType) } as unknown as CSSProperties;
+    return {
+      "--contentTypeBg": listElementActiveColor(contentType),
+    } as unknown as CSSProperties;
   }, [contentType]);
 
   return (
     <ListElement
-      aria-current={active ? 'page' : undefined}
+      aria-current={active ? "page" : undefined}
       hidden={hidden && !active}
       data-active={active}
       data-additional={additional}
@@ -239,24 +237,24 @@ const ResourceItem = ({
     >
       <ResourceWrapper>
         <ContentBadgeWrapper>
-          <ContentTypeBadge type={contentType ?? ''} background border={false} />
+          <ContentTypeBadge type={contentType ?? ""} background border={false} />
         </ContentBadgeWrapper>
         <InlineContainer>
           <ResourceLink
             to={path}
-            lang={language === 'nb' ? 'no' : language}
-            aria-current={active ? 'page' : undefined}
+            lang={language === "nb" ? "no" : language}
+            aria-current={active ? "page" : undefined}
             aria-describedby={describedBy}
           >
             {name}
           </ResourceLink>
-          {active ? <CurrentSmall>{t('resource.youAreHere')}</CurrentSmall> : undefined}
+          {active ? <CurrentSmall>{t("resource.youAreHere")}</CurrentSmall> : undefined}
         </InlineContainer>
       </ResourceWrapper>
       <TypeWrapper>
         {contentTypeName && <ContentTypeName>{contentTypeName}</ContentTypeName>}
-        {access && access === 'teacher' && (
-          <IconWrapper aria-label={t('article.access.onlyTeacher')} title={t('article.access.onlyTeacher')}>
+        {access && access === "teacher" && (
+          <IconWrapper aria-label={t("article.access.onlyTeacher")} title={t("article.access.onlyTeacher")}>
             <HumanMaleBoard id={accessId} />
           </IconWrapper>
         )}
@@ -264,12 +262,12 @@ const ResourceItem = ({
           <>
             {additional && (
               <IconWrapper id={additionalId} aria-label={contentTypeDescription} title={contentTypeDescription}>
-                <Additional color={colors.brand.dark} />
+                <Additional color={colors.brand.dark} size="normal" />
               </IconWrapper>
             )}
             {!additional && (
               <IconWrapper id={coreId} aria-label={contentTypeDescription} title={contentTypeDescription}>
-                <Core color={colors.brand.primary} />
+                <Core color={colors.brand.primary} size="normal" />
               </IconWrapper>
             )}
           </>

package/src/ResourceGroup/ResourceList.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { fonts } from '@ndla/core';
-import ResourceItem from './ResourceItem';
-import NoContentBox from '../NoContentBox';
-import { Resource } from '../types';
+import { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { fonts } from "@ndla/core";
+import ResourceItem from "./ResourceItem";
+import NoContentBox from "../NoContentBox";
+import { Resource } from "../types";
 
 const StyledResourceList = styled.ul`
   list-style: none;
@@ -55,7 +55,7 @@ const ResourceList = ({
             heartButton={heartButton}
             {...resource}
             contentTypeDescription={
-              resource.additional ? t('resource.tooltipAdditionalTopic') : t('resource.tooltipCoreTopic')
+              resource.additional ? t("resource.tooltipAdditionalTopic") : t("resource.tooltipCoreTopic")
             }
           />
         ))}
@@ -63,13 +63,13 @@ const ResourceList = ({
           <li>
             <NoContentBox
               onClick={onClick}
-              buttonText={t('resource.toggleFilterLabel')}
+              buttonText={t("resource.toggleFilterLabel")}
               text={
                 title
-                  ? t('resource.noCoreResourcesAvailable', {
+                  ? t("resource.noCoreResourcesAvailable", {
                       name: title.toLowerCase(),
                     })
-                  : t('resource.noCoreResourcesAvailableUnspecific')
+                  : t("resource.noCoreResourcesAvailableUnspecific")
               }
             />
           </li>

package/src/ResourceGroup/index.ts

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

package/src/ResourcesWrapper/ResourcesTopicTitle.tsx

@@ -6,14 +6,14 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import { LearningPathQuiz } from '@ndla/icons/contentType';
-import { ModalBody, ModalHeader, ModalCloseButton, Modal, ModalTitle, ModalTrigger, ModalContent } from '@ndla/modal';
-import { Switch } from '@ndla/switch';
-import Tooltip from '@ndla/tooltip';
+import { useTranslation } from "react-i18next";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
+import { LearningPathQuiz } from "@ndla/icons/contentType";
+import { ModalBody, ModalHeader, ModalCloseButton, Modal, ModalTitle, ModalTrigger, ModalContent } from "@ndla/modal";
+import { Switch } from "@ndla/switch";
+import Tooltip from "@ndla/tooltip";
 
 interface HelpIconProps {
   invertedStyle: boolean;
@@ -86,14 +86,14 @@ const TooltipButton = styled.button`
 
 const StyledTopicTitleParagraph = styled.p`
   font-family: ${fonts.sans};
-  ${fonts.sizes('18px', '24px')};
+  ${fonts.sizes("18px", "24px")};
   font-weight: ${fonts.weight.bold};
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin: 0 ${spacing.xsmall} 0 0;
   ${mq.range({ from: breakpoints.tablet })} {
     margin-right: ${spacing.small};
-    ${fonts.sizes('20px', '26px')};
+    ${fonts.sizes("20px", "26px")};
   }
 `;
 
@@ -132,9 +132,9 @@ const invertedTopicTitleWrapperStyle = css`
 const TopicTitle = styled.h1`
   font-weight: ${fonts.weight.normal};
   margin: 0;
-  ${fonts.sizes('18px', '24px')};
+  ${fonts.sizes("18px", "24px")};
   ${mq.range({ from: breakpoints.tablet })} {
-    ${fonts.sizes('20px', '26px')};
+    ${fonts.sizes("20px", "26px")};
   }
 `;
 
@@ -194,9 +194,9 @@ const ResourcesTopicTitle = ({
           />
           <Modal>
             <TooltipWrapper>
-              <Tooltip tooltip={t('resource.dialogTooltip')}>
+              <Tooltip tooltip={t("resource.dialogTooltip")}>
                 <ModalTrigger>
-                  <TooltipButton aria-label={t('resource.dialogTooltip')}>
+                  <TooltipButton aria-label={t("resource.dialogTooltip")}>
                     <HelpIcon invertedStyle={invertedStyle} />
                   </TooltipButton>
                 </ModalTrigger>
@@ -204,13 +204,13 @@ const ResourcesTopicTitle = ({
             </TooltipWrapper>
             <ModalContent>
               <ModalHeader>
-                <ModalTitle>{t('resource.dialogHeading')}</ModalTitle>
+                <ModalTitle>{t("resource.dialogHeading")}</ModalTitle>
                 <ModalCloseButton />
               </ModalHeader>
               <ModalBody>
                 <hr />
-                <p>{t('resource.dialogText1')}</p>
-                <p>{t('resource.dialogText2')}</p>
+                <p>{t("resource.dialogText1")}</p>
+                <p>{t("resource.dialogText2")}</p>
               </ModalBody>
             </ModalContent>
           </Modal>

package/src/ResourcesWrapper/ResourcesWrapper.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import { HTMLAttributes, ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { spacing } from '@ndla/core';
+import { HTMLAttributes, ReactNode } from "react";
+import styled from "@emotion/styled";
+import { spacing } from "@ndla/core";
 
 interface Props extends HTMLAttributes<HTMLElement> {
   header?: ReactNode;

package/src/ResourcesWrapper/index.ts

@@ -6,8 +6,8 @@
  *
  */
 
-import ResourcesWrapper from './ResourcesWrapper';
+import ResourcesWrapper from "./ResourcesWrapper";
 
-export { default as ResourcesTopicTitle } from './ResourcesTopicTitle';
+export { default as ResourcesTopicTitle } from "./ResourcesTopicTitle";
 
 export default ResourcesWrapper;