@ndla/ui 35.1.2 → 36.0.0

package/src/Embed/BrightcoveEmbed.stories.tsx

@@ -0,0 +1,209 @@
+/**
+ * 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 React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { BrightcoveData, BrightcoveEmbedData, BrightcoveMetaData } from '@ndla/types-embed';
+import BrightcoveEmbed from './BrightcoveEmbed';
+import { defaultParameters } from '../../../../stories/defaults';
+
+const embedData: BrightcoveEmbedData = {
+  resource: 'brightcove',
+  videoid: '6326301948112',
+  caption: '',
+  account: '4806596774001',
+  player: 'BkLm8fT',
+  title: 'Hvordan skaffer jeg penger?',
+};
+
+const metaData: BrightcoveData = {
+  id: '6326301948112',
+  account_id: '4806596774001',
+  custom_fields: {
+    license: 'Navngivelse-Ikkekommersiell-Del på samme vilkår',
+    licenseinfo: 'Rettighetshaver: Innovasjon Norge',
+  },
+  description:
+    'Har du tenkt å starte bedrift? Har behovet for mer penger allerede meldt seg? Da må du trolig få hjelp av andre for å finansiere utvikling av ideen din.',
+  images: {
+    poster: {
+      src: 'https://cf-images.eu-west-1.prod.boltdns.net/v1/static/4806596774001/efab3d48-de30-4333-8568-cfbc85dfbddf/aa9cc6c9-d330-4969-9834-7406d2a4c777/1280x720/match/image.jpg',
+    },
+  },
+  link: undefined,
+  long_description: null,
+  name: 'Hvordan skaffer jeg penger?',
+  published_at: '2023-04-27T10:27:03.747Z',
+  copyright: {
+    license: {
+      license: 'CC-BY-NC-SA-4.0',
+      description:
+        'Denne lisensen lar andre distribuere, endre, remixe, og bygge videre på ditt verk for ikke-kommersielle formål. Deres verk må navngi deg som den opprinnelige opphavspersonen og avledete verk må bære en tilsvarende lisens.',
+      url: 'https://creativecommons.org/licenses/by-nc-sa/4.0/deed.no',
+    },
+    creators: [],
+    processors: [],
+    rightsholders: [{ type: 'rightsholder', name: 'Innovasjon Norge' }],
+  },
+  sources: [
+    {
+      src: 'http://manifest.prod.boltdns.net/manifest/v1/hls/v4/clear/4806596774001/efab3d48-de30-4333-8568-cfbc85dfbddf/10s/master.m3u8?fastly_token=NjQ0YWRmNGRfMjcwZWQ0M2RhZTU0NTY3MmYyYzVmMGM4YzZiMDY3Mjk3ZjlhMjk0NGY0ZGNlZTdhM2ZmM2EzYzI4ZmM5OWFhOQ%3D%3D',
+    },
+    {
+      src: 'https://manifest.prod.boltdns.net/manifest/v1/hls/v4/clear/4806596774001/efab3d48-de30-4333-8568-cfbc85dfbddf/10s/master.m3u8?fastly_token=NjQ0YWRmNGRfMjcwZWQ0M2RhZTU0NTY3MmYyYzVmMGM4YzZiMDY3Mjk3ZjlhMjk0NGY0ZGNlZTdhM2ZmM2EzYzI4ZmM5OWFhOQ%3D%3D',
+    },
+    {
+      src: 'http://manifest.prod.boltdns.net/manifest/v1/dash/live-baseurl/clear/4806596774001/efab3d48-de30-4333-8568-cfbc85dfbddf/6s/manifest.mpd?fastly_token=NjQ0YWRmNGRfY2RiM2I0MzE4MzhkMTgwZTg2NGFmNGQyMzE4YmQyOTc3MTdhOWM0N2IyNGZhZGRhNTAxNzgyMzA5ZTRlZWUzZA%3D%3D',
+    },
+    {
+      src: 'https://manifest.prod.boltdns.net/manifest/v1/dash/live-baseurl/clear/4806596774001/efab3d48-de30-4333-8568-cfbc85dfbddf/6s/manifest.mpd?fastly_token=NjQ0YWRmNGRfY2RiM2I0MzE4MzhkMTgwZTg2NGFmNGQyMzE4YmQyOTc3MTdhOWM0N2IyNGZhZGRhNTAxNzgyMzA5ZTRlZWUzZA%3D%3D',
+    },
+    {
+      src: 'http://house-fastly-signed-eu-west-1-prod.brightcovecdn.com/media/v1/pmp4/static/clear/4806596774001/efab3d48-de30-4333-8568-cfbc85dfbddf/b1f82598-d33e-4203-a11d-cc9faf0b266e/main.mp4?fastly_token=NjQ0YWRmNGRfZTNjZmNjMzJhOTJlMzg0NDE0NjFkNmRhMjM3YzQyNGVlMmQxYTljNTQxZjBmZTNkMTQ5NmVlMTY2NmYwNzhhM18vL2hvdXNlLWZhc3RseS1zaWduZWQtZXUtd2VzdC0xLXByb2QuYnJpZ2h0Y292ZWNkbi5jb20vbWVkaWEvdjEvcG1wNC9zdGF0aWMvY2xlYXIvNDgwNjU5Njc3NDAwMS9lZmFiM2Q0OC1kZTMwLTQzMzMtODU2OC1jZmJjODVkZmJkZGYvYjFmODI1OTgtZDMzZS00MjAzLWExMWQtY2M5ZmFmMGIyNjZlL21haW4ubXA0',
+      container: 'MP4',
+      height: 720,
+      width: 1280,
+      size: 20495275,
+    },
+    {
+      src: 'https://house-fastly-signed-eu-west-1-prod.brightcovecdn.com/media/v1/pmp4/static/clear/4806596774001/efab3d48-de30-4333-8568-cfbc85dfbddf/b1f82598-d33e-4203-a11d-cc9faf0b266e/main.mp4?fastly_token=NjQ0YWRmNGRfZTNjZmNjMzJhOTJlMzg0NDE0NjFkNmRhMjM3YzQyNGVlMmQxYTljNTQxZjBmZTNkMTQ5NmVlMTY2NmYwNzhhM18vL2hvdXNlLWZhc3RseS1zaWduZWQtZXUtd2VzdC0xLXByb2QuYnJpZ2h0Y292ZWNkbi5jb20vbWVkaWEvdjEvcG1wNC9zdGF0aWMvY2xlYXIvNDgwNjU5Njc3NDAwMS9lZmFiM2Q0OC1kZTMwLTQzMzMtODU2OC1jZmJjODVkZmJkZGYvYjFmODI1OTgtZDMzZS00MjAzLWExMWQtY2M5ZmFmMGIyNjZlL21haW4ubXA0',
+      container: 'MP4',
+      height: 720,
+      width: 1280,
+      size: 20495275,
+    },
+  ],
+};
+
+const visuallyInterpretedEmbedMetaData: BrightcoveMetaData = {
+  resource: 'brightcove',
+  seq: 3,
+  status: 'success',
+  embedData: {
+    resource: 'brightcove',
+    videoid: '6243811329001',
+    caption: '',
+    account: '4806596774001',
+    player: 'BkLm8fT',
+    title: 'Frivillighet i helse og omsorgstjenesten (synstolket)',
+  },
+  data: {
+    id: '6243811329001',
+    account_id: '4806596774001',
+    custom_fields: {
+      licenseinfo: 'Leverandør: film_konsulentene',
+      yt_privacy_status: 'unlisted',
+      license: 'Navngivelse-Ikkekommersiell-Del på samme vilkår',
+    },
+    description: null,
+    images: {
+      poster: {
+        src: 'https://cf-images.eu-west-1.prod.boltdns.net/v1/static/4806596774001/a09bcb7b-ffe1-4c3a-98ea-bf997340a8cd/23f01e33-413e-418c-a4de-2c87c8b05c26/1280x720/match/image.jpg',
+      },
+    },
+    link: { text: '6242635463001' },
+    long_description: null,
+    name: 'Frivillighet i helse og omsorgstjenesten (synstolket)',
+    published_at: '2021-03-25T11:40:38.476Z',
+    copyright: {
+      license: {
+        license: 'CC-BY-NC-SA-4.0',
+        description:
+          'This license lets others remix, tweak, and build upon your work non-commercially, as long as they credit you and license their new creations under the identical terms.',
+        url: 'https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en',
+      },
+      creators: [],
+      processors: [],
+      rightsholders: [{ type: 'supplier', name: 'film_konsulentene' }],
+    },
+    sources: [
+      {
+        src: 'http://manifest.prod.boltdns.net/manifest/v1/hls/v4/clear/4806596774001/a09bcb7b-ffe1-4c3a-98ea-bf997340a8cd/10s/master.m3u8?fastly_token=NjQ0YmMyY2JfMTBmN2ZlOGUxNTAwYzQ0YmUwNDIzMDY3YWE1MGVkNjNmY2U2MDJhMDRkYjRhNzljNjZiZDJkNTA1MDM1Njg5Yg%3D%3D',
+      },
+      {
+        src: 'https://manifest.prod.boltdns.net/manifest/v1/hls/v4/clear/4806596774001/a09bcb7b-ffe1-4c3a-98ea-bf997340a8cd/10s/master.m3u8?fastly_token=NjQ0YmMyY2JfMTBmN2ZlOGUxNTAwYzQ0YmUwNDIzMDY3YWE1MGVkNjNmY2U2MDJhMDRkYjRhNzljNjZiZDJkNTA1MDM1Njg5Yg%3D%3D',
+      },
+      {
+        src: 'http://manifest.prod.boltdns.net/manifest/v1/dash/live-baseurl/clear/4806596774001/a09bcb7b-ffe1-4c3a-98ea-bf997340a8cd/6s/manifest.mpd?fastly_token=NjQ0YmMyY2JfZjhmNTUzZDc4MWI2YjdmNGEzOWUzOGMxYzkyYWU2NWVhZGVjZDY3ZWJiMmYxYjgzOThiNzQ1ZjMzOWRiZmRiYQ%3D%3D',
+      },
+      {
+        src: 'https://manifest.prod.boltdns.net/manifest/v1/dash/live-baseurl/clear/4806596774001/a09bcb7b-ffe1-4c3a-98ea-bf997340a8cd/6s/manifest.mpd?fastly_token=NjQ0YmMyY2JfZjhmNTUzZDc4MWI2YjdmNGEzOWUzOGMxYzkyYWU2NWVhZGVjZDY3ZWJiMmYxYjgzOThiNzQ1ZjMzOWRiZmRiYQ%3D%3D',
+      },
+      {
+        src: 'http://house-fastly-signed-eu-west-1-prod.brightcovecdn.com/media/v1/pmp4/static/clear/4806596774001/a09bcb7b-ffe1-4c3a-98ea-bf997340a8cd/494f17bd-2cee-4c49-8f27-99c76f3720d5/main.mp4?fastly_token=NjQ0YmMyY2JfYjQzM2YwNzQxMTg5YzAwNjUyNzI2MGE0NWVhZmNhZTQ5Y2QwMzIyMGExOGMyMzFhMmNiNmU3NWY1YTY0ZWNmM18vL2hvdXNlLWZhc3RseS1zaWduZWQtZXUtd2VzdC0xLXByb2QuYnJpZ2h0Y292ZWNkbi5jb20vbWVkaWEvdjEvcG1wNC9zdGF0aWMvY2xlYXIvNDgwNjU5Njc3NDAwMS9hMDliY2I3Yi1mZmUxLTRjM2EtOThlYS1iZjk5NzM0MGE4Y2QvNDk0ZjE3YmQtMmNlZS00YzQ5LThmMjctOTljNzZmMzcyMGQ1L21haW4ubXA0',
+        container: 'MP4',
+        height: 720,
+        width: 1280,
+        size: 138996555,
+      },
+      {
+        src: 'https://house-fastly-signed-eu-west-1-prod.brightcovecdn.com/media/v1/pmp4/static/clear/4806596774001/a09bcb7b-ffe1-4c3a-98ea-bf997340a8cd/494f17bd-2cee-4c49-8f27-99c76f3720d5/main.mp4?fastly_token=NjQ0YmMyY2JfYjQzM2YwNzQxMTg5YzAwNjUyNzI2MGE0NWVhZmNhZTQ5Y2QwMzIyMGExOGMyMzFhMmNiNmU3NWY1YTY0ZWNmM18vL2hvdXNlLWZhc3RseS1zaWduZWQtZXUtd2VzdC0xLXByb2QuYnJpZ2h0Y292ZWNkbi5jb20vbWVkaWEvdjEvcG1wNC9zdGF0aWMvY2xlYXIvNDgwNjU5Njc3NDAwMS9hMDliY2I3Yi1mZmUxLTRjM2EtOThlYS1iZjk5NzM0MGE4Y2QvNDk0ZjE3YmQtMmNlZS00YzQ5LThmMjctOTljNzZmMzcyMGQ1L21haW4ubXA0',
+        container: 'MP4',
+        height: 720,
+        width: 1280,
+        size: 138996555,
+      },
+    ],
+  },
+};
+
+const meta: Meta<typeof BrightcoveEmbed> = {
+  title: 'Enkle komponenter/Embeds/BrightcoveEmbed',
+  component: BrightcoveEmbed,
+  tags: ['autodocs'],
+  args: {
+    isConcept: false,
+  },
+  decorators: [
+    (Story) => (
+      <div className="o-wrapper">
+        <article className="c-article c-article--clean">
+          <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
+            <section>
+              <Story />
+            </section>
+          </section>
+        </article>
+      </div>
+    ),
+  ],
+  parameters: defaultParameters,
+};
+
+export default meta;
+
+export const BrightcoveEmbedStory: StoryObj<typeof BrightcoveEmbed> = {
+  args: {
+    embed: {
+      resource: 'brightcove',
+      status: 'success',
+      seq: 1,
+      embedData: embedData,
+      data: metaData,
+    },
+  },
+};
+
+export const VisuallyInterpreted: StoryObj<typeof BrightcoveEmbed> = {
+  args: {
+    embed: visuallyInterpretedEmbedMetaData,
+  },
+};
+
+export const BrightcoveFailed: StoryObj<typeof BrightcoveEmbed> = {
+  args: {
+    embed: {
+      resource: 'brightcove',
+      status: 'error',
+      seq: 1,
+      embedData: embedData,
+    },
+  },
+};
+
+BrightcoveEmbedStory.storyName = 'BrightcoveEmbed';

package/src/Embed/ConceptEmbed.stories.tsx

@@ -0,0 +1,190 @@
+/**
+ * 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 React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { ConceptData, ConceptEmbedData } from '@ndla/types-embed';
+import ConceptEmbed from './ConceptEmbed';
+import { defaultParameters } from '../../../../stories/defaults';
+
+const blockEmbedData: ConceptEmbedData = {
+  contentId: '35',
+  resource: 'concept',
+  type: 'block',
+  linkText: '',
+};
+
+const inlineEmbedData: ConceptEmbedData = {
+  contentId: '2318',
+  linkText: 'forklaring',
+  resource: 'concept',
+  type: 'inline',
+};
+
+const conceptMetaData: ConceptData['concept'] = {
+  id: 110,
+  revision: 16,
+  title: { title: 'skin – formasjonsskade', language: 'nb' },
+  content: {
+    content:
+      'Ordet «skin» er engelsk og brukes om formasjonsskade som oppstår i boreprosessen i området som grenser inn til brønnen. Skaden er størst i området nærmest hullet, men den kan bre seg utover et stykke fra brønnen. Skin forteller om bergartens permeabilitet i reservoarsonen. \n\nHullveggen skades både av borekronen, små partikler og væsken som brukes i brønnen.\n\nSkaden i bergarten gir dårligere forhold for oljen som skal strømme til brønnen. Gangene i bergarten plugges, og det oppstår et trykkfall som reduserer produksjonstrykket i brønnen.\n\nDet er viktig å redusere omfanget av skaden ved å velge væsker som passer godt til bergartsegenskapene, og å bore med en borekrone som skader minst mulig.\n\nSkader som er dannet av borevæske, kan repareres ved å syrebehandle hullets overflate.\n',
+    language: 'nb',
+  },
+  copyright: {
+    license: {
+      license: 'CC-BY-SA-4.0',
+      description: 'Creative Commons Attribution-ShareAlike 4.0 International',
+      url: 'https://creativecommons.org/licenses/by-sa/4.0/',
+    },
+    creators: [{ type: 'Writer', name: 'Sissel Paaske' }],
+    processors: [
+      { type: 'Processor', name: 'Totaltekst' },
+      { type: 'Correction', name: 'Arbeidets art' },
+    ],
+    rightsholders: [],
+  },
+  source: '',
+  metaImage: {
+    url: 'https://api.test.ndla.no/image-api/raw/id/52863',
+    alt: 'Eksempel på hvordan borevæsken kan trenge ut i formasjonen fra borehullet og skade formasjonens permeabilitet. Illustrasjon.',
+    language: 'nb',
+  },
+  tags: { tags: ['Brønn:Reservoar:'], language: 'nb' },
+  subjectIds: ['urn:subject:6'],
+  created: '2018-07-02T10:53:40Z',
+  updated: '2020-11-18T08:58:33Z',
+  updatedBy: ['sPHJn0BEtfxw2d2DUpIuS3iY', 'KBAJskRqPXZUv9LFjAbz8btB', 'eEIRDzflTh9oUp_3CgpuIMOg'],
+  supportedLanguages: ['nb', 'nn'],
+  articleIds: [],
+  status: { current: 'PUBLISHED', other: [] },
+  visualElement: {
+    visualElement:
+      '<ndlaembed data-resource="image" data-resource_id="52863" data-alt="Eksempel på hvordan borevæsken kan trenge ut i formasjonen fra borehullet og skade formasjonens permeabilitet. Illustrasjon." data-size="full" data-align="" data-url="https://api.test.ndla.no/image-api/v2/images/52863"></ndlaembed>',
+    language: 'nb',
+  },
+};
+
+const visualElementData: ConceptData['visualElement'] = {
+  resource: 'image',
+  status: 'success',
+  seq: 6,
+  embedData: {
+    resource: 'image',
+    resourceId: '52863',
+    alt: 'Eksempel på hvordan borevæsken kan trenge ut i formasjonen fra borehullet og skade formasjonens permeabilitet. Illustrasjon.',
+    size: 'full',
+    align: '',
+    url: 'https://api.test.ndla.no/image-api/v2/images/52863',
+  },
+  data: {
+    id: '52863',
+    metaUrl: 'https://api.test.ndla.no/image-api/v2/images/52863',
+    title: { title: 'Skin - formasjonsskade', language: 'nb' },
+    alttext: {
+      alttext: 'Skissen viser hvordan borevæsken trenger inn i formasjonen i området nær hullet. Illustrasjon.',
+      language: 'nb',
+    },
+    imageUrl: 'https://api.test.ndla.no/image-api/raw/6WbfcOmr.png',
+    size: 194971,
+    contentType: 'image/png',
+    copyright: {
+      license: {
+        license: 'CC-BY-SA-4.0',
+        description: 'Creative Commons Attribution-ShareAlike 4.0 International',
+        url: 'https://creativecommons.org/licenses/by-sa/4.0/',
+      },
+      origin: '',
+      creators: [{ type: 'Illustrator', name: 'Sissel Paaske' }],
+      processors: [],
+      rightsholders: [],
+    },
+    tags: { tags: ['skin', 'formasjonsskade', 'nærbrønn', 'permeabilitet'], language: 'nb' },
+    caption: { caption: 'Formasjonsskade i nærbrønnområdet kalles "skin". Illustrasjon.', language: 'nb' },
+    supportedLanguages: ['nb'],
+    created: '2020-10-26T15:02:47Z',
+    createdBy: 'KBAJskRqPXZUv9LFjAbz8btB',
+    modelRelease: 'not-set',
+    imageDimensions: { width: 429, height: 565 },
+  },
+};
+
+const blockMetaData: ConceptData = {
+  concept: conceptMetaData,
+  visualElement: visualElementData,
+};
+
+const meta: Meta<typeof ConceptEmbed> = {
+  title: 'Enkle komponenter/Embeds/ConceptEmbed',
+  component: ConceptEmbed,
+  tags: ['autodocs'],
+  args: {
+    fullWidth: false,
+  },
+  decorators: [
+    (Story) => (
+      <div className="o-wrapper">
+        <article className="c-article c-article--clean">
+          <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
+            <section>
+              <Story />
+            </section>
+          </section>
+        </article>
+      </div>
+    ),
+  ],
+  parameters: defaultParameters,
+};
+
+export default meta;
+
+export const Block: StoryObj<typeof ConceptEmbed> = {
+  args: {
+    embed: {
+      resource: 'concept',
+      status: 'success',
+      seq: 1,
+      embedData: blockEmbedData,
+      data: blockMetaData,
+    },
+  },
+};
+
+export const BlockFailed: StoryObj<typeof ConceptEmbed> = {
+  args: {
+    embed: {
+      resource: 'concept',
+      status: 'error',
+      seq: 1,
+      embedData: blockEmbedData,
+    },
+  },
+};
+
+export const Inline: StoryObj<typeof ConceptEmbed> = {
+  args: {
+    embed: {
+      resource: 'concept',
+      status: 'success',
+      seq: 1,
+      embedData: inlineEmbedData,
+      data: blockMetaData,
+    },
+  },
+};
+
+export const InlineFailed: StoryObj<typeof ConceptEmbed> = {
+  args: {
+    embed: {
+      resource: 'concept',
+      status: 'error',
+      seq: 1,
+      embedData: inlineEmbedData,
+    },
+  },
+};

package/src/Embed/ImageEmbed.stories.tsx

@@ -0,0 +1,106 @@
+/**
+ * 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 React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { ImageEmbedData } from '@ndla/types-embed';
+import { IImageMetaInformationV2 } from '@ndla/types-backend/build/image-api';
+import ImageEmbed from './ImageEmbed';
+import { defaultParameters } from '../../../../stories/defaults';
+
+const embedData: ImageEmbedData = {
+  resource: 'image',
+  resourceId: '61181',
+  size: 'full',
+  align: '',
+  alt: 'Tenåringsjente med lyse fletter slenger på håret. Foto. ',
+  caption: 'Modellklarert.',
+  url: 'https://api.test.ndla.no/image-api/v2/images/61181',
+};
+
+const metaData: IImageMetaInformationV2 = {
+  id: '61181',
+  metaUrl: 'https://api.test.ndla.no/image-api/v2/images/61181',
+  title: {
+    title: '\nHigh angle view of teenage girl with tousled dyed hair dancing at skateboard park\n',
+    language: 'nb',
+  },
+  alttext: { alttext: 'Tenåringsjente med lyse fletter slenger på håret. Foto. ', language: 'nb' },
+  imageUrl: 'https://api.test.ndla.no/image-api/raw/S81WiNgl.jpg',
+  size: 1685455,
+  contentType: 'image/jpeg',
+  copyright: {
+    license: {
+      license: 'CC-BY-NC-4.0',
+      description: 'Creative Commons Attribution-NonCommercial 4.0 International',
+      url: 'https://creativecommons.org/licenses/by-nc/4.0/',
+    },
+    origin: 'https://bilder.ntb.no/r/preview/creative/EXuziiZGWno',
+    creators: [{ type: 'photographer', name: 'Maskot' }],
+    processors: [],
+    rightsholders: [{ type: 'rightsholder', name: 'NTB' }],
+  },
+  tags: { tags: ['danser', 'kultur', 'identitet'], language: 'nb' },
+  caption: { caption: 'Modellklarert.', language: 'nb' },
+  supportedLanguages: ['nb'],
+  created: '2022-01-07T08:26:01Z',
+  createdBy: 'lA2KgVfhY-fpmgHCYAy5W1DX',
+  modelRelease: 'yes',
+  imageDimensions: { width: 2000, height: 1333 },
+};
+
+const meta: Meta<typeof ImageEmbed> = {
+  title: 'Enkle komponenter/Embeds/ImageEmbed',
+  component: ImageEmbed,
+  tags: ['autodocs'],
+  args: {
+    articlePath: undefined,
+    previewAlt: true,
+  },
+  decorators: [
+    (Story) => (
+      <div className="o-wrapper">
+        <article className="c-article c-article--clean">
+          <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">
+            <section>
+              <Story />
+            </section>
+          </section>
+        </article>
+      </div>
+    ),
+  ],
+  parameters: defaultParameters,
+};
+
+export default meta;
+
+export const ImageEmbedStory: StoryObj<typeof ImageEmbed> = {
+  args: {
+    embed: {
+      resource: 'image',
+      status: 'success',
+      seq: 1,
+      embedData: embedData,
+      data: metaData,
+    },
+  },
+};
+
+export const Failed: StoryObj<typeof ImageEmbed> = {
+  args: {
+    embed: {
+      resource: 'image',
+      status: 'error',
+      seq: 1,
+      embedData: embedData,
+    },
+  },
+};
+
+ImageEmbedStory.storyName = 'ImageEmbed';

package/src/Embed/RelatedContentEmbed.tsx

@@ -33,7 +33,7 @@ const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }: P
       data.resource?.paths.find((p) => p.split('/')[1] === subject?.replace('urn:', '')) ?? data.resource?.path;
     return (
       <RelatedArticleV2
-        title={data.article.title.title ?? ''}
+        title={data.article.title?.title ?? ''}
         introduction={data.article.metaDescription?.metaDescription ?? ''}
         target={isOembed ? '_blank' : undefined}
         to={`${ndlaFrontendDomain ?? ''}${path ?? ''}`}

package/src/NDLAFilm/FilmContentCard.tsx

@@ -6,21 +6,22 @@
  *
  */
 
