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

package/dist/collection/components/ic-card-horizontal/test/basic/ic-card-horizontal.spec.js

@@ -51,6 +51,16 @@ describe("ic-card-horizontal", () => {
         });
         expect(page.root).toMatchSnapshot();
     });
+    it("should render disabled", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card-horizontal heading="Card" message="This is a static card" disabled clickable></ic-card-horizontal>`,
+        });
+        expect(page.root).toMatchSnapshot();
+        page.rootInstance.disabled = false;
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot("disabled-removed");
+    });
     it("should apply 'focussed' style when parent is focussed", async () => {
         const page = await newSpecPage({
             components: [Card],

package/dist/collection/components/ic-card-horizontal/test/basic/ic-card-horizontal.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-card-horizontal.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-card-horizontal/test/basic/ic-card-horizontal.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Card } from \"../../ic-card-horizontal\";\nimport { IcTypography as Typography } from \"@ukic/web-components/dist/components/ic-typography\";\n\ndescribe(\"ic-card-horizontal\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a static card\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render small\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a static card\" size=\"small\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render large\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a static card\" size=\"large\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render extra large\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a static card\" size=\"extra large\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render as a button\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render as a link\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true href=\"/\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a link parent\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<a href=\"/\"><ic-card-horizontal heading=\"Card\" message=\"This is a clickable card\" clickable=true></ic-card-horizontal></a>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should apply 'focussed' style when parent is focussed\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<a href=\"/\"><ic-card-horizontal id=\"test-id\" heading=\"Card\" message=\"This is a clickable card\" clickable=true></ic-card-horizontal></a>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const element = await document.getElementById(\"test-id\");\n\n    await expect(element.classList.contains(\"focussed\")).toBeFalsy;\n\n    await element.focus();\n\n    await expect(element.classList.contains(\"focussed\")).toBeTruthy;\n  });\n\n  it(\"should lose 'focussed' style when parent loses focus\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<a href=\"/\"><ic-card-horizontal id=\"test-card\" heading=\"Card\" message=\"This is a clickable card\" clickable=true></ic-card-horizontal></a>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const element = await document.getElementById(\"test-card\");\n\n    await element.focus();\n\n    await expect(element.classList.contains(\"focussed\")).toBeTruthy;\n\n    await element.blur();\n\n    await expect(element.classList.contains(\"focussed\")).toBeFalsy;\n\n    await page.rootInstance.disconnectedCallback();\n  });\n\n  it(\"should stop immediate propagation of a click event when disabled\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal id=\"test-card\" heading=\"Card\" message=\"This is a clickable card\" clickable=true disabled=true onclick=\"alert('test')\"></ic-card-horizontal>`,\n    });\n\n    jest.spyOn(window, \"alert\").mockImplementation();\n\n    const element = await document.getElementById(\"test-card\");\n\n    element.click();\n\n    await page.waitForChanges();\n\n    await expect(window.alert).not.toHaveBeenCalled;\n  });\n\n  it(\"should render with an image\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal id=\"test-card\" heading=\"Card\" message=\"This is a card\"><div slot=\"image\">Image placeholder</div></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with an icon\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal id=\"test-card\" heading=\"Card\" message=\"This is a card\"><div slot=\"icon\">Image placeholder</div></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a slotted heading and message\", async () => {\n    const page = await newSpecPage({\n      components: [Card, Typography],\n      html: `<ic-card-horizontal id=\"test-card\">\n      <ic-typography slot=\"heading\">Heading</ic-typography>\n      <ic-typography slot=\"message\">Message</ic-typography>\n    </ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should call 'setFocus' when card as a button is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true></ic-card-horizontal>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n\n  it(\"should call 'setFocus' when card as a link is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true href=\"/\"></ic-card-horizontal>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n});\n"]}
+{"version":3,"file":"ic-card-horizontal.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-card-horizontal/test/basic/ic-card-horizontal.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Card } from \"../../ic-card-horizontal\";\nimport { IcTypography as Typography } from \"@ukic/web-components/dist/components/ic-typography\";\n\ndescribe(\"ic-card-horizontal\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a static card\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render small\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a static card\" size=\"small\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render large\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a static card\" size=\"large\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render extra large\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a static card\" size=\"extra large\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render as a button\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render as a link\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true href=\"/\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a link parent\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<a href=\"/\"><ic-card-horizontal heading=\"Card\" message=\"This is a clickable card\" clickable=true></ic-card-horizontal></a>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render disabled\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a static card\" disabled clickable></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    page.rootInstance.disabled = false;\n\n    await page.waitForChanges();\n    expect(page.root).toMatchSnapshot(\"disabled-removed\");\n  });\n\n  it(\"should apply 'focussed' style when parent is focussed\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<a href=\"/\"><ic-card-horizontal id=\"test-id\" heading=\"Card\" message=\"This is a clickable card\" clickable=true></ic-card-horizontal></a>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const element = await document.getElementById(\"test-id\");\n\n    await expect(element.classList.contains(\"focussed\")).toBeFalsy;\n\n    await element.focus();\n\n    await expect(element.classList.contains(\"focussed\")).toBeTruthy;\n  });\n\n  it(\"should lose 'focussed' style when parent loses focus\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<a href=\"/\"><ic-card-horizontal id=\"test-card\" heading=\"Card\" message=\"This is a clickable card\" clickable=true></ic-card-horizontal></a>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const element = await document.getElementById(\"test-card\");\n\n    await element.focus();\n\n    await expect(element.classList.contains(\"focussed\")).toBeTruthy;\n\n    await element.blur();\n\n    await expect(element.classList.contains(\"focussed\")).toBeFalsy;\n\n    await page.rootInstance.disconnectedCallback();\n  });\n\n  it(\"should stop immediate propagation of a click event when disabled\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal id=\"test-card\" heading=\"Card\" message=\"This is a clickable card\" clickable=true disabled=true onclick=\"alert('test')\"></ic-card-horizontal>`,\n    });\n\n    jest.spyOn(window, \"alert\").mockImplementation();\n\n    const element = await document.getElementById(\"test-card\");\n\n    element.click();\n\n    await page.waitForChanges();\n\n    await expect(window.alert).not.toHaveBeenCalled;\n  });\n\n  it(\"should render with an image\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal id=\"test-card\" heading=\"Card\" message=\"This is a card\"><div slot=\"image\">Image placeholder</div></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with an icon\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal id=\"test-card\" heading=\"Card\" message=\"This is a card\"><div slot=\"icon\">Image placeholder</div></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a slotted heading and message\", async () => {\n    const page = await newSpecPage({\n      components: [Card, Typography],\n      html: `<ic-card-horizontal id=\"test-card\">\n      <ic-typography slot=\"heading\">Heading</ic-typography>\n      <ic-typography slot=\"message\">Message</ic-typography>\n    </ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should call 'setFocus' when card as a button is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true></ic-card-horizontal>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n\n  it(\"should call 'setFocus' when card as a link is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true href=\"/\"></ic-card-horizontal>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n});\n"]}

