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

package/docs/modular-checkout/sub-components/payment-method-options.mdx

@@ -5,7 +5,7 @@ description: Render-only component that lists available payment rails and lets c
 sidebar_position: 25
 ---
 
-import { PropsTable, PartsTable } from '../../helpers';
+import { PropsTable, PartsTable } from '@justifi/webcomponents/docs/helpers';
 
 ## Overview
 
@@ -13,18 +13,21 @@ import { PropsTable, PartsTable } from '../../helpers';
 
 ## Usage
 
-<pre><code className="language-html">{`<justifi-payment-method-options
+<pre>
+  <code className="language-html">{`<justifi-payment-method-options
   selected="card"
   options='[
     {"id":"card","label":"Credit or debit card"},
     {"id":"ach","label":"Bank account"},
     {"id":"wallet","label":"Digital wallet"}
   ]'
-></justifi-payment-method-options>`}</code></pre>
+></justifi-payment-method-options>`}</code>
+</pre>
 
 ## Props, Events & Methods
 
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'options',
       type: 'Array<{ id: string; label: string; description?: string; icon?: string }>',
@@ -49,7 +52,8 @@ import { PropsTable, PartsTable } from '../../helpers';
       description:
         'Prevent users from switching rails (e.g., while submitting).',
     },
-  ]) }} />
+  ]}
+/>
 
 ### Events
 
@@ -61,7 +65,8 @@ import { PropsTable, PartsTable } from '../../helpers';
 
 ## Theming & Layout
 
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'option',
       description: 'Individual rail container (card/tab/list row).',
@@ -74,12 +79,5 @@ import { PropsTable, PartsTable } from '../../helpers';
       name: 'option-description',
       description: 'Secondary text area for additional guidance.',
     },
-  ]) }} />
-
-## Static examples
-
-### Programmatic selection
-
-<pre><code className="language-js">{`const options = document.querySelector('justifi-payment-method-options');
-
-document.querySelector('#select-ach').onclick = () => options.select('ach');`}</code></pre>
+  ]}
+/>

package/docs/modular-checkout/sub-components/plaid-payment-method.mdx

@@ -5,8 +5,11 @@ description: Plaid-powered ACH rail for Modular Checkout with hosted Link flow.
 sidebar_position: 23
 ---
 
