@ndla/ui 33.0.9 → 33.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "33.0.9",
+  "version": "33.1.1",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,19 +32,19 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.12",
-    "@ndla/button": "^6.1.2",
+    "@ndla/button": "^7.0.0",
     "@ndla/carousel": "^2.1.0",
     "@ndla/core": "^3.0.3",
-    "@ndla/forms": "^4.1.3",
+    "@ndla/forms": "^4.1.4",
     "@ndla/hooks": "^1.2.0",
     "@ndla/icons": "^2.1.0",
-    "@ndla/licenses": "^6.1.1",
+    "@ndla/licenses": "^6.1.2",
     "@ndla/modal": "^2.2.1",
-    "@ndla/notion": "^4.1.4",
-    "@ndla/safelink": "^3.1.3",
+    "@ndla/notion": "^4.1.5",
+    "@ndla/safelink": "^3.1.4",
     "@ndla/switch": "^1.0.3",
     "@ndla/tabs": "^2.1.0",
-    "@ndla/tooltip": "^3.1.1",
+    "@ndla/tooltip": "^4.0.0",
     "@ndla/types-learningpath-api": "^0.0.17",
     "@ndla/util": "^3.1.9",
     "@reach/menu-button": "^0.16.2",
@@ -83,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6271acfff097c6476a717ea8a55994adbbccd79a"
+  "gitHead": "1acfb1f32a8076e654c2b6665dccb12eb7e7539f"
 }

package/src/Article/ArticleContent.tsx

@@ -12,7 +12,7 @@ import {
   removeEventListenerForResize,
   // @ts-ignore
 } from '@ndla/article-scripts';
-import { initTooltips } from '@ndla/tooltip';
+import { initPopovers, initTooltips } from '@ndla/tooltip';
 import { initAudioPlayers } from '../AudioPlayer';
 import { initCopyParagraphButtons } from '../CopyParagraphButton';
 import { Locale } from '../types';
@@ -26,8 +26,9 @@ const ArticleContent = ({ content, locale, ...rest }: Props) => {
     removeEventListenerForResize();
     initArticleScripts();
     initAudioPlayers(locale);
-    initCopyParagraphButtons();
     initTooltips();
+    initPopovers();
+    initCopyParagraphButtons();
     return () => {
       removeEventListenerForResize();
     };

package/src/BlogPosts/BlogPost.tsx

@@ -32,11 +32,6 @@ const StyledLicense = styled.span<StyledLicenseProps>`
   border-radius: ${spacing.normal};
   li {
     padding-bottom: 0 !important;
-    svg {
-      width: 18px;
-      height: 18px;
-      min-width: 18px;
-    }
     &:last-child {
       padding-right: ${spacing.xsmall};
     }

package/src/Breadcrumb/ActionBreadcrumb.tsx

@@ -53,7 +53,7 @@ const ActionBreadcrumb = ({ items, actionItems }: Props) => {
     }
     if (item.index === totalCount - 1 && actionItems.length > 0) {
       return (
-        <StyledMenuButton menuItems={actionItems} alignRight size="small">
+        <StyledMenuButton menuItems={actionItems} align="end" size="small">
           <StyledSpan title={item.name}>{item.name}</StyledSpan>
         </StyledMenuButton>
       );

package/src/CopyParagraphButton/initCopyParagraphButtons.tsx

@@ -19,7 +19,8 @@ const forEachElement = (selector: string, callback: Function) => {
 const initCopyParagraphButtons = () => {
   forEachElement('[data-header-copy-container]', (el: HTMLElement) => {
     const title = el.getAttribute('data-title');
-    ReactDOM.hydrate(<CopyParagraphButton title={title} content={title} hydrate={true} />, el);
+
+    ReactDOM.hydrate(<CopyParagraphButton title={title} content={title} hydrate />, el);
   });
 };
 

package/src/Masthead/Masthead.tsx

@@ -9,7 +9,7 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { breakpoints, colors, fonts, mq, spacing } from '@ndla/core';
-import React, { ReactNode, useEffect, useRef } from 'react';
+import React, { ReactNode } from 'react';
 import { MessageBanner } from '../Messages';
 import SkipToMainContent from './SkipToMainContent';
 
@@ -117,26 +117,6 @@ interface Props {
 }
 
 export const Masthead = ({ children, fixed, ndlaFilm, skipToMainContentId, messages, onCloseAlert }: Props) => {
-  const mastheadRef = useRef<HTMLDivElement>(null);
-  const focusHandler = (evt: FocusEvent) => {
-    const mastheadHeight = (mastheadRef.current && mastheadRef.current.offsetHeight) || 0;
-    const { target } = evt;
-    const rect = (target as HTMLElement).getBoundingClientRect();
-    // Focused target is hidden behind Masthead
-    if (rect.y < mastheadHeight) {
-      window.scrollTo(window.scrollX, window.scrollY - (mastheadHeight + 10));
-    }
-  };
-
-  useEffect(() => {
-    if (fixed) {
-      document.addEventListener('focusin', focusHandler);
-      return () => {
-        document.removeEventListener('focusin', focusHandler);
-      };
-    }
-  }, [fixed]);
-
   return (
     <>
       {skipToMainContentId && <SkipToMainContent skipToMainContentId={skipToMainContentId} />}

package/src/MyNdla/Resource/Folder.tsx

@@ -193,7 +193,7 @@ const Folder = ({ id, link, title, subFolders, subResources, type = 'list', menu
           <Count layoutType={type} type={'folder'} count={subFolders} />
           <Count layoutType={type} type={'resource'} count={subResources} />
         </CountContainer>
-        {menuItems && menuItems.length > 0 && <MenuButton alignRight size="small" menuItems={menuItems} />}
+        {menuItems && menuItems.length > 0 && <MenuButton align="end" size="small" menuItems={menuItems} />}
       </MenuWrapper>
     </FolderWrapper>
   );

package/src/Resource/BlockResource.tsx

@@ -193,7 +193,7 @@ const BlockResource = ({
         </ContentWrapper>
         <RightRow>
           {tags && tags.length > 0 && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}
-          {menuItems && menuItems.length > 0 && <MenuButton alignRight size="small" menuItems={menuItems} />}
+          {menuItems && menuItems.length > 0 && <MenuButton align="end" size="small" menuItems={menuItems} />}
         </RightRow>
       </BlockInfoWrapper>
     </BlockElementWrapper>

package/src/Resource/ListResource.tsx

@@ -247,7 +247,7 @@ const ListResource = ({
       {showDescription && <Description description={description} loading={isLoading} />}
       <TagsandActionMenu hasMenuButton={!!(tags && tags.length > 3) || !!(menuItems && menuItems.length)}>
         {tags && tags.length > 0 && <CompressedTagList tagLinkPrefix={tagLinkPrefix} tags={tags} />}
-        {menuItems && menuItems.length > 0 && <MenuButton alignRight size="small" menuItems={menuItems} />}
+        {menuItems && menuItems.length > 0 && <MenuButton align="end" size="small" menuItems={menuItems} />}
       </TagsandActionMenu>
     </ListResourceWrapper>
   );

package/src/Resource/resourceComponents.tsx

@@ -169,7 +169,7 @@ export const CompressedTagList = ({ tags, tagLinkPrefix }: CompressedTagListProp
           size="small"
           menuIcon={<TagCounterWrapper>{`+${remainingTags.length}`}</TagCounterWrapper>}
           menuItems={remainingTags}
-          alignRight
+          align="end"
           aria-label={t('myNdla.moreTags', { count: remainingTags.length })}
         />
       )}

package/src/all.scss

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