react-artasys-ui 0.0.3 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/index.js.map +1 -1
  3. package/lib/Button/Button.d.ts +3 -1
  4. package/lib/Spinner/Spinner.d.ts +1 -1
  5. package/lib/Spinner/index.d.ts +2 -1
  6. package/package.json +1 -1
  7. package/src/Button/Button.tsx +6 -4
  8. package/src/Button/style.module.css +2 -2
  9. package/src/Form/Element/Element.tsx +4 -2
  10. package/src/Form/Element/style.module.css +31 -20
  11. package/src/Spinner/Spinner.tsx +1 -1
  12. package/src/Spinner/index.tsx +6 -1
package/lib/Button/Button.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import React from "react";
2
2
  interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
3
3
  wait?: boolean;
4
+ classNameContainer?: string;
5
+ styleContainer?: React.HTMLAttributes<HTMLDivElement>['style'];
4
6
  }
5
- declare const Button: ({ children, wait, ...props }: IButton) => JSX.Element;
7
+ declare const Button: ({ children, className, classNameContainer, styleContainer, wait, ...props }: IButton) => JSX.Element;
6
8
  export default Button;
package/lib/Spinner/Spinner.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- type TSpinner = {
1
+ export type TSpinner = {
2
2
  size?: 'small' | 'middle' | 'large';
3
3
  color?: 'default' | 'contrast';
4
4
  };
package/lib/Spinner/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
- import Spinner from "./Spinner";
1
+ import Spinner, { TSpinner } from "./Spinner";
2
+ export type { TSpinner };
2
3
  export default Spinner;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-artasys-ui",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "lib/index.d.ts",
package/src/Button/Button.tsx CHANGED
@@ -3,13 +3,15 @@ import styles from "./style.module.css";
3
3
  import Spinner from "../Spinner";
4
4
 
5
5
  interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
6
- wait?: boolean
6
+ wait?: boolean;
7
+ classNameContainer?: string;
8
+ styleContainer?: React.HTMLAttributes<HTMLDivElement>['style'];
7
9
  }
8
10
 
