@ndla/ui 56.0.3-alpha.0 → 56.0.4-alpha.0

package/src/FileList/FileList.tsx

@@ -6,49 +6,43 @@
  *
  */
 
-import { ComponentProps, ReactNode } from "react";
+import { ComponentPropsWithoutRef } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { colors, fonts, spacing } from "@ndla/core";
-import { Heading } from "@ndla/typography";
-interface Props extends ComponentProps<"section"> {
-  children: ReactNode;
-  headingButtons?: ReactNode;
-}
+import { Heading } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 
-const FileListSection = styled.section`
-  margin: ${spacing.large} 0;
-  padding: 0 0 ${spacing.normal} ${spacing.normal};
-  border-left: 2px solid ${colors.brand.greyLightest};
-  font-family: ${fonts.sans};
-`;
+interface Props extends ComponentPropsWithoutRef<"div"> {}
 
-const FileListHeaderWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin: 0 0 ${spacing.xsmall} 0;
-  padding-bottom: ${spacing.xsmall};
-  border-bottom: 2px solid ${colors.brand.greyLight};
-`;
+export const FileListWrapper = styled("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "xsmall",
+  },
+});
 
-const FilesList = styled.ul`
-  padding: 0;
-`;
+export const FileListItem = styled("li", {
+  base: {
+    background: "surface.infoSubtle",
+    borderBlockEnd: "1px solid",
+    borderColor: "stroke.default",
+    display: "flex",
+    justifyContent: "space-between",
 
-const FileList = ({ children, headingButtons, ...rest }: Props) => {
+    _hover: {
+      backgroundColor: "surface.infoSubtle.hover",
+    },
+  },
+});
+
+export const FileListEmbed = ({ children, ...rest }: Props) => {
   const { t } = useTranslation();
   return (
-    <FileListSection {...rest}>
-      <FileListHeaderWrapper>
-        <Heading element="h3" headingStyle="list-title" margin="none">
-          {t("files")}
-        </Heading>
-        <div>{headingButtons}</div>
-      </FileListHeaderWrapper>
-      <FilesList>{children}</FilesList>
-    </FileListSection>
+    <FileListWrapper {...rest} data-embed-type="file-list">
+      <Heading fontWeight="bold" textStyle="heading.small" asChild consumeCss>
+        <h3>{t("files")}</h3>
+      </Heading>
+      <ul>{children}</ul>
+    </FileListWrapper>
   );
 };
-
-export default FileList;

package/src/FileList/PdfFile.tsx

@@ -28,15 +28,15 @@ const StyledFigure = styled(Figure, {
   },
 });
 
-const PdfFile = ({ title, url }: Props) => {
+export const PdfFile = ({ title, url }: Props) => {
   return (
-    <StyledFigure>
-      <Heading asChild consumeCss textStyle="title.medium">
-        <h4>{title}</h4>
-      </Heading>
-      <StyledIframe title={title} height="1050" src={url} />
-    </StyledFigure>
+    <li>
+      <StyledFigure>
+        <Heading asChild consumeCss textStyle="title.medium">
+          <h4>{title}</h4>
+        </Heading>
+        <StyledIframe title={title} height="1050" src={url} />
+      </StyledFigure>
+    </li>
   );
 };
-
-export default PdfFile;

package/src/FileList/index.ts

@@ -6,10 +6,6 @@
  *
  */
 
-import FileList from "./FileList";
-
-export { default as File } from "./File";
-export { default as PdfFile } from "./PdfFile";
-export { default as Format } from "./Format";
-
-export default FileList;
+export { FileListEmbed, FileListItem } from "./FileList";
+export { File, FileListElement } from "./File";
+export { PdfFile } from "./PdfFile";

package/src/Grid/Grid.stories.tsx

@@ -6,52 +6,51 @@
  *
  */
 
-import styled from "@emotion/styled";
-import { DocsContainer, DocsContainerProps } from "@storybook/addon-docs";
 import { Meta, StoryFn } from "@storybook/react";
-import { colors } from "@ndla/core";
-import Grid from "./Grid";
+import { ArticleContent, ArticleWrapper, OneColumn } from "@ndla/ui";
+import { Grid } from "./Grid";
 import { BlogPostStory } from "../BlogPost/BlogPost.stories";
-import { KeyFigureStory } from "../KeyFigure/KeyFigure.stories";
-
-const GridWrapper = styled.div`
-  .docs-story {
-    background-color: ${colors.background.lightBlue};
-  }
-`;
-
-const GridDocsContainer = ({ ...props }: DocsContainerProps) => (
-  <GridWrapper>
-    <DocsContainer {...props} />
-  </GridWrapper>
-);
+import { Plain } from "../KeyFigure/KeyFigure.stories";
 
 export default {
   title: "Components/Grid",
   component: Grid,
   tags: ["autodocs"],
   parameters: {
-    layout: "centered",
-    docs: {
-      container: GridDocsContainer,
-    },
+    inlineStories: true,
+    layout: "fullscreen",
   },
   args: {
-    columns: "2",
+    columns: "3",
     border: "none",
-    background: "white",
+    background: "gray",
   },
+  decorators: [
+    (Story) => (
+      <OneColumn wide>
+        <ArticleWrapper>
+          <ArticleContent>
+            <Story />
+          </ArticleContent>
+        </ArticleWrapper>
+      </OneColumn>
+    ),
+  ],
 } as Meta<typeof Grid>;
 
+const keyFigureArgs = [
+  { title: "22 000+", subtitle: "Tilgjengelige ressurser" },
+  { title: "149", subtitle: "Eksamensfag" },
+  { title: "500", subtitle: "Tverrfaglige ressurser" },
+  { title: "0", subtitle: "Dårlige ideer" },
+];
+
 export const GridKeyPerformanceStory: StoryFn<typeof Grid> = ({ ...args }) => {
   const columns = args.columns === "2x2" ? 4 : parseInt(args.columns);
-  const items = new Array(columns).fill(
-    <KeyFigureStory
-      title={KeyFigureStory.args?.title!}
-      subtitle={KeyFigureStory.args?.subtitle!}
-      image={KeyFigureStory.args?.image!}
-    />,
-  );
+  const items = new Array(columns).fill(0).map((_, idx) => {
+    const args = keyFigureArgs[idx % keyFigureArgs.length];
+    return <Plain key={idx} {...args} />;
+  });
   return <Grid {...args}>{items}</Grid>;
 };
 
@@ -61,7 +60,7 @@ export const GridBlogPostStory: StoryFn<typeof Grid> = ({ ...args }) => {
     <BlogPostStory
       metaImage={BlogPostStory.args?.metaImage!}
       title={BlogPostStory.args?.title!}
-      size={BlogPostStory.args?.size}
+      size={"normal"}
       headingLevel={BlogPostStory.args?.headingLevel}
       url={BlogPostStory.args?.url!}
       author={BlogPostStory.args?.author}

package/src/Grid/Grid.tsx

@@ -6,103 +6,75 @@
  *
  */
 
-import { HTMLAttributes, ReactNode } from "react";
-import styled from "@emotion/styled";
-import { breakpoints, colors, misc, mq, spacing } from "@ndla/core";
+import { ReactNode } from "react";
+import { styled } from "@ndla/styled-system/jsx";
+
+const GridContainer = styled("div", {
+  base: {
+    display: "grid",
+    justifyContent: "center",
+    borderRadius: "xsmall",
+    padding: "xsmall",
+    gridRowGap: "large",
+    gridColumnGap: "medium",
+    width: "100%",
+    backgroundColor: "background.subtle",
+    maxWidth: "surface.4xlarge",
+    minWidth: "surface.xxsmall",
+    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+    tabletDown: {
+      gridTemplateColumns: "repeat(1, minmax(0, 1fr))",
+    },
+    tabletToDesktop: {
+      gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+      "& > div:nth-child(3):last-child": {
+        display: "flex",
+        flexFlow: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        gridColumn: "span 2",
+      },
+    },
+  },
+  variants: {
+    columns: {
+      "2": {},
+      "2x2": {},
+      "3": { desktop: { gridTemplateColumns: "repeat(3, minmax(0, 1fr))" } },
+      "4": { desktop: { gridTemplateColumns: "repeat(4, minmax(0, 1fr))" } },
+    },
+    background: {
+      white: { backgroundColor: "surface.default" },
+      transparent: { backgroundColor: "transparent" },
+      gray: { backgroundColor: "background.subtle" },
+    },
+    border: {
+      lightBlue: {
+        border: "1px solid",
+        borderColor: "surface.brand.2",
+      },
+    },
+  },
+});
 
 export interface GridProps {
-  columns: "2" | "4" | "2x2";
+  columns: "2" | "3" | "4" | "2x2";
   border?: "none" | "lightBlue";
-  background?: "transparent" | "white";
-  size?: boolean;
+  background?: "transparent" | "white" | "gray";
   children?: ReactNode[];
 }
 
-const GridContainer = styled.div`
-  display: grid;
-  justify-content: center;
-  border-radius: ${misc.borderRadius};
-  grid-template-columns: 1fr;
-  grid-gap: ${spacing.normal};
-  padding: ${spacing.normal};
-  margin-bottom: ${spacing.normal};
-  clear: both;
-
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    &[data-columns="2x2"],
-    &[data-columns="3"],
-    &[data-columns="4"] {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-
-  ${mq.range({ until: breakpoints.desktop })} {
-    > div:nth-child(3):last-child {
-      display: flex;
-      flex-flow: column;
-      justify-content: center;
-      align-items: center;
-      grid-column: span 2;
-    }
-  }
-
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-
-    &[data-columns="3"] {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-
-    &[data-columns="4"] {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-  }
-
-  &[data-frontpage="true"] {
-    grid-gap: ${spacing.large};
-  }
-
-  &[data-border="lightBlue"] {
-    border: 1px solid ${colors.brand.lighter};
-  }
-  &[data-background="white"] {
-    background-color: ${colors.white};
-  }
-
-  p {
-    word-break: break-word;
-    margin-top: 0px;
-  }
-`;
-
-const Grid = ({ columns, border, children, background, size, ...rest }: GridProps) => {
+export const Grid = ({ columns, border, children, background = "gray" }: GridProps) => {
   const amountOfColumns = children?.length === 3 ? "3" : columns;
 
   return (
     <GridContainer
-      data-frontpage={size}
-      data-border={border}
-      data-columns={amountOfColumns}
-      data-background={background}
-      {...rest}
+      data-embed-type="grid"
+      border={border === "none" ? undefined : border}
+      columns={amountOfColumns}
+      background={background}
     >
       {children}
     </GridContainer>
   );
 };
-
-const StyledGridParallaxItem = styled.div`
-  position: relative;
-  > div {
-    top: var(--masthead-height, 0px);
-    position: sticky;
-  }
-`;
-
-export const GridParallaxItem = ({ children, ...rest }: HTMLAttributes<HTMLDivElement>) => (
-  <StyledGridParallaxItem {...rest}>
-    <div>{children}</div>
-  </StyledGridParallaxItem>
-);
-
-export default Grid;

package/src/Grid/GridParallaxItem.tsx

@@ -0,0 +1,26 @@
+/**
+ * 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 { HTMLAttributes } from "react";
+import { styled } from "@ndla/styled-system/jsx";
+
+const StyledGridParallaxItem = styled("div", {
+  base: {
+    position: "relative",
+    "& > div": {
+      top: "var(--masthead-height, 0px)",
+      position: "sticky",
+    },
+  },
+});
+
+export const GridParallaxItem = ({ children, ...rest }: HTMLAttributes<HTMLDivElement>) => (
+  <StyledGridParallaxItem {...rest} data-embed-type="grid-parallax">
+    <div>{children}</div>
+  </StyledGridParallaxItem>
+);

package/src/Grid/index.ts

@@ -6,5 +6,7 @@
  *
  */
 
-export { default as Grid, GridParallaxItem } from "./Grid";
+export { Grid } from "./Grid";
+export { GridParallaxItem } from "./GridParallaxItem";
+
 export type { GridProps as GridType } from "./Grid";

package/src/KeyFigure/KeyFigure.stories.tsx

@@ -6,15 +6,12 @@
  *
  */
 
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import KeyFigure from "./KeyFigure";
+
 const args = {
-  title: "<i>500</i>",
-  subtitle: `<span lang="nn">TVERRFAGLEGE</span> RESSURSER`,
-  image: {
-    alt: "Nøkkeltall tverrfaglig",
-    src: "https://api.test.ndla.no/image-api/raw/wMowCjRg.svg",
-  },
+  title: "22 000+",
+  subtitle: "Tilgjengelige ressurser",
 };
 
 export default {
@@ -24,12 +21,22 @@ export default {
   parameters: {
     layout: "centered",
   },
-  args: args,
+  args,
 } as Meta<typeof KeyFigure>;
 
-export const KeyFigureStory: StoryFn<typeof KeyFigure> = ({ ...args }) => {
+export const Plain: StoryFn<typeof KeyFigure> = ({ ...args }) => {
   return <KeyFigure {...args} />;
 };
 
-KeyFigureStory.args = args;
-KeyFigureStory.storyName = "Key figures";
+export const WithImageAndHTML: StoryObj<typeof KeyFigure> = {
+  args: {
+    title: "<i>500</i>",
+    subtitle: `<span lang="nn">TVERRFAGLEGE</span> RESSURSER`,
+    image: {
+      alt: "Nøkkeltall tverrfaglig",
+      src: "https://api.test.ndla.no/image-api/raw/wMowCjRg.svg",
+    },
+  },
+};
+
+Plain.args = args;

package/src/KeyFigure/KeyFigure.tsx

@@ -7,51 +7,37 @@
  */
 
 import parse from "html-react-parser";
-import styled from "@emotion/styled";
-import { breakpoints, colors, fonts, mq, spacing } from "@ndla/core";
-
-const ContentWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: ${spacing.small};
-  align-items: center;
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    padding: ${spacing.xsmall} ${spacing.nsmall};
-  }
-`;
-
-const StyledImage = styled.img`
-  height: 150px;
-  width: 150px;
-`;
-
-const TitleWrapper = styled.div`
-  color: ${colors.text.primary};
-  font-family: ${fonts.sans};
-  font-weight: ${fonts.weight.bold};
-  overflow-wrap: break-word;
-  ${fonts.sizes("38px", "48px")};
-  text-align: center;
-
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    ${fonts.sizes("30px", "36px")};
-  }
-`;
-
-const SubTitleWrapper = styled.div`
-  overflow-wrap: "break-word";
-  text-align: center;
-  ${fonts.sizes("18px", "29px")};
-  color: ${colors.text.primary};
-  font-weight: ${fonts.weight.normal};
-  font-family: ${fonts.sans};
-
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    padding-top: ${spacing.xxsmall};
-  }
-`;
+import { styled } from "@ndla/styled-system/jsx";
+
+const ContentWrapper = styled("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
+
+const StyledImage = styled("img", {
+  base: {
+    height: "surface.3xsmall",
+    width: "surface.3xsmall",
+  },
+});
+
+const TitleWrapper = styled("div", {
+  base: {
+    textStyle: "heading.large",
+    textAlign: "center",
+  },
+});
+
+const SubTitleWrapper = styled("div", {
+  base: {
+    textStyle: "title.medium",
+    textAlign: "center",
+  },
+});
 
 interface Props {
   image?: {
@@ -64,8 +50,8 @@ interface Props {
 
 const KeyFigure = ({ image, title, subtitle }: Props) => {
   return (
-    <ContentWrapper>
-      <StyledImage src={`${image?.src}?width=150`} width={150} height={150} alt={image?.alt} />
+    <ContentWrapper data-embed-type="key-figure">
+      {image && <StyledImage src={`${image?.src}?width=150`} width={150} height={150} alt={image?.alt} />}
       <TitleWrapper>{parse(title)}</TitleWrapper>
       <SubTitleWrapper>{parse(subtitle)}</SubTitleWrapper>
     </ContentWrapper>

package/src/LinkBlock/LinkBlockSection.tsx

@@ -24,7 +24,7 @@ const StyledList = styled("ul", {
 
 const LinkBlockSection = ({ children, ...rest }: Props) => {
   return (
-    <nav {...rest}>
+    <nav {...rest} data-embed-type="link-block-list">
       <StyledList>
         {Children.map(children, (child) => (
           <li>{child}</li>

package/src/RelatedArticleList/RelatedArticleList.tsx

@@ -86,7 +86,7 @@ const StyledSection = styled("section", {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    gap: "xsmall",
+    gap: "medium",
   },
 });
 

package/src/index.ts

@@ -52,19 +52,13 @@ export { default as RelatedArticleList, RelatedArticle } from "./RelatedArticleL
 
 export { ErrorResourceAccessDenied, default as ErrorMessage } from "./ErrorMessage";
 
-export { default as FileList, File, PdfFile, Format } from "./FileList";
+export { FileListEmbed, File, PdfFile, FileListItem, FileListElement } from "./FileList";
 
 export { default as FactBox } from "./FactBox";
 
 export type { ContentTypeHeroProps } from "./ContentTypeHero";
 export { ContentTypeHero } from "./ContentTypeHero";
 
-export { FooterBlock } from "./Footer";
-
-export { default as resourceTypeColor } from "./utils/resourceTypeColor";
-
-export { MessageBox } from "./Messages";
-
 export { ResourceBox } from "./ResourceBox";
 
 export { default as AudioPlayer } from "./AudioPlayer";