@ndla/ui 45.0.17 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "45.0.17",
+  "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.24",
-    "@ndla/article-scripts": "^3.0.21",
-    "@ndla/button": "^11.0.9",
-    "@ndla/carousel": "^4.0.2",
-    "@ndla/core": "^4.1.8",
-    "@ndla/dropdown-menu": "^1.0.6",
-    "@ndla/forms": "^4.3.25",
+    "@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.8",
+    "@ndla/icons": "^4.0.9",
     "@ndla/licenses": "^7.1.4",
-    "@ndla/modal": "^4.0.9",
-    "@ndla/notion": "^5.0.27",
-    "@ndla/safelink": "^4.1.23",
-    "@ndla/select": "^2.4.15",
-    "@ndla/switch": "^1.1.13",
-    "@ndla/tabs": "^3.0.9",
-    "@ndla/tooltip": "^4.1.20",
-    "@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": "edb7568d78a1f7a0795669c8a96dbb8ca299fe4c"
+  "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: {

package/src/Embed/ImageEmbed.stories.tsx

@@ -8,7 +8,8 @@
 
 import { Meta, StoryObj } from '@storybook/react';
 import { ImageEmbedData } from '@ndla/types-embed';
-import { IImageMetaInformationV3 } from '@ndla/types-backend/build/image-api';
+import { IImageMetaInformationV3 } from '@ndla/types-backend/image-api';
+import { ReactNode } from 'react';
 import ImageEmbed from './ImageEmbed';
 import { defaultParameters } from '../../../../stories/defaults';
 import StoryFavoriteButton from '../../../../stories/StoryFavoriteButton';
@@ -81,6 +82,7 @@ const metaData: IImageMetaInformationV3 = {
   },
 };
 
+/** Bilder har tre mulige plasseringer: fullbredde midtstilt, venstrestilt og høyrestilt. Bilder kan være i størrelsene ekstra liten, liten, medium og stor (fullbredde). Bilder som ikke er fullbredde, kan ekspanderes på klikk. */
 const meta: Meta<typeof ImageEmbed> = {
   title: 'Components/Embeds/ImageEmbed',
   component: ImageEmbed,
@@ -118,6 +120,8 @@ export const ImageEmbedStory: StoryObj<typeof ImageEmbed> = {
   },
 };
 
+ImageEmbedStory.storyName = 'ImageEmbed';
+
 export const Failed: StoryObj<typeof ImageEmbed> = {
   args: {
     heartButton: StoryFavoriteButton,
@@ -129,4 +133,167 @@ export const Failed: StoryObj<typeof ImageEmbed> = {
   },
 };
 
-ImageEmbedStory.storyName = 'ImageEmbed';
+export const FullWidth: StoryObj<typeof ImageEmbed> = {
+  args: {
+    heartButton: StoryFavoriteButton,
+    embed: {
+      resource: 'image',
+      status: 'success',
+      embedData: embedData,
+      data: metaData,
+    },
+  },
+  render: (args) => (
+    <TextWrapper>
+      <ImageEmbed {...args} />
+    </TextWrapper>
+  ),
+};
+
+const TextWrapper = ({ children }: { children: ReactNode }) => (
+  <>
+    <p>
+      Du har en kjempegod idé til en kortfilm. Men det koster mange penger å produsere filmen. Derfor er du avhengig av
+      at noen tenner på idéen din og bestemmer seg for å bruke ressurser på nettopp dette prosjektet.
+    </p>
+    {children}
+
+    <p>
+      Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen du
+      planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+    </p>
+    <p>
+      Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen du
+      planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+    </p>
+    <p>
+      Pitching er også en god måte å bevisstgjøre seg selv på. Når du pitcher, blir idéen og historien i den filmen du
+      planlegger å lage, tydeligere for både deg selv og dem du eventuelt jobber sammen med i klassen.
+    </p>
+  </>
+);
+
+export const FloatLeft: StoryObj<typeof ImageEmbed> = {
+  args: {
+    heartButton: StoryFavoriteButton,
+    embed: {
+      resource: 'image',
+      status: 'success',
+      embedData: {
+        ...embedData,
+        align: 'left',
+      },
+      data: metaData,
+    },
+  },
+  render: (args) => (
+    <TextWrapper>
+      <ImageEmbed {...args} />
+    </TextWrapper>
+  ),
+};
+
+export const FloatRight: StoryObj<typeof ImageEmbed> = {
+  args: {
+    heartButton: StoryFavoriteButton,
+    embed: {
+      resource: 'image',
+      status: 'success',
+      embedData: {
+        ...embedData,
+        align: 'right',
+      },
+      data: metaData,
+    },
+  },
+
+  render: (args) => (
+    <TextWrapper>
+      <ImageEmbed {...args} />
+    </TextWrapper>
+  ),
+};
+
+export const FloatRightSmall: StoryObj<typeof ImageEmbed> = {
+  args: {
+    heartButton: StoryFavoriteButton,
+    embed: {
+      resource: 'image',
+      status: 'success',
+      embedData: {
+        ...embedData,
+        size: 'small',
+        align: 'right',
+      },
+      data: metaData,
+    },
+  },
+  render: (args) => (
+    <TextWrapper>
+      <ImageEmbed {...args} />
+    </TextWrapper>
+  ),
+};
+
+export const FloatLeftSmall: StoryObj<typeof ImageEmbed> = {
+  args: {
+    heartButton: StoryFavoriteButton,
+    embed: {
+      resource: 'image',
+      status: 'success',
+      embedData: {
+        ...embedData,
+        size: 'small',
+        align: 'left',
+      },
+      data: metaData,
+    },
+  },
+  render: (args) => (
+    <TextWrapper>
+      <ImageEmbed {...args} />
+    </TextWrapper>
+  ),
+};
+
+export const FloatRightExtraSmall: StoryObj<typeof ImageEmbed> = {
+  args: {
+    heartButton: StoryFavoriteButton,
+    embed: {
+      resource: 'image',
+      status: 'success',
+      embedData: {
+        ...embedData,
+        size: 'xsmall',
+        align: 'right',
+      },
+      data: metaData,
+    },
+  },
+  render: (args) => (
+    <TextWrapper>
+      <ImageEmbed {...args} />
+    </TextWrapper>
+  ),
+};
+
+export const FloatLeftExtraSmall: StoryObj<typeof ImageEmbed> = {
+  args: {
+    heartButton: StoryFavoriteButton,
+    embed: {
+      resource: 'image',
+      status: 'success',
+      embedData: {
+        ...embedData,
+        size: 'xsmall',
+        align: 'left',
+      },
+      data: metaData,
+    },
+  },
+  render: (args) => (
+    <TextWrapper>
+      <ImageEmbed {...args} />
+    </TextWrapper>
+  ),
+};