Move all totals components into components package

assets/js/base/components/cart-checkout/totals/discount/index.tsx

@@ -3,8 +3,8 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import LoadingMask from '@woocommerce/base-components/loading-mask';
-import { RemovableChip } from '@woocommerce/blocks-components';
-import { applyCheckoutFilter, TotalsItem } from '@woocommerce/blocks-checkout';
+import { RemovableChip, TotalsItem } from '@woocommerce/blocks-components';
+import { applyCheckoutFilter } from '@woocommerce/blocks-checkout';
 import { getSetting } from '@woocommerce/settings';
 import {
 	CartResponseCouponItemWithLabel,

assets/js/base/components/cart-checkout/totals/footer-item/index.tsx

@@ -4,8 +4,11 @@
 import { __, sprintf } from '@wordpress/i18n';
 import classNames from 'classnames';
 import { createInterpolateElement } from '@wordpress/element';
-import { FormattedMonetaryAmount } from '@woocommerce/blocks-components';
-import { applyCheckoutFilter, TotalsItem } from '@woocommerce/blocks-checkout';
+import {
+	FormattedMonetaryAmount,
+	TotalsItem,
+} from '@woocommerce/blocks-components';
+import { applyCheckoutFilter } from '@woocommerce/blocks-checkout';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
 import {

assets/js/base/components/cart-checkout/totals/shipping/index.tsx

@@ -5,8 +5,8 @@ import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
-import { TotalsItem } from '@woocommerce/blocks-checkout';
-import type { Currency } from '@woocommerce/price-format';
+import { TotalsItem } from '@woocommerce/blocks-components';
+import type { Currency } from '@woocommerce/types';
 import { ShippingVia } from '@woocommerce/base-components/cart-checkout/totals/shipping/shipping-via';
 import {
 	isAddressComplete,

assets/js/base/components/cart-checkout/totals/shipping/test/index.tsx

@@ -229,8 +229,11 @@ describe( 'TotalsShipping', () => {
 					currency={ {
 						code: 'USD',
 						symbol: '$',
-						position: 'left',
-						precision: 2,
+						minorUnit: 2,
+						decimalSeparator: '.',
+						prefix: '',
+						suffix: '',
+						thousandSeparator: ', ',
 					} }
 					values={ {
 						total_shipping: '0',
@@ -274,8 +277,11 @@ describe( 'TotalsShipping', () => {
 					currency={ {
 						code: 'USD',
 						symbol: '$',
-						position: 'left',
-						precision: 2,
+						minorUnit: 2,
+						decimalSeparator: '.',
+						prefix: '',
+						suffix: '',
+						thousandSeparator: ', ',
 					} }
 					values={ {
 						total_shipping: '0',
@@ -320,8 +326,11 @@ describe( 'TotalsShipping', () => {
 					currency={ {
 						code: 'USD',
 						symbol: '$',
-						position: 'left',
-						precision: 2,
+						minorUnit: 2,
+						decimalSeparator: '.',
+						prefix: '',
+						suffix: '',
+						thousandSeparator: ', ',
 					} }
 					values={ {
 						total_shipping: '0',

assets/js/base/context/hooks/tsconfig.json

@@ -4,6 +4,7 @@
 	"include": [
 		".",
 		"../../../../../packages/checkout/index.js",
+		"../../../../../packages/prices/index.js",
 		"../providers/cart-checkout/checkout-events/index.tsx",
 		"../providers/cart-checkout/payment-events/index.tsx",
 		"../providers/cart-checkout/shipping/index.js",

assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx

@@ -4,7 +4,7 @@
 import { TotalsCoupon } from '@woocommerce/base-components/cart-checkout';
 import { useStoreCartCoupons } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
-import { TotalsWrapper } from '@woocommerce/blocks-checkout';
+import { TotalsWrapper } from '@woocommerce/blocks-components';
 
 const Block = ( { className }: { className: string } ): JSX.Element | null => {
 	const couponsEnabled = getSetting( 'couponsEnabled', true );

assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx

@@ -2,15 +2,13 @@
  * External dependencies
  */
 import { TotalsDiscount } from '@woocommerce/base-components/cart-checkout';
+import { TotalsWrapper } from '@woocommerce/blocks-components';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import {
 	useStoreCartCoupons,
 	useStoreCart,
 } from '@woocommerce/base-context/hooks';
-import {
-	ExperimentalDiscountsMeta,
-	TotalsWrapper,
-} from '@woocommerce/blocks-checkout';
+import { ExperimentalDiscountsMeta } from '@woocommerce/blocks-checkout';
 
 const DiscountSlotFill = (): JSX.Element => {
 	// Prepare props to pass to the ExperimentalOrderMeta slot fill. We need to pluck out receiveCart.

assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TotalsFees, TotalsWrapper } from '@woocommerce/blocks-checkout';
+import { TotalsFees, TotalsWrapper } from '@woocommerce/blocks-components';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 

assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx

@@ -4,7 +4,7 @@
 import { TotalsShipping } from '@woocommerce/base-components/cart-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
-import { TotalsWrapper } from '@woocommerce/blocks-checkout';
+import { TotalsWrapper } from '@woocommerce/blocks-components';
 import { getSetting } from '@woocommerce/settings';
 
 const Block = ( { className }: { className: string } ): JSX.Element | null => {

assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Subtotal, TotalsWrapper } from '@woocommerce/blocks-checkout';
+import { Subtotal, TotalsWrapper } from '@woocommerce/blocks-components';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 

assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TotalsTaxes, TotalsWrapper } from '@woocommerce/blocks-checkout';
+import { TotalsTaxes, TotalsWrapper } from '@woocommerce/blocks-components';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';

assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.tsx

@@ -3,7 +3,7 @@
  */
 import { OrderSummary } from '@woocommerce/base-components/cart-checkout';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
-import { TotalsWrapper } from '@woocommerce/blocks-checkout';
+import { TotalsWrapper } from '@woocommerce/blocks-components';
 
 const Block = ( { className }: { className: string } ): JSX.Element => {
 	const { cartItems } = useStoreCart();

assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx

@@ -4,7 +4,7 @@
 import { TotalsCoupon } from '@woocommerce/base-components/cart-checkout';
 import { useStoreCartCoupons } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
-import { TotalsWrapper } from '@woocommerce/blocks-checkout';
+import { TotalsWrapper } from '@woocommerce/blocks-components';
 
 const Block = ( {
 	className = '',

assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx

@@ -2,15 +2,13 @@
  * External dependencies
  */
 import { TotalsDiscount } from '@woocommerce/base-components/cart-checkout';
+import { TotalsWrapper } from '@woocommerce/blocks-components';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import {
 	useStoreCartCoupons,
 	useStoreCart,
 } from '@woocommerce/base-context/hooks';
-import {
-	ExperimentalDiscountsMeta,
-	TotalsWrapper,
-} from '@woocommerce/blocks-checkout';
+import { ExperimentalDiscountsMeta } from '@woocommerce/blocks-checkout';
 
 const DiscountSlotFill = (): JSX.Element => {
 	// Prepare props to pass to the ExperimentalOrderMeta slot fill. We need to pluck out receiveCart.

assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TotalsFees, TotalsWrapper } from '@woocommerce/blocks-checkout';
+import { TotalsFees, TotalsWrapper } from '@woocommerce/blocks-components';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 

assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Subtotal, TotalsWrapper } from '@woocommerce/blocks-checkout';
+import { Subtotal, TotalsWrapper } from '@woocommerce/blocks-components';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 

assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TotalsTaxes, TotalsWrapper } from '@woocommerce/blocks-checkout';
+import { TotalsTaxes, TotalsWrapper } from '@woocommerce/blocks-components';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { TotalsItem } from '@woocommerce/blocks-checkout';
+import { TotalsItem } from '@woocommerce/blocks-components';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import {
 	usePaymentMethods,

assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/edit.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { TotalsItem } from '@woocommerce/blocks-checkout';
+import { TotalsItem } from '@woocommerce/blocks-components';
 import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import {

assets/js/types/type-defs/cart.ts

@@ -162,6 +162,7 @@ export interface CartFeeItemTotals extends CurrencyInfo {
 }
 
 export interface CartFeeItem {
+	key: string;
 	id: string;
 	name: string;
 	totals: CartFeeItemTotals;

packages/checkout/components/discounts-meta/index.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * Internal dependencies
  */
 import { createSlotFill, hasValidFills, useSlot } from '../../slot';
-import TotalsWrapper from '../totals-wrapper';
+import TotalsWrapper from '../../../components/totals-wrapper';
 
 const slotName = '__experimentalDiscountsMeta';
 

packages/checkout/components/index.ts

@@ -1,5 +1,5 @@
-export * from './totals';
-export { default as TotalsWrapper } from './totals-wrapper';
+export * from '../../components/totals';
+export { default as TotalsWrapper } from '../../components/totals-wrapper';
 export { default as ExperimentalOrderMeta } from './order-meta';
 export { default as ExperimentalDiscountsMeta } from './discounts-meta';
 export { default as ExperimentalOrderShippingPackages } from './order-shipping-packages';

packages/checkout/components/order-meta/index.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * Internal dependencies
  */
 import { createSlotFill, hasValidFills, useSlot } from '../../slot';
-import TotalsWrapper from '../totals-wrapper';
+import TotalsWrapper from '../../../components/totals-wrapper';
 
 const slotName = '__experimentalOrderMeta';
 

packages/components/index.ts

@@ -23,4 +23,6 @@ export {
 } from './text-input/validated-text-input';
 export { default as TextInput } from './text-input/text-input';
 export { default as Title } from './title';
+export * from './totals';
+export { default as TotalsWrapper } from './totals-wrapper';
 export { default as ValidationInputError } from './validation-input-error';

packages/components/totals-wrapper/docs/docs.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, ArgTypes, Primary, Source, Controls } from '@storybook/blocks';
+
+import * as TotalsWrapperStories from '../stories/index.stories.tsx';
+
+<Meta name="Docs" of={ TotalsWrapperStories } />
+
+# TotalsWrapper
+
+A wrapper to go around any items displayed in the "Totals" area of the Cart/Checkout blocks. Usually it comes with additional padding so the component rendered inside it doesn't need to add its own padding. If this is being used to wrap a Slot (for use in Slot/Fill patterns) then no padding will be applied.
+
+<Primary />
+
+### Props
+
+<Controls />

packages/checkout/components/totals-wrapper/index.tsx → packages/components/totals-wrapper/index.tsx

@@ -10,7 +10,7 @@ import type { ReactNode } from 'react';
  */
 import './style.scss';
 
-interface TotalsWrapperProps {
+export interface TotalsWrapperProps {
 	children: ReactNode;
 	/* If this TotalsWrapper is being used to wrap a Slot */
 	slotWrapper?: boolean;

packages/components/totals-wrapper/stories/index.stories.tsx

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import type { StoryFn, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import TotalsWrapper, { TotalsWrapperProps } from '..';
+
+export default {
+	title: 'External Components/Totals/TotalsWrapper',
+	component: TotalsWrapper,
+	argTypes: {
+		className: {
+			control: 'text',
+			table: {
+				type: {
+					summary: 'string',
+				},
+			},
+		},
+		children: {
+			control: null,
+			table: {
+				type: {
+					summary: 'React.Children',
+				},
+			},
+		},
+		slotWrapper: {
+			control: 'boolean',
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
+			description:
+				'True if this `TotalsWrapper` is being used to wrap a Slot/Fill',
+		},
+	},
+} as Meta< TotalsWrapperProps >;
+const Template: StoryFn< TotalsWrapperProps > = ( args ) => {
+	return (
+		<TotalsWrapper { ...args }>
+			<div>Custom totals content</div>
+		</TotalsWrapper>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {};

packages/checkout/components/totals/fees/index.tsx → packages/components/totals/fees/index.tsx

@@ -4,8 +4,7 @@
 import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { getSetting } from '@woocommerce/settings';
-import type { Currency } from '@woocommerce/price-format';
-import type { CartFeeItem } from '@woocommerce/types';
+import type { CartFeeItem, Currency } from '@woocommerce/types';
 import type { ReactElement } from 'react';
 
 /**

packages/checkout/components/totals/fees/stories/index.stories.tsx → packages/components/totals/fees/stories/index.stories.tsx

@@ -24,6 +24,7 @@ export default {
 		cartFees: [
 			{
 				id: 'my-id',
+				key: 'my-id',
 				name: 'Storybook fee',
 				totals: {
 					...currenciesAPIShape.USD,

packages/checkout/components/totals/item/index.tsx → packages/components/totals/item/index.tsx

@@ -4,16 +4,16 @@
 import classnames from 'classnames';
 import { isValidElement } from '@wordpress/element';
 import type { ReactElement, ReactNode } from 'react';
-import type { Currency } from '@woocommerce/price-format';
+import type { Currency } from '@woocommerce/types';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
-import FormattedMonetaryAmount from '../../../../components/formatted-monetary-amount';
+import FormattedMonetaryAmount from '../../formatted-monetary-amount';
 
 export interface TotalsItemProps {
-	className?: string;
+	className?: string | undefined;
 	currency: Currency;
 	label: string;
 	// Value may be a number, or react node. Numbers are passed to FormattedMonetaryAmount.

packages/checkout/components/totals/subtotal/index.tsx → packages/components/totals/subtotal/index.tsx

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { getSetting } from '@woocommerce/settings';
-import type { Currency } from '@woocommerce/price-format';
+import type { Currency } from '@woocommerce/types';
 import type { ReactElement } from 'react';
 
 /**