@justifi/webcomponents 6.5.1-rc.4 → 6.5.1-rc.7

package/docs/merchant-tools/payouts-list/index.mdx

@@ -5,7 +5,7 @@ description: Reporting table for outbound payouts including status, destination,
 sidebar_position: 40
 ---
 
-import { PropsTable, PartsTable } from '../../helpers';
+import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
 
 ## Overview
 
@@ -13,15 +13,18 @@ Component to render a formated list of payouts for the requested account.
 
 ## Usage
 
-<pre><code className="language-html">{`<justifi-payouts-list
+<pre>
+  <code className="language-html">{`<justifi-payouts-list
   account-id="acc_123"
   auth-token="wct_reporting"
   columns="created_at,amount,destination,status"
-/>`}</code></pre>
+/>`}</code>
+</pre>
 
 ## Props, Events & Methods
 
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'account-id',
       type: 'string',
@@ -46,7 +49,8 @@ Component to render a formated list of payouts for the requested account.
       defaultValue: 'UTC',
       description: 'Controls formatting for timestamps.',
     },
-  ]) }} />
+  ]}
+/>
 
 ### Events
 
@@ -58,7 +62,8 @@ Component to render a formated list of payouts for the requested account.
 
 ## Theming & Layout
 
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'font-family',
       description: 'Controls the font family for the component.',
@@ -79,16 +84,5 @@ Component to render a formated list of payouts for the requested account.
       name: 'button-disabled',
       description: 'Disabled button styles.',
     },
-  ]) }} />
-
-## Static examples
-
-### Navigate to payout details
-
-<pre><code className="language-js">{`const payouts = document.querySelector('justifi-payouts-list');
-
-payouts.addEventListener('click-event', (event) => {
-if (event.detail.name === 'row') {
-router.push('/payouts/' + event.detail.payout_id);
-}
-});`}</code></pre>
+  ]}
+/>

package/docs/merchant-tools/terminal-orders-list/index.mdx

@@ -5,7 +5,7 @@ description: Reporting table of hardware orders with fulfillment status and trac
 sidebar_position: 51
 ---
 
-import { PropsTable, PartsTable } from '../../helpers';
+import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
 
 ## Overview
 
@@ -13,14 +13,17 @@ Component to render a formated list of terminal device orders for the requested
 
 ## Usage
 
-<pre><code className="language-html">{`<justifi-terminal-orders-list
+<pre>
+  <code className="language-html">{`<justifi-terminal-orders-list
   account-id="acc_123"
   auth-token="wct_terminals"
-/>`}</code></pre>
+/>`}</code>
+</pre>
 
 ## Props, Events & Methods
 
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'account-id',
       type: 'string',
@@ -39,7 +42,8 @@ Component to render a formated list of terminal device orders for the requested
       defaultValue: 'created_at,order_number,items,status,tracking_number',
       description: 'Customize visible columns.',
     },
-  ]) }} />
+  ]}
+/>
 
 ### Events
 
@@ -51,7 +55,8 @@ Component to render a formated list of terminal device orders for the requested
 
 ## Theming & Layout
 
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'font-family',
       description: 'Controls the font family for the component.',
@@ -72,14 +77,5 @@ Component to render a formated list of terminal device orders for the requested
       name: 'button-disabled',
       description: 'Disabled button styles.',
     },
-  ]) }} />
-
-## Static examples
-
-### Navigate to order details
-
-<pre><code className="language-js">{`const orders = document.querySelector('justifi-terminal-orders-list');
-
-orders.addEventListener('click-event', ({ detail }) => {
-if (detail.name === 'row') router.push('/terminals/orders/' + detail.order_id);
-});`}</code></pre>
+  ]}
+/>

package/docs/merchant-tools/terminals-list/index.mdx

@@ -5,7 +5,7 @@ description: Inventory table showing active, inactive, and assigned terminals in
 sidebar_position: 52
 ---
 
-import { PropsTable, PartsTable } from '../../helpers';
+import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
 
 ## Overview
 
@@ -13,15 +13,18 @@ Component to render a formated list of terminals for the requested account.
 
 ## Usage
 
-<pre><code className="language-html">{`<justifi-terminals-list
+<pre>
+  <code className="language-html">{`<justifi-terminals-list
   account-id="acc_123"
   auth-token="wct_terminals"
   filters='{"status":"online"}'
-/>`}</code></pre>
+/>`}</code>
+</pre>
 
 ## Props, Events & Methods
 
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'account-id',
       type: 'string',
