@ledgerhq/lumen-ui-rnative 0.1.48 → 0.1.49

package/dist/module/lib/Components/AmountInput/AmountInput.figma.js

@@ -0,0 +1,70 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { AmountInput } from "./AmountInput.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(AmountInput, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=17523-37413', {
+  imports: ["import { AmountInput } from '@ledgerhq/lumen-ui-rnative'"],
+  props: {
+    size: figma.enum('size', {
+      md: 'md',
+      sm: 'sm'
+    }),
+    value: figma.string('amount'),
+    currencyText: figma.enum('currency', {
+      $: '$',
+      '€': '€',
+      '£': '£'
+    }),
+    currencyPosition: figma.enum('currency', {
+      $: 'left',
+      '£': 'left',
+      '€': 'right'
+    }),
+    disabled: figma.enum('state', {
+      disabled: true
+    }),
+    isInvalid: figma.enum('state', {
+      error: true
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(AmountInput, {
+    size: props.size,
+    disabled: props.disabled,
+    isInvalid: props.isInvalid,
+    value: props.value,
+    onChangeText: () => {},
+    currencyText: props.currencyText,
+    currencyPosition: props.currencyPosition
+  })
+});
+figma.connect(AmountInput, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=17523-37413', {
+  imports: ["import { AmountInput } from '@ledgerhq/lumen-ui-rnative'"],
+  variant: {
+    currency: 'crypto'
+  },
+  props: {
+    size: figma.enum('size', {
+      md: 'md',
+      sm: 'sm'
+    }),
+    value: figma.string('amount'),
+    currencyText: figma.string('crypto'),
+    disabled: figma.enum('state', {
+      disabled: true
+    }),
+    isInvalid: figma.enum('state', {
+      error: true
+    })
+  },
+  example: props => /*#__PURE__*/_jsx(AmountInput, {
+    size: props.size,
+    disabled: props.disabled,
+    isInvalid: props.isInvalid,
+    value: props.value,
+    onChangeText: () => {},
+    currencyText: props.currencyText,
+    currencyPosition: "right"
+  })
+});
+//# sourceMappingURL=AmountInput.figma.js.map

