From cf43a3d3a31977cccccac1eedbb5a5015b4ae2c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=80=E3=83=BC=E3=82=B7=E3=83=8E?= Date: Mon, 10 Dec 2018 15:48:17 +0900 Subject: [PATCH 1/2] Add progress bar (#140) * feat(progress.scss): add progress bar element * feat(progress.stories.js): add progress test in storybook * feat: add is-filled class * feat: add color variation --- docs/progress.stories.js | 26 +++++++++ index.html | 10 ++++ scss/elements/_index.scss | 1 + scss/elements/progress.scss | 108 ++++++++++++++++++++++++++++++++++++ 4 files changed, 145 insertions(+) create mode 100644 docs/progress.stories.js create mode 100644 scss/elements/progress.scss diff --git a/docs/progress.stories.js b/docs/progress.stories.js new file mode 100644 index 0000000..2601891 --- /dev/null +++ b/docs/progress.stories.js @@ -0,0 +1,26 @@ +import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies +import { // eslint-disable-line import/no-extraneous-dependencies + withKnobs, number, radios, +} 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', + }, ''); + return ``; +}); diff --git a/index.html b/index.html index 4c9d2f2..ed45663 100644 --- a/index.html +++ b/index.html @@ -178,6 +178,16 @@ +
+

Progress

+ + + + + + +
+

Icons

diff --git a/scss/elements/_index.scss b/scss/elements/_index.scss index a7995c9..adeb4b4 100644 --- a/scss/elements/_index.scss +++ b/scss/elements/_index.scss @@ -6,3 +6,4 @@ @import "checkboxes.scss"; @import "balloons.scss"; @import "tables.scss"; +@import "progress.scss"; diff --git a/scss/elements/progress.scss b/scss/elements/progress.scss new file mode 100644 index 0000000..007a87f --- /dev/null +++ b/scss/elements/progress.scss @@ -0,0 +1,108 @@ +.nes-progress { + width: 100%; + height: 48px; + padding: 4px; + margin: 4px; + color: $base-color; + background-color: $background-color; + box-shadow: 4px 0, -4px 0, 0 4px, 0 -4px; + -webkit-appearance: none; + appearance: none; + + @mixin progress-style($color) { + &::-webkit-progress-bar { + background-color: $background-color; + } + &::-webkit-progress-value { + background-color: $color; + } + &::-moz-progress-bar { + background-color: $color; + } + &::-ms-fill { + background-color: $color; + border: none; + } + } + + @include progress-style($base-color); + + &.is-primary { + @include progress-style(map-get($primary-colors, "normal")); + } + + &.is-success { + @include progress-style(map-get($success-colors, "normal")); + } + + &.is-warning { + @include progress-style(map-get($warning-colors, "normal")); + } + + &.is-error { + @include progress-style(map-get($error-colors, "normal")); + } + + &.is-pattern { + &::-webkit-progress-value { + background-color: $base-color; + background-image: linear-gradient( + 45deg, + $background-color 25%, + transparent 25%, + transparent 75%, + $background-color 75%, + $background-color + ), + linear-gradient( + 45deg, + $background-color 25%, + transparent 25%, + transparent 75%, + $background-color 75%, + $background-color + ); + background-position: 0 0, 10px 10px; + background-size: 20px 20px; + } + + &::-moz-progress-bar { + background-color: $base-color; + background-image: -moz-linear-gradient( + 45deg, + $background-color 25%, + transparent 25%, + transparent 75%, + $background-color 75%, + $background-color + ), + -moz-linear-gradient(45deg, $background-color 25%, transparent 25%, transparent 75%, $background-color + 75%, $background-color); + background-position: 0 0, 10px 10px; + background-size: 20px 20px; + } + + &::-ms-fill { + background-color: $base-color; + background-image: linear-gradient( + 45deg, + $background-color 25%, + transparent 25%, + transparent 75%, + $background-color 75%, + $background-color + ), + linear-gradient( + 45deg, + $background-color 25%, + transparent 25%, + transparent 75%, + $background-color 75%, + $background-color + ); + background-position: 0 0, 10px 10px; + background-size: 20px 20px; + border: none; + } + } +} From 73b361647237c708e788f2343c4dcb3afc73e7f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=83=80=E3=83=BC=E3=82=B7=E3=83=8E?= Date: Mon, 10 Dec 2018 17:55:41 +0900 Subject: [PATCH 2/2] (breaking changes)Add prefix to class name (#82) * feat: add prefix BREAKING CHANGE: add nes- to class prefix * feat: fix storybook --- docs/balloons.stories.js | 2 +- docs/buttons.stories.js | 2 +- docs/containers.stories.js | 2 +- docs/icons.stories.js | 36 ++--- docs/inputs.stories.js | 8 +- docs/table.stories.js | 2 +- docs/textarea.stories.js | 2 +- index.html | 232 ++++++++++++++++---------------- scss/elements/balloons.scss | 2 +- scss/elements/buttons.scss | 2 +- scss/elements/checkboxes.scss | 2 +- scss/elements/containers.scss | 2 +- scss/elements/radios.scss | 2 +- scss/elements/tables.scss | 2 +- scss/form/inputs.scss | 14 +- scss/icons/icons.scss | 10 +- scss/pixel-arts/ash.scss | 2 +- scss/pixel-arts/bcrikko.scss | 2 +- scss/pixel-arts/bulbasaur.scss | 2 +- scss/pixel-arts/charmander.scss | 2 +- scss/pixel-arts/mario.scss | 2 +- scss/pixel-arts/octocat.scss | 2 +- scss/pixel-arts/phone.scss | 2 +- scss/pixel-arts/pokeball.scss | 2 +- scss/pixel-arts/smartphone.scss | 2 +- scss/pixel-arts/squirtle.scss | 2 +- style.css | 28 ++-- 27 files changed, 185 insertions(+), 185 deletions(-) diff --git a/docs/balloons.stories.js b/docs/balloons.stories.js index ceed78f..4d42cfa 100644 --- a/docs/balloons.stories.js +++ b/docs/balloons.stories.js @@ -12,5 +12,5 @@ stories.add('balloon', () => { 'from-left': 'from-left', 'from-right': 'from-right', }, ''); - return `

Hello NES.css

`; + return `

Hello NES.css

`; }); diff --git a/docs/buttons.stories.js b/docs/buttons.stories.js index 447e224..5d8e859 100644 --- a/docs/buttons.stories.js +++ b/docs/buttons.stories.js @@ -15,5 +15,5 @@ stories.add('button', () => { 'is-error': 'is-error', 'is-disabled': 'is-disabled', }, ''); - return ``; + return ``; }); diff --git a/docs/containers.stories.js b/docs/containers.stories.js index 9e347e4..0e8c252 100644 --- a/docs/containers.stories.js +++ b/docs/containers.stories.js @@ -17,7 +17,7 @@ stories.add('container', () => { }, ''); const selectedClasses = [withTitle, isDark, isRounded, alignment]; - return `
+ return `

Container

Good morning. Thou hast had a good night's sleep, I hope.

`; diff --git a/docs/icons.stories.js b/docs/icons.stories.js index 21ad8fc..1838ef3 100644 --- a/docs/icons.stories.js +++ b/docs/icons.stories.js @@ -8,28 +8,28 @@ stories.addDecorator(withKnobs); stories.add('icon', () => { const selectedClass = select('class', { - 'icon twitter': 'icon twitter', - 'icon facebook': 'icon facebook', - 'icon github': 'icon github', - 'icon google': 'icon google', - 'icon youtube': 'icon youtube', - 'icon whatsapp': 'icon whatsapp', - 'icon close': 'icon close', - pokeball: 'pokeball', - bulbasaur: 'bulbasaur', - charmander: 'charmander', - squirtle: 'squirtle', - smartphone: 'smartphone', - phone: 'phone', - 'octocat animate': 'octocat animate', - ash: 'ash', - 'icon trophy': 'icon trophy', - mario: 'mario', + '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 close': 'nes-icon close', + 'nes-pokeball': 'nes-pokeball', + 'nes-bulbasaur': 'nes-bulbasaur', + 'nes-charmander': 'nes-charmander', + 'nes-squirtle': 'nes-squirtle', + 'nes-smartphone': 'nes-smartphone', + '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', - }, 'icon twitter'); + }, 'nes-icon twitter'); const selectedSize = radios('size', { default: '', 'is-small': 'is-small', diff --git a/docs/inputs.stories.js b/docs/inputs.stories.js index 6fa8016..80f24f2 100644 --- a/docs/inputs.stories.js +++ b/docs/inputs.stories.js @@ -8,15 +8,15 @@ stories.addDecorator(withKnobs); stories.add('input.radio', () => ` `) .add('input.checkbox', () => ` `) .add('input', () => { @@ -27,5 +27,5 @@ stories.add('input.radio', () => ` 'is-error': 'is-error', }, ''); - return ``; + return ``; }); diff --git a/docs/table.stories.js b/docs/table.stories.js index 5be3cec..f138432 100644 --- a/docs/table.stories.js +++ b/docs/table.stories.js @@ -13,7 +13,7 @@ stories.add('table', () => { const selectedClasses = [isBordered, isCentered, isDark]; - return ` + return `
diff --git a/docs/textarea.stories.js b/docs/textarea.stories.js index 30fe60d..7d12b4a 100644 --- a/docs/textarea.stories.js +++ b/docs/textarea.stories.js @@ -14,5 +14,5 @@ stories.add('textarea', () => { 'is-error': 'is-error', }, ''); - return ``; + return ``; }); diff --git a/index.html b/index.html index ed45663..deaf295 100644 --- a/index.html +++ b/index.html @@ -36,110 +36,110 @@ -

Fork me
on GitHub

- +

Fork me
on GitHub

+ -
+

Buttons

- - - - - - + + + + + +
-
+

Containers

-
+

Container.is-center

Good morning. Thou hast had a good night's sleep, I hope.

-
+

Container.is-dark

Good morning. Thou hast had a good night's sleep, I hope.

-
+

Good morning. Thou hast had a good night's sleep, I hope.

-
+

Good morning. Thou hast had a good night's sleep, I hope.

-
+

Radios

-
+

Checkboxes

-
+

Form

-
+
- +
-
+
- +
-
+
- +
-
+
- +
- +
-
+

Balloons

- -
+ +

Hello NES.css

-
+

Good morning. Thou hast had a good night's sleep, I hope.

- +
-
+

Table

-
Table.is-dark
+
@@ -157,7 +157,7 @@
Table.is-bordered
- +
@@ -178,7 +178,7 @@ -
+

Progress

@@ -188,116 +188,116 @@
-
+

Icons

-
+

Reaction

- - - - - + + + + + - - - - + + + + - - - + + + - - - + + + - + - - - - - + + + + +
-
+

SNS

- - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - + + + - - - + + +
-
+

Others

- - - - + + + + - + - - - - + + + + - - - + + + - - - + + + - - + +
-
+

Controllers

@@ -319,7 +319,7 @@
Table.is-dark