@ledgerhq/lumen-ui-rnative 0.1.48 → 0.1.49

package/src/lib/Components/SegmentedControl/SegmentedControl.mdx

@@ -2,7 +2,6 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as SegmentedControlStories from './SegmentedControl.stories';
 import { SegmentedControl } from './SegmentedControl';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility';
 
 <Meta title='Core/SegmentedControl' of={SegmentedControlStories} />

package/src/lib/Components/Skeleton/Skeleton.figma.tsx

@@ -0,0 +1,17 @@
+import figma from '@figma/code-connect';
+import { Skeleton } from './Skeleton';
+
+figma.connect(
+  Skeleton,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=8004-10676',
+  {
+    imports: ["import { Skeleton } from '@ledgerhq/lumen-ui-rnative'"],
+    props: {
+      component: figma.enum('appearance', {
+        'list-item': 'list-item',
+        tile: 'tile',
+      }),
+    },
+    example: (props) => <Skeleton component={props.component} />,
+  },
+);

package/src/lib/Components/Skeleton/Skeleton.mdx

@@ -4,11 +4,7 @@ import { Skeleton } from './Skeleton';
 import {
   CustomTabs,
   Tab,
-  DoVsDontRow,
-  DoBlockItem,
-  DontBlockItem,
 } from '../../../../.storybook/components';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/Skeleton' of={SkeletonStories} />
 
@@ -128,73 +124,6 @@ import { Box, Skeleton } from '@ledgerhq/lumen-ui-rnative';
 </Box>
 ```
 
-## Do's and Don'ts
-
-<div className='flex flex-col gap-24'>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use component prop for common patterns'
-      description='Use pre-built variants for consistent loading states'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Skeleton component='list-item' />
-<Skeleton component='tile' />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't manually recreate common patterns"
-      description='Avoid recreating patterns that already exist as component variants'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Box, Skeleton } from '@ledgerhq/lumen-ui-rnative';
-
-<Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's16' }}>
-  <Skeleton lx={{ width: 's48', height: 's48', borderRadius: 'full' }} />
-  <Box lx={{ flex: 1, flexDirection: 'column', gap: 's8' }}>
-    <Skeleton lx={{ height: 's12', width: 's176' }} />
-    <Skeleton lx={{ height: 's12', width: 's112' }} />
-  </Box>
-</Box>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use lx prop for sizing'
-      description='Use design system size tokens for consistent sizing'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Skeleton lx={{ height: 's16', width: 's256' }} />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use arbitrary style values"
-      description='Avoid using the style prop or arbitrary values'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Skeleton style={{ height: 16, width: 200 }} />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-</div>
-
-<CommonRulesDoAndDont />
 
 </Tab>
 </CustomTabs>

package/src/lib/Components/Spinner/Spinner.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect';
+import { Spinner } from './Spinner';
+
+figma.connect(
+  Spinner,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=9023-3681',
+  {
+    imports: ["import { Spinner } from '@ledgerhq/lumen-ui-rnative'"],
+    // @ts-expect-error — placeholder value, replace with a valid IconSize
+    example: () => <Spinner size='<insert-size>' />,
+  },
+);

package/src/lib/Components/Spinner/Spinner.mdx

@@ -1,8 +1,6 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 import * as SpinnerStories from './Spinner.stories';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility/Box';
 import { Text } from '../Utility/Text';
 
@@ -116,104 +114,6 @@ function MyComponent() {
 }
 ```
 
-## Do's and Don'ts
-
-<Box lx={{ gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Match spinner size to context'
-      description='Use appropriate spinner sizes based on the context and prominence'
-    >
-
-{/* prettier-ignore */}
-```tsx
-// Small inline loading
-<Spinner size={12} />
-
-// Prominent loading state
-<Spinner size={40} />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't override spinner size"
-      description='Avoid using style or additional props to override spinner dimensions'
-    >
-
-{/* prettier-ignore */}
-```tsx
-// Small inline loading
-<Spinner size={12} style={{ width: 6, height: 6 }} />
-
-// Prominent loading state
-<Spinner size={40} width={32} height={32} />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Provide context with descriptive text'
-      description='Pair spinners with text to give users context about what is loading'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's8' }}>
-  <Spinner size={16} />
-  <Text>Syncing wallet...</Text>
-</Box>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't show spinners without context"
-      description='Avoid showing spinners alone without descriptive text'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's8' }}>
-  <Spinner size={16} />
-</Box>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use standard sizes from the design system'
-      description='Stick to predefined size values like 12, 16, 20, 24, 40'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Spinner size={16} />
-<Spinner size={24} />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use non-standard sizes"
-      description='Avoid arbitrary size values that are not part of the design system'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Spinner size={22} />
-<Spinner size={35} />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>