package/dist/module/lib/Components/AmountInput/AmountInput.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","AmountInput","jsx","_jsx","connect","imports","props","size","enum","md","sm","value","string","currencyText","$","currencyPosition","disabled","isInvalid","error","example","onChangeText","variant","currency"],"sourceRoot":"../../../../../src","sources":["lib/Components/AmountInput/AmountInput.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,WAAW,QAAQ,kBAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE5CH,KAAK,CAACI,OAAO,CACXH,WAAW,EACX,yEAAyE,EACzE;EACEI,OAAO,EAAE,CAAC,0DAA0D,CAAC;EACrEC,KAAK,EAAE;IACLC,IAAI,EAAEP,KAAK,CAACQ,IAAI,CAAC,MAAM,EAAE;MACvBC,EAAE,EAAE,IAAI;MACRC,EAAE,EAAE;IACN,CAAC,CAAC;IACFC,KAAK,EAAEX,KAAK,CAACY,MAAM,CAAC,QAAQ,CAAC;IAC7BC,YAAY,EAAEb,KAAK,CAACQ,IAAI,CAAC,UAAU,EAAE;MACnCM,CAAC,EAAE,GAAG;MACN,GAAG,EAAE,GAAG;MACR,GAAG,EAAE;IACP,CAAC,CAAC;IACFC,gBAAgB,EAAEf,KAAK,CAACQ,IAAI,CAAC,UAAU,EAAE;MACvCM,CAAC,EAAE,MAAM;MACT,GAAG,EAAE,MAAM;MACX,GAAG,EAAE;IACP,CAAC,CAAC;IACFE,QAAQ,EAAEhB,KAAK,CAACQ,IAAI,CAAC,OAAO,EAAE;MAC5BQ,QAAQ,EAAE;IACZ,CAAC,CAAC;IACFC,SAAS,EAAEjB,KAAK,CAACQ,IAAI,CAAC,OAAO,EAAE;MAC7BU,KAAK,EAAE;IACT,CAAC;EACH,CAAC;EACDC,OAAO,EAAGb,KAAK,iBACbH,IAAA,CAACF,WAAW;IACVM,IAAI,EAAED,KAAK,CAACC,IAAK;IACjBS,QAAQ,EAAEV,KAAK,CAACU,QAAS;IACzBC,SAAS,EAAEX,KAAK,CAACW,SAAU;IAC3BN,KAAK,EAAEL,KAAK,CAACK,KAAM;IACnBS,YAAY,EAAEA,CAAA,KAAM,CAAC,CAAE;IACvBP,YAAY,EAAEP,KAAK,CAACO,YAAa;IACjCE,gBAAgB,EAAET,KAAK,CAACS;EAAiB,CAC1C;AAEL,CACF,CAAC;AAEDf,KAAK,CAACI,OAAO,CACXH,WAAW,EACX,yEAAyE,EACzE;EACEI,OAAO,EAAE,CAAC,0DAA0D,CAAC;EACrEgB,OAAO,EAAE;IAAEC,QAAQ,EAAE;EAAS,CAAC;EAC/BhB,KAAK,EAAE;IACLC,IAAI,EAAEP,KAAK,CAACQ,IAAI,CAAC,MAAM,EAAE;MACvBC,EAAE,EAAE,IAAI;MACRC,EAAE,EAAE;IACN,CAAC,CAAC;IACFC,KAAK,EAAEX,KAAK,CAACY,MAAM,CAAC,QAAQ,CAAC;IAC7BC,YAAY,EAAEb,KAAK,CAACY,MAAM,CAAC,QAAQ,CAAC;IACpCI,QAAQ,EAAEhB,KAAK,CAACQ,IAAI,CAAC,OAAO,EAAE;MAC5BQ,QAAQ,EAAE;IACZ,CAAC,CAAC;IACFC,SAAS,EAAEjB,KAAK,CAACQ,IAAI,CAAC,OAAO,EAAE;MAC7BU,KAAK,EAAE;IACT,CAAC;EACH,CAAC;EACDC,OAAO,EAAGb,KAAK,iBACbH,IAAA,CAACF,WAAW;IACVM,IAAI,EAAED,KAAK,CAACC,IAAK;IACjBS,QAAQ,EAAEV,KAAK,CAACU,QAAS;IACzBC,SAAS,EAAEX,KAAK,CAACW,SAAU;IAC3BN,KAAK,EAAEL,KAAK,CAACK,KAAM;IACnBS,YAAY,EAAEA,CAAA,KAAM,CAAC,CAAE;IACvBP,YAAY,EAAEP,KAAK,CAACO,YAAa;IACjCE,gBAAgB,EAAC;EAAO,CACzB;AAEL,CACF,CAAC","ignoreList":[]}

package/dist/module/lib/Components/AmountInput/AmountInput.mdx

@@ -2,8 +2,6 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as AmountInputStories from './AmountInput.stories';
 import { AmountInput } from './AmountInput';
 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/AmountInput' of={AmountInputStories} />
 
