@ndla/ui 3.2.1-alpha.8 → 3.2.1

package/lib/types.d.ts

@@ -37,6 +37,16 @@ export interface Contributor {
 export interface License {
     license: string;
 }
+export interface ImageCrop {
+    startX: number;
+    startY: number;
+    endX: number;
+    endY: number;
+}
+export interface ImageFocalPoint {
+    x: number;
+    y: number;
+}
 export interface Copyright {
     license: License;
     creators: Array<Contributor>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "3.2.1-alpha.8+dbf0f57f4",
+  "version": "3.2.1",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,17 +31,17 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/button": "^1.0.7-alpha.31+dbf0f57f4",
+    "@ndla/button": "^1.1.0",
     "@ndla/carousel": "^1.0.6",
     "@ndla/core": "^0.7.2",
     "@ndla/hooks": "^1.0.6",
     "@ndla/icons": "^1.3.1",
     "@ndla/licenses": "^1.0.7",
-    "@ndla/modal": "^1.1.12-alpha.28+dbf0f57f4",
+    "@ndla/modal": "^1.1.12",
     "@ndla/safelink": "^1.0.5",
     "@ndla/switch": "^0.0.32",
-    "@ndla/tabs": "^1.0.8",
-    "@ndla/tooltip": "^0.2.47",
+    "@ndla/tabs": "^1.0.9",
+    "@ndla/tooltip": "^0.2.48",
     "@ndla/util": "^2.0.0",
     "@reach/menu-button": "^0.12.1",
     "@reach/slider": "^0.12.1",
@@ -92,5 +92,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "dbf0f57f403ab8964c5fd14f4c8405cf5ab5d0e1"
+  "gitHead": "e2135297c1f57072515a122173674a211b541752"
 }

package/src/Article/ArticleAuthorContent.tsx

@@ -12,7 +12,6 @@ import { useTranslation } from 'react-i18next';
 // @ts-ignore
 import Button from '@ndla/button';
 import SafeLink from '@ndla/safelink';
-// @ts-ignore
 import Portrait from '../Portrait';
 
 const classes = new BEMHelper({

package/src/AuthorInfo/AuthorInfo.tsx

@@ -10,7 +10,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
 import SafeLink from '@ndla/safelink';
-// @ts-ignore
 import Portrait from '../Portrait';
 
 const classes = new BEMHelper({

package/src/BackgroundImage/BackgroundImage.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import BEMHelper from 'react-bem-helper';
+
+const classes = BEMHelper('c-background-image');
+
+type ImageType = 'mobile' | 'tablet' | 'desktop' | 'wide';
+
+interface Props {
+  showOverlay?: boolean;
+  className?: string;
+  images: {
+    url: string;
+    types: ImageType[];
+  }[];
+}
+
+const BackgroundImage = ({ images, showOverlay = false }: Props) => (
+  <div {...classes('', { showOverlay })}>
+    {images &&
+      images.map((image) =>
+        image.types.map((type) => (
+          <div
+            key={`${image.url}${type}`}
+            {...classes('background', type)}
+            style={{ backgroundImage: `url(${image.url})` }}
+          />
+        )),
+      )}
+  </div>
+);
+
+export default BackgroundImage;

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/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;