@ledgerhq/lumen-ui-rnative 0.1.24 → 0.1.25

package/src/lib/Components/DotSymbol/DotSymbol.stories.tsx

@@ -32,8 +32,12 @@ export const Base: Story = {
     pin: 'bottom-end',
     size: 20,
     shape: 'circle',
-    children: <MediaImage src={parentSrc} alt='Cardano' shape='circle' />,
   },
+  render: (args) => (
+    <DotSymbol {...args}>
+      <MediaImage src={parentSrc} alt='Cardano' shape={args.shape} />
+    </DotSymbol>
+  ),
 };
 
 export const PinShowcase: Story = {
@@ -135,6 +139,13 @@ export const SizeShowcase: Story = {
         >
           <MediaImage src={parentSrc} size={56} shape='circle' />
         </DotSymbol>
+        <DotSymbol
+          src={dotSrc}
+          size={mediaImageDotSizeMap[64]}
+          pin='bottom-end'
+        >
+          <MediaImage src={parentSrc} size={64} shape='circle' />
+        </DotSymbol>
       </Box>
       <Box lx={{ flexDirection: 'row', alignItems: 'flex-end', gap: 's24' }}>
         <DotSymbol
@@ -143,7 +154,7 @@ export const SizeShowcase: Story = {
           size={mediaImageDotSizeMap[20]}
           pin='bottom-end'
         >
-          <MediaImage src={parentSrc} size={20} shape='circle' />
+          <MediaImage src={parentSrc} size={20} shape='square' />
         </DotSymbol>
         <DotSymbol
           shape='square'
@@ -151,7 +162,7 @@ export const SizeShowcase: Story = {
           size={mediaImageDotSizeMap[24]}
           pin='bottom-end'
         >
-          <MediaImage src={parentSrc} size={24} shape='circle' />
+          <MediaImage src={parentSrc} size={24} shape='square' />
         </DotSymbol>
         <DotSymbol
           shape='square'
@@ -159,7 +170,7 @@ export const SizeShowcase: Story = {
           size={mediaImageDotSizeMap[32]}
           pin='bottom-end'
         >
-          <MediaImage src={parentSrc} size={32} shape='circle' />
+          <MediaImage src={parentSrc} size={32} shape='square' />
         </DotSymbol>
         <DotSymbol
           shape='square'
@@ -167,7 +178,7 @@ export const SizeShowcase: Story = {
           size={mediaImageDotSizeMap[40]}
           pin='bottom-end'
         >
-          <MediaImage src={parentSrc} size={40} shape='circle' />
+          <MediaImage src={parentSrc} size={40} shape='square' />
         </DotSymbol>
         <DotSymbol
           shape='square'
@@ -175,7 +186,7 @@ export const SizeShowcase: Story = {
           size={mediaImageDotSizeMap[48]}
           pin='bottom-end'
         >
-          <MediaImage src={parentSrc} size={48} shape='circle' />
+          <MediaImage src={parentSrc} size={48} shape='square' />
         </DotSymbol>
         <DotSymbol
           shape='square'
@@ -183,7 +194,15 @@ export const SizeShowcase: Story = {
           size={mediaImageDotSizeMap[56]}
           pin='bottom-end'
         >
-          <MediaImage src={parentSrc} size={56} shape='circle' />
+          <MediaImage src={parentSrc} size={56} shape='square' />
+        </DotSymbol>
+        <DotSymbol
+          shape='square'
+          src={dotSrc}
+          size={mediaImageDotSizeMap[64]}
+          pin='bottom-end'
+        >
+          <MediaImage src={parentSrc} size={64} shape='square' />
         </DotSymbol>
       </Box>
     </Box>

package/src/lib/Components/DotSymbol/DotSymbol.tsx

@@ -6,15 +6,13 @@ import type { SpotSize } from '../Spot';
 import { Box } from '../Utility';
 import type { DotSymbolPin, DotSymbolProps, DotSymbolSize } from './types';
 
-type BorderRadiusKey = 'xs' | 'sm' | 'md' | 'lg' | 'full';
-
-const shapeRadiusMap: Record<DotSymbolSize, BorderRadiusKey> = {
-  8: 'xs',
-  10: 'xs',
-  12: 'xs',
-  16: 'sm',
-  20: 'sm',
-  24: 'md',
+const dotSquareRadiusMap: Record<DotSymbolSize, number> = {
+  8: 2,
+  10: 3,
+  12: 4,
+  16: 5,
+  20: 6,
+  24: 8,
 };
 
 const offsetBySize: Record<DotSymbolSize, number> = {
@@ -35,6 +33,7 @@ export const mediaImageDotSizeMap: Record<MediaImageSize, DotSymbolSize> = {
   40: 16,
   48: 20,
   56: 24,
+  64: 24,
 };
 
 export const spotDotSizeMap: Record<SpotSize, DotSymbolSize> = {
@@ -75,9 +74,7 @@ const useStyles = ({
     (t) => {
       const sizeValue = t.sizes[`s${size}` as keyof typeof t.sizes] as number;
       const radius =
-        shape === 'circle'
-          ? t.borderRadius.full
-          : t.borderRadius[shapeRadiusMap[size]];
+        shape === 'circle' ? t.borderRadius.full : dotSquareRadiusMap[size];
       const pinOffset = getPinOffset(pin, size);
 
       return {
@@ -142,17 +139,19 @@ export const DotSymbol = ({
       accessibilityLabel={alt}
       {...rest}
     >
-      {children}
-      <Box style={styles.dot}>
-        {!error && (
-          <Image
-            source={{ uri: src }}
-            style={styles.image}
-            accessible={false}
-            onError={() => setError(true)}
-            testID='dot-symbol-img'
-          />
-        )}
+      <Box style={{ alignSelf: 'flex-start', position: 'relative' }}>
+        {children}
+        <Box style={styles.dot}>
+          {!error && (
+            <Image
+              source={{ uri: src }}
+              style={styles.image}
+              accessible={false}
+              onError={() => setError(true)}
+              testID='dot-symbol-img'
+            />
+          )}
+        </Box>
       </Box>
     </Box>
   );

package/src/lib/Components/MediaImage/MediaImage.stories.tsx

@@ -41,6 +41,7 @@ export const SizeShowcase: Story = {
       <MediaImage src={exampleSrc} alt='Size 40' size={40} />
       <MediaImage src={exampleSrc} alt='Size 48' size={48} />
       <MediaImage src={exampleSrc} alt='Size 56' size={56} />
+      <MediaImage src={exampleSrc} alt='Size 64' size={64} />
     </Box>
   ),
 };

package/src/lib/Components/MediaImage/MediaImage.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useState } from 'react';
 import { Image, StyleSheet } from 'react-native';
 import { useStyleSheet } from '../../../styles';
+import type { LumenStyleSheetTheme } from '../../../styles';
 import { Box } from '../Utility';
 import type { MediaImageProps, MediaImageSize, MediaImageShape } from './types';
 
-type BorderRadiusKey = 'xs' | 'sm' | 'md' | 'lg' | 'full';
+type BorderRadiusKey = keyof LumenStyleSheetTheme['borderRadius'];
 
 const borderRadiusMap: Record<MediaImageSize, BorderRadiusKey> = {
   12: 'xs',
@@ -15,6 +16,7 @@ const borderRadiusMap: Record<MediaImageSize, BorderRadiusKey> = {
   40: 'md',
   48: 'md',
   56: 'lg',
+  64: 'lg',
 };
 
 const useStyles = ({

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

@@ -1,6 +1,6 @@
 import type { StyledViewProps } from '../../../styles';
 
-export type MediaImageSize = 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56;
+export type MediaImageSize = 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64;
 
 export type MediaImageShape = 'square' | 'circle';
 

package/src/lib/Components/Spinner/Spinner.tsx

@@ -1,3 +1,4 @@
+import { StyleSheet } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { useCommonTranslation } from '../../../i18n';
 import type { LumenTextStyle } from '../../../styles';
@@ -24,17 +25,20 @@ export const Spinner = ({
   lx = {},
   size = 16,
   color,
+  style,
   ref,
   ...props
 }: SpinnerProps) => {
   const { t } = useCommonTranslation();
   const { theme } = useTheme();
   const resolvedColorStyle = useResolveTextStyle({ color } as LumenTextStyle);
+  const flatStyle = StyleSheet.flatten(style);
+  const styleColor = flatStyle?.color;
   const strokeColor =
-    resolvedColorStyle?.color ?? color ?? theme.colors.text.base;
+    resolvedColorStyle?.color ?? color ?? styleColor ?? theme.colors.text.base;
 
   return (
-    <Box ref={ref} lx={{ flexShrink: 0, ...lx }} {...props}>
+    <Box ref={ref} lx={{ flexShrink: 0, ...lx }} style={style} {...props}>
       <Spin>
         <Svg
           width={size}

package/src/lib/Components/Tag/Tag.stories.tsx

@@ -9,7 +9,15 @@ const meta: Meta<typeof Tag> = {
   argTypes: {
     appearance: {
       control: 'select',
-      options: ['base', 'gray', 'accent', 'success', 'error', 'warning'],
+      options: [
+        'base',
+        'gray',
+        'accent',
+        'accent-subtle',
+        'success',
+        'error',
+        'warning',
+      ],
     },
     size: {
       control: 'radio',
@@ -47,6 +55,7 @@ export const AppearanceShowcase: Story = {
         <Tag appearance='base' label='Base' />
         <Tag appearance='gray' label='Gray' />
         <Tag appearance='accent' label='Accent' />
+        <Tag appearance='accent-subtle' label='Accent subtle' />
         <Tag appearance='success' label='Success' />
         <Tag appearance='error' label='Error' />
         <Tag appearance='warning' label='Warning' />
@@ -56,6 +65,7 @@ export const AppearanceShowcase: Story = {
         <Tag appearance='base' label='Base' icon={Check} />
         <Tag appearance='gray' label='Gray' icon={Check} />
         <Tag appearance='accent' label='Accent' icon={Check} />
+        <Tag appearance='accent-subtle' label='Accent subtle' icon={Check} />
         <Tag appearance='success' label='Success' icon={Check} />
         <Tag appearance='error' label='Error' icon={Check} />
         <Tag appearance='warning' label='Warning' icon={Check} />

package/src/lib/Components/Tag/Tag.tsx

@@ -23,6 +23,7 @@ const useStyles = ({
         base: t.colors.bg.mutedTransparent,
         gray: t.colors.bg.mutedTransparent,
         accent: t.colors.bg.accent,
+        'accent-subtle': t.colors.bg.activeSubtle,
         success: t.colors.bg.success,
         error: t.colors.bg.error,
         warning: t.colors.bg.warning,
@@ -32,6 +33,7 @@ const useStyles = ({
         base: t.colors.text.base,
         gray: t.colors.text.muted,
         accent: t.colors.text.onAccent,
+        'accent-subtle': t.colors.text.active,
         success: t.colors.text.success,
         error: t.colors.text.error,
         warning: t.colors.text.warning,

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

@@ -6,7 +6,14 @@ export type TagProps = {
   /**
    * The appearance of the tag.
    */
-  appearance?: 'base' | 'gray' | 'accent' | 'success' | 'error' | 'warning';
+  appearance?:
+    | 'base'
+    | 'gray'
+    | 'accent'
+    | 'accent-subtle'
+    | 'success'
+    | 'error'
+    | 'warning';
   /**
    * The icon of the tag.
    */

package/src/lib/Components/index.ts

@@ -10,6 +10,7 @@ export * from './CardButton';
 export * from './ContentBanner';
 export * from './Checkbox';
 export * from './Divider';
+export * from './DotIcon';
 export * from './DotSymbol';
 export * from './Icon';
 export * from './IconButton';