armtek-uikit-react 1.0.39 → 1.0.42

package/assets/Alert.scss

@@ -22,7 +22,7 @@
 }
 .alert_success{
   color: $color-success-dark;
-  background: $color-greent-50;
+  background: $color-green-50;
 }
 .alert_warning{
   color: $color-secondary-dark;

package/assets/Button.scss

@@ -19,6 +19,12 @@
     cursor: initial;
   }
 }
+.button__iconWrapper{
+  font-size: 0;
+  & > span{
+    font-size: initial;
+  }
+}
 .button_radius_none{
   border-radius: 0;
 }

package/assets/Chip.scss

@@ -5,8 +5,14 @@
   padding: calc($size-step / 1.5) calc($size-step * 1.5);
   border-radius: 20px;
   font-size: 13px;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+}
+
+.chip_square{
+  border-radius: $radius;
 }
+
 .chip__text{
   line-height: 1.15;
 }
@@ -45,8 +51,12 @@
 }
 
 .chip_small{
+  height: 24px;
   padding: 4px $size-step;
 }
+.chip_medium{
+  height: 32px;
+}
 .chip__icon_small{
   font-size: 18px;
   margin-left: 0;
@@ -61,12 +71,7 @@
   border: 1px solid $color-gray-400;
 }
 
-a.chip,
-button.chip{
-  &:hover{
-    background: $color-gray-300;
-  }
-}
+
 a.chip_outlined,
 button.chip_outlined{
   &:hover{
@@ -77,17 +82,136 @@ button.chip_outlined{
 .chip_secondary{
   color: #fff;
   background-color: $color-secondary;
+  &.chip_outlined{
+    border-color: $color-secondary;
+    background: transparent;
+    color: $color-secondary;
+  }
 }
 a.chip_secondary,
 button.chip_secondary{
   &:hover{
     background-color: $color-secondary-dark;
   }
+  &.chip_outlined:hover{
+    background-color: $color-orange-100;
+  }
 }
 
+.chip_success{
+  background-color: $color-success;
+  &.chip_outlined{
+    border-color: $color-success;
+    background: transparent;
+    color: $color-success;
+  }
+}
+a.chip_success,
+button.chip_success{
+  &:hover{
+    background-color: $color-success-dark;
+  }
+  &.chip_outlined:hover{
+    background-color: $color-green-100;
+  }
+}
+
+
+
+.chip_error{
+  background-color: $color-error;
+  &.chip_outlined{
+    border-color: $color-error;
+    background: transparent;
+    color: $color-error;
+  }
+}
+a.chip_error,
+button.chip_error{
+  &:hover{
+    background-color: $color-error-dark;
+  }
+  &.chip_outlined:hover{
+    background: $color-red-100;
+  }
+}
+
+.chip_warning{
+  background-color: $color-warning;
+  &.chip_outlined{
+    border-color: $color-warning;
+    background: transparent;
+    color: $color-warning;
+  }
+}
+a.chip_warning,
+button.chip_warning{
+  &:hover{
+    background-color: $color-warning-dark;
+  }
+  &.chip_outlined:hover{
+    background: $color-orange-100;
+  }
+}
+
+.chip_info{
+  color: #fff;
+  background-color: $color-info;
+  &.chip_outlined{
+    border-color: $color-info;
+    background: transparent;
+    color: $color-info;
+  }
+}
+a.chip_info,
+button.chip_info{
+  &:hover{
+    background-color: $color-info-dark;
+  }
+  &.chip_outlined:hover{
+    background: $color-blue-100;
+  }
+}
+
+.chip_black{
+  color: #fff;
+  background-color: $color-neutral;
+  &.chip_outlined{
+    border-color: $color-neutral;
+    background: transparent;
+    color: $color-neutral;
+  }
+}
+a.chip_black,
+button.chip_black{
+  &:hover{
+    background-color: $color-neutral-dark;
+  }
+  &.chip_outlined:hover{
+    background: $color-gray-100;
+  }
+}
+
+.chip_white{
+  background: #fff;
+}
+a.chip_white,
+button.chip_white{
+  &:hover{
+    background-color: $color-gray-100;
+  }
+}
+
+
+
 .chip_primary{
   color: #fff;
   background-color: $color-primary;
+  &.chip_outlined{
+    border-color: $color-primary;
+    background: transparent;
+    color: $color-primary;
+  }
 }
 
 a.chip_primary,
@@ -95,7 +219,12 @@ button.chip_primary{
   &:hover{
     background-color: $color-primary-dark;
   }
+  &.chip_outlined:hover{
+    background: $color-blue-100;
+  }
 }
+
+
 .chip_disabled{
   pointer-events: none;
   opacity: 0.5;

package/assets/StepItemIcon.scss

@@ -20,6 +20,7 @@
   }
   border-color: $color-primary;
   color: $color-primary;
+  background: #fff;
 }
 
 .stepItemIcon__inner{

package/assets/variables.scss

@@ -10,9 +10,10 @@ $radius: 4px;
 $color-primary: #0D46FF;
 $color-primary-dark: #0B3CD9;
 $color-primary-light: #0B3CD9;
-$color-blue-800: #406DFF;
 $color-blue-A100: #D9E2FF;
 $color-blue-50: #F2F5FF;
+$color-blue-100: #DFF0FF;
+$color-blue-800: #406DFF;
 
 $color-info: #0D46FF;
 $color-info-dark: #0B3CD9;
@@ -40,7 +41,9 @@ $color-gray-200: #DFE2E6;
 $color-gray-100: #E9ECEF;
 $color-gray-50: #F8F9FA;
 
-$color-greent-50: #F2FFFB;
+$color-green-50: #F2FFFB;
+$color-green-100: #DEFDEE;
+$color-green-300: #ACF7D6;
 
 $color-success: #0BD998;
 $color-success-dark: #08996B;
@@ -50,6 +53,7 @@ $color-warning: #FFC61A;
 $color-warning-dark: #F7B519;
 
 $color-red-50: #FFF0F1;
+$color-red-100: #FCE1E1;
 
 $box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.1);
 
@@ -95,7 +99,7 @@ $box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.1);
   --color-gray-100: #E9ECEF;
   --color-gray-50: #F8F9FA;
 
-  --color-greent-50: #F2FFFB;
+  --color-green-50: #F2FFFB;
 
   --color-success: #0BD998;
   --color-success-dark: #08996B;

package/package.json

@@ -1 +1 @@
-{"name":"armtek-uikit-react","version":"1.0.39","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*","clsx":"^2.0.0"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
+{"name":"armtek-uikit-react","version":"1.0.42","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*","clsx":"^2.0.0"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}

package/ui/Alert/Alert.js

@@ -38,7 +38,10 @@ const Alert = props => {
         color: 'neutral',
         variant: 'transparent',
         className: clsx(css.alert__close, 'material_icon'),
-        children: "close"
+        children: /*#__PURE__*/_jsx("span", {
+          className: 'material_icon',
+          children: "close"
+        })
       })]
     })
   });

