@ledgerhq/lumen-ui-rnative 0.1.48 → 0.1.49

package/src/lib/Components/Icon/Icon.mdx

@@ -2,12 +2,6 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as IconsStories from './Icon.stories';
 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='Symbols/Interface Icons' of={IconsStories} />
 
@@ -150,62 +144,6 @@ function SemanticIcons() {
 }
 ```
 
-## Do's and Don'ts
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use predefined size variants'
-      description='Standard sizes ensure consistent visual hierarchy'
-    >
-
-```tsx
-<ArrowUp size={24} />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use custom sizes"
-      description='Avoid non-standard sizes or arbitrary prop overrides'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<ArrowUp size={23} />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use semantic colors for icons'
-      description='Use semantic color tokens and inherit text color'
-    >
-
-```tsx
-<ArrowUp lx={{ color: 'success' }} />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use arbitrary colors"
-      description='Avoid arbitrary color values or overriding currentColor unnecessarily'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<ArrowUp color='#ff0000' />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>

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

@@ -0,0 +1,53 @@
+import figma from '@figma/code-connect';
+import { Placeholder } from '../../Symbols';
+import { IconButton } from './IconButton';
+import type { IconButtonProps } from './types';
+
+figma.connect(
+  IconButton,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=8166-17796',
+  {
+    imports: [
+      "import { IconButton } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Placeholder } from '@ledgerhq/lumen-ui-rnative/symbols'",
+    ],
+    props: {
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      loading: figma.enum('state', {
+        loading: true,
+      }),
+      appearance: figma.enum('appearance', {
+        base: 'base',
+        gray: 'gray',
+        accent: 'accent',
+        transparent: 'transparent',
+        'no-background': 'no-background',
+        red: 'red',
+      }),
+      size: figma.enum('size', {
+        xs: 'xs',
+        sm: 'sm',
+        md: 'md',
+        lg: 'lg',
+      }),
+      icon: Placeholder,
+    },
+    example: (
+      props: Omit<IconButtonProps, 'icon' | 'accessibilityLabel'> & {
+        icon?: any;
+      },
+    ) => (
+      <IconButton
+        disabled={props.disabled}
+        loading={props.loading}
+        appearance={props.appearance}
+        size={props.size}
+        icon={props.icon}
+        accessibilityLabel='Icon button'
+        onPress={() => {}}
+      />
+    ),
+  },
+);

package/src/lib/Components/IconButton/IconButton.mdx

@@ -2,8 +2,6 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as IconButtonStories from './IconButton.stories';
 import { IconButton } from './IconButton';
 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/IconButton' of={IconButtonStories} />
@@ -135,71 +133,5 @@ The Button component is built on React Native's `Pressable` and accepts all its
 />
 ```
 
-## Do's and Don'ts
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use icon prop for consistent sizing'
-      description='Pass icon as a component reference and let IconButton handle sizing automatically'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<IconButton accessibilityLabel='Settings' icon={Settings} size='md' />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't modify icon size directly"
-      description='Avoid passing icon size prop or overriding dimensions through lx'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<IconButton accessibilityLabel='Settings' icon={Settings} lx={{ width: 's32', height: 's32' }} />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Always provide accessibilityLabel'
-      description='Icon-only buttons require descriptive accessibility labels for screen readers'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<IconButton accessibilityLabel='Open settings menu' icon={Settings} />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't omit accessibilityLabel"
-      description='Icon buttons without labels are not accessible to screen reader users'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<IconButton icon={Settings} />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
-
   </Tab>
 </CustomTabs>

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

@@ -0,0 +1,52 @@
+import figma from '@figma/code-connect';
+import { Placeholder } from '../../Symbols';
+import { InteractiveIcon } from './InteractiveIcon';
+import type { InteractiveIconProps } from './types';
+
+const URL =
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=6975-2571';
+
+const sharedProps = {
+  iconType: figma.enum('appearance', {
+    filled: 'filled',
+    stroked: 'stroked',
+  }),
+  appearance: figma.enum('color', {
+    muted: 'muted',
+    white: 'white',
+    base: 'base',
+  }),
+  disabled: figma.enum('state', {
+    disabled: true,
+  }),
+};
+
+const example = (props: Omit<InteractiveIconProps, 'icon'> & { icon: any }) => (
+  <InteractiveIcon
+    iconType={props.iconType}
+    appearance={props.appearance}
+    icon={props.icon}
+    disabled={props.disabled}
+    onPress={() => {}}
+  />
+);
+
+figma.connect(InteractiveIcon, URL, {
+  variant: { appearance: 'filled' },
+  imports: [
+    "import { InteractiveIcon } from '@ledgerhq/lumen-ui-rnative'",
+    "import { Placeholder } from '@ledgerhq/lumen-ui-rnative/symbols'",
+  ],
+  props: { ...sharedProps, icon: Placeholder },
+  example,
+});
+
+figma.connect(InteractiveIcon, URL, {
+  variant: { appearance: 'stroked' },
+  imports: [
+    "import { InteractiveIcon } from '@ledgerhq/lumen-ui-rnative'",
+    "import { Placeholder } from '@ledgerhq/lumen-ui-rnative/symbols'",
+  ],
+  props: { ...sharedProps, icon: Placeholder },
+  example,
+});

