@ndla/ui 50.15.3 → 52.0.0

package/lib/locale/messages-nb.js

@@ -283,7 +283,7 @@ const messages = {
     resources: "Dette er ikke et komplett læremiddel, men ei ressurssamling som vi håper kan være nyttig for deg.",
     subjectOutdated: "Dette faget følger en utgått læreplan.",
     subjectFuture: "Dette faget følger en kommende læreplan.",
-    subjectBeta: "Dette faget er i betaversjon. Vi fyller på med ressurser fortløpende.",
+    subjectBeta: "Dette faget er under utvikling. Vi fyller på med ressurser fortløpende.",
     newVersion: "Denne læringsressursen er ikke oppdatert etter gjeldende læreplan. Du finner en oppdatert versjon her: ",
     frontPageBeta: "Kommende fag er tilpassa ny læreplan som gjelder fra neste skoleår. Vi håper likevel at læringsressursene i kommende fag kan være nyttige allerede nå.",
     frontPageExpired: "Utgåtte fag undervises det ikke i lenger, men det kan fortsatt være mulig å ta eksamen i faga som privatist."
@@ -536,7 +536,8 @@ const messages = {
       blog: "Fagblogg",
       tips: "Tips til elever",
       vacancies: "Ledige stillinger"
-    }
+    },
+    otherLanguages: "Andre språk"
   },
   contentTypes: {
     all: "Alle",
@@ -944,6 +945,10 @@ const messages = {
           private: "Når du deler ei mappe, lager du ei lenke som er åpen for alle som har lenka. Du kan endre innholdet eller avslutte delinga når du ønsker det. ",
           shared: "Nå kan du dele denne lenka med elever eller andre lærere. Hvis du gjør endringer i mappa, blir de synlige for alle du har delt lenka med."
         },
+        warning: {
+          authenticated: "Denne mappen er delt av {{ name }}, og  inneholder fagstoff, oppgaver og lenker til tekster fra både NDLA og andre nettsteder.",
+          unauthenticated: "Denne mappen er delt av {{ name }}, og  inneholder fagstoff, oppgaver og lenker til tekster fra både NDLA og andre nettsteder. Logg inn på Min NDLA for å kopiere mappen eller lagre lenken."
+        },
         button: {
           share: "Del mappe",
           shareShort: "Del",
@@ -951,7 +956,13 @@ const messages = {
           previewShort: "Forhåndsvis",
           goTo: "Gå til delt mappe",
           unShare: "Avslutt deling",
-          shareLink: "Kopier lenke"
+          shareLink: "Kopier lenke",
+          saveLink: "Lagre lenken"
+        },
+        save: {
+          warning: "Dette lager en lenke til mappen i Mine mapper. Du kan enkelt finne den igjen ved å gå til Mine mapper i menyen i Min NDLA.",
+          header: "Lagre lenke til denne mappen",
+          save: "Lagre lenke til delt mappe"
         },
         previewInformation: "Forhåndsvisning av delt mappe. Mappa blir ikke tilgjengelig for andre før du setter den som delt."
       }

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

@@ -520,6 +520,7 @@ declare const messages: {
             tips: string;
             vacancies: string;
         };
+        otherLanguages: string;
     };
     contentTypes: {
         all: string;
@@ -927,6 +928,10 @@ declare const messages: {
                     private: string;
                     shared: string;
                 };
+                warning: {
+                    authenticated: string;
+                    unauthenticated: string;
+                };
                 button: {
                     share: string;
                     shareShort: string;
@@ -935,6 +940,12 @@ declare const messages: {
                     goTo: string;
                     unShare: string;
                     shareLink: string;
+                    saveLink: string;
+                };
+                save: {
+                    warning: string;
+                    header: string;
+                    save: string;
                 };
                 previewInformation: string;
             };

package/lib/locale/messages-nn.js

@@ -283,7 +283,7 @@ const messages = {
     resources: "Dette er ikkje eit komplett læremiddel, men ei ressurssamling som vi håper kan vere nyttig for deg.",
     subjectOutdated: "Dette faget følgjer ein utgått læreplan.",
     subjectFuture: "Dette faget følgjer ein kommande læreplan.",
-    subjectBeta: "Dette faget er i betaversjon. Vi fyller på med ressursar fortløpande.",
+    subjectBeta: "Dette faget er under utvikling. Vi fyller på med ressursar fortløpande.",
     newVersion: "Denne læringsressursen er ikkje oppdatert etter gjeldande læreplan. Du finn ein oppdatert versjon her: ",
     frontPageBeta: "Kommande fag er tilpassa ny læreplan som gjeld frå neste skuleår. Vi håper likevel at læringsressursane i kommande fag kan vere nyttige allereie no.",
     frontPageExpired: "Utgåtte fag blir det ikkje undervist i lenger, men det kan framleis vere mogleg å ta eksamen i faget som privatist."
@@ -536,7 +536,8 @@ const messages = {
       blog: "Fagblogg",
       tips: "Tips til elevar",
       vacancies: "Ledige stillingar"
-    }
+    },
+    otherLanguages: "Andre språk"
   },
   contentTypes: {
     all: "Alle",
@@ -944,6 +945,10 @@ const messages = {
           private: "Når du deler ei mappe, lagar du ei lenke som er open for alle som har lenka. Du kan endre innhaldet eller avslutte delinga når du ønsker det.",
           shared: "No kan du dele denne lenka med elevar eller andre lærarar. Dersom du gjer endringar i mappa, blir dei synlege for alle du har delt lenka med."
         },
+        warning: {
+          authenticated: "Denne mappa er delt av {{ name }}, og inneheld fagstoff, oppgåver og lenker til tekster frå både NDLA og andre nettstader.",
+          unauthenticated: "Denne mappa er delt av {{ name }}, og inneheld fagstoff, oppgåver og lenker til tekster frå både NDLA og andre nettstader. Logg inn på Min NDLA for å kopiere mappa eller lagre lenka."
+        },
         button: {
           share: "Del mappe",
           shareShort: "Del",
@@ -951,7 +956,13 @@ const messages = {
           previewShort: "Førehandsvis",
           goTo: "Gå til delt mappe",
           unShare: "Avslutt deling",
-          shareLink: "Kopier lenke"
+          shareLink: "Kopier lenke",
+          saveLink: "Lagre lenka"
+        },
+        save: {
+          warning: "Dette lagar ei lenke til mappa i Mine mapper. Du kan enkelt finne ho att ved å gå til Mine mapper i menyen i Min NDLA.",
+          header: "Lagre lenke til denne mappa",
+          save: "Lagre lenke til delt mappe"
         },
         previewInformation: "Førehandsvising av delt mappe. Mappa blir ikkje tilgjengeleg for andre før du set ho som delt."
       }
@@ -1126,7 +1137,7 @@ const messages = {
       }
     },
     iconMenu: {
-      folders: "Mappar",
+      folders: "Mapper",
       tags: "Emneknaggar",
       subjects: "Favorittfag",
       profile: "Profil",

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

@@ -520,6 +520,7 @@ declare const messages: {
             tips: string;
             vacancies: string;
         };
+        otherLanguages: string;
     };
     contentTypes: {
         all: string;
@@ -927,6 +928,10 @@ declare const messages: {
                     private: string;
                     shared: string;
                 };
+                warning: {
+                    authenticated: string;
+                    unauthenticated: string;
+                };
                 button: {
                     share: string;
                     shareShort: string;
@@ -935,6 +940,12 @@ declare const messages: {
                     goTo: string;
                     unShare: string;
                     shareLink: string;
+                    saveLink: string;
+                };
+                save: {
+                    warning: string;
+                    header: string;
+                    save: string;
                 };
                 previewInformation: string;
             };

package/lib/locale/messages-se.js

@@ -536,7 +536,8 @@ const messages = {
       blog: "Fágablogga",
       tips: "Cavgileapmi ohppiide",
       vacancies: "Rabas virggit"
-    }
+    },
+    otherLanguages: "Andre språk"
   },
   contentTypes: {
     all: "Buot",
@@ -944,6 +945,10 @@ const messages = {
           private: "Når du deler ei mappe, lager du ei lenke som er åpen for alle som har lenka. Du kan endre innholdet eller avslutte delinga når du ønsker det. ",
           shared: "Nå kan du dele denne lenka med elever eller andre lærere. Hvis du gjør endringer i mappa, blir de synlige for alle du har delt lenka med."
         },
+        warning: {
+          authenticated: "Denne mappen er delt av {{ name }}, og  inneholder fagstoff, oppgaver og lenker til tekster fra både NDLA og andre nettsteder.",
+          unauthenticated: "Denne mappen er delt av {{ name }}, og  inneholder fagstoff, oppgaver og lenker til tekster fra både NDLA og andre nettsteder. Logg inn på Min NDLA for å kopiere mappen eller lagre lenken."
+        },
         button: {
           share: "Del mappe",
           shareShort: "Del",
@@ -951,7 +956,13 @@ const messages = {
           previewShort: "Forhåndsvis",
           goTo: "Gå til delt mappe",
           unShare: "Avslutt deling",
-          shareLink: "Kopier lenke"
+          shareLink: "Kopier lenke",
+          saveLink: "Lagre lenken"
+        },
+        save: {
+          warning: "Dette lager en lenke til mappen i Mine mapper. Du kan enkelt finne den igjen ved å gå til Mine mapper i menyen i Min NDLA.",
+          header: "Lagre lenke til denne mappen",
+          save: "Lagre lenke til delt mappe"
         },
         previewInformation: "Forhåndsvisning av delt mappe. Mappa blir ikke tilgjengelig for andre før du setter den som delt."
       }

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

@@ -520,6 +520,7 @@ declare const messages: {
             tips: string;
             vacancies: string;
         };
+        otherLanguages: string;
     };
     contentTypes: {
         all: string;
@@ -927,6 +928,10 @@ declare const messages: {
                     private: string;
                     shared: string;
                 };
+                warning: {
+                    authenticated: string;
+                    unauthenticated: string;
+                };
                 button: {
                     share: string;
                     shareShort: string;
@@ -935,6 +940,12 @@ declare const messages: {
                     goTo: string;
                     unShare: string;
                     shareLink: string;
+                    saveLink: string;
+                };
+                save: {
+                    warning: string;
+                    header: string;
+                    save: string;
                 };
                 previewInformation: string;
             };

package/lib/locale/messages-sma.js

@@ -283,7 +283,7 @@ const messages = {
     resources: "Dette er ikke et komplett læremiddel produsert av NDLA, men ei ressurssamling som vi håper kan være nyttig for deg.",
     subjectOutdated: "Dette faget følger en utgått læreplan.",
     subjectFuture: "Dette faget følger en kommende læreplan.",
-    subjectBeta: "Dette faget er i betaversjon. Vi fyller på med ressurser fortløpende.",
+    subjectBeta: "Dette faget er under utvikling. Vi fyller på med ressurser fortløpende.",
     newVersion: "Denne læringsressursen er ikke oppdatert etter gjeldende læreplan. Du finner en oppdatert versjon her: ",
     frontPageBeta: "Kommende fag er tilpassa ny læreplan som gjelder fra neste skoleår. Vi håper likevel at læringsressursene i kommende fag kan være nyttige allerede nå.",
     frontPageExpired: "Utgåtte fag undervises det ikke i lenger, men det kan fortsatt være mulig å ta eksamen i faga som privatist."
@@ -536,7 +536,8 @@ const messages = {
       blog: "Faageblogge",
       tips: "Tipsh learoehkidie",
       vacancies: "Gaavnoes barkoeh"
-    }
+    },
+    otherLanguages: "Andre språk"
   },
   contentTypes: {
     all: "Alle",
@@ -944,6 +945,10 @@ const messages = {
           private: "Når du deler ei mappe, lager du ei lenke som er åpen for alle som har lenka. Du kan endre innholdet eller avslutte delinga når du ønsker det. ",
           shared: "Nå kan du dele denne lenka med elever eller andre lærere. Hvis du gjør endringer i mappa, blir de synlige for alle du har delt lenka med."
         },
+        warning: {
+          authenticated: "Denne mappen er delt av {{ name }}, og  inneholder fagstoff, oppgaver og lenker til tekster fra både NDLA og andre nettsteder.",
+          unauthenticated: "Denne mappen er delt av {{ name }}, og  inneholder fagstoff, oppgaver og lenker til tekster fra både NDLA og andre nettsteder. Logg inn på Min NDLA for å kopiere mappen eller lagre lenken."
+        },
         button: {
           share: "Del mappe",
           shareShort: "Del",
@@ -951,7 +956,13 @@ const messages = {
           previewShort: "Forhåndsvis",
           goTo: "Gå til delt mappe",
           unShare: "Avslutt deling",
-          shareLink: "Kopier lenke"
+          shareLink: "Kopier lenke",
+          saveLink: "Lagre lenken"
+        },
+        save: {
+          warning: "Dette lager en lenke til mappen i Mine mapper. Du kan enkelt finne den igjen ved å gå til Mine mapper i menyen i Min NDLA.",
+          header: "Lagre lenke til denne mappen",
+          save: "Lagre lenke til delt mappe"
         },
         previewInformation: "Forhåndsvisning av delt mappe. Mappa blir ikke tilgjengelig for andre før du setter den som delt."
       }

package/lib/types.d.ts

@@ -6,15 +6,6 @@
  *
  */
 import { ReactNode } from "react";
-declare const locales: readonly ["nb", "nn", "en", "se", "sma"];
-export type Locale = (typeof locales)[number];
-export type Link = {
-    text: string;
-    to: string;
-};
-export type Messages = {
-    closeSearchLabel: string;
-};
 type ResourceTypes = {
     name: string;
 };
@@ -63,51 +54,9 @@ export interface Article {
     copyright?: Copyright;
     published: string;
 }
-export type SearchResult = {
-    title: string;
-    contentType: string;
-    resources: Array<Resource>;
-};
 export interface ContentTypeResultType {
     title?: string;
     contentType?: string;
     resources: Array<Resource>;
 }
-export type subjectProp = {
-    text: string;
-    url: string;
-    yearInfo?: string;
-    beta?: boolean;
-};
-export type category = {
-    name: string;
-    subjects: Array<subjectProp>;
-};
-export type elementRectType = {
-    fromX: number;
-    fromY: number;
-    fromScale: number;
-};
-interface GrepCode {
-    id: string;
-    title: string;
-}
-export interface CompetenceGoalsItemType extends GrepCode {
-    goals: {
-        id: string;
-        text: string;
-        url?: string;
-    }[];
-    selected?: boolean;
-    isOembed?: boolean;
-}
-export interface CoreElementsItemType extends GrepCode {
-    text?: string;
-    url?: string;
-    isOembed?: boolean;
-}
-export type NotionMedia = {
-    type: "video" | "other";
-    element: ReactNode;
-};
 export {};

package/lib/types.js

@@ -2,13 +2,4 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
-/**
- * Copyright (c) 2019-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const locales = ["nb", "nn", "en", "se", "sma"];
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "50.15.3",
+  "version": "52.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,24 +31,19 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^3.0.42",
-    "@ndla/button": "^12.0.45",
-    "@ndla/carousel": "^4.0.43",
-    "@ndla/code": "^5.0.57",
-    "@ndla/core": "^4.5.5",
-    "@ndla/dropdown-menu": "^1.0.36",
-    "@ndla/forms": "^7.1.2",
-    "@ndla/hooks": "^2.1.6",
-    "@ndla/icons": "^6.1.3",
+    "@ndla/accordion": "^4.0.0",
+    "@ndla/button": "^13.0.0",
+    "@ndla/core": "^5.0.0",
+    "@ndla/dropdown-menu": "^1.0.37",
+    "@ndla/forms": "^8.0.0",
+    "@ndla/hooks": "^2.1.7",
+    "@ndla/icons": "^6.1.4",
     "@ndla/licenses": "^7.2.6",
-    "@ndla/modal": "^5.0.42",
-    "@ndla/notion": "^6.0.43",
-    "@ndla/safelink": "^5.1.2",
-    "@ndla/select": "^3.3.17",
-    "@ndla/switch": "^1.1.42",
-    "@ndla/tabs": "^4.0.5",
-    "@ndla/tooltip": "^7.0.5",
-    "@ndla/typography": "^0.4.19",
+    "@ndla/modal": "^6.0.0",
+    "@ndla/notion": "^7.0.0",
+    "@ndla/safelink": "^5.1.3",
+    "@ndla/tooltip": "^8.0.0",
+    "@ndla/typography": "^0.4.20",
     "@ndla/util": "^4.0.4",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slider": "^1.1.2",
@@ -64,10 +59,10 @@
   "peerDependencies": {
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
-    "i18next": "^23.5.1",
+    "i18next": "^23.11.5",
     "react": ">= 16.8.0",
     "react-dom": ">= 16.8.0",
-    "react-i18next": "^13.3.0",
+    "react-i18next": "^14.1.1",
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
@@ -82,5 +77,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "18d8228e549466cbe95555b84e66960ad4c2e590"
+  "gitHead": "dab99b8c9bf77c2ee7690d348b2ae811af81bd3d"
 }

package/src/Article/Article.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { ReactNode, useEffect, useRef, useState, forwardRef } from "react";
+import { ReactNode, useEffect, useRef, useState, forwardRef, ComponentPropsWithRef } from "react";
 import BEMHelper from "react-bem-helper";
 import styled from "@emotion/styled";
 
@@ -14,7 +14,6 @@ import { spacing, mq, breakpoints } from "@ndla/core";
 import { useIntersectionObserver } from "@ndla/hooks";
 import { Heading, Text } from "@ndla/typography";
 import { resizeObserver } from "@ndla/util";
-import ArticleAccessMessage from "./ArticleAccessMessage";
 import ArticleByline from "./ArticleByline";
 import ArticleHeaderWrapper from "./ArticleHeaderWrapper";
 import ArticleNotions from "./ArticleNotions";
@@ -27,16 +26,17 @@ const classes = new BEMHelper({
   prefix: "c-",
 });
 
-type ArticleWrapperProps = {
+interface ArticleWrapperProps extends ComponentPropsWithRef<"article"> {
   modifier?: string;
-  children: ReactNode;
-};
+}
 
-export const ArticleWrapper = forwardRef<HTMLElement, ArticleWrapperProps>(({ children, modifier }, ref) => (
-  <article {...classes(undefined, modifier)} ref={ref}>
-    {children}
-  </article>
-));
+export const ArticleWrapper = forwardRef<HTMLElement, ArticleWrapperProps>(
+  ({ children, modifier, className, ...rest }, ref) => (
+    <article {...rest} {...classes(undefined, modifier, className)} ref={ref}>
+      {children}
+    </article>
+  ),
+);
 
 type ArticleTitleProps = {
   icon?: ReactNode;
@@ -115,7 +115,6 @@ type Props = {
   competenceGoals?: ReactNode;
   id: string;
   notions?: ReactNode;
-  accessMessage?: string;
   lang?: string;
 };
 
@@ -142,7 +141,6 @@ export const Article = ({
   competenceGoals,
   id,
   notions,
-  accessMessage,
   heartButton,
   contentTransformed,
   lang,
@@ -156,12 +154,12 @@ export const Article = ({
   });
   const [articlePositionRight, setArticlePositionRight] = useState(0);
 
-  const showExplainNotions = entry && entry.isIntersecting;
+  const showExplainNotions = !!entry?.isIntersecting;
 
   useEffect(() => {
-    if (wrapperRef && wrapperRef.current) {
+    if (wrapperRef?.current) {
       const handler = () => {
-        if (wrapperRef && wrapperRef.current) {
+        if (wrapperRef?.current) {
           const offset =
             wrapperRef.current.getBoundingClientRect().left + wrapperRef.current.getBoundingClientRect().width;
           setArticlePositionRight(offset);
@@ -180,10 +178,8 @@ export const Article = ({
 
   return (
     <div ref={wrapperRef}>
-      <ArticleWrapper modifier={modifier} ref={articleRef}>
+      <ArticleWrapper modifier={modifier} ref={articleRef} data-ndla-article="">
         <LayoutItem layout="center">
-          {accessMessage && <ArticleAccessMessage message={accessMessage} />}
-
           {messages.messageBox && (
             <MSGboxWrapper>
               <MessageBox links={messageBoxLinks}>{messages.messageBox}</MessageBox>

package/src/Article/ArticleHeaderWrapper.tsx

@@ -6,9 +6,8 @@
  *
  */
 
-import { ReactNode, useEffect } from "react";
+import { ReactNode } from "react";
 import BEMHelper from "react-bem-helper";
-import { isMobile } from "react-device-detect";
 
 const classes = new BEMHelper({
   name: "article",
@@ -21,16 +20,6 @@ type Props = {
 };
 
 const ArticleHeaderWrapper = ({ children, competenceGoals }: Props) => {
-  useEffect(() => {
-    if (isMobile) {
-      const heroContentList: NodeListOf<HTMLElement> = document.querySelectorAll(".c-article__header");
-      if (heroContentList.length === 1) {
-        heroContentList[0].scrollIntoView(true);
-        window.scrollBy(0, heroContentList[0].offsetTop - 120); // Adjust for header
-      }
-    }
-  }, []);
-
   return (
     <div {...classes("header")}>
       {children}

package/src/Article/ArticleNotions.tsx

@@ -9,7 +9,7 @@
 import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
-import { breakpoints, colors, fonts, mq, stackOrder } from "@ndla/core";
+import { breakpoints, colors, fonts, misc, mq, spacing, stackOrder } from "@ndla/core";
 import { Explanation, NotionFlip } from "@ndla/icons/common";
 import { ModalHeader, ModalCloseButton, ModalBody, Modal, ModalTitle, ModalTrigger, ModalContent } from "@ndla/modal";
 
@@ -22,11 +22,11 @@ const ArticleNotionsContainer = styled.div`
 `;
 
 const NotionsTrigger = styled.div`
-  padding: 0 16px;
+  padding: 0 ${spacing.nsmall};
   display: inline-flex;
   align-items: center;
   background-color: ${colors.brand.greyLighter};
-  border-radius: 4px;
+  border-radius: ${misc.borderRadius};
   cursor: pointer;
 
   ${mq.range({ from: breakpoints.tablet })} {

package/src/Article/ArticleParagraph.tsx

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import styled from "@emotion/styled";
+
+interface Props extends ComponentPropsWithoutRef<"p"> {
+  children?: ReactNode;
+}
+
+const StyledParagraph = styled.p`
+  &[data-align="center"] {
+    text-align: center;
+  }
+`;
+
+export const ArticleParagraph = (props: Props) => <StyledParagraph {...props} />;

package/src/Article/component.article.scss

@@ -91,13 +91,6 @@
   margin-top: 0;
   padding: 0;
   padding-left: $spacing--medium;
-  figure.c-figure.u-float-full {
-    left: 0 !important;
-    right: 0 !important;
-    padding-left: 0;
-    padding-right: 0;
-    max-width: 100%;
-  }
 }
 
 .c-article__header {

package/src/Article/index.ts

@@ -12,4 +12,6 @@ import ArticleFootNotes from "./ArticleFootNotes";
 import ArticleHeaderWrapper from "./ArticleHeaderWrapper";
 
 export { ArticleByline, ArticleFootNotes, ArticleHeaderWrapper, ArticleTitle, ArticleIntroduction, ArticleWrapper };
+export { ArticleParagraph } from "./ArticleParagraph";
+
 export default Article;

package/src/AudioPlayer/AudioPlayer.tsx

@@ -120,7 +120,7 @@ const TextVersionHeading = styled(Heading)`
 const LinkButton = styled(ButtonV2)`
   box-shadow: none;
   padding-left: 0;
-  padding-right: 4px;
+  padding-right: ${spacing.xxsmall};
   min-height: ${spacing.medium};
   flex: 0 0 auto;
   &:hover,
@@ -200,7 +200,7 @@ const AudioPlayer = ({ src, title, subtitle, speech, description, img, textVersi
         <TextWrapper data-has-image={!!img}>
           <TitleWrapper>
             <div>
-              {subtitle && subtitle.url ? <SafeLink to={subtitle.url}>{subtitle.title}</SafeLink> : subtitle?.title}
+              {subtitle?.url ? <SafeLink to={subtitle.url}>{subtitle.title}</SafeLink> : subtitle?.title}
               <Title element="h3" headingStyle="h4" margin="none" data-has-desc={!!description}>
                 {title}
               </Title>

package/src/AudioPlayer/Controls.tsx

@@ -12,7 +12,7 @@ import styled from "@emotion/styled";
 import { Root as PopoverRoot, PopoverContent, PopoverTrigger, PopoverPortal } from "@radix-ui/react-popover";
 import { Root as SliderRoot, Track, Range, SliderThumb } from "@radix-ui/react-slider";
 import { ButtonV2, IconButtonV2 } from "@ndla/button";
-import { breakpoints, colors, fonts, mq, spacing, stackOrder } from "@ndla/core";
+import { breakpoints, colors, fonts, misc, mq, spacing, stackOrder } from "@ndla/core";
 import { DropdownMenu, DropdownContent, DropdownItem, DropdownTrigger } from "@ndla/dropdown-menu";
 import { Back15, Forward15 } from "@ndla/icons/action";
 import { Play, Pause, VolumeUp } from "@ndla/icons/common";
@@ -82,11 +82,11 @@ const SpeedValueButton = styled(ButtonV2)`
 
 const SpeedSelectedMark = styled.span`
   align-self: flex-start;
-  border-radius: 50%;
+  border-radius: ${misc.borderRadiusLarge};
   background: #d1372e;
   width: 6px;
   height: 6px;
-  margin: 6px 0 0 2px;
+  margin: ${spacing.xsmall} 0 0 2px;
 `;
 
 const Time = styled.div`
@@ -132,7 +132,7 @@ const StyledThumb = styled(SliderThumb)`
   width: 20px;
   height: 20px;
   background: #5cbc80;
-  border-radius: 50%;
+  border-radius: ${misc.borderRadiusLarge};
   outline: none;
 `;
 
@@ -188,7 +188,7 @@ const VolumeSliderHandle = styled(SliderThumb)`
   width: 20px;
   height: 20px;
   background: ${colors.brand.primary};
-  border-radius: 50%;
+  border-radius: ${misc.borderRadiusLarge};
 `;
 
 const formatTime = (seconds: number) => {