@faststore/ui 2.0.169-alpha.0 → 2.0.175-alpha.0

package/dist/index.d.ts

@@ -3,7 +3,5 @@ export { default as TextArea } from './components/atoms/TextArea';
 export type { TextAreaProps } from './components/atoms/TextArea';
 export { default as Incentive } from './components/atoms/Incentive';
 export type { IncentiveProps } from './components/atoms/Incentive';
-export { default as Banner, BannerContent, BannerImage, BannerLink, } from './components/molecules/Banner';
-export type { BannerProps, BannerContentProps, BannerImageProps, BannerLinkProps, } from './components/molecules/Banner';
 export { Tile, Tiles } from './components/organisms/Tiles';
 export type { TilesProps, TileProps } from './components/organisms/Tiles';

package/dist/index.js

@@ -2,8 +2,6 @@ export * from '@faststore/components';
 // Atoms
 export { default as TextArea } from './components/atoms/TextArea';
 export { default as Incentive } from './components/atoms/Incentive';
-// Molecules
-export { default as Banner, BannerContent, BannerImage, BannerLink, } from './components/molecules/Banner';
 // Organisms
 export { Tile, Tiles } from './components/organisms/Tiles';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,aAAa,EACb,WAAW,EACX,UAAU,GACX,MAAM,+BAA+B,CAAA;AAQtC,YAAY;AACZ,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AACZ,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "2.0.169-alpha.0",
+  "version": "2.0.175-alpha.0",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -45,8 +45,8 @@
     "react-dom": "^18.2.0"
   },
   "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",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@types/tabbable": "^3.1.1",
     "babel-loader": "^8.2.5",
@@ -58,5 +58,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "243d208d99b39628236e7e86491b22621d54127e"
+  "gitHead": "49cd929bd62bf068a51337335d97142703f1c813"
 }

package/src/components/{molecules → organisms}/Banner/styles.scss

