@faststore/ui 2.0.99-alpha.0 → 2.0.102-alpha.0

package/dist/index.d.ts

@@ -3,8 +3,6 @@ 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 OrderSummary } from './components/molecules/OrderSummary';
-export type { OrderSummaryProps } from './components/molecules/OrderSummary';
 export { default as Bullets } from './components/molecules/Bullets';
 export type { BulletsProps } from './components/molecules/Bullets';
 export { default as Carousel } from './components/molecules/Carousel';

package/dist/index.js

@@ -3,7 +3,6 @@ export * from '@faststore/components';
 export { default as TextArea } from './components/atoms/TextArea';
 export { default as Incentive } from './components/atoms/Incentive';
 // Molecules
-export { default as OrderSummary } from './components/molecules/OrderSummary';
 export { default as Bullets } from './components/molecules/Bullets';
 export { default as Carousel } from './components/molecules/Carousel';
 export { default as Banner, BannerContent, BannerImage, BannerLink, } from './components/molecules/Banner';

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;AAEZ,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGnE,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,IAAI,EAAE,MAAM,6BAA6B,CAAA;AAG7D,YAAY;AACZ,OAAO,EAAE,IAAI,EAAE,KAAK,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,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AAEZ,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGnE,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,IAAI,EAAE,MAAM,6BAA6B,CAAA;AAG7D,YAAY;AACZ,OAAO,EAAE,IAAI,EAAE,KAAK,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.99-alpha.0",
+  "version": "2.0.102-alpha.0",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -58,5 +58,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "66eb3557fc7b19e210fee38eda199d5e1b18b1a3"
+  "gitHead": "c9841c86822020c65161193647edf280cd765efa"
 }

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

@@ -0,0 +1,38 @@
+[data-fs-order-summary] {
+  // --------------------------------------------------------
+  // Design Tokens for Order Summary
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-order-summary-padding                         : var(--fs-spacing-3);
+  --fs-order-summary-margin-bottom                   : var(--fs-spacing-2);
+
+  --fs-order-summary-discount-text-color             : var(--fs-color-success-text);
+
+  --fs-order-summary-total-text-size                 : var(--fs-text-size-3);
+  --fs-order-summary-total-text-font-weight          : var(--fs-text-weight-bold);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+  padding: var(--fs-order-summary-padding);
+
+  li {
+    display: flex;
+    justify-content: space-between;
+    line-height: 1.5;
+
+    &[data-fs-order-summary-discount] {
+      color: var(--fs-order-summary-discount-text-color);
+    }
+
+    &[data-fs-order-summary-total] {
+      font-size: var(--fs-order-summary-total-text-size);
+      font-weight: var(--fs-order-summary-total-text-font-weight);
+    }
+
+    &:last-of-type {
+      margin-bottom: var(--fs-order-summary-margin-bottom);
+    }
+  }
+}

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

@@ -0,0 +1,67 @@
+[data-fs-cart-sidebar] {
+  // --------------------------------------------------------
+  // Design Tokens for Cart Sidebar
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-cart-sidebar-bkg-color                        : var(--fs-color-neutral-bkg);
+
+  --fs-cart-sidebar-header-title-column-gap          : var(--fs-spacing-2);
+
+  // List
+  --fs-cart-sidebar-list-padding                     : var(--fs-spacing-3);
+
+  // Footer
+  --fs-cart-sidebar-footer-bkg-color                 : var(--fs-color-neutral-0);
+  --fs-cart-sidebar-footer-box-shadow                : 0 0 6px rgb(0 0 0 / 20%);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: auto;
+
+  &[data-fs-slide-over] {
+    background-color: var(--fs-cart-sidebar-bkg-color);
+  }
+
+  > * { flex-shrink: 0; }
+
+  [data-fs-cart-sidebar-title] {
+    display: flex;
+    align-items: center;
+
+    font-size: var(--fs-text-size-4);
+    font-weight: var(--fs-text-weight-bold);
+    line-height: 1.12;
+
+    column-gap: var(--fs-cart-sidebar-header-title-column-gap);
+  }
+
+  [data-fs-cart-sidebar-list] {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--fs-spacing-2);
+    padding: var(--fs-cart-sidebar-list-padding);
+    overflow: auto;
+  }
+
+  [data-fs-cart-sidebar-footer] {
+    padding: var(--fs-spacing-3);
+    position: sticky;
+    bottom: 0;
+    margin-top: auto;
+    background-color: var(--fs-cart-sidebar-footer-bkg-color);
+    box-shadow: var(--fs-cart-sidebar-footer-box-shadow);
+
+    [data-fs-order-summary] {
+      padding: 0;
+    }
+
+    [data-fs-button] {
+      width: 100%;
+    }
+  }
+}

