@ndla/ui 55.0.13-alpha.0 → 55.0.14-alpha.0

package/src/CampaignBlock/CampaignBlock.tsx

@@ -6,14 +6,13 @@
  *
  */
 
-/** @jsxImportSource @emotion/react */
 import parse from "html-react-parser";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { breakpoints, colors, fonts, spacing, mq, misc } from "@ndla/core";
+import { ReactNode } from "react";
 import { Forward } from "@ndla/icons/common";
+import { Text } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
-import { HeadingLevel } from "@ndla/typography";
+import { styled } from "@ndla/styled-system/jsx";
+import { HeadingLevel } from "../types";
 import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
 
 interface Image {
@@ -35,74 +34,112 @@ interface Props {
   path?: string;
 }
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.normal};
-  border: 1px ${colors.brand.lighter} solid;
-  border-radius: ${misc.borderRadius};
-  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;
-    }
-  }
-`;
+const Container = styled("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    border: "1px solid",
+    borderColor: "stroke.default",
+    backgroundColor: "background.default",
+    borderRadius: "xsmall",
+    boxShadow: "full",
+    maxWidth: "surface.xsmall",
+    overflow: "hidden",
+    mobileWide: {
+      maxWidth: "surface.medium",
+    },
+    tabletWide: {
+      // TODO: This is probably not the correct max-width. And it should be a token
+      maxWidth: "1100px",
+      flexDirection: "row",
+    },
+  },
+});
 
-const headingStyle = css`
-  margin: 0;
-`;
+const LinkText = styled(Text, {
+  base: {
+    display: "flex",
+    gap: "xxsmall",
+    textDecoration: "underline",
+    _hover: {
+      textDecoration: "none",
+    },
+  },
+});
+const StyledImg = styled("img", {
+  base: {
+    alignSelf: "center",
+    objectFit: "cover",
+    width: "100%",
+    height: "215px",
+    desktop: {
+      height: "340px",
+    },
+  },
+});
 
-const StyledDescription = styled.p`
-  font-family: ${fonts.serif};
-  margin: ${spacing.normal} 0 ${spacing.medium};
-`;
+const ContentWrapper = styled("div", {
+  base: {
+    width: "100%",
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    gap: "xsmall",
+    alignItems: "flex-start",
+    paddingBlock: "medium",
+    paddingInline: "medium",
+  },
+});
 
-const StyledImg = styled.img`
-  align-self: center;
-  object-fit: contain;
-`;
+interface MaybeLinkTextProps {
+  url?: string;
+  path?: string;
+  children: ReactNode;
+}
 
-const StyledLink = styled(SafeLink)`
-  display: inline-flex;
-  align-items: center;
-  gap: ${spacing.xxsmall};
-  color: ${colors.brand.primary};
-`;
+const StyledSafeLink = styled(SafeLink, {
+  base: {
+    color: "inherit",
+  },
+});
 
-const TextWrapper = styled.div`
-  flex-grow: 1;
-`;
+const MaybeLinkText = ({ url, children, path }: MaybeLinkTextProps) => {
+  if (url) return <StyledSafeLink to={getPossiblyRelativeUrl(url, path)}>{children}</StyledSafeLink>;
+  return children;
+};
 
 const CampaignBlock = ({
   title,
   image,
   imageSide = "left",
   description,
-  headingLevel: Heading = "h2",
+  headingLevel: InternalHeading = "h2",
   url,
   path,
   className,
 }: Props) => {
+  const imageComponent = image && <StyledImg src={`${image.src}?width=455`} height={340} width={455} alt={image.alt} />;
+  const HeaderComponent = url?.url ? LinkText : Text;
   return (
-    <Container className={className} data-type="campaign-block" data-image-side={imageSide}>
-      {image && <StyledImg src={`${image.src}?width=240`} height={200} width={240} alt={image.alt} />}
-      <TextWrapper>
-        <Heading css={headingStyle}>{parse(title)}</Heading>
-        <StyledDescription>{parse(description)}</StyledDescription>
+    <Container className={className} data-type="campaign-block">
+      {imageSide === "left" && imageComponent}
+      <ContentWrapper>
+        <MaybeLinkText url={url?.url} path={path}>
+          <HeaderComponent asChild consumeCss textStyle="heading.small">
+            <InternalHeading>{parse(title)}</InternalHeading>
+          </HeaderComponent>
+        </MaybeLinkText>
+        <Text textStyle="body.large">{parse(description)}</Text>
         {!!url?.url && (
-          <StyledLink to={getPossiblyRelativeUrl(url.url, path)}>
-            {parse(url.text ?? "")}
-            <Forward />
-          </StyledLink>
+          <MaybeLinkText url={url.url} path={path}>
+            <LinkText textStyle="body.medium">
+              {parse(url.text ?? "")}
+              <Forward />
+            </LinkText>
+          </MaybeLinkText>
         )}
-      </TextWrapper>
+      </ContentWrapper>
+      {imageSide !== "left" && imageComponent}
     </Container>
   );
 };

package/src/Concept/Concept.stories.tsx

@@ -0,0 +1,142 @@
+/**
+ * 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 { Meta, StoryObj } from "@storybook/react";
+import { ConceptData } from "@ndla/types-embed";
+import { Concept } from "./Concept";
+
+const visualElementData: ConceptData["visualElement"] = {
+  resource: "image",
+  status: "success",
+  embedData: {
+    resource: "image",
+    resourceId: "61181",
+    size: "full",
+    align: "",
+    alt: "Tenåringsjente med lyse fletter slenger på håret. Foto. ",
+    caption:
+      "Den østerrikske tronfølgeren Franz Ferdinand og hans hustru Sophie var på besøk i Sarajevo i 1914. Begge ble skutt og drept av nasjonalisten Gavrilo Princip i det som er kjent som <em>skuddene i Sarajevo</em>. Denne hendelsen var den utløsende årsaken til første verdenskrig.",
+    url: "https://api.test.ndla.no/image-api/v2/images/61181",
+  },
+  data: {
+    id: "61181",
+    metaUrl: "https://api.test.ndla.no/image-api/v3/images/61181",
+    title: {
+      title: "\nHigh angle view of teenage girl with tousled dyed hair dancing at skateboard park\n",
+      language: "nb",
+    },
+    alttext: {
+      alttext: "Tenåringsjente med lyse fletter slenger på håret. Foto. ",
+      language: "nb",
+    },
+    copyright: {
+      license: {
+        license: "CC-BY-NC-4.0",
+        description: "Creative Commons Attribution-NonCommercial 4.0 International",
+        url: "https://creativecommons.org/licenses/by-nc/4.0/",
+      },
+      origin: "https://bilder.ntb.no/r/preview/creative/EXuziiZGWno",
+      creators: [
+        {
+          type: "photographer",
+          name: "Maskot",
+        },
+      ],
+      processors: [],
+      rightsholders: [
+        {
+          type: "rightsholder",
+          name: "NTB",
+        },
+      ],
+      processed: false,
+    },
+    tags: {
+      tags: ["danser", "kultur", "identitet"],
+      language: "nb",
+    },
+    caption: {
+      caption: "Modellklarert.",
+      language: "nb",
+    },
+    supportedLanguages: ["nb"],
+    created: "2022-01-07T08:26:01Z",
+    createdBy: "lA2KgVfhY-fpmgHCYAy5W1DX",
+    modelRelease: "yes",
+    image: {
+      fileName: "S81WiNgl.jpg",
+      size: 1685455,
+      contentType: "image/jpeg",
+      imageUrl: "https://api.test.ndla.no/image-api/raw/S81WiNgl.jpg",
+      dimensions: {
+        width: 2000,
+        height: 1333,
+      },
+      language: "nb",
+    },
+  },
+};
+
+export default {
+  title: "Components/Concept",
+  component: Concept,
+  tags: ["autodocs"],
+  args: {
+    title: "skin - formasjonsskade",
+    lang: "nb",
+    visualElement: visualElementData,
+    copyright: {
+      license: {
+        license: "CC-BY-SA-4.0",
+        description: "Creative Commons Attribution-ShareAlike 4.0 International",
+        url: "https://creativecommons.org/licenses/by-sa/4.0/",
+      },
+      creators: [{ type: "Writer", name: "Sissel Paaske" }],
+      processors: [
+        { type: "Processor", name: "Totaltekst" },
+        { type: "Correction", name: "Arbeidets art" },
+      ],
+      rightsholders: [],
+      processed: false,
+    },
+    children: (
+      <>
+        <p>
+          Ordet «skin» er engelsk og brukes om formasjonsskade som oppstår i boreprosessen i området som grenser inn til
+          brønnen. Skaden er størst i området nærmest hullet, men den kan bre seg utover et stykke fra brønnen. Skin
+          forteller om bergartens permeabilitet i reservoarsonen.
+        </p>
+        <p>Hullveggen skades både av borekronen, små partikler og væsken som brukes i brønnen.</p>
+        <p>
+          Skaden i bergarten gir dårligere forhold for oljen som skal strømme til brønnen. Gangene i bergarten plugges,
+          og det oppstår et trykkfall som reduserer produksjonstrykket i brønnen.
+        </p>
+        <p>
+          Det er viktig å redusere omfanget av skaden ved å velge væsker som passer godt til bergartsegenskapene, og å
+          bore med en borekrone som skader minst mulig.
+        </p>
+        <p>Skader som er dannet av borevæske, kan repareres ved å syrebehandle hullets overflate.</p>
+      </>
+    ),
+  },
+} satisfies Meta<typeof Concept>;
+
+export const Default: StoryObj<typeof Concept> = {};
+
+export const WithoutVisualElement: StoryObj<typeof Concept> = {
+  args: {
+    visualElement: undefined,
+  },
+};
+
+export const WithoutLicenseAndVisualElement: StoryObj<typeof Concept> = {
+  args: {
+    visualElement: undefined,
+    copyright: undefined,
+  },
+};

package/src/Concept/Concept.tsx

@@ -0,0 +1,73 @@
+/**
+ * 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 { ComponentPropsWithRef, ReactNode, forwardRef } from "react";
+import { Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { IDraftCopyright as ConceptCopyright } from "@ndla/types-backend/concept-api";
+import { ConceptVisualElementMeta } from "@ndla/types-embed";
+import { BrightcoveEmbed, ExternalEmbed, H5pEmbed, IframeEmbed, ImageEmbed } from "../Embed";
+import { LicenseContainerContent } from "../LicenseByline/EmbedByline";
+
+export interface ConceptProps extends ComponentPropsWithRef<"figure"> {
+  copyright?: ConceptCopyright;
+  visualElement?: ConceptVisualElementMeta;
+  lang?: string;
+  title?: string;
+  children?: ReactNode;
+}
+
+const StyledFigure = styled(Figure, {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "medium",
+  },
+});
+
+const ContentWrapper = styled("div", {
+  base: {
+    textStyle: "body.large",
+    display: "inline",
+    "& p": {
+      display: "inline",
+    },
+  },
+});
+
+// TODO: Figure out if we need to support tags, subjects and headerButtons.
+
+export const Concept = forwardRef<HTMLElement, ConceptProps>(
+  ({ copyright, visualElement, lang, children, title, ...rest }, ref) => {
+    return (
+      <StyledFigure ref={ref} {...rest}>
+        <ContentWrapper lang={lang}>
+          {!!title && (
+            <>
+              <b>{title}</b>
+              {` – `}
+            </>
+          )}
+          {children}
+        </ContentWrapper>
+        {visualElement?.resource === "image" ? (
+          <ImageEmbed embed={visualElement} lang={lang} />
+        ) : visualElement?.resource === "brightcove" ? (
+          <BrightcoveEmbed embed={visualElement} />
+        ) : visualElement?.resource === "h5p" ? (
+          <H5pEmbed embed={visualElement} />
+        ) : visualElement?.resource === "iframe" ? (
+          <IframeEmbed embed={visualElement} />
+        ) : visualElement?.resource === "external" ? (
+          <ExternalEmbed embed={visualElement} />
+        ) : null}
+        {copyright && <LicenseContainerContent copyright={copyright} type="concept" />}
+      </StyledFigure>
+    );
+  },
+);

package/src/ContentTypeBadge/ContentTypeBadgeNew.stories.tsx

@@ -0,0 +1,70 @@
+/**
+ * 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 { Video } from "@ndla/icons/editor";
+import { HStack, styled } from "@ndla/styled-system/jsx";
+import { ContentTypeBadge } from "./ContentTypeBadgeNew";
+
+export default {
+  title: "Components/ContentTypeBadgeNew",
+  component: ContentTypeBadge,
+  tags: ["autodocs"],
+  parameters: {
+    inlineStories: true,
+  },
+  args: {
+    contentType: "subject-material",
+  },
+} satisfies Meta<typeof ContentTypeBadge>;
+
+export const Default: StoryObj<typeof ContentTypeBadge> = {};
+
+const StyledHStack = styled(HStack, {
+  base: {
+    flexWrap: "wrap",
+  },
+});
+
+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-topic" />
+    <ContentTypeBadge contentType="concept" />
+    <ContentTypeBadge contentType="external" />
+    <ContentTypeBadge contentType="image" />
+    <ContentTypeBadge contentType="audio" />
+    <ContentTypeBadge contentType="video" />
+    <ContentTypeBadge contentType="missing" />
+  </StyledHStack>
+);
+
+const StyledContentTypeBadge = styled(ContentTypeBadge, {
+  base: {
+    display: "flex",
+    gap: "4xsmall",
+    alignItems: "center",
+  },
+});
+
+export const ContentOverride: StoryFn<typeof ContentTypeBadge> = () => {
+  const { t } = useTranslation();
+  return (
+    <StyledContentTypeBadge contentType="video">
+      <Video size="small" />
+      {t("contentTypes.video")}
+    </StyledContentTypeBadge>
+  );
+};

package/src/ContentTypeBadge/ContentTypeBadgeNew.tsx

@@ -0,0 +1,69 @@
+/**
+ * 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 { forwardRef } from "react";
+import { useTranslation } from "react-i18next";
+import { Badge, BadgeProps, type BadgeVariant } from "@ndla/primitives";
+import * as contentTypes from "../model/ContentType";
+
+export interface ContentTypeBadgeProps extends Omit<BadgeProps, "colorTheme"> {
+  contentType: ContentType | undefined;
+}
+
+type ContentType =
+  | 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_TOPIC
+  | typeof contentTypes.CONCEPT
+  | typeof contentTypes.EXTERNAL
+  | typeof contentTypes.IMAGE
+  | typeof contentTypes.AUDIO
+  | typeof contentTypes.VIDEO
+  | typeof contentTypes.MISSING
+  // This allows for us to fallback to string without getting a ts error, while still keeping intellisense
+  | (string & {});
+
+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",
+  // TODO: Verify this color
+  [contentTypes.MULTIDISCIPLINARY_TOPIC]: "neutral",
+  [contentTypes.CONCEPT]: "brand1",
+  // TODO: Verify this color
+  [contentTypes.EXTERNAL]: "brand2",
+  // TODO: Verify resourceEmbedTypeMapping colors
+  [contentTypes.IMAGE]: "brand1",
+  [contentTypes.AUDIO]: "brand1",
+  [contentTypes.VIDEO]: "brand1",
+  [contentTypes.MISSING]: "neutral",
+};
+
+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>
+    );
+  },
+);

package/src/Embed/AudioEmbed.tsx

@@ -6,11 +6,11 @@
  *
  */
 
+import { Figure } from "@ndla/primitives";
 import { AudioMetaData } from "@ndla/types-embed";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import { Author } from "./ImageEmbed";
 import AudioPlayer from "../AudioPlayer";
-import { Figure } from "../Figure";
 import { EmbedByline } from "../LicenseByline";
 
 interface Props {
@@ -42,7 +42,7 @@ const AudioEmbed = ({ embed, lang }: Props) => {
   const img = coverPhoto && { url: coverPhoto.url, alt: coverPhoto.altText };
 
   return (
-    <Figure type="full" lang={lang}>
+    <Figure lang={lang}>
       <AudioPlayer
         description={data.podcastMeta?.introduction ?? ""}
         img={img}

package/src/Embed/BrightcoveEmbed.stories.tsx

@@ -155,9 +155,6 @@ const meta: Meta<typeof BrightcoveEmbed> = {
   title: "Embeds/BrightcoveEmbed",
   component: BrightcoveEmbed,
   tags: ["autodocs"],
-  args: {
-    isConcept: false,
-  },
   decorators: [
     (Story) => (
       <OneColumn>

package/src/Embed/BrightcoveEmbed.tsx

@@ -9,28 +9,30 @@
 import parse from "html-react-parser";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
-import { spacing } from "@ndla/core";
+import { Button, Figure } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { BrightcoveEmbedData, BrightcoveMetaData, BrightcoveVideoSource } from "@ndla/types-embed";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import { RenderContext } from "./types";
-import { Figure } from "../Figure";
 import { EmbedByline } from "../LicenseByline";
 
 interface Props {
   embed: BrightcoveMetaData;
-  isConcept?: boolean;
   renderContext?: RenderContext;
 }
 
-const LinkedVideoButton = styled(ButtonV2)`
-  margin-left: ${spacing.small};
-`;
+const LinkedVideoButton = styled(Button, {
+  base: {
+    marginInlineStart: "xsmall",
+  },
+});
 
-const BrightcoveIframe = styled.iframe`
-  height: auto;
-`;
+const BrightcoveIframe = styled("iframe", {
+  base: {
+    height: "auto",
+    width: "100%",
+  },
+});
 
 export const makeIframeString = (url: string, width: string | number, height: string | number, title = "") => {
   const strippedWidth = typeof width === "number" ? width : width.replace(/\s*px/, "");
@@ -52,7 +54,7 @@ const getIframeProps = (data: BrightcoveEmbedData, sources: BrightcoveVideoSourc
     width: source?.width ?? "640",
   };
 };
-const BrightcoveEmbed = ({ embed, isConcept, renderContext = "article" }: Props) => {
+const BrightcoveEmbed = ({ embed, renderContext = "article" }: Props) => {
   const [showOriginalVideo, setShowOriginalVideo] = useState(true);
   const { t } = useTranslation();
   const iframeRef = useRef<HTMLIFrameElement>(null);
@@ -99,7 +101,7 @@ const BrightcoveEmbed = ({ embed, isConcept, renderContext = "article" }: Props)
     : undefined;
 
   return (
-    <Figure type={isConcept ? "full-column" : "full"}>
+    <Figure>
       <div className="brightcove-video">
         <BrightcoveIframe
           ref={iframeRef}
@@ -112,13 +114,9 @@ const BrightcoveEmbed = ({ embed, isConcept, renderContext = "article" }: Props)
         />
       </div>
       <EmbedByline type="video" copyright={data.copyright!} description={parsedDescription} bottomRounded>
+        {/* TODO: Figure out if this button should still be here. If yes, figure out what it should look like. */}
         {!!linkedVideoId && (
-          <LinkedVideoButton
-            variant="outline"
-            shape="pill"
-            size="small"
-            onClick={() => setShowOriginalVideo((p) => !p)}
-          >
+          <LinkedVideoButton size="small" variant="secondary" onClick={() => setShowOriginalVideo((p) => !p)}>
             {t(`figure.button.${!showOriginalVideo ? "original" : "alternative"}`)}
           </LinkedVideoButton>
         )}