armtek-uikit-react 1.0.2

package/lib/cjs/ui/Button/Button.module.scss

@@ -0,0 +1,298 @@
+@import "../../assets/styles";
+
+.button{
+  outline: none;
+  border:1px solid transparent;
+  border-radius: $radius;
+  text-transform: uppercase;
+  padding: $size-step calc(3 * $size-step);
+  cursor: pointer;
+  @include transition(0.3s);
+  font-weight: 500;
+  font-size: 16px;
+  height: $size-elarge;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:disabled{
+    cursor: initial;
+  }
+}
+.button_contained {
+  &.button_primary{
+    color: #fff;
+    background: $color-primary;
+    &:hover{
+      background: $color-primary-dark;
+    }
+    &:active{
+      background: $color-blue-800;
+    }
+    &:disabled{
+      background: $color-primary-light;
+    }
+  }
+  &.button_secondary {
+    background: $color-secondary;
+    color: #fff;
+    &:hover{
+      background: $color-secondary-dark;
+    }
+    &:active{
+      background: $color-orange-800;
+    }
+    &:disabled{
+      background: $color-secondary-light;
+    }
+  }
+  &.button_neutral {
+    background: $color-neutral;
+    &:hover{
+      background: $color-neutral-dark;
+    }
+    &:active{
+      background: $color-gray-600;
+    }
+    &:disabled{
+      background: $color-secondary-light;
+    }
+  }
+  &.button_black {
+    background: $color-gray-900;
+    &:hover{
+      background: $color-neutral-dark;
+    }
+    &:active{
+      background: $color-gray-600;
+    }
+    &:disabled{
+      background: $color-secondary-light;
+    }
+  }
+}
+.button_outlined {
+  background: transparent;
+  &.button_primary{
+
+    color: $color-primary;
+    border-color: $color-primary;
+    background: transparent;
+    &:hover{
+      background: rgba($color-primary, 0.1);
+    }
+    &:active{
+      background: $color-blue-A100;
+    }
+    &:disabled{
+      color: $color-primary-light;
+      border-color: $color-primary-light;
+    }
+  }
+  &.button_secondary {
+    border-color: $color-secondary;
+    color: $color-secondary;
+    &:hover{
+      background: rgba($color-secondary, 0.1);
+    }
+    &:active{
+      background: $color-orange-100;
+    }
+    &:disabled{
+      color: $color-primary-light;
+      border-color: $color-primary-light;
+    }
+  }
+  &.button_neutral,
+  &.button_black {
+    border-color: $color-gray-900;
+    color: $color-gray-900;
+    &:hover{
+      background: rgba($color-neutral, 0.1);
+    }
+    &:active{
+      background: $color-gray-300;
+    }
+    &:disabled{
+      color: $color-neutral-light;
+      border-color: $color-neutral-light;
+    }
+  }
+}
+.button_transparent {
+  background: transparent;
+  &.button_primary{
+    color: $color-primary;
+    background: transparent;
+    &:hover{
+      background: rgba($color-primary, 0.1);
+    }
+    &:active{
+      background: $color-blue-A100;
+    }
+    &:disabled{
+      color: $color-primary-light;
+      background: none;
+    }
+  }
+  &.button_secondary {
+    color: $color-secondary;
+    &:hover{
+      background: rgba($color-secondary, 0.1);
+    }
+    &:active{
+      background: $color-orange-100;
+    }
+    &:disabled{
+      color: $color-primary-light;
+      background: none;
+    }
+  }
+  &.button_neutral,
+  &.button_black {
+    color: $color-gray-900;
+    &:hover{
+      background: rgba($color-neutral, 0.1);
+    }
+    &:active{
+      background: $color-gray-300;
+    }
+    &:disabled{
+      color: $color-neutral-light;
+      background: none;
+    }
+  }
+}
+
+.button__adornment{
+  font-size: inherit;
+}
+.button__adornment_end{
+  margin-left: $size-step;
+}
+.button__adornment_start{
+  margin-right: $size-step;
+}
+
+.button_large{
+  height: $size-large;
+  font-size: 15px;
+}
+.button_medium{
+  height: $size-medium;
+  font-size: 14px;
+}
+.button_small{
+  height: $size-small;
+  font-size: 13px;
+}
+
+.button_icon{
+  padding: $size-step;
+  width: $size-elarge;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 30px;
+  &.button_large{
+    width: $size-large;
+    font-size: 24px;
+  }
+  &.button_medium{
+    width: $size-medium;
+    font-size: 20px;
+  }
+  &.button_small{
+    width: $size-small;
+    padding: calc($size-step / 2);
+    font-size: 16px;
+  }
+}
+
+.button_group{
+  display: flex;
+  align-items: center;
+}
+.button_group_inline{
+  flex-direction: row;
+}
+.button_group_column{
+  flex-direction: column;
+}
+
+.button_grouped_inline{
+  border-radius: 0;
+  &:first-child{
+    border-top-left-radius: $radius;
+    border-bottom-left-radius: $radius;
+  }
+  &:last-child{
+    border-top-right-radius: $radius;
+    border-bottom-right-radius: $radius;
+  }
+  &.button_contained{
+    &.button_primary + *{
+      border-left-color: $color-info-dark;
+    }
+    &.button_secondary + *{
+      border-left-color: $color-primary-dark;
+    }
+    &.button_neutral + *{
+      border-left-color: $color-neutral-dark;
+    }
+    &.button_black + *{
+      border-left-color: $color-neutral-dark;
+    }
+  }
+  &.button_outlined{
+    &.button_primary + *{
+      border-left-color: $color-info-dark;
+    }
+    &.button_primary:not(:last-child){
+      border-right: 0;
+    }
+    &.button_secondary + *{
+      border-left-color: $color-secondary;
+    }
+    &.button_secondary:not(:last-child){
+      border-right: 0;
+    }
+    &.button_neutral + *{
+      border-left-color: $color-neutral;
+    }
+    &.button_neutral:not(:last-child){
+      border-right: 0;
+    }
+    &.button_black + *{
+      border-left-color: $color-neutral;
+    }
+    &.button_black:not(:last-child){
+      border-right: 0;
+    }
+  }
+  &.button_transparent{
+    &.button_primary + *{
+      border-left-color: $color-gray-200;
+    }
+    &.button_secondary + *{
+      border-left-color: $color-gray-200;
+    }
+    &.button_neutral + *{
+      border-left-color: $color-gray-200;
+    }
+    &.button_black + *{
+      border-left-color: $color-gray-200;
+    }
+  }
+}
+.button_grouped_column{
+  border-radius: 0;
+  &:first-child{
+    border-top-left-radius: $radius;
+    border-top-right-radius: $radius;
+  }
+  &:last-child{
+    border-bottom-left-radius: $radius;
+    border-bottom-right-radius: $radius;
+  }
+}