@@ -46,7 +49,8 @@ Component to render a formated list of terminals for the requested account.
       defaultValue: 'name,status,location,last_check_in',
       description: 'Customize visible columns.',
     },
-  ]) }} />
+  ]}
+/>
 
 ### Events
 
@@ -59,7 +63,8 @@ Component to render a formated list of terminals for the requested account.
 
 ## Theming & Layout
 
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'font-family',
       description: 'Controls the font family for the component.',
@@ -80,14 +85,5 @@ Component to render a formated list of terminals for the requested account.
       name: 'button-disabled',
       description: 'Disabled button styles.',
     },
-  ]) }} />
-
-## Static examples
-
-### Open device detail
-
-<pre><code className="language-js">{`const terminals = document.querySelector('justifi-terminals-list');
-
-terminals.addEventListener('click-event', ({ detail }) => {
-router.push('/terminals/' + detail.terminal_id);
-});`}</code></pre>
+  ]}
+/>

package/docs/modular-checkout/index.mdx

@@ -10,10 +10,6 @@ the journey:
 
 - [Introduction](./introduction/index) for architecture, props, events, and
   theming guidance.
-- [Docs](./docs/index) when you are authoring or updating technical reference
-  material for new sub-components.
-- [Example](./example/index) for a single-file snippet that you can paste into
-  a sandbox or CMS.
 - [Complete Examples](./complete-examples/index) for Storybook layouts that
   demonstrate multi-step funnels.
 - [Sub-components](./sub-components/index) for deep dives on each child element
@@ -22,4 +18,3 @@ the journey:
 > Ship custom layouts fast: combine `[sub-components](./sub-components/index)`
 > with the patterns in `[Example](./example/index)` so you can validate UX
 > decisions before plumbing real data.
-

package/docs/modular-checkout/introduction/index.mdx

@@ -6,7 +6,7 @@ description: Layout manager that composes payment, summary, and confirmation sub
 sidebar_position: 21
 ---
 
-import { PropsTable, PartsTable } from '../../helpers';
+import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
 
 ## Overview
 
@@ -14,18 +14,21 @@ The `justifi-modular-checkout` wrapper component serves as a container for check
 
 ## Usage
 
-<pre><code className="language-html">{`<justifi-modular-checkout
+<pre>
+  <code className="language-html">{`<justifi-modular-checkout
   account-id="acc_123"
   auth-token="wct_checkout"
   checkout-id="chk_456"
 >
   <justifi-modular-checkout-card-form slot="payment-methods" />
   <justifi-modular-checkout-summary slot="summary" />
-</justifi-modular-checkout>`}</code></pre>
+</justifi-modular-checkout>`}</code>
+</pre>
 
 ## Props, Events & Methods
 
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'account-id',
       type: 'string',
@@ -58,7 +61,8 @@ The `justifi-modular-checkout` wrapper component serves as a container for check
       defaultValue: 'en-US',
       description: 'Controls currency format + copy.',
     },
-  ]) }} />
+  ]}
+/>
 
 ### Events
 
@@ -75,7 +79,8 @@ The `justifi-modular-checkout` wrapper component serves as a container for check
 
 - Slots expose `::part(summary)` and `::part(payment-methods)` so you can adjust spacing for each region.
 
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'shell',
       description: 'Outer wrapper that surrounds the full modular checkout.',
@@ -89,12 +94,5 @@ The `justifi-modular-checkout` wrapper component serves as a container for check
       description: 'Order summary slot, typically on the right on desktop.',
     },
     { name: 'cta', description: 'Primary submit button container.' },
-  ]) }} />
-
-## Static examples
-
-### Programmatic submission
-
-<pre><code className="language-js">{`const modCheckout = document.querySelector('justifi-modular-checkout');
-
-document.querySelector('#submit-order').addEventListener('click', () => modCheckout.submit());`}</code></pre>
+  ]}
+/>

package/docs/modular-checkout/sub-components/apple-pay.mdx

@@ -5,8 +5,11 @@ description: Apple Pay rail for Modular Checkout that exposes wallet buttons and
 sidebar_position: 22
 ---
 
