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

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

@@ -1,9 +1,4 @@
 /* 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",
@@ -31,7 +26,6 @@ export const COLS = [
         key: "jobTitle",
         title: "Job title",
         dataType: "string",
-        textWrap: true,
     },
     {
         key: "address",
@@ -79,7 +73,7 @@ export const DATA = [
         firstName: "Sarah",
         lastName: "Smith",
         age: 28,
-        jobTitle: "Senior Software Developer, Site Reliability Engineering",
+        jobTitle: "Analyst",
         address: "2 Main Street, Town, Country, Postcode",
     },
     {
@@ -93,7 +87,7 @@ export const DATA = [
         firstName: "Naomi",
         lastName: "Thomas",
         age: 32,
-        jobTitle: "Analyst",
+        jobTitle: "Developer",
         address: "8 Side Street, Town, Country, Postcode",
     },
     {
@@ -104,88 +98,6 @@ 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: {
@@ -202,7 +114,7 @@ export const DATA_CELL_ALIGNMENT = [
         firstName: "Sarah",
         lastName: "Smith",
         age: 28,
-        jobTitle: "Senior Software Developer, Site Reliability Engineering",
+        jobTitle: "Analyst",
         address: "2 Main Street, Town, Country, Postcode",
     },
     {
@@ -216,7 +128,7 @@ export const DATA_CELL_ALIGNMENT = [
         firstName: "Naomi",
         lastName: "Thomas",
         age: 32,
-        jobTitle: "Analyst",
+        jobTitle: "Developer",
         address: "8 Side Street, Town, Country, Postcode",
     },
     {
@@ -247,7 +159,7 @@ export const ROW_ALIGNMENT = [
         firstName: "Sarah",
         lastName: "Smith",
         age: 28,
-        jobTitle: "Senior Software Developer, Site Reliability Engineering",
+        jobTitle: "Analyst",
         address: "2 Main Street, Town, Country, Postcode",
     },
     {
@@ -267,7 +179,7 @@ export const ROW_ALIGNMENT = [
         firstName: "Naomi",
         lastName: "Thomas",
         age: 32,
-        jobTitle: "Analyst",
+        jobTitle: "Developer",
         address: "8 Side Street, Town, Country, Postcode",
     },
     {
@@ -309,95 +221,6 @@ 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,
@@ -429,7 +252,7 @@ export const LONG_DATA = [
     },
     {
         employeeNumber: 5,
-        name: "Bartholomew Christoper Augustine Zacchaeus Ashford",
+        name: "Luke Ashford",
         age: 18,
         jobTitle: "Junior Developer",
         address: "5 New Street, Town, Country, Postcode",
@@ -471,7 +294,7 @@ export const LONG_DATA = [
     },
     {
         employeeNumber: 11,
-        name: "Chrysanthemum Finnleigh Carrington Savannah Norton",
+        name: "Pete Norton",
         age: 32,
         jobTitle: "Analyst",
         address: "6 Key Street, Town, County, Postcode",
@@ -499,7 +322,7 @@ export const LONG_DATA = [
     },
     {
         employeeNumber: 15,
-        name: "Bernadette Mariah Genevieve Maddison Lincoln",
+        name: "Mary Lincoln",
         age: 23,
         jobTitle: "Developer",
         address: "10 Main Street, Town, Country, Postcode",
@@ -624,7 +447,7 @@ export const DATA_ELEMENTS = [
         firstName: "Sarah",
         lastName: "Smith",
         age: 28,
-        jobTitle: "Senior Software Developer, Site Reliability Engineering",
+        jobTitle: "Analyst",
         address: "2 Main Street, Town, Country, Postcode",
         actions: `<ic-button variant='destructive' onClick='this.closest("tr").remove()'>Delete</ic-button>`,
     },
@@ -640,7 +463,7 @@ export const DATA_ELEMENTS = [
         firstName: "Naomi",
         lastName: "Thomas",
         age: 32,
-        jobTitle: "Analyst",
+        jobTitle: "Developer",
         address: "8 Side Street, Town, Country, Postcode",
         actions: `<ic-button variant='destructive' onClick='this.closest("tr").remove()'>Delete</ic-button>`,
     },
@@ -653,51 +476,6 @@ 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);
@@ -763,7 +541,6 @@ 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" },
@@ -779,156 +556,4 @@ 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