Skip to content

Instantly share code, notes, and snippets.

View StefanNieuwenhuis's full-sized avatar
:bowtie:
Follow me on twitter @stefannhs

stefannhs StefanNieuwenhuis

:bowtie:
Follow me on twitter @stefannhs
25 followers · 14 following
View GitHub Profile
@StefanNieuwenhuis
StefanNieuwenhuis / stenciljs-image-upload__index.html
Created December 27, 2018 10:35
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<title>Stencil Component Starter</title>
<script src="/build/mycomponent.js"></script>
<script>
document.addEventListener('onUploadCompleted', (e) => console.log(e));
</script>
@StefanNieuwenhuis
StefanNieuwenhuis / stenciljs-modal-overlay__index.html
Created December 27, 2018 16:01
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<title>Stencil Component Starter</title>
<script src="/build/mycomponent.js"></script>
</head>
@StefanNieuwenhuis
StefanNieuwenhuis / stenciljs-modal-overlay__logic-step1.tsx
Created December 27, 2018 16:01
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
@Prop({mutable: true}) isActive = false;
@StefanNieuwenhuis
StefanNieuwenhuis / stenciljs-modal-overlay__render-template.tsx
Created December 27, 2018 16:02
import { Component } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
@Prop({mutable: true}) isActive = false;
@StefanNieuwenhuis
StefanNieuwenhuis / stenciljs-modal-overlay__styling.css
Created December 27, 2018 16:03
.modal {
display:none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.2);
@StefanNieuwenhuis
StefanNieuwenhuis / my-component.e2e.ts
Last active April 11, 2019 13:02
import { newE2EPage } from '@stencil/core/testing';
describe('my-component', () => {
let page, component, element;
beforeEach(async () => {
page = await newE2EPage();
await page.setContent('<my-component></my-component>');
component = await page.find('my-component');
@StefanNieuwenhuis
StefanNieuwenhuis / my-component.tsx
Last active April 11, 2019 13:04
import { Component } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
render() {
return <div class="overlay">
@StefanNieuwenhuis
StefanNieuwenhuis / my-component.e2e.ts
Last active April 12, 2019 14:34
import { newE2EPage } from '@stencil/core/testing';
describe('my-component', () => {
let page, component, element;
beforeEach(async () => {
page = await newE2EPage();
await page.setContent('<my-component></my-component>');
component = await page.find('my-component');
@StefanNieuwenhuis
StefanNieuwenhuis / my-component.tsx
Last active April 12, 2019 14:31
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
@Prop() open = false;
@Prop() transparent = false;
@StefanNieuwenhuis
StefanNieuwenhuis / my-component.e2e.ts
Last active April 12, 2019 14:33
import { newE2EPage } from '@stencil/core/testing';
describe('my-component', () => {
let page, component, element;
beforeEach(async () => {
page = await newE2EPage();
await page.setContent('<my-component></my-component>');
component = await page.find('my-component');