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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.74-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.45-alpha.0",
+    "@ndla/icons": "^8.0.46-alpha.0",
     "@ndla/licenses": "^8.0.4-alpha.0",
-    "@ndla/primitives": "^1.0.58-alpha.0",
-    "@ndla/safelink": "^7.0.59-alpha.0",
-    "@ndla/styled-system": "^0.0.28",
+    "@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.46",
+    "@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": "34f26de8c12341b710a32b6839bacc0caebfcc2e"
+  "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/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>
+  );
+};

package/src/ContentTypeBadge/ContentTypeBadge.tsx

@@ -1,227 +1,79 @@
 /**
- * Copyright (c) 2018-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 { CSSProperties, ComponentPropsWithoutRef, useMemo } from "react";
-
-import { colors } from "@ndla/core";
-import { BookmarkLine, SubtractLine } from "@ndla/icons/action";
-import { BookReadFill, ShareFill, VoicePrintLine } from "@ndla/icons/common";
-import { MenuSearchLine, LearningPath, SharedResource, TasksAndActivities } from "@ndla/icons/contentType";
-import { ChatLine, FileListLine, LinkMedium, ImageLine, MovieLine } from "@ndla/icons/editor";
-import { styled } from "@ndla/styled-system/jsx";
-
+import { forwardRef } from "react";
+import { useTranslation } from "react-i18next";
+import { Badge, BadgeProps, type BadgeVariant } from "@ndla/primitives";
 import * as contentTypes from "../model/ContentType";
 
-// TODO: Remove this component
-
-interface Props extends ComponentPropsWithoutRef<"div"> {
-  size?: "xx-small" | "x-small" | "small" | "large";
-  type: string;
-  title?: string;
-  background?: boolean;
-  border?: boolean;
-  className?: string;
+export interface ContentTypeBadgeProps extends Omit<BadgeProps, "colorTheme"> {
+  contentType: ContentType | undefined;
 }
 
-const StyledContentTypeBadge = styled("div", {
-  base: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: "100%",
-    color: "var(--icon-color)",
-  },
-  defaultVariants: {
-    size: "small",
-    border: true,
-    background: false,
-  },
-  variants: {
-    size: {
-      "xx-small": {
-        width: "20px",
-        height: "20px",
-        border: "1px solid",
-        "& svg": {
-          width: "10px",
-          height: "10px",
-        },
-      },
-      "x-small": {
-        width: "20px",
-        height: "20px",
-        border: "1px solid",
-        tablet: {
-          height: "26px",
-          width: "26px",
-        },
-        "& svg": {
-          width: "10px",
-          height: "10px",
-          tablet: {
-            width: "12px",
-            height: "12px",
-          },
-        },
-      },
-      small: {
-        width: "34px",
-        height: "34px",
-      },
-      large: {
-        width: "50px",
-        height: "50px",
-        "& svg": {
-          width: "25px",
-          height: "25px",
-        },
-      },
-    },
-    border: {
-      true: {
-        border: "2px solid",
-        borderColor: "var(--icon-color)",
-      },
-      false: {},
-    },
-    background: {
-      true: {
-        backgroundColor: "var(--background-color)",
-      },
-    },
-  },
-});
+export type StrictContentType =
+  | typeof contentTypes.SUBJECT_MATERIAL
+  | typeof contentTypes.TASKS_AND_ACTIVITIES
+  | typeof contentTypes.ASSESSMENT_RESOURCES
+  | typeof contentTypes.SUBJECT
+  | typeof contentTypes.SOURCE_MATERIAL
+  | typeof contentTypes.LEARNING_PATH
+  | typeof contentTypes.TOPIC
+  | typeof contentTypes.MULTIDISCIPLINARY
+  | typeof contentTypes.CONCEPT
+  | typeof contentTypes.EXTERNAL
+  | typeof contentTypes.IMAGE
+  | typeof contentTypes.AUDIO
+  | typeof contentTypes.VIDEO
+  | typeof contentTypes.MISSING
+  | typeof contentTypes.PODCAST
+  | typeof contentTypes.GLOSS
+  | typeof contentTypes.PROGRAMME
+  | typeof contentTypes.PODCAST_SERIES
+  | typeof contentTypes.FRONTPAGE_ARTICLE;
 
-const iconMap = {
-  [contentTypes.SUBJECT_MATERIAL]: {
-    icon: FileListLine,
-    iconColor: colors.subjectMaterial.dark,
-    backgroundColor: colors.subjectMaterial.light,
-  },
-  [contentTypes.TASKS_AND_ACTIVITIES]: {
-    icon: TasksAndActivities,
-    iconColor: colors.tasksAndActivities.dark,
-    backgroundColor: colors.tasksAndActivities.light,
-  },
-  [contentTypes.ASSESSMENT_RESOURCES]: {
-    icon: MenuSearchLine,
-    iconColor: colors.assessmentResource.dark,
-    backgroundColor: colors.assessmentResource.light,
-  },
-  [contentTypes.SUBJECT]: {
-    icon: BookReadFill,
-    iconColor: colors.subject.dark,
-    backgroundColor: colors.subject.light,
-  },
-  [contentTypes.SOURCE_MATERIAL]: {
-    icon: SharedResource,
-    iconColor: colors.sourceMaterial.dark,
-    backgroundColor: colors.sourceMaterial.light,
-  },
-  [contentTypes.LEARNING_PATH]: {
-    icon: LearningPath,
-    iconColor: colors.learningPath.dark,
-    backgroundColor: colors.learningPath.light,
-  },
-  [contentTypes.TOPIC]: {
-    icon: BookmarkLine,
-    iconColor: colors.subject.dark,
-    backgroundColor: colors.subject.light,
-  },
-  [contentTypes.MULTIDISCIPLINARY]: {
-    icon: ShareFill,
-    backgroundColor: "#b9b37b",
-  },
-  [contentTypes.CONCEPT]: {
-    icon: ChatLine,
-    iconColor: colors.concept.text,
-    backgroundColor: colors.concept.light,
-  },
-  [contentTypes.EXTERNAL]: {
-    icon: LinkMedium,
-    iconColor: colors.external.dark,
-    backgroundColor: colors.external.light,
-  },
-  [contentTypes.resourceEmbedTypeMapping.image]: {
-    icon: ImageLine,
-    iconColor: colors.brand.grey,
-    backgroundColor: colors.brand.greyLight,
-  },
-  [contentTypes.resourceEmbedTypeMapping.audio]: {
-    icon: VoicePrintLine,
-    iconColor: colors.brand.grey,
-    backgroundColor: colors.brand.greyLight,
-  },
-  [contentTypes.resourceEmbedTypeMapping.video]: {
-    icon: MovieLine,
-    iconColor: colors.brand.grey,
-    backgroundColor: colors.brand.greyLight,
-  },
-  [contentTypes.MISSING]: {
-    icon: SubtractLine,
-    iconColor: colors.brand.grey,
-    backgroundColor: colors.brand.greyLight,
-  },
-} as const;
-
-export const ContentTypeBadge = ({
-  type,
-  background,
-  title,
-  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;
-    return { Icon: fromMap.icon, style };
-  }, [type]);
+export type ContentType =
+  | StrictContentType
+  // This allows for us to fallback to string without getting a ts error, while still keeping intellisense
+  | (string & {});
 
-  return (
-    <StyledContentTypeBadge
-      title={title}
-      background={background}
-      size={size}
-      border={border}
-      style={style}
-      aria-label={title}
-      className={className}
-      data-badge=""
-      data-type={type}
-      {...rest}
-    >
-      <Icon />
-    </StyledContentTypeBadge>
-  );
+export const contentTypeToBadgeVariantMap: Record<ContentType, BadgeVariant> = {
+  [contentTypes.SUBJECT_MATERIAL]: "brand1",
+  [contentTypes.TASKS_AND_ACTIVITIES]: "brand2",
+  [contentTypes.ASSESSMENT_RESOURCES]: "brand2",
+  [contentTypes.SUBJECT]: "neutral",
+  [contentTypes.SOURCE_MATERIAL]: "brand1",
+  [contentTypes.LEARNING_PATH]: "brand3",
+  [contentTypes.TOPIC]: "neutral",
+  [contentTypes.MULTIDISCIPLINARY]: "neutral",
+  [contentTypes.CONCEPT]: "brand1",
+  [contentTypes.EXTERNAL]: "brand2",
+  [contentTypes.IMAGE]: "brand1",
+  [contentTypes.AUDIO]: "brand1",
+  [contentTypes.PODCAST]: "brand1",
+  [contentTypes.VIDEO]: "brand1",
+  [contentTypes.MISSING]: "neutral",
+  [contentTypes.PODCAST_SERIES]: "brand1",
+  [contentTypes.GLOSS]: "brand1",
+  [contentTypes.PROGRAMME]: "neutral",
+  [contentTypes.FRONTPAGE_ARTICLE]: "brand2",
 };
 
-export const SubjectMaterialBadge = (props: Omit<Props, "type">) => (
-  <ContentTypeBadge {...props} type={contentTypes.SUBJECT_MATERIAL} />
-);
-export const TasksAndActivitiesBadge = (props: Omit<Props, "type">) => (
-  <ContentTypeBadge {...props} type={contentTypes.TASKS_AND_ACTIVITIES} />
-);
-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 SourceMaterialBadge = (props: Omit<Props, "type">) => (
-  <ContentTypeBadge {...props} type={contentTypes.SOURCE_MATERIAL} />
-);
-export const LearningPathBadge = (props: Omit<Props, "type">) => (
-  <ContentTypeBadge {...props} type={contentTypes.LEARNING_PATH} />
-);
-export const MultidisciplinaryTopicBadge = (props: Omit<Props, "type">) => (
-  <ContentTypeBadge {...props} type={contentTypes.MULTIDISCIPLINARY} />
+export const ContentTypeBadge = forwardRef<HTMLDivElement, ContentTypeBadgeProps>(
+  ({ contentType, children, ...props }, ref) => {
+    const { t } = useTranslation();
+    return (
+      <Badge
+        colorTheme={contentTypeToBadgeVariantMap[contentType ?? "missing"] ?? contentTypeToBadgeVariantMap["missing"]}
+        {...props}
+        ref={ref}
+      >
+        {children ?? t(`contentTypes.${contentType}`)}
+      </Badge>
+    );
+  },
 );
-export const ConceptBadge = (props: Omit<Props, "type">) => <ContentTypeBadge {...props} type={contentTypes.CONCEPT} />;

package/src/ContentTypeBlockQuote/ContentTypeBlockQuote.tsx

@@ -8,7 +8,7 @@
 
 import { forwardRef } from "react";
 import { BlockQuote, BlockQuoteProps, BlockQuoteVariantProps } from "@ndla/primitives";
-import { ContentType } from "../ContentTypeBadge/ContentTypeBadgeNew";
+import { ContentType } from "../ContentTypeBadge/ContentTypeBadge";
 
 export type ContentTypeBlockQuoteVariant = "colored" | "neutral";
 

package/src/ContentTypeHero/ContentTypeHero.tsx

@@ -8,7 +8,7 @@
 
 import { forwardRef } from "react";
 import { Hero, HeroProps, HeroVariant } from "@ndla/primitives";
-import { ContentType } from "../ContentTypeBadge/ContentTypeBadgeNew";
+import { ContentType } from "../ContentTypeBadge/ContentTypeBadge";
 import * as contentTypes from "../model/ContentType";
 
 export const contentTypeToHeroMap: Record<ContentType, HeroVariant> = {
@@ -34,6 +34,7 @@ export const contentTypeToHeroMap: Record<ContentType, HeroVariant> = {
   [contentTypes.PROGRAMME]: "primary",
   // this will never happen
   [contentTypes.PODCAST_SERIES]: "primary",
+  [contentTypes.FRONTPAGE_ARTICLE]: "primary",
 };
 
 export interface ContentTypeHeroProps extends HeroProps {

package/src/RelatedArticleList/RelatedArticleList.tsx

@@ -13,7 +13,7 @@ import { CardContent, CardHeading, CardRoot, Text, Heading, Button } from "@ndla
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
 import { linkOverlay } from "@ndla/styled-system/patterns";
-import { ContentTypeBadge } from "../ContentTypeBadge/ContentTypeBadgeNew";
+import { ContentTypeBadge } from "../ContentTypeBadge/ContentTypeBadge";
 import { contentTypes } from "../model/ContentType";
 import { HeadingLevel } from "../types";
 

package/src/index.ts

@@ -54,8 +54,6 @@ export {
 
 export { getPossiblyRelativeUrl } from "./utils/relativeUrl";
 
-export { default as ContentLoader } from "./ContentLoader";
-
 export { default as RelatedArticleList, RelatedArticle } from "./RelatedArticleList";
 
 export { ErrorResourceAccessDenied, default as ErrorMessage } from "./ErrorMessage";
@@ -94,22 +92,8 @@ export {
   useVideoSearchTranslations,
 } from "./i18n";
 
-export {
-  default as ContentTypeBadge,
-  SubjectMaterialBadge,
-  TasksAndActivitiesBadge,
-  AssessmentResourcesBadge,
-  LearningPathBadge,
-  SubjectBadge,
-  SourceMaterialBadge,
-  ConceptBadge,
-} from "./ContentTypeBadge";
-
-export type { ContentTypeBadgeProps, StrictContentType, ContentType } from "./ContentTypeBadge/ContentTypeBadgeNew";
-export {
-  ContentTypeBadge as ContentTypeBadgeNew,
-  contentTypeToBadgeVariantMap,
-} from "./ContentTypeBadge/ContentTypeBadgeNew";
+export type { ContentTypeBadgeProps, StrictContentType, ContentType } from "./ContentTypeBadge/ContentTypeBadge";
+export { ContentTypeBadge, contentTypeToBadgeVariantMap } from "./ContentTypeBadge/ContentTypeBadge";
 
 export { ContentTypeBlockQuote } from "./ContentTypeBlockQuote/ContentTypeBlockQuote";
 export { type ContentTypeBlockQuoteVariant } from "./ContentTypeBlockQuote/ContentTypeBlockQuote";

package/src/locale/messages-en.ts

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

package/src/locale/messages-nb.ts

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

package/src/locale/messages-nn.ts

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

package/src/locale/messages-se.ts

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

package/src/locale/messages-sma.ts

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

package/src/model/ContentType.ts

@@ -24,6 +24,7 @@ export const PODCAST = "podcast";
 export const GLOSS = "gloss";
 export const PROGRAMME = "programme";
 export const PODCAST_SERIES = "podcast-series";
+export const FRONTPAGE_ARTICLE = "frontpage-article";
 
 export const contentTypes = {
   SUBJECT_MATERIAL,
@@ -57,6 +58,7 @@ export const contentTypeMapping: Record<string, string> = {
   [RESOURCE_TYPE_CONCEPT]: CONCEPT,
   [MULTIDISCIPLINARY]: MULTIDISCIPLINARY,
   [TOPIC]: TOPIC,
+  [FRONTPAGE_ARTICLE]: FRONTPAGE_ARTICLE,
   default: SUBJECT_MATERIAL,
 };