Add stories to Cart & Checkout totals components (https://github.com/woocommerce/woocommerce-blocks/pull/3533)

* Add stories to Cart & Checkout totals components

* Create @woocommerce/knobs alias

* Update TotalsFooterItem default values so they are in line with other stories
This commit is contained in:
Albert Juhé Lluveras 2020-12-14 09:15:50 +01:00 committed by GitHub
parent baa97e528f
commit 02174c5431
15 changed files with 316 additions and 33 deletions

View File

@ -13,7 +13,8 @@ import {
import TotalsCoupon from '../';
export default {
title: 'WooCommerce Blocks/@base-components/TotalsCoupon',
title:
'WooCommerce Blocks/@base-components/cart-checkout/totals/TotalsCoupon',
component: TotalsCoupon,
};

View File

@ -0,0 +1,37 @@
/**
* External dependencies
*/
import { text, boolean } from '@storybook/addon-knobs';
import { currencyKnob } from '@woocommerce/knobs';
/**
* Internal dependencies
*/
import TotalsDiscount from '../';
export default {
title:
'WooCommerce Blocks/@base-components/cart-checkout/totals/TotalsDiscount',
component: TotalsDiscount,
};
export const Default = () => {
const cartCoupons = [ { code: 'COUPON' } ];
const currency = currencyKnob();
const isRemovingCoupon = boolean( 'Toggle isRemovingCoupon state', false );
const totalDiscount = text( 'Total discount', '1000' );
const totalDiscountTax = text( 'Total discount tax', '200' );
return (
<TotalsDiscount
cartCoupons={ cartCoupons }
currency={ currency }
isRemovingCoupon={ isRemovingCoupon }
removeCoupon={ () => void null }
values={ {
total_discount: totalDiscount,
total_discount_tax: totalDiscountTax,
} }
/>
);
};

View File

@ -0,0 +1,32 @@
/**
* External dependencies
*/
import { text } from '@storybook/addon-knobs';
import { currencyKnob } from '@woocommerce/knobs';
/**
* Internal dependencies
*/
import TotalsFees from '../';
export default {
title:
'WooCommerce Blocks/@base-components/cart-checkout/totals/TotalsFees',
component: TotalsFees,
};
export const Default = () => {
const currency = currencyKnob();
const totalFees = text( 'Total fees', '1000' );
const totalFeesTax = text( 'Total fees tax', '200' );
return (
<TotalsFees
currency={ currency }
values={ {
total_fees: totalFees,
total_fees_tax: totalFeesTax,
} }
/>
);
};

View File

@ -0,0 +1,32 @@
/**
* External dependencies
*/
import { text } from '@storybook/addon-knobs';
import { currencyKnob } from '@woocommerce/knobs';
/**
* Internal dependencies
*/
import TotalsFooterItem from '../';
export default {
title:
'WooCommerce Blocks/@base-components/cart-checkout/totals/TotalsFooterItem',
component: TotalsFooterItem,
};
export const Default = () => {
const currency = currencyKnob();
const totalPrice = text( 'Total price', '1200' );
const totalTax = text( 'Total tax', '200' );
return (
<TotalsFooterItem
currency={ currency }
values={ {
total_price: totalPrice,
total_tax: totalTax,
} }
/>
);
};

View File

@ -0,0 +1,35 @@
/**
* External dependencies
*/
import { text } from '@storybook/addon-knobs';
import { currencyKnob } from '@woocommerce/knobs';
/**
* Internal dependencies
*/
import TotalsItem from '../';
export default {
title:
'WooCommerce Blocks/@base-components/cart-checkout/totals/TotalsItem',
component: TotalsItem,
};
export const Default = () => {
const currency = currencyKnob();
const description = text(
'Description',
'This is the amount that will be charged to your card.'
);
const label = text( 'Label', 'Amount' );
const value = text( 'Value', '1000' );
return (
<TotalsItem
currency={ currency }
description={ description }
label={ label }
value={ value }
/>
);
};

View File

@ -0,0 +1,36 @@
/**
* External dependencies
*/
import { boolean, text } from '@storybook/addon-knobs';
import { currencyKnob } from '@woocommerce/knobs';
/**
* Internal dependencies
*/
import TotalsShipping from '../';
export default {
title:
'WooCommerce Blocks/@base-components/cart-checkout/totals/TotalsShipping',
component: TotalsShipping,
};
export const Default = () => {
const currency = currencyKnob();
const showCalculator = boolean( 'Show calculator', true );
const showRateSelector = boolean( 'Show rate selector', true );
const totalShipping = text( 'Total shipping', '1000' );
const totalShippingTax = text( 'Total shipping tax', '200' );
return (
<TotalsShipping
currency={ currency }
showCalculator={ showCalculator }
showRateSelector={ showRateSelector }
values={ {
total_shipping: totalShipping,
total_shipping_tax: totalShippingTax,
} }
/>
);
};

View File

@ -0,0 +1,31 @@
/**
* External dependencies
*/
import { text } from '@storybook/addon-knobs';
import { currencyKnob } from '@woocommerce/knobs';
/**
* Internal dependencies
*/
import Subtotal from '../';
export default {
title: 'WooCommerce Blocks/@base-components/cart-checkout/totals/Subtotal',
component: Subtotal,
};
export const Default = () => {
const currency = currencyKnob();
const totalItems = text( 'Total items', '1000' );
const totalItemsTax = text( 'Total items tax', '200' );
return (
<Subtotal
currency={ currency }
values={ {
total_items: totalItems,
total_items_tax: totalItemsTax,
} }
/>
);
};

View File

@ -0,0 +1,30 @@
/**
* External dependencies
*/
import { text } from '@storybook/addon-knobs';
import { currencyKnob } from '@woocommerce/knobs';
/**
* Internal dependencies
*/
import TotalsTaxes from '../';
export default {
title:
'WooCommerce Blocks/@base-components/cart-checkout/totals/TotalsTaxes',
component: TotalsTaxes,
};
export const Default = () => {
const currency = currencyKnob();
const totalTaxes = text( 'Total taxes', '1000' );
return (
<TotalsTaxes
currency={ currency }
values={ {
total_tax: totalTaxes,
} }
/>
);
};

View File

@ -2,6 +2,7 @@
* External dependencies
*/
import { number, select } from '@storybook/addon-knobs';
import { currencyKnob } from '@woocommerce/knobs';
/**
* Internal dependencies
@ -13,37 +14,9 @@ export default {
component: ProductPrice,
};
const getKnobs = () => {
const align = select( 'Align', [ 'left', 'center', 'right' ], 'left' );
const currencies = [
{
label: 'USD',
code: 'USD',
symbol: '$',
thousandSeparator: ',',
decimalSeparator: '.',
minorUnit: 2,
prefix: '$',
suffix: '',
},
{
label: 'EUR',
code: 'EUR',
symbol: '€',
thousandSeparator: '.',
decimalSeparator: ',',
minorUnit: 2,
prefix: '',
suffix: '€',
},
];
const currency = select( 'Currency', currencies, currencies[ 0 ] );
return { align, currency };
};
export const standard = () => {
const { align, currency } = getKnobs();
const align = select( 'Align', [ 'left', 'center', 'right' ], 'left' );
const currency = currencyKnob();
const price = number( 'Price', 4000 );
return (
@ -52,7 +25,8 @@ export const standard = () => {
};
export const sale = () => {
const { align, currency } = getKnobs();
const align = select( 'Align', [ 'left', 'center', 'right' ], 'left' );
const currency = currencyKnob();
const price = number( 'Price', 3000 );
const regularPrice = number( 'Regular price', 4000 );
@ -67,7 +41,8 @@ export const sale = () => {
};
export const range = () => {
const { align, currency } = getKnobs();
const align = select( 'Align', [ 'left', 'center', 'right' ], 'left' );
const currency = currencyKnob();
const minPrice = number( 'Min price', 3000 );
const maxPrice = number( 'Max price', 5000 );

View File

@ -0,0 +1,32 @@
/**
* External dependencies
*/
import {
previewCart,
previewShippingRates,
} from '@woocommerce/resource-previews';
export * from '../../assets/js/base/hooks/index.js';
export const useStoreCart = () => ( {
cartCoupons: previewCart.coupons,
cartItems: previewCart.items,
cartItemsCount: previewCart.items_count,
cartItemsWeight: previewCart.items_weight,
cartNeedsPayment: previewCart.needs_payment,
cartNeedsShipping: previewCart.needs_shipping,
cartItemErrors: [],
cartTotals: previewCart.totals,
cartIsLoading: false,
cartErrors: [],
billingAddress: {},
shippingAddress: {},
shippingRates: previewShippingRates,
shippingRatesLoading: false,
cartHasCalculatedShipping: previewCart.has_calculated_shipping,
receiveCart: () => void null,
} );
export const useSelectShippingRate = () => ( {
selectShippingRate: () => void null,
selectedShippingRates: [],
isSelectingRate: false,
} );

View File

@ -0,0 +1,3 @@
export * from '../../assets/js/settings/blocks/index.js';
export const DISPLAY_CART_PRICES_INCLUDING_TAX = true;
export const TAXES_ENABLED = true;

View File

@ -0,0 +1,30 @@
/**
* External dependencies
*/
import { select } from '@storybook/addon-knobs';
export const currencyKnob = () => {
const currencies = [
{
label: 'USD',
code: 'USD',
symbol: '$',
thousandSeparator: ',',
decimalSeparator: '.',
minorUnit: 2,
prefix: '$',
suffix: '',
},
{
label: 'EUR',
code: 'EUR',
symbol: '€',
thousandSeparator: '.',
decimalSeparator: ',',
minorUnit: 2,
prefix: '',
suffix: '€',
},
];
return select( 'Currency', currencies, currencies[ 0 ] );
};

View File

@ -0,0 +1 @@
export * from './currency-knob.js';

View File

@ -32,6 +32,13 @@ module.exports = ( { config: storybookConfig } ) => {
storybookConfig.resolve.alias = {
...storybookConfig.resolve.alias,
...aliases,
'@woocommerce/block-settings': require.resolve(
'./__mocks__/woocommerce-block-settings.js'
),
'@woocommerce/base-hooks': require.resolve(
'./__mocks__/woocommerce-base-hooks.js'
),
'@woocommerce/storybook': require.resolve( './knobs/index.js' ),
};
storybookConfig.module.rules.push(
{

View File

@ -38,6 +38,7 @@
],
"@woocommerce/icons": [ "assets/js/icons" ],
"@woocommerce/resource-previews": [ "assets/js/previews" ],
"@woocommerce/knobs": [ "storybook/knobs" ],
"@woocommerce/settings": [ "assets/js/settings/shared" ],
"@woocommerce/shared-context": [ "assets/js/shared/context" ],
"@woocommerce/type-defs/*": [ "assets/js/type-defs/*" ]