@everchron/ec-shards 0.0.12

package/src/stories/data-card/data-card.stories.js

@@ -0,0 +1,179 @@
+import EcsDataCardList from '@components/data-card-list/data-card-list';
+import EcsDataCard from '@components/data-card/data-card';
+import EcsButtonMore from '@components/button-more/button-more';
+import EcsCheckbox from '@components/checkbox/checkbox';
+
+
+export default {
+  title: 'Data/Data Card',
+  component: EcsDataCard
+};
+
+export const states = () => ({
+  components: { EcsDataCardList, EcsDataCard, EcsButtonMore },
+  template: `<ecs-data-card-list>
+              <ecs-data-card hover>
+                <span>Added last 2 months</span>
+                <span class="subtle">4h ago</span>
+              </ecs-data-card>
+              <ecs-data-card hover active>
+                <span>Added last 2 months</span>
+                <span class="subtle">4h ago</span>
+              </ecs-data-card>
+              <ecs-data-card>
+                <span>Added last 2 months</span>
+                <span class="subtle">4h ago</span>
+              </ecs-data-card>
+              <ecs-data-card shadow>
+                <span>Added last 2 months</span>
+                <span class="subtle">4h ago</span>
+              </ecs-data-card>
+              <ecs-button-more type="expand">Show More</ecs-button-more>
+            </ecs-data-card-list>`
+});
+
+export const single = () => ({
+  components: { EcsDataCard, EcsButtonMore },
+  template: `<ecs-data-card hover>
+                <span>Added last 2 months</span>
+                <span class="subtle">4h ago</span>
+              </ecs-data-card>`
+});
+
+export const singleIcon = () => ({
+  components: { EcsDataCard, EcsButtonMore },
+  template: `<ecs-data-card hover icon="search" icon-color="#858E9E">
+                <span>Added last 2 months</span>
+                <span class="subtle">4h ago</span>
+              </ecs-data-card>`
+});
+
+export const singleActions = () => ({
+  components: { EcsDataCard, EcsButtonMore },
+  template: `<ecs-data-card hover>
+              <span>Added last 2 months</span>
+              <span class="subtle">4h ago</span>
+              <template slot="actions">
+                <ecs-button-more />
+              </template>
+            </ecs-data-card>`
+});
+
+export const double = () => ({
+  components: { EcsDataCard, EcsButtonMore },
+  data() {
+    return {
+      expand: false
+    }
+  },
+  template: `<ecs-data-card hover>
+                <span>Added last 2 months</span>
+                <span class="subtle">4h ago</span>
+                <template slot="meta">
+                  <span v-if="expand" class="subtle"><span class="color-venta-1">32 documents</span> added by Marie Walsh</span>
+                </template>
+              </ecs-data-card>`
+});
+
+export const doubleIcon = () => ({
+  components: { EcsDataCard, EcsButtonMore },
+  template: `<ecs-data-card hover icon="search" icon-color="#858E9E">
+                <span>Added last 2 months</span>
+                <span class="subtle">4h ago</span>
+                <template slot="meta">
+                  <span class="subtle chained"><span class="color-venta-1">CE999</span><span class="color-venta-1">EC00000</span></span>
+                </template>
+              </ecs-data-card>`
+});
+
+export const controls = () => ({
+  components: { EcsDataCard, EcsButtonMore, EcsDataCardList, EcsCheckbox },
+  data() {
+    return {
+      showControls: false
+    }
+  },
+  template: `<ecs-data-card-list>
+              <button @click="showControls = !showControls">Toggle Control</button>
+              <ecs-data-card :control="showControls" hover icon="search" icon-color="#858E9E">
+                <span>Added last 2 months</span>
+                <span class="subtle">4h ago</span>
+                <template slot="control">
+                  <ecs-checkbox name="name" />
+                </template>
+                <template slot="meta">
+                  <span class="subtle"><span class="color-venta-1">32 documents</span> added by Marie Walsh</span>
+                </template>
+              </ecs-data-card>
+              <ecs-data-card :control="showControls" hover>
+                <span>Added last 2 months</span>
+                <span class="subtle">4h ago</span>
+                <template slot="control">
+                  <ecs-checkbox name="name" />
+                </template>
+              </ecs-data-card>
+              <ecs-data-card :control="showControls" hover icon="search" icon-color="#858E9E">
+                <span>Added last 2 months</span>
+                <span class="subtle">4h ago</span>
+                <template slot="control">
+                  <ecs-checkbox name="name" />
+                </template>
+              </ecs-data-card>
+            </ecs-data-card-list>`
+});
+
+export const doubleAction = () => ({
+  components: { EcsDataCard, EcsButtonMore },
+  template: `<ecs-data-card hover>
+                <span>Added last 2 months</span>
+                <span class="subtle">4h ago</span>
+                <template slot="meta">
+                  <span class="subtle"><span class="color-venta-1">32 documents</span> added by Marie Walsh</span>
+                </template>
+                <template slot="actions">
+                  <ecs-button-more />
+                </template>
+              </ecs-data-card>`
+});
+
+export const expandable = () => ({
+  components: { EcsDataCard, EcsButtonMore },
+  template: `<ecs-data-card expandable expand-icon="link" expand-label="2">
+                <span>Added last 2 months</span>
+                <span class="subtle">4h ago</span>
+                <template slot="meta">
+                  <span class="subtle"><span class="color-venta-1">32 documents</span> added by Marie Walsh</span>
+                </template>
+                <template slot="expand">
+                  test
+                </template>
+              </ecs-data-card>`
+});
+
+export const loading = () => ({
+  components: { EcsDataCardList, EcsDataCard },
+  template: `<ecs-data-card-list>
+              <ecs-data-card loading>
+                <span>Added last 2 months</span>
+                <span class="subtle">4h ago</span>
+              </ecs-data-card>
+              <ecs-data-card loading icon="search" icon-color="#858E9E">
+                <span>Added last 2 months</span>
+                <span class="subtle">4h ago</span>
+              </ecs-data-card>
+              <ecs-data-card loading icon="search" icon-color="#858E9E">
+                <span>Added last 2 months</span>
+                <span class="subtle">4h ago</span>
+                <template slot="meta">
+                  <span class="subtle"><span class="color-venta-1">32 documents</span> added by Marie Walsh</span>
+                </template>
+              </ecs-data-card>
+              <ecs-data-card loading>
+                <span>Added last 2 months</span>
+                <span class="subtle">4h ago</span>
+                <template slot="meta">
+                  <span class="subtle"><span class="color-venta-1">32 documents</span> added by Marie Walsh</span>
+                </template>
+              </ecs-data-card>
+            </ecs-data-card-list>`
+});

