@ndla/ui 3.2.1-alpha.14 → 3.2.1

package/src/Hero/Hero.tsx

@@ -0,0 +1,56 @@
+/**
+ * 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, { ReactNode } from 'react';
+import BEMHelper from 'react-bem-helper';
+
+import * as contentTypes from '../model/ContentType';
+
+const classes = new BEMHelper({
+  name: 'hero',
+  prefix: 'c-',
+});
+
+interface HeroProps {
+  children?: ReactNode;
+  contentType:
+    | 'subject-material'
+    | 'tasks-and-activities'
+    | 'assessment-resources'
+    | 'subject'
+    | 'external-learning-resources'
+    | 'source-material'
+    | 'learning-path'
+    | 'topic'
+    | 'beta'
+    | 'ndla-film'
+    | 'ndla-film has-image';
+}
+
+export const Hero = ({ children, contentType }: HeroProps) => (
+  <div {...classes('', contentType)}>{children || null}</div>
+);
+
+interface Props {
+  children?: ReactNode;
+}
+export const SubjectMaterialHero = (props: Props) => <Hero contentType={contentTypes.SUBJECT_MATERIAL} {...props} />;
+export const TasksAndActivitiesHero = (props: Props) => (
+  <Hero contentType={contentTypes.TASKS_AND_ACTIVITIES} {...props} />
+);
+export const AssessmentResourcesHero = (props: Props) => (
+  <Hero contentType={contentTypes.ASSESSMENT_RESOURCES} {...props} />
+);
+export const SubjectHero = (props: Props) => <Hero contentType={contentTypes.SUBJECT} {...props} />;
+export const ExternalLearningResourcesHero = (props: Props) => (
+  <Hero contentType={contentTypes.EXTERNAL_LEARNING_RESOURCES} {...props} />
+);
+export const SourceMaterialHero = (props: Props) => <Hero contentType={contentTypes.SOURCE_MATERIAL} {...props} />;
+export const NdlaFilmHero = ({ hasImage, ...rest }: Props & { hasImage?: boolean }) => (
+  <Hero {...rest} contentType={hasImage ? 'ndla-film has-image' : 'ndla-film'} />
+);

package/src/Image/{Image.jsx → Image.tsx}

@@ -6,13 +6,13 @@
  *
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 import defined from 'defined';
-import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import LazyLoadImage from './LazyLoadImage';
+import { ImageCrop, ImageFocalPoint } from '../types';
 
-export const makeSrcQueryString = (width, crop, focalPoint) => {
+export const makeSrcQueryString = (width: number | undefined, crop?: ImageCrop, focalPoint?: ImageFocalPoint) => {
   const widthParams = width && `width=${width}`;
   const cropParams =
     crop && `cropStartX=${crop.startX}&cropEndX=${crop.endX}&cropStartY=${crop.startY}&cropEndY=${crop.endY}`;
@@ -22,7 +22,7 @@ export const makeSrcQueryString = (width, crop, focalPoint) => {
   return params;
 };
 
-const getSrcSet = (src, crop, focalPoint) => {
+const getSrcSet = (src: string, crop: ImageCrop | undefined, focalPoint: ImageFocalPoint | undefined) => {
   const widths = [2720, 2080, 1760, 1440, 1120, 1000, 960, 800, 640, 480, 320, 240, 180];
   return widths.map((width) => `${src}?${makeSrcQueryString(width, crop, focalPoint)} ${width}w`).join(', ');
 };
@@ -31,7 +31,32 @@ const StyledImageWrapper = styled.div`
   position: relative;
 `;
 
-const Image = ({ alt, src, lazyLoad, lazyLoadSrc, crop, focalPoint, contentType, sizes, expandButton, ...rest }) => {
+interface Props {
+  alt: string;
+  src: string;
+  sizes?: string;
+  fallbackWidth?: number;
+  contentType?: string;
+  srcSet?: string;
+  lazyLoad?: boolean;
+  lazyLoadSrc?: string;
+  expandButton?: ReactNode;
+  crop?: ImageCrop;
+  focalPoint?: ImageFocalPoint;
+}
+
+const Image = ({
+  alt,
+  src,
+  lazyLoad,
+  lazyLoadSrc,
+  crop,
+  focalPoint,
+  contentType,
+  sizes = '(min-width: 1024px) 1024px, 100vw',
+  expandButton,
+  ...rest
+}: Props) => {
   const srcSet = defined(rest.srcSet, getSrcSet(src, crop, focalPoint));
   const fallbackWidth = defined(rest.fallbackWidth, 1024);
   const queryString = makeSrcQueryString(fallbackWidth, crop, focalPoint);
@@ -69,29 +94,4 @@ const Image = ({ alt, src, lazyLoad, lazyLoadSrc, crop, focalPoint, contentType,
   );
 };
 
-Image.propTypes = {
-  alt: PropTypes.string.isRequired,
-  src: PropTypes.string.isRequired,
-  sizes: PropTypes.string,
-  fallbackWidth: PropTypes.number,
-  contentType: PropTypes.string,
-  srcSet: PropTypes.string,
-  lazyLoad: PropTypes.bool,
-  lazyLoadSrc: PropTypes.string,
-  crop: PropTypes.shape({
-    startX: PropTypes.number.isRequired,
-    startY: PropTypes.number.isRequired,
-    endX: PropTypes.number.isRequired,
-    endY: PropTypes.number.isRequired,
-  }),
-  focalPoint: PropTypes.shape({
-    x: PropTypes.number.isRequired,
-    y: PropTypes.number.isRequired,
-  }),
-};
-
-Image.defaultProps = {
-  sizes: '(min-width: 1024px) 1024px, 100vw',
-};
-
 export default Image;

package/src/Image/{ImageLink.js → ImageLink.tsx}

@@ -6,17 +6,24 @@
  *
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { makeSrcQueryString } from './Image';
-import { FocalPointShape, CropShape } from './shapes';
+import { ImageCrop, ImageFocalPoint } from '../types';
 
 const StyledLink = styled.a`
   box-shadow: inset 0 0;
 `;
 
-export function ImageLink({ src, crop, children, ...rest }) {
+interface Props {
+  src: string;
+  children: ReactNode;
+  sizes?: string;
+  crop?: ImageCrop;
+  focalPoint?: ImageFocalPoint;
+}
+
+export function ImageLink({ src, crop, children, ...rest }: Props) {
   return (
     <StyledLink
       target="_blank"
@@ -27,11 +34,3 @@ export function ImageLink({ src, crop, children, ...rest }) {
     </StyledLink>
   );
 }
-
-ImageLink.propTypes = {
-  src: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-  sizes: PropTypes.string,
-  crop: CropShape,
-  focalPoint: FocalPointShape,
-};

package/src/Image/LazyLoadImage.tsx

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2017-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';
+
+interface Props {
+  alt: string;
+  src: string;
+  sizes?: string;
+  contentType?: string;
+  srcSet?: string;
+  lazyLoadSrc?: string;
+}
+// Lazyload image with lazysizes (https://github.com/aFarkas/lazysizes)
+const LazyLoadImage = ({ alt, src, srcSet, lazyLoadSrc, sizes, ...rest }: Props) => (
+  <>
+    <noscript key="noscript">
+      <img alt={alt} src={`${src}`} srcSet={srcSet} sizes={sizes} {...rest} />
+    </noscript>
+    ,
+    <img
+      alt={alt}
+      key="img"
+      style={{ width: '100%' }}
+      className="lazyload"
+      src={lazyLoadSrc}
+      data-src={src}
+      data-src-set={srcSet}
+      data-sizes={sizes}
+      {...rest}
+    />
+  </>
+);
+
+export default LazyLoadImage;

package/src/Image/__tests__/__snapshots__/Image-test.jsx.snap

@@ -6,7 +6,7 @@ exports[`Image renderers correctly 1`] = `
 }
 
 <div
-  className="emotion-0 emotion-1"
+  className="emotion-0"
 >
   <picture>
     <source
@@ -27,7 +27,7 @@ exports[`Image with crop and focalpoint props renderers correctly 1`] = `
 }
 
 <div
-  className="emotion-0 emotion-1"
+  className="emotion-0"
 >
   <picture>
     <source
@@ -48,7 +48,7 @@ exports[`Lazyloaded image renderers correctly 1`] = `
 }
 
 <div
-  className="emotion-0 emotion-1"
+  className="emotion-0"
 >
   <noscript>
     <img
@@ -58,6 +58,7 @@ exports[`Lazyloaded image renderers correctly 1`] = `
       srcSet="https://example.com/image.png?width=2720 2720w, https://example.com/image.png?width=2080 2080w, https://example.com/image.png?width=1760 1760w, https://example.com/image.png?width=1440 1440w, https://example.com/image.png?width=1120 1120w, https://example.com/image.png?width=1000 1000w, https://example.com/image.png?width=960 960w, https://example.com/image.png?width=800 800w, https://example.com/image.png?width=640 640w, https://example.com/image.png?width=480 480w, https://example.com/image.png?width=320 320w, https://example.com/image.png?width=240 240w, https://example.com/image.png?width=180 180w"
     />
   </noscript>
+  ,
   <img
     alt="example"
     className="lazyload"

package/src/InfoBox/InfoBox.tsx

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+import BEMHelper from 'react-bem-helper';
+
+const classes = BEMHelper('c-info-box');
+
+interface Props {
+  children?: ReactNode;
+}
+const InfoBox = ({ children }: Props) => <div {...classes()}>{children}</div>;
+
+export default InfoBox;

package/src/InfoBox/index.ts

@@ -0,0 +1 @@
+export { default as InfoBox } from './InfoBox';

package/src/InfoWidget/{InfoWidget.jsx → InfoWidget.tsx}

@@ -1,5 +1,4 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
 import { Forward } from '@ndla/icons/common';
 
@@ -9,7 +8,24 @@ import SectionHeading from '../SectionHeading';
 
 const classes = BEMHelper('c-info-widget');
 
-const InfoWidget = ({ heading, description, mainLink, iconLinks, center }) => (
+interface Props {
+  heading: string;
+  description: string;
+  mainLink: {
+    name: string;
+    url?: string;
+    href?: string;
+  };
+  iconLinks: {
+    name: string;
+    url?: string;
+    href?: string;
+    icon: ReactNode;
+  }[];
+  center?: boolean;
+}
+
+const InfoWidget = ({ heading, description, mainLink, iconLinks, center = false }: Props) => (
   <section {...classes('', { center })}>
     <SectionHeading large className={classes('heading').className}>
       {heading}
@@ -55,27 +71,4 @@ const InfoWidget = ({ heading, description, mainLink, iconLinks, center }) => (
   </section>
 );
 
-InfoWidget.propTypes = {
-  heading: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
-  mainLink: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    url: PropTypes.string,
-    href: PropTypes.string,
-  }).isRequired,
-  iconLinks: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      url: PropTypes.string,
-      href: PropTypes.string,
-      icon: PropTypes.node.isRequired,
-    }),
-  ),
-  center: PropTypes.bool,
-};
-
-InfoWidget.defaultProps = {
-  center: false,
-};
-
 export default InfoWidget;

package/src/Logo/{Logo.jsx → Logo.tsx}

@@ -7,8 +7,7 @@
  */
 /* eslint-disable max-len */
 
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 import BEMHelper from 'react-bem-helper';
 import SafeLink from '@ndla/safelink';
 import SvgLogo from './SvgLogo';
