@nimbus-ds/patterns 1.12.0-rc.4 → 1.12.0-rc.5

package/dist/README.md

@@ -0,0 +1,235 @@
+# `@nimbus-ds/patterns`
+
+[![@nimbus-ds/patterns](https://img.shields.io/npm/v/@nimbus-ds/patterns?label=%40nimbus-ds%2Fpatterns)](https://www.npmjs.com/package/@nimbus-ds/patterns)
+
+Nimbus components is a component library built with [React](https://reactjs.org), designed to help our teams and ecosystem build better products for our merchants.
+
+## 🚀 Getting started
+
+Install `@nimbus-ds/patterns` using any package manager.
+
+```sh
+$ yarn add @nimbus-ds/patterns
+# or
+$ npm install @nimbus-ds/patterns
+```
+
+## 💻 Usage
+
+```jsx
+import { Button } from "@nimbus-ds/patterns";
+
+const ComponentExample = () => <Button>Hello World</Button>;
+```
+
+For more information about our components, check out our [Storybook](https://tiendanube.github.io/nimbus-design-system/).
+
+### Folder & file structures 📁 📄
+
+- For best practices in structure files please read this [document](https://redux.js.org/style-guide/style-guide#structure-files-as-feature-folders-with-single-file-logic)
+- When creating a new component, do so inside the **src/atomic** or **src/composite** directory
+
+```
+  ├─ 📁 src
+  │  └─ 📁 components
+```
+
+- Every directory must contain a 📄 **CHANGELOG.md** which serves to document all changes and changes made to each component.
+
+```
+  ├─ 📁 src
+  │  ├─ 📁 components
+  │  │  ├─ 📁 ComponentExample
+  │  │  │  ├─ 📁 src
+  │  │  │  └─ CHANGELOG.md
+```
+
+- Every directory should contain a 📄 **README.md** which serves to document the installation steps and a brief summary of each component.
+
+```
+  ├─ 📁 src
+  │  ├─ 📁 components
+  │  │  ├─ 📁 ComponentExample
+  │  │  │  ├─ 📁 src
+  │  │  │  ├─ CHANGELOG.md
+  │  │  │  └─ README.md
+```
+
+- The directory should have the same name as the component. The component file should have the name of the component in Pascal Case format and the extension `.tsx`
+
+```
+  ├─ 📁 src
+  │  ├─ 📁 components
+  │  │  ├─ 📁 ComponentExample
+  │  │  │  ├─ 📁 src
+  │  │  │  │  └─ ComponentExample.tsx
+  │  │  │  ├─ CHANGELOG.md
+  │  │  │  └─ README.md
+```
+
+- Every directory should contain a 📄 **index.ts** which serves as an entry point for the module, component, utils and/or hooks.
+
+```
+  ├─ 📁 src
+  │  ├─ 📁 components
+  │  │  ├─ 📁 ComponentExample
+  │  │  │  ├─ 📁 src
+  │  │  │  │  ├─ index.ts
+  │  │  │  │  └─ ComponentExample.tsx
+  │  │  │  ├─ CHANGELOG.md
+  │  │  │  └─ README.md
+```
+
+- Every component, utils and/or hooks should come with a test. The test must have the same name as the file being tested and the extension must be `.spec.tsx`
+
+```
+  ├─ 📁 src
+  │  ├─ 📁 components
+  │  │  ├─ 📁 ComponentExample
+  │  │  │  ├─ 📁 src
+  │  │  │  │  ├─ index.ts
+  │  │  │  │  ├─ ComponentExample.tsx
+  │  │  │  │  └─ componentExample.spec.tsx
+  │  │  │  ├─ CHANGELOG.md
+  │  │  │  └─ README.md
+```
+
+- Every component must come with documentation. The documentation must have the same name as the file being documented and the extension must be `.stories.tsx`.
+
+```
+  ├─ 📁 src
+  │  ├─ 📁 components
+  │  │  ├─ 📁 ComponentExample
+  │  │  │  ├─ 📁 src
+  │  │  │  │  ├─ index.ts
+  │  │  │  │  ├─ ComponentExample.tsx
+  │  │  │  │  ├─ componentExample.spec.tsx
+  │  │  │  │  └─ componentExample.stories.tsx
+  │  │  │  ├─ CHANGELOG.md
+  │  │  │  └─ README.md
+```
+
+- Every component must come with a typing. The type must have the same name as the file being documented and the extension must be `.types.tsx`.
+
+```
+  ├─ 📁 src
+  │  ├─ 📁 components
+  │  │  ├─ 📁 ComponentExample
+  │  │  │  ├─ 📁 src
+  │  │  │  │  ├─ index.ts
+  │  │  │  │  ├─ ComponentExample.tsx
+  │  │  │  │  ├─ componentExample.spec.tsx
+  │  │  │  │  ├─ componentExample.stories.tsx
+  │  │  │  │  └─ componentExample.types.ts
+  │  │  │  ├─ CHANGELOG.md
+  │  │  │  └─ README.md
+```
+
+- If a component has one or more children components, a subdirectory **📁 components** must be created inside de main directory of the component.
+
+```
+  ├─ 📁 src
+  │  ├─ 📁 components
+  │  │  ├─ 📁 ComponentExample
+  │  │  │  ├─ 📁 src
+  │  │  │  │  ├─ 📁 components
+  │  │  │  │  │  ├─ 📁 ComponentChild
+  │  │  │  │  │  │  ├─ index.ts
+  │  │  │  │  │  │  ├─ ComponentChild.tsx
+  │  │  │  │  │  │  ├─ componentChild.spec.tsx
+  │  │  │  │  │  │  └─ componentExample.types.ts
+  │  │  │  │  │  └─ index.ts
+  │  │  │  │  ├─ index.ts
+  │  │  │  │  ├─ ComponentExample.tsx
+  │  │  │  │  ├─ componentExample.spec.tsx
+  │  │  │  │  ├─ componentExample.stories.tsx
+  │  │  │  │  └─ componentExample.types.ts
+  │  │  │  ├─ CHANGELOG.md
+  │  │  │  └─ README.md
+```
+
+### Component coding 🤖 ⌨️
+
+- The component should have the same name as the file using Pascal Case format. It should be declared in a Arrow Function, always typying the expected answer and making the default export at the end of the file.
+
+  ```jsx
+  // ComponentExample.tsx
+  import React from "react";
+
+  const ComponentExample: React.FC = () => <div>...</div>;
+
+  export { ComponentExample };
+  ```
+
+- If the component has props, they will be imported from the corresponding `.definitions.ts` file adding initial prefix corresponding to their type. Example interface ` ILogin`, type `TLogin`, enum `ELogin`.
+
+  ```jsx
+  // ComponentExample.tsx
+  import React from "react";
+  import { ComponentExampleProps } from "./componentExampleProps.types";
+
+  const ComponentExample: React.FC<ComponentExampleProps> = ({
+    title,
+    description,
+  }) => (
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+    </div>
+  );
+
+  export { ComponentExample };
+  ```
+
+### Testing 🧪🔬
+
+- For testing best practices, please read this [document](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library).
+- To create a test is necessary to import from the testing library both the render and the screen.
+
+```jsx
+import { render, screen } from "@testing-library/react";
+```
+
+- The component to be tested should also be imported.
+
+```jsx
+import { render, screen } from "@testing-library/react";
+import { ComponentExample } from "./ComponentExample";
+```
+
+- The heading of the tests must be written following the order Given-When-Then [Documentation](https://cucumber.io/docs/gherkin/reference/)
+  - **Given** represents a precondition
+  - **When** an action
+  - **Then** a result or consequence of the action (user acceptance criteria).
+  - **And** a result or consequence of other consequence (user acceptance criteria).
+  - **But** a result which should not be possibly observable
+
+```jsx
+import { render, screen } from "@testing-library/react";
+import { ComponentExample } from "./ComponentExample";
+
+describe("GIVEN <ComponentExample />", () => {
+  describe("WHEN rendered", () => {
+      it("THEN should display the correct text", () => {
+        ...
+      });
+  });
+});
+```
+
+- In this first instance, we will verify the right rendering of the component by checking the text in each of the elements.
+
+```jsx
+import { render, screen } from "@testing-library/react";
+import { ComponentExample } from "./ComponentExample";
+
+describe("GIVEN <ComponentExample />", () => {
+  describe("WHEN rendered", () => {
+    it("THEN should display the correct text", () => {
+      render(<ComponentExample title="title" description="description" />);
+      expect(screen.getByText(/title/i)).toBeInTheDocument();
+      expect(screen.getByText(/description/i)).toBeInTheDocument();
+    });
+  });
+});
+```

package/dist/SideModal/index.d.ts

@@ -0,0 +1,65 @@
+// Generated by dts-bundle-generator v8.0.0
+
+import { ButtonProperties, ButtonProps, SidebarProperties } from '@nimbus-ds/components';
+import React from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+export type SideModalPadding = "none" | "base";
+export interface SideModalProperties extends Pick<SidebarProperties, "position" | "onRemove" | "open" | "padding" | "maxWidth" | "zIndex"> {
+	/**
+	 * Title.
+	 */
+	title?: string;
+	/**
+	 * Action Title
+	 * @TJS-type React.ReactNode
+	 */
+	titleAction?: ReactNode;
+	/**
+	 * Action Header
+	 * @TJS-type React.ReactNode
+	 */
+	headerAction?: ReactNode;
+	/**
+	 * Icon Header
+	 * @TJS-type React.ReactNode
+	 */
+	headerIcon?: ReactNode;
+	/**
+	 * Body Content
+	 * @TJS-type React.ReactNode
+	 */
+	children?: ReactNode;
+	/**
+	 * Header padding.
+	 */
+	paddingHeader?: SideModalPadding;
+	/**
+	 * Body padding.
+	 */
+	paddingBody?: SideModalPadding;
+	/**
+	 * Footer padding.
+	 */
+	paddingFooter?: SideModalPadding;
+	/**
+	 * Footer element actions.
+	 */
+	footer?: {
+		primaryAction: ButtonProperties;
+		secondaryAction: ButtonProperties;
+	};
+}
+export type SideModalProps = SideModalProperties & {
+	footer?: {
+		primaryAction: ButtonProps;
+		secondaryAction: ButtonProps;
+	};
+} & HTMLAttributes<HTMLElement>;
+export declare const SideModal: React.FC<SideModalProps>;
+
+export {
+	SideModal as default,
+};
+
+export {};

package/dist/SideModal/index.js

@@ -0,0 +1,2 @@
+"use client";
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("@nimbus-ds/components")):"function"==typeof define&&define.amd?define(["react","@nimbus-ds/components"],t):"object"==typeof exports?exports["@nimbus-ds/patterns"]=t(require("react"),require("@nimbus-ds/components")):e["@nimbus-ds/patterns"]=t(e.react,e["@nimbus-ds/components"])}(global,((e,t)=>(()=>{"use strict";var r={4765:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.SideModal=void 0;const n=r(5163).__importDefault(r(8156)),o=r(5280),a=({title:e,titleAction:t,headerAction:r,headerIcon:a,paddingHeader:i,paddingBody:c,paddingFooter:u,footer:l,children:f,...s})=>n.default.createElement(o.Sidebar,{...s},n.default.createElement(o.Sidebar.Header,{padding:i||"base"},n.default.createElement(o.Box,{display:"flex",justifyContent:"space-between",alignItems:"center",mb:"4"},r,a),n.default.createElement(o.Box,{display:"flex",justifyContent:"space-between",alignItems:"center"},n.default.createElement(o.Title,{as:"h2"},e),t)),n.default.createElement(o.Sidebar.Body,{padding:c},f),!!l&&n.default.createElement(o.Sidebar.Footer,{padding:u||"base"},n.default.createElement(o.Button,{...l.primaryAction}),n.default.createElement(o.Button,{...l.secondaryAction})));t.SideModal=a,a.displayName="SideModal"},5163:(e,t,r)=>{r.r(t),r.d(t,{__assign:()=>a,__asyncDelegator:()=>P,__asyncGenerator:()=>S,__asyncValues:()=>x,__await:()=>j,__awaiter:()=>y,__classPrivateFieldGet:()=>A,__classPrivateFieldIn:()=>C,__classPrivateFieldSet:()=>B,__createBinding:()=>v,__decorate:()=>c,__esDecorate:()=>l,__exportStar:()=>h,__extends:()=>o,__generator:()=>b,__importDefault:()=>M,__importStar:()=>I,__makeTemplateObject:()=>E,__metadata:()=>d,__param:()=>u,__propKey:()=>s,__read:()=>_,__rest:()=>i,__runInitializers:()=>f,__setFunctionName:()=>p,__spread:()=>w,__spreadArray:()=>O,__spreadArrays:()=>g,__values:()=>m});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,r,n,o,a){function i(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var c,u=n.kind,l="getter"===u?"get":"setter"===u?"set":"value",f=!t&&e?n.static?e:e.prototype:null,s=t||(f?Object.getOwnPropertyDescriptor(f,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 v=(0,r[d])("accessor"===u?{get:s.get,set:s.set}:s[l],y);if("accessor"===u){if(void 0===v)continue;if(null===v||"object"!=typeof v)throw new TypeError("Object expected");(c=i(v.get))&&(s.get=c),(c=i(v.set))&&(s.set=c),(c=i(v.init))&&o.push(c)}else(c=i(v))&&("field"===u?o.push(c):s[l]=c)}f&&Object.defineProperty(f,n.name,s),p=!0}function f(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 s(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{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 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:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function c(c){return function(u){return function(c){if(r)throw new TypeError("Generator is already executing.");for(;a&&(a=0,c[0]&&(i=0)),i;)try{if(r=1,n&&(o=2&c[0]?n.return:c[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,c[1])).done)return o;switch(n=0,o&&(c=[2&c[0],o.value]),c[0]){case 0:case 1:o=c;break;case 4:return i.label++,{value:c[1],done:!1};case 5:i.label++,n=c[1],c=[0];continue;case 7:c=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==c[0]&&2!==c[0])){i=0;continue}if(3===c[0]&&(!o||c[1]>o[0]&&c[1]<o[3])){i.label=c[1];break}if(6===c[0]&&i.label<o[1]){i.label=o[1],o=c;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(c);break}o[2]&&i.ops.pop(),i.trys.pop();continue}c=t.call(e,i)}catch(e){c=[6,e],n=0}finally{r=o=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}([c,u])}}}var v=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 h(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||v(t,e,r)}function m(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 _(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(_(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,c=a.length;i<c;i++,o++)n[o]=a[i];return n}function O(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 j(e){return this instanceof j?(this.v=e,this):new j(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||c(e,t)}))})}function c(e,t){try{(r=o[e](t)).value instanceof j?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 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:j(e[n](t)),done:!1}:o?o(t):t}:o}}function x(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,r=e[Symbol.asyncIterator];return r?r.call(e):(e=m(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 E(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var T=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t};function I(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)&&v(t,e,r);return T(t,e),t}function M(e){return e&&e.__esModule?e:{default:e}}function A(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 B(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 C(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)}},5280:e=>{e.exports=t},8156:t=>{t.exports=e}},n={};function o(e){var t=n[e];if(void 0!==t)return t.exports;var a=n[e]={exports:{}};return r[e](a,a.exports,o),a.exports}o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{var e=a;Object.defineProperty(e,"__esModule",{value:!0}),e.SideModal=void 0;const t=o(4765);var r=o(4765);Object.defineProperty(e,"SideModal",{enumerable:!0,get:function(){return r.SideModal}}),e.default=t.SideModal})(),a})()));

package/dist/ThumbnailWithAction/index.d.ts

@@ -0,0 +1,31 @@
+// Generated by dts-bundle-generator v8.0.0
+
+import { BoxProperties, ThumbnailProperties, ThumbnailProps } from '@nimbus-ds/components';
+import React from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+export interface ThumbnailWithActionProperties extends BoxProperties {
+	/**
+	 * Thumbnail component properties.
+	 */
+	thumbnail: ThumbnailProperties;
+	/**
+	 * Element to be rendered inside the Thumbnail.
+	 * @TJS-type React.ReactNode
+	 */
+	children: ReactNode;
+	/**
+	 * Optional position of the element.
+	 */
+	contentPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+}
+export type ThumbnailWithActionProps = ThumbnailWithActionProperties & {
+	thumbnail: ThumbnailProps;
+} & Omit<HTMLAttributes<HTMLElement>, "color">;
+export declare const ThumbnailWithAction: React.FC<ThumbnailWithActionProps>;
+
+export {
+	ThumbnailWithAction as default,
+};
+
+export {};

package/dist/ThumbnailWithAction/index.js

@@ -0,0 +1,2 @@
+"use client";
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("@nimbus-ds/components")):"function"==typeof define&&define.amd?define(["react","@nimbus-ds/components"],e):"object"==typeof exports?exports["@nimbus-ds/patterns"]=e(require("react"),require("@nimbus-ds/components")):t["@nimbus-ds/patterns"]=e(t.react,t["@nimbus-ds/components"])}(global,((t,e)=>(()=>{"use strict";var r={4336:(t,e,r)=>{Object.defineProperty(e,"__esModule",{value:!0}),e.ThumbnailWithAction=void 0;const n=r(5163).__importDefault(r(8156)),o=r(5280),i=r(2910),a=({className:t,style:e,thumbnail:r,children:a,contentPosition:c="top-right",...u})=>{const{top:l,left:f,right:s,bottom:p}=i.contentPositions[c];return n.default.createElement(o.Box,{position:"relative",width:"fit-content",borderRadius:"2",overflow:"hidden"},n.default.createElement(o.Box,{...u,style:e,className:t,position:"absolute",zIndex:"100",top:l,left:f,right:s,bottom:p,p:"2"},a),n.default.createElement(o.Thumbnail,{...r}))};e.ThumbnailWithAction=a,a.displayName="ThumbnailWithAction"},2910:(t,e)=>{Object.defineProperty(e,"__esModule",{value:!0}),e.contentPositions=void 0,e.contentPositions={"top-left":{top:"0",left:"0",right:void 0,bottom:void 0},"top-right":{top:"0",left:void 0,right:"0",bottom:void 0},"bottom-left":{top:void 0,left:"0",right:void 0,bottom:"0"},"bottom-right":{top:void 0,left:void 0,right:"0",bottom:"0"}}},5163:(t,e,r)=>{r.r(e),r.d(e,{__assign:()=>i,__asyncDelegator:()=>x,__asyncGenerator:()=>P,__asyncValues:()=>S,__await:()=>j,__awaiter:()=>d,__classPrivateFieldGet:()=>M,__classPrivateFieldIn:()=>R,__classPrivateFieldSet:()=>D,__createBinding:()=>h,__decorate:()=>c,__esDecorate:()=>l,__exportStar:()=>v,__extends:()=>o,__generator:()=>b,__importDefault:()=>I,__importStar:()=>A,__makeTemplateObject:()=>T,__metadata:()=>y,__param:()=>u,__propKey:()=>s,__read:()=>_,__rest:()=>a,__runInitializers:()=>f,__setFunctionName:()=>p,__spread:()=>w,__spreadArray:()=>O,__spreadArrays:()=>g,__values:()=>m});var n=function(t,e){return n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])},n(t,e)};function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function r(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)}var i=function(){return i=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var o in e=arguments[r])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},i.apply(this,arguments)};function a(t,e){var r={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(r[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(t);o<n.length;o++)e.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(t,n[o])&&(r[n[o]]=t[n[o]])}return r}function c(t,e,r,n){var o,i=arguments.length,a=i<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,r,n);else for(var c=t.length-1;c>=0;c--)(o=t[c])&&(a=(i<3?o(a):i>3?o(e,r,a):o(e,r))||a);return i>3&&a&&Object.defineProperty(e,r,a),a}function u(t,e){return function(r,n){e(r,n,t)}}function l(t,e,r,n,o,i){function a(t){if(void 0!==t&&"function"!=typeof t)throw new TypeError("Function expected");return t}for(var c,u=n.kind,l="getter"===u?"get":"setter"===u?"set":"value",f=!e&&t?n.static?t:t.prototype:null,s=e||(f?Object.getOwnPropertyDescriptor(f,n.name):{}),p=!1,y=r.length-1;y>=0;y--){var d={};for(var b in n)d[b]="access"===b?{}:n[b];for(var b in n.access)d.access[b]=n.access[b];d.addInitializer=function(t){if(p)throw new TypeError("Cannot add initializers after decoration has completed");i.push(a(t||null))};var h=(0,r[y])("accessor"===u?{get:s.get,set:s.set}:s[l],d);if("accessor"===u){if(void 0===h)continue;if(null===h||"object"!=typeof h)throw new TypeError("Object expected");(c=a(h.get))&&(s.get=c),(c=a(h.set))&&(s.set=c),(c=a(h.init))&&o.push(c)}else(c=a(h))&&("field"===u?o.push(c):s[l]=c)}f&&Object.defineProperty(f,n.name,s),p=!0}function f(t,e,r){for(var n=arguments.length>2,o=0;o<e.length;o++)r=n?e[o].call(t,r):e[o].call(t);return n?r:void 0}function s(t){return"symbol"==typeof t?t:"".concat(t)}function p(t,e,r){return"symbol"==typeof e&&(e=e.description?"[".concat(e.description,"]"):""),Object.defineProperty(t,"name",{configurable:!0,value:r?"".concat(r," ",e):e})}function y(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)}function d(t,e,r,n){return new(r||(r=Promise))((function(o,i){function a(t){try{u(n.next(t))}catch(t){i(t)}}function c(t){try{u(n.throw(t))}catch(t){i(t)}}function u(t){var e;t.done?o(t.value):(e=t.value,e instanceof r?e:new r((function(t){t(e)}))).then(a,c)}u((n=n.apply(t,e||[])).next())}))}function b(t,e){var r,n,o,i,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function c(c){return function(u){return function(c){if(r)throw new TypeError("Generator is already executing.");for(;i&&(i=0,c[0]&&(a=0)),a;)try{if(r=1,n&&(o=2&c[0]?n.return:c[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,c[1])).done)return o;switch(n=0,o&&(c=[2&c[0],o.value]),c[0]){case 0:case 1:o=c;break;case 4:return a.label++,{value:c[1],done:!1};case 5:a.label++,n=c[1],c=[0];continue;case 7:c=a.ops.pop(),a.trys.pop();continue;default:if(!(o=a.trys,(o=o.length>0&&o[o.length-1])||6!==c[0]&&2!==c[0])){a=0;continue}if(3===c[0]&&(!o||c[1]>o[0]&&c[1]<o[3])){a.label=c[1];break}if(6===c[0]&&a.label<o[1]){a.label=o[1],o=c;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(c);break}o[2]&&a.ops.pop(),a.trys.pop();continue}c=e.call(t,a)}catch(t){c=[6,t],n=0}finally{r=o=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}([c,u])}}}var h=Object.create?function(t,e,r,n){void 0===n&&(n=r);var o=Object.getOwnPropertyDescriptor(e,r);o&&!("get"in o?!e.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return e[r]}}),Object.defineProperty(t,n,o)}:function(t,e,r,n){void 0===n&&(n=r),t[n]=e[r]};function v(t,e){for(var r in t)"default"===r||Object.prototype.hasOwnProperty.call(e,r)||h(e,t,r)}function m(t){var e="function"==typeof Symbol&&Symbol.iterator,r=e&&t[e],n=0;if(r)return r.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&n>=t.length&&(t=void 0),{value:t&&t[n++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}function _(t,e){var r="function"==typeof Symbol&&t[Symbol.iterator];if(!r)return t;var n,o,i=r.call(t),a=[];try{for(;(void 0===e||e-- >0)&&!(n=i.next()).done;)a.push(n.value)}catch(t){o={error:t}}finally{try{n&&!n.done&&(r=i.return)&&r.call(i)}finally{if(o)throw o.error}}return a}function w(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(_(arguments[e]));return t}function g(){for(var t=0,e=0,r=arguments.length;e<r;e++)t+=arguments[e].length;var n=Array(t),o=0;for(e=0;e<r;e++)for(var i=arguments[e],a=0,c=i.length;a<c;a++,o++)n[o]=i[a];return n}function O(t,e,r){if(r||2===arguments.length)for(var n,o=0,i=e.length;o<i;o++)!n&&o in e||(n||(n=Array.prototype.slice.call(e,0,o)),n[o]=e[o]);return t.concat(n||Array.prototype.slice.call(e))}function j(t){return this instanceof j?(this.v=t,this):new j(t)}function P(t,e,r){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var n,o=r.apply(t,e||[]),i=[];return n={},a("next"),a("throw"),a("return"),n[Symbol.asyncIterator]=function(){return this},n;function a(t){o[t]&&(n[t]=function(e){return new Promise((function(r,n){i.push([t,e,r,n])>1||c(t,e)}))})}function c(t,e){try{(r=o[t](e)).value instanceof j?Promise.resolve(r.value.v).then(u,l):f(i[0][2],r)}catch(t){f(i[0][3],t)}var r}function u(t){c("next",t)}function l(t){c("throw",t)}function f(t,e){t(e),i.shift(),i.length&&c(i[0][0],i[0][1])}}function x(t){var e,r;return e={},n("next"),n("throw",(function(t){throw t})),n("return"),e[Symbol.iterator]=function(){return this},e;function n(n,o){e[n]=t[n]?function(e){return(r=!r)?{value:j(t[n](e)),done:!1}:o?o(e):e}:o}}function S(t){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var e,r=t[Symbol.asyncIterator];return r?r.call(t):(t=m(t),e={},n("next"),n("throw"),n("return"),e[Symbol.asyncIterator]=function(){return this},e);function n(r){e[r]=t[r]&&function(e){return new Promise((function(n,o){(function(t,e,r,n){Promise.resolve(n).then((function(e){t({value:e,done:r})}),e)})(n,o,(e=t[r](e)).done,e.value)}))}}}function T(t,e){return Object.defineProperty?Object.defineProperty(t,"raw",{value:e}):t.raw=e,t}var E=Object.create?function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}:function(t,e){t.default=e};function A(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var r in t)"default"!==r&&Object.prototype.hasOwnProperty.call(t,r)&&h(e,t,r);return E(e,t),e}function I(t){return t&&t.__esModule?t:{default:t}}function M(t,e,r,n){if("a"===r&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!n:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?n:"a"===r?n.call(t):n?n.value:e.get(t)}function D(t,e,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 e?t!==e||!o:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?o.call(t,r):o?o.value=r:e.set(t,r),r}function R(t,e){if(null===e||"object"!=typeof e&&"function"!=typeof e)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof t?e===t:t.has(e)}},5280:t=>{t.exports=e},8156:e=>{e.exports=t}},n={};function o(t){var e=n[t];if(void 0!==e)return e.exports;var i=n[t]={exports:{}};return r[t](i,i.exports,o),i.exports}o.d=(t,e)=>{for(var r in e)o.o(e,r)&&!o.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},o.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),o.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var i={};return(()=>{var t=i;Object.defineProperty(t,"__esModule",{value:!0}),t.ThumbnailWithAction=void 0;const e=o(4336);var r=o(4336);Object.defineProperty(t,"ThumbnailWithAction",{enumerable:!0,get:function(){return r.ThumbnailWithAction}}),t.default=e.ThumbnailWithAction})(),i})()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nimbus-ds/patterns",
-  "version": "1.12.0-rc.4",
+  "version": "1.12.0-rc.5",
   "license": "MIT",
   "source": "src/index.ts",
   "main": "dist/index.js",
