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

package/lib/Embed/ImageEmbed.js

@@ -104,10 +104,10 @@ const ImageWrapper = (0, _jsx2.styled)("div", {
       true: {
         border: "1px solid",
         borderColor: "stroke.subtle",
-        borderBottom: "0",
         borderRadius: "xsmall",
-        borderBottomLeftRadius: "0",
-        borderBottomRightRadius: "0"
+        "& img": {
+          borderRadius: "0"
+        }
       },
       false: {}
     },
@@ -225,7 +225,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__*/(0, _jsxRuntime.jsx)(ExpandButton, {
         "aria-label": t(`license.images.itemImage.zoom${imageSizes ? "Out" : ""}ImageButtonLabel`),
         onClick: toggleImageSize,

package/lib/Embed/InlineTriggerButton.js

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

package/lib/KeyFigure/KeyFigure.js

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

package/lib/ResourceBox/ResourceBox.js

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

package/lib/i18n/useComponentTranslations.d.ts

@@ -22,7 +22,17 @@ interface AudioSearchTranslations {
     noResults: string;
     paginationTranslations: PaginationRootProps["translations"];
 }
-export interface PreviewTranslations {
+interface VideoTranslations {
+    searchPlaceholder: string;
+    searchButtonTitle: string;
+    loadMoreVideos: string;
+    noResults: string;
+    is360Video: string;
+    previewVideo: string;
+    addVideo: string;
+    close: string;
+}
+interface PreviewTranslations {
     creatorsLabel: string;
     license: string;
     caption: string;
@@ -34,7 +44,7 @@ export interface PreviewTranslations {
     missingTitleFallback?: string;
     useImageTitle: string;
 }
-export interface ImageSearchTranslations {
+interface ImageSearchTranslations {
     searchPlaceholder: string;
     searchButtonTitle: string;
     imagePreview: PreviewTranslations;
@@ -42,4 +52,5 @@ export interface ImageSearchTranslations {
 }
 export declare const useImageSearchTranslations: (translations?: DeepPartial<ImageSearchTranslations>) => ImageSearchTranslations;
 export declare const useAudioSearchTranslations: (translations?: DeepPartial<AudioSearchTranslations>) => AudioSearchTranslations;
+export declare const useVideoSearchTranslations: (translations?: Partial<VideoTranslations>) => VideoTranslations;
 export {};

package/lib/i18n/useComponentTranslations.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTagsInputTranslations = exports.useTagSelectorTranslations = exports.usePaginationTranslations = exports.useImageSearchTranslations = exports.useComboboxTranslations = exports.useAudioSearchTranslations = void 0;
+exports.useVideoSearchTranslations = exports.useTagsInputTranslations = exports.useTagSelectorTranslations = exports.usePaginationTranslations = exports.useImageSearchTranslations = exports.useComboboxTranslations = exports.useAudioSearchTranslations = void 0;
 var _reactI18next = require("react-i18next");
 /**
  * Copyright (c) 2024-present, NDLA.
@@ -153,4 +153,23 @@ const useAudioSearchTranslations = function () {
     ...remaining
   };
 };
-exports.useAudioSearchTranslations = useAudioSearchTranslations;
+exports.useAudioSearchTranslations = useAudioSearchTranslations;
+const useVideoSearchTranslations = translations => {
+  const {
+    t
+  } = (0, _reactI18next.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
+  };
+};
+exports.useVideoSearchTranslations = useVideoSearchTranslations;

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

@@ -1449,6 +1449,16 @@ declare const messages: {
             useAudio: string;
             noResults: string;
         };
+        videoSearch: {
+            searchPlaceholder: string;
+            searchButtonTitle: string;
+            loadMoreVideos: string;
+            noResults: string;
+            addVideo: string;
+            previewVideo: string;
+            is360Video: string;
+            close: string;
+        };
     };
 };
 export default messages;

package/lib/locale/messages-en.js

@@ -266,8 +266,8 @@ const messages = {
     activateAdditionalResources: "Show additional content",
     toggleFilterLabel: "Show additional content",
     label: "Learning content",
-    tooltipCoreTopic: "Core content is a subject that is on the curriculum",
-    tooltipAdditionalTopic: "Additional content is a subject that is not on the curriculum",
+    tooltipCoreTopic: "Core content",
+    tooltipAdditionalTopic: "Additional content",
     additionalTooltip: "Additional content is not on the curriculum",
     dialogTooltip: "What is core content and additional content?",
     dialogHeading: "Core content and additional content",
@@ -1499,6 +1499,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/lib/locale/messages-nb.d.ts

@@ -1449,6 +1449,16 @@ declare const messages: {
             useAudio: string;
             noResults: string;
         };
+        videoSearch: {
+            searchPlaceholder: string;
+            searchButtonTitle: string;
+            loadMoreVideos: string;
+            noResults: string;
+            addVideo: string;
+            previewVideo: string;
+            is360Video: string;
+            close: string;
+        };
     };
 };
 export default messages;

package/lib/locale/messages-nb.js

@@ -1499,6 +1499,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/lib/locale/messages-nn.d.ts

@@ -1449,6 +1449,16 @@ declare const messages: {
             useAudio: string;
             noResults: string;
         };
+        videoSearch: {
+            searchPlaceholder: string;
+            searchButtonTitle: string;
+            loadMoreVideos: string;
+            noResults: string;
+            addVideo: string;
+            previewVideo: string;
+            is360Video: string;
+            close: string;
+        };
     };
 };
 export default messages;

package/lib/locale/messages-nn.js

@@ -1499,6 +1499,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/lib/locale/messages-se.d.ts

@@ -1449,6 +1449,16 @@ declare const messages: {
             useAudio: string;
             noResults: string;
         };
+        videoSearch: {
+            searchPlaceholder: string;
+            searchButtonTitle: string;
+            loadMoreVideos: string;
+            noResults: string;
+            addVideo: string;
+            previewVideo: string;
+            is360Video: string;
+            close: string;
+        };
     };
 };
 export default messages;

package/lib/locale/messages-se.js

@@ -1499,6 +1499,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/lib/locale/messages-sma.d.ts

@@ -1449,6 +1449,16 @@ declare const messages: {
             useAudio: string;
             noResults: string;
         };
+        videoSearch: {
+            searchPlaceholder: string;
+            searchButtonTitle: string;
+            loadMoreVideos: string;
+            noResults: string;
+            addVideo: string;
+            previewVideo: string;
+            is360Video: string;
+            close: string;
+        };
     };
 };
 export default messages;

package/lib/locale/messages-sma.js

@@ -1499,6 +1499,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/lib/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.22-alpha.0",
+  "version": "56.0.24-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -34,11 +34,11 @@
   ],
   "dependencies": {
     "@ndla/core": "^5.0.2",
-    "@ndla/icons": "^8.0.15-alpha.0",
+    "@ndla/icons": "^8.0.16-alpha.0",
     "@ndla/licenses": "^8.0.2-alpha.0",
-    "@ndla/primitives": "^1.0.20-alpha.0",
-    "@ndla/safelink": "^7.0.20-alpha.0",
-    "@ndla/styled-system": "^0.0.17",
+    "@ndla/primitives": "^1.0.22-alpha.0",
+    "@ndla/safelink": "^7.0.22-alpha.0",
+    "@ndla/styled-system": "^0.0.18",
     "@ndla/util": "^4.1.0",
     "html-react-parser": "^5.1.8",
     "i18next-browser-languagedetector": "^7.1.0"
@@ -53,10 +53,10 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.25",
+    "@ndla/preset-panda": "^0.0.26",
     "@ndla/types-backend": "^0.2.86",
     "@ndla/types-embed": "^5.0.1-alpha.0",
-    "@pandacss/dev": "^0.45.2",
+    "@pandacss/dev": "^0.46.0",
     "css-loader": "^6.7.3",
     "mini-css-extract-plugin": "^2.7.5",
     "sass-loader": "^13.2.2",
@@ -66,5 +66,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d40977f8ad6f9927572a6a62bf6a397189d0cfa4"
+  "gitHead": "7713c89290c9b308be47bce300ad7db4a52a42dd"
 }

package/src/AudioPlayer/Controls.tsx

@@ -90,7 +90,7 @@ const ProgressWrapper = styled("div", {
     flex: "1",
     display: "flex",
     alignItems: "center",
-    gap: "xsmall",
+    gap: "xxsmall",
     gridArea: "track",
     paddingBlock: "xsmall",
     mobileDown: {
@@ -99,6 +99,12 @@ const ProgressWrapper = styled("div", {
   },
 });
 
+const StyledText = styled(Text, {
+  base: {
+    minWidth: "xxlarge",
+  },
+});
+
 const VolumeButton = styled(IconButton, {
   base: {
     gridArea: "volume",
@@ -128,6 +134,13 @@ const StyledSelectRoot = styled(SelectRoot, {
 const StyledSliderControl = styled(SliderControl, {
   base: {
     height: "surface.3xsmall",
+    minWidth: "small",
+  },
+});
+
+const StyledPopoverContent = styled(PopoverContent, {
+  base: {
+    paddingInline: "small",
   },
 });
 
@@ -248,9 +261,9 @@ const Controls = ({ src, title }: Props) => {
           <Forward15Line />
         </Forward15SecButton>
         <ProgressWrapper>
-          <Text textStyle="label.medium" asChild consumeCss>
+          <StyledText textStyle="label.medium" asChild consumeCss>
             <div>{formatTime(currentTime)}</div>
-          </Text>
+          </StyledText>
           <SliderRoot
             value={[audioRef.current?.currentTime ?? 0]}
             defaultValue={[0]}
@@ -273,9 +286,9 @@ const Controls = ({ src, title }: Props) => {
               </SliderThumb>
             </SliderControl>
           </SliderRoot>
-          <Text textStyle="label.medium" asChild consumeCss>
+          <StyledText textStyle="label.medium" asChild consumeCss>
             <div>-{formatTime(remainingTime)}</div>
-          </Text>
+          </StyledText>
         </ProgressWrapper>
         <StyledSelectRoot
           items={speedValues}
@@ -314,7 +327,7 @@ const Controls = ({ src, title }: Props) => {
               <VolumeUpFill />
             </VolumeButton>
           </PopoverTrigger>
-          <PopoverContent>
+          <StyledPopoverContent>
             <SliderRoot
               orientation="vertical"
               value={[volumeValue]}
@@ -334,7 +347,7 @@ const Controls = ({ src, title }: Props) => {
                 </SliderThumb>
               </StyledSliderControl>
             </SliderRoot>
-          </PopoverContent>
+          </StyledPopoverContent>
         </PopoverRoot>
       </ControlsWrapper>
     </div>

package/src/Embed/ConceptEmbed.tsx

@@ -92,7 +92,7 @@ export interface InlineConceptProps extends ConceptProps, BaseProps {
 }
 
 export const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(
-  ({ linkText, copyright, visualElement, lang, children, title, source, ...rest }, ref) => (
+  ({ linkText, copyright, visualElement, previewAlt, lang, children, title, source, ...rest }, ref) => (
     <PopoverRoot>
       {/* @ts-expect-error placing ref and rest on popover trigger somehow removes a bug where the popover target becomes a bit bigger */}
       <PopoverTrigger asChild ref={ref} {...rest}>
@@ -100,7 +100,14 @@ export const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(
       </PopoverTrigger>
       <Portal>
         <StyledPopoverContent>
-          <Concept copyright={copyright} visualElement={visualElement} lang={lang} title={title} source={source}>
+          <Concept
+            copyright={copyright}
+            visualElement={visualElement}
+            lang={lang}
+            title={title}
+            source={source}
+            previewAlt={previewAlt}
+          >
             {children}
           </Concept>
         </StyledPopoverContent>

package/src/Embed/EmbedErrorPlaceholder.tsx

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

package/src/Embed/GlossEmbed.tsx

@@ -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 { ConceptMetaData } from "@ndla/types-embed";
@@ -47,11 +48,13 @@ export const GlossEmbed = ({ embed }: Props) => {
         <PopoverTrigger asChild>
           <InlineTriggerButton>{embed.embedData.linkText}</InlineTriggerButton>
         </PopoverTrigger>
-        <StyledPopoverContent>
-          <Figure>
-            <Gloss glossData={concept.glossData} title={concept.title} audio={audio} />
-          </Figure>
-        </StyledPopoverContent>
+        <Portal>
+          <StyledPopoverContent>
+            <Figure>
+              <Gloss glossData={concept.glossData} title={concept.title} audio={audio} />
+            </Figure>
+          </StyledPopoverContent>
+        </Portal>
       </PopoverRoot>
     );
   }

package/src/Embed/ImageEmbed.tsx

@@ -122,10 +122,10 @@ const ImageWrapper = styled("div", {
       true: {
         border: "1px solid",
         borderColor: "stroke.subtle",
-        borderBottom: "0",
         borderRadius: "xsmall",
-        borderBottomLeftRadius: "0",
-        borderBottomRightRadius: "0",
+        "& img": {
+          borderRadius: "0",
+        },
       },
       false: {},
     },
@@ -240,6 +240,7 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
           src={data.image.imageUrl}
           lang={lang}
           onClick={figureProps?.float ? toggleImageSize : undefined}
+          variant="rounded"
         />
         {!!embedData.align && (
           <ExpandButton

package/src/Embed/InlineTriggerButton.tsx

@@ -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/src/KeyFigure/KeyFigure.tsx

@@ -22,6 +22,7 @@ const StyledImage = styled("img", {
   base: {
     height: "surface.3xsmall",
     width: "surface.3xsmall",
+    borderRadius: "xsmall",
   },
 });
 

package/src/ResourceBox/ResourceBox.tsx

@@ -85,6 +85,7 @@ export const ResourceBox = ({ image, title, caption, url, buttonText }: Props) =
         src={image.src}
         alt={image.alt}
         sizes={`(min-width: ${breakpoints.desktop}) 150px, (max-width: ${breakpoints.tablet} ) 400px, 200px`}
+        variant="rounded"
       />
       <ContentWrapper>
         <Heading textStyle="label.large" fontWeight="bold" asChild consumeCss>