@ndla/ui 56.0.23-alpha.0 → 56.0.24-alpha.0

package/dist/panda.buildinfo.json

@@ -1,5 +1,5 @@
 {
-  "schemaVersion": "0.45.2",
+  "schemaVersion": "0.46.0",
   "styles": {
     "atomic": [
       "background]___[value:background.default",
@@ -77,17 +77,20 @@
       "gridArea]___[value:forwards",
       "gridArea]___[value:backwards",
       "flex]___[value:1",
+      "gap]___[value:xxsmall",
       "gridArea]___[value:track",
       "paddingInline]___[value:xsmall]___[cond:mobileDown",
+      "minWidth]___[value:xxlarge",
       "gridArea]___[value:volume",
       "paddingBlock]___[value:auto",
       "paddingInline]___[value:auto",
       "maxWidth]___[value:xxlarge",
       "maxHeight]___[value:xxlarge",
-      "minWidth]___[value:xxlarge",
       "flex]___[value:1]___[cond:& span",
       "gridArea]___[value:speed",
       "height]___[value:surface.3xsmall",
+      "minWidth]___[value:small",
+      "paddingInline]___[value:small",
       "srOnly]___[value:true",
       "backgroundColor]___[value:background.default",
       "transitionDuration]___[value:fast",
@@ -109,7 +112,6 @@
       "width]___[value:fit-content",
       "maxWidth]___[value:8xl",
       "flexWrap]___[value:wrap",
-      "gap]___[value:xxsmall",
       "alignItems]___[value:flex-start]___[cond:mobileDown",
       "justifyContent]___[value:center]___[cond:mobileDown",
       "flexDirection]___[value:column]___[cond:mobileDown",
@@ -250,9 +252,7 @@
       "width]___[value:100%]___[cond:& iframe",
       "textStyle]___[value:label.xsmall]___[cond:& a",
       "marginInlineStart]___[value:1]___[cond:& a",
-      "borderBottom]___[value:0",
-      "borderBottomLeftRadius]___[value:0",
-      "borderBottomRightRadius]___[value:0",
+      "borderRadius]___[value:0]___[cond:& img",
       "background]___[value:background.default]___[cond:_hover<___>& [data-byline-button]",
       "transform]___[value:scale(1.2)]___[cond:_hover<___>& button[data-expanded]",
       "transform]___[value:rotate(-45deg)]___[cond:& button[data-expanded='true']<___>& svg",
@@ -275,7 +275,7 @@
       "borderBottom]___[value:1px solid",
       "borderStyle]___[value:dashed",
       "borderColor]___[value:stroke.hover",
-      "paddingBlock]___[value:4xsmall",
+      "paddingBlockStart]___[value:5xsmall",
       "paddingInline]___[value:4xsmall",
       "borderColor]___[value:text.link]___[cond:_hover",
       "background]___[value:surface.actionSubtle.hover]___[cond:_hover",

package/dist/styles.css

@@ -230,10 +230,18 @@
     flex: 1 1 0%;
 }
 
+  .gap_xxsmall {
+    gap: var(--spacing-xxsmall);
+}
+
   .grid-area_track {
     grid-area: track;
 }
 
+  .min-w_xxlarge {
+    min-width: var(--sizes-xxlarge);
+}
+
   .grid-area_volume {
     grid-area: volume;
 }
@@ -254,10 +262,6 @@
     max-height: var(--sizes-xxlarge);
 }
 
-  .min-w_xxlarge {
-    min-width: var(--sizes-xxlarge);
-}
-
   .grid-area_speed {
     grid-area: speed;
 }
@@ -266,6 +270,14 @@
     height: var(--sizes-surface-3xsmall);
 }
 
+  .min-w_small {
+    min-width: var(--sizes-small);
+}
+
+  .px_small {
+    padding-inline: var(--spacing-small);
+}
+
   .sr_true {
     position: absolute;
     width: 1px;
@@ -314,10 +326,6 @@
     max-width: 8xl;
 }
 
-  .gap_xxsmall {
-    gap: var(--spacing-xxsmall);
-}
-
   .c_inherit {
     color: inherit;
 }
@@ -454,10 +462,6 @@
     color: var(--colors-text-error);
 }
 
-  .bd-b_0 {
-    border-bottom: 0;
-}
-
   .p_0 {
     padding: 0;
 }
@@ -486,8 +490,8 @@
     border-bottom: 1px solid;
 }
 
