@ndla/ui 3.2.1-alpha.5 → 3.2.3

package/src/ContentLoader/{index.js → index.tsx}

@@ -6,21 +6,31 @@
  *
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import { uuid } from '@ndla/util';
 
+interface Props {
+  children?: ReactNode;
+  speed?: number;
+  width?: number;
+  height?: number;
+  primaryColor?: string;
+  secondaryColor?: string;
+  preserveAspectRatio?: string;
+  className?: string;
+}
+
 const ContentLoader = ({
   children,
-  width,
-  height,
-  preserveAspectRatio,
-  className,
-  primaryColor,
-  secondaryColor,
-  speed,
+  width = 400,
+  height = 130,
+  preserveAspectRatio = 'xMidYMid meet',
+  className = '',
+  primaryColor = '#f0f0f0',
+  secondaryColor = '#e0e0e0',
+  speed = 2,
   ...rest
-}) => {
+}: Props) => {
   const idClip = uuid();
   const idGradient = uuid();
 
@@ -59,24 +69,4 @@ const ContentLoader = ({
   );
 };
 
-ContentLoader.propTypes = {
-  children: PropTypes.node,
-  speed: PropTypes.number,
-  width: PropTypes.number,
-  height: PropTypes.number,
-  primaryColor: PropTypes.string,
-  secondaryColor: PropTypes.string,
-  preserveAspectRatio: PropTypes.string,
-  className: PropTypes.string,
-};
-
-ContentLoader.defaultProps = {
-  speed: 2,
-  width: 400,
-  height: 130,
-  primaryColor: '#f0f0f0',
-  secondaryColor: '#e0e0e0',
-  preserveAspectRatio: 'xMidYMid meet',
-  className: '',
-};
 export default ContentLoader;

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

@@ -9,10 +9,9 @@
 // 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';
-
+//@ts-ignore
 import { createUniversalPortal } from '../utils/createUniversalPortal';
 
 const classes = new BEMHelper({
@@ -20,18 +19,32 @@ const classes = new BEMHelper({
   prefix: 'c-',
 });
 
+interface Props {
+  id: string;
+  labelledby?: string;
+  label?: string;
+  hidden?: boolean;
+  children?: ReactNode;
+  messages?: {
+    close: string;
+  };
+  modifier?: string | string[];
+  disablePortal?: boolean;
+  onClose?: () => void;
+}
+
 export const Dialog = ({
   children,
-  messages,
+  messages = { close: 'Lukk' },
   id,
   labelledby,
   label,
   modifier,
-  disablePortal,
-  hidden,
+  disablePortal = false,
+  hidden = true,
   onClose,
   ...rest
-}) => {
+}: Props) => {
   const content = (
     <div
       {...classes('', modifier)}
@@ -64,28 +77,3 @@ export const Dialog = ({
 
   return createUniversalPortal(content, 'body');
 };
-
-Dialog.propTypes = {
-  id: PropTypes.string.isRequired,
-  labelledby: PropTypes.string,
-  label: PropTypes.string,
-  hidden: PropTypes.bool,
-  children: PropTypes.node,
-  messages: PropTypes.shape({
-    close: PropTypes.string.isRequired,
-  }),
-  modifier: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-  disablePortal: PropTypes.bool,
-  onClose: PropTypes.func,
-};
-
-Dialog.defaultProps = {
-  disablePortal: false,
-  labelledby: null,
-  label: null,
-  hidden: true,
-  onClose: null,
-  messages: {
-    close: 'Lukk',
-  },
-};

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,14 +9,14 @@
 // 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 { isFunction as isFunctionHelper, 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';
 
 const classes = new BEMHelper({
@@ -36,16 +36,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 +76,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 +90,54 @@ 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 {
+  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,
+const isFunction = (children: Function | ReactNode): children is Function => {
+  return isFunctionHelper(children);
 };
 
-Figure.defaultProps = {
-  type: 'full',
-};
+interface Props {
+  id: string;
+  children: ReactNode | ((params: { typeClass: string }) => 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,58 @@
+/**
+ * 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-',
+});
+
+export type HeroContentType =
+  | 'subject-material'
+  | 'tasks-and-activities'
+  | 'assessment-resources'
+  | 'subject'
+  | 'external-learning-resources'
+  | 'source-material'
+  | 'learning-path'
+  | 'topic'
+  | 'beta'
+  | 'ndla-film'
+  | 'ndla-film has-image';
+
+interface HeroProps {
+  children?: ReactNode;
+  contentType: HeroContentType;
+}
+
+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/Hero/{index.js → index.ts}

@@ -16,3 +16,5 @@ export {
   Hero,
   NdlaFilmHero,
 } from './Hero';
+
+export type { HeroContentType } from './Hero';