@faststore/ui 2.0.56-alpha.0 → 2.0.57-alpha.0

package/dist/index.d.ts

@@ -3,8 +3,6 @@ export { default as Popover } from './components/atoms/Popover';
 export type { PopoverProps } from './components/atoms/Popover';
 export { default as TextArea } from './components/atoms/TextArea';
 export type { TextAreaProps } from './components/atoms/TextArea';
-export { default as Skeleton } from './components/atoms/Skeleton';
-export type { SkeletonProps } from './components/atoms/Skeleton';
 export { default as Incentive } from './components/atoms/Incentive';
 export type { IncentiveProps } from './components/atoms/Incentive';
 export { default as SkuSelector } from './components/molecules/SkuSelector';

package/dist/index.js

@@ -2,7 +2,6 @@ export * from '@faststore/components';
 // Atoms
 export { default as Popover } from './components/atoms/Popover';
 export { default as TextArea } from './components/atoms/TextArea';
-export { default as Skeleton } from './components/atoms/Skeleton';
 export { default as Incentive } from './components/atoms/Incentive';
 // Molecules
 export { default as SkuSelector } from './components/molecules/SkuSelector';

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,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAG/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAG3E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,oCAAoC,CAAA;AAQ3C,OAAO,EACL,OAAO,IAAI,IAAI,EACf,SAAS,EACT,WAAW,EACX,WAAW,GACZ,MAAM,6BAA6B,CAAA;AAQpC,OAAO,EACL,OAAO,IAAI,QAAQ,EACnB,eAAe,EACf,eAAe,EACf,aAAa,EACb,cAAc,EACd,eAAe,EACf,aAAa,GACd,MAAM,iCAAiC,CAAA;AAWxC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAM3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAA;AAGrE,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,aAAa,EACb,WAAW,EACX,UAAU,GACX,MAAM,+BAA+B,CAAA;AAQtC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uCAAuC,CAAA;AAGjF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAGzE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,6BAA6B,CAAA;AAG7D,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,eAAe,EACf,iBAAiB,GAClB,MAAM,mCAAmC,CAAA;AAO1C,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAA;AAG1D,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAG/D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAG3E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,oCAAoC,CAAA;AAQ3C,OAAO,EACL,OAAO,IAAI,IAAI,EACf,SAAS,EACT,WAAW,EACX,WAAW,GACZ,MAAM,6BAA6B,CAAA;AAQpC,OAAO,EACL,OAAO,IAAI,QAAQ,EACnB,eAAe,EACf,eAAe,EACf,aAAa,EACb,cAAc,EACd,eAAe,EACf,aAAa,GACd,MAAM,iCAAiC,CAAA;AAWxC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAM3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAA;AAGrE,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,aAAa,EACb,WAAW,EACX,UAAU,GACX,MAAM,+BAA+B,CAAA;AAQtC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uCAAuC,CAAA;AAGjF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAGzE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,6BAA6B,CAAA;AAG7D,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,eAAe,EACf,iBAAiB,GAClB,MAAM,mCAAmC,CAAA;AAO1C,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAA;AAG1D,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "2.0.56-alpha.0",
+  "version": "2.0.57-alpha.0",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -59,5 +59,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "6afa204ec28032832e3867f805fbc5bcbbed4aab"
+  "gitHead": "a9310e34894883ae71d8bdb32402c3a17b419078"
 }

package/src/components/atoms/Badge/styles.scss

@@ -135,10 +135,6 @@
     [data-fs-badge-wrapper] {
       background-color: var(--fs-badge-success-bkg-color);
       border-color: var(--fs-badge-success-border-color);
-
-      &::after {
-        background-color: var(--fs-badge-success-bkg-color);
-      }
     }
   }
 
@@ -148,10 +144,6 @@
     [data-fs-badge-wrapper] {
       background-color: var(--fs-badge-neutral-bkg-color);
       border-color: var(--fs-badge-neutral-border-color);
-
-      &::after {
-        background-color: var(--fs-badge-neutral-bkg-color);
-      }
     }
   }
 
@@ -161,10 +153,6 @@
     [data-fs-badge-wrapper] {
       background-color: var(--fs-badge-highlighted-bkg-color);
       border-color: var(--fs-badge-highlighted-border-color);
-
-      &::after {
-        background-color: var(--fs-badge-highlighted-bkg-color);
-      }
     }
   }
 
@@ -174,10 +162,6 @@
     [data-fs-badge-wrapper] {
       background-color: var(--fs-badge-info-bkg-color);
       border-color: var(--fs-badge-info-border-color);
-
-      &::after {
-        background-color: var(--fs-badge-info-bkg-color);
-      }
     }
   }
 
@@ -187,10 +171,6 @@
     [data-fs-badge-wrapper] {
       background-color: var(--fs-badge-warning-bkg-color);
       border-color: var(--fs-badge-warning-border-color);
-
-      &::after {
-        background-color: var(--fs-badge-warning-bkg-color);
-      }
     }
   }
 
@@ -200,10 +180,6 @@
     [data-fs-badge-wrapper] {
       background-color: var(--fs-badge-danger-bkg-color);
       border-color: var(--fs-badge-danger-border-color);
-
-      &::after {
-        background-color: var(--fs-badge-danger-bkg-color);
-      }
     }
   }
 }

