@ukic/canary-web-components 3.0.0-canary.1 → 3.0.0-canary.10

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

@@ -13,6 +13,10 @@ const ROW_HEADER_TITLES = [
 ];
 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>';
+const alertIconSVG = '<svg aria-label="alert-icon" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24" fill="#000000"><path d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z"/></svg>';
+const copyButton = '<ic-button data-testid="copy-button" variant="icon" size="small"  aria-label="you can disable tooltips on icon buttons"> <svg aria-label="copy-button" xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg> </ic-button>';
+const cellphoneButton = '<ic-button data-testid="cellphone-button" variant="icon" size="small"  aria-label="you can disable tooltips on icon buttons"> <svg aria-label="cellphone-button" xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M17,19H7V5H17M17,1H7C5.89,1 5,1.89 5,3V21A2,2 0 0,0 7,23H17A2,2 0 0,0 19,21V3C19,1.89 18.1,1 17,1Z"/></svg> </ic-button>';
+const downloadButton = '<ic-button data-testid="download-button" variant="icon" size="small"  aria-label="you can disable tooltips on icon buttons"> <svg aria-label="download-button" xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"/></svg> </ic-button>';
 // TODO: Add columnOptions
 export const COLS = [
     {
@@ -384,6 +388,49 @@ export const DATA_CELL_ALIGNMENT = [
         address: "5 New Street, Town, Country, Postcode",
     },
 ];
+export const DATA_EMPHASIS = [
+    {
+        firstName: {
+            data: "Joe",
+            emphasis: "high",
+        },
+        lastName: "Bloggs",
+        age: 30,
+        jobTitle: "Developer",
+        address: "1 Main Street, Town, County, Postcode",
+    },
+    {
+        firstName: "Sarah",
+        lastName: {
+            data: "Smith",
+            emphasis: "low",
+        },
+        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",
+    },
+];
 export const ROW_ALIGNMENT = [
     {
         header: {
@@ -801,16 +848,21 @@ export const DATA_ELEMENTS = [
         firstName: {
             data: "Joe",
             href: "https://www.example.com",
+            target: "_blank",
+            rel: "noopener noreferrer",
         },
-        actions2: `<ic-button variant='secondary' onClick='this.closest("tr").remove()'>Add</ic-button>`,
+        actions2: `<ic-button aria-label="Delete row" variant='icon' onClick='this.closest("tr").remove()'><svg viewBox="0 0 24 24" role="presentation" style="width: 1.5rem; height: 1.5rem;"><path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" style="fill: currentcolor;"></path></svg></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>`,
-        firstName: "Sarah",
-        actions2: `<ic-button variant='secondary' onClick='this.closest("tr").remove()'>Add</ic-button>`,
+        firstName: {
+            data: "Sarah",
+            href: "https://www.example.org",
+        },
+        actions2: `<ic-button aria-label="Delete row" variant='icon' onClick='this.closest("tr").remove()'><svg viewBox="0 0 24 24" role="presentation" style="width: 1.5rem; height: 1.5rem;"><path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" style="fill: currentcolor;"></path></svg></ic-button>`,
         age: 28,
         jobTitle: "Senior Software Developer, Site Reliability Engineering",
         address: "2 Main Street, Town, Country, Postcode",
@@ -818,7 +870,7 @@ export const DATA_ELEMENTS = [
     {
         actions: `<ic-button variant='destructive' onClick='this.closest("tr").remove()'>Delete</ic-button>`,
         firstName: "Mark",
-        actions2: `<ic-button variant='secondary' onClick='this.closest("tr").remove()'>Add</ic-button>`,
+        actions2: `<ic-button aria-label="Delete row" variant='icon' onClick='this.closest("tr").remove()'><svg viewBox="0 0 24 24" role="presentation" style="width: 1.5rem; height: 1.5rem;"><path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" style="fill: currentcolor;"></path></svg></ic-button>`,
         age: 45,
         jobTitle: "Team Lead",
         address: "12 Key Street, Town, Country, Postcode",
@@ -826,7 +878,7 @@ export const DATA_ELEMENTS = [
     {
         actions: `<ic-button variant='destructive' onClick='this.closest("tr").remove()'>Delete</ic-button>`,
         firstName: "Naomi",
-        actions2: `<ic-button variant='secondary' onClick='this.closest("tr").remove()'>Add</ic-button>`,
+        actions2: `<ic-button aria-label="Delete row" variant='icon' onClick='this.closest("tr").remove()'><svg viewBox="0 0 24 24" role="presentation" style="width: 1.5rem; height: 1.5rem;"><path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" style="fill: currentcolor;"></path></svg></ic-button>`,
         age: 32,
         jobTitle: "Analyst",
         address: "8 Side Street, Town, Country, Postcode",
@@ -834,7 +886,7 @@ export const DATA_ELEMENTS = [
     {
         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>`,
+        actions2: `<ic-button aria-label="Delete row" variant='icon' onClick='this.closest("tr").remove()'><svg viewBox="0 0 24 24" role="presentation" style="width: 1.5rem; height: 1.5rem;"><path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" style="fill: currentcolor;"></path></svg></ic-button>`,
         age: 18,
         jobTitle: "Junior Developer",
         address: "5 New Street, Town, Country, Postcode",
@@ -845,13 +897,18 @@ export const DATA_REACT_ELEMENTS = [
         firstName: {
             data: "Joe",
             href: "https://www.example.com",
+            target: "_blank",
+            rel: "noopener noreferrer",
         },
         age: 30,
         jobTitle: "Developer",
         address: "1 Main Street, Town, County, Postcode",
     },
     {
-        firstName: "Sarah",
+        firstName: {
+            data: "Sarah",
+            href: "https://www.example.org/",
+        },
         age: 28,
         jobTitle: "Senior Software Developer, Site Reliability Engineering",
         address: "2 Main Street, Town, Country, Postcode",
@@ -875,6 +932,258 @@ export const DATA_REACT_ELEMENTS = [
         address: "5 New Street, Town, Country, Postcode",
     },
 ];
+export const DATA_REACT_ELEMENTS_WITH_ICONS = [
+    {
+        firstName: {
+            data: "Joe",
+            href: "https://www.example.com",
+            icon: '<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>',
+        },
+        age: 30,
+        jobTitle: "Developer",
+        address: "1 Main Street, Town, County, Postcode",
+    },
+    {
+        firstName: {
+            data: "Sarah",
+            href: "https://www.example.com",
+            icon: "",
+        },
+        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",
+        age: 18,
+        jobTitle: "Junior Developer",
+        address: "5 New Street, Town, Country, Postcode",
+    },
+];
+export const ACTION_DATA_ELEMENTS = [
+    {
+        firstName: {
+            data: "Joe",
+            actionElement: `${downloadButton}${cellphoneButton}${copyButton}`,
+            actionOnClick: (event) => {
+                event === null || event === void 0 ? void 0 : event.stopPropagation();
+                console.log("hello");
+            },
+        },
+        lastName: "Bloggs",
+        age: 31,
+        jobTitle: "Developer",
+        address: "1 Main Street, Town, County, Postcode",
+    },
+    {
+        firstName: {
+            data: "Sarah",
+            actionElement: copyButton,
+        },
+        lastName: "Jane",
+        age: 28,
+        jobTitle: {
+            data: "Senior Software Developer, Site Reliability Engineering",
+            actionElement: `<ic-status-tag role="status" label="Success" status="success"></ic-status-tag>`,
+        },
+        address: "2 Main Street, Town, Country, Postcode",
+    },
+    {
+        firstName: {
+            data: "Mark",
+            actionElement: copyButton,
+        },
+        lastName: "Smith",
+        age: {
+            data: 45,
+            actionElement: `<ic-button variant="icon" id="small-button" size="small" aria-label="you can disable tooltips on icon buttons"> <svg aria-label="refresh button" xmlns="http://www.w3.org/2000/svg"    width="24"    height="24"    viewBox="0 0 24 24"    fill="#000000"  >    <path d="M0 0h24v24H0V0z" fill="none"></path>    <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"></path>  </svg></ic-button>`,
+        },
+        jobTitle: "Team Lead",
+        address: "12 Key Street, Town, Country, Postcode",
+    },
+    {
+        firstName: {
+            data: "Naomi",
+            actionElement: copyButton,
+        },
+        lastName: "Kens",
+        age: 32,
+        jobTitle: "Analyst",
+        address: "8 Side Street, Town, Country, Postcode",
+    },
+    {
+        firstName: {
+            data: "Luke",
+            actionElement: copyButton,
+        },
+        lastName: "Sky",
+        age: 18,
+        jobTitle: "Junior Developer",
+        address: {
+            data: "5 New Street, Town, Country, Postcode",
+            actionElement: `<ic-status-tag role="status" label="Error" status="danger"></ic-status-tag>`,
+        },
+    },
+];
+export const DATA_WITH_EMPTY_VALUES = [
+    {
+        firstName: "Nigel",
+        lastName: null,
+        age: 62,
+        jobTitle: "Developer",
+        address: "1 Main Street, Town, County, Postcode",
+    },
+    {
+        firstName: "Sarah",
+        lastName: "Smith",
+        age: 28,
+        jobTitle: undefined,
+        address: "2 Main Street, Town, Country, Postcode",
+    },
+    {
+        firstName: "Mark",
+        lastName: "Owens",
+        age: 45,
+        jobTitle: "Team Lead",
+        address: "",
+    },
+];
+export const LONG_DATA_ELEMENTS_WITH_DESCRIPTIONS = [
+    {
+        firstName: {
+            data: "Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe",
+            description: {
+                data: "Alias: JB",
+                icon: imageIconSVG,
+            },
+            actionElement: copyButton,
+            icon: userIconSVG,
+        },
+        lastName: "Bloggs",
+        age: 30,
+        jobTitle: "Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer",
+        address: "N/A",
+    },
+    {
+        firstName: {
+            data: "Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe Joe",
+            actionElement: copyButton,
+        },
+        lastName: "Bloggs",
+        age: 30,
+        jobTitle: "Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer Developer",
+        address: "N/A",
+    },
+    {
+        firstName: {
+            data: "Joey",
+            description: {
+                data: "Unverified",
+                icon: alertIconSVG,
+            },
+            actionElement: copyButton,
+        },
+        lastName: "Bloggy",
+        age: 31,
+        jobTitle: "Developer",
+        address: "N/A",
+    },
+    {
+        firstName: {
+            actionElement: copyButton,
+            description: "Alias: The Ghost",
+        },
+        lastName: "Blogger",
+        age: 32,
+        jobTitle: "Writer",
+        address: "N/A",
+    },
+];
+export const DATA_ELEMENTS_WITH_DESCRIPTIONS = [
+    {
+        firstName: {
+            data: "Joe",
+            description: {
+                data: "The name of Joe",
+                icon: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><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>',
+            },
+        },
+        lastName: "Bloggs",
+        age: 30,
+        jobTitle: "Developer",
+        address: "1 Main Street, Town, County, Postcode",
+    },
+    {
+        firstName: {
+            data: "Sarah",
+            description: {
+                data: "The name of Sarah",
+                icon: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><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>',
+            },
+        },
+        lastName: "Smith",
+        age: 28,
+        jobTitle: "Senior Software Developer, Site Reliability Engineering",
+        address: "2 Main Street, Town, Country, Postcode",
+    },
+    {
+        firstName: {
+            data: "Mark",
+            description: {
+                data: "The name of Mark",
+                icon: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><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>',
+            },
+        },
+        lastName: "Owens",
+        age: 45,
+        jobTitle: "Team Lead",
+        address: "12 Key Street, Town, Country, Postcode",
+    },
+    {
+        firstName: {
+            data: "Naomi",
+            description: {
+                data: "The name of Naomi",
+                icon: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><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>',
+            },
+        },
+        lastName: "Thomas",
+        age: 32,
+        jobTitle: "Analyst",
+        address: "8 Side Street, Town, Country, Postcode",
+    },
+    {
+        firstName: "Luke",
+        lastName: "Ashford",
+        age: {
+            data: 18,
+            description: {
+                data: "The age of Luke",
+                icon: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><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>',
+            },
+        },
+        jobTitle: {
+            data: "Junior Developer",
+            description: {
+                data: "The job title of Luke",
+                icon: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><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>',
+            },
+        },
+        address: "5 New Street, Town, Country, Postcode",
+    },
+];
 export const createDataTableElement = (caption, columns = COLS, data = DATA) => {
     const dataTable = document.createElement("ic-data-table");
     dataTable.setAttribute("caption", caption);
@@ -890,6 +1199,7 @@ export const Basic = () => {
 export const DataTableSizing = () => {
     const dataTable = createDataTableElement("Basic Table", COLS_WIDTH, DATA);
     dataTable.setAttribute("width", "800px");
+    dataTable.setAttribute("table-layout", "auto");
     return dataTable;
 };
 // Used for table overflow testing
@@ -946,6 +1256,13 @@ export const Scrollable = () => {
     dataTable.insertAdjacentElement("afterend", buttonWrapper);
     return wrapper;
 };
+export const HeaderTruncation = () => {
+    const dataTable = createDataTableElement("Column Header Truncation", COLS, LONG_DATA);
+    dataTable.setAttribute("column-header-truncation", "true");
+    dataTable.style["height"] = "400px";
+    dataTable.style["width"] = "500px";
+    return dataTable;
+};
 export const RowHeaders = () => createDataTableElement("Row Header Table", ROW_HEADER_COLS, ROW_HEADER_DATA);
 export const Sort = () => {
     const dataTable = createDataTableElement("Sort", COLS, DATA);
@@ -967,6 +1284,40 @@ export const SortOptions = () => {
     });
     return dataTable;
 };
+export const DisableSort = () => {
+    const originalData = [...DATA];
+    const dataTable = createDataTableElement("Sort", COLS, DATA);
+    dataTable.setAttribute("sortable", "true");
+    dataTable.setAttribute("disable-auto-sort", "true");
+    dataTable.addEventListener("icSortChange", (event) => {
+        console.log("Sort changed", event.detail);
+        if (event.detail.sorted === "ascending") {
+            DATA.sort((a, b) => {
+                const column = event.detail.columnName;
+                if (a[column] < b[column])
+                    return -1;
+                if (a[column] > b[column])
+                    return 1;
+                return 0;
+            });
+        }
+        else if (event.detail.sorted === "descending") {
+            DATA.sort((a, b) => {
+                const column = event.detail.columnName;
+                if (a[column] < b[column])
+                    return 1;
+                if (a[column] > b[column])
+                    return -1;
+                return 0;
+            });
+        }
+        else {
+            DATA.splice(0, DATA.length, ...originalData);
+        }
+        dataTable.data = [...DATA];
+    });
+    return dataTable;
+};
 export const Pagination = () => {
     const dataTable = createDataTableElement("Pagination", LONG_COLS, LONG_DATA);
     dataTable.setAttribute("show-pagination", "true");
@@ -1089,6 +1440,7 @@ export const TruncationTooltip = () => {
     dataTable.globalRowHeight = 40;
     dataTable.variableRowHeight = null;
     dataTable.setAttribute("truncation-pattern", "tooltip");
+    dataTable.setAttribute("sortable", "true");
     const resetButton = document.createElement("ic-button");
     resetButton.addEventListener("click", () => dataTable.resetRowHeights(40));
     resetButton.innerHTML = "Reset rowHeight to 40";
@@ -1206,6 +1558,20 @@ export const SlottedPagination = () => {
     dataTable.appendChild(paginationBar);
     return dataTable;
 };
+export const ActionElement = () => createDataTableElement("Action Element", COLS, ACTION_DATA_ELEMENTS);
+export const MissingCellData = () => createDataTableElement("Missing Cell Data", COLS, DATA_WITH_EMPTY_VALUES);
+export const TurnOffSelectedRowHighlighting = () => {
+    const dataTable = createDataTableElement("Turn off selected row highlighting", COLS, DATA);
+    dataTable.setAttribute("highlight-selected-row", "false");
+    return dataTable;
+};
+export const SelectedRowChangeEvent = () => {
+    const dataTable = createDataTableElement("Turn off selected row highlighting", COLS, DATA);
+    dataTable.addEventListener("icSelectedRowChange", (event) => {
+        console.log("Selected row changed", event.detail);
+    });
+    return dataTable;
+};
 export const DevArea = () => {
     const dataTable = createDataTableElement("Basic Table", COLS, VERY_LONG_DATA(5));
     dataTable.sortable = true;
@@ -1274,4 +1640,56 @@ export const DevArea = () => {
     wrapper.insertAdjacentElement("beforeend", dataTable);
     return wrapper;
 };
+export const CellDescriptions = () => {
+    const dataTable = createDataTableElement("Cell descriptions data table", COLS, DATA_ELEMENTS_WITH_DESCRIPTIONS);
+    dataTable.setAttribute("sortable", "true");
+    return dataTable;
+};
+export const LongCellDescriptions = () => {
+    const dataTable = createDataTableElement("Cell descriptions data table auto with tooltip", COLS, LONG_DATA_ELEMENTS_WITH_DESCRIPTIONS);
+    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";
+    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";
+    buttonWrapper.insertAdjacentElement("beforeend", tooltipTruncationBtn);
+    buttonWrapper.insertAdjacentElement("beforeend", showHideTruncationBtn);
+    buttonWrapper.insertAdjacentElement("beforeend", rowHeight40Btn);
+    buttonWrapper.insertAdjacentElement("beforeend", rowHeight80Btn);
+    buttonWrapper.insertAdjacentElement("beforeend", rowHeight150Btn);
+    buttonWrapper.insertAdjacentElement("beforeend", resetButton);
+    const wrapper = document.createElement("div");
+    wrapper.insertAdjacentElement("beforeend", buttonWrapper);
+    wrapper.insertAdjacentElement("beforeend", dataTable);
+    return wrapper;
+};
 //# sourceMappingURL=story-data.js.map