armtek-uikit-react 1.0.55 → 1.0.57

package/assets/ListItem.scss

@@ -4,7 +4,7 @@
   outline: none;
   padding: calc($size-step * 1.5) calc($size-step * 2);
   color: $color-neutral;
-  background: transparent;
+  background: #fff;
   @include transition(0.3s, background);
   @include flex();
   width: 100%;
@@ -19,8 +19,20 @@
     background: rgba($color-primary, 0.1);
   }
 }
-.listitem_startAdornment{
 
+.listitem_disabled{
+  pointer-events: none;
+  background: #fff;
+  color: $color-gray-400;
+  user-select: none;
+  cursor: default;
+}
+.listitem__Content{
+  display: block;
+  margin-right: calc($size-step * 2);
+}
+.listitem__Content_adornment_left{
+  margin-left: calc($size-step * 2);
 }
 .listitem_endAdornment{
 
@@ -30,5 +42,9 @@
 }
 .listitemText{
   display: block;
-  margin: 0 calc($size-step * 2);
+}
+.listitem__helper{
+  margin-top: calc($size-step / 2);
+  display: block;
+  color: $color-neutral-light;
 }

package/assets/Table.scss

@@ -0,0 +1,29 @@
+@import "variables";
+
+.table{
+  width: 100%;
+  margin:0;
+  padding:0;
+  background:none;
+  border:none;
+  border-collapse:collapse;
+  border-spacing:0;
+}
+
+.tableCell{
+  color: $color-gray-800;
+  font-size: 14px;
+}
+.tableCellInner{
+  padding: calc($size-step * 2 ) $size-step;
+}
+.tableCell_head{
+  color: $color-gray-500
+}
+.tableRow td{
+  border-bottom: 1px solid $color-gray-300;
+  background: #fff;
+}
+.tableRow:hover td{
+  background: #F8F9FA;
+}

package/package.json

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

package/ui/Form/DateField/DateField.js

@@ -22,8 +22,10 @@ const DateInput = /*#__PURE__*/forwardRef((props, ref) => {
       variant: 'transparent',
       onClick: props.onClick,
       color: 'neutral',
-      className: 'material_icon',
-      children: inputIcon
+      children: /*#__PURE__*/_jsx("span", {
+        className: 'material_icon',
+        children: inputIcon
+      })
     })
   });
 });

package/ui/Form/Password/Password.js

@@ -32,8 +32,10 @@ export const Password = /*#__PURE__*/forwardRef((props, ref) => {
         variant: 'transparent',
         color: 'neutral',
         onClick: handleClick,
-        className: 'material_icon',
-        children: isPassword ? 'visibility_off' : 'visibility'
+        children: /*#__PURE__*/_jsx("span", {
+          className: 'material_icon',
+          children: isPassword ? 'visibility_off' : 'visibility'
+        })
       })
     })
   });

package/ui/Form/Select/Select.js

@@ -87,8 +87,10 @@ function Select(props) {
     }), /*#__PURE__*/_jsx(ButtonIcon, {
       size: 'small',
       variant: 'transparent',
-      className: 'material_icon',
-      children: "arrow_drop_down"
+      children: /*#__PURE__*/_jsx("span", {
+        className: 'material_icon',
+        children: "arrow_drop_down"
+      })
     })]
   });
   let selectProps = {};

package/ui/List/ListItem.js

