feat: account list select component (#3287)

reown-com · Nov 21, 2024 · 4417c7b · 4417c7b
1 parent ac1845e
commit 4417c7b
Show file tree

Hide file tree

Showing 18 changed files with 329 additions and 288 deletions.
diff --git a/apps/gallery-new/stories/composites/wui-list-address.stories.ts b/apps/gallery-new/stories/composites/wui-list-address.stories.ts
diff --git a/apps/gallery-new/stories/composites/wui-list-select-account.stories.ts b/apps/gallery-new/stories/composites/wui-list-select-account.stories.ts
@@ -0,0 +1,57 @@
+import { html } from 'lit'
+import type { Meta } from '@storybook/web-components'
+import '@reown/appkit-ui-new/src/composites/wui-list-select-account'
+import '../../components/gallery-container'
+import type { WuiListSelectAccount } from '@reown/appkit-ui-new'
+import { iconOptions } from '../../utils/PresetUtils'
+
+type Component = Meta<WuiListSelectAccount>
+
+export default {
+  title: 'Composites/wui-list-select-account',
+  args: {
+    amount: 1740.72,
+    currency: 'USD',
+    address: '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045',
+    description: 'Email',
+    icon: 'mail',
+    disabled: false
+  },
+  argTypes: {
+    amount: {
+      control: { type: 'number' }
+    },
+    currency: {
+      options: ['USD', 'EUR', 'GBP'],
+      control: { type: 'select' }
+    },
+    address: {
+      control: { type: 'text' }
+    },
+    description: {
+      control: { type: 'text' }
+    },
+    icon: {
+      options: iconOptions,
+      control: { type: 'select' }
+    },
+    disabled: {
+      control: { type: 'boolean' }
+    }
+  }
+} as Component
+
+export const Default: Component = {
+  render: args => html`
+    <gallery-container width="328">
+      <wui-list-select-account
+        amount=${args.amount}
+        currency=${args.currency}
+        address=${args.address}
+        description=${args.description}
+        icon=${args.icon}
+        ?disabled=${args.disabled}
+      ></wui-list-select-account>
+    </gallery-container>
+  `
+}
diff --git a/packages/ui-new/index.ts b/packages/ui-new/index.ts
@@ -73,7 +73,7 @@ export * from './src/composites/wui-list-description/index.js'
 export * from './src/composites/wui-input-amount/index.js'
 export * from './src/composites/wui-token-button/index.js'
 export * from './src/composites/wui-preview-item/index.js'
-export * from './src/composites/wui-list-account/index.js'
+export * from './src/composites/wui-list-select-account/index.js'
 export * from './src/composites/wui-icon-button/index.js'
 export * from './src/composites/wui-list-button/index.js'
 export * from './src/composites/wui-list-social/index.js'

diff --git a/packages/ui-new/src/assets/svg/mail.ts b/packages/ui-new/src/assets/svg/mail.ts
@@ -1,10 +1,6 @@
 import { svg } from 'lit'
 
-export const mailSvg = svg`<svg fill="none" viewBox="0 0 16 16">
-  <path
-    fill="currentColor"
-    fill-rule="evenodd"
-    d="M4.83 1.34h6.34c.68 0 1.26 0 1.73.04.5.05.97.15 1.42.4.52.3.95.72 1.24 1.24.26.45.35.92.4 1.42.04.47.04 1.05.04 1.73v3.71c0 .69 0 1.26-.04 1.74-.05.5-.14.97-.4 1.41-.3.52-.72.95-1.24 1.25-.45.25-.92.35-1.42.4-.47.03-1.05.03-1.73.03H4.83c-.68 0-1.26 0-1.73-.04-.5-.04-.97-.14-1.42-.4-.52-.29-.95-.72-1.24-1.24a3.39 3.39 0 0 1-.4-1.41A20.9 20.9 0 0 1 0 9.88v-3.7c0-.7 0-1.27.04-1.74.05-.5.14-.97.4-1.42.3-.52.72-.95 1.24-1.24.45-.25.92-.35 1.42-.4.47-.04 1.05-.04 1.73-.04ZM3.28 3.38c-.36.03-.51.08-.6.14-.21.11-.39.29-.5.5a.8.8 0 0 0-.08.19l5.16 3.44c.45.3 1.03.3 1.48 0L13.9 4.2a.79.79 0 0 0-.08-.2c-.11-.2-.29-.38-.5-.5-.09-.05-.24-.1-.6-.13-.37-.04-.86-.04-1.6-.04H4.88c-.73 0-1.22 0-1.6.04ZM14 6.54 9.85 9.31a3.33 3.33 0 0 1-3.7 0L2 6.54v3.3c0 .74 0 1.22.03 1.6.04.36.1.5.15.6.11.2.29.38.5.5.09.05.24.1.6.14.37.03.86.03 1.6.03h6.25c.73 0 1.22 0 1.6-.03.35-.03.5-.09.6-.14.2-.12.38-.3.5-.5.05-.1.1-.24.14-.6.03-.38.03-.86.03-1.6v-3.3Z"
-    clip-rule="evenodd"
-  />
-</svg>`
+export const mailSvg = svg`<svg viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5 2.75H1.5C1.40054 2.75 1.30516 2.78951 1.23483 2.85984C1.16451 2.93016 1.125 3.02554 1.125 3.125V9.5C1.125 9.69891 1.20402 9.88968 1.34467 10.0303C1.48532 10.171 1.67609 10.25 1.875 10.25H10.125C10.3239 10.25 10.5147 10.171 10.6553 10.0303C10.796 9.88968 10.875 9.69891 10.875 9.5V3.125C10.875 3.02554 10.8355 2.93016 10.7652 2.85984C10.6948 2.78951 10.5995 2.75 10.5 2.75ZM10.125 9.5H1.875V3.97766L5.74641 7.52656C5.81559 7.59007 5.90609 7.62531 6 7.62531C6.09391 7.62531 6.18441 7.59007 6.25359 7.52656L10.125 3.97766V9.5Z" fill="currentColor"/>
+</svg>
+`
diff --git a/packages/ui-new/src/components/wui-shimmer/index.ts b/packages/ui-new/src/components/wui-shimmer/index.ts
@@ -16,7 +16,7 @@ export class WuiShimmer extends LitElement {
 
   @property() public height = ''
 
-  @property() public borderRadius: BorderRadiusType = 'm'
+  @property() public borderRadius: BorderRadiusType = '2'
 
   @property() public variant: Variant = 'default'
 

diff --git a/packages/ui-new/src/components/wui-text/styles.ts b/packages/ui-new/src/components/wui-text/styles.ts
@@ -9,10 +9,6 @@ export default css`
     width: 100%;
     display: inline-block;
     font-style: normal;
-    font-feature-settings:
-      'tnum' on,
-      'lnum' on,
-      'case' on;
     overflow: inherit;
     text-overflow: inherit;
     text-align: var(--local-align);
@@ -48,6 +44,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['h1-regular'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.regular};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-h1-medium {
@@ -56,6 +55,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['h1-medium'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.medium};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-h2-regular-mono {
@@ -72,6 +74,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['h2-regular'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.regular};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-h2-medium {
@@ -80,6 +85,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['h2-medium'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.medium};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-h3-regular-mono {
@@ -96,6 +104,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['h3-regular'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.regular};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-h3-medium {
@@ -104,6 +115,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['h3-medium'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.medium};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-h4-regular-mono {
@@ -120,6 +134,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['h4-regular'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.regular};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-h4-medium {
@@ -128,6 +145,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['h4-medium'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.medium};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-h5-regular-mono {
@@ -144,6 +164,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['h5-regular'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.regular};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-h5-medium {
@@ -152,6 +175,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['h5-medium'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.medium};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-h6-regular-mono {
@@ -168,6 +194,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['h6-regular'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.regular};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-h6-medium {
@@ -176,6 +205,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['h6-medium'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.medium};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-lg-regular-mono {
@@ -192,6 +224,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['lg-regular'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.regular};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-lg-medium {
@@ -200,6 +235,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['lg-medium'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.medium};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-md-regular-mono {
@@ -216,6 +254,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['md-regular'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.regular};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-md-medium {
@@ -224,6 +265,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['md-medium'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.medium};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-sm-regular-mono {
@@ -240,6 +284,9 @@ export default css`
     letter-spacing: ${({ typography }) => typography['sm-regular'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.regular};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 
   .wui-font-sm-medium {
@@ -248,5 +295,8 @@ export default css`
     letter-spacing: ${({ typography }) => typography['sm-medium'].letterSpacing};
     font-weight: ${({ fontWeight }) => fontWeight.medium};
     font-family: ${({ fontFamily }) => fontFamily.regular};
+    font-feature-settings:
+      'liga' off,
+      'clig' off;
   }
 `
diff --git a/packages/ui-new/src/composites/wui-avatar/styles.ts b/packages/ui-new/src/composites/wui-avatar/styles.ts
@@ -6,7 +6,6 @@ export default css`
     width: var(--local-width);
     height: var(--local-height);
     border-radius: var(--wui-border-radius-3xl);
-    box-shadow: 0 0 0 8px var(--wui-color-gray-glass-005);
     overflow: hidden;
     position: relative;
   }
@@ -19,38 +18,7 @@ export default css`
     --mixed-local-color-5: var(--local-color-5);
   }
 
-  @supports (background: color-mix(in srgb, white 50%, black)) {
-    :host([data-variant='generated']) {
-      --mixed-local-color-1: color-mix(
-        in srgb,
-        var(--w3m-color-mix) var(--w3m-color-mix-strength),
-        var(--local-color-1)
-      );
-      --mixed-local-color-2: color-mix(
-        in srgb,
-        var(--w3m-color-mix) var(--w3m-color-mix-strength),
-        var(--local-color-2)
-      );
-      --mixed-local-color-3: color-mix(
-        in srgb,
-        var(--w3m-color-mix) var(--w3m-color-mix-strength),
-        var(--local-color-3)
-      );
-      --mixed-local-color-4: color-mix(
-        in srgb,
-        var(--w3m-color-mix) var(--w3m-color-mix-strength),
-        var(--local-color-4)
-      );
-      --mixed-local-color-5: color-mix(
-        in srgb,
-        var(--w3m-color-mix) var(--w3m-color-mix-strength),
-        var(--local-color-5)
-      );
-    }
-  }
-
   :host([data-variant='generated']) {
-    box-shadow: 0 0 0 8px var(--wui-color-gray-glass-005);
     background: radial-gradient(
       var(--local-radial-circle),
       #fff 0.52%,
@@ -63,7 +31,6 @@ export default css`
   }
 
   :host([data-variant='default']) {
-    box-shadow: 0 0 0 8px var(--wui-color-gray-glass-005);
     background: radial-gradient(
       75.29% 75.29% at 64.96% 24.36%,
       #fff 0.52%,

diff --git a/packages/ui-new/src/composites/wui-button/index.ts b/packages/ui-new/src/composites/wui-button/index.ts
@@ -4,7 +4,7 @@ import '../../components/wui-icon/index.js'
 import '../../components/wui-loading-spinner/index.js'
 import '../../components/wui-text/index.js'
 import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js'
-import type { BorderRadiusType, ButtonSize, ButtonVariant, TextType } from '../../utils/TypeUtil.js'
+import type { ButtonSize, ButtonVariant, TextType } from '../../utils/TypeUtil.js'
 import { customElement } from '../../utils/WebComponentsUtil.js'
 import styles from './styles.js'
 
@@ -39,8 +39,6 @@ export class WuiButton extends LitElement {
 
   @property() public variant: ButtonVariant = 'accent-primary'
 
-  @property() public borderRadius: Exclude<BorderRadiusType, 'inherit' | 'xxs'> = 'm'
-
   @property() public textVariant?: TextType
 
   // -- Render -------------------------------------------- //