@@ -277,194 +275,6 @@ Use the `editable` prop to disable the input:
 <AmountInput value='1000' currencyText='USD' editable={false} />
 ```
 
-## Do's and Don'ts
-
-<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use integer-only for whole number scenarios'
-      description='Disable decimals for quantities, counts, or other whole number inputs'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AmountInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [quantity, setQuantity] = useState('');
-
-// Use integer-only for whole number scenarios (quantity, age, etc.)
-<AmountInput
-  value={quantity}
-  onChangeText={setQuantity}
-  currencyText='items'
-  allowDecimals={false}
-  maxIntegerLength={4}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't allow decimals for count-based inputs"
-      description='Items, quantities, and counts should always be whole numbers'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AmountInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [quantity, setQuantity] = useState('');
-
-<AmountInput
-  value={quantity}
-  onChangeText={setQuantity}
-  currencyText='items'
-  allowDecimals={true}
-  maxIntegerLength={4}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Always use controlled input pattern'
-      description='AmountInput requires both value and onChangeText props'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AmountInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [value, setValue] = useState('');
-
-<AmountInput
-  value={value}
-  onChangeText={setValue}
-  currencyText='USD'
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use uncontrolled pattern"
-      description='AmountInput does not support defaultValue - always use controlled pattern'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AmountInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [value, setValue] = useState('');
-
-<AmountInput
-  defaultValue='0.00'
-  currencyText='USD'
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use isInvalid for error states'
-      description='Use the isInvalid prop to indicate validation errors'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AmountInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [value, setValue] = useState('');
-const [hasError, setHasError] = useState(false);
-
-<AmountInput
-  value={value}
-  onChangeText={setValue}
-  currencyText='USD'
-  isInvalid={hasError}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use custom error props"
-      description='Use the isInvalid prop for error styling. AmountInput does not accept ad-hoc validation props.'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AmountInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [value, setValue] = useState('');
-const [hasError, setHasError] = useState(false);
-
-<AmountInput
-  value={value}
-  onChangeText={setValue}
-  currencyText='USD'
-  status={hasError ? 'error' : undefined}
-  helperText={hasError ? 'Invalid amount' : undefined}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use appropriate length limits'
-      description='Set maxIntegerLength and maxDecimalLength based on your use case'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AmountInput } from '@ledgerhq/lumen-ui-rnative';
-
-<AmountInput
-  value={amount}
-  onChangeText={setAmount}
-  currencyText='$'
-  maxIntegerLength={9}
-  maxDecimalLength={2}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use overly restrictive or excessive limits"
-      description='Length limits should match real-world requirements'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { AmountInput } from '@ledgerhq/lumen-ui-rnative';
-
-<AmountInput
-  value={amount}
-  onChangeText={setAmount}
-  currencyText='$'
-  maxIntegerLength={1}
-  maxDecimalLength={25}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</div>
 
 ## Platform Considerations
 

package/dist/module/lib/Components/Avatar/Avatar.figma.js

@@ -1,10 +1,11 @@
 "use strict";
 
 import figma from '@figma/code-connect';
+import { DotIndicator, getDotIndicatorProps } from "../DotIndicator/index.js";
 import { Avatar } from "./Avatar.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 figma.connect(Avatar, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=11097-8', {
-  imports: ["import { Avatar } from '@ledgerhq/lumen-ui-rnative'"],
+  imports: ["import { Avatar, DotIndicator, getDotIndicatorProps } from '@ledgerhq/lumen-ui-rnative'"],
   props: {
     appearance: figma.enum('appearance', {
       gray: 'gray',
@@ -16,17 +17,19 @@ figma.connect(Avatar, 'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-
       lg: 'lg',
       xl: 'xl'
     }),
-    showNotification: figma.boolean('show-notification', {
-      true: true,
-      false: false
-    })
+    showNotification: figma.boolean('show-notification')
   },
-  example: props => /*#__PURE__*/_jsx(Avatar, {
-    src: "https://example-image.com",
-    appearance: props.appearance,
-    size: props.size,
-    alt: "John Doe's Avatar",
-    showNotification: props.showNotification
-  })
+  example: props => {
+    const avatar = /*#__PURE__*/_jsx(Avatar, {
+      src: "https://example-image.com",
+      appearance: props.appearance,
+      size: props.size,
+      alt: "John Doe's Avatar"
+    });
+    return props.showNotification && (props.size === 'sm' || props.size === 'md') ? /*#__PURE__*/_jsx(DotIndicator, {
+      ...getDotIndicatorProps('avatar', props.size),
+      children: avatar
+    }) : avatar;
+  }
 });
 //# sourceMappingURL=Avatar.figma.js.map

package/dist/module/lib/Components/Avatar/Avatar.figma.js.map

@@ -1 +1 @@
-{"version":3,"names":["figma","Avatar","jsx","_jsx","connect","imports","props","appearance","enum","gray","transparent","size","sm","md","lg","xl","showNotification","boolean","true","false","example","src","alt"],"sourceRoot":"../../../../../src","sources":["lib/Components/Avatar/Avatar.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,MAAM,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAElCH,KAAK,CAACI,OAAO,CACXH,MAAM,EACN,qEAAqE,EACrE;EACEI,OAAO,EAAE,CAAC,qDAAqD,CAAC;EAChEC,KAAK,EAAE;IACLC,UAAU,EAAEP,KAAK,CAACQ,IAAI,CAAC,YAAY,EAAE;MACnCC,IAAI,EAAE,MAAM;MACZC,WAAW,EAAE;IACf,CAAC,CAAC;IACFC,IAAI,EAAEX,KAAK,CAACQ,IAAI,CAAC,MAAM,EAAE;MACvBI,EAAE,EAAE,IAAI;MACRC,EAAE,EAAE,IAAI;MACRC,EAAE,EAAE,IAAI;MACRC,EAAE,EAAE;IACN,CAAC,CAAC;IACFC,gBAAgB,EAAEhB,KAAK,CAACiB,OAAO,CAAC,mBAAmB,EAAE;MACnDC,IAAI,EAAE,IAAI;MACVC,KAAK,EAAE;IACT,CAAC;EACH,CAAC;EACDC,OAAO,EAAGd,KAAK,iBACbH,IAAA,CAACF,MAAM;IACLoB,GAAG,EAAC,2BAA2B;IAC/Bd,UAAU,EAAED,KAAK,CAACC,UAAW;IAC7BI,IAAI,EAAEL,KAAK,CAACK,IAAK;IACjBW,GAAG,EAAC,mBAAmB;IACvBN,gBAAgB,EAAEV,KAAK,CAACU;EAAiB,CAC1C;AAEL,CACF,CAAC","ignoreList":[]}
+{"version":3,"names":["figma","DotIndicator","getDotIndicatorProps","Avatar","jsx","_jsx","connect","imports","props","appearance","enum","gray","transparent","size","sm","md","lg","xl","showNotification","boolean","example","avatar","src","alt","children"],"sourceRoot":"../../../../../src","sources":["lib/Components/Avatar/Avatar.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,YAAY,EAAEC,oBAAoB,QAAQ,0BAAiB;AACpE,SAASC,MAAM,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAElCL,KAAK,CAACM,OAAO,CACXH,MAAM,EACN,qEAAqE,EACrE;EACEI,OAAO,EAAE,CACP,yFAAyF,CAC1F;EACDC,KAAK,EAAE;IACLC,UAAU,EAAET,KAAK,CAACU,IAAI,CAAC,YAAY,EAAE;MACnCC,IAAI,EAAE,MAAM;MACZC,WAAW,EAAE;IACf,CAAC,CAAC;IACFC,IAAI,EAAEb,KAAK,CAACU,IAAI,CAAC,MAAM,EAAE;MACvBI,EAAE,EAAE,IAAI;MACRC,EAAE,EAAE,IAAI;MACRC,EAAE,EAAE,IAAI;MACRC,EAAE,EAAE;IACN,CAAC,CAAC;IACFC,gBAAgB,EAAElB,KAAK,CAACmB,OAAO,CAAC,mBAAmB;EACrD,CAAC;EACDC,OAAO,EAAGZ,KAAK,IAAK;IAClB,MAAMa,MAAM,gBACVhB,IAAA,CAACF,MAAM;MACLmB,GAAG,EAAC,2BAA2B;MAC/Bb,UAAU,EAAED,KAAK,CAACC,UAAW;MAC7BI,IAAI,EAAEL,KAAK,CAACK,IAAK;MACjBU,GAAG,EAAC;IAAmB,CACxB,CACF;IAED,OAAOf,KAAK,CAACU,gBAAgB,KAC1BV,KAAK,CAACK,IAAI,KAAK,IAAI,IAAIL,KAAK,CAACK,IAAI,KAAK,IAAI,CAAC,gBAC5CR,IAAA,CAACJ,YAAY;MAAA,GAAKC,oBAAoB,CAAC,QAAQ,EAAEM,KAAK,CAACK,IAAI,CAAC;MAAAW,QAAA,EACzDH;IAAM,CACK,CAAC,GAEfA,MACD;EACH;AACF,CACF,CAAC","ignoreList":[]}

package/dist/module/lib/Components/Avatar/Avatar.js

@@ -1,11 +1,10 @@
 "use strict";
 
-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/index.js";
 import { useStyleSheet } from "../../../styles/index.js";
 import { User } from "../../Symbols/index.js";
-import { DotIndicator } from "../DotIndicator/index.js";
 import { Box } from "../Utility/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const fallbackSizes = {
@@ -14,10 +13,6 @@ const fallbackSizes = {
   lg: 32,
   xl: 40
 };
-const dotSizeMap = {
-  sm: 'lg',
-  md: 'xl'
-};
 const useStyles = ({
   appearance,
   size
@@ -78,9 +73,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,
@@ -89,8 +81,6 @@ export const Avatar = ({
   alt = 'avatar',
   appearance = 'transparent',
   size = 'md',
-  showNotification: showNotificationProp = false,
-  testID,
   ref,
   ...props
 }) => {
@@ -103,11 +93,7 @@ export const Avatar = ({
     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);
   }, [src]);
@@ -116,8 +102,7 @@ export const Avatar = ({
     lx: lx,
     style: StyleSheet.flatten([styles.root, style]),
     accessibilityRole: "image",
-    accessibilityLabel: accessibilityLabel,
-    testID: showNotification ? undefined : testID,
+    accessibilityLabel: resolvedAlt,
     ...props,
     children: shouldFallback ? /*#__PURE__*/_jsx(User, {
       size: fallbackSizes[size],
@@ -133,14 +118,6 @@ export const Avatar = ({
       testID: "avatar-image"
     })
   });
-  if (showNotification) {
-    return /*#__PURE__*/_jsx(DotIndicator, {
-      size: dotSizeMap[size],
-      appearance: "red",
-      testID: testID,
-      children: avatarContent
-    });
-  }
   return avatarContent;
 };
 //# sourceMappingURL=Avatar.js.map

package/dist/module/lib/Components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"names":["useState","useEffect","StyleSheet","Image","useCommonTranslation","useStyleSheet","User","DotIndicator","Box","jsx","_jsx","fallbackSizes","sm","md","lg","xl","dotSizeMap","useStyles","appearance","size","t","backgroundColors","gray","colors","bg","muted","transparent","mutedTransparent","sizeMap","sizes","s40","padding","spacings","s4","s48","s56","s72","root","position","width","height","borderRadius","backgroundColor","alignItems","justifyContent","image","overflow","Avatar","lx","style","src","alt","showNotification","showNotificationProp","testID","ref","props","error","setError","shouldFallback","styles","resolvedAlt","accessibilityLabel","avatarContent","flatten","accessibilityRole","undefined","children","accessible","source","uri","onError"],"sourceRoot":"../../../../../src","sources":["lib/Components/Avatar/Avatar.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useEffect","useState","Image","StyleSheet","useCommonTranslation","useStyleSheet","User","Box","jsx","_jsx","fallbackSizes","sm","md","lg","xl","useStyles","appearance","size","t","backgroundColors","gray","colors","bg","muted","transparent","mutedTransparent","sizeMap","sizes","s40","padding","spacings","s4","s48","s56","s72","root","position","width","height","borderRadius","backgroundColor","alignItems","justifyContent","image","overflow","Avatar","lx","style","src","alt","ref","props","error","setError","shouldFallback","styles","resolvedAlt","avatarContent","flatten","accessibilityRole","accessibilityLabel","children","accessible","testID","source","uri","onError"],"sourceRoot":"../../../../../src","sources":["lib/Components/Avatar/Avatar.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Components/Avatar/Avatar.mdx

@@ -2,8 +2,6 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as AvatarStories from './Avatar.stories';
 import { Avatar } from './Avatar';
 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/Avatar' of={AvatarStories} />
@@ -60,11 +58,22 @@ The Avatar component handles two primary states automatically:
 
 ### Notification Indicator
 
-An optional notification indicator can be displayed to show status or alerts:
+To show a status or alert dot, wrap the Avatar in a `DotIndicator` and derive the dot props from the avatar size with the `getDotIndicatorProps` helper:
 
-- **showNotification**: Boolean prop to toggle the notification dot (default: false)
+```tsx
+import { Avatar, DotIndicator, getDotIndicatorProps } from '@ledgerhq/lumen-ui-rnative';
+
+<DotIndicator
+  {...getDotIndicatorProps('avatar', 'md')}
+  accessibilityLabel="New notifications"
+>
+  <Avatar src="https://example.com/photo.jpg" size="md" />
+</DotIndicator>;
+```
+
+> The notification dot is only supported on the `sm` and `md` sizes.
 
-> The notification dot is only rendered on the `sm` and `md` sizes. It is suppressed on `lg` and `xl` even when `showNotification` is `true`.
+> When the dot conveys state to the user, pass an `accessibilityLabel` to `DotIndicator`.
 
 <Canvas of={AvatarStories.NotificationShowcase} />
 
@@ -116,21 +125,23 @@ function MyComponent() {
 
 ### With Notification
 
-Display a notification indicator to show status or alerts:
+Wrap the Avatar in a `DotIndicator` to show a status or alert dot, using `getDotIndicatorProps` to match the dot to the avatar size:
 
 ```tsx
