@faststore/components 2.0.52-alpha.0 → 2.0.53-alpha.0

package/dist/atoms/Button/Button.d.ts

@@ -21,13 +21,21 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      */
     inverse?: boolean;
     /**
-     * Specifies that this button should be disabled
+     * Specifies that this button should be disabled.
      */
     disabled?: boolean;
     /**
      * A React component that will be rendered as an icon.
      */
     icon?: ReactNode;
+    /**
+     * Boolean that represents a loading state.
+     */
+    loading?: boolean;
+    /**
+     * Specifies a label for loading state.
+     */
+    loadingLabel?: string;
     /**
      * Specifies where the icon should be positioned
      */

package/dist/atoms/Button/Button.js

@@ -1,9 +1,12 @@
 import React, { forwardRef } from 'react';
-import { Icon } from '../../index';
-const Button = forwardRef(function Button({ children, variant, inverse, size = 'regular', testId = 'fs-button', icon, iconPosition = 'left', disabled, ...otherProps }, ref) {
-    return (React.createElement("button", { ref: ref, "data-fs-button": true, "data-fs-button-inverse": inverse, "data-fs-button-size": size, "data-fs-button-variant": variant, disabled: disabled, "data-testid": testId, ...otherProps },
+import { Icon, Loader } from '../../index';
+const Button = forwardRef(function Button({ children, variant, inverse, size = 'regular', testId = 'fs-button', loading, loadingLabel, icon, iconPosition = 'left', disabled, ...otherProps }, ref) {
+    return (React.createElement("button", { ref: ref, "data-fs-button": true, "data-fs-button-inverse": inverse, "data-fs-button-size": size, "data-fs-button-loading": loading, "data-fs-button-variant": variant, disabled: disabled, "data-testid": testId, ...otherProps },
+        loading && (React.createElement("p", { "data-fs-button-loading-label": true },
+            loadingLabel,
+            React.createElement(Loader, { variant: variant === 'primary' && !inverse ? 'light' : 'dark' }))),
         icon && iconPosition === 'left' && React.createElement(Icon, { component: icon }),
-        children,
+        React.createElement("span", null, children),
         icon && iconPosition === 'right' && React.createElement(Icon, { component: icon })));
 });
 export default Button;

package/dist/atoms/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/atoms/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAqClC,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CACvE,EACE,QAAQ,EACR,OAAO,EACP,OAAO,EACP,IAAI,GAAG,SAAS,EAChB,MAAM,GAAG,WAAW,EACpB,IAAI,EACJ,YAAY,GAAG,MAAM,EACrB,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,oDAEgB,OAAO,yBACV,IAAI,4BACD,OAAO,EAC/B,QAAQ,EAAE,QAAQ,iBACL,MAAM,KACf,UAAU;QAEb,IAAI,IAAI,YAAY,KAAK,MAAM,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI;QAC5D,QAAQ;QACR,IAAI,IAAI,YAAY,KAAK,OAAO,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI,CACvD,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/atoms/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AA6C1C,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CACvE,EACE,QAAQ,EACR,OAAO,EACP,OAAO,EACP,IAAI,GAAG,SAAS,EAChB,MAAM,GAAG,WAAW,EACpB,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,YAAY,GAAG,MAAM,EACrB,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAGH,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,oDAEgB,OAAO,yBACV,IAAI,4BACD,OAAO,4BACP,OAAO,EAC/B,QAAQ,EAAE,QAAQ,iBACL,MAAM,KACf,UAAU;QAEb,OAAO,IAAI,CACV;YACG,YAAY;YACb,oBAAC,MAAM,IAAC,OAAO,EAAE,OAAO,KAAK,SAAS,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,GAAI,CACvE,CACL;QACA,IAAI,IAAI,YAAY,KAAK,MAAM,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI;QAC7D,kCAAO,QAAQ,CAAQ;QACtB,IAAI,IAAI,YAAY,KAAK,OAAO,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,IAAI,GAAI,CACvD,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}

package/dist/atoms/Loader/Loader.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export type LoaderProps = {
+    /**
+     * Specifies the component color variant.
+     */
+    variant?: 'light' | 'dark';
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+};
+declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<HTMLDivElement>>;
+export default Loader;

package/dist/atoms/Loader/Loader.js

@@ -0,0 +1,9 @@
+import React, { forwardRef } from 'react';
+const Loader = forwardRef(function Loader({ variant = 'dark', testId = 'fs-loader', ...otherProps }, ref) {
+    return (React.createElement("div", { ref: ref, "data-fs-loader": true, "data-fs-loader-variant": variant, "data-testid": testId, ...otherProps },
+        React.createElement("span", { "data-fs-loader-item": true }),
+        React.createElement("span", { "data-fs-loader-item": true }),
+        React.createElement("span", { "data-fs-loader-item": true })));
+});
+export default Loader;
+//# sourceMappingURL=Loader.js.map

package/dist/atoms/Loader/Loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../../src/atoms/Loader/Loader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAazC,MAAM,MAAM,GAAG,UAAU,CAA8B,SAAS,MAAM,CACpE,EAAE,OAAO,GAAG,MAAM,EAAE,MAAM,GAAG,WAAW,EAAE,GAAG,UAAU,EAAe,EACtE,GAAG;IAEH,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,oDAEgB,OAAO,iBAClB,MAAM,KACf,UAAU;QAEd,4DAAiC;QACjC,4DAAiC;QACjC,4DAAiC,CAC7B,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}

package/dist/atoms/Loader/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Loader';
+export type { LoaderProps } from './Loader';

package/dist/atoms/Loader/index.js

@@ -0,0 +1,2 @@
+export { default } from './Loader';
+//# sourceMappingURL=index.js.map

package/dist/atoms/Loader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/atoms/Loader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA"}

package/dist/index.d.ts

@@ -13,6 +13,8 @@ export { default as Label } from './atoms/Label';
 export type { LabelProps } from './atoms/Label';
 export { default as Link } from './atoms/Link';
 export type { LinkProps, LinkElementType } from './atoms/Link';
+export { default as Loader } from './atoms/Loader';
+export type { LoaderProps } from './atoms/Loader';
 export { default as List } from './atoms/List';
 export type { ListProps } from './atoms/List';
 export { default as Overlay } from './atoms/Overlay';

package/dist/index.js

@@ -8,6 +8,7 @@ export { default as Icon } from './atoms/Icon';
 export { default as Input } from './atoms/Input';
 export { default as Label } from './atoms/Label';
 export { default as Link } from './atoms/Link';
+export { default as Loader } from './atoms/Loader';
 export { default as List } from './atoms/List';
 export { default as Overlay } from './atoms/Overlay';
 export { default as Price } from './atoms/Price';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,cAAc,UAAU,CAAA;AAExB,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAElD,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,EACb,eAAe,EACf,cAAc,GACf,MAAM,uBAAuB,CAAA;AAO9B,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEpD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEpE,OAAO,EACL,OAAO,IAAI,QAAQ,EACnB,cAAc,EACd,YAAY,EACZ,YAAY,GACb,MAAM,sBAAsB,CAAA;AAO7B,OAAO,EACL,OAAO,IAAI,IAAI,EACf,WAAW,EACX,SAAS,GACV,MAAM,kBAAkB,CAAA;AAMzB,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAE9D,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,WAAW,GACZ,MAAM,wBAAwB,CAAA;AAK/B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,GACT,MAAM,mBAAmB,CAAA;AAS1B,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,iBAAiB,CAAA;AAEhD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAEtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAEhE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,8BAA8B,CAAA;AAG1E,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/molecules/BuyButton/BuyButton.js

@@ -1,10 +1,8 @@
 import React from 'react';
-import { Button, Icon } from '../../index';
+import { Button } from '../../index';
 import { ShoppingCart } from '../../assets';
 function BuyButton({ testId = 'fs-buy-button', icon, children, ...otherProps }) {
-    return (React.createElement(Button, { "data-fs-buy-button": true, "data-testid": testId, ...otherProps },
-        React.createElement(Icon, { component: React.createElement(ShoppingCart, null) }),
-        children));
+    return (React.createElement(Button, { "data-fs-buy-button": true, icon: React.createElement(ShoppingCart, null), iconPosition: "left", "data-testid": testId, ...otherProps }, children));
 }
 export default BuyButton;
 //# sourceMappingURL=BuyButton.js.map

package/dist/molecules/BuyButton/BuyButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BuyButton.js","sourceRoot":"","sources":["../../../src/molecules/BuyButton/BuyButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAI3C,SAAS,SAAS,CAAC,EACjB,MAAM,GAAG,eAAe,EACxB,IAAI,EACJ,QAAQ,EACR,GAAG,UAAU,EACE;IACf,OAAO,CACL,oBAAC,MAAM,+CAAiC,MAAM,KAAM,UAAU;QAC5D,oBAAC,IAAI,IAAC,SAAS,EAAE,oBAAC,YAAY,OAAG,GAAI;QACpC,QAAQ,CACF,CACV,CAAA;AACH,CAAC;AAED,eAAe,SAAS,CAAA"}
+{"version":3,"file":"BuyButton.js","sourceRoot":"","sources":["../../../src/molecules/BuyButton/BuyButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEpC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAI3C,SAAS,SAAS,CAAC,EACjB,MAAM,GAAG,eAAe,EACxB,IAAI,EACJ,QAAQ,EACR,GAAG,UAAU,EACE;IACf,OAAO,CACL,oBAAC,MAAM,gCAEL,IAAI,EAAE,oBAAC,YAAY,OAAG,EACtB,YAAY,EAAC,MAAM,iBACN,MAAM,KACf,UAAU,IAEb,QAAQ,CACF,CACV,CAAA;AACH,CAAC;AAED,eAAe,SAAS,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.52-alpha.0",
+  "version": "2.0.53-alpha.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
@@ -30,5 +30,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "fe474595d374d91b69063e0b2ed6e56eee0c36d0"
+  "gitHead": "a9a211450d2173e08fd8b8dcf4a6da4d78590a71"
 }

package/src/atoms/Button/Button.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode, ButtonHTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
-import { Icon } from '../../index'
+import { Icon, Loader } from '../../index'
 
 export type Variant = 'primary' | 'secondary' | 'tertiary'
 export type Size = 'small' | 'regular'
@@ -24,13 +24,21 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    */
   inverse?: boolean
   /**
-   * Specifies that this button should be disabled
+   * Specifies that this button should be disabled.
    */
   disabled?: boolean
   /**
    * A React component that will be rendered as an icon.
    */
   icon?: ReactNode
+  /**
+   * Boolean that represents a loading state.
+   */
+  loading?: boolean
+  /**
+   * Specifies a label for loading state.
+   */
+  loadingLabel?: string
   /**
    * Specifies where the icon should be positioned
    */
@@ -44,6 +52,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
     inverse,
     size = 'regular',
     testId = 'fs-button',
+    loading,
+    loadingLabel,
     icon,
     iconPosition = 'left',
     disabled,
@@ -51,19 +61,27 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
   },
   ref
 ) {
+
   return (
     <button
       ref={ref}
       data-fs-button
       data-fs-button-inverse={inverse}
       data-fs-button-size={size}
+      data-fs-button-loading={loading}
       data-fs-button-variant={variant}
       disabled={disabled}
       data-testid={testId}
       {...otherProps}
     >
+      {loading && (
+        <p data-fs-button-loading-label>
+          {loadingLabel}
+          <Loader variant={variant === 'primary' && !inverse ? 'light' : 'dark'} />
+        </p>
+      )}
       {icon && iconPosition === 'left' && <Icon component={icon} />}
-      {children}
+      <span>{children}</span>
       {icon && iconPosition === 'right' && <Icon component={icon} />}
     </button>
   )

package/src/atoms/Loader/Loader.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef } from 'react'
+
+export type LoaderProps = {
+  /**
+   * Specifies the component color variant.
+   */
+  variant?: 'light' | 'dark'
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const Loader = forwardRef<HTMLDivElement, LoaderProps>(function Loader(
+  { variant = 'dark', testId = 'fs-loader', ...otherProps }: LoaderProps,
+  ref
+) {
+  return (
+    <div
+      ref={ref}
+      data-fs-loader
+      data-fs-loader-variant={variant}
+      data-testid={testId}
+      {...otherProps}
+    >
+      <span data-fs-loader-item></span>
+      <span data-fs-loader-item></span>
+      <span data-fs-loader-item></span>
+    </div>
+  )
+})
+
+export default Loader

package/src/atoms/Loader/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Loader'
+export type { LoaderProps } from './Loader'

package/src/index.ts

@@ -16,6 +16,8 @@ export { default as Label } from './atoms/Label'
 export type { LabelProps } from './atoms/Label'
 export { default as Link } from './atoms/Link'
 export type { LinkProps, LinkElementType } from './atoms/Link'
+export { default as Loader } from './atoms/Loader'
+export type { LoaderProps } from './atoms/Loader'
 export { default as List } from './atoms/List'
 export type { ListProps } from './atoms/List'
 export { default as Overlay } from './atoms/Overlay'

package/src/molecules/BuyButton/BuyButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Button, Icon } from '../../index'
+import { Button } from '../../index'
 import type { ButtonProps } from '../../index'
 import { ShoppingCart } from '../../assets'
 
@@ -13,8 +13,13 @@ function BuyButton({
   ...otherProps
 }: BuyButtonProps) {
   return (
-    <Button data-fs-buy-button data-testid={testId} {...otherProps}>
-      <Icon component={<ShoppingCart />} />
+    <Button
+      data-fs-buy-button
+      icon={<ShoppingCart />}
+      iconPosition="left"
+      data-testid={testId}
+      {...otherProps}
+    >
       {children}
     </Button>
   )