@ukic/canary-web-components 2.0.0-canary.11 → 2.0.0-canary.12

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",
@@ -26,6 +31,7 @@ export const COLS = [
         key: "jobTitle",
         title: "Job title",
         dataType: "string",
+        textWrap: true,
     },
     {
         key: "address",
@@ -73,7 +79,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 +93,7 @@ export const DATA = [
         firstName: "Naomi",
         lastName: "Thomas",
         age: 32,
-        jobTitle: "Developer",
+        jobTitle: "Analyst",
         address: "8 Side Street, Town, Country, Postcode",
     },
     {
@@ -98,6 +104,88 @@ export const DATA = [
         address: "5 New Street, Town, Country, Postcode",
     },
 ];
+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 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)",
+        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 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 +202,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 +216,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 +247,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 +267,7 @@ export const ROW_ALIGNMENT = [
         firstName: "Naomi",
         lastName: "Thomas",
         age: 32,
-        jobTitle: "Developer",
+        jobTitle: "Analyst",
         address: "8 Side Street, Town, Country, Postcode",
     },
     {
@@ -221,6 +309,95 @@ 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: '<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>',
+            onAllCells: true,
+            hideOnHeader: true,
+        },
+    },
+    {
+        key: "lastName",
+        title: "Last name",
+        dataType: "string",
+        cellAlignment: "center",
+        columnAlignment: { horizontal: "center", vertical: "bottom" },
+        icon: {
+            icon: '<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>',
+            onAllCells: true,
+        },
+    },
+    {
+        key: "age",
+        title: "Age",
+        dataType: "number",
+    },
+    {
+        key: "jobTitle",
+        title: "Job title",
+        dataType: "string",
+    },
+    {
+        key: "address",
+        title: "Address",
+        dataType: "address",
+        icon: {
+            icon: '<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>',
+        },
+    },
+];
+export const ICON_DATA = [
+    {
+        firstName: {
+            data: "Joe",
+            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>',
+        },
+        lastName: "Bloggs",
+        age: 30,
+        jobTitle: "Developer",
+        address: "1 Main Street, Town, County, Postcode",
+    },
+    {
+        firstName: "Sarah",
+        lastName: {
+            data: "Smith",
+            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: 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: {
+            data: "Analyst",
+            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>',
+        },
+        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 +429,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 +471,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 +499,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",
@@ -447,7 +624,7 @@ export const DATA_ELEMENTS = [
         firstName: "Sarah",
         lastName: "Smith",
         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>`,
     },
@@ -463,7 +640,7 @@ export const DATA_ELEMENTS = [
         firstName: "Naomi",
         lastName: "Thomas",
         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>`,
     },
@@ -476,6 +653,51 @@ export const DATA_ELEMENTS = [
         actions: `<ic-button variant='destructive' onClick='this.closest("tr").remove()'>Delete</ic-button>`,
     },
 ];
+export const DATA_REACT_ELEMENTS = [
+    {
+        firstName: {
+            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",
+        actions: `<IcButton variant='destructive' onClick={this.closest("tr").remove()}>Delete</IcButton>`,
+    },
+    {
+        firstName: "Mark",
+        lastName: "Owens",
+        age: 45,
+        jobTitle: "Team Lead",
+        address: "12 Key Street, Town, Country, Postcode",
+        actions: `<IcButton variant='destructive' onClick={this.closest("tr").remove()}>Delete</IcButton>`,
+    },
+    {
+        firstName: "Naomi",
+        lastName: "Thomas",
+        age: 32,
+        jobTitle: "Analyst",
+        address: "8 Side Street, Town, Country, Postcode",
+        actions: `<IcButton variant='destructive' onClick={this.closest("tr").remove()}>Delete</IcButton>`,
+    },
+    {
+        firstName: "Luke",
+        lastName: "Ashford",
+        age: 18,
+        jobTitle: "Junior Developer",
+        address: "5 New Street, Town, Country, Postcode",
+        actions: `<IcButton variant='destructive' onClick={this.closest("tr").remove()}>Delete</IcButton>`,
+    },
+];
 export const createDataTableElement = (caption, columns = COLS, data = DATA) => {
     const dataTable = document.createElement("ic-data-table");
     dataTable.setAttribute("caption", caption);
@@ -541,6 +763,7 @@ export const SortOptions = () => {
 export const Pagination = () => {
     const dataTable = createDataTableElement("Pagination", LONG_COLS, LONG_DATA);
     dataTable.setAttribute("show-pagination", "true");
+    dataTable.setAttribute("truncation-pattern", "tooltip");
     dataTable.paginationOptions = {
         itemsPerPage: [
             { label: "5", value: "5" },
@@ -556,4 +779,156 @@ export const ColumnOverrides = () => createDataTableElement("Column Overides", C
 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 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, LONG_DATA_VALUES);
+    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());
+    resetButton.innerHTML = "Reset";
+    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";
+    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 = (): HTMLIcDataTableElement => {
+//   const dataTable = CustomRowHeights().querySelector("ic-data-table");
+//   dataTable.globalRowHeight = 40;
+//   dataTable.variableRowHeight = null;
+//   dataTable.setAttribute("truncation-pattern", "showHide");
+//   return dataTable;
+// };
+export const TruncationShowHide = () => {
+    const dataTable = CustomRowHeights().querySelector("ic-data-table");
+    dataTable.globalRowHeight = 40;
+    dataTable.variableRowHeight = null;
+    dataTable.setAttribute("truncation-pattern", "showHide");
+    const resetButton = document.createElement("ic-button");
+    resetButton.addEventListener("click", () => dataTable.resetRowHeights());
+    resetButton.innerHTML = "Reset";
+    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";
+    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 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());
+    resetButton.innerHTML = "Reset";
+    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";
+    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-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.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;
+};
 //# sourceMappingURL=story-data.js.map