@ndla/ui 56.0.88-alpha.0 → 56.0.90-alpha.0

package/dist/panda.buildinfo.json

@@ -224,8 +224,7 @@
       "backgroundColor]___[value:surface.brand.2.subtle",
       "borderRadius]___[value:xxsmall",
       "borderColor]___[value:stroke.info",
-      "textOverflow]___[value:ellipsis",
-      "whiteSpace]___[value:nowrap",
+      "lineClamp]___[value:1",
       "inset]___[value:0]___[cond:_before",
       "zIndex]___[value:0]___[cond:_before",
       "textStyle]___[value:label.xsmall]___[cond:& a",
@@ -352,6 +351,7 @@
       "whiteSpace]___[value:pre-wrap]___[cond:mobileWideDown<___>_open",
       "maxHeight]___[value:none]___[cond:mobileWideDown<___>_open",
       "display]___[value:none]___[cond:mobileWide",
+      "whiteSpace]___[value:nowrap",
       "textDecoration]___[value:none]___[cond:_focusWithin",
       "display]___[value:none]___[cond:mobileWideDown<___>_disabled",
       "textDecoration]___[value:underline]___[cond:& h3",

package/dist/styles.css

@@ -453,12 +453,11 @@
     border-radius: xxsmall;
 }
 
-  .tov_ellipsis {
-    text-overflow: ellipsis;
-}
-
-  .white-space_nowrap {
-    white-space: nowrap;
+  .lc_1 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
 }
 
   .z_docked {
@@ -545,6 +544,10 @@
     white-space: pre-wrap;
 }
 
+  .white-space_nowrap {
+    white-space: nowrap;
+}
+
   .c_icon\.strong {
     color: var(--colors-icon-strong);
 }

package/es/Embed/ExternalEmbed.js

@@ -68,8 +68,7 @@ const Wrapper = styled("div", {
 });
 const UrlText = styled(Text, {
   base: {
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
+    lineClamp: "1",
     overflow: "hidden"
   }
 });

package/es/Embed/GlossEmbed.js

@@ -57,7 +57,9 @@ export const GlossEmbed = _ref => {
             children: /*#__PURE__*/_jsx(Gloss, {
               glossData: concept.glossData,
               title: concept.title,
-              audio: audio
+              audio: audio,
+              exampleIds: embed.embedData.exampleIds,
+              exampleLangs: embed.embedData.exampleLangs
             })
           })
         })
@@ -70,6 +72,8 @@ export const GlossEmbed = _ref => {
       glossData: concept.glossData,
       title: concept.title,
       audio: audio,
+      exampleIds: embed.embedData.exampleIds,
+      exampleLangs: embed.embedData.exampleLangs,
       variant: "bordered"
     })
   });

package/es/Embed/UuDisclaimerEmbed.js

@@ -9,7 +9,7 @@
 import { useTranslation } from "react-i18next";
 import { Portal } from "@ark-ui/react";
 import { AccessibilityFill, ErrorWarningFill } from "@ndla/icons";
-import { IconButton, PopoverContent, PopoverRoot, PopoverTrigger, PopoverTitle } from "@ndla/primitives";
+import { IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DisclaimerWrapper = styled("div", {
@@ -66,12 +66,8 @@ const UuDisclaimerEmbed = _ref => {
           children: /*#__PURE__*/_jsx(AccessibilityFill, {})
         })
       }), /*#__PURE__*/_jsx(Portal, {
-        children: /*#__PURE__*/_jsxs(PopoverContent, {
-          children: [/*#__PURE__*/_jsx(PopoverTitle, {
-            children: t("uuDisclaimer.title")
-          }), /*#__PURE__*/_jsx("div", {
-            children: transformedDisclaimer
-          })]
+        children: /*#__PURE__*/_jsx(PopoverContent, {
+          children: transformedDisclaimer
         })
       })]
     }), /*#__PURE__*/_jsx("div", {

package/lib/Embed/ExternalEmbed.js

@@ -75,8 +75,7 @@ const Wrapper = (0, _jsx2.styled)("div", {
 });
 const UrlText = (0, _jsx2.styled)(_primitives.Text, {
   base: {
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
+    lineClamp: "1",
     overflow: "hidden"
   }
 });

package/lib/Embed/GlossEmbed.js

@@ -64,7 +64,9 @@ const GlossEmbed = _ref => {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Gloss.Gloss, {
               glossData: concept.glossData,
               title: concept.title,
-              audio: audio
+              audio: audio,
+              exampleIds: embed.embedData.exampleIds,
+              exampleLangs: embed.embedData.exampleLangs
             })
           })
         })
