feat: Add ProductTitle import from faststore

CHANGELOG.md

@@ -7,7 +7,6 @@ and this project adheres to [Calendar Versioning](https://calver.org/).
 
 ### [22.29.5](https://github.com/vtex-sites/gatsby.store/compare/22.29.4...22.29.5) (2022-07-28)
 
-
 ### Chores
 
 * Update PR template to reflect recent changelog changes and add checklist regarding PR titles and commit messages ([#160](https://github.com/vtex-sites/gatsby.store/issues/160)) ([6bba877](https://github.com/vtex-sites/gatsby.store/commit/6bba877af2ca3707c7cf1a6f79cdd014e0ea2ab3))
@@ -373,4 +372,4 @@ Version released for the Closed Beta
 
 ### Added
 
-- This changelog
+- This changelog

package.json

@@ -31,9 +31,9 @@
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
     "@faststore/api": "^1.10.19",
-    "@faststore/graphql-utils": "^1.10.6",
-    "@faststore/sdk": "^1.10.6",
-    "@faststore/ui": "^1.10.7",
+    "@faststore/graphql-utils": "^1.10.20",
+    "@faststore/sdk": "^1.10.18",
+    "@faststore/ui": "^1.10.29",
     "gatsby": "^4.16.0",
     "gatsby-plugin-gatsby-cloud": "^4.16.0",
     "gatsby-plugin-manifest": "^4.16.0",
@@ -56,7 +56,7 @@
     "@babel/core": "^7.17.8",
     "@csmith/release-it-calver-plugin": "^2022.5.13",
     "@cypress/code-coverage": "^3.9.10",
-    "@faststore/lighthouse": "^1.10.6",
+    "@faststore/lighthouse": "^1.10.18",
     "@graphql-codegen/cli": "^2.6.2",
     "@graphql-codegen/typescript": "^2.5.1",
     "@graphql-codegen/typescript-operations": "^2.4.2",

src/components/ui/ProductTitle/ProductTitle.stories.mdx

@@ -96,4 +96,12 @@ The product title that is commonly used on Product Details Page (PDP).
     value="var(--fs-color-text-light)"
     isColor
   />
+  <TokenRow
+    token="--fs-product-title-addendum-size"
+    value="var(--fs-text-size-1)"
+  />
+  <TokenRow
+    token="--fs-product-title-addendum-line-height"
+    value="1.7"
+  />
 </TokenTable>

src/components/ui/ProductTitle/ProductTitle.tsx

@@ -1,38 +1,11 @@
 import { memo } from 'react'
-import type { ReactNode } from 'react'
+import type { ProductTitleProps } from '@faststore/ui'
+import { ProductTitle as UIProductTitle } from '@faststore/ui'
 
 import styles from './product-title.module.scss'
 
-interface ProductTitleProp {
-  /**
-   * 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
-  /**
-   * A text to be used below the title and the label, such as the product's reference number.
-   */
-  refNumber?: string
-}
-
-function ProductTitle({ title, label, refNumber }: ProductTitleProp) {
-  return (
-    <header data-fs-product-title className={styles.fsProductTitle}>
-      <div data-fs-product-title-header>
-        {title}
-        {!!label && label}
-      </div>
-
-      {refNumber && (
-        <p data-fs-product-title-addendum className="text__legend">
-          Ref.: {refNumber}
-        </p>
-      )}
-    </header>
-  )
+function ProductTitle({ ...otherProps }: ProductTitleProps) {
+  return <UIProductTitle className={styles.fsProductTitle} {...otherProps} />
 }
 
 export default memo(ProductTitle)

src/components/ui/ProductTitle/product-title.module.scss

@@ -6,12 +6,14 @@
   // --------------------------------------------------------
 
   // Default properties
-  --fs-product-title-text-size           : var(--fs-text-size-title-product);
-  --fs-product-title-text-weight         : var(--fs-text-weight-regular);
-  --fs-product-title-line-height         : 1.12;
+  --fs-product-title-text-size            : var(--fs-text-size-title-product);
+  --fs-product-title-text-weight          : var(--fs-text-weight-regular);
+  --fs-product-title-line-height          : 1.12;
 
-  --fs-product-title-addendum-margin-top : var(--fs-spacing-3);
-  --fs-product-title-addendum-color      : var(--fs-color-text-light);
+  --fs-product-title-addendum-margin-top  : var(--fs-spacing-3);
+  --fs-product-title-addendum-color       : var(--fs-color-text-light);
+  --fs-product-title-addendum-size        : var(--fs-text-size-1);
+  --fs-product-title-addendum-line-height : 1.7;
 
   // --------------------------------------------------------
   // Structural Styles
@@ -41,6 +43,8 @@
 
   [data-fs-product-title-addendum] {
     margin-top: var(--fs-product-title-addendum-margin-top);
+    font-size: var(--fs-product-title-addendum-size);
+    line-height: var(--fs-product-title-addendum-line-height);
     color: var(--fs-product-title-addendum-color);
   }
 }

yarn.lock

@@ -1956,32 +1956,32 @@
     isomorphic-unfetch "^3.1.0"
     p-limit "^3.1.0"
 
-"@faststore/graphql-utils@^1.10.6":
-  version "1.10.6"
-  resolved "https://registry.yarnpkg.com/@faststore/graphql-utils/-/graphql-utils-1.10.6.tgz#f9d0acb5d9c77262908eed2ddac1375472fd139f"
-  integrity sha512-9k4AldONB5Jyj4+b45GCes7Ko5wIgYyfLyuBc3UPhh8HBm0MKlcLKc/RB5TiaR3gwTVxkBy+awYwGKihwUwydw==
+"@faststore/graphql-utils@^1.10.20":
+  version "1.10.20"
+  resolved "https://registry.yarnpkg.com/@faststore/graphql-utils/-/graphql-utils-1.10.20.tgz#ca54bd0c2ce74b904d338fb6739e30904f282c2c"
+  integrity sha512-SBRC3PYh1KK88CXV3aDMlD5je7wHwiFCmP3KH68f7pkJghg+iQvGVHgJah2G0KCBu8RM38Qv/qhJEPbmUxZxEQ==
   dependencies:
     "@babel/traverse" "^7.15.4"
     "@babel/types" "^7.15.6"
     "@graphql-codegen/plugin-helpers" "^2.2.0"
     "@graphql-tools/relay-operation-optimizer" "^6.4.0"
 
-"@faststore/lighthouse@^1.10.6":
-  version "1.10.6"
-  resolved "https://registry.yarnpkg.com/@faststore/lighthouse/-/lighthouse-1.10.6.tgz#ae448917d12866d468d52cd24e1f30f2a1de2059"
-  integrity sha512-cShdebz5Ty4/Pg2Jq0akkzKGv5ga5Q8X2tus7Tix/fpQ64HhnWx9M9T6mmPhlwINa3orcgmgP0tyHaIrsX3dxA==
+"@faststore/lighthouse@^1.10.18":
+  version "1.10.18"
+  resolved "https://registry.yarnpkg.com/@faststore/lighthouse/-/lighthouse-1.10.18.tgz#08a852d0b7a898e8d381696cf74235c9a46a7060"
+  integrity sha512-Y0TFRrZjFSBvKf6qlNz+KtGwXV+7Kk6NOVF2/VDz/MCSrAN9egcAnh0gcVeIRqoLUdipRrpupDTmikYiH7SZCA==
 
-"@faststore/sdk@^1.10.6":
-  version "1.10.6"
-  resolved "https://registry.yarnpkg.com/@faststore/sdk/-/sdk-1.10.6.tgz#cf2442172bed72da1de7b08989fbe2d294e70007"
-  integrity sha512-ZyJGEuYdPeQvIoSfmbCke2ObCt3GXpxUmXl/zwjNHzJJ5ZYL3cbMciUICuAxHrLT4nRdM3bmuulZMTz94exthg==
+"@faststore/sdk@^1.10.18":
+  version "1.10.18"
+  resolved "https://registry.yarnpkg.com/@faststore/sdk/-/sdk-1.10.18.tgz#444466f4ea4be1255e322fd2ec3afd1a3171f2b5"
+  integrity sha512-Zrb3ivhQor4ocER6N8WGSRPnqTU7vIhnONphRKaxyGuzP5VXXmPr6sVUj+Fmxy7n6XAYkpBb1bLhEG6duRC2Xw==
   dependencies:
     idb-keyval "^5.1.3"
 
-"@faststore/ui@^1.10.7":
-  version "1.10.7"
-  resolved "https://registry.yarnpkg.com/@faststore/ui/-/ui-1.10.7.tgz#22d02df880c0ce62dff1ce0e9c75c377d01e13d5"
-  integrity sha512-MD9NHFFsOOg3Jlsl3cN4VfCd5CzPRRsvGbB0FyOoIWZQKyGw2oCC1Xcu7gqvrrKPm0AtwF2SP8IiD1CSyXoTeg==
+"@faststore/ui@^1.10.29":
+  version "1.10.29"
+  resolved "https://registry.yarnpkg.com/@faststore/ui/-/ui-1.10.29.tgz#275d015b9e54ded355f35ddc3a9ec20984e69593"
+  integrity sha512-FCGgnLqzC1ojknl8IYsmmyoqXwCDXio9rKIGhTcYz2HWNvO91HAG9rQlL3raxMoFqesSFAaNkdxlZWVGP50M6w==
   dependencies:
     "@reach/popover" "^0.16.0"
     "@storybook/addon-a11y" "^6.4.4"