@everchron/ec-shards 2.1.7 → 2.1.9

package/package.json

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

package/src/components/checkbox/checkbox.vue

@@ -21,15 +21,17 @@
       :for="id || _uid">
 
       <slot />
+      <ecs-text v-if="$slots.default && help" type="form">{{ help }}</ecs-text>
     </label>
   </ecs-form-check>
 </template>
 
 <script>
   import EcsFormCheck from '../form-check/form-check'
+  import EcsText from '../text/text'
 
   export default {
-    components: { EcsFormCheck },
+    components: { EcsFormCheck, EcsText },
     props: {
       /** Name attribute of the input. */
       name: {
@@ -71,7 +73,11 @@
         default: false
       },
       /** Unique ID */
-      id: [String, Number]
+      id: [String, Number],
+      /** Help text that appears underneath (or next to, for inline checkboxes) the label. */
+      help: {
+        type: String
+      }
     },
 
     data() {
@@ -145,7 +151,8 @@
     width: 18px;
     height: 18px;
     left: 0;
-    top: 0;
+    top: 50%;
+    margin-top: -9px;
     background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><polyline fill="none" stroke="#{$color-blue-10}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" points="6 9.259 8.347 11.998 12 6"/></svg>');
   }
 
@@ -157,7 +164,8 @@
     height: 2px;
     border-radius: 1px;
     left: 5px;
-    top: 8px;
+    top: 50%;
+    margin-top: -1px;
   }
 
   &[type="checkbox"].indeterminate + label:before{
@@ -165,4 +173,13 @@
     border-color: rgba($color-blue-10, .3);
   }
 }
+
+.ecs-text{
+  min-width: 100%;
+}
+
+.ecs-form-check-inline .ecs-text{
+  min-width: auto;
+  margin-left: $spacing-10;
+}
 </style>

package/src/components/data-list-item/data-list-item.vue

@@ -4,10 +4,12 @@
         :class="[
                   small ? 'ecs-data-list-item-sml' : '',
                   full ? 'ecs-data-list-item-full' : '',
-                  plain ? '' : 'indent'
+                  plain ? 'plain' : 'filled',
+                  indent ? 'indent' : '',
+                  plain && bordered ? 'bordered' : ''
                 ]">
-      <div class="ecs-data-list-identifier">
-        {{identifier}}
+      <div v-if="hasIdentifier" class="ecs-data-list-identifier">
+        {{ identifier }}
         <ecs-button-more type="ellipsis"
           v-if="$slots.collapse"
           class="ecs-data-list-expand-button"
@@ -43,8 +45,7 @@
     props: {
       /** The label that shows up to the left of the list item. Usually describes the content to the left, e.g.: "Type", "Profiles", etc. */
       identifier: {
-        type: String,
-        required: true
+        type: String
       },
       /** Renders the list item in a smaller variant. */
       small: {
@@ -90,6 +91,16 @@
       plain: {
         type: Boolean,
         default: false
+      },
+      /** Adds a border bottom to each item (except the last in the list). **Important** the border is only applied when used in combination with the `plain` prop. */
+      bordered: {
+        type: Boolean,
+        default: false
+      },
+      /** Determines if there should be a left/right padding in the content areas. */
+      indent: {
+        type: Boolean,
+        default: true
       }
     },
 
@@ -104,7 +115,12 @@
         if (this.type && this.type !== '')
           return `data-list-data-${this.type}`
         return this.type
-      }
+      },
+
+      hasIdentifier() {
+        if ((this.identifier && this.identifier !== '') || this.$slots.collapse)
+          return true
+      },
     },
 
     methods : {
@@ -195,10 +211,15 @@
       }
     }
 
-    &.indent{
+    &.filled{
       .ecs-data-list-identifier{
         background: rgba($color-gray-6, .1);
         color: $color-gray-10;
+      }
+    }
+
+    &.indent{
+      .ecs-data-list-identifier{
         padding: 6px 8px;
       }
 
@@ -206,24 +227,37 @@
         padding: 6px 0 6px 8px;
       }
     }
