Blaze :: Demo

Responsive

first

second

third

first

second

third

first

second

third

first

second

third

first

second

third

first

second

third

Basic table
First name	Last name	Username
Gregory	Pratt	@grumpywizards
Jim	Krik	@captaink
Mr.	Spock	@science101

Striped rows
First name	Last name	Username
Gregory	Pratt	@grumpywizards
Jim	Krik	@captaink
Mr.	Spock	@science101

Clickable table, row inactive
First name	Last name	Username
Gregory	Pratt	@grumpywizards
Jim	Krik	@captaink
Mr.	Spock	@science101

Clickable row, inactive row
First name	Last name	Username
Gregory	Pratt	@grumpywizards
Jim	Krik	@captaink
Mr.	Spock	@science101

Condensed
First name	Last name	Username
Gregory	Pratt	@grumpywizards
Jim	Krik	@captaink
Mr.	Spock	@science101

+ ), +

+           (this.codeRef = ref)}
+            aria-hidden
+            tabindex="-1"
+            class={`u-code u-code--multiline ${this.language}`}
+            contenteditable={this.demo}
+            onBlur={(e) => this.updateDemo(e)}
+          >
+            {this.markup}
+          
+

, + ]; + } +} diff --git a/src/components/demo/tests/__snapshots__/snapshots.e2e.ts.snap b/src/components/demo/tests/__snapshots__/snapshots.e2e.ts.snap new file mode 100644 index 00000000..b0c0b794 --- /dev/null +++ b/src/components/demo/tests/__snapshots__/snapshots.e2e.ts.snap @@ -0,0 +1,5 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`demo renders renders a badge component and a code area 1`] = `"YO!\\" class=\\"hydrated\\">

YO!

<blaze-badge type=\\"success\\">YO!</blaze-badge>

"`; + +exports[`demo renders renders correctly with no props 1`] = `"

"`; diff --git a/src/components/demo/tests/snapshots.e2e.ts b/src/components/demo/tests/snapshots.e2e.ts new file mode 100644 index 00000000..b1bfdd11 --- /dev/null +++ b/src/components/demo/tests/snapshots.e2e.ts @@ -0,0 +1,15 @@ +import { snapIt } from '../../../test'; + +const component = 'demo'; + +describe(component, () => { + const snap = snapIt(component); + + describe('renders', () => { + snap('renders correctly with no props', ''); + snap( + 'renders a badge component and a code area', + `` + ); + }); +}); diff --git a/src/components/divider/blaze-divider.tsx b/src/components/divider/blaze-divider.tsx new file mode 100644 index 00000000..ed4f3ef5 --- /dev/null +++ b/src/components/divider/blaze-divider.tsx @@ -0,0 +1,32 @@ +import { h, Component, Element, State, Prop } from '@stencil/core'; + +@Component({ + tag: 'blaze-divider', +}) +export class Divider { + @Element() + el: HTMLElement; + + @Prop() + type: string = 'solid'; + + @State() + content: boolean; + + componentWillLoad() { + this.content = !!this.el.innerHTML; + } + + render() { + const typeClass = this.type ? `c-divider--${this.type}` : ''; + return ( +

+ {this.content && ( + + + + )} +

+ ); + } +} diff --git a/src/components/divider/readme.md b/src/components/divider/readme.md new file mode 100644 index 00000000..eb25661a --- /dev/null +++ b/src/components/divider/readme.md @@ -0,0 +1,15 @@ +# blaze-divider + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ----------- | -------- | --------- | +| `type` | `type` | | `string` | `'solid'` | + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/divider/tests/__snapshots__/snapshot.e2e.ts.snap b/src/components/divider/tests/__snapshots__/snapshot.e2e.ts.snap new file mode 100644 index 00000000..1b8924e0 --- /dev/null +++ b/src/components/divider/tests/__snapshots__/snapshot.e2e.ts.snap @@ -0,0 +1,5 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`divider renders content 1`] = `"

Hello, world

"`; + +exports[`divider renders correctly 1`] = `"

"`; diff --git a/src/components/divider/tests/snapshot.e2e.ts b/src/components/divider/tests/snapshot.e2e.ts new file mode 100644 index 00000000..b427d345 --- /dev/null +++ b/src/components/divider/tests/snapshot.e2e.ts @@ -0,0 +1,12 @@ +import { snapIt } from '../../../test'; + +const component = 'divider'; + +describe(component, () => { + const snap = snapIt(component); + + describe('renders', () => { + snap('correctly', ''); + snap('content', 'Hello, world'); + }); +}); diff --git a/src/components/drawer/blaze-drawer.tsx b/src/components/drawer/blaze-drawer.tsx new file mode 100644 index 00000000..79008675 --- /dev/null +++ b/src/components/drawer/blaze-drawer.tsx @@ -0,0 +1,66 @@ +import { h, Component, Event, EventEmitter, Prop, Method, State } from '@stencil/core'; + +@Component({ + tag: 'blaze-drawer', +}) +export class Drawer { + @Prop() + open: boolean = false; + + @Prop() + dismissible: boolean = false; + + @Prop() + position: string = 'bottom'; + + @Prop() + shouldClose: () => boolean; + + @State() + _isOpen: boolean = false; + + @Event({ eventName: 'close' }) + onClose: EventEmitter; + + @Method() + async close() { + if (!this.shouldClose || this.shouldClose()) { + this._isOpen = false; + this.onClose.emit(); + } + } + + @Method() + async show() { + this._isOpen = true; + } + + @Method() + async isOpen() { + return this._isOpen; + } + + componentWillLoad() { + this._isOpen = this.open; + } + + dismiss() { + if (this.dismissible) this.close(); + } + + render() { + const drawerIsOpenClass = this._isOpen ? 'o-drawer--visible' : ''; + const overlayIsOpenClass = this._isOpen ? 'c-overlay--visible' : ''; + + return [ +

this.dismiss()} + class={`c-overlay c-overlay--fullpage ${overlayIsOpenClass}`} + />, + , + ]; + } +} diff --git a/src/components/drawer/readme.md b/src/components/drawer/readme.md new file mode 100644 index 00000000..2d50dbe6 --- /dev/null +++ b/src/components/drawer/readme.md @@ -0,0 +1,58 @@ +# blaze-drawer + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ------------- | ------------- | ----------- | --------------- | ----------- | +| `dismissible` | `dismissible` | | `boolean` | `false` | +| `open` | `open` | | `boolean` | `false` | +| `position` | `position` | | `string` | `'bottom'` | +| `shouldClose` | -- | | `() => boolean` | `undefined` | + + +## Events + +| Event | Description | Type | +| ------- | ----------- | ------------------ | +| `close` | | `CustomEvent` | + + +## Methods + +### `close() => Promise` + + + +#### Returns + +Type: `Promise` + + + +### `isOpen() => Promise` + + + +#### Returns + +Type: `Promise` + + + +### `show() => Promise` + + + +#### Returns + +Type: `Promise` + + + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/drawer/tests/__snapshots__/snapshots.e2e.ts.snap b/src/components/drawer/tests/__snapshots__/snapshots.e2e.ts.snap new file mode 100644 index 00000000..1f5c3159 --- /dev/null +++ b/src/components/drawer/tests/__snapshots__/snapshots.e2e.ts.snap @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`drawer renders renders as open 1`] = ` +"

" +`; + +exports[`drawer renders renders correctly with no props 1`] = ` +"

" +`; + +exports[`drawer renders renders dismissible overlay 1`] = ` +"

