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

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/coupon/stories/index.js

@@ -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,
 };
 

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/discount/stories/index.js

@@ -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,
+			} }
+		/>
+	);
+};

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/fees/stories/index.js

@@ -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,
+			} }
+		/>
+	);
+};

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/stories/index.js

@@ -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,
+			} }
+		/>
+	);
+};

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/item/stories/index.js

@@ -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 }
+		/>
+	);
+};

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/shipping/stories/index.js

@@ -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,
+			} }
+		/>
+	);
+};

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/subtotal/stories/index.js

@@ -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,
+			} }
+		/>
+	);
+};

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/taxes/stories/index.js

@@ -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,
+			} }
+		/>
+	);
+};

plugins/woocommerce-blocks/assets/js/base/components/product-price/stories/index.js

@@ -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 );
 

plugins/woocommerce-blocks/storybook/__mocks__/woocommerce-base-hooks.js

@@ -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,
+} );

plugins/woocommerce-blocks/storybook/__mocks__/woocommerce-block-settings.js

@@ -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;

plugins/woocommerce-blocks/storybook/knobs/currency-knob.js

@@ -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 ] );
+};

plugins/woocommerce-blocks/storybook/knobs/index.js

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

plugins/woocommerce-blocks/storybook/webpack.config.js

@@ -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(
 		{

plugins/woocommerce-blocks/tsconfig.json

@@ -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/*" ]