generated from adobe/aem-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
render method for styleguide-containers
- Loading branch information
izabela.horodenska
committed
Apr 18, 2024
1 parent
37ee43d
commit 798ce4f
Showing
18 changed files
with
1,340 additions
and
714 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,87 @@ | ||
| import { html, render } from 'https://unpkg.com/[email protected]/lit-html.js'; | ||
|
|
||
| export const bannerTemplate = () => { | ||
| return html` | ||
| <div class="theme-content-category" id="banner"> | ||
| <div class="i-library theme-content-element"> | ||
| <h1 class="display-4 theme-content-element-title">Banner</h1> | ||
| <div class="theme-content-element-description"> | ||
| <div class="i-example"> | ||
| <h5 class="i-example__heading">Example</h5> | ||
| <div class="i-example__body"> | ||
| <div class="bm-e-footnote"> | ||
| <div class="banner block" data-block-name="banner" data-block-status="loaded"> | ||
| <!----> | ||
| <div id="banner"> | ||
| <div class="content"> | ||
| <header> | ||
| <h1><!--?lit$126102149$-->Hi, I’m Editorial by HTML5 UP!</h1> | ||
| <p><!--?lit$126102149$-->A FREE AND FULLY RESPONSIVE SITE TEMPLATE</p> | ||
| </header> | ||
| <!--?lit$126102149$--><!----> | ||
| <p> | ||
| <!--?lit$126102149$-->Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam | ||
| facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna | ||
| ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod | ||
| egestas. Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam. | ||
| </p> | ||
| <!----><!----> | ||
| <p> | ||
| <!--?lit$126102149$-->Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. | ||
| Pellentesque sapien ac quam. Lorem ipsum dolor sit nullam. | ||
| </p> | ||
| <!----> | ||
| <ul class="actions"> | ||
| <!--?lit$126102149$--><!----> | ||
| <li> | ||
| <a class="button big" href="http://localhost:3000/#"><!--?lit$126102149$-->Learn more</a> | ||
| </li> | ||
| <!----><!----> | ||
| <li> | ||
| <a class="button big" href="http://localhost:3000/generic" | ||
| ><!--?lit$126102149$-->Gehe zu Generic</a | ||
| > | ||
| </li> | ||
| <!----> | ||
| </ul> | ||
| </div> | ||
| <span class="image object" | ||
| ><!--?lit$126102149$--><picture> | ||
| <source | ||
| type="image/webp" | ||
| srcset=" | ||
| ./media_18fca17b5770aad624cc462619b04b3c9236b61f0.png?width=2000&format=webply&optimize=medium | ||
| " | ||
| media="(min-width: 600px)" | ||
| /> | ||
| <source | ||
| type="image/webp" | ||
| srcset=" | ||
| ./media_18fca17b5770aad624cc462619b04b3c9236b61f0.png?width=750&format=webply&optimize=medium | ||
| " | ||
| /> | ||
| <source | ||
| type="image/png" | ||
| srcset=" | ||
| ./media_18fca17b5770aad624cc462619b04b3c9236b61f0.png?width=2000&format=png&optimize=medium | ||
| " | ||
| media="(min-width: 600px)" | ||
| /> | ||
| <img | ||
| loading="eager" | ||
| alt="" | ||
| src="./media_18fca17b5770aad624cc462619b04b3c9236b61f0.png?width=750&format=png&optimize=medium" | ||
| width="736" | ||
| height="512" | ||
| /> </picture | ||
| ></span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| `; | ||
| }; |
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,63 @@ | ||
| import { html, render } from 'https://unpkg.com/[email protected]/lit-html.js'; | ||
|
|
||
| export const buttonsTemplate = () => { | ||
| return html` | ||
| <div class="theme-content-category" id="buttons"> | ||
| <div class="i-library theme-content-element"> | ||
| <h1 class="display-4 theme-content-element-title">Buttons</h1> | ||
| <div class="theme-content-element-description"> | ||
| <p>Button / Anchor element.</p> | ||
| <p>Default button size is <strong>l</strong>. Default button type is <strong>secondary</strong>.</p> | ||
| <p><strong>Button properties:</strong></p> | ||
| <ul> | ||
| <li><p>button-type: "primary" | "secondary"</p></li> | ||
| <li><p>button-size: "s" | "l"</p></li> | ||
| <li><p>button-class: string</p></li> | ||
| <li><p>attributes: hash | string</p></li> | ||
| <li><p>tag: "button" | "a"</p></li> | ||
| <li><p>label: string</p></li> | ||
| </ul> | ||
| <div class="i-example"> | ||
| <h5 class="i-example__heading">Example</h5> | ||
| <div class="i-example__body"> | ||
| <ul class="actions"> | ||
| <li><a href="#" class="button primary">Default</a></li> | ||
| <li><a href="#" class="button">Default</a></li> | ||
| </ul> | ||
| <ul class="actions small"> | ||
| <li><a href="#" class="button primary small">Small</a></li> | ||
| <li><a href="#" class="button small">Small</a></li> | ||
| </ul> | ||
| <div class="row"> | ||
| <div class="col-6 col-12-small"> | ||
| <ul class="actions stacked"> | ||
| <li><a href="#" class="button primary">Default</a></li> | ||
| <li><a href="#" class="button">Default</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="col-6 col-12-small"> | ||
| <ul class="actions stacked"> | ||
| <li><a href="#" class="button primary small">Small</a></li> | ||
| <li><a href="#" class="button small">Small</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="col-6 col-12-small"> | ||
| <ul class="actions stacked"> | ||
| <li><a href="#" class="button primary fit">Default</a></li> | ||
| <li><a href="#" class="button fit">Default</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="col-6 col-12-small"> | ||
| <ul class="actions stacked"> | ||
| <li><a href="#" class="button primary small fit">Small</a></li> | ||
| <li><a href="#" class="button small fit">Small</a></li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| `; | ||
| }; |
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,119 @@ | ||
| import { html, render } from 'https://unpkg.com/[email protected]/lit-html.js'; | ||
|
|
||
| export const colorsTemplate = () => { | ||
| return html` | ||
| <div class="theme-content-category" id="colors"> | ||
| <div class="i-library theme-content-element"> | ||
| <h1 class="display-4 theme-content-element-title">Colors</h1> | ||
| <div class="theme-content-element-description"> | ||
| <p><strong>Colors used in this project.</strong></p> | ||
| <div class="i-example"> | ||
| <div class="bm-lsg-colors"> | ||
| <div class="bm-lsg-colors__group"> | ||
| <h3 class="bm-lsg-colors__group-headline">Primary</h3> | ||
| <div class="bm-lsg-colors__colors"> | ||
| <div class="bm-lsg-colors__color"> | ||
| <div class="bm-lsg-colors__color-tile" style="background: #394d45; "></div> | ||
| <div class="bm-lsg-colors__color-description"> | ||
| <p class="bm-lsg-colors__colors-name">living-green</p> | ||
| </div> | ||
| </div> | ||
| <div class="bm-lsg-colors__color"> | ||
| <div class="bm-lsg-colors__color-tile" style="background: #637a77; /* --bm-primary-teal */"></div> | ||
| <div class="bm-lsg-colors__color-description"> | ||
| <p class="bm-lsg-colors__colors-name">teal</p> | ||
| </div> | ||
| </div> | ||
| <div class="bm-lsg-colors__color"> | ||
| <div class="bm-lsg-colors__color-tile" style="background: #dcd8c0; /* --bm-primary-moss */"></div> | ||
| <div class="bm-lsg-colors__color-description"> | ||
| <p class="bm-lsg-colors__colors-name">moss</p> | ||
| </div> | ||
| </div> | ||
| <div class="bm-lsg-colors__color"> | ||
| <div class="bm-lsg-colors__color-tile" style="background: #e7cfb9; /* --bm-primary-blush */"></div> | ||
| <div class="bm-lsg-colors__color-description"> | ||
| <p class="bm-lsg-colors__colors-name">blush</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="bm-lsg-colors__group"> | ||
| <h3 class="bm-lsg-colors__group-headline">Neutral</h3> | ||
| <div class="bm-lsg-colors__colors"> | ||
| <div class="bm-lsg-colors__color"> | ||
| <div class="bm-lsg-colors__color-tile" style="background: #fff;"></div> | ||
| <div class="bm-lsg-colors__color-description"> | ||
| <p class="bm-lsg-colors__colors-name">neutral-0</p> | ||
| </div> | ||
| </div> | ||
| <div class="bm-lsg-colors__color"> | ||
| <div class="bm-lsg-colors__color-tile" style="background: #f7f7f7;"></div> | ||
| <div class="bm-lsg-colors__color-description"> | ||
| <p class="bm-lsg-colors__colors-name">neutral-10</p> | ||
| </div> | ||
| </div> | ||
| <div class="bm-lsg-colors__color"> | ||
| <div class="bm-lsg-colors__color-tile" style="background: #ebeced;"></div> | ||
| <div class="bm-lsg-colors__color-description"> | ||
| <p class="bm-lsg-colors__colors-name">neutral-20</p> | ||
| </div> | ||
| </div> | ||
| <div class="bm-lsg-colors__color"> | ||
| <div class="bm-lsg-colors__color-tile" style="background: #cfcfcf;"></div> | ||
| <div class="bm-lsg-colors__color-description"> | ||
| <p class="bm-lsg-colors__colors-name">neutral-30</p> | ||
| </div> | ||
| </div> | ||
| <div class="bm-lsg-colors__color"> | ||
| <div class="bm-lsg-colors__color-tile" style="background: #a5a5a5;"></div> | ||
| <div class="bm-lsg-colors__color-description"> | ||
| <p class="bm-lsg-colors__colors-name">neutral-40</p> | ||
| </div> | ||
| </div> | ||
| <div class="bm-lsg-colors__color"> | ||
| <div class="bm-lsg-colors__color-tile" style="background: #727272;"></div> | ||
| <div class="bm-lsg-colors__color-description"> | ||
| <p class="bm-lsg-colors__colors-name">neutral-50</p> | ||
| </div> | ||
| </div> | ||
| <div class="bm-lsg-colors__color"> | ||
| <div class="bm-lsg-colors__color-tile" style="background: #4f4f4f;"></div> | ||
| <div class="bm-lsg-colors__color-description"> | ||
| <p class="bm-lsg-colors__colors-name">neutral-60</p> | ||
| </div> | ||
| </div> | ||
| <div class="bm-lsg-colors__color"> | ||
| <div class="bm-lsg-colors__color-tile" style="background: #232323;"></div> | ||
| <div class="bm-lsg-colors__color-description"> | ||
| <p class="bm-lsg-colors__colors-name">neutral-80</p> | ||
| </div> | ||
| </div> | ||
| <div class="bm-lsg-colors__color"> | ||
| <div class="bm-lsg-colors__color-tile" style="background: #040404;"></div> | ||
| <div class="bm-lsg-colors__color-description"> | ||
| <p class="bm-lsg-colors__colors-name">neutral-90</p> | ||
| </div> | ||
| </div> | ||
| <div class="bm-lsg-colors__color"> | ||
| <div class="bm-lsg-colors__color-tile" style="background: #000;"></div> | ||
| <div class="bm-lsg-colors__color-description"> | ||
| <p class="bm-lsg-colors__colors-name">neutral-100</p> | ||
| </div> | ||
| </div> | ||
| <div class="bm-lsg-colors__color"> | ||
| <div class="bm-lsg-colors__color-tile" style="background: #040404;"></div> | ||
| <div class="bm-lsg-colors__color-description"> | ||
| <p class="bm-lsg-colors__colors-name">black</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| `; | ||
| }; |
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,92 @@ | ||
| import { html, render } from 'https://unpkg.com/[email protected]/lit-html.js'; | ||
|
|
||
| export const featuresTemplate = () => { | ||
| return html` | ||
| <div class="i-library theme-content-element" id="features"> | ||
| <h1 class="display-4 theme-content-element-title">Features</h1> | ||
| <div class="theme-content-element-description"> | ||
| <div class="i-example"> | ||
| <h5 class="i-example__heading">Example</h5> | ||
| <div class="i-example__body"> | ||
| <div class="section features-container" data-section-status="initialized" style=""> | ||
| <div class="default-content-wrapper"><h2 id="erat-lacinia">Erat lacinia</h2></div> | ||
| <div class="features-wrapper"> | ||
| <div class="features block" data-block-name="features" data-block-status="loaded"> | ||
| <!----><!--?lit$881520819$--><!----> | ||
| <article> | ||
| <span class="icon" | ||
| ><!--?lit$881520819$--><icon-component | ||
| class="icon-component icon-wc" | ||
| name="building-storefront" | ||
| ></icon-component | ||
| ></span> | ||
| <div class="content"> | ||
| <!--?lit$881520819$--> | ||
| <h3 id="portitor-ullamcorper">Portitor ullamcorper</h3> | ||
| <p> | ||
| Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante | ||
| interdum. Sed nulla amet lorem feugiat tempus aliquam. | ||
| </p> | ||
| </div> | ||
| </article> | ||
| <!----><!----> | ||
| <article> | ||
| <span class="icon" | ||
| ><!--?lit$881520819$--><icon-component | ||
| class="icon-component icon-wc" | ||
| name="cpu-chip" | ||
| ></icon-component | ||
| ></span> | ||
| <div class="content"> | ||
| <!--?lit$881520819$--> | ||
| <h3 id="sapien-veroeros">Sapien veroeros</h3> | ||
| <p> | ||
| Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante | ||
| interdum. Sed nulla amet lorem feugiat tempus aliquam. | ||
| </p> | ||
| </div> | ||
| </article> | ||
| <!----><!----> | ||
| <article> | ||
| <span class="icon" | ||
| ><!--?lit$881520819$--><icon-component | ||
| class="icon-component icon-wc" | ||
| name="chat-bubble-left-right" | ||
| ></icon-component | ||
| ></span> | ||
| <div class="content"> | ||
| <!--?lit$881520819$--> | ||
| <h3 id="quam-lorem-ipsum">Quam lorem ipsum</h3> | ||
| <p> | ||
| Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante | ||
| interdum. Sed nulla amet lorem feugiat tempus aliquam. | ||
| </p> | ||
| </div> | ||
| </article> | ||
| <!----><!----> | ||
| <article> | ||
| <span class="icon" | ||
| ><!--?lit$881520819$--><icon-component | ||
| class="icon-component icon-wc" | ||
| name="cursor-arrow-ripple" | ||
| ></icon-component | ||
| ></span> | ||
| <div class="content"> | ||
| <!--?lit$881520819$--> | ||
| <h3 id="sed-magna-finibus">Sed magna finibus</h3> | ||
| <p> | ||
| Aenean ornare velit lacus, ac varius enim lorem ullamcorper dolore. Proin aliquam facilisis ante | ||
| interdum. Sed nulla amet lorem feugiat tempus aliquam. | ||
| </p> | ||
| </div> | ||
| </article> | ||
| <!----><!--?--> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| `; | ||
| }; |
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,25 @@ | ||
| import { html, render } from 'https://unpkg.com/[email protected]/lit-html.js'; | ||
|
|
||
| export const footnoteTemplate = () => { | ||
| return html` | ||
| <div class="i-library theme-content-element" id="footnote"> | ||
| <h1 class="display-4 theme-content-element-title">Footnote</h1> | ||
| <div class="theme-content-element-description"> | ||
| <div class="i-example"> | ||
| <h5 class="i-example__heading">Example</h5> | ||
| <div class="i-example__body"> | ||
| <div class="bm-e-footnote"> | ||
| <div class="bm-e-footnote__container"> | ||
| <div class="bm-e-footnote__text"> | ||
| * Please note that installation of the Charging Dock is not included. If the car’s intelligent | ||
| navigation system is active, the pedal will vibrate when you approach a junction or a change in the | ||
| speed limit | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| `; | ||
| }; |
Oops, something went wrong.