@nimbus-ds/textarea 2.0.0 → 2.1.0
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.
- package/CHANGELOG.md +7 -1
- package/README.md +43 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The Textarea component allows the user to enter or edit information in long text format.
|
|
4
|
+
|
|
5
|
+
## 2023-02-23 `2.1.0`
|
|
6
|
+
|
|
7
|
+
### 🎉 New features
|
|
8
|
+
|
|
9
|
+
- Added server side-rendering support to component. ([#99](https://github.com/TiendaNube/nimbus-design-system/pull/99) by [@juniorconquista](https://github.com/juniorconquista))
|
|
4
10
|
|
|
5
11
|
## 2022-12-22 `2.0.0`
|
|
6
12
|
|
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@nimbus-ds/textarea)
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
The Textarea component allows the user to enter or edit information in long text format.
|
|
6
6
|
|
|
7
7
|
## Implementation
|
|
8
8
|
|
|
@@ -13,3 +13,45 @@ $ yarn add @nimbus-ds/textarea
|
|
|
13
13
|
# or
|
|
14
14
|
$ npm install @nimbus-ds/textarea
|
|
15
15
|
```
|
|
16
|
+
|
|
17
|
+
### Component Anatomy
|
|
18
|
+
|
|
19
|
+
The component consists of a text field of two or more lines with a border.
|
|
20
|
+
|
|
21
|
+
## Guidelines
|
|
22
|
+
|
|
23
|
+
We use the Textarea component when we need the user to enter information in text or numeric format that occupies more than one line.
|
|
24
|
+
|
|
25
|
+
### Validation
|
|
26
|
+
|
|
27
|
+
Textareas have the possibility of visually validating the information entered, whether they are correct or not.
|
|
28
|
+
|
|
29
|
+
For this, the component's border changes color as information is entered, and comes with an icon and help text that can reinforce the message.
|
|
30
|
+
|
|
31
|
+
Keep in mind that it's important not to rely solely on color to convey a state, as some users may have difficulty seeing colors correctly.
|
|
32
|
+
|
|
33
|
+
### Content
|
|
34
|
+
|
|
35
|
+
Textareas have the possibility to visually validate the information entered, whether they are correct or not.
|
|
36
|
+
|
|
37
|
+
Firstly, we must always accompany the Textarea with a label, which properly 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.
|
|
38
|
+
|
|
39
|
+
Additionally, 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 must not be conditioned to the type of information that must be inserted, since it disappears after typing.
|
|
40
|
+
|
|
41
|
+
When validating the information, we have the possibility of showing an error message to indicate to the user that the entered data is incorrect. In addition to the message, we also have an icon that appears automatically to give a visual clue of what is happening.
|
|
42
|
+
|
|
43
|
+
### Recommendation for use
|
|
44
|
+
|
|
45
|
+
- Insert long texts into a form
|
|
46
|
+
- Insert texts with more than one line in forms
|
|
47
|
+
- Insert product descriptions
|
|
48
|
+
|
|
49
|
+
## Related Components
|
|
50
|
+
|
|
51
|
+
- Input - Can be used when the information to be inserted fits in a single line.
|
|
52
|
+
|
|
53
|
+
## Usage
|
|
54
|
+
|
|
55
|
+
View docs [here](https://nimbus.nuvemshop.com.br/documentation/atomic-components/textarea).
|
|
56
|
+
|
|
57
|
+
<img alt="Nimbus" style="margin-bottom: 30px;" src="https://tiendanube.github.io/design-system-nimbus/static/media/nimbus-logo.ab60bd79.png" height="30" />
|
package/dist/index.d.ts
CHANGED
|
@@ -19,7 +19,6 @@ export interface TextareaComponents {
|
|
|
19
19
|
Skeleton: typeof TextareaSkeleton;
|
|
20
20
|
}
|
|
21
21
|
export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
22
|
-
/** Element to be rendered inside the Textarea component */
|
|
23
22
|
appearance?: "neutral" | "success" | "warning" | "danger";
|
|
24
23
|
/** Number of lines to be rendered for the user to input text */
|
|
25
24
|
lines?: number;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("@nimbus-ds/styles"),require("@nimbus-ds/skeleton")):"function"==typeof define&&define.amd?define(["react","@nimbus-ds/styles","@nimbus-ds/skeleton"],t):"object"==typeof exports?exports["@nimbus-ds/textarea"]=t(require("react"),require("@nimbus-ds/styles"),require("@nimbus-ds/skeleton")):e["@nimbus-ds/textarea"]=t(e.react,e["@nimbus-ds/styles"],e["@nimbus-ds/skeleton"])}(
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("@nimbus-ds/styles"),require("@nimbus-ds/skeleton")):"function"==typeof define&&define.amd?define(["react","@nimbus-ds/styles","@nimbus-ds/skeleton"],t):"object"==typeof exports?exports["@nimbus-ds/textarea"]=t(require("react"),require("@nimbus-ds/styles"),require("@nimbus-ds/skeleton")):e["@nimbus-ds/textarea"]=t(e.react,e["@nimbus-ds/styles"],e["@nimbus-ds/skeleton"])}(global,((e,t,r)=>(()=>{"use strict";var n={104:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Textarea=void 0;const n=r(15).__importDefault(r(156)),o=r(990),a=r(612),i=({className:e,style:t,appearance:r="neutral",lines:a=2,id:i,...u})=>n.default.createElement("textarea",{...u,className:o.textarea.classnames.appearance[r],rows:a,id:i});t.Textarea=i,i.displayName="Textarea",(i.Skeleton=a.TextareaSkeleton).displayName="Textarea.Skeleton"},967:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.TextareaSkeleton=void 0;const n=r(15).__importDefault(r(156)),o=r(678);t.TextareaSkeleton=({width:e,"data-testid":t})=>n.default.createElement(o.Skeleton,{width:e??"15rem",height:"3.375rem",borderRadius:"0.5rem","data-testid":t})},701:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.TextareaSkeleton=void 0;const n=r(967);var o=r(967);Object.defineProperty(t,"TextareaSkeleton",{enumerable:!0,get:function(){return o.TextareaSkeleton}}),t.default=n.TextareaSkeleton},612:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});r(15).__exportStar(r(701),t)},15:(e,t,r)=>{r.r(t),r.d(t,{__assign:()=>a,__asyncDelegator:()=>x,__asyncGenerator:()=>w,__asyncValues:()=>O,__await:()=>m,__awaiter:()=>f,__classPrivateFieldGet:()=>T,__classPrivateFieldIn:()=>E,__classPrivateFieldSet:()=>k,__createBinding:()=>p,__decorate:()=>u,__exportStar:()=>y,__extends:()=>o,__generator:()=>s,__importDefault:()=>S,__importStar:()=>P,__makeTemplateObject:()=>j,__metadata:()=>l,__param:()=>c,__read:()=>b,__rest:()=>i,__spread:()=>v,__spreadArray:()=>h,__spreadArrays:()=>_,__values:()=>d});var n=function(e,t){return n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])},n(e,t)};function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var a=function(){return a=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},a.apply(this,arguments)};function i(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}function u(e,t,r,n){var o,a=arguments.length,i=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,n);else for(var u=e.length-1;u>=0;u--)(o=e[u])&&(i=(a<3?o(i):a>3?o(t,r,i):o(t,r))||i);return a>3&&i&&Object.defineProperty(t,r,i),i}function c(e,t){return function(r,n){t(r,n,e)}}function l(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function f(e,t,r,n){return new(r||(r=Promise))((function(o,a){function i(e){try{c(n.next(e))}catch(e){a(e)}}function u(e){try{c(n.throw(e))}catch(e){a(e)}}function c(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,u)}c((n=n.apply(e,t||[])).next())}))}function s(e,t){var r,n,o,a,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:u(0),throw:u(1),return:u(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function u(a){return function(u){return function(a){if(r)throw new TypeError("Generator is already executing.");for(;i;)try{if(r=1,n&&(o=2&a[0]?n.return:a[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,a[1])).done)return o;switch(n=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return i.label++,{value:a[1],done:!1};case 5:i.label++,n=a[1],a=[0];continue;case 7:a=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==a[0]&&2!==a[0])){i=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){i.label=a[1];break}if(6===a[0]&&i.label<o[1]){i.label=o[1],o=a;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(a);break}o[2]&&i.ops.pop(),i.trys.pop();continue}a=t.call(e,i)}catch(e){a=[6,e],n=0}finally{r=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,u])}}}var p=Object.create?function(e,t,r,n){void 0===n&&(n=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,o)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]};function y(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||p(t,e,r)}function d(e){var t="function"==typeof Symbol&&Symbol.iterator,r=t&&e[t],n=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function b(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,o,a=r.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(n=a.next()).done;)i.push(n.value)}catch(e){o={error:e}}finally{try{n&&!n.done&&(r=a.return)&&r.call(a)}finally{if(o)throw o.error}}return i}function v(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(b(arguments[t]));return e}function _(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var n=Array(e),o=0;for(t=0;t<r;t++)for(var a=arguments[t],i=0,u=a.length;i<u;i++,o++)n[o]=a[i];return n}function h(e,t,r){if(r||2===arguments.length)for(var n,o=0,a=t.length;o<a;o++)!n&&o in t||(n||(n=Array.prototype.slice.call(t,0,o)),n[o]=t[o]);return e.concat(n||Array.prototype.slice.call(t))}function m(e){return this instanceof m?(this.v=e,this):new m(e)}function w(e,t,r){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var n,o=r.apply(e,t||[]),a=[];return n={},i("next"),i("throw"),i("return"),n[Symbol.asyncIterator]=function(){return this},n;function i(e){o[e]&&(n[e]=function(t){return new Promise((function(r,n){a.push([e,t,r,n])>1||u(e,t)}))})}function u(e,t){try{(r=o[e](t)).value instanceof m?Promise.resolve(r.value.v).then(c,l):f(a[0][2],r)}catch(e){f(a[0][3],e)}var r}function c(e){u("next",e)}function l(e){u("throw",e)}function f(e,t){e(t),a.shift(),a.length&&u(a[0][0],a[0][1])}}function x(e){var t,r;return t={},n("next"),n("throw",(function(e){throw e})),n("return"),t[Symbol.iterator]=function(){return this},t;function n(n,o){t[n]=e[n]?function(t){return(r=!r)?{value:m(e[n](t)),done:"return"===n}:o?o(t):t}:o}}function O(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,r=e[Symbol.asyncIterator];return r?r.call(e):(e=d(e),t={},n("next"),n("throw"),n("return"),t[Symbol.asyncIterator]=function(){return this},t);function n(r){t[r]=e[r]&&function(t){return new Promise((function(n,o){(function(e,t,r,n){Promise.resolve(n).then((function(t){e({value:t,done:r})}),t)})(n,o,(t=e[r](t)).done,t.value)}))}}}function j(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var g=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t};function P(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&p(t,e,r);return g(t,e),t}function S(e){return e&&e.__esModule?e:{default:e}}function T(e,t,r,n){if("a"===r&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?n:"a"===r?n.call(e):n?n.value:t.get(e)}function k(e,t,r,n,o){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?o.call(e,r):o?o.value=r:t.set(e,r),r}function E(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}},678:e=>{e.exports=r},990:e=>{e.exports=t},156:t=>{t.exports=e}},o={};function a(e){var t=o[e];if(void 0!==t)return t.exports;var r=o[e]={exports:{}};return n[e](r,r.exports,a),r.exports}a.d=(e,t)=>{for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{var e=i;Object.defineProperty(e,"__esModule",{value:!0}),e.Textarea=void 0;const t=a(104);var r=a(104);Object.defineProperty(e,"Textarea",{enumerable:!0,get:function(){return r.Textarea}}),e.default=t.Textarea})(),i})()));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nimbus-ds/textarea",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.1.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"files": [
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"version": "yarn version"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@nimbus-ds/skeleton": "^2.
|
|
17
|
+
"@nimbus-ds/skeleton": "^2.1.0"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"react": "^16.8 || ^17.0 || ^18.0",
|