@@ -27,6 +27,14 @@
     "react": "^16.8 || ^17.0 || ^18.0",
     "react-dom": "^16.8 || ^17.0 || ^18.0"
   },
+  "homepage": "https://nimbus.nuvemshop.com.br/documentation",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TiendaNube/nimbus-patterns.git"
+  },
+  "bugs": {
+    "url": "https://github.com/TiendaNube/nimbus-patterns/issues"
+  },
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -36,18 +44,85 @@
       "import": "./dist/AppShell/index.js",
       "require": "./dist/AppShell/index.js"
     },
+    "./Calendar": {
+      "import": "./dist/Calendar/index.js",
+      "require": "./dist/Calendar/index.js"
+    },
+    "./CalloutCard": {
+      "import": "./dist/CalloutCard/index.js",
+      "require": "./dist/CalloutCard/index.js"
+    },
+    "./DataList": {
+      "import": "./dist/DataList/index.js",
+      "require": "./dist/DataList/index.js"
+    },
+    "./DataTable": {
+      "import": "./dist/DataTable/index.js",
+      "require": "./dist/DataTable/index.js"
+    },
+    "./Editor": {
+      "import": "./dist/Editor/index.js",
+      "require": "./dist/Editor/index.js"
+    },
+    "./EmptyApp": {
+      "import": "./dist/EmptyApp/index.js",
+      "require": "./dist/EmptyApp/index.js"
+    },
+    "./EmptyMessage": {
+      "import": "./dist/EmptyMessage/index.js",
+      "require": "./dist/EmptyMessage/index.js"
+    },
+    "./FormField": {
+      "import": "./dist/FormField/index.js",
+      "require": "./dist/FormField/index.js"
+    },
+    "./HelpLink": {
+      "import": "./dist/HelpLink/index.js",
+      "require": "./dist/HelpLink/index.js"
+    },
+    "./InitialScreen": {
+      "import": "./dist/InitialScreen/index.js",
+      "require": "./dist/InitialScreen/index.js"
+    },
+    "./InteractiveList": {
+      "import": "./dist/InteractiveList/index.js",
+      "require": "./dist/InteractiveList/index.js"
+    },
     "./Layout": {
       "import": "./dist/Layout/index.js",
       "require": "./dist/Layout/index.js"
+    },
+    "./Menu": {
+      "import": "./dist/Menu/index.js",
+      "require": "./dist/Menu/index.js"
+    },
+    "./MenuButton": {
+      "import": "./dist/MenuButton/index.js",
+      "require": "./dist/MenuButton/index.js"
+    },
+    "./NavTabs": {
+      "import": "./dist/NavTabs/index.js",
+      "require": "./dist/NavTabs/index.js"
+    },
+    "./Page": {
+      "import": "./dist/Page/index.js",
+      "require": "./dist/Page/index.js"
+    },
+    "./PlanDisplay": {
+      "import": "./dist/PlanDisplay/index.js",
+      "require": "./dist/PlanDisplay/index.js"
+    },
+    "./ProductUpdates": {
+      "import": "./dist/ProductUpdates/index.js",
+      "require": "./dist/ProductUpdates/index.js"
+    },
+    "./SideModal": {
+      "import": "./dist/SideModal/index.js",
+      "require": "./dist/SideModal/index.js"
+    },
+    "./ThumbnailWithAction": {
+      "import": "./dist/ThumbnailWithAction/index.js",
+      "require": "./dist/ThumbnailWithAction/index.js"
     }
-  },
-  "homepage": "https://nimbus.nuvemshop.com.br/documentation",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/TiendaNube/nimbus-patterns.git"
-  },
-  "bugs": {
-    "url": "https://github.com/TiendaNube/nimbus-patterns/issues"
-  },
-  "stableVersion": "1.11.1"
+  }
 }