feat(lumen): Add new 72 size

Author: aammami-ledger

lib/__mocks__/lumen-ui-react.tsx

@@ -52,6 +52,7 @@ export const mediaImageDotSizeMap = {
   48: 20,
   56: 24,
   64: 24,
+  72: 32,
 } as const;
 
 export const Skeleton = (props: SkeletonProps) => <div data-testid="skeleton" {...props} />;
@@ -79,4 +80,5 @@ export const mediaImageDotIconSizeMap = {
   48: 20,
   56: 24,
   64: 24,
+  72: 32,
 } as const;

lib/__mocks__/lumen-ui-rnative.tsx

@@ -38,6 +38,7 @@ export const mediaImageDotSizeMap = {
   48: 20,
   56: 24,
   64: 24,
+  72: 32,
 } as const;
 
 export const Skeleton = (_props: SkeletonProps) => <div data-testid="skeleton" />;
@@ -67,4 +68,5 @@ export const mediaImageDotIconSizeMap = {
   48: 20,
   56: 24,
   64: 24,
+  72: 32,
 } as const;

lib/__stories__/CryptoIcon.stories.tsx

@@ -25,7 +25,7 @@ const meta: Meta<typeof CryptoIcon> = {
     },
     size: {
       control: 'select',
-      options: [12, 16, 20, 24, 32, 40, 48, 56, 64],
+      options: [12, 16, 20, 24, 32, 40, 48, 56, 64, 72],
     },
     shape: {
       control: 'radio',
@@ -56,7 +56,7 @@ export const Base: Story = {
 export const SizeShowcase: Story = {
   render: () => (
     <div className="flex gap-4 items-end">
-      {([12, 16, 20, 24, 32, 40, 48, 56, 64] as const).map((s) => (
+      {([12, 16, 20, 24, 32, 40, 48, 56, 64, 72] as const).map((s) => (
         <div key={s} className="flex flex-col items-center gap-2">
           <CryptoIcon ledgerId="bitcoin" ticker="BTC" size={s} />
           <span style={{ fontSize: 10, color: '#888' }}>{s}</span>
@@ -153,7 +153,7 @@ export const FallbackShowcase: Story = {
   render: () => (
     <div className="flex flex-col gap-8">
       <div className="flex gap-4 items-end">
-        {([12, 16, 20, 24, 32, 40, 48, 56, 64] as const).map((s) => (
+        {([12, 16, 20, 24, 32, 40, 48, 56, 64, 72] as const).map((s) => (
           <div key={s} className="flex flex-col items-center gap-2">
             <CryptoIcon ledgerId="not_a_real_coin" ticker="BTC" size={s} />
             <span style={{ fontSize: 10, color: '#888' }}>{s}</span>

lib/__stories__/CryptoIconList.stories.tsx

@@ -284,7 +284,7 @@ SingleLedgerIcon.argTypes = {
   ticker: { control: 'text', description: 'The ticker of the icon to display' },
   size: {
     control: 'select',
-    options: [12, 16, 20, 24, 32, 40, 48, 56, 64],
+    options: [12, 16, 20, 24, 32, 40, 48, 56, 64, 72],
     description: 'The size of the icon',
     defaultValue: 56,
   },

lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/crypto-icons",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "Crypto icons by Ledger",
   "license": "MIT",
   "repository": {
@@ -49,8 +49,8 @@
   },
   "devDependencies": {
     "@ledgerhq/lumen-design-core": "^0.1.13",
-    "@ledgerhq/lumen-ui-react": "^0.1.36",
-    "@ledgerhq/lumen-ui-rnative": "^0.1.37",
+    "@ledgerhq/lumen-ui-react": "^0.1.37",
+    "@ledgerhq/lumen-ui-rnative": "^0.1.38",
     "@ledgerhq/wallet-api-client": "^1.5.9",
     "@storybook/addon-controls": "8.2.6",
     "@storybook/addon-essentials": "8.2.6",
@@ -100,8 +100,8 @@
   },
   "peerDependencies": {
     "@ledgerhq/lumen-design-core": ">=0.1.13",
-    "@ledgerhq/lumen-ui-react": ">=0.1.36",
-    "@ledgerhq/lumen-ui-rnative": ">=0.1.37",
+    "@ledgerhq/lumen-ui-react": ">=0.1.37",
+    "@ledgerhq/lumen-ui-rnative": ">=0.1.38",
     "react": ">=18",
     "react-dom": ">=18",
     "react-native": ">=0.70"