@everchron/ec-shards 1.6.3 → 1.6.5

package/src/stories/swatches-picker/swatches-picker.stories.js

@@ -9,90 +9,13 @@ export const SwatchesPicker = () => ({
   components: { EcsSwatchesPicker },
   data() {
     return {
-      selectedColor: '',
-      swatchesData: [
-        {
-          "id": 1,
-          "title": "Yellow",
-          "hex": "#F9DF00"
-        },
-        {
-          "id": 2,
-          "title": "Orange",
-          "hex": "#F3A100"
-        },
-        {
-          "id": 3,
-          "title": "Lime",
-          "hex": "#B7EA80"
-        },
-        {
-          "id": 4,
-          "title": "Cyan",
-          "hex": "#48E4C2"
-        },
-        {
-          "id": 5,
-          "title": "Blue",
-          "hex": "#489DFF"
-        },
-        {
-          "id": 6,
-          "title": "Indigo",
-          "hex": "#B877F0"
-        },
-        {
-          "id": 7,
-          "title": "Pink",
-          "hex": "#FD78FD"
-        },
-        {
-          "id": 8,
-          "title": "Brown",
-          "hex": "#C59465"
-        },
-        {
-          "id": 9,
-          "title": "Grey",
-          "hex": "#858E9F"
-        },
-        {
-          "id": 10,
-          "title": "Red",
-          "hex": "#EE5452"
-        },
-        {
-          "id": 11,
-          "title": "Dark Blue",
-          "hex": "#227FD3"
-        },
-        {
-          "id": 12,
-          "title": "Green",
-          "hex": "#5DAF00"
-        },
-        {
-          "id": 13,
-          "title": "Brass",
-          "hex": "#A4927A"
-        },
-        {
-          "id": 14,
-          "title": "Silver",
-          "hex": "#95989C"
-        },
-        {
-          "id": 15,
-          "title": "Gold",
-          "hex": "#D78B21"
-        }
-      ]
+      selectedColor: ''
     }
   },
   template: `<div>
-              <ecs-swatches-picker v-model="selectedColor" selected="#F9DF00" :swatches="swatchesData" />
+              <ecs-swatches-picker v-model="selectedColor" selected="#F9DF00" />
               <hr style="border: none; border-bottom: 1px solid #DADEE6; margin: 20px 0">
-              Selected: {{ selectedColor }}
+              Selected: {{ selectedColor.title }}, {{ selectedColor.color }}
             </div>`,
 });
 
@@ -100,89 +23,12 @@ export const SwatchesPickerSizes = () => ({
   components: { EcsSwatchesPicker },
   data() {
     return {
-      selectedColor: '',
-      swatchesData: [
-        {
-          "id": 1,
-          "title": "Yellow",
-          "hex": "#F9DF00"
-        },
-        {
-          "id": 2,
-          "title": "Orange",
-          "hex": "#F3A100"
-        },
-        {
-          "id": 3,
-          "title": "Lime",
-          "hex": "#B7EA80"
-        },
-        {
-          "id": 4,
-          "title": "Cyan",
-          "hex": "#48E4C2"
-        },
-        {
-          "id": 5,
-          "title": "Blue",
-          "hex": "#489DFF"
-        },
-        {
-          "id": 6,
-          "title": "Indigo",
-          "hex": "#B877F0"
-        },
-        {
-          "id": 7,
-          "title": "Pink",
-          "hex": "#FD78FD"
-        },
-        {
-          "id": 8,
-          "title": "Brown",
-          "hex": "#C59465"
-        },
-        {
-          "id": 9,
-          "title": "Grey",
-          "hex": "#858E9F"
-        },
-        {
-          "id": 10,
-          "title": "Red",
-          "hex": "#EE5452"
-        },
-        {
-          "id": 11,
-          "title": "Dark Blue",
-          "hex": "#227FD3"
-        },
-        {
-          "id": 12,
-          "title": "Green",
-          "hex": "#5DAF00"
-        },
-        {
-          "id": 13,
-          "title": "Brass",
-          "hex": "#A4927A"
-        },
-        {
-          "id": 14,
-          "title": "Silver",
-          "hex": "#95989C"
-        },
-        {
-          "id": 15,
-          "title": "Gold",
-          "hex": "#D78B21"
-        }
-      ]
+      selectedColor: ''
     }
   },
   template: `<div>
-              <ecs-swatches-picker v-model="selectedColor" size="sml" :swatches="swatchesData" selected="#D78B21" />
-              <ecs-swatches-picker v-model="selectedColor" size="md" :swatches="swatchesData" selected="#F9DF00" />
-              <ecs-swatches-picker v-model="selectedColor" size="lg" :swatches="swatchesData" selected="#F9DF00" />
+              <ecs-swatches-picker v-model="selectedColor" size="sml" selected="#F9DF00" />
+              <ecs-swatches-picker v-model="selectedColor" size="md" selected="#F9DF00" />
+              <ecs-swatches-picker v-model="selectedColor" size="lg" selected="#F9DF00" />
             </div>`,
 });

package/src/stories/switch/switch.stories.js

@@ -15,7 +15,7 @@ export const regular = () => ({
   },
   template: `<div>
               <ecs-switch v-model="first">{{ first }}</ecs-switch>
-              <ecs-switch v-model="second" disabled>{{ second }}</ecs-switch>
+              <ecs-switch v-model="second">{{ second }}</ecs-switch>
             </div>`,
 });
 
@@ -23,6 +23,7 @@ export const sizes = () => ({
   components: { EcsSwitch },
   template: `<div>
               <ecs-switch size="sml">Small</ecs-switch>
+              <ecs-switch size="sml-toggle">Small Toggle</ecs-switch>
               <ecs-switch>Default</ecs-switch>
               <ecs-switch size="lg">Large</ecs-switch>
             </div>`,
@@ -32,3 +33,22 @@ export const standalone = () => ({
   components: { EcsSwitch },
   template: `<ecs-switch standalone />`,
 });
+
+export const indeterminateSwitch = () => ({
+  components: { EcsSwitch },
+  template: `<div>
+              <ecs-switch indeterminate size="sml">Small</ecs-switch>
+              <ecs-switch indeterminate>Default</ecs-switch>
+              <ecs-switch indeterminate size="lg">Large</ecs-switch>
+            </div>`,
+});
+
+export const coloredSwitch = () => ({
+  components: { EcsSwitch },
+  data() {
+    return {
+      first: false
+    }
+  },
+  template: `<ecs-switch colored v-model="first">Colored Switch</ecs-switch>`,
+});