@ndla/ui 44.0.23 → 45.0.0

package/lib/locale/messages-en.d.ts

@@ -1307,6 +1307,7 @@ declare const messages: {
         showLess: string;
     };
     files: string;
+    fileTypesNotSupported: string;
     download: string;
     expandButton: string;
 };

package/lib/locale/messages-en.js

@@ -307,7 +307,7 @@ var messages = _objectSpread(_objectSpread({
     },
     socialMedia: {
       heading: 'Follow us',
-      description: 'NDLA has several facebook- and twitter accounts. Find the one that suits you, and follow us!',
+      description: 'NDLA has several Facebook- and X-accounts. Find the one that suits you, and follow us!',
       mainLink: {
         name: 'Follow us'
       }
@@ -1017,6 +1017,7 @@ var messages = _objectSpread(_objectSpread({
     showLess: 'Show less'
   },
   files: 'Files',
+  fileTypesNotSupported: 'Filetype(s) not supported: {{fileTypes}}',
   download: 'Download file: ',
   expandButton: 'Show large version'
 }, _licenses.contributorTypes.en), {}, {
@@ -1175,7 +1176,7 @@ var messages = _objectSpread(_objectSpread({
       loginTextLink: 'privacy policy here',
       loginTerms: 'Log in with Feide to receive access. By logging on your accept your terms of service',
       loginResourcePitch: 'Do you want to favorite this resource?',
-      loginWelcome: 'Welcome to My NDLA! This page allows you to organize your articles in your <i>own</i> way!',
+      loginWelcome: 'Welcome to My NDLA! This page allows you to organize your articles in your own way!',
       deleteAccount: 'Delete My NDLA',
       welcome: 'Welcome to my NDLA! You can now save your favourite resources from NDLA and organise them in folders with tags',
       read: {

package/lib/locale/messages-nb.d.ts

@@ -1307,6 +1307,7 @@ declare const messages: {
         showLess: string;
     };
     files: string;
+    fileTypesNotSupported: string;
     download: string;
     expandButton: string;
 };

package/lib/locale/messages-nb.js

@@ -305,7 +305,7 @@ var messages = _objectSpread(_objectSpread({
     },
     socialMedia: {
       heading: 'Følg oss',
-      description: 'NDLA har mange Facebook- og Twitter-kontoer. Finn den som passer for deg, og følg oss!',
+      description: 'NDLA har mange Facebook- og X-kontoer. Finn den som passer for deg, og følg oss!!',
       mainLink: {
         name: 'Følg oss'
       }
@@ -1015,6 +1015,7 @@ var messages = _objectSpread(_objectSpread({
     showLess: 'Vis mindre'
   },
   files: 'Filer',
+  fileTypesNotSupported: 'Filtypen(e) støttes ikke: {{fileTypes}}',
   download: 'Last ned fil: ',
   expandButton: 'Vis stor versjon'
 }, _licenses.contributorTypes.nb), {}, {
@@ -1174,7 +1175,7 @@ var messages = _objectSpread(_objectSpread({
       loginTextLink: 'personvernerklæring her',
       loginTerms: 'Logg på med Feide for å få tilgang. Ved å logge på godkjenner du våre vilkår for bruk',
       loginResourcePitch: 'Ønsker du å favorittmerke denne ressursen?',
-      loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på <i>din</i> måte!',
+      loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på din måte!',
       welcome: 'Velkommen til Min NDLA! Nå kan du lagre favorittressursene dine fra NDLA og organisere dem i mapper og med emneknagger.',
       read: {
         read: 'Les',

package/lib/locale/messages-nn.d.ts

@@ -1307,6 +1307,7 @@ declare const messages: {
     };
     source: string;
     files: string;
+    fileTypesNotSupported: string;
     download: string;
     expandButton: string;
 };

package/lib/locale/messages-nn.js

@@ -305,7 +305,7 @@ var messages = _objectSpread(_objectSpread({
     },
     socialMedia: {
       heading: 'Følg oss',
-      description: 'NDLA har mange Facebook- og Twitter-kontoar. Finn den som passar for deg, og følg oss!',
+      description: 'NDLA har mange Facebook- og X-kontoar. Finn den som passar for deg, og følg oss',
       mainLink: {
         name: 'Følg oss'
       }
@@ -1015,6 +1015,7 @@ var messages = _objectSpread(_objectSpread({
   },
   source: 'Kjelde',
   files: 'Filer',
+  fileTypesNotSupported: 'Filtypen(e) støttast ikkje: {{fileTypes}}',
   download: 'Last ned fil: ',
   expandButton: 'Vis stor versjon'
 }, _licenses.contributorTypes.nn), {}, {
@@ -1174,7 +1175,7 @@ var messages = _objectSpread(_objectSpread({
       loginTextLink: 'personvernerklæring her',
       loginTerms: 'Logg på med Feide for å få tilgang. Ved å logge på godkjennar du våre vilkår for bruk',
       loginResourcePitch: 'Ønsker du å favorittmerke denne resursen?',
-      loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på <i>din</i> måte!',
+      loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på din måte!',
       welcome: 'Velkommen til Min NDLA! No kan du lagre favorittressursane dine frå NDLA og organisere dei i mapper og med emneknaggar.',
       read: {
         read: 'Les',

package/lib/locale/messages-se.d.ts

@@ -1307,6 +1307,7 @@ declare const messages: {
         showLess: string;
     };
     files: string;
+    fileTypesNotSupported: string;
     download: string;
     expandButton: string;
 };

package/lib/locale/messages-se.js

@@ -305,7 +305,7 @@ var messages = _objectSpread(_objectSpread({
     },
     socialMedia: {
       heading: 'Čuovo min',
-      description: 'NDLAs leat máŋga Facebook- ja Twitter-konttu. Gávnna dan mii dutnje heive ja čuovo min!',
+      description: 'NDLAs leat máŋga Facebook- ja X-konttu. Gávnna dan mii dutnje heive ja čuovo min!',
       mainLink: {
         name: 'Čuovo min'
       }
@@ -1015,6 +1015,7 @@ var messages = _objectSpread(_objectSpread({
     showLess: 'Čájet unnit'
   },
   files: 'Fiillat',
+  fileTypesNotSupported: 'Filtypen(e) støttast ikkje: {{fileTypes}}',
   download: 'Viečča fiilla: ',
   expandButton: 'Čájet stuora veršuvnna'
 }, _licenses.contributorTypes.se), {}, {

package/lib/locale/messages-sma.d.ts

@@ -1307,6 +1307,7 @@ declare const messages: {
         showLess: string;
     };
     files: string;
+    fileTypesNotSupported: string;
     download: string;
     expandButton: string;
 };

package/lib/locale/messages-sma.js

@@ -305,7 +305,7 @@ var messages = _objectSpread(_objectSpread({
     },
     socialMedia: {
       heading: 'Fulkh mijjem',
-      description: 'NDLA gellie Facebook- jïh Twitterkontoeh åtna. Gaavnh dam mij dutnjien sjeahta jïh fulkh mijjem!',
+      description: 'NDLA gellie Facebook- jïh X-kontoeh åtna. Gaavnh dam mij dutnjien sjeahta jïh fulkh mijjem!',
       mainLink: {
         name: 'Fulkh mijjem'
       }
@@ -1015,6 +1015,7 @@ var messages = _objectSpread(_objectSpread({
     showLess: 'Vis mindre'
   },
   files: 'Filer',
+  fileTypesNotSupported: 'Filtypen(e) støttast ikkje: {{fileTypes}}',
   download: 'Veedtjh fijlem: ',
   expandButton: 'Vuesehth stoerre versjovnem'
 }, _licenses.contributorTypes.nb), {}, {
@@ -1174,7 +1175,7 @@ var messages = _objectSpread(_objectSpread({
       loginTextLink: 'personvernerklæring her',
       loginTerms: 'Logg på med Feide for å få tilgang. Ved å logge på godkjenner du våre vilkår for bruk',
       loginResourcePitch: 'Ønsker du å favorittmerke denne ressursen?',
-      loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på <i>din</i> måte!',
+      loginWelcome: 'Velkommen til NDLA! Her kan du organisere fagstoffet på din måte!',
       welcome: 'Velkommen til Min NDLA! Nå kan du lagre favorittressursene dine fra NDLA og organisere dem i mapper og med emneknagger.',
       read: {
         read: 'Les',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "44.0.23",
+  "version": "45.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,24 +31,24 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^2.2.21",
-    "@ndla/article-scripts": "^3.0.20",
-    "@ndla/button": "^11.0.6",
-    "@ndla/carousel": "^3.1.15",
-    "@ndla/core": "^4.1.6",
-    "@ndla/dropdown-menu": "^1.0.4",
-    "@ndla/forms": "^4.3.21",
-    "@ndla/hooks": "^2.0.9",
-    "@ndla/icons": "^4.0.5",
+    "@ndla/accordion": "^2.2.22",
+    "@ndla/article-scripts": "^3.0.21",
+    "@ndla/button": "^11.0.7",
+    "@ndla/carousel": "^4.0.0",
+    "@ndla/core": "^4.1.7",
+    "@ndla/dropdown-menu": "^1.0.5",
+    "@ndla/forms": "^4.3.22",
+    "@ndla/hooks": "^2.1.0",
+    "@ndla/icons": "^4.0.6",
     "@ndla/licenses": "^7.1.3",
-    "@ndla/modal": "^4.0.5",
-    "@ndla/notion": "^5.0.21",
-    "@ndla/safelink": "^4.1.20",
-    "@ndla/select": "^2.4.11",
-    "@ndla/switch": "^1.1.11",
-    "@ndla/tabs": "^3.0.7",
-    "@ndla/tooltip": "^4.1.17",
-    "@ndla/util": "^3.1.15",
+    "@ndla/modal": "^4.0.6",
+    "@ndla/notion": "^5.0.22",
+    "@ndla/safelink": "^4.1.21",
+    "@ndla/select": "^2.4.12",
+    "@ndla/switch": "^1.1.12",
+    "@ndla/tabs": "^3.0.8",
+    "@ndla/tooltip": "^4.1.18",
+    "@ndla/util": "^3.2.0",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-slider": "^1.1.2",
     "date-fns": "^2.30.0",
@@ -73,7 +73,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.11.0",
     "@ndla/types-backend": "^0.2.5",
-    "@ndla/types-embed": "^3.0.0",
+    "@ndla/types-embed": "^4.0.0",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
     "sass-loader": "^13.2.2",
@@ -83,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e9eaf3ce093a0efab62dfae03ccf4643137f30be"
+  "gitHead": "5acc97933b03a599d9ad83a4e3a6d305b573f83c"
 }

package/src/Aside/component.aside.scss

@@ -84,8 +84,7 @@
 }
 
 .c-aside__content > ol:not([class]),
-.c-aside__content :not(li) > ol:not([class]),
-.c-aside__content .ol-list--roman {
+.c-aside__content :not(li) > ol:not([class]) {
   @include mq(desktop) {
     margin-left: $spacing--large;
   }

package/src/AudioPlayer/Controls.tsx

@@ -149,6 +149,7 @@ const VolumeList = styled(PopoverContent)`
   padding: ${spacing.small};
   border: 1px solid ${colors.brand.lighter};
   height: 128px;
+  z-index: 2;
 `;
 
 const VolumeSliderWrapper = styled(SliderRoot)`

package/src/CampaignBlock/CampaignBlock.stories.tsx

@@ -20,7 +20,7 @@ export default {
   args: {},
 } as Meta<typeof CampaignBlock>;
 
-export const BothImages: StoryObj<typeof CampaignBlock> = {
+export const ImageLeft: StoryObj<typeof CampaignBlock> = {
   args: {
     title: { title: 'NDLA film', language: 'nb-no' },
     description: {
@@ -32,18 +32,14 @@ export const BothImages: StoryObj<typeof CampaignBlock> = {
       url: '#',
       text: 'Gå til NDLA film',
     },
-    imageBefore: {
+    image: {
       alt: '',
       src: 'https://api.test.ndla.no/image-api/raw/n2UYRxEG.png',
     },
-    imageAfter: {
-      alt: '',
-      src: 'https://api.test.ndla.no/image-api/raw/8GOxOhjr.png',
-    },
   },
 };
 
-export const SingleImage: StoryObj<typeof CampaignBlock> = {
+export const ImageRight: StoryObj<typeof CampaignBlock> = {
   args: {
     title: { title: 'FN-dagen 24. oktober!', language: 'nb-no' },
     description: {
@@ -54,9 +50,10 @@ export const SingleImage: StoryObj<typeof CampaignBlock> = {
       url: '#',
       text: 'Les mer om FN-dagen',
     },
-    imageAfter: {
+    image: {
       alt: 'FN-symbol',
       src: 'https://api.test.ndla.no/image-api/raw/LkmDGtip.png',
     },
+    imageSide: 'right',
   },
 };

package/src/CampaignBlock/CampaignBlock.tsx

@@ -33,8 +33,8 @@ interface Props {
     url: string;
     text: string;
   };
-  imageBefore?: Image;
-  imageAfter?: Image;
+  image?: Image;
+  imageSide?: 'left' | 'right';
   className?: string;
   path?: string;
 }
@@ -43,14 +43,20 @@ const Container = styled.div`
   max-width: 390px;
   display: flex;
   flex-direction: column;
-  gap: ${spacing.xsmall};
+  gap: ${spacing.normal};
   border: 1px ${colors.brand.lighter} solid;
   border-radius: ${misc.borderRadius};
-  padding: ${spacing.normal} ${spacing.small};
+  padding: ${spacing.normal};
   background-color: ${colors.white};
+  &[data-image-side='right'] {
+    flex-direction: column-reverse;
+  }
   ${mq.range({ from: breakpoints.tabletWide })} {
     max-width: 1100px;
     flex-direction: row;
+    &[data-image-side='right'] {
+      flex-direction: row-reverse;
+    }
   }
 `;
 
@@ -69,17 +75,10 @@ const StyledImg = styled.img`
 `;
 
 const StyledLink = styled(SafeLink)`
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: ${spacing.xxsmall};
-  box-shadow: none;
-  text-decoration: underline;
-  font-weight: ${fonts.weight.semibold};
   color: ${colors.brand.primary};
-  &:hover,
-  &:focus-visible {
-    text-decoration: none;
-  }
 `;
 
 const TextWrapper = styled.div`
@@ -88,18 +87,18 @@ const TextWrapper = styled.div`
 
 const CampaignBlock = ({
   title,
-  imageBefore,
+  image,
+  imageSide = 'left',
   description,
   headingLevel: Heading = 'h2',
-  imageAfter,
   url,
   path,
   className,
 }: Props) => {
   const href = usePossiblyRelativeUrl(url.url, path);
   return (
-    <Container className={className} data-type="campaign-block">
-      {imageBefore && <StyledImg src={imageBefore.src} height={200} width={240} alt="" />}
+    <Container className={className} data-type="campaign-block" data-image-side={imageSide}>
+      {image && <StyledImg src={image.src} height={200} width={240} alt="" />}
       <TextWrapper>
         <Heading css={headingStyle}>{title.title}</Heading>
         <StyledDescription>{description.text}</StyledDescription>
@@ -108,7 +107,6 @@ const CampaignBlock = ({
           <Forward />
         </StyledLink>
       </TextWrapper>
-      {imageAfter && <StyledImg src={imageAfter.src} height={200} width={240} alt="" />}
     </Container>
   );
 };

package/src/CompetenceGoalTab/CompetenceItem.tsx

@@ -39,7 +39,6 @@ const GoalList = styled.ul`
   margin: 0;
   padding: 0;
   list-style-type: none;
-  list-style-image: none;
 `;
 
 export type CompetenceTypeProps = 'competenceGoals' | 'coreElement';

package/src/Embed/ImageEmbed.tsx

@@ -77,24 +77,25 @@ const getSizes = (size?: string, align?: string) => {
 };
 
 export const getFocalPoint = (data: ImageEmbedData) => {
-  if (typeof data.focalX === 'number' && typeof data.focalY === 'number') {
-    return { x: data.focalX, y: data.focalY };
+  const focalX = parseFloat(data.focalX ?? '');
+  const focalY = parseFloat(data.focalY ?? '');
+  if (!!focalX && !!focalY) {
+    return { x: focalX, y: focalY };
   }
   return undefined;
 };
 
 export const getCrop = (data: ImageEmbedData) => {
-  if (
-    typeof data.lowerRightX === 'number' &&
-    typeof data.lowerRightY === 'number' &&
-    typeof data.upperLeftX === 'number' &&
-    typeof data.upperLeftY === 'number'
-  ) {
+  const lowerRightX = parseFloat(data.lowerRightX ?? '');
+  const lowerRightY = parseFloat(data.lowerRightY ?? '');
+  const upperLeftX = parseFloat(data.upperLeftX ?? '');
+  const upperLeftY = parseFloat(data.upperLeftY ?? '');
+  if (!!lowerRightX && !!lowerRightY && !!upperLeftX && !!upperLeftY) {
     return {
-      startX: data.lowerRightX,
-      startY: data.lowerRightY,
-      endX: data.upperLeftX,
-      endY: data.upperLeftY,
+      startX: lowerRightX,
+      startY: lowerRightY,
+      endX: upperLeftX,
+      endY: upperLeftY,
     };
   }
   return undefined;

package/src/ErrorMessage/ErrorMessage.tsx

@@ -69,7 +69,7 @@ export const ErrorMessage = ({ children, messages, illustration, illustrationEle
     {messages.description && <Description>{messages.description}</Description>}
     {customElement && <CustomElementWrapper>{customElement}</CustomElementWrapper>}
     {messages.linksTitle && <h2>{messages.linksTitle}</h2>}
-    {messages.back && typeof window !== 'undefined' && window.history.length > 1 && (
+    {messages.back && (
       <SafeLink to={`/#${encodeURI(messages.back)}`} onClick={() => window.history.back()}>
         {messages.back}
       </SafeLink>

package/src/FactBox/component.factbox.scss

@@ -41,8 +41,7 @@ $padding-bottom: 17px;
     }
 
     & > ol:not([class]),
-    :not(li) > ol:not([class]),
-    .ol-list--roman {
+    :not(li) > ol:not([class]) {
       @include mq(desktop) {
         margin-left: $spacing--large;
       }

package/src/Layout/PageContainer.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
 
 const classes = new BEMHelper({
@@ -14,7 +14,7 @@ const classes = new BEMHelper({
   prefix: 'o-',
 });
 
-interface Props {
+interface Props extends HTMLAttributes<HTMLDivElement> {
   children?: ReactNode;
   background?: boolean;
   backgroundWide?: boolean;
@@ -28,6 +28,11 @@ export const PageContainer = ({
   backgroundWide = false,
   ndlaFilm = false,
   learningPath = false,
-}: Props) => <div {...classes('', { background, backgroundWide, ndlaFilm, learningPath })}>{children}</div>;
+  ...rest
+}: Props) => (
+  <div {...classes('', { background, backgroundWide, ndlaFilm, learningPath })} {...rest}>
+    {children}
+  </div>
+);
 
 export default PageContainer;

package/src/LicenseByline/EmbedByline.tsx

@@ -76,7 +76,7 @@ const BylineWrapper = styled.div`
   ${fonts.sizes('18px', '24px')};
   background-color: ${colors.brand.lightest};
   padding: ${spacing.nsmall} ${spacing.normal};
-  border: 1px solid ${colors.brand.tertiary};
+  border: 1px solid ${colors.brand.light};
   border-top: none;
 
   &[data-top-rounded='true'] {
@@ -94,7 +94,7 @@ const BylineWrapper = styled.div`
     background-color: ${colors.support.redLightest};
   }
   &[data-first='true'] {
-    border-top: 1px solid ${colors.brand.tertiary};
+    border-top: 1px solid ${colors.brand.light};
   }
 `;
 
@@ -113,7 +113,7 @@ const RightsWrapper = styled.div`
     ${mobileStyling}
   }
 
-  ${mq.range({ until: breakpoints.tablet })} {
+  ${mq.range({ until: breakpoints.tabletWide })} {
     ${mobileStyling}
   }
 `;

package/src/List/OrderedList.tsx

@@ -64,6 +64,7 @@ const StyledOl = styled.ol`
   }
 
   > li {
+    min-height: ${spacing.normal};
     counter-increment: level1;
     &:before {
       position: absolute;

package/src/List/UnOrderedList.tsx

@@ -9,7 +9,6 @@
 import styled from '@emotion/styled';
 import { colors, fonts, spacing } from '@ndla/core';
 import { forwardRef, HTMLAttributes } from 'react';
-import { generateListResets } from './OrderedList';
 
 const StyledUl = styled.ul`
   padding-left: ${spacing.nsmall} !important;
@@ -18,9 +17,7 @@ const StyledUl = styled.ul`
   ${fonts.sizes('18px', '29px')};
 
   ul {
-    list-style-image: none;
     padding-left: ${spacing.nsmall};
-
     margin-left: 0 !important;
   }
 

package/src/NDLAFilm/AllMoviesAlphabetically.tsx

@@ -130,6 +130,8 @@ const AllMoviesAlphabetically = ({ movies }: Props) => {
             <MovieItem key={movie.id}>
               <StyledSafeLink to={movie.path}>
                 <MovieImage
+                  alt=""
+                  loading="lazy"
                   src={
                     movie?.metaImage?.url ? `${movie.metaImage?.url}?${makeSrcQueryString(IMAGE_WIDTH * 2)}` : undefined
                   }