@everchron/ec-shards 2.0.1 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "private": false,
   "description": "Everchron Shards UI Library",
   "repository": "https://github.com/everchron/ec-shards.git",

package/src/components/quicklink/quicklink.vue

@@ -24,7 +24,7 @@
       </template>
 
       <template v-else-if="type === 'switch'">
-        <ecs-switch @input="$emit('toggle', $event)" :value="valueToggle" :disabled="value == false" size="sml">{{label}}</ecs-switch>
+        <ecs-switch @input="$emit('toggle', $event)" :value="valueToggle" :disabled="value == false" size="sml-toggle" colored>{{label}}</ecs-switch>
       </template>
 
       <template v-else>

package/src/components/switch/switch.vue

@@ -3,8 +3,10 @@
     <label class="ecs-switch"
       :class="[
         sizeClass,
-        hasDefaultSlot ? `ecs-switch-has-label` : '',
-        disabled ? `disabled` : ''
+        hasDefaultSlot ? 'ecs-switch-has-label' : '',
+        disabled ? 'disabled' : '',
+        colored ? 'ecs-switch-colored' : '',
+        indeterminate ? 'ecs-switch-indeterminate' : ''
       ]">
       <input
         type="checkbox"
@@ -15,7 +17,9 @@
         :disabled="disabled"
         :checked="checked"
         @change="handleClick">
-      <div class="ecs-slide-switch"></div>
+      <div class="ecs-slide-switch">
+        <div class="indeterminate" />
+      </div>
     </label>
     <label v-if="hasDefaultSlot" :for="id">
       <slot></slot>
@@ -30,10 +34,10 @@
       name: {
         type: String
       },
-      /** Determines the size of the switch. */
+      /** Determines the size of the switch. `sml-toggle` sets the toggle control size to small, but maintains a regular font size. */
       size: {
         type: String,
-        validator: v => ['sml', 'lg', 'null', null].includes(v)
+        validator: v => ['sml', 'sml-toggle', 'lg', 'md', 'null', null].includes(v)
       },
       /** Sets the switch to required. */
       required: {
@@ -45,6 +49,16 @@
         type: Boolean,
         default: false
       },
+      /** Reflects a true or false state with positive (green) and negative (red) colors. */
+      colored: {
+        type: Boolean,
+        default: false
+      },
+      /** Reflects an indeterminate switch state (e.g. not all options checked, but some). This is a purely visual setting. */
+      indeterminate: {
+        type: Boolean,
+        default: false
+      },
       value: {
         default: false,
         required: false,
@@ -81,7 +95,11 @@
 
       sizeClass() {
         if (this.size && this.size !== '')
-          return `ecs-switch-${this.size}`
+          if (this.size == 'sml-toggle'){
+            return `ecs-switch-sml regular-font`
+          } else {
+            return `ecs-switch-${this.size}`
+          }
         return this.size
       },
 
@@ -143,14 +161,24 @@
     align-items: center;
   }
 
-  &.disabled{
-    opacity: .5;
-  }
-
   input[type=checkbox] {
     display:none;
   }
 
+  .indeterminate{
+    width: 9px;
+    height: 4px;
+    border-radius: 2px;
+    position: absolute;
+    top: 50%;
+    left: 5px;
+    margin-top: -2px;
+    background: #FFF;
+    transition: .3s .15s;
+    transform: scale(.5);
+    opacity: 0;
+  }
+
   &-has-label{
     margin: $spacing-5 $spacing-15 $spacing-5 0;
 
@@ -158,9 +186,10 @@
       margin: $spacing-5 0;
       line-height: $spacing-30;
       font-size: $type-scale-3-font-size;
-        line-height: $type-scale-3-line-height;
+      line-height: $type-scale-3-line-height;
       display: flex;
       align-items: center;
+      user-select: none;
     }
   }
 
@@ -178,6 +207,13 @@
         width: 10px;
         height: 10px;
       }
+
+      .indeterminate{
+        width: 4px;
+        height: 2px;
+        left: 3px;
+        margin-top: -1px;
+      }
     }
 
     input:checked + .ecs-slide-switch::after{
@@ -192,6 +228,15 @@
         line-height: $type-scale-2-line-height;
       }
     }
+
+    &.regular-font.ecs-switch-has-label{
+      margin: $spacing-5 $spacing-10 $spacing-5 0;
+
+      + label{
+        font-size: $type-scale-3-font-size;
+        line-height: $type-scale-2-line-height;
+      }
+    }
   }
 
   &-lg{
@@ -208,6 +253,11 @@
         width: 28px;
         height: 28px;
       }
+
+      .indeterminate{
+        width: 11px;
+        left: 6px;
+      }
     }
 
     input:checked + .ecs-slide-switch::after{
@@ -275,4 +325,45 @@
     }
   }
 }
+
+// Colored theme
+.ecs-switch-colored{
+  .ecs-slide-switch{
+    &:before{
+      border-color: $color-red-9;
+      background: $color-red-8;
+    }
+  }
+
+  input:checked + .ecs-slide-switch{
+    background-color: $color-green-8;
+  }
+}
+
+.ecs-switch-indeterminate{
+  input:checked + .ecs-slide-switch{
+    .indeterminate{
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+}
+
+//Disabled state
+.ecs-switch.disabled{
+  opacity: .5;
+
+  .ecs-slide-switch{
+    cursor: not-allowed;
+
+    &:before{
+      border-color: $color-gray-5;
+      background: $color-gray-4;
+    }
+  }
+
+  input:checked + .ecs-slide-switch{
+    background-color: $color-gray-8;
+  }
+}
 </style>

package/src/stories/Changelog.stories.mdx

@@ -6,16 +6,34 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
-## Version 2.0.1 (13 September 2022)
+## Version 2.0.2 (22 September 2022)
 
 ### Breaking Changes
 
 - Refactored the EcsPartyEntry component to accept custom color values. Deprecated the old annotation color classes.
+- Refactored EcsSwatchesPicker. Now accepts all color values as a prop and does not handle color management within the component.
 
 ### Fixes
 
 - Unscoped content styles for `EcsDataListItem`
 
+## Version 1.6.4 (15 September 2022)
+
+### Features
+
+- Added new props and functionality to `EcsSwitch` component
+    - `indeterminate`: sets the switch to indeterminate state (only visually)
+    - `colored`: alters the switch colors to red/green
+    - `size="sml-toggle"`: shows the switch toggle in small, but it's label in a regular size
+    - improved disabled styles
+- `EcsQuicklink` now uses the new colored switch theme for quicklinks that contain a switch.
+
+## Version 1.6.1 (13 September 2022)
+
+### Fixes
+
+- Unscoped content styles of `EcsDataListItem` to allow more dynamic content injeciton.
+
 ## Version 1.6.0 (13 September 2022)
 
 ### Features

package/src/stories/quicklink/quicklink.stories.js

@@ -27,5 +27,10 @@ export const quicklinkFavorability = () => ({
 
 export const quicklinkThreeWaySwitch = () => ({
   components: { EcsQuicklink },
-  template: `<ecs-quicklink type="switch" label="Filter" :value="true" :valueToggle="true" :count="12" />`,
+  data() {
+    return {
+      value: false,
+    }
+  },
+  template: `<ecs-quicklink @input="value = !value" :active="value" type="switch" label="Filter" :value="value" :valueToggle="true" :count="12" />`,
 });

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>`,
+});