-import React from 'react';
-import { spacing, colors, fonts, breakpoints } from '@ndla/core';
+import React, { HTMLAttributes } from 'react';
+import { spacing, colors, fonts, breakpoints, misc } from '@ndla/core';
 import SafeLink from '@ndla/safelink';
 import styled from '@emotion/styled';
 import { makeSrcQueryString } from '../Image';
 import FilmContentCardTags from './FilmContentCardTags';
 import { MovieResourceType, MovieType } from './types';
 
-interface Props {
+interface Props extends HTMLAttributes<HTMLElement> {
   movie: MovieType;
   columnWidth: number;
   distanceBetweenItems?: number;
   resourceTypes: MovieResourceType[];
   resizeThumbnailImages?: boolean;
   hideTags?: boolean;
+  className?: string;
 }
 
 const FilmContentCard = ({
@@ -30,6 +31,8 @@ const FilmContentCard = ({
   resourceTypes,
   resizeThumbnailImages,
   hideTags = false,
+  className,
+  ...rest
 }: Props) => {
   let backgroundImage = `${(metaImage && metaImage.url) || ''}`;
   const contentTypeId = `content-type-${id}`;
@@ -43,11 +46,12 @@ const FilmContentCard = ({
       to={path}
       aria-describedby={contentTypeId}
       columnWidth={columnWidth}
+      className={className}
       style={{ marginRight: `${distanceBetweenItems}px` }}
+      {...rest}
     >
       <StyledImage
         role="img"
-        columnWidth={columnWidth}
         style={{
           backgroundImage: `url(${backgroundImage}?${makeSrcQueryString(600)})`,
         }}
@@ -77,15 +81,13 @@ const StyledMovieTitle = styled.span`
   }
 `;
 
-interface StyledImageProps {
-  columnWidth: number;
-}
-const StyledImage = styled.div<StyledImageProps>`
-  height: ${(props) => props.columnWidth * 0.5625}px;
+const StyledImage = styled.div`
+  aspect-ratio: 16/9;
   background-size: cover;
   background-color: ${colors.ndlaFilm.filmColorLight};
   background-position-x: center;
   background-position-y: center;
+  border-radius: ${misc.borderRadius};
   position: relative;
   display: flex;
   align-items: flex-end;

package/src/NDLAFilm/FilmMovieList.tsx

@@ -17,7 +17,7 @@ import { StyledHeadingH2 } from './filmStyles';
 
 interface Props {
   movies: MovieType[];
-  name: string;
+  name?: string;
   slideBackwardsLabel: string;
   slideForwardsLabel: string;
   resourceTypes: MovieResourceType[];
@@ -42,7 +42,7 @@ const FilmMovieList = ({
   resizeThumbnailImages,
 }: Props) => (
   <StyledSection>
-    <StyledHeadingH2 marginLeft={autoSizedProps.margin}>{name}</StyledHeadingH2>
+    {!!name && <StyledHeadingH2 marginLeft={autoSizedProps.margin}>{name}</StyledHeadingH2>}
     <Carousel
       leftButton={
         <IconButtonV2 aria-label={slideBackwardsLabel}>