@ndla/ui 13.2.2 → 15.1.0

package/src/User/apiTypes.ts

@@ -0,0 +1,74 @@
+/**
+ * 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.
+ *
+ */
+
+type OrgType =
+  | 'higher_education'
+  | 'primary_and_lower_secondary'
+  | 'primary_and_lower_secondary_owner'
+  | 'upper_secondary'
+  | 'upper_secondary_owner';
+
+type AffiliationType = 'member' | 'student' | 'faculty' | 'staff' | 'affiliate' | 'employee';
+
+export interface FeideMembershipType {
+  basic: 'member' | 'admin' | 'owner'; // Basic membership role of user.
+  affiliation?: AffiliationType[] | AffiliationType;
+  primarySchool?: boolean;
+  primaryAffiliation?: AffiliationType;
+  displayName?: string;
+}
+
+interface FeideBaseGroup {
+  id: string;
+  type: 'fc:org' | 'fc:gogroup';
+  displayName: string;
+  membership: FeideMembershipType;
+}
+
+export interface FeideOrg extends FeideBaseGroup {
+  type: 'fc:org';
+  orgType: OrgType[];
+  norEduOrgNIN?: string;
+  eduOrgLegalName?: string;
+  mail?: string;
+  parent?: string;
+  public: boolean;
+}
+
+export interface FeideGoGroup extends FeideBaseGroup {
+  type: 'fc:gogroup';
+  notBefore: string;
+  notAfter: string;
+  go_type: 'b' | 'u' | 'a';
+  parent: string;
+  go_type_displayName: string;
+  grep?: {
+    displayName: string;
+    code: string;
+  };
+}
+
+export type FeideGroup = FeideOrg | FeideGoGroup;
+
+export interface FeideUser {
+  cn: string[];
+  displayName: string;
+  eduPersonAffiliation: AffiliationType[] | AffiliationType;
+  eduPersonPrimaryAffiliation: string;
+  eduPersonPrincipalName: string;
+  givenName: string[];
+  mail?: string[];
+  schacHomeOrganization?: string;
+  sn: string[];
+  uid: string[];
+}
+
+export interface FeideUserApiType extends FeideUser {
+  groups: FeideGroup[];
+  primarySchool?: FeideGroup;
+}

package/src/User/index.ts

@@ -7,5 +7,9 @@
  */
 
 import AuthModal from './AuthModal';
+import { UserInfo } from './UserInfo';
+import type { FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType, FeideMembershipType, FeideUser } from './apiTypes';
 
+export { UserInfo };
+export type { FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType, FeideMembershipType, FeideUser };
 export default AuthModal;

package/src/User/parseUserObject.ts

@@ -0,0 +1,83 @@
+/**
+ * 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 { groupBy } from 'lodash';
+import { FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType } from './apiTypes';
+
+type GoGroupType = 'basic' | 'teaching' | 'other';
+
+/**
+ * The keys come from:
+ *  https://docs.feide.no/reference/apis/groups_api/groups_data_model/primary_and_secondary_education_groups.html?highlight=gogroup#specific-attributes-for-fc-gogroup
+ */
+const goGroupTypeMap: Record<'a' | 'b' | 'u', GoGroupType> = {
+  a: 'other',
+  b: 'basic',
+  u: 'teaching',
+};
+
+/**
+ * @param groups GoGroups to be mapped to specific GoGroupType
+ * @returns GoGroups mapped to GoGroupType. basic, teaching and other..
+ */
+const createGroupings = (groups: FeideGoGroup[]) => {
+  return groups.reduce<Record<GoGroupType, FeideGoGroup[]>>(
+    (acc, curr) => {
+      const type = goGroupTypeMap[curr.go_type];
+      if (!acc[type]) return acc;
+
+      acc[type] = acc[type].concat(curr);
+      return acc;
+    },
+    {
+      basic: [],
+      teaching: [],
+      other: [],
+    },
+  );
+};
+
+/**
+ * @param groups GoGroups to be mapped to root/child relations.
+ * @returns An object containing root groups mapped with children.
+ */
+const parseOrgs = (groups: FeideGroup[]) => {
+  const [roots, children] = groups.reduce<[FeideOrg[], FeideGoGroup[]]>(
+    (acc, curr) => {
+      if (curr.type === 'fc:org') {
+        return [acc[0].concat(curr), acc[1]];
+      } else {
+        return [acc[0], acc[1].concat(curr)];
+      }
+    },
+    [[], []],
+  );
+
+  const childrenByParentId = groupBy(children, (c) => c.parent);
+  const rootsWithChildren = roots.map((root) => ({ ...root, children: childrenByParentId[root.id] ?? [] }));
+
+  return rootsWithChildren.map((root) => ({
+    ...root,
+    children: createGroupings(root.children),
+  }));
+};
+
+/**
+ * @param user A user object coming from the API
+ * @returns A user object parsed in a presentable way to be handled by i.e UserInfo component.
+ */
+export const parseUserObject = (user: FeideUserApiType) => {
+  const orgs = parseOrgs(user.groups);
+
+  return {
+    uid: user.uid,
+    primaryAffiliation: user.eduPersonPrimaryAffiliation,
+    displayName: user.displayName,
+    mail: user.mail,
+    organizations: orgs,
+  };
+};

