@ndla/ui 50.8.0 → 50.8.2

package/src/List/OrderedList.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { forwardRef, HTMLAttributes } from 'react';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { fonts, spacing } from '@ndla/core';
+import { forwardRef, HTMLAttributes } from "react";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { fonts, spacing } from "@ndla/core";
 
 export const generateListResets = (counterName: string) => {
-  let styles = '';
+  let styles = "";
   for (let $i = 0; $i < 50; $i++) {
     styles += ` 
       &.ol-reset-${$i} { counter-reset: ${counterName} ${$i - 1}; }  
@@ -28,31 +28,31 @@ export const LetterCSS = css`
     counter-increment: level1;
 
     :before {
-      content: counter(level1, upper-alpha) '.';
+      content: counter(level1, upper-alpha) ".";
     }
-    > ol[data-type='letters'] {
+    > ol[data-type="letters"] {
       > li {
         :before {
-          content: counter(level1, lower-alpha) '.';
+          content: counter(level1, lower-alpha) ".";
         }
-        > ol[data-type='letters'] {
+        > ol[data-type="letters"] {
           padding-left: 0;
           > li {
             padding-left: ${spacing.normal};
             :before {
               left: ${spacing.small};
               position: absolute;
-              content: counter(level1, lower-roman) '.';
+              content: counter(level1, lower-roman) ".";
               transform: translateX(-100%);
             }
-            > ol[data-type='letters'] {
+            > ol[data-type="letters"] {
               padding-left: 0;
               > li {
                 padding-left: ${spacing.normal};
                 :before {
                   left: ${spacing.small};
                   position: absolute;
-                  content: counter(level1, lower-roman) '.';
+                  content: counter(level1, lower-roman) ".";
                   transform: translateX(-100%);
                 }
               }
@@ -69,35 +69,35 @@ export const NumberCSS = css`
   > li {
     counter-increment: level1;
     :before {
-      content: counter(level1, decimal) '.';
+      content: counter(level1, decimal) ".";
     }
-    > ol:not([data-type='letters']) {
+    > ol:not([data-type="letters"]) {
       counter-reset: level2;
-      ${generateListResets('level2')};
+      ${generateListResets("level2")};
       > li {
         padding-left: ${spacing.nsmall};
         counter-increment: level2;
         :before {
-          content: counter(level1, decimal) '.' counter(level2, decimal) '.';
+          content: counter(level1, decimal) "." counter(level2, decimal) ".";
         }
-        > ol:not([data-type='letters']) {
+        > ol:not([data-type="letters"]) {
           counter-reset: level3;
-          ${generateListResets('level3')};
+          ${generateListResets("level3")};
           > li {
             padding-left: ${spacing.medium};
             counter-increment: level3;
             :before {
-              content: counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.';
+              content: counter(level1, decimal) "." counter(level2, decimal) "." counter(level3, decimal) ".";
             }
-            > ol:not([data-type='letters']) {
+            > ol:not([data-type="letters"]) {
               counter-reset: level4;
-              ${generateListResets('level4')};
+              ${generateListResets("level4")};
               > li {
                 padding-left: ${spacing.large};
                 counter-increment: level4;
                 :before {
-                  content: counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.'
-                    counter(level4, decimal) '.';
+                  content: counter(level1, decimal) "." counter(level2, decimal) "." counter(level3, decimal) "."
+                    counter(level4, decimal) ".";
                 }
               }
             }
@@ -109,8 +109,8 @@ export const NumberCSS = css`
 `;
 
 const StyledOl = styled.ol`
-  ${fonts.sizes('18px', '29px')};
-  ${generateListResets('level1')};
+  ${fonts.sizes("18px", "29px")};
+  ${generateListResets("level1")};
   padding: 0;
   list-style-type: none;
   counter-reset: level1;
@@ -131,17 +131,17 @@ const StyledOl = styled.ol`
     }
   }
 
-  &:not([data-type='letters']) {
+  &:not([data-type="letters"]) {
     ${NumberCSS}
   }
 
-  &[data-type='letters'] {
+  &[data-type="letters"] {
     ${LetterCSS}
   }
 `;
 
 interface Props extends HTMLAttributes<HTMLOListElement> {
-  type?: 'letters';
+  type?: "letters";
   start?: number;
 }
 

package/src/List/UnOrderedList.tsx

@@ -6,14 +6,14 @@
  *
  */
 
-import { forwardRef, HTMLAttributes } from 'react';
-import styled from '@emotion/styled';
-import { colors, fonts, spacing } from '@ndla/core';
+import { forwardRef, HTMLAttributes } from "react";
+import styled from "@emotion/styled";
+import { colors, fonts, spacing } from "@ndla/core";
 
 const StyledUl = styled.ul`
   padding-left: ${spacing.nsmall};
   margin-left: ${spacing.normal};
-  ${fonts.sizes('18px', '29px')};
+  ${fonts.sizes("18px", "29px")};
 
   ul {
     margin-left: 0;

package/src/List/UnorderedList.stories.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import { Meta, StoryFn } from '@storybook/react';
-import UnOrderedList from './UnOrderedList';
+import { Meta, StoryFn } from "@storybook/react";
+import UnOrderedList from "./UnOrderedList";
 
 export default {
-  title: 'Base styles/UnorderedList',
-  tags: ['autodocs'],
+  title: "Base styles/UnorderedList",
+  tags: ["autodocs"],
   component: UnOrderedList,
 } as Meta<typeof UnOrderedList>;
 

package/src/List/index.ts

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

package/src/Logo/Logo.stories.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import { Meta, StoryObj } from '@storybook/react';
-import Logo from './Logo';
-import { defaultParameters } from '../../../../stories/defaults';
+import { Meta, StoryObj } from "@storybook/react";
+import Logo from "./Logo";
+import { defaultParameters } from "../../../../stories/defaults";
 
 /***
  * Logoen er vårt tydeligste kjennetegn og vårt viktigste verktøy for kommunikasjon. Den skal inspirere målgruppen elever og lærere i videregående opplæring og gjøre dem nysgjerrige på NDLA.
@@ -18,17 +18,17 @@ import { defaultParameters } from '../../../../stories/defaults';
  * Logo uten undertekst kan kompletteres med en beskrivende tekst til høyre. Logoen kan benyttes i blått, eller i svart eller hvitt avhengig av bakgrunn. Den skal plasseres i det øverste eller nederste hjørnet av en ytterkant. Logoen skal ikke sentreres.
  */
 export default {
-  title: 'Components/Logo',
+  title: "Components/Logo",
   component: Logo,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     inlineStories: true,
     ...defaultParameters,
   },
   args: {
-    cssModifier: 'large',
+    cssModifier: "large",
     name: true,
-    label: 'Nasjonal digital læringsarena',
+    label: "Nasjonal digital læringsarena",
   },
 } as Meta<typeof Logo>;
 
@@ -38,13 +38,13 @@ export const WithoutUrl: StoryObj<typeof Logo> = {
 
 export const WithUrl: StoryObj<typeof Logo> = {
   args: {
-    to: '/',
+    to: "/",
   },
 };
 
 export const EnglishLogo: StoryObj<typeof Logo> = {
   args: {
-    locale: 'en',
-    label: 'Norwegian digital learning arena',
+    locale: "en",
+    label: "Norwegian digital learning arena",
   },
 };

package/src/Logo/Logo.tsx

@@ -7,13 +7,13 @@
  */
 /* eslint-disable max-len */
 
-import BEMHelper from 'react-bem-helper';
-import SafeLink from '@ndla/safelink';
-import SvgLogo from './SvgLogo';
+import BEMHelper from "react-bem-helper";
+import SafeLink from "@ndla/safelink";
+import SvgLogo from "./SvgLogo";
 
 export const logoClasses = new BEMHelper({
-  name: 'logo',
-  prefix: 'c-',
+  name: "logo",
+  prefix: "c-",
 });
 
 interface Props {
@@ -48,7 +48,7 @@ export const Logo = ({ name = true, to, cssModifier, color, large = false, local
       <SvgLogo name={name} color={color} locale={locale} />
     </>
   );
-  return <div {...logoClasses('', modifiers)}>{logo}</div>;
+  return <div {...logoClasses("", modifiers)}>{logo}</div>;
 };
 
 export default Logo;

package/src/Logo/SvgLogo.tsx

@@ -7,10 +7,10 @@
  */
 /* eslint-disable max-len */
 
-import { logoClasses } from './Logo';
+import { logoClasses } from "./Logo";
 
 const LogoText = (locale?: string) => {
-  if (locale === 'en') {
+  if (locale === "en") {
     return (
       <path
         transform="translate(0 133)"
@@ -30,9 +30,9 @@ interface Props {
   locale?: string;
 }
 
-export const SvgLogo = ({ name = true, color = '#000000', locale }: Props) => (
+export const SvgLogo = ({ name = true, color = "#000000", locale }: Props) => (
   <svg
-    {...logoClasses('graphic')}
+    {...logoClasses("graphic")}
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 376 152"
     fill={color}

package/src/Logo/index.ts

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

package/src/Masthead/Masthead.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import { ReactNode } from 'react';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import SkipToMainContent from './SkipToMainContent';
-import { MessageBanner } from '../Messages';
+import { ReactNode } from "react";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
+import SkipToMainContent from "./SkipToMainContent";
+import { MessageBanner } from "../Messages";
 
 const MastheadContent = styled.div`
   justify-content: center;

package/src/Masthead/SkipToMainContent.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { colors } from '@ndla/core';
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { colors } from "@ndla/core";
 
 interface Props {
   skipToMainContentId: string;
@@ -46,7 +46,7 @@ const SkipToMainContent = ({ skipToMainContentId }: Props) => {
   const { t } = useTranslation();
   return (
     <StyledSkipToMainContent tabIndex={0} href={`#${skipToMainContentId}`}>
-      {t('masthead.skipToContent')}
+      {t("masthead.skipToContent")}
     </StyledSkipToMainContent>
   );
 };

package/src/Masthead/index.ts

@@ -6,10 +6,10 @@
  *
  */
 
-import Masthead from './Masthead';
+import Masthead from "./Masthead";
 
-import { default as SkipToMainContent } from './SkipToMainContent';
-import { getMastheadHeight, useMastheadHeight } from './utils';
+import { default as SkipToMainContent } from "./SkipToMainContent";
+import { getMastheadHeight, useMastheadHeight } from "./utils";
 
 export { getMastheadHeight, useMastheadHeight, SkipToMainContent };
 

package/src/Masthead/utils.ts

@@ -6,12 +6,12 @@
  *
  */
 
-import { useEffect, useState } from 'react';
-import { resizeObserver } from '@ndla/util';
+import { useEffect, useState } from "react";
+import { resizeObserver } from "@ndla/util";
 
 export const getMastheadHeight = (): number | undefined => {
-  if (typeof window !== 'undefined') {
-    const masthead = document.getElementById('masthead');
+  if (typeof window !== "undefined") {
+    const masthead = document.getElementById("masthead");
     return masthead?.getBoundingClientRect().height;
   }
 };
@@ -26,7 +26,7 @@ export const useMastheadHeight = () => {
 
   useEffect(() => {
     if (mounted) {
-      const masthead = document.getElementById('masthead');
+      const masthead = document.getElementById("masthead");
 
       const handleHeightChange = (el: HTMLElement) => {
         const newHeight = el.getBoundingClientRect().height;

package/src/MediaList/MediaList.tsx

@@ -6,21 +6,21 @@
  *
  */
 
-import { ComponentProps, ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import { Launch } from '@ndla/icons/common';
+import { ComponentProps, ReactNode } from "react";
+import styled from "@emotion/styled";
+import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
+import { Launch } from "@ndla/icons/common";
 import {
   getLicenseByAbbreviation,
   getResourceTypeNamespace,
   isCreativeCommonsLicense,
   metaTypes,
-} from '@ndla/licenses';
-import type { MetaType } from '@ndla/licenses';
-import { LicenseDescription } from '@ndla/notion';
-import SafeLink from '@ndla/safelink';
-import { Heading, Text } from '@ndla/typography';
-import { uuid } from '@ndla/util';
+} from "@ndla/licenses";
+import type { MetaType } from "@ndla/licenses";
+import { LicenseDescription } from "@ndla/notion";
+import SafeLink from "@ndla/safelink";
+import { Heading, Text } from "@ndla/typography";
+import { uuid } from "@ndla/util";
 
 const StyledMediaList = styled.ul`
   padding-left: 0;
@@ -29,7 +29,7 @@ const StyledMediaList = styled.ul`
   margin: ${spacing.normal} 0;
 `;
 
-export const MediaList = ({ children, ...rest }: ComponentProps<'ul'>) => (
+export const MediaList = ({ children, ...rest }: ComponentProps<"ul">) => (
   <StyledMediaList {...rest}>{children}</StyledMediaList>
 );
 
@@ -50,7 +50,7 @@ const StyledMediaListItem = styled.li`
   }
 `;
 
-export const MediaListItem = ({ children, ...rest }: ComponentProps<'li'>) => (
+export const MediaListItem = ({ children, ...rest }: ComponentProps<"li">) => (
   <StyledMediaListItem {...rest}>{children}</StyledMediaListItem>
 );
 
@@ -114,7 +114,7 @@ interface MediaListItemBodyProps {
   license: string;
   locale: string;
   resourceUrl?: string;
-  resourceType?: 'video' | 'image' | 'audio' | 'text' | 'h5p' | 'podcast';
+  resourceType?: "video" | "image" | "audio" | "text" | "h5p" | "podcast";
   messages?: {
     modelPremission?: string;
   };
@@ -146,24 +146,27 @@ export const MediaListItemBody = ({
   messages,
   title,
   locale,
-  resourceUrl = '', // defaults to current page
+  resourceUrl = "", // defaults to current page
   resourceType,
 }: MediaListItemBodyProps) => {
   const license = getLicenseByAbbreviation(licenseAbbreviation, locale);
   const containerProps = isCreativeCommonsLicense(license.rights)
     ? {
-        'xmlns:cc': 'https://creativecommons.org/ns#',
-        'xmlns:dct': 'http://purl.org/dc/terms/',
+        "xmlns:cc": "https://creativecommons.org/ns#",
+        "xmlns:dct": "http://purl.org/dc/terms/",
         about: resourceUrl,
       }
     : {};
 
   const metaResourceType = getResourceTypeNamespace(resourceType);
+  const hidden = {
+    display: "none",
+  };
 
   return (
     <StyledMediaListItemBody {...containerProps}>
       {/* @ts-ignore */}
-      {metaResourceType && <span rel="dct:type" href={metaResourceType} style={{ display: 'none' }} />}
+      {metaResourceType && <span rel="dct:type" href={metaResourceType} style={hidden} />}
       {title ? (
         <BodyTitle element="h3" margin="none" textStyle="meta-text-medium">
           {title}
@@ -188,11 +191,11 @@ const StyledMediaListItemActions = styled.div`
   }
 `;
 
-export const MediaListItemActions = ({ children, ...rest }: ComponentProps<'div'>) => (
+export const MediaListItemActions = ({ children, ...rest }: ComponentProps<"div">) => (
   <StyledMediaListItemActions {...rest}>{children}</StyledMediaListItemActions>
 );
 
-const isLink = (text: string) => text.startsWith('http') || text.startsWith('https');
+const isLink = (text: string) => text.startsWith("http") || text.startsWith("https");
 
 interface HandleLinkProps {
   text: string;
@@ -217,12 +220,12 @@ export type ItemType = ItemTypeWithDescription | DescriptionLessItemType;
 interface ItemTypeWithDescription {
   label: string;
   description: string;
-  metaType: Omit<MetaType, 'otherWithoutDescription'>;
+  metaType: Omit<MetaType, "otherWithoutDescription">;
 }
 
 interface DescriptionLessItemType {
   label: string;
-  metaType: 'otherWithoutDescription';
+  metaType: "otherWithoutDescription";
 }
 
 function isOtherWithoutDescription(item: ItemType): item is DescriptionLessItemType {
@@ -267,7 +270,7 @@ const StyledMediaListMetaItem = styled.li`
 
 export const MediaListItemMeta = ({ items = [] }: MediaListItemMetaProps) => {
   const attributionItems = items.filter(isAttributionItem);
-  const attributionMeta = attributionItems.map((item) => `${item.label}: ${item.description}`).join(', ');
+  const attributionMeta = attributionItems.map((item) => `${item.label}: ${item.description}`).join(", ");
 
   return (
     <StyledMediaListItemMeta property="cc:attributionName" content={attributionMeta}>

package/src/MediaList/index.ts

@@ -12,6 +12,6 @@ export {
   MediaListItemActions,
   MediaListItemImage,
   MediaListItemMeta,
-} from './MediaList';
+} from "./MediaList";
 
-export type { ItemType } from './MediaList';
+export type { ItemType } from "./MediaList";

package/src/Messages/MessageBanner.stories.tsx

@@ -6,18 +6,18 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import { Meta, StoryFn } from '@storybook/react';
-import MessageBanner from './MessageBanner';
-import { defaultParameters } from '../../../../stories/defaults';
+import { useTranslation } from "react-i18next";
+import { Meta, StoryFn } from "@storybook/react";
+import MessageBanner from "./MessageBanner";
+import { defaultParameters } from "../../../../stories/defaults";
 
 /**
  * Brukes i toppen av nettleseren når noe trenger mye oppmerksomhet globalt i systemet.
  */
 export default {
-  title: 'Patterns/MessageBanner',
+  title: "Patterns/MessageBanner",
   component: MessageBanner,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     inlineStories: true,
     ...defaultParameters,
@@ -29,5 +29,5 @@ export default {
 
 export const Default: StoryFn<typeof MessageBanner> = ({ ...args }) => {
   const { t } = useTranslation();
-  return <MessageBanner {...args}>{t('messageBoxInfo.updateBrowser')}</MessageBanner>;
+  return <MessageBanner {...args}>{t("messageBoxInfo.updateBrowser")}</MessageBanner>;
 };

package/src/Messages/MessageBanner.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { CloseButton } from '@ndla/button';
-import { colors, spacing } from '@ndla/core';
+import { ReactNode } from "react";
+import styled from "@emotion/styled";
+import { CloseButton } from "@ndla/button";
+import { colors, spacing } from "@ndla/core";
 
 interface WrapperProps {
   small?: boolean;
@@ -17,7 +17,7 @@ interface WrapperProps {
 
 const MessageBannerWrapper = styled.div<WrapperProps>`
   display: grid;
-  grid-template-areas: '. content closebutton';
+  grid-template-areas: ". content closebutton";
   grid-template-columns: minmax(30px, 1fr) minmax(0, auto) minmax(30px, 1fr);
   padding: ${({ small }) => (small ? spacing.xxsmall : spacing.small)};
   background: ${colors.support.yellowLight};