feat(web-components): add global primitive and semantic CSS tokens to allow for use in dark mode #7269
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: Branches | |
| permissions: read-all | |
| on: | |
| workflow_dispatch: | |
| pull_request: | |
| types: [opened, reopened, ready_for_review, synchronize] | |
| concurrency: | |
| group: ci-${{ github.workflow }}-${{ github.ref }} | |
| cancel-in-progress: true | |
| jobs: | |
| check-updates: | |
| name: "Check package updates" | |
| runs-on: ubuntu-latest | |
| permissions: | |
| pull-requests: read | |
| outputs: | |
| core: ${{ steps.filter.outputs.core }} | |
| canary: ${{ steps.filter.outputs.canary }} | |
| steps: | |
| - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1 | |
| - uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 #v3.0.2 | |
| id: filter | |
| with: | |
| base: "develop" | |
| filters: | | |
| core: | |
| - 'packages/web-components/**' | |
| - 'packages/react/**' | |
| canary: | |
| - 'packages/canary-web-components/**' | |
| - 'packages/canary-react/**' | |
| ic-ui-kit-static-analysis-tests: | |
| needs: ["check-updates"] | |
| name: "Static analysis tests" | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: Checkout repository | |
| uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1 | |
| - name: Setup node | |
| uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #4.0.2 | |
| with: | |
| node-version: 20 | |
| - name: Cache dependencies | |
| uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2 | |
| with: | |
| path: | | |
| packages/*/node_modules | |
| key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} | |
| restore-keys: | | |
| ${{ runner.os }}-node | |
| - name: Install dependencies | |
| run: | | |
| npm ci | |
| npm run bootstrap -- -- --ci | |
| - name: Build core components | |
| if: ${{ needs.check-updates.outputs.canary == 'false' }} | |
| run: npm run build | |
| - name: Build all components | |
| if: ${{ needs.check-updates.outputs.canary == 'true' }} | |
| run: | | |
| npm run build:all | |
| - name: Lint commit messages | |
| run: | | |
| COMMIT_MESSAGE=$(git log -1 --pretty=format:"%s") | |
| echo "$COMMIT_MESSAGE" | npx commitlint | |
| - name: Lint | |
| run: npm run lint | |
| - name: Lint grammar | |
| run: npm run lint:spelling | |
| - name: Prettier | |
| run: npm run prettier | |
| - name: Audit | |
| run: npm run audit | |
| - name: A11y core tests | |
| if: ${{ needs.check-updates.outputs.core == 'true' }} | |
| run: npm run test-a11y:ci | |
| - name: A11y canary tests | |
| if: ${{ needs.check-updates.outputs.canary == 'true' }} | |
| run: npm run test-a11y:ci:canary | |
| - name: Unit Component tests | |
| run: npm run test:coverage-ci | |
| ic-ui-kit-e2e-tests: | |
| needs: [check-updates] | |
| name: "E2E tests" | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: Checkout repository | |
| uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1 | |
| - name: Setup node | |
| uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #4.0.2 | |
| with: | |
| node-version: 20 | |
| - name: Cache dependencies | |
| uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2 | |
| with: | |
| path: | | |
| packages/*/node_modules | |
| key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} | |
| restore-keys: | | |
| ${{ runner.os }}-node | |
| - name: Install dependencies | |
| run: | | |
| npm ci | |
| npm run bootstrap -- -- --ci | |
| - name: E2E core tests | |
| if: ${{ needs.check-updates.outputs.core == 'true' }} | |
| id: core_e2e_tests | |
| run: npm run test-e2e | |
| - name: Build core components | |
| if: ${{ steps.core_e2e_tests.outcome == 'skipped' && needs.check-updates.outputs.canary == 'true' }} | |
| run: npm run build | |
| - name: E2E canary tests | |
| if: ${{ needs.check-updates.outputs.canary == 'true' }} | |
| run: npm run test-e2e:canary | |
| ic-ui-kit-visual-tests: | |
| needs: ["check-updates"] | |
| name: "Visual regression tests" | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: Checkout repository | |
| uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1 | |
| - name: Setup node | |
| uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #4.0.2 | |
| with: | |
| node-version: 20 | |
| - name: Cache dependencies | |
| uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2 | |
| with: | |
| path: | | |
| packages/*/node_modules | |
| key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} | |
| restore-keys: | | |
| ${{ runner.os }}-node | |
| - name: Install dependencies | |
| run: | | |
| google-chrome --version | |
| npm ci | |
| npm run bootstrap -- -- --ci | |
| - name: Core visual regression tests | |
| if: ${{ needs.check-updates.outputs.core == 'true' }} | |
| run: npm run test-visual:ci | |
| - name: Canary visual regression tests | |
| if: ${{ needs.check-updates.outputs.canary == 'true' }} | |
| run: npm run test-visual:ci:canary | |
| ic-ui-kit-cypress-tests: | |
| needs: [check-updates] | |
| name: "Cypress tests" | |
| runs-on: ubuntu-latest | |
| permissions: | |
| contents: write | |
| pull-requests: write | |
| steps: | |
| - name: Checkout repository | |
| uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1 | |
| - name: Setup node | |
| uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #4.0.2 | |
| with: | |
| node-version: 20 | |
| - name: Setup Chrome | |
| uses: browser-actions/setup-chrome@97349de5c98094d4fc9412f31c524d7697115ad8 #v1.5.0 | |
| - name: Extract branch name | |
| run: echo "branch=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}" >> $GITHUB_OUTPUT | |
| id: extract_branch | |
| - name: Cache dependencies | |
| uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2 | |
| with: | |
| path: | | |
| packages/*/node_modules | |
| key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} | |
| restore-keys: | | |
| ${{ runner.os }}-node | |
| - name: Install dependencies | |
| run: | | |
| google-chrome --version | |
| npm ci | |
| npm run bootstrap -- -- --ci | |
| - name: Cache Cypress Binary | |
| uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2 | |
| with: | |
| path: ~/.cache/Cypress | |
| key: cypress-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }} | |
| - name: Install Core Cypress | |
| if: ${{ needs.check-updates.outputs.core == 'true' }} | |
| run: npm run cypress:install:react | |
| - name: Core Cypress tests | |
| if: ${{ needs.check-updates.outputs.core == 'true' }} | |
| id: core_cypress_tests | |
| run: npm run test-cypress:ci | |
| - name: Upload core visual regression screenshots | |
| if: failure() && steps.core_cypress_tests.outcome == 'failure' | |
| uses: JamesIves/github-pages-deploy-action@65b5dfd4f5bcd3a7403bbc2959c144256167464e #v4.5.0 | |
| with: | |
| folder: ./packages/react/cypress-image-diff-screenshots | |
| target-folder: ./branches/${{ steps.extract_branch.outputs.branch }}/cypress-image-diff-screenshots | |
| - name: Upload core visual regression report | |
| if: always() && steps.core_cypress_tests.outcome == 'failure' | |
| uses: JamesIves/github-pages-deploy-action@65b5dfd4f5bcd3a7403bbc2959c144256167464e #v4.5.0 | |
| with: | |
| folder: ./packages/react/cypress-image-diff-html-report | |
| target-folder: ./branches/${{ steps.extract_branch.outputs.branch }}/cypress-image-diff-html-report | |
| - name: Install Canary Cypress | |
| if: ${{ needs.check-updates.outputs.canary == 'true' }} | |
| run: npm run cypress:install:canary-react | |
| - name: Canary Cypress tests | |
| if: ${{ needs.check-updates.outputs.canary == 'true' }} | |
| id: canary_cypress_tests | |
| run: npm run test-cypress:ci:canary | |
| - name: Upload canary visual regression diff screenshots | |
| if: failure() && steps.canary_cypress_tests.outcome == 'failure' | |
| uses: JamesIves/github-pages-deploy-action@65b5dfd4f5bcd3a7403bbc2959c144256167464e #v4.5.0 | |
| with: | |
| folder: ./packages/canary-react/cypress-image-diff-screenshots | |
| target-folder: ./branches/${{ steps.extract_branch.outputs.branch }}/cypress-image-diff-screenshots | |
| - name: Upload canary visual regression report | |
| if: always() && steps.canary_cypress_tests.outcome == 'failure' | |
| uses: JamesIves/github-pages-deploy-action@65b5dfd4f5bcd3a7403bbc2959c144256167464e #v4.5.0 | |
| with: | |
| folder: ./packages/canary-react/cypress-image-diff-html-report | |
| target-folder: ./branches/${{ steps.extract_branch.outputs.branch }}/cypress-image-diff-html-report | |
| - name: Add PR comment with diff screenshots | |
| if: always() && (steps.core_cypress_tests.outcome == 'failure' || steps.canary_cypress_tests.outcome == 'failure') | |
| uses: mshick/add-pr-comment@b8f338c590a895d50bcbfa6c5859251edc8952fc #v2.8.2 | |
| with: | |
| message: | | |
| Cypress visual tests failed. | |
| View the image diff here: https://github.com/mi6/ic-ui-kit/tree/gh-pages/branches/${{ steps.extract_branch.outputs.branch }}/cypress-image-diff-screenshots/diff | |
| View the html report here: https://mi6.github.io/ic-ui-kit/branches/${{ steps.extract_branch.outputs.branch }}/cypress-image-diff-html-report/cypress-image-diff-html-report.html | |
| message-id: "image-diff" | |
| ic-ui-kit-deploy: | |
| needs: | |
| [ | |
| ic-ui-kit-static-analysis-tests, | |
| ic-ui-kit-e2e-tests, | |
| ic-ui-kit-visual-tests, | |
| check-updates, | |
| ic-ui-kit-cypress-tests, | |
| ] | |
| if: ${{ github.event.pull_request.head.repo.full_name == github.repository || github.event_name == 'workflow_dispatch' }} | |
| name: "Deploy storybook" | |
| runs-on: ubuntu-latest | |
| permissions: | |
| contents: write | |
| steps: | |
| - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1 | |
| - uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 #4.0.2 | |
| with: | |
| node-version: 20 | |
| - name: Cache dependencies | |
| uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2 | |
| with: | |
| path: | | |
| packages/*/node_modules | |
| key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} | |
| restore-keys: | | |
| ${{ runner.os }}-node | |
| - name: Extract branch name | |
| run: echo "branch=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}" >> $GITHUB_OUTPUT | |
| id: extract_branch | |
| - name: Install dependencies | |
| run: | | |
| npm ci | |
| npm run bootstrap -- -- --ci | |
| - name: Build core components | |
| if: ${{ needs.check-updates.outputs.canary == 'false' }} | |
| run: | | |
| npm run build | |
| - name: Build all components | |
| if: ${{ needs.check-updates.outputs.canary == 'true' }} | |
| run: | | |
| npm run build:all | |
| - name: Build web-components and react storybook | |
| if: ${{ needs.check-updates.outputs.core == 'true' }} | |
| run: | | |
| npm run build-storybook:web-components | |
| npm run build-storybook:react | |
| - name: Build canary web-components and canary react storybook | |
| if: ${{ needs.check-updates.outputs.canary == 'true' }} | |
| run: | | |
| npm run build-storybook:canary-web-components | |
| npm run build-storybook:canary-react | |
| - name: Deploy core web components storybook | |
| if: ${{ needs.check-updates.outputs.core == 'true' }} | |
| uses: JamesIves/github-pages-deploy-action@65b5dfd4f5bcd3a7403bbc2959c144256167464e #v4.5.0 | |
| with: | |
| folder: ./packages/web-components/storybook-static | |
| target-folder: ./branches/${{ steps.extract_branch.outputs.branch }}/web-components | |
| - name: Deploy core react storybook | |
| if: ${{ needs.check-updates.outputs.core == 'true' }} | |
| uses: JamesIves/github-pages-deploy-action@65b5dfd4f5bcd3a7403bbc2959c144256167464e #v4.5.0 | |
| with: | |
| folder: ./packages/react/storybook-static | |
| target-folder: ./branches/${{ steps.extract_branch.outputs.branch }}/react | |
| - name: Deploy canary web components storybook | |
| if: ${{ needs.check-updates.outputs.canary == 'true' }} | |
| uses: JamesIves/github-pages-deploy-action@65b5dfd4f5bcd3a7403bbc2959c144256167464e #v4.5.0 | |
| with: | |
| folder: ./packages/canary-web-components/storybook-static | |
| target-folder: ./branches/${{ steps.extract_branch.outputs.branch }}/canary-web-components | |
| - name: Deploy canary react storybook | |
| if: ${{ needs.check-updates.outputs.canary == 'true' }} | |
| uses: JamesIves/github-pages-deploy-action@65b5dfd4f5bcd3a7403bbc2959c144256167464e #v4.5.0 | |
| with: | |
| folder: ./packages/canary-react/storybook-static | |
| target-folder: ./branches/${{ steps.extract_branch.outputs.branch }}/canary-react |