armtek-uikit-react 1.0.2

package/lib/esm/shared/utils/helpers.js

@@ -0,0 +1,40 @@
+export const getVariants = except => {
+  let variants = {
+    contained: 'Заливка',
+    outlined: 'С границами',
+    transparent: 'Прозрачный'
+  };
+  if (except) variants = filter(variants, except);
+  return variants;
+};
+export const getColors = () => {
+  return {
+    primary: 'Основной',
+    secondary: 'Второстепенный',
+    neutral: 'Нейтральный'
+  };
+};
+export const getStatusColors = () => {
+  return {
+    info: 'Инфо',
+    error: 'Ошибка',
+    success: 'Успех',
+    warning: 'Уведомление'
+  };
+};
+export const getSizes = except => {
+  let sizes = {
+    small: 'Маленький',
+    medium: 'Средний',
+    large: 'Большой',
+    extraLarge: 'Огромный'
+  };
+  if (except) sizes = filter(sizes, except);
+  return sizes;
+};
+const filter = (obj, arr) => {
+  return Object.entries(obj).filter(item => !arr.includes(item[0])).reduce((prev, current) => {
+    prev[current[0]] = current[1];
+    return prev;
+  }, {});
+};

package/lib/esm/ui/Button/Button.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef, ElementType, HTMLAttributes, ReactNode } from 'react';
+import { ColorThemeType, ColorType, SizeType, VariantType } from '../../shared/types/theme';
+type OwnProps<T extends ElementType = ElementType> = {
+    children: ReactNode;
+    size?: SizeType;
+    color?: ColorType | Exclude<ColorThemeType, 'white'>;
+    variant?: VariantType;
+    startAdornment?: string | ReactNode;
+    endAdornment?: string | ReactNode;
+    group?: 'inline' | 'column';
+    as?: T;
+};
+export type ButtonProps<T extends ElementType = ElementType<HTMLAttributes<HTMLButtonElement>>> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps>;
+declare const Button: <T extends ElementType>(props: ButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default Button;

package/lib/esm/ui/Button/Button.js

@@ -0,0 +1,38 @@
+import './style.css'
+import clsx from 'clsx';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const Button = props => {
+  let {
+    size = 'extraLarge',
+    color = 'primary',
+    variant = 'contained',
+    endAdornment,
+    startAdornment,
+    children,
+    className,
+    group,
+    as,
+    ...restProps
+  } = props;
+  let Component = as || 'button';
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs(Component, {
+      ...restProps,
+      className: clsx('button', 'button_' + size, 'button_' + variant, 'button_' + color, className, {
+        ['button_grouped_' + group]: group
+      }),
+      children: [startAdornment && /*#__PURE__*/_jsx("div", {
+        className: clsx('button__adornment', 'button__adornment_start'),
+        children: startAdornment
+      }), /*#__PURE__*/_jsx("div", {
+        children: children
+      }), endAdornment && /*#__PURE__*/_jsx("div", {
+        className: clsx('button__adornment', 'button__adornment_end'),
+        children: endAdornment
+      })]
+    })
+  });
+};
+export default Button;

package/lib/esm/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/esm/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/esm/ui/Button/ButtonGroup.js

@@ -0,0 +1,20 @@
+import css from './Button.module.scss';
+import clsx from 'clsx';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const ButtonGroup = props => {
+  let {
+    orientation = 'inline',
+    className,
+    children,
+    ...restProps
+  } = props;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx("div", {
+      ...restProps,
+      className: clsx(css.button_group, css['button_group_' + orientation], className),
+      children: children
+    })
+  });
+};
+export default ButtonGroup;

package/lib/esm/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/esm/ui/Button/ButtonIcon.js

@@ -0,0 +1,15 @@
+import Button from './Button';
+import clsx from 'clsx';
+import css from './Button.module.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const ButtonIcon = props => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(Button, {
+      ...props,
+      className: clsx(css.button_icon, props.className),
+      children: props.children
+    })
+  });
+};
+export default ButtonIcon;