mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-30 01:10:07 +02:00
Code Issues Releases Wiki Activity

docs(storybook): rename docs to story

Browse Source 
i'd like to use docs as demo site directory
This commit is contained in:
BcRikko
2019-02-16 21:23:04 +09:00
parent 165e9a0887
commit 6c05cf26cb
16 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/avatars.stories.js
View File

@@ -1,22 +0,0 @@
import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
import { // eslint-disable-line import/no-extraneous-dependencies
withKnobs, radios, boolean,
} from '@storybook/addon-knobs';
const stories = storiesOf('Avatars', module);
stories.addDecorator(withKnobs);
stories.add('avatars', () => {
const options = radios('class', {
'is-small': 'is-small',
default: '',
'is-medium': 'is-medium',
'is-large': 'is-large',
}, '');
const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
const selectedClasses = [isRounded, options].join(' ');
return `<img src="http://www.gravatar.com/avatar?s=15" class="nes-avatar ${selectedClasses}"
alt="Gravatar Image Example"
style="image-rendering: pixelated;">`;
});

43
docs/badge.stories.js
View File

@@ -1,43 +0,0 @@
import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
import { // eslint-disable-line import/no-extraneous-dependencies
withKnobs, radios, number,
} from '@storybook/addon-knobs';
const stories = storiesOf('Badges', module);
stories.addDecorator(withKnobs);
stories.add('badges', () => {
const optionsLeft = radios('left/only', {
'is-dark': 'is-dark',
'is-success': 'is-success',
'is-primary': 'is-primary',
'is-warning': 'is-warning',
'is-error': 'is-error',
}, 'is-dark');
const optionsRight = radios('right', {
'is-dark': 'is-dark',
'is-success': 'is-success',
'is-primary': 'is-primary',
'is-warning': 'is-warning',
'is-error': 'is-error',
}, 'is-success');
const isSplitedIsIconOrDefault = radios('default/splited/icon', {
default: '',
'is-splited': 'is-splited',
'is-icon': 'is-icon',
}, 'is-splited');
const fontSize = number('font-size', 1, {
range: true,
min: 0,
max: 100,
step: 0.01,
});
return `<a href="#" class="nes-badge ${isSplitedIsIconOrDefault}" style="font-size:${fontSize}em">
<span class="${optionsLeft}">npm</span>
<span class="${optionsRight}">1.0.0</span>
</a>`;
});

16
docs/balloons.stories.js
View File

@@ -1,16 +0,0 @@
import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
import { // eslint-disable-line import/no-extraneous-dependencies
withKnobs, radios,
} from '@storybook/addon-knobs';
const stories = storiesOf('Ballons', module);
stories.addDecorator(withKnobs);
stories.add('balloon', () => {
const selectedClass = radios('direction', {
default: '',
'from-left': 'from-left',
'from-right': 'from-right',
}, '');
return `<div class="nes-balloon ${selectedClass}"> <p>Hello NES.css</p> </div>`;
});

19
docs/buttons.stories.js
View File

@@ -1,19 +0,0 @@
import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
import { // eslint-disable-line import/no-extraneous-dependencies
withKnobs, radios,
} from '@storybook/addon-knobs';
const stories = storiesOf('Buttons', module);
stories.addDecorator(withKnobs);
stories.add('button', () => {
const extraClass = radios('class', {
default: '',
'is-primary': 'is-primary',
'is-success': 'is-success',
'is-warning': 'is-warning',
'is-error': 'is-error',
'is-disabled': 'is-disabled',
}, '');
return `<button type="button" class="nes-btn ${extraClass}">Normal</button>`;
});

24
docs/containers.stories.js
View File

@@ -1,24 +0,0 @@
import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
import { // eslint-disable-line import/no-extraneous-dependencies
withKnobs, boolean, radios,
} from '@storybook/addon-knobs';
const stories = storiesOf('Containers', module);
stories.addDecorator(withKnobs);
stories.add('container', () => {
const withTitle = boolean('with-title', false) ? 'with-title' : '';
const isDark = boolean('is-dark', false) ? 'is-dark' : '';
const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
const alignment = radios('alignment', {
default: '',
'is-centered': 'is-centered',
'is-right': 'is-right',
}, '');
const selectedClasses = [withTitle, isDark, isRounded, alignment];
return `<div class="nes-container ${selectedClasses.join(' ')}">
<p class="title">Container</p>
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
</div>`;
});

19
docs/dialogs.stories.js
View File

@@ -1,19 +0,0 @@
import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
import { // eslint-disable-line import/no-extraneous-dependencies
withKnobs, boolean,
} from '@storybook/addon-knobs';
const stories = storiesOf('Dialogs', module);
stories.addDecorator(withKnobs);
stories.add('dialog', () => {
const open = boolean('open', true) ? 'open' : '';
const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
const isDark = boolean('is-dark', false) ? 'is-dark' : '';
const selectedClasses = [isRounded, isDark];
return `<dialog class="nes-dialog ${selectedClasses.join(' ')}" ${open}>
<p class="title">Dialog</p>
<p>Alert: this is a dialog.</p>
</div>`;
});

46
docs/icons.stories.js
View File

@@ -1,46 +0,0 @@
import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
import { // eslint-disable-line import/no-extraneous-dependencies
withKnobs, select, radios,
} from '@storybook/addon-knobs';
const stories = storiesOf('Icons', module);
stories.addDecorator(withKnobs);
stories.add('icon', () => {
const selectedClass = select('class', {
'nes-icon twitter': 'nes-icon twitter',
'nes-icon facebook': 'nes-icon facebook',
'nes-icon github': 'nes-icon github',
'nes-icon google': 'nes-icon google',
'nes-icon youtube': 'nes-icon youtube',
'nes-icon whatsapp': 'nes-icon whatsapp',
'nes-icon gmail': 'nes-icon gmail',
'nes-icon linkedin': 'nes-icon linkedin',
'nes-icon instagram': 'nes-icon instagram',
'nes-icon close': 'nes-icon close',
'nes-icon coin': 'nes-icon coin',
'nes-pokeball': 'nes-pokeball',
'nes-bulbasaur': 'nes-bulbasaur',
'nes-charmander': 'nes-charmander',
'nes-squirtle': 'nes-squirtle',
'nes-smartphone': 'nes-smartphone',
'nes-kirby': 'nes-kirby',
'nes-phone': 'nes-phone',
'nes-octocat animate': 'nes-octocat animate',
'nes-ash': 'nes-ash',
'nes-icon trophy': 'nes-icon trophy',
'nes-mario': 'nes-mario',
'nes-logo': 'nes-logo',
'nes-jp-logo': 'nes-jp-logo',
'snes-logo': 'snes-logo',
'snes-jp-logo': 'snes-jp-logo',
}, 'nes-icon twitter');
const selectedSize = radios('size', {
default: '',
'is-small': 'is-small',
'is-medium': 'is-medium',
'is-large': 'is-large',
}, '');
return `<i class="${selectedClass} ${selectedSize}"></i>`;
});

40
docs/inputs.stories.js
View File

@@ -1,40 +0,0 @@
import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
import { // eslint-disable-line import/no-extraneous-dependencies
withKnobs, radios,
} from '@storybook/addon-knobs';
const stories = storiesOf('Inputs', module);
stories.addDecorator(withKnobs);
stories.add('input.radio', () => `
<label>
<input type="radio" class="nes-radio" name="answer" checked />
<span>Yes</span>
</label> <label>
<input type="radio" class="nes-radio" name="answer" />
<span>No</span>
</label>`)
.add('input.checkbox', () => {
const selectedClass = radios('class', {
default: '',
'is-dark': 'is-dark',
}, '');
return (
`<label>
<input type="checkbox" class="nes-checkbox ${selectedClass}" checked />
<span>Enable</span>
</label>`
);
})
.add('input', () => {
const selectedClass = radios('class', {
default: '',
'is-success': 'is-success',
'is-warning': 'is-warning',
'is-error': 'is-error',
'is-dark': 'is-dark',
}, '');
return `<input type="text" id="name_field" class="nes-input ${selectedClass}" placeholder="NES.css">`;
});

20
docs/lists.stories.js
View File

@@ -1,20 +0,0 @@
import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
import { // eslint-disable-line import/no-extraneous-dependencies
withKnobs, radios,
} from '@storybook/addon-knobs';
const stories = storiesOf('Lists', module);
stories.addDecorator(withKnobs);
stories.add('list', () => {
const selectedClass = radios('type', {
default: 'is-disc',
'is-circle': 'is-circle',
}, 'is-disc');
return `<ul class="nes-list ${selectedClass}">
<li>Good morning.</li>
<li>Thou hast had a good night's sleep, I hope.</li>
<li>Thou hast had a good afternoon</li>
<li>Good night.</li>
</ul>`;
});

28
docs/progress.stories.js
View File

@@ -1,28 +0,0 @@
import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
import { // eslint-disable-line import/no-extraneous-dependencies
withKnobs, number, radios, boolean,
} from '@storybook/addon-knobs';
const stories = storiesOf('Progress', module);
stories.addDecorator(withKnobs);
// prettier-ignore
stories.add('progress', () => {
const percentage = number('percentage', 30, {
range: true,
min: 0,
max: 100,
step: 1,
});
const extraClass = radios('class', {
default: '',
'is-primary': 'is-primary',
'is-success': 'is-success',
'is-warning': 'is-warning',
'is-error': 'is-error',
'is-pattern': 'is-pattern',
}, '');
const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
const selectedClasses = [extraClass, isRounded];
return `<progress class="nes-progress ${selectedClasses.join(' ')}" value="${percentage}" max="100" style="width: 98%;"></progress>`;
});

26
docs/select.stories.js
View File

@@ -1,26 +0,0 @@
import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
import { // eslint-disable-line import/no-extraneous-dependencies
withKnobs, radios,
} from '@storybook/addon-knobs';
const stories = storiesOf('Selects', module);
stories.addDecorator(withKnobs);
stories.add('select', () => {
const selectedClass = radios('class', {
default: '',
'is-success': 'is-success',
'is-warning': 'is-warning',
'is-error': 'is-error',
}, '');
return `
<div class="nes-select ${selectedClass}">
<select required>
<option value="" disabled selected hidden>Select...</option>
<option value="0">To be</option>
<option value="1">Not to be</option>
</select>
</div>
`;
});

37
docs/table.stories.js
View File

@@ -1,37 +0,0 @@
import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
import { // eslint-disable-line import/no-extraneous-dependencies
withKnobs, boolean,
} from '@storybook/addon-knobs';
const stories = storiesOf('Tables', module);
stories.addDecorator(withKnobs);
stories.add('table', () => {
const isBordered = boolean('is-bordered', true) ? 'is-bordered' : '';
const isCentered = boolean('is-centered', false) ? 'is-centered' : '';
const isDark = boolean('is-dark', false) ? 'is-dark' : '';
const selectedClasses = [isBordered, isCentered, isDark];
return `<table class="nes-table ${selectedClasses.join(' ')}" style="margin:15px 4px 5px 4px">
<thead>
<tr>
<th>Table.is-dark</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>`;
});

19
docs/text.stories.js
View File

@@ -1,19 +0,0 @@
import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
import { // eslint-disable-line import/no-extraneous-dependencies
withKnobs, radios,
} from '@storybook/addon-knobs';
const stories = storiesOf('Texts', module);
stories.addDecorator(withKnobs);
stories.add('text', () => {
const extraClass = radios('class', {
default: '',
'is-primary': 'is-primary',
'is-success': 'is-success',
'is-warning': 'is-warning',
'is-error': 'is-error',
'is-disabled': 'is-disabled',
}, '');
return `<span class="nes-text ${extraClass}">NES.css</span>`;
});

18
docs/textarea.stories.js
View File

@@ -1,18 +0,0 @@
import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
import { // eslint-disable-line import/no-extraneous-dependencies
withKnobs, radios,
} from '@storybook/addon-knobs';
const stories = storiesOf('Textareas', module);
stories.addDecorator(withKnobs);
stories.add('textarea', () => {
const selectedClass = radios('class', {
default: '',
'is-success': 'is-success',
'is-warning': 'is-warning',
'is-error': 'is-error',
}, '');
return `<textarea id="textarea_field" class="nes-textarea ${selectedClass}" placeholder="NES.css"></textarea>`;
});