@faststore/components 2.0.160-alpha.0 → 2.0.173-alpha.0

package/dist/molecules/RegionBar/RegionBar.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 import React from 'react';
 export interface RegionBarProps extends HTMLAttributes<HTMLDivElement> {
     /**
@@ -9,6 +9,22 @@ export interface RegionBarProps extends HTMLAttributes<HTMLDivElement> {
      * Function called when button is clicked.
      */
     onButtonClick?: () => void;
+    /**
+     * A React component that will be rendered as an icon.
+     */
+    icon?: ReactNode;
+    /**
+     * Specifies a label for the location text.
+     */
+    label: string;
+    /**
+     * Specifies a label for the edit text.
+     */
+    editLabel?: string;
+    /**
+     * A React component that will be rendered as an icon.
+     */
+    buttonIcon?: ReactNode;
 }
 declare const RegionBar: React.ForwardRefExoticComponent<RegionBarProps & React.RefAttributes<HTMLDivElement>>;
 export default RegionBar;

package/dist/molecules/RegionBar/RegionBar.js

@@ -1,12 +1,12 @@
 import React, { forwardRef } from 'react';
-import { Button, Icon } from '../../';
-const RegionBar = forwardRef(function RegionBar({ postalCode, onButtonClick, ...otherProps }, ref) {
+import { Button } from '../../';
+const RegionBar = forwardRef(function RegionBar({ postalCode, icon, label, editLabel, buttonIcon, onButtonClick, ...otherProps }, ref) {
     return (React.createElement("div", { ref: ref, "data-fs-region-bar": true, ...otherProps },
-        React.createElement(Button, { variant: "tertiary", iconPosition: "right", onClick: onButtonClick, icon: React.createElement(Icon, { name: "CaretRight" }) },
-            React.createElement(Icon, { name: "MapPin" }),
+        React.createElement(Button, { variant: "tertiary", iconPosition: "right", onClick: onButtonClick, icon: buttonIcon },
+            !!icon && icon,
             postalCode ? (React.createElement(React.Fragment, null,
                 React.createElement("span", { "data-fs-region-bar-postal-code": true }, postalCode),
-                React.createElement("span", { "data-fs-region-bar-cta": true }, "Edit"))) : (React.createElement("span", { "data-fs-region-bar-message": true }, "Set your location")))));
+                !!editLabel && React.createElement("span", { "data-fs-region-bar-cta": true }, editLabel))) : (React.createElement("span", { "data-fs-region-bar-message": true }, label)))));
 });
 export default RegionBar;
 //# sourceMappingURL=RegionBar.js.map

