Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implemented non-breaking change to support monthly payment slots #37

Merged
merged 1 commit into from
Oct 3, 2024
Merged

Implemented non-breaking change to support monthly payment slots #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/components.d.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading