@npm_leadtech/legal-contracts-ui 0.44.20 → 0.44.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/Button.js +113 -14
  2. package/dist/components/FaqTeaserSection.d.ts +15 -1
  3. package/dist/components/FaqTeaserSection.js +7 -6
  4. package/dist/components/HomeTemplate.d.ts +1 -1
  5. package/package.json +1 -5
  6. package/dist/components/atoms/Button.utils.js +0 -105
package/dist/components/Button.js CHANGED
@@ -1,19 +1,118 @@
1
- import { jsx as l } from "react/jsx-runtime";
1
+ import { jsx as g } from "react/jsx-runtime";
2
2
  import "react";
3
- import { getButtonStyles as p } from "./atoms/Button.utils.js";
4
- const x = ({
5
- children: o,
6
- type: r = "button",
7
- size: e = "default",
8
- variant: s = "primary-green",
9
- iconPosition: n = "left",
10
- className: a,
11
- disabled: t = !1,
12
- ref: m,
13
- ...u
3
+ const p = {
4
+ "primary-green": {
5
+ base: "bg-primary-700 text-white border border-transparent font-semibold",
6
+ hover: "hover:bg-primary-500",
7
+ disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:cursor-not-allowed"
8
+ },
9
+ "primary-darkgreen": {
10
+ base: "bg-primary-900 text-white border border-transparent font-semibold",
11
+ hover: "hover:bg-primary-800",
12
+ disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:cursor-not-allowed"
13
+ },
14
+ "primary-yellow": {
15
+ base: "bg-secondary-500 text-neutral-900 border border-transparent font-semibold",
16
+ hover: "hover:bg-secondary-400",
17
+ disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:cursor-not-allowed"
18
+ },
19
+ "primary-white": {
20
+ base: "bg-white text-neutral-900 font-semibold border border-transparent",
21
+ hover: "hover:bg-neutral-50",
22
+ disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:cursor-not-allowed"
23
+ },
24
+ "secondary-green": {
25
+ base: "bg-white text-primary-700 border-2 border-primary-700 font-semibold",
26
+ hover: "hover:bg-primary-100 hover:text-primary-800",
27
+ disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:border-neutral-200 disabled:cursor-not-allowed"
28
+ },
29
+ "secondary-yellow": {
30
+ base: "bg-transparent text-neutral-900 border-2 border-secondary-500 font-semibold",
31
+ hover: "hover:bg-secondary-100 hover:border-secondary-600",
32
+ disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:border-neutral-200 disabled:cursor-not-allowed"
33
+ },
34
+ "secondary-red": {
35
+ base: "bg-transparent text-error-500 border-2 border-error-500 font-semibold",
36
+ hover: "hover:bg-error-25",
37
+ disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:border-neutral-200 disabled:cursor-not-allowed"
38
+ },
39
+ "secondary-black": {
40
+ base: "bg-transparent text-neutral-800 border-2 border-neutral-600 font-semibold",
41
+ hover: "hover:bg-neutral-200",
42
+ disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:border-neutral-200 disabled:cursor-not-allowed"
43
+ },
44
+ "tertiary-bold": {
45
+ base: "bg-transparent text-primary-700 font-semibold border border-transparent font-semibold p-1.5!",
46
+ hover: "hover:text-primary-500 hover:bg-primary-200",
47
+ disabled: "disabled:text-neutral-400 disabled:cursor-not-allowed disabled:bg-white"
48
+ },
49
+ "tertiary-thin": {
50
+ base: "bg-transparent text-neutral-800 font-normal border border-transparent p-1.5!",
51
+ hover: " hover:bg-primary-100",
52
+ disabled: "disabled:text-neutral-400 disabled:cursor-not-allowed disabled:bg-white"
53
+ },
54
+ "tertiary-icon": {
55
+ base: "bg-transparent text-neutral-800 font-medium border border-transparent p-1.5!",
56
+ hover: "hover:bg-primary-100",
57
+ disabled: "disabled:text-neutral-400 disabled:cursor-not-allowed disabled:bg-white"
58
+ },
59
+ "tertiary-link": {
60
+ base: "bg-transparent text-primary-700 underline underline-offset-2 border border-transparent",
61
+ hover: "",
62
+ disabled: "disabled:text-neutral-400 disabled:cursor-not-allowed disabled:bg-white"
63
+ },
64
+ "icon-black": {
65
+ base: "bg-black text-white border border-transparent font-semibold",
66
+ hover: "hover:bg-neutral-800",
67
+ disabled: "disabled:bg-neutral-400 disabled:cursor-not-allowed"
68
+ },
69
+ "icon-grey": {
70
+ base: "bg-transparent text-neutral-800 border-2 border-neutral-600 font-semibold",
71
+ hover: "hover:bg-neutral-200",
72
+ disabled: "disabled:text-neutral-400 disabled:border-neutral-400 disabled:bg-white disabled:cursor-not-allowed"
73
+ },
74
+ "icon-mobile": {
75
+ base: "bg-transparent text-primary-700 border border-neutral-200 border-2 px-8 rounded-sm",
76
+ hover: "hover:bg-neutral-50",
77
+ disabled: "disabled:text-neutral-400 disabled:border-neutral-400 disabled:bg-white disabled:cursor-not-allowed"
78
+ }
79
+ }, m = {
80
+ small: "px-3 py-1.5 text-small",
81
+ default: "px-4 py-2.5 text-medium",
82
+ large: "px-6 py-3 text-big"
83
+ }, x = ({
84
+ children: a,
85
+ type: d = "button",
86
+ size: o = "default",
87
+ variant: l = "primary-green",
88
+ iconPosition: t = "left",
89
+ className: b,
90
+ disabled: e = !1,
91
+ ref: s,
92
+ ...n
14
93
  }) => {
15
- const f = p({ variant: s, size: e, iconPosition: n, disabled: t, className: a });
16
- return /* @__PURE__ */ l("button", { ref: m, type: r, disabled: t, "aria-disabled": t, className: f, ...u, children: o });
94
+ const r = p[l], i = () => t === "top" ? "flex-col" : t === "right" ? "flex-row-reverse" : "flex-row", u = [
95
+ "inline-flex items-center justify-center gap-2 rounded-sm font-medium transition-all duration-200",
96
+ "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2",
97
+ e ? "" : "cursor-pointer",
98
+ r.base,
99
+ r.hover,
100
+ r.disabled,
101
+ m[o],
102
+ i()
103
+ ].join(" ");
104
+ return /* @__PURE__ */ g(
105
+ "button",
106
+ {
107
+ ref: s,
108
+ type: d,
109
+ disabled: e,
110
+ "aria-disabled": e,
111
+ className: `${u} ${b ?? ""}`,
112
+ ...n,
113
+ children: a
114
+ }
115
+ );
17
116
  };
18
117
  export {
19
118
  x as Button
package/dist/components/FaqTeaserSection.d.ts CHANGED
@@ -1,6 +1,18 @@
1
+ import { ComponentPropsWithRef } from 'react';
1
2
  import { FC } from 'react';
2
3
  import { ReactNode } from 'react';
3
4
 
5
+ export interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
6
+ children: ReactNode;
7
+ size?: ButtonSize;
8
+ variant?: ButtonVariant;
9
+ iconPosition?: IconPosition;
10
+ }
11
+
12
+ export type ButtonSize = 'small' | 'default' | 'large';
13
+
14
+ export type ButtonVariant = 'primary-green' | 'primary-darkgreen' | 'primary-yellow' | 'primary-white' | 'secondary-green' | 'secondary-yellow' | 'secondary-red' | 'secondary-black' | 'tertiary-bold' | 'tertiary-thin' | 'tertiary-icon' | 'tertiary-link' | 'icon-black' | 'icon-grey' | 'icon-mobile';
15
+
4
16
  export declare const FaqTeaserSection: FC<FaqTeaserSectionProps>;
5
17
 
6
18
  export declare interface FaqTeaserSectionProps {
@@ -9,10 +21,12 @@ export declare interface FaqTeaserSectionProps {
9
21
  id: string;
10
22
  content: ReactNode;
11
23
  }[];
12
- ctaNode: ReactNode;
24
+ cta: ButtonProps;
13
25
  bgImage: ReactNode;
14
26
  }
15
27
 
28
+ export type IconPosition = 'left' | 'right' | 'top';
29
+
16
30
  export interface SectionHeadingProps {
17
31
  title: string;
18
32
  description?: string;
package/dist/components/FaqTeaserSection.js CHANGED
@@ -1,11 +1,12 @@
1
1
  import { jsxs as l, jsx as e } from "react/jsx-runtime";
2
2
  import "react";
3
- import { SectionHeading as a } from "./SectionHeading.js";
3
+ import { SectionHeading as n } from "./SectionHeading.js";
4
4
  import { ChevronRightIcon as d } from "./ChevronRightIcon.js";
5
- const x = ({ header: o, questions: r, ctaNode: t, bgImage: n }) => r.length === 0 ? null : /* @__PURE__ */ l("section", { className: "bg-neutral-25 relative overflow-hidden px-6 py-10 lg:px-8 lg:py-12 xl:px-55", children: [
6
- /* @__PURE__ */ e("div", { className: "pointer-events-none absolute -bottom-17 -left-16 hidden xl:block", children: n }),
5
+ import { Button as s } from "./Button.js";
6
+ const g = ({ header: o, questions: r, cta: t, bgImage: a }) => r.length === 0 ? null : /* @__PURE__ */ l("section", { className: "bg-neutral-25 relative overflow-hidden px-6 py-10 lg:px-8 lg:py-12 xl:px-55", children: [
7
+ /* @__PURE__ */ e("div", { className: "pointer-events-none absolute -bottom-17 -left-16 hidden xl:block", children: a }),
7
8
  /* @__PURE__ */ l("div", { className: "relative z-2 flex flex-col justify-center gap-6 md:flex-row md:items-center xl:gap-10", children: [
8
- /* @__PURE__ */ e(a, { className: "xl:max-w-120", align: "start", ...o }),
9
+ /* @__PURE__ */ e(n, { className: "xl:max-w-120", align: "start", ...o }),
9
10
  /* @__PURE__ */ l("div", { className: "flex flex-col gap-10 rounded-lg bg-white p-8 shadow md:min-w-87 lg:min-w-117 xl:max-w-120 xl:min-w-120", children: [
10
11
  /* @__PURE__ */ e("ul", { className: "flex flex-col gap-6", children: r.map((i) => /* @__PURE__ */ l(
11
12
  "li",
@@ -18,10 +19,10 @@ const x = ({ header: o, questions: r, ctaNode: t, bgImage: n }) => r.length ===
18
19
  },
19
20
  i.id
20
21
  )) }),
21
- t
22
+ /* @__PURE__ */ e(s, { className: "w-fit", size: "default", variant: "primary-yellow", ...t })
22
23
  ] })
23
24
  ] })
24
25
  ] });
25
26
  export {
26
- x as FaqTeaserSection
27
+ g as FaqTeaserSection
27
28
  };
package/dist/components/HomeTemplate.d.ts CHANGED
@@ -41,7 +41,7 @@ export interface FaqTeaserSectionProps {
41
41
  id: string;
42
42
  content: ReactNode;
43
43
  }[];
44
- ctaNode: ReactNode;
44
+ cta: ButtonProps;
45
45
  bgImage: ReactNode;
46
46
  }
47
47
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@npm_leadtech/legal-contracts-ui",
3
- "version": "0.44.20",
3
+ "version": "0.44.21",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -22,10 +22,6 @@
22
22
  "import": "./dist/components/Button.js",
23
23
  "types": "./dist/components/Button.d.ts"
24
24
  },
25
- "./components/Button.utils.ts": {
26
- "import": "./dist/components/Button.utils.ts.js",
27
- "types": "./dist/components/Button.utils.ts.d.ts"
28
- },
29
25
  "./components/Card": {
30
26
  "import": "./dist/components/Card.js",
31
27
  "types": "./dist/components/Card.d.ts"
package/dist/components/atoms/Button.utils.js DELETED
@@ -1,105 +0,0 @@
1
- import "react/jsx-runtime";
2
- import "react";
3
- const b = {
4
- "primary-green": {
5
- base: "bg-primary-700 text-white border border-transparent font-semibold",
6
- hover: "hover:bg-primary-500",
7
- disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:cursor-not-allowed"
8
- },
9
- "primary-darkgreen": {
10
- base: "bg-primary-900 text-white border border-transparent font-semibold",
11
- hover: "hover:bg-primary-800",
12
- disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:cursor-not-allowed"
13
- },
14
- "primary-yellow": {
15
- base: "bg-secondary-500 text-neutral-900 border border-transparent font-semibold",
16
- hover: "hover:bg-secondary-400",
17
- disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:cursor-not-allowed"
18
- },
19
- "primary-white": {
20
- base: "bg-white text-neutral-900 font-semibold border border-transparent",
21
- hover: "hover:bg-neutral-50",
22
- disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:cursor-not-allowed"
23
- },
24
- "secondary-green": {
25
- base: "bg-white text-primary-700 border-2 border-primary-700 font-semibold",
26
- hover: "hover:bg-primary-100 hover:text-primary-800",
27
- disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:border-neutral-200 disabled:cursor-not-allowed"
28
- },
29
- "secondary-yellow": {
30
- base: "bg-transparent text-neutral-900 border-2 border-secondary-500 font-semibold",
31
- hover: "hover:bg-secondary-100 hover:border-secondary-600",
32
- disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:border-neutral-200 disabled:cursor-not-allowed"
33
- },
34
- "secondary-red": {
35
- base: "bg-transparent text-error-500 border-2 border-error-500 font-semibold",
36
- hover: "hover:bg-error-25",
37
- disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:border-neutral-200 disabled:cursor-not-allowed"
38
- },
39
- "secondary-black": {
40
- base: "bg-transparent text-neutral-800 border-2 border-neutral-600 font-semibold",
41
- hover: "hover:bg-neutral-200",
42
- disabled: "disabled:bg-neutral-200 disabled:text-neutral-400 disabled:border-neutral-200 disabled:cursor-not-allowed"
43
- },
44
- "tertiary-bold": {
45
- base: "bg-transparent text-primary-700 font-semibold border border-transparent font-semibold p-1.5!",
46
- hover: "hover:text-primary-500 hover:bg-primary-200",
47
- disabled: "disabled:text-neutral-400 disabled:cursor-not-allowed disabled:bg-white"
48
- },
49
- "tertiary-thin": {
50
- base: "bg-transparent text-neutral-800 font-normal border border-transparent p-1.5!",
51
- hover: " hover:bg-primary-100",
52
- disabled: "disabled:text-neutral-400 disabled:cursor-not-allowed disabled:bg-white"
53
- },
54
- "tertiary-icon": {
55
- base: "bg-transparent text-neutral-800 font-medium border border-transparent p-1.5!",
56
- hover: "hover:bg-primary-100",
57
- disabled: "disabled:text-neutral-400 disabled:cursor-not-allowed disabled:bg-white"
58
- },
59
- "tertiary-link": {
60
- base: "bg-transparent text-primary-700 underline underline-offset-2 border border-transparent",
61
- hover: "",
62
- disabled: "disabled:text-neutral-400 disabled:cursor-not-allowed disabled:bg-white"
63
- },
64
- "icon-black": {
65
- base: "bg-black text-white border border-transparent font-semibold",
66
- hover: "hover:bg-neutral-800",
67
- disabled: "disabled:bg-neutral-400 disabled:cursor-not-allowed"
68
- },
69
- "icon-grey": {
70
- base: "bg-transparent text-neutral-800 border-2 border-neutral-600 font-semibold",
71
- hover: "hover:bg-neutral-200",
72
- disabled: "disabled:text-neutral-400 disabled:border-neutral-400 disabled:bg-white disabled:cursor-not-allowed"
73
- },
74
- "icon-mobile": {
75
- base: "bg-transparent text-primary-700 border border-neutral-200 border-2 px-8 rounded-sm",
76
- hover: "hover:bg-neutral-50",
77
- disabled: "disabled:text-neutral-400 disabled:border-neutral-400 disabled:bg-white disabled:cursor-not-allowed"
78
- }
79
- }, s = {
80
- small: "px-3 py-1.5 text-small",
81
- default: "px-4 py-2.5 text-medium",
82
- large: "px-6 py-3 text-big"
83
- }, u = ({
84
- variant: t,
85
- size: a,
86
- iconPosition: r,
87
- disabled: d = !1,
88
- className: o = ""
89
- }) => {
90
- const e = b[t], l = () => r === "top" ? "flex-col" : r === "right" ? "flex-row-reverse" : "flex-row";
91
- return [
92
- "inline-flex items-center justify-center gap-2 rounded-sm font-medium transition-all duration-200",
93
- "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2",
94
- d ? "" : "cursor-pointer",
95
- e.base,
96
- e.hover,
97
- e.disabled,
98
- s[a],
99
- l(),
100
- o
101
- ].filter(Boolean).join(" ");
102
- };
103
- export {
104
- u as getButtonStyles
105
- };