-import { Avatar } from '@ledgerhq/lumen-ui-rnative';
+import { Avatar, DotIndicator, getDotIndicatorProps } from '@ledgerhq/lumen-ui-rnative';
 
 function MyComponent() {
-  const hasNotifications = true;
-  
   return (
-    <Avatar 
-      src="https://example.com/photo.jpg" 
-      showNotification={hasNotifications}
-      size="md" 
-      alt="User profile"
-    />
+    <DotIndicator
+      {...getDotIndicatorProps('avatar', 'md')}
+      accessibilityLabel="New notifications"
+    >
+      <Avatar
+        src="https://example.com/photo.jpg"
+        size="md"
+        alt="User profile"
+      />
+    </DotIndicator>
   );
 }
 ```
@@ -159,7 +170,7 @@ function MyComponent() {
 Avatars are commonly used as interactive triggers for navigation or actions. Wrap the Avatar in a `Pressable` component:
 
 ```tsx
-import { Avatar } from '@ledgerhq/lumen-ui-rnative';
+import { Avatar, DotIndicator, getDotIndicatorProps } from '@ledgerhq/lumen-ui-rnative';
 import { Pressable, Linking } from 'react-native';
 
 function UserProfile() {
@@ -177,12 +188,12 @@ function UserProfile() {
         backgroundColor: pressed ? 'rgba(0, 0, 0, 0.05)' : 'transparent',
       })}
     >