@@ -18,8 +17,24 @@ export const logoClasses = new BEMHelper({
   prefix: 'c-',
 });
 
-export const Logo = ({ name, to, cssModifier, color, large, locale, label }) => {
-  const modifiers = { large };
+interface Props {
+  to?:
+    | string
+    | {
+        pathname: string;
+        search?: string;
+        hash?: string;
+      };
+  label: string;
+  locale?: string;
+  cssModifier?: string;
+  large?: boolean;
+  name?: boolean;
+  color?: string;
+}
+
+export const Logo = ({ name = true, to, cssModifier, color, large = false, locale, label }: Props) => {
+  const modifiers: Record<string, boolean> = { large };
 
   if (cssModifier) {
     modifiers[cssModifier] = true;
@@ -30,33 +45,11 @@ export const Logo = ({ name, to, cssModifier, color, large, locale, label }) =>
       <SvgLogo name={name} color={color} locale={locale} />
     </SafeLink>
   ) : (
-    <Fragment>
+    <>
       <SvgLogo name={name} color={color} locale={locale} />
-    </Fragment>
+    </>
   );
   return <div {...logoClasses('', modifiers)}>{logo}</div>;
 };
 
-Logo.propTypes = {
-  to: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.shape({
-      pathname: PropTypes.string.isRequired,
-      search: PropTypes.string,
-      hash: PropTypes.string,
-    }),
-  ]),
-  label: PropTypes.string.isRequired,
-  locale: PropTypes.string,
-  cssModifier: PropTypes.string,
-  large: PropTypes.bool,
-  name: PropTypes.bool,
-  color: PropTypes.string,
-};
-
-Logo.defaultProps = {
-  name: true,
-  large: false,
-};
-
 export default Logo;

