mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-08-30 17:30:23 +02:00
add stories for balloons, buttons, containers, icons, inputs and table
This commit is contained in:
Abdallah Samman
7
docs/balloons.stories.js
Normal file
7
docs/balloons.stories.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import { storiesOf } from '@storybook/html';
|
||||
|
||||
import '../css/nes.css';
|
||||
|
||||
storiesOf('Balloons', module)
|
||||
.add('.balloon.from-left', () => '<div class="balloon from-left"> <p>Hello NES.css</p> </div>')
|
||||
.add('.balloon.from-right', () => '<div class="balloon from-right"> <p>Hello NES.css</p> </div>');
|
||||
10
docs/buttons.stories.js
Normal file
10
docs/buttons.stories.js
Normal file
@@ -0,0 +1,10 @@
|
||||
import { storiesOf } from '@storybook/html';
|
||||
|
||||
import '../css/nes.css';
|
||||
|
||||
storiesOf('Buttons', module)
|
||||
.add('button.btn', () => ' <button type="button" class="btn">Normal</button>')
|
||||
.add('button.btn.is-primary', () => '<button type="button" class="btn is-primary">Primary</button>')
|
||||
.add('button.btn.is-success', () => '<button type="button" class="btn is-success">Success</button>')
|
||||
.add('button.btn.is-warning', () => '<button type="button" class="btn is-warning">Warning</button>')
|
||||
.add('button.btn.is-error', () => '<button type="button" class="btn is-error">Error</button>');
|
||||
37
docs/containers.stories.js
Normal file
37
docs/containers.stories.js
Normal file
@@ -0,0 +1,37 @@
|
||||
import { storiesOf } from '@storybook/html';
|
||||
|
||||
import '../css/nes.css';
|
||||
|
||||
storiesOf('Containers', module)
|
||||
.add('.container.with-title', () => `<div class="container with-title">
|
||||
<p class="title">Container</p>
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div>`)
|
||||
.add('.container.with-title.is-center', () => `<div class="container with-title is-center">
|
||||
<p class="title">Container.is-center</p>
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div>`)
|
||||
.add('.container.with-title.is-right', () => `<div class="container with-title is-right">
|
||||
<p class="title">Container.is-right</p>
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div>`)
|
||||
.add('.container.with-title.is_dark', () => `<div class="container with-title is-dark">
|
||||
<p class="title">Container</p>
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div>`)
|
||||
.add('.container.with-title.is-center.is-dark', () => `<div class="container with-title is-center is-dark">
|
||||
<p class="title">Container.is-center</p>
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div>`)
|
||||
.add('.container.with-title.is-right.is-dark', () => `<div class="container with-title is-right is-dark">
|
||||
<p class="title">Container.is-right</p>
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div>`)
|
||||
.add('.container.is-rounded', () => `<div class="container is-rounded">
|
||||
<p class="title">Container.is-right</p>
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div>`)
|
||||
.add('.container.is-rounded.is-dark', () => `<div class="container is-rounded is-dark">
|
||||
<p class="title">Container.is-right</p>
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div>`);
|
||||
28
docs/icons.stories.js
Normal file
28
docs/icons.stories.js
Normal file
@@ -0,0 +1,28 @@
|
||||
import { storiesOf } from '@storybook/html';
|
||||
|
||||
import '../css/nes.css';
|
||||
|
||||
storiesOf('Icons', module)
|
||||
.add('icon.twitter', () => '<i class="icon twitter"></i>')
|
||||
.add('icon.twitter.is-medium', () => '<i class="icon twitter is-medium"></i>')
|
||||
.add('icon.twitter.is-large', () => '<i class="icon twitter is-large"></i>')
|
||||
.add('icon.facebook', () => '<i class="icon facebook"></i>')
|
||||
.add('icon.facebook.is-medium', () => '<i class="icon facebook is-medium"></i>')
|
||||
.add('icon.facebook.is-large', () => '<i class="icon facebook is-large"></i>')
|
||||
.add('icon.github', () => '<i class="icon github"></i>')
|
||||
.add('icon.github.is-medium', () => '<i class="icon github is-medium"></i>')
|
||||
.add('icon.github.is-large', () => '<i class="icon github is-large"></i>')
|
||||
.add('icon.youtube', () => '<i class="icon youtube"></i>')
|
||||
.add('icon.youtube.is-medium', () => '<i class="icon youtube is-medium"></i>')
|
||||
.add('icon.youtube.is-large', () => '<i class="icon youtube is-large"></i>')
|
||||
.add('icon.close', () => '<i class="icon close"></i>')
|
||||
.add('icon.close.is-medium', () => '<i class="icon close is-medium"></i>')
|
||||
.add('icon.close.is-large', () => '<i class="icon close is-large"></i>')
|
||||
.add('octocat animate', () => '<i class="octocat animate"></i>')
|
||||
.add('icon.trophy', () => '<i class="icon trophy"></i>')
|
||||
.add('icon.trophy is-medium', () => '<i class="icon trophy is-medium"></i>')
|
||||
.add('icon.trophy is-large', () => '<i class="icon trophy is-large"></i>')
|
||||
.add('nes-logo', () => '<i class="nes-logo"></i>')
|
||||
.add('nes-jp-logo', () => '<i class="nes-jp-logo"></i>')
|
||||
.add('snes-logo', () => '<i class="snes-logo"></i>')
|
||||
.add('snes-jp-logo', () => '<i class="snes-jp-logo"></i>');
|
||||
@@ -1,17 +0,0 @@
|
||||
import { storiesOf } from '@storybook/html';
|
||||
|
||||
import '../css/nes.css';
|
||||
|
||||
storiesOf('Containers', module)
|
||||
.add('default', () => `<div class="container with-title">
|
||||
<p class="title">Container</p>
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div>`)
|
||||
.add('.is-center', () => `<div class="container with-title is-center">
|
||||
<p class="title">Container.is-center</p>
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div>`)
|
||||
.add('.is-right', () => `<div class="container with-title is-right">
|
||||
<p class="title">Container.is-right</p>
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div>`);
|
||||
26
docs/inputs.stories.js
Normal file
26
docs/inputs.stories.js
Normal file
@@ -0,0 +1,26 @@
|
||||
import { storiesOf } from '@storybook/html';
|
||||
|
||||
import '../css/nes.css';
|
||||
|
||||
storiesOf('Inputs', module)
|
||||
.add('input.radio', () => `
|
||||
<label>
|
||||
<input type="radio" class="radio" name="answer" checked />
|
||||
<span>Yes</span>
|
||||
</label> <label>
|
||||
<input type="radio" class="radio" name="answer" />
|
||||
<span>No</span>
|
||||
</label>`)
|
||||
.add('input.checkbox', () => `
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" checked />
|
||||
<span>Enable</span>
|
||||
</label>`)
|
||||
.add('input.input', () => `
|
||||
<input type="text" id="name_field" class="input">`)
|
||||
.add('input.input.is-success', () => `
|
||||
<input type="text" class="input is-success" placeholder="NES.css">`)
|
||||
.add('input.input.is-warning', () => `
|
||||
<input type="text" class="input is-warning" placeholder="8bit.css">`)
|
||||
.add('input.input.is-error', () => `
|
||||
<input type="text" class="input is-error" placeholder="awesome.css">`);
|
||||
72
docs/table.stories.js
Normal file
72
docs/table.stories.js
Normal file
@@ -0,0 +1,72 @@
|
||||
import { storiesOf } from '@storybook/html';
|
||||
|
||||
import '../css/nes.css';
|
||||
|
||||
storiesOf('Tables', module)
|
||||
.add('table.table', () => `
|
||||
<table class="table" style="margin:15px 4px 5px 4px">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Table</th>
|
||||
<th>Table.is-bordered</th>
|
||||
<th>Table.is-centered</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Thou hast had a good morning</td>
|
||||
<td>Thou hast had a good afternoon</td>
|
||||
<td>Thou hast had a good night</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thou hast had a good morning</td>
|
||||
<td>Thou hast had a good afternoon</td>
|
||||
<td>Thou hast had a good night</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`)
|
||||
.add('table.table.is-bordered', () => `
|
||||
<table class="table is-bordered" style="margin:15px 4px 5px 4px">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Table</th>
|
||||
<th>Table.is-bordered</th>
|
||||
<th>Table.is-centered</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Thou hast had a good morning</td>
|
||||
<td>Thou hast had a good afternoon</td>
|
||||
<td>Thou hast had a good night</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thou hast had a good morning</td>
|
||||
<td>Thou hast had a good afternoon</td>
|
||||
<td>Thou hast had a good night</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>`)
|
||||
.add('table.table.is-bordered.is-centered', () => `
|
||||
<table class="table is-bordered is-centered" style="margin:15px 4px 5px 4px">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Table</th>
|
||||
<th>Table.is-bordered</th>
|
||||
<th>Table.is-centered</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Thou hast had a good morning</td>
|
||||
<td>Thou hast had a good afternoon</td>
|
||||
<td>Thou hast had a good night</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thou hast had a good morning</td>
|
||||
<td>Thou hast had a good afternoon</td>
|
||||
<td>Thou hast had a good night</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
`);
|
||||
Reference in New Issue
Block a user