feat(component): combobox (#83)

* Refactor data-ids usage. * Update Adobe packages. * Implement ComboBox component * Update and add tests to Select * Implement ProgrressCircle component * Add loadMore support to Popup
action-is-hope · Apr 26, 2023 · f4e7dd9 · f4e7dd9
1 parent 7ba58eb
commit f4e7dd9
Show file tree

Hide file tree

Showing 106 changed files with 7,851 additions and 4,043 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [14.x, 16.x, 18.15.0]
     steps:
       - uses: actions/checkout@v3
       - run: npm ci
@@ -27,7 +27,7 @@ jobs:
     needs: install
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [14.x, 16.x, 18.15.0]
     steps:
       - uses: actions/checkout@v3
       - uses: actions/cache/restore@v3
@@ -43,14 +43,14 @@ jobs:
         id: types-artefact
         with:
           path: st-types
-          key: ${{ matrix.node-version }}-types-artefact-${{ github.ref }}-${{ hashFiles('package-lock.json') }}
+          key: ${{ matrix.node-version }}-types-artefact-${{ github.ref }}-${{ hashFiles('st-types') }}
 
   lint:
     runs-on: ubuntu-latest
     needs: build-types
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [14.x, 16.x, 18.15.0]
     steps:
       - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node-version }}
@@ -69,15 +69,15 @@ jobs:
         id: types-artefact
         with:
           path: st-types
-          key: ${{ matrix.node-version }}-types-artefact-${{ github.ref }}-${{ hashFiles('package-lock.json') }}
+          key: ${{ matrix.node-version }}-types-artefact-${{ github.ref }}-${{ hashFiles('st-types') }}
       - run: npm run lint
 
   typecheck:
     runs-on: ubuntu-latest
     needs: build-types
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [14.x, 16.x, 18.15.0]
     steps:
       - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node-version }}
@@ -96,15 +96,15 @@ jobs:
         id: types-artefact
         with:
           path: st-types
-          key: ${{ matrix.node-version }}-types-artefact-${{ github.ref }}-${{ hashFiles('package-lock.json') }}
+          key: ${{ matrix.node-version }}-types-artefact-${{ github.ref }}-${{ hashFiles('st-types') }}
       - run: npm run typecheck
 
   unit-tests:
     runs-on: ubuntu-latest
     needs: [lint, typecheck]
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [14.x, 16.x, 18.15.0]
     steps:
       - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node-version }}
@@ -123,15 +123,15 @@ jobs:
         id: types-artefact
         with:
           path: st-types
-          key: ${{ matrix.node-version }}-types-artefact-${{ github.ref }}-${{ hashFiles('package-lock.json') }}
+          key: ${{ matrix.node-version }}-types-artefact-${{ github.ref }}-${{ hashFiles('st-types') }}
       - run: npm run unit-tests
 
   cypress-component-tests:
     runs-on: ubuntu-latest
     needs: unit-tests
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [14.x, 16.x, 18.15.0]
     steps:
       - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node-version }}
@@ -150,5 +150,5 @@ jobs:
         id: types-artefact
         with:
           path: st-types
-          key: ${{ matrix.node-version }}-types-artefact-${{ github.ref }}-${{ hashFiles('package-lock.json') }}
+          key: ${{ matrix.node-version }}-types-artefact-${{ github.ref }}-${{ hashFiles('st-types') }}
       - run: npm run cypress run --component
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -100,6 +100,10 @@ export const globalTypes = {
           value: themes["shelley"],
           title: "Shelley",
         },
+        {
+          value: themes["shelleyLight"],
+          title: "ShelleyLight",
+        },
       ],
     },
   },

diff --git a/cypress.config.cjs b/cypress.config.cjs
@@ -8,4 +8,6 @@ module.exports = defineConfig({
       bundler: "webpack",
     },
   },
+  viewportWidth: 500,
+  viewportHeight: 500,
 });
diff --git a/cypress.d.ts b/cypress.d.ts
@@ -1,4 +1,5 @@
 import { mount } from "cypress/react";
