From f2bf75cbce1af1e395471f68dfda34081f359bf4 Mon Sep 17 00:00:00 2001 From: Arthur Andrade Date: Mon, 25 Jul 2022 16:03:41 -0300 Subject: [PATCH 1/3] feat: Add ProductTitle Molecule Signed-off-by: Arthur Andrade --- packages/styles/src/molecules/index.css | 1 + .../styles/src/molecules/product-title.css | 23 ++++++++++ packages/ui/src/index.ts | 3 ++ .../molecules/ProductTitle/ProductTitle.tsx | 44 +++++++++++++++++++ .../ui/src/molecules/ProductTitle/index.tsx | 2 + .../ProductTitle/stories/ProductTitle.mdx | 20 +++++++++ .../stories/ProductTitle.stories.tsx | 27 ++++++++++++ 7 files changed, 120 insertions(+) create mode 100644 packages/styles/src/molecules/product-title.css create mode 100644 packages/ui/src/molecules/ProductTitle/ProductTitle.tsx create mode 100644 packages/ui/src/molecules/ProductTitle/index.tsx create mode 100644 packages/ui/src/molecules/ProductTitle/stories/ProductTitle.mdx create mode 100644 packages/ui/src/molecules/ProductTitle/stories/ProductTitle.stories.tsx diff --git a/packages/styles/src/molecules/index.css b/packages/styles/src/molecules/index.css index 9972ae6ae0..720fc83440 100644 --- a/packages/styles/src/molecules/index.css +++ b/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'; diff --git a/packages/styles/src/molecules/product-title.css b/packages/styles/src/molecules/product-title.css new file mode 100644 index 0000000000..3a6cd4b2ab --- /dev/null +++ b/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: var(--fs-product-title-text-size); + 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; +} \ No newline at end of file diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 8f91d94521..c0f3106204 100644 --- a/packages/ui/src/index.ts +++ b/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' diff --git a/packages/ui/src/molecules/ProductTitle/ProductTitle.tsx b/packages/ui/src/molecules/ProductTitle/ProductTitle.tsx new file mode 100644 index 0000000000..27f15f7988 --- /dev/null +++ b/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, '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 ( +
+
+ {title} + {!!label && label} +
+ + {refNumber && ( +

+ {refTag}{refNumber} +

+ )} +
+ ) +} + +export default ProductTitle diff --git a/packages/ui/src/molecules/ProductTitle/index.tsx b/packages/ui/src/molecules/ProductTitle/index.tsx new file mode 100644 index 0000000000..0b88c02740 --- /dev/null +++ b/packages/ui/src/molecules/ProductTitle/index.tsx @@ -0,0 +1,2 @@ +export { default } from './ProductTitle' +export type { ProductTitleProps } from './ProductTitle' diff --git a/packages/ui/src/molecules/ProductTitle/stories/ProductTitle.mdx b/packages/ui/src/molecules/ProductTitle/stories/ProductTitle.mdx new file mode 100644 index 0000000000..6aab9b4d65 --- /dev/null +++ b/packages/ui/src/molecules/ProductTitle/stories/ProductTitle.mdx @@ -0,0 +1,20 @@ +import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs' + +import ProductTitle from '../ProductTitle' + +# ProductTitle + + + + + +## Props + + + +## CSS Selectors + +```css +[data-store-product-title] { +} +``` diff --git a/packages/ui/src/molecules/ProductTitle/stories/ProductTitle.stories.tsx b/packages/ui/src/molecules/ProductTitle/stories/ProductTitle.stories.tsx new file mode 100644 index 0000000000..907da067c8 --- /dev/null +++ b/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 = () => ( + Apple Magic Mouse} + refNumber='99995945' + label={90%} + /> +) + +export const ProductTitle = ProductTitleTemplate.bind({}) +ProductTitle.storyName = 'ProductTitle' + +export default { + title: 'Molecules/ProductTitle', + parameters: { + docs: { + page: mdx, + }, + }, +} as Meta From dbcd70fd6509ec69c8ac401b24931e5738155c74 Mon Sep 17 00:00:00 2001 From: Arthur Andrade Date: Wed, 27 Jul 2022 14:29:40 -0300 Subject: [PATCH 2/3] Update packages/ui/src/molecules/ProductTitle/stories/ProductTitle.mdx Co-authored-by: Filipe W. Lima --- .../src/molecules/ProductTitle/stories/ProductTitle.mdx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/molecules/ProductTitle/stories/ProductTitle.mdx b/packages/ui/src/molecules/ProductTitle/stories/ProductTitle.mdx index 6aab9b4d65..56a193ce01 100644 --- a/packages/ui/src/molecules/ProductTitle/stories/ProductTitle.mdx +++ b/packages/ui/src/molecules/ProductTitle/stories/ProductTitle.mdx @@ -15,6 +15,12 @@ import ProductTitle from '../ProductTitle' ## CSS Selectors ```css -[data-store-product-title] { +[data-fs-product-title] { +} + +[data-fs-product-title-header] { +} + +[data-fs-product-title-addendum] { } ``` From 2911f4febfd042a8b67e13a83189dc23e9cf838c Mon Sep 17 00:00:00 2001 From: Arthur Andrade Date: Thu, 28 Jul 2022 10:27:25 -0300 Subject: [PATCH 3/3] Update packages/styles/src/molecules/product-title.css Co-authored-by: Fanny Chien --- packages/styles/src/molecules/product-title.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/molecules/product-title.css b/packages/styles/src/molecules/product-title.css index 3a6cd4b2ab..0a4dc11065 100644 --- a/packages/styles/src/molecules/product-title.css +++ b/packages/styles/src/molecules/product-title.css @@ -10,7 +10,7 @@ justify-content: space-between; } [data-fs-product-title] [data-fs-product-title-header]:first-child { - font-size: var(--fs-product-title-text-size); + font-size: 20px; font-weight: 400; line-height: 1.12; }