From e983d03a0f950a4b3a52db2687b221b14ddd653c Mon Sep 17 00:00:00 2001 From: Leho Kraav Date: Thu, 23 Mar 2023 18:36:44 +0200 Subject: [PATCH] refactor(storybook): cxl-app-layout partial --- .../cxl-ui/cxl-app-layout.stories.js | 1 - .../cxl-ui/cxl-app-layout/_cxl-app-layout.js | 19 + .../cxl-app-layout/layout=1c-c.story.js | 86 ++- .../cxl-app-layout/layout=1c-w.story.js | 50 +- .../cxl-ui/cxl-app-layout/layout=1c.story.js | 108 ++- .../cxl-app-layout/layout=2c-l.story.js | 171 ++--- .../cxl-app-layout/layout=2c-r.story.js | 668 +++++++++--------- 7 files changed, 560 insertions(+), 543 deletions(-) create mode 100644 packages/storybook/cxl-ui/cxl-app-layout/_cxl-app-layout.js diff --git a/packages/storybook/cxl-ui/cxl-app-layout.stories.js b/packages/storybook/cxl-ui/cxl-app-layout.stories.js index d3d25e4b..9dde80b5 100644 --- a/packages/storybook/cxl-ui/cxl-app-layout.stories.js +++ b/packages/storybook/cxl-ui/cxl-app-layout.stories.js @@ -31,7 +31,6 @@ Object.assign(CXLAppLayout2cl, { Object.assign(CXLAppLayout2cr, { args: { - hasPanelsScroll: true, hasWidgetBackground: false, }, storyName: '[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 new file mode 100644 index 00000000..2461c31a --- /dev/null +++ b/packages/storybook/cxl-ui/cxl-app-layout/_cxl-app-layout.js @@ -0,0 +1,19 @@ +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 index 3ea4e039..28f8477f 100644 --- 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 @@ -1,50 +1,48 @@ 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'; -import { CXLFooterNav } from '../footer-nav.stories'; +import { CXLAppLayout } from './_cxl-app-layout'; export const CXLAppLayout1cc = () => html` - - ${CXLMarketingNav()} - -
-
- -

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 - -
-
- - ${CXLFooterNav()} - + ${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 7d396952..8956f2f7 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,34 +1,32 @@ 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'; -import { CXLFooterNav } from '../footer-nav.stories'; +import { CXLAppLayout } from './_cxl-app-layout'; import { CXLVaadinAccordionThemeArchive } from '../cxl-vaadin-accordion.stories'; export const CXLAppLayout1cw = () => html` - - ${CXLMarketingNav()} + ${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.

-
-
- -

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()} -
-
- - ${CXLFooterNav()} - + ${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 a75241d0..dd5907be 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 @@ -2,66 +2,58 @@ 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 { CXLMarketingNav } from '../cxl-marketing-nav.stories'; -import { CXLFooterNav } from '../footer-nav.stories'; import { VaadinTooltip } from '../../cxl-lumo-styles/elements.stories'; export const CXLAppLayout1c = ({ backgroundColor, hasWave }) => html` - - - - ${CXLMarketingNav()} - -
-
- - ${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.
    • -
- -
-
- - ${CXLFooterNav()} - + ${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.
    • +
+ +
+
+ `, + })} `; 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 9a77708b..d57ca757 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 @@ -4,7 +4,7 @@ import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js'; import '@conversionxl/cxl-ui/src/components/cxl-playbook-accordion.js'; import '@conversionxl/cxl-ui/src/components/cxl-save-favorite.js'; import '@vaadin/button'; -import { CXLMarketingNav } from '../cxl-marketing-nav.stories'; +import { CXLAppLayout } from './_cxl-app-layout'; import { CXLPlaybookAccordion } from '../cxl-vaadin-accordion.stories'; export const CXLAppLayout2cl = ({ hasWidgetBackground, postId, userId, playbookSaved }) => html` @@ -25,52 +25,56 @@ export const CXLAppLayout2cl = ({ hasWidgetBackground, postId, userId, playbookS } - - ${CXLMarketingNav()} - -
- -

- Jan 26, 2021 -

-
+ ${CXLAppLayout({ + layout: '2c-l', + scroll: 'panels', + content: html` +
+ +

+ + Jan 26, 2021 + +

+
-
- +
+ -

- -

+

+ +

-

- Share -
- Report -

-

- -

-
+

+ Share + + +
+ Report + + +

+

+ +

+
-
- - - +
+ +
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 d2fabd28..1f1b5292 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,368 +1,374 @@ 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'; +import { CXLAppLayout } from './_cxl-app-layout'; -export const CXLAppLayout2cr = ({ hasPanelsScroll, hasWidgetBackground }) => html` +export const CXLAppLayout2cr = ({ hasWidgetBackground }) => html` - - ${CXLMarketingNav()} + ${CXLAppLayout({ + layout: '2c-r', + scroll: 'panels', + content: html` +
+ +

+ The Persuasion Slide +

+ + -
- -

- The Persuasion Slide -

+
+

+ + +

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

- - 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 - - - - -
- + `, + })} `;