@tedi-design-system/react 14.3.0 → 14.4.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "14.3.0",
+  "version": "14.4.0-rc.1",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/tedi/components/buttons/collapse/collapse.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),a=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),I=require("../../../../../external/react-animate-height/dist/esm/index.cjs.js"),w=require("../../base/icon/icon.cjs.js"),R=require("../../base/typography/text/text.cjs.js"),T=require("../../misc/print/print.cjs.js"),t=require("./collapse.module.scss.cjs.js"),D=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),L=require("../../../providers/label-provider/use-labels.cjs.js"),$=require("../../../helpers/hooks/use-print.cjs.js"),b=require("../../layout/grid/row.cjs.js"),i=require("../../layout/grid/col.cjs.js"),q=u=>{const{getCurrentBreakpointProps:C}=D.useBreakpointProps(u.defaultServerBreakpoint),{getLabel:p}=L.useLabels(),{id:n,children:x,className:m,openText:y=p("open"),closeText:v=p("close"),hideCollapseText:N=!1,title:h,titleRowProps:P,defaultOpen:g,open:r,onToggle:c,arrowType:k="neutral",...M}=C(u),[f,O]=o.useState(()=>g),d=$.usePrint(),l=o.useMemo(()=>d||(r!==void 0?r:f),[d,r,f]),S=o.useMemo(()=>a.default(t.default["tedi-collapse"],m,{[t.default["tedi-collapse--is-open"]]:l}),[m,l]),j=()=>{const s=!l;O(s),c==null||c(s)},B=s=>{(s.key==="Enter"||s.key===" ")&&!s.repeat&&(s.preventDefault(),j())},_=o.useMemo(()=>e.jsx("div",{className:t.default["tedi-collapse__content"],children:x}),[x]);return e.jsxs("div",{"data-name":"collapse",...M,className:S,children:[e.jsx("button",{type:"button","data-name":"collapse-trigger",className:t.default["tedi-collapse__title"],"aria-labelledby":`${n}-collapse-label`,"aria-expanded":l,"aria-controls":n,onKeyDown:B,onClick:j,children:e.jsxs(b.Row,{justifyContent:"between",alignItems:"center",wrap:"nowrap",...P,element:"span",children:[h&&e.jsx(i.Col,{"aria-hidden":"true",children:h}),e.jsx(i.Col,{width:"auto",children:e.jsxs(b.Row,{element:"span",alignItems:"center",gutter:1,children:[e.jsx(T.Print,{visibility:"hide",children:e.jsx(i.Col,{width:"auto",className:a.default({"visually-hidden":N}),children:e.jsx(R.Text,{element:"span",color:"brand",className:a.default(t.default["tedi-collapse__text"]),id:`${n}-collapse-label`,children:l?v:y})})}),e.jsx(i.Col,{width:"auto",children:k==="secondary"?e.jsx("div",{className:t.default["tedi-collapse__icon-wrapper"],children:e.jsx(w.Icon,{className:a.default(t.default["tedi-collapse__icon"]),name:"expand_more"})}):e.jsx(w.Icon,{className:a.default(t.default["tedi-collapse__icon"]),name:"expand_more"})})]})})]})}),d?_:e.jsx(I.default,{duration:300,id:n,height:l?"auto":0,"data-testid":"collapse-inner",children:_})]})};exports.Collapse=q;exports.default=q;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),n=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),R=require("../../../../../external/react-animate-height/dist/esm/index.cjs.js"),w=require("../../base/icon/icon.cjs.js"),T=require("../../base/typography/text/text.cjs.js"),D=require("../../misc/print/print.cjs.js"),t=require("./collapse.module.scss.cjs.js"),L=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),$=require("../../../providers/label-provider/use-labels.cjs.js"),E=require("../../../helpers/hooks/use-print.cjs.js"),b=require("../../layout/grid/row.cjs.js"),i=require("../../layout/grid/col.cjs.js"),q=u=>{const{getCurrentBreakpointProps:C}=L.useBreakpointProps(u.defaultServerBreakpoint),{getLabel:p}=$.useLabels(),{id:a,children:x,className:m,openText:y=p("open"),closeText:v=p("close"),hideCollapseText:N=!1,title:h,titleRowProps:P,defaultOpen:g,open:r,onToggle:c,arrowType:k="neutral",underline:M=!0,...O}=C(u),[f,S]=o.useState(()=>g),d=E.usePrint(),s=o.useMemo(()=>d||(r!==void 0?r:f),[d,r,f]),B=o.useMemo(()=>n.default(t.default["tedi-collapse"],m,{[t.default["tedi-collapse--is-open"]]:s}),[m,s]),_=()=>{const l=!s;S(l),c==null||c(l)},I=l=>{(l.key==="Enter"||l.key===" ")&&!l.repeat&&(l.preventDefault(),_())},j=o.useMemo(()=>e.jsx("div",{className:t.default["tedi-collapse__content"],children:x}),[x]);return e.jsxs("div",{"data-name":"collapse",...O,className:B,children:[e.jsx("button",{type:"button","data-name":"collapse-trigger",className:t.default["tedi-collapse__title"],"aria-labelledby":`${a}-collapse-label`,"aria-expanded":s,"aria-controls":a,onKeyDown:I,onClick:_,children:e.jsxs(b.Row,{justifyContent:"between",alignItems:"center",wrap:"nowrap",...P,element:"span",children:[h&&e.jsx(i.Col,{"aria-hidden":"true",children:h}),e.jsx(i.Col,{width:"auto",children:e.jsxs(b.Row,{element:"span",alignItems:"center",gutter:1,children:[e.jsx(D.Print,{visibility:"hide",children:e.jsx(i.Col,{width:"auto",className:n.default({"visually-hidden":N}),children:e.jsx(T.Text,{element:"span",color:"brand",className:n.default(t.default["tedi-collapse__text"],{[t.default["tedi-collapse__text--underline"]]:M}),id:`${a}-collapse-label`,children:s?v:y})})}),e.jsx(i.Col,{width:"auto",children:k==="secondary"?e.jsx("div",{className:t.default["tedi-collapse__icon-wrapper"],children:e.jsx(w.Icon,{className:n.default(t.default["tedi-collapse__icon"]),name:"expand_more"})}):e.jsx(w.Icon,{className:n.default(t.default["tedi-collapse__icon"]),name:"expand_more"})})]})})]})}),d?j:e.jsx(R.default,{duration:300,id:a,height:s?"auto":0,"data-testid":"collapse-inner",children:j})]})};exports.Collapse=q;exports.default=q;

