@ndla/ui 3.3.9 → 3.3.14

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/{AboutNdlaFilm.jsx → AboutNdlaFilm.tsx}

@@ -1,11 +1,11 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { OneColumn } from '@ndla/ui';
+import React, { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
 import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
 import { colors, spacing, fonts, mq, breakpoints } from '@ndla/core';
+//@ts-ignore
 import Button from '@ndla/button';
-import styled from '@emotion/styled';
-import { useTranslation } from 'react-i18next';
+import { OneColumn } from '..';
 import VisualElement from './VisualElement';
 
 const StyledAside = styled.aside`
@@ -44,7 +44,20 @@ const StyledAside = styled.aside`
   }
 `;
 
-const AboutNdlaFilm = ({ aboutNDLAVideo, moreAboutNdlaFilm }) => {
+interface Props {
+  aboutNDLAVideo: {
+    title: string;
+    description: string;
+    visualElement: {
+      alt?: string;
+      url: string;
+      type: string;
+    };
+  };
+  moreAboutNdlaFilm: ReactNode;
+}
+
+const AboutNdlaFilm = ({ aboutNDLAVideo, moreAboutNdlaFilm }: Props) => {
   const { t } = useTranslation();
   return (
     <div className="o-wrapper">
@@ -71,16 +84,4 @@ const AboutNdlaFilm = ({ aboutNDLAVideo, moreAboutNdlaFilm }) => {
   );
 };
 
-AboutNdlaFilm.propTypes = {
-  aboutNDLAVideo: PropTypes.shape({
-    title: PropTypes.string,
-    description: PropTypes.string,
-    visualElement: PropTypes.shape({
-      url: PropTypes.string,
-      alt: PropTypes.string,
-      type: PropTypes.string,
-    }),
-  }),
-};
-
 export default AboutNdlaFilm;

package/src/NDLAFilm/AllMoviesAlphabetically.tsx

@@ -15,7 +15,7 @@ import { breakpoints, mq, spacing, spacingUnit, colors, fonts, animations } from
 import SafeLink from '@ndla/safelink';
 // @ts-ignore
 import { makeSrcQueryString } from '../Image';
-import { movieType } from './types';
+import { MovieType } from './types';
 import { isLetter } from './isLetter';
 const IMAGE_WIDTH = 143;
 
@@ -158,7 +158,7 @@ const StyledSafeLink = styled(SafeLink)<isIEProps>`
 `;
 
 interface Props {
-  movies: movieType[];
+  movies: MovieType[];
   locale: string;
 }
 
@@ -231,7 +231,7 @@ const AllMoviesAlphabetically: React.FunctionComponent<Props> = ({ movies, local
 
   return (
     <StyledWrapper ref={wrapperRef}>
-      {movies.map((movie: movieType, index: number) => {
+      {movies.map((movie: MovieType, index: number) => {
         const currentLetter = movie.title.substr(0, 1);
         const isNewLetter = currentLetter.localeCompare(previousLetter, locale) === 1 && isLetter(movie.title);
         previousLetter = currentLetter;

package/src/NDLAFilm/{CategorySelect.jsx → CategorySelect.tsx}

@@ -1,28 +1,40 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { Component } from 'react';
 import BEMHelper from 'react-bem-helper';
 import FocusTrapReact from 'focus-trap-react';
 import { ChevronDown } from '@ndla/icons/common';
-import { withTranslation } from 'react-i18next';
+import { WithTranslation, withTranslation } from 'react-i18next';
+import { MovieResourceType } from './types';
 
 const classes = new BEMHelper({
   name: 'film-moviesearch',
   prefix: 'c-',
 });
 
-class CategorySelect extends React.Component {
-  constructor(props) {
+interface Props extends WithTranslation {
+  resourceTypes: MovieResourceType[];
+  resourceTypeSelected?: MovieResourceType;
+  ariaControlId?: string;
+  onChangeResourceType: (resourceId?: string) => void;
+}
+
+interface State {
+  resourceTypesIsOpen: boolean;
+}
+class CategorySelect extends Component<Props, State> {
+  references: Record<string, HTMLButtonElement | null>;
+  constructor(props: Props) {
     super(props);
     this.state = {
       resourceTypesIsOpen: false,
     };
+    this.references = {};
     this.createRef = this.createRef.bind(this);
     this.openSelect = this.openSelect.bind(this);
     this.onSelect = this.onSelect.bind(this);
   }
 
-  createRef(el, name) {
-    this[name] = el;
+  createRef(el: HTMLButtonElement | null, name: string) {
+    this.references[name] = el;
   }
 
   openSelect() {
@@ -32,14 +44,14 @@ class CategorySelect extends React.Component {
         resourceTypesIsOpen: true,
       },
       () => {
-        if (resourceTypeSelected && this[resourceTypeSelected.id]) {
-          this[resourceTypeSelected.id].focus();
+        if (resourceTypeSelected && this.references[resourceTypeSelected.id]) {
+          this.references[resourceTypeSelected.id]?.focus();
         }
       },
     );
   }
 
-  onSelect(val) {
+  onSelect(val?: string) {
     this.props.onChangeResourceType(val);
     this.setState({
       resourceTypesIsOpen: false,
@@ -97,7 +109,7 @@ class CategorySelect extends React.Component {
                   ref={(el) => this.createRef(el, resourceType.id)}
                   onClick={() => this.onSelect(resourceType.id)}
                   {...classes('dropdown-button', {
-                    selected: resourceTypeSelected && resourceTypeSelected.id === resourceType.id,
+                    selected: !!resourceTypeSelected && resourceTypeSelected.id === resourceType.id,
                   })}
                   data-id={resourceType.id}
                   key={resourceType.id}>
@@ -112,13 +124,4 @@ class CategorySelect extends React.Component {
   }
 }
 
-CategorySelect.propTypes = {
-  resourceTypes: PropTypes.arrayOf(PropTypes.object),
-  resourceTypeSelected: PropTypes.shape({
-    id: PropTypes.string,
-    name: PropTypes.string,
-  }),
-  ariaControlId: PropTypes.string,
-};
-
 export default withTranslation()(CategorySelect);

package/src/NDLAFilm/{FilmContentCard.jsx → FilmContentCard.tsx}

@@ -1,11 +1,20 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { spacing, colors, fonts, breakpoints } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import styled from '@emotion/styled';
 // @ts-ignore
 import { makeSrcQueryString } from '../Image';
 import FilmContentCardTags from './FilmContentCardTags';
+import { MovieResourceType, MovieType } from './types';
+
+interface Props {
+  movie: MovieType;
+  columnWidth: number;
+  distanceBetweenItems?: number;
+  resourceTypes: MovieResourceType[];
+  resizeThumbnailImages?: boolean;
+  hideTags?: boolean;
+}
 
 const FilmContentCard = ({
   movie: { metaImage, resourceTypes: movieResourceTypes, title, id, path },
@@ -13,8 +22,8 @@ const FilmContentCard = ({
   distanceBetweenItems,
   resourceTypes,
   resizeThumbnailImages,
-  hideTags,
-}) => {
+  hideTags = false,
+}: Props) => {
   let backgroundImage = `${(metaImage && metaImage.url) || ''}`;
   if (resizeThumbnailImages && metaImage) {
     backgroundImage += '?width=480';
@@ -55,7 +64,10 @@ const StyledMovieTitle = styled.h2`
   }
 `;
 
-const StyledImage = styled.div`
+interface StyledImageProps {
+  columnWidth: number;
+}
+const StyledImage = styled.div<StyledImageProps>`
   height: ${(props) => props.columnWidth * 0.5625}px;
   background-size: cover;
   background-color: ${colors.ndlaFilm.filmColorLight};
@@ -78,7 +90,11 @@ const StyledImage = styled.div`
   }
 `;
 
-const StyledSlideWrapper = styled.div`
+interface StyledSlideWrapperProps {
+  columnWidth: number;
+}
+
+const StyledSlideWrapper = styled.div<StyledSlideWrapperProps>`
   width: ${(props) => props.columnWidth}px;
   color: #fff;
   box-shadow: none;
@@ -98,20 +114,4 @@ const StyledSlideWrapper = styled.div`
   }
 `;
 
-FilmContentCard.propTypes = {
-  movie: PropTypes.shape({
-    id: PropTypes.string,
-    url: PropTypes.string,
-  }).isRequired,
-  columnWidth: PropTypes.number,
-  distanceBetweenItems: PropTypes.number,
-  resourceTypes: PropTypes.arrayOf(PropTypes.object),
-  resizeThumbnailImages: PropTypes.bool,
-  hideTags: PropTypes.bool,
-};
-
-FilmContentCard.defaultProps = {
-  hideTags: false,
-};
-
 export default FilmContentCard;

package/src/NDLAFilm/{FilmContentCardTags.jsx → FilmContentCardTags.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { spacing, spacingUnit, colors, fonts, misc } from '@ndla/core';
 import styled from '@emotion/styled';
+import { MovieResourceType } from './types';
 
 const StyledWrapperDiv = styled.div`
   transition: opacity 200ms ease;
