@ndla/ui 56.0.14-alpha.0 → 56.0.16-alpha.0

package/src/Article/Article.tsx

@@ -10,78 +10,16 @@ import { ComponentPropsWithRef, ReactNode, forwardRef } from "react";
 import { ark, type HTMLArkProps } from "@ark-ui/react";
 import { Heading, Text } from "@ndla/primitives";
 import { cx } from "@ndla/styled-system/css";
-import { styled } from "@ndla/styled-system/jsx";
-import { JsxStyleProps, StyledVariantProps, SystemStyleObject } from "@ndla/styled-system/types";
+import { Stack, styled } from "@ndla/styled-system/jsx";
+import { JsxStyleProps } from "@ndla/styled-system/types";
 import { ArticleByline } from "./ArticleByline";
 import { ContentTypeBadgeNew } from "..";
 import { ContentType } from "../ContentTypeBadge/ContentTypeBadgeNew";
 import { Article as ArticleType } from "../types";
 
-const articlePadding: SystemStyleObject = {
-  paddingInline: "8%",
-};
-
-const paddingBlockEnd: SystemStyleObject = {
-  paddingBlockEnd: "xsmall",
-  tablet: {
-    paddingBlockEnd: "medium",
-  },
-  desktop: {
-    paddingBlockEnd: "xxlarge",
-  },
-};
-
-const paddingBlockStart: SystemStyleObject = {
-  paddingBlockStart: "xsmall",
-  tablet: {
-    paddingBlockStart: "medium",
-  },
-  desktop: {
-    paddingBlockStart: "xxlarge",
-  },
-};
+const StyledArticleContent = styled(ark.section, {}, { baseComponent: true });
 
