@ndla/ui 25.3.0 → 26.1.0

package/lib/TreeStructure/types.d.ts

@@ -10,7 +10,9 @@ import { IFolder, IResource } from '@ndla/types-learningpath-api';
 import { MenuItemProps } from '@ndla/button';
 export interface FolderType extends IFolder {
     icon?: ReactNode;
+    isNavigation?: boolean;
 }
+export declare type TreeStructureType = 'normal' | 'navigation' | 'picker';
 export interface TreeStructureMenuProps extends Omit<MenuItemProps, 'onClick'> {
     onClick: (e: MouseEvent<HTMLDivElement> | undefined, folder: FolderType) => void;
 }
@@ -18,13 +20,14 @@ export interface CommonTreeStructureProps {
     loading?: boolean;
     onSelectFolder?: (id: string) => void;
     openOnFolderClick?: boolean;
-    menuItems?: TreeStructureMenuProps[];
     targetResource?: IResource;
     framed?: boolean;
+    type: TreeStructureType;
 }
 export interface CommonFolderItemsProps extends CommonTreeStructureProps {
     focusedFolderId?: string;
     level: number;
+    maxLevel: number;
     selectedFolder?: FolderType;
     onCloseFolder: (id: string) => void;
     onOpenFolder: (id: string) => void;

package/lib/locale/messages-en.d.ts

@@ -67,6 +67,7 @@ declare const messages: {
             edit: string;
             missingName: string;
             folderDeleted: string;
+            folderCreated: string;
         };
         tags: string;
         tags_plural: string;
@@ -169,6 +170,8 @@ declare const messages: {
             edit: string;
             delete: string;
         };
+        hideFolders: string;
+        showFolders: string;
         createFolder: string;
         maxFoldersAlreadyAdded: string;
         newFolder: {

package/lib/locale/messages-en.js

@@ -33,6 +33,8 @@ var messages = _objectSpread(_objectSpread({
       edit: 'Edit foldername',
       "delete": 'Delete'
     },
+    hideFolders: 'Hide all folders',
+    showFolders: 'Show all folders',
     createFolder: 'Create folder',
     maxFoldersAlreadyAdded: 'Maximum subfolders reached',
     newFolder: {
@@ -954,7 +956,8 @@ var messages = _objectSpread(_objectSpread({
       "delete": 'Delete folder',
       edit: 'Edit folder',
       missingName: 'Folder name required',
-      folderDeleted: '"{{folderName}}" deleted'
+      folderDeleted: '"{{folderName}}" deleted',
+      folderCreated: '"{{folderName}} created'
     },
     tags: '{{count}} tag',
     tags_plural: '{{count}} tags',

package/lib/locale/messages-nb.d.ts

@@ -67,6 +67,7 @@ declare const messages: {
             edit: string;
             missingName: string;
             folderDeleted: string;
+            folderCreated: string;
         };
         tags: string;
         tags_plural: string;
@@ -169,6 +170,8 @@ declare const messages: {
             edit: string;
             delete: string;
         };
+        hideFolders: string;
+        showFolders: string;
         createFolder: string;
         maxFoldersAlreadyAdded: string;
         newFolder: {

package/lib/locale/messages-nb.js

@@ -33,6 +33,8 @@ var messages = _objectSpread(_objectSpread({
       edit: 'Endre mappenavn',
       "delete": 'Slett'
     },
+    hideFolders: 'Skjul alle mapper',
+    showFolders: 'Vis alle mapper',
     createFolder: 'Lag mappe',
     maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {
@@ -954,7 +956,8 @@ var messages = _objectSpread(_objectSpread({
       "delete": 'Slett mappe',
       edit: 'Rediger mappe',
       missingName: 'Skriv navn på mappe',
-      folderDeleted: '"{{folderName}}" er slettet'
+      folderDeleted: '"{{folderName}}" er slettet',
+      folderCreated: '"{{folderName}}" er opprettet'
     },
     tags: '{{count}} emneknagg',
     tags_plural: '{{count}} emneknagger',

package/lib/locale/messages-nn.d.ts

@@ -67,6 +67,7 @@ declare const messages: {
             edit: string;
             missingName: string;
             folderDeleted: string;
+            folderCreated: string;
         };
         tags: string;
         tags_plural: string;
@@ -169,6 +170,8 @@ declare const messages: {
             edit: string;
             delete: string;
         };
+        hideFolders: string;
+        showFolders: string;
         createFolder: string;
         maxFoldersAlreadyAdded: string;
         newFolder: {

package/lib/locale/messages-nn.js

@@ -33,6 +33,8 @@ var messages = _objectSpread(_objectSpread({
       edit: 'Endre mappenamn',
       "delete": 'Slett'
     },
+    hideFolders: 'Skjul alle mapper',
+    showFolders: 'Vis alle mapper',
     createFolder: 'Lag mappe',
     maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {
@@ -954,7 +956,8 @@ var messages = _objectSpread(_objectSpread({
       "delete": 'Slett mappe',
       edit: 'Rediger mappe',
       missingName: 'Skriv namn på mappe',
-      folderDeleted: '"{{folderName}}" er sletta'
+      folderDeleted: '"{{folderName}}" er sletta',
+      folderCreated: '"{{folderName}}" er oppretta'
     },
     tags: '{{count}} emneknagg',
     tags_plural: '{{count}} emneknaggar',

package/lib/locale/messages-se.d.ts

@@ -67,6 +67,7 @@ declare const messages: {
             edit: string;
             missingName: string;
             folderDeleted: string;
+            folderCreated: string;
         };
         tags: string;
         tags_plural: string;
@@ -169,6 +170,8 @@ declare const messages: {
             edit: string;
             delete: string;
         };
+        hideFolders: string;
+        showFolders: string;
         createFolder: string;
         maxFoldersAlreadyAdded: string;
         newFolder: {

package/lib/locale/messages-se.js

@@ -33,6 +33,8 @@ var messages = _objectSpread(_objectSpread({
       edit: 'Rievdat máhpa nama',
       "delete": 'Sihko'
     },
+    hideFolders: 'Skjul alle mapper',
+    showFolders: 'Vis alle mapper',
     createFolder: 'Ráhkat máhpa',
     maxFoldersAlreadyAdded: 'Vuollemáhpaid badjerádji lea olahuvvon',
     newFolder: {
@@ -954,7 +956,8 @@ var messages = _objectSpread(_objectSpread({
       "delete": 'Sihko',
       edit: 'Redigere',
       missingName: 'Čále nama máhppii',
-      folderDeleted: '"{{folderName}}" lea sihkkojuvvon'
+      folderDeleted: '"{{folderName}}" lea sihkkojuvvon',
+      folderCreated: '"{{folderName}}" er oppretta'
     },
     tags: '{{count}} fáddágilkor',
     tags_plural: '{{count}} fáddágilkorat',

package/lib/locale/messages-sma.d.ts

@@ -67,6 +67,7 @@ declare const messages: {
             edit: string;
             missingName: string;
             folderDeleted: string;
+            folderCreated: string;
         };
         tags: string;
         tags_plural: string;
@@ -169,6 +170,8 @@ declare const messages: {
             edit: string;
             delete: string;
         };
+        hideFolders: string;
+        showFolders: string;
         createFolder: string;
         maxFoldersAlreadyAdded: string;
         newFolder: {

package/lib/locale/messages-sma.js

@@ -33,6 +33,8 @@ var messages = _objectSpread(_objectSpread({
       edit: 'Endre mappenavn',
       "delete": 'Slett'
     },
+    hideFolders: 'Skjul alle mapper',
+    showFolders: 'Vis alle mapper',
     createFolder: 'Lag mappe',
     maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {
@@ -954,7 +956,8 @@ var messages = _objectSpread(_objectSpread({
       "delete": 'Slett mappe',
       edit: 'Rediger mappe',
       missingName: 'Skriv navn på mappe',
-      folderDeleted: '"{{folderName}}" er slettet'
+      folderDeleted: '"{{folderName}}" er slettet',
+      folderCreated: '"{{folderName}}" er oppretta'
     },
     tags: '{{count}} emneknagg',
     tags_plural: '{{count}} emneknagger',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "25.3.0",
+  "version": "26.1.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,18 +32,18 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.2",
-    "@ndla/button": "^3.4.1",
-    "@ndla/carousel": "^1.2.21",
+    "@ndla/button": "^3.5.0",
+    "@ndla/carousel": "^1.2.22",
     "@ndla/core": "^2.3.5",
-    "@ndla/forms": "^3.2.0",
+    "@ndla/forms": "^3.3.0",
     "@ndla/hooks": "^1.1.6",
-    "@ndla/icons": "^1.12.0",
-    "@ndla/licenses": "^5.0.15",
-    "@ndla/modal": "^1.3.5",
-    "@ndla/notion": "^3.1.39",
-    "@ndla/safelink": "^2.2.13",
+    "@ndla/icons": "^1.12.1",
+    "@ndla/licenses": "^5.0.16",
+    "@ndla/modal": "^1.3.6",
+    "@ndla/notion": "^3.1.40",
+    "@ndla/safelink": "^2.2.14",
     "@ndla/switch": "^0.1.13",
-    "@ndla/tabs": "^1.1.20",
+    "@ndla/tabs": "^1.1.21",
     "@ndla/tooltip": "^2.2.1",
     "@ndla/types-learningpath-api": "^0.0.13",
     "@ndla/util": "^3.1.0",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b00cf1eb600a2fa9b3113b51abd0c7b2f02d0860"
+  "gitHead": "578a4353f768a0eb2b3e2334272c10d920de9632"
 }

package/src/LanguageSelector/LanguageSelector.tsx

@@ -115,7 +115,9 @@ interface StyledButtonProps {
   inverted?: boolean;
 }
 
-const StyledButton = styled(Button)<StyledButtonProps>`
+const shouldForwardProp = (name: string) => name !== 'outline';
+
+const StyledButton = styled(Button, { shouldForwardProp })<StyledButtonProps>`
   border-color: ${({ inverted, outline }) =>
     outline ? (inverted ? colors.white : colors.brand.primary) : 'transparent'};
 `;
@@ -139,6 +141,7 @@ const LanguageSelector = ({ currentLanguage, outline, center, inverted, alwaysVi
         </StyledSpan>
         <ChevronDown />
       </StyledButton>
+
       {isOpen && (
         <FocusTrapReact
           active

package/src/MyNdla/Resource/Folder.tsx

@@ -78,6 +78,7 @@ const FolderWrapper = styled(SafeLink)`
 `;
 
 interface Props {
+  id: string;
   title: string;
   subFolders?: number;
   subResources?: number;
@@ -131,10 +132,10 @@ const IconCount = ({ type, count, layoutType }: IconCountProps) => {
 
 type LayoutType = 'list' | 'block';
 
-const Folder = ({ link, title, subFolders, subResources, type = 'list', menuItems }: Props) => {
+const Folder = ({ id, link, title, subFolders, subResources, type = 'list', menuItems }: Props) => {
   const { t } = useTranslation();
   return (
-    <FolderWrapper to={link}>
+    <FolderWrapper to={link} id={id}>
       <FolderIconWrapper type={type}>
         <FolderOutlined aria-label={t('myNdla.folder.folder')} />
       </FolderIconWrapper>

package/src/Resource/BlockResource.tsx

@@ -16,6 +16,7 @@ import { CompressedTagList, ResourceImageProps, ResourceTitle, Row, TopicList }
 import ContentLoader from '../ContentLoader';
 
 interface BlockResourceProps {
+  id: string;
   link: string;
   tagLinkPrefix?: string;
   title: string;
@@ -132,6 +133,7 @@ const BlockTopicList = ({ topics, loading }: BlockTopicListProps) => {
 };
 
 const BlockResource = ({
+  id,
   link,
   tagLinkPrefix,
   title,
@@ -143,7 +145,7 @@ const BlockResource = ({
   isLoading,
 }: BlockResourceProps) => {
   return (
-    <BlockElementWrapper to={link}>
+    <BlockElementWrapper to={link} id={id}>
       <ImageWrapper>
         <BlockImage image={resourceImage} loading={isLoading} />
       </ImageWrapper>

package/src/Resource/ListResource.tsx

@@ -108,6 +108,7 @@ interface StyledImageProps {
 }
 
 export interface ListResourceProps {
+  id: string;
   link: string;
   tagLinkPrefix?: string;
   title: string;
@@ -186,6 +187,7 @@ const ResourceDescription = ({ description, loading }: ResourceDescriptionProps)
 };
 
 const ListResource = ({
+  id,
   link,
   tagLinkPrefix,
   title,
@@ -200,7 +202,7 @@ const ListResource = ({
   const imageType = showDescription ? 'normal' : 'compact';
 
   return (
-    <ResourceWrapper to={link}>
+    <ResourceWrapper to={link} id={id}>
       <StyledImageWrapper imageSize={imageType}>
         <ListResourceImage resourceImage={resourceImage} loading={isLoading} type={imageType} />
       </StyledImageWrapper>