@ndla/ui 3.2.2 → 3.2.3

package/lib/index-javascript.js

@@ -197,24 +197,6 @@ Object.defineProperty(exports, "CompetenceGoalsDialog", {
     return _CompetenceGoals.CompetenceGoalsDialog;
   }
 });
-Object.defineProperty(exports, "ResourcesWrapper", {
-  enumerable: true,
-  get: function get() {
-    return _ResourcesWrapper["default"];
-  }
-});
-Object.defineProperty(exports, "ResourcesTitle", {
-  enumerable: true,
-  get: function get() {
-    return _ResourcesWrapper.ResourcesTitle;
-  }
-});
-Object.defineProperty(exports, "ResourcesTopicTitle", {
-  enumerable: true,
-  get: function get() {
-    return _ResourcesWrapper.ResourcesTopicTitle;
-  }
-});
 Object.defineProperty(exports, "MediaList", {
   enumerable: true,
   get: function get() {
@@ -326,8 +308,6 @@ var _TopicMenu = _interopRequireWildcard(require("./TopicMenu"));
 
 var _CompetenceGoals = _interopRequireWildcard(require("./CompetenceGoals"));
 
-var _ResourcesWrapper = _interopRequireWildcard(require("./ResourcesWrapper"));
-
 var _MediaList = require("./MediaList");
 
 var _Embedded = require("./Embedded");

package/lib/index.d.ts

@@ -8,6 +8,7 @@
 /** @ts-ignore */
 export * from './index-javascript';
 export { ArticleByline, ArticleContent, ArticleFootNotes, ArticleIntroduction, ArticleTitle, ArticleWrapper, ArticleHeaderWrapper, ArticleSideBar, default as Article, } from './Article';
+export { default as ResourcesWrapper, ResourcesTitle, ResourcesTopicTitle } from './ResourcesWrapper';
 export { createUniversalPortal } from './utils/createUniversalPortal';
 export { default as NoContentBox } from './NoContentBox';
 export { default as Masthead, MastheadItem } from './Masthead';

package/lib/index.js

@@ -15,6 +15,9 @@ var _exportNames = {
   ArticleHeaderWrapper: true,
   ArticleSideBar: true,
   Article: true,
+  ResourcesWrapper: true,
+  ResourcesTitle: true,
+  ResourcesTopicTitle: true,
   createUniversalPortal: true,
   NoContentBox: true,
   Masthead: true,
@@ -193,6 +196,24 @@ Object.defineProperty(exports, "Article", {
     return _Article["default"];
   }
 });
+Object.defineProperty(exports, "ResourcesWrapper", {
+  enumerable: true,
+  get: function get() {
+    return _ResourcesWrapper["default"];
+  }
+});
+Object.defineProperty(exports, "ResourcesTitle", {
+  enumerable: true,
+  get: function get() {
+    return _ResourcesWrapper.ResourcesTitle;
+  }
+});
+Object.defineProperty(exports, "ResourcesTopicTitle", {
+  enumerable: true,
+  get: function get() {
+    return _ResourcesWrapper.ResourcesTopicTitle;
+  }
+});
 Object.defineProperty(exports, "createUniversalPortal", {
   enumerable: true,
   get: function get() {
@@ -947,6 +968,8 @@ Object.keys(_indexJavascript).forEach(function (key) {
 
 var _Article = _interopRequireWildcard(require("./Article"));
 
+var _ResourcesWrapper = _interopRequireWildcard(require("./ResourcesWrapper"));
+
 var _createUniversalPortal = require("./utils/createUniversalPortal");
 
 var _NoContentBox = _interopRequireDefault(require("./NoContentBox"));

package/lib/types.d.ts

@@ -37,16 +37,6 @@ 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.2",
+  "version": "3.2.3",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -40,8 +40,8 @@
     "@ndla/modal": "^1.1.13",
     "@ndla/safelink": "^1.0.5",
     "@ndla/switch": "^0.0.32",
-    "@ndla/tabs": "^1.0.9",
-    "@ndla/tooltip": "^0.2.48",
+    "@ndla/tabs": "^1.0.10",
+    "@ndla/tooltip": "^0.2.49",
     "@ndla/util": "^2.0.0",
     "@reach/menu-button": "^0.12.1",
     "@reach/slider": "^0.12.1",
@@ -92,5 +92,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "259407ea66af1f37f0942caf1b63a4ea14336e0a"
+  "gitHead": "bc3f20206c0a057260deef5eb887db3ed15b648b"
 }

package/src/Article/ArticleSideBar.tsx

@@ -22,7 +22,10 @@ const ButtonWrapper = styled.div`
   width: 100%;
 `;
 
-const CursorWrapper = styled.div`
+type CursorWrapperProps = {
+  hide: boolean;
+};
+const CursorWrapper = styled.div<CursorWrapperProps>`
   @import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light+Two&display=swap');
   width: 120px;
   font-family: 'Shadows Into Light Two', cursive;
@@ -30,12 +33,15 @@ const CursorWrapper = styled.div`
   background-image: url("data:image/svg+xml,%3Csvg width='10' height='46' viewBox='0 0 10 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.7626 0.887965L4.52762 0.446621L3.64494 0.91658L3.87992 1.35792L4.7626 0.887965ZM8.03372 45.2321L8.46374 39.4747L3.26262 41.981L8.03372 45.2321ZM4.32126 1.12294C3.87992 1.35792 3.8798 1.3577 3.87969 1.3575C3.87968 1.35748 3.87959 1.35731 3.87956 1.35726C3.87951 1.35716 3.87952 1.35717 3.87959 1.35731C3.87973 1.35758 3.88012 1.35832 3.88076 1.35954C3.88203 1.36199 3.88428 1.36633 3.88747 1.3726C3.89384 1.38513 3.90397 1.40533 3.91755 1.43329C3.9447 1.48921 3.98562 1.57616 4.0378 1.69484C4.14215 1.9322 4.29157 2.29653 4.46596 2.79343C4.8147 3.78714 5.2635 5.31159 5.65136 7.41155C6.42699 11.611 6.95965 18.1161 5.95809 27.2851L6.95217 27.3937C7.96354 18.1349 7.42926 11.5317 6.63473 7.22992C6.2375 5.07924 5.77541 3.5048 5.40953 2.46228C5.22661 1.94106 5.06779 1.55294 4.95323 1.29237C4.89595 1.16209 4.84974 1.06371 4.81713 0.996535C4.80082 0.96295 4.78791 0.937167 4.77872 0.9191C4.77413 0.910067 4.77046 0.902963 4.76776 0.897778C4.76641 0.895185 4.7653 0.893072 4.76444 0.891437C4.76401 0.890619 4.76364 0.889921 4.76333 0.889343C4.76318 0.889054 4.763 0.888709 4.76292 0.888565C4.76276 0.88825 4.7626 0.887965 4.32126 1.12294ZM5.95809 27.2851C5.19358 34.284 5.23105 38.5891 5.58488 41.2448L6.57612 41.1128C6.23761 38.5721 6.19146 34.3579 6.95217 27.3937L5.95809 27.2851Z' fill='%2320588F'/%3E%3C/svg%3E%0A");
   background-position: bottom center;
   background-repeat: no-repeat;
+  ${(p) => p.hide && 'opacity:0;'}
+  transition-duration: 0.5s;
   padding-bottom: 60px;
 `;
 
 const LinkText = styled.div`
   transform: rotate(-4.15deg);
   text-align: center;
+
   ${fonts.sizes('18px', '26px')};
 `;
 
@@ -44,8 +50,15 @@ type Props = {
   onLinkToResourcesClick?: (e: React.MouseEvent<HTMLElement>) => void;
   copyPageUrlLink?: string;
   licenseBox?: React.ReactNode;
+  resourcesRef?: React.RefObject<HTMLElement>;
 };
-const ArticleSideBar = ({ linkToResources, onLinkToResourcesClick, copyPageUrlLink, licenseBox }: Props) => {
+const ArticleSideBar = ({
+  linkToResources,
+  onLinkToResourcesClick,
+  copyPageUrlLink,
+  licenseBox,
+  resourcesRef,
+}: Props) => {
   const { t } = useTranslation();
   const copyLinkHandler = () => {
     if (copyPageUrlLink) {
@@ -53,6 +66,21 @@ const ArticleSideBar = ({ linkToResources, onLinkToResourcesClick, copyPageUrlLi
     }
   };
 
+  const [hide, setHide] = React.useState(Boolean(false));
+  React.useEffect(() => {
+    window.onscroll = function () {
+      if (!resourcesRef?.current) {
+        return;
+      }
+      //TOP
+      if (resourcesRef.current.getBoundingClientRect().top <= 0) {
+        setHide(true);
+      } else if (resourcesRef.current.getBoundingClientRect().top <= 0) {
+        setHide(false);
+      }
+    };
+  });
+
   return (
     <Wrapper>
       {copyPageUrlLink && (
@@ -87,7 +115,7 @@ const ArticleSideBar = ({ linkToResources, onLinkToResourcesClick, copyPageUrlLi
         </Modal>
       )}
       {linkToResources && (
-        <CursorWrapper>
+        <CursorWrapper hide={hide}>
           <LinkText>
             <SafeLink
               to={linkToResources}

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;
@@ -129,9 +128,13 @@ 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;
+  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/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/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/index-javascript.js

@@ -44,7 +44,6 @@ export {
   CompetenceGoalsDialog,
 } from './CompetenceGoals';
 
-export { default as ResourcesWrapper, ResourcesTitle, ResourcesTopicTitle } from './ResourcesWrapper';
 export {
   MediaList,
   MediaListItem,

package/src/index.ts

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

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