glints-aries 4.0.150 → 4.0.151

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 (13) hide show
  1. package/es/Input/TextField/TextField.d.ts +2 -0
  2. package/es/Input/TextField/TextField.js +4 -3
  3. package/es/Input/TextField/TextField.stories.d.ts +1 -0
  4. package/es/Input/TextField/TextField.stories.js +6 -0
  5. package/es/Input/TextField/TextFieldStyle.d.ts +1 -0
  6. package/es/Input/TextField/TextFieldStyle.js +7 -3
  7. package/lib/Input/TextField/TextField.d.ts +2 -0
  8. package/lib/Input/TextField/TextField.js +3 -2
  9. package/lib/Input/TextField/TextField.stories.d.ts +1 -0
  10. package/lib/Input/TextField/TextField.stories.js +8 -1
  11. package/lib/Input/TextField/TextFieldStyle.d.ts +1 -0
  12. package/lib/Input/TextField/TextFieldStyle.js +11 -4
  13. package/package.json +1 -1
package/es/Input/TextField/TextField.d.ts CHANGED
@@ -28,6 +28,8 @@ export interface Props extends React.ComponentPropsWithoutRef<typeof TextFieldIn
28
28
  forwardedRef?: React.RefObject<HTMLInputElement>;
29
29
  /** Icon at the start of the input element. */
30
30
  startIcon?: React.ReactNode;
31
+ /** Icon at the end of the input element. */
32
+ endIcon?: React.ReactNode;
31
33
  }
32
34
  declare const _default: React.ForwardRefExoticComponent<Pick<Props, string | number> & React.RefAttributes<HTMLInputElement>>;
33
35
  export default _default;
package/es/Input/TextField/TextField.js CHANGED
@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutP
3
3
  import * as React from 'react';
4
4
  import classNames from 'classnames';
5
5
  import { EyeIcon, EyeSlashedIcon, CloseCircleSolidIcon } from '../../General/Icon/components';
6
- import { TextFieldContainer, TextFieldInput, TextFieldLabel, IconContainer, StartIconContainer } from './TextFieldStyle';
6
+ import { TextFieldContainer, TextFieldInput, TextFieldLabel, IconContainer, StartIconContainer, EndIconContainer } from './TextFieldStyle';
7
7
  export var isFilled = function isFilled(type, value) {
8
8
  if (value === undefined || value === null) return false;
9
9
  if (type === 'number') return !isNaN(parseInt(value));
@@ -35,7 +35,8 @@ export var TextField = function TextField(_ref) {
35
35
  forwardedRef = _ref.forwardedRef,
36
36
  onChange = _ref.onChange,
37
37
  startIcon = _ref.startIcon,
38
- restProps = _objectWithoutPropertiesLoose(_ref, ["value", "status", "onKeyDown", "disableTyping", "small", "type", "label", "disabled", "className", "removeFloatingLabel", "allowClear", "forwardedRef", "onChange", "startIcon"]);
38
+ endIcon = _ref.endIcon,
39
+ restProps = _objectWithoutPropertiesLoose(_ref, ["value", "status", "onKeyDown", "disableTyping", "small", "type", "label", "disabled", "className", "removeFloatingLabel", "allowClear", "forwardedRef", "onChange", "startIcon", "endIcon"]);
39
40
 
40
41
  var _React$useState = React.useState(false),
41
42
  floating = _React$useState[0],
@@ -99,7 +100,7 @@ export var TextField = function TextField(_ref) {
99
100
  onClick: handleShowPassword
100
101
  }, inputType === 'password' ? /*#__PURE__*/React.createElement(EyeSlashedIcon, {
101
102
  "data-testid": "invisible-icon"
102
- }) : /*#__PURE__*/React.createElement(EyeIcon, null)));
103
+ }) : /*#__PURE__*/React.createElement(EyeIcon, null)), endIcon && /*#__PURE__*/React.createElement(EndIconContainer, null, endIcon));
103
104
  };
104
105
 
