@ndla/ui 3.2.1-alpha.3 → 3.2.2

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

@@ -1,6 +1,6 @@
-import React, { cloneElement } from 'react';
-import PropTypes from 'prop-types';
+import React, { cloneElement, ReactElement } from 'react';
 import BEMHelper from 'react-bem-helper';
+//@ts-ignore
 import Button from '@ndla/button';
 import SafeLink from '@ndla/safelink';
 import SectionHeading from '../SectionHeading';
@@ -10,14 +10,32 @@ const classes = new BEMHelper({
   prefix: 'c-',
 });
 
-export const RelatedArticle = ({ title, introduction, icon, modifier, to, linkInfo = '', target = '' }) => {
+interface RelatedArticleProps {
+  icon: ReactElement;
+  title: string;
+  modifier?: string;
+  introduction: string;
+  to: string;
+  linkInfo?: string;
+  target?: string;
+}
+
+export const RelatedArticle = ({
+  title,
+  introduction,
+  icon,
+  modifier,
+  to,
+  linkInfo = '',
+  target = '',
+}: RelatedArticleProps) => {
   const iconWithClass = cloneElement(icon, { className: 'c-icon--medium' });
   return (
     <article {...classes('item', modifier)}>
       <h1 {...classes('title')}>
         {iconWithClass}
         <span {...classes('link-wrapper')}>
-          <SafeLink to={to} {...classes('link')} target={target} rel={linkInfo ? 'noopener noreferrer' : null}>
+          <SafeLink to={to} {...classes('link')} target={target} rel={linkInfo ? 'noopener noreferrer' : undefined}>
             {title}
           </SafeLink>
         </span>
@@ -28,24 +46,27 @@ export const RelatedArticle = ({ title, introduction, icon, modifier, to, linkIn
   );
 };
 
-RelatedArticle.propTypes = {
-  icon: PropTypes.node.isRequired,
-  title: PropTypes.string.isRequired,
-  modifier: PropTypes.string,
-  introduction: PropTypes.string.isRequired,
-  to: PropTypes.string.isRequired,
-  linkInfo: PropTypes.string,
-  target: PropTypes.string,
-};
-
-const RelatedArticleList = ({ messages, children, articleCount, dangerouslySetInnerHTML }) => {
-  const clonedChildren = !dangerouslySetInnerHTML
-    ? React.Children.map(children, (article, i) =>
-        React.cloneElement(article, {
-          modifier: i >= 2 ? `${article.props.modifier} hidden` : article.props.modifier,
-        }),
-      )
-    : null;
+interface Props {
+  messages: {
+    title: string;
+    showMore: string;
+    showLess: string;
+  };
+  children?: ReactElement;
+  dangerouslySetInnerHTML?: {
+    __html: string;
+  };
+  articleCount?: number;
+}
+const RelatedArticleList = ({ messages, children, articleCount, dangerouslySetInnerHTML }: Props) => {
+  const clonedChildren =
+    !dangerouslySetInnerHTML && children
+      ? React.Children.map(children, (article, i) =>
+          React.cloneElement(article, {
+            modifier: i >= 2 ? `${article.props.modifier} hidden` : article.props.modifier,
+          }),
+        )
+      : null;
   const childrenCount = articleCount || React.Children.count(children);
 
   return (
@@ -67,12 +88,4 @@ const RelatedArticleList = ({ messages, children, articleCount, dangerouslySetIn
   );
 };
 
-RelatedArticleList.propTypes = {
-  children: PropTypes.node,
-  messages: PropTypes.shape({ title: PropTypes.string.isRequired }),
-  dangerouslySetInnerHTML: PropTypes.shape({
-    __html: PropTypes.string.isRequired,
-  }),
-  articleCount: PropTypes.number,
-};
 export default RelatedArticleList;

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;

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

@@ -6,8 +6,7 @@
  *
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import BEMHelper from 'react-bem-helper';
 
 const classes = new BEMHelper({
@@ -15,16 +14,16 @@ const classes = new BEMHelper({
   prefix: 'c-',
 });
 
-const Translation = ({ children, index }) => (
+interface Props {
+  children: ReactNode;
+  index: number;
+}
+
+const Translation = ({ children, index }: Props) => (
   <div {...classes('')}>
     <div {...classes('index')}>{index}</div>
     <dl {...classes('wrapper')}>{children}</dl>
   </div>
 );
 
-Translation.propTypes = {
-  index: PropTypes.number.isRequired,
-  children: PropTypes.node.isRequired,
-};
-
 export default Translation;

package/src/Translation/TranslationBox.tsx

@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react';
+//@ts-ignore
+import { ArticleTabs } from '@ndla/tabs';
+
+interface Props {
+  tabs: {
+    id: string;
+    title: string;
+    content: () => ReactNode | ReactNode;
+  }[];
+}
+const TranslationBox = ({ tabs }: Props) => (
+  <div className="c-translation-box">
+    <div className="c-bodybox c-bodybox--translation">
+      <ArticleTabs tabs={tabs} />
+    </div>
+  </div>
+);
+
+export default TranslationBox;