armtek-uikit-react 1.0.22 → 1.0.24

package/assets/Button.scss

@@ -198,21 +198,12 @@
 
 
 .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;
+      border-left-color: $color-secondary-dark;
     }
     &.button_neutral + *{
       border-left-color: $color-neutral-dark;
@@ -263,13 +254,58 @@
   }
 }
 .button_grouped_column{
-  border-radius: 0;
-  &:first-child{
-    border-top-left-radius: $radius;
-    border-top-right-radius: $radius;
+  &.button_contained{
+    &.button_primary + *{
+      border-top-color: $color-info-dark;
+    }
+    &.button_secondary + *{
+      border-top-color: $color-secondary-dark;
+    }
+    &.button_neutral + *{
+      border-top-color: $color-neutral-dark;
+    }
+    &.button_black + *{
+      border-top-color: $color-neutral-dark;
+    }
+  }
+  &.button_outlined{
+    &.button_primary + *{
+      border-top-color: $color-info-dark;
+    }
+    &.button_primary:not(:last-child){
+      border-bottom: 0;
+    }
+    &.button_secondary + *{
+      border-top-color: $color-secondary;
+    }
+    &.button_secondary:not(:last-child){
+      border-bottom: 0;
+    }
+    &.button_neutral + *{
+      border-top-color: $color-neutral;
+    }
+    &.button_neutral:not(:last-child){
+      border-bottom: 0;
+    }
+    &.button_black + *{
+      border-top-color: $color-neutral;
+    }
+    &.button_black:not(:last-child){
+      border-bottom: 0;
+    }
   }
-  &:last-child{
-    border-bottom-left-radius: $radius;
-    border-bottom-right-radius: $radius;
+  &.button_transparent{
+    &.button_primary + *{
+      border-top-color: $color-gray-200;
+    }
+    &.button_secondary + *{
+      border-top-color: $color-gray-200;
+    }
+    &.button_neutral + *{
+      border-top-color: $color-gray-200;
+    }
+    &.button_black + *{
+      border-top-color: $color-gray-200;
+    }
   }
 }

package/assets/ButtonGroup.scss

@@ -6,7 +6,34 @@
 }
 .button_group_inline{
   flex-direction: row;
+  & > * {
+    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_group_column{
   flex-direction: column;
-}
+  display: inline-block;
+  & > * {
+    border-radius: 0;
+    width: 100%;
+    &:not(:first-child){
+      border-top-color: transparent;
+    }
+    &: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/package.json

@@ -1 +1 @@
-{"name":"armtek-uikit-react","version":"1.0.22","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":"*"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
+{"name":"armtek-uikit-react","version":"1.0.24","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":"*"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}

package/ui/AvatarGroup/AvatarGroup.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { AvatarProps } from '../Avatar/Avatar';
+import { AvatarProps } from '../../ui/Avatar/Avatar';
 export type AvatarGroupProps = {
     limit?: number;
     children: ReactNode;

package/ui/Button/Button.js

@@ -3,7 +3,7 @@ import css from "./Button.module.scss";
 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 ButtonClasses = ['button', 'button_contained', 'button_transparent', 'button_outlined', 'button_primary', 'button_secondary', 'button_neutral', 'button_black', 'button__adornment', 'button__adornment_end', 'button__adornment_start', 'button_large', 'button_medium', 'button_small', 'button_icon', 'button_group', 'button_group_inline', 'button_group_column', 'button_grouped_inline', 'button_grouped_column'];
+const ButtonClasses = ['Arm-button', 'button', 'button_contained', 'button_transparent', 'button_outlined', 'button_primary', 'button_secondary', 'button_neutral', 'button_black', 'button__adornment', 'button__adornment_end', 'button__adornment_start', 'button_large', 'button_medium', 'button_small', 'button_icon', 'button_group', 'button_group_inline', 'button_group_column', 'button_grouped_inline', 'button_grouped_column'];
 
 // const css = getCssPrefix(ButtonClasses)
 
@@ -25,7 +25,7 @@ const Button = props => {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs(Component, {
       ...restProps,
-      className: clsx(css.button, css['button_' + size], css['button_' + variant], css['button_' + color], className, {
+      className: clsx('Arm-button', css.button, css['button_' + size], css['button_' + variant], css['button_' + color], className, {
         [css['button_grouped_' + group]]: group,
         [css.button_radius_none]: radius === false,
         [css.button_radius_full]: radius === true

package/ui/ButtonGroup/ButtonGroup.d.ts

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

package/ui/ButtonGroup/ButtonGroup.js

@@ -1,5 +1,6 @@
+import { Children, cloneElement, isValidElement } from 'react';
 import clsx from 'clsx';
-import css from "../Button/Button.module.scss";
+import css from "./ButtonGroup.module.scss";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const ButtonGroupClasses = ['button_group', 'button_group_inline', 'button_group_column'];
@@ -11,13 +12,20 @@ const ButtonGroup = props => {
     orientation = 'inline',
     className,
     children,
-    ...restProps
+    ...buttonProps
   } = props;
+  let arrChildren = Children.toArray(children);
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx("div", {
-      ...restProps,
       className: clsx(css.button_group, css['button_group_' + orientation], className),
-      children: children
+      children: arrChildren.map((item, index) => {
+        return /*#__PURE__*/isValidElement(item) && /*#__PURE__*/cloneElement(item, {
+          ...item.props,
+          ...buttonProps,
+          group: orientation,
+          key: index
+        });
+      })
     })
   });
 };