@ukic/canary-web-components 2.0.0-canary.23 → 2.0.0-canary.25

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

@@ -41,6 +41,38 @@ 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++) {
@@ -58,6 +90,35 @@ export const VERY_LONG_DATA = (rows = 100) => {
     }
     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",
@@ -701,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",
@@ -726,56 +794,50 @@ 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: "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: "Analyst",
         address: "8 Side 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: "Luke",
-        lastName: "Ashford",
+        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",
-        actions: `<ic-button variant='destructive' onClick='this.closest("tr").remove()'>Delete</ic-button>`,
     },
 ];
 export const DATA_REACT_ELEMENTS = [
@@ -784,36 +846,30 @@ export const DATA_REACT_ELEMENTS = [
             data: "Joe",
             href: "https://www.example.com",
         },
-        lastName: "Bloggs",
         age: 30,
         jobTitle: "Developer",
         address: "1 Main Street, Town, County, Postcode",
-        actions: `<IcButton variant='destructive' onClick={this.closest("tr").remove()}>Delete</IcButton>`,
     },
     {
         firstName: "Sarah",
-        lastName: "Smith",
         age: 28,
         jobTitle: "Senior Software Developer, Site Reliability Engineering",
         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: "Analyst",
         address: "8 Side Street, Town, Country, Postcode",
     },
     {
         firstName: "Luke",
-        lastName: "Ashford",
         age: 18,
         jobTitle: "Junior Developer",
         address: "5 New Street, Town, Country, Postcode",
@@ -831,6 +887,21 @@ export const Basic = () => {
     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");
@@ -872,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 = () => {
@@ -888,6 +962,9 @@ export const SortOptions = () => {
         sortOrders: ["descending", "unsorted"],
         defaultColumn: "firstName",
     };
+    dataTable.addEventListener("icSortChange", (event) => {
+        console.log("Sort changed", event.detail);
+    });
     return dataTable;
 };
 export const Pagination = () => {
@@ -944,7 +1021,7 @@ export const Updating = () => {
 };
 export const CustomIcons = () => createDataTableElement("Custom icons", ICON_COLS, ICON_DATA);
 export const CustomRowHeights = () => {
-    const dataTable = createDataTableElement("Custom Row Heights", COLS, LONG_DATA_VALUES);
+    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");
@@ -1009,7 +1086,7 @@ export const TruncationTextWrap = () => {
 };
 export const TruncationTooltip = () => {
     const dataTable = CustomRowHeights().querySelector("ic-data-table");
-    dataTable.globalRowHeight = 150;
+    dataTable.globalRowHeight = 40;
     dataTable.variableRowHeight = null;
     dataTable.setAttribute("truncation-pattern", "tooltip");
     const resetButton = document.createElement("ic-button");
@@ -1019,7 +1096,7 @@ export const TruncationTooltip = () => {
     setButton.addEventListener("click", () => {
         dataTable.globalRowHeight = 80;
     });
-    setButton.innerHTML = "Set global row heights";
+    setButton.innerHTML = "Set global row heights to 80";
     const buttonWrapper = document.createElement("div");
     buttonWrapper.style["display"] = "flex";
     buttonWrapper.style["paddingTop"] = "10px";
@@ -1134,47 +1211,65 @@ export const DevArea = () => {
     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(40));
-    resetButton.innerHTML = "Reset rowHeight to 40";
-    const setButton = document.createElement("ic-button");
-    setButton.addEventListener("click", () => {
+    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;
     });
-    setButton.innerHTML = "Set global row height to 80";
-    const increaseButton = document.createElement("ic-button");
-    increaseButton.addEventListener("click", () => {
+    rowHeight80Btn.innerHTML = "Set global row height: 80";
+    const rowHeight150Btn = document.createElement("ic-button");
+    rowHeight150Btn.addEventListener("click", () => {
         dataTable.globalRowHeight = 150;
     });
-    increaseButton.innerHTML = "Set global row height to 150";
-    const updateDataButton = document.createElement("ic-button");
-    updateDataButton.addEventListener("click", () => {
+    rowHeight150Btn.innerHTML = "Set global row height: 150";
+    const updateRows200Btn = document.createElement("ic-button");
+    updateRows200Btn.addEventListener("click", () => {
         setTimeout(() => {
             dataTable.data = VERY_LONG_DATA(200);
         }, 500);
     });
-    updateDataButton.innerHTML = "Update rows to 200";
-    const switchTruncation = document.createElement("ic-button");
-    switchTruncation.addEventListener("click", () => {
-        if (dataTable.truncationPattern === "show-hide") {
-            dataTable.truncationPattern = "tooltip";
-        }
-        else {
-            dataTable.truncationPattern = "show-hide";
-        }
+    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";
     });
-    switchTruncation.innerHTML = "Toggle truncation pattern";
     const buttonWrapper = document.createElement("div");
     buttonWrapper.className = "wrapper";
     buttonWrapper.style["display"] = "flex";
-    buttonWrapper.style["paddingTop"] = "10px";
+    buttonWrapper.style["flexWrap"] = "wrap";
+    buttonWrapper.style["paddingBlock"] = "10px";
     buttonWrapper.style["gap"] = "8px";
-    buttonWrapper.insertAdjacentElement("afterbegin", setButton);
+    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", increaseButton);
-    buttonWrapper.insertAdjacentElement("beforeend", updateDataButton);
-    buttonWrapper.insertAdjacentElement("beforeend", switchTruncation);
+    buttonWrapper.insertAdjacentElement("beforeend", updateRows200Btn);
     const wrapper = document.createElement("div");
+    wrapper.insertAdjacentElement("beforeend", description);
     wrapper.insertAdjacentElement("beforeend", buttonWrapper);
     wrapper.insertAdjacentElement("beforeend", dataTable);
     return wrapper;