-import { PropsTable, PartsTable } from '../../helpers';
-import { getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+import {
+  PropsTable,
+  PartsTable,
+  getWebcomponentsVersion,
+} from '@justifi/webcomponents/docs/helpers';
 
 ## Overview
 
@@ -23,13 +26,19 @@ Renders an Apple Pay button for eligible devices and orchestrates the Apple Pay
   <title>justifi-apple-pay</title>
 
   <script type="module" src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.esm.js"></script>
-  <script nomodule src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.js"></script>
-  <style>
-      /** These are the available parts for styling the component. */
-      ::part(button) {
-        // button styles
-      }
-    </style>
+
+<script
+  nomodule
+  src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.js"
+></script>
+
+<style>
+  /** These are the available parts for styling the component. */ ::part(button){' '}
+  {
+    // button styles
+  }
+</style>
+
 </head>
 
 <body>
@@ -45,12 +54,13 @@ Renders an Apple Pay button for eligible devices and orchestrates the Apple Pay
 
 ## Props, Events & Methods
 
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'button-style',
       type: '"black" | "white" | "white-outline"',
       defaultValue: 'black',
-      description: 'Matches Apple\'s Human Interface Guidelines.',
+      description: "Matches Apple's Human Interface Guidelines.",
     },
     {
       name: 'button-type',
@@ -65,7 +75,8 @@ Renders an Apple Pay button for eligible devices and orchestrates the Apple Pay
       description:
         'Controls the region on the underlying `ApplePaySession` request.',
     },
-  ]) }} />
+  ]}
+/>
 
 ### Events
 
@@ -80,18 +91,12 @@ Renders an Apple Pay button for eligible devices and orchestrates the Apple Pay
 
 - Styling is intentionally limited to keep Apple compliance.
 
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'button',
       description:
         'Wrapper around the native Apple Pay button for margin/padding tweaks.',
     },
-  ]) }} />
-
-## Static examples
-
-### Custom launch button
-
-<pre><code className="language-js">{`const applePay = document.querySelector('justifi-apple-pay');
-
-document.querySelector('#apple-pay-launch').onclick = () => applePay.begin();`}</code></pre>
+  ]}
+/>

package/docs/modular-checkout/sub-components/bank-account-form.mdx

@@ -5,8 +5,11 @@ description: Bank account rail for Modular Checkout that tokenizes ACH details w
 sidebar_position: 28
 ---
 
-import { PropsTable, PartsTable } from '../../helpers';
-import { getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+import {
+  PropsTable,
+  PartsTable,
+  getWebcomponentsVersion,
+} from '@justifi/webcomponents/docs/helpers';
 
 ## Overview
 
@@ -31,44 +34,46 @@ This component exposes **no public methods or properties** and is not intended f
   <title>justifi-bank-account-form</title>
 
   <script type="module" src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.esm.js"></script>
-  <script nomodule src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.js"></script>
-  <style>
-      /** These are the available parts for styling the component. */
-      ::part(skeleton) {
-        // skeleton styles
-      }
-        
-      ::part(label) {
-        // label styles
-      }
-
-      ::part(input-invalid-and-focused) {
-        // input invalid and focused styles
-      }
-
-      ::part(input-invalid) {
-        // input invalid styles
-      }
-
-      ::part(input-focused) {
-        // input focused styles
-      }
-
-      ::part(input) {
-        // input styles
-      }
-    </style>
+
+<script
+  nomodule
+  src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.js"
+></script>
+
+<style>
+  /** These are the available parts for styling the component. */
+  ::part(skeleton){' '}
+  {
+    // skeleton styles
+  }
+  ::part(label){' '}
+  {
+    // label styles
+  }
+  ::part(input-invalid-and-focused){' '}
+  {
+    // input invalid and focused styles
+  }
+  ::part(input-invalid){' '}
+  {
+    // input invalid styles
+  }
+  ::part(input-focused){' '}
+  {
+    // input focused styles
+  }
+  ::part(input){' '}
+  {
+    // input styles
+  }
+</style>
+
 </head>
 
 <body>
-  <justifi-modular-checkout
-    auth-token="authToken"
-    checkout-id="ch_123"  
-  >
+  <justifi-modular-checkout auth-token="authToken" checkout-id="ch_123">
     <justifi-bank-account-form />
-    <button id="submit-button">
-      Submit Checkout
-    </button>
+    <button id="submit-button">Submit Checkout</button>
   </justifi-modular-checkout>
 </body>
 
@@ -90,16 +95,18 @@ This component exposes **no public methods or properties** and is not intended f
     });
   })();
 </script>