package/src/lib/Components/Spot/Spot.figma.tsx

@@ -0,0 +1,50 @@
+import figma from '@figma/code-connect';
+import { Placeholder } from '../../Symbols';
+import { Spot } from './Spot';
+import type { SpotAppearance } from './types';
+
+figma.connect(
+  Spot,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=6786%3A4738',
+  {
+    imports: [
+      "import { Spot } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Placeholder } from '@ledgerhq/lumen-ui-rnative/symbols'",
+    ],
+    props: {
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      appearance: figma.enum('appearance', {
+        'interface-icon': 'icon',
+        loader: 'loader',
+        number: 'number',
+        'info-muted': 'info',
+        warning: 'warning',
+        error: 'error',
+        check: 'check',
+        bluetooth: 'bluetooth',
+      }),
+      icon: figma.enum('appearance', {
+        'interface-icon': Placeholder,
+      }),
+      number: figma.enum('appearance', {
+        number: 1,
+      }),
+    },
+    example: (props: {
+      disabled: boolean;
+      appearance: SpotAppearance;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      icon: any;
+      number: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
+    }) => (
+      <Spot
+        appearance={props.appearance}
+        icon={props.icon}
+        number={props.number}
+        disabled={props.disabled}
+      />
+    ),
+  },
+);

package/src/lib/Components/Spot/Spot.mdx

@@ -3,8 +3,6 @@ import * as SpotStories from './Spot.stories';
 import { Spot } from './Spot';
 import { Box } from '../Utility';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/Spot' of={SpotStories} />
 
@@ -171,98 +169,6 @@ function StatusIndicators() {
 }
 ```
 
-## Do's and Don'ts
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use required props for discriminated types'
-      description='Icon appearance requires icon prop, number appearance requires number prop'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<Spot appearance='icon' icon={Settings} />
-<Spot appearance='number' number={5} />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't omit required props"
-      description='Discriminated union types require their specific props'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<Spot appearance='icon' /> // Missing required 'icon' prop
-<Spot appearance='number' /> // Missing required 'number' prop
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use valid number values'
-      description='Number appearance only accepts values from 0 to 9'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Spot appearance='number' number={5} />
-<Spot appearance='number' number={0} />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't pass invalid number values"
-      description='Only values 0-9 are allowed for number appearance'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Spot appearance='number' number={10} />
-<Spot appearance='number' number={-1} />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use Spot for status indication only'
-      description='Spots are designed to display status, not to be interactive elements'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Spot appearance='check' />
-<Spot appearance='error' />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't make spots interactive"
-      description='Avoid adding press handlers or making spots clickable'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Spot appearance='check' onPress={handlePress} />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>

package/src/lib/Components/Stepper/Stepper.figma.tsx

@@ -0,0 +1,11 @@
+import figma from '@figma/code-connect';
+import { Stepper } from './Stepper';
+
+figma.connect(
+  Stepper,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=11439-7755',
+  {
+    imports: ["import { Stepper } from '@ledgerhq/lumen-ui-rnative'"],
+    example: () => <Stepper currentStep={2} totalSteps={4} />,
+  },
+);

package/src/lib/Components/Stepper/Stepper.mdx

@@ -1,8 +1,6 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
 import * as StepperStories from './Stepper.stories';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility/Box';
 import { Text } from '../Utility/Text';
 
@@ -143,71 +141,6 @@ function LocalizedStepper() {
 }
 ```
 
