@pismo/marola 1.0.0-beta.45 → 1.0.0-beta.46

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 (5) hide show
  1. package/dist/assets/StepperNavigator.css +1 -1
  2. package/dist/components/StepperNavigator/StepperNavigator.d.ts +20 -5
  3. package/dist/components/StepperNavigator/StepperNavigator.js +94 -35
  4. package/dist/components/StepperNavigator/StepperNavigator.stories.d.ts +3 -1
  5. package/package.json +1 -1
package/dist/assets/StepperNavigator.css CHANGED
@@ -1 +1 @@
1
- ._stepper-navigator_1ouny_1{display:flex;justify-content:space-between;padding:1rem 0}._stepper-navigator_1ouny_1>span{display:flex;gap:1rem}._cancel-button_1ouny_11{color:var(--accent-alert-light);background-color:transparent}._cancel-button_1ouny_11:hover:not(:disabled){color:rgba(var(--alert-dark-rgb),.75);background-color:var(--gray-5)}._previous-button_1ouny_20{color:var(--gray-75);background-color:transparent;border:solid 1px var(--gray-75)}._previous-button_1ouny_20:disabled{border-color:transparent}._previous-button_1ouny_20:hover:not(:disabled){color:rgba(var(--gray-75-rgb),.75);background-color:var(--gray-5);border-color:rgba(var(--gray-75),.75)}
1
+ ._stepper-navigator_27f6m_1{display:flex;justify-content:space-between;padding:1rem 0}._stepper-navigator_27f6m_1>span{display:flex;gap:1rem}._cancel-button_27f6m_11{color:var(--accent-alert-light);background-color:transparent}._cancel-button_27f6m_11:hover:not(:disabled){color:rgba(var(--alert-dark-rgb),.75);background-color:var(--gray-5)}._previous-button_27f6m_20{color:var(--gray-75);background-color:transparent;border:solid 1px var(--gray-75)}._previous-button_27f6m_20:disabled{border-color:transparent}._previous-button_27f6m_20:hover:not(:disabled){color:rgba(var(--gray-75-rgb),.75);background-color:var(--gray-5);border-color:rgba(var(--gray-75),.75)}._previous-button_27f6m_20,._cancel-button_27f6m_11{min-width:6.25rem}._next-button_27f6m_39,._finish-button_27f6m_40{min-width:15rem}._previous-button_27f6m_20,._cancel-button_27f6m_11,._next-button_27f6m_39,._finish-button_27f6m_40{display:flex;gap:.25rem;align-items:center;justify-content:space-between;padding:0 1rem;font-size:.875rem}._previous-button_27f6m_20>*,._cancel-button_27f6m_11>*,._next-button_27f6m_39>*,._finish-button_27f6m_40>*{display:inline-flex;flex:1;align-items:center;justify-content:center}._previous-button_27f6m_20>*:nth-child(1),._cancel-button_27f6m_11>*:nth-child(1),._next-button_27f6m_39>*:nth-child(1),._finish-button_27f6m_40>*:nth-child(1){justify-content:flex-start}._previous-button_27f6m_20>*:nth-child(3),._cancel-button_27f6m_11>*:nth-child(3),._next-button_27f6m_39>*:nth-child(3),._finish-button_27f6m_40>*:nth-child(3){justify-content:flex-end}
package/dist/components/StepperNavigator/StepperNavigator.d.ts CHANGED
@@ -1,4 +1,11 @@
1
+ /// <reference types="react" />
1
2
  type StepperNavigatorLang = 'en' | 'pt';
