@ledgerhq/lumen-ui-rnative 0.1.48 → 0.1.49

package/src/lib/Components/Avatar/Avatar.tsx

@@ -1,9 +1,8 @@
-import { useState, useEffect } from 'react';
-import { StyleSheet, Image } from 'react-native';
+import { useEffect, useState } from 'react';
+import { Image, StyleSheet } from 'react-native';
 import { useCommonTranslation } from '../../../i18n';
 import { useStyleSheet } from '../../../styles';
 import { User } from '../../Symbols';
-import { DotIndicator } from '../DotIndicator';
 import { Box } from '../Utility';
 import type { AvatarProps } from './types';
 
@@ -17,13 +16,6 @@ const fallbackSizes = {
   xl: 40,
 } as const;
 
-const dotSizeMap: Partial<
-  Record<Size, NonNullable<React.ComponentProps<typeof DotIndicator>['size']>>
-> = {
-  sm: 'lg',
-  md: 'xl',
-};
-
 const useStyles = ({
   appearance,
   size,
@@ -80,9 +72,6 @@ const useStyles = ({
  * import { Avatar } from '@ledgerhq/lumen-ui-rnative';
  *
  * <Avatar src="https://example.com/photo.jpg" size="md" />
- *
- * // With notification indicator
- * <Avatar src="https://example.com/photo.jpg" showNotification />
  */
 export const Avatar = ({
   lx,
@@ -91,8 +80,6 @@ export const Avatar = ({
   alt = 'avatar',
   appearance = 'transparent',
   size = 'md',
-  showNotification: showNotificationProp = false,
-  testID,
   ref,
   ...props
 }: AvatarProps) => {
@@ -101,15 +88,7 @@ export const Avatar = ({
   const shouldFallback = !src || error;
   const styles = useStyles({ appearance, size });
 
-  const resolvedAlt = alt || t('components.avatar.defaultAlt');
-
-  // dot indicator is not visible on larger sizes, regardless of the `showNotification` prop
-  const showNotification =
-    showNotificationProp && (size === 'sm' || size === 'md');
-
-  const accessibilityLabel = showNotification
-    ? `${resolvedAlt}, ${t('components.avatar.notificationAriaLabel')}`
-    : resolvedAlt;
+  const resolvedAlt = alt || t('components.avatar.defaultAriaLabel');
 
   useEffect(() => {
     setError(false);
@@ -121,8 +100,7 @@ export const Avatar = ({
       lx={lx}
       style={StyleSheet.flatten([styles.root, style])}
       accessibilityRole='image'
-      accessibilityLabel={accessibilityLabel}
-      testID={showNotification ? undefined : testID}
+      accessibilityLabel={resolvedAlt}
       {...props}
     >
       {shouldFallback ? (
@@ -143,13 +121,5 @@ export const Avatar = ({
     </Box>
   );
 
-  if (showNotification) {
-    return (
-      <DotIndicator size={dotSizeMap[size]} appearance='red' testID={testID}>
-        {avatarContent}
-      </DotIndicator>
-    );
-  }
-
   return avatarContent;
 };

package/src/lib/Components/Avatar/types.ts

@@ -23,10 +23,4 @@ export type AvatarProps = {
    * @default md
    */
   size?: 'sm' | 'md' | 'lg' | 'xl';
-  /**
-   * Whether to show the notifications indicator.
-   * @optional
-   * @default false
-   */
-  showNotification?: boolean;
 } & Omit<StyledViewProps, 'children'>;

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>
+    ),
+  },
+);