@sapudex/web-components 2.0.0 → 2.1.0

package/cypress/specs/CountrySelector.cy.tsx

@@ -0,0 +1,215 @@
+import UDExCountrySelector from "../../src/CountrySelector.js";
+
+const defaultCountrySelector = <UDExCountrySelector	id="default"
+    searchPlaceholder="Search Countries and Regions"
+    label="Countries"
+    blockedCountryCodes="PL">
+</UDExCountrySelector>
+
+const countrySelectorWithoutFlags = <UDExCountrySelector id="country-selector-no-flags"
+    searchPlaceholder="Search Countries and Regions"
+    blockedCountry-Codes="PL"
+    hideFlagImages>
+</UDExCountrySelector>
+
+const countrySelectorWithSupportingText = <UDExCountrySelector
+    id="country-selector-supporting-text"
+    supportingText="Test supporting text"
+    searchPlaceholder="Search Countries and Regions"
+    height="400px">
+</UDExCountrySelector>
+
+describe("CountrySelector", () => {
+  const blockedCountryIsoCode = 'PL';
+  const initialCountryData = {
+    iso: 'FR',
+    phoneFmt: "+xxxx xxxx xxxx",
+    countryName: "France",
+    localName: "France",
+  }
+
+  const countrySelectorNoFlagClass = "udex-country-selector__dropdown--hide-flag";
+  const countrySelectorDisabledClass = "udex-country-selector__trigger--disabled";
+  const countrySelectorReadOnlyClass = "udex-country-selector__trigger--readonly";
+  const countrySelectorDisplayOnlyClass = "udex-country-selector__trigger--displayonly";
+
+  beforeEach(() => {
+    cy.mount(defaultCountrySelector)
+  });
+
+  it("is correctly rendered", () => {
+    cy.get("#default").shadow().find(".udex-country-selector__dropdown").should("be.visible")
+  });
+
+  it("renders flag icon when no country is selected", () => {
+    cy.get("#default").shadow().find(".udex-country-selector__image").should("be.visible")
+  });
+
+  it("renders label", () => {
+    cy.get("#default").shadow().find("udex-text-field").shadow().find(".udex-text-field__label").should("have.text", "Countries")
+  });
+
+  it("renders placeholder in the dropdown's search", () => {
+    cy.get("#default").shadow().find(".udex-country-selector__dropdown").find("udex-search").shadow().find("input").should("have.attr", "placeholder", "Search Countries and Regions")
+  });
+
+  it("renders supporting text", () => {
+    cy.mount(countrySelectorWithSupportingText)
+    cy.get("#country-selector-supporting-text").shadow().find("udex-status-message").shadow().find(".udex-status-message__supporting-text").should("have.text", "Test supporting text")
+  });
+
+  it("renders Standard valueState by default", () => {
+    cy.mount(countrySelectorWithSupportingText)
+    cy.get("#country-selector-supporting-text").should("have.attr", "value-state", "Standard")
+  });
+
+  it("renders Error valueState", () => {
+    cy.mount(<UDExCountrySelector valueState="Error"></UDExCountrySelector>)
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").should("have.attr", "value-state", "Error")
+  });
+
+  it("renders Warning valueState", () => {
+    cy.mount(<UDExCountrySelector valueState="Warning"></UDExCountrySelector>)
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").should("have.attr", "value-state", "Warning")
+  });
+
+  it("renders Success valueState", () => {
+    cy.mount(<UDExCountrySelector valueState="Success"></UDExCountrySelector>)
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").should("have.attr", "value-state", "Success")
+  });
+
+  it('opens the dropdown on trigger click', () => {
+    cy.get("#default").shadow().find("#udexTextField").click()
+    cy.get("#default").shadow().find("#dropdown").should("have.attr", "open")
+  });
+
+  it('closes the dropdown on trigger click', () => {
+    cy.get("#default").shadow().find("#udexTextField").click()
+    cy.get("#default").shadow().find("#udexTextField").click()
+    cy.get("#default").shadow().find("#dropdown").should("not.have.attr", "open")
+  });
+
+  it('closes the dropdown on outside click', () => {
+    cy.get("#default").shadow().find("#udexTextField").click()
+    cy.get("body").click()
+    cy.get("#default").shadow().find("#dropdown").should("not.have.attr", "open")
+  });
+
+  it('closes the dropdown on country selection', () => {
+    cy.get("#default").shadow().find("#udexTextField").click()
+    cy.get("#default").shadow().find("#dropdown").find("udex-list")
+    .find("udex-list-item").first().click()
+    cy.get("#default").shadow().find("#dropdown").should("not.have.attr", "open")
+  });
+
+  it('opens the dropdown on trigger icon click', () => {
+    cy.get("#default").shadow().find("#udexTextField").shadow().find("udex-control-button").click()
+    cy.get("#default").shadow().find("#dropdown").should("have.attr", "open")
+  });
+
+  it('doesnt render blocked country', () => {
+    cy.get("#default").shadow().find("#dropdown").find("udex-list-item[id='PL']").should("not.exist")
+  });
+
+  it('renders readonly country selector', () => {
+    cy.mount(<UDExCountrySelector readonly></UDExCountrySelector>)
+    cy.get("[udex-country-selector]").shadow().find(".udex-country-selector__trigger").should("have.class", countrySelectorReadOnlyClass)
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").shadow().find("input").should("have.attr", "readonly")
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").shadow().find("input").should("have.attr", "aria-readonly", "true")
+  });
+
+  it('renders disabled country selector', () => {
+    cy.mount(<UDExCountrySelector disabled></UDExCountrySelector>)
+    cy.get("[udex-country-selector]").shadow().find(".udex-country-selector__trigger").should("have.class", countrySelectorDisabledClass)
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").shadow().find("input").should("have.attr", "disabled")
+  });
+
+  it('renders displayonly country selector', () => {
+    cy.mount(<UDExCountrySelector displayonly></UDExCountrySelector>)
+    cy.get("[udex-country-selector]").shadow().find(".udex-country-selector__trigger").should("have.class", countrySelectorDisplayOnlyClass)
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").shadow().find("input").should("have.attr", "readonly")
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").shadow().find("input").should("have.attr", "aria-readonly", "true")
+  });
+
+  it('hides trigger icon when displayonly', () => {
+    cy.mount(<UDExCountrySelector displayonly></UDExCountrySelector>)
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").shadow().find("udex-control-button").should("not.be.visible")
+  });
+
+  it('add special class when hideFlagImages is true', () => {
+    cy.mount(countrySelectorWithoutFlags)
+    cy.get("#country-selector-no-flags").shadow().find("#dropdown").find("udex-list")
+    .find("udex-list-item").first().find(".udex-country-selector-item__image").should("not.exist")
+  });
+
+  it('renders initially selected country', () => {
+    cy.mount(<UDExCountrySelector id="country-selector-preselected" preselectedCountry="PL"></UDExCountrySelector>)
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").should("have.attr", "value", "Poland (Polska)")
+  });
+
+  it("emits open/close when dropdown opened/closed", () => {
+    const openHandler = cy.stub().as("openHandler")
+    const closeHandler = cy.stub().as("closeHandler")
+    cy.mount(<UDExCountrySelector onOpen={openHandler} onClose={closeHandler}></UDExCountrySelector>)
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").click()
+    cy.get("@openHandler").should("have.been.called")
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").click()
+    cy.get("@closeHandler").should("have.been.called")
+  });
+
+  it('emits change-search when search field typing', () => {
+    const changeHandler = cy.stub().as("changeHandler")
+    document.addEventListener("change-search", changeHandler)
+    cy.get("#default").shadow().find("#udexTextField").click()
+    cy.get("#default").shadow().find("udex-search").shadow().find(".udex-search__field").click().realPress("p").realPress("o").realPress("l").realPress("a")
+    cy.get("@changeHandler").should("have.been.called")
+  });
+
+  it("emits reset-search when search reset button is clicked", () => {
+    const resetHandler = cy.stub().as("resetHandler")
+    document.addEventListener("reset-search", resetHandler)
+    cy.get("#default").shadow().find("#udexTextField").click()
+    cy.get("#default").shadow().find("udex-search").shadow().find(".udex-search__field").click().realPress("p").realPress("o").realPress("l").realPress("a")
+    cy.get("#default").shadow().find("udex-search").shadow().find(".udex-search__reset-button").click()
+    cy.get("@resetHandler").should("have.been.called")
+  });
+
+  it('emits submit-search when user presses Enter key in the search', () => {
+    const submitHandler = cy.stub().as("submitHandler")
+    document.addEventListener("submit-search", submitHandler)
+    cy.get("#default").shadow().find("#udexTextField").click()
+    cy.get("#default").shadow().find("udex-search").shadow().find(".udex-search__field").click().realPress("p").realPress("o").realPress("l").realPress("a").realPress("Enter")
+    cy.get("@submitHandler").should("have.been.called")
+  });
+
+  it('emits selection-change when list item is clicked', () => {
+    const selectionHandler = cy.stub().as("selectionHandler")
+    cy.mount(<UDExCountrySelector onSelectionChange={selectionHandler}></UDExCountrySelector>)
+    cy.get("[udex-country-selector]").shadow().find("#udexTextField").click()
+    cy.get("[udex-country-selector]").shadow().find("#dropdown").find("udex-list")
+    .find("udex-list-item").first().click()
+
+    cy.get("@selectionHandler").should("have.been.called")
+  });
+
+  it('focus on element with corresponding starting letter', () => {
+    cy.get("#default").shadow().find("#udexTextField").click().realPress("Tab").realPress("a").realPress("a").realPress("Enter")
+    cy.get("#default").shadow().find("#udexTextField").should("have.attr", "value", "Albania (Shqipëria)")
+  });
+
+  it('focus on element with corresponding starting letter filtered by search value', () => {
+    cy.get("#default").shadow().find("#udexTextField").click()
+    cy.get("#default").shadow().find("udex-search").shadow().find(".udex-search__field").click().realPress("p").realPress("o").realPress("l").realPress("a").realPress("Tab").realPress("Tab").realPress("Enter")
+    cy.get("#default").shadow().find("#udexTextField").should("have.attr", "value", "Afghanistan (افغانستان)")
+  });
+
+  it('keyboard focus navigation for `ArrowDown`', () => {
+    cy.get("#default").shadow().find("#udexTextField").click().realPress("Tab").realPress("a").realPress("{downarrow}").realPress("Enter")
+    cy.get("#default").shadow().find("#udexTextField").should("have.attr", "value", "Albania (Shqipëria)")
+  });
+
+  it('keyboard focus navigation for `ArrowUp`', () => {
+    cy.get("#default").shadow().find("#udexTextField").click().realPress("Tab").realPress("a").realPress("{downarrow}").realPress("{downarrow}").realPress("{uparrow}").realPress("Enter")
+    cy.get("#default").shadow().find("#udexTextField").should("have.attr", "value", "Albania (Shqipëria)")
+  });
+});

