@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.
Files changed (54) hide show
  1. package/dist/{Button-W6tM-_IT.js → Button-B1umG8kJ.js} +2 -2
  2. package/dist/ClickAwayListener-BKznXF1d.js +106 -0
  3. package/dist/Portal-BcdMtRGF.js +73 -0
  4. package/dist/assets/Input.css +1 -0
  5. package/dist/assets/Snackbar.css +1 -0
  6. package/dist/assets/Toggle.css +1 -0
  7. package/dist/components/Advice/Advice.d.ts +6 -3
  8. package/dist/components/Advice/Advice.js +15 -15
  9. package/dist/components/Button/Button.d.ts +8 -0
  10. package/dist/components/Button/Button.js +1 -1
  11. package/dist/components/Button/Button.stories.d.ts +60 -0
  12. package/dist/components/Button/Button.stories.js +40 -0
  13. package/dist/components/Dialog/CloseIconButton.js +9 -9
  14. package/dist/components/Dialog/Dialog.d.ts +3 -2
  15. package/dist/components/Dialog/Dialog.js +10 -9
  16. package/dist/components/Dialog/Dialog.stories.d.ts +343 -0
  17. package/dist/components/Dialog/Dialog.stories.js +59 -0
  18. package/dist/components/Icon/Icon.d.ts +15 -4
  19. package/dist/components/Icon/Icon.js +92 -6
  20. package/dist/components/IconButton/IconButton.js +1 -1
  21. package/dist/components/Input/Input.d.ts +44 -0
  22. package/dist/components/Input/Input.js +497 -0
  23. package/dist/components/Input/Input.stories.d.ts +43 -0
  24. package/dist/components/Input/Input.stories.js +106 -0
  25. package/dist/components/LoadingSpinner/LoadingSpinner.d.ts +2 -0
  26. package/dist/components/LoadingSpinner/LoadingSpinner.stories.d.ts +14 -0
  27. package/dist/components/LoadingSpinner/LoadingSpinner.stories.js +38 -0
  28. package/dist/components/Pagination/Pagination.d.ts +1 -1
  29. package/dist/components/Pagination/Pagination.js +10 -10
  30. package/dist/components/Snackbar/Snackbar.d.ts +13 -0
  31. package/dist/components/Snackbar/Snackbar.js +622 -0
  32. package/dist/components/SortTooltip/SortTooltip.d.ts +1 -1
  33. package/dist/components/SortTooltip/SortTooltip.js +8 -8
  34. package/dist/components/Table/Table.js +12 -12
  35. package/dist/components/Tabs/Tab.js +2 -2
  36. package/dist/components/Tabs/TabPanel.js +1 -1
  37. package/dist/components/Tabs/Tabs.js +1 -1
  38. package/dist/components/Toggle/Toggle.d.ts +14 -0
  39. package/dist/components/Toggle/Toggle.js +256 -0
  40. package/dist/components/Tooltip/Tooltip.js +558 -655
  41. package/dist/components/Typography/Typography.d.ts +5 -5
  42. package/dist/components/Typography/Typography.stories.d.ts +13 -0
  43. package/dist/components/Typography/Typography.stories.js +15 -15
  44. package/dist/components/Typography/typography.test.js +5 -8
  45. package/dist/{Portal-P3fPvS3-.js → index-BNWbc5Kh.js} +5709 -5776
  46. package/dist/{index-D2P7y2mE.js → index-CqjC7P5Y.js} +4 -3
  47. package/dist/main.d.ts +16 -8
  48. package/dist/main.js +47 -27
  49. package/dist/useButton-Bc8IAgyk.js +106 -0
  50. package/dist/useIsFocusVisible-BH4IAdcw.js +69 -0
  51. package/dist/useTimeout-DxF9kiZL.js +36 -0
  52. package/package.json +5 -4
  53. package/dist/react-CGNQ6M5x.js +0 -117
  54. 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, u as B, P as o, c as O, b as D } from "./index-D2P7y2mE.js";
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-JpyBo5M4.js";
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 { IconProps } from '../Icon/Icon';
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?: Partial<IconProps>;
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 d, jsx as r } from "react/jsx-runtime";
3
- import { c as i } from "../../clsx-DB4S2d7J.js";
4
- import { Icon as v } from "../Icon/Icon.js";
5
- const y = "_advice_1yug7_1", n = "_content_1yug7_7", a = {
6
- advice: y,
7
- content: n
8
- }, l = {
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
- }, _ = ({ icon: s, type: t, content: e, className: o, ...m }) => {
12
- const c = {
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: l[t] || (s == null ? void 0 : s.icon) || "",
16
- iconFamily: l[t] || s == null ? void 0 : s.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__ */ d("div", { className: i(a.advice, o), ...m, children: [
19
- /* @__PURE__ */ r(v, { ...c }),
20
- typeof e == "string" ? /* @__PURE__ */ r("p", { children: e }) : /* @__PURE__ */ r("div", { className: a.content, children: e })
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
- _ as Advice
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-W6tM-_IT.js";
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 { W as l } from "../../react-CGNQ6M5x.js";
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 r } from "../../Button-W6tM-_IT.js";
5
- const m = ({ handleOnClose: a, className: o }) => {
6
- const i = o != null ? t["dialog__close-icon "] + o : t["dialog__close-icon"];
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
- r,
8
+ a,
9
9
  {
10
- className: i,
10
+ className: l,
11
11
  "aria-description": "Close dialog",
12
- onClick: a,
12
+ onClick: i,
13
13
  "data-testid": "dialog-close-button",
14
- children: /* @__PURE__ */ s(l, { icon: "fa/duotone/circle-xmark", size: 32, color: "var(--gray-75)" })
14
+ children: /* @__PURE__ */ s(r, { icon: "circle-xmark", size: 32, color: "var(--gray-75)" })
15
15
  }
16
16
  );
17
17
  };
18
18
  export {
19
- m as default
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 children content */
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
- onClose: () => void;
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 Ve } from "./Actions.js";
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 Ye } from "./Content.js";
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 { d as Z, P as i, e as ae, g as le, a as ce, u as z, c as de, b as ue } from "../../index-D2P7y2mE.js";
11
- import { o as w, e as ee, a as fe, u as G, P as pe, H as be } from "../../Portal-P3fPvS3-.js";
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 We = ({
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
- Ve as Actions,
641
- Ye as Content,
642
- We as Dialog,
641
+ $e as Actions,
642
+ ze as Content,
643
+ je as Dialog,
643
644
  se as DialogTitle,
644
- We as default
645
+ je as default
645
646
  };