105
106
  var forwardRef = function forwardRef(props, ref) {
package/es/Input/TextField/TextField.stories.d.ts CHANGED
@@ -5,4 +5,5 @@ export declare const Interactive: any;
5
5
  export declare const TextFieldWithClearIcon: any;
6
6
  export declare const Disabled: any;
7
7
  export declare const TextFieldWithStartIcon: any;
8
+ export declare const TextFieldWithEndIcon: any;
8
9
  export declare const PasswordField: any;
package/es/Input/TextField/TextField.stories.js CHANGED
@@ -47,6 +47,12 @@ TextFieldWithStartIcon.args = {
47
47
  type: 'text',
48
48
  startIcon: /*#__PURE__*/React.createElement(SearchIcon, null)
49
49
  };
50
+ export var TextFieldWithEndIcon = Template.bind({});
51
+ TextFieldWithEndIcon.args = {
52
+ label: 'Description',
53
+ type: 'text',
54
+ endIcon: /*#__PURE__*/React.createElement(SearchIcon, null)
55
+ };
50
56
  export var PasswordField = Template.bind({});
51
57
  PasswordField.args = {
52
58
  label: 'Description',
package/es/Input/TextField/TextFieldStyle.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
2
2
  export declare const StartIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
3
+ export declare const EndIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
3
4
  export declare const TextFieldContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
4
5
  export declare const TextFieldLabel: import("styled-components").StyledComponent<"label", any, TextFieldLabelProps, never>;
5
6
  declare type statusType = 'success' | 'error';
package/es/Input/TextField/TextFieldStyle.js CHANGED
@@ -9,13 +9,17 @@ export var StartIconContainer = styled.div.withConfig({
9
9
  displayName: "TextFieldStyle__StartIconContainer",
10
10
  componentId: "sc-5sd02x-1"
11
11
  })(["position:absolute;display:flex;left:16px;svg{fill:#666666;}"]);
12
+ export var EndIconContainer = styled.div.withConfig({
13
+ displayName: "TextFieldStyle__EndIconContainer",
14
+ componentId: "sc-5sd02x-2"
15
+ })(["position:absolute;display:flex;right:16px;svg{fill:#666666;}"]);
12
16
  export var TextFieldContainer = styled.div.withConfig({
13
17
  displayName: "TextFieldStyle__TextFieldContainer",
14
- componentId: "sc-5sd02x-2"
18
+ componentId: "sc-5sd02x-3"
15
19
  })(["position:relative;display:flex;align-items:center;flex-grow:1;"]);
16
20
  export var TextFieldLabel = styled.label.withConfig({
17
21
  displayName: "TextFieldStyle__TextFieldLabel",
18
- componentId: "sc-5sd02x-3"
22
+ componentId: "sc-5sd02x-4"
19
23
  })(["position:absolute;left:", ";margin-right:1px;overflow:hidden;color:#666666;transition:all .2s;pointer-events:none;font-weight:400;font-size:", ";", " ", " ", ""], function (_ref) {
20
24
  var small = _ref.small;
21
25
  return small ? '16px' : '22px';
@@ -44,7 +48,7 @@ export var TextFieldLabel = styled.label.withConfig({
44
48
  });
45
49
  export var TextFieldInput = styled.input.withConfig({
46
50
  displayName: "TextFieldStyle__TextFieldInput",
47
- componentId: "sc-5sd02x-4"
51
+ componentId: "sc-5sd02x-5"
48
52
  })(["position:relative;width:100%;outline:none;font-size:", ";padding:", ";border:unset;border-radius:", ";transition:all .5s;background-color:", ";", " ", " &:hover{transition:all .5s;background-color:", ";~ ", "{color:#666666;}}&:focus{background-color:", ";", " ~ ", "{padding:0 5px;top:1em;transform:", ";transition:all .2s;font-size:12px;right:auto;background-color:", ";}}&:disabled{cursor:not-allowed;background:", ";+ ", "{background:transparent;color:", ";}}"], function (_ref6) {
49
53
  var small = _ref6.small;
50
54
  return small ? '14px' : '16px';
package/lib/Input/TextField/TextField.d.ts CHANGED
@@ -28,6 +28,8 @@ export interface Props extends React.ComponentPropsWithoutRef<typeof TextFieldIn
28
28
  forwardedRef?: React.RefObject<HTMLInputElement>;
29
29
  /** Icon at the start of the input element. */
30
30
  startIcon?: React.ReactNode;
31
+ /** Icon at the end of the input element. */
32
+ endIcon?: React.ReactNode;
31
33
  }
32
34
  declare const _default: React.ForwardRefExoticComponent<Pick<Props, string | number> & React.RefAttributes<HTMLInputElement>>;
33
35
  export default _default;
package/lib/Input/TextField/TextField.js CHANGED
@@ -53,7 +53,8 @@ var TextField = function TextField(_ref) {
53
53
  forwardedRef = _ref.forwardedRef,
54
54
  onChange = _ref.onChange,
55
55
  startIcon = _ref.startIcon,
56
- restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["value", "status", "onKeyDown", "disableTyping", "small", "type", "label", "disabled", "className", "removeFloatingLabel", "allowClear", "forwardedRef", "onChange", "startIcon"]);
56
+ endIcon = _ref.endIcon,
57
+ restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["value", "status", "onKeyDown", "disableTyping", "small", "type", "label", "disabled", "className", "removeFloatingLabel", "allowClear", "forwardedRef", "onChange", "startIcon", "endIcon"]);
57
58
 
58
59
  var _React$useState = React.useState(false),
59
60
  floating = _React$useState[0],
@@ -117,7 +118,7 @@ var TextField = function TextField(_ref) {
117
118
  onClick: handleShowPassword
118
119
  }, inputType === 'password' ? /*#__PURE__*/React.createElement(_components.EyeSlashedIcon, {
119
120
  "data-testid": "invisible-icon"
120
- }) : /*#__PURE__*/React.createElement(_components.EyeIcon, null)));
121
+ }) : /*#__PURE__*/React.createElement(_components.EyeIcon, null)), endIcon && /*#__PURE__*/React.createElement(_TextFieldStyle.EndIconContainer, null, endIcon));
121
122
  };
