From d45ef3409cdaa589c5a135790967f6744d5e243b Mon Sep 17 00:00:00 2001 From: Andrew Noblet Date: Thu, 10 Jun 2021 23:39:21 -0400 Subject: [PATCH] feat(cxl-ui): migrate to lit --- package.json | 4 ++-- packages/core/package.json | 3 +-- packages/core/src/components/button.js | 6 ++--- packages/core/src/components/checkbox.js | 16 ++++++------- packages/core/src/components/progress.js | 14 +++++------ packages/core/src/components/range.js | 24 +++++++++---------- packages/core/src/components/switch.js | 12 +++++----- packages/cxl-lumo-styles/package.json | 4 ++-- packages/cxl-ui/package.json | 3 +-- .../src/components/cxl-accordion-card.js | 2 +- .../cxl-ui/src/components/cxl-app-layout.js | 3 ++- packages/cxl-ui/src/components/cxl-card.js | 3 ++- .../src/components/cxl-marketing-nav.js | 8 +++---- packages/cxl-ui/src/components/cxl-section.js | 3 ++- .../cxl-ui/src/components/cxl-tabs-slider.js | 2 +- .../src/components/cxl-vaadin-accordion.js | 2 +- .../cxl-lumo-styles/elements.stories.js | 2 +- .../cxl-lumo-styles/typography.stories.js | 2 +- .../cxl-app-layout/layout=1c-c.stories.js | 2 +- .../cxl-app-layout/layout=1c-w.stories.js | 2 +- .../cxl-app-layout/layout=1c.stories.js | 2 +- .../cxl-app-layout/layout=2c-l.stories.js | 2 +- .../cxl-app-layout/layout=2c-r.stories.js | 2 +- .../[theme=cxl-testimonial].stories.js | 2 +- .../cxl-ui/cxl-marketing-nav.stories.js | 2 +- .../cxl-tabs-slider.stories.js | 2 +- .../cxl-accordion-card.story.js | 6 ++--- .../theme=cxl-faq.story.js | 4 ++-- .../theme=cxl-minidegree-track.story.js | 2 +- .../storybook/cxl-ui/footer-nav.stories.js | 2 +- packages/storybook/package.json | 2 +- yarn.lock | 24 ++++++++++++++++++- 32 files changed, 95 insertions(+), 74 deletions(-) diff --git a/package.json b/package.json index f86b43c0..ecfb3193 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,6 @@ "karma-webpack": "^4.0.0-rc.5", "lerna": "^3.20.1", "lint-staged": "^10.5.3", - "lit-html": "^2.0.0-rc.3", "mocha": "^6.1.4", "node-watch": "^0.7.1", "npm-run-all": "^4.1.5", @@ -96,5 +95,6 @@ "stylelint --syntax=scss", "prettier --single-quote=false --write" ] - } + }, + "dependencies": {} } diff --git a/packages/core/package.json b/packages/core/package.json index f9f8778b..523e32db 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -13,8 +13,7 @@ "directory": "packages/core" }, "dependencies": { - "lit-element": "^2.0.1", - "lit-html": "^2.0.0-rc.3" + "lit": "^2.0.0-rc.2" }, "devDependencies": { "@aybolit/test-helpers": "^0.1.0", diff --git a/packages/core/src/components/button.js b/packages/core/src/components/button.js index 091daf28..5b38c45c 100644 --- a/packages/core/src/components/button.js +++ b/packages/core/src/components/button.js @@ -1,4 +1,4 @@ -import { LitElement, html } from 'lit-element'; +import { LitElement, html } from 'lit'; import { DelegateFocusMixin } from '../mixins/delegate-focus-mixin.js'; import buttonBaseStyles from '../styles/button-base-css.js'; @@ -10,8 +10,8 @@ export class ButtonElement extends DelegateFocusMixin(LitElement) { */ link: { type: String, - reflect: true - } + reflect: true, + }, }; } diff --git a/packages/core/src/components/checkbox.js b/packages/core/src/components/checkbox.js index d1cf3eb6..475efb2f 100644 --- a/packages/core/src/components/checkbox.js +++ b/packages/core/src/components/checkbox.js @@ -1,4 +1,4 @@ -import { LitElement, html } from 'lit-element'; +import { LitElement, html } from 'lit'; import { DelegateFocusMixin } from '../mixins/delegate-focus-mixin.js'; import checkboxBaseStyles from '../styles/checkbox-base-css.js'; @@ -12,7 +12,7 @@ export class CheckboxElement extends DelegateFocusMixin(LitElement) { */ checked: { type: Boolean, - reflect: true + reflect: true, }, /** @@ -21,7 +21,7 @@ export class CheckboxElement extends DelegateFocusMixin(LitElement) { */ indeterminate: { type: Boolean, - reflect: true + reflect: true, }, /** @@ -29,8 +29,8 @@ export class CheckboxElement extends DelegateFocusMixin(LitElement) { * to the server when the checkbox is inside a form. */ value: { - reflect: true - } + reflect: true, + }, }; } @@ -105,7 +105,7 @@ export class CheckboxElement extends DelegateFocusMixin(LitElement) { } this.dispatchEvent( new CustomEvent('checked-changed', { - detail: { value: checked } + detail: { value: checked }, }) ); } @@ -127,10 +127,10 @@ export class CheckboxElement extends DelegateFocusMixin(LitElement) { // into the ancestor tree, so we must do this manually. const changeEvent = new CustomEvent('change', { detail: { - sourceEvent: e + sourceEvent: e, }, bubbles: e.bubbles, - cancelable: e.cancelable + cancelable: e.cancelable, }); this.dispatchEvent(changeEvent); } diff --git a/packages/core/src/components/progress.js b/packages/core/src/components/progress.js index e3cd5ab0..5504ea27 100644 --- a/packages/core/src/components/progress.js +++ b/packages/core/src/components/progress.js @@ -1,5 +1,5 @@ -import { LitElement, html } from 'lit-element'; -import { ifDefined } from 'lit-html/directives/if-defined'; +import { LitElement, html } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined'; import progressBaseStyles from '../styles/progress-base-css.js'; export class ProgressElement extends LitElement { @@ -10,7 +10,7 @@ export class ProgressElement extends LitElement { * or empty string to set indeterminate state. */ value: { - type: Number + type: Number, }, /** @@ -18,8 +18,8 @@ export class ProgressElement extends LitElement { * Note: the minimum value is always 0. */ max: { - type: Number - } + type: Number, + }, }; } @@ -39,8 +39,6 @@ export class ProgressElement extends LitElement { if (value === null || value === '') { value = undefined; } - return html` - - `; + return html` `; } } diff --git a/packages/core/src/components/range.js b/packages/core/src/components/range.js index 4c445464..45918f21 100644 --- a/packages/core/src/components/range.js +++ b/packages/core/src/components/range.js @@ -1,28 +1,28 @@ -import { LitElement, html } from 'lit-element'; -import { ifDefined } from 'lit-html/directives/if-defined'; +import { LitElement, html } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined'; import { DelegateFocusMixin } from '../mixins/delegate-focus-mixin.js'; import rangeBaseStyles from '../styles/range-base-css.js'; -const isNumeric = n => !isNaN(parseFloat(n)) && isFinite(n); +const isNumeric = (n) => !isNaN(parseFloat(n)) && isFinite(n); export class RangeElement extends DelegateFocusMixin(LitElement) { static get properties() { return { value: { - type: Number + type: Number, }, min: { - type: Number + type: Number, }, max: { - type: Number + type: Number, }, step: { - type: Number - } + type: Number, + }, }; } @@ -98,8 +98,8 @@ export class RangeElement extends DelegateFocusMixin(LitElement) { this.dispatchEvent( new CustomEvent('value-changed', { detail: { - value: this.value - } + value: this.value, + }, }) ); } @@ -114,10 +114,10 @@ export class RangeElement extends DelegateFocusMixin(LitElement) { // into the ancestor tree, so we must do this manually. const changeEvent = new CustomEvent('change', { detail: { - sourceEvent: e + sourceEvent: e, }, bubbles: e.bubbles, - cancelable: e.cancelable + cancelable: e.cancelable, }); this.dispatchEvent(changeEvent); } diff --git a/packages/core/src/components/switch.js b/packages/core/src/components/switch.js index 2e169cd6..054cb582 100644 --- a/packages/core/src/components/switch.js +++ b/packages/core/src/components/switch.js @@ -1,4 +1,4 @@ -import { LitElement, html } from 'lit-element'; +import { LitElement, html } from 'lit'; import { DelegateFocusMixin } from '../mixins/delegate-focus-mixin.js'; import switchBaseStyles from '../styles/switch-base-css.js'; @@ -10,8 +10,8 @@ export class SwitchElement extends DelegateFocusMixin(LitElement) { */ checked: { type: Boolean, - reflect: true - } + reflect: true, + }, }; } @@ -64,7 +64,7 @@ export class SwitchElement extends DelegateFocusMixin(LitElement) { this.setAttribute('aria-checked', checked); this.dispatchEvent( new CustomEvent('checked-changed', { - detail: { value: checked } + detail: { value: checked }, }) ); } @@ -77,10 +77,10 @@ export class SwitchElement extends DelegateFocusMixin(LitElement) { // into the ancestor tree, so we must do this manually. const changeEvent = new CustomEvent('change', { detail: { - sourceEvent: e + sourceEvent: e, }, bubbles: e.bubbles, - cancelable: e.cancelable + cancelable: e.cancelable, }); this.dispatchEvent(changeEvent); } diff --git a/packages/cxl-lumo-styles/package.json b/packages/cxl-lumo-styles/package.json index 39c58d2d..a5f3ecce 100644 --- a/packages/cxl-lumo-styles/package.json +++ b/packages/cxl-lumo-styles/package.json @@ -13,7 +13,7 @@ "@polymer/iron-iconset-svg": "^3.0.1", "@vaadin/vaadin-lumo-styles": "^1.5.0", "@vaadin/vaadin-themable-mixin": "^1.5.2", - "lit-element": "^2.2.1", - "lit-html": "^2.0.0-rc.3" + "lit": "^2.0.0-rc.2", + "lit-element": "^2.2.1" } } diff --git a/packages/cxl-ui/package.json b/packages/cxl-ui/package.json index 879daca0..8d45dfa4 100644 --- a/packages/cxl-ui/package.json +++ b/packages/cxl-ui/package.json @@ -23,8 +23,7 @@ "@vaadin/vaadin-tabs": "^4.0.0-alpha4", "@vaadin/vaadin-themable-mixin": "^1.6.2", "headroom.js": "^0.12.0", - "lit-element": "^2.2.1", - "lit-html": "^2.0.0-rc.3" + "lit": "^2.0.0-rc.2" }, "@pika/pack": { "pipeline": [ diff --git a/packages/cxl-ui/src/components/cxl-accordion-card.js b/packages/cxl-ui/src/components/cxl-accordion-card.js index a0c6d78a..ce178e2e 100644 --- a/packages/cxl-ui/src/components/cxl-accordion-card.js +++ b/packages/cxl-ui/src/components/cxl-accordion-card.js @@ -1,4 +1,4 @@ -import { customElement } from 'lit-element'; +import { customElement } from 'lit/decorators'; import '@conversionxl/cxl-lumo-styles'; import { AccordionPanelElement } from '@vaadin/vaadin-accordion/src/vaadin-accordion-panel'; diff --git a/packages/cxl-ui/src/components/cxl-app-layout.js b/packages/cxl-ui/src/components/cxl-app-layout.js index ab294b42..7c22a58f 100644 --- a/packages/cxl-ui/src/components/cxl-app-layout.js +++ b/packages/cxl-ui/src/components/cxl-app-layout.js @@ -1,7 +1,8 @@ /** * @todo implement primary action button. */ -import { LitElement, html, customElement, property, query } from 'lit-element'; +import { LitElement, html } from 'lit'; +import { customElement, property, query } from 'lit/decorators'; import '@conversionxl/cxl-lumo-styles'; import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils'; import cxlAppLayoutStyles from '../styles/cxl-app-layout-css.js'; diff --git a/packages/cxl-ui/src/components/cxl-card.js b/packages/cxl-ui/src/components/cxl-card.js index 3d2ef296..58eb689a 100644 --- a/packages/cxl-ui/src/components/cxl-card.js +++ b/packages/cxl-ui/src/components/cxl-card.js @@ -1,4 +1,5 @@ -import { customElement, LitElement, html } from 'lit-element'; +import { LitElement, html } from 'lit'; +import { customElement } from 'lit/decorators'; import '@conversionxl/cxl-lumo-styles'; import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils'; import cxlCardGlobalStyles from '../styles/global/cxl-card-css.js'; diff --git a/packages/cxl-ui/src/components/cxl-marketing-nav.js b/packages/cxl-ui/src/components/cxl-marketing-nav.js index cf3909d7..21c8f41e 100644 --- a/packages/cxl-ui/src/components/cxl-marketing-nav.js +++ b/packages/cxl-ui/src/components/cxl-marketing-nav.js @@ -1,4 +1,5 @@ -import { LitElement, html, customElement, property, query } from 'lit-element'; +import { LitElement, html } from 'lit'; +import { customElement, property, query } from 'lit/decorators'; import '@conversionxl/cxl-lumo-styles'; import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils'; import cxlMarketingNavStyles from '../styles/cxl-marketing-nav-css.js'; @@ -132,9 +133,8 @@ export class CXLMarketingNavElement extends LitElement { /** * Configure `.menu-item-search`. */ - const menuItemSearchContextMenu = this.menuItemSearchElement.querySelector( - 'vaadin-context-menu' - ); + const menuItemSearchContextMenu = + this.menuItemSearchElement.querySelector('vaadin-context-menu'); /** * `` interferes with form input. diff --git a/packages/cxl-ui/src/components/cxl-section.js b/packages/cxl-ui/src/components/cxl-section.js index 6f41ab42..5595b0f3 100644 --- a/packages/cxl-ui/src/components/cxl-section.js +++ b/packages/cxl-ui/src/components/cxl-section.js @@ -1,4 +1,5 @@ -import { LitElement, customElement, html, svg } from 'lit-element'; +import { LitElement, html, svg } from 'lit'; +import { customElement } from 'lit/decorators'; import '@conversionxl/cxl-lumo-styles'; import cxlSectionStyles from '../styles/cxl-section-css'; diff --git a/packages/cxl-ui/src/components/cxl-tabs-slider.js b/packages/cxl-ui/src/components/cxl-tabs-slider.js index cd87c45d..64930388 100644 --- a/packages/cxl-ui/src/components/cxl-tabs-slider.js +++ b/packages/cxl-ui/src/components/cxl-tabs-slider.js @@ -1,6 +1,6 @@ import '@conversionxl/cxl-lumo-styles'; import { TabsElement } from '@vaadin/vaadin-tabs'; -import { customElement } from 'lit-element'; +import { customElement } from 'lit/decorators'; @customElement('cxl-tabs-slider') export class CXLTabsSliderElement extends TabsElement { diff --git a/packages/cxl-ui/src/components/cxl-vaadin-accordion.js b/packages/cxl-ui/src/components/cxl-vaadin-accordion.js index e04cbba0..ec2d59a8 100644 --- a/packages/cxl-ui/src/components/cxl-vaadin-accordion.js +++ b/packages/cxl-ui/src/components/cxl-vaadin-accordion.js @@ -1,4 +1,4 @@ -import { customElement } from 'lit-element'; +import { customElement } from 'lit/decorators'; import '@conversionxl/cxl-lumo-styles'; import '@vaadin/vaadin-accordion'; import { AccordionElement } from '@vaadin/vaadin-accordion/src/vaadin-accordion'; diff --git a/packages/storybook/cxl-lumo-styles/elements.stories.js b/packages/storybook/cxl-lumo-styles/elements.stories.js index 48f88b4e..9392427b 100644 --- a/packages/storybook/cxl-lumo-styles/elements.stories.js +++ b/packages/storybook/cxl-lumo-styles/elements.stories.js @@ -1,7 +1,7 @@ import '@conversionxl/cxl-lumo-styles'; import '@vaadin/vaadin-button'; import '@vaadin/vaadin-notification'; -import { html } from 'lit-html'; +import { html } from 'lit'; import cxlLoadingStyles from '@conversionxl/cxl-lumo-styles/src/styles/loading-css.js'; import { CXLAppLayout } from '../cxl-ui/cxl-app-layout/layout=1c.stories'; diff --git a/packages/storybook/cxl-lumo-styles/typography.stories.js b/packages/storybook/cxl-lumo-styles/typography.stories.js index a8de94db..a948531d 100644 --- a/packages/storybook/cxl-lumo-styles/typography.stories.js +++ b/packages/storybook/cxl-lumo-styles/typography.stories.js @@ -1,7 +1,7 @@ import '@conversionxl/cxl-lumo-styles'; import '@vaadin/vaadin-button'; import { withKnobs } from '@storybook/addon-knobs'; -import { html } from 'lit-html'; +import { html } from 'lit'; export default { decorators: [withKnobs], diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-c.stories.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-c.stories.js index 99faf824..60a8e312 100644 --- a/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-c.stories.js +++ b/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-c.stories.js @@ -1,4 +1,4 @@ -import { html } from 'lit-html'; +import { html } from 'lit'; import '@conversionxl/cxl-ui/src/components/cxl-app-layout.js'; import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js'; import { CXLMarketingNav } from '../cxl-marketing-nav.stories'; diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-w.stories.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-w.stories.js index 10be4a08..505a9b83 100644 --- a/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-w.stories.js +++ b/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-w.stories.js @@ -1,4 +1,4 @@ -import { html } from 'lit-html'; +import { html } from 'lit'; import '@conversionxl/cxl-ui/src/components/cxl-app-layout.js'; import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js'; import { CXLMarketingNav } from '../cxl-marketing-nav.stories'; diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=1c.stories.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=1c.stories.js index 435d3ad1..72c221c0 100644 --- a/packages/storybook/cxl-ui/cxl-app-layout/layout=1c.stories.js +++ b/packages/storybook/cxl-ui/cxl-app-layout/layout=1c.stories.js @@ -1,4 +1,4 @@ -import { html } from 'lit-html'; +import { html } from 'lit'; import { withKnobs, boolean, text } from '@storybook/addon-knobs'; import '@conversionxl/cxl-ui/src/components/cxl-app-layout.js'; import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js'; diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-l.stories.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-l.stories.js index cdf38d38..711f481a 100644 --- a/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-l.stories.js +++ b/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-l.stories.js @@ -1,4 +1,4 @@ -import { html } from 'lit-html'; +import { html } from 'lit'; import { withKnobs, boolean } from '@storybook/addon-knobs'; import '@conversionxl/cxl-ui/src/components/cxl-app-layout.js'; import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js'; diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-r.stories.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-r.stories.js index d7dd068c..6232f21c 100644 --- a/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-r.stories.js +++ b/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-r.stories.js @@ -1,4 +1,4 @@ -import { html } from 'lit-html'; +import { html } from 'lit'; import { withKnobs, boolean } from '@storybook/addon-knobs'; import '@conversionxl/cxl-ui/src/components/cxl-app-layout.js'; import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js'; diff --git a/packages/storybook/cxl-ui/cxl-card/[theme=cxl-testimonial].stories.js b/packages/storybook/cxl-ui/cxl-card/[theme=cxl-testimonial].stories.js index db216599..e20dc66b 100644 --- a/packages/storybook/cxl-ui/cxl-card/[theme=cxl-testimonial].stories.js +++ b/packages/storybook/cxl-ui/cxl-card/[theme=cxl-testimonial].stories.js @@ -1,4 +1,4 @@ -import { html } from 'lit-html'; +import { html } from 'lit'; import '@conversionxl/cxl-ui/src/components/cxl-card.js'; import '@conversionxl/cxl-lumo-styles'; diff --git a/packages/storybook/cxl-ui/cxl-marketing-nav.stories.js b/packages/storybook/cxl-ui/cxl-marketing-nav.stories.js index abc715bd..2e2242d0 100644 --- a/packages/storybook/cxl-ui/cxl-marketing-nav.stories.js +++ b/packages/storybook/cxl-ui/cxl-marketing-nav.stories.js @@ -1,4 +1,4 @@ -import { html } from 'lit-html'; +import { html } from 'lit'; import { useEffect } from '@storybook/client-api'; import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js'; import { Headroom } from '@conversionxl/cxl-ui'; diff --git a/packages/storybook/cxl-ui/cxl-tabs-slider/cxl-tabs-slider.stories.js b/packages/storybook/cxl-ui/cxl-tabs-slider/cxl-tabs-slider.stories.js index ae663fdc..6ed214cb 100644 --- a/packages/storybook/cxl-ui/cxl-tabs-slider/cxl-tabs-slider.stories.js +++ b/packages/storybook/cxl-ui/cxl-tabs-slider/cxl-tabs-slider.stories.js @@ -1,6 +1,6 @@ import '@conversionxl/cxl-ui/src/components/cxl-card'; import '@conversionxl/cxl-ui/src/components/cxl-tabs-slider'; -import { html } from 'lit-html'; +import { html } from 'lit'; import { CXLTestimonial } from '../cxl-card/[theme=cxl-testimonial].stories'; import archiveData from '../cxl-vaadin-accordion/theme=cxl-archive.data.json'; diff --git a/packages/storybook/cxl-ui/cxl-vaadin-accordion/cxl-accordion-card.story.js b/packages/storybook/cxl-ui/cxl-vaadin-accordion/cxl-accordion-card.story.js index 47908d96..d2319c1b 100644 --- a/packages/storybook/cxl-ui/cxl-vaadin-accordion/cxl-accordion-card.story.js +++ b/packages/storybook/cxl-ui/cxl-vaadin-accordion/cxl-accordion-card.story.js @@ -1,5 +1,5 @@ -import { html } from 'lit-html'; -import { unsafeHTML } from 'lit-html/directives/unsafe-html'; +import { html } from 'lit'; +import { unsafeHTML } from 'lit/directives/unsafe-html'; import '@conversionxl/cxl-ui/src/components/cxl-vaadin-accordion.js'; import '@conversionxl/cxl-ui/src/components/cxl-accordion-card.js'; import archiveData from './theme=cxl-archive.data.json'; @@ -74,7 +74,7 @@ export const CXLVaadinAccordionThemeArchive = () => {
- ${unsafeHTML(el.content.cxl_get_extended_main)} + ${el.content.cxl_get_extended_main && unsafeHTML(el.content.cxl_get_extended_main)}
html` diff --git a/packages/storybook/cxl-ui/footer-nav.stories.js b/packages/storybook/cxl-ui/footer-nav.stories.js index b352a499..3a348832 100644 --- a/packages/storybook/cxl-ui/footer-nav.stories.js +++ b/packages/storybook/cxl-ui/footer-nav.stories.js @@ -1,4 +1,4 @@ -import { html } from 'lit-html'; +import { html } from 'lit'; export default { title: 'CXL UI/footer', diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 8e0f9e3c..cad84458 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -20,7 +20,7 @@ "@storybook/web-components": "^6.3.0-beta.9", "@vaadin/vaadin-button": "^3.0.0-alpha1", "@vaadin/vaadin-notification": "^2.0.0-alpha1", - "lit-html": "^2.0.0-rc.3" + "lit": "^2.0.0-rc.2" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" diff --git a/yarn.lock b/yarn.lock index 2c1a6293..14f6366a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2057,6 +2057,11 @@ npmlog "^4.1.2" write-file-atomic "^2.3.0" +"@lit/reactive-element@^1.0.0-rc.2": + version "1.0.0-rc.2" + resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.0.0-rc.2.tgz#f24dba16ea571a08dca70f1783bd2ca5ec8de3ee" + integrity sha512-cujeIl5Ei8FC7UHf4/4Q3bRJOtdTe1vpJV/JEBYCggedmQ+2P8A2oz7eE+Vxi6OJ4nc0X+KZxXnBoH4QrEbmEQ== + "@mrmlnc/readdir-enhanced@^2.2.1": version "2.2.1" resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde" @@ -10749,13 +10754,21 @@ listr@^0.14.3: p-map "^2.0.0" rxjs "^6.3.3" -lit-element@^2.0.0, lit-element@^2.0.1, lit-element@^2.2.1: +lit-element@^2.0.0, lit-element@^2.2.1: version "2.5.1" resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.5.1.tgz#3fa74b121a6cd22902409ae3859b7847d01aa6b6" integrity sha512-ogu7PiJTA33bEK0xGu1dmaX5vhcRjBXCFexPja0e7P7jqLhTpNKYRPmE+GmiCaRVAbiQKGkUgkh/i6+bh++dPQ== dependencies: lit-html "^1.1.1" +lit-element@^3.0.0-rc.2: + version "3.0.0-rc.2" + resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-3.0.0-rc.2.tgz#883d0b6fd7b846226d360699d1b713da5fc7e1b7" + integrity sha512-2Z7DabJ3b5K+p5073vFjMODoaWqy5PIaI4y6ADKm+fCGc8OnX9fU9dMoUEBZjFpd/bEFR9PBp050tUtBnT9XTQ== + dependencies: + "@lit/reactive-element" "^1.0.0-rc.2" + lit-html "^2.0.0-rc.3" + lit-html@^1.1.1: version "1.4.1" resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.4.1.tgz#0c6f3ee4ad4eb610a49831787f0478ad8e9ae5e0" @@ -10768,6 +10781,15 @@ lit-html@^2.0.0-rc.3: dependencies: "@types/trusted-types" "^1.0.1" +lit@^2.0.0-rc.2: + version "2.0.0-rc.2" + resolved "https://registry.yarnpkg.com/lit/-/lit-2.0.0-rc.2.tgz#724a2d621aa098001d73bf7106f3a72b7b5948ef" + integrity sha512-BOCuoJR04WaTV8UqTKk09cNcQA10Aq2LCcBOiHuF7TzWH5RNDsbCBP5QM9sLBSotGTXbDug/gFO08jq6TbyEtw== + dependencies: + "@lit/reactive-element" "^1.0.0-rc.2" + lit-element "^3.0.0-rc.2" + lit-html "^2.0.0-rc.3" + load-json-file@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"