@pismo/marola 0.0.1-alpha.6 → 0.0.1-alpha.7
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.
- package/dist/{Button-W6tM-_IT.js → Button-B1umG8kJ.js} +2 -2
- package/dist/ClickAwayListener-BKznXF1d.js +106 -0
- package/dist/Portal-BcdMtRGF.js +73 -0
- package/dist/assets/Input.css +1 -0
- package/dist/assets/Snackbar.css +1 -0
- package/dist/assets/Toggle.css +1 -0
- package/dist/components/Advice/Advice.d.ts +6 -3
- package/dist/components/Advice/Advice.js +15 -15
- package/dist/components/Button/Button.d.ts +8 -0
- package/dist/components/Button/Button.js +1 -1
- package/dist/components/Button/Button.stories.d.ts +60 -0
- package/dist/components/Button/Button.stories.js +40 -0
- package/dist/components/Dialog/CloseIconButton.js +9 -9
- package/dist/components/Dialog/Dialog.d.ts +3 -2
- package/dist/components/Dialog/Dialog.js +10 -9
- package/dist/components/Dialog/Dialog.stories.d.ts +343 -0
- package/dist/components/Dialog/Dialog.stories.js +59 -0
- package/dist/components/Icon/Icon.d.ts +15 -4
- package/dist/components/Icon/Icon.js +92 -6
- package/dist/components/IconButton/IconButton.js +1 -1
- package/dist/components/Input/Input.d.ts +44 -0
- package/dist/components/Input/Input.js +497 -0
- package/dist/components/Input/Input.stories.d.ts +43 -0
- package/dist/components/Input/Input.stories.js +106 -0
- package/dist/components/LoadingSpinner/LoadingSpinner.d.ts +2 -0
- package/dist/components/LoadingSpinner/LoadingSpinner.stories.d.ts +14 -0
- package/dist/components/LoadingSpinner/LoadingSpinner.stories.js +38 -0
- package/dist/components/Pagination/Pagination.d.ts +1 -1
- package/dist/components/Pagination/Pagination.js +10 -10
- package/dist/components/Snackbar/Snackbar.d.ts +13 -0
- package/dist/components/Snackbar/Snackbar.js +622 -0
- package/dist/components/SortTooltip/SortTooltip.d.ts +1 -1
- package/dist/components/SortTooltip/SortTooltip.js +8 -8
- package/dist/components/Table/Table.js +12 -12
- package/dist/components/Tabs/Tab.js +2 -2
- package/dist/components/Tabs/TabPanel.js +1 -1
- package/dist/components/Tabs/Tabs.js +1 -1
- package/dist/components/Toggle/Toggle.d.ts +14 -0
- package/dist/components/Toggle/Toggle.js +256 -0
- package/dist/components/Tooltip/Tooltip.js +558 -655
- package/dist/components/Typography/Typography.d.ts +5 -5
- package/dist/components/Typography/Typography.stories.d.ts +13 -0
- package/dist/components/Typography/Typography.stories.js +15 -15
- package/dist/components/Typography/typography.test.js +5 -8
- package/dist/{Portal-P3fPvS3-.js → index-BNWbc5Kh.js} +5709 -5776
- package/dist/{index-D2P7y2mE.js → index-CqjC7P5Y.js} +4 -3
- package/dist/main.d.ts +16 -8
- package/dist/main.js +47 -27
- package/dist/useButton-Bc8IAgyk.js +106 -0
- package/dist/useIsFocusVisible-BH4IAdcw.js +69 -0
- package/dist/useTimeout-DxF9kiZL.js +36 -0
- package/package.json +5 -4
- package/dist/react-CGNQ6M5x.js +0 -117
- package/dist/useButton-JpyBo5M4.js +0 -187
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { _ as T, a as i } from "./objectWithoutPropertiesLoose-D7Cp0Pg_.js";
|
|
2
2
|
import * as c from "react";
|
|
3
|
-
import { g as _, a as x,
|
|
3
|
+
import { g as _, a as x, b as B, P as o, c as O, d as D } from "./index-CqjC7P5Y.js";
|
|
4
4
|
import { jsx as F } from "react/jsx-runtime";
|
|
5
|
-
import { u as S } from "./useButton-
|
|
5
|
+
import { u as S } from "./useButton-Bc8IAgyk.js";
|
|
6
6
|
const m = "Button";
|
|
7
7
|
function U(s) {
|
|
8
8
|
return _(m, s);
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import * as t from "react";
|
|
2
|
+
import { u as C, P as f } from "./index-CqjC7P5Y.js";
|
|
3
|
+
import { jsx as w } from "react/jsx-runtime";
|
|
4
|
+
import { u as L, o as h, e as b, a as g } from "./index-BNWbc5Kh.js";
|
|
5
|
+
function T(c) {
|
|
6
|
+
return c.substring(2).toLowerCase();
|
|
7
|
+
}
|
|
8
|
+
function D(c, s) {
|
|
9
|
+
return s.documentElement.clientWidth < c.clientX || s.documentElement.clientHeight < c.clientY;
|
|
10
|
+
}
|
|
11
|
+
function v(c) {
|
|
12
|
+
const {
|
|
13
|
+
children: s,
|
|
14
|
+
disableReactTree: y = !1,
|
|
15
|
+
mouseEvent: i = "onClick",
|
|
16
|
+
onClickAway: P,
|
|
17
|
+
touchEvent: u = "onTouchEnd"
|
|
18
|
+
} = c, l = t.useRef(!1), o = t.useRef(null), d = t.useRef(!1), p = t.useRef(!1);
|
|
19
|
+
t.useEffect(() => (setTimeout(() => {
|
|
20
|
+
d.current = !0;
|
|
21
|
+
}, 0), () => {
|
|
22
|
+
d.current = !1;
|
|
23
|
+
}), []);
|
|
24
|
+
const k = C(
|
|
25
|
+
// @ts-expect-error TODO upstream fix
|
|
26
|
+
s.ref,
|
|
27
|
+
o
|
|
28
|
+
), a = L((e) => {
|
|
29
|
+
const n = p.current;
|
|
30
|
+
p.current = !1;
|
|
31
|
+
const r = h(o.current);
|
|
32
|
+
if (!d.current || !o.current || "clientX" in e && D(e, r))
|
|
33
|
+
return;
|
|
34
|
+
if (l.current) {
|
|
35
|
+
l.current = !1;
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
let E;
|
|
39
|
+
e.composedPath ? E = e.composedPath().indexOf(o.current) > -1 : E = !r.documentElement.contains(
|
|
40
|
+
// @ts-expect-error returns `false` as intended when not dispatched from a Node
|
|
41
|
+
e.target
|
|
42
|
+
) || o.current.contains(
|
|
43
|
+
// @ts-expect-error returns `false` as intended when not dispatched from a Node
|
|
44
|
+
e.target
|
|
45
|
+
), !E && (y || !n) && P(e);
|
|
46
|
+
}), R = (e) => (n) => {
|
|
47
|
+
p.current = !0;
|
|
48
|
+
const r = s.props[e];
|
|
49
|
+
r && r(n);
|
|
50
|
+
}, m = {
|
|
51
|
+
ref: k
|
|
52
|
+
};
|
|
53
|
+
return u !== !1 && (m[u] = R(u)), t.useEffect(() => {
|
|
54
|
+
if (u !== !1) {
|
|
55
|
+
const e = T(u), n = h(o.current), r = () => {
|
|
56
|
+
l.current = !0;
|
|
57
|
+
};
|
|
58
|
+
return n.addEventListener(e, a), n.addEventListener("touchmove", r), () => {
|
|
59
|
+
n.removeEventListener(e, a), n.removeEventListener("touchmove", r);
|
|
60
|
+
};
|
|
61
|
+
}
|
|
62
|
+
}, [a, u]), i !== !1 && (m[i] = R(i)), t.useEffect(() => {
|
|
63
|
+
if (i !== !1) {
|
|
64
|
+
const e = T(i), n = h(o.current);
|
|
65
|
+
return n.addEventListener(e, a), () => {
|
|
66
|
+
n.removeEventListener(e, a);
|
|
67
|
+
};
|
|
68
|
+
}
|
|
69
|
+
}, [a, i]), /* @__PURE__ */ w(t.Fragment, {
|
|
70
|
+
children: /* @__PURE__ */ t.cloneElement(s, m)
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
process.env.NODE_ENV !== "production" && (v.propTypes = {
|
|
74
|
+
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
75
|
+
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
76
|
+
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
77
|
+
// └─────────────────────────────────────────────────────────────────────┘
|
|
78
|
+
/**
|
|
79
|
+
* The wrapped element.
|
|
80
|
+
*/
|
|
81
|
+
children: b.isRequired,
|
|
82
|
+
/**
|
|
83
|
+
* If `true`, the React tree is ignored and only the DOM tree is considered.
|
|
84
|
+
* This prop changes how portaled elements are handled.
|
|
85
|
+
* @default false
|
|
86
|
+
*/
|
|
87
|
+
disableReactTree: f.bool,
|
|
88
|
+
/**
|
|
89
|
+
* The mouse event to listen to. You can disable the listener by providing `false`.
|
|
90
|
+
* @default 'onClick'
|
|
91
|
+
*/
|
|
92
|
+
mouseEvent: f.oneOf(["onClick", "onMouseDown", "onMouseUp", "onPointerDown", "onPointerUp", !1]),
|
|
93
|
+
/**
|
|
94
|
+
* Callback fired when a "click away" event is detected.
|
|
95
|
+
*/
|
|
96
|
+
onClickAway: f.func.isRequired,
|
|
97
|
+
/**
|
|
98
|
+
* The touch event to listen to. You can disable the listener by providing `false`.
|
|
99
|
+
* @default 'onTouchEnd'
|
|
100
|
+
*/
|
|
101
|
+
touchEvent: f.oneOf(["onTouchEnd", "onTouchStart", !1])
|
|
102
|
+
});
|
|
103
|
+
process.env.NODE_ENV !== "production" && (v.propTypes = g(v.propTypes));
|
|
104
|
+
export {
|
|
105
|
+
v as C
|
|
106
|
+
};
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import * as o from "react";
|
|
2
|
+
import { r as P, a as y } from "./index-BNWbc5Kh.js";
|
|
3
|
+
import { u as T, s as a, P as i } from "./index-CqjC7P5Y.js";
|
|
4
|
+
import { jsx as c } from "react/jsx-runtime";
|
|
5
|
+
import { u as f } from "./useEnhancedEffect-CJGo-L3B.js";
|
|
6
|
+
function N(t, l, s, n, u) {
|
|
7
|
+
if (process.env.NODE_ENV === "production")
|
|
8
|
+
return null;
|
|
9
|
+
const e = t[l], r = u || l;
|
|
10
|
+
return e == null ? null : e && e.nodeType !== 1 ? new Error(`Invalid ${n} \`${r}\` supplied to \`${s}\`. Expected an HTMLElement.`) : null;
|
|
11
|
+
}
|
|
12
|
+
function h(t) {
|
|
13
|
+
return typeof t == "function" ? t() : t;
|
|
14
|
+
}
|
|
15
|
+
const p = /* @__PURE__ */ o.forwardRef(function(l, s) {
|
|
16
|
+
const {
|
|
17
|
+
children: n,
|
|
18
|
+
container: u,
|
|
19
|
+
disablePortal: e = !1
|
|
20
|
+
} = l, [r, d] = o.useState(null), m = T(/* @__PURE__ */ o.isValidElement(n) ? n.ref : null, s);
|
|
21
|
+
if (f(() => {
|
|
22
|
+
e || d(h(u) || document.body);
|
|
23
|
+
}, [u, e]), f(() => {
|
|
24
|
+
if (r && !e)
|
|
25
|
+
return a(s, r), () => {
|
|
26
|
+
a(s, null);
|
|
27
|
+
};
|
|
28
|
+
}, [s, r, e]), e) {
|
|
29
|
+
if (/* @__PURE__ */ o.isValidElement(n)) {
|
|
30
|
+
const E = {
|
|
31
|
+
ref: m
|
|
32
|
+
};
|
|
33
|
+
return /* @__PURE__ */ o.cloneElement(n, E);
|
|
34
|
+
}
|
|
35
|
+
return /* @__PURE__ */ c(o.Fragment, {
|
|
36
|
+
children: n
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
return /* @__PURE__ */ c(o.Fragment, {
|
|
40
|
+
children: r && /* @__PURE__ */ P.createPortal(n, r)
|
|
41
|
+
});
|
|
42
|
+
});
|
|
43
|
+
process.env.NODE_ENV !== "production" && (p.propTypes = {
|
|
44
|
+
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
45
|
+
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
46
|
+
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
47
|
+
// └─────────────────────────────────────────────────────────────────────┘
|
|
48
|
+
/**
|
|
49
|
+
* The children to render into the `container`.
|
|
50
|
+
*/
|
|
51
|
+
children: i.node,
|
|
52
|
+
/**
|
|
53
|
+
* An HTML element or function that returns one.
|
|
54
|
+
* The `container` will have the portal children appended to it.
|
|
55
|
+
*
|
|
56
|
+
* You can also provide a callback, which is called in a React layout effect.
|
|
57
|
+
* This lets you set the container from a ref, and also makes server-side rendering possible.
|
|
58
|
+
*
|
|
59
|
+
* By default, it uses the body of the top-level document object,
|
|
60
|
+
* so it's simply `document.body` most of the time.
|
|
61
|
+
*/
|
|
62
|
+
container: i.oneOfType([N, i.func]),
|
|
63
|
+
/**
|
|
64
|
+
* The `children` will be under the DOM hierarchy of the parent component.
|
|
65
|
+
* @default false
|
|
66
|
+
*/
|
|
67
|
+
disablePortal: i.bool
|
|
68
|
+
});
|
|
69
|
+
process.env.NODE_ENV !== "production" && (p.propTypes = y(p.propTypes));
|
|
70
|
+
export {
|
|
71
|
+
N as H,
|
|
72
|
+
p as P
|
|
73
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._input_hm5q2_1 *{box-sizing:border-box}._input__label_hm5q2_4{display:block;margin-bottom:.3125rem;color:var(--gray-75)}._input__input-el-wrapper_hm5q2_9{display:flex;align-items:center;border:solid .0625rem var(--gray-25);border-radius:.375rem;transition:all .3s}._input__input-el_hm5q2_9{all:unset;width:100%;height:2.5rem;padding:0 1rem;font-size:var(--form-input-font-size);font-weight:var(--form-input-font-weight);line-height:var(--form-input-line-height);color:var(--gray-90);outline:none}._input__input-el_hm5q2_9::placeholder{color:var(--gray-50)}._input__left-icon_hm5q2_30{padding-left:1rem}._input__right-icon_hm5q2_33{padding-right:1rem}._input__messages-wrapper_hm5q2_36{display:flex;align-items:center;justify-content:space-between}._input__messages-wrapper_hm5q2_36:not(:empty){margin-top:.3125rem}._input__info-message_hm5q2_44,._input__error-message_hm5q2_44{display:flex;gap:.375rem;align-items:center}._input__info-message_hm5q2_44{color:var(--gray-75)}._input__error-message_hm5q2_44{color:var(--alert)}._input__chars-counter_hm5q2_55{margin-left:auto;color:var(--gray-75)}._input--disabled_hm5q2_59 ._input__input-el_hm5q2_9{color:var(--gray-50)}._input_hm5q2_1:has(._input--disabled_hm5q2_59) ._input__label_hm5q2_4{color:var(--gray-25)}._input--focused_hm5q2_65._input__input-el-wrapper_hm5q2_9{border-color:var(--accent)}._input--error_hm5q2_68._input__input-el-wrapper_hm5q2_9{border-color:var(--alert)}._input__input-el-wrapper_hm5q2_9:hover:not(._input--disabled_hm5q2_59,._input--focused_hm5q2_65,._input--error_hm5q2_68){border-color:var(--gray-75)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._snackbar_1xdf2_1{display:block;width:40.5rem;margin:0 auto}@keyframes _bottomToTop_1xdf2_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}._snackbar__snackbar-el-wrapper_1xdf2_14{position:fixed;bottom:1rem;z-index:5500}._snackbar--content_1xdf2_19{display:flex;justify-content:space-between;width:40.5rem;height:3.5rem;padding:1rem;overflow:hidden;border-radius:8px}._snackbar_1xdf2_1:has(._snackbar--success_1xdf2_28) ._snackbar--content_1xdf2_19{background-color:var(--secondary-green-darker)}._snackbar_1xdf2_1:has(._snackbar--error_1xdf2_31) ._snackbar--content_1xdf2_19{background-color:var(--alert)}._snackbar_1xdf2_1:has(._snackbar--attention_1xdf2_34) ._snackbar--content_1xdf2_19{background-color:var(--secondary-orange)}._snackbar--message_1xdf2_37{text-align:start}._snackbar--message_1xdf2_37 p{font-size:1rem;font-weight:900;color:var(--white-100)}._snackbar--action_1xdf2_45{position:absolute;top:1rem;right:1rem;padding:0;margin:0;cursor:pointer;background:none;border:none}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._toggle_r6ihm_1{position:relative;display:flex;gap:1rem;align-items:center;cursor:pointer}._toggle_r6ihm_1 *{box-sizing:border-box}._toggle__toggle-el-wrapper_r6ihm_11{width:2.25rem;height:1.5rem}._toggle_r6ihm_1 ._input_r6ihm_15{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;margin:0;cursor:inherit;opacity:0}._toggle_r6ihm_1 ._thumb_r6ihm_26{position:relative;top:.375rem;left:.375rem;display:block;width:.75rem;height:.75rem;background-color:var(--gray-90);border-radius:.75rem;opacity:.4;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.12s;transition-property:all}._toggle_r6ihm_1 ._track_r6ihm_40{position:absolute;display:block;width:2.25rem;height:1.5rem;background:var(--white-100);border-radius:1.5rem;box-shadow:inset 0 0 0 .25rem var(--gray-50);opacity:.4}._toggle--focus-visible_r6ihm_50._toggle__toggle-el-wrapper_r6ihm_11 ._track_r6ihm_40{border:1px solid var(--black-100);opacity:1}._toggle--checked_r6ihm_54._toggle__toggle-el-wrapper_r6ihm_11 ._thumb_r6ihm_26{left:1.125rem;background-color:var(--accent);opacity:1}._toggle--checked_r6ihm_54._toggle__toggle-el-wrapper_r6ihm_11 ._track_r6ihm_40{background:var(--accent);box-shadow:none;opacity:.4}._toggle__label_r6ihm_64{font-size:.875rem;font-weight:400;color:var(--gray-75)}._toggle__toggle-el-wrapper_r6ihm_11:hover:not(._toggle--focus-visible_r6ihm_50,._toggle--checked_r6ihm_54,._toggle--disabled_r6ihm_69) ._track_r6ihm_40{border-color:var(--gray-90);opacity:1}._toggle__toggle-el-wrapper_r6ihm_11:hover:not(._toggle--focus-visible_r6ihm_50,._toggle--checked_r6ihm_54,._toggle--disabled_r6ihm_69) ._thumb_r6ihm_26{opacity:1}._toggle_r6ihm_1:has(._toggle__toggle-el-wrapper_r6ihm_11:hover:not(._toggle--focus-visible_r6ihm_50,._toggle--checked_r6ihm_54,._toggle--disabled_r6ihm_69)) ._toggle__label_r6ihm_64{color:var(--black-100)}._toggle_r6ihm_1:has(._toggle--disabled_r6ihm_69) ._toggle__label_r6ihm_64{color:var(--gray-50)}._toggle_r6ihm_1:has(._toggle--checked_r6ihm_54) ._toggle__label_r6ihm_64{font-weight:900;color:var(--accent)}._toggle_r6ihm_1:has(._toggle--focus-visible_r6ihm_50) ._toggle__label_r6ihm_64{color:var(--black-100)}
|
|
@@ -1,13 +1,16 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Icon } from '../Icon/Icon';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
|
|
4
4
|
export type AdviceTypes = 'without-results' | 'no-permission';
|
|
5
5
|
export type AdviceProps = {
|
|
6
|
-
icon?:
|
|
6
|
+
icon?: React.ComponentProps<typeof Icon>;
|
|
7
|
+
IconSvg?: React.FunctionComponent<React.SVGProps<SVGSVGElement> & {
|
|
8
|
+
title?: string | undefined;
|
|
9
|
+
}>;
|
|
7
10
|
type?: AdviceTypes;
|
|
8
11
|
content: ReactNode;
|
|
9
12
|
className?: string;
|
|
10
13
|
'data-testid'?: string;
|
|
11
14
|
};
|
|
12
|
-
declare const Advice: ({ icon, type, content, className, ...rest }: AdviceProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
declare const Advice: ({ icon, type, content, className, IconSvg, ...rest }: AdviceProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
16
|
export { Advice };
|
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
import '../../assets/Advice.css';
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import { c as
|
|
4
|
-
import { Icon as
|
|
5
|
-
const
|
|
6
|
-
advice:
|
|
7
|
-
content:
|
|
8
|
-
},
|
|
2
|
+
import { jsxs as m, jsx as t } from "react/jsx-runtime";
|
|
3
|
+
import { c as y } from "../../clsx-DB4S2d7J.js";
|
|
4
|
+
import { Icon as n } from "../Icon/Icon.js";
|
|
5
|
+
const f = "_advice_1yug7_1", h = "_content_1yug7_7", l = {
|
|
6
|
+
advice: f,
|
|
7
|
+
content: h
|
|
8
|
+
}, d = {
|
|
9
9
|
"no-permission": "eye-slash",
|
|
10
10
|
"without-results": "folder-magnifying-glass"
|
|
11
|
-
},
|
|
12
|
-
const
|
|
11
|
+
}, g = ({ icon: s, type: o, content: r, className: i, IconSvg: a, ...c }) => {
|
|
12
|
+
const e = {
|
|
13
13
|
color: (s == null ? void 0 : s.color) || "var(--accent)",
|
|
14
14
|
size: (s == null ? void 0 : s.size) || "3.375rem",
|
|
15
|
-
icon:
|
|
16
|
-
iconFamily:
|
|
15
|
+
icon: d[o] || (s == null ? void 0 : s.icon) || "",
|
|
16
|
+
iconFamily: d[o] ? "fa/duotone" : (s == null ? void 0 : s.iconFamily) || "fa/duotone"
|
|
17
17
|
};
|
|
18
|
-
return /* @__PURE__ */
|
|
19
|
-
/* @__PURE__ */
|
|
20
|
-
typeof
|
|
18
|
+
return /* @__PURE__ */ m("div", { className: y(l.advice, i), ...c, children: [
|
|
19
|
+
a ? /* @__PURE__ */ t(a, { style: { color: e.color, height: e.size, width: e.size } }) : /* @__PURE__ */ t(n, { ...e }),
|
|
20
|
+
typeof r == "string" ? /* @__PURE__ */ t("p", { children: r }) : /* @__PURE__ */ t("div", { className: l.content, children: r })
|
|
21
21
|
] });
|
|
22
22
|
};
|
|
23
23
|
export {
|
|
24
|
-
|
|
24
|
+
g as Advice
|
|
25
25
|
};
|
|
@@ -3,17 +3,25 @@ import { ReactNode } from 'react';
|
|
|
3
3
|
|
|
4
4
|
type Variant = 'primary' | 'secondary' | 'quick';
|
|
5
5
|
type ButtonCoreProps = {
|
|
6
|
+
/** Button to display and act in a loading state */
|
|
6
7
|
loading?: boolean;
|
|
8
|
+
/** Button to display and act in a disabled state */
|
|
7
9
|
disabled?: boolean;
|
|
10
|
+
/** Space seperated list of CSS classes to apply */
|
|
8
11
|
className?: string;
|
|
12
|
+
/** Text or children to display */
|
|
9
13
|
children: ReactNode;
|
|
14
|
+
/** Space seperated list of CSS classes to apply */
|
|
10
15
|
variant?: Variant;
|
|
11
16
|
};
|
|
12
17
|
interface ButtonPropsWithLink extends ButtonCoreProps {
|
|
18
|
+
/** link for component to navigate to, if provide component will be an anchor */
|
|
13
19
|
link: string;
|
|
14
20
|
}
|
|
15
21
|
interface ButtonPropsWithOnClick extends ButtonCoreProps {
|
|
22
|
+
/** functionality to perform once clicked */
|
|
16
23
|
onClick: () => void;
|
|
24
|
+
/** HTML type of button */
|
|
17
25
|
type?: HTMLButtonElement['type'];
|
|
18
26
|
}
|
|
19
27
|
export type ButtonProps = Either<ButtonPropsWithLink, ButtonPropsWithOnClick>;
|
|
@@ -3,7 +3,7 @@ import { jsx as e, jsxs as a } from "react/jsx-runtime";
|
|
|
3
3
|
import { forwardRef as m, useMemo as c } from "react";
|
|
4
4
|
import { c as y } from "../../clsx-DB4S2d7J.js";
|
|
5
5
|
import { LoadingSpinner as g } from "../LoadingSpinner/LoadingSpinner.js";
|
|
6
|
-
import { B as f } from "../../Button-
|
|
6
|
+
import { B as f } from "../../Button-B1umG8kJ.js";
|
|
7
7
|
const k = "_h1_2qr61_1", p = "_h2_2qr61_11", w = "_h3_2qr61_21", x = "_h4_2qr61_31", N = "_body_2qr61_41", v = "_quote_2qr61_75", B = "_form__input_2qr61_98", j = "_form__hint_2qr61_103", S = "_form__label_2qr61_108", $ = "_form__dropdown_2qr61_113", C = "_table__header_2qr61_131", L = "_table__body_2qr61_136", M = "_button_2qr61_159", r = {
|
|
8
8
|
h1: k,
|
|
9
9
|
"h1--bold": "_h1--bold_2qr61_7",
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react';
|
|
2
|
+
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: import('react').ForwardRefExoticComponent<import('./Button').ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
6
|
+
tags: string[];
|
|
7
|
+
decorators: ((Story: import('@storybook/types').PartialStoryFn<import('@storybook/react').ReactRenderer, {
|
|
8
|
+
link: string;
|
|
9
|
+
loading?: boolean | undefined;
|
|
10
|
+
disabled?: boolean | undefined;
|
|
11
|
+
className?: string | undefined;
|
|
12
|
+
children: import('react').ReactNode;
|
|
13
|
+
variant?: ("primary" | "secondary" | "quick") | undefined;
|
|
14
|
+
type?: undefined;
|
|
15
|
+
onClick?: undefined;
|
|
16
|
+
ref?: import('react').LegacyRef<HTMLButtonElement> | undefined;
|
|
17
|
+
key?: import('react').Key | null | undefined;
|
|
18
|
+
} | {
|
|
19
|
+
onClick: () => void;
|
|
20
|
+
type?: "button" | "submit" | "reset" | undefined;
|
|
21
|
+
loading?: boolean | undefined;
|
|
22
|
+
disabled?: boolean | undefined;
|
|
23
|
+
className?: string | undefined;
|
|
24
|
+
children: import('react').ReactNode;
|
|
25
|
+
variant?: ("primary" | "secondary" | "quick") | undefined;
|
|
26
|
+
link?: undefined;
|
|
27
|
+
ref?: import('react').LegacyRef<HTMLButtonElement> | undefined;
|
|
28
|
+
key?: import('react').Key | null | undefined;
|
|
29
|
+
}>) => import("react/jsx-runtime").JSX.Element)[];
|
|
30
|
+
argTypes: {
|
|
31
|
+
onClick: {
|
|
32
|
+
if: {
|
|
33
|
+
arg: string;
|
|
34
|
+
exists: false;
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
type: {
|
|
38
|
+
control: {
|
|
39
|
+
type: "text";
|
|
40
|
+
};
|
|
41
|
+
if: {
|
|
42
|
+
arg: string;
|
|
43
|
+
exists: true;
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
link: {
|
|
47
|
+
control: {
|
|
48
|
+
type: "text";
|
|
49
|
+
};
|
|
50
|
+
if: {
|
|
51
|
+
arg: string;
|
|
52
|
+
exists: false;
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
export default meta;
|
|
58
|
+
type Story = StoryObj<typeof meta>;
|
|
59
|
+
export declare const Simple: Story;
|
|
60
|
+
export declare const Link: Story;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import '../../assets/global.css';
|
|
2
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
3
|
+
/* empty css */
|
|
4
|
+
import { Button as i } from "./Button.js";
|
|
5
|
+
import "react";
|
|
6
|
+
import "../Dialog/Backdrop.js";
|
|
7
|
+
import "../Typography/Typography.js";
|
|
8
|
+
import "../IconButton/IconButton.js";
|
|
9
|
+
import "../Table/Table.js";
|
|
10
|
+
import "../Tabs/Tabs.js";
|
|
11
|
+
const d = {
|
|
12
|
+
title: "Components/Button",
|
|
13
|
+
component: i,
|
|
14
|
+
tags: ["autodocs"],
|
|
15
|
+
decorators: [
|
|
16
|
+
(o) => /* @__PURE__ */ t("div", { style: { padding: "1em" }, children: /* @__PURE__ */ t(o, {}) })
|
|
17
|
+
],
|
|
18
|
+
argTypes: {
|
|
19
|
+
onClick: {
|
|
20
|
+
if: { arg: "link", exists: !1 }
|
|
21
|
+
},
|
|
22
|
+
type: {
|
|
23
|
+
control: { type: "text" },
|
|
24
|
+
if: { arg: "onClick", exists: !0 }
|
|
25
|
+
},
|
|
26
|
+
link: {
|
|
27
|
+
control: { type: "text" },
|
|
28
|
+
if: { arg: "onClick", exists: !1 }
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}, k = {
|
|
32
|
+
args: { children: "Button", onClick: () => alert("Button was clicked!") }
|
|
33
|
+
}, f = {
|
|
34
|
+
args: { children: "Button", link: "https://marola.pismolabs.io" }
|
|
35
|
+
};
|
|
36
|
+
export {
|
|
37
|
+
f as Link,
|
|
38
|
+
k as Simple,
|
|
39
|
+
d as default
|
|
40
|
+
};
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import { jsx as s } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { Icon as r } from "../Icon/Icon.js";
|
|
3
3
|
import { s as t } from "../../Dialog.module-CGVM5V_D.js";
|
|
4
|
-
import { B as
|
|
5
|
-
const
|
|
6
|
-
const
|
|
4
|
+
import { B as a } from "../../Button-B1umG8kJ.js";
|
|
5
|
+
const d = ({ handleOnClose: i, className: o }) => {
|
|
6
|
+
const l = o != null ? t["dialog__close-icon "] + o : t["dialog__close-icon"];
|
|
7
7
|
return /* @__PURE__ */ s(
|
|
8
|
-
|
|
8
|
+
a,
|
|
9
9
|
{
|
|
10
|
-
className:
|
|
10
|
+
className: l,
|
|
11
11
|
"aria-description": "Close dialog",
|
|
12
|
-
onClick:
|
|
12
|
+
onClick: i,
|
|
13
13
|
"data-testid": "dialog-close-button",
|
|
14
|
-
children: /* @__PURE__ */ s(
|
|
14
|
+
children: /* @__PURE__ */ s(r, { icon: "circle-xmark", size: 32, color: "var(--gray-75)" })
|
|
15
15
|
}
|
|
16
16
|
);
|
|
17
17
|
};
|
|
18
18
|
export {
|
|
19
|
-
|
|
19
|
+
d as default
|
|
20
20
|
};
|
|
@@ -6,7 +6,7 @@ import { JSXElementConstructor, ReactElement, ReactNode } from 'react';
|
|
|
6
6
|
|
|
7
7
|
export type CloseReason = 'backdropClick' | 'escapeKeyDown' | 'closeButtonClick';
|
|
8
8
|
export interface DialogProps extends ModalProps {
|
|
9
|
-
/** main
|
|
9
|
+
/** main content */
|
|
10
10
|
children: ReactElement<unknown, string | JSXElementConstructor<unknown>>;
|
|
11
11
|
/** display title label */
|
|
12
12
|
dialogTitle: ReactNode;
|
|
@@ -14,7 +14,8 @@ export interface DialogProps extends ModalProps {
|
|
|
14
14
|
dialogSubtitle?: ReactNode;
|
|
15
15
|
/** if true, show skeleton */
|
|
16
16
|
isLoading?: boolean;
|
|
17
|
-
|
|
17
|
+
/** callback for when close is clicked */
|
|
18
|
+
onClose?: () => void;
|
|
18
19
|
}
|
|
19
20
|
declare const Dialog: ({ children, dialogTitle, dialogSubtitle, isLoading, onClose, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element;
|
|
20
21
|
export { Dialog, DialogTitle, Content, Actions };
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import { jsxs as $, jsx as S } from "react/jsx-runtime";
|
|
2
|
-
import { default as
|
|
2
|
+
import { default as $e } from "./Actions.js";
|
|
3
3
|
import oe from "./Backdrop.js";
|
|
4
4
|
import re from "./CloseIconButton.js";
|
|
5
|
-
import { default as
|
|
5
|
+
import { default as ze } from "./Content.js";
|
|
6
6
|
import { s as q } from "../../Dialog.module-CGVM5V_D.js";
|
|
7
7
|
import se from "./Title.js";
|
|
8
8
|
import { a as C, _ as ie } from "../../objectWithoutPropertiesLoose-D7Cp0Pg_.js";
|
|
9
9
|
import * as f from "react";
|
|
10
|
-
import {
|
|
11
|
-
import { o as w, e as ee, a as fe, u as G
|
|
10
|
+
import { u as Z, P as i, e as ae, g as le, a as ce, b as z, c as de, d as ue } from "../../index-CqjC7P5Y.js";
|
|
11
|
+
import { o as w, e as ee, a as fe, u as G } from "../../index-BNWbc5Kh.js";
|
|
12
|
+
import { P as pe, H as be } from "../../Portal-BcdMtRGF.js";
|
|
12
13
|
function X(...e) {
|
|
13
14
|
return e.reduce((t, o) => o == null ? t : function(...s) {
|
|
14
15
|
t.apply(this, s), o.apply(this, s);
|
|
@@ -612,7 +613,7 @@ process.env.NODE_ENV !== "production" && (ne.propTypes = {
|
|
|
612
613
|
root: i.elementType
|
|
613
614
|
})
|
|
614
615
|
});
|
|
615
|
-
const
|
|
616
|
+
const je = ({
|
|
616
617
|
children: e,
|
|
617
618
|
dialogTitle: t,
|
|
618
619
|
dialogSubtitle: o,
|
|
@@ -637,9 +638,9 @@ const We = ({
|
|
|
637
638
|
}
|
|
638
639
|
);
|
|
639
640
|
export {
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
641
|
+
$e as Actions,
|
|
642
|
+
ze as Content,
|
|
643
|
+
je as Dialog,
|
|
643
644
|
se as DialogTitle,
|
|
644
|
-
|
|
645
|
+
je as default
|
|
645
646
|
};
|