@@ -1,4 +1,4 @@
-[data-fs-banner-text] {
+[data-fs-banner] {
   // --------------------------------------------------------
   // Design Tokens for Banner Text
   // --------------------------------------------------------
@@ -49,7 +49,7 @@
     padding: var(--fs-banner-padding-desktop);
   }
 
-  [data-fs-banner-text-content] {
+  [data-fs-banner-content] {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -57,7 +57,7 @@
     height: 100%;
   }
 
-  [data-fs-banner-text-link] [data-fs-link-button] {
+  [data-fs-banner-link] {
     min-width: var(--fs-banner-button-link-min-width);
     margin: var(--fs-banner-button-link-margin-top) auto 0;
   }
@@ -66,7 +66,7 @@
   // Variants Styles
   // --------------------------------------------------------
 
-  &[data-fs-banner-text-variant="primary"] {
+  &[data-fs-banner-variant="primary"] {
     h2 {
       font-size: var(--fs-banner-title-size);
       font-weight: var(--fs-banner-title-weight);
@@ -79,7 +79,7 @@
     }
   }
 
-  &[data-fs-banner-text-variant="secondary"] {
+  &[data-fs-banner-variant="secondary"] {
     h2 {
       margin-bottom: var(--fs-spacing-2);
       font-size: var(--fs-banner-title-size);
@@ -99,26 +99,26 @@
     }
   }
 
-  &[data-fs-banner-text-color-variant="main"] {
+  &[data-fs-banner-color-variant="main"] {
     background-color: var(--fs-banner-main-bkg-color);
 
-    [data-fs-banner-text-heading] {
+    [data-fs-banner-heading] {
       color: var(--fs-banner-main-text-color);
     }
   }
 
-  &[data-fs-banner-text-color-variant="light"] {
+  &[data-fs-banner-color-variant="light"] {
     background-color: var(--fs-banner-light-bkg-color);
 
-    [data-fs-banner-text-heading] {
+    [data-fs-banner-heading] {
       color: var(--fs-banner-light-text-color);
     }
   }
 
-  &[data-fs-banner-text-color-variant="accent"] {
+  &[data-fs-banner-color-variant="accent"] {
     background-color: var(--fs-banner-accent-bkg-color);
 
-    [data-fs-banner-text-heading] {
+    [data-fs-banner-heading] {
       color: var(--fs-banner-accent-text-color);
     }
   }

package/src/components/organisms/BannerNewsletter/styles.scss

@@ -1,7 +1,7 @@
 [data-fs-banner-newsletter] {
   margin-bottom: var(--fs-grid-padding);
 
-  [data-fs-banner-text] {
+  [data-fs-banner] {
     border-radius: var(--fs-border-radius);
   }
 

package/src/index.ts

@@ -7,20 +7,6 @@ export type { TextAreaProps } from './components/atoms/TextArea'
 export { default as Incentive } from './components/atoms/Incentive'
 export type { IncentiveProps } from './components/atoms/Incentive'
 
-// Molecules
-export {
-  default as Banner,
-  BannerContent,
-  BannerImage,
-  BannerLink,
-} from './components/molecules/Banner'
-export type {
-  BannerProps,
-  BannerContentProps,
-  BannerImageProps,
-  BannerLinkProps,
-} from './components/molecules/Banner'
-
 // Organisms
 export { Tile, Tiles } from './components/organisms/Tiles'
 export type { TilesProps, TileProps } from './components/organisms/Tiles'

package/src/styles/base/layout.scss

@@ -78,3 +78,13 @@ main {
   height: 100%;
   object-fit: cover;
 }
+
+////////////////////
+// Pages
+////////////////////
+
+// Homepage
+.section-newsletter {
+  padding-top: var(--fs-grid-padding);
+  padding-bottom: 0;
+}

package/src/styles/components.scss

@@ -19,7 +19,6 @@
 // Molecules
 @import "../components/molecules/Accordion/styles";
 @import "../components/molecules/Alert/styles";
-@import "../components/molecules/Banner/styles";
 @import "../components/molecules/Breadcrumb/styles";
 @import "../components/molecules/BuyButton/styles";
 @import "../components/molecules/Carousel/styles";
@@ -56,6 +55,7 @@
 @import "../components/molecules/ToggleField/styles";
 
 // Organisms
+@import "../components/organisms/Banner/styles";
 @import "../components/organisms/BannerNewsletter/styles";
 @import "../components/organisms/CartSidebar/styles";
 @import "../components/organisms/EmptyState/styles";

package/dist/components/molecules/Banner/Banner.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import type { HTMLAttributes } from 'react';
-type BannerDirectionVariant = 'vertical' | 'horizontal';
-export interface BannerProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * ID to find this component in testing tools (e.g.: cypress,
-     * testing-library, and jest).
-     */
-    testId?: string;
-    children: React.ReactNode;
-    variant?: BannerDirectionVariant;
-}
-declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;
-export default Banner;

package/dist/components/molecules/Banner/Banner.js

@@ -1,6 +0,0 @@
-import React, { forwardRef } from 'react';
-const Banner = forwardRef(function Banner({ testId = 'store-banner', children, variant = 'vertical', ...otherProps }, ref) {
-    return (React.createElement("article", { ref: ref, "data-fs-banner": variant, "data-testid": testId, ...otherProps }, children));
-});
-export default Banner;
-//# sourceMappingURL=Banner.js.map

package/dist/components/molecules/Banner/Banner.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../../src/components/molecules/Banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAczC,MAAM,MAAM,GAAG,UAAU,CAA8B,SAAS,MAAM,CACpE,EAAE,MAAM,GAAG,cAAc,EAAE,QAAQ,EAAE,OAAO,GAAG,UAAU,EAAE,GAAG,UAAU,EAAE,EAC1E,GAAG;IAEH,OAAO,CACL,iCACE,GAAG,EAAE,GAAG,oBACQ,OAAO,iBACV,MAAM,KACf,UAAU,IAEb,QAAQ,CACD,CACX,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}

package/dist/components/molecules/Banner/BannerContent.d.ts

@@ -1,10 +0,0 @@
-import type { HTMLAttributes } from 'react';
-import React from 'react';
-export interface BannerContentProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-     */
-    testId?: string;
-}
-declare const BannerContent: React.ForwardRefExoticComponent<BannerContentProps & React.RefAttributes<HTMLDivElement>>;
-export default BannerContent;

package/dist/components/molecules/Banner/BannerContent.js

@@ -1,6 +0,0 @@
-import React, { forwardRef } from 'react';
-const BannerContent = forwardRef(function BannerContent({ testId = 'store-banner-content', children, ...otherProps }, ref) {
-    return (React.createElement("div", { ref: ref, "data-banner-content": true, "data-testid": testId, ...otherProps }, children));
-});
-export default BannerContent;
-//# sourceMappingURL=BannerContent.js.map

package/dist/components/molecules/Banner/BannerContent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BannerContent.js","sourceRoot":"","sources":["../../../../src/components/molecules/Banner/BannerContent.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AASzC,MAAM,aAAa,GAAG,UAAU,CAC9B,SAAS,aAAa,CACpB,EAAE,MAAM,GAAG,sBAAsB,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAC5D,GAAG;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,8CAAmC,MAAM,KAAM,UAAU,IACnE,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist/components/molecules/Banner/BannerImage.d.ts

@@ -1,10 +0,0 @@
-import type { HTMLAttributes } from 'react';
-import React from 'react';
-export interface BannerImageProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-     */
-    testId?: string;
-}
-declare const BannerImage: React.ForwardRefExoticComponent<BannerImageProps & React.RefAttributes<HTMLDivElement>>;
-export default BannerImage;

package/dist/components/molecules/Banner/BannerImage.js

@@ -1,6 +0,0 @@
-import React, { forwardRef } from 'react';
-const BannerImage = forwardRef(function BannerImage({ testId = 'store-banner-image', children, ...otherProps }, ref) {
-    return (React.createElement("div", { ref: ref, "data-banner-image": true, "data-testid": testId, ...otherProps }, children));
-});
-export default BannerImage;
-//# sourceMappingURL=BannerImage.js.map

package/dist/components/molecules/Banner/BannerImage.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BannerImage.js","sourceRoot":"","sources":["../../../../src/components/molecules/Banner/BannerImage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AASzC,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EAAE,MAAM,GAAG,oBAAoB,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAC1D,GAAG;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,4CAAiC,MAAM,KAAM,UAAU,IACjE,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/components/molecules/Banner/BannerLink.d.ts

@@ -1,10 +0,0 @@
-import type { HTMLAttributes } from 'react';
-import React from 'react';
-export interface BannerLinkProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-     */
-    testId?: string;
-}
-declare const BannerLink: React.ForwardRefExoticComponent<BannerLinkProps & React.RefAttributes<HTMLDivElement>>;
-export default BannerLink;

package/dist/components/molecules/Banner/BannerLink.js

@@ -1,6 +0,0 @@
-import React, { forwardRef } from 'react';
-const BannerLink = forwardRef(function BannerLink({ testId = 'store-banner-link', children, ...otherProps }, ref) {
-    return (React.createElement("div", { ref: ref, "data-banner-link": true, "data-testid": testId, ...otherProps }, children));
-});
-export default BannerLink;
-//# sourceMappingURL=BannerLink.js.map

package/dist/components/molecules/Banner/BannerLink.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BannerLink.js","sourceRoot":"","sources":["../../../../src/components/molecules/Banner/BannerLink.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AASzC,MAAM,UAAU,GAAG,UAAU,CAC3B,SAAS,UAAU,CACjB,EAAE,MAAM,GAAG,mBAAmB,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EACzD,GAAG;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,2CAAgC,MAAM,KAAM,UAAU,IAChE,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/components/molecules/Banner/index.d.ts

@@ -1,8 +0,0 @@
-export { default } from './Banner';
-export type { BannerProps } from './Banner';
-export { default as BannerImage } from './BannerImage';
-export type { BannerImageProps } from './BannerImage';
-export { default as BannerContent } from './BannerContent';
-export type { BannerContentProps } from './BannerContent';
-export { default as BannerLink } from './BannerLink';
-export type { BannerLinkProps } from './BannerLink';

package/dist/components/molecules/Banner/index.js

@@ -1,5 +0,0 @@
-export { default } from './Banner';
-export { default as BannerImage } from './BannerImage';
-export { default as BannerContent } from './BannerContent';
-export { default as BannerLink } from './BannerLink';
-//# sourceMappingURL=index.js.map

package/dist/components/molecules/Banner/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/molecules/Banner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAGlC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAA;AAGtD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAG1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA"}

package/src/components/molecules/Banner/Banner.tsx

@@ -1,31 +0,0 @@
-import React, { forwardRef } from 'react'
-import type { HTMLAttributes } from 'react'
-
-type BannerDirectionVariant = 'vertical' | 'horizontal'
-export interface BannerProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * ID to find this component in testing tools (e.g.: cypress,
-   * testing-library, and jest).
-   */
-  testId?: string
-  children: React.ReactNode
-  variant?: BannerDirectionVariant
-}
-
-const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(
-  { testId = 'store-banner', children, variant = 'vertical', ...otherProps },
-  ref
-) {
-  return (
-    <article
-      ref={ref}
-      data-fs-banner={variant}
-      data-testid={testId}
-      {...otherProps}
-    >
-      {children}
-    </article>
-  )
-})
-
-export default Banner

package/src/components/molecules/Banner/BannerContent.tsx

@@ -1,24 +0,0 @@
-import type { HTMLAttributes } from 'react'
-import React, { forwardRef } from 'react'
-
-export interface BannerContentProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   */
-  testId?: string
-}
-
-const BannerContent = forwardRef<HTMLDivElement, BannerContentProps>(
-  function BannerContent(
-    { testId = 'store-banner-content', children, ...otherProps },
-    ref
-  ) {
-    return (
-      <div ref={ref} data-banner-content data-testid={testId} {...otherProps}>
-        {children}
-      </div>
-    )
-  }
-)
-
-export default BannerContent

package/src/components/molecules/Banner/BannerImage.tsx

@@ -1,24 +0,0 @@
-import type { HTMLAttributes } from 'react'
-import React, { forwardRef } from 'react'
-
-export interface BannerImageProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   */
-  testId?: string
-}
-
-const BannerImage = forwardRef<HTMLDivElement, BannerImageProps>(
-  function BannerImage(
-    { testId = 'store-banner-image', children, ...otherProps },
-    ref
-  ) {
-    return (
-      <div ref={ref} data-banner-image data-testid={testId} {...otherProps}>
-        {children}
-      </div>
-    )
-  }
-)
-
-export default BannerImage

package/src/components/molecules/Banner/BannerLink.tsx

@@ -1,24 +0,0 @@
-import type { HTMLAttributes } from 'react'
-import React, { forwardRef } from 'react'
-
-export interface BannerLinkProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-   */
-  testId?: string
-}
-
-const BannerLink = forwardRef<HTMLDivElement, BannerLinkProps>(
-  function BannerLink(
-    { testId = 'store-banner-link', children, ...otherProps },
-    ref
-  ) {
-    return (
-      <div ref={ref} data-banner-link data-testid={testId} {...otherProps}>
-        {children}
-      </div>
-    )
-  }
-)
-
-export default BannerLink

package/src/components/molecules/Banner/index.ts

@@ -1,11 +0,0 @@
-export { default } from './Banner'
-export type { BannerProps } from './Banner'
-
-export { default as BannerImage } from './BannerImage'
-export type { BannerImageProps } from './BannerImage'
-
-export { default as BannerContent } from './BannerContent'
-export type { BannerContentProps } from './BannerContent'
-
-export { default as BannerLink } from './BannerLink'
-export type { BannerLinkProps } from './BannerLink'