-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into 451-checkbox
- Loading branch information
Showing
68 changed files
with
5,973 additions
and
3,611 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| name: Publish @bcgov/design-tokens to npm @next | ||
|
|
||
| on: | ||
| pull_request: | ||
| paths: | ||
| - packages/design-tokens/** | ||
| branches: [main] | ||
| types: [closed] | ||
|
|
||
| jobs: | ||
| publish-design-tokens: | ||
| name: Publish @bcgov/design-tokens@next | ||
| # Only run on merge, not close without merge AND | ||
| # only run in bcgov/design-system repo, not forks. | ||
| if: ${{ github.event.pull_request.merged == true && github.repository == 'bcgov/design-system' }} | ||
| runs-on: ubuntu-latest | ||
|
|
||
| steps: | ||
| - name: Checkout code | ||
| uses: actions/checkout@v4 | ||
|
|
||
| - name: Read .nvmrc | ||
| run: echo "GITHUB_NVMRC_VERSION=$(cat .nvmrc)" >> $GITHUB_ENV | ||
| working-directory: ./packages/design-tokens | ||
|
|
||
| - name: Set up Node.js | ||
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: ${{ env.GITHUB_NVMRC_VERSION }} | ||
|
|
||
| - name: Install dependencies | ||
| run: npm install | ||
| working-directory: ./packages/design-tokens | ||
|
|
||
| - name: Install jq | ||
| run: sudo apt-get install -y jq | ||
|
|
||
| - name: Run build script | ||
| run: npm run build | ||
| working-directory: ./packages/design-tokens | ||
|
|
||
| - name: Prepare npm package for publishing | ||
| run: npm run prepare-npm-package | ||
| working-directory: ./packages/design-tokens | ||
|
|
||
| - name: Set up .npmrc configuration | ||
| run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc | ||
|
|
||
| # Use `jq` to change the package.json version to look like: | ||
| # | ||
| # <version in package.json>-pr<PR # that caused the workflow run> | ||
| # | ||
| # So package.json version v1.2.3 with a run caused by merging PR #456 to | ||
| # `main` causes the version of the package on npm to look like: | ||
| # | ||
| # 1.2.3-pr456 | ||
| # | ||
| # This is to ensure that it's easy to map an npm version to a particular PR. | ||
| # | ||
| - name: Update version in dist/package.json | ||
| run: | | ||
| PR_NUMBER=${{ github.event.pull_request.number }} | ||
| CURRENT_VERSION=$(jq -r '.version' package.json) | ||
| NEW_VERSION="${CURRENT_VERSION}-pr${PR_NUMBER}" | ||
| jq --arg new_version "$NEW_VERSION" '.version = $new_version' package.json > tmp.json && mv tmp.json package.json | ||
| shell: bash | ||
| working-directory: ./packages/design-tokens/dist | ||
|
|
||
| - name: Publish to npm with @next tag | ||
| run: npm run publish-npm-package -- --access public --tag next | ||
| env: | ||
| NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} | ||
| working-directory: ./packages/design-tokens |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| name: Test design tokens build script | ||
|
|
||
| on: | ||
| pull_request: | ||
| paths: | ||
| - packages/design-tokens/** | ||
| workflow_dispatch: | ||
|
|
||
| # Cancel any currently running builds to save GitHub Actions hours. | ||
| concurrency: | ||
| group: ${{ github.workflow }}-${{ github.ref }} | ||
| cancel-in-progress: true | ||
|
|
||
| jobs: | ||
| run-tests: | ||
| name: Run tests | ||
| runs-on: ubuntu-latest | ||
|
|
||
| steps: | ||
| - name: Checkout code | ||
| uses: actions/checkout@v4 | ||
|
|
||
| - name: Read .nvmrc | ||
| run: echo "GITHUB_NVMRC_VERSION=$(cat .nvmrc)" >> $GITHUB_ENV | ||
| working-directory: ./packages/design-tokens | ||
|
|
||
| - name: Set up Node.js | ||
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: ${{ env.GITHUB_NVMRC_VERSION }} | ||
|
|
||
| - name: Install dependencies | ||
| run: npm install | ||
| working-directory: ./packages/design-tokens | ||
|
|
||
| - name: Run test suite with npm script | ||
| run: npm run test | ||
| working-directory: ./packages/design-tokens |
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,14 @@ | ||
| # Design Tokens for BC Design System | ||
| # Design Tokens for B.C. Design System | ||
|
|
||
| [](https://github.com/bcgov/repomountie/blob/master/doc/lifecycle-badges.md) | ||
| [](https://github.com/bcgov/repomountie/blob/master/doc/lifecycle-badges.md) | ||
|
|
||
| This package is used to export and publish design tokens from Figma to npm for the B.C. Design System. The tokens generated by this package are available for install from npm: [@bcgov/design-tokens](https://www.npmjs.com/package/@bcgov/design-tokens) | ||
|
|
||
| Questions? Please email the <a href="mailto:[email protected]">GDX OSS Design Team</a>. | ||
|
|
||
| ## Tokens usage | ||
|
|
||
| See `dist/README.md` for how to use the design tokens in your project. | ||
| See `dist/README.md` (the README shipped with [the published package](https://www.npmjs.com/package/@bcgov/design-tokens)) for how to use the design tokens in your project. | ||
|
|
||
| ## Development workflow | ||
|
|
||
|
|
@@ -18,30 +18,34 @@ See `dist/README.md` for how to use the design tokens in your project. | |
|
|
||
| ## Steps to update and publish tokens | ||
|
|
||
| 1. Update token data in the JSON file `input/tokens.json`. | ||
| 1. Update token data in the JSON file `input/tokens.json` and the `version` field in `./package.json`. | ||
| 2. Manually update composite tokens to include parent category. Ex: `{fontWeights.regular}` must become `{typography.fontWeights.regular}`. | ||
| 3. Run `npm run build` to run Style Dictionary, transforming the raw JSON data into usable token formats. | ||
| 4. Run `npm run prepare-npm-package` to copy the contents of `build` into `dist`. | ||
| 5. Manually update the package version in `dist/package.json`. | ||
| 6. Run `npm run publish-npm-package` to publish the contents of `dist` to npm. | ||
| 4. [Ensure `jq` is installed](https://jqlang.github.io/jq/) on your system and then run `npm run prepare-npm-package` to copy the contents of `build` into `dist`. | ||
| 5. Run `npm run publish-npm-package` to publish the contents of `dist` to npm (defaults to using the `latest` tag). If publishing to the pre-release `next` tag, use `npm run publish-npm-package -- --tag next`. | ||
|
|
||
| ## Test the build script | ||
|
|
||
| A Node.js test script is included to confirm that the build script runs as intended: `npm run test` | ||
|
|
||
| ## Folder structure | ||
|
|
||
| ``` | ||
| . | ||
| ├── CHANGELOG.md - log of notable changes by version | ||
| ├── README.md - this file | ||
| ├── build - output of build script from style-dictionary | ||
| ├── build-output.js - build script | ||
| ├── dist - published to npm as @bcgov/design-tokens | ||
| │ ├── README.md - instructions for using @bcgov/design-tokens | ||
| │ ├── cjs - CommonJS tokens | ||
| │ ├── cjs-prefixed - CommonJS tokens with "bcds" added | ||
| │ ├── css - CSS tokens | ||
| │ ├── css-prefixed - CSS tokens with "bcds" added | ||
| │ ├── js - ECMAScript Module (ESM) tokens | ||
| │ ├── js-prefixed - ESM tokens with "bcds" added | ||
| │ └── package.json - package.json for @bcgov/design-tokens | ||
| ├── input - raw design tokens JSON data from Tokens Studio for Figma | ||
| └── package.json - package.json for tokens transformation pipeline | ||
| ├── CHANGELOG.md - log of notable changes by version | ||
| ├── README.md - this file | ||
| ├── build - output of build script from style-dictionary | ||
| ├── build-output.js - build script | ||
| ├── build-output.test.js - test suite for build script | ||
| ├── dist - published to npm as @bcgov/design-tokens | ||
| │ ├── README.md - instructions for using @bcgov/design-tokens | ||
| │ ├── cjs - CommonJS tokens | ||
| │ ├── cjs-prefixed - CommonJS tokens with "bcds" added | ||
| │ ├── css - CSS tokens | ||
| │ ├── css-prefixed - CSS tokens with "bcds" added | ||
| │ ├── js - ECMAScript Module (ESM) tokens | ||
| │ ├── js-prefixed - ESM tokens with "bcds" added | ||
| │ └── package.json - package.json for @bcgov/design-tokens | ||
| ├── input - raw design tokens JSON data from Tokens Studio for Figma | ||
| └── package.json - package.json for tokens transformation pipeline | ||
| ``` | ||
Oops, something went wrong.