feat(component): add darkMode

adds toggle between normal and dark themes instead of explicitly naming the classes

src/PercentageCircle.vue

@@ -1,8 +1,11 @@
 <template>
 	<div
-		@click="(e) => $emit('click', e)"
+		@click="onClick"
 		class="c100"
-		:class="[`p${innerPercent}`, !complete ? activeColor : completeColor, size]">
+		:class="[
+			`p${innerPercent}`,
+			!complete ? activeColor : completeColor, size,
+			darkMode ? 'dark' : '']">
 	    <span>{{innerPercent}}%</span>
 	    <div class="slice">
 	        <div class="bar"></div>
@@ -14,29 +17,51 @@
 <script>
 	export default {
 		props: {
+			/**
+		     * Percentage of progress (0-100)
+		     */
 			percent: {
 				type: Number,
 				default: 0
 			},
+			/**
+		     * Size of percentage circle [small, large, huge]
+		     */
 			size: {
 				type: String,
 				default: 'small'
 			},
+			/**
+			 * Color when active.
+			 */
 			activeColor: {
 				type: String,
 				default: 'blue'
 			},
+			/**
+			 * Color when complete.
+			 */
 			completeColor: {
 				type: String,
 				default: ''
 			},
+			/**
+		     * Animate percentage changes.
+		     */
 			animate: {
 				type: Boolean,
 				default: false
 			},
+			/**
+			 * Only applicable when animated is set to true. Speed in which animation changes happen
+			 */
 			refreshRate: {
 				type: Number,
 				default: 5
+			},
+			darkMode: {
+				type: Boolean,
+				default: false
 			}
 		},
 		computed: {
@@ -90,6 +115,15 @@
 						this.stepTo()
 					}, this.refreshRate)
 				}
+			},
+			onClick(event) {
+				/**
+			     * Click event.
+			     *
+			     * @event success
+			     * @property {object} click event object
+			     */
+				this.$emit('click', event)
 			}
 		}
 	}

stories/1-ProgressCircle.stories.js

@@ -1,6 +1,6 @@
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
-import { withKnobs, number, select } from '@storybook/addon-knobs'
+import { withKnobs, number, select, boolean } from '@storybook/addon-knobs'
 
 import PercentageCircle from '../src/PercentageCircle';
 
@@ -33,11 +33,8 @@ const sizeOptions = {
 
 const colorOptions = {
   Blue: '',
-  DarkMode: 'dark',
   Green: 'green',
-  GreenDarkmode: 'green dark',
   Orange: 'orange',
-  OrangeDark: 'orange dark',
 }
 
 export const KitchenSink = () => ({
@@ -54,9 +51,12 @@ export const KitchenSink = () => ({
     },
     completeColor: {
       default: select('Complete Color', colorOptions, '')
+    },
+    darkMode: {
+      default: boolean('Dark Mode', false)
     }
   },
-  template: '<PercentageCircle @click="recountUp" :percent="percent" :size="size" :active-color="activeColor" :complete-color="completeColor"></PercentageCircle>',
+  template: '<PercentageCircle @click="recountUp" :percent="percent" :size="size" :active-color="activeColor" :complete-color="completeColor" :dark-mode="darkMode"></PercentageCircle>',
 });
 
 
@@ -77,6 +77,9 @@ export const Animated = () => ({
     },
     completeColor: {
       default: select('Complete Color', colorOptions, '')
+    },
+    darkMode: {
+      default: boolean('Dark Mode', false)
     }
   },
   template: `
@@ -87,6 +90,7 @@ export const Animated = () => ({
       :size="size"
       :active-color="activeColor"
       :refresh-rate="refreshRate"
+      :dark-mode="darkMode"
       :complete-color="completeColor">
     </PercentageCircle>`,
   data() {