@@ -13,6 +13,7 @@ const ListItem = props => {
   let {
     children,
     className,
+    title,
     active,
     divider,
     checked,
@@ -27,6 +28,7 @@ const ListItem = props => {
       className: clsx(css.listitem, className, {
         [css.listitem_active]: !!active || !!checked,
         [css.listitem_divider]: !!divider,
+        [css.listitem_disabled]: !!restProps.disabled,
         [css.listitem_endAdornment]: !!endAdornment,
         [css.listitem_startAdornment]: withStartAdornment
       }),
@@ -43,9 +45,17 @@ const ListItem = props => {
           position: 'start',
           children: startAdornment
         })]
-      }), /*#__PURE__*/_jsx("span", {
-        className: css.listitemText,
-        children: children
+      }), /*#__PURE__*/_jsxs("span", {
+        className: clsx(css.listitem__Content, {
+          [css.listitem__content_adornment_left]: withStartAdornment
+        }),
+        children: [/*#__PURE__*/_jsx("span", {
+          className: clsx(css.listitemText),
+          children: children
+        }), title && /*#__PURE__*/_jsx("span", {
+          className: css.listitem__helper,
+          children: title
+        })]
       }), !!endAdornment && /*#__PURE__*/_jsx(AdornmentContainer, {
         position: 'end',
         children: /*#__PURE__*/_jsx(Adornment, {

package/ui/Modal/BaseModal.js

@@ -47,6 +47,7 @@ export const BaseModal = props => {
       }), showControls && /*#__PURE__*/_jsx("div", {
         className: clsx('Arm-Modal__footer', classes == null ? void 0 : classes['Arm-Modal__footer'], css.Modal__footer),
         children: /*#__PURE__*/_jsx(FormControls, {
+          className: classes == null ? void 0 : classes['Arm-FormControls'],
           onSubmit: onSubmit,
           onCancel: onCancel,
           submitProps: submitProps,

package/ui/Table/Table.d.ts

@@ -0,0 +1,22 @@
+import { ComponentPropsWithoutRef, ReactNode, MouseEvent } from 'react';
+type ItemType = Record<string, any>;
+type ClassesType<T extends ItemType> = {
+    tableRowHead?: string;
+    tableRow?: string | ((item: T) => string);
+    tableCellHead?: string;
+    tableCell?: string;
+};
+export type TableColType<T extends ItemType> = {
+    text: string;
+    getValue?: (item: T) => string | ReactNode | number;
+    getTitle?: () => string | ReactNode | number;
+    code: keyof T;
+};
+type TableProps<T extends ItemType> = Omit<ComponentPropsWithoutRef<'table'>, 'onClick'> & {
+    classes?: ClassesType<T>;
+    structure: TableColType<T>[];
+    items: T[];
+    onClick: (item: T, e: MouseEvent<HTMLTableRowElement>) => void;
+};
+export declare function Table<T extends ItemType>(props: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/ui/Table/Table.js

@@ -0,0 +1,43 @@
+import clsx from 'clsx';
+import { TableRow } from "./TableRow";
+import { TableCell } from "./TableCell";
+import css from "./Table.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";
+// TODO TESTS
+export function Table(props) {
+  const {
+    className,
+    structure,
+    items,
+    onClick,
+    classes,
+    ...tableProps
+  } = props;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("table", {
+      ...tableProps,
+      className: clsx(className, css.table),
+      children: [/*#__PURE__*/_jsx(TableRow, {
+        className: classes == null ? void 0 : classes.tableRowHead,
+        children: structure.map(item => /*#__PURE__*/_jsx(TableCell, {
+          head: true,
+          className: classes == null ? void 0 : classes.tableCellHead,
+          children: item.getTitle ? item.getTitle() : item.text
+        }))
+      }), items.map(row => {
+        let rowClass = !!(classes != null && classes.tableRow) ? typeof classes.tableRow === 'string' ? classes.tableRow : classes.tableRow(row) : '';
+        return /*#__PURE__*/_jsx(TableRow, {
+          className: rowClass,
+          onClick: e => onClick(row, e),
+          children: structure.map(item => {
+            return /*#__PURE__*/_jsx(TableCell, {
+              children: item.getValue ? item.getValue(row) : row[item.code]
+            });
+          })
+        });
+      })]
+    })
+  });
+}

package/ui/Table/Table.module.scss

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

package/ui/Table/TableCell.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef } from 'react';
+type TableCellProps = ComponentPropsWithoutRef<'td'> & {
+    head?: boolean;
+};
+export declare const TableCell: (props: TableCellProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/ui/Table/TableCell.js

@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+import css from "./Table.module.scss";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export const TableCell = props => {
+  const {
+    className,
+    children,
+    head,
+    ...cellProps
+  } = props;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx("td", {
+      ...cellProps,
+      className: clsx(className, css.tableCell, {
+        [css.tableCell_head]: !!head
+      }),
+      children: /*#__PURE__*/_jsx("div", {
+        className: css.tableCellInner,
+        children: children
+      })
+    })
+  });
+};

package/ui/Table/TableRow.d.ts

@@ -0,0 +1,4 @@
+import { ComponentPropsWithoutRef } from 'react';
+type TableRowProps = ComponentPropsWithoutRef<'tr'>;
+export declare const TableRow: (props: TableRowProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/ui/Table/TableRow.js

@@ -0,0 +1,18 @@
+import clsx from 'clsx';
+import css from "./Table.module.scss";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export const TableRow = props => {
+  const {
+    className,
+    children,
+    ...rowProps
+  } = props;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx("tr", {
+      ...rowProps,
+      className: clsx(className, css.tableRow),
+      children: children
+    })
+  });
+};

package/ui/Table/index.d.ts

@@ -0,0 +1,3 @@
+export { Table, type TableColType } from './Table';
+export { TableCell } from './TableCell';
+export { TableRow } from './TableRow';

package/ui/Table/index.js

@@ -0,0 +1,3 @@
+export { Table } from "./Table";
+export { TableCell } from "./TableCell";
+export { TableRow } from "./TableRow";