" +`; diff --git a/src/components/drawer/tests/behaviour.e2e.ts b/src/components/drawer/tests/behaviour.e2e.ts new file mode 100644 index 00000000..279b7731 --- /dev/null +++ b/src/components/drawer/tests/behaviour.e2e.ts @@ -0,0 +1,19 @@ +import { newE2EPage } from '@stencil/core/testing'; + +const html = 'default'; + +describe('drawer', () => { + test('triggers close event', async () => { + const page = await newE2EPage(); + await page.setContent(html); + + const drawer = await page.find('blaze-drawer'); + const overlay = await drawer.find('.c-overlay'); + const close = await drawer.spyOnEvent('close'); + + await overlay.click(); + await page.waitForChanges(); + + expect(close).toHaveReceivedEvent(); + }); +}); diff --git a/src/components/drawer/tests/snapshots.e2e.ts b/src/components/drawer/tests/snapshots.e2e.ts new file mode 100644 index 00000000..aa1ef380 --- /dev/null +++ b/src/components/drawer/tests/snapshots.e2e.ts @@ -0,0 +1,13 @@ +import { snapIt } from '../../../test'; + +const component = 'drawer'; + +describe(component, () => { + const snap = snapIt(component); + + describe('renders', () => { + snap('renders correctly with no props', 'default'); + snap('renders as open', 'default'); + snap('renders dismissible overlay', 'default'); + }); +}); diff --git a/src/components/file-upload/blaze-file-upload.tsx b/src/components/file-upload/blaze-file-upload.tsx new file mode 100644 index 00000000..66fb5a12 --- /dev/null +++ b/src/components/file-upload/blaze-file-upload.tsx @@ -0,0 +1,66 @@ +import { h, Component, Prop, State, Event, EventEmitter } from '@stencil/core'; + +@Component({ + tag: 'blaze-file-upload', +}) +export class FileUpload { + @Prop() + drop: boolean; + + @Prop() + multiple: boolean; + + @Prop() + url: string = '/'; + + @Event({ eventName: 'uploaded' }) + onUploaded: EventEmitter; + + @Event({ eventName: 'uploading' }) + onUploading: EventEmitter; + + @State() + files: File[] = []; + + async uploadFiles(e) { + this.files = Array.from(e.target.files); + + if (this.drop) { + try { + this.onUploading.emit({ files: this.files }); + await Promise.all( + this.files.map((file) => + fetch(this.url, { + method: 'POST', + body: file, + }) + ) + ); + this.onUploaded.emit({ upload: true, files: this.files }); + } catch (error) { + this.onUploaded.emit({ upload: false, error }); + } + } + } + + renderLabel() { + if (!this.drop && this.files.length > 0) { + if (this.multiple) return {this.files.length} files; + return {this.files[0].name}; + } + } + + render() { + const dropClass = this.drop ? 'c-file-upload--drop' : ''; + + return ( +

+ + + {this.renderLabel()} + + this.uploadFiles(e)} /> +

+ ); + } +} diff --git a/src/components/file-upload/readme.md b/src/components/file-upload/readme.md new file mode 100644 index 00000000..640305ac --- /dev/null +++ b/src/components/file-upload/readme.md @@ -0,0 +1,25 @@ +# blaze-file-upload + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ---------- | ---------- | ----------- | --------- | ----------- | +| `drop` | `drop` | | `boolean` | `undefined` | +| `multiple` | `multiple` | | `boolean` | `undefined` | +| `url` | `url` | | `string` | `'/'` | + + +## Events + +| Event | Description | Type | +| ----------- | ----------- | ------------------ | +| `uploaded` | | `CustomEvent` | +| `uploading` | | `CustomEvent` | + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/file-upload/tests/__snapshots__/snapshot.e2e.ts.snap b/src/components/file-upload/tests/__snapshots__/snapshot.e2e.ts.snap new file mode 100644 index 00000000..f532005f --- /dev/null +++ b/src/components/file-upload/tests/__snapshots__/snapshot.e2e.ts.snap @@ -0,0 +1,5 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`file-upload renders correctly 1`] = `"

"`; + +exports[`file-upload renders dropzone correctly 1`] = `"

Drop to upload your files

"`; diff --git a/src/components/file-upload/tests/behaviour.e2e.ts b/src/components/file-upload/tests/behaviour.e2e.ts new file mode 100644 index 00000000..05284715 --- /dev/null +++ b/src/components/file-upload/tests/behaviour.e2e.ts @@ -0,0 +1,17 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('file-upload', () => { + test('triggers no events on load', async () => { + const page = await newE2EPage(); + await page.setContent(''); + + const component = await page.find('blaze-file-upload'); + const spyUploadingEvent = await component.spyOnEvent('uploading'); + const spyCompletedEvent = await component.spyOnEvent('uploaded'); + + expect(spyUploadingEvent).not.toHaveReceivedEvent(); + expect(spyCompletedEvent).not.toHaveReceivedEvent(); + }); + + // todo: test change event is handled... +}); diff --git a/src/components/file-upload/tests/snapshot.e2e.ts b/src/components/file-upload/tests/snapshot.e2e.ts new file mode 100644 index 00000000..2b3bd110 --- /dev/null +++ b/src/components/file-upload/tests/snapshot.e2e.ts @@ -0,0 +1,23 @@ +import { snapIt } from '../../../test'; + +const component = 'file-upload'; + +describe(component, () => { + const snap = snapIt(component); + + describe('renders', () => { + snap( + 'correctly', + ` + + ` + ); + + snap( + 'dropzone correctly', + ` + Drop to upload your files + ` + ); + }); +}); diff --git a/src/components/image/blaze-image.tsx b/src/components/image/blaze-image.tsx new file mode 100644 index 00000000..b6601f58 --- /dev/null +++ b/src/components/image/blaze-image.tsx @@ -0,0 +1,106 @@ +import { h, Component, Element, Prop, State } from '@stencil/core'; + +@Component({ + tag: 'blaze-image', +}) +export class Image { + @Element() + el: HTMLElement; + + @State() + _src: string; + + @Prop() + src: string; + + @Prop() + alt: string; + + // Placeholder settings + @Prop() + width: number; + + @Prop() + height: number; + + @Prop() + photo: string; // specific photo + + @Prop() + user: string; // random photo from a user + + @Prop() + likes: boolean; // random photo from a user's likes + + @Prop() + collection: string; // random photo from a collection + + @Prop() + filter: string = ''; // filter based on search term + + io: IntersectionObserver; + + generateSrc() { + if (this.src) return this.src; + + let size = ''; + if (this.width && this.height) { + size = `${this.width}x${this.height}/`; + } + + let filter = ''; + if (this.filter) { + filter = `?${this.filter}`; + } + + if (this.photo) { + return `https://source.unsplash.com/${this.photo}/${size}`; + } + + if (this.user) { + return this.likes + ? `https://source.unsplash.com/user/${this.user}/likes/${size}${filter}` + : `https://source.unsplash.com/user/${this.user}/${size}${filter}`; + } + + if (this.collection) { + return `https://source.unsplash.com/collection/${this.collection}/${size}${filter}`; + } + + return `https://source.unsplash.com/random/${size}${filter}`; + } + + componentDidLoad() { + if ('IntersectionObserver' in window) { + this.io = new IntersectionObserver((data: any[]) => { + if (data[0].isIntersecting) { + this.loadImage(); + this.cleanup(); + } + }); + + this.io.observe(this.el); + } else { + this.loadImage(); + } + } + + disconnectedCallback() { + this.cleanup(); + } + + loadImage() { + this._src = this.generateSrc(); + } + + cleanup() { + if (this.io) { + this.io.disconnect(); + this.io = null; + } + } + + render() { + return {this.alt}

