@ndla/ui 3.3.6 → 3.3.11

package/src/MessageBox/MessageBox.tsx

@@ -1,63 +1,92 @@
-import React from 'react';
+/**
+ * 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, { useState } from 'react';
 import styled from '@emotion/styled';
 import Sticky from 'react-sticky-el';
 import { breakpoints, fonts, mq, spacing } from '@ndla/core';
-// @ts-ignore
-import Button from '@ndla/button';
-import { Cross } from '@ndla/icons/action';
-import { InformationOutline } from '@ndla/icons/common';
+import { InformationOutline, HumanMaleBoard } from '@ndla/icons/common';
 import { WithTranslation, withTranslation } from 'react-i18next';
+import { CloseButton } from '../CloseButton';
 
+export enum MessageBoxType {
+  ghost = 'ghost',
+  fullpage = 'fullpage',
+  medium = 'medium',
+}
 type WrapperProps = {
-  boxType?: 'info';
+  boxType?: MessageBoxType;
 };
 
-const colorsByType = (type: WrapperProps['boxType']) => {
-  const colors = {
-    color: '#551700',
-    backgroundColor: '#FEEFB3',
-  };
+const StyleByType = (type: WrapperProps['boxType']) => {
+  const styles = {
+    margin: '1px',
+    color: '#444444',
+    backgroundColor: '#f9f4c8',
+    border: 'none',
+    display: 'flex',
+    width: 'auto',
+    position: 'relative',
+    transform: 'auto',
+    left: 'auto',
+  }; //Different CSS properties for different types of message-boxes
   switch (type) {
-    case 'info':
-    default:
+    case 'fullpage':
+      styles.margin = '0 auto';
+      styles.display = 'none';
+      styles.width = '100vw';
+      styles.position = 'relative';
+      styles.left = '50%';
+      styles.transform = 'translateX(-50%)';
+      break;
+    case 'medium':
+      styles.margin = '0px';
+      break;
+    case 'ghost':
+      styles.backgroundColor = 'transparent';
+      styles.border = '1px solid #D1D6DB';
+      styles.color = '#444444';
+
       break;
   }
-  return colors;
+  return styles;
 };
 
 const Wrapper = styled.div<WrapperProps>`
-  background: ${(props) => colorsByType(props.boxType).backgroundColor};
-  color: ${(props) => colorsByType(props.boxType).color};
+  background: ${(props) => StyleByType(props.boxType).backgroundColor};
+  color: ${(props) => StyleByType(props.boxType).color};
   font-size: 18px;
   line-height: 32px;
-  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
+  font-family: ${fonts.sans};
   display: flex;
   padding: ${spacing.small};
-  position: relative;
+  position: ${(props) => StyleByType(props.boxType).position};
+  border: ${(props) => StyleByType(props.boxType).border};
+  border-radius: 5px;
+  transform: ${(props) => StyleByType(props.boxType).transform};
+  left: ${(props) => StyleByType(props.boxType).left};
+  z-index: 10;
+  width: ${(props) => StyleByType(props.boxType).width};
 `;
 
-const Label = styled.label`
-  font-weight: ${fonts.weight.bold};
-  display: inline-block;
-  margin-right: ${spacing.small};
-  ${mq.range({ until: breakpoints.tabletWide })} {
-    font-size: 18px;
-    font-weight: ${fonts.weight.semibold};
-  }
-`;
-
-const InfoWrapper = styled.div`
-  margin: 0 auto;
-  padding: 0 100px;
+const InfoWrapper = styled.div<WrapperProps>`
+  margin: ${(props) => StyleByType(props.boxType).margin};
+  padding: 10px;
   display: flex;
   ${mq.range({ until: breakpoints.tabletWide })} {
     padding: 0 90px 0 0;
   }
   ${mq.range({ until: breakpoints.mobileWide })} {
-    padding: 0 50px 0 0;
+    padding: 0 5px 0 0;
+    font-size: 16px;
   }
 `;
-const TextWrapper = styled.div`
+const TextWrapper = styled.div<WrapperProps>`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -67,88 +96,80 @@ const TextWrapper = styled.div`
   }
 `;
 
-const IconWrapper = styled.div`
+const IconWrapper = styled.div<WrapperProps>`
   padding-right: ${spacing.small};
-  display: flex;
+  display: ${(props) => StyleByType(props.boxType).display};
   align-items: flex-start;
   ${mq.range({ from: breakpoints.tabletWide })} {
     padding-top: 4px;
   }
 `;
 
-const CloseButtonWrapper = styled.div`
-  position: absolute;
-  top: 13px;
-  right: ${spacing.small};
-  display: flex;
-  justify-content: flex-end;
-  ${mq.range({ from: breakpoints.tabletWide })} {
-    top: 16px;
-  }
-`;
-
-const CloseButton = styled(Button)`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-weight: ${fonts.weight.semibold};
-  font-size: 16px;
-  color: ${(props) => colorsByType(props.boxType).color};
-  &:hover {
-    color: ${(props) => colorsByType(props.boxType).color};
-  }
+const LinkWrapper = styled.div`
+  display: block;
+  width: 100%;
+  background-color: #f9f4c8;
+  padding-bottom: 20px;
+  margin-top: -2px;
+  padding-left: 58px;
+  border-radius: 0px 0px 5px 5px;
   ${mq.range({ until: breakpoints.mobileWide })} {
-    flex-direction: column-reverse;
+    padding-left: 45px;
   }
 `;
-
-const CloseButtonText = styled.span`
-  margin-right: ${spacing.small};
-  line-height: 1;
+const Link = styled.a`
+  color: #20588f;
+  font-size: 16px;
+  padding-bottom: 1px;
+  margin: 0px 40px 1px 2px;
+  font-family: ${fonts.sans};
   ${mq.range({ until: breakpoints.mobileWide })} {
-    margin-right: 0;
-    ${fonts.sizes('14px', '18px')};
-    font-weight: ${fonts.weight.normal};
+    margin: 0px 15px 1px 5px;
+    box-shadow: none;
   }
 `;
 
+type LinkProps = {
+  href?: string;
+  text?: string;
+};
 type Props = {
   type?: WrapperProps['boxType'];
-  heading?: string;
   sticky?: boolean;
-  onClose?: () => void;
-  children: React.ReactNode;
+  onClose?: boolean;
+  children?: string;
+  links?: LinkProps[];
 };
 
-export const MessageBox = ({
-  heading,
-  type = 'info',
-  sticky = true,
-  onClose,
-  children,
-  t,
-}: Props & WithTranslation) => (
-  <Sticky disabled={!sticky} stickyStyle={{ zIndex: 9999 }}>
-    <Wrapper boxType={type}>
-      <InfoWrapper>
-        <IconWrapper>
-          <InformationOutline style={{ width: '24px', height: '24px' }} />
-        </IconWrapper>
-        <TextWrapper>
-          {heading && <Label>{heading}</Label>}
-          {children}
-        </TextWrapper>
-      </InfoWrapper>
-      {onClose && (
-        <CloseButtonWrapper>
-          <CloseButton link onClick={onClose}>
-            <CloseButtonText>{t('close')}</CloseButtonText>
-            <Cross style={{ width: '24px', height: '24px' }} />
-          </CloseButton>
-        </CloseButtonWrapper>
+export const MessageBox = ({ type, sticky = false, onClose, children, links, t }: Props & WithTranslation) => {
+  const [hideMessageBox, setHideMessageBox] = useState(false);
+  const onCloseMessageBox = () => {
+    setHideMessageBox(true);
+  };
+  const Icon = type === 'ghost' ? HumanMaleBoard : InformationOutline;
+  return (
+    //StickyStyle top:84 makes sure that the messagebox sits beneath the masthead (header ) and the topOffsett sets it so that it applies when reaching the top of the messagebox
+    <Sticky disabled={!sticky} stickyStyle={{ zIndex: 9998, top: 84 }} topOffset={-84}>
+      <Wrapper boxType={type} style={{ display: hideMessageBox ? 'none' : 'flex' }}>
+        <InfoWrapper boxType={type}>
+          <IconWrapper boxType={type}>
+            <Icon style={{ width: '24px', height: '24px' }} />
+          </IconWrapper>
+          <TextWrapper>{children}</TextWrapper>
+        </InfoWrapper>
+        {onClose && <CloseButton onClick={onCloseMessageBox} color="#444444" />}
+      </Wrapper>
+
+      {links && (
+        //loops through the links passed in as properties if there are any and creates a working link for each of them
+        <LinkWrapper style={{ display: hideMessageBox ? 'none' : 'flex' }}>
+          {links.map((x) => (
+            <Link href={x.href}>{x.text}</Link>
+          ))}
+        </LinkWrapper>
       )}
-    </Wrapper>
-  </Sticky>
-);
+    </Sticky>
+  );
+};
 
 export default withTranslation()(MessageBox);

package/src/MessageBox/MessageBoxTag.tsx

@@ -0,0 +1,35 @@
+/**
+ * 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 from 'react';
+import { useTranslation } from 'react-i18next';
+
+import styled from '@emotion/styled';
+
+const MiniMesssage = styled.div`
+  background-color: #f9f4c8;
+  text-align: center;
+  display: inline-block;
+  padding: 5px;
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: 14px;
+  margin-left: 10px;
+  margin-bottom: 10px;
+  border-radius: 5px;
+`;
+
+type Props = {
+  tagMessage: string;
+};
+export const MessageBoxTag = ({ tagMessage }: Props) => {
+  const { t } = useTranslation();
+  return <MiniMesssage>{t(tagMessage)}</MiniMesssage>;
+};
+
+export default MessageBoxTag;

package/src/MessageBox/index.ts

@@ -7,5 +7,7 @@
  */
 
 import MessageBox from './MessageBox';
