From 7778ccaa61f688144e4c8daf6bfed511db00b1b7 Mon Sep 17 00:00:00 2001 From: kaushik <kaushik.shetty@niveussolutions.com> Date: Tue, 11 Jan 2022 16:46:41 +0530 Subject: [PATCH] button component --- src/components/Button/Button.module.scss | 44 ++++++++++++++++++++++-- src/components/Button/index.jsx | 27 +++++++++++++-- 2 files changed, 66 insertions(+), 5 deletions(-) diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss index acc1b1f..66842d0 100644 --- a/src/components/Button/Button.module.scss +++ b/src/components/Button/Button.module.scss @@ -1,3 +1,43 @@ -.customButton { - background-color: red; +.button { + font-size: 0.75rem; + color: #5e72e4 !important; + position: relative; + transition: all 0.15s ease !important; + letter-spacing: 0.025em; + text-transform: none; + will-change: transform; + line-height: 1.5 !important; + padding: 0.25rem 0.5rem !important; + border-radius: 0.25rem !important; + border-color: #fff; + background-color: #fff !important; + box-shadow: 0 4px 6px rgba(0.1, 0.1, 0.1, 0.11), + 0 1px 3px rgba(0.1, 0.1, 0.1, 0.8); + font-weight: 600; + line-height: 1.5 !important; + display: inline-block; + /* padding: 0.625rem 1.25rem!important; */ + cursor: pointer; + -webkit-user-select: none; + user-select: none; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important; + text-align: center; + vertical-align: middle; + border: 1px solid transparent; + border-radius: 0.25rem !important; + margin-right: 16px; + + &:hover { + transform: translateY(-1px); + box-shadow: 0 7px 14px rgba(0.5, 0.5, 0.93, 0.1), + 0 3px 6px rgba(0, 0, 0, 0.8); + color: #212529 !important; + border-color: #fff !important; + background-color: #fff !important; + } + &.filledbutton { + color: #fff; + background-color: #5e72e4; + } } diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx index 81d9f27..e3f6dbf 100644 --- a/src/components/Button/index.jsx +++ b/src/components/Button/index.jsx @@ -1,12 +1,33 @@ import React from "react"; import PropTypes from "prop-types"; import cs from "classnames"; -import styles from "./Button.module.scss"; +import style from "./Button.module.scss"; function Button(props) { - return <div className={cs(styles.customButton)}>here</div>; + const { label, customClass, disabled, variant, handleButtonClick } = props; + return ( + <button + onClick={handleButtonClick} + className={cs(style.button, style[variant], customClass)} + disabled={disabled} + > + {label} + </button> + ); } -Button.propTypes = {}; +Button.propTypes = { + customClass: PropTypes.string, + label: PropTypes.string, + disabled: PropTypes.bool, + variant: PropTypes.oneOf(["filledbutton"]), + handleButtonClick: PropTypes.func, +}; + +Button.defaultProps = { + label: "Button", + variant: "filledbutton", + customClass: "", +}; export default Button; -- GitLab