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): cxl-app-layout partial
- Loading branch information
Showing
7 changed files
with
558 additions
and
543 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
17 changes: 17 additions & 0 deletions
17
packages/storybook/cxl-ui/cxl-app-layout/_cxl-app-layout.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,17 @@ | ||
| import { html } from 'lit'; | ||
| import { CXLMarketingNav } from '../cxl-marketing-nav.stories'; | ||
| import { CXLFooterNav } from '../footer-nav.stories'; | ||
|
|
||
| export const CXLAppLayout = ({ layout, scroll, content }) => html` | ||
| <style> | ||
| .entry-content ul { | ||
| font-family: var(--cxl-lumo-font-secondary), serif; | ||
| } | ||
| </style> | ||
| ${CXLMarketingNav()} | ||
| <cxl-app-layout id="container" layout="${layout}" ?scroll="${scroll}">${content}</cxl-app-layout> | ||
| ${CXLFooterNav()} | ||
| `; |
86 changes: 42 additions & 44 deletions
86
packages/storybook/cxl-ui/cxl-app-layout/layout=1c-c.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 |
|---|---|---|
| @@ -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` | ||
| <cxl-app-layout id="container" layout="1c-c"> | ||
| ${CXLMarketingNav()} | ||
| <article class="entry"> | ||
| <header class="entry-header"> | ||
| <label>Page</label> | ||
| <h1 class="entry-title">Grow faster.</h1> | ||
| </header> | ||
| <div class="entry-content"> | ||
| <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> | ||
| <vaadin-horizontal-layout theme="cxl-marketing-hero-details spacing-s"> | ||
| <span><vaadin-icon icon="lumo:clock"></vaadin-icon>Updated 10/2022</span> | ||
| <span | ||
| ><vaadin-icon icon="vaadin:globe-wire" theme="lumo"></vaadin-icon>English | ||
| subtitles</span | ||
| > | ||
| <span><vaadin-icon icon="lumo:checkmark"></vaadin-icon>Certificate included</span> | ||
| </vaadin-horizontal-layout> | ||
| </div> | ||
| </article> | ||
| ${CXLFooterNav()} | ||
| </cxl-app-layout> | ||
| ${CXLAppLayout({ | ||
| layout: '1c-c', | ||
| content: html` | ||
| <article class="entry"> | ||
| <header class="entry-header"> | ||
| <label>Page</label> | ||
| <h1 class="entry-title">Grow faster.</h1> | ||
| </header> | ||
| <div class="entry-content"> | ||
| <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> | ||
| <vaadin-horizontal-layout theme="cxl-marketing-hero-details spacing-s"> | ||
| <span><vaadin-icon icon="lumo:clock"></vaadin-icon>Updated 10/2022</span> | ||
| <span | ||
| ><vaadin-icon icon="vaadin:globe-wire" theme="lumo"></vaadin-icon>English | ||
| subtitles</span | ||
| > | ||
| <span><vaadin-icon icon="lumo:checkmark"></vaadin-icon>Certificate included</span> | ||
| </vaadin-horizontal-layout> | ||
| </div> | ||
| </article> | ||
| `, | ||
| })}; | ||
| `; |
50 changes: 24 additions & 26 deletions
50
packages/storybook/cxl-ui/cxl-app-layout/layout=1c-w.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 |
|---|---|---|
| @@ -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` | ||
| <cxl-app-layout id="container" layout="1c-w"> | ||
| ${CXLMarketingNav()} | ||
| ${CXLAppLayout({ | ||
| layout: '1c-w', | ||
| content: html` | ||
| <article class="entry"> | ||
| <header class="entry-header"> | ||
| <label>Page</label> | ||
| <h1 class="entry-title">Join the top 1% of digital marketing.</h1> | ||
| </header> | ||
| <div class="entry-content"> | ||
| <h2> | ||
| We find the absolute best practitioners in the world, and get them to teach their craft. | ||
| Learn from the top performers to become one. | ||
| </h2> | ||
| <p> | ||
| Self-paced online digital marketing courses on all things conversion optimization, | ||
| digital analytics and digital marketing. | ||
| </p> | ||
| <p><strong>All in a single subscription.</strong></p> | ||
| <article class="entry"> | ||
| <header class="entry-header"> | ||
| <label>Page</label> | ||
| <h1 class="entry-title">Join the top 1% of digital marketing.</h1> | ||
| </header> | ||
| <div class="entry-content"> | ||
| <h2> | ||
| We find the absolute best practitioners in the world, and get them to teach their craft. | ||
| Learn from the top performers to become one. | ||
| </h2> | ||
| <p> | ||
| Self-paced online digital marketing courses on all things conversion optimization, digital | ||
| analytics and digital marketing. | ||
| </p> | ||
| <p><strong>All in a single subscription.</strong></p> | ||
| ${CXLVaadinAccordionThemeArchive()} | ||
| </div> | ||
| </article> | ||
| ${CXLFooterNav()} | ||
| </cxl-app-layout> | ||
| ${CXLVaadinAccordionThemeArchive()} | ||
| </div> | ||
| </article> | ||
| `, | ||
| })}; | ||
| `; |
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.