@ndla/ui 30.5.1 → 30.5.2

package/lib/shapes.js

@@ -1,22 +1,15 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CompetenceGoalShape = exports.ContentTypeResultShape = exports.ContentTypeShape = exports.ResourceShape = exports.ArticleShape = exports.ContributorShape = exports.FootNoteShape = exports.TopicShape = exports.SubjectShape = exports.LicenseShape = exports.LicenseRightShape = void 0;
-
+exports.TopicShape = exports.SubjectShape = exports.ResourceShape = exports.LicenseShape = exports.LicenseRightShape = exports.FootNoteShape = exports.ContributorShape = exports.ContentTypeShape = exports.ContentTypeResultShape = exports.CompetenceGoalShape = exports.ArticleShape = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var contentTypes = _interopRequireWildcard(require("./model/ContentType"));
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /**
  * Copyright (c) 2017-present, NDLA.
  *
@@ -24,15 +17,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 var LicenseRightShape = _propTypes["default"].shape({
   "short": _propTypes["default"].string.isRequired,
   title: _propTypes["default"].string.isRequired,
   userFriendlyTitle: _propTypes["default"].string.isRequired,
   description: _propTypes["default"].string.isRequired
 });
-
 exports.LicenseRightShape = LicenseRightShape;
-
 var LicenseShape = _propTypes["default"].shape({
   "short": _propTypes["default"].string.isRequired,
   title: _propTypes["default"].string.isRequired,
@@ -40,24 +32,18 @@ var LicenseShape = _propTypes["default"].shape({
   description: _propTypes["default"].string.isRequired,
   rights: _propTypes["default"].arrayOf(_propTypes["default"].string).isRequired
 });
-
 exports.LicenseShape = LicenseShape;
-
 var SubjectShape = _propTypes["default"].shape({
   id: _propTypes["default"].string.isRequired,
   name: _propTypes["default"].string.isRequired
 });
-
 exports.SubjectShape = SubjectShape;
-
 var TopicShape = _propTypes["default"].shape({
   id: _propTypes["default"].string.isRequired,
   name: _propTypes["default"].string.isRequired,
   subtopics: _propTypes["default"].array
 });
-
 exports.TopicShape = TopicShape;
-
 var FootNoteShape = _propTypes["default"].shape({
   ref: _propTypes["default"].number.isRequired,
   title: _propTypes["default"].string.isRequired,
@@ -67,16 +53,12 @@ var FootNoteShape = _propTypes["default"].shape({
   publisher: _propTypes["default"].string,
   url: _propTypes["default"].string
 });
-
 exports.FootNoteShape = FootNoteShape;
-
 var ContributorShape = _propTypes["default"].shape({
   type: _propTypes["default"].string.isRequired,
   name: _propTypes["default"].string.isRequired
 });
-
 exports.ContributorShape = ContributorShape;
-
 var ArticleShape = _propTypes["default"].shape({
   title: _propTypes["default"].string.isRequired,
   content: _propTypes["default"].oneOf([_propTypes["default"].string, _propTypes["default"].elementType]).isRequired,
@@ -86,9 +68,7 @@ var ArticleShape = _propTypes["default"].shape({
   }).isRequired,
   published: _propTypes["default"].string.isRequired
 });
-
 exports.ArticleShape = ArticleShape;
-
 var ResourceShape = _propTypes["default"].shape({
   id: _propTypes["default"].string.isRequired,
   name: _propTypes["default"].string.isRequired,
@@ -97,13 +77,9 @@ var ResourceShape = _propTypes["default"].shape({
   contentType: _propTypes["default"].string,
   type: _propTypes["default"].string
 });
-
 exports.ResourceShape = ResourceShape;
-
 var ContentTypeShape = _propTypes["default"].oneOf([contentTypes.SUBJECT_MATERIAL, contentTypes.TASKS_AND_ACTIVITIES, contentTypes.ASSESSMENT_RESOURCES, contentTypes.SUBJECT, contentTypes.EXTERNAL_LEARNING_RESOURCES, contentTypes.SOURCE_MATERIAL, contentTypes.LEARNING_PATH, contentTypes.TOPIC, contentTypes.MULTIDISCIPLINARY_TOPIC, 'beta', 'ndla-film', 'ndla-film has-image']);
-
 exports.ContentTypeShape = ContentTypeShape;
-
 var ContentTypeResultShape = _propTypes["default"].shape({
   title: _propTypes["default"].string.isRequired,
   resources: _propTypes["default"].arrayOf(_propTypes["default"].shape({
@@ -111,13 +87,10 @@ var ContentTypeResultShape = _propTypes["default"].shape({
     name: _propTypes["default"].string.isRequired
   }))
 });
-
 exports.ContentTypeResultShape = ContentTypeResultShape;
-
 var CompetenceGoalShape = _propTypes["default"].shape({
   id: _propTypes["default"].string.isRequired,
   name: _propTypes["default"].string.isRequired,
   url: _propTypes["default"].string
 });
-
 exports.CompetenceGoalShape = CompetenceGoalShape;

package/lib/types.js

@@ -1,5 +1,8 @@
 "use strict";
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 /**
  * Copyright (c) 2019-present, NDLA.
  *
@@ -7,4 +10,5 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 var locales = ['nb', 'nn', 'en', 'se'];

package/lib/utils/createUniversalPortal.js

@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createUniversalPortal = createUniversalPortal;
-
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactDom = _interopRequireDefault(require("react-dom"));
-
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /**
  * Copyright (c) 2016-present, NDLA.
  *
@@ -20,7 +15,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 // N.B This helper is intended to be used in https://github.com/ndlano/article-converter. It is not a general soultion for using portals in SSR applications.
+
 function canUseDOM() {
   return !!(typeof window !== 'undefined' && window.document && !window.document.hidden); // window.document.hidden === jsdom check
 }
@@ -32,6 +29,5 @@ function createUniversalPortal(children, selector) {
       children: children
     });
   }
-
   return /*#__PURE__*/_reactDom["default"].createPortal(children, document.querySelector(selector));
 }

