@pismo/marola 2.1.14 → 2.1.15

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.
@@ -1 +1 @@
1
- ._container_kdqr0_1{width:100%;height:56px;border-top:1px solid var(--border-secondary)}._container-grid_kdqr0_6{display:grid;grid-template-columns:1fr 1.5fr .5fr 5fr 2fr 2fr;align-items:center;justify-content:space-between;padding:12px 16px}._container-pending_kdqr0_13{display:flex;align-items:center;justify-content:flex-start;padding:12px 16px}._container-pending--right_kdqr0_19{margin-left:auto}._container_kdqr0_1 :hover{cursor:pointer;background-color:var(--border-secondary)}._info-section_kdqr0_27{display:flex}._info-section--item_kdqr0_30{padding-left:8px}._info-section--item_kdqr0_30:not(:first-child){margin-left:8px;border-left:1px solid var(--border-secondary)}._info-section--right_kdqr0_37{display:flex;justify-content:flex-end}
1
+ ._container_sv3th_1{width:100%;height:56px;border-top:1px solid var(--border-secondary)}._container-grid_sv3th_6{display:grid;grid-template-columns:1fr 1.5fr .5fr 5fr 2fr 2fr;align-items:center;justify-content:space-between;padding:12px 16px}._container-pending_sv3th_13{display:flex;align-items:center;justify-content:flex-start;padding:12px 16px}._container-pending--right_sv3th_19{margin-left:auto}._container_sv3th_1 :hover{cursor:pointer;background-color:var(--border-secondary)}._info-section_sv3th_27,._info-section--content_sv3th_31{width:100%;overflow:hidden}._info-section--item_sv3th_35{display:inline-flex;flex-shrink:0;padding-left:8px}._info-section--item_sv3th_35:not(:last-child){flex-shrink:0}._info-section--item_sv3th_35:last-child{flex-shrink:1;min-width:0;overflow:hidden}._info-section--item_sv3th_35:not(:first-child){margin-left:8px;border-left:1px solid var(--border-secondary)}._info-section--right_sv3th_52{display:flex;justify-content:flex-end}._info-section_sv3th_27 ._truncate-text_sv3th_56{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._info-section_sv3th_27 ._separator_sv3th_63{display:inline-block;width:1px;height:16px;margin:0 8px;vertical-align:middle;background-color:var(--border-secondary)}
@@ -1,49 +1,89 @@
1
- import { jsx as e, jsxs as c } from "react/jsx-runtime";
2
- import { Avatar as y } from "../Avatar/Avatar.js";
3
- import { Icon as f } from "../Icon/Icon.js";
4
- import { SkeletonCircle as _, Skeleton as r } from "../Skeleton/Skeleton.js";
1
+ import { jsx as e, jsxs as s, Fragment as o } from "react/jsx-runtime";
2
+ import { Avatar as _ } from "../Avatar/Avatar.js";
3
+ import { Icon as y } from "../Icon/Icon.js";
4
+ import { SkeletonCircle as f, Skeleton as r } from "../Skeleton/Skeleton.js";
5
5
  import { Typography as a } from "../Typography/Typography.js";
6
- import '../../assets/TransactionRow.css';const b = "_container_kdqr0_1", i = {
7
- container: b,
8
- "container-grid": "_container-grid_kdqr0_6",
9
- "container-pending": "_container-pending_kdqr0_13",
10
- "container-pending--right": "_container-pending--right_kdqr0_19",
11
- "info-section": "_info-section_kdqr0_27",
12
- "info-section--item": "_info-section--item_kdqr0_30",
13
- "info-section--right": "_info-section--right_kdqr0_37"
14
- }, A = ({
15
- dateTime: p,
16
- category: s,
17
- categoryType: l,
18
- name: d,
6
+ import '../../assets/TransactionRow.css';const k = "_container_sv3th_1", w = "_separator_sv3th_63", n = {
7
+ container: k,
8
+ "container-grid": "_container-grid_sv3th_6",
9
+ "container-pending": "_container-pending_sv3th_13",
10
+ "container-pending--right": "_container-pending--right_sv3th_19",
11
+ "info-section": "_info-section_sv3th_27",
12
+ "info-section--content": "_info-section--content_sv3th_31",
13
+ "info-section--item": "_info-section--item_sv3th_35",
14
+ "info-section--right": "_info-section--right_sv3th_52",
15
+ "truncate-text": "_truncate-text_sv3th_56",
16
+ separator: w
17
+ }, D = ({
18
+ dateTime: g,
19
+ category: l,
20
+ categoryType: d,
21
+ name: h,
19
22
  type: N,
20
- installments: h,
21
- amount: v,
22
- month: g,
23
- icon: m,
24
- onClick: o,
25
- isPendingTransaction: k,
26
- isLoading: t = !1,
27
- "data-testid": n = "Description"
28
- }) => k ? /* @__PURE__ */ e("div", { className: i.container, children: /* @__PURE__ */ c("div", { className: i["container-pending"], onClick: () => o == null ? void 0 : o(), children: [
29
- t ? /* @__PURE__ */ e(_, { size: "32px", "data-testid": `${n}-skeletonIcon` }) : /* @__PURE__ */ e(y, { type: "icon", children: /* @__PURE__ */ e(f, { icon: m || "clock" }) }),
30
- /* @__PURE__ */ e("div", { className: i["info-section"], children: /* @__PURE__ */ e("div", { className: i["info-section--item"], children: t ? /* @__PURE__ */ e(r, { style: { width: 140 }, "data-testid": `${n}-skeletonName` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: d }) }) }),
31
- /* @__PURE__ */ e("div", { className: i["container-pending--right"], children: t ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${n}-skeletonAmount` }) : /* @__PURE__ */ e(a, { bold: !0, color: "var(--gray-95)", variant: "base", children: v }) })
32
- ] }) }) : /* @__PURE__ */ e("div", { className: i.container, children: /* @__PURE__ */ c("div", { onClick: () => o == null ? void 0 : o(), className: i["container-grid"], children: [
33
- /* @__PURE__ */ e("div", { children: t ? /* @__PURE__ */ e(r, { style: { width: 50 }, "data-testid": `${n}-skeletonMonth` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: g }) }),
34
- /* @__PURE__ */ e("div", { children: t ? /* @__PURE__ */ e(r, { style: { width: 90 }, "data-testid": `${n}-skeletonDate` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: p }) }),
35
- t ? /* @__PURE__ */ e(_, { size: "32px", "data-testid": `${n}-skeletonIcon` }) : /* @__PURE__ */ e(y, { type: "icon", children: /* @__PURE__ */ e(f, { icon: m || "coin" }) }),
36
- /* @__PURE__ */ c("div", { className: i["info-section"], children: [
37
- /* @__PURE__ */ e("div", { className: i["info-section--item"], children: t ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${n}-skeletonName` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: d }) }),
38
- s && /* @__PURE__ */ e("div", { className: i["info-section--item"], children: t ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${n}-skeletonCategory` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: s }) }),
39
- l && /* @__PURE__ */ e("div", { className: i["info-section--item"], children: t ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${n}-skeletonCategoryType` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: l }) })
23
+ installments: v,
24
+ amount: m,
25
+ month: $,
26
+ icon: p,
27
+ onClick: c,
28
+ isPendingTransaction: b,
29
+ isLoading: i = !1,
30
+ "data-testid": t = "Description"
31
+ }) => b ? /* @__PURE__ */ e("div", { className: n.container, children: /* @__PURE__ */ s("div", { className: n["container-pending"], onClick: () => c == null ? void 0 : c(), children: [
32
+ i ? /* @__PURE__ */ e(f, { size: "32px", "data-testid": `${t}-skeletonIcon` }) : /* @__PURE__ */ e(_, { type: "icon", children: /* @__PURE__ */ e(y, { icon: p || "clock" }) }),
33
+ /* @__PURE__ */ e("div", { className: n["info-section"], children: /* @__PURE__ */ e("div", { className: n["info-section--item"], children: i ? /* @__PURE__ */ e(r, { style: { width: 140 }, "data-testid": `${t}-skeletonName` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", "data-testid": `${t}-content`, children: h }) }) }),
34
+ /* @__PURE__ */ e("div", { className: n["container-pending--right"], children: i ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${t}-skeletonAmount` }) : /* @__PURE__ */ e(a, { bold: !0, color: "var(--gray-95)", variant: "base", children: m }) })
35
+ ] }) }) : /* @__PURE__ */ e("div", { className: n.container, children: /* @__PURE__ */ s("div", { onClick: () => c == null ? void 0 : c(), className: n["container-grid"], children: [
36
+ /* @__PURE__ */ e("div", { children: i ? /* @__PURE__ */ e(r, { style: { width: 50 }, "data-testid": `${t}-skeletonMonth` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: $ }) }),
37
+ /* @__PURE__ */ e("div", { children: i ? /* @__PURE__ */ e(r, { style: { width: 90 }, "data-testid": `${t}-skeletonDate` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: g }) }),
38
+ i ? /* @__PURE__ */ e(f, { size: "32px", "data-testid": `${t}-skeletonIcon` }) : /* @__PURE__ */ e(_, { type: "icon", children: /* @__PURE__ */ e(y, { icon: p || "coin" }) }),
39
+ /* @__PURE__ */ e("div", { className: n["info-section"], children: /* @__PURE__ */ e("div", { className: n["info-section--content"], children: i ? /* @__PURE__ */ s(o, { children: [
40
+ /* @__PURE__ */ e(
41
+ r,
42
+ {
43
+ style: { width: 70, display: "inline-block", marginLeft: "8px" },
44
+ "data-testid": `${t}-skeletonName`
45
+ }
46
+ ),
47
+ /* @__PURE__ */ e(
48
+ r,
49
+ {
50
+ style: { width: 70, display: "inline-block", marginLeft: "8px" },
51
+ "data-testid": `${t}-skeletonCategory`
52
+ }
53
+ ),
54
+ /* @__PURE__ */ e(
55
+ r,
56
+ {
57
+ style: { width: 70, display: "inline-block", marginLeft: "8px" },
58
+ "data-testid": `${t}-skeletonCategoryType`
59
+ }
60
+ )
61
+ ] }) : /* @__PURE__ */ s(
62
+ a,
63
+ {
64
+ color: "var(--gray-95)",
65
+ variant: "base",
66
+ className: n["truncate-text"],
67
+ "data-testid": `${t}-content`,
68
+ children: [
69
+ /* @__PURE__ */ e("span", { "data-testid": `${t}-name`, children: h }),
70
+ l && /* @__PURE__ */ s(o, { children: [
71
+ /* @__PURE__ */ e("span", { className: n.separator }),
72
+ /* @__PURE__ */ e("span", { "data-testid": `${t}-category`, children: l })
73
+ ] }),
74
+ d && /* @__PURE__ */ s(o, { children: [
75
+ /* @__PURE__ */ e("span", { className: n.separator }),
76
+ /* @__PURE__ */ e("span", { "data-testid": `${t}-categoryType`, children: d })
77
+ ] })
78
+ ]
79
+ }
80
+ ) }) }),
81
+ /* @__PURE__ */ s("div", { className: n["info-section--right"], children: [
82
+ v && /* @__PURE__ */ e("div", { className: n["info-section--item"], children: i ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${t}-skeletonInstallments` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: v }) }),
83
+ /* @__PURE__ */ e("div", { className: n["info-section--item"], children: i ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${t}-skeletonType` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: N }) })
40
84
  ] }),
41
- /* @__PURE__ */ c("div", { className: i["info-section--right"], children: [
42
- h && /* @__PURE__ */ e("div", { className: i["info-section--item"], children: t ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${n}-skeletonInstallments` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: h }) }),
43
- /* @__PURE__ */ e("div", { className: i["info-section--item"], children: t ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${n}-skeletonType` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: N }) })
44
- ] }),
45
- /* @__PURE__ */ e("div", { className: i["info-section--right"], children: t ? /* @__PURE__ */ e(r, { style: { width: 140 }, "data-testid": `${n}-skeletonAmount` }) : /* @__PURE__ */ e(a, { bold: !0, variant: "base", children: v }) })
85
+ /* @__PURE__ */ e("div", { className: n["info-section--right"], children: i ? /* @__PURE__ */ e(r, { style: { width: 140 }, "data-testid": `${t}-skeletonAmount` }) : /* @__PURE__ */ e(a, { bold: !0, variant: "base", children: m }) })
46
86
  ] }) });
47
87
  export {
48
- A as TransactionRow
88
+ D as TransactionRow
49
89
  };
@@ -33,3 +33,4 @@ export declare const WithTwoCurrencies: Story;
33
33
  export declare const WithLargeAmount: Story;
34
34
  export declare const IsPending: Story;
35
35
  export declare const IsPendingLoading: Story;
36
+ export declare const LongTitleAndCategory: 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": "2.1.14",
4
+ "version": "2.1.15",
5
5
  "type": "module",
6
6
  "main": "dist/main.js",
7
7
  "types": "dist/main.d.ts",