; + } +} diff --git a/src/components/image/readme.md b/src/components/image/readme.md new file mode 100644 index 00000000..12b53897 --- /dev/null +++ b/src/components/image/readme.md @@ -0,0 +1,23 @@ +# blaze-image + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ------------ | ------------ | ----------- | --------- | ----------- | +| `alt` | `alt` | | `string` | `undefined` | +| `collection` | `collection` | | `string` | `undefined` | +| `filter` | `filter` | | `string` | `''` | +| `height` | `height` | | `number` | `undefined` | +| `likes` | `likes` | | `boolean` | `undefined` | +| `photo` | `photo` | | `string` | `undefined` | +| `src` | `src` | | `string` | `undefined` | +| `user` | `user` | | `string` | `undefined` | +| `width` | `width` | | `number` | `undefined` | + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/image/tests/src.spec.ts b/src/components/image/tests/src.spec.ts new file mode 100644 index 00000000..c573d505 --- /dev/null +++ b/src/components/image/tests/src.spec.ts @@ -0,0 +1,71 @@ +import { Image } from '../blaze-image'; + +describe('image', () => { + let image; + + beforeEach(() => { + image = new Image(); + }); + + test('generate default src value', () => { + expect(image.generateSrc()).toBe('https://source.unsplash.com/random/'); + }); + + test('use provided src', () => { + image.src = 'https://another.com/test.png'; + expect(image.generateSrc()).toBe(image.src); + }); + + test('uses width and height to make size', () => { + image.width = 100; + image.height = 200; + expect(image.generateSrc()).toBe('https://source.unsplash.com/random/100x200/'); + }); + + test('specific photo', () => { + image.width = 100; + image.height = 200; + image.photo = 'TESTID'; + expect(image.generateSrc()).toBe('https://source.unsplash.com/TESTID/100x200/'); + }); + + test('appends filter', () => { + image.width = 100; + image.height = 200; + image.filter = 'mountains,snow'; + expect(image.generateSrc()).toBe('https://source.unsplash.com/random/100x200/?mountains,snow'); + }); + + test('narrow sample to collection', () => { + image.width = 100; + image.height = 200; + image.filter = 'mountains,snow'; + image.collection = 'TESTCOL'; + expect(image.generateSrc()).toBe('https://source.unsplash.com/collection/TESTCOL/100x200/?mountains,snow'); + }); + + test('narrow sample to user', () => { + image.width = 100; + image.height = 200; + image.filter = 'mountains,snow'; + image.user = 'TESTUSER'; + expect(image.generateSrc()).toBe('https://source.unsplash.com/user/TESTUSER/100x200/?mountains,snow'); + }); + + test('narrow sample to likes by user', () => { + image.width = 100; + image.height = 200; + image.filter = 'mountains,snow'; + image.user = 'TESTUSER'; + image.likes = true; + expect(image.generateSrc()).toBe('https://source.unsplash.com/user/TESTUSER/likes/100x200/?mountains,snow'); + }); +}); + +// @Prop() width: number; +// @Prop() height: number; +// @Prop() photo: string; // specific photo +// @Prop() user: string; // random photo from a user +// @Prop() likes: boolean; // random photo from a user's likes +// @Prop() collection: string; // random photo from a collection +// @Prop() filter: string = ''; // filter based on search term diff --git a/src/components/modal/blaze-modal.tsx b/src/components/modal/blaze-modal.tsx new file mode 100644 index 00000000..b5e08e39 --- /dev/null +++ b/src/components/modal/blaze-modal.tsx @@ -0,0 +1,68 @@ +import { h, Component, Event, EventEmitter, Prop, Method, Element } from '@stencil/core'; + +@Component({ + tag: 'blaze-modal', +}) +export class Modal { + @Element() + elem: HTMLElement; + + @Prop() + ghost: boolean = false; + + @Prop() + full: boolean = false; + + @Prop({ mutable: true, reflect: true }) + open: boolean = false; + + @Prop() + dismissible: boolean = false; + + @Prop() + shouldClose: () => boolean; + + @Event({ eventName: 'close' }) + onClose: EventEmitter; + + @Method() + async close() { + if (!this.shouldClose || this.shouldClose()) { + this.open = false; + this.onClose.emit(); + } + } + + @Method() + async show() { + this.open = true; + } + + @Method() + async isOpen() { + return this.open; + } + + dismiss() { + if (this.dismissible) this.close(); + } + + render() { + const ghostClass = this.ghost ? `o-modal--ghost` : ''; + const fullClass = this.full ? `o-modal--full` : ''; + const modalIsOpenClass = this.open ? 'o-modal--visible' : ''; + const overlayIsOpenClass = this.open ? 'c-overlay--visible' : ''; + + return [ +

this.dismiss()} class={`c-overlay c-overlay--fullpage ${overlayIsOpenClass}`} />, + , + ]; + } +} diff --git a/src/components/modal/readme.md b/src/components/modal/readme.md new file mode 100644 index 00000000..e6b2f560 --- /dev/null +++ b/src/components/modal/readme.md @@ -0,0 +1,59 @@ +# blaze-modal + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ------------- | ------------- | ----------- | --------------- | ----------- | +| `dismissible` | `dismissible` | | `boolean` | `false` | +| `full` | `full` | | `boolean` | `false` | +| `ghost` | `ghost` | | `boolean` | `false` | +| `open` | `open` | | `boolean` | `false` | +| `shouldClose` | -- | | `() => boolean` | `undefined` | + + +## Events + +| Event | Description | Type | +| ------- | ----------- | ------------------ | +| `close` | | `CustomEvent` | + + +## Methods + +### `close() => Promise` + + + +#### Returns + +Type: `Promise` + + + +### `isOpen() => Promise` + + + +#### Returns + +Type: `Promise` + + + +### `show() => Promise` + + + +#### Returns + +Type: `Promise` + + + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/modal/tests/__snapshots__/snapshots.e2e.ts.snap b/src/components/modal/tests/__snapshots__/snapshots.e2e.ts.snap new file mode 100644 index 00000000..d1995993 --- /dev/null +++ b/src/components/modal/tests/__snapshots__/snapshots.e2e.ts.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`modal renders renders as open 1`] = `"

"`; + +exports[`modal renders renders correctly with no props 1`] = `"

"`; + +exports[`modal renders renders dismissible button and overlay 1`] = `"

"`; diff --git a/src/components/modal/tests/behaviour.e2e.ts b/src/components/modal/tests/behaviour.e2e.ts new file mode 100644 index 00000000..bb96b0b6 --- /dev/null +++ b/src/components/modal/tests/behaviour.e2e.ts @@ -0,0 +1,19 @@ +import { newE2EPage } from '@stencil/core/testing'; + +const html = 'default'; + +describe('modal', () => { + test('triggers close event', async () => { + const page = await newE2EPage(); + await page.setContent(html); + + const modal = await page.find('blaze-modal'); + const closeButton = await modal.find('.c-button--close'); + const close = await modal.spyOnEvent('close'); + + await closeButton.click(); + await page.waitForChanges(); + + expect(close).toHaveReceivedEvent(); + }); +}); diff --git a/src/components/modal/tests/snapshots.e2e.ts b/src/components/modal/tests/snapshots.e2e.ts new file mode 100644 index 00000000..b8310c11 --- /dev/null +++ b/src/components/modal/tests/snapshots.e2e.ts @@ -0,0 +1,13 @@ +import { snapIt } from '../../../test'; + +const component = 'modal'; + +describe(component, () => { + const snap = snapIt(component); + + describe('renders', () => { + snap('renders correctly with no props', 'default'); + snap('renders as open', 'default'); + snap('renders dismissible button and overlay', 'default'); + }); +}); diff --git a/src/components/pagination/blaze-pagination.tsx b/src/components/pagination/blaze-pagination.tsx new file mode 100644 index 00000000..f7bd7008 --- /dev/null +++ b/src/components/pagination/blaze-pagination.tsx @@ -0,0 +1,71 @@ +import { h, Component, Event, EventEmitter, Method, Prop, State } from '@stencil/core'; + +@Component({ + tag: 'blaze-pagination', +}) +export class Pagination { + @Prop() + page: number = 1; + + @Prop() + pages: number = 1; + + @State() + _currentPage: number; + + @Event({ eventName: 'page' }) + onPage: EventEmitter; + + @Method() + async goToPage(page: number) { + if (page > 0 && page <= this.pages) { + this._currentPage = page; + this.onPage.emit(this._currentPage); + } + } + + @Method() + async currentPage() { + return this._currentPage; + } + + componentWillLoad() { + this._currentPage = this.page; + } + + render() { + return ( +

+ +

+ {this._currentPage > 1 && ( + + )} + + {this._currentPage < this.pages && ( + + )} +

+ +

+ ); + } +} diff --git a/src/components/pagination/readme.md b/src/components/pagination/readme.md new file mode 100644 index 00000000..14794238 --- /dev/null +++ b/src/components/pagination/readme.md @@ -0,0 +1,46 @@ +# blaze-pagination + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ----------- | -------- | ------- | +| `page` | `page` | | `number` | `1` | +| `pages` | `pages` | | `number` | `1` | + + +## Events + +| Event | Description | Type | +| ------ | ----------- | ------------------ | +| `page` | | `CustomEvent` | + + +## Methods + +### `currentPage() => Promise` + + + +#### Returns + +Type: `Promise` + + + +### `goToPage(page: number) => Promise` + + + +#### Returns + +Type: `Promise` + + + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/pagination/tests/__snapshots__/snapshots.e2e.ts.snap b/src/components/pagination/tests/__snapshots__/snapshots.e2e.ts.snap new file mode 100644 index 00000000..96354798 --- /dev/null +++ b/src/components/pagination/tests/__snapshots__/snapshots.e2e.ts.snap @@ -0,0 +1,5 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`pagination renders renders the correct buttons when pages set 1`] = `""`; + +exports[`pagination renders should work without parameters 1`] = `""`; diff --git a/src/components/pagination/tests/behaviour.e2e.ts b/src/components/pagination/tests/behaviour.e2e.ts new file mode 100644 index 00000000..796ee25a --- /dev/null +++ b/src/components/pagination/tests/behaviour.e2e.ts @@ -0,0 +1,19 @@ +import { newE2EPage } from '@stencil/core/testing'; + +const html = ''; + +describe('modal', () => { + test('triggers change event', async () => { + const page = await newE2EPage(); + await page.setContent(html); + + const pagination = await page.find('blaze-pagination'); + const controls = await pagination.findAll('.c-pagination__control'); + const change = await pagination.spyOnEvent('page'); + + await controls.reverse()[0].click(); // last pagination control button (next page) + await page.waitForChanges(); + + expect(change).toHaveReceivedEvent(); + }); +}); diff --git a/src/components/pagination/tests/snapshots.e2e.ts b/src/components/pagination/tests/snapshots.e2e.ts new file mode 100644 index 00000000..8a947842 --- /dev/null +++ b/src/components/pagination/tests/snapshots.e2e.ts @@ -0,0 +1,12 @@ +import { snapIt } from '../../../test'; + +const component = 'pagination'; + +describe(component, () => { + const snap = snapIt(component); + + describe('renders', () => { + snap('should work without parameters', ''); + snap('renders the correct buttons when pages set', ''); + }); +}); diff --git a/src/components/panel/blaze-panel.tsx b/src/components/panel/blaze-panel.tsx new file mode 100644 index 00000000..aca65b9c --- /dev/null +++ b/src/components/panel/blaze-panel.tsx @@ -0,0 +1,19 @@ +import { h, Component, Prop } from '@stencil/core'; + +@Component({ + tag: 'blaze-panel', +}) +export class Panel { + @Prop() + height: number = 0; + + render() { + return ( +

