@faststore/ui 1.10.30 → 1.10.31

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.10.31](https://github.com/vtex/faststore/compare/v1.10.30...v1.10.31) (2022-08-02)
+
+
+### Features
+
+* Add fowardRef to `ProductTitle` ([#1427](https://github.com/vtex/faststore/issues/1427)) ([5f622f3](https://github.com/vtex/faststore/commit/5f622f3a28a32228aa457c0b1bd141969f541262))
+
+
+
 ## 1.10.30 (2022-08-02)
 
 

package/dist/molecules/ProductTitle/ProductTitle.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 import type { ReactNode } from 'react';
 export declare type ProductTitleProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
     /**
@@ -22,5 +22,26 @@ export declare type ProductTitleProps = Omit<HTMLAttributes<HTMLElement>, 'title
      */
     testId?: string;
 };
-declare function ProductTitle({ title, label, refTag, refNumber, testId, ...otherProps }: ProductTitleProps): JSX.Element;
+declare const ProductTitle: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /**
+     * A react component to be used as the product title, e.g. a `h1`
+     */
+    title: ReactNode;
+    /**
+     * A react component to be used as the product label, e.g. a `DiscountBadge`
+     */
+    label?: ReactNode;
+    /**
+     * Label for reference.
+     */
+    refTag?: string | undefined;
+    /**
+     * A text to be used below the title and the label, such as the product's reference number.
+     */
+    refNumber?: string | undefined;
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string | undefined;
+} & React.RefAttributes<HTMLElement>>;
 export default ProductTitle;

package/dist/molecules/ProductTitle/ProductTitle.js

@@ -1,12 +1,12 @@
-import React from 'react';
-function ProductTitle({ title, label, refTag = "Ref.: ", refNumber, testId = 'store-product-title', ...otherProps }) {
-    return (React.createElement("header", Object.assign({ "data-fs-product-title": true, "data-testid": testId }, otherProps),
+import React, { forwardRef } from 'react';
+const ProductTitle = forwardRef(function ProductTitle({ title, label, refTag = "Ref.: ", refNumber, testId = 'store-product-title', ...otherProps }, ref) {
+    return (React.createElement("header", Object.assign({ ref: ref, "data-fs-product-title": true, "data-testid": testId }, otherProps),
         React.createElement("div", { "data-fs-product-title-header": true },
             title,
             !!label && label),
         refNumber && (React.createElement("p", { "data-fs-product-title-addendum": true },
             refTag,
             refNumber))));
-}
+});
 export default ProductTitle;
 //# sourceMappingURL=ProductTitle.js.map

package/dist/molecules/ProductTitle/ProductTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProductTitle.js","sourceRoot":"","sources":["../../../src/molecules/ProductTitle/ProductTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AA0B7C,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,GAAE,QAAQ,EAAC,SAAS,EAAE,MAAM,GAAE,qBAAqB,EAAE,GAAG,UAAU,EAAqB;IACjI,OAAO,CACL,4FAA2C,MAAM,IAAM,UAAU;QAC/D;YACG,KAAK;YACL,CAAC,CAAC,KAAK,IAAI,KAAK,CACb;QAEL,SAAS,IAAI,CACZ;YACG,MAAM;YAAE,SAAS,CAChB,CACL,CACM,CACV,CAAA;AACH,CAAC;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"ProductTitle.js","sourceRoot":"","sources":["../../../src/molecules/ProductTitle/ProductTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAA;AA0BzD,MAAM,YAAY,GAAG,UAAU,CAC7B,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,GAAE,QAAQ,EAAC,SAAS,EAAE,MAAM,GAAE,qBAAqB,EAAE,GAAG,UAAU,EAAE,EAAE,GAAG;IACnH,OAAO,CACL,8CAAQ,GAAG,EAAE,GAAG,gDAAqC,MAAM,IAAM,UAAU;QACzE;YACG,KAAK;YACL,CAAC,CAAC,KAAK,IAAI,KAAK,CACb;QAEL,SAAS,IAAI,CACZ;YACG,MAAM;YAAE,SAAS,CAChB,CACL,CACM,CACV,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,YAAY,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "1.10.30",
+  "version": "1.10.31",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -85,5 +85,5 @@
     "tsdx": "^0.14.1",
     "typescript": "^4.2.4"
   },
-  "gitHead": "4541012c9a6b238f1082c2cb92c4d6410c663795"
+  "gitHead": "cd75cbdac4910c60b9ff42ab7bc830d2dc35ba49"
 }

package/src/molecules/ProductTitle/ProductTitle.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import React, { forwardRef, HTMLAttributes } from 'react'
 import type { ReactNode } from 'react'
 
 export type ProductTitleProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
@@ -24,21 +24,23 @@ export type ProductTitleProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
   testId?: string
 }
 
-function ProductTitle({ title, label, refTag= "Ref.: ",refNumber, testId= 'store-product-title', ...otherProps }: ProductTitleProps) {
-  return (
-    <header data-fs-product-title data-testid={testId} {...otherProps}>
-      <div data-fs-product-title-header>
-        {title}
-        {!!label && label}
-      </div>
+const ProductTitle = forwardRef<HTMLElement, ProductTitleProps>(
+  function ProductTitle({ title, label, refTag= "Ref.: ",refNumber, testId= 'store-product-title', ...otherProps }, ref) {
+    return (
+      <header ref={ref} data-fs-product-title data-testid={testId} {...otherProps}>
+        <div data-fs-product-title-header>
+          {title}
+          {!!label && label}
+        </div>
 
-      {refNumber && (
-        <p data-fs-product-title-addendum>
-          {refTag}{refNumber}
-        </p>
-      )}
-    </header>
-  )
-}
+        {refNumber && (
+          <p data-fs-product-title-addendum>
+            {refTag}{refNumber}
+          </p>
+        )}
+      </header>
+    )
+  }
+)
 
 export default ProductTitle