package/dist/collection/components/ic-data-table/ic-data-table.css

@@ -25,10 +25,11 @@ tbody {
   min-height: 1.5rem;
   overflow-y: hidden;
   height: var(--row-height);
+
+  --ic-typography-color: var(--ic-data-table-text-default-emphasis);
 }
 
 .truncation-show-hide {
-  overflow: visible;
   display: block;
 }
 
@@ -73,7 +74,7 @@ table {
 }
 
 :host([embedded="true"]) .table-row-container {
-  border: var(--ic-border-light);
+  border: var(--ic-space-1px) solid var(--ic-data-table-border);
 }
 
 .column-header-inner-container {
@@ -81,6 +82,18 @@ table {
   box-sizing: border-box;
 }
 
+.column-header-inner-container ic-tooltip {
+  pointer-events: none;
+}
+
+.column-header-inner-container ic-tooltip.show-trunc-tooltip {
+  pointer-events: auto;
+}
+
+.column-header-inner-container ic-tooltip .column-header-text {
+  --ic-line-clamp: 1;
+}
+
 .column-header-sticky {
   position: sticky;
   top: 0;
@@ -106,7 +119,17 @@ table {
 }
 
 .table-row-selected {
-  background-color: var(--ic-table-row-selected) !important;
+  background-color: var(--ic-data-table-cell-background-selected) !important;
+}
+
+.table-row:hover {
+  background-color: var(--ic-data-table-cell-background-hover) !important;
+}
+
+.table-row-selected:hover {
+  background-color: var(
+    --ic-data-table-cell-background-selected-hover
+  ) !important;
 }
 
 .sort-button {
@@ -114,19 +137,19 @@ table {
 }
 
 .sort-button:hover {
-  background-color: var(--ic-action-dark-bg-hover);
+  background-color: var(--ic-data-table-icon-button-background-hover);
 }
 
 .sort-button:active {
-  background-color: var(--ic-action-dark-bg-active);
+  background-color: var(--ic-data-table-icon-button-background-pressed);
 }
 
 .sort-button svg {
-  color: var(--ic-architectural-black);
+  color: var(--ic-data-table-sort-toggle-icon);
 }
 
 .sort-button-unsorted svg {
-  color: var(--ic-color-tertiary-text);
+  color: var(--ic-data-table-sort-toggle-icon-default);
 }
 
 .table-density-dense .column-header-inner-container,
@@ -151,13 +174,22 @@ td.table-density-spacious {
   font-weight: var(--ic-font-weight-bold);
 }
 
+.dummy-column-header-text {
+  white-space: nowrap;
+  overflow: hidden;
+  height: 0;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
 .row-header,
 .column-header {
   text-align: left;
   padding: var(--ic-space-xs);
-  background-color: var(--ic-architectural-40);
-  border-right: var(--ic-border-light);
-  border-bottom: var(--ic-border-light);
+  background-color: var(--ic-data-table-header-background);
+  border-right: var(--ic-space-1px) solid var(--ic-data-table-header-keyline);
+  border-bottom: var(--ic-space-1px) solid var(--ic-data-table-header-keyline);
+  color: var(--ic-data-table-header-text);
 }
 
 .column-header {
@@ -172,7 +204,7 @@ td.table-density-spacious {
 }
 
 .scrollable .column-header:last-child {
-  border-right: var(--ic-border-light) !important;
+  border-right: var(--ic-space-1px) solid var(--ic-data-table-header-keyline) !important;
 }
 
 :host([embedded="true"]) tr:last-child .table-cell,
@@ -209,19 +241,27 @@ td.table-density-spacious {
   justify-content: center !important;
 }
 
+.table-row {
+  background-color: var(--ic-data-table-cell-background);
+}
+
 .table-row:nth-child(even) {
-  background-color: var(--ic-architectural-20);
+  background-color: var(--ic-data-table-cell-background-stripe);
 }
 
 .table-cell {
   padding: var(--ic-space-xs);
-  border-bottom: solid var(--ic-architectural-100) var(--ic-space-1px);
+  border-bottom: solid var(--ic-data-table-cell-keyline) var(--ic-space-1px);
   overflow: hidden;
   box-sizing: border-box;
   max-width: var(--column-max-width);
   min-width: var(--column-min-width);
 }
 
+.table-cell.with-overflow {
+  overflow: visible;
+}
+
 .data-type-string,
 .data-type-address {
   text-align: left;
@@ -250,17 +290,20 @@ td.table-density-spacious {
   align-items: flex-end;
 }
 
-.cell-emphasis-low {
-  --ic-typography-color: var(--ic-color-secondary-text);
+.cell-emphasis-low ic-typography {
+  --ic-typography-color: var(--ic-data-table-text-low-emphasis);
 }
 
-.cell-emphasis-high {
+.cell-emphasis-high ic-typography {
+  --ic-typography-color: var(--ic-data-table-text-high-emphasis);
+
   font-weight: var(--ic-font-weight-bold);
 }
 
 .pagination-container {
-  background-color: var(--ic-architectural-40);
-  border-top: var(--ic-border-light);
+  background-color: var(--ic-data-table-pagination-bar-background-color);
+  border-top: var(--ic-space-1px) solid
+    var(--ic-data-table-pagination-bar-keyline);
 }
 
 .screen-reader-sort-text,
@@ -283,7 +326,7 @@ td.table-density-spacious {
 
 .updating-state {
   padding: 0;
-  border-bottom: var(--ic-border-light);
+  border-bottom: var(--ic-space-1px) solid var(--ic-data-table-header-keyline);
 }
 
 .updating-state-headers {
@@ -295,11 +338,12 @@ td.table-density-spacious {
   left: calc(50% - 5.9741rem);
   opacity: 0;
   transition: opacity var(--ic-transition-duration-slow);
+  z-index: calc(var(--ic-z-index-dialog) - 1);
 }
 
 .loading.show-background {
-  background-color: var(--ic-architectural-white);
-  border: var(--ic-border-light);
+  background-color: var(--ic-data-table-overlay-background);
+  border: var(--ic-space-1px) solid var(--ic-data-table-overlay-border);
 }
 
 .loading.show {
@@ -313,6 +357,26 @@ td.table-density-spacious {
   margin-right: var(--ic-space-xxs);
 }
 
+.column-header .icon > svg,
+.column-header ::slotted(svg) {
+  fill: var(--ic-data-table-icon);
+}
+
+.table-cell .icon > svg,
+.table-cell ::slotted(svg) {
+  fill: var(--ic-data-table-icon-default-emphasis);
+}
+
+.cell-emphasis-high .icon > svg,
+.cell-emphasis-high ::slotted(svg) {
+  fill: var(--ic-data-table-icon-high-emphasis);
+}
+
+.cell-emphasis-low .icon > svg,
+.cell-emphasis-low ::slotted(svg) {
+  fill: var(--ic-data-table-icon-low-emphasis);
+}
+
 .column-header-alignment-right > .icon,
 .row-header-alignment-right > .icon,
 .cell-alignment-right > .icon,
@@ -323,8 +387,11 @@ td.table-density-spacious {
 }
 
 .column-header-alignment-center > ic-typography,
+.column-header-alignment-center > .cell-text-wrapper,
 .row-header-alignment-right > ic-typography,
-.cell-alignment-center > ic-typography {
+.row-header-alignment-right > .cell-text-wrapper,
+.cell-alignment-center > ic-typography,
+.cell-alignment-center > .cell-text-wrapper {
   flex: 1;
 }
 
@@ -351,9 +418,96 @@ td.table-density-spacious {
   width: 100%;
 }
 
-@media screen and (min-width: 576px) {
+.action-element {
+  display: flex;
+  justify-content: right;
+}
+
+.cell-grid-wrapper {
+  display: grid;
+  grid-template-columns: auto auto;
+}
+
+.loading-overlay {
+  visibility: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--ic-data-table-loading-indicator-overlay-background);
+  z-index: calc(var(--ic-z-index-dialog) - 2);
+  opacity: 0;
+  transition: opacity var(--ic-transition-duration-slow);
+}
+
+.loading-overlay.show {
+  visibility: visible;
+  opacity: 0.6;
+}
+
+.sr-only {
+  position: absolute;
+  left: -9999px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .loading-overlay {
+    transition: none;
+  }
+}
+
+.cell-text-wrapper {
+  overflow: hidden;
+}
+
+.cell-text-wrapper > ic-typography {
+  margin-left: 2px;
+}
+
+.cell-text-no-wrap {
+  word-wrap: initial;
+}
+
+.cell-container-with-description {
+  display: flex;
+  flex-direction: row;
+}
+
+.cell-description {
+  display: flex;
+  flex-direction: row;
+  margin-top: var(--ic-space-xxs);
+  word-break: break-all;
+}
+
+.cell-description-text {
+  color: var(--ic-color-secondary-text);
+}
+
+.cell-description-icon {
+  padding-right: var(--ic-space-xs);
+}
+
+.cell-description-icon > svg {
+  height: calc(var(--ic-space-lg) - var(--ic-space-xxs));
+  width: calc(var(--ic-space-lg) - var(--ic-space-xxs));
+  display: flex;
+}
+
+@media screen and (min-width: 577px) {
   .column-header-inner-container {
     display: flex;
     align-items: center;
   }
 }
+
+@media screen and (max-width: 577px) {
+  .cell-icon {
+    flex-wrap: wrap;
+  }
+
+  .cell-description-icon {
+    padding-right: 0;
+  }
+}