diff --git a/apps/gallery-new/stories/composites/wui-domain-chip.stories.ts b/apps/gallery-new/stories/composites/wui-domain-chip.stories.ts new file mode 100644 index 0000000000..27bbe93f30 --- /dev/null +++ b/apps/gallery-new/stories/composites/wui-domain-chip.stories.ts @@ -0,0 +1,40 @@ +import type { Meta } from '@storybook/web-components' +import '@reown/appkit-ui-new/src/composites/wui-domain-chip' +import type { WuiDomainChip } from '@reown/appkit-ui-new/src/composites/wui-domain-chip' +import { html } from 'lit' +import { domainChipVariants } from '../../utils/PresetUtils' + +type Component = Meta + +export default { + title: 'Composites/wui-domain-chip', + args: { + variant: 'success', + size: 'md', + disabled: false, + text: 'reown.com/appkit' + }, + argTypes: { + variant: { + options: domainChipVariants, + control: { type: 'select' } + }, + size: { + options: ['sm', 'md'], + control: { type: 'select' } + }, + disabled: { + control: { type: 'boolean' } + } + } +} as Component + +export const Default: Component = { + render: args => + html`` +} diff --git a/apps/gallery-new/utils/PresetUtils.ts b/apps/gallery-new/utils/PresetUtils.ts index 20fd11851a..6bf0017bac 100644 --- a/apps/gallery-new/utils/PresetUtils.ts +++ b/apps/gallery-new/utils/PresetUtils.ts @@ -28,7 +28,8 @@ import type { ThemeType, TransactionType, VisualType, - ButtonLinkVariant + ButtonLinkVariant, + DomainChipVariant } from '@reown/appkit-ui-new/src/utils/TypeUtil' import type { TransactionStatus, TransactionDirection } from '@reown/appkit-common' @@ -202,6 +203,7 @@ export const iconOptions: IconType[] = [ 'arrowTop', 'browser', 'checkmark', + 'checkmarkVerified', 'chevronBottom', 'chevronLeft', 'chevronRight', @@ -279,7 +281,9 @@ export const logoOptions: LogoType[] = [ export const placementOptions: PlacementType[] = ['top', 'right', 'bottom', 'left'] -export const chipButtonVariants: ChipButtonVariant[] = ['main', 'accent', 'shade', 'gray', 'shade'] +export const chipButtonVariants: ChipButtonVariant[] = ['main', 'accent', 'primary'] + +export const domainChipVariants: DomainChipVariant[] = ['success', 'warning', 'error'] export const chipVariants: ChipType[] = [ 'fill', diff --git a/packages/ui-new/index.ts b/packages/ui-new/index.ts index fd4f60cb41..dd63717629 100644 --- a/packages/ui-new/index.ts +++ b/packages/ui-new/index.ts @@ -23,6 +23,7 @@ export * from './src/composites/wui-connect-button/index.js' export * from './src/composites/wui-cta-button/index.js' export * from './src/composites/wui-details-group/index.js' export * from './src/composites/wui-details-group-item/index.js' +export * from './src/composites/wui-domain-chip/index.js' export * from './src/composites/wui-dropdown-menu/index.js' export * from './src/composites/wui-email-input/index.js' export * from './src/composites/wui-ens-input/index.js' diff --git a/packages/ui-new/src/assets/svg/arrow-top-right.ts b/packages/ui-new/src/assets/svg/arrow-top-right.ts index dd47822ab3..27352299a6 100644 --- a/packages/ui-new/src/assets/svg/arrow-top-right.ts +++ b/packages/ui-new/src/assets/svg/arrow-top-right.ts @@ -1,5 +1,5 @@ import { svg } from 'lit' -export const arrowTopRightSvg = svg` - +export const arrowTopRightSvg = svg` + ` diff --git a/packages/ui-new/src/assets/svg/checkmark-verified.ts b/packages/ui-new/src/assets/svg/checkmark-verified.ts new file mode 100644 index 0000000000..1c24a8b3c4 --- /dev/null +++ b/packages/ui-new/src/assets/svg/checkmark-verified.ts @@ -0,0 +1,6 @@ +import { svg } from 'lit' + +export const checkmarkVerifiedSvg = svg` + + +` diff --git a/packages/ui-new/src/assets/svg/exclamation-circle.ts b/packages/ui-new/src/assets/svg/exclamation-circle.ts new file mode 100644 index 0000000000..fa2d8bf43f --- /dev/null +++ b/packages/ui-new/src/assets/svg/exclamation-circle.ts @@ -0,0 +1,7 @@ +import { svg } from 'lit' + +export const exclamationCircleSvg = svg` + + + +` diff --git a/packages/ui-new/src/assets/svg/external-link.ts b/packages/ui-new/src/assets/svg/external-link.ts index d3268edfdb..abe0429b29 100644 --- a/packages/ui-new/src/assets/svg/external-link.ts +++ b/packages/ui-new/src/assets/svg/external-link.ts @@ -1,10 +1,5 @@ import { svg } from 'lit' -export const externalLinkSvg = svg` - +export const externalLinkSvg = svg` + ` diff --git a/packages/ui-new/src/components/wui-icon/index.ts b/packages/ui-new/src/components/wui-icon/index.ts index 5971f17b2b..ee226a9f91 100644 --- a/packages/ui-new/src/components/wui-icon/index.ts +++ b/packages/ui-new/src/components/wui-icon/index.ts @@ -7,6 +7,7 @@ import { customElement } from '../../utils/WebComponentsUtil.js' import styles from './styles.js' // -- Svg's-------------------------------- // +import { arrowTopRightSvg } from '../../assets/svg/arrow-top-right.js' import { addSvg } from '../../assets/svg/add.js' import { allWalletsSvg } from '../../assets/svg/all-wallets.js' import { arrowBottomCircleSvg } from '../../assets/svg/arrow-bottom-circle.js' @@ -20,6 +21,7 @@ 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 { checkmarkVerifiedSvg } from '../../assets/svg/checkmark-verified.js' import { checkmarkSvg } from '../../assets/svg/checkmark.js' import { chevronBottomSvg } from '../../assets/svg/chevron-bottom.js' import { chevronLeftSvg } from '../../assets/svg/chevron-left.js' @@ -36,6 +38,8 @@ import { desktopSvg } from '../../assets/svg/desktop.js' import { disconnectSvg } from '../../assets/svg/disconnect.js' import { discordSvg } from '../../assets/svg/discord.js' import { etherscanSvg } from '../../assets/svg/etherscan.js' +import { exclamationTriangleSvg } from '../../assets/svg/exclamation-triangle.js' +import { exclamationCircleSvg } from '../../assets/svg/exclamation-circle.js' import { extensionSvg } from '../../assets/svg/extension.js' import { externalLinkSvg } from '../../assets/svg/external-link.js' import { facebookSvg } from '../../assets/svg/facebook.js' @@ -83,8 +87,6 @@ import { lightbulbSvg } from '../../assets/svg/lightbulb.js' import { idSvg } from '../../assets/svg/id.js' import { xSvg } from '../../assets/svg/x.js' import { infoSvg } from '../../assets/svg/info.js' -import { exclamationTriangleSvg } from '../../assets/svg/exclamation-triangle.js' -import { arrowTopRightSvg } from '../../assets/svg/arrow-top-right.js' const svgOptions: Record> = { add: addSvg, @@ -102,6 +104,7 @@ const svgOptions: Record> = { card: cardSvg, checkmark: checkmarkSvg, checkmarkBold: checkmarkBoldSvg, + checkmarkVerified: checkmarkVerifiedSvg, chevronBottom: chevronBottomSvg, chevronLeft: chevronLeftSvg, chevronRight: chevronRightSvg, @@ -117,6 +120,8 @@ const svgOptions: Record> = { disconnect: disconnectSvg, discord: discordSvg, etherscan: etherscanSvg, + exclamationTriangle: exclamationTriangleSvg, + exclamationCircle: exclamationCircleSvg, extension: extensionSvg, externalLink: externalLinkSvg, facebook: facebookSvg, @@ -162,8 +167,7 @@ const svgOptions: Record> = { walletPlaceholder: walletPlaceholderSvg, warningCircle: warningCircleSvg, x: xSvg, - info: infoSvg, - exclamationTriangle: exclamationTriangleSvg + info: infoSvg } // @TODO: Add color property diff --git a/packages/ui-new/src/composites/wui-chip-button/index.ts b/packages/ui-new/src/composites/wui-chip-button/index.ts index 29204328ab..c3e16bd36d 100644 --- a/packages/ui-new/src/composites/wui-chip-button/index.ts +++ b/packages/ui-new/src/composites/wui-chip-button/index.ts @@ -4,10 +4,16 @@ import '../../components/wui-icon/index.js' import '../../components/wui-image/index.js' import '../../components/wui-text/index.js' import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js' -import type { ChipButtonVariant, IconType } from '../../utils/TypeUtil.js' +import type { ChipButtonSize, ChipButtonVariant, IconType } from '../../utils/TypeUtil.js' import { customElement } from '../../utils/WebComponentsUtil.js' import styles from './styles.js' +// -- Constants --------------------------------------------------------------- // +const FONT_BY_SIZE = { + sm: 'sm-regular', + md: 'md-regular' +} + @customElement('wui-chip-button') export class WuiChipButton extends LitElement { public static override styles = [resetStyles, elementStyles, styles] @@ -15,28 +21,22 @@ export class WuiChipButton extends LitElement { // -- State & Properties -------------------------------- // @property() public variant: ChipButtonVariant = 'accent' + @property() public size: ChipButtonSize = 'md' + @property() public imageSrc = '' @property({ type: Boolean }) public disabled = false @property() public icon: IconType = 'externalLink' - @property() public size: 'sm' | 'md' = 'md' - @property() public text = '' // -- Render -------------------------------------------- // public override render() { - const textVariant = this.size === 'sm' ? 'small-600' : 'paragraph-600' - return html` -