Migrate storybook entries of ProductPrice component (https://github.com/woocommerce/woocommerce-blocks/pull/5371)

Closes woocommerce/woocommerce-blocks#5368
This commit is contained in:
M. L. Giannotta 2021-12-15 19:07:49 +01:00 committed by GitHub
parent 5524c0aa91
commit 1db7ede31e
3 changed files with 154 additions and 66 deletions

View File

@ -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. `<del>` element
*/
regularPriceClassName?: string;
regularPriceStyle?: Record< string, string >;
/**
* Custom style to be applied to the regular price container
*
* i.e. `<del>` 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. `<ins>` element
*/
priceClassName?: string;
priceStyle?: Record< string, string >;
/**
* Custom style to be applied to the regular price container
*
* i.e. `<ins>` 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 `<price/>` (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 = ( {

View File

@ -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 (
<ProductPrice align={ align } currency={ currency } price={ price } />
);
};
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 (
<ProductPrice
align={ align }
currency={ currency }
price={ price }
regularPrice={ regularPrice }
/>
);
};
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 (
<ProductPrice
align={ align }
currency={ currency }
minPrice={ minPrice }
maxPrice={ maxPrice }
/>
);
};

View File

@ -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/>',
price: 3000,
},
} as Meta< ProductPriceProps >;
const Template: Story< ProductPriceProps > = ( args ) => (
<ProductPrice { ...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,
};