@justifi/webcomponents 4.6.4 → 4.7.0-rc.1

package/dist/collection/components/refund-form/refund-form.js

@@ -0,0 +1,229 @@
+import { Host, h, } from "@stencil/core";
+import RefundFormSchema from "./refund-form-schema";
+import { Api } from "../../api";
+import { FormController } from "../form/form";
+import { config } from "../../../config";
+export class RefundForm {
+  constructor() {
+    this.authToken = undefined;
+    this.paymentId = undefined;
+    this.amount = 0;
+    this.submitButtonText = 'Submit';
+    this.withButton = undefined;
+    this.refundInfoText = undefined;
+    this.errors = {};
+    this.isSubmitting = false;
+  }
+  componentWillLoad() {
+    this.formController = new FormController(RefundFormSchema);
+    this.formController.setInitialValues({
+      amount: this.amount,
+      message: '',
+    });
+    this.initializeApi();
+  }
+  componentDidLoad() {
+    this.formController.errors.subscribe(errors => {
+      this.errors = Object.assign({}, errors);
+    });
+  }
+  /**
+   * Handles the form submission.
+   * Prevents the default form action, validates the form, and emits the 'submitted' event.
+   */
+  async handleSubmit(event) {
+    event.preventDefault();
+    this.formController.validateAndSubmit(this.submitRefund.bind(this), {
+      amount: this.amount,
+    });
+  }
+  /**
+   * Submits the refund request to the API.
+   */
+  async submitRefund() {
+    this.isSubmitting = true;
+    const refundFields = this.formController.values.getValue();
+    try {
+      await this.api.post(`payments/${this.paymentId}/refunds`, refundFields);
+      this.submitted.emit(refundFields);
+    }
+    catch (error) {
+      console.error('Error submitting refund:', error);
+      this.submitted.emit(error);
+    }
+    finally {
+      this.isSubmitting = false;
+    }
+  }
+  /**
+   * Handles input changes, updating the refundFields state.
+   */
+  handleInput(field, value) {
+    this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [field]: value }));
+  }
+  /**
+   * Initializes the API with the given authentication token.
+   * Logs a warning if the auth token is missing.
+   */
+  initializeApi() {
+    if (!this.authToken) {
+      console.warn('Warning: Missing auth-token.');
+    }
+    this.api = Api(this.authToken, config.proxyApiOrigin);
+  }
+  render() {
+    var _a;
+    return (h(Host, null, h("h1", null, "Refund"), this.refundInfoText && (h("div", { class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { class: "m-0", innerHTML: this.refundInfoText }))), h("form", { onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { class: "form-group" }, h("form-control-monetary", { name: "amount", label: "Refund Amount", defaultValue: ((_a = this.amount) === null || _a === void 0 ? void 0 : _a.toString()) || '', inputHandler: (name, value) => this.handleInput(name, value), error: this.errors.amount })), h("div", { class: "form-group" }, h("form-control-text", { name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), error: this.errors.notes })), this.withButton && (h("div", { class: "form-group d-flex flex-row-reverse" }, h("button", { type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
+  }
+  static get is() { return "justifi-refund-form"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["refund-form.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["refund-form.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "authToken": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Authentication token required to authorize the refund transaction."
+        },
+        "attribute": "auth-token",
+        "reflect": false
+      },
+      "paymentId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The unique identifier for the payment to be refunded."
+        },
+        "attribute": "payment-id",
+        "reflect": false
+      },
+      "amount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The amount of the payment to be refunded."
+        },
+        "attribute": "amount",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "submitButtonText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Custom text for the submit button. Defaults to 'Submit'."
+        },
+        "attribute": "submit-button-text",
+        "reflect": false,
+        "defaultValue": "'Submit'"
+      },
+      "withButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Flag to control the visibility of the submit button."
+        },
+        "attribute": "with-button",
+        "reflect": false
+      },
+      "refundInfoText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Optional information text displayed above the form."
+        },
+        "attribute": "refund-info-text",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "errors": {},
+      "isSubmitting": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "submitted",
+        "name": "submitted",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event emitted when the refund form is successfully submitted.\nThe submitted refund fields are passed as the event detail."
+        },
+        "complexType": {
+          "original": "RefundFormFields",
+          "resolved": "RefundFormFields",
+          "references": {
+            "RefundFormFields": {
+              "location": "import",
+              "path": "./refund-form-schema",
+              "id": "src/components/refund-form/refund-form-schema.ts::RefundFormFields"
+            }
+          }
+        }
+      }];
+  }
+}
+//# sourceMappingURL=refund-form.js.map