package/src/all.scss

@@ -5,3 +5,5 @@
 @import '~@ndla/core/scss/utilities';
 @import '~@ndla/audio-search/scss/audio-search';
 @import '~@ndla/video-search/scss/video-search';
+@import '~@ndla/button/src/all.scss';
+@import '~@ndla/tooltip/src/all.css';

package/src/index.ts

@@ -22,6 +22,7 @@ export {
   ArticleHeaderWrapper,
   ArticleSideBar,
   default as Article,
+  ArticleFavoritesButton,
 } from './Article';
 
 export { default as Table } from './Table';
@@ -108,7 +109,9 @@ export { SearchFieldForm } from './Search/SearchFieldForm';
 
 export { default as MastheadSearchModal } from './Masthead/MastheadSearchModal';
 export { default as MastheadAuthModal } from './Masthead/MastheadAuthModal';
+export { UserInfo } from './User';
 export { default as AuthModal } from './User';
+export type { FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType, FeideMembershipType, FeideUser } from './User';
 
 export { default as CreatedBy } from './CreatedBy';
 
@@ -151,7 +154,7 @@ export type { TopicProps } from './Topic';
 export { default as Aside } from './Aside';
 export { default as AuthorInfo } from './AuthorInfo';
 
-export { default as Breadcrumb, HeaderBreadcrumb, HomeBreadcrumb } from './Breadcrumb';
+export { default as Breadcrumb, HeaderBreadcrumb, HomeBreadcrumb, ActionBreadcrumb } from './Breadcrumb';
 export type { SimpleBreadcrumbItem, IndexedBreadcrumbItem } from './Breadcrumb';
 
 export type { BreadcrumbItemProps } from './Breadcrumblist/Breadcrumblist';
@@ -219,7 +222,15 @@ export { default as CopyParagraphButton } from './CopyParagraphButton';
 
 export { default as ContentPlaceholder } from './ContentPlaceholder';
 export { Notion, ConceptNotion } from './Notion';
-
 export { BannerCard } from './BannerCard';
-
-export { ResourcesView, ResourceElement, Breadcrumbs } from './MyNdla';
+export { VerticalNavigation, Folder, FolderInput } from './MyNdla';
+export { ListResource, BlockResource } from './Resource';
+export type { ListResourceProps } from './Resource';
+export type { TagType } from './TagSelector';
+export { TagSelector } from './TagSelector';
+
+export type { SnackBarItem } from './SnackBar';
+export { SnackBar } from './SnackBar';
+export { InfoBlock } from './InfoBlock';
+export { TreeStructure } from './TreeStructure';
+export type { FolderStructureProps, TreeStructureProps } from './TreeStructure';

package/src/locale/messages-en.ts

