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

package/docs/merchant-tools/gross-payments-chart/index.mdx

@@ -15,16 +15,19 @@ Component to render chart displaying last 30 days of gross payment data.
 
 ### Chart monthly volume
 
-<pre><code className="language-html">{`<justifi-gross-payment-chart
+<pre>
+  <code className="language-html">{`<justifi-gross-payment-chart
   account-id="acc_123"
   auth-token="wct_reporting"
   interval="month"
   range="12m"
-/>`}</code></pre>
+/>`}</code>
+</pre>
 
 ## Props, Events & Methods
 
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'account-id',
       type: 'string',
@@ -49,7 +52,8 @@ Component to render chart displaying last 30 days of gross payment data.
       defaultValue: '30d',
       description: 'Total timeframe (e.g., `7d`, `3m`, `12m`).',
     },
-  ]) }} />
+  ]}
+/>
 
 ### Events
 
@@ -61,21 +65,15 @@ Component to render chart displaying last 30 days of gross payment data.
 
 ## Theming & Layout
 
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
-    { name: 'chart', description: 'SVG/Canvas container for the line chart.' },
+<PartsTable
+  parts={[
+    {
+      name: 'chart',
+      description: 'SVG/Canvas container for the line chart.',
+    },
     {
       name: 'tooltip',
       description: 'Floating tooltip bubble when hovering/focusing a point.',
     },
-  ]) }} />
-
-## Static examples
-
-### Toggle ranges
-
-<pre><code className="language-js">{`const chart = document.querySelector('justifi-gross-payment-chart');
-
-document.querySelector('#range').addEventListener('change', (event) => {
-chart.setAttribute('range', event.target.value);
-chart.refresh();
-});`}</code></pre>
+  ]}
+/>

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

@@ -13,15 +13,18 @@ Component to render a form for terminal order requests.
 
 ## Usage
 
-<pre><code className="language-html">{`<justifi-order-terminals
+<pre>
+  <code className="language-html">{`<justifi-order-terminals
   account-id="acc_123"
   auth-token="wct_terminals"
   shipping-contact="contact_456"
-/>`}</code></pre>
+/>`}</code>
+</pre>
 
 ## Props, Events & Methods
 
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'account-id',
       type: 'string',
@@ -45,7 +48,8 @@ Component to render a form for terminal order requests.
       type: 'string',
       description: 'Comma-separated SKU list to limit which devices appear.',
     },
-  ]) }} />
+  ]}
+/>
 
 ### Events
 
@@ -58,7 +62,8 @@ Component to render a form for terminal order requests.
 
 ## Theming & Layout
 
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'font-family',
       description: 'Controls the font family for the component.',
@@ -71,14 +76,5 @@ Component to render a form for terminal order requests.
       name: 'background-color',
       description: 'Controls the background color.',
     },
-  ]) }} />
-
-## Static examples
-
-### Restrict SKUs
-
-<pre><code className="language-html">{`<justifi-order-terminals
-  account-id="acc_123"
-  auth-token="wct_terminals"
-  allowed-products="WISEPAD_3,WISEPOS_E"
-/>`}</code></pre>
+  ]}
+/>

package/docs/merchant-tools/payment-details/index.mdx

@@ -5,7 +5,11 @@ description: Detailed view for a single payment, including customer data, timeli
 sidebar_position: 30
 ---
 
-import { PropsTable, PartsTable, getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+import {
+  PropsTable,
+  PartsTable,
+  getWebcomponentsVersion,
+} from '@justifi/webcomponents/docs/helpers';
 
 ## Overview
 
@@ -66,7 +70,8 @@ Component to display detailed information about a specific payment.
 
 ## Props, Events & Methods
 
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'account-id',
       type: 'string',
@@ -91,7 +96,8 @@ Component to display detailed information about a specific payment.
       defaultValue: 'true',
       description: 'Hide when you only need a read-only audit surface.',
     },
-  ]) }} />
+  ]}
+/>
 
 ### Events
 
@@ -104,7 +110,8 @@ Component to display detailed information about a specific payment.
 
 ## Theming & Layout
 
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'font-family',
       description: 'Controls the font family for the component.',