+ +

+ ); + } +} diff --git a/src/components/panel/readme.md b/src/components/panel/readme.md new file mode 100644 index 00000000..a274519b --- /dev/null +++ b/src/components/panel/readme.md @@ -0,0 +1,15 @@ +# blaze-panel + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ----------- | -------- | ------- | +| `height` | `height` | | `number` | `0` | + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/panel/tests/__snapshots__/snapshots.e2e.ts.snap b/src/components/panel/tests/__snapshots__/snapshots.e2e.ts.snap new file mode 100644 index 00000000..5f2d3fc0 --- /dev/null +++ b/src/components/panel/tests/__snapshots__/snapshots.e2e.ts.snap @@ -0,0 +1,5 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`panel renders correctly with height set 1`] = `"

default

"`; + +exports[`panel renders correctly with no props 1`] = `"

default

"`; diff --git a/src/components/panel/tests/snapshots.e2e.ts b/src/components/panel/tests/snapshots.e2e.ts new file mode 100644 index 00000000..612ec38a --- /dev/null +++ b/src/components/panel/tests/snapshots.e2e.ts @@ -0,0 +1,12 @@ +import { snapIt } from '../../../test'; + +const component = 'panel'; + +describe(component, () => { + const snap = snapIt(component); + + describe('renders', () => { + snap('correctly with no props', 'default'); + snap('correctly with height set', 'default'); + }); +}); diff --git a/src/components/progress/blaze-progress.tsx b/src/components/progress/blaze-progress.tsx new file mode 100644 index 00000000..ae351479 --- /dev/null +++ b/src/components/progress/blaze-progress.tsx @@ -0,0 +1,42 @@ +import { h, Component, Element, Event, EventEmitter, Listen, Prop } from '@stencil/core'; + +@Component({ + tag: 'blaze-progress', +}) +export class Progress { + @Element() + private element: HTMLElement; + + @Prop() + rounded: boolean; + + @Prop() + timer: boolean; + + @Prop() + size: string; + + @Event({ eventName: 'changed' }) + onChanged: EventEmitter; + + @Listen('progressbar') + onChangeBar(ev) { + const progress = this.element.children[0]; + const value = ev.detail; + const bar = ev.target; + const idx = [].indexOf.call(progress.children, bar); + this.onChanged.emit({ idx, ...value }); + } + + render() { + const sizeClass = this.size ? `u-${this.size}` : ''; + const roundedClass = this.rounded ? `c-progress--rounded` : ''; + const timerClass = this.timer ? `c-progress--timer` : ''; + + return ( +

+ +

+ ); + } +} diff --git a/src/components/progress/progress-bar/blaze-progress-bar.tsx b/src/components/progress/progress-bar/blaze-progress-bar.tsx new file mode 100644 index 00000000..20968528 --- /dev/null +++ b/src/components/progress/progress-bar/blaze-progress-bar.tsx @@ -0,0 +1,48 @@ +import { h, Component, Event, EventEmitter, Prop, Watch } from '@stencil/core'; + +@Component({ + tag: 'blaze-progress-bar', +}) +export class ProgressBar { + @Prop() + type: string; + + @Prop() + value: number; + + @Prop() + min: number = 0; + + @Prop() + max: number = 100; + + @Prop() + duration: number = 0; + + @Event({ eventName: 'progressbar' }) + onChanged: EventEmitter; + + @Watch('value') + watchValue(value: boolean, oldValue: boolean) { + this.onChanged.emit({ value, oldValue }); + } + + render() { + const typeClass = this.type ? `c-progress__bar--${this.type}` : ''; + const percentage = ((this.value - this.min) / (this.max - this.min)) * 100; + const timerAnimationDuration = this.duration ? { animationDuration: `${this.duration}s` } : {}; + + return ( +

+ +

+ ); + } +} diff --git a/src/components/progress/progress-bar/readme.md b/src/components/progress/progress-bar/readme.md new file mode 100644 index 00000000..5a3207e7 --- /dev/null +++ b/src/components/progress/progress-bar/readme.md @@ -0,0 +1,28 @@ +# blaze-progress-bar + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| ---------- | ---------- | ----------- | -------- | ----------- | +| `duration` | `duration` | | `number` | `0` | +| `max` | `max` | | `number` | `100` | +| `min` | `min` | | `number` | `0` | +| `type` | `type` | | `string` | `undefined` | +| `value` | `value` | | `number` | `undefined` | + + +## Events + +| Event | Description | Type | +| ------------- | ----------- | ------------------ | +| `progressbar` | | `CustomEvent` | + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/progress/readme.md b/src/components/progress/readme.md new file mode 100644 index 00000000..f9be4761 --- /dev/null +++ b/src/components/progress/readme.md @@ -0,0 +1,24 @@ +# blaze-progress-bar + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| --------- | --------- | ----------- | --------- | ----------- | +| `rounded` | `rounded` | | `boolean` | `undefined` | +| `size` | `size` | | `string` | `undefined` | +| `timer` | `timer` | | `boolean` | `undefined` | + + +## Events + +| Event | Description | Type | +| --------- | ----------- | ------------------ | +| `changed` | | `CustomEvent` | + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/progress/tests/__snapshots__/snapshots.e2e.ts.snap b/src/components/progress/tests/__snapshots__/snapshots.e2e.ts.snap new file mode 100644 index 00000000..46f7627d --- /dev/null +++ b/src/components/progress/tests/__snapshots__/snapshots.e2e.ts.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`progress renders basic progress bar 1`] = `"

"`; + +exports[`progress renders rounded ends correctly 1`] = `"

25%

"`; + +exports[`progress renders size correctly 1`] = `"

15%

"`; + +exports[`progress renders type correctly 1`] = `"

20%

"`; diff --git a/src/components/progress/tests/behaviour.e2e.ts b/src/components/progress/tests/behaviour.e2e.ts new file mode 100644 index 00000000..916025f1 --- /dev/null +++ b/src/components/progress/tests/behaviour.e2e.ts @@ -0,0 +1,27 @@ +import { newE2EPage } from '@stencil/core/testing'; + +const html = ` + + 30 + +`; + +describe('progress', () => { + test('triggers change event', async () => { + const page = await newE2EPage(); + await page.setContent(html); + + const progress = await page.find('blaze-progress'); + const progressBar = await progress.find('blaze-progress-bar'); + const change = await progress.spyOnEvent('changed'); + + progressBar.setProperty('value', 40); + await page.waitForChanges(); + + expect(change).toHaveReceivedEventDetail({ + value: 40, + oldValue: 30, + idx: 0, + }); + }); +}); diff --git a/src/components/progress/tests/snapshots.e2e.ts b/src/components/progress/tests/snapshots.e2e.ts new file mode 100644 index 00000000..4a9c092f --- /dev/null +++ b/src/components/progress/tests/snapshots.e2e.ts @@ -0,0 +1,17 @@ +import { snapIt } from '../../../test'; + +const component = 'progress'; + +describe(component, () => { + const snap = snapIt(component); + + describe('renders', () => { + snap('basic progress bar', '5%'); + snap('size correctly', '15%'); + snap('type correctly', '20%'); + snap( + 'rounded ends correctly', + '25%' + ); + }); +}); diff --git a/src/components/sticky/blaze-sticky.tsx b/src/components/sticky/blaze-sticky.tsx new file mode 100644 index 00000000..8d6a0576 --- /dev/null +++ b/src/components/sticky/blaze-sticky.tsx @@ -0,0 +1,58 @@ +import { h, Component, Listen, Element, State, Prop } from '@stencil/core'; + +@Component({ + tag: 'blaze-sticky', +}) +export class Sticky { + @Element() + elem: HTMLElement; + + @Prop() + top: number = 0; + + @State() + staticStyles: any; + + @State() + stickyStyles: any; + + dimensions: ClientRect; + offsetTop: number; + + componentWillUpdate() { + this.positionElement(); + } + + @Listen('resize', { target: 'window' }) + @Listen('scroll', { target: 'document' }) + positionElement() { + this.dimensions = this.elem.children[0].getBoundingClientRect(); + this.offsetTop = this.dimensions.top + window.scrollY; + + if (this.offsetTop - window.scrollY - this.top <= 0) { + this.staticStyles = { + width: `${this.dimensions.width}px`, + height: `${this.dimensions.height}px`, + }; + this.stickyStyles = { + position: 'fixed', + top: `${this.top}px`, + left: `${this.dimensions.left}px`, + width: `${this.dimensions.width}px`, + }; + } else { + this.staticStyles = {}; + this.stickyStyles = {}; + } + } + + render() { + return ( +

