react-artasys-ui 0.0.6 → 0.0.7

package/lib/Checkbox/Checkbox.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { IElement } from "../Form/Element";
 interface ICheckbox extends IElement<HTMLInputElement> {
-    onChangeText?: (text: string) => void;
     type?: 'checkbox' | 'radio';
 }
 declare const Checkbox: import("react").ForwardRefExoticComponent<ICheckbox & import("react").RefAttributes<HTMLInputElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-artasys-ui",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "",
   "main": "dist/index.js",
   "types": "lib/index.d.ts",

package/src/Button/Button.tsx

@@ -13,9 +13,14 @@ interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 
 const Button = ({children, className, classNameContainer, styleContainer, spinnerColor = 'contrast', wait = false, ...props}: IButton) => {
 
-	return(<div className={styles['container'] + (classNameContainer ? ' ' + classNameContainer : '')} style={styleContainer}>
-		<button {...props} className={className}>{children}</button>
-		<div className={styles['wait-indicator'] + (wait ? ' ' + styles['active'] : '')}>
+	const classes = ['ui-button-container'];
+
+	classes.push(styles['container']);
+	if (classNameContainer) classes.push(classNameContainer);
+
+	return(<div className={classes.join(' ')} style={styleContainer}>
+		<button {...props} className={'ui-button ' + className}>{children}</button>
+		<div className={'ui-button-spinner' + styles['wait-indicator'] + (wait ? ' ' + styles['active'] : '')}>
 			<Spinner size="small" color={spinnerColor}/>
 		</div>
 	</div>)

package/src/Checkbox/Checkbox.tsx

@@ -5,17 +5,16 @@ import Element,{
 import styles from "./style.module.css";
 
 interface ICheckbox extends IElement<HTMLInputElement> {
-	onChangeText?: (text: string) => void;
 	type?: 'checkbox' | 'radio';
 }
 
-const Checkbox = forwardRef<HTMLInputElement, ICheckbox>(({type = 'checkbox', hiddenContainer = true, placeholder, ...props}: ICheckbox) => {
+const Checkbox = forwardRef<HTMLInputElement, ICheckbox>(({type = 'checkbox', hiddenContainer = true, placeholder, ...props}, ref) => {
 
 	return(<Element {...props} hiddenContainer={hiddenContainer}>
-		{(props) => <div className={styles['container']}>
-				<input {...props} type={type}/>
-				<span className={styles['indicator']}/>
-				<span className={styles['text']}>{placeholder}</span>
+		{(props) => <div className={'ui-checkbox-container' + styles['container']}>
+				<input {...props} className={'ui-checkbox' + props.className ? ' ' + props.className : ''} type={type} ref={ref}/>
+				<span className={'ui-checkbox-indicator ' + styles['indicator']}/>
+				<span className={'ui-checkbox-text ' + styles['text']}>{placeholder}</span>
 			</div>}
 	</Element>);
 });

package/src/Form/Element/Element.tsx

@@ -25,7 +25,7 @@ const Element = ({children, beforeElement, afterElement, error, placeholder, dis
 		setCurrentError(error ?? '');
 	},[error]);
 
-	const classes = [];
+	const classes = ['ui-form-element'];
 
 	classes.push(styles['container']);
 	if (currentError) classes.push(styles['error']);

package/src/Form/Form.tsx

@@ -17,7 +17,13 @@ const Form = ({children, wait, className, onSubmit, ...props}: IForm) => {
 		}
 	};
 
-	return(<form {...props} onSubmit={submit} className={styles['container'] + (wait ? ' ' + styles['wait'] : '') + (className ? ' ' + className : '')}>
+	const classes = [];
+
+	classes.push(styles['container']);
+	if (wait) classes.push(styles['wait']);
+	if (className) classes.push(className);
+
+	return(<form {...props} onSubmit={submit} className={classes.join(' ')}>
 		{children}
 		<div className={styles['wait-indicator']}>
 			<Spinner size="large" color="contrast"/>

package/src/Spinner/Spinner.tsx

@@ -7,7 +7,15 @@ export type TSpinner = {
 }
 
 const Spinner = ({size, color = 'default'}: TSpinner) => {
-	return(<div className={styles['spinner'] + (size ? ' ' + styles[size] : '') + (color ? ' ' + styles[color] : '') + ' ' + styles['animate']}></div>);
+
+	const classes = ['ui-spinner'];
+
+	classes.push(styles['spinner']);
+	if (size) classes.push(styles[size]);
+	if (color) classes.push(styles[color]);
+	classes.push(styles['animate']);
+
+	return(<div className={classes.join(' ')}></div>);
 };
 
 export default Spinner;