Aizad/WALL-2439/Created Icon Button Component

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;
+    }
+}

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<HTMLButtonElement> {
+    color?: 'black' | 'primary' | 'transparent' | 'white';
+    icon: React.ReactNode;
+    isRound?: boolean;
+    onClick?: ComponentProps<'button'>['onClick'];
+    size?: Extract<TGenericSizes, 'lg' | 'md' | 'sm'>;
+}
+
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+    ({ 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 (
+            <button className={iconButtonClassNames} disabled={disabled} onClick={onClick} ref={ref} {...rest}>
+                <div className='wallets-icon-button__icon'>{icon}</div>
+            </button>
+        );
+    }
+);
+
+IconButton.displayName = 'IconButton';
+export default IconButton;

packages/wallets/src/components/Base/IconButton/index.ts

@@ -0,0 +1 @@
+export { default as IconButton } from './IconButton';

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';