122
123
 
123
124
  exports.TextField = TextField;
package/lib/Input/TextField/TextField.stories.d.ts CHANGED
@@ -5,4 +5,5 @@ export declare const Interactive: any;
5
5
  export declare const TextFieldWithClearIcon: any;
6
6
  export declare const Disabled: any;
7
7
  export declare const TextFieldWithStartIcon: any;
8
+ export declare const TextFieldWithEndIcon: any;
8
9
  export declare const PasswordField: any;
package/lib/Input/TextField/TextField.stories.js CHANGED
@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
5
5
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
6
 
7
7
  exports.__esModule = true;
8
- exports.PasswordField = exports.TextFieldWithStartIcon = exports.Disabled = exports.TextFieldWithClearIcon = exports.Interactive = exports["default"] = void 0;
8
+ exports.PasswordField = exports.TextFieldWithEndIcon = exports.TextFieldWithStartIcon = exports.Disabled = exports.TextFieldWithClearIcon = exports.Interactive = exports["default"] = void 0;
9
9
 
10
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
11
 
@@ -66,6 +66,13 @@ TextFieldWithStartIcon.args = {
66
66
  type: 'text',
67
67
  startIcon: /*#__PURE__*/_react["default"].createElement(_SearchIcon["default"], null)
68
68
  };
69
+ var TextFieldWithEndIcon = Template.bind({});
70
+ exports.TextFieldWithEndIcon = TextFieldWithEndIcon;
71
+ TextFieldWithEndIcon.args = {
72
+ label: 'Description',
73
+ type: 'text',
74
+ endIcon: /*#__PURE__*/_react["default"].createElement(_SearchIcon["default"], null)
75
+ };
69
76
  var PasswordField = Template.bind({});
