feat: Add ProductTitle Molecule (#1418)

Co-authored-by: Filipe W. Lima <filipe.lima@vtex.com.br>
Co-authored-by: Fanny Chien <fannychienn@gmail.com>

packages/styles/src/molecules/index.css

@@ -18,3 +18,4 @@
 @import './radio-group.css';
 @import './search-input.css';
 @import './table.css';
+@import './product-title.css';

packages/styles/src/molecules/product-title.css

@@ -0,0 +1,23 @@
+[data-fs-product-title] {
+    width: fit-content;
+    background-color: #cecece;
+    padding: 8px;
+    border-radius: 5px;
+}
+[data-fs-product-title] [data-fs-product-title-header] {
+    display: flex;
+    column-gap: .75rem;
+    justify-content: space-between;
+}
+[data-fs-product-title] [data-fs-product-title-header]:first-child {
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 1.12;
+}
+[data-fs-product-title] [data-fs-product-title-header] [data-store-badge] {
+    white-space: nowrap;
+}
+[data-fs-product-title] [data-fs-product-title-addendum] {
+    margin-top: 1rem;
+    color: #5d666f;
+}

packages/ui/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'
 

packages/ui/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

packages/ui/src/molecules/ProductTitle/index.tsx

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

packages/ui/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] {
+}
+```

packages/ui/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