@@ -117,14 +124,5 @@ Component to display detailed information about a specific payment.
       name: 'background-color',
       description: 'Controls the background color.',
     },
-  ]) }} />
-
-## Static examples
-
-### Hook into refund events
-
-<pre><code className="language-js">{`const details = document.querySelector('justifi-payment-details');
-
-details.addEventListener('refund-requested', ({ detail }) => {
-console.log('Starting refund flow for payment', detail.payment_id);
-});`}</code></pre>
+  ]}
+/>

package/docs/merchant-tools/payment-transactions-list/index.mdx

@@ -13,15 +13,18 @@ Component to display a list of payment transactions for a specific payment.
 
 ## Usage
 
-<pre><code className="language-html">{`<justifi-payment-transactions-list
+<pre>
+  <code className="language-html">{`<justifi-payment-transactions-list
   account-id="acc_123"
   auth-token="wct_reporting"
   filters='{"payment_id":"pay_456"}'
-/>`}</code></pre>
+/>`}</code>
+</pre>
 
 ## Props, Events & Methods
 
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'account-id',
       type: 'string',
@@ -46,7 +49,8 @@ Component to display a list of payment transactions for a specific payment.
       defaultValue: 'false',
       description: 'Adds export controls when true.',
     },
-  ]) }} />
+  ]}
+/>
 
 ### Events
 
@@ -59,7 +63,8 @@ Component to display a list of payment transactions for a specific payment.
 
 ## 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 display a list of payment transactions for a specific payment.
       name: 'background-color',
       description: 'Controls the background color.',
     },
-  ]) }} />
-
-## Static examples
-
-### Listening for filter changes
-
-<pre><code className="language-js">{`const ledger = document.querySelector('justifi-payment-transactions-list');
-
-ledger.addEventListener('filter-changed', (event) => {
-console.log('Filters now', event.detail);
-});`}</code></pre>
+  ]}
+/>

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

@@ -13,7 +13,8 @@ Component to render a formated list of payments for the requested account.
 
 ## Usage
 
-<pre><code className="language-html">{`<div class="payments-report">
+<pre>
+  <code className="language-html">{`<div class="payments-report">
   <justifi-filters
     account-id="acc_123"
     auth-token="wct_reporting"
@@ -24,11 +25,13 @@ Component to render a formated list of payments for the requested account.
     auth-token="wct_reporting"
     columns="created_at,customer_name,payment_amount,status"
   ></justifi-payments-list>
-</div>`}</code></pre>
+</div>`}</code>
+</pre>
 
 ## Props, Events & Methods
 
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'account-id',
       type: 'string',
@@ -61,7 +64,8 @@ Component to render a formated list of payments for the requested account.
       defaultValue: 'false',
       description: 'Adds an export button that streams CSV data when true.',
     },
-  ]) }} />
+  ]}
+/>
 
 ### Events
 
@@ -75,7 +79,8 @@ Component to render a formated list of payments for the requested account.
 
 ## Theming & Layout
 
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'font-family',
       description: 'Controls the font family for the component.',
@@ -96,16 +101,5 @@ Component to render a formated list of payments for the requested account.
       name: 'button-disabled',
       description: 'Disabled button styles.',
     },
-  ]) }} />
-
-## Static examples
-
-### Reacting to row clicks
-
-<pre><code className="language-js">{`const list = document.querySelector('justifi-payments-list');
-
-list.addEventListener('click-event', (event) => {
-if (event.detail.name === 'row') {
-router.push('/payments/' + event.detail.payment_id);
-}
-});`}</code></pre>
+  ]}
+/>

package/docs/merchant-tools/payout-details/index.mdx

@@ -13,43 +13,43 @@ Component to display detailed information about a specific payout.
 
 ## Usage
 
-<pre><code className="language-html">{`<justifi-payout-details
+<pre>
+  <code className="language-html">{`<justifi-payout-details
   account-id="acc_123"
   auth-token="wct_reporting"
   payout-id="po_456"
-/>`}</code></pre>
+/>`}</code>
+</pre>
 
 ## Props, Events & Methods
 