+
+    &.bordered{
+      border-bottom: 1px solid $color-gray-3;
+      margin-bottom: 0;
+    }
   }
 
   > div{
-    &:first-child > .ecs-data-list-item .ecs-data-list-identifier{
-      border-top-left-radius: $border-radius-small;
+    &:first-child{
+      > .ecs-data-list-item .ecs-data-list-identifier{
+          border-top-left-radius: $border-radius-small;
+        }
+      
+      > .ecs-data-list-item.ecs-data-list-item-full .ecs-data-list-identifier{
+        border-top-left-radius: $border-radius-small;
+        border-top-right-radius: $border-radius-small;
+      }
     }
 
-    &:last-child > .ecs-data-list-item .ecs-data-list-identifier{
-      border-bottom-left-radius: $border-radius-small;
-    }
+    &:last-child{
+      > .ecs-data-list-item .ecs-data-list-identifier{
+        border-bottom-left-radius: $border-radius-small;
+      }
 
-    &:first-child > .ecs-data-list-item.ecs-data-list-item-full .ecs-data-list-identifier{
-      border-top-left-radius: $border-radius-small;
-      border-top-right-radius: $border-radius-small;
-    }
+      > .ecs-data-list-item.ecs-data-list-item-full .ecs-data-list-identifier{
+        border-bottom-left-radius: 0;
+      }
 
-    &:last-child > .ecs-data-list-item.ecs-data-list-item-full .ecs-data-list-identifier{
-      border-bottom-left-radius: 0;
+      .ecs-data-list-item.bordered{
+        border-bottom: none;
+      }
     }
   }
 
@@ -250,7 +284,7 @@
   }
 
   &-data{
-    width: calc(100% - 145px);
+    flex: 1;
     padding: 6px 0;
     position: relative;
     z-index: 0;

package/src/components/form-check/form-check.vue

@@ -32,7 +32,7 @@
 .ecs-form-check {
   position: relative;
   display: block;
-  height: 18px;
+  min-height: 18px;
   margin-bottom: $spacing-25;
 
   &.stand-alone{
@@ -49,6 +49,10 @@
   &-inline{
     display: inline-block;
     margin-right: 30px;
+
+    .ecs-form-check-label{
+      display: inline-flex;
+    }
   }
 
   &.disabled {
@@ -72,10 +76,11 @@
 
 .ecs-form-check-label {
   min-width: 18px;
-  height: 18px;
+  min-height: 18px;
   margin-bottom: 0;
   padding-left: 30px;
-  display: inline-flex;
+  display: flex;
+  flex-wrap: wrap;
   align-items: center;
 }
 
@@ -95,7 +100,8 @@
     vertical-align: text-top;
     position: absolute;
     left: 0;
-    top: 0;
+    top: 50%;
+    margin-top: -9px;
     width: 18px;
     height: 18px;
     background: white;
@@ -126,7 +132,7 @@
 label{
   display: inline-block;
   font-size: $type-scale-3-font-size;
-  line-height: 18px;
+  line-height: $type-scale-3-line-height;
   margin-bottom: $spacing-10;
   -webkit-user-select: none;
   -moz-user-select: none;

package/src/components/quicklink/quicklink.vue

@@ -239,10 +239,5 @@
     align-items: center;
     width: 100%;
   }
-
-  .ecs-form-check-input + label:before,
-  .ecs-form-check-input + label:after{
-    top: auto !important;
-  }
 }
 </style>

package/src/components/radiobutton/radiobutton.vue

@@ -21,14 +21,17 @@
       :for="id">
 
       <slot />
+      <ecs-text v-if="$slots.default && help" type="form">{{ help }}</ecs-text>
     </label>
   </ecs-form-check>
 </template>
 
 <script>
   import EcsFormCheck from '../form-check/form-check'
+  import EcsText from '../text/text'
+
   export default {
-    components: { EcsFormCheck },
+    components: { EcsFormCheck, EcsText },
 
     model: {
       prop: 'checked',
@@ -62,6 +65,10 @@
       inline: {
         type: Boolean,
         default: false
+      },
+      /** Help text that appears underneath (or next to, for inline radiobuttons) the label. */
+      help: {
+        type: String
       }
     },
 
@@ -133,8 +140,18 @@
     background: $color-blue-10;
     width: 6px;
     height: 6px;
-    top: 6px;
+    top: 50%;
+    margin-top: -3px;
     left: 6px;
   }
 }
+
+.ecs-text{
+  min-width: 100%;
+}
+
+.ecs-form-check-inline .ecs-text{
+  min-width: auto;
+  margin-left: $spacing-10;
+}
 </style>

package/src/stories/Changelog.stories.mdx

@@ -6,6 +6,18 @@ import { Meta } from '@storybook/addon-docs/blocks';
   Changelog
 </h1>
 
+## Version 2.1.9 (1 November 2022)
+
+### Features
+
+- Added `indent` and `bordered` props to EcsDataListItem for more variants in possible style.
+
+## Version 2.1.8 (30 October 2022)
+
+### Features
+
+- Added `help` prop to EcsCheckbox and EcsRadiobutton to render a small helper text underneath the label.
+
 ## Version 2.1.6 (28 October 2022)
 
 ### Features
@@ -31,12 +43,6 @@ import { Meta } from '@storybook/addon-docs/blocks';
 - Refactor EcsFormGroup error text with EcsText component
 - Added some padding to EcsTreeListItem suffix
 
-## Version 2.1.1 (11 October 2022)
-
-### Features
-
-- Added `help` prop to EcsCheckbox and EcsRadiobutton to render a small helper text underneath the label.
-
 ## Version 2.1.0 (11 October 2022)
 
 ### Breaking Changes

package/src/stories/checkbox/checkbox.stories.js

@@ -47,3 +47,11 @@ export const checkboxIndeterminate = () => ({
               <ecs-checkbox indeterminate inline name="apple">Apples</ecs-checkbox>
             </div>`,
 });
+
+export const checkboxHelpText = () => ({
+  components: { EcsCheckbox },
+  template: `<div>
+              <ecs-checkbox help="Help Text Label" name="apple">Apple</ecs-checkbox>
+              <ecs-checkbox help="Help Text Label" inline name="apple">Apple</ecs-checkbox>
+            </div>`,
+});

package/src/stories/data-list/data-list-item.stories.js

@@ -11,7 +11,7 @@ export const dataListItem = () => ({
   components: { EcsDataList, EcsDataListItem, EcsButton },
   template: `<ecs-data-list>
                 <ecs-data-list-item identifier="Identifier">Data</ecs-data-list-item>
-                <ecs-data-list-item identifier="Identifier">Data</ecs-data-list-item>
+                <ecs-data-list-item escape identifier="Identifier">Data</ecs-data-list-item>
                 <ecs-data-list-item identifier="Identifier"><a href="https://google.com" target="_blank">Google</a></ecs-data-list-item>
               </ecs-data-list>`
 });
@@ -25,6 +25,24 @@ export const dataListItemFull = () => ({
               </ecs-data-list>`
 });
 
+export const dataListItemPlain = () => ({
+  components: { EcsDataList, EcsDataListItem, EcsButton },
+  template: `<ecs-data-list>
+                <ecs-data-list-item plain identifier="Identifier">Data</ecs-data-list-item>
+                <ecs-data-list-item plain full identifier="Identifier">Full Data</ecs-data-list-item>
+                <ecs-data-list-item plain identifier="Identifier"><a href="https://google.com" target="_blank">Google</a></ecs-data-list-item>
+              </ecs-data-list>`
+});
+
+export const dataListItemPlainBordered = () => ({
+  components: { EcsDataList, EcsDataListItem, EcsButton },
+  template: `<ecs-data-list>
+                <ecs-data-list-item plain bordered identifier="Identifier">Data</ecs-data-list-item>
+                <ecs-data-list-item plain bordered full identifier="Identifier">Full Data</ecs-data-list-item>
+                <ecs-data-list-item plain bordered identifier="Identifier"><a href="https://google.com" target="_blank">Google</a></ecs-data-list-item>
+              </ecs-data-list>`
+});
+
 export const dataListItemExpandable = () => ({
   components: { EcsDataList, EcsDataListItem },
   template: `<ecs-data-list>

package/src/stories/radiobutton/radiobutton.stories.js

@@ -37,3 +37,16 @@ export const radiobuttonInline = () => ({
               Selected: {{ selected }}
             </div>`,
 });
+
+export const radiobuttonHelpText = () => ({
+  components: { EcsRadiobutton },
+  data() {
+    return {
+      selected: 'apple'
+    }
+  },
+  template: `<div>
+              <ecs-radiobutton name="fruits" v-model="selected" value="orange" help="Help Text Label">Label</ecs-radiobutton>
+              <ecs-radiobutton name="fruits" v-model="selected" inline value="apple" help="Help Text Label">Label</ecs-radiobutton>
+            </div>`,
+});