@ledgerhq/lumen-ui-rnative 0.1.47 → 0.1.49

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

@@ -0,0 +1,115 @@
+import figma from '@figma/code-connect';
+import { Button } from '../Button';
+import { Banner } from './Banner';
+
+figma.connect(
+  Banner,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=129%3A201',
+  {
+    imports: [
+      "import { Banner } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Button } from '@ledgerhq/lumen-ui-rnative'",
+    ],
+    variant: { 'show-close': true },
+    props: {
+      appearance: figma.enum('appearance', {
+        info: 'info',
+        success: 'success',
+        warning: 'warning',
+        error: 'error',
+      }),
+      title: figma.boolean('show-title', {
+        true: figma.string('title'),
+        false: undefined,
+      }),
+      description: figma.boolean('show-description', {
+        true: figma.string('description'),
+        false: undefined,
+      }),
+      primaryAction: figma.boolean('show-actions', {
+        true: (
+          <Button appearance='transparent' size='sm' onPress={() => {}}>
+            Primary Action
+          </Button>
+        ),
+        false: undefined,
+      }),
+      secondaryAction: figma.boolean('show-actions', {
+        true: figma.boolean('show-secondary-action', {
+          true: (
+            <Button appearance='no-background' size='sm' onPress={() => {}}>
+              Secondary Action
+            </Button>
+          ),
+        }),
+        false: undefined,
+      }),
+    },
+    example: (props) => (
+      <Banner
+        appearance={props.appearance}
+        title={props.title}
+        description={props.description}
+        primaryAction={props.primaryAction}
+        secondaryAction={props.secondaryAction}
+        onClose={() => {}}
+        closeAriaLabel='Close Banner'
+      />
+    ),
+  },
+);
+
+figma.connect(
+  Banner,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=129%3A201',
+  {
+    imports: [
+      "import { Banner } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Button } from '@ledgerhq/lumen-ui-rnative'",
+    ],
+    variant: { 'show-close': false },
+    props: {
+      appearance: figma.enum('appearance', {
+        info: 'info',
+        success: 'success',
+        warning: 'warning',
+        error: 'error',
+      }),
+      title: figma.boolean('show-title', {
+        true: figma.string('title'),
+        false: undefined,
+      }),
+      description: figma.boolean('show-description', {
+        true: figma.string('description'),
+        false: undefined,
+      }),
+      primaryAction: figma.boolean('show-actions', {
+        true: (
+          <Button appearance='transparent' size='sm' onPress={() => {}}>
+            Primary Action
+          </Button>
+        ),
+        false: undefined,
+      }),
+      secondaryAction: figma.boolean('show-actions', {
+        true: figma.boolean('show-secondary-action', {
+          true: (
+            <Button appearance='no-background' size='sm' onPress={() => {}}>
+              Secondary Action
+            </Button>
+          ),
+        }),
+        false: undefined,
+      }),
+    },
+    example: (props) => (
+      <Banner
+        appearance={props.appearance}
+        title={props.title}
+        description={props.description}
+        primaryAction={props.primaryAction}
+        secondaryAction={props.secondaryAction}
+      />
+    ),
+  },
+);

package/src/lib/Components/Banner/Banner.mdx

@@ -3,8 +3,6 @@ import * as BannerStories from './Banner.stories';
 import { Banner } from './Banner';
 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/Banner' of={BannerStories} />
 
@@ -349,90 +347,6 @@ Use the `lx` prop for layout adjustments like margins or positioning:
 />
 ```
 
-## Do's and Don'ts
-
-The following guidelines ensure consistent usage of the Banner component and maintain design system principles.
-
-<Box lx={{ flexDirection: 'column', gap: 's16' }}>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use lx for layout adjustments only'
-      description='Use the lx prop for margins, positioning, and other layout adjustments'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Banner
-  title='System Notice'
-  description='Maintenance scheduled for tonight'
-  lx={{ marginTop: 's16' }}
-  appearance='warning'
-/>
-```
-
-    </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
-<Banner
-  title='System Notice'
-  description='Maintenance scheduled for tonight'
-  lx={{ backgroundColor: 'accent', padding: 's24' }}
-  appearance='warning'
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Pass complete Button components with proper styling'
-      description='Always provide fully styled Button components with appearance and size props for actions'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Banner
-  title='Confirm Action'
-  description='This action cannot be undone'
-  primaryAction={
-    <Button appearance='transparent' size='sm' onPress={handleConfirm}>
-      Confirm
-    </Button>
-  }
-  appearance='warning'
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't pass incomplete or unstyled buttons"
-      description='Avoid passing Button components without proper appearance and size props'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Banner
-  title='Broken Action'
-  description="This won't work properly"
-  primaryAction={<Button onPress={handleSubmit}>Submit</Button>}
-  appearance='warning'
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>

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