package/src/tedi/components/buttons/collapse/collapse.d.ts

@@ -28,6 +28,7 @@ type CollapseBreakpointProps = {
      */
     className?: string;
     arrowType?: 'default' | 'secondary';
+    underline?: boolean;
 };
 export interface CollapseProps extends BreakpointSupport<CollapseBreakpointProps> {
     /**

package/src/tedi/components/buttons/collapse/collapse.es.js

@@ -1,18 +1,18 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
 import n from "../../../../../external/classnames/index.es.js";
-import s from "react";
-import j from "../../../../../external/react-animate-height/dist/esm/index.es.js";
-import { Icon as x } from "../../base/icon/icon.es.js";
-import { Text as D } from "../../base/typography/text/text.es.js";
-import { Print as R } from "../../misc/print/print.es.js";
+import i from "react";
+import D from "../../../../../external/react-animate-height/dist/esm/index.es.js";
+import { Icon as b } from "../../base/icon/icon.es.js";
+import { Text as R } from "../../base/typography/text/text.es.js";
+import { Print as E } from "../../misc/print/print.es.js";
 import t from "./collapse.module.scss.es.js";
-import { useBreakpointProps as E } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as K } from "../../../providers/label-provider/use-labels.es.js";
-import { usePrint as L } from "../../../helpers/hooks/use-print.es.js";
+import { useBreakpointProps as K } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as L } from "../../../providers/label-provider/use-labels.es.js";
+import { usePrint as $ } from "../../../helpers/hooks/use-print.es.js";
 import { Row as N } from "../../layout/grid/row.es.js";
-import { Col as i } from "../../layout/grid/col.es.js";
-const Y = (m) => {
-  const { getCurrentBreakpointProps: C } = E(m.defaultServerBreakpoint), { getLabel: u } = K(), {
+import { Col as r } from "../../layout/grid/col.es.js";
+const Z = (m) => {
+  const { getCurrentBreakpointProps: C } = K(m.defaultServerBreakpoint), { getLabel: u } = L(), {
     id: l,
     children: h,
     className: f,
@@ -22,28 +22,29 @@ const Y = (m) => {
     title: _,
     titleRowProps: P,
     defaultOpen: O,
-    open: r,
+    open: s,
     onToggle: c,
     arrowType: B = "neutral",
-    ...I
-  } = C(m), [w, M] = s.useState(() => O), p = L(), o = s.useMemo(
-    () => p || (r !== void 0 ? r : w),
-    [p, r, w]
-  ), S = s.useMemo(
+    underline: I = !0,
+    ...M
+  } = C(m), [w, S] = i.useState(() => O), d = $(), o = i.useMemo(
+    () => d || (s !== void 0 ? s : w),
+    [d, s, w]
+  ), T = i.useMemo(
     () => n(t["tedi-collapse"], f, {
       [t["tedi-collapse--is-open"]]: o
     }),
     [f, o]
-  ), y = () => {
+  ), x = () => {
     const a = !o;
-    M(a), c == null || c(a);
-  }, T = (a) => {
-    (a.key === "Enter" || a.key === " ") && !a.repeat && (a.preventDefault(), y());
-  }, b = s.useMemo(
+    S(a), c == null || c(a);
+  }, j = (a) => {
+    (a.key === "Enter" || a.key === " ") && !a.repeat && (a.preventDefault(), x());
+  }, y = i.useMemo(
     () => /* @__PURE__ */ e("div", { className: t["tedi-collapse__content"], children: h }),
     [h]
   );