package/lib/cjs/ui/Button/ButtonGroup.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+type PropsType = {
+    orientation?: 'column' | 'inline';
+} & HTMLAttributes<HTMLDivElement>;
+declare const ButtonGroup: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
+export default ButtonGroup;

package/lib/cjs/ui/Button/ButtonGroup.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _ButtonModule = _interopRequireDefault(require("./Button.module.scss"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _jsxRuntime = require("react/jsx-runtime");
+const ButtonGroup = props => {
+  let {
+    orientation = 'inline',
+    className,
+    children,
+    ...restProps
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ...restProps,
+      className: (0, _clsx.default)(_ButtonModule.default.button_group, _ButtonModule.default['button_group_' + orientation], className),
+      children: children
+    })
+  });
+};
+var _default = ButtonGroup;
+exports.default = _default;
+module.exports = exports.default;

package/lib/cjs/ui/Button/ButtonIcon.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from './Button';
+declare const ButtonIcon: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default ButtonIcon;

package/lib/cjs/ui/Button/ButtonIcon.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _Button = _interopRequireDefault(require("./Button"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _ButtonModule = _interopRequireDefault(require("./Button.module.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
+const ButtonIcon = props => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      ...props,
+      className: (0, _clsx.default)(_ButtonModule.default.button_icon, props.className),
+      children: props.children
+    })
+  });
+};
+var _default = ButtonIcon;
+exports.default = _default;
+module.exports = exports.default;