package/src/lib/Components/InteractiveIcon/InteractiveIcon.mdx

@@ -3,8 +3,6 @@ import * as InteractiveIconStories from './InteractiveIcon.stories';
 import { Box } from '../Utility';
 import { InteractiveIcon } from './InteractiveIcon';
 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/InteractiveIcon' of={InteractiveIconStories} />
 
@@ -172,111 +170,6 @@ function SizeExamples() {
 }
 ```
 
-## Do's and Don'ts
-
-The following guidelines are based on our design system principles and accessibility best practices for icon-only interactive elements.
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use appropriate icon types for variants'
-      description='Match icon styles to iconType prop: filled icons with filled, outlined icons with stroked'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { DeleteCircleFill, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-// Filled icon with filled variant
-<InteractiveIcon
-  iconType='filled'
-  icon={DeleteCircleFill}
-  size={20}
-  accessibilityLabel='Delete'
-/>
-
-// Outlined icon with stroked variant
-<InteractiveIcon
-  iconType='stroked'
-  icon={Settings}
-  size={20}
-  accessibilityLabel='Settings'
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't mix icon styles with wrong variants"
-      description='Avoid using filled icons with stroked variant or vice versa as it creates visual inconsistency'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { DeleteCircleFill, Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-// Filled icon with stroked variant (wrong)
-<InteractiveIcon
-  iconType='stroked'
-  icon={DeleteCircleFill}
-  size={20}
-  accessibilityLabel='Delete'
-/>
-
-// Outlined icon with filled variant (wrong)
-<InteractiveIcon
-  iconType='filled'
-  icon={Settings}
-  size={20}
-  accessibilityLabel='Settings'
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Always provide descriptive accessibilityLabel'
-      description='Use clear, action-oriented labels that describe what the icon does'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Download } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<InteractiveIcon
-  iconType='stroked'
-  icon={Download}
-  size={20}
-  accessibilityLabel='Download PDF document'
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't omit or use generic accessibilityLabel"
-      description='Avoid missing labels, generic labels like "Click here", or icon names as labels'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Download } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<InteractiveIcon
-  iconType='stroked'
-  icon={Download}
-  size={20}
-  accessibilityLabel='Click here'
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>

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

@@ -0,0 +1,53 @@
+import figma from '@figma/code-connect';
+import { Placeholder } from '../../Symbols';
+import { Link } from './Link';
+import type { LinkProps } from './types';
+
+figma.connect(
+  Link,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=9661-18364',
+  {
+    imports: [
+      "import { Link } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Placeholder } from '@ledgerhq/lumen-ui-rnative/symbols'",
+    ],
+    props: {
+      isExternal: figma.boolean('show-external-link', {
+        true: true,
+        false: false,
+      }),
+      underline: figma.boolean('underline', {
+        true: true,
+        false: false,
+      }),
+      appearance: figma.enum('appearance', {
+        base: 'base',
+        accent: 'accent',
+      }),
+      size: figma.enum('size', {
+        sm: 'sm',
+        md: 'md',
+      }),
+      icon: figma.boolean('show-icon', {
+        true: Placeholder,
+        false: undefined,
+      }),
+    },
+    example: (
+      props: Omit<LinkProps, 'icon' | 'children'> & {
+        icon?: any;
+      },
+    ) => (
+      <Link
+        isExternal={props.isExternal}
+        underline={props.underline}
+        appearance={props.appearance}
+        size={props.size}
+        icon={props.icon}
+        onPress={() => {}}
+      >
+        Label
+      </Link>
+    ),
+  },
+);

package/src/lib/Components/Link/Link.mdx

@@ -3,8 +3,6 @@ import * as LinkStories from './Link.stories';
 import { Link } from './Link';
 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/Link' of={LinkStories} />
 
@@ -189,106 +187,6 @@ The Link component is built on React Native's `Pressable` and accepts all its pr
 </Link>
 ```
 
-## Do's and Don'ts
-
-The following guidelines are based on our design system principles. These decisions were made to ensure consistency, maintainability, and proper implementation of our design system principles.
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Keep underline for base appearance'
-      description='Base appearance links should keep underlines for accessibility'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Link appearance='base' href='https://example.com'>
-  Accessible Link
-</Link>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't remove underline from base appearance"
-      description='This makes links hard to distinguish from regular bold text, hurting accessibility'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Link appearance='base' underline={false} href='https://example.com'>
-  Hard to Distinguish
-</Link>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use icon prop for consistent sizing'
-      description='Pass icon as a component reference and let Link handle sizing'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { ArrowRight } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<Link icon={ArrowRight} size='sm' href='https://example.com'>
-  Next
-</Link>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't include icon in children"
-      description='Avoid placing icons inside children as this breaks automatic sizing'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { ArrowRight } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<Link size='sm' href='https://example.com'>
-  <ArrowRight /> Next
-</Link>
-```
-
-    </DontBlockItem>
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Provide href or onPress'
-      description='Always provide either href for URL navigation or onPress for custom navigation'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Link href='https://example.com'>
-  Visit External Site
-</Link>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't omit both href and onPress"
-      description='Links need either href or onPress to function properly'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Link>
-  Clickable Looking Link
-</Link>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 ## Platform Considerations