@ndla/ui 3.2.2 → 3.2.6

package/src/Figure/Figure.tsx

@@ -11,14 +11,13 @@
 
 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';
-import { License } from '../types';
 
 const classes = new BEMHelper({
   name: 'figure',
@@ -91,7 +90,7 @@ export const FigureCaption = ({
   );
 };
 
-export interface FigureLicense extends License {
+export interface FigureLicense {
   short: string;
   title: string;
   userFriendlyTitle: string;
@@ -103,7 +102,7 @@ export interface FigureLicense extends License {
 
 interface FigureCaptionProps {
   figureId: string;
-  id: string;
+  id?: string;
   caption?: string;
   reuseLabel: string;
   licenseRights: string[];
@@ -129,10 +128,14 @@ const Figure = ({ children, type = 'full', resizeIframe, ...rest }: Props) => {
   );
 };
 
+const isFunction = (children: Function | ReactNode): children is Function => {
+  return isFunctionHelper(children);
+};
+
 interface Props {
-  id: string;
-  children: (params: { typeClass: string }) => ReactNode | ReactNode;
-  type: 'full' | 'full-column' | 'left' | 'small-left' | 'right' | 'small-right' | 'xsmall-right' | 'xsmall-left';
+  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;
 }

package/src/Figure/FigureLicense.tsx

@@ -67,7 +67,7 @@ interface Props {
 
 export const FigureLicenseByline = ({ messages, license, locale }: Props) => (
   <>
-    <LicenseDescription key="byline" highlightCC locale={locale} messages={messages} licenseRights={license.rights} />,
+    <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/Filter/FilterButtons.tsx

@@ -143,7 +143,7 @@ export const FilterButtons = ({ heading, items, onFilterToggle, onRemoveAllFilte
                 </Button>
               </StyledButtonElementWrapper>
             }>
-            {(onClose: void) => (
+            {(onClose: () => void) => (
               <>
                 <ModalHeader modifier={['left-align']}>
                   <h1>{heading}</h1>

package/src/Footer/FooterPrivacy.tsx

@@ -71,7 +71,7 @@ const StyledFooterText = styled.div`
 const FooterPrivacy: React.FunctionComponent<FooterPrivacyProps> = ({ lang, label }) => (
   <StyledFooterText>
     <Modal activateButton={<StyledPrivacyButton type="button">{label}</StyledPrivacyButton>} size="fullscreen">
-      {(onClose: void) => (
+      {(onClose: () => void) => (
         <OneColumn cssModifier="medium">
           <ModalHeader>
             <ModalCloseButton onClick={onClose} title="Lukk" />

package/src/Hero/Hero.tsx

@@ -16,20 +16,22 @@ const classes = new BEMHelper({
   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:
-    | 'subject-material'
-    | 'tasks-and-activities'
-    | 'assessment-resources'
-    | 'subject'
-    | 'external-learning-resources'
-    | 'source-material'
-    | 'learning-path'
-    | 'topic'
-    | 'beta'
-    | 'ndla-film'
-    | 'ndla-film has-image';
+  contentType?: HeroContentType;
 }
 
 export const Hero = ({ children, contentType }: HeroProps) => (

package/src/Hero/index.ts

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

package/src/Image/Image.tsx

@@ -10,7 +10,17 @@ import React, { ReactNode } from 'react';
 import defined from 'defined';
 import styled from '@emotion/styled';
 import LazyLoadImage from './LazyLoadImage';
-import { ImageCrop, ImageFocalPoint } from '../types';
+export interface ImageCrop {
+  startX: number;
+  startY: number;
+  endX: number;
+  endY: number;
+}
+
+export interface ImageFocalPoint {
+  x: number;
+  y: number;
+}
 
 export const makeSrcQueryString = (width: number | undefined, crop?: ImageCrop, focalPoint?: ImageFocalPoint) => {
   const widthParams = width && `width=${width}`;

package/src/Image/ImageLink.tsx

@@ -9,7 +9,7 @@
 import React, { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { makeSrcQueryString } from './Image';
-import { ImageCrop, ImageFocalPoint } from '../types';
+import { ImageCrop, ImageFocalPoint } from '.';
 
 const StyledLink = styled.a`
   box-shadow: inset 0 0;

package/src/Image/index.ts

@@ -9,5 +9,6 @@
 import Image from './Image';
 export { makeSrcQueryString } from './Image';
 export { ImageLink } from './ImageLink';
+export type { ImageCrop, ImageFocalPoint } from './Image';
 
 export default Image;

package/src/ResourcesWrapper/{ResourcesTitle.jsx → ResourcesTitle.tsx}

@@ -6,20 +6,18 @@
  *
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import { classes } from './ResourcesWrapper';
 import { SubjectBadge } from '../ContentTypeBadge';
 
-const ResourceTitle = ({ children }) => (
+interface Props {
+  children: ReactNode;
+}
+const ResourceTitle = ({ children }: Props) => (
   <div {...classes('title-wrapper')}>
     <SubjectBadge size="large" background />
     <h1 {...classes('title')}>{children}</h1>
   </div>
 );
 
-ResourceTitle.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
 export default ResourceTitle;

package/src/ResourcesWrapper/{ResourcesTopicTitle.jsx → ResourcesTopicTitle.tsx}

@@ -1,9 +1,9 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
+import React, { Fragment, ReactNode } from 'react';
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 import { spacing } from '@ndla/core';
 import { HelpCircleDual } from '@ndla/icons/common';
+//@ts-ignore
 import Modal, { ModalBody, ModalHeader, ModalCloseButton } from '@ndla/modal';
 import Tooltip from '@ndla/tooltip';
 import { Switch } from '@ndla/switch';
@@ -11,7 +11,10 @@ import { useTranslation } from 'react-i18next';
 
 import { classes } from './ResourcesWrapper';
 
-const HelpIcon = ({ invertedStyle }) => (
+interface HelpIconProps {
+  invertedStyle: boolean;
+}
+const HelpIcon = ({ invertedStyle }: HelpIconProps) => (
   <div {...classes('topic-title-icon', { invertedStyle })}>
     <HelpCircleDual className={`c-icon--22 u-margin-left-tiny ${classes('icon').className}`} />
   </div>
@@ -37,14 +40,25 @@ const TooltipButton = styled.button`
   cursor: pointer;
 `;
 
+interface Props {
+  title?: string;
+  toggleAdditionalResources: () => void;
+  hasAdditionalResources: boolean;
+  showAdditionalResources: boolean;
+  invertedStyle?: boolean;
+  messages: {
+    label: string;
+    additionalFilterLabel: string;
+  };
+}
 const ResourcesTopicTitle = ({
   title,
   hasAdditionalResources,
   toggleAdditionalResources,
   showAdditionalResources,
   messages,
-  invertedStyle,
-}) => {
+  invertedStyle = false,
+}: Props) => {
   const { t } = useTranslation();
   // Fix for heading while title not required when ready.
   let heading;
@@ -70,7 +84,7 @@ const ResourcesTopicTitle = ({
           />
           <Modal
             narrow
-            wrapperFunctionForButton={(activateButton) => (
+            wrapperFunctionForButton={(activateButton: ReactNode) => (
               <TooltipWrapper>
                 <Tooltip tooltip={t('resource.dialogTooltip')}>{activateButton}</Tooltip>
               </TooltipWrapper>
@@ -80,8 +94,8 @@ const ResourcesTopicTitle = ({
                 <HelpIcon invertedStyle={invertedStyle} />
               </TooltipButton>
             }>
-            {(onClose) => (
-              <Fragment>
+            {(onClose: () => void) => (
+              <>
                 <ModalHeader>
                   <ModalCloseButton title={t('modal.closeModal')} onClick={onClose} />
                 </ModalHeader>
@@ -91,7 +105,7 @@ const ResourcesTopicTitle = ({
                   <p>{t('resource.dialogText1')}</p>
                   <p>{t('resource.dialogText2')}</p>
                 </ModalBody>
-              </Fragment>
+              </>
             )}
           </Modal>
         </div>
@@ -100,17 +114,4 @@ const ResourcesTopicTitle = ({
   );
 };
 
-/* eslint-disable no-console */
-ResourcesTopicTitle.propTypes = {
-  title: PropTypes.string, // Should be required
-  toggleAdditionalResources: PropTypes.func.isRequired,
-  hasAdditionalResources: PropTypes.bool.isRequired,
-  showAdditionalResources: PropTypes.bool.isRequired,
-  invertedStyle: PropTypes.bool,
-  messages: PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    additionalFilterLabel: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
 export default ResourcesTopicTitle;

package/src/ResourcesWrapper/{ResourcesWrapper.jsx → ResourcesWrapper.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';
 
 export const classes = new BEMHelper({
@@ -15,22 +14,18 @@ export const classes = new BEMHelper({
   prefix: 'c-',
 });
 
-const ResourcesWrapper = ({ children, header, subjectPage, id }) => (
+interface Props {
+  header?: ReactNode;
+  children: ReactNode;
+  subjectPage?: boolean;
+  id?: string;
+}
+
+const ResourcesWrapper = ({ children, header, subjectPage = false, id }: Props) => (
   <section {...classes('', { subjectPage })} id={id}>
     {header}
     <div {...classes('content')}>{children}</div>
   </section>
 );
 
-ResourcesWrapper.propTypes = {
-  header: PropTypes.node,
-  children: PropTypes.node.isRequired,
-  subjectPage: PropTypes.bool,
-  id: PropTypes.string,
-};
-
-ResourcesWrapper.defaultProps = {
-  subjectPage: false,
-};
-
 export default ResourcesWrapper;

package/src/Table/{Table.jsx → Table.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';
 import { ZoomOutMap } from '@ndla/icons/common';
 
@@ -16,7 +15,19 @@ import Dialog from '../Dialog';
 
 const classes = BEMHelper('c-table');
 
-const Table = ({ children, messages, id, ...rest }) => {
+interface Props {
+  id?: string;
+  messages: {
+    dialogCloseButton: string;
+    expandButtonLabel: string;
+  };
+  children?: ReactNode;
+  dangerouslySetInnerHTML?: {
+    __html: string;
+  };
+}
+
+const Table = ({ children, messages, id, ...rest }: Props) => {
   const tableId = id || uuid();
   const dialogId = `dialog-${tableId}`;
 
@@ -55,13 +66,4 @@ const Table = ({ children, messages, id, ...rest }) => {
   );
 };
 
-Table.propTypes = {
-  id: PropTypes.string,
-  messages: PropTypes.shape({
-    dialogCloseButton: PropTypes.string.isRequired,
-    expandButtonLabel: PropTypes.string.isRequired,
-  }).isRequired,
-  children: PropTypes.node,
-};
-
 export default Table;

package/src/Topic/Topic.tsx

@@ -22,9 +22,7 @@ import { useTranslation } from 'react-i18next';
 import Loader from './Loader';
 import { ItemProps } from '../Navigation/NavigationBox';
 import { NavigationBox } from '../Navigation';
-// @ts-ignore
-import { makeSrcQueryString } from '../Image';
-import { ImageCrop, ImageFocalPoint } from '../types';
+import { makeSrcQueryString, ImageCrop, ImageFocalPoint } from '../Image';
 
 type InvertItProps = {
   invertedStyle?: boolean;

package/src/Translation/TranslationBox.tsx

@@ -6,7 +6,7 @@ interface Props {
   tabs: {
     id: string;
     title: string;
-    content: () => ReactNode | ReactNode;
+    content: (() => ReactNode) | ReactNode;
   }[];
 }
 const TranslationBox = ({ tabs }: Props) => (

package/src/User/AuthModal.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
 // @ts-ignore
@@ -70,7 +70,7 @@ export type AuthModalProps = {
   authorizedCollectedInfo?: string[];
   onAuthenticateClick: () => void;
   position?: 'top' | 'bottom';
-  activateButton?: ReactNode;
+  activateButton?: ReactElement;
   children?: ReactNode;
   isOpen?: boolean;
   onClose?: () => void;
@@ -97,7 +97,7 @@ const AuthModal = ({
       isOpen={isOpen}
       onClose={onClose}
       controllable={!activateButton}>
-      {(onClose: void) => (
+      {(onClose: () => void) => (
         <StyledModalBody>
           <StyledModalHeader>
             <StyledHeading aria-label="Feide">

package/src/index-javascript.js

@@ -6,7 +6,6 @@
  *
  */
 
-export { default as Table } from './Table';
 export { FilterList, FilterListPhone, FilterButtons } from './Filter';
 
 export {
@@ -44,7 +43,6 @@ export {
   CompetenceGoalsDialog,
 } from './CompetenceGoals';
 
-export { default as ResourcesWrapper, ResourcesTitle, ResourcesTopicTitle } from './ResourcesWrapper';
 export {
   MediaList,
   MediaListItem,

package/src/index.ts

@@ -24,6 +24,10 @@ export {
   default as Article,
 } from './Article';
 
+export { default as Table } from './Table';
+
+export { default as ResourcesWrapper, ResourcesTitle, ResourcesTopicTitle } from './ResourcesWrapper';
+
 export { createUniversalPortal } from './utils/createUniversalPortal';
 
 export { default as NoContentBox } from './NoContentBox';

package/src/locale/messages-en.ts

@@ -707,8 +707,8 @@ const messages = {
       licenseAuthor: 'Scanpix.no',
     },
     blog2: {
-      text: 'En god skolestart',
-      externalLink: 'https://blogg.ndla.no/engodskolestart/',
+      text: 'Aktiviser elevane med digitale verktøy',
+      externalLink: 'https://blogg.ndla.no/2021/09/aktiviser-elevane-med-digitale-verktoy/',
       linkText: 'Fagblogg',
       license: 'CC-BY-NC-SA-4.0',
       licenseAuthor: 'Scanpix.no',

package/src/locale/messages-nb.ts

@@ -706,8 +706,8 @@ const messages = {
       licenseAuthor: 'Scanpix.no',
     },
     blog2: {
-      text: 'En god skolestart',
-      externalLink: 'https://blogg.ndla.no/engodskolestart/',
+      text: 'Aktiviser elevene med digitale verktøy',
+      externalLink: 'https://blogg.ndla.no/2021/09/aktiviser-elevane-med-digitale-verktoy/',
       linkText: 'Fagblogg',
       license: 'CC-BY-NC-SA-4.0',
       licenseAuthor: 'Scanpix.no',

package/src/locale/messages-nn.ts

@@ -707,8 +707,8 @@ const messages = {
       licenseAuthor: 'Scanpix.no',
     },
     blog2: {
-      text: 'Ein god skulestart',
-      externalLink: 'https://blogg.ndla.no/engodskolestart/',
+      text: 'Aktiviser elevane med digitale verktøy',
+      externalLink: 'https://blogg.ndla.no/2021/09/aktiviser-elevane-med-digitale-verktoy/',
       linkText: 'Fagblogg',
       license: 'CC-BY-NC-SA-4.0',
       licenseAuthor: 'Scanpix.no',

package/src/types.ts

@@ -45,18 +45,6 @@ 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>;