package/cypress/specs/Table.cy.tsx

@@ -0,0 +1,361 @@
+import UDExTable from "../../src/Table.js";
+import UDExTableHeaderRow from "../../src/TableHeaderRow.js";
+import UDExTableHeaderCell from "../../src/TableHeaderCell.js";
+import UDExTableRow from "../../src/TableRow.js";
+import UDExTableGroupRow from "../../src/TableGroupRow.js";
+import UDExTableCell from "../../src/TableCell.js";
+import UDExButton from "../../src/Button.js";
+import UDExLink from "../../src/Link.js";
+import UDExRatingIndicator from "../../src/RatingIndicator.js";
+
+const defaultTable = <UDExTable
+    id="table"
+    sticky-header
+    heading="Microsoft Surface and Apple MacBook"
+    accessibleName="table devices"
+    maxHeight="200px">
+      <UDExTableHeaderRow id="tableHeaderRow" slot="headerRow">
+        <UDExTableHeaderCell
+          id="tableHeaderCell"
+          icon-start="sap-icon://bell"
+          icon-end="sap-icon://accessibility"
+          highlighted>
+          Product
+        </UDExTableHeaderCell>
+        <UDExTableHeaderCell>Processor</UDExTableHeaderCell>
+        <UDExTableHeaderCell>Display</UDExTableHeaderCell>
+        <UDExTableHeaderCell>Resolution</UDExTableHeaderCell>
+        <UDExTableHeaderCell>RAM</UDExTableHeaderCell>
+        <UDExTableHeaderCell>Storage</UDExTableHeaderCell>
+        <UDExTableHeaderCell>Rating</UDExTableHeaderCell>
+        <UDExTableHeaderCell highlighted>Price</UDExTableHeaderCell>
+        <UDExTableHeaderCell>Action</UDExTableHeaderCell>
+      </UDExTableHeaderRow>
+      <UDExTableRow id="table-row">
+        <UDExTableCell id="table-cell" icon="sap-icon://bell">
+          <i><UDExLink id="link-row1">SURFACE PRO4</UDExLink></i>
+        </UDExTableCell>
+        <UDExTableCell><UDExButton id="button-row1" size="Small">Intel Core M3, i5</UDExButton></UDExTableCell>
+        <UDExTableCell>12.3 inches</UDExTableCell>
+        <UDExTableCell>2736 x 1824</UDExTableCell>
+        <UDExTableCell>4GB, 8GB, 16GB</UDExTableCell>
+        <UDExTableCell>256GB, 512GB, 1TB</UDExTableCell>
+        <UDExTableCell><UDExRatingIndicator id="rating-row1" class="rating-indicator" value={5} max={5} readonly display="Desktop"></UDExRatingIndicator></UDExTableCell>
+        <UDExTableCell _highlighted><span class="price">$899</span></UDExTableCell>
+        <UDExTableCell><UDExButton size="Small">Buy now</UDExButton></UDExTableCell>
+      </UDExTableRow>
+      <UDExTableRow>
+        <UDExTableCell><UDExButton id="button-row2" size="Small">SURFACE PRO3</UDExButton></UDExTableCell>
+        <UDExTableCell><UDExLink id="link-row2">Intel Core i3, Core i7</UDExLink></UDExTableCell>
+        <UDExTableCell>12 inches</UDExTableCell>
+        <UDExTableCell>2160 x 1440</UDExTableCell>
+        <UDExTableCell>4GB, 8GB</UDExTableCell>
+        <UDExTableCell>128GB, 256GB, 512GB</UDExTableCell>
+        <UDExTableCell><UDExRatingIndicator class="rating-indicator" value={5} max={5} readonly display="Desktop"></UDExRatingIndicator></UDExTableCell>
+        <UDExTableCell _highlighted><span class="sale">$799</span></UDExTableCell>
+        <UDExTableCell><UDExButton size="Small">Buy now</UDExButton></UDExTableCell>
+      </UDExTableRow>
+      <UDExTableRow>
+        <UDExTableCell><i>MACBOOK AIR</i></UDExTableCell>
+        <UDExTableCell>Intel Core i5 or i7</UDExTableCell>
+        <UDExTableCell>13.3 inches</UDExTableCell>
+        <UDExTableCell>1440 x 900</UDExTableCell>
+        <UDExTableCell>8GB</UDExTableCell>
+        <UDExTableCell>128GB, 256GB, 512GB</UDExTableCell>
+        <UDExTableCell><UDExRatingIndicator class="rating-indicator" value={5} max={5} readonly display="Desktop"></UDExRatingIndicator></UDExTableCell>
+        <UDExTableCell _highlighted><span class="price">$899</span></UDExTableCell>
+        <UDExTableCell><UDExButton size="Small">Buy now</UDExButton></UDExTableCell>
+      </UDExTableRow>
+      <UDExTableRow>
+        <UDExTableCell><i>MACBOOK PRO</i></UDExTableCell>
+        <UDExTableCell>Intel Core i5 or i7</UDExTableCell>
+        <UDExTableCell>13.3 inches</UDExTableCell>
+        <UDExTableCell>2560 x 1600</UDExTableCell>
+        <UDExTableCell>8GB, 16GB</UDExTableCell>
+        <UDExTableCell>256GB, 512GB, 1TB</UDExTableCell>
+        <UDExTableCell><UDExRatingIndicator class="rating-indicator" value={5} max={5} readonly display="Desktop"></UDExRatingIndicator></UDExTableCell>
+        <UDExTableCell _highlighted><span class="price">$1,299</span></UDExTableCell>
+        <UDExTableCell><UDExButton size="Small">Buy now</UDExButton></UDExTableCell>
+      </UDExTableRow>
+      <UDExTableGroupRow
+        id="table-group-row"
+        group-title="Apple MacBook"
+        collapsible>
+        <UDExTableRow>
+          <UDExTableCell><i>MACBOOK AIR</i></UDExTableCell>
+          <UDExTableCell>Intel Core i5 or i7</UDExTableCell>
+          <UDExTableCell>13.3 inches</UDExTableCell>
+          <UDExTableCell>1440 x 900</UDExTableCell>
+          <UDExTableCell>8GB</UDExTableCell>
+          <UDExTableCell>128GB, 256GB, 512GB</UDExTableCell>
+          <UDExTableCell><UDExRatingIndicator class="rating-indicator" value={5} max={5} readonly display="Desktop"></UDExRatingIndicator></UDExTableCell>
+          <UDExTableCell><span class="price">$899</span></UDExTableCell>
+          <UDExTableCell><UDExButton size="Small">Buy now</UDExButton></UDExTableCell>
+        </UDExTableRow>
+        <UDExTableRow>
+          <UDExTableCell><i>MACBOOK PRO</i></UDExTableCell>
+          <UDExTableCell>Intel Core i5 or i7</UDExTableCell>
+          <UDExTableCell>13.3 inches</UDExTableCell>
+          <UDExTableCell>2560 x 1600</UDExTableCell>
+          <UDExTableCell>8GB, 16GB</UDExTableCell>
+          <UDExTableCell>256GB, 512GB, 1TB</UDExTableCell>
+          <UDExTableCell><UDExRatingIndicator class="rating-indicator" value={5} max={5} readonly display="Desktop"></UDExRatingIndicator></UDExTableCell>
+          <UDExTableCell><span class="price">$1,299</span></UDExTableCell>
+          <UDExTableCell><UDExButton size="Small">Buy now</UDExButton></UDExTableCell>
+        </UDExTableRow>
+        <UDExTableRow>
+          <UDExTableCell><i>MACBOOK AIR</i></UDExTableCell>
+          <UDExTableCell>Intel Core i5 or i7</UDExTableCell>
+          <UDExTableCell>13.3 inches</UDExTableCell>
+          <UDExTableCell>1440 x 900</UDExTableCell>
+          <UDExTableCell>8GB</UDExTableCell>
+          <UDExTableCell>128GB, 256GB, 512GB</UDExTableCell>
+          <UDExTableCell><UDExRatingIndicator class="rating-indicator" value={5} max={5} readonly display="Desktop"></UDExRatingIndicator></UDExTableCell>
+          <UDExTableCell><span class="price">$899</span></UDExTableCell>
+          <UDExTableCell><UDExButton size="Small">Buy now</UDExButton></UDExTableCell>
+        </UDExTableRow>
+      </UDExTableGroupRow>
+      <UDExButton size="Small" icon="sap-icon://retail-store" design="Secondary" slot="actions">Back to Store</UDExButton>
+      <UDExButton size="Small" design="Tertiary" icon="sap-icon://cart" slot="actions">Cart</UDExButton>
+      <div class="footnotes" slot="footnotes">
+        <p><UDExLink id="UDExLink-example" href="/" design="Default">Microsoft Surface</UDExLink>: It's a line of touchscreen-based personal computers and interactive whiteboards designed and developed by Microsoft.</p>
+        <p><UDExLink id="UDExLink-example" href="/" design="Default">Apple MacBook</UDExLink>: It's known for its sleek design, high-quality performance, and integration with the macOS operating system.</p>
+      </div>
+  </UDExTable>
+
+const noDataTableDefault = <UDExTable
+    id="table-no-data-default">
+    <UDExTableHeaderRow slot="headerRow">
+      <UDExTableHeaderCell
+        id="tableHeaderCell"
+        icon-start="sap-icon://bell"
+        icon-end="sap-icon://accessibility"
+        highlighted>
+        Product
+      </UDExTableHeaderCell>
+      <UDExTableHeaderCell>Processor</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Display</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Resolution</UDExTableHeaderCell>
+      <UDExTableHeaderCell>RAM</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Storage</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Rating</UDExTableHeaderCell>
+      <UDExTableHeaderCell highlighted>Price</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Action</UDExTableHeaderCell>
+    </UDExTableHeaderRow>
+  </UDExTable>
+
+const noDataTable = <UDExTable
+    id="table-no-data">
+    <UDExTableHeaderRow slot="headerRow">
+      <UDExTableHeaderCell
+        id="tableHeaderCell"
+        icon-start="sap-icon://bell"
+        icon-end="sap-icon://accessibility"
+        highlighted>
+        Product
+      </UDExTableHeaderCell>
+      <UDExTableHeaderCell>Processor</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Display</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Resolution</UDExTableHeaderCell>
+      <UDExTableHeaderCell>RAM</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Storage</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Rating</UDExTableHeaderCell>
+      <UDExTableHeaderCell highlighted>Price</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Action</UDExTableHeaderCell>
+    </UDExTableHeaderRow>
+      <p id="customNoData" slot="noData">No custom data found</p>
+  </UDExTable>
+
+
+const loadingTable =  <UDExTable loading={true}
+    id="table-loading">
+    <UDExTableHeaderRow slot="headerRow">
+      <UDExTableHeaderCell
+        id="tableHeaderCell"
+        icon-start="sap-icon://bell"
+        icon-end="sap-icon://accessibility"
+        highlighted>
+        Product
+      </UDExTableHeaderCell>
+      <UDExTableHeaderCell>Processor</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Display</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Resolution</UDExTableHeaderCell>
+      <UDExTableHeaderCell>RAM</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Storage</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Rating</UDExTableHeaderCell>
+      <UDExTableHeaderCell highlighted>Price</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Action</UDExTableHeaderCell>
+    </UDExTableHeaderRow>
+  </UDExTable>
+
+const customWidthTable =  <UDExTable customColumns="50px 50px 50px"
+    id="table-custom-width">
+    <UDExTableHeaderRow slot="headerRow">
+      <UDExTableHeaderCell
+        id="tableHeaderCell"
+        icon-start="sap-icon://bell"
+        icon-end="sap-icon://accessibility"
+        highlighted>
+        Product
+      </UDExTableHeaderCell>
+      <UDExTableHeaderCell>Processor</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Display</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Resolution</UDExTableHeaderCell>
+    </UDExTableHeaderRow>
+    <UDExTableRow>
+      <UDExTableCell>Cell1</UDExTableCell>
+      <UDExTableCell>Cell2</UDExTableCell>
+      <UDExTableCell>Cell3</UDExTableCell>
+    </UDExTableRow>
+    <UDExTableRow>
+      <UDExTableCell>Cell3</UDExTableCell>
+      <UDExTableCell>Cell4</UDExTableCell>
+      <UDExTableCell>Cell5</UDExTableCell>
+    </UDExTableRow>
+  </UDExTable>
+
+
+describe("Table", () => {
+  beforeEach(() => {
+   cy.mount(defaultTable)
+  });
+
+  it("is correctly rendered", () => {
+    cy.get("#table").shadow().find(".udex-table").should("be.visible")
+  });
+
+  it("renders rows slot",  () => {
+    cy.get("#table").shadow().find("slot").should("have.length", 4)
+  });
+
+  it("renders header row slot",  () => {
+    cy.get("#table").shadow().find('slot[name="headerRow"]').should("have.length", 1)
+  });
+
+  it("renders actions slot",  () => {
+    cy.get("#table").shadow().find('.udex-table-toolbar__actions > slot[name="actions"]').should("have.length", 1)
+  });
+
+  it("renders footnotes slot",  () => {
+    cy.get("#table").shadow().find('.udex-table-footnotes > slot[name="footnotes"]').should("have.length", 1)
+  });
+
+  it("renders default no data content", () => {
+    cy.mount(noDataTableDefault)
+    cy.get("#table-no-data-default").shadow().find(".udex-table__no-data").should("have.text", "No data found")
+  });
+
+  it("renders custom no data slot", () => {
+    cy.mount(noDataTable)
+    cy.get("#table-no-data").shadow().find('.udex-table__no-data > slot[name="noData"]').should("have.length", 1)
+    expect(cy.get("#table-no-data").find("#customNoData").should("be.visible"))
+  });
+
+  it("renders header",  () => {
+    cy.get("#table").shadow().find(".udex-table-toolbar__title").should("have.text", "Microsoft Surface and Apple MacBook")
+  });
+
+  it("tests render the right maximum height",  () => {
+    cy.get("#table").shadow().find(".udex-table").then($tableWrap => {
+      const { maxHeight: tableMaxHeight } = window.getComputedStyle($tableWrap[0], "max-height")
+      expect(tableMaxHeight).eqls("200px")
+    })
+  });
+
+  it("tests render the sticky header",  () => {
+    cy.get("#table").shadow().find(".udex-table__header-holder").then($tableHeaderWrap => {
+      const { position: tableHeaderPosition } = window.getComputedStyle($tableHeaderWrap[0], "position")
+      expect(tableHeaderPosition).eqls("sticky")
+    })
+  });
+
+  it("renders the loading indicator", () => {
+    cy.mount(loadingTable)
+    cy.get("#table-loading").shadow().find("ui5-busy-indicator").should("be.visible")
+  });
+
+  it("renders accessible name",  () => {
+    cy.get("#table").shadow().find(".udex-table").should("have.attr", "aria-label", "table devices")
+  });
+
+  it("renders the right amount of header rows",  () => {
+    cy.get("#table").find("udex-table-header-row").should("have.length", 1)
+  });
+
+  it("renders correct number of table-header-row-cell", () => {
+    cy.get("#table").find("#tableHeaderRow").find("udex-table-header-cell").should("have.length", 9)
+  });
+
+  it("renders correct number of table-row-cell", () => {
+    cy.get("#table").find("#table-row").find("udex-table-cell").should("have.length", 9)
+  });
+
+  it("renders correct number of rows of group", () => {
+   cy.get("#table").find("#table-group-row").find("udex-table-row").should("have.length", 3)
+  });
+
+  it("renders correct title of group button", () => {
+    cy.get("#table").find("#table-group-row").shadow().find(".udex-table-grow-btn").should("have.text", "Apple MacBook")
+  });
+
+  it("test hidden rows of group", () => {
+    cy.get("#table").find("#table-group-row").find(".udex-table-grow-rows").should("not.exist")
+  });
+
+  it("renders correct content in the header cell", () => {
+    cy.get("#table").find("#tableHeaderRow").find("udex-table-header-cell").first().should("have.text", "Product")
+  });
+
+  it("renders correct content in the cell", () => {
+    cy.get("#table").find("#table-row").find("udex-table-cell").first().should("have.text", "SURFACE PRO4")
+  });
+
+  it("renders icons in the header cell", () => {
+    cy.get("#table").find("#tableHeaderCell").shadow().find("ui5-icon").first().should("have.attr", "name", "sap-icon://bell")
+    cy.get("#table").find("#tableHeaderCell").shadow().find("ui5-icon").eq(1).should("have.attr", "name", "sap-icon://accessibility")
+  });
+
+  it("renders icons in the cell", () => {
+    cy.get("#table").find("#table-cell").shadow().find(".udex-table-cell__icon").should("have.attr", "name", "sap-icon://bell")
+  });
+
+  it("renders columns with custom width when specified",  () => {
+    cy.mount(customWidthTable)
+    cy.get("#table-custom-width").find("udex-table-row").find("udex-table-cell").then($tableCell => {
+      const { width: cellWidth } = window.getComputedStyle($tableCell[0], "width")
+      expect(cellWidth).eqls("50px")
+    })
+  });
+
+  it("moves focus to previous interactive element after \"Arrow Left\" press", () => {
+    cy.get("#table").find("#table-row").find("udex-table-cell").eq(6).find("#rating-row1").click({force: true}).realPress("{leftarrow}")
+    cy.get("#table").find("#table-row").find("udex-table-cell").eq(1).find("#button-row1").shadow().find("button").then($button => {
+      const { borderColor: buttonBorder } = window.getComputedStyle($button[0], "::after");
+      expect(buttonBorder).eqls("rgb(255, 255, 255)")
+    })
+  });
+
+  it("moves focus to next interactive element after \"Arrow Right\" press", () => {
+    cy.get("#table").find("#table-row").find("udex-table-cell").eq(0).find("#link-row1").click({force: true}).realPress("{rightarrow}")
+    cy.get("#table").find("#table-row").find("udex-table-cell").eq(1).find("#button-row1").shadow().find("button").then($button => {
+      const { borderColor: buttonBorder } = window.getComputedStyle($button[0], "::after");
+      expect(buttonBorder).eqls("rgb(255, 255, 255)")
+    })
+  });
+
+  it("moves focus to next interactive element below after \"Arrow Down\" press",  () => {
+    cy.get("#table").find("#table-row").find("udex-table-cell").eq(0).find("#link-row1").click({force: true}).realPress("{downarrow}")
+    cy.get("#table").find("udex-table-row").eq(1).find("udex-table-cell").eq(0).find("#button-row2").shadow().find("button").then($button => {
+      const { borderColor: buttonBorder } = window.getComputedStyle($button[0], "::after");
+      expect(buttonBorder).eqls("rgb(255, 255, 255)")
+    })
+  });
+
+  it("moves focus to next interactive element above after \"Arrow Up\" press",  () => {
+    cy.get("#table").find("udex-table-row").eq(1).find("udex-table-cell").eq(0).find("#button-row2").click({force: true}).realPress("{uparrow}")
+    cy.get("#table").find("#table-row").find("udex-table-cell").eq(0).find("#link-row1").shadow().find("a").then($link => {
+      const { outlineColor } = window.getComputedStyle($link[0]);
+      expect(outlineColor).eqls("rgb(34, 53, 72)")
+    })
+  });
+});