+ +

+ ); + } +} diff --git a/src/components/sticky/readme.md b/src/components/sticky/readme.md new file mode 100644 index 00000000..aedaa938 --- /dev/null +++ b/src/components/sticky/readme.md @@ -0,0 +1,15 @@ +# blaze-sticky + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| -------- | --------- | ----------- | -------- | ------- | +| `top` | `top` | | `number` | `0` | + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/sticky/tests/__snapshots__/snapshots.e2e.ts.snap b/src/components/sticky/tests/__snapshots__/snapshots.e2e.ts.snap new file mode 100644 index 00000000..f95fefc6 --- /dev/null +++ b/src/components/sticky/tests/__snapshots__/snapshots.e2e.ts.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`sticky renders sticky no scroll 1`] = `"

Sticky alert

"`; diff --git a/src/components/sticky/tests/snapshots.e2e.ts b/src/components/sticky/tests/snapshots.e2e.ts new file mode 100644 index 00000000..35d70b91 --- /dev/null +++ b/src/components/sticky/tests/snapshots.e2e.ts @@ -0,0 +1,16 @@ +import { snapIt } from '../../../test'; + +const component = 'sticky'; + +describe(component, () => { + const snap = snapIt(component); + + describe('renders', () => { + snap( + 'sticky no scroll', + ` + Sticky alert + ` + ); + }); +}); diff --git a/src/components/tabs/blaze-tab.tsx b/src/components/tabs/blaze-tab.tsx new file mode 100644 index 00000000..9aeb25a6 --- /dev/null +++ b/src/components/tabs/blaze-tab.tsx @@ -0,0 +1,28 @@ +import { h, Component, Prop } from '@stencil/core'; + +@Component({ + tag: 'blaze-tab', +}) +export class Tab { + @Prop() + header: string; + + @Prop() + disabled: boolean; + + @Prop() + open: boolean; + + @Prop() + type: string; + + render() { + const typeClass = this.type ? `c-tabs__tab--${this.type}` : ''; + + return ( + + ); + } +} diff --git a/src/components/tabs/blaze-tabs.tsx b/src/components/tabs/blaze-tabs.tsx new file mode 100644 index 00000000..119e0e29 --- /dev/null +++ b/src/components/tabs/blaze-tabs.tsx @@ -0,0 +1,65 @@ +import { h, Component, Element, Event, EventEmitter, Method, State } from '@stencil/core'; + +@Component({ + tag: 'blaze-tabs', +}) +export class Tabs { + @Element() + elem: HTMLElement; + + @State() + tabs: any[]; + + @Event({ eventName: 'tab' }) + onTab: EventEmitter; + + componentWillLoad() { + this.tabs = Array.from(this.elem.querySelectorAll('blaze-tab')); + } + + @Method() + async currentTab() { + return this.tabs.findIndex((tab) => tab.open); + } + + @Method() + async openTab(tabIndex: number) { + if (!this.tabs[tabIndex].disabled) { + this.tabs = this.tabs.map((tab) => { + tab.open = false; + return tab; + }); + this.tabs[tabIndex].open = true; + this.onTab.emit({ idx: tabIndex }); + } + } + + render() { + return ( +

+ + +

+ ); + } +} diff --git a/src/components/tabs/readme.md b/src/components/tabs/readme.md new file mode 100644 index 00000000..3cc0679c --- /dev/null +++ b/src/components/tabs/readme.md @@ -0,0 +1,38 @@ +# blaze-tabs + + + + +## Events + +| Event | Description | Type | +| ----- | ----------- | ------------------ | +| `tab` | | `CustomEvent` | + + +## Methods + +### `currentTab() => Promise` + + + +#### Returns + +Type: `Promise` + + + +### `openTab(tabIndex: number) => Promise` + + + +#### Returns + +Type: `Promise` + + + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/tabs/tests/__snapshots__/snapshots.e2e.ts.snap b/src/components/tabs/tests/__snapshots__/snapshots.e2e.ts.snap new file mode 100644 index 00000000..d65cbfbc --- /dev/null +++ b/src/components/tabs/tests/__snapshots__/snapshots.e2e.ts.snap @@ -0,0 +1,5 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`tabs renders renders correctly with no props 1`] = `"

"`; + +exports[`tabs renders renders correctly with props set 1`] = `"

This is tab one

"`; diff --git a/src/components/tabs/tests/behaviour.e2e.ts b/src/components/tabs/tests/behaviour.e2e.ts new file mode 100644 index 00000000..0b714a80 --- /dev/null +++ b/src/components/tabs/tests/behaviour.e2e.ts @@ -0,0 +1,26 @@ +import { newE2EPage } from '@stencil/core/testing'; + +const html = ` + + This is tab one + This is tab two + +`; + +describe('tabs', () => { + test('triggers change event', async () => { + const page = await newE2EPage(); + await page.setContent(html); + + const tabs = await page.find('blaze-tabs'); + const tab = await tabs.find('.c-tab-heading'); + const change = await tabs.spyOnEvent('tab'); + + await tab.click(); + await page.waitForChanges(); + + expect(change).toHaveReceivedEventDetail({ + idx: 0, + }); + }); +}); diff --git a/src/components/tabs/tests/snapshots.e2e.ts b/src/components/tabs/tests/snapshots.e2e.ts new file mode 100644 index 00000000..a2b9236c --- /dev/null +++ b/src/components/tabs/tests/snapshots.e2e.ts @@ -0,0 +1,24 @@ +import { snapIt } from '../../../test'; + +const component = 'tabs'; + +describe(component, () => { + const snap = snapIt(component); + + describe('renders', () => { + snap( + 'renders correctly with no props', + ` + This is tab one + This is tab two + ` + ); + snap( + 'renders correctly with props set', + ` + This is tab one + This is tab two + ` + ); + }); +}); diff --git a/src/components/tags/blaze-tags.tsx b/src/components/tags/blaze-tags.tsx new file mode 100644 index 00000000..6e50ebcc --- /dev/null +++ b/src/components/tags/blaze-tags.tsx @@ -0,0 +1,155 @@ +import { h, Component, Event, EventEmitter, Prop, State, Method } from '@stencil/core'; +import { IOption } from './interfaces'; +@Component({ + tag: 'blaze-tags', +}) +export class Tags { + optionRef: HTMLOptionElement; + autocompleteRef: any; + + @Prop() + placeholder: string; + + @Prop() + autocomplete: boolean; + + @Prop() + options: string; + + @State() + _placeholder: string; + + @State() + _options: Array; + + @State() + choices: Array = []; + + @State() + inputValue: string = ''; + + @Event({ eventName: 'add' }) + onAdd: EventEmitter; + + @Event({ eventName: 'filter' }) + onFilter: EventEmitter; + + @Method() + async setOptions(options?: Array) { + if (options) this._options = options; + else if (this.options) this._options = JSON.parse(this.options); + + if (this.autocompleteRef) { + return this.autocompleteRef.setItems(this._options); + } + } + + componentWillLoad() { + this.setOptions(); + this._placeholder = this.placeholder; + if (!this._placeholder) this._placeholder = this.options ? 'Select an option' : 'Add a tag'; + } + + addChoice(choice: IOption) { + this.choices = [...this.choices, choice]; + this.onAdd.emit(choice); + if (this.optionRef) this.optionRef.selected = true; + this.inputValue = ''; + } + + select(e) { + e.preventDefault(); + + const chosenValue = e.target.value || e.detail.value; + if (typeof chosenValue === 'undefined') return; + + // Get selected option based on selected value + const choice = this._options.find((o) => o.value === chosenValue); + + if (choice) { + this.addChoice(choice); + } + + if (this.autocompleteRef) this.autocompleteRef.reset(); + } + + handleInput(e) { + this.inputValue = e.target.value; + } + + handleEnter(e) { + if (e.key === 'Enter' && this.inputValue) { + e.preventDefault(); + + const choice = { text: this.inputValue } as IOption; + this.addChoice(choice); + } + } + + removeChoice(i: number) { + this.choices.splice(i, 1); + this.choices = [...this.choices]; + } + + filter(e) { + // e.stopPropagation(); + this.onFilter.emit(e.detail); + } + + renderAutocomplete() { + return ( + (this.autocompleteRef = ref)} + onFilter={(e) => this.filter(e)} + placeholder={this._placeholder} + onSelected={(e) => this.select(e)} + /> + ); + } + + renderDropdown() { + return ( + + ); + } + + renderInput() { + return ( + this.handleInput(e)} + onKeyDown={(e) => this.handleEnter(e)} + /> + ); + } + + renderField() { + if (this.autocomplete) return this.renderAutocomplete(); + if (this.options) return this.renderDropdown(); + return this.renderInput(); + } + + render() { + return ( +