-export const ArticlePadding = styled(
-  ark.div,
-  {
-    base: {
-      ...articlePadding,
-      width: "100%",
-    },
-    variants: {
-      padStart: {
-        true: paddingBlockStart,
-      },
-      padEnd: {
-        true: paddingBlockEnd,
-      },
-    },
-  },
-  { baseComponent: true },
-);
-
-const StyledArticleContent = styled(
-  ark.section,
-  {
-    base: {
-      background: "surface.default",
-    },
-    variants: {
-      padded: {
-        true: {
-          ...articlePadding,
-          ...paddingBlockStart,
-          ...paddingBlockEnd,
-        },
-      },
-    },
-  },
-  { baseComponent: true },
-);
-
-type ArticleContentVariantProps = StyledVariantProps<typeof StyledArticleContent>;
-
-export const ArticleContent = forwardRef<HTMLElement, HTMLArkProps<"div"> & JsxStyleProps & ArticleContentVariantProps>(
+export const ArticleContent = forwardRef<HTMLElement, HTMLArkProps<"div"> & JsxStyleProps>(
   ({ className, ...props }, ref) => (
     <StyledArticleContent className={cx("ndla-article", className)} {...props} ref={ref} />
   ),
@@ -91,8 +29,10 @@ const StyledArticleWrapper = styled(
   ark.article,
   {
     base: {
+      background: "background.default",
       display: "flex",
       flexDirection: "column",
+      gap: "xxlarge",
       color: "text.default",
       alignItems: "center",
       width: "100%",
@@ -123,7 +63,6 @@ export const ArticleHGroup = styled(
       width: "100%",
       flexDirection: "column",
       alignItems: "flex-start",
-      gap: "xsmall",
       "& h1": {
         overflowWrap: "anywhere",
       },
@@ -132,42 +71,16 @@ export const ArticleHGroup = styled(
   { baseComponent: true },
 );
 
-export const ArticleActionWrapper = styled(
-  ark.div,
-  {
-    base: {
-      position: "absolute",
-      right: "8%",
-      top: "xsmall",
-      tablet: {
-        top: "medium",
-      },
-      desktop: {
-        top: "xxlarge",
-      },
-    },
-  },
-  { baseComponent: true },
-);
-
 export const ArticleHeader = styled(
   ark.header,
   {
     base: {
       display: "flex",
       flexDirection: "column",
-      background: "surface.default",
       gap: "medium",
       alignItems: "flex-start",
       width: "100%",
-    },
-    variants: {
-      padded: {
-        true: {
-          ...articlePadding,
-          ...paddingBlockStart,
-        },
-      },
+      paddingBlockStart: "xxlarge",
     },
   },
   { baseComponent: true },
@@ -179,22 +92,22 @@ export const ArticleFooter = styled(
     base: {
       display: "flex",
       flexDirection: "column",
-      background: "surface.default",
       gap: "xxlarge",
       width: "100%",
-    },
-    variants: {
-      padded: {
-        true: {
-          ...articlePadding,
-          ...paddingBlockEnd,
-        },
+      "& > :is(:last-child)": {
+        paddingBlockEnd: "5xlarge",
       },
     },
   },
   { baseComponent: true },
 );
 
+const StyledStack = styled(Stack, {
+  base: {
+    width: "100%",
+  },
+});
+
 interface ArticleTitleProps {
   heartButton?: ReactNode;
   contentType?: ContentType;
@@ -215,10 +128,12 @@ export const ArticleTitle = ({
   competenceGoals,
 }: ArticleTitleProps) => {
   return (
-    <ArticleHeader padded>
+    <ArticleHeader>
       <ArticleHGroup>
-        {!!contentType && <ContentTypeBadgeNew contentType={contentType} />}
-        {!!heartButton && <ArticleActionWrapper>{heartButton}</ArticleActionWrapper>}
+        <StyledStack justify="space-between" align="center" direction="row" gap="small">
+          {!!contentType && <ContentTypeBadgeNew contentType={contentType} />}
+          {heartButton}
+        </StyledStack>
         <Heading textStyle="heading.large" id={id} lang={lang}>
           {title}
         </Heading>
@@ -270,8 +185,8 @@ export const Article = ({
         competenceGoals={competenceGoals}
         lang={lang}
       />
-      <ArticleContent padded>{content}</ArticleContent>
-      <ArticleFooter padded>
+      <ArticleContent>{content}</ArticleContent>
+      <ArticleFooter>
         <ArticleByline
           footnotes={footNotes}
           authors={authors}

package/src/Article/index.ts

@@ -12,10 +12,8 @@ export {
   ArticleHeader,
   ArticleFooter,
   ArticleTitle,
-  ArticleActionWrapper,
   ArticleHGroup,
   ArticleContent,
-  ArticlePadding,
 } from "./Article";
 
 export { ArticleByline, ArticleBylineAccordionItem } from "./ArticleByline";

package/src/CampaignBlock/CampaignBlock.tsx

@@ -36,7 +36,9 @@ interface Props {
 
 const Container = styled("div", {
   base: {
+    width: "100%",
     display: "flex",
+    gap: "medium",
     flexDirection: "column",
     border: "1px solid",
     borderColor: "stroke.default",
@@ -59,17 +61,33 @@ const LinkText = styled(Text, {
     _hover: {
       textDecoration: "none",
     },
+    paddingBlock: "xsmall",
+    fontWeight: "bold",
+  },
+});
+
+const LinkHeader = styled(Text, {
+  base: {
+    display: "flex",
+    textDecoration: "underline",
+    _hover: {
+      textDecoration: "none",
+    },
   },
 });
+
 const StyledImg = styled("img", {
   base: {
     alignSelf: "center",
     objectFit: "cover",
     width: "100%",
     height: "215px",
-    desktop: {
+    mobileWide: {
       height: "340px",
     },
+    tabletWide: {
+      width: "auto",
+    },
   },
 });
 
@@ -79,13 +97,26 @@ const ContentWrapper = styled("div", {
     position: "relative",
     display: "flex",
     flexDirection: "column",
-    gap: "xsmall",
+    gap: "medium",
     alignItems: "flex-start",
+    justifyContent: "center",
     paddingBlock: "medium",
     paddingInline: "medium",
   },
 });
 
+const StyledText = styled(Text, {
+  base: {
+    tabletWide: {
+      display: "block",
+      overflow: "hidden",
+      position: "relative",
+      lineClamp: 4,
+      boxOrient: "vertical",
+    },
+  },
+});
+
 interface MaybeLinkTextProps {
   url?: string;
   path?: string;
@@ -114,7 +145,7 @@ const CampaignBlock = ({
   className,
 }: Props) => {
   const imageComponent = image && <StyledImg src={`${image.src}?width=455`} height={340} width={455} alt={image.alt} />;
-  const HeaderComponent = url?.url ? LinkText : Text;
+  const HeaderComponent = url?.url ? LinkHeader : Text;
   return (
     <Container className={className} data-embed-type="campaign-block">
       {imageSide === "left" && imageComponent}
@@ -124,7 +155,7 @@ const CampaignBlock = ({
             <InternalHeading>{parse(title)}</InternalHeading>
           </HeaderComponent>
         </MaybeLinkText>
-        <Text textStyle="body.large">{parse(description)}</Text>
+        <StyledText textStyle="body.xlarge">{parse(description)}</StyledText>
         {!!url?.url && (
           <MaybeLinkText url={url.url} path={path}>
             <LinkText textStyle="body.medium">

package/src/ContentTypeBadge/ContentTypeBadge.tsx

@@ -17,6 +17,8 @@ import { styled } from "@ndla/styled-system/jsx";
 
 import * as contentTypes from "../model/ContentType";
 
+// TODO: Remove this component
+
 interface Props extends ComponentPropsWithoutRef<"div"> {
   size?: "xx-small" | "x-small" | "small" | "large";
   type: string;

package/src/TreeStructure/TreeStructure.stories.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023-present, NDLA.
+ * 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.
@@ -7,42 +7,34 @@
  */
 
 import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
-import { isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
 import { Meta, StoryFn } from "@storybook/react";
-import { IconButtonV2 } from "@ndla/button";
-import { spacing } from "@ndla/core";
-import { Spinner } from "@ndla/icons";
 import { CloseLine } from "@ndla/icons/action";
 import { CheckLine } from "@ndla/icons/editor";
-import { FieldErrorMessage, FieldLabel, FieldRoot, InputContainer, FieldHelper, FieldInput } from "@ndla/primitives";
+import {
+  FieldErrorMessage,
+  FieldInput,
+  FieldLabel,
+  FieldRoot,
+  FieldHelper,
+  IconButton,
+  InputContainer,
+  Spinner,
+} from "@ndla/primitives";
+import { HStack, styled } from "@ndla/styled-system/jsx";
 import { IFolder } from "@ndla/types-backend/myndla-api";
-import { uuid } from "@ndla/util";
 import { flattenFolders } from "./helperFunctions";
-import TreeStructure, { TreeStructureProps } from "./TreeStructure";
+import { TreeStructure, TreeStructureProps } from "./TreeStructure";
 
-const MY_FOLDERS_ID = "folders";
-
-const Container = styled.div`
-  display: flex;
-  margin-top: 40px;
-  max-width: 600px;
-  &[data-type="picker"] {
-    height: 250px;
-  }
-`;
-
-const Row = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${spacing.xxsmall};
-  padding-right: ${spacing.xsmall};
-`;
+const Container = styled("div", {
+  base: {
+    display: "flex",
+    maxWidth: "surface.large",
+    maxHeight: "surface.small",
+  },
+});
 
-const StyledSpinner = styled(Spinner)`
-  margin: ${spacing.small};
-`;
+const MY_FOLDERS_ID = "folders";
 
 const targetResource: TreeStructureProps["targetResource"] = {
   id: "test-resource",
@@ -147,7 +139,6 @@ export default {
     targetResource: targetResource,
     label: "Velg mappe",
     maxLevel: 5,
-    type: "picker",
     // eslint-disable-next-line no-console
     onSelectFolder: console.log,
   },
@@ -157,25 +148,19 @@ export default {
 } as Meta<typeof TreeStructure>;
 
 export const Default: StoryFn<typeof TreeStructure> = ({ ...args }) => {
-  const [structure, setStructure] = useState<IFolder[]>(
-    args.type === "picker" ? FOLDER_TREE_STRUCTURE : STRUCTURE_EXAMPLE,
-  );
-
-  useEffect(() => {
-    setStructure(args.type === "picker" ? FOLDER_TREE_STRUCTURE : STRUCTURE_EXAMPLE);
-  }, [args.type]);
+  const [structure, setStructure] = useState<IFolder[]>(FOLDER_TREE_STRUCTURE);
 
   return (
-    <Container data-type={args.type}>
+    <Container>
       <TreeStructure
         {...args}
         folders={structure}
-        newFolderInput={({ parentId, onClose, onCreate }) => (
+        newFolderInput={({ parentId, onCancel, onCreate }) => (
           <NewFolder
             structure={structure}
             setStructure={setStructure}
             parentId={parentId}
-            onClose={onClose}
+            onCancel={onCancel}
             onCreate={onCreate}
           />
         )}
@@ -188,8 +173,8 @@ interface NewFolderProps {
   parentId: string;
   structure: IFolder[];
   setStructure: Dispatch<SetStateAction<IFolder[]>>;
-  onClose?: () => void;
-  onCreate?: (folder: IFolder, parentId: string) => void;
+  onCancel?: () => void;
+  onCreate?: (folder: IFolder) => void;
 }
 
 const generateNewFolder = (name: string, id: string, breadcrumbs: { id: string; name: string }[]): IFolder => ({
@@ -203,7 +188,7 @@ const generateNewFolder = (name: string, id: string, breadcrumbs: { id: string;
   updated: "2023-03-03T08:40:23.444Z",
 });
 
-const NewFolder = ({ parentId, onClose, structure, setStructure, onCreate }: NewFolderProps) => {
+const NewFolder = ({ parentId, onCancel, structure, setStructure, onCreate }: NewFolderProps) => {
   const [name, setName] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
@@ -212,12 +197,6 @@ const NewFolder = ({ parentId, onClose, structure, setStructure, onCreate }: New
 
   const inputRef = useRef<HTMLInputElement | null>(null);
 
-  useEffect(() => {
-    if (isMobile) {
-      inputRef.current?.scrollIntoView({ behavior: "smooth" });
-    }
-  }, []);
-
   const onSave = async () => {
     if (error) {
       return;
@@ -230,7 +209,7 @@ const NewFolder = ({ parentId, onClose, structure, setStructure, onCreate }: New
     setLoading(false);
     const flattenedStructure = flattenFolders(structure);
     const targetFolder = flattenedStructure.find((folder) => folder.id === parentId);
-    const newFolderId = uuid();
+    const newFolderId = (flattenedStructure.length + 1).toString();
     const newFolder = generateNewFolder(name, newFolderId, targetFolder?.breadcrumbs ?? []);
     if (targetFolder) {
       setStructure((oldStructure) => {
@@ -240,8 +219,7 @@ const NewFolder = ({ parentId, onClose, structure, setStructure, onCreate }: New
     } else {
       setStructure((old) => [newFolder].concat(old));
     }
-    onCreate?.(newFolder, parentId);
-    onClose?.();
+    onCreate?.(newFolder);
   };
 
   useEffect(() => {
@@ -273,39 +251,31 @@ const NewFolder = ({ parentId, onClose, structure, setStructure, onCreate }: New
           onKeyDown={(e) => {
             if (e.key === "Escape") {
               e.preventDefault();
-              onClose?.();
+              onCancel?.();
             } else if (e.key === "Enter") {
               e.preventDefault();
               onSave();
             }
           }}
         />
-        <Row>
+        <HStack gap="3xsmall">
           {!loading ? (
             <>
               {!error && (
-                <IconButtonV2
-                  variant={"ghost"}
-                  colorTheme="light"
-                  tabIndex={0}
-                  aria-label={t("save")}
-                  title={t("save")}
-                  size="small"
-                  onClick={onSave}
-                >
+                <IconButton variant="tertiary" aria-label={t("save")} title={t("save")} onClick={onSave}>
                   <CheckLine />
-                </IconButtonV2>
+                </IconButton>
               )}
-              <IconButtonV2 aria-label={t("close")} title={t("close")} size="small" variant="ghost" onClick={onClose}>
+              <IconButton aria-label={t("close")} title={t("close")} variant="tertiary" onClick={onCancel}>
                 <CloseLine />
-              </IconButtonV2>
+              </IconButton>
             </>
           ) : (
             <FieldHelper>
-              <StyledSpinner size="normal" aria-label={t("loading")} />
+              <Spinner size="small" aria-label={t("loading")} />
             </FieldHelper>
           )}
-        </Row>
+        </HStack>
       </InputContainer>
     </FieldRoot>
   );