package/cypress/specs/Upload.cy.tsx

@@ -18,6 +18,15 @@ const requiredUpload = <UDExUpload
   required>
 </UDExUpload>
 
+const disabledUpload = <UDExUpload 
+  id="disabledUpload" 
+  additionalText="Max 10MB files are allowed. Only support .jpg, .png and .svg files"
+  uploadButtonText="Choose file(s)"
+  uploadTitle="Upload title"
+  multiple={false}
+  disabled>
+</UDExUpload>
+
 const singleUpload = <UDExUpload 
   id="singleUpload" 
   additionalText="Max 10MB files are allowed. Only support .jpg, .png and .svg files"
@@ -59,6 +68,14 @@ describe("Upload", () => {
     });
   })
 
+  describe("Disabled", () => {
+    it("correctly disabled button for uploading when specified", () => {
+      cy.mount(disabledUpload)
+      cy.get("#disabledUpload").shadow().find("udex-button").should("have.attr", "disabled")
+      cy.get("#disabledUpload").shadow().find("udex-button").should("have.attr", "aria-disabled", "true")
+    });
+  })
+
   describe("Single", () => {
     beforeEach(() => {
       cy.mount(singleUpload)

package/dist/AssetsVariables.js

@@ -1,7 +1,7 @@
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 const variablesOverwrite = `:root {
   /* Browser Scrollbar */
-  ${getScopedVarName("browser_scrollbar_border_radius")}: var(--udexRadiusM, 8px);
+  ${getScopedVarName("--browser_scrollbar_border_radius")}: var(--udexRadiusM, 8px);
 
   /* Tooltip */
   ${getScopedVarName("--_ui5_popover_box_shadow")}: 0px 0px 0px 1px var(--udexColorGrey4);

package/dist/AssetsVariables.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetsVariables.js","sourceRoot":"","sources":["../src/AssetsVariables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qDAAqD,CAAC;AAEvF,MAAM,kBAAkB,GAAG;;IAEvB,gBAAgB,CAAC,iCAAiC,CAAC;;;IAGnD,gBAAgB,CAAC,2BAA2B,CAAC;;;IAG7C,gBAAgB,CAAC,0BAA0B,CAAC;;;IAG5C,gBAAgB,CAAC,sCAAsC,CAAC;IACxD,gBAAgB,CAAC,kCAAkC,CAAC;;;IAGpD,gBAAgB,CAAC,4CAA4C,CAAC;IAC9D,gBAAgB,CAAC,gCAAgC,CAAC;IAClD,gBAAgB,CAAC,wCAAwC,CAAC;IAC1D,gBAAgB,CAAC,uCAAuC,CAAC;IACzD,gBAAgB,CAAC,6CAA6C,CAAC;IAC/D,gBAAgB,CAAC,oDAAoD,CAAC;IACtE,gBAAgB,CAAC,gDAAgD,CAAC;IAClE,gBAAgB,CAAC,gCAAgC,CAAC;;;MAGhD,gBAAgB,CAAC,4CAA4C,CAAC;;;;;;;MAO9D,gBAAgB,CAAC,uBAAuB,CAAC;MACzC,gBAAgB,CAAC,wBAAwB,CAAC;MAC1C,gBAAgB,CAAC,oCAAoC,CAAC;MACtD,gBAAgB,CAAC,oCAAoC,CAAC;MACtD,gBAAgB,CAAC,+BAA+B,CAAC;MACjD,gBAAgB,CAAC,2CAA2C,CAAC;MAC7D,gBAAgB,CAAC,8BAA8B,CAAC;MAChD,gBAAgB,CAAC,+BAA+B,CAAC;MACjD,gBAAgB,CAAC,iCAAiC,CAAC;MACnD,gBAAgB,CAAC,uCAAuC,CAAC;MACzD,gBAAgB,CAAC,iCAAiC,CAAC;MACnD,gBAAgB,CAAC,gCAAgC,CAAC;MAClD,gBAAgB,CAAC,gCAAgC,CAAC;MAClD,gBAAgB,CAAC,+BAA+B,CAAC;;CAEtD,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { getScopedVarName } from \"@ui5/webcomponents-base/dist/CustomElementsScope.js\";\n\nconst variablesOverwrite = `:root {\n  /* Browser Scrollbar */\n  ${getScopedVarName(\"browser_scrollbar_border_radius\")}: var(--udexRadiusM, 8px);\n\n  /* Tooltip */\n  ${getScopedVarName(\"--_ui5_popover_box_shadow\")}: 0px 0px 0px 1px var(--udexColorGrey4);\n\n  /* Tokenizer */\n  ${getScopedVarName(\"--_ui5_tokenizer_padding\")}: var(--udexSpacer12, 12px);\n\n  /* Carousel */\n  ${getScopedVarName(\"--ui5_carousel_active_dot_background\")}: var(--udexColorBlue8, #0057D2);\n  ${getScopedVarName(\"--ui5_carousel_active_dot_border\")}: 1px solid var(--udexColorBlue8, #0057D2);\n\n  /* Calendar & Date Picker */\n  ${getScopedVarName(\"--_ui5_daypicker_daynames_container_height\")}: 42px;\n  ${getScopedVarName(\"--_ui5_daypicker_dayname_color\")}: var(--udexColorGrey6, #5B738B);\n  ${getScopedVarName(\"--_ui5_daypicker_item_now_border_color\")}: var(--udexColorPink8, #A100C2);\n  ${getScopedVarName(\"--_ui5_daypicker_item_weeekend_filter\")}: none;\n  ${getScopedVarName(\"--_ui5_daypicker_item_select_between_border\")}: 1px solid var(--udexColorBlue9, #0040B0);\n  ${getScopedVarName(\"--_ui5_calendar_header_middle_button_focus_outline\")}: 1px solid var(--udexColorBlue9, #0040B0);\n  ${getScopedVarName(\"--_ui5_calendar_header_arrow_button_box_shadow\")}: none;\n  ${getScopedVarName(\"--_ui5_calendar_header_padding\")}: 0;\n\n  udex-search {\n    ${getScopedVarName(\"--_ui5_button_pressed_focused_border_color\")}: transparent;\n  }\n\n  .sapUiSizeCompact,\n  .ui5-content-density-compact,\n  [data-ui5-compact-size] {\n    /* Calendar & Date Picker */\n    ${getScopedVarName(\"--_ui5_calendar_width\")}: 371px;\n    ${getScopedVarName(\"--_ui5_calendar_height\")}: auto;\n    ${getScopedVarName(\"--_ui5_calendar_top_bottom_padding\")}: var(--udexSpacer8, 8px);\n    ${getScopedVarName(\"--_ui5_calendar_left_right_padding\")}: var(--udexSpacer8, 8px);\n    ${getScopedVarName(\"--_ui5_calendar_header_height\")}: 42px;\n    ${getScopedVarName(\"--_ui5_calendar_header_arrow_button_width\")}: 42px;\n    ${getScopedVarName(\"--_ui5_day_picker_item_width\")}: 42px;\n    ${getScopedVarName(\"--_ui5_day_picker_item_height\")}: 42px;\n    ${getScopedVarName(\"--_ui5_daypicker_weekname_color\")}: var(--udexColorGrey6, #5B738B);\n    ${getScopedVarName(\"--_ui5_daypicker_item_weeekend_filter\")}: none;\n    ${getScopedVarName(\"--_ui5_month_picker_item_height\")}: 36px;\n    ${getScopedVarName(\"--_ui5_monthpicker_item_margin\")}: -8px 0 var(--udexSpacer16, 16px) 0;\n    ${getScopedVarName(\"--_ui5_year_picker_item_height\")}: 36px;\n    ${getScopedVarName(\"--_ui5_yearpicker_item_margin\")}: -8px 0 var(--udexSpacer16, 16px) 0;\n  }\n`;\n\nexport default variablesOverwrite;\n"]}
+{"version":3,"file":"AssetsVariables.js","sourceRoot":"","sources":["../src/AssetsVariables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qDAAqD,CAAC;AAEvF,MAAM,kBAAkB,GAAG;;IAEvB,gBAAgB,CAAC,mCAAmC,CAAC;;;IAGrD,gBAAgB,CAAC,2BAA2B,CAAC;;;IAG7C,gBAAgB,CAAC,0BAA0B,CAAC;;;IAG5C,gBAAgB,CAAC,sCAAsC,CAAC;IACxD,gBAAgB,CAAC,kCAAkC,CAAC;;;IAGpD,gBAAgB,CAAC,4CAA4C,CAAC;IAC9D,gBAAgB,CAAC,gCAAgC,CAAC;IAClD,gBAAgB,CAAC,wCAAwC,CAAC;IAC1D,gBAAgB,CAAC,uCAAuC,CAAC;IACzD,gBAAgB,CAAC,6CAA6C,CAAC;IAC/D,gBAAgB,CAAC,oDAAoD,CAAC;IACtE,gBAAgB,CAAC,gDAAgD,CAAC;IAClE,gBAAgB,CAAC,gCAAgC,CAAC;;;MAGhD,gBAAgB,CAAC,4CAA4C,CAAC;;;;;;;MAO9D,gBAAgB,CAAC,uBAAuB,CAAC;MACzC,gBAAgB,CAAC,wBAAwB,CAAC;MAC1C,gBAAgB,CAAC,oCAAoC,CAAC;MACtD,gBAAgB,CAAC,oCAAoC,CAAC;MACtD,gBAAgB,CAAC,+BAA+B,CAAC;MACjD,gBAAgB,CAAC,2CAA2C,CAAC;MAC7D,gBAAgB,CAAC,8BAA8B,CAAC;MAChD,gBAAgB,CAAC,+BAA+B,CAAC;MACjD,gBAAgB,CAAC,iCAAiC,CAAC;MACnD,gBAAgB,CAAC,uCAAuC,CAAC;MACzD,gBAAgB,CAAC,iCAAiC,CAAC;MACnD,gBAAgB,CAAC,gCAAgC,CAAC;MAClD,gBAAgB,CAAC,gCAAgC,CAAC;MAClD,gBAAgB,CAAC,+BAA+B,CAAC;;CAEtD,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { getScopedVarName } from \"@ui5/webcomponents-base/dist/CustomElementsScope.js\";\n\nconst variablesOverwrite = `:root {\n  /* Browser Scrollbar */\n  ${getScopedVarName(\"--browser_scrollbar_border_radius\")}: var(--udexRadiusM, 8px);\n\n  /* Tooltip */\n  ${getScopedVarName(\"--_ui5_popover_box_shadow\")}: 0px 0px 0px 1px var(--udexColorGrey4);\n\n  /* Tokenizer */\n  ${getScopedVarName(\"--_ui5_tokenizer_padding\")}: var(--udexSpacer12, 12px);\n\n  /* Carousel */\n  ${getScopedVarName(\"--ui5_carousel_active_dot_background\")}: var(--udexColorBlue8, #0057D2);\n  ${getScopedVarName(\"--ui5_carousel_active_dot_border\")}: 1px solid var(--udexColorBlue8, #0057D2);\n\n  /* Calendar & Date Picker */\n  ${getScopedVarName(\"--_ui5_daypicker_daynames_container_height\")}: 42px;\n  ${getScopedVarName(\"--_ui5_daypicker_dayname_color\")}: var(--udexColorGrey6, #5B738B);\n  ${getScopedVarName(\"--_ui5_daypicker_item_now_border_color\")}: var(--udexColorPink8, #A100C2);\n  ${getScopedVarName(\"--_ui5_daypicker_item_weeekend_filter\")}: none;\n  ${getScopedVarName(\"--_ui5_daypicker_item_select_between_border\")}: 1px solid var(--udexColorBlue9, #0040B0);\n  ${getScopedVarName(\"--_ui5_calendar_header_middle_button_focus_outline\")}: 1px solid var(--udexColorBlue9, #0040B0);\n  ${getScopedVarName(\"--_ui5_calendar_header_arrow_button_box_shadow\")}: none;\n  ${getScopedVarName(\"--_ui5_calendar_header_padding\")}: 0;\n\n  udex-search {\n    ${getScopedVarName(\"--_ui5_button_pressed_focused_border_color\")}: transparent;\n  }\n\n  .sapUiSizeCompact,\n  .ui5-content-density-compact,\n  [data-ui5-compact-size] {\n    /* Calendar & Date Picker */\n    ${getScopedVarName(\"--_ui5_calendar_width\")}: 371px;\n    ${getScopedVarName(\"--_ui5_calendar_height\")}: auto;\n    ${getScopedVarName(\"--_ui5_calendar_top_bottom_padding\")}: var(--udexSpacer8, 8px);\n    ${getScopedVarName(\"--_ui5_calendar_left_right_padding\")}: var(--udexSpacer8, 8px);\n    ${getScopedVarName(\"--_ui5_calendar_header_height\")}: 42px;\n    ${getScopedVarName(\"--_ui5_calendar_header_arrow_button_width\")}: 42px;\n    ${getScopedVarName(\"--_ui5_day_picker_item_width\")}: 42px;\n    ${getScopedVarName(\"--_ui5_day_picker_item_height\")}: 42px;\n    ${getScopedVarName(\"--_ui5_daypicker_weekname_color\")}: var(--udexColorGrey6, #5B738B);\n    ${getScopedVarName(\"--_ui5_daypicker_item_weeekend_filter\")}: none;\n    ${getScopedVarName(\"--_ui5_month_picker_item_height\")}: 36px;\n    ${getScopedVarName(\"--_ui5_monthpicker_item_margin\")}: -8px 0 var(--udexSpacer16, 16px) 0;\n    ${getScopedVarName(\"--_ui5_year_picker_item_height\")}: 36px;\n    ${getScopedVarName(\"--_ui5_yearpicker_item_margin\")}: -8px 0 var(--udexSpacer16, 16px) 0;\n  }\n`;\n\nexport default variablesOverwrite;\n"]}

package/dist/FilterMenu.d.ts

@@ -148,6 +148,13 @@ declare class UDExFilterMenu extends UDExSearchableListBase {
      * @public
      */
     accessibleName?: string;
+    /**
+     * Defines id (or many ids) of the elements that contain the ARIA name of the component.
+     *
+     * @default ""
+     * @public
+     */
+    accessibleNameRef: string;
     /**
      * Allows setting a custom role.
      * @default "None"