@everchron/ec-shards 2.1.8 → 2.1.9

package/package.json

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

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/stories/Changelog.stories.mdx

@@ -6,6 +6,12 @@ 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

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>