package/src/stories/data-grid/data-grid-cell.stories.js

@@ -0,0 +1,28 @@
+import EcsDataGrid from '@components/data-grid/data-grid';
+import EcsDataGridGroup from '@components/data-grid/data-grid-group';
+import EcsDataGridRow from '@components/data-grid/data-grid-row';
+import EcsDataGridHeadCell from '@components/data-grid/data-grid-head-cell';
+import EcsDataGridCell from '@components/data-grid/data-grid-cell';
+
+export default {
+  title: 'Data/Data Grid/Cell',
+  component: EcsDataGridCell
+};
+
+export const cell = () => ({
+  components: { EcsDataGrid, EcsDataGridGroup, EcsDataGridRow, EcsDataGridHeadCell, EcsDataGridCell },
+  template: `<ecs-data-grid>
+                <ecs-data-grid-row>
+                  <ecs-data-grid-cell column="first" :width="200">Cell</ecs-data-grid-cell>
+                </ecs-data-grid-row>
+              </ecs-data-grid>`,
+});
+
+export const cellCustomPadding = () => ({
+  components: { EcsDataGrid, EcsDataGridGroup, EcsDataGridRow, EcsDataGridHeadCell, EcsDataGridCell },
+  template: `<ecs-data-grid>
+                <ecs-data-grid-row>
+                  <ecs-data-grid-cell column="first" :width="200" padding="20px 0 16px 8px">Cell</ecs-data-grid-cell>
+                </ecs-data-grid-row>
+              </ecs-data-grid>`,
+});

package/src/stories/data-grid/data-grid-group.stories.js

