jfs-components 0.0.6 → 0.0.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.
- package/lib/commonjs/components/Accordion/Accordion.mdx +1 -1
- package/lib/commonjs/components/ActionFooter/ActionFooter.js +2 -14
- package/lib/commonjs/components/ActionFooter/ActionFooter.js.map +1 -1
- package/lib/commonjs/components/ActionFooter/ActionFooter.mdx +1 -1
- package/lib/commonjs/components/ActionTile/ActionTile.mdx +5 -1
- package/lib/commonjs/components/AppBar/AppBar.js +100 -238
- package/lib/commonjs/components/AppBar/AppBar.js.map +1 -1
- package/lib/commonjs/components/AppBar/AppBar.mdx +51 -39
- package/lib/commonjs/components/Avatar/Avatar.mdx +9 -1
- package/lib/commonjs/components/AvatarGroup/AvatarGroup.mdx +9 -1
- package/lib/commonjs/components/Badge/Badge.mdx +1 -1
- package/lib/commonjs/components/Balance/Balance.js +77 -0
- package/lib/commonjs/components/Balance/Balance.js.map +1 -0
- package/lib/commonjs/components/Balance/Balance.mdx +62 -0
- package/lib/commonjs/components/BottomNav/BottomNav.mdx +5 -1
- package/lib/commonjs/components/BottomNavItem/BottomNavItem.mdx +5 -1
- package/lib/commonjs/components/Button/Button.mdx +5 -1
- package/lib/commonjs/components/ButtonGroup/ButtonGroup.js +64 -0
- package/lib/commonjs/components/ButtonGroup/ButtonGroup.js.map +1 -0
- package/lib/commonjs/components/ButtonGroup/ButtonGroup.mdx +56 -0
- package/lib/commonjs/components/Card/Card.mdx +1 -1
- package/lib/commonjs/components/CardFeedback/CardFeedback.mdx +5 -1
- package/lib/commonjs/components/ChipGroup/ChipGroup.js +54 -0
- package/lib/commonjs/components/ChipGroup/ChipGroup.js.map +1 -0
- package/lib/commonjs/components/ChipGroup/ChipGroup.mdx +40 -0
- package/lib/commonjs/components/ChipSelect/ChipSelect.js +103 -0
- package/lib/commonjs/components/ChipSelect/ChipSelect.js.map +1 -0
- package/lib/commonjs/components/ChipSelect/ChipSelect.mdx +80 -0
- package/lib/commonjs/components/CtaCard/CtaCard.js +5 -18
- package/lib/commonjs/components/CtaCard/CtaCard.js.map +1 -1
- package/lib/commonjs/components/CtaCard/CtaCard.mdx +1 -1
- package/lib/commonjs/components/Disclaimer/Disclaimer.mdx +5 -1
- package/lib/commonjs/components/Divider/Divider.mdx +5 -1
- package/lib/commonjs/components/Drawer/Drawer.mdx +9 -1
- package/lib/commonjs/components/EmptyState/EmptyState.js +138 -0
- package/lib/commonjs/components/EmptyState/EmptyState.js.map +1 -0
- package/lib/commonjs/components/EmptyState/EmptyState.mdx +73 -0
- package/lib/commonjs/components/FilterBar/FilterBar.mdx +1 -1
- package/lib/commonjs/components/HStack/HStack.js +67 -0
- package/lib/commonjs/components/HStack/HStack.js.map +1 -0
- package/lib/commonjs/components/HStack/HStack.mdx +44 -0
- package/lib/commonjs/components/IconButton/IconButton.mdx +5 -1
- package/lib/commonjs/components/IconCapsule/IconCapsule.js +3 -3
- package/lib/commonjs/components/IconCapsule/IconCapsule.js.map +1 -1
- package/lib/commonjs/components/IconCapsule/IconCapsule.mdx +12 -4
- package/lib/commonjs/components/Introduction.mdx +3 -98
- package/lib/commonjs/components/LazyList/LazyList.mdx +1 -1
- package/lib/commonjs/components/ListGroup/ListGroup.js +3 -30
- package/lib/commonjs/components/ListGroup/ListGroup.js.map +1 -1
- package/lib/commonjs/components/ListGroup/ListGroup.mdx +5 -1
- package/lib/commonjs/components/ListItem/ListItem.js +5 -37
- package/lib/commonjs/components/ListItem/ListItem.js.map +1 -1
- package/lib/commonjs/components/ListItem/ListItem.mdx +5 -1
- package/lib/commonjs/components/MediaCard/MediaCard.mdx +5 -1
- package/lib/commonjs/components/MerchantProfile/MerchantProfile.mdx +1 -1
- package/lib/commonjs/components/MoneyValue/MoneyValue.mdx +6 -2
- package/lib/commonjs/components/NavArrow/NavArrow.js +42 -17
- package/lib/commonjs/components/NavArrow/NavArrow.js.map +1 -1
- package/lib/commonjs/components/NavArrow/NavArrow.mdx +5 -1
- package/lib/commonjs/components/PageTitle/PageTitle.mdx +5 -1
- package/lib/commonjs/components/Screen/Screen.js +53 -0
- package/lib/commonjs/components/Screen/Screen.js.map +1 -0
- package/lib/commonjs/components/Screen/Screen.mdx +58 -0
- package/lib/commonjs/components/Section/Section.js +3 -25
- package/lib/commonjs/components/Section/Section.js.map +1 -1
- package/lib/commonjs/components/Section/Section.mdx +5 -1
- package/lib/commonjs/components/Stepper/Step.mdx +5 -1
- package/lib/commonjs/components/Stepper/StepLabel.mdx +5 -1
- package/lib/commonjs/components/Stepper/Stepper.mdx +1 -1
- package/lib/commonjs/components/SupportText/SupportText.js +83 -0
- package/lib/commonjs/components/SupportText/SupportText.js.map +1 -0
- package/lib/commonjs/components/SupportText/SupportText.mdx +48 -0
- package/lib/commonjs/components/SupportText/SupportTextIcon.js +47 -0
- package/lib/commonjs/components/SupportText/SupportTextIcon.js.map +1 -0
- package/lib/commonjs/components/SupportText/SupportTextIcon.mdx +35 -0
- package/lib/commonjs/components/SupportText/index.js +21 -0
- package/lib/commonjs/components/SupportText/index.js.map +1 -0
- package/lib/commonjs/components/TextInput/TextInput.mdx +9 -1
- package/lib/commonjs/components/ThreadHero/ThreadHero.mdx +1 -1
- package/lib/commonjs/components/Tooltip/Tooltip.mdx +5 -1
- package/lib/commonjs/components/TransactionBubble/TransactionBubble.mdx +1 -1
- package/lib/commonjs/components/TransactionDetails/TransactionDetails.js +2 -24
- package/lib/commonjs/components/TransactionDetails/TransactionDetails.js.map +1 -1
- package/lib/commonjs/components/TransactionDetails/TransactionDetails.mdx +1 -1
- package/lib/commonjs/components/TransactionStatus/TransactionStatus.mdx +1 -1
- package/lib/commonjs/components/UpiHandle/UpiHandle.mdx +5 -1
- package/lib/commonjs/components/VStack/VStack.js +73 -0
- package/lib/commonjs/components/VStack/VStack.js.map +1 -0
- package/lib/commonjs/components/VStack/VStack.mdx +44 -0
- package/lib/commonjs/components/index.js +28 -0
- package/lib/commonjs/components/index.js.map +1 -1
- package/lib/commonjs/design-tokens/JFS Variables-variables-full.json +1 -18633
- package/lib/commonjs/design-tokens/figma-variables-resolver.js +3 -9
- package/lib/commonjs/design-tokens/figma-variables-resolver.js.map +1 -2
- package/lib/commonjs/icons/ic_info.svg +1 -0
- package/lib/commonjs/icons/ic_warning.svg +1 -0
- package/lib/commonjs/icons/registry.js +2 -2
- package/lib/commonjs/icons/registry.js.map +1 -1
- package/lib/commonjs/utils/react-utils.js +47 -0
- package/lib/commonjs/utils/react-utils.js.map +1 -0
- package/lib/module/components/Accordion/Accordion.mdx +1 -1
- package/lib/module/components/ActionFooter/ActionFooter.js +2 -14
- package/lib/module/components/ActionFooter/ActionFooter.js.map +1 -1
- package/lib/module/components/ActionFooter/ActionFooter.mdx +1 -1
- package/lib/module/components/ActionTile/ActionTile.mdx +5 -1
- package/lib/module/components/AppBar/AppBar.js +100 -238
- package/lib/module/components/AppBar/AppBar.js.map +1 -1
- package/lib/module/components/AppBar/AppBar.mdx +51 -39
- package/lib/module/components/Avatar/Avatar.mdx +9 -1
- package/lib/module/components/AvatarGroup/AvatarGroup.mdx +9 -1
- package/lib/module/components/Badge/Badge.mdx +1 -1
- package/lib/module/components/Balance/Balance.js +72 -0
- package/lib/module/components/Balance/Balance.js.map +1 -0
- package/lib/module/components/Balance/Balance.mdx +62 -0
- package/lib/module/components/BottomNav/BottomNav.mdx +5 -1
- package/lib/module/components/BottomNavItem/BottomNavItem.mdx +5 -1
- package/lib/module/components/Button/Button.mdx +5 -1
- package/lib/module/components/ButtonGroup/ButtonGroup.js +59 -0
- package/lib/module/components/ButtonGroup/ButtonGroup.js.map +1 -0
- package/lib/module/components/ButtonGroup/ButtonGroup.mdx +56 -0
- package/lib/module/components/Card/Card.mdx +1 -1
- package/lib/module/components/CardFeedback/CardFeedback.mdx +5 -1
- package/lib/module/components/ChipGroup/ChipGroup.js +49 -0
- package/lib/module/components/ChipGroup/ChipGroup.js.map +1 -0
- package/lib/module/components/ChipGroup/ChipGroup.mdx +40 -0
- package/lib/module/components/ChipSelect/ChipSelect.js +98 -0
- package/lib/module/components/ChipSelect/ChipSelect.js.map +1 -0
- package/lib/module/components/ChipSelect/ChipSelect.mdx +80 -0
- package/lib/module/components/CtaCard/CtaCard.js +5 -18
- package/lib/module/components/CtaCard/CtaCard.js.map +1 -1
- package/lib/module/components/CtaCard/CtaCard.mdx +1 -1
- package/lib/module/components/Disclaimer/Disclaimer.mdx +5 -1
- package/lib/module/components/Divider/Divider.mdx +5 -1
- package/lib/module/components/Drawer/Drawer.mdx +9 -1
- package/lib/module/components/EmptyState/EmptyState.js +132 -0
- package/lib/module/components/EmptyState/EmptyState.js.map +1 -0
- package/lib/module/components/EmptyState/EmptyState.mdx +73 -0
- package/lib/module/components/FilterBar/FilterBar.mdx +1 -1
- package/lib/module/components/HStack/HStack.js +61 -0
- package/lib/module/components/HStack/HStack.js.map +1 -0
- package/lib/module/components/HStack/HStack.mdx +44 -0
- package/lib/module/components/IconButton/IconButton.mdx +5 -1
- package/lib/module/components/IconCapsule/IconCapsule.js +3 -3
- package/lib/module/components/IconCapsule/IconCapsule.js.map +1 -1
- package/lib/module/components/IconCapsule/IconCapsule.mdx +12 -4
- package/lib/module/components/Introduction.mdx +3 -98
- package/lib/module/components/LazyList/LazyList.mdx +1 -1
- package/lib/module/components/ListGroup/ListGroup.js +1 -30
- package/lib/module/components/ListGroup/ListGroup.js.map +1 -1
- package/lib/module/components/ListGroup/ListGroup.mdx +5 -1
- package/lib/module/components/ListItem/ListItem.js +1 -35
- package/lib/module/components/ListItem/ListItem.js.map +1 -1
- package/lib/module/components/ListItem/ListItem.mdx +5 -1
- package/lib/module/components/MediaCard/MediaCard.mdx +5 -1
- package/lib/module/components/MerchantProfile/MerchantProfile.mdx +1 -1
- package/lib/module/components/MoneyValue/MoneyValue.mdx +6 -2
- package/lib/module/components/NavArrow/NavArrow.js +42 -17
- package/lib/module/components/NavArrow/NavArrow.js.map +1 -1
- package/lib/module/components/NavArrow/NavArrow.mdx +5 -1
- package/lib/module/components/PageTitle/PageTitle.mdx +5 -1
- package/lib/module/components/Screen/Screen.js +47 -0
- package/lib/module/components/Screen/Screen.js.map +1 -0
- package/lib/module/components/Screen/Screen.mdx +58 -0
- package/lib/module/components/Section/Section.js +1 -23
- package/lib/module/components/Section/Section.js.map +1 -1
- package/lib/module/components/Section/Section.mdx +5 -1
- package/lib/module/components/Stepper/Step.mdx +5 -1
- package/lib/module/components/Stepper/StepLabel.mdx +5 -1
- package/lib/module/components/Stepper/Stepper.mdx +1 -1
- package/lib/module/components/SupportText/SupportText.js +78 -0
- package/lib/module/components/SupportText/SupportText.js.map +1 -0
- package/lib/module/components/SupportText/SupportText.mdx +48 -0
- package/lib/module/components/SupportText/SupportTextIcon.js +42 -0
- package/lib/module/components/SupportText/SupportTextIcon.js.map +1 -0
- package/lib/module/components/SupportText/SupportTextIcon.mdx +35 -0
- package/lib/module/components/SupportText/index.js +5 -0
- package/lib/module/components/SupportText/index.js.map +1 -0
- package/lib/module/components/TextInput/TextInput.mdx +9 -1
- package/lib/module/components/ThreadHero/ThreadHero.mdx +1 -1
- package/lib/module/components/Tooltip/Tooltip.mdx +5 -1
- package/lib/module/components/TransactionBubble/TransactionBubble.mdx +1 -1
- package/lib/module/components/TransactionDetails/TransactionDetails.js +2 -26
- package/lib/module/components/TransactionDetails/TransactionDetails.js.map +1 -1
- package/lib/module/components/TransactionDetails/TransactionDetails.mdx +1 -1
- package/lib/module/components/TransactionStatus/TransactionStatus.mdx +1 -1
- package/lib/module/components/UpiHandle/UpiHandle.mdx +5 -1
- package/lib/module/components/VStack/VStack.js +67 -0
- package/lib/module/components/VStack/VStack.js.map +1 -0
- package/lib/module/components/VStack/VStack.mdx +44 -0
- package/lib/module/components/index.js +4 -0
- package/lib/module/components/index.js.map +1 -1
- package/lib/module/design-tokens/JFS Variables-variables-full.json +1 -18633
- package/lib/module/design-tokens/figma-variables-resolver.js +2 -2
- package/lib/module/design-tokens/figma-variables-resolver.js.map +0 -1
- package/lib/module/icons/ic_info.svg +1 -0
- package/lib/module/icons/ic_warning.svg +1 -0
- package/lib/module/icons/registry.js +2 -2
- package/lib/module/icons/registry.js.map +1 -1
- package/lib/module/utils/react-utils.js +43 -0
- package/lib/module/utils/react-utils.js.map +1 -0
- package/lib/typescript/components/ActionFooter/ActionFooter.d.ts.map +1 -1
- package/lib/typescript/components/AppBar/AppBar.d.ts +34 -68
- package/lib/typescript/components/AppBar/AppBar.d.ts.map +1 -1
- package/lib/typescript/components/Balance/Balance.d.ts +44 -0
- package/lib/typescript/components/Balance/Balance.d.ts.map +1 -0
- package/lib/typescript/components/ButtonGroup/ButtonGroup.d.ts +36 -0
- package/lib/typescript/components/ButtonGroup/ButtonGroup.d.ts.map +1 -0
- package/lib/typescript/components/ChipGroup/ChipGroup.d.ts +29 -0
- package/lib/typescript/components/ChipGroup/ChipGroup.d.ts.map +1 -0
- package/lib/typescript/components/ChipSelect/ChipSelect.d.ts +47 -0
- package/lib/typescript/components/ChipSelect/ChipSelect.d.ts.map +1 -0
- package/lib/typescript/components/CtaCard/CtaCard.d.ts.map +1 -1
- package/lib/typescript/components/EmptyState/EmptyState.d.ts +38 -0
- package/lib/typescript/components/EmptyState/EmptyState.d.ts.map +1 -0
- package/lib/typescript/components/HStack/HStack.d.ts +41 -0
- package/lib/typescript/components/HStack/HStack.d.ts.map +1 -0
- package/lib/typescript/components/ListGroup/ListGroup.d.ts.map +1 -1
- package/lib/typescript/components/ListItem/ListItem.d.ts.map +1 -1
- package/lib/typescript/components/NavArrow/NavArrow.d.ts +3 -3
- package/lib/typescript/components/NavArrow/NavArrow.d.ts.map +1 -1
- package/lib/typescript/components/Screen/Screen.d.ts +23 -0
- package/lib/typescript/components/Screen/Screen.d.ts.map +1 -0
- package/lib/typescript/components/Section/Section.d.ts.map +1 -1
- package/lib/typescript/components/SupportText/SupportText.d.ts +34 -0
- package/lib/typescript/components/SupportText/SupportText.d.ts.map +1 -0
- package/lib/typescript/components/SupportText/SupportTextIcon.d.ts +10 -0
- package/lib/typescript/components/SupportText/SupportTextIcon.d.ts.map +1 -0
- package/lib/typescript/components/SupportText/index.d.ts +3 -0
- package/lib/typescript/components/SupportText/index.d.ts.map +1 -0
- package/lib/typescript/components/TransactionDetails/TransactionDetails.d.ts.map +1 -1
- package/lib/typescript/components/VStack/VStack.d.ts +41 -0
- package/lib/typescript/components/VStack/VStack.d.ts.map +1 -0
- package/lib/typescript/components/index.d.ts +4 -0
- package/lib/typescript/components/index.d.ts.map +1 -1
- package/lib/typescript/icons/registry.d.ts +1 -1
- package/lib/typescript/icons/registry.d.ts.map +1 -1
- package/lib/typescript/utils/react-utils.d.ts +7 -0
- package/lib/typescript/utils/react-utils.d.ts.map +1 -0
- package/package.json +7 -5
- package/src/components/.token-metadata.json +468 -12
- package/src/components/Accordion/Accordion.mdx +1 -1
- package/src/components/ActionFooter/ActionFooter.mdx +1 -1
- package/src/components/ActionFooter/ActionFooter.tsx +3 -12
- package/src/components/ActionTile/ActionTile.mdx +5 -1
- package/src/components/AppBar/AppBar.mdx +51 -39
- package/src/components/AppBar/AppBar.tsx +140 -261
- package/src/components/Avatar/Avatar.mdx +9 -1
- package/src/components/AvatarGroup/AvatarGroup.mdx +9 -1
- package/src/components/Badge/Badge.mdx +1 -1
- package/src/components/Balance/Balance.mdx +62 -0
- package/src/components/Balance/Balance.tsx +107 -0
- package/src/components/BottomNav/BottomNav.mdx +5 -1
- package/src/components/BottomNavItem/BottomNavItem.mdx +5 -1
- package/src/components/Button/Button.mdx +5 -1
- package/src/components/ButtonGroup/ButtonGroup.mdx +56 -0
- package/src/components/ButtonGroup/ButtonGroup.tsx +78 -0
- package/src/components/Card/Card.mdx +1 -1
- package/src/components/CardFeedback/CardFeedback.mdx +5 -1
- package/src/components/ChipGroup/ChipGroup.mdx +40 -0
- package/src/components/ChipGroup/ChipGroup.tsx +67 -0
- package/src/components/ChipSelect/ChipSelect.mdx +80 -0
- package/src/components/ChipSelect/ChipSelect.tsx +138 -0
- package/src/components/CtaCard/CtaCard.mdx +1 -1
- package/src/components/CtaCard/CtaCard.tsx +12 -20
- package/src/components/Disclaimer/Disclaimer.mdx +5 -1
- package/src/components/Divider/Divider.mdx +5 -1
- package/src/components/Drawer/Drawer.mdx +9 -1
- package/src/components/EmptyState/EmptyState.mdx +73 -0
- package/src/components/EmptyState/EmptyState.tsx +181 -0
- package/src/components/FilterBar/FilterBar.mdx +1 -1
- package/src/components/HStack/HStack.mdx +44 -0
- package/src/components/HStack/HStack.tsx +95 -0
- package/src/components/IconButton/IconButton.mdx +5 -1
- package/src/components/IconCapsule/IconCapsule.mdx +12 -4
- package/src/components/IconCapsule/IconCapsule.tsx +3 -3
- package/src/components/Introduction.mdx +3 -98
- package/src/components/LazyList/LazyList.mdx +1 -1
- package/src/components/ListGroup/ListGroup.mdx +5 -1
- package/src/components/ListGroup/ListGroup.tsx +5 -43
- package/src/components/ListItem/ListItem.mdx +5 -1
- package/src/components/ListItem/ListItem.tsx +15 -60
- package/src/components/MediaCard/MediaCard.mdx +5 -1
- package/src/components/MerchantProfile/MerchantProfile.mdx +1 -1
- package/src/components/MoneyValue/MoneyValue.mdx +6 -2
- package/src/components/NavArrow/NavArrow.mdx +5 -1
- package/src/components/NavArrow/NavArrow.tsx +48 -16
- package/src/components/PageTitle/PageTitle.mdx +5 -1
- package/src/components/Screen/Screen.mdx +58 -0
- package/src/components/Screen/Screen.tsx +60 -0
- package/src/components/Section/Section.mdx +5 -1
- package/src/components/Section/Section.tsx +17 -46
- package/src/components/Stepper/Step.mdx +5 -1
- package/src/components/Stepper/StepLabel.mdx +5 -1
- package/src/components/Stepper/Stepper.mdx +1 -1
- package/src/components/SupportText/SupportText.mdx +48 -0
- package/src/components/SupportText/SupportText.tsx +104 -0
- package/src/components/SupportText/SupportTextIcon.mdx +35 -0
- package/src/components/SupportText/SupportTextIcon.tsx +45 -0
- package/src/components/SupportText/index.ts +2 -0
- package/src/components/TextInput/TextInput.mdx +9 -1
- package/src/components/ThreadHero/ThreadHero.mdx +1 -1
- package/src/components/Tooltip/Tooltip.mdx +5 -1
- package/src/components/TransactionBubble/TransactionBubble.mdx +1 -1
- package/src/components/TransactionDetails/TransactionDetails.mdx +1 -1
- package/src/components/TransactionDetails/TransactionDetails.tsx +1 -38
- package/src/components/TransactionStatus/TransactionStatus.mdx +1 -1
- package/src/components/UpiHandle/UpiHandle.mdx +5 -1
- package/src/components/VStack/VStack.mdx +44 -0
- package/src/components/VStack/VStack.tsx +100 -0
- package/src/components/index.ts +4 -0
- package/src/design-tokens/JFS Variables-variables-full.json +1 -18633
- package/src/icons/ic_info.svg +1 -0
- package/src/icons/ic_warning.svg +1 -0
- package/src/icons/registry.ts +9 -1
- package/src/utils/react-utils.ts +51 -0
|
@@ -8,37 +8,8 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
|
|
|
8
8
|
* Helper function to recursively clone children and pass modes prop to components that accept it.
|
|
9
9
|
* This ensures that all child components in slots receive the modes prop from the parent.
|
|
10
10
|
*/
|
|
11
|
+
import { cloneChildrenWithModes } from '../../utils/react-utils';
|
|
11
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
|
-
function cloneChildrenWithModes(children, modes) {
|
|
13
|
-
const result = React.Children.map(children, child => {
|
|
14
|
-
if (! /*#__PURE__*/React.isValidElement(child)) {
|
|
15
|
-
return child;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
// Get existing children
|
|
19
|
-
const childChildren = child.props?.children;
|
|
20
|
-
const hasChildren = childChildren !== undefined && childChildren !== null;
|
|
21
|
-
|
|
22
|
-
// Clone the child with modes prop if it doesn't already have one
|
|
23
|
-
// or merge with existing modes if it does
|
|
24
|
-
// Merge order: parent modes first, then child's explicit modes override them
|
|
25
|
-
const existingModes = child.props?.modes;
|
|
26
|
-
const mergedModes = existingModes ? {
|
|
27
|
-
...modes,
|
|
28
|
-
...existingModes
|
|
29
|
-
} : modes;
|
|
30
|
-
|
|
31
|
-
// Recursively process children if they exist
|
|
32
|
-
const processedChildren = hasChildren ? cloneChildrenWithModes(React.Children.toArray(childChildren), modes) : undefined;
|
|
33
|
-
|
|
34
|
-
// Clone element with modes and processed children
|
|
35
|
-
return /*#__PURE__*/React.cloneElement(child, {
|
|
36
|
-
...child.props,
|
|
37
|
-
modes: mergedModes
|
|
38
|
-
}, processedChildren);
|
|
39
|
-
});
|
|
40
|
-
return result || [];
|
|
41
|
-
}
|
|
42
13
|
/**
|
|
43
14
|
* ListGroup component that mirrors the Figma "List Group" component.
|
|
44
15
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","Text","getVariableByName","jsx","_jsx","jsxs","_jsxs","
|
|
1
|
+
{"version":3,"names":["React","View","Text","getVariableByName","cloneChildrenWithModes","jsx","_jsx","jsxs","_jsxs","ListGroup","label","listGroupSlot","modes","style","accessibilityLabel","accessibilityHint","rest","backgroundColor","borderColor","borderWidth","gap","labelColor","labelFontSize","labelLineHeight","labelFontFamily","labelFontWeightRaw","labelFontWeight","toString","containerStyle","borderStyle","flexDirection","alignItems","width","labelStyle","color","fontSize","lineHeight","fontFamily","fontWeight","processedSlot","Children","toArray","defaultAccessibilityLabel","accessibilityRole","children","marginBottom","numberOfLines","accessibilityElementsHidden","importantForAccessibility","map","child","index","isValidElement","items","isLast","length","wrapperStyle","key"],"sourceRoot":"../../../../src","sources":["components/ListGroup/ListGroup.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Meta, Story, Canvas,
|
|
1
|
+
import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
|
|
2
2
|
import * as ListGroupStories from './ListGroup.stories';
|
|
3
3
|
import ListGroup from './ListGroup';
|
|
4
4
|
import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
|
|
@@ -13,6 +13,10 @@ Helper function to recursively clone children and pass modes prop to components
|
|
|
13
13
|
|
|
14
14
|
This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
|
|
15
15
|
|
|
16
|
+
### Colors Router
|
|
17
|
+
- **Modes:** POC | Old
|
|
18
|
+
- **Default:** POC
|
|
19
|
+
|
|
16
20
|
### Title Level
|
|
17
21
|
- **Modes:** Default | Bold
|
|
18
22
|
- **Default:** Default
|
|
@@ -14,42 +14,8 @@ import { usePressableWebSupport } from '../../utils/web-platform-utils';
|
|
|
14
14
|
* @param forcedModes - Optional modes that will ALWAYS be applied last, overriding any other modes.
|
|
15
15
|
* Useful for slots that need to enforce specific context values.
|
|
16
16
|
*/
|
|
17
|
+
import { cloneChildrenWithModes } from '../../utils/react-utils';
|
|
17
18
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
18
|
-
function cloneChildrenWithModes(children, modes, forcedModes) {
|
|
19
|
-
const result = React.Children.map(children, child => {
|
|
20
|
-
if (! /*#__PURE__*/React.isValidElement(child)) {
|
|
21
|
-
return child;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
// Get existing children
|
|
25
|
-
const childChildren = child.props?.children;
|
|
26
|
-
const hasChildren = childChildren !== undefined && childChildren !== null;
|
|
27
|
-
|
|
28
|
-
// Clone the child with modes prop if it doesn't already have one
|
|
29
|
-
// or merge with existing modes if it does
|
|
30
|
-
// Merge order: parent modes first, then child's explicit modes override them,
|
|
31
|
-
// then forcedModes (if provided) are applied last and can never be overridden
|
|
32
|
-
const existingModes = child.props?.modes;
|
|
33
|
-
const mergedModes = forcedModes ? {
|
|
34
|
-
...modes,
|
|
35
|
-
...(existingModes || {}),
|
|
36
|
-
...forcedModes
|
|
37
|
-
} : existingModes ? {
|
|
38
|
-
...modes,
|
|
39
|
-
...existingModes
|
|
40
|
-
} : modes;
|
|
41
|
-
|
|
42
|
-
// Recursively process children if they exist
|
|
43
|
-
const processedChildren = hasChildren ? cloneChildrenWithModes(React.Children.toArray(childChildren), modes, forcedModes) : undefined;
|
|
44
|
-
|
|
45
|
-
// Clone element with modes and processed children
|
|
46
|
-
return /*#__PURE__*/React.cloneElement(child, {
|
|
47
|
-
...child.props,
|
|
48
|
-
modes: mergedModes
|
|
49
|
-
}, processedChildren);
|
|
50
|
-
});
|
|
51
|
-
return result || [];
|
|
52
|
-
}
|
|
53
19
|
/**
|
|
54
20
|
* ListItem component that mirrors the Figma "List Item" component.
|
|
55
21
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useMemo","View","Text","Pressable","getVariableByName","IconCapsule","NavArrow","usePressableWebSupport","jsx","_jsx","jsxs","_jsxs","
|
|
1
|
+
{"version":3,"names":["React","useMemo","View","Text","Pressable","getVariableByName","IconCapsule","NavArrow","usePressableWebSupport","cloneChildrenWithModes","jsx","_jsx","jsxs","_jsxs","ListItem","layout","title","supportText","showSupportText","leading","supportSlot","endSlot","navArrow","modes","onPress","style","contentStyle","accessibilityLabel","accessibilityHint","accessibilityState","webAccessibilityProps","rest","gap","paddingTop","paddingBottom","paddingLeft","paddingRight","titleColor","titleFontSize","titleLineHeight","titleFontFamily","titleFontWeightRaw","titleFontWeight","toString","supportColor","supportFontSize","supportLineHeight","supportFontFamily","supportFontWeightRaw","supportFontWeight","baseContainerStyle","sharedLayoutStyle","flexDirection","alignItems","innerContentBaseStyle","flex","verticalContentBaseStyle","titleTextStyle","color","fontSize","lineHeight","fontFamily","fontWeight","supportTextStyle","trailingWrapperStyle","marginLeft","defaultAccessibilityLabel","webPropsHorizontal","restProps","disabled","webPropsVertical","processedLeading","Children","toArray","leadingElement","length","renderSupportContent","processedSupportSlot","numberOfLines","children","processedEndSlot","trailingContent","innerContent","minWidth","direction","accessibilityRole","pressed","opacity","undefined","verticalContent"],"sourceRoot":"../../../../src","sources":["components/ListItem/ListItem.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Meta, Story, Canvas,
|
|
1
|
+
import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
|
|
2
2
|
import * as ListItemStories from './ListItem.stories';
|
|
3
3
|
import ListItem from './ListItem';
|
|
4
4
|
import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
|
|
@@ -26,6 +26,10 @@ This component uses the following design token collections. Each collection supp
|
|
|
26
26
|
### Color Mode
|
|
27
27
|
- **Modes:** Light | Dark
|
|
28
28
|
- **Default:** Light
|
|
29
|
+
|
|
30
|
+
### Colors Router
|
|
31
|
+
- **Modes:** POC | Old
|
|
32
|
+
- **Default:** POC
|
|
29
33
|
## Usage
|
|
30
34
|
|
|
31
35
|
### Horizontal Layout with NavArrow
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Meta, Story, Canvas,
|
|
1
|
+
import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
|
|
2
2
|
import * as MediaCardStories from './MediaCard.stories';
|
|
3
3
|
import MediaCard from './MediaCard';
|
|
4
4
|
import { AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
|
|
@@ -13,6 +13,10 @@ This component uses the following design token collections. Each collection supp
|
|
|
13
13
|
### Contrast Context
|
|
14
14
|
- **Modes:** on dark | on light
|
|
15
15
|
- **Default:** on dark
|
|
16
|
+
|
|
17
|
+
### Colors Router
|
|
18
|
+
- **Modes:** POC | Old
|
|
19
|
+
- **Default:** POC
|
|
16
20
|
## Usage
|
|
17
21
|
|
|
18
22
|
<Canvas>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Meta, Story, Canvas,
|
|
1
|
+
import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
|
|
2
2
|
import * as MerchantProfileStories from './MerchantProfile.stories';
|
|
3
3
|
import MerchantProfile from './MerchantProfile';
|
|
4
4
|
import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Meta, Story, Canvas,
|
|
1
|
+
import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
|
|
2
2
|
import * as MoneyValueStories from './MoneyValue.stories';
|
|
3
3
|
import MoneyValue from './MoneyValue';
|
|
4
4
|
import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
|
|
@@ -17,8 +17,12 @@ This component uses the following design token collections. Each collection supp
|
|
|
17
17
|
- **Modes:** Light | Dark
|
|
18
18
|
- **Default:** Light
|
|
19
19
|
|
|
20
|
+
### Colors Router
|
|
21
|
+
- **Modes:** POC | Old
|
|
22
|
+
- **Default:** POC
|
|
23
|
+
|
|
20
24
|
### Context3
|
|
21
|
-
- **Modes:** Default | Transaction Bubble
|
|
25
|
+
- **Modes:** Default | Transaction Bubble | Balance
|
|
22
26
|
- **Default:** Default
|
|
23
27
|
## Usage
|
|
24
28
|
|
|
@@ -20,7 +20,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
20
20
|
*
|
|
21
21
|
* @component
|
|
22
22
|
* @param {Object} props
|
|
23
|
-
* @param {'Back'|'Forward'} [props.direction='Back'] - Arrow direction
|
|
23
|
+
* @param {'Back'|'Forward'|'Down'} [props.direction='Back'] - Arrow direction
|
|
24
24
|
* @param {Object} [props.modes={}] - Modes for design token resolution
|
|
25
25
|
* @param {Object} [props.style] - Additional container styles
|
|
26
26
|
*/
|
|
@@ -36,38 +36,63 @@ function NavArrow({
|
|
|
36
36
|
const iconWidth = Number(getVariableByName('navArrow/icon/width', modes)) || 4;
|
|
37
37
|
const iconHeight = Number(getVariableByName('navArrow/icon/height', modes)) || 8;
|
|
38
38
|
const strokeWeight = Number(getVariableByName('navArrow/icon/strokeWeight', modes)) || 2;
|
|
39
|
-
|
|
40
|
-
|
|
39
|
+
|
|
40
|
+
// Base dimensions from tokens (these are for Vertical orientation like Back/Forward)
|
|
41
|
+
const baseContainerWidth = Number(getVariableByName('navArrow/width', modes)) || 6;
|
|
42
|
+
const baseContainerHeight = Number(getVariableByName('navArrow/height', modes)) || 10;
|
|
41
43
|
const borderRadius = Number(getVariableByName('navArrow/radius', modes)) || 0;
|
|
42
44
|
const backgroundColor = getVariableByName('navArrow/background', modes) || 'transparent';
|
|
45
|
+
|
|
46
|
+
// For Down direction, we swap width and height considerations
|
|
47
|
+
const isDown = direction === 'Down';
|
|
43
48
|
const containerStyle = {
|
|
44
|
-
width
|
|
45
|
-
|
|
49
|
+
// If Down, we use the height token for width and width token for height
|
|
50
|
+
width: isDown ? baseContainerHeight : baseContainerWidth,
|
|
51
|
+
height: isDown ? baseContainerWidth : baseContainerHeight,
|
|
46
52
|
borderRadius,
|
|
47
53
|
backgroundColor,
|
|
48
54
|
alignItems: 'center',
|
|
49
55
|
justifyContent: 'center',
|
|
50
56
|
...(style || {})
|
|
51
57
|
};
|
|
52
|
-
const defaultAccessibilityLabel = accessibilityLabel || (direction === 'Back' ? 'Go back' : 'Go forward');
|
|
58
|
+
const defaultAccessibilityLabel = accessibilityLabel || (direction === 'Back' ? 'Go back' : direction === 'Forward' ? 'Go forward' : 'Go down');
|
|
59
|
+
|
|
60
|
+
// Determine SVG dimensions based on orientation
|
|
61
|
+
// For Down, we swap width/height so the layout box is correct (8x4 instead of 4x8)
|
|
62
|
+
const svgWidth = isDown ? iconHeight : iconWidth;
|
|
63
|
+
const svgHeight = isDown ? iconWidth : iconHeight;
|
|
64
|
+
|
|
65
|
+
// SVG path generation
|
|
66
|
+
let chevronPath;
|
|
67
|
+
let transform;
|
|
68
|
+
if (isDown) {
|
|
69
|
+
// Arrow pointing down: M1 1 L[mid] [bottom] L[right] 1
|
|
70
|
+
// Width is iconHeight (8), Height is iconWidth (4)
|
|
71
|
+
// Tip at (4, 3), Left (1, 1), Right (7, 1)
|
|
72
|
+
chevronPath = `M1 1L${svgWidth / 2} ${svgHeight - 1}L${svgWidth - 1} 1`;
|
|
73
|
+
} else {
|
|
74
|
+
// Arrow pointing right (Forward)
|
|
75
|
+
// Width is iconWidth (4), Height is iconHeight (8)
|
|
76
|
+
chevronPath = `M1 1L${iconWidth - 1} ${iconHeight / 2}L1 ${iconHeight - 1}`;
|
|
53
77
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
78
|
+
// For Back, we just flip the Forward arrow
|
|
79
|
+
if (direction === 'Back') {
|
|
80
|
+
transform = [{
|
|
81
|
+
scaleX: -1
|
|
82
|
+
}];
|
|
83
|
+
}
|
|
84
|
+
}
|
|
58
85
|
return /*#__PURE__*/_jsx(View, {
|
|
59
86
|
style: containerStyle,
|
|
60
87
|
accessibilityRole: "image",
|
|
61
88
|
accessibilityLabel: defaultAccessibilityLabel,
|
|
62
89
|
...rest,
|
|
63
90
|
children: /*#__PURE__*/_jsx(Svg, {
|
|
64
|
-
width:
|
|
65
|
-
height:
|
|
66
|
-
viewBox: `0 0 ${
|
|
67
|
-
style:
|
|
68
|
-
transform
|
|
69
|
-
scaleX: -1
|
|
70
|
-
}]
|
|
91
|
+
width: svgWidth,
|
|
92
|
+
height: svgHeight,
|
|
93
|
+
viewBox: `0 0 ${svgWidth} ${svgHeight}`,
|
|
94
|
+
style: transform ? {
|
|
95
|
+
transform
|
|
71
96
|
} : undefined,
|
|
72
97
|
children: /*#__PURE__*/_jsx(Path, {
|
|
73
98
|
d: chevronPath,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","Svg","Path","getVariableByName","jsx","_jsx","NavArrow","direction","modes","style","accessibilityLabel","rest","iconColor","iconWidth","Number","iconHeight","strokeWeight","
|
|
1
|
+
{"version":3,"names":["React","View","Svg","Path","getVariableByName","jsx","_jsx","NavArrow","direction","modes","style","accessibilityLabel","rest","iconColor","iconWidth","Number","iconHeight","strokeWeight","baseContainerWidth","baseContainerHeight","borderRadius","backgroundColor","isDown","containerStyle","width","height","alignItems","justifyContent","defaultAccessibilityLabel","svgWidth","svgHeight","chevronPath","transform","scaleX","accessibilityRole","children","viewBox","undefined","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","fill"],"sourceRoot":"../../../../src","sources":["components/NavArrow/NavArrow.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Meta, Story, Canvas,
|
|
1
|
+
import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
|
|
2
2
|
import * as NavArrowStories from './NavArrow.stories';
|
|
3
3
|
import NavArrow from './NavArrow';
|
|
4
4
|
|
|
@@ -16,6 +16,10 @@ This component uses the following design token collections. Each collection supp
|
|
|
16
16
|
- **Modes:** Light | Dark
|
|
17
17
|
- **Default:** Light
|
|
18
18
|
|
|
19
|
+
### Colors Router
|
|
20
|
+
- **Modes:** POC | Old
|
|
21
|
+
- **Default:** POC
|
|
22
|
+
|
|
19
23
|
### Context2
|
|
20
24
|
- **Modes:** Default | AppBar
|
|
21
25
|
- **Default:** Default
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Meta, Story, Canvas,
|
|
1
|
+
import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
|
|
2
2
|
import * as PageTitleStories from './PageTitle.stories';
|
|
3
3
|
import PageTitle from './PageTitle';
|
|
4
4
|
import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
|
|
@@ -16,6 +16,10 @@ This component uses the following design token collections. Each collection supp
|
|
|
16
16
|
### Color Mode
|
|
17
17
|
- **Modes:** Light | Dark
|
|
18
18
|
- **Default:** Light
|
|
19
|
+
|
|
20
|
+
### Colors Router
|
|
21
|
+
- **Modes:** POC | Old
|
|
22
|
+
- **Default:** POC
|
|
19
23
|
## Usage
|
|
20
24
|
|
|
21
25
|
<Canvas>
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { View } from 'react-native';
|
|
5
|
+
import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
|
|
6
|
+
import { useTokens } from '../../design-tokens/JFSThemeProvider';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Helper function to recursively clone children and pass modes prop to components that accept it.
|
|
10
|
+
* This ensures that all child components in slots receive the modes prop from the parent.
|
|
11
|
+
*/
|
|
12
|
+
import { cloneChildrenWithModes } from '../../utils/react-utils';
|
|
13
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
|
+
/**
|
|
15
|
+
* Screen component that acts as the outer most container providing the background color.
|
|
16
|
+
* Matches Figma node 201:49.
|
|
17
|
+
*/
|
|
18
|
+
export const Screen = ({
|
|
19
|
+
children,
|
|
20
|
+
modes: propModes = {},
|
|
21
|
+
style
|
|
22
|
+
}) => {
|
|
23
|
+
const {
|
|
24
|
+
modes: globalModes
|
|
25
|
+
} = useTokens();
|
|
26
|
+
const modes = {
|
|
27
|
+
...globalModes,
|
|
28
|
+
...propModes
|
|
29
|
+
};
|
|
30
|
+
const backgroundColor = getVariableByName('screen/body/background', modes);
|
|
31
|
+
const containerStyle = {
|
|
32
|
+
flex: 1,
|
|
33
|
+
backgroundColor,
|
|
34
|
+
width: '100%',
|
|
35
|
+
height: '100%'
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
// Pass modes down to children
|
|
39
|
+
const processedChildren = children ? cloneChildrenWithModes(React.Children.toArray(children), modes) : null;
|
|
40
|
+
return /*#__PURE__*/_jsx(View, {
|
|
41
|
+
style: [containerStyle, style],
|
|
42
|
+
"data-node-id": "201:49",
|
|
43
|
+
children: processedChildren
|
|
44
|
+
});
|
|
45
|
+
};
|
|
46
|
+
export default Screen;
|
|
47
|
+
//# sourceMappingURL=Screen.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","View","getVariableByName","useTokens","cloneChildrenWithModes","jsx","_jsx","Screen","children","modes","propModes","style","globalModes","backgroundColor","containerStyle","flex","width","height","processedChildren","Children","toArray"],"sourceRoot":"../../../../src","sources":["components/Screen/Screen.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAqB,OAAO;AACxC,SAASC,IAAI,QAA8B,cAAc;AACzD,SAASC,iBAAiB,QAAQ,8CAA8C;AAChF,SAASC,SAAS,QAAQ,sCAAsC;;AAEhE;AACA;AACA;AACA;AACA,SAASC,sBAAsB,QAAQ,yBAAyB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAiBhE;AACA;AACA;AACA;AACA,OAAO,MAAMC,MAAM,GAAGA,CAAC;EACnBC,QAAQ;EACRC,KAAK,EAAEC,SAAS,GAAG,CAAC,CAAC;EACrBC;AACS,CAAC,KAAK;EACf,MAAM;IAAEF,KAAK,EAAEG;EAAY,CAAC,GAAGT,SAAS,CAAC,CAAC;EAC1C,MAAMM,KAAK,GAAG;IAAE,GAAGG,WAAW;IAAE,GAAGF;EAAU,CAAC;EAE9C,MAAMG,eAAe,GAAGX,iBAAiB,CAAC,wBAAwB,EAAEO,KAAK,CAAC;EAE1E,MAAMK,cAAyB,GAAG;IAC9BC,IAAI,EAAE,CAAC;IACPF,eAAe;IACfG,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE;EACZ,CAAC;;EAED;EACA,MAAMC,iBAAiB,GAAGV,QAAQ,GAC5BJ,sBAAsB,CAACJ,KAAK,CAACmB,QAAQ,CAACC,OAAO,CAACZ,QAAQ,CAAC,EAAEC,KAAK,CAAC,GAC/D,IAAI;EAEV,oBACIH,IAAA,CAACL,IAAI;IAACU,KAAK,EAAE,CAACG,cAAc,EAAEH,KAAK,CAAE;IAAC,gBAAa,QAAQ;IAAAH,QAAA,EACtDU;EAAiB,CAChB,CAAC;AAEf,CAAC;AAED,eAAeX,MAAM","ignoreList":[]}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
|
|
2
|
+
import * as ScreenStories from './Screen.stories';
|
|
3
|
+
import Screen from './Screen';
|
|
4
|
+
|
|
5
|
+
<Meta of={ScreenStories} />
|
|
6
|
+
|
|
7
|
+
# Screen
|
|
8
|
+
|
|
9
|
+
The `Screen` component acts as the outer most container for a page, providing the correct background color based on the current mode.
|
|
10
|
+
|
|
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
|
+
### Page type
|
|
17
|
+
- **Modes:** MainPage | SubPage
|
|
18
|
+
- **Default:** MainPage
|
|
19
|
+
|
|
20
|
+
### Color Mode
|
|
21
|
+
- **Modes:** Light | Dark
|
|
22
|
+
- **Default:** Light
|
|
23
|
+
|
|
24
|
+
### Colors Router
|
|
25
|
+
- **Modes:** POC | Old
|
|
26
|
+
- **Default:** POC
|
|
27
|
+
## Usage
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
import Screen from 'jfs-components/src/components/Screen/Screen';
|
|
31
|
+
|
|
32
|
+
function MyPage(props) {
|
|
33
|
+
return (
|
|
34
|
+
<Screen modes={props.modes}>
|
|
35
|
+
{/* Content goes here */}
|
|
36
|
+
</Screen>
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Props
|
|
42
|
+
|
|
43
|
+
<Controls />
|
|
44
|
+
|
|
45
|
+
## Examples
|
|
46
|
+
|
|
47
|
+
### Default
|
|
48
|
+
|
|
49
|
+
<Canvas of={ScreenStories.Default} />
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
## Design Tokens
|
|
53
|
+
|
|
54
|
+
This component uses the following design tokens, resolved through `getVariableByName`:
|
|
55
|
+
|
|
56
|
+
- **`screen/body/background`**
|
|
57
|
+
|
|
58
|
+
All tokens support mode-based theming through the `modes` prop.
|
|
@@ -5,6 +5,7 @@ import { View, Text, Pressable } from 'react-native';
|
|
|
5
5
|
import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
|
|
6
6
|
import Icon from '../../icons/Icon';
|
|
7
7
|
import { usePressableWebSupport } from '../../utils/web-platform-utils';
|
|
8
|
+
import { cloneChildrenWithModes } from '../../utils/react-utils';
|
|
8
9
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
9
10
|
/**
|
|
10
11
|
* Section component that mirrors the Figma "Section" component.
|
|
@@ -244,29 +245,6 @@ function SectionBento({
|
|
|
244
245
|
gap
|
|
245
246
|
};
|
|
246
247
|
|
|
247
|
-
// Helper function to clone children with modes (same as in Section component)
|
|
248
|
-
const cloneChildrenWithModes = (children, modes) => {
|
|
249
|
-
const result = React.Children.map(children, child => {
|
|
250
|
-
if (! /*#__PURE__*/React.isValidElement(child)) {
|
|
251
|
-
return child;
|
|
252
|
-
}
|
|
253
|
-
const childChildren = child.props?.children;
|
|
254
|
-
const hasChildren = childChildren !== undefined && childChildren !== null;
|
|
255
|
-
const existingModes = child.props?.modes;
|
|
256
|
-
// Merge order: parent modes first, then child's explicit modes override them
|
|
257
|
-
const mergedModes = existingModes ? {
|
|
258
|
-
...modes,
|
|
259
|
-
...existingModes
|
|
260
|
-
} : modes;
|
|
261
|
-
const processedChildren = hasChildren ? cloneChildrenWithModes(React.Children.toArray(childChildren), modes) : undefined;
|
|
262
|
-
return /*#__PURE__*/React.cloneElement(child, {
|
|
263
|
-
...child.props,
|
|
264
|
-
modes: mergedModes
|
|
265
|
-
}, processedChildren);
|
|
266
|
-
});
|
|
267
|
-
return result || [];
|
|
268
|
-
};
|
|
269
|
-
|
|
270
248
|
// Process slots to pass modes to children
|
|
271
249
|
const processedNavSlot = navSlot ? cloneChildrenWithModes(React.Children.toArray(navSlot), modes) : null;
|
|
272
250
|
const processedUpiSlot = upiSlot ? cloneChildrenWithModes(React.Children.toArray(upiSlot), modes) : null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","View","Text","Pressable","getVariableByName","Icon","usePressableWebSupport","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","Section","title","supportText","showSupportText","slot","modes","onPress","style","accessibilityLabel","accessibilityHint","webAccessibilityProps","rest","isHeaderFocused","setIsHeaderFocused","isHeaderHovered","setIsHeaderHovered","isHeaderPressed","setIsHeaderPressed","headerFocusStyle","borderColor","borderWidth","headerHoverStyle","opacity","headerPressedStyle","backgroundColor","gap","paddingHorizontal","paddingVertical","radius","headerGap","headerPaddingHorizontal","headerPaddingVertical","titleColor","titleFontSize","titleLineHeight","titleFontFamily","titleFontWeightRaw","titleFontWeight","toString","supportTextColor","supportTextFontSize","supportTextLineHeight","supportTextFontFamily","supportTextFontWeightRaw","supportTextFontWeight","containerStyle","borderRadius","headerStyle","headerWrapStyle","flexDirection","alignItems","justifyContent","titleStyle","flex","color","fontSize","lineHeight","fontFamily","fontWeight","supportTextStyle","defaultAccessibilityLabel","webProps","restProps","disabled","headerContent","children","numberOfLines","accessibilityElementsHidden","importantForAccessibility","name","size","accessibilityRole","onPressIn","e","onPressOut","onFocus","onBlur","onHoverIn","onHoverOut","pressed","SectionBento","navSlot","upiSlot","
|
|
1
|
+
{"version":3,"names":["React","useState","View","Text","Pressable","getVariableByName","Icon","usePressableWebSupport","cloneChildrenWithModes","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","Section","title","supportText","showSupportText","slot","modes","onPress","style","accessibilityLabel","accessibilityHint","webAccessibilityProps","rest","isHeaderFocused","setIsHeaderFocused","isHeaderHovered","setIsHeaderHovered","isHeaderPressed","setIsHeaderPressed","headerFocusStyle","borderColor","borderWidth","headerHoverStyle","opacity","headerPressedStyle","backgroundColor","gap","paddingHorizontal","paddingVertical","radius","headerGap","headerPaddingHorizontal","headerPaddingVertical","titleColor","titleFontSize","titleLineHeight","titleFontFamily","titleFontWeightRaw","titleFontWeight","toString","supportTextColor","supportTextFontSize","supportTextLineHeight","supportTextFontFamily","supportTextFontWeightRaw","supportTextFontWeight","containerStyle","borderRadius","headerStyle","headerWrapStyle","flexDirection","alignItems","justifyContent","titleStyle","flex","color","fontSize","lineHeight","fontFamily","fontWeight","supportTextStyle","defaultAccessibilityLabel","webProps","restProps","disabled","headerContent","children","numberOfLines","accessibilityElementsHidden","importantForAccessibility","name","size","accessibilityRole","onPressIn","e","onPressOut","onFocus","onBlur","onHoverIn","onHoverOut","pressed","SectionBento","navSlot","upiSlot","processedNavSlot","Children","toArray","processedUpiSlot","Bento"],"sourceRoot":"../../../../src","sources":["components/Section/Section.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Meta, Story, Canvas,
|
|
1
|
+
import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
|
|
2
2
|
import * as SectionStories from './Section.stories';
|
|
3
3
|
import Section from './Section';
|
|
4
4
|
import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
|
|
@@ -17,6 +17,10 @@ This component uses the following design token collections. Each collection supp
|
|
|
17
17
|
- **Modes:** Light | Dark
|
|
18
18
|
- **Default:** Light
|
|
19
19
|
|
|
20
|
+
### Colors Router
|
|
21
|
+
- **Modes:** POC | Old
|
|
22
|
+
- **Default:** POC
|
|
23
|
+
|
|
20
24
|
### Padding
|
|
21
25
|
- **Modes:** Default | None
|
|
22
26
|
- **Default:** Default
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Meta, Story, Canvas,
|
|
1
|
+
import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
|
|
2
2
|
import * as StepStories from './Step.stories';
|
|
3
3
|
import { Step } from './Step';
|
|
4
4
|
|
|
@@ -19,6 +19,10 @@ This component uses the following design token collections. Each collection supp
|
|
|
19
19
|
### Color Mode
|
|
20
20
|
- **Modes:** Light | Dark
|
|
21
21
|
- **Default:** Light
|
|
22
|
+
|
|
23
|
+
### Colors Router
|
|
24
|
+
- **Modes:** POC | Old
|
|
25
|
+
- **Default:** POC
|
|
22
26
|
## Usage
|
|
23
27
|
|
|
24
28
|
<Canvas>
|