@ndla/ui 13.2.2 → 14.0.0

package/lib/index.d.ts

@@ -37,7 +37,9 @@ export { default as ContentTypeResult } from './Search/ContentTypeResult';
 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 } from './User';
 export { default as CreatedBy } from './CreatedBy';
 export { default as Breadcrumblist } from './Breadcrumblist';
 export { MessageBox, MessageBoxTag, MessageBoxType } from './MessageBox';

package/lib/index.js

@@ -87,6 +87,7 @@ var _exportNames = {
   SearchFieldForm: true,
   MastheadSearchModal: true,
   MastheadAuthModal: true,
+  UserInfo: true,
   AuthModal: true,
   CreatedBy: true,
   Breadcrumblist: true,
@@ -665,6 +666,12 @@ Object.defineProperty(exports, "MastheadAuthModal", {
     return _MastheadAuthModal["default"];
   }
 });
+Object.defineProperty(exports, "UserInfo", {
+  enumerable: true,
+  get: function get() {
+    return _User.UserInfo;
+  }
+});
 Object.defineProperty(exports, "AuthModal", {
   enumerable: true,
   get: function get() {
@@ -1285,7 +1292,7 @@ var _MastheadSearchModal = _interopRequireDefault(require("./Masthead/MastheadSe
 
 var _MastheadAuthModal = _interopRequireDefault(require("./Masthead/MastheadAuthModal"));
 
-var _User = _interopRequireDefault(require("./User"));
+var _User = _interopRequireWildcard(require("./User"));
 
 var _CreatedBy = _interopRequireDefault(require("./CreatedBy"));
 

package/lib/locale/messages-en.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: {

package/lib/locale/messages-en.js

@@ -906,6 +906,15 @@ var messages = _objectSpread(_objectSpread({
     },
     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',

package/lib/locale/messages-nb.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: {

package/lib/locale/messages-nb.js

@@ -906,6 +906,15 @@ var messages = _objectSpread(_objectSpread({
     },
     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',

package/lib/locale/messages-nn.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: {

package/lib/locale/messages-nn.js

@@ -906,6 +906,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',

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: {

package/lib/locale/messages-se.js

@@ -906,6 +906,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',

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: {

package/lib/locale/messages-sma.js

@@ -906,6 +906,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',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "13.2.2",
+  "version": "14.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -36,13 +36,13 @@
     "@ndla/core": "^2.1.1",
     "@ndla/hooks": "^1.1.4",
     "@ndla/icons": "^1.7.1",
-    "@ndla/licenses": "^4.1.2",
+    "@ndla/licenses": "^4.1.3",
     "@ndla/modal": "^1.2.8",
-    "@ndla/notion": "^3.1.9",
+    "@ndla/notion": "^3.1.10",
     "@ndla/safelink": "^2.0.2",
     "@ndla/switch": "^0.1.5",
     "@ndla/tabs": "^1.1.6",
-    "@ndla/tooltip": "^0.3.5",
+    "@ndla/tooltip": "^1.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": "79850025a1ab61d341fc5a507bed6fde7d7f4f84"
 }

package/src/Footer/FooterAuth.tsx

@@ -6,15 +6,13 @@
  *
  */
 
-import React from 'react';
-import { useTranslation } from 'react-i18next';
 import styled from '@emotion/styled';
+import Button from '@ndla/button';
 import { animations, colors, fonts, spacing } from '@ndla/core';
 import { ChevronDown, FeideText, LogIn, LogOut } from '@ndla/icons/common';
-import Button from '@ndla/button';
-
-import { AuthModalProps } from '../User/AuthModal';
-import AuthModal from '../User';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import AuthModal, { AuthModalProps } from '../User/AuthModal';
 
 const Wrapper = styled.div`
   display: flex;
@@ -66,7 +64,7 @@ const AuthedButton = styled(Button)`
   }
 `;
 
-const FooterAuth = ({ isAuthenticated, onAuthenticateClick, authorizedRole, ...rest }: AuthModalProps) => {
+const FooterAuth = ({ isAuthenticated, user, onAuthenticateClick, ...rest }: AuthModalProps) => {
   const { t } = useTranslation();
   return (
     <Wrapper>
@@ -78,11 +76,11 @@ const FooterAuth = ({ isAuthenticated, onAuthenticateClick, authorizedRole, ...r
           <AuthModal
             {...rest}
             isAuthenticated={isAuthenticated}
+            user={user}
             onAuthenticateClick={onAuthenticateClick}
-            authorizedRole={authorizedRole}
             activateButton={
               <AuthedButton ghostPill size="medium">
-                {t('user.loggedInAsButton', { role: authorizedRole })}
+                {t('user.loggedInAsButton', { role: user?.eduPersonPrimaryAffiliation })}
                 <ChevronDown />
               </AuthedButton>
             }

package/src/LearningPaths/LearningPathMenu.tsx

@@ -123,7 +123,7 @@ const LearningPathMenu = ({
               css={css`
                 padding-left: ${spacing.small};
               `}>
-              <Tooltip align="right" tooltip={t('learningPath.openMenuTooltip')}>
+              <Tooltip tooltip={t('learningPath.openMenuTooltip')}>
                 <StyledToggleMenubutton type="button" onClick={() => toggleOpenState(!isOpen)}>
                   {!isOpen ? <ArrowExpandRight /> : <ArrowExpandLeft />}
                 </StyledToggleMenubutton>

package/src/Masthead/MastheadAuthModal.tsx

@@ -11,8 +11,7 @@ import styled from '@emotion/styled';
 import Button from '@ndla/button';
 import { Feide } from '@ndla/icons/common';
 
-import AuthModal from '../User';
-import { AuthModalProps } from '../User/AuthModal';
+import AuthModal, { AuthModalProps } from '../User/AuthModal';
 
 type FeideWrapperProps = {
   inverted?: boolean;
@@ -31,11 +30,11 @@ const StyledButton = styled(Button)<FeideWrapperProps>`
   }
 `;
 
-type Props = {
+interface Props extends AuthModalProps {
   inverted?: boolean;
-};
+}
 
-const MastheadAuthModal = ({ inverted, ...rest }: Props & AuthModalProps) => {
+const MastheadAuthModal = ({ inverted, ...rest }: Props) => {
   return (
     <AuthModal
       {...rest}

package/src/ResourceGroup/ResourceItem.tsx

@@ -273,19 +273,19 @@ const ResourceItem = ({
       <TypeWrapper>
         {contentTypeName && <ContentTypeName>{contentTypeName}</ContentTypeName>}
         {access && access === 'teacher' && (
-          <Tooltip tooltip={t('article.access.onlyTeacher')} align="left">
+          <Tooltip tooltip={t('article.access.onlyTeacher')}>
             <HumanMaleBoard className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons" />
           </Tooltip>
         )}
         {showAdditionalResources && contentTypeDescription && (
           <>
             {additional && (
-              <Tooltip tooltip={contentTypeDescription} align="left">
+              <Tooltip tooltip={contentTypeDescription}>
                 <Additional className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons" />
               </Tooltip>
             )}
             {!additional && (
-              <Tooltip tooltip={contentTypeDescription} align="left">
+              <Tooltip tooltip={contentTypeDescription}>
                 <Core className="c-icon--20 u-margin-left-tiny c-topic-resource__list__additional-icons" />
               </Tooltip>
             )}

package/src/Search/ActiveFilters.jsx

@@ -85,7 +85,6 @@ const ActiveFilters = ({ filters, onFilterRemove, showOnSmallScreen }) => {
         <StyledActiveFilterWrapper key={filterKey}>
           {filterLength > 1 ? (
             <Tooltip
-              align="top"
               tooltip={t('searchPage.searchFilterMessages.removeFilter', {
                 filterName: filter.title,
               })}>

package/src/Search/ContentTypeResult.tsx

@@ -1,29 +1,28 @@
-import React, { useState, useEffect, useRef, ReactElement } from 'react';
 import Button from '@ndla/button';
-import Tooltip from '@ndla/tooltip';
-import { Additional, ChevronUp, ChevronDown } from '@ndla/icons/common';
+import { Additional, ChevronDown, ChevronUp } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
+import Tooltip from '@ndla/tooltip';
+import React, { ReactElement, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import ContentTypeBadge from '../ContentTypeBadge';
 import { ContentTypeResultType, Resource } from '../types';
 import {
   highlightStyle,
+  noWidthhighlightStyle,
   showAllButtonStyle,
-  tooltipStyle,
-  StyledNoHit,
-  StyledWrapper,
   StyledHeader,
-  StyledListItem,
   StyledList,
+  StyledListItem,
+  StyledNoHit,
   StyledTag,
-  noWidthhighlightStyle,
+  StyledWrapper,
 } from './ContentTypeResultStyles';
 import { isPathToHighlight } from './IsPathToHighlight';
 
 const renderAdditionalIcon = (label: string, isAdditional?: boolean): ReactElement | null => {
   if (isAdditional && label) {
     return (
-      <Tooltip tooltip={label} align="top" css={tooltipStyle}>
+      <Tooltip tooltip={label}>
         <Additional className="c-icon--20" />
       </Tooltip>
     );

package/src/SearchTypeResult/ActiveFilters.tsx

@@ -120,8 +120,6 @@ const ActiveFilters = ({
       <StyledActiveFilterWrapper key={filterKey}>
         {filterLength > 1 ? (
           <Tooltip
-            delay={2000}
-            align="bottom"
             tooltip={t('searchPage.searchFilterMessages.removeFilter', {
               filterName: filter.title,
             })}>
@@ -139,7 +137,7 @@ const ActiveFilters = ({
       {filterItems}
       {filterLength > showFilterCount && (
         <StyledActiveFilterWrapper>
-          <Tooltip delay={2000} align="bottom" tooltip={t('searchPage.searchFilterMessages.noValuesButtonText')}>
+          <Tooltip tooltip={t('searchPage.searchFilterMessages.noValuesButtonText')}>
             <Button
               aria-label={t('searchPage.searchFilterMessages.additionalSubjectFilters', {
                 count: filterLength - showFilterCount + 1,

package/src/TopicIntroductionList/TopicIntroduction.tsx

@@ -64,12 +64,12 @@ export const TopicIntroduction = ({
             {contentTypeDescription}
           </span>
           {additional && (
-            <Tooltip tooltip={t('resource.tooltipAdditionalTopic')} align="left">
+            <Tooltip tooltip={t('resource.tooltipAdditionalTopic')}>
               <Additional className="c-icon--20 u-margin-left-tiny" />
             </Tooltip>
           )}
           {!additional && showAdditionalCores && (
-            <Tooltip tooltip={t('resource.tooltipCoreTopic')} align="left">
+            <Tooltip tooltip={t('resource.tooltipCoreTopic')}>
               <Core className="c-icon--20 u-margin-left-tiny" />
             </Tooltip>
           )}

package/src/TopicIntroductionList/TopicShortcutItem.tsx

@@ -17,11 +17,7 @@ interface Props {
 const ShortcutItem = ({ shortcut: { id, tooltip, contentType, url, count } }: Props) => {
   const { t } = useTranslation();
   return (
-    <Tooltip
-      id={`shortcut-tooltip-${id}`}
-      tooltip={t('resource.shortcutsTooltip', { count })}
-      delay={100}
-      align="bottom">
+    <Tooltip id={`shortcut-tooltip-${id}`} tooltip={t('resource.shortcutsTooltip', { count })}>
       <SafeLink {...classes('item-link')} aria-label={tooltip} to={url}>
         <ContentTypeBadge type={contentType} size="x-small" background />
         <span {...classes('count')}>{count}</span>

package/src/User/AuthModal.tsx

@@ -13,6 +13,8 @@ import Modal, { ModalCloseButton } from '@ndla/modal';
 import Button from '@ndla/button';
 import { FeideText, LogIn, LogOut, HumanMaleBoard } from '@ndla/icons/common';
 import { fonts, spacing } from '@ndla/core';
+import { UserInfo } from './UserInfo';
+import { FeideUserApiType } from './apiTypes';
 
 const StyledModalBody = styled.div`
   padding: ${spacing.normal} ${spacing.medium} ${spacing.medium};
@@ -38,17 +40,6 @@ const StyledHeading = styled.h2`
   }
 `;
 
-const StyledAuthorizedInfoList = styled.ul`
-  margin: 0;
-  padding: 0 0 0 ${spacing.normal};
-  list-style-image: unset;
-
-  li {
-    margin: 0;
-    font-weight: ${fonts.weight.semibold};
-  }
-`;
-
 const StyledHumanMaleBoardIconWrapper = styled.span`
   margin-left: ${spacing.xsmall};
 `;
@@ -63,9 +54,8 @@ const StyledButtonWrapper = styled.div`
 
 export type AuthModalProps = {
   isAuthenticated?: boolean;
+  user?: FeideUserApiType;
   showGeneralMessage?: boolean;
-  authorizedRole?: string;
-  authorizedCollectedInfo?: string[];
   onAuthenticateClick: () => void;
   position?: 'top' | 'bottom';
   activateButton?: ReactElement;
@@ -76,9 +66,8 @@ export type AuthModalProps = {
 
 const AuthModal = ({
   isAuthenticated,
+  user,
   showGeneralMessage = true,
-  authorizedRole,
-  authorizedCollectedInfo,
   onAuthenticateClick,
   position = 'top',
   activateButton,
@@ -104,17 +93,7 @@ const AuthModal = ({
             <ModalCloseButton onClick={onClose} title="Lukk" />
           </StyledModalHeader>
           <StyledModalContent>
-            {authorizedRole && <p>{t('user.loggedInAs', { role: authorizedRole })}</p>}
-            {authorizedCollectedInfo && authorizedCollectedInfo.length > 0 && (
-              <div>
-                {t('user.modal.collectedInfo')}
-                <StyledAuthorizedInfoList>
-                  {authorizedCollectedInfo.map((value) => (
-                    <li key={value}>{value}</li>
-                  ))}
-                </StyledAuthorizedInfoList>
-              </div>
-            )}
+            {user && <UserInfo user={user} />}
             {children}
             {showGeneralMessage && (
               <p>

package/src/User/UserInfo.tsx

@@ -0,0 +1,80 @@
+/**
+ * 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 styled from '@emotion/styled';
+import { spacing } from '@ndla/core';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FeideUserApiType } from './apiTypes';
+import { parseUserObject } from './parseUserObject';
+
+const InfoList = styled.ul`
+  padding: 0 0 0 ${spacing.normal};
+`;
+
+interface Props {
+  user: FeideUserApiType;
+}
+
+const ShortInfoDiv = styled.div`
+  margin: 2rem auto;
+`;
+
+export const UserInfo = ({ user }: Props) => {
+  const { t } = useTranslation();
+
+  const parsedUser = parseUserObject(user);
+
+  return (
+    <div>
+      {
+        <p>
+          {t('user.loggedInAs', {
+            role: t(`user.role.${parsedUser.primaryAffiliation}`),
+          })}
+        </p>
+      }
+
+      <ShortInfoDiv>
+        <div>
+          {t('user.username')}: <b>{user.uid}</b>
+        </div>
+        <div>
+          {t('user.name')}: <b>{user.displayName}</b>
+        </div>
+        <div>
+          {t('user.mail')}: <b>{user.mail?.join(', ')}</b>
+        </div>
+      </ShortInfoDiv>
+
+      {t('user.modal.collectedInfo')}
+
+      <InfoList>
+        {parsedUser.organizations.map((org) => (
+          <li key={org.id}>
+            {`${org.displayName}${org.membership.primarySchool ? ` (${t('user.primarySchool')})` : ''}`}
+            <InfoList>
+              {Object.entries(org.children).map(([groupType, val]) => {
+                if (val.length < 1) return null;
+                return (
+                  <li key={groupType}>
+                    {t(`user.groupTypes.${groupType}`)}
+                    <InfoList>
+                      {val.map((group) => (
+                        <li key={group.id}>{`${group.displayName}${group.grep ? ` (${group.grep.code})` : ''}`}</li>
+                      ))}
+                    </InfoList>
+                  </li>
+                );
+              })}
+            </InfoList>
+          </li>
+        ))}
+      </InfoList>
+    </div>
+  );
+};