@@ -0,0 +1,60 @@
+import EcsDataGrid from '@components/data-grid/data-grid';
+import EcsDataGridGroup from '@components/data-grid/data-grid-group';
+import EcsDataGridRow from '@components/data-grid/data-grid-row';
+import EcsDataGridHeadCell from '@components/data-grid/data-grid-head-cell';
+import EcsDataGridCell from '@components/data-grid/data-grid-cell';
+import EcsButton from '@components/button/button';
+import EcsFlexRow from '@components/flex/flex-row';
+
+export default {
+  title: 'Data/Data Grid/Group',
+  component: EcsDataGridGroup,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Groups are used to to conditionally show and hide columns in a data grid. They are the equivalent of tabs inside tables.',
+      },
+    }
+  }
+};
+
+export const groupedColumns = () => ({
+  components: { EcsDataGrid, EcsDataGridGroup, EcsDataGridRow, EcsDataGridHeadCell, EcsDataGridCell, EcsButton, EcsFlexRow },
+  data() {
+    return {
+      activeGroup: 1
+    }
+  },
+  template: `<div style="width: 100%; height: 400px">
+              <ecs-flex-row :gap="8" style="position:absolute; bottom: 16px; left: 16px;">
+                <ecs-button @click="activeGroup = 1">Group 1</ecs-button>
+                <ecs-button @click="activeGroup = 2">Group 2</ecs-button>
+              </ecs-flex-row>
+
+              <ecs-data-grid>
+                <template slot="head">
+                  <ecs-data-grid-head-cell name="First Column" :min-width="200" :width="400" fixed-left fixed-left-last />
+                  <ecs-data-grid-group :show="activeGroup == 1">
+                    <ecs-data-grid-head-cell name="Group 1 First Column" :min-width="300" :width="500" />
+                    <ecs-data-grid-head-cell name="Group 1 Second Column" :min-width="140" :width="200" />
+                  </ecs-data-grid-group>
+                  <ecs-data-grid-group :show="activeGroup == 2">
+                    <ecs-data-grid-head-cell name="Group 2 First Column" :min-width="300" :width="500" />
+                    <ecs-data-grid-head-cell name="Group 2 Seconds Column" :min-width="140" :width="200" />
+                  </ecs-data-grid-group>
+                </template>
+
+                <ecs-data-grid-row v-for="index in 100" :key="index">
+                  <ecs-data-grid-cell column="first" :min-width="200" :width="400" fixed-left fixed-left-last>First Column</ecs-data-grid-cell>
+                  <ecs-data-grid-group :show="activeGroup == 1">
+                    <ecs-data-grid-cell column="group-1-first" :min-width="300" :width="500">Group 1 First Column</ecs-data-grid-cell>
+                    <ecs-data-grid-cell column="group-1-second" :min-width="140" :width="200">Group 1 Second Column</ecs-data-grid-cell>
+                  </ecs-data-grid-group>
+                  <ecs-data-grid-group :show="activeGroup == 2">
+                    <ecs-data-grid-cell column="group-2-first" :min-width="300" :width="500">Group 2 First Column</ecs-data-grid-cell>
+                    <ecs-data-grid-cell column="group-2-second" :min-width="140" :width="200">Group 2 Second Column</ecs-data-grid-cell>
+                  </ecs-data-grid-group>
+                </ecs-data-grid-row>
+              </ecs-data-grid>
+            </div>`,
+});

package/src/stories/data-grid/data-grid-head-cell.stories.js

@@ -0,0 +1,77 @@
+import EcsDataGrid from '@components/data-grid/data-grid';
+import EcsDataGridGroup from '@components/data-grid/data-grid-group';
+import EcsDataGridRow from '@components/data-grid/data-grid-row';
+import EcsDataGridHeadCell from '@components/data-grid/data-grid-head-cell';
+import EcsDataGridCell from '@components/data-grid/data-grid-cell';
+
+export default {
+  title: 'Data/Data Grid/Head Cell',
+  component: EcsDataGridHeadCell
+};
+
+export const headCell = () => ({
+  components: { EcsDataGridHeadCell },
+  template: `<ecs-data-grid-head-cell name="Column" :min-width="200" :width="300" />`,
+});
+
+export const headCellIcon = () => ({
+  components: { EcsDataGridHeadCell, EcsDataGrid },
+  template: `<ecs-data-grid striped>
+                <template slot="head">
+                  <ecs-data-grid-head-cell name="Comments" :width="80" icon="comment" />
+                </template>
+              </ecs-data-grid>`,
+});
+
+export const headCellSelect = () => ({
+  components: { EcsDataGridHeadCell, EcsDataGrid },
+  data() {
+    return {
+      selectOptions: [
+        { value: 'ecid', name: 'ECID' },
+        { value: 'bates', name: 'Bates Range', selected: true },
+        { value: 'trialex', name: 'Trial Exhibit'}
+      ]
+    }
+  },
+  template: `<ecs-data-grid striped>
+                <template slot="head">
+                  <ecs-data-grid-head-cell name="Identifiers" :width="200" :select="selectOptions" />
+                </template>
+              </ecs-data-grid>`,
+});
+
+export const headCellSorting = () => ({
+  components: { EcsDataGridHeadCell, EcsDataGrid },
+  data() {
+    return {
+      columns: [
+        { id: 'col-1', name: 'Column 1', width: 200, sortable: true, sorting: 'desc' },
+        { id: 'col-2', name: 'Column 2', width: 200, sortable: true, sorting: 'none' },
+        { id: 'col-3', name: 'Column 3', width: 200, sortable: true, sorting: 'none' },
+      ]
+    }
+  },
+  methods: {
+    sortColumn(id, order){
+      this.columns.forEach(function (column, index) {
+        column.sorting = 'none'
+        if(column.id == id)
+          column.sorting = order
+      })
+    }
+  },
+  template: `<ecs-data-grid striped>
+                <template slot="head">
+                  <ecs-data-grid-head-cell
+                    v-for="(column, index) in columns"
+                    :key="index"
+                    @sortby="sortColumn(column.id, $event)"
+                    :width="column.width"
+                    :sortable="column.sortable"
+                    :sorting="column.sorting"
+                    :name="column.name"
+                    :id="column.id" />
+                </template>
+              </ecs-data-grid>`,
+});

