@ndla/ui 13.2.2 → 15.1.0

package/lib/locale/messages-nn.js

@@ -28,6 +28,19 @@ exports.contentTypes = contentTypes;
 var titleTemplate = ' - NDLA';
 
 var messages = _objectSpread(_objectSpread({
+  treeStructure: {
+    createFolder: 'Lag mappe',
+    newFolder: {
+      placeholder: 'Skriv navn på mappe',
+      defaultName: 'Ny mappe'
+    }
+  },
+  tagSelector: {
+    placeholder: 'Tilknytt tag',
+    removeTag: 'Ta vekk tilknytninga til {{name}}',
+    hideAllTags: 'Skjul alle tagger',
+    showAllTags: 'Vis alle tagger'
+  },
   htmlTitles: {
     titleTemplate: titleTemplate,
     welcomePage: "Framsida".concat(titleTemplate),
@@ -906,6 +919,15 @@ var messages = _objectSpread(_objectSpread({
     },
     resource: {
       accessDenied: 'Vi beklagar, men denne ressursen er berre for lærarar innlogga med Feide.'
+    },
+    primarySchool: 'Hovudskule',
+    name: 'Namn',
+    mail: 'E-post',
+    username: 'Brukarnamn',
+    groupTypes: {
+      basic: 'Basisgruppe',
+      teaching: 'Undervisningsgruppe',
+      other: 'Andre grupper'
     }
   },
   checkOutNewFeature: 'Sjekk ut ny funksjonalitet',
@@ -918,15 +940,60 @@ var messages = _objectSpread(_objectSpread({
     close: 'Lukk faktaboks'
   },
   myNdla: {
-    resources: 'Ressursar',
-    folders: 'Mapper',
+    resources: '{{count}} ressurs',
+    resources_plural: '{{count}} ressursar',
+    folders: '{{count}} mappe',
+    folders_plural: '{{count}} mapper',
     folder: 'Mappe',
     myFolders: 'Mine mapper',
     myTags: 'Mine tags',
     newFolder: 'Ny mappe',
+    newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favorittar',
-    help: 'Hjelp'
+    help: 'Hjelp',
+    more: 'Fleire val',
+    listView: 'Listevisning',
+    detailView: 'Detaljrik listevisning',
+    shortView: 'Kort visning',
+    myPage: {
+      myPage: 'Min side',
+      deleteAccount: 'Slett Min NDLA',
+      logout: 'Logg ut av Min NDLA',
+      welcome: 'Velkommen til Min NDLA! Nå kan du lagre dine favorittressurser fra NDLA og organisere dem slik du ønsker i mapper og med tags.',
+      read: {
+        our: 'Les våre',
+        ours: 'Les vår'
+      },
+      privacy: 'personvernerklæring her',
+      questions: {
+        question: 'Lurer du på noe?',
+        ask: 'Spør oss i chatten'
+      },
+      wishToDelete: 'Ønsker du ikke ha brukerprofil hos oss lengre?',
+      terms: 'vilkår for bruk',
+      newFavourite: 'Nylig lagt til',
+      feide: 'Dette henter vi om deg fra Feide',
+      resource: {
+        addToMyNdla: 'Legg i Min NDLA',
+        addedToMyNdla: 'Lagt i Min NDLA'
+      },
+      storageInfo: {
+        title: 'Slik lagrer du dine favorittressurser fra NDLA',
+        text: 'Når du ønsker å lagre en ressurs, kan du gjøre dette ved å klikke på hjertet øverst til høyre på siden. Du vil da få mulighet til å lagre ressursen i en mappe.'
+      },
+      folderInfo: {
+        title: 'Slik organiserer du dine favorittressurser i mapper',
+        text: 'Du kommer til mappeoversikten din ved å klikke på mine mapper i menyen til venstre. Her kan du opprette nye mapper og undermapper. Du kan også opprette en ny mappe i dialogvinduet som kommer når du klikker på et hjerte i en ressurs.'
+      },
+      tagInfo: {
+        title: 'Slik tagger du dine favorittressurser',
+        text: 'Når du lagrer en ressurs får du mulighet til å tagge ressursen med et nøkkelord. Du kan senere bruke taggene til å finne tilbake til ressurser på tvers av mapper.  Ved å velge mine tagger i venstremenyen får du oversikt over alle taggene du har brukt og du kan også her se hvilke ressurser som du har tagget med det bestemte nøkkelordet.'
+      }
+    }
+  },
+  snackbar: {
+    close: 'Lukk melding'
   },
   labels: {
     category: 'Kategori',

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

@@ -33,6 +33,15 @@ declare const messages: {
         resource: {
             accessDenied: string;
         };
+        primarySchool: string;
+        name: string;
+        mail: string;
+        username: string;
+        groupTypes: {
+            basic: string;
+            teaching: string;
+            other: string;
+        };
     };
     checkOutNewFeature: string;
     slateBlockMenu: {
@@ -45,14 +54,59 @@ declare const messages: {
     };
     myNdla: {
         resources: string;
+        resources_plural: string;
         folders: string;
+        folders_plural: string;
         folder: string;
         myFolders: string;
         myTags: string;
         newFolder: string;
+        newFolderUnder: string;
         myAccount: string;
         favourites: string;
         help: string;
+        more: string;
+        listView: string;
+        detailView: string;
+        shortView: string;
+        myPage: {
+            myPage: string;
+            deleteAccount: string;
+            logout: string;
+            welcome: string;
+            read: {
+                our: string;
+                ours: string;
+            };
+            privacy: string;
+            questions: {
+                question: string;
+                ask: string;
+            };
+            wishToDelete: string;
+            terms: string;
+            newFavourite: string;
+            feide: string;
+            resource: {
+                addToMyNdla: string;
+                addedToMyNdla: string;
+            };
+            storageInfo: {
+                title: string;
+                text: string;
+            };
+            folderInfo: {
+                title: string;
+                text: string;
+            };
+            tagInfo: {
+                title: string;
+                text: string;
+            };
+        };
+    };
+    snackbar: {
+        close: string;
     };
     labels: {
         category: string;
@@ -69,6 +123,19 @@ declare const messages: {
         contact: string;
         help: string;
     };
+    treeStructure: {
+        createFolder: string;
+        newFolder: {
+            placeholder: string;
+            defaultName: string;
+        };
+    };
+    tagSelector: {
+        placeholder: string;
+        removeTag: string;
+        hideAllTags: string;
+        showAllTags: string;
+    };
     htmlTitles: {
         titleTemplate: string;
         welcomePage: string;

package/lib/locale/messages-se.js

@@ -28,6 +28,19 @@ exports.contentTypes = contentTypes;
 var titleTemplate = ' - NDLA';
 
 var messages = _objectSpread(_objectSpread({
+  treeStructure: {
+    createFolder: 'Lag mappe',
+    newFolder: {
+      placeholder: 'Skriv navn på mappe',
+      defaultName: 'Ny mappe'
+    }
+  },
+  tagSelector: {
+    placeholder: 'Legg til tag',
+    removeTag: 'Ta vekk tilknytninga til {{name}}',
+    hideAllTags: 'Skjul alla tags',
+    showAllTags: 'Vis alla tags'
+  },
   htmlTitles: {
     titleTemplate: titleTemplate,
     welcomePage: "Forsiden".concat(titleTemplate),
@@ -906,6 +919,15 @@ var messages = _objectSpread(_objectSpread({
     },
     resource: {
       accessDenied: 'Vi beklager, men denne ressursen er bare for lærere innlogget med Feide.'
+    },
+    primarySchool: 'Hovudskule',
+    name: 'Namn',
+    mail: 'E-post',
+    username: 'Brukarnamn',
+    groupTypes: {
+      basic: 'Basisgruppe',
+      teaching: 'Undervisningsgruppe',
+      other: 'Andre grupper'
     }
   },
   checkOutNewFeature: 'Sjekk ut ny funksjonalitet',
@@ -918,15 +940,60 @@ var messages = _objectSpread(_objectSpread({
     close: 'Lukk faktaboks'
   },
   myNdla: {
-    resources: 'Ressurser',
-    folders: 'Mapper',
+    resources: '{{count}} ressurs',
+    resources_plural: '{{count}} ressurser',
+    folders: '{{count}} mappe',
+    folders_plural: '{{count}} mapper',
     folder: 'Mappe',
     myFolders: 'Mine mapper',
     myTags: 'Mine tags',
     newFolder: 'Ny mappe',
+    newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favoritter',
-    help: 'Hjelp'
+    help: 'Hjelp',
+    more: 'Flere valg',
+    listView: 'Listevisning',
+    detailView: 'Detaljrik listevisning',
+    shortView: 'Kort visning',
+    myPage: {
+      myPage: 'Min side',
+      deleteAccount: 'Slett Min NDLA',
+      logout: 'Logg ut av Min NDLA',
+      welcome: 'Velkommen til Min NDLA! Nå kan du lagre dine favorittressurser fra NDLA og organisere dem slik du ønsker i mapper og med tags.',
+      read: {
+        our: 'Les våre',
+        ours: 'Les vår'
+      },
+      privacy: 'personvernerklæring her',
+      questions: {
+        question: 'Lurer du på noe?',
+        ask: 'Spør oss i chatten'
+      },
+      wishToDelete: 'Ønsker du ikke ha brukerprofil hos oss lengre?',
+      terms: 'vilkår for bruk',
+      newFavourite: 'Nylig lagt til',
+      feide: 'Dette henter vi om deg fra Feide',
+      resource: {
+        addToMyNdla: 'Legg i Min NDLA',
+        addedToMyNdla: 'Lagt i Min NDLA'
+      },
+      storageInfo: {
+        title: 'Slik lagrer du dine favorittressurser fra NDLA',
+        text: 'Når du ønsker å lagre en ressurs, kan du gjøre dette ved å klikke på hjertet øverst til høyre på siden. Du vil da få mulighet til å lagre ressursen i en mappe.'
+      },
+      folderInfo: {
+        title: 'Slik organiserer du dine favorittressurser i mapper',
+        text: 'Du kommer til mappeoversikten din ved å klikke på mine mapper i menyen til venstre. Her kan du opprette nye mapper og undermapper. Du kan også opprette en ny mappe i dialogvinduet som kommer når du klikker på et hjerte i en ressurs.'
+      },
+      tagInfo: {
+        title: 'Slik tagger du dine favorittressurser',
+        text: 'Når du lagrer en ressurs får du mulighet til å tagge ressursen med et nøkkelord. Du kan senere bruke taggene til å finne tilbake til ressurser på tvers av mapper.  Ved å velge mine tagger i venstremenyen får du oversikt over alle taggene du har brukt og du kan også her se hvilke ressurser som du har tagget med det bestemte nøkkelordet.'
+      }
+    }
+  },
+  snackbar: {
+    close: 'Lukk melding'
   },
   labels: {
     category: 'Kategori',

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

@@ -33,6 +33,15 @@ declare const messages: {
         resource: {
             accessDenied: string;
         };
+        primarySchool: string;
+        name: string;
+        mail: string;
+        username: string;
+        groupTypes: {
+            basic: string;
+            teaching: string;
+            other: string;
+        };
     };
     checkOutNewFeature: string;
     slateBlockMenu: {
@@ -45,14 +54,59 @@ declare const messages: {
     };
     myNdla: {
         resources: string;
+        resources_plural: string;
         folders: string;
+        folders_plural: string;
         folder: string;
         myFolders: string;
         myTags: string;
         newFolder: string;
+        newFolderUnder: string;
         myAccount: string;
         favourites: string;
         help: string;
+        more: string;
+        listView: string;
+        detailView: string;
+        shortView: string;
+        myPage: {
+            myPage: string;
+            deleteAccount: string;
+            logout: string;
+            welcome: string;
+            read: {
+                our: string;
+                ours: string;
+            };
+            privacy: string;
+            questions: {
+                question: string;
+                ask: string;
+            };
+            wishToDelete: string;
+            terms: string;
+            newFavourite: string;
+            feide: string;
+            resource: {
+                addToMyNdla: string;
+                addedToMyNdla: string;
+            };
+            storageInfo: {
+                title: string;
+                text: string;
+            };
+            folderInfo: {
+                title: string;
+                text: string;
+            };
+            tagInfo: {
+                title: string;
+                text: string;
+            };
+        };
+    };
+    snackbar: {
+        close: string;
     };
     labels: {
         category: string;
@@ -69,6 +123,19 @@ declare const messages: {
         contact: string;
         help: string;
     };
+    treeStructure: {
+        createFolder: string;
+        newFolder: {
+            placeholder: string;
+            defaultName: string;
+        };
+    };
+    tagSelector: {
+        placeholder: string;
+        removeTag: string;
+        hideAllTags: string;
+        showAllTags: string;
+    };
     htmlTitles: {
         titleTemplate: string;
         welcomePage: string;

package/lib/locale/messages-sma.js

@@ -28,6 +28,19 @@ exports.contentTypes = contentTypes;
 var titleTemplate = ' - NDLA';
 
 var messages = _objectSpread(_objectSpread({
+  treeStructure: {
+    createFolder: 'Lag mappe',
+    newFolder: {
+      placeholder: 'Skriv navn på mappe',
+      defaultName: 'Ny mappe'
+    }
+  },
+  tagSelector: {
+    placeholder: 'Tilknytt tag',
+    removeTag: 'Ta vekk tilknytning til {{name}}',
+    hideAllTags: 'Skjul alle tagger',
+    showAllTags: 'Vis alle tagger'
+  },
   htmlTitles: {
     titleTemplate: titleTemplate,
     welcomePage: "Forsiden".concat(titleTemplate),
@@ -906,6 +919,15 @@ var messages = _objectSpread(_objectSpread({
     },
     resource: {
       accessDenied: 'Vi beklager, men denne ressursen er bare for lærere innlogget med Feide.'
+    },
+    primarySchool: 'Hovudskule',
+    name: 'Namn',
+    mail: 'E-post',
+    username: 'Brukarnamn',
+    groupTypes: {
+      basic: 'Basisgruppe',
+      teaching: 'Undervisningsgruppe',
+      other: 'Andre grupper'
     }
   },
   checkOutNewFeature: 'Sjekk ut ny funksjonalitet',
@@ -918,15 +940,60 @@ var messages = _objectSpread(_objectSpread({
     close: 'Lukk faktaboks'
   },
   myNdla: {
-    resources: 'Ressurser',
-    folders: 'Mapper',
+    resources: '{{count}} ressurs',
+    resources_plural: '{{count}} ressurser',
+    folders: '{{count}} mappe',
+    folders_plural: '{{count}} mapper',
     folder: 'Mappe',
     myFolders: 'Mine mapper',
     myTags: 'Mine tags',
     newFolder: 'Ny mappe',
+    newFolderUnder: 'Lag ny mappe under {{folderName}}',
     myAccount: 'Min konto',
     favourites: 'Favoritter',
-    help: 'Hjelp'
+    help: 'Hjelp',
+    more: 'Flere valg',
+    listView: 'Listevisning',
+    detailView: 'Detaljrik listevisning',
+    shortView: 'Kort visning',
+    myPage: {
+      myPage: 'Min side',
+      deleteAccount: 'Slett Min NDLA',
+      logout: 'Logg ut av Min NDLA',
+      welcome: 'Velkommen til Min NDLA! Nå kan du lagre dine favorittressurser fra NDLA og organisere dem slik du ønsker i mapper og med tags.',
+      read: {
+        our: 'Les våre',
+        ours: 'Les vår'
+      },
+      privacy: 'personvernerklæring her',
+      questions: {
+        question: 'Lurer du på noe?',
+        ask: 'Spør oss i chatten'
+      },
+      wishToDelete: 'Ønsker du ikke ha brukerprofil hos oss lengre?',
+      terms: 'vilkår for bruk',
+      newFavourite: 'Nylig lagt til',
+      feide: 'Dette henter vi om deg fra Feide',
+      resource: {
+        addToMyNdla: 'Legg i Min NDLA',
+        addedToMyNdla: 'Lagt i Min NDLA'
+      },
+      storageInfo: {
+        title: 'Slik lagrer du dine favorittressurser fra NDLA',
+        text: 'Når du ønsker å lagre en ressurs, kan du gjøre dette ved å klikke på hjertet øverst til høyre på siden. Du vil da få mulighet til å lagre ressursen i en mappe.'
+      },
+      folderInfo: {
+        title: 'Slik organiserer du dine favorittressurser i mapper',
+        text: 'Du kommer til mappeoversikten din ved å klikke på mine mapper i menyen til venstre. Her kan du opprette nye mapper og undermapper. Du kan også opprette en ny mappe i dialogvinduet som kommer når du klikker på et hjerte i en ressurs.'
+      },
+      tagInfo: {
+        title: 'Slik tagger du dine favorittressurser',
+        text: 'Når du lagrer en ressurs får du mulighet til å tagge ressursen med et nøkkelord. Du kan senere bruke taggene til å finne tilbake til ressurser på tvers av mapper.  Ved å velge mine tagger i venstremenyen får du oversikt over alle taggene du har brukt og du kan også her se hvilke ressurser som du har tagget med det bestemte nøkkelordet.'
+      }
+    }
+  },
+  snackbar: {
+    close: 'Lukk melding'
   },
   labels: {
     category: 'Kategori',

package/lib/types.d.ts

@@ -19,7 +19,7 @@ declare type ResourceTypes = {
     name: string;
 };
 export declare type Resource = {
-    id: string | number;
+    id: string;
     name: string;
     contentUri?: string;
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "13.2.2",
+  "version": "15.1.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,18 +31,18 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^2.2.1",
-    "@ndla/carousel": "^1.2.7",
+    "@ndla/button": "^2.3.0",
+    "@ndla/carousel": "^1.2.8",
     "@ndla/core": "^2.1.1",
     "@ndla/hooks": "^1.1.4",
-    "@ndla/icons": "^1.7.1",
-    "@ndla/licenses": "^4.1.2",
-    "@ndla/modal": "^1.2.8",
-    "@ndla/notion": "^3.1.9",
-    "@ndla/safelink": "^2.0.2",
+    "@ndla/icons": "^1.8.0",
+    "@ndla/licenses": "^4.1.4",
+    "@ndla/modal": "^1.2.9",
+    "@ndla/notion": "^3.1.11",
+    "@ndla/safelink": "^2.0.3",
     "@ndla/switch": "^0.1.5",
-    "@ndla/tabs": "^1.1.6",
-    "@ndla/tooltip": "^0.3.5",
+    "@ndla/tabs": "^1.1.7",
+    "@ndla/tooltip": "^2.0.0",
     "@ndla/util": "^3.0.0",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8576da533b9abf6a244b32382ba5b898fb990ed5"
+  "gitHead": "9abe501a75c1b4f3c7602ff78cc36c916be45032"
 }

package/src/Article/Article.tsx

@@ -14,10 +14,12 @@ import styled from '@emotion/styled';
 
 import { useIntersectionObserver } from '@ndla/hooks';
 import { resizeObserver } from '@ndla/util';
+import { spacing, spacingUnit, mq, breakpoints } from '@ndla/core';
 import { Article as ArticleType, Locale } from '../types';
 import ArticleFootNotes from './ArticleFootNotes';
 import ArticleContent from './ArticleContent';
 import ArticleByline from './ArticleByline';
+import ArticleFavoritesButton from './ArticleFavoritesButton';
 import LayoutItem from '../Layout';
 import ArticleHeaderWrapper from './ArticleHeaderWrapper';
 import ArticleNotions, { NotionRelatedContent } from './ArticleNotions';
@@ -97,6 +99,22 @@ const MSGboxWrapper = styled.div`
   margin-bottom: 50px;
 `;
 
+const ArticleFavoritesButtonWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  transform: translate(${spacing.xsmall}, -${spacing.normal});
+  height: 0;
+  ${mq.range({ from: breakpoints.tablet })} {
+    transform: translate(${spacing.normal}, -${spacing.medium});
+  }
+  ${mq.range({ from: breakpoints.tabletWide })} {
+    transform: translate(${spacing.large}, -${spacing.medium});
+  }
+  ${mq.range({ from: breakpoints.desktop })} {
+    transform: translate(${spacingUnit * 5.5}px, -${spacing.medium});
+  }
+`;
+
 type Props = {
   article: ArticleType;
   icon?: ReactNode;
@@ -117,6 +135,8 @@ type Props = {
   printUrl?: string;
   notions?: { list: ConceptNotionType[]; related: NotionRelatedContent[] };
   accessMessage?: string;
+  isFavorite?: boolean;
+  onToggleAddToFavorites?: (id: string, add: boolean) => void;
 };
 
 const getArticleContent = (content: any, locale: Locale) => {
@@ -147,6 +167,8 @@ export const Article = ({
   printUrl,
   renderMarkdown,
   accessMessage,
+  onToggleAddToFavorites,
+  isFavorite,
 }: Props) => {
   const [articleRef, { entry }] = useIntersectionObserver({
     root: null,
@@ -196,6 +218,15 @@ export const Article = ({
             </MSGboxWrapper>
           )}
           <ArticleHeaderWrapper competenceGoals={competenceGoals} competenceGoalTypes={competenceGoalTypes}>
+            {onToggleAddToFavorites && (
+              <ArticleFavoritesButtonWrapper>
+                <ArticleFavoritesButton
+                  articleId={id}
+                  isFavorite={isFavorite}
+                  onToggleAddToFavorites={onToggleAddToFavorites}
+                />
+              </ArticleFavoritesButtonWrapper>
+            )}
             <ArticleTitle icon={icon} label={messages.label}>
               {title}
             </ArticleTitle>

package/src/Article/ArticleFavoritesButton.tsx

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2022-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 React from 'react';
+import { IconButtonDualStates } from '@ndla/button';
+import { Heart, HeartOutline } from '@ndla/icons/action';
+import Tooltip from '@ndla/tooltip';
+import { useTranslation } from 'react-i18next';
+
+export interface Props {
+  isFavorite?: boolean;
+  onToggleAddToFavorites: (id: string, add: boolean) => void;
+  articleId: string;
+}
+
+export const ArticleFavoritesButton = ({ isFavorite, onToggleAddToFavorites, articleId }: Props) => {
+  const { t } = useTranslation();
+  const removeFromFavoritesLabel = t('myNdla.resource.addToMyNdla');
+  const addToFavoritesLabel = t('myNdla.resource.addedToMyNdla');
+  return (
+    <Tooltip tooltip={isFavorite ? removeFromFavoritesLabel : addToFavoritesLabel}>
+      <IconButtonDualStates
+        ariaLabelActive={addToFavoritesLabel}
+        ariaLabelInActive={removeFromFavoritesLabel}
+        activeIcon={<Heart />}
+        inactiveIcon={<HeartOutline />}
+        active={isFavorite}
+        size="small"
+        onClick={() => onToggleAddToFavorites(articleId, !isFavorite)}
+      />
+    </Tooltip>
+  );
+};
+
+export default ArticleFavoritesButton;

package/src/Article/index.ts

@@ -12,6 +12,7 @@ import ArticleContent from './ArticleContent';
 import ArticleFootNotes from './ArticleFootNotes';
 import ArticleHeaderWrapper from './ArticleHeaderWrapper';
 import ArticleSideBar from './ArticleSideBar';
+import ArticleFavoritesButton from './ArticleFavoritesButton';
 
 export {
   ArticleByline,
@@ -22,5 +23,6 @@ export {
   ArticleTitle,
   ArticleIntroduction,
   ArticleWrapper,
+  ArticleFavoritesButton,
 };
 export default Article;