EPMRPP-76495 || Button component

app/src/common/css/variables/newColors.scss

@@ -22,6 +22,7 @@ $COLOR--darkmode-topaz-text: #3abcd0;
 $COLOR--darkmode-topaz-additional: #00505d;
 $COLOR--darkmode-topaz-hover: #1cb0c7;
 $COLOR--darkmode-topaz-pressed: #9ee7f2;
+$COLOR--darkmode-topaz-focused: #1dbdd6;
 $COLOR--darkmode-bg: #101010;
 $COLOR--darkmode-bg-solid-98: #141414;
 $COLOR--darkmode-gray-400: #262626;
@@ -38,3 +39,8 @@ $COLOR--bg-100: #f7f7f8;
 $COLOR--bg-000: #ffffff;
 $COLOR--e-100: #e3e7ec;
 $COLOR--topaz-2: #00829b;
+$COLOR--topaz-hover-2: #009dbb;
+$COLOR--topaz-focused: #00b0d1;
+$COLOR--red-failed-2: #dc5959;
+$COLOR--red-pressed: #c54141;
+$COLOR--red-focused: #ffb1b1;

app/src/componentLibrary/button/README.md

@@ -0,0 +1,27 @@
+## **Button**
+
+Min width - 120px. Max width - flexible.
+
+### Props:
+
+- **type**: _string_, optional, default = "button"
+- **disabled**: _bool_, optional, default = false
+- **variant**: _string_, optional, default = "topaz"
+- **wide**: _bool_, optional, default = false
+- **startIcon**: _string(imported svg icon)_, optional, default = ""
+- **endIcon**: _string(imported svg icon)_, optional, default = ""
+- **children**: _node_, optional, default= ""
+
+### Events:
+
+- **onClick**
+
+### Variants
+
+The Button comes with variants: _topaz_ (default), _ghost_, _danger_ and _text_.  
+And similar variants for dark theme: _dark-topaz_, _dark-ghost_ and _dark-text_.
+
+### Icon
+
+Only text variant can be used with icon. You can pass imported svg icon
+via _startIcon_ or _endIcon_ props to display it on the left or right respectively.

app/src/componentLibrary/button/button.jsx

@@ -0,0 +1,86 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import PropTypes from 'prop-types';
+import classNames from 'classnames/bind';
+import Parser from 'html-react-parser';
+import styles from './button.scss';
+
+const cx = classNames.bind(styles);
+
+export const Button = ({
+  variant,
+  startIcon,
+  endIcon,
+  wide,
+  type,
+  children,
+  disabled,
+  onClick,
+  form,
+  title,
+}) => {
+  const classes = cx('button', variant, {
+    disabled,
+    wide,
+  });
+
+  const icon = (variant === 'text' || variant === 'dark-text') && (startIcon || endIcon);
+
+  return (
+    <button
+      type={type}
+      disabled={disabled}
+      className={classes}
+      onClick={onClick}
+      form={form}
+      title={title}
+    >
+      {icon && (
+        <i className={cx('icon', { 'start-icon': startIcon, 'end-icon': endIcon })}>
+          {Parser(icon)}
+        </i>
+      )}
+      {children}
+    </button>
+  );
+};
+
+Button.propTypes = {
+  variant: PropTypes.string,
+  startIcon: PropTypes.string,
+  endIcon: PropTypes.string,
+  wide: PropTypes.bool,
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
+  type: PropTypes.string,
+  onClick: PropTypes.func,
+  form: PropTypes.string,
+  title: PropTypes.string,
+};
+
+Button.defaultProps = {
+  variant: 'topaz',
+  startIcon: '',
+  endIcon: '',
+  wide: false,
+  children: '',
+  disabled: false,
+  type: 'button',
+  onClick: () => {},
+  form: null,
+  title: '',
+};

app/src/componentLibrary/button/button.scss