package/dist/molecules/RegionBar/RegionBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"RegionBar.js","sourceRoot":"","sources":["../../../src/molecules/RegionBar/RegionBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAarC,MAAM,SAAS,GAAG,UAAU,CAAiC,SAAS,SAAS,CAC7E,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,UAAU,EAAE,EAC5C,GAAG;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,iCAAyB,UAAU;QAC9C,oBAAC,MAAM,IACL,OAAO,EAAC,UAAU,EAClB,YAAY,EAAC,OAAO,EACpB,OAAO,EAAE,aAAa,EACtB,IAAI,EAAE,oBAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG;YAEhC,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG;YACrB,UAAU,CAAC,CAAC,CAAC,CACZ;gBACE,wEAAsC,UAAU,CAAQ;gBACxD,uEAAwC,CACvC,CACJ,CAAC,CAAC,CAAC,CACF,wFAAyD,CAC1D,CACM,CACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}
+{"version":3,"file":"RegionBar.js","sourceRoot":"","sources":["../../../src/molecules/RegionBar/RegionBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AA6B/B,MAAM,SAAS,GAAG,UAAU,CAAiC,SAAS,SAAS,CAC7E,EACE,UAAU,EACV,IAAI,EACJ,KAAK,EACL,SAAS,EACT,UAAU,EACV,aAAa,EACb,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,iCAAyB,UAAU;QAC9C,oBAAC,MAAM,IACL,OAAO,EAAC,UAAU,EAClB,YAAY,EAAC,OAAO,EACpB,OAAO,EAAE,aAAa,EACtB,IAAI,EAAE,UAAU;YAEf,CAAC,CAAC,IAAI,IAAI,IAAI;YACd,UAAU,CAAC,CAAC,CAAC,CACZ;gBACE,wEAAsC,UAAU,CAAQ;gBACvD,CAAC,CAAC,SAAS,IAAI,gEAA8B,SAAS,CAAQ,CAC9D,CACJ,CAAC,CAAC,CAAC,CACF,oEAAkC,KAAK,CAAQ,CAChD,CACM,CACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/organisms/RegionModal/RegionModal.d.ts

@@ -15,6 +15,10 @@ export interface RegionModalProps extends Omit<ModalProps, 'children'> {
      * Description for region modal.
      */
     description?: string;
+    /**
+     * Close button aria-label.
+     */
+    closeButtonAriaLabel?: string;
     /**
      * Props for the link `I don't know my Postal Code`.
      */
@@ -35,6 +39,10 @@ export interface RegionModalProps extends Omit<ModalProps, 'children'> {
      * Postal code input's value.
      */
     inputValue?: string;
+    /**
+     * Postal code input's label.
+     */
+    inputLabel?: string;
     /**
      * Enables fadeOut effect on modal after onSubmit function
      */
@@ -60,5 +68,5 @@ export interface RegionModalProps extends Omit<ModalProps, 'children'> {
      */
     onClear?: () => void;
 }
-declare function RegionModal({ testId, title, description, idkPostalCodeLinkProps, errorMessage, inputRef, inputValue, fadeOutOnSubmit, overlayProps, onClose, onInput, onSubmit, onClear, ...otherProps }: RegionModalProps): JSX.Element;
+declare function RegionModal({ testId, title, description, closeButtonAriaLabel, idkPostalCodeLinkProps, errorMessage, inputRef, inputValue, inputLabel, fadeOutOnSubmit, overlayProps, onClose, onInput, onSubmit, onClear, ...otherProps }: RegionModalProps): JSX.Element;
 export default RegionModal;

package/dist/organisms/RegionModal/RegionModal.js

@@ -1,21 +1,19 @@
 import React from 'react';
-import { Icon, InputField, Link, Modal, ModalBody, ModalHeader } from '../..';
-function RegionModal({ testId = 'fs-region-modal', title = 'Set your location', description = 'Prices, offers and availability may vary according to your location.', idkPostalCodeLinkProps, errorMessage, inputRef, inputValue, fadeOutOnSubmit, overlayProps, onClose, onInput, onSubmit, onClear, ...otherProps }) {
+import { InputField, Link, Modal, ModalBody, ModalHeader } from '../..';
+function RegionModal({ testId = 'fs-region-modal', title = 'Set your location', description = 'Prices, offers and availability may vary according to your location.', closeButtonAriaLabel = 'Close Region Modal', idkPostalCodeLinkProps, errorMessage, inputRef, inputValue, inputLabel = 'Postal Code', fadeOutOnSubmit, overlayProps, onClose, onInput, onSubmit, onClear, ...otherProps }) {
     return (React.createElement(Modal, { "data-fs-region-modal": true, testId: testId, overlayProps: overlayProps, title: "Region modal", "aria-label": "Region modal", ...otherProps }, ({ fadeOut }) => (React.createElement(React.Fragment, null,
         React.createElement(ModalHeader, { onClose: () => {
                 fadeOut();
                 onClose?.();
             }, title: title, description: description, closeBtnProps: {
-                'aria-label': 'Close Region Modal',
+                'aria-label': closeButtonAriaLabel,
             } }),
         React.createElement(ModalBody, null,
-            React.createElement(InputField, { "data-fs-region-modal-input": true, id: `${testId}-input-field`, inputRef: inputRef, label: "Postal Code", actionable: true, value: inputValue, onInput: (event) => onInput?.(event), onSubmit: () => {
+            React.createElement(InputField, { "data-fs-region-modal-input": true, id: `${testId}-input-field`, inputRef: inputRef, label: inputLabel, actionable: true, value: inputValue, onInput: (event) => onInput?.(event), onSubmit: () => {
                     onSubmit?.();
                     fadeOutOnSubmit ? fadeOut() : null;
                 }, onClear: () => onClear?.(), error: errorMessage }),
-            React.createElement(Link, { "data-fs-region-modal-link": true, ...idkPostalCodeLinkProps }, idkPostalCodeLinkProps?.children ?? (React.createElement(React.Fragment, null,
-                "I don't know my Postal Code",
-                React.createElement(Icon, { name: "ArrowSquareOut", width: 20, height: 20 })))))))));
+            React.createElement(Link, { "data-fs-region-modal-link": true, ...idkPostalCodeLinkProps }))))));
 }
 export default RegionModal;
 //# sourceMappingURL=RegionModal.js.map

package/dist/organisms/RegionModal/RegionModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"RegionModal.js","sourceRoot":"","sources":["../../../src/organisms/RegionModal/RegionModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAoE7E,SAAS,WAAW,CAAC,EACnB,MAAM,GAAG,iBAAiB,EAC1B,KAAK,GAAG,mBAAmB,EAC3B,WAAW,GAAG,sEAAsE,EACpF,sBAAsB,EACtB,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,YAAY,EACZ,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EACP,GAAG,UAAU,EACI;IACjB,OAAO,CACL,oBAAC,KAAK,kCAEJ,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAC,cAAc,gBACT,cAAc,KACrB,UAAU,IAEb,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAChB;QACE,oBAAC,WAAW,IACV,OAAO,EAAE,GAAG,EAAE;gBACZ,OAAO,EAAE,CAAA;gBACT,OAAO,EAAE,EAAE,CAAA;YACb,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE;gBACb,YAAY,EAAE,oBAAoB;aACnC,GACD;QACF,oBAAC,SAAS;YACR,oBAAC,UAAU,wCAET,EAAE,EAAE,GAAG,MAAM,cAAc,EAC3B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAC,aAAa,EACnB,UAAU,QACV,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,EACpC,QAAQ,EAAE,GAAG,EAAE;oBACb,QAAQ,EAAE,EAAE,CAAA;oBACZ,eAAe,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;gBACpC,CAAC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,EAC1B,KAAK,EAAE,YAAY,GACnB;YAEF,oBAAC,IAAI,0CAA+B,sBAAsB,IACvD,sBAAsB,EAAE,QAAQ,IAAI,CACnC;gBACG,6BAA6B;gBAC9B,oBAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,CACpD,CACJ,CACI,CACG,CACX,CACJ,CACK,CACT,CAAA;AACH,CAAC;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"RegionModal.js","sourceRoot":"","sources":["../../../src/organisms/RegionModal/RegionModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AA4EvE,SAAS,WAAW,CAAC,EACnB,MAAM,GAAG,iBAAiB,EAC1B,KAAK,GAAG,mBAAmB,EAC3B,WAAW,GAAG,sEAAsE,EACpF,oBAAoB,GAAG,oBAAoB,EAC3C,sBAAsB,EACtB,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,UAAU,GAAG,aAAa,EAC1B,eAAe,EACf,YAAY,EACZ,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EACP,GAAG,UAAU,EACI;IACjB,OAAO,CACL,oBAAC,KAAK,kCAEJ,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAC,cAAc,gBACT,cAAc,KACrB,UAAU,IAEb,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAChB;QACE,oBAAC,WAAW,IACV,OAAO,EAAE,GAAG,EAAE;gBACZ,OAAO,EAAE,CAAA;gBACT,OAAO,EAAE,EAAE,CAAA;YACb,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE;gBACb,YAAY,EAAE,oBAAoB;aACnC,GACD;QACF,oBAAC,SAAS;YACR,oBAAC,UAAU,wCAET,EAAE,EAAE,GAAG,MAAM,cAAc,EAC3B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,UAAU,EACjB,UAAU,QACV,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,EACpC,QAAQ,EAAE,GAAG,EAAE;oBACb,QAAQ,EAAE,EAAE,CAAA;oBACZ,eAAe,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;gBACpC,CAAC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,EAC1B,KAAK,EAAE,YAAY,GACnB;YAEF,oBAAC,IAAI,0CAA+B,sBAAsB,GAAI,CACpD,CACX,CACJ,CACK,CACT,CAAA;AACH,CAAC;AAED,eAAe,WAAW,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.160-alpha.0",
+  "version": "2.0.173-alpha.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
@@ -21,8 +21,8 @@
     "src"
   ],
   "devDependencies": {
-    "@faststore/eslint-config": "^2.0.104-alpha.0",
-    "@faststore/shared": "^2.0.104-alpha.0",
+    "@faststore/eslint-config": "^2.0.173-alpha.0",
+    "@faststore/shared": "^2.0.173-alpha.0",
     "eslint": "7.32.0",
     "typescript": "^4.8.4"
   },
@@ -30,5 +30,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "d42bb6e77de062523931bfb3095807d5a0ecc3eb"
+  "gitHead": "0f3272fc1c6c0b1c21933b8a06401baded4c3c57"
 }

package/src/molecules/RegionBar/RegionBar.tsx

@@ -1,7 +1,7 @@
-import type { HTMLAttributes } from 'react'
+import type { HTMLAttributes, ReactNode } from 'react'
 import React, { forwardRef } from 'react'
 
-import { Button, Icon } from '../../'
+import { Button } from '../../'
 
 export interface RegionBarProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -12,10 +12,34 @@ export interface RegionBarProps extends HTMLAttributes<HTMLDivElement> {
    * Function called when button is clicked.
    */
   onButtonClick?: () => void
+  /**
+   * A React component that will be rendered as an icon.
+   */
+  icon?: ReactNode
+  /**
+   * Specifies a label for the location text.
+   */
+  label: string
+  /**
+   * Specifies a label for the edit text.
+   */
+  editLabel?: string
+  /**
+   * A React component that will be rendered as an icon.
+   */
+  buttonIcon?: ReactNode
 }
 
 const RegionBar = forwardRef<HTMLDivElement, RegionBarProps>(function RegionBar(
-  { postalCode, onButtonClick, ...otherProps },
+  {
+    postalCode,
+    icon,
+    label,
+    editLabel,
+    buttonIcon,
+    onButtonClick,
+    ...otherProps
+  },
   ref
 ) {
   return (
@@ -24,16 +48,16 @@ const RegionBar = forwardRef<HTMLDivElement, RegionBarProps>(function RegionBar(
         variant="tertiary"
         iconPosition="right"
         onClick={onButtonClick}
-        icon={<Icon name="CaretRight" />}
+        icon={buttonIcon}
       >
-        <Icon name="MapPin" />
+        {!!icon && icon}
         {postalCode ? (
           <>
             <span data-fs-region-bar-postal-code>{postalCode}</span>
-            <span data-fs-region-bar-cta>Edit</span>
+            {!!editLabel && <span data-fs-region-bar-cta>{editLabel}</span>}
           </>
         ) : (
-          <span data-fs-region-bar-message>Set your location</span>
+          <span data-fs-region-bar-message>{label}</span>
         )}
       </Button>
     </div>

package/src/organisms/RegionModal/RegionModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import type { MutableRefObject } from 'react'
-import { Icon, InputField, Link, Modal, ModalBody, ModalHeader } from '../..'
+import { InputField, Link, Modal, ModalBody, ModalHeader } from '../..'
 import type {
   LinkElementType,
   LinkProps,
@@ -23,6 +23,10 @@ export interface RegionModalProps extends Omit<ModalProps, 'children'> {
    * Description for region modal.
    */
   description?: string
+  /**
+   * Close button aria-label.
+   */
+  closeButtonAriaLabel?: string
   /**
    * Props for the link `I don't know my Postal Code`.
    */
@@ -43,6 +47,10 @@ export interface RegionModalProps extends Omit<ModalProps, 'children'> {
    * Postal code input's value.
    */
   inputValue?: string
+  /**
+   * Postal code input's label.
+   */
+  inputLabel?: string
   /**
    * Enables fadeOut effect on modal after onSubmit function
    */
@@ -73,10 +81,12 @@ function RegionModal({
   testId = 'fs-region-modal',
   title = 'Set your location',
   description = 'Prices, offers and availability may vary according to your location.',
+  closeButtonAriaLabel = 'Close Region Modal',
   idkPostalCodeLinkProps,
   errorMessage,
   inputRef,
   inputValue,
+  inputLabel = 'Postal Code',
   fadeOutOnSubmit,
   overlayProps,
   onClose,
@@ -104,7 +114,7 @@ function RegionModal({
             title={title}
             description={description}
             closeBtnProps={{
-              'aria-label': 'Close Region Modal',
+              'aria-label': closeButtonAriaLabel,
             }}
           />
           <ModalBody>
@@ -112,7 +122,7 @@ function RegionModal({
               data-fs-region-modal-input
               id={`${testId}-input-field`}
               inputRef={inputRef}
-              label="Postal Code"
+              label={inputLabel}
               actionable
               value={inputValue}
               onInput={(event) => onInput?.(event)}
@@ -124,14 +134,7 @@ function RegionModal({
               error={errorMessage}
             />
 
-            <Link data-fs-region-modal-link {...idkPostalCodeLinkProps}>
-              {idkPostalCodeLinkProps?.children ?? (
-                <>
-                  {"I don't know my Postal Code"}
-                  <Icon name="ArrowSquareOut" width={20} height={20} />
-                </>
-              )}
-            </Link>
+            <Link data-fs-region-modal-link {...idkPostalCodeLinkProps} />
           </ModalBody>
         </>
       )}