package/src/index.ts

@@ -9,9 +9,6 @@ export type { IncentiveProps } from './components/atoms/Incentive'
 
 // Molecules
 
-export { default as OrderSummary } from './components/molecules/OrderSummary'
-export type { OrderSummaryProps } from './components/molecules/OrderSummary'
-
 export { default as Bullets } from './components/molecules/Bullets'
 export type { BulletsProps } from './components/molecules/Bullets'
 

package/src/styles/components.scss

@@ -28,6 +28,7 @@
 @import "../components/molecules/InputField/styles";
 @import "../components/molecules/LinkButton/styles";
 @import "../components/molecules/Modal/styles";
+@import "../components/molecules/OrderSummary/styles";
 @import "../components/molecules/ProductCard/styles";
 @import "../components/molecules/ProductTitle/styles";
 @import "../components/molecules/QuantitySelector/styles";
@@ -49,6 +50,7 @@
 @import "../components/molecules/ToggleField/styles";
 
 // Organisms
+@import "../components/organisms/CartSidebar/styles";
 @import "../components/organisms/Filter/styles";
 @import "../components/organisms/FilterSlider/styles";
 @import "../components/organisms/Hero/styles";

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

@@ -1,35 +0,0 @@
-import React from 'react';
-import type { HTMLAttributes } from 'react';
-export interface OrderSummaryProps extends HTMLAttributes<HTMLUListElement> {
-    /**
-     * ID to find this component in testing tools (e.g.: cypress,
-     * testing-library, and jest).
-     */
-    testId?: string;
-    /**
-     * Label for the subtotal value of the order. Will only show if subtotalValue is provided.
-     */
-    subtotalLabel?: string;
-    /**
-     * Subtotal value of the order.  If provided, subtotal label and value will be shown.
-     */
-    subtotalValue?: string;
-    /**
-     * Label for the discount value for the order. Will only show if discountValue is provided.
-     */
-    discountLabel?: string;
-    /**
-     * Discount value for the order. If provided, discount label and value will be shown.
-     */
-    discountValue?: string;
-    /**
-     * Label for the total value of the order.
-     */
-    totalLabel?: string;
-    /**
-     * Total value of the order.
-     */
-    totalValue?: string;
-}
-declare const OrderSummary: React.ForwardRefExoticComponent<OrderSummaryProps & React.RefAttributes<HTMLUListElement>>;
-export default OrderSummary;

package/dist/components/molecules/OrderSummary/OrderSummary.js

@@ -1,16 +0,0 @@
-import React, { forwardRef } from 'react';
-import { List } from '@faststore/components';
-const OrderSummary = forwardRef(function OrderSummary({ testId = 'store-order-summary', subtotalLabel, subtotalValue, discountLabel, discountValue, totalLabel, totalValue, ...otherProps }, ref) {
-    return (React.createElement(List, { ref: ref, "data-fs-order-summary": true, "data-testid": testId, ...otherProps },
-        subtotalValue ? (React.createElement("li", { "data-fs-order-summary-subtotal": true },
-            React.createElement("span", { "data-fs-order-summary-subtotal-label": true, "data-testid": `${testId}-subtotal-label` }, subtotalLabel),
-            React.createElement("span", { "data-fs-order-summary-subtotal-value": true, "data-testid": `${testId}-subtotal-value` }, subtotalValue))) : null,
-        discountValue ? (React.createElement("li", { "data-fs-order-summary-discount": true },
-            React.createElement("span", { "data-fs-order-summary-discount-label": true, "data-testid": `${testId}-discount-label` }, discountLabel),
-            React.createElement("span", { "data-fs-order-summary-discount-value": true, "data-testid": `${testId}-discount-value` }, discountValue))) : null,
-        React.createElement("li", { "data-fs-order-summary-total": true },
-            React.createElement("span", { "data-fs-order-summary-total-label": true, "data-testid": `${testId}-total-label` }, totalLabel),
-            React.createElement("span", { "data-fs-order-summary-total-value": true, "data-testid": `${testId}-total-value` }, totalValue))));
-});
-export default OrderSummary;
-//# sourceMappingURL=OrderSummary.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"OrderSummary.js","sourceRoot":"","sources":["../../../../src/components/molecules/OrderSummary/OrderSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAkC5C,MAAM,YAAY,GAAG,UAAU,CAC7B,SAAS,YAAY,CACnB,EACE,MAAM,GAAG,qBAAqB,EAC9B,aAAa,EACb,aAAa,EACb,aAAa,EACb,aAAa,EACb,UAAU,EACV,UAAU,EACV,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,oBAAC,IAAI,IACH,GAAG,EAAE,GAAG,gDAEK,MAAM,KACf,UAAU;QAEb,aAAa,CAAC,CAAC,CAAC,CACf;YACE,2FAEe,GAAG,MAAM,iBAAiB,IAEtC,aAAa,CACT;YACP,2FAEe,GAAG,MAAM,iBAAiB,IAEtC,aAAa,CACT,CACJ,CACN,CAAC,CAAC,CAAC,IAAI;QACP,aAAa,CAAC,CAAC,CAAC,CACf;YACE,2FAEe,GAAG,MAAM,iBAAiB,IAEtC,aAAa,CACT;YACP,2FAEe,GAAG,MAAM,iBAAiB,IAEtC,aAAa,CACT,CACJ,CACN,CAAC,CAAC,CAAC,IAAI;QACR;YACE,wFAEe,GAAG,MAAM,cAAc,IAEnC,UAAU,CACN;YACP,wFAEe,GAAG,MAAM,cAAc,IAEnC,UAAU,CACN,CACJ,CACA,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,YAAY,CAAA"}

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

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/molecules/OrderSummary/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA"}

