@ndla/ui 4.3.2 → 5.0.0

package/src/Article/ArticleNotions.tsx

@@ -6,15 +6,14 @@
  *
  */
 
-import React, { MouseEventHandler } from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
 import Modal, { ModalHeader, ModalCloseButton, ModalBody } from '@ndla/modal';
-import { mq, breakpoints } from '@ndla/core';
-import { Explanation } from '@ndla/icons/common';
-import { Locale } from '../types';
-import { Notion } from '../Notion';
-import { NotionProps } from '../Notion/Notion';
+import { mq, breakpoints, fonts, colors } from '@ndla/core';
+import { Explanation, NotionFlip } from '@ndla/icons/common';
+import { ConceptNotion } from '../Notion';
+import { ConceptNotionType } from '../Notion/ConceptNotion';
 
 const ArticleNotionsContainer = styled.div`
   margin-bottom: 26px;
@@ -23,7 +22,6 @@ const ArticleNotionsContainer = styled.div`
     margin-bottom: 0;
   }
 `;
-/* Stored for later 
 
 const NotionsTrigger = styled.div`
   padding: 0 16px;
@@ -32,7 +30,7 @@ const NotionsTrigger = styled.div`
   background-color: ${colors.brand.greyLighter};
   border-radius: 4px;
   cursor: pointer;
- 
+
   ${mq.range({ from: breakpoints.tablet })} {
     position: fixed;
     border: none;
@@ -80,7 +78,7 @@ const NotionsTrigger = styled.div`
     }
   }
 `;
-*/
+
 const ModalHeadingContainer = styled.div`
   display: flex;
   align-items: center;
@@ -158,36 +156,24 @@ export type NotionRelatedContent = {
 };
 
 type ArticleNotionsProps = {
-  locale: Locale;
-  notions: NotionProps[];
-  onReferenceClick?: MouseEventHandler<HTMLButtonElement>;
+  notions: ConceptNotionType[];
   relatedContent?: NotionRelatedContent[];
-  renderMarkdown?: (text: string) => string;
   buttonOffsetRight: number;
 };
 
