@nimbus-ds/thumbnail 2.3.0 → 2.4.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +1 -0
  2. package/dist/CHANGELOG.md +73 -0
  3. package/dist/README.md +50 -0
  4. package/dist/index.d.ts +35 -13
  5. package/dist/index.js +1 -1
  6. package/package.json +9 -8
package/CHANGELOG.md CHANGED
@@ -43,6 +43,7 @@ The Thumbnail component allows us to present thumbnails of images.
43
43
  - Removed `terser-webpack-plugin@5.3.5`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
44
44
  - Removed `ts-loader@9.3.1`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
45
45
  - Removed `webpack-cli@4.10.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
46
+ - Removed `webpack@5.74.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
46
47
  - Removed `typescript@4.7.4`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
47
48
 
48
49
  ## 2022-11-18 `1.1.0`
package/dist/CHANGELOG.md ADDED
@@ -0,0 +1,73 @@
1
+ # Changelog
2
+
3
+ The Thumbnail component allows us to present thumbnails of images.
4
+
5
+ ## 2023-03-13 `2.3.0`
6
+
7
+ ### 💡 Others
8
+
9
+ - 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))
10
+ - Refactored style classes to have more semantic names. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/110) by [@juniorconquista](https://github.com/juniorconquista))
11
+
12
+ ## 2023-02-23 `2.2.0`
13
+
14
+ ### 🎉 New features
15
+
16
+ - Added server side-rendering support to component. ([#105](https://github.com/TiendaNube/nimbus-design-system/pull/105) by [@juniorconquista](https://github.com/juniorconquista))
17
+
18
+ ## 2023-02-16 `2.1.0`
19
+
20
+ ### 🎉 New features
21
+
22
+ - 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))
23
+
24
+ ### 📚 3rd party library updates
25
+
26
+ - Removed `@tiendanube/icons@0.3.1`. ([#94](https://github.com/TiendaNube/nimbus-design-system/pull/#94) by [@juniorconquista](https://github.com/juniorconquista))
27
+
28
+ ## 2022-12-22 `2.0.0`
29
+
30
+ ### 💡 Others
31
+
32
+ - 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))
33
+
34
+ ## 2022-12-07 `1.2.0`
35
+
36
+ ### 🎉 New features
37
+
38
+ - 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))
39
+
40
+ ### 📚 3rd party library updates
41
+
42
+ - Removed `@vanilla-extract/webpack-plugin@2.1.11`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
43
+ - Removed `terser-webpack-plugin@5.3.5`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
44
+ - Removed `ts-loader@9.3.1`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
45
+ - Removed `webpack-cli@4.10.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
46
+ - Removed `webpack@5.74.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
47
+ - Removed `typescript@4.7.4`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
48
+
49
+ ## 2022-11-18 `1.1.0`
50
+
51
+ ### 📚 3rd party library updates
52
+
53
+ - Updated `@tiendanube/icons@0.3.1`. ([#57](https://github.com/TiendaNube/nimbus-design-system/pull/#57) by [@juniorconquista](https://github.com/juniorconquista))
54
+
55
+ ## 2022-10-26 `1.0.0`
56
+
57
+ ### 📚 3rd party library updates
58
+
59
+ - Added `@vanilla-extract/dynamic@2.0.2`. ([#49](https://github.com/TiendaNube/nimbus-design-system/pull/49) by [@juniorconquista](https://github.com/juniorconquista))
60
+ - Added `@vanilla-extract/webpack-plugin@2.1.11`. ([#49](https://github.com/TiendaNube/nimbus-design-system/pull/49) by [@juniorconquista](https://github.com/juniorconquista))
61
+ - Added `terser-webpack-plugin@5.3.5`. ([#49](https://github.com/TiendaNube/nimbus-design-system/pull/49) by [@juniorconquista](https://github.com/juniorconquista))
62
+ - Added `ts-loader@9.3.1`. ([#49](https://github.com/TiendaNube/nimbus-design-system/pull/49) by [@juniorconquista](https://github.com/juniorconquista))
63
+ - Added `typescript@4.7.4`. ([#49](https://github.com/TiendaNube/nimbus-design-system/pull/49) by [@juniorconquista](https://github.com/juniorconquista))
64
+ - Added `webpack@5.74.0`. ([#49](https://github.com/TiendaNube/nimbus-design-system/pull/49) by [@juniorconquista](https://github.com/juniorconquista))
65
+ - Added `webpack-cli@4.10.0`. ([#49](https://github.com/TiendaNube/nimbus-design-system/pull/49) by [@juniorconquista](https://github.com/juniorconquista))
66
+
67
+ ### 🎉 New features
68
+
69
+ - Added `children`, `aspectRatio` and `width` properties to the Component. ([#49](https://github.com/TiendaNube/nimbus-design-system/pull/49) by [@juniorconquista](https://github.com/juniorconquista))
70
+ - Added stories on Component. ([#49](https://github.com/TiendaNube/nimbus-design-system/pull/49) by [@juniorconquista](https://github.com/juniorconquista))
71
+ - Created new `Thumbnail.Skeleton` subcomponent. ([#49](https://github.com/TiendaNube/nimbus-design-system/pull/49) by [@juniorconquista](https://github.com/juniorconquista))
72
+ - Added `width`, `aspectRatio` and `width` properties to the Component `Thumbnail.Skeleton`. ([#49](https://github.com/TiendaNube/nimbus-design-system/pull/49) by [@juniorconquista](https://github.com/juniorconquista))
73
+ - Added stories on Component `Thumbnail.Skeleton`. ([#49](https://github.com/TiendaNube/nimbus-design-system/pull/49) by [@juniorconquista](https://github.com/juniorconquista))
package/dist/README.md ADDED
@@ -0,0 +1,50 @@
1
+ # `@nimbus-ds/thumbnail`
2
+
3
+ [![@nimbus-ds/thumbnail](https://img.shields.io/npm/v/@nimbus-ds/thumbnail?label=%40nimbus-ds%2Fthumbnail)](https://www.npmjs.com/package/@nimbus-ds/thumbnail)
4
+
5
+ The Thumbnail component allows us to present thumbnails of images.
6
+
7
+ ## Installation
8
+
9
+ ```sh
10
+ $ yarn add @nimbus-ds/thumbnail
11
+ # or
12
+ $ npm install @nimbus-ds/thumbnail
13
+ ```
14
+
15
+ ## Component Anatomy
16
+
17
+ The component consists of a container with rounded corners.
18
+
19
+ ## Guidelines
20
+
21
+ We use the Thumbnail component when we need to display images in galleries, product descriptions or order details.
22
+
23
+ ### Proportions and sizes
24
+
25
+ The component does not have fixed sizes, that is, its height or width can be freely defined, however there are proportions that must be respected in order to avoid distortions and inconsistencies.
26
+
27
+ - Square - 1:1
28
+ - Rectangular - 4:3 and 3:4
29
+ - Rectangular Wide - 16:9 and 9:16
30
+ - Extra Wide Rectangular - 2:1 and 1:2
31
+
32
+ ### Example images and placeholder
33
+
34
+ The component has example images for building prototypes, as well as a placeholder variant.
35
+
36
+ ### Usage recommendation
37
+
38
+ - View product images
39
+ - View image galleries
40
+ - View order detail pictures
41
+
42
+ ### Related components
43
+
44
+ - File uploader - Can be used when we need to upload files or images.
45
+
46
+ ## Usage
47
+
48
+ View docs [here](https://nimbus.nuvemshop.com.br/documentation/atomic-components/thumbnail).
49
+
50
+ <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
@@ -1,4 +1,4 @@
1
- // Generated by dts-bundle-generator v7.1.0
1
+ // Generated by dts-bundle-generator v7.2.0
2
2
 
3
3
  import React from 'react';
4
4
  import { HTMLAttributes, ImgHTMLAttributes, ReactNode } from 'react';
@@ -20,31 +20,53 @@ declare const thumbnail: {
20
20
  skeleton: string;
21
21
  };
22
22
  };
23
- export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
24
- /** width alignment in content */
23
+ export interface SkeletonProperties {
24
+ /**
25
+ * Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
26
+ */
25
27
  width: string;
26
- /** height alignment in content */
28
+ /**
29
+ * Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.
30
+ */
27
31
  height: string;
28
- /** borderRadius alignment in content */
32
+ /**
33
+ * The border radius of the skeleton.
34
+ */
29
35
  borderRadius?: string;
30
- }
31
- export type ThumbnailSkeletonProps = Partial<Pick<SkeletonProps, "width">> & Partial<Pick<ThumbnailProps, "aspectRatio">> & {
36
+ /**
37
+ * This is an attribute used to identify a DOM node for testing purposes.
38
+ */
32
39
  "data-testid"?: string;
33
- };
40
+ }
41
+ export type SkeletonProps = SkeletonProperties & HTMLAttributes<HTMLDivElement>;
42
+ export type ThumbnailSkeletonProperties = Partial<Pick<ThumbnailProps, "aspectRatio">> & Partial<Pick<SkeletonProps, "width" | "data-testid">>;
43
+ export type ThumbnailSkeletonProps = ThumbnailSkeletonProperties;
34
44
  declare const ThumbnailSkeleton: React.FC<ThumbnailSkeletonProps>;
35
45
  export interface ThumbnailComponents {
36
46
  Skeleton: typeof ThumbnailSkeleton;
37
47
  }
38
- export interface ThumbnailProps extends ImgHTMLAttributes<HTMLImageElement> {
39
- /** The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. */
48
+ export interface ThumbnailProperties {
49
+ /**
50
+ * The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
51
+ */
40
52
  alt: string;
41
- /** Element to be displayed on thumbnail */
53
+ /**
54
+ * The content of the thumbnail.
55
+ * @TJS-type React.ReactNode
56
+ */
42
57
  children?: ReactNode;
43
- /** Permitted aspect ratios for the size of the image */
58
+ /**
59
+ * Permitted aspect ratios for the size of the thumbnail image.
60
+ * @default 1/1
61
+ */
44
62
  aspectRatio?: typeof thumbnail.properties.aspectRatio[number];
45
- /** Width value of the image. Defaults to 100% */
63
+ /**
64
+ * Width value of the thumbnail image. Defaults to 100%.
65
+ * @default 100%
66
+ */
46
67
  width?: string;
47
68
  }
69
+ export type ThumbnailProps = ThumbnailProperties & ImgHTMLAttributes<HTMLImageElement>;
48
70
  export declare const Thumbnail: React.FC<ThumbnailProps> & ThumbnailComponents;
49
71
 
50
72
  export {
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/icons"),require("@nimbus-ds/styles"),require("@nimbus-ds/icon"),require("@nimbus-ds/skeleton")):"function"==typeof define&&define.amd?define(["react","@nimbus-ds/icons","@nimbus-ds/styles","@nimbus-ds/icon","@nimbus-ds/skeleton"],t):"object"==typeof exports?exports["@nimbus-ds/thumbnail"]=t(require("react"),require("@nimbus-ds/icons"),require("@nimbus-ds/styles"),require("@nimbus-ds/icon"),require("@nimbus-ds/skeleton")):e["@nimbus-ds/thumbnail"]=t(e.react,e["@nimbus-ds/icons"],e["@nimbus-ds/styles"],e["@nimbus-ds/icon"],e["@nimbus-ds/skeleton"])}(global,((e,t,r,n,o)=>(()=>{"use strict";var a={564:(e,t,r)=>{function n(e){var t=e.match(/^var\((.*)\)$/);return t?t[1]:e}function o(e,t){var r=e;for(var n of t){if(!(n in r))throw new Error("Path ".concat(t.join(" -> ")," does not exist in object"));r=r[n]}return r}function a(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[],n=e.constructor();for(var o in e){var i=e[o],l=[...r,o];"string"==typeof i||"number"==typeof i||null==i?n[o]=t(i,l):"object"!=typeof i||Array.isArray(i)?console.warn('Skipping invalid key "'.concat(l.join("."),'". Should be a string, number, null or object. Received: "').concat(Array.isArray(i)?"Array":typeof i,'"')):n[o]=a(i,t,l)}return n}function i(e,t){var r={};if("object"==typeof t){var i=e;a(t,((e,t)=>{var a=o(i,t);r[n(a)]=String(e)}))}else{var l=e;for(var u in l)r[n(u)]=l[u]}return Object.defineProperty(r,"toString",{value:function(){return Object.keys(this).map((e=>"".concat(e,":").concat(this[e]))).join(";")},writable:!1}),r}function l(e,t,r){e.style.setProperty(n(t),r)}function u(e,t,r){if("object"==typeof r){var n=t;a(r,((t,r)=>{l(e,o(n,r),String(t))}))}else{var i=t;for(var u in i)l(e,u,i[u])}}r.r(t),r.d(t,{assignInlineVars:()=>i,setElementVars:()=>u})},623:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Thumbnail=void 0;const n=r(15).__importDefault(r(156)),o=r(564),a=r(215),i=r(990),l=r(633),u=r(612),c=({className:e,style:t,aspectRatio:r="1/1",width:u="100%",children:c,alt:s,src:f,...p})=>n.default.createElement("div",{className:i.thumbnail.classnames.container,style:(0,o.assignInlineVars)({[i.vars.width]:u})},c,f&&n.default.createElement("img",{...p,className:[i.thumbnail.classnames.container__image,i.thumbnail.sprinkle({aspectRatio:r})].join(" "),src:f,alt:s}),!f&&n.default.createElement("div",{"data-testid":"thumbnail-empty",className:[i.thumbnail.classnames.container__placeholder,i.thumbnail.sprinkle({aspectRatio:r})].join(" ")},n.default.createElement(l.Icon,{color:"neutral-interactive",source:n.default.createElement(a.CameraIcon,{size:"large"})})));t.Thumbnail=c,c.Skeleton=u.ThumbnailSkeleton,c.displayName="Thumbnail",c.Skeleton.displayName="Thumbnail.Skeleton"},948:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ThumbnailSkeleton=void 0;const n=r(15).__importDefault(r(156)),o=r(990),a=r(678);t.ThumbnailSkeleton=({width:e,aspectRatio:t="1/1","data-testid":r})=>n.default.createElement("div",{className:o.thumbnail.classnames.skeleton},n.default.createElement("div",{"data-testid":"thumbnail-skeleton-container",className:o.thumbnail.sprinkle({aspectRatio:t})},n.default.createElement(a.Skeleton,{width:e??"6.5rem",height:"100%",borderRadius:"0.5rem","data-testid":r})))},49:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ThumbnailSkeleton=void 0;const n=r(948);var o=r(948);Object.defineProperty(t,"ThumbnailSkeleton",{enumerable:!0,get:function(){return o.ThumbnailSkeleton}}),t.default=n.ThumbnailSkeleton},612:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});r(15).__exportStar(r(49),t)},15:(e,t,r)=>{r.r(t),r.d(t,{__assign:()=>a,__asyncDelegator:()=>j,__asyncGenerator:()=>w,__asyncValues:()=>g,__await:()=>_,__awaiter:()=>s,__classPrivateFieldGet:()=>T,__classPrivateFieldIn:()=>E,__classPrivateFieldSet:()=>k,__createBinding:()=>p,__decorate:()=>l,__exportStar:()=>d,__extends:()=>o,__generator:()=>f,__importDefault:()=>x,__importStar:()=>P,__makeTemplateObject:()=>O,__metadata:()=>c,__param:()=>u,__read:()=>b,__rest:()=>i,__spread:()=>m,__spreadArray:()=>v,__spreadArrays:()=>h,__values:()=>y});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 l(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 l=e.length-1;l>=0;l--)(o=e[l])&&(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 c(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function s(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 l(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,l)}u((n=n.apply(e,t||[])).next())}))}function f(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:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function l(a){return function(l){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,l])}}}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 d(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||p(t,e,r)}function y(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 m(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(b(arguments[t]));return e}function h(){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,l=a.length;i<l;i++,o++)n[o]=a[i];return n}function v(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 _(e){return this instanceof _?(this.v=e,this):new _(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||l(e,t)}))})}function l(e,t){try{(r=o[e](t)).value instanceof _?Promise.resolve(r.value.v).then(u,c):s(a[0][2],r)}catch(e){s(a[0][3],e)}var r}function u(e){l("next",e)}function c(e){l("throw",e)}function s(e,t){e(t),a.shift(),a.length&&l(a[0][0],a[0][1])}}function j(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:_(e[n](t)),done:"return"===n}:o?o(t):t}:o}}function g(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,r=e[Symbol.asyncIterator];return r?r.call(e):(e=y(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 O(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 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)}},633:e=>{e.exports=n},215:e=>{e.exports=t},678:e=>{e.exports=o},990:e=>{e.exports=r},156:t=>{t.exports=e}},i={};function l(e){var t=i[e];if(void 0!==t)return t.exports;var r=i[e]={exports:{}};return a[e](r,r.exports,l),r.exports}l.d=(e,t)=>{for(var r in t)l.o(t,r)&&!l.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},l.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),l.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var u={};return(()=>{var e=u;Object.defineProperty(e,"__esModule",{value:!0}),e.Thumbnail=void 0;const t=l(623);var r=l(623);Object.defineProperty(e,"Thumbnail",{enumerable:!0,get:function(){return r.Thumbnail}}),e.default=t.Thumbnail})(),u})()));
1
+ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("@nimbus-ds/icons"),require("@nimbus-ds/styles"),require("@nimbus-ds/icon"),require("@nimbus-ds/skeleton")):"function"==typeof define&&define.amd?define(["react","@nimbus-ds/icons","@nimbus-ds/styles","@nimbus-ds/icon","@nimbus-ds/skeleton"],t):"object"==typeof exports?exports["@nimbus-ds/thumbnail"]=t(require("react"),require("@nimbus-ds/icons"),require("@nimbus-ds/styles"),require("@nimbus-ds/icon"),require("@nimbus-ds/skeleton")):e["@nimbus-ds/thumbnail"]=t(e.react,e["@nimbus-ds/icons"],e["@nimbus-ds/styles"],e["@nimbus-ds/icon"],e["@nimbus-ds/skeleton"])}(global,((e,t,r,n,o)=>(()=>{"use strict";var a={612:(e,t,r)=>{function n(e){var t=e.match(/^var\((.*)\)$/);return t?t[1]:e}function o(e,t){var r=e;for(var n of t){if(!(n in r))throw new Error("Path ".concat(t.join(" -> ")," does not exist in object"));r=r[n]}return r}function a(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[],n=e.constructor();for(var o in e){var i=e[o],s=[...r,o];"string"==typeof i||"number"==typeof i||null==i?n[o]=t(i,s):"object"!=typeof i||Array.isArray(i)?console.warn('Skipping invalid key "'.concat(s.join("."),'". Should be a string, number, null or object. Received: "').concat(Array.isArray(i)?"Array":typeof i,'"')):n[o]=a(i,t,s)}return n}function i(e,t){var r={};if("object"==typeof t){var i=e;a(t,((e,t)=>{if(null!=e){var a=o(i,t);r[n(a)]=String(e)}}))}else{var s=e;for(var c in s){var l=s[c];null!=l&&(r[n(c)]=l)}}return Object.defineProperty(r,"toString",{value:function(){return Object.keys(this).map((e=>"".concat(e,":").concat(this[e]))).join(";")},writable:!1}),r}function s(e,t,r){e.style.setProperty(n(t),r)}function c(e,t,r){if("object"==typeof r){var n=t;a(r,((t,r)=>{null!=t&&s(e,o(n,r),String(t))}))}else{var i=t;for(var c in i){null!=i[c]&&s(e,c,i[c])}}}r.r(t),r.d(t,{assignInlineVars:()=>i,setElementVars:()=>c})},988:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Thumbnail=void 0;const n=r(769).__importDefault(r(155)),o=r(612),a=r(809),i=r(367),s=r(208),c=r(337),l=({className:e,style:t,aspectRatio:r="1/1",width:c="100%",children:l,alt:u,src:f,...p})=>n.default.createElement("div",{className:i.thumbnail.classnames.container,style:(0,o.assignInlineVars)({[i.vars.width]:c})},l,f&&n.default.createElement("img",{...p,className:[i.thumbnail.classnames.container__image,i.thumbnail.sprinkle({aspectRatio:r})].join(" "),src:f,alt:u}),!f&&n.default.createElement("div",{"data-testid":"thumbnail-empty",className:[i.thumbnail.classnames.container__placeholder,i.thumbnail.sprinkle({aspectRatio:r})].join(" ")},n.default.createElement(s.Icon,{color:"neutral-interactive",source:n.default.createElement(a.CameraIcon,{size:"large"})})));t.Thumbnail=l,l.Skeleton=c.ThumbnailSkeleton,l.displayName="Thumbnail",l.Skeleton.displayName="Thumbnail.Skeleton"},534:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ThumbnailSkeleton=void 0;const n=r(769).__importDefault(r(155)),o=r(367),a=r(334);t.ThumbnailSkeleton=({width:e,aspectRatio:t="1/1","data-testid":r})=>n.default.createElement("div",{className:o.thumbnail.classnames.skeleton},n.default.createElement("div",{"data-testid":"thumbnail-skeleton-container",className:o.thumbnail.sprinkle({aspectRatio:t})},n.default.createElement(a.Skeleton,{width:e??"6.5rem",height:"100%",borderRadius:"0.5rem","data-testid":r})))},565:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ThumbnailSkeleton=void 0;const n=r(534);var o=r(534);Object.defineProperty(t,"ThumbnailSkeleton",{enumerable:!0,get:function(){return o.ThumbnailSkeleton}}),t.default=n.ThumbnailSkeleton},337:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});r(769).__exportStar(r(565),t)},208:e=>{e.exports=n},809:e=>{e.exports=t},334:e=>{e.exports=o},367:e=>{e.exports=r},155:t=>{t.exports=e},769:(e,t,r)=>{r.r(t),r.d(t,{__addDisposableResource:()=>q,__assign:()=>a,__asyncDelegator:()=>P,__asyncGenerator:()=>S,__asyncValues:()=>T,__await:()=>O,__awaiter:()=>y,__classPrivateFieldGet:()=>I,__classPrivateFieldIn:()=>A,__classPrivateFieldSet:()=>D,__createBinding:()=>_,__decorate:()=>s,__disposeResources:()=>N,__esDecorate:()=>l,__exportStar:()=>m,__extends:()=>o,__generator:()=>b,__importDefault:()=>R,__importStar:()=>k,__makeTemplateObject:()=>x,__metadata:()=>d,__param:()=>c,__propKey:()=>f,__read:()=>v,__rest:()=>i,__runInitializers:()=>u,__setFunctionName:()=>p,__spread:()=>w,__spreadArray:()=>j,__spreadArrays:()=>g,__values:()=>h,default:()=>F});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 s(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 s=e.length-1;s>=0;s--)(o=e[s])&&(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,r,n,o,a){function i(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,c=n.kind,l="getter"===c?"get":"setter"===c?"set":"value",u=!t&&e?n.static?e:e.prototype:null,f=t||(u?Object.getOwnPropertyDescriptor(u,n.name):{}),p=!1,d=r.length-1;d>=0;d--){var y={};for(var b in n)y[b]="access"===b?{}:n[b];for(var b in n.access)y.access[b]=n.access[b];y.addInitializer=function(e){if(p)throw new TypeError("Cannot add initializers after decoration has completed");a.push(i(e||null))};var _=(0,r[d])("accessor"===c?{get:f.get,set:f.set}:f[l],y);if("accessor"===c){if(void 0===_)continue;if(null===_||"object"!=typeof _)throw new TypeError("Object expected");(s=i(_.get))&&(f.get=s),(s=i(_.set))&&(f.set=s),(s=i(_.init))&&o.unshift(s)}else(s=i(_))&&("field"===c?o.unshift(s):f[l]=s)}u&&Object.defineProperty(u,n.name,f),p=!0}function u(e,t,r){for(var n=arguments.length>2,o=0;o<t.length;o++)r=n?t[o].call(e,r):t[o].call(e);return n?r:void 0}function f(e){return"symbol"==typeof e?e:"".concat(e)}function p(e,t,r){return"symbol"==typeof t&&(t=t.description?"[".concat(t.description,"]"):""),Object.defineProperty(e,"name",{configurable:!0,value:r?"".concat(r," ",t):t})}function d(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function y(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 s(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,s)}c((n=n.apply(e,t||[])).next())}))}function b(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:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function s(s){return function(c){return function(s){if(r)throw new TypeError("Generator is already executing.");for(;a&&(a=0,s[0]&&(i=0)),i;)try{if(r=1,n&&(o=2&s[0]?n.return:s[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,s[1])).done)return o;switch(n=0,o&&(s=[2&s[0],o.value]),s[0]){case 0:case 1:o=s;break;case 4:return i.label++,{value:s[1],done:!1};case 5:i.label++,n=s[1],s=[0];continue;case 7:s=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==s[0]&&2!==s[0])){i=0;continue}if(3===s[0]&&(!o||s[1]>o[0]&&s[1]<o[3])){i.label=s[1];break}if(6===s[0]&&i.label<o[1]){i.label=o[1],o=s;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(s);break}o[2]&&i.ops.pop(),i.trys.pop();continue}s=t.call(e,i)}catch(e){s=[6,e],n=0}finally{r=o=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,c])}}}var _=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 m(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||_(t,e,r)}function h(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 v(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 w(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(v(arguments[t]));return e}function g(){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,s=a.length;i<s;i++,o++)n[o]=a[i];return n}function j(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 O(e){return this instanceof O?(this.v=e,this):new O(e)}function S(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||s(e,t)}))})}function s(e,t){try{(r=o[e](t)).value instanceof O?Promise.resolve(r.value.v).then(c,l):u(a[0][2],r)}catch(e){u(a[0][3],e)}var r}function c(e){s("next",e)}function l(e){s("throw",e)}function u(e,t){e(t),a.shift(),a.length&&s(a[0][0],a[0][1])}}function P(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:O(e[n](t)),done:!1}:o?o(t):t}:o}}function T(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,r=e[Symbol.asyncIterator];return r?r.call(e):(e=h(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 x(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var E=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t};function k(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)&&_(t,e,r);return E(t,e),t}function R(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 D(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 A(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)}function q(e,t,r){if(null!=t){if("object"!=typeof t&&"function"!=typeof t)throw new TypeError("Object expected.");var n;if(r){if(!Symbol.asyncDispose)throw new TypeError("Symbol.asyncDispose is not defined.");n=t[Symbol.asyncDispose]}if(void 0===n){if(!Symbol.dispose)throw new TypeError("Symbol.dispose is not defined.");n=t[Symbol.dispose]}if("function"!=typeof n)throw new TypeError("Object not disposable.");e.stack.push({value:t,dispose:n,async:r})}else r&&e.stack.push({async:!0});return t}var M="function"==typeof SuppressedError?SuppressedError:function(e,t,r){var n=new Error(r);return n.name="SuppressedError",n.error=e,n.suppressed=t,n};function N(e){function t(t){e.error=e.hasError?new M(t,e.error,"An error was suppressed during disposal."):t,e.hasError=!0}return function r(){for(;e.stack.length;){var n=e.stack.pop();try{var o=n.dispose&&n.dispose.call(n.value);if(n.async)return Promise.resolve(o).then(r,(function(e){return t(e),r()}))}catch(e){t(e)}}if(e.hasError)throw e.error}()}const F={__extends:o,__assign:a,__rest:i,__decorate:s,__param:c,__metadata:d,__awaiter:y,__generator:b,__createBinding:_,__exportStar:m,__values:h,__read:v,__spread:w,__spreadArrays:g,__spreadArray:j,__await:O,__asyncGenerator:S,__asyncDelegator:P,__asyncValues:T,__makeTemplateObject:x,__importStar:k,__importDefault:R,__classPrivateFieldGet:I,__classPrivateFieldSet:D,__classPrivateFieldIn:A,__addDisposableResource:q,__disposeResources:N}}},i={};function s(e){var t=i[e];if(void 0!==t)return t.exports;var r=i[e]={exports:{}};return a[e](r,r.exports,s),r.exports}s.d=(e,t)=>{for(var r in t)s.o(t,r)&&!s.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),s.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var c={};return(()=>{var e=c;Object.defineProperty(e,"__esModule",{value:!0}),e.Thumbnail=void 0;const t=s(988);var r=s(988);Object.defineProperty(e,"Thumbnail",{enumerable:!0,get:function(){return r.Thumbnail}}),e.default=t.Thumbnail})(),c})()));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nimbus-ds/thumbnail",
3
- "version": "2.3.0",
3
+ "version": "2.4.0-rc.1",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "files": [
@@ -9,14 +9,14 @@
9
9
  ],
10
10
  "sideEffects": false,
11
11
  "scripts": {
12
- "build": "webpack",
12
+ "build": "yarn g:webpack",
13
13
  "clean": "rm -rf dist",
14
14
  "version": "yarn version"
15
15
  },
16
16
  "dependencies": {
17
- "@nimbus-ds/icon": "^3.0.0",
18
- "@nimbus-ds/icons": "^1.1.0",
19
- "@nimbus-ds/skeleton": "^3.0.0"
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,8 @@
31
31
  "url": "https://github.com/TiendaNube/nimbus-design-system/issues"
32
32
  },
33
33
  "devDependencies": {
34
- "@vanilla-extract/dynamic": "^2.0.2",
35
- "webpack": "^5.74.0"
36
- }
34
+ "@nimbus-ds/webpack": "^1.5.0-rc.1",
35
+ "@vanilla-extract/dynamic": "^2.0.3"
36
+ },
37
+ "stableVersion": "2.3.0"
37
38
  }