mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-03-14 19:19:59 +01:00
Merge pull request #385 from HiKaylum/storybook_enhancement_1
refactor(storybook): storybook enhancement and cleanup
This commit is contained in:
B.C.Rikko
GitHub
commit
2dcec7b40a
47
package-lock.json
generated
47
package-lock.json
generated
@ -6362,6 +6362,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"file-type": {
|
||||
"version": "11.1.0",
|
||||
"resolved": "https://registry.npmjs.org/file-type/-/file-type-11.1.0.tgz",
|
||||
"integrity": "sha512-rM0UO7Qm9K7TWTtA6AShI/t7H5BPjDeGVDaNyg9BjHAj3PysKy7+8C8D137R88jnR3rFJZQB/tFgydl5sN5m7g==",
|
||||
"dev": true
|
||||
},
|
||||
"filesize": {
|
||||
"version": "3.6.1",
|
||||
"resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
|
||||
@ -6651,7 +6657,8 @@
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
|
||||
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
@ -6675,13 +6682,15 @@
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
|
||||
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
@ -6698,19 +6707,22 @@
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
|
||||
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
|
||||
"integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
@ -6841,7 +6853,8 @@
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
|
||||
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
@ -6855,6 +6868,7 @@
|
||||
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
|
||||
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
@ -6871,6 +6885,7 @@
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
|
||||
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
@ -6879,13 +6894,15 @@
|
||||
"version": "0.0.8",
|
||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
|
||||
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
"resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
|
||||
"integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
@ -6906,6 +6923,7 @@
|
||||
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
|
||||
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
@ -6994,7 +7012,8 @@
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
|
||||
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
@ -7008,6 +7027,7 @@
|
||||
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
|
||||
"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
@ -7103,7 +7123,8 @@
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
||||
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
@ -7145,6 +7166,7 @@
|
||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
|
||||
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
@ -7166,6 +7188,7 @@
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
|
||||
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
@ -7214,13 +7237,15 @@
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
|
||||
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
|
||||
"integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
14
package.json
14
package.json
@ -57,6 +57,7 @@
|
||||
"@storybook/html": "^5.0.0",
|
||||
"autoprefixer": "^9.1.5",
|
||||
"babel-loader": "^8.0.4",
|
||||
"classnames": "^2.2.6",
|
||||
"clean-css-cli": "^4.2.1",
|
||||
"commitizen": "^3.1.1",
|
||||
"css-loader": "^2.0.0",
|
||||
@ -158,7 +159,18 @@
|
||||
]
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "airbnb-base"
|
||||
"extends": "airbnb-base",
|
||||
"rules": {
|
||||
"import/no-extraneous-dependencies": [
|
||||
"error",
|
||||
{
|
||||
"devDependencies": [
|
||||
"**/*.stories.js",
|
||||
"**/*.template.js"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"eslintIgnore": [
|
||||
"docs/*"
|
||||
|
||||
38
story/_helpers/icons.js
Normal file
38
story/_helpers/icons.js
Normal file
@ -0,0 +1,38 @@
|
||||
export const Icons = {
|
||||
twitter: 'twitter',
|
||||
facebook: 'facebook',
|
||||
github: 'github',
|
||||
google: 'google',
|
||||
youtube: 'youtube',
|
||||
whatsapp: 'whatsapp',
|
||||
gmail: 'gmail',
|
||||
linkedin: 'linkedin',
|
||||
instagram: 'instagram',
|
||||
close: 'close',
|
||||
coin: 'coin',
|
||||
trophy: 'trophy',
|
||||
};
|
||||
|
||||
export const Sprites = {
|
||||
'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-mario': 'nes-mario',
|
||||
'nes-logo': 'nes-logo',
|
||||
'nes-jp-logo': 'nes-jp-logo',
|
||||
'snes-logo': 'snes-logo',
|
||||
'snes-jp-logo': 'snes-jp-logo',
|
||||
};
|
||||
|
||||
export const Size = {
|
||||
default: '',
|
||||
'is-small': 'is-small',
|
||||
'is-medium': 'is-medium',
|
||||
'is-large': 'is-large',
|
||||
};
|
||||
5
story/_helpers/shared.js
Normal file
5
story/_helpers/shared.js
Normal file
@ -0,0 +1,5 @@
|
||||
export default {
|
||||
'is-success': 'is-success',
|
||||
'is-warning': 'is-warning',
|
||||
'is-error': 'is-error',
|
||||
};
|
||||
@ -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;">`;
|
||||
});
|
||||
8
story/avatars/avatars.stories.js
Normal file
8
story/avatars/avatars.stories.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { storiesOf } from '@storybook/html';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
import Avatars from './avatars.template';
|
||||
|
||||
storiesOf('Avatars', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('Avatar', () => Avatars());
|
||||
26
story/avatars/avatars.template.js
Normal file
26
story/avatars/avatars.template.js
Normal file
@ -0,0 +1,26 @@
|
||||
import { select, boolean } from '@storybook/addon-knobs';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export default () => {
|
||||
const isRounded = boolean('is-rounded', false);
|
||||
const avatarSize = select('Avatar Classes', {
|
||||
default: '',
|
||||
'is-small': 'is-small',
|
||||
'is-medium': 'is-medium',
|
||||
'is-large': 'is-large',
|
||||
}, '');
|
||||
|
||||
const avatarClasses = classNames(
|
||||
'nes-avatar',
|
||||
avatarSize,
|
||||
{
|
||||
'is-rounded': isRounded,
|
||||
},
|
||||
);
|
||||
|
||||
return `
|
||||
<img src="http://www.gravatar.com/avatar?s=15" class="${avatarClasses}"
|
||||
alt="Gravatar Image Example"
|
||||
style="image-rendering: pixelated;">
|
||||
`;
|
||||
};
|
||||
@ -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>`;
|
||||
});
|
||||
8
story/badge/badge.stories.js
Normal file
8
story/badge/badge.stories.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { storiesOf } from '@storybook/html';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
import Badge from './badge.template';
|
||||
|
||||
storiesOf('Badges', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('Badge', () => Badge());
|
||||
38
story/badge/badge.template.js
Normal file
38
story/badge/badge.template.js
Normal file
@ -0,0 +1,38 @@
|
||||
import { select } from '@storybook/addon-knobs';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import sharedOptions from '../_helpers/shared';
|
||||
|
||||
export default () => {
|
||||
const sharedComponentOptions = {
|
||||
'is-dark': 'is-dark',
|
||||
'is-primary': 'is-primary',
|
||||
...sharedOptions,
|
||||
};
|
||||
|
||||
const iconStyle = select('Badge Display', {
|
||||
default: '',
|
||||
'is-splited': 'is-splited',
|
||||
'is-icon': 'is-icon',
|
||||
}, 'is-splited');
|
||||
|
||||
const leftOptions = select('Left Style', {
|
||||
...sharedComponentOptions,
|
||||
}, 'is-dark');
|
||||
|
||||
const rightOptions = select('Right Style', {
|
||||
...sharedComponentOptions,
|
||||
}, 'is-success');
|
||||
|
||||
const badgeClasses = classNames(
|
||||
'nes-badge',
|
||||
iconStyle,
|
||||
);
|
||||
|
||||
return `
|
||||
<a href="#" class="${badgeClasses}">
|
||||
<span class="${leftOptions}">npm</span>
|
||||
<span class="${rightOptions}">1.0.0</span>
|
||||
</a>
|
||||
`;
|
||||
};
|
||||
@ -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, boolean, radios,
|
||||
} from '@storybook/addon-knobs';
|
||||
|
||||
const stories = storiesOf('Ballons', module);
|
||||
stories.addDecorator(withKnobs);
|
||||
|
||||
stories.add('balloon', () => {
|
||||
const isDark = boolean('is-dark', false) ? 'is-dark' : '';
|
||||
const alignment = radios('direction', {
|
||||
default: '',
|
||||
'from-left': 'from-left',
|
||||
'from-right': 'from-right',
|
||||
}, '');
|
||||
const selectedClasses = [isDark, alignment];
|
||||
return `<div class="nes-balloon ${selectedClasses.join(' ')}"> <p>Hello NES.css</p> </div>`;
|
||||
});
|
||||
8
story/balloons/balloons.stories.js
Normal file
8
story/balloons/balloons.stories.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { storiesOf } from '@storybook/html';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
import Ballons from './balloons.template';
|
||||
|
||||
storiesOf('Balloons', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('Balloon', () => Ballons());
|
||||
25
story/balloons/balloons.template.js
Normal file
25
story/balloons/balloons.template.js
Normal file
@ -0,0 +1,25 @@
|
||||
import { select, boolean } from '@storybook/addon-knobs';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export default () => {
|
||||
const isDark = boolean('is-dark', false);
|
||||
const balloonDirection = select('Direction', {
|
||||
default: '',
|
||||
'from-left': 'from-left',
|
||||
'from-right': 'from-right',
|
||||
}, '');
|
||||
|
||||
const balloonClasses = classNames(
|
||||
'nes-balloon',
|
||||
balloonDirection,
|
||||
{
|
||||
'is-dark': isDark,
|
||||
},
|
||||
);
|
||||
|
||||
return `
|
||||
<div class="${balloonClasses}">
|
||||
<p>Hello NES.css</p>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
@ -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, radios, select,
|
||||
} from '@storybook/addon-knobs';
|
||||
|
||||
const stories = storiesOf('Buttons', module);
|
||||
stories.addDecorator(withKnobs);
|
||||
|
||||
stories.add('button', () => {
|
||||
const buttonType = select('type', {
|
||||
button: 'button',
|
||||
file: 'file',
|
||||
}, '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 buttonType === 'file'
|
||||
? `<label class="nes-btn ${extraClass}">
|
||||
<span>Select your file</span>
|
||||
<input type="file">
|
||||
</label>`
|
||||
: `<button type="button" class="nes-btn ${extraClass}">Normal</button>`;
|
||||
});
|
||||
8
story/buttons/buttons.stories.js
Normal file
8
story/buttons/buttons.stories.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { storiesOf } from '@storybook/html';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
import Buttons from './buttons.template';
|
||||
|
||||
storiesOf('Buttons', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('Buttons', () => Buttons());
|
||||
26
story/buttons/buttons.template.js
Normal file
26
story/buttons/buttons.template.js
Normal file
@ -0,0 +1,26 @@
|
||||
import { select } from '@storybook/addon-knobs';
|
||||
|
||||
import sharedOption from '../_helpers/shared';
|
||||
|
||||
export default () => {
|
||||
const buttonType = select('Button Type', {
|
||||
button: 'button',
|
||||
file: 'file',
|
||||
}, 'button');
|
||||
|
||||
const buttonClasses = select('Button Classes', {
|
||||
default: '',
|
||||
'is-primary': 'is-primary',
|
||||
...sharedOption,
|
||||
'is-disabled': 'is-disabled',
|
||||
}, '');
|
||||
|
||||
return buttonType === 'button' ? `
|
||||
<button type="button" class="nes-btn ${buttonClasses}">Normal</button>
|
||||
` : `
|
||||
<label class="nes-btn ${buttonClasses}">
|
||||
<span>Select your file</span>
|
||||
<input type="file">
|
||||
</label>
|
||||
`;
|
||||
};
|
||||
@ -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>`;
|
||||
});
|
||||
8
story/containers/containers.stories.js
Normal file
8
story/containers/containers.stories.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { storiesOf } from '@storybook/html';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
import Containers from './containers.template';
|
||||
|
||||
storiesOf('Containers', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('Container', () => Containers());
|
||||
31
story/containers/containers.template.js
Normal file
31
story/containers/containers.template.js
Normal file
@ -0,0 +1,31 @@
|
||||
import { select, boolean } from '@storybook/addon-knobs';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export default () => {
|
||||
const isDark = boolean('is-dark', false);
|
||||
const isRounded = boolean('is-rounded', false);
|
||||
const withTitle = boolean('with-title', false);
|
||||
|
||||
const containerAlignment = select('Alignment', {
|
||||
default: '',
|
||||
'is-centered': 'is-centered',
|
||||
'is-right': 'is-right',
|
||||
}, '');
|
||||
|
||||
const containerClasses = classNames(
|
||||
'nes-container',
|
||||
containerAlignment,
|
||||
{
|
||||
'is-dark': isDark,
|
||||
'is-rounded': isRounded,
|
||||
'with-title': withTitle,
|
||||
},
|
||||
);
|
||||
|
||||
return `
|
||||
<div class="${containerClasses}">
|
||||
${withTitle ? '<p class="title">Container</p>' : ''}
|
||||
<p>Good morning. Thou hast had a good night's sleep, I hope.</p>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
@ -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>`;
|
||||
});
|
||||
8
story/dialogs/dialogs.stories.js
Normal file
8
story/dialogs/dialogs.stories.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { storiesOf } from '@storybook/html';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
import Dialogs from './dialogs.template';
|
||||
|
||||
storiesOf('Dialogs', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('Dialog', () => Dialogs());
|
||||
23
story/dialogs/dialogs.template.js
Normal file
23
story/dialogs/dialogs.template.js
Normal file
@ -0,0 +1,23 @@
|
||||
import { boolean } from '@storybook/addon-knobs';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export default () => {
|
||||
const isOpen = boolean('Open', true) ? 'open' : '';
|
||||
const isRounded = boolean('is-rounded', false);
|
||||
const isDark = boolean('is-dark', false);
|
||||
|
||||
const dialogClasses = classNames(
|
||||
'nes-dialog',
|
||||
{
|
||||
'is-rounded': isRounded,
|
||||
'is-dark': isDark,
|
||||
},
|
||||
);
|
||||
|
||||
return `
|
||||
<dialog class="${dialogClasses}" ${isOpen}>
|
||||
<p class="title">Dialog</p>
|
||||
<p>Alert: this is a dialog.</p>
|
||||
</dialog>
|
||||
`;
|
||||
};
|
||||
@ -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>`;
|
||||
});
|
||||
10
story/icons/icons.stories.js
Normal file
10
story/icons/icons.stories.js
Normal file
@ -0,0 +1,10 @@
|
||||
import { storiesOf } from '@storybook/html';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
import Icons from './icons.template';
|
||||
import Sprites from './sprites.template';
|
||||
|
||||
storiesOf('Icons', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('Icons', () => Icons())
|
||||
.add('Sprites', () => Sprites());
|
||||
23
story/icons/icons.template.js
Normal file
23
story/icons/icons.template.js
Normal file
@ -0,0 +1,23 @@
|
||||
import { radios, select } from '@storybook/addon-knobs';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { Icons, Size } from '../_helpers/icons';
|
||||
|
||||
export default () => {
|
||||
const selectedIcon = select('class', {
|
||||
...Icons,
|
||||
}, 'twitter');
|
||||
|
||||
const iconSize = radios('Icon Size', {
|
||||
...Size,
|
||||
}, '');
|
||||
|
||||
const iconClasses = classNames(
|
||||
'nes-icon',
|
||||
selectedIcon,
|
||||
iconSize,
|
||||
);
|
||||
return `
|
||||
<i class="${iconClasses}"></i>
|
||||
`;
|
||||
};
|
||||
13
story/icons/sprites.template.js
Normal file
13
story/icons/sprites.template.js
Normal file
@ -0,0 +1,13 @@
|
||||
import { select } from '@storybook/addon-knobs';
|
||||
|
||||
import { Sprites } from '../_helpers/icons';
|
||||
|
||||
export default () => {
|
||||
const selectedSprite = select('class', {
|
||||
...Sprites,
|
||||
}, 'nes-pokeball');
|
||||
|
||||
return `
|
||||
<i class="${selectedSprite}"></i>
|
||||
`;
|
||||
};
|
||||
@ -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, boolean,
|
||||
} from '@storybook/addon-knobs';
|
||||
|
||||
const stories = storiesOf('Inputs', module);
|
||||
stories.addDecorator(withKnobs);
|
||||
|
||||
stories.add('input.radio', () => {
|
||||
const isDark = boolean('is-dark', false) ? 'is-dark' : '';
|
||||
|
||||
return (
|
||||
`<label>
|
||||
<input type="radio" class="nes-radio ${isDark}" name="answer" checked />
|
||||
<span>Yes</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" class="nes-radio ${isDark}" name="answer" />
|
||||
<span>No</span>
|
||||
</label>`
|
||||
);
|
||||
})
|
||||
.add('input.checkbox', () => {
|
||||
const isDark = boolean('is-dark', false) ? 'is-dark' : '';
|
||||
|
||||
return (
|
||||
`<label>
|
||||
<input type="checkbox" class="nes-checkbox ${isDark}" 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">`;
|
||||
});
|
||||
22
story/inputs/checkboxes.template.js
Normal file
22
story/inputs/checkboxes.template.js
Normal file
@ -0,0 +1,22 @@
|
||||
import { boolean } from '@storybook/addon-knobs';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export default () => {
|
||||
const isDark = boolean('is-dark', false);
|
||||
|
||||
const checkBoxClasses = classNames(
|
||||
'nes-checkbox',
|
||||
{
|
||||
'is-dark': isDark,
|
||||
},
|
||||
);
|
||||
|
||||
return `
|
||||
<div style="${isDark ? 'background-color: black;' : ''}">
|
||||
<label>
|
||||
<input type="checkbox" class="${checkBoxClasses}" checked />
|
||||
<span>Enable</span>
|
||||
</label>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
20
story/inputs/input.template.js
Normal file
20
story/inputs/input.template.js
Normal file
@ -0,0 +1,20 @@
|
||||
import { select } from '@storybook/addon-knobs';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import sharedOptions from '../_helpers/shared';
|
||||
|
||||
export default () => {
|
||||
const inputOptions = select('Input Classes', {
|
||||
default: '',
|
||||
...sharedOptions,
|
||||
}, '');
|
||||
|
||||
const inputClasses = classNames(
|
||||
'nes-input',
|
||||
inputOptions,
|
||||
);
|
||||
|
||||
return `
|
||||
<input type="text" id="name_field" class="${inputClasses}" placeholder="NES.css">
|
||||
`;
|
||||
};
|
||||
12
story/inputs/inputs.stories.js
Normal file
12
story/inputs/inputs.stories.js
Normal file
@ -0,0 +1,12 @@
|
||||
import { storiesOf } from '@storybook/html';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
import Input from './input.template';
|
||||
import CheckBox from './checkboxes.template';
|
||||
import Radio from './radio.template';
|
||||
|
||||
storiesOf('Inputs', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('Input', () => Input())
|
||||
.add('Checkbox', () => CheckBox())
|
||||
.add('Radio', () => Radio());
|
||||
27
story/inputs/radio.template.js
Normal file
27
story/inputs/radio.template.js
Normal file
@ -0,0 +1,27 @@
|
||||
import { boolean } from '@storybook/addon-knobs';
|
||||
import classNames from 'classnames';
|
||||
|
||||
|
||||
export default () => {
|
||||
const isDark = boolean('is-dark', false);
|
||||
|
||||
const radioClasses = classNames(
|
||||
'nes-radio',
|
||||
{
|
||||
'is-dark': isDark,
|
||||
},
|
||||
);
|
||||
|
||||
return `
|
||||
<div style="${isDark ? 'background-color: black;' : ''}">
|
||||
<label>
|
||||
<input type="radio" class="${radioClasses}" name="answer" checked />
|
||||
<span>Yes</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" class="${radioClasses}" name="answer" />
|
||||
<span>No</span>
|
||||
</label>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
@ -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>`;
|
||||
});
|
||||
8
story/lists/lists.stories.js
Normal file
8
story/lists/lists.stories.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { storiesOf } from '@storybook/html';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
import Lists from './lists.template';
|
||||
|
||||
storiesOf('Lists', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('List', () => Lists());
|
||||
23
story/lists/lists.template.js
Normal file
23
story/lists/lists.template.js
Normal file
@ -0,0 +1,23 @@
|
||||
import { radios } from '@storybook/addon-knobs';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export default () => {
|
||||
const listOptions = radios('List Type', {
|
||||
'is-disc': 'is-disc',
|
||||
'is-circle': 'is-circle',
|
||||
}, 'is-disc');
|
||||
|
||||
const listClasses = classNames(
|
||||
'nes-list',
|
||||
listOptions,
|
||||
);
|
||||
|
||||
return `
|
||||
<ul class="${listClasses}">
|
||||
<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>
|
||||
`;
|
||||
};
|
||||
@ -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>`;
|
||||
});
|
||||
8
story/progress/progress.stories.js
Normal file
8
story/progress/progress.stories.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { storiesOf } from '@storybook/html';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
import Progress from './progress.template';
|
||||
|
||||
storiesOf('Progress', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('Progress', () => Progress());
|
||||
32
story/progress/progress.template.js
Normal file
32
story/progress/progress.template.js
Normal file
@ -0,0 +1,32 @@
|
||||
import { select, boolean, number } from '@storybook/addon-knobs';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import sharedOption from '../_helpers/shared';
|
||||
|
||||
export default () => {
|
||||
const isRounded = boolean('is-rounded', false);
|
||||
const progressTypes = select('Progress Style', {
|
||||
default: '',
|
||||
'is-dark': 'is-dark',
|
||||
...sharedOption,
|
||||
}, '');
|
||||
|
||||
const percentage = number('Percentage', 30, {
|
||||
range: true,
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
});
|
||||
|
||||
const progessClasses = classNames(
|
||||
'nes-progress',
|
||||
progressTypes,
|
||||
{
|
||||
'is-rounded': isRounded,
|
||||
},
|
||||
);
|
||||
|
||||
return `
|
||||
<progress class="nes-progress ${progessClasses}" value="${percentage}" max="100" style="width: 100%;"></progress>
|
||||
`;
|
||||
};
|
||||
@ -1,27 +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',
|
||||
'is-dark': 'is-dark',
|
||||
}, '');
|
||||
|
||||
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>
|
||||
`;
|
||||
});
|
||||
8
story/select/select.stories.js
Normal file
8
story/select/select.stories.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { storiesOf } from '@storybook/html';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
import Select from './select.template';
|
||||
|
||||
storiesOf('Selects', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('Select', () => Select());
|
||||
21
story/select/select.template.js
Normal file
21
story/select/select.template.js
Normal file
@ -0,0 +1,21 @@
|
||||
import { select } from '@storybook/addon-knobs';
|
||||
|
||||
import sharedOptions from '../_helpers/shared';
|
||||
|
||||
export default () => {
|
||||
const selectedClass = select('class', {
|
||||
default: '',
|
||||
...sharedOptions,
|
||||
'is-dark': 'is-dark',
|
||||
}, '');
|
||||
|
||||
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>
|
||||
`;
|
||||
};
|
||||
@ -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>`;
|
||||
});
|
||||
8
story/table/table.stories.js
Normal file
8
story/table/table.stories.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { storiesOf } from '@storybook/html';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
import Table from './table.template';
|
||||
|
||||
storiesOf('Tables', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('Table', () => Table());
|
||||
41
story/table/table.template.js
Normal file
41
story/table/table.template.js
Normal file
@ -0,0 +1,41 @@
|
||||
import { boolean } from '@storybook/addon-knobs';
|
||||
import classNames from 'classnames';
|
||||
|
||||
export default () => {
|
||||
const isBorderd = boolean('is-bordered', true);
|
||||
const isCentered = boolean('is-centered', false);
|
||||
const isDark = boolean('is-dark', false);
|
||||
|
||||
const tableClasses = classNames(
|
||||
'nes-table',
|
||||
{
|
||||
'is-bordered': isBorderd,
|
||||
'is-centered': isCentered,
|
||||
'is-dark': isDark,
|
||||
},
|
||||
);
|
||||
|
||||
return `
|
||||
<table class="nes-table ${tableClasses}" 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>
|
||||
`;
|
||||
};
|
||||
@ -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>`;
|
||||
});
|
||||
8
story/text/text.stories.js
Normal file
8
story/text/text.stories.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { storiesOf } from '@storybook/html';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
import Text from './text.template';
|
||||
|
||||
storiesOf('Text', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('Text', () => Text());
|
||||
22
story/text/text.template.js
Normal file
22
story/text/text.template.js
Normal file
@ -0,0 +1,22 @@
|
||||
import { select } from '@storybook/addon-knobs';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import sharedOptions from '../_helpers/shared';
|
||||
|
||||
export default () => {
|
||||
const textOptions = select('Radio Classes', {
|
||||
default: '',
|
||||
'is-primary': 'is-primary',
|
||||
...sharedOptions,
|
||||
'is-disabled': 'is-disabled',
|
||||
}, '');
|
||||
|
||||
const textClasses = classNames(
|
||||
'nes-text',
|
||||
textOptions,
|
||||
);
|
||||
|
||||
return `
|
||||
<span class="nes-text ${textClasses}">NES.css</span>
|
||||
`;
|
||||
};
|
||||
@ -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>`;
|
||||
});
|
||||
8
story/textarea/textarea.stories.js
Normal file
8
story/textarea/textarea.stories.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { storiesOf } from '@storybook/html';
|
||||
import { withKnobs } from '@storybook/addon-knobs';
|
||||
|
||||
import Textarea from './textarea.template';
|
||||
|
||||
storiesOf('Textareas', module)
|
||||
.addDecorator(withKnobs)
|
||||
.add('Textarea', () => Textarea());
|
||||
20
story/textarea/textarea.template.js
Normal file
20
story/textarea/textarea.template.js
Normal file
@ -0,0 +1,20 @@
|
||||
import { select } from '@storybook/addon-knobs';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import sharedOptions from '../_helpers/shared';
|
||||
|
||||
export default () => {
|
||||
const textareaOption = select('Textarea Classes', {
|
||||
default: '',
|
||||
...sharedOptions,
|
||||
}, '');
|
||||
|
||||
const textareaClasses = classNames(
|
||||
'nes-textarea',
|
||||
textareaOption,
|
||||
);
|
||||
|
||||
return `
|
||||
<textarea id="textarea_field" class="${textareaClasses}" placeholder="NES.css"></textarea>
|
||||
`;
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user