jfs-components 0.0.2 → 0.0.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.
- package/lib/commonjs/components/Accordion/Accordion.js +217 -0
- package/lib/commonjs/components/Accordion/Accordion.js.map +1 -0
- package/lib/commonjs/components/Accordion/Accordion.mdx +122 -0
- package/lib/commonjs/components/ActionTile/ActionTile.js +93 -0
- package/lib/commonjs/components/ActionTile/ActionTile.js.map +1 -0
- package/lib/commonjs/components/ActionTile/ActionTile.mdx +54 -0
- package/lib/commonjs/components/ActionTile/index.js +14 -0
- package/lib/commonjs/components/ActionTile/index.js.map +1 -0
- package/lib/commonjs/components/CtaCard/CtaCard.js +122 -0
- package/lib/commonjs/components/CtaCard/CtaCard.js.map +1 -0
- package/lib/commonjs/components/CtaCard/CtaCard.mdx +66 -0
- package/lib/commonjs/components/CtaCard/index.js +14 -0
- package/lib/commonjs/components/CtaCard/index.js.map +1 -0
- package/lib/commonjs/components/MoneyValue/MoneyValue.js +36 -4
- package/lib/commonjs/components/MoneyValue/MoneyValue.js.map +1 -1
- package/lib/commonjs/components/ThreadHero/ThreadHero.js +114 -0
- package/lib/commonjs/components/ThreadHero/ThreadHero.js.map +1 -0
- package/lib/commonjs/components/ThreadHero/ThreadHero.mdx +69 -0
- package/lib/commonjs/components/TransactionBubble/TransactionBubble.js +101 -0
- package/lib/commonjs/components/TransactionBubble/TransactionBubble.js.map +1 -0
- package/lib/commonjs/components/TransactionBubble/TransactionBubble.mdx +40 -0
- package/lib/commonjs/components/TransactionDetails/TransactionDetails.js +177 -0
- package/lib/commonjs/components/TransactionDetails/TransactionDetails.js.map +1 -0
- package/lib/commonjs/components/TransactionDetails/TransactionDetails.mdx +98 -0
- package/lib/commonjs/components/TransactionStatus/TransactionStatus.js +82 -0
- package/lib/commonjs/components/TransactionStatus/TransactionStatus.js.map +1 -0
- package/lib/commonjs/components/TransactionStatus/TransactionStatus.mdx +41 -0
- package/lib/commonjs/components/index.js +35 -0
- package/lib/commonjs/components/index.js.map +1 -1
- package/lib/commonjs/design-tokens/figma-variables-resolver.js +3 -9
- package/lib/commonjs/icons/registry.js +1 -1
- package/lib/module/components/Accordion/Accordion.js +212 -0
- package/lib/module/components/Accordion/Accordion.js.map +1 -0
- package/lib/module/components/Accordion/Accordion.mdx +122 -0
- package/lib/module/components/ActionTile/ActionTile.js +88 -0
- package/lib/module/components/ActionTile/ActionTile.js.map +1 -0
- package/lib/module/components/ActionTile/ActionTile.mdx +54 -0
- package/lib/module/components/ActionTile/index.js +4 -0
- package/lib/module/components/ActionTile/index.js.map +1 -0
- package/lib/module/components/CtaCard/CtaCard.js +117 -0
- package/lib/module/components/CtaCard/CtaCard.js.map +1 -0
- package/lib/module/components/CtaCard/CtaCard.mdx +66 -0
- package/lib/module/components/CtaCard/index.js +4 -0
- package/lib/module/components/CtaCard/index.js.map +1 -0
- package/lib/module/components/MoneyValue/MoneyValue.js +36 -4
- package/lib/module/components/MoneyValue/MoneyValue.js.map +1 -1
- package/lib/module/components/ThreadHero/ThreadHero.js +109 -0
- package/lib/module/components/ThreadHero/ThreadHero.js.map +1 -0
- package/lib/module/components/ThreadHero/ThreadHero.mdx +69 -0
- package/lib/module/components/TransactionBubble/TransactionBubble.js +96 -0
- package/lib/module/components/TransactionBubble/TransactionBubble.js.map +1 -0
- package/lib/module/components/TransactionBubble/TransactionBubble.mdx +40 -0
- package/lib/module/components/TransactionDetails/TransactionDetails.js +174 -0
- package/lib/module/components/TransactionDetails/TransactionDetails.js.map +1 -0
- package/lib/module/components/TransactionDetails/TransactionDetails.mdx +98 -0
- package/lib/module/components/TransactionStatus/TransactionStatus.js +77 -0
- package/lib/module/components/TransactionStatus/TransactionStatus.js.map +1 -0
- package/lib/module/components/TransactionStatus/TransactionStatus.mdx +41 -0
- package/lib/module/components/index.js +5 -0
- package/lib/module/components/index.js.map +1 -1
- package/lib/module/icons/registry.js +1 -1
- package/lib/typescript/components/Accordion/Accordion.d.ts +58 -0
- package/lib/typescript/components/Accordion/Accordion.d.ts.map +1 -0
- package/lib/typescript/components/ActionTile/ActionTile.d.ts +26 -0
- package/lib/typescript/components/ActionTile/ActionTile.d.ts.map +1 -0
- package/lib/typescript/components/ActionTile/index.d.ts +2 -0
- package/lib/typescript/components/ActionTile/index.d.ts.map +1 -0
- package/lib/typescript/components/CtaCard/CtaCard.d.ts +61 -0
- package/lib/typescript/components/CtaCard/CtaCard.d.ts.map +1 -0
- package/lib/typescript/components/CtaCard/index.d.ts +2 -0
- package/lib/typescript/components/CtaCard/index.d.ts.map +1 -0
- package/lib/typescript/components/MoneyValue/MoneyValue.d.ts +9 -2
- package/lib/typescript/components/MoneyValue/MoneyValue.d.ts.map +1 -1
- package/lib/typescript/components/ThreadHero/ThreadHero.d.ts +21 -0
- package/lib/typescript/components/ThreadHero/ThreadHero.d.ts.map +1 -0
- package/lib/typescript/components/TransactionBubble/TransactionBubble.d.ts +24 -0
- package/lib/typescript/components/TransactionBubble/TransactionBubble.d.ts.map +1 -0
- package/lib/typescript/components/TransactionDetails/TransactionDetails.d.ts +57 -0
- package/lib/typescript/components/TransactionDetails/TransactionDetails.d.ts.map +1 -0
- package/lib/typescript/components/TransactionStatus/TransactionStatus.d.ts +16 -0
- package/lib/typescript/components/TransactionStatus/TransactionStatus.d.ts.map +1 -0
- package/lib/typescript/components/index.d.ts +5 -0
- package/lib/typescript/components/index.d.ts.map +1 -1
- package/lib/typescript/icons/registry.d.ts +1 -1
- package/package.json +5 -2
- package/src/components/.token-metadata.json +161 -0
- package/src/components/Accordion/Accordion.mdx +122 -0
- package/src/components/Accordion/Accordion.tsx +279 -0
- package/src/components/ActionTile/ActionTile.mdx +54 -0
- package/src/components/ActionTile/ActionTile.tsx +100 -0
- package/src/components/ActionTile/index.ts +1 -0
- package/src/components/CtaCard/CtaCard.mdx +66 -0
- package/src/components/CtaCard/CtaCard.tsx +185 -0
- package/src/components/CtaCard/index.ts +1 -0
- package/src/components/MoneyValue/MoneyValue.tsx +39 -3
- package/src/components/ThreadHero/ThreadHero.mdx +69 -0
- package/src/components/ThreadHero/ThreadHero.tsx +124 -0
- package/src/components/TransactionBubble/TransactionBubble.mdx +40 -0
- package/src/components/TransactionBubble/TransactionBubble.tsx +113 -0
- package/src/components/TransactionDetails/TransactionDetails.mdx +98 -0
- package/src/components/TransactionDetails/TransactionDetails.tsx +236 -0
- package/src/components/TransactionStatus/TransactionStatus.mdx +41 -0
- package/src/components/TransactionStatus/TransactionStatus.tsx +94 -0
- package/src/components/index.ts +5 -0
- package/src/icons/registry.ts +1 -1
|
@@ -0,0 +1,217 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
|
|
10
|
+
var _Icon = _interopRequireDefault(require("../../icons/Icon"));
|
|
11
|
+
var _webPlatformUtils = require("../../utils/web-platform-utils");
|
|
12
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
15
|
+
// Enable LayoutAnimation on Android
|
|
16
|
+
if (_reactNative.Platform.OS === 'android' && _reactNative.UIManager.setLayoutAnimationEnabledExperimental) {
|
|
17
|
+
_reactNative.UIManager.setLayoutAnimationEnabledExperimental(true);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Helper function to recursively clone children and pass modes prop to components that accept it.
|
|
22
|
+
* This ensures that all child components in slots receive the modes prop from the parent.
|
|
23
|
+
*/
|
|
24
|
+
function cloneChildrenWithModes(children, modes) {
|
|
25
|
+
const result = _react.default.Children.map(children, child => {
|
|
26
|
+
if (! /*#__PURE__*/_react.default.isValidElement(child)) {
|
|
27
|
+
return child;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// Get existing children
|
|
31
|
+
const childChildren = child.props?.children;
|
|
32
|
+
const hasChildren = childChildren !== undefined && childChildren !== null;
|
|
33
|
+
|
|
34
|
+
// Merge modes: parent modes first, then child's explicit modes override them
|
|
35
|
+
const existingModes = child.props?.modes;
|
|
36
|
+
const mergedModes = existingModes ? {
|
|
37
|
+
...modes,
|
|
38
|
+
...existingModes
|
|
39
|
+
} : modes;
|
|
40
|
+
|
|
41
|
+
// Recursively process children if they exist
|
|
42
|
+
const processedChildren = hasChildren ? cloneChildrenWithModes(_react.default.Children.toArray(childChildren), modes) : undefined;
|
|
43
|
+
|
|
44
|
+
// Clone element with modes and processed children
|
|
45
|
+
return /*#__PURE__*/_react.default.cloneElement(child, {
|
|
46
|
+
...child.props,
|
|
47
|
+
modes: mergedModes
|
|
48
|
+
}, processedChildren);
|
|
49
|
+
});
|
|
50
|
+
return result || [];
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Accordion component that mirrors the Figma "Accordion" component.
|
|
54
|
+
*
|
|
55
|
+
* This component supports:
|
|
56
|
+
* - **Expandable/collapsible content** with smooth animation
|
|
57
|
+
* - **States**: Idle, Hover, Open, Disabled
|
|
58
|
+
* - **Slot** for custom content
|
|
59
|
+
* - **Design-token driven styling** via `getVariableByName` and `modes`
|
|
60
|
+
*
|
|
61
|
+
* Wherever the Figma layer name contains "Slot", this component exposes a
|
|
62
|
+
* dedicated React "slot" prop:
|
|
63
|
+
* - Slot "content" → `children`
|
|
64
|
+
*
|
|
65
|
+
* @component
|
|
66
|
+
* @param {Object} props
|
|
67
|
+
* @param {string} [props.title='Accordion title'] - The accordion header title
|
|
68
|
+
* @param {boolean} [props.defaultExpanded=false] - Initial expanded state
|
|
69
|
+
* @param {boolean} [props.expanded] - Controlled expanded state
|
|
70
|
+
* @param {Function} [props.onExpandedChange] - Callback fired when expanded state changes
|
|
71
|
+
* @param {boolean} [props.disabled=false] - Whether the accordion is disabled
|
|
72
|
+
* @param {React.ReactNode} [props.children] - Content to display when expanded
|
|
73
|
+
* @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
|
|
74
|
+
* @param {Object} [props.style] - Optional container style overrides
|
|
75
|
+
* @param {string} [props.accessibilityLabel] - Accessibility label for the accordion. If not provided, uses title
|
|
76
|
+
* @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
|
|
77
|
+
*/
|
|
78
|
+
function Accordion({
|
|
79
|
+
title = 'Accordion title',
|
|
80
|
+
defaultExpanded = false,
|
|
81
|
+
expanded: controlledExpanded,
|
|
82
|
+
onExpandedChange,
|
|
83
|
+
disabled = false,
|
|
84
|
+
children,
|
|
85
|
+
modes = {},
|
|
86
|
+
style,
|
|
87
|
+
accessibilityLabel,
|
|
88
|
+
accessibilityHint,
|
|
89
|
+
accessibilityState,
|
|
90
|
+
webAccessibilityProps,
|
|
91
|
+
...rest
|
|
92
|
+
}) {
|
|
93
|
+
// Internal state for uncontrolled mode
|
|
94
|
+
const [internalExpanded, setInternalExpanded] = (0, _react.useState)(defaultExpanded);
|
|
95
|
+
|
|
96
|
+
// Determine if controlled or uncontrolled
|
|
97
|
+
const isControlled = controlledExpanded !== undefined;
|
|
98
|
+
const isExpanded = isControlled ? controlledExpanded : internalExpanded;
|
|
99
|
+
|
|
100
|
+
// Hover state for web
|
|
101
|
+
const [isHovered, setIsHovered] = (0, _react.useState)(false);
|
|
102
|
+
|
|
103
|
+
// Handle toggle
|
|
104
|
+
const handleToggle = () => {
|
|
105
|
+
if (disabled) return;
|
|
106
|
+
|
|
107
|
+
// Animate the layout change
|
|
108
|
+
_reactNative.LayoutAnimation.configureNext(_reactNative.LayoutAnimation.Presets.easeInEaseOut);
|
|
109
|
+
if (isControlled) {
|
|
110
|
+
onExpandedChange?.(!isExpanded);
|
|
111
|
+
} else {
|
|
112
|
+
setInternalExpanded(!isExpanded);
|
|
113
|
+
onExpandedChange?.(!isExpanded);
|
|
114
|
+
}
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
// Resolve design tokens
|
|
118
|
+
const titleColor = disabled ? '#999999' : (0, _figmaVariablesResolver.getVariableByName)('accordion/title/color', modes) || '#0d0d0d';
|
|
119
|
+
const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('accordion/title/fontSize', modes) || 18;
|
|
120
|
+
const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('accordion/title/lineHeight', modes) || 20;
|
|
121
|
+
const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('accordion/title/fontFamily', modes) || 'System';
|
|
122
|
+
const iconColor = (0, _figmaVariablesResolver.getVariableByName)('accordion/icon/color', modes) || '#141414';
|
|
123
|
+
const iconSize = (0, _figmaVariablesResolver.getVariableByName)('accordion/icon/size', modes) || 24;
|
|
124
|
+
const headerGap = (0, _figmaVariablesResolver.getVariableByName)('accordion/header/gap', modes) || 12;
|
|
125
|
+
const headerPaddingVertical = (0, _figmaVariablesResolver.getVariableByName)('accordion/header/padding/vertical', modes) || 24;
|
|
126
|
+
const headerBackground = isHovered && !disabled ? '#f2f2f2' : (0, _figmaVariablesResolver.getVariableByName)('accordion/header/background', modes) || 'transparent';
|
|
127
|
+
const contentGap = (0, _figmaVariablesResolver.getVariableByName)('accordion/content/gap', modes) || 12;
|
|
128
|
+
const contentPaddingTop = (0, _figmaVariablesResolver.getVariableByName)('accordion/content/padding/top', modes) || 8;
|
|
129
|
+
const contentPaddingBottom = isExpanded ? (0, _figmaVariablesResolver.getVariableByName)('accordion/content/padding/bottom', modes) ?? 24 : 8;
|
|
130
|
+
const borderColor = (0, _figmaVariablesResolver.getVariableByName)('accordion/border/color', modes) || '#e6e6e6';
|
|
131
|
+
|
|
132
|
+
// Styles
|
|
133
|
+
const containerStyle = {
|
|
134
|
+
borderBottomWidth: 1,
|
|
135
|
+
borderBottomColor: borderColor
|
|
136
|
+
};
|
|
137
|
+
const headerStyle = {
|
|
138
|
+
flexDirection: 'row',
|
|
139
|
+
alignItems: 'center',
|
|
140
|
+
gap: headerGap,
|
|
141
|
+
paddingVertical: headerPaddingVertical,
|
|
142
|
+
paddingHorizontal: 0,
|
|
143
|
+
backgroundColor: headerBackground,
|
|
144
|
+
overflow: 'hidden'
|
|
145
|
+
};
|
|
146
|
+
const titleStyle = {
|
|
147
|
+
flex: 1,
|
|
148
|
+
color: titleColor,
|
|
149
|
+
fontSize: titleFontSize,
|
|
150
|
+
lineHeight: titleLineHeight,
|
|
151
|
+
fontFamily: titleFontFamily,
|
|
152
|
+
fontWeight: '700'
|
|
153
|
+
};
|
|
154
|
+
const contentStyle = {
|
|
155
|
+
backgroundColor: 'transparent',
|
|
156
|
+
gap: contentGap,
|
|
157
|
+
paddingTop: contentPaddingTop,
|
|
158
|
+
paddingBottom: contentPaddingBottom,
|
|
159
|
+
paddingHorizontal: 0,
|
|
160
|
+
overflow: 'hidden'
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
// Generate default accessibility label
|
|
164
|
+
const defaultAccessibilityLabel = accessibilityLabel || title;
|
|
165
|
+
|
|
166
|
+
// Web platform support
|
|
167
|
+
const webProps = (0, _webPlatformUtils.usePressableWebSupport)({
|
|
168
|
+
restProps: {},
|
|
169
|
+
onPress: handleToggle,
|
|
170
|
+
disabled,
|
|
171
|
+
accessibilityLabel: defaultAccessibilityLabel,
|
|
172
|
+
webAccessibilityProps
|
|
173
|
+
});
|
|
174
|
+
|
|
175
|
+
// Process children to pass modes
|
|
176
|
+
const processedChildren = children ? cloneChildrenWithModes(_react.default.Children.toArray(children), modes) : null;
|
|
177
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
178
|
+
style: [containerStyle, style],
|
|
179
|
+
...rest,
|
|
180
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
|
|
181
|
+
accessibilityRole: "button",
|
|
182
|
+
accessibilityLabel: defaultAccessibilityLabel,
|
|
183
|
+
accessibilityHint: accessibilityHint || (isExpanded ? 'Collapse accordion' : 'Expand accordion'),
|
|
184
|
+
accessibilityState: {
|
|
185
|
+
expanded: isExpanded,
|
|
186
|
+
disabled,
|
|
187
|
+
...accessibilityState
|
|
188
|
+
},
|
|
189
|
+
onPress: handleToggle,
|
|
190
|
+
disabled: disabled,
|
|
191
|
+
onHoverIn: () => setIsHovered(true),
|
|
192
|
+
onHoverOut: () => setIsHovered(false),
|
|
193
|
+
style: ({
|
|
194
|
+
pressed
|
|
195
|
+
}) => [headerStyle, pressed && !disabled ? {
|
|
196
|
+
opacity: 0.9
|
|
197
|
+
} : null],
|
|
198
|
+
...webProps,
|
|
199
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
200
|
+
style: titleStyle,
|
|
201
|
+
numberOfLines: 1,
|
|
202
|
+
children: title
|
|
203
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
|
|
204
|
+
name: isExpanded ? 'ic_minus' : 'ic_add',
|
|
205
|
+
size: iconSize,
|
|
206
|
+
color: disabled ? '#999999' : iconColor,
|
|
207
|
+
accessibilityElementsHidden: true,
|
|
208
|
+
importantForAccessibility: "no"
|
|
209
|
+
})]
|
|
210
|
+
}), isExpanded && processedChildren && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
211
|
+
style: contentStyle,
|
|
212
|
+
children: processedChildren
|
|
213
|
+
})]
|
|
214
|
+
});
|
|
215
|
+
}
|
|
216
|
+
var _default = exports.default = Accordion;
|
|
217
|
+
//# sourceMappingURL=Accordion.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_figmaVariablesResolver","_Icon","_interopRequireDefault","_webPlatformUtils","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Platform","OS","UIManager","setLayoutAnimationEnabledExperimental","cloneChildrenWithModes","children","modes","result","React","Children","map","child","isValidElement","childChildren","props","hasChildren","undefined","existingModes","mergedModes","processedChildren","toArray","cloneElement","Accordion","title","defaultExpanded","expanded","controlledExpanded","onExpandedChange","disabled","style","accessibilityLabel","accessibilityHint","accessibilityState","webAccessibilityProps","rest","internalExpanded","setInternalExpanded","useState","isControlled","isExpanded","isHovered","setIsHovered","handleToggle","LayoutAnimation","configureNext","Presets","easeInEaseOut","titleColor","getVariableByName","titleFontSize","titleLineHeight","titleFontFamily","iconColor","iconSize","headerGap","headerPaddingVertical","headerBackground","contentGap","contentPaddingTop","contentPaddingBottom","borderColor","containerStyle","borderBottomWidth","borderBottomColor","headerStyle","flexDirection","alignItems","gap","paddingVertical","paddingHorizontal","backgroundColor","overflow","titleStyle","flex","color","fontSize","lineHeight","fontFamily","fontWeight","contentStyle","paddingTop","paddingBottom","defaultAccessibilityLabel","webProps","usePressableWebSupport","restProps","onPress","jsxs","View","Pressable","accessibilityRole","onHoverIn","onHoverOut","pressed","opacity","jsx","Text","numberOfLines","name","size","accessibilityElementsHidden","importantForAccessibility","_default","exports"],"sourceRoot":"../../../../src","sources":["components/Accordion/Accordion.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
|
|
2
|
+
import * as AccordionStories from './Accordion.stories';
|
|
3
|
+
import Accordion from './Accordion';
|
|
4
|
+
import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
|
|
5
|
+
|
|
6
|
+
<Meta of={AccordionStories} />
|
|
7
|
+
|
|
8
|
+
# Accordion
|
|
9
|
+
|
|
10
|
+
Accordion component that mirrors the Figma "Accordion" component. It provides an expandable/collapsible container for content with smooth animation.
|
|
11
|
+
|
|
12
|
+
## Available Collections and Modes
|
|
13
|
+
|
|
14
|
+
This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
|
|
15
|
+
|
|
16
|
+
### Accordion States
|
|
17
|
+
- **Modes:** Idle | Hover | Open | Open Hover | Disabled
|
|
18
|
+
- **Default:** Idle
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
<Canvas>
|
|
22
|
+
<Story of={AccordionStories.Default} />
|
|
23
|
+
</Canvas>
|
|
24
|
+
|
|
25
|
+
## With ListItem Content
|
|
26
|
+
|
|
27
|
+
<Canvas>
|
|
28
|
+
<Story of={AccordionStories.WithListItems} />
|
|
29
|
+
</Canvas>
|
|
30
|
+
|
|
31
|
+
## Accordion Group
|
|
32
|
+
|
|
33
|
+
<Canvas>
|
|
34
|
+
<Story of={AccordionStories.AccordionGroup} />
|
|
35
|
+
</Canvas>
|
|
36
|
+
|
|
37
|
+
<AccessibilitySection
|
|
38
|
+
items={[
|
|
39
|
+
'The accordion header has `accessibilityRole="button"` for proper screen reader announcement.',
|
|
40
|
+
'The `accessibilityState.expanded` property indicates the current state to assistive technology.',
|
|
41
|
+
'When disabled, `accessibilityState.disabled` is set to true.',
|
|
42
|
+
'Custom `accessibilityLabel` and `accessibilityHint` can be provided for better context.',
|
|
43
|
+
'Content within the accordion should maintain its own accessibility attributes.',
|
|
44
|
+
]}
|
|
45
|
+
/>
|
|
46
|
+
|
|
47
|
+
<AnatomySection>
|
|
48
|
+
<ul>
|
|
49
|
+
<li><strong>Header</strong> — Pressable area containing the title and expand/collapse icon (plus/minus).</li>
|
|
50
|
+
<li><strong>Content Slot</strong> — Expandable area that shows/hides with animation. Pass any React children.</li>
|
|
51
|
+
<li><strong>Border</strong> — Bottom border separating accordions when stacked.</li>
|
|
52
|
+
</ul>
|
|
53
|
+
</AnatomySection>
|
|
54
|
+
|
|
55
|
+
<UsageConstraintsSection
|
|
56
|
+
items={[
|
|
57
|
+
'Use the `modes` prop to ensure consistent theming with surrounding components.',
|
|
58
|
+
'When nesting components in the content slot, they automatically receive the parent modes via cloning.',
|
|
59
|
+
'Avoid deeply nested interactive elements that may confuse keyboard navigation.',
|
|
60
|
+
'For controlled behavior, provide both `expanded` and `onExpandedChange` props.',
|
|
61
|
+
'Keep accordion titles concise; they are truncated to a single line.',
|
|
62
|
+
]}
|
|
63
|
+
/>
|
|
64
|
+
|
|
65
|
+
## Props
|
|
66
|
+
|
|
67
|
+
<ArgsTable of={Accordion} />
|
|
68
|
+
|
|
69
|
+
## Design Tokens
|
|
70
|
+
|
|
71
|
+
This component uses the following design tokens, resolved through `getVariableByName`:
|
|
72
|
+
|
|
73
|
+
- **`accordion/border/color`**
|
|
74
|
+
- **`accordion/content/gap`**
|
|
75
|
+
- **`accordion/content/padding/bottom`**
|
|
76
|
+
- **`accordion/content/padding/top`**
|
|
77
|
+
- **`accordion/header/background`**
|
|
78
|
+
- **`accordion/header/gap`**
|
|
79
|
+
- **`accordion/header/padding/vertical`**
|
|
80
|
+
- **`accordion/icon/color`**
|
|
81
|
+
- **`accordion/icon/size`**
|
|
82
|
+
- **`accordion/title/color`**
|
|
83
|
+
- **`accordion/title/fontFamily`**
|
|
84
|
+
- **`accordion/title/fontSize`**
|
|
85
|
+
- **`accordion/title/lineHeight`**
|
|
86
|
+
|
|
87
|
+
All tokens support mode-based theming through the `modes` prop.
|
|
88
|
+
## Example Usage
|
|
89
|
+
|
|
90
|
+
```tsx
|
|
91
|
+
import { Accordion, ListItem, IconCapsule, MoneyValue } from '@jsf/components';
|
|
92
|
+
|
|
93
|
+
function PaymentSection() {
|
|
94
|
+
return (
|
|
95
|
+
<Accordion
|
|
96
|
+
title="Payment Methods"
|
|
97
|
+
defaultExpanded={true}
|
|
98
|
+
modes={{ 'Color Mode': 'Light' }}
|
|
99
|
+
>
|
|
100
|
+
<ListItem
|
|
101
|
+
layout="Horizontal"
|
|
102
|
+
title="Credit Card"
|
|
103
|
+
supportText="Ending in 4242"
|
|
104
|
+
leading={<IconCapsule iconName="ic_card" />}
|
|
105
|
+
endSlot={<MoneyValue value="500" currency="₹" />}
|
|
106
|
+
navArrow={true}
|
|
107
|
+
/>
|
|
108
|
+
<ListItem
|
|
109
|
+
layout="Horizontal"
|
|
110
|
+
title="Savings Account"
|
|
111
|
+
supportText="HDFC Bank"
|
|
112
|
+
leading={<IconCapsule iconName="ic_bank_account" />}
|
|
113
|
+
endSlot={<MoneyValue value="25,000" currency="₹" />}
|
|
114
|
+
navArrow={true}
|
|
115
|
+
/>
|
|
116
|
+
</Accordion>
|
|
117
|
+
);
|
|
118
|
+
}
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = ActionTile;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
|
|
10
|
+
var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
|
|
11
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
|
+
/**
|
|
14
|
+
* ActionTile component from Figma design.
|
|
15
|
+
* Displays an icon (defaulting to IconCapsule) and a label.
|
|
16
|
+
*
|
|
17
|
+
* @component
|
|
18
|
+
*/
|
|
19
|
+
function ActionTile({
|
|
20
|
+
label = 'Cards',
|
|
21
|
+
icon,
|
|
22
|
+
modes = {},
|
|
23
|
+
style,
|
|
24
|
+
onPress
|
|
25
|
+
}) {
|
|
26
|
+
// Resolve tokens
|
|
27
|
+
const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('actionTile/background', modes) || '#ffffff';
|
|
28
|
+
const gap = Number((0, _figmaVariablesResolver.getVariableByName)('actionTile/gap', modes)) || 8;
|
|
29
|
+
const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('actionTile/padding/horizontal', modes)) || 12;
|
|
30
|
+
const paddingVertical = Number((0, _figmaVariablesResolver.getVariableByName)('actionTile/padding/vertical', modes)) || 16;
|
|
31
|
+
const radius = Number((0, _figmaVariablesResolver.getVariableByName)('actionTile/radius', modes)) || 16;
|
|
32
|
+
|
|
33
|
+
// Text tokens
|
|
34
|
+
const textColor = (0, _figmaVariablesResolver.getVariableByName)('actionTile/foreground', modes) || '#0d0d0f';
|
|
35
|
+
const fontSize = Number((0, _figmaVariablesResolver.getVariableByName)('actionTile/fontSize', modes)) || 14;
|
|
36
|
+
const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('actionTile/fontFamily', modes) || 'JioType Var';
|
|
37
|
+
const fontWeightStr = (0, _figmaVariablesResolver.getVariableByName)('actionTile/fontWeight', modes) || '500';
|
|
38
|
+
const lineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('actionTile/lineHeight', modes)) || 17;
|
|
39
|
+
const containerStyle = {
|
|
40
|
+
backgroundColor,
|
|
41
|
+
borderRadius: radius,
|
|
42
|
+
paddingHorizontal,
|
|
43
|
+
paddingVertical,
|
|
44
|
+
gap,
|
|
45
|
+
width: 168,
|
|
46
|
+
// Fixed width from design
|
|
47
|
+
height: 90,
|
|
48
|
+
// Fixed height from design
|
|
49
|
+
alignItems: 'flex-start',
|
|
50
|
+
// ensure content stretches if needed, though design implies fixed size block
|
|
51
|
+
...style
|
|
52
|
+
};
|
|
53
|
+
const textStyle = {
|
|
54
|
+
color: textColor,
|
|
55
|
+
fontSize,
|
|
56
|
+
fontFamily,
|
|
57
|
+
fontWeight: fontWeightStr,
|
|
58
|
+
// Cast to any or TextStyle fontWeight enum if needed
|
|
59
|
+
lineHeight
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
// Handle Icon Slot: Pass modes safely
|
|
63
|
+
const renderIcon = () => {
|
|
64
|
+
if (/*#__PURE__*/_react.default.isValidElement(icon)) {
|
|
65
|
+
// Pass modes down to the slot child
|
|
66
|
+
return /*#__PURE__*/_react.default.cloneElement(icon, {
|
|
67
|
+
modes
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
// Default fallback if no icon prop is provided, matching design default
|
|
71
|
+
if (!icon) {
|
|
72
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
|
|
73
|
+
modes: modes
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
return icon;
|
|
77
|
+
};
|
|
78
|
+
const Content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
79
|
+
style: containerStyle,
|
|
80
|
+
children: [renderIcon(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
81
|
+
style: textStyle,
|
|
82
|
+
children: label
|
|
83
|
+
})]
|
|
84
|
+
});
|
|
85
|
+
if (onPress) {
|
|
86
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
|
|
87
|
+
onPress: onPress,
|
|
88
|
+
children: Content
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
return Content;
|
|
92
|
+
}
|
|
93
|
+
//# sourceMappingURL=ActionTile.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_IconCapsule","_jsxRuntime","e","__esModule","default","ActionTile","label","icon","modes","style","onPress","backgroundColor","getVariableByName","gap","Number","paddingHorizontal","paddingVertical","radius","textColor","fontSize","fontFamily","fontWeightStr","lineHeight","containerStyle","borderRadius","width","height","alignItems","textStyle","color","fontWeight","renderIcon","React","isValidElement","cloneElement","jsx","Content","jsxs","View","children","Text","TouchableOpacity"],"sourceRoot":"../../../../src","sources":["components/ActionTile/ActionTile.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { Meta, Story, Canvas, PureArgsTable as Controls } from '@storybook/addon-docs/blocks';
|
|
2
|
+
import * as ActionTileStories from './ActionTile.stories';
|
|
3
|
+
|
|
4
|
+
<Meta of={ActionTileStories} />
|
|
5
|
+
|
|
6
|
+
# ActionTile
|
|
7
|
+
|
|
8
|
+
A tile component used for dashboard actions, displaying an icon and a label.
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
## Available Collections and Modes
|
|
12
|
+
|
|
13
|
+
This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
|
|
14
|
+
|
|
15
|
+
### Color Mode
|
|
16
|
+
- **Modes:** Light | Dark
|
|
17
|
+
- **Default:** Light
|
|
18
|
+
## Usage
|
|
19
|
+
|
|
20
|
+
```tsx
|
|
21
|
+
import ActionTile from './ActionTile';
|
|
22
|
+
import IconCapsule from '../IconCapsule/IconCapsule';
|
|
23
|
+
|
|
24
|
+
// Default usage
|
|
25
|
+
<ActionTile label="Cards" />
|
|
26
|
+
|
|
27
|
+
// With custom icon
|
|
28
|
+
<ActionTile
|
|
29
|
+
label="Offers"
|
|
30
|
+
icon={<IconCapsule iconName="ic_offers" />}
|
|
31
|
+
/>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
<Canvas of={ActionTileStories.Default} />
|
|
35
|
+
|
|
36
|
+
<Controls />
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
## Design Tokens
|
|
40
|
+
|
|
41
|
+
This component uses the following design tokens, resolved through `getVariableByName`:
|
|
42
|
+
|
|
43
|
+
- **`actionTile/background`**
|
|
44
|
+
- **`actionTile/fontFamily`**
|
|
45
|
+
- **`actionTile/fontSize`**
|
|
46
|
+
- **`actionTile/fontWeight`**
|
|
47
|
+
- **`actionTile/foreground`**
|
|
48
|
+
- **`actionTile/gap`**
|
|
49
|
+
- **`actionTile/lineHeight`**
|
|
50
|
+
- **`actionTile/padding/horizontal`**
|
|
51
|
+
- **`actionTile/padding/vertical`**
|
|
52
|
+
- **`actionTile/radius`**
|
|
53
|
+
|
|
54
|
+
All tokens support mode-based theming through the `modes` prop.
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "default", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _ActionTile.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
var _ActionTile = _interopRequireDefault(require("./ActionTile"));
|
|
13
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_ActionTile","_interopRequireDefault","require","e","__esModule","default"],"sourceRoot":"../../../../src","sources":["components/ActionTile/index.ts"],"mappings":";;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAsC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
|
|
10
|
+
var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
|
|
11
|
+
var _Button = _interopRequireDefault(require("../Button/Button"));
|
|
12
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
|
+
/**
|
|
15
|
+
* CtaCard component that maps directly to the Figma design using design tokens.
|
|
16
|
+
*
|
|
17
|
+
* @component
|
|
18
|
+
*/
|
|
19
|
+
function CtaCard({
|
|
20
|
+
title = "Lets create your UPI ID",
|
|
21
|
+
body = "Send and receive money securely.",
|
|
22
|
+
iconName = "ic_upi_number",
|
|
23
|
+
buttonLabel = "Get started",
|
|
24
|
+
onPressButton,
|
|
25
|
+
modes = {},
|
|
26
|
+
iconSlot,
|
|
27
|
+
titleSlot,
|
|
28
|
+
bodySlot,
|
|
29
|
+
buttonSlot,
|
|
30
|
+
style
|
|
31
|
+
}) {
|
|
32
|
+
// --- Token Resolution ---
|
|
33
|
+
// Container
|
|
34
|
+
const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/background', modes) || '#0078ad';
|
|
35
|
+
const radius = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/radius', modes) || 16;
|
|
36
|
+
const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/padding/horizontal', modes) || 20;
|
|
37
|
+
const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/padding/vertical', modes) || 23;
|
|
38
|
+
const gap = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/gap', modes) || 16;
|
|
39
|
+
|
|
40
|
+
// Content Wrap
|
|
41
|
+
const contentGap = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/content/gap', modes) || 8;
|
|
42
|
+
|
|
43
|
+
// Title Text
|
|
44
|
+
const titleColor = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/title/color', modes) || '#ffffff';
|
|
45
|
+
const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/title/fontFamily', modes) || 'JioType Var';
|
|
46
|
+
const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/title/fontSize', modes) || 23;
|
|
47
|
+
const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/title/lineHeight', modes) || 23;
|
|
48
|
+
|
|
49
|
+
// Body Text
|
|
50
|
+
const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/body/color', modes) || '#ffffff';
|
|
51
|
+
const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/body/fontFamily', modes) || 'JioType Var';
|
|
52
|
+
const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/body/fontSize', modes) || 14;
|
|
53
|
+
const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('ctaCard/body/lineHeight', modes) || 17;
|
|
54
|
+
|
|
55
|
+
// --- Styles ---
|
|
56
|
+
const containerStyle = {
|
|
57
|
+
backgroundColor,
|
|
58
|
+
borderRadius: radius,
|
|
59
|
+
paddingHorizontal,
|
|
60
|
+
paddingVertical,
|
|
61
|
+
gap,
|
|
62
|
+
alignItems: 'flex-start',
|
|
63
|
+
width: '100%',
|
|
64
|
+
// Adjust based on layout needs, usually cards take full width available
|
|
65
|
+
overflow: 'hidden'
|
|
66
|
+
};
|
|
67
|
+
const contentWrapStyle = {
|
|
68
|
+
gap: contentGap,
|
|
69
|
+
alignItems: 'flex-start',
|
|
70
|
+
width: '100%'
|
|
71
|
+
};
|
|
72
|
+
const titleStyle = {
|
|
73
|
+
color: titleColor,
|
|
74
|
+
fontFamily: titleFontFamily,
|
|
75
|
+
fontSize: titleFontSize,
|
|
76
|
+
lineHeight: titleLineHeight,
|
|
77
|
+
fontWeight: '900' // "Black" in Figma often maps to 900
|
|
78
|
+
};
|
|
79
|
+
const bodyStyle = {
|
|
80
|
+
color: bodyColor,
|
|
81
|
+
fontFamily: bodyFontFamily,
|
|
82
|
+
fontSize: bodyFontSize,
|
|
83
|
+
lineHeight: bodyLineHeight,
|
|
84
|
+
fontWeight: '400' // Regular
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
// --- Slot Helper ---
|
|
88
|
+
// Helper to clone element with modes if no modes are already present on it (standard in this library)
|
|
89
|
+
const renderSlot = slot => {
|
|
90
|
+
if (/*#__PURE__*/_react.default.isValidElement(slot)) {
|
|
91
|
+
return /*#__PURE__*/_react.default.cloneElement(slot, {
|
|
92
|
+
modes: {
|
|
93
|
+
...modes,
|
|
94
|
+
...slot.props.modes
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
return slot;
|
|
99
|
+
};
|
|
100
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
101
|
+
style: [containerStyle, style],
|
|
102
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
103
|
+
style: contentWrapStyle,
|
|
104
|
+
children: [iconSlot ? renderSlot(iconSlot) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
|
|
105
|
+
iconName: iconName,
|
|
106
|
+
modes: modes
|
|
107
|
+
}), titleSlot ? renderSlot(titleSlot) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
108
|
+
style: titleStyle,
|
|
109
|
+
children: title
|
|
110
|
+
}), bodySlot ? renderSlot(bodySlot) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
111
|
+
style: bodyStyle,
|
|
112
|
+
children: body
|
|
113
|
+
})]
|
|
114
|
+
}), buttonSlot ? renderSlot(buttonSlot) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
|
|
115
|
+
label: buttonLabel,
|
|
116
|
+
onPress: onPressButton,
|
|
117
|
+
modes: modes
|
|
118
|
+
})]
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
var _default = exports.default = CtaCard;
|
|
122
|
+
//# sourceMappingURL=CtaCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_IconCapsule","_Button","_jsxRuntime","e","__esModule","default","CtaCard","title","body","iconName","buttonLabel","onPressButton","modes","iconSlot","titleSlot","bodySlot","buttonSlot","style","backgroundColor","getVariableByName","radius","paddingHorizontal","paddingVertical","gap","contentGap","titleColor","titleFontFamily","titleFontSize","titleLineHeight","bodyColor","bodyFontFamily","bodyFontSize","bodyLineHeight","containerStyle","borderRadius","alignItems","width","overflow","contentWrapStyle","titleStyle","color","fontFamily","fontSize","lineHeight","fontWeight","bodyStyle","renderSlot","slot","React","isValidElement","cloneElement","props","jsxs","View","children","jsx","Text","label","onPress","_default","exports"],"sourceRoot":"../../../../src","sources":["components/CtaCard/CtaCard.tsx"],"mappings":"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","ignoreList":[]}
|