-## Do's and Don'ts
-
-<Box lx={{ gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Provide meaningful step counts'
-      description='Use realistic total steps that match your flow'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Stepper currentStep={3} totalSteps={5} />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use for single-step processes"
-      description='Steppers are for multi-step workflows only'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Stepper currentStep={1} totalSteps={1} />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use disabled for paused steppers'
-      description='Reserve disabled for steppers that are not actively progressing'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Stepper 
-  currentStep={2} 
-  totalSteps={4} 
-  disabled 
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't disable active steps"
-      description='Active steps in progress should not be disabled'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Stepper 
-  currentStep={2} 
-  totalSteps={4} 
-  disabled // Wrong for active step
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>

package/src/lib/Components/Subheader/Subheader.figma.tsx

@@ -0,0 +1,72 @@
+import figma from '@figma/code-connect';
+import {
+  Subheader,
+  SubheaderDescription,
+  SubheaderRow,
+  SubheaderShowMore,
+  SubheaderTitle,
+  SubheaderCount,
+} from './Subheader';
+
+figma.connect(
+  Subheader,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=16477-1522',
+  {
+    imports: [
+      "import { Subheader, SubheaderRow, SubheaderTitle, SubheaderDescription, SubheaderCount } from '@ledgerhq/lumen-ui-rnative'",
+    ],
+    variant: { 'leading-action': 'none' },
+    props: {
+      title: figma.string('title'),
+      descriptionBlock: figma.boolean('show-description', {
+        true: <SubheaderDescription>Description</SubheaderDescription>,
+        false: undefined,
+      }),
+      count: figma.boolean('show-number', {
+        true: <SubheaderCount value={5} />,
+        false: undefined,
+      }),
+    },
+    example: (props) => (
+      <Subheader>
+        <SubheaderRow>
+          <SubheaderTitle>{props.title}</SubheaderTitle>
+          {props.count}
+        </SubheaderRow>
+        {props.descriptionBlock}
+      </Subheader>
+    ),
+  },
+);
+
+figma.connect(
+  Subheader,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=16477-1522',
+  {
+    imports: [
+      "import { Subheader, SubheaderRow, SubheaderTitle, SubheaderShowMore, SubheaderDescription } from '@ledgerhq/lumen-ui-rnative'",
+    ],
+    variant: { 'leading-action': 'show-more' },
+    props: {
+      title: figma.string('title'),
+      descriptionBlock: figma.boolean('show-description', {
+        true: <SubheaderDescription>Description</SubheaderDescription>,
+        false: undefined,
+      }),
+      count: figma.boolean('show-number', {
+        true: <SubheaderCount value={5} />,
+        false: undefined,
+      }),
+    },
+    example: ({ title, descriptionBlock, count }) => (
+      <Subheader>
+        <SubheaderRow onPress={() => {}}>
+          <SubheaderTitle>{title}</SubheaderTitle>
+          {count}
+          <SubheaderShowMore />
+        </SubheaderRow>
+        {descriptionBlock}
+      </Subheader>
+    ),
+  },
+);

package/src/lib/Components/Subheader/Subheader.mdx

@@ -13,11 +13,7 @@ import {
 import {
   CustomTabs,
   Tab,
-  DoVsDontRow,
-  DoBlockItem,
-  DontBlockItem,
 } from '../../../../.storybook/components';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/Subheader' of={SubheaderStories} />
 
@@ -364,118 +360,6 @@ Use the `lx` prop for layout adjustments like margins or positioning:
 </Subheader>
 ```
 
-## Do's and Don'ts
-
-The following guidelines ensure consistent usage of the Subheader component and maintain design system principles.
-
-<Box lx={{ flexDirection: 'column', gap: 's16' }}>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use Count for numeric values'
-      description='Pass numbers using the value prop'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Subheader>
-  <SubheaderRow>
-    <SubheaderTitle>Accounts</SubheaderTitle>
-    <SubheaderCount value={30} />
-  </SubheaderRow>
-</Subheader>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't add parentheses manually"
-      description='Count component automatically formats the value'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Subheader>
-  <SubheaderRow>
-    <SubheaderTitle>Accounts (30)</SubheaderTitle>
-  </SubheaderRow>
-</Subheader>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use the composite pattern'
-      description='Compose sub-components for flexibility'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Subheader>
-  <SubheaderRow>
-    <SubheaderTitle>Title</SubheaderTitle>
-    <SubheaderCount value={5} />
-  </SubheaderRow>
-  <SubheaderDescription>Description</SubheaderDescription>
-</Subheader>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use non-composite children"
-      description='Only use the provided sub-components'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Subheader>
-  <Text>Title (5)</Text>
-  <Text>Description</Text>
-</Subheader>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use lx for layout adjustments only'
-      description='Use the lx prop for margins, positioning, and other layout adjustments'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Subheader lx={{ marginTop: 's16' }}>
-  <SubheaderRow>
-    <SubheaderTitle>Title</SubheaderTitle>
-  </SubheaderRow>
-</Subheader>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use lx for appearance changes"
-      description='Avoid using lx to modify colors, padding, or other core appearance styles'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Subheader lx={{ backgroundColor: 'accent', padding: 's24' }}>
-  <SubheaderRow>
-    <SubheaderTitle>Title</SubheaderTitle>
-  </SubheaderRow>
-</Subheader>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>