@nimbus-ds/icon 2.1.0 → 2.2.0-rc.1
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 +6 -0
- package/README.md +25 -1
- package/dist/index.js +1 -1
- package/package.json +5 -4
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
Icons are used to visually communicate core parts of the product and available actions. They can act as wayfinding tools to help merchants more easily understand where they are in the product, and common interaction patterns that are available.
|
|
4
4
|
|
|
5
|
+
## 2023-02-23 `2.2.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))
|
|
10
|
+
|
|
5
11
|
## 2023-02-16 `2.1.0`
|
|
6
12
|
|
|
7
13
|
### 🎉 New features
|
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@nimbus-ds/icon)
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
The Icon component is used when we need to illustrate an action, state or text inside or outside another component.
|
|
6
6
|
|
|
7
7
|
## Installation
|
|
8
8
|
|
|
@@ -12,6 +12,30 @@ $ yarn add @nimbus-ds/icon
|
|
|
12
12
|
$ npm install @nimbus-ds/icon
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
+
### Component Anatomy
|
|
16
|
+
|
|
17
|
+
The component consists of a vector shape, which uses our Nimbus icons library.
|
|
18
|
+
|
|
19
|
+
## Guidelines
|
|
20
|
+
|
|
21
|
+
We use this component to reinforce, through an icon, a message, state or action that requires greater emphasis in relation to a text, for example.
|
|
22
|
+
|
|
23
|
+
### Sizes
|
|
24
|
+
|
|
25
|
+
Icon has 3 predefined sizes large, medium and small and must be used taking into account the component and context in which they will be applied.
|
|
26
|
+
|
|
27
|
+
### AriaLabel
|
|
28
|
+
|
|
29
|
+
This component does not have text, but it has a tag (Aria Label) to facilitate its identification by people with some type of visual or cognitive limitation. That's why we need to add a description that makes the icon's function clear.
|
|
30
|
+
|
|
31
|
+
### Recommendation for use
|
|
32
|
+
|
|
33
|
+
- Illustrate states of an order
|
|
34
|
+
- Illustrate actions inside a button
|
|
35
|
+
- Illustrate a section of the application
|
|
36
|
+
|
|
15
37
|
## Usage
|
|
16
38
|
|
|
17
39
|
View docs [here](https://nimbus.nuvemshop.com.br/documentation/atomic-components/icon).
|
|
40
|
+
|
|
41
|
+
<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.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/icon"]=t(require("react"),require("@nimbus-ds/styles"),require("@nimbus-ds/skeleton")):e["@nimbus-ds/icon"]=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/icon"]=t(require("react"),require("@nimbus-ds/styles"),require("@nimbus-ds/skeleton")):e["@nimbus-ds/icon"]=t(e.react,e["@nimbus-ds/styles"],e["@nimbus-ds/skeleton"])}(global,((e,t,r)=>(()=>{"use strict";var n={29:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Icon=void 0;const n=r(15).__importDefault(r(156)),o=r(990),a=r(612),i=({className:e,style:t,color:r="neutral.textLow",cursor:a="auto",source:i,...c})=>n.default.createElement("div",{...c,className:[o.icon.sprinkle({color:r,cursor:a}),o.icon.classnames.container].join(" ")},i);t.Icon=i,i.Skeleton=a.IconSkeleton,i.displayName="Icon",i.Skeleton.displayName="Icon.Skeleton"},391:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.IconSkeleton=void 0;const n=r(15).__importDefault(r(156)),o=r(678);t.IconSkeleton=({width:e,height:t,"data-testid":r})=>n.default.createElement(o.Skeleton,{width:e??"1rem",height:t??"1rem",borderRadius:"0.25rem","data-testid":r})},467:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.IconSkeleton=void 0;const n=r(391);var o=r(391);Object.defineProperty(t,"IconSkeleton",{enumerable:!0,get:function(){return o.IconSkeleton}}),t.default=n.IconSkeleton},612:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});r(15).__exportStar(r(467),t)},15:(e,t,r)=>{r.r(t),r.d(t,{__assign:()=>a,__asyncDelegator:()=>O,__asyncGenerator:()=>w,__asyncValues:()=>j,__await:()=>m,__awaiter:()=>f,__classPrivateFieldGet:()=>I,__classPrivateFieldIn:()=>E,__classPrivateFieldSet:()=>k,__createBinding:()=>p,__decorate:()=>c,__exportStar:()=>y,__extends:()=>o,__generator:()=>s,__importDefault:()=>x,__importStar:()=>P,__makeTemplateObject:()=>g,__metadata:()=>l,__param:()=>u,__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 c(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 c=e.length-1;c>=0;c--)(o=e[c])&&(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 u(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{u(n.next(e))}catch(e){a(e)}}function c(e){try{u(n.throw(e))}catch(e){a(e)}}function u(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,c)}u((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:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function c(a){return function(c){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,c])}}}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,c=a.length;i<c;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||c(e,t)}))})}function c(e,t){try{(r=o[e](t)).value instanceof m?Promise.resolve(r.value.v).then(u,l):f(a[0][2],r)}catch(e){f(a[0][3],e)}var r}function u(e){c("next",e)}function l(e){c("throw",e)}function f(e,t){e(t),a.shift(),a.length&&c(a[0][0],a[0][1])}}function O(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 j(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 g(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var S=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 S(t,e),t}function x(e){return e&&e.__esModule?e:{default:e}}function I(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.Icon=void 0;const t=a(29);var r=a(29);Object.defineProperty(e,"Icon",{enumerable:!0,get:function(){return r.Icon}}),e.default=t.Icon})(),i})()));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nimbus-ds/icon",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0-rc.1",
|
|
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.0.
|
|
17
|
+
"@nimbus-ds/skeleton": "^2.1.0-rc.1"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"react": "^16.8 || ^17.0 || ^18.0",
|
|
@@ -29,7 +29,8 @@
|
|
|
29
29
|
"url": "https://github.com/TiendaNube/nimbus-design-system/issues"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@nimbus-ds/icons": "^1.0.
|
|
32
|
+
"@nimbus-ds/icons": "^1.1.0-rc.1",
|
|
33
33
|
"webpack": "^5.74.0"
|
|
34
|
-
}
|
|
34
|
+
},
|
|
35
|
+
"stableVersion": "2.1.0"
|
|
35
36
|
}
|