@ndla/ui 56.0.13-alpha.0 → 56.0.15-alpha.0

package/lib/TreeStructure/helperFunctions.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.treestructureId = exports.flattenFolders = void 0;
+exports.flattenFolders = void 0;
 /**
  * Copyright (c) 2022-present, NDLA.
  *
@@ -33,8 +33,4 @@ const flattenFolders = (folders, openFolders) => {
     }, flattenFolders(subfolders, openFolders));
   }, []);
 };
-exports.flattenFolders = flattenFolders;
-const treestructureId = (type, modifier) => {
-  return `${type}-treestructure-${modifier}`;
-};
-exports.treestructureId = treestructureId;
+exports.flattenFolders = flattenFolders;

package/lib/TreeStructure/index.d.ts

@@ -5,6 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import TreeStructure from "./TreeStructure";
 export type { TreeStructureProps } from "./TreeStructure";
-export { TreeStructure };
+export { TreeStructure } from "./TreeStructure";

package/lib/TreeStructure/index.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "TreeStructure", {
   enumerable: true,
   get: function () {
-    return _TreeStructure.default;
+    return _TreeStructure.TreeStructure;
   }
 });
-var _TreeStructure = _interopRequireDefault(require("./TreeStructure"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _TreeStructure = require("./TreeStructure");

package/lib/TreeStructure/types.d.ts

@@ -6,28 +6,10 @@
  *
  */
 import { ReactNode } from "react";