70
77
  exports.PasswordField = PasswordField;
71
78
  PasswordField.args = {
package/lib/Input/TextField/TextFieldStyle.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
2
2
  export declare const StartIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
3
+ export declare const EndIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
3
4
  export declare const TextFieldContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
4
5
  export declare const TextFieldLabel: import("styled-components").StyledComponent<"label", any, TextFieldLabelProps, never>;
5
6
  declare type statusType = 'success' | 'error';
package/lib/Input/TextField/TextFieldStyle.js CHANGED
@@ -3,7 +3,7 @@
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
 
5
5
  exports.__esModule = true;
6
- exports.TextFieldInput = exports.TextFieldLabel = exports.TextFieldContainer = exports.StartIconContainer = exports.IconContainer = void 0;
6
+ exports.TextFieldInput = exports.TextFieldLabel = exports.TextFieldContainer = exports.EndIconContainer = exports.StartIconContainer = exports.IconContainer = void 0;
7
7
 
8
8
  var _styledComponents = _interopRequireDefault(require("styled-components"));
9
9
 
@@ -25,16 +25,23 @@ var StartIconContainer = _styledComponents["default"].div.withConfig({
25
25
 
26
26
  exports.StartIconContainer = StartIconContainer;
27
27
 
28
+ var EndIconContainer = _styledComponents["default"].div.withConfig({
29
+ displayName: "TextFieldStyle__EndIconContainer",
30
+ componentId: "sc-5sd02x-2"
31
+ })(["position:absolute;display:flex;right:16px;svg{fill:#666666;}"]);
32
+
33
+ exports.EndIconContainer = EndIconContainer;
34
+
28
35
  var TextFieldContainer = _styledComponents["default"].div.withConfig({
29
36
  displayName: "TextFieldStyle__TextFieldContainer",
30
- componentId: "sc-5sd02x-2"
37
+ componentId: "sc-5sd02x-3"
31
38
  })(["position:relative;display:flex;align-items:center;flex-grow:1;"]);
32
39
 
33
40
  exports.TextFieldContainer = TextFieldContainer;
34
41
 
35
42
  var TextFieldLabel = _styledComponents["default"].label.withConfig({
36
43
  displayName: "TextFieldStyle__TextFieldLabel",
37
- componentId: "sc-5sd02x-3"
44
+ componentId: "sc-5sd02x-4"
38
45
  })(["position:absolute;left:", ";margin-right:1px;overflow:hidden;color:#666666;transition:all .2s;pointer-events:none;font-weight:400;font-size:", ";", " ", " ", ""], function (_ref) {
39
46
  var small = _ref.small;
40
47
  return small ? '16px' : '22px';
@@ -66,7 +73,7 @@ exports.TextFieldLabel = TextFieldLabel;
66
73
 
67
74
  var TextFieldInput = _styledComponents["default"].input.withConfig({
68
75
  displayName: "TextFieldStyle__TextFieldInput",
69
- componentId: "sc-5sd02x-4"
76
+ componentId: "sc-5sd02x-5"
70
77
  })(["position:relative;width:100%;outline:none;font-size:", ";padding:", ";border:unset;border-radius:", ";transition:all .5s;background-color:", ";", " ", " &:hover{transition:all .5s;background-color:", ";~ ", "{color:#666666;}}&:focus{background-color:", ";", " ~ ", "{padding:0 5px;top:1em;transform:", ";transition:all .2s;font-size:12px;right:auto;background-color:", ";}}&:disabled{cursor:not-allowed;background:", ";+ ", "{background:transparent;color:", ";}}"], function (_ref6) {
71
78
  var small = _ref6.small;
72
79
  return small ? '14px' : '16px';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "glints-aries",
3
- "version": "4.0.150",
3
+ "version": "4.0.151",
4
4
  "description": "Glints ui-kit for frontend",
5
5
  "main": "./lib/index.js",
6
6
  "module": "./es/index.js",