From 4dca853738d3601f07709fc17cfa17393fc031ce Mon Sep 17 00:00:00 2001 From: Leho Kraav Date: Thu, 23 Mar 2023 19:11:47 +0200 Subject: [PATCH] refactor(storybook): migrate to CSF3 [1][2] 1: https://storybook.js.org/blog/storybook-csf3-is-here/ 2: https://storybook.js.org/docs/7.0/web-components/api/csf --- packages/cxl-ui/src/components/cxl-section.js | 41 +- packages/storybook/.storybook/main.js | 4 + .../cxl-lumo-styles/body-loading.stories.js | 2 +- .../cxl-lumo-styles/elements.stories.js | 32 +- .../cxl-ui/cxl-app-layout.stories.js | 89 ++- .../cxl-ui/cxl-app-layout/_cxl-app-layout.js | 12 - .../cxl-app-layout/layout=1c-c.story.js | 48 -- .../cxl-app-layout/layout=1c-w.story.js | 46 +- .../cxl-ui/cxl-app-layout/layout=1c.story.js | 76 +- .../cxl-app-layout/layout=2c-l.story.js | 220 +++--- .../cxl-app-layout/layout=2c-r.story.js | 681 +++++++++--------- .../storybook/cxl-ui/cxl-section.stories.js | 61 ++ 12 files changed, 656 insertions(+), 656 deletions(-) delete mode 100644 packages/storybook/cxl-ui/cxl-app-layout/layout=1c-c.story.js create mode 100644 packages/storybook/cxl-ui/cxl-section.stories.js diff --git a/packages/cxl-ui/src/components/cxl-section.js b/packages/cxl-ui/src/components/cxl-section.js index e82c5d89..890d061a 100644 --- a/packages/cxl-ui/src/components/cxl-section.js +++ b/packages/cxl-ui/src/components/cxl-section.js @@ -1,26 +1,49 @@ -import { LitElement, html, svg } from 'lit'; -import { customElement } from 'lit/decorators.js'; +import { LitElement, html } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { when } from 'lit/directives/when.js'; import '@conversionxl/cxl-lumo-styles'; import cxlSectionStyles from '../styles/cxl-section-css'; @customElement('cxl-section') export class CXLSectionElement extends LitElement { + @property({ type: Boolean }) + get hasWave() { + return this.classList.contains('has-wave'); + } + + static get observedAttributes() { + return ['class']; + } + static get styles() { return [cxlSectionStyles]; } + // Better Storybook DX. + attributeChangedCallback(name, old, value) { + super.attributeChangedCallback(name, old, value); + + if (name === 'class') { + this.requestUpdate(); + } + } + render() { return html`
- ${this.classList.contains('has-wave') - ? svg` - - - - ` - : ''} + ${when( + this.hasWave, + () => html` + + + + ` + )} `; } } diff --git a/packages/storybook/.storybook/main.js b/packages/storybook/.storybook/main.js index 109b4785..c04bb3c8 100644 --- a/packages/storybook/.storybook/main.js +++ b/packages/storybook/.storybook/main.js @@ -17,6 +17,10 @@ module.exports = { }, }, features: { + /** + * @see https://github.com/storybookjs/storybook/pull/18464 + * @todo Update stories to CSF3 `name` property. + */ storyStoreV7: true, }, // @see https://github.com/storybookjs/storybook/issues/12307 diff --git a/packages/storybook/cxl-lumo-styles/body-loading.stories.js b/packages/storybook/cxl-lumo-styles/body-loading.stories.js index 4c479703..a08a9373 100644 --- a/packages/storybook/cxl-lumo-styles/body-loading.stories.js +++ b/packages/storybook/cxl-lumo-styles/body-loading.stories.js @@ -25,7 +25,7 @@ export const CXLLoadingSpinner = ({ Loading }) => { - ${CXLAppLayout1c(CXLAppLayout1c.args)} + ${CXLAppLayout1c.render(CXLAppLayout1c.args)} `; }; diff --git a/packages/storybook/cxl-lumo-styles/elements.stories.js b/packages/storybook/cxl-lumo-styles/elements.stories.js index b0bfc700..4c56d922 100644 --- a/packages/storybook/cxl-lumo-styles/elements.stories.js +++ b/packages/storybook/cxl-lumo-styles/elements.stories.js @@ -1,11 +1,10 @@ import { html } from 'lit'; -import { withKnobs, boolean } from '@storybook/addon-knobs'; import '@conversionxl/cxl-lumo-styles'; import '@vaadin/button'; import '@vaadin/notification'; +import '@vaadin/tooltip'; export default { - decorators: [withKnobs], title: 'CXL Lumo Styles/Elements', }; @@ -13,7 +12,6 @@ export default { * VaadinButton. * * @param Label - * @returns {TemplateResult} * @constructor */ export const VaadinButton = ({ Label }) => html` @@ -50,7 +48,6 @@ Object.assign(VaadinButton, { /** * VaadinHorizontalLayout. * - * @returns {TemplateResult} * @constructor */ export const VaadinHorizontalLayout = () => html` @@ -71,7 +68,6 @@ Object.assign(VaadinHorizontalLayout, { * @param Duration * @param Position * @param Theme - * @returns {TemplateResult} * @constructor */ export const VaadinNotification = ({ Duration, Position, Theme }) => html` @@ -132,35 +128,27 @@ Object.assign(VaadinNotification, { /** * VaadinTooltip. - * - * @param Text - * @returns {TemplateResult} - * @constructor */ -export const VaadinTooltip = ({ Text }) => { - const manualTrigger = boolean('Manual trigger', false); - - return html` +export const VaadinTooltip = { + args: { + manualTrigger: false, + text: 'Status: publish', + }, + name: 'vaadin-tooltip', + render: ({ text, manualTrigger }) => html`

Grow faster.

- `; + `, }; -Object.assign(VaadinTooltip, { - args: { - Text: 'Status: publish', - }, - storyName: 'vaadin-tooltip', -}); - export const VaadinBadge = () => html` Badge Success diff --git a/packages/storybook/cxl-ui/cxl-app-layout.stories.js b/packages/storybook/cxl-ui/cxl-app-layout.stories.js index 9dde80b5..7efe9108 100644 --- a/packages/storybook/cxl-ui/cxl-app-layout.stories.js +++ b/packages/storybook/cxl-ui/cxl-app-layout.stories.js @@ -1,39 +1,80 @@ -import { CXLAppLayout1c } from './cxl-app-layout/layout=1c.story'; -import { CXLAppLayout1cc } from './cxl-app-layout/layout=1c-c.story'; -import { CXLAppLayout1cw } from './cxl-app-layout/layout=1c-w.story'; -import { CXLAppLayout2cl } from './cxl-app-layout/layout=2c-l.story'; -import { CXLAppLayout2cr } from './cxl-app-layout/layout=2c-r.story'; +import { html, nothing } from 'lit'; +import { CXLAppLayout1cContent } from './cxl-app-layout/layout=1c.story'; +import { CXLAppLayout1cwContent } from './cxl-app-layout/layout=1c-w.story'; +import { CXLAppLayout2clContent } from './cxl-app-layout/layout=2c-l.story'; +import { CXLAppLayout2crContent } from './cxl-app-layout/layout=2c-r.story'; +import { CXLMarketingNav } from './cxl-marketing-nav.stories'; +import { CXLFooterNav } from './footer-nav.stories'; export default { title: 'CXL UI/cxl-app-layout', }; -Object.assign(CXLAppLayout1c, { +const CXLAppLayout = { + render: ({ layout, scroll, content }) => html` + + + + ${CXLMarketingNav()} ${content} ${scroll === 'panels' ? nothing : CXLFooterNav()} + + `, +}; + +// @see https://storybook.js.org/docs/7.0/web-components/writing-stories/stories-for-multiple-components +export const CXLAppLayout1c = { + ...CXLAppLayout, args: { - backgroundColor: 'var(--lumo-shade-5pct)', - hasWave: true, + content: CXLAppLayout1cContent, + layout: '1c', }, - storyName: '[layout=1c] (default)', -}); + name: '[layout=1c] (default)', +}; -CXLAppLayout1cc.storyName = '[layout=1c-c]'; -CXLAppLayout1cw.storyName = '[layout=1c-w]'; +export const CXLAppLayout1cc = { + ...CXLAppLayout, + args: { + ...CXLAppLayout1c.args, + layout: '1c-c', + }, + name: '[layout=1c-c]', +}; -Object.assign(CXLAppLayout2cl, { +export const CXLAppLayout1cw = { + ...CXLAppLayout, args: { - postId: 1234, - userId: 5678, - playbookSaved: false, - hasWidgetBackground: false, + content: CXLAppLayout1cwContent, + layout: '1c-w', }, - storyName: '[layout=2c-l]', -}); + name: '[layout=1c-w]', +}; -Object.assign(CXLAppLayout2cr, { +export const CXLAppLayout2cl = { + ...CXLAppLayout, args: { - hasWidgetBackground: false, + content: CXLAppLayout2clContent({ + postId: 1234, + userId: 5678, + playbookSaved: false, + hasWidgetBackground: false, + }), + layout: '2c-l', + scroll: 'panels', }, - storyName: '[layout=2c-r]', -}); + name: '[layout=2c-l]', +}; -export { CXLAppLayout1c, CXLAppLayout1cc, CXLAppLayout1cw, CXLAppLayout2cl, CXLAppLayout2cr }; +export const CXLAppLayout2cr = { + ...CXLAppLayout, + args: { + content: CXLAppLayout2crContent({ + hasWidgetBackground: false, + }), + layout: '2c-r', + scroll: 'panels', + }, + name: '[layout=2c-r]', +}; diff --git a/packages/storybook/cxl-ui/cxl-app-layout/_cxl-app-layout.js b/packages/storybook/cxl-ui/cxl-app-layout/_cxl-app-layout.js index c774c6fc..1c3c7fff 100644 --- a/packages/storybook/cxl-ui/cxl-app-layout/_cxl-app-layout.js +++ b/packages/storybook/cxl-ui/cxl-app-layout/_cxl-app-layout.js @@ -1,15 +1,3 @@ import { html, nothing } from 'lit'; import { CXLMarketingNav } from '../cxl-marketing-nav.stories'; import { CXLFooterNav } from '../footer-nav.stories'; - -export const CXLAppLayout = ({ layout, scroll, content }) => html` - - - - ${CXLMarketingNav()} ${content} ${scroll === 'panels' ? nothing : CXLFooterNav()} - -`; diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-c.story.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-c.story.js deleted file mode 100644 index 28f8477f..00000000 --- a/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-c.story.js +++ /dev/null @@ -1,48 +0,0 @@ -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 { CXLAppLayout } from './_cxl-app-layout'; - -export const CXLAppLayout1cc = () => html` - ${CXLAppLayout({ - layout: '1c-c', - content: html` -
-
- -

Grow faster.

-
-
-

- The difference between high-growth and slow-growth companies is the skill sets they have - to make it happen. -

-

At CXL, we provide

-
    -
  • marketing training programs to people serious about their career,
    • -
  • - managed online revenue optimization & experimentation services to help mid-to-large - companies accelerate growth. -
    • -
-

- Marketing training - Managed services -

- - Updated 10/2022 - English - subtitles - Certificate included - -
-
- `, - })} -`; diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-w.story.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-w.story.js index 8956f2f7..47790db8 100644 --- a/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-w.story.js +++ b/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-w.story.js @@ -1,32 +1,24 @@ 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 { CXLAppLayout } from './_cxl-app-layout'; import { CXLVaadinAccordionThemeArchive } from '../cxl-vaadin-accordion.stories'; -export const CXLAppLayout1cw = () => html` - ${CXLAppLayout({ - layout: '1c-w', - content: html` -
-
- -

Join the top 1% of digital marketing.

-
-
-

- We find the absolute best practitioners in the world, and get them to teach their craft. - Learn from the top performers to become one. -

-

- Self-paced online digital marketing courses on all things conversion optimization, - digital analytics and digital marketing. -

-

All in a single subscription.

+export const CXLAppLayout1cwContent = html` +
+
+ +

Join the top 1% of digital marketing.

+
+
+

+ We find the absolute best practitioners in the world, and get them to teach their craft. + Learn from the top performers to become one. +

+

+ Self-paced online digital marketing courses on all things conversion optimization, digital + analytics and digital marketing. +

+

All in a single subscription.

- ${CXLVaadinAccordionThemeArchive()} -
-
- `, - })} + ${CXLVaadinAccordionThemeArchive()} +
+
`; diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=1c.story.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=1c.story.js index dd5907be..74357f41 100644 --- a/packages/storybook/cxl-ui/cxl-app-layout/layout=1c.story.js +++ b/packages/storybook/cxl-ui/cxl-app-layout/layout=1c.story.js @@ -1,59 +1,25 @@ 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 '@conversionxl/cxl-ui/src/components/cxl-section.js'; -import { CXLAppLayout } from './_cxl-app-layout'; -import '@vaadin/tooltip'; -import { VaadinTooltip } from '../../cxl-lumo-styles/elements.stories'; +import { CXLSection } from '../cxl-section.stories'; -export const CXLAppLayout1c = ({ backgroundColor, hasWave }) => html` - ${CXLAppLayout({ - layout: '1c', - content: html` -
-
- - ${VaadinTooltip(VaadinTooltip.args)} -

- The difference between high-growth and slow-growth companies is the skill sets they - have to make it happen. -

-

At CXL, we provide

-
    -
  • marketing training programs to people serious about their career,
    • -
  • - managed online revenue optimization & experimentation services to help mid-to-large - companies accelerate growth. -
    • -
-

- Marketing training - Managed services -

- - -

Start getting more and bigger wins

-

- Getting results you want with conversion optimization and experimentation is all about - knowing what to do. It’s a field where you need to know a lot about a lot, and this - program contains it all. -

-

After completing it you will

-
    -
  • improve your skills in conversion optimization, UX, and web analytics,
    • -
  • understand what works on websites, and what doesn't,
    • -
  • develop better A/B tests that win more often.
    • -
- -
-
- `, - })} +export const CXLAppLayout1cContent = html` +
+
+ ${CXLSection.render(CXLSection.args)} + +

Start getting more and bigger wins

+

+ Getting results you want with conversion optimization and experimentation is all about + knowing what to do. It’s a field where you need to know a lot about a lot, and this + program contains it all. +

+

After completing it you will

+
    +
  • improve your skills in conversion optimization, UX, and web analytics,
    • +
  • understand what works on websites, and what doesn't,
    • +
  • develop better A/B tests that win more often.
    • +
+ +
+
`; diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-l.story.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-l.story.js index d57ca757..670571b8 100644 --- a/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-l.story.js +++ b/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-l.story.js @@ -1,13 +1,18 @@ 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 '@conversionxl/cxl-ui/src/components/cxl-like-or-dislike.js'; import '@conversionxl/cxl-ui/src/components/cxl-playbook-accordion.js'; +import '@conversionxl/cxl-ui/src/components/cxl-playbook-progress-bar.js'; import '@conversionxl/cxl-ui/src/components/cxl-save-favorite.js'; import '@vaadin/button'; -import { CXLAppLayout } from './_cxl-app-layout'; +import '@vaadin/details'; import { CXLPlaybookAccordion } from '../cxl-vaadin-accordion.stories'; -export const CXLAppLayout2cl = ({ hasWidgetBackground, postId, userId, playbookSaved }) => html` +export const CXLAppLayout2clContent = ({ + hasWidgetBackground, + postId, + userId, + playbookSaved, +}) => html` - ${CXLAppLayout({ - layout: '2c-l', - scroll: 'panels', - content: html` -
- -

- - Jan 26, 2021 - -

-
+
+ +

+ + Jan 26, 2021 + +

+
-
- +
+ -

- -

+

+ +

-

- Share - - -
- Report - - -

-

- -

-
+

+ Share + + +
+ Report + + +

+

+ +

+
-
- - -
- - Wes Bush -
-

- Wes would rather jump out of a plane than read about what skydiving feels like. - Similarly, he rather test out a promising software product than read a whitepaper about - how “life-changing” the product is going to be. -

-

- Last time Wes checked, he has generated well over 130,000 free trial users since - founding Traffic Is Currency, an agency that - specializes in this kind of thing. -

- -
+
+ + +
+ + Wes Bush +
+

+ Wes would rather jump out of a plane than read about what skydiving feels like. Similarly, + he rather test out a promising software product than read a whitepaper about how + “life-changing” the product is going to be. +

+

+ Last time Wes checked, he has generated well over 130,000 free trial users since founding + Traffic Is Currency, an agency that specializes + in this kind of thing. +

+ +
-
- -
- Andreea Macoveiciuc -
-
+
+ +
+ Andreea Macoveiciuc +
+
-
- -
- Is your SaaS go-to-market strategy tsunami-proof? -
-
+
+ +
+ Is your SaaS go-to-market strategy tsunami-proof? +
+
-
-
- -

Choose a traditional SaaS go-to-market strategy

-
- - - -
-
+
+
+ +

Choose a traditional SaaS go-to-market strategy

+
+ + + +
+
-
-

Use case

-

- Consider your environment to decide which traditional action plan (sales-led or - marketing-led) will help your company acquire customers in the most capital-efficient - way. -

-
+
+

Use case

+

+ Consider your environment to decide which traditional action plan (sales-led or + marketing-led) will help your company acquire customers in the most capital-efficient way. +

+
-
${CXLPlaybookAccordion(CXLPlaybookAccordion.args)}
-
- `, - })} +
${CXLPlaybookAccordion(CXLPlaybookAccordion.args)}
+
`; diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-r.story.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-r.story.js index 1f1b5292..a54a472e 100644 --- a/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-r.story.js +++ b/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-r.story.js @@ -1,374 +1,361 @@ 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 { CXLAppLayout } from './_cxl-app-layout'; +import '@vaadin/button'; +import '@vaadin/context-menu'; -export const CXLAppLayout2cr = ({ hasWidgetBackground }) => html` +export const CXLAppLayout2crContent = ({ hasWidgetBackground }) => html` - ${CXLAppLayout({ - layout: '2c-r', - scroll: 'panels', - content: html` -
+ +

+ The Persuasion Slide - -

- The Persuasion Slide -

+ - + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - -
+
+
+

+ + +

+
+ +
+ + -
-
- -

The Persuasion Slide

-
- Completed 4 lessons of 8 in total - Completed 4 lessons of 8 in total -
-
In Progress
-
-
-
+
+
+ +

The Persuasion Slide

+
+ Completed 4 lessons of 8 in total + Completed 4 lessons of 8 in total +
+
In Progress
+
+
+
-
- -
+
+ +
-
-

Total time: 18 min

-

- Too many websites pour all of their time, money, and energy into acquiring leads. But - without a dependable strategy to convert this traffic to paying customers, all this - effort would be in vain.
- In this video course, Justin Rondeau introduces Digital Marketer’s Customer Value - Optimization Model. This is an original 5-step framework which has been - consistently proven to convert prospects across a range of industries, - from e-commerce to b2b. -

- -

- Throughout the course, Rondeau will detail and give examples for each of these 5 steps: -

-
    -
  1. Determining market fit
    2. -
  2. Generating leads
    3. -
  3. Turning lead into a buyer
    4. -
  4. Turning that buyer into a multiple purchaser
    5. -
  5. Re-engaging lost customers
    6. -
-

- About your instructor -

+
+

Total time: 18 min

+

+ Too many websites pour all of their time, money, and energy into acquiring leads. But + without a dependable strategy to convert this traffic to paying customers, all this effort + would be in vain.
+ In this video course, Justin Rondeau introduces Digital Marketer’s Customer Value + Optimization Model. This is an original 5-step framework which has been consistently + proven to convert prospects across a range of industries, from e-commerce to b2b. +

+ +

Throughout the course, Rondeau will detail and give examples for each of these 5 steps:

+
    +
  1. Determining market fit
    2. +
  2. Generating leads
    3. +
  3. Turning lead into a buyer
    4. +
  4. Turning that buyer into a multiple purchaser
    5. +
  5. Re-engaging lost customers
    6. +
+

+ About your instructor +

-

- Justin Rondeau is the Director of Optimization at Digital Marketer and runs all of the - optimization efforts and split tests at DM and is active among our other properties. -

-

- A top-rated domestic and international speaker, Rondeau has spent his entire career - working on optimization campaigns and has helped train some of the leading optimization - teams at Fortune 500 companies. -

-

- Rondeau has run hundreds of tests for both B2B and eCommerce brands and has analyzed - 3,000+ tests across virtually every industry. -

-

- rondeau portrait -

+

+ Justin Rondeau is the Director of Optimization at Digital Marketer and runs all of the + optimization efforts and split tests at DM and is active among our other properties. +

+

+ A top-rated domestic and international speaker, Rondeau has spent his entire career working + on optimization campaigns and has helped train some of the leading optimization teams at + Fortune 500 companies. +

+

+ Rondeau has run hundreds of tests for both B2B and eCommerce brands and has analyzed 3,000+ + tests across virtually every industry. +

+

+ rondeau portrait +

-

- Overview video -

-

Ending paragraph here.

-
-
+

+ Overview video +

+

Ending paragraph here.

+ +
-
- Complete lesson - - - Secondary action - - - - - - -
- `, - })} +
+ Complete lesson + + + Secondary action + + + + + + +
`; diff --git a/packages/storybook/cxl-ui/cxl-section.stories.js b/packages/storybook/cxl-ui/cxl-section.stories.js new file mode 100644 index 00000000..eb30ce26 --- /dev/null +++ b/packages/storybook/cxl-ui/cxl-section.stories.js @@ -0,0 +1,61 @@ +import { html } from 'lit'; +import '@conversionxl/cxl-ui/src/components/cxl-section.js'; +import '@vaadin/tooltip'; +import { VaadinTooltip } from '../cxl-lumo-styles/elements.stories'; +import '@vaadin/button'; +import '@vaadin/icon'; +import '@vaadin/horizontal-layout'; + +const meta = { + component: 'cxl-section', + title: 'CXL UI/cxl-section', +}; + +export default meta; + +export const CXLSection = { + args: { + backgroundColor: 'var(--lumo-shade-5pct)', + hasWave: true, + }, + name: 'cxl-section', + render: ({ backgroundColor, hasWave, content }) => html` + + ${content || + html` + ${VaadinTooltip.render(VaadinTooltip.args)} +

+ The difference between high-growth and slow-growth companies is the skill sets they have + to make it happen. +

+

At CXL, we provide

+ +

+ Marketing training + Managed services +

+ + Updated 10/2022 + English + subtitles + Certificate included + + `} + + `, +};