Skip to content

Commit

Permalink
Merge pull request #37 from david-poindexter/remove-disclaimer-sup
Browse files Browse the repository at this point in the history 
Implemented non-breaking change to support monthly payment slots
  • Loading branch information
@david-poindexter
david-poindexter authored Oct 3, 2024
2 parents e7f54e4 + 3e01ad0 commit 0f0936e
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 20 deletions.
4 changes: 4 additions & 0 deletions src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
/**
Expand Down Expand Up @@ -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;
/**
Expand Down
22 changes: 18 additions & 4 deletions src/components/nvq-loan-calculator/nvq-loan-calculator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
* */
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -227,9 +233,17 @@ export class NvqLoanCalculator {
</div>
</div>
<div class="result">
<h4 class="text-center">{this.monthlyPaymentLabel}<sup>‡</sup></h4>
<h4 class="text-center">
<slot name="monthly-payment-header">
{this.monthlyPaymentLabel}<sup>‡</sup>
</slot>
</h4>
<span class="output">${this.calculatePayment()}</span>
<p class="disclaimer"><sup>‡</sup>{this.monthlyPaymentDisclaimer}</p>
<p class="disclaimer">
<slot name="monthly-payment-disclaimer">
<sup>‡</sup>{this.monthlyPaymentDisclaimer}
</slot>
</p>
<slot name="monthly-payment-footer"></slot>
</div>
</div>
Expand Down
34 changes: 18 additions & 16 deletions src/components/nvq-loan-calculator/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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` | <span style="color:red">**[DEPRECATED]**</span> Use the slot monthly-payment-disclaimer instead.<br/><br/>The monthly payment footnote. | `string` | `"estimated payment"` |
| `monthlyPaymentLabel` | `monthly-payment-label` | <span style="color:red">**[DEPRECATED]**</span> Use the slot monthly-payment-header instead.<br/><br/>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
Expand Down

0 comments on commit 0f0936e

Please sign in to comment.