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

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/LicenseByline/EmbedByline.tsx

@@ -8,7 +8,7 @@
 
 import { ReactNode, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { WarningOutline } from "@ndla/icons/common";
+import { AlertLine } from "@ndla/icons/common";
 import { getLicenseByAbbreviation, getLicenseCredits } from "@ndla/licenses";
 import { Button, Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
@@ -122,7 +122,7 @@ export const EmbedByline = ({ type, description, children, visibleAlt, ...props
     return (
       <ErrorBylineWrapper>
         <ContentWrapper>
-          <WarningOutline />
+          <AlertLine />
           <BaseDescription>
             <span>{t("embed.embedError", { type: typeString })}</span>
           </BaseDescription>

package/src/LinkBlock/LinkBlock.tsx

@@ -10,7 +10,8 @@ import { format } from "date-fns";
 import { enGB, nb, nn } from "date-fns/locale";
 import parse from "html-react-parser";
 import { useMemo } from "react";
-import { Forward, CalendarEd } from "@ndla/icons/common";
+import { ArrowRightLine } from "@ndla/icons/common";
+import { CalendarLine } from "@ndla/icons/editor";
 import { Heading } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
@@ -63,7 +64,7 @@ const StyledDateContainer = styled("div", {
   },
 });
 
-const StyledCalendarEd = styled(CalendarEd, {
+const StyledCalendarEd = styled(CalendarLine, {
   base: {
     color: "icon.strong",
   },
@@ -94,7 +95,7 @@ const LinkBlock = ({ title, articleLanguage, date, url, path }: Props) => {
           </StyledDateContainer>
         )}
       </InfoWrapper>
-      <Forward data-forward />
+      <ArrowRightLine data-forward />
     </StyledSafeLink>
   );
 };

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/ResourceBox/ResourceBox.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { Launch } from "@ndla/icons/common";
+import { ShareBoxLine } from "@ndla/icons/common";
 import { Heading, Image, Text } from "@ndla/primitives";
 import { SafeLinkButton } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
@@ -93,7 +93,7 @@ export const ResourceBox = ({ image, title, caption, url, buttonText }: Props) =
         <StyledText textStyle="body.medium">{caption}</StyledText>
         <SafeLinkButton to={url} target="_blank" variant="secondary">
           {buttonText}
-          <Launch />
+          <ShareBoxLine />
         </SafeLinkButton>
       </ContentWrapper>
     </Container>

package/src/TagSelector/TagSelector.stories.tsx

@@ -10,9 +10,9 @@ import { useState } from "react";
 import type { ComboboxInputValueChangeDetails } from "@ark-ui/react";
 
 import { Meta, StoryFn } from "@storybook/react";
-import { Cross } from "@ndla/icons/action";
-import { ChevronDown } from "@ndla/icons/common";
-import { Done } from "@ndla/icons/editor";
+import { CloseLine } from "@ndla/icons/action";
+import { ArrowDownShortLine } from "@ndla/icons/common";
+import { CheckLine } from "@ndla/icons/editor";
 import {
   ComboboxContent,
   ComboboxItem,
@@ -82,14 +82,14 @@ export const Default: StoryFn<typeof TagSelectorRoot> = ({ translations, ...args
 
             <TagSelectorClearTrigger asChild>
               <IconButton variant="clear">
-                <Cross />
+                <CloseLine />
               </IconButton>
             </TagSelectorClearTrigger>
           </InputContainer>
         </TagSelectorControl>
         <TagSelectorTrigger asChild>
           <IconButton variant="secondary">
-            <ChevronDown />
+            <ArrowDownShortLine />
           </IconButton>
         </TagSelectorTrigger>
       </HStack>
@@ -99,7 +99,7 @@ export const Default: StoryFn<typeof TagSelectorRoot> = ({ translations, ...args
             <ComboboxItem key={item} item={item}>
               <ComboboxItemText>{item}</ComboboxItemText>
               <ComboboxItemIndicator>
-                <Done />
+                <CheckLine />
               </ComboboxItemIndicator>
             </ComboboxItem>
           ))}

package/src/TagSelector/TagSelector.tsx

@@ -9,7 +9,7 @@
 import { forwardRef, useEffect, useId, useRef } from "react";
 import type { ComboboxCollectionItem } from "@ark-ui/react";
 import { ComboboxContext, useTagsInputContext } from "@ark-ui/react";
-import { Cross } from "@ndla/icons/action";
+import { CloseLine } from "@ndla/icons/action";
 import {
   ComboboxClearTrigger,
   ComboboxControl,
@@ -153,7 +153,7 @@ export const TagSelectorInput = forwardRef<HTMLInputElement, TagSelectorInputPro
           <TagsInputItemPreview>
             <TagsInputItemText>{value}</TagsInputItemText>
             <TagsInputItemDeleteTrigger>
-              <Cross />
+              <CloseLine />
             </TagsInputItemDeleteTrigger>
           </TagsInputItemPreview>
           <TagsInputItemInput />

package/src/TreeStructure/AddFolderButton.tsx

@@ -10,7 +10,7 @@ import { useRef } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
 import { ButtonV2 as Button } from "@ndla/button";
-import { Plus } from "@ndla/icons/action";
+import { AddLine } from "@ndla/icons/action";
 import { IFolder } from "@ndla/types-backend/myndla-api";
 
 interface AddFolderButtonProps {
@@ -28,7 +28,7 @@ const StyledAddFolderButton = styled(Button)`
   }
 `;
 
-const StyledPlus = styled(Plus)`
+const StyledPlus = styled(AddLine)`
   height: 24px;
   width: 24px;
 `;

package/src/TreeStructure/ComboboxButton.tsx

@@ -10,7 +10,7 @@ import { KeyboardEvent, forwardRef } from "react";
 import styled from "@emotion/styled";
 import { ButtonV2 as Button, IconButtonV2 as IconButton } from "@ndla/button";
 import { breakpoints, colors, mq, spacing } from "@ndla/core";
-import { ChevronUp, ChevronDown } from "@ndla/icons/common";
+import { ArrowUpShortLine, ArrowDownShortLine } from "@ndla/icons/common";
 import { IFolder } from "@ndla/types-backend/myndla-api";
 import { useForwardedRef } from "@ndla/util";
 import { arrowNavigation } from "./arrowNavigation";
@@ -162,7 +162,7 @@ const ComboboxButton = forwardRef<HTMLButtonElement, Props>(
             onToggleTree(!showTree);
           }}
         >
-          {showTree ? <ChevronUp /> : <ChevronDown />}
+          {showTree ? <ArrowUpShortLine /> : <ArrowDownShortLine />}
         </IconButton>
       </StyledRow>
     );

package/src/TreeStructure/FolderItem.tsx

@@ -11,9 +11,9 @@ import { useTranslation } from "react-i18next";
 import styled from "@emotion/styled";
 import { ButtonV2 as Button } from "@ndla/button";
 import { colors, spacing, animations, misc, fonts } from "@ndla/core";
-import { ArrowDropDownRounded } from "@ndla/icons/common";
-import { FolderOutlined, FolderShared } from "@ndla/icons/contentType";
-import { Done } from "@ndla/icons/editor";
+import { ArrowDownShortLine } from "@ndla/icons/common";
+import { FolderUserFill } from "@ndla/icons/contentType";
+import { CheckLine, FolderLine } from "@ndla/icons/editor";
 import { SafeLink } from "@ndla/safelink";
 import { IFolder } from "@ndla/types-backend/myndla-api";
 import { arrowNavigation } from "./arrowNavigation";
@@ -103,7 +103,7 @@ const FolderName = styled(Button)`
   }
 `;
 
-const StyledDone = styled(Done)`
+const StyledCheck = styled(CheckLine)`
   color: ${colors.support.green};
 `;
 
@@ -202,7 +202,7 @@ const FolderItem = ({
   const isMaxDepth = level > maxLevel;
   const hideArrow = isMaxDepth || emptyFolder;
 
-  const FolderIcon = folder.status === "shared" ? FolderShared : FolderOutlined;
+  const FolderIcon = folder.status === "shared" ? FolderUserFill : FolderLine;
 
   const tabable = selected || focused || (!focusedFolder && !folder.parentId && index === 0);
 
@@ -244,7 +244,7 @@ const FolderItem = ({
           }
         }}
       >
-        <ArrowDropDownRounded />
+        <ArrowDownShortLine />
       </OpenButton>
       <StyledName>{name}</StyledName>
     </FolderNameLink>
@@ -286,7 +286,7 @@ const FolderItem = ({
             }
           }}
         >
-          <ArrowDropDownRounded />
+          <ArrowDownShortLine />
         </OpenButton>
         <FolderIconWrapper>
           <FolderIcon />
@@ -294,7 +294,7 @@ const FolderItem = ({
       </IconWrapper>
       <StyledName>{name}</StyledName>
       {containsResource && (
-        <StyledDone
+        <StyledCheck
           aria-label={t("myNdla.alreadyInFolder")}
           id={`alreadyAdded-${folder.id}`}
           title={t("myNdla.alreadyInFolder")}