Skip to content

Commit

Permalink
added preview
Browse files Browse the repository at this point in the history
  • Loading branch information
izabela.horodenska committed Apr 19, 2024
1 parent ed9a139 commit 07dcd79
Show file tree
Hide file tree
Showing 4 changed files with 52 additions and 101 deletions.
31 changes: 31 additions & 0 deletions styleguide/js/preview.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { html, render } from 'https://unpkg.com/[email protected]/lit-html.js';
import { typographyTemplate } from './typography.js';
import { imageTemplate } from './image.js';
import { buttonsTemplate } from './buttons.js';
import { colorsTemplate } from './colors.js';
import { featuresTemplate } from './features.js';
import { footnoteTemplate } from './footnote.js';
import { formTemplate } from './form.js';
import { gridTemplate } from './grid.js';
import { iconsTemplate } from './icons.js';
import { linkTemplate } from './link.js';
import { mediaTemplate } from './media.js';
import { postsTemplate } from './posts.js';
import { tableTemplate } from './table.js';
import { bannersTemplate } from './banners.js';
import { navTemplate } from './nav.js';

const getTemplate = () => {
const url = new URLSearchParams(window.origin);
const template = url.get('template');
return template;
};

const appTemplate = () => {
const componentTemplate = getTemplate();
return componentTemplate;
};

const app = document.getElementById('app');

render(appTemplate(), app);
77 changes: 5 additions & 72 deletions styleguide/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,77 +15,10 @@ import { tableTemplate } from './table.js';
import { bannersTemplate } from './banners.js';
import { navTemplate } from './nav.js';

const navContainer = document.getElementById('nav-container');
if (navContainer) {
render(navTemplate(), navContainer);
}
const appTemplate = () => {
return html` ${footnoteTemplate()}`;
};

const buttonsContainer = document.getElementById('buttons-container');
if (buttonsContainer) {
render(buttonsTemplate(), buttonsContainer);
}
const app = document.getElementById('app');

const colorsContainer = document.getElementById('colors-container');
if (colorsContainer) {
render(colorsTemplate(), colorsContainer);
}

const gridContainer = document.getElementById('grid-container');
if (gridContainer) {
render(gridTemplate(), gridContainer);
}

const iconsContainer = document.getElementById('icons-container');
if (iconsContainer) {
render(iconsTemplate(), iconsContainer);
}

const typographyContainer = document.getElementById('typography-container');
if (typographyContainer) {
render(typographyTemplate(), typographyContainer);
}

const imageContainer = document.getElementById('image-container');
if (imageContainer) {
render(imageTemplate(), imageContainer);
}

const linkContainer = document.getElementById('link-container');
if (linkContainer) {
render(linkTemplate(), linkContainer);
}

const mediaContainer = document.getElementById('media-container');
if (mediaContainer) {
render(mediaTemplate(), mediaContainer);
}

const footnoteContainer = document.getElementById('footnote-container');
if (footnoteContainer) {
render(footnoteTemplate(), footnoteContainer);
}

const bannersContainer = document.getElementById('banners-container');
if (bannersContainer) {
render(bannersTemplate(), bannersContainer);
}

const featuresContainer = document.getElementById('features-container');
if (featuresContainer) {
render(featuresTemplate(), featuresContainer);
}

const postsContainer = document.getElementById('posts-container');
if (postsContainer) {
render(postsTemplate(), postsContainer);
}

const formContainer = document.getElementById('form-container');
if (formContainer) {
render(formTemplate(), formContainer);
}

const tableContainer = document.getElementById('table-container');
if (tableContainer) {
render(tableTemplate(), tableContainer);
}
render(appTemplate(), app);
30 changes: 1 addition & 29 deletions styleguide/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,35 +13,7 @@
<body>
<div class="ls-page">
<div class="ls-page-content">
<div id="nav-container"></div>
<!-- Button container -->
<div id="buttons-container"></div>
<!-- Colors container -->
<div id="colors-container"></div>
<!-- Grid container -->
<div id="grid-container"></div>
<!-- Icons container -->
<div id="icons-container"></div>
<!-- Typography container -->
<div id="typography-container"></div>
<!-- Image container -->
<div id="image-container"></div>
<!-- Link container -->
<div id="link-container"></div>
<!-- Media container -->
<div id="media-container"></div>
<!-- Footnote container -->
<div id="footnote-container"></div>
<!-- Banner container -->
<div id="banners-container"></div>
<!-- Features container -->
<div id="features-container"></div>
<!-- Posts container -->
<div id="posts-container"></div>
<!-- Form container -->
<div id="form-container"></div>
<!-- Table container -->
<div id="table-container"></div>
<div id="app"></div>
</div>
</div>
<script type="module" src="js/script.js"></script>
Expand Down
15 changes: 15 additions & 0 deletions styleguide/preview.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="nav.css">
<link rel="stylesheet" href="/dist/styles/styles.css">
<link rel="stylesheet" href="../__template__/assets/css/main.css" />
<title>Document</title>
</head>
<body>

</body>
</html>

0 comments on commit 07dcd79

Please sign in to comment.