@ndla/ui 50.8.0 → 50.8.2

package/src/ContentTypeBadge/ContentTypeBadge.stories.tsx

@@ -6,24 +6,24 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { Meta, StoryFn, StoryObj } from '@storybook/react';
-import { spacing } from '@ndla/core';
-import { ContentTypeBadge } from './ContentTypeBadge';
-import { defaultParameters } from '../../../../stories/defaults';
-import * as contentTypes from '../model/ContentType';
+import styled from "@emotion/styled";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { spacing } from "@ndla/core";
+import { ContentTypeBadge } from "./ContentTypeBadge";
+import { defaultParameters } from "../../../../stories/defaults";
+import * as contentTypes from "../model/ContentType";
 
 export default {
-  title: 'Components/ContentTypeBadge',
-  tags: ['autodocs'],
+  title: "Components/ContentTypeBadge",
+  tags: ["autodocs"],
   parameters: {
     inlineStories: true,
     ...defaultParameters,
   },
   args: {
-    size: 'small',
+    size: "small",
     border: true,
-    type: 'subject-material',
+    type: "subject-material",
     background: true,
     title: "I'm a badge",
   },

package/src/ContentTypeBadge/ContentTypeBadge.tsx

@@ -6,12 +6,13 @@
  *
  */
 
-import { CSSProperties, ComponentProps, useMemo } from 'react';
+import { CSSProperties, ComponentProps, useMemo } from "react";
 
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { breakpoints, colors, mq } from '@ndla/core';
-import { MenuBook } from '@ndla/icons/action';
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { breakpoints, colors, mq } from "@ndla/core";
+import { MenuBook } from "@ndla/icons/action";
+import { Audio } from "@ndla/icons/common";
 import {
   SubjectMaterial,
   TasksAndActivities,
@@ -21,14 +22,14 @@ import {
   SharedResource,
   LearningPath,
   MultidisciplinaryTopic,
-} from '@ndla/icons/contentType';
+} from "@ndla/icons/contentType";
 
-import { Concept, ImageNormal, SquareAudio, SquareVideo } from '@ndla/icons/editor';
+import { Concept, Media, Video } from "@ndla/icons/editor";
 
-import * as contentTypes from '../model/ContentType';
+import * as contentTypes from "../model/ContentType";
 
-interface Props extends ComponentProps<'div'> {
-  size?: 'xx-small' | 'x-small' | 'small' | 'large';
+interface Props extends ComponentProps<"div"> {
+  size?: "xx-small" | "x-small" | "small" | "large";
   type: string;
   title?: string;
   background?: boolean;
@@ -37,7 +38,7 @@ interface Props extends ComponentProps<'div'> {
 }
 
 const sizes = {
-  'xx-small': css`
+  "xx-small": css`
     width: 20px;
     height: 20px;
     border: 1px solid;
@@ -46,7 +47,7 @@ const sizes = {
       height: 10x;
     }
   `,
-  'x-small': css`
+  "x-small": css`
     width: 20px;
     height: 20px;
     border: 1px solid;
@@ -63,7 +64,7 @@ const sizes = {
       }
     }
   `,
-  small: '',
+  small: "",
   large: css`
     width: 50px;
     height: 50px;
@@ -136,20 +137,20 @@ const iconMap = {
   },
   [contentTypes.MULTIDISCIPLINARY_TOPIC]: {
     icon: MultidisciplinaryTopic,
-    backgroundColor: '#b9b37b',
+    backgroundColor: "#b9b37b",
   },
   [contentTypes.resourceEmbedTypeMapping.image]: {
-    icon: ImageNormal,
+    icon: Media,
     iconColor: colors.brand.grey,
     backgroundColor: colors.brand.greyLight,
   },
   [contentTypes.resourceEmbedTypeMapping.audio]: {
-    icon: SquareAudio,
+    icon: Audio,
     iconColor: colors.brand.grey,
     backgroundColor: colors.brand.greyLight,
   },
   [contentTypes.resourceEmbedTypeMapping.video]: {
-    icon: SquareVideo,
+    icon: Video,
     iconColor: colors.brand.grey,
     backgroundColor: colors.brand.greyLight,
   },
@@ -164,14 +165,17 @@ export const ContentTypeBadge = ({
   type,
   background,
   title,
-  size = 'small',
+  size = "small",
   border = true,
   className,
   ...rest
 }: Props) => {
   const { Icon, style } = useMemo(() => {
     const fromMap = iconMap[type];
-    const style = { '--icon-color': fromMap.iconColor, '--background-color': fromMap.backgroundColor } as CSSProperties;
+    const style = {
+      "--icon-color": fromMap.iconColor,
+      "--background-color": fromMap.backgroundColor,
+    } as CSSProperties;
     return { Icon: fromMap.icon, style };
   }, [type]);
 
@@ -202,27 +206,27 @@ export const ContentTypeBadge = ({
   );
 };
 
-export const SubjectMaterialBadge = (props: Omit<Props, 'type'>) => (
+export const SubjectMaterialBadge = (props: Omit<Props, "type">) => (
   <ContentTypeBadge {...props} type={contentTypes.SUBJECT_MATERIAL} />
 );
-export const TasksAndActivitiesBadge = (props: Omit<Props, 'type'>) => (
+export const TasksAndActivitiesBadge = (props: Omit<Props, "type">) => (
   <ContentTypeBadge {...props} type={contentTypes.TASKS_AND_ACTIVITIES} />
 );
-export const AssessmentResourcesBadge = (props: Omit<Props, 'type'>) => (
+export const AssessmentResourcesBadge = (props: Omit<Props, "type">) => (
   <ContentTypeBadge {...props} type={contentTypes.ASSESSMENT_RESOURCES} />
 );
-export const SubjectBadge = (props: Omit<Props, 'type'>) => <ContentTypeBadge {...props} type={contentTypes.SUBJECT} />;
-export const ExternalLearningResourcesBadge = (props: Omit<Props, 'type'>) => (
+export const SubjectBadge = (props: Omit<Props, "type">) => <ContentTypeBadge {...props} type={contentTypes.SUBJECT} />;
+export const ExternalLearningResourcesBadge = (props: Omit<Props, "type">) => (
   <ContentTypeBadge {...props} type={contentTypes.EXTERNAL_LEARNING_RESOURCES} />
 );
-export const SourceMaterialBadge = (props: Omit<Props, 'type'>) => (
+export const SourceMaterialBadge = (props: Omit<Props, "type">) => (
   <ContentTypeBadge {...props} type={contentTypes.SOURCE_MATERIAL} />
 );
 
-export const LearningPathBadge = (props: Omit<Props, 'type'>) => (
+export const LearningPathBadge = (props: Omit<Props, "type">) => (
   <ContentTypeBadge {...props} type={contentTypes.LEARNING_PATH} />
 );
 
-export const MultidisciplinaryTopicBadge = (props: Omit<Props, 'type'>) => (
+export const MultidisciplinaryTopicBadge = (props: Omit<Props, "type">) => (
   <ContentTypeBadge {...props} type={contentTypes.MULTIDISCIPLINARY_TOPIC} />
 );

package/src/ContentTypeBadge/index.ts

@@ -6,7 +6,7 @@
  *
  */
 
-import { ContentTypeBadge } from './ContentTypeBadge';
+import { ContentTypeBadge } from "./ContentTypeBadge";
 
 export {
   SubjectMaterialBadge,
@@ -16,6 +16,6 @@ export {
   ExternalLearningResourcesBadge,
   SourceMaterialBadge,
   LearningPathBadge,
-} from './ContentTypeBadge';
+} from "./ContentTypeBadge";
 
 export default ContentTypeBadge;

package/src/CopyParagraphButton/CopyParagraphButton.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { colors } from '@ndla/core';
-import { Link } from '@ndla/icons/common';
-import Tooltip from '@ndla/tooltip';
-import { copyTextToClipboard } from '@ndla/util';
+import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { colors } from "@ndla/core";
+import { Link } from "@ndla/icons/common";
+import Tooltip from "@ndla/tooltip";
+import { copyTextToClipboard } from "@ndla/util";
 
 const ContainerDiv = styled.div`
   position: relative;
@@ -49,7 +49,7 @@ interface Props {
 const CopyParagraphButton = ({ children, copyText, lang }: Props) => {
   const [hasCopied, setHasCopied] = useState(false);
   const { t } = useTranslation();
-  const sanitizedTitle = useMemo(() => encodeURIComponent(copyText.replace(/ /g, '-')), [copyText]);
+  const sanitizedTitle = useMemo(() => encodeURIComponent(copyText.replace(/ /g, "-")), [copyText]);
 
   useEffect(() => {
     if (hasCopied) {
@@ -61,13 +61,13 @@ const CopyParagraphButton = ({ children, copyText, lang }: Props) => {
     setHasCopied(true);
     const { location } = window;
     const newHash = `#${sanitizedTitle}`;
-    const port = location.port ? `:${location.port}` : '';
+    const port = location.port ? `:${location.port}` : "";
     const urlToCopy = `${location.protocol}//${location.hostname}${port}${location.pathname}${location.search}${newHash}`;
 
     copyTextToClipboard(urlToCopy);
   }, [sanitizedTitle]);
 
-  const tooltip = hasCopied ? t('article.copyPageLinkCopied') : t('article.copyHeaderLink');
+  const tooltip = hasCopied ? t("article.copyPageLinkCopied") : t("article.copyHeaderLink");
   return (
     <ContainerDiv>
       <Tooltip tooltip={tooltip}>

package/src/CopyParagraphButton/index.tsx

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

package/src/CreatedBy/CreatedBy.stories.tsx

@@ -6,24 +6,24 @@
  *
  */
 
-import { Meta, StoryObj } from '@storybook/react';
-import CreatedBy from './CreatedBy';
-import { defaultParameters } from '../../../../stories/defaults';
+import { Meta, StoryObj } from "@storybook/react";
+import CreatedBy from "./CreatedBy";
+import { defaultParameters } from "../../../../stories/defaults";
 
 /***
  * LTI-versjoner av innhold fra NDLA skal vise denne teksten og logo i bunnen. "NDLA" og logoen lenker til ndla.no. "Artikkel" kan være en lenke til artikkelen på ndla.no om den fins. Begge lenker åpner som standard i ny fane men det kan overstyres med target-parameter.
  */
 export default {
-  title: 'Components/CreatedBy',
+  title: "Components/CreatedBy",
   component: CreatedBy,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     inlineStories: true,
     ...defaultParameters,
   },
   args: {
-    name: 'Artikkelen',
-    description: 'er utarbeidet av',
+    name: "Artikkelen",
+    description: "er utarbeidet av",
   },
 } as Meta<typeof CreatedBy>;
 
@@ -33,6 +33,6 @@ export const WithoutLink: StoryObj<typeof CreatedBy> = {
 
 export const WithLink: StoryObj<typeof CreatedBy> = {
   args: {
-    url: 'https://ndla.no/subject:26/topic:1:191103/topic:1:4352/resource:1:2052',
+    url: "https://ndla.no/subject:26/topic:1:191103/topic:1:4352/resource:1:2052",
   },
 };

package/src/CreatedBy/CreatedBy.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { colors, fonts } from '@ndla/core';
-import SafeLink from '@ndla/safelink';
-import Logo from '../Logo';
+import styled from "@emotion/styled";
+import { colors, fonts } from "@ndla/core";
+import SafeLink from "@ndla/safelink";
+import Logo from "../Logo";
 
 const Container = styled.div`
   display: flex;
@@ -25,7 +25,7 @@ const Text = styled.div`
   color: ${colors.text.light};
   margin-right: 38px;
   font-family: ${fonts.sans};
-  ${fonts.sizes('20px', '20px')};
+  ${fonts.sizes("20px", "20px")};
 `;
 
 const StyledSafeLink = styled(SafeLink)`
@@ -39,7 +39,7 @@ type Props = {
   target?: string;
 };
 
-const CreatedBy = ({ name, description, url, target = '_blank' }: Props) => (
+const CreatedBy = ({ name, description, url, target = "_blank" }: Props) => (
   <Container>
     <Wrapper>
       <Text>

package/src/CreatedBy/index.ts

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

package/src/DefinitionList/DefinitionDescription.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { forwardRef, HTMLAttributes } from 'react';
-import styled from '@emotion/styled';
-import { fonts } from '@ndla/core';
+import { forwardRef, HTMLAttributes } from "react";
+import styled from "@emotion/styled";
+import { fonts } from "@ndla/core";
 
 const StyledDD = styled.dd`
   font-weight: ${fonts.weight.normal};
-  ${fonts.sizes('18px', '29px')};
+  ${fonts.sizes("18px", "29px")};
 `;
 
 const DefinitionDescription = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(({ children, ...rest }, ref) => {

package/src/DefinitionList/DefinitionTerm.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { forwardRef, HTMLAttributes } from 'react';
-import styled from '@emotion/styled';
-import { fonts } from '@ndla/core';
+import { forwardRef, HTMLAttributes } from "react";
+import styled from "@emotion/styled";
+import { fonts } from "@ndla/core";
 
 const StyledDT = styled.dt`
   font-weight: ${fonts.weight.bold};
-  ${fonts.sizes('18px', '29px')};
+  ${fonts.sizes("18px", "29px")};
 `;
 
 const DefinitionTerm = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(({ children, ...rest }, ref) => {

package/src/DefinitionList/index.tsx

@@ -6,5 +6,5 @@
  *
  */
 
-export { default as DefinitionDescription } from './DefinitionDescription';
-export { default as DefinitionTerm } from './DefinitionTerm';
+export { default as DefinitionDescription } from "./DefinitionDescription";
+export { default as DefinitionTerm } from "./DefinitionTerm";