-  .py_4xsmall {
-    padding-block: var(--spacing-4xsmall);
+  .pbs_5xsmall {
+    padding-block-start: var(--spacing-5xsmall);
 }
 
   .px_4xsmall {
@@ -729,14 +733,6 @@
     background-color: var(--colors-surface-disabled);
 }
 
-  .bdr-bl_0 {
-    border-bottom-left-radius: 0;
-}
-
-  .bdr-br_0 {
-    border-bottom-right-radius: 0;
-}
-
   .top_xsmall {
     top: var(--spacing-xsmall);
 }
@@ -1079,6 +1075,10 @@
     margin-inline-start: var(--spacing-1);
 }
 
+  .\[\&_img\]\:bdr_0 img {
+    border-radius: 0;
+}
+
   .\[\&_a\]\:c_text\.strong a {
     color: var(--colors-text-strong);
 }

package/es/AudioPlayer/Controls.js

@@ -62,7 +62,7 @@ const ProgressWrapper = styled("div", {
     flex: "1",
     display: "flex",
     alignItems: "center",
-    gap: "xsmall",
+    gap: "xxsmall",
     gridArea: "track",
     paddingBlock: "xsmall",
     mobileDown: {
@@ -70,6 +70,11 @@ const ProgressWrapper = styled("div", {
     }
   }
 });
+const StyledText = styled(Text, {
+  base: {
+    minWidth: "xxlarge"
+  }
+});
 const VolumeButton = styled(IconButton, {
   base: {
     gridArea: "volume"
@@ -95,7 +100,13 @@ const StyledSelectRoot = styled(SelectRoot, {
 });
 const StyledSliderControl = styled(SliderControl, {
   base: {
-    height: "surface.3xsmall"
+    height: "surface.3xsmall",
+    minWidth: "small"
+  }
+});
+const StyledPopoverContent = styled(PopoverContent, {
+  base: {
+    paddingInline: "small"
   }
 });
 const formatTime = seconds => {
@@ -208,7 +219,7 @@ const Controls = _ref => {
         onClick: () => onSeekSeconds(15),
         children: /*#__PURE__*/_jsx(Forward15Line, {})
       }), /*#__PURE__*/_jsxs(ProgressWrapper, {
-        children: [/*#__PURE__*/_jsx(Text, {
+        children: [/*#__PURE__*/_jsx(StyledText, {
           textStyle: "label.medium",
           asChild: true,
           consumeCss: true,
@@ -233,7 +244,7 @@ const Controls = _ref => {
               children: /*#__PURE__*/_jsx(SliderHiddenInput, {})
             })]
           })
-        }), /*#__PURE__*/_jsx(Text, {
+        }), /*#__PURE__*/_jsx(StyledText, {
           textStyle: "label.medium",
           asChild: true,
           consumeCss: true,
@@ -286,7 +297,7 @@ const Controls = _ref => {
             "aria-label": t("audio.controls.adjustVolume"),
             children: /*#__PURE__*/_jsx(VolumeUpFill, {})
           })
-        }), /*#__PURE__*/_jsx(PopoverContent, {
+        }), /*#__PURE__*/_jsx(StyledPopoverContent, {
           children: /*#__PURE__*/_jsxs(SliderRoot, {
             orientation: "vertical",
             value: [volumeValue],

package/es/Embed/ConceptEmbed.js

@@ -82,6 +82,7 @@ export const InlineConcept = /*#__PURE__*/forwardRef((_ref2, ref) => {
     linkText,
     copyright,
     visualElement,
+    previewAlt,
     lang,
     children,
     title,
@@ -104,6 +105,7 @@ export const InlineConcept = /*#__PURE__*/forwardRef((_ref2, ref) => {
           lang: lang,
           title: title,
           source: source,
+          previewAlt: previewAlt,
           children: children
         })
       })

package/es/Embed/EmbedErrorPlaceholder.js

@@ -18,6 +18,7 @@ const ErrorPlaceholder = styled("div", {
     justifyContent: "center",
     backgroundColor: "surface.disabled",
     height: "surface.xsmall",
+    borderRadius: "xsmall",
     "& svg": {
       fill: "text.subtle",
       height: "90%",

package/es/Embed/GlossEmbed.js

@@ -6,6 +6,7 @@
  *
  */
 
+import { Portal } from "@ark-ui/react";
 import { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
@@ -46,12 +47,14 @@ export const GlossEmbed = _ref => {
         children: /*#__PURE__*/_jsx(InlineTriggerButton, {
           children: embed.embedData.linkText
         })
-      }), /*#__PURE__*/_jsx(StyledPopoverContent, {
-        children: /*#__PURE__*/_jsx(Figure, {
-          children: /*#__PURE__*/_jsx(Gloss, {
-            glossData: concept.glossData,
-            title: concept.title,
-            audio: audio
+      }), /*#__PURE__*/_jsx(Portal, {
+        children: /*#__PURE__*/_jsx(StyledPopoverContent, {
+          children: /*#__PURE__*/_jsx(Figure, {
+            children: /*#__PURE__*/_jsx(Gloss, {
+              glossData: concept.glossData,
+              title: concept.title,
+              audio: audio
+            })
           })
         })
       })]

package/es/Embed/ImageEmbed.js

@@ -94,10 +94,10 @@ const ImageWrapper = styled("div", {
       true: {
         border: "1px solid",
         borderColor: "stroke.subtle",
-        borderBottom: "0",
         borderRadius: "xsmall",
-        borderBottomLeftRadius: "0",
-        borderBottomRightRadius: "0"
+        "& img": {
+          borderRadius: "0"
+        }
       },
       false: {}
     },
@@ -215,7 +215,8 @@ const ImageEmbed = _ref => {
         alt: altText,
         src: data.image.imageUrl,
         lang: lang,
-        onClick: figureProps?.float ? toggleImageSize : undefined
+        onClick: figureProps?.float ? toggleImageSize : undefined,
+        variant: "rounded"
       }), !!embedData.align && /*#__PURE__*/_jsx(ExpandButton, {
         "aria-label": t(`license.images.itemImage.zoom${imageSizes ? "Out" : ""}ImageButtonLabel`),
         onClick: toggleImageSize,

package/es/Embed/InlineTriggerButton.js

@@ -17,7 +17,7 @@ const StyledSpan = styled("span", {
     borderBottom: "1px solid",
     borderStyle: "dashed",
     borderColor: "stroke.hover",
-    paddingBlock: "4xsmall",
+    paddingBlockStart: "5xsmall",
     paddingInline: "4xsmall",
     width: "fit-content",
     cursor: "pointer",

package/es/KeyFigure/KeyFigure.js

@@ -20,7 +20,8 @@ const ContentWrapper = styled("div", {
 const StyledImage = styled("img", {
   base: {
     height: "surface.3xsmall",
-    width: "surface.3xsmall"
+    width: "surface.3xsmall",
+    borderRadius: "xsmall"
   }
 });
 const TitleWrapper = styled("div", {

package/es/ResourceBox/ResourceBox.js

@@ -73,7 +73,8 @@ export const ResourceBox = _ref => {
     children: [/*#__PURE__*/_jsx(StyledImage, {
       src: image.src,
       alt: image.alt,
-      sizes: `(min-width: ${breakpoints.desktop}) 150px, (max-width: ${breakpoints.tablet} ) 400px, 200px`
+      sizes: `(min-width: ${breakpoints.desktop}) 150px, (max-width: ${breakpoints.tablet} ) 400px, 200px`,
+      variant: "rounded"
     }), /*#__PURE__*/_jsxs(ContentWrapper, {
       children: [/*#__PURE__*/_jsx(Heading, {
         textStyle: "label.large",

package/es/i18n/useComponentTranslations.js

@@ -142,4 +142,22 @@ export const useAudioSearchTranslations = function () {
     },
     ...remaining
   };
+};
+export const useVideoSearchTranslations = translations => {
+  const {
+    t
+  } = useTranslation("translation", {
+    keyPrefix: "component.videoSearch"
+  });
+  return {
+    searchPlaceholder: t("searchPlaceholder"),
+    searchButtonTitle: t("searchButtonTitle"),
+    loadMoreVideos: t("loadMoreVideos"),
+    noResults: t("noResults"),
+    is360Video: t("is360Video"),
+    previewVideo: t("previewVideo"),
+    addVideo: t("addVideo"),
+    close: t("close"),
+    ...translations
+  };
 };

package/es/locale/messages-en.js

@@ -1492,6 +1492,16 @@ const messages = {
       searchButtonTitle: "Search",
       useAudio: "Chose audio",
       noResults: "No audio files found"
+    },
+    videoSearch: {
+      searchPlaceholder: "Search videos",
+      searchButtonTitle: "Search",
+      loadMoreVideos: "Load more videos",
+      noResults: "No videos found",
+      addVideo: "Use video",
+      previewVideo: "Preview",
+      is360Video: "VR video",
+      close: "Lukk"
     }
   }
 };

package/es/locale/messages-nb.js

@@ -1492,6 +1492,16 @@ const messages = {
       searchButtonTitle: "Søk",
       useAudio: "Velg lyd",
       noResults: "Ingen resultater funnet"
+    },
+    videoSearch: {
+      searchPlaceholder: "Søk i videoer",
+      searchButtonTitle: "Søk",
+      loadMoreVideos: "Last flere videoer",
+      noResults: "Ingen videoer funnet",
+      addVideo: "Bruk video",
+      previewVideo: "Forhåndsvis",
+      is360Video: "VR-video",
+      close: "Lukk"
     }
   }
 };

package/es/locale/messages-nn.js

@@ -1492,6 +1492,16 @@ const messages = {
       searchButtonTitle: "Søk",
       useAudio: "Velg lyd",
       noResults: "Ingen resultat funnet"
+    },
+    videoSearch: {
+      searchPlaceholder: "Søk i videoar",
+      searchButtonTitle: "Søk",
+      loadMoreVideos: "Last fleire videoar",
+      noResults: "Ingen videoar funnet",
+      addVideo: "Bruk video",
+      previewVideo: "Førehandsvis",
+      is360Video: "VR-video",
+      close: "Lukk"
     }
   }
 };

package/es/locale/messages-se.js

@@ -1492,6 +1492,16 @@ const messages = {
       searchButtonTitle: "Søk",
       useAudio: "Velg lyd",
       noResults: "Ingen resultater funnet"
+    },
+    videoSearch: {
+      searchPlaceholder: "Søk i videoar",
+      searchButtonTitle: "Søk",
+      loadMoreVideos: "Last fleire videoar",
+      noResults: "Ingen videoar funnet",
+      addVideo: "Bruk video",
+      previewVideo: "Forhåndsvis",
+      is360Video: "VR-video",
+      close: "Lukk"
     }
   }
 };

package/es/locale/messages-sma.js

@@ -1492,6 +1492,16 @@ const messages = {
       searchButtonTitle: "Søk",
       useAudio: "Velg lyd",
       noResults: "Ingen resultater funnet"
+    },
+    videoSearch: {
+      searchPlaceholder: "Søk i videoar",
+      searchButtonTitle: "Søk",
+      loadMoreVideos: "Last fleire videoar",
+      noResults: "Ingen videoar funnet",
+      addVideo: "Bruk video",
+      previewVideo: "Forhåndsvis",
+      is360Video: "VR-video",
+      close: "Lukk"
     }
   }
 };

package/es/styles.css

@@ -230,10 +230,18 @@
     flex: 1 1 0%;
 }
 
+  .gap_xxsmall {
+    gap: var(--spacing-xxsmall);
+}
+
   .grid-area_track {
     grid-area: track;
 }
 
+  .min-w_xxlarge {
+    min-width: var(--sizes-xxlarge);
+}
+
   .grid-area_volume {
     grid-area: volume;
 }
@@ -254,10 +262,6 @@
     max-height: var(--sizes-xxlarge);
 }
 
-  .min-w_xxlarge {
-    min-width: var(--sizes-xxlarge);
-}
-
   .grid-area_speed {
     grid-area: speed;
 }
@@ -266,6 +270,14 @@
     height: var(--sizes-surface-3xsmall);
 }
 
+  .min-w_small {
+    min-width: var(--sizes-small);
+}
+
+  .px_small {
+    padding-inline: var(--spacing-small);
+}
+
   .sr_true {
     position: absolute;
     width: 1px;
@@ -314,10 +326,6 @@
     max-width: 8xl;
 }
 
-  .gap_xxsmall {
-    gap: var(--spacing-xxsmall);
-}
-
   .c_inherit {
     color: inherit;
 }
@@ -454,10 +462,6 @@
     color: var(--colors-text-error);
 }
 
-  .bd-b_0 {
-    border-bottom: 0;
-}
-
   .p_0 {
     padding: 0;
 }
@@ -486,8 +490,8 @@
     border-bottom: 1px solid;
 }
 
-  .py_4xsmall {
-    padding-block: var(--spacing-4xsmall);
+  .pbs_5xsmall {
+    padding-block-start: var(--spacing-5xsmall);
 }
 
   .px_4xsmall {
@@ -729,14 +733,6 @@
     background-color: var(--colors-surface-disabled);
 }
 
-  .bdr-bl_0 {
-    border-bottom-left-radius: 0;
-}
-
-  .bdr-br_0 {
-    border-bottom-right-radius: 0;
-}
-
   .top_xsmall {
     top: var(--spacing-xsmall);
 }
@@ -1079,6 +1075,10 @@
     margin-inline-start: var(--spacing-1);
 }
 
+  .\[\&_img\]\:bdr_0 img {
+    border-radius: 0;
+}
+
   .\[\&_a\]\:c_text\.strong a {
     color: var(--colors-text-strong);
 }

package/lib/AudioPlayer/Controls.js

@@ -68,7 +68,7 @@ const ProgressWrapper = (0, _jsx2.styled)("div", {
     flex: "1",
     display: "flex",
     alignItems: "center",
-    gap: "xsmall",
+    gap: "xxsmall",
     gridArea: "track",
     paddingBlock: "xsmall",
     mobileDown: {
@@ -76,6 +76,11 @@ const ProgressWrapper = (0, _jsx2.styled)("div", {
     }
   }
 });
+const StyledText = (0, _jsx2.styled)(_primitives.Text, {
+  base: {
+    minWidth: "xxlarge"
+  }
+});
 const VolumeButton = (0, _jsx2.styled)(_primitives.IconButton, {
   base: {
     gridArea: "volume"
@@ -101,7 +106,13 @@ const StyledSelectRoot = (0, _jsx2.styled)(_primitives.SelectRoot, {
 });
 const StyledSliderControl = (0, _jsx2.styled)(_primitives.SliderControl, {
   base: {
-    height: "surface.3xsmall"
+    height: "surface.3xsmall",
+    minWidth: "small"
+  }
+});
+const StyledPopoverContent = (0, _jsx2.styled)(_primitives.PopoverContent, {
+  base: {
+    paddingInline: "small"
   }
 });
 const formatTime = seconds => {
@@ -214,7 +225,7 @@ const Controls = _ref => {
         onClick: () => onSeekSeconds(15),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_action.Forward15Line, {})
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ProgressWrapper, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
           textStyle: "label.medium",
           asChild: true,
           consumeCss: true,
@@ -239,7 +250,7 @@ const Controls = _ref => {
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderHiddenInput, {})
             })]
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Text, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
           textStyle: "label.medium",
           asChild: true,
           consumeCss: true,
@@ -292,7 +303,7 @@ const Controls = _ref => {
             "aria-label": t("audio.controls.adjustVolume"),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_common.VolumeUpFill, {})
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.PopoverContent, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPopoverContent, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.SliderRoot, {
             orientation: "vertical",
             value: [volumeValue],

package/lib/Embed/ConceptEmbed.js

@@ -90,6 +90,7 @@ const InlineConcept = exports.InlineConcept = /*#__PURE__*/(0, _react.forwardRef
     linkText,
     copyright,
     visualElement,
+    previewAlt,
     lang,
     children,
     title,
@@ -112,6 +113,7 @@ const InlineConcept = exports.InlineConcept = /*#__PURE__*/(0, _react.forwardRef
           lang: lang,
           title: title,
           source: source,
+          previewAlt: previewAlt,
           children: children
         })
       })

package/lib/Embed/EmbedErrorPlaceholder.js

@@ -24,6 +24,7 @@ const ErrorPlaceholder = (0, _jsx2.styled)("div", {
     justifyContent: "center",
     backgroundColor: "surface.disabled",
     height: "surface.xsmall",
+    borderRadius: "xsmall",
     "& svg": {
       fill: "text.subtle",
       height: "90%",

package/lib/Embed/GlossEmbed.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GlossEmbed = void 0;
+var _react = require("@ark-ui/react");
 var _primitives = require("@ndla/primitives");
 var _jsx2 = require("@ndla/styled-system/jsx");
 var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
@@ -53,12 +54,14 @@ const GlossEmbed = _ref => {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlineTriggerButton.InlineTriggerButton, {
           children: embed.embedData.linkText
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPopoverContent, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Figure, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Gloss.Gloss, {
-            glossData: concept.glossData,
-            title: concept.title,
-            audio: audio
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Portal, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPopoverContent, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Figure, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Gloss.Gloss, {
+              glossData: concept.glossData,
+              title: concept.title,
+              audio: audio
+            })
           })
         })
       })]