@ndla/ui 37.1.4 → 39.0.0

package/lib/User/index.d.ts

@@ -5,9 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import AuthModal from './AuthModal';
 import { UserInfo } from './UserInfo';
 import type { AffiliationType, FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType, FeideMembershipType, FeideUser } from './apiTypes';
 export { UserInfo };
 export type { AffiliationType, FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType, FeideMembershipType, FeideUser };
-export default AuthModal;

package/lib/User/index.js

@@ -9,16 +9,4 @@ Object.defineProperty(exports, "UserInfo", {
     return _UserInfo.UserInfo;
   }
 });
-exports["default"] = void 0;
-var _AuthModal = _interopRequireDefault(require("./AuthModal"));
-var _UserInfo = require("./UserInfo");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-/**
- * Copyright (c) 2021-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-var _default = _AuthModal["default"];
-exports["default"] = _default;
+var _UserInfo = require("./UserInfo");

package/lib/index.d.ts

@@ -30,7 +30,7 @@ export type { ImageCrop, ImageFocalPoint } from './Image';
 export type { HeroContentType } from './Hero';
 export { SubjectMaterialHero, TasksAndActivitiesHero, AssessmentResourcesHero, SubjectHero, ExternalLearningResourcesHero, SourceMaterialHero, Hero, NdlaFilmHero, } from './Hero';
 export { FilterList, FilterListPhone, FilterButtons, ToggleItem } from './Filter';
-export { Footer, EditorName, FooterText, FooterAuth } from './Footer';
+export { Footer, EditorName, FooterText } from './Footer';
 export { Figure, FigureCaption, FigureLicenseDialog, FigureExpandButton, FigureOpenDialogButton, FigureBylineExpandButton, } from './Figure';
 export type { FigureType } from './Figure';
 export { LanguageSelector } from './LanguageSelector';
@@ -40,9 +40,7 @@ export { default as SearchResultSleeve } from './Search/SearchResultSleeve';
 export { default as ContentTypeResult } from './Search/ContentTypeResult';
 export { SearchFieldForm } from './Search/SearchFieldForm';
 export { default as MastheadSearchModal } from './Masthead/MastheadSearchModal';
-export { default as MastheadAuthModal } from './Masthead/MastheadAuthModal';
 export { UserInfo } from './User';
-export { default as AuthModal } from './User';
 export type { AffiliationType, FeideGoGroup, FeideGroup, FeideOrg, FeideUserApiType, FeideMembershipType, FeideUser, } from './User';
 export { default as resourceTypeColor } from './utils/resourceTypeColor';
 export { default as CreatedBy } from './CreatedBy';
@@ -103,5 +101,7 @@ export { KeyFigure } from './KeyFigure';
 export { default as ContactBlock } from './ContactBlock';
 export type { HeartButtonType } from './Embed';
 export { CampaignBlock } from './CampaignBlock';
+export { Grid } from './Grid';
+export type { GridType } from './Grid';
 export { Heading } from './Typography';
 export type { HeadingLevel } from './types';

package/lib/index.js

@@ -112,12 +112,6 @@ Object.defineProperty(exports, "AudioPlayer", {
     return _AudioPlayer["default"];
   }
 });
-Object.defineProperty(exports, "AuthModal", {
-  enumerable: true,
-  get: function get() {
-    return _User["default"];
-  }
-});
 Object.defineProperty(exports, "AuthorInfo", {
   enumerable: true,
   get: function get() {
@@ -466,12 +460,6 @@ Object.defineProperty(exports, "Footer", {
     return _Footer.Footer;
   }
 });
-Object.defineProperty(exports, "FooterAuth", {
-  enumerable: true,
-  get: function get() {
-    return _Footer.FooterAuth;
-  }
-});
 Object.defineProperty(exports, "FooterText", {
   enumerable: true,
   get: function get() {
@@ -532,6 +520,12 @@ Object.defineProperty(exports, "FrontpageToolbox", {
     return _Frontpage.FrontpageToolbox;
   }
 });
+Object.defineProperty(exports, "Grid", {
+  enumerable: true,
+  get: function get() {
+    return _Grid.Grid;
+  }
+});
 Object.defineProperty(exports, "H5pEmbed", {
   enumerable: true,
   get: function get() {
@@ -712,12 +706,6 @@ Object.defineProperty(exports, "Masthead", {
     return _Masthead["default"];
   }
 });
-Object.defineProperty(exports, "MastheadAuthModal", {
-  enumerable: true,
-  get: function get() {
-    return _MastheadAuthModal["default"];
-  }
-});
 Object.defineProperty(exports, "MastheadItem", {
   enumerable: true,
   get: function get() {
@@ -1338,8 +1326,7 @@ var _SearchResultSleeve = _interopRequireDefault(require("./Search/SearchResultS
 var _ContentTypeResult = _interopRequireDefault(require("./Search/ContentTypeResult"));
 var _SearchFieldForm = require("./Search/SearchFieldForm");
 var _MastheadSearchModal = _interopRequireDefault(require("./Masthead/MastheadSearchModal"));
-var _MastheadAuthModal = _interopRequireDefault(require("./Masthead/MastheadAuthModal"));
-var _User = _interopRequireWildcard(require("./User"));
+var _User = require("./User");
 var _resourceTypeColor = _interopRequireDefault(require("./utils/resourceTypeColor"));
 var _CreatedBy = _interopRequireDefault(require("./CreatedBy"));
 var _Breadcrumblist = _interopRequireDefault(require("./Breadcrumblist"));
@@ -1390,6 +1377,7 @@ var _ProgrammeCard = require("./ProgrammeCard");
 var _KeyFigure = require("./KeyFigure");
 var _ContactBlock = _interopRequireDefault(require("./ContactBlock"));
 var _CampaignBlock = require("./CampaignBlock");
+var _Grid = require("./Grid");
 var _Typography = require("./Typography");
 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; }

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

@@ -1230,6 +1230,7 @@ declare const messages: {
     };
     audio: {
         play: string;
+        pause: string;
         download: string;
         reuse: string;
         error: {

package/lib/locale/messages-en.js

@@ -959,6 +959,7 @@ var messages = _objectSpread(_objectSpread({
   },
   audio: {
     play: 'Play',
+    pause: 'Pause',
     download: 'Download audio',
     reuse: 'Use audio',
     error: {

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

@@ -1230,6 +1230,7 @@ declare const messages: {
     };
     audio: {
         play: string;
+        pause: string;
         download: string;
         reuse: string;
         error: {

package/lib/locale/messages-nb.js

@@ -959,6 +959,7 @@ var messages = _objectSpread(_objectSpread({
   },
   audio: {
     play: 'Spill av',
+    pause: 'Pause',
     download: 'Last ned lydfil',
     reuse: 'Bruk lydfil',
     error: {

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

@@ -1230,6 +1230,7 @@ declare const messages: {
     };
     audio: {
         play: string;
+        pause: string;
         download: string;
         reuse: string;
         error: {

package/lib/locale/messages-nn.js

@@ -959,6 +959,7 @@ var messages = _objectSpread(_objectSpread({
   },
   audio: {
     play: 'Spill av',
+    pause: 'Pause',
     download: 'Last ned lydfil',
     reuse: 'Bruk lydfil',
     error: {

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

@@ -1230,6 +1230,7 @@ declare const messages: {
     };
     audio: {
         play: string;
+        pause: string;
         download: string;
         reuse: string;
         error: {

package/lib/locale/messages-se.js

@@ -959,6 +959,7 @@ var messages = _objectSpread(_objectSpread({
   },
   audio: {
     play: 'Spill av',
+    pause: 'Pause',
     download: 'Viečča jietnafiilla',
     reuse: 'Geavat jietnafiilla',
     error: {

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

@@ -1230,6 +1230,7 @@ declare const messages: {
     };
     audio: {
         play: string;
+        pause: string;
         download: string;
         reuse: string;
         error: {

package/lib/locale/messages-sma.js

@@ -959,6 +959,7 @@ var messages = _objectSpread(_objectSpread({
   },
   audio: {
     play: 'Spill av',
+    pause: 'Pause',
     download: 'Veedtjh tjoeje-fijlem',
     reuse: 'Nuhtjh tjoeje-fijlem',
     error: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "37.1.4",
+  "version": "39.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,27 +31,25 @@
     "types"
   ],
   "dependencies": {
-    "@headlessui/react": "^1.7.14",
-    "@ndla/accordion": "^2.2.3",
-    "@ndla/article-scripts": "^3.0.17",
-    "@ndla/button": "^10.1.2",
-    "@ndla/carousel": "^3.1.0",
+    "@ndla/accordion": "^2.2.5",
+    "@ndla/article-scripts": "^3.0.18",
+    "@ndla/button": "^10.1.4",
+    "@ndla/carousel": "^3.1.2",
     "@ndla/core": "^4.0.0",
-    "@ndla/forms": "^4.3.2",
-    "@ndla/hooks": "^2.0.6",
-    "@ndla/icons": "^2.3.0",
+    "@ndla/forms": "^4.3.4",
+    "@ndla/hooks": "^2.0.7",
+    "@ndla/icons": "^3.0.0",
     "@ndla/licenses": "^7.0.4",
-    "@ndla/modal": "^2.3.0",
-    "@ndla/notion": "^4.3.2",
-    "@ndla/safelink": "^4.1.2",
-    "@ndla/switch": "^1.1.0",
-    "@ndla/tabs": "^2.2.2",
-    "@ndla/tooltip": "^4.1.2",
-    "@ndla/util": "^3.1.12",
-    "@radix-ui/react-dropdown-menu": "2.0.2",
-    "@radix-ui/react-popover": "^1.0.3",
-    "@reach/menu-button": "^0.16.2",
-    "@reach/slider": "^0.16.0",
+    "@ndla/modal": "^3.0.1",
+    "@ndla/notion": "^5.0.1",
+    "@ndla/safelink": "^4.1.4",
+    "@ndla/switch": "^1.1.2",
+    "@ndla/tabs": "^2.2.4",
+    "@ndla/tooltip": "^4.1.4",
+    "@ndla/util": "^3.1.13",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-slider": "^1.1.2",
     "focus-trap-react": "^8.9.2",
     "framer-motion": "^6.5.1",
     "html-react-parser": "^3.0.8",
@@ -69,7 +67,7 @@
     "@emotion/styled": "^11.10.4",
     "i18next": "^21.9.2",
     "lodash": "^4.17.20",
-    "react": "^16.8.4 || ^17.0.0",
+    "react": ">= 16.8.0",
     "react-i18next": "^11.18.6",
     "react-router-dom": "^6.3.0"
   },
@@ -87,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "77675e3df78c7dd48d9790cdd1adfceab56e355e"
+  "gitHead": "72e986568cbd38a53cb3d9e2e189d4e309fbb302"
 }

package/src/Article/Article.tsx

@@ -124,10 +124,10 @@ type Props = {
   contentTransformed?: boolean;
   locale: Locale;
   messageBoxLinks?: [];
-  competenceGoals?:
-    | ((inp: { Dialog: ComponentType; dialogProps: { isOpen: boolean; onClose: () => void } }) => ReactNode)
-    | ReactNode
-    | null;
+  competenceGoals?: (inp: {
+    Dialog: ComponentType;
+    dialogProps: { isOpen: boolean; onClose: () => void };
+  }) => ReactNode;
   id: string;
   renderMarkdown: (text: string) => string;
   notions?: { list: ConceptNotionType[]; related: NotionRelatedContent[] };

package/src/Article/ArticleHeaderWrapper.tsx

@@ -26,10 +26,10 @@ const CompetenceBadgeText = styled.span`
 `;
 
 type Props = {
-  competenceGoals?:
-    | ((inp: { Dialog: ComponentType; dialogProps: { isOpen: boolean; onClose: () => void } }) => ReactNode)
-    | ReactNode
-    | null;
+  competenceGoals?: (inp: {
+    Dialog: ComponentType;
+    dialogProps: { isOpen: boolean; onClose: () => void; controlled: true };
+  }) => ReactNode;
   competenceGoalsLoading?: boolean;
   children: ReactNode;
 };
@@ -60,20 +60,14 @@ const ArticleHeaderWrapper = ({ children, competenceGoals, competenceGoalsLoadin
     return <div {...classes('header')}>{children}</div>;
   }
 
-  const dialog =
-    typeof competenceGoals === 'function' ? (
-      competenceGoals({
-        Dialog: CompetenceGoalsDialog,
-        dialogProps: {
-          isOpen: isOpen,
-          onClose: closeDialog,
-        },
-      })
-    ) : (
-      <CompetenceGoalsDialog onClose={closeDialog} isOpen={isOpen}>
-        {competenceGoals}
-      </CompetenceGoalsDialog>
-    );
+  const dialog = competenceGoals({
+    Dialog: CompetenceGoalsDialog,
+    dialogProps: {
+      isOpen: isOpen,
+      onClose: closeDialog,
+      controlled: true,
+    },
+  });
   return (
     <div {...classes('header')}>
       {children}

package/src/Article/ArticleNotions.tsx

@@ -9,7 +9,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
-import Modal, { ModalHeader, ModalCloseButton, ModalBody } from '@ndla/modal';
+import { ModalHeader, ModalCloseButton, ModalBody, Modal, ModalTitle } from '@ndla/modal';
 import { mq, breakpoints, fonts, colors } from '@ndla/core';
 import { Explanation, NotionFlip } from '@ndla/icons/common';
 import { ConceptNotion } from '../Notion';
@@ -170,7 +170,7 @@ export const ArticleNotions = ({ notions, relatedContent = [], buttonOffsetRight
   return (
     <ArticleNotionsContainer>
       <Modal
-        labelledBy={headingId}
+        aria-labelledby={headingId}
         activateButton={
           <NotionsTrigger role="button" aria-label={t('article.notionsPrompt')} style={{ left: leftOffset }}>
             <NotionFlip />
@@ -179,18 +179,17 @@ export const ArticleNotions = ({ notions, relatedContent = [], buttonOffsetRight
           </NotionsTrigger>
         }
         size="large"
-        backgroundColor="white"
       >
         {(onClose: () => void) => (
           <div>
-            <ModalHeader modifier="notions-modal-header no-padding">
-              <ModalCloseButton onClick={onClose} title="Lukk" />
-            </ModalHeader>
-            <ModalBody modifier="notions-modal-body no-padding">
+            <ModalHeader className="no-padding">
               <ModalHeadingContainer>
                 <Explanation />
-                <h1>{t('article.notionsPrompt')}</h1>
+                <ModalTitle>{t('article.notionsPrompt')}</ModalTitle>
               </ModalHeadingContainer>
+              <ModalCloseButton onClick={onClose} title="Lukk" />
+            </ModalHeader>
+            <ModalBody modifier="notions-modal-body no-padding">
               <NotionsContainer>
                 {notions.map((notion) => (
                   <ConceptNotion key={notion.id} concept={notion} type={type} />

package/src/Article/ArticleSideBar.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { CopyButton, ButtonV2 } from '@ndla/button';
 import styled from '@emotion/styled';
-import Modal, { ModalHeader, ModalBody, ModalCloseButton } from '@ndla/modal';
+import { ModalHeader, ModalBody, ModalCloseButton, Modal } from '@ndla/modal';
 import { copyTextToClipboard } from '@ndla/util';
 import { useTranslation } from 'react-i18next';
 
@@ -54,11 +54,11 @@ const ArticleSideBar = ({ copyPageUrlLink, licenseBox }: Props) => {
               {t('article.useContent')}
             </ButtonV2>
           }
-          size="medium"
+          size="normal"
         >
           {(onClose: () => void) => (
             <>
-              <ModalHeader modifier="no-bottom-padding">
+              <ModalHeader>
                 <ModalCloseButton onClick={onClose} title={t('article.closeLabel')} />
               </ModalHeader>
               <ModalBody>{licenseBox}</ModalBody>