+ {this.choices.map((choice: IOption, i: number) => ( + + ))} +

+ +

{this.renderField()}

+ ); + } +} diff --git a/src/components/tags/interfaces/IOption.ts b/src/components/tags/interfaces/IOption.ts new file mode 100644 index 00000000..ea1cccaf --- /dev/null +++ b/src/components/tags/interfaces/IOption.ts @@ -0,0 +1,4 @@ +export default interface IOption { + text: string; + value?: string; +} diff --git a/src/components/tags/interfaces/index.ts b/src/components/tags/interfaces/index.ts new file mode 100644 index 00000000..c6827542 --- /dev/null +++ b/src/components/tags/interfaces/index.ts @@ -0,0 +1,3 @@ +import IOption from './IOption'; + +export { IOption }; diff --git a/src/components/tags/readme.md b/src/components/tags/readme.md new file mode 100644 index 00000000..87cb7bbd --- /dev/null +++ b/src/components/tags/readme.md @@ -0,0 +1,51 @@ +# blaze-toggle + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| -------------- | -------------- | ----------- | --------- | ----------- | +| `autocomplete` | `autocomplete` | | `boolean` | `undefined` | +| `options` | `options` | | `string` | `undefined` | +| `placeholder` | `placeholder` | | `string` | `undefined` | + + +## Events + +| Event | Description | Type | +| -------- | ----------- | ------------------ | +| `add` | | `CustomEvent` | +| `filter` | | `CustomEvent` | + + +## Methods + +### `setOptions(options?: Array) => Promise` + + + +#### Returns + +Type: `Promise` + + + + +## Dependencies + +### Depends on + +- [blaze-autocomplete](../autocomplete) + +### Graph +```mermaid +graph TD; + blaze-tags --> blaze-autocomplete + style blaze-tags fill:#f9f,stroke:#333,stroke-width:4px +``` + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/tags/tests/__snapshots__/snapshots.e2e.ts.snap b/src/components/tags/tests/__snapshots__/snapshots.e2e.ts.snap new file mode 100644 index 00000000..b18453b3 --- /dev/null +++ b/src/components/tags/tests/__snapshots__/snapshots.e2e.ts.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`tags renders options renders select dropdown 1`] = `"

"`; + +exports[`tags renders placeholder updates 1`] = `"

"`; + +exports[`tags renders renders correctly with no props 1`] = `"

"`; diff --git a/src/components/tags/tests/input.behaviour.e2e.ts b/src/components/tags/tests/input.behaviour.e2e.ts new file mode 100644 index 00000000..de776609 --- /dev/null +++ b/src/components/tags/tests/input.behaviour.e2e.ts @@ -0,0 +1,23 @@ +import { newE2EPage } from '@stencil/core/testing'; + +const html = ''; + +describe('tags', () => { + test('triggers add event', async () => { + const page = await newE2EPage(); + await page.setContent(html); + + const tags = await page.find('blaze-tags'); + const input = await tags.find('input'); + const add = await tags.spyOnEvent('add'); + + await input.press('KeyT'); + await input.press('KeyE'); + await input.press('KeyS'); + await input.press('KeyT'); + await input.press('Enter'); + await page.waitForChanges(); + + expect(add).toHaveReceivedEventDetail({ text: 'test' }); + }); +}); diff --git a/src/components/tags/tests/search.behaviour.e2e.ts b/src/components/tags/tests/search.behaviour.e2e.ts new file mode 100644 index 00000000..36905408 --- /dev/null +++ b/src/components/tags/tests/search.behaviour.e2e.ts @@ -0,0 +1,88 @@ +import { newE2EPage } from '@stencil/core/testing'; + +const html = ''; + +describe('tags', () => { + let page, tags, input; + const options = [ + { + text: 'item 1', + value: 'item 1', + }, + { + text: 'item 2', + value: 'item 2', + }, + { + text: 'item 3', + value: 'item 3', + }, + { + text: 'item 4', + value: 'item 4', + }, + { + text: 'item 5', + value: 'item 5', + }, + ]; + + beforeEach(async () => { + page = await newE2EPage(); + await page.setContent(html); + + tags = await page.find('blaze-tags'); + input = await page.find('input'); + + await tags.callMethod('setOptions', options); + await input.click(); + }); + + test('triggers filter event when typing', async () => { + const filter = await tags.spyOnEvent('filter'); + await input.type('some text'); + + expect(filter).toHaveReceivedEventDetail('some text'); + }); + + describe('menu', () => { + test('opens on click', async () => { + const resultsList = await page.findAll('.c-card__control'); + + expect(resultsList.length).toBe(options.length); + }); + + test('closes on escape', async () => { + await input.press('Escape'); + const resultsList = await page.findAll('.c-card--menu'); + + expect(resultsList.length).toBe(0); + }); + + test('cycles through active items', async () => { + for (let i = 1; i <= options.length; i++) { + await input.press('ArrowDown'); + const item = await page.find(`.c-card__control:nth-child(${i})`); + + expect(item).toHaveClass('c-card__control--active'); + } + }); + + test('triggers add on item click', async () => { + const select = await tags.spyOnEvent('add'); + const item = await page.find(`.c-card__control:nth-child(3)`); + + await item.click(); + + expect(select).toHaveReceivedEventDetail(options[2]); + }); + + test('triggers select on enter', async () => { + const select = await tags.spyOnEvent('add'); + await input.press('ArrowDown'); + await input.press('Enter'); + + expect(select).toHaveReceivedEventDetail(options[0]); + }); + }); +}); diff --git a/src/components/tags/tests/select.behaviour.e2e.ts b/src/components/tags/tests/select.behaviour.e2e.ts new file mode 100644 index 00000000..4459a0f8 --- /dev/null +++ b/src/components/tags/tests/select.behaviour.e2e.ts @@ -0,0 +1,18 @@ +import { newE2EPage } from '@stencil/core/testing'; + +const html = ``; + +describe('tags', () => { + test('triggers add event', async () => { + const page = await newE2EPage(); + await page.setContent(html); + + const tags = await page.find('blaze-tags'); + const add = await tags.spyOnEvent('add'); + + await page.select('select', 'test two'); + await page.waitForChanges(); + + expect(add).toHaveReceivedEventDetail({ text: 'Test Two', value: 'test two' }); + }); +}); diff --git a/src/components/tags/tests/snapshots.e2e.ts b/src/components/tags/tests/snapshots.e2e.ts new file mode 100644 index 00000000..9ff0f2a7 --- /dev/null +++ b/src/components/tags/tests/snapshots.e2e.ts @@ -0,0 +1,16 @@ +import { snapIt } from '../../../test'; + +const component = 'tags'; + +describe(component, () => { + const snap = snapIt(component); + + describe('renders', () => { + snap('renders correctly with no props', ''); + snap('placeholder updates', ''); + snap( + 'options renders select dropdown', + `` + ); + }); +}); diff --git a/src/components/timeline/blaze-timeline-item.tsx b/src/components/timeline/blaze-timeline-item.tsx new file mode 100644 index 00000000..d00a53ce --- /dev/null +++ b/src/components/timeline/blaze-timeline-item.tsx @@ -0,0 +1,30 @@ +import { h, Component, Prop } from '@stencil/core'; + +@Component({ + tag: 'blaze-timeline-item', +}) +export class TimelineItem { + @Prop() + type: string; + @Prop() + last: boolean; + @Prop() + left: boolean; + @Prop() + loading: boolean; + + render() { + const typeClass = this.type ? `c-timeline-item--${this.type}` : ''; + const lastClass = this.last ? `c-timeline-item--last` : ''; + const leftClass = this.left ? `c-timeline-item--left` : ''; + const loadingClass = this.loading && !this.last ? `c-timeline-item--loading` : ''; + + return ( +