package/lib/cjs/ui/Button/style.css

@@ -0,0 +1,299 @@
+.text_error {
+    color: #cc2935;
+}
+.text_success {
+    color: #0bd998;
+}
+.adornmentContainer {
+    display: flex;
+}
+.adornmentContainer_end {
+    margin-left: auto;
+}
+.adornment_end + * {
+    margin-left: 8px;
+}
+.adornment_start + * {
+    margin-left: 8px;
+}
+.button {
+    outline: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    text-transform: uppercase;
+    padding: 8px 24px;
+    cursor: pointer;
+    transition: 0.3s all ease;
+    font-weight: 500;
+    font-size: 16px;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.button:disabled {
+    cursor: initial;
+}
+.button_contained.button_primary {
+    color: #fff;
+    background: #0d46ff;
+}
+.button_contained.button_primary:hover {
+    background: #0b3cd9;
+}
+.button_contained.button_primary:active {
+    background: #406dff;
+}
+.button_contained.button_primary:disabled {
+    background: #0b3cd9;
+}
+.button_contained.button_secondary {
+    background: #ff7f00;
+    color: #fff;
+}
+.button_contained.button_secondary:hover {
+    background: #d96c00;
+}
+.button_contained.button_secondary:active {
+    background: #ff9426;
+}
+.button_contained.button_secondary:disabled {
+    background: #ffa140;
+}
+.button_contained.button_neutral {
+    background: #4d5359;
+}
+.button_contained.button_neutral:hover {
+    background: #40454a;
+}
+.button_contained.button_neutral:active {
+    background: #6c757d;
+}
+.button_contained.button_neutral:disabled {
+    background: #ffa140;
+}
+.button_contained.button_black {
+    background: #212529;
+}
+.button_contained.button_black:hover {
+    background: #40454a;
+}
+.button_contained.button_black:active {
+    background: #6c757d;
+}
+.button_contained.button_black:disabled {
+    background: #ffa140;
+}
+.button_outlined {
+    background: transparent;
+}
+.button_outlined.button_primary {
+    color: #0d46ff;
+    border-color: #0d46ff;
+    background: transparent;
+}
+.button_outlined.button_primary:hover {
+    background: rgba(13, 70, 255, 0.1);
+}
+.button_outlined.button_primary:active {
+    background: #d9e2ff;
+}
+.button_outlined.button_primary:disabled {
+    color: #0b3cd9;
+    border-color: #0b3cd9;
+}
+.button_outlined.button_secondary {
+    border-color: #ff7f00;
+    color: #ff7f00;
+}
+.button_outlined.button_secondary:hover {
+    background: rgba(255, 127, 0, 0.1);
+}
+.button_outlined.button_secondary:active {
+    background: #ffe6cc;
+}
+.button_outlined.button_secondary:disabled {
+    color: #0b3cd9;
+    border-color: #0b3cd9;
+}
+.button_outlined.button_neutral, .button_outlined.button_black {
+    border-color: #212529;
+    color: #212529;
+}
+.button_outlined.button_neutral:hover, .button_outlined.button_black:hover {
+    background: rgba(77, 83, 89, 0.1);
+}
+.button_outlined.button_neutral:active, .button_outlined.button_black:active {
+    background: #d3dae1;
+}
+.button_outlined.button_neutral:disabled, .button_outlined.button_black:disabled {
+    color: #9aa4ae;
+    border-color: #9aa4ae;
+}
+.button_transparent {
+    background: transparent;
+}
+.button_transparent.button_primary {
+    color: #0d46ff;
+    background: transparent;
+}
+.button_transparent.button_primary:hover {
+    background: rgba(13, 70, 255, 0.1);
+}
+.button_transparent.button_primary:active {
+    background: #d9e2ff;
+}
+.button_transparent.button_primary:disabled {
+    color: #0b3cd9;
+    background: none;
+}
+.button_transparent.button_secondary {
+    color: #ff7f00;
+}
+.button_transparent.button_secondary:hover {
+    background: rgba(255, 127, 0, 0.1);
+}
+.button_transparent.button_secondary:active {
+    background: #ffe6cc;
+}
+.button_transparent.button_secondary:disabled {
+    color: #0b3cd9;
+    background: none;
+}
+.button_transparent.button_neutral, .button_transparent.button_black {
+    color: #212529;
+}
+.button_transparent.button_neutral:hover, .button_transparent.button_black:hover {
+    background: rgba(77, 83, 89, 0.1);
+}
+.button_transparent.button_neutral:active, .button_transparent.button_black:active {
+    background: #d3dae1;
+}
+.button_transparent.button_neutral:disabled, .button_transparent.button_black:disabled {
+    color: #9aa4ae;
+    background: none;
+}
+.button__adornment {
+    font-size: inherit;
+}
+.button__adornment_end {
+    margin-left: 8px;
+}
+.button__adornment_start {
+    margin-right: 8px;
+}
+.button_large {
+    height: 42px;
+    font-size: 15px;
+}
+.button_medium {
+    height: 36px;
+    font-size: 14px;
+}
+.button_small {
+    height: 30px;
+    font-size: 13px;
+}
+.button_icon {
+    padding: 8px;
+    width: 56px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 30px;
+}
+.button_icon.button_large {
+    width: 42px;
+    font-size: 24px;
+}
+.button_icon.button_medium {
+    width: 36px;
+    font-size: 20px;
+}
+.button_icon.button_small {
+    width: 30px;
+    padding: 4px;
+    font-size: 16px;
+}
+.button_group {
+    display: flex;
+    align-items: center;
+}
+.button_group_inline {
+    flex-direction: row;
+}
+.button_group_column {
+    flex-direction: column;
+}
+.button_grouped_inline {
+    border-radius: 0;
+}
+.button_grouped_inline:first-child {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+.button_grouped_inline:last-child {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+.button_grouped_inline.button_contained.button_primary + * {
+    border-left-color: #0b3cd9;
+}
+.button_grouped_inline.button_contained.button_secondary + * {
+    border-left-color: #0b3cd9;
+}
+.button_grouped_inline.button_contained.button_neutral + * {
+    border-left-color: #40454a;
+}
+.button_grouped_inline.button_contained.button_black + * {
+    border-left-color: #40454a;
+}
+.button_grouped_inline.button_outlined.button_primary + * {
+    border-left-color: #0b3cd9;
+}
+.button_grouped_inline.button_outlined.button_primary:not(:last-child) {
+    border-right: 0;
+}
+.button_grouped_inline.button_outlined.button_secondary + * {
+    border-left-color: #ff7f00;
+}
+.button_grouped_inline.button_outlined.button_secondary:not(:last-child) {
+    border-right: 0;
+}
+.button_grouped_inline.button_outlined.button_neutral + * {
+    border-left-color: #4d5359;
+}
+.button_grouped_inline.button_outlined.button_neutral:not(:last-child) {
+    border-right: 0;
+}
+.button_grouped_inline.button_outlined.button_black + * {
+    border-left-color: #4d5359;
+}
+.button_grouped_inline.button_outlined.button_black:not(:last-child) {
+    border-right: 0;
+}
+.button_grouped_inline.button_transparent.button_primary + * {
+    border-left-color: #dfe2e6;
+}
+.button_grouped_inline.button_transparent.button_secondary + * {
+    border-left-color: #dfe2e6;
+}
+.button_grouped_inline.button_transparent.button_neutral + * {
+    border-left-color: #dfe2e6;
+}
+.button_grouped_inline.button_transparent.button_black + * {
+    border-left-color: #dfe2e6;
+}
+.button_grouped_column {
+    border-radius: 0;
+}
+.button_grouped_column:first-child {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+}
+.button_grouped_column:last-child {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+