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
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
|
|
2
|
+
import * as HStackStories from './HStack.stories';
|
|
3
|
+
import HStack from './HStack';
|
|
4
|
+
|
|
5
|
+
<Meta of={HStackStories} />
|
|
6
|
+
|
|
7
|
+
# HStack
|
|
8
|
+
|
|
9
|
+
`HStack` arranges its children in a horizontal line. It uses design tokens for spacing and gap.
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
## Available Collections and Modes
|
|
13
|
+
|
|
14
|
+
This component does not use any design token collections with multiple modes.
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { HStack } from 'jfs-components';
|
|
19
|
+
|
|
20
|
+
<HStack justifyHorizontal="space-between" modes={{ 'hstack/gap': 16 }}>
|
|
21
|
+
<View>Left</View>
|
|
22
|
+
<View>Right</View>
|
|
23
|
+
</HStack>
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
<Canvas>
|
|
27
|
+
<Story of={HStackStories.Default} />
|
|
28
|
+
</Canvas>
|
|
29
|
+
|
|
30
|
+
## Props
|
|
31
|
+
|
|
32
|
+
<Controls of={HStackStories.Default} />
|
|
33
|
+
|
|
34
|
+
## Design Tokens
|
|
35
|
+
|
|
36
|
+
This component uses the following design tokens, resolved through `getVariableByName`:
|
|
37
|
+
|
|
38
|
+
- **`hstack/gap`**
|
|
39
|
+
- **`hstack/padding/bottom`**
|
|
40
|
+
- **`hstack/padding/left`**
|
|
41
|
+
- **`hstack/padding/right`**
|
|
42
|
+
- **`hstack/padding/top`**
|
|
43
|
+
|
|
44
|
+
All tokens support mode-based theming through the `modes` prop.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Meta, Story, Canvas,
|
|
1
|
+
import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
|
|
2
2
|
import * as IconButtonStories from './IconButton.stories';
|
|
3
3
|
import IconButton from './IconButton';
|
|
4
4
|
import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
|
|
@@ -28,6 +28,10 @@ This component uses the following design token collections. Each collection supp
|
|
|
28
28
|
### Color Mode
|
|
29
29
|
- **Modes:** Light | Dark
|
|
30
30
|
- **Default:** Light
|
|
31
|
+
|
|
32
|
+
### Colors Router
|
|
33
|
+
- **Modes:** POC | Old
|
|
34
|
+
- **Default:** POC
|
|
31
35
|
## Usage
|
|
32
36
|
|
|
33
37
|
<Canvas>
|
|
@@ -57,9 +57,9 @@ function IconCapsule({
|
|
|
57
57
|
const size = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/size', modes) || 42;
|
|
58
58
|
const radius = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/radius', modes) || 9999;
|
|
59
59
|
const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/background', modes) || '#cfa159';
|
|
60
|
-
const borderColor = (0, _figmaVariablesResolver.getVariableByName)('
|
|
61
|
-
const borderSize = (0, _figmaVariablesResolver.getVariableByName)('
|
|
62
|
-
const iconColor = (0, _figmaVariablesResolver.getVariableByName)('
|
|
60
|
+
const borderColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/border/color', modes) || 'rgba(255,255,255,0)';
|
|
61
|
+
const borderSize = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/border/size', modes) || 1;
|
|
62
|
+
const iconColor = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/icon/color', modes) || '#0f0d0a';
|
|
63
63
|
const iconSize = (0, _figmaVariablesResolver.getVariableByName)('iconCapsule/icon/size', modes) || 18;
|
|
64
64
|
|
|
65
65
|
// Convert radius to React Native format (if 9999, use size/2 for perfect circle)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_JFSThemeProvider","_Icon","_jsxRuntime","e","__esModule","default","IconCapsule","iconName","modes","propModes","accessibilityLabel","accessibilityRole","rest","globalModes","useTokens","size","getVariableByName","radius","backgroundColor","borderColor","borderSize","iconColor","iconSize","borderRadius","containerStyle","width","height","borderWidth","overflow","alignItems","justifyContent","defaultAccessibilityLabel","replace","l","toUpperCase","jsx","View","style","children","name","color","accessibilityElementsHidden","importantForAccessibility","_default","exports"],"sourceRoot":"../../../../src","sources":["components/IconCapsule/IconCapsule.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAL,sBAAA,CAAAC,OAAA;AAAmC,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAD,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AASnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,WAAWA,CAAC;EACnBC,QAAQ,GAAG,SAAS;EACpBC,KAAK,EAAEC,SAAS,GAAG,CAAC,CAAC;EACrBC,kBAAkB;EAClBC,iBAAiB,GAAG,OAAO;EAC3B,GAAGC;AACa,CAAC,EAAE;EACnB,MAAM;IAAEJ,KAAK,EAAEK;EAAY,CAAC,GAAG,IAAAC,2BAAS,EAAC,CAAC;EAC1C,MAAMN,KAAK,GAAG;IAAE,GAAGK,WAAW;IAAE,GAAGJ;EAAU,CAAC;EAC9C;EACA,MAAMM,IAAI,GAAG,IAAAC,yCAAiB,EAAC,kBAAkB,EAAER,KAAK,CAAC,IAAI,EAAE;EAC/D,MAAMS,MAAM,GAAG,IAAAD,yCAAiB,EAAC,oBAAoB,EAAER,KAAK,CAAC,IAAI,IAAI;EACrE,MAAMU,eAAe,GAAG,IAAAF,yCAAiB,EAAC,wBAAwB,EAAER,KAAK,CAAC,IAAI,SAAS;EACvF,MAAMW,WAAW,GAAG,IAAAH,yCAAiB,EAAC,
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_JFSThemeProvider","_Icon","_jsxRuntime","e","__esModule","default","IconCapsule","iconName","modes","propModes","accessibilityLabel","accessibilityRole","rest","globalModes","useTokens","size","getVariableByName","radius","backgroundColor","borderColor","borderSize","iconColor","iconSize","borderRadius","containerStyle","width","height","borderWidth","overflow","alignItems","justifyContent","defaultAccessibilityLabel","replace","l","toUpperCase","jsx","View","style","children","name","color","accessibilityElementsHidden","importantForAccessibility","_default","exports"],"sourceRoot":"../../../../src","sources":["components/IconCapsule/IconCapsule.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 IconCapsuleStories from './IconCapsule.stories';
|
|
3
3
|
import IconCapsule from './IconCapsule';
|
|
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:** M | L | S
|
|
18
18
|
- **Default:** M
|
|
19
19
|
|
|
20
|
+
### Emphasis
|
|
21
|
+
- **Modes:** High | Medium | Low
|
|
22
|
+
- **Default:** High
|
|
23
|
+
|
|
20
24
|
### Appearance.Brand
|
|
21
25
|
- **Modes:** Primary | Secondary | Neutral
|
|
22
26
|
- **Default:** Primary
|
|
@@ -24,6 +28,10 @@ This component uses the following design token collections. Each collection supp
|
|
|
24
28
|
### Color Mode
|
|
25
29
|
- **Modes:** Light | Dark
|
|
26
30
|
- **Default:** Light
|
|
31
|
+
|
|
32
|
+
### Colors Router
|
|
33
|
+
- **Modes:** POC | Old
|
|
34
|
+
- **Default:** POC
|
|
27
35
|
## Usage
|
|
28
36
|
|
|
29
37
|
<Canvas>
|
|
@@ -62,11 +70,11 @@ This component uses the following design token collections. Each collection supp
|
|
|
62
70
|
This component uses the following design tokens, resolved through `getVariableByName`:
|
|
63
71
|
|
|
64
72
|
- **`iconCapsule/background`**
|
|
73
|
+
- **`iconCapsule/border/color`**
|
|
74
|
+
- **`iconCapsule/border/size`**
|
|
75
|
+
- **`iconCapsule/icon/color`**
|
|
65
76
|
- **`iconCapsule/icon/size`**
|
|
66
77
|
- **`iconCapsule/radius`**
|
|
67
78
|
- **`iconCapsule/size`**
|
|
68
|
-
- **`iconCapsuleborder/color`**
|
|
69
|
-
- **`iconCapsuleborder/size`**
|
|
70
|
-
- **`iconCapsuleicon/color`**
|
|
71
79
|
|
|
72
80
|
All tokens support mode-based theming through the `modes` prop.
|
|
@@ -1,102 +1,7 @@
|
|
|
1
|
-
import { Meta } from '@storybook/
|
|
1
|
+
import { Meta } from '@storybook/blocks';
|
|
2
2
|
|
|
3
3
|
<Meta title="Introduction" />
|
|
4
4
|
|
|
5
|
-
#
|
|
6
|
-
|
|
7
|
-
Welcome to the component library documentation for this React Native project. This Storybook instance provides comprehensive documentation and interactive examples of all components in the application.
|
|
8
|
-
|
|
9
|
-
## What is Storybook?
|
|
10
|
-
|
|
11
|
-
Storybook is a tool for building UI components in isolation. It makes development, testing, and documentation easier by providing a sandbox environment where you can:
|
|
12
|
-
|
|
13
|
-
- **Develop components in isolation** - Build components without worrying about app-specific dependencies
|
|
14
|
-
- **Test edge cases** - Easily test components with different props and states
|
|
15
|
-
- **Document components** - Create living documentation that stays in sync with your code
|
|
16
|
-
- **Share with your team** - Provide a visual reference for designers and developers
|
|
17
|
-
|
|
18
|
-
## Documentation Contract
|
|
19
|
-
|
|
20
|
-
Every component page now follows a consistent template:
|
|
21
|
-
|
|
22
|
-
- **Accessibility** — how to label, hint, and expose roles/states so assistive tech users get the right cues.
|
|
23
|
-
- **Anatomy** — key slots/parts you can compose or override (leading/trailing, slots, tokens).
|
|
24
|
-
- **Usage Constraints** — safe overrides, layout expectations, and behaviors to avoid.
|
|
25
|
-
|
|
26
|
-
Use these sections as a checklist when creating or reviewing stories so guidance stays close to the API.
|
|
27
|
-
|
|
28
|
-
## Performance Panel
|
|
29
|
-
|
|
30
|
-
A lightweight performance panel is enabled for all stories. Open the **Performance** addon in the Storybook toolbar to inspect mount/remount timings and interaction costs. Use it to:
|
|
31
|
-
|
|
32
|
-
- Compare render timing between variants without creating extra stories.
|
|
33
|
-
- Spot regressions when props or modes change.
|
|
34
|
-
- Validate that heavy children (lists, drawers, sheets) still mount within budget.
|
|
35
|
-
|
|
36
|
-
## Getting Started
|
|
37
|
-
|
|
38
|
-
### Running Storybook
|
|
39
|
-
|
|
40
|
-
#### For Web (Development)
|
|
41
|
-
```bash
|
|
42
|
-
yarn storybook-web
|
|
43
|
-
```
|
|
44
|
-
This will start Storybook on `http://localhost:6006`
|
|
45
|
-
|
|
46
|
-
#### For React Native (iOS/Android)
|
|
47
|
-
```bash
|
|
48
|
-
# iOS
|
|
49
|
-
yarn ios
|
|
50
|
-
|
|
51
|
-
# Android
|
|
52
|
-
yarn android
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
### Building Storybook for Production
|
|
56
|
-
```bash
|
|
57
|
-
yarn build:storybook-web
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
## Component Organization
|
|
61
|
-
|
|
62
|
-
Components are organized in the `src/components` directory. Each component typically includes:
|
|
63
|
-
|
|
64
|
-
- **Component file** - The main component implementation
|
|
65
|
-
- **Story file** - Interactive examples and test cases
|
|
66
|
-
- **Documentation** - Comprehensive documentation with usage examples
|
|
67
|
-
|
|
68
|
-
## Available Components
|
|
69
|
-
|
|
70
|
-
### Avatar
|
|
71
|
-
- **Avatar** - A flexible avatar component that displays user profile pictures or monogram initials. Supports multiple size modes and is fully integrated with Figma design tokens.
|
|
72
|
-
|
|
73
|
-
### IconCapsule
|
|
74
|
-
- **IconCapsule** - A flexible icon capsule component that displays an icon within a styled circular or rounded container. Supports different icons and appearance modes, fully integrated with Figma design tokens.
|
|
75
|
-
|
|
76
|
-
## Documentation Features
|
|
77
|
-
|
|
78
|
-
This Storybook instance includes:
|
|
79
|
-
|
|
80
|
-
- ✅ **Automatic documentation** - Generated from JSDoc comments and component metadata
|
|
81
|
-
- ✅ **Interactive examples** - Live, editable component examples
|
|
82
|
-
- ✅ **Props documentation** - Automatic props table generation
|
|
83
|
-
- ✅ **MDX support** - Rich documentation with Markdown and JSX
|
|
84
|
-
|
|
85
|
-
## Best Practices
|
|
86
|
-
|
|
87
|
-
When creating new components:
|
|
88
|
-
|
|
89
|
-
1. **Add JSDoc comments** - Document your components with JSDoc for automatic documentation
|
|
90
|
-
2. **Create stories** - Add multiple stories showing different states and use cases
|
|
91
|
-
3. **Use TypeScript/PropTypes** - Define prop types for better documentation
|
|
92
|
-
4. **Write MDX docs** - Create comprehensive documentation pages when needed
|
|
93
|
-
|
|
94
|
-
## Resources
|
|
95
|
-
|
|
96
|
-
- [Storybook Documentation](https://storybook.js.org/)
|
|
97
|
-
- [React Native Storybook](https://github.com/storybookjs/react-native)
|
|
98
|
-
|
|
99
|
-
---
|
|
100
|
-
|
|
101
|
-
Happy coding! 🚀
|
|
5
|
+
# Introduction
|
|
102
6
|
|
|
7
|
+
Welcome to the JFS Components Library.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Meta, Story, Canvas,
|
|
1
|
+
import { Meta, Story, Canvas, Controls } from '@storybook/blocks';
|
|
2
2
|
import * as LazyListStories from './LazyList.stories';
|
|
3
3
|
import LazyList from './LazyList';
|
|
4
4
|
import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
|
|
@@ -7,41 +7,14 @@ exports.default = void 0;
|
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
9
|
var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
|
|
10
|
+
var _reactUtils = require("../../utils/react-utils");
|
|
10
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
13
|
/**
|
|
13
14
|
* Helper function to recursively clone children and pass modes prop to components that accept it.
|
|
14
15
|
* This ensures that all child components in slots receive the modes prop from the parent.
|
|
15
|
-
*/
|
|
16
|
-
const result = _react.default.Children.map(children, child => {
|
|
17
|
-
if (! /*#__PURE__*/_react.default.isValidElement(child)) {
|
|
18
|
-
return child;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
// Get existing children
|
|
22
|
-
const childChildren = child.props?.children;
|
|
23
|
-
const hasChildren = childChildren !== undefined && childChildren !== null;
|
|
24
|
-
|
|
25
|
-
// Clone the child with modes prop if it doesn't already have one
|
|
26
|
-
// or merge with existing modes if it does
|
|
27
|
-
// Merge order: parent modes first, then child's explicit modes override them
|
|
28
|
-
const existingModes = child.props?.modes;
|
|
29
|
-
const mergedModes = existingModes ? {
|
|
30
|
-
...modes,
|
|
31
|
-
...existingModes
|
|
32
|
-
} : modes;
|
|
33
|
-
|
|
34
|
-
// Recursively process children if they exist
|
|
35
|
-
const processedChildren = hasChildren ? cloneChildrenWithModes(_react.default.Children.toArray(childChildren), modes) : undefined;
|
|
16
|
+
*/
|
|
36
17
|
|
|
37
|
-
// Clone element with modes and processed children
|
|
38
|
-
return /*#__PURE__*/_react.default.cloneElement(child, {
|
|
39
|
-
...child.props,
|
|
40
|
-
modes: mergedModes
|
|
41
|
-
}, processedChildren);
|
|
42
|
-
});
|
|
43
|
-
return result || [];
|
|
44
|
-
}
|
|
45
18
|
/**
|
|
46
19
|
* ListGroup component that mirrors the Figma "List Group" component.
|
|
47
20
|
*
|
|
@@ -103,7 +76,7 @@ function ListGroup({
|
|
|
103
76
|
};
|
|
104
77
|
|
|
105
78
|
// Clone listGroupSlot children and pass modes to all children that accept it
|
|
106
|
-
const processedSlot = listGroupSlot ? cloneChildrenWithModes(_react.default.Children.toArray(listGroupSlot), modes) : null;
|
|
79
|
+
const processedSlot = listGroupSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(listGroupSlot), modes) : null;
|
|
107
80
|
|
|
108
81
|
// Use provided accessibilityLabel or fall back to label
|
|
109
82
|
const defaultAccessibilityLabel = accessibilityLabel || label || "List group";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_jsxRuntime","e","__esModule","default","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_figmaVariablesResolver","_reactUtils","_jsxRuntime","e","__esModule","default","ListGroup","label","listGroupSlot","modes","style","accessibilityLabel","accessibilityHint","rest","backgroundColor","getVariableByName","borderColor","borderWidth","gap","labelColor","labelFontSize","labelLineHeight","labelFontFamily","labelFontWeightRaw","labelFontWeight","toString","containerStyle","borderStyle","flexDirection","alignItems","width","labelStyle","color","fontSize","lineHeight","fontFamily","fontWeight","processedSlot","cloneChildrenWithModes","React","Children","toArray","defaultAccessibilityLabel","jsxs","View","accessibilityRole","children","jsx","Text","marginBottom","numberOfLines","accessibilityElementsHidden","importantForAccessibility","map","child","index","isValidElement","items","isLast","length","wrapperStyle","key","_default","exports"],"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
|
|
@@ -10,6 +10,7 @@ var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resol
|
|
|
10
10
|
var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
|
|
11
11
|
var _NavArrow = _interopRequireDefault(require("../NavArrow/NavArrow"));
|
|
12
12
|
var _webPlatformUtils = require("../../utils/web-platform-utils");
|
|
13
|
+
var _reactUtils = require("../../utils/react-utils");
|
|
13
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
14
15
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
16
|
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); }
|
|
@@ -19,41 +20,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
19
20
|
*
|
|
20
21
|
* @param forcedModes - Optional modes that will ALWAYS be applied last, overriding any other modes.
|
|
21
22
|
* Useful for slots that need to enforce specific context values.
|
|
22
|
-
*/
|
|
23
|
-
const result = _react.default.Children.map(children, child => {
|
|
24
|
-
if (! /*#__PURE__*/_react.default.isValidElement(child)) {
|
|
25
|
-
return child;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
// Get existing children
|
|
29
|
-
const childChildren = child.props?.children;
|
|
30
|
-
const hasChildren = childChildren !== undefined && childChildren !== null;
|
|
31
|
-
|
|
32
|
-
// Clone the child with modes prop if it doesn't already have one
|
|
33
|
-
// or merge with existing modes if it does
|
|
34
|
-
// Merge order: parent modes first, then child's explicit modes override them,
|
|
35
|
-
// then forcedModes (if provided) are applied last and can never be overridden
|
|
36
|
-
const existingModes = child.props?.modes;
|
|
37
|
-
const mergedModes = forcedModes ? {
|
|
38
|
-
...modes,
|
|
39
|
-
...(existingModes || {}),
|
|
40
|
-
...forcedModes
|
|
41
|
-
} : existingModes ? {
|
|
42
|
-
...modes,
|
|
43
|
-
...existingModes
|
|
44
|
-
} : modes;
|
|
45
|
-
|
|
46
|
-
// Recursively process children if they exist
|
|
47
|
-
const processedChildren = hasChildren ? cloneChildrenWithModes(_react.default.Children.toArray(childChildren), modes, forcedModes) : undefined;
|
|
23
|
+
*/
|
|
48
24
|
|
|
49
|
-
// Clone element with modes and processed children
|
|
50
|
-
return /*#__PURE__*/_react.default.cloneElement(child, {
|
|
51
|
-
...child.props,
|
|
52
|
-
modes: mergedModes
|
|
53
|
-
}, processedChildren);
|
|
54
|
-
});
|
|
55
|
-
return result || [];
|
|
56
|
-
}
|
|
57
25
|
/**
|
|
58
26
|
* ListItem component that mirrors the Figma "List Item" component.
|
|
59
27
|
*
|
|
@@ -190,7 +158,7 @@ function ListItem({
|
|
|
190
158
|
});
|
|
191
159
|
|
|
192
160
|
// Process leading slot to pass modes to children
|
|
193
|
-
const processedLeading = leading ? cloneChildrenWithModes(_react.default.Children.toArray(leading), modes) : [];
|
|
161
|
+
const processedLeading = leading ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(leading), modes) : [];
|
|
194
162
|
// Extract single element if array has one element, otherwise use array
|
|
195
163
|
const leadingElement = processedLeading.length > 0 ? processedLeading.length === 1 ? processedLeading[0] : processedLeading : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
|
|
196
164
|
modes: modes,
|
|
@@ -199,7 +167,7 @@ function ListItem({
|
|
|
199
167
|
const renderSupportContent = () => {
|
|
200
168
|
if (supportSlot) {
|
|
201
169
|
// Process supportSlot to pass modes to children
|
|
202
|
-
const processedSupportSlot = cloneChildrenWithModes(_react.default.Children.toArray(supportSlot), modes);
|
|
170
|
+
const processedSupportSlot = (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(supportSlot), modes);
|
|
203
171
|
// Extract single element if array has one element, otherwise use array
|
|
204
172
|
return processedSupportSlot.length === 1 ? processedSupportSlot[0] : processedSupportSlot;
|
|
205
173
|
}
|
|
@@ -216,7 +184,7 @@ function ListItem({
|
|
|
216
184
|
if (layout === 'Horizontal') {
|
|
217
185
|
// Process endSlot to pass modes to children
|
|
218
186
|
// Force Context: 'ListItem' - this value can never be overridden by external modes
|
|
219
|
-
const processedEndSlot = endSlot ? cloneChildrenWithModes(_react.default.Children.toArray(endSlot), modes, {
|
|
187
|
+
const processedEndSlot = endSlot ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(endSlot), modes, {
|
|
220
188
|
"Context": 'ListItem'
|
|
221
189
|
}) : [];
|
|
222
190
|
// Extract single element if array has one element, otherwise use array
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_figmaVariablesResolver","_IconCapsule","_interopRequireDefault","_NavArrow","_webPlatformUtils","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","cloneChildrenWithModes","children","modes","forcedModes","result","React","Children","map","child","isValidElement","childChildren","props","hasChildren","undefined","existingModes","mergedModes","processedChildren","toArray","cloneElement","ListItem","layout","title","supportText","showSupportText","leading","supportSlot","endSlot","navArrow","onPress","style","contentStyle","accessibilityLabel","accessibilityHint","accessibilityState","webAccessibilityProps","rest","gap","getVariableByName","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","useMemo","marginLeft","defaultAccessibilityLabel","webPropsHorizontal","usePressableWebSupport","restProps","disabled","webPropsVertical","processedLeading","leadingElement","length","jsx","renderSupportContent","processedSupportSlot","Text","numberOfLines","processedEndSlot","trailingContent","innerContent","jsxs","View","minWidth","direction","Pressable","accessibilityRole","pressed","opacity","verticalContent","_default","exports"],"sourceRoot":"../../../../src","sources":["components/ListItem/ListItem.tsx"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_figmaVariablesResolver","_IconCapsule","_interopRequireDefault","_NavArrow","_webPlatformUtils","_reactUtils","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ListItem","layout","title","supportText","showSupportText","leading","supportSlot","endSlot","navArrow","modes","onPress","style","contentStyle","accessibilityLabel","accessibilityHint","accessibilityState","webAccessibilityProps","rest","gap","getVariableByName","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","useMemo","marginLeft","defaultAccessibilityLabel","webPropsHorizontal","usePressableWebSupport","restProps","disabled","webPropsVertical","processedLeading","cloneChildrenWithModes","React","Children","toArray","leadingElement","length","jsx","renderSupportContent","processedSupportSlot","Text","numberOfLines","children","processedEndSlot","trailingContent","innerContent","jsxs","View","minWidth","direction","Pressable","accessibilityRole","pressed","opacity","undefined","verticalContent","_default","exports"],"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
|
|
|
@@ -26,7 +26,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
26
26
|
*
|
|
27
27
|
* @component
|
|
28
28
|
* @param {Object} props
|
|
29
|
-
* @param {'Back'|'Forward'} [props.direction='Back'] - Arrow direction
|
|
29
|
+
* @param {'Back'|'Forward'|'Down'} [props.direction='Back'] - Arrow direction
|
|
30
30
|
* @param {Object} [props.modes={}] - Modes for design token resolution
|
|
31
31
|
* @param {Object} [props.style] - Additional container styles
|
|
32
32
|
*/
|
|
@@ -42,38 +42,63 @@ function NavArrow({
|
|
|
42
42
|
const iconWidth = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/width', modes)) || 4;
|
|
43
43
|
const iconHeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/height', modes)) || 8;
|
|
44
44
|
const strokeWeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/icon/strokeWeight', modes)) || 2;
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
|
|
46
|
+
// Base dimensions from tokens (these are for Vertical orientation like Back/Forward)
|
|
47
|
+
const baseContainerWidth = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/width', modes)) || 6;
|
|
48
|
+
const baseContainerHeight = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/height', modes)) || 10;
|
|
47
49
|
const borderRadius = Number((0, _figmaVariablesResolver.getVariableByName)('navArrow/radius', modes)) || 0;
|
|
48
50
|
const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('navArrow/background', modes) || 'transparent';
|
|
51
|
+
|
|
52
|
+
// For Down direction, we swap width and height considerations
|
|
53
|
+
const isDown = direction === 'Down';
|
|
49
54
|
const containerStyle = {
|
|
50
|
-
width
|
|
51
|
-
|
|
55
|
+
// If Down, we use the height token for width and width token for height
|
|
56
|
+
width: isDown ? baseContainerHeight : baseContainerWidth,
|
|
57
|
+
height: isDown ? baseContainerWidth : baseContainerHeight,
|
|
52
58
|
borderRadius,
|
|
53
59
|
backgroundColor,
|
|
54
60
|
alignItems: 'center',
|
|
55
61
|
justifyContent: 'center',
|
|
56
62
|
...(style || {})
|
|
57
63
|
};
|
|
58
|
-
const defaultAccessibilityLabel = accessibilityLabel || (direction === 'Back' ? 'Go back' : 'Go forward');
|
|
64
|
+
const defaultAccessibilityLabel = accessibilityLabel || (direction === 'Back' ? 'Go back' : direction === 'Forward' ? 'Go forward' : 'Go down');
|
|
65
|
+
|
|
66
|
+
// Determine SVG dimensions based on orientation
|
|
67
|
+
// For Down, we swap width/height so the layout box is correct (8x4 instead of 4x8)
|
|
68
|
+
const svgWidth = isDown ? iconHeight : iconWidth;
|
|
69
|
+
const svgHeight = isDown ? iconWidth : iconHeight;
|
|
70
|
+
|
|
71
|
+
// SVG path generation
|
|
72
|
+
let chevronPath;
|
|
73
|
+
let transform;
|
|
74
|
+
if (isDown) {
|
|
75
|
+
// Arrow pointing down: M1 1 L[mid] [bottom] L[right] 1
|
|
76
|
+
// Width is iconHeight (8), Height is iconWidth (4)
|
|
77
|
+
// Tip at (4, 3), Left (1, 1), Right (7, 1)
|
|
78
|
+
chevronPath = `M1 1L${svgWidth / 2} ${svgHeight - 1}L${svgWidth - 1} 1`;
|
|
79
|
+
} else {
|
|
80
|
+
// Arrow pointing right (Forward)
|
|
81
|
+
// Width is iconWidth (4), Height is iconHeight (8)
|
|
82
|
+
chevronPath = `M1 1L${iconWidth - 1} ${iconHeight / 2}L1 ${iconHeight - 1}`;
|
|
59
83
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
84
|
+
// For Back, we just flip the Forward arrow
|
|
85
|
+
if (direction === 'Back') {
|
|
86
|
+
transform = [{
|
|
87
|
+
scaleX: -1
|
|
88
|
+
}];
|
|
89
|
+
}
|
|
90
|
+
}
|
|
64
91
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
65
92
|
style: containerStyle,
|
|
66
93
|
accessibilityRole: "image",
|
|
67
94
|
accessibilityLabel: defaultAccessibilityLabel,
|
|
68
95
|
...rest,
|
|
69
96
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
|
|
70
|
-
width:
|
|
71
|
-
height:
|
|
72
|
-
viewBox: `0 0 ${
|
|
73
|
-
style:
|
|
74
|
-
transform
|
|
75
|
-
scaleX: -1
|
|
76
|
-
}]
|
|
97
|
+
width: svgWidth,
|
|
98
|
+
height: svgHeight,
|
|
99
|
+
viewBox: `0 0 ${svgWidth} ${svgHeight}`,
|
|
100
|
+
style: transform ? {
|
|
101
|
+
transform
|
|
77
102
|
} : undefined,
|
|
78
103
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
|
|
79
104
|
d: chevronPath,
|