-export const ArticleNotions = ({
-  locale,
-  notions,
-  onReferenceClick,
-  relatedContent = [],
-  renderMarkdown,
-  buttonOffsetRight,
-}: ArticleNotionsProps) => {
+export const ArticleNotions = ({ notions, relatedContent = [], buttonOffsetRight }: ArticleNotionsProps) => {
   const { t } = useTranslation();
-  //const leftOffset = `${buttonOffsetRight - 32}px`;
+  const leftOffset = `${buttonOffsetRight - 32}px`;
   return (
     <ArticleNotionsContainer>
       <Modal
-        /* Stored for later
-    
-    activateButton={
+        activateButton={
           <NotionsTrigger role="button" aria-label={t('article.notionsPrompt')} style={{ left: leftOffset }}>
             <NotionFlip />
             <Explanation />
             <span>{t('article.notionsPrompt')}</span>
           </NotionsTrigger>
-        } */
+        }
         size="large"
         backgroundColor="white">
         {(onClose: () => void) => (
@@ -202,13 +188,7 @@ export const ArticleNotions = ({
               </ModalHeadingContainer>
               <NotionsContainer>
                 {notions.map((notion) => (
-                  <Notion
-                    key={notion.id}
-                    locale={locale}
-                    onReferenceClick={onReferenceClick}
-                    renderMarkdown={renderMarkdown}
-                    {...notion}
-                  />
+                  <ConceptNotion key={notion.id} concept={notion} />
                 ))}
               </NotionsContainer>
               {relatedContent.length > 0 && (

package/src/ContentTypeBadge/ContentTypeBadge.tsx

@@ -10,6 +10,7 @@ import {
   ExternalLearningResource,
   SharedResource,
   LearningPath,
+  MultidisciplinaryTopic,
 } from '@ndla/icons/contentType';
 
 import { MenuBook } from '@ndla/icons/action';
@@ -67,6 +68,9 @@ export const ContentTypeBadge = ({ type, background, title, size = 'small', bord
     case contentTypes.TOPIC:
       icon = <Subject title={title} />;
       break;
+    case contentTypes.MULTIDISCIPLINARY_TOPIC:
+      icon = <MultidisciplinaryTopic />;
+      break;
     default:
       break;
   }
@@ -106,3 +110,7 @@ export const SourceMaterialBadge = (props: Omit<Props, 'type'>) => (
 export const LearningPathBadge = (props: Omit<Props, 'type'>) => (
   <ContentTypeBadge {...props} type={contentTypes.LEARNING_PATH} />
 );
+
+export const MultidisciplinaryTopicBadge = (props: Omit<Props, 'type'>) => (
+  <ContentTypeBadge {...props} type={contentTypes.MULTIDISCIPLINARY_TOPIC} />
+);

package/src/ContentTypeBadge/component.content-type-badge.scss

@@ -165,6 +165,11 @@
       background: $subjecttype-background;
     }
   }
+  &--multidisciplinary-topic{
+    &.c-content-type-badge--background {
+      background: #B9B37B;
+    }
+  }
 
   &--large {
     width: 50px;

package/src/FactBox/FactBox.tsx

@@ -6,15 +6,10 @@
  *
  */
 
-import React, { ReactNode, MouseEvent } from 'react';
+import React, { ReactNode, MouseEvent, useState } from 'react';
 import BEMHelper from 'react-bem-helper';
 import Button from '@ndla/button';
-
-const toggleFactBox = (event: MouseEvent<HTMLButtonElement>) => {
-  const button = event.currentTarget;
-  const aside = button?.previousSibling?.parentElement;
-  aside?.classList?.toggle('expanded');
-};
+import { useTranslation } from 'react-i18next';
 
 const classes = new BEMHelper({
   name: 'factbox',
@@ -26,13 +21,25 @@ interface Props {
   children?: ReactNode;
 }
 
-const FactBox = ({ children, dangerouslySetInnerHTML }: Props) => (
-  <aside {...classes()}>
-    <div {...classes('content')} dangerouslySetInnerHTML={dangerouslySetInnerHTML}>
-      {children}
-    </div>
-    <Button {...classes('button')} onClick={toggleFactBox} />
-  </aside>
-);
+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')} />
+    </aside>
+  );
+};
 
 export default FactBox;

package/src/Figure/component.figure.scss

@@ -108,7 +108,7 @@
   background-color: $white;
   padding: $spacing--small 0;
   display: block;
-  border-bottom: 1px solid #d1d6db;
+  border-bottom: 1px solid $brand-grey--light;
 }
 
 .c-figure__caption--hidden-caption {

package/src/Filter/FilterButtons.tsx

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-
 import React, { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import Button from '@ndla/button';
@@ -15,6 +14,7 @@ import { Cross as CrossIcon, Plus as PlusIcon } from '@ndla/icons/action';
 import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
 // @ts-ignore
 import ToggleItem from './ToggleItem';
+import FilterCarousel from './FilterCarousel';
 
 const StyledHeading = styled.h3`
   ${fonts.sizes('16px', '32px')};
@@ -25,12 +25,14 @@ const StyledHeading = styled.h3`
 
 const StyledButtonsWrapper = styled.div`
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  position: relative;
 `;
 
 const StyledButtonElementWrapper = styled.div`
   margin: 0 ${spacing.xsmall} ${spacing.xsmall} 0;
   break-inside: avoid;
+  flex: 1 0 auto;
 `;
 
 const StyledList = styled.ul`
@@ -61,6 +63,7 @@ const StyledButtonContentSelected = styled.span`
 
 const StyledRemoveWrapper = styled.div`
   margin-top: ${spacing.xsmall};
+  margin-left: 10px;
 `;
 
 const ButtonRemoveText = styled.span`
@@ -73,8 +76,8 @@ export type ItemProps = {
   value: string;
   selected?: boolean;
 };
-type Props = {
-  heading: string;
+export type FilterButtonsProps = {
+  heading?: string;
   items: ItemProps[];
   onFilterToggle: (value: string) => void;
   onRemoveAllFilters: () => void;
@@ -83,7 +86,7 @@ type Props = {
   };
 };
 
-export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilters, labels }: Props) => {
+export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilters, labels }: FilterButtonsProps) => {
   const { t } = useTranslation();
   const [isNarrowScreen, setIsNarrowScreen] = useState(false);
 
@@ -155,9 +158,7 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
                           checked={item.selected}
                           label={item.label}
                           component="div"
-                          onChange={() => {
-                            onFilterToggle(item.value);
-                          }}
+                          onChange={() => onFilterToggle(item.value)}
                         />
                       </StyledListItem>
                     ))}
@@ -170,18 +171,16 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
       )}
       {!isNarrowScreen && (
         <>
-          <StyledHeading>{heading}</StyledHeading>
-          <StyledButtonsWrapper>
+          {heading && <StyledHeading>{heading}</StyledHeading>}
+          <FilterCarousel>
             {items.map((item: ItemProps) => (
               <StyledButtonElementWrapper key={item.value}>
                 <Button
                   type="button"
                   size="normal"
-                  greyLightest={!item.selected}
+                  greyLighter={!item.selected}
                   borderShape="rounded"
-                  onClick={() => {
-                    onFilterToggle(item.value);
-                  }}>
+                  onClick={() => onFilterToggle(item.value)}>
                   <StyledButtonContent>{item.label}</StyledButtonContent>
                   {item.selected && (
                     <StyledButtonContentSelected>
@@ -191,7 +190,7 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
                 </Button>
               </StyledButtonElementWrapper>
             ))}
-          </StyledButtonsWrapper>
+          </FilterCarousel>
           <StyledRemoveWrapper>
             {hasSelectedFilters && (
               <Button onClick={onRemoveAllFilters} link>

package/src/Filter/FilterCarousel.tsx

@@ -0,0 +1,166 @@
+/**
+ * Copyright (c) 2021-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 React, { ReactChild, useLayoutEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
+import { ChevronLeft, ChevronRight } from '@ndla/icons/common';
+import { useSwipeable } from 'react-swipeable';
+
+interface Props {
+  children: ReactChild[];
+}
+
+const Carousel = styled.div`
+  overflow-x: hidden;
+  position: relative;
+  margin: 0 13px;
+`;
+
+const Inner = styled.div`
+  flex-wrap: nowrap;
+  transition: transform 0.3s;
+  display: inline-flex;
+  padding: 8px 0;
+`;
+
+const NavButton = styled('button')<{
+  hide?: boolean;
+  alignRight?: boolean;
+}>`
+  box-sizing: border-box;
+  width: 48px;
+  height: 48px;
+  background-color: #fff;
+  border: none;
+  box-shadow: none;
+  border-radius: 100px;
+  transition: opacity 0.5s ease, transform 0.5s ease;
+  transform: translate(0px, 0px, 1);
+  position: absolute;
+  bottom: 0;
+  top: 4px;
+  z-index: 3;
+  left: 3px;
+
+  svg {
+    color: #20588f;
+  }
+
+  &:hover {
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.24);
+    cursor: pointer;
+  }
+
+  ${(props) =>
+    props.hide &&
+    `
+        opacity: 0;
+        transform: translate(-40px, 0px);
+    `}
+
+  ${(props) =>
+    props.alignRight &&
+    `
+        right: 2px;
+        left: unset;
+    `}
+
+    ${(props) =>
+    props.alignRight &&
+    props.hide &&
+    `
+        transform: translate(40px, 0px);
+    `}
+`;
+
+const handlerWrapperCSS = css`
+  position: relative;
+  max-width: 100%;
+  overflow-x: hidden;
+`;
+
+const FilterCarousel = ({ children }: Props) => {
+  const { t } = useTranslation();
+  const [hideNext, setHideNext] = useState(false);
+  const [translateX, setTranslateX] = useState(0);
+  const carouselRef: { current: HTMLDivElement | null } = useRef(null);
+  const innerRef: { current: HTMLDivElement | null } = useRef(null);
+
+  // Check if we need to show the nav buttons
+  useLayoutEffect(() => {
+    if (carouselRef.current && innerRef.current) {
+      const carouselWidth = carouselRef.current.offsetWidth || 0;
+      const innerWidth = innerRef.current.scrollWidth;
+      if (innerWidth <= carouselWidth) {
+        setHideNext(true);
+      } else {
+        setHideNext(false);
+      }
+    } else {
+      setHideNext(true);
+    }
+  }, [children]);
+
+  const updateIndex = (direction: string) => {
+    const carousel = carouselRef.current;
+    const inner = innerRef.current;
+    if (carousel && inner) {
+      const carouselWidth = carousel.offsetWidth;
+      const innerWidth = inner.scrollWidth;
+      if (direction === 'NEXT') {
+        // If we cannot move more than one carouselWidth then just adjust to show all of the concealed items
+        if (carouselWidth + translateX + carouselWidth > innerWidth) {
+          const newOffset = innerWidth - carouselWidth;
+          setTranslateX(translateX + newOffset);
+          setHideNext(true);
+        } else {
+          if (hideNext) {
+            setHideNext(false);
+          }
+          setTranslateX(translateX + carouselWidth);
+        }
+      } else {
+        if (translateX - carouselWidth > 0) {
+          setTranslateX(translateX - carouselWidth);
+        } else {
+          setTranslateX(0);
+        }
+        if (hideNext) {
+          setHideNext(false);
+        }
+      }
+    }
+  };
+
+  const handlers = useSwipeable({
+    onSwipedLeft: () => updateIndex('NEXT'),
+    onSwipedRight: () => updateIndex('PREV'),
+    preventDefaultTouchmoveEvent: false,
+    trackMouse: true,
+  });
+
+  return (
+    <div {...handlers} css={handlerWrapperCSS}>
+      <Carousel ref={carouselRef}>
+        <Inner ref={innerRef} style={{ transform: `translateX(-${translateX}px)` }}>
+          {children}
+        </Inner>
+      </Carousel>
+      <NavButton title={t('carousel.back')} onClick={() => updateIndex('PREV')} hide={translateX < 1}>
+        <ChevronLeft style={{ width: '18px', height: '18px' }} aria-hidden title="" />
+      </NavButton>
+      <NavButton title={t('carousel.forward')} onClick={() => updateIndex('NEXT')} alignRight hide={hideNext}>
+        <ChevronRight style={{ width: '18px', height: '18px' }} aria-hidden title="" />
+      </NavButton>
+    </div>
+  );
+};
+
+export default FilterCarousel;

package/src/Masthead/Masthead.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useEffect, useRef } from 'react';
 import BEMHelper from 'react-bem-helper';
 import { WithTranslation, withTranslation } from 'react-i18next';
 import { DisplayOnPageYOffset } from '../Animation';
@@ -56,23 +56,47 @@ export const Masthead = ({
   ndlaFilm,
   skipToMainContentId,
   t,
-}: Props & WithTranslation) => (
-  <>
-    {skipToMainContentId && (
-      <a tabIndex={0} href={`#${skipToMainContentId}`} {...classes('skip-to-main-content')}>
-        {t('masthead.skipToContent')}
-      </a>
-    )}
-    <div {...classes('placeholder', { infoContent: !!infoContent })} />
-    <div {...classes('', { fixed: !!fixed, infoContent: !!infoContent, showLoaderWhenNeeded, ndlaFilm: !!ndlaFilm })}>
-      {infoContent && (
-        <DisplayOnPageYOffset yOffsetMin={0} yOffsetMax={90}>
-          <MastheadInfo>{infoContent}</MastheadInfo>
-        </DisplayOnPageYOffset>
+}: Props & WithTranslation) => {
+  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 && (
+        <a tabIndex={0} href={`#${skipToMainContentId}`} {...classes('skip-to-main-content')}>
+          {t('masthead.skipToContent')}
+        </a>
       )}
-      <div className={`u-1/1 ${classes('content').className}`}>{children}</div>
-    </div>
-  </>
-);
+      <div {...classes('placeholder', { infoContent: !!infoContent })} />
+      <div
+        {...classes('', { fixed: !!fixed, infoContent: !!infoContent, showLoaderWhenNeeded, ndlaFilm: !!ndlaFilm })}
+        ref={mastheadRef}>
+        {infoContent && (
+          <DisplayOnPageYOffset yOffsetMin={0} yOffsetMax={90}>
+            <MastheadInfo>{infoContent}</MastheadInfo>
+          </DisplayOnPageYOffset>
+        )}
+        <div className={`u-1/1 ${classes('content').className}`}>{children}</div>
+      </div>
+    </>
+  );
+};
 
 export default withTranslation()(Masthead);

package/src/Notion/ConceptNotion.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 React, { useEffect } from 'react';
+//@ts-ignore
+import { initArticleScripts } from '@ndla/article-scripts';
+import { Notion } from '.';
+import { NotionImage } from './NotionImage';
+import NotionVisualElement, { NotionVisualElementType } from './NotionVisualElement';
+import FigureNotion from './FigureNotion';
+import { Copyright } from '../types';
+
+export interface ConceptNotionType {
+  id: number;
+  copyright?: Partial<Copyright>;
+  title: string;
+  text: string;
+  subjectNames?: string[];
+  visualElement?: NotionVisualElementType;
+  image?: {
+    src: string;
+    alt: string;
+  };
+}
+interface Props {
+  concept: ConceptNotionType;
+}
+
+const ConceptNotion = ({ concept }: Props) => {
+  const notionId = `notion-${concept.id}`;
+  const figureId = `notion-figure-${concept.id}`;
+  const visualElementId = `visual-element-${concept.id}`;
+
+  useEffect(() => {
+    initArticleScripts();
+  }, []);
+  return (
+    <FigureNotion
+      id={figureId}
+      figureId={visualElementId}
+      copyright={concept.copyright}
+      title={concept.title}
+      licenseString={concept.copyright?.license?.license ?? ''}
+      type="concept">
+      <Notion
+        id={notionId}
+        title={concept.title}
+        text={concept.text}
+        labels={concept.subjectNames ?? []}
+        imageElement={
+          concept.visualElement?.resource === 'image' && concept.visualElement.image ? (
+            <NotionImage
+              id={visualElementId}
+              src={concept.visualElement.image.src}
+              alt={concept.visualElement.image.alt ?? ''}
+              imageCopyright={concept.visualElement.copyright}
+            />
+          ) : undefined
+        }
+        visualElement={
+          concept.visualElement && concept.visualElement.resource !== 'image' && concept.visualElement.url
+            ? {
+                type: concept.visualElement.resource === 'brightcove' ? 'video' : 'other',
+                metaImage: concept.image && {
+                  url: concept.image.src,
+                  alt: concept.image.alt,
+                },
+                element: <NotionVisualElement visualElement={concept.visualElement} />,
+              }
+            : undefined
+        }></Notion>
+    </FigureNotion>
+  );
+};
+
+export default ConceptNotion;