@@ -14,6 +14,19 @@ export const { contentTypes, subjectCategories, subjectTypes } = constants;
 const titleTemplate = ' - NDLA';
 
 const messages = {
+  treeStructure: {
+    createFolder: 'Create folder',
+    newFolder: {
+      placeholder: 'Add foldername',
+      defaultName: 'New folder',
+    },
+  },
+  tagSelector: {
+    placeholder: 'Add to tag',
+    removeTag: 'Remove tag {{name}}',
+    hideAllTags: 'Hide all tags',
+    showAllTags: 'Show all tags',
+  },
   htmlTitles: {
     titleTemplate,
     welcomePage: `Frontpage${titleTemplate}`,
@@ -945,6 +958,15 @@ const messages = {
     resource: {
       accessDenied: 'We are sorry, but this resource is only available to teachers who are logged in with Feide.',
     },
+    primarySchool: 'Primary School',
+    name: 'Name',
+    mail: 'E-mail',
+    username: 'Username',
+    groupTypes: {
+      basic: 'Basic group',
+      teaching: 'Teaching group',
+      other: 'Other groups',
+    },
   },
   checkOutNewFeature: 'New feature',
   slateBlockMenu: {
@@ -956,15 +978,55 @@ const messages = {
     close: 'Close fact box',
   },
   myNdla: {
-    resources: 'resources',
-    folders: 'folders',
-    folder: 'folder',
+    resources: '{{count}} Resource',
+    resources_plural: '{{count}} Resources',
+    folders: '{{count}} Folder',
+    folders_plural: '{{count}} Folders',
+    folder: 'Folder',
     myFolders: 'My folders',
     myTags: 'My tags',
     newFolder: 'New folder',
+    newFolderUnder: 'Create new folder under {{folderName}}',
     myAccount: 'My account',
     favourites: 'Favourites',
     help: 'Help',
+    more: 'More options',
+    listView: 'List view',
+    detailView: 'Detailed listview',
+    shortView: 'Short view',
+    myPage: {
+      myPage: 'My page',
+      logout: 'Log out of My NDLA',
+      deleteAccount: 'Delete My NDLA',
+      welcome:
+        'Welcome to my NDLA! You can now save your favourite resources from NDLA and organise them in folders with tags',
+      read: { our: 'Read our', ours: 'Read our' },
+      privacy: 'privacy statement',
+      questions: { question: 'Any questions?', ask: 'Ask us in the chat' },
+      wishToDelete: 'Do you wish to delete your account?',
+      terms: 'terms of use',
+      feide: 'We have retrieved this information from Feide',
+      newFavourite: 'Recently favourited',
+      resource: {
+        addToMyNdla: 'Add to My NDLA',
+        addedToMyNdla: 'Added to My NDLA',
+      },
+      storageInfo: {
+        title: 'How to save your favourite resources from NDLA',
+        text: 'When you wish to save a resource, you can do so by clicking the heart on the top right corner of the page. You will then get an option to store the resource in a folder',
+      },
+      folderInfo: {
+        title: 'How to organise your favourite resources in folders',
+        text: 'You can get to the folder overview by clicking on my folders on the menu to the left. Here you can create new folders and subfolder. You can also create a new folder in the dialogue window that is activated when you click on the heart in a resource',
+      },
+      tagInfo: {
+        title: 'How to tag your favourite resources',
+        text: 'When you save a resource, you will have the option to tag it with a keyword. This tag can be used to find the resource across folders. By selecting my tags on the menu to the left, you will see all the tags your have used. You can also see which resources are tagget with which keyword.',
+      },
+    },
+  },
+  snackbar: {
+    close: 'Close notification',
   },
   labels: {
     category: 'Category',

package/src/locale/messages-nb.ts

@@ -14,6 +14,19 @@ export const { contentTypes, subjectCategories, subjectTypes } = constants;
 const titleTemplate = ' - NDLA';
 
 const messages = {
+  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,
     welcomePage: `Forsiden${titleTemplate}`,
@@ -943,6 +956,15 @@ const messages = {
     resource: {
       accessDenied: 'Vi beklager, men denne ressursen er bare for lærere innlogget med Feide.',
     },
+    primarySchool: 'Hovedskole',
+    name: 'Navn',
+    mail: 'E-post',
+    username: 'Brukernavn',
+    groupTypes: {
+      basic: 'Basisgruppe',
+      teaching: 'Undervisningsgruppe',
+      other: 'Andre grupper',
+    },
   },
   checkOutNewFeature: 'Sjekk ut ny funksjonalitet',
   slateBlockMenu: {
@@ -954,15 +976,55 @@ const messages = {
     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',
+    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/src/locale/messages-nn.ts

@@ -14,6 +14,19 @@ export const { contentTypes, subjectCategories, subjectTypes } = constants;
 const titleTemplate = ' - NDLA';
 
 const messages = {
+  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,
     welcomePage: `Framsida${titleTemplate}`,
@@ -944,6 +957,15 @@ const messages = {
     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',
   slateBlockMenu: {
@@ -955,15 +977,55 @@ const messages = {
     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',
+    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/src/locale/messages-se.ts

@@ -14,6 +14,19 @@ export const { contentTypes, subjectCategories, subjectTypes } = constants;
 const titleTemplate = ' - NDLA';
 
 const messages = {
+  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,
     welcomePage: `Forsiden${titleTemplate}`,
@@ -943,6 +956,15 @@ const messages = {
     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',
   slateBlockMenu: {
@@ -954,15 +976,55 @@ const messages = {
     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',
+    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',