+ +

+ ); + } +} diff --git a/src/components/timeline/blaze-timeline.tsx b/src/components/timeline/blaze-timeline.tsx new file mode 100644 index 00000000..9ed894ee --- /dev/null +++ b/src/components/timeline/blaze-timeline.tsx @@ -0,0 +1,22 @@ +import { h, Component, Prop } from '@stencil/core'; + +@Component({ + tag: 'blaze-timeline', +}) +export class Timeline { + @Prop() + alternate: boolean; + @Prop() + loading: boolean; + + render() { + const alternateClass = this.alternate ? 'o-timeline--alternate' : ''; + const loadingClass = this.loading ? 'o-timeline--loading' : ''; + + return ( +

+ ); + } +} diff --git a/src/components/timeline/readme.md b/src/components/timeline/readme.md new file mode 100644 index 00000000..1c83e190 --- /dev/null +++ b/src/components/timeline/readme.md @@ -0,0 +1,18 @@ +# blaze-timeline-item + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| --------- | --------- | ----------- | --------- | ----------- | +| `last` | `last` | | `boolean` | `undefined` | +| `left` | `left` | | `boolean` | `undefined` | +| `loading` | `loading` | | `boolean` | `undefined` | +| `type` | `type` | | `string` | `undefined` | + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/timeline/tests/__snapshots__/snapshots.e2e.ts.snap b/src/components/timeline/tests/__snapshots__/snapshots.e2e.ts.snap new file mode 100644 index 00000000..0ad75857 --- /dev/null +++ b/src/components/timeline/tests/__snapshots__/snapshots.e2e.ts.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`timeline renders all the attributes set 1`] = `"

Item 1

Item 2

Item 3

"`; + +exports[`timeline renders with items 1`] = `"

Item 1

Item 2

Item 3

"`; + +exports[`timeline renders without items 1`] = `"

"`; diff --git a/src/components/timeline/tests/snapshots.e2e.ts b/src/components/timeline/tests/snapshots.e2e.ts new file mode 100644 index 00000000..31fb397b --- /dev/null +++ b/src/components/timeline/tests/snapshots.e2e.ts @@ -0,0 +1,27 @@ +import { snapIt } from '../../../test'; + +const component = 'timeline'; + +describe(component, () => { + const snap = snapIt(component); + + describe('renders', () => { + snap('without items', ''); + snap( + 'with items', + ` + Item 1 + Item 2 + Item 3 + ` + ); + snap( + 'all the attributes set', + ` + Item 1 + Item 2 + Item 3 + ` + ); + }); +}); diff --git a/src/components/toggle/blaze-toggle.tsx b/src/components/toggle/blaze-toggle.tsx new file mode 100644 index 00000000..29f3cad7 --- /dev/null +++ b/src/components/toggle/blaze-toggle.tsx @@ -0,0 +1,52 @@ +import { h, Component, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core'; + +@Component({ + tag: 'blaze-toggle', +}) +export class Toggle { + @Prop() + type: string; + + @Prop() + toggled: boolean = false; + + @State() + _toggled: boolean = false; + + @Event({ eventName: 'toggle' }) + onToggle: EventEmitter; + + componentWillLoad() { + this._toggled = this.toggled; + } + + @Method() + async isToggled() { + return this._toggled; + } + + @Watch('toggled') + toggle() { + this._toggled = !this._toggled; + } + + handleToggle(e) { + e.preventDefault(); + this.toggle(); + this.onToggle.emit(this._toggled); + } + + render() { + const type = this.type ? `c-toggle--${this.type}` : ''; + + return ( + this.handleToggle(e)}> + +

+ + + ); + } +} diff --git a/src/components/toggle/readme.md b/src/components/toggle/readme.md new file mode 100644 index 00000000..4af8ff81 --- /dev/null +++ b/src/components/toggle/readme.md @@ -0,0 +1,36 @@ +# blaze-toggle + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| --------- | --------- | ----------- | --------- | ----------- | +| `toggled` | `toggled` | | `boolean` | `false` | +| `type` | `type` | | `string` | `undefined` | + + +## Events + +| Event | Description | Type | +| -------- | ----------- | ------------------ | +| `toggle` | | `CustomEvent` | + + +## Methods + +### `isToggled() => Promise` + + + +#### Returns + +Type: `Promise` + + + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/toggle/tests/__snapshots__/snapshots.e2e.ts.snap b/src/components/toggle/tests/__snapshots__/snapshots.e2e.ts.snap new file mode 100644 index 00000000..6f370de0 --- /dev/null +++ b/src/components/toggle/tests/__snapshots__/snapshots.e2e.ts.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`toggle renders colours based on type 1`] = `"

default"`; + +exports[`toggle renders renders correctly with no props 1`] = `"

default"`; + +exports[`toggle renders should be toggle on when prop is present 1`] = `"

default"`; diff --git a/src/components/toggle/tests/behaviour.e2e.ts b/src/components/toggle/tests/behaviour.e2e.ts new file mode 100644 index 00000000..e98b7390 --- /dev/null +++ b/src/components/toggle/tests/behaviour.e2e.ts @@ -0,0 +1,19 @@ +import { newE2EPage } from '@stencil/core/testing'; + +const html = 'default'; + +describe('toggle', () => { + test('triggers change event', async () => { + const page = await newE2EPage(); + await page.setContent(html); + + const toggle = await page.find('blaze-toggle'); + const label = await toggle.find('label'); + const change = await toggle.spyOnEvent('toggle'); + + await label.click(); + await page.waitForChanges(); + + expect(change).toHaveReceivedEventDetail(true); + }); +}); diff --git a/src/components/toggle/tests/snapshots.e2e.ts b/src/components/toggle/tests/snapshots.e2e.ts new file mode 100644 index 00000000..07945e48 --- /dev/null +++ b/src/components/toggle/tests/snapshots.e2e.ts @@ -0,0 +1,13 @@ +import { snapIt } from '../../../test'; + +const component = 'toggle'; + +describe(component, () => { + const snap = snapIt(component); + + describe('renders', () => { + snap('renders correctly with no props', 'default'); + snap('colours based on type', 'default'); + snap('should be toggle on when prop is present', 'default'); + }); +}); diff --git a/src/components/tree/blaze-tree.tsx b/src/components/tree/blaze-tree.tsx new file mode 100644 index 00000000..5253d993 --- /dev/null +++ b/src/components/tree/blaze-tree.tsx @@ -0,0 +1,14 @@ +import { h, Component } from '@stencil/core'; + +@Component({ + tag: 'blaze-tree', +}) +export class Tree { + render() { + return ( +

+ +

+ ); + } +} diff --git a/src/components/tree/readme.md b/src/components/tree/readme.md new file mode 100644 index 00000000..2223c390 --- /dev/null +++ b/src/components/tree/readme.md @@ -0,0 +1,8 @@ +# blaze-progress-bar + + + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/tree/tests/__snapshots__/snapshots.e2e.ts.snap b/src/components/tree/tests/__snapshots__/snapshots.e2e.ts.snap new file mode 100644 index 00000000..04e6577a --- /dev/null +++ b/src/components/tree/tests/__snapshots__/snapshots.e2e.ts.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`tree renders tree 1`] = `"

File 1

File 2

File 3

File 4

File 5

File 6

File 7

File 8

File 9

File 10

File 11

File 12

"`; diff --git a/src/components/tree/tests/snapshots.e2e.ts b/src/components/tree/tests/snapshots.e2e.ts new file mode 100644 index 00000000..20ef2e53 --- /dev/null +++ b/src/components/tree/tests/snapshots.e2e.ts @@ -0,0 +1,37 @@ +import { snapIt } from '../../../test'; + +const component = 'tree'; + +describe(component, () => { + const snap = snapIt(component); + + const html = ` + + File 1 + File 2 + File 3 + + Directory 1 + File 4 + File 5 + File 6 + + + Directory 2 + File 7 + File 8 + File 9 + + Sub-directory 1 + File 10 + File 11 + File 12 + + + +`; + + describe('renders', () => { + snap('tree', html); + }); +}); diff --git a/src/components/tree/tree-branch/blaze-tree-branch.tsx b/src/components/tree/tree-branch/blaze-tree-branch.tsx new file mode 100644 index 00000000..f07e5b28 --- /dev/null +++ b/src/components/tree/tree-branch/blaze-tree-branch.tsx @@ -0,0 +1,47 @@ +import { h, Component, Event, EventEmitter, State, Method } from '@stencil/core'; + +@Component({ + tag: 'blaze-tree-branch', +}) +export class TreeBranch { + @State() + expanded: boolean = false; + + @Event({ eventName: 'expand' }) + onExpand: EventEmitter; + + @Event({ eventName: 'collapse' }) + onCollapse: EventEmitter; + + toggleExpanded() { + this.expanded = !this.expanded; + if (this.expanded) this.onExpand.emit(); + else this.onCollapse.emit(); + } + + @Method() + async expand() { + this.expanded = true; + } + + @Method() + async collapse() { + this.expanded = false; + } + + render() { + return [ + , +

