@ndla/ui 56.0.31-alpha.0 → 56.0.33-alpha.0

package/dist/panda.buildinfo.json

@@ -322,17 +322,17 @@
       "inset]___[value:0]___[cond:_after",
       "transitionProperty]___[value:opacity]___[cond:_after",
       "transitionDuration]___[value:slow]___[cond:_after",
-      "transitionTimingFunction]___[value:ease-out]___[cond:_after",
-      "gradientFrom]___[value:surface.default/00]___[cond:_after",
-      "gradientTo]___[value:surface.default]___[cond:_after",
+      "transitionTimingFunction]___[value:ease-in-out]___[cond:_after",
+      "gradientFrom]___[value:surface.default/20]___[cond:_after",
+      "gradientTo]___[value:surface.default/95]___[cond:_after",
       "backgroundGradient]___[value:to-b]___[cond:_after",
       "opacity]___[value:1]___[cond:_after",
       "zIndex]___[value:base]___[cond:_after",
+      "pointerEvents]___[value:none]___[cond:_after",
       "overflow]___[value:visible]___[cond:_print",
       "display]___[value:none]___[cond:_print<___>_after",
       "paddingBlockEnd]___[value:xsmall]___[cond:_open",
       "opacity]___[value:0]___[cond:_open<___>_after",
-      "zIndex]___[value:hide]___[cond:_open<___>_after",
       "bottom]___[value:-medium",
       "transitionTimingFunction]___[value:ease-in-out]___[cond:& svg",
       "transitionDuration]___[value:fast]___[cond:& svg",

package/dist/styles.css

@@ -1,6 +1,7 @@
 @layer utilities {
   @layer compositions {
     .textStyle_body\.medium {
+      letter-spacing: normal;
       font-family: var(--fonts-sans);
       font-weight: var(--font-weights-normal);
       font-size: var(--font-sizes-small);
@@ -13,6 +14,7 @@
 }
 
     .textStyle_body\.large {
+      letter-spacing: normal;
       font-family: var(--fonts-sans);
       font-weight: var(--font-weights-normal);
       font-size: var(--font-sizes-medium);
@@ -25,6 +27,7 @@
 }
 
     .textStyle_label\.medium {
+      letter-spacing: normal;
       font-family: var(--fonts-sans);
       font-weight: var(--font-weights-normal);
       font-size: var(--font-sizes-small);
@@ -37,6 +40,7 @@
 }
 
     .textStyle_label\.large {
+      letter-spacing: normal;
       font-family: var(--fonts-sans);
       font-weight: var(--font-weights-normal);
       font-size: var(--font-sizes-medium);
@@ -49,6 +53,7 @@
 }
 
     .textStyle_heading\.large {
+      letter-spacing: -0.01em;
       font-family: var(--fonts-sans);
       font-weight: var(--font-weights-bold);
       font-size: var(--font-sizes-4xlarge);
@@ -61,6 +66,7 @@
 }
 
     .textStyle_title\.medium {
+      letter-spacing: -0.01em;
       font-family: var(--fonts-sans);
       font-weight: var(--font-weights-bold);
       font-size: var(--font-sizes-large);
@@ -73,6 +79,7 @@
 }
 
     .\[\&_a\]\:textStyle_label\.xsmall a {
+      letter-spacing: normal;
       font-family: var(--fonts-sans);
       font-weight: var(--font-weights-normal);
       font-size: var(--font-sizes-xxsmall);
@@ -82,6 +89,30 @@
     .\[\&_a\]\:textStyle_label\.xsmall a:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
       font-size: calc(var(--font-sizes-xxsmall) * 1.11);
       line-height: calc(var(--line-heights-xxsmall) * 1.11);
+}
+
+    @media screen and (max-width: 29.7475rem) {
+      .textStyle_heading\.large {
+        font-size: var(--font-sizes-3xlarge);
+        line-height: var(--line-heights-3xlarge);
+}
+
+      .textStyle_heading\.large:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+        font-size: calc(var(--font-sizes-3xlarge) * 1.11);
+        line-height: calc(var(--line-heights-3xlarge) * 1.11);
+}
+}
+
+    @media screen and (max-width: 29.7475rem) {
+      .textStyle_title\.medium {
+        font-size: var(--font-sizes-medium);
+        line-height: var(--line-heights-small);
+}
+
+      .textStyle_title\.medium:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+        font-size: calc(var(--font-sizes-medium) * 1.11);
+        line-height: calc(var(--line-heights-small) * 1.11);
+}
 }
 }
 
