@veevarts/design-system 1.14.0-beta.1 → 1.14.0-beta.2
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/index.cjs +4 -4
- package/dist/index.js +2851 -2762
- package/dist/patterns/Summary/components/ActionBar.d.ts +2 -0
- package/dist/patterns/Summary/components/ItemRow.d.ts +2 -0
- package/dist/patterns/Summary/components/SecondaryTotalRow.d.ts +11 -0
- package/dist/patterns/Summary/components/SummaryBody.d.ts +2 -0
- package/dist/patterns/Summary/index.d.ts +1 -1
- package/dist/patterns/Summary/types.d.ts +52 -0
- package/dist/patterns/index.d.ts +1 -1
- package/package.json +1 -1
|
@@ -10,6 +10,8 @@ export interface ActionBarProps {
|
|
|
10
10
|
isLoading: boolean;
|
|
11
11
|
cart?: SummaryProps['cart'];
|
|
12
12
|
cartAriaLabel: string;
|
|
13
|
+
/** Optional caption rendered under the open-layer CTA (e.g. installment breakdown). */
|
|
14
|
+
ctaCaption?: React.ReactNode;
|
|
13
15
|
/** Expand the summary — the closed-bar cart button opens it on click. */
|
|
14
16
|
onToggleOpen?: () => void;
|
|
15
17
|
classNames: SummaryClassNames;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { Money } from '../types';
|
|
3
|
+
export interface SecondaryTotalRowProps {
|
|
4
|
+
secondaryTotal: {
|
|
5
|
+
label: React.ReactNode;
|
|
6
|
+
amount: Money;
|
|
7
|
+
};
|
|
8
|
+
locale: string;
|
|
9
|
+
className?: string;
|
|
10
|
+
}
|
|
11
|
+
export declare const SecondaryTotalRow: React.FC<SecondaryTotalRowProps>;
|
|
@@ -9,6 +9,8 @@ export interface SummaryBodyProps {
|
|
|
9
9
|
locale: string;
|
|
10
10
|
onRemoveItem?: (id: string) => void;
|
|
11
11
|
removeAriaLabel: string;
|
|
12
|
+
/** Show the per-item remove control. Defaults to `true`. */
|
|
13
|
+
showRemoveButton?: boolean;
|
|
12
14
|
emptyState?: React.ReactNode;
|
|
13
15
|
classNames: SummaryClassNames;
|
|
14
16
|
}
|
|
@@ -4,4 +4,4 @@
|
|
|
4
4
|
* Total + CTA, and a compact mobile bottom-bar.
|
|
5
5
|
*/
|
|
6
6
|
export { Summary } from './Summary';
|
|
7
|
-
export type { SummaryProps, SummaryLineItem, SummaryServiceFee, SummaryTotalRow, SummaryPrimaryAction, SummaryLabels, Money, } from './types';
|
|
7
|
+
export type { SummaryProps, SummaryLineItem, SummaryItemDetail, SummaryServiceFee, SummaryTotalRow, SummaryPrimaryAction, SummaryLabels, Money, } from './types';
|
|
@@ -1,6 +1,28 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { Money } from '../../utils/money';
|
|
3
3
|
export type { Money } from '../../utils/money';
|
|
4
|
+
/**
|
|
5
|
+
* A generic, parametrizable detail row rendered under a line item — an icon +
|
|
6
|
+
* label, an optional right-aligned value, and an optional info tooltip. It is
|
|
7
|
+
* intentionally agnostic: the host composes whatever the design needs (e.g. an
|
|
8
|
+
* auto-renewal note, a "pay by installments" line, a fulfilment hint) without
|
|
9
|
+
* the Summary pattern knowing those domains. The existing `dateLabel` /
|
|
10
|
+
* `dateRange` slots stay as dedicated rows; this covers everything else.
|
|
11
|
+
*/
|
|
12
|
+
export interface SummaryItemDetail {
|
|
13
|
+
/** Stable key for `data-testid` (falls back to the row index). */
|
|
14
|
+
key?: string;
|
|
15
|
+
/** Leading icon node (e.g. `lucide:refresh-cw`, `lucide:scissors`). */
|
|
16
|
+
icon?: ReactNode;
|
|
17
|
+
/** Left label (rendered muted, like the date rows). */
|
|
18
|
+
label: ReactNode;
|
|
19
|
+
/** Optional right-aligned value (e.g. "$4.23 / month"). */
|
|
20
|
+
value?: ReactNode;
|
|
21
|
+
/** Tone of the value: `'primary'` paints it in the primary color; default inherits the muted label tone. */
|
|
22
|
+
valueTone?: 'default' | 'primary';
|
|
23
|
+
/** When set, an info icon next to the value reveals this content in a tooltip. */
|
|
24
|
+
tooltip?: ReactNode;
|
|
25
|
+
}
|
|
4
26
|
/**
|
|
5
27
|
* A single, flexible line item. The four Figma "types" (Ticket, Event,
|
|
6
28
|
* Membership, Donation) are compositions of this one shape — not rigid
|
|
@@ -28,6 +50,12 @@ export interface SummaryLineItem {
|
|
|
28
50
|
};
|
|
29
51
|
/** Nested rows, indented (Event's Adult / Children). */
|
|
30
52
|
children?: SummaryLineItem[];
|
|
53
|
+
/**
|
|
54
|
+
* Extra detail rows rendered under the item (after any date row). Generic
|
|
55
|
+
* and agnostic — see {@link SummaryItemDetail}. Used e.g. by membership to
|
|
56
|
+
* show an auto-renewal note and a pay-by-installments line.
|
|
57
|
+
*/
|
|
58
|
+
details?: SummaryItemDetail[];
|
|
31
59
|
}
|
|
32
60
|
/** The "Pay Service fee" radio-toggle row. */
|
|
33
61
|
export interface SummaryServiceFee {
|
|
@@ -86,8 +114,12 @@ export interface SummaryClassNames {
|
|
|
86
114
|
totalsRows?: string;
|
|
87
115
|
/** The Total row. */
|
|
88
116
|
total?: string;
|
|
117
|
+
/** The secondary (primary-colored) total row under the Total. */
|
|
118
|
+
secondaryTotal?: string;
|
|
89
119
|
/** Primary CTA button. */
|
|
90
120
|
cta?: string;
|
|
121
|
+
/** The caption rendered under the CTA. */
|
|
122
|
+
ctaCaption?: string;
|
|
91
123
|
/** Mobile compact bottom-bar. */
|
|
92
124
|
mobileBar?: string;
|
|
93
125
|
/** Mobile cart button. */
|
|
@@ -113,6 +145,26 @@ export interface SummaryProps {
|
|
|
113
145
|
label?: ReactNode;
|
|
114
146
|
amount: Money;
|
|
115
147
|
};
|
|
148
|
+
/**
|
|
149
|
+
* An optional secondary total rendered right under the Total, in the primary
|
|
150
|
+
* color (e.g. "Due Today"). Purely presentational — the host supplies both
|
|
151
|
+
* the label and the already-computed amount.
|
|
152
|
+
*/
|
|
153
|
+
secondaryTotal?: {
|
|
154
|
+
label: ReactNode;
|
|
155
|
+
amount: Money;
|
|
156
|
+
};
|
|
157
|
+
/**
|
|
158
|
+
* An optional caption rendered under the CTA, in muted text (e.g. an
|
|
159
|
+
* installment breakdown like "$50.75 total · 12 monthly installments…").
|
|
160
|
+
*/
|
|
161
|
+
ctaCaption?: ReactNode;
|
|
162
|
+
/**
|
|
163
|
+
* Whether the per-item remove (trash) control is shown. Defaults to `true`;
|
|
164
|
+
* pass `false` to hide it even when `onRemoveItem` is wired. Independent of
|
|
165
|
+
* `onRemoveItem` so a host can keep the handler but suppress the control.
|
|
166
|
+
*/
|
|
167
|
+
showRemoveButton?: boolean;
|
|
116
168
|
/**
|
|
117
169
|
* Whether the summary can collapse — the header shows a `×` and the whole
|
|
118
170
|
* header toggles Open/Closed. Defaults to `variant === 'mobile'` (including
|
package/dist/patterns/index.d.ts
CHANGED
|
@@ -66,4 +66,4 @@ export type { PaymentSubAmountInputProps } from './PaymentSubAmountInput';
|
|
|
66
66
|
export { ConfirmDialog } from './ConfirmDialog';
|
|
67
67
|
export type { ConfirmDialogProps } from './ConfirmDialog';
|
|
68
68
|
export { Summary } from './Summary';
|
|
69
|
-
export type { SummaryProps, SummaryLineItem, SummaryServiceFee, SummaryTotalRow, SummaryPrimaryAction, SummaryLabels, } from './Summary';
|
|
69
|
+
export type { SummaryProps, SummaryLineItem, SummaryItemDetail, SummaryServiceFee, SummaryTotalRow, SummaryPrimaryAction, SummaryLabels, } from './Summary';
|