diff --git a/src/components.d.ts b/src/components.d.ts index e61f92c..11bd082 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -32,10 +32,12 @@ export namespace Components { "interestRateLabel"?: string; /** * The monthly payment footnote. + * @deprecated Use the slot monthly-payment-disclaimer instead. */ "monthlyPaymentDisclaimer"?: string; /** * The monthly payment label. + * @deprecated Use the slot monthly-payment-header instead. */ "monthlyPaymentLabel"?: string; /** @@ -85,10 +87,12 @@ declare namespace LocalJSX { "interestRateLabel"?: string; /** * The monthly payment footnote. + * @deprecated Use the slot monthly-payment-disclaimer instead. */ "monthlyPaymentDisclaimer"?: string; /** * The monthly payment label. + * @deprecated Use the slot monthly-payment-header instead. */ "monthlyPaymentLabel"?: string; /** diff --git a/src/components/nvq-loan-calculator/nvq-loan-calculator.tsx b/src/components/nvq-loan-calculator/nvq-loan-calculator.tsx index 3a1fb7c..7523141 100644 --- a/src/components/nvq-loan-calculator/nvq-loan-calculator.tsx +++ b/src/components/nvq-loan-calculator/nvq-loan-calculator.tsx @@ -4,6 +4,8 @@ import { Component, Host, Prop, h, State } from '@stencil/core'; * A loan calculator component. * @slot heading - Can be used to inject heading content on top of the calculator. * @slot examples - Can be used to inject examples content on the left side of the calculator. + * @slot monthly-payment-header - Can be used to inject header content above the monthly payment. + * @slot monthly-payment-disclaimer - Can be used to inject disclaimer content below the monthly payment. * @slot monthly-payment-footer - Can be used to inject footer content below the monthly payment. * @slot footnote - Can be used to inject footnote content below the calculator. * */ @@ -31,10 +33,14 @@ export class NvqLoanCalculator { /** The AmortizationPeriod label. */ @Prop() amortizationPeriodLabel?: string = "Amortization Period"; - /** The monthly payment label. */ + /** The monthly payment label. + * @deprecated Use the slot monthly-payment-header instead. + * */ @Prop() monthlyPaymentLabel?: string = "Monthly Payment"; - /** The monthly payment footnote. */ + /** The monthly payment footnote. + * @deprecated Use the slot monthly-payment-disclaimer instead. + * */ @Prop() monthlyPaymentDisclaimer?: string = "estimated payment"; @State() totalAmount: number; @@ -227,9 +233,17 @@ export class NvqLoanCalculator {
-

{this.monthlyPaymentLabel}‡

+

+ + {this.monthlyPaymentLabel}‡ + +

${this.calculatePayment()} -

‡{this.monthlyPaymentDisclaimer}

+

+ + ‡{this.monthlyPaymentDisclaimer} + +

diff --git a/src/components/nvq-loan-calculator/readme.md b/src/components/nvq-loan-calculator/readme.md index 556d633..b1b20f7 100644 --- a/src/components/nvq-loan-calculator/readme.md +++ b/src/components/nvq-loan-calculator/readme.md @@ -11,26 +11,28 @@ A loan calculator component. ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------------- | ---------------------------- | ----------------------------------- | -------- | ----------------------- | -| `amortizationPeriodLabel` | `amortization-period-label` | The AmortizationPeriod label. | `string` | `"Amortization Period"` | -| `calculatorHeading` | `calculator-heading` | The heading for CALCULATOR section. | `string` | `"CALCULATOR"` | -| `downPaymentLabel` | `down-payment-label` | The Down Payment label. | `string` | `"Down Payment"` | -| `examplesHeading` | `examples-heading` | The heading for EXAMPLES section. | `string` | `"EXAMPLES"` | -| `interestRateLabel` | `interest-rate-label` | The Interest Rate label. | `string` | `"Interest Rate"` | -| `monthlyPaymentDisclaimer` | `monthly-payment-disclaimer` | The monthly payment footnote. | `string` | `"estimated payment"` | -| `monthlyPaymentLabel` | `monthly-payment-label` | The monthly payment label. | `string` | `"Monthly Payment"` | -| `totalAmountLabel` | `total-amount-label` | The Total Amount label. | `string` | `"Total Amount"` | +| Property | Attribute | Description | Type | Default | +| -------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------------------- | +| `amortizationPeriodLabel` | `amortization-period-label` | The AmortizationPeriod label. | `string` | `"Amortization Period"` | +| `calculatorHeading` | `calculator-heading` | The heading for CALCULATOR section. | `string` | `"CALCULATOR"` | +| `downPaymentLabel` | `down-payment-label` | The Down Payment label. | `string` | `"Down Payment"` | +| `examplesHeading` | `examples-heading` | The heading for EXAMPLES section. | `string` | `"EXAMPLES"` | +| `interestRateLabel` | `interest-rate-label` | The Interest Rate label. | `string` | `"Interest Rate"` | +| `monthlyPaymentDisclaimer` | `monthly-payment-disclaimer` | **[DEPRECATED]** Use the slot monthly-payment-disclaimer instead.

The monthly payment footnote. | `string` | `"estimated payment"` | +| `monthlyPaymentLabel` | `monthly-payment-label` | **[DEPRECATED]** Use the slot monthly-payment-header instead.

The monthly payment label. | `string` | `"Monthly Payment"` | +| `totalAmountLabel` | `total-amount-label` | The Total Amount label. | `string` | `"Total Amount"` | ## Slots -| Slot | Description | -| -------------------------- | -------------------------------------------------------------------------- | -| `"examples"` | Can be used to inject examples content on the left side of the calculator. | -| `"footnote"` | Can be used to inject footnote content below the calculator. | -| `"heading"` | Can be used to inject heading content on top of the calculator. | -| `"monthly-payment-footer"` | Can be used to inject footer content below the monthly payment. | +| Slot | Description | +| ------------------------------ | -------------------------------------------------------------------------- | +| `"examples"` | Can be used to inject examples content on the left side of the calculator. | +| `"footnote"` | Can be used to inject footnote content below the calculator. | +| `"heading"` | Can be used to inject heading content on top of the calculator. | +| `"monthly-payment-disclaimer"` | Can be used to inject disclaimer content below the monthly payment. | +| `"monthly-payment-footer"` | Can be used to inject footer content below the monthly payment. | +| `"monthly-payment-header"` | Can be used to inject header content above the monthly payment. | ## CSS Custom Properties