package/dist/collection/components/refund-form/refund-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"refund-form.js","sourceRoot":"","sources":["../../../../src/components/refund-form/refund-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,KAAK,EACL,KAAK,EAEL,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,gBAAsC,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAQzC,MAAM,OAAO,UAAU;;;;kBAcK,CAAC;4BAKS,QAAQ;;;kBAYrB,EAAE;wBACQ,KAAK;;EAWtC,iBAAiB;IACf,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAC3D,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC;MACnC,MAAM,EAAE,IAAI,CAAC,MAAM;MACnB,OAAO,EAAE,EAAE;KACZ,CAAC,CAAC;IACH,IAAI,CAAC,aAAa,EAAE,CAAC;EACvB,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE;MAC5C,IAAI,CAAC,MAAM,qBAAQ,MAAM,CAAE,CAAC;IAC9B,CAAC,CAAC,CAAC;EACL,CAAC;EAED;;;KAGG;EACH,KAAK,CAAC,YAAY,CAAC,KAAY;IAC7B,KAAK,CAAC,cAAc,EAAE,CAAC;IAEvB,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;MAClE,MAAM,EAAE,IAAI,CAAC,MAAM;KACpB,CAAC,CAAC;EACL,CAAC;EAED;;KAEG;EACK,KAAK,CAAC,YAAY;IACxB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;IACzB,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;IAE3D,IAAI;MACF,MAAM,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,SAAS,UAAU,EAAE,YAAY,CAAC,CAAC;MACxE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KACnC;IAAC,OAAO,KAAK,EAAE;MACd,OAAO,CAAC,KAAK,CAAC,0BAA0B,EAAE,KAAK,CAAC,CAAC;MACjD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC5B;YAAS;MACR,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;KAC3B;EACH,CAAC;EAED;;KAEG;EACK,WAAW,CAAC,KAA6B,EAAE,KAAU;IAC3D,IAAI,CAAC,cAAc,CAAC,SAAS,iCACxB,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,KACxC,CAAC,KAAK,CAAC,EAAE,KAAK,IACd,CAAC;EACL,CAAC;EAED;;;KAGG;EACK,aAAa;IACnB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACnB,OAAO,CAAC,IAAI,CAAC,8BAA8B,CAAC,CAAC;KAC9C;IACD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;EACxD,CAAC;EAED,MAAM;;IACJ,OAAO,CACL,EAAC,IAAI;MACH,uBAAe;MAEd,IAAI,CAAC,cAAc,IAAI,CACtB,WACE,KAAK,EAAC,4EAA4E,EAClF,IAAI,EAAC,OAAO;QAEZ,WACE,GAAG,EAAC,gBAAgB,EACpB,GAAG,EAAC,aAAa,EACjB,MAAM,EAAC,IAAI,EACX,KAAK,EAAC,IAAI,GACV;QAEF,SAAG,KAAK,EAAC,KAAK,EAAC,SAAS,EAAE,IAAI,CAAC,cAAc,GAAI,CAC7C,CACP;MAED,YAAM,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,KAAK,EAAC,cAAc;QAC7D,WAAK,KAAK,EAAC,YAAY;UACrB,6BACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,eAAe,EACrB,YAAY,EAAE,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,QAAQ,EAAE,KAAI,EAAE,EAC3C,YAAY,EAAE,CAAC,IAA4B,EAAE,KAAU,EAAE,EAAE,CACzD,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,EAE/B,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,GACF,CACrB;QACN,WAAK,KAAK,EAAC,YAAY;UACrB,yBACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,kBAAkB,EACxB,YAAY,EAAE,CAAC,IAA4B,EAAE,KAAU,EAAE,EAAE,CACzD,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,EAE/B,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,GACL,CACjB;QACL,IAAI,CAAC,UAAU,IAAI,CAClB,WAAK,KAAK,EAAC,oCAAoC;UAC7C,cACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,EAC7B,KAAK,EAAC,yBAAyB,IAE9B,IAAI,CAAC,gBAAgB,CACf,CACL,CACP,CACI,CACF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  State,\n  Event,\n  EventEmitter,\n  Prop,\n} from '@stencil/core';\nimport RefundFormSchema, { RefundFormFields } from './refund-form-schema';\nimport { Api } from '../../api';\nimport { FormController } from '../form/form';\nimport { config } from '../../../config';\n\n\n@Component({\n  tag: 'justifi-refund-form',\n  styleUrl: 'refund-form.scss',\n  shadow: true,\n})\nexport class RefundForm {\n  /**\n   * Authentication token required to authorize the refund transaction.\n   */\n  @Prop() authToken: string;\n\n  /**\n   * The unique identifier for the payment to be refunded.\n   */\n  @Prop() paymentId: string;\n\n  /**\n   * The amount of the payment to be refunded.\n   */\n  @Prop() amount?: number = 0;\n\n  /**\n   * Custom text for the submit button. Defaults to 'Submit'.\n   */\n  @Prop() submitButtonText?: string = 'Submit';\n\n  /**\n   * Flag to control the visibility of the submit button.\n   */\n  @Prop() withButton?: boolean;\n\n  /**\n   * Optional information text displayed above the form.\n   */\n  @Prop() refundInfoText?: string;\n\n  @State() errors: any = {};\n  @State() isSubmitting: boolean = false;\n\n  /**\n   * Event emitted when the refund form is successfully submitted.\n   * The submitted refund fields are passed as the event detail.\n   */\n  @Event() submitted: EventEmitter<RefundFormFields>;\n\n  private formController: FormController;\n  private api: any;\n\n  componentWillLoad() {\n    this.formController = new FormController(RefundFormSchema);\n    this.formController.setInitialValues({\n      amount: this.amount,\n      message: '',\n    });\n    this.initializeApi();\n  }\n\n  componentDidLoad() {\n    this.formController.errors.subscribe(errors => {\n      this.errors = { ...errors };\n    });\n  }\n\n  /**\n   * Handles the form submission.\n   * Prevents the default form action, validates the form, and emits the 'submitted' event.\n   */\n  async handleSubmit(event: Event) {\n    event.preventDefault();\n\n    this.formController.validateAndSubmit(this.submitRefund.bind(this), {\n      amount: this.amount,\n    });\n  }\n\n  /**\n   * Submits the refund request to the API.\n   */\n  private async submitRefund() {\n    this.isSubmitting = true;\n    const refundFields = this.formController.values.getValue();\n\n    try {\n      await this.api.post(`payments/${this.paymentId}/refunds`, refundFields);\n      this.submitted.emit(refundFields);\n    } catch (error) {\n      console.error('Error submitting refund:', error);\n      this.submitted.emit(error);\n    } finally {\n      this.isSubmitting = false;\n    }\n  }\n\n  /**\n   * Handles input changes, updating the refundFields state.\n   */\n  private handleInput(field: keyof RefundFormFields, value: any) {\n    this.formController.setValues({\n      ...this.formController.values.getValue(),\n      [field]: value,\n    });\n  }\n\n  /**\n   * Initializes the API with the given authentication token.\n   * Logs a warning if the auth token is missing.\n   */\n  private initializeApi() {\n    if (!this.authToken) {\n      console.warn('Warning: Missing auth-token.');\n    }\n    this.api = Api(this.authToken, config.proxyApiOrigin);\n  }\n\n  render() {\n    return (\n      <Host>\n        <h1>Refund</h1>\n\n        {this.refundInfoText && (\n          <div\n            class=\"d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3\"\n            role=\"alert\"\n          >\n            <img\n              src=\"/info-icon.svg\"\n              alt=\"Information\"\n              height=\"30\"\n              width=\"30\"\n            />\n\n            <p class=\"m-0\" innerHTML={this.refundInfoText} />\n          </div>\n        )}\n\n        <form onSubmit={e => this.handleSubmit(e)} class=\"d-grid gap-4\">\n          <div class=\"form-group\">\n            <form-control-monetary\n              name=\"amount\"\n              label=\"Refund Amount\"\n              defaultValue={this.amount?.toString() || ''}\n              inputHandler={(name: keyof RefundFormFields, value: any) =>\n                this.handleInput(name, value)\n              }\n              error={this.errors.amount}\n            ></form-control-monetary>\n          </div>\n          <div class=\"form-group\">\n            <form-control-text\n              name=\"notes\"\n              label=\"Additional Notes\"\n              inputHandler={(name: keyof RefundFormFields, value: any) =>\n                this.handleInput(name, value)\n              }\n              error={this.errors.notes}\n            ></form-control-text>\n          </div>\n          {this.withButton && (\n            <div class=\"form-group d-flex flex-row-reverse\">\n              <button\n                type=\"submit\"\n                disabled={!!this.isSubmitting}\n                class=\"btn btn-primary ml-auto\"\n              >\n                {this.submitButtonText}\n              </button>\n            </div>\n          )}\n        </form>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/refund-form/refund-form.stories.js

@@ -0,0 +1,169 @@
+export default {
+  title: 'dev/Components/RefundForm',
+  component: 'refund-form',
+  argTypes: {
+    authToken: { control: 'text' },
+    paymentId: { control: 'text' },
+    amount: { control: 'number' },
+    submitButtonText: { control: 'text' },
+    withButton: { control: 'boolean' },
+    refundInfoText: { control: 'text' },
+  },
+};
+const RefundFormTemplate = ({ authToken, paymentId, amount, submitButtonText, withButton, refundInfoText, cssVariables, }) => {
+  return `
+    <div>
+      <justifi-refund-form
+        auth-token="${authToken}"
+        payment-id="${paymentId}"
+        amount="${amount}"
+        submit-button-text="${submitButtonText}"
+        ${withButton ? 'with-button' : ''}
+        refund-info-text="${refundInfoText}"
+      ></justifi-refund-form>
+      ${!withButton
+    ? `<button id="custom-submit" type="button" class="btn btn-primary">Custom Submit</button>`
+    : ''}
+    </div>
+    <style>
+      :root {
+        ${cssVariables || ''}
+      }
+
+      #custom-submit {
+        color: #fff;
+        background-color: #007bff;
+        border-color: #007bff;
+        display: inline-block;
+        font-weight: 400;
+        text-align: center;
+        vertical-align: middle;
+        user-select: none;
+        background-clip: border-box;
+        border: 1px solid transparent;
+        padding: .375rem .75rem;
+        font-size: 1rem;
+        line-height: 1.5;
+        border-radius: .25rem;
+        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+        margin-top: 1rem;
+      }
+
+      #custom-submit:hover {
+        color: #fff;
+        background-color: #0069d9;
+        border-color: #0062cc;
+      }
+
+      #custom-submit:focus {
+        outline: 0;
+        box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
+      }
+
+      #custom-submit:disabled {
+        color: #fff;
+        background-color: #007bff;
+        border-color: #007bff;
+        opacity: .65;
+      }
+    </style>
+    <script>
+    function listenSubmittedEvent() {
+      const refundForm = document.querySelector('refund-form');
+      refundForm.addEventListener('submitted', (event) => {
+        console.log(event.detail);
+      });
+    }
+
+    function bindCustomSubmitButton() {
+      const externalSubmitButton = document.getElementById('custom-submit');
+      if (externalSubmitButton) {
+        externalSubmitButton.addEventListener('click', async () => {
+          const refundForm = document.querySelector('refund-form');
+          refundForm.submit();
+        });
+      }
+    }
+
+    (async () => {
+      await customElements.whenDefined('refund-form');
+      listenSubmittedEvent();
+      bindCustomSubmitButton();
+    })();
+    </script>
+  `;
+};
+export const Basic = RefundFormTemplate.bind({});
+Basic.args = {
+  authToken: '',
+  paymentId: '',
+  amount: 0,
+  submitButtonText: 'Submit',
+  withButton: true,
+  refundInfoText: '',
+  cssVariables: '',
+};
+export const Styled = RefundFormTemplate.bind({});
+Styled.args = {
+  authToken: '',
+  paymentId: '',
+  amount: 0,
+  submitButtonText: 'Submit',
+  withButton: true,
+  refundInfoText: '',
+  cssVariables: `
+    --jfi-primary-color: #212529;
+    --jfi-load-google-font: 'Roboto Mono:wght@200;400;700;900';
+    --jfi-layout-font-family: Roboto Mono, Calibri, sans-serif;
+    --jfi-layout-padding: 4px;
+    --jfi-layout-form-control-spacing-x: .5rem;
+    --jfi-layout-form-control-spacing-y: 1rem;
+    --jfi-form-label-font-weight: 700;
+    --jfi-form-label-font-family: Calibri, sans-serif;
+    --jfi-form-label-margin: 0 0 .5rem 0;
+    --jfi-form-control-background-color: #F4F4F6;
+    --jfi-form-control-background-color-hover: #EEEEF5;
+    --jfi-form-control-border-color: rgba(0, 0, 0, 0.42);
+    --jfi-form-control-border-color-hover: rgba(0, 0, 0, 0.62);
+    --jfi-form-control-border-color-focus: #fccc32;
+    --jfi-form-control-border-color-error: #C12727;
+    --jfi-form-control-border-top-width: 0;
+    --jfi-form-control-border-left-width: 0;
+    --jfi-form-control-border-bottom-width: 1px;
+    --jfi-form-control-border-right-width: 0;
+    --jfi-form-control-border-radius: 4px 4px 0 0;
+    --jfi-form-control-border-style: solid;
+    --jfi-form-control-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    --jfi-form-control-box-shadow-focus: none;
+    --jfi-form-control-box-shadow-error-focus: none;
+    --jfi-form-control-border-style: solid;
+    --jfi-form-control-color: #212529;
+    --jfi-form-control-font-size: 1rem;
+    --jfi-form-control-font-weight: 400;
+    --jfi-form-control-line-height: 2;
+    --jfi-form-control-margin: 0;
+    --jfi-form-control-padding: .5rem .875rem;
+    --jfi-error-message-color: #C12727;
+    --jfi-error-message-margin: .25rem 0 0 0;
+    --jfi-error-message-font-size: .875rem;
+
+    --jfi-submit-button-color: white;
+    --jfi-submit-button-background-color: #3F3F47;
+    --jfi-submit-button-border-color: var(--jfi-primary-color);
+    --jfi-submit-button-padding: 0.375rem 0.75rem;
+    --jfi-submit-button-font-size: 1rem;
+    --jfi-submit-button-border-radius: 1px;
+    --jfi-submit-button-color-hover: white;
+    --jfi-submit-button-background-color-hover: var(--jfi-primary-color);
+    --jfi-submit-button-border-color-hover: var(--jfi-primary-color);
+    --jfi-submit-button-color-focus: white;
+    --jfi-submit-button-background-color-focus: var(--jfi-primary-color);
+    --jfi-submit-button-border-color-focus: var(--jfi-primary-color);
+    --jfi-submit-button-color-active: white;
+    --jfi-submit-button-background-color-active: var(--jfi-primary-color);
+    --jfi-submit-button-border-color-active: var(--jfi-primary-color);
+    --jfi-submit-button-width: 100%;
+    --jfi-submit-button-box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
+  `,
+};
+//# sourceMappingURL=refund-form.stories.js.map

package/dist/collection/components/refund-form/refund-form.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"refund-form.stories.js","sourceRoot":"","sources":["../../../../src/components/refund-form/refund-form.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,2BAA2B;EAClC,SAAS,EAAE,aAAa;EACxB,QAAQ,EAAE;IACR,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;IAC9B,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;IAC9B,MAAM,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;IAC7B,gBAAgB,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;IACrC,UAAU,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;IAClC,cAAc,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;GACpC;CACF,CAAC;AAEF,MAAM,kBAAkB,GAAG,CAAC,EAC1B,SAAS,EACT,SAAS,EACT,MAAM,EACN,gBAAgB,EAChB,UAAU,EACV,cAAc,EACd,YAAY,GACb,EAAE,EAAE;EACH,OAAO;;;sBAGa,SAAS;sBACT,SAAS;kBACb,MAAM;8BACM,gBAAgB;UACpC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;4BACb,cAAc;;QAGlC,CAAC,UAAU;IACT,CAAC,CAAC,yFAAyF;IAC3F,CAAC,CAAC,EACN;;;;UAII,YAAY,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEzB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjD,KAAK,CAAC,IAAI,GAAG;EACX,SAAS,EAAE,EAAE;EACb,SAAS,EAAE,EAAE;EACb,MAAM,EAAE,CAAC;EACT,gBAAgB,EAAE,QAAQ;EAC1B,UAAU,EAAE,IAAI;EAChB,cAAc,EAAE,EAAE;EAClB,YAAY,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAClD,MAAM,CAAC,IAAI,GAAG;EACZ,SAAS,EAAE,EAAE;EACb,SAAS,EAAE,EAAE;EACb,MAAM,EAAE,CAAC;EACT,gBAAgB,EAAE,QAAQ;EAC1B,UAAU,EAAE,IAAI;EAChB,cAAc,EAAE,EAAE;EAClB,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDb;CACF,CAAC","sourcesContent":["export default {\n  title: 'dev/Components/RefundForm',\n  component: 'refund-form',\n  argTypes: {\n    authToken: { control: 'text' },\n    paymentId: { control: 'text' },\n    amount: { control: 'number' },\n    submitButtonText: { control: 'text' },\n    withButton: { control: 'boolean' },\n    refundInfoText: { control: 'text' },\n  },\n};\n\nconst RefundFormTemplate = ({\n  authToken,\n  paymentId,\n  amount,\n  submitButtonText,\n  withButton,\n  refundInfoText,\n  cssVariables,\n}) => {\n  return `\n    <div>\n      <justifi-refund-form\n        auth-token=\"${authToken}\"\n        payment-id=\"${paymentId}\"\n        amount=\"${amount}\"\n        submit-button-text=\"${submitButtonText}\"\n        ${withButton ? 'with-button' : ''}\n        refund-info-text=\"${refundInfoText}\"\n      ></justifi-refund-form>\n      ${\n        !withButton\n          ? `<button id=\"custom-submit\" type=\"button\" class=\"btn btn-primary\">Custom Submit</button>`\n          : ''\n      }\n    </div>\n    <style>\n      :root {\n        ${cssVariables || ''}\n      }\n\n      #custom-submit {\n        color: #fff;\n        background-color: #007bff;\n        border-color: #007bff;\n        display: inline-block;\n        font-weight: 400;\n        text-align: center;\n        vertical-align: middle;\n        user-select: none;\n        background-clip: border-box;\n        border: 1px solid transparent;\n        padding: .375rem .75rem;\n        font-size: 1rem;\n        line-height: 1.5;\n        border-radius: .25rem;\n        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n        margin-top: 1rem;\n      }\n\n      #custom-submit:hover {\n        color: #fff;\n        background-color: #0069d9;\n        border-color: #0062cc;\n      }\n\n      #custom-submit:focus {\n        outline: 0;\n        box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);\n      }\n\n      #custom-submit:disabled {\n        color: #fff;\n        background-color: #007bff;\n        border-color: #007bff;\n        opacity: .65;\n      }\n    </style>\n    <script>\n    function listenSubmittedEvent() {\n      const refundForm = document.querySelector('refund-form');\n      refundForm.addEventListener('submitted', (event) => {\n        console.log(event.detail);\n      });\n    }\n\n    function bindCustomSubmitButton() {\n      const externalSubmitButton = document.getElementById('custom-submit');\n      if (externalSubmitButton) {\n        externalSubmitButton.addEventListener('click', async () => {\n          const refundForm = document.querySelector('refund-form');\n          refundForm.submit();\n        });\n      }\n    }\n\n    (async () => {\n      await customElements.whenDefined('refund-form');\n      listenSubmittedEvent();\n      bindCustomSubmitButton();\n    })();\n    </script>\n  `;\n};\n\nexport const Basic = RefundFormTemplate.bind({});\nBasic.args = {\n  authToken: '',\n  paymentId: '',\n  amount: 0,\n  submitButtonText: 'Submit',\n  withButton: true,\n  refundInfoText: '',\n  cssVariables: '',\n};\n\nexport const Styled = RefundFormTemplate.bind({});\nStyled.args = {\n  authToken: '',\n  paymentId: '',\n  amount: 0,\n  submitButtonText: 'Submit',\n  withButton: true,\n  refundInfoText: '',\n  cssVariables: `\n    --jfi-primary-color: #212529;\n    --jfi-load-google-font: 'Roboto Mono:wght@200;400;700;900';\n    --jfi-layout-font-family: Roboto Mono, Calibri, sans-serif;\n    --jfi-layout-padding: 4px;\n    --jfi-layout-form-control-spacing-x: .5rem;\n    --jfi-layout-form-control-spacing-y: 1rem;\n    --jfi-form-label-font-weight: 700;\n    --jfi-form-label-font-family: Calibri, sans-serif;\n    --jfi-form-label-margin: 0 0 .5rem 0;\n    --jfi-form-control-background-color: #F4F4F6;\n    --jfi-form-control-background-color-hover: #EEEEF5;\n    --jfi-form-control-border-color: rgba(0, 0, 0, 0.42);\n    --jfi-form-control-border-color-hover: rgba(0, 0, 0, 0.62);\n    --jfi-form-control-border-color-focus: #fccc32;\n    --jfi-form-control-border-color-error: #C12727;\n    --jfi-form-control-border-top-width: 0;\n    --jfi-form-control-border-left-width: 0;\n    --jfi-form-control-border-bottom-width: 1px;\n    --jfi-form-control-border-right-width: 0;\n    --jfi-form-control-border-radius: 4px 4px 0 0;\n    --jfi-form-control-border-style: solid;\n    --jfi-form-control-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n    --jfi-form-control-box-shadow-focus: none;\n    --jfi-form-control-box-shadow-error-focus: none;\n    --jfi-form-control-border-style: solid;\n    --jfi-form-control-color: #212529;\n    --jfi-form-control-font-size: 1rem;\n    --jfi-form-control-font-weight: 400;\n    --jfi-form-control-line-height: 2;\n    --jfi-form-control-margin: 0;\n    --jfi-form-control-padding: .5rem .875rem;\n    --jfi-error-message-color: #C12727;\n    --jfi-error-message-margin: .25rem 0 0 0;\n    --jfi-error-message-font-size: .875rem;\n\n    --jfi-submit-button-color: white;\n    --jfi-submit-button-background-color: #3F3F47;\n    --jfi-submit-button-border-color: var(--jfi-primary-color);\n    --jfi-submit-button-padding: 0.375rem 0.75rem;\n    --jfi-submit-button-font-size: 1rem;\n    --jfi-submit-button-border-radius: 1px;\n    --jfi-submit-button-color-hover: white;\n    --jfi-submit-button-background-color-hover: var(--jfi-primary-color);\n    --jfi-submit-button-border-color-hover: var(--jfi-primary-color);\n    --jfi-submit-button-color-focus: white;\n    --jfi-submit-button-background-color-focus: var(--jfi-primary-color);\n    --jfi-submit-button-border-color-focus: var(--jfi-primary-color);\n    --jfi-submit-button-color-active: white;\n    --jfi-submit-button-background-color-active: var(--jfi-primary-color);\n    --jfi-submit-button-border-color-active: var(--jfi-primary-color);\n    --jfi-submit-button-width: 100%;\n    --jfi-submit-button-box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;\n  `,\n};\n"]}