@ledgerhq/lumen-ui-rnative 0.1.48 → 0.1.49

package/src/lib/Components/Card/Card.mdx

@@ -16,11 +16,7 @@ import {
 import {
   CustomTabs,
   Tab,
-  DoVsDontRow,
-  DoBlockItem,
-  DontBlockItem,
 } from '../../../../.storybook/components';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/Card' of={CardStories} />
 
@@ -277,162 +273,6 @@ Use `lx` prop for layout purposes only, such as maximum width:
 </Card>
 ```
 
-## Do's and Don'ts
-
-The following guidelines ensure consistent usage of the Card component and maintain design system principles.
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use the composite pattern correctly'
-      description='CardContent should be nested inside CardLeading or CardTrailing to group visual and text content together'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Card onPress={handlePress}>
-  <CardHeader>
-    <CardLeading>
-      <CryptoIcon ledgerId="bitcoin" ticker="BTC" size="48px" />
-      <CardContent>
-        <CardContentTitle>Bitcoin</CardContentTitle>
-        <CardContentDescription>BTC</CardContentDescription>
-      </CardContent>
-    </CardLeading>
-  </CardHeader>
-</Card>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't place CardContent outside CardLeading"
-      description='CardContent must be inside CardLeading or CardTrailing for proper layout'
-    >
-
-{/* prettier-ignore */}
-```tsx
-// DON'T - CardContent outside CardLeading
-<Card onPress={handlePress}>
-  <CardHeader>
-    <CardLeading>
-      <CryptoIcon ledgerId="bitcoin" ticker="BTC" size="48px" />
-    </CardLeading>
-    <CardContent>
-      <CardContentTitle>Bitcoin</CardContentTitle>
-    </CardContent>
-  </CardHeader>
-</Card>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use type="info" for cards with action buttons'
-      description='Info cards have no press handling on the card itself, allowing buttons to work independently'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Card type="info">
-  <CardHeader>
-    <CardLeading>
-      <CardContent>
-        <CardContentTitle>Staking</CardContentTitle>
-      </CardContent>
-    </CardLeading>
-    <CardTrailing>
-      <Button appearance="base" size="sm">Stake</Button>
-    </CardTrailing>
-  </CardHeader>
-</Card>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't put interactive elements in interactive cards"
-      description='Buttons inside an interactive card create nested press targets'
-    >
-
-{/* prettier-ignore */}
-```tsx
-// DON'T - Nested pressables
-<Card onPress={handlePress}>
-  <CardHeader>
-    <CardLeading>
-      <CardContent>
-        <CardContentTitle>Staking</CardContentTitle>
-      </CardContent>
-    </CardLeading>
-    <CardTrailing>
-      <Button appearance="base" size="sm">Stake</Button>
-    </CardTrailing>
-  </CardHeader>
-</Card>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use lx for layout adjustments only'
-      description='The lx prop should be used for layout-level adjustments like max-width or margins'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Card
-  lx={{ maxWidth: 's320' }}
-  onPress={handlePress}
->
-  <CardHeader>
-    <CardLeading>
-      <CardContent>
-        <CardContentTitle>Settings</CardContentTitle>
-      </CardContent>
-    </CardLeading>
-  </CardHeader>
-</Card>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't override card appearance with lx"
-      description='Do not use lx to change the card background, padding, or border radius'
-    >
-
-{/* prettier-ignore */}
-```tsx
-// DON'T - Overriding appearance via lx
-<Card
-  lx={{
-    maxWidth: 's320',
-    backgroundColor: 'accent',
-    padding: 's24',
-    borderRadius: 'xl',
-  }}
-  onPress={handlePress}
->
-  <CardHeader>
-    <CardLeading>
-      <CardContent>
-        <CardContentTitle>Settings</CardContentTitle>
-      </CardContent>
-    </CardLeading>
-  </CardHeader>
-</Card>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>

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

@@ -0,0 +1,49 @@
+import figma from '@figma/code-connect';
+import { Placeholder } from '../../Symbols';
+import { CardButton } from './CardButton';
+import type { CardButtonProps } from './types';
+
+figma.connect(
+  CardButton,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=89%3A525',
+  {
+    imports: [
+      "import { CardButton } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Placeholder } from '@ledgerhq/lumen-ui-rnative/symbols'",
+    ],
+    props: {
+      title: figma.string('title'),
+      description: figma.boolean('show-description', {
+        true: figma.string('description'),
+        false: undefined,
+      }),
+      hideChevron: figma.boolean('show-chevron', {
+        true: false,
+        false: true,
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      appearance: figma.enum('appearance', {
+        base: 'base',
+        outline: 'outline',
+      }),
+      icon: Placeholder,
+    },
+    example: (
+      props: Omit<CardButtonProps, 'icon'> & {
+        icon?: any;
+      },
+    ) => (
+      <CardButton
+        title={props.title}
+        description={props.description}
+        icon={props.icon}
+        hideChevron={props.hideChevron}
+        disabled={props.disabled}
+        appearance={props.appearance}
+        onPress={() => {}}
+      />
+    ),
+  },
+);

package/src/lib/Components/CardButton/CardButton.mdx

@@ -2,8 +2,6 @@ import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as CardButtonStories from './CardButton.stories';
 import { CardButton } from './CardButton';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility';
 
 <Meta title='Core/CardButton' of={CardButtonStories} />
@@ -239,52 +237,6 @@ While the component comes with predefined styles, you can extend them using the
 />
 ```
 
-## Do's and Don'ts
-
-The following guidelines ensure consistent usage of the CardButton component and maintain design system principles.
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use container elements to control width'
-      description='Wrap CardButton in container elements to control its width'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Box lx={{ maxWidth: 's400' }}>
-  <CardButton
-    title='Continue'
-    description='Proceed to next step'
-    onPress={() => console.log('Continue')}
-  />
-</Box>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't modify width directly"
-      description='Avoid using lx to set width on CardButton itself'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Box lx={{ maxWidth: 's400' }}>
-  <CardButton
-    title='Continue'
-    description='Proceed to next step'
-    lx={{ width: 's320' }}
-    onPress={() => console.log('Continue')}
-  />
-</Box>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>

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

@@ -0,0 +1,54 @@
+import figma from '@figma/code-connect';
+import { Checkbox } from './Checkbox';
+
+figma.connect(
+  Checkbox,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=6688-3600',
+  {
+    imports: ["import { Checkbox } from '@ledgerhq/lumen-ui-rnative'"],
+    variant: { 'show-label': true },
+    props: {
+      checkbox: figma.nestedProps('.checkbox', {
+        checked: figma.boolean('selected'),
+        disabled: figma.enum('state', {
+          disabled: true,
+        }),
+      }),
+      label: figma.string('label'),
+    },
+    example: (props) => (
+      <Checkbox
+        checked={props.checkbox.checked}
+        onCheckedChange={(_checked: boolean) => {}}
+        defaultChecked={false}
+        disabled={props.checkbox.disabled}
+        label={props.label}
+      />
+    ),
+  },
+);
+
+figma.connect(
+  Checkbox,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=6688-3600',
+  {
+    imports: ["import { Checkbox } from '@ledgerhq/lumen-ui-rnative'"],
+    variant: { 'show-label': false },
+    props: {
+      checkbox: figma.nestedProps('.checkbox', {
+        checked: figma.boolean('selected'),
+        disabled: figma.enum('state', {
+          disabled: true,
+        }),
+      }),
+    },
+    example: (props) => (
+      <Checkbox
+        checked={props.checkbox.checked}
+        onCheckedChange={(_checked: boolean) => {}}
+        defaultChecked={false}
+        disabled={props.checkbox.disabled}
+      />
+    ),
+  },
+);

package/src/lib/Components/Checkbox/Checkbox.mdx

@@ -3,8 +3,6 @@ import * as CheckboxStories from './Checkbox.stories';
 import { Checkbox } from './Checkbox';
 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/Checkbox' of={CheckboxStories} />
 
@@ -148,77 +146,6 @@ The Checkbox component automatically supports:
 - **Space**: Toggle checked/unchecked state
 - **Enter**: Submit form (when inside a form)
 
-## Do's and Don'ts
-
-The following guidelines ensure consistent usage of the Checkbox component and maintain design system principles.
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use the built-in label prop'
-      description='Use the label prop for simple text labels'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Checkbox label='Subscribe to newsletter' />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use unlabeled checkboxes"
-      description='Always provide labels for accessibility and clarity'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Checkbox id='newsletter' />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use controlled components for form state'
-      description='Use checked and onCheckedChange props for controlled checkboxes'
-    >
-
-{/* prettier-ignore */}
-```tsx
-const [isChecked, setIsChecked] = useState(false);
-
-<Checkbox 
-  label='Accept terms'
-  checked={isChecked} 
-  onCheckedChange={setIsChecked} 
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't mix controlled and uncontrolled patterns"
-      description='Avoid using both checked and defaultChecked props together'
-    >
-
-{/* prettier-ignore */}
-```tsx
-const [isChecked, setIsChecked] = useState(false);
-
-<Checkbox 
-  label='Accept terms'
-  checked={isChecked} 
-  defaultChecked={true} 
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>

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

@@ -0,0 +1,108 @@
+import figma from '@figma/code-connect';
+import { Settings } from '../../Symbols';
+import { Spot } from '../Spot';
+import { Stepper } from '../Stepper';
+import {
+  ContentBanner,
+  ContentBannerContent,
+  ContentBannerDescription,
+  ContentBannerTitle,
+} from './ContentBanner';
+
+figma.connect(
+  ContentBanner,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=11235-5966',
+  {
+    imports: [
+      "import { ContentBanner, ContentBannerContent, ContentBannerTitle, ContentBannerDescription, Spot, Stepper } from '@ledgerhq/lumen-ui-rnative'",
+    ],
+    variant: { 'leading-content': 'spot' },
+    props: {
+      title: figma.string('title'),
+      description: figma.string('description'),
+      onClose: figma.boolean('show-close-button', {
+        true: () => {},
+        false: undefined,
+      }),
+    },
+    example: (props) => (
+      <ContentBanner
+        onClose={props.onClose}
+        closeAccessibilityLabel='Close content banner'
+      >
+        <Spot appearance='icon' icon={Settings} size={48} />
+        <ContentBannerContent>
+          <ContentBannerTitle>{props.title}</ContentBannerTitle>
+          <ContentBannerDescription>
+            {props.description}
+          </ContentBannerDescription>
+        </ContentBannerContent>
+      </ContentBanner>
+    ),
+  },
+);
+
+figma.connect(
+  ContentBanner,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=11235-5966',
+  {
+    imports: [
+      "import { ContentBanner, ContentBannerContent, ContentBannerTitle, ContentBannerDescription, Spot, Stepper } from '@ledgerhq/lumen-ui-rnative'",
+    ],
+    variant: { 'leading-content': 'stepper' },
+    props: {
+      title: figma.string('title'),
+      description: figma.string('description'),
+      onClose: figma.boolean('show-close-button', {
+        true: () => {},
+        false: undefined,
+      }),
+    },
+    example: (props) => (
+      <ContentBanner
+        onClose={props.onClose}
+        closeAccessibilityLabel='Close content banner'
+      >
+        <Stepper currentStep={1} totalSteps={4} />
+        <ContentBannerContent>
+          <ContentBannerTitle>{props.title}</ContentBannerTitle>
+          <ContentBannerDescription>
+            {props.description}
+          </ContentBannerDescription>
+        </ContentBannerContent>
+      </ContentBanner>
+    ),
+  },
+);
+
+figma.connect(
+  ContentBanner,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=11235-5966',
+  {
+    imports: [
+      "import { ContentBanner, ContentBannerContent, ContentBannerTitle, ContentBannerDescription, Spot, Stepper } from '@ledgerhq/lumen-ui-rnative'",
+    ],
+    variant: { 'leading-content': 'none' },
+    props: {
+      title: figma.string('title'),
+      description: figma.string('description'),
+      onClose: figma.boolean('show-close-button', {
+        true: () => {},
+        false: undefined,
+      }),
+    },
+    example: (props) => (
+      <ContentBanner
+        onClose={props.onClose}
+        closeAccessibilityLabel='Close content banner'
+      >
+        <ContentBannerContent>
+          <ContentBannerTitle>{props.title}</ContentBannerTitle>
+          <ContentBannerDescription>
+            {props.description}
+          </ContentBannerDescription>
+        </ContentBannerContent>
+      </ContentBanner>
+    ),
+  },
+);

package/src/lib/Components/ContentBanner/ContentBanner.mdx

@@ -8,8 +8,6 @@ import {
 } from './ContentBanner';
 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/ContentBanner' of={ContentBannerStories} />
 

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

@@ -0,0 +1,20 @@
+import figma from '@figma/code-connect';
+import { CryptoIcon } from '@ledgerhq/crypto-icons';
+
+figma.connect(
+  CryptoIcon,
+  'https://www.figma.com/design/zSkvGGiqcnhywp2l3HTHxA?node-id=6159-1866',
+  {
+    imports: ["import { CryptoIcon } from '@ledgerhq/crypto-icons'"],
+    props: {
+      ticker: figma.string('asset'),
+    },
+    example: (props: { ticker: string }) => (
+      <CryptoIcon
+        ticker={props.ticker}
+        ledgerId={props.ticker}
+        size={'<insert-size>' as any}
+      />
+    ),
+  },
+);

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

@@ -0,0 +1,36 @@
+import figma from '@figma/code-connect';
+import {
+  DescriptionItem,
+  DescriptionItemLabel,
+  DescriptionItemLeading,
+  DescriptionItemTrailing,
+  DescriptionItemValue,
+} from './DescriptionItem';
+
+figma.connect(
+  DescriptionItem,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=10311-11837',
+  {
+    imports: [
+      "import { DescriptionItem, DescriptionItemLeading, DescriptionItemLabel, DescriptionItemTrailing, DescriptionItemValue } from '@ledgerhq/lumen-ui-rnative'",
+    ],
+    props: {
+      size: figma.enum('size', {
+        sm: 'sm',
+        md: 'md',
+      }),
+      label: figma.string('leading-label'),
+      value: figma.string('trailing-label'),
+    },
+    example: (props) => (
+      <DescriptionItem size={props.size}>
+        <DescriptionItemLeading>
+          <DescriptionItemLabel>{props.label}</DescriptionItemLabel>
+        </DescriptionItemLeading>
+        <DescriptionItemTrailing>
+          <DescriptionItemValue>{props.value}</DescriptionItemValue>
+        </DescriptionItemTrailing>
+      </DescriptionItem>
+    ),
+  },
+);

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

@@ -0,0 +1,11 @@
+import figma from '@figma/code-connect';
+import { Divider } from './Divider';
+
+figma.connect(
+  Divider,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=285-5974',
+  {
+    imports: ["import { Divider } from '@ledgerhq/lumen-ui-rnative'"],
+    example: () => <Divider />,
+  },
+);

package/src/lib/Components/Divider/Divider.mdx

@@ -5,7 +5,6 @@ import {
   CustomTabs,
   Tab,
 } from '../../../../.storybook/components';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/Divider' of={DividerStories} />
 
@@ -140,7 +139,6 @@ function MyList() {
 }
 ```
 
-<CommonRulesDoAndDont />
 
 ## Performance Considerations
 

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

@@ -0,0 +1,32 @@
+import figma from '@figma/code-connect';
+import { DotCount } from './DotCount';
+
+figma.connect(
+  DotCount,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=38-998',
+  {
+    imports: ["import { DotCount } from '@ledgerhq/lumen-ui-rnative'"],
+    props: {
+      value: figma.string('value'),
+      size: figma.enum('size', {
+        md: 'md',
+        lg: 'lg',
+      }),
+      appearance: figma.enum('appearance', {
+        base: 'base',
+        red: 'red',
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+    },
+    example: (props) => (
+      <DotCount
+        value={Number(props.value)}
+        size={props.size}
+        appearance={props.appearance}
+        disabled={props.disabled}
+      />
+    ),
+  },
+);

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

@@ -0,0 +1,32 @@
+import figma from '@figma/code-connect';
+import { DotIndicator } from './DotIndicator';
+
+figma.connect(
+  DotIndicator,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=16470-25597',
+  {
+    imports: ["import { DotIndicator } from '@ledgerhq/lumen-ui-rnative'"],
+    props: {
+      size: figma.enum('size', {
+        sm: 'sm',
+        md: 'md',
+        lg: 'lg',
+        xl: 'xl',
+      }),
+      appearance: figma.enum('appearance', {
+        base: 'base',
+        red: 'red',
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+    },
+    example: (props) => (
+      <DotIndicator
+        size={props.size}
+        appearance={props.appearance}
+        disabled={props.disabled}
+      />
+    ),
+  },
+);