From 1db7ede31e1aa3e5648292e7072cdc3ac635b617 Mon Sep 17 00:00:00 2001 From: "M. L. Giannotta" Date: Wed, 15 Dec 2021 19:07:49 +0100 Subject: [PATCH] Migrate storybook entries of ProductPrice component (https://github.com/woocommerce/woocommerce-blocks/pull/5371) Closes woocommerce/woocommerce-blocks#5368 --- .../base/components/product-price/index.tsx | 116 ++++++++++++++++-- .../components/product-price/stories/index.js | 57 --------- .../product-price/stories/index.tsx | 47 +++++++ 3 files changed, 154 insertions(+), 66 deletions(-) delete mode 100644 plugins/woocommerce-blocks/assets/js/base/components/product-price/stories/index.js create mode 100644 plugins/woocommerce-blocks/assets/js/base/components/product-price/stories/index.tsx diff --git a/plugins/woocommerce-blocks/assets/js/base/components/product-price/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/product-price/index.tsx index 1f3b4f047d4..814aebc7248 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/product-price/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/base/components/product-price/index.tsx @@ -14,10 +14,29 @@ import type { Currency } from '@woocommerce/types'; import './style.scss'; interface PriceRangeProps { - currency: Currency | Record< string, never >; // Currency configuration object; + /** + * Currency configuration object + */ + currency: Currency | Record< string, never >; + /** + * The maximum price for the range + */ maxPrice: string | number; + /** + * The minimum price for the range + */ minPrice: string | number; + /** + * CSS class applied to each of the elements containing the prices + * + * **Note:** this excludes the dash in between the elements + */ priceClassName?: string; + /** + * Any custom style to be applied to each of the elements containing the prices + * + * **Note:** this excludes the dash in between the elements + */ priceStyle?: React.CSSProperties; } @@ -26,7 +45,7 @@ const PriceRange = ( { maxPrice, minPrice, priceClassName, - priceStyle, + priceStyle = {}, }: PriceRangeProps ) => { return ( <> @@ -67,12 +86,41 @@ const PriceRange = ( { }; interface SalePriceProps { - currency: Currency | Record< string, never >; // Currency configuration object. + /** + * Currency configuration object + */ + currency: Currency | Record< string, never >; + /** + * CSS class to be applied to the regular price container + * + * i.e. `` element + */ regularPriceClassName?: string; - regularPriceStyle?: Record< string, string >; + /** + * Custom style to be applied to the regular price container + * + * i.e. `` element + */ + regularPriceStyle?: React.CSSProperties; + /** + * The regular price before the sale + */ regularPrice: number | string; + /** + * CSS class to be applied to the sale price container + * + * i.e. `` element + */ priceClassName?: string; - priceStyle?: Record< string, string >; + /** + * Custom style to be applied to the regular price container + * + * i.e. `` element + */ + priceStyle?: React.CSSProperties; + /** + * The new price during the sale + */ price: number | string; } @@ -128,19 +176,69 @@ const SalePrice = ( { ); }; -interface ProductPriceProps { +export interface ProductPriceProps { + /** + * Where to align the wrapper + * + * Applies the `wc-block-components-product-price--align-${ align }` utility + * class to the wrapper. + */ align?: 'left' | 'center' | 'right'; + /** + * CSS class for the wrapper + */ className?: string; - currency: Currency | Record< string, never >; // Currency configuration object. + /** + * Currency configuration object + */ + currency: Currency | Record< string, never >; + /** + * The string version of the element to use for the price interpolation + * + * **Note:** It should contain `` (which is also the default value) + */ format: string; + /** + * The current price + */ price: number | string; + /** + * CSS class for the current price wrapper + */ priceClassName?: string; - priceStyle?: Record< string, string >; + /** + * Custom style for the current price + */ + priceStyle?: React.CSSProperties; + /** + * The maximum price in a range + * + * If both `maxPrice` and `minPrice` are set, the component will be rendered + * as a `PriceRange` component, otherwise, this value will be ignored. + */ maxPrice?: number | string; + /** + * The minimum price in a range + * + * If both `maxPrice` and `minPrice` are set, the component will be rendered + * as a `PriceRange` component, otherwise, this value will be ignored. + */ minPrice?: number | string; + /** + * The regular price if the item is currently on sale + * + * If this property exists and is different from the current price, then the + * component will be rendered as a `SalePrice` component. + */ regularPrice?: number | string; + /** + * CSS class to apply to the regular price wrapper + */ regularPriceClassName?: string; - regularPriceStyle?: Record< string, string >; + /** + * Custom style to apply to the regular price wrapper. + */ + regularPriceStyle?: React.CSSProperties; } const ProductPrice = ( { diff --git a/plugins/woocommerce-blocks/assets/js/base/components/product-price/stories/index.js b/plugins/woocommerce-blocks/assets/js/base/components/product-price/stories/index.js deleted file mode 100644 index 87d75072612..00000000000 --- a/plugins/woocommerce-blocks/assets/js/base/components/product-price/stories/index.js +++ /dev/null @@ -1,57 +0,0 @@ -/** - * External dependencies - */ -import { number, select } from '@storybook/addon-knobs'; -import { currencyKnob } from '@woocommerce/knobs'; - -/** - * Internal dependencies - */ -import ProductPrice from '../'; - -export default { - title: 'WooCommerce Blocks/@base-components/ProductPrice', - component: ProductPrice, -}; - -export const standard = () => { - const align = select( 'Align', [ 'left', 'center', 'right' ], 'left' ); - const currency = currencyKnob(); - const price = number( 'Price', 4000 ); - - return ( - - ); -}; - -export const sale = () => { - const align = select( 'Align', [ 'left', 'center', 'right' ], 'left' ); - const currency = currencyKnob(); - const price = number( 'Price', 3000 ); - const regularPrice = number( 'Regular price', 4000 ); - - return ( - - ); -}; - -export const range = () => { - const align = select( 'Align', [ 'left', 'center', 'right' ], 'left' ); - const currency = currencyKnob(); - const minPrice = number( 'Min price', 3000 ); - const maxPrice = number( 'Max price', 5000 ); - - return ( - - ); -}; diff --git a/plugins/woocommerce-blocks/assets/js/base/components/product-price/stories/index.tsx b/plugins/woocommerce-blocks/assets/js/base/components/product-price/stories/index.tsx new file mode 100644 index 00000000000..9b9fc0927ea --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/base/components/product-price/stories/index.tsx @@ -0,0 +1,47 @@ +/** + * External dependencies + */ +import { Story, Meta } from '@storybook/react'; +import { currencyControl } from '@woocommerce/storybook-controls'; + +/** + * Internal dependencies + */ +import ProductPrice, { ProductPriceProps } from '..'; + +const ALLOWED_ALIGN_VALUES = [ 'left', 'center', 'right' ]; + +export default { + title: 'WooCommerce Blocks/@base-components/ProductPrice', + component: ProductPrice, + argTypes: { + align: { + control: { type: 'radio' }, + options: ALLOWED_ALIGN_VALUES, + }, + currency: currencyControl, + }, + args: { + align: 'left', + format: '', + price: 3000, + }, +} as Meta< ProductPriceProps >; + +const Template: Story< ProductPriceProps > = ( args ) => ( + +); + +export const Default = Template.bind( {} ); +Default.args = {}; + +export const Sale = Template.bind( {} ); +Sale.args = { + regularPrice: 4500, +}; + +export const Range = Template.bind( {} ); +Range.args = { + maxPrice: 5000, + minPrice: 3000, +};