@ndla/ui 45.0.16 → 46.0.0

package/lib/index.d.ts

@@ -10,7 +10,6 @@ export { ConceptNotionV2, ImageEmbed, AudioEmbed, H5pEmbed, ExternalEmbed, Ifram
 export { ArticleByline, ArticleFootNotes, ArticleIntroduction, ArticleTitle, ArticleWrapper, ArticleHeaderWrapper, default as Article, } from './Article';
 export { default as Table, TableStyling } from './Table';
 export { default as ResourcesWrapper, ResourcesTopicTitle } from './ResourcesWrapper';
-export { createUniversalPortal } from './utils/createUniversalPortal';
 export { default as NoContentBox } from './NoContentBox';
 export { default as Masthead, getMastheadHeight, useMastheadHeight, SkipToMainContent } from './Masthead';
 export { default as ContentLoader } from './ContentLoader';
@@ -29,7 +28,7 @@ export type { HeroContentType } from './Hero';
 export { SubjectMaterialHero, TasksAndActivitiesHero, AssessmentResourcesHero, SubjectHero, ExternalLearningResourcesHero, SourceMaterialHero, Hero, NdlaFilmHero, HeroContent, } from './Hero';
 export { FilterList, FilterListPhone, FilterButtons, ToggleItem } from './Filter';
 export { Footer, EditorName, FooterText } from './Footer';
-export { Figure, FigureCaption, FigureLicenseDialog, FigureExpandButton, FigureOpenDialogButton, FigureBylineExpandButton, } from './Figure';
+export { Figure, FigureExpandButton, FigureOpenDialogButton, FigureBylineExpandButton } from './Figure';
 export type { FigureType } from './Figure';
 export { LanguageSelector } from './LanguageSelector';
 export { LearningPathWrapper, LearningPathContent, LearningPathMenu, LearningPathSticky, LearningPathInformation, LearningPathStickySibling, LearningPathStickyPlaceholder, LearningPathLastStepNavigation, LearningPathMobileStepInfo, LearningPathMobileHeader, } from './LearningPaths';
@@ -44,7 +43,7 @@ export { default as resourceTypeColor } from './utils/resourceTypeColor';
 export { default as CreatedBy } from './CreatedBy';
 export { MessageBox, MessageBoxTag, MessageBanner } from './Messages';
 export { ResourceBox } from './ResourceBox';
-export { default as AudioPlayer, initAudioPlayers } from './AudioPlayer';
+export { default as AudioPlayer } from './AudioPlayer';
 export { NavigationBox, NavigationTopicAbout } from './Navigation';
 export { default as Programme } from './Programme';
 export { default as CompetenceGoalTab } from './CompetenceGoalTab';
@@ -73,8 +72,7 @@ export { default as ContentTypeBadge, SubjectMaterialBadge, TasksAndActivitiesBa
 export { SubjectChildContent, SubjectContent, SubjectFlexWrapper, SubjectHeader, SubjectNewContent, SubjectSecondaryContent, SubjectSectionTitle, SubjectSidebarWrapper, SubjectSocialContent, SubjectSocialSection, SubjectTopics, SubjectBanner, } from './Subject';
 export { default as CopyParagraphButton, CopyParagraphButtonV2 } from './CopyParagraphButton';
 export { default as ContentPlaceholder } from './ContentPlaceholder';
-export { Notion, ConceptNotion } from './Notion';
-export type { NotionVisualElementType, ConceptNotionType } from './Notion';
+export { Notion } from './Notion';
 export { BannerCard } from './BannerCard';
 export { Folder, FolderInput } from './MyNdla';
 export { ListResource, BlockResource } from './Resource';

package/lib/index.js

@@ -172,12 +172,6 @@ Object.defineProperty(exports, "ConceptListEmbed", {
     return _Embed.ConceptListEmbed;
   }
 });
-Object.defineProperty(exports, "ConceptNotion", {
-  enumerable: true,
-  get: function get() {
-    return _Notion.ConceptNotion;
-  }
-});
 Object.defineProperty(exports, "ConceptNotionV2", {
   enumerable: true,
   get: function get() {
@@ -328,24 +322,12 @@ Object.defineProperty(exports, "FigureBylineExpandButton", {
     return _Figure.FigureBylineExpandButton;
   }
 });
-Object.defineProperty(exports, "FigureCaption", {
-  enumerable: true,
-  get: function get() {
-    return _Figure.FigureCaption;
-  }
-});
 Object.defineProperty(exports, "FigureExpandButton", {
   enumerable: true,
   get: function get() {
     return _Figure.FigureExpandButton;
   }
 });
-Object.defineProperty(exports, "FigureLicenseDialog", {
-  enumerable: true,
-  get: function get() {
-    return _Figure.FigureLicenseDialog;
-  }
-});
 Object.defineProperty(exports, "FigureOpenDialogButton", {
   enumerable: true,
   get: function get() {
@@ -1198,12 +1180,6 @@ Object.defineProperty(exports, "constants", {
     return _model.default;
   }
 });
-Object.defineProperty(exports, "createUniversalPortal", {
-  enumerable: true,
-  get: function get() {
-    return _createUniversalPortal.createUniversalPortal;
-  }
-});
 Object.defineProperty(exports, "formatNestedMessages", {
   enumerable: true,
   get: function get() {
@@ -1222,12 +1198,6 @@ Object.defineProperty(exports, "i18nInstance", {
     return _i18n.i18nInstance;
   }
 });
-Object.defineProperty(exports, "initAudioPlayers", {
-  enumerable: true,
-  get: function get() {
-    return _AudioPlayer.initAudioPlayers;
-  }
-});
 Object.defineProperty(exports, "makeSrcQueryString", {
   enumerable: true,
   get: function get() {
@@ -1287,7 +1257,6 @@ var _Embed = require("./Embed");
 var _Article = _interopRequireWildcard(require("./Article"));
 var _Table = _interopRequireWildcard(require("./Table"));
 var _ResourcesWrapper = _interopRequireWildcard(require("./ResourcesWrapper"));
-var _createUniversalPortal = require("./utils/createUniversalPortal");
 var _NoContentBox = _interopRequireDefault(require("./NoContentBox"));
 var _Masthead = _interopRequireWildcard(require("./Masthead"));
 var _ContentLoader = _interopRequireDefault(require("./ContentLoader"));
@@ -1317,7 +1286,7 @@ var _resourceTypeColor = _interopRequireDefault(require("./utils/resourceTypeCol
 var _CreatedBy = _interopRequireDefault(require("./CreatedBy"));
 var _Messages = require("./Messages");
 var _ResourceBox = require("./ResourceBox");
-var _AudioPlayer = _interopRequireWildcard(require("./AudioPlayer"));
+var _AudioPlayer = _interopRequireDefault(require("./AudioPlayer"));
 var _Navigation = require("./Navigation");
 var _Programme = _interopRequireDefault(require("./Programme"));
 var _CompetenceGoalTab = _interopRequireDefault(require("./CompetenceGoalTab"));

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

@@ -121,6 +121,11 @@ declare const messages: {
                 };
             };
         };
+        iconMenu: {
+            folders: string;
+            tags: string;
+            subjects: string;
+        };
         tagList: string;
         tags: string;
         tags_plural: string;

package/lib/locale/messages-en.js

@@ -215,10 +215,10 @@ var messages = _objectSpread(_objectSpread({
       notionsHeading: 'Explanations',
       notionsRemove: 'Remove',
       showVideo: 'Watch video',
-      concept: 'Show notion',
+      concept: 'Concept',
       gridView: 'Grid-view',
       listView: 'List-view',
-      gloss: 'Show gloss'
+      gloss: 'Gloss'
     },
     contextModal: {
       button: '+ {{count}} more contexts',
@@ -1127,6 +1127,11 @@ var messages = _objectSpread(_objectSpread({
         }
       }
     },
+    iconMenu: {
+      folders: 'Folders',
+      tags: 'Tags',
+      subjects: 'Favourite subjects'
+    },
     tagList: 'Tags',
     tags: '{{count}} tag',
     tags_plural: '{{count}} tags',

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

@@ -121,6 +121,11 @@ declare const messages: {
                 };
             };
         };
+        iconMenu: {
+            folders: string;
+            tags: string;
+            subjects: string;
+        };
         tagList: string;
         tags: string;
         tags_plural: string;

package/lib/locale/messages-nb.js

@@ -213,8 +213,8 @@ var messages = _objectSpread(_objectSpread({
       notionsHeading: 'Begrepsforklaring',
       notionsRemove: 'Fjern',
       showVideo: 'Se video',
-      concept: 'Se forklaring',
-      gloss: 'Se glose',
+      concept: 'Begrepsforklaring',
+      gloss: 'Glose',
       gridView: 'Gallerivisning',
       listView: 'Listevisning'
     },
@@ -1125,6 +1125,11 @@ var messages = _objectSpread(_objectSpread({
         }
       }
     },
+    iconMenu: {
+      folders: 'Mapper',
+      tags: 'Knagger',
+      subjects: 'Favorittfag'
+    },
     tagList: 'Emneknagger',
     tags: '{{count}} emneknagg',
     tags_plural: '{{count}} emneknagger',

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

@@ -121,6 +121,11 @@ declare const messages: {
                 };
             };
         };
+        iconMenu: {
+            folders: string;
+            tags: string;
+            subjects: string;
+        };
         tagList: string;
         tags: string;
         tags_plural: string;

package/lib/locale/messages-nn.js

@@ -213,10 +213,10 @@ var messages = _objectSpread(_objectSpread({
       notionsHeading: 'Begrepsforklaring',
       notionsRemove: 'Fjern',
       showVideo: 'Sjå video',
-      concept: 'Sjå forklaring',
+      concept: 'Begrepsforklaring',
       gridView: 'Gallerivisning',
       listView: 'Listevisning',
-      gloss: 'Sjå glose'
+      gloss: 'Glose'
     },
     contextModal: {
       button: '+ {{count}} fleire stader',
@@ -1125,6 +1125,11 @@ var messages = _objectSpread(_objectSpread({
         }
       }
     },
+    iconMenu: {
+      folders: 'Mappar',
+      tags: 'Knaggar',
+      subjects: 'Favorittfag'
+    },
     tagList: 'Emneknaggar',
     tags: '{{count}} emneknagg',
     tags_plural: '{{count}} emneknaggar',

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

@@ -121,6 +121,11 @@ declare const messages: {
                 };
             };
         };
+        iconMenu: {
+            folders: string;
+            tags: string;
+            subjects: string;
+        };
         tagList: string;
         tags: string;
         tags_plural: string;

package/lib/locale/messages-se.js

@@ -213,10 +213,10 @@ var messages = _objectSpread(_objectSpread({
       notionsHeading: 'Doabačilgehus',
       notionsRemove: 'Sihko',
       showVideo: 'Geahča video',
-      concept: 'Geahča čilgehusa',
+      concept: 'Doabačilgehus',
       gridView: 'Galleriijačájáhus',
       listView: 'Čájáhus listtu vuođul',
-      gloss: 'Geahča sánit'
+      gloss: 'Sánit'
     },
     contextModal: {
       button: '+ {{count}} eanet sajiin',
@@ -1125,6 +1125,11 @@ var messages = _objectSpread(_objectSpread({
         }
       }
     },
+    iconMenu: {
+      folders: 'Mapper',
+      tags: 'Knagger',
+      subjects: 'Favorittfag'
+    },
     tagList: 'Fáddágilkor',
     tags: '{{count}} fáddágilkor',
     tags_plural: '{{count}} fáddágilkorat',

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

@@ -121,6 +121,11 @@ declare const messages: {
                 };
             };
         };
+        iconMenu: {
+            folders: string;
+            tags: string;
+            subjects: string;
+        };
         tagList: string;
         tags: string;
         tags_plural: string;

package/lib/locale/messages-sma.js

@@ -213,10 +213,10 @@ var messages = _objectSpread(_objectSpread({
       notionsHeading: 'Baakoebuerkiestimmie',
       notionsRemove: 'Skubph',
       showVideo: 'Gïehtjh videjovem',
-      concept: 'Gïehtjh buerkiestimmiem ',
+      concept: 'Begrepsforklaring',
       gridView: 'Gallerivisning',
       listView: 'Listevisning',
-      gloss: 'Se glose'
+      gloss: 'Glose'
     },
     contextModal: {
       button: '+ {{count}} jieniebinie sijjine',
@@ -1125,6 +1125,11 @@ var messages = _objectSpread(_objectSpread({
         }
       }
     },
+    iconMenu: {
+      folders: 'Mapper',
+      tags: 'Knagger',
+      subjects: 'Favorittfag'
+    },
     tagList: 'Emneknagg',
     tags: '{{count}} emneknagg',
     tags_plural: '{{count}} emneknagger',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "45.0.16",
+  "version": "46.0.0",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,37 +31,34 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^2.2.23",
-    "@ndla/article-scripts": "^3.0.21",
-    "@ndla/button": "^11.0.8",
-    "@ndla/carousel": "^4.0.1",
-    "@ndla/core": "^4.1.8",
-    "@ndla/dropdown-menu": "^1.0.6",
-    "@ndla/forms": "^4.3.24",
+    "@ndla/accordion": "^2.2.25",
+    "@ndla/button": "^11.0.10",
+    "@ndla/carousel": "^4.0.3",
+    "@ndla/core": "^4.1.9",
+    "@ndla/dropdown-menu": "^1.0.7",
+    "@ndla/forms": "^5.0.0",
     "@ndla/hooks": "^2.1.0",
-    "@ndla/icons": "^4.0.7",
+    "@ndla/icons": "^4.0.9",
     "@ndla/licenses": "^7.1.4",
-    "@ndla/modal": "^4.0.8",
-    "@ndla/notion": "^5.0.26",
-    "@ndla/safelink": "^4.1.22",
-    "@ndla/select": "^2.4.14",
-    "@ndla/switch": "^1.1.13",
-    "@ndla/tabs": "^3.0.9",
-    "@ndla/tooltip": "^4.1.19",
-    "@ndla/typography": "^0.2.0",
+    "@ndla/modal": "^4.0.10",
+    "@ndla/notion": "^6.0.0",
+    "@ndla/safelink": "^4.1.24",
+    "@ndla/select": "^2.4.16",
+    "@ndla/switch": "^1.1.14",
+    "@ndla/tabs": "^3.0.10",
+    "@ndla/tooltip": "^4.1.21",
+    "@ndla/typography": "^0.2.1",
     "@ndla/util": "^3.2.0",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-slider": "^1.1.2",
     "date-fns": "^2.30.0",
-    "framer-motion": "^6.5.1",
     "html-react-parser": "^3.0.8",
     "i18next-browser-languagedetector": "^6.1.1",
     "react-bem-helper": "1.4.1",
     "react-device-detect": "^2.2.3",
     "react-select": "^5.7.5",
     "react-swipeable": "^7.0.0",
-    "remarkable": "^2.0.1",
-    "shave": "^2.5.10"
+    "remarkable": "^2.0.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.10.4",
@@ -72,7 +69,6 @@
     "react-i18next": "^11.18.6"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
     "@ndla/types-backend": "^0.2.21",
     "@ndla/types-embed": "^4.0.2",
     "css-loader": "^6.7.3",
@@ -84,5 +80,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7f859ccc955408674bce9b7a8422b076034811b4"
+  "gitHead": "90560600cb69b9c47dec3ec4b1966c770a94e7db"
 }

package/src/Article/Article.tsx

@@ -62,7 +62,7 @@ export const ArticleTitle = ({ children, icon, label, id }: ArticleTitleProps) =
     <div {...classes('title', modifiers)}>
       {icon}
       {labelView}
-      <Heading element="h1" headingStyle="h1" id={id} tabIndex={-1}>
+      <Heading element="h1" headingStyle="h1-resource" id={id} tabIndex={-1}>
         {children}
       </Heading>
     </div>

package/src/AudioPlayer/AudiPlayer.stories.tsx

@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2023-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 { Meta, StoryObj } from '@storybook/react';
+import AudioPlayer from './AudioPlayer';
+import { defaultParameters } from '../../../../stories/defaults';
+const TextVersion = (
+  <>
+    <p>
+      So, I had graduated seven years ago from Berkeley with a dual degree in molecular and cell biology and
+      linguistics, and I had gone to a career fair here on campus, where I'd gotten an interview with a start-up called
+      Theranos. And at the time, there wasn't really that much information about the company, but the little that was
+      there was really impressive. Essentially, what the company was doing was creating a medical device where you would
+      be able to run your entire blood panel on a finger-stick of blood. So you wouldn't have to get a big needle stuck
+      in your arm in order to get your blood test done. So this was interesting not only because it was less painful,
+    </p>
+    <p>
+      And this was confirmed in an interview that the founder, Elizabeth Holmes, had said in the Wall Street Journal.
+      "The reality within our health-care system today is that when someone you care about gets really sick, by the time
+      you find out it's [most often] too late to do anything about it, It's heartbreaking." This was a moon shot that I
+      really wanted to be a part of and I really wanted to help build.{' '}
+    </p>
+  </>
+);
+
+const description =
+  'Se gjerne nærmere på hvordan andre kjente fortellere griper saken an. Siri Knudsen i NRK P3 lot seg for eksempel inspirere av Asbjørnsen og Moe da hun jobbet med sin radiodokumentar om artisten Truls Heggero. Se gjerne nærmere på hvordan andre kjente fortellere griper saken an. Siri Knudsen i NRK P3 lot seg for eksempel inspirere av Asbjørnsen og Moe da hun jobbet med sin radiodokumentar om artisten Truls Heggero.';
+
+/**
+ * Although the AudioPlayer is most commonly used as an embed, it can also be used as a standalone component.
+ * To see it used as an embed, check out the AudioEmbed component
+ */
+const meta: Meta<typeof AudioPlayer> = {
+  title: 'Components/AudioPlayer',
+  component: AudioPlayer,
+  tags: ['autodocs'],
+  parameters: defaultParameters,
+};
+
+export default meta;
+
+export const AudioPlayerStory: StoryObj<typeof AudioPlayer> = {
+  args: {
+    src: 'https://api.staging.ndla.no/audio/files/Alltid_Nyheter_nrk128kps.mp3',
+    title: 'Den gode lydhistoria',
+    textVersion: TextVersion,
+  },
+};
+
+AudioPlayerStory.storyName = 'AudioPlayer';
+
+export const SimpleVariant: StoryObj<typeof AudioPlayer> = {
+  args: {
+    src: 'https://api.staging.ndla.no/audio/files/Alltid_Nyheter_nrk128kps.mp3',
+    title: 'Den gode lydhistoria',
+    textVersion: TextVersion,
+    speech: true,
+  },
+};
+
+export const PodcastWithoutImage: StoryObj<typeof AudioPlayer> = {
+  args: {
+    src: 'https://api.staging.ndla.no/audio/files/Alltid_Nyheter_nrk128kps.mp3',
+    title: 'Den gode lydhistoria',
+    textVersion: TextVersion,
+    subtitle: { title: 'Serienavn', url: '#' },
+    description,
+  },
+};
+
+export const PodcastWithImage: StoryObj<typeof AudioPlayer> = {
+  args: {
+    src: 'https://api.staging.ndla.no/audio/files/Alltid_Nyheter_nrk128kps.mp3',
+    title: 'Den gode lydhistoria',
+    textVersion: TextVersion,
+    subtitle: { title: 'Serienavn', url: '#' },
+    description,
+    img: {
+      url: 'https://api.ndla.no/image-api/raw/BagNsXHq.jpg?height=400',
+      alt: 'Mann blir målt og observert. Omgitt av ulike diagrammer. Illustrasjon.',
+    },
+  },
+};

package/src/AudioPlayer/index.ts

@@ -1,5 +1,3 @@
 import AudioPlayer from './AudioPlayer';
-import initAudioPlayers from './initAudioPlayers';
 
-export { initAudioPlayers };
 export default AudioPlayer;

package/src/Embed/IframeEmbed.stories.tsx

@@ -137,6 +137,21 @@ export const OpensInNewWindow: StoryObj<typeof IframeEmbed> = {
   },
 };
 
+export const NoDimensions: StoryObj<typeof IframeEmbed> = {
+  args: {
+    embed: {
+      resource: 'iframe',
+      status: 'success',
+      embedData: {
+        ...embedData,
+        width: undefined,
+        height: undefined,
+      },
+      data: opensInnewMetaData,
+    },
+  },
+};
+
 export const OpensInNewWindowFailed: StoryObj<typeof IframeEmbed> = {
   args: {
     embed: {