@ndla/ui 6.0.0 → 6.1.2

package/lib/index.d.ts

@@ -12,7 +12,7 @@ export { default as Table } from './Table';
 export { default as ResourcesWrapper, ResourcesTitle, ResourcesTopicTitle } from './ResourcesWrapper';
 export { createUniversalPortal } from './utils/createUniversalPortal';
 export { default as NoContentBox } from './NoContentBox';
-export { default as Masthead, MastheadItem, getMastheadHeight } from './Masthead';
+export { default as Masthead, MastheadItem, getMastheadHeight, useMastheadHeight } from './Masthead';
 export { default as Portrait } from './Portrait';
 export { default as ContentLoader } from './ContentLoader';
 export { default as RelatedArticleList, RelatedArticle } from './RelatedArticleList';

package/lib/index.js

@@ -24,6 +24,7 @@ var _exportNames = {
   Masthead: true,
   MastheadItem: true,
   getMastheadHeight: true,
+  useMastheadHeight: true,
   Portrait: true,
   ContentLoader: true,
   RelatedArticleList: true,
@@ -280,6 +281,12 @@ Object.defineProperty(exports, "getMastheadHeight", {
     return _Masthead.getMastheadHeight;
   }
 });
+Object.defineProperty(exports, "useMastheadHeight", {
+  enumerable: true,
+  get: function get() {
+    return _Masthead.useMastheadHeight;
+  }
+});
 Object.defineProperty(exports, "Portrait", {
   enumerable: true,
   get: function get() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "6.0.0",
+  "version": "6.1.2",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -34,15 +34,15 @@
     "@ndla/button": "^2.1.2",
     "@ndla/carousel": "^1.2.2",
     "@ndla/core": "^2.0.0",
-    "@ndla/hooks": "^1.1.1",
+    "@ndla/hooks": "^1.1.2",
     "@ndla/icons": "^1.6.1",
     "@ndla/licenses": "^4.0.1",
     "@ndla/modal": "^1.2.2",
-    "@ndla/safelink": "^1.1.2",
+    "@ndla/safelink": "^1.1.3",
     "@ndla/switch": "^0.1.2",
-    "@ndla/tabs": "^1.1.1",
+    "@ndla/tabs": "^1.1.2",
     "@ndla/tooltip": "^0.3.2",
-    "@ndla/util": "^2.0.3",
+    "@ndla/util": "^2.0.4",
     "@reach/menu-button": "^0.16.2",
     "@reach/slider": "^0.16.0",
     "focus-trap-react": "^8.9.2",
@@ -81,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "011253f838aa8a5d856c2909ba023eeec0e99ab8"
+  "gitHead": "6002d3517851d20c9b1c2ab5267d0c91ec74721b"
 }

package/src/Breadcrumblist/Breadcrumblist.tsx

@@ -19,12 +19,14 @@ import {
 import SafeLink from '@ndla/safelink';
 import { useTranslation } from 'react-i18next';
 import MessageBoxTag from '../MessageBox/MessageBoxTag';
+import { useMastheadHeight } from '../Masthead';
 
 type WrapperProps = {
   startOffset?: number;
   isVisible?: boolean;
   leftAlign?: boolean;
   hideOnNarrow?: boolean;
+  mastheadHeight?: number;
 };
 
 type InvertItProps = {
@@ -46,11 +48,11 @@ const Wrapper = styled.div<WrapperProps>`
     width: 240px;
     position: fixed;
     left: 22px;
-    top: 85px;
+    top: ${(props) => props.mastheadHeight || 85}px;
     ${(props) =>
       props.startOffset &&
       `
-        top: calc(${props.startOffset}px + 85px); 
+        top: calc(${props.startOffset}px + ${props.mastheadHeight || 85}px); 
     `}
   }
   ${mq.range({ from: breakpoints.wide })} {
@@ -230,6 +232,8 @@ const Breadcrumblist = ({
   const [wrapperOffset, setWrapperOffset] = useState(startOffset);
   const [useScrollEvent, setUseScrollEvent] = useState(false);
 
+  const { height: mastheadHeight } = useMastheadHeight();
+
   useEffect(() => {
     const handleScroll = () => {
       let position = 0;
@@ -270,7 +274,12 @@ const Breadcrumblist = ({
 
   return (
     <>
-      <Wrapper leftAlign={leftAlign} startOffset={wrapperOffset} hideOnNarrow={hideOnNarrow} isVisible={isVisible}>
+      <Wrapper
+        leftAlign={leftAlign}
+        startOffset={wrapperOffset}
+        hideOnNarrow={hideOnNarrow}
+        isVisible={isVisible}
+        mastheadHeight={mastheadHeight}>
         {items.length > 0 && (
           <>
             <Heading invertedStyle={invertedStyle}>{t('breadcrumb.youAreHere')}</Heading>

package/src/FactBox/FactBox.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode, MouseEvent, useState } from 'react';
+import React, { ReactNode, MouseEvent } from 'react';
 import BEMHelper from 'react-bem-helper';
 import Button from '@ndla/button';
 import { useTranslation } from 'react-i18next';
@@ -21,23 +21,21 @@ interface Props {
   children?: ReactNode;
 }
 
+const toggleFactBox = (event: MouseEvent<HTMLButtonElement>) => {
+  const button = event.currentTarget;
+  const aside = button?.previousSibling?.parentElement;
+  aside?.classList?.toggle('expanded');
+};
 const FactBox = ({ children, dangerouslySetInnerHTML }: Props) => {
-  const [open, setOpen] = useState(false);
   const { t } = useTranslation();
 
-  const toggleFactBox = (event: MouseEvent<HTMLButtonElement>) => {
-    const button = event.currentTarget;
-    const aside = button?.previousSibling?.parentElement;
-    aside?.classList?.toggle('expanded');
-    setOpen((prev) => !prev);
-  };
-
   return (
     <aside {...classes()}>
       <div {...classes('content')} dangerouslySetInnerHTML={dangerouslySetInnerHTML}>
         {children}
       </div>
-      <Button {...classes('button')} onClick={toggleFactBox} title={t(open ? 'factbox.close' : 'factbox.open')} />
+      <Button {...classes('button', 'collapsed')} onClick={toggleFactBox} title={t('factbox.open')} />
+      <Button {...classes('button', 'open')} onClick={toggleFactBox} title={t('factbox.close')} />
     </aside>
   );
 };

package/src/FactBox/component.factbox.scss

@@ -82,8 +82,20 @@ $padding-bottom: 17px;
         transform: rotate(180deg);
         top: 38%;
       }
+      &__button--open {
+        visibility: visible;
+      }
+      &__button--collapsed {
+        visibility: hidden;
+      }
     }
   }
+  &__button--open {
+    visibility: hidden;
+  }
+  &__button--collapsed {
+    visibility: visible;
+  }
 
   &__button {
     position: absolute;

package/src/Frontpage/FrontpageSearch.tsx

@@ -144,6 +144,13 @@ const FrontpageSearch = ({
   }, [inputHasFocus]);
 
   const onBlur = () => {
+    setTimeout(() => {
+      if (searchFieldRef.current) {
+        if (!searchFieldRef.current.contains(document.activeElement)) {
+          onInputBlur();
+        }
+      }
+    }, 0);
     // This is needed when user tabs out of field
     if (!searchFieldValue) {
       onInputBlur();

package/src/Masthead/index.ts

@@ -8,8 +8,8 @@
 
 import Masthead, { MastheadItem } from './Masthead';
 
-import { getMastheadHeight } from './utils';
+import { getMastheadHeight, useMastheadHeight } from './utils';
 
-export { MastheadItem, getMastheadHeight };
+export { MastheadItem, getMastheadHeight, useMastheadHeight };
 
 export default Masthead;

package/src/Masthead/utils.ts

@@ -6,7 +6,40 @@
  *
  */
 
+import { useEffect, useState } from 'react';
+import { resizeObserver } from '@ndla/util';
+
 export const getMastheadHeight = (): number | undefined => {
-  const masthead = document.getElementById('masthead');
-  return masthead?.getBoundingClientRect().height;
+  if (typeof window !== 'undefined') {
+    const masthead = document.getElementById('masthead');
+    return masthead?.getBoundingClientRect().height;
+  }
+};
+
+export const useMastheadHeight = () => {
+  const [height, setHeight] = useState<number>();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (mounted) {
+      const masthead = document.getElementById('masthead');
+
+      const handleHeightChange = (el: HTMLElement) => {
+        const newHeight = el.getBoundingClientRect().height;
+        setHeight(newHeight);
+      };
+
+      if (masthead) {
+        resizeObserver(masthead, handleHeightChange);
+      }
+    }
+  }, [mounted]);
+
+  return {
+    height,
+  };
 };

package/src/Search/ContentTypeResult.tsx

@@ -130,6 +130,7 @@ const ContentTypeResult = ({
             return (
               <StyledListItem key={path} delayAnimation={delayAnimation}>
                 <SafeLink
+                  tabIndex={-1}
                   css={shouldHighlight && highlightStyle}
                   data-highlighted={shouldHighlight || false}
                   {...linkProps}
@@ -153,7 +154,8 @@ const ContentTypeResult = ({
                 ghostPill
                 css={[showAllButtonStyle, shouldHighlightShowAllButton && noWidthhighlightStyle]}
                 data-highlighted={shouldHighlightShowAllButton}
-                onClick={() => toggleShowAll(!showAll)}>
+                onClick={() => toggleShowAll(!showAll)}
+                tabIndex={-1}>
                 {showAll ? messages.showLessResultLabel : messages.allResultLabel}
                 {showAll ? <ChevronUp /> : <ChevronDown />}
               </Button>

package/src/Search/SearchField.jsx

@@ -123,7 +123,8 @@ const SearchField = ({
             if (inputRef) {
               inputRef.current.focus();
             }
-          }}>
+          }}
+          onBlur={onBlur}>
           {t('welcomePage.resetSearch')}
         </button>
       )}

package/src/Search/SearchResultSleeve.tsx

@@ -315,13 +315,19 @@ const SearchResultSleeve = ({
         )}
         <div>
           <SearchLinkContainer>
-            <StyledSearchLink css={keyboardPathNavigation === GO_TO_SEARCHPAGE && highlightStyle} to={allResultUrl}>
+            <StyledSearchLink
+              css={keyboardPathNavigation === GO_TO_SEARCHPAGE && highlightStyle}
+              to={allResultUrl}
+              tabIndex={-1}>
               <SearchIcon className="c-icon--22" />
               <strong ref={searchAllRef}>{searchString}</strong>
               <small>{t('welcomePage.searchAllInfo')}</small>
             </StyledSearchLink>
             {suggestion && suggestionUrl && (
-              <StyledSearchLink css={keyboardPathNavigation === GO_TO_SUGGESTION && highlightStyle} to={suggestionUrl}>
+              <StyledSearchLink
+                css={keyboardPathNavigation === GO_TO_SUGGESTION && highlightStyle}
+                to={suggestionUrl}
+                tabIndex={-1}>
                 <SearchIcon className="c-icon--22" />
                 <small>{t('searchPage.resultType.searchPhraseSuggestion')}</small>
                 <strong ref={searchSuggestionRef}>{suggestion}</strong>

package/src/index.ts

@@ -32,7 +32,7 @@ export { createUniversalPortal } from './utils/createUniversalPortal';
 
 export { default as NoContentBox } from './NoContentBox';
 
-export { default as Masthead, MastheadItem, getMastheadHeight } from './Masthead';
+export { default as Masthead, MastheadItem, getMastheadHeight, useMastheadHeight } from './Masthead';
 
 export { default as Portrait } from './Portrait';