@@ -77,6 +79,8 @@ const GlossEmbed = _ref => {
       glossData: concept.glossData,
       title: concept.title,
       audio: audio,
+      exampleIds: embed.embedData.exampleIds,
+      exampleLangs: embed.embedData.exampleLangs,
       variant: "bordered"
     })
   });

package/lib/Embed/UuDisclaimerEmbed.js

@@ -72,12 +72,8 @@ const UuDisclaimerEmbed = _ref => {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.AccessibilityFill, {})
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Portal, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.PopoverContent, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.PopoverTitle, {
-            children: t("uuDisclaimer.title")
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            children: transformedDisclaimer
-          })]
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.PopoverContent, {
+          children: transformedDisclaimer
         })
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/lib/types.d.ts

@@ -38,4 +38,5 @@ export interface Article {
     footNotes: Array<FootNote>;
     copyright?: Copyright;
     published: string;
+    disclaimer?: ReactNode;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.88-alpha.0",
+  "version": "56.0.90-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -58,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "695e6f669f22dfac4d5fef96fd0463b690bb7973"
+  "gitHead": "5f9b8e9db029204a71d9ba5fbd45e9f5ce4343ba"
 }

package/src/Embed/ExternalEmbed.tsx

@@ -77,8 +77,7 @@ const Wrapper = styled("div", {
 
 const UrlText = styled(Text, {
   base: {
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
+    lineClamp: "1",
     overflow: "hidden",
   },
 });

package/src/Embed/GlossEmbed.tsx

@@ -53,7 +53,13 @@ export const GlossEmbed = ({ embed }: Props) => {
         <Portal>
           <StyledPopoverContent ref={contentRef}>
             <Figure>
-              <Gloss glossData={concept.glossData} title={concept.title} audio={audio} />
+              <Gloss
+                glossData={concept.glossData}
+                title={concept.title}
+                audio={audio}
+                exampleIds={embed.embedData.exampleIds}
+                exampleLangs={embed.embedData.exampleLangs}
+              />
             </Figure>
           </StyledPopoverContent>
         </Portal>
@@ -63,7 +69,14 @@ export const GlossEmbed = ({ embed }: Props) => {
 
   return (
     <Figure data-embed-type="gloss">
-      <Gloss glossData={concept.glossData} title={concept.title} audio={audio} variant="bordered" />
+      <Gloss
+        glossData={concept.glossData}
+        title={concept.title}
+        audio={audio}
+        exampleIds={embed.embedData.exampleIds}
+        exampleLangs={embed.embedData.exampleLangs}
+        variant="bordered"
+      />
     </Figure>
   );
 };

package/src/Embed/UuDisclaimerEmbed.tsx

@@ -10,7 +10,7 @@ import { type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { Portal } from "@ark-ui/react";
 import { AccessibilityFill, ErrorWarningFill } from "@ndla/icons";
-import { IconButton, PopoverContent, PopoverRoot, PopoverTrigger, PopoverTitle } from "@ndla/primitives";
+import { IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { UuDisclaimerMetaData } from "@ndla/types-embed";
 
@@ -70,10 +70,7 @@ const UuDisclaimerEmbed = ({ embed, transformedDisclaimer, children }: Props) =>
           </StyledIconButton>
         </PopoverTrigger>
         <Portal>
-          <PopoverContent>
-            <PopoverTitle>{t("uuDisclaimer.title")}</PopoverTitle>
-            <div>{transformedDisclaimer}</div>
-          </PopoverContent>
+          <PopoverContent>{transformedDisclaimer}</PopoverContent>
         </Portal>
       </PopoverRoot>
       <div data-uu-content="">{children}</div>

package/src/types.ts

@@ -45,4 +45,5 @@ export interface Article {
   footNotes: Array<FootNote>;
   copyright?: Copyright;
   published: string;
+  disclaimer?: ReactNode;
 }