@ndla/ui 3.2.1-alpha.8 → 3.2.4

package/lib/index.js

@@ -15,10 +15,26 @@ var _exportNames = {
   ArticleHeaderWrapper: true,
   ArticleSideBar: true,
   Article: true,
+  ResourcesWrapper: true,
+  ResourcesTitle: true,
+  ResourcesTopicTitle: true,
+  createUniversalPortal: true,
+  NoContentBox: true,
+  Masthead: true,
+  MastheadItem: true,
+  Portrait: true,
+  ContentLoader: true,
+  RelatedArticleList: true,
+  RelatedArticle: true,
   ErrorResourceAccessDenied: true,
   ErrorMessage: true,
+  FileList: true,
+  File: true,
   BlogPost: true,
   BlogPostWrapper: true,
+  Logo: true,
+  InfoBox: true,
+  InfoWidget: true,
   FrontpageInfo: true,
   FrontpageFilm: true,
   FrontpageToolbox: true,
@@ -27,10 +43,26 @@ var _exportNames = {
   FrontpageSubjectIllustration: true,
   FrontpageSearch: true,
   FrontpageProgramMenu: true,
+  FactBox: true,
+  Image: true,
+  ImageLink: true,
+  makeSrcQueryString: true,
+  SubjectMaterialHero: true,
+  TasksAndActivitiesHero: true,
+  AssessmentResourcesHero: true,
+  SubjectHero: true,
+  ExternalLearningResourcesHero: true,
+  SourceMaterialHero: true,
+  Hero: true,
+  NdlaFilmHero: true,
   Footer: true,
   EditorName: true,
   FooterText: true,
   FooterAuth: true,
+  Figure: true,
+  FigureCaption: true,
+  FigureLicenseDialog: true,
+  FigureExpandButton: true,
   LanguageSelector: true,
   LearningPathWrapper: true,
   LearningPathContent: true,
@@ -42,6 +74,10 @@ var _exportNames = {
   LearningPathLastStepNavigation: true,
   LearningPathMobileStepInfo: true,
   LearningPathMobileHeader: true,
+  Translation: true,
+  TranslationLine: true,
+  TranslationBox: true,
+  Spinner: true,
   SearchResultSleeve: true,
   ContentTypeResult: true,
   SearchFieldForm: true,
@@ -160,6 +196,72 @@ 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() {
+    return _createUniversalPortal.createUniversalPortal;
+  }
+});
+Object.defineProperty(exports, "NoContentBox", {
+  enumerable: true,
+  get: function get() {
+    return _NoContentBox["default"];
+  }
+});
+Object.defineProperty(exports, "Masthead", {
+  enumerable: true,
+  get: function get() {
+    return _Masthead["default"];
+  }
+});
+Object.defineProperty(exports, "MastheadItem", {
+  enumerable: true,
+  get: function get() {
+    return _Masthead.MastheadItem;
+  }
+});
+Object.defineProperty(exports, "Portrait", {
+  enumerable: true,
+  get: function get() {
+    return _Portrait["default"];
+  }
+});
+Object.defineProperty(exports, "ContentLoader", {
+  enumerable: true,
+  get: function get() {
+    return _ContentLoader["default"];
+  }
+});
+Object.defineProperty(exports, "RelatedArticleList", {
+  enumerable: true,
+  get: function get() {
+    return _RelatedArticleList["default"];
+  }
+});
+Object.defineProperty(exports, "RelatedArticle", {
+  enumerable: true,
+  get: function get() {
+    return _RelatedArticleList.RelatedArticle;
+  }
+});
 Object.defineProperty(exports, "ErrorResourceAccessDenied", {
   enumerable: true,
   get: function get() {
@@ -172,6 +274,18 @@ Object.defineProperty(exports, "ErrorMessage", {
     return _ErrorMessage["default"];
   }
 });
+Object.defineProperty(exports, "FileList", {
+  enumerable: true,
+  get: function get() {
+    return _FileList["default"];
+  }
+});
+Object.defineProperty(exports, "File", {
+  enumerable: true,
+  get: function get() {
+    return _FileList.File;
+  }
+});
 Object.defineProperty(exports, "BlogPost", {
   enumerable: true,
   get: function get() {
@@ -184,6 +298,24 @@ Object.defineProperty(exports, "BlogPostWrapper", {
     return _BlogPosts.BlogPostWrapper;
   }
 });
+Object.defineProperty(exports, "Logo", {
+  enumerable: true,
+  get: function get() {
+    return _Logo["default"];
+  }
+});
+Object.defineProperty(exports, "InfoBox", {
+  enumerable: true,
+  get: function get() {
+    return _InfoBox.InfoBox;
+  }
+});
+Object.defineProperty(exports, "InfoWidget", {
+  enumerable: true,
+  get: function get() {
+    return _InfoWidget["default"];
+  }
+});
 Object.defineProperty(exports, "FrontpageInfo", {
   enumerable: true,
   get: function get() {
@@ -232,6 +364,78 @@ Object.defineProperty(exports, "FrontpageProgramMenu", {
     return _Frontpage.FrontpageProgramMenu;
   }
 });
+Object.defineProperty(exports, "FactBox", {
+  enumerable: true,
+  get: function get() {
+    return _FactBox["default"];
+  }
+});
+Object.defineProperty(exports, "Image", {
+  enumerable: true,
+  get: function get() {
+    return _Image["default"];
+  }
+});
+Object.defineProperty(exports, "ImageLink", {
+  enumerable: true,
+  get: function get() {
+    return _Image.ImageLink;
+  }
+});
+Object.defineProperty(exports, "makeSrcQueryString", {
+  enumerable: true,
+  get: function get() {
+    return _Image.makeSrcQueryString;
+  }
+});
+Object.defineProperty(exports, "SubjectMaterialHero", {
+  enumerable: true,
+  get: function get() {
+    return _Hero.SubjectMaterialHero;
+  }
+});
+Object.defineProperty(exports, "TasksAndActivitiesHero", {
+  enumerable: true,
+  get: function get() {
+    return _Hero.TasksAndActivitiesHero;
+  }
+});
+Object.defineProperty(exports, "AssessmentResourcesHero", {
+  enumerable: true,
+  get: function get() {
+    return _Hero.AssessmentResourcesHero;
+  }
+});
+Object.defineProperty(exports, "SubjectHero", {
+  enumerable: true,
+  get: function get() {
+    return _Hero.SubjectHero;
+  }
+});
+Object.defineProperty(exports, "ExternalLearningResourcesHero", {
+  enumerable: true,
+  get: function get() {
+    return _Hero.ExternalLearningResourcesHero;
+  }
+});
+Object.defineProperty(exports, "SourceMaterialHero", {
+  enumerable: true,
+  get: function get() {
+    return _Hero.SourceMaterialHero;
+  }
+});
+Object.defineProperty(exports, "Hero", {
+  enumerable: true,
+  get: function get() {
+    return _Hero.Hero;
+  }
+});
+Object.defineProperty(exports, "NdlaFilmHero", {
+  enumerable: true,
+  get: function get() {
+    return _Hero.NdlaFilmHero;
+  }
+});
 Object.defineProperty(exports, "Footer", {
   enumerable: true,
   get: function get() {
@@ -256,6 +460,30 @@ Object.defineProperty(exports, "FooterAuth", {
     return _Footer.FooterAuth;
   }
 });
+Object.defineProperty(exports, "Figure", {
+  enumerable: true,
+  get: function get() {
+    return _Figure.Figure;
+  }
+});
+Object.defineProperty(exports, "FigureCaption", {
+  enumerable: true,
+  get: function get() {
+    return _Figure.FigureCaption;
+  }
+});
+Object.defineProperty(exports, "FigureLicenseDialog", {
+  enumerable: true,
+  get: function get() {
+    return _Figure.FigureLicenseDialog;
+  }
+});
+Object.defineProperty(exports, "FigureExpandButton", {
+  enumerable: true,
+  get: function get() {
+    return _Figure.FigureExpandButton;
+  }
+});
 Object.defineProperty(exports, "LanguageSelector", {
   enumerable: true,
   get: function get() {
@@ -322,6 +550,30 @@ Object.defineProperty(exports, "LearningPathMobileHeader", {
     return _LearningPaths.LearningPathMobileHeader;
   }
 });
+Object.defineProperty(exports, "Translation", {
+  enumerable: true,
+  get: function get() {
+    return _Translation.Translation;
+  }
+});
+Object.defineProperty(exports, "TranslationLine", {
+  enumerable: true,
+  get: function get() {
+    return _Translation.TranslationLine;
+  }
+});
+Object.defineProperty(exports, "TranslationBox", {
+  enumerable: true,
+  get: function get() {
+    return _Translation.TranslationBox;
+  }
+});
+Object.defineProperty(exports, "Spinner", {
+  enumerable: true,
+  get: function get() {
+    return _Spinner["default"];
+  }
+});
 Object.defineProperty(exports, "SearchResultSleeve", {
   enumerable: true,
   get: function get() {
@@ -716,18 +968,52 @@ 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"));
+
+var _Masthead = _interopRequireWildcard(require("./Masthead"));
+
+var _Portrait = _interopRequireDefault(require("./Portrait"));
+
+var _ContentLoader = _interopRequireDefault(require("./ContentLoader"));
+
+var _RelatedArticleList = _interopRequireWildcard(require("./RelatedArticleList"));
+
 var _ErrorMessage = _interopRequireWildcard(require("./ErrorMessage"));
 
+var _FileList = _interopRequireWildcard(require("./FileList"));
+
 var _BlogPosts = require("./BlogPosts");
 
+var _Logo = _interopRequireDefault(require("./Logo"));
+
+var _InfoBox = require("./InfoBox");
+
+var _InfoWidget = _interopRequireDefault(require("./InfoWidget"));
+
 var _Frontpage = require("./Frontpage");
 
+var _FactBox = _interopRequireDefault(require("./FactBox"));
+
+var _Image = _interopRequireWildcard(require("./Image"));
+
+var _Hero = require("./Hero");
+
 var _Footer = require("./Footer");
 
+var _Figure = require("./Figure");
+
 var _LanguageSelector = require("./LanguageSelector");
 
 var _LearningPaths = require("./LearningPaths");
 
+var _Translation = require("./Translation");
+
+var _Spinner = _interopRequireDefault(require("./Spinner"));
+
 var _SearchResultSleeve = _interopRequireDefault(require("./Search/SearchResultSleeve"));
 
 var _ContentTypeResult = _interopRequireDefault(require("./Search/ContentTypeResult"));

package/lib/locale/messages-en.d.ts

@@ -818,6 +818,10 @@ declare const messages: {
         reuse: string;
         error: string;
     };
+    other: {
+        download: string;
+        reuse: string;
+    };
     concept: {
         showDescription: string;
         error: {

package/lib/locale/messages-en.js

@@ -779,6 +779,10 @@ var messages = _objectSpread(_objectSpread({
     reuse: 'Use video',
     error: 'Sorry, an error occurred while loading the video or metadata about the video.'
   },
+  other: {
+    download: 'Download content',
+    reuse: 'Use content'
+  },
   concept: {
     showDescription: 'Show concept description',
     error: {

package/lib/locale/messages-nb.d.ts

@@ -818,6 +818,10 @@ declare const messages: {
         reuse: string;
         error: string;
     };
+    other: {
+        download: string;
+        reuse: string;
+    };
     concept: {
         showDescription: string;
         error: {

package/lib/locale/messages-nb.js

@@ -515,7 +515,7 @@ var messages = _objectSpread(_objectSpread({
     es: 'Spansk',
     zh: 'Kinesisk',
     unknown: 'Ukjent',
-    prefixChangeLanguage: 'Velg målform'
+    prefixChangeLanguage: 'Velg språk'
   },
   changeLanguage: {
     nb: 'Endre språk til bokmål',
@@ -779,6 +779,10 @@ var messages = _objectSpread(_objectSpread({
     reuse: 'Bruk video',
     error: 'Beklager, en feil oppstod ved lasting av videoen eller metadata om videoen.'
   },
+  other: {
+    download: 'Last ned innhold',
+    reuse: 'Bruk innhold'
+  },
   concept: {
     showDescription: 'Vis beskrivelsen av forklaringen.',
     error: {

package/lib/locale/messages-nn.d.ts

@@ -818,6 +818,10 @@ declare const messages: {
         reuse: string;
         error: string;
     };
+    other: {
+        download: string;
+        reuse: string;
+    };
     concept: {
         showDescription: string;
         error: {

package/lib/locale/messages-nn.js

@@ -515,7 +515,7 @@ var messages = _objectSpread(_objectSpread({
     es: 'Spansk',
     zh: 'Kinesisk',
     unknown: 'Ukjent',
-    prefixChangeLanguage: 'Vel målform'
+    prefixChangeLanguage: 'Vel språk'
   },
   changeLanguage: {
     nb: 'Endre språk til bokmål',
@@ -779,6 +779,10 @@ var messages = _objectSpread(_objectSpread({
     reuse: 'Bruk video',
     error: 'Orsak, ein feil oppstod ved lasting av videoen eller metadata om videoen.'
   },
+  other: {
+    download: 'Last ned innhald',
+    reuse: 'Bruk innhald'
+  },
   concept: {
     showDescription: 'Vis skildring av forklaringa',
     error: {

package/lib/utils/createUniversalPortal.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 { ReactNode } from 'react';
+export declare function createUniversalPortal(children: ReactNode, selector: string): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "3.2.1-alpha.8+dbf0f57f4",
+  "version": "3.2.4",
   "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.1",
     "@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.13",
     "@ndla/safelink": "^1.0.5",
     "@ndla/switch": "^0.0.32",
-    "@ndla/tabs": "^1.0.8",
-    "@ndla/tooltip": "^0.2.47",
+    "@ndla/tabs": "^1.0.11",
+    "@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": "dbf0f57f403ab8964c5fd14f4c8405cf5ab5d0e1"
+  "gitHead": "04aa8900a09da5b5831aa4778c8f9bd95cb98e90"
 }

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