@ledgerhq/lumen-ui-rnative 0.1.48 → 0.1.49

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

@@ -0,0 +1,35 @@
+import figma from '@figma/code-connect';
+import { Placeholder } from '../../Symbols';
+import { TileButton } from './TileButton';
+import type { TileButtonProps } from './types';
+
+figma.connect(
+  TileButton,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=11291-620',
+  {
+    imports: [
+      "import { TileButton } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Placeholder } from '@ledgerhq/lumen-ui-rnative/symbols'",
+    ],
+    props: {
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      children: figma.string('label'),
+      icon: Placeholder,
+    },
+    example: (
+      props: Omit<TileButtonProps, 'icon'> & {
+        icon: any;
+      },
+    ) => (
+      <TileButton
+        disabled={props.disabled}
+        icon={props.icon}
+        onPress={() => {}}
+      >
+        {props.children}
+      </TileButton>
+    ),
+  },
+);

package/src/lib/Components/TileButton/TileButton.mdx

@@ -2,8 +2,6 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as TileButtonStories from './TileButton.stories';
 import { TileButton } from './TileButton';
 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/TileButton' of={TileButtonStories} />
 
@@ -154,44 +152,6 @@ Or use the `style` prop for escape-hatch styling:
 </TileButton>
 ```
 
-## Do's and Don'ts
-
-<div className='flex flex-col gap-24'>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use the icon prop'
-      description='Pass icon as a component reference'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Plus } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<TileButton icon={Plus} onPress={() => {}}>
-  Add
-</TileButton>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't include icon in children"
-      description='The icon and children are separate'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Plus } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<TileButton icon={Plus} onPress={() => {}}>
-  <Plus /> Add
-</TileButton>
-```
-
-    </DontBlockItem>
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</div>
 
 ## Platform Considerations
 

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

@@ -0,0 +1,30 @@
+import figma from '@figma/code-connect';
+import { Text } from '../Utility/Text';
+import { Tooltip, TooltipContent, TooltipTrigger } from './Tooltip';
+
+figma.connect(
+  Tooltip,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=6387%3A409',
+  {
+    imports: [
+      "import { Tooltip, TooltipTrigger, TooltipContent } from '@ledgerhq/lumen-ui-rnative'",
+    ],
+    props: {
+      header: figma.nestedProps('.bottom-sheet-header', {
+        title: figma.string('title'),
+        description: figma.string('description'),
+      }),
+    },
+    example: (props) => (
+      <Tooltip>
+        <TooltipTrigger>
+          <></>
+        </TooltipTrigger>
+        <TooltipContent
+          title={props.header.title}
+          content={<Text>{props.header.description}</Text>}
+        />
+      </Tooltip>
+    ),
+  },
+);

package/src/lib/Components/Tooltip/Tooltip.mdx

@@ -1,7 +1,5 @@
 import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import * as TooltipStories from './Tooltip.stories';
 import { Box } from '../Utility/Box';
 
