120 lines
2.5 KiB
TypeScript
120 lines
2.5 KiB
TypeScript
|
/**
|
||
|
|
* External dependencies
|
||
|
|
*/
|
||
|
|
import type { Story, Meta } from '@storybook/react';
|
||
|
|
import { useArgs } from '@storybook/client-api';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Internal dependencies
|
||
|
|
*/
|
||
|
|
import FormattedMonetaryAmount, { type FormattedMonetaryAmountProps } from '..';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
title: 'WooCommerce Blocks/@woocommerce-blocks-components/FormattedMonetaryAmount',
|
||
|
|
component: FormattedMonetaryAmount,
|
||
|
|
argTypes: {
|
||
|
|
className: {
|
||
|
|
control: 'text',
|
||
|
|
table: {
|
||
|
|
type: {
|
||
|
|
summary: 'string',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
currency: {
|
||
|
|
table: {
|
||
|
|
type: {
|
||
|
|
summary: 'object',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
control: 'object',
|
||
|
|
description:
|
||
|
|
'The currency object used to describe how the monetary amount should be displayed.',
|
||
|
|
},
|
||
|
|
displayType: {
|
||
|
|
table: {
|
||
|
|
type: {
|
||
|
|
summary: 'input | text',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
control: 'select',
|
||
|
|
options: [ 'input', 'text' ],
|
||
|
|
defaultValue: 'text',
|
||
|
|
description:
|
||
|
|
'Whether this should be an input or just a text display.',
|
||
|
|
},
|
||
|
|
value: {
|
||
|
|
control: 'number',
|
||
|
|
table: {
|
||
|
|
type: {
|
||
|
|
summary: 'number',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
defaultValue: 1234,
|
||
|
|
description:
|
||
|
|
'The raw value of the currency, it will be formatted depending on the props of this component.',
|
||
|
|
},
|
||
|
|
isAllowed: {
|
||
|
|
control: 'function',
|
||
|
|
table: {
|
||
|
|
type: {
|
||
|
|
summary: 'function',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
if: { arg: 'displayType', eq: 'input' },
|
||
|
|
description:
|
||
|
|
'A checker function to validate the input value. If this function returns false, the onChange method will not get triggered and the input value will not change.',
|
||
|
|
},
|
||
|
|
allowNegative: {
|
||
|
|
control: 'boolean',
|
||
|
|
table: {
|
||
|
|
type: {
|
||
|
|
summary: 'boolean',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
description: 'Whether negative numbers can be entered',
|
||
|
|
},
|
||
|
|
onValueChange: {
|
||
|
|
table: {
|
||
|
|
type: {
|
||
|
|
summary: 'function',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
action: 'changed',
|
||
|
|
},
|
||
|
|
style: {
|
||
|
|
control: 'object',
|
||
|
|
table: {
|
||
|
|
type: {
|
||
|
|
summary: 'object',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
} as Meta< FormattedMonetaryAmountProps >;
|
||
|
|
|
||
|
|
const Template: Story< FormattedMonetaryAmountProps > = ( args ) => {
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||
|
|
const [ _, updateArgs ] = useArgs();
|
||
|
|
const onValueChange = ( unit: number ) => {
|
||
|
|
updateArgs( { value: unit } );
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<FormattedMonetaryAmount { ...args } onValueChange={ onValueChange } />
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export const Default = Template.bind( {} );
|
||
|
|
Default.args = {
|
||
|
|
currency: {
|
||
|
|
minorUnit: 2,
|
||
|
|
code: 'USD',
|
||
|
|
decimalSeparator: '.',
|
||
|
|
prefix: '$',
|
||
|
|
suffix: '',
|
||
|
|
symbol: '$',
|
||
|
|
thousandSeparator: ',',
|
||
|
|
},
|
||
|
|
};
|