@ndla/ui 55.0.12-alpha.0 → 55.0.13-alpha.0

package/src/locale/messages-se.ts

@@ -824,6 +824,7 @@ const messages = {
       url: "Boasttuvuohta jietnafiilla viežžamis.",
       caption: "Šállošat, boasttuvuohta čuožžilii jietnafiilla viežžamis.",
     },
+    valueText: "{{start}} av {{end}}",
     controls: {
       forward15sec: "Sirdde 15 sekundda ovddas",
       rewind15sec: "Sirdde 15 sekundda maŋos",

package/src/locale/messages-sma.ts

@@ -826,6 +826,7 @@ const messages = {
       url: "Fiejlie tjoeje-veedtjemisnie.",
       caption: "Gaatesjen, fiejlie sjïdti tjoeje-veedtjemisnie.",
     },
+    valueText: "{{start}} av {{end}}",
     controls: {
       forward15sec: "Juhtieh 15 sekundh åvtese",
       rewind15sec: "Juhtieh 15 sekundh bååstede",

package/src/types.ts

@@ -12,6 +12,8 @@ type ResourceTypes = {
   name: string;
 };
 
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
 export type Resource = {
   id: string;
   name: string;

package/src/Image/__tests__/Image-test.tsx

@@ -1,66 +0,0 @@
-/**
- * Copyright (c) 2017-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-/* eslint-env jest */
-
-import { render } from "@testing-library/react";
-import "@testing-library/jest-dom";
-import Image, { makeSrcQueryString } from "../Image";
-
-test("Image renderers correctly", () => {
-  const { container } = render(<Image alt="example" src="https://example.com/image.png" />, { container: undefined });
-
-  expect(container.firstChild).toMatchSnapshot();
-});
-
-test("Lazyloaded image renderers correctly", () => {
-  const { container } = render(
-    <Image lazyLoad lazyLoadSrc="https://example.com/blurry.png" alt="example" src="https://example.com/image.png" />,
-  );
-
-  expect(container.firstChild).toMatchSnapshot();
-});
-
-test("Image with crop and focalpoint props renderers correctly", () => {
-  const { container } = render(
-    <Image
-      crop={{
-        startX: 14.59,
-        endX: 79.63,
-        startY: 20,
-        endY: 100,
-      }}
-      focalPoint={{
-        x: 65.08,
-        y: 45.28,
-      }}
-      alt="example"
-      src="https://example.com/image.png"
-    />,
-  );
-
-  expect(container.firstChild).toMatchSnapshot();
-});
-
-test("makeSrcQueryString renders correctly", () => {
-  const crop = {
-    startX: 14.59,
-    endX: 79.63,
-    startY: 20,
-    endY: 100,
-  };
-  const focalPoint = {
-    x: 65.08,
-    y: 45.28,
-  };
-  expect(makeSrcQueryString(undefined, undefined, undefined)).toMatch("");
-  expect(makeSrcQueryString(1024, undefined, undefined)).toMatch("width=1024");
-  expect(makeSrcQueryString(undefined, crop, undefined)).toMatchSnapshot();
-  expect(makeSrcQueryString(undefined, undefined, focalPoint)).toMatchSnapshot();
-  expect(makeSrcQueryString(1024, crop, focalPoint)).toMatchSnapshot();
-});

package/src/Image/__tests__/__snapshots__/Image-test.tsx.snap

@@ -1,194 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Image renderers correctly 1`] = `
-.emotion-0 {
-  overflow: hidden;
-  position: relative;
-}
-
-.emotion-0[data-expanded="true"] {
-  width: 100%;
-}
-
-.emotion-0 picture {
-  width: 100%;
-}
-
-.emotion-0[data-svg="true"] {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-0[data-border="true"] {
-  border: 1px solid #a5bcd3;
-  border-bottom: 0;
-  border-radius: 4px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.emotion-0[data-expandable="true"] {
-  cursor: pointer;
-}
-
-.emotion-1[data-border="true"] {
-  border-radius: 3px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-<div
-  class="emotion-0"
-  data-expandable="false"
-  data-svg="false"
->
-  <picture>
-    <source
-      sizes="(min-width: 1024px) 1024px, 100vw"
-      srcset="https://example.com/image.png?width=2720 2720w, https://example.com/image.png?width=2080 2080w, https://example.com/image.png?width=1760 1760w, https://example.com/image.png?width=1440 1440w, https://example.com/image.png?width=1120 1120w, https://example.com/image.png?width=1000 1000w, https://example.com/image.png?width=960 960w, https://example.com/image.png?width=800 800w, https://example.com/image.png?width=640 640w, https://example.com/image.png?width=480 480w, https://example.com/image.png?width=320 320w, https://example.com/image.png?width=240 240w, https://example.com/image.png?width=180 180w"
-    />
-    <img
-      alt="example"
-      class="emotion-1"
-      src="https://example.com/image.png?width=1024"
-    />
-  </picture>
-</div>
-`;
-
-exports[`Image with crop and focalpoint props renderers correctly 1`] = `
-.emotion-0 {
-  overflow: hidden;
-  position: relative;
-}
-
-.emotion-0[data-expanded="true"] {
-  width: 100%;
-}
-
-.emotion-0 picture {
-  width: 100%;
-}
-
-.emotion-0[data-svg="true"] {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-0[data-border="true"] {
-  border: 1px solid #a5bcd3;
-  border-bottom: 0;
-  border-radius: 4px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.emotion-0[data-expandable="true"] {
-  cursor: pointer;
-}
-
-.emotion-1[data-border="true"] {
-  border-radius: 3px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-<div
-  class="emotion-0"
-  data-expandable="false"
-  data-svg="false"
->
-  <picture>
-    <source
-      sizes="(min-width: 1024px) 1024px, 100vw"
-      srcset="https://example.com/image.png?width=2720&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 2720w, https://example.com/image.png?width=2080&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 2080w, https://example.com/image.png?width=1760&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 1760w, https://example.com/image.png?width=1440&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 1440w, https://example.com/image.png?width=1120&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 1120w, https://example.com/image.png?width=1000&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 1000w, https://example.com/image.png?width=960&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 960w, https://example.com/image.png?width=800&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 800w, https://example.com/image.png?width=640&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 640w, https://example.com/image.png?width=480&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 480w, https://example.com/image.png?width=320&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 320w, https://example.com/image.png?width=240&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 240w, https://example.com/image.png?width=180&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28 180w"
-    />
-    <img
-      alt="example"
-      class="emotion-1"
-      src="https://example.com/image.png?width=1024&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28"
-    />
-  </picture>
-</div>
-`;
-
-exports[`Lazyloaded image renderers correctly 1`] = `
-.emotion-0 {
-  overflow: hidden;
-  position: relative;
-}
-
-.emotion-0[data-expanded="true"] {
-  width: 100%;
-}
-
-.emotion-0 picture {
-  width: 100%;
-}
-
-.emotion-0[data-svg="true"] {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-0[data-border="true"] {
-  border: 1px solid #a5bcd3;
-  border-bottom: 0;
-  border-radius: 4px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.emotion-0[data-expandable="true"] {
-  cursor: pointer;
-}
-
-.emotion-1[data-border="true"] {
-  border-radius: 3px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-<div
-  class="emotion-0"
-  data-expandable="false"
-  data-svg="false"
->
-  <picture>
-    <source
-      sizes="(min-width: 1024px) 1024px, 100vw"
-      srcset="https://example.com/image.png?width=2720 2720w, https://example.com/image.png?width=2080 2080w, https://example.com/image.png?width=1760 1760w, https://example.com/image.png?width=1440 1440w, https://example.com/image.png?width=1120 1120w, https://example.com/image.png?width=1000 1000w, https://example.com/image.png?width=960 960w, https://example.com/image.png?width=800 800w, https://example.com/image.png?width=640 640w, https://example.com/image.png?width=480 480w, https://example.com/image.png?width=320 320w, https://example.com/image.png?width=240 240w, https://example.com/image.png?width=180 180w"
-    />
-    <img
-      alt="example"
-      class="emotion-1"
-      loading="lazy"
-      src="https://example.com/image.png?width=1024"
-    />
-  </picture>
-</div>
-`;
-
-exports[`makeSrcQueryString renders correctly 1`] = `"cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100"`;
-
-exports[`makeSrcQueryString renders correctly 2`] = `"focalX=65.08&focalY=45.28"`;
-
-exports[`makeSrcQueryString renders correctly 3`] = `"width=1024&cropStartX=14.59&cropEndX=79.63&cropStartY=20&cropEndY=100&focalX=65.08&focalY=45.28"`;