armtek-uikit-react 1.0.41 → 1.0.43

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/Avatar.scss

@@ -20,7 +20,11 @@
   @include flex(center);
 }
 .avatar__innerText{
-
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
 }
 .avatar_medium{
   width: 40px;

package/assets/Button.scss

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

package/assets/Chip.scss

@@ -5,7 +5,8 @@
   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{
@@ -50,8 +51,12 @@
 }
 
 .chip_small{
+  height: 24px;
   padding: 4px $size-step;
 }
+.chip_medium{
+  height: 32px;
+}
 .chip__icon_small{
   font-size: 18px;
   margin-left: 0;
@@ -66,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{
@@ -82,65 +82,114 @@ 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{
-    color: #fff;
     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_info,
-button.chip_info{
+a.chip_black,
+button.chip_black{
   &:hover{
     background-color: $color-neutral-dark;
   }
+  &.chip_outlined:hover{
+    background: $color-gray-100;
+  }
 }
 
 .chip_white{
@@ -152,9 +201,17 @@ button.chip_white{
     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,
@@ -162,6 +219,9 @@ button.chip_primary{
   &:hover{
     background-color: $color-primary-dark;
   }
+  &.chip_outlined:hover{
+    background: $color-blue-100;
+  }
 }
 
 

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.41","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.43","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/Avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { ComponentPropsWithoutRef, HTMLAttributes } from 'react';
 import { ColorStatusType, SizeType } from '../../types/theme';
 export type AvatarProps = {
     photo?: string;
@@ -8,7 +8,7 @@ export type AvatarProps = {
     icon?: string;
     size?: Exclude<SizeType, 'extraLarge'>;
     status?: Exclude<ColorStatusType, 'info'>;
-};
+} & ComponentPropsWithoutRef<'div'>;
 export declare const getLetters: (name: string) => string;
 declare const Avatar: (props: AvatarProps) => import("react/jsx-runtime").JSX.Element;
 export default Avatar;

package/ui/Avatar/Avatar.js

@@ -12,10 +12,21 @@ export const getLetters = name => {
   return nameParts[0].split('')[0] + (nameParts[1] ? nameParts[1].split('')[0] : '');
 };
 const Avatar = props => {
-  let icon = props.icon;
-  if (!props.icon && !props.name && !props.photo) icon = 'person';
-  let content = props.photo ? /*#__PURE__*/_jsx("img", {
-    src: props.photo,
+  const {
+    photo,
+    name,
+    href,
+    linkProps,
+    icon,
+    size,
+    status,
+    className,
+    ...divProps
+  } = props;
+  let displayIcon = icon;
+  if (!props.icon && !props.name && !photo) displayIcon = 'person';
+  let content = photo ? /*#__PURE__*/_jsx("img", {
+    src: photo,
     className: css.avatar__img,
     alt: props.name,
     title: props.name
@@ -24,26 +35,27 @@ const Avatar = props => {
     children: getLetters(props.name)
   }) : /*#__PURE__*/_jsx("span", {
     className: clsx(css.avatar__icon, 'material_icon_solid'),
-    children: icon
+    children: displayIcon
   });
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs("div", {
-      className: clsx('Arm-avatar', {
-        [css.avatar__photo]: !!props.photo
-      }, css.avatar, css['avatar_' + props.size]),
+      ...divProps,
+      className: clsx('Arm-avatar', className, {
+        [css.avatar__photo]: !!photo
+      }, css.avatar, css['avatar_' + size]),
       children: [/*#__PURE__*/_jsx("div", {
         className: css.avatar__inner,
-        children: props.href ? /*#__PURE__*/_jsx("a", {
-          href: props.href,
-          ...props.linkProps,
+        children: href ? /*#__PURE__*/_jsx("a", {
+          href: href,
+          ...linkProps,
           className: css.avatar__innerText,
           children: content
         }) : /*#__PURE__*/_jsx("span", {
           className: css.avatar__innerText,
           children: content
         })
-      }), props.status && /*#__PURE__*/_jsx("span", {
-        className: clsx(css.avatar__status, css['avatar__status_' + props.status])
+      }), status && /*#__PURE__*/_jsx("span", {
+        className: clsx(css.avatar__status, css['avatar__status_' + status])
       })]
     })
   });