package/src/components/molecules/OrderSummary/OrderSummary.tsx

@@ -1,110 +0,0 @@
-import React, { forwardRef } from 'react'
-import type { HTMLAttributes } from 'react'
-
-import { List } from '@faststore/components'
-
-export interface OrderSummaryProps extends HTMLAttributes<HTMLUListElement> {
-  /**
-   * ID to find this component in testing tools (e.g.: cypress,
-   * testing-library, and jest).
-   */
-  testId?: string
-  /**
-   * Label for the subtotal value of the order. Will only show if subtotalValue is provided.
-   */
-  subtotalLabel?: string
-  /**
-   * Subtotal value of the order.  If provided, subtotal label and value will be shown.
-   */
-  subtotalValue?: string
-  /**
-   * Label for the discount value for the order. Will only show if discountValue is provided.
-   */
-  discountLabel?: string
-  /**
-   * Discount value for the order. If provided, discount label and value will be shown.
-   */
-  discountValue?: string
-  /**
-   * Label for the total value of the order.
-   */
-  totalLabel?: string
-  /**
-   * Total value of the order.
-   */
-  totalValue?: string
-}
-
-const OrderSummary = forwardRef<HTMLUListElement, OrderSummaryProps>(
-  function OrderSummary(
-    {
-      testId = 'store-order-summary',
-      subtotalLabel,
-      subtotalValue,
-      discountLabel,
-      discountValue,
-      totalLabel,
-      totalValue,
-      ...otherProps
-    },
-    ref
-  ) {
-    return (
-      <List
-        ref={ref}
-        data-fs-order-summary
-        data-testid={testId}
-        {...otherProps}
-      >
-        {subtotalValue ? (
-          <li data-fs-order-summary-subtotal>
-            <span
-              data-fs-order-summary-subtotal-label
-              data-testid={`${testId}-subtotal-label`}
-            >
-              {subtotalLabel}
-            </span>
-            <span
-              data-fs-order-summary-subtotal-value
-              data-testid={`${testId}-subtotal-value`}
-            >
-              {subtotalValue}
-            </span>
-          </li>
-        ) : null}
-        {discountValue ? (
-          <li data-fs-order-summary-discount>
-            <span
-              data-fs-order-summary-discount-label
-              data-testid={`${testId}-discount-label`}
-            >
-              {discountLabel}
-            </span>
-            <span
-              data-fs-order-summary-discount-value
-              data-testid={`${testId}-discount-value`}
-            >
-              {discountValue}
-            </span>
-          </li>
-        ) : null}
-        <li data-fs-order-summary-total>
-          <span
-            data-fs-order-summary-total-label
-            data-testid={`${testId}-total-label`}
-          >
-            {totalLabel}
-          </span>
-          <span
-            data-fs-order-summary-total-value
-            data-testid={`${testId}-total-value`}
-          >
-            {totalValue}
-          </span>
-        </li>
-      </List>
-    )
-  }
-)
-
-export default OrderSummary

package/src/components/molecules/OrderSummary/index.tsx

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