@@ -0,0 +1,52 @@
+import figma from '@figma/code-connect';
+import { Button } from '../Button';
+import { BottomSheet } from './BottomSheet';
+import { BottomSheetHeader } from './BottomSheetHeader';
+import { BottomSheetView } from './Scrollables';
+
+figma.connect(
+  BottomSheet,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=118-1734',
+  {
+    imports: [
+      "import { BottomSheet, BottomSheetHeader, BottomSheetView, useBottomSheetRef } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Button } from '@ledgerhq/lumen-ui-rnative'",
+    ],
+    props: {
+      header: figma.nestedProps('.bottom-sheet-header', {
+        density: figma.enum('density', {
+          compact: 'compact',
+          expanded: 'expanded',
+        }),
+        title: figma.boolean('show-title', {
+          true: figma.string('title'),
+          false: undefined,
+        }),
+        description: figma.boolean('show-description', {
+          true: figma.string('description'),
+          false: undefined,
+        }),
+        onBack: figma.boolean('show-back-icon', {
+          true: () => {},
+          false: undefined,
+        }),
+      }),
+    },
+    example: (props) => {
+      return (
+        <BottomSheet onBack={props.header.onBack}>
+          <BottomSheetHeader
+            density={props.header.density}
+            title={props.header.title}
+            description={props.header.description}
+          />
+          <BottomSheetView>
+            <Button appearance='base' isFull onPress={() => {}}>
+              Confirm
+            </Button>
+          </BottomSheetView>
+        </BottomSheet>
+      );
+    },
+  },
+);

package/src/lib/Components/BottomSheet/BottomSheet.mdx

@@ -2,8 +2,6 @@ import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as BottomSheetStories from './BottomSheet.stories';
 import { BottomSheet } from './BottomSheet';
 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/BottomSheet' of={BottomSheetStories} />
@@ -275,123 +273,6 @@ import {
 - **SectionList**: Not compatible with react-native-web. See [Gorhom documentation](https://gorhom.dev/react-native-bottom-sheet/components/bottomsheetsectionlist).
 - **FlashList**: Requires `@shopify/flash-list` package. See [Gorhom docs](https://gorhom.dev/react-native-bottom-sheet/components/bottomsheetflashlist)
 
-## Do's and Don'ts
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use specialized scrollable components'
-      description='Always use BottomSheet-specific components for scrollable content'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<BottomSheet ref={bottomSheetRef} snapPoints='full'>
-  <BottomSheetScrollView>
-    <BottomSheetHeader title='Title' density='compact' />
-    <Text typography='body2' lx={{ color: 'base' }}>Content</Text>
-  </BottomSheetScrollView>
-</BottomSheet>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use regular React Native components"
-      description='Avoid using regular ScrollView, FlatList, etc. - they will not work properly'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<BottomSheet ref={bottomSheetRef} snapPoints='full'>
-  <ScrollView>
-    <BottomSheetHeader title='Title' density='compact' />
-    <Text typography='body2' lx={{ color: 'base' }}>Content</Text>
-  </ScrollView>
-</BottomSheet>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use useBottomSheetRef with optional chaining'
-      description='Use the provided hook and always use optional chaining to call methods safely'
-    >
-
-{/* prettier-ignore */}
-```tsx
-const bottomSheetRef = useBottomSheetRef();
-
-bottomSheetRef.current?.present();
-bottomSheetRef.current?.dismiss();
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't call methods without optional chaining"
-      description='Calling methods without optional chaining may crash if ref is not yet mounted'
-    >
-
-{/* prettier-ignore */}
-```tsx
-const bottomSheetRef = useBottomSheetRef();
-
-bottomSheetRef.current.present();
-bottomSheetRef.current.dismiss();
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Disable both props for non-dismissible sheets'
-      description='For critical flows, disable both close button and pan-down gesture'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<BottomSheet
-  ref={bottomSheetRef}
-  snapPoints='full'
-  hideCloseButton
-  enablePanDownToClose={false}
-  backdropPressBehavior='none'
->
-  <BottomSheetView>
-    <Text typography='body2' lx={{ color: 'base' }}>Critical content</Text>
-  </BottomSheetView>
-</BottomSheet>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't disable only one dismissal method"
-      description='Partially blocking dismissal creates confusing UX - disable all methods or none'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<BottomSheet
-  ref={bottomSheetRef}
-  snapPoints='full'
-  hideCloseButton
->
-  <BottomSheetView>
-    <Text typography='body2' lx={{ color: 'base' }}>Critical content</Text>
-  </BottomSheetView>
-</BottomSheet>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 ## Learn More
 

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

@@ -0,0 +1,57 @@
+import figma from '@figma/code-connect';
+import { Placeholder } from '../../Symbols';
+import { Button } from './Button';
+import type { ButtonProps } from './types';
+
+figma.connect(
+  Button,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=9%3A28',
+  {
+    imports: [
+      "import { Button } 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', {
+        sm: 'sm',
+        md: 'md',
+        lg: 'lg',
+      }),
+      children: figma.string('label'),
+      icon: figma.enum('content', {
+        'icon-text': Placeholder,
+        text: undefined,
+      }),
+    },
+    example: (
+      props: Omit<ButtonProps, 'icon'> & {
+        icon?: any;
+      },
+    ) => (
+      <Button
+        disabled={props.disabled}
+        loading={props.loading}
+        appearance={props.appearance}
+        size={props.size}
+        icon={props.icon}
+        onPress={() => {}}
+      >
+        {props.children}
+      </Button>
+    ),
+  },
+);