@nimbus-ds/input 2.5.0-rc.2 → 2.5.0-rc.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 (3) hide show
  1. package/dist/CHANGELOG.md +91 -0
  2. package/dist/README.md +73 -0
  3. package/package.json +5 -5
package/dist/CHANGELOG.md ADDED
@@ -0,0 +1,91 @@
1
+ # Changelog
2
+
3
+ The Input component allows the user to enter or edit information in text format.
4
+
5
+ ## 2023-04-24 `2.4.0`
6
+
7
+ #### 🎉 New features
8
+
9
+ - Added `ref` property to `Input` component API. ([#151](https://github.com/TiendaNube/nimbus-design-system/pull/151) by [@juniorconquista](https://github.com/juniorconquista)).
10
+ - Added `ref` property to `Input.Password` component API. ([#151](https://github.com/TiendaNube/nimbus-design-system/pull/151) by [@juniorconquista](https://github.com/juniorconquista)).
11
+ - Added `ref` property to `Input.Search` component API. ([#151](https://github.com/TiendaNube/nimbus-design-system/pull/151) by [@juniorconquista](https://github.com/juniorconquista)).
12
+
13
+ ## 2023-04-13 `2.3.1`
14
+
15
+ #### 🐛 Bug fixes
16
+
17
+ - Fixed bug in input component where Icon sent was overlapping text. ([#149](https://github.com/TiendaNube/nimbus-design-system/pull/149) by [@juniorconquista](https://github.com/juniorconquista)).
18
+
19
+ ## 2023-03-13 `2.3.0`
20
+
21
+ ### 💡 Others
22
+
23
+ - Refactored use of `color tokens` in internal components by removing `.` per `-`. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/110) by [@juniorconquista](https://github.com/juniorconquista))
24
+ - Refactored style classes to have more semantic names. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/110) by [@juniorconquista](https://github.com/juniorconquista))
25
+
26
+ ## 2023-02-23 `2.2.0`
27
+
28
+ ### 🎉 New features
29
+
30
+ - Added server side-rendering support to component. ([#105](https://github.com/TiendaNube/nimbus-design-system/pull/105) by [@juniorconquista](https://github.com/juniorconquista))
31
+
32
+ ## 2023-02-16 `2.1.0`
33
+
34
+ ### 🎉 New features
35
+
36
+ - Removed external dependency from `@tiendanube/icons` package to now use internal `@nimbus-ds/icons` package. ([#94](https://github.com/TiendaNube/nimbus-design-system/pull/#94) by [@juniorconquista](https://github.com/juniorconquista))
37
+
38
+ ### 📚 3rd party library updates
39
+
40
+ - Removed `@tiendanube/icons@0.3.1`. ([#94](https://github.com/TiendaNube/nimbus-design-system/pull/#94) by [@juniorconquista](https://github.com/juniorconquista))
41
+
42
+ ## 2022-12-22 `2.0.0`
43
+
44
+ ### 💡 Others
45
+
46
+ - Removed direct dependency on `nimbus-ds/styles` package from component build. ([#69](https://github.com/TiendaNube/nimbus-design-system/pull/69) by [@juniorconquista](https://github.com/juniorconquista))
47
+
48
+ ## 2022-12-07 `1.2.0`
49
+
50
+ ### 🎉 New features
51
+
52
+ - Changed build build to consume inner package `@nimbus-ds/webpack`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
53
+
54
+ ### 📚 3rd party library updates
55
+
56
+ - Removed `terser-webpack-plugin@5.3.5`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
57
+ - Removed `ts-loader@9.3.1`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
58
+ - Removed `webpack-cli@4.10.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
59
+ - Removed `webpack@5.74.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
60
+ - Removed `typescript@4.7.4`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
61
+
62
+ ## 2022-11-18 `1.1.0`
63
+
64
+ ### 📚 3rd party library updates
65
+
66
+ - Updated `@tiendanube/icons@0.3.1`. ([#57](https://github.com/TiendaNube/nimbus-design-system/pull/#57) by [@juniorconquista](https://github.com/juniorconquista))
67
+
68
+ ## 2022-08-20 `1.0.0`
69
+
70
+ ### 📚 3rd party library updates
71
+
72
+ - Added `@tiendanube/icons@0.2.8`. ([#42](https://github.com/TiendaNube/nimbus-design-system/pull/42) by [@juniorconquista](https://github.com/juniorconquista))
73
+ - Added `terser-webpack-plugin@5.3.5`. ([#42](https://github.com/TiendaNube/nimbus-design-system/pull/42) by [@juniorconquista](https://github.com/juniorconquista))
74
+ - Added `ts-loader@9.3.1`. ([#42](https://github.com/TiendaNube/nimbus-design-system/pull/42) by [@juniorconquista](https://github.com/juniorconquista))
75
+ - Added `typescript@4.7.4`. ([#42](https://github.com/TiendaNube/nimbus-design-system/pull/42) by [@juniorconquista](https://github.com/juniorconquista))
76
+ - Added `webpack@5.74.0`. ([#42](https://github.com/TiendaNube/nimbus-design-system/pull/42) by [@juniorconquista](https://github.com/juniorconquista))
77
+ - Added `webpack-cli@4.10.0`. ([#42](https://github.com/TiendaNube/nimbus-design-system/pull/42) by [@juniorconquista](https://github.com/juniorconquista))
78
+
79
+ ### 🎉 New features
80
+
81
+ - Added `appearance`, `disabled`, `appendPosition` and `append` properties to the Component. ([#42](https://github.com/TiendaNube/nimbus-design-system/pull/42) by [@juniorconquista](https://github.com/juniorconquista))
82
+ - Added stories on Component. ([#42](https://github.com/TiendaNube/nimbus-design-system/pull/42) by [@juniorconquista](https://github.com/juniorconquista))
83
+ - Created new `Input.Skeleton` subcomponent. ([#42](https://github.com/TiendaNube/nimbus-design-system/pull/42) by [@juniorconquista](https://github.com/juniorconquista))
84
+ - Added stories on Component `Input.Skeleton`. ([#42](https://github.com/TiendaNube/nimbus-design-system/pull/42) by [@juniorconquista](https://github.com/juniorconquista))
85
+ - Added `width` and `data-testid` properties to the Component `Input.Skeleton`. ([#42](https://github.com/TiendaNube/nimbus-design-system/pull/42) by [@juniorconquista](https://github.com/juniorconquista))
86
+ - Created new `Input.Password` subcomponent. ([#42](https://github.com/TiendaNube/nimbus-design-system/pull/42) by [@juniorconquista](https://github.com/juniorconquista))
87
+ - Added stories on Component `Input.Password`. ([#42](https://github.com/TiendaNube/nimbus-design-system/pull/42) by [@juniorconquista](https://github.com/juniorconquista))
88
+ - Added `appearance` and `disabled` properties to the Component `Input.Password`. ([#42](https://github.com/TiendaNube/nimbus-design-system/pull/42) by [@juniorconquista](https://github.com/juniorconquista))
89
+ - Created new `Input.Search` subcomponent. ([#42](https://github.com/TiendaNube/nimbus-design-system/pull/42) by [@juniorconquista](https://github.com/juniorconquista))
90
+ - Added stories on Component `Input.Search`. ([#42](https://github.com/TiendaNube/nimbus-design-system/pull/42) by [@juniorconquista](https://github.com/juniorconquista))
91
+ - Added `appearance` and `disabled` properties to the Component `Input.Search`. ([#42](https://github.com/TiendaNube/nimbus-design-system/pull/42) by [@juniorconquista](https://github.com/juniorconquista))
package/dist/README.md ADDED
@@ -0,0 +1,73 @@
1
+ # `@nimbus-ds/input`
2
+
3
+ [![@nimbus-ds/input](https://img.shields.io/npm/v/@nimbus-ds/input?label=%40nimbus-ds%2Finput)](https://www.npmjs.com/package/@nimbus-ds/input)
4
+
5
+ The Input component allows the user to enter or edit information in text format.
6
+
7
+ ## Implementation
8
+
9
+ **Install** the component via terminal.
10
+
11
+ ```bash
12
+ $ yarn add @nimbus-ds/input
13
+ # or
14
+ $ npm install @nimbus-ds/input
15
+ ```
16
+
17
+ ## Component Anatomy
18
+
19
+ The component consists of a one-line bordered text field.
20
+
21
+ ## Guidelines
22
+
23
+ We use the Input component when we need the user to enter some short textual or numeric information that occupies only one line.
24
+
25
+ ## Variants
26
+
27
+ The component has 3 variants that can be used according to context and application.
28
+
29
+ - Text - Used to receive texts that need validation or not.
30
+ - Search - Used for search fields, this is the only variant that does not require the use of the Label component as it has an icon by default.
31
+ - Password - Used to receive passwords or sensitive data.
32
+
33
+ ## Additional elements
34
+
35
+ The component has some elements that can be used together to highlight or add context to the inputs.
36
+
37
+ - Label component - It is used together to guide the user on what type of information should be entered.
38
+ - Prefix or Sufix - Can be used to condition the insertion of information according to a criterion, such as unit of measure or weight.
39
+
40
+ ## Validations
41
+
42
+ The Inputs have the possibility to visually validate the information entered, whether it is correct or not.
43
+
44
+ To do this, the component's border changes color as information is entered, and is accompanied by an icon and help text that can reinforce the message.
45
+
46
+ Remember that it is important not to rely solely on color to convey a state, as some users may have difficulty seeing colors correctly.
47
+
48
+ ## Contents
49
+
50
+ Since Inputs are components that interact directly with the user of an application or page, it is therefore important that labels and placeholders are clear and help guide you in filling out the form.
51
+
52
+ Firstly, we must always accompany the Input of a label, which adequately informs the data that must be inserted. The label must be visible at all times, as it helps the user to always understand the information being requested.
53
+
54
+ In addition, we may use the placeholder to provide more context or an example to help the user better understand what information is being requested. This placeholder should not be conditioned to the type of information that must be entered, as it disappears after typing.
55
+
56
+ When validating the information, we have the possibility of showing an error message to indicate to the user that the data entered is incorrect. In addition to the message, we also have an icon that appears automatically to give a visual clue of what is happening.
57
+
58
+ ## Usage recommendation
59
+
60
+ - Insert data into registration forms
61
+ - Insert sensitive data into a login form
62
+ - Insert data about quantities and or values
63
+ - Insert criteria into a search field
64
+
65
+ ## Related component
66
+
67
+ - Textarea - Can be used when we need the amount of text to be inserted to be greater than one line.
68
+
69
+ ## Usage
70
+
71
+ View docs [here](https://nimbus.nuvemshop.com.br/documentation/atomic-components/input).
72
+
73
+ <img alt="Nimbus" style="margin-bottom: 30px;" src="https://tiendanube.github.io/design-system-nimbus/static/media/nimbus-logo.ab60bd79.png" height="30" />
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nimbus-ds/input",
3
- "version": "2.5.0-rc.2",
3
+ "version": "2.5.0-rc.5",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "files": [
@@ -14,9 +14,9 @@
14
14
  "version": "yarn version"
15
15
  },
16
16
  "dependencies": {
17
- "@nimbus-ds/icon": "^3.1.0-rc.2",
18
- "@nimbus-ds/icons": "^1.6.0",
19
- "@nimbus-ds/skeleton": "^3.1.0-rc.2"
17
+ "@nimbus-ds/icon": "^3.1.0-rc.5",
18
+ "@nimbus-ds/icons": "^1.7.0-rc.2",
19
+ "@nimbus-ds/skeleton": "^3.1.0-rc.5"
20
20
  },
21
21
  "peerDependencies": {
22
22
  "react": "^16.8 || ^17.0 || ^18.0",
@@ -31,7 +31,7 @@
31
31
  "url": "https://github.com/TiendaNube/nimbus-design-system/issues"
32
32
  },
33
33
  "devDependencies": {
34
- "@nimbus-ds/webpack": "^1.4.0"
34
+ "@nimbus-ds/webpack": "^1.5.0-rc.1"
35
35
  },
36
36
  "stableVersion": "2.4.0"
37
37
  }