@ndla/ui 56.0.73-alpha.0 → 56.0.75-alpha.0

package/lib/index.js

@@ -63,12 +63,6 @@ Object.defineProperty(exports, "ArticleWrapper", {
     return _Article.ArticleWrapper;
   }
 });
-Object.defineProperty(exports, "AssessmentResourcesBadge", {
-  enumerable: true,
-  get: function () {
-    return _ContentTypeBadge.AssessmentResourcesBadge;
-  }
-});
 Object.defineProperty(exports, "AudioEmbed", {
   enumerable: true,
   get: function () {
@@ -123,12 +117,6 @@ Object.defineProperty(exports, "Concept", {
     return _Concept.Concept;
   }
 });
-Object.defineProperty(exports, "ConceptBadge", {
-  enumerable: true,
-  get: function () {
-    return _ContentTypeBadge.ConceptBadge;
-  }
-});
 Object.defineProperty(exports, "ConceptEmbed", {
   enumerable: true,
   get: function () {
@@ -153,22 +141,10 @@ Object.defineProperty(exports, "ContentLinkEmbed", {
     return _Embed.ContentLinkEmbed;
   }
 });
-Object.defineProperty(exports, "ContentLoader", {
-  enumerable: true,
-  get: function () {
-    return _ContentLoader.default;
-  }
-});
 Object.defineProperty(exports, "ContentTypeBadge", {
   enumerable: true,
   get: function () {
-    return _ContentTypeBadge.default;
-  }
-});
-Object.defineProperty(exports, "ContentTypeBadgeNew", {
-  enumerable: true,
-  get: function () {
-    return _ContentTypeBadgeNew.ContentTypeBadge;
+    return _ContentTypeBadge.ContentTypeBadge;
   }
 });
 Object.defineProperty(exports, "ContentTypeBlockQuote", {
@@ -339,12 +315,6 @@ Object.defineProperty(exports, "KeyFigure", {
     return _KeyFigure.KeyFigure;
   }
 });
-Object.defineProperty(exports, "LearningPathBadge", {
-  enumerable: true,
-  get: function () {
-    return _ContentTypeBadge.LearningPathBadge;
-  }
-});
 Object.defineProperty(exports, "LicenseLink", {
   enumerable: true,
   get: function () {
@@ -399,24 +369,6 @@ Object.defineProperty(exports, "ResourceBox", {
     return _ResourceBox.ResourceBox;
   }
 });
-Object.defineProperty(exports, "SourceMaterialBadge", {
-  enumerable: true,
-  get: function () {
-    return _ContentTypeBadge.SourceMaterialBadge;
-  }
-});
-Object.defineProperty(exports, "SubjectBadge", {
-  enumerable: true,
-  get: function () {
-    return _ContentTypeBadge.SubjectBadge;
-  }
-});
-Object.defineProperty(exports, "SubjectMaterialBadge", {
-  enumerable: true,
-  get: function () {
-    return _ContentTypeBadge.SubjectMaterialBadge;
-  }
-});
 Object.defineProperty(exports, "TagSelectorClearTrigger", {
   enumerable: true,
   get: function () {
@@ -465,12 +417,6 @@ Object.defineProperty(exports, "TagSelectorTrigger", {
     return _TagSelector.TagSelectorTrigger;
   }
 });
-Object.defineProperty(exports, "TasksAndActivitiesBadge", {
-  enumerable: true,
-  get: function () {
-    return _ContentTypeBadge.TasksAndActivitiesBadge;
-  }
-});
 Object.defineProperty(exports, "UnknownEmbed", {
   enumerable: true,
   get: function () {
@@ -510,7 +456,7 @@ Object.defineProperty(exports, "contactBlockBackgrounds", {
 Object.defineProperty(exports, "contentTypeToBadgeVariantMap", {
   enumerable: true,
   get: function () {
-    return _ContentTypeBadgeNew.contentTypeToBadgeVariantMap;
+    return _ContentTypeBadge.contentTypeToBadgeVariantMap;
   }
 });
 Object.defineProperty(exports, "formatNestedMessages", {
@@ -626,7 +572,6 @@ var _Embed = require("./Embed");
 var _LicenseByline = require("./LicenseByline");
 var _Article = require("./Article");
 var _relativeUrl = require("./utils/relativeUrl");
-var _ContentLoader = _interopRequireDefault(require("./ContentLoader"));
 var _RelatedArticleList = _interopRequireWildcard(require("./RelatedArticleList"));
 var _ErrorMessage = _interopRequireWildcard(require("./ErrorMessage"));
 var _FileList = require("./FileList");
@@ -642,8 +587,7 @@ var _messagesSe = _interopRequireDefault(require("./locale/messages-se"));
 var _messagesSma = _interopRequireDefault(require("./locale/messages-sma"));
 var _Breadcrumb = _interopRequireWildcard(require("./Breadcrumb"));
 var _i18n = require("./i18n");
-var _ContentTypeBadge = _interopRequireWildcard(require("./ContentTypeBadge"));
-var _ContentTypeBadgeNew = require("./ContentTypeBadge/ContentTypeBadgeNew");
+var _ContentTypeBadge = require("./ContentTypeBadge/ContentTypeBadge");
 var _ContentTypeBlockQuote = require("./ContentTypeBlockQuote/ContentTypeBlockQuote");
 var _ContentTypeFramedContent = require("./ContentTypeFramedContent/ContentTypeFramedContent");
 var _CopyParagraphButton = _interopRequireDefault(require("./CopyParagraphButton"));
@@ -658,6 +602,6 @@ var _LinkBlock = require("./LinkBlock");
 var _CodeBlock = require("./CodeBlock");
 var _ZendeskButton = require("./ZendeskButton/ZendeskButton");
 var _licenseAttributes = require("./utils/licenseAttributes");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

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

@@ -564,6 +564,7 @@ declare const messages: {
         gloss: string;
         programme: string;
         "podcast-series": string;
+        "frontpage-article": string;
     };
     modal: {
         closeModal: string;

package/lib/locale/messages-en.js

@@ -580,7 +580,8 @@ const messages = {
     external: "External",
     gloss: "Gloss",
     programme: "Programme",
-    "podcast-series": "Podcast series"
+    "podcast-series": "Podcast series",
+    "frontpage-article": "About NDLA article"
   },
   modal: {
     closeModal: "Close"

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

@@ -564,6 +564,7 @@ declare const messages: {
         gloss: string;
         programme: string;
         "podcast-series": string;
+        "frontpage-article": string;
     };
     modal: {
         closeModal: string;

package/lib/locale/messages-nb.js

@@ -580,7 +580,8 @@ const messages = {
     external: "Ekstern",
     gloss: "Glose",
     programme: "Programfag",
-    "podcast-series": "Podkast-serie"
+    "podcast-series": "Podkast-serie",
+    "frontpage-article": "Om NDLA-artikkel"
   },
   modal: {
     closeModal: "Lukk"

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

@@ -564,6 +564,7 @@ declare const messages: {
         gloss: string;
         programme: string;
         "podcast-series": string;
+        "frontpage-article": string;
     };
     modal: {
         closeModal: string;

package/lib/locale/messages-nn.js

@@ -580,7 +580,8 @@ const messages = {
     external: "Ekstern",
     gloss: "Glose",
     programme: "Programfag",
-    "podcast-series": "Podkast-serie"
+    "podcast-series": "Podkast-serie",
+    "frontpage-article": "Om NDLA-artikkel"
   },
   modal: {
     closeModal: "Lukk"

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

@@ -564,6 +564,7 @@ declare const messages: {
         gloss: string;
         programme: string;
         "podcast-series": string;
+        "frontpage-article": string;
     };
     modal: {
         closeModal: string;

package/lib/locale/messages-se.js

@@ -580,7 +580,8 @@ const messages = {
     external: "Ekstern",
     gloss: "Glose",
     programme: "Programfag",
-    "podcast-series": "Podkast-serie"
+    "podcast-series": "Podkast-serie",
+    "frontpage-article": "Om NDLA-artikkel"
   },
   modal: {
     closeModal: "Govčča"

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

@@ -564,6 +564,7 @@ declare const messages: {
         gloss: string;
         programme: string;
         "podcast-series": string;
+        "frontpage-article": string;
     };
     modal: {
         closeModal: string;

package/lib/locale/messages-sma.js

@@ -580,7 +580,8 @@ const messages = {
     external: "Ekstern",
     gloss: "Glose",
     programme: "Programfag",
-    "podcast-series": "Podkast-serie"
+    "podcast-series": "Podkast-serie",
+    "frontpage-article": "Om NDLA-artikkel"
   },
   modal: {
     closeModal: "Dahph"

package/lib/model/ContentType.d.ts

@@ -23,6 +23,7 @@ export declare const PODCAST = "podcast";
 export declare const GLOSS = "gloss";
 export declare const PROGRAMME = "programme";
 export declare const PODCAST_SERIES = "podcast-series";
+export declare const FRONTPAGE_ARTICLE = "frontpage-article";
 export declare const contentTypes: {
     SUBJECT_MATERIAL: string;
     TASKS_AND_ACTIVITIES: string;

package/lib/model/ContentType.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resourceEmbedTypeMapping = exports.contentTypes = exports.contentTypeMapping = exports.VIDEO = exports.TOPIC = exports.TASKS_AND_ACTIVITIES = exports.SUBJECT_MATERIAL = exports.SUBJECT = exports.SOURCE_MATERIAL = exports.RESOURCE_TYPE_TASKS_AND_ACTIVITIES = exports.RESOURCE_TYPE_SUBJECT_MATERIAL = exports.RESOURCE_TYPE_SOURCE_MATERIAL = exports.RESOURCE_TYPE_LEARNING_PATH = exports.RESOURCE_TYPE_CONCEPT = exports.RESOURCE_TYPE_ASSESSMENT_RESOURCES = exports.PROGRAMME = exports.PODCAST_SERIES = exports.PODCAST = exports.MULTIDISCIPLINARY = exports.MISSING = exports.LEARNING_PATH = exports.IMAGE = exports.GLOSS = exports.EXTERNAL = exports.CONCEPT = exports.AUDIO = exports.ASSESSMENT_RESOURCES = void 0;
+exports.resourceEmbedTypeMapping = exports.contentTypes = exports.contentTypeMapping = exports.VIDEO = exports.TOPIC = exports.TASKS_AND_ACTIVITIES = exports.SUBJECT_MATERIAL = exports.SUBJECT = exports.SOURCE_MATERIAL = exports.RESOURCE_TYPE_TASKS_AND_ACTIVITIES = exports.RESOURCE_TYPE_SUBJECT_MATERIAL = exports.RESOURCE_TYPE_SOURCE_MATERIAL = exports.RESOURCE_TYPE_LEARNING_PATH = exports.RESOURCE_TYPE_CONCEPT = exports.RESOURCE_TYPE_ASSESSMENT_RESOURCES = exports.PROGRAMME = exports.PODCAST_SERIES = exports.PODCAST = exports.MULTIDISCIPLINARY = exports.MISSING = exports.LEARNING_PATH = exports.IMAGE = exports.GLOSS = exports.FRONTPAGE_ARTICLE = exports.EXTERNAL = exports.CONCEPT = exports.AUDIO = exports.ASSESSMENT_RESOURCES = void 0;
 /**
  * Copyright (c) 2017-present, NDLA.
  *
@@ -30,6 +30,7 @@ const PODCAST = exports.PODCAST = "podcast";
 const GLOSS = exports.GLOSS = "gloss";
 const PROGRAMME = exports.PROGRAMME = "programme";
 const PODCAST_SERIES = exports.PODCAST_SERIES = "podcast-series";
+const FRONTPAGE_ARTICLE = exports.FRONTPAGE_ARTICLE = "frontpage-article";
 const contentTypes = exports.contentTypes = {
   SUBJECT_MATERIAL,
   TASKS_AND_ACTIVITIES,
@@ -60,6 +61,7 @@ const contentTypeMapping = exports.contentTypeMapping = {
   [RESOURCE_TYPE_CONCEPT]: CONCEPT,
   [MULTIDISCIPLINARY]: MULTIDISCIPLINARY,
   [TOPIC]: TOPIC,
+  [FRONTPAGE_ARTICLE]: FRONTPAGE_ARTICLE,
   default: SUBJECT_MATERIAL
 };
 const resourceEmbedTypeMapping = exports.resourceEmbedTypeMapping = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.73-alpha.0",
+  "version": "56.0.75-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,11 +33,11 @@
   ],
   "dependencies": {
     "@ndla/core": "^5.0.2",
-    "@ndla/icons": "^8.0.44-alpha.0",
+    "@ndla/icons": "^8.0.46-alpha.0",
     "@ndla/licenses": "^8.0.4-alpha.0",
-    "@ndla/primitives": "^1.0.57-alpha.0",
-    "@ndla/safelink": "^7.0.58-alpha.0",
-    "@ndla/styled-system": "^0.0.27",
+    "@ndla/primitives": "^1.0.59-alpha.0",
+    "@ndla/safelink": "^7.0.60-alpha.0",
+    "@ndla/styled-system": "^0.0.29",
     "@ndla/util": "^5.0.1-alpha.0",
     "html-react-parser": "^5.1.8",
     "i18next-browser-languagedetector": "^7.1.0"
@@ -50,13 +50,13 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.45",
+    "@ndla/preset-panda": "^0.0.47",
     "@ndla/types-backend": "^0.2.86",
     "@ndla/types-embed": "^5.0.4-alpha.0",
-    "@pandacss/dev": "^0.46.0"
+    "@pandacss/dev": "^0.48.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3f2d720f26b163be90b396f40f3c1fad746b3cf9"
+  "gitHead": "8929fb445477b02e740a9a21fd2d3ef08287d99c"
 }

package/src/Article/Article.tsx

@@ -12,9 +12,9 @@ import { Heading, Text } from "@ndla/primitives";
 import { cx } from "@ndla/styled-system/css";
 import { Stack, styled } from "@ndla/styled-system/jsx";
 import { JsxStyleProps } from "@ndla/styled-system/types";
-import { ContentTypeBadgeNew } from "..";
+import { ContentTypeBadge } from "..";
 import { ArticleByline } from "./ArticleByline";
-import { ContentType } from "../ContentTypeBadge/ContentTypeBadgeNew";
+import { ContentType } from "../ContentTypeBadge/ContentTypeBadge";
 import { Article as ArticleType } from "../types";
 
 const StyledArticleContent = styled(ark.section, {}, { baseComponent: true });
@@ -135,7 +135,7 @@ export const ArticleTitle = ({
       <ArticleHGroup>
         {(!!contentType || !!heartButton) && (
           <StyledStack justify="space-between" align="center" direction="row" gap="small">
-            {!!contentType && <ContentTypeBadgeNew contentType={contentType}>{contentTypeLabel}</ContentTypeBadgeNew>}
+            {!!contentType && <ContentTypeBadge contentType={contentType}>{contentTypeLabel}</ContentTypeBadge>}
             {heartButton}
           </StyledStack>
         )}

package/src/AudioPlayer/Controls.tsx

@@ -14,6 +14,7 @@ import { PlayFill, PauseLine, VolumeUpFill } from "@ndla/icons/common";
 import { CheckLine } from "@ndla/icons/editor";
 import {
   Button,
+  FieldRoot,
   IconButton,
   PopoverContent,
   PopoverRoot,
@@ -292,35 +293,37 @@ const Controls = ({ src, title }: Props) => {
             <div>-{formatTime(remainingTime)}</div>
           </StyledText>
         </ProgressWrapper>
-        <StyledSelectRoot
-          collection={speedValues}
-          value={[speedValue.toString()]}
-          onValueChange={(details) => setSpeedValue(parseFloat(details.value[0]))}
-          positioning={{ placement: "top" }}
-        >
-          <SelectLabel css={visuallyHidden.raw()}>{t("audio.controls.selectSpeed")}</SelectLabel>
-          <SelectControl>
-            <SelectTrigger asChild>
-              <SpeedButton
-                variant="tertiary"
-                title={t("audio.controls.selectSpeed")}
-                aria-label={t("audio.controls.selectSpeed")}
-              >
-                <span>{`${speedValue}x`}</span>
-              </SpeedButton>
-            </SelectTrigger>
-          </SelectControl>
-          <SelectContent>
-            {speedValues.items.map((speed) => (
-              <SelectItem key={speed} item={speed}>
-                <SelectItemText>{speed}x</SelectItemText>
-                <SelectItemIndicator>
-                  <CheckLine />
-                </SelectItemIndicator>
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </StyledSelectRoot>
+        <FieldRoot>
+          <StyledSelectRoot
+            collection={speedValues}
+            value={[speedValue.toString()]}
+            onValueChange={(details) => setSpeedValue(parseFloat(details.value[0]))}
+            positioning={{ placement: "top" }}
+          >
+            <SelectLabel css={visuallyHidden.raw()}>{t("audio.controls.selectSpeed")}</SelectLabel>
+            <SelectControl>
+              <SelectTrigger asChild>
+                <SpeedButton
+                  variant="tertiary"
+                  title={t("audio.controls.selectSpeed")}
+                  aria-label={t("audio.controls.selectSpeed")}
+                >
+                  <span>{`${speedValue}x`}</span>
+                </SpeedButton>
+              </SelectTrigger>
+            </SelectControl>
+            <SelectContent>
+              {speedValues.items.map((speed) => (
+                <SelectItem key={speed} item={speed}>
+                  <SelectItemText>{speed}x</SelectItemText>
+                  <SelectItemIndicator>
+                    <CheckLine />
+                  </SelectItemIndicator>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </StyledSelectRoot>
+        </FieldRoot>
         <PopoverRoot positioning={{ placement: "top" }}>
           <PopoverTrigger asChild>
             <VolumeButton variant="tertiary" aria-label={t("audio.controls.adjustVolume")}>

package/src/ContentTypeBadge/ContentTypeBadge.stories.tsx

@@ -1,83 +1,75 @@
 /**
- * Copyright (c) 2023-present, NDLA.
+ * 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 { useTranslation } from "react-i18next";
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
-import { styled } from "@ndla/styled-system/jsx";
+import { MovieLine } from "@ndla/icons/editor";
+import { HStack, styled } from "@ndla/styled-system/jsx";
 import { ContentTypeBadge } from "./ContentTypeBadge";
-import * as contentTypes from "../model/ContentType";
 
 export default {
   title: "Components/ContentTypeBadge",
+  component: ContentTypeBadge,
   tags: ["autodocs"],
   parameters: {
     inlineStories: true,
   },
   args: {
-    size: "small",
-    border: true,
-    type: "subject-material",
-    background: true,
-    title: "I'm a badge",
-  },
-  argTypes: {
-    children: { control: false },
+    contentType: "subject-material",
   },
-  component: ContentTypeBadge,
-} as Meta<typeof ContentTypeBadge>;
+} satisfies Meta<typeof ContentTypeBadge>;
 
 export const Default: StoryObj<typeof ContentTypeBadge> = {};
 
-export const Sizes: StoryFn<typeof ContentTypeBadge> = ({ ...args }) => (
-  <>
-    <ContentTypeBadge {...args} size="xx-small" />
-    <ContentTypeBadge {...args} size="x-small" />
-    <ContentTypeBadge {...args} size="small" />
-    <ContentTypeBadge {...args} size="large" />
-  </>
-);
-
-export const NoBorder: StoryObj<typeof ContentTypeBadge> = {
-  args: {
-    border: false,
+const StyledHStack = styled(HStack, {
+  base: {
+    flexWrap: "wrap",
   },
-};
+});
 
-export const NoBackground: StoryObj<typeof ContentTypeBadge> = {
-  args: {
-    background: false,
-  },
-};
+export const AllBadges: StoryFn<typeof ContentTypeBadge> = () => (
+  <StyledHStack gap="3xsmall">
+    <ContentTypeBadge contentType="subject-material" />
+    <ContentTypeBadge contentType="tasks-and-activities" />
+    <ContentTypeBadge contentType="assessment-resources" />
+    <ContentTypeBadge contentType="subject" />
+    <ContentTypeBadge contentType="source-material" />
+    <ContentTypeBadge contentType="learning-path" />
+    <ContentTypeBadge contentType="topic" />
+    <ContentTypeBadge contentType="multidisciplinary" />
+    <ContentTypeBadge contentType="concept" />
+    <ContentTypeBadge contentType="external" />
+    <ContentTypeBadge contentType="image" />
+    <ContentTypeBadge contentType="audio" />
+    <ContentTypeBadge contentType="video" />
+    <ContentTypeBadge contentType="missing" />
+    <ContentTypeBadge contentType="frontpage-article" />
+    <ContentTypeBadge contentType="programme" />
+    <ContentTypeBadge contentType="podcast" />
+    <ContentTypeBadge contentType="podcast-series" />
+    <ContentTypeBadge contentType="gloss" />
+  </StyledHStack>
+);
 
-const BadgesWrapper = styled("div", {
+const StyledContentTypeBadge = styled(ContentTypeBadge, {
   base: {
     display: "flex",
+    gap: "4xsmall",
     alignItems: "center",
-    gap: "xsmall",
   },
 });
 
-export const AllBadges: StoryFn<typeof ContentTypeBadge> = ({ ...args }) => (
-  <BadgesWrapper>
-    <ContentTypeBadge {...args} type={contentTypes.SUBJECT_MATERIAL} />
-    <ContentTypeBadge {...args} type={contentTypes.TASKS_AND_ACTIVITIES} />
-    <ContentTypeBadge {...args} type={contentTypes.ASSESSMENT_RESOURCES} />
-    <ContentTypeBadge {...args} type={contentTypes.SUBJECT} />
-    <ContentTypeBadge {...args} type={contentTypes.SOURCE_MATERIAL} />
-    <ContentTypeBadge {...args} type={contentTypes.LEARNING_PATH} />
-    <ContentTypeBadge {...args} type={contentTypes.TOPIC} />
-    <ContentTypeBadge {...args} type={contentTypes.MULTIDISCIPLINARY} />
-    <ContentTypeBadge {...args} type={contentTypes.CONCEPT} />
-    <ContentTypeBadge {...args} type={contentTypes.EXTERNAL} />
-    <ContentTypeBadge {...args} type={contentTypes.resourceEmbedTypeMapping.image} />
-    <ContentTypeBadge {...args} type={contentTypes.resourceEmbedTypeMapping.audio} />
-    <ContentTypeBadge {...args} type={contentTypes.resourceEmbedTypeMapping.video} />
-    <ContentTypeBadge {...args} type={contentTypes.GLOSS} />
-    <ContentTypeBadge {...args} type={contentTypes.PROGRAMME} />
-    <ContentTypeBadge {...args} type={contentTypes.PODCAST_SERIES} />
-  </BadgesWrapper>
-);
+export const ContentOverride: StoryFn<typeof ContentTypeBadge> = () => {
+  const { t } = useTranslation();
+  return (
+    <StyledContentTypeBadge contentType="video">
+      <MovieLine size="small" />
+      {t("contentTypes.video")}
+    </StyledContentTypeBadge>
+  );
+};