@ndla/ui 56.0.60-alpha.0 → 56.0.62-alpha.0

package/dist/panda.buildinfo.json

@@ -205,6 +205,26 @@
       "width]___[value:surface.xlarge",
       "maxHeight]___[value:50vh",
       "overflowY]___[value:auto",
+      "overflow]___[value:visible",
+      "borderBottom]___[value:1px solid",
+      "borderStyle]___[value:dashed",
+      "borderColor]___[value:stroke.hover",
+      "paddingBlockStart]___[value:5xsmall",
+      "width]___[value:fit-content",
+      "borderColor]___[value:text.link]___[cond:_hover",
+      "background]___[value:surface.actionSubtle.hover]___[cond:_hover",
+      "borderColor]___[value:text.link]___[cond:_active",
+      "background]___[value:surface.actionSubtle.active]___[cond:_active",
+      "outline]___[value:none]___[cond:_focusVisible",
+      "borderRadius]___[value:0]___[cond:_focusVisible",
+      "content]___[value:\"\"]___[cond:_focusVisible<___>_after",
+      "position]___[value:absolute]___[cond:_focusVisible<___>_after",
+      "inset]___[value:0]___[cond:_focusVisible<___>_after",
+      "outline]___[value:3px]___[cond:_focusVisible<___>_after",
+      "borderRadius]___[value:xsmall]___[cond:_focusVisible<___>_after",
+      "outlineColor]___[value:stroke.default]___[cond:_focusVisible<___>_after",
+      "outlineOffset]___[value:3px]___[cond:_focusVisible<___>_after",
+      "outlineStyle]___[value:solid]___[cond:_focusVisible<___>_after",
       "marginBlockEnd]___[value:xsmall",
       "background]___[value:background.subtle",
       "height]___[value:5xlarge]___[cond:& svg",
@@ -237,26 +257,6 @@
       "transitionProperty]___[value:transform]___[cond:& svg",
       "transitionDuration]___[value:normal]___[cond:& svg",
       "transitionTimingFunction]___[value:ease-out]___[cond:& svg",
-      "overflow]___[value:visible",
-      "borderBottom]___[value:1px solid",
-      "borderStyle]___[value:dashed",
-      "borderColor]___[value:stroke.hover",
-      "paddingBlockStart]___[value:5xsmall",
-      "width]___[value:fit-content",
-      "borderColor]___[value:text.link]___[cond:_hover",
-      "background]___[value:surface.actionSubtle.hover]___[cond:_hover",
-      "borderColor]___[value:text.link]___[cond:_active",
-      "background]___[value:surface.actionSubtle.active]___[cond:_active",
-      "outline]___[value:none]___[cond:_focusVisible",
-      "borderRadius]___[value:0]___[cond:_focusVisible",
-      "content]___[value:\"\"]___[cond:_focusVisible<___>_after",
-      "position]___[value:absolute]___[cond:_focusVisible<___>_after",
-      "inset]___[value:0]___[cond:_focusVisible<___>_after",
-      "outline]___[value:3px]___[cond:_focusVisible<___>_after",
-      "borderRadius]___[value:xsmall]___[cond:_focusVisible<___>_after",
-      "outlineColor]___[value:stroke.default]___[cond:_focusVisible<___>_after",
-      "outlineOffset]___[value:3px]___[cond:_focusVisible<___>_after",
-      "outlineStyle]___[value:solid]___[cond:_focusVisible<___>_after",
       "paddingInlineStart]___[value:4xsmall",
       "color]___[value:text.link",
       "whiteSpace]___[value:nowrap",

package/dist/styles.css

@@ -461,6 +461,22 @@
     max-height: 50vh;
 }
 
+  .ov_visible {
+    overflow: visible;
+}
+
+  .bd-b_1px_solid {
+    border-bottom: 1px solid;
+}
+
+  .pbs_5xsmall {
+    padding-block-start: var(--spacing-5xsmall);
+}
+
+  .w_fit-content {
+    width: fit-content;
+}
+
   .mbe_xsmall {
     margin-block-end: var(--spacing-xsmall);
 }