-import { PropsTable, PartsTable } from '../../helpers';
-import { getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+import {
+  PropsTable,
+  PartsTable,
+  getWebcomponentsVersion,
+} from '@justifi/webcomponents/docs/helpers';
 
 ## Overview
 
@@ -29,48 +32,28 @@ It exposes no public properties for configuration, but does emit Plaid-specific
   <title>justifi-plaid-payment-method</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(text) {
-        /* text styles */
-      }
-
-      ::part(text-danger) {
-        /* text danger styles */
-      }
-      
-      ::part(label) {
-        /* label styles */
-      }
-
-      ::part(input-radio) {
-        /* input radio styles */
-      }
-
-      ::part(input-radio-focused) {
-        /* input radio focused styles */
-      }
-
-      ::part(input-radio-checked) {
-        /* input radio checked styles */
-      }
-
-      ::part(input-radio-checked-focused) {
-        /* input radio checked focused styles */
-      }
-
-      ::part(input-radio-invalid) {
-        /* input radio invalid 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(text){' '}
+  {/* text styles */}
+  ::part(text-danger) {/* text danger styles */}
+  ::part(label) {/* label styles */}
+  ::part(input-radio) {/* input radio styles */}
+  ::part(input-radio-focused) {/* input radio focused styles */}
+  ::part(input-radio-checked) {/* input radio checked styles */}
+  ::part(input-radio-checked-focused) {/* input radio checked focused styles */}
+  ::part(input-radio-invalid) {/* input radio invalid 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-plaid-payment-method />
   </justifi-modular-checkout>
 </body>
@@ -88,11 +71,13 @@ It exposes no public properties for configuration, but does emit Plaid-specific
     });
   })();
 </script>
+
 </html>`}</code></pre>
 
 ## Props, Events & Methods
 
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'link-token',
       type: 'string',
@@ -112,7 +97,8 @@ It exposes no public properties for configuration, but does emit Plaid-specific
       defaultValue: 'dark',
       description: 'Controls Plaid Link UI theme.',
     },
-  ]) }} />
+  ]}
+/>
 
 ### Events
 
@@ -130,7 +116,8 @@ It exposes no public properties for configuration, but does emit Plaid-specific
 - Styling is limited to the wrapper since Plaid controls the Link modal.
 - Provide fallback instructions for devices where Plaid is unavailable.
 
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'text',
       description: 'Text styles.',
@@ -163,14 +150,5 @@ It exposes no public properties for configuration, but does emit Plaid-specific
       name: 'input-radio-invalid',
       description: 'Radio input styles when invalid.',
     },
-  ]) }} />
-
-## Static examples
-
-### Listening for success
-
-<pre><code className="language-js">{`const plaidRail = document.querySelector('justifi-plaid-payment-method');
-
-plaidRail.addEventListener('plaid-success', ({ detail }) => {
-console.log('Bank linked: ', detail.institution.name);
-});`}</code></pre>
+  ]}
+/>

package/docs/modular-checkout/sub-components/saved-payment-methods.mdx

@@ -5,8 +5,11 @@ description: Saved payment selector for Modular Checkout that handles defaulting
 sidebar_position: 26
 ---
 
-import { PropsTable, PartsTable } from '../../helpers';
-import { getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+import {
+  PropsTable,
+  PartsTable,
+  getWebcomponentsVersion,
+} from '@justifi/webcomponents/docs/helpers';
 
 ## Overview
 
@@ -31,48 +34,51 @@ This component exposes **no public methods or properties** and is not intended f
   <title>justifi-saved-payment-methods</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(text) {
-        // text styles
-      }
-
-      ::part(text-danger) {
-        // text danger styles
-      }
-      
-      ::part(label) { 
-        // label styles
-      }
-
-      ::part(input-radio) {
-        // input radio styles
-      }
-
-      ::part(input-radio-focused) {
-        // input radio focused styles
-      }
-
-      ::part(input-radio-checked) {
-        // input radio checked styles
-      }
-
-      ::part(input-radio-checked-focused) {
-        // input radio checked focused styles
-      }
-
-      ::part(input-radio-invalid) {
-        // input radio invalid 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(text){' '}
+  {
+    // text styles
+  }
+  ::part(text-danger){' '}
+  {
+    // text danger styles
+  }
+  ::part(label){' '}
+  {
+    // label styles
+  }
+  ::part(input-radio){' '}
+  {
+    // input radio styles
+  }
+  ::part(input-radio-focused){' '}
+  {
+    // input radio focused styles
+  }
+  ::part(input-radio-checked){' '}
+  {
+    // input radio checked styles
+  }
+  ::part(input-radio-checked-focused){' '}
+  {
+    // input radio checked focused styles
+  }
+  ::part(input-radio-invalid){' '}
+  {
+    // input radio invalid 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-saved-payment-methods />
   </justifi-modular-checkout>
 </body>
@@ -95,11 +101,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: 'customer-id',
       type: 'string',
@@ -119,7 +127,8 @@ This component exposes **no public methods or properties** and is not intended f
       description:
         'Displays a control that reveals the card/bank forms when no method is selected.',
     },
-  ]) }} />
+  ]}
+/>
 
 ### Events
 
@@ -132,7 +141,8 @@ This component exposes **no public methods or properties** and is not intended f
 
 ## Theming & Layout
 
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'text',
       description: 'Text styles.',
@@ -165,14 +175,5 @@ This component exposes **no public methods or properties** and is not intended f
       name: 'input-radio-invalid',
       description: 'Radio input styles when invalid.',
     },
-  ]) }} />
-
-## Static examples
-
-### Fallback flow
-
-<pre><code className="language-js">{`const saved = document.querySelector('justifi-saved-payment-methods');
-
-saved.addEventListener('selection-changed', ({ detail }) => {
-if (!detail.payment_method_token) saved.clearSelection();
-});`}</code></pre>
+  ]}
+/>

package/docs/modular-checkout/sub-components/season-interruption-insurance.mdx

@@ -5,8 +5,11 @@ description: Optional insurance add-on rail that pairs with Modular Checkout sum
 sidebar_position: 25
 ---
 
-import { PropsTable, PartsTable } from '../../helpers';
-import { getWebcomponentsVersion } from '@justifi/webcomponents/docs/helpers';
+import {
+  PropsTable,
+  PartsTable,
+  getWebcomponentsVersion,
+} from '@justifi/webcomponents/docs/helpers';
 
 ## Overview
 
@@ -23,7 +26,12 @@ Component to render a formated list of season interruption insurance for the req
   <title>justifi-season-interruption-insurance</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>
+
+<script
+  nomodule
+  src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@${getWebcomponentsVersion()}/dist/webcomponents/webcomponents.js"
+></script>
+
   <style>
       ::part(font-family) { 
         font-family: georgia;   
@@ -60,10 +68,11 @@ Component to render a formated list of season interruption insurance for the req
         box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25);
       }
     </style>
+
 </head>
 
 <body>
-  <justifi-season-interruption-insurance 
+  <justifi-season-interruption-insurance
     auth-token="your-auth-token"
     checkout-id="your-checkout-id"
     primary-identity-first-name="John"
@@ -80,7 +89,8 @@ Component to render a formated list of season interruption insurance for the req
 
 ## Props, Events & Methods
 
-<div dangerouslySetInnerHTML={{ __html: PropsTable([
+<PropsTable
+  rows={[
     {
       name: 'auth-token',
       type: 'string',
@@ -156,7 +166,8 @@ Component to render a formated list of season interruption insurance for the req
       type: 'string',
       description: 'Last name of the covered person.',
     },
-  ]) }} />
+  ]}
+/>
 
 ### Events
 
@@ -172,7 +183,8 @@ Component to render a formated list of season interruption insurance for the req
 - The host inherits the same typography tokens as other Modular Checkout rails via `StyledHost`, so it naturally matches surrounding content.
 - Use the exposed parts to restyle copy or validation messaging without affecting the radios themselves.
 
-<div dangerouslySetInnerHTML={{ __html: PartsTable([
+<PartsTable
+  parts={[
     {
       name: 'font-family',
       description: 'Controls the font family for the component.',
@@ -201,20 +213,5 @@ Component to render a formated list of season interruption insurance for the req
       name: 'input-radio-checked-focused',
       description: 'Radio input styles when checked and focused.',
     },
-  ]) }} />
-
-## Static examples
-
-### Validate selection before submission
-
-<pre><code className="language-js">{`const insurance = document.querySelector('justifi-season-interruption-insurance');
-
-const { isValid } = await insurance.validate();
-
-if (!isValid) {
-// surface inline validation by leaving the radio group untouched
-return;
-}
-
-// continue to submit the checkout
-`}</code></pre>
+  ]}
+/>