From e370e9d6e08e7f5df47afb16109602f4b359163c Mon Sep 17 00:00:00 2001 From: Leho Kraav Date: Thu, 23 Mar 2023 11:39:19 +0200 Subject: [PATCH] refactor(storybook): centralize cxl-app-layout stories --- .../cxl-lumo-styles/body-loading.stories.js | 7 +- .../cxl-ui/cxl-app-layout.stories.js | 40 ++ ...t=1c-c.stories.js => layout=1c-c.story.js} | 6 - ...t=1c-w.stories.js => layout=1c-w.story.js} | 6 - .../cxl-app-layout/layout=1c.stories.js | 80 ---- .../cxl-ui/cxl-app-layout/layout=1c.story.js | 67 +++ ...t=2c-l.stories.js => layout=2c-l.story.js} | 17 +- .../cxl-app-layout/layout=2c-r.stories.js | 387 ------------------ .../cxl-app-layout/layout=2c-r.story.js | 368 +++++++++++++++++ 9 files changed, 478 insertions(+), 500 deletions(-) create mode 100644 packages/storybook/cxl-ui/cxl-app-layout.stories.js rename packages/storybook/cxl-ui/cxl-app-layout/{layout=1c-c.stories.js => layout=1c-c.story.js} (95%) rename packages/storybook/cxl-ui/cxl-app-layout/{layout=1c-w.stories.js => layout=1c-w.story.js} (92%) delete mode 100644 packages/storybook/cxl-ui/cxl-app-layout/layout=1c.stories.js create mode 100644 packages/storybook/cxl-ui/cxl-app-layout/layout=1c.story.js rename packages/storybook/cxl-ui/cxl-app-layout/{layout=2c-l.stories.js => layout=2c-l.story.js} (93%) delete mode 100644 packages/storybook/cxl-ui/cxl-app-layout/layout=2c-r.stories.js create mode 100644 packages/storybook/cxl-ui/cxl-app-layout/layout=2c-r.story.js diff --git a/packages/storybook/cxl-lumo-styles/body-loading.stories.js b/packages/storybook/cxl-lumo-styles/body-loading.stories.js index 22d9412be..4c4797033 100644 --- a/packages/storybook/cxl-lumo-styles/body-loading.stories.js +++ b/packages/storybook/cxl-lumo-styles/body-loading.stories.js @@ -1,10 +1,8 @@ -import { withKnobs } from '@storybook/addon-knobs'; import { html } from 'lit'; import cxlLoadingStyles from '@conversionxl/cxl-lumo-styles/src/styles/loading-css'; -import { CXLAppLayout } from '../cxl-ui/cxl-app-layout/layout=1c.stories'; +import { CXLAppLayout1c } from '../cxl-ui/cxl-app-layout.stories'; export default { - decorators: [withKnobs], title: 'CXL Lumo Styles/Body', }; @@ -12,7 +10,6 @@ export default { * CXLLoadingSpinner. * * @param Loading - * @returns {TemplateResult} * @constructor */ export const CXLLoadingSpinner = ({ Loading }) => { @@ -28,7 +25,7 @@ export const CXLLoadingSpinner = ({ Loading }) => { - ${CXLAppLayout()} + ${CXLAppLayout1c(CXLAppLayout1c.args)} `; }; diff --git a/packages/storybook/cxl-ui/cxl-app-layout.stories.js b/packages/storybook/cxl-ui/cxl-app-layout.stories.js new file mode 100644 index 000000000..d3d25e4bb --- /dev/null +++ b/packages/storybook/cxl-ui/cxl-app-layout.stories.js @@ -0,0 +1,40 @@ +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'; + +export default { + title: 'CXL UI/cxl-app-layout', +}; + +Object.assign(CXLAppLayout1c, { + args: { + backgroundColor: 'var(--lumo-shade-5pct)', + hasWave: true, + }, + storyName: '[layout=1c] (default)', +}); + +CXLAppLayout1cc.storyName = '[layout=1c-c]'; +CXLAppLayout1cw.storyName = '[layout=1c-w]'; + +Object.assign(CXLAppLayout2cl, { + args: { + postId: 1234, + userId: 5678, + playbookSaved: false, + hasWidgetBackground: false, + }, + storyName: '[layout=2c-l]', +}); + +Object.assign(CXLAppLayout2cr, { + args: { + hasPanelsScroll: true, + hasWidgetBackground: false, + }, + storyName: '[layout=2c-r]', +}); + +export { CXLAppLayout1c, CXLAppLayout1cc, CXLAppLayout1cw, CXLAppLayout2cl, CXLAppLayout2cr }; 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.story.js similarity index 95% rename from packages/storybook/cxl-ui/cxl-app-layout/layout=1c-c.stories.js rename to packages/storybook/cxl-ui/cxl-app-layout/layout=1c-c.story.js index ac5323ef7..3ea4e039b 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.story.js @@ -4,10 +4,6 @@ import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js'; import { CXLMarketingNav } from '../cxl-marketing-nav.stories'; import { CXLFooterNav } from '../footer-nav.stories'; -export default { - title: 'CXL UI/cxl-app-layout', -}; - export const CXLAppLayout1cc = () => html` ${CXLMarketingNav()} @@ -52,5 +48,3 @@ export const CXLAppLayout1cc = () => html` ${CXLFooterNav()} `; - -CXLAppLayout1cc.storyName = '[layout=1c-c]'; 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.story.js similarity index 92% rename from packages/storybook/cxl-ui/cxl-app-layout/layout=1c-w.stories.js rename to packages/storybook/cxl-ui/cxl-app-layout/layout=1c-w.story.js index 505a9b831..7d3969522 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.story.js @@ -5,10 +5,6 @@ import { CXLMarketingNav } from '../cxl-marketing-nav.stories'; import { CXLFooterNav } from '../footer-nav.stories'; import { CXLVaadinAccordionThemeArchive } from '../cxl-vaadin-accordion.stories'; -export default { - title: 'CXL UI/cxl-app-layout', -}; - export const CXLAppLayout1cw = () => html` ${CXLMarketingNav()} @@ -36,5 +32,3 @@ export const CXLAppLayout1cw = () => html` ${CXLFooterNav()} `; - -CXLAppLayout1cw.storyName = '[layout=1c-w]'; 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 deleted file mode 100644 index c86adbbf0..000000000 --- a/packages/storybook/cxl-ui/cxl-app-layout/layout=1c.stories.js +++ /dev/null @@ -1,80 +0,0 @@ -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'; -import '@conversionxl/cxl-ui/src/components/cxl-section.js'; -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 default { - decorators: [withKnobs], - title: 'CXL UI/cxl-app-layout', -}; - -export const CXLAppLayout = () => { - const backgroundColor = text('Background color', 'var(--lumo-shade-5pct)'); - const hasWave = boolean('Has wave bottom?', true); - - return 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.storyName = '[layout=1c] (default)'; 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 new file mode 100644 index 000000000..a75241d00 --- /dev/null +++ b/packages/storybook/cxl-ui/cxl-app-layout/layout=1c.story.js @@ -0,0 +1,67 @@ +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 '@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()} + +`; 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.story.js similarity index 93% rename from packages/storybook/cxl-ui/cxl-app-layout/layout=2c-l.stories.js rename to packages/storybook/cxl-ui/cxl-app-layout/layout=2c-l.story.js index 7235459c1..9a77708b9 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.story.js @@ -7,11 +7,7 @@ import '@vaadin/button'; import { CXLMarketingNav } from '../cxl-marketing-nav.stories'; import { CXLPlaybookAccordion } from '../cxl-vaadin-accordion.stories'; -export default { - title: 'CXL UI/cxl-app-layout', -}; - -const Template = ({ hasWidgetBackground, postId, userId, playbookSaved }) => html` +export const CXLAppLayout2cl = ({ hasWidgetBackground, postId, userId, playbookSaved }) => html` - - - ${CXLMarketingNav()} - -
- -

- The Persuasion Slide -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
- -

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 -

- -

- 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.

-
-
- -
- Complete lesson - Secondary action - - - - -
- - `; -}; - -CXLAppLayout2cr.storyName = '[layout=2c-r]'; 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 new file mode 100644 index 000000000..d2fabd281 --- /dev/null +++ b/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-r.story.js @@ -0,0 +1,368 @@ +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'; + +export const CXLAppLayout2cr = ({ hasPanelsScroll, hasWidgetBackground }) => html` + + + + ${CXLMarketingNav()} + +
+ +

+ The Persuasion Slide +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ +

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 +

+ +

+ 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.

+
+
+ +
+ Complete lesson + Secondary action + + + + +
+ +`;