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

package/src/FileList/File.tsx

@@ -6,17 +6,23 @@
  *
  */
 
+import { ComponentPropsWithRef, forwardRef } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { breakpoints, colors, mq, spacing } from "@ndla/core";
-import Format from "./Format";
+import { DownloadLine } from "@ndla/icons/common";
+import { Text } from "@ndla/primitives";
+import { SafeLink } from "@ndla/safelink";
+import { HStack, styled } from "@ndla/styled-system/jsx";
+import { linkOverlay } from "@ndla/styled-system/patterns";
+import { FileListItem } from ".";
 
-interface Props {
+export interface FileProps extends ComponentPropsWithRef<"div"> {
   title: string;
   url: string;
   fileExists: boolean;
   fileType: string;
+  fileSize?: string;
 }
+
 export interface FileType {
   title: string;
   formats: FileFormat[];
@@ -29,27 +35,56 @@ export interface FileFormat {
   tooltip: string;
 }
 
-const StyledFileItem = styled.li`
-  background: ${colors.brand.greyLighter};
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  margin-bottom: ${spacing.xsmall};
-  padding: ${spacing.small};
-  ${mq.range({ from: breakpoints.tablet })} {
-    padding: ${spacing.small} ${spacing.normal};
-  }
-`;
-
-const File = ({ title, url, fileExists, fileType }: Props) => {
-  const { t } = useTranslation();
-  const tooltip = `${t("download")} ${url.split("/").pop()}`;
-
-  return (
-    <StyledFileItem>
-      <Format format={{ url, fileType, tooltip }} isPrimary title={title} isDeadLink={!fileExists} />
-    </StyledFileItem>
-  );
-};
-
-export default File;
+const StyledSafeLink = styled(SafeLink, {
+  base: {
+    textUnderlineOffset: "2px",
+    textDecoration: "underline",
+    _hover: {
+      textDecoration: "none",
+    },
+  },
+});
+
+const StyledHStack = styled(HStack, {
+  base: {
+    position: "relative",
+    paddingBlock: "small",
+    paddingInlineEnd: "medium",
+    paddingInlineStart: "small",
+    width: "100%",
+  },
+});
+
+export const File = forwardRef<HTMLDivElement, FileProps>(
+  ({ title, url, fileExists, fileType, fileSize, ...rest }, ref) => {
+    const { t } = useTranslation();
+    const tooltip = `${t("download")} ${url.split("/").pop()}`;
+
+    return (
+      <StyledHStack justify="space-between" ref={ref} {...rest}>
+        <HStack gap="xxsmall">
+          <DownloadLine />
+          {fileExists ? (
+            <StyledSafeLink unstyled css={linkOverlay.raw()} to={url} title={tooltip}>
+              {title}
+            </StyledSafeLink>
+          ) : (
+            <Text textStyle="label.medium">{title}</Text>
+          )}
+          <Text textStyle="label.large" asChild consumeCss>
+            <span>({fileType?.toUpperCase()})</span>
+          </Text>
+        </HStack>
+        <Text textStyle="label.large" asChild consumeCss>
+          <span>{fileSize}</span>
+        </Text>
+      </StyledHStack>
+    );
+  },
+);
+
+export const FileListElement = ({ title, url, fileExists, fileType, fileSize }: FileProps) => (
+  <FileListItem>
+    <File title={title} url={url} fileExists={fileExists} fileType={fileType} fileSize={fileSize} />
+  </FileListItem>
+);

package/src/FileList/FileList.stories.tsx

@@ -6,10 +6,14 @@
  *
  */
 
-import { Meta, StoryObj } from "@storybook/react";
-import File from "./File";
-import FileList from "./FileList";
-import PdfFile from "./PdfFile";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { Pencil } from "@ndla/icons/action";
+import { DeleteForever, DragVertical } from "@ndla/icons/editor";
+import { IconButton } from "@ndla/primitives";
+import { HStack, styled } from "@ndla/styled-system/jsx";
+import { File } from "./File";
+import { FileListEmbed, FileListItem } from "./FileList";
+import { PdfFile } from "./PdfFile";
 
 export default {
   title: "Components/FileList",
@@ -25,27 +29,132 @@ export default {
     fileType: "pdf",
   },
   render: (args) => (
-    <FileList>
+    <ul>
       <File {...args} />
-    </FileList>
+    </ul>
   ),
 } as Meta<typeof File>;
 
+export const FileListStory: StoryFn<typeof File> = (args) => (
+  <ul>
+    <FileListItem>
+      <File {...args} />
+    </FileListItem>
+    <FileListItem>
+      <File {...args} />
+    </FileListItem>
+    <FileListItem>
+      <File {...args} />
+    </FileListItem>
+  </ul>
+);
+
 export const FileNotFound: StoryObj<typeof File> = {
   args: { fileExists: false },
+  render: (args) => (
+    <ul>
+      <FileListItem>
+        <File {...args} />
+      </FileListItem>
+    </ul>
+  ),
 };
 
 export const SeveralFiles: StoryObj<typeof File> = {
   render: () => (
-    <FileList>
-      <File title="Fil 1" url="https://ndla.no/1" fileExists fileType="mp4" />
-      <File title="Fil 2" url="https://ndla.no/2" fileExists={false} fileType="png" />
+    <FileListEmbed>
+      <FileListItem>
+        <File title="Fil 1" url="https://ndla.no/1" fileExists fileType="mp4" fileSize="100 mb" />
+      </FileListItem>
+      <FileListItem>
+        <File title="Fil 2" url="https://ndla.no/2" fileExists={false} fileType="png" fileSize="100 mb" />
+      </FileListItem>
+      <FileListItem>
+        <File title="Fil 3" url="https://ndla.no/3" fileExists fileType="docx" fileSize="100 mb" />
+      </FileListItem>
+      <FileListItem>
+        <File title="Fil 4" url="https://ndla.no/4" fileExists fileType="docx" fileSize="100 mb" />
+      </FileListItem>
+    </FileListEmbed>
+  ),
+};
+
+export const DifferentFiles: StoryObj<typeof File> = {
+  render: () => (
+    <FileListEmbed>
+      <FileListItem>
+        <File title="Fil 1" url="https://ndla.no/1" fileExists fileType="mp4" fileSize="100 mb" />
+      </FileListItem>
       <PdfFile
         title="Fil 3"
         url="https://api.test.ndla.no/files/131789/krypteringsaktivitet_-_til_fiendegruppe_bm.pdf"
       />
-      <File title="Fil 3" url="https://ndla.no/3" fileExists fileType="docx" />
-      <File title="Fil 4" url="https://ndla.no/4" fileExists fileType="docx" />
-    </FileList>
+      <FileListItem>
+        <File title="Fil 3" url="https://ndla.no/3" fileExists fileType="docx" fileSize="100 mb" />
+      </FileListItem>
+    </FileListEmbed>
+  ),
+};
+
+export const NoHeader: StoryObj<typeof File> = {
+  render: () => (
+    <ul>
+      <FileListItem>
+        <File title="Fil 1" url="https://ndla.no/1" fileExists fileType="mp4" fileSize="100 mb" />
+      </FileListItem>
+      <FileListItem>
+        <File title="Fil 1" url="https://ndla.no/1" fileExists fileType="mp4" fileSize="100 mb" />
+      </FileListItem>
+    </ul>
+  ),
+};
+
+export const FilesWithButtons: StoryObj<typeof File> = {
+  render: () => (
+    <ul>
+      <FileListItem>
+        <File title="Fil 1" url="https://ndla.no/1" fileExists fileType="mp4" fileSize="100 mb" />
+        <HStack>
+          <IconButton variant="clear">
+            <Pencil />
+          </IconButton>
+          <IconButton variant="clear">
+            <DeleteForever />
+          </IconButton>
+        </HStack>
+      </FileListItem>
+      <FileListItem>
+        <File title="Fil 1" url="https://ndla.no/1" fileExists fileType="mp4" fileSize="100 mb" />
+        <HStack>
+          <IconButton variant="clear">
+            <Pencil />
+          </IconButton>
+          <IconButton variant="clear">
+            <DeleteForever />
+          </IconButton>
+        </HStack>
+      </FileListItem>
+    </ul>
+  ),
+};
+
+const StyledFileListItem = styled(FileListItem, {
+  base: {
+    paddingInlineStart: "xxsmall",
+    display: "flex",
+    gap: "xxsmall",
+  },
+});
+
+export const FilesWithDragHandle: StoryObj<typeof File> = {
+  render: () => (
+    <ul>
+      <StyledFileListItem>
+        <IconButton variant="clear">
+          <DragVertical />
+        </IconButton>
+        <File title="Fil 1" url="https://ndla.no/1" fileExists fileType="mp4" fileSize="100 mb" />
+      </StyledFileListItem>
+    </ul>
   ),
 };

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";