From 268245a0aefcde55ccd7e521ab3e5f1165316203 Mon Sep 17 00:00:00 2001 From: Calcite Admin Date: Sun, 26 May 2024 23:12:23 -0700 Subject: [PATCH 001/206] build: update browserslist db (#9427) This PR was automatically generated by the update-browserslist-db GitHub action Co-authored-by: jcfranco --- package-lock.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 523d2f291b7..c355c29ee97 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11441,9 +11441,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001620", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001620.tgz", - "integrity": "sha512-WJvYsOjd1/BYUY6SNGUosK9DUidBPDTnOARHp3fSmFO1ekdxaY6nKRttEVrfMmYi80ctS0kz1wiWmm14fVc3ew==", + "version": "1.0.30001621", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001621.tgz", + "integrity": "sha512-+NLXZiviFFKX0fk8Piwv3PfLPGtRqJeq2TiNoUff/qB5KJgwecJTvCXDpmlyP/eCI/GUEmp/h/y5j0yckiiZrA==", "dev": true, "funding": [ { From 929a64b304859ca648da0e24055c429b05725a27 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 27 May 2024 17:07:00 -0700 Subject: [PATCH 002/206] build(deps): update angular-cli monorepo to v17.3.8 (#9432) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@angular-devkit/build-angular](https://togithub.com/angular/angular-cli) | [`17.3.7` -> `17.3.8`](https://renovatebot.com/diffs/npm/@angular-devkit%2fbuild-angular/17.3.7/17.3.8) | [![age](https://developer.mend.io/api/mc/badges/age/npm/@angular-devkit%2fbuild-angular/17.3.8?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@angular-devkit%2fbuild-angular/17.3.8?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@angular-devkit%2fbuild-angular/17.3.7/17.3.8?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@angular-devkit%2fbuild-angular/17.3.7/17.3.8?slim=true)](https://docs.renovatebot.com/merge-confidence/) | | [@angular/cli](https://togithub.com/angular/angular-cli) | [`17.3.7` -> `17.3.8`](https://renovatebot.com/diffs/npm/@angular%2fcli/17.3.7/17.3.8) | [![age](https://developer.mend.io/api/mc/badges/age/npm/@angular%2fcli/17.3.8?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@angular%2fcli/17.3.8?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@angular%2fcli/17.3.7/17.3.8?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@angular%2fcli/17.3.7/17.3.8?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes
angular/angular-cli (@​angular-devkit/build-angular) ### [`v17.3.8`](https://togithub.com/angular/angular-cli/blob/HEAD/CHANGELOG.md#1738-2024-05-22) [Compare Source](https://togithub.com/angular/angular-cli/compare/17.3.7...17.3.8) ##### [@​angular/cli](https://togithub.com/angular/cli) | Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | -------------------------------------------------------- | | [3ada6eb52](https://togithub.com/angular/angular-cli/commit/3ada6eb5256631ca3a951525fc9814ad0447a41f) | fix | clarify optional migration instructions during ng update | ##### [@​angular-devkit/schematics](https://togithub.com/angular-devkit/schematics) | Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | --------------------------------------------------------------------------------------------------------- | | [4b6ba8df1](https://togithub.com/angular/angular-cli/commit/4b6ba8df1ab8f4801fba7ddc38812417e274d960) | fix | `SchematicTestRunner.runExternalSchematic` fails with "The encoded data was not valid for encoding utf-8" |
--- ### Configuration 📅 **Schedule**: Branch creation - "before 5am every weekday" in timezone America/Los_Angeles, Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/Esri/calcite-design-system). Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package-lock.json | 80 ++++++++++--------- .../calcite-components-angular/package.json | 4 +- 2 files changed, 43 insertions(+), 41 deletions(-) diff --git a/package-lock.json b/package-lock.json index c355c29ee97..6e12db06686 100644 --- a/package-lock.json +++ b/package-lock.json @@ -138,12 +138,12 @@ } }, "node_modules/@angular-devkit/architect": { - "version": "0.1703.7", - "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1703.7.tgz", - "integrity": "sha512-SwXbdsZqEE3JtvujCLChAii+FA20d1931VDjDYffrGWdQEViTBAr4NKtDr/kOv8KkgiL3fhGibPnRNUHTeAMtg==", + "version": "0.1703.8", + "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1703.8.tgz", + "integrity": "sha512-lKxwG4/QABXZvJpqeSIn/kAwnY6MM9HdHZUV+o5o3UiTi+vO8rZApG4CCaITH3Bxebm7Nam7Xbk8RuukC5rq6g==", "dev": true, "dependencies": { - "@angular-devkit/core": "17.3.7", + "@angular-devkit/core": "17.3.8", "rxjs": "7.8.1" }, "engines": { @@ -153,12 +153,12 @@ } }, "node_modules/@angular-devkit/build-webpack": { - "version": "0.1703.7", - "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1703.7.tgz", - "integrity": "sha512-gpt2Ia5I1gmdp3hdbtB7tkZTba5qWmKeVhlCYswa/LvbceKmkjedoeNRAoyr1UKM9GeGqt6Xl1B2eHzCH+ykrg==", + "version": "0.1703.8", + "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.1703.8.tgz", + "integrity": "sha512-9u6fl8VVOxcLOEMzrUeaybSvi9hSLSRucHnybneYrabsgreDo32tuy/4G8p6YAHQjpWEj9jvF9Um13ertdni5Q==", "dev": true, "dependencies": { - "@angular-devkit/architect": "0.1703.7", + "@angular-devkit/architect": "0.1703.8", "rxjs": "7.8.1" }, "engines": { @@ -172,9 +172,9 @@ } }, "node_modules/@angular-devkit/core": { - "version": "17.3.7", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-17.3.7.tgz", - "integrity": "sha512-qpZ7BShyqS/Jqld36E7kL02cyb2pjn1Az1p9439SbP8nsvJgYlsyjwYK2Kmcn/Wi+TZGIKxkqxgBBw9vqGgeJw==", + "version": "17.3.8", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-17.3.8.tgz", + "integrity": "sha512-Q8q0voCGudbdCgJ7lXdnyaxKHbNQBARH68zPQV72WT8NWy+Gw/tys870i6L58NWbBaCJEUcIj/kb6KoakSRu+Q==", "dev": true, "dependencies": { "ajv": "8.12.0", @@ -211,12 +211,12 @@ } }, "node_modules/@angular-devkit/schematics": { - "version": "17.3.7", - "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-17.3.7.tgz", - "integrity": "sha512-d7NKSwstdxYLYmPsbcYO3GOFNfXxXwOyHxSqDa1JNKoSzMdbLj4tvlCpfXw0ThNM7gioMx8aLBaaH1ac+yk06Q==", + "version": "17.3.8", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-17.3.8.tgz", + "integrity": "sha512-QRVEYpIfgkprNHc916JlPuNbLzOgrm9DZalHasnLUz4P6g7pR21olb8YCyM2OTJjombNhya9ZpckcADU5Qyvlg==", "dev": true, "dependencies": { - "@angular-devkit/core": "17.3.7", + "@angular-devkit/core": "17.3.8", "jsonc-parser": "3.2.1", "magic-string": "0.30.8", "ora": "5.4.1", @@ -260,15 +260,15 @@ "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, "node_modules/@angular/cli": { - "version": "17.3.7", - "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-17.3.7.tgz", - "integrity": "sha512-JgCav3sdRCoJHwLXxmF/EMzArYjwbqB+AGUW/xIR98oZET8QxCB985bOFUAm02SkAEUVcMJvjxec+WCaa60m/A==", + "version": "17.3.8", + "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-17.3.8.tgz", + "integrity": "sha512-X5ZOQ6ZTKVHjhIsfl32ZRqbs+FUoeHLbT7x4fh2Os/8ObDDwrUcCJPqxe2b2RB5E2d0vepYigknHeLE7gwzlNQ==", "dev": true, "dependencies": { - "@angular-devkit/architect": "0.1703.7", - "@angular-devkit/core": "17.3.7", - "@angular-devkit/schematics": "17.3.7", - "@schematics/angular": "17.3.7", + "@angular-devkit/architect": "0.1703.8", + "@angular-devkit/core": "17.3.8", + "@angular-devkit/schematics": "17.3.8", + "@schematics/angular": "17.3.8", "@yarnpkg/lockfile": "1.1.0", "ansi-colors": "4.1.3", "ini": "4.1.2", @@ -6659,13 +6659,13 @@ } }, "node_modules/@schematics/angular": { - "version": "17.3.7", - "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-17.3.7.tgz", - "integrity": "sha512-HaJroKaberriP4wFefTTSVFrtU9GMvnG3I6ELbOteOyKMH7o2V91FXGJDJ5KnIiLRlBmC30G3r+9Ybc/rtAYkw==", + "version": "17.3.8", + "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-17.3.8.tgz", + "integrity": "sha512-2g4OmSyE9YGq50Uj7fNI26P/TSAFJ7ZuirwTF2O7Xc4XRQ29/tYIIqhezpNlTb6rlYblcQuMcUZBrMfWJHcqJw==", "dev": true, "dependencies": { - "@angular-devkit/core": "17.3.7", - "@angular-devkit/schematics": "17.3.7", + "@angular-devkit/core": "17.3.8", + "@angular-devkit/schematics": "17.3.8", "jsonc-parser": "3.2.1" }, "engines": { @@ -34931,6 +34931,7 @@ "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "deprecated": "Glob versions prior to v9 are no longer supported", "dev": true, "dependencies": { "fs.realpath": "^1.0.0", @@ -34972,6 +34973,7 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", + "deprecated": "Rimraf versions prior to v4 are no longer supported", "dev": true, "dependencies": { "glob": "^7.1.3" @@ -36317,22 +36319,22 @@ "zone.js": "0.14.6" }, "devDependencies": { - "@angular-devkit/build-angular": "17.3.7", - "@angular/cli": "17.3.7", + "@angular-devkit/build-angular": "17.3.8", + "@angular/cli": "17.3.8", "@angular/compiler-cli": "17.3.9", "ng-packagr": "17.3.0" } }, "packages/calcite-components-angular/node_modules/@angular-devkit/build-angular": { - "version": "17.3.7", - "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-17.3.7.tgz", - "integrity": "sha512-AsV80kiFMIPIhm3uzJgOHDj4u6JteUkZedPTKAFFFJC7CTat1luW5qx306vfF7wj62aMvUl5g9HFWaeLghTQGA==", + "version": "17.3.8", + "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-17.3.8.tgz", + "integrity": "sha512-ixsdXggWaFRP7Jvxd0AMukImnePuGflT9Yy7NJ9/y0cL/k//S/3RnkQv5i411KzN+7D4RIbNkRGGTYeqH24zlg==", "dev": true, "dependencies": { "@ampproject/remapping": "2.3.0", - "@angular-devkit/architect": "0.1703.7", - "@angular-devkit/build-webpack": "0.1703.7", - "@angular-devkit/core": "17.3.7", + "@angular-devkit/architect": "0.1703.8", + "@angular-devkit/build-webpack": "0.1703.8", + "@angular-devkit/core": "17.3.8", "@babel/core": "7.24.0", "@babel/generator": "7.23.6", "@babel/helper-annotate-as-pure": "7.22.5", @@ -36343,7 +36345,7 @@ "@babel/preset-env": "7.24.0", "@babel/runtime": "7.24.0", "@discoveryjs/json-ext": "0.5.7", - "@ngtools/webpack": "17.3.7", + "@ngtools/webpack": "17.3.8", "@vitejs/plugin-basic-ssl": "1.1.0", "ansi-colors": "4.1.3", "autoprefixer": "10.4.18", @@ -36453,9 +36455,9 @@ } }, "packages/calcite-components-angular/node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack": { - "version": "17.3.7", - "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-17.3.7.tgz", - "integrity": "sha512-kQNS68jsPQlaWAnKcVeFKNHp6K90uQANvq+9oXb/i+JnYWzuBsHzn2r8bVdMmvjd1HdBRiGtg767XRk3u+jgRw==", + "version": "17.3.8", + "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-17.3.8.tgz", + "integrity": "sha512-CjSVVa/9fzMpEDQP01SC4colKCbZwj7vUq0H2bivp8jVsmd21x9Fu0gDBH0Y9NdfAIm4eGZvmiZKMII3vIOaYQ==", "dev": true, "engines": { "node": "^18.13.0 || >=20.9.0", diff --git a/packages/calcite-components-angular/package.json b/packages/calcite-components-angular/package.json index abb3a4d974c..3bfc5039f5f 100644 --- a/packages/calcite-components-angular/package.json +++ b/packages/calcite-components-angular/package.json @@ -24,8 +24,8 @@ "zone.js": "0.14.6" }, "devDependencies": { - "@angular-devkit/build-angular": "17.3.7", - "@angular/cli": "17.3.7", + "@angular-devkit/build-angular": "17.3.8", + "@angular/cli": "17.3.8", "@angular/compiler-cli": "17.3.9", "ng-packagr": "17.3.0" }, From 8369ba5a7f1499a97300c9670273203a666dc805 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Mon, 27 May 2024 17:08:45 -0700 Subject: [PATCH 003/206] ci: enable npm provenance statements (#9429) ## Summary Enable npm provenance statements to improve supply-chain security for our users. ref: https://docs.npmjs.com/generating-provenance-statements#using-third-party-package-publishing-tools --- .github/workflows/deploy-latest.yml | 1 + .github/workflows/deploy-next.yml | 1 + 2 files changed, 2 insertions(+) diff --git a/.github/workflows/deploy-latest.yml b/.github/workflows/deploy-latest.yml index c5d4b4ae97e..699d913ca7c 100644 --- a/.github/workflows/deploy-latest.yml +++ b/.github/workflows/deploy-latest.yml @@ -60,3 +60,4 @@ jobs: npm run publish:latest env: NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} + NPM_CONFIG_PROVENANCE: true diff --git a/.github/workflows/deploy-next.yml b/.github/workflows/deploy-next.yml index 2fac5964601..906ea45c20e 100644 --- a/.github/workflows/deploy-next.yml +++ b/.github/workflows/deploy-next.yml @@ -26,6 +26,7 @@ jobs: NEXT_RELEASE_ENABLED: ${{ secrets.NEXT_RELEASE_ENABLED }} # https://github.com/storybookjs/storybook-deployer/issues/77#issuecomment-618560481 GH_TOKEN_FOR_STORYBOOK: ${{ github.actor }}:${{ secrets.ADMIN_TOKEN }} + NPM_CONFIG_PROVENANCE: true run: | if [ "$NEXT_RELEASE_ENABLED" == "true" ]; then npm install From b12e8cc757c1a31f9ca11c039bc5952e300c0bc5 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Mon, 27 May 2024 17:09:15 -0700 Subject: [PATCH 004/206] ci: skip chromatic for release and doc update PRs (#9430) ## Summary - Automatically add the `skip visual snapshots` label to release-please, doc update and browserslist-db update pull requests. - Create release-please pull requests as drafts to reduce noise. --- .github/workflows/update-browserslist-db.yml | 2 +- .github/workflows/update-doc.yml | 2 +- release-please-config.json | 2 ++ 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/.github/workflows/update-browserslist-db.yml b/.github/workflows/update-browserslist-db.yml index cb2625fb941..2255d1bb2d8 100644 --- a/.github/workflows/update-browserslist-db.yml +++ b/.github/workflows/update-browserslist-db.yml @@ -28,4 +28,4 @@ jobs: title: "build: update browserslist db" body: "This PR was automatically generated by the update-browserslist-db GitHub action" token: ${{ secrets.ADMIN_TOKEN }} - labels: "chore" + labels: "chore,skip visual snapshots" diff --git a/.github/workflows/update-doc.yml b/.github/workflows/update-doc.yml index 52836f9f088..3f928f574e2 100644 --- a/.github/workflows/update-doc.yml +++ b/.github/workflows/update-doc.yml @@ -27,4 +27,4 @@ jobs: token: ${{ secrets.ADMIN_TOKEN }} title: "docs: update component READMEs" body: This PR was automatically generated by the update-doc GitHub action - labels: "docs" + labels: "docs,skip visual snapshots" diff --git a/release-please-config.json b/release-please-config.json index e5ccdf72b6f..ee4df35ebfc 100644 --- a/release-please-config.json +++ b/release-please-config.json @@ -2,6 +2,8 @@ "$schema": "https://raw.githubusercontent.com/googleapis/release-please/main/schemas/config.json", "release-type": "node", "tag-separator": "@", + "label": "skip visual snapshots", + "draft-pull-request": true, "include-v-in-tag": false, "packages": { "packages/calcite-components": { From d69ebecc644d8580cac1345909f6e751295c41a5 Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Mon, 27 May 2024 17:13:32 -0700 Subject: [PATCH 005/206] ci: upload dist to github releases (#9428) ## Summary Upload dist files to the GitHub Releases after publishing to npm. I'm not sure why I thought release-please was already doing this. I tested locally with the following script, which correctly uploaded the dists, e.g. for release [`@esri/calcite-components: v2.8.0`](https://github.com/Esri/calcite-design-system/releases/tag/%40esri%2Fcalcite-components%402.8.0). ```sh #!/usr/bin/env bash mv support/uploadReleaseAssets.ts /tmp git clean -fdx && git reset --hard git checkout @esri/calcite-components@2.8.0 npm install npm run build mv /tmp/uploadReleaseAssets.ts support/ npx tsx support/uploadReleaseAssets.ts '["packages/calcite-components","packages/calcite-components-react","packages/calcite-components-angular/projects/component-library"]' ``` It might be time to recreate a VM so I can iterate through all the tags with missing dists and add them with the script. --- .github/workflows/deploy-latest.yml | 1 + package.json | 1 + .../projects/component-library/package.json | 27 +++++++------- support/uploadReleaseAssets.ts | 36 +++++++++++++++++++ 4 files changed, 53 insertions(+), 12 deletions(-) create mode 100644 support/uploadReleaseAssets.ts diff --git a/.github/workflows/deploy-latest.yml b/.github/workflows/deploy-latest.yml index 699d913ca7c..5a5c6f504e2 100644 --- a/.github/workflows/deploy-latest.yml +++ b/.github/workflows/deploy-latest.yml @@ -58,6 +58,7 @@ jobs: git commit -m "build: update types and package-lock" || true npm run publish:latest + npm run util:upload-release-assets -- "${{ steps.release.outputs.paths_released }}" env: NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} NPM_CONFIG_PROVENANCE: true diff --git a/package.json b/package.json index f952f2189be..2c82a684bb4 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "test": "turbo run test --log-order=stream", "util:is-next-deployable": "tsx support/isNextDeployable.ts", "util:push-tags": "git push origin main --follow-tags", + "util:upload-release-assets": "tsx support/uploadReleaseAssets.ts", "util:remove-prerelease-changelog-entries": "tsx support/removePrereleaseChangelogEntries.ts", "util:sync-linked-package-versions": "tsx support/syncLinkedPackageVersions.ts" }, diff --git a/packages/calcite-components-angular/projects/component-library/package.json b/packages/calcite-components-angular/projects/component-library/package.json index 2a5eb26c8d8..de7a27e9746 100644 --- a/packages/calcite-components-angular/projects/component-library/package.json +++ b/packages/calcite-components-angular/projects/component-library/package.json @@ -1,34 +1,37 @@ { "name": "@esri/calcite-components-angular", "version": "2.9.0-next.23", - "sideEffects": false, - "homepage": "https://developers.arcgis.com/calcite-design-system/", "description": "A set of Angular components that wrap Esri's Calcite Components.", - "author": { - "name": "Esri" + "homepage": "https://developers.arcgis.com/calcite-design-system/", + "bugs": { + "url": "https://github.com/Esri/calcite-design-system/issues" }, "repository": { "type": "git", "url": "https://github.com/Esri/calcite-design-system.git", "directory": "packages/calcite-components-angular/projects/component-library" }, - "bugs": { - "url": "https://github.com/Esri/calcite-design-system/issues" - }, - "peerDependencies": { - "@angular/common": ">=16.0.0", - "@angular/core": ">=16.0.0" + "license": "SEE LICENSE.md", + "author": { + "name": "Esri" }, + "sideEffects": false, + "files": [ + "dist" + ], "dependencies": { "@esri/calcite-components": "^2.9.0-next.23", "tslib": "2.6.2" }, + "peerDependencies": { + "@angular/common": ">=16.0.0", + "@angular/core": ">=16.0.0" + }, "lerna": { "command": { "publish": { "directory": "./dist" } } - }, - "license": "SEE LICENSE.md" + } } diff --git a/support/uploadReleaseAssets.ts b/support/uploadReleaseAssets.ts new file mode 100644 index 00000000000..4c07f74bc30 --- /dev/null +++ b/support/uploadReleaseAssets.ts @@ -0,0 +1,36 @@ +(async function (): Promise { + try { + const childProcess = await import("child_process"); + const { promisify } = await import("util"); + const { promises: fs } = await import("fs"); + const { resolve } = await import("path"); + const exec = promisify(childProcess.exec); + + // https://github.com/googleapis/release-please-action#outputs + const releasedPackages = JSON.parse(process.argv[2]); + + if (!releasedPackages || !releasedPackages?.length) { + throw new Error("Unable to parse the list of released packages"); + } + + for (const packagePath of releasedPackages) { + const packageJson = JSON.parse(await fs.readFile(resolve(packagePath, "package.json"), "utf8")); + const packageName = packageJson?.name; + const packageVersion = packageJson?.version; + + if (!packageName || !packageVersion) { + console.warn(`Skipping "${packagePath}" because a package.json could not be found/parsed"`); + continue; + } + + const tagName = `${packageName}@${packageVersion}`; + const assetName = `${packageName.replace("@", "").replace("/", "-")}-${packageVersion}.tgz`; + + await exec(`npm pack --workspace ${packagePath} >/dev/null 2>&1`); + await exec(`gh release upload ${tagName} ${assetName}`); + } + } catch (error) { + console.error(error); + process.exit(1); + } +})(); From e43b2b503f4eba1086038610f858b74ed223f3b5 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 27 May 2024 22:19:14 -0700 Subject: [PATCH 006/206] build(deps): update angular monorepo to v17.3.10 (#9431) --- package-lock.json | 106 +++++++++--------- .../calcite-components-angular/package.json | 18 +-- 2 files changed, 62 insertions(+), 62 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6e12db06686..63fd6ffa1e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -241,9 +241,9 @@ } }, "node_modules/@angular/animations": { - "version": "17.3.9", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-17.3.9.tgz", - "integrity": "sha512-9fSFF9Y+pKZGgGEK3IlVy9msS7LRFpD1h2rJ80N6n1k51jiKcTgOcFPPYwLNJZ2fkp+qrOAMo3ez4WYQgVPoow==", + "version": "17.3.10", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-17.3.10.tgz", + "integrity": "sha512-9fR5snTuG4aM2K54TG/6DXcKXMDKZMovZhjQOxO8l68/oqn6fKrHs8DLzckFs0XGRZ+2OyURH8WggFm1Z828rA==", "dependencies": { "tslib": "^2.3.0" }, @@ -251,7 +251,7 @@ "node": "^18.13.0 || >=20.9.0" }, "peerDependencies": { - "@angular/core": "17.3.9" + "@angular/core": "17.3.10" } }, "node_modules/@angular/animations/node_modules/tslib": { @@ -321,9 +321,9 @@ } }, "node_modules/@angular/common": { - "version": "17.3.9", - "resolved": "https://registry.npmjs.org/@angular/common/-/common-17.3.9.tgz", - "integrity": "sha512-tH1VfbAvNVaz6ZYa+q0DiKtbmUql1jK/3q/af74B8nVjKLHcXVWwxvBayqvrmlUt7FGANGkETIcCWrB44k47Ug==", + "version": "17.3.10", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-17.3.10.tgz", + "integrity": "sha512-6SfD21M3LujymmZsZQIxAsV8Bj5u6He6ImZ+p2rr7FAhFxpVJyKldK8LCmJcFsBD4srpQcxEZ0iDxXvg+0ihAw==", "dependencies": { "tslib": "^2.3.0" }, @@ -331,7 +331,7 @@ "node": "^18.13.0 || >=20.9.0" }, "peerDependencies": { - "@angular/core": "17.3.9", + "@angular/core": "17.3.10", "rxjs": "^6.5.3 || ^7.4.0" } }, @@ -341,9 +341,9 @@ "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, "node_modules/@angular/compiler": { - "version": "17.3.9", - "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-17.3.9.tgz", - "integrity": "sha512-2d4bPbNm7O2GanqCj5GFgPDnmjbAcsQM502Jnvcv7Aje82yecT69JoqAVRqGOfbbxwlJiPhi31D8DPdLaOz47Q==", + "version": "17.3.10", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-17.3.10.tgz", + "integrity": "sha512-6Ce4siHyF0fCZBDm/cz+blJByGDu1/hbPkQVGmk5HGZTmCUeKkgyjoM6bZr7ssAsyGDRwxBh2SGHO4Ce31vuPA==", "dependencies": { "tslib": "^2.3.0" }, @@ -351,7 +351,7 @@ "node": "^18.13.0 || >=20.9.0" }, "peerDependencies": { - "@angular/core": "17.3.9" + "@angular/core": "17.3.10" }, "peerDependenciesMeta": { "@angular/core": { @@ -360,9 +360,9 @@ } }, "node_modules/@angular/compiler-cli": { - "version": "17.3.9", - "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-17.3.9.tgz", - "integrity": "sha512-J6aqoz5wqPWaurbZFUZ7iMUlzAJYXzntziJJbalm6ceXfUWEe2Vm67nGUROWCIFvO3kWXvkgYX4ubnqtod2AxA==", + "version": "17.3.10", + "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-17.3.10.tgz", + "integrity": "sha512-85SBphqRj3szac3FbeYgEZ+I6WaAlo5h7JX06BdjOLLiaoIwlFhLeAuG+jVekseV+95grFUxIsCMphWHi2e6hQ==", "dev": true, "dependencies": { "@babel/core": "7.23.9", @@ -383,7 +383,7 @@ "node": "^18.13.0 || >=20.9.0" }, "peerDependencies": { - "@angular/compiler": "17.3.9", + "@angular/compiler": "17.3.10", "typescript": ">=5.2 <5.5" } }, @@ -477,9 +477,9 @@ "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, "node_modules/@angular/core": { - "version": "17.3.9", - "resolved": "https://registry.npmjs.org/@angular/core/-/core-17.3.9.tgz", - "integrity": "sha512-x+h5BQ6islvYWGVLTz1CEgNq1/5IYngQ+Inq/tWayM6jN7RPOCydCCbCw+uOZS7MgFebkP0gYTVm14y1MRFKSQ==", + "version": "17.3.10", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-17.3.10.tgz", + "integrity": "sha512-ocEKu7X0yFCOvgJn1uZy76qjhsjKvULrO1k/BuIX0nwhp61DTGYTvCqKmwCBLM8/gvcKYH5vMKMHoQKtiSGE0A==", "dependencies": { "tslib": "^2.3.0" }, @@ -497,9 +497,9 @@ "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, "node_modules/@angular/forms": { - "version": "17.3.9", - "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-17.3.9.tgz", - "integrity": "sha512-5b8OjK0kLghrdxkVWglgerHVp9D5WvXInXwo1KIyc2v/fGdTlyu/RFi0GLGvzq2y+7Z8TvtXWC82SB47vfx3TQ==", + "version": "17.3.10", + "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-17.3.10.tgz", + "integrity": "sha512-0VZWSXDi2M3DAGJlpdV3lo73Yo/73GPRqmfTOrvIoUIenFg5Dz6oNGzvt/1aRkRn6HKccjix6iMpH91EN65pWA==", "dependencies": { "tslib": "^2.3.0" }, @@ -507,9 +507,9 @@ "node": "^18.13.0 || >=20.9.0" }, "peerDependencies": { - "@angular/common": "17.3.9", - "@angular/core": "17.3.9", - "@angular/platform-browser": "17.3.9", + "@angular/common": "17.3.10", + "@angular/core": "17.3.10", + "@angular/platform-browser": "17.3.10", "rxjs": "^6.5.3 || ^7.4.0" } }, @@ -519,9 +519,9 @@ "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, "node_modules/@angular/platform-browser": { - "version": "17.3.9", - "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.3.9.tgz", - "integrity": "sha512-vMwHO76rnkz7aV3KHKy23KUFAo/+b0+yHPa6AND5Lee8z5C1J/tA2PdetFAsghlQQsX61JeK4MFJV/f3dFm2dw==", + "version": "17.3.10", + "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.3.10.tgz", + "integrity": "sha512-LEhBDOKm2A7nRmZqsafVp6OinRDG1OYZBSqjnT1jZ+f0CRRFIXz6aJ0TMPoU6vq9SLRJ7vrGD9P/eBf2hW00NQ==", "dependencies": { "tslib": "^2.3.0" }, @@ -529,9 +529,9 @@ "node": "^18.13.0 || >=20.9.0" }, "peerDependencies": { - "@angular/animations": "17.3.9", - "@angular/common": "17.3.9", - "@angular/core": "17.3.9" + "@angular/animations": "17.3.10", + "@angular/common": "17.3.10", + "@angular/core": "17.3.10" }, "peerDependenciesMeta": { "@angular/animations": { @@ -540,9 +540,9 @@ } }, "node_modules/@angular/platform-browser-dynamic": { - "version": "17.3.9", - "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-17.3.9.tgz", - "integrity": "sha512-Jmth4hFC4dZsWQRkxB++42sR1pfJUoQbErANrKQMgEPb8H4cLRdB1mAQ6f+OASPBM+FsxDxjXq2kepyLGtF2Vg==", + "version": "17.3.10", + "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-17.3.10.tgz", + "integrity": "sha512-TW6G4+isdHM2ssQTRTobeAKtR2516pJ25BSwRb+9+Jw/ZAEYOOi+KQyofIFYQccaUjb3+LpjRcaZbtZ9m/Ispg==", "dependencies": { "tslib": "^2.3.0" }, @@ -550,10 +550,10 @@ "node": "^18.13.0 || >=20.9.0" }, "peerDependencies": { - "@angular/common": "17.3.9", - "@angular/compiler": "17.3.9", - "@angular/core": "17.3.9", - "@angular/platform-browser": "17.3.9" + "@angular/common": "17.3.10", + "@angular/compiler": "17.3.10", + "@angular/core": "17.3.10", + "@angular/platform-browser": "17.3.10" } }, "node_modules/@angular/platform-browser-dynamic/node_modules/tslib": { @@ -567,9 +567,9 @@ "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, "node_modules/@angular/router": { - "version": "17.3.9", - "resolved": "https://registry.npmjs.org/@angular/router/-/router-17.3.9.tgz", - "integrity": "sha512-0cRF5YBJoDbXGQsRs3wEG+DPvN4PlhEqTa0DkTr9QIDJRg5P1uiDlOclV+w3OxEMsLrmXGmhjauHaWQk07M4LA==", + "version": "17.3.10", + "resolved": "https://registry.npmjs.org/@angular/router/-/router-17.3.10.tgz", + "integrity": "sha512-HlZlR9BOLoEKGOSMjmL5EfYL7F7PeDifbFi0dYWNcrG8zFrVKFklB1cuBdJhfPZgYhDEoGms/EToD71tg5wliA==", "dependencies": { "tslib": "^2.3.0" }, @@ -577,9 +577,9 @@ "node": "^18.13.0 || >=20.9.0" }, "peerDependencies": { - "@angular/common": "17.3.9", - "@angular/core": "17.3.9", - "@angular/platform-browser": "17.3.9", + "@angular/common": "17.3.10", + "@angular/core": "17.3.10", + "@angular/platform-browser": "17.3.10", "rxjs": "^6.5.3 || ^7.4.0" } }, @@ -36306,14 +36306,14 @@ "packages/calcite-components-angular": { "name": "angular-workspace", "dependencies": { - "@angular/animations": "17.3.9", - "@angular/common": "17.3.9", - "@angular/compiler": "17.3.9", - "@angular/core": "17.3.9", - "@angular/forms": "17.3.9", - "@angular/platform-browser": "17.3.9", - "@angular/platform-browser-dynamic": "17.3.9", - "@angular/router": "17.3.9", + "@angular/animations": "17.3.10", + "@angular/common": "17.3.10", + "@angular/compiler": "17.3.10", + "@angular/core": "17.3.10", + "@angular/forms": "17.3.10", + "@angular/platform-browser": "17.3.10", + "@angular/platform-browser-dynamic": "17.3.10", + "@angular/router": "17.3.10", "rxjs": "7.8.1", "tslib": "2.6.2", "zone.js": "0.14.6" @@ -36321,7 +36321,7 @@ "devDependencies": { "@angular-devkit/build-angular": "17.3.8", "@angular/cli": "17.3.8", - "@angular/compiler-cli": "17.3.9", + "@angular/compiler-cli": "17.3.10", "ng-packagr": "17.3.0" } }, diff --git a/packages/calcite-components-angular/package.json b/packages/calcite-components-angular/package.json index 3bfc5039f5f..45f2122ceaf 100644 --- a/packages/calcite-components-angular/package.json +++ b/packages/calcite-components-angular/package.json @@ -11,14 +11,14 @@ "lint:md": "prettier --write \"**/*.md\" >/dev/null && markdownlint \"**/*.md\" --fix --dot --ignore-path .gitignore --ignore-path ../../.gitignore" }, "dependencies": { - "@angular/animations": "17.3.9", - "@angular/common": "17.3.9", - "@angular/compiler": "17.3.9", - "@angular/core": "17.3.9", - "@angular/forms": "17.3.9", - "@angular/platform-browser": "17.3.9", - "@angular/platform-browser-dynamic": "17.3.9", - "@angular/router": "17.3.9", + "@angular/animations": "17.3.10", + "@angular/common": "17.3.10", + "@angular/compiler": "17.3.10", + "@angular/core": "17.3.10", + "@angular/forms": "17.3.10", + "@angular/platform-browser": "17.3.10", + "@angular/platform-browser-dynamic": "17.3.10", + "@angular/router": "17.3.10", "rxjs": "7.8.1", "tslib": "2.6.2", "zone.js": "0.14.6" @@ -26,7 +26,7 @@ "devDependencies": { "@angular-devkit/build-angular": "17.3.8", "@angular/cli": "17.3.8", - "@angular/compiler-cli": "17.3.9", + "@angular/compiler-cli": "17.3.10", "ng-packagr": "17.3.0" }, "volta": { From 5526a21c329d851ee0fed8c6285d1e396a54f69d Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 28 May 2024 09:43:52 -0700 Subject: [PATCH 007/206] build(deps): update dependency @floating-ui/dom to v1.6.5 (#9435) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@floating-ui/dom](https://floating-ui.com) ([source](https://togithub.com/floating-ui/floating-ui/tree/HEAD/packages/dom)) | [`1.6.4` -> `1.6.5`](https://renovatebot.com/diffs/npm/@floating-ui%2fdom/1.6.4/1.6.5) | [![age](https://developer.mend.io/api/mc/badges/age/npm/@floating-ui%2fdom/1.6.5?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@floating-ui%2fdom/1.6.5?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@floating-ui%2fdom/1.6.4/1.6.5?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@floating-ui%2fdom/1.6.4/1.6.5?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes
floating-ui/floating-ui (@​floating-ui/dom) ### [`v1.6.5`](https://togithub.com/floating-ui/floating-ui/blob/HEAD/packages/dom/CHANGELOG.md#165) [Compare Source](https://togithub.com/floating-ui/floating-ui/compare/@floating-ui/dom@1.6.4...@floating-ui/dom@1.6.5) ##### Patch Changes - fix: correctly calculate `` arrow element `offsetParent`. Fixes arrow positioning when styling an inner element of the floating element with a border. - fix: ignore `clippingAncestors` collision boundary for top layer elements - fix(types): correct `OffsetOptions` alias
--- ### Configuration 📅 **Schedule**: Branch creation - "before 5am every weekday" in timezone America/Los_Angeles, Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/Esri/calcite-design-system). Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package-lock.json | 8 ++++---- packages/calcite-components/package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 63fd6ffa1e4..a72c412fc75 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3849,9 +3849,9 @@ } }, "node_modules/@floating-ui/dom": { - "version": "1.6.4", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.4.tgz", - "integrity": "sha512-0G8R+zOvQsAG1pg2Q99P21jiqxqGBW1iRe/iXHsBRBxnpXKFI8QwbB4x5KmYLggNO5m34IQgOIu9SCRfR/WWiQ==", + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz", + "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==", "dependencies": { "@floating-ui/core": "^1.0.0", "@floating-ui/utils": "^0.2.0" @@ -36279,7 +36279,7 @@ "version": "2.9.0-next.23", "license": "SEE LICENSE.md", "dependencies": { - "@floating-ui/dom": "1.6.4", + "@floating-ui/dom": "1.6.5", "@stencil/core": "4.18.2", "@types/color": "3.0.6", "color": "4.2.3", diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index 785e6508ab0..b6fd5d64956 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -62,7 +62,7 @@ "directory": "packages/calcite-components" }, "dependencies": { - "@floating-ui/dom": "1.6.4", + "@floating-ui/dom": "1.6.5", "@stencil/core": "4.18.2", "@types/color": "3.0.6", "color": "4.2.3", From cb76930d5a845abcb4614536bcd77187a38d762b Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Tue, 28 May 2024 12:01:20 -0700 Subject: [PATCH 008/206] ci: combine related actions into single workflow file (#9434) ## Summary Combine actions that are triggered on the same event into a single workflow file. This will improve performance, because it won't have to create/destroy as many containers. Additionally, this will cut down on concurrent jobs, which might prevent actions from being "queued". However, I'm not sure if we are reaching the [usage limit](https://docs.github.com/en/actions/learn-github-actions/usage-limits-billing-and-administration#usage-limits), which is 500 concurrent jobs for the whole Enterprise organization. The action that runs tests a second time for the eslint plugin was also removed. --- .github/workflows/add-esri-product-label.yml | 14 ----- .github/workflows/add-package-label.yml | 14 ----- .github/workflows/add-priority-label.yml | 14 ----- .github/workflows/assign-for-verification.yml | 17 ------ .github/workflows/issue-add-labels.yml | 30 ++++++++++ .github/workflows/issue-notifications.yaml | 53 ++++++++++++++++++ .github/workflows/new-component-notify.yml | 16 ------ .github/workflows/pr-bot.yml | 15 +++-- ...tests_eslint-plugin-calcite-components.yml | 27 --------- .github/workflows/ready-for-dev.yml | 21 ------- .github/workflows/schedule-updates.yml | 56 +++++++++++++++++++ .github/workflows/spike-complete.yml | 21 ------- .github/workflows/update-browserslist-db.yml | 31 ---------- .github/workflows/update-doc.yml | 30 ---------- 14 files changed, 146 insertions(+), 213 deletions(-) delete mode 100644 .github/workflows/add-esri-product-label.yml delete mode 100644 .github/workflows/add-package-label.yml delete mode 100644 .github/workflows/add-priority-label.yml delete mode 100644 .github/workflows/assign-for-verification.yml create mode 100644 .github/workflows/issue-add-labels.yml create mode 100644 .github/workflows/issue-notifications.yaml delete mode 100644 .github/workflows/new-component-notify.yml delete mode 100644 .github/workflows/pr-tests_eslint-plugin-calcite-components.yml delete mode 100644 .github/workflows/ready-for-dev.yml create mode 100644 .github/workflows/schedule-updates.yml delete mode 100644 .github/workflows/spike-complete.yml delete mode 100644 .github/workflows/update-browserslist-db.yml delete mode 100644 .github/workflows/update-doc.yml diff --git a/.github/workflows/add-esri-product-label.yml b/.github/workflows/add-esri-product-label.yml deleted file mode 100644 index 695ec194f3b..00000000000 --- a/.github/workflows/add-esri-product-label.yml +++ /dev/null @@ -1,14 +0,0 @@ -name: Add Esri Product Label -on: - issues: - types: [opened, edited] -jobs: - label: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - uses: actions/github-script@v7 - with: - script: | - const action = require('${{ github.workspace }}/.github/scripts/addEsriProductLabel.js') - await action({github, context, core}) diff --git a/.github/workflows/add-package-label.yml b/.github/workflows/add-package-label.yml deleted file mode 100644 index e741eb7ce4a..00000000000 --- a/.github/workflows/add-package-label.yml +++ /dev/null @@ -1,14 +0,0 @@ -name: Add Package Label -on: - issues: - types: [opened, edited] -jobs: - label: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - uses: actions/github-script@v7 - with: - script: | - const action = require('${{ github.workspace }}/.github/scripts/addCalcitePackageLabel.js') - await action({github, context, core}) diff --git a/.github/workflows/add-priority-label.yml b/.github/workflows/add-priority-label.yml deleted file mode 100644 index a43b2a5d008..00000000000 --- a/.github/workflows/add-priority-label.yml +++ /dev/null @@ -1,14 +0,0 @@ -name: Add Priority Label -on: - issues: - types: [opened, edited] -jobs: - label: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - uses: actions/github-script@v7 - with: - script: | - const action = require('${{ github.workspace }}/.github/scripts/addPriorityLabel.js') - await action({github, context, core}) diff --git a/.github/workflows/assign-for-verification.yml b/.github/workflows/assign-for-verification.yml deleted file mode 100644 index e96e6642f4d..00000000000 --- a/.github/workflows/assign-for-verification.yml +++ /dev/null @@ -1,17 +0,0 @@ -name: Verify Install -on: - issues: - types: [labeled] -jobs: - assign: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - uses: actions/github-script@v7 - env: - ISSUE_VERIFIERS: ${{secrets.ISSUE_VERIFIERS}} - CALCITE_DESIGNERS: ${{secrets.CALCITE_DESIGNERS}} - with: - script: | - const action = require('${{ github.workspace }}/.github/scripts/assignForVerification.js') - await action({github, context, core}) diff --git a/.github/workflows/issue-add-labels.yml b/.github/workflows/issue-add-labels.yml new file mode 100644 index 00000000000..f613be997c2 --- /dev/null +++ b/.github/workflows/issue-add-labels.yml @@ -0,0 +1,30 @@ +name: Add Issue Labels +on: + issues: + types: [opened, edited] +jobs: + product-label: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - name: Add Esri Product Label + uses: actions/github-script@v7 + with: + script: | + const action = require('${{ github.workspace }}/.github/scripts/addEsriProductLabel.js') + await action({github, context, core}) + + - name: Add Calcite Package Label + uses: actions/github-script@v7 + with: + script: | + const action = require('${{ github.workspace }}/.github/scripts/addCalcitePackageLabel.js') + await action({github, context, core}) + + - name: Add Priority Label + uses: actions/github-script@v7 + with: + script: | + const action = require('${{ github.workspace }}/.github/scripts/addPriorityLabel.js') + await action({github, context, core}) diff --git a/.github/workflows/issue-notifications.yaml b/.github/workflows/issue-notifications.yaml new file mode 100644 index 00000000000..becbe777ac1 --- /dev/null +++ b/.github/workflows/issue-notifications.yaml @@ -0,0 +1,53 @@ +name: Issue Notifications +on: + issues: + types: [labeled] +jobs: + determine-action: + runs-on: ubuntu-latest + permissions: + issues: write + steps: + - uses: actions/checkout@v4 + + - name : "Assign for verification" + if: github.event.label.name == '3 - installed' + uses: actions/github-script@v7 + env: + ISSUE_VERIFIERS: ${{secrets.ISSUE_VERIFIERS}} + CALCITE_DESIGNERS: ${{secrets.CALCITE_DESIGNERS}} + with: + script: | + const action = require('${{ github.workspace }}/.github/scripts/assignForVerification.js') + await action({github, context, core}) + + - name: "Spike complete notification" + if: github.event.label.name == 'spike complete' + uses: actions/github-script@v7 + env: + managers: ${{secrets.CALCITE_MANAGERS}} + with: + script: | + const action = require('${{ github.workspace }}/.github/scripts/notifyWhenSpikeComplete.js') + await action({github, context, core}) + + - name: "Ready for dev notification" + if: github.event.label.name == 'ready for dev' + uses: actions/github-script@v7 + env: + managers: ${{secrets.CALCITE_MANAGERS}} + with: + script: | + const action = require('${{ github.workspace }}/.github/scripts/notifyWhenReadyForDev.js') + await action({github, context, core}) + + - name: "New component notification" + if: github.event.label.name == 'new component' + uses: actions/github-script@v7 + env: + designers: ${{secrets.CALCITE_DESIGNERS}} + with: + script: | + const action = require('${{ github.workspace }}/.github/scripts/notifyAboutNewComponent.js') + await action({github, context, core}) + diff --git a/.github/workflows/new-component-notify.yml b/.github/workflows/new-component-notify.yml deleted file mode 100644 index 6eb5f5fd2a4..00000000000 --- a/.github/workflows/new-component-notify.yml +++ /dev/null @@ -1,16 +0,0 @@ -name: "Notify CC Designer Leads of New Component Issue" -on: - issues: - types: [labeled] -jobs: - notify-designer-new-component: - if: github.event.label.name == 'new component' - runs-on: ubuntu-latest - steps: - - uses: actions/github-script@v7 - env: - designers: ${{secrets.CALCITE_DESIGNERS}} - with: - script: | - const action = require('${{ github.workspace }}/.github/scripts/notifyAboutNewComponent.js') - await action({github, context, core}) diff --git a/.github/workflows/pr-bot.yml b/.github/workflows/pr-bot.yml index c1fc87dd027..44f06760a26 100644 --- a/.github/workflows/pr-bot.yml +++ b/.github/workflows/pr-bot.yml @@ -6,22 +6,21 @@ permissions: pull-requests: write issues: write jobs: - assign-author: + assign-and-label: if: github.event.pull_request.user.login != 'dependabot[bot]' && github.event.pull_request.user.login != 'renovate[bot]' runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - - uses: actions/github-script@v7 + + - name: "Assign author" + uses: actions/github-script@v7 with: script: | const action = require('${{ github.workspace }}/.github/scripts/assignPullRequestAuthor.js') await action({github, context, core}) - label-type: - if: github.event.pull_request.user.login != 'dependabot[bot]' && github.event.pull_request.user.login != 'renovate[bot]' - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - uses: actions/github-script@v7 + + - name: "Add commit type label" + uses: actions/github-script@v7 with: script: | const action = require('${{ github.workspace }}/.github/scripts/labelPullRequestWithCommitType.js') diff --git a/.github/workflows/pr-tests_eslint-plugin-calcite-components.yml b/.github/workflows/pr-tests_eslint-plugin-calcite-components.yml deleted file mode 100644 index 5eecf132457..00000000000 --- a/.github/workflows/pr-tests_eslint-plugin-calcite-components.yml +++ /dev/null @@ -1,27 +0,0 @@ -name: Run eslint-plugin-calcite-components tests - -on: - pull_request: - paths: ["packages/eslint-plugin-calcite-components/**"] - branches: [main, rc, hotfix] - push: - paths: ["packages/eslint-plugin-calcite-components/**"] - branches: [main, rc, hotfix] - -jobs: - build: - runs-on: ubuntu-latest - steps: - - name: Checkout Repository - uses: actions/checkout@v4 - - name: Setup Node - uses: actions/setup-node@v4 - with: - node-version-file: package.json - - name: npm install, build, and test - run: | - npm install - npm run build --workspace=packages/eslint-plugin-calcite-components - npm test --workspace=packages/eslint-plugin-calcite-components - env: - CI: true diff --git a/.github/workflows/ready-for-dev.yml b/.github/workflows/ready-for-dev.yml deleted file mode 100644 index e16ea406ab2..00000000000 --- a/.github/workflows/ready-for-dev.yml +++ /dev/null @@ -1,21 +0,0 @@ -name: "Ready for dev" - -on: - issues: - types: [labeled] - -jobs: - ready-for-dev: - if: github.event.label.name == 'ready for dev' - permissions: - issues: write - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - uses: actions/github-script@v7 - env: - managers: ${{secrets.CALCITE_MANAGERS}} - with: - script: | - const action = require('${{ github.workspace }}/.github/scripts/notifyWhenReadyForDev.js') - await action({github, context, core}) diff --git a/.github/workflows/schedule-updates.yml b/.github/workflows/schedule-updates.yml new file mode 100644 index 00000000000..a8e278c1723 --- /dev/null +++ b/.github/workflows/schedule-updates.yml @@ -0,0 +1,56 @@ +name: Schedule Updates +on: + workflow_dispatch: + schedule: + - cron: "0 0 * * *" +jobs: + component-docs: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version-file: package.json + - name: generate doc + run: | + npm install + npm --workspace=@esri/calcite-design-tokens run build + npm --workspace=@esri/eslint-plugin-calcite-components run build + npx --workspace=@esri/calcite-components stencil build --docs + npm run --workspace=@esri/calcite-components lint:md + - name: Commit and create pull request + uses: peter-evans/create-pull-request@v4 + with: + base: main + branch: ci/update-component-docs + commit-message: "docs: update component READMEs" + token: ${{ secrets.ADMIN_TOKEN }} + title: "docs: update component READMEs" + body: This PR was automatically generated by the update-doc GitHub action + labels: "docs,skip visual snapshots" + + browserslist-db: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + with: + fetch-depth: 0 + - uses: actions/setup-node@v4 + with: + node-version-file: package.json + cache: npm + - name: Run update-browserslist-db + run: | + git config --global user.email "github-actions[bot]@users.noreply.github.com" + git config --global user.name "github-actions[bot]" + npx update-browserslist-db@latest + - name: Commit and create pull request + uses: peter-evans/create-pull-request@v4 + with: + base: main + branch: ci/update-browserslist-db + commit-message: "build: update browserslist db" + title: "build: update browserslist db" + body: "This PR was automatically generated by the update-browserslist-db GitHub action" + token: ${{ secrets.ADMIN_TOKEN }} + labels: "chore,skip visual snapshots" diff --git a/.github/workflows/spike-complete.yml b/.github/workflows/spike-complete.yml deleted file mode 100644 index eff338f4eb9..00000000000 --- a/.github/workflows/spike-complete.yml +++ /dev/null @@ -1,21 +0,0 @@ -name: "Spike complete" - -on: - issues: - types: [labeled] - -jobs: - ready-for-dev: - if: github.event.label.name == 'spike complete' - permissions: - issues: write - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - uses: actions/github-script@v7 - env: - managers: ${{secrets.CALCITE_MANAGERS}} - with: - script: | - const action = require('${{ github.workspace }}/.github/scripts/notifyWhenSpikeComplete.js') - await action({github, context, core}) diff --git a/.github/workflows/update-browserslist-db.yml b/.github/workflows/update-browserslist-db.yml deleted file mode 100644 index 2255d1bb2d8..00000000000 --- a/.github/workflows/update-browserslist-db.yml +++ /dev/null @@ -1,31 +0,0 @@ -name: "Update browserslist db" -on: - workflow_dispatch: - schedule: - - cron: "0 0 * * 0" -jobs: - update: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - with: - fetch-depth: 0 - - uses: actions/setup-node@v4 - with: - node-version-file: package.json - cache: npm - - name: Run update-browserslist-db - run: | - git config --global user.email "github-actions[bot]@users.noreply.github.com" - git config --global user.name "github-actions[bot]" - npx update-browserslist-db@latest - - name: create pull request - uses: peter-evans/create-pull-request@v4 - with: - base: main - branch: update-browserslist-db - commit-message: "build: update browserslist db" - title: "build: update browserslist db" - body: "This PR was automatically generated by the update-browserslist-db GitHub action" - token: ${{ secrets.ADMIN_TOKEN }} - labels: "chore,skip visual snapshots" diff --git a/.github/workflows/update-doc.yml b/.github/workflows/update-doc.yml deleted file mode 100644 index 3f928f574e2..00000000000 --- a/.github/workflows/update-doc.yml +++ /dev/null @@ -1,30 +0,0 @@ -name: "Update component doc" -on: - workflow_dispatch: - schedule: - - cron: "45 0 * * *" -jobs: - update-component-doc: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 - with: - node-version-file: package.json - - name: generate doc - run: | - npm install - npm --workspace=@esri/calcite-design-tokens run build - npm --workspace=@esri/eslint-plugin-calcite-components run build - npx --workspace=@esri/calcite-components stencil build --docs - npm run --workspace=@esri/calcite-components lint:md - - name: commit readme files/create pull request - uses: peter-evans/create-pull-request@v4 - with: - base: main - branch: doc-update - commit-message: "docs: update component READMEs" - token: ${{ secrets.ADMIN_TOKEN }} - title: "docs: update component READMEs" - body: This PR was automatically generated by the update-doc GitHub action - labels: "docs,skip visual snapshots" From 9e297ce32526a8d217c68fac220aba0776c48a15 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 28 May 2024 12:07:17 -0700 Subject: [PATCH 009/206] build(deps): update dependency axe-core to v4.9.1 (#9436) --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index a72c412fc75..f88a2867960 100644 --- a/package-lock.json +++ b/package-lock.json @@ -54,7 +54,7 @@ "@typescript-eslint/parser": "7.7.1", "@whitespace/storybook-addon-html": "6.0.4", "autoprefixer": "10.4.19", - "axe-core": "4.9.0", + "axe-core": "4.9.1", "babel-loader": "9.1.3", "change-case": "4.1.2", "cheerio": "1.0.0-rc.12", @@ -10530,9 +10530,9 @@ } }, "node_modules/axe-core": { - "version": "4.9.0", - "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.0.tgz", - "integrity": "sha512-H5orY+M2Fr56DWmMFpMrq5Ge93qjNdPVqzBv5gWK3aD1OvjBEJlEzxf09z93dGVQeI0LiW+aCMIx1QtShC/zUw==", + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.1.tgz", + "integrity": "sha512-QbUdXJVTpvUTHU7871ppZkdOLBeGUKBQWHkHrvN2V9IQWGMt61zf3B45BtzjxEJzYuj0JBjBZP/hmYS/R9pmAw==", "dev": true, "engines": { "node": ">=4" diff --git a/package.json b/package.json index 2c82a684bb4..c491dd13a57 100644 --- a/package.json +++ b/package.json @@ -69,7 +69,7 @@ "@typescript-eslint/parser": "7.7.1", "@whitespace/storybook-addon-html": "6.0.4", "autoprefixer": "10.4.19", - "axe-core": "4.9.0", + "axe-core": "4.9.1", "babel-loader": "9.1.3", "change-case": "4.1.2", "cheerio": "1.0.0-rc.12", From ff5630cfc020bfdde42bedf2c2f08390c627110a Mon Sep 17 00:00:00 2001 From: Ben Elan Date: Tue, 28 May 2024 12:42:52 -0700 Subject: [PATCH 010/206] build: remove unnecessary dist files before publishing (#9439) ## Summary Remove unnecessary files that somehow ended up in `dist` before publishing to NPM. --- packages/calcite-components/package.json | 1 + .../calcite-components/support/cleanupDistFiles.sh | 12 ++++++++++++ 2 files changed, 13 insertions(+) create mode 100755 packages/calcite-components/support/cleanupDistFiles.sh diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index b6fd5d64956..3a7fef0d2f8 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -32,6 +32,7 @@ "lint:md": "prettier --write \"**/*.md\" >/dev/null && markdownlint \"**/*.md\" --fix --dot --ignore-path .gitignore", "lint:scss": "stylelint --fix \"src/**/*.scss\" && prettier --write \"**/*.scss\" >/dev/null", "lint:ts": "eslint --ext .ts,.tsx --fix . && prettier --write \"**/*.ts?(x)\" >/dev/null", + "prepublish": "./support/cleanupDistFiles.sh", "posttest": "npm run test:prerender", "screenshot-tests": "storybook build", "screenshot-tests:preview": "npm run util:prep-storybook-build && NODE_OPTIONS=--openssl-legacy-provider STORYBOOK_SCREENSHOT_LOCAL_BUILD=true storybook dev", diff --git a/packages/calcite-components/support/cleanupDistFiles.sh b/packages/calcite-components/support/cleanupDistFiles.sh new file mode 100755 index 00000000000..ace7f4869d0 --- /dev/null +++ b/packages/calcite-components/support/cleanupDistFiles.sh @@ -0,0 +1,12 @@ +#!/usr/bin/env bash + +# Remove unnecessary files that ended up in dist before publishing to NPM. +# This is a temporary workaround until I figure out why they are being bundled. +# +# The images in the demos folder first appeared in the dist in v1.4.0 after this PR: +# https://github.com/Esri/calcite-design-system/pull/6873 +# +# The rest of the files showed up in v2 and are likely related to the Stencil v4 bump. +rm -rf ./dist/collection/demos ./dist/collection/tests ./dist/.storybook/ \ + ./dist/tailwind.config.js{,.map} ./dist/stencil.config.js{,.map} \ + ./dist/calcite-preset.js{,.map} ./dist/types/tests ./dist/types/home From 22b2fb1b9d931ee0678ff2527390985ec01dde29 Mon Sep 17 00:00:00 2001 From: Abraham Preciado Morales Date: Tue, 28 May 2024 12:57:55 -0700 Subject: [PATCH 011/206] refactor(storybook): replace fake knobs with controls for simple stories (#9385) **Related Issue:** [9084](https://github.com/Esri/calcite-design-system/issues/9084) ## Summary -Replaces knobs with controls for `simple` stories. -Removes knobs used in all other stories. -Replaces usage of `createComponentHTML` and related utils with HTML. --- package-lock.json | 16 + package.json | 1 + .../.storybook/fake-knobs.ts | 39 -- .../calcite-components/.storybook/helpers.ts | 2 - .../.storybook/interfaces.ts | 56 +++ .../calcite-components/.storybook/main.ts | 1 + .../.storybook/resources.ts | 181 ++++++++- .../calcite-components/.storybook/utils.ts | 48 +-- .../calcite-components/src/components.d.ts | 98 +++++ .../components/accordion/accordion.stories.ts | 349 +++++++---------- .../action-bar/action-bar.stories.ts | 133 +++---- .../action-group/action-group.stories.ts | 31 +- .../action-pad/action-pad.stories.ts | 126 +++--- .../src/components/action/action.stories.ts | 370 ++++++++---------- .../src/components/alert/alert.stories.ts | 105 ++--- .../src/components/avatar/avatar.stories.ts | 47 ++- .../src/components/block/block.stories.ts | 232 +++++------ .../src/components/button/button.stories.ts | 183 +++++---- .../card-group/card-group.stories.ts | 66 ++-- .../src/components/card/card.stories.ts | 185 +++++---- .../components/carousel/carousel.stories.ts | 42 +- .../components/checkbox/checkbox.stories.ts | 56 ++- .../chip-group/chip-group.stories.ts | 31 +- .../src/components/chip/chip.stories.ts | 118 +++--- .../color-picker-swatch.stories.ts | 20 +- .../color-picker/color-picker.stories.ts | 124 ++---- .../components/combobox/combobox.stories.ts | 66 +--- .../date-picker/date-picker.stories.ts | 301 ++++++-------- .../components/dropdown/dropdown.stories.ts | 211 ++++------ .../src/components/fab/fab.stories.ts | 154 +++----- .../components/flow-item/flow-item.stories.ts | 181 +++------ .../src/components/flow/flow.stories.ts | 95 +++-- .../src/components/graph/graph.stories.ts | 56 +-- .../src/components/icon/icon.stories.ts | 42 +- .../inline-editable.stories.ts | 81 ++-- .../input-date-picker.stories.ts | 92 +++-- .../input-number/input-number.stories.ts | 160 +++++--- .../input-text/input-text.stories.ts | 109 ++++-- .../input-time-picker.stories.ts | 72 +++- .../input-time-zone.stories.ts | 56 ++- .../src/components/input/input.stories.ts | 201 ++++++---- .../src/components/link/link.stories.ts | 106 ++--- .../src/components/list/list.stories.ts | 80 +++- .../src/components/loader/loader.stories.ts | 49 ++- .../components/menu-item/menu-item.stories.ts | 85 ++-- .../src/components/menu/menu.stories.ts | 34 +- .../src/components/meter/meter.stories.ts | 108 +++-- .../src/components/modal/modal.stories.ts | 73 ++-- .../navigation-logo.stories.ts | 22 +- .../navigation-user.stories.ts | 34 +- .../src/components/notice/notice.stories.ts | 109 +++--- .../pagination/pagination.stories.ts | 54 ++- .../src/components/panel/panel.stories.ts | 181 +++------ .../components/pick-list/pick-list.stories.ts | 216 ++++------ .../src/components/popover/popover.stories.ts | 78 ++-- .../components/progress/progress.stories.ts | 31 +- .../radio-button-group.stories.ts | 48 ++- .../radio-button/radio-button.stories.ts | 56 ++- .../src/components/rating/rating.stories.ts | 59 ++- .../src/components/scrim/scrim.stories.ts | 14 +- .../segmented-control.stories.ts | 93 +++-- .../src/components/select/select.stories.ts | 262 +++++-------- .../src/components/sheet/sheet.stories.ts | 43 +- .../src/components/shell/shell.stories.ts | 214 +++++----- .../src/components/slider/slider.stories.ts | 319 +++++++-------- .../split-button/split-button.stories.ts | 144 ++++--- .../src/components/stack/stack.stories.ts | 2 +- .../src/components/stepper/stepper.stories.ts | 199 +++++----- .../src/components/switch/switch.stories.ts | 39 +- .../src/components/table/table.stories.ts | 92 ++++- .../src/components/tabs/tabs.stories.ts | 89 ++--- .../components/text-area/text-area.stories.ts | 95 +++-- .../tile-group/tile-group.stories.ts | 52 ++- .../tile-select-group.stories.ts | 154 ++++++-- .../tile-select/tile-select.stories.ts | 167 +++----- .../src/components/tile/tile.stories.ts | 59 ++- .../time-picker/time-picker.stories.ts | 68 +++- .../tip-manager/tip-manager.stories.ts | 51 +-- .../src/components/tip/tip.stories.ts | 78 ++-- .../src/components/tooltip/tooltip.stories.ts | 48 ++- .../src/components/tree/tree.stories.ts | 89 +++-- .../value-list/value-list.stories.ts | 190 ++++----- .../src/custom-theme.stories.ts | 100 +++-- 83 files changed, 4586 insertions(+), 4035 deletions(-) delete mode 100644 packages/calcite-components/.storybook/fake-knobs.ts create mode 100644 packages/calcite-components/.storybook/interfaces.ts diff --git a/package-lock.json b/package-lock.json index f88a2867960..3d01e95f134 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "@rollup/plugin-node-resolve": "15.2.3", "@rollup/plugin-typescript": "11.1.6", "@storybook/addon-a11y": "8.0.9", + "@storybook/addon-controls": "8.0.9", "@storybook/addon-docs": "8.0.9", "@storybook/addon-interactions": "8.0.9", "@storybook/addon-mdx-gfm": "8.0.9", @@ -7048,6 +7049,21 @@ "url": "https://opencollective.com/storybook" } }, + "node_modules/@storybook/addon-controls": { + "version": "8.0.9", + "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-8.0.9.tgz", + "integrity": "sha512-wWdmd62UP/sfPm8M7aJjEA+kEXTUIR/QsYi9PoYBhBZcXiikZ4kNan7oD7GfsnzGGKHrBVfwQhO+TqaENGYytA==", + "dev": true, + "dependencies": { + "@storybook/blocks": "8.0.9", + "lodash": "^4.17.21", + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, "node_modules/@storybook/addon-docs": { "version": "8.0.9", "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-8.0.9.tgz", diff --git a/package.json b/package.json index c491dd13a57..3ed10e8484c 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "@rollup/plugin-node-resolve": "15.2.3", "@rollup/plugin-typescript": "11.1.6", "@storybook/addon-a11y": "8.0.9", + "@storybook/addon-controls": "8.0.9", "@storybook/addon-docs": "8.0.9", "@storybook/addon-interactions": "8.0.9", "@storybook/addon-mdx-gfm": "8.0.9", diff --git a/packages/calcite-components/.storybook/fake-knobs.ts b/packages/calcite-components/.storybook/fake-knobs.ts deleted file mode 100644 index 68c5bba3bba..00000000000 --- a/packages/calcite-components/.storybook/fake-knobs.ts +++ /dev/null @@ -1,39 +0,0 @@ -/* - * This is a fake version of the knobs API that is used in Storybook stories. - * - * `@storybook/addon-knobs` does not support Storybook v8+, so this is a placeholder to upgrade to v8 while we discuss the future of knobs. - */ - -export function select(_name: string, _options: string[], defaultValue: string, _groupName?: string): string { - return defaultValue; -} - -export function text(_name: string, defaultValue: string, _groupName?: string): string { - return defaultValue; -} - -export function color(_name: string, defaultValue: string, _groupName?: string): string { - return defaultValue; -} - -export function boolean( - name: string, - defaultValue: boolean, - _groupName?: string, - mode: "prop" | "attr" = "attr", -): string | boolean { - if (mode === "prop") { - // this mode is for backwards-compatibility with the createComponentHTML util - return defaultValue; - } - - return defaultValue ? name : ""; -} - -export function array(_name: string, defaultValue: string[], _groupName?: string): string[] { - return defaultValue; -} - -export function number(_name: string, defaultValue: number, _groupName?: string): number { - return defaultValue; -} diff --git a/packages/calcite-components/.storybook/helpers.ts b/packages/calcite-components/.storybook/helpers.ts index c90070bbd3f..bfbc47b755f 100644 --- a/packages/calcite-components/.storybook/helpers.ts +++ b/packages/calcite-components/.storybook/helpers.ts @@ -10,5 +10,3 @@ export const iconNames = Object.keys(icons) .replace(iPrefixedNumberIconNamePattern, "$1") .localeCompare(b.replace(iPrefixedNumberIconNamePattern, "$1")); }); - -export { boolean } from "./fake-knobs"; diff --git a/packages/calcite-components/.storybook/interfaces.ts b/packages/calcite-components/.storybook/interfaces.ts new file mode 100644 index 00000000000..594ef97e87e --- /dev/null +++ b/packages/calcite-components/.storybook/interfaces.ts @@ -0,0 +1,56 @@ +/* Note: using `.d.ts` file extension will exclude it from the output build */ +export type Alignment = "start" | "center" | "end"; +export type Appearance = "solid" | "outline" | "outline-fill" | "transparent"; +export type Columns = 1 | 2 | 3 | 4 | 5 | 6; +export type FlipContext = "both" | "start" | "end"; +export type Kind = "brand" | "danger" | "info" | "inverse" | "neutral" | "warning" | "success"; +export type Layout = + | "horizontal" + | "vertical" + | "grid" + | "inline" + | "center" + | "auto" + | "fixed" + | "none" + | "horizontal-single"; +export type LogicalFlowPosition = "inline-start" | "inline-end" | "block-start" | "block-end"; +export type ModeClass = "calcite-mode-light" | "calcite-mode-dark" | "calcite-mode-auto"; +export type ModeName = "light" | "dark" | "auto"; +export type Position = "start" | "end" | "top" | "bottom"; +export type SelectionAppearance = "icon" | "border"; +export type SelectionMode = + | "single" + | "none" + | "children" + | "single-persist" + | "multichildren" + | "ancestors" + | "multiple"; +export type Scale = "s" | "m" | "l"; +export type Status = "invalid" | "valid" | "idle"; +export type Width = "auto" | "half" | "full"; +export type ArrowType = "inline" | "edge" | "none"; +export type DisplayMode = "dock" | "float" | "overlay"; +export type ToggleDisplay = "button" | "switch"; +export type Dir = "ltr" | "rtl"; +export type ButtonType = "radio" | "checkbox"; +export type InteractionMode = "interactive" | "static"; +export type IconType = "chevron" | "caret" | "ellipsis" | "overflow"; +export type DeterminateType = "determinate" | "indeterminate"; +export type FillType = "single" | "range"; +export type LabelType = "percent" | "units"; +export type ClickType = "click" | "hover"; +export type CollapseDirection = "down" | "up"; +export type TextType = + | "text" + | "textarea" + | "email" + | "password" + | "tel" + | "number" + | "search" + | "file" + | "time" + | "date"; +export type Mode = "offset" | "name"; diff --git a/packages/calcite-components/.storybook/main.ts b/packages/calcite-components/.storybook/main.ts index 5399acb6aba..25e1f00c30f 100644 --- a/packages/calcite-components/.storybook/main.ts +++ b/packages/calcite-components/.storybook/main.ts @@ -2,6 +2,7 @@ module.exports = { addons: [ "@storybook/addon-a11y", "@storybook/addon-docs", + "@storybook/addon-controls", "@storybook/addon-interactions", "@storybook/addon-mdx-gfm", "@storybook/addon-themes", diff --git a/packages/calcite-components/.storybook/resources.ts b/packages/calcite-components/.storybook/resources.ts index b7182263aed..6d2a0e4f25b 100644 --- a/packages/calcite-components/.storybook/resources.ts +++ b/packages/calcite-components/.storybook/resources.ts @@ -1,4 +1,30 @@ -import { Alignment, Appearance, LogicalFlowPosition, Position, Scale } from "../src/components/interfaces"; +import { + Alignment, + Appearance, + LogicalFlowPosition, + Position, + Scale, + Status, + Kind, + Width, + SelectionMode, + ArrowType, + DisplayMode, + ToggleDisplay, + Layout, + Dir, + ButtonType, + InteractionMode, + IconType, + DeterminateType, + FillType, + LabelType, + ClickType, + CollapseDirection, + TextType, + Mode, + SelectionAppearance, +} from "./interfaces"; interface AttributeMetadata { values: T[]; @@ -11,13 +37,82 @@ interface CommonAttributes { scale: AttributeMetadata; logicalFlowPosition: AttributeMetadata; position: AttributeMetadata; + status: AttributeMetadata; + kind: AttributeMetadata; + width: AttributeMetadata; + selectionMode: AttributeMetadata; + arrowType: AttributeMetadata; + displayMode: AttributeMetadata; + toggleDisplay: AttributeMetadata; + layout: AttributeMetadata; + dir: AttributeMetadata; + buttonType: AttributeMetadata; + interactionMode: AttributeMetadata; + iconType: AttributeMetadata; + determinateType: AttributeMetadata; + fillType: AttributeMetadata; + labelType: AttributeMetadata; + clickType: AttributeMetadata; + collapseDirection: AttributeMetadata; + textType: AttributeMetadata; + mode: AttributeMetadata; + selectionAppearance: AttributeMetadata; } const logicalFlowPositionOptions: LogicalFlowPosition[] = ["inline-start", "inline-end", "block-start", "block-end"]; -const positionOptions: Position[] = ["start", "end"]; +const positionOptions: Position[] = ["start", "end", "top", "bottom"]; const scaleOptions: Scale[] = ["s", "m", "l"]; const alignmentOptions: Alignment[] = ["start", "center", "end"]; -const appearanceOptions: Appearance[] = ["solid", "transparent", "outline"]; +const appearanceOptions: Appearance[] = ["solid", "outline", "outline-fill", "transparent"]; +const statusOptions: Status[] = ["invalid", "valid", "idle"]; +const kindOptions: Kind[] = ["brand", "danger", "info", "inverse", "neutral", "warning", "success"]; +const widthOptions: Width[] = ["auto", "half", "full"]; +const selectionModeOptions: SelectionMode[] = [ + "single", + "none", + "children", + "single-persist", + "multichildren", + "ancestors", + "multiple", +]; +const arrowTypeOptions: ArrowType[] = ["inline", "edge", "none"]; +const displayModeOptions: DisplayMode[] = ["dock", "float", "overlay"]; +const toggleDisplayOptions: ToggleDisplay[] = ["button", "switch"]; +const layoutOptions: Layout[] = [ + "horizontal", + "vertical", + "grid", + "inline", + "center", + "auto", + "fixed", + "none", + "horizontal-single", +]; +const dirOptions: Dir[] = ["ltr", "rtl"]; +const buttonTypeOptions: ButtonType[] = ["radio", "checkbox"]; +const interactionModeOptions: InteractionMode[] = ["interactive", "static"]; +const iconTypeOptions: IconType[] = ["chevron", "caret", "ellipsis", "overflow"]; +const determinateTypeOptions: DeterminateType[] = ["determinate", "indeterminate"]; +const fillTypeOptions: FillType[] = ["single", "range"]; +const labelTypeOptions: LabelType[] = ["percent", "units"]; +const clickTypeOptions: ClickType[] = ["click", "hover"]; +const collapseDirectionOptions: CollapseDirection[] = ["down", "up"]; +const textTypeOptions: TextType[] = [ + "text", + "textarea", + "email", + "password", + "tel", + "number", + "search", + "file", + "time", + "date", +]; +const modeOptions: Mode[] = ["offset", "name"]; +const selectionAppearanceOptions: SelectionAppearance[] = ["icon", "border"]; export const ATTRIBUTES: CommonAttributes = { alignment: { @@ -40,4 +135,84 @@ export const ATTRIBUTES: CommonAttributes = { values: scaleOptions, defaultValue: scaleOptions[1], }, + status: { + values: statusOptions, + defaultValue: statusOptions[2], + }, + kind: { + values: kindOptions, + defaultValue: kindOptions[0], + }, + width: { + values: widthOptions, + defaultValue: widthOptions[0], + }, + selectionMode: { + values: selectionModeOptions, + defaultValue: selectionModeOptions[6], + }, + arrowType: { + values: arrowTypeOptions, + defaultValue: arrowTypeOptions[0], + }, + displayMode: { + values: displayModeOptions, + defaultValue: displayModeOptions[0], + }, + toggleDisplay: { + values: toggleDisplayOptions, + defaultValue: toggleDisplayOptions[0], + }, + layout: { + values: layoutOptions, + defaultValue: layoutOptions[0], + }, + dir: { + values: dirOptions, + defaultValue: dirOptions[0], + }, + buttonType: { + values: buttonTypeOptions, + defaultValue: buttonTypeOptions[0], + }, + interactionMode: { + values: interactionModeOptions, + defaultValue: interactionModeOptions[0], + }, + iconType: { + values: iconTypeOptions, + defaultValue: iconTypeOptions[0], + }, + determinateType: { + values: determinateTypeOptions, + defaultValue: determinateTypeOptions[0], + }, + fillType: { + values: fillTypeOptions, + defaultValue: fillTypeOptions[1], + }, + labelType: { + values: labelTypeOptions, + defaultValue: labelTypeOptions[0], + }, + clickType: { + values: clickTypeOptions, + defaultValue: clickTypeOptions[0], + }, + collapseDirection: { + values: collapseDirectionOptions, + defaultValue: collapseDirectionOptions[0], + }, + textType: { + values: textTypeOptions, + defaultValue: textTypeOptions[0], + }, + mode: { + values: modeOptions, + defaultValue: modeOptions[0], + }, + selectionAppearance: { + values: selectionAppearanceOptions, + defaultValue: selectionAppearanceOptions[0], + }, }; diff --git a/packages/calcite-components/.storybook/utils.ts b/packages/calcite-components/.storybook/utils.ts index 3eb5d139fae..de5e7114ccc 100644 --- a/packages/calcite-components/.storybook/utils.ts +++ b/packages/calcite-components/.storybook/utils.ts @@ -17,44 +17,6 @@ export const modesDarkDefault = { themeOverride: "dark", }; -export interface KnobbedAttribute { - name: string; - value: ReturnType; -} - -export interface SimpleAttribute { - name: string; - value: string | boolean | number; -} - -export type Attribute = KnobbedAttribute | SimpleAttribute; -export type Attributes = Attribute[]; - -interface DeferredAttribute { - name: string; - commit: () => Attribute; -} - -export const createComponentHTML = (tagName: string, attributes: Attributes, contentHTML: string = ""): string => - `<${tagName} ${attributes - .map(({ name, value }) => { - const booleanAttr = typeof value === "boolean"; - if (booleanAttr) { - return value ? name : ""; - } - return `${name}="${value}"`; - }) - .join(" ")}>${contentHTML}`; - -export const filterComponentAttributes = (attributesList: DeferredAttribute[], exceptions: string[]): Attributes => { - if (!exceptions.length) { - return attributesList.map((attr) => attr.commit()); - } - return attributesList - .filter((attr) => !exceptions.find((except) => except === attr.name)) - .map((attr) => attr.commit()); -}; - /** * This helper creates a story that captures all breakpoints across all scales for testing. * @@ -121,3 +83,13 @@ export function createBreakpointStories( ${storyHTML} `; } + +/** + * Returns boolean property name if value is true. If value is false, returns an empty string. + * + * @param prop name of boolean property + * @param value value of boolean property + */ +export const boolean = (prop: string, value: boolean): string => { + return value ? prop : ""; +}; diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 14d5926eb0e..b0ea2d37b6c 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -8,84 +8,182 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { Alignment, Appearance, Columns, FlipContext, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces"; import { RequestedItem } from "./components/accordion/interfaces"; import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; +import { ActionMessages } from "./components/action/assets/action/t9n"; import { EffectivePlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; +import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; +import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; +import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; import { AlertDuration, Sync } from "./components/alert/interfaces"; import { NumberingSystem } from "./utils/locale"; +import { AlertMessages } from "./components/alert/assets/alert/t9n"; import { HeadingLevel } from "./components/functional/Heading"; +import { BlockMessages } from "./components/block/assets/block/t9n"; import { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; +import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; +import { ButtonMessages } from "./components/button/assets/button/t9n"; +import { CardMessages } from "./components/card/assets/card/t9n"; import { ArrowType, AutoplayType } from "./components/carousel/interfaces"; +import { CarouselMessages } from "./components/carousel/assets/carousel/t9n"; import { MutableValidityState } from "./utils/form"; +import { ChipMessages } from "./components/chip/assets/chip/t9n"; import { ColorValue, InternalColor } from "./components/color-picker/interfaces"; import { Format } from "./components/color-picker/utils"; +import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; +import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; +import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; import { DateLocaleData } from "./components/date-picker/utils"; import { HoverRange } from "./utils/date"; import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; import { ItemKeyboardEvent } from "./components/dropdown/interfaces"; +import { FilterMessages } from "./components/filter/assets/filter/t9n"; import { FlowItemLikeElement } from "./components/flow/interfaces"; +import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; import { ColorStop, DataSeries } from "./components/graph/interfaces"; +import { HandleMessages } from "./components/handle/assets/handle/t9n"; import { HandleChange, HandleNudge } from "./components/handle/interfaces"; +import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; import { InputPlacement } from "./components/input/interfaces"; +import { InputMessages } from "./components/input/assets/input/t9n"; +import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; +import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; +import { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; +import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; +import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; +import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; import { TimeZoneMode } from "./components/input-time-zone/interfaces"; import { ListDragDetail } from "./components/list/interfaces"; import { ItemData } from "./components/list-item/interfaces"; +import { ListMessages } from "./components/list/assets/list/t9n"; import { SelectionAppearance } from "./components/list/resources"; +import { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; +import { MenuMessages } from "./components/menu/assets/menu/t9n"; +import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; import { MenuItemCustomEvent } from "./components/menu-item/interfaces"; import { MeterLabelType } from "./components/meter/interfaces"; +import { ModalMessages } from "./components/modal/assets/modal/t9n"; +import { NoticeMessages } from "./components/notice/assets/notice/t9n"; +import { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; +import { PanelMessages } from "./components/panel/assets/panel/t9n"; import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; import { ICON_TYPES } from "./components/pick-list/resources"; +import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; +import { PopoverMessages } from "./components/popover/assets/popover/t9n"; +import { RatingMessages } from "./components/rating/assets/rating/t9n"; +import { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; import { DisplayMode } from "./components/sheet/interfaces"; import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; +import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; import { DragDetail } from "./utils/sortableComponent"; import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; +import { StepperMessages } from "./components/stepper/assets/stepper/t9n"; +import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; +import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; +import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; +import { TableMessages } from "./components/table/assets/table/t9n"; +import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; +import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; +import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; import { TileSelectType } from "./components/tile-select/interfaces"; import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; +import { TipMessages } from "./components/tip/assets/tip/t9n"; +import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; import { TreeItemSelectDetail } from "./components/tree-item/interfaces"; +import { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; import { ListItemAndHandle } from "./components/value-list-item/interfaces"; export { Alignment, Appearance, Columns, FlipContext, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces"; export { RequestedItem } from "./components/accordion/interfaces"; export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; +export { ActionMessages } from "./components/action/assets/action/t9n"; export { EffectivePlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; +export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; +export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; +export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; export { AlertDuration, Sync } from "./components/alert/interfaces"; export { NumberingSystem } from "./utils/locale"; +export { AlertMessages } from "./components/alert/assets/alert/t9n"; export { HeadingLevel } from "./components/functional/Heading"; +export { BlockMessages } from "./components/block/assets/block/t9n"; export { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; +export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; +export { ButtonMessages } from "./components/button/assets/button/t9n"; +export { CardMessages } from "./components/card/assets/card/t9n"; export { ArrowType, AutoplayType } from "./components/carousel/interfaces"; +export { CarouselMessages } from "./components/carousel/assets/carousel/t9n"; export { MutableValidityState } from "./utils/form"; +export { ChipMessages } from "./components/chip/assets/chip/t9n"; export { ColorValue, InternalColor } from "./components/color-picker/interfaces"; export { Format } from "./components/color-picker/utils"; +export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; +export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; +export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; export { DateLocaleData } from "./components/date-picker/utils"; export { HoverRange } from "./utils/date"; export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; export { ItemKeyboardEvent } from "./components/dropdown/interfaces"; +export { FilterMessages } from "./components/filter/assets/filter/t9n"; export { FlowItemLikeElement } from "./components/flow/interfaces"; +export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; export { ColorStop, DataSeries } from "./components/graph/interfaces"; +export { HandleMessages } from "./components/handle/assets/handle/t9n"; export { HandleChange, HandleNudge } from "./components/handle/interfaces"; +export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; export { InputPlacement } from "./components/input/interfaces"; +export { InputMessages } from "./components/input/assets/input/t9n"; +export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; +export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; +export { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; +export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; +export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; +export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; export { TimeZoneMode } from "./components/input-time-zone/interfaces"; export { ListDragDetail } from "./components/list/interfaces"; export { ItemData } from "./components/list-item/interfaces"; +export { ListMessages } from "./components/list/assets/list/t9n"; export { SelectionAppearance } from "./components/list/resources"; +export { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; +export { MenuMessages } from "./components/menu/assets/menu/t9n"; +export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; export { MenuItemCustomEvent } from "./components/menu-item/interfaces"; export { MeterLabelType } from "./components/meter/interfaces"; +export { ModalMessages } from "./components/modal/assets/modal/t9n"; +export { NoticeMessages } from "./components/notice/assets/notice/t9n"; +export { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; +export { PanelMessages } from "./components/panel/assets/panel/t9n"; export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; export { ICON_TYPES } from "./components/pick-list/resources"; +export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; +export { PopoverMessages } from "./components/popover/assets/popover/t9n"; +export { RatingMessages } from "./components/rating/assets/rating/t9n"; +export { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; export { DisplayMode } from "./components/sheet/interfaces"; export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; +export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; export { DragDetail } from "./utils/sortableComponent"; export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; +export { StepperMessages } from "./components/stepper/assets/stepper/t9n"; +export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; +export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; +export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; +export { TableMessages } from "./components/table/assets/table/t9n"; +export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; +export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; +export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; export { TileSelectType } from "./components/tile-select/interfaces"; export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; +export { TipMessages } from "./components/tip/assets/tip/t9n"; +export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; export { TreeItemSelectDetail } from "./components/tree-item/interfaces"; +export { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; export { ListItemAndHandle } from "./components/value-list-item/interfaces"; export namespace Components { interface CalciteAccordion { diff --git a/packages/calcite-components/src/components/accordion/accordion.stories.ts b/packages/calcite-components/src/components/accordion/accordion.stories.ts index 3b751056b46..f5a3cafc654 100644 --- a/packages/calcite-components/src/components/accordion/accordion.stories.ts +++ b/packages/calcite-components/src/components/accordion/accordion.stories.ts @@ -1,18 +1,55 @@ -import { - Attribute, - Attributes, - filterComponentAttributes, - createComponentHTML as create, - modesDarkDefault, -} from "../../../.storybook/utils"; +import { modesDarkDefault } from "../../../.storybook/utils"; import { placeholderImage } from "../../../.storybook/placeholderImage"; -import { ATTRIBUTES } from "../../../.storybook/resources"; import { iconNames } from "../../../.storybook/helpers"; -import { select, text } from "../../../.storybook/fake-knobs"; import { html } from "../../../support/formatting"; +import { ATTRIBUTES } from "../../../.storybook/resources"; +const { scale, appearance, selectionMode } = ATTRIBUTES; + +interface AccordionArgs { + scale: string; + appearance: string; + selectionMode: string; + heading: string; + description: string; + iconStart: string; + iconEnd: string; +} export default { title: "Components/Accordion", + args: { + scale: scale.defaultValue, + appearance: appearance.defaultValue, + selectionMode: selectionMode.defaultValue, + heading: "Heading", + description: "Description for item", + iconStart: "", + iconEnd: "", + }, + argTypes: { + scale: { + options: scale.values, + control: { type: "select" }, + }, + appearance: { + options: appearance.values.filter((option) => option !== "outline" && option !== "outline-fill"), + control: { type: "select" }, + }, + selectionMode: { + options: selectionMode.values.filter( + (option) => option !== "none" && option !== "children" && option !== "multichildren" && option !== "ancestors", + ), + control: { type: "select" }, + }, + iconStart: { + options: iconNames, + control: { type: "select" }, + }, + iconEnd: { + options: iconNames, + control: { type: "select" }, + }, + }, parameters: { backgrounds: { values: [{ name: "transparent", value: "#0000ffff" }], @@ -20,102 +57,48 @@ export default { }, }; -const createAccordionAttributes: (options?: { exceptions: string[] }) => Attributes = ( - { exceptions } = { exceptions: [] }, -) => { - const group = "accordion"; - const { scale } = ATTRIBUTES; - - return filterComponentAttributes( - [ - { - name: "scale", - commit(): Attribute { - this.value = select("scale", scale.values, scale.defaultValue, group); - delete this.build; - return this; - }, - }, - { - name: "appearance", - commit(): Attribute { - this.value = select("appearance", ["solid", "transparent"], "solid", group); - delete this.build; - return this; - }, - }, - { - name: "selection-mode", - commit(): Attribute { - this.value = select("selection-mode", ["single", "single-persist", "multiple"], "multiple", group); - delete this.build; - return this; - }, - }, - ], - exceptions, - ); -}; - -const createAccordionItemAttributes: (options?: { - group?: string; - iconEnd?: string; - iconStart?: string; -}) => Attributes = (props) => { - const group = props?.group || ""; - const defaultAttributes = [ - { name: "heading", value: text("heading", "Heading", group) }, - { - name: "description", - value: text("description", "Description for item", group), - }, - { - name: "icon-start", - value: select("icon-start", ["", ...iconNames], props?.iconStart || "", group), - }, - { - name: "icon-end", - value: select("icon-end", ["", ...iconNames], props?.iconEnd || "", group), - }, - ]; - return defaultAttributes; -}; - const accordionItemContent = `Custom content here

More custom content here`; -export const simple = (): string => - create( - "calcite-accordion", - createAccordionAttributes(), - html` - ${create( - "calcite-accordion-item", - createAccordionItemAttributes({ group: "accordion-item-1" }), - accordionItemContent, - )} - ${create( - "calcite-accordion-item", - createAccordionItemAttributes({ group: "accordion-item-2" }), - accordionItemContent, - )} - ${create( - "calcite-accordion-item", - createAccordionItemAttributes({ group: "accordion-item-3" }), - accordionItemContent, - )} - ${create( - "calcite-accordion-item", - createAccordionItemAttributes({ group: "accordion-item-4" }).concat({ - name: "expanded", - value: true, - }), - accordionItemContent, - )} - `, - ); +export const simple = (args: AccordionArgs): string => html` + + + ${accordionItemContent} + + + ${accordionItemContent} + + + ${accordionItemContent} + + + ${accordionItemContent} + + +`; export const withActions = (): string => html` @@ -140,122 +123,64 @@ export const withActions = (): string => html` `; -export const darkModeRTL_TestOnly = (): string => - create( - "calcite-accordion", - createAccordionAttributes({ exceptions: ["class", "dir"] }).concat( - { - name: "class", - value: "calcite-mode-dark", - }, - { - name: "dir", - value: "rtl", - }, - ), - html` - ${create( - "calcite-accordion-item", - createAccordionItemAttributes({ iconStart: "banana", group: "accordion-item-1" }), - accordionItemContent, - )} - ${create( - "calcite-accordion-item", - createAccordionItemAttributes({ iconStart: "banana", group: "accordion-item-2" }), - accordionItemContent, - )} - ${create( - "calcite-accordion-item", - createAccordionItemAttributes({ iconStart: "banana", group: "accordion-item-3" }), - accordionItemContent, - )} - ${create( - "calcite-accordion-item", - createAccordionItemAttributes({ iconStart: "banana", group: "accordion-item-4" }).concat({ - name: "expanded", - value: true, - }), - accordionItemContent, - )} - `, - ); +export const darkModeRTL_TestOnly = (): string => html` + + + ${accordionItemContent} + + + ${accordionItemContent} + + + ${accordionItemContent} + + + ${accordionItemContent} + + +`; darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault }; -export const transparentAppearance_TestOnly = (): string => - create( - "calcite-accordion", - createAccordionAttributes({ exceptions: ["appearance"] }).concat({ - name: "appearance", - value: "transparent", - }), - html` - ${create( - "calcite-accordion-item", - createAccordionItemAttributes({ group: "accordion-item-1" }), - accordionItemContent, - )} - ${create( - "calcite-accordion-item", - createAccordionItemAttributes({ group: "accordion-item-2" }), - accordionItemContent, - )} - ${create( - "calcite-accordion-item", - createAccordionItemAttributes({ group: "accordion-item-3" }), - accordionItemContent, - )} - ${create( - "calcite-accordion-item", - createAccordionItemAttributes({ group: "accordion-item-4" }).concat({ - name: "expanded", - value: true, - }), - accordionItemContent, - )} - `, - ); +export const transparentAppearance_TestOnly = (): string => html` + + + ${accordionItemContent} + + + ${accordionItemContent} + + + ${accordionItemContent} + + + ${accordionItemContent} + + +`; -export const withIconStartAndEnd_TestOnly = (): string => - create( - "calcite-accordion", - createAccordionAttributes({ exceptions: ["appearance"] }).concat({ - name: "appearance", - value: "transparent", - }), - html` - ${create( - "calcite-accordion-item", - createAccordionItemAttributes({ group: "accordion-item-1", iconStart: "banana" }).concat({ - name: "expanded", - value: true, - }), - accordionItemContent, - )} - ${create( - "calcite-accordion-item", - createAccordionItemAttributes({ group: "accordion-item-2", iconEnd: "cars" }), - accordionItemContent, - )} - ${create( - "calcite-accordion-item", - createAccordionItemAttributes({ group: "accordion-item-3", iconEnd: "plane", iconStart: "plane" }), - accordionItemContent, - )} - ${create( - "calcite-accordion-item", - createAccordionItemAttributes({ - group: "accordion-item-4", - iconStart: "biking", - iconEnd: "biking", - }).concat({ - name: "expanded", - value: true, - }), - accordionItemContent, - )} - `, - ); +export const withIconStartAndEnd_TestOnly = (): string => html` + + + ${accordionItemContent} + + + ${accordionItemContent} + + + ${accordionItemContent} + + + ${accordionItemContent} + + +`; const iconHeaderUseCasesArr: { icon: string; heading: string; description: string }[] = [ { icon: "", heading: "Simple item with heading", description: "" }, diff --git a/packages/calcite-components/src/components/action-bar/action-bar.stories.ts b/packages/calcite-components/src/components/action-bar/action-bar.stories.ts index 8333d4de5d9..0009376f81a 100644 --- a/packages/calcite-components/src/components/action-bar/action-bar.stories.ts +++ b/packages/calcite-components/src/components/action-bar/action-bar.stories.ts @@ -1,66 +1,44 @@ -import { boolean, select } from "../../../.storybook/fake-knobs"; -import { ATTRIBUTES } from "../../../.storybook/resources"; -import { - Attribute, - Attributes, - createComponentHTML as create, - filterComponentAttributes, - modesDarkDefault, -} from "../../../.storybook/utils"; +import { boolean, modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; +import { ATTRIBUTES } from "../../../.storybook/resources"; +const { position } = ATTRIBUTES; + +interface ActionBarArgs { + expandDisabled: boolean; + expanded: boolean; + position: string; +} export default { title: "Components/Action Bar", + args: { + expandDisabled: false, + expanded: false, + position: position.defaultValue, + }, + argTypes: { + position: { + options: position.values.filter((option) => option !== "top" && option !== "bottom"), + control: { type: "select" }, + }, + }, }; -const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ exceptions } = { exceptions: [] }) => { - const { position } = ATTRIBUTES; - - return filterComponentAttributes( - [ - { - name: "expand-disabled", - commit(): Attribute { - this.value = boolean("expandDisabled", false, "", "prop"); - delete this.build; - return this; - }, - }, - { - name: "expanded", - commit(): Attribute { - this.value = boolean("expanded", false, "", "prop"); - delete this.build; - return this; - }, - }, - { - name: "position", - commit(): Attribute { - this.value = select("position", position.values, position.defaultValue); - delete this.build; - return this; - }, - }, - ], - exceptions, - ); -}; - -export const simple = (): string => - create( - "calcite-action-bar", - createAttributes(), - html` - - - - - - - - `, - ); +export const simple = (args: ActionBarArgs): string => html` + + + + + + + + + +`; export const horizontal = (): string => html`
@@ -149,34 +127,22 @@ export const withDefinedWidths = (): string => html` `; -export const darkModeRTL_TestOnly = (): string => - create( - "calcite-action-bar", - createAttributes({ exceptions: ["dir", "class"] }).concat([ - { - name: "dir", - value: "rtl", - }, - { - name: "class", - value: "calcite-mode-dark", - }, - ]), - html` - - - - - - - - `, - ); +export const darkModeRTL_TestOnly = (): string => html` + + + + + + + + + +`; darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault }; -export const adjacentTooltipsOpenQuickly = (): string => - html`
+export const adjacentTooltipsOpenQuickly = (): string => html` +
@@ -204,7 +170,8 @@ export const adjacentTooltipsOpenQuickly = (): string => >hello world -
`; +
+`; export const hebrewLocale_TestOnly = (): string => ` diff --git a/packages/calcite-components/src/components/action-group/action-group.stories.ts b/packages/calcite-components/src/components/action-group/action-group.stories.ts index 916194195d8..f1175c0e97e 100644 --- a/packages/calcite-components/src/components/action-group/action-group.stories.ts +++ b/packages/calcite-components/src/components/action-group/action-group.stories.ts @@ -1,5 +1,3 @@ -import { select, text } from "../../../.storybook/fake-knobs"; -import { iconNames } from "../../../.storybook/helpers"; import { html } from "../../../support/formatting"; export default { @@ -20,31 +18,10 @@ export const honorsFlexGrow = (): string => export const gridCenteringOfActionsInAGroup = (): string => html`
- - - - - - - + + + +
`; diff --git a/packages/calcite-components/src/components/action-pad/action-pad.stories.ts b/packages/calcite-components/src/components/action-pad/action-pad.stories.ts index 1b1e7bccbb5..a8a0d2eff8b 100644 --- a/packages/calcite-components/src/components/action-pad/action-pad.stories.ts +++ b/packages/calcite-components/src/components/action-pad/action-pad.stories.ts @@ -1,16 +1,27 @@ -import { boolean, select } from "../../../.storybook/fake-knobs"; -import { - Attributes, - Attribute, - filterComponentAttributes, - createComponentHTML as create, - modesDarkDefault, -} from "../../../.storybook/utils"; -import { ATTRIBUTES } from "../../../.storybook/resources"; +import { boolean, modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; +import { ATTRIBUTES } from "../../../.storybook/resources"; +const { position } = ATTRIBUTES; + +interface ActionPadArgs { + expandDisabled: boolean; + expanded: boolean; + position: string; +} export default { title: "Components/Action Pad", + args: { + expandDisabled: false, + expanded: false, + position: position.defaultValue, + }, + argTypes: { + position: { + options: position.values.filter((option) => option !== "top" && option !== "bottom"), + control: { type: "select" }, + }, + }, parameters: { chromatic: { delay: 5000, @@ -18,54 +29,21 @@ export default { }, }; -const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ exceptions } = { exceptions: [] }) => { - const { position } = ATTRIBUTES; - - return filterComponentAttributes( - [ - { - name: "expand-disabled", - commit(): Attribute { - this.value = boolean("expandDisabled", false, "", "prop"); - delete this.build; - return this; - }, - }, - { - name: "expanded", - commit(): Attribute { - this.value = boolean("expanded", false, "", "prop"); - delete this.build; - return this; - }, - }, - { - name: "position", - commit(): Attribute { - this.value = select("position", position.values, position.defaultValue); - delete this.build; - return this; - }, - }, - ], - exceptions, - ); -}; - -export const simple = (): string => - create( - "calcite-action-pad", - createAttributes(), - html` - - - - - - - - `, - ); +export const simple = (args: ActionPadArgs): string => html` + + + + + + + + + +`; export const withDefinedWidths = (): string => html` `; @@ -42,8 +74,8 @@ const getResponsiveTemplate = ({ }) => { return html` Attributes = ({ exceptions } = { exceptions: [] }) => { - const { scale } = ATTRIBUTES; - - return filterComponentAttributes( - [ - { - name: "closed", - commit(): Attribute { - this.value = boolean("closed", false, "", "prop"); - delete this.build; - return this; - }, - }, - { - name: "disabled", - commit(): Attribute { - this.value = boolean("disabled", false, "", "prop"); - delete this.build; - return this; - }, - }, - { - name: "closable", - commit(): Attribute { - this.value = boolean("closable", false, "", "prop"); - delete this.build; - return this; - }, - }, - { - name: "collapsed", - commit(): Attribute { - this.value = boolean("collapsed", false, "", "prop"); - delete this.build; - return this; - }, - }, - { - name: "collapsible", - commit(): Attribute { - this.value = boolean("collapsible", false, "", "prop"); - delete this.build; - return this; - }, - }, - { - name: "collapse-direction", - commit(): Attribute { - this.value = select("collapseDirection", ["down", "up"], "down"); - delete this.build; - return this; - }, - }, - { - name: "height-scale", - commit(): Attribute { - this.value = select("heightScale", scale.values, scale.defaultValue); - delete this.build; - return this; - }, - }, - { - name: "loading", - commit(): Attribute { - this.value = boolean("loading", false, "", "prop"); - delete this.build; - return this; - }, - }, - ], - exceptions, - ); + args: { + closed: false, + disabled: false, + closable: false, + collapsed: false, + collapsible: false, + collapseDirection: collapseDirection.defaultValue, + heightScale: scale.defaultValue, + loading: false, + }, + argTypes: { + collapseDirection: { + options: collapseDirection.values, + control: { type: "select" }, + }, + heightScale: { + options: scale.values, + control: { type: "select" }, + }, + }, }; const headerHTML = `

Heading

`; @@ -126,33 +77,33 @@ const panelContent = `${headerHTML} ${contentHTML} ${footerHTML}`; -export const simple = (): string => - create( - "calcite-panel", - createAttributes(), - html` - ${headerHTML} - - - ${contentHTML} - - ${footerHTML} - `, - ); +export const simple = (args: PanelArgs): string => html` + + ${headerHTML} + + + ${contentHTML} + + ${footerHTML} + +`; export const onlyProps = (): string => html`
`; @@ -163,21 +114,11 @@ export const disabledWithStyledSlot_TestOnly = (): string => html` `; -export const darkModeRTL_TestOnly = (): string => - create( - "calcite-panel", - createAttributes({ exceptions: ["dir", "class"] }).concat([ - { - name: "dir", - value: "rtl", - }, - { - name: "class", - value: "calcite-mode-dark", - }, - ]), - panelContent, - ); +export const darkModeRTL_TestOnly = (): string => html` + + ${panelContent} + +`; darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault }; diff --git a/packages/calcite-components/src/components/pick-list/pick-list.stories.ts b/packages/calcite-components/src/components/pick-list/pick-list.stories.ts index 64c58fcd13d..7f1477b0913 100644 --- a/packages/calcite-components/src/components/pick-list/pick-list.stories.ts +++ b/packages/calcite-components/src/components/pick-list/pick-list.stories.ts @@ -1,164 +1,108 @@ -import { boolean, text } from "../../../.storybook/fake-knobs"; -import { - Attribute, - Attributes, - createComponentHTML as create, - filterComponentAttributes, - modesDarkDefault, -} from "../../../.storybook/utils"; +import { boolean, modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; +interface PickListArgs { + disabled: boolean; + filterEnabled: boolean; + loading: boolean; + multiple: boolean; + selectionFollowsFocus: boolean; +} + export default { title: "Components/Pick List", -}; - -const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ exceptions } = { exceptions: [] }) => { - return filterComponentAttributes( - [ - { - name: "disabled", - commit(): Attribute { - this.value = boolean("disabled", false, "", "prop"); - delete this.build; - return this; - }, - }, - { - name: "filter-enabled", - commit(): Attribute { - this.value = boolean("filterEnabled", false, "", "prop"); - delete this.build; - return this; - }, - }, - { - name: "loading", - commit(): Attribute { - this.value = boolean("loading", false, "", "prop"); - delete this.build; - return this; - }, - }, - { - name: "multiple", - commit(): Attribute { - this.value = boolean("multiple", false, "", "prop"); - delete this.build; - return this; - }, - }, - { - name: "selection-follows-focus", - commit(): Attribute { - this.value = boolean("selection-follows-focus", false, "", "prop"); - delete this.build; - return this; - }, - }, - ], - exceptions, - ); + args: { + disabled: false, + filterEnabled: false, + loading: false, + multiple: false, + selectionFollowsFocus: false, + }, }; const action = html` `; -export const simple = (): string => - create( - "calcite-pick-list", - createAttributes(), - html` - +export const simple = (args: PickListArgs): string => html` + + + ${action} + + + ${action} + + ${action} + +`; + +export const darkModeRTL_TestOnly = (): string => html` + + + ${action} + + + ${action} + + ${action} + +`; + +darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault }; + +export const grouped = (): string => html` + + + ${action} - + ${action} - ${action} - `, - ); - -export const darkModeRTL_TestOnly = (): string => - create( - "calcite-pick-list", - createAttributes({ exceptions: ["dir", "class"] }).concat([ - { - name: "dir", - value: "rtl", - }, - { - name: "class", - value: "calcite-mode-dark", - }, - ]), - html` - + + + ${action} - + ${action} - ${action} - `, - ); - -darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault }; - -export const grouped = (): string => - create( - "calcite-pick-list", - createAttributes(), - html` - - - ${action} - - - ${action} - - - - - ${action} - - - ${action} - - - `, - ); + + +`; -export const nested = (): string => - create( - "calcite-pick-list", - createAttributes(), - html` - - - ${action} - - ${action} - ${action} - ${action} - - - - ${action} - - ${action} - ${action} - ${action} - - `, - ); +export const nested = (): string => html` + + + + ${action} + + ${action} + ${action} + ${action} + + + + ${action} + + ${action} + ${action} + ${action} + + +`; export const disabled_TestOnly = (): string => html` diff --git a/packages/calcite-components/src/components/popover/popover.stories.ts b/packages/calcite-components/src/components/popover/popover.stories.ts index 43e5e62886e..c69896cf1c5 100644 --- a/packages/calcite-components/src/components/popover/popover.stories.ts +++ b/packages/calcite-components/src/components/popover/popover.stories.ts @@ -1,6 +1,5 @@ -import { select, number, text } from "../../../.storybook/fake-knobs"; +import { boolean } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; -import { boolean } from "../../../.storybook/helpers"; import { placements } from "../../utils/floating-ui"; import { defaultPopoverPlacement } from "../popover/resources"; import { modesDarkDefault } from "../../../.storybook/utils"; @@ -16,8 +15,35 @@ const contentHTML = ` const referenceElementHTML = `Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`; const nestedReferenceElementHTML = `Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`; +interface PopoverArgs { + closable: boolean; + flipDisabled: boolean; + pointerDisabled: boolean; + placement: string; + offsetDistance: number; + offsetSkidding: number; + open: boolean; + textClose: string; +} + export default { title: "Components/Popover", + args: { + closable: false, + flipDisabled: false, + pointerDisabled: false, + placement: defaultPopoverPlacement, + offsetDistance: 6, + offsetSkidding: 0, + open: true, + textClose: "Close", + }, + argTypes: { + placement: { + options: placements, + control: { type: "select" }, + }, + }, parameters: { chromatic: { delay: 500, @@ -25,19 +51,19 @@ export default { }, }; -export const simple = (): string => html` +export const simple = (args: PopoverArgs): string => html`
${referenceElementHTML} ${contentHTML} @@ -48,16 +74,13 @@ export const darkModeRTL_TestOnly = (): string => html`
${referenceElementHTML} ${contentHTML} @@ -69,19 +92,14 @@ darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault }; export const nested = (): string => html`
${referenceElementHTML} - +
${nestedReferenceElementHTML}
${contentHTML} diff --git a/packages/calcite-components/src/components/progress/progress.stories.ts b/packages/calcite-components/src/components/progress/progress.stories.ts index c1ee7fc11d1..084f97d92e5 100644 --- a/packages/calcite-components/src/components/progress/progress.stories.ts +++ b/packages/calcite-components/src/components/progress/progress.stories.ts @@ -1,17 +1,34 @@ -import { number, select, text } from "../../../.storybook/fake-knobs"; import { modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; +import { ATTRIBUTES } from "../../../.storybook/resources"; +const { determinateType } = ATTRIBUTES; + +interface ProgressArgs { + type: string; + value: number; + text: string; +} export default { title: "Components/Progress", + args: { + type: determinateType.defaultValue, + value: 0.8, + text: "", + }, + argTypes: { + type: { + options: determinateType.values, + control: { type: "select" }, + }, + value: { + control: { type: "range", min: 0, max: 1, step: 0.01 }, + }, + }, }; -export const simple = (): string => html` - +export const simple = (args: ProgressArgs): string => html` + `; export const darkModeRTL_TestOnly = (): string => html` diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts b/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts index 34d04b95872..e1bb12faa49 100644 --- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts +++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts @@ -1,19 +1,51 @@ -import { select } from "../../../.storybook/fake-knobs"; -import { boolean } from "../../../.storybook/helpers"; -import { modesDarkDefault } from "../../../.storybook/utils"; +import { boolean, modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; +import { ATTRIBUTES } from "../../../.storybook/resources"; +const { layout, scale } = ATTRIBUTES; + +interface RadioButtonGroupArgs { + disabled: boolean; + hidden: boolean; + layout: string; + scale: string; +} export default { title: "Components/Controls/Radio/Radio Button Group", + args: { + disabled: false, + hidden: false, + layout: layout.defaultValue, + scale: scale.defaultValue, + }, + argTypes: { + layout: { + options: layout.values.filter( + (option) => + option !== "grid" && + option !== "inline" && + option !== "center" && + option !== "auto" && + option !== "fixed" && + option !== "none" && + option !== "horizontal-single", + ), + control: { type: "select" }, + }, + scale: { + options: scale.values, + control: { type: "select" }, + }, + }, }; -export const simple = (): string => html` +export const simple = (args: RadioButtonGroupArgs): string => html` diff --git a/packages/calcite-components/src/components/radio-button/radio-button.stories.ts b/packages/calcite-components/src/components/radio-button/radio-button.stories.ts index cb2c4994336..87b8a23675c 100644 --- a/packages/calcite-components/src/components/radio-button/radio-button.stories.ts +++ b/packages/calcite-components/src/components/radio-button/radio-button.stories.ts @@ -1,40 +1,54 @@ -import { select, text } from "../../../.storybook/fake-knobs"; -import { boolean } from "../../../.storybook/helpers"; -import { modesDarkDefault } from "../../../.storybook/utils"; +import { boolean, modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; +import { ATTRIBUTES } from "../../../.storybook/resources"; +const { scale } = ATTRIBUTES; + +interface RadioButtonArgs { + checked: boolean; + disabled: boolean; + hidden: boolean; + focused: boolean; + scale: string; + label: string; +} export default { title: "Components/Controls/Radio/Radio Button", + args: { + checked: false, + disabled: false, + hidden: false, + focused: false, + scale: scale.defaultValue, + label: "Radio Button", + }, + argTypes: { + scale: { + options: scale.values, + control: { type: "select" }, + }, + }, }; -export const simple = (): string => html` +export const simple = (args: RadioButtonArgs): string => html` - ${text("label", "Radio Button")} + ${args.label} `; export const darkModeRTL_TestOnly = (): string => html` - - - ${text("label", "Radio Button")} + + Radio Button `; diff --git a/packages/calcite-components/src/components/rating/rating.stories.ts b/packages/calcite-components/src/components/rating/rating.stories.ts index a4dbca947ac..47f3fbdbcd0 100644 --- a/packages/calcite-components/src/components/rating/rating.stories.ts +++ b/packages/calcite-components/src/components/rating/rating.stories.ts @@ -1,21 +1,46 @@ -import { number, select } from "../../../.storybook/fake-knobs"; -import { boolean } from "../../../.storybook/helpers"; -import { modesDarkDefault } from "../../../.storybook/utils"; +import { boolean, modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; +import { ATTRIBUTES } from "../../../.storybook/resources"; +const { scale } = ATTRIBUTES; + +interface RatingArgs { + scale: string; + value: number; + showChip: boolean; + average: number; + count: number; + readOnly: boolean; + disabled: boolean; +} export default { title: "Components/Controls/Rating", + args: { + scale: scale.defaultValue, + value: 1, + showChip: true, + average: 4.4, + count: 10, + readOnly: false, + disabled: false, + }, + argTypes: { + scale: { + options: scale.values, + control: { type: "select" }, + }, + }, }; -export const simple = (): string => html` +export const simple = (args: RatingArgs): string => html` `; @@ -23,13 +48,11 @@ export const darkModeRTL_TestOnly = (): string => html` `; diff --git a/packages/calcite-components/src/components/scrim/scrim.stories.ts b/packages/calcite-components/src/components/scrim/scrim.stories.ts index c6bd5af4f37..39316ce372b 100644 --- a/packages/calcite-components/src/components/scrim/scrim.stories.ts +++ b/packages/calcite-components/src/components/scrim/scrim.stories.ts @@ -1,14 +1,18 @@ -import { boolean } from "../../../.storybook/helpers"; -import { modesDarkDefault } from "../../../.storybook/utils"; +import { boolean, modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; +interface ScrimArgs { + loading: boolean; +} + export default { title: "Components/Scrim", + loading: false, }; -export const simple = (): string => html` +export const simple = (args: ScrimArgs): string => html`
- +

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor @@ -38,7 +42,7 @@ export const simple = (): string => html` export const darkModeRTL_TestOnly = (): string => html`

- +

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.stories.ts b/packages/calcite-components/src/components/segmented-control/segmented-control.stories.ts index 5b8cf7cff93..36a1a8e0738 100644 --- a/packages/calcite-components/src/components/segmented-control/segmented-control.stories.ts +++ b/packages/calcite-components/src/components/segmented-control/segmented-control.stories.ts @@ -1,22 +1,79 @@ -import { select, text } from "../../../.storybook/fake-knobs"; -import { boolean, iconNames } from "../../../.storybook/helpers"; -import { modesDarkDefault } from "../../../.storybook/utils"; +import { iconNames } from "../../../.storybook/helpers"; +import { boolean, modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; +import { ATTRIBUTES } from "../../../.storybook/resources"; +const { layout, appearance, scale, width, status } = ATTRIBUTES; + +interface SegmentedControl { + layout: string; + appearance: string; + scale: string; + width: string; + disabled: boolean; + status: string; + validationIcon: string; + validationMessage: string; +} export default { title: "Components/Controls/Radio/Segmented Control", + args: { + layout: layout.defaultValue, + appearance: appearance.defaultValue, + scale: scale.defaultValue, + width: width.defaultValue, + disabled: false, + status: status.defaultValue, + validationIcon: "", + validationMessage: "", + }, + argTypes: { + layout: { + options: layout.values.filter( + (option) => + option !== "grid" && + option !== "inline" && + option !== "center" && + option !== "auto" && + option !== "fixed" && + option !== "none" && + option !== "horizontal-single", + ), + control: { type: "select" }, + }, + appearance: { + options: appearance.values.filter((option) => option !== "transparent"), + control: { type: "select" }, + }, + scale: { + options: scale.values, + control: { type: "select" }, + }, + width: { + options: width.values.filter((option) => option !== "half"), + control: { type: "select" }, + }, + status: { + options: status.values, + control: { type: "select" }, + }, + validationIcon: { + options: iconNames, + control: { type: "select" }, + }, + }, }; -export const simple = (): string => html` +export const simple = (args: SegmentedControl): string => html` React Ember @@ -27,17 +84,9 @@ export const simple = (): string => html` export const fullWidthWithIcons = (): string => html`

- + My great segmented control - + Car Plane Bicycle diff --git a/packages/calcite-components/src/components/select/select.stories.ts b/packages/calcite-components/src/components/select/select.stories.ts index 4a6bfcdea63..c072cfb87b8 100644 --- a/packages/calcite-components/src/components/select/select.stories.ts +++ b/packages/calcite-components/src/components/select/select.stories.ts @@ -1,183 +1,109 @@ -import { - Attribute, - filterComponentAttributes, - Attributes, - createComponentHTML as create, - modesDarkDefault, -} from "../../../.storybook/utils"; +import { boolean, modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; -import { select, boolean, text } from "../../../.storybook/fake-knobs"; import { iconNames } from "../../../.storybook/helpers"; +import { ATTRIBUTES } from "../../../.storybook/resources"; +const { status, width, scale } = ATTRIBUTES; -const createSelectAttributes: (options?: { exceptions: string[] }) => Attributes = ( - { exceptions } = { exceptions: [] }, -) => { - const group = "select"; +interface SelectArgs { + selectDisabled: boolean; + status: string; + width: string; + scale: string; + validationMessage: string; + validationIcon: string; + optionDisabled: boolean; + label: string; + selected: boolean; + value: string; +} - return filterComponentAttributes( - [ - { - name: "disabled", - commit(): Attribute { - this.value = boolean("disabled", false, group, "prop"); - delete this.build; - return this; - }, - }, - { - name: "status", - commit(): Attribute { - this.value = select("status", ["idle", "invalid", "valid"], "idle", group); - delete this.build; - return this; - }, - }, - { - name: "width", - commit(): Attribute { - this.value = select("width", ["auto", "full", "half"], "auto", group); - delete this.build; - return this; - }, - }, - { - name: "scale", - commit(): Attribute { - this.value = select("scale", ["s", "m", "l"], "m", group); - delete this.build; - return this; - }, - }, - { - name: "validation-message", - commit(): Attribute { - this.value = text("validation-message", "", group); - delete this.build; - return this; - }, - }, - { - name: "validation-icon", - commit(): Attribute { - this.value = select("validation-icon", ["", ...iconNames], "", group); - delete this.build; - return this; - }, - }, - ], - exceptions, - ); -}; - -const createOptionAttributes: () => Attributes = () => { - const group = "option"; - - return [ - { - name: "disabled", - value: boolean("disabled", false, group, "prop"), - }, - { - name: "label", - value: text("label", "fancy label", group, "prop"), +export default { + title: "Components/Controls/Select", + args: { + selectDisabled: false, + status: status.defaultValue, + width: width.defaultValue, + scale: scale.defaultValue, + validationMessage: "", + validationIcon: "", + optionDisabled: false, + label: "fancy label", + selected: false, + value: "", + }, + argTypes: { + status: { + options: status.values, + control: { type: "select" }, }, - { - name: "selected", - value: boolean("selected", false, group, "prop"), + width: { + options: width.values, + control: { type: "select" }, }, - { - name: "value", - value: text("value", "value", group), + scale: { + options: scale.values, + control: { type: "select" }, }, - ]; -}; - -const createOptionGroupAttributes: () => Attributes = () => { - const group = "option-group"; - return [ - { - name: "label", - value: text("label", "My fancy group label", group), + validationIcon: { + options: iconNames, + control: { type: "select" }, }, - ]; + }, }; -export default { - title: "Components/Controls/Select", -}; - -export const simple = (): string => - html`
- ${create( - "calcite-select", - createSelectAttributes(), - html` - ${create("calcite-option", createOptionAttributes())} - - - `, - )} -
`; +export const simple = (args: SelectArgs): string => html` +
+ + + + + +
+`; -export const grouped = (): string => - create( - "calcite-select", - createSelectAttributes(), - html` - ${create( - "calcite-option-group", - createOptionGroupAttributes(), - html` - ${create("calcite-option", createOptionAttributes())} - - - `, - )} - - - - - `, - ); +export const grouped = (): string => html` + + + + + + + + + + + +`; -export const darkModeRTL_TestOnly = (): string => - create( - "calcite-select", - [ - ...createSelectAttributes({ exceptions: ["dir", "class"] }), - { - name: "dir", - value: "rtl", - }, - { - name: "class", - value: "calcite-mode-dark", - }, - { - name: "validation-message", - value: "This should not appear because the status is not 'invalid'", - }, - ], - html` - ${create( - "calcite-option-group", - createOptionGroupAttributes(), - html` - ${create("calcite-option", createOptionAttributes())} - - - `, - )} - - - - - `, - ); +export const darkModeRTL_TestOnly = (): string => html` + + + + + + + + + + + +`; darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault }; diff --git a/packages/calcite-components/src/components/sheet/sheet.stories.ts b/packages/calcite-components/src/components/sheet/sheet.stories.ts index 00cbd0fe248..a76ec441fb5 100644 --- a/packages/calcite-components/src/components/sheet/sheet.stories.ts +++ b/packages/calcite-components/src/components/sheet/sheet.stories.ts @@ -1,10 +1,31 @@ -import { select } from "../../../.storybook/fake-knobs"; -import { boolean } from "../../../.storybook/helpers"; -import { modesDarkDefault } from "../../../.storybook/utils"; +import { boolean, modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; +import { ATTRIBUTES } from "../../../.storybook/resources"; +const { logicalFlowPosition, displayMode } = ATTRIBUTES; + +interface SheetArgs { + open: boolean; + position: string; + displayMode: string; +} export default { title: "Components/Sheet", + args: { + open: true, + position: logicalFlowPosition.values[0], + displayMode: displayMode.values[2], + }, + argTypes: { + position: { + options: logicalFlowPosition.values, + control: { type: "select" }, + }, + displayMode: { + options: displayMode.values.filter((option) => option !== "dock"), + control: { type: "select" }, + }, + }, parameters: { chromatic: { delay: 1000, @@ -23,22 +44,22 @@ const panelHTML = html`amet porttitor `; -export const simple = (): string => html` +export const simple = (args: SheetArgs): string => html` ${panelHTML} `; -export const simpleDarkMode = (): string => html` +export const simpleDarkMode = (args: SheetArgs): string => html` ${panelHTML} `; diff --git a/packages/calcite-components/src/components/shell/shell.stories.ts b/packages/calcite-components/src/components/shell/shell.stories.ts index 191a31c1c4f..c14f9b5a9d1 100644 --- a/packages/calcite-components/src/components/shell/shell.stories.ts +++ b/packages/calcite-components/src/components/shell/shell.stories.ts @@ -1,83 +1,59 @@ -import { boolean, select } from "../../../.storybook/fake-knobs"; import { placeholderImage } from "../../../.storybook/placeholderImage"; -import { ATTRIBUTES } from "../../../.storybook/resources"; -import { - Attributes, - createComponentHTML as create, - filterComponentAttributes, - modesDarkDefault, -} from "../../../.storybook/utils"; +import { boolean, modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; +import { ATTRIBUTES } from "../../../.storybook/resources"; +const { displayMode, position, scale } = ATTRIBUTES; + +interface ShellArgs { + collapsed: boolean; + displayMode: string; + leadingPanelPosition: string; + trailingPanelPosition: string; + resizable: boolean; + detached: boolean; + heightScale: string; + shellCenterRowPosition: string; +} export default { title: "Components/Shell", - parameters: { - chromatic: { - delay: 1000, - }, + args: { + collapsed: false, + displayMode: displayMode.defaultValue, + leadingPanelPosition: position.values[0], + trailingPanelPosition: position.values[1], + resizable: true, + detached: false, + heightScale: scale.values[0], + shellCenterRowPosition: position.values[1], }, -}; - -const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ exceptions } = { exceptions: [] }) => { - return filterComponentAttributes([], exceptions); -}; - -const createShellPanelAttributes: (group: "Leading Panel" | "Trailing Panel", resizable?: boolean) => Attributes = ( - group, - resizable = false, -) => { - const { position } = ATTRIBUTES; - - return [ - { - name: "slot", - value: group === "Leading Panel" ? "panel-start" : "panel-end", + argTypes: { + displayMode: { + options: displayMode.values, + control: { type: "select" }, }, - { - name: "collapsed", - value: boolean("collapsed", false, group, "prop"), + leadingPanelPosition: { + options: position.values.filter((option) => option !== "top" && option !== "bottom"), + control: { type: "select" }, }, - { - name: "displayMode", - value: select("displayMode", ["dock", "float", "overlay"], "dock"), + trailingPanelPosition: { + options: position.values.filter((option) => option !== "top" && option !== "bottom"), + control: { type: "select" }, }, - { - name: "position", - value: select( - "position", - position.values, - group === "Leading Panel" ? position.values[0] : position.values[1], - group, - ), + heightScale: { + options: scale.values, + control: { type: "select" }, }, - { - name: "resizable", - value: boolean("resizable", resizable, group, "prop"), + shellCenterRowPosition: { + options: position.values.filter((option) => option !== "top" && option !== "bottom"), + control: { type: "select" }, }, - ]; -}; - -const createShellCenterRowAttributes: (group: string) => Attributes = (group) => { - const { position, scale } = ATTRIBUTES; - - return [ - { - name: "detached", - value: boolean("detached", false, group, "prop"), - }, - { - name: "height-scale", - value: select("heightScale", scale.values, scale.values[0], group), - }, - { - name: "position", - value: select("position", position.values, position.values[1], group), - }, - { - name: "slot", - value: "center-row", + }, + parameters: { + chromatic: { + delay: 1000, }, - ]; + }, }; const actionBarStartContentHTML = html` @@ -319,36 +295,58 @@ const advancedTrailingPanelHTMl = html(` `); -export const simple = (): string => - create( - "calcite-shell", - createAttributes(), - html` - ${headerHTML} - ${create("calcite-shell-panel", createShellPanelAttributes("Leading Panel", true), advancedLeadingPanelHTML)} - ${contentHTML} ${create("calcite-shell-center-row", createShellCenterRowAttributes("Center Row"), centerRowHTML)} - ${centerRowAdvancedHTML} - ${create("calcite-shell-panel", createShellPanelAttributes("Trailing Panel", true), advancedTrailingPanelHTMl)} - ${footerHTML} - `, - ); +export const simple = (args: ShellArgs): string => html` + + ${headerHTML} + + ${advancedLeadingPanelHTML} + + ${contentHTML} + + ${centerRowHTML} + + ${centerRowAdvancedHTML} + + ${advancedTrailingPanelHTMl} + + ${footerHTML} + +`; -export const darkModeRTL_TestOnly = (): string => - create( - "calcite-shell", - createAttributes({ exceptions: ["dir", "class"] }).concat( - { name: "dir", value: "rtl" }, - { name: "class", value: "calcite-mode-dark" }, - ), - html` - ${headerHTML} - ${create("calcite-shell-panel", createShellPanelAttributes("Leading Panel"), advancedLeadingPanelHTML)} - ${contentHTML} ${create("calcite-shell-center-row", createShellCenterRowAttributes("Center Row"), centerRowHTML)} - ${contentHTML} ${centerRowAdvancedHTML} - ${create("calcite-shell-panel", createShellPanelAttributes("Trailing Panel"), advancedTrailingPanelHTMl)} - ${footerHTML} - `, - ); +export const darkModeRTL_TestOnly = (): string => html` + + ${headerHTML} + + ${advancedLeadingPanelHTML} + + ${contentHTML} + + ${centerRowHTML} + + ${contentHTML} ${centerRowAdvancedHTML} + + ${advancedTrailingPanelHTMl} + + ${footerHTML} + +`; darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault }; @@ -915,8 +913,26 @@ export const slottedPanelTopAndBottomAndSides = (): string => background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;">
Header Example
- ${create("calcite-shell-panel", createShellPanelAttributes("Leading Panel"), advancedLeadingPanelHTML)} - ${create("calcite-shell-panel", createShellPanelAttributes("Trailing Panel"), advancedTrailingPanelHTMl)} + + ${advancedLeadingPanelHTML} + + + ${advancedTrailingPanelHTMl} + ${centerRowHTML} ${centerRowHTML}
Footer Example
diff --git a/packages/calcite-components/src/components/slider/slider.stories.ts b/packages/calcite-components/src/components/slider/slider.stories.ts index e96f3447c9d..5aeef75f30e 100644 --- a/packages/calcite-components/src/components/slider/slider.stories.ts +++ b/packages/calcite-components/src/components/slider/slider.stories.ts @@ -1,9 +1,50 @@ -import { array, boolean, number, select, text } from "../../../.storybook/fake-knobs"; -import { modesDarkDefault } from "../../../.storybook/utils"; +import { boolean, modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; +import { ATTRIBUTES } from "../../../.storybook/resources"; +const { scale } = ATTRIBUTES; + +interface SliderArgs { + min: number; + max: number; + value: number; + step: number; + temperature: string; + minLabel: string; + disabled: boolean; + labelHandles: boolean; + labelTicks: boolean; + ticks: number; + pageStep: number; + precise: boolean; + mirrored: boolean; + snap: boolean; + scale: string; +} export default { title: "Components/Controls/Slider", + args: { + min: 0, + max: 100, + value: 50, + step: 1, + minLabel: "Temperature", + disabled: false, + labelHandles: false, + labelTicks: false, + ticks: 0, + pageStep: 5, + precise: false, + mirrored: false, + snap: true, + scale: scale.defaultValue, + }, + argTypes: { + scale: { + options: scale.values, + control: { type: "select" }, + }, + }, parameters: { chromatic: { // https://www.chromatic.com/docs/threshold @@ -13,41 +54,37 @@ export default { }, }; -export const simple = (): string => html` +export const simple = (args: SliderArgs): string => html` `; export const range = (): string => html` `; @@ -55,19 +92,19 @@ export const darkModeMirroredRange_TestOnly = (): string => html` `; @@ -77,17 +114,16 @@ darkModeMirroredRange_TestOnly.story = { export const rangeLabeledTicks_TestOnly = (): string => html` `; @@ -97,17 +133,16 @@ rangeLabeledTicks_TestOnly.parameters = { export const rangeLabeledTicksOverlappingAtMax_TestOnly = (): string => html` `; @@ -117,17 +152,16 @@ rangeLabeledTicksOverlappingAtMax_TestOnly.parameters = { export const rangeLabeledTicksOverlappingAtMin_TestOnly = (): string => html` `; @@ -137,17 +171,16 @@ rangeLabeledTicksOverlappingAtMin_TestOnly.parameters = { export const rangeLabeledTicksEdgePositioningAtMax_TestOnly = (): string => html` `; @@ -157,17 +190,16 @@ rangeLabeledTicksEdgePositioningAtMax_TestOnly.parameters = { export const rangeLabeledTicksEdgePositioningAtMin_TestOnly = (): string => html` `; @@ -177,67 +209,52 @@ rangeLabeledTicksEdgePositioningAtMin_TestOnly.parameters = { export const Histogram = (): HTMLCalciteSliderElement => { const slider = document.createElement("calcite-slider") as HTMLCalciteSliderElement; - slider.min = number("min", -100); - slider.minValue = number("min-value", -33.32); - slider.max = number("max", 100); - slider.maxValue = number("max-value", 30.87); - slider.histogram = array( - "histogram", - [ - [-90, 0], - [-60, 12], - [-20, 25], - [20, 55], - [60, 10], - [90, 0], - ] as any, - " ", - ) as any; - slider.labelHandles = boolean("label-handles", false, "", "prop"); - slider.labelTicks = boolean("label-ticks", false, "", "prop"); - slider.ticks = number("ticks", 10); - slider.precise = boolean("precise", false, "", "prop"); - slider.snap = boolean("snap", false, "", "prop"); - slider.scale = select("scale", ["s", "m", "l"], "m"); + slider.min = -100; + slider.minValue = -33.32; + slider.max = 100; + slider.maxValue = 30.87; + slider.histogram = [ + [-90, 0], + [-60, 12], + [-20, 25], + [20, 55], + [60, 10], + [90, 0], + ] as any; + slider.ticks = 10; + slider.scale = "m"; slider.style.minWidth = "60vw"; return slider; }; export const HistogramWithColors = (): HTMLCalciteSliderElement => { const slider = document.createElement("calcite-slider") as HTMLCalciteSliderElement; - slider.min = number("min", 0); - slider.minValue = number("min-value", 35); - slider.max = number("max", 100); - slider.maxValue = number("max-value", 55); - slider.histogram = array( - "histogram", - [ - [0, 0], - [20, 12], - [40, 25], - [60, 55], - [80, 10], - [100, 0], - ] as any, - " ", - ) as any; + slider.min = 0; + slider.minValue = 35; + slider.max = 100; + slider.maxValue = 55; + slider.histogram = [ + [0, 0], + [20, 12], + [40, 25], + [60, 55], + [80, 10], + [100, 0], + ] as any; slider.style.minWidth = "60vw"; - const colors = array("histogram colors", ["red", "green", "blue"]); - const offsets = array( - "histogram color offsets", - colors.map((_, i) => `${(1 / (colors.length - 1)) * i}`), - ); + const colors = ["red", "green", "blue"]; + const offsets = colors.map((_, i) => `${(1 / (colors.length - 1)) * i}`); slider.histogramStops = colors.map((color, i) => ({ offset: parseFloat(offsets[i]), color })); - slider.scale = select("scale", ["s", "m", "l"], "m"); + slider.scale = "m"; return slider; }; export const darkModeHistogramRTL_TestOnly = (): HTMLCalciteSliderElement => { const slider = document.createElement("calcite-slider") as HTMLCalciteSliderElement; - slider.min = number("min", 0); - slider.minValue = number("min-value", 25); - slider.max = number("max", 100); - slider.maxValue = number("max-value", 75); + slider.min = 0; + slider.minValue = 25; + slider.max = 100; + slider.maxValue = 75; slider.histogram = [ [0, 0], [20, 12], @@ -246,12 +263,8 @@ export const darkModeHistogramRTL_TestOnly = (): HTMLCalciteSliderElement => { [80, 10], [100, 0], ]; - slider.labelHandles = boolean("label-handles", false, "", "prop"); - slider.labelTicks = boolean("label-ticks", false, "", "prop"); - slider.ticks = number("ticks", 10); - slider.precise = boolean("precise", false, "", "prop"); - slider.snap = boolean("snap", false, "", "prop"); - slider.scale = select("scale", ["s", "m", "l"], "m"); + slider.ticks = 10; + slider.scale = "m"; slider.style.minWidth = "60vw"; slider.className = "calcite-mode-dark"; return slider; diff --git a/packages/calcite-components/src/components/split-button/split-button.stories.ts b/packages/calcite-components/src/components/split-button/split-button.stories.ts index 2e49706c897..f1d8928d1a2 100644 --- a/packages/calcite-components/src/components/split-button/split-button.stories.ts +++ b/packages/calcite-components/src/components/split-button/split-button.stories.ts @@ -1,27 +1,81 @@ -import { text, select } from "../../../.storybook/fake-knobs"; -import { iconNames, boolean } from "../../../.storybook/helpers"; -import { modesDarkDefault } from "../../../.storybook/utils"; +import { iconNames } from "../../../.storybook/helpers"; +import { boolean, modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; +import { ATTRIBUTES } from "../../../.storybook/resources"; +const { appearance, kind, scale, width, iconType } = ATTRIBUTES; + +interface SplitButtonArgs { + appearance: string; + kind: string; + scale: string; + width: string; + loading: boolean; + disabled: boolean; + primaryIconStart: string; + primaryText: string; + primaryLabel: string; + dropdownLabel: string; + dropdownIconType: string; +} export default { title: "Components/Buttons/Split Button", + args: { + appearance: appearance.defaultValue, + kind: kind.defaultValue, + scale: scale.defaultValue, + width: width.defaultValue, + loading: false, + disabled: false, + primaryIconStart: iconNames[0], + primaryText: "Primary Option", + primaryLabel: "Primary Option", + dropdownLabel: "Additional Options", + dropdownIconType: iconType.defaultValue, + }, + argTypes: { + appearance: { + options: appearance.values, + control: { type: "select" }, + }, + kind: { + options: kind.values.filter((option) => option !== "info" && option !== "warning" && option !== "success"), + control: { type: "select" }, + }, + scale: { + options: scale.values, + control: { type: "select" }, + }, + width: { + options: width.values, + control: { type: "select" }, + }, + primaryIconStart: { + options: iconNames, + control: { type: "select" }, + }, + dropdownIconType: { + options: iconType.values, + control: { type: "select" }, + }, + }, }; -export const simple = (): string => html` +export const simple = (args: SplitButtonArgs): string => html`
Option 2 @@ -70,17 +124,15 @@ export const allWidths_TestOnly = (): string => html` export const iconEnd_TestOnly = (): string => html`
Option 2 @@ -94,18 +146,16 @@ export const iconEnd_TestOnly = (): string => html` export const iconStartAndIconEnd = (): string => html`
Option 2 @@ -119,16 +169,14 @@ export const iconStartAndIconEnd = (): string => html` export const darkModeRTL_TestOnly = (): string => html`
diff --git a/packages/calcite-components/src/components/stack/stack.stories.ts b/packages/calcite-components/src/components/stack/stack.stories.ts index 8d47d6ac6d1..3d4f17a665f 100644 --- a/packages/calcite-components/src/components/stack/stack.stories.ts +++ b/packages/calcite-components/src/components/stack/stack.stories.ts @@ -34,7 +34,7 @@ export const stretchSlottedContent = (): string => html` Relevance - Date modified + Date modified Title diff --git a/packages/calcite-components/src/components/stepper/stepper.stories.ts b/packages/calcite-components/src/components/stepper/stepper.stories.ts index 145f0d255e5..83218d21e96 100644 --- a/packages/calcite-components/src/components/stepper/stepper.stories.ts +++ b/packages/calcite-components/src/components/stepper/stepper.stories.ts @@ -1,10 +1,57 @@ -import { select, text } from "../../../.storybook/fake-knobs"; -import { boolean } from "../../../.storybook/helpers"; -import { modesDarkDefault } from "../../../.storybook/utils"; +import { boolean, modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; +import { ATTRIBUTES } from "../../../.storybook/resources"; +const { layout, scale } = ATTRIBUTES; + +interface StepperArgs { + layout: string; + scale: string; + numbered: boolean; + icon: boolean; + heading1: string; + description1: string; + heading2: string; + description2: string; + heading3: string; + description3: string; + heading4: string; + description4: string; +} export default { title: "Components/Stepper", + args: { + layout: layout.defaultValue, + scale: scale.defaultValue, + numbered: true, + icon: true, + heading1: "Choose method", + description1: "Add members without sending invitations", + heading2: "Compile member list", + description2: "", + heading3: "Set member properties", + description3: "", + heading4: "Confirm and complete", + description4: "Disabled example", + }, + argTypes: { + layout: { + options: layout.values.filter( + (option) => + option !== "grid" && + option !== "inline" && + option !== "center" && + option !== "auto" && + option !== "fixed" && + option !== "none", + ), + control: { type: "select" }, + }, + scale: { + options: scale.values, + control: { type: "select" }, + }, + }, parameters: { chromatic: { delay: 500, @@ -12,119 +59,83 @@ export default { }, }; -export const simple = (): string => html` +export const simple = (args: StepperArgs): string => html`

Default

- +
Step 1 Content Goes Here
 - +
Step 2 Content Goes Here
 - +
Step 3 Content Goes Here
 - +
Step 4 Content Goes Here

No Content

- + - + - + - + `; export const darkModeRTL_TestOnly = (): string => html` -
- - -
Step 1 Content Goes Here
 - - -
Step 2 Content Goes Here
 - - -
Step 3 Content Goes Here
 - - + -
Step 4 Content Goes Here
 - - -
+ +
Step 1 Content Goes Here
 + + +
Step 2 Content Goes Here
 + + +
Step 3 Constent Goes Here
 + + +
Step 4 Content Goes Here
 + + +
`; darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault }; @@ -141,12 +152,12 @@ export const overriddenWidth_TestOnly = (): string =>
Step 2 Content Goes Here
- +
Step 3 Content Goes Here
 - +
Step 4 Content Goes Here
 diff --git a/packages/calcite-components/src/components/switch/switch.stories.ts b/packages/calcite-components/src/components/switch/switch.stories.ts index af470740154..19033093437 100644 --- a/packages/calcite-components/src/components/switch/switch.stories.ts +++ b/packages/calcite-components/src/components/switch/switch.stories.ts @@ -1,30 +1,41 @@ -import { select } from "../../../.storybook/fake-knobs"; -import { boolean } from "../../../.storybook/helpers"; -import { modesDarkDefault } from "../../../.storybook/utils"; +import { boolean, modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; +import { ATTRIBUTES } from "../../../.storybook/resources"; +const { scale } = ATTRIBUTES; + +interface SwitchArgs { + checked: boolean; + disabled: boolean; + scale: string; +} export default { title: "Components/Controls/Switch", + args: { + checked: true, + disabled: false, + scale: scale.defaultValue, + }, + argTypes: { + scale: { + options: scale.values, + control: { type: "select" }, + }, + }, }; -export const simple = (): string => html` +export const simple = (args: SwitchArgs): string => html` `; export const darkModeRTL_TestOnly = (): string => html` - + `; darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault }; diff --git a/packages/calcite-components/src/components/table/table.stories.ts b/packages/calcite-components/src/components/table/table.stories.ts index f5334ca341e..9b9b66dd000 100644 --- a/packages/calcite-components/src/components/table/table.stories.ts +++ b/packages/calcite-components/src/components/table/table.stories.ts @@ -1,24 +1,83 @@ import { html } from "../../../support/formatting"; -import { modesDarkDefault } from "../../../.storybook/utils"; -import { boolean, number, select, text } from "../../../.storybook/fake-knobs"; +import { boolean, modesDarkDefault } from "../../../.storybook/utils"; +import { ATTRIBUTES } from "../../../.storybook/resources"; +const { interactionMode, selectionMode, scale, layout } = ATTRIBUTES; + +interface TableArgs { + pageSize: number; + interactionMode: string; + selectionMode: string; + selectionDisplay: string; + scale: string; + layout: string; + caption: string; + numbered: boolean; + bordered: boolean; + striped: boolean; +} export default { title: "Components/Table", + args: { + pageSize: 0, + interactionMode: interactionMode.defaultValue, + selectionMode: selectionMode.values[1], + selectionDisplay: "top", + scale: scale.defaultValue, + layout: layout.values[5], + caption: "Simple table", + numbered: false, + bordered: false, + striped: false, + }, + argTypes: { + interactionMode: { + options: interactionMode.values, + control: { type: "select" }, + }, + selectionMode: { + options: selectionMode.values.filter( + (option) => + option !== "children" && option !== "single-persist" && option !== "multichildren" && option !== "ancestors", + ), + control: { type: "select" }, + }, + selectionDisplay: { + options: ["none", "top"], + control: { type: "select" }, + }, + scale: { + options: scale.values, + control: { type: "select" }, + }, + layout: { + options: layout.values.filter( + (option) => + option !== "horizontal" && + option !== "vertical" && + option !== "grid" && + option !== "inline" && + option !== "center" && + option !== "none" && + option !== "horizontal-single", + ), + control: { type: "select" }, + }, + }, }; -export const simple = (): string => - html` html` + @@ -44,7 +103,8 @@ export const simple = (): string => cell cell - `; + +`; export const simpleStriped_TestOnly = (): string => html` diff --git a/packages/calcite-components/src/components/tabs/tabs.stories.ts b/packages/calcite-components/src/components/tabs/tabs.stories.ts index 69f92354e86..56489cd2bd7 100644 --- a/packages/calcite-components/src/components/tabs/tabs.stories.ts +++ b/packages/calcite-components/src/components/tabs/tabs.stories.ts @@ -1,20 +1,48 @@ -import { select } from "../../../.storybook/fake-knobs"; -import { boolean, iconNames } from "../../../.storybook/helpers"; +import { iconNames } from "../../../.storybook/helpers"; import { placeholderImage } from "../../../.storybook/placeholderImage"; import { createBreakpointStories, modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; +import { ATTRIBUTES } from "../../../.storybook/resources"; +const { layout, position, scale } = ATTRIBUTES; + +interface TabsArgs { + layout: string; + position: string; + scale: string; +} export default { title: "Components/Tabs", + args: { + layout: layout.values[3], + position: position.values[2], + scale: scale.defaultValue, + }, + argTypes: { + layout: { + options: layout.values.filter( + (option) => option !== "auto" && option !== "fixed" && option !== "none" && option !== "horizontal-single", + ), + control: { type: "select" }, + }, + position: { + options: position.values.filter((option) => option !== "start" && option !== "end"), + control: { type: "select" }, + }, + scale: { + options: scale.values, + control: { type: "select" }, + }, + }, }; -export const simpleDarkModeRTL_TestOnly = (): string => html` +export const simpleDarkModeRTL_TestOnly = (args: TabsArgs): string => html` Tab 1 Title @@ -36,12 +64,7 @@ simpleDarkModeRTL_TestOnly.parameters = { }; export const bordered = (): string => html` - + Tab 1 Title Tab 2 Title @@ -56,12 +79,7 @@ export const bordered = (): string => html` `; export const closable = (): string => html` - + Tab 1 Title Tab 2 Title @@ -76,14 +94,7 @@ export const closable = (): string => html` `; export const borderedDarkModeRTL_TestOnly = (): string => html` - + Tab 1 Title Tab 2 Title @@ -101,22 +112,12 @@ borderedDarkModeRTL_TestOnly.parameters = { themes: modesDarkDefault }; const selectedIcon = iconNames[0]; export const withIcons = (): string => html` - + - Tab 1 Title - Tab 2 Title - Tab 3 Title - + Tab 1 Title + Tab 2 Title + Tab 3 Title +

Tab 1 Content

 @@ -129,9 +130,9 @@ export const withIcons = (): string => html` export const setWidth = (): string => html`
Tab 1 Title diff --git a/packages/calcite-components/src/components/text-area/text-area.stories.ts b/packages/calcite-components/src/components/text-area/text-area.stories.ts index 28700bdea41..bc5bb5d4092 100644 --- a/packages/calcite-components/src/components/text-area/text-area.stories.ts +++ b/packages/calcite-components/src/components/text-area/text-area.stories.ts @@ -1,24 +1,67 @@ -import { select, text, number } from "../../../.storybook/fake-knobs"; -import { boolean, iconNames } from "../../../.storybook/helpers"; +import { boolean } from "../../../.storybook/utils"; +import { iconNames } from "../../../.storybook/helpers"; import { html } from "../../../support/formatting"; +import { ATTRIBUTES } from "../../../.storybook/resources"; +const { scale, status } = ATTRIBUTES; + +interface TextAreaArgs { + scale: string; + status: string; + placeholder: string; + disabled: boolean; + columns: number; + resize: string; + rows: number; + label: string; + name: string; + validationMessage: string; + validationIcon: string; +} export default { title: "Components/TextArea", + args: { + scale: scale.defaultValue, + status: status.defaultValue, + placeholder: "Add Notes", + disabled: false, + columns: 20, + resize: "both", + rows: 2, + label: "", + name: "", + validationMessage: "", + validationIcon: "", + }, + argTypes: { + scale: { + options: scale.values, + control: { type: "select" }, + }, + status: { + options: status.values, + control: { type: "select" }, + }, + validationIcon: { + options: iconNames, + control: { type: "select" }, + }, + }, }; -export const simple = (): string => html` +export const simple = (args: TextAreaArgs): string => html` `; @@ -33,30 +76,16 @@ export const darkModeRTL_TestOnly = (): string => html` `; export const withSlottedElements = (): string => html` - - RESET - + + RESET + `; export const withSlottedElementsDarkModeRTL_TestOnly = (): string => html` - RESET - + RESET + `; diff --git a/packages/calcite-components/src/components/tile-group/tile-group.stories.ts b/packages/calcite-components/src/components/tile-group/tile-group.stories.ts index b7a2e498945..62322923432 100644 --- a/packages/calcite-components/src/components/tile-group/tile-group.stories.ts +++ b/packages/calcite-components/src/components/tile-group/tile-group.stories.ts @@ -1,20 +1,58 @@ -import { select, boolean } from "../../../.storybook/fake-knobs"; -import { html } from "../../../support/formatting"; +import { boolean } from "../../../.storybook/utils"; import { placeholderImage } from "../../../.storybook/placeholderImage"; +import { html } from "../../../support/formatting"; +import { ATTRIBUTES } from "../../../.storybook/resources"; +const { dir, layout, scale } = ATTRIBUTES; + +interface TitleGroupArgs { + dir: string; + disabled: boolean; + layout: string; + scale: string; +} export default { title: "Components/Tiles/Tile Group", + args: { + dir: dir.defaultValue, + disabled: false, + layout: layout.defaultValue, + scale: scale.defaultValue, + }, + argTypes: { + dir: { + options: dir.values, + control: { type: "select" }, + }, + layout: { + options: layout.values.filter( + (option) => + option !== "grid" && + option !== "inline" && + option !== "center" && + option !== "auto" && + option !== "fixed" && + option !== "none" && + option !== "horizontal-single", + ), + control: { type: "select" }, + }, + scale: { + options: scale.values, + control: { type: "select" }, + }, + }, parameters: { chromatic: { delay: 10000, viewports: [1728] }, }, }; -export const simple = (): string => html` +export const simple = (args: TitleGroupArgs): string => html` + option !== "inline" && + option !== "center" && + option !== "auto" && + option !== "fixed" && + option !== "none" && + option !== "horizontal-single", + ), + control: { type: "select" }, + }, + dir: { + options: dir.values, + control: { type: "select" }, + }, + alignment: { + options: alignment.values, + control: { type: "select" }, + }, + width: { + options: width.values.filter((option) => option !== "half"), + control: { type: "select" }, + }, + type: { + options: buttonType.values, + control: { type: "select" }, + }, + }, }; const tileSelectsHTML = () => html` @@ -13,10 +61,10 @@ const tileSelectsHTML = () => html` heading="Tile title lorem ipsum Tile title lorem ipsum Tile title lorem ipsum Tile title lorem ipsum Tile title lorem ipsum Tile title lorem ipsum" icon="layers" name="light" - ${boolean("input-enabled", true, "Tile Select") && "input-enabled"} - input-alignment="${select("input-alignment", ["start", "end"], "start", "Tile Select")}" - width="${select("width", ["full", "auto"], "auto", "Tile Select")}" - type="${select("type", ["radio", "checkbox"], "radio", "Tile Select")}" + input-enabled + input-alignment="start" + width="auto" + type="radio" value="one" > @@ -25,10 +73,10 @@ const tileSelectsHTML = () => html` heading="Tile title lorem ipsum" icon="layers" name="light" - ${boolean("input-enabled", true, "Tile Select") && "input-enabled"} - input-alignment="${select("input-alignment", ["start", "end"], "start", "Tile Select")}" - width="${select("width", ["full", "auto"], "auto", "Tile Select")}" - type="${select("type", ["radio", "checkbox"], "radio", "Tile Select")}" + input-enabled + input-alignment="start" + width="auto" + type="radio" value="two" > @@ -37,10 +85,10 @@ const tileSelectsHTML = () => html` heading="Tile title lorem ipsum" icon="layers" name="light" - ${boolean("input-enabled", true, "Tile Select") && "input-enabled"} - input-alignment="${select("input-alignment", ["start", "end"], "start", "Tile Select")}" - width="${select("width", ["full", "auto"], "auto", "Tile Select")}" - type="${select("type", ["radio", "checkbox"], "radio", "Tile Select")}" + input-enabled + input-alignment="start" + width="auto" + type="radio" value="three" > @@ -49,39 +97,75 @@ const tileSelectsHTML = () => html` heading="Tile-title-lorem-ipsum-Tile-title-lorem-ipsum-Tile-title-lorem-ipsum-Tile-title-lorem-ipsum-Tile-title-lorem-ipsum-Tile-title-lorem-ipsum" icon="layers" name="light" - ${boolean("input-enabled", true, "Tile Select") && "input-enabled"} - input-alignment="${select("input-alignment", ["start", "end"], "start", "Tile Select")}" - width="${select("width", ["full", "auto"], "auto", "Tile Select")}" - type="${select("type", ["radio", "checkbox"], "radio", "Tile Select")}" + input-enabled + input-alignment="start" + width="auto" + type="radio" value="four" > `; -export const simple = (): string => html` - - ${tileSelectsHTML()} +export const simple = (args: TileSelectGroupArgs): string => html` + + + + + + + + + `; export const disabled_TestOnly = (): string => html` - - ${tileSelectsHTML()} - + ${tileSelectsHTML()} `; export const darkModeRTL_TestOnly = (): string => html` - + ${tileSelectsHTML()} `; diff --git a/packages/calcite-components/src/components/tile-select/tile-select.stories.ts b/packages/calcite-components/src/components/tile-select/tile-select.stories.ts index 819259fa7c7..51307fab1a2 100644 --- a/packages/calcite-components/src/components/tile-select/tile-select.stories.ts +++ b/packages/calcite-components/src/components/tile-select/tile-select.stories.ts @@ -1,114 +1,73 @@ -import { boolean, select, text } from "../../../.storybook/fake-knobs"; +import { boolean } from "../../../.storybook/utils"; import { iconNames } from "../../../.storybook/helpers"; -import { - Attribute, - Attributes, - createComponentHTML as create, - filterComponentAttributes, -} from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; +import { ATTRIBUTES } from "../../../.storybook/resources"; +const { alignment, buttonType, width } = ATTRIBUTES; + +interface TileSelectArgs { + checked: boolean; + description: string; + disabled: boolean; + heading: string; + hidden: boolean; + icon: string; + inputAlignment: string; + inputEnabled: boolean; + type: string; + value: string; + width: string; +} export default { title: "Components/Tiles/Tile Select", + args: { + checked: false, + description: "", + disabled: false, + heading: "", + hidden: false, + icon: "", + inputAlignment: alignment.defaultValue, + inputEnabled: false, + type: buttonType.defaultValue, + value: "one", + width: width.defaultValue, + }, + argTypes: { + icon: { + options: iconNames, + control: { type: "select" }, + }, + inputAlignment: { + options: alignment.values.filter((option) => option !== "center"), + control: { type: "select" }, + }, + type: { + options: buttonType.values, + control: { type: "select" }, + }, + width: { + options: width.values.filter((option) => option !== "half"), + control: { type: "select" }, + }, + }, }; -const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ exceptions } = { exceptions: [] }) => { - return filterComponentAttributes( - [ - { - name: "checked", - commit(): Attribute { - this.value = boolean("checked", false, "", "prop"); - delete this.build; - return this; - }, - }, - { - name: "description", - commit(): Attribute { - this.value = text("description", ""); - delete this.build; - return this; - }, - }, - { - name: "disabled", - commit(): Attribute { - this.value = boolean("disabled", false, "", "prop"); - delete this.build; - return this; - }, - }, - { - name: "heading", - commit(): Attribute { - this.value = text("heading", ""); - delete this.build; - return this; - }, - }, - { - name: "hidden", - commit(): Attribute { - this.value = boolean("hidden", false, "", "prop"); - delete this.build; - return this; - }, - }, - { - name: "icon", - commit(): Attribute { - this.value = select("icon", ["", ...iconNames], ""); - delete this.build; - return this; - }, - }, - { - name: "input-alignment", - commit(): Attribute { - this.value = select("input-alignment", ["start", "end"], "start"); - delete this.build; - return this; - }, - }, - { - name: "input-enabled", - commit(): Attribute { - this.value = boolean("input-enabled", false, "", "prop"); - delete this.build; - return this; - }, - }, - { - name: "type", - commit(): Attribute { - this.value = select("type", ["radio", "checkbox"], "radio"); - delete this.build; - return this; - }, - }, - { - name: "value", - commit(): Attribute { - this.value = text("value", "one"); - delete this.build; - return this; - }, - }, - { - name: "width", - commit(): Attribute { - this.value = select("width", ["auto", "full"], "auto"); - delete this.build; - return this; - }, - }, - ], - exceptions, - ); -}; - -export const simple = (): string => html`${create("calcite-tile-select", createAttributes())}`; +export const simple = (args: TileSelectArgs): string => html` + +`; export const checkbox_TestOnly = (): string => html``; diff --git a/packages/calcite-components/src/components/tile/tile.stories.ts b/packages/calcite-components/src/components/tile/tile.stories.ts index f6e676b2e1a..c1ce87e0dbc 100644 --- a/packages/calcite-components/src/components/tile/tile.stories.ts +++ b/packages/calcite-components/src/components/tile/tile.stories.ts @@ -1,26 +1,55 @@ -import { select, text } from "../../../.storybook/fake-knobs"; -import { iconNames, boolean } from "../../../.storybook/helpers"; -import { createBreakpointStories, modesDarkDefault } from "../../../.storybook/utils"; +import { iconNames } from "../../../.storybook/helpers"; +import { boolean, createBreakpointStories, modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; import { placeholderImage } from "../../../.storybook/placeholderImage"; +import { ATTRIBUTES } from "../../../.storybook/resources"; +const { scale } = ATTRIBUTES; +interface TileArgs { + active: boolean; + description: string; + disabled: boolean; + heading: string; + hidden: boolean; + href: string; + icon: string; + scale: string; +} export default { title: "Components/Tiles/Tile", + args: { + active: false, + description: + "Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall.", + disabled: false, + heading: "Tile heading lorem ipsum", + hidden: false, + href: "#", + icon: "layer", + scale: scale.defaultValue, + }, + argTypes: { + icon: { + options: iconNames, + control: { type: "select" }, + }, + scale: { + options: scale.values, + control: { type: "select" }, + }, + }, }; -export const simple = (): string => html` +export const simple = (args: TileArgs): string => html` `; diff --git a/packages/calcite-components/src/components/time-picker/time-picker.stories.ts b/packages/calcite-components/src/components/time-picker/time-picker.stories.ts index aea34453e6f..43ca7a64769 100644 --- a/packages/calcite-components/src/components/time-picker/time-picker.stories.ts +++ b/packages/calcite-components/src/components/time-picker/time-picker.stories.ts @@ -1,24 +1,66 @@ -import { number, select, text } from "../../../.storybook/fake-knobs"; -import { boolean } from "../../../.storybook/helpers"; +import { boolean } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; import { defaultMenuPlacement, menuPlacements } from "../../utils/floating-ui"; -import { locales, numberingSystems } from "../../utils/locale"; +import { locales, numberingSystems, defaultLocale, defaultNumberingSystem } from "../../utils/locale"; +import { ATTRIBUTES } from "../../../.storybook/resources"; +const { scale } = ATTRIBUTES; + +interface TimePicker { + disabled: boolean; + hidden: boolean; + lang: string; + name: string; + numberingSystem: string; + placement: string; + scale: string; + step: number; + value: string; +} export default { title: "Components/Controls/Time/Time Picker", + args: { + disabled: false, + hidden: false, + lang: defaultLocale, + name: "simple", + numberingSystem: defaultNumberingSystem, + placement: defaultMenuPlacement, + scale: scale.defaultValue, + step: 0.001, + value: "10:37:09.023", + }, + argTypes: { + lang: { + options: locales, + control: { type: "select" }, + }, + numberingSystem: { + options: numberingSystems, + control: { type: "select" }, + }, + placement: { + options: menuPlacements, + control: { type: "select" }, + }, + scale: { + options: scale.values, + control: { type: "select" }, + }, + }, }; -export const simple = (): string => html` +export const simple = (args: TimePicker): string => html` `; diff --git a/packages/calcite-components/src/components/tip-manager/tip-manager.stories.ts b/packages/calcite-components/src/components/tip-manager/tip-manager.stories.ts index 79797148ff5..030ecfc7824 100644 --- a/packages/calcite-components/src/components/tip-manager/tip-manager.stories.ts +++ b/packages/calcite-components/src/components/tip-manager/tip-manager.stories.ts @@ -1,32 +1,16 @@ -import { boolean } from "../../../.storybook/fake-knobs"; import { placeholderImage } from "../../../.storybook/placeholderImage"; -import { - Attribute, - Attributes, - createComponentHTML as create, - filterComponentAttributes, - modesDarkDefault, -} from "../../../.storybook/utils"; +import { boolean, modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; +interface TipManagerArgs { + closed: boolean; +} + export default { title: "Components/Tips/Tip Manager", -}; - -const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ exceptions } = { exceptions: [] }) => { - return filterComponentAttributes( - [ - { - name: "closed", - commit(): Attribute { - this.value = boolean("closed", false, "", "prop"); - delete this.build; - return this; - }, - }, - ], - exceptions, - ); + args: { + closed: false, + }, }; const tipContent = html` @@ -73,17 +57,14 @@ const tipContent = html` `; -export const simple = (): string => create("calcite-tip-manager", createAttributes(), tipContent); - -export const darkModeRTL_TestOnly = (): string => - create( - "calcite-tip-manager", - createAttributes({ exceptions: ["dir", "class"] }).concat([ - { name: "dir", value: "rtl" }, - { name: "class", value: "calcite-mode-dark" }, - ]), - tipContent, - ); +export const simple = (args: TipManagerArgs): string => html` + ${tipContent} +`; + +export const darkModeRTL_TestOnly = (): string => html` + ${tipContent} +`; + darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault }; export const tipWithoutGroup_TestOnly = (): string => diff --git a/packages/calcite-components/src/components/tip/tip.stories.ts b/packages/calcite-components/src/components/tip/tip.stories.ts index c916269a1b5..96f80b3298e 100644 --- a/packages/calcite-components/src/components/tip/tip.stories.ts +++ b/packages/calcite-components/src/components/tip/tip.stories.ts @@ -1,63 +1,39 @@ -import { boolean, text } from "../../../.storybook/fake-knobs"; -import { - Attribute, - filterComponentAttributes, - Attributes, - createComponentHTML as create, - modesDarkDefault, -} from "../../../.storybook/utils"; +import { boolean, modesDarkDefault } from "../../../.storybook/utils"; import { placeholderImage } from "../../../.storybook/placeholderImage"; +import { html } from "../../../support/formatting"; + +interface TipArgs { + closed: boolean; + closeDisabled: boolean; + heading: string; +} export default { title: "Components/Tips/Tip", + args: { + closed: false, + closeDisabled: false, + heading: "My Tip", + }, }; -const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ exceptions } = { exceptions: [] }) => { - return filterComponentAttributes( - [ - { - name: "closed", - commit(): Attribute { - this.value = boolean("closed", false, "", "prop"); - delete this.build; - return this; - }, - }, - { - name: "close-disabled", - commit(): Attribute { - this.value = boolean("closeDisabled", false, "", "prop"); - delete this.build; - return this; - }, - }, - { - name: "heading", - commit(): Attribute { - this.value = text("heading", "My Tip"); - delete this.build; - return this; - }, - }, - ], - exceptions, - ); -}; - -const html = `This is an image.Enim nascetur erat faucibus ornare varius arcu fames bibendum habitant felis elit ante. Nibh morbi massa curae; leo semper diam aenean congue taciti eu porta. Varius faucibus ridiculus donec. Montes sit ligula purus porta ante lacus habitasse libero cubilia purus! In quis congue arcu maecenas felis cursus pellentesque nascetur porta donec non. Quisque, rutrum ligula pharetra justo habitasse facilisis rutrum neque. Magnis nostra nec nulla dictumst taciti consectetur. Non porttitor tempor orci dictumst magna porta vitae.
This is a link.`; -export const simple = (): string => create("calcite-tip", createAttributes(), html); +export const simple = (args: TipArgs): string => html` + + ${htmlContent} + +`; + +export const darkModeRTL_TestOnly = (): string => html` + ${htmlContent} +`; -export const darkModeRTL_TestOnly = (): string => - create( - "calcite-tip", - createAttributes({ exceptions: ["dir", "class"] }).concat([ - { name: "dir", value: "rtl" }, - { name: "class", value: "calcite-mode-dark" }, - ]), - html, - ); darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault }; diff --git a/packages/calcite-components/src/components/tooltip/tooltip.stories.ts b/packages/calcite-components/src/components/tooltip/tooltip.stories.ts index 4658cdd2880..2ba73b2cec1 100644 --- a/packages/calcite-components/src/components/tooltip/tooltip.stories.ts +++ b/packages/calcite-components/src/components/tooltip/tooltip.stories.ts @@ -1,26 +1,43 @@ -import { select, number } from "../../../.storybook/fake-knobs"; import { html } from "../../../support/formatting"; -import { boolean } from "../../../.storybook/helpers"; import { placements } from "../../utils/floating-ui"; -import { modesDarkDefault } from "../../../.storybook/utils"; +import { boolean, modesDarkDefault } from "../../../.storybook/utils"; const contentHTML = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua`; const referenceElementHTML = `Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.`; +interface TooltipArgs { + placements: string; + offsetDistance: number; + offsetSkidding: number; + open: boolean; +} + export default { title: "Components/Tooltip", + args: { + placements: placements[0], + offsetDistance: 6, + offsetSkidding: 0, + open: false, + }, + argTypes: { + placements: { + options: placements, + control: { type: "select" }, + }, + }, }; -export const simple = (): string => html` +export const simple = (args: TooltipArgs): string => html`
${referenceElementHTML} ${contentHTML} @@ -32,10 +49,10 @@ export const open_TestOnly = (): string => html` ${referenceElementHTML} ${contentHTML} @@ -49,10 +66,9 @@ export const darkModeRTL_TestOnly = (): string => html` class="calcite-mode-dark" dir="rtl" reference-element="reference-element" - placement="${select("placement", placements, "auto")}" - offset-distance="${number("offset-distance", 6)}" - offset-skidding="${number("offset-skidding", 0)}" - ${boolean("open", false)} + placement="auto" + offset-distance="6" + offset-skidding="0" > ${contentHTML} diff --git a/packages/calcite-components/src/components/tree/tree.stories.ts b/packages/calcite-components/src/components/tree/tree.stories.ts index 487bf5842f0..135b61543f0 100644 --- a/packages/calcite-components/src/components/tree/tree.stories.ts +++ b/packages/calcite-components/src/components/tree/tree.stories.ts @@ -1,25 +1,55 @@ -import { select } from "../../../.storybook/fake-knobs"; -import { boolean, iconNames } from "../../../.storybook/helpers"; -import { modesDarkDefault } from "../../../.storybook/utils"; +import { boolean, modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; +import { ATTRIBUTES } from "../../../.storybook/resources"; +const { selectionMode, scale } = ATTRIBUTES; + +interface TreeArgs { + lines: boolean; + selectionMode: string; + scale: string; +} + +export default { + title: "Components/Tree", + args: { + lines: false, + selectionMode: selectionMode.values[0], + scale: scale.defaultValue, + }, + argTypes: { + selectionMode: { + options: selectionMode.values, + control: { type: "select" }, + }, + scale: { + options: scale.values, + control: { type: "select" }, + }, + }, + parameters: { + chromatic: { + delay: 1000, + }, + }, +}; const treeItems = html` Child 1 - + Child 2 - + Grandchild 1 - + Grandchild 2 - + Great-Grandchild 1 - + Great-Grandchild 2 @@ -79,7 +109,7 @@ const slottedSmallDropdown = html` `; const iconStartLargeActionsEnd = html` - + Child 1 ${slottedLargeDropdown} ${slottedLargeDropdown} @@ -89,7 +119,7 @@ const iconStartLargeActionsEnd = html` Grandchild 1 - + Great-Grandchild 1 ${slottedLargeDropdown}${slottedLargeDropdown} @@ -97,11 +127,11 @@ const iconStartLargeActionsEnd = html` - + Child 3 ${slottedLargeDropdown} - + Grandchild 1 @@ -152,32 +182,13 @@ const slottedSmallActionsEnd = html` `; -export default { - title: "Components/Tree", - parameters: { - chromatic: { - delay: 1000, - }, - }, -}; - -const selectionModes = ["single", "single-persist", "children", "multichildren", "ancestors", "none", "multiple"]; - -export const simple = (): string => html` - +export const simple = (args: TreeArgs): string => html` + ${treeItems} `; -export const selectionModeNone = (): string => html` - ${treeItems} -`; +export const selectionModeNone = (): string => html` ${treeItems} `; export const withLines_TestOnly = (): string => html` @@ -249,15 +260,7 @@ export const treeItemContentIsNotClipped_TestOnly = (): string => html` `; export const darkModeRTL_TestOnly = (): string => html` - - ${treeItems} - + ${treeItems} `; darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault }; diff --git a/packages/calcite-components/src/components/value-list/value-list.stories.ts b/packages/calcite-components/src/components/value-list/value-list.stories.ts index e5b7bdf6fe5..e471587bf44 100644 --- a/packages/calcite-components/src/components/value-list/value-list.stories.ts +++ b/packages/calcite-components/src/components/value-list/value-list.stories.ts @@ -1,104 +1,54 @@ -import { boolean } from "../../../.storybook/fake-knobs"; -import { - Attribute, - Attributes, - createComponentHTML as create, - filterComponentAttributes, - modesDarkDefault, -} from "../../../.storybook/utils"; +import { boolean, modesDarkDefault } from "../../../.storybook/utils"; import { html } from "../../../support/formatting"; +interface ValueListArgs { + disabled: boolean; + dragEnabled: boolean; + filterEnabled: boolean; + loading: boolean; + multiple: boolean; + selectionFollowsFocus: boolean; +} + export default { title: "Components/Value List", -}; - -const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({ exceptions } = { exceptions: [] }) => { - return filterComponentAttributes( - [ - { - name: "disabled", - commit(): Attribute { - this.value = boolean("disabled", false, "", "prop"); - delete this.build; - return this; - }, - }, - { - name: "drag-enabled", - commit(): Attribute { - this.value = boolean("dragEnabled", false, "", "prop"); - delete this.build; - return this; - }, - }, - { - name: "filter-enabled", - commit(): Attribute { - this.value = boolean("filterEnabled", false, "", "prop"); - delete this.build; - return this; - }, - }, - { - name: "loading", - commit(): Attribute { - this.value = boolean("loading", false, "", "prop"); - delete this.build; - return this; - }, - }, - { - name: "multiple", - commit(): Attribute { - this.value = boolean("multiple", false, "", "prop"); - delete this.build; - return this; - }, - }, - { - name: "selection-follows-focus", - commit(): Attribute { - this.value = boolean("selection-follows-focus", false, "", "prop"); - delete this.build; - return this; - }, - }, - ], - exceptions, - ); + args: { + disabled: false, + dragEnabled: false, + filterEnabled: false, + loading: false, + multiple: false, + selectionFollowsFocus: false, + }, }; const action = html` - + `; -export const simple = (): string => html` - ${create( - "calcite-value-list", - createAttributes(), - html` - - ${action} - - - ${action} - - - ${action} - - `, - )} +export const simple = (args: ValueListArgs): string => html` + + + ${action} + + + ${action} + + + ${action} + + `; export const disabled_TestOnly = (): string => html` @@ -115,27 +65,39 @@ export const disabled_TestOnly = (): string => html` `; export const darkModeRTL_TestOnly = (): string => html` - ${create( - "calcite-value-list", - createAttributes({ exceptions: ["dir", "class"] }).concat([ - { name: "dir", value: "rtl" }, - { name: "class", value: "calcite-mode-dark" }, - ]), - html` - - ${action} - - - ${action} - - - ${action} - - `, - )} + + + + + + + + + + + `; + darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault }; diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts index b741aa3353b..b8a1af288d8 100644 --- a/packages/calcite-components/src/custom-theme.stories.ts +++ b/packages/calcite-components/src/custom-theme.stories.ts @@ -1,36 +1,86 @@ -import { color } from "../.storybook/fake-knobs"; import { placeholderImage } from "../.storybook/placeholderImage"; +interface CustomThemeArgs { + calciteColorBrand: string; + calciteColorBrandHover: string; + calciteColorBrandPress: string; + calciteColorStatusInfo: string; + calciteColorStatusSuccess: string; + calciteColorStatusWarning: string; + calciteColorStatusDanger: string; + calciteColorStatusDangerHover: string; + calciteColorStatusDangerPress: string; + calciteColorBackground: string; + calciteColorForeground1: string; + calciteColorForeground2: string; + calciteColorForeground3: string; + calciteColorText1: string; + calciteColorText2: string; + calciteColorText3: string; + calciteColorTextInverse: string; + calciteColorTextLink: string; + calciteColorBorder1: string; + calciteColorBorder2: string; + calciteColorBorder3: string; + calciteColorBorderInput: string; + calciteUiIconColor: string; +} + export default { title: "Theming/Custom Theme", + args: { + calciteColorBrand: "#007ac2", + calciteColorBrandHover: "#00619b", + calciteColorBrandPress: "#004874", + calciteColorStatusInfo: "#00619b", + calciteColorStatusSuccess: "#35ac46", + calciteColorStatusWarning: "#edd317", + calciteColorStatusDanger: "#d83020", + calciteColorStatusDangerHover: "#a82b1e", + calciteColorStatusDangerPress: "#7c1d13", + calciteColorBackground: "#f8f8f8", + calciteColorForeground1: "#ffffff", + calciteColorForeground2: "#f3f3f3", + calciteColorForeground3: "#eaeaea", + calciteColorText1: "#151515", + calciteColorText2: "#4a4a4a", + calciteColorText3: "#6a6a6a", + calciteColorTextInverse: "#ffffff", + calciteColorTextLink: "#00619b", + calciteColorBorder1: "#cacaca", + calciteColorBorder2: "#d4d4d4", + calciteColorBorder3: "#dfdfdf", + calciteColorBorderInput: "#949494", + calciteUiIconColor: "currentColor", + }, }; -export const themingInteractive = (): string => { +export const themingInteractive = (args: CustomThemeArgs): string => { return `