@@ -1120,13 +1151,14 @@
     inset: 0;
 }
 
-  .after\:grad-from_surface\.default\/00::after {
-    --mix---gradient-from: color-mix(in srgb, var(--colors-surface-default) 00%, transparent);
+  .after\:grad-from_surface\.default\/20::after {
+    --mix---gradient-from: color-mix(in srgb, var(--colors-surface-default) 20%, transparent);
     --gradient-from: var(--mix---gradient-from, var(--colors-surface-default));
 }
 
-  .after\:grad-to_surface\.default::after {
-    --gradient-to: var(--colors-surface-default);
+  .after\:grad-to_surface\.default\/95::after {
+    --mix---gradient-to: color-mix(in srgb, var(--colors-surface-default) 95%, transparent);
+    --gradient-to: var(--mix---gradient-to, var(--colors-surface-default));
 }
 
   .after\:bg-grad_to-b::after {
@@ -1143,6 +1175,10 @@
     z-index: var(--z-index-base);
 }
 
+  .after\:pointer-events_none::after {
+    pointer-events: none;
+}
+
   .open\:pbe_xsmall:is([open], [data-open], [data-state="open"]) {
     padding-block-end: var(--spacing-xsmall);
 }
@@ -1272,12 +1308,7 @@
     transition-duration: var(--durations-slow);
 }
 
-  .after\:trs-tmf_ease-out::after {
-    --transition-easing: ease-out;
-    transition-timing-function: ease-out;
-}
-
-  .\[\&_svg\]\:trs-tmf_ease-in-out svg {
+  .after\:trs-tmf_ease-in-out::after,.\[\&_svg\]\:trs-tmf_ease-in-out svg {
     --transition-easing: ease-in-out;
     transition-timing-function: ease-in-out;
 }
@@ -1375,10 +1406,6 @@
     opacity: 0;
 }
 
-  .open\:after\:z_hide:is([open], [data-open], [data-state="open"])::after {
-    z-index: var(--z-index-hide);
-}
-
   .open\:\[\&_svg\]\:trf_rotate\(180deg\):is([open], [data-open], [data-state="open"]) svg {
     transform: rotate(180deg);
 }

package/es/Embed/ConceptEmbed.js

@@ -7,7 +7,7 @@
  */
 
 import parse from "html-react-parser";
-import { forwardRef, useMemo } from "react";
+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";
@@ -89,7 +89,9 @@ export const InlineConcept = /*#__PURE__*/forwardRef((_ref2, ref) => {
     source,
     ...rest
   } = _ref2;
+  const contentRef = useRef(null);
   return /*#__PURE__*/_jsxs(PopoverRoot, {
+    initialFocusEl: () => contentRef.current,
     children: [/*#__PURE__*/_jsx(PopoverTrigger, {
       asChild: true,
       ref: ref,
@@ -99,11 +101,12 @@ export const InlineConcept = /*#__PURE__*/forwardRef((_ref2, ref) => {
       })
     }), /*#__PURE__*/_jsx(Portal, {
       children: /*#__PURE__*/_jsx(StyledPopoverContent, {
+        ref: contentRef,
         children: /*#__PURE__*/_jsx(Concept, {
           copyright: copyright,
           visualElement: visualElement,
-          lang: lang,
           title: title,
+          lang: lang,
           source: source,
           previewAlt: previewAlt,
           children: children

package/es/Embed/GlossEmbed.js

@@ -6,6 +6,7 @@
  *
  */
 
+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";
@@ -22,6 +23,7 @@ export const GlossEmbed = _ref => {
   let {
     embed
   } = _ref;
+  const contentRef = useRef(null);
   if (embed.status === "error" && embed.embedData.type === "inline") {
     return /*#__PURE__*/_jsx("span", {
       children: embed.embedData.linkText
@@ -42,6 +44,7 @@ export const GlossEmbed = _ref => {
   } : undefined;
   if (embed.embedData.type === "inline") {
     return /*#__PURE__*/_jsxs(PopoverRoot, {
+      initialFocusEl: () => contentRef.current,
       children: [/*#__PURE__*/_jsx(PopoverTrigger, {
         asChild: true,
         children: /*#__PURE__*/_jsx(InlineTriggerButton, {
@@ -49,6 +52,7 @@ export const GlossEmbed = _ref => {
         })
       }), /*#__PURE__*/_jsx(Portal, {
         children: /*#__PURE__*/_jsx(StyledPopoverContent, {
+          ref: contentRef,
           children: /*#__PURE__*/_jsx(Figure, {
             children: /*#__PURE__*/_jsx(Gloss, {
               glossData: concept.glossData,

package/es/FactBox/FactBox.js

@@ -57,13 +57,13 @@ const StyledContent = styled("div", {
       inset: "0",
       transitionProperty: "opacity",
       transitionDuration: "slow",
-      transitionTimingFunction: "ease-out",
-      // TODO: Consider improving this gradient. It's a little light up top.
-      gradientFrom: "surface.default/00",
-      gradientTo: "surface.default",
+      transitionTimingFunction: "ease-in-out",
+      gradientFrom: "surface.default/20",
+      gradientTo: "surface.default/95",
       backgroundGradient: "to-b",
       opacity: "1",
-      zIndex: "base"
+      zIndex: "base",
+      pointerEvents: "none"
     },
     _print: {
       overflow: "visible",
@@ -74,8 +74,7 @@ const StyledContent = styled("div", {
     _open: {
       paddingBlockEnd: "xsmall",
       _after: {
-        opacity: "0",
-        zIndex: "hide"
+        opacity: "0"
       }
     }
   }

package/lib/Embed/ConceptEmbed.js

@@ -97,7 +97,9 @@ const InlineConcept = exports.InlineConcept = /*#__PURE__*/(0, _react.forwardRef
     source,
     ...rest
   } = _ref2;
+  const contentRef = (0, _react.useRef)(null);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.PopoverRoot, {
+    initialFocusEl: () => contentRef.current,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.PopoverTrigger, {
       asChild: true,
       ref: ref,
@@ -107,11 +109,12 @@ const InlineConcept = exports.InlineConcept = /*#__PURE__*/(0, _react.forwardRef
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Portal, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPopoverContent, {
+        ref: contentRef,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Concept.Concept, {
           copyright: copyright,
           visualElement: visualElement,
-          lang: lang,
           title: title,
+          lang: lang,
           source: source,
           previewAlt: previewAlt,
           children: children

package/lib/Embed/GlossEmbed.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GlossEmbed = void 0;
-var _react = require("@ark-ui/react");
+var _react = require("react");
+var _react2 = require("@ark-ui/react");
 var _primitives = require("@ndla/primitives");
 var _jsx2 = require("@ndla/styled-system/jsx");
 var _EmbedErrorPlaceholder = _interopRequireDefault(require("./EmbedErrorPlaceholder"));
@@ -29,6 +30,7 @@ const GlossEmbed = _ref => {
   let {
     embed
   } = _ref;
+  const contentRef = (0, _react.useRef)(null);
   if (embed.status === "error" && embed.embedData.type === "inline") {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       children: embed.embedData.linkText
@@ -49,13 +51,15 @@ const GlossEmbed = _ref => {
   } : undefined;
   if (embed.embedData.type === "inline") {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.PopoverRoot, {
+      initialFocusEl: () => contentRef.current,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.PopoverTrigger, {
         asChild: true,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlineTriggerButton.InlineTriggerButton, {
           children: embed.embedData.linkText
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Portal, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Portal, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPopoverContent, {
+          ref: contentRef,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Figure, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Gloss.Gloss, {
               glossData: concept.glossData,

package/lib/FactBox/FactBox.js

@@ -63,13 +63,13 @@ const StyledContent = (0, _jsx2.styled)("div", {
       inset: "0",
       transitionProperty: "opacity",
       transitionDuration: "slow",
-      transitionTimingFunction: "ease-out",
-      // TODO: Consider improving this gradient. It's a little light up top.
-      gradientFrom: "surface.default/00",
-      gradientTo: "surface.default",
+      transitionTimingFunction: "ease-in-out",
+      gradientFrom: "surface.default/20",
+      gradientTo: "surface.default/95",
       backgroundGradient: "to-b",
       opacity: "1",
-      zIndex: "base"
+      zIndex: "base",
+      pointerEvents: "none"
     },
     _print: {
       overflow: "visible",
@@ -80,8 +80,7 @@ const StyledContent = (0, _jsx2.styled)("div", {
     _open: {
       paddingBlockEnd: "xsmall",
       _after: {
-        opacity: "0",
-        zIndex: "hide"
+        opacity: "0"
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.31-alpha.0",
+  "version": "56.0.33-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -10,9 +10,8 @@
   "scripts": {
     "build": "node ../../scripts/build.js package",
     "build:types": "tsc -p tsconfig.build.json",
-    "prepublish": "concurrently 'yarn build:types' 'yarn build:css' 'yarn build:panda'",
-    "build:panda": "mkdir -p dist && concurrently 'panda cssgen --minimal --outfile dist/styles.css' 'panda ship --outfile dist/panda.buildinfo.json'",
-    "build:css": "webpack && cp ./dist/*.css ./es && cp ./dist/*.css ./lib"
+    "prepublish": "concurrently 'yarn build:types' 'yarn build:panda'",
+    "build:panda": "mkdir -p dist && concurrently 'panda cssgen --minimal --outfile dist/styles.css' 'panda ship --outfile dist/panda.buildinfo.json'"
   },
   "repository": {
     "type": "git",
@@ -34,10 +33,10 @@
   ],
   "dependencies": {
     "@ndla/core": "^5.0.2",
-    "@ndla/icons": "^8.0.21-alpha.0",
+    "@ndla/icons": "^8.0.23-alpha.0",
     "@ndla/licenses": "^8.0.3-alpha.0",
-    "@ndla/primitives": "^1.0.28-alpha.0",
-    "@ndla/safelink": "^7.0.28-alpha.0",
+    "@ndla/primitives": "^1.0.30-alpha.0",
+    "@ndla/safelink": "^7.0.30-alpha.0",
     "@ndla/styled-system": "^0.0.22",
     "@ndla/util": "^5.0.0-alpha.0",
     "html-react-parser": "^5.1.8",
@@ -51,18 +50,13 @@
     "react-router-dom": "> 6.0.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.31",
+    "@ndla/preset-panda": "^0.0.33",
     "@ndla/types-backend": "^0.2.86",
-    "@ndla/types-embed": "^5.0.2-alpha.0",
-    "@pandacss/dev": "^0.46.0",
-    "css-loader": "^6.7.3",
-    "mini-css-extract-plugin": "^2.7.5",
-    "sass-loader": "^13.2.2",
-    "webpack": "^5.79.0",
-    "webpack-cli": "^5.0.1"
+    "@ndla/types-embed": "^5.0.3-alpha.0",
+    "@pandacss/dev": "^0.46.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "784eea9f500d7e38a2d5102286118a1da129b743"
+  "gitHead": "ce553947c81fac1140a0f197084cea944eae44ec"
 }

package/src/Embed/ConceptEmbed.tsx

@@ -7,7 +7,7 @@
  */
 
 import parse from "html-react-parser";
-import { forwardRef, useMemo } from "react";
+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";
@@ -92,28 +92,31 @@ export interface InlineConceptProps extends ConceptProps, BaseProps {
 }
 
 export const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(
-  ({ 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}>
-        <InlineTriggerButton>{linkText}</InlineTriggerButton>
-      </PopoverTrigger>
-      <Portal>
-        <StyledPopoverContent>
-          <Concept
-            copyright={copyright}
-            visualElement={visualElement}
-            lang={lang}
-            title={title}
-            source={source}
-            previewAlt={previewAlt}
-          >
-            {children}
-          </Concept>
-        </StyledPopoverContent>
-      </Portal>
-    </PopoverRoot>
-  ),
+  ({ linkText, copyright, visualElement, previewAlt, lang, children, title, source, ...rest }, ref) => {
+    const contentRef = useRef<HTMLDivElement>(null);
+    return (
+      <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>
+        </PopoverTrigger>
+        <Portal>
+          <StyledPopoverContent ref={contentRef}>
+            <Concept
+              copyright={copyright}
+              visualElement={visualElement}
+              title={title}
+              lang={lang}
+              source={source}
+              previewAlt={previewAlt}
+            >
+              {children}
+            </Concept>
+          </StyledPopoverContent>
+        </Portal>
+      </PopoverRoot>
+    );
+  },
 );
 
 export interface BlockConceptProps extends ConceptProps {}

package/src/Embed/GlossEmbed.tsx

@@ -6,6 +6,7 @@
  *
  */
 
+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";
@@ -25,6 +26,7 @@ const StyledPopoverContent = styled(PopoverContent, {
 });
 
 export const GlossEmbed = ({ embed }: Props) => {
+  const contentRef = useRef<HTMLDivElement>(null);
   if (embed.status === "error" && embed.embedData.type === "inline") {
     return <span>{embed.embedData.linkText}</span>;
   }
@@ -44,12 +46,12 @@ export const GlossEmbed = ({ embed }: Props) => {
 
   if (embed.embedData.type === "inline") {
     return (
-      <PopoverRoot>
+      <PopoverRoot initialFocusEl={() => contentRef.current}>
         <PopoverTrigger asChild>
           <InlineTriggerButton>{embed.embedData.linkText}</InlineTriggerButton>
         </PopoverTrigger>
         <Portal>
-          <StyledPopoverContent>
+          <StyledPopoverContent ref={contentRef}>
             <Figure>
               <Gloss glossData={concept.glossData} title={concept.title} audio={audio} />
             </Figure>

package/src/FactBox/FactBox.tsx

@@ -65,13 +65,13 @@ const StyledContent = styled("div", {
       inset: "0",
       transitionProperty: "opacity",
       transitionDuration: "slow",
-      transitionTimingFunction: "ease-out",
-      // TODO: Consider improving this gradient. It's a little light up top.
-      gradientFrom: "surface.default/00",
-      gradientTo: "surface.default",
+      transitionTimingFunction: "ease-in-out",
+      gradientFrom: "surface.default/20",
+      gradientTo: "surface.default/95",
       backgroundGradient: "to-b",
       opacity: "1",
       zIndex: "base",
+      pointerEvents: "none",
     },
     _print: {
       overflow: "visible",
@@ -83,7 +83,6 @@ const StyledContent = styled("div", {
       paddingBlockEnd: "xsmall",
       _after: {
         opacity: "0",
-        zIndex: "hide",
       },
     },
   },

package/src/FactBox/Factbox.stories.tsx

@@ -7,7 +7,7 @@
  */
 
 import { Meta, StoryObj } from "@storybook/react";
-import { Button, UnOrderedList, OrderedList } from "@ndla/primitives";
+import { Button, Heading, UnOrderedList, OrderedList } from "@ndla/primitives";
 import FactBox from "./FactBox";
 
 /**
@@ -24,7 +24,7 @@ export default {
   args: {
     children: (
       <>
-        <h2>Faktaboks</h2>
+        <Heading>Faktaboks</Heading>
         <p>Innhold kan først nås etter at boksen er åpnet.</p>
         <Button>Klikk meg</Button>
         <p>En faktaboks kan inneholde punktlister eller korte fakta som er relevant for artikkelens innhold.</p>