package/src/components/atoms/Skeleton/styles.scss

@@ -0,0 +1,67 @@
+[data-fs-skeleton] {
+  // --------------------------------------------------------
+  // Design Tokens for Skeleton
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-skeleton-bkg-color                            : var(--fs-color-disabled-bkg);
+  --fs-skeleton-border-radius                        : var(--fs-border-radius);
+
+  // Shimmer
+  --fs-skeleton-shimmer-width                        : 50%;
+  --fs-skeleton-shimmer-height                       : 100%;
+  --fs-skeleton-shimmer-bkg-color                    : rgb(255 255 255 / 20%);
+  --fs-skeleton-shimmer-box-shadow                   : 0 0 var(--fs-spacing-5) var(--fs-spacing-5) var(--fs-skeleton-shimmer-bkg-color);
+
+  --fs-skeleton-shimmer-transition-timing            : 850ms;
+  --fs-skeleton-shimmer-transition-function          : linear;
+  --fs-skeleton-shimmer-transition-iteration         : infinite;
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  overflow: hidden;
+  position: relative;
+  background: var(--fs-skeleton-bkg-color);
+  border-radius: var(--fs-skeleton-border-radius);
+
+  [data-fs-skeleton-shimmer] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100%;
+    animation: loading var(--fs-skeleton-shimmer-transition-timing) var(--fs-skeleton-shimmer-transition-iteration) var(--fs-skeleton-shimmer-transition-function);
+    &::after {
+      position: absolute;
+      content: '';
+      width: var(--fs-skeleton-shimmer-width);
+      height: var(--fs-skeleton-shimmer-height);
+      background: var(--fs-skeleton-shimmer-bkg-color);
+      box-shadow: var(--fs-skeleton-shimmer-box-shadow);
+    }
+  }
+
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-skeleton-border="regular"] {
+    border-radius: var(--fs-skeleton-border-radius);
+  }
+
+  &[data-fs-skeleton-border="pill"] {
+    border-radius: var(--fs-border-radius-pill);
+  }
+
+  &[data-fs-skeleton-border="circle"] {
+    border-radius: var(--fs-border-radius-circle);
+  }
+}
+
+@keyframes loading {
+  0% { transform: translate3d(-50vw, 0, 0); }
+  100% { transform: translate3d(0, 0, 0); }
+}

package/src/components/molecules/DiscountBadge/styles.scss

@@ -28,10 +28,6 @@
     [data-fs-badge-wrapper] {
       background-color: var(--fs-discount-badge-low-bkg-color);
       border-color: var(--fs-discount-badge-low-border-color);
-
-      &::after {
-        background-color: var(--fs-discount-badge-low-bkg-color);
-      }
     }
   }
 
@@ -41,7 +37,6 @@
     [data-fs-badge-wrapper] {
       background-color: var(--fs-discount-badge-medium-bkg-color);
       border-color: var(--fs-discount-badge-medium-border-color);
-      &::after { background-color: var(--fs-discount-badge-medium-bkg-color); }
     }
   }
 
@@ -51,7 +46,6 @@
     [data-fs-badge-wrapper] {
       background-color: var(--fs-discount-badge-high-bkg-color);
       border-color: var(--fs-discount-badge-high-border-color);
-      &::after { background-color: var(--fs-discount-badge-high-bkg-color); }
     }
   }
 }

package/src/index.ts

@@ -7,9 +7,6 @@ export type { PopoverProps } from './components/atoms/Popover'
 export { default as TextArea } from './components/atoms/TextArea'
 export type { TextAreaProps } from './components/atoms/TextArea'
 
-export { default as Skeleton } from './components/atoms/Skeleton'
-export type { SkeletonProps } from './components/atoms/Skeleton'
-
 export { default as Incentive } from './components/atoms/Incentive'
 export type { IncentiveProps } from './components/atoms/Incentive'
 

package/src/styles/components.scss

@@ -11,6 +11,7 @@
 @import "../components/atoms/Price/styles";
 @import "../components/atoms/Radio/styles";
 @import "../components/atoms/Select/styles";
+@import "../components/atoms/Skeleton/styles";
 @import "../components/atoms/Slider/styles";
 @import "../components/atoms/SROnly/styles";
 

package/dist/components/atoms/Skeleton/Skeleton.d.ts

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

package/dist/components/atoms/Skeleton/Skeleton.js

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

package/dist/components/atoms/Skeleton/Skeleton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/atoms/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAUzC,MAAM,QAAQ,GAAG,UAAU,CAAgC,SAAS,QAAQ,CAC1E,EAAE,MAAM,GAAG,gBAAgB,EAAE,GAAG,UAAU,EAAE,EAC5C,GAAG;IAEH,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,2CAAgC,MAAM,KAAM,UAAU,GAAI,CACxE,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/components/atoms/Skeleton/index.d.ts

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

package/dist/components/atoms/Skeleton/index.js

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

package/dist/components/atoms/Skeleton/index.js.map

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

package/src/components/atoms/Skeleton/Skeleton.tsx

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

package/src/components/atoms/Skeleton/index.ts

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