+ +

, + ]; + } +} diff --git a/src/components/tree/tree-branch/readme.md b/src/components/tree/tree-branch/readme.md new file mode 100644 index 00000000..03a0a395 --- /dev/null +++ b/src/components/tree/tree-branch/readme.md @@ -0,0 +1,41 @@ +# blaze-progress-bar + + + + + + +## Events + +| Event | Description | Type | +| ---------- | ----------- | ------------------ | +| `collapse` | | `CustomEvent` | +| `expand` | | `CustomEvent` | + + +## Methods + +### `collapse() => Promise` + + + +#### Returns + +Type: `Promise` + + + +### `expand() => Promise` + + + +#### Returns + +Type: `Promise` + + + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/components/tree/tree-leaf/blaze-tree-leaf.tsx b/src/components/tree/tree-leaf/blaze-tree-leaf.tsx new file mode 100644 index 00000000..f4f7f391 --- /dev/null +++ b/src/components/tree/tree-leaf/blaze-tree-leaf.tsx @@ -0,0 +1,14 @@ +import { h, Component } from '@stencil/core'; + +@Component({ + tag: 'blaze-tree-leaf', +}) +export class TreeLeaf { + render() { + return ( + + + + ); + } +} diff --git a/src/components/tree/tree-leaf/readme.md b/src/components/tree/tree-leaf/readme.md new file mode 100644 index 00000000..fccd4144 --- /dev/null +++ b/src/components/tree/tree-leaf/readme.md @@ -0,0 +1,10 @@ +# blaze-tree-leaf + + + + + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/index.html b/src/index.html new file mode 100644 index 00000000..029e12ec --- /dev/null +++ b/src/index.html @@ -0,0 +1,622 @@ + + + + + + + + + Blaze Atoms + + + + + + + + + + + +

+ + + + + + + + This is an expanded accordion + + + To toggle other panes + + + To toggle other panes + + + To toggle other panes + + + + + + + + Address header + + Address line one +
Address line two +
Postcode + + + + + Default + Brand + Info + Warning + Success + Error (also not dismissible) + + + + + This is a toast + Just for your information + You can't get rid of this warning + Yay things worked + Argh there is an error + + + + +

+ +

+ + + + + + + + + + +
+ + + + + + +
+ + + + + + +
+ + + + + + + + + +

Scroll down

+ + + + default + brand + info + warning + success + error +
+
+ default + brand + info + warning + success + error +
+
+ default + brand + info + warning + success + error + + + + +
+ +
+ +
+ +
+ +
+ + + + + + + +

+ Heading +
Sub-heading
+

+ + +

+ Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et. +

+ + +

Media card

+ + + + +

Title + Subtitle +

+ Lorem ipsum dolor sit amet, feugiat corpora ex eam. Lorem ipsum dolor sit amet, feugiat corpora ex eam. + Lorem ipsum dolor + sit amet, feugiat corpora ex eam. +

+ + + + + + + + £ + in current account + + + + + + + + + + + + Hello, world + Divided by dashes + Dots! + + + + +
+
+ + + + + +

+ Heading +
Sub-heading
+

+ + +

+ Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et. +

+ + +

+ + + + + + + + +

+ Heading +
Sub-heading
+

+ + +

+ Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et. +

+ + +

+ + + + + + + + + +
+ + + +
+ + Drop to upload your files + + + + + + + + + + + + + + + + + + + + + + + + + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget neque mollis, sodales nulla ut, porta + urna. Vivamus + gravida placerat metus ac malesuada. Donec convallis dolor in ex tristique, luctus tempus dui sollicitudin. + Suspendisse + enim urna, auctor ac viverra eget, venenatis non massa. Nulla magna est, ullamcorper eget feugiat ac, + condimentum + id diam. Cras tempor felis sit amet facilisis sollicitudin. Ut posuere malesuada feugiat. Morbi ex ex, + pretium + sit amet dolor eget, malesuada gravida est. Nullam id malesuada massa, ac facilisis elit. Nullam ut metus + sit + amet nisi finibus mollis. Praesent augue felis, feugiat placerat aliquam ut, ultrices sit amet dolor. + Phasellus + porta ligula nec sapien tempus commodo. Pellentesque hendrerit aliquet ornare. Integer nec tempus quam, + vitae + bibendum lectus. Suspendisse vestibulum pulvinar neque at scelerisque. Suspendisse accumsan dolor vitae + nulla + commodo, volutpat commodo nunc bibendum. +

+ Integer ut magna ac velit pharetra molestie. Nullam vestibulum est mattis, posuere augue id, suscipit + nulla. Praesent vestibulum + sapien hendrerit, sodales elit et, eleifend est. Aliquam ornare iaculis diam, commodo iaculis erat + consectetur + a. Quisque ut porta est. Mauris vulputate est eu auctor vestibulum. Vestibulum velit libero, cursus vel + viverra + et, fringilla et est. Donec nibh ipsum, finibus eu urna sed, ullamcorper sollicitudin velit. Vestibulum + ante + ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Interdum et malesuada fames ac ante + ipsum + primis in faucibus. Nulla sit amet bibendum nunc, ut iaculis tellus. Aenean ornare velit vel venenatis + scelerisque. + Ut ac elit enim. Nulla nec congue ex. Cras nulla ligula, porttitor non pulvinar fermentum, hendrerit sit + amet + neque. +

+ Etiam pulvinar suscipit metus, at lobortis erat eleifend id. Suspendisse scelerisque sem et orci rhoncus + posuere. Vivamus + faucibus mi et feugiat elementum. Nulla tempor, ligula non ullamcorper condimentum, lorem lorem sagittis + tortor, + at interdum tellus nunc elementum purus. Nulla tincidunt augue nibh. Ut et augue a ex pretium sodales. + Pellentesque + quam neque, tincidunt eu fringilla nec, volutpat eget risus. +

+ Fusce sit amet arcu sodales, vestibulum quam vel, lacinia mauris. Mauris ut placerat libero, eu gravida + lectus. Lorem ipsum + dolor sit amet, consectetur adipiscing elit. Ut lacinia felis vel nibh blandit, in vestibulum nisl congue. + Integer + ac dignissim nisi, id vehicula tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, + per + inceptos himenaeos. In posuere vitae metus in fermentum. +

+ Quisque venenatis ut eros at posuere. Etiam pulvinar, ipsum eu interdum vestibulum, arcu urna dapibus + lorem, quis volutpat + tortor enim sed leo. Donec dapibus lacinia purus. Nullam ac porttitor ligula. Fusce aliquet mauris tortor, + id + euismod neque tempus vel. Fusce luctus ex et volutpat pretium. Nulla varius justo quis aliquam accumsan. +

+ + + + + + + 10% + + +
+ + + 20% + + +
+ + + 35% + + +
+ + + 65% + + +
+ + + 80% + + +
+ + + 100% + + +
+ + + + 25% + + + 10% + + + 20% + + + 15% + + + 15% + + + 10% + + +
+ + + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + + + + +

content

+ + + +

Blaze :: Demo

Fluid Grid

Widths

Offsets

No wrap

Wrap

Grid in a grid

Vertical alignment

Per grid

Per cell

Fluid Snapping

No gutter

Per grid

per cell

Responsive

Responsive Hide/Show

Typography

Body text

Lists

Un-ordered

Ordered

Unstyled

Inline

Super

xLarge

Large

Medium

Small

xSmall

Tables

Striped

Clickable table

Clickable row

Condensed

Using divs

Images

Cards

Buttons

Button sizes

Full width

Colours

Ghosts

Rounded (and Ghosted)

Menus

Combo

Inputs

Textarea

Sizes

Select

Checkboxes

Radios

Fieldsets and legends

Input group

Field group

Labels, Fieldsets and Forms

Input hints

Inline forms

Floating labels

Toggles

Ranges

Tabs

Tags

Overlay

Modal

Modal animated

Drawers

Secondary actions

Secondary actions

Bubbles

Alerts

Toasts

Badges

Calendar

Pagination

Tree

Nav

Nav + Panel

Title Subtitle

+ Heading + Sub-heading +

Title + Subtitle +

+ Heading +
Sub-heading
+

+ Heading +
Sub-heading
+

+ Heading +
Sub-heading
+

+ Heading +
Sub-heading
+

+ Heading +
Sub-heading
+