-import { IFolder, IResource } from "@ndla/types-backend/myndla-api";
-export type TreeStructureType = "navigation" | "picker";
-export type OnCreatedFunc = (folder: IFolder | undefined, parentId: string) => void;
-export type NewFolderInputFunc = ({ onClose, parentId, onCreate, }: {
-    onClose: () => void;
+import { IFolder } from "@ndla/types-backend/myndla-api";
+export type OnCreatedFunc = (folder: IFolder | undefined) => void;
+export type NewFolderInputFunc = ({ onCancel, parentId, onCreate, }: {
+    onCancel: () => void;
     parentId: string;
     onCreate: OnCreatedFunc;
 }) => ReactNode;
-export interface CommonTreeStructureProps {
-    loading?: boolean;
-    targetResource?: IResource;
-    type: TreeStructureType;
-}
-export interface CommonFolderItemsProps extends CommonTreeStructureProps {
-    focusedFolder?: IFolder;
-    level: number;
-    maxLevel: number;
-    selectedFolder?: IFolder;
-    onCloseFolder: (id: string) => void;
-    onOpenFolder: (id: string) => void;
-    setFocusedFolder: (folder: IFolder) => void;
-    setSelectedFolder: (folder: IFolder) => void;
-    visibleFolders: IFolder[];
-    closeTree: () => void;
-}

package/lib/index.d.ts

@@ -36,7 +36,6 @@ export { TagSelectorRoot, TagSelectorLabel, TagSelectorItemInput, TagSelectorTri
 export { TreeStructure } from "./TreeStructure";
 export type { TreeStructureProps } from "./TreeStructure";
 export { BlogPostV2 } from "./BlogPost";
-export { ProgrammeCard } from "./ProgrammeCard";
 export { KeyFigure } from "./KeyFigure";
 export { ContactBlock, contactBlockBackgrounds } from "./ContactBlock";
 export type { ContactBlockBackground } from "./ContactBlock";
@@ -44,7 +43,6 @@ export type { HeartButtonType, CanonicalUrlFuncs, RenderContext } from "./Embed"
 export { CampaignBlock } from "./CampaignBlock";
 export { Grid, GridParallaxItem } from "./Grid";
 export type { GridType } from "./Grid";
-export type { ProgrammeV2 } from "./ProgrammeCard";
 export { Gloss, GlossExample } from "./Gloss";
 export { LinkBlock, LinkBlockSection } from "./LinkBlock";
 export type { Article as ArticleType } from "./types";

package/lib/index.js

@@ -375,12 +375,6 @@ Object.defineProperty(exports, "PdfFile", {
     return _FileList.PdfFile;
   }
 });
-Object.defineProperty(exports, "ProgrammeCard", {
-  enumerable: true,
-  get: function () {
-    return _ProgrammeCard.ProgrammeCard;
-  }
-});
 Object.defineProperty(exports, "RelatedArticle", {
   enumerable: true,
   get: function () {
@@ -636,7 +630,6 @@ var _CopyParagraphButton = _interopRequireDefault(require("./CopyParagraphButton
 var _TagSelector = require("./TagSelector/TagSelector");
 var _TreeStructure = require("./TreeStructure");
 var _BlogPost = require("./BlogPost");
-var _ProgrammeCard = require("./ProgrammeCard");
 var _KeyFigure = require("./KeyFigure");
 var _ContactBlock = require("./ContactBlock");
 var _CampaignBlock = require("./CampaignBlock");

package/lib/locale/messages-en.js

@@ -1239,7 +1239,7 @@ const messages = {
       loginTerms: "Log in with Feide to receive access. By logging on your accept your terms of service",
       loginResourcePitch: "Do you want to favorite this resource?",
       loginWelcome: "Welcome to My NDLA!",
-      deleteAccount: "Delete My NDLA",
+      deleteAccount: "Delete profile",
       loginPitch: "Welcome to My NDLA! Here you can save your favourite resources from NDLA, organize them and share them with others. Log in with your Feide account to get started.",
       loginPitchButton: "Log in to My NDLA",
       welcome: "Welcome to my NDLA! You can now save your favourite resources from NDLA and organise them in folders with tags",

package/lib/locale/messages-nb.js

@@ -1232,7 +1232,7 @@ const messages = {
       confirmDeleteAccount: "Er du sikker på at du vil slette kontoen?",
       confirmDeleteAccountButton: "Slett konto",
       myPage: "Min side",
-      deleteAccount: "Slett Min NDLA",
+      deleteAccount: "Slett brukerprofil",
       loginPitch: "Velkommen til Min NDLA! Her kan du lagre favorittressursene dine fra NDLA, organisere dem og dele dem med andre. Logg inn med din Feide-konto for å komme i gang.",
       loginPitchButton: "Logg inn i Min NDLA",
       logout: "Logg ut av Min NDLA",

package/lib/locale/messages-nn.js

@@ -1232,7 +1232,7 @@ const messages = {
       confirmDeleteAccount: "Er du sikker på at du vil slette kontoen?",
       confirmDeleteAccountButton: "Slett konto",
       myPage: "Mi side",
-      deleteAccount: "Slett Min NDLA",
+      deleteAccount: "Slett brukarprofil",
       loginPitch: "Velkommen til Min NDLA! Her kan du lagre favorittressursane dine frå NDLA, organisere dei og dele dei med andre. Logg inn med din Feide-konto for å komme i gang.",
       loginPitchButton: "Logg inn i Min NDLA",
       logout: "Logg ut av Min NDLA",

package/lib/locale/messages-se.js

@@ -1232,7 +1232,7 @@ const messages = {
       confirmDeleteAccount: "Er du sikker på at du vil slette kontoen?",
       confirmDeleteAccountButton: "Slett konto",
       myPage: "Min side",
-      deleteAccount: "Slett Min NDLA",
+      deleteAccount: "Slett brukerprofil",
       loginPitch: "Velkommen til Min NDLA! Her kan du lagre favorittressursene dine fra NDLA, organisere dem og dele dem med andre. Logg inn med din Feide-konto for å komme i gang.",
       loginPitchButton: "Logg inn i Min NDLA",
       logout: "Logg ut av Min NDLA",

package/lib/locale/messages-sma.js

@@ -1232,7 +1232,7 @@ const messages = {
       confirmDeleteAccount: "Er du sikker på at du vil slette kontoen?",
       confirmDeleteAccountButton: "Slett konto",
       myPage: "Min side",
-      deleteAccount: "Slett Min NDLA",
+      deleteAccount: "Slett brukerprofil",
       loginPitch: "Velkommen til Min NDLA! Her kan du lagre favorittressursene dine fra NDLA, organisere dem og dele dem med andre. Logg inn med din Feide-konto for å komme i gang.",
       loginPitchButton: "Logg inn i Min NDLA",
       logout: "Logg ut av Min NDLA",

package/lib/styles.css

@@ -89,6 +89,10 @@
     padding-inline: 8%;
 }
 
+  .w_100\% {
+    width: 100%;
+}
+
   .pbs_xsmall {
     padding-block-start: var(--spacing-xsmall);
 }
@@ -109,10 +113,6 @@
     color: var(--colors-text-default);
 }
 
-  .w_100\% {
-    width: 100%;
-}
-
   .ov-wrap_break-word {
     overflow-wrap: break-word;
 }
@@ -611,6 +611,18 @@
     aspect-ratio: 1/1;
 }
 
+  .max-h_inherit {
+    max-height: inherit;
+}
+
+  .ov_auto {
+    overflow: auto;
+}
+
+  .gap_10px {
+    gap: 10px;
+}
+
   .flex-d_column {
     flex-direction: column;
 }
@@ -1171,6 +1183,14 @@
     text-decoration: underline;
 }
 
+  .\[\&_span\]\:ov_hidden span {
+    overflow: hidden;
+}
+
+  .\[\&_span\]\:tov_ellipsis span {
+    text-overflow: ellipsis;
+}
+
   .after\:content_0::after {
     content: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.13-alpha.0",
+  "version": "56.0.15-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,13 +33,12 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^15.0.9-alpha.0",
     "@ndla/core": "^5.0.2",
-    "@ndla/icons": "^8.0.9-alpha.0",
+    "@ndla/icons": "^8.0.10-alpha.0",
     "@ndla/licenses": "^8.0.1-alpha.0",
-    "@ndla/primitives": "^1.0.12-alpha.0",
-    "@ndla/safelink": "^7.0.12-alpha.0",
-    "@ndla/styled-system": "^0.0.11",
+    "@ndla/primitives": "^1.0.14-alpha.0",
+    "@ndla/safelink": "^7.0.14-alpha.0",
+    "@ndla/styled-system": "^0.0.12",
     "@ndla/util": "^4.1.0",
     "html-react-parser": "^5.1.8",
     "i18next-browser-languagedetector": "^7.1.0"
@@ -54,7 +53,7 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.19",
+    "@ndla/preset-panda": "^0.0.20",
     "@ndla/types-backend": "^0.2.86",
     "@ndla/types-embed": "^5.0.1-alpha.0",
     "@pandacss/dev": "^0.44.0",
@@ -67,5 +66,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "fd50e914af42f70fda68083094768e248c4171a2"
+  "gitHead": "4708656585c922a4b2c2e30b095f88097c29436b"
 }

package/src/Article/Article.tsx

@@ -44,7 +44,10 @@ const paddingBlockStart: SystemStyleObject = {
 export const ArticlePadding = styled(
   ark.div,
   {
-    base: articlePadding,
+    base: {
+      ...articlePadding,
+      width: "100%",
+    },
     variants: {
       padStart: {
         true: paddingBlockStart,

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