Documents page to use the wp.components available in the WordPress installation (#10953)

Author: rtio

changelog/update-documents-wp-components

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Update documents page to use WP components available in the WordPress installation.

client/components/test-mode-notice/index.tsx

@@ -10,7 +10,7 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import { getPaymentSettingsUrl, isInTestMode } from 'utils';
 import BannerNotice from '../banner-notice';
 import interpolateComponents from '@automattic/interpolate-components';
-import { Link } from '@woocommerce/components';
+import { ExternalLink } from 'wcpay/components/wp-components-wrapped/components/external-link';
 import { recordEvent } from 'wcpay/tracks';
 
 type CurrentPage =
@@ -86,13 +86,10 @@ const getNoticeContent = (
 							learnMoreLink: (
 								// Link content is in the format string above. Consider disabling jsx-a11y/anchor-has-content.
 								// eslint-disable-next-line jsx-a11y/anchor-has-content
-								<Link
+								<ExternalLink
 									href={
 										'https://woocommerce.com/document/woopayments/testing-and-troubleshooting/sandbox-mode/'
 									}
-									target="_blank"
-									rel="noreferrer"
-									type="external"
 									onClick={ () =>
 										recordEvent(
 											'wcpay_overview_test_mode_learn_more_clicked'

client/components/test-mode-notice/test/__snapshots__/index.tsx.snap

@@ -95,6 +95,14 @@ exports[`Test mode notification Returns valid component for loans page 1`] = `
 `;
 
 exports[`Test mode notification Returns valid component for overview page 1`] = `
+.emotion-2 {
+  width: 1em;
+  height: 1em;
+  margin: 0;
+  vertical-align: middle;
+  fill: currentColor;
+}
+
 <div>
   <div
     class="wcpay-banner-notice is-warning"
@@ -107,12 +115,33 @@ exports[`Test mode notification Returns valid component for overview page 1`] =
       </strong>
        All transactions will be simulated. 
       <a
-        data-link-type="external"
+        class="components-external-link"
         href="https://woocommerce.com/document/woopayments/testing-and-troubleshooting/sandbox-mode/"
-        rel="noreferrer"
+        rel="external noreferrer noopener"
         target="_blank"
       >
         Learn more
+        <span
+          class="components-visually-hidden emotion-0 emotion-1"
+          data-wp-c16t="true"
+          data-wp-component="VisuallyHidden"
+          style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
+        >
+          (opens in a new tab)
+        </span>
+        <svg
+          aria-hidden="true"
+          class="components-external-link__icon emotion-2 emotion-3"
+          focusable="false"
+          height="24"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M18.2 17c0 .7-.6 1.2-1.2 1.2H7c-.7 0-1.2-.6-1.2-1.2V7c0-.7.6-1.2 1.2-1.2h3.2V4.2H7C5.5 4.2 4.2 5.5 4.2 7v10c0 1.5 1.2 2.8 2.8 2.8h10c1.5 0 2.8-1.2 2.8-2.8v-3.6h-1.5V17zM14.9 3v1.5h3.7l-6.4 6.4 1.1 1.1 6.4-6.4v3.7h1.5V3h-6.3z"
+          />
+        </svg>
       </a>
     </div>
   </div>

client/documents/list/index.tsx

@@ -7,11 +7,11 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { TableCard, TableCardColumn } from '@woocommerce/components';
 import { onQueryChange, getQuery } from '@woocommerce/navigation';
-import { Button } from 'wcpay/components/wp-components-wrapped/components/button';
 
 /**
  * Internal dependencies
  */
+import { Button } from 'wcpay/components/wp-components-wrapped/components/button';
 import { displayType } from 'documents/strings';
 import { Document, useDocuments, useDocumentsSummary } from 'data/index';
 import './style.scss';
@@ -198,6 +198,7 @@ export const DocumentsList = (): JSX.Element => {
 								document.type
 							)
 						}
+						__next40pxDefaultSize
 					>
 						{ __( 'Download', 'woocommerce-payments' ) }
 					</Button>

client/index.js

@@ -293,7 +293,13 @@ addFilter(
 		} );
 		if ( wcpaySettings && wcpaySettings.featureFlags.documents ) {
 			pages.push( {
-				container: DocumentsPage,
+				container: () => (
+					<WordPressComponentsContext.Provider
+						value={ wp.components }
+					>
+						<DocumentsPage />
+					</WordPressComponentsContext.Provider>
+				),
 				path: '/payments/documents',
 				wpOpenMenu: menuID,
 				breadcrumbs: [

client/vat/form-modal/index.tsx

@@ -4,12 +4,12 @@
  * External dependencies
  */
 import React from 'react';
-import { Modal } from 'wcpay/components/wp-components-wrapped/components/modal';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import { Modal } from 'wcpay/components/wp-components-wrapped/components/modal';
 import VatForm from '../form';
 import { VatFormOnCompleted } from '../types';
 

client/vat/form/style.scss

@@ -2,3 +2,25 @@
 	margin: 0;
 	margin-top: 15px;
 }
+
+// This matches the styling of the VatNumberTask component before __nextHasNoMarginBottom was added in a few internal components.
+.wcpay-vat-number-task {
+	&__checkbox {
+		margin-bottom: 16px;
+	}
+
+	&__text-control {
+		margin-bottom: 16px;
+	}
+}
+
+// This matches the styling of the CompanyDataTask component before __nextHasNoMarginBottom was added in a few internal components.
+.wcpay-company-data-task {
+	&__text-control {
+		margin-bottom: 16px;
+	}
+
+	&__textarea-control {
+		margin-bottom: 16px;
+	}
+}

client/vat/form/tasks/company-data-task.tsx

@@ -97,22 +97,29 @@ export const CompanyDataTask = ( {
 		>
 			<CollapsibleBody>
 				<TextControl
+					className="wcpay-company-data-task__text-control"
 					label={ __( 'Business name', 'woocommerce-payments' ) }
 					value={ companyName }
 					onChange={ setCompanyName }
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
 				/>
 
 				<TextareaControl
+					className="wcpay-company-data-task__textarea-control"
 					label={ __( 'Address', 'woocommerce-payments' ) }
 					value={ companyAddress }
 					onChange={ setCompanyAddress }
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
 				/>
 
 				<Button
 					isPrimary
 					disabled={ isConfirmButtonDisabled || isLoading }
 					isBusy={ isLoading }
 					onClick={ submit }
+					__next40pxDefaultSize
 				>
 					{ __( 'Confirm', 'woocommerce-payments' ) }
 				</Button>

client/vat/form/tasks/vat-number-task.tsx

@@ -218,6 +218,7 @@ export const VatNumberTask = ( {
 
 			<CollapsibleBody>
 				<CheckboxControl
+					className="wcpay-vat-number-task__checkbox"
 					checked={ isVatRegistered }
 					onChange={ setVatRegistered }
 					label={ sprintf(
@@ -229,15 +230,19 @@ export const VatNumberTask = ( {
 						getVatTaxIDName()
 					) }
 					help={ getVatTaxIDRequirementHint() }
+					__nextHasNoMarginBottom
 				/>
 				{ isVatRegistered && (
 					// Note: this TextControl is heavily parameterised to support different regions (VAT vs GST vs Corporate Number).
 					// Long term, if we implement a dedicated WizardTaskItem component for each tax region, then this component will be simpler.
 					<TextControl
+						className="wcpay-vat-number-task__text-control"
 						label={ getVatTaxIDName() }
 						help={ getVatTaxIDValidationHint() }
 						value={ vatNumber }
 						onChange={ setVatNumber }
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 					/>
 				) }
 
@@ -246,6 +251,7 @@ export const VatNumberTask = ( {
 					disabled={ isVatButtonDisabled || isLoading }
 					isBusy={ isLoading }
 					onClick={ submit }
+					__next40pxDefaultSize
 				>
 					{ __( 'Continue', 'woocommerce-payments' ) }
 				</Button>