@@ -497,22 +513,6 @@
     border-radius: var(--radii-large);
 }
 
-  .ov_visible {
-    overflow: visible;
-}
-
-  .bd-b_1px_solid {
-    border-bottom: 1px solid;
-}
-
-  .pbs_5xsmall {
-    padding-block-start: var(--spacing-5xsmall);
-}
-
-  .w_fit-content {
-    width: fit-content;
-}
-
   .ps_4xsmall {
     padding-inline-start: var(--spacing-4xsmall);
 }
@@ -717,6 +717,14 @@
     overflow-y: auto;
 }
 
+  .border-style_dashed {
+    border-style: dashed;
+}
+
+  .bd-c_stroke\.hover {
+    border-color: var(--colors-stroke-hover);
+}
+
   .top_xsmall {
     top: var(--spacing-xsmall);
 }
@@ -748,14 +756,6 @@
     background-color: var(--colors-surface-action);
 }
 
-  .border-style_dashed {
-    border-style: dashed;
-}
-
-  .bd-c_stroke\.hover {
-    border-color: var(--colors-stroke-hover);
-}
-
   .mb_medium {
     margin-bottom: var(--spacing-medium);
 }

package/es/Embed/ConceptEmbed.js

@@ -11,9 +11,9 @@ import { forwardRef, useMemo, useRef } from "react";
 import { Portal } from "@ark-ui/react";
 import { PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
+import { ConceptInlineTriggerButton } from "./ConceptInlineTriggerButton";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import { GlossEmbed } from "./GlossEmbed";
-import { InlineTriggerButton } from "./InlineTriggerButton";
 import { Concept } from "../Concept/Concept";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StyledPopoverContent = styled(PopoverContent, {
@@ -97,7 +97,7 @@ export const InlineConcept = /*#__PURE__*/forwardRef((_ref2, ref) => {
       asChild: true,
       ref: ref,
       ...rest,
-      children: /*#__PURE__*/_jsx(InlineTriggerButton, {
+      children: /*#__PURE__*/_jsx(ConceptInlineTriggerButton, {
         children: linkText
       })
     }), /*#__PURE__*/_jsx(Portal, {

package/es/Embed/ConceptInlineTriggerButton.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2024-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 { styled } from "@ndla/styled-system/jsx";
+import { InlineTriggerButton } from "./InlineTriggerButton";
+export const ConceptInlineTriggerButton = styled(InlineTriggerButton, {
+  base: {
+    position: "relative",
+    overflow: "visible",
+    borderBottom: "1px solid",
+    borderStyle: "dashed",
+    borderColor: "stroke.hover",
+    paddingBlockStart: "5xsmall",
+    width: "fit-content",
+    cursor: "pointer",
+    _hover: {
+      borderColor: "text.link",
+      background: "surface.actionSubtle.hover"
+    },
+    _active: {
+      borderColor: "text.link",
+      background: "surface.actionSubtle.active"
+    },
+    // The global focus ring forces the border-radius to be xsmall, causing the dashed border to be cut off. This is a workaround.
+    _focusVisible: {
+      outline: "none",
+      borderRadius: "0",
+      _after: {
+        content: '""',
+        position: "absolute",
+        inset: "0",
+        outline: "3px",
+        borderRadius: "xsmall",
+        outlineColor: "stroke.default",
+        outlineOffset: "3px",
+        outlineStyle: "solid"
+      }
+    }
+  }
+});

package/es/Embed/GlossEmbed.js

@@ -10,8 +10,8 @@ import { useRef } from "react";
 import { Portal } from "@ark-ui/react";
 import { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
+import { ConceptInlineTriggerButton } from "./ConceptInlineTriggerButton";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { InlineTriggerButton } from "./InlineTriggerButton";
 import { Gloss } from "../Gloss";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StyledPopoverContent = styled(PopoverContent, {
@@ -47,7 +47,7 @@ export const GlossEmbed = _ref => {
       initialFocusEl: () => contentRef.current,
       children: [/*#__PURE__*/_jsx(PopoverTrigger, {
         asChild: true,
-        children: /*#__PURE__*/_jsx(InlineTriggerButton, {
+        children: /*#__PURE__*/_jsx(ConceptInlineTriggerButton, {
           children: embed.embedData.linkText
         })
       }), /*#__PURE__*/_jsx(Portal, {

package/es/Embed/InlineTriggerButton.js

@@ -11,39 +11,7 @@ import { styled } from "@ndla/styled-system/jsx";
 import { composeRefs } from "@ndla/util";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledSpan = styled("span", {
-  base: {
-    position: "relative",
-    overflow: "visible",
-    borderBottom: "1px solid",
-    borderStyle: "dashed",
-    borderColor: "stroke.hover",
-    paddingBlockStart: "5xsmall",
-    width: "fit-content",
-    cursor: "pointer",
-    _hover: {
-      borderColor: "text.link",
-      background: "surface.actionSubtle.hover"
-    },
-    _active: {
-      borderColor: "text.link",
-      background: "surface.actionSubtle.active"
-    },
-    // The global focus ring forces the border-radius to be xsmall, causing the dashed border to be cut off. This is a workaround.
-    _focusVisible: {
-      outline: "none",
-      borderRadius: "0",
-      _after: {
-        content: '""',
-        position: "absolute",
-        inset: "0",
-        outline: "3px",
-        borderRadius: "xsmall",
-        outlineColor: "stroke.default",
-        outlineOffset: "3px",
-        outlineStyle: "solid"
-      }
-    }
-  }
+  base: {}
 });
 export const InlineTriggerButton = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {

package/lib/Embed/ConceptEmbed.js

@@ -9,9 +9,9 @@ var _react = require("react");
 var _react2 = require("@ark-ui/react");
 var _primitives = require("@ndla/primitives");
 var _jsx2 = require("@ndla/styled-system/jsx");
+var _ConceptInlineTriggerButton = require("./ConceptInlineTriggerButton");
 var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
 var _GlossEmbed = require("./GlossEmbed");
-var _InlineTriggerButton = require("./InlineTriggerButton");
 var _Concept = require("../Concept/Concept");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -105,7 +105,7 @@ const InlineConcept = exports.InlineConcept = /*#__PURE__*/(0, _react.forwardRef
       asChild: true,
       ref: ref,
       ...rest,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlineTriggerButton.InlineTriggerButton, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConceptInlineTriggerButton.ConceptInlineTriggerButton, {
         children: linkText
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Portal, {

package/lib/Embed/ConceptInlineTriggerButton.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+/// <reference types="react" />
+export declare const ConceptInlineTriggerButton: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLSpanElement>>, {}>;

package/lib/Embed/ConceptInlineTriggerButton.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ConceptInlineTriggerButton = void 0;
+var _jsx = require("@ndla/styled-system/jsx");
+var _InlineTriggerButton = require("./InlineTriggerButton");
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const ConceptInlineTriggerButton = exports.ConceptInlineTriggerButton = (0, _jsx.styled)(_InlineTriggerButton.InlineTriggerButton, {
+  base: {
+    position: "relative",
+    overflow: "visible",
+    borderBottom: "1px solid",
+    borderStyle: "dashed",
+    borderColor: "stroke.hover",
+    paddingBlockStart: "5xsmall",
+    width: "fit-content",
+    cursor: "pointer",
+    _hover: {
+      borderColor: "text.link",
+      background: "surface.actionSubtle.hover"
+    },
+    _active: {
+      borderColor: "text.link",
+      background: "surface.actionSubtle.active"
+    },
+    // The global focus ring forces the border-radius to be xsmall, causing the dashed border to be cut off. This is a workaround.
+    _focusVisible: {
+      outline: "none",
+      borderRadius: "0",
+      _after: {
+        content: '""',
+        position: "absolute",
+        inset: "0",
+        outline: "3px",
+        borderRadius: "xsmall",
+        outlineColor: "stroke.default",
+        outlineOffset: "3px",
+        outlineStyle: "solid"
+      }
+    }
+  }
+});

package/lib/Embed/GlossEmbed.js

@@ -8,8 +8,8 @@ var _react = require("react");
 var _react2 = require("@ark-ui/react");
 var _primitives = require("@ndla/primitives");
 var _jsx2 = require("@ndla/styled-system/jsx");
+var _ConceptInlineTriggerButton = require("./ConceptInlineTriggerButton");
 var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
-var _InlineTriggerButton = require("./InlineTriggerButton");
 var _Gloss = require("../Gloss");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -54,7 +54,7 @@ const GlossEmbed = _ref => {
       initialFocusEl: () => contentRef.current,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.PopoverTrigger, {
         asChild: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlineTriggerButton.InlineTriggerButton, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConceptInlineTriggerButton.ConceptInlineTriggerButton, {
           children: embed.embedData.linkText
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Portal, {

package/lib/Embed/InlineTriggerButton.js

@@ -17,39 +17,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 
 const StyledSpan = (0, _jsx2.styled)("span", {
-  base: {
-    position: "relative",
-    overflow: "visible",
-    borderBottom: "1px solid",
-    borderStyle: "dashed",
-    borderColor: "stroke.hover",
-    paddingBlockStart: "5xsmall",
-    width: "fit-content",
-    cursor: "pointer",
-    _hover: {
-      borderColor: "text.link",
-      background: "surface.actionSubtle.hover"
-    },
-    _active: {
-      borderColor: "text.link",
-      background: "surface.actionSubtle.active"
-    },
-    // The global focus ring forces the border-radius to be xsmall, causing the dashed border to be cut off. This is a workaround.
-    _focusVisible: {
-      outline: "none",
-      borderRadius: "0",
-      _after: {
-        content: '""',
-        position: "absolute",
-        inset: "0",
-        outline: "3px",
-        borderRadius: "xsmall",
-        outlineColor: "stroke.default",
-        outlineOffset: "3px",
-        outlineStyle: "solid"
-      }
-    }
-  }
+  base: {}
 });
 const InlineTriggerButton = exports.InlineTriggerButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.60-alpha.0",
+  "version": "56.0.62-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,7 +33,7 @@
   ],
   "dependencies": {
     "@ndla/core": "^5.0.2",
-    "@ndla/icons": "^8.0.35-alpha.0",
+    "@ndla/icons": "^8.0.37-alpha.0",
     "@ndla/licenses": "^8.0.3-alpha.0",
     "@ndla/primitives": "^1.0.49-alpha.0",
     "@ndla/safelink": "^7.0.50-alpha.0",
@@ -58,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "eea1c99bf2bc62e0767c1ed49d38accbcff2d23f"
+  "gitHead": "faf01f6c462480fde97a45881d27893bac3d4f69"
 }

package/src/Embed/ConceptEmbed.tsx

@@ -12,9 +12,9 @@ import { Portal } from "@ark-ui/react";
 import { PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { ConceptMetaData } from "@ndla/types-embed";
+import { ConceptInlineTriggerButton } from "./ConceptInlineTriggerButton";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
 import { GlossEmbed } from "./GlossEmbed";
-import { InlineTriggerButton } from "./InlineTriggerButton";
 import { RenderContext } from "./types";
 import { Concept, ConceptProps } from "../Concept/Concept";
 
@@ -99,7 +99,7 @@ export const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(
       <PopoverRoot initialFocusEl={() => contentRef.current}>
         {/* @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}>
-          <InlineTriggerButton>{linkText}</InlineTriggerButton>
+          <ConceptInlineTriggerButton>{linkText}</ConceptInlineTriggerButton>
         </PopoverTrigger>
         <Portal>
           <StyledPopoverContent ref={contentRef}>

package/src/Embed/ConceptInlineTriggerButton.tsx

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2024-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 { styled } from "@ndla/styled-system/jsx";
+import { InlineTriggerButton } from "./InlineTriggerButton";
+
+export const ConceptInlineTriggerButton = styled(InlineTriggerButton, {
+  base: {
+    position: "relative",
+    overflow: "visible",
+    borderBottom: "1px solid",
+    borderStyle: "dashed",
+    borderColor: "stroke.hover",
+    paddingBlockStart: "5xsmall",
+    width: "fit-content",
+    cursor: "pointer",
+    _hover: {
+      borderColor: "text.link",
+      background: "surface.actionSubtle.hover",
+    },
+    _active: {
+      borderColor: "text.link",
+      background: "surface.actionSubtle.active",
+    },
+    // The global focus ring forces the border-radius to be xsmall, causing the dashed border to be cut off. This is a workaround.
+    _focusVisible: {
+      outline: "none",
+      borderRadius: "0",
+      _after: {
+        content: '""',
+        position: "absolute",
+        inset: "0",
+        outline: "3px",
+        borderRadius: "xsmall",
+        outlineColor: "stroke.default",
+        outlineOffset: "3px",
+        outlineStyle: "solid",
+      },
+    },
+  },
+});

package/src/Embed/GlossEmbed.tsx

@@ -11,8 +11,8 @@ 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";
+import { ConceptInlineTriggerButton } from "./ConceptInlineTriggerButton";
 import EmbedErrorPlaceholder from "./EmbedErrorPlaceholder";
-import { InlineTriggerButton } from "./InlineTriggerButton";
 import { Gloss } from "../Gloss";
 
 interface Props {
@@ -48,7 +48,7 @@ export const GlossEmbed = ({ embed }: Props) => {
     return (
       <PopoverRoot initialFocusEl={() => contentRef.current}>
         <PopoverTrigger asChild>
-          <InlineTriggerButton>{embed.embedData.linkText}</InlineTriggerButton>
+          <ConceptInlineTriggerButton>{embed.embedData.linkText}</ConceptInlineTriggerButton>
         </PopoverTrigger>
         <Portal>
           <StyledPopoverContent ref={contentRef}>

package/src/Embed/InlineTriggerButton.tsx

@@ -10,41 +10,7 @@ import { ComponentPropsWithRef, KeyboardEvent, forwardRef, useCallback, useRef }
 import { styled } from "@ndla/styled-system/jsx";
 import { composeRefs } from "@ndla/util";
 
-const StyledSpan = styled("span", {
-  base: {
-    position: "relative",
-    overflow: "visible",
-    borderBottom: "1px solid",
-    borderStyle: "dashed",
-    borderColor: "stroke.hover",
-    paddingBlockStart: "5xsmall",
-    width: "fit-content",
-    cursor: "pointer",
-    _hover: {
-      borderColor: "text.link",
-      background: "surface.actionSubtle.hover",
-    },
-    _active: {
-      borderColor: "text.link",
-      background: "surface.actionSubtle.active",
-    },
-    // The global focus ring forces the border-radius to be xsmall, causing the dashed border to be cut off. This is a workaround.
-    _focusVisible: {
-      outline: "none",
-      borderRadius: "0",
-      _after: {
-        content: '""',
-        position: "absolute",
-        inset: "0",
-        outline: "3px",
-        borderRadius: "xsmall",
-        outlineColor: "stroke.default",
-        outlineOffset: "3px",
-        outlineStyle: "solid",
-      },
-    },
-  },
-});
+const StyledSpan = styled("span", { base: {} });
 
 export const InlineTriggerButton = forwardRef<HTMLSpanElement, ComponentPropsWithRef<"span">>(
   ({ onClick, ...props }, ref) => {