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
GitHub
parent
5524c0aa91
commit
1db7ede31e
|
|
@ -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 = ( {
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -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,
|
||||
};
|
||||
Loading…
Reference in New Issue