@@ -166,187 +164,6 @@ function CallbackFunctionTooltip() {
 }
 ```
 
-## Do's and Don'ts
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use asChild to merge props with existing components'
-      description='Use asChild prop on TooltipTrigger to merge tooltip functionality with interactive components'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<TooltipTrigger asChild>
-  <Button>Help</Button>
-</TooltipTrigger>
-
-<TooltipTrigger asChild>
-  <InteractiveIcon iconType='filled'>
-    <Information />
-  </InteractiveIcon>
-</TooltipTrigger>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't wrap non-interactive elements"
-      description='Avoid using TooltipTrigger with static text or non-interactive elements'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<TooltipTrigger asChild>
-  <Text>Static Text</Text>
-</TooltipTrigger>
-
-<TooltipTrigger asChild>
-  <View>
-    <Text>Non-interactive</Text>
-  </View>
-</TooltipTrigger>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Keep content concise and helpful'
-      description='Provide brief, clear explanations in tooltip content'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<TooltipContent
-  title='Short Title'
-  content={<Text typography='body2'>Brief, helpful explanation.</Text>}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use overly long or complex content"
-      description='Avoid verbose explanations or complex layouts in tooltips'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<TooltipContent
-  title='Very Long Detailed Title That Goes On Forever'
-  content={<Text typography='body2'>This is a very long explanation that contains too much information...</Text>}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Correct provider order'
-      description='BottomSheetModalProvider must be inside GestureHandlerRootView'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<ThemeProvider>
-  <GestureHandlerRootView>
-    <BottomSheetModalProvider>
-      <App />
-      <GlobalTooltipBottomSheet />
-    </BottomSheetModalProvider>
-  </GestureHandlerRootView>
-</ThemeProvider>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't place providers in wrong order"
-      description="Gestures won't work if BottomSheetModalProvider is outside GestureHandlerRootView"
-    >
-
-{/* prettier-ignore */}
-```tsx
-<ThemeProvider>
-  <BottomSheetModalProvider> {/* Wrong! */}
-    <GestureHandlerRootView>
-      <App />
-      <GlobalTooltipBottomSheet />
-    </GestureHandlerRootView>
-  </BottomSheetModalProvider>
-</ThemeProvider>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use multiple separate tooltips'
-      description='Create independent tooltip instances for different trigger elements'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Box>
-  <Tooltip>
-    <TooltipTrigger asChild>
-      <Button>Help 1</Button>
-    </TooltipTrigger>
-    <TooltipContent
-      title='First'
-      content={<Text typography='body2'>Info</Text>}
-    />
-  </Tooltip>
-
-  <Tooltip>
-    <TooltipTrigger asChild>
-      <Button>Help 2</Button>
-    </TooltipTrigger>
-    <TooltipContent
-      title='Second'
-      content={<Text typography='body2'>Info</Text>}
-    />
-  </Tooltip>
-</Box>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't nest tooltips"
-      description='Avoid nesting Tooltip components inside each other'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Box>
-  <Tooltip>
-    <TooltipTrigger asChild>
-      <Button>Help 1</Button>
-    </TooltipTrigger>
-    <TooltipContent
-      title='First'
-      content={<Text typography='body2'>Info</Text>}
-    />
-  </Tooltip>
-
-  <Tooltip>
-    <TooltipTrigger>
-      <Tooltip>...</Tooltip>
-    </TooltipTrigger>
-  </Tooltip>
-</Box>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 ### Performance
 

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

@@ -0,0 +1,28 @@
+import figma from '@figma/code-connect';
+import { Trend } from './Trend';
+
+figma.connect(
+  Trend,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=892%3A5393',
+  {
+    imports: ["import { Trend } from '@ledgerhq/lumen-ui-rnative'"],
+    props: {
+      value: figma.enum('type', {
+        increasing: 5.25,
+        decreasing: -3.14,
+        neutral: 0,
+      }),
+      size: figma.enum('size', {
+        md: 'md',
+        sm: 'sm',
+      }),
+      disabled: figma.enum('state', {
+        enabled: false,
+        disabled: true,
+      }),
+    },
+    example: (props) => (
+      <Trend value={props.value} size={props.size} disabled={props.disabled} />
+    ),
+  },
+);

package/src/lib/Components/Trend/Trend.mdx

@@ -1,8 +1,6 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as TrendStories from './Trend.stories';
 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/Trend' of={TrendStories} />
 

package/src/lib/Components/Utility/Text/Text.mdx

@@ -39,7 +39,6 @@ Used for section titles like page titles.
 - `heading5`, `heading5SemiBold`
 
 