@@ -0,0 +1,202 @@
+/*!
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 120px;
+  height: 36px;
+  margin: 4px;
+  padding: 7px 16px;
+  outline: none;
+  border-radius: 3px;
+  font-family: $FONT-ROBOTO-MEDIUM;
+  font-size: 13px;
+  line-height: 20px;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.topaz {
+  border: 1px solid $COLOR--topaz-2;
+  background-color: $COLOR--topaz-2;
+  color: $COLOR--bg-000;
+  &:hover:not(.disabled) {
+    border: 1px solid $COLOR--topaz-hover-2;
+    background-color: $COLOR--topaz-hover-2;
+  }
+  &:active:not(.disabled) {
+    border: 1px solid $COLOR--topaz-pressed;
+    background-color: $COLOR--topaz-pressed;
+  }
+  &:focus:not(.disabled, :active) {
+    border: 2px solid $COLOR--topaz-focused;
+  }
+}
+
+.ghost {
+  border: 1px solid $COLOR--topaz-2;
+  background-color: transparent;
+  color: $COLOR--almost-black;
+  &:hover:not(.disabled) {
+    border: 1px solid $COLOR--topaz-hover-2;
+  }
+  &:active:not(.disabled) {
+    border: 1px solid $COLOR--topaz-pressed;
+  }
+  &:focus:not(.disabled, :active) {
+    border: 2px solid $COLOR--topaz-focused;
+  }
+}
+
+.danger {
+  border: 1px solid $COLOR--red-failed-2;
+  background-color: $COLOR--red-failed-2;
+  color: $COLOR--bg-000;
+  &:hover:not(.disabled) {
+    opacity: 0.9;
+  }
+  &:active:not(.disabled) {
+    border: 1px solid $COLOR--red-pressed;
+    background-color: $COLOR--red-pressed;
+  }
+  &:focus:not(.disabled, :active) {
+    border: 2px solid $COLOR--red-focused;
+  }
+}
+
+.text {
+  min-width: auto;
+  height: auto;
+  border: 0;
+  padding: 0;
+  background: none;
+  color: $COLOR--topaz-2;
+  line-height: 22px;
+  &:hover:not(.disabled) {
+    color: $COLOR--topaz-hover-2;
+    svg * {
+      fill: $COLOR--topaz-hover-2;
+    }
+  }
+  &:active:not(.disabled) {
+    color: $COLOR--topaz-pressed;
+    svg * {
+      fill: $COLOR--topaz-pressed;
+    }
+  }
+  &:focus:not(.disabled, :active) {
+    color: $COLOR--topaz-focused;
+    svg * {
+      fill: $COLOR--topaz-focused;
+    }
+  }
+  svg * {
+    fill: $COLOR--topaz-2;
+  }
+}
+
+.dark-topaz {
+  border: 1px solid $COLOR--darkmode-topaz-main;
+  background-color: $COLOR--darkmode-topaz-main;
+  color: $COLOR--bg-000;
+  &:hover:not(.disabled) {
+    border: 1px solid $COLOR--darkmode-topaz-hover;
+    background-color: $COLOR--darkmode-topaz-hover;
+  }
+  &:active:not(.disabled) {
+    border: 1px solid $COLOR--topaz-pressed;
+    background-color: $COLOR--topaz-pressed;
+  }
+  &:focus:not(.disabled, :active) {
+    border: 2px solid $COLOR--darkmode-topaz-focused;
+  }
+}
+
+.dark-ghost {
+  border: 1px solid $COLOR--darkmode-topaz-main;
+  background-color: transparent;
+  color: $COLOR--darkmode-gray-50;
+  &:hover:not(.disabled) {
+    border: 1px solid $COLOR--darkmode-topaz-hover;
+  }
+  &:active:not(.disabled) {
+    border: 1px solid $COLOR--topaz-pressed;
+  }
+  &:focus:not(.disabled, :active) {
+    border: 2px solid $COLOR--darkmode-topaz-focused;
+  }
+}
+
+.dark-text {
+  min-width: auto;
+  height: auto;
+  border: 0;
+  padding: 0;
+  background: none;
+  line-height: 22px;
+  color: $COLOR--darkmode-topaz-text;
+  &:hover:not(.disabled) {
+    color: $COLOR--darkmode-topaz-hover;
+    svg * {
+      fill: $COLOR--darkmode-topaz-hover;
+    }
+  }
+  &:active:not(.disabled) {
+    color: $COLOR--darkmode-topaz-pressed;
+    svg * {
+      fill: $COLOR--darkmode-topaz-pressed;
+    }
+  }
+  &:focus:not(.disabled, :active) {
+    color: $COLOR--darkmode-topaz-focused;
+    svg * {
+      fill: $COLOR--darkmode-topaz-focused;
+    }
+  }
+  svg * {
+    fill: $COLOR--darkmode-topaz-text;
+  }
+}
+
+.wide {
+  padding: 7px 47px;
+}
+
+.icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+}
+
+.start-icon {
+  margin: auto 8px auto 0;
+}
+.end-icon {
+  margin: auto 0 auto 8px;
+  order: 1;
+}
+
+.disabled:not(.dark-topaz, .dark-ghost, .dark-text) {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.disabled:not(.topaz, .ghost, .text) {
+  opacity: 0.5;
+  cursor: default;
+}

app/src/componentLibrary/button/index.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2022 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Button } from './button';
+
+export { Button };
+
+export default Button;

app/webpack/base.config.js

@@ -38,6 +38,7 @@ module.exports = {
     extensions: ['.js', '.jsx', '.sass', '.scss', '.css'],
     alias: {
       components: path.resolve(__dirname, '../src/components'),
+      componentLibrary: path.resolve(__dirname, '../src/componentLibrary'),
       controllers: path.resolve(__dirname, '../src/controllers'),
       common: path.resolve(__dirname, '../src/common'),
       pages: path.resolve(__dirname, '../src/pages'),