+
 </html>`}</code></pre>
 
 ## Props, Events & Methods
 
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'payment-method-group-id',
       type: 'string',
       description:
-        'Match the parent checkout\'s group when you want to toggle which rails appear.',
+        "Match the parent checkout's group when you want to toggle which rails appear.",
     },
     {
       name: 'show-account-type',
@@ -113,7 +120,8 @@ This component exposes **no public methods or properties** and is not intended f
       defaultValue: 'en-US',
       description: 'Controls labels + validation messages.',
     },
-  ]) }} />
+  ]}
+/>
 
 ### Events
 
@@ -125,7 +133,8 @@ This component exposes **no public methods or properties** and is not intended f
 
 ## Theming & Layout
 
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'skeleton',
       description: 'Skeleton loading state styles.',
@@ -150,14 +159,5 @@ This component exposes **no public methods or properties** and is not intended f
       name: 'input',
       description: 'Input field styles.',
     },
-  ]) }} />
-
-## Static examples
-
-### Auto-focus fields
-
-Tie custom UI to the public `focus()` method.
-
-<pre><code className="language-js">{`const bankForm = document.querySelector('justifi-bank-account-form');
-
-document.querySelector('#focus-bank').onclick = () => bankForm.focus();`}</code></pre>
+  ]}
+/>

package/docs/modular-checkout/sub-components/card-form.mdx

@@ -5,8 +5,11 @@ description: Card entry sub-component for Modular Checkout layouts with shared v
 sidebar_position: 2
 ---
 
-import { PropsTable, PartsTable } from '../../helpers';
-import { getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+import {
+  PropsTable,
+  PartsTable,
+  getWebcomponentsVersion,
+} from '@justifi/webcomponents/docs/helpers';
 
 ## Overview
 
@@ -31,44 +34,46 @@ This component exposes **no public methods or properties** and is not intended f
   <title>justifi-card-form</title>
 
   <script type="module" src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.esm.js"></script>
-  <script nomodule src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.js"></script>
-  <style>
-      /** These are the available parts for styling the component. */
-      ::part(skeleton) {
-        // skeleton styles
-      }
-        
-      ::part(label) {
-        // label styles
-      }
-
-      ::part(input-invalid-and-focused) {
-        // input invalid and focused styles
-      }
-
-      ::part(input-invalid) {
-        // input invalid styles
-      }
-
-      ::part(input-focused) {
-        // input focused styles
-      }
-
-      ::part(input) {
-        // input styles
-      }
-    </style>
+
+<script
+  nomodule
+  src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.js"
+></script>
+
+<style>
+  /** These are the available parts for styling the component. */
+  ::part(skeleton){' '}
+  {
+    // skeleton styles
+  }
+  ::part(label){' '}
+  {
+    // label styles
+  }
+  ::part(input-invalid-and-focused){' '}
+  {
+    // input invalid and focused styles
+  }
+  ::part(input-invalid){' '}
+  {
+    // input invalid styles
+  }
+  ::part(input-focused){' '}
+  {
+    // input focused styles
+  }
+  ::part(input){' '}
+  {
+    // input styles
+  }
+</style>
+
 </head>
 
 <body>
-  <justifi-modular-checkout
-    auth-token="authToken"
-    checkout-id="ch_123"  
-  >
+  <justifi-modular-checkout auth-token="authToken" checkout-id="ch_123">
     <justifi-card-form />
-    <button id="submit-button">
-      Submit Checkout
-    </button>
+    <button id="submit-button">Submit Checkout</button>
   </justifi-modular-checkout>
 </body>
 
@@ -90,11 +95,13 @@ This component exposes **no public methods or properties** and is not intended f
     });
   })();
 </script>
+
 </html>`}</code></pre>
 
 ## Props, Events & Methods
 
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'payment-method-group-id',
       type: 'string',
@@ -120,7 +127,8 @@ This component exposes **no public methods or properties** and is not intended f
       defaultValue: 'en-US',
       description: 'Overrides localized labels if needed.',
     },
-  ]) }} />
+  ]}
+/>
 
 ### Events
 
@@ -134,7 +142,8 @@ All submit and error events bubble through the parent `<justifi-modular-checkout
 
 - When embedded inside cards, wrap the host element in your layout container and scope typography overrides via the parts listed below.
 
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'skeleton',
       description: 'Skeleton loading state styles.',
@@ -159,20 +168,7 @@ All submit and error events bubble through the parent `<justifi-modular-checkout
       name: 'input',
       description: 'Input field styles.',
     },
-  ]) }} />
+  ]}
+/>
 
 - Use the `card-form` CSS part (`::part(card-form)`) to apply box shadows or wrapper padding.
-
-## Static examples
-
-### Card form with disabled save option
-
-<pre><code className="language-html">{`<justifi-modular-checkout-card-form
-  show-save-payment-method="false"
-/>`}</code></pre>
-
-### Force brand icons off
-
-<pre><code className="language-html">{`<justifi-modular-checkout-card-form
-  card-brand-icons="none"
-/>`}</code></pre>