:feat social login - 1 - UI

apps/gallery/stories/composites/wui-list-button.stories.ts

@@ -0,0 +1,21 @@
+import type { Meta } from '@storybook/web-components'
+import '@web3modal/ui/src/composites/wui-list-button'
+import { html } from 'lit'
+import '../../components/gallery-container'
+import type { WuiListButton } from '@web3modal/ui'
+
+type Component = Meta<WuiListButton>
+
+export default {
+  title: 'Composites/wui-list-button',
+  args: {
+    text: 'Continue with a wallet'
+  }
+} as Component
+
+export const Default: Component = {
+  render: args =>
+    html` <gallery-container width="336">
+      <wui-list-button text=${args.text}></wui-list-button>
+    </gallery-container>`
+}

apps/gallery/stories/composites/wui-list-social.stories.ts

@@ -0,0 +1,30 @@
+import type { Meta } from '@storybook/web-components'
+import '@web3modal/ui/src/composites/wui-list-social'
+import { html } from 'lit'
+import '../../components/gallery-container'
+
+import type { WuiListSocial } from '@web3modal/ui'
+
+type Component = Meta<WuiListSocial>
+
+export default {
+  title: 'Composites/wui-list-social',
+  args: {
+    name: 'google',
+    logo: 'google',
+    align: 'left'
+  },
+  argTypes: {
+    align: {
+      options: ['left', 'center'],
+      control: { type: 'select' }
+    }
+  }
+} as Component
+
+export const Default: Component = {
+  render: args =>
+    html` <gallery-container width="336">
+      <wui-list-social align=${args.align} logo=${args.logo} name=${args.name}></wui-list-social>
+    </gallery-container>`
+}

apps/gallery/stories/composites/wui-logo-select.stories.ts

@@ -2,6 +2,7 @@ import type { Meta } from '@storybook/web-components'
 import '@web3modal/ui/src/composites/wui-logo-select'
 import type { WuiLogoSelect } from '@web3modal/ui/src/composites/wui-logo-select'
 import { html } from 'lit'
+import '../../components/gallery-container'
 import { logoOptions } from '../../utils/PresetUtils'
 
 type Component = Meta<WuiLogoSelect>
