@ndla/ui 17.0.0 → 19.0.0

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

@@ -53,6 +53,7 @@ declare const messages: {
         close: string;
     };
     myNdla: {
+        myNDLA: string;
         resources: string;
         resources_plural: string;
         folders: string;
@@ -64,6 +65,8 @@ declare const messages: {
         newFolderUnder: string;
         myAccount: string;
         favourites: string;
+        addToFavourites: string;
+        alreadyFavourited: string;
         help: string;
         more: string;
         listView: string;
@@ -124,13 +127,19 @@ declare const messages: {
         help: string;
     };
     treeStructure: {
+        folderChildOptions: {
+            edit: string;
+            delete: string;
+        };
         createFolder: string;
+        maxFoldersAlreadyAdded: string;
         newFolder: {
             placeholder: string;
             defaultName: string;
         };
     };
     tagSelector: {
+        label: string;
         placeholder: string;
         removeTag: string;
         hideAllTags: string;

package/lib/locale/messages-nn.js

@@ -29,15 +29,21 @@ var titleTemplate = ' - NDLA';
 
 var messages = _objectSpread(_objectSpread({
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Endre mappenamn',
+      "delete": 'Slett'
+    },
     createFolder: 'Lag mappe',
+    maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {
-      placeholder: 'Skriv navn på mappe',
+      placeholder: 'Skriv namn på mappe',
       defaultName: 'Ny mappe'
     }
   },
   tagSelector: {
-    placeholder: 'Tilknytt tag',
-    removeTag: 'Ta vekk tilknytninga til {{name}}',
+    label: 'Legg til tag',
+    placeholder: 'Skriv tag namn',
+    removeTag: 'Ta vekk {{name}}',
     hideAllTags: 'Skjul alle tagger',
     showAllTags: 'Vis alle tagger'
   },
@@ -940,6 +946,7 @@ var messages = _objectSpread(_objectSpread({
     close: 'Lukk faktaboks'
   },
   myNdla: {
+    myNDLA: 'Min NDLA',
     resources: '{{count}} ressurs',
     resources_plural: '{{count}} ressursar',
     folders: '{{count}} mappe',
@@ -951,6 +958,8 @@ var messages = _objectSpread(_objectSpread({
     newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favorittar',
+    addToFavourites: 'Legg til i mine favorittar',
+    alreadyFavourited: 'Allereie lagt til i mine favorittar',
     help: 'Hjelp',
     more: 'Fleire val',
     listView: 'Listevisning',

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

@@ -53,6 +53,7 @@ declare const messages: {
         close: string;
     };
     myNdla: {
+        myNDLA: string;
         resources: string;
         resources_plural: string;
         folders: string;
@@ -64,6 +65,8 @@ declare const messages: {
         newFolderUnder: string;
         myAccount: string;
         favourites: string;
+        addToFavourites: string;
+        alreadyFavourited: string;
         help: string;
         more: string;
         listView: string;
@@ -124,13 +127,19 @@ declare const messages: {
         help: string;
     };
     treeStructure: {
+        folderChildOptions: {
+            edit: string;
+            delete: string;
+        };
         createFolder: string;
+        maxFoldersAlreadyAdded: string;
         newFolder: {
             placeholder: string;
             defaultName: string;
         };
     };
     tagSelector: {
+        label: string;
         placeholder: string;
         removeTag: string;
         hideAllTags: string;

package/lib/locale/messages-se.js

@@ -29,15 +29,21 @@ var titleTemplate = ' - NDLA';
 
 var messages = _objectSpread(_objectSpread({
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Endre mappenavn',
+      "delete": 'Slett'
+    },
     createFolder: 'Lag mappe',
+    maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {
       placeholder: 'Skriv navn på mappe',
       defaultName: 'Ny mappe'
     }
   },
   tagSelector: {
-    placeholder: 'Legg til tag',
-    removeTag: 'Ta vekk tilknytninga til {{name}}',
+    label: 'Legg til tag',
+    placeholder: 'Skriv tag navn',
+    removeTag: 'Ta vekk {{name}}',
     hideAllTags: 'Skjul alla tags',
     showAllTags: 'Vis alla tags'
   },
@@ -940,6 +946,7 @@ var messages = _objectSpread(_objectSpread({
     close: 'Lukk faktaboks'
   },
   myNdla: {
+    myNDLA: 'Min NDLA',
     resources: '{{count}} ressurs',
     resources_plural: '{{count}} ressurser',
     folders: '{{count}} mappe',
@@ -951,6 +958,8 @@ var messages = _objectSpread(_objectSpread({
     newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favoritter',
+    addToFavourites: 'Legg til i mine favoritter',
+    alreadyFavourited: 'Allerede lagt til i mine favoritter',
     help: 'Hjelp',
     more: 'Flere valg',
     listView: 'Listevisning',

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

@@ -53,6 +53,7 @@ declare const messages: {
         close: string;
     };
     myNdla: {
+        myNDLA: string;
         resources: string;
         resources_plural: string;
         folders: string;
@@ -64,6 +65,8 @@ declare const messages: {
         newFolderUnder: string;
         myAccount: string;
         favourites: string;
+        addToFavourites: string;
+        alreadyFavourited: string;
         help: string;
         more: string;
         listView: string;
@@ -124,13 +127,19 @@ declare const messages: {
         help: string;
     };
     treeStructure: {
+        folderChildOptions: {
+            edit: string;
+            delete: string;
+        };
         createFolder: string;
+        maxFoldersAlreadyAdded: string;
         newFolder: {
             placeholder: string;
             defaultName: string;
         };
     };
     tagSelector: {
+        label: string;
         placeholder: string;
         removeTag: string;
         hideAllTags: string;

package/lib/locale/messages-sma.js

@@ -29,15 +29,21 @@ var titleTemplate = ' - NDLA';
 
 var messages = _objectSpread(_objectSpread({
   treeStructure: {
+    folderChildOptions: {
+      edit: 'Endre mappenavn',
+      "delete": 'Slett'
+    },
     createFolder: 'Lag mappe',
+    maxFoldersAlreadyAdded: 'Maks nivå av undermapper nådd',
     newFolder: {
       placeholder: 'Skriv navn på mappe',
       defaultName: 'Ny mappe'
     }
   },
   tagSelector: {
-    placeholder: 'Tilknytt tag',
-    removeTag: 'Ta vekk tilknytning til {{name}}',
+    label: 'Legg til tag',
+    placeholder: 'Skriv tag navn',
+    removeTag: 'Ta vekk {{name}}',
     hideAllTags: 'Skjul alle tagger',
     showAllTags: 'Vis alle tagger'
   },
@@ -940,6 +946,7 @@ var messages = _objectSpread(_objectSpread({
     close: 'Lukk faktaboks'
   },
   myNdla: {
+    myNDLA: 'Min NDLA',
     resources: '{{count}} ressurs',
     resources_plural: '{{count}} ressurser',
     folders: '{{count}} mappe',
@@ -951,6 +958,8 @@ var messages = _objectSpread(_objectSpread({
     newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favoritter',
+    addToFavourites: 'Legg til i mine favoritter',
+    alreadyFavourited: 'Allerede lagt til i mine favoritter',
     help: 'Hjelp',
     more: 'Flere valg',
     listView: 'Listevisning',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "17.0.0",
+  "version": "19.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,15 +31,15 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^2.5.1",
+    "@ndla/button": "^3.0.0",
     "@ndla/carousel": "^1.2.11",
     "@ndla/core": "^2.3.0",
     "@ndla/hooks": "^1.1.4",
     "@ndla/icons": "^1.10.0",
     "@ndla/licenses": "^5.0.2",
     "@ndla/modal": "^1.2.12",
-    "@ndla/notion": "^3.1.16",
-    "@ndla/safelink": "^2.0.7",
+    "@ndla/notion": "^3.1.18",
+    "@ndla/safelink": "^2.0.9",
     "@ndla/switch": "^0.1.7",
     "@ndla/tabs": "^1.1.10",
     "@ndla/tooltip": "^2.1.2",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "224c9c0d69875fa7d84a591cfbf15b6df340adc5"
+  "gitHead": "ae09299c27fc3f48f1b8f77ebe37c7aac511b2ad"
 }

package/src/Article/ArticleFavoritesButton.tsx

@@ -23,14 +23,15 @@ export const ArticleFavoritesButton = ({ isFavorite, onToggleAddToFavorites, art
   const removeFromFavoritesLabel = t('myNdla.resource.addToMyNdla');
   const addToFavoritesLabel = t('myNdla.resource.addedToMyNdla');
   return (
-    <Tooltip tooltip={isFavorite ? removeFromFavoritesLabel : addToFavoritesLabel}>
+    <Tooltip tooltip={isFavorite ? addToFavoritesLabel : removeFromFavoritesLabel}>
       <IconButtonDualStates
-        ariaLabelActive={addToFavoritesLabel}
-        ariaLabelInActive={removeFromFavoritesLabel}
+        ariaLabelActive={t('myNdla.addToFavourites')}
+        ariaLabelInActive={t('myNdla.alreadyFavourited')}
         activeIcon={<Heart />}
         inactiveIcon={<HeartOutline />}
         active={isFavorite}
         size="small"
+        ghostPill
         onClick={() => onToggleAddToFavorites(articleId, !isFavorite)}
       />
     </Tooltip>

package/src/Masthead/MastheadAuthModal.tsx

@@ -10,6 +10,8 @@ import React from 'react';
 import styled from '@emotion/styled';
 import Button from '@ndla/button';
 import { Feide } from '@ndla/icons/common';
+import { colors, fonts, spacing } from '@ndla/core';
+import { useTranslation } from 'react-i18next';
 
 import AuthModal, { AuthModalProps } from '../User/AuthModal';
 
@@ -18,7 +20,12 @@ type FeideWrapperProps = {
 };
 
 const StyledButton = styled(Button)<FeideWrapperProps>`
+  font-weight: ${fonts.weight.semibold};
+  display: flex;
+  align-items: center;
   .feide-icon svg {
+    margin-left: ${spacing.xsmall};
+    fill: ${colors.brand.primary};
     color: ${(props) => (props.inverted ? `#ffffff` : `#000000`)};
     width: 22px;
     height: 22px;
@@ -35,11 +42,13 @@ interface Props extends AuthModalProps {
 }
 
 const MastheadAuthModal = ({ inverted, ...rest }: Props) => {
+  const { t } = useTranslation();
   return (
     <AuthModal
       {...rest}
       activateButton={
         <StyledButton inverted={inverted} ghostPill={!inverted} ghostPillInverted={inverted} aria-label="Feide">
+          {t('myNdla.myNDLA')}
           <span className="feide-icon">
             <Feide />
           </span>

package/src/MyNdla/Resource/Folder.tsx

@@ -7,14 +7,14 @@
  */
 
 import styled from '@emotion/styled';
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { FolderOutlined } from '@ndla/icons/contentType';
 import { FileDocumentOutline } from '@ndla/icons/common';
 import { fonts, spacing, colors, mq, breakpoints } from '@ndla/core';
 import { css } from '@emotion/core';
 import { useTranslation } from 'react-i18next';
 import SafeLink from '@ndla/safelink';
-import { MenuButton } from '@ndla/button';
+import { MenuButton, MenuItemProps } from '@ndla/button';
 
 interface FolderIconWrapperProps {
   type?: LayoutType;
@@ -59,7 +59,7 @@ const FolderWrapper = styled(SafeLink)`
   display: flex;
   align-items: center;
   padding: ${spacing.small};
-  border: 1px solid ${colors.brand.light};
+  border: 1px solid ${colors.brand.neutral7};
   border-radius: 2px;
   box-shadow: none;
   text-decoration: none;
@@ -84,7 +84,7 @@ interface Props {
   description?: string;
   link: string;
   type: LayoutType;
-  actionMenu?: ReactNode;
+  menuItems?: MenuItemProps[];
 }
 
 interface IconCountProps {
@@ -124,14 +124,14 @@ const IconCount = ({ type, count, layoutType }: IconCountProps) => {
   return (
     <IconCountWrapper type={layoutType}>
       <Icon aria-label={t(`myNdla.${type}s`)} />
-      <span>{layoutType === 'block' ? count : t(`myNdla.${type}s`, { count: 3 })}</span>
+      <span>{layoutType === 'block' ? count : t(`myNdla.${type}s`, { count })}</span>
     </IconCountWrapper>
   );
 };
 
 type LayoutType = 'list' | 'block';
 
-const Folder = ({ link, title, subFolders, subResources, type = 'list', actionMenu }: Props) => {
+const Folder = ({ link, title, subFolders, subResources, type = 'list', menuItems }: Props) => {
   const { t } = useTranslation();
   return (
     <FolderWrapper to={link}>
@@ -141,7 +141,7 @@ const Folder = ({ link, title, subFolders, subResources, type = 'list', actionMe
       <FolderTitle>{title}</FolderTitle>
       <IconCount layoutType={type} type={'folder'} count={subFolders} />
       <IconCount layoutType={type} type={'resource'} count={subResources} />
-      <MenuButton size="small" />
+      {menuItems && menuItems.length > 0 && <MenuButton size="small" menuItems={menuItems} />}
     </FolderWrapper>
   );
 };

package/src/MyNdla/index.ts

@@ -1,4 +1,3 @@
 import Folder from './Resource/Folder';
 import FolderInput from './Resource/FolderInput';
-import { VerticalNavigation } from './Navigation';
-export { VerticalNavigation, Folder, FolderInput };
+export { Folder, FolderInput };

package/src/Resource/BlockResource.tsx

@@ -7,11 +7,12 @@
  */
 
 import styled from '@emotion/styled';
-import React, { ReactNode } from 'react';
+import React from 'react';
 import SafeLink from '@ndla/safelink';
 import { colors, fonts, spacing } from '@ndla/core';
+import { MenuButton, MenuItemProps } from '@ndla/button';
 import Image from '../Image';
-import { CompressedTags, ResourceImageProps, ResourceTitle, Row, TopicList } from './resourceComponents';
+import { CompressedTagList, ResourceImageProps, ResourceTitle, Row, TopicList } from './resourceComponents';
 
 interface BlockResourceProps {
   link: string;
@@ -20,7 +21,7 @@ interface BlockResourceProps {
   topics: string[];
   tags?: string[];
   description?: string;
-  actionMenu?: ReactNode;
+  menuItems?: MenuItemProps[];
 }
 
 const BlockElementWrapper = styled(SafeLink)`
@@ -77,7 +78,7 @@ const ImageWrapper = styled.div`
   }
 `;
 
-const BlockResource = ({ link, title, tags, resourceImage, topics, description, actionMenu }: BlockResourceProps) => {
+const BlockResource = ({ link, title, tags, resourceImage, topics, description, menuItems }: BlockResourceProps) => {
   return (
     <BlockElementWrapper to={link}>
       <ImageWrapper>
@@ -90,8 +91,8 @@ const BlockResource = ({ link, title, tags, resourceImage, topics, description,
         <TopicList topics={topics} />
         <BlockDescription>{description}</BlockDescription>
         <RightRow>
-          {tags && CompressedTags(tags)}
-          {actionMenu}
+          {tags && <CompressedTagList tags={tags} />}
+          {menuItems && menuItems.length > 0 && <MenuButton size="small" menuItems={menuItems} />}
         </RightRow>
       </BlockInfoWrapper>
     </BlockElementWrapper>

package/src/Resource/ListResource.tsx

@@ -7,11 +7,12 @@
  */
 
 import styled from '@emotion/styled';
-import React, { ReactNode } from 'react';
+import React from 'react';
 import SafeLink from '@ndla/safelink';
 import { fonts, spacing, colors, breakpoints, mq } from '@ndla/core';
+import { MenuButton, MenuItemProps } from '@ndla/button';
 import Image from '../Image';
-import { CompressedTags, ResourceImageProps, ResourceTitle, TopicList } from './resourceComponents';
+import { CompressedTagList, ResourceImageProps, ResourceTitle, TopicList } from './resourceComponents';
 
 const ResourceDescription = styled.p`
   grid-area: description;
@@ -47,7 +48,7 @@ const ResourceWrapper = styled(SafeLink)`
   text-decoration: none;
   box-shadow: none;
   padding: ${spacing.small};
-  border: 1px solid ${colors.brand.light};
+  border: 1px solid ${colors.brand.neutral7};
   border-radius: 2px;
   color: ${colors.brand.greyDark};
   gap: 0 ${spacing.small};
@@ -109,10 +110,10 @@ export interface ListResourceProps {
   topics: string[];
   tags?: string[];
   description?: string;
-  actionMenu?: ReactNode;
+  menuItems?: MenuItemProps[];
 }
 
-const ListResource = ({ link, title, tags, resourceImage, topics, description, actionMenu }: ListResourceProps) => {
+const ListResource = ({ link, title, tags, resourceImage, topics, description, menuItems }: ListResourceProps) => {
   const showDescription = description !== undefined;
 
   return (
@@ -126,8 +127,8 @@ const ListResource = ({ link, title, tags, resourceImage, topics, description, a
       </TopicAndTitle>
       {showDescription && <ResourceDescription>{description}</ResourceDescription>}
       <TagsandActionMenu>
-        {tags && CompressedTags(tags)}
-        {actionMenu}
+        {tags && <CompressedTagList tags={tags} />}
+        {menuItems && menuItems.length > 0 && <MenuButton size="small" menuItems={menuItems} />}
       </TagsandActionMenu>
     </ResourceWrapper>
   );

package/src/Resource/resourceComponents.tsx

@@ -48,6 +48,9 @@ const StyledTagListElement = styled.li`
   ::before {
     content: '#';
   }
+  &:hover {
+    color: ${colors.brand.primary};
+  }
 `;
 
 const StyledTopicList = styled.ul`
@@ -100,7 +103,11 @@ export const TagList = ({ tags }: TagListProps) => {
   );
 };
 
-export const CompressedTags = (tags: string[]) => {
+interface CompressedTagListProps {
+  tags: string[];
+}
+
+export const CompressedTagList = ({ tags }: CompressedTagListProps) => {
   const visibleTags = tags.slice(0, 3);
   const remainingTags = tags.slice(3, tags.length).map((tag) => {
     return {