@ukic/canary-web-components 3.0.0-canary.5 → 3.0.0-canary.8

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 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 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 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 = [
     {
@@ -844,6 +848,8 @@ export const DATA_ELEMENTS = [
         firstName: {
             data: "Joe",
             href: "https://www.example.com",
+            target: "_blank",
+            rel: "noopener noreferrer",
         },
         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,
@@ -852,7 +858,10 @@ export const DATA_ELEMENTS = [
     },
     {
         actions: `<ic-button variant='destructive' onClick='this.closest("tr").remove()'>Delete</ic-button>`,
-        firstName: "Sarah",
+        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",
@@ -888,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",
@@ -958,6 +972,217 @@ export const DATA_REACT_ELEMENTS_WITH_ICONS = [
         address: "5 New Street, Town, Country, Postcode",
     },
 ];
+export const ACTION_DATA_ELEMENTS = [
+    {
+        firstName: {
+            data: "Joe",
+            actionElement: `${downloadButton}${cellphoneButton}${copyButton}`,
+            actionOnClick: () => {
+                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);
@@ -1297,6 +1522,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;
@@ -1365,4 +1604,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