From c92f8f3e4cb6a414e87244248437335553437a82 Mon Sep 17 00:00:00 2001 From: aizad-deriv Date: Fri, 3 Nov 2023 12:35:48 +0800 Subject: [PATCH] feat: Created Icon Button for wallets package --- .../Base/IconButton/IconButton.scss | 92 +++++++++++++++++++ .../components/Base/IconButton/IconButton.tsx | 33 +++++++ .../src/components/Base/IconButton/index.ts | 1 + packages/wallets/src/components/Base/index.ts | 1 + 4 files changed, 127 insertions(+) create mode 100644 packages/wallets/src/components/Base/IconButton/IconButton.scss create mode 100644 packages/wallets/src/components/Base/IconButton/IconButton.tsx create mode 100644 packages/wallets/src/components/Base/IconButton/index.ts diff --git a/packages/wallets/src/components/Base/IconButton/IconButton.scss b/packages/wallets/src/components/Base/IconButton/IconButton.scss new file mode 100644 index 000000000000..33bae284a4de --- /dev/null +++ b/packages/wallets/src/components/Base/IconButton/IconButton.scss @@ -0,0 +1,92 @@ +$color-map: ( + 'primary': ( + backgroundcolor: #ff444f, + hover: #eb3e48, + ), + 'white': ( + backgroundcolor: #fff, + hover: #d6dadb, + ), + 'black': ( + backgroundcolor: #0e0e0e, + hover: #323738, + ), + 'transparent': ( + backgroundcolor: transparent, + hover: #d6dadb, + ), +); + +$size-map: ( + sm: ( + padding: 0.4rem, + height: 2.4rem, + ), + md: ( + padding: 0.8rem, + height: 3.2rem, + ), + lg: ( + padding: 1.2rem, + height: 4rem, + ), +); + +$border-radius-map: ( + sm: 0.4rem, + md: 6.4rem, + lg: 50%, +); + +.wallets-icon-button { + display: grid; + place-content: center; + border: none; + + &:hover { + cursor: pointer; + } + + &:disabled { + display: none; + } + + &__border-radius { + &--round { + border-radius: 50%; + } + + &--default { + border-radius: 0.4rem; + } + } + + @each $color, $values in $color-map { + &__color--#{$color} { + background-color: map-get($values, backgroundcolor); + &:hover { + background-color: map-get($values, hover); + } + } + } + + @each $size, $values in $size-map { + &__size--#{$size} { + padding: map-get($values, padding); + height: map-get($values, height); + } + } + + @each $size, $values in $border-radius-map { + &__border-radius--#{$size} { + border-radius: ($values); + } + } + + &__icon { + display: grid; + place-content: center; + width: 1.6rem; + height: 1.6rem; + } +} diff --git a/packages/wallets/src/components/Base/IconButton/IconButton.tsx b/packages/wallets/src/components/Base/IconButton/IconButton.tsx new file mode 100644 index 000000000000..5e1d335a25e6 --- /dev/null +++ b/packages/wallets/src/components/Base/IconButton/IconButton.tsx @@ -0,0 +1,33 @@ +import React, { ButtonHTMLAttributes, ComponentProps, CSSProperties, forwardRef } from 'react'; +import classNames from 'classnames'; +import { TGenericSizes } from '../types'; +import './IconButton.scss'; + +interface IconButtonProps extends ButtonHTMLAttributes { + color?: 'black' | 'primary' | 'transparent' | 'white'; + icon: React.ReactNode; + isRound?: boolean; + onClick?: ComponentProps<'button'>['onClick']; + size?: Extract; +} + +const IconButton = forwardRef( + ({ className, color = 'primary', disabled, icon, isRound, onClick, size = 'sm', ...rest }, ref) => { + const iconButtonClassNames = classNames( + 'wallets-icon-button', + `wallets-icon-button__size--${size}`, + `wallets-icon-button__color--${color}`, + `wallets-icon-button__border-radius--${isRound ? 'round' : 'default'}`, + className + ); + + return ( + + ); + } +); + +IconButton.displayName = 'IconButton'; +export default IconButton; diff --git a/packages/wallets/src/components/Base/IconButton/index.ts b/packages/wallets/src/components/Base/IconButton/index.ts new file mode 100644 index 000000000000..9a2d049fab32 --- /dev/null +++ b/packages/wallets/src/components/Base/IconButton/index.ts @@ -0,0 +1 @@ +export { default as IconButton } from './IconButton'; diff --git a/packages/wallets/src/components/Base/index.ts b/packages/wallets/src/components/Base/index.ts index 4118cfe9336f..0639a9824c20 100644 --- a/packages/wallets/src/components/Base/index.ts +++ b/packages/wallets/src/components/Base/index.ts @@ -1,4 +1,5 @@ export * from './Divider'; +export * from './IconButton'; export * from './InlineMessage'; export * from './ModalStepWrapper'; export * from './ModalWrapper';