3
+ export type StepperNavigatorButtonProps = {
4
+ leftIcon?: React.ReactNode;
5
+ rightIcon?: React.ReactNode;
6
+ className?: string;
7
+ 'data-testid'?: string;
8
+ };
2
9
  export type StepperNavigatorProps = {
3
10
  /** Hides the "previous" button */
4
11
  hidePrevious?: boolean;
@@ -26,6 +33,18 @@ export type StepperNavigatorProps = {
26
33
  labelFinish?: string;
27
34
  /** Language to be used for the button labels. Default "en" */
28
35
  lang?: StepperNavigatorLang;
36
+ /** CSS classes to be applied on the container element */
37
+ className?: string;
38
+ /** Id to be applied as `data-testid` on the container element */
39
+ 'data-testid'?: string;
40
+ /** Previous button props */
41
+ previousButtonProps?: StepperNavigatorButtonProps;
42
+ /** Cancel button props */
43
+ cancelButtonProps?: StepperNavigatorButtonProps;
44
+ /** Next button props */
45
+ nextButtonProps?: StepperNavigatorButtonProps;
46
+ /** Finish button props */
47
+ finishButtonProps?: StepperNavigatorButtonProps;
29
48
  /** Callback to be called when the "previous" button is clicked */
30
49
  onPrevious?: () => void;
31
50
  /** Callback to be called when the "cancel" button is clicked */
@@ -34,10 +53,6 @@ export type StepperNavigatorProps = {
34
53
  onNext?: () => void;
35
54
  /** Callback to be called when the "finish" button is clicked */
36
55
  onFinish?: () => void;
37
- /** CSS classes to be applied on the container element */
38
- className?: string;
39
- /** Id to be applied as `data-testid` on the container element */
40
- 'data-testid'?: string;
41
56
  };
42
- export declare const StepperNavigator: ({ hideNext, hidePrevious, hideCancel, hideFinish, disableNext, disablePrevious, disableCancel, disableFinish, lang, labelNext, labelPrevious, labelCancel, labelFinish, className, "data-testid": dataTestId, onNext, onPrevious, onCancel, onFinish, }: StepperNavigatorProps) => import("react/jsx-runtime").JSX.Element;
57
+ export declare const StepperNavigator: ({ hideNext, hidePrevious, hideCancel, hideFinish, disableNext, disablePrevious, disableCancel, disableFinish, lang, labelNext, labelPrevious, labelCancel, labelFinish, className, "data-testid": dataTestId, previousButtonProps, cancelButtonProps, nextButtonProps, finishButtonProps, onNext, onPrevious, onCancel, onFinish, }: StepperNavigatorProps) => import("react/jsx-runtime").JSX.Element;
43
58
  export {};
package/dist/components/StepperNavigator/StepperNavigator.js CHANGED
@@ -1,12 +1,15 @@
1
1
  import '../../assets/StepperNavigator.css';
2
- import { jsxs as p, jsx as e } from "react/jsx-runtime";
3
- import { c as g } from "../../clsx-DB4S2d7J.js";
4
- import { Button as t } from "../Button/Button.js";
5
- const c = {
6
- "stepper-navigator": "_stepper-navigator_1ouny_1",
7
- "cancel-button": "_cancel-button_1ouny_11",
8
- "previous-button": "_previous-button_1ouny_20"
9
- }, n = {
2
+ import { jsxs as l, jsx as a } from "react/jsx-runtime";
3
+ import { c as i } from "../../clsx-DB4S2d7J.js";
4
+ import { Button as I } from "../Button/Button.js";
5
+ import { Icon as K } from "../Icon/Icon.js";
6
+ const _ = {
7
+ "stepper-navigator": "_stepper-navigator_27f6m_1",
8
+ "cancel-button": "_cancel-button_27f6m_11",
9
+ "previous-button": "_previous-button_27f6m_20",
10
+ "next-button": "_next-button_27f6m_39",
11
+ "finish-button": "_finish-button_27f6m_40"
12
+ }, b = {
10
13
  en: {
11
14
  previous: "Previous",
12
15
  cancel: "Cancel",
@@ -19,38 +22,94 @@ const c = {
19
22
  next: "Próximo",
20
23
  finish: "Finalizar"
21
24
  }
22
- }, B = ({
23
- hideNext: d = !1,
24
- hidePrevious: l = !1,
25
- hideCancel: u = !1,
26
- hideFinish: f = !1,
27
- disableNext: v = !1,
28
- disablePrevious: m = !1,
29
- disableCancel: _ = !1,
30
- disableFinish: h = !1,
31
- lang: s = "en",
32
- labelNext: i,
33
- labelPrevious: o,
34
- labelCancel: r,
35
- labelFinish: a,
36
- className: x,
37
- "data-testid": k = "stepper-navigator",
38
- onNext: y = () => {
25
+ }, R = ({
26
+ hideNext: C = !1,
27
+ hidePrevious: j = !1,
28
+ hideCancel: z = !1,
29
+ hideFinish: w = !1,
30
+ disableNext: y = !1,
31
+ disablePrevious: A = !1,
32
+ disableCancel: S = !1,
33
+ disableFinish: q = !1,
34
+ lang: h = "en",
35
+ labelNext: N,
36
+ labelPrevious: f,
37
+ labelCancel: g,
38
+ labelFinish: k,
39
+ className: D,
40
+ "data-testid": E = "stepper-navigator",
41
+ previousButtonProps: d,
42
+ cancelButtonProps: c,
43
+ nextButtonProps: e = { rightIcon: /* @__PURE__ */ a(K, { icon: "circle-arrow-right", size: 24 }) },
44
+ finishButtonProps: m,
45
+ onNext: F = () => {
39
46
  },
40
- onPrevious: C = () => {
47
+ onPrevious: G = () => {
41
48
  },
42
- onCancel: b = () => {
49
+ onCancel: H = () => {
43
50
  },
44
- onFinish: N = () => {
51
+ onFinish: J = () => {
45
52
  }
46
- }) => (r = r || n[s].cancel, o = o || n[s].previous, i = i || n[s].next, a = a || n[s].finish, /* @__PURE__ */ p("div", { className: g(c["stepper-navigator"], x), "data-testid": k, children: [
47
- l ? /* @__PURE__ */ e("span", {}) : /* @__PURE__ */ e(t, { className: c["previous-button"], disabled: m, onClick: C, children: o }),
48
- /* @__PURE__ */ p("span", { children: [
49
- !u && /* @__PURE__ */ e(t, { className: c["cancel-button"], disabled: _, onClick: b, children: r }),
50
- !d && /* @__PURE__ */ e(t, { disabled: v, onClick: y, children: i }),
51
- !f && /* @__PURE__ */ e(t, { disabled: h, onClick: N, children: a })
53
+ }) => (g = g || b[h].cancel, f = f || b[h].previous, N = N || b[h].next, k = k || b[h].finish, /* @__PURE__ */ l("div", { className: i(_["stepper-navigator"], D), "data-testid": E, children: [
54
+ j ? /* @__PURE__ */ a("span", {}) : /* @__PURE__ */ l(
55
+ I,
56
+ {
57
+ className: i(_["previous-button"], d == null ? void 0 : d.className),
58
+ "data-testid": d == null ? void 0 : d["data-testid"],
59
+ disabled: A,
60
+ onClick: G,
61
+ children: [
62
+ /* @__PURE__ */ a("span", { children: d == null ? void 0 : d.leftIcon }),
63
+ /* @__PURE__ */ a("span", { children: f }),
64
+ /* @__PURE__ */ a("span", { children: d == null ? void 0 : d.rightIcon })
65
+ ]
66
+ }
67
+ ),
68
+ /* @__PURE__ */ l("span", { children: [
69
+ !z && /* @__PURE__ */ l(
70
+ I,
71
+ {
72
+ className: i(_["cancel-button"], c == null ? void 0 : c.className),
73
+ "data-testid": c == null ? void 0 : c["data-testid"],
74
+ disabled: S,
75
+ onClick: H,
76
+ children: [
77
+ /* @__PURE__ */ a("span", { children: c == null ? void 0 : c.leftIcon }),
78
+ /* @__PURE__ */ a("span", { children: g }),
79
+ /* @__PURE__ */ a("span", { children: c == null ? void 0 : c.rightIcon })
80
+ ]
81
+ }
82
+ ),
83
+ !C && /* @__PURE__ */ l(
84
+ I,
85
+ {
86
+ className: i(_["next-button"], e == null ? void 0 : e.className),
87
+ "data-testid": e == null ? void 0 : e["data-testid"],
88
+ disabled: y,
89
+ onClick: F,
90
+ children: [
91
+ /* @__PURE__ */ a("span", { children: e == null ? void 0 : e.leftIcon }),
92
+ /* @__PURE__ */ a("span", { children: N }),
93
+ /* @__PURE__ */ a("span", { children: e == null ? void 0 : e.rightIcon })
94
+ ]
95
+ }
96
+ ),
97
+ !w && /* @__PURE__ */ l(
98
+ I,
99
+ {
100
+ className: i(_["finish-button"], m == null ? void 0 : m.className),
101
+ "data-testid": m == null ? void 0 : m["data-testid"],
102
+ disabled: q,
103
+ onClick: J,
104
+ children: [
105
+ /* @__PURE__ */ a("span", { children: m == null ? void 0 : m.leftIcon }),
106
+ /* @__PURE__ */ a("span", { children: k }),
107
+ /* @__PURE__ */ a("span", { children: m == null ? void 0 : m.rightIcon })
108
+ ]
109
+ }
110
+ )
52
111
  ] })
53
112
  ] }));
54
113
  export {
55
- B as StepperNavigator
114
+ R as StepperNavigator
56
115
  };
package/dist/components/StepperNavigator/StepperNavigator.stories.d.ts CHANGED
@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
5
- component: ({ hideNext, hidePrevious, hideCancel, hideFinish, disableNext, disablePrevious, disableCancel, disableFinish, lang, labelNext, labelPrevious, labelCancel, labelFinish, className, "data-testid": dataTestId, onNext, onPrevious, onCancel, onFinish, }: import('./StepperNavigator').StepperNavigatorProps) => import("react/jsx-runtime").JSX.Element;
5
+ component: ({ hideNext, hidePrevious, hideCancel, hideFinish, disableNext, disablePrevious, disableCancel, disableFinish, lang, labelNext, labelPrevious, labelCancel, labelFinish, className, "data-testid": dataTestId, previousButtonProps, cancelButtonProps, nextButtonProps, finishButtonProps, onNext, onPrevious, onCancel, onFinish, }: import('./StepperNavigator').StepperNavigatorProps) => import("react/jsx-runtime").JSX.Element;
6
6
  tags: string[];
7
7
  parameters: {
8
8
  layout: string;
@@ -14,3 +14,5 @@ export declare const Simple: Story;
14
14
  export declare const WithCustomLanguage: Story;
15
15
  export declare const WithCustomLabels: Story;
16
16
  export declare const Disabled: Story;
17
+ export declare const WithIcons: Story;
18
+ export declare const DefaultWithNoIcons: Story;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pismo/marola",
3
3
  "description": "CDX tribe component library",
4
- "version": "1.0.0-beta.45",
4
+ "version": "1.0.0-beta.46",
5
5
  "type": "module",
6
6
  "main": "dist/main.js",
7
7
  "types": "dist/main.d.ts",