+import "cypress-real-events";
 
 declare global {
   namespace Cypress {

diff --git a/cypress/component/Checkbox.cy.tsx b/cypress/component/Checkbox.cy.tsx
@@ -2,19 +2,19 @@ import React from "react";
 import { Checkbox } from "../../src/indexLib";
 
 const checkboxWithLabel = '[data-id="checkbox--label"]';
-const checkboxWithoutLabel = '[data-id="checkbox--no-label"]';
+const checkboxWithoutLabel = '[data-id="checkbox--noLabel"]';
 const inputEl = '[data-id="checkbox--input"]';
 
 describe("Checkbox", () => {
   it("renders child as label, unchecked by default", () => {
-    cy.mount(<Checkbox includeDataIds>Subscribe</Checkbox>);
+    cy.mount(<Checkbox data-id="checkbox">Subscribe</Checkbox>);
     cy.get(checkboxWithLabel).contains("Subscribe");
     cy.get(inputEl).should("not.be.checked");
   });
 
   it("defaultSelected", () => {
     cy.mount(
-      <Checkbox defaultSelected includeDataIds>
+      <Checkbox defaultSelected data-id="checkbox">
         Subscribe
       </Checkbox>
     );
@@ -24,7 +24,7 @@ describe("Checkbox", () => {
   it("fires onChange when clicking label", () => {
     const onChangeSpy = cy.spy().as("onChangeSpy");
     cy.mount(
-      <Checkbox onChange={onChangeSpy} includeDataIds>
+      <Checkbox onChange={onChangeSpy} data-id="checkbox">
         Subscribe
       </Checkbox>
     );
@@ -35,7 +35,7 @@ describe("Checkbox", () => {
   it("isDisabled", () => {
     const onChangeSpy = cy.spy().as("onChangeSpy");
     cy.mount(
-      <Checkbox onChange={onChangeSpy} isDisabled includeDataIds>
+      <Checkbox onChange={onChangeSpy} isDisabled data-id="checkbox">
         Subscribe
       </Checkbox>
     );
@@ -48,7 +48,7 @@ describe("Checkbox", () => {
   it("isReadOnly", () => {
     const onChangeSpy = cy.spy().as("onChangeSpy");
     cy.mount(
-      <Checkbox onChange={onChangeSpy} isReadOnly includeDataIds>
+      <Checkbox onChange={onChangeSpy} isReadOnly data-id="checkbox">
         Subscribe
       </Checkbox>
     );
@@ -59,7 +59,7 @@ describe("Checkbox", () => {
   it("isIndeterminate has class and fires onChange", () => {
     const onChangeSpy = cy.spy().as("onChangeSpy");
     cy.mount(
-      <Checkbox onChange={onChangeSpy} isIndeterminate includeDataIds>
+      <Checkbox onChange={onChangeSpy} isIndeterminate data-id="checkbox">
         Subscribe
       </Checkbox>
     );
@@ -71,7 +71,7 @@ describe("Checkbox", () => {
   });
 
   it("focus class added", () => {
-    cy.mount(<Checkbox includeDataIds>Subscribe</Checkbox>);
+    cy.mount(<Checkbox data-id="checkbox">Subscribe</Checkbox>);
     cy.get(inputEl).focus();
     cy.get(checkboxWithLabel)
       .should("have.attr", "class")
@@ -80,7 +80,7 @@ describe("Checkbox", () => {
 
   it("renders with custom class name", () => {
     cy.mount(
-      <Checkbox className="cypress-test" includeDataIds>
+      <Checkbox className="cypress-test" data-id="checkbox">
         Subscribe
       </Checkbox>
     );
@@ -94,7 +94,7 @@ describe("Checkbox", () => {
     cy.mount(
       <>
         <label htmlFor="test123">Custom label</label>
-        <Checkbox id="test123" includeDataIds />
+        <Checkbox id="test123" data-id="checkbox" />
       </>
     );
     cy.get(checkboxWithoutLabel).should("exist");