Skip to content

Commit

Permalink
refactor(cxl-ui): enable vaadin-details for non-summary fields
Browse files Browse the repository at this point in the history
  • Loading branch information
@lkraav
lkraav committed Feb 19, 2023
1 parent 264c021 commit 6ce7440
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 72 deletions.
9 changes: 9 additions & 0 deletions packages/cxl-ui/scss/global/cxl-checkout-details.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
cxl-checkout-details,
vaadin-details[theme~="cxl-checkout-details"] {
[id$="heading"] {
font-size: var(--lumo-font-size-xl) /* h3 */;
font-weight: 900;
margin: 0;
text-transform: uppercase;
}
}
18 changes: 12 additions & 6 deletions packages/cxl-ui/src/components/cxl-checkout-details.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import '@conversionxl/cxl-lumo-styles';
import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
import '@vaadin/details';
import { Details } from '@vaadin/details/src/vaadin-details';
import { customElement } from 'lit/decorators.js';
import cxlCheckoutDetailsGlobalStyles from "../styles/global/cxl-checkout-details-css.js";

@customElement('cxl-checkout-details')
export class CXLCheckoutDetailsElement extends Details {
Expand All @@ -12,25 +14,29 @@ export class CXLCheckoutDetailsElement extends Details {
ready() {
super.ready();

registerGlobalStyles(cxlCheckoutDetailsGlobalStyles, {
moduleId: 'cxl-checkout-details-global',
});

// Sanity check.
if (! this._checkoutFieldsSummaryElement) {
console.warn( 'Checkout fields summary element not found.');
return;
}

// First render.
this._onSummaryClosed();
if (! this.opened) {
this._onSummaryClosed();
}

// Panel toggles.
this.addEventListener('opened-changed', (e) => {
let isOpened = e.detail.value;

this.addEventListener('opened-changed', () => {
// Fire only when closing.
if (! isOpened) {
if (! this.opened) {
this._onSummaryClosed();
}

this._checkoutFieldsSummaryElement.hidden = isOpened;
this._checkoutFieldsSummaryElement.hidden = this.opened;
});
}

Expand Down
8 changes: 8 additions & 0 deletions packages/cxl-ui/src/index-core.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,17 @@
// Theme style modules must be imported before elements.
import '@conversionxl/cxl-lumo-styles';

// Vaadin.
import '@vaadin/details';
import '@vaadin/horizontal-layout';
import '@vaadin/notification';
import '@vaadin/progress-bar';
import '@vaadin/tooltip';

// Utilities.
import * as Headroom from 'headroom.js';

// CXL.
export { CXLAppLayoutElement } from './components/cxl-app-layout.js';
export { CXLCardElement } from './components/cxl-card.js';
export { CXLCheckoutDetailsElement } from './components/cxl-checkout-details.js';
Expand Down
144 changes: 78 additions & 66 deletions packages/storybook/cxl-ui/cxl-checkout-details.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,101 +3,113 @@ import '@conversionxl/cxl-ui/src/components/cxl-checkout-details.js';
import { html } from 'lit';

export default {
args: {
theme: 'reverse',
},
argTypes: {
theme: {
options: ['filled', 'small', 'reverse'],
control: { type: 'select' },
},
},
title: 'CXL UI/cxl-checkout-details',
};

// eslint-disable-next-line no-empty-pattern
const Template = ({ theme }) => html`
<style>
h3 {
font-size: var(--lumo-font-size-xl);
margin: unset;
text-transform: uppercase;
}
label {
display: block;
}
</style>
const Template = () => html`
<vaadin-details theme="cxl-checkout-details reverse" opened>
<div slot="summary">
<h3 id="coupons_heading">Coupons</h3>
</div>
<p class="form-row form-row-first form-row-last">
<input type="text" name="coupon_code" class="input-text" placeholder="Enter your coupon code here" id="coupon_code" value="">
<button type="submit" class="button wp-element-button" name="apply_coupon" theme="primary" value="Apply">Apply</button>
</p>
</vaadin-details>
<cxl-checkout-details
fields="billing_email* billing_first_name* billing_last_name* billing_company"
theme=${theme}
opened
theme="reverse"
>
<div slot="summary">
<h3 id="billing_details_heading">Billing details</h3>
<vaadin-horizontal-layout theme="cxl-checkout-fields-summary"></vaadin-horizontal-layout>
</div>
<div>
<label>
Your e-mail address
<input id="billing_email" type="text" placeholder="Email" value="john@wick.com" />
</label>
<label>
First name
<input id="billing_first_name" type="text" placeholder="First Name" value="John" />
</label>
<label>
Last name
<input id="billing_last_name" type="text" placeholder="Last Name" value="" />
</label>
<label>
Company (optional)
<input id="billing_company" type="text" placeholder="Company" value="" />
</label>
<p class="form-row form-row-first">
<label>
Your e-mail address
<input id="billing_email" type="text" placeholder="Email" value="john@wick.com" />
</label>
</p>
<p class="form-row">
<label>
First name
<input id="billing_first_name" type="text" placeholder="First Name" value="John" />
</label>
</p>
<p class="form-row">
<label>
Last name
<input id="billing_last_name" type="text" placeholder="Last Name" value="" />
</label>
</p>
<p class="form-row form-row-last">
<label>
Company (optional)
<input id="billing_company" type="text" placeholder="Company" value="" />
</label>
</p>
</div>
</cxl-checkout-details>
<cxl-checkout-details
fields="billing_country* billing_address_1* billing_address_2 billing_city* billing_state* billing_postcode*"
theme=${theme}
theme="reverse"
>
<div slot="summary">
<h3 id="billing_address_heading">Billing address</h3>
<vaadin-horizontal-layout theme="cxl-checkout-fields-summary"></vaadin-horizontal-layout>
</div>
<div>
<label>
Country / Region
<select id="billing_country">
<option value="US">United States</option>
<option value="EU">Europe</option>
</select>
</label>
<label>
Street address
<input id="billing_address_1" type="text" placeholder="Address 1" value="901 S Mopac Expy" />
<input id="billing_address_2" type="text" placeholder="Address 2" value="Suite 150" />
</label>
<label>
Town / City
<input id="billing_city" type="text" placeholder="City" value="Austin" />
</label>
<label>
State
<input id="billing_state" type="text" placeholder="State" value="TX" />
</label>
<label>
ZIP Code
<input id="billing_postcode" type="text" placeholder="Postcode" value="78746" />
</label>
<p class="form-row form-row-first">
<label>
Country / Region
<select id="billing_country">
<option value="US">United States</option>
<option value="EU">Europe</option>
</select>
</label>
</p>
<p class="form-row">
<label>
Street address
<input id="billing_address_1" type="text" placeholder="Address 1" value="901 S Mopac Expy" />
<input id="billing_address_2" type="text" placeholder="Address 2" value="Suite 150" />
</label>
</p>
<p class="form-row">
<label>
Town / City
<input id="billing_city" type="text" placeholder="City" value="Austin" />
</label>
</p>
<p class="form-row">
<label>
State
<input id="billing_state" type="text" placeholder="State" value="TX" />
</label>
</p>
<p class="form-row form-row-last">
<label>
ZIP Code
<input id="billing_postcode" type="text" placeholder="Postcode" value="78746" />
</label>
</p>
</div>
</cxl-checkout-details>
<cxl-checkout-details fields="cardnumber*" theme=${theme}>
<cxl-checkout-details fields="cardnumber*" theme="reverse">
<div slot="summary">
<h3 id="payment_heading">Payment</h3>
<vaadin-horizontal-layout theme="cxl-checkout-fields-summary"></vaadin-horizontal-layout>
</div>
<div>
<input name="cardnumber" type="text" placeholder="Card Number" />
<p class="form-row form-row-first form-row-last">
<label>
Credit card
<input name="cardnumber" type="text" placeholder="Card Number" />
</label>
</p>
</div>
</cxl-checkout-details>
`;
Expand Down

0 comments on commit 6ce7440

Please sign in to comment.