@kano/web-components
Version:
Shared web-components for the Kano ecosystem.
107 lines (101 loc) • 4.16 kB
HTML
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="../../../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script type="module" src="../../../../@polymer/iron-demo-helpers/demo-snippet.js"></script>
<script type="module" src="../../../../@polymer/iron-demo-helpers/demo-pages-shared-styles.js"></script>
<script type="module" src="../../kano-style/kano-style.js"></script>
<script type="module" src="../kano-alert.js"></script>
<!-- FIXME(polymer-modulizer):
These imperative modules that innerHTML your HTML are
a hacky way to be sure that any mixins in included style
modules are ready before any elements that reference them are
instantiated, otherwise the CSS @apply mixin polyfill won't be
able to expand the underlying CSS custom properties.
See: https://github.com/Polymer/polymer-modulizer/issues/154
-->
<script type="module">
const $_documentContainer = document.createElement('template');
$_documentContainer.setAttribute('style', 'display: none;');
$_documentContainer.innerHTML = `<style is="custom-style" include="demo-pages-shared-styles">
html, body {
margin: 0;
padding: 0;
min-height: 100vh;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: var(--font-body);
}
demo-snippet {
width: 60%;
margin: 0 auto;
}
.button-container {
@apply --layout-vertical;
}
.button-container button {
background-color: #fff;
align-self: center;
border: 1px solid;
padding: 15px 25px;
margin: 5px;
cursor: pointer;
}
</style>`;
document.head.appendChild($_documentContainer.content);
</script>
</head>
<body unresolved>
<script type="module">
const $_documentContainer = document.createElement('template');
$_documentContainer.innerHTML = `<div class="vertical-section-container">
<demo-snippet>
<h2>Kano alert</h2>
<template>
<div class="button-container">
<button type="button" name="button" on-tap="openDefault">Default actions</button>
<button type="button" name="button" on-tap="openCustom">Custom actions</button>
</div>
<kano-alert id="default" heading="Kano alert" text="Display your text and more<br>Inline markdown processing">
</kano-alert>
<kano-alert id="custom" heading="Kano alert" text="Customisable icon and action control" modal="">
<button class="kano-alert-primary" slot="actions">Save</button>
<button class="kano-alert-secondary" dialog-dismiss="" slot="actions">Cancel</button>
</kano-alert>
</template>
</demo-snippet>
</div>`;
document.body.appendChild($_documentContainer.content);
</script>
<script type="module">
import '@polymer/iron-demo-helpers/demo-snippet.js';
import '@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
import '../../kano-style/kano-style.js';
import '../kano-alert.js';
let buttons = document.querySelectorAll('[on-tap]'),
d = document.getElementById('default'),
c = document.getElementById('custom'),
actions = {};
for (let i = 0; i < buttons.length; i++) {
((button) => {
button.addEventListener('click', () => {
actions[button.getAttribute('on-tap')]();
})
})(buttons[i]);
}
actions.openDefault = () => {
d.open();
};
actions.openCustom = () => {
c.open();
};
</script>
</body>
</html>