@ukic/canary-web-components 2.0.0-canary.9 → 3.0.0-canary.1

package/dist/collection/components/ic-data-table/story-data.js

@@ -1,4 +1,9 @@
 /* eslint-disable */
+const name1 = "John Smith";
+const name2 = "Sally Jones";
+const name3 = "Luke Fisher";
+const name4 = "Jane Lock";
+const name5 = "Margaret Hale";
 const ROW_HEADER_TITLES = [
     "Employee",
     "Employee",
@@ -6,6 +11,9 @@ const ROW_HEADER_TITLES = [
     "Employee",
     "Apprentice",
 ];
+const imageIconSVG = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm56-97h489L578-473 446-302l-93-127-117 152Zm-56 97v-600 600Z"/></svg>';
+const userIconSVG = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-481q-66 0-108-42t-42-108q0-66 42-108t108-42q66 0 108 42t42 108q0 66-42 108t-108 42ZM160-160v-94q0-38 19-65t49-41q67-30 128.5-45T480-420q62 0 123 15.5t127.921 44.694q31.301 14.126 50.19 40.966Q800-292 800-254v94H160Zm60-60h520v-34q0-16-9.5-30.5T707-306q-64-31-117-42.5T480-360q-57 0-111 11.5T252-306q-14 7-23 21.5t-9 30.5v34Zm260-321q39 0 64.5-25.5T570-631q0-39-25.5-64.5T480-721q-39 0-64.5 25.5T390-631q0 39 25.5 64.5T480-541Zm0-90Zm0 411Z"/></svg>';
+// TODO: Add columnOptions
 export const COLS = [
     {
         key: "firstName",
@@ -33,6 +41,84 @@ export const COLS = [
         dataType: "address",
     },
 ];
+export const COLS_WIDTH = [
+    {
+        key: "firstName",
+        title: "First name",
+        dataType: "string",
+        columnWidth: "15%",
+    },
+    {
+        key: "lastName",
+        title: "Last name",
+        dataType: "string",
+        columnWidth: "300px",
+    },
+    {
+        key: "age",
+        title: "Age",
+        dataType: "number",
+        columnWidth: {
+            maxWidth: "100px",
+        },
+    },
+    {
+        key: "jobTitle",
+        title: "Job title",
+        dataType: "string",
+    },
+    {
+        key: "address",
+        title: "Address",
+        dataType: "address",
+    },
+];
+export const VERY_LONG_DATA = (rows = 100) => {
+    const nextData = [];
+    for (let i = 0; i < rows; i++) {
+        const obj = {
+            firstName: `firstName-${i}`,
+            lastName: `lastName-${i}`,
+            age: i,
+            jobTitle: `jobTitle-${i}`,
+            address: `${i} Main Street, Town, County, Postcode AA${i}${i} BB${i}${i}`,
+            rowOptions: {
+                textWrap: i % 2 === 0,
+            },
+        };
+        nextData.push(obj);
+    }
+    return nextData;
+};
+export const textWrapColumns = () => {
+    return COLUMNS_NO_TEXT_WRAP.map((col) => {
+        if (col.key === "jobTitle") {
+            return Object.assign(Object.assign({}, col), { textWrap: true });
+        }
+        return col;
+    });
+};
+export const textWrapRow = () => {
+    return LONG_DATA_VALUES.map((data) => {
+        if (data.name === "Luke Fisher" || data.name === "John Smith") {
+            return Object.assign(Object.assign({}, data), { rowOptions: {
+                    textWrap: true,
+                } });
+        }
+        return data;
+    });
+};
+export const textWrapCell = () => {
+    return LONG_DATA_VALUES.map((data) => {
+        if (data.jobTitle === "Senior Financial Operations and Reporting Analyst") {
+            return Object.assign(Object.assign({}, data), { jobTitle: {
+                    data: data.jobTitle,
+                    textWrap: true,
+                } });
+        }
+        return data;
+    });
+};
 export const COLS_ALIGNMENT = [
     {
         key: "firstName",
@@ -64,7 +150,7 @@ export const COLS_ALIGNMENT = [
 export const DATA = [
     {
         firstName: "Joe",
-        lastName: "Bloggs",
+        lastName: "Bartholomew Christoper Augustine Zacchaeus Ashford",
         age: 30,
         jobTitle: "Developer",
         address: "1 Main Street, Town, County, Postcode",
@@ -73,7 +159,7 @@ export const DATA = [
         firstName: "Sarah",
         lastName: "Smith",
         age: 28,
-        jobTitle: "Analyst",
+        jobTitle: "Senior Software Developer, Site Reliability Engineering",
         address: "2 Main Street, Town, Country, Postcode",
     },
     {
@@ -87,7 +173,7 @@ export const DATA = [
         firstName: "Naomi",
         lastName: "Thomas",
         age: 32,
-        jobTitle: "Developer",
+        jobTitle: "Analyst",
         address: "8 Side Street, Town, Country, Postcode",
     },
     {
@@ -98,6 +184,165 @@ export const DATA = [
         address: "5 New Street, Town, Country, Postcode",
     },
 ];
+export const LONG_TEXT = [
+    {
+        firstName: "Joehasaverylongnamewhichneedstruncating",
+        lastName: "BartholomewChristoperAugustineZacchaeus Ashford",
+        age: 30,
+        jobTitle: "Developer",
+        address: "1 Main Street, Town, County, Postcode",
+    },
+    {
+        firstName: "Sarahalsohasaverylongname",
+        lastName: "Smithisnotaverylongname",
+        age: 28,
+        jobTitle: "Senior Software Developer, Site Reliability Engineering",
+        address: "2 Main Street, Town, Country, Postcode",
+    },
+];
+export const TEXT_WRAP_LONG_DATA = [
+    {
+        name: name1,
+        age: 36,
+        department: "Accounts & Finance",
+        employeeNumber: 1,
+        jobTitle: {
+            data: "Senior Financial Operations and Reporting Analyst",
+            textWrap: true,
+        },
+    },
+    {
+        name: name2,
+        age: 32,
+        department: "Engineering",
+        employeeNumber: 2,
+        jobTitle: "Senior Software Engineer, Site Reliability Engineering (Microsoft Azure)",
+    },
+    {
+        name: "Tim Rayes",
+        age: 41,
+        department: "Sales and Marketing",
+        employeeNumber: 3,
+        jobTitle: "Regional Sales and Marketing Strategy Director (Europe, the Middle East, and Africa)",
+        rowOptions: {
+            textWrap: true,
+        },
+    },
+    {
+        name: name3,
+        age: "23",
+        department: "Engineering (Mobile App Development)",
+        employeeNumber: 4,
+        jobTitle: "Junior Tester",
+    },
+    {
+        name: name4,
+        age: 34,
+        department: "Engineering",
+        employeeNumber: 5,
+        jobTitle: "Junior Product Manager",
+    },
+    {
+        name: name5,
+        age: 45,
+        department: "HR",
+        employeeNumber: 6,
+        jobTitle: "Junior Human Resource Information Specialist",
+    },
+];
+export const COLUMNS_NO_TEXT_WRAP = [
+    { key: "name", title: "Name", dataType: "string" },
+    { key: "age", title: "Age", dataType: "number" },
+    { key: "department", title: "Department", dataType: "string" },
+    { key: "employeeNumber", title: "Employee Number", dataType: "number" },
+    { key: "jobTitle", title: "Job Title", dataType: "string" },
+];
+export const COLUMNS_TEXT_WRAP = [
+    { key: "name", title: "Name", dataType: "string" },
+    { key: "age", title: "Age", dataType: "number" },
+    {
+        key: "department",
+        title: "Department",
+        dataType: "string",
+        textWrap: true,
+    },
+    { key: "employeeNumber", title: "Employee Number", dataType: "number" },
+    { key: "jobTitle", title: "Job Title", dataType: "string" },
+];
+export const LONG_DATA_VALUES = [
+    {
+        name: name1,
+        age: 36,
+        department: "Accounts & Finance",
+        employeeNumber: 1,
+        jobTitle: "Senior Financial Operations and Reporting Analyst",
+    },
+    {
+        name: name2,
+        age: 32,
+        department: "Engineering",
+        employeeNumber: 2,
+        jobTitle: "Senior Software Engineer, Site Reliability Engineering (Microsoft Azure)",
+    },
+    {
+        name: "Tim Rayes",
+        age: 41,
+        department: "Sales and Marketing",
+        employeeNumber: 3,
+        jobTitle: "Regional Sales and Marketing Strategy Director (Europe, the Middle East, and Africa)",
+    },
+    {
+        name: name3,
+        age: "23",
+        department: "Engineering (Mobile App Development)",
+        employeeNumber: 4,
+        jobTitle: "Junior Tester",
+    },
+    {
+        name: name4,
+        age: 34,
+        department: "Engineering",
+        employeeNumber: 5,
+        jobTitle: "Junior Product Manager",
+    },
+    {
+        name: name5,
+        age: 45,
+        department: "HR",
+        employeeNumber: 6,
+        jobTitle: "Junior Human Resource Information Specialist",
+    },
+];
+export const LONG_DATA_VALUES_UPDATE = [
+    {
+        name: "Michael Phelps",
+        age: 23,
+        department: "United States",
+        employeeNumber: 1,
+        jobTitle: "Swimmer",
+    },
+    {
+        name: "Natalie Coughlin",
+        age: 25,
+        department: "United States",
+        employeeNumber: 2,
+        jobTitle: "Swimmer",
+    },
+    {
+        name: "Debbie Flood",
+        age: 28,
+        department: "Great Britain",
+        employeeNumber: 3,
+        jobTitle: "7 time Olympic and Commonwealth Champion for Rowing",
+    },
+    {
+        name: "Gillian Charleton",
+        age: "22",
+        department: "Canada",
+        employeeNumber: 4,
+        jobTitle: "Cycling",
+    },
+];
 export const DATA_CELL_ALIGNMENT = [
     {
         firstName: {
@@ -114,7 +359,7 @@ export const DATA_CELL_ALIGNMENT = [
         firstName: "Sarah",
         lastName: "Smith",
         age: 28,
-        jobTitle: "Analyst",
+        jobTitle: "Senior Software Developer, Site Reliability Engineering",
         address: "2 Main Street, Town, Country, Postcode",
     },
     {
@@ -128,7 +373,7 @@ export const DATA_CELL_ALIGNMENT = [
         firstName: "Naomi",
         lastName: "Thomas",
         age: 32,
-        jobTitle: "Developer",
+        jobTitle: "Analyst",
         address: "8 Side Street, Town, Country, Postcode",
     },
     {
@@ -159,7 +404,7 @@ export const ROW_ALIGNMENT = [
         firstName: "Sarah",
         lastName: "Smith",
         age: 28,
-        jobTitle: "Analyst",
+        jobTitle: "Senior Software Developer, Site Reliability Engineering",
         address: "2 Main Street, Town, Country, Postcode",
     },
     {
@@ -179,7 +424,7 @@ export const ROW_ALIGNMENT = [
         firstName: "Naomi",
         lastName: "Thomas",
         age: 32,
-        jobTitle: "Developer",
+        jobTitle: "Analyst",
         address: "8 Side Street, Town, Country, Postcode",
     },
     {
@@ -221,6 +466,124 @@ export const LONG_COLS = [
         dataType: "address",
     },
 ];
+export const ICON_COLS = [
+    {
+        key: "firstName",
+        title: "First name",
+        dataType: "string",
+        cellAlignment: "right",
+        columnAlignment: { horizontal: "right", vertical: "middle" },
+        icon: {
+            icon: imageIconSVG,
+            onAllCells: true,
+            hideOnHeader: true,
+        },
+    },
+    {
+        key: "lastName",
+        title: "Last name",
+        dataType: "string",
+        cellAlignment: "center",
+        columnAlignment: { horizontal: "center", vertical: "bottom" },
+        icon: {
+            icon: imageIconSVG,
+            onAllCells: true,
+        },
+    },
+    {
+        key: "age",
+        title: "Age",
+        dataType: "number",
+    },
+    {
+        key: "jobTitle",
+        title: "Job title",
+        dataType: "string",
+    },
+    {
+        key: "address",
+        title: "Address",
+        dataType: "address",
+        icon: {
+            icon: imageIconSVG,
+        },
+    },
+];
+export const ICON_DATA_LONG_VALUES = [
+    {
+        firstName: {
+            data: "Joe with a very long first name",
+            icon: userIconSVG,
+        },
+        lastName: "Bloggs",
+        age: 30,
+        jobTitle: "Developer",
+        address: "1 Main Street, Town, County, Postcode",
+    },
+    {
+        firstName: "Sarah",
+        lastName: {
+            data: "Smith",
+            icon: userIconSVG,
+        },
+        age: 28,
+        jobTitle: "Analyst",
+        address: "2 Main Street, Town, Country, Postcode",
+    },
+    {
+        firstName: "Mark",
+        lastName: "Owens",
+        age: 45,
+        jobTitle: "Team Lead",
+        address: "12 Key Street, Town, Country, Postcode",
+    },
+];
+export const ICON_DATA = [
+    {
+        firstName: {
+            data: "Joe",
+            icon: userIconSVG,
+        },
+        lastName: "Bloggs",
+        age: 30,
+        jobTitle: "Developer",
+        address: "1 Main Street, Town, County, Postcode",
+    },
+    {
+        firstName: "Sarah",
+        lastName: {
+            data: "Smith",
+            icon: userIconSVG,
+        },
+        age: 28,
+        jobTitle: "Analyst",
+        address: "2 Main Street, Town, Country, Postcode",
+    },
+    {
+        firstName: "Mark",
+        lastName: "Owens",
+        age: 45,
+        jobTitle: "Team Lead",
+        address: "12 Key Street, Town, Country, Postcode",
+    },
+    {
+        firstName: "Naomi",
+        lastName: "Thomas",
+        age: 32,
+        jobTitle: {
+            data: "Developer",
+            icon: userIconSVG,
+        },
+        address: "8 Side Street, Town, Country, Postcode",
+    },
+    {
+        firstName: "Luke",
+        lastName: "Ashford",
+        age: 18,
+        jobTitle: "Junior Developer",
+        address: "5 New Street, Town, Country, Postcode",
+    },
+];
 export const LONG_DATA = [
     {
         employeeNumber: 1,
@@ -252,7 +615,7 @@ export const LONG_DATA = [
     },
     {
         employeeNumber: 5,
-        name: "Luke Ashford",
+        name: "Bartholomew Christoper Augustine Zacchaeus Ashford",
         age: 18,
         jobTitle: "Junior Developer",
         address: "5 New Street, Town, Country, Postcode",
@@ -294,7 +657,7 @@ export const LONG_DATA = [
     },
     {
         employeeNumber: 11,
-        name: "Pete Norton",
+        name: "Chrysanthemum Finnleigh Carrington Savannah Norton",
         age: 32,
         jobTitle: "Analyst",
         address: "6 Key Street, Town, County, Postcode",
@@ -322,7 +685,7 @@ export const LONG_DATA = [
     },
     {
         employeeNumber: 15,
-        name: "Mary Lincoln",
+        name: "Bernadette Mariah Genevieve Maddison Lincoln",
         age: 23,
         jobTitle: "Developer",
         address: "10 Main Street, Town, Country, Postcode",
@@ -399,15 +762,22 @@ export const ROW_HEADER_DATA = DATA.map((data, index) => {
     return Object.assign({ header: { title: ROW_HEADER_TITLES[index] } }, data);
 });
 export const COLS_ELEMENTS = [
+    {
+        key: "actions",
+        title: "Actions",
+        dataType: "element",
+        columnAlignment: { horizontal: "center" },
+    },
     {
         key: "firstName",
         title: "First name",
         dataType: "string",
     },
     {
-        key: "lastName",
-        title: "Last name",
-        dataType: "string",
+        key: "actions2",
+        title: "Actions2",
+        dataType: "element",
+        columnAlignment: { horizontal: "center" },
     },
     {
         key: "age",
@@ -424,56 +794,85 @@ export const COLS_ELEMENTS = [
         title: "Address",
         dataType: "address",
     },
-    {
-        key: "actions",
-        title: "Actions",
-        dataType: "element",
-        columnAlignment: { horizontal: "center" },
-    },
 ];
 export const DATA_ELEMENTS = [
     {
+        actions: `<ic-button variant='destructive' onClick='this.closest("tr").remove()'>Delete</ic-button>`,
         firstName: {
             data: "Joe",
             href: "https://www.example.com",
         },
-        lastName: "Bloggs",
+        actions2: `<ic-button variant='secondary' onClick='this.closest("tr").remove()'>Add</ic-button>`,
         age: 30,
         jobTitle: "Developer",
         address: "1 Main Street, Town, County, Postcode",
-        actions: `<ic-button variant='destructive' onClick='this.closest("tr").remove()'>Delete</ic-button>`,
     },
     {
+        actions: `<ic-button variant='destructive' onClick='this.closest("tr").remove()'>Delete</ic-button>`,
         firstName: "Sarah",
-        lastName: "Smith",
+        actions2: `<ic-button variant='secondary' onClick='this.closest("tr").remove()'>Add</ic-button>`,
         age: 28,
-        jobTitle: "Analyst",
+        jobTitle: "Senior Software Developer, Site Reliability Engineering",
         address: "2 Main Street, Town, Country, Postcode",
-        actions: `<ic-button variant='destructive' onClick='this.closest("tr").remove()'>Delete</ic-button>`,
     },
     {
+        actions: `<ic-button variant='destructive' onClick='this.closest("tr").remove()'>Delete</ic-button>`,
         firstName: "Mark",
-        lastName: "Owens",
+        actions2: `<ic-button variant='secondary' onClick='this.closest("tr").remove()'>Add</ic-button>`,
         age: 45,
         jobTitle: "Team Lead",
         address: "12 Key Street, Town, Country, Postcode",
-        actions: `<ic-button variant='destructive' onClick='this.closest("tr").remove()'>Delete</ic-button>`,
     },
     {
+        actions: `<ic-button variant='destructive' onClick='this.closest("tr").remove()'>Delete</ic-button>`,
         firstName: "Naomi",
-        lastName: "Thomas",
+        actions2: `<ic-button variant='secondary' onClick='this.closest("tr").remove()'>Add</ic-button>`,
         age: 32,
-        jobTitle: "Developer",
+        jobTitle: "Analyst",
         address: "8 Side Street, Town, Country, Postcode",
+    },
+    {
         actions: `<ic-button variant='destructive' onClick='this.closest("tr").remove()'>Delete</ic-button>`,
+        firstName: "Luke",
+        actions2: `<ic-button variant='secondary' onClick='this.closest("tr").remove()'>Add</ic-button>`,
+        age: 18,
+        jobTitle: "Junior Developer",
+        address: "5 New Street, Town, Country, Postcode",
+    },
+];
+export const DATA_REACT_ELEMENTS = [
+    {
+        firstName: {
+            data: "Joe",
+            href: "https://www.example.com",
+        },
+        age: 30,
+        jobTitle: "Developer",
+        address: "1 Main Street, Town, County, Postcode",
+    },
+    {
+        firstName: "Sarah",
+        age: 28,
+        jobTitle: "Senior Software Developer, Site Reliability Engineering",
+        address: "2 Main Street, Town, Country, Postcode",
+    },
+    {
+        firstName: "Mark",
+        age: 45,
+        jobTitle: "Team Lead",
+        address: "12 Key Street, Town, Country, Postcode",
+    },
+    {
+        firstName: "Naomi",
+        age: 32,
+        jobTitle: "Analyst",
+        address: "8 Side Street, Town, Country, Postcode",
     },
     {
         firstName: "Luke",
-        lastName: "Ashford",
         age: 18,
         jobTitle: "Junior Developer",
         address: "5 New Street, Town, Country, Postcode",
-        actions: `<ic-button variant='destructive' onClick='this.closest("tr").remove()'>Delete</ic-button>`,
     },
 ];
 export const createDataTableElement = (caption, columns = COLS, data = DATA) => {
@@ -483,7 +882,31 @@ export const createDataTableElement = (caption, columns = COLS, data = DATA) =>
     dataTable.data = data;
     return dataTable;
 };
-export const Basic = () => createDataTableElement("Basic Table");
+export const Basic = () => {
+    const dataTable = createDataTableElement("Basic Table");
+    dataTable.setAttribute("sortable", "true");
+    return dataTable;
+};
+export const DataTableSizing = () => {
+    const dataTable = createDataTableElement("Basic Table", COLS_WIDTH, DATA);
+    dataTable.setAttribute("width", "800px");
+    return dataTable;
+};
+// Used for table overflow testing
+// export const TableOverflow = (): HTMLElement => {
+//   const wrapper = document.createElement('div');
+//   const dataTable = createDataTableElement("Basic Table", COLS_WIDTH, DATA);
+//   wrapper.style.maxWidth = '500px'
+//   wrapper.style.overflow = 'auto';
+//   dataTable.setAttribute("width", "1000px");
+//   wrapper.insertAdjacentElement('afterbegin', dataTable);
+//   return wrapper;
+// }
+export const LargeDataSet = () => {
+    const dataTable = createDataTableElement("Basic Table", LONG_COLS, LONG_DATA);
+    dataTable.setAttribute("sortable", "true");
+    return dataTable;
+};
 export const Embedded = () => {
     const dataTable = createDataTableElement("Embedded Table");
     dataTable.setAttribute("embedded", "true");
@@ -520,13 +943,16 @@ export const Scrollable = () => {
     buttonWrapper.insertAdjacentElement("beforeend", unstickButton);
     const wrapper = document.createElement("div");
     wrapper.insertAdjacentElement("afterbegin", dataTable);
-    wrapper.insertAdjacentElement("beforeend", buttonWrapper);
+    dataTable.insertAdjacentElement("afterend", buttonWrapper);
     return wrapper;
 };
 export const RowHeaders = () => createDataTableElement("Row Header Table", ROW_HEADER_COLS, ROW_HEADER_DATA);
 export const Sort = () => {
     const dataTable = createDataTableElement("Sort", COLS, DATA);
     dataTable.setAttribute("sortable", "true");
+    dataTable.addEventListener("icSortChange", (event) => {
+        console.log("Sort changed", event.detail);
+    });
     return dataTable;
 };
 export const SortOptions = () => {
@@ -536,24 +962,316 @@ export const SortOptions = () => {
         sortOrders: ["descending", "unsorted"],
         defaultColumn: "firstName",
     };
+    dataTable.addEventListener("icSortChange", (event) => {
+        console.log("Sort changed", event.detail);
+    });
     return dataTable;
 };
 export const Pagination = () => {
     const dataTable = createDataTableElement("Pagination", LONG_COLS, LONG_DATA);
     dataTable.setAttribute("show-pagination", "true");
-    dataTable.paginationOptions = {
-        itemsPerPage: [
+    dataTable.paginationBarOptions = {
+        itemsPerPageOptions: [
             { label: "5", value: "5" },
             { label: "10", value: "10" },
             { label: "15", value: "15" },
         ],
-        itemsPerPageControl: true,
-        goToPageControl: true,
+        showItemsPerPageControl: true,
+        showGoToPageControl: true,
     };
     return dataTable;
 };
-export const ColumnOverrides = () => createDataTableElement("Column Overides", COLS_ALIGNMENT, DATA);
-export const RowOverrides = () => createDataTableElement("Row Overides", ROW_HEADER_COLS, ROW_ALIGNMENT);
-export const CellOverrides = () => createDataTableElement("Cell Overides", COLS, DATA_CELL_ALIGNMENT);
-export const LinksHTMLElements = () => createDataTableElement("Links and HTML Elements Overides", COLS_ELEMENTS, DATA_ELEMENTS);
+export const ColumnOverrides = () => createDataTableElement("Column Overrides", COLS_ALIGNMENT, DATA);
+export const RowOverrides = () => createDataTableElement("Row Overrides", ROW_HEADER_COLS, ROW_ALIGNMENT);
+export const CellOverrides = () => createDataTableElement("Cell Overrides", COLS, DATA_CELL_ALIGNMENT);
+export const LinksHTMLElements = () => createDataTableElement("Links and HTML Elements Overrides", COLS_ELEMENTS, DATA_ELEMENTS);
+export const Empty = () => createDataTableElement("Empty State", COLS, null);
+export const EmptySlotted = () => {
+    const dataTable = createDataTableElement("Empty State", COLS, null);
+    const emptyState = document.createElement("ic-empty-state");
+    emptyState.setAttribute("aligned", "left");
+    emptyState.setAttribute("heading", "Data source error");
+    emptyState.setAttribute("body", "Error loading new data");
+    emptyState.setAttribute("slot", "empty-state");
+    const button = document.createElement("ic-button");
+    button.innerHTML = "Retry";
+    button.setAttribute("slot", "actions");
+    emptyState.appendChild(button);
+    dataTable.appendChild(emptyState);
+    return dataTable;
+};
+export const Loading = () => {
+    const dataTable = createDataTableElement("Loading State", COLS, DATA);
+    dataTable.setAttribute("loading", "true");
+    return dataTable;
+};
+export const EmptyLoading = () => {
+    const dataTable = createDataTableElement("Empty and Loading State", COLS, null);
+    setTimeout(() => {
+        dataTable.setAttribute("loading", "true");
+        setTimeout(() => (dataTable.data = DATA), 10);
+    }, 5000);
+    return dataTable;
+};
+export const Updating = () => {
+    const dataTable = createDataTableElement("Updating State", COLS, DATA);
+    dataTable.updatingOptions = { progress: 30 };
+    dataTable.setAttribute("updating", "true");
+    return dataTable;
+};
+export const CustomIcons = () => createDataTableElement("Custom icons", ICON_COLS, ICON_DATA);
+export const CustomRowHeights = () => {
+    const dataTable = createDataTableElement("Custom Row Heights", COLUMNS_NO_TEXT_WRAP, VERY_LONG_DATA(10));
+    dataTable.globalRowHeight = 80;
+    dataTable.variableRowHeight = ({ name, age }) => name === "John Smith" || age === 41 ? 200 : null;
+    const resetButton = document.createElement("ic-button");
+    resetButton.addEventListener("click", () => dataTable.resetRowHeights(80));
+    resetButton.innerHTML = "Reset rowHeight to 80";
+    const setButton = document.createElement("ic-button");
+    setButton.addEventListener("click", () => {
+        dataTable.globalRowHeight = 80;
+        dataTable.variableRowHeight = ({ name, age }) => name === "John Smith" || age === 41 ? 200 : null;
+    });
+    setButton.innerHTML = "Set global row height";
+    const buttonWrapper = document.createElement("div");
+    buttonWrapper.style["display"] = "flex";
+    buttonWrapper.style["paddingTop"] = "10px";
+    buttonWrapper.style["gap"] = "8px";
+    buttonWrapper.insertAdjacentElement("afterbegin", setButton);
+    buttonWrapper.insertAdjacentElement("beforeend", resetButton);
+    const wrapper = document.createElement("div");
+    wrapper.insertAdjacentElement("afterbegin", dataTable);
+    wrapper.insertAdjacentElement("beforeend", buttonWrapper);
+    return wrapper;
+};
+export const TruncationShowHide = () => {
+    const dataTable = CustomRowHeights().querySelector("ic-data-table");
+    dataTable.globalRowHeight = 40;
+    dataTable.variableRowHeight = null;
+    dataTable.truncationPattern = "show-hide";
+    const resetButton = document.createElement("ic-button");
+    resetButton.addEventListener("click", () => dataTable.resetRowHeights(40));
+    resetButton.innerHTML = "Reset rowHeight to 40";
+    const setButton = document.createElement("ic-button");
+    setButton.addEventListener("click", () => {
+        dataTable.globalRowHeight = 80;
+    });
+    setButton.innerHTML = "Set globalRowHeight to 80";
+    const updateDataButton = document.createElement("ic-button");
+    updateDataButton.addEventListener("click", () => {
+        setTimeout(() => {
+            dataTable.data = LONG_DATA_VALUES_UPDATE;
+        }, 500);
+    });
+    updateDataButton.innerHTML = "Update data";
+    const buttonWrapper = document.createElement("div");
+    buttonWrapper.style["display"] = "flex";
+    buttonWrapper.style["paddingTop"] = "10px";
+    buttonWrapper.style["gap"] = "8px";
+    buttonWrapper.insertAdjacentElement("afterbegin", setButton);
+    buttonWrapper.insertAdjacentElement("beforeend", resetButton);
+    buttonWrapper.insertAdjacentElement("beforeend", updateDataButton);
+    const wrapper = document.createElement("div");
+    wrapper.insertAdjacentElement("afterbegin", dataTable);
+    wrapper.insertAdjacentElement("beforeend", buttonWrapper);
+    return wrapper;
+};
+export const TruncationTextWrap = () => {
+    const dataTable = createDataTableElement("Text Wrap", COLUMNS_TEXT_WRAP, TEXT_WRAP_LONG_DATA);
+    dataTable.globalRowHeight = 40;
+    dataTable.variableRowHeight = null;
+    const wrapper = document.createElement("div");
+    wrapper.insertAdjacentElement("afterbegin", dataTable);
+    return wrapper;
+};
+export const TruncationTooltip = () => {
+    const dataTable = CustomRowHeights().querySelector("ic-data-table");
+    dataTable.globalRowHeight = 40;
+    dataTable.variableRowHeight = null;
+    dataTable.setAttribute("truncation-pattern", "tooltip");
+    const resetButton = document.createElement("ic-button");
+    resetButton.addEventListener("click", () => dataTable.resetRowHeights(40));
+    resetButton.innerHTML = "Reset rowHeight to 40";
+    const setButton = document.createElement("ic-button");
+    setButton.addEventListener("click", () => {
+        dataTable.globalRowHeight = 80;
+    });
+    setButton.innerHTML = "Set global row heights to 80";
+    const buttonWrapper = document.createElement("div");
+    buttonWrapper.style["display"] = "flex";
+    buttonWrapper.style["paddingTop"] = "10px";
+    buttonWrapper.style["gap"] = "8px";
+    buttonWrapper.insertAdjacentElement("afterbegin", setButton);
+    buttonWrapper.insertAdjacentElement("beforeend", resetButton);
+    const wrapper = document.createElement("div");
+    wrapper.insertAdjacentElement("afterbegin", dataTable);
+    wrapper.insertAdjacentElement("beforeend", buttonWrapper);
+    return wrapper;
+};
+export const CustomTitleBar = () => {
+    const dataTable = createDataTableElement("Custom Title Bar", COLS, DATA);
+    const titleBar = document.createElement("ic-data-table-title-bar");
+    titleBar.setAttribute("description", "Data table description that describes the purpose of the table.");
+    titleBar.setAttribute("metadata", "128 items | 32gb | Updated: 01/02/03");
+    titleBar.setAttribute("slot", "title-bar");
+    const customDescription = document.createElement("ic-typography");
+    customDescription.setAttribute("variant", "body");
+    customDescription.setAttribute("slot", "description");
+    customDescription.innerHTML =
+        '<p>This is some text and <ic-link href="/" inline="">this is an inline link</ic-link> within the text.</p>';
+    const primaryButton = document.createElement("ic-button");
+    primaryButton.setAttribute("slot", "primary-action");
+    primaryButton.setAttribute("size", "small");
+    primaryButton.innerHTML = "Primary";
+    const customButtons = [1, 2, 3].map((x) => {
+        const customButton = document.createElement("ic-button");
+        customButton.setAttribute("slot", "custom-actions");
+        customButton.setAttribute("variant", "icon");
+        customButton.setAttribute("aria-label", `Icon ${x}`);
+        customButton.innerHTML =
+            '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm56-97h489L578-473 446-302l-93-127-117 152Zm-56 97v-600 600Z" /></svg>';
+        return customButton;
+    });
+    titleBar.append(primaryButton, customDescription);
+    customButtons.forEach((button) => titleBar.append(button));
+    dataTable.appendChild(titleBar);
+    return dataTable;
+};
+export const UpdatingData = () => {
+    const dataTable = createDataTableElement("Updating Data", COLS, []);
+    const pageOptions = [{ label: "5", value: "5" }];
+    dataTable.showPagination = true;
+    dataTable.paginationBarOptions = {
+        itemsPerPageOptions: pageOptions,
+        showItemsPerPageControl: true,
+        showGoToPageControl: true,
+        rangeLabelType: "page",
+    };
+    const updateDataButton = document.createElement("ic-button");
+    updateDataButton.addEventListener("click", () => {
+        dataTable.data = [...dataTable.data, ...LONG_DATA];
+    });
+    updateDataButton.innerHTML = "Update data";
+    const clearDataButton = document.createElement("ic-button");
+    clearDataButton.addEventListener("click", () => {
+        dataTable.data = [];
+    });
+    clearDataButton.innerHTML = "Clear data";
+    const updatePaginationButton = document.createElement("ic-button");
+    updatePaginationButton.addEventListener("click", () => {
+        dataTable.paginationBarOptions = Object.assign(Object.assign({}, dataTable.paginationBarOptions), { itemsPerPageOptions: [
+                { label: "10", value: "10" },
+                { label: "20", value: "20" },
+                { label: "50", value: "50" },
+            ] });
+    });
+    updatePaginationButton.innerHTML = "Update page lengths";
+    const resetPaginationButton = document.createElement("ic-button");
+    resetPaginationButton.addEventListener("click", () => {
+        dataTable.paginationBarOptions = Object.assign(Object.assign({}, dataTable.paginationBarOptions), { itemsPerPageOptions: pageOptions });
+    });
+    resetPaginationButton.innerHTML = "Reset page lengths";
+    const buttonWrapper = document.createElement("div");
+    buttonWrapper.style["display"] = "flex";
+    buttonWrapper.style["paddingTop"] = "10px";
+    buttonWrapper.style["gap"] = "8px";
+    buttonWrapper.insertAdjacentElement("afterbegin", updateDataButton);
+    buttonWrapper.insertAdjacentElement("beforeend", clearDataButton);
+    buttonWrapper.insertAdjacentElement("beforeend", updatePaginationButton);
+    buttonWrapper.insertAdjacentElement("beforeend", resetPaginationButton);
+    const wrapper = document.createElement("div");
+    wrapper.insertAdjacentElement("afterbegin", dataTable);
+    wrapper.insertAdjacentElement("beforeend", buttonWrapper);
+    return wrapper;
+};
+export const SlottedPagination = () => {
+    let itemsPerPage = 5;
+    const dataTable = createDataTableElement("slotted-pagination", LONG_COLS, LONG_DATA);
+    const paginationBar = document.createElement("ic-pagination-bar");
+    paginationBar.setAttribute("total-items", `${LONG_DATA.length}`);
+    paginationBar.setAttribute("show-items-per-page-control", "true");
+    paginationBar.itemsPerPageOptions = [
+        { label: "5", value: "5" },
+        { label: "10", value: "10" },
+    ];
+    paginationBar.setAttribute("slot", "pagination-bar");
+    paginationBar.addEventListener("icItemsPerPageChange", (ev) => {
+        itemsPerPage = ev.detail.value;
+        dataTable.data = LONG_DATA.slice(0, itemsPerPage);
+    });
+    paginationBar.addEventListener("icPageChange", (ev) => {
+        const fromRow = (ev.detail.value - 1) * itemsPerPage;
+        dataTable.data = LONG_DATA.slice(fromRow, fromRow + itemsPerPage);
+    });
+    dataTable.appendChild(paginationBar);
+    return dataTable;
+};
+export const DevArea = () => {
+    const dataTable = createDataTableElement("Basic Table", COLS, VERY_LONG_DATA(5));
+    dataTable.sortable = true;
+    dataTable.variableRowHeight = null;
+    dataTable.showPagination = true;
+    const description = document.createElement("ic-typography");
+    description.innerHTML = `
+  Use the buttons to change the state of the Data Tables component.<br /><br />
+  By default, the global row height is set to <b>'auto'</b>. This means the row height will be dictated by the cell with the most lines.<br />
+  In order to view the truncated data, the truncation pattern must first be set and then the row height. The reason for this is, the data will know how to behave if the cell space is reduced.<br />
+  Setting the truncation pattern while the row height is set to auto will not display the truncated data as the table cells
+  will have enough space to show all table cell data.<br /><br />
+  In this demo, the even rows have <b>'textWrap'</b> applied.
+  `;
+    const resetButton = document.createElement("ic-button");
+    resetButton.addEventListener("click", () => dataTable.resetRowHeights());
+    resetButton.innerHTML = "Reset row height: auto";
+    const rowHeight40Btn = document.createElement("ic-button");
+    rowHeight40Btn.addEventListener("click", () => {
+        dataTable.globalRowHeight = 40;
+    });
+    rowHeight40Btn.innerHTML = "Set global row height: 40";
+    const rowHeight80Btn = document.createElement("ic-button");
+    rowHeight80Btn.addEventListener("click", () => {
+        dataTable.globalRowHeight = 80;
+    });
+    rowHeight80Btn.innerHTML = "Set global row height: 80";
+    const rowHeight150Btn = document.createElement("ic-button");
+    rowHeight150Btn.addEventListener("click", () => {
+        dataTable.globalRowHeight = 150;
+    });
+    rowHeight150Btn.innerHTML = "Set global row height: 150";
+    const updateRows200Btn = document.createElement("ic-button");
+    updateRows200Btn.addEventListener("click", () => {
+        setTimeout(() => {
+            dataTable.data = VERY_LONG_DATA(200);
+        }, 500);
+    });
+    updateRows200Btn.innerHTML = "Update data rows: 200";
+    const tooltipTruncationBtn = document.createElement("ic-button");
+    tooltipTruncationBtn.textContent = "truncationPattern: tooltip";
+    tooltipTruncationBtn.addEventListener("click", () => {
+        dataTable.truncationPattern = "tooltip";
+    });
+    const showHideTruncationBtn = document.createElement("ic-button");
+    showHideTruncationBtn.textContent = "truncationPattern: show-hide";
+    showHideTruncationBtn.addEventListener("click", () => {
+        dataTable.truncationPattern = "show-hide";
+    });
+    const buttonWrapper = document.createElement("div");
+    buttonWrapper.className = "wrapper";
+    buttonWrapper.style["display"] = "flex";
+    buttonWrapper.style["flexWrap"] = "wrap";
+    buttonWrapper.style["paddingBlock"] = "10px";
+    buttonWrapper.style["gap"] = "8px";
+    buttonWrapper.insertAdjacentElement("beforeend", tooltipTruncationBtn);
+    buttonWrapper.insertAdjacentElement("beforeend", showHideTruncationBtn);
+    buttonWrapper.insertAdjacentElement("beforeend", rowHeight40Btn);
+    buttonWrapper.insertAdjacentElement("beforeend", rowHeight80Btn);
+    buttonWrapper.insertAdjacentElement("beforeend", rowHeight150Btn);
+    buttonWrapper.insertAdjacentElement("beforeend", resetButton);
+    buttonWrapper.insertAdjacentElement("beforeend", updateRows200Btn);
+    const wrapper = document.createElement("div");
+    wrapper.insertAdjacentElement("beforeend", description);
+    wrapper.insertAdjacentElement("beforeend", buttonWrapper);
+    wrapper.insertAdjacentElement("beforeend", dataTable);
+    return wrapper;
+};
 //# sourceMappingURL=story-data.js.map