@ndla/ui 50.8.0 → 50.8.2

package/src/ProgrammeCard/ProgrammeCard.stories.tsx

@@ -6,29 +6,29 @@
  *
  */
 
-import { Meta, StoryFn } from '@storybook/react';
-import ProgrammeCard from './ProgrammeCard';
-import { defaultParameters } from '../../../../stories/defaults';
+import { Meta, StoryFn } from "@storybook/react";
+import ProgrammeCard from "./ProgrammeCard";
+import { defaultParameters } from "../../../../stories/defaults";
 
 export default {
-  title: 'Components/ProgrammeCard',
+  title: "Components/ProgrammeCard",
   component: ProgrammeCard,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     ...defaultParameters,
   },
   args: {
-    id: 'test ID',
-    title: { title: 'Elektro og datateknologi', language: 'nb' },
+    id: "test ID",
+    title: { title: "Elektro og datateknologi", language: "nb" },
     desktopImage: {
-      src: 'https://api.test.ndla.no/image-api/raw/ajvkVKKR.svg?width=600&ts=1682591987993',
-      alt: '',
+      src: "https://api.test.ndla.no/image-api/raw/ajvkVKKR.svg?width=600&ts=1682591987993",
+      alt: "",
     },
     mobileImage: {
-      src: 'https://api.test.ndla.no/image-api/raw/YIAprLg9.svg?width=600&ts=1682592022017',
-      alt: '',
+      src: "https://api.test.ndla.no/image-api/raw/YIAprLg9.svg?width=600&ts=1682592022017",
+      alt: "",
     },
-    url: '#',
+    url: "#",
   },
 } as Meta<typeof ProgrammeCard>;
 
@@ -36,4 +36,4 @@ export const ProgrammeCardStory: StoryFn<typeof ProgrammeCard> = ({ ...args }) =
   return <ProgrammeCard {...args} />;
 };
 
-ProgrammeCardStory.storyName = 'ProgrammeCard';
+ProgrammeCardStory.storyName = "ProgrammeCard";

