Adding base motion tokens for duration and easing #248
Workflow file for this run
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
| # Posts a comment listing all the variables that changed in a PR | |
| name: Diff for design tokens | |
| on: | |
| pull_request: | |
| branches-ignore: | |
| - 'changeset-release/**' | |
| workflow_dispatch: | |
| jobs: | |
| changes: | |
| uses: ./.github/workflows/hasChanged.yml | |
| diff: | |
| needs: changes | |
| if: needs.changes.outputs.outputAffected == 'true' || github.event_name == 'workflow_dispatch' | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: Checkout repository | |
| uses: actions/checkout@v4 | |
| - name: Checkout base branch | |
| uses: actions/checkout@v4 | |
| with: | |
| ref: ${{ github.base_ref }} | |
| path: base | |
| - name: Set up Node | |
| uses: actions/setup-node@v4 | |
| with: | |
| node-version: 20 | |
| cache: 'npm' | |
| - name: Install dependencies (pr) | |
| run: npm ci --no-audit --no-fund --include=dev --ignore-scripts | |
| - name: Build tokens (pr) | |
| run: npm run build:tokens | |
| - name: Install dependencies (base) | |
| run: pushd base; npm i --no-audit --no-fund --ignore-scripts; popd | |
| - name: Build tokens (base) | |
| run: pushd base; npm run build:tokens; popd | |
| - name: Install dependecies for diffing | |
| run: npm install shelljs | |
| - name: Diff tokens | |
| id: diff-files | |
| uses: actions/github-script@v7 | |
| with: | |
| script: | | |
| const cssFolder = 'dist/css' | |
| const shell = require('shelljs') | |
| const globber = await glob.create(cssFolder + '/**/**/*.css') | |
| const files = await globber.glob() | |
| const fs = require('fs') | |
| // create file to store diffs | |
| const diffFilePath = 'diff_output.json' | |
| shell.touch(diffFilePath) | |
| core.setOutput('diffFilePath', diffFilePath); | |
| // create diffs | |
| const diffs = files.map(file => { | |
| // get filename | |
| const regexRunnerPath = new RegExp('^[a-z\/]+\/dist', 'g') | |
| const filename = file.replaceAll(regexRunnerPath,'') | |
| // if file is new | |
| if (!fs.existsSync(file.replace(cssFolder, 'base/' + cssFolder))) { | |
| console.info('⚠️ File is new: ' + file + '\n') | |
| return { | |
| file: file.replaceAll('dist/', ''), | |
| diff: '' | |
| } | |
| } | |
| // run diff & store in file | |
| const diff = shell.exec(`diff -u ${file.replace(cssFolder, 'base/' + cssFolder)} ${file}`) | |
| console.log('Checking diff for ' + filename + '...') | |
| if (diff.stderr) { | |
| console.error(diff.stderr) | |
| core.setFailed(diff.stderr) | |
| } | |
| if (diff.stdout === '') { | |
| console.log('No diff for ' + filename + '\n') | |
| } else { | |
| console.log(diff.stdout + '\n') | |
| } | |
| return { | |
| file: filename, | |
| diff: diff.stdout || '' | |
| } | |
| }) | |
| // filter files with no diffs | |
| .filter(item => { | |
| return item.diff !== '' | |
| }) | |
| // store diffs in file | |
| fs.writeFileSync(diffFilePath, JSON.stringify(diffs, null, ' ')) | |
| - name: Write summary | |
| uses: actions/github-script@v7 | |
| with: | |
| script: | | |
| const fs = require('fs') | |
| const diffFilePath = "${{ steps.diff-files.outputs.diffFilePath }}" | |
| // check if file exists | |
| if(!fs.existsSync(diffFilePath)) { | |
| return | |
| } | |
| // read file | |
| const diffs = JSON.parse(fs.readFileSync(diffFilePath, 'utf8')) | |
| core.summary.clear() | |
| core.summary.addHeading('Design Token Diff', '1') | |
| if (diffs.length === 0) { | |
| core.summary.addRaw('No design tokens changed', true) | |
| } else { | |
| diffs.forEach(({file: fileName, diff: content}) => { | |
| const diffDetails = `<details><summary><h3>${fileName}</h3></summary>\n\n`+ | |
| '```diff\n'+ | |
| `${content}\n`+ | |
| '```\n\n'+ | |
| '</details>' | |
| core.summary.addRaw(diffDetails, true) | |
| }) | |
| } | |
| // write summary | |
| core.summary.write({overwrite: true}) | |
| - name: Comment on pr | |
| if: github.event_name == 'pull_request' | |
| uses: actions/github-script@v7 | |
| with: | |
| script: | | |
| const fs = require('fs') | |
| const diffFilePath = "${{ steps.diff-files.outputs.diffFilePath }}" | |
| // check if file exists | |
| if(!fs.existsSync(diffFilePath)) { | |
| return | |
| } | |
| // read file | |
| const diffs = JSON.parse(fs.readFileSync(diffFilePath, 'utf8')) | |
| // prepare comment body | |
| let body = '## Design Token Diff\n\n' | |
| if (diffs.length === 0) { | |
| body += 'No design tokens changed' | |
| } else { | |
| body += diffs.map(({file, diff}) => | |
| '<details>' + | |
| `<summary><h3>${file}</h3></summary>\n` + | |
| " \n"+ | |
| " ```diff"+ | |
| ` ${diff}` + | |
| " ```"+ | |
| '\n</details>' | |
| ).join('\n') | |
| } | |
| // get comments | |
| const {data: comments} = await github.rest.issues.listComments({ | |
| issue_number: context.issue.number, | |
| owner: context.repo.owner, | |
| repo: context.repo.repo | |
| }); | |
| // overwrite body if to long | |
| if(body.length > 65536) { | |
| body = '## Design Token Diff\n\nThe diff is too long to be displayed here. Please check the job summary for more details.' | |
| } | |
| // get comment if exists | |
| const existingComment = comments.filter(comment => comment.body.includes('## Design Token Diff')); | |
| // if token issue exists, update it | |
| if(existingComment.length > 0) { | |
| await github.rest.issues.updateComment({ | |
| comment_id: existingComment[0].id, | |
| owner: context.repo.owner, | |
| repo: context.repo.repo, | |
| body | |
| }) | |
| } | |
| // if comment does not exist, create it | |
| else { | |
| await github.rest.issues.createComment({ | |
| issue_number: context.issue.number, | |
| owner: context.repo.owner, | |
| repo: context.repo.repo, | |
| body | |
| }) | |
| } | |
| remove_comment: | |
| needs: changes | |
| if: needs.changes.outputs.outputAffected == 'false' | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: Remove comment and summary | |
| if: github.event_name == 'pull_request' | |
| uses: actions/github-script@v7 | |
| with: | |
| script: | | |
| // get comments | |
| const {data: comments} = await github.rest.issues.listComments({ | |
| issue_number: context.issue.number, | |
| owner: context.repo.owner, | |
| repo: context.repo.repo | |
| }); | |
| // get comment if exists | |
| const existingComment = comments.filter(comment => comment.body.includes('## Design Token Diff')); | |
| // if token issue exists, update it | |
| if(existingComment.length > 0) { | |
| await github.rest.issues.deleteComment({ | |
| comment_id: existingComment[0].id, | |
| owner: context.repo.owner, | |
| repo: context.repo.repo, | |
| }) | |
| } | |
| // remove summary | |
| core.summary.clear() | |
| core.summary.write({overwrite: true}) |