+import MessageBoxTag from './MessageBoxTag';
+import { MessageBoxType } from './MessageBox';
 
-export { MessageBox };
+export { MessageBox, MessageBoxTag, MessageBoxType };

package/src/NDLAFilm/FilmSlideshow.tsx

@@ -0,0 +1,265 @@
+/**
+ * Copyright (c) 2016-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, { useCallback, useEffect, useRef, useState } from 'react';
+// @ts-ignore
+import { SwipeEventData, useSwipeable } from 'react-swipeable';
+import BEMHelper from 'react-bem-helper';
+import SafeLink from '@ndla/safelink';
+import { OneColumn } from '../Layout';
+import Spinner from '../Spinner';
+import { NDLAMovie } from './interfaces';
+import NavigationArrow from './NavigationArrow';
+import SlideshowIndicator from './SlideshowIndicator';
+
+interface Props {
+  autoSlide: boolean;
+  randomStart: boolean;
+  slideshow: NDLAMovie[];
+  slideInterval: number;
+}
+
+const classes = new BEMHelper({
+  name: 'film-slideshow',
+  prefix: 'c-',
+});
+
+const defaultTransitionSwipeEnd = 'transform 600ms cubic-bezier(0, 0.76, 0.09, 1)';
+const defaultTransitionText = 'opacity 600ms ease';
+
+const renderSlideItem = (slide: NDLAMovie) => (
+  <div
+    {...classes('item')}
+    key={slide.id}
+    role="img"
+    aria-label={(slide.metaImage && slide.metaImage.alt) || ''}
+    style={{
+      backgroundImage: `url(${(slide.metaImage && slide.metaImage.url) || ''})`,
+    }}
+  />
+);
+
+const FilmSlideshow = ({ autoSlide = false, slideshow = [], slideInterval = 5000 }: Props) => {
+  const [swipeDistance, setSwipeDistance] = useState(0);
+  const [slideIndex, setSlideIndex] = useState(0);
+  const [slideIndexTarget, setSlideIndexTarget] = useState(0);
+  const [animationComplete, setAnimationComplete] = useState(true);
+  const slideRef = useRef<HTMLDivElement>(null);
+  const slideText = useRef<HTMLDivElement>(null);
+  let timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const gotoSlide = useCallback((indexTarget: number, useAnimation = false) => {
+    setSwipeDistance(0);
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+    setSlideIndexTarget(indexTarget);
+    setAnimationComplete(!useAnimation);
+  }, []);
+
+  const onChangedSlide = () => {
+    if (!animationComplete) {
+      if (slideRef.current) {
+        slideRef.current.style.transition = 'none';
+        slideRef.current.style.transform = `translateX(${slideIndexTarget * 100}vw))`;
+      }
+
+      setAnimationComplete(true);
+      setSlideIndex(slideIndexTarget);
+    } else if (slideIndexTarget === -1) {
+      if (slideRef.current) {
+        // Go to last slide for continuous loop
+        slideRef.current.style.transition = 'none';
+        slideRef.current.style.transform = `translateX(${slideshow.length * 100}vw))`;
+      }
+
+      setSlideIndex(slideshow.length - 1);
+      setSlideIndexTarget(slideshow.length - 1);
+      setAnimationComplete(true);
+    } else if (slideIndexTarget === slideshow.length) {
+      if (slideRef.current) {
+        // Go to first slide for continuous loop
+        slideRef.current.style.transition = 'none';
+        slideRef.current.style.transform = `translateX(100vw))`;
+      }
+      setSlideIndex(0);
+      setSlideIndexTarget(0);
+      setAnimationComplete(true);
+    } else {
+      setAnimationComplete(true);
+      setSlideIndex(slideIndexTarget);
+    }
+  };
+
+  const onSwipeEnd = () => {
+    let slide;
+    if (swipeDistance > 40) {
+      slide = -1;
+    } else if (swipeDistance < -40) {
+      slide = 1;
+    } else {
+      slide = 0;
+    }
+    if (slideRef.current && slideText.current) {
+      slideRef.current.style.transition = defaultTransitionSwipeEnd;
+      slideText.current.style.transition = defaultTransitionText;
+      slideText.current.style.opacity = '1';
+    }
+    setSwipeDistance(0);
+
+    initTimer();
+
+    if (slide !== 0) {
+      setSlideIndex(slideIndex + slide);
+      setSlideIndexTarget(slideIndex + slide);
+    } else {
+      // Reset transfrom
+      if (slideRef.current) {
+        slideRef.current.style.transform = getSlidePosition(slideIndex + slide);
+      }
+    }
+  };
+
+  const onSwipe = (eventData: SwipeEventData) => {
+    if (eventData.dir === 'Up' || eventData.dir === 'Down') {
+      return;
+    }
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+    setSwipeDistance(eventData.deltaX);
+    if (slideRef && slideRef.current) {
+      slideRef.current.style.transition = 'none';
+      slideRef.current.style.transform = getSlidePosition(slideIndexTarget);
+    }
+    const opacityText = 1 - Math.min(100, Math.abs(swipeDistance)) / 100;
+    if (slideText && slideText.current) {
+      slideText.current.style.transition = 'none';
+      slideText.current.style.opacity = opacityText.toString();
+    }
+  };
+
+  const onTransitionEnd = () => {
+    const slideshowLength = slideshow.length;
+    if (slideIndex === -1) {
+      if (slideRef.current) {
+        slideRef.current.style.transition = 'none';
+        slideRef.current.style.transform = getSlidePosition(slideshowLength - 1);
+      }
+      setSlideIndex(slideshowLength - 1);
+      setSlideIndexTarget(slideshowLength - 1);
+    } else if (slideIndex >= slideshowLength) {
+      if (slideRef.current) {
+        slideRef.current.style.transition = 'none';
+        slideRef.current.style.transform = getSlidePosition(0);
+      }
+      setSlideIndex(0);
+      setSlideIndexTarget(0);
+    }
+  };
+
+  const getSlidePosition = (target: number) => {
+    if (swipeDistance !== 0) {
+      return `translateX(calc(${swipeDistance}px -
+        ${(target + 1) * 100}vw))`;
+    }
+    return `translateX(-${(target + 1) * 100}vw)`;
+  };
+
+  const initTimer = useCallback(() => {
+    if (autoSlide) {
+      timer.current = setTimeout(() => {
+        gotoSlide(slideIndex + 1);
+      }, slideInterval);
+    }
+  }, [autoSlide, gotoSlide, slideInterval, slideIndex]);
+
+  useEffect(() => {
+    initTimer();
+  }, [initTimer]);
+
+  const handlers = useSwipeable({
+    onSwiped: onSwipeEnd,
+    onSwiping: onSwipe,
+  });
+
+  if (slideshow.length === 0) {
+    return (
+      <div>
+        <div {...classes('slideshow')}>
+          <Spinner inverted />
+        </div>
+      </div>
+    );
+  }
+
+  const slideshowWidth = `${(slideshow.length + 2) * 100}vw`;
+  let activeSlide = slideIndex;
+  if (activeSlide < 0) {
+    activeSlide = slideshow.length - 1;
+  } else if (activeSlide >= slideshow.length) {
+    activeSlide = 0;
+  }
+
+  return (
+    <section {...classes('')} {...handlers}>
+      <>
+        <div {...classes('slide-link-wrapper')}>
+          <OneColumn>
+            <SafeLink
+              to={slideshow[activeSlide].path}
+              {...classes('item-wrapper', 'text', {
+                out: !animationComplete,
+              })}>
+              <div {...classes('slide-info')} ref={slideText}>
+                <h1>{slideshow[activeSlide].title}</h1>
+                <p>{slideshow[activeSlide].metaDescription}</p>
+              </div>
+            </SafeLink>
+          </OneColumn>
+        </div>
+        <NavigationArrow
+          slideIndexTarget={slideIndexTarget > 0 ? slideIndexTarget - 1 : slideshow.length - 1}
+          gotoSlide={gotoSlide}
+        />
+        <NavigationArrow
+          slideIndexTarget={slideIndexTarget < slideshow.length - 1 ? slideIndexTarget + 1 : 0}
+          gotoSlide={gotoSlide}
+          rightArrow
+        />
+        {!animationComplete && (
+          <div
+            {...classes('item', 'fade-over')}
+            role="img"
+            onAnimationEnd={onChangedSlide}
+            style={{
+              backgroundImage: `url(${
+                (slideshow[activeSlide].metaImage && slideshow[activeSlide].metaImage.url) || ''
+              })`,
+            }}
+          />
+        )}
+        <div
+          ref={slideRef}
+          {...classes('item-wrapper')}
+          onTransitionEnd={onTransitionEnd}
+          style={{
+            width: slideshowWidth,
+            transform: getSlidePosition(slideIndex),
+          }}>
+          {renderSlideItem(slideshow[slideshow.length - 1])}
+          {slideshow.map(renderSlideItem)}
+          {renderSlideItem(slideshow[0])}
+        </div>
+        <SlideshowIndicator slideshow={slideshow} activeSlide={activeSlide} gotoSlide={gotoSlide} />
+      </>
+    </section>
+  );
+};
+
+export default FilmSlideshow;

package/src/NDLAFilm/NavigationArrow.tsx

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2016-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 from 'react';
+import BEMHelper from 'react-bem-helper';
+import { ChevronRight, ChevronLeft } from '@ndla/icons/common';
+
+interface Props {
+  slideIndexTarget: number;
+  slideshowLength?: number;
+  gotoSlide: (indexTarget: number, useAnimation: boolean) => void;
+  rightArrow?: boolean;
+}
+
+const classes = new BEMHelper({
+  name: 'film-slideshow',
+  prefix: 'c-',
+});
+
+const NavigationArrow = ({ slideIndexTarget, gotoSlide, rightArrow }: Props) => {
+  const Chevron = rightArrow ? ChevronRight : ChevronLeft;
+
+  return (
+    <div {...classes('navigation-arrows', rightArrow ? 'right' : '')}>
+      <button
+        type="button"
+        tabIndex={-1}
+        onClick={() => {
+          gotoSlide(slideIndexTarget, true);
+        }}>
+        <Chevron />
+      </button>
+    </div>
+  );
+};
+
+export default NavigationArrow;

package/src/NDLAFilm/SlideshowIndicator.tsx

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2019-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 from 'react';
+import BEMHelper from 'react-bem-helper';
+import { NDLAMovie } from './interfaces';
+
+interface Props {
+  slideshow: NDLAMovie[];
+  activeSlide: number;
+  gotoSlide: (indexTarget: number, useAnimation: boolean) => void;
+}
+
+const classes = new BEMHelper({
+  name: 'film-slideshow',
+  prefix: 'c-',
+});
+
+const SlideshowIndicator = ({ slideshow, activeSlide, gotoSlide }: Props) => {
+  return (
+    <div {...classes('indicator-wrapper')}>
+      {slideshow.map((slide, index) => (
+        <button
+          key={`indicator_${index}`}
+          type="button"
+          {...classes('indicator-dot', index === activeSlide ? 'active' : '')}
+          onClick={() => gotoSlide(index, true)}>
+          <span />
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default SlideshowIndicator;

package/src/NDLAFilm/interfaces.ts

@@ -0,0 +1,10 @@
+export interface NDLAMovie {
+  id: string;
+  metaDescription: string;
+  title: string;
+  metaImage: {
+    url: string;
+    alt: string;
+  };
+  path: string;
+}