@pismo/marola 2.1.3 → 2.1.4

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/TransactionRow.css +1 -1
  2. package/dist/components/TransactionRow/TransactionRow.d.ts +4 -1
  3. package/dist/components/TransactionRow/TransactionRow.js +41 -36
  4. package/dist/components/TransactionRow/TransactionRow.stories.d.ts +7 -1
  5. package/package.json +1 -1
package/dist/assets/TransactionRow.css CHANGED
@@ -1 +1 @@
1
- ._container_1zn5j_1{width:100%;height:56px;border-top:1px solid var(--border-secondary)}._container-grid_1zn5j_6{display:grid;grid-template-columns:1fr 2fr .5fr 4fr 2fr 2fr;align-items:center;justify-content:space-between;padding:12px 16px}._container-pending_1zn5j_13{display:flex;align-items:center;justify-content:flex-start;padding:12px 16px}._container-pending--right_1zn5j_19{margin-left:auto}._container_1zn5j_1 :hover{background-color:var(--border-secondary)}._info-section_1zn5j_26{display:flex}._info-section--item_1zn5j_29{padding-left:8px}._info-section--item_1zn5j_29:not(:first-child){margin-left:8px;border-left:1px solid var(--border-secondary)}._info-section--right_1zn5j_36{display:flex;justify-content:flex-end}
1
+ ._container_1apn3_1{width:100%;height:56px;border-top:1px solid var(--border-secondary)}._container-grid_1apn3_6{display:grid;grid-template-columns:1fr 2fr .5fr 4fr 2fr 2fr;align-items:center;justify-content:space-between;padding:12px 16px}._container-pending_1apn3_13{display:flex;align-items:center;justify-content:flex-start;padding:12px 16px}._container-pending--right_1apn3_19{margin-left:auto}._container_1apn3_1 :hover{cursor:pointer;background-color:var(--border-secondary)}._info-section_1apn3_27{display:flex}._info-section--item_1apn3_30{padding-left:8px}._info-section--item_1apn3_30:not(:first-child){margin-left:8px;border-left:1px solid var(--border-secondary)}._info-section--right_1apn3_37{display:flex;justify-content:flex-end}
package/dist/components/TransactionRow/TransactionRow.d.ts CHANGED
@@ -3,6 +3,7 @@ type TransactionRowProps = {
3
3
  dateTime?: React.ReactNode;
4
4
  month?: React.ReactNode;
5
5
  category?: React.ReactNode;
6
+ categoryType?: React.ReactNode;
6
7
  name: React.ReactNode;
7
8
  type?: React.ReactNode;
8
9
  icon?: IconName;
@@ -10,6 +11,8 @@ type TransactionRowProps = {
10
11
  installments?: React.ReactNode;
11
12
  onClick?: () => void;
12
13
  isPendingTransaction?: boolean;
14
+ isLoading?: boolean;
15
+ 'data-testid'?: string;
13
16
  };
14
- export declare const TransactionRow: ({ dateTime, category, name, type, installments, amount, month, icon, onClick, isPendingTransaction, }: TransactionRowProps) => import("react/jsx-runtime").JSX.Element;
17
+ export declare const TransactionRow: ({ dateTime, category, categoryType, name, type, installments, amount, month, icon, onClick, isPendingTransaction, isLoading, "data-testid": dataTestId, }: TransactionRowProps) => import("react/jsx-runtime").JSX.Element;
15
18
  export {};
package/dist/components/TransactionRow/TransactionRow.js CHANGED
@@ -1,43 +1,48 @@
1
- import { jsx as i, jsxs as a } from "react/jsx-runtime";
2
- import { Avatar as l } from "../Avatar/Avatar.js";
3
- import { Icon as h } from "../Icon/Icon.js";
4
- import { Typography as r } from "../Typography/Typography.js";
5
- import '../../assets/TransactionRow.css';const f = "_container_1zn5j_1", n = {
6
- container: f,
7
- "container-grid": "_container-grid_1zn5j_6",
8
- "container-pending": "_container-pending_1zn5j_13",
9
- "container-pending--right": "_container-pending--right_1zn5j_19",
10
- "info-section": "_info-section_1zn5j_26",
11
- "info-section--item": "_info-section--item_1zn5j_29",
12
- "info-section--right": "_info-section--right_1zn5j_36"
1
+ import { jsx as e, jsxs as c } from "react/jsx-runtime";
2
+ import { Avatar as p } 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
+ import { Typography as a } from "../Typography/Typography.js";
6
+ import '../../assets/TransactionRow.css';const $ = "_container_1apn3_1", i = {
7
+ container: $,
8
+ "container-grid": "_container-grid_1apn3_6",
9
+ "container-pending": "_container-pending_1apn3_13",
10
+ "container-pending--right": "_container-pending--right_1apn3_19",
11
+ "info-section": "_info-section_1apn3_27",
12
+ "info-section--item": "_info-section--item_1apn3_30",
13
+ "info-section--right": "_info-section--right_1apn3_37"
13
14
  }, j = ({
14
- dateTime: v,
15
- category: c,
16
- name: o,
17
- type: m,
18
- installments: t,
19
- amount: s,
15
+ dateTime: _,
16
+ category: s,
17
+ categoryType: l,
18
+ name: d,
19
+ type: N,
20
+ installments: h,
21
+ amount: v,
20
22
  month: g,
21
- icon: d,
22
- onClick: e,
23
- isPendingTransaction: _
24
- }) => _ ? /* @__PURE__ */ i("div", { className: n.container, children: /* @__PURE__ */ a("div", { className: n["container-pending"], onClick: () => e == null ? void 0 : e(), children: [
25
- /* @__PURE__ */ i(l, { type: "icon", children: /* @__PURE__ */ i(h, { icon: d || "clock" }) }),
26
- /* @__PURE__ */ i("div", { className: n["info-section"], children: /* @__PURE__ */ i("div", { className: n["info-section--item"], children: /* @__PURE__ */ i(r, { color: "var(--gray-95)", variant: "base", children: o }) }) }),
27
- /* @__PURE__ */ i("div", { className: n["container-pending--right"], children: /* @__PURE__ */ i(r, { bold: !0, color: "var(--gray-95)", variant: "base", children: s }) })
28
- ] }) }) : /* @__PURE__ */ i("div", { className: n.container, children: /* @__PURE__ */ a("div", { onClick: () => e == null ? void 0 : e(), className: n["container-grid"], children: [
29
- /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(r, { color: "var(--gray-95)", variant: "base", children: g }) }),
30
- /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(r, { color: "var(--gray-95)", variant: "base", children: v }) }),
31
- /* @__PURE__ */ i(l, { type: "icon", children: /* @__PURE__ */ i(h, { icon: d || "coin" }) }),
32
- /* @__PURE__ */ a("div", { className: n["info-section"], children: [
33
- /* @__PURE__ */ i("div", { className: n["info-section--item"], children: /* @__PURE__ */ i(r, { color: "var(--gray-95)", variant: "base", children: o }) }),
34
- c && /* @__PURE__ */ i("div", { className: n["info-section--item"], children: /* @__PURE__ */ i(r, { color: "var(--gray-95)", variant: "base", children: c }) })
23
+ icon: m,
24
+ onClick: o,
25
+ isPendingTransaction: b,
26
+ isLoading: n = !1,
27
+ "data-testid": t = "Description"
28
+ }) => b ? /* @__PURE__ */ e("div", { className: i.container, children: /* @__PURE__ */ c("div", { className: i["container-pending"], onClick: () => o == null ? void 0 : o(), children: [
29
+ n ? /* @__PURE__ */ e(f, { size: "32px", "data-testid": `${t}-skeletonIcon` }) : /* @__PURE__ */ e(p, { type: "icon", children: /* @__PURE__ */ e(y, { icon: m || "clock" }) }),
30
+ /* @__PURE__ */ e("div", { className: i["info-section"], children: /* @__PURE__ */ e("div", { className: i["info-section--item"], children: n ? /* @__PURE__ */ e(r, { style: { width: 140 }, "data-testid": `${t}-skeletonName` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: d }) }) }),
31
+ /* @__PURE__ */ e("div", { className: i["container-pending--right"], children: n ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${t}-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: n ? /* @__PURE__ */ e(r, { style: { width: 50 }, "data-testid": `${t}-skeletonMonth` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: g }) }),
34
+ /* @__PURE__ */ e("div", { children: n ? /* @__PURE__ */ e(r, { style: { width: 90 }, "data-testid": `${t}-skeletonDate` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: _ }) }),
35
+ n ? /* @__PURE__ */ e(f, { size: "32px", "data-testid": `${t}-skeletonIcon` }) : /* @__PURE__ */ e(p, { type: "icon", children: /* @__PURE__ */ e(y, { icon: m || "coin" }) }),
36
+ /* @__PURE__ */ c("div", { className: i["info-section"], children: [
37
+ /* @__PURE__ */ e("div", { className: i["info-section--item"], children: n ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${t}-skeletonName` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: d }) }),
38
+ s && /* @__PURE__ */ e("div", { className: i["info-section--item"], children: n ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${t}-skeletonCategory` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: s }) }),
39
+ l && /* @__PURE__ */ e("div", { className: i["info-section--item"], children: n ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${t}-skeletonCategoryType` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: l }) })
35
40
  ] }),
36
- /* @__PURE__ */ a("div", { className: n["info-section--right"], children: [
37
- t && /* @__PURE__ */ i("div", { className: n["info-section--item"], children: /* @__PURE__ */ i(r, { color: "var(--gray-95)", variant: "base", children: t }) }),
38
- /* @__PURE__ */ i("div", { className: n["info-section--item"], children: /* @__PURE__ */ i(r, { color: "var(--gray-95)", variant: "base", children: m }) })
41
+ /* @__PURE__ */ c("div", { className: i["info-section--right"], children: [
42
+ h && /* @__PURE__ */ e("div", { className: i["info-section--item"], children: n ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${t}-skeletonInstallments` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: h }) }),
43
+ /* @__PURE__ */ e("div", { className: i["info-section--item"], children: n ? /* @__PURE__ */ e(r, { style: { width: 70 }, "data-testid": `${t}-skeletonType` }) : /* @__PURE__ */ e(a, { color: "var(--gray-95)", variant: "base", children: N }) })
39
44
  ] }),
40
- /* @__PURE__ */ i("div", { className: n["info-section--right"], children: /* @__PURE__ */ i(r, { bold: !0, variant: "base", children: s }) })
45
+ /* @__PURE__ */ e("div", { className: i["info-section--right"], children: n ? /* @__PURE__ */ e(r, { style: { width: 140 }, "data-testid": `${t}-skeletonAmount` }) : /* @__PURE__ */ e(a, { bold: !0, variant: "base", children: v }) })
41
46
  ] }) });