9
- const Button = ({children, wait = false, ...props}: IButton) => {
11
+ const Button = ({children, className, classNameContainer, styleContainer, wait = false, ...props}: IButton) => {
10
12
 
11
- return(<div className={styles['container']}>
12
- <button {...props}>{children}</button>
13
+ return(<div className={styles['container'] + (classNameContainer ? ' ' + classNameContainer : '')} style={styleContainer}>
14
+ <button {...props} className={className}>{children}</button>
13
15
  <div className={styles['wait-indicator'] + (wait ? ' ' + styles['active'] : '')}>
14
16
  <Spinner size="small" color="contrast"/>
15
17
  </div>
package/src/Button/style.module.css CHANGED
@@ -3,13 +3,13 @@
3
3
  .container {
4
4
  position: relative;
5
5
  border: 1px solid #5EBED6;
6
+ background-color: #BED4DB;
6
7
  }
7
8
 
8
9
  .container button {
9
10
  display: block;
10
11
  width: 100%;
11
12
  height: 100%;
12
- background-color: #BED4DB;
13
13
  border: 0;
14
14
  padding: 5px 8px;
15
15
  font-size: 1.1em;
@@ -33,7 +33,7 @@
33
33
  height: 100%;
34
34
  justify-content: center;
35
35
  align-items: center;
36
- background-color: #BED4DB;
36
+ background-color: inherit;
37
37
  z-index: -1;
38
38
  opacity: 0;
39
39
  transition: opacity 0.3s;
package/src/Form/Element/Element.tsx CHANGED
@@ -31,9 +31,11 @@ const Element = ({children, beforeElement, afterElement, error, placeholder, dis
31
31
  style={styleContainer}
32
32
  >
33
33
  {beforeElement}
34
- {typeof children === 'function' ? children(props) : null}
34
+ <div className={styles['element']}>
35
+ {typeof children === 'function' ? children(props) : null}
36
+ {placeholder && <span className={styles['placeholder']}>{placeholder}</span>}
37
+ </div>
35
38
  {afterElement}
36
- {placeholder && <span className={styles['placeholder']}>{placeholder}</span>}
37
39
  </label>
38
40
  {currentError && <div className={styles['error']}>{currentError}</div>}
39
41
  </>);
package/src/Form/Element/style.module.css CHANGED
@@ -4,21 +4,27 @@
4
4
  display: flex;
5
5
  align-items: center;
6
6
  width: 100%;
7
- min-height: 50px;
7
+ min-height: 45px;
8
8
  position: relative;
9
9
  border: 1px solid #CCCCCC;
10
10
  border-radius: 3px;
11
11
  z-index: 0;
12
12
  }
13
13
 
14
- .container > input, .container > textarea {
14
+ .element {
15
+ align-self: stretch;
16
+ width: 100%;
17
+ min-height: 100%;
18
+ }
19
+
20
+ .element > input, .element > textarea {
15
21
  width: 100% !important;
22
+ height: 100% !important;
16
23
  min-height: 100% !important;
17
24
  max-height: 500px !important;
18
25
  max-height: 50dvh !important;
19
- padding: 10px 5px !important;
20
26
  margin: 0 !important;
21
- font-size: 1.3em !important;
27
+ font-size: 1.3em;
22
28
  border: 0 !important;
23
29
  box-sizing: border-box !important;
24
30
  background-color: transparent !important;
@@ -30,24 +36,25 @@
30
36
  background-color: #EFEFEF;
31
37
  }
32
38
 
33
- .container > input:-webkit-autofill,
34
- .container > input:-webkit-autofill:hover,
35
- .container > input:-webkit-autofill:focus,
36
- .container > input:-webkit-autofill:active{
39
+ .element > input:-webkit-autofill,
40
+ .element > input:-webkit-autofill:hover,
41
+ .element > input:-webkit-autofill:focus,
42
+ .element > input:-webkit-autofill:active{
37
43
  -webkit-background-clip: text;
38
44
  }
39
45
 
40
- .container > input:focus {
46
+ .element > input:focus {
41
47
  outline: none;
42
48
  }
43
49
 
44
- .container > .placeholder {
50
+ .element > .placeholder {
45
51
  position: absolute;
46
52
  display: flex;
47
53
  justify-content: center;
48
54
  align-items: center;
49
55
  top: 0;
50
- left: 5px;
56
+ margin-left: 5px;
57
+ height: 100%;
51
58
  color: #7A7A73;
52
59
  font-size: 1.2em;
53
60
  z-index: -1;
@@ -55,7 +62,11 @@
55
62
  transition: transform 0.3s;
56
63
  }
57
64
 
58
- .container > .placeholder::before {
65
+ .element > textarea ~ .placeholder {
66
+ max-height: 2em;
67
+ }
68
+
69
+ .element > .placeholder::before {
59
70
  content: "";
60
71
  position: absolute;
61
72
  display: block;
@@ -65,16 +76,16 @@
65
76
  z-index: -1;
66
77
  }
67
78
 
68
- .container > input:required ~ .placeholder::after {
79
+ .element > input:required ~ .placeholder::after {
69
80
  content: "*";
70
81
  }
71
82
 
72
- .container > input:focus ~ .placeholder,
73
- .container > textarea:focus ~ .placeholder,
74
- .container > input:not([value=""]) ~ .placeholder,
75
- .container > textarea:not(:empty) ~ .placeholder,
76
- .container > input:not(:empty) ~ .placeholder {
77
- transform: translate(-10%, -55%) scale(0.8);
83
+ .element > input:focus ~ .placeholder,
84
+ .element > textarea:focus ~ .placeholder,
85
+ .element > input:not([value=""]) ~ .placeholder,
86
+ .element > textarea:not(:empty) ~ .placeholder,
87
+ .element > input:not(:empty) ~ .placeholder {
88
+ transform: translate(-10%, -50%) scale(0.8);
78
89
  z-index: 0;
79
90
  }
80
91
 
@@ -82,7 +93,7 @@
82
93
  border-color: #FF6D6D;
83
94
  }
84
95
 
85
- .container.error > .placeholder {
96
+ .container.error .placeholder {
86
97
  color: #FF6D6D;
87
98
  }
88
99
 
package/src/Spinner/Spinner.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import styles from "./style.module.css";
3
3
 
4
- type TSpinner = {
4
+ export type TSpinner = {
5
5
  size?: 'small' | 'middle' | 'large';
6
6
  color?: 'default' | 'contrast';
7
7
  }
package/src/Spinner/index.tsx CHANGED
@@ -1,3 +1,8 @@
1
- import Spinner from "./Spinner";
1
+ import Spinner,{
2
+ TSpinner
3
+ } from "./Spinner";
2
4
 
5
+ export type {
6
+ TSpinner
7
+ };
3
8
  export default Spinner;