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

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>
     ),

package/src/FrontpageArticle/FrontpageArticle.tsx

@@ -79,7 +79,7 @@ export const FrontpageArticle = ({ article, id, isWide, licenseBox, lang }: Prop
         {introduction}
       </Text>
       {content}
-      <ArticleByline accordionHeaderVariant={"white"} licenseBox={licenseBox} displayByline={false} />
+      <ArticleByline licenseBox={licenseBox} displayByline={false} />
     </StyledArticle>
   );
 };

package/src/Layout/LayoutItem.tsx

@@ -6,47 +6,31 @@
  *
  */
 
-/** @jsxImportSource @emotion/react */
-import { HTMLAttributes, ReactNode, useMemo } from "react";
-import { css } from "@emotion/react";
-import { mq, breakpoints } from "@ndla/core";
+import { styled } from "@ndla/styled-system/jsx";
 
-interface Props extends HTMLAttributes<HTMLElement> {
-  children?: ReactNode;
-  layout?: "extend" | "center";
-}
-
-const centerCss = css`
-  position: relative !important;
-  width: 83.333%;
-  right: auto !important;
-  left: 8.333%;
-`;
-
-const extendCss = css`
-  ${mq.range({ from: breakpoints.tablet })} {
-    position: relative !important;
-    width: 83.333%;
-    right: auto !important;
-    left: 8.333%;
-  }
-`;
-
-export const LayoutItem = ({ children, layout, ...rest }: Props) => {
-  const style = useMemo(() => {
-    if (layout === "extend") {
-      return extendCss;
-    } else if (layout === "center") {
-      return centerCss;
-    }
-    return undefined;
-  }, [layout]);
-
-  return (
-    <section css={style} {...rest}>
-      {children}
-    </section>
-  );
-};
+// TODO: Refactor this. This is a copy of our old layout.
+export const LayoutItem = styled("section", {
+  defaultVariants: {
+    layout: "center",
+  },
+  variants: {
+    layout: {
+      center: {
+        position: "relative!",
+        width: "83.333%",
+        right: "auto !important",
+        left: "8.333%",
+      },
+      extend: {
+        tablet: {
+          position: "relative!",
+          width: "83.333%",
+          right: "auto!",
+          left: "8.333%",
+        },
+      },
+    },
+  },
+});
 
 export default LayoutItem;

package/src/Layout/OneColumn.tsx

@@ -6,39 +6,39 @@
  *
  */
 
-/** @jsxImportSource @emotion/react */
-import { ComponentPropsWithoutRef } from "react";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { mq, spacing, breakpoints } from "@ndla/core";
+import { styled } from "@ndla/styled-system/jsx";
 
-interface Props extends ComponentPropsWithoutRef<"div"> {
-  wide?: boolean;
-}
-
-const StyledOneColumn = styled.div`
-  max-width: 1024px;
-  margin-left: auto;
-  margin-right: auto;
-  width: 100%;
-  padding-left: ${spacing.nsmall};
-  padding-right: ${spacing.nsmall};
-
-  ${mq.range({ from: breakpoints.mobileWide })} {
-    padding-left: ${spacing.normal};
-    padding-right: ${spacing.normal};
-  }
-  &::after {
-    content: "" !important;
-    display: block !important;
-    clear: both !important;
-  }
-`;
-
-const wideStyle = css`
-  max-width: 1150px;
-`;
-
-export const OneColumn = ({ wide, ...rest }: Props) => <StyledOneColumn css={wide ? wideStyle : undefined} {...rest} />;
+// TODO: This is a rewrite of our old layout. Refactor this.
+export const OneColumn = styled("div", {
+  base: {
+    marginLeft: "auto",
+    marginRight: "auto",
+    width: "100%",
+    paddingLeft: "18px",
+    paddingRight: "18px",
+    mobileWide: {
+      paddingLeft: "medium",
+      paddingRight: "medium",
+    },
+    _after: {
+      content: '""!',
+      display: "block!",
+      clear: "both!",
+    },
+  },
+  defaultVariants: {
+    wide: false,
+  },
+  variants: {
+    wide: {
+      true: {
+        maxWidth: "1150px",
+      },
+      false: {
+        maxWidth: "1024px",
+      },
+    },
+  },
+});
 
 export default OneColumn;

package/src/Layout/PageContainer.tsx

@@ -6,30 +6,28 @@
  *
  */
 
-/** @jsxImportSource @emotion/react */
-import { ComponentPropsWithoutRef } from "react";
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { colors, mq, breakpoints } from "@ndla/core";
+import { styled } from "@ndla/styled-system/jsx";
 
-interface Props extends ComponentPropsWithoutRef<"div"> {
-  backgroundWide?: boolean;
-}
-
-const StyledPageContainer = styled.div`
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-`;
-
-const backgroundWideStyle = css`
-  ${mq.range({ from: breakpoints.tablet })} {
-    background-color: ${colors.brand.greyLightest};
-  }
-`;
-
-export const PageContainer = ({ backgroundWide = false, ...rest }: Props) => (
-  <StyledPageContainer css={backgroundWide ? backgroundWideStyle : undefined} {...rest} />
-);
+// TODO: Refactor this. It's a rewrite of our old layout.
+export const PageContainer = styled("div", {
+  base: {
+    minHeight: "100vh",
+    display: "flex",
+    flexDirection: "column",
+  },
+  defaultVariants: {
+    backgroundWide: false,
+  },
+  variants: {
+    backgroundWide: {
+      true: {
+        tablet: {
+          backgroundColor: "#f8f8f8",
+        },
+      },
+      false: {},
+    },
+  },
+});
 
 export default PageContainer;

package/src/Messages/index.ts

@@ -6,7 +6,6 @@
  *
  */
 
-import MessageBanner from "./MessageBanner";
 import MessageBox from "./MessageBox";
 
-export { MessageBox, MessageBanner };
+export { MessageBox };