-  return /* @__PURE__ */ d("div", { "data-name": "collapse", ...I, className: S, children: [
+  return /* @__PURE__ */ p("div", { "data-name": "collapse", ...M, className: T, children: [
     /* @__PURE__ */ e(
       "button",
       {
@@ -53,30 +54,32 @@ const Y = (m) => {
         "aria-labelledby": `${l}-collapse-label`,
         "aria-expanded": o,
         "aria-controls": l,
-        onKeyDown: T,
-        onClick: y,
-        children: /* @__PURE__ */ d(N, { justifyContent: "between", alignItems: "center", wrap: "nowrap", ...P, element: "span", children: [
-          _ && /* @__PURE__ */ e(i, { "aria-hidden": "true", children: _ }),
-          /* @__PURE__ */ e(i, { width: "auto", children: /* @__PURE__ */ d(N, { element: "span", alignItems: "center", gutter: 1, children: [
-            /* @__PURE__ */ e(R, { visibility: "hide", children: /* @__PURE__ */ e(i, { width: "auto", className: n({ "visually-hidden": k }), children: /* @__PURE__ */ e(
-              D,
+        onKeyDown: j,
+        onClick: x,
+        children: /* @__PURE__ */ p(N, { justifyContent: "between", alignItems: "center", wrap: "nowrap", ...P, element: "span", children: [
+          _ && /* @__PURE__ */ e(r, { "aria-hidden": "true", children: _ }),
+          /* @__PURE__ */ e(r, { width: "auto", children: /* @__PURE__ */ p(N, { element: "span", alignItems: "center", gutter: 1, children: [
+            /* @__PURE__ */ e(E, { visibility: "hide", children: /* @__PURE__ */ e(r, { width: "auto", className: n({ "visually-hidden": k }), children: /* @__PURE__ */ e(
+              R,
               {
                 element: "span",
                 color: "brand",
-                className: n(t["tedi-collapse__text"]),
+                className: n(t["tedi-collapse__text"], {
+                  [t["tedi-collapse__text--underline"]]: I
+                }),
                 id: `${l}-collapse-label`,
                 children: o ? g : v
               }
             ) }) }),
-            /* @__PURE__ */ e(i, { width: "auto", children: B === "secondary" ? /* @__PURE__ */ e("div", { className: t["tedi-collapse__icon-wrapper"], children: /* @__PURE__ */ e(x, { className: n(t["tedi-collapse__icon"]), name: "expand_more" }) }) : /* @__PURE__ */ e(x, { className: n(t["tedi-collapse__icon"]), name: "expand_more" }) })
+            /* @__PURE__ */ e(r, { width: "auto", children: B === "secondary" ? /* @__PURE__ */ e("div", { className: t["tedi-collapse__icon-wrapper"], children: /* @__PURE__ */ e(b, { className: n(t["tedi-collapse__icon"]), name: "expand_more" }) }) : /* @__PURE__ */ e(b, { className: n(t["tedi-collapse__icon"]), name: "expand_more" }) })
           ] }) })
         ] })
       }
     ),
-    p ? b : /* @__PURE__ */ e(j, { duration: 300, id: l, height: o ? "auto" : 0, "data-testid": "collapse-inner", children: b })
+    d ? y : /* @__PURE__ */ e(D, { duration: 300, id: l, height: o ? "auto" : 0, "data-testid": "collapse-inner", children: y })
   ] });
 };
 export {
-  Y as Collapse,
-  Y as default
+  Z as Collapse,
+  Z as default
 };

package/src/tedi/components/buttons/collapse/collapse.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-collapse__title":"tedi-collapse__title-3e140e5c","tedi-collapse__text":"tedi-collapse__text-d150fea1","tedi-collapse__icon-wrapper":"tedi-collapse__icon-wrapper-d2b036ea","tedi-collapse__icon":"tedi-collapse__icon-5156e480","tedi-collapse--is-open":"tedi-collapse--is-open-b34b11c3","tedi-collapse__content":"tedi-collapse__content-350b91f8"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-collapse__title":"tedi-collapse__title-3e140e5c","tedi-collapse__text--underline":"tedi-collapse__text--underline-73ca86bd","tedi-collapse__icon-wrapper":"tedi-collapse__icon-wrapper-d2b036ea","tedi-collapse__icon":"tedi-collapse__icon-5156e480","tedi-collapse--is-open":"tedi-collapse--is-open-b34b11c3","tedi-collapse__content":"tedi-collapse__content-350b91f8"};exports.default=e;

package/src/tedi/components/buttons/collapse/collapse.module.scss.es.js

@@ -1,6 +1,6 @@
 const e = {
   "tedi-collapse__title": "tedi-collapse__title-3e140e5c",
-  "tedi-collapse__text": "tedi-collapse__text-d150fea1",
+  "tedi-collapse__text--underline": "tedi-collapse__text--underline-73ca86bd",
   "tedi-collapse__icon-wrapper": "tedi-collapse__icon-wrapper-d2b036ea",
   "tedi-collapse__icon": "tedi-collapse__icon-5156e480",
   "tedi-collapse--is-open": "tedi-collapse--is-open-b34b11c3",