armtek-uikit-react 1.0.86 → 1.0.88

package/assets/Button.scss

@@ -205,10 +205,10 @@
   &.button_primary{
     color: var(--color-primary);
     &:hover{
-      background-color: rgba(var(--color-blue-800), 0.1);
+      background-color: rgba(var(--color-blue-800-rgba), 0.1);
     }
     &:active{
-      background-color: rgba(var(--color-blue-800), 0.2);
+      background-color: rgba(var(--color-blue-800-rgba), 0.2);
     }
     &:disabled{
       opacity: 0.6;
@@ -218,10 +218,10 @@
   &.button_secondary {
     color: var(--color-secondary);
     &:hover{
-      background-color: rgba(var(--color-secondary), 0.1);
+      background-color: rgba(var(--color-secondary-rgba), 0.1);
     }
     &:active{
-      background-color: rgba(var(--color-secondary-light), 0.2);
+      background-color: rgba(var(--color-secondary-light-rgb), 0.2);
     }
     &:disabled{
       opacity: 0.4;
@@ -231,20 +231,20 @@
   &.button_black {
     color: var(--color-gray-900);
     &:hover{
-      background: rgba($color-neutral, 0.1);
+      background: rgba(var(--color-neutral-rgba), 0.1);
     }
     &:active{
-      background: $color-gray-300;
+      background: var(--color-gray-300);
     }
     &:disabled{
-      color: $color-neutral-light;
+      color: var(--color-neutral-light);
       background: none;
     }
   }
   &.button_green {
     color: var(--color-success);
     &:hover{
-      background-color: rgba(var(--color-success), 0.1);
+      background-color: rgba(var(--color-success-rgb), 0.1);
     }
     &:active{
       background-color: var(--color-green-100);
@@ -256,7 +256,7 @@
   &.button_red {
     color: var(--color-error);
     &:hover{
-      background-color: rgba(var(--color-error), 0.1);
+      background-color: rgba(var(--color-error-rgba), 0.1);
     }
     &:active{
       background-color: var(--color-red-100);

package/assets/Icon.scss

@@ -0,0 +1,21 @@
+@import "variables";
+
+.Icon_size_small{
+  font-size: 11px;
+}
+.Icon_size_medium{
+  font-size: 13px;
+}
+.Icon_size_large{
+  font-size: 14px;
+}
+.Icon_size_extraLarge{
+  font-size: 16px;
+}
+.Icon_color_primary{color: var(--color-primary)}
+.Icon_color_secondary{color: var(--color-secondary)}
+.Icon_color_neutral{color: var(--color-neutral)}
+.Icon_color_success{color:var(--color-success)}
+.Icon_color_info{color:var(--color-info)}
+.Icon_color_warning{color:var(--color-warning)}
+.Icon_color_error{color:var(--color-error)}

package/assets/Tooltip.scss

@@ -14,5 +14,6 @@
   font-size: 12px;
   left: 50%;
   bottom: 100%;
+  display: inline-flex;
   //transform: translateX(-50%);
 }

package/assets/global.css

@@ -35,6 +35,7 @@ body{
     --color-secondary: #FF7F00;
     --color-secondary-rgba: 255, 127, 0;
     --color-secondary-light: #FFA140;
+    --color-secondary-light-rgb: 255, 161, 64;
     --color-secondary-dark: #D96C00;
     --color-secondary-opacity: rgba(255, 127, 0, 0.08);
     --color-secondary-contrast: #ffffff;
@@ -66,6 +67,7 @@ body{
     --color-info-contrast: #ffffff;
 
     --color-success: #0BD998;
+    --color-success-rgb: 11, 217, 152;
     --color-success-light: #38E6A4;
     --color-success-dark: #00A66F;
     --color-success-opacity: rgba(11, 196, 127, 0.08);
@@ -95,6 +97,7 @@ body{
     --color-blue-d2: #1841BE;
     --color-blue-d1: #1D49D5;
     --color-blue-900: #254FE9;
+    --color-blue-800-rgba: 47, 97, 248;
     --color-blue-800: #2F61F8;
     --color-blue-700: #4277FD;
     --color-blue-600: #6092FF;

package/package.json

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

package/ui/Icon/Icon.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { ColorStatusType, ColorType, SizeType, VariantType } from '../../types/theme';
+type OwnProps = {
+    icon: string;
+    variant?: VariantType;
+    color?: ColorType | ColorStatusType;
+    size?: SizeType;
+    fs?: number;
+};
+export type IconProps = OwnProps & Omit<ComponentPropsWithoutRef<'span'>, keyof OwnProps>;
+declare const Icon: import("react").ForwardRefExoticComponent<OwnProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, keyof OwnProps> & import("react").RefAttributes<HTMLSpanElement>>;
+export default Icon;

package/ui/Icon/Icon.js

@@ -0,0 +1,34 @@
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import css from "./Icon.module.scss";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const Icon = /*#__PURE__*/forwardRef((props, ref) => {
+  let {
+    children,
+    className,
+    size,
+    icon,
+    variant = 'outlined',
+    color,
+    fs,
+    ...spanProps
+  } = props;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx("span", {
+      ref: ref,
+      ...spanProps,
+      className: clsx(className, 'Arm-Icon', {
+        [css['Icon_size_' + size]]: size,
+        'mi': variant === 'outlined',
+        'mis': variant === 'contained',
+        [css['Icon_color_' + color]]: color
+      }),
+      style: fs ? {
+        fontSize: fs + 'px'
+      } : undefined,
+      children: icon || children
+    })
+  });
+});
+export default Icon;

package/ui/Icon/Icon.module.scss

@@ -0,0 +1 @@
+@import "./../../assets/Icon";

package/ui/Icon/Mi.d.ts

@@ -0,0 +1,6 @@
+import { IconProps } from './Icon';
+import { TooltipProps } from '../../ui/Tooltip';
+export type MiProps = {
+    tooltipProps?: Omit<TooltipProps, 'text' | 'children'>;
+} & IconProps;
+export declare const Mi: (props: MiProps) => import("react/jsx-runtime").JSX.Element;

package/ui/Icon/Mi.js

@@ -0,0 +1,24 @@
+import Icon from "./Icon";
+import Tooltip from "../Tooltip";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export const Mi = props => {
+  const {
+    tooltipProps,
+    title,
+    ...iconProps
+  } = props;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: title ? /*#__PURE__*/_jsx(Tooltip, {
+      ...tooltipProps,
+      text: title,
+      children: /*#__PURE__*/_jsx(Icon, {
+        ...iconProps,
+        variant: 'outlined'
+      })
+    }) : /*#__PURE__*/_jsx(Icon, {
+      ...iconProps,
+      variant: 'outlined'
+    })
+  });
+};

package/ui/Icon/Mis.d.ts

@@ -0,0 +1,2 @@
+import { MiProps } from './Mi';
+export declare const Mis: (props: Omit<MiProps, 'variant'>) => import("react/jsx-runtime").JSX.Element;

package/ui/Icon/Mis.js

@@ -0,0 +1,11 @@
+import { Mi } from "./Mi";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export const Mis = props => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(Mi, {
+      ...props,
+      variant: 'contained'
+    })
+  });
+};

package/ui/Icon/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './Icon';
+export { Mi } from './Mi';
+export { Mis } from './Mis';
+export * from './Icon';

package/ui/Icon/index.js

@@ -0,0 +1,4 @@
+export { default } from "./Icon";
+export { Mi } from "./Mi";
+export { Mis } from "./Mis";
+export * from "./Icon";