-<div
-  dangerouslySetInnerHTML={{
-    __html: PropsTable([
-      {
-        name: 'account-id',
-        type: 'string',
-        required: true,
-        description: 'Scope the payout to a platform or merchant.',
-      },
-      {
-        name: 'auth-token',
-        type: 'string',
-        required: true,
-        description: 'Token with `read:payouts` scope.',
-      },
-      {
-        name: 'payout-id',
-        type: 'string',
-        required: true,
-        description: 'Identifier for the payout you want to view.',
-      },
-      {
-        name: 'show-ledger',
-        type: 'boolean',
-        defaultValue: 'true',
-        description: 'Hide the ledger table when you only need summary data.',
-      },
-    ]),
-  }}
+<PropsTable
+  rows={[
+    {
+      name: 'account-id',
+      type: 'string',
+      required: true,
+      description: 'Scope the payout to a platform or merchant.',
+    },
+    {
+      name: 'auth-token',
+      type: 'string',
+      required: true,
+      description: 'Token with `read:payouts` scope.',
+    },
+    {
+      name: 'payout-id',
+      type: 'string',
+      required: true,
+      description: 'Identifier for the payout you want to view.',
+    },
+    {
+      name: 'show-ledger',
+      type: 'boolean',
+      defaultValue: 'true',
+      description: 'Hide the ledger table when you only need summary data.',
+    },
+  ]}
 />
 
 ### Events
@@ -62,29 +62,19 @@ Component to display detailed information about a specific payout.
 
 ## Theming & Layout
 
-<div
-  dangerouslySetInnerHTML={{
-    __html: PartsTable([
-      {
-        name: 'font-family',
-        description: 'Controls the font family for the component.',
-      },
-      {
-        name: 'color',
-        description: 'Controls the text color.',
-      },
-      {
-        name: 'background-color',
-        description: 'Controls the background color.',
-      },
-    ]),
-  }}
+<PartsTable
+  parts={[
+    {
+      name: 'font-family',
+      description: 'Controls the font family for the component.',
+    },
+    {
+      name: 'color',
+      description: 'Controls the text color.',
+    },
+    {
+      name: 'background-color',
+      description: 'Controls the background color.',
+    },
+  ]}
 />
-
-## Static examples
-
-### Auto-refresh
-
-<pre><code className="language-js">{`const payout = document.querySelector('justifi-payout-details');
-
-setInterval(() => payout.refresh(), 60_000);`}</code></pre>

package/docs/merchant-tools/payout-transactions-list/index.mdx

@@ -13,15 +13,18 @@ Component to display a list of payout transactions for a specific payout.
 
 ## Usage
 
-<pre><code className="language-html">{`<justifi-payout-transactions-list
+<pre>
+  <code className="language-html">{`<justifi-payout-transactions-list
   account-id="acc_123"
   auth-token="wct_reporting"
   payout-id="po_456"
-/>`}</code></pre>
+/>`}</code>
+</pre>
 
 ## Props, Events & Methods
 
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'account-id',
       type: 'string',
@@ -46,7 +49,8 @@ Component to display a list of payout transactions for a specific payout.
       defaultValue: 'type,amount,source,status',
       description: 'Column ordering and selection.',
     },
-  ]) }} />
+  ]}
+/>
 
 ### Events
 
@@ -58,7 +62,8 @@ Component to display a list of payout transactions for a specific payout.
 
 ## Theming & Layout
 
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'font-family',
       description: 'Controls the font family for the component.',
@@ -71,14 +76,5 @@ Component to display a list of payout transactions for a specific payout.
       name: 'background-color',
       description: 'Controls the background color.',
     },
-  ]) }} />
-
-## Static examples
-
-### Open payment details
-
-<pre><code className="language-js">{`const payoutLedger = document.querySelector('justifi-payout-transactions-list');
-
-payoutLedger.addEventListener('click-event', ({ detail }) => {
-router.push('/payments/' + detail.transaction_id);
-});`}</code></pre>
+  ]}
+/>

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

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

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

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