forked from web-padawan/aybolit
-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(storybook): centralize cxl-app-layout stories
- Loading branch information
Showing
9 changed files
with
478 additions
and
500 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
80 changes: 0 additions & 80 deletions
80
packages/storybook/cxl-ui/cxl-app-layout/layout=1c.stories.js
This file was deleted.
Oops, something went wrong.
67 changes: 67 additions & 0 deletions
67
packages/storybook/cxl-ui/cxl-app-layout/layout=1c.story.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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` | ||
| <style> | ||
| .entry-content ul { | ||
| font-family: var(--cxl-lumo-font-secondary), serif; | ||
| } | ||
| </style> | ||
| <cxl-app-layout id="container" layout="1c"> | ||
| ${CXLMarketingNav()} | ||
| <article class="entry"> | ||
| <div class="entry-content"> | ||
| <cxl-section | ||
| class="alignwide has-background ${hasWave ? 'has-wave' : ''}" | ||
| style="${backgroundColor ? `background-color: ${backgroundColor}` : ''}" | ||
| > | ||
| ${VaadinTooltip(VaadinTooltip.args)} | ||
| <h2> | ||
| The difference between high-growth and slow-growth companies is the skill sets they have | ||
| to make it happen. | ||
| </h2> | ||
| <p>At CXL, we provide</p> | ||
| <ul> | ||
| <li>marketing training programs to people serious about their career,</li> | ||
| <li> | ||
| managed online revenue optimization & experimentation services to help mid-to-large | ||
| companies accelerate growth. | ||
| </li> | ||
| </ul> | ||
| <p> | ||
| <vaadin-button theme="primary large" | ||
| >Marketing training <vaadin-icon icon="lumo:angle-right" slot="suffix"></vaadin-icon | ||
| ></vaadin-button> | ||
| <vaadin-button theme="primary large contrast" | ||
| >Managed services <vaadin-icon icon="lumo:angle-right" slot="suffix"></vaadin-icon | ||
| ></vaadin-button> | ||
| </p> | ||
| </cxl-section> | ||
| <cxl-section> | ||
| <h2>Start getting <strong>more</strong> and <strong>bigger wins</strong></h2> | ||
| <p> | ||
| 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. | ||
| </p> | ||
| <p>After completing it you will</p> | ||
| <ul> | ||
| <li>improve your skills in conversion optimization, UX, and web analytics,</li> | ||
| <li>understand what works on websites, and what doesn't,</li> | ||
| <li>develop better A/B tests that win more often.</li> | ||
| </ul> | ||
| </cxl-section> | ||
| </div> | ||
| </article> | ||
| ${CXLFooterNav()} | ||
| </cxl-app-layout> | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.