package/src/stories/data-grid/data-grid-row.stories.js

@@ -0,0 +1,91 @@
+import EcsDataGrid from '@components/data-grid/data-grid';
+import EcsDataGridGroup from '@components/data-grid/data-grid-group';
+import EcsDataGridRow from '@components/data-grid/data-grid-row';
+import EcsDataGridHeadCell from '@components/data-grid/data-grid-head-cell';
+import EcsDataGridCell from '@components/data-grid/data-grid-cell';
+import EcsButton from '@components/button/button';
+
+export default {
+  title: 'Data/Data Grid/Row',
+  component: EcsDataGridRow
+};
+
+export const states = () => ({
+  components: { EcsDataGrid, EcsDataGridGroup, EcsDataGridRow, EcsDataGridHeadCell, EcsDataGridCell },
+  template: `<div style="width: 100%; height: 500px">
+              <ecs-data-grid striped sidebar-overlay>
+                <template slot="head">
+                  <ecs-data-grid-head-cell name="First Column" :width="400" fixed-left fixed-left-last />
+                  <ecs-data-grid-head-cell name="Second Column" :width="500" />
+                  <ecs-data-grid-head-cell name="Third Column" :width="200" />
+                </template>
+
+                <ecs-data-grid-row state="selected" v-for="index in 2">
+                  <ecs-data-grid-cell column="first" :min-width="200" :width="400" fixed-left fixed-left-last>Selected State</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="second" :min-width="300" :width="500">Second Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="third" :min-width="140" :width="200">Third Column</ecs-data-grid-cell>
+                </ecs-data-grid-row>
+
+                <ecs-data-grid-row v-for="index in 3">
+                  <ecs-data-grid-cell column="first" :min-width="200" :width="400" fixed-left fixed-left-last>First Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="second" :min-width="300" :width="500">Second Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="third" :min-width="140" :width="200">Third Column</ecs-data-grid-cell>
+                </ecs-data-grid-row>
+
+                <ecs-data-grid-row state="opened">
+                  <ecs-data-grid-cell column="first" :min-width="200" :width="400" fixed-left fixed-left-last>Opened in Viewer State</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="second" :min-width="300" :width="500">Second Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="third" :min-width="140" :width="200">Third Column</ecs-data-grid-cell>
+                </ecs-data-grid-row>
+
+                <ecs-data-grid-row v-for="index in 3">
+                  <ecs-data-grid-cell column="first" :min-width="200" :width="400" fixed-left fixed-left-last>First Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="second" :min-width="300" :width="500">Second Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="third" :min-width="140" :width="200">Third Column</ecs-data-grid-cell>
+                </ecs-data-grid-row>
+
+                <ecs-data-grid-row state="droppable" v-for="index in 2">
+                  <ecs-data-grid-cell column="first" :min-width="200" :width="400" fixed-left fixed-left-last>Drag Target State</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="second" :min-width="300" :width="500">Second Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="third" :min-width="140" :width="200">Third Column</ecs-data-grid-cell>
+                </ecs-data-grid-row>
+              </ecs-data-grid>
+            </div>`,
+});
+
+export const newRowStates = () => ({
+  components: { EcsDataGrid, EcsDataGridGroup, EcsDataGridRow, EcsDataGridHeadCell, EcsDataGridCell, EcsButton },
+  data() {
+    return {
+      addedRows: 1
+    }
+  },
+  methods: {
+    addRows() {
+      this.addedRows = this.addedRows + 2
+    }
+  },
+  template: `<div style="width: 100%; height: 400px">
+              <ecs-button @click="addRows" style="position:absolute; bottom: 16px; left: 16px;">Add Rows</ecs-button>
+
+              <ecs-data-grid sidebar-overlay>
+                <template slot="head">
+                  <ecs-data-grid-head-cell name="First Column" :width="400" fixed-left fixed-left-last />
+                  <ecs-data-grid-head-cell name="Second Column" :width="500" />
+                  <ecs-data-grid-head-cell name="Third Column" :width="200" />
+                </template>
+
+                <ecs-data-grid-row v-for="index in 3">
+                  <ecs-data-grid-cell column="first" :min-width="200" :width="400" fixed-left fixed-left-last>First Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="second" :min-width="300" :width="500">Second Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="third" :min-width="140" :width="200">Third Column</ecs-data-grid-cell>
+                </ecs-data-grid-row>
+
+                <ecs-data-grid-row state="added" v-for="index in addedRows">
+                  <ecs-data-grid-cell column="first" :min-width="200" :width="400" fixed-left fixed-left-last>First Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="second" :min-width="300" :width="500">Second Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="third" :min-width="140" :width="200">Third Column</ecs-data-grid-cell>
+                </ecs-data-grid-row>
+              </ecs-data-grid>
+            </div>`,
+});