42
47
  export {
43
48
  j as TransactionRow
package/dist/components/TransactionRow/TransactionRow.stories.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import { StoryObj } from '@storybook/react';
2
2
  declare const meta: {
3
3
  title: string;
4
- component: ({ dateTime, category, name, type, installments, amount, month, icon, onClick, isPendingTransaction, }: {
4
+ component: ({ dateTime, category, categoryType, name, type, installments, amount, month, icon, onClick, isPendingTransaction, isLoading, "data-testid": dataTestId, }: {
5
5
  dateTime?: import('react').ReactNode;
6
6
  month?: import('react').ReactNode;
7
7
  category?: import('react').ReactNode;
8
+ categoryType?: import('react').ReactNode;
8
9
  name: import('react').ReactNode;
9
10
  type?: import('react').ReactNode;
10
11
  icon?: import('../Icon/types').IconName | undefined;
@@ -12,6 +13,8 @@ declare const meta: {
12
13
  installments?: import('react').ReactNode;
13
14
  onClick?: (() => void) | undefined;
14
15
  isPendingTransaction?: boolean | undefined;
16
+ isLoading?: boolean | undefined;
17
+ 'data-testid'?: string | undefined;
15
18
  }) => import("react/jsx-runtime").JSX.Element;
16
19
  tags: string[];
17
20
  parameters: {
@@ -23,7 +26,10 @@ type Story = StoryObj<typeof meta>;
23
26
  export declare const Simple: Story;
24
27
  export declare const WithMonth: Story;
25
28
  export declare const WithInstallments: Story;
29
+ export declare const WithCategoryType: Story;
30
+ export declare const Loading: Story;
26
31
  export declare const WithoutCategory: Story;
27
32
  export declare const WithTwoCurrencies: Story;
28
33
  export declare const WithLargeAmount: Story;
29
34
  export declare const IsPending: Story;
35
+ export declare const IsPendingLoading: 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.3",
4
+ "version": "2.1.4",
5
5
  "type": "module",
6
6
  "main": "dist/main.js",
7
7
  "types": "dist/main.d.ts",