@everchron/ec-shards 1.6.3 → 1.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "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="disableSwitch" 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>
@@ -110,11 +110,6 @@
           return `active`
         else
           return `subtle`
-      },
-
-      disableSwitch(){
-        console.log('disableSwitch', this.value == false, this.value)
-        return this.value == false
       }
     }
   }

package/src/components/swatches-picker/swatches-picker.vue

@@ -2,12 +2,12 @@
 <template>
   <div class="ecs-swatches" :class="sizeClass">
     <div
-      v-for="item in swatches" :key="item.id"
-      @click="selectedColor = item.hex"
+      v-for="item in swatches" :key="item.color"
+      @click="selectedColor = item.color"
       :title="item.title"
       class="ecs-swatches-color"
-      :style="{backgroundColor: item.hex, color: item.hex}"
-      :class="selectedColor == item.hex ? 'active' : ''">
+      :style="{backgroundColor: item.color, color: item.color}"
+      :class="selectedColor == item.color ? 'active' : ''">
     </div>
   </div>
 </template>
@@ -23,17 +23,30 @@
       },
       /** Sets the selected color value. Must be a HEX value that exists in the swatches (data) list. */
       selected: {
-        type: String
-      },
-      /** The available color swatches the user can choose from. Array structure: contains Objects with `id`, `title`, `hex`. */
-      swatches: {
-        type: Array,
-        required: true
+        type: String,
+        validator: v => ['#F9DF00', '#F3A100', '#B7EA80', '#48E4C2', '#489DFF', '#B877F0', '#FD78FD', '#858E9F', '#227FD3', '#C59465', '#5DAF00', '#A4927A', '#95989C', '#D78B21', '#EE5452', 'null', null].includes(v)
       }
     },
 
     data () {
       return {
+        swatches: [
+          { title: 'Yellow',    color: '#F9DF00' },
+          { title: 'Orange',    color: '#F3A100' },
+          { title: 'Lime',      color: '#B7EA80' },
+          { title: 'Cyan',      color: '#48E4C2' },
+          { title: 'Sky Blue',  color: '#489DFF' },
+          { title: 'Indigo',    color: '#B877F0' },
+          { title: 'Pink',      color: '#FD78FD' },
+          { title: 'Brown',     color: '#C59465' },
+          { title: 'Gray',      color: '#858E9F' },
+          { title: 'Red',       color: '#EE5452' },
+          { title: 'Dark Blue', color: '#227FD3' },
+          { title: 'Green',     color: '#5DAF00' },
+          { title: 'Brass',     color: '#A4927A' },
+          { title: 'Silver',    color: '#95989C' },
+          { title: 'Gold',      color: '#D78B21' }
+        ],
         selectedColor: this.selected,
         selectedTitle: ''
       }
@@ -49,14 +62,19 @@
 
     methods: {
       emitSelected(){
-        /** Returns the selected color value as HEX. */
+        /** Returns the selected color value and title as Object.
+        this.$emit('input', {
+          color: this.selectedColor,
+          title: this.selectedTitle
+        })
+        */
         this.$emit('input', this.selectedColor)
       }
     },
 
     watch: {
       selectedColor(){
-        this.selectedTitle = this.swatches[this.swatches.findIndex(x => x.hex === this.selectedColor)].title
+        this.selectedTitle = this.swatches[this.swatches.findIndex(x => x.color === this.selectedColor)].title
         this.emitSelected()
       }
     }

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,
@@ -71,8 +85,6 @@
     },
 
     mounted () {
-      console.log('switch disabled', this.disabled)
-      console.log('switch checked', !!this.value, this.checked, this.value)
       this.id = this._uid
     },
 
@@ -83,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
       },
 
@@ -145,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;
 
@@ -160,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;
     }
   }
 
@@ -180,6 +207,13 @@
         width: 10px;
         height: 10px;
       }
+
+      .indeterminate{
+        width: 4px;
+        height: 2px;
+        left: 3px;
+        margin-top: -1px;
+      }
     }
 
     input:checked + .ecs-slide-switch::after{
@@ -194,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{
@@ -210,6 +253,11 @@
         width: 28px;
         height: 28px;
       }
+
+      .indeterminate{
+        width: 11px;
+        left: 6px;
+      }
     }
 
     input:checked + .ecs-slide-switch::after{
@@ -277,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,6 +6,23 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## 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="false" :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" />`,
 });