@faststore/ui 1.10.28 → 1.10.29

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.10.29](https://github.com/vtex/faststore/compare/v1.10.28...v1.10.29) (2022-07-29)
+
+
+### Features
+
+* Add ProductTitle Molecule ([#1418](https://github.com/vtex/faststore/issues/1418)) ([184d0b9](https://github.com/vtex/faststore/commit/184d0b9399648e3cab25cd2348c17269ac549f49))
+
+
+
+
+
 ## [1.10.28](https://github.com/vtex/faststore/compare/v1.10.27...v1.10.28) (2022-07-28)
 
 

package/dist/index.d.ts

@@ -34,6 +34,8 @@ export { default as Label } from './atoms/Label';
 export type { LabelProps } from './atoms/Label';
 export { default as Incentive } from './atoms/Incentive';
 export type { IncentiveProps } from './atoms/Incentive';
+export { default as ProductTitle } from './molecules/ProductTitle';
+export type { ProductTitleProps } from './molecules/ProductTitle';
 export { default as AggregateRating } from './molecules/AggregateRating';
 export type { AggregateRatingProps } from './molecules/AggregateRating';
 export { default as ProductCard, ProductCardImage, ProductCardContent, ProductCardActions, } from './molecules/ProductCard';

package/dist/index.js

@@ -18,6 +18,7 @@ export { default as Spinner } from './atoms/Spinner';
 export { default as Label } from './atoms/Label';
 export { default as Incentive } from './atoms/Incentive';
 // Molecules
+export { default as ProductTitle } from './molecules/ProductTitle';
 export { default as AggregateRating } from './molecules/AggregateRating';
 export { default as ProductCard, ProductCardImage, ProductCardContent, ProductCardActions, } from './molecules/ProductCard';
 export { default as Card, CardImage, CardContent, CardActions, } from './molecules/Card';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,26 @@
+import { HTMLAttributes } from 'react';
+import type { ReactNode } from 'react';
+export declare type ProductTitleProps = Omit<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;
+    /**
+     * A text to be used below the title and the label, such as the product's reference number.
+     */
+    refNumber?: string;
+    /**
+     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+     */
+    testId?: string;
+};
+declare function ProductTitle({ title, label, refTag, refNumber, testId, ...otherProps }: ProductTitleProps): JSX.Element;
+export default ProductTitle;

package/dist/molecules/ProductTitle/ProductTitle.js

@@ -0,0 +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),
+        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

@@ -0,0 +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"}

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

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

package/dist/molecules/ProductTitle/index.js

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "1.10.28",
+  "version": "1.10.29",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -57,7 +57,7 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@faststore/styles": "^1.10.18",
+    "@faststore/styles": "^1.10.29",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-actions": "^6.4.4",
     "@storybook/addon-docs": "^6.4.4",
@@ -85,5 +85,5 @@
     "tsdx": "^0.14.1",
     "typescript": "^4.2.4"
   },
-  "gitHead": "9fb36482671c60c4e4035e4677a7d4308e65488b"
+  "gitHead": "505d423909498d321c657b8ce05ab2a15f015fce"
 }

package/src/index.ts

@@ -54,6 +54,9 @@ export { default as Incentive } from './atoms/Incentive'
 export type { IncentiveProps } from './atoms/Incentive'
 
 // Molecules
+export { default as ProductTitle } from './molecules/ProductTitle'
+export type { ProductTitleProps } from './molecules/ProductTitle'
+
 export { default as AggregateRating } from './molecules/AggregateRating'
 export type { AggregateRatingProps } from './molecules/AggregateRating'
 

package/src/molecules/ProductTitle/ProductTitle.tsx

@@ -0,0 +1,44 @@
+import React, { HTMLAttributes } from 'react'
+import type { ReactNode } from 'react'
+
+export type ProductTitleProps = Omit<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
+  /**
+   * A text to be used below the title and the label, such as the product's reference number.
+   */
+  refNumber?: string
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  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>
+
+      {refNumber && (
+        <p data-fs-product-title-addendum>
+          {refTag}{refNumber}
+        </p>
+      )}
+    </header>
+  )
+}
+
+export default ProductTitle

package/src/molecules/ProductTitle/index.tsx

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

package/src/molecules/ProductTitle/stories/ProductTitle.mdx

@@ -0,0 +1,26 @@
+import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
+
+import ProductTitle from '../ProductTitle'
+
+# ProductTitle
+
+<Canvas>
+  <Story id="molecules-producttitle--product-title" />
+</Canvas>
+
+## Props
+
+<ArgsTable of={ ProductTitle } />
+
+## CSS Selectors
+
+```css
+[data-fs-product-title] {
+}
+
+[data-fs-product-title-header] {
+}
+
+[data-fs-product-title-addendum] {
+}
+```

package/src/molecules/ProductTitle/stories/ProductTitle.stories.tsx

@@ -0,0 +1,27 @@
+import type { Story, Meta } from '@storybook/react'
+import React from 'react'
+
+import type { ProductTitleProps } from '../ProductTitle'
+import Component from '../ProductTitle'
+import mdx from './ProductTitle.mdx'
+import Badge from '../../../atoms/Badge'
+
+const ProductTitleTemplate: Story<ProductTitleProps> = () => (
+  <Component 
+    title={<h1>Apple Magic Mouse</h1>}
+    refNumber='99995945'
+    label={<Badge>90%</Badge>}
+  />
+)
+
+export const ProductTitle = ProductTitleTemplate.bind({})
+ProductTitle.storyName = 'ProductTitle'
+
+export default {
+  title: 'Molecules/ProductTitle',
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+} as Meta