package/lib/utils/resourceTypeColor.js

@@ -3,14 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.resourceTypeColor = void 0;
-
+exports.resourceTypeColor = exports["default"] = void 0;
 var _core = require("@ndla/core");
-
 var _model = _interopRequireDefault(require("../model"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 /**
  * Copyright (c) 2022-present, NDLA.
  *
@@ -18,42 +14,32 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
  * LICENSE file in the root directory of this source tree.
  *
  */
-var contentTypes = _model["default"].contentTypes;
 
+var contentTypes = _model["default"].contentTypes;
 var resourceTypeColor = function resourceTypeColor(type) {
   switch (type) {
     case contentTypes.SUBJECT_MATERIAL:
       return _core.colors.subjectMaterial.light;
-
     case contentTypes.SUBJECT:
       return _core.colors.subject.light;
-
     case contentTypes.TOPIC:
       return _core.colors.subject.light;
-
     case contentTypes.TASKS_AND_ACTIVITIES:
       return _core.colors.tasksAndActivities.light;
-
     case contentTypes.ASSESSMENT_RESOURCES:
       return _core.colors.assessmentResource.light;
-
     case contentTypes.EXTERNAL_LEARNING_RESOURCES:
       return _core.colors.externalLearningResource.light;
-
     case contentTypes.SOURCE_MATERIAL:
       return _core.colors.sourceMaterial.light;
-
     case contentTypes.LEARNING_PATH:
       return _core.colors.learningPath.light;
-
     case contentTypes.MULTIDISCIPLINARY_TOPIC:
       return _core.colors.learningPath.background;
-
     default:
       return '';
   }
 };
-
 exports.resourceTypeColor = resourceTypeColor;
 var _default = resourceTypeColor;
 exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "30.5.1",
+  "version": "30.5.2",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -32,16 +32,16 @@
   ],
   "dependencies": {
     "@ndla/article-scripts": "^3.0.9",
-    "@ndla/button": "^5.1.0",
+    "@ndla/button": "^5.2.0",
     "@ndla/carousel": "^2.0.5",
     "@ndla/core": "^3.0.0",
-    "@ndla/forms": "^4.0.10",
+    "@ndla/forms": "^4.0.11",
     "@ndla/hooks": "^1.1.13",
     "@ndla/icons": "^2.0.5",
     "@ndla/licenses": "^6.0.5",
     "@ndla/modal": "^2.0.5",
-    "@ndla/notion": "^4.0.10",
-    "@ndla/safelink": "^3.0.10",
+    "@ndla/notion": "^4.0.11",
+    "@ndla/safelink": "^3.0.11",
     "@ndla/switch": "^1.0.0",
     "@ndla/tabs": "^2.0.7",
     "@ndla/tooltip": "^3.0.1",
@@ -86,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5520024e0b8aae29e88d0786c04b0c4cf5315c5a"
+  "gitHead": "817dcdf49e5471114291a459c6a9e3e865cb0131"
 }

package/src/FactBox/component.factbox.scss

@@ -23,7 +23,7 @@ $padding-bottom: 17px;
       text-align: center;
       position: absolute;
       top: 0;
-      bottom: 20px;
+      bottom: 0;
       right: 0;
       width: 99%;
       margin: 0.5% 0.5% 0 0.5%;

package/src/Figure/Figure.tsx

@@ -17,7 +17,7 @@ import { Link as LinkIcon } from '@ndla/icons/common';
 import { LicenseByline } from '@ndla/licenses';
 import SafeLink from '@ndla/safelink';
 import Button from '@ndla/button';
-
+import { isMobile } from 'react-device-detect';
 const classes = new BEMHelper({
   name: 'figure',
   prefix: 'c-',
@@ -40,59 +40,57 @@ export const FigureCaption = ({
   const { t } = useTranslation();
 
   return (
-    <>
-      <figcaption {...classes('caption', hideFigcaption ? 'hidden-caption' : undefined)}>
-        {caption ? <div {...classes('info')}>{parseMarkdown(caption)}</div> : null}
-        <footer {...classes('byline')}>
-          <div {...classes('byline-licenselist')}>
-            <LicenseByline licenseRights={hideIconsAndAuthors ? [] : licenseRights} locale={locale} marginRight>
-              <div {...classes('byline-author-buttons', hideIconsAndAuthors ? 'no-siblings' : undefined)}>
-                {!hideIconsAndAuthors && (
-                  <span {...classes('byline-authors')}>{authors?.map((author) => author.name).join(', ')}</span>
-                )}
-                <div>
+    <figcaption {...classes('caption', hideFigcaption && !isMobile ? 'hidden-caption' : undefined)}>
+      {caption ? <div {...classes('info')}>{parseMarkdown(caption)}</div> : null}
+      <footer {...classes('byline')}>
+        <div {...classes('byline-licenselist')}>
+          <LicenseByline licenseRights={hideIconsAndAuthors ? [] : licenseRights} locale={locale} marginRight>
+            <div {...classes('byline-author-buttons', hideIconsAndAuthors ? 'no-siblings' : undefined)}>
+              {!hideIconsAndAuthors && (
+                <span {...classes('byline-authors')}>{authors?.map((author) => author.name).join(', ')}</span>
+              )}
+              <div>
+                <Button
+                  borderShape="rounded"
+                  outline
+                  size="small"
+                  type="button"
+                  data-dialog-trigger-id={id}
+                  data-dialog-source-id={figureId}>
+                  {reuseLabel}
+                </Button>
+                {hasLinkedVideo && (
                   <Button
                     borderShape="rounded"
                     outline
                     size="small"
                     type="button"
-                    data-dialog-trigger-id={id}
-                    data-dialog-source-id={figureId}>
-                    {reuseLabel}
+                    {...classes('toggleAlternativeVideo')}>
+                    <span className="original">{t('figure.button.alternative')}</span>
+                    <span className="alternative hidden">{t('figure.button.original')}</span>
                   </Button>
-                  {hasLinkedVideo && (
-                    <Button
-                      borderShape="rounded"
-                      outline
-                      size="small"
-                      type="button"
-                      {...classes('toggleAlternativeVideo')}>
-                      <span className="original">{t('figure.button.alternative')}</span>
-                      <span className="alternative hidden">{t('figure.button.original')}</span>
-                    </Button>
-                  )}
-                </div>
-                {children}
+                )}
               </div>
-            </LicenseByline>
+              {children}
+            </div>
+          </LicenseByline>
 
-            {link && (
-              <div {...classes('link-wrapper')}>
-                <SafeLink
-                  to={link.url}
-                  {...classes('link')}
-                  target={link.external ? '_blank' : undefined}
-                  rel={link.external ? 'noopener noreferrer' : undefined}>
-                  <span {...classes('link-text')}>{link.text}</span>
-                  <LinkIcon />
-                </SafeLink>
-                {link.description && <p {...classes('link-description')}>{link.description}</p>}
-              </div>
-            )}
-          </div>
-        </footer>
-      </figcaption>
-    </>
+          {link && (
+            <div {...classes('link-wrapper')}>
+              <SafeLink
+                to={link.url}
+                {...classes('link')}
+                target={link.external ? '_blank' : undefined}
+                rel={link.external ? 'noopener noreferrer' : undefined}>
+                <span {...classes('link-text')}>{link.text}</span>
+                <LinkIcon />
+              </SafeLink>
+              {link.description && <p {...classes('link-description')}>{link.description}</p>}
+            </div>
+          )}
+        </div>
+      </footer>
+    </figcaption>
   );
 };
 

package/src/Figure/component.figure.scss

@@ -113,6 +113,9 @@
 
 .c-figure__caption--hidden-caption {
   display: none;
+  @include mq($until: tablet) {
+    display: block;
+  }
 }
 
 .c-figure__licensetag {
@@ -165,6 +168,7 @@
   cursor: pointer;
   position: absolute;
   z-index: 1;
+  padding: 0;
   bottom: 8px;
   right: 8px;
   width: 40px;
@@ -197,6 +201,9 @@
     fill: $brand-color;
     color: $brand-color;
   }
+  @include mq($until: tablet) {
+    display: none;
+  }
 }
 
 .c-figure:hover {

package/src/TopicMenu/TopicMenu.jsx

@@ -180,7 +180,7 @@ export const TopicMenu = ({
       </ModalHeader>
       <div {...classes('content')}>
         <div {...classes('back', 'wide')}>
-          <SafeLink {...classes('back-link')} to={toFrontpage()}>
+          <SafeLink {...classes('back-link')} to={toFrontpage()} onClick={closeMenu}>
             <Home {...classes('home-icon', '', 'c-icon--20')} />
             {t('masthead.menu.toFrontpage')}
           </SafeLink>
@@ -189,7 +189,7 @@ export const TopicMenu = ({
           {...classes('back', {
             narrow: true,
           })}>
-          <SafeLink {...classes('back-link')} to={toFrontpage()}>
+          <SafeLink {...classes('back-link')} to={toFrontpage()} onClick={closeMenu}>
             <Home {...classes('home-icon', '', 'c-icon--20')} />
             {t('masthead.menu.toFrontpage')}
           </SafeLink>

package/src/User/UserInfo.tsx

@@ -61,8 +61,6 @@ export const UserInfo = ({ user }: Props) => {
         )}
       </ShortInfoDiv>
 
-      {t('user.modal.collectedInfo')}
-
       <InfoList data-hj-suppress>
         {parsedUser.organizations.map((org) => (
           <li key={org.id}>

package/src/locale/messages-en.ts

@@ -1002,7 +1002,6 @@ const messages = {
     buttonLogOut: 'Log out',
     generalFooter: 'Some resources may only be accessed by teachers who are logged in.',
     modal: {
-      collectedInfo: 'We have collected the following information about you from Feide:',
       general: 'Resources that require logging in with Feide, are tagged with the icon',
       topic: 'Log in with Feide to access this topic.',
       isAuth: 'User info',

package/src/locale/messages-nb.ts

@@ -1001,7 +1001,6 @@ const messages = {
     buttonLogOut: 'Logg ut',
     generalFooter: 'Enkelte ressurser er bare tilgjengelige for påloggede lærere.',
     modal: {
-      collectedInfo: 'Vi har hentet følgende informasjon om deg fra Feide:',
       general: 'Ressursene som krever pålogging med Feide, vises med ikonet',
       topic: 'Logg inn med Feide for å få tilgang til dette emnet.',
       isAuth: 'Brukerinfo',

package/src/locale/messages-nn.ts

@@ -1002,7 +1002,6 @@ const messages = {
     buttonLogOut: 'Logg ut',
     generalFooter: 'Enkelte ressursar er berre tilgjengelege for pålogga lærarar.',
     modal: {
-      collectedInfo: 'Vi har henta denne informasjonen om deg frå Feide:',
       general: 'Ressursane som krev pålogging med Feide, vises med ikonet',
       topic: ' Logg inn med Feide for å få tilgang til dette emnet.',
       isAuth: 'Brukarinfo',

package/src/locale/messages-se.ts

@@ -1002,7 +1002,6 @@ const messages = {
     buttonLogOut: 'Logge olggos',
     generalFooter: 'Muhtin resurssat leat dušše olamuttus sisaloggejuvvon oahpaheddjiide.',
     modal: {
-      collectedInfo: 'Čuovvovaš dieđut leat du birra vižžojuvvon Feide bokte:',
       general: 'Resurssat mat gáibidit Feide sisaloggema leat merkejuvvon čuovvovaš ikonain',
       topic: 'Logge sisa Feide bokte oažžun dihte beassanlági dán fáddái.',
       isAuth: 'Geavaheaddjidieđut',

package/src/locale/messages-sma.ts

@@ -1002,7 +1002,6 @@ const messages = {
     buttonLogOut: 'Logg ut',
     generalFooter: 'Enkelte ressurser er bare tilgjengelige for påloggede lærere.',
     modal: {
-      collectedInfo: 'Vi har hentet følgende informasjon om deg fra Feide:',
       general: 'Ressursene som krever pålogging med Feide, vises med ikonet',
       topic: 'Logg inn med Feide for å få tilgang til dette emnet.',
       isAuth: 'Brukerinfo',