package/src/stories/data-grid/data-grid.stories.js

@@ -0,0 +1,73 @@
+import EcsDataGrid from '@components/data-grid/data-grid';
+import EcsDataGridGroup from '@components/data-grid/data-grid-group';
+import EcsDataGridRow from '@components/data-grid/data-grid-row';
+import EcsDataGridHeadCell from '@components/data-grid/data-grid-head-cell';
+import EcsDataGridCell from '@components/data-grid/data-grid-cell';
+
+export default {
+  title: 'Data/Data Grid/Grid',
+  component: EcsDataGrid
+};
+
+export const grid = () => ({
+  components: { EcsDataGrid, EcsDataGridGroup, EcsDataGridRow, EcsDataGridHeadCell, EcsDataGridCell },
+  template: `<div style="width: 100%; height: 500px">
+              <ecs-data-grid :striped="false">
+                <template slot="head">
+                  <ecs-data-grid-head-cell name="First-Column" :min-width="140" :width="200" fixed-left resizable/>
+                  <ecs-data-grid-head-cell name="Second-Column" :min-width="140" :width="200" :fixed-left-offset="200" fixed-left/>
+                  <ecs-data-grid-head-cell name="Third-Column" :min-width="140" :width="200" :fixed-left-offset="400" fixed-left resizable/>
+                  <ecs-data-grid-head-cell name="Fourth-Column" :min-width="200" :width="200" :fixed-left-offset="600" fixed-left fixed-left-last />
+                  <ecs-data-grid-head-cell name="Fifth-Column" :min-width="200" :width="300" resizable />
+                  <ecs-data-grid-head-cell name="Sixth-Column" :min-width="140" :width="200" />
+                </template>
+
+                <ecs-data-grid-row v-for="index in 100" :key="index">
+                  <ecs-data-grid-cell column="first-column" :min-width="140" :width="200" fixed-left>First Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="second-column" :min-width="140" :width="200" :fixed-left-offset="200" fixed-left>Second Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="third-column" :min-width="140" :width="200" :fixed-left-offset="400" fixed-left>Third Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="fourth-column" :min-width="200" :width="200" :fixed-left-offset="600" fixed-left fixed-left-last>Fourth Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="fifth-column" :min-width="200" :width="300">Fifth Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="sixth-column" :min-width="140" :width="200">Sixth Column</ecs-data-grid-cell>
+                </ecs-data-grid-row>
+              </ecs-data-grid>
+            </div>`,
+});
+
+export const gridStriped = () => ({
+  components: { EcsDataGrid, EcsDataGridGroup, EcsDataGridRow, EcsDataGridHeadCell, EcsDataGridCell },
+  template: `<div style="width: 100%; height: 500px">
+              <ecs-data-grid striped>
+                <template slot="head">
+                  <ecs-data-grid-head-cell name="First Column" :min-width="200" :width="400" fixed-left fixed-left-last />
+                  <ecs-data-grid-head-cell name="Second Column" :min-width="300" :width="500" />
+                  <ecs-data-grid-head-cell name="Third Column" :min-width="140" :width="200" />
+                </template>
+
+                <ecs-data-grid-row v-for="index in 100" :key="index">
+                  <ecs-data-grid-cell column="first" :min-width="200" :width="400" fixed-left fixed-left-last>First Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="second" :min-width="300" :width="500">Second Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="third" :min-width="140" :width="200">Third Column</ecs-data-grid-cell>
+                </ecs-data-grid-row>
+              </ecs-data-grid>
+            </div>`,
+});
+
+export const gridSidebarPadding = () => ({
+  components: { EcsDataGrid, EcsDataGridGroup, EcsDataGridRow, EcsDataGridHeadCell, EcsDataGridCell },
+  template: `<div style="width: 100%; height: 500px">
+              <ecs-data-grid striped sidebar-overlay>
+                <template slot="head">
+                  <ecs-data-grid-head-cell name="First Column" :min-width="200" :width="400" fixed-left fixed-left-last />
+                  <ecs-data-grid-head-cell name="Second Column" :min-width="300" :width="500" />
+                  <ecs-data-grid-head-cell name="Third Column" :min-width="140" :width="200" />
+                </template>
+
+                <ecs-data-grid-row v-for="index in 100" :key="index">
+                  <ecs-data-grid-cell column="first" :min-width="200" :width="400" fixed-left fixed-left-last>First Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="second" :min-width="300" :width="500">Second Column</ecs-data-grid-cell>
+                  <ecs-data-grid-cell column="third" :min-width="140" :width="200">Third Column</ecs-data-grid-cell>
+                </ecs-data-grid-row>
+              </ecs-data-grid>
+            </div>`,
+});

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