@@ -22,8 +22,12 @@ const StyledMovieTags = styled.span`
   margin-bottom: ${spacingUnit / 8}px;
 `;
 
-const FilmContentCardTags = ({ movieResourceTypes, resourceTypes }) => {
-  const resources = {};
+interface Props {
+  movieResourceTypes: MovieResourceType[];
+  resourceTypes: MovieResourceType[];
+}
+const FilmContentCardTags = ({ movieResourceTypes, resourceTypes }: Props) => {
+  const resources: Record<string, boolean> = {};
   movieResourceTypes.forEach((movieResourceType) => {
     const resource = resourceTypes.find((resourceType) => resourceType.id === movieResourceType.id);
     if (resource) {
@@ -39,8 +43,4 @@ const FilmContentCardTags = ({ movieResourceTypes, resourceTypes }) => {
   );
 };
 
-FilmContentCardTags.propTypes = {
-  resourceTypes: PropTypes.arrayOf(PropTypes.object).isRequired,
-};
-
 export default FilmContentCardTags;

package/src/NDLAFilm/{FilmMovieList.jsx → FilmMovieList.tsx}

@@ -1,5 +1,4 @@
-/**
- * Copyright (c) 2016-present, NDLA.
+/** * 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.
@@ -7,31 +6,41 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
-import { Carousel } from '@ndla/carousel';
+import { Carousel, CalculatedCarouselProps } from '@ndla/carousel';
 import FilmContentCard from './FilmContentCard';
-import { movieShape } from './shapes';
+import { MovieResourceType, MovieType } from './types';
 
 const classes = new BEMHelper({
   name: 'film-movielist',
   prefix: 'c-',
 });
 
+interface Props {
+  movies: MovieType[];
+  name: string;
+  slideBackwardsLabel: string;
+  slideForwardsLabel: string;
+  resourceTypes: MovieResourceType[];
+  autoSizedProps: CalculatedCarouselProps;
+  resizeThumbnailImages?: boolean;
+}
+
 const FilmMovieList = ({
   name,
-  movies,
+  movies = [],
   slideBackwardsLabel,
   slideForwardsLabel,
-  resourceTypes,
+  resourceTypes = [],
   autoSizedProps,
   resizeThumbnailImages,
-}) => (
+}: Props) => (
   <section {...classes()}>
     <h1 {...classes('heading')} style={{ marginLeft: `${autoSizedProps.margin}px` }}>
       {name}
     </h1>
     <Carousel
+      disableScroll={false}
       slideBackwardsLabel={slideBackwardsLabel}
       slideForwardsLabel={slideForwardsLabel}
       buttonClass="c-film-movielist__carousel-buttons"
@@ -50,23 +59,4 @@ const FilmMovieList = ({
   </section>
 );
 
-FilmMovieList.propTypes = {
-  movies: PropTypes.arrayOf(movieShape),
-  name: PropTypes.string.isRequired,
-  slideBackwardsLabel: PropTypes.string.isRequired,
-  slideForwardsLabel: PropTypes.string.isRequired,
-  resourceTypes: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string,
-      id: PropTypes.id,
-    }),
-  ),
-  autoSizedProps: PropTypes.shape({}),
-};
-
-FilmMovieList.defaultProps = {
-  movies: [],
-  resourceTypes: [],
-};
-
 export default FilmMovieList;