package/src/ProgrammeCard/ProgrammeCard.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { spacing, colors, misc, breakpoints, mq, fonts } from '@ndla/core';
-import SafeLink from '@ndla/safelink';
+import styled from "@emotion/styled";
+import { spacing, colors, misc, breakpoints, mq, fonts } from "@ndla/core";
+import SafeLink from "@ndla/safelink";
 
 interface Image {
   src: string;
@@ -58,10 +58,10 @@ const StyledTitle = styled.span`
 
   font-weight: ${fonts.weight.semibold};
   color: ${colors.text.primary};
-  ${fonts.sizes('16px', '24px')};
+  ${fonts.sizes("16px", "24px")};
 
   ${mq.range({ from: breakpoints.tablet })} {
-    ${fonts.sizes('16px', '18px')};
+    ${fonts.sizes("16px", "18px")};
   }
 `;
 

package/src/ProgrammeCard/index.tsx

@@ -6,5 +6,5 @@
  *
  */
 
-export { default as ProgrammeCard } from './ProgrammeCard';
-export type { Programme as ProgrammeV2 } from './ProgrammeCard';
+export { default as ProgrammeCard } from "./ProgrammeCard";
+export type { Programme as ProgrammeV2 } from "./ProgrammeCard";

package/src/RelatedArticleList/RelatedArticleList.tsx

@@ -6,15 +6,15 @@
  *
  */
 
-import { CSSProperties, Children, ComponentProps, ReactNode, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { ButtonV2 } from '@ndla/button';
-import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import SafeLink from '@ndla/safelink';
-import { Heading, HeadingLevel, Text } from '@ndla/typography';
-import ContentTypeBadge from '../ContentTypeBadge';
-import { contentTypes } from '../model/ContentType';
+import { CSSProperties, Children, ComponentProps, ReactNode, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { ButtonV2 } from "@ndla/button";
+import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
+import SafeLink from "@ndla/safelink";
+import { Heading, HeadingLevel, Text } from "@ndla/typography";
+import ContentTypeBadge from "../ContentTypeBadge";
+import { contentTypes } from "../model/ContentType";
 
 interface RelatedArticleProps {
   title: string;
@@ -68,16 +68,16 @@ export const RelatedArticle = ({
   title,
   introduction,
   to,
-  linkInfo = '',
-  target = '',
+  linkInfo = "",
+  target = "",
   type = contentTypes.SUBJECT_MATERIAL,
 }: RelatedArticleProps) => {
   return (
-    <StyledRelatedArticle style={{ '--border-color': colorMap[type] } as CSSProperties}>
+    <StyledRelatedArticle style={{ "--border-color": colorMap[type] } as CSSProperties}>
       <TitleWrapper>
         <ContentTypeBadge type={type} background size="small" />
         <LinkText element="span" textStyle="meta-text-medium" margin="none">
-          <SafeLink to={to} target={target} rel={linkInfo ? 'noopener noreferrer' : undefined}>
+          <SafeLink to={to} target={target} rel={linkInfo ? "noopener noreferrer" : undefined}>
             {title}
           </SafeLink>
         </LinkText>
@@ -108,7 +108,7 @@ const ArticlesWrapper = styled.div`
   }
 `;
 
-interface Props extends ComponentProps<'section'> {
+interface Props extends ComponentProps<"section"> {
   children?: JSX.Element[];
   articleCount?: number;
   headingLevel?: HeadingLevel;
@@ -125,7 +125,7 @@ const StyledSection = styled.section`
 export const RelatedArticleList = ({
   children = [],
   articleCount,
-  headingLevel = 'h3',
+  headingLevel = "h3",
   headingButtons,
   ...rest
 }: Props) => {
@@ -141,14 +141,14 @@ export const RelatedArticleList = ({
     <StyledSection {...rest}>
       <HeadingWrapper>
         <Heading element={headingLevel} margin="none" headingStyle="list-title">
-          {t('related.title')}
+          {t("related.title")}
         </Heading>
         {headingButtons}
       </HeadingWrapper>
       <ArticlesWrapper>{childrenToShow}</ArticlesWrapper>
       {childCount > 2 ? (
         <ButtonV2 onClick={() => setExpanded((p) => !p)} variant="outline">
-          {t(`related.show${expanded ? 'Less' : 'More'}`)}
+          {t(`related.show${expanded ? "Less" : "More"}`)}
         </ButtonV2>
       ) : null}
     </StyledSection>

package/src/RelatedArticleList/index.ts

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

package/src/Resource/BlockResource.stories.tsx

@@ -6,17 +6,17 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { Meta, StoryFn, StoryObj } from '@storybook/react';
-import { spacing } from '@ndla/core';
-import BlockResource from './BlockResource';
-import { StoryResourceMenu, resourceTypesArr } from './storyComponents';
-import { defaultParameters } from '../../../../stories/defaults';
+import styled from "@emotion/styled";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { spacing } from "@ndla/core";
+import BlockResource from "./BlockResource";
+import { StoryResourceMenu, resourceTypesArr } from "./storyComponents";
+import { defaultParameters } from "../../../../stories/defaults";
 
 export default {
-  title: 'My NDLA/BlockResource',
+  title: "My NDLA/BlockResource",
   component: BlockResource,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     ...defaultParameters,
   },
@@ -32,16 +32,16 @@ export default {
     },
   },
   args: {
-    id: '1234',
-    link: '',
-    title: 'Tittel til ressurs',
-    description: 'Dette er for eksempel en fagbeskrivelse! Dersom den er for lang vil den bli forkortet',
+    id: "1234",
+    link: "",
+    title: "Tittel til ressurs",
+    description: "Dette er for eksempel en fagbeskrivelse! Dersom den er for lang vil den bli forkortet",
     resourceImage: {
-      src: 'https://cdn.pixabay.com/photo/2022/06/12/22/35/village-7258991_1280.jpg',
-      alt: '',
+      src: "https://cdn.pixabay.com/photo/2022/06/12/22/35/village-7258991_1280.jpg",
+      alt: "",
     },
-    resourceTypes: [{ id: 'urn:resourcetype:learningPath', name: 'Læringssti' }],
-    tags: ['tag', 'tag', 'tag', 'tag'],
+    resourceTypes: [{ id: "urn:resourcetype:learningPath", name: "Læringssti" }],
+    tags: ["tag", "tag", "tag", "tag"],
   },
 } as Meta<typeof BlockResource>;
 
@@ -50,7 +50,7 @@ export const WithImage: StoryFn<typeof BlockResource> = (args) => {
 };
 
 export const WithoutImage: StoryObj<typeof BlockResource> = {
-  args: { resourceImage: { src: '', alt: '' } },
+  args: { resourceImage: { src: "", alt: "" } },
 };
 
 export const WithoutTags: StoryObj<typeof BlockResource> = {
@@ -60,7 +60,7 @@ export const WithoutTags: StoryObj<typeof BlockResource> = {
 export const WithOverflowingDescription: StoryObj<typeof BlockResource> = {
   args: {
     description:
-      'Beskrivelser trenger ikke å være så veldig lange. Det er ganske vanskelig å få plass til en livshistorie. Det lærte jeg da jeg var ung',
+      "Beskrivelser trenger ikke å være så veldig lange. Det er ganske vanskelig å få plass til en livshistorie. Det lærte jeg da jeg var ung",
   },
 };
 
@@ -83,7 +83,7 @@ const BlockWrapper = styled.div`
 `;
 
 export const BlockView: StoryObj<typeof BlockResource> = {
-  args: { resourceImage: { src: '', alt: '' } },
+  args: { resourceImage: { src: "", alt: "" } },
   render: ({ ...args }) => (
     <BlockWrapper>
       {resourceTypesArr.map((rt) => (

package/src/Resource/BlockResource.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { colors, spacing } from '@ndla/core';
-import { Text } from '@ndla/typography';
+import { ReactNode } from "react";
+import styled from "@emotion/styled";
+import { colors, spacing } from "@ndla/core";
+import { Text } from "@ndla/typography";
 import {
   CompressedTagList,
   ResourceImageProps,
@@ -18,11 +18,11 @@ import {
   LoaderProps,
   ContentIconWrapper,
   resourceHeadingStyle,
-} from './resourceComponents';
-import ContentLoader from '../ContentLoader';
-import ContentTypeBadge from '../ContentTypeBadge';
-import Image from '../Image';
-import { contentTypeMapping, resourceEmbedTypeMapping } from '../model/ContentType';
+} from "./resourceComponents";
+import ContentLoader from "../ContentLoader";
+import ContentTypeBadge from "../ContentTypeBadge";
+import Image from "../Image";
+import { contentTypeMapping, resourceEmbedTypeMapping } from "../model/ContentType";
 
 const BlockElementWrapper = styled.div`
   display: flex;
@@ -108,12 +108,12 @@ interface BlockImageProps {
 const BlockImage = ({ image, loading, contentType }: BlockImageProps) => {
   if (loading) {
     return (
-      <ContentLoader height={'100%'} width={'100%'} viewBox={null} preserveAspectRatio="none">
+      <ContentLoader height={"100%"} width={"100%"} viewBox={null} preserveAspectRatio="none">
         <rect x="0" y="0" rx="3" ry="3" width="100%" height="100%" />
       </ContentLoader>
     );
   }
-  if (image.src === '') {
+  if (image.src === "") {
     return (
       <ContentIconWrapper contentType={contentType}>
         <ContentTypeBadge type={contentType} size="large" />
@@ -127,7 +127,7 @@ const BlockImage = ({ image, loading, contentType }: BlockImageProps) => {
 const ResourceTypeAndTitleLoader = ({ children, loading }: LoaderProps) => {
   if (loading) {
     return (
-      <ContentLoader height={'18px'} width={'100%'} viewBox={null} preserveAspectRatio="none">
+      <ContentLoader height={"18px"} width={"100%"} viewBox={null} preserveAspectRatio="none">
         <rect x="0" y="0" rx="3" ry="3" width="20%" height="18px" />
         <rect x="25%" y="0" rx="3" ry="3" width="20%" height="18px" />
       </ContentLoader>
@@ -164,7 +164,7 @@ const BlockResource = ({
   targetBlank,
   resourceTypes,
 }: Props) => {
-  const firstResourceType = resourceTypes?.[0]?.id ?? '';
+  const firstResourceType = resourceTypes?.[0]?.id ?? "";
 
   return (
     <BlockElementWrapper id={id}>
@@ -175,14 +175,14 @@ const BlockResource = ({
           contentType={
             contentTypeMapping[firstResourceType] ??
             resourceEmbedTypeMapping[firstResourceType] ??
-            contentTypeMapping['default']
+            contentTypeMapping["default"]
           }
         />
       </ImageWrapper>
       <BlockInfoWrapper>
         <ContentWrapper>
           <ResourceTypeAndTitleLoader loading={isLoading}>
-            <ResourceTitleLink data-link="" title={title} target={targetBlank ? '_blank' : undefined} to={link}>
+            <ResourceTitleLink data-link="" title={title} target={targetBlank ? "_blank" : undefined} to={link}>
               <Text element="span" textStyle="label-small" css={resourceHeadingStyle}>
                 {title}
               </Text>

package/src/Resource/ListResource.stories.tsx

@@ -6,17 +6,17 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { Meta, StoryFn, StoryObj } from '@storybook/react';
-import ListResource from './ListResource';
-import { StoryResourceMenu, resourceTypesArr } from './storyComponents';
-import { defaultParameters } from '../../../../stories/defaults';
-import { spacing } from '../../../core/src';
+import styled from "@emotion/styled";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import ListResource from "./ListResource";
+import { StoryResourceMenu, resourceTypesArr } from "./storyComponents";
+import { defaultParameters } from "../../../../stories/defaults";
+import { spacing } from "../../../core/src";
 
 export default {
-  title: 'My NDLA/ListResource',
+  title: "My NDLA/ListResource",
   component: ListResource,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     ...defaultParameters,
   },
@@ -32,15 +32,15 @@ export default {
     },
   },
   args: {
-    id: '1234',
-    link: '',
-    title: 'Tittel til ressurs',
+    id: "1234",
+    link: "",
+    title: "Tittel til ressurs",
     resourceImage: {
-      src: 'https://cdn.pixabay.com/photo/2022/06/12/22/35/village-7258991_1280.jpg',
-      alt: '',
+      src: "https://cdn.pixabay.com/photo/2022/06/12/22/35/village-7258991_1280.jpg",
+      alt: "",
     },
-    resourceTypes: [{ id: 'urn:resourcetype:learningPath', name: 'Læringssti' }],
-    tags: ['tag', 'tag', 'tag', 'tag'],
+    resourceTypes: [{ id: "urn:resourcetype:learningPath", name: "Læringssti" }],
+    tags: ["tag", "tag", "tag", "tag"],
   },
 } as Meta<typeof ListResource>;
 
@@ -50,7 +50,7 @@ export const WithImage: StoryFn<typeof ListResource> = (args) => {
 
 export const WithoutImage: StoryObj<typeof ListResource> = {
   args: {
-    resourceImage: { src: '', alt: '' },
+    resourceImage: { src: "", alt: "" },
   },
 };
 
@@ -61,7 +61,7 @@ export const WithoutTags: StoryObj<typeof ListResource> = {
 export const WithOverflowingDescription: StoryObj<typeof ListResource> = {
   args: {
     description:
-      'Beskrivelser trenger ikke å være så veldig lange. Det er ganske vanskelig å få plass til en livshistorie. Det lærte jeg da jeg var en ung utvikler og utviklet denne komponenten. Jeg husker det nærmest som om det var i går, men det var det egentlig ikke. Det var i det gode år 2022',
+      "Beskrivelser trenger ikke å være så veldig lange. Det er ganske vanskelig å få plass til en livshistorie. Det lærte jeg da jeg var en ung utvikler og utviklet denne komponenten. Jeg husker det nærmest som om det var i går, men det var det egentlig ikke. Det var i det gode år 2022",
   },
 };
 
@@ -84,7 +84,7 @@ const Wrapper = styled.div`
 `;
 
 export const BlockView: StoryObj<typeof ListResource> = {
-  args: { resourceImage: { src: '', alt: '' } },
+  args: { resourceImage: { src: "", alt: "" } },
   render: ({ ...args }) => (
     <Wrapper>
       {resourceTypesArr.map((rt) => (

package/src/Resource/ListResource.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { spacing, colors, breakpoints, mq } from '@ndla/core';
-import { Text } from '@ndla/typography';
+import { ReactNode } from "react";
+import styled from "@emotion/styled";
+import { spacing, colors, breakpoints, mq } from "@ndla/core";
+import { Text } from "@ndla/typography";
 import {
   CompressedTagList,
   ResourceImageProps,
@@ -18,11 +18,11 @@ import {
   ResourceTypeList,
   LoaderProps,
   ContentIconWrapper,
-} from './resourceComponents';
-import ContentLoader from '../ContentLoader';
-import ContentTypeBadge from '../ContentTypeBadge';
-import Image from '../Image';
-import { contentTypeMapping, resourceEmbedTypeMapping } from '../model/ContentType';
+} from "./resourceComponents";
+import ContentLoader from "../ContentLoader";
+import ContentTypeBadge from "../ContentTypeBadge";
+import Image from "../Image";
+import { contentTypeMapping, resourceEmbedTypeMapping } from "../model/ContentType";
 
 const ListResourceWrapper = styled.div`
   flex: 1;
@@ -30,14 +30,14 @@ const ListResourceWrapper = styled.div`
   position: relative;
   grid-template-columns: auto minmax(50px, 1fr) auto;
   grid-template-areas:
-    'image  topicAndTitle   tags'
-    'image  description     description';
+    "image  topicAndTitle   tags"
+    "image  description     description";
   ${mq.range({ until: breakpoints.mobileWide })} {
     grid-template-columns: auto 1fr;
     grid-template-areas:
-      'image                topicAndTitle'
-      'description          description'
-      'tags                 tags';
+      "image                topicAndTitle"
+      "description          description"
+      "tags                 tags";
   }
 
   cursor: pointer;
@@ -55,7 +55,7 @@ const ListResourceWrapper = styled.div`
 `;
 
 interface StyledImageProps {
-  imageSize: 'normal' | 'compact';
+  imageSize: "normal" | "compact";
 }
 
 const ImageWrapper = styled.div<StyledImageProps>`
@@ -68,7 +68,7 @@ const ImageWrapper = styled.div<StyledImageProps>`
   align-items: center;
   justify-content: center;
   aspect-ratio: 4/3;
-  &[data-image-size='normal'] {
+  &[data-image-size="normal"] {
     width: 136px;
   }
   ${mq.range({ until: breakpoints.mobileWide })} {
@@ -129,14 +129,14 @@ const TopicAndTitleWrapper = styled.div`
 interface ListResourceImageProps {
   resourceImage: ResourceImageProps;
   loading?: boolean;
-  type: 'normal' | 'compact';
+  type: "normal" | "compact";
   contentType: string;
   background?: boolean;
 }
 
 const ListResourceImage = ({ resourceImage, loading, type, contentType, background }: ListResourceImageProps) => {
   if (!loading) {
-    if (resourceImage.src === '') {
+    if (resourceImage.src === "") {
       return (
         <ContentIconWrapper contentType={contentType}>
           <ContentTypeBadge type={contentType} background={background} size="x-small" />
@@ -144,20 +144,20 @@ const ListResourceImage = ({ resourceImage, loading, type, contentType, backgrou
       );
     } else {
       return (
-        <StyledImage alt={resourceImage.alt} src={resourceImage.src} fallbackWidth={type === 'compact' ? 56 : 136} />
+        <StyledImage alt={resourceImage.alt} src={resourceImage.src} fallbackWidth={type === "compact" ? 56 : 136} />
       );
     }
   }
 
   return (
-    <ContentLoader height={'100%'} width={'100%'} viewBox={null} preserveAspectRatio="none">
+    <ContentLoader height={"100%"} width={"100%"} viewBox={null} preserveAspectRatio="none">
       <rect
         x="0"
         y="0"
         rx="3"
         ry="3"
-        width={type === 'compact' ? '56' : '136'}
-        height={type === 'compact' ? '40' : '96'}
+        width={type === "compact" ? "56" : "136"}
+        height={type === "compact" ? "40" : "96"}
       />
     </ContentLoader>
   );
@@ -166,10 +166,10 @@ const ListResourceImage = ({ resourceImage, loading, type, contentType, backgrou
 const TypeAndTitleLoader = ({ loading, children }: LoaderProps) => {
   if (loading) {
     return (
-      <ContentLoader height={'40px'} width={'100%'} viewBox={null} preserveAspectRatio="none">
-        <rect x="0" y="0" rx="3" ry="3" width={'100%'} height={'16'} />
-        <rect x="0" y="18" rx="3" ry="3" width={'70'} height={'16'} />
-        <rect x="80" y="18" rx="3" ry="3" width={'70'} height={'16'} />
+      <ContentLoader height={"40px"} width={"100%"} viewBox={null} preserveAspectRatio="none">
+        <rect x="0" y="0" rx="3" ry="3" width={"100%"} height={"16"} />
+        <rect x="0" y="18" rx="3" ry="3" width={"70"} height={"16"} />
+        <rect x="80" y="18" rx="3" ry="3" width={"70"} height={"16"} />
       </ContentLoader>
     );
   }
@@ -184,7 +184,7 @@ interface ResourceDescriptionProps {
 const Description = ({ description, loading }: ResourceDescriptionProps) => {
   if (loading) {
     return (
-      <ContentLoader height={'20px'} width={'100%'} viewBox={null} preserveAspectRatio="none">
+      <ContentLoader height={"20px"} width={"100%"} viewBox={null} preserveAspectRatio="none">
         <rect x="0" y="0" width="100%" height="20" />
       </ContentLoader>
     );
@@ -224,8 +224,8 @@ const ListResource = ({
   targetBlank,
 }: ListResourceProps) => {
   const showDescription = description !== undefined;
-  const imageType = showDescription ? 'normal' : 'compact';
-  const firstContentType = resourceTypes?.[0]?.id ?? '';
+  const imageType = showDescription ? "normal" : "compact";
+  const firstContentType = resourceTypes?.[0]?.id ?? "";
   const embedResourceType = resourceEmbedTypeMapping[firstContentType];
 
   return (
@@ -236,12 +236,12 @@ const ListResource = ({
           loading={isLoading}
           type={imageType}
           background={!!embedResourceType}
-          contentType={contentTypeMapping[firstContentType] ?? embedResourceType ?? contentTypeMapping['default']}
+          contentType={contentTypeMapping[firstContentType] ?? embedResourceType ?? contentTypeMapping["default"]}
         />
       </ImageWrapper>
       <TopicAndTitleWrapper>
         <TypeAndTitleLoader loading={isLoading}>
-          <StyledLink to={link} data-link="" target={targetBlank ? '_blank' : undefined}>
+          <StyledLink to={link} data-link="" target={targetBlank ? "_blank" : undefined}>
             <Text element="span" textStyle="label-small" css={resourceHeadingStyle} title={title}>
               {title}
             </Text>

package/src/Resource/index.ts

@@ -6,7 +6,7 @@
  *
  */
 
-import { ListResourceProps } from './ListResource';
+import { ListResourceProps } from "./ListResource";
 export type { ListResourceProps };
-export { default as ListResource } from './ListResource';
-export { default as BlockResource } from './BlockResource';
+export { default as ListResource } from "./ListResource";
+export { default as BlockResource } from "./BlockResource";