@faststore/ui 2.0.88-alpha.0 → 2.0.89-alpha.0

package/dist/index.d.ts

@@ -13,8 +13,6 @@ export { default as Banner, BannerContent, BannerImage, BannerLink, } from './co
 export type { BannerProps, BannerContentProps, BannerImageProps, BannerLinkProps, } from './components/molecules/Banner';
 export { default as Form } from './components/molecules/Form';
 export type { FormProps } from './components/molecules/Form';
-export { default as OutOfStock, OutOfStockTitle, OutOfStockMessage, } from './components/organisms/OutOfStock';
-export type { OutOfStockProps, OutOfStockMessageProps, OutOfStockTitleProps, } from './components/organisms/OutOfStock';
 export { Tiles, Tile } from './components/organisms/Tiles';
 export type { TilesProps, TileProps } from './components/organisms/Tiles';
 export { default as useSlider } from './hooks/useSlider';

package/dist/index.js

@@ -9,7 +9,6 @@ export { default as Carousel } from './components/molecules/Carousel';
 export { default as Banner, BannerContent, BannerImage, BannerLink, } from './components/molecules/Banner';
 export { default as Form } from './components/molecules/Form';
 // Organisms
-export { default as OutOfStock, OutOfStockTitle, OutOfStockMessage, } from './components/organisms/OutOfStock';
 export { Tiles, Tile } from './components/organisms/Tiles';
 // Hooks
 export { default as useSlider } from './hooks/useSlider';

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,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,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,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.88-alpha.0",
+  "version": "2.0.89-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": "a9aa7a6572c08e0bd26e384bb66464e633f1ad84"
+  "gitHead": "110810c0f5ff267980370f556fe7e9ad34e4d68a"
 }

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

@@ -0,0 +1,55 @@
+[data-fs-out-of-stock] {
+  // --------------------------------------------------------
+  // Design Tokens for Out of Stock
+  // --------------------------------------------------------
+
+  // Title
+  --fs-out-of-stock-title-margin-bottom   : var(--fs-spacing-0);
+  --fs-out-of-stock-title-line-height     : 1.15;
+  --fs-out-of-stock-title-size            : var(--fs-text-size-lead);
+  --fs-out-of-stock-title-weight          : var(--fs-text-weight-bold);
+  --fs-out-of-stock-title-color           : var(--fs-color-neutral-text);
+
+  // Message
+  --fs-out-of-stock-message-column-gap    : var(--fs-spacing-0);
+  --fs-out-of-stock-message-margin-bottom : var(--fs-spacing-3);
+  --fs-out-of-stock-message-line-height   : 1.15;
+  --fs-out-of-stock-message-size          : var(--fs-text-size-body);
+  --fs-out-of-stock-message-weight        : var(--fs-text-weight-regular);
+  --fs-out-of-stock-message-color         : var(--fs-color-success-text);
+
+  // Button
+  --fs-out-of-stock-button-width          : 100%;
+  --fs-out-of-stock-button-margin-top     : var(--fs-spacing-3);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  display: flex;
+  flex-direction: column;
+
+  [data-fs-out-of-stock-title] {
+    margin-bottom: var(--fs-out-of-stock-title-margin-bottom);
+    font-size: var(--fs-out-of-stock-title-size);
+    font-weight: var(--fs-out-of-stock-title-weight);
+    line-height: var(--fs-out-of-stock-title-line-height);
+    color: var(--fs-out-of-stock-title-color);
+  }
+
+  [data-fs-out-of-stock-message] {
+    display: flex;
+    column-gap: var(--fs-out-of-stock-message-column-gap);
+    align-items: center;
+    margin-bottom: var(--fs-out-of-stock-message-margin-bottom);
+    font-size: var(--fs-out-of-stock-message-font-size);
+    font-weight: var(--fs-out-of-stock-message-weight);
+    line-height: var(--fs-out-of-stock-message-line-height);
+    color: var(--fs-out-of-stock-message-color);
+  }
+
+  [data-fs-button] {
+    width: var(--fs-out-of-stock-button-width);
+    margin-top: var(--fs-out-of-stock-button-margin-top);
+  }
+}

package/src/index.ts

@@ -35,17 +35,6 @@ export { default as Form } from './components/molecules/Form'
 export type { FormProps } from './components/molecules/Form'
 
 // Organisms
-export {
-  default as OutOfStock,
-  OutOfStockTitle,
-  OutOfStockMessage,
-} from './components/organisms/OutOfStock'
-export type {
-  OutOfStockProps,
-  OutOfStockMessageProps,
-  OutOfStockTitleProps,
-} from './components/organisms/OutOfStock'
-
 export { Tiles, Tile } from './components/organisms/Tiles'
 export type { TilesProps, TileProps } from './components/organisms/Tiles'
 