package/src/Logo/{SvgLogo.jsx → SvgLogo.tsx}

@@ -8,10 +8,9 @@
 /* eslint-disable max-len */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { logoClasses } from './Logo';
 
-const LogoText = (locale) => {
+const LogoText = (locale?: string) => {
   if (locale === 'en') {
     return (
       <path
@@ -26,7 +25,13 @@ const LogoText = (locale) => {
   );
 };
 
-export const SvgLogo = ({ name, color, locale }) => (
+interface Props {
+  name?: boolean;
+  color?: string;
+  locale?: string;
+}
+
+export const SvgLogo = ({ name = true, color = '#000000', locale }: Props) => (
   <svg
     {...logoClasses('graphic')}
     xmlns="http://www.w3.org/2000/svg"
@@ -41,15 +46,4 @@ export const SvgLogo = ({ name, color, locale }) => (
   </svg>
 );
 
-SvgLogo.propTypes = {
-  name: PropTypes.bool,
-  color: PropTypes.string,
-  locale: PropTypes.string,
-};
-
-SvgLogo.defaultProps = {
-  name: true,
-  color: '#000000',
-};
-
 export default SvgLogo;

package/src/Masthead/{Masthead.jsx → Masthead.tsx}

@@ -6,11 +6,11 @@
  *
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
+//@ts-ignore
 import classNames from 'classnames';
 import BEMHelper from 'react-bem-helper';
-import { withTranslation } from 'react-i18next';
+import { WithTranslation, withTranslation } from 'react-i18next';
 import { DisplayOnPageYOffset } from '../Animation';
 
 const classes = new BEMHelper({
@@ -18,7 +18,13 @@ const classes = new BEMHelper({
   prefix: 'c-',
 });
 
-export const MastheadItem = ({ children, className, left, right }) => {
+interface MastheadItemProps {
+  children?: ReactNode;
+  className?: string;
+  right?: boolean;
+  left?: boolean;
+}
+export const MastheadItem = ({ children, className, left = false, right = false }: MastheadItemProps) => {
   const itemClassNames = classNames(
     { [classes('left').className]: left },
     { [classes('right').className]: right },
@@ -28,37 +34,42 @@ export const MastheadItem = ({ children, className, left, right }) => {
   return <div className={itemClassNames}>{children}</div>;
 };
 
-MastheadItem.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  right: PropTypes.bool,
-  left: PropTypes.bool,
-};
-
-MastheadItem.defaultProps = {
-  right: false,
-  left: false,
-};
+interface MastheadInfoProps {
+  children?: ReactNode;
+}
 
-const MastheadInfo = ({ children }) => (
+const MastheadInfo = ({ children }: MastheadInfoProps) => (
   <div {...classes('info')}>
     <div {...classes('info-content')}>{children}</div>
   </div>
 );
 
-MastheadInfo.propTypes = {
-  children: PropTypes.node.isRequired,
-};
+interface Props {
+  children?: ReactNode;
+  fixed?: boolean;
+  showLoaderWhenNeeded?: boolean;
+  infoContent?: ReactNode;
+  ndlaFilm?: boolean;
+  skipToMainContentId?: string;
+}
 
-export const Masthead = ({ children, fixed, infoContent, showLoaderWhenNeeded, ndlaFilm, skipToMainContentId, t }) => (
+export const Masthead = ({
+  children,
+  fixed,
+  infoContent,
+  showLoaderWhenNeeded = true,
+  ndlaFilm,
+  skipToMainContentId,
+  t,
+}: Props & WithTranslation) => (
   <>
     {skipToMainContentId && (
       <a tabIndex={0} href={`#${skipToMainContentId}`} {...classes('skip-to-main-content')}>
         {t('masthead.skipToContent')}
       </a>
     )}
-    <div {...classes('placeholder', { infoContent })} />
-    <div {...classes('', { fixed, infoContent, showLoaderWhenNeeded, ndlaFilm })}>
+    <div {...classes('placeholder', { infoContent: !!infoContent })} />
+    <div {...classes('', { fixed: !!fixed, infoContent: !!infoContent, showLoaderWhenNeeded, ndlaFilm: !!ndlaFilm })}>
       {infoContent && (
         <DisplayOnPageYOffset yOffsetMin={0} yOffsetMax={90}>
           <MastheadInfo>{infoContent}</MastheadInfo>
@@ -69,17 +80,4 @@ export const Masthead = ({ children, fixed, infoContent, showLoaderWhenNeeded, n
   </>
 );
 
-Masthead.propTypes = {
-  children: PropTypes.node,
-  fixed: PropTypes.bool,
-  showLoaderWhenNeeded: PropTypes.bool,
-  infoContent: PropTypes.node,
-  ndlaFilm: PropTypes.bool,
-  skipToMainContentId: PropTypes.string,
-};
-
-Masthead.defaultProps = {
-  showLoaderWhenNeeded: true,
-};
-
 export default withTranslation()(Masthead);

package/src/NoContentBox/{NoContentBox.jsx → NoContentBox.tsx}

@@ -7,8 +7,8 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
+//@ts-ignore
 import Button from '@ndla/button';
 
 const classes = new BEMHelper({
@@ -16,7 +16,12 @@ const classes = new BEMHelper({
   prefix: 'c-',
 });
 
-export const NoContentBox = ({ buttonText, text, onClick }) => (
+interface Props {
+  onClick?: () => void;
+  buttonText?: string;
+  text: string;
+}
+export const NoContentBox = ({ buttonText, text, onClick }: Props) => (
   <div {...classes('additional-resources-trigger')}>
     <span>
       <div>
@@ -31,15 +36,4 @@ export const NoContentBox = ({ buttonText, text, onClick }) => (
   </div>
 );
 
-NoContentBox.propTypes = {
-  onClick: PropTypes.func,
-  buttonText: PropTypes.string,
-  text: PropTypes.string.isRequired,
-};
-
-NoContentBox.defaultProps = {
-  onClick: null,
-  buttonText: undefined,
-};
-
 export default NoContentBox;

package/src/Portrait/{Portrait.jsx → Portrait.tsx}

@@ -7,7 +7,6 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
 
 const classes = new BEMHelper({
@@ -15,22 +14,17 @@ const classes = new BEMHelper({
   prefix: 'c-',
 });
 
-const Portrait = ({ src, alt, modifier, className }) => (
+interface Props {
+  src: string;
+  alt: string;
+  className?: string;
+  modifier?: 'small' | 'large';
+}
+
+const Portrait = ({ src, alt, modifier, className }: Props) => (
   <div {...classes('', modifier, className)}>
     <span role="img" aria-label={alt} style={{ backgroundImage: `url(${src})` }} />
   </div>
 );
 
-Portrait.propTypes = {
-  src: PropTypes.string.isRequired,
-  alt: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  modifier: PropTypes.oneOf(['small', 'large']),
-};
-
-Portrait.defaultProps = {
-  className: null,
-  modifier: null,
-};
-
 export default Portrait;

package/src/Topic/Topic.tsx

@@ -24,6 +24,7 @@ import { ItemProps } from '../Navigation/NavigationBox';
 import { NavigationBox } from '../Navigation';
 // @ts-ignore
 import { makeSrcQueryString } from '../Image';
+import { ImageCrop, ImageFocalPoint } from '../types';
 
 type InvertItProps = {
   invertedStyle?: boolean;
@@ -223,8 +224,8 @@ export type TopicProps = {
     image?: {
       url: string;
       alt: string;
-      crop?: object;
-      focalPoint?: object;
+      crop?: ImageCrop;
+      focalPoint?: ImageFocalPoint;
     };
     visualElement?: VisualElementProps;
     resources?: React.ReactNode;