package/ui/Button/Button.d.ts

@@ -9,6 +9,7 @@ type OwnProps<T extends ElementType = ElementType> = {
     endAdornment?: string | ReactNode;
     group?: 'inline' | 'column';
     radius?: boolean;
+    icon?: boolean;
     as?: T;
 };
 export type ButtonProps<T extends ElementType = ElementType<HTMLAttributes<HTMLButtonElement>>> = OwnProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof OwnProps>;

package/ui/Button/Button.js

@@ -34,6 +34,7 @@ const Button = props => {
         className: clsx(css.button__adornment, css.button__adornment_start),
         children: startAdornment
       }), /*#__PURE__*/_jsx("div", {
+        className: css.button__iconWrapper,
         children: children
       }), endAdornment && /*#__PURE__*/_jsx("div", {
         className: clsx(css.button__adornment, css.button__adornment_end),

package/ui/ButtonIcon/ButtonIcon.js

@@ -11,6 +11,7 @@ const ButtonIcon = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(Button, {
       ...props,
+      icon: true,
       className: clsx(css.button_icon, css['button_icon_' + props.size], props.className),
       children: props.children
     })

package/ui/Chip/Chip.d.ts

@@ -1,12 +1,13 @@
 import { ComponentPropsWithoutRef, ElementType, MouseEvent, HTMLAttributes } from 'react';
-import { ColorType, SizeType, VariantType } from '../../types/theme';
+import { ColorStatusType, ColorThemeType, ColorType, SizeType, VariantType, ShapeType } from '../../types/theme';
 export type ChipProps<T extends ElementType = ElementType<HTMLAttributes<HTMLSpanElement>>> = Omit<ComponentPropsWithoutRef<T>, 'color'> & {
     size?: Exclude<SizeType, 'large' | 'extraLarge'>;
-    color?: ColorType;
+    color?: ColorType | ColorThemeType | ColorStatusType;
     text?: string;
     onClose?: (e: MouseEvent) => void;
     icon?: string;
     variant?: Exclude<VariantType, 'transparent'>;
+    shape?: ShapeType;
     as?: T;
     disabled?: boolean;
     className?: string;

package/ui/Chip/Chip.js

@@ -13,6 +13,7 @@ function Chip(props) {
     text,
     icon,
     onClose,
+    shape = 'circle',
     as,
     variant,
     color,
@@ -21,11 +22,12 @@ function Chip(props) {
     disabled
   } = props;
   let Component = as || 'span';
+  console.log(onClose);
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(Component, {
       className: clsx('Arm-chip', className, {
         [css.chip_disabled]: !!disabled
-      }, css.chip, css['chip_' + size], css['chip_' + variant], css['chip_' + color]),
+      }, css.chip, css['chip_' + size], css['chip_' + variant], css['chip_' + color], css['chip_' + shape]),
       children: /*#__PURE__*/_jsxs("span", {
         className: css.chip__inner,
         children: [icon && /*#__PURE__*/_jsx("span", {
@@ -39,7 +41,10 @@ function Chip(props) {
             [css.chip__close_disabled]: !!disabled
           }, css['chip__close_' + size], css['chip__close_' + color], css.chip__close),
           onClick: onClose,
-          children: "cancel"
+          children: /*#__PURE__*/_jsx("span", {
+            className: 'material_icon',
+            children: "cancel"
+          })
         })]
       })
     })