@ndla/ui 3.2.1-alpha.3 → 3.2.2

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

@@ -6,15 +6,15 @@
  *
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode, MouseEvent } from 'react';
 import BEMHelper from 'react-bem-helper';
+//@ts-ignore
 import Button from '@ndla/button';
 
-const toggleFactBox = (event) => {
-  const button = event.target;
-  const aside = button.previousSibling.parentNode;
-  aside.classList.toggle('expanded');
+const toggleFactBox = (event: MouseEvent<HTMLButtonElement>) => {
+  const button = event.currentTarget;
+  const aside = button?.previousSibling?.parentElement;
+  aside?.classList?.toggle('expanded');
 };
 
 const classes = new BEMHelper({
@@ -22,7 +22,12 @@ const classes = new BEMHelper({
   prefix: 'c-',
 });
 
-const FactBox = ({ children, dangerouslySetInnerHTML }) => (
+interface Props {
+  dangerouslySetInnerHTML?: { __html: string };
+  children?: ReactNode;
+}
+
+const FactBox = ({ children, dangerouslySetInnerHTML }: Props) => (
   <aside {...classes()}>
     <div {...classes('content')} dangerouslySetInnerHTML={dangerouslySetInnerHTML}>
       {children}
@@ -31,11 +36,4 @@ const FactBox = ({ children, dangerouslySetInnerHTML }) => (
   </aside>
 );
 
-FactBox.propTypes = {
-  dangerouslySetInnerHTML: PropTypes.shape({
-    __html: PropTypes.string.isRequired,
-  }),
-  children: PropTypes.node,
-};
-
 export default FactBox;

package/src/Figure/{Figure.js → Figure.tsx}

@@ -9,15 +9,16 @@
 // N.B These component is used to render static markup serverside
 // Any interactivty is added by scripts located in the ndla-article-scripts package
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
 import { isFunction, parseMarkdown } from '@ndla/util';
 import { useTranslation } from 'react-i18next';
 import { Link as LinkIcon } from '@ndla/icons/common';
 import { LicenseByline } from '@ndla/licenses';
 import SafeLink from '@ndla/safelink';
+//@ts-ignore
 import Button from '@ndla/button';
+import { License } from '../types';
 
 const classes = new BEMHelper({
   name: 'figure',
@@ -36,16 +37,16 @@ export const FigureCaption = ({
   link,
   hideFigcaption,
   hasLinkedVideo,
-}) => {
+}: FigureCaptionProps) => {
   const { t } = useTranslation();
   return (
-    <figcaption {...classes('caption', hideFigcaption && 'hidden-caption')}>
+    <figcaption {...classes('caption', hideFigcaption ? 'hidden-caption' : undefined)}>
       {caption ? <div {...classes('info')}>{parseMarkdown(caption)}</div> : null}
       <footer {...classes('byline')}>
         <div {...classes('byline-licenselist')}>
           <LicenseByline licenseRights={licenseRights} locale={locale} marginRight>
             <div {...classes('byline-author-buttons')}>
-              <span {...classes('byline-authors')}>{authors.map((author) => author.name).join(', ')}</span>
+              <span {...classes('byline-authors')}>{authors?.map((author) => author.name).join(', ')}</span>
               <div>
                 <Button
                   borderShape="rounded"
@@ -76,8 +77,8 @@ export const FigureCaption = ({
               <SafeLink
                 to={link.url}
                 {...classes('link')}
-                target={link.external ? '_blank' : null}
-                rel={link.external ? 'noopener noreferrer' : null}>
+                target={link.external ? '_blank' : undefined}
+                rel={link.external ? 'noopener noreferrer' : undefined}>
                 <span {...classes('link-text')}>{link.text}</span>
                 <LinkIcon />
               </SafeLink>
@@ -90,61 +91,50 @@ export const FigureCaption = ({
   );
 };
 
-FigureCaption.propTypes = {
-  figureId: PropTypes.string.isRequired,
-  id: PropTypes.string.isRequired,
-  caption: PropTypes.string,
-  reuseLabel: PropTypes.string.isRequired,
-  licenseRights: PropTypes.arrayOf(PropTypes.string).isRequired,
-  children: PropTypes.node,
-  authors: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string.isRequired,
-    }),
-  ),
-  link: PropTypes.shape({
-    url: PropTypes.string.isRequired,
-    text: PropTypes.string.isRequired,
-    description: PropTypes.string,
-    external: PropTypes.bool,
-  }),
-  locale: PropTypes.string,
-  hideFigcaption: PropTypes.bool,
-  hasLinkedVideo: PropTypes.bool,
-};
+export interface FigureLicense extends License {
+  short: string;
+  title: string;
+  userFriendlyTitle: string;
+  description: string;
+  rights: string[];
+  linkText?: string;
+  url?: string;
+}
 
-FigureCaption.defaultProps = {
-  link: null,
-};
+interface FigureCaptionProps {
+  figureId: string;
+  id: string;
+  caption?: string;
+  reuseLabel: string;
+  licenseRights: string[];
+  children?: ReactNode;
+  authors?: { name: string }[];
+  link?: {
+    url: string;
+    text: string;
+    description?: string;
+    external?: boolean;
+  };
+  locale?: string;
+  hideFigcaption?: boolean;
+  hasLinkedVideo?: boolean;
+}
 
-const Figure = ({ children, type, resizeIframe, ...rest }) => {
+const Figure = ({ children, type = 'full', resizeIframe, ...rest }: Props) => {
   const typeClass = type === 'full-column' ? 'c-figure--full-column' : `u-float-${type}`;
   return (
-    <figure data-sizetype={type} {...classes('', { resize: resizeIframe }, typeClass)} {...rest}>
+    <figure data-sizetype={type} {...classes('', { resize: !!resizeIframe }, typeClass)} {...rest}>
       {isFunction(children) ? children({ typeClass }) : children}
     </figure>
   );
 };
 
-Figure.propTypes = {
-  id: PropTypes.string.isRequired,
-  children: PropTypes.oneOfType([PropTypes.node.isRequired, PropTypes.func.isRequired]).isRequired,
-  type: PropTypes.oneOf([
-    'full',
-    'full-column',
-    'left',
-    'small-left',
-    'right',
-    'small-right',
-    'xsmall-right',
-    'xsmall-left',
-  ]),
-  resizeIframe: PropTypes.bool,
-  noFigcaption: PropTypes.bool,
-};
-
-Figure.defaultProps = {
-  type: 'full',
-};
+interface Props {
+  id: string;
+  children: (params: { typeClass: string }) => ReactNode | ReactNode;
+  type: 'full' | 'full-column' | 'left' | 'small-left' | 'right' | 'small-right' | 'xsmall-right' | 'xsmall-left';
+  resizeIframe?: boolean;
+  noFigcaption?: boolean;
+}
 
 export default Figure;

package/src/Figure/{FigureExpandButton.js → FigureExpandButton.tsx}

@@ -7,11 +7,10 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { ArrowCollapse } from '@ndla/icons/common';
 import { ExpandTwoArrows } from '@ndla/icons/action';
 
-export function FigureExpandButton({ children, messages, typeClass }) {
+export function FigureExpandButton({ messages, typeClass }: Props) {
   return (
     <button
       className="c-figure__fullscreen-btn"
@@ -27,10 +26,10 @@ export function FigureExpandButton({ children, messages, typeClass }) {
   );
 }
 
-FigureExpandButton.propTypes = {
-  messages: PropTypes.shape({
-    zoomImageButtonLabel: PropTypes.string.isRequired,
-    zoomOutImageButtonLabel: PropTypes.string.isRequired,
-  }),
-  typeClass: PropTypes.string.isRequired,
-};
+interface Props {
+  messages: {
+    zoomImageButtonLabel: string;
+    zoomOutImageButtonLabel: string;
+  };
+  typeClass: string;
+}

package/src/Figure/{FigureLicense.js → FigureLicense.tsx}

@@ -9,23 +9,34 @@
 // N.B This component is used to render static markup serverside
 // Any interactivty is added by scripts located in the ndla-article-scripts package
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
 import { uuid } from '@ndla/util';
 import { LicenseDescription } from '@ndla/licenses';
-import { ContributorShape, LicenseShape } from '../shapes';
+import { FigureLicense } from './Figure';
+import { Contributor } from '../types';
 
 export const classLicenses = new BEMHelper({
   name: 'figure-license',
   prefix: 'c-',
 });
 
-export const FigureLicenseCta = ({ children, messages, authors, origin, title }) => (
+interface FigureLicenseCtaProps {
+  children?: ReactNode;
+  origin?: string;
+  authors?: Contributor[];
+  messages: {
+    source: string;
+    title: string;
+  };
+  title?: string;
+}
+
+export const FigureLicenseCta = ({ children, messages, authors, origin, title }: FigureLicenseCtaProps) => (
   <div {...classLicenses('cta-wrapper')}>
     <ul {...classLicenses('list')}>
       {title && <li {...classLicenses('item')}>{`${messages.title}: ${title}`}</li>}
-      {authors.map((author) => (
+      {authors?.map((author) => (
         <li key={uuid()} {...classLicenses('item')}>{`${author.type}: ${author.name}`}</li>
       ))}
       {origin && (
@@ -45,29 +56,20 @@ export const FigureLicenseCta = ({ children, messages, authors, origin, title })
   </div>
 );
 
-FigureLicenseCta.propTypes = {
-  children: PropTypes.node,
-  origin: PropTypes.string,
-  authors: PropTypes.arrayOf(ContributorShape),
-  messages: PropTypes.shape({
-    source: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-  }).isRequired,
-  title: PropTypes.string,
-};
-
-export const FigureLicenseByline = ({ messages, license, locale }) => [
-  <LicenseDescription key="byline" highlightCC locale={locale} messages={messages} licenseRights={license.rights} />,
-  <a key="link" {...classLicenses('link')} target="_blank" rel="noopener noreferrer" href={license.url}>
-    {license.linkText}
-  </a>,
-];
+interface Props {
+  messages: {
+    modelPremission?: string;
+    learnAboutLicenses: string;
+  };
+  license: FigureLicense;
+  locale: string;
+}
 
-FigureLicenseByline.propTypes = {
-  messages: PropTypes.shape({
-    modelPremission: PropTypes.string,
-    learnAboutLicenses: PropTypes.string.isRequired,
-  }).isRequired,
-  license: LicenseShape.isRequired,
-  locale: PropTypes.string.isRequired,
-};
+export const FigureLicenseByline = ({ messages, license, locale }: Props) => (
+  <>
+    <LicenseDescription key="byline" highlightCC locale={locale} messages={messages} licenseRights={license.rights} />,
+    <a key="link" {...classLicenses('link')} target="_blank" rel="noopener noreferrer" href={license.url}>
+      {license.linkText}
+    </a>
+  </>
+);

package/src/Figure/{FigureLicenseDialog.js → FigureLicenseDialog.tsx}

@@ -9,14 +9,14 @@
 // N.B This component is used to render static markup serverside
 // Any interactivty is added by scripts located in the ndla-article-scripts package
 
-import React from 'react';
-import PropTypes from 'prop-types';
-
+import React, { ReactNode } from 'react';
+//@ts-ignore
 import Dialog from '../Dialog';
-import { ContributorShape, LicenseShape } from '../shapes';
 import { classLicenses, FigureLicenseByline, FigureLicenseCta } from './FigureLicense';
+import { FigureLicense } from './Figure';
+import { Contributor } from '../types';
 
-export const FigureLicenseDialog = ({ children, messages, id, authors, origin, title, locale, license }) => {
+export const FigureLicenseDialog = ({ children, messages, id, authors, origin, title, locale, license }: Props) => {
   const headingLabelId = `heading-${id}`;
   return (
     <Dialog id={id} labelledby={headingLabelId} messages={messages}>
@@ -33,20 +33,20 @@ export const FigureLicenseDialog = ({ children, messages, id, authors, origin, t
   );
 };
 
-FigureLicenseDialog.propTypes = {
-  id: PropTypes.string.isRequired,
-  children: PropTypes.node,
-  origin: PropTypes.string,
-  authors: PropTypes.arrayOf(ContributorShape),
-  messages: PropTypes.shape({
-    modelPremission: PropTypes.string,
-    close: PropTypes.string.isRequired,
-    rulesForUse: PropTypes.string.isRequired,
-    source: PropTypes.string.isRequired,
-    learnAboutLicenses: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-  }).isRequired,
-  title: PropTypes.string,
-  license: LicenseShape.isRequired,
-  locale: PropTypes.string.isRequired,
-};
+interface Props {
+  id: string;
+  children?: ReactNode;
+  origin?: string;
+  authors?: Contributor[];
+  messages: {
+    modelPremission?: string;
+    close: string;
+    rulesForUse: string;
+    source: string;
+    learnAboutLicenses: string;
+    title: string;
+  };
+  title?: string;
+  license: FigureLicense;
+  locale: string;
+}

package/src/FileList/{File.jsx → File.tsx}

@@ -1,12 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
 import { Download } from '@ndla/icons/common';
 import SafeLink from '@ndla/safelink';
+import { FileFormat, FileType } from './FileList';
 
 const classes = BEMHelper('c-file-list');
 
-const renderFormat = (format, title, isPrimary, id, isDeadLink) => {
+const renderFormat = (format: FileFormat, title: string, isPrimary: boolean, id: string, isDeadLink: boolean) => {
   const titleWithFormat = `${title} (${format.fileType.toUpperCase()})`;
 
   const formatId = `${id}_${format.fileType}`;
@@ -42,7 +42,12 @@ const renderFormat = (format, title, isPrimary, id, isDeadLink) => {
   );
 };
 
-const File = ({ file, id }) => {
+interface Props {
+  id: string;
+  file: FileType;
+}
+
+const File = ({ file, id }: Props) => {
   const formatLinks = file.formats.map((format, index) =>
     renderFormat(format, file.title, index === 0, id, !file.fileExists),
   );
@@ -54,19 +59,4 @@ const File = ({ file, id }) => {
   );
 };
 
-File.propTypes = {
-  id: PropTypes.string.isRequired,
-  file: PropTypes.shape({
-    fileExists: PropTypes.bool,
-    title: PropTypes.string.isRequired,
-    formats: PropTypes.arrayOf(
-      PropTypes.shape({
-        url: PropTypes.string.isRequired,
-        fileType: PropTypes.string.isRequired,
-        tooltip: PropTypes.string.isRequired,
-      }),
-    ).isRequired,
-  }),
-};
-
 export default File;

package/src/FileList/FileList.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import BEMHelper from 'react-bem-helper';
+import File from './File';
+
+const classes = BEMHelper('c-file-list');
+
+export interface FileType {
+  title: string;
+  formats: FileFormat[];
+  fileExists?: boolean;
+}
+
+export interface FileFormat {
+  url: string;
+  fileType: string;
+  tooltip: string;
+}
+
+interface Props {
+  id: string;
+  heading: string;
+  files: FileType[];
+}
+
+const FileList = ({ files, heading, id }: Props) => (
+  <section {...classes()}>
+    <h1 {...classes('heading')}>{heading}</h1>
+    <ul {...classes('files')}>
+      {files.map((file) => (
+        <File key={`file-${id}-${file.title}`} file={file} id={id} />
+      ))}
+    </ul>
+  </section>
+);
+
+export default FileList;

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,
-};