@@ -0,0 +1,84 @@
+import EcsDataList from '@components/data-list/data-list';
+import EcsDataListItem from '@components/data-list-item/data-list-item';
+import EcsButton from '@components/button/button';
+
+export default {
+  title: 'Data/Data List/Item',
+  component: EcsDataListItem
+};
+
+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 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>`
+});
+
+export const dataListItemFull = () => ({
+  components: { EcsDataList, EcsDataListItem },
+  template: `<ecs-data-list>
+                <ecs-data-list-item full identifier="Identifier">Data</ecs-data-list-item>
+                <ecs-data-list-item full identifier="Identifier">Data</ecs-data-list-item>
+                <ecs-data-list-item full identifier="Identifier">Data</ecs-data-list-item>
+              </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 dataListItemWithoutIdentifier = () => ({
+  components: { EcsDataList, EcsDataListItem, EcsButton },
+  template: `<ecs-data-list>
+                <ecs-data-list-item>Data</ecs-data-list-item>
+                <ecs-data-list-item :indent="false"><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>
+                <ecs-data-list-item identifier="Identifier">
+                  Data
+                  <template slot="collapse">
+                    <ecs-data-list-item identifier="Identifier" small>Data</ecs-data-list-item>
+                    <ecs-data-list-item identifier="Identifier" small>Data</ecs-data-list-item>
+                    <ecs-data-list-item identifier="Identifier" small>Data</ecs-data-list-item>
+                  </template>
+                </ecs-data-list-item>
+              </ecs-data-list>`
+});
+
+export const dataListItemProgress = () => ({
+  components: { EcsDataList, EcsDataListItem },
+  template: `<ecs-data-list>
+                <ecs-data-list-item identifier="Identifier" :progress="65">Data</ecs-data-list-item>
+                <ecs-data-list-item identifier="Identifier">Data</ecs-data-list-item>
+                <ecs-data-list-item identifier="Identifier" :progress="25" error>Error State</ecs-data-list-item>
+              </ecs-data-list>`
+});
+
+export const dataListItemLoading = () => ({
+  components: { EcsDataList, EcsDataListItem },
+  template: `<ecs-data-list>
+                <ecs-data-list-item identifier="Identifier" loading>Data</ecs-data-list-item>
+                <ecs-data-list-item identifier="Identifier" loading>Data</ecs-data-list-item>
+                <ecs-data-list-item identifier="Identifier" loading>Data</ecs-data-list-item>
+              </ecs-data-list>`
+});

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

@@ -0,0 +1,17 @@
+import EcsDataList from '@components/data-list/data-list';
+import EcsDataListItem from '@components/data-list-item/data-list-item';
+import EcsButton from '@components/button/button';
+
+export default {
+  title: 'Data/Data List/List',
+  component: EcsDataList
+};
+
+export const dataList = () => ({
+  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 identifier="Identifier">Data</ecs-data-list-item>
+              </ecs-data-list>`
+});