package/src/styles/components.scss

@@ -49,6 +49,7 @@
 
 // Organisms
 @import "../components/organisms/Hero/styles";
+@import "../components/organisms/OutOfStock/styles";
 @import "../components/organisms/PaymentMethods/styles";
 @import "../components/organisms/PriceRange/styles";
 @import "../components/organisms/SearchInput/styles";

package/dist/components/organisms/OutOfStock/OutOfStock.d.ts

@@ -1,21 +0,0 @@
-import React from 'react';
-import type { ReactNode, FormHTMLAttributes } from 'react';
-export type OutOfStockBaseProps = {
-    /**
-     * ID to find this component in testing tools (e.g.: cypress,
-     * testing-library, and jest).
-     */
-    testId?: string;
-    /**
-     * Children for Out of Stock components.
-     */
-    children: string | ReactNode;
-};
-export type OutOfStockProps = OutOfStockBaseProps & {
-    /**
-     * Event emitted when form is submitted.
-     */
-    onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
-} & FormHTMLAttributes<HTMLFormElement>;
-declare const OutOfStock: ({ testId, children, ...otherProps }: OutOfStockProps) => JSX.Element;
-export default OutOfStock;

package/dist/components/organisms/OutOfStock/OutOfStock.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import Form from '../../molecules/Form';
-const OutOfStock = ({ testId = 'store-out-of-stock', children, ...otherProps }) => {
-    return (React.createElement("section", { "data-fs-out-of-stock": true, "data-testid": testId },
-        React.createElement(Form, { "data-out-of-stock-form": true, testId: `${testId}-form`, ...otherProps }, children)));
-};
-export default OutOfStock;
-//# sourceMappingURL=OutOfStock.js.map