@@ -26,5 +27,7 @@ export default {
 
 export const Default: Component = {
   render: args =>
-    html`<wui-logo-select ?disabled=${args.disabled} logo=${args.logo}></wui-logo-select>`
+    html`<gallery-container width="60"
+      ><wui-logo-select ?disabled=${args.disabled} logo=${args.logo}></wui-logo-select>
+    </gallery-container>`
 }

dangerfile.ts

@@ -120,8 +120,8 @@ async function checkUiPackage() {
 
   const ui_index = modified_files.find(f => f.includes('ui/index.ts'))
   const ui_index_diff = ui_index ? await diffForFile(ui_index) : undefined
-  const jsx_index = modified_files.find(f => f.includes('ui/utils/JSXTypesUtil.ts'))
-  const jsx_index_diff = jsx_index ? await diffForFile(jsx_index) : undefined
+  const types_util_index = modified_files.find(f => f.includes('ui/src/utils/JSXTypeUtil.ts'))
+  const types_util_diff = types_util_index ? await diffForFile(types_util_index) : undefined
   const created_ui_components_index_ts = created_ui_components.filter(f => f.endsWith('index.ts'))
   const created_ui_composites_index_ts = created_ui_composites.filter(f => f.endsWith('index.ts'))
   const deleted_ui_composites_index_ts = deleted_ui_composites.filter(f => f.endsWith('index.ts'))
@@ -135,30 +135,31 @@ async function checkUiPackage() {
     fail('New components were added, but not exported in ui/index.ts')
   }
 
-  if (created_ui_composites_index_ts.length !== deleted_ui_composites_index_ts.length) {
-    fail('Number of created composites does not match number of deleted composites')
+  if (is_new_composites_added && !types_util_diff) {
+    fail('New composites were added, but JSXTypeUtil.ts is not modified')
   }
-  if (is_new_composites_added && !ui_index_diff?.added.includes('src/composites')) {
+
+  if (is_new_composites_added && !types_util_diff?.added.includes('../composites')) {
     fail('New composites were added, but not exported in ui/index.ts')
   }
 
   if (created_ui_layout_index_ts.length && !ui_index_diff?.added.includes('src/layout')) {
     fail('New layout components were added, but not exported in ui/index.ts')
   }
 
-  if (created_ui_components_index_ts.length && !jsx_index_diff?.added.includes('../components')) {
+  if (created_ui_components_index_ts.length && !types_util_diff?.added.includes('../components')) {
     fail(
       `New components were added, but not exported in ui/utils/JSXTypeUtil.ts: ${created_ui_components.join(
         ', '
       )}`
     )
   }
 
-  if (is_new_composites_added && !jsx_index_diff?.added.includes('../composites')) {
+  if (is_new_composites_added && !types_util_diff?.added.includes('../composites')) {
     fail('New composites were added, but not exported in ui/utils/JSXTypeUtil.ts')
   }
 
-  if (is_new_layout_added && !jsx_index_diff?.added.includes('../layout')) {
+  if (is_new_layout_added && !types_util_diff?.added.includes('../layout')) {
     fail('New layout components were added, but not exported in ui/utils/JSXTypeUtil.ts')
   }
 

packages/ui/index.ts

@@ -69,6 +69,8 @@ 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-icon-button/index.js'
+export * from './src/composites/wui-list-button/index.js'
+export * from './src/composites/wui-list-social/index.js'
 
 export * from './src/layout/wui-flex/index.js'
 export * from './src/layout/wui-grid/index.js'

packages/ui/src/assets/svg/google.ts

@@ -1,32 +1,20 @@
 import { svg } from 'lit'
 
 export const googleSvg = svg`<svg fill="none" viewBox="0 0 40 40">
-  <g clip-path="url(#a)">
-    <g clip-path="url(#b)">
-      <circle cx="20" cy="19.89" r="20" fill="#fff" fill-opacity=".05" />
-      <g clip-path="url(#c)">
-        <path
-          fill="#4285F4"
-          d="M20 17.7v4.65h6.46a5.53 5.53 0 0 1-2.41 3.61l3.9 3.02c2.26-2.09 3.57-5.17 3.57-8.82 0-.85-.08-1.67-.22-2.46H20Z"
-        />
-        <path
-          fill="#34A853"
-          d="m13.27 22.17-.87.67-3.11 2.42A12 12 0 0 0 20 31.9c3.24 0 5.96-1.07 7.94-2.9l-3.9-3.03A7.15 7.15 0 0 1 20 27.12a7.16 7.16 0 0 1-6.72-4.94v-.01Z"
-        />
-        <path
-          fill="#FBBC05"
-          d="M9.29 14.5a11.85 11.85 0 0 0 0 10.76l3.99-3.1a7.19 7.19 0 0 1 0-4.55l-4-3.1Z"
-        />
-        <path
-          fill="#EA4335"
-          d="M20 12.66c1.77 0 3.34.61 4.6 1.8l3.43-3.44A11.51 11.51 0 0 0 20 7.89c-4.7 0-8.74 2.69-10.71 6.62l3.99 3.1A7.16 7.16 0 0 1 20 12.66Z"
-        />
-      </g>
-    </g>
-  </g>
-  <defs>
-    <clipPath id="a"><rect width="40" height="40" fill="#fff" rx="20" /></clipPath>
-    <clipPath id="b"><path fill="#fff" d="M0 0h40v40H0z" /></clipPath>
-    <clipPath id="c"><path fill="#fff" d="M8 7.89h24v24H8z" /></clipPath>
-  </defs>
+  <path
+    fill="#4285F4"
+    d="M32.74 20.3c0-.93-.08-1.81-.24-2.66H20.26v5.03h7a6 6 0 0 1-2.62 3.91v3.28h4.22c2.46-2.27 3.88-5.6 3.88-9.56Z"
+  />
+  <path
+    fill="#34A853"
+    d="M20.26 33a12.4 12.4 0 0 0 8.6-3.14l-4.22-3.28a7.74 7.74 0 0 1-4.38 1.26 7.76 7.76 0 0 1-7.28-5.36H8.65v3.36A12.99 12.99 0 0 0 20.26 33Z"
+  />
+  <path
+    fill="#FBBC05"
+    d="M12.98 22.47a7.79 7.79 0 0 1 0-4.94v-3.36H8.65a12.84 12.84 0 0 0 0 11.66l3.37-2.63.96-.73Z"
+  />
+  <path
+    fill="#EA4335"
+    d="M20.26 12.18a7.1 7.1 0 0 1 4.98 1.93l3.72-3.72A12.47 12.47 0 0 0 20.26 7c-5.08 0-9.47 2.92-11.6 7.17l4.32 3.36a7.76 7.76 0 0 1 7.28-5.35Z"
+  />
 </svg>`

packages/ui/src/assets/svg/more.ts

@@ -0,0 +1,13 @@
+import { svg } from 'lit'
+
+export const moreSvg = svg`<svg fill="none" viewBox="0 0 41 40">
+  <path
+    style="fill: var(--wui-color-fg-100);"
+    fill-opacity=".05"
+    d="M.6 20a20 20 0 1 1 40 0 20 20 0 0 1-40 0Z"
+  />
+  <path
+    fill="#949E9E"
+    d="M15.6 20.31a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM23.1 20.31a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM28.1 22.81a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"
+  />
+</svg>`

packages/ui/src/assets/svg/x.ts

@@ -0,0 +1,14 @@
+import { svg } from 'lit'
+
+export const xSvg = svg`<svg fill="none" viewBox="0 0 41 40">
+  <g clip-path="url(#a)">
+    <path fill="#000" d="M.8 0h40v40H.8z" />
+    <path
+      fill="#fff"
+      d="m22.63 18.46 7.14-8.3h-1.69l-6.2 7.2-4.96-7.2H11.2l7.5 10.9-7.5 8.71h1.7l6.55-7.61 5.23 7.61h5.72l-7.77-11.31Zm-9.13-7.03h2.6l11.98 17.13h-2.6L13.5 11.43Z"
+    />
+  </g>
+  <defs>
+    <clipPath id="a"><path fill="#fff" d="M.8 20a20 20 0 1 1 40 0 20 20 0 0 1-40 0Z" /></clipPath>
+  </defs>
+</svg>`

packages/ui/src/components/wui-icon/index.ts

@@ -7,6 +7,7 @@ import { customElement } from '../../utils/WebComponentsUtil.js'
 import styles from './styles.js'
 
 // -- Svg's-------------------------------- //
+import { addSvg } from '../../assets/svg/add.js'
 import { allWalletsSvg } from '../../assets/svg/all-wallets.js'
 import { arrowBottomCircleSvg } from '../../assets/svg/arrow-bottom-circle.js'
 import { appStoreSvg } from '../../assets/svg/app-store.js'
@@ -15,7 +16,10 @@ import { arrowBottomSvg } from '../../assets/svg/arrow-bottom.js'
 import { arrowLeftSvg } from '../../assets/svg/arrow-left.js'
 import { arrowRightSvg } from '../../assets/svg/arrow-right.js'
 import { arrowTopSvg } from '../../assets/svg/arrow-top.js'
+import { bankSvg } from '../../assets/svg/bank.js'
 import { browserSvg } from '../../assets/svg/browser.js'
+import { cardSvg } from '../../assets/svg/card.js'
+import { checkmarkBoldSvg } from '../../assets/svg/checkmark-bold.js'
 import { checkmarkSvg } from '../../assets/svg/checkmark.js'
 import { chevronBottomSvg } from '../../assets/svg/chevron-bottom.js'
 import { chevronLeftSvg } from '../../assets/svg/chevron-left.js'
@@ -27,8 +31,8 @@ import { closeSvg } from '../../assets/svg/close.js'
 import { coinPlaceholderSvg } from '../../assets/svg/coinPlaceholder.js'
 import { compassSvg } from '../../assets/svg/compass.js'
 import { copySvg } from '../../assets/svg/copy.js'
-import { addSvg } from '../../assets/svg/add.js'
 import { cursorSvg } from '../../assets/svg/cursor.js'
+import { cursorTransparentSvg } from '../../assets/svg/cursor-transparent.js'
 import { desktopSvg } from '../../assets/svg/desktop.js'
 import { disconnectSvg } from '../../assets/svg/disconnect.js'
 import { discordSvg } from '../../assets/svg/discord.js'
@@ -43,11 +47,14 @@ import { helpCircleSvg } from '../../assets/svg/help-circle.js'
 import { infoCircleSvg } from '../../assets/svg/info-circle.js'
 import { mailSvg } from '../../assets/svg/mail.js'
 import { mobileSvg } from '../../assets/svg/mobile.js'
+import { moreSvg } from '../../assets/svg/more.js'
 import { networkPlaceholderSvg } from '../../assets/svg/network-placeholder.js'
 import { nftPlaceholderSvg } from '../../assets/svg/nftPlaceholder.js'
 import { offSvg } from '../../assets/svg/off.js'
 import { playStoreSvg } from '../../assets/svg/play-store.js'
+import { plusSvg } from '../../assets/svg/plus.js'
 import { qrCodeIcon } from '../../assets/svg/qr-code.js'
+import { recycleHorizontalSvg } from '../../assets/svg/recycle-horizontal.js'
 import { refreshSvg } from '../../assets/svg/refresh.js'
 import { searchSvg } from '../../assets/svg/search.js'
 import { sendSvg } from '../../assets/svg/send.js'
@@ -58,20 +65,14 @@ import { swapHorizontalRoundedBoldSvg } from '../../assets/svg/swapHorizontalRou
 import { swapVerticalSvg } from '../../assets/svg/swapVertical.js'
 import { telegramSvg } from '../../assets/svg/telegram.js'
 import { twitchSvg } from '../../assets/svg/twitch.js'
-import { twitterSvg } from '../../assets/svg/twitter.js'
 import { twitterIconSvg } from '../../assets/svg/twitterIcon.js'
 import { verifySvg } from '../../assets/svg/verify.js'
 import { verifyFilledSvg } from '../../assets/svg/verify-filled.js'
 import { walletPlaceholderSvg } from '../../assets/svg/wallet-placeholder.js'
 import { walletSvg } from '../../assets/svg/wallet.js'
 import { walletConnectSvg } from '../../assets/svg/walletconnect.js'
 import { warningCircleSvg } from '../../assets/svg/warning-circle.js'
-import { recycleHorizontalSvg } from '../../assets/svg/recycle-horizontal.js'
-import { bankSvg } from '../../assets/svg/bank.js'
-import { cardSvg } from '../../assets/svg/card.js'
-import { plusSvg } from '../../assets/svg/plus.js'
-import { cursorTransparentSvg } from '../../assets/svg/cursor-transparent.js'
-import { checkmarkBoldSvg } from '../../assets/svg/checkmark-bold.js'
+import { xSvg } from '../../assets/svg/x.js'
 
 const svgOptions: Record<IconType, TemplateResult<2>> = {
   add: addSvg,
@@ -114,6 +115,7 @@ const svgOptions: Record<IconType, TemplateResult<2>> = {
   infoCircle: infoCircleSvg,
   mail: mailSvg,
   mobile: mobileSvg,
+  more: moreSvg,
   networkPlaceholder: networkPlaceholderSvg,
   nftPlaceholder: nftPlaceholderSvg,
   off: offSvg,
@@ -131,14 +133,15 @@ const svgOptions: Record<IconType, TemplateResult<2>> = {
   swapVertical: swapVerticalSvg,
   telegram: telegramSvg,
   twitch: twitchSvg,
-  twitter: twitterSvg,
+  twitter: xSvg,
   twitterIcon: twitterIconSvg,
   verify: verifySvg,
   verifyFilled: verifyFilledSvg,
   wallet: walletSvg,
   walletConnect: walletConnectSvg,
   walletPlaceholder: walletPlaceholderSvg,
-  warningCircle: warningCircleSvg
+  warningCircle: warningCircleSvg,
+  x: xSvg
 }
 
 @customElement('wui-icon')

packages/ui/src/composites/wui-email-input/index.ts

@@ -24,7 +24,7 @@ export class WuiEmailInput extends LitElement {
       <wui-input-text
         placeholder="Email"
         icon="mail"
-        size="md"
+        size="mdl"
         .disabled=${this.disabled}
         .value=${this.value}
         data-testid="wui-email-input"

packages/ui/src/composites/wui-input-text/index.ts

@@ -16,7 +16,7 @@ export class WuiInputText extends LitElement {
   public inputElementRef = createRef<HTMLInputElement>()
 
   // -- State & Properties -------------------------------- //
-  @property() public size: Exclude<SizeType, 'inherit' | 'xl' | 'xs' | 'xxs'> = 'md'
+  @property() public size: Exclude<SizeType, 'inherit' | 'xs' | 'xxs'> = 'md'
 
   @property() public icon?: IconType
 

packages/ui/src/composites/wui-input-text/styles.ts

@@ -14,7 +14,6 @@ export default css`
     border: 1px solid var(--wui-gray-glass-005);
     background: var(--wui-gray-glass-005);
     font-size: var(--wui-font-size-paragraph);
-    font-weight: var(--wui-font-weight-light);
     letter-spacing: var(--wui-letter-spacing-paragraph);
     color: var(--wui-color-fg-100);
     transition:
@@ -76,7 +75,7 @@ export default css`
 
   wui-icon + .wui-size-md,
   wui-loading-spinner + .wui-size-md {
-    padding: 10.5px var(--wui-spacing-3xl) 10.5px 40px;
+    padding: 10.5px var(--wui-spacing-3xl) 10.5px var(--wui-spacing-3xl);
   }
 
   wui-icon[data-input='md'] {
@@ -102,6 +101,17 @@ export default css`
     left: var(--wui-spacing-l);
   }
 
+  .wui-size-mdl {
+    padding: 17.25px var(--wui-spacing-m) 17.25px var(--wui-spacing-m);
+  }
+  wui-icon + .wui-size-mdl,
+  wui-loading-spinner + .wui-size-mdl {
+    padding: 17.25px var(--wui-spacing-3xl) 17.25px 40px;
+  }
+  wui-icon[data-input='mdl'] {
+    left: var(--wui-spacing-m);
+  }
+
   input:placeholder-shown ~ ::slotted(wui-input-element),
   input:placeholder-shown ~ ::slotted(wui-icon) {
     opacity: 0;