-      <Avatar 
-        src="https://example.com/photo.jpg"
-        size="md" 
-        alt="User menu" 
-        showNotification 
-      />
+      <DotIndicator
+        {...getDotIndicatorProps('avatar', 'md')}
+        accessibilityLabel="New notifications"
+      >
+        <Avatar src="https://example.com/photo.jpg" size="md" alt="User menu" />
+      </DotIndicator>
     </Pressable>
   );
 }
@@ -193,6 +204,7 @@ function UserProfile() {
 - Use `borderRadius: 9999` to maintain circular touch area
 - Add opacity changes for visual feedback on press
 - Provide appropriate `alt` text for accessibility
+- Pass an `accessibilityLabel` to `DotIndicator` so the notification state is announced by screen readers
 
 ### Custom Styling
 
@@ -221,7 +233,7 @@ You can also use the `style` prop for escape-hatch styling when needed:
 Here's a comprehensive example showing all Avatar features in a user profile context:
 
 ```tsx
-import { Avatar, Box, Text } from '@ledgerhq/lumen-ui-rnative';
+import { Avatar, Box, Text, DotIndicator, getDotIndicatorProps } from '@ledgerhq/lumen-ui-rnative';
 import { Pressable } from 'react-native';
 import { useState } from 'react';
 
@@ -237,6 +249,14 @@ function UserProfileHeader() {
     // Navigate to profile or show menu
   };
 
+  const avatar = (
+    <Avatar
+      src={user.avatar}
+      size="md"
+      alt={`${user.name} profile picture`}
+    />
+  );
+
   return (
     <Box lx={{ flexDirection: 'row', alignItems: 'center', gap: 's12', padding: 's16' }}>
       <Pressable
@@ -247,12 +267,16 @@ function UserProfileHeader() {
           backgroundColor: pressed ? 'rgba(0, 0, 0, 0.05)' : 'transparent',
         })}
       >
-        <Avatar
-          src={user.avatar}
-          size="md"
-          showNotification={user.hasNotifications}
-          alt={`${user.name} profile picture`}
-        />
+        {user.hasNotifications ? (
+          <DotIndicator
+            {...getDotIndicatorProps('avatar', 'md')}
+            accessibilityLabel="You have new notifications"
+          >
+            {avatar}
+          </DotIndicator>
+        ) : (
+          avatar
+        )}
       </Pressable>
       <Box lx={{ flexDirection: 'column' }}>
         <Text>{user.name}</Text>
@@ -267,46 +291,6 @@ function UserProfileHeader() {
 }
 ```
 
-## Do's and Don'ts
-
-The following guidelines ensure consistent usage of the Avatar component and maintain design system principles.
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Provide descriptive alt text'
-      description='Use meaningful alt text for better accessibility and screen reader support'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Avatar 
-  src="https://example.com/photo.jpg" 
-  alt="John Doe profile picture" 
-  size="md"
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't omit alt text"
-      description='Missing alt text reduces accessibility for screen reader users'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<Avatar 
-  src="https://example.com/photo.jpg" 
-  size="md"
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 ## Platform Considerations