@ndla/ui 55.0.16-alpha.0 → 55.0.17-alpha.0

package/src/ContentTypeBadge/ContentTypeBadge.tsx

@@ -6,12 +6,9 @@
  *
  */
 
-/** @jsxImportSource @emotion/react */
-import { CSSProperties, ComponentProps, useMemo } from "react";
+import { CSSProperties, ComponentPropsWithoutRef, useMemo } from "react";
 
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { breakpoints, colors, mq } from "@ndla/core";
+import { colors } from "@ndla/core";
 import { Minus, MenuBook } from "@ndla/icons/action";
 import { Audio } from "@ndla/icons/common";
 import {
@@ -24,12 +21,12 @@ import {
   SubjectMaterial,
   TasksAndActivities,
 } from "@ndla/icons/contentType";
-
 import { Concept, Media, Video } from "@ndla/icons/editor";
+import { styled } from "@ndla/styled-system/jsx";
 
 import * as contentTypes from "../model/ContentType";
 
-interface Props extends ComponentProps<"div"> {
+interface Props extends ComponentPropsWithoutRef<"div"> {
   size?: "xx-small" | "x-small" | "small" | "large";
   type: string;
   title?: string;
@@ -38,62 +35,74 @@ interface Props extends ComponentProps<"div"> {
   className?: string;
 }
 
-const sizes = {
-  "xx-small": css`
-    width: 20px;
-    height: 20px;
-    border: 1px solid;
-    svg {
-      width: 10px;
-      height: 10x;
-    }
-  `,
-  "x-small": css`
-    width: 20px;
-    height: 20px;
-    border: 1px solid;
-    ${mq.range({ from: breakpoints.tablet })} {
-      height: 26px;
-      width: 26px;
-    }
-    svg {
-      width: 10px;
-      height: 10x;
-      ${mq.range({ from: breakpoints.tablet })} {
-        width: 12px;
-        height: 12px;
-      }
-    }
-  `,
-  small: "",
-  large: css`
-    width: 50px;
-    height: 50px;
-    svg {
-      width: 25px;
-      height: 25px;
-    }
-  `,
-} as const;
-
-const BaseContentTypeBadge = styled.div`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 100%;
-  width: 34px;
-  height: 34px;
-  color: var(--icon-color);
-`;
-
-const borderStyle = css`
-  border: 2px solid;
-  border-color: var(--icon-color);
-`;
-
-const backgroundStyle = css`
-  background-color: var(--background-color);
-`;
+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)",
+      },
+    },
+  },
+});
 
 const iconMap = {
   [contentTypes.SUBJECT_MATERIAL]: {
@@ -185,21 +194,12 @@ export const ContentTypeBadge = ({
     return { Icon: fromMap.icon, style };
   }, [type]);
 
-  const cssStyles = useMemo(() => {
-    const styles = [sizes[size]];
-    if (background) {
-      styles.push(backgroundStyle);
-    }
-    if (border) {
-      styles.push(borderStyle);
-    }
-    return styles;
-  }, [background, border, size]);
-
   return (
-    <BaseContentTypeBadge
-      css={cssStyles}
+    <StyledContentTypeBadge
       title={title}
+      background={background}
+      size={size}
+      border={border}
       style={style}
       aria-label={title}
       className={className}
@@ -208,7 +208,7 @@ export const ContentTypeBadge = ({
       {...rest}
     >
       <Icon />
-    </BaseContentTypeBadge>
+    </StyledContentTypeBadge>
   );
 };
 

package/src/ContentTypeHero/ContentTypeHero.stories.tsx

@@ -0,0 +1,76 @@
+/**
+ * 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, StoryFn } from "@storybook/react";
+import { HeroBackground, HeroContent, Text } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { ContentTypeHero } from "./ContentTypeHero";
+import { OneColumn } from "../Layout";
+
+/**
+ * A thin wrapper around the `Hero` component that automatically assigns a variant based on the provided content type
+ */
+export default {
+  title: "Components/ContentTypeHero",
+  component: ContentTypeHero,
+  tags: ["autodocs"],
+  parameters: {
+    inlineStories: true,
+    layout: "fullscreen",
+  },
+  args: {
+    contentType: "audio",
+  },
+} as Meta<typeof ContentTypeHero>;
+
+export const HeroStory: StoryFn<typeof ContentTypeHero> = ({ ...args }) => (
+  <ContentTypeHero {...args}>
+    <HeroBackground />
+    <OneColumn>
+      <HeroContent>Hello</HeroContent>
+
+      <styled.div css={{ background: "surface.default", padding: "medium" }}>
+        <Text>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut orci a lectus pellentesque porta. Integer
+          tellus nunc, lobortis non enim quis, interdum porttitor orci. Suspendisse sit amet sapien at dolor venenatis
+          malesuada ut ac turpis. Quisque bibendum ultrices urna, nec sodales dui feugiat vel. Proin dapibus dolor ut
+          metus dignissim euismod. Aliquam erat volutpat. Donec vestibulum lectus a accumsan aliquet. Maecenas suscipit
+          urna vel neque viverra, sit amet viverra orci fermentum. Pellentesque ac lacus malesuada, imperdiet nisi et,
+          scelerisque nulla. Phasellus commodo justo et purus fermentum, eu vulputate mauris auctor.
+        </Text>
+        <Text>
+          Nunc sodales placerat ex ac accumsan. Phasellus a mollis lorem. Maecenas in dictum nisl, ut auctor massa. Sed
+          vitae ipsum eget mi sodales tristique non sed est. Praesent nec hendrerit massa. In egestas venenatis
+          pharetra. Vivamus rutrum magna vel elit malesuada imperdiet. Nunc cursus, metus a tempor auctor, ante nunc
+          ornare mauris, ut blandit eros lacus ut massa. Ut eu velit at arcu vestibulum commodo. Pellentesque ac quam
+          facilisis, scelerisque augue fermentum, commodo magna. Ut mauris est, fermentum sit amet pretium a, tempor
+          mattis dolor. In vitae finibus nibh. In sit amet vestibulum quam. Etiam sed venenatis eros. Fusce massa
+          tellus, pharetra ut dui a, vulputate suscipit felis. Phasellus id velit at purus tristique lobortis.
+        </Text>
+        <Text>
+          Duis non tempus tortor, non aliquet turpis. Sed aliquet et tellus non viverra. Nam luctus eros orci, porttitor
+          sollicitudin neque placerat sed. Quisque laoreet lorem et augue commodo, nec maximus justo dapibus. Nullam
+          condimentum ex leo. Morbi rhoncus tortor quis ex volutpat, id aliquam arcu eleifend. Interdum et malesuada
+          fames ac ante ipsum primis in faucibus. Pellentesque neque justo, rhoncus a nisi in, pretium dapibus felis. Ut
+          convallis est et dui placerat, vitae ultricies eros gravida.
+        </Text>
+        <Text>
+          In metus ex, iaculis ac feugiat eget, dignissim in augue. Proin nec ultricies nisi, id elementum ex. Aenean id
+          massa quis turpis cursus vulputate. Nam eget turpis iaculis, molestie libero vel, commodo purus. Phasellus
+          luctus ipsum in libero venenatis, quis auctor justo fringilla. Donec vel mauris non justo feugiat sodales in
+          in orci. Vestibulum fringilla consequat erat. Interdum et malesuada fames ac ante ipsum primis in faucibus.
+          Morbi condimentum, justo a dictum venenatis, ante libero gravida enim, et blandit tellus urna ac purus. Nunc
+          sed orci sit amet lorem malesuada tincidunt. Duis non dictum leo. Suspendisse eget dui vel risus dictum
+          faucibus ac ut mauris. Fusce facilisis at erat a dignissim.
+        </Text>
+      </styled.div>
+    </OneColumn>
+  </ContentTypeHero>
+);
+
+HeroStory.storyName = "Hero";

package/src/ContentTypeHero/ContentTypeHero.tsx

@@ -0,0 +1,55 @@
+/**
+ * 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 { Hero, HeroProps, HeroVariant } from "@ndla/primitives";
+import { ContentType } from "../ContentTypeBadge/ContentTypeBadgeNew";
+import * as contentTypes from "../model/ContentType";
+
+// TODO: Figure out what to do with frontpage articles. If anything...
+// Also, verify all of these colors.
+export const contentTypeToHeroMap: Record<ContentType, HeroVariant> = {
+  [contentTypes.SUBJECT_MATERIAL]: "primary",
+  [contentTypes.TASKS_AND_ACTIVITIES]: "brand2Strong",
+  [contentTypes.ASSESSMENT_RESOURCES]: "brand2",
+  // This will never happen
+  [contentTypes.SUBJECT]: "primary",
+  [contentTypes.SOURCE_MATERIAL]: "brand1",
+  // This will never happen
+  [contentTypes.LEARNING_PATH]: "primary",
+  // TODO: This needs a color
+  [contentTypes.TOPIC]: "neutral",
+  // TODO: This is just taken from thin air.
+  [contentTypes.MULTIDISCIPLINARY_TOPIC]: "brand4",
+  [contentTypes.CONCEPT]: "brand1Subtle",
+  // TODO: No clue what this'll be. Maybe unused?
+  [contentTypes.EXTERNAL]: "primary",
+  [contentTypes.IMAGE]: "primary",
+  [contentTypes.AUDIO]: "primary",
+  [contentTypes.PODCAST]: "primary",
+  [contentTypes.VIDEO]: "primary",
+  [contentTypes.MISSING]: "neutral",
+};
+
+export interface ContentTypeHeroProps extends HeroProps {
+  contentType: ContentType | undefined;
+}
+
+export const ContentTypeHero = forwardRef<HTMLDivElement, ContentTypeHeroProps>(
+  ({ contentType, children, ...props }, ref) => {
+    return (
+      <Hero
+        variant={contentTypeToHeroMap[contentType ?? "missing"] ?? contentTypeToHeroMap["missing"]}
+        {...props}
+        ref={ref}
+      >
+        {children}
+      </Hero>
+    );
+  },
+);

package/src/ContentTypeHero/index.ts

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ *
+ */
+
+export { ContentTypeHero } from "./ContentTypeHero";
+export type { ContentTypeHeroProps } from "./ContentTypeHero";

package/src/CopyParagraphButton/CopyParagraphButton.tsx

@@ -16,6 +16,12 @@ import { copyTextToClipboard } from "@ndla/util";
 
 const ContainerDiv = styled.div`
   position: relative;
+  &:hover {
+    [data-copy-button] {
+      opacity: 1;
+      cursor: pointer;
+    }
+  }
 `;
 const IconButton = styled.button`
   position: absolute;
@@ -33,8 +39,9 @@ const IconButton = styled.button`
     height: 30px;
   }
 
-  ${ContainerDiv}:hover &,
-  &:focus, &:focus-visible, &:active {
+  &:focus,
+  &:focus-visible,
+  &:active {
     cursor: pointer;
     opacity: 1;
   }
@@ -71,7 +78,7 @@ const CopyParagraphButton = ({ children, copyText, lang }: Props) => {
   return (
     <ContainerDiv>
       <Tooltip tooltip={tooltip}>
-        <IconButton onClick={onCopyClick} aria-label={`${tooltip}: ${copyText}`}>
+        <IconButton data-copy-button="" onClick={onCopyClick} aria-label={`${tooltip}: ${copyText}`}>
           <Link />
         </IconButton>
       </Tooltip>

package/src/Embed/AudioEmbed.stories.tsx

@@ -9,8 +9,8 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { AudioEmbedData, AudioMeta } from "@ndla/types-embed";
 import AudioEmbed from "./AudioEmbed";
-import { ArticleWrapper } from "../Article";
-import LayoutItem, { OneColumn } from "../Layout";
+import { ArticleContent, ArticleWrapper } from "../Article";
+import { OneColumn } from "../Layout";
 
 const embedData: AudioEmbedData = {
   resource: "audio",
@@ -188,12 +188,10 @@ const meta: Meta<typeof AudioEmbed> = {
   decorators: [
     (Story) => (
       <OneColumn>
-        <ArticleWrapper modifier="clean">
-          <LayoutItem layout="center">
-            <section>
-              <Story />
-            </section>
-          </LayoutItem>
+        <ArticleWrapper>
+          <ArticleContent>
+            <Story />
+          </ArticleContent>
         </ArticleWrapper>
       </OneColumn>
     ),

package/src/Embed/BrightcoveEmbed.stories.tsx

@@ -9,8 +9,8 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { BrightcoveData, BrightcoveEmbedData, BrightcoveMetaData } from "@ndla/types-embed";
 import BrightcoveEmbed from "./BrightcoveEmbed";
-import { ArticleWrapper } from "../Article";
-import LayoutItem, { OneColumn } from "../Layout";
+import { ArticleContent, ArticleWrapper } from "../Article";
+import { OneColumn } from "../Layout";
 
 const embedData: BrightcoveEmbedData = {
   resource: "brightcove",
@@ -158,12 +158,10 @@ const meta: Meta<typeof BrightcoveEmbed> = {
   decorators: [
     (Story) => (
       <OneColumn>
-        <ArticleWrapper modifier="clean">
-          <LayoutItem layout="center">
-            <section>
-              <Story />
-            </section>
-          </LayoutItem>
+        <ArticleWrapper>
+          <ArticleContent>
+            <Story />
+          </ArticleContent>
         </ArticleWrapper>
       </OneColumn>
     ),

package/src/Embed/ConceptEmbed.stories.tsx

@@ -9,8 +9,8 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { ConceptData, ConceptEmbedData } from "@ndla/types-embed";
 import { ConceptEmbed } from "./ConceptEmbed";
-import { ArticleWrapper } from "../Article";
-import LayoutItem, { OneColumn } from "../Layout";
+import { ArticleContent, ArticleWrapper } from "../Article";
+import { OneColumn } from "../Layout";
 
 const blockEmbedData: ConceptEmbedData = {
   contentId: "35",
@@ -150,12 +150,10 @@ const meta: Meta<typeof ConceptEmbed> = {
   decorators: [
     (Story) => (
       <OneColumn>
-        <ArticleWrapper modifier="clean">
-          <LayoutItem layout="center">
-            <section>
-              <Story />
-            </section>
-          </LayoutItem>
+        <ArticleWrapper>
+          <ArticleContent>
+            <Story />
+          </ArticleContent>
         </ArticleWrapper>
       </OneColumn>
     ),

package/src/Embed/ExternalEmbed.stories.tsx

@@ -9,8 +9,8 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { OembedEmbedData, OembedData } from "@ndla/types-embed";
 import ExternalEmbed from "./ExternalEmbed";
-import { ArticleWrapper } from "../Article";
-import LayoutItem, { OneColumn } from "../Layout";
+import { ArticleWrapper, ArticleContent } from "../Article";
+import { OneColumn } from "../Layout";
 
 const embedData: OembedEmbedData = {
   resource: "external",
@@ -56,12 +56,12 @@ const meta: Meta<typeof ExternalEmbed> = {
   decorators: [
     (Story) => (
       <OneColumn>
-        <ArticleWrapper modifier="clean">
-          <LayoutItem layout="center">
+        <ArticleWrapper>
+          <ArticleContent>
             <section>
               <Story />
             </section>
-          </LayoutItem>
+          </ArticleContent>
         </ArticleWrapper>
       </OneColumn>
     ),

package/src/Embed/H5pEmbed.stories.tsx

@@ -9,8 +9,8 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { H5pEmbedData, H5pData } from "@ndla/types-embed";
 import H5pEmbed from "./H5pEmbed";
-import { ArticleWrapper } from "../Article";
-import LayoutItem, { OneColumn } from "../Layout";
+import { ArticleWrapper, ArticleContent } from "../Article";
+import { OneColumn } from "../Layout";
 
 const embedData: H5pEmbedData = {
   resource: "h5p",
@@ -53,12 +53,10 @@ const meta: Meta<typeof H5pEmbed> = {
   decorators: [
     (Story) => (
       <OneColumn>
-        <ArticleWrapper modifier="clean">
-          <LayoutItem layout="center">
-            <section>
-              <Story />
-            </section>
-          </LayoutItem>
+        <ArticleWrapper>
+          <ArticleContent>
+            <Story />
+          </ArticleContent>
         </ArticleWrapper>
       </OneColumn>
     ),

package/src/Embed/IframeEmbed.stories.tsx

@@ -9,8 +9,8 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { IframeData, IframeEmbedData } from "@ndla/types-embed";
 import IframeEmbed from "./IframeEmbed";
-import { ArticleWrapper } from "../Article";
-import LayoutItem, { OneColumn } from "../Layout";
+import { ArticleWrapper, ArticleContent } from "../Article";
+import { OneColumn } from "../Layout";
 
 const embedData: IframeEmbedData = {
   width: "708px",
@@ -28,12 +28,10 @@ const meta: Meta<typeof IframeEmbed> = {
   decorators: [
     (Story) => (
       <OneColumn>
-        <ArticleWrapper modifier="clean">
-          <LayoutItem layout="center">
-            <section>
-              <Story />
-            </section>
-          </LayoutItem>
+        <ArticleWrapper>
+          <ArticleContent>
+            <Story />
+          </ArticleContent>
         </ArticleWrapper>
       </OneColumn>
     ),

package/src/Embed/ImageEmbed.stories.tsx

@@ -14,9 +14,9 @@ import { styled } from "@ndla/styled-system/jsx";
 import { IImageMetaInformationV3 } from "@ndla/types-backend/image-api";
 import { ImageEmbedData } from "@ndla/types-embed";
 import ImageEmbed from "./ImageEmbed";
-import { ArticleWrapper } from "../Article";
+import { ArticleWrapper, ArticleContent } from "../Article";
 import { Grid } from "../Grid";
-import LayoutItem, { OneColumn } from "../Layout";
+import { OneColumn } from "../Layout";
 
 const embedData: ImageEmbedData = {
   resource: "image",
@@ -98,12 +98,10 @@ const meta: Meta<typeof ImageEmbed> = {
   decorators: [
     (Story) => (
       <OneColumn>
-        <ArticleWrapper modifier="clean">
-          <LayoutItem layout="center">
-            <section>
-              <Story />
-            </section>
-          </LayoutItem>
+        <ArticleWrapper>
+          <ArticleContent>
+            <Story />
+          </ArticleContent>
         </ArticleWrapper>
       </OneColumn>
     ),

package/src/Embed/RelatedContentEmbed.stories.tsx

@@ -9,8 +9,8 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { RelatedContentMetaData } from "@ndla/types-embed";
 import RelatedContentEmbed from "./RelatedContentEmbed";
-import { ArticleWrapper } from "../Article";
-import LayoutItem, { OneColumn } from "../Layout";
+import { ArticleWrapper, ArticleContent } from "../Article";
+import { OneColumn } from "../Layout";
 import RelatedArticleList from "../RelatedArticleList";
 
 const filmResourceMeta: RelatedContentMetaData = {
@@ -368,12 +368,10 @@ const meta: Meta<typeof RelatedContentEmbed> = {
   decorators: [
     (Story) => (
       <OneColumn>
-        <ArticleWrapper modifier="clean">
-          <LayoutItem layout="center">
-            <section>
-              <Story />
-            </section>
-          </LayoutItem>
+        <ArticleWrapper>
+          <ArticleContent>
+            <Story />
+          </ArticleContent>
         </ArticleWrapper>
       </OneColumn>
     ),

package/src/Embed/UuDisclaimerEmbed.stories.tsx

@@ -12,10 +12,10 @@ import { UuDisclaimerEmbedData } from "@ndla/types-embed";
 import H5pEmbed from "./H5pEmbed";
 import IframeEmbed from "./IframeEmbed";
 import UuDisclaimerEmbed from "./UuDisclaimerEmbed";
-import { ArticleWrapper } from "../Article";
+import { ArticleWrapper, ArticleContent } from "../Article";
 import CopyParagraphButton from "../CopyParagraphButton";
 import FactBox from "../FactBox";
-import LayoutItem, { OneColumn } from "../Layout";
+import { OneColumn } from "../Layout";
 
 const embedData: UuDisclaimerEmbedData = {
   resource: "uu-disclaimer",
@@ -30,12 +30,10 @@ const meta: Meta<typeof UuDisclaimerEmbed> = {
   decorators: [
     (Story) => (
       <OneColumn>
-        <ArticleWrapper modifier="clean">
-          <LayoutItem layout="center">
-            <section>
-              <Story />
-            </section>
-          </LayoutItem>
+        <ArticleWrapper>
+          <ArticleContent>
+            <Story />
+          </ArticleContent>
         </ArticleWrapper>
       </OneColumn>
     ),