package/dist/components/organisms/OutOfStock/OutOfStock.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"OutOfStock.js","sourceRoot":"","sources":["../../../../src/components/organisms/OutOfStock/OutOfStock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,IAAI,MAAM,sBAAsB,CAAA;AAqBvC,MAAM,UAAU,GAAG,CAAC,EAClB,MAAM,GAAG,oBAAoB,EAC7B,QAAQ,EACR,GAAG,UAAU,EACG,EAAE,EAAE;IACpB,OAAO,CACL,8EAA2C,MAAM;QAC/C,oBAAC,IAAI,oCAAwB,MAAM,EAAE,GAAG,MAAM,OAAO,KAAM,UAAU,IAClE,QAAQ,CACJ,CACC,CACX,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/components/organisms/OutOfStock/OutOfStockMessage.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import type { OutOfStockBaseProps } from './OutOfStock';
-export type OutOfStockMessageProps = {
-    /**
-     * Attribute used for polymorphic component.
-     */
-    as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';
-} & OutOfStockBaseProps;
-export declare const OutOfStockMessage: ({ as: MessageComponent, testId, children, ...otherProps }: OutOfStockMessageProps) => JSX.Element;

package/dist/components/organisms/OutOfStock/OutOfStockMessage.js

@@ -1,5 +0,0 @@
-import React from 'react';
-export const OutOfStockMessage = ({ as: MessageComponent = 'p', testId = 'store-out-of-stock-message', children, ...otherProps }) => {
-    return (React.createElement(MessageComponent, { "data-out-of-stock-message": true, "data-testid": testId, ...otherProps }, children));
-};
-//# sourceMappingURL=OutOfStockMessage.js.map

package/dist/components/organisms/OutOfStock/OutOfStockMessage.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"OutOfStockMessage.js","sourceRoot":"","sources":["../../../../src/components/organisms/OutOfStock/OutOfStockMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,EAAE,EAAE,gBAAgB,GAAG,GAAG,EAC1B,MAAM,GAAG,4BAA4B,EACrC,QAAQ,EACR,GAAG,UAAU,EACU,EAAE,EAAE;IAC3B,OAAO,CACL,oBAAC,gBAAgB,sDAEF,MAAM,KACf,UAAU,IAEb,QAAQ,CACQ,CACpB,CAAA;AACH,CAAC,CAAA"}

package/dist/components/organisms/OutOfStock/OutOfStockTitle.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import type { OutOfStockBaseProps } from './OutOfStock';
-export type OutOfStockTitleProps = {
-    /**
-     * Attribute used for polymorphic component.
-     */
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
-} & OutOfStockBaseProps;
-export declare const OutOfStockTitle: ({ as: TitleComponent, testId, children, ...otherProps }: OutOfStockTitleProps) => JSX.Element;

package/dist/components/organisms/OutOfStock/OutOfStockTitle.js

@@ -1,5 +0,0 @@
-import React from 'react';
-export const OutOfStockTitle = ({ as: TitleComponent = 'h2', testId = 'store-out-of-stock-title', children, ...otherProps }) => {
-    return (React.createElement(TitleComponent, { "data-out-of-stock-title": true, "data-testid": testId, ...otherProps }, children));
-};
-//# sourceMappingURL=OutOfStockTitle.js.map

package/dist/components/organisms/OutOfStock/OutOfStockTitle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"OutOfStockTitle.js","sourceRoot":"","sources":["../../../../src/components/organisms/OutOfStock/OutOfStockTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,EAAE,EAAE,cAAc,GAAG,IAAI,EACzB,MAAM,GAAG,0BAA0B,EACnC,QAAQ,EACR,GAAG,UAAU,EACQ,EAAE,EAAE;IACzB,OAAO,CACL,oBAAC,cAAc,oDAEA,MAAM,KACf,UAAU,IAEb,QAAQ,CACM,CAClB,CAAA;AACH,CAAC,CAAA"}

package/dist/components/organisms/OutOfStock/index.d.ts

@@ -1,6 +0,0 @@
-export { default } from './OutOfStock';
-export { OutOfStockMessage } from './OutOfStockMessage';
-export { OutOfStockTitle } from './OutOfStockTitle';
-export type { OutOfStockProps } from './OutOfStock';
-export type { OutOfStockMessageProps } from './OutOfStockMessage';
-export type { OutOfStockTitleProps } from './OutOfStockTitle';

package/dist/components/organisms/OutOfStock/index.js

@@ -1,4 +0,0 @@
-export { default } from './OutOfStock';
-export { OutOfStockMessage } from './OutOfStockMessage';
-export { OutOfStockTitle } from './OutOfStockTitle';
-//# sourceMappingURL=index.js.map

package/dist/components/organisms/OutOfStock/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/organisms/OutOfStock/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA"}

package/src/components/organisms/OutOfStock/OutOfStock.tsx

@@ -1,39 +0,0 @@
-import React from 'react'
-import type { ReactNode, FormHTMLAttributes } from 'react'
-
-import Form from '../../molecules/Form'
-
-export type OutOfStockBaseProps = {
-  /**
-   * ID to find this component in testing tools (e.g.: cypress,
-   * testing-library, and jest).
-   */
-  testId?: string
-  /**
-   * Children for Out of Stock components.
-   */
-  children: string | ReactNode
-}
-
-export type OutOfStockProps = OutOfStockBaseProps & {
-  /**
-   * Event emitted when form is submitted.
-   */
-  onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void
-} & FormHTMLAttributes<HTMLFormElement>
-
-const OutOfStock = ({
-  testId = 'store-out-of-stock',
-  children,
-  ...otherProps
-}: OutOfStockProps) => {
-  return (
-    <section data-fs-out-of-stock data-testid={testId}>
-      <Form data-out-of-stock-form testId={`${testId}-form`} {...otherProps}>
-        {children}
-      </Form>
-    </section>
-  )
-}
-
-export default OutOfStock

package/src/components/organisms/OutOfStock/OutOfStockMessage.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-
-import type { OutOfStockBaseProps } from './OutOfStock'
-
-export type OutOfStockMessageProps = {
-  /**
-   * Attribute used for polymorphic component.
-   */
-  as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'
-} & OutOfStockBaseProps
-
-export const OutOfStockMessage = ({
-  as: MessageComponent = 'p',
-  testId = 'store-out-of-stock-message',
-  children,
-  ...otherProps
-}: OutOfStockMessageProps) => {
-  return (
-    <MessageComponent
-      data-out-of-stock-message
-      data-testid={testId}
-      {...otherProps}
-    >
-      {children}
-    </MessageComponent>
-  )
-}

package/src/components/organisms/OutOfStock/OutOfStockTitle.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-
-import type { OutOfStockBaseProps } from './OutOfStock'
-
-export type OutOfStockTitleProps = {
-  /**
-   * Attribute used for polymorphic component.
-   */
-  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'
-} & OutOfStockBaseProps
-
-export const OutOfStockTitle = ({
-  as: TitleComponent = 'h2',
-  testId = 'store-out-of-stock-title',
-  children,
-  ...otherProps
-}: OutOfStockTitleProps) => {
-  return (
-    <TitleComponent
-      data-out-of-stock-title
-      data-testid={testId}
-      {...otherProps}
-    >
-      {children}
-    </TitleComponent>
-  )
-}

package/src/components/organisms/OutOfStock/index.tsx

@@ -1,6 +0,0 @@
-export { default } from './OutOfStock'
-export { OutOfStockMessage } from './OutOfStockMessage'
-export { OutOfStockTitle } from './OutOfStockTitle'
-export type { OutOfStockProps } from './OutOfStock'
-export type { OutOfStockMessageProps } from './OutOfStockMessage'
-export type { OutOfStockTitleProps } from './OutOfStockTitle'