@ndla/ui 13.2.0 → 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

@@ -719,15 +719,15 @@ var messages = _objectSpread(_objectSpread({
   },
   blogPosts: {
     blog1: {
-      text: 'Nye fag på NDLA',
-      externalLink: 'https://blogg.ndla.no/2021/12/nye-fag-pa-ndla/',
+      text: 'Forslag til årsplaner fra NDLA',
+      externalLink: 'https://blogg.ndla.no/2021/08/forslag-til-arsplaner-hos-ndla/',
       linkText: 'Fagblogg',
       license: 'CC-BY-SA-4.0',
       licenseAuthor: 'Vibeke Klungland'
     },
     blog2: {
-      text: 'Aktiviser elevane med digitale verktøy',
-      externalLink: 'https://blogg.ndla.no/2021/09/aktiviser-elevane-med-digitale-verktoy/',
+      text: 'Huskeliste for kontaktlærere',
+      externalLink: 'https://blogg.ndla.no/2019/08/huskeliste-for-kontaktlaerere/',
       linkText: 'Fagblogg',
       license: 'CC-BY-SA-4.0',
       licenseAuthor: 'Tom Knudsen'
@@ -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

@@ -719,15 +719,15 @@ var messages = _objectSpread(_objectSpread({
   },
   blogPosts: {
     blog1: {
-      text: 'Nye fag på NDLA',
-      externalLink: 'https://blogg.ndla.no/2021/12/nye-fag-pa-ndla/',
+      text: 'Forslag til årsplaner fra NDLA',
+      externalLink: 'https://blogg.ndla.no/2021/08/forslag-til-arsplaner-hos-ndla/',
       linkText: 'Fagblogg',
       license: 'CC-BY-SA-4.0',
       licenseAuthor: 'Vibeke Klungland'
     },
     blog2: {
-      text: 'Aktiviser elevene med digitale verktøy',
-      externalLink: 'https://blogg.ndla.no/2021/09/aktiviser-elevane-med-digitale-verktoy/',
+      text: 'Huskeliste for kontaktlærere',
+      externalLink: 'https://blogg.ndla.no/2019/08/huskeliste-for-kontaktlaerere/',
       linkText: 'Fagblogg',
       license: 'CC-BY-SA-4.0',
       licenseAuthor: 'Tom Knudsen'
@@ -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

@@ -719,15 +719,15 @@ var messages = _objectSpread(_objectSpread({
   },
   blogPosts: {
     blog1: {
-      text: 'Nye fag på NDLA',
-      externalLink: 'https://blogg.ndla.no/2021/12/nye-fag-pa-ndla/',
+      text: 'Forslag til årsplaner fra NDLA',
+      externalLink: 'https://blogg.ndla.no/2021/08/forslag-til-arsplaner-hos-ndla/',
       linkText: 'Fagblogg',
       license: 'CC-BY-SA-4.0',
       licenseAuthor: 'Vibeke Klungland'
     },
     blog2: {
-      text: 'Aktiviser elevane med digitale verktøy',
-      externalLink: 'https://blogg.ndla.no/2021/09/aktiviser-elevane-med-digitale-verktoy/',
+      text: 'Huskeliste for kontaktlærere',
+      externalLink: 'https://blogg.ndla.no/2019/08/huskeliste-for-kontaktlaerere/',
       linkText: 'Fagblogg',
       license: 'CC-BY-SA-4.0',
       licenseAuthor: 'Tom Knudsen'
@@ -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

@@ -719,15 +719,15 @@ var messages = _objectSpread(_objectSpread({
   },
   blogPosts: {
     blog1: {
-      text: 'Nye fag på NDLA',
-      externalLink: 'https://blogg.ndla.no/2021/12/nye-fag-pa-ndla/',
+      text: 'Forslag til årsplaner fra NDLA',
+      externalLink: 'https://blogg.ndla.no/2021/08/forslag-til-arsplaner-hos-ndla/',
       linkText: 'Fagblogg',
       license: 'CC-BY-SA-4.0',
       licenseAuthor: 'Vibeke Klungland'
     },
     blog2: {
-      text: 'Aktiviser elevene med digitale verktøy',
-      externalLink: 'https://blogg.ndla.no/2021/09/aktiviser-elevane-med-digitale-verktoy/',
+      text: 'Huskeliste for kontaktlærere',
+      externalLink: 'https://blogg.ndla.no/2019/08/huskeliste-for-kontaktlaerere/',
       linkText: 'Fagblogg',
       license: 'CC-BY-SA-4.0',
       licenseAuthor: 'Tom Knudsen'
@@ -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

@@ -719,15 +719,15 @@ var messages = _objectSpread(_objectSpread({
   },
   blogPosts: {
     blog1: {
-      text: 'Nye fag på NDLA',
-      externalLink: 'https://blogg.ndla.no/2021/12/nye-fag-pa-ndla/',
+      text: 'Forslag til årsplaner fra NDLA',
+      externalLink: 'https://blogg.ndla.no/2021/08/forslag-til-arsplaner-hos-ndla/',
       linkText: 'Fagblogg',
       license: 'CC-BY-SA-4.0',
       licenseAuthor: 'Vibeke Klungland'
     },
     blog2: {
-      text: 'Aktiviser elevene med digitale verktøy',
-      externalLink: 'https://blogg.ndla.no/2021/09/aktiviser-elevane-med-digitale-verktoy/',
+      text: 'Huskeliste for kontaktlærere',
+      externalLink: 'https://blogg.ndla.no/2019/08/huskeliste-for-kontaktlaerere/',
       linkText: 'Fagblogg',
       license: 'CC-BY-SA-4.0',
       licenseAuthor: 'Tom Knudsen'
@@ -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.0",
+  "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": "35d7818447ec2144b5961dfad4269de46ed260db"
+  "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/Notion/ConceptNotion.tsx

@@ -74,6 +74,7 @@ const ConceptNotion = ({ concept, disableScripts, type, hideIconsAndAuthors, fig
     <FigureNotion
       resizeIframe
       id={figureId}
+      title={concept.title}
       figureId={visualElementId}
       copyright={concept.copyright}
       licenseString={concept.copyright?.license?.license ?? ''}

package/src/Notion/FigureNotion.tsx

@@ -7,7 +7,7 @@
 
 import styled from '@emotion/styled';
 import { colors, spacing } from '@ndla/core';
-import { getLicenseByAbbreviation, getLicenseCredits } from '@ndla/licenses';
+import { getGroupedContributorDescriptionList, getLicenseByAbbreviation, getLicenseCredits } from '@ndla/licenses';
 import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Figure, FigureCaption, FigureLicenseDialog, FigureType } from '../Figure';
@@ -23,7 +23,7 @@ interface Props {
   figureId: string;
   children: ReactNode | ((params: { typeClass: string }) => ReactNode);
   id: string;
-  title?: string;
+  title: string;
   copyright?: Partial<Copyright>;
   licenseString: string;
   type: 'video' | 'h5p' | 'image' | 'concept' | 'other';
@@ -47,10 +47,16 @@ const FigureNotion = ({
 }: Props) => {
   const { t, i18n } = useTranslation();
   const license = getLicenseByAbbreviation(licenseString, i18n.language);
-  const { creators, rightsholders, processors } = getLicenseCredits(copyright);
+  const licenseCredits = getLicenseCredits(copyright);
+  const { creators, rightsholders, processors } = licenseCredits;
 
   const authors = creators.length || rightsholders.length ? [...creators, ...rightsholders] : [...processors];
 
+  const groupedAuthors = getGroupedContributorDescriptionList(licenseCredits, i18n.language).map((item) => ({
+    name: item.description,
+    type: item.label,
+  }));
+
   return (
     <Figure resizeIframe={resizeIframe} id={figureId} type={figureType || 'full-column'}>
       {({ typeClass }) => (
@@ -67,18 +73,19 @@ const FigureNotion = ({
               hideIconsAndAuthors={hideIconsAndAuthors}>
               <FigureLicenseDialog
                 id={id}
-                authors={authors}
+                authors={groupedAuthors}
                 locale={i18n.language}
                 title={title}
                 origin={copyright?.origin}
                 license={license}
                 messages={{
                   close: t('close'),
-                  rulesForUse: t('license.concept.rules'),
+                  rulesForUse: t(`license.${type}.rules`),
                   source: t('source'),
                   learnAboutLicenses: t('license.learnMore'),
                   title: t('title'),
-                }}></FigureLicenseDialog>
+                }}
+              />
             </FigureCaption>
           ) : (
             <BottomBorder />

package/src/Notion/NotionVisualElement.tsx

@@ -68,7 +68,7 @@ const NotionVisualElement = ({ visualElement, id, figureId }: Props) => {
       {visualElement.image?.src ? (
         <img src={visualElement.image?.src} alt={visualElement.image.alt} />
       ) : (
-        <StyledIframe type={type} src={visualElement.url} title={visualElement.title} />
+        <StyledIframe allowFullScreen type={type} src={visualElement.url} title={visualElement.title} />
       )}
     </FigureNotion>
   );

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/SearchTypeResult/SearchViewType.tsx

@@ -16,7 +16,7 @@ import { useTranslation } from 'react-i18next';
 
 const Wrapper = styled.div`
   display: inline-flex;
-  justify-content: center;
+  justify-content: right;
   align-items: center;
   flex: 1;
   ${mq.range({ until: breakpoints.tablet })} {

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>