-
 ## Usage
 
 ```tsx

package/src/lib/Symbols/Icons/ChevronAscending.tsx

@@ -35,7 +35,7 @@ export const ChevronAscending = createIcon(
   'ChevronAscending',
   <Svg width={24} height={24} fill='currentColor' viewBox='0 0 16 16'>
     <Path
-      stroke='#E8E8E8'
+      stroke='#D5D5D5'
       strokeLinecap='round'
       strokeLinejoin='round'
       strokeWidth={1.3}

package/src/lib/Symbols/Icons/ChevronDescending.tsx

@@ -42,7 +42,7 @@ export const ChevronDescending = createIcon(
       d='M5.333 10 8 12.667 10.667 10'
     />
     <Path
-      stroke='#E8E8E8'
+      stroke='#D5D5D5'
       strokeLinecap='round'
       strokeLinejoin='round'
       strokeWidth={1.3}

package/src/lib/Symbols/Icons/Contact.tsx

@@ -0,0 +1,45 @@
+import Svg, { Path } from 'react-native-svg';
+import createIcon from '../../Components/Icon/createIcon';
+
+/**
+ * Contact icon component for React Native.
+ *
+ * This icon component is automatically generated from SVG files and uses the createIcon utility
+ * to create a consistent icon interface. It supports all standard SVG props (from react-native-svg)
+ * and additional size variants defined in the Icon component.
+ *
+ * @component
+ * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
+ * @param {string} [color] - The color of the icon.
+ * @param {SVGProps} [...props] - All standard SVG element props (from react-native-svg).
+ *
+ * @example
+ * // Basic usage with default size (24px)
+ * import { Contact } from '@ledgerhq/lumen-ui-rnative/symbols';
+ *
+ * <Contact />
+ *
+ * @example
+ * // With custom size and style
+ * <Contact size={40} color="warning" lx={{ marginTop: 's4' }} />
+ *
+ * @example
+ * // Used within a Button component
+ * import { Button } from '@ledgerhq/lumen-ui-rnative';
+ *
+ * <Button icon={Contact} size="md">
+ *   Click me
+ * </Button>
+ */
+export const Contact = createIcon(
+  'Contact',
+  <Svg width={24} height={24} fill='currentColor' viewBox='0 0 16 16'>
+    <Path
+      stroke='currentColor'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      strokeWidth={1.3}
+      d='M10.667 2h1.666c.737 0 1.334.597 1.334 1.333v9.334c0 .736-.597 1.333-1.334 1.333h-1.666m0 0H3.999a1.33 1.33 0 0 1-1.327-1.334V3.327c0-.733.593-1.334 1.333-1.327h6.668C11.407 2 12 2.58 12 3.32v9.346A1.34 1.34 0 0 1 10.667 14m2.666-9H12m1.333 3H12m1.333 3H12m-2.333-.333A2.069 2.069 0 0 0 7.752 9.38h-.837c-.524 0-1.02.186-1.398.538-.226.201-.4.453-.517.733m3.17-4.967a1.156 1.156 0 0 1 0 1.646 1.2 1.2 0 0 1-1.674 0 1.15 1.15 0 0 1 0-1.653 1.18 1.18 0 0 1 1.667 0'
+    />
+  </Svg>,
+);

package/src/lib/Symbols/index.ts

@@ -71,6 +71,7 @@ export { CoinsEye } from './Icons/CoinsEye';
 export { ColorPalette } from './Icons/ColorPalette';
 export { Compass } from './Icons/Compass';
 export { ComputerMobile } from './Icons/ComputerMobile';
+export { Contact } from './Icons/Contact';
 export { Copy } from './Icons/Copy';
 export { CreditCard } from './Icons/CreditCard';
 export { CreditCardFill } from './Icons/CreditCardFill';

package/dist/typescript/src/lib/Components/Avatar/Avatar.figma.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=Avatar.figma.d.ts.map

package/dist/typescript/src/lib/Components/Avatar/Avatar.figma.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Avatar.figma.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Avatar/Avatar.figma.tsx"],"names":[],"mappings":""}

package/dist/typescript/src/lib/Components/OptionList/OptionList.figma.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=OptionList.figma.d.ts.map

package/dist/typescript/src/lib/Components/OptionList/OptionList.figma.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"OptionList.figma.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/OptionList/OptionList.figma.tsx"],"names":[],"mappings":""}