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

add checkboxes instead of select input to table and containers stories

Browse Source
This commit is contained in:
Abdallah Samman
2018-12-04 23:17:02 +02:00
parent 88e3a8b382
commit 08dd269769
2 changed files with 14 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
docs/containers.stories.js
View File

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

12
docs/table.stories.js
View File

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