From 4cf280453ac970a24159b5a74ca6ccc043b04ebe Mon Sep 17 00:00:00 2001 From: TheSisb Date: Wed, 20 Sep 2023 10:53:04 -0500 Subject: [PATCH 01/13] chore: add biomejs and config to monorepo --- biome.json | 62 ++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + yarn.lock | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 135 insertions(+) create mode 100644 biome.json diff --git a/biome.json b/biome.json new file mode 100644 index 0000000000..c822883752 --- /dev/null +++ b/biome.json @@ -0,0 +1,62 @@ +{ + "$schema": "https://biomejs.dev/schemas/1.2.2/schema.json", + "files": { + "maxSize": 5242880, + "ignore": [ + "node_modules", + "bower_components", + "dist", + "bin", + "__testfixtures__", + "__fixtures__", + "packages/paste-icons/cjs", + "packages/paste-icons/esm", + "packages/paste-icons/json", + "packages/paste-theme-designer/public", + "packages/paste-theme-designer/out", + "packages/paste-token-contrast-checker/public", + ".cache", + ".next", + ".yarn", + "packages/**/dist/*", + "tsconfig.build.tsbuildinfo", + "**/*.d.ts", + ".codesandbox/ci.json", + "build.icon-list.js", + "**/*.hbs" + ] + }, + "organizeImports": { + "enabled": true + }, + "linter": { + "enabled": true, + "rules": { + "recommended": true, + "suspicious": { + "noExplicitAny": "off" + } + } + }, + "formatter": { + "enabled": true, + "indentStyle": "space", + "indentSize": 2, + "lineWidth": 120 + }, + "javascript": { + "formatter": { + "indentStyle": "space", + "indentSize": 2, + "lineWidth": 120, + "quoteStyle": "single" + } + }, + "json": { + "formatter": { + "indentStyle": "space", + "indentSize": 2, + "lineWidth": 120 + } + } +} diff --git a/package.json b/package.json index cf3ba30b3d..9c726eeadb 100644 --- a/package.json +++ b/package.json @@ -94,6 +94,7 @@ "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.21.4", "@babel/types": "^7.21.4", + "@biomejs/biome": "1.2.2", "@changesets/changelog-github": "^0.2.8", "@changesets/cli": "^2.13.1", "@commitlint/cli": "16.2.1", diff --git a/yarn.lock b/yarn.lock index eefeaabb8a..f297ae0a39 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4872,6 +4872,77 @@ __metadata: languageName: node linkType: hard +"@biomejs/biome@npm:1.2.2": + version: 1.2.2 + resolution: "@biomejs/biome@npm:1.2.2" + dependencies: + "@biomejs/cli-darwin-arm64": 1.2.2 + "@biomejs/cli-darwin-x64": 1.2.2 + "@biomejs/cli-linux-arm64": 1.2.2 + "@biomejs/cli-linux-x64": 1.2.2 + "@biomejs/cli-win32-arm64": 1.2.2 + "@biomejs/cli-win32-x64": 1.2.2 + dependenciesMeta: + "@biomejs/cli-darwin-arm64": + optional: true + "@biomejs/cli-darwin-x64": + optional: true + "@biomejs/cli-linux-arm64": + optional: true + "@biomejs/cli-linux-x64": + optional: true + "@biomejs/cli-win32-arm64": + optional: true + "@biomejs/cli-win32-x64": + optional: true + bin: + biome: bin/biome + checksum: 36dfcc756c53e22a5f6b5819ebb261b02acaa4df2832ef00e231bf73d4707121d0acdefa81f12523beb09a7b363676ca8fe719873932794d2e92130c3a41908c + languageName: node + linkType: hard + +"@biomejs/cli-darwin-arm64@npm:1.2.2": + version: 1.2.2 + resolution: "@biomejs/cli-darwin-arm64@npm:1.2.2" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@biomejs/cli-darwin-x64@npm:1.2.2": + version: 1.2.2 + resolution: "@biomejs/cli-darwin-x64@npm:1.2.2" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@biomejs/cli-linux-arm64@npm:1.2.2": + version: 1.2.2 + resolution: "@biomejs/cli-linux-arm64@npm:1.2.2" + conditions: os=linux & cpu=arm64 + languageName: node + linkType: hard + +"@biomejs/cli-linux-x64@npm:1.2.2": + version: 1.2.2 + resolution: "@biomejs/cli-linux-x64@npm:1.2.2" + conditions: os=linux & cpu=x64 + languageName: node + linkType: hard + +"@biomejs/cli-win32-arm64@npm:1.2.2": + version: 1.2.2 + resolution: "@biomejs/cli-win32-arm64@npm:1.2.2" + conditions: os=win32 & cpu=arm64 + languageName: node + linkType: hard + +"@biomejs/cli-win32-x64@npm:1.2.2": + version: 1.2.2 + resolution: "@biomejs/cli-win32-x64@npm:1.2.2" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "@changesets/apply-release-plan@npm:^4.0.0": version: 4.1.0 resolution: "@changesets/apply-release-plan@npm:4.1.0" @@ -38773,6 +38844,7 @@ fsevents@^1.2.7: "@babel/preset-react": ^7.18.6 "@babel/preset-typescript": ^7.21.4 "@babel/types": ^7.21.4 + "@biomejs/biome": 1.2.2 "@changesets/changelog-github": ^0.2.8 "@changesets/cli": ^2.13.1 "@commitlint/cli": 16.2.1 From 27b3e0348643986ad82da4668f976283c5db1541 Mon Sep 17 00:00:00 2001 From: TheSisb Date: Wed, 20 Sep 2023 11:10:22 -0500 Subject: [PATCH 02/13] chore: vscode settings for biomejs --- .vscode/extensions.json | 1 + .vscode/settings.json | 18 ++++++++++++++++++ 2 files changed, 19 insertions(+) diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 4b73c55736..324310b6cb 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -2,6 +2,7 @@ "recommendations": [ "dbaeumer.vscode-eslint", "esbenp.prettier-vscode", + "biomejs.biome", "unifiedjs.vscode-mdx", "styled-components.vscode-styled-components", "eamodio.gitlens", diff --git a/.vscode/settings.json b/.vscode/settings.json index 5c92698921..0b70e07a67 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,6 +1,24 @@ { "editor.formatOnSave": true, + "editor.codeActionsOnSave": { + "source.organizeImports.biome": true + }, "editor.defaultFormatter": "esbenp.prettier-vscode", + "[javascript]": { + "editor.defaultFormatter": "biomejs.biome" + }, + "[typescript]": { + "editor.defaultFormatter": "biomejs.biome" + }, + "[json]": { + "editor.defaultFormatter": "biomejs.biome" + }, + "[css]": { + "editor.defaultFormatter": "biomejs.biome" + }, + "[jsonc]": { + "editor.defaultFormatter": "biomejs.biome" + }, "search.exclude": { "**/dist": true, "**/docs": true From 3704c248398c4c34c16090fb26d31d9776752b1d Mon Sep 17 00:00:00 2001 From: TheSisb Date: Thu, 21 Sep 2023 14:26:16 -0500 Subject: [PATCH 03/13] chore: update ci and package.json scripts --- .github/workflows/on_pull_request.yml | 13 ++++--------- .prettierignore | 11 +++++++++++ package.json | 7 ++++--- 3 files changed, 19 insertions(+), 12 deletions(-) diff --git a/.github/workflows/on_pull_request.yml b/.github/workflows/on_pull_request.yml index 52073f5ac7..62797f0faf 100644 --- a/.github/workflows/on_pull_request.yml +++ b/.github/workflows/on_pull_request.yml @@ -258,8 +258,8 @@ jobs: - name: Run tests run: yarn test - prettier: - name: Prettier checks + format: + name: Code format checks runs-on: ubuntu-latest steps: - name: Checkout Repo @@ -300,13 +300,8 @@ jobs: if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true' run: yarn install --immutable - - name: Build packages - run: yarn build - env: - NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }} - - - name: Run prettier - run: yarn prettier + - name: Run BiomeJS + Prettier format for their respective files + run: yarn format:ci chromatic: name: Component Visual regression tests diff --git a/.prettierignore b/.prettierignore index 65b2df9986..42935c3dde 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,9 +1,20 @@ +**/*.ts +**/*.tsx +**/*.js +**/*.jsx +**/*.json +**/*.jsonc +**/*.css +**/*.md +**/*.mdx + node_modules bower_components dist bin __testfixtures__ +packages/paste-design-tokens/docs packages/paste-icons/cjs packages/paste-icons/esm packages/paste-icons/json diff --git a/package.json b/package.json index 9c726eeadb..4d8efd2ccf 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "build:theme-designer": "yarn nx run @twilio-paste/theme-designer:build", "build:nextjs-template": "yarn nx run @twilio-paste/nextjs-template:build", "build:contrast-checking": "yarn nx run @twilio-paste/token-contrast-checker:build", - "pre-push": "concurrently \"yarn:lint\" \"yarn:test\" \"yarn:prettier\" \"yarn:type-check\"", + "pre-push": "concurrently \"yarn:lint\" \"yarn:test\" \"yarn:format\" \"yarn:type-check\"", "prerelease": "yarn build && yarn lint && yarn test", "release": "yarn changeset publish", "release:next": "yarn lerna publish -m 'chore(release): pre release' --conventional-commits --canary --preid beta --dist-tag next", @@ -63,8 +63,6 @@ "start:test:storybook": "start-server-and-test 'NODE_ENV=test yarn start:storybook' http://localhost:9001 'yarn test:storybook'", "serve:website": "yarn workspace @twilio-paste/website start", "package-size-action-build": "yarn build", - "prettier": "prettier --list-different '{.storybook,packages,templates}/**/*.{ts,tsx}'", - "prettier-clean": "prettier --write '{.storybook,packages,templates}/**/*.{ts,tsx}'", "lint": "yarn pre-test && yarn lint:repo && yarn lint:core && yarn lint:website && yarn lint:remix && yarn lint:contrast-checker && yarn lint:nextjs-template && yarn lint:vscode-intellisense", "lint:core": "eslint -c .eslintrc.core.js --ext .tsx,.ts ./packages/{paste-color-contrast-utils,paste-core,paste-customization,paste-design-tokens,paste-icons,paste-libraries,paste-style-props,paste-theme,paste-types,paste-utils}/**/src", "lint:website": "eslint -c ./packages/paste-website/.eslintrc --ext .tsx,.ts ./packages/paste-website", @@ -73,6 +71,9 @@ "lint:nextjs-template": "eslint -c ./templates/paste-nextjs-template/.eslintrc.json --ext .tsx,.ts ./templates/paste-nextjs-template", "lint:vscode-intellisense": "eslint -c ./apps/vs-code-intellisense/.eslintrc.json --ext .tsx,.ts ./apps/vs-code-intellisense", "lint:repo": "eslint -c .eslintrc.repo.js --ext .tsx,.ts .", + "format": "biome format ./ && prettier --list-different ./packages/", + "format:write": "biome format ./ --write", + "format:ci": "biome ci ./ --linter-enabled=false && prettier --list-different ./packages/", "type-check": "yarn prebuild && yarn nx run-many --target=tsc", "tsc": "echo 'Did you mean to run yarn type-check?'", "chromatic": "chromatic", From 766b043bb79b117f9e99c80a7955d66e93a3d656 Mon Sep 17 00:00:00 2001 From: TheSisb Date: Thu, 21 Sep 2023 14:26:27 -0500 Subject: [PATCH 04/13] chore: update internal docs --- internal-docs/engineering/ci.md | 9 ++++++--- internal-docs/engineering/technologies.md | 2 +- internal-docs/engineering/testing.md | 8 ++++---- .../tokens/global/data-visualization.yml | 20 +++++++++---------- 4 files changed, 21 insertions(+), 18 deletions(-) diff --git a/internal-docs/engineering/ci.md b/internal-docs/engineering/ci.md index 1bd3853026..952db8db11 100644 --- a/internal-docs/engineering/ci.md +++ b/internal-docs/engineering/ci.md @@ -7,7 +7,7 @@ - [Lint](#lint) - [Test React 17](#test-react-17) - [Test React 16](#test-react-16) - - [Prettier checks](#prettier-checks) + - [Code formatting checks](#code-formatting-checks) - [Categorize the PR using labels](#categorize-the-pr-using-labels) - [Danger checks](#danger-checks) - [Check package sizes](#check-package-sizes) @@ -55,9 +55,12 @@ This job downloads the build cache of the monorepo, and then runs our Jest test This job downloads the build cache of the monorepo, and then runs our Jest test suite using React 16. -### Prettier checks +### Code formatting checks + +This job downloads the build cache of the monorepo, and then runs [BiomeJS](https://biomejs.dev/) and [Prettier](https://prettier.io/). BiomeJS runs on all TS(X) / JS(X) / JSON(C) / CSS files. Prettier runs on everything else, such as HTML, MDX, etc... + +Biome was selected due to its tremendous performance improvements over prettier to run on our main codebase. It lacks complete support for all file extensions, so prettier is still used where needed on unsupported file types. -This job downloads the build cache of the monorepo, and then runs Prettier. ### Categorize the PR using labels diff --git a/internal-docs/engineering/technologies.md b/internal-docs/engineering/technologies.md index 2ee4c70a48..7ae5600799 100644 --- a/internal-docs/engineering/technologies.md +++ b/internal-docs/engineering/technologies.md @@ -118,4 +118,4 @@ Our icons are converted from SVG to React components at compile time using our o ## Code Style -We use eslint (https://eslint.org/) and Prettier ([https://prettier.io/](https://prettier.io/)) to maintain a consistent, readable code style throughout the entire monorepo. +We use eslint (https://eslint.org/), [BiomeJS](https://biomejs.dev/), and Prettier ([https://prettier.io/](https://prettier.io/)) to maintain a consistent, readable code style throughout the entire monorepo. diff --git a/internal-docs/engineering/testing.md b/internal-docs/engineering/testing.md index 7c94655167..faef716fd6 100644 --- a/internal-docs/engineering/testing.md +++ b/internal-docs/engineering/testing.md @@ -9,7 +9,7 @@ - [End-to-end testing](#end-to-end-testing) - [Visual Regression Testing (VRT)](#visual-regression-testing-vrt) - [Linting](#linting) - - [PrettierJS](#prettierjs) + - [BiomeJS and PrettierJS](#biomejs-and-prettierjs) - [Commit lint](#commit-lint) - [Running tests/checks](#running-testschecks) - [Locally](#locally) @@ -98,11 +98,11 @@ Linting should be performed: If your code fails to meet the ESLint rules, you will “break the build”. This will prevent you from merging a PR or publishing new packages on `main`. -### PrettierJS +### BiomeJS and PrettierJS -Manually formatting code can be tiresome so we use [PrettierJS](https://prettier.io/) (Prettier) to do the leg work for you. Prettier is an opinionated code formatter which is configured to respect our ESLint rules. +Manually formatting code can be tiresome so we use [BiomeJS](https://biomejs.dev/) and [PrettierJS](https://prettier.io/) (Prettier) to do the leg work for you. They are both an opinionated code formatter which is configured to respect our ESLint rules. -It is configured to format your code when you commit it to git automatically. If using an IDE or Code Editor it is also recommended, if your IDE or editor supports it, to set it to “format on save”. The setting is often found in the user settings of your editor, and may require a Prettier plugin or extension. +It is configured to format your code when you commit it to git automatically. If using an IDE or Code Editor it is also recommended, if your IDE or editor supports it, to set it to “format on save”. The setting is often found in the user settings of your editor, and may require a plugin or extension. ### Commit lint diff --git a/packages/paste-design-tokens/tokens/global/data-visualization.yml b/packages/paste-design-tokens/tokens/global/data-visualization.yml index e01bb17479..bb5d1ccf6c 100644 --- a/packages/paste-design-tokens/tokens/global/data-visualization.yml +++ b/packages/paste-design-tokens/tokens/global/data-visualization.yml @@ -9,7 +9,7 @@ props: # 3:1 contrast ratio to color-background-body # 2:1 contrast ratio to neighboring colors color-data-visualization-1: - value: '{!palette-blue-80}' + value: "{!palette-blue-80}" comment: Color used for data visualizations. Must be used in a sequence. uicontrol_contrast_pairing: - color-background-body @@ -17,7 +17,7 @@ props: - color-data-visualization-10 - color-data-visualization-2 color-data-visualization-2: - value: '{!palette-green-70}' + value: "{!palette-green-70}" comment: Color used for data visualizations. Must be used in a sequence. uicontrol_contrast_pairing: - color-background-body @@ -25,7 +25,7 @@ props: - color-data-visualization-1 - color-data-visualization-3 color-data-visualization-3: - value: '{!palette-green-90}' + value: "{!palette-green-90}" comment: Color used for data visualizations. Must be used in a sequence. uicontrol_contrast_pairing: - color-background-body @@ -33,7 +33,7 @@ props: - color-data-visualization-2 - color-data-visualization-4 color-data-visualization-4: - value: '{!palette-blue-50}' + value: "{!palette-blue-50}" comment: Color used for data visualizations. Must be used in a sequence. uicontrol_contrast_pairing: - color-background-body @@ -41,7 +41,7 @@ props: - color-data-visualization-3 - color-data-visualization-5 color-data-visualization-5: - value: '{!palette-gray-80}' + value: "{!palette-gray-80}" comment: Color used for data visualizations. Must be used in a sequence. uicontrol_contrast_pairing: - color-background-body @@ -49,7 +49,7 @@ props: - color-data-visualization-4 - color-data-visualization-6 color-data-visualization-6: - value: '{!palette-purple-40}' + value: "{!palette-purple-40}" comment: Color used for data visualizations. Must be used in a sequence. uicontrol_contrast_pairing: - color-background-body @@ -57,7 +57,7 @@ props: - color-data-visualization-5 - color-data-visualization-7 color-data-visualization-7: - value: '{!palette-purple-60}' + value: "{!palette-purple-60}" comment: Color used for data visualizations. Must be used in a sequence. uicontrol_contrast_pairing: - color-background-body @@ -65,7 +65,7 @@ props: - color-data-visualization-6 - color-data-visualization-8 color-data-visualization-8: - value: '{!palette-gray-50}' + value: "{!palette-gray-50}" comment: Color used for data visualizations. Must be used in a sequence. uicontrol_contrast_pairing: - color-background-body @@ -73,7 +73,7 @@ props: - color-data-visualization-7 - color-data-visualization-9 color-data-visualization-9: - value: '{!palette-red-80}' + value: "{!palette-red-80}" comment: Color used for data visualizations. Must be used in a sequence. uicontrol_contrast_pairing: - color-background-body @@ -81,7 +81,7 @@ props: - color-data-visualization-8 - color-data-visualization-10 color-data-visualization-10: - value: '{!palette-red-50}' + value: "{!palette-red-50}" comment: Color used for data visualizations. Must be used in a sequence. uicontrol_contrast_pairing: - color-background-body From f92e90c4dbc7343c57425762147f84936e946052 Mon Sep 17 00:00:00 2001 From: TheSisb Date: Fri, 22 Sep 2023 10:50:18 -0500 Subject: [PATCH 05/13] chore: format everything with biome --- .changeset/config.json | 2 +- .../changesets-that-need-core-check.spec.ts | 4 +- .../missing-changesets-check.spec.ts | 16 +- .../missing-upgrade-guide-check.spec.ts | 2 +- .danger/__tests__/pin-external-deps.spec.ts | 18 +- .danger/__tests__/utils.spec.ts | 48 +- .../__tests__/website-page-vrt-check.spec.ts | 2 +- .danger/changesets-that-need-core-check.ts | 4 +- .danger/missing-changesets-check.ts | 8 +- .danger/missing-upgrade-guide-check.ts | 4 +- .danger/package-json-check.ts | 4 +- .danger/pin-external-deps.ts | 18 +- .danger/utils.ts | 4 +- .danger/website-page-vrt-check.ts | 2 +- .eslint/resolver.js | 8 +- .jest/setupFilesAfterEnv.js | 2 +- .prettierrc.js | 2 +- .storybook/RenderPerformanceProfiler.tsx | 8 +- .../addons/google-analytics/register.js | 8 +- .storybook/main.ts | 8 +- .storybook/next.tsx | 2 +- .storybook/preview.tsx | 34 +- .storybook/test-runner.js | 4 +- apps/vs-code-intellisense/src/extension.ts | 16 +- apps/vs-code-intellisense/src/test/runTest.ts | 4 +- .../src/test/suite/extension.test.ts | 2 +- .../src/test/suite/index.ts | 2 +- .../test/suite/utils/get-theme-tokens.test.ts | 4 +- .../suite/utils/is-color-category.test.ts | 4 +- .../src/test/suite/utils/rem-to-px.test.ts | 2 +- .../src/tokens/dark-theme-tokens.ts | 2 +- .../src/tokens/default-theme-tokens.ts | 2 +- .../src/tokens/evergreen-theme-tokens.ts | 2 +- .../src/tokens/paste-token-attributes.ts | 2 +- .../src/tokens/sendgrid-theme-tokens.ts | 2 +- .../src/tokens/twilio-dark-theme-tokens.ts | 2 +- .../src/tokens/twilio-theme-tokens.ts | 2 +- .../src/types/paste-token.ts | 4 +- .../src/types/token-map.ts | 2 +- .../src/utils/get-theme-setting.ts | 2 +- .../src/utils/get-theme-tokens.ts | 2 +- .../src/utils/is-color-category.ts | 2 +- babel.config.js | 4 +- cypress.config.ts | 2 +- cypress/fixtures/example.json | 2 +- .../integration/landing-page/index.spec.ts | 2 +- .../integration/link-checker/index.spec.ts | 2 +- cypress/integration/site-search/index.spec.ts | 4 +- .../integration/sitemap-vrt/batch2.spec.ts | 4 +- .../integration/sitemap-vrt/batch3.spec.ts | 4 +- .../integration/sitemap-vrt/batch4.spec.ts | 4 +- .../integration/sitemap-vrt/batch5.spec.ts | 4 +- cypress/integration/sitemap-vrt/constants.ts | 2 +- cypress/integration/sitemap-vrt/index.spec.ts | 4 +- cypress/integration/token-list/index.spec.ts | 6 +- cypress/support/commands/parent-commands.ts | 19 +- dangerfile.ts | 4 +- .../tools/__tests__/tools.spec.ts | 4 +- .../tools/create-package-mappings.ts | 4 +- .../tools/generatePackageExportsMap.ts | 4 +- .../__tests__/barreled-to-unbarreled.spec.tsx | 4 +- .../transforms/barreled-to-unbarreled.js | 2 +- .../colorContrastPairingUtils.spec.ts | 6 +- packages/paste-color-contrast-utils/build.js | 2 +- .../paste-color-contrast-utils/src/utils.ts | 22 +- .../__tests__/AccountSwitcher.spec.tsx | 44 +- .../components/account-switcher/build.js | 2 +- .../account-switcher/src/AccountSwitcher.tsx | 10 +- .../src/AccountSwitcherBadge.tsx | 10 +- .../src/AccountSwitcherGroup.tsx | 10 +- .../src/AccountSwitcherItem.tsx | 10 +- .../src/AccountSwitcherItemRadio.tsx | 10 +- .../src/AccountSwitcherSeparator.tsx | 10 +- .../src/useAccountSwitcher.ts | 2 +- .../AccountSwitcher.customization.stories.tsx | 36 +- .../stories/AccountSwitcher.stories.tsx | 4 +- .../__tests__/customization.spec.tsx | 36 +- .../alert-dialog/__tests__/index.spec.tsx | 24 +- .../components/alert-dialog/build.js | 2 +- .../alert-dialog/src/AlertDialogBody.tsx | 10 +- .../alert-dialog/src/AlertDialogContent.tsx | 10 +- .../alert-dialog/src/AlertDialogFooter.tsx | 14 +- .../alert-dialog/src/AlertDialogHeader.tsx | 12 +- .../components/alert-dialog/src/index.tsx | 34 +- .../alert-dialog/stories/index.stories.tsx | 64 +- .../components/alert/__tests__/index.spec.tsx | 58 +- packages/paste-core/components/alert/build.js | 2 +- .../paste-core/components/alert/src/index.tsx | 26 +- .../alert/stories/index.stories.tsx | 16 +- .../anchor/__tests__/anchor.test.tsx | 44 +- .../paste-core/components/anchor/build.js | 2 +- .../components/anchor/src/Anchor.tsx | 20 +- .../components/anchor/src/DefaultAnchor.tsx | 6 +- .../components/anchor/src/InverseAnchor.tsx | 6 +- .../components/anchor/src/index.tsx | 4 +- .../paste-core/components/anchor/src/types.ts | 6 +- .../anchor/stories/index.stories.tsx | 20 +- .../avatar/__tests__/avatar.test.tsx | 25 +- .../paste-core/components/avatar/build.js | 2 +- .../components/avatar/src/Avatar.tsx | 27 +- .../components/avatar/src/AvatarGroup.tsx | 12 +- .../components/avatar/src/index.tsx | 2 +- .../paste-core/components/avatar/src/types.ts | 8 +- .../paste-core/components/avatar/src/utils.ts | 6 +- .../avatar/stories/index.stories.tsx | 24 +- .../badge/__tests__/customization.spec.tsx | 14 +- .../components/badge/__tests__/index.spec.tsx | 94 +- packages/paste-core/components/badge/build.js | 2 +- .../paste-core/components/badge/src/Badge.tsx | 22 +- .../paste-core/components/badge/src/hooks.tsx | 2 +- .../paste-core/components/badge/src/styles.ts | 12 +- .../paste-core/components/badge/src/types.ts | 6 +- .../badge/stories/customization.stories.tsx | 72 +- .../badge/stories/index.stories.tsx | 20 +- .../__tests__/base-radio-checkbox.test.tsx | 42 +- .../components/base-radio-checkbox/build.js | 2 +- .../src/BaseRadioCheckbox.tsx | 36 +- .../breadcrumb/__tests__/breadcrumb.spec.tsx | 52 +- .../paste-core/components/breadcrumb/build.js | 2 +- .../components/breadcrumb/src/index.tsx | 30 +- .../breadcrumb/stories/index.stories.tsx | 50 +- .../button-group/__tests__/index.spec.tsx | 20 +- .../components/button-group/build.js | 2 +- .../button-group/src/ButtonGroup.tsx | 14 +- .../button-group/stories/index.stories.tsx | 18 +- .../button/__tests__/button.test.tsx | 158 +- .../button/__tests__/customization.test.tsx | 34 +- .../paste-core/components/button/build.js | 2 +- .../components/button/src/Button.tsx | 52 +- .../button/src/DestructiveButton.tsx | 14 +- .../button/src/DestructiveIconButton.tsx | 14 +- .../button/src/DestructiveLinkButton.tsx | 30 +- .../button/src/DestructiveSecondaryButton.tsx | 14 +- .../components/button/src/InverseButton.tsx | 14 +- .../button/src/InverseLinkButton.tsx | 20 +- .../components/button/src/LinkButton.tsx | 18 +- .../components/button/src/PrimaryButton.tsx | 14 +- .../button/src/PrimaryIconButton.tsx | 14 +- .../components/button/src/ResetButton.tsx | 18 +- .../components/button/src/SecondaryButton.tsx | 14 +- .../button/src/SecondaryIconButton.tsx | 14 +- .../components/button/src/index.tsx | 4 +- .../components/button/src/styles.ts | 16 +- .../paste-core/components/button/src/types.ts | 4 +- .../button/stories/customization.stories.tsx | 50 +- .../button/stories/index.stories.tsx | 32 +- .../callout/__tests__/customization.spec.tsx | 26 +- .../callout/__tests__/index.spec.tsx | 30 +- .../paste-core/components/callout/build.js | 2 +- .../components/callout/src/Callout.tsx | 20 +- .../components/callout/src/CalloutHeading.tsx | 10 +- .../components/callout/src/CalloutList.tsx | 14 +- .../components/callout/src/CalloutText.tsx | 8 +- .../callout/stories/customization.stories.tsx | 12 +- .../callout/stories/index.stories.tsx | 8 +- .../components/card/__test__/card.test.tsx | 22 +- packages/paste-core/components/card/build.js | 2 +- .../paste-core/components/card/src/index.tsx | 25 +- .../components/card/stories/index.stories.tsx | 16 +- .../__tests__/customization.spec.tsx | 18 +- .../chat-composer/__tests__/index.spec.tsx | 14 +- .../components/chat-composer/build.js | 2 +- .../chat-composer/src/AutoLinkPlugin.tsx | 2 +- .../chat-composer/src/ChatComposer.tsx | 22 +- .../chat-composer/src/PlaceholderWrapper.tsx | 8 +- .../components/chat-composer/src/helpers.ts | 2 +- .../components/chat-composer/src/styles.ts | 2 +- .../stories/ConversationsUIKit/helpers.tsx | 18 +- .../ConversationsUIKit/index.stories.tsx | 24 +- .../stories/customization.stories.tsx | 12 +- .../chat-composer/stories/index.stories.tsx | 22 +- .../__tests__/ChatAttachment.spec.tsx | 42 +- .../chat-log/__tests__/ChatBookend.spec.tsx | 22 +- .../chat-log/__tests__/ChatBubble.spec.tsx | 28 +- .../chat-log/__tests__/ChatEvent.spec.tsx | 22 +- .../chat-log/__tests__/ChatLogger.spec.tsx | 6 +- .../chat-log/__tests__/ChatMessage.spec.tsx | 26 +- .../__tests__/ChatMessageMeta.spec.tsx | 44 +- .../chat-log/__tests__/chatLog.spec.tsx | 24 +- .../chat-log/__tests__/useChatLogger.spec.tsx | 18 +- .../paste-core/components/chat-log/build.js | 2 +- .../chat-log/src/ChatAttachment.tsx | 16 +- .../src/ChatAttachmentDescription.tsx | 12 +- .../chat-log/src/ChatAttachmentLink.tsx | 16 +- .../components/chat-log/src/ChatBookend.tsx | 10 +- .../chat-log/src/ChatBookendItem.tsx | 10 +- .../components/chat-log/src/ChatBubble.tsx | 12 +- .../components/chat-log/src/ChatEvent.tsx | 10 +- .../components/chat-log/src/ChatLog.tsx | 8 +- .../components/chat-log/src/ChatLogger.tsx | 22 +- .../components/chat-log/src/ChatMessage.tsx | 12 +- .../chat-log/src/ChatMessageMeta.tsx | 10 +- .../chat-log/src/ChatMessageMetaItem.tsx | 8 +- .../chat-log/src/ComposerAttachmentCard.tsx | 18 +- .../components/chat-log/src/index.tsx | 2 +- .../components/chat-log/src/useChatLogger.ts | 8 +- .../components/ChatAttachment.stories.tsx | 10 +- .../components/ChatBookend.stories.tsx | 4 +- .../stories/components/ChatBubble.stories.tsx | 4 +- .../stories/components/ChatEvent.stories.tsx | 4 +- .../components/ChatMessageMeta.stories.tsx | 6 +- .../components/UseChatLogger.stories.tsx | 30 +- .../stories/customization.stories.tsx | 30 +- .../chat-log/stories/index.stories.tsx | 18 +- .../checkbox/__tests__/checkbox.test.tsx | 152 +- .../__tests__/checkboxdisclaimer.test.tsx | 52 +- .../paste-core/components/checkbox/build.js | 2 +- .../components/checkbox/src/Checkbox.tsx | 30 +- .../checkbox/src/CheckboxContext.tsx | 2 +- .../checkbox/src/CheckboxDisclaimer.tsx | 14 +- .../components/checkbox/src/CheckboxGroup.tsx | 16 +- .../checkbox/stories/checkbox.stories.tsx | 12 +- .../stories/customization.stories.tsx | 54 +- .../__tests__/customization.spec.tsx | 95 +- .../code-block/__tests__/index.spec.tsx | 55 +- .../paste-core/components/code-block/build.js | 2 +- .../components/code-block/src/CodeBlock.tsx | 18 +- .../code-block/src/CodeBlockHeader.tsx | 10 +- .../code-block/src/CodeBlockTab.tsx | 10 +- .../code-block/src/CodeBlockTabList.tsx | 12 +- .../code-block/src/CodeBlockTabPanel.tsx | 8 +- .../code-block/src/CodeBlockTheme.ts | 6 +- .../code-block/src/CodeBlockWrapper.tsx | 12 +- .../components/code-block/src/CopyButton.tsx | 16 +- .../code-block/src/ExternalLinkButton.tsx | 10 +- .../stories/customization.stories.tsx | 19 +- .../code-block/stories/index.stories.tsx | 15 +- .../combobox/__tests__/Combobox.spec.tsx | 160 +- .../combobox/__tests__/GrowingInput.spec.tsx | 10 +- .../__tests__/MultiselectCombobox.spec.tsx | 94 +- .../__tests__/combobox-customization.spec.tsx | 94 +- ...ultiselect-combobox-customization.spec.tsx | 120 +- .../__tests__/virtualization.spec.tsx | 46 +- .../paste-core/components/combobox/build.js | 2 +- .../components/combobox/src/ComboboxItems.tsx | 32 +- .../combobox/src/ListboxPositioner.tsx | 10 +- .../components/combobox/src/helpers.tsx | 12 +- .../components/combobox/src/index.tsx | 2 +- .../combobox/src/multiselect/GrowingInput.tsx | 10 +- .../src/multiselect/MultiselectCombobox.tsx | 64 +- .../src/multiselect/extractPropsFromState.tsx | 6 +- .../combobox/src/singleselect/Combobox.tsx | 62 +- .../singleselect/extractPropsFromState.tsx | 22 +- .../src/styles/ComboboxInputSelect.tsx | 8 +- .../src/styles/ComboboxInputWrapper.tsx | 8 +- .../combobox/src/styles/ComboboxListbox.tsx | 10 +- .../src/styles/ComboboxListboxGroup.tsx | 12 +- .../src/styles/ComboboxListboxOption.tsx | 20 +- .../components/combobox/src/types.ts | 6 +- .../Combobox-customization.stories.tsx | 92 +- .../combobox/stories/Combobox.stories.tsx | 174 +- .../combobox/stories/GrowingInput.stories.tsx | 12 +- ...tiselectCombobox-customization.stories.tsx | 96 +- .../stories/MultiselectCombobox.stories.tsx | 94 +- .../__tests__/customization.spec.tsx | 16 +- .../data-grid/__tests__/index.spec.tsx | 48 +- .../__tests__/reakit-hasFocus.spec.tsx | 4 +- .../paste-core/components/data-grid/build.js | 2 +- .../components/data-grid/src/DataGrid.tsx | 20 +- .../components/data-grid/src/DataGridBody.tsx | 8 +- .../components/data-grid/src/DataGridCell.tsx | 18 +- .../data-grid/src/DataGridContext.tsx | 2 +- .../components/data-grid/src/DataGridFoot.tsx | 8 +- .../components/data-grid/src/DataGridHead.tsx | 8 +- .../data-grid/src/DataGridHeader.tsx | 4 +- .../data-grid/src/DataGridHeaderSort.tsx | 12 +- .../components/data-grid/src/DataGridRow.tsx | 12 +- .../components/data-grid/src/table/Td.tsx | 8 +- .../components/data-grid/src/table/Th.tsx | 8 +- .../components/data-grid/src/table/Tr.tsx | 14 +- .../data-grid/src/utils/cell-management.ts | 2 +- .../data-grid/src/utils/reakit/index.ts | 6 +- .../src/utils/reakit/reakit-ensureFocus.ts | 8 +- .../reakit/reakit-getActiveElement-modded.ts | 4 +- .../src/utils/reakit/reakit-hasFocus.ts | 2 +- .../utils/reakit/reakit-tabbable-modded.ts | 2 +- .../stories/components/ColumnSpanDataGrid.tsx | 8 +- .../components/ComposableCellsDataGrid.tsx | 14 +- .../components/CustomizableDataGrid.tsx | 12 +- .../stories/components/DataGridLayouts.tsx | 24 +- .../stories/components/I18nDataGrid.tsx | 8 +- .../components/KitchenSinkDataGrid.tsx | 22 +- .../stories/components/LoadingDataGrid.tsx | 14 +- .../stories/components/PaginatedDataGrid.tsx | 16 +- .../stories/components/PlainDataGrid.tsx | 20 +- .../components/SelectableRowsDataGrid.tsx | 14 +- .../components/SortableColumnsDataGrid.tsx | 8 +- .../components/StickyHeaderDataGrid.tsx | 14 +- .../stories/customization.stories.tsx | 2 +- .../data-grid/stories/index.stories.tsx | 22 +- .../date-picker/__tests__/index.spec.tsx | 44 +- .../components/date-picker/build.js | 2 +- .../components/date-picker/src/DatePicker.tsx | 8 +- .../components/date-picker/src/utils.ts | 2 +- .../date-picker/stories/index.stories.tsx | 28 +- .../description-list/__tests__/index.spec.tsx | 34 +- .../components/description-list/build.js | 2 +- .../description-list/src/DescriptionList.tsx | 10 +- .../src/DescriptionListDetails.tsx | 10 +- .../src/DescriptionListSet.tsx | 14 +- .../src/DescriptionListTerm.tsx | 10 +- .../stories/index.stories.tsx | 22 +- .../detail-text/__tests__/index.spec.tsx | 12 +- .../components/detail-text/build.js | 2 +- .../components/detail-text/src/index.tsx | 8 +- .../detail-text/stories/index.stories.tsx | 10 +- .../disclosure/__tests__/disclosure.test.tsx | 36 +- .../paste-core/components/disclosure/build.js | 2 +- .../components/disclosure/src/Disclosure.tsx | 22 +- .../disclosure/src/DisclosureContent.tsx | 22 +- .../disclosure/src/DisclosureContext.tsx | 6 +- .../disclosure/src/DisclosureHeading.tsx | 32 +- .../components/disclosure/src/types.ts | 7 +- .../disclosure/stories/index.stories.tsx | 41 +- .../display-heading/__tests__/index.spec.tsx | 44 +- .../components/display-heading/build.js | 2 +- .../components/display-heading/src/index.tsx | 14 +- .../display-heading/stories/index.stories.tsx | 8 +- .../__tests__/index.spec.tsx | 24 +- .../components/display-pill-group/build.js | 2 +- .../display-pill-group/src/DisplayPill.tsx | 12 +- .../src/DisplayPillGroup.tsx | 8 +- .../stories/customization.stories.tsx | 14 +- .../stories/index.stories.tsx | 10 +- .../components/editable-code-block/build.js | 2 +- .../src/EditableCodeBlock.tsx | 18 +- .../src/EditableCodeBlockHeader.tsx | 8 +- .../src/EditableCodeBlockWrapper.tsx | 12 +- .../stories/index.stories.tsx | 10 +- .../file-picker/__tests__/index.spec.tsx | 34 +- .../components/file-picker/build.js | 2 +- .../components/file-picker/src/FilePicker.tsx | 22 +- .../file-picker/src/FilePickerButton.tsx | 12 +- .../file-picker/stories/index.stories.tsx | 28 +- .../__tests__/customization.spec.tsx | 50 +- .../file-uploader/__tests__/index.spec.tsx | 30 +- .../components/file-uploader/build.js | 2 +- .../file-uploader/src/FileUploader.tsx | 14 +- .../src/FileUploaderDropzone.tsx | 20 +- .../src/FileUploaderDropzoneText.tsx | 12 +- .../src/FileUploaderErrorText.tsx | 14 +- .../src/FileUploaderHelpText.tsx | 14 +- .../file-uploader/src/FileUploaderItem.tsx | 24 +- .../src/FileUploaderItemDescription.tsx | 16 +- .../src/FileUploaderItemTitle.tsx | 8 +- .../src/FileUploaderItemsList.tsx | 8 +- .../file-uploader/src/FileUploaderLabel.tsx | 12 +- .../file-uploader/stories/index.stories.tsx | 50 +- .../form-pill-group/__tests__/index.spec.tsx | 42 +- .../components/form-pill-group/build.js | 2 +- .../form-pill-group/src/FormPill.styles.ts | 4 +- .../form-pill-group/src/FormPill.tsx | 22 +- .../form-pill-group/src/FormPillButton.tsx | 18 +- .../form-pill-group/src/FormPillGroup.tsx | 23 +- .../form-pill-group/src/PillCloseIcon.tsx | 8 +- .../components/form-pill-group/src/types.ts | 2 +- .../form-pill-group/src/useFormPillState.tsx | 6 +- .../stories/customization.stories.tsx | 10 +- .../form-pill-group/stories/index.stories.tsx | 12 +- .../components/form/__tests__/index.spec.tsx | 58 +- packages/paste-core/components/form/build.js | 2 +- .../paste-core/components/form/src/Form.tsx | 8 +- .../components/form/src/FormActions.tsx | 8 +- .../components/form/src/FormControl.tsx | 8 +- .../form/src/FormControlTwoColumn.tsx | 8 +- .../components/form/src/FormSection.tsx | 18 +- .../form/src/FormSectionDescription.tsx | 12 +- .../form/src/FormSectionHeading.tsx | 12 +- .../components/form/stories/index.stories.tsx | 96 +- .../heading/__tests__/heading.test.tsx | 56 +- .../paste-core/components/heading/build.js | 2 +- .../components/heading/src/index.tsx | 14 +- .../components/heading/src/types.ts | 4 +- .../heading/stories/index.stories.tsx | 14 +- .../help-text/__tests__/helptext.test.tsx | 20 +- .../paste-core/components/help-text/build.js | 2 +- .../components/help-text/src/HelpText.tsx | 22 +- .../help-text/stories/input.stories.tsx | 30 +- .../__tests__/index.spec.tsx | 54 +- .../components/in-page-navigation/build.js | 2 +- .../src/InPageNavigation.tsx | 16 +- .../src/InPageNavigationContext.tsx | 4 +- .../src/InPageNavigationItem.tsx | 18 +- .../stories/index.stories.tsx | 20 +- .../inline-code/__tests__/index.spec.tsx | 24 +- .../components/inline-code/build.js | 2 +- .../components/inline-code/src/index.tsx | 10 +- .../inline-code/stories/index.stories.tsx | 18 +- .../__tests__/inlineControlGroup.test.tsx | 72 +- .../components/inline-control-group/build.js | 2 +- .../src/InlineControlGroup.tsx | 14 +- .../stories/inline-control-group.stories.tsx | 38 +- .../input-box/__tests__/input-box.test.tsx | 18 +- .../__tests__/input-chevron-wrapper.test.tsx | 18 +- .../input-box/__tests__/prefix.test.tsx | 18 +- .../input-box/__tests__/suffix.test.tsx | 18 +- .../paste-core/components/input-box/build.js | 2 +- .../src/FauxInput/DefaultFauxInput.tsx | 12 +- .../src/FauxInput/InverseFauxInput.tsx | 12 +- .../input-box/src/FauxInput/index.tsx | 12 +- .../components/input-box/src/InputBox.tsx | 20 +- .../input-box/src/InputBoxContext.tsx | 2 +- .../input-box/src/InputChevronWrapper.tsx | 24 +- .../components/input-box/src/Prefix.tsx | 14 +- .../components/input-box/src/Suffix.tsx | 14 +- .../components/input-box/src/index.tsx | 2 +- .../components/input-box/src/types.ts | 2 +- .../input-box/stories/inputbox.stories.tsx | 12 +- .../components/input/__tests__/input.test.tsx | 100 +- packages/paste-core/components/input/build.js | 2 +- .../components/input/src/DecrementButton.tsx | 12 +- .../components/input/src/IncrementButton.tsx | 12 +- .../paste-core/components/input/src/Input.tsx | 38 +- .../paste-core/components/input/src/utils.ts | 2 +- .../input/stories/input.stories.tsx | 40 +- .../components/label/__tests__/label.test.tsx | 12 +- packages/paste-core/components/label/build.js | 2 +- .../paste-core/components/label/src/Label.tsx | 18 +- .../components/label/src/RequiredDot.tsx | 6 +- .../label/stories/label.stories.tsx | 32 +- .../components/list/__tests__/index.spec.tsx | 42 +- packages/paste-core/components/list/build.js | 2 +- .../paste-core/components/list/src/List.tsx | 10 +- .../components/list/src/ListItem.tsx | 44 +- .../components/list/src/OrderedList.tsx | 12 +- .../components/list/src/UnorderedList.tsx | 12 +- .../paste-core/components/list/src/types.ts | 6 +- .../components/list/stories/index.stories.tsx | 18 +- .../menu/__tests__/customization.spec.tsx | 92 +- .../components/menu/__tests__/index.spec.tsx | 22 +- .../menu-badge-customization.spec.tsx | 10 +- packages/paste-core/components/menu/build.js | 2 +- .../paste-core/components/menu/src/Menu.tsx | 16 +- .../components/menu/src/MenuBadge.tsx | 28 +- .../components/menu/src/MenuButton.tsx | 26 +- .../components/menu/src/MenuGroup.tsx | 18 +- .../components/menu/src/MenuItem.styles.tsx | 18 +- .../components/menu/src/MenuItem.tsx | 16 +- .../components/menu/src/MenuItemCheckbox.tsx | 16 +- .../components/menu/src/MenuItemRadio.tsx | 16 +- .../components/menu/src/MenuSeparator.tsx | 14 +- .../components/menu/src/SubMenuButton.tsx | 20 +- .../paste-core/components/menu/src/types.ts | 10 +- .../components/menu/src/useMenuState.ts | 4 +- .../menu/stories/customization.stories.tsx | 48 +- .../components/menu/stories/index.stories.tsx | 24 +- .../menu-badge-customization.stories.tsx | 40 +- .../menu/stories/menu-badge.stories.tsx | 14 +- .../stories/menu-checkable-items.stories.tsx | 28 +- .../components/meter/__tests__/index.spec.tsx | 14 +- packages/paste-core/components/meter/build.js | 2 +- .../paste-core/components/meter/src/Meter.tsx | 20 +- .../components/meter/src/MeterLabel.tsx | 16 +- .../meter/stories/index.stories.tsx | 48 +- .../__tests__/customization.spec.tsx | 48 +- .../__tests__/index.spec.tsx | 26 +- .../components/minimizable-dialog/build.js | 2 +- .../src/MinimizableDialog.tsx | 26 +- .../src/MinimizableDialogButton.tsx | 14 +- .../src/MinimizableDialogContainer.tsx | 12 +- .../src/MinimizableDialogContent.tsx | 16 +- .../src/MinimizableDialogContext.tsx | 4 +- .../src/MinimizableDialogHeader.tsx | 26 +- .../src/StyledMinimizableDialog.tsx | 4 +- .../stories/customization.stories.tsx | 10 +- .../stories/index.stories.tsx | 34 +- .../modal/__tests__/customization.spec.tsx | 34 +- .../components/modal/__tests__/index.spec.tsx | 44 +- packages/paste-core/components/modal/build.js | 2 +- .../paste-core/components/modal/src/Modal.tsx | 46 +- .../components/modal/src/ModalBody.tsx | 12 +- .../components/modal/src/ModalFooter.tsx | 12 +- .../modal/src/ModalFooterActions.tsx | 10 +- .../components/modal/src/ModalHeader.tsx | 24 +- .../components/modal/src/ModalHeading.tsx | 12 +- .../components/modal/src/styles.tsx | 2 +- .../modal/stories/customization.stories.tsx | 42 +- .../modal/stories/index.stories.tsx | 74 +- .../__tests__/customization.spec.tsx | 40 +- .../pagination/__tests__/index.spec.tsx | 52 +- .../paste-core/components/pagination/build.js | 2 +- .../components/pagination/src/Pagination.tsx | 10 +- .../PaginationArrow/PaginationArrowButton.tsx | 12 +- .../PaginationArrowIconWrapper.tsx | 6 +- .../PaginationArrow/PaginationBackArrow.tsx | 18 +- .../PaginationForwardArrow.tsx | 18 +- .../pagination/src/PaginationArrow/index.tsx | 16 +- .../pagination/src/PaginationEllipsis.tsx | 10 +- .../pagination/src/PaginationItems.tsx | 16 +- .../pagination/src/PaginationLabel.tsx | 10 +- .../pagination/src/PaginationNumber.tsx | 18 +- .../pagination/src/PaginationNumbers.tsx | 18 +- .../components/pagination/src/index.tsx | 14 +- .../components/pagination/src/styles.ts | 2 +- .../components/pagination/src/types.ts | 4 +- .../components/pagination/src/utils.ts | 6 +- .../stories/customization.stories.tsx | 34 +- .../pagination/stories/index.stories.tsx | 14 +- .../paragraph/__tests__/paragraph.test.tsx | 18 +- .../paste-core/components/paragraph/build.js | 2 +- .../components/paragraph/src/index.tsx | 12 +- .../paragraph/stories/index.stories.tsx | 12 +- .../popover/__tests__/index.spec.tsx | 58 +- .../paste-core/components/popover/build.js | 2 +- .../components/popover/src/Popover.tsx | 30 +- .../components/popover/src/PopoverArrow.tsx | 8 +- .../popover/src/PopoverBadgeButton.tsx | 18 +- .../components/popover/src/PopoverButton.tsx | 14 +- .../popover/src/PopoverContainer.tsx | 10 +- .../components/popover/src/PopoverContext.tsx | 4 +- .../components/popover/src/index.tsx | 2 +- .../components/popover/src/types.ts | 6 +- .../popover/stories/index.stories.tsx | 34 +- .../__tests__/ProductSwitcher.spec.tsx | 36 +- .../components/product-switcher/build.js | 2 +- .../product-switcher/src/ProductSwitcher.tsx | 10 +- .../src/ProductSwitcherButton.tsx | 14 +- .../src/ProductSwitcherItem.tsx | 14 +- .../src/useProductSwitcher.ts | 2 +- .../ProductSwitcher.customization.stories.tsx | 30 +- .../stories/ProductSwitcher.stories.tsx | 14 +- .../progress-bar/__tests__/index.spec.tsx | 20 +- .../components/progress-bar/build.js | 2 +- .../progress-bar/src/ProgressBar.tsx | 18 +- .../progress-bar/src/ProgressBarLabel.tsx | 12 +- .../stories/customization.stories.tsx | 18 +- .../progress-bar/stories/index.stories.tsx | 16 +- .../progress-steps/__tests__/index.spec.tsx | 38 +- .../components/progress-steps/build.js | 2 +- .../src/ProgressStepComplete.tsx | 14 +- .../src/ProgressStepCurrent.tsx | 14 +- .../progress-steps/src/ProgressStepError.tsx | 14 +- .../src/ProgressStepIncomplete.tsx | 16 +- .../src/ProgressStepSeparator.tsx | 12 +- .../progress-steps/src/ProgressSteps.tsx | 14 +- .../src/ProgressStepsContext.tsx | 2 +- .../src/icons/ProgressCurrentIcon.tsx | 12 +- .../src/icons/ProgressErrorIcon.tsx | 12 +- .../src/icons/ProgressIncompleteIcon.tsx | 12 +- .../components/progress-steps/src/types.ts | 4 +- .../stories/customization.stories.tsx | 10 +- .../__tests__/index.spec.tsx | 72 +- .../components/radio-button-group/build.js | 2 +- .../radio-button-group/src/HiddenRadio.tsx | 4 +- .../radio-button-group/src/RadioButton.tsx | 28 +- .../src/RadioButtonContext.tsx | 2 +- .../src/RadioButtonGroup.tsx | 20 +- .../src/StyledRadioButtonGroupWrapper.tsx | 6 +- .../src/StyledRadioButtonLabel.tsx | 6 +- .../stories/index.stories.tsx | 18 +- .../radio-group/__tests__/radio.test.tsx | 144 +- .../components/radio-group/build.js | 2 +- .../components/radio-group/src/Radio.tsx | 20 +- .../radio-group/src/RadioContext.tsx | 2 +- .../components/radio-group/src/RadioGroup.tsx | 14 +- .../stories/customization.stories.tsx | 50 +- .../stories/radio-controlled.stories.tsx | 12 +- .../stories/radio-uncontrolled.stories.tsx | 14 +- .../stories/radiogroup-controlled.stories.tsx | 18 +- .../radiogroup-uncontrolled.stories.tsx | 14 +- .../stories/radiogroup-vrt.stories.tsx | 10 +- .../components/screen-reader-only/build.js | 2 +- .../screen-reader-only/src/index.tsx | 10 +- .../stories/index.stories.tsx | 4 +- .../select/__tests__/option.test.tsx | 28 +- .../select/__tests__/optiongroup.test.tsx | 22 +- .../select/__tests__/select.test.tsx | 72 +- .../paste-core/components/select/build.js | 2 +- .../components/select/src/Option.tsx | 10 +- .../components/select/src/OptionGroup.tsx | 12 +- .../components/select/src/Select.tsx | 20 +- .../paste-core/components/select/src/types.ts | 2 +- .../select/stories/select.stories.tsx | 46 +- .../components/select/test-utils/index.ts | 4 +- .../separator/__tests__/index.spec.tsx | 30 +- .../paste-core/components/separator/build.js | 2 +- .../components/separator/src/index.tsx | 14 +- .../separator/stories/index.stories.tsx | 22 +- .../__tests__/customization.spec.tsx | 42 +- .../side-modal/__tests__/index.spec.tsx | 26 +- .../paste-core/components/side-modal/build.js | 2 +- .../components/side-modal/src/SideModal.tsx | 22 +- .../side-modal/src/SideModalBody.tsx | 12 +- .../side-modal/src/SideModalButton.tsx | 14 +- .../side-modal/src/SideModalContainer.tsx | 10 +- .../side-modal/src/SideModalContext.tsx | 4 +- .../side-modal/src/SideModalFooter.tsx | 12 +- .../side-modal/src/SideModalFooterActions.tsx | 12 +- .../side-modal/src/SideModalHeader.tsx | 22 +- .../side-modal/src/SideModalHeading.tsx | 12 +- .../components/side-modal/src/index.tsx | 2 +- .../stories/customization.stories.tsx | 12 +- .../side-modal/stories/index.stories.tsx | 20 +- .../sidebar/__tests__/index.spec.tsx | 36 +- .../__tests__/sidebarNavigation.spec.tsx | 62 +- .../sidebar/__tests__/skipLinks.spec.tsx | 34 +- .../paste-core/components/sidebar/build.js | 2 +- .../components/sidebar/src/Sidebar.tsx | 26 +- .../sidebar/src/SidebarBetaBadge.tsx | 16 +- .../components/sidebar/src/SidebarBody.tsx | 10 +- .../components/sidebar/src/SidebarContext.tsx | 2 +- .../sidebar/src/SidebarSkipLinks.tsx | 8 +- .../SidebarOverlayContentWrapper.tsx | 16 +- .../SidebarPushContentWrapper.tsx | 20 +- .../src/footer/SidebarCollapseButton.tsx | 20 +- .../sidebar/src/footer/SidebarFooter.tsx | 8 +- .../sidebar/src/header/SidebarHeader.tsx | 10 +- .../src/header/SidebarHeaderIconButton.tsx | 10 +- .../sidebar/src/header/SidebarHeaderLabel.tsx | 14 +- .../src/navigation/SidebarNavigation.tsx | 24 +- .../SidebarNavigationDisclosure.tsx | 30 +- .../SidebarNavigationDisclosureContent.tsx | 18 +- .../SidebarNavigationDisclosureContext.tsx | 4 +- .../SidebarNavigationDisclosureHeading.tsx | 28 +- ...ebarNavigationDisclosureHeadingWrapper.tsx | 6 +- .../src/navigation/SidebarNavigationItem.tsx | 30 +- .../navigation/SidebarNavigationSeparator.tsx | 16 +- .../sidebar/src/navigation/styles.tsx | 2 +- .../sidebar/src/navigation/types.ts | 5 +- .../sidebar/stories/BetaBadge.stories.tsx | 4 +- .../sidebar/stories/SidebarHeader.stories.tsx | 8 +- .../sidebar/stories/customization.stories.tsx | 18 +- .../components/AccountMenu.tsx | 4 +- .../components/AppSwitcher.tsx | 8 +- .../components/BillingMenu.tsx | 4 +- .../full-composition/components/Console.tsx | 40 +- .../components/DebuggerAction.tsx | 4 +- .../full-composition/components/Flex.tsx | 34 +- .../components/NotificationsDialog.tsx | 4 +- .../full-composition/components/SearchBox.tsx | 4 +- .../full-composition/components/Segment.tsx | 40 +- .../components/StatusMenu.tsx | 4 +- .../components/SupportMenu.tsx | 4 +- .../components/TrialBadge.tsx | 4 +- .../components/UpgradeBadge.tsx | 2 +- .../components/UserDialogConsole.tsx | 14 +- .../components/UserDialogFlex.tsx | 12 +- .../components/UserDialogSegment.tsx | 10 +- .../full-composition/console.stories.tsx | 4 +- .../stories/full-composition/docs.stories.tsx | 32 +- .../stories/full-composition/flex.stories.tsx | 4 +- .../full-composition/segment.stories.tsx | 4 +- .../sidebar/stories/navigation.stories.tsx | 44 +- .../sidebar/stories/overlay.stories.tsx | 10 +- .../sidebar/stories/push.stories.tsx | 10 +- .../skeleton-loader/__tests__/index.spec.tsx | 14 +- .../components/skeleton-loader/build.js | 2 +- .../components/skeleton-loader/src/index.tsx | 18 +- .../skeleton-loader/src/keyframes.tsx | 2 +- .../skeleton-loader/stories/index.stories.tsx | 36 +- .../slider/__tests__/index.spec.tsx | 24 +- .../paste-core/components/slider/build.js | 2 +- .../components/slider/src/Slider.tsx | 18 +- .../components/slider/src/SliderThumb.tsx | 8 +- .../components/slider/src/SliderTrack.tsx | 6 +- .../components/slider/src/helpers.ts | 4 +- .../slider/stories/index.stories.tsx | 34 +- .../spinner/__tests__/index.test.tsx | 18 +- .../paste-core/components/spinner/build.js | 2 +- .../components/spinner/src/index.tsx | 22 +- .../components/spinner/src/keyframes.tsx | 4 +- .../components/spinner/src/styled.tsx | 8 +- .../spinner/stories/index.stories.tsx | 18 +- .../StatusBadgeCustomization.spec.tsx | 14 +- .../StatusMenuCustomization.spec.tsx | 10 +- .../paste-core/components/status/build.js | 2 +- .../components/status/src/StatusBadge.tsx | 18 +- .../components/status/src/StatusMenu.tsx | 6 +- .../components/status/src/StatusMenuBadge.tsx | 14 +- .../components/status/src/StatusMenuItem.tsx | 6 +- .../status/src/StatusMenuItemCheckbox.tsx | 6 +- .../status/src/StatusMenuItemChild.tsx | 16 +- .../status/src/StatusMenuItemRadio.tsx | 6 +- .../components/status/src/constants.tsx | 26 +- .../components/status/src/index.tsx | 2 +- .../paste-core/components/status/src/types.ts | 4 +- .../status/stories/StatusBadge.stories.tsx | 6 +- .../StatusBadgeCustomization.stories.tsx | 72 +- .../status/stories/StatusMenu.stories.tsx | 22 +- .../StatusMenuCustomization.stories.tsx | 30 +- .../switch/__tests__/index.spec.tsx | 138 +- .../paste-core/components/switch/build.js | 2 +- .../components/switch/src/Switch.tsx | 34 +- .../components/switch/src/SwitchContext.tsx | 2 +- .../components/switch/src/SwitchGroup.tsx | 14 +- .../components/switch/src/SwitchKnob.tsx | 18 +- .../switch/stories/index.stories.tsx | 10 +- .../components/table/__tests__/index.spec.tsx | 88 +- packages/paste-core/components/table/build.js | 2 +- .../paste-core/components/table/src/TBody.tsx | 32 +- .../paste-core/components/table/src/TFoot.tsx | 14 +- .../paste-core/components/table/src/THead.tsx | 20 +- .../paste-core/components/table/src/Table.tsx | 12 +- .../components/table/src/TableContext.tsx | 4 +- .../paste-core/components/table/src/Td.tsx | 8 +- .../paste-core/components/table/src/Th.tsx | 10 +- .../paste-core/components/table/src/Tr.tsx | 18 +- .../paste-core/components/table/src/index.tsx | 16 +- .../paste-core/components/table/src/types.ts | 6 +- .../table/stories/index.stories.tsx | 50 +- .../components/tabs/__tests__/tabs.test.tsx | 36 +- packages/paste-core/components/tabs/build.js | 2 +- .../paste-core/components/tabs/src/Tab.tsx | 20 +- .../components/tabs/src/TabList.tsx | 25 +- .../components/tabs/src/TabPanel.tsx | 16 +- .../components/tabs/src/TabPanels.tsx | 14 +- .../paste-core/components/tabs/src/Tabs.tsx | 32 +- .../components/tabs/src/TabsContext.tsx | 6 +- .../paste-core/components/tabs/src/utils.ts | 2 +- .../components/tabs/stories/index.stories.tsx | 32 +- .../textarea/__tests__/textarea.test.tsx | 58 +- .../paste-core/components/textarea/build.js | 2 +- .../components/textarea/src/TextArea.tsx | 18 +- .../textarea/stories/textarea.stories.tsx | 32 +- .../time-picker/__tests__/index.spec.tsx | 46 +- .../components/time-picker/build.js | 2 +- .../components/time-picker/src/TimePicker.tsx | 10 +- .../components/time-picker/src/utils.ts | 4 +- .../time-picker/stories/index.stories.tsx | 26 +- .../toast/__tests__/customization.spec.tsx | 24 +- .../components/toast/__tests__/index.spec.tsx | 32 +- .../toast/__tests__/toaster.spec.tsx | 40 +- .../toast/__tests__/useToaster.spec.tsx | 22 +- packages/paste-core/components/toast/build.js | 2 +- .../components/toast/src/ErrorToast.tsx | 8 +- .../components/toast/src/NeutralToast.tsx | 8 +- .../components/toast/src/SuccessToast.tsx | 8 +- .../paste-core/components/toast/src/Toast.tsx | 36 +- .../components/toast/src/ToastContainer.tsx | 10 +- .../components/toast/src/ToastPortal.tsx | 12 +- .../components/toast/src/Toaster.tsx | 26 +- .../components/toast/src/WarningToast.tsx | 8 +- .../paste-core/components/toast/src/types.ts | 8 +- .../components/toast/src/useToaster.ts | 10 +- .../toast/stories/customization.stories.tsx | 44 +- .../toast/stories/index.stories.tsx | 34 +- .../tooltip/__test__/index.spec.tsx | 24 +- .../paste-core/components/tooltip/build.js | 2 +- .../components/tooltip/src/TooltipArrow.tsx | 8 +- .../components/tooltip/src/index.tsx | 32 +- .../tooltip/stories/index.stories.tsx | 28 +- .../topbar/__tests__/index.spec.tsx | 8 +- .../paste-core/components/topbar/build.js | 2 +- .../components/topbar/src/Topbar.tsx | 10 +- .../components/topbar/src/TopbarActions.tsx | 12 +- .../topbar/stories/customization.stories.tsx | 6 +- .../topbar/stories/topbar.stories.tsx | 14 +- .../paste-core/components/truncate/build.js | 2 +- .../components/truncate/src/index.tsx | 10 +- .../truncate/stories/index.stories.tsx | 8 +- .../user-dialog/__tests__/index.spec.tsx | 4 +- .../components/user-dialog/build.js | 2 +- .../components/user-dialog/src/UserDialog.tsx | 30 +- .../user-dialog/src/UserDialogContainer.tsx | 12 +- .../user-dialog/src/UserDialogList.tsx | 16 +- .../user-dialog/src/UserDialogListItem.tsx | 14 +- .../user-dialog/src/UserDialogSeparator.tsx | 6 +- .../user-dialog/src/UserDialogUserEmail.tsx | 8 +- .../user-dialog/src/UserDialogUserInfo.tsx | 18 +- .../user-dialog/src/UserDialogUserName.tsx | 8 +- .../components/user-dialog/src/types.ts | 10 +- .../user-dialog/stories/index.stories.tsx | 64 +- .../visual-picker/__tests__/checkbox.spec.tsx | 86 +- .../visual-picker/__tests__/radio.spec.tsx | 84 +- .../components/visual-picker/build.js | 2 +- .../src/VisualPickerCheckbox.tsx | 29 +- .../src/VisualPickerCheckboxGroup.tsx | 10 +- .../visual-picker/src/VisualPickerRadio.tsx | 30 +- .../src/VisualPickerRadioGroup.tsx | 12 +- .../components/visual-picker/src/types.ts | 8 +- .../stories/checkbox.stories.tsx | 18 +- .../stories/customization.stories.tsx | 80 +- .../visual-picker/stories/radio.stories.tsx | 20 +- .../paste-core/core-bundle/tools/constants.ts | 4 +- .../paste-core/core-bundle/tools/generate.ts | 2 +- .../paste-core/core-bundle/tools/minify.ts | 8 +- .../paste-core/core-bundle/tools/utils.ts | 8 +- .../__tests__/aspectRatio.spec.tsx | 20 +- .../paste-core/layout/aspect-ratio/build.js | 2 +- .../layout/aspect-ratio/src/AspectRatio.tsx | 10 +- .../layout/aspect-ratio/src/index.tsx | 4 +- .../aspect-ratio/stories/index.stories.tsx | 4 +- .../layout/flex/__tests__/flex.test.tsx | 38 +- packages/paste-core/layout/flex/build.js | 2 +- packages/paste-core/layout/flex/src/Flex.tsx | 28 +- .../paste-core/layout/flex/src/helpers.tsx | 14 +- packages/paste-core/layout/flex/src/index.tsx | 4 +- packages/paste-core/layout/flex/src/types.tsx | 6 +- .../layout/flex/stories/index.stories.tsx | 22 +- .../layout/grid/__tests__/grid.test.tsx | 60 +- packages/paste-core/layout/grid/build.js | 2 +- .../paste-core/layout/grid/src/Column.tsx | 25 +- packages/paste-core/layout/grid/src/Grid.tsx | 22 +- packages/paste-core/layout/grid/src/index.tsx | 6 +- packages/paste-core/layout/grid/src/types.ts | 8 +- packages/paste-core/layout/grid/src/utils.tsx | 20 +- .../layout/grid/stories/index.stories.tsx | 30 +- .../media-object/__tests__/index.spec.tsx | 42 +- .../paste-core/layout/media-object/build.js | 2 +- .../layout/media-object/src/MediaBody.tsx | 12 +- .../layout/media-object/src/MediaFigure.tsx | 14 +- .../layout/media-object/src/MediaObject.tsx | 14 +- .../layout/media-object/src/index.tsx | 12 +- .../media-object/stories/index.stories.tsx | 22 +- .../layout/stack/__tests__/stack.test.tsx | 44 +- packages/paste-core/layout/stack/build.js | 2 +- .../paste-core/layout/stack/src/Stack.tsx | 24 +- .../paste-core/layout/stack/src/index.tsx | 4 +- .../layout/stack/stories/index.stories.tsx | 24 +- .../box/__tests__/SafelySpreadProps.test.ts | 2 +- .../box/__tests__/StyleFunctions.test.tsx | 6 +- .../primitives/box/__tests__/box.test.tsx | 210 +- packages/paste-core/primitives/box/build.js | 2 +- .../primitives/box/src/SafelySpreadProps.ts | 4 +- .../primitives/box/src/StyleFunctions.ts | 18 +- .../paste-core/primitives/box/src/index.tsx | 20 +- .../paste-core/primitives/box/src/types.ts | 6 +- .../primitives/box/stories/index.stories.tsx | 26 +- .../useMultiSelectPrimitive.test.tsx | 343 +- .../paste-core/primitives/combobox/build.js | 2 +- .../primitives/combobox/src/index.tsx | 2 +- .../combobox/stories/index.stories.tsx | 52 +- .../paste-core/primitives/disclosure/build.js | 2 +- .../disclosure/stories/index.stories.tsx | 12 +- .../listbox/__tests__/index.spec.tsx | 10 +- .../paste-core/primitives/listbox/build.js | 2 +- .../listbox/src/ListboxPrimitive.tsx | 10 +- .../listbox/src/ListboxPrimitiveItem.tsx | 10 +- .../primitives/listbox/src/index.tsx | 4 +- .../listbox/src/useListboxPrimitiveState.tsx | 4 +- .../listbox/stories/index.stories.tsx | 34 +- .../primitives/menu/__tests__/index.spec.tsx | 20 +- packages/paste-core/primitives/menu/build.js | 2 +- .../primitives/menu/stories/index.stories.tsx | 4 +- .../primitives/modal-dialog/build.js | 2 +- .../primitives/modal-dialog/src/index.tsx | 2 +- .../modal-dialog/stories/index.stories.tsx | 12 +- .../primitives/non-modal-dialog/build.js | 2 +- .../stories/index.stories.tsx | 14 +- .../sibling-box/__tests__/siblingBox.test.tsx | 16 +- .../primitives/sibling-box/build.js | 2 +- .../primitives/sibling-box/src/index.tsx | 14 +- packages/paste-core/primitives/tabs/build.js | 2 +- .../primitives/tabs/stories/index.stories.tsx | 22 +- .../text/__tests__/SafelySpreadProps.spec.ts | 2 +- .../text/__tests__/StyleFunctions.spec.tsx | 6 +- .../primitives/text/__tests__/text.spec.tsx | 262 +- packages/paste-core/primitives/text/build.js | 2 +- .../primitives/text/src/SafelySpreadProps.ts | 6 +- .../primitives/text/src/StyleFunctions.ts | 18 +- .../paste-core/primitives/text/src/index.tsx | 24 +- .../paste-core/primitives/text/src/types.ts | 6 +- .../primitives/text/stories/index.stories.tsx | 20 +- .../paste-core/primitives/tooltip/build.js | 2 +- .../tooltip/stories/index.stories.tsx | 16 +- .../__tests__/CustomizationProvider.test.tsx | 30 +- .../__tests__/utils.test.ts | 66 +- packages/paste-customization/build.js | 2 +- .../src/CustomizationConsumer.tsx | 6 +- .../src/CustomizationProvider.tsx | 16 +- .../src/types/CreateCustomTheme.ts | 6 +- .../src/types/CustomTheme.ts | 4 +- .../src/types/CustomizationProvider.ts | 6 +- packages/paste-customization/src/utils.ts | 4 +- .../stories/customization.stories.tsx | 34 +- packages/paste-design-tokens/.babelrc | 4 +- .../formatters/__tests__/common.ts.spec.ts | 4 +- .../formatters/__tests__/d.ts.spec.ts | 4 +- .../formatters/__tests__/es6.spec.ts | 4 +- .../formatters/__tests__/generic.d.ts.spec.ts | 4 +- .../formatters/__tests__/generic.js.spec.ts | 4 +- .../__tests__/sketchpalette.spec.ts | 4 +- .../paste-design-tokens/formatters/common.ts | 14 +- .../paste-design-tokens/formatters/d.ts.ts | 16 +- .../paste-design-tokens/formatters/es6.ts | 14 +- .../formatters/generic.d.ts.ts | 14 +- .../paste-design-tokens/formatters/generic.ts | 20 +- .../formatters/sketchpalette.ts | 6 +- packages/paste-design-tokens/gulpfile.ts | 148 +- .../types/GenericTokensShape.ts | 32 +- .../utils/__tests__/rgbToHex.test.tsx | 2 +- .../formatGroupTokensWithTemplate/index.ts | 10 +- .../formatSingleTokensWithTemplate/index.ts | 6 +- .../utils/getTokenCategories/index.ts | 2 +- .../utils/pluralCategoryMap.ts | 4 +- .../__tests__/no-invalid-module-paths.test.js | 52 +- .../__tests__/svg-needs-viewBox.test.js | 2 +- .../eslint-plugin-paste-internal/src/index.js | 2 +- .../src/rules/no-invalid-module-paths.js | 2 +- packages/paste-icons/__test__/icons.spec.tsx | 46 +- packages/paste-icons/src/AcceptIcon.tsx | 12 +- packages/paste-icons/src/AddListIcon.tsx | 12 +- packages/paste-icons/src/AddSeriesIcon.tsx | 12 +- packages/paste-icons/src/AgentIcon.tsx | 12 +- packages/paste-icons/src/AlignLeftIcon.tsx | 12 +- packages/paste-icons/src/AlignRightIcon.tsx | 12 +- .../src/AlignVerticalCenterIcon.tsx | 12 +- packages/paste-icons/src/ArchiveIcon.tsx | 12 +- packages/paste-icons/src/ArrowBackIcon.tsx | 12 +- packages/paste-icons/src/ArrowDownIcon.tsx | 12 +- packages/paste-icons/src/ArrowForwardIcon.tsx | 12 +- packages/paste-icons/src/ArrowUpIcon.tsx | 12 +- packages/paste-icons/src/AttachIcon.tsx | 12 +- packages/paste-icons/src/AttachmentIcon.tsx | 12 +- .../paste-icons/src/AutomaticUpdatesIcon.tsx | 12 +- packages/paste-icons/src/BoldIcon.tsx | 12 +- packages/paste-icons/src/BuildIcon.tsx | 12 +- packages/paste-icons/src/BuiltInIcon.tsx | 12 +- packages/paste-icons/src/BusinessIcon.tsx | 12 +- packages/paste-icons/src/ButtonIcon.tsx | 12 +- packages/paste-icons/src/CalendarIcon.tsx | 12 +- packages/paste-icons/src/CallActiveIcon.tsx | 12 +- packages/paste-icons/src/CallAddIcon.tsx | 12 +- packages/paste-icons/src/CallFailedIcon.tsx | 12 +- packages/paste-icons/src/CallHoldIcon.tsx | 12 +- packages/paste-icons/src/CallIcon.tsx | 12 +- packages/paste-icons/src/CallIncomingIcon.tsx | 12 +- packages/paste-icons/src/CallOutgoingIcon.tsx | 12 +- packages/paste-icons/src/CallTransferIcon.tsx | 12 +- packages/paste-icons/src/ChatIcon.tsx | 12 +- .../paste-icons/src/CheckboxCheckIcon.tsx | 12 +- packages/paste-icons/src/CheckboxLineIcon.tsx | 12 +- .../paste-icons/src/CheckmarkCircleIcon.tsx | 12 +- .../src/ChevronDisclosureCollapsedIcon.tsx | 12 +- .../src/ChevronDisclosureExpandedIcon.tsx | 12 +- .../paste-icons/src/ChevronDisclosureIcon.tsx | 12 +- .../paste-icons/src/ChevronDoubleLeftIcon.tsx | 12 +- .../src/ChevronDoubleRightIcon.tsx | 12 +- packages/paste-icons/src/ChevronDownIcon.tsx | 12 +- .../paste-icons/src/ChevronExpandIcon.tsx | 12 +- packages/paste-icons/src/ChevronLeftIcon.tsx | 12 +- packages/paste-icons/src/ChevronRightIcon.tsx | 12 +- packages/paste-icons/src/ChevronUpIcon.tsx | 12 +- packages/paste-icons/src/ClearIcon.tsx | 12 +- packages/paste-icons/src/CloseCircleIcon.tsx | 12 +- packages/paste-icons/src/CloseIcon.tsx | 12 +- packages/paste-icons/src/CloudIcon.tsx | 12 +- packages/paste-icons/src/CodeIcon.tsx | 12 +- packages/paste-icons/src/CollapseIcon.tsx | 12 +- packages/paste-icons/src/ColorPickerIcon.tsx | 12 +- packages/paste-icons/src/ColumnIcon.tsx | 12 +- packages/paste-icons/src/CommunityIcon.tsx | 12 +- .../src/ConnectivityAvailableIcon.tsx | 12 +- .../paste-icons/src/ConnectivityBusyIcon.tsx | 12 +- .../src/ConnectivityNeutralIcon.tsx | 12 +- .../src/ConnectivityOfflineIcon.tsx | 12 +- .../src/ConnectivityUnavailableIcon.tsx | 12 +- packages/paste-icons/src/CopyIcon.tsx | 12 +- packages/paste-icons/src/CreditCardIcon.tsx | 12 +- packages/paste-icons/src/CustomIcon.tsx | 12 +- packages/paste-icons/src/DarkModeIcon.tsx | 12 +- packages/paste-icons/src/DataBarChartIcon.tsx | 12 +- .../paste-icons/src/DataLineChartIcon.tsx | 12 +- packages/paste-icons/src/DataPieChartIcon.tsx | 12 +- packages/paste-icons/src/DataTableIcon.tsx | 12 +- packages/paste-icons/src/DatabaseIcon.tsx | 12 +- packages/paste-icons/src/DeleteIcon.tsx | 12 +- packages/paste-icons/src/DeliveredIcon.tsx | 12 +- packages/paste-icons/src/DialpadIcon.tsx | 12 +- packages/paste-icons/src/DirectoryIcon.tsx | 12 +- packages/paste-icons/src/DisableIcon.tsx | 12 +- packages/paste-icons/src/DividerIcon.tsx | 12 +- packages/paste-icons/src/DoNotIcon.tsx | 12 +- .../paste-icons/src/DocumentationIcon.tsx | 12 +- packages/paste-icons/src/DownloadIcon.tsx | 12 +- .../paste-icons/src/DragHorizontalIcon.tsx | 12 +- packages/paste-icons/src/DragIcon.tsx | 12 +- packages/paste-icons/src/DragVerticalIcon.tsx | 12 +- packages/paste-icons/src/EditIcon.tsx | 12 +- .../src/ElasticSIPTrunkingCapableIcon.tsx | 12 +- packages/paste-icons/src/EmailIcon.tsx | 12 +- packages/paste-icons/src/EmojiIcon.tsx | 12 +- packages/paste-icons/src/ErrorIcon.tsx | 12 +- packages/paste-icons/src/ExpandIcon.tsx | 12 +- packages/paste-icons/src/ExportIcon.tsx | 12 +- packages/paste-icons/src/FaxCapableIcon.tsx | 12 +- packages/paste-icons/src/FeedIcon.tsx | 12 +- packages/paste-icons/src/FileAudioIcon.tsx | 12 +- packages/paste-icons/src/FileIcon.tsx | 12 +- packages/paste-icons/src/FileImageIcon.tsx | 12 +- packages/paste-icons/src/FileVideoIcon.tsx | 12 +- packages/paste-icons/src/FileZipIcon.tsx | 12 +- packages/paste-icons/src/FilterIcon.tsx | 12 +- packages/paste-icons/src/FlagIcon.tsx | 12 +- packages/paste-icons/src/GitIcon.tsx | 12 +- packages/paste-icons/src/HeatmapIcon.tsx | 12 +- packages/paste-icons/src/HideIcon.tsx | 12 +- packages/paste-icons/src/HistoryIcon.tsx | 12 +- packages/paste-icons/src/ImageTextIcon.tsx | 12 +- packages/paste-icons/src/InboxIcon.tsx | 12 +- .../paste-icons/src/IndentDecreaseIcon.tsx | 12 +- .../paste-icons/src/IndentIncreaseIcon.tsx | 12 +- packages/paste-icons/src/InformationIcon.tsx | 12 +- packages/paste-icons/src/ItalicIcon.tsx | 12 +- packages/paste-icons/src/LightModeIcon.tsx | 12 +- packages/paste-icons/src/LinkExternalIcon.tsx | 12 +- packages/paste-icons/src/LinkIcon.tsx | 12 +- packages/paste-icons/src/LoadingIcon.tsx | 12 +- packages/paste-icons/src/LockIcon.tsx | 12 +- packages/paste-icons/src/LogInIcon.tsx | 12 +- packages/paste-icons/src/LogOutIcon.tsx | 12 +- packages/paste-icons/src/LogoTwilioIcon.tsx | 12 +- packages/paste-icons/src/LowerHandIcon.tsx | 12 +- packages/paste-icons/src/MMSCapableIcon.tsx | 12 +- packages/paste-icons/src/MenuIcon.tsx | 12 +- .../paste-icons/src/MicrophoneOffIcon.tsx | 12 +- packages/paste-icons/src/MicrophoneOnIcon.tsx | 12 +- packages/paste-icons/src/MinusIcon.tsx | 12 +- packages/paste-icons/src/MobileIcon.tsx | 12 +- packages/paste-icons/src/MoreIcon.tsx | 12 +- packages/paste-icons/src/NeutralIcon.tsx | 12 +- packages/paste-icons/src/NewIcon.tsx | 12 +- packages/paste-icons/src/NotesIcon.tsx | 12 +- packages/paste-icons/src/NotificationIcon.tsx | 12 +- packages/paste-icons/src/OrderedListIcon.tsx | 12 +- packages/paste-icons/src/OutOfDateIcon.tsx | 12 +- packages/paste-icons/src/PauseIcon.tsx | 12 +- packages/paste-icons/src/PinIcon.tsx | 12 +- packages/paste-icons/src/PlayIcon.tsx | 12 +- packages/paste-icons/src/PlusIcon.tsx | 12 +- .../paste-icons/src/ProcessDisabledIcon.tsx | 12 +- packages/paste-icons/src/ProcessDraftIcon.tsx | 12 +- packages/paste-icons/src/ProcessErrorIcon.tsx | 12 +- .../paste-icons/src/ProcessInProgressIcon.tsx | 12 +- .../paste-icons/src/ProcessNeutralIcon.tsx | 12 +- .../paste-icons/src/ProcessSuccessIcon.tsx | 12 +- .../paste-icons/src/ProcessWarningIcon.tsx | 12 +- .../src/ProductAPIExplorerIcon.tsx | 12 +- .../paste-icons/src/ProductAddOnsIcon.tsx | 12 +- .../src/ProductAdminAccessControlIcon.tsx | 12 +- .../src/ProductAdminAccountsIcon.tsx | 12 +- .../src/ProductAdminDomainsIcon.tsx | 12 +- .../src/ProductAdminResoldCustomersIcon.tsx | 12 +- .../paste-icons/src/ProductAdminSSOIcon.tsx | 12 +- .../paste-icons/src/ProductAdminUsersIcon.tsx | 12 +- .../paste-icons/src/ProductAlarmsIcon.tsx | 12 +- .../paste-icons/src/ProductAssetsIcon.tsx | 12 +- .../paste-icons/src/ProductAudiencesIcon.tsx | 12 +- packages/paste-icons/src/ProductAuthyIcon.tsx | 12 +- .../paste-icons/src/ProductAutopilotIcon.tsx | 12 +- .../paste-icons/src/ProductBillingIcon.tsx | 12 +- packages/paste-icons/src/ProductCLIIcon.tsx | 12 +- .../paste-icons/src/ProductChannelsIcon.tsx | 12 +- packages/paste-icons/src/ProductChatIcon.tsx | 12 +- .../src/ProductCodeExchangeCommunityIcon.tsx | 12 +- .../src/ProductCodeExchangePartnerIcon.tsx | 12 +- packages/paste-icons/src/ProductCommsIcon.tsx | 12 +- .../src/ProductConnectedDevicesIcon.tsx | 12 +- .../src/ProductConnectionsIcon.tsx | 12 +- .../src/ProductContactCenterAdminIcon.tsx | 12 +- .../ProductContactCenterAssessmentsIcon.tsx | 12 +- .../src/ProductContactCenterQueuesIcon.tsx | 12 +- .../src/ProductContactCenterTasksIcon.tsx | 12 +- .../src/ProductContactCenterTeamsIcon.tsx | 12 +- .../src/ProductConversationsIcon.tsx | 12 +- .../paste-icons/src/ProductDebuggerIcon.tsx | 12 +- .../src/ProductDestinationsIcon.tsx | 12 +- .../src/ProductElasticSIPTrunkingIcon.tsx | 12 +- .../paste-icons/src/ProductEmailAPIIcon.tsx | 12 +- .../paste-icons/src/ProductEngageIcon.tsx | 12 +- ...ductEngagementIntelligencePlatformIcon.tsx | 10 +- .../src/ProductEventLibraryIcon.tsx | 12 +- .../src/ProductEventStreamIcon.tsx | 12 +- .../src/ProductEventStreamsIcon.tsx | 12 +- packages/paste-icons/src/ProductFaxIcon.tsx | 12 +- packages/paste-icons/src/ProductFlexIcon.tsx | 12 +- packages/paste-icons/src/ProductFlowIcon.tsx | 12 +- .../paste-icons/src/ProductFrontlineIcon.tsx | 12 +- .../paste-icons/src/ProductFunctionsIcon.tsx | 12 +- packages/paste-icons/src/ProductHomeIcon.tsx | 12 +- .../paste-icons/src/ProductInsightsIcon.tsx | 12 +- .../src/ProductInterconnectIcon.tsx | 12 +- ...ProductInternetOfThingsEmbeddedSIMIcon.tsx | 10 +- .../src/ProductInternetOfThingsIcon.tsx | 12 +- .../ProductInternetOfThingsNarrowbandIcon.tsx | 12 +- ...etOfThingsProgrammableAssetTrackerIcon.tsx | 10 +- .../ProductInternetOfThingsSuperSIMIcon.tsx | 12 +- ...roductInternetOfThingsTrustOnboardIcon.tsx | 10 +- .../ProductInternetOfThingsWirelessIcon.tsx | 12 +- .../paste-icons/src/ProductJourneysIcon.tsx | 12 +- packages/paste-icons/src/ProductKeysIcon.tsx | 12 +- packages/paste-icons/src/ProductLiveIcon.tsx | 12 +- packages/paste-icons/src/ProductLogsIcon.tsx | 12 +- .../paste-icons/src/ProductLookupIcon.tsx | 12 +- .../paste-icons/src/ProductMappingIcon.tsx | 12 +- .../src/ProductMarketingCampaignsIcon.tsx | 12 +- .../paste-icons/src/ProductMessagingIcon.tsx | 12 +- .../paste-icons/src/ProductMicrovisorIcon.tsx | 12 +- .../paste-icons/src/ProductNotifyIcon.tsx | 12 +- .../paste-icons/src/ProductOneAdminIcon.tsx | 12 +- .../src/ProductPayConnectorIcon.tsx | 12 +- .../paste-icons/src/ProductPersonasIcon.tsx | 12 +- .../src/ProductPhoneNumbersIcon.tsx | 12 +- .../paste-icons/src/ProductPrivacyIcon.tsx | 12 +- .../paste-icons/src/ProductProtocolsIcon.tsx | 12 +- packages/paste-icons/src/ProductProxyIcon.tsx | 12 +- .../paste-icons/src/ProductRegionalIcon.tsx | 12 +- .../paste-icons/src/ProductReverseETLIcon.tsx | 12 +- packages/paste-icons/src/ProductSDKIcon.tsx | 12 +- .../paste-icons/src/ProductSegmentIcon.tsx | 12 +- .../paste-icons/src/ProductSettingsIcon.tsx | 12 +- .../src/ProductSourceSchemaIcon.tsx | 12 +- .../paste-icons/src/ProductSourcesIcon.tsx | 12 +- .../paste-icons/src/ProductStudioIcon.tsx | 12 +- .../paste-icons/src/ProductSupportIcon.tsx | 12 +- .../paste-icons/src/ProductSwitcherIcon.tsx | 12 +- packages/paste-icons/src/ProductSyncIcon.tsx | 12 +- .../paste-icons/src/ProductTaskRouterIcon.tsx | 12 +- .../paste-icons/src/ProductTraitsIcon.tsx | 12 +- .../paste-icons/src/ProductTrustHubIcon.tsx | 12 +- .../paste-icons/src/ProductTwiMLBinsIcon.tsx | 12 +- .../paste-icons/src/ProductTwilioOrgIcon.tsx | 12 +- packages/paste-icons/src/ProductUSSDIcon.tsx | 12 +- packages/paste-icons/src/ProductUnifyIcon.tsx | 12 +- packages/paste-icons/src/ProductUsageIcon.tsx | 12 +- .../paste-icons/src/ProductVerifyIcon.tsx | 12 +- packages/paste-icons/src/ProductVideoIcon.tsx | 12 +- packages/paste-icons/src/ProductVoiceIcon.tsx | 12 +- .../src/ProductVoiceIntelligenceIcon.tsx | 12 +- packages/paste-icons/src/RaiseHandIcon.tsx | 12 +- packages/paste-icons/src/RecordIcon.tsx | 12 +- packages/paste-icons/src/RedoIcon.tsx | 12 +- packages/paste-icons/src/RefreshIcon.tsx | 12 +- packages/paste-icons/src/RepeatIcon.tsx | 12 +- packages/paste-icons/src/ResetIcon.tsx | 12 +- packages/paste-icons/src/SMSCapableIcon.tsx | 12 +- packages/paste-icons/src/SMSIcon.tsx | 12 +- packages/paste-icons/src/ScreenShareIcon.tsx | 12 +- packages/paste-icons/src/SearchIcon.tsx | 12 +- packages/paste-icons/src/SelectIcon.tsx | 12 +- packages/paste-icons/src/SelectedIcon.tsx | 12 +- packages/paste-icons/src/SendIcon.tsx | 12 +- packages/paste-icons/src/SentIcon.tsx | 12 +- packages/paste-icons/src/ShareIcon.tsx | 12 +- packages/paste-icons/src/ShowIcon.tsx | 12 +- packages/paste-icons/src/ShrinkIcon.tsx | 12 +- packages/paste-icons/src/SkipBackIcon.tsx | 12 +- packages/paste-icons/src/SkipForwardIcon.tsx | 12 +- packages/paste-icons/src/SocialIcon.tsx | 12 +- .../paste-icons/src/SortAlphabeticalIcon.tsx | 12 +- .../paste-icons/src/SpacerVerticalIcon.tsx | 12 +- packages/paste-icons/src/StarIcon.tsx | 12 +- packages/paste-icons/src/StopIcon.tsx | 12 +- .../paste-icons/src/StopScreenShareIcon.tsx | 12 +- packages/paste-icons/src/StoreIcon.tsx | 12 +- .../paste-icons/src/StrikethroughIcon.tsx | 12 +- packages/paste-icons/src/SubscriptIcon.tsx | 12 +- packages/paste-icons/src/SuccessIcon.tsx | 12 +- packages/paste-icons/src/SuperscriptIcon.tsx | 12 +- packages/paste-icons/src/SupportIcon.tsx | 12 +- packages/paste-icons/src/SystemStatusIcon.tsx | 12 +- packages/paste-icons/src/TaskIcon.tsx | 12 +- .../paste-icons/src/TextAlignCenterIcon.tsx | 12 +- .../paste-icons/src/TextAlignJustifyIcon.tsx | 12 +- .../paste-icons/src/TextAlignLeftIcon.tsx | 12 +- .../paste-icons/src/TextAlignRightIcon.tsx | 12 +- .../paste-icons/src/TextFormatClearIcon.tsx | 12 +- packages/paste-icons/src/TextFormatIcon.tsx | 12 +- .../paste-icons/src/TextHighlightIcon.tsx | 12 +- packages/paste-icons/src/ThemeIcon.tsx | 12 +- packages/paste-icons/src/ThumbsDownIcon.tsx | 12 +- packages/paste-icons/src/ThumbsUpIcon.tsx | 12 +- packages/paste-icons/src/TimeIcon.tsx | 12 +- packages/paste-icons/src/TipIcon.tsx | 12 +- packages/paste-icons/src/TokenIcon.tsx | 12 +- packages/paste-icons/src/TourIcon.tsx | 12 +- packages/paste-icons/src/TranslationIcon.tsx | 12 +- packages/paste-icons/src/TrendDownIcon.tsx | 12 +- packages/paste-icons/src/TrendUpIcon.tsx | 12 +- packages/paste-icons/src/UnarchiveIcon.tsx | 12 +- packages/paste-icons/src/UnderlineIcon.tsx | 12 +- packages/paste-icons/src/UndoIcon.tsx | 12 +- packages/paste-icons/src/UnlockIcon.tsx | 12 +- .../paste-icons/src/UnorderedListIcon.tsx | 12 +- packages/paste-icons/src/UnpinIcon.tsx | 12 +- packages/paste-icons/src/UnsortedIcon.tsx | 12 +- packages/paste-icons/src/UnsubscribeIcon.tsx | 12 +- packages/paste-icons/src/UploadIcon.tsx | 12 +- .../paste-icons/src/UploadToCloudIcon.tsx | 12 +- packages/paste-icons/src/UserIcon.tsx | 12 +- packages/paste-icons/src/UsersIcon.tsx | 12 +- packages/paste-icons/src/VideoOffIcon.tsx | 12 +- packages/paste-icons/src/VideoOnIcon.tsx | 12 +- packages/paste-icons/src/VoiceCapableIcon.tsx | 12 +- packages/paste-icons/src/VoicemailIcon.tsx | 12 +- packages/paste-icons/src/VolumeOffIcon.tsx | 12 +- packages/paste-icons/src/VolumeOnIcon.tsx | 12 +- packages/paste-icons/src/WarningIcon.tsx | 12 +- packages/paste-icons/src/WebCapableIcon.tsx | 12 +- packages/paste-icons/src/ZoomInIcon.tsx | 12 +- .../paste-icons/src/helpers/IconWrapper.tsx | 15 +- packages/paste-icons/src/types/index.ts | 2 +- .../paste-icons/stories/index.stories.tsx | 22 +- .../tools/actions/convertAllAction.ts | 6 +- .../tools/actions/convertNewAction.ts | 10 +- .../tools/actions/listIconsAction.ts | 10 +- packages/paste-icons/tools/cli.ts | 6 +- packages/paste-icons/tools/constants.ts | 2 +- .../tools/templates/buildListTemplate.ts | 2 +- .../tools/templates/jsonTemplate.ts | 2 +- .../tools/templates/reactIconTemplate.ts | 2 +- packages/paste-icons/tools/utils.ts | 6 +- packages/paste-libraries/animation/build.js | 2 +- .../paste-libraries/animation/src/index.tsx | 8 +- .../animation/src/useReducedMotion.tsx | 2 +- .../paste-libraries/clipboard-copy/build.js | 2 +- .../clipboard-copy/src/index.tsx | 4 +- .../clipboard-copy/stories/index.stories.tsx | 20 +- packages/paste-libraries/code-editor/build.js | 2 +- .../code-editor/src/PasteTheme.ts | 2 +- .../paste-libraries/code-editor/src/index.tsx | 2 +- .../stories/diffEditor.stories.tsx | 2 +- .../code-editor/stories/editor.stories.tsx | 2 +- .../__test__/index.spec.tsx | 18 +- .../data-visualization/build.js | 2 +- .../data-visualization/src/index.tsx | 2 +- .../src/usePasteHighchartsTheme.tsx | 10 +- .../stories/index.stories.tsx | 20 +- .../lineChartWithAnnotationsOptions.ts | 2 +- .../stories/options/timeSeriesOptions.ts | 9 +- packages/paste-libraries/dropdown/build.js | 2 +- .../paste-libraries/dropdown/src/index.tsx | 2 +- .../dropdown/stories/combobox.stories.tsx | 28 +- .../dropdown/stories/multiselect.stories.tsx | 36 +- packages/paste-libraries/lexical/build.js | 2 +- .../paste-libraries/lexical/src/index.tsx | 40 +- .../lexical/stories/index.stories.tsx | 4 +- .../paste-libraries/react-spectrum/build.js | 2 +- .../react-spectrum/src/react-stately.tsx | 2 +- .../stories/useSlider.stories.tsx | 16 +- .../__tests__/index.test.tsx | 28 +- .../react-textarea-autosize/build.js | 2 +- .../src/calculateNodeHeight.ts | 12 +- .../react-textarea-autosize/src/getHeight.ts | 2 +- .../react-textarea-autosize/src/index.tsx | 16 +- .../src/useHiddenTextarea.tsx | 2 +- packages/paste-libraries/reakit/build.js | 2 +- .../reakit/src/Popover/PopoverArrow.tsx | 24 +- .../reakit/src/Tooltip/TooltipArrow.tsx | 14 +- packages/paste-libraries/reakit/src/index.tsx | 16 +- .../reakit/stories/composite.stories.tsx | 10 +- packages/paste-libraries/styling/build.js | 2 +- .../src/css-function/__tests__/css.test.ts | 8 +- .../styling/src/css-function/css.ts | 88 +- .../paste-libraries/styling/src/index.tsx | 14 +- .../syntax-highlighter/build.js | 2 +- .../syntax-highlighter/src/index.tsx | 4 +- packages/paste-libraries/uid/build.js | 2 +- packages/paste-libraries/uid/src/index.tsx | 4 +- .../uid/stories/index.stories.tsx | 22 +- packages/paste-style-props/build.js | 2 +- .../paste-style-props/src/types/background.ts | 8 +- .../paste-style-props/src/types/border.ts | 8 +- .../paste-style-props/src/types/css-props.ts | 4 +- .../paste-style-props/src/types/flexbox.ts | 4 +- packages/paste-style-props/src/types/grid.ts | 4 +- .../paste-style-props/src/types/layout.ts | 6 +- .../paste-style-props/src/types/position.ts | 6 +- .../paste-style-props/src/types/shadow.ts | 6 +- packages/paste-style-props/src/types/space.ts | 4 +- .../paste-style-props/src/types/typography.ts | 6 +- .../layout/editor-wrapper/ExportModal.tsx | 22 +- .../layout/editor-wrapper/ImportModal.tsx | 20 +- .../layout/editor-wrapper/TokenSelector.tsx | 14 +- .../layout/editor-wrapper/index.tsx | 18 +- .../components/preview/AlertPreview.tsx | 8 +- .../components/preview/AnchorPreview.tsx | 6 +- .../components/preview/AvatarPreview.tsx | 6 +- .../components/preview/BreadcrumbPreview.tsx | 4 +- .../components/preview/ButtonPreview.tsx | 6 +- .../components/preview/CardPreview.tsx | 18 +- .../components/preview/FormPreview.tsx | 22 +- .../components/preview/MenuPreview.tsx | 6 +- .../components/preview/ModalPreview.tsx | 14 +- .../components/preview/PopoverPreview.tsx | 6 +- .../components/preview/TabbedContent.tsx | 36 +- .../components/preview/TablePreview.tsx | 4 +- .../components/preview/ToastPreview.tsx | 10 +- .../components/preview/TooltipPreview.tsx | 6 +- .../components/preview/TypographyPreview.tsx | 8 +- .../components/preview/index.tsx | 20 +- .../token-option/ColorTokenInput.tsx | 30 +- .../token-option/FontTokenInput.tsx | 14 +- .../token-option/TextTokenInput.tsx | 14 +- .../token-option/UnitTokenInput.tsx | 16 +- .../components/token-option/index.tsx | 16 +- .../components/topbar/BetaBadge.tsx | 10 +- .../components/topbar/BetaModal.tsx | 18 +- .../components/topbar/PasteIconInverse.tsx | 10 +- .../components/topbar/SiteHeaderLogo.tsx | 18 +- .../components/topbar/index.tsx | 6 +- .../context/TokenContext.ts | 2 +- packages/paste-theme-designer/pages/_app.tsx | 16 +- .../pages/background-color/index.tsx | 8 +- .../pages/border-color/index.tsx | 8 +- .../pages/border-width/index.tsx | 8 +- .../pages/box-shadow/index.tsx | 8 +- .../pages/font-size/index.tsx | 8 +- .../pages/font-weight/index.tsx | 8 +- .../paste-theme-designer/pages/font/index.tsx | 8 +- packages/paste-theme-designer/pages/index.tsx | 2 +- .../pages/line-height/index.tsx | 8 +- .../pages/radii/index.tsx | 8 +- .../pages/sizing/index.tsx | 8 +- .../pages/spacing/index.tsx | 8 +- .../pages/text-color/index.tsx | 8 +- .../pages/z-index/index.tsx | 8 +- .../__tests__/generateThemeFromTokens.spec.ts | 28 +- .../paste-theme/__tests__/remToPx.spec.ts | 2 +- .../__tests__/themeConsumer.spec.tsx | 14 +- .../__tests__/themeProvider.spec.tsx | 26 +- packages/paste-theme/__tests__/themes.spec.ts | 2 +- .../paste-theme/__tests__/useTheme.spec.tsx | 12 +- .../__tests__/useThemeContrastCheck.spec.tsx | 8 +- .../paste-theme/__tests__/withTheme.spec.tsx | 16 +- packages/paste-theme/build.js | 2 +- packages/paste-theme/src/constants.ts | 2 +- .../src/generateThemeFromTokens.ts | 34 +- .../src/generateTokensFromTheme.ts | 4 +- packages/paste-theme/src/index.tsx | 32 +- packages/paste-theme/src/styles/base.ts | 2 +- packages/paste-theme/src/styles/fonts.ts | 2 +- packages/paste-theme/src/styles/global.ts | 2 +- packages/paste-theme/src/themeConsumer.tsx | 12 +- packages/paste-theme/src/themeProvider.tsx | 22 +- packages/paste-theme/src/themes/dark/index.ts | 2 +- .../paste-theme/src/themes/default/index.ts | 2 +- .../paste-theme/src/themes/evergreen/index.ts | 2 +- packages/paste-theme/src/themes/index.ts | 14 +- .../paste-theme/src/themes/sendgrid/index.ts | 2 +- .../src/themes/twilio-dark/index.ts | 2 +- .../paste-theme/src/themes/twilio/index.ts | 2 +- packages/paste-theme/src/types/themes.ts | 12 +- packages/paste-theme/src/useTheme.tsx | 6 +- .../paste-theme/src/useThemeContrastCheck.ts | 6 +- packages/paste-theme/src/withTheme.ts | 4 +- .../stories/cacheProvider.stories.tsx | 16 +- .../stories/evergreenTheme.stories.tsx | 38 +- .../stories/themeProvider.stories.tsx | 18 +- .../.eslintrc.json | 2 +- .../paste-token-contrast-checker/src/App.tsx | 10 +- .../src/components/Form.tsx | 20 +- .../src/components/KitchenSink.tsx | 44 +- .../src/components/Menu.tsx | 4 +- .../src/components/SideBar.tsx | 22 +- .../src/components/ThemeSelector.tsx | 12 +- .../src/components/TokenPairRating.tsx | 20 +- .../src/index.tsx | 4 +- .../src/pages/IndexPage.tsx | 6 +- .../src/reportWebVitals.ts | 4 +- packages/paste-types/build.js | 2 +- .../__tests__/useWindowSize.test.tsx | 12 +- packages/paste-utils/build.js | 2 +- .../src/hooks/useMutationObservable.ts | 6 +- .../paste-utils/src/hooks/useWindowSize.ts | 8 +- .../plugins/remark-headings-plugin.mjs | 4 +- packages/paste-website/scripts/fetch-data.mjs | 26 +- .../src/__tests__/colorGradient.test.tsx | 2 +- .../src/__tests__/filterGroup.test.tsx | 6 +- .../src/__tests__/genericHeader.test.tsx | 18 +- .../__tests__/packageStatusLegend.test.tsx | 22 +- .../__tests__/tokenAccessiblePairs.test.tsx | 2 +- .../src/__tests__/tokenCard.test.tsx | 18 +- .../src/__tests__/tokensList.test.tsx | 2 +- packages/paste-website/src/assets/Logo.tsx | 8 +- .../animations/homepage-hero-animation.json | 10608 +++++++++++++++- .../src/assets/illustrations/DoodleArrow.tsx | 6 +- .../src/assets/illustrations/DoodleBurst.tsx | 6 +- .../src/assets/illustrations/DoodleCloud.tsx | 4 +- .../src/assets/illustrations/DoodleCurve.tsx | 6 +- .../assets/illustrations/DoodleLoopArrow.tsx | 6 +- .../illustrations/DoodleLoopArrowLarge.tsx | 6 +- .../assets/illustrations/DoodleLoopLarge.tsx | 6 +- .../assets/illustrations/DoodleLoopMedium.tsx | 6 +- .../assets/illustrations/DoodleLoopSmall.tsx | 6 +- .../assets/illustrations/DoodleLoopTiny.tsx | 6 +- .../src/assets/illustrations/DoodleZigzag.tsx | 6 +- .../ChatComposerExamples.tsx | 18 +- .../ColorsFoundationExamples.tsx | 64 +- .../ComboboxPrimitiveExamples.ts | 3 +- .../ConversationsUIKitAnnouncement.tsx | 4 +- .../DataVisualizationExamples.tsx | 26 +- .../ModalDialogPrimitiveExample.tsx | 10 +- .../StatusPatternExamples.tsx | 16 +- .../src/component-examples/ToastExamples.tsx | 18 +- .../filter-group/Examples.tsx | 10 +- .../components/CustomDateFilterGroup.tsx | 60 +- .../components/DateTimePopover.tsx | 44 +- .../components/DefaultFilterGroup.tsx | 32 +- .../filter-group/components/EmptyState.tsx | 12 +- .../components/SampleDataGrid.tsx | 17 +- .../filter-group/constants.ts | 22 +- .../filter-group/helpers.ts | 16 +- .../component-examples/filter-group/types.ts | 2 +- .../paste-website/src/components/Article.tsx | 22 +- .../src/components/ArticleAuthor.tsx | 12 +- .../src/components/ArticleList.tsx | 12 +- .../src/components/Blockquote.tsx | 10 +- .../src/components/BrowserSupport.tsx | 2 +- .../src/components/ContactUsMenu.tsx | 6 +- .../src/components/CookieConsent.tsx | 6 +- .../src/components/CopyButton.tsx | 12 +- .../paste-website/src/components/DoDont.tsx | 14 +- .../components/FormPillVsDisplayPillTable.tsx | 10 +- .../paste-website/src/components/Heading.tsx | 20 +- .../src/components/ImageCaption.tsx | 6 +- .../src/components/PageContentWrapper.tsx | 9 +- .../src/components/PropsTables.tsx | 28 +- .../src/components/ResponsiveImage.tsx | 8 +- .../src/components/Roadmap/Roadmap.tsx | 30 +- .../src/components/Roadmap/RoadmapAside.tsx | 20 +- .../src/components/Roadmap/types.ts | 4 +- .../paste-website/src/components/SiteLink.tsx | 6 +- .../components/SlantedBackgroundGradient.tsx | 12 +- .../src/components/ThemeObjectDisplay.tsx | 10 +- .../src/components/Typography.tsx | 6 +- .../src/components/breadcrumb/index.tsx | 14 +- .../src/components/codeblock/index.tsx | 4 +- .../components/color-swatch/ColorGradient.tsx | 18 +- .../components/color-swatch/ColorSwatch.tsx | 8 +- .../component-overview-table/index.tsx | 26 +- .../component-status/AssetStatus.tsx | 10 +- .../component-status/PeerReviewStatus.tsx | 13 +- .../ComingSoonCard.tsx | 12 +- .../customization-landing-page/FlexCard.tsx | 8 +- .../LandingPageDesigner/ColorTokenInput.tsx | 30 +- .../LandingPageDesigner/DesignerContext.tsx | 2 +- .../LandingPageDesigner/DesignerControls.tsx | 22 +- .../LandingPageDesigner/DesignerPreview.tsx | 36 +- .../LandingPageDesigner/TextToken.tsx | 14 +- .../LandingPageDesigner/UnitTokenInput.tsx | 16 +- .../LandingPageDesigner/index.tsx | 16 +- .../LandingPageHero.tsx | 16 +- .../LandingPageLayoutUtils.tsx | 8 +- .../customization-landing-page/LikeTwilio.tsx | 22 +- .../ProjectCard.tsx | 14 +- .../customization-landing-page/ReactCard.tsx | 8 +- .../ReadyToGetStarted.tsx | 18 +- .../ReasonBlock.tsx | 10 +- .../customization-landing-page/WhyPaste.tsx | 32 +- .../WorksGreatWith.tsx | 22 +- .../image-slider/ImageSlider.tsx | 32 +- .../image-slider/SVGThumb.tsx | 12 +- .../image-slider/index.tsx | 2 +- .../image-slider/useSvgResize.ts | 6 +- .../image-slider/utils.ts | 2 +- .../src/components/empty-state/Error404.tsx | 20 +- .../components/empty-state/InDevelopment.tsx | 22 +- .../src/components/empty-state/NotFound.tsx | 12 +- .../src/components/grid/index.tsx | 4 +- .../src/components/homepage/Experiment.tsx | 40 +- .../homepage/ExperimentMobileButton.tsx | 6 +- .../src/components/homepage/GetStarted.tsx | 20 +- .../components/homepage/GetStartedCard.tsx | 8 +- .../homepage/GetStartedCardIllustration.tsx | 4 +- .../homepage/GetStartedCardLink.tsx | 6 +- .../homepage/GetStartedCardLinks.tsx | 8 +- .../homepage/GetStartedInclusive.tsx | 22 +- .../components/homepage/GetStartedRunning.tsx | 24 +- .../src/components/homepage/GetStartedWhy.tsx | 18 +- .../src/components/homepage/HomeHero.tsx | 30 +- .../homepage/HomeHeroIllustration.tsx | 12 +- .../homepage/NewComponentBanner.tsx | 6 +- .../homepage/NewComponentBannerLink.tsx | 10 +- .../homepage/NewComponentBannerText.tsx | 6 +- .../src/components/homepage/Popular.tsx | 20 +- .../homepage/PopularComponentCard.tsx | 24 +- .../components/homepage/PopularComponents.tsx | 20 +- .../components/homepage/PopularPatterns.tsx | 20 +- .../homepage/PopularSectionHeader.tsx | 6 +- .../src/components/icons-list/IconCard.tsx | 22 +- .../components/icons-list/IconListItem.tsx | 14 +- .../src/components/icons-list/IconTile.tsx | 12 +- .../src/components/icons-list/IconsList.tsx | 44 +- .../src/components/icons-list/types.ts | 2 +- .../src/components/icons/A11yIcon.tsx | 8 +- .../src/components/icons/Brush.tsx | 8 +- .../src/components/icons/ComponentsIcon.tsx | 8 +- .../src/components/icons/CustomizableIcon.tsx | 8 +- .../src/components/icons/FigmaIcon.tsx | 10 +- .../src/components/icons/GithubIcon.tsx | 32 +- .../src/components/icons/HeartDoodleIcon.tsx | 8 +- .../src/components/icons/PasteIcon.tsx | 8 +- .../src/components/icons/PasteIconPride.tsx | 12 +- .../src/components/icons/PatternsIcon.tsx | 8 +- .../src/components/icons/ReactLogoIcon.tsx | 8 +- .../src/components/icons/StorybookIcon.tsx | 8 +- .../src/components/icons/Terminal.tsx | 8 +- .../src/components/icons/ThemableIcon.tsx | 8 +- .../src/components/icons/TwilioIcon.tsx | 10 +- .../src/components/icons/TwilioLogo.tsx | 39 +- .../src/components/icons/WindowLayout.tsx | 10 +- .../components/images/DatePickerImages.tsx | 4 +- .../components/images/TimePickerImages.tsx | 4 +- .../components/ingredients/Ingredients.tsx | 12 +- .../ingredients/ObjectDetailsIngredients.tsx | 8 +- .../ingredients/ObjectsListIngredients.tsx | 8 +- .../ingredients/SettingsIngredients.tsx | 8 +- .../open-graph-card/AssetStatus.tsx | 10 +- .../open-graph-card/ComponentStatus.tsx | 14 +- .../open-graph-card/GraphImageDetails.tsx | 10 +- .../open-graph-card/GraphImageHero.tsx | 12 +- .../open-graph-card/GraphImageWrapper.tsx | 6 +- .../open-graph-card/PeerReviewStatus.tsx | 10 +- .../src/components/open-graph-card/types.ts | 4 +- .../AccessibilityCallout.tsx | 4 +- .../CustomThemeKeyList.tsx | 4 +- .../customization-provider/FontCallout.tsx | 2 +- .../components/paste-mdx-provider/index.tsx | 68 +- .../components/shortcodes/ArticleHeader.tsx | 14 +- .../components/shortcodes/ArticleLayouts.tsx | 6 +- .../shortcodes/ChangelogRevealer.tsx | 8 +- .../src/components/shortcodes/PageAside.tsx | 12 +- .../components/shortcodes/StoryPreview.tsx | 8 +- .../shortcodes/feedback-popover/index.tsx | 32 +- .../shortcodes/generic-header/index.tsx | 32 +- .../live-preview/CodeBlockOverlayShadow.tsx | 4 +- .../shortcodes/live-preview/ThemeSwitcher.tsx | 12 +- .../shortcodes/live-preview/index.tsx | 32 +- .../shortcodes/live-preview/theme.ts | 4 +- .../normalized-component-header/index.tsx | 8 +- .../normalized-pattern-header/index.tsx | 26 +- .../package-status-legend/index.tsx | 20 +- .../TableOfContentsAnchor.tsx | 4 +- .../table-of-contents/TableOfContentsList.tsx | 4 +- .../TableOfContentsListItem.tsx | 10 +- .../shortcodes/table-of-contents/index.tsx | 52 +- .../shortcodes/table-of-contents/types.ts | 2 +- .../src/components/site-wrapper/SiteBody.tsx | 28 +- .../src/components/site-wrapper/SiteMain.tsx | 6 +- .../src/components/site-wrapper/index.tsx | 10 +- .../site-wrapper/sidebar/SidebarAnchor.tsx | 6 +- .../sidebar/SidebarNavigation.tsx | 30 +- .../site-footer/SiteFooterHeader.tsx | 10 +- .../site-footer/SiteFooterIllustration.tsx | 6 +- .../site-footer/SiteFooterNav.tsx | 18 +- .../site-footer/SiteFooterTopAngle.tsx | 6 +- .../site-wrapper/site-footer/index.tsx | 14 +- .../site-header/DarkModeToggle.tsx | 14 +- .../site-wrapper/site-header/FigmaButton.tsx | 14 +- .../site-header/HamburgerToggle.tsx | 22 +- .../site-header/SiteHeaderLogo.tsx | 20 +- .../site-header/SiteHeaderSearch.tsx | 10 +- .../site-wrapper/site-header/index.tsx | 22 +- .../components/tokens-list/NoTokensFound.tsx | 16 +- .../tokens-list/ScrollToTopLink.tsx | 8 +- .../tokens-list/TokensListFilter.tsx | 20 +- .../src/components/tokens-list/helpers.tsx | 8 +- .../src/components/tokens-list/index.tsx | 42 +- .../components/tokens-list/sectionIntros.tsx | 14 +- .../token-card/AccessiblePairing.tsx | 14 +- .../tokens-list/token-card/index.tsx | 30 +- .../token-example/BorderExample.tsx | 6 +- .../token-card/token-example/BoxExample.tsx | 4 +- .../token-example/IconSizeExample.tsx | 6 +- .../token-example/LineHeightExample.tsx | 8 +- .../token-example/SpacingExample.tsx | 10 +- .../token-example/TextColorExample.tsx | 16 +- .../token-card/token-example/TextExample.tsx | 10 +- .../token-card/token-example/index.tsx | 20 +- .../src/components/tokens-list/types.ts | 4 +- .../src/components/word-list/EmptyState.tsx | 16 +- .../src/components/word-list/WordFilter.tsx | 16 +- .../word-list/__tests__/utils.spec.ts | 4 +- .../src/components/word-list/index.tsx | 12 +- .../src/components/word-list/utils.tsx | 2 +- .../src/context/DarkModeContext.tsx | 2 +- .../src/context/NavigationContext.tsx | 2 +- .../src/functions-utils/logger.ts | 2 +- .../paste-website/src/hooks/useDarkMode.tsx | 4 +- .../paste-website/src/hooks/useWindowSize.tsx | 10 +- .../src/layouts/ComponentPageLayout.tsx | 28 +- .../src/layouts/DefaultLayout.tsx | 14 +- packages/paste-website/src/lib/gtag.ts | 4 +- packages/paste-website/src/pages/_app.tsx | 30 +- .../paste-website/src/pages/_document.tsx | 4 +- .../paste-website/src/pages/api/opengraph.ts | 14 +- .../src/pages/customization/index.tsx | 20 +- packages/paste-website/src/pages/index.tsx | 22 +- .../src/pages/opengraph/index.tsx | 28 +- .../paste-website/src/pages/sitemap.xml.tsx | 6 +- .../paste-website/src/styles/docSearch.ts | 8 +- packages/paste-website/src/utils/DataUtils.ts | 12 +- .../paste-website/src/utils/RouteUtils.ts | 6 +- .../src/utils/__tests__/DataUtils.spec.ts | 4 +- .../src/utils/__tests__/contrastScore.spec.ts | 2 +- packages/paste-website/src/utils/airtable.mjs | 2 +- packages/paste-website/src/utils/api.ts | 20 +- .../utils/color-combos/__test__/index.spec.ts | 58 +- .../src/utils/color-combos/index.ts | 10 +- .../src/utils/color-rating/index.ts | 2 +- .../src/utils/componentApiUtils.ts | 4 +- .../paste-website/src/utils/contrastScore.ts | 4 +- packages/paste-website/src/utils/inCypress.ts | 2 +- .../stories/AnchoredHeading.stories.tsx | 4 +- .../stories/ColorSwatch.stories.tsx | 10 +- .../stories/FeedbackPopover.stories.tsx | 2 +- .../stories/FigmaButton.stories.tsx | 4 +- .../stories/FilterGroup.stories.tsx | 6 +- .../stories/GenericHeader.stories.tsx | 2 +- .../stories/HamburgerToggle.stories.tsx | 4 +- .../stories/InlineCode.stories.tsx | 8 +- .../stories/LivePreview.stories.tsx | 16 +- .../stories/PackageStatusLegend.stories.tsx | 2 +- .../stories/PropsTable.stories.tsx | 4 +- .../stories/TableOfContents.stories.tsx | 16 +- .../stories/TokenCard.stories.tsx | 16 +- .../stories/TokensListFilter.stories.tsx | 2 +- .../stories/opengraph.stories.tsx | 6 +- .../stories/tokenSectionIntros.stories.tsx | 2 +- performance-benchmarks/alert.stories.tsx | 6 +- performance-benchmarks/box.stories.tsx | 6 +- performance-benchmarks/button.stories.tsx | 6 +- .../paste-nextjs-template/pages/_app.tsx | 6 +- .../paste-nextjs-template/pages/_document.tsx | 2 +- .../paste-nextjs-template/pages/index.tsx | 14 +- tools/build/__tests__/compiledImports.test.ts | 2 +- .../__tests__/generate-type-docs.test.ts | 18 +- tools/build/clean-repo.ts | 2 +- tools/build/esbuild.js | 12 +- tools/build/generate-type-docs/index.ts | 16 +- tools/build/generate-type-docs/utils.ts | 6 +- tools/build/plugins/EsmExternals.js | 14 +- tools/build/plugins/PasteCJSResolver.js | 10 +- tools/build/pre-build.ts | 2 +- tools/build/pre-test.ts | 2 +- tools/build/token-usage-detector.ts | 14 +- tools/build/version.ts | 2 +- tools/test/act-user-event.ts | 2 +- tools/test/react-dom-create-root.ts | 6 +- tools/test/react-testing-library.ts | 2 +- tools/utils/__tests__/runCmd.spec.ts | 2 +- .../utils/calibratePackagePeerDepsVersions.ts | 18 +- tools/utils/getPackageInfo.ts | 2 +- tools/utils/getRepoPackages.ts | 2 +- tools/utils/mkdir.ts | 4 +- tools/utils/removeNodeModules.ts | 2 +- tools/utils/removeTsconfigBuildFiles.ts | 2 +- tools/utils/removeYarnLockfile.ts | 2 +- tools/utils/runCmd.ts | 2 +- .../convertFilePathsToPackageNames.test.ts | 2 +- .../__tests__/getMinimalPackageList.test.ts | 2 +- .../__tests__/getUnusedTokenList.test.ts | 2 +- .../token-usage/getMinimalPackageList.ts | 4 +- .../token-usage/getTokenPackageMapping.ts | 6 +- tools/utils/token-usage/getUnusedTokenList.ts | 2 +- tools/utils/token-usage/types.ts | 4 +- tools/utils/updatePackageCache.ts | 8 +- tools/utils/updatePackageReferences.ts | 26 +- tools/utils/writeToFile.ts | 4 +- vite.config.ts | 4 +- 1651 files changed, 23347 insertions(+), 12560 deletions(-) diff --git a/.changeset/config.json b/.changeset/config.json index 85b288b134..5069042829 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -1,6 +1,6 @@ { "$schema": "https://unpkg.com/@changesets/config@1.4.0/schema.json", - "changelog": ["@changesets/changelog-github", {"repo": "twilio-labs/paste"}], + "changelog": ["@changesets/changelog-github", { "repo": "twilio-labs/paste" }], "commit": false, "linked": [], "access": "public", diff --git a/.danger/__tests__/changesets-that-need-core-check.spec.ts b/.danger/__tests__/changesets-that-need-core-check.spec.ts index 95f4f1ba59..6541f6e4aa 100644 --- a/.danger/__tests__/changesets-that-need-core-check.spec.ts +++ b/.danger/__tests__/changesets-that-need-core-check.spec.ts @@ -28,7 +28,7 @@ describe('getChangesetsNotTaggingCore', () => { './.danger/__fixtures__/changeset/pink-masks-walk.md', './.danger/__fixtures__/changeset/popular-cheetahs-punch.md', './.danger/__fixtures__/changeset/pretty-cameras-burn.md', - ]) + ]), ).toEqual([ './.danger/__fixtures__/changeset/popular-cheetahs-punch.md', './.danger/__fixtures__/changeset/pretty-cameras-burn.md', @@ -109,7 +109,7 @@ describe('changesetsThatNeedCoreCheck()', () => { }; changesetsThatNeedCoreCheck(); expect(global.fail).toHaveBeenCalledWith( - 'Changeset ./.danger/__fixtures__/changeset/popular-cheetahs-punch.md does not mention a change to Paste Core. Please include core with this changeset.' + 'Changeset ./.danger/__fixtures__/changeset/popular-cheetahs-punch.md does not mention a change to Paste Core. Please include core with this changeset.', ); }); }); diff --git a/.danger/__tests__/missing-changesets-check.spec.ts b/.danger/__tests__/missing-changesets-check.spec.ts index b03c97bd7f..8b35deba62 100644 --- a/.danger/__tests__/missing-changesets-check.spec.ts +++ b/.danger/__tests__/missing-changesets-check.spec.ts @@ -1,4 +1,4 @@ -import missingChangesetCheck, {getMissingPackagesFromChangesets} from '../missing-changesets-check'; +import missingChangesetCheck, { getMissingPackagesFromChangesets } from '../missing-changesets-check'; declare const global: any; @@ -47,8 +47,8 @@ describe('getMissingPackagesFromChangesets()', () => { './.danger/__fixtures__/changeset/popular-cheetahs-punch.md', './.danger/__fixtures__/changeset/pretty-cameras-burn.md', ], - ['@twilio-paste/avatar', '@twilio-paste/box', '@twilio-paste/icons', '@twilio-paste/core'] - ) + ['@twilio-paste/avatar', '@twilio-paste/box', '@twilio-paste/icons', '@twilio-paste/core'], + ), ).toEqual([]); }); @@ -66,15 +66,15 @@ describe('getMissingPackagesFromChangesets()', () => { '@twilio-paste/icons', '@twilio-paste/core', '@twilio-paste/design-tokens', - ] - ) + ], + ), ).toEqual(['@twilio-paste/core', '@twilio-paste/design-tokens']); expect( getMissingPackagesFromChangesets( ['./.danger/__fixtures__/changeset/pretty-cameras-burn.md'], - ['@twilio-paste/avatar', '@twilio-paste/box', '@twilio-paste/icons', '@twilio-paste/core'] - ) + ['@twilio-paste/avatar', '@twilio-paste/box', '@twilio-paste/icons', '@twilio-paste/core'], + ), ).toEqual(['@twilio-paste/box', '@twilio-paste/icons', '@twilio-paste/core']); }); }); @@ -168,7 +168,7 @@ describe('missingChangesetCheck()', () => { }; missingChangesetCheck(mockPackList); expect(global.fail).toHaveBeenCalledWith( - 'Looks like @twilio-paste/icons was not included in a changeset - *edit an existing changeset or run `yarn changeset` to create one*' + 'Looks like @twilio-paste/icons was not included in a changeset - *edit an existing changeset or run `yarn changeset` to create one*', ); }); }); diff --git a/.danger/__tests__/missing-upgrade-guide-check.spec.ts b/.danger/__tests__/missing-upgrade-guide-check.spec.ts index 7690e72efa..fe5518bace 100644 --- a/.danger/__tests__/missing-upgrade-guide-check.spec.ts +++ b/.danger/__tests__/missing-upgrade-guide-check.spec.ts @@ -1,4 +1,4 @@ -import missingUpgradeGuideCheck, {UPGRADE_GUIDE_PAGE_FILE, FAIL_MESSAGE} from '../missing-upgrade-guide-check'; +import missingUpgradeGuideCheck, { UPGRADE_GUIDE_PAGE_FILE, FAIL_MESSAGE } from '../missing-upgrade-guide-check'; declare const global: any; describe('missingUpgradeGuideCheck()', () => { diff --git a/.danger/__tests__/pin-external-deps.spec.ts b/.danger/__tests__/pin-external-deps.spec.ts index 6cb93a0848..c161ca22f5 100644 --- a/.danger/__tests__/pin-external-deps.spec.ts +++ b/.danger/__tests__/pin-external-deps.spec.ts @@ -8,31 +8,31 @@ declare const global: any; describe('pin external dependencies check', () => { describe('getUnpinnedExternalDeps()', () => { it('should return the names of external deps that are not pinned', () => { - expect(getUnpinnedExternalDeps({lodash: '^4.17.21'})).toEqual(['lodash']); - expect(getUnpinnedExternalDeps({csstype: '3.0.11', lodash: '^4.17.21'})).toEqual(['lodash']); - expect(getUnpinnedExternalDeps({csstype: '^3.0.11', lodash: '^4.17.21'})).toEqual(['csstype', 'lodash']); - expect(getUnpinnedExternalDeps({csstype: '3.0.11'})).toEqual([]); + expect(getUnpinnedExternalDeps({ lodash: '^4.17.21' })).toEqual(['lodash']); + expect(getUnpinnedExternalDeps({ csstype: '3.0.11', lodash: '^4.17.21' })).toEqual(['lodash']); + expect(getUnpinnedExternalDeps({ csstype: '^3.0.11', lodash: '^4.17.21' })).toEqual(['csstype', 'lodash']); + expect(getUnpinnedExternalDeps({ csstype: '3.0.11' })).toEqual([]); }); }); describe('getUnPinnedExternalDepsFromPackageJSONFiles()', () => { it('should return an array of all the unpinned external deps across every provided package.json file', () => { expect( - getUnPinnedExternalDepsFromPackageJSONFiles(['./.danger/__fixtures__/mock_package/package.json']) + getUnPinnedExternalDepsFromPackageJSONFiles(['./.danger/__fixtures__/mock_package/package.json']), ).toMatchSnapshot(); expect( - getUnPinnedExternalDepsFromPackageJSONFiles(['./.danger/__fixtures__/mock_package_2/package.json']) + getUnPinnedExternalDepsFromPackageJSONFiles(['./.danger/__fixtures__/mock_package_2/package.json']), ).toMatchSnapshot(); expect( - getUnPinnedExternalDepsFromPackageJSONFiles(['./.danger/__fixtures__/mock_package_3/package.json']) + getUnPinnedExternalDepsFromPackageJSONFiles(['./.danger/__fixtures__/mock_package_3/package.json']), ).toMatchSnapshot(); expect( getUnPinnedExternalDepsFromPackageJSONFiles([ './.danger/__fixtures__/mock_package/package.json', './.danger/__fixtures__/mock_package_3/package.json', - ]) + ]), ).toMatchSnapshot(); expect( @@ -40,7 +40,7 @@ describe('pin external dependencies check', () => { './.danger/__fixtures__/mock_package/package.json', './.danger/__fixtures__/mock_package_2/package.json', './.danger/__fixtures__/mock_package_3/package.json', - ]) + ]), ).toMatchSnapshot(); }); }); diff --git a/.danger/__tests__/utils.spec.ts b/.danger/__tests__/utils.spec.ts index d618b5c48f..88e2c2094e 100644 --- a/.danger/__tests__/utils.spec.ts +++ b/.danger/__tests__/utils.spec.ts @@ -20,7 +20,7 @@ describe('danger utils', () => { private: false, location: '/Users/simon/dev/twilio/design-systems/paste/packages/paste-style-props', }, - ]) + ]), ).toEqual([ { name: '@twilio-paste/style-props', @@ -44,7 +44,7 @@ describe('danger utils', () => { private: false, location: '/Users/simon/dev/twilio/design-systems/paste/packages/paste-style-props', }, - ]) + ]), ).toEqual([ { name: '@twilio-paste/public', @@ -62,7 +62,7 @@ describe('danger utils', () => { private: true, location: '/Users/simon/dev/twilio/design-systems/paste/packages/paste-style-props', }, - ]) + ]), ).toEqual([]); }); }); @@ -70,14 +70,14 @@ describe('danger utils', () => { describe('getRepoPackagePath', () => { it('should return a file path after and including the packages/', () => { expect(getRepoPackagePath('/Users/simon/dev/twilio/design-systems/paste/packages/paste-style-props')).toEqual( - 'packages/paste-style-props' + 'packages/paste-style-props', ); expect(getRepoPackagePath('/dev/twilio/design-systems/paste/packages/paste-style-props')).toEqual( - 'packages/paste-style-props' + 'packages/paste-style-props', ); expect(getRepoPackagePath('paste/packages/paste-style-props')).toEqual('packages/paste-style-props'); expect(getRepoPackagePath('/design-systems/paste/packages/paste-style-props/foo/bar')).toEqual( - 'packages/paste-style-props/foo/bar' + 'packages/paste-style-props/foo/bar', ); expect(getRepoPackagePath('packages/paste-style-props/foo/')).toEqual('packages/paste-style-props/foo/'); }); @@ -99,7 +99,7 @@ describe('danger utils', () => { private: false, location: '/Users/simon/dev/twilio/design-systems/paste/packages/paste-style-props', }, - ]) + ]), ).toEqual(['packages/box', 'packages/paste-style-props']); }); }); @@ -115,15 +115,15 @@ describe('danger utils', () => { 'yarn.lock', '.changeset/pretty-cameras-burn.md', ], - ['packages/box', 'packages/paste-core/components/alert-dialog'] - ) + ['packages/box', 'packages/paste-core/components/alert-dialog'], + ), ).toEqual(['packages/box/package.json', 'packages/paste-core/components/alert-dialog/stories/index.stories.tsx']); expect( getPublicPackageFilesFromFiles( ['package.json', 'yarn.lock', '.changeset/pretty-cameras-burn.md'], - ['packages/box', 'packages/paste-core/components/alert-dialog'] - ) + ['packages/box', 'packages/paste-core/components/alert-dialog'], + ), ).toEqual([]); }); }); @@ -144,7 +144,7 @@ describe('danger utils', () => { private: false, location: '/Users/simon/dev/twilio/design-systems/paste/packages/paste-style-props', }, - ]) + ]), ).toEqual('@twilio-paste/private'); }); }); @@ -173,8 +173,8 @@ describe('danger utils', () => { private: false, location: '/Users/simon/dev/twilio/design-systems/paste/packages/paste-style-props', }, - ] - ) + ], + ), ).toEqual([]); }); @@ -201,8 +201,8 @@ describe('danger utils', () => { private: false, location: '/Users/simon/dev/twilio/design-systems/paste/packages/paste-style-props', }, - ] - ) + ], + ), ).toEqual(['@twilio-paste/style-props']); expect( @@ -228,8 +228,8 @@ describe('danger utils', () => { private: false, location: '/Users/simon/dev/twilio/design-systems/paste/packages/paste-style-props', }, - ] - ) + ], + ), ).toEqual(['@twilio-paste/style-props', '@twilio-paste/alert-dialog']); }); @@ -270,8 +270,8 @@ describe('danger utils', () => { private: false, location: '/Users/simon/dev/twilio/design-systems/paste/packages/paste-codemods', }, - ] - ) + ], + ), ).toEqual(['@twilio-paste/style-props', '@twilio-paste/design-tokens', '@twilio-paste/codemods']); }); }); @@ -285,7 +285,7 @@ describe('danger utils', () => { 'packages/paste-core/components/alert-dialog/stories/index.stories.tsx', 'yarn.lock', '.changeset/pretty-cameras-burn.md', - ]) + ]), ).toEqual(['.changeset/pretty-cameras-burn.md']); }); @@ -298,7 +298,7 @@ describe('danger utils', () => { 'yarn.lock', '.changeset/pretty-cameras-burn.md', '.changeset/pretty-silly-sheep.md', - ]) + ]), ).toEqual(['.changeset/pretty-cameras-burn.md', '.changeset/pretty-silly-sheep.md']); }); }); @@ -312,7 +312,7 @@ describe('danger utils', () => { 'packages/paste-core/components/alert-dialog/stories/index.stories.tsx', 'yarn.lock', '.changeset/pretty-cameras-burn.md', - ]) + ]), ).toEqual(['packages/paste-core/components/alert-dialog/package.json']); }); @@ -325,7 +325,7 @@ describe('danger utils', () => { 'packages/paste-core/components/alert-dialog/stories/index.stories.tsx', 'yarn.lock', '.changeset/pretty-cameras-burn.md', - ]) + ]), ).toEqual(['packages/paste-core/components/alert-dialog/package.json', 'packages/box/package.json']); }); }); diff --git a/.danger/__tests__/website-page-vrt-check.spec.ts b/.danger/__tests__/website-page-vrt-check.spec.ts index dd542faa9e..257c3c821e 100644 --- a/.danger/__tests__/website-page-vrt-check.spec.ts +++ b/.danger/__tests__/website-page-vrt-check.spec.ts @@ -1,4 +1,4 @@ -import websitePageVrtCheck, {FAIL_MESSAGE} from '../website-page-vrt-check'; +import websitePageVrtCheck, { FAIL_MESSAGE } from '../website-page-vrt-check'; declare const global: any; diff --git a/.danger/changesets-that-need-core-check.ts b/.danger/changesets-that-need-core-check.ts index 5f5d4f9ab0..e703b0b74c 100644 --- a/.danger/changesets-that-need-core-check.ts +++ b/.danger/changesets-that-need-core-check.ts @@ -1,8 +1,8 @@ import * as fs from 'fs'; -import {getChangesetsFromFiles} from './utils'; +import { getChangesetsFromFiles } from './utils'; // you kind of have to treat Danger plugins as global? // https://danger.systems/js/usage/extending-danger.html#writing-your-plugin -import {DangerDSLType} from 'danger/distribution/dsl/DangerDSL'; +import { DangerDSLType } from 'danger/distribution/dsl/DangerDSL'; declare const danger: DangerDSLType; export declare function fail(message: string): void; diff --git a/.danger/missing-changesets-check.ts b/.danger/missing-changesets-check.ts index 4529d57fbf..d03057c1fa 100644 --- a/.danger/missing-changesets-check.ts +++ b/.danger/missing-changesets-check.ts @@ -6,10 +6,10 @@ import { getPublicPackages, getUnpublishedPackageNames, } from './utils'; -import type {PackageShape} from '../tools/utils/getRepoPackages'; +import type { PackageShape } from '../tools/utils/getRepoPackages'; // you kind of have to treat Danger plugins as global? // https://danger.systems/js/usage/extending-danger.html#writing-your-plugin -import {DangerDSLType} from 'danger/distribution/dsl/DangerDSL'; +import { DangerDSLType } from 'danger/distribution/dsl/DangerDSL'; declare const danger: DangerDSLType; export declare function fail(message: string): void; @@ -51,7 +51,7 @@ export default (packageList: PackageShape[]) => { /** List of public packages that have changes in src files, that will need to be published */ const publicPackagesWithUnpublishedSourceChanges = getUnpublishedPackageNames( modifiedPublicPackageFiles, - publicPackages + publicPackages, ); /** Modified Changeset files */ @@ -63,7 +63,7 @@ export default (packageList: PackageShape[]) => { if (modifiedPublicPackageFiles.length > 0) { const missingPackages = getMissingPackagesFromChangesets( modifiedChangeSetFiles, - publicPackagesWithUnpublishedSourceChanges + publicPackagesWithUnpublishedSourceChanges, ); const idea = 'edit an existing changeset or run `yarn changeset` to create one'; if (missingPackages.length > 0) { diff --git a/.danger/missing-upgrade-guide-check.ts b/.danger/missing-upgrade-guide-check.ts index b5d500fd93..01892bcdc7 100644 --- a/.danger/missing-upgrade-guide-check.ts +++ b/.danger/missing-upgrade-guide-check.ts @@ -1,8 +1,8 @@ import * as fs from 'fs'; -import {getChangesetsFromFiles} from './utils'; +import { getChangesetsFromFiles } from './utils'; // you kind of have to treat Danger plugins as global? // https://danger.systems/js/usage/extending-danger.html#writing-your-plugin -import {DangerDSLType} from 'danger/distribution/dsl/DangerDSL'; +import { DangerDSLType } from 'danger/distribution/dsl/DangerDSL'; declare const danger: DangerDSLType; export declare function fail(message: string): void; diff --git a/.danger/package-json-check.ts b/.danger/package-json-check.ts index 8b1dff5b08..c6122676f0 100644 --- a/.danger/package-json-check.ts +++ b/.danger/package-json-check.ts @@ -1,7 +1,7 @@ -import {getPackJsonsFromFiles} from './utils'; +import { getPackJsonsFromFiles } from './utils'; // you kind of have to treat Danger plugins as global? // https://danger.systems/js/usage/extending-danger.html#writing-your-plugin -import {DangerDSLType} from 'danger/distribution/dsl/DangerDSL'; +import { DangerDSLType } from 'danger/distribution/dsl/DangerDSL'; declare const danger: DangerDSLType; export declare function warn(message: string): void; diff --git a/.danger/pin-external-deps.ts b/.danger/pin-external-deps.ts index 72717eb239..ec49181ccd 100644 --- a/.danger/pin-external-deps.ts +++ b/.danger/pin-external-deps.ts @@ -1,6 +1,6 @@ -import {DangerDSLType} from 'danger/distribution/dsl/DangerDSL'; +import { DangerDSLType } from 'danger/distribution/dsl/DangerDSL'; import fs from 'fs'; -import {getPackJsonsFromFiles} from './utils'; +import { getPackJsonsFromFiles } from './utils'; // you kind of have to treat Danger plugins as global? // https://danger.systems/js/usage/extending-danger.html#writing-your-plugin @@ -34,13 +34,13 @@ export const getUnpinnedExternalDeps = (deps: Record): string[] * @return {*} {string[]} */ export const getUnPinnedExternalDepsFromPackageJSONFiles = ( - pkgJSONFiles: string[] -): Array<{dep: string; name: string}> => { - const unPinnedExternalDeps: Array<{dep: string; name: string}> = []; + pkgJSONFiles: string[], +): Array<{ dep: string; name: string }> => { + const unPinnedExternalDeps: Array<{ dep: string; name: string }> = []; pkgJSONFiles.forEach((pkgJSON) => { const fileContent = fs.readFileSync(pkgJSON).toString(); - const {name, dependencies} = JSON.parse(fileContent); - getUnpinnedExternalDeps(dependencies).forEach((dep) => unPinnedExternalDeps.push({dep, name})); + const { name, dependencies } = JSON.parse(fileContent); + getUnpinnedExternalDeps(dependencies).forEach((dep) => unPinnedExternalDeps.push({ dep, name })); }); return unPinnedExternalDeps; }; @@ -60,11 +60,11 @@ export default () => { if (unpinnedExternalDeps.length > 0) { let locationString = ``; - unpinnedExternalDeps.forEach(({dep, name}) => { + unpinnedExternalDeps.forEach(({ dep, name }) => { locationString += `* ${name} - ${dep}\n`; }); fail( - `There are some package.json files in this PR that contain unpinned external package libraries. Please pin your external package libraries by removing the ^ from the beginning of the version number. See:\n\n${locationString}` + `There are some package.json files in this PR that contain unpinned external package libraries. Please pin your external package libraries by removing the ^ from the beginning of the version number. See:\n\n${locationString}`, ); } } diff --git a/.danger/utils.ts b/.danger/utils.ts index 41a31acf7e..9a59012793 100644 --- a/.danger/utils.ts +++ b/.danger/utils.ts @@ -1,4 +1,4 @@ -import type {PackageShape} from '../tools/utils/getRepoPackages'; +import type { PackageShape } from '../tools/utils/getRepoPackages'; /** * Returns a list of public packages by filtering out the private ones @@ -24,7 +24,7 @@ export const getRepoPackagePath = (location: string): string => * @return {*} {string[]} */ export const getPackagePaths = (packages: PackageShape[]): string[] => - packages.map(({location}) => getRepoPackagePath(location)); + packages.map(({ location }) => getRepoPackagePath(location)); /** * From a list of files, return only the files that are located in diff --git a/.danger/website-page-vrt-check.ts b/.danger/website-page-vrt-check.ts index 305e67a474..f0d66e03d7 100644 --- a/.danger/website-page-vrt-check.ts +++ b/.danger/website-page-vrt-check.ts @@ -1,6 +1,6 @@ // you kind of have to treat Danger plugins as global? // https://danger.systems/js/usage/extending-danger.html#writing-your-plugin -import {DangerDSLType} from 'danger/distribution/dsl/DangerDSL'; +import { DangerDSLType } from 'danger/distribution/dsl/DangerDSL'; declare const danger: DangerDSLType; export declare function fail(message: string): void; diff --git a/.eslint/resolver.js b/.eslint/resolver.js index bb0af9ceae..d252ae8583 100644 --- a/.eslint/resolver.js +++ b/.eslint/resolver.js @@ -47,16 +47,16 @@ const keyedPackages = cachedPackages.reduce((acc, currentPackage) => { */ exports.resolve = function customResolver(source, file, config) { if (source.includes('@twilio-paste/') && keyedPackages[source] != null) { - return {found: true, path: keyedPackages[source].location}; + return { found: true, path: keyedPackages[source].location }; } if (resolve.isCore(source)) { - return {found: true, path: null}; + return { found: true, path: null }; } try { - return {found: true, path: resolve.sync(source, opts(file, config))}; + return { found: true, path: resolve.sync(source, opts(file, config)) }; } catch (err) { - return {found: false}; + return { found: false }; } }; diff --git a/.jest/setupFilesAfterEnv.js b/.jest/setupFilesAfterEnv.js index e8ca6a24ae..3db0d59b85 100644 --- a/.jest/setupFilesAfterEnv.js +++ b/.jest/setupFilesAfterEnv.js @@ -1,3 +1,3 @@ -const {matchers: jestEmotionMatchers} = require('@emotion/jest'); +const { matchers: jestEmotionMatchers } = require('@emotion/jest'); require('@testing-library/jest-dom'); expect.extend(jestEmotionMatchers); diff --git a/.prettierrc.js b/.prettierrc.js index 0a31b363d4..451fae4591 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,7 +1,7 @@ module.exports = { printWidth: 120, trailingComma: 'es5', - bracketSpacing: false, + bracketSpacing: true, singleQuote: true, tabWidth: 2, overrides: [ diff --git a/.storybook/RenderPerformanceProfiler.tsx b/.storybook/RenderPerformanceProfiler.tsx index f9c0c95268..3baa3f805b 100644 --- a/.storybook/RenderPerformanceProfiler.tsx +++ b/.storybook/RenderPerformanceProfiler.tsx @@ -1,7 +1,7 @@ /// import React from 'react'; import isChromatic from 'chromatic'; -import {version} from '../packages/paste-core/core-bundle/package.json'; +import { version } from '../packages/paste-core/core-bundle/package.json'; const trackRenderPerformance = (data) => { const commitSha = import.meta.env.STORYBOOK_GITHUB_SHA ? import.meta.env.STORYBOOK_GITHUB_SHA : 'localdev'; @@ -11,13 +11,13 @@ const trackRenderPerformance = (data) => { keepalive: true, mode: 'cors', // mix in the current git commit SHA, along with core bundle version number to profiler data. SHA is set via github actions when run in a PR - body: JSON.stringify({...data, commitSha, coreVersionNumber: version}), + body: JSON.stringify({ ...data, commitSha, coreVersionNumber: version }), }); }; -const IdentityComponent = ({children}) => <>{children}; +const IdentityComponent = ({ children }) => <>{children}; -const Profiler = ({id, kind, view, children}) => { +const Profiler = ({ id, kind, view, children }) => { return ( { @@ -8,10 +8,10 @@ addons.register('paste-google-analytics', (api) => { ReactGA.initialize('G-1DZ9RS3QNT'); api.on(STORY_RENDERED, () => { - const {path} = api.getUrlState(); + const { path } = api.getUrlState(); ReactGA.pageview(path); }); - api.on(STORY_ERRORED, ({description}) => { + api.on(STORY_ERRORED, ({ description }) => { ReactGA.exception({ description, fatal: true, diff --git a/.storybook/main.ts b/.storybook/main.ts index 3c6ff84a1a..28c1dc718f 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,5 +1,5 @@ -import type {StorybookConfig} from '@storybook/react-vite'; -import {mergeConfig} from 'vite'; +import type { StorybookConfig } from '@storybook/react-vite'; +import { mergeConfig } from 'vite'; import turbosnap from 'vite-plugin-turbosnap'; import path from 'path'; const config: StorybookConfig = { @@ -24,7 +24,7 @@ const config: StorybookConfig = { // enable type checking check: true, }, - async viteFinal(config, {configType}) { + async viteFinal(config, { configType }) { const isTest = process.env.NODE_ENV === 'test'; return mergeConfig(config, { plugins: @@ -44,7 +44,7 @@ const config: StorybookConfig = { // Avoid initial render issues for code blocks in prod build 'react-syntax-highlighter/dist/esm': path.resolve( __dirname, - '../node_modules/react-syntax-highlighter/dist/cjs' + '../node_modules/react-syntax-highlighter/dist/cjs', ), 'react-syntax-highlighter': path.resolve(__dirname, '../node_modules/react-syntax-highlighter/dist/cjs'), }, diff --git a/.storybook/next.tsx b/.storybook/next.tsx index 018202745d..a75ee44283 100644 --- a/.storybook/next.tsx +++ b/.storybook/next.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -const Link: React.FC = ({children, ...props}) => {children}; +const Link: React.FC = ({ children, ...props }) => {children}; export default Link; diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 207f9c2eca..d9c02eb4d0 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,13 +1,13 @@ import React from 'react'; -import {INITIAL_VIEWPORTS} from '@storybook/addon-viewport'; +import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; import isChromatic from 'chromatic'; -import {StylingGlobals} from '@twilio-paste/styling-library'; -import {Theme} from '@twilio-paste/theme'; -import {Box} from '@twilio-paste/box'; -import {Stack} from '@twilio-paste/stack'; -import {Grid, Column} from '@twilio-paste/grid'; -import {RenderPerformanceProfiler} from './RenderPerformanceProfiler'; -import {SITE_BREAKPOINTS} from '../packages/paste-website/src/constants'; +import { StylingGlobals } from '@twilio-paste/styling-library'; +import { Theme } from '@twilio-paste/theme'; +import { Box } from '@twilio-paste/box'; +import { Stack } from '@twilio-paste/stack'; +import { Grid, Column } from '@twilio-paste/grid'; +import { RenderPerformanceProfiler } from './RenderPerformanceProfiler'; +import { SITE_BREAKPOINTS } from '../packages/paste-website/src/constants'; // disable animations in test environments const isTestEnvironment = isChromatic() || process.env.NODE_ENV === 'test'; @@ -32,9 +32,9 @@ export const globalTypes = { toolbar: { icon: 'component', items: [ - {value: 'default', title: 'default'}, - {value: 'side-by-side', title: 'side by side'}, - {value: 'stacked', title: 'stacked'}, + { value: 'default', title: 'default' }, + { value: 'side-by-side', title: 'side by side' }, + { value: 'stacked', title: 'stacked' }, ], }, }, @@ -45,8 +45,8 @@ export const globalTypes = { toolbar: { icon: 'globe', items: [ - {value: 'en', right: 'LTR', title: 'English'}, - {value: 'rtl', right: 'RTL', title: 'English (RTL)'}, + { value: 'en', right: 'LTR', title: 'English' }, + { value: 'rtl', right: 'RTL', title: 'English (RTL)' }, ], }, }, @@ -57,8 +57,8 @@ export const globalTypes = { toolbar: { icon: 'mobile', items: [ - {value: null, title: 'Default Breakpoints'}, - {value: SITE_BREAKPOINTS, title: 'Docs Site Breakpoints'}, + { value: null, title: 'Default Breakpoints' }, + { value: SITE_BREAKPOINTS, title: 'Docs Site Breakpoints' }, ], }, }, @@ -257,10 +257,10 @@ export const decorators = [ export const parameters = { isTestEnvironment, - actions: {argTypesRegex: '^on[A-Z].*'}, + actions: { argTypesRegex: '^on[A-Z].*' }, viewport: { viewports: INITIAL_VIEWPORTS, }, // Notifies Chromatic to pause the animations when they finish for all stories. - chromatic: {pauseAnimationAtEnd: true}, + chromatic: { pauseAnimationAtEnd: true }, }; diff --git a/.storybook/test-runner.js b/.storybook/test-runner.js index 9c958ad1dc..ea29db67af 100644 --- a/.storybook/test-runner.js +++ b/.storybook/test-runner.js @@ -1,5 +1,5 @@ -const {getStoryContext} = require('@storybook/test-runner'); -const {injectAxe, configureAxe, checkA11y} = require('axe-playwright'); +const { getStoryContext } = require('@storybook/test-runner'); +const { injectAxe, configureAxe, checkA11y } = require('axe-playwright'); const a11yConfig = { async preRender(page, context) { diff --git a/apps/vs-code-intellisense/src/extension.ts b/apps/vs-code-intellisense/src/extension.ts index b8aa5d72af..bacc6c5011 100644 --- a/apps/vs-code-intellisense/src/extension.ts +++ b/apps/vs-code-intellisense/src/extension.ts @@ -4,9 +4,9 @@ import * as vscode from 'vscode'; import camelCase from 'lodash.camelcase'; import kebabCase from 'lodash.kebabcase'; -import {pasteTokenAttributes} from './tokens'; -import {PasteToken} from './types'; -import {getColorPreview, getThemeSetting, getThemeTokens, remToPx, isColorCategory} from './utils'; +import { pasteTokenAttributes } from './tokens'; +import { PasteToken } from './types'; +import { getColorPreview, getThemeSetting, getThemeTokens, remToPx, isColorCategory } from './utils'; const DIVIDER = `___\n`; @@ -37,7 +37,7 @@ export function getAttributeName(linePrefix: string) { } export function getCompletionItem(token: PasteToken) { - const {name, value, type} = token; + const { name, value, type } = token; const label = camelCase(name); if (type === 'color') { return { @@ -80,7 +80,7 @@ export function activate(context: vscode.ExtensionContext) { const hoverMessage = new vscode.MarkdownString(); - const {name, value, comment, category} = foundPasteToken; + const { name, value, comment, category } = foundPasteToken; // Run any formatters/converters on value before appending const formattedValue = remToPx(value); @@ -100,7 +100,7 @@ export function activate(context: vscode.ExtensionContext) { return new vscode.Hover(hoverMessage); }, - } + }, ); const completionProvider = vscode.languages.registerCompletionItemProvider( @@ -113,10 +113,10 @@ export function activate(context: vscode.ExtensionContext) { const items = getAttributeTokens(attributeName); - return {isIncomplete: false, items}; + return { isIncomplete: false, items }; }, }, - '"' // triggered when we type '"' + '"', // triggered when we type '"' ); context.subscriptions.push(hoverProvider); diff --git a/apps/vs-code-intellisense/src/test/runTest.ts b/apps/vs-code-intellisense/src/test/runTest.ts index 78330f7c30..8462bf0f8b 100644 --- a/apps/vs-code-intellisense/src/test/runTest.ts +++ b/apps/vs-code-intellisense/src/test/runTest.ts @@ -1,5 +1,5 @@ import * as path from 'path'; -import {runTests} from '@vscode/test-electron'; +import { runTests } from '@vscode/test-electron'; async function main() { try { @@ -12,7 +12,7 @@ async function main() { const extensionTestsPath = path.resolve(__dirname, './suite/index'); // Download VS Code, unzip it and run the integration test - await runTests({extensionDevelopmentPath, extensionTestsPath}); + await runTests({ extensionDevelopmentPath, extensionTestsPath }); } catch (err) { console.error('Failed to run tests', err); process.exit(1); diff --git a/apps/vs-code-intellisense/src/test/suite/extension.test.ts b/apps/vs-code-intellisense/src/test/suite/extension.test.ts index 5cc36cff32..bbad03367c 100644 --- a/apps/vs-code-intellisense/src/test/suite/extension.test.ts +++ b/apps/vs-code-intellisense/src/test/suite/extension.test.ts @@ -141,7 +141,7 @@ suite('Extension Test Suite', () => { description: '0', label: 'borderRadius0', }, - vscode.CompletionItemKind.Constant + vscode.CompletionItemKind.Constant, ); assert.deepStrictEqual(result, expected); }); diff --git a/apps/vs-code-intellisense/src/test/suite/index.ts b/apps/vs-code-intellisense/src/test/suite/index.ts index 6fce3bc95b..5bdb89eacb 100644 --- a/apps/vs-code-intellisense/src/test/suite/index.ts +++ b/apps/vs-code-intellisense/src/test/suite/index.ts @@ -12,7 +12,7 @@ export function run(): Promise { const testsRoot = path.resolve(__dirname, '..'); return new Promise((c, e) => { - glob('**/**.test.js', {cwd: testsRoot}, (err: any, files: string[]) => { + glob('**/**.test.js', { cwd: testsRoot }, (err: any, files: string[]) => { if (err) { return e(err); } diff --git a/apps/vs-code-intellisense/src/test/suite/utils/get-theme-tokens.test.ts b/apps/vs-code-intellisense/src/test/suite/utils/get-theme-tokens.test.ts index 78607f0b06..b504b6041f 100644 --- a/apps/vs-code-intellisense/src/test/suite/utils/get-theme-tokens.test.ts +++ b/apps/vs-code-intellisense/src/test/suite/utils/get-theme-tokens.test.ts @@ -1,6 +1,6 @@ import assert from 'assert'; -import {getThemeTokens} from '../../../utils'; +import { getThemeTokens } from '../../../utils'; import { darkThemeTokens, defaultThemeTokens, @@ -9,7 +9,7 @@ import { twilioDarkThemeTokens, twilioThemeTokens, } from '../../../tokens'; -import {Theme} from '../../../types'; +import { Theme } from '../../../types'; suite('getThemeTokens', () => { ['Default', 'default', undefined, null, 'foo'].forEach((theme) => { diff --git a/apps/vs-code-intellisense/src/test/suite/utils/is-color-category.test.ts b/apps/vs-code-intellisense/src/test/suite/utils/is-color-category.test.ts index 74bd805264..bce000fad2 100644 --- a/apps/vs-code-intellisense/src/test/suite/utils/is-color-category.test.ts +++ b/apps/vs-code-intellisense/src/test/suite/utils/is-color-category.test.ts @@ -1,7 +1,7 @@ import assert from 'assert'; -import {isColorCategory} from '../../../utils/is-color-category'; -import {TokenCategory} from '../../../types'; +import { isColorCategory } from '../../../utils/is-color-category'; +import { TokenCategory } from '../../../types'; const COLOR_CATEGORIES: TokenCategory[] = ['border-color', 'background-color', 'color', 'text-color']; diff --git a/apps/vs-code-intellisense/src/test/suite/utils/rem-to-px.test.ts b/apps/vs-code-intellisense/src/test/suite/utils/rem-to-px.test.ts index f84b7bb568..95f8d62699 100644 --- a/apps/vs-code-intellisense/src/test/suite/utils/rem-to-px.test.ts +++ b/apps/vs-code-intellisense/src/test/suite/utils/rem-to-px.test.ts @@ -1,6 +1,6 @@ import assert from 'assert'; -import {remToPx} from '../../../utils/rem-to-px'; +import { remToPx } from '../../../utils/rem-to-px'; suite('remToPx', () => { test("when 'rem' is not found in value, returns unmodified string", () => { diff --git a/apps/vs-code-intellisense/src/tokens/dark-theme-tokens.ts b/apps/vs-code-intellisense/src/tokens/dark-theme-tokens.ts index 2e15c7392c..97c4691883 100644 --- a/apps/vs-code-intellisense/src/tokens/dark-theme-tokens.ts +++ b/apps/vs-code-intellisense/src/tokens/dark-theme-tokens.ts @@ -1 +1 @@ -export {props as darkThemeTokens} from '@twilio-paste/design-tokens/dist/themes/dark/tokens.raw.json'; +export { props as darkThemeTokens } from '@twilio-paste/design-tokens/dist/themes/dark/tokens.raw.json'; diff --git a/apps/vs-code-intellisense/src/tokens/default-theme-tokens.ts b/apps/vs-code-intellisense/src/tokens/default-theme-tokens.ts index 3353e12539..2656ffc1f0 100644 --- a/apps/vs-code-intellisense/src/tokens/default-theme-tokens.ts +++ b/apps/vs-code-intellisense/src/tokens/default-theme-tokens.ts @@ -1 +1 @@ -export {props as defaultThemeTokens} from '@twilio-paste/design-tokens/dist/tokens.raw.json'; +export { props as defaultThemeTokens } from '@twilio-paste/design-tokens/dist/tokens.raw.json'; diff --git a/apps/vs-code-intellisense/src/tokens/evergreen-theme-tokens.ts b/apps/vs-code-intellisense/src/tokens/evergreen-theme-tokens.ts index cc3d944b13..3978c07cd7 100644 --- a/apps/vs-code-intellisense/src/tokens/evergreen-theme-tokens.ts +++ b/apps/vs-code-intellisense/src/tokens/evergreen-theme-tokens.ts @@ -1 +1 @@ -export {props as evergreenThemeTokens} from '@twilio-paste/design-tokens/dist/themes/evergreen/tokens.raw.json'; +export { props as evergreenThemeTokens } from '@twilio-paste/design-tokens/dist/themes/evergreen/tokens.raw.json'; diff --git a/apps/vs-code-intellisense/src/tokens/paste-token-attributes.ts b/apps/vs-code-intellisense/src/tokens/paste-token-attributes.ts index 7bcaf3ec59..235bcf4278 100644 --- a/apps/vs-code-intellisense/src/tokens/paste-token-attributes.ts +++ b/apps/vs-code-intellisense/src/tokens/paste-token-attributes.ts @@ -1,4 +1,4 @@ -import {TokenCategory} from '../types'; +import { TokenCategory } from '../types'; export const pasteTokenAttributes: Record = { margin: 'spacing', diff --git a/apps/vs-code-intellisense/src/tokens/sendgrid-theme-tokens.ts b/apps/vs-code-intellisense/src/tokens/sendgrid-theme-tokens.ts index c2bcee8f9c..05b53b8140 100644 --- a/apps/vs-code-intellisense/src/tokens/sendgrid-theme-tokens.ts +++ b/apps/vs-code-intellisense/src/tokens/sendgrid-theme-tokens.ts @@ -1 +1 @@ -export {props as sendGridThemeTokens} from '@twilio-paste/design-tokens/dist/themes/sendgrid/tokens.raw.json'; +export { props as sendGridThemeTokens } from '@twilio-paste/design-tokens/dist/themes/sendgrid/tokens.raw.json'; diff --git a/apps/vs-code-intellisense/src/tokens/twilio-dark-theme-tokens.ts b/apps/vs-code-intellisense/src/tokens/twilio-dark-theme-tokens.ts index 9a1d90ca39..90b65f6a0c 100644 --- a/apps/vs-code-intellisense/src/tokens/twilio-dark-theme-tokens.ts +++ b/apps/vs-code-intellisense/src/tokens/twilio-dark-theme-tokens.ts @@ -1 +1 @@ -export {props as twilioDarkThemeTokens} from '@twilio-paste/design-tokens/dist/themes/twilio-dark/tokens.raw.json'; +export { props as twilioDarkThemeTokens } from '@twilio-paste/design-tokens/dist/themes/twilio-dark/tokens.raw.json'; diff --git a/apps/vs-code-intellisense/src/tokens/twilio-theme-tokens.ts b/apps/vs-code-intellisense/src/tokens/twilio-theme-tokens.ts index bf49d2231a..8601658a48 100644 --- a/apps/vs-code-intellisense/src/tokens/twilio-theme-tokens.ts +++ b/apps/vs-code-intellisense/src/tokens/twilio-theme-tokens.ts @@ -1 +1 @@ -export {props as twilioThemeTokens} from '@twilio-paste/design-tokens/dist/themes/twilio/tokens.raw.json'; +export { props as twilioThemeTokens } from '@twilio-paste/design-tokens/dist/themes/twilio/tokens.raw.json'; diff --git a/apps/vs-code-intellisense/src/types/paste-token.ts b/apps/vs-code-intellisense/src/types/paste-token.ts index f22cdb745a..a7fd1751b1 100644 --- a/apps/vs-code-intellisense/src/types/paste-token.ts +++ b/apps/vs-code-intellisense/src/types/paste-token.ts @@ -1,5 +1,5 @@ -import {TokenCategory} from './token-category'; -import {TokenType} from './token-type'; +import { TokenCategory } from './token-category'; +import { TokenType } from './token-type'; export interface PasteToken { name: string; diff --git a/apps/vs-code-intellisense/src/types/token-map.ts b/apps/vs-code-intellisense/src/types/token-map.ts index c174604502..b4832d5636 100644 --- a/apps/vs-code-intellisense/src/types/token-map.ts +++ b/apps/vs-code-intellisense/src/types/token-map.ts @@ -1,3 +1,3 @@ -import {PasteToken} from './paste-token'; +import { PasteToken } from './paste-token'; export type TokenMap = Record; diff --git a/apps/vs-code-intellisense/src/utils/get-theme-setting.ts b/apps/vs-code-intellisense/src/utils/get-theme-setting.ts index ef919ed11f..1277014862 100644 --- a/apps/vs-code-intellisense/src/utils/get-theme-setting.ts +++ b/apps/vs-code-intellisense/src/utils/get-theme-setting.ts @@ -1,6 +1,6 @@ import * as vscode from 'vscode'; -import {Theme} from '../types'; +import { Theme } from '../types'; export const getThemeSetting = (): Theme => (vscode.workspace.getConfiguration('vs-code-intellisense').get('theme') as Theme) ?? 'Default'; diff --git a/apps/vs-code-intellisense/src/utils/get-theme-tokens.ts b/apps/vs-code-intellisense/src/utils/get-theme-tokens.ts index ac24dd4a9f..421090286d 100644 --- a/apps/vs-code-intellisense/src/utils/get-theme-tokens.ts +++ b/apps/vs-code-intellisense/src/utils/get-theme-tokens.ts @@ -6,7 +6,7 @@ import { twilioDarkThemeTokens, twilioThemeTokens, } from '../tokens'; -import {Theme, TokenMap} from '../types'; +import { Theme, TokenMap } from '../types'; export const getThemeTokens = (theme?: Theme): TokenMap => { switch (theme) { diff --git a/apps/vs-code-intellisense/src/utils/is-color-category.ts b/apps/vs-code-intellisense/src/utils/is-color-category.ts index 317749d8cb..096dc4e594 100644 --- a/apps/vs-code-intellisense/src/utils/is-color-category.ts +++ b/apps/vs-code-intellisense/src/utils/is-color-category.ts @@ -1,4 +1,4 @@ -import {TokenCategory} from '../types'; +import { TokenCategory } from '../types'; export const isColorCategory = (category: TokenCategory): boolean => category === 'background-color' || category === 'border-color' || category === 'color' || category === 'text-color'; diff --git a/babel.config.js b/babel.config.js index db42e523a8..67fc314351 100644 --- a/babel.config.js +++ b/babel.config.js @@ -26,9 +26,9 @@ const getPresets = (isDev) => [ const BASE_PLUGINS = [ 'macros', - ['@babel/proposal-class-properties', {loose: true}], + ['@babel/proposal-class-properties', { loose: true }], '@babel/proposal-object-rest-spread', - ['@babel/proposal-private-property-in-object', {loose: true}], + ['@babel/proposal-private-property-in-object', { loose: true }], '@babel/plugin-proposal-optional-chaining', ]; diff --git a/cypress.config.ts b/cypress.config.ts index 97f56103c7..dab1728ba2 100644 --- a/cypress.config.ts +++ b/cypress.config.ts @@ -1,4 +1,4 @@ -import {defineConfig} from 'cypress'; +import { defineConfig } from 'cypress'; // eslint-disable-next-line import/no-default-export export default defineConfig({ diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json index da18d9352a..02e4254378 100644 --- a/cypress/fixtures/example.json +++ b/cypress/fixtures/example.json @@ -2,4 +2,4 @@ "name": "Using fixtures to represent data", "email": "hello@cypress.io", "body": "Fixtures are a great way to mock data for responses to routes" -} \ No newline at end of file +} diff --git a/cypress/integration/landing-page/index.spec.ts b/cypress/integration/landing-page/index.spec.ts index ee6ed3a6ef..473765d53f 100644 --- a/cypress/integration/landing-page/index.spec.ts +++ b/cypress/integration/landing-page/index.spec.ts @@ -5,7 +5,7 @@ describe('Landing Page', function () { describe('Visual regression tests', () => { it('Basic VRT', () => { - cy.visualRegressionTestUrl({url: '/', testName: `${testSuiteName}-landing-page-check`}); + cy.visualRegressionTestUrl({ url: '/', testName: `${testSuiteName}-landing-page-check` }); }); }); }); diff --git a/cypress/integration/link-checker/index.spec.ts b/cypress/integration/link-checker/index.spec.ts index ab2b5069fc..e702c9e291 100644 --- a/cypress/integration/link-checker/index.spec.ts +++ b/cypress/integration/link-checker/index.spec.ts @@ -45,7 +45,7 @@ describe('Broken link checker', () => { // so it omits the need to wait for the JS to execute. // This makes this crawler much more performant, but it only // works because we SSR our website. - cy.request({url: pagePath}) + cy.request({ url: pagePath }) .its('body') .then((html) => { // Cyprus has a jQuery like syntax (called Cheerio) to traverse diff --git a/cypress/integration/site-search/index.spec.ts b/cypress/integration/site-search/index.spec.ts index 200178ea57..c33a4fd050 100644 --- a/cypress/integration/site-search/index.spec.ts +++ b/cypress/integration/site-search/index.spec.ts @@ -5,7 +5,7 @@ describe('Docs website search', () => { }); beforeEach(() => { - cy.intercept({url: 'https://**.algolia.net/**', method: 'POST'}).as('searchRequest'); + cy.intercept({ url: 'https://**.algolia.net/**', method: 'POST' }).as('searchRequest'); }); beforeEach(() => { @@ -13,7 +13,7 @@ describe('Docs website search', () => { }); it('should handle a search string', () => { - cy.get('@searchButtonEl').scrollIntoView().should('be.visible').click({force: true}); + cy.get('@searchButtonEl').scrollIntoView().should('be.visible').click({ force: true }); cy.get('.DocSearch-Input').should('be.visible').should('be.focused').type('checkbox'); cy.wait('@searchRequest'); cy.get('.DocSearch-Hits').should('have.length.above', 0); diff --git a/cypress/integration/sitemap-vrt/batch2.spec.ts b/cypress/integration/sitemap-vrt/batch2.spec.ts index 0cdff81cbe..dc521deb4d 100644 --- a/cypress/integration/sitemap-vrt/batch2.spec.ts +++ b/cypress/integration/sitemap-vrt/batch2.spec.ts @@ -1,9 +1,9 @@ -import {SITEMAP_CHUNKS} from './constants'; +import { SITEMAP_CHUNKS } from './constants'; describe('Full Site VRT Batch 2', function () { SITEMAP_CHUNKS[1].forEach((url) => { it(`should vrt ${url}`, () => { - cy.visualRegressionTestUrl({url, testName: url}); + cy.visualRegressionTestUrl({ url, testName: url }); }); }); }); diff --git a/cypress/integration/sitemap-vrt/batch3.spec.ts b/cypress/integration/sitemap-vrt/batch3.spec.ts index 607164f874..211cf733b8 100644 --- a/cypress/integration/sitemap-vrt/batch3.spec.ts +++ b/cypress/integration/sitemap-vrt/batch3.spec.ts @@ -1,9 +1,9 @@ -import {SITEMAP_CHUNKS} from './constants'; +import { SITEMAP_CHUNKS } from './constants'; describe('Full Site VRT Batch 3', function () { SITEMAP_CHUNKS[2].forEach((url) => { it(`should vrt ${url}`, () => { - cy.visualRegressionTestUrl({url, testName: url}); + cy.visualRegressionTestUrl({ url, testName: url }); }); }); }); diff --git a/cypress/integration/sitemap-vrt/batch4.spec.ts b/cypress/integration/sitemap-vrt/batch4.spec.ts index 320acc2d44..252bdbdf98 100644 --- a/cypress/integration/sitemap-vrt/batch4.spec.ts +++ b/cypress/integration/sitemap-vrt/batch4.spec.ts @@ -1,9 +1,9 @@ -import {SITEMAP_CHUNKS} from './constants'; +import { SITEMAP_CHUNKS } from './constants'; describe('Full Site VRT Batch 4', function () { SITEMAP_CHUNKS[3].forEach((url) => { it(`should vrt ${url}`, () => { - cy.visualRegressionTestUrl({url, testName: url}); + cy.visualRegressionTestUrl({ url, testName: url }); }); }); }); diff --git a/cypress/integration/sitemap-vrt/batch5.spec.ts b/cypress/integration/sitemap-vrt/batch5.spec.ts index 9896651ca7..c2c645675d 100644 --- a/cypress/integration/sitemap-vrt/batch5.spec.ts +++ b/cypress/integration/sitemap-vrt/batch5.spec.ts @@ -1,9 +1,9 @@ -import {SITEMAP_CHUNKS} from './constants'; +import { SITEMAP_CHUNKS } from './constants'; describe('Full Site VRT Batch 5', function () { SITEMAP_CHUNKS[4].forEach((url) => { it(`should vrt ${url}`, () => { - cy.visualRegressionTestUrl({url, testName: url}); + cy.visualRegressionTestUrl({ url, testName: url }); }); }); }); diff --git a/cypress/integration/sitemap-vrt/constants.ts b/cypress/integration/sitemap-vrt/constants.ts index 6b2d90d032..2842f5afe8 100644 --- a/cypress/integration/sitemap-vrt/constants.ts +++ b/cypress/integration/sitemap-vrt/constants.ts @@ -183,4 +183,4 @@ for (var i = 0, len = SITEMAP.length; i < len; i += CHUNK_SIZE) { SITEMAP_CHUNKS.push(SITEMAP.slice(i, i + CHUNK_SIZE)); } -export {SITEMAP_CHUNKS}; +export { SITEMAP_CHUNKS }; diff --git a/cypress/integration/sitemap-vrt/index.spec.ts b/cypress/integration/sitemap-vrt/index.spec.ts index 5c7adc5064..b644df8e33 100644 --- a/cypress/integration/sitemap-vrt/index.spec.ts +++ b/cypress/integration/sitemap-vrt/index.spec.ts @@ -1,9 +1,9 @@ -import {SITEMAP_CHUNKS} from './constants'; +import { SITEMAP_CHUNKS } from './constants'; describe('Full Site VRT Batch 1', function () { SITEMAP_CHUNKS[0].forEach((url) => { it(`should vrt ${url}`, () => { - cy.visualRegressionTestUrl({url, testName: url}); + cy.visualRegressionTestUrl({ url, testName: url }); }); }); }); diff --git a/cypress/integration/token-list/index.spec.ts b/cypress/integration/token-list/index.spec.ts index d0f090fdf9..88fb839cf7 100644 --- a/cypress/integration/token-list/index.spec.ts +++ b/cypress/integration/token-list/index.spec.ts @@ -9,7 +9,7 @@ describe('Token list filter with no existing search params', function () { describe('Visual regression tests', () => { it('Basic VRT', () => { - cy.visualRegressionTestUrl({url: '/tokens/list', testName: `${testSuiteName}-basic-page-check`}); + cy.visualRegressionTestUrl({ url: '/tokens/list', testName: `${testSuiteName}-basic-page-check` }); }); }); }); @@ -47,12 +47,12 @@ describe('Token list filter format control and theme control', function () { cy.get('[data-cy="theme-control"]').select('dark').should('have.value', 'dark'); cy.get('[data-cy="tokens-table-container"] li:first dd [data-paste-element="TEXT"]:first').should( 'include.text', - 'rgb(18, 28, 45)' + 'rgb(18, 28, 45)', ); cy.get('[data-cy="theme-control"]').select('default').should('have.value', 'default'); cy.get('[data-cy="tokens-table-container"] li:first dd [data-paste-element="TEXT"]:first').should( 'include.text', - 'rgb(244, 244, 246)' + 'rgb(244, 244, 246)', ); }); diff --git a/cypress/support/commands/parent-commands.ts b/cypress/support/commands/parent-commands.ts index d160d2acd7..f4b73dccd0 100644 --- a/cypress/support/commands/parent-commands.ts +++ b/cypress/support/commands/parent-commands.ts @@ -1,4 +1,4 @@ -import {DEFAULT_VRT_OPTIONS, vrtIsEnabled} from '../utils/vrt'; +import { DEFAULT_VRT_OPTIONS, vrtIsEnabled } from '../utils/vrt'; /** * @file Custom parent commands @@ -12,12 +12,12 @@ Cypress.Commands.add('getDocsPageContentArea', () => cy.get('#paste-docs-content Cypress.Commands.add( 'pageHeaderShouldBeVisible', - ({headerText, shouldHaveGithubLink, shouldHaveStorybook, shouldHaveOpenGraph}) => { + ({ headerText, shouldHaveGithubLink, shouldHaveStorybook, shouldHaveOpenGraph }) => { cy.contains('h1', headerText).should('be.visible'); shouldHaveGithubLink && cy.contains('Github').should('be.visible'); shouldHaveStorybook && cy.contains('Storybook').should('be.visible'); shouldHaveOpenGraph && cy.get('meta[property="og:image"]').should('exist'); - } + }, ); Cypress.Commands.add('overviewTableRendersCorrectly', () => { @@ -46,14 +46,17 @@ Cypress.Commands.add('checkInPageNavigationLinks', () => { cy.get('@contentArea') .find( - '[data-cy="anchored-heading-h2"]:not(#component-changelog a),[data-cy="anchored-heading-h3"]:not(#component-changelog a)' + '[data-cy="anchored-heading-h2"]:not(#component-changelog a),[data-cy="anchored-heading-h3"]:not(#component-changelog a)', ) .as('anchoredHeadings'); cy.get('@pageAsideAnchors').then((anchors) => { cy.get('@anchoredHeadings').each((anchor, idx) => { cy.wrap(anchor).should('have.attr', 'href').and('include', '#'); - cy.wrap(anchors[idx]).should('have.attr', 'href').and('include', '#').and('eql', anchor.attr('href')); + cy.wrap(anchors[idx]) + .should('have.attr', 'href') + .and('include', '#') + .and('eql', anchor.attr('href')); }); }); }); @@ -92,11 +95,13 @@ Cypress.Commands.add('getInFixedContainer', (selector) => { .get('@target') .invoke('innerHeight') .then((height) => { - return cy.get('@target').scrollIntoView({offset: {top: (height as number) / 2, left: 0}, ensureScrollable: true}); + return cy + .get('@target') + .scrollIntoView({ offset: { top: (height as number) / 2, left: 0 }, ensureScrollable: true }); }); }); -Cypress.Commands.add('visualRegressionTestUrl', ({url, testName}) => { +Cypress.Commands.add('visualRegressionTestUrl', ({ url, testName }) => { cy.visit(url); cy.wait(2500); cy.log('[VRT]: checking if VRT is enabled'); diff --git a/dangerfile.ts b/dangerfile.ts index d0ca61b941..cc662b5778 100644 --- a/dangerfile.ts +++ b/dangerfile.ts @@ -5,8 +5,8 @@ import changesetsThatNeedCoreCheck from './.danger/changesets-that-need-core-che import missingUpgradeGuide from './.danger/missing-upgrade-guide-check'; import websitePageVrtCheck from './.danger/website-page-vrt-check'; import pinExternalDeps from './.danger/pin-external-deps'; -import {getRepoPackages} from './tools/utils/getRepoPackages'; -import type {PackageShape} from './tools/utils/getRepoPackages'; +import { getRepoPackages } from './tools/utils/getRepoPackages'; +import type { PackageShape } from './tools/utils/getRepoPackages'; // eslint-disable-next-line import/no-default-export export default async (): Promise => { diff --git a/packages/paste-codemods/tools/__tests__/tools.spec.ts b/packages/paste-codemods/tools/__tests__/tools.spec.ts index 9d5e69ac79..6cea4da19c 100644 --- a/packages/paste-codemods/tools/__tests__/tools.spec.ts +++ b/packages/paste-codemods/tools/__tests__/tools.spec.ts @@ -1,5 +1,5 @@ -import type {PackageShape} from '../../../../tools/utils/getRepoPackages'; -import {generatePackageExportsMap} from '../generatePackageExportsMap'; +import type { PackageShape } from '../../../../tools/utils/getRepoPackages'; +import { generatePackageExportsMap } from '../generatePackageExportsMap'; // This is a simplified mock of paste packages const mockGetPastePackages = async (): Promise => [ diff --git a/packages/paste-codemods/tools/create-package-mappings.ts b/packages/paste-codemods/tools/create-package-mappings.ts index b71f1669b2..d00d8d2089 100644 --- a/packages/paste-codemods/tools/create-package-mappings.ts +++ b/packages/paste-codemods/tools/create-package-mappings.ts @@ -1,7 +1,7 @@ import path from 'path'; -import {writeToFile} from '../../../tools/utils/writeToFile'; -import {generatePackageExportsMap} from './generatePackageExportsMap'; +import { writeToFile } from '../../../tools/utils/writeToFile'; +import { generatePackageExportsMap } from './generatePackageExportsMap'; (async () => { const mapping = await generatePackageExportsMap(); diff --git a/packages/paste-codemods/tools/generatePackageExportsMap.ts b/packages/paste-codemods/tools/generatePackageExportsMap.ts index 199bf52541..c1e7ce8f03 100644 --- a/packages/paste-codemods/tools/generatePackageExportsMap.ts +++ b/packages/paste-codemods/tools/generatePackageExportsMap.ts @@ -1,4 +1,4 @@ -import {getRepoPackages} from '../../../tools/utils/getRepoPackages'; +import { getRepoPackages } from '../../../tools/utils/getRepoPackages'; export async function generatePackageExportsMap(getPackages = getRepoPackages): Promise> { // Object to store all the generated mappings for our codemod @@ -15,7 +15,7 @@ export async function generatePackageExportsMap(getPackages = getRepoPackages): return true; }); - filteredPastePackages?.forEach(({name}) => { + filteredPastePackages?.forEach(({ name }) => { // convert package name to core name const corePackageName = `@twilio-paste/core/${name.split('/')[1]}`; diff --git a/packages/paste-codemods/transforms/__tests__/barreled-to-unbarreled.spec.tsx b/packages/paste-codemods/transforms/__tests__/barreled-to-unbarreled.spec.tsx index 1630383cd3..770813eac0 100644 --- a/packages/paste-codemods/transforms/__tests__/barreled-to-unbarreled.spec.tsx +++ b/packages/paste-codemods/transforms/__tests__/barreled-to-unbarreled.spec.tsx @@ -1,3 +1,3 @@ -const {defineTest} = require('jscodeshift/dist/testUtils'); +const { defineTest } = require('jscodeshift/dist/testUtils'); -defineTest(__dirname, 'barreled-to-unbarreled', null, 'barreled-to-unbarreled', {parser: 'ts'}); +defineTest(__dirname, 'barreled-to-unbarreled', null, 'barreled-to-unbarreled', { parser: 'ts' }); diff --git a/packages/paste-codemods/transforms/barreled-to-unbarreled.js b/packages/paste-codemods/transforms/barreled-to-unbarreled.js index 4f3fab0521..89134fc009 100644 --- a/packages/paste-codemods/transforms/barreled-to-unbarreled.js +++ b/packages/paste-codemods/transforms/barreled-to-unbarreled.js @@ -2,7 +2,7 @@ const ComponentLookup = require('../tools/.cache/mappings.json'); module.exports = function barreledToUnbarreled(fileInfo, api, options) { const j = api.jscodeshift; - const printOptions = options.printOptions || {quote: 'single', tabWidth: 2, trailingComma: true}; + const printOptions = options.printOptions || { quote: 'single', tabWidth: 2, trailingComma: true }; const root = j(fileInfo.source); const importLookups = {}; diff --git a/packages/paste-color-contrast-utils/__tests__/colorContrastPairingUtils.spec.ts b/packages/paste-color-contrast-utils/__tests__/colorContrastPairingUtils.spec.ts index 1b6e317896..7b52895526 100644 --- a/packages/paste-color-contrast-utils/__tests__/colorContrastPairingUtils.spec.ts +++ b/packages/paste-color-contrast-utils/__tests__/colorContrastPairingUtils.spec.ts @@ -9,7 +9,7 @@ import * as RawJSON from '../__fixtures__/tokens.raw.json'; import * as RawExtraJSON from '../__fixtures__/tokensWithExtraPairings.raw.json'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore type declaration warning for these token fixtures -import {tokens} from '../__fixtures__/tokens'; +import { tokens } from '../__fixtures__/tokens'; describe('convertRawTokenJSONToArray', () => { test('it should convert raw JSON to an array of tokens', () => { @@ -32,7 +32,7 @@ describe('convertRawTokenJSONToArray', () => { originalValue: '{!palette-red-30}', name: 'color-text-link-destructive-light', }, - }) + }), ).toEqual([ { type: 'color', @@ -192,7 +192,7 @@ describe('getContrastRatingForTokenPairing', () => { test('it should get the contrast ratio rating for only ui control color contrast requirements', () => { const filteredUIControlContrastTokens = getTokensWithUIControlContrastRequirements(RawJSON.props); expect( - getContrastRatingForTokenPairing(filteredUIControlContrastTokens, tokens, 'uicontrol_contrast_pairing') + getContrastRatingForTokenPairing(filteredUIControlContrastTokens, tokens, 'uicontrol_contrast_pairing'), ).toEqual([ { aa: false, diff --git a/packages/paste-color-contrast-utils/build.js b/packages/paste-color-contrast-utils/build.js index 709e55862a..dab3e50f3c 100644 --- a/packages/paste-color-contrast-utils/build.js +++ b/packages/paste-color-contrast-utils/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../tools/build/esbuild'); +const { build } = require('../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-color-contrast-utils/src/utils.ts b/packages/paste-color-contrast-utils/src/utils.ts index 5c9c1e4aa4..4a564c06ea 100644 --- a/packages/paste-color-contrast-utils/src/utils.ts +++ b/packages/paste-color-contrast-utils/src/utils.ts @@ -1,7 +1,7 @@ import ColorCombos from 'color-combos'; -import type {ColorCombo} from 'color-combos'; -import type {GenericTokensShape, AllGenericTokens} from '@twilio-paste/design-tokens/types/GenericTokensShape'; -import type {DesignToken, DesignTokensJSON, TokenPairContrastRating} from '@twilio-paste/design-tokens/types'; +import type { ColorCombo } from 'color-combos'; +import type { GenericTokensShape, AllGenericTokens } from '@twilio-paste/design-tokens/types/GenericTokensShape'; +import type { DesignToken, DesignTokensJSON, TokenPairContrastRating } from '@twilio-paste/design-tokens/types'; import DefaultRawTokenJSON from '@twilio-paste/design-tokens/dist/tokens.raw.json'; import camelCase from 'lodash/camelCase'; @@ -38,7 +38,7 @@ export const getNumberOfUIControlFailures = (ratings: TokenPairContrastRating[]) export const flattenCategorizedTokens = (tokens: Partial): AllGenericTokens => { let flatTheme = {}; Object.values(tokens).forEach((value) => { - flatTheme = {...flatTheme, ...value}; + flatTheme = { ...flatTheme, ...value }; }); return flatTheme; }; @@ -105,7 +105,7 @@ export const getTokensWithDataVisualizationContrastRequirements = (rawTokens: De export const getContrastRatingForTokenPairing = ( filteredTokens: DesignToken[], tokens: AllGenericTokens, - pairingKey: 'text_contrast_pairing' | 'uicontrol_contrast_pairing' | 'data_visualization_contrast_pairing' + pairingKey: 'text_contrast_pairing' | 'uicontrol_contrast_pairing' | 'data_visualization_contrast_pairing', ): TokenPairContrastRating[] => { return filteredTokens.reduce((tokenRatings: TokenPairContrastRating[], token: DesignToken) => { /** array of tokens that are paired with this token for the type of contrast checking we're doing */ @@ -124,7 +124,7 @@ export const getContrastRatingForTokenPairing = ( /** value of the token we're comparing to based on finding it by it's name in the full token list */ const tokenToCompareValue = tokens[tokenToCompareName]; /** accessibility rating as per ColorCombos */ - let comboRating = {aa: false, aaLarge: false, aaa: false, aaaLarge: false}; + let comboRating = { aa: false, aaLarge: false, aaa: false, aaaLarge: false }; /** color contrast ratio of the two colors */ let comboContrast = 0; /** color combinations of the two colors */ @@ -174,7 +174,7 @@ export const getContrastRatingForTokenPairing = ( * @return {*} {TokenPairContrastRating[]} */ export const getContrastRatingsOfTokensWithTextContrastRequirements = ( - tokens: Partial + tokens: Partial, ): TokenPairContrastRating[] => { // always use the Default raw JSON to get the pairings as other themes won't inherit them automatically const defaultThemeRawJSON = DefaultRawTokenJSON.props; @@ -194,7 +194,7 @@ export const getContrastRatingsOfTokensWithTextContrastRequirements = ( * @return {*} {TokenPairContrastRating[]} */ export const getContrastRatingsOfTokensWithUIControlContrastRequirements = ( - tokens: Partial + tokens: Partial, ): TokenPairContrastRating[] => { // always use the Default raw JSON to get the pairings as other themes won't inherit them automatically const defaultThemeRawJSON = DefaultRawTokenJSON.props; @@ -203,7 +203,7 @@ export const getContrastRatingsOfTokensWithUIControlContrastRequirements = ( return getContrastRatingForTokenPairing( tokenWithUIControlContrastRequirements, flattenedTokens, - 'uicontrol_contrast_pairing' + 'uicontrol_contrast_pairing', ); }; @@ -218,7 +218,7 @@ export const getContrastRatingsOfTokensWithUIControlContrastRequirements = ( * @return {*} {TokenPairContrastRating[]} */ export const getContrastRatingsOfTokensWithDataVisualizationContrastRequirements = ( - tokens: Partial + tokens: Partial, ): TokenPairContrastRating[] => { // always use the Default raw JSON to get the pairings as other themes won't inherit them automatically const defaultThemeRawJSON = DefaultRawTokenJSON.props; @@ -228,6 +228,6 @@ export const getContrastRatingsOfTokensWithDataVisualizationContrastRequirements return getContrastRatingForTokenPairing( tokenWithDataVisualizationContrastRequirements, flattenedTokens, - 'data_visualization_contrast_pairing' + 'data_visualization_contrast_pairing', ); }; diff --git a/packages/paste-core/components/account-switcher/__tests__/AccountSwitcher.spec.tsx b/packages/paste-core/components/account-switcher/__tests__/AccountSwitcher.spec.tsx index 82080758c0..81fcecb907 100644 --- a/packages/paste-core/components/account-switcher/__tests__/AccountSwitcher.spec.tsx +++ b/packages/paste-core/components/account-switcher/__tests__/AccountSwitcher.spec.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {render, screen, act} from '@testing-library/react'; +import { render, screen, act } from '@testing-library/react'; -import {AccountSwitcherMenu} from '../stories/AccountSwitcher.stories'; -import {CustomElementName, DefaultElementName} from '../stories/AccountSwitcher.customization.stories'; +import { AccountSwitcherMenu } from '../stories/AccountSwitcher.stories'; +import { CustomElementName, DefaultElementName } from '../stories/AccountSwitcher.customization.stories'; describe('AccountSwitcher', () => { describe('element naming', () => { @@ -10,15 +10,15 @@ describe('AccountSwitcher', () => { await act(async () => { render(); }); - expect(screen.getByRole('button', {name: 'Switch accounts'}).dataset.pasteElement).toEqual( - 'ACCOUNT_SWITCHER_BADGE_BUTTON' + expect(screen.getByRole('button', { name: 'Switch accounts' }).dataset.pasteElement).toEqual( + 'ACCOUNT_SWITCHER_BADGE_BUTTON', ); expect(screen.getByRole('menu').dataset.pasteElement).toEqual('ACCOUNT_SWITCHER'); - expect(screen.getByRole('menuitem', {name: 'Account settings'}).dataset.pasteElement).toEqual( - 'ACCOUNT_SWITCHER_ITEM' + expect(screen.getByRole('menuitem', { name: 'Account settings' }).dataset.pasteElement).toEqual( + 'ACCOUNT_SWITCHER_ITEM', ); - expect(screen.getByRole('menuitemradio', {name: 'Owl Telehealth'}).dataset.pasteElement).toEqual( - 'ACCOUNT_SWITCHER_ITEM_RADIO' + expect(screen.getByRole('menuitemradio', { name: 'Owl Telehealth' }).dataset.pasteElement).toEqual( + 'ACCOUNT_SWITCHER_ITEM_RADIO', ); expect(screen.getAllByRole('separator')[0].dataset.pasteElement).toEqual('ACCOUNT_SWITCHER_SEPARATOR'); }); @@ -28,10 +28,10 @@ describe('AccountSwitcher', () => { await act(async () => { render(); }); - expect(screen.getByRole('button', {name: 'Switch accounts'}).dataset.pasteElement).toEqual('FOO_BUTTON'); + expect(screen.getByRole('button', { name: 'Switch accounts' }).dataset.pasteElement).toEqual('FOO_BUTTON'); expect(screen.getByRole('menu').dataset.pasteElement).toEqual('BAR'); - expect(screen.getByRole('menuitem', {name: 'Account settings'}).dataset.pasteElement).toEqual('BAZ'); - expect(screen.getByRole('menuitemradio', {name: 'Owl Telehealth'}).dataset.pasteElement).toEqual('BAZ_RADIO'); + expect(screen.getByRole('menuitem', { name: 'Account settings' }).dataset.pasteElement).toEqual('BAZ'); + expect(screen.getByRole('menuitemradio', { name: 'Owl Telehealth' }).dataset.pasteElement).toEqual('BAZ_RADIO'); expect(screen.getAllByRole('separator')[0].dataset.pasteElement).toEqual('LINE'); }); }); @@ -40,16 +40,16 @@ describe('AccountSwitcher', () => { await act(async () => { render(); }); - expect(screen.getByRole('button', {name: 'Switch accounts'})).toHaveStyleRule( + expect(screen.getByRole('button', { name: 'Switch accounts' })).toHaveStyleRule( 'background-color', - 'rgb(214, 31, 31)' + 'rgb(214, 31, 31)', ); expect(screen.getByRole('menu')).toHaveStyleRule('border-color', 'rgb(117, 12, 12)'); - expect(screen.getByRole('menuitem', {name: 'Account settings'})).toHaveStyleRule( + expect(screen.getByRole('menuitem', { name: 'Account settings' })).toHaveStyleRule( 'background-color', - 'rgb(0, 20, 137)' + 'rgb(0, 20, 137)', ); - expect(screen.getByRole('menuitemradio', {name: 'Owl Telehealth'})).toHaveStyleRule('font-style', 'italic'); + expect(screen.getByRole('menuitemradio', { name: 'Owl Telehealth' })).toHaveStyleRule('font-style', 'italic'); }); }); describe('customization of styles with custom name', () => { @@ -57,16 +57,16 @@ describe('AccountSwitcher', () => { await act(async () => { render(); }); - expect(screen.getByRole('button', {name: 'Switch accounts'})).toHaveStyleRule( + expect(screen.getByRole('button', { name: 'Switch accounts' })).toHaveStyleRule( 'background-color', - 'rgb(214, 31, 31)' + 'rgb(214, 31, 31)', ); expect(screen.getByRole('menu')).toHaveStyleRule('border-color', 'rgb(117, 12, 12)'); - expect(screen.getByRole('menuitem', {name: 'Account settings'})).toHaveStyleRule( + expect(screen.getByRole('menuitem', { name: 'Account settings' })).toHaveStyleRule( 'background-color', - 'rgb(0, 20, 137)' + 'rgb(0, 20, 137)', ); - expect(screen.getByRole('menuitemradio', {name: 'Owl Telehealth'})).toHaveStyleRule('font-style', 'italic'); + expect(screen.getByRole('menuitemradio', { name: 'Owl Telehealth' })).toHaveStyleRule('font-style', 'italic'); }); }); }); diff --git a/packages/paste-core/components/account-switcher/build.js b/packages/paste-core/components/account-switcher/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/account-switcher/build.js +++ b/packages/paste-core/components/account-switcher/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/account-switcher/src/AccountSwitcher.tsx b/packages/paste-core/components/account-switcher/src/AccountSwitcher.tsx index 528f55f126..100d4463af 100644 --- a/packages/paste-core/components/account-switcher/src/AccountSwitcher.tsx +++ b/packages/paste-core/components/account-switcher/src/AccountSwitcher.tsx @@ -1,20 +1,20 @@ import * as React from 'react'; -import {Menu} from '@twilio-paste/menu'; -import type {MenuProps} from '@twilio-paste/menu'; +import { Menu } from '@twilio-paste/menu'; +import type { MenuProps } from '@twilio-paste/menu'; export interface AccountSwitcherProps extends MenuProps { children: NonNullable; } const AccountSwitcher = React.forwardRef( - ({children, element = 'ACCOUNT_SWITCHER', ...props}, ref) => { + ({ children, element = 'ACCOUNT_SWITCHER', ...props }, ref) => { return ( {children} ); - } + }, ); AccountSwitcher.displayName = 'AccountSwitcher'; -export {AccountSwitcher}; +export { AccountSwitcher }; diff --git a/packages/paste-core/components/account-switcher/src/AccountSwitcherBadge.tsx b/packages/paste-core/components/account-switcher/src/AccountSwitcherBadge.tsx index 74146894cb..0284a9360a 100644 --- a/packages/paste-core/components/account-switcher/src/AccountSwitcherBadge.tsx +++ b/packages/paste-core/components/account-switcher/src/AccountSwitcherBadge.tsx @@ -1,20 +1,20 @@ import * as React from 'react'; -import {MenuBadge} from '@twilio-paste/menu'; -import type {MenuBadgeProps} from '@twilio-paste/menu'; +import { MenuBadge } from '@twilio-paste/menu'; +import type { MenuBadgeProps } from '@twilio-paste/menu'; export interface AccountSwitcherBadgeProps extends Omit { children: NonNullable; } const AccountSwitcherBadge = React.forwardRef( - ({children, element = 'ACCOUNT_SWITCHER_BADGE', ...props}, ref) => { + ({ children, element = 'ACCOUNT_SWITCHER_BADGE', ...props }, ref) => { return ( {children} ); - } + }, ); AccountSwitcherBadge.displayName = 'AccountSwitcherBadge'; -export {AccountSwitcherBadge}; +export { AccountSwitcherBadge }; diff --git a/packages/paste-core/components/account-switcher/src/AccountSwitcherGroup.tsx b/packages/paste-core/components/account-switcher/src/AccountSwitcherGroup.tsx index 0968e35f84..fa27ff1d51 100644 --- a/packages/paste-core/components/account-switcher/src/AccountSwitcherGroup.tsx +++ b/packages/paste-core/components/account-switcher/src/AccountSwitcherGroup.tsx @@ -1,18 +1,18 @@ import * as React from 'react'; -import {MenuGroup} from '@twilio-paste/menu'; -import type {MenuGroupProps} from '@twilio-paste/menu'; +import { MenuGroup } from '@twilio-paste/menu'; +import type { MenuGroupProps } from '@twilio-paste/menu'; export type AccountSwitcherGroupProps = MenuGroupProps; const AccountSwitcherGroup = React.forwardRef( - ({children, element = 'ACCOUNT_SWITCHER_GROUP', label, ...props}, ref) => { + ({ children, element = 'ACCOUNT_SWITCHER_GROUP', label, ...props }, ref) => { return ( {children} ); - } + }, ); AccountSwitcherGroup.displayName = 'AccountSwitcherGroup'; -export {AccountSwitcherGroup}; +export { AccountSwitcherGroup }; diff --git a/packages/paste-core/components/account-switcher/src/AccountSwitcherItem.tsx b/packages/paste-core/components/account-switcher/src/AccountSwitcherItem.tsx index 74ef0e7c00..bc1ca239bf 100644 --- a/packages/paste-core/components/account-switcher/src/AccountSwitcherItem.tsx +++ b/packages/paste-core/components/account-switcher/src/AccountSwitcherItem.tsx @@ -1,20 +1,20 @@ import * as React from 'react'; -import {MenuItem} from '@twilio-paste/menu'; -import type {MenuItemProps} from '@twilio-paste/menu'; +import { MenuItem } from '@twilio-paste/menu'; +import type { MenuItemProps } from '@twilio-paste/menu'; export interface AccountSwitcherItemProps extends MenuItemProps { children: NonNullable; } const AccountSwitcherItem = React.forwardRef( - ({children, element = 'ACCOUNT_SWITCHER_ITEM', ...props}, ref) => { + ({ children, element = 'ACCOUNT_SWITCHER_ITEM', ...props }, ref) => { return ( {children} ); - } + }, ); AccountSwitcherItem.displayName = 'AccountSwitcherItem'; -export {AccountSwitcherItem}; +export { AccountSwitcherItem }; diff --git a/packages/paste-core/components/account-switcher/src/AccountSwitcherItemRadio.tsx b/packages/paste-core/components/account-switcher/src/AccountSwitcherItemRadio.tsx index a749098725..56770c7813 100644 --- a/packages/paste-core/components/account-switcher/src/AccountSwitcherItemRadio.tsx +++ b/packages/paste-core/components/account-switcher/src/AccountSwitcherItemRadio.tsx @@ -1,20 +1,20 @@ import * as React from 'react'; -import {MenuItemRadio} from '@twilio-paste/menu'; -import type {MenuItemRadioProps} from '@twilio-paste/menu'; +import { MenuItemRadio } from '@twilio-paste/menu'; +import type { MenuItemRadioProps } from '@twilio-paste/menu'; export interface AccountSwitcherItemRadioProps extends MenuItemRadioProps { children: NonNullable; } const AccountSwitcherItemRadio = React.forwardRef( - ({children, element = 'ACCOUNT_SWITCHER_ITEM_RADIO', ...props}, ref) => { + ({ children, element = 'ACCOUNT_SWITCHER_ITEM_RADIO', ...props }, ref) => { return ( {children} ); - } + }, ); AccountSwitcherItemRadio.displayName = 'AccountSwitcherItemRadio'; -export {AccountSwitcherItemRadio}; +export { AccountSwitcherItemRadio }; diff --git a/packages/paste-core/components/account-switcher/src/AccountSwitcherSeparator.tsx b/packages/paste-core/components/account-switcher/src/AccountSwitcherSeparator.tsx index 8259fa9cc1..f61c12afb8 100644 --- a/packages/paste-core/components/account-switcher/src/AccountSwitcherSeparator.tsx +++ b/packages/paste-core/components/account-switcher/src/AccountSwitcherSeparator.tsx @@ -1,19 +1,19 @@ import * as React from 'react'; -import {MenuSeparator} from '@twilio-paste/menu'; -import type {MenuSeparatorProps} from '@twilio-paste/menu'; +import { MenuSeparator } from '@twilio-paste/menu'; +import type { MenuSeparatorProps } from '@twilio-paste/menu'; export type AccountSwitcherSeparatorProps = MenuSeparatorProps; const AccountSwitcherSeparator = React.forwardRef( - ({children, element = 'ACCOUNT_SWITCHER_SEPARATOR', ...props}, ref) => { + ({ children, element = 'ACCOUNT_SWITCHER_SEPARATOR', ...props }, ref) => { return ( {children} ); - } + }, ); AccountSwitcherSeparator.displayName = 'AccountSwitcherSeparator'; -export {AccountSwitcherSeparator}; +export { AccountSwitcherSeparator }; diff --git a/packages/paste-core/components/account-switcher/src/useAccountSwitcher.ts b/packages/paste-core/components/account-switcher/src/useAccountSwitcher.ts index dcdbd7c1bf..cdc8d5d30a 100644 --- a/packages/paste-core/components/account-switcher/src/useAccountSwitcher.ts +++ b/packages/paste-core/components/account-switcher/src/useAccountSwitcher.ts @@ -1 +1 @@ -export {useMenuState as useAccountSwitcherState} from '@twilio-paste/menu'; +export { useMenuState as useAccountSwitcherState } from '@twilio-paste/menu'; diff --git a/packages/paste-core/components/account-switcher/stories/AccountSwitcher.customization.stories.tsx b/packages/paste-core/components/account-switcher/stories/AccountSwitcher.customization.stories.tsx index f5c1975d04..47899dbc09 100644 --- a/packages/paste-core/components/account-switcher/stories/AccountSwitcher.customization.stories.tsx +++ b/packages/paste-core/components/account-switcher/stories/AccountSwitcher.customization.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import type { StoryFn } from '@storybook/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; import { AccountSwitcher, @@ -18,18 +18,18 @@ export default { }; export const DefaultElementName: StoryFn = () => { - const accountSwitcher = useAccountSwitcherState({visible: true}); + const accountSwitcher = useAccountSwitcherState({ visible: true }); const [selectedAccount, setSelectedAccount] = React.useState('Owl Telehealth'); return ( @@ -86,18 +86,18 @@ export const DefaultElementName: StoryFn = () => { }; export const CustomElementName: StoryFn = () => { - const accountSwitcher = useAccountSwitcherState({visible: true}); + const accountSwitcher = useAccountSwitcherState({ visible: true }); const [selectedAccount, setSelectedAccount] = React.useState('Owl Telehealth'); return ( diff --git a/packages/paste-core/components/account-switcher/stories/AccountSwitcher.stories.tsx b/packages/paste-core/components/account-switcher/stories/AccountSwitcher.stories.tsx index 104d033bb6..026688930e 100644 --- a/packages/paste-core/components/account-switcher/stories/AccountSwitcher.stories.tsx +++ b/packages/paste-core/components/account-switcher/stories/AccountSwitcher.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; +import type { StoryFn } from '@storybook/react'; import { AccountSwitcher, @@ -17,7 +17,7 @@ export default { }; export const AccountSwitcherMenu: StoryFn = () => { - const accountSwitcher = useAccountSwitcherState({visible: true}); + const accountSwitcher = useAccountSwitcherState({ visible: true }); const [selectedAccount, setSelectedAccount] = React.useState('Owl Telehealth'); return ( <> diff --git a/packages/paste-core/components/alert-dialog/__tests__/customization.spec.tsx b/packages/paste-core/components/alert-dialog/__tests__/customization.spec.tsx index ffa8a10741..a73625a661 100644 --- a/packages/paste-core/components/alert-dialog/__tests__/customization.spec.tsx +++ b/packages/paste-core/components/alert-dialog/__tests__/customization.spec.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; -import {CustomizedAlertDialog, CustomizedDestructiveAlertDialog} from '../stories/index.stories'; +import { CustomizedAlertDialog, CustomizedDestructiveAlertDialog } from '../stories/index.stories'; jest.mock('@twilio-paste/modal-dialog-primitive', () => { const actual = jest.requireActual('@twilio-paste/modal-dialog-primitive'); - const {forwardRef: mockForwardRef} = jest.requireActual('react'); + const { forwardRef: mockForwardRef } = jest.requireActual('react'); const MockModalDialogPrimitiveOverlay = mockForwardRef( ( { @@ -13,8 +13,8 @@ jest.mock('@twilio-paste/modal-dialog-primitive', () => { 'data-paste-element': dataPasteElement, style, className, - }: {children: any; 'data-paste-element': string; style: any; className: string}, - ref: any + }: { children: any; 'data-paste-element': string; style: any; className: string }, + ref: any, ) => (
{ > {children}
- ) + ), ); return { ...actual, @@ -35,8 +35,8 @@ jest.mock('@twilio-paste/modal-dialog-primitive', () => { describe('Alert Dialog `element` prop', () => { it('should set the default element prop on Alert Dialog', () => { - const {container} = render(, { - wrapper: ({children}) =>
{children}
, + const { container } = render(, { + wrapper: ({ children }) =>
{children}
, }); expect(screen.getByTestId('alert_dialog').getAttribute('data-paste-element')).toEqual('ALERT_DIALOG'); expect(container.querySelector('[data-paste-element="ALERT_DIALOG_HEADER_WRAPPER"]')).toBeInTheDocument(); @@ -44,19 +44,19 @@ describe('Alert Dialog `element` prop', () => { expect( screen .getByText('Are you sure you want to submit this application? No information can be changed after submitting.') - .getAttribute('data-paste-element') + .getAttribute('data-paste-element'), ).toEqual('ALERT_DIALOG_BODY'); expect(container.querySelector('[data-paste-element="ALERT_DIALOG_FOOTER"]')).toBeInTheDocument(); }); it('should set the custom element prop on Alert Dialog', () => { - const {container} = render(); + const { container } = render(); expect(screen.getByTestId('destructive_alert_dialog').getAttribute('data-paste-element')).toEqual('FOO'); expect(container.querySelector('[data-paste-element="FOO_HEADER_WRAPPER"]')).toBeInTheDocument(); expect(screen.getByText('Alert Dialog').getAttribute('data-paste-element')).toEqual('FOO_HEADER'); expect( screen .getByText('Are you sure you want to delete this data? This action cannot be undone.') - .getAttribute('data-paste-element') + .getAttribute('data-paste-element'), ).toEqual('FOO_BODY'); expect(container.querySelector('[data-paste-element="FOO_FOOTER"]')).toBeInTheDocument(); }); @@ -64,30 +64,30 @@ describe('Alert Dialog `element` prop', () => { describe('Alert Dialog customization', () => { it('should apply styles to Alert Dialog', () => { - const {container} = render(); + const { container } = render(); expect(screen.getByTestId('alert_dialog')).toHaveStyleRule('background-color', 'rgb(255, 251, 234)'); expect(container.querySelector('[data-paste-element="ALERT_DIALOG_HEADER_WRAPPER"]')).toHaveStyleRule( 'border', - 'inherit' + 'inherit', ); expect(screen.getByText('Alert Dialog')).toHaveStyleRule('background-color', 'rgb(235, 244, 255)'); expect( screen.getByText( - 'Are you sure you want to submit this application? No information can be changed after submitting.' - ) + 'Are you sure you want to submit this application? No information can be changed after submitting.', + ), ).toHaveStyleRule('background-color', 'rgb(237, 253, 243)'); expect(container.querySelector('[data-paste-element="ALERT_DIALOG_FOOTER"]')).toHaveStyleRule( 'padding-top', - '1rem' + '1rem', ); }); it('should apply styles to Alert Dialog with custom element prop', () => { - const {container} = render(); + const { container } = render(); expect(screen.getByTestId('destructive_alert_dialog')).toHaveStyleRule('background-color', 'rgb(214, 31, 31)'); expect(container.querySelector('[data-paste-element="FOO_HEADER_WRAPPER"]')).toHaveStyleRule('border', 'inherit'); expect(screen.getByText('Alert Dialog')).toHaveStyleRule('background-color', 'rgb(235, 244, 255)'); expect( - screen.getByText('Are you sure you want to delete this data? This action cannot be undone.') + screen.getByText('Are you sure you want to delete this data? This action cannot be undone.'), ).toHaveStyleRule('background-color', 'rgb(237, 253, 243)'); expect(container.querySelector('[data-paste-element="FOO_FOOTER"]')).toHaveStyleRule('padding-top', '1rem'); }); diff --git a/packages/paste-core/components/alert-dialog/__tests__/index.spec.tsx b/packages/paste-core/components/alert-dialog/__tests__/index.spec.tsx index 4da7f1a06d..4dbd40b043 100644 --- a/packages/paste-core/components/alert-dialog/__tests__/index.spec.tsx +++ b/packages/paste-core/components/alert-dialog/__tests__/index.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import type {RenderOptions} from '@testing-library/react'; -import {Theme} from '@twilio-paste/theme'; +import { render, screen } from '@testing-library/react'; +import type { RenderOptions } from '@testing-library/react'; +import { Theme } from '@twilio-paste/theme'; import { AlertDialogWithTwoActions, @@ -9,7 +9,7 @@ import { DisabledButtonDestructiveAlertDialog, } from '../stories/index.stories'; -const ThemeWrapper: RenderOptions['wrapper'] = ({children}) => ( +const ThemeWrapper: RenderOptions['wrapper'] = ({ children }) => ( {children} ); @@ -28,14 +28,14 @@ describe('Alert Dialog', () => { }); it('Should have a destructive button style when the destructive prop is included', () => { - render(, {wrapper: ThemeWrapper}); - const button = screen.getByRole('button', {name: 'Delete'}); + render(, { wrapper: ThemeWrapper }); + const button = screen.getByRole('button', { name: 'Delete' }); expect(button).toHaveStyleRule('background-color', 'rgb(214, 31, 31)'); }); it('Should have a disabled destructive button style when the onConfirmDisabled prop is included', () => { - render(, {wrapper: ThemeWrapper}); - const button = screen.getByRole('button', {name: 'Delete'}); + render(, { wrapper: ThemeWrapper }); + const button = screen.getByRole('button', { name: 'Delete' }); expect(button).toHaveStyleRule('background-color', 'rgb(225, 227, 234)'); }); @@ -49,18 +49,18 @@ describe('Alert Dialog', () => { expect(screen.getByRole('alertdialog')).toBeTruthy(); expect(screen.getByRole('alertdialog').getAttribute('aria-modal')).toEqual('true'); expect(screen.getByRole('alertdialog').getAttribute('aria-labelledby')).toEqual( - screen.getByRole('heading').getAttribute('id') + screen.getByRole('heading').getAttribute('id'), ); expect(screen.getByRole('alertdialog').getAttribute('aria-describedby')).toEqual( screen .getByText('Are you sure you want to submit this application? No information can be changed after submitting.') - .getAttribute('id') + .getAttribute('id'), ); }); it('Should have correct attributes when button is disabled', () => { - render(, {wrapper: ThemeWrapper}); - expect(screen.getByRole('button', {name: 'Delete'})).toHaveAttribute('disabled'); + render(, { wrapper: ThemeWrapper }); + expect(screen.getByRole('button', { name: 'Delete' })).toHaveAttribute('disabled'); }); it('Should have the initial focus land on the first focusable item', () => { diff --git a/packages/paste-core/components/alert-dialog/build.js b/packages/paste-core/components/alert-dialog/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/alert-dialog/build.js +++ b/packages/paste-core/components/alert-dialog/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/alert-dialog/src/AlertDialogBody.tsx b/packages/paste-core/components/alert-dialog/src/AlertDialogBody.tsx index d53df6d231..d5d426962b 100644 --- a/packages/paste-core/components/alert-dialog/src/AlertDialogBody.tsx +++ b/packages/paste-core/components/alert-dialog/src/AlertDialogBody.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import type { HTMLPasteProps } from '@twilio-paste/types'; export interface AlertDialogBodyProps extends HTMLPasteProps<'div'>, Pick { bodyID: string; @@ -9,7 +9,7 @@ export interface AlertDialogBodyProps extends HTMLPasteProps<'div'>, Pick( - ({bodyID, children, element = 'ALERT_DIALOG_BODY', ...props}, ref) => { + ({ bodyID, children, element = 'ALERT_DIALOG_BODY', ...props }, ref) => { return ( ); - } + }, ); AlertDialogBody.displayName = 'AlertDialogBody'; diff --git a/packages/paste-core/components/alert-dialog/src/AlertDialogContent.tsx b/packages/paste-core/components/alert-dialog/src/AlertDialogContent.tsx index e39c9cb355..c9293a7c3d 100644 --- a/packages/paste-core/components/alert-dialog/src/AlertDialogContent.tsx +++ b/packages/paste-core/components/alert-dialog/src/AlertDialogContent.tsx @@ -1,15 +1,15 @@ -import {css, styled} from '@twilio-paste/styling-library'; -import {ModalDialogContent} from '@twilio-paste/modal'; -import type {ModalDialogContentProps} from '@twilio-paste/modal'; +import { css, styled } from '@twilio-paste/styling-library'; +import { ModalDialogContent } from '@twilio-paste/modal'; +import type { ModalDialogContentProps } from '@twilio-paste/modal'; export type AlertDialogContentProps = ModalDialogContentProps; const AlertDialogContent = styled(ModalDialogContent)(() => css({ maxWidth: 'size40', - }) + }), ); AlertDialogContent.displayName = 'AlertDialogContent'; -export {AlertDialogContent}; +export { AlertDialogContent }; diff --git a/packages/paste-core/components/alert-dialog/src/AlertDialogFooter.tsx b/packages/paste-core/components/alert-dialog/src/AlertDialogFooter.tsx index a30b7df8e5..8b1d5ddfc3 100644 --- a/packages/paste-core/components/alert-dialog/src/AlertDialogFooter.tsx +++ b/packages/paste-core/components/alert-dialog/src/AlertDialogFooter.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import {Button} from '@twilio-paste/button'; -import {Stack} from '@twilio-paste/stack'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import { Button } from '@twilio-paste/button'; +import { Stack } from '@twilio-paste/stack'; +import type { HTMLPasteProps } from '@twilio-paste/types'; export interface AlertDialogFooterProps extends HTMLPasteProps<'div'>, Pick { destructive?: boolean; @@ -26,7 +26,7 @@ export const AlertDialogFooter = React.forwardRef { const primaryVariant = destructive ? 'destructive' : 'primary'; @@ -53,7 +53,7 @@ export const AlertDialogFooter = React.forwardRef ); - } + }, ); AlertDialogFooter.displayName = 'AlertDialogFooter'; diff --git a/packages/paste-core/components/alert-dialog/src/AlertDialogHeader.tsx b/packages/paste-core/components/alert-dialog/src/AlertDialogHeader.tsx index cc5d0030c2..d51d947627 100644 --- a/packages/paste-core/components/alert-dialog/src/AlertDialogHeader.tsx +++ b/packages/paste-core/components/alert-dialog/src/AlertDialogHeader.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import {Heading} from '@twilio-paste/heading'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import { Heading } from '@twilio-paste/heading'; +import type { HTMLPasteProps } from '@twilio-paste/types'; export interface AlertDialogHeaderProps extends HTMLPasteProps<'header'>, Pick { children: string; @@ -10,7 +10,7 @@ export interface AlertDialogHeaderProps extends HTMLPasteProps<'header'>, Pick( - ({children, element = 'ALERT_DIALOG_HEADER', headingID, ...props}, ref) => { + ({ children, element = 'ALERT_DIALOG_HEADER', headingID, ...props }, ref) => { return ( ); - } + }, ); AlertDialogHeader.displayName = 'AlertDialogHeader'; diff --git a/packages/paste-core/components/alert-dialog/src/index.tsx b/packages/paste-core/components/alert-dialog/src/index.tsx index 814c41e914..44fdd8e9b9 100644 --- a/packages/paste-core/components/alert-dialog/src/index.tsx +++ b/packages/paste-core/components/alert-dialog/src/index.tsx @@ -1,21 +1,21 @@ import * as React from 'react'; -import {useUID} from '@twilio-paste/uid-library'; -import {useTransition} from '@twilio-paste/animation-library'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import {ModalDialogOverlay} from '@twilio-paste/modal'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { useUID } from '@twilio-paste/uid-library'; +import { useTransition } from '@twilio-paste/animation-library'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import { ModalDialogOverlay } from '@twilio-paste/modal'; +import type { HTMLPasteProps } from '@twilio-paste/types'; -import {AlertDialogHeader} from './AlertDialogHeader'; -import {AlertDialogBody} from './AlertDialogBody'; -import {AlertDialogContent} from './AlertDialogContent'; -import {AlertDialogFooter} from './AlertDialogFooter'; +import { AlertDialogHeader } from './AlertDialogHeader'; +import { AlertDialogBody } from './AlertDialogBody'; +import { AlertDialogContent } from './AlertDialogContent'; +import { AlertDialogFooter } from './AlertDialogFooter'; // eslint-disable-next-line @typescript-eslint/no-explicit-any const getAnimationStates = (): any => ({ - from: {opacity: 0, transform: `scale(0.675)`}, - enter: {opacity: 1, transform: `scale(1)`}, - leave: {opacity: 0, transform: `scale(0.675)`}, + from: { opacity: 0, transform: `scale(0.675)` }, + enter: { opacity: 1, transform: `scale(1)` }, + leave: { opacity: 0, transform: `scale(0.675)` }, // https://www.react-spring.dev/docs/advanced/config config: { mass: 0.5, @@ -51,7 +51,7 @@ export const AlertDialog = React.forwardRef( onConfirmDisabled, ...props }, - ref + ref, ) => { const transitions = useTransition(isOpen, getAnimationStates()); const headingID = useUID(); @@ -62,7 +62,7 @@ export const AlertDialog = React.forwardRef( {transitions( (styles, item) => item && ( - + ( /> - ) + ), )} ); - } + }, ); AlertDialog.displayName = 'AlertDialog'; diff --git a/packages/paste-core/components/alert-dialog/stories/index.stories.tsx b/packages/paste-core/components/alert-dialog/stories/index.stories.tsx index d3faa24443..5440fa240b 100644 --- a/packages/paste-core/components/alert-dialog/stories/index.stories.tsx +++ b/packages/paste-core/components/alert-dialog/stories/index.stories.tsx @@ -1,22 +1,22 @@ import * as React from 'react'; -import type {Story} from '@storybook/react'; -import {useUID} from '@twilio-paste/uid-library'; -import {Button} from '@twilio-paste/button'; -import {Heading} from '@twilio-paste/heading'; -import {Modal, ModalBody, ModalFooter, ModalFooterActions, ModalHeader, ModalHeading} from '@twilio-paste/modal'; -import {Paragraph} from '@twilio-paste/paragraph'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {useTheme} from '@twilio-paste/theme'; -import {Box} from '@twilio-paste/box'; -import {Input} from '@twilio-paste/input'; -import {Label} from '@twilio-paste/label'; -import {HelpText} from '@twilio-paste/help-text'; +import type { Story } from '@storybook/react'; +import { useUID } from '@twilio-paste/uid-library'; +import { Button } from '@twilio-paste/button'; +import { Heading } from '@twilio-paste/heading'; +import { Modal, ModalBody, ModalFooter, ModalFooterActions, ModalHeader, ModalHeading } from '@twilio-paste/modal'; +import { Paragraph } from '@twilio-paste/paragraph'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { useTheme } from '@twilio-paste/theme'; +import { Box } from '@twilio-paste/box'; +import { Input } from '@twilio-paste/input'; +import { Label } from '@twilio-paste/label'; +import { HelpText } from '@twilio-paste/help-text'; -import {AlertDialog} from '../src'; -import {AlertDialogHeader} from '../src/AlertDialogHeader'; -import {AlertDialogBody} from '../src/AlertDialogBody'; -import {AlertDialogContent} from '../src/AlertDialogContent'; -import {AlertDialogFooter} from '../src/AlertDialogFooter'; +import { AlertDialog } from '../src'; +import { AlertDialogHeader } from '../src/AlertDialogHeader'; +import { AlertDialogBody } from '../src/AlertDialogBody'; +import { AlertDialogContent } from '../src/AlertDialogContent'; +import { AlertDialogFooter } from '../src/AlertDialogFooter'; // eslint-disable-next-line import/no-default-export export default { @@ -51,7 +51,7 @@ export const AlertDialogWithTwoActionsStory = (): React.ReactNode => { AlertDialogWithTwoActionsStory.storyName = 'Alert Dialog With Two Actions'; AlertDialogWithTwoActionsStory.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, a11y: { // no need to a11y check customization disable: true, @@ -80,14 +80,14 @@ export const DestructiveAlertDialogStory = (): React.ReactNode => { DestructiveAlertDialogStory.storyName = 'Destructive Alert Dialog'; DestructiveAlertDialogStory.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, a11y: { // no need to a11y check customization disable: true, }, }; -export const DisabledButtonDestructiveAlertDialog = ({dialogIsOpen = false}): JSX.Element => { +export const DisabledButtonDestructiveAlertDialog = ({ dialogIsOpen = false }): JSX.Element => { const [isOpen, setIsOpen] = React.useState(dialogIsOpen); const [inputString, setInputString] = React.useState(''); const [inputHasError, setInputHasError] = React.useState(false); @@ -185,7 +185,7 @@ export const OpenAlertDialogFromButtonStory = (): React.ReactNode => { OpenAlertDialogFromButtonStory.storyName = 'Open Alert Dialog From Button'; OpenAlertDialogFromButtonStory.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, a11y: { // no need to a11y check customization disable: true, @@ -249,7 +249,7 @@ export const OpenAlertDialogFromModalStory = (): React.ReactNode => { OpenAlertDialogFromModalStory.storyName = 'Open Alert Dialog From Modal'; OpenAlertDialogFromModalStory.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, a11y: { // no need to a11y check customization disable: true, @@ -301,11 +301,11 @@ export const CustomizedAlertDialog: Story = () => { disableAnimations={true} theme={theme} elements={{ - ALERT_DIALOG: {backgroundColor: 'colorBackgroundSubaccount'}, - ALERT_DIALOG_HEADER_WRAPPER: {border: 'inherit'}, - ALERT_DIALOG_HEADER: {fontFamily: 'fontFamilyCode', backgroundColor: 'colorBackgroundNeutralWeakest'}, - ALERT_DIALOG_BODY: {backgroundColor: 'colorBackgroundSuccessWeakest'}, - ALERT_DIALOG_FOOTER: {paddingTop: 'space50', backgroundColor: 'colorBackgroundWarningWeakest'}, + ALERT_DIALOG: { backgroundColor: 'colorBackgroundSubaccount' }, + ALERT_DIALOG_HEADER_WRAPPER: { border: 'inherit' }, + ALERT_DIALOG_HEADER: { fontFamily: 'fontFamilyCode', backgroundColor: 'colorBackgroundNeutralWeakest' }, + ALERT_DIALOG_BODY: { backgroundColor: 'colorBackgroundSuccessWeakest' }, + ALERT_DIALOG_FOOTER: { paddingTop: 'space50', backgroundColor: 'colorBackgroundWarningWeakest' }, }} > { disableAnimations={true} theme={currentTheme} elements={{ - FOO: {backgroundColor: 'colorBackgroundError'}, - FOO_HEADER_WRAPPER: {border: 'inherit'}, - FOO_HEADER: {fontFamily: 'fontFamilyCode', backgroundColor: 'colorBackgroundNeutralWeakest'}, - FOO_BODY: {backgroundColor: 'colorBackgroundSuccessWeakest'}, - FOO_FOOTER: {paddingTop: 'space50', backgroundColor: 'colorBackgroundWarningWeakest'}, + FOO: { backgroundColor: 'colorBackgroundError' }, + FOO_HEADER_WRAPPER: { border: 'inherit' }, + FOO_HEADER: { fontFamily: 'fontFamilyCode', backgroundColor: 'colorBackgroundNeutralWeakest' }, + FOO_BODY: { backgroundColor: 'colorBackgroundSuccessWeakest' }, + FOO_FOOTER: { paddingTop: 'space50', backgroundColor: 'colorBackgroundWarningWeakest' }, }} > { describe('Dismiss button', () => { it('Should add a dismiss button when onDismiss is passed as a function to call', () => { const eventHandlerMock: jest.Mock = jest.fn(); - const {getByRole} = render( + const { getByRole } = render( This is an alert - + , ); expect(getByRole('button')).toBeInTheDocument(); @@ -23,10 +23,10 @@ describe('Alert', () => { it('Should call the onDismiss event handler when close button clicked', () => { const eventHandlerMock: jest.Mock = jest.fn(); - const {getByRole} = render( + const { getByRole } = render( This is an alert - + , ); const button = getByRole('button'); @@ -37,25 +37,25 @@ describe('Alert', () => { describe('Aria roles', () => { it('Should add the role of status to the neutral alert', () => { - const {getByRole} = render(This is an alert); + const { getByRole } = render(This is an alert); expect(getByRole('status')).toBeInTheDocument(); }); it('Should add the role of alert to the error alert', () => { - const {getByRole} = render(This is an alert); + const { getByRole } = render(This is an alert); expect(getByRole('alert')).toBeInTheDocument(); }); it('Should add the role of alert to the warning alert', () => { - const {getByRole} = render(This is an alert); + const { getByRole } = render(This is an alert); expect(getByRole('alert')).toBeInTheDocument(); }); it('Should add the provided role to the alert', () => { - const {getByRole} = render( + const { getByRole } = render( This is an alert - + , ); expect(getByRole('tab')).toBeInTheDocument(); }); @@ -68,7 +68,7 @@ describe('Alert', () => { This is my test alert - + , ); const alert = screen.getByTestId('alert-customization'); @@ -101,7 +101,7 @@ describe('Alert', () => { This is my test alert - + , ); const alert = screen.getByTestId('alert-customization'); @@ -110,11 +110,11 @@ describe('Alert', () => { expect(alert.querySelector('[data-paste-element="ALERT_ICON"]')).toHaveStyleRule('color', 'rgb(0, 20, 137)'); expect(alert.querySelector('[data-paste-element="ALERT_DISMISS_BUTTON"]')).toHaveStyleRule( 'background-color', - 'rgb(18, 28, 45)' + 'rgb(18, 28, 45)', ); expect(alert.querySelector('[data-paste-element="ALERT_DISMISS_ICON"]')).toHaveStyleRule( 'color', - 'rgb(255, 255, 255)' + 'rgb(255, 255, 255)', ); }); @@ -140,7 +140,7 @@ describe('Alert', () => { This is my test alert - + , ); const alert = screen.getByTestId('alert-customization'); @@ -154,11 +154,11 @@ describe('Alert', () => { expect(alert.querySelector('[data-paste-element="MYALERT_ICON"]')).toHaveStyleRule('color', 'rgb(0, 20, 137)'); expect(alert.querySelector('[data-paste-element="MYALERT_DISMISS_BUTTON"]')).toHaveStyleRule( 'background-color', - 'rgb(18, 28, 45)' + 'rgb(18, 28, 45)', ); expect(alert.querySelector('[data-paste-element="MYALERT_DISMISS_ICON"]')).toHaveStyleRule( 'color', - 'rgb(255, 255, 255)' + 'rgb(255, 255, 255)', ); }); }); @@ -168,9 +168,9 @@ describe('Alert', () => { render( This is an alert - + , ); - const dismissButton = screen.getByRole('button', {name: 'Dismiss alert'}); + const dismissButton = screen.getByRole('button', { name: 'Dismiss alert' }); expect(dismissButton).toBeDefined(); }); @@ -178,9 +178,9 @@ describe('Alert', () => { render( C'est une alerte neutre. - + , ); - const dismissButton = screen.getByRole('button', {name: "Fermez l'alerte"}); + const dismissButton = screen.getByRole('button', { name: "Fermez l'alerte" }); expect(dismissButton).toBeDefined(); }); @@ -188,7 +188,7 @@ describe('Alert', () => { render( This is an alert - + , ); const alert = screen.getByTestId('alert-i18n'); const icon = alert.querySelector('[data-paste-element="ALERT_ICON"]'); @@ -199,7 +199,7 @@ describe('Alert', () => { render( This is an alert - + , ); const alert = screen.getByTestId('alert-i18n'); const icon = alert.querySelector('[data-paste-element="ALERT_ICON"]'); @@ -210,7 +210,7 @@ describe('Alert', () => { render( This is an alert - + , ); const alert = screen.getByTestId('alert-i18n'); const icon = alert.querySelector('[data-paste-element="ALERT_ICON"]'); @@ -221,7 +221,7 @@ describe('Alert', () => { render( C'est une alerte. - + , ); const alert = screen.getByTestId('alert-i18n'); const icon = alert.querySelector('[data-paste-element="ALERT_ICON"]'); @@ -232,7 +232,7 @@ describe('Alert', () => { render( C'est une alerte. - + , ); const alert = screen.getByTestId('alert-i18n'); const icon = alert.querySelector('[data-paste-element="ALERT_ICON"]'); @@ -243,7 +243,7 @@ describe('Alert', () => { render( C'est une alerte. - + , ); const alert = screen.getByTestId('alert-i18n'); const icon = alert.querySelector('[data-paste-element="ALERT_ICON"]'); diff --git a/packages/paste-core/components/alert/build.js b/packages/paste-core/components/alert/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/alert/build.js +++ b/packages/paste-core/components/alert/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/alert/src/index.tsx b/packages/paste-core/components/alert/src/index.tsx index fbd691b5cf..2b20d27d61 100644 --- a/packages/paste-core/components/alert/src/index.tsx +++ b/packages/paste-core/components/alert/src/index.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import type {BoxProps} from '@twilio-paste/box'; -import type {HTMLPasteProps, ValueOf} from '@twilio-paste/types'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import {MediaObject, MediaFigure, MediaBody} from '@twilio-paste/media-object'; -import {Button} from '@twilio-paste/button'; -import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only'; -import {CloseIcon} from '@twilio-paste/icons/esm/CloseIcon'; -import {ErrorIcon} from '@twilio-paste/icons/esm/ErrorIcon'; -import {NeutralIcon} from '@twilio-paste/icons/esm/NeutralIcon'; -import {WarningIcon} from '@twilio-paste/icons/esm/WarningIcon'; +import type { BoxProps } from '@twilio-paste/box'; +import type { HTMLPasteProps, ValueOf } from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import { MediaObject, MediaFigure, MediaBody } from '@twilio-paste/media-object'; +import { Button } from '@twilio-paste/button'; +import { ScreenReaderOnly } from '@twilio-paste/screen-reader-only'; +import { CloseIcon } from '@twilio-paste/icons/esm/CloseIcon'; +import { ErrorIcon } from '@twilio-paste/icons/esm/ErrorIcon'; +import { NeutralIcon } from '@twilio-paste/icons/esm/NeutralIcon'; +import { WarningIcon } from '@twilio-paste/icons/esm/WarningIcon'; type AlertVariantKeys = 'ERROR' | 'NEUTRAL' | 'WARNING'; @@ -103,7 +103,7 @@ const Alert = React.forwardRef( i18nWarningLabel = '(warning)', ...props }, - ref + ref, ) => { const i18nLabelVariantMap = { error: i18nErrorLabel, @@ -142,8 +142,8 @@ const Alert = React.forwardRef( ); - } + }, ); Alert.displayName = 'Alert'; -export {Alert}; +export { Alert }; diff --git a/packages/paste-core/components/alert/stories/index.stories.tsx b/packages/paste-core/components/alert/stories/index.stories.tsx index 0dbeb36f2d..e033e2d5ca 100644 --- a/packages/paste-core/components/alert/stories/index.stories.tsx +++ b/packages/paste-core/components/alert/stories/index.stories.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; -import {action} from '@storybook/addon-actions'; -import type {StoryFn} from '@storybook/react'; -import {Box} from '@twilio-paste/box'; -import {Truncate} from '@twilio-paste/truncate'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {useTheme} from '@twilio-paste/theme'; +import { action } from '@storybook/addon-actions'; +import type { StoryFn } from '@storybook/react'; +import { Box } from '@twilio-paste/box'; +import { Truncate } from '@twilio-paste/truncate'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { useTheme } from '@twilio-paste/theme'; -import {Alert} from '../src'; +import { Alert } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -103,7 +103,7 @@ export const Warning = (): React.ReactNode => { ); }; -export const CustomAlert: StoryFn = (_args, {parameters: {isTestEnvironment = false}}) => { +export const CustomAlert: StoryFn = (_args, { parameters: { isTestEnvironment = false } }) => { const currentTheme = useTheme(); return ( { it('should render an external anchor', () => { render( This is an anchor that links to Twilio.com with an external target and rel - + , ); const renderedAnchor = screen.getByRole('link'); expect(renderedAnchor.getAttribute('target')).toEqual('_blank'); @@ -20,7 +20,7 @@ describe('Anchor', () => { render( This is an anchor that links to Twilio.com with the target and rel overwritten - + , ); const renderedAnchor = screen.getByRole('link'); expect(renderedAnchor.getAttribute('target')).toEqual('_self'); @@ -31,7 +31,7 @@ describe('Anchor', () => { render( External link with icon - + , ); const renderedAnchor = screen.getByRole('link'); expect(renderedAnchor.querySelectorAll('svg').length).toBeGreaterThan(0); @@ -53,7 +53,7 @@ describe('Anchor', () => { verticalAlign="middle" > Anchor - + , ); const renderedAnchor = screen.getByTestId('styledAnchor'); expect(renderedAnchor).toHaveStyleRule('display', 'block'); @@ -70,7 +70,7 @@ describe('Anchor', () => { render( Anchor - + , ); const renderedAnchor = screen.getByTestId('styledAnchor'); expect(renderedAnchor).toHaveStyleRule('height', 'size30'); @@ -80,7 +80,7 @@ describe('Anchor', () => { render( Anchor - + , ); const renderedAnchor = screen.getByTestId('styledAnchor'); expect(renderedAnchor).toHaveStyleRule('margin', 'space20'); @@ -97,7 +97,7 @@ describe('Anchor', () => { marginLeft="space20" > Anchor - + , ); const renderedAnchor = screen.getByTestId('styledAnchor'); expect(renderedAnchor).toHaveStyleRule('margin-top', 'space20'); @@ -110,7 +110,7 @@ describe('Anchor', () => { render( Anchor - + , ); const renderedAnchor = screen.getByTestId('styledAnchor'); expect(renderedAnchor).toHaveStyleRule('margin-top', 'space20'); @@ -123,7 +123,7 @@ describe('Anchor', () => { render( Anchor - + , ); const renderedAnchor = screen.getByTestId('styledAnchor'); expect(renderedAnchor).toHaveStyleRule('padding', 'space20'); @@ -140,7 +140,7 @@ describe('Anchor', () => { paddingLeft="space20" > Anchor - + , ); const renderedAnchor = screen.getByTestId('styledAnchor'); expect(renderedAnchor).toHaveStyleRule('padding-top', 'space20'); @@ -153,7 +153,7 @@ describe('Anchor', () => { render( Anchor - + , ); const renderedAnchor = screen.getByTestId('styledAnchor'); expect(renderedAnchor).toHaveStyleRule('padding-top', 'space20'); @@ -167,7 +167,7 @@ describe('Anchor', () => { render( This is an anchor that links to Twilio.com with an external target and rel - + , ); const renderedAnchor = screen.getByRole('link'); expect(renderedAnchor.getAttribute('data-paste-element')).toEqual('ANCHOR'); @@ -176,7 +176,7 @@ describe('Anchor', () => { render( This is an anchor that links to Twilio.com with an external target and rel - + , ); const renderedAnchor = screen.getByRole('link'); expect(renderedAnchor.getAttribute('data-paste-element')).toEqual('FUNKY_ANCHOR'); @@ -187,12 +187,12 @@ describe('Anchor', () => { Custom anchor - + , ); const renderedAnchor = screen.getByTestId('customizable-anchor'); expect(renderedAnchor).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); @@ -203,12 +203,12 @@ describe('Anchor', () => { Custom anchor - + , ); const renderedAnchor = screen.getByTestId('customizable-anchor'); expect(renderedAnchor).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); @@ -221,7 +221,7 @@ describe('Anchor', () => { render( I am anchor - + , ); const externalAnchor = screen.getByRole('link'); const showExternalIcon = externalAnchor.querySelector('[data-paste-element="ICON"]'); @@ -231,7 +231,7 @@ describe('Anchor', () => { render( Soy enlace - + , ); const externalAnchor = screen.getByRole('link'); const showExternalIcon = externalAnchor.querySelector('[data-paste-element="ICON"]'); diff --git a/packages/paste-core/components/anchor/build.js b/packages/paste-core/components/anchor/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/anchor/build.js +++ b/packages/paste-core/components/anchor/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/anchor/src/Anchor.tsx b/packages/paste-core/components/anchor/src/Anchor.tsx index 574b6da001..314ec68005 100644 --- a/packages/paste-core/components/anchor/src/Anchor.tsx +++ b/packages/paste-core/components/anchor/src/Anchor.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import {LinkExternalIcon} from '@twilio-paste/icons/esm/LinkExternalIcon'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import { LinkExternalIcon } from '@twilio-paste/icons/esm/LinkExternalIcon'; -import {DefaultAnchor} from './DefaultAnchor'; -import {InverseAnchor} from './InverseAnchor'; -import type {AnchorProps} from './types'; +import { DefaultAnchor } from './DefaultAnchor'; +import { InverseAnchor } from './InverseAnchor'; +import type { AnchorProps } from './types'; const AnchorVariants = { inverse: InverseAnchor, @@ -17,8 +17,8 @@ const EXTERNAL_REL_DEFAULT = 'noreferrer noopener'; export const isExternalUrl = (url: string): boolean => EXTERNAL_URL_REGEX.test(url); export const secureExternalLink = ( - href: string -): {rel: typeof EXTERNAL_REL_DEFAULT; target: typeof EXTERNAL_TARGET_DEFAULT} | undefined => { + href: string, +): { rel: typeof EXTERNAL_REL_DEFAULT; target: typeof EXTERNAL_TARGET_DEFAULT } | undefined => { if (!isExternalUrl(href)) return undefined; return { rel: EXTERNAL_REL_DEFAULT, @@ -58,7 +58,7 @@ const Anchor = React.forwardRef( i18nExternalLinkLabel = '(link takes you to an external page)', ...props }, - ref + ref, ) => { const AnchorComponent = AnchorVariants[variant]; @@ -106,11 +106,11 @@ const Anchor = React.forwardRef( )} ); - } + }, ); Anchor.displayName = 'Anchor'; -export {Anchor}; +export { Anchor }; export * from './types'; diff --git a/packages/paste-core/components/anchor/src/DefaultAnchor.tsx b/packages/paste-core/components/anchor/src/DefaultAnchor.tsx index 4be2be3f67..52db263dae 100644 --- a/packages/paste-core/components/anchor/src/DefaultAnchor.tsx +++ b/packages/paste-core/components/anchor/src/DefaultAnchor.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; +import { Box } from '@twilio-paste/box'; -import type {AnchorProps} from './types'; +import type { AnchorProps } from './types'; const DefaultAnchor = React.forwardRef((props, ref) => ( ((props, r DefaultAnchor.displayName = 'DefaultAnchor'; -export {DefaultAnchor}; +export { DefaultAnchor }; diff --git a/packages/paste-core/components/anchor/src/InverseAnchor.tsx b/packages/paste-core/components/anchor/src/InverseAnchor.tsx index 2e06883c4f..0efe3bb54c 100644 --- a/packages/paste-core/components/anchor/src/InverseAnchor.tsx +++ b/packages/paste-core/components/anchor/src/InverseAnchor.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; +import { Box } from '@twilio-paste/box'; -import type {AnchorProps} from './types'; +import type { AnchorProps } from './types'; const InverseAnchor = React.forwardRef((props, ref) => ( ((props, r InverseAnchor.displayName = 'InverseAnchor'; -export {InverseAnchor}; +export { InverseAnchor }; diff --git a/packages/paste-core/components/anchor/src/index.tsx b/packages/paste-core/components/anchor/src/index.tsx index 0a6de46470..6bbfc2c429 100644 --- a/packages/paste-core/components/anchor/src/index.tsx +++ b/packages/paste-core/components/anchor/src/index.tsx @@ -1,2 +1,2 @@ -export {Anchor, isExternalUrl, secureExternalLink} from './Anchor'; -export type {AnchorProps, AnchorTabIndexes, AnchorTargets, AnchorVariants} from './types'; +export { Anchor, isExternalUrl, secureExternalLink } from './Anchor'; +export type { AnchorProps, AnchorTabIndexes, AnchorTargets, AnchorVariants } from './types'; diff --git a/packages/paste-core/components/anchor/src/types.ts b/packages/paste-core/components/anchor/src/types.ts index 2d709a487d..78beaa4ce2 100644 --- a/packages/paste-core/components/anchor/src/types.ts +++ b/packages/paste-core/components/anchor/src/types.ts @@ -1,6 +1,6 @@ -import type {HTMLPasteProps} from '@twilio-paste/types'; -import type {LayoutProps, SpaceProps} from '@twilio-paste/style-props'; -import type {BoxProps} from '@twilio-paste/box'; +import type { HTMLPasteProps } from '@twilio-paste/types'; +import type { LayoutProps, SpaceProps } from '@twilio-paste/style-props'; +import type { BoxProps } from '@twilio-paste/box'; export type AnchorTabIndexes = 0 | -1; export type AnchorTargets = '_self' | '_blank' | '_parent' | '_top'; diff --git a/packages/paste-core/components/anchor/stories/index.stories.tsx b/packages/paste-core/components/anchor/stories/index.stories.tsx index 1f8b7f4514..8a70a6f092 100644 --- a/packages/paste-core/components/anchor/stories/index.stories.tsx +++ b/packages/paste-core/components/anchor/stories/index.stories.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {action} from '@storybook/addon-actions'; -import {Box} from '@twilio-paste/box'; -import {Stack} from '@twilio-paste/stack'; -import {Heading} from '@twilio-paste/heading'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {useTheme} from '@twilio-paste/theme'; +import type { StoryFn } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; +import { Box } from '@twilio-paste/box'; +import { Stack } from '@twilio-paste/stack'; +import { Heading } from '@twilio-paste/heading'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { useTheme } from '@twilio-paste/theme'; -import {Anchor} from '../src'; -import type {AnchorTargets, AnchorTabIndexes} from '../src/types'; +import { Anchor } from '../src'; +import type { AnchorTargets, AnchorTabIndexes } from '../src/types'; // eslint-disable-next-line import/no-default-export export default { @@ -72,7 +72,7 @@ export const ShowExternalProp = (): React.ReactNode => { ShowExternalProp.storyName = 'showExternal prop'; -export const CustomAnchor: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const CustomAnchor: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( { size={['sizeIcon30', 'sizeIcon40', 'sizeIcon90']} name="avatar example" src="/avatars/avatar2.png" - /> + />, ); const renderedAvatar = screen.getByTestId('avatar'); expect(renderedAvatar).toHaveStyleRule('width', 'sizeIcon30'); @@ -163,7 +163,7 @@ describe('Avatar', () => { name="avatar example" icon={UserIcon} src="/avatars/avatar2.png" - /> + />, ); expect(screen.getByRole('img').getAttribute('src')).toEqual('/avatars/avatar2.png'); @@ -221,18 +221,21 @@ describe('Avatar', () => { it('should add custom styles to Avatar', () => { render( - + - + , ); const renderedAvatar = screen.getByTestId('avatar'); expect(renderedAvatar).toHaveStyleRule('background-color', 'rgb(20, 176, 83)'); }); it('should add custom styles to custom element Avatar', () => { render( - + - + , ); const renderedAvatar = screen.getByTestId('avatar'); expect(renderedAvatar).toHaveStyleRule('background-color', 'rgb(20, 176, 83)'); diff --git a/packages/paste-core/components/avatar/build.js b/packages/paste-core/components/avatar/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/avatar/build.js +++ b/packages/paste-core/components/avatar/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/avatar/src/Avatar.tsx b/packages/paste-core/components/avatar/src/Avatar.tsx index 1e8f0bae1b..f3118383cc 100644 --- a/packages/paste-core/components/avatar/src/Avatar.tsx +++ b/packages/paste-core/components/avatar/src/Avatar.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; -import {isValidElementType} from 'react-is'; -import {Text} from '@twilio-paste/text'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxStyleProps} from '@twilio-paste/box'; +import { isValidElementType } from 'react-is'; +import { Text } from '@twilio-paste/text'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxStyleProps } from '@twilio-paste/box'; -import {getComputedTokenNames, getInitialsFromName} from './utils'; -import type {AvatarProps, AvatarContentProps, ColorVariants, AvatarVariants} from './types'; -import {AvatarGroupContext} from './AvatarGroup'; +import { getComputedTokenNames, getInitialsFromName } from './utils'; +import type { AvatarProps, AvatarContentProps, ColorVariants, AvatarVariants } from './types'; +import { AvatarGroupContext } from './AvatarGroup'; const DEFAULT_SIZE = 'sizeIcon70'; @@ -16,7 +16,7 @@ const AvatarContents: React.FC> = ({ src, icon: Icon, }) => { - const {size: groupSize} = React.useContext(AvatarGroupContext); + const { size: groupSize } = React.useContext(AvatarGroupContext); const computedTokenNames = getComputedTokenNames(groupSize || size); if (src != null) { @@ -91,12 +91,15 @@ const variantStyles: Record = { }; export const Avatar = React.forwardRef( - ({name, size = DEFAULT_SIZE, element = 'AVATAR', src, icon, color = 'default', variant = 'user', ...props}, ref) => { + ( + { name, size = DEFAULT_SIZE, element = 'AVATAR', src, icon, color = 'default', variant = 'user', ...props }, + ref, + ) => { if (name === undefined) { // eslint-disable-next-line no-console console.error('[Paste Avatar]: name prop is required'); } - const {variant: groupVariant, size: groupSize} = React.useContext(AvatarGroupContext); + const { variant: groupVariant, size: groupSize } = React.useContext(AvatarGroupContext); return ( ( {...colorPropStyles[color]} {...variantStyles[groupVariant || variant]} // when its an image set specific styles that are unrelated to color or variants - {...(src && {backgroundColor: 'colorBackgroundBody', boxShadow: 'shadowBorderWeaker'})} + {...(src && { backgroundColor: 'colorBackgroundBody', boxShadow: 'shadowBorderWeaker' })} > ); - } + }, ); Avatar.displayName = 'Avatar'; diff --git a/packages/paste-core/components/avatar/src/AvatarGroup.tsx b/packages/paste-core/components/avatar/src/AvatarGroup.tsx index beb73e3a9d..e68eaf6079 100644 --- a/packages/paste-core/components/avatar/src/AvatarGroup.tsx +++ b/packages/paste-core/components/avatar/src/AvatarGroup.tsx @@ -1,21 +1,21 @@ import * as React from 'react'; -import {Stack} from '@twilio-paste/stack'; +import { Stack } from '@twilio-paste/stack'; -import type {AvatarGroupProps} from './types'; -import {getGroupSpacing} from './utils'; +import type { AvatarGroupProps } from './types'; +import { getGroupSpacing } from './utils'; export const AvatarGroupContext = React.createContext>({} as AvatarGroupProps); export const AvatarGroup = React.forwardRef( - ({variant, size, children, element = 'AVATAR_GROUP'}, ref) => { + ({ variant, size, children, element = 'AVATAR_GROUP' }, ref) => { return ( - + {children} ); - } + }, ); AvatarGroup.displayName = 'AvatarGroup'; diff --git a/packages/paste-core/components/avatar/src/index.tsx b/packages/paste-core/components/avatar/src/index.tsx index d77cc5ab92..7bc0f8c891 100644 --- a/packages/paste-core/components/avatar/src/index.tsx +++ b/packages/paste-core/components/avatar/src/index.tsx @@ -1,3 +1,3 @@ export * from './Avatar'; -export {AvatarGroup} from './AvatarGroup'; +export { AvatarGroup } from './AvatarGroup'; export * from './types'; diff --git a/packages/paste-core/components/avatar/src/types.ts b/packages/paste-core/components/avatar/src/types.ts index 520744174e..19da75b869 100644 --- a/packages/paste-core/components/avatar/src/types.ts +++ b/packages/paste-core/components/avatar/src/types.ts @@ -1,7 +1,7 @@ -import type {IconSize} from '@twilio-paste/style-props'; -import type {GenericIconProps} from '@twilio-paste/icons/esm/types'; -import type {BoxProps} from '@twilio-paste/box'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import type { IconSize } from '@twilio-paste/style-props'; +import type { GenericIconProps } from '@twilio-paste/icons/esm/types'; +import type { BoxProps } from '@twilio-paste/box'; +import type { HTMLPasteProps } from '@twilio-paste/types'; export type ColorVariants = 'default' | 'decorative10' | 'decorative20' | 'decorative30' | 'decorative40'; export type AvatarVariants = 'user' | 'entity'; diff --git a/packages/paste-core/components/avatar/src/utils.ts b/packages/paste-core/components/avatar/src/utils.ts index c37ffaf91c..366c7d8157 100644 --- a/packages/paste-core/components/avatar/src/utils.ts +++ b/packages/paste-core/components/avatar/src/utils.ts @@ -8,7 +8,7 @@ import type { SpaceOptions, } from '@twilio-paste/style-props'; -import type {AvatarVariants} from './types'; +import type { AvatarVariants } from './types'; export const getInitialsFromName = (fullname: string): string => { return fullname @@ -87,8 +87,8 @@ export const getCorrespondingIconSizeFromSizeToken = (size: IconSizeOptions): Ic // this function takes in a size and exports an object w/ lineheight and fontsize and iconsize export const getComputedTokenNames = ( - size: IconSize -): {lineHeight: LineHeight; fontSize: FontSize; iconSize: IconSize} => { + size: IconSize, +): { lineHeight: LineHeight; fontSize: FontSize; iconSize: IconSize } => { if (typeof size === 'string') { // if size is a string, put it into the correspondingSize function return { diff --git a/packages/paste-core/components/avatar/stories/index.stories.tsx b/packages/paste-core/components/avatar/stories/index.stories.tsx index 15e2207c50..26741695cd 100644 --- a/packages/paste-core/components/avatar/stories/index.stories.tsx +++ b/packages/paste-core/components/avatar/stories/index.stories.tsx @@ -1,20 +1,20 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {Stack} from '@twilio-paste/stack'; -import {Box} from '@twilio-paste/box'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {UserIcon} from '@twilio-paste/icons/esm/UserIcon'; -import {BusinessIcon} from '@twilio-paste/icons/esm/BusinessIcon'; -import {useTheme} from '@twilio-paste/theme'; +import type { StoryFn } from '@storybook/react'; +import { Stack } from '@twilio-paste/stack'; +import { Box } from '@twilio-paste/box'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { UserIcon } from '@twilio-paste/icons/esm/UserIcon'; +import { BusinessIcon } from '@twilio-paste/icons/esm/BusinessIcon'; +import { useTheme } from '@twilio-paste/theme'; -import {Avatar, AvatarGroup} from '../src'; +import { Avatar, AvatarGroup } from '../src'; // eslint-disable-next-line import/no-default-export export default { title: 'Components/Avatar', component: Avatar, // Sets the diffThreshold for all stories - chromatic: {diffThreshold: 0.3}, + chromatic: { diffThreshold: 0.3 }, }; export const Initials = (): React.ReactNode => { @@ -84,7 +84,7 @@ export const Image = (): React.ReactNode => { }; Image.parameters = { - chromatic: {delay: 3000}, + chromatic: { delay: 3000 }, }; export const Icon = (): React.ReactNode => { @@ -398,10 +398,10 @@ export const ResponsiveIcon = (): React.ReactNode => { }; ResponsiveImage.parameters = { - chromatic: {delay: 3000}, + chromatic: { delay: 3000 }, }; -export const CustomAvatar: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const CustomAvatar: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( <> diff --git a/packages/paste-core/components/badge/__tests__/customization.spec.tsx b/packages/paste-core/components/badge/__tests__/customization.spec.tsx index 3cdf085b21..58bb06da2a 100644 --- a/packages/paste-core/components/badge/__tests__/customization.spec.tsx +++ b/packages/paste-core/components/badge/__tests__/customization.spec.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import type {RenderOptions} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render, screen } from '@testing-library/react'; +import type { RenderOptions } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {makeBadge, getStyles} from '../stories/customization.stories'; +import { makeBadge, getStyles } from '../stories/customization.stories'; const makeCustomizationWrapper = (element: string | undefined = 'BADGE'): RenderOptions['wrapper'] => - function Wrapper({children}) { + function Wrapper({ children }) { return ( {children} @@ -27,13 +27,13 @@ describe('Badge data-paste-element attribute', () => { describe('Badge customization', () => { it('should set styles on Badge', () => { - render(makeBadge('error'), {wrapper: makeCustomizationWrapper()}); + render(makeBadge('error'), { wrapper: makeCustomizationWrapper() }); expect(screen.getByTestId('error_badge')).toHaveStyleRule('cursor', 'help'); expect(screen.getByTestId('error_badge')).toHaveStyleRule('padding-top', '1.25rem'); }); it('should set styles on Badge with custom element prop', () => { const customElement = 'FOO'; - render(makeBadge('new', customElement), {wrapper: makeCustomizationWrapper(customElement)}); + render(makeBadge('new', customElement), { wrapper: makeCustomizationWrapper(customElement) }); expect(screen.getByTestId('new_badge')).toHaveStyleRule('cursor', 'help'); expect(screen.getByTestId('new_badge')).toHaveStyleRule('padding-top', '1.75rem'); }); diff --git a/packages/paste-core/components/badge/__tests__/index.spec.tsx b/packages/paste-core/components/badge/__tests__/index.spec.tsx index 5c8c3353db..2668e1579e 100644 --- a/packages/paste-core/components/badge/__tests__/index.spec.tsx +++ b/packages/paste-core/components/badge/__tests__/index.spec.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {render, fireEvent, screen, renderHook} from '@testing-library/react'; -import {InformationIcon} from '@twilio-paste/icons/esm/InformationIcon'; +import { render, fireEvent, screen, renderHook } from '@testing-library/react'; +import { InformationIcon } from '@twilio-paste/icons/esm/InformationIcon'; -import {Badge} from '../src'; -import {useResizeChildIcons} from '../src/hooks'; +import { Badge } from '../src'; +import { useResizeChildIcons } from '../src/hooks'; type NamedChild = React.ReactElement, React.NamedExoticComponent>; @@ -11,7 +11,7 @@ describe('Badge', () => { describe('Hooks', () => { describe('useResizeChildIcons', () => { it('should return return no modifications when child icon size is default', () => { - const {result} = renderHook(() => useResizeChildIcons(['test', ])); + const { result } = renderHook(() => useResizeChildIcons(['test', ])); const icon = (result.current as ArrayLike)[1]; @@ -20,8 +20,8 @@ describe('Badge', () => { }); it('should return the correct modifications when child icon size is not the default', () => { - const {result} = renderHook(() => - useResizeChildIcons(['test', ]) + const { result } = renderHook(() => + useResizeChildIcons(['test', ]), ); const icon = (result.current as ArrayLike)[1]; @@ -38,7 +38,7 @@ describe('Badge', () => { render( Neutral - + , ); expect(badgeRef?.current?.tagName).toEqual('SPAN'); }); @@ -47,7 +47,7 @@ describe('Badge', () => { render( {}} variant="neutral" ref={badgeRef}> Neutral - + , ); expect(badgeRef?.current?.tagName).toEqual('BUTTON'); }); @@ -56,7 +56,7 @@ describe('Badge', () => { render( Neutral - + , ); expect(badgeRef?.current?.tagName).toEqual('A'); }); @@ -66,10 +66,10 @@ describe('Badge', () => { describe('Event handlers', () => { it('should handle onclick event', () => { const onClickMock: jest.Mock = jest.fn(); - const {getByRole} = render( + const { getByRole } = render( Button - + , ); const button = getByRole('button'); @@ -81,10 +81,10 @@ describe('Badge', () => { it('should handle onmouseup event', () => { const onMouseUpMock: jest.Mock = jest.fn(); - const {getByRole} = render( + const { getByRole } = render( null} onMouseUp={onMouseUpMock} variant="success"> Button - + , ); const button = getByRole('button'); @@ -95,10 +95,10 @@ describe('Badge', () => { }); it('should handle onmouseenter event', () => { const onMouseEnterMock: jest.Mock = jest.fn(); - const {getByRole} = render( + const { getByRole } = render( null} onMouseEnter={onMouseEnterMock} variant="success"> Button - + , ); const button = getByRole('button'); @@ -110,10 +110,10 @@ describe('Badge', () => { it('should handle onmouseleave event', () => { const onMouseLeaveMock: jest.Mock = jest.fn(); - const {getByRole} = render( + const { getByRole } = render( null} onMouseLeave={onMouseLeaveMock} variant="success"> Button - + , ); const button = getByRole('button'); @@ -125,10 +125,10 @@ describe('Badge', () => { it('should handle onfocus event', () => { const onFocusMock: jest.Mock = jest.fn(); - const {getByRole} = render( + const { getByRole } = render( null} onFocus={onFocusMock} variant="success"> Button - + , ); const button = getByRole('button'); @@ -140,10 +140,10 @@ describe('Badge', () => { it('should handle onblur event', () => { const onBlurMock: jest.Mock = jest.fn(); - const {getByRole} = render( + const { getByRole } = render( null} onBlur={onBlurMock} variant="success"> Button - + , ); const button = getByRole('button'); @@ -155,10 +155,10 @@ describe('Badge', () => { it('should handle onmousedown event', () => { const onMouseDownMock: jest.Mock = jest.fn(); - const {getByRole} = render( + const { getByRole } = render( null} onMouseDown={onMouseDownMock} variant="success"> Button - + , ); const button = getByRole('button'); @@ -171,10 +171,10 @@ describe('Badge', () => { describe('Render', () => { it('should render badge as button if "as" is "button"', () => { - const {getByRole} = render( + const { getByRole } = render( null} variant="success"> Button - + , ); expect(getByRole('button')).toBeInTheDocument(); }); @@ -183,13 +183,13 @@ describe('Badge', () => { render( null} variant="success"> Button - + , ); const badgeElement = screen.getByRole('button'); - expect(badgeElement).toHaveStyleRule('box-shadow', 'shadowFocus', {target: ':focus'}); - expect(badgeElement).toHaveStyleRule('box-shadow', 'none', {target: ':hover'}); + expect(badgeElement).toHaveStyleRule('box-shadow', 'shadowFocus', { target: ':focus' }); + expect(badgeElement).toHaveStyleRule('box-shadow', 'none', { target: ':hover' }); }); }); }); @@ -198,10 +198,10 @@ describe('Badge', () => { describe('Event handlers', () => { it('should handle mouseup event', () => { const onMouseUpMock: jest.Mock = jest.fn(); - const {getByRole} = render( + const { getByRole } = render( Anchor - + , ); const anchor = getByRole('link'); @@ -212,10 +212,10 @@ describe('Badge', () => { }); it('should handle mouseenter event', () => { const onMouseEnterMock: jest.Mock = jest.fn(); - const {getByRole} = render( + const { getByRole } = render( Anchor - + , ); const anchor = getByRole('link'); @@ -227,10 +227,10 @@ describe('Badge', () => { it('should mouseleave event', () => { const onMouseLeaveMock: jest.Mock = jest.fn(); - const {getByRole} = render( + const { getByRole } = render( Anchor - + , ); const anchor = getByRole('link'); @@ -242,10 +242,10 @@ describe('Badge', () => { it('should handle onblur event', () => { const onBlurMock: jest.Mock = jest.fn(); - const {getByRole} = render( + const { getByRole } = render( Anchor - + , ); const anchor = getByRole('link'); @@ -257,10 +257,10 @@ describe('Badge', () => { it('should handle onmousedown event', () => { const onMouseDownMock: jest.Mock = jest.fn(); - const {getByRole} = render( + const { getByRole } = render( Anchor - + , ); const anchor = getByRole('link'); @@ -273,10 +273,10 @@ describe('Badge', () => { describe('Render', () => { it('should render badge as anchor if "as" is "anchor"', () => { - const {getByRole} = render( + const { getByRole } = render( Anchor - + , ); expect(getByRole('link')).toBeInTheDocument(); }); @@ -285,14 +285,14 @@ describe('Badge', () => { render( Anchor - + , ); const badgeElement = screen.getByRole('link'); - expect(badgeElement).toHaveStyleRule('text-decoration', 'none', {target: ':hover'}); - expect(badgeElement).toHaveStyleRule('box-shadow', 'shadowFocus', {target: ':focus'}); - expect(badgeElement).toHaveStyleRule('text-decoration', 'none', {target: ':focus'}); + expect(badgeElement).toHaveStyleRule('text-decoration', 'none', { target: ':hover' }); + expect(badgeElement).toHaveStyleRule('box-shadow', 'shadowFocus', { target: ':focus' }); + expect(badgeElement).toHaveStyleRule('text-decoration', 'none', { target: ':focus' }); }); }); }); @@ -300,10 +300,10 @@ describe('Badge', () => { describe('Badge as span', () => { describe('Render', () => { it('should render as a span element if as is "span"', () => { - const {getByTestId} = render( + const { getByTestId } = render( test - + , ); const badgeElement = getByTestId('badge-6'); diff --git a/packages/paste-core/components/badge/build.js b/packages/paste-core/components/badge/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/badge/build.js +++ b/packages/paste-core/components/badge/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/badge/src/Badge.tsx b/packages/paste-core/components/badge/src/Badge.tsx index 8ce9f34659..766ff8d46f 100644 --- a/packages/paste-core/components/badge/src/Badge.tsx +++ b/packages/paste-core/components/badge/src/Badge.tsx @@ -1,23 +1,23 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import {secureExternalLink} from '@twilio-paste/anchor'; -import {ErrorIcon} from '@twilio-paste/icons/esm/ErrorIcon'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import { secureExternalLink } from '@twilio-paste/anchor'; +import { ErrorIcon } from '@twilio-paste/icons/esm/ErrorIcon'; -import type {BadgeProps} from './types'; -import {useResizeChildIcons} from './hooks'; -import {badgeBaseStyles, badgeVariantStyles, badgeAnchorStyles, getBadgeButtonStyles} from './styles'; +import type { BadgeProps } from './types'; +import { useResizeChildIcons } from './hooks'; +import { badgeBaseStyles, badgeVariantStyles, badgeAnchorStyles, getBadgeButtonStyles } from './styles'; export const Badge = React.forwardRef( - ({as, href, variant, size = 'default', children, element = 'BADGE', ...props}, ref) => { + ({ as, href, variant, size = 'default', children, element = 'BADGE', ...props }, ref) => { const resizedChildren = useResizeChildIcons(children); - let badgeStyles = {...badgeBaseStyles, ...badgeVariantStyles[variant]}; + let badgeStyles = { ...badgeBaseStyles, ...badgeVariantStyles[variant] }; if (as === 'a') { - badgeStyles = {...badgeStyles, ...badgeAnchorStyles}; + badgeStyles = { ...badgeStyles, ...badgeAnchorStyles }; } if (as === 'button') { - badgeStyles = {...badgeStyles, ...getBadgeButtonStyles(variant)}; + badgeStyles = { ...badgeStyles, ...getBadgeButtonStyles(variant) }; } return ( @@ -37,7 +37,7 @@ export const Badge = React.forwardRef( {resizedChildren} ); - } + }, ); Badge.displayName = 'Badge'; diff --git a/packages/paste-core/components/badge/src/hooks.tsx b/packages/paste-core/components/badge/src/hooks.tsx index cb66889ae6..79475a954e 100644 --- a/packages/paste-core/components/badge/src/hooks.tsx +++ b/packages/paste-core/components/badge/src/hooks.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import {useUIDSeed} from '@twilio-paste/uid-library'; +import { useUIDSeed } from '@twilio-paste/uid-library'; const DEFAULT_ICON_SIZE = 'sizeIcon10'; diff --git a/packages/paste-core/components/badge/src/styles.ts b/packages/paste-core/components/badge/src/styles.ts index 56906027f8..8dd1e2ae40 100644 --- a/packages/paste-core/components/badge/src/styles.ts +++ b/packages/paste-core/components/badge/src/styles.ts @@ -1,6 +1,6 @@ -import type {BoxStyleProps} from '@twilio-paste/box'; +import type { BoxStyleProps } from '@twilio-paste/box'; -import type {BadgeVariants} from './constants'; +import type { BadgeVariants } from './constants'; export const badgeBaseStyles: BoxStyleProps = { alignItems: 'center', @@ -158,8 +158,8 @@ export const badgeButtonStyles: { export const badgeAnchorStyles: BoxStyleProps = { textDecoration: 'underline', cursor: 'pointer', - _hover: {textDecoration: 'none'}, - _focus: {textDecoration: 'none', boxShadow: 'shadowFocus'}, + _hover: { textDecoration: 'none' }, + _focus: { textDecoration: 'none', boxShadow: 'shadowFocus' }, }; export const getBadgeButtonStyles = (variant: typeof BadgeVariants[number]): BoxStyleProps => { @@ -167,7 +167,7 @@ export const getBadgeButtonStyles = (variant: typeof BadgeVariants[number]): Box return { ...variantButtonStyle, cursor: 'pointer', - _hover: {top: '1px', boxShadow: 'none'}, - _focus: {top: '1px', boxShadow: 'shadowFocus'}, + _hover: { top: '1px', boxShadow: 'none' }, + _focus: { top: '1px', boxShadow: 'shadowFocus' }, }; }; diff --git a/packages/paste-core/components/badge/src/types.ts b/packages/paste-core/components/badge/src/types.ts index 86f31832da..7df6410292 100644 --- a/packages/paste-core/components/badge/src/types.ts +++ b/packages/paste-core/components/badge/src/types.ts @@ -1,7 +1,7 @@ -import type {BoxProps} from '@twilio-paste/box'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import type { BoxProps } from '@twilio-paste/box'; +import type { HTMLPasteProps } from '@twilio-paste/types'; -import type {BadgeVariants} from './constants'; +import type { BadgeVariants } from './constants'; export type BadgeSizes = 'default' | 'small'; diff --git a/packages/paste-core/components/badge/stories/customization.stories.tsx b/packages/paste-core/components/badge/stories/customization.stories.tsx index 0070f7dc15..279b9039ab 100644 --- a/packages/paste-core/components/badge/stories/customization.stories.tsx +++ b/packages/paste-core/components/badge/stories/customization.stories.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import {Paragraph} from '@twilio-paste/paragraph'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import type {PasteCustomCSS} from '@twilio-paste/customization'; -import {useTheme} from '@twilio-paste/theme'; -import {Stack} from '@twilio-paste/stack'; -import {Card} from '@twilio-paste/card'; -import type {StoryFn} from '@storybook/react'; +import { Paragraph } from '@twilio-paste/paragraph'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import type { PasteCustomCSS } from '@twilio-paste/customization'; +import { useTheme } from '@twilio-paste/theme'; +import { Stack } from '@twilio-paste/stack'; +import { Card } from '@twilio-paste/card'; +import type { StoryFn } from '@storybook/react'; -import {Badge} from '../src'; -import type {BadgeVariants} from '../src/constants'; +import { Badge } from '../src'; +import type { BadgeVariants } from '../src/constants'; export const makeBadge = (variant: typeof BadgeVariants[number], element?: string): React.ReactElement => ( @@ -16,30 +16,30 @@ export const makeBadge = (variant: typeof BadgeVariants[number], element?: strin ); -export const getStyles = (element = 'BADGE'): {[key: string]: PasteCustomCSS} => { +export const getStyles = (element = 'BADGE'): { [key: string]: PasteCustomCSS } => { return { [element]: { cursor: 'help', variants: { - neutral: {paddingY: 'space30'}, - warning: {paddingY: 'space50'}, - error: {paddingY: 'space60'}, - success: {paddingY: 'space70'}, - new: {paddingY: 'space80'}, - decorative10: {paddingY: 'space40'}, - decorative20: {paddingY: 'space50'}, - decorative30: {paddingY: 'space60'}, - decorative40: {paddingY: 'space70'}, - default: {paddingY: 'space30'}, - info: {paddingY: 'space40'}, + neutral: { paddingY: 'space30' }, + warning: { paddingY: 'space50' }, + error: { paddingY: 'space60' }, + success: { paddingY: 'space70' }, + new: { paddingY: 'space80' }, + decorative10: { paddingY: 'space40' }, + decorative20: { paddingY: 'space50' }, + decorative30: { paddingY: 'space60' }, + decorative40: { paddingY: 'space70' }, + default: { paddingY: 'space30' }, + info: { paddingY: 'space40' }, }, }, }; }; const CustomizationWrapper: React.FC< - React.PropsWithChildren<{variant: typeof BadgeVariants[number]; isTestEnvironment: boolean}> -> = ({variant, isTestEnvironment}): React.ReactElement => { + React.PropsWithChildren<{ variant: typeof BadgeVariants[number]; isTestEnvironment: boolean }> +> = ({ variant, isTestEnvironment }): React.ReactElement => { const theme = useTheme(); const customElement = 'FOO'; return ( @@ -74,43 +74,43 @@ const CustomizationWrapper: React.FC< ); }; -export const Neutral: StoryFn = (_args, {parameters: {isTestEnvironment}}) => ( +export const Neutral: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( ); -export const Warning: StoryFn = (_args, {parameters: {isTestEnvironment}}) => ( +export const Warning: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( ); -export const Error: StoryFn = (_args, {parameters: {isTestEnvironment}}) => ( +export const Error: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( ); -export const Success: StoryFn = (_args, {parameters: {isTestEnvironment}}) => ( +export const Success: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( ); -export const New: StoryFn = (_args, {parameters: {isTestEnvironment}}) => ( +export const New: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( ); -export const Decorative10: StoryFn = (_args, {parameters: {isTestEnvironment}}) => ( +export const Decorative10: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( ); -export const Decorative20: StoryFn = (_args, {parameters: {isTestEnvironment}}) => ( +export const Decorative20: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( ); -export const Decorativ30: StoryFn = (_args, {parameters: {isTestEnvironment}}) => ( +export const Decorativ30: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( ); -export const Decorativ40: StoryFn = (_args, {parameters: {isTestEnvironment}}) => ( +export const Decorativ40: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( ); -export const NeutralCounter: StoryFn = (_args, {parameters: {isTestEnvironment}}) => ( +export const NeutralCounter: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( ); -export const ErrorCounter: StoryFn = (_args, {parameters: {isTestEnvironment}}) => ( +export const ErrorCounter: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( ); -export const Default: StoryFn = (_args, {parameters: {isTestEnvironment}}) => ( +export const Default: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( ); -export const Info: StoryFn = (_args, {parameters: {isTestEnvironment}}) => ( +export const Info: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( ); diff --git a/packages/paste-core/components/badge/stories/index.stories.tsx b/packages/paste-core/components/badge/stories/index.stories.tsx index 6ec31d06ec..6bf5adef78 100644 --- a/packages/paste-core/components/badge/stories/index.stories.tsx +++ b/packages/paste-core/components/badge/stories/index.stories.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import {Heading} from '@twilio-paste/heading'; -import {InformationIcon} from '@twilio-paste/icons/esm/InformationIcon'; -import {WarningIcon} from '@twilio-paste/icons/esm/WarningIcon'; -import {SuccessIcon} from '@twilio-paste/icons/esm/SuccessIcon'; -import {ErrorIcon} from '@twilio-paste/icons/esm/ErrorIcon'; -import {NewIcon} from '@twilio-paste/icons/esm/NewIcon'; -import {UsersIcon} from '@twilio-paste/icons/esm/UsersIcon'; -import {styled, css} from '@twilio-paste/styling-library'; +import { Heading } from '@twilio-paste/heading'; +import { InformationIcon } from '@twilio-paste/icons/esm/InformationIcon'; +import { WarningIcon } from '@twilio-paste/icons/esm/WarningIcon'; +import { SuccessIcon } from '@twilio-paste/icons/esm/SuccessIcon'; +import { ErrorIcon } from '@twilio-paste/icons/esm/ErrorIcon'; +import { NewIcon } from '@twilio-paste/icons/esm/NewIcon'; +import { UsersIcon } from '@twilio-paste/icons/esm/UsersIcon'; +import { styled, css } from '@twilio-paste/styling-library'; -import {Badge} from '../src'; +import { Badge } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -24,7 +24,7 @@ const Wrapper = styled.div( rowGap: 'space60', flexWrap: 'wrap', marginBottom: 'space80', - }) + }), ); export const AllBadges = (): JSX.Element => ( diff --git a/packages/paste-core/components/base-radio-checkbox/__tests__/base-radio-checkbox.test.tsx b/packages/paste-core/components/base-radio-checkbox/__tests__/base-radio-checkbox.test.tsx index dda5120332..56f015cc9d 100644 --- a/packages/paste-core/components/base-radio-checkbox/__tests__/base-radio-checkbox.test.tsx +++ b/packages/paste-core/components/base-radio-checkbox/__tests__/base-radio-checkbox.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {CheckboxCheckIcon} from '@twilio-paste/icons/esm/CheckboxCheckIcon'; +import { render, screen } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { CheckboxCheckIcon } from '@twilio-paste/icons/esm/CheckboxCheckIcon'; import { BaseRadioCheckboxControl, @@ -12,7 +12,7 @@ import { describe('Base radio checkbox HTML attributes', () => { it('should set element data attribute on base radio checkbox components', () => { - const {container} = render( + const { container } = render( <> @@ -21,23 +21,23 @@ describe('Base radio checkbox HTML attributes', () => { Label Help Text - + , ); expect(screen.getByTestId('label').getAttribute('data-paste-element')).toEqual('LABEL'); expect(screen.getByTestId('control').getAttribute('data-paste-element')).toEqual('BASE_RADIO_CHECKBOX_CONTROL'); expect(screen.getByTestId('label_text').getAttribute('data-paste-element')).toEqual( - 'BASE_RADIO_CHECKBOX_LABEL_TEXT' + 'BASE_RADIO_CHECKBOX_LABEL_TEXT', ); expect(container.querySelector('[data-paste-element="BASE_RADIO_CHECKBOX_HELP_TEXT_WRAPPER"]')).toBeInTheDocument(); expect( // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore object isn't null - container.querySelector('[data-paste-element="BASE_RADIO_CHECKBOX_HELP_TEXT_WRAPPER"]').firstElementChild + container.querySelector('[data-paste-element="BASE_RADIO_CHECKBOX_HELP_TEXT_WRAPPER"]').firstElementChild, ).toHaveAttribute('data-paste-element', 'HELP_TEXT'); }); it('should set element data attribute on base radio checkbox components with custom element prop', () => { - const {container} = render( + const { container } = render( <> @@ -50,7 +50,7 @@ describe('Base radio checkbox HTML attributes', () => { Help Text - + , ); expect(screen.getByTestId('label').getAttribute('data-paste-element')).toEqual('fee'); expect(screen.getByTestId('control').getAttribute('data-paste-element')).toEqual('fi'); @@ -60,20 +60,20 @@ describe('Base radio checkbox HTML attributes', () => { // @ts-ignore object isn't null expect(container.querySelector('[data-paste-element="fum"]').firstElementChild).toHaveAttribute( 'data-paste-element', - 'HELP_TEXT' + 'HELP_TEXT', ); }); }); describe('Base radio checkbox customization', () => { it('should add custom styles to base radio checkbox', () => { - const {container} = render( + const { container } = render( @@ -83,7 +83,7 @@ describe('Base radio checkbox customization', () => { Label Help Text - + , ); /* @@ -96,18 +96,18 @@ describe('Base radio checkbox customization', () => { expect(screen.getByTestId('label_text')).toHaveStyleRule('color', 'rgb(14, 124, 58)'); expect(container.querySelector('[data-paste-element="BASE_RADIO_CHECKBOX_HELP_TEXT_WRAPPER"]')).toHaveStyleRule( 'margin-left', - '2rem' + '2rem', ); }); it('should add custom styles to base radio checkbox with custom element prop', () => { - const {container} = render( + const { container } = render( @@ -121,7 +121,7 @@ describe('Base radio checkbox customization', () => { Help Text - + , ); /* * matcher selects the last style rule in the stylesheet, not the last style rule that is currently applied diff --git a/packages/paste-core/components/base-radio-checkbox/build.js b/packages/paste-core/components/base-radio-checkbox/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/base-radio-checkbox/build.js +++ b/packages/paste-core/components/base-radio-checkbox/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/base-radio-checkbox/src/BaseRadioCheckbox.tsx b/packages/paste-core/components/base-radio-checkbox/src/BaseRadioCheckbox.tsx index 9b36e737a6..66bd49de11 100644 --- a/packages/paste-core/components/base-radio-checkbox/src/BaseRadioCheckbox.tsx +++ b/packages/paste-core/components/base-radio-checkbox/src/BaseRadioCheckbox.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import type {TextProps} from '@twilio-paste/text'; -import {Text} from '@twilio-paste/text'; -import type {SiblingBoxProps} from '@twilio-paste/sibling-box'; -import {SiblingBox} from '@twilio-paste/sibling-box'; -import type {LabelProps} from '@twilio-paste/label'; -import {Label} from '@twilio-paste/label'; -import {HelpText} from '@twilio-paste/help-text'; -import type {BoxProps} from '@twilio-paste/box'; +import { Box } from '@twilio-paste/box'; +import type { TextProps } from '@twilio-paste/text'; +import { Text } from '@twilio-paste/text'; +import type { SiblingBoxProps } from '@twilio-paste/sibling-box'; +import { SiblingBox } from '@twilio-paste/sibling-box'; +import type { LabelProps } from '@twilio-paste/label'; +import { Label } from '@twilio-paste/label'; +import { HelpText } from '@twilio-paste/help-text'; +import type { BoxProps } from '@twilio-paste/box'; export interface BaseRadioCheckboxControlProps extends SiblingBoxProps, Pick { children: NonNullable; @@ -15,7 +15,7 @@ export interface BaseRadioCheckboxControlProps extends SiblingBoxProps, Pick( - ({children, disabled, applyHoverStyles = false, element = 'BASE_RADIO_CHECKBOX_CONTROL', ...props}, ref) => { + ({ children, disabled, applyHoverStyles = false, element = 'BASE_RADIO_CHECKBOX_CONTROL', ...props }, ref) => { return ( ); - } + }, ); BaseRadioCheckboxControl.displayName = 'BaseRadioCheckboxControl'; @@ -117,7 +117,7 @@ export type BaseRadioCheckboxLabelProps = LabelProps & { children: NonNullable; }; const BaseRadioCheckboxLabel = React.forwardRef( - ({children, ...props}, ref) => { + ({ children, ...props }, ref) => { return ( ); - } + }, ); BaseRadioCheckboxLabel.displayName = 'BaseRadioCheckboxLabel'; @@ -133,13 +133,13 @@ export interface BaseRadioCheckboxLabelTextProps extends Omit, children: NonNullable; } const BaseRadioCheckboxLabelText = React.forwardRef( - ({children, element = 'BASE_RADIO_CHECKBOX_LABEL_TEXT', ...props}, ref) => { + ({ children, element = 'BASE_RADIO_CHECKBOX_LABEL_TEXT', ...props }, ref) => { return ( {children} ); - } + }, ); BaseRadioCheckboxLabelText.displayName = 'BaseRadioCheckboxLabelText'; @@ -148,7 +148,7 @@ export interface BaseRadioCheckboxHelpTextProps extends Pick( - ({children, helpTextId, element = 'BASE_RADIO_CHECKBOX_HELP_TEXT_WRAPPER'}, ref) => { + ({ children, helpTextId, element = 'BASE_RADIO_CHECKBOX_HELP_TEXT_WRAPPER' }, ref) => { return ( @@ -156,8 +156,8 @@ const BaseRadioCheckboxHelpText = React.forwardRef ); - } + }, ); BaseRadioCheckboxHelpText.displayName = 'BaseRadioCheckboxHelpText'; -export {BaseRadioCheckboxHelpText, BaseRadioCheckboxControl, BaseRadioCheckboxLabel, BaseRadioCheckboxLabelText}; +export { BaseRadioCheckboxHelpText, BaseRadioCheckboxControl, BaseRadioCheckboxLabel, BaseRadioCheckboxLabelText }; diff --git a/packages/paste-core/components/breadcrumb/__tests__/breadcrumb.spec.tsx b/packages/paste-core/components/breadcrumb/__tests__/breadcrumb.spec.tsx index 0e2255deeb..835cc6ae2d 100644 --- a/packages/paste-core/components/breadcrumb/__tests__/breadcrumb.spec.tsx +++ b/packages/paste-core/components/breadcrumb/__tests__/breadcrumb.spec.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render, screen } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {Breadcrumb, BreadcrumbItem} from '../src'; +import { Breadcrumb, BreadcrumbItem } from '../src'; describe('Breadcrumb', () => { const BreadcrumbExample = (): JSX.Element => { @@ -15,7 +15,7 @@ describe('Breadcrumb', () => { }; it('should render a nav with correct aria-label', () => { - const {getByRole} = render(); + const { getByRole } = render(); expect(getByRole('navigation').getAttribute('aria-label')).toBe('breadcrumb'); }); @@ -41,17 +41,17 @@ describe('Breadcrumb', () => { render( foo - + , ); const renderedAnchor = screen.getAllByRole('link'); expect(renderedAnchor).not.toBeNull(); }); it('should render text with correct aria-current', () => { - const {getByText} = render( + const { getByText } = render( foo - + , ); expect(getByText('foo').getAttribute('aria-current')).toBe('page'); }); @@ -62,7 +62,7 @@ describe('Breadcrumb', () => { foo - + , ); const breadcrumbAnchor = screen.getByRole('listitem').firstChild as HTMLElement; expect(breadcrumbAnchor.getAttribute('data-testid')).toEqual('breadcrumb-anchor'); @@ -78,7 +78,7 @@ describe('Breadcrumb', () => { First - + , ); expect(screen.getByTestId('breadcrumb').getAttribute('data-paste-element')).toEqual('TEST_PARENT'); @@ -108,7 +108,7 @@ describe('Breadcrumb', () => { First - + , ); expect(screen.getByTestId('breadcrumb').getAttribute('data-paste-element')).toEqual('TEST_PARENT'); @@ -139,7 +139,7 @@ describe('Breadcrumb', () => { First - + , ); expect(screen.getByTestId('breadcrumb').getAttribute('data-paste-element')).toEqual('BREADCRUMB'); @@ -169,14 +169,14 @@ describe('Breadcrumb', () => { baseTheme="default" theme={TestTheme} elements={{ - BREADCRUMB: {fontVariantNumeric: 'slashed-zero'}, - BREADCRUMB_ITEM: {fontWeight: 'fontWeightMedium'}, + BREADCRUMB: { fontVariantNumeric: 'slashed-zero' }, + BREADCRUMB_ITEM: { fontWeight: 'fontWeightMedium' }, BREADCRUMB_ANCHOR: { textDecoration: 'underline wavy', color: 'colorTextInverseWeaker', - ':hover': {color: 'colorLinkStronger'}, + ':hover': { color: 'colorLinkStronger' }, }, - BREADCRUMB_TEXT: {letterSpacing: '0.25rem'}, + BREADCRUMB_TEXT: { letterSpacing: '0.25rem' }, BREADCRUMB_SEPARATOR: { color: 'colorTextBrandHighlight', }, @@ -191,7 +191,7 @@ describe('Breadcrumb', () => { Third - + , ); expect(screen.getByTestId('breadcrumb')).toHaveStyleRule('font-variant-numeric', 'slashed-zero'); @@ -226,18 +226,18 @@ describe('Breadcrumb', () => { baseTheme="default" theme={TestTheme} elements={{ - CUSTOM: {marginY: 'space60', fontVariantNumeric: 'ordinal'}, - CUSTOM_CHILD_ITEM: {fontWeight: 'fontWeightLight'}, - CUSTOM_CHILD_ANCHOR: {fontWeight: 'fontWeightBold'}, - CUSTOM_CHILD_SEPARATOR: {fontWeight: 'fontWeightLight'}, - CUSTOM_CHILD_TEXT: {fontWeight: 'fontWeightSemibold'}, - CUSTOM_ITEM: {fontWeight: 'fontWeightBold'}, - CUSTOM_ANCHOR: {letterSpacing: '0.25rem'}, + CUSTOM: { marginY: 'space60', fontVariantNumeric: 'ordinal' }, + CUSTOM_CHILD_ITEM: { fontWeight: 'fontWeightLight' }, + CUSTOM_CHILD_ANCHOR: { fontWeight: 'fontWeightBold' }, + CUSTOM_CHILD_SEPARATOR: { fontWeight: 'fontWeightLight' }, + CUSTOM_CHILD_TEXT: { fontWeight: 'fontWeightSemibold' }, + CUSTOM_ITEM: { fontWeight: 'fontWeightBold' }, + CUSTOM_ANCHOR: { letterSpacing: '0.25rem' }, CUSTOM_SEPARATOR: { color: 'colorTextBrandHighlight', }, - BREADCRUMB_ITEM: {fontWeight: 'fontWeightLight'}, - BREADCRUMB_ANCHOR: {letterSpacing: '0.5rem'}, + BREADCRUMB_ITEM: { fontWeight: 'fontWeightLight' }, + BREADCRUMB_ANCHOR: { letterSpacing: '0.5rem' }, BREADCRUMB_SEPARATOR: { color: 'colorText', }, @@ -254,7 +254,7 @@ describe('Breadcrumb', () => { Third - + , ); expect(screen.getByTestId('breadcrumb')).toHaveStyleRule('font-variant-numeric', 'ordinal'); diff --git a/packages/paste-core/components/breadcrumb/build.js b/packages/paste-core/components/breadcrumb/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/breadcrumb/build.js +++ b/packages/paste-core/components/breadcrumb/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/breadcrumb/src/index.tsx b/packages/paste-core/components/breadcrumb/src/index.tsx index 9362bf4e65..6c68b0958b 100644 --- a/packages/paste-core/components/breadcrumb/src/index.tsx +++ b/packages/paste-core/components/breadcrumb/src/index.tsx @@ -1,13 +1,15 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps, BoxElementProps} from '@twilio-paste/box'; -import {Anchor} from '@twilio-paste/anchor'; -import type {AnchorProps} from '@twilio-paste/anchor'; -import {Text, safelySpreadTextProps} from '@twilio-paste/text'; -import {useUIDSeed} from '@twilio-paste/uid-library'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps, BoxElementProps } from '@twilio-paste/box'; +import { Anchor } from '@twilio-paste/anchor'; +import type { AnchorProps } from '@twilio-paste/anchor'; +import { Text, safelySpreadTextProps } from '@twilio-paste/text'; +import { useUIDSeed } from '@twilio-paste/uid-library'; +import type { HTMLPasteProps } from '@twilio-paste/types'; -const BreadcrumbSeparator: React.FC> = ({element}) => ( +const BreadcrumbSeparator: React.FC> = ({ + element, +}) => ( ( - ({children, element, parentElement, href, last, ...props}, ref) => { + ({ children, element, parentElement, href, last, ...props }, ref) => { const elementName = element || parentElement || DEFAULT_ELEMENT_NAME; return ( } ); - } + }, ); BreadcrumbItem.displayName = 'BreadcrumbItem'; @@ -90,13 +92,13 @@ export interface BreadcrumbProps extends HTMLPasteProps<'nav'> { } const Breadcrumb = React.forwardRef( - ({children, element = DEFAULT_ELEMENT_NAME, ...props}, ref) => { + ({ children, element = DEFAULT_ELEMENT_NAME, ...props }, ref) => { const [childrenCount, validChildren] = React.useMemo( () => [ React.Children.count(children), React.Children.toArray(children).filter((child) => React.isValidElement(child) || typeof child === 'string'), ], - [children] + [children], ); const keySeed = useUIDSeed(); @@ -113,9 +115,9 @@ const Breadcrumb = React.forwardRef( ); - } + }, ); Breadcrumb.displayName = 'Breadcrumb'; -export {Breadcrumb, BreadcrumbItem}; +export { Breadcrumb, BreadcrumbItem }; diff --git a/packages/paste-core/components/breadcrumb/stories/index.stories.tsx b/packages/paste-core/components/breadcrumb/stories/index.stories.tsx index afe5237b63..3812982c0e 100644 --- a/packages/paste-core/components/breadcrumb/stories/index.stories.tsx +++ b/packages/paste-core/components/breadcrumb/stories/index.stories.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {Box} from '@twilio-paste/box'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {useTheme} from '@twilio-paste/theme'; -import {Truncate} from '@twilio-paste/truncate'; -import {useUID} from '@twilio-paste/uid-library'; +import type { StoryFn } from '@storybook/react'; +import { Box } from '@twilio-paste/box'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { useTheme } from '@twilio-paste/theme'; +import { Truncate } from '@twilio-paste/truncate'; +import { useUID } from '@twilio-paste/uid-library'; -import {Breadcrumb, BreadcrumbItem} from '../src'; +import { Breadcrumb, BreadcrumbItem } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -54,7 +54,7 @@ export const AnchorsWithTruncation = (): React.ReactNode => { AnchorsWithTruncation.storyName = 'Anchors with truncation '; -export const CustomizationBreadcrumb: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const CustomizationBreadcrumb: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); const uniqueLandmarkIdentifier = useUID(); return ( @@ -62,14 +62,14 @@ export const CustomizationBreadcrumb: StoryFn = (_args, {parameters: {isTestEnvi disableAnimations={isTestEnvironment} theme={currentTheme} elements={{ - BREADCRUMB: {fontVariantNumeric: 'slashed-zero'}, - BREADCRUMB_ITEM: {fontWeight: 'fontWeightMedium'}, + BREADCRUMB: { fontVariantNumeric: 'slashed-zero' }, + BREADCRUMB_ITEM: { fontWeight: 'fontWeightMedium' }, BREADCRUMB_ANCHOR: { textDecoration: 'underline wavy', color: 'colorTextWeak', - ':hover': {color: 'colorLinkStronger'}, + ':hover': { color: 'colorLinkStronger' }, }, - BREADCRUMB_TEXT: {letterSpacing: '0.25rem'}, + BREADCRUMB_TEXT: { letterSpacing: '0.25rem' }, BREADCRUMB_SEPARATOR: { color: 'colorTextBrandHighlight', }, @@ -94,7 +94,7 @@ CustomizationBreadcrumb.parameters = { }, }; -export const CustomizationBreadcrumbWithCustomName: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const CustomizationBreadcrumbWithCustomName: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); const uniqueLandmarkIdentifier = useUID(); return ( @@ -102,18 +102,18 @@ export const CustomizationBreadcrumbWithCustomName: StoryFn = (_args, {parameter disableAnimations={isTestEnvironment} theme={currentTheme} elements={{ - DOGS_BREADCRUMB: {marginY: 'space60', fontVariantNumeric: 'ordinal'}, - GOOD: {fontWeight: 'fontWeightLight'}, - GOOD_ANCHOR: {fontWeight: 'fontWeightBold'}, - GOOD_SEPARATOR: {fontWeight: 'fontWeightLight'}, - DOGS: {fontWeight: 'fontWeightNormal'}, - DOGS_SEPARATOR: {fontWeight: 'fontWeightNormal'}, - SAY: {fontWeight: 'fontWeightMedium'}, - SAY_SEPARATOR: {fontWeight: 'fontWeightMedium'}, - BORK: {fontWeight: 'fontWeightSemibold'}, - BORK_SEPARATOR: {fontWeight: 'fontWeightSemibold'}, - WOOF: {fontWeight: 'fontWeightBold'}, - WOOF_SEPARATOR: {fontWeight: 'fontWeightBold'}, + DOGS_BREADCRUMB: { marginY: 'space60', fontVariantNumeric: 'ordinal' }, + GOOD: { fontWeight: 'fontWeightLight' }, + GOOD_ANCHOR: { fontWeight: 'fontWeightBold' }, + GOOD_SEPARATOR: { fontWeight: 'fontWeightLight' }, + DOGS: { fontWeight: 'fontWeightNormal' }, + DOGS_SEPARATOR: { fontWeight: 'fontWeightNormal' }, + SAY: { fontWeight: 'fontWeightMedium' }, + SAY_SEPARATOR: { fontWeight: 'fontWeightMedium' }, + BORK: { fontWeight: 'fontWeightSemibold' }, + BORK_SEPARATOR: { fontWeight: 'fontWeightSemibold' }, + WOOF: { fontWeight: 'fontWeightBold' }, + WOOF_SEPARATOR: { fontWeight: 'fontWeightBold' }, }} > diff --git a/packages/paste-core/components/button-group/__tests__/index.spec.tsx b/packages/paste-core/components/button-group/__tests__/index.spec.tsx index d5dd4442c2..bf071e2b6c 100644 --- a/packages/paste-core/components/button-group/__tests__/index.spec.tsx +++ b/packages/paste-core/components/button-group/__tests__/index.spec.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import {Button} from '@twilio-paste/button'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render, screen } from '@testing-library/react'; +import { Button } from '@twilio-paste/button'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {ButtonGroup} from '../src'; -import {Unattached} from '../stories/index.stories'; +import { ButtonGroup } from '../src'; +import { Unattached } from '../stories/index.stories'; describe('ButtonGroup', () => { it('should render a group visibly into document', () => { @@ -27,7 +27,7 @@ describe('ButtonGroup', () => { - + , ); const btnGroup = screen.getByRole('group'); expect(btnGroup).toHaveAttribute('aria-label', 'test'); @@ -52,11 +52,11 @@ describe('ButtonGroup customization', () => { - + , ); const btnGroup = screen.getByRole('group'); @@ -68,11 +68,11 @@ describe('ButtonGroup customization', () => { - + , ); const btnGroup = screen.getByRole('group'); diff --git a/packages/paste-core/components/button-group/build.js b/packages/paste-core/components/button-group/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/button-group/build.js +++ b/packages/paste-core/components/button-group/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/button-group/src/ButtonGroup.tsx b/packages/paste-core/components/button-group/src/ButtonGroup.tsx index 85e113bb9b..53489d6ce9 100644 --- a/packages/paste-core/components/button-group/src/ButtonGroup.tsx +++ b/packages/paste-core/components/button-group/src/ButtonGroup.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import {styled, css} from '@twilio-paste/styling-library'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import { styled, css } from '@twilio-paste/styling-library'; const AttachedStyled = styled.span( css({ @@ -34,7 +34,7 @@ const AttachedStyled = styled.span( borderTopLeftRadius: 0, borderBottomLeftRadius: 0, }, - }) + }), ); const UnattachedStyled = styled.span( @@ -45,7 +45,7 @@ const UnattachedStyled = styled.span( '& > button:first-of-type': { marginLeft: 'space0', }, - }) + }), ); export interface ButtonGroupProps extends Omit, 'children'> { @@ -55,7 +55,7 @@ export interface ButtonGroupProps extends Omit( - ({element = 'BUTTON_GROUP', children, attached = false, ...props}, ref) => { + ({ element = 'BUTTON_GROUP', children, attached = false, ...props }, ref) => { return ( ( {children} ); - } + }, ); ButtonGroup.displayName = 'ButtonGroup'; diff --git a/packages/paste-core/components/button-group/stories/index.stories.tsx b/packages/paste-core/components/button-group/stories/index.stories.tsx index 7c21df78f1..402b54f318 100644 --- a/packages/paste-core/components/button-group/stories/index.stories.tsx +++ b/packages/paste-core/components/button-group/stories/index.stories.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {useUID} from '@twilio-paste/uid-library'; -import {Button} from '@twilio-paste/button'; -import {Popover, PopoverContainer, PopoverButton} from '@twilio-paste/popover'; -import {Text} from '@twilio-paste/text'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {useTheme} from '@twilio-paste/theme'; +import type { StoryFn } from '@storybook/react'; +import { useUID } from '@twilio-paste/uid-library'; +import { Button } from '@twilio-paste/button'; +import { Popover, PopoverContainer, PopoverButton } from '@twilio-paste/popover'; +import { Text } from '@twilio-paste/text'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { useTheme } from '@twilio-paste/theme'; -import {ButtonGroup} from '../src'; -import type {ButtonGroupProps} from '../src'; +import { ButtonGroup } from '../src'; +import type { ButtonGroupProps } from '../src'; // eslint-disable-next-line import/no-default-export export default { diff --git a/packages/paste-core/components/button/__tests__/button.test.tsx b/packages/paste-core/components/button/__tests__/button.test.tsx index 752a8781cf..e83321efea 100644 --- a/packages/paste-core/components/button/__tests__/button.test.tsx +++ b/packages/paste-core/components/button/__tests__/button.test.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import {PlusIcon} from '@twilio-paste/icons/esm/PlusIcon'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { PlusIcon } from '@twilio-paste/icons/esm/PlusIcon'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {Button} from '../src'; +import { Button } from '../src'; const NOOP = (): void => {}; const HREF = 'https://twilio.paste.design'; @@ -19,8 +19,8 @@ describe('Button', () => { render( - ) + , + ), ).toThrow(); spy.mockRestore(); }); @@ -33,8 +33,8 @@ describe('Button', () => { render( - ) + , + ), ).toThrow(); spy.mockRestore(); }); @@ -47,15 +47,15 @@ describe('Button', () => { render( - ) + , + ), ).toThrow(); expect(() => render( - ) + , + ), ).toThrow(); spy.mockRestore(); }); @@ -68,15 +68,15 @@ describe('Button', () => { render( - ) + , + ), ).toThrow(); expect(() => render( - ) + , + ), ).toThrow(); spy.mockRestore(); }); @@ -89,16 +89,16 @@ describe('Button', () => { render( - ) + , + ), ).toThrow(); expect(() => render( - ) + , + ), ).toThrow(); spy.mockRestore(); }); @@ -111,8 +111,8 @@ describe('Button', () => { render( - ) + , + ), ).toThrow(); spy.mockRestore(); }); @@ -125,8 +125,8 @@ describe('Button', () => { render( - ) + , + ), ).toThrow(); spy.mockRestore(); }); @@ -139,8 +139,8 @@ describe('Button', () => { render( - ) + , + ), ).toThrow(); spy.mockRestore(); }); @@ -177,42 +177,42 @@ describe('Button', () => { describe('Button aria attributes', () => { it('Has an aria-expanded attribute', () => { - const {getByRole} = render( + const { getByRole } = render( + , ); expect(getByRole('button')).toHaveAttribute('aria-expanded', 'true'); }); it('Has an aria-haspopup attribute', () => { - const {getByRole} = render( + const { getByRole } = render( + , ); expect(getByRole('button')).toHaveAttribute('aria-haspopup', 'true'); }); it('Has an aria-controls attribute', () => { - const {getByRole} = render( + const { getByRole } = render( + , ); expect(getByRole('button')).toHaveAttribute('aria-controls', 'some-id'); }); it('Has an aria-busy attribute when loading', () => { - const {getByRole} = render( + const { getByRole } = render( - + , ); const button = getByRole('button'); @@ -222,10 +222,10 @@ describe('Button', () => { }); it('Has disabled set on HTML when disabled', () => { - const {getByRole} = render( + const { getByRole } = render( + , ); expect(getByRole('button')).toBeDisabled(); @@ -234,10 +234,10 @@ describe('Button', () => { describe('Button data attributes', () => { it('Has an data-foo attribute', () => { - const {getByRole} = render( + const { getByRole } = render( + , ); expect(getByRole('button')).toHaveAttribute('data-foo', 'test'); @@ -246,10 +246,10 @@ describe('Button', () => { describe('Button render as', () => { it('Renders a button as a link', () => { - const {getByRole} = render( + const { getByRole } = render( + , ); expect(getByRole('link')).toBeInTheDocument(); @@ -258,10 +258,10 @@ describe('Button', () => { describe('Button margin styles', () => { it('Renders a button with margin: space0', () => { - const {getByTestId} = render( + const { getByTestId } = render( + , ); expect(getByTestId('button-margin')).toHaveStyleRule('margin', 'space0'); }); @@ -269,15 +269,15 @@ describe('Button', () => { describe('Button inner padding', () => { it('should not set padding for buttons with only one child', () => { - const {getByText} = render(); + const { getByText } = render(); expect(getByText('Hello')).not.toHaveStyleRule('padding', 'undefined'); }); it('should set padding between rendered children', () => { - const {getByText} = render( + const { getByText } = render( + , ); expect(getByText('Hello')).toHaveStyleRule('column-gap', 'space20'); }); @@ -293,7 +293,7 @@ describe('Button', () => { const onFocusMock: jest.Mock = jest.fn(); const onBlurMock: jest.Mock = jest.fn(); - const {getByRole} = render( + const { getByRole } = render( + , ); const button = getByRole('button'); @@ -331,10 +331,10 @@ describe('Button', () => { describe('button default styles', () => { it('should have the correct styles for the primary variant', () => { - const {getByTestId, getByText} = render( + const { getByTestId, getByText } = render( + , ); const button = getByTestId('primary-styles'); @@ -348,10 +348,10 @@ describe('Button', () => { }); it('should have the correct styles for the primary_icon variant', () => { - const {getByTestId} = render( + const { getByTestId } = render( + , ); const button = getByTestId('primary-icon-styles'); @@ -361,10 +361,10 @@ describe('Button', () => { }); it('should have the correct styles for the secondary variant', () => { - const {getByTestId, getByText} = render( + const { getByTestId, getByText } = render( + , ); const button = getByTestId('secondary-styles'); @@ -378,10 +378,10 @@ describe('Button', () => { }); it('should have the correct styles for the secondary_icon variant', () => { - const {getByTestId} = render( + const { getByTestId } = render( + , ); const button = getByTestId('secondary-icon-styles'); @@ -391,10 +391,10 @@ describe('Button', () => { }); it('should have the correct styles for the destructive variant', () => { - const {getByTestId, getByText} = render( + const { getByTestId, getByText } = render( + , ); const button = getByTestId('destructive-styles'); @@ -408,10 +408,10 @@ describe('Button', () => { }); it('should have the correct styles for the destructive_icon variant', () => { - const {getByTestId} = render( + const { getByTestId } = render( + , ); const button = getByTestId('destructive-icon-styles'); @@ -421,10 +421,10 @@ describe('Button', () => { }); it('should have the correct styles for the destructive_secondary variant', () => { - const {getByTestId, getByText} = render( + const { getByTestId, getByText } = render( + , ); const button = getByTestId('destructive_secondary-styles'); @@ -437,10 +437,10 @@ describe('Button', () => { }); it('should have the correct styles for the destructive_link variant', () => { - const {getByTestId, getByText} = render( + const { getByTestId, getByText } = render( + , ); const button = getByTestId('destructive_link-styles'); @@ -452,10 +452,10 @@ describe('Button', () => { }); it('should have the correct styles for the link variant', () => { - const {getByTestId, getByText} = render( + const { getByTestId, getByText } = render( + , ); const button = getByTestId('link-styles'); @@ -468,10 +468,10 @@ describe('Button', () => { }); it('should have the correct styles for the reset variant', () => { - const {getByText, getByTestId} = render( + const { getByText, getByTestId } = render( + , ); expect(getByText('Reset')).not.toHaveStyleRule('justify-content', 'center'); @@ -479,12 +479,12 @@ describe('Button', () => { }); it('should have the correct styles for a link button in loading state', () => { - const {getByText, getByTestId} = render( + const { getByText, getByTestId } = render( - + , ); const buttonContent = getByText('Loading link'); @@ -506,10 +506,10 @@ describe('Button', () => { }); it('should have the correct styles for the link variant in disabled state', () => { - const {getByTestId} = render( + const { getByTestId } = render( + , ); const buttonComponent = getByTestId('disabled-link-styles'); @@ -526,7 +526,7 @@ describe('Button', () => { render( + , ); const externalAnchor = screen.getByRole('link'); const showExternalIcon = externalAnchor.querySelector('[data-paste-element="ICON"]'); @@ -541,7 +541,7 @@ describe('Button', () => { i18nExternalLinkLabel="(este enlace redirige a una página externa)" > Ir a página externa - + , ); const externalAnchor = screen.getByRole('link'); const showExternalIcon = externalAnchor.querySelector('[data-paste-element="ICON"]'); @@ -551,10 +551,10 @@ describe('Button', () => { describe('toggle button', () => { it('Does not have aria-pressed attribute when pressed undefined', () => { - const {getByRole} = render( + const { getByRole } = render( - + , ); const button = getByRole('button'); @@ -563,12 +563,12 @@ describe('Button', () => { }); it('Has an aria-pressed attribute when pressed is false', () => { - const {getByRole} = render( + const { getByRole } = render( - + , ); const button = getByRole('button'); @@ -577,12 +577,12 @@ describe('Button', () => { }); it('Has an aria-pressed attribute when pressed is true', () => { - const {getByRole} = render( + const { getByRole } = render( - + , ); const button = getByRole('button'); diff --git a/packages/paste-core/components/button/__tests__/customization.test.tsx b/packages/paste-core/components/button/__tests__/customization.test.tsx index aed07e3f3c..3738caedd6 100644 --- a/packages/paste-core/components/button/__tests__/customization.test.tsx +++ b/packages/paste-core/components/button/__tests__/customization.test.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {render} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import type {PasteCustomCSS} from '@twilio-paste/customization'; +import { render } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import type { PasteCustomCSS } from '@twilio-paste/customization'; -import {AnyButton} from '../stories/customization.stories'; +import { AnyButton } from '../stories/customization.stories'; const customButtonStyles = { backgroundColor: 'colorBackgroundBusy', @@ -12,8 +12,8 @@ const customButtonStyles = { borderColor: 'colorBorderError', fontWeight: 'fontWeightLight', variants: { - destructive: {backgroundColor: 'colorBackgroundDestructiveStrongest', color: 'colorTextWeaker'}, - link: {padding: 'space40', borderRadius: 'borderRadiusCircle'}, + destructive: { backgroundColor: 'colorBackgroundDestructiveStrongest', color: 'colorTextWeaker' }, + link: { padding: 'space40', borderRadius: 'borderRadiusCircle' }, destructive_link: { padding: 'space40', borderRadius: 'borderRadiusCircle', @@ -26,22 +26,22 @@ const customButtonStyles = { describe('Button customization', () => { it('should set element data attribute on Button', () => { - const {getByTestId} = render(); + const { getByTestId } = render(); const button = getByTestId('button_for_customization'); expect(button.getAttribute('data-paste-element')).toEqual('BUTTON'); }); it('should set custom element data attribute on Button', () => { - const {getByTestId} = render(); + const { getByTestId } = render(); const button = getByTestId('button_for_customization'); expect(button.getAttribute('data-paste-element')).toEqual('foo'); }); it('should add custom styles to Button', () => { - const {getByTestId} = render( - + const { getByTestId } = render( + - + , ); const button = getByTestId('button_for_customization'); expect(button).toHaveStyleRule('background-color', 'rgb(244, 124, 34)'); @@ -50,10 +50,10 @@ describe('Button customization', () => { }); it('should add custom styles to Button variants', () => { - const {getByTestId} = render( - + const { getByTestId } = render( + - + , ); const button = getByTestId('button_for_customization'); expect(button).toHaveStyleRule('background-color', 'rgb(246, 177, 177)'); @@ -62,10 +62,10 @@ describe('Button customization', () => { }); it('should add custom styles to Button with custom element prop', () => { - const {getByTestId} = render( - + const { getByTestId } = render( + - + , ); const button = getByTestId('button_for_customization'); expect(button).toHaveStyleRule('border-color', 'rgb(214, 31, 31)'); diff --git a/packages/paste-core/components/button/build.js b/packages/paste-core/components/button/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/button/build.js +++ b/packages/paste-core/components/button/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/button/src/Button.tsx b/packages/paste-core/components/button/src/Button.tsx index 7654df968a..ba17217738 100644 --- a/packages/paste-core/components/button/src/Button.tsx +++ b/packages/paste-core/components/button/src/Button.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import {Spinner} from '@twilio-paste/spinner'; -import {secureExternalLink} from '@twilio-paste/anchor'; -import {useSpring, animated} from '@twilio-paste/animation-library'; -import {ArrowForwardIcon} from '@twilio-paste/icons/esm/ArrowForwardIcon'; -import {LinkExternalIcon} from '@twilio-paste/icons/esm/LinkExternalIcon'; +import { Box } from '@twilio-paste/box'; +import { Spinner } from '@twilio-paste/spinner'; +import { secureExternalLink } from '@twilio-paste/anchor'; +import { useSpring, animated } from '@twilio-paste/animation-library'; +import { ArrowForwardIcon } from '@twilio-paste/icons/esm/ArrowForwardIcon'; +import { LinkExternalIcon } from '@twilio-paste/icons/esm/LinkExternalIcon'; import type { ButtonProps, @@ -14,18 +14,18 @@ import type { ButtonVariants, ButtonStates, } from './types'; -import {PrimaryButton} from './PrimaryButton'; -import {PrimaryIconButton} from './PrimaryIconButton'; -import {SecondaryButton} from './SecondaryButton'; -import {SecondaryIconButton} from './SecondaryIconButton'; -import {DestructiveButton} from './DestructiveButton'; -import {DestructiveIconButton} from './DestructiveIconButton'; -import {DestructiveLinkButton} from './DestructiveLinkButton'; -import {DestructiveSecondaryButton} from './DestructiveSecondaryButton'; -import {LinkButton} from './LinkButton'; -import {InverseButton} from './InverseButton'; -import {InverseLinkButton} from './InverseLinkButton'; -import {ResetButton} from './ResetButton'; +import { PrimaryButton } from './PrimaryButton'; +import { PrimaryIconButton } from './PrimaryIconButton'; +import { SecondaryButton } from './SecondaryButton'; +import { SecondaryIconButton } from './SecondaryIconButton'; +import { DestructiveButton } from './DestructiveButton'; +import { DestructiveIconButton } from './DestructiveIconButton'; +import { DestructiveLinkButton } from './DestructiveLinkButton'; +import { DestructiveSecondaryButton } from './DestructiveSecondaryButton'; +import { LinkButton } from './LinkButton'; +import { InverseButton } from './InverseButton'; +import { InverseLinkButton } from './InverseLinkButton'; +import { ResetButton } from './ResetButton'; const AnimatedBox = animated(Box); @@ -122,7 +122,7 @@ const handlePropValidation = ({ // Toggle button validaton if (pressed && !(variant === 'secondary' || variant === 'secondary_icon' || variant === 'destructive_secondary')) { throw new Error( - `[Paste: Button] pressed can only be used with "secondary" and "secondary_icon" and "destructive_secondary" variants.` + `[Paste: Button] pressed can only be used with "secondary" and "secondary_icon" and "destructive_secondary" variants.`, ); } }; @@ -174,7 +174,7 @@ const ButtonContents: React.FC> = ( ButtonContents.displayName = 'ButtonContents'; const getButtonComponent = ( - variant: ButtonVariants + variant: ButtonVariants, ): React.ForwardRefExoticComponent> => { switch (variant) { case 'primary_icon': @@ -207,8 +207,8 @@ const getButtonComponent = ( // memo const Button = React.forwardRef( - ({element = 'BUTTON', i18nExternalLinkLabel = '(link takes you to an external page)', ...props}, ref) => { - const {size, variant, children, disabled, loading, ...rest} = props; + ({ element = 'BUTTON', i18nExternalLinkLabel = '(link takes you to an external page)', ...props }, ref) => { + const { size, variant, children, disabled, loading, ...rest } = props; const [hovered, setHovered] = React.useState(false); const arrowIconStyles = useSpring({ translateX: hovered ? '4px' : '0px', @@ -223,7 +223,7 @@ const Button = React.forwardRef( return getButtonSize(variant, children, size); }, [size, variant, children]); - handlePropValidation({...props, size: smartDefaultSize}); + handlePropValidation({ ...props, size: smartDefaultSize }); const buttonState = getButtonState(disabled, loading); const showLoading = buttonState === 'loading'; @@ -277,7 +277,7 @@ const Button = React.forwardRef( ); - } + }, ); Button.defaultProps = { @@ -291,5 +291,5 @@ Button.defaultProps = { Button.displayName = 'Button'; -export type {ButtonProps}; -export {Button}; +export type { ButtonProps }; +export { Button }; diff --git a/packages/paste-core/components/button/src/DestructiveButton.tsx b/packages/paste-core/components/button/src/DestructiveButton.tsx index 56b18e3d66..efdf15932a 100644 --- a/packages/paste-core/components/button/src/DestructiveButton.tsx +++ b/packages/paste-core/components/button/src/DestructiveButton.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import type {BoxStyleProps} from '@twilio-paste/box'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; +import type { BoxStyleProps } from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; import merge from 'deepmerge'; -import {SizeStyles, BaseStyles} from './styles'; -import type {DirectButtonProps} from './types'; +import { SizeStyles, BaseStyles } from './styles'; +import type { DirectButtonProps } from './types'; /* * defensively resetting 'color' on pseudostyles from over zealous @@ -48,7 +48,7 @@ const ButtonStyleMapping = { }; const DestructiveButton = React.forwardRef( - ({size, buttonState, fullWidth, ...props}, ref) => { + ({ size, buttonState, fullWidth, ...props }, ref) => { // Must spread size styles after button styles return ( {...SizeStyles[size]} /> ); - } + }, ); DestructiveButton.defaultProps = { as: 'button', }; DestructiveButton.displayName = 'DestructiveButton'; -export {DestructiveButton}; +export { DestructiveButton }; diff --git a/packages/paste-core/components/button/src/DestructiveIconButton.tsx b/packages/paste-core/components/button/src/DestructiveIconButton.tsx index 2abe583f45..3779cbeaf4 100644 --- a/packages/paste-core/components/button/src/DestructiveIconButton.tsx +++ b/packages/paste-core/components/button/src/DestructiveIconButton.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import type {BoxStyleProps} from '@twilio-paste/box'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; +import type { BoxStyleProps } from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; import merge from 'deepmerge'; -import {SizeStyles, BaseStyles} from './styles'; -import type {DirectButtonProps} from './types'; +import { SizeStyles, BaseStyles } from './styles'; +import type { DirectButtonProps } from './types'; /* * defensively resetting 'color' on pseudostyles from over zealous @@ -35,7 +35,7 @@ const ButtonStyleMapping = { }; const DestructiveIconButton = React.forwardRef( - ({size, buttonState, fullWidth, ...props}, ref) => { + ({ size, buttonState, fullWidth, ...props }, ref) => { // Must spread size styles after button styles return ( ); - } + }, ); DestructiveIconButton.defaultProps = { as: 'button', @@ -54,4 +54,4 @@ DestructiveIconButton.defaultProps = { DestructiveIconButton.displayName = 'DestructiveIconButton'; -export {DestructiveIconButton}; +export { DestructiveIconButton }; diff --git a/packages/paste-core/components/button/src/DestructiveLinkButton.tsx b/packages/paste-core/components/button/src/DestructiveLinkButton.tsx index e9fb538bd9..c8955cb66d 100644 --- a/packages/paste-core/components/button/src/DestructiveLinkButton.tsx +++ b/packages/paste-core/components/button/src/DestructiveLinkButton.tsx @@ -1,33 +1,33 @@ import * as React from 'react'; -import type {BoxStyleProps} from '@twilio-paste/box'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; +import type { BoxStyleProps } from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; import merge from 'deepmerge'; -import {SizeStyles, BaseStyles} from './styles'; -import type {DirectButtonProps} from './types'; +import { SizeStyles, BaseStyles } from './styles'; +import type { DirectButtonProps } from './types'; const defaultStyles: BoxStyleProps = merge(BaseStyles.default, { color: 'colorTextLinkDestructive', textAlign: 'left', transition: 'none', - _hover: {color: 'colorTextLinkDestructiveStrongest', textDecoration: 'underline'}, - _active: {color: 'colorTextLinkDestructiveStrongest', textDecoration: 'underline'}, + _hover: { color: 'colorTextLinkDestructiveStrongest', textDecoration: 'underline' }, + _active: { color: 'colorTextLinkDestructiveStrongest', textDecoration: 'underline' }, }); const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, { color: 'colorTextLinkDestructive', textAlign: 'left', - _hover: {color: 'colorTextLinkDestructiveStronger'}, - _active: {color: 'colorTextLinkDestructiveStronger'}, - _focus: {color: 'colorTextLinkDestructiveStronger'}, + _hover: { color: 'colorTextLinkDestructiveStronger' }, + _active: { color: 'colorTextLinkDestructiveStronger' }, + _focus: { color: 'colorTextLinkDestructiveStronger' }, }); const disabledStyles: BoxStyleProps = merge(BaseStyles.disabled, { color: 'colorTextWeaker', textAlign: 'left', - _hover: {color: 'colorTextLinkDestructiveWeak'}, - _active: {color: 'colorTextLinkDestructiveWeak'}, - _focus: {color: 'colorTextLinkDestructiveWeak'}, + _hover: { color: 'colorTextLinkDestructiveWeak' }, + _active: { color: 'colorTextLinkDestructiveWeak' }, + _focus: { color: 'colorTextLinkDestructiveWeak' }, }); const ButtonStyleMapping = { @@ -37,7 +37,7 @@ const ButtonStyleMapping = { }; const DestructiveLinkButton = React.forwardRef( - ({size, buttonState, fullWidth, ...props}, ref) => { + ({ size, buttonState, fullWidth, ...props }, ref) => { // Must spread size styles after button styles return ( ); - } + }, ); DestructiveLinkButton.defaultProps = { as: 'a' as keyof JSX.IntrinsicElements, }; DestructiveLinkButton.displayName = 'DestructiveLinkButton'; -export {DestructiveLinkButton}; +export { DestructiveLinkButton }; diff --git a/packages/paste-core/components/button/src/DestructiveSecondaryButton.tsx b/packages/paste-core/components/button/src/DestructiveSecondaryButton.tsx index 29bfb15d12..96a18951ac 100644 --- a/packages/paste-core/components/button/src/DestructiveSecondaryButton.tsx +++ b/packages/paste-core/components/button/src/DestructiveSecondaryButton.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import type {BoxStyleProps} from '@twilio-paste/box'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; +import type { BoxStyleProps } from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; import merge from 'deepmerge'; -import {SizeStyles, BaseStyles, DestructiveSecondaryToggleStyles} from './styles'; -import type {DirectButtonProps} from './types'; +import { SizeStyles, BaseStyles, DestructiveSecondaryToggleStyles } from './styles'; +import type { DirectButtonProps } from './types'; /* * defensively resetting interaction color from over zealous legacy @@ -62,7 +62,7 @@ const ButtonStyleMapping = { }; const DestructiveSecondaryButton = React.forwardRef( - ({size, buttonState, fullWidth, pressed, ...props}, ref) => { + ({ size, buttonState, fullWidth, pressed, ...props }, ref) => { const toggleStyles = pressed === undefined ? {} : DestructiveSecondaryToggleStyles; // Must spread size styles after button styles @@ -77,11 +77,11 @@ const DestructiveSecondaryButton = React.forwardRef ); - } + }, ); DestructiveSecondaryButton.defaultProps = { as: 'button', }; DestructiveSecondaryButton.displayName = 'DestructiveSecondaryButton'; -export {DestructiveSecondaryButton}; +export { DestructiveSecondaryButton }; diff --git a/packages/paste-core/components/button/src/InverseButton.tsx b/packages/paste-core/components/button/src/InverseButton.tsx index 4d900e0334..ee97d6fa65 100644 --- a/packages/paste-core/components/button/src/InverseButton.tsx +++ b/packages/paste-core/components/button/src/InverseButton.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import type {BoxStyleProps} from '@twilio-paste/box'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; +import type { BoxStyleProps } from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; import merge from 'deepmerge'; -import {SizeStyles, BaseStyles} from './styles'; -import type {DirectButtonProps} from './types'; +import { SizeStyles, BaseStyles } from './styles'; +import type { DirectButtonProps } from './types'; /* * defensively resetting 'color' on pseudostyles from over zealous @@ -48,7 +48,7 @@ const ButtonStyleMapping = { }; const InverseButton = React.forwardRef( - ({size, buttonState, fullWidth, ...props}, ref) => { + ({ size, buttonState, fullWidth, ...props }, ref) => { // Must spread size styles after button styles return ( ( {...SizeStyles[size]} /> ); - } + }, ); InverseButton.defaultProps = { as: 'button', @@ -67,4 +67,4 @@ InverseButton.defaultProps = { InverseButton.displayName = 'InverseButton'; -export {InverseButton}; +export { InverseButton }; diff --git a/packages/paste-core/components/button/src/InverseLinkButton.tsx b/packages/paste-core/components/button/src/InverseLinkButton.tsx index 00aedb2a71..a3ae8bf1a7 100644 --- a/packages/paste-core/components/button/src/InverseLinkButton.tsx +++ b/packages/paste-core/components/button/src/InverseLinkButton.tsx @@ -1,18 +1,18 @@ import * as React from 'react'; -import type {BoxStyleProps} from '@twilio-paste/box'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; +import type { BoxStyleProps } from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; import merge from 'deepmerge'; -import {SizeStyles, BaseStyles} from './styles'; -import type {DirectButtonProps} from './types'; +import { SizeStyles, BaseStyles } from './styles'; +import type { DirectButtonProps } from './types'; const defaultStyles: BoxStyleProps = merge(BaseStyles.default, { color: 'colorTextInverse', textAlign: 'left', transition: 'none', - _hover: {color: 'colorTextInverseWeaker', textDecoration: 'underline'}, - _focus: {boxShadow: 'shadowFocusInverse'}, - _active: {color: 'colorTextInverseWeaker', textDecoration: 'underline'}, + _hover: { color: 'colorTextInverseWeaker', textDecoration: 'underline' }, + _focus: { boxShadow: 'shadowFocusInverse' }, + _active: { color: 'colorTextInverseWeaker', textDecoration: 'underline' }, }); const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, { @@ -32,7 +32,7 @@ const ButtonStyleMapping = { }; const InverseLinkButton = React.forwardRef( - ({size, buttonState, fullWidth, ...props}, ref) => { + ({ size, buttonState, fullWidth, ...props }, ref) => { // Must spread size styles after button styles return ( {...SizeStyles[size]} /> ); - } + }, ); InverseLinkButton.defaultProps = { as: 'a', @@ -51,4 +51,4 @@ InverseLinkButton.defaultProps = { InverseLinkButton.displayName = 'InverseLinkButton'; -export {InverseLinkButton}; +export { InverseLinkButton }; diff --git a/packages/paste-core/components/button/src/LinkButton.tsx b/packages/paste-core/components/button/src/LinkButton.tsx index 3ddf710a50..49ebac7b16 100644 --- a/packages/paste-core/components/button/src/LinkButton.tsx +++ b/packages/paste-core/components/button/src/LinkButton.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; -import type {BoxStyleProps} from '@twilio-paste/box'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; +import type { BoxStyleProps } from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; import merge from 'deepmerge'; -import {SizeStyles, BaseStyles} from './styles'; -import type {DirectButtonProps} from './types'; +import { SizeStyles, BaseStyles } from './styles'; +import type { DirectButtonProps } from './types'; const defaultStyles: BoxStyleProps = merge(BaseStyles.default, { color: 'colorTextPrimary', textAlign: 'left', transition: 'none', - _hover: {color: 'colorTextPrimaryStrongest', textDecoration: 'underline'}, - _active: {color: 'colorTextPrimaryStrongest', textDecoration: 'underline'}, + _hover: { color: 'colorTextPrimaryStrongest', textDecoration: 'underline' }, + _active: { color: 'colorTextPrimaryStrongest', textDecoration: 'underline' }, }); const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, { @@ -31,7 +31,7 @@ const ButtonStyleMapping = { }; const LinkButton = React.forwardRef( - ({size, buttonState, fullWidth, ...props}, ref) => { + ({ size, buttonState, fullWidth, ...props }, ref) => { // Must spread size styles after button styles return ( ( {...SizeStyles[size]} /> ); - } + }, ); LinkButton.defaultProps = { as: 'a', @@ -50,4 +50,4 @@ LinkButton.defaultProps = { LinkButton.displayName = 'LinkButton'; -export {LinkButton}; +export { LinkButton }; diff --git a/packages/paste-core/components/button/src/PrimaryButton.tsx b/packages/paste-core/components/button/src/PrimaryButton.tsx index 3531390ff2..a45e051ab5 100644 --- a/packages/paste-core/components/button/src/PrimaryButton.tsx +++ b/packages/paste-core/components/button/src/PrimaryButton.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import type {BoxStyleProps} from '@twilio-paste/box'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; +import type { BoxStyleProps } from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; import merge from 'deepmerge'; -import {SizeStyles, BaseStyles} from './styles'; -import type {DirectButtonProps} from './types'; +import { SizeStyles, BaseStyles } from './styles'; +import type { DirectButtonProps } from './types'; /* * defensively resetting 'color' on pseudostyles from over zealous @@ -48,7 +48,7 @@ const ButtonStyleMapping = { }; const PrimaryButton = React.forwardRef( - ({size, buttonState, fullWidth, ...props}, ref) => { + ({ size, buttonState, fullWidth, ...props }, ref) => { // Must spread size styles after button styles return ( ( {...SizeStyles[size]} /> ); - } + }, ); PrimaryButton.defaultProps = { as: 'button', @@ -67,4 +67,4 @@ PrimaryButton.defaultProps = { PrimaryButton.displayName = 'PrimaryButton'; -export {PrimaryButton}; +export { PrimaryButton }; diff --git a/packages/paste-core/components/button/src/PrimaryIconButton.tsx b/packages/paste-core/components/button/src/PrimaryIconButton.tsx index 9a8fd86f2e..8d0accadb1 100644 --- a/packages/paste-core/components/button/src/PrimaryIconButton.tsx +++ b/packages/paste-core/components/button/src/PrimaryIconButton.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import type {BoxStyleProps} from '@twilio-paste/box'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; +import type { BoxStyleProps } from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; import merge from 'deepmerge'; -import {SizeStyles, BaseStyles} from './styles'; -import type {DirectButtonProps} from './types'; +import { SizeStyles, BaseStyles } from './styles'; +import type { DirectButtonProps } from './types'; /* * defensively resetting 'color' on pseudostyles from over zealous @@ -35,7 +35,7 @@ const ButtonStyleMapping = { }; const PrimaryIconButton = React.forwardRef( - ({size, buttonState, fullWidth, ...props}, ref) => { + ({ size, buttonState, fullWidth, ...props }, ref) => { // Must spread size styles after button styles return ( {...SizeStyles[size]} /> ); - } + }, ); PrimaryIconButton.defaultProps = { as: 'button', @@ -54,4 +54,4 @@ PrimaryIconButton.defaultProps = { PrimaryIconButton.displayName = 'PrimaryIconButton'; -export {PrimaryIconButton}; +export { PrimaryIconButton }; diff --git a/packages/paste-core/components/button/src/ResetButton.tsx b/packages/paste-core/components/button/src/ResetButton.tsx index 1f7493ce80..b55596e2bf 100644 --- a/packages/paste-core/components/button/src/ResetButton.tsx +++ b/packages/paste-core/components/button/src/ResetButton.tsx @@ -1,19 +1,19 @@ import * as React from 'react'; -import type {BoxStyleProps} from '@twilio-paste/box'; -import {Box} from '@twilio-paste/box'; +import type { BoxStyleProps } from '@twilio-paste/box'; +import { Box } from '@twilio-paste/box'; import merge from 'deepmerge'; -import {SizeStyles, BaseStyles} from './styles'; -import type {DirectButtonProps} from './types'; +import { SizeStyles, BaseStyles } from './styles'; +import type { DirectButtonProps } from './types'; const defaultStyles: BoxStyleProps = merge(BaseStyles.default, { fontWeight: 'inherit', color: 'inherit', }); -const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, {fontSize: 'inherit', fontWeight: 'inherit'}); +const loadingStyles: BoxStyleProps = merge(BaseStyles.loading, { fontSize: 'inherit', fontWeight: 'inherit' }); -const disabledStyles: BoxStyleProps = merge(BaseStyles.disabled, {fontSize: 'inherit', fontWeight: 'inherit'}); +const disabledStyles: BoxStyleProps = merge(BaseStyles.disabled, { fontSize: 'inherit', fontWeight: 'inherit' }); const ButtonStyleMapping = { default: defaultStyles, @@ -22,7 +22,7 @@ const ButtonStyleMapping = { }; const ResetButton = React.forwardRef( - ({size, buttonState, fullWidth, ...props}, ref) => { + ({ size, buttonState, fullWidth, ...props }, ref) => { // Must spread size styles after button styles return ( ( {...(props as any)} /> ); - } + }, ); ResetButton.defaultProps = { as: 'button', @@ -41,4 +41,4 @@ ResetButton.defaultProps = { ResetButton.displayName = 'ResetButton'; -export {ResetButton}; +export { ResetButton }; diff --git a/packages/paste-core/components/button/src/SecondaryButton.tsx b/packages/paste-core/components/button/src/SecondaryButton.tsx index c6284b67cf..e739e61294 100644 --- a/packages/paste-core/components/button/src/SecondaryButton.tsx +++ b/packages/paste-core/components/button/src/SecondaryButton.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import type {BoxStyleProps} from '@twilio-paste/box'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; +import type { BoxStyleProps } from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; import merge from 'deepmerge'; -import {SizeStyles, BaseStyles, ToggleStyles} from './styles'; -import type {DirectButtonProps} from './types'; +import { SizeStyles, BaseStyles, ToggleStyles } from './styles'; +import type { DirectButtonProps } from './types'; /* * defensively resetting interaction color from over zealous legacy @@ -72,7 +72,7 @@ const ButtonStyleMapping = { }; const SecondaryButton = React.forwardRef( - ({size, buttonState, fullWidth, pressed, ...props}, ref) => { + ({ size, buttonState, fullWidth, pressed, ...props }, ref) => { const toggleStyles = pressed === undefined ? {} : ToggleStyles; // Must spread size styles after button styles @@ -87,7 +87,7 @@ const SecondaryButton = React.forwardRef( {...SizeStyles[size]} /> ); - } + }, ); SecondaryButton.defaultProps = { as: 'button', @@ -95,4 +95,4 @@ SecondaryButton.defaultProps = { SecondaryButton.displayName = 'SecondaryButton'; -export {SecondaryButton}; +export { SecondaryButton }; diff --git a/packages/paste-core/components/button/src/SecondaryIconButton.tsx b/packages/paste-core/components/button/src/SecondaryIconButton.tsx index 81417e6c68..02581b3e51 100644 --- a/packages/paste-core/components/button/src/SecondaryIconButton.tsx +++ b/packages/paste-core/components/button/src/SecondaryIconButton.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import type {BoxStyleProps} from '@twilio-paste/box'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; +import type { BoxStyleProps } from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; import merge from 'deepmerge'; -import {SizeStyles, BaseStyles, ToggleIconButtonStyles} from './styles'; -import type {DirectButtonProps} from './types'; +import { SizeStyles, BaseStyles, ToggleIconButtonStyles } from './styles'; +import type { DirectButtonProps } from './types'; /* * defensively resetting 'color' on pseudostyles from over zealous @@ -43,7 +43,7 @@ const ButtonStyleMapping = { }; const SecondaryIconButton = React.forwardRef( - ({size, buttonState, fullWidth, pressed, ...props}, ref) => { + ({ size, buttonState, fullWidth, pressed, ...props }, ref) => { const toggleStyles = pressed === undefined ? {} : ToggleIconButtonStyles; // Must spread size styles after button styles @@ -58,7 +58,7 @@ const SecondaryIconButton = React.forwardRef ); - } + }, ); SecondaryIconButton.defaultProps = { as: 'button', @@ -66,4 +66,4 @@ SecondaryIconButton.defaultProps = { SecondaryIconButton.displayName = 'SecondaryIconButton'; -export {SecondaryIconButton}; +export { SecondaryIconButton }; diff --git a/packages/paste-core/components/button/src/index.tsx b/packages/paste-core/components/button/src/index.tsx index acd98e701c..a715f4c1aa 100644 --- a/packages/paste-core/components/button/src/index.tsx +++ b/packages/paste-core/components/button/src/index.tsx @@ -1,5 +1,5 @@ -export {Button} from './Button'; -export type {ButtonProps} from './Button'; +export { Button } from './Button'; +export type { ButtonProps } from './Button'; export { ToggleStyles as ButtonToggleStyles, DestructiveSecondaryToggleStyles as DestructiveSecondaryButtonToggleStyles, diff --git a/packages/paste-core/components/button/src/styles.ts b/packages/paste-core/components/button/src/styles.ts index 845b254758..f4e9c04d10 100644 --- a/packages/paste-core/components/button/src/styles.ts +++ b/packages/paste-core/components/button/src/styles.ts @@ -1,7 +1,7 @@ -import type {BoxStyleProps} from '@twilio-paste/box'; +import type { BoxStyleProps } from '@twilio-paste/box'; import merge from 'deepmerge'; -import type {ButtonStates, ButtonSizes} from './types'; +import type { ButtonStates, ButtonSizes } from './types'; const ResetStyles: BoxStyleProps = { appearance: 'none', @@ -19,15 +19,15 @@ const ResetStyles: BoxStyleProps = { * defensively resetting from over zealous legacy global * styles "a {...}" when button is set as an anchor */ - _hover: {textDecoration: 'none'}, - _focus: {textDecoration: 'none', boxShadow: 'shadowFocus'}, - _active: {textDecoration: 'none'}, + _hover: { textDecoration: 'none' }, + _focus: { textDecoration: 'none', boxShadow: 'shadowFocus' }, + _active: { textDecoration: 'none' }, }; -export const BaseStyles: {[key in ButtonStates]: BoxStyleProps} = { +export const BaseStyles: { [key in ButtonStates]: BoxStyleProps } = { default: merge(ResetStyles, { cursor: 'pointer', - _active: {boxShadow: 'none'}, + _active: { boxShadow: 'none' }, }), disabled: merge(ResetStyles, { cursor: 'not-allowed', @@ -37,7 +37,7 @@ export const BaseStyles: {[key in ButtonStates]: BoxStyleProps} = { }), }; -export const SizeStyles: {[key in ButtonSizes]: BoxStyleProps} = { +export const SizeStyles: { [key in ButtonSizes]: BoxStyleProps } = { default: { paddingTop: 'space30', paddingBottom: 'space30', diff --git a/packages/paste-core/components/button/src/types.ts b/packages/paste-core/components/button/src/types.ts index 7142913014..69e6e92b77 100644 --- a/packages/paste-core/components/button/src/types.ts +++ b/packages/paste-core/components/button/src/types.ts @@ -1,5 +1,5 @@ -import type {BoxProps, BoxStyleProps} from '@twilio-paste/box'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import type { BoxProps, BoxStyleProps } from '@twilio-paste/box'; +import type { HTMLPasteProps } from '@twilio-paste/types'; type ButtonTypes = 'submit' | 'button' | 'reset'; export type ButtonSizes = diff --git a/packages/paste-core/components/button/stories/customization.stories.tsx b/packages/paste-core/components/button/stories/customization.stories.tsx index 77418ade0b..2b3e73d6c8 100644 --- a/packages/paste-core/components/button/stories/customization.stories.tsx +++ b/packages/paste-core/components/button/stories/customization.stories.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import type {BoxElementProps} from '@twilio-paste/box'; -import {Card} from '@twilio-paste/card'; -import {Heading} from '@twilio-paste/heading'; -import {Stack} from '@twilio-paste/stack'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import type {PasteCustomCSS} from '@twilio-paste/customization'; -import {useTheme} from '@twilio-paste/theme'; +import type { StoryFn } from '@storybook/react'; +import type { BoxElementProps } from '@twilio-paste/box'; +import { Card } from '@twilio-paste/card'; +import { Heading } from '@twilio-paste/heading'; +import { Stack } from '@twilio-paste/stack'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import type { PasteCustomCSS } from '@twilio-paste/customization'; +import { useTheme } from '@twilio-paste/theme'; -import {Button} from '../src'; -import type {ButtonVariants} from '../src/types'; +import { Button } from '../src'; +import type { ButtonVariants } from '../src/types'; const customButtonStyles = { backgroundColor: 'colorBackgroundBrand', @@ -18,10 +18,10 @@ const customButtonStyles = { borderColor: 'colorBorderError', fontWeight: 'fontWeightLight', variants: { - secondary: {backgroundColor: 'colorBackgroundNew'}, - destructive: {backgroundColor: 'colorBackgroundDestructiveStrongest', color: 'colorTextWeakest'}, - destructive_secondary: {backgroundColor: 'colorBackgroundNeutralWeakest', color: 'colorTextWarningStrong'}, - link: {padding: 'space40', borderRadius: 'borderRadiusCircle', backgroundColor: 'colorBackgroundNeutralWeakest'}, + secondary: { backgroundColor: 'colorBackgroundNew' }, + destructive: { backgroundColor: 'colorBackgroundDestructiveStrongest', color: 'colorTextWeakest' }, + destructive_secondary: { backgroundColor: 'colorBackgroundNeutralWeakest', color: 'colorTextWarningStrong' }, + link: { padding: 'space40', borderRadius: 'borderRadiusCircle', backgroundColor: 'colorBackgroundNeutralWeakest' }, destructive_link: { padding: 'space40', borderRadius: 'borderRadiusCircle', @@ -38,7 +38,7 @@ const ShowCustomization: React.FC< customButton: React.ReactNode; isTestEnvironment: boolean; }> -> = ({button, customButton, isTestEnvironment}) => { +> = ({ button, customButton, isTestEnvironment }) => { const currentTheme = useTheme(); return ( @@ -53,7 +53,7 @@ const ShowCustomization: React.FC< {button} @@ -65,7 +65,7 @@ const ShowCustomization: React.FC< {customButton} @@ -75,14 +75,14 @@ const ShowCustomization: React.FC< }; export const AnyButton: React.FC< - React.PropsWithChildren<{element?: BoxElementProps['element']; variant: ButtonVariants}> -> = ({element = 'BUTTON', variant}) => ( + React.PropsWithChildren<{ element?: BoxElementProps['element']; variant: ButtonVariants }> +> = ({ element = 'BUTTON', variant }) => ( ); -export const CustomizedPrimaryButton: StoryFn = (_args, {parameters: {isTestEnvironment}}) => ( +export const CustomizedPrimaryButton: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( } @@ -90,7 +90,7 @@ export const CustomizedPrimaryButton: StoryFn = (_args, {parameters: {isTestEnvi /> ); -export const CustomizedSecondaryButton: StoryFn = (_args, {parameters: {isTestEnvironment}}) => ( +export const CustomizedSecondaryButton: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( } @@ -98,7 +98,7 @@ export const CustomizedSecondaryButton: StoryFn = (_args, {parameters: {isTestEn /> ); -export const CustomizedLinkButton: StoryFn = (_args, {parameters: {isTestEnvironment}}) => ( +export const CustomizedLinkButton: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( } @@ -106,7 +106,7 @@ export const CustomizedLinkButton: StoryFn = (_args, {parameters: {isTestEnviron /> ); -export const CustomizedDestructivePrimaryButton: StoryFn = (_args, {parameters: {isTestEnvironment}}) => ( +export const CustomizedDestructivePrimaryButton: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( } @@ -114,7 +114,7 @@ export const CustomizedDestructivePrimaryButton: StoryFn = (_args, {parameters: /> ); -export const CustomizedDestructiveSecondaryButton: StoryFn = (_args, {parameters: {isTestEnvironment}}) => ( +export const CustomizedDestructiveSecondaryButton: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( } @@ -122,7 +122,7 @@ export const CustomizedDestructiveSecondaryButton: StoryFn = (_args, {parameters /> ); -export const CustomizedDestructiveLinkButton: StoryFn = (_args, {parameters: {isTestEnvironment}}) => ( +export const CustomizedDestructiveLinkButton: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( } diff --git a/packages/paste-core/components/button/stories/index.stories.tsx b/packages/paste-core/components/button/stories/index.stories.tsx index 7cab28cba2..265eb759b5 100644 --- a/packages/paste-core/components/button/stories/index.stories.tsx +++ b/packages/paste-core/components/button/stories/index.stories.tsx @@ -1,18 +1,18 @@ import * as React from 'react'; -import {PlusIcon} from '@twilio-paste/icons/esm/PlusIcon'; -import {CheckboxCheckIcon} from '@twilio-paste/icons/esm/CheckboxCheckIcon'; -import {BoldIcon} from '@twilio-paste/icons/esm/BoldIcon'; -import {PauseIcon} from '@twilio-paste/icons/esm/PauseIcon'; -import {PlayIcon} from '@twilio-paste/icons/esm/PlayIcon'; -import {Box} from '@twilio-paste/box'; -import {Heading} from '@twilio-paste/heading'; -import {Stack} from '@twilio-paste/stack'; -import {CloseIcon} from '@twilio-paste/icons/esm/CloseIcon'; -import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only'; -import {isRenderingOnServer} from '@twilio-paste/animation-library'; +import { PlusIcon } from '@twilio-paste/icons/esm/PlusIcon'; +import { CheckboxCheckIcon } from '@twilio-paste/icons/esm/CheckboxCheckIcon'; +import { BoldIcon } from '@twilio-paste/icons/esm/BoldIcon'; +import { PauseIcon } from '@twilio-paste/icons/esm/PauseIcon'; +import { PlayIcon } from '@twilio-paste/icons/esm/PlayIcon'; +import { Box } from '@twilio-paste/box'; +import { Heading } from '@twilio-paste/heading'; +import { Stack } from '@twilio-paste/stack'; +import { CloseIcon } from '@twilio-paste/icons/esm/CloseIcon'; +import { ScreenReaderOnly } from '@twilio-paste/screen-reader-only'; +import { isRenderingOnServer } from '@twilio-paste/animation-library'; -import {Button} from '../src'; -import type {ButtonVariants, ButtonSizes} from '../src/types'; +import { Button } from '../src'; +import type { ButtonVariants, ButtonSizes } from '../src/types'; const ButtonSizeOptions = [ 'default', @@ -25,7 +25,7 @@ const ButtonSizeOptions = [ 'circle_small', ]; -const AllSizeOptions: React.FC> = ({variant}) => { +const AllSizeOptions: React.FC> = ({ variant }) => { const allButtons: React.ReactNode[] = []; ButtonSizeOptions.forEach((size, index) => { @@ -105,7 +105,7 @@ const AllSizeOptions: React.FC )} - + , ); }); @@ -201,7 +201,7 @@ export const ButtonAsAnchor = (): React.ReactNode => { ); }; -const IconSizeOptions: React.FC> = ({variant}) => { +const IconSizeOptions: React.FC> = ({ variant }) => { return ( diff --git a/packages/paste-core/components/callout/__tests__/customization.spec.tsx b/packages/paste-core/components/callout/__tests__/customization.spec.tsx index 04d1ff27e0..13a97fd7e9 100644 --- a/packages/paste-core/components/callout/__tests__/customization.spec.tsx +++ b/packages/paste-core/components/callout/__tests__/customization.spec.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render, screen } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {Callout, CalloutHeading, CalloutList, CalloutListItem, CalloutText} from '../src'; +import { Callout, CalloutHeading, CalloutList, CalloutListItem, CalloutText } from '../src'; -const CustomizationWrapper: React.FC = ({children}) => ( +const CustomizationWrapper: React.FC = ({ children }) => ( = ({children}) => ); -const MyCustomizationWrapper: React.FC = ({children}) => ( +const MyCustomizationWrapper: React.FC = ({ children }) => ( { Item one - + , ); const callout = screen.getByTestId('callout'); - const heading = screen.getByRole('heading', {name: 'Neutral callout'}); + const heading = screen.getByRole('heading', { name: 'Neutral callout' }); const text = screen.getByTestId('callout-text'); const list = screen.getByRole('list'); const listItem = screen.getByRole('listitem'); @@ -125,11 +125,11 @@ describe('Customization', () => { Item one - + , ); const callout = screen.getByTestId('callout'); - const heading = screen.getByRole('heading', {name: 'Neutral callout'}); + const heading = screen.getByRole('heading', { name: 'Neutral callout' }); const text = screen.getByTestId('callout-text'); const list = screen.getByRole('list'); const listItem = screen.getByRole('listitem'); @@ -155,12 +155,12 @@ describe('Customization', () => { This is a warning callout , - {wrapper: CustomizationWrapper} + { wrapper: CustomizationWrapper }, ); const neutralCallout = screen.getByTestId('neutral-callout'); const warningCallout = screen.getByTestId('neutral-callout'); - const heading = screen.getByRole('heading', {name: 'Neutral callout'}); + const heading = screen.getByRole('heading', { name: 'Neutral callout' }); const text = screen.getByTestId('callout-text'); const list = screen.getByRole('list'); const listItem = screen.getByRole('listitem'); @@ -192,12 +192,12 @@ describe('Customization', () => { This is a warning callout , - {wrapper: MyCustomizationWrapper} + { wrapper: MyCustomizationWrapper }, ); const neutralCallout = screen.getByTestId('neutral-callout'); const warningCallout = screen.getByTestId('neutral-callout'); - const heading = screen.getByRole('heading', {name: 'Neutral callout'}); + const heading = screen.getByRole('heading', { name: 'Neutral callout' }); const text = screen.getByTestId('callout-text'); const list = screen.getByRole('list'); const listItem = screen.getByRole('listitem'); diff --git a/packages/paste-core/components/callout/__tests__/index.spec.tsx b/packages/paste-core/components/callout/__tests__/index.spec.tsx index 0493b7fcd4..7aa302de20 100644 --- a/packages/paste-core/components/callout/__tests__/index.spec.tsx +++ b/packages/paste-core/components/callout/__tests__/index.spec.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; -import {Callout, CalloutHeading, CalloutList, CalloutListItem, CalloutText} from '../src'; +import { Callout, CalloutHeading, CalloutList, CalloutListItem, CalloutText } from '../src'; describe('Callout', () => { it('should render', () => { render( This is some text. - + , ); const callout = screen.getByTestId('callout'); @@ -43,7 +43,7 @@ describe('CalloutList', () => { render( Item one - + , ); const list = screen.getByRole('list'); @@ -57,7 +57,7 @@ describe('CalloutList', () => { render( Item one - + , ); const list = screen.getByRole('list'); @@ -73,7 +73,7 @@ describe('i18n', () => { render( This is a callout - + , ); const callout = screen.getByTestId('callout-i18n'); const icon = callout.querySelector('[data-paste-element="CALLOUT_ICON"]'); @@ -84,7 +84,7 @@ describe('i18n', () => { render( This is a callout - + , ); const callout = screen.getByTestId('callout-i18n'); const icon = callout.querySelector('[data-paste-element="CALLOUT_ICON"]'); @@ -95,7 +95,7 @@ describe('i18n', () => { render( This is a callout - + , ); const callout = screen.getByTestId('callout-i18n'); const icon = callout.querySelector('[data-paste-element="CALLOUT_ICON"]'); @@ -106,7 +106,7 @@ describe('i18n', () => { render( This is a callout - + , ); const callout = screen.getByTestId('callout-i18n'); const icon = callout.querySelector('[data-paste-element="CALLOUT_ICON"]'); @@ -117,7 +117,7 @@ describe('i18n', () => { render( This is a callout - + , ); const callout = screen.getByTestId('callout-i18n'); const icon = callout.querySelector('[data-paste-element="CALLOUT_ICON"]'); @@ -128,7 +128,7 @@ describe('i18n', () => { render( This is a callout - + , ); const callout = screen.getByTestId('callout-i18n'); const icon = callout.querySelector('[data-paste-element="CALLOUT_ICON"]'); @@ -139,7 +139,7 @@ describe('i18n', () => { render( This is a callout - + , ); const callout = screen.getByTestId('callout-i18n'); const icon = callout.querySelector('[data-paste-element="CALLOUT_ICON"]'); @@ -150,7 +150,7 @@ describe('i18n', () => { render( This is a callout - + , ); const callout = screen.getByTestId('callout-i18n'); const icon = callout.querySelector('[data-paste-element="CALLOUT_ICON"]'); @@ -161,7 +161,7 @@ describe('i18n', () => { render( This is a callout - + , ); const callout = screen.getByTestId('callout-i18n'); const icon = callout.querySelector('[data-paste-element="CALLOUT_ICON"]'); @@ -172,7 +172,7 @@ describe('i18n', () => { render( This is a callout - + , ); const callout = screen.getByTestId('callout-i18n'); const icon = callout.querySelector('[data-paste-element="CALLOUT_ICON"]'); diff --git a/packages/paste-core/components/callout/build.js b/packages/paste-core/components/callout/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/callout/build.js +++ b/packages/paste-core/components/callout/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/callout/src/Callout.tsx b/packages/paste-core/components/callout/src/Callout.tsx index 3110bae72f..0223af82c5 100644 --- a/packages/paste-core/components/callout/src/Callout.tsx +++ b/packages/paste-core/components/callout/src/Callout.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import {ErrorIcon} from '@twilio-paste/icons/esm/ErrorIcon'; -import {NeutralIcon} from '@twilio-paste/icons/esm/NeutralIcon'; -import {NewIcon} from '@twilio-paste/icons/esm/NewIcon'; -import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only'; -import {SuccessIcon} from '@twilio-paste/icons/esm/SuccessIcon'; -import {WarningIcon} from '@twilio-paste/icons/esm/WarningIcon'; -import type {BoxStyleProps, BoxProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import { ErrorIcon } from '@twilio-paste/icons/esm/ErrorIcon'; +import { NeutralIcon } from '@twilio-paste/icons/esm/NeutralIcon'; +import { NewIcon } from '@twilio-paste/icons/esm/NewIcon'; +import { ScreenReaderOnly } from '@twilio-paste/screen-reader-only'; +import { SuccessIcon } from '@twilio-paste/icons/esm/SuccessIcon'; +import { WarningIcon } from '@twilio-paste/icons/esm/WarningIcon'; +import type { BoxStyleProps, BoxProps } from '@twilio-paste/box'; type CalloutVariants = 'neutral' | 'warning' | 'error' | 'success' | 'new'; @@ -63,7 +63,7 @@ const defaultIconLabels: Record = { }; export const Callout = React.forwardRef( - ({children, variant, element = 'CALLOUT', i18nLabel, marginY, ...props}, ref) => { + ({ children, variant, element = 'CALLOUT', i18nLabel, marginY, ...props }, ref) => { const IconComponent = variantIcons[variant]; const iconLabel = i18nLabel ? i18nLabel : defaultIconLabels[variant]; @@ -90,7 +90,7 @@ export const Callout = React.forwardRef( ); - } + }, ); Callout.displayName = 'Callout'; diff --git a/packages/paste-core/components/callout/src/CalloutHeading.tsx b/packages/paste-core/components/callout/src/CalloutHeading.tsx index be59d4ba3d..fb319df7a1 100644 --- a/packages/paste-core/components/callout/src/CalloutHeading.tsx +++ b/packages/paste-core/components/callout/src/CalloutHeading.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {Text, safelySpreadTextProps} from '@twilio-paste/text'; -import type {asTags} from '@twilio-paste/heading'; -import type {BoxProps} from '@twilio-paste/box'; +import { Text, safelySpreadTextProps } from '@twilio-paste/text'; +import type { asTags } from '@twilio-paste/heading'; +import type { BoxProps } from '@twilio-paste/box'; export interface CalloutHeadingProps extends Partial> { as?: asTags; @@ -10,7 +10,7 @@ export interface CalloutHeadingProps extends Partial( - ({element = 'CALLOUT_HEADING', children, as = 'h3', ...props}, ref) => ( + ({ element = 'CALLOUT_HEADING', children, as = 'h3', ...props }, ref) => ( {children} - ) + ), ); CalloutHeading.displayName = 'CalloutHeading'; diff --git a/packages/paste-core/components/callout/src/CalloutList.tsx b/packages/paste-core/components/callout/src/CalloutList.tsx index cf33ac30f1..4831cc27b8 100644 --- a/packages/paste-core/components/callout/src/CalloutList.tsx +++ b/packages/paste-core/components/callout/src/CalloutList.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import {Text, safelySpreadTextProps} from '@twilio-paste/text'; -import type {BoxProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import { Text, safelySpreadTextProps } from '@twilio-paste/text'; +import type { BoxProps } from '@twilio-paste/box'; type AsTags = 'ul' | 'ol'; @@ -12,7 +12,7 @@ export interface CalloutListProps extends Partial> } export const CalloutList = React.forwardRef( - ({element = 'CALLOUT_LIST', children, as, ...props}, ref) => ( + ({ element = 'CALLOUT_LIST', children, as, ...props }, ref) => ( ( > {children} - ) + ), ); CalloutList.displayName = 'CalloutList'; @@ -37,11 +37,11 @@ export interface CalloutListItemProps extends Partial( - ({element = 'CALLOUT_LIST_ITEM', children, ...props}, ref) => ( + ({ element = 'CALLOUT_LIST_ITEM', children, ...props }, ref) => ( {children} - ) + ), ); CalloutListItem.displayName = 'CalloutListItem'; diff --git a/packages/paste-core/components/callout/src/CalloutText.tsx b/packages/paste-core/components/callout/src/CalloutText.tsx index 2d1e822018..1d30c03d43 100644 --- a/packages/paste-core/components/callout/src/CalloutText.tsx +++ b/packages/paste-core/components/callout/src/CalloutText.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {Text, safelySpreadTextProps} from '@twilio-paste/text'; -import type {BoxProps} from '@twilio-paste/box'; +import { Text, safelySpreadTextProps } from '@twilio-paste/text'; +import type { BoxProps } from '@twilio-paste/box'; export interface CalloutTextProps extends Partial> { children?: React.ReactNode; @@ -8,7 +8,7 @@ export interface CalloutTextProps extends Partial( - ({element = 'CALLOUT_TEXT', children, ...props}, ref) => ( + ({ element = 'CALLOUT_TEXT', children, ...props }, ref) => ( {children} - ) + ), ); CalloutText.displayName = 'CalloutText'; diff --git a/packages/paste-core/components/callout/stories/customization.stories.tsx b/packages/paste-core/components/callout/stories/customization.stories.tsx index efe93f1a1c..422efc23f9 100644 --- a/packages/paste-core/components/callout/stories/customization.stories.tsx +++ b/packages/paste-core/components/callout/stories/customization.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import {useTheme} from '@twilio-paste/theme'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import type {StoryFn} from '@storybook/react'; +import { Box } from '@twilio-paste/box'; +import { useTheme } from '@twilio-paste/theme'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import type { StoryFn } from '@storybook/react'; -import {Callout, CalloutHeading, CalloutList, CalloutListItem, CalloutText} from '../src'; +import { Callout, CalloutHeading, CalloutList, CalloutListItem, CalloutText } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -17,7 +17,7 @@ export default { }, }; -export const CustomizedCallout: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const CustomizedCallout: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( > = ({as}) => ( +const ExampleList: React.FC> = ({ as }) => ( Item one Item two diff --git a/packages/paste-core/components/card/__test__/card.test.tsx b/packages/paste-core/components/card/__test__/card.test.tsx index 545ba1704f..81059937be 100644 --- a/packages/paste-core/components/card/__test__/card.test.tsx +++ b/packages/paste-core/components/card/__test__/card.test.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render, screen } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {Card} from '../src'; +import { Card } from '../src'; describe('Card', () => { it('should render', (): void => { render( - + , ); const renderedCard = screen.getByTestId('card'); expect(renderedCard).toBeDefined(); @@ -19,7 +19,7 @@ describe('Card', () => { render( - + , ); const renderedCard = screen.getByTestId('card'); expect(renderedCard).toHaveStyleRule('padding', '2.25rem'); @@ -35,7 +35,7 @@ describe('Card', () => { paddingBottom="space40" paddingLeft="space50" /> - + , ); const renderedCard = screen.getByTestId('card'); expect(renderedCard).toHaveStyleRule('padding-top', '0.25rem'); @@ -48,7 +48,7 @@ describe('Card', () => { render( I AM A JEDI!!!! - + , ); const renderedCardContent = screen.getByText('I AM A JEDI!!!!'); expect(renderedCardContent).toBeDefined(); @@ -71,10 +71,10 @@ describe('Customization', () => { render( Custom card - + , ); const renderedCard = screen.getByTestId('customizable-card'); expect(renderedCard).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); @@ -85,12 +85,12 @@ describe('Customization', () => { render( Custom card - + , ); const renderedCard = screen.getByTestId('customizable-card'); expect(renderedCard).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); diff --git a/packages/paste-core/components/card/build.js b/packages/paste-core/components/card/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/card/build.js +++ b/packages/paste-core/components/card/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/card/src/index.tsx b/packages/paste-core/components/card/src/index.tsx index 737f8c2eff..1a033f6fe6 100644 --- a/packages/paste-core/components/card/src/index.tsx +++ b/packages/paste-core/components/card/src/index.tsx @@ -1,16 +1,25 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import type {PaddingProps} from '@twilio-paste/style-props'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import type { PaddingProps } from '@twilio-paste/style-props'; +import type { HTMLPasteProps } from '@twilio-paste/types'; /** element identifier from BoxProps for customization */ export interface CardProps extends HTMLPasteProps<'article'>, PaddingProps, Pick {} const Card = React.forwardRef( ( - {children, element = 'CARD', padding = 'space100', paddingBottom, paddingLeft, paddingRight, paddingTop, ...props}, - ref + { + children, + element = 'CARD', + padding = 'space100', + paddingBottom, + paddingLeft, + paddingRight, + paddingTop, + ...props + }, + ref, ) => { return ( ( {children} ); - } + }, ); Card.displayName = 'Card'; -export {Card}; +export { Card }; diff --git a/packages/paste-core/components/card/stories/index.stories.tsx b/packages/paste-core/components/card/stories/index.stories.tsx index ee0329bb31..fc06afea7e 100644 --- a/packages/paste-core/components/card/stories/index.stories.tsx +++ b/packages/paste-core/components/card/stories/index.stories.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {useTheme} from '@twilio-paste/theme'; -import {Heading} from '@twilio-paste/heading'; -import {Paragraph} from '@twilio-paste/paragraph'; -import {Stack} from '@twilio-paste/stack'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import type { StoryFn } from '@storybook/react'; +import { useTheme } from '@twilio-paste/theme'; +import { Heading } from '@twilio-paste/heading'; +import { Paragraph } from '@twilio-paste/paragraph'; +import { Stack } from '@twilio-paste/stack'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {Card} from '../src'; +import { Card } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -62,7 +62,7 @@ export const PropPassthrough = (): React.ReactNode => ( ); -export const CustomCard: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const CustomCard: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( diff --git a/packages/paste-core/components/chat-composer/__tests__/customization.spec.tsx b/packages/paste-core/components/chat-composer/__tests__/customization.spec.tsx index 3e751f3bba..039176d000 100644 --- a/packages/paste-core/components/chat-composer/__tests__/customization.spec.tsx +++ b/packages/paste-core/components/chat-composer/__tests__/customization.spec.tsx @@ -1,18 +1,18 @@ import * as React from 'react'; -import {screen, render, waitFor} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import type {PasteCustomCSS} from '@twilio-paste/customization'; -import type {RenderOptions} from '@testing-library/react'; +import { screen, render, waitFor } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import type { PasteCustomCSS } from '@twilio-paste/customization'; +import type { RenderOptions } from '@testing-library/react'; -import {ChatComposer} from '../src'; +import { ChatComposer } from '../src'; -const getStyles = (element = 'CHAT_COMPOSER'): {[key: string]: PasteCustomCSS} => ({ - [element]: {maxWidth: 'size10', backgroundColor: 'colorBackgroundNeutralWeakest'}, - [`${element}_PLACEHOLDER_WRAPPER`]: {color: 'colorTextNeutral', fontSize: 'fontSize10'}, +const getStyles = (element = 'CHAT_COMPOSER'): { [key: string]: PasteCustomCSS } => ({ + [element]: { maxWidth: 'size10', backgroundColor: 'colorBackgroundNeutralWeakest' }, + [`${element}_PLACEHOLDER_WRAPPER`]: { color: 'colorTextNeutral', fontSize: 'fontSize10' }, }); const initCustomizationWrapper = (elementName?: string | undefined): RenderOptions['wrapper'] => - function Wrapper({children}) { + function Wrapper({ children }) { return ( {children} diff --git a/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx b/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx index c4e3b69d7a..04ab3598b1 100644 --- a/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx +++ b/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {screen, render, waitFor, fireEvent} from '@testing-library/react'; +import { screen, render, waitFor, fireEvent } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import {$getRoot, $createParagraphNode, $createTextNode} from '@twilio-paste/lexical-library'; -import {Theme} from '@twilio-paste/theme'; +import { $getRoot, $createParagraphNode, $createTextNode } from '@twilio-paste/lexical-library'; +import { Theme } from '@twilio-paste/theme'; -import {ChatComposer} from '../src'; +import { ChatComposer } from '../src'; const initialText = (): void => { const root = $getRoot(); @@ -40,7 +40,7 @@ describe('ChatComposer', () => { ariaOwns="foo" ariaActiveDescendant="foo" config={baseConfig} - /> + />, ); const contentEditable = screen.getByRole('textbox'); @@ -69,7 +69,7 @@ describe('ChatComposer', () => { ...baseConfig, editorState: initialText, }} - /> + />, ); const contentEditable = screen.getByRole('textbox'); @@ -82,7 +82,7 @@ describe('ChatComposer', () => { render( - + , ); const wrapper = screen.getByRole('textbox').parentElement; diff --git a/packages/paste-core/components/chat-composer/build.js b/packages/paste-core/components/chat-composer/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/chat-composer/build.js +++ b/packages/paste-core/components/chat-composer/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/chat-composer/src/AutoLinkPlugin.tsx b/packages/paste-core/components/chat-composer/src/AutoLinkPlugin.tsx index 731c437c77..da774c0b2c 100644 --- a/packages/paste-core/components/chat-composer/src/AutoLinkPlugin.tsx +++ b/packages/paste-core/components/chat-composer/src/AutoLinkPlugin.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import {AutoLinkPlugin as LexicalAutoLinkPlugin} from '@twilio-paste/lexical-library'; +import { AutoLinkPlugin as LexicalAutoLinkPlugin } from '@twilio-paste/lexical-library'; const URL_MATCHER = /(?:(?:https?:\/\/(?:www\.)?)|(?:www\.))[\w#%+.:=@~-]{1,256}\.[\d()A-Za-z]{1,6}\b[\w#%&()+./:=?@~-]*/; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx index 17373f5092..d5c635b059 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import type {BoxProps, BoxStyleProps} from '@twilio-paste/box'; +import { Box } from '@twilio-paste/box'; +import type { BoxProps, BoxStyleProps } from '@twilio-paste/box'; import { // Create and manages the Lexical editor instance LexicalComposer, @@ -27,14 +27,14 @@ import { */ HistoryPlugin, } from '@twilio-paste/lexical-library'; -import {StylingGlobals} from '@twilio-paste/styling-library'; -import type {LexicalComposerProps, ContentEditableProps, OnChangeFunction} from '@twilio-paste/lexical-library'; +import { StylingGlobals } from '@twilio-paste/styling-library'; +import type { LexicalComposerProps, ContentEditableProps, OnChangeFunction } from '@twilio-paste/lexical-library'; import merge from 'deepmerge'; -import {chatComposerLexicalStyles} from './styles'; -import {AutoLinkPlugin} from './AutoLinkPlugin'; -import {PlaceholderWrapper} from './PlaceholderWrapper'; -import {baseConfig, renderInitialText} from './helpers'; +import { chatComposerLexicalStyles } from './styles'; +import { AutoLinkPlugin } from './AutoLinkPlugin'; +import { PlaceholderWrapper } from './PlaceholderWrapper'; +import { baseConfig, renderInitialText } from './helpers'; export interface ChatComposerProps extends Omit { children?: LexicalComposerProps['children']; @@ -59,7 +59,7 @@ export const ChatComposer = React.forwardRef( disabled, ...props }, - ref + ref, ) => { const baseConfigWithEditorState = { ...baseConfig, @@ -77,7 +77,7 @@ export const ChatComposer = React.forwardRef( paddingY="space30" paddingX="space40" borderRadius="borderRadius20" - _focusWithin={{boxShadow: 'shadowFocus'}} + _focusWithin={{ boxShadow: 'shadowFocus' }} overflowY="scroll" maxHeight={maxHeight} disabled={disabled} @@ -103,7 +103,7 @@ export const ChatComposer = React.forwardRef( ); - } + }, ); ChatComposer.displayName = 'ChatComposer'; diff --git a/packages/paste-core/components/chat-composer/src/PlaceholderWrapper.tsx b/packages/paste-core/components/chat-composer/src/PlaceholderWrapper.tsx index 4132d28512..8a5511695d 100644 --- a/packages/paste-core/components/chat-composer/src/PlaceholderWrapper.tsx +++ b/packages/paste-core/components/chat-composer/src/PlaceholderWrapper.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; -import type {BoxProps} from '@twilio-paste/box'; -import {Box} from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import { Box } from '@twilio-paste/box'; -import type {ChatComposerProps} from '.'; +import type { ChatComposerProps } from '.'; export const PlaceholderWrapper: React.FC< React.PropsWithChildren<{ placeholder: ChatComposerProps['placeholder']; element?: BoxProps['element']; }> -> = ({placeholder, element}) => ( +> = ({ placeholder, element }) => ( { const root = $getRoot(); diff --git a/packages/paste-core/components/chat-composer/src/styles.ts b/packages/paste-core/components/chat-composer/src/styles.ts index c9859f2418..c8e7d62cdd 100644 --- a/packages/paste-core/components/chat-composer/src/styles.ts +++ b/packages/paste-core/components/chat-composer/src/styles.ts @@ -1,4 +1,4 @@ -import {EmotionCSS} from '@twilio-paste/styling-library'; +import { EmotionCSS } from '@twilio-paste/styling-library'; export const chatComposerLexicalStyles = EmotionCSS` .paste-chat-composer-paragraph { diff --git a/packages/paste-core/components/chat-composer/stories/ConversationsUIKit/helpers.tsx b/packages/paste-core/components/chat-composer/stories/ConversationsUIKit/helpers.tsx index d70deef9eb..337dc11fd9 100644 --- a/packages/paste-core/components/chat-composer/stories/ConversationsUIKit/helpers.tsx +++ b/packages/paste-core/components/chat-composer/stories/ConversationsUIKit/helpers.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {ChatMessage, ChatBubble, ChatMessageMeta, ChatMessageMetaItem} from '@twilio-paste/chat-log'; -import type {Chat} from '@twilio-paste/chat-log'; -import {Box} from '@twilio-paste/box'; -import {Button} from '@twilio-paste/button'; -import {SendIcon} from '@twilio-paste/icons/esm/SendIcon'; +import { ChatMessage, ChatBubble, ChatMessageMeta, ChatMessageMetaItem } from '@twilio-paste/chat-log'; +import type { Chat } from '@twilio-paste/chat-log'; +import { Box } from '@twilio-paste/box'; +import { Button } from '@twilio-paste/button'; +import { SendIcon } from '@twilio-paste/icons/esm/SendIcon'; import { useLexicalComposerContext, CLEAR_EDITOR_COMMAND, @@ -37,7 +37,7 @@ export const createNewMessage = (message: string): Omit => { }; }; -export const SendButtonPlugin = ({onClick}: {onClick: () => void}): JSX.Element => { +export const SendButtonPlugin = ({ onClick }: { onClick: () => void }): JSX.Element => { const [editor] = useLexicalComposerContext(); const handleSend = (): void => { @@ -54,12 +54,12 @@ export const SendButtonPlugin = ({onClick}: {onClick: () => void}): JSX.Element ); }; -export const EnterKeySubmitPlugin = ({onKeyDown}: {onKeyDown: () => void}): null => { +export const EnterKeySubmitPlugin = ({ onKeyDown }: { onKeyDown: () => void }): null => { const [editor] = useLexicalComposerContext(); const handleEnterKey = React.useCallback( (event: KeyboardEvent) => { - const {shiftKey, ctrlKey} = event; + const { shiftKey, ctrlKey } = event; if (shiftKey || ctrlKey) return false; event.preventDefault(); event.stopPropagation(); @@ -67,7 +67,7 @@ export const EnterKeySubmitPlugin = ({onKeyDown}: {onKeyDown: () => void}): null editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined); return true; }, - [editor, onKeyDown] + [editor, onKeyDown], ); React.useEffect(() => { diff --git a/packages/paste-core/components/chat-composer/stories/ConversationsUIKit/index.stories.tsx b/packages/paste-core/components/chat-composer/stories/ConversationsUIKit/index.stories.tsx index 1e9b378504..7ddbdbaba6 100644 --- a/packages/paste-core/components/chat-composer/stories/ConversationsUIKit/index.stories.tsx +++ b/packages/paste-core/components/chat-composer/stories/ConversationsUIKit/index.stories.tsx @@ -6,10 +6,10 @@ import { MinimizableDialogHeader, MinimizableDialogContent, } from '@twilio-paste/minimizable-dialog'; -import {$getRoot, ClearEditorPlugin} from '@twilio-paste/lexical-library'; -import {ChatIcon} from '@twilio-paste/icons/esm/ChatIcon'; -import {Box} from '@twilio-paste/box'; -import type {StoryFn} from '@storybook/react'; +import { $getRoot, ClearEditorPlugin } from '@twilio-paste/lexical-library'; +import { ChatIcon } from '@twilio-paste/icons/esm/ChatIcon'; +import { Box } from '@twilio-paste/box'; +import type { StoryFn } from '@storybook/react'; import { ChatLogger, useChatLogger, @@ -25,12 +25,12 @@ import { ChatBookendItem, ComposerAttachmentCard, } from '@twilio-paste/chat-log'; -import {Avatar} from '@twilio-paste/avatar'; -import {DownloadIcon} from '@twilio-paste/icons/esm/DownloadIcon'; -import type {EditorState} from '@twilio-paste/lexical-library'; +import { Avatar } from '@twilio-paste/avatar'; +import { DownloadIcon } from '@twilio-paste/icons/esm/DownloadIcon'; +import type { EditorState } from '@twilio-paste/lexical-library'; -import {ChatComposer} from '../../src'; -import {SendButtonPlugin, EnterKeySubmitPlugin, createNewMessage} from './helpers'; +import { ChatComposer } from '../../src'; +import { SendButtonPlugin, EnterKeySubmitPlugin, createNewMessage } from './helpers'; // eslint-disable-next-line import/no-default-export export default { @@ -60,7 +60,7 @@ const ComposerAttachmentExample: React.FC = () => ( ); export const ConversationsUIKitExample: StoryFn = () => { - const {chats, push} = useChatLogger( + const { chats, push } = useChatLogger( { content: ( @@ -108,7 +108,7 @@ export const ConversationsUIKitExample: StoryFn = () => { ), - } + }, ); const [message, setMessage] = React.useState(''); const [mounted, setMounted] = React.useState(false); @@ -121,7 +121,7 @@ export const ConversationsUIKitExample: StoryFn = () => { React.useEffect(() => { if (!mounted || !loggerRef.current) return; - scrollerRef.current?.scrollTo({top: loggerRef.current.scrollHeight, behavior: 'smooth'}); + scrollerRef.current?.scrollTo({ top: loggerRef.current.scrollHeight, behavior: 'smooth' }); }, [chats, mounted]); const handleComposerChange = (editorState: EditorState): void => { diff --git a/packages/paste-core/components/chat-composer/stories/customization.stories.tsx b/packages/paste-core/components/chat-composer/stories/customization.stories.tsx index dc901daa5a..da425630db 100644 --- a/packages/paste-core/components/chat-composer/stories/customization.stories.tsx +++ b/packages/paste-core/components/chat-composer/stories/customization.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {useTheme} from '@twilio-paste/theme'; -import type {StoryFn} from '@storybook/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { useTheme } from '@twilio-paste/theme'; +import type { StoryFn } from '@storybook/react'; -import {ChatComposer} from '../src'; -import type {ChatComposerProps} from '../src'; +import { ChatComposer } from '../src'; +import type { ChatComposerProps } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -24,7 +24,7 @@ const defaultConfig: ChatComposerProps['config'] = { }, }; -export const Default: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const Default: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( diff --git a/packages/paste-core/components/chat-composer/stories/index.stories.tsx b/packages/paste-core/components/chat-composer/stories/index.stories.tsx index 2d6be13ea2..e16d0bb3cf 100644 --- a/packages/paste-core/components/chat-composer/stories/index.stories.tsx +++ b/packages/paste-core/components/chat-composer/stories/index.stories.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import type {EditorState} from '@twilio-paste/lexical-library'; -import {$getRoot, $createParagraphNode, $createTextNode} from '@twilio-paste/lexical-library'; -import type {StoryFn} from '@storybook/react'; -import {Box} from '@twilio-paste/box'; -import {Button} from '@twilio-paste/button'; -import {SendIcon} from '@twilio-paste/icons/esm/SendIcon'; -import {AttachIcon} from '@twilio-paste/icons/esm/AttachIcon'; +import type { EditorState } from '@twilio-paste/lexical-library'; +import { $getRoot, $createParagraphNode, $createTextNode } from '@twilio-paste/lexical-library'; +import type { StoryFn } from '@storybook/react'; +import { Box } from '@twilio-paste/box'; +import { Button } from '@twilio-paste/button'; +import { SendIcon } from '@twilio-paste/icons/esm/SendIcon'; +import { AttachIcon } from '@twilio-paste/icons/esm/AttachIcon'; -import {ChatComposer} from '../src'; -import type {ChatComposerProps} from '../src'; +import { ChatComposer } from '../src'; +import type { ChatComposerProps } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -68,7 +68,7 @@ const myOnChange = (editorState: EditorState): void => { }); }; -const ComposerWrapperExample: React.FC = ({children}) => ( +const ComposerWrapperExample: React.FC = ({ children }) => ( { }; WithOnChange.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, }; export const WithInitialValue: StoryFn = () => { diff --git a/packages/paste-core/components/chat-log/__tests__/ChatAttachment.spec.tsx b/packages/paste-core/components/chat-log/__tests__/ChatAttachment.spec.tsx index 9375513a2f..44298c80ce 100644 --- a/packages/paste-core/components/chat-log/__tests__/ChatAttachment.spec.tsx +++ b/packages/paste-core/components/chat-log/__tests__/ChatAttachment.spec.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import {screen, render} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import type {PasteCustomCSS} from '@twilio-paste/customization'; -import {Spinner} from '@twilio-paste/spinner'; -import {DownloadIcon} from '@twilio-paste/icons/esm/DownloadIcon'; -import {Theme} from '@twilio-paste/theme'; +import { screen, render } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import type { PasteCustomCSS } from '@twilio-paste/customization'; +import { Spinner } from '@twilio-paste/spinner'; +import { DownloadIcon } from '@twilio-paste/icons/esm/DownloadIcon'; +import { Theme } from '@twilio-paste/theme'; -import {ChatAttachment, ChatAttachmentLink, ChatAttachmentDescription, ComposerAttachmentCard} from '../src'; +import { ChatAttachment, ChatAttachmentLink, ChatAttachmentDescription, ComposerAttachmentCard } from '../src'; -const customizedElements: {[key: string]: PasteCustomCSS} = { +const customizedElements: { [key: string]: PasteCustomCSS } = { COMPOSER_ATTACHMENT_CARD: { padding: 'space100', }, @@ -32,7 +32,7 @@ const customizedElements: {[key: string]: PasteCustomCSS} = { }, }; -const customizedMyElements: {[key: string]: PasteCustomCSS} = { +const customizedMyElements: { [key: string]: PasteCustomCSS } = { MY_COMPOSER_ATTACHMENT_CARD: { padding: 'space100', }, @@ -56,7 +56,7 @@ const customizedMyElements: {[key: string]: PasteCustomCSS} = { }, }; -const CustomizationWrapper: React.FC> = ({ +const CustomizationWrapper: React.FC> = ({ children, elements, }) => ( @@ -65,17 +65,17 @@ const CustomizationWrapper: React.FC ); -const CustomizationMyWrapper: React.FC = ({children}) => ( +const CustomizationMyWrapper: React.FC = ({ children }) => ( {children} ); describe('ChatAttachment', () => { it('should render an icon, anchor, and text', () => { - const {container} = render( + const { container } = render( }> document description - + , ); expect(container.querySelector('[data-paste-element="ICON"]')).toBeDefined(); expect(screen.getByRole('link')).toBeDefined(); @@ -93,7 +93,7 @@ describe('ComposerAttachmentCard', () => { 123 MB - + , ); expect(screen.getByRole('button')).toBeDefined(); }); @@ -106,7 +106,7 @@ describe('ComposerAttachmentCard', () => { 123 MB - + , ); expect(screen.queryByRole('button')).toBeNull(); }); @@ -123,7 +123,7 @@ describe('Customization', () => { 123 MB , - {wrapper: CustomizationWrapper} + { wrapper: CustomizationWrapper }, ); const composerAttachmentCard = screen.getByTestId('composer-attachment-card'); @@ -136,7 +136,7 @@ describe('Customization', () => { expect(composerAttachmentCard.getAttribute('data-paste-element')).toEqual('COMPOSER_ATTACHMENT_CARD'); expect(composerAttachmentCardRemoveButton.getAttribute('data-paste-element')).toEqual( - 'COMPOSER_ATTACHMENT_CARD_REMOVE_BUTTON' + 'COMPOSER_ATTACHMENT_CARD_REMOVE_BUTTON', ); expect(chatAttachment.getAttribute('data-paste-element')).toEqual('CHAT_ATTACHMENT'); expect(chatAttachmentIcon.getAttribute('data-paste-element')).toEqual('CHAT_ATTACHMENT_ICON'); @@ -169,7 +169,7 @@ describe('Customization', () => { , - {wrapper: CustomizationWrapper} + { wrapper: CustomizationWrapper }, ); const composerAttachmentCard = screen.getByTestId('composer-attachment-card'); @@ -182,7 +182,7 @@ describe('Customization', () => { expect(composerAttachmentCard.getAttribute('data-paste-element')).toEqual('MY_COMPOSER_ATTACHMENT_CARD'); expect(composerAttachmentCardRemoveButton.getAttribute('data-paste-element')).toEqual( - 'MY_COMPOSER_ATTACHMENT_CARD_REMOVE_BUTTON' + 'MY_COMPOSER_ATTACHMENT_CARD_REMOVE_BUTTON', ); expect(chatAttachment.getAttribute('data-paste-element')).toEqual('MY_CHAT_ATTACHMENT'); expect(chatAttachmentIcon.getAttribute('data-paste-element')).toEqual('MY_CHAT_ATTACHMENT_ICON'); @@ -201,7 +201,7 @@ describe('Customization', () => { 123 MB , - {wrapper: CustomizationWrapper} + { wrapper: CustomizationWrapper }, ); const composerAttachmentCard = screen.getByTestId('composer-attachment-card'); @@ -245,7 +245,7 @@ describe('Customization', () => { , - {wrapper: CustomizationMyWrapper} + { wrapper: CustomizationMyWrapper }, ); const composerAttachmentCard = screen.getByTestId('composer-attachment-card'); diff --git a/packages/paste-core/components/chat-log/__tests__/ChatBookend.spec.tsx b/packages/paste-core/components/chat-log/__tests__/ChatBookend.spec.tsx index 33934ecef8..3adb63360a 100644 --- a/packages/paste-core/components/chat-log/__tests__/ChatBookend.spec.tsx +++ b/packages/paste-core/components/chat-log/__tests__/ChatBookend.spec.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {screen, render} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { screen, render } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {ChatBookend, ChatBookendItem} from '../src'; +import { ChatBookend, ChatBookendItem } from '../src'; -const CustomizationWrapper: React.FC = ({children}) => ( +const CustomizationWrapper: React.FC = ({ children }) => ( = ({children}) => ); -const MyCustomizationWrapper: React.FC = ({children}) => ( +const MyCustomizationWrapper: React.FC = ({ children }) => ( { render( Today - + , ); expect(screen.getByText('Today')).toBeDefined(); }); @@ -52,7 +52,7 @@ describe('ChatBookend', () => { render( Today - + , ); expect(screen.getByTestId('bookend')).toHaveAttribute('aria-label', 'Today'); }); @@ -64,7 +64,7 @@ describe('Customization', () => { Today , - {wrapper: CustomizationWrapper} + { wrapper: CustomizationWrapper }, ); const bookend = screen.getByTestId('bookend'); @@ -79,7 +79,7 @@ describe('Customization', () => { Today , - {wrapper: CustomizationWrapper} + { wrapper: CustomizationWrapper }, ); const bookend = screen.getByTestId('bookend'); @@ -94,7 +94,7 @@ describe('Customization', () => { Today , - {wrapper: MyCustomizationWrapper} + { wrapper: MyCustomizationWrapper }, ); const bookend = screen.getByTestId('bookend'); @@ -109,7 +109,7 @@ describe('Customization', () => { Today , - {wrapper: MyCustomizationWrapper} + { wrapper: MyCustomizationWrapper }, ); const bookend = screen.getByTestId('bookend'); diff --git a/packages/paste-core/components/chat-log/__tests__/ChatBubble.spec.tsx b/packages/paste-core/components/chat-log/__tests__/ChatBubble.spec.tsx index 024504e7d2..e15166c130 100644 --- a/packages/paste-core/components/chat-log/__tests__/ChatBubble.spec.tsx +++ b/packages/paste-core/components/chat-log/__tests__/ChatBubble.spec.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {screen, render} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { screen, render } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {ChatMessage, ChatBubble} from '../src'; +import { ChatMessage, ChatBubble } from '../src'; -const CustomizationWrapper: React.FC = ({children}) => ( +const CustomizationWrapper: React.FC = ({ children }) => ( = ({children}) => CHAT_BUBBLE: { color: 'colorTextInverse', variants: { - inbound: {backgroundColor: 'colorBackgroundPrimary'}, - outbound: {backgroundColor: 'colorBackgroundPrimaryStronger'}, + inbound: { backgroundColor: 'colorBackgroundPrimary' }, + outbound: { backgroundColor: 'colorBackgroundPrimaryStronger' }, }, }, }} @@ -22,7 +22,7 @@ const CustomizationWrapper: React.FC = ({children}) => ); -const CustomizationFooWrapper: React.FC = ({children}) => ( +const CustomizationFooWrapper: React.FC = ({ children }) => ( = ({children}) FOO_BUBBLE: { color: 'colorTextInverse', variants: { - inbound: {backgroundColor: 'colorBackgroundPrimary'}, - outbound: {backgroundColor: 'colorBackgroundPrimaryStronger'}, + inbound: { backgroundColor: 'colorBackgroundPrimary' }, + outbound: { backgroundColor: 'colorBackgroundPrimaryStronger' }, }, }, }} @@ -45,7 +45,7 @@ describe('ChatBubble', () => { render( test - + , ); expect(screen.getByText('test')).toBeDefined(); }); @@ -62,7 +62,7 @@ describe('Customization', () => { test , - {wrapper: CustomizationWrapper} + { wrapper: CustomizationWrapper }, ); const inboundBubble = screen.getByTestId('inbound-bubble'); @@ -84,7 +84,7 @@ describe('Customization', () => { test , - {wrapper: CustomizationWrapper} + { wrapper: CustomizationWrapper }, ); const inboundBubble = screen.getByTestId('inbound-bubble'); @@ -108,7 +108,7 @@ describe('Customization', () => { , - {wrapper: CustomizationFooWrapper} + { wrapper: CustomizationFooWrapper }, ); const inboundBubble = screen.getByTestId('inbound-bubble'); @@ -134,7 +134,7 @@ describe('Customization', () => { , - {wrapper: CustomizationFooWrapper} + { wrapper: CustomizationFooWrapper }, ); const inboundBubble = screen.getByTestId('inbound-bubble'); diff --git a/packages/paste-core/components/chat-log/__tests__/ChatEvent.spec.tsx b/packages/paste-core/components/chat-log/__tests__/ChatEvent.spec.tsx index 4a93d031b8..04dd65c0d2 100644 --- a/packages/paste-core/components/chat-log/__tests__/ChatEvent.spec.tsx +++ b/packages/paste-core/components/chat-log/__tests__/ChatEvent.spec.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {screen, render} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { screen, render } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {ChatEvent} from '../src'; +import { ChatEvent } from '../src'; -const CustomizationWrapper: React.FC = ({children}) => ( +const CustomizationWrapper: React.FC = ({ children }) => ( = ({children}) => ); -const MyCustomizationWrapper: React.FC = ({children}) => ( +const MyCustomizationWrapper: React.FC = ({ children }) => ( { render( Lauren Gardner has left the chat ・3:42 PM - + , ); expect(screen.getByTestId('event')).toBeDefined(); }); @@ -46,7 +46,7 @@ describe('ChatEvent', () => { render( Lauren Gardner has left the chat ・3:42 PM - + , ); expect(screen.getByTestId('event')).toHaveAttribute('aria-label', 'Lauren Gardner has left the chat at 3:42 PM'); }); @@ -58,7 +58,7 @@ describe('Customization', () => { Lauren Gardner has left the chat ・3:42 PM , - {wrapper: CustomizationWrapper} + { wrapper: CustomizationWrapper }, ); const event = screen.getByTestId('event'); @@ -71,7 +71,7 @@ describe('Customization', () => { Lauren Gardner has left the chat ・3:42 PM , - {wrapper: CustomizationWrapper} + { wrapper: CustomizationWrapper }, ); const event = screen.getByTestId('event'); @@ -84,7 +84,7 @@ describe('Customization', () => { Lauren Gardner has left the chat ・3:42 PM , - {wrapper: MyCustomizationWrapper} + { wrapper: MyCustomizationWrapper }, ); const event = screen.getByTestId('event'); @@ -97,7 +97,7 @@ describe('Customization', () => { Lauren Gardner has left the chat ・3:42 PM , - {wrapper: CustomizationWrapper} + { wrapper: CustomizationWrapper }, ); const event = screen.getByTestId('event'); diff --git a/packages/paste-core/components/chat-log/__tests__/ChatLogger.spec.tsx b/packages/paste-core/components/chat-log/__tests__/ChatLogger.spec.tsx index e55453e252..12e242298f 100644 --- a/packages/paste-core/components/chat-log/__tests__/ChatLogger.spec.tsx +++ b/packages/paste-core/components/chat-log/__tests__/ChatLogger.spec.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {screen, render} from '@testing-library/react'; +import { screen, render } from '@testing-library/react'; -import {ChatLogger, ChatMessage, ChatBubble} from '../src'; -import type {Chat} from '../src/useChatLogger'; +import { ChatLogger, ChatMessage, ChatBubble } from '../src'; +import type { Chat } from '../src/useChatLogger'; const chats: Chat[] = [ { diff --git a/packages/paste-core/components/chat-log/__tests__/ChatMessage.spec.tsx b/packages/paste-core/components/chat-log/__tests__/ChatMessage.spec.tsx index 25459b1700..8b21514574 100644 --- a/packages/paste-core/components/chat-log/__tests__/ChatMessage.spec.tsx +++ b/packages/paste-core/components/chat-log/__tests__/ChatMessage.spec.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {screen, render} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { screen, render } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {ChatMessage} from '../src'; +import { ChatMessage } from '../src'; -const CustomizationWrapper: React.FC = ({children}) => ( +const CustomizationWrapper: React.FC = ({ children }) => ( = ({children}) => CHAT_MESSAGE: { marginBottom: 'space100', variants: { - inbound: {marginRight: 'space100'}, - outbound: {marginLeft: 'space100'}, + inbound: { marginRight: 'space100' }, + outbound: { marginLeft: 'space100' }, }, }, }} @@ -22,7 +22,7 @@ const CustomizationWrapper: React.FC = ({children}) => ); -const CustomizationFooWrapper: React.FC = ({children}) => ( +const CustomizationFooWrapper: React.FC = ({ children }) => ( = ({children}) FOO_MESSAGE: { marginBottom: 'space100', variants: { - inbound: {marginRight: 'space100'}, - outbound: {marginLeft: 'space100'}, + inbound: { marginRight: 'space100' }, + outbound: { marginLeft: 'space100' }, }, }, }} @@ -58,7 +58,7 @@ describe('Customization', () => { test , - {wrapper: CustomizationWrapper} + { wrapper: CustomizationWrapper }, ); const inboundMessage = screen.getByTestId('inbound-message'); @@ -80,7 +80,7 @@ describe('Customization', () => { test , - {wrapper: CustomizationWrapper} + { wrapper: CustomizationWrapper }, ); const inboundMessage = screen.getByTestId('inbound-message'); @@ -100,7 +100,7 @@ describe('Customization', () => { test , - {wrapper: CustomizationFooWrapper} + { wrapper: CustomizationFooWrapper }, ); const inboundMessage = screen.getByTestId('inbound-message'); @@ -122,7 +122,7 @@ describe('Customization', () => { test , - {wrapper: CustomizationFooWrapper} + { wrapper: CustomizationFooWrapper }, ); const inboundMessage = screen.getByTestId('inbound-message'); const outboundMessage = screen.getByTestId('outbound-message'); diff --git a/packages/paste-core/components/chat-log/__tests__/ChatMessageMeta.spec.tsx b/packages/paste-core/components/chat-log/__tests__/ChatMessageMeta.spec.tsx index fb52d2b6b2..501d4c748f 100644 --- a/packages/paste-core/components/chat-log/__tests__/ChatMessageMeta.spec.tsx +++ b/packages/paste-core/components/chat-log/__tests__/ChatMessageMeta.spec.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {screen, render} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { screen, render } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {ChatMessage, ChatMessageMeta, ChatMessageMetaItem} from '../src'; +import { ChatMessage, ChatMessageMeta, ChatMessageMetaItem } from '../src'; -const CustomizationWrapper: React.FC = ({children}) => ( +const CustomizationWrapper: React.FC = ({ children }) => ( = ({children}) => CHAT_MESSAGE_META: { columnGap: 'space50', variants: { - inbound: {justifyContent: 'flex-start'}, - outbound: {justifyContent: 'flex-end'}, + inbound: { justifyContent: 'flex-start' }, + outbound: { justifyContent: 'flex-end' }, }, }, CHAT_MESSAGE_META_ITEM: { @@ -26,7 +26,7 @@ const CustomizationWrapper: React.FC = ({children}) => ); -const CustomizationFooWrapper: React.FC = ({children}) => ( +const CustomizationFooWrapper: React.FC = ({ children }) => ( = ({children}) FOO_META: { columnGap: 'space50', variants: { - inbound: {justifyContent: 'flex-start'}, - outbound: {justifyContent: 'flex-end'}, + inbound: { justifyContent: 'flex-start' }, + outbound: { justifyContent: 'flex-end' }, }, }, FOO_META_ITEM: { @@ -55,7 +55,7 @@ describe('ChatMessageMeta', () => { 5:04pm - + , ); expect(screen.getByText('5:04pm')).toBeDefined(); }); @@ -67,7 +67,7 @@ describe('ChatMessageMeta', () => { Gibby Radki 5:04pm - + , ); expect(screen.getByTestId('test-meta')).toHaveAttribute('aria-label', 'said by Gibby Radki at 5:04pm'); }); @@ -85,7 +85,7 @@ describe('ChatMessageMeta', () => { 5:04pm - + , ); expect(screen.getByTestId('in-test-meta')).toHaveStyleRule('justify-content', 'flex-start'); expect(screen.getByTestId('out-test-meta')).toHaveStyleRule('justify-content', 'flex-end'); @@ -97,7 +97,7 @@ describe('ChatMessageMeta', () => { 5:04pm - + , ); expect(screen.getByTestId('test-meta')).toHaveStyleRule('text-align', 'right'); }); @@ -109,7 +109,7 @@ describe('ChatMessageMeta', () => { Gibby Radki 5:04pm - + , ); expect(screen.getByTestId('test-meta')).not.toHaveStyleRule('text-align', 'right'); }); @@ -130,7 +130,7 @@ describe('Customization', () => { , - {wrapper: CustomizationWrapper} + { wrapper: CustomizationWrapper }, ); const inboundMeta = screen.getByTestId('inbound-meta'); @@ -156,7 +156,7 @@ describe('Customization', () => { , - {wrapper: CustomizationWrapper} + { wrapper: CustomizationWrapper }, ); const inboundMeta = screen.getByTestId('inbound-meta'); @@ -180,7 +180,7 @@ describe('Customization', () => { , - {wrapper: CustomizationFooWrapper} + { wrapper: CustomizationFooWrapper }, ); const inboundMeta = screen.getByTestId('inbound-meta'); @@ -206,7 +206,7 @@ describe('Customization', () => { , - {wrapper: CustomizationFooWrapper} + { wrapper: CustomizationFooWrapper }, ); const inboundMeta = screen.getByTestId('inbound-meta'); @@ -225,7 +225,7 @@ describe('ChatMessageMetaItem', () => { 5:04pm , - {wrapper: CustomizationWrapper} + { wrapper: CustomizationWrapper }, ); const metaItem = screen.getByTestId('meta-item'); @@ -240,7 +240,7 @@ describe('ChatMessageMetaItem', () => { 5:04pm , - {wrapper: CustomizationWrapper} + { wrapper: CustomizationWrapper }, ); const metaItem = screen.getByTestId('meta-item'); @@ -256,7 +256,7 @@ describe('ChatMessageMetaItem', () => { , - {wrapper: CustomizationFooWrapper} + { wrapper: CustomizationFooWrapper }, ); const metaItem = screen.getByTestId('meta-item'); @@ -273,7 +273,7 @@ describe('ChatMessageMetaItem', () => { , - {wrapper: CustomizationFooWrapper} + { wrapper: CustomizationFooWrapper }, ); const metaItem = screen.getByTestId('meta-item'); diff --git a/packages/paste-core/components/chat-log/__tests__/chatLog.spec.tsx b/packages/paste-core/components/chat-log/__tests__/chatLog.spec.tsx index 38687a50be..3ac065dd47 100644 --- a/packages/paste-core/components/chat-log/__tests__/chatLog.spec.tsx +++ b/packages/paste-core/components/chat-log/__tests__/chatLog.spec.tsx @@ -1,21 +1,21 @@ import * as React from 'react'; -import {screen, render, waitFor} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import type {PasteCustomCSS} from '@twilio-paste/customization'; +import { screen, render, waitFor } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import type { PasteCustomCSS } from '@twilio-paste/customization'; -import {ChatLog} from '../src'; +import { ChatLog } from '../src'; -const CustomizationWrapper: React.FC> = ({ +const CustomizationWrapper: React.FC> = ({ children, elements, }) => ( - + {children} ); -const CustomizationFooWrapper: React.FC = ({children}) => ( - +const CustomizationFooWrapper: React.FC = ({ children }) => ( + {children} ); @@ -30,21 +30,21 @@ describe('ChatLog', () => { describe('Customization', () => { it('should add custom styles', () => { - render(, {wrapper: CustomizationWrapper}); + render(, { wrapper: CustomizationWrapper }); const chatLog = screen.getByRole('log'); expect(chatLog).toHaveStyleRule('padding', '2.25rem'); }); it('should set element data attribute', () => { - render(, {wrapper: CustomizationWrapper}); + render(, { wrapper: CustomizationWrapper }); const chatLog = screen.getByRole('log'); expect(chatLog.getAttribute('data-paste-element')).toEqual('CHAT_LOG'); }); it('should add custom styles with a custom element data attribute', () => { - render(, {wrapper: CustomizationFooWrapper}); + render(, { wrapper: CustomizationFooWrapper }); const chatLog = screen.getByRole('log'); waitFor(() => { expect(chatLog).toHaveStyleRule('padding', '2.25rem'); @@ -52,7 +52,7 @@ describe('Customization', () => { }); it('should set custom element data attribute', () => { - render(, {wrapper: CustomizationFooWrapper}); + render(, { wrapper: CustomizationFooWrapper }); const chatLog = screen.getByRole('log'); expect(chatLog.getAttribute('data-paste-element')).toEqual('FOO_LOG'); diff --git a/packages/paste-core/components/chat-log/__tests__/useChatLogger.spec.tsx b/packages/paste-core/components/chat-log/__tests__/useChatLogger.spec.tsx index eaf542a317..27aec338d2 100644 --- a/packages/paste-core/components/chat-log/__tests__/useChatLogger.spec.tsx +++ b/packages/paste-core/components/chat-log/__tests__/useChatLogger.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {renderHook, act} from '@testing-library/react'; +import { renderHook, act } from '@testing-library/react'; -import {useChatLogger, ChatBubble, ChatMessage} from '../src'; +import { useChatLogger, ChatBubble, ChatMessage } from '../src'; const chat = { id: 'custom-id-123', @@ -15,7 +15,7 @@ const chat = { describe('useChatLogger', () => { it('returns expected result with defaults', () => { - const {result} = renderHook(() => useChatLogger()); + const { result } = renderHook(() => useChatLogger()); expect(result.current).toMatchObject({ chats: [], @@ -25,7 +25,7 @@ describe('useChatLogger', () => { }); it('returns expected result with initialization', () => { - const {result} = renderHook(() => useChatLogger(chat)); + const { result } = renderHook(() => useChatLogger(chat)); expect(result.current.chats).toHaveLength(1); expect(result.current.pop).toBeInstanceOf(Function); @@ -35,7 +35,7 @@ describe('useChatLogger', () => { describe('push', () => { it('pushes new chats with an id', () => { - const {result} = renderHook(() => useChatLogger()); + const { result } = renderHook(() => useChatLogger()); expect(result.current.chats).toHaveLength(0); act(() => { @@ -47,11 +47,11 @@ describe('useChatLogger', () => { }); it('pushes new chats without an id', () => { - const {result} = renderHook(() => useChatLogger()); + const { result } = renderHook(() => useChatLogger()); expect(result.current.chats).toHaveLength(0); act(() => { - const chatWithoutCustomId = {...chat, id: undefined}; + const chatWithoutCustomId = { ...chat, id: undefined }; result.current.push(chatWithoutCustomId); }); @@ -64,7 +64,7 @@ describe('useChatLogger', () => { describe('pop', () => { it('pops chats with an id', () => { - const {result} = renderHook(() => useChatLogger(chat)); + const { result } = renderHook(() => useChatLogger(chat)); expect(result.current.chats).toHaveLength(1); act(() => { @@ -75,7 +75,7 @@ describe('useChatLogger', () => { }); it('pops chats without an id', () => { - const {result} = renderHook(() => useChatLogger(chat)); + const { result } = renderHook(() => useChatLogger(chat)); expect(result.current.chats).toHaveLength(1); act(() => { diff --git a/packages/paste-core/components/chat-log/build.js b/packages/paste-core/components/chat-log/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/chat-log/build.js +++ b/packages/paste-core/components/chat-log/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/chat-log/src/ChatAttachment.tsx b/packages/paste-core/components/chat-log/src/ChatAttachment.tsx index 32e64383a0..b5d791c83a 100644 --- a/packages/paste-core/components/chat-log/src/ChatAttachment.tsx +++ b/packages/paste-core/components/chat-log/src/ChatAttachment.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import type {BoxElementProps} from '@twilio-paste/box'; -import {Box} from '@twilio-paste/box'; -import {MediaObject, MediaFigure, MediaBody} from '@twilio-paste/media-object'; -import {Stack} from '@twilio-paste/stack'; +import type { BoxElementProps } from '@twilio-paste/box'; +import { Box } from '@twilio-paste/box'; +import { MediaObject, MediaFigure, MediaBody } from '@twilio-paste/media-object'; +import { Stack } from '@twilio-paste/stack'; -import {MessageVariantContext} from './MessageVariantContext'; +import { MessageVariantContext } from './MessageVariantContext'; export interface ChatAttachmentProps { children: NonNullable; @@ -13,7 +13,7 @@ export interface ChatAttachmentProps { } const ChatAttachment = React.forwardRef( - ({children, element = 'CHAT_ATTACHMENT', attachmentIcon, ...props}, ref) => { + ({ children, element = 'CHAT_ATTACHMENT', attachmentIcon, ...props }, ref) => { const variant = React.useContext(MessageVariantContext); return ( @@ -29,9 +29,9 @@ const ChatAttachment = React.forwardRef( ); - } + }, ); ChatAttachment.displayName = 'ChatAttachment'; -export {ChatAttachment}; +export { ChatAttachment }; diff --git a/packages/paste-core/components/chat-log/src/ChatAttachmentDescription.tsx b/packages/paste-core/components/chat-log/src/ChatAttachmentDescription.tsx index 0b99020088..80c7a74c79 100644 --- a/packages/paste-core/components/chat-log/src/ChatAttachmentDescription.tsx +++ b/packages/paste-core/components/chat-log/src/ChatAttachmentDescription.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import type {BoxElementProps} from '@twilio-paste/box'; -import {Text, safelySpreadTextProps} from '@twilio-paste/text'; +import type { BoxElementProps } from '@twilio-paste/box'; +import { Text, safelySpreadTextProps } from '@twilio-paste/text'; -import {MessageVariantContext} from './MessageVariantContext'; +import { MessageVariantContext } from './MessageVariantContext'; export interface ChatAttachmentDescriptionProps { children: string; @@ -10,7 +10,7 @@ export interface ChatAttachmentDescriptionProps { } const ChatAttachmentDescription = React.forwardRef( - ({children, element = 'CHAT_ATTACHMENT_DESCRIPTION', ...props}, ref) => { + ({ children, element = 'CHAT_ATTACHMENT_DESCRIPTION', ...props }, ref) => { const variant = React.useContext(MessageVariantContext); return ( ); - } + }, ); ChatAttachmentDescription.displayName = 'ChatAttachmentDescription'; -export {ChatAttachmentDescription}; +export { ChatAttachmentDescription }; diff --git a/packages/paste-core/components/chat-log/src/ChatAttachmentLink.tsx b/packages/paste-core/components/chat-log/src/ChatAttachmentLink.tsx index cc0e3fd014..475c7aa0f9 100644 --- a/packages/paste-core/components/chat-log/src/ChatAttachmentLink.tsx +++ b/packages/paste-core/components/chat-log/src/ChatAttachmentLink.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {Anchor} from '@twilio-paste/anchor'; -import type {AnchorProps} from '@twilio-paste/anchor'; -import type {BoxElementProps} from '@twilio-paste/box'; -import {Truncate} from '@twilio-paste/truncate'; +import { Anchor } from '@twilio-paste/anchor'; +import type { AnchorProps } from '@twilio-paste/anchor'; +import type { BoxElementProps } from '@twilio-paste/box'; +import { Truncate } from '@twilio-paste/truncate'; -import {MessageVariantContext} from './MessageVariantContext'; +import { MessageVariantContext } from './MessageVariantContext'; export interface ChatAttachmentLinkProps extends AnchorProps { children: string; @@ -12,7 +12,7 @@ export interface ChatAttachmentLinkProps extends AnchorProps { } const ChatAttachmentLink = React.forwardRef( - ({children, href, element = 'CHAT_ATTACHMENT_LINK', ...props}, ref) => { + ({ children, href, element = 'CHAT_ATTACHMENT_LINK', ...props }, ref) => { const variant = React.useContext(MessageVariantContext); return ( {children} ); - } + }, ); ChatAttachmentLink.displayName = 'ChatAttachmentLink'; -export {ChatAttachmentLink}; +export { ChatAttachmentLink }; diff --git a/packages/paste-core/components/chat-log/src/ChatBookend.tsx b/packages/paste-core/components/chat-log/src/ChatBookend.tsx index d7fea2c7eb..1290f28896 100644 --- a/packages/paste-core/components/chat-log/src/ChatBookend.tsx +++ b/packages/paste-core/components/chat-log/src/ChatBookend.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxElementProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxElementProps } from '@twilio-paste/box'; export interface ChatBookendProps { children?: React.ReactNode; @@ -8,7 +8,7 @@ export interface ChatBookendProps { } const ChatBookend = React.forwardRef( - ({children, element = 'CHAT_BOOKEND', ...props}, ref) => { + ({ children, element = 'CHAT_BOOKEND', ...props }, ref) => { return ( ( {children} ); - } + }, ); ChatBookend.displayName = 'ChatBookend'; -export {ChatBookend}; +export { ChatBookend }; diff --git a/packages/paste-core/components/chat-log/src/ChatBookendItem.tsx b/packages/paste-core/components/chat-log/src/ChatBookendItem.tsx index 5d2d25ccba..03fd8e776d 100644 --- a/packages/paste-core/components/chat-log/src/ChatBookendItem.tsx +++ b/packages/paste-core/components/chat-log/src/ChatBookendItem.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxElementProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxElementProps } from '@twilio-paste/box'; export interface ChatBookendItemProps { children?: React.ReactNode; @@ -8,15 +8,15 @@ export interface ChatBookendItemProps { } const ChatBookendItem = React.forwardRef( - ({children, element = 'CHAT_BOOKEND_ITEM', ...props}, ref) => { + ({ children, element = 'CHAT_BOOKEND_ITEM', ...props }, ref) => { return ( {children} ); - } + }, ); ChatBookendItem.displayName = 'ChatBookendItem'; -export {ChatBookendItem}; +export { ChatBookendItem }; diff --git a/packages/paste-core/components/chat-log/src/ChatBubble.tsx b/packages/paste-core/components/chat-log/src/ChatBubble.tsx index 6292f83a3b..581c8d11b4 100644 --- a/packages/paste-core/components/chat-log/src/ChatBubble.tsx +++ b/packages/paste-core/components/chat-log/src/ChatBubble.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxStyleProps, BoxElementProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxStyleProps, BoxElementProps } from '@twilio-paste/box'; -import {MessageVariantContext} from './MessageVariantContext'; -import type {MessageVariants} from './MessageVariantContext'; +import { MessageVariantContext } from './MessageVariantContext'; +import type { MessageVariants } from './MessageVariantContext'; export interface ChatBubbleProps { children?: React.ReactNode; @@ -25,7 +25,7 @@ const bubbleVariantStyles: { }; export const ChatBubble = React.forwardRef( - ({children, element = 'CHAT_BUBBLE', ...props}, ref) => { + ({ children, element = 'CHAT_BUBBLE', ...props }, ref) => { const variant = React.useContext(MessageVariantContext); return ( @@ -47,7 +47,7 @@ export const ChatBubble = React.forwardRef( {children} ); - } + }, ); ChatBubble.displayName = 'ChatBubble'; diff --git a/packages/paste-core/components/chat-log/src/ChatEvent.tsx b/packages/paste-core/components/chat-log/src/ChatEvent.tsx index 746950b1ac..6b6e8483ba 100644 --- a/packages/paste-core/components/chat-log/src/ChatEvent.tsx +++ b/packages/paste-core/components/chat-log/src/ChatEvent.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxElementProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxElementProps } from '@twilio-paste/box'; export interface ChatEventProps { children?: React.ReactNode; @@ -8,7 +8,7 @@ export interface ChatEventProps { } const ChatEvent = React.forwardRef( - ({children, element = 'CHAT_EVENT', ...props}, ref) => { + ({ children, element = 'CHAT_EVENT', ...props }, ref) => { return ( ( {children} ); - } + }, ); ChatEvent.displayName = 'ChatEvent'; -export {ChatEvent}; +export { ChatEvent }; diff --git a/packages/paste-core/components/chat-log/src/ChatLog.tsx b/packages/paste-core/components/chat-log/src/ChatLog.tsx index 713accb7f1..b96abbc9d1 100644 --- a/packages/paste-core/components/chat-log/src/ChatLog.tsx +++ b/packages/paste-core/components/chat-log/src/ChatLog.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxElementProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxElementProps } from '@twilio-paste/box'; export interface ChatLogProps { children?: React.ReactNode; element?: BoxElementProps['element']; } -const ChatLog = React.forwardRef(({children, element = 'CHAT_LOG', ...props}, ref) => { +const ChatLog = React.forwardRef(({ children, element = 'CHAT_LOG', ...props }, ref) => { return ( @@ -19,4 +19,4 @@ const ChatLog = React.forwardRef(({children, eleme ChatLog.displayName = 'ChatLog'; -export {ChatLog}; +export { ChatLog }; diff --git a/packages/paste-core/components/chat-log/src/ChatLogger.tsx b/packages/paste-core/components/chat-log/src/ChatLogger.tsx index ccc49ac30d..84054fe76a 100644 --- a/packages/paste-core/components/chat-log/src/ChatLogger.tsx +++ b/packages/paste-core/components/chat-log/src/ChatLogger.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import {useTransition, animated, useReducedMotion} from '@twilio-paste/animation-library'; +import { Box } from '@twilio-paste/box'; +import { useTransition, animated, useReducedMotion } from '@twilio-paste/animation-library'; -import {ChatLog} from './ChatLog'; -import type {Chat} from './useChatLogger'; +import { ChatLog } from './ChatLog'; +import type { Chat } from './useChatLogger'; const AnimatedChat = animated(Box); type StyleProps = React.ComponentProps['style']; @@ -19,12 +19,12 @@ const buildTransitionX = (chat: Chat): number => { return 0; }; -const ChatLogger = React.forwardRef(({chats, ...props}, ref) => { +const ChatLogger = React.forwardRef(({ chats, ...props }, ref) => { const transitions = useTransition(chats, { keys: (chat: Chat) => chat.id, - from: (chat: Chat): StyleProps => ({opacity: 0, x: buildTransitionX(chat)}), - enter: {opacity: 1, x: 0}, - leave: (chat: Chat): StyleProps => ({opacity: 0, x: buildTransitionX(chat)}), + from: (chat: Chat): StyleProps => ({ opacity: 0, x: buildTransitionX(chat) }), + enter: { opacity: 1, x: 0 }, + leave: (chat: Chat): StyleProps => ({ opacity: 0, x: buildTransitionX(chat) }), config: { mass: 0.7, tension: 190, @@ -33,8 +33,8 @@ const ChatLogger = React.forwardRef(({chats, .. }); const animatedChats = useReducedMotion() - ? chats.map((chat) => React.cloneElement(chat.content, {key: chat.id})) - : transitions((styles: StyleProps, chat: Chat, {key}: {key: string}) => ( + ? chats.map((chat) => React.cloneElement(chat.content, { key: chat.id })) + : transitions((styles: StyleProps, chat: Chat, { key }: { key: string }) => ( {chat.content} @@ -49,4 +49,4 @@ const ChatLogger = React.forwardRef(({chats, .. ChatLogger.displayName = 'ChatLogger'; -export {ChatLogger}; +export { ChatLogger }; diff --git a/packages/paste-core/components/chat-log/src/ChatMessage.tsx b/packages/paste-core/components/chat-log/src/ChatMessage.tsx index 15b858e7a8..505d845f86 100644 --- a/packages/paste-core/components/chat-log/src/ChatMessage.tsx +++ b/packages/paste-core/components/chat-log/src/ChatMessage.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxStyleProps, BoxElementProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxStyleProps, BoxElementProps } from '@twilio-paste/box'; -import {MessageVariantContext} from './MessageVariantContext'; -import type {MessageVariants} from './MessageVariantContext'; +import { MessageVariantContext } from './MessageVariantContext'; +import type { MessageVariants } from './MessageVariantContext'; export interface ChatMessageProps { children?: React.ReactNode; @@ -26,7 +26,7 @@ const messageVariantStyles: { }; export const ChatMessage = React.forwardRef( - ({children, variant, element = 'CHAT_MESSAGE', ...props}, ref) => { + ({ children, variant, element = 'CHAT_MESSAGE', ...props }, ref) => { return ( ( ); - } + }, ); ChatMessage.displayName = 'ChatMessage'; diff --git a/packages/paste-core/components/chat-log/src/ChatMessageMeta.tsx b/packages/paste-core/components/chat-log/src/ChatMessageMeta.tsx index d85af962cc..943850bf06 100644 --- a/packages/paste-core/components/chat-log/src/ChatMessageMeta.tsx +++ b/packages/paste-core/components/chat-log/src/ChatMessageMeta.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxElementProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxElementProps } from '@twilio-paste/box'; -import {MessageVariantContext} from './MessageVariantContext'; +import { MessageVariantContext } from './MessageVariantContext'; export interface ChatMessageMetaProps { ['aria-label']: string; @@ -11,7 +11,7 @@ export interface ChatMessageMetaProps { } export const ChatMessageMeta = React.forwardRef( - ({children, element = 'CHAT_MESSAGE_META', ...props}, ref) => { + ({ children, element = 'CHAT_MESSAGE_META', ...props }, ref) => { const variant = React.useContext(MessageVariantContext); return ( @@ -30,7 +30,7 @@ export const ChatMessageMeta = React.forwardRef ); - } + }, ); ChatMessageMeta.displayName = 'ChatMessageMeta'; diff --git a/packages/paste-core/components/chat-log/src/ChatMessageMetaItem.tsx b/packages/paste-core/components/chat-log/src/ChatMessageMetaItem.tsx index 6aab088dec..790b26688a 100644 --- a/packages/paste-core/components/chat-log/src/ChatMessageMetaItem.tsx +++ b/packages/paste-core/components/chat-log/src/ChatMessageMetaItem.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxElementProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxElementProps } from '@twilio-paste/box'; export interface ChatMessageMetaItemProps { children: NonNullable; @@ -8,7 +8,7 @@ export interface ChatMessageMetaItemProps { } export const ChatMessageMetaItem = React.forwardRef( - ({children, element = 'CHAT_MESSAGE_META_ITEM', ...props}, ref) => ( + ({ children, element = 'CHAT_MESSAGE_META_ITEM', ...props }, ref) => ( {children} - ) + ), ); ChatMessageMetaItem.displayName = 'ChatMessageMetaItem'; diff --git a/packages/paste-core/components/chat-log/src/ComposerAttachmentCard.tsx b/packages/paste-core/components/chat-log/src/ComposerAttachmentCard.tsx index 564215cd3d..220048943a 100644 --- a/packages/paste-core/components/chat-log/src/ComposerAttachmentCard.tsx +++ b/packages/paste-core/components/chat-log/src/ComposerAttachmentCard.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {Button} from '@twilio-paste/button'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxElementProps, BoxStyleProps} from '@twilio-paste/box'; -import {ClearIcon} from '@twilio-paste/icons/esm/ClearIcon'; -import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only'; +import { Button } from '@twilio-paste/button'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxElementProps, BoxStyleProps } from '@twilio-paste/box'; +import { ClearIcon } from '@twilio-paste/icons/esm/ClearIcon'; +import { ScreenReaderOnly } from '@twilio-paste/screen-reader-only'; /* *These style props are specific to our ClearIcon use case in ComposerAttachmentCard. @@ -32,8 +32,8 @@ export interface ComposerAttachmentCardProps { const ComposerAttachmentCard = React.forwardRef( ( - {children, onDismiss, i18nDismissLabel = 'Remove attachment', element = 'COMPOSER_ATTACHMENT_CARD', ...props}, - ref + { children, onDismiss, i18nDismissLabel = 'Remove attachment', element = 'COMPOSER_ATTACHMENT_CARD', ...props }, + ref, ) => { return ( ); - } + }, ); ComposerAttachmentCard.displayName = 'ComposerAttachmentCard'; -export {ComposerAttachmentCard}; +export { ComposerAttachmentCard }; diff --git a/packages/paste-core/components/chat-log/src/index.tsx b/packages/paste-core/components/chat-log/src/index.tsx index bb1efc4039..329d91a4e0 100644 --- a/packages/paste-core/components/chat-log/src/index.tsx +++ b/packages/paste-core/components/chat-log/src/index.tsx @@ -12,4 +12,4 @@ export * from './ChatBookendItem'; export * from './ChatEvent'; export * from './ChatLogger'; export * from './useChatLogger'; -export type {MessageVariants} from './MessageVariantContext'; +export type { MessageVariants } from './MessageVariantContext'; diff --git a/packages/paste-core/components/chat-log/src/useChatLogger.ts b/packages/paste-core/components/chat-log/src/useChatLogger.ts index b8bed7f4b6..96759836a9 100644 --- a/packages/paste-core/components/chat-log/src/useChatLogger.ts +++ b/packages/paste-core/components/chat-log/src/useChatLogger.ts @@ -1,7 +1,7 @@ import * as React from 'react'; -import {uid} from '@twilio-paste/uid-library'; +import { uid } from '@twilio-paste/uid-library'; -import type {MessageVariants} from './MessageVariantContext'; +import type { MessageVariants } from './MessageVariantContext'; type PushChat = (chat: PartialIDChat) => void; type PopChat = (id?: string) => void; @@ -21,7 +21,7 @@ export type UseChatLogger = (...initialChats: PartialIDChat[]) => { clear: () => void; }; -const chatWithId = (chat: PartialIDChat): Chat => ({...chat, id: chat.id || uid(chat.content)}); +const chatWithId = (chat: PartialIDChat): Chat => ({ ...chat, id: chat.id || uid(chat.content) }); export const useChatLogger: UseChatLogger = (...initialChats) => { const parsedInitialChats = React.useMemo(() => initialChats.map(chatWithId), [initialChats]); @@ -38,5 +38,5 @@ export const useChatLogger: UseChatLogger = (...initialChats) => { const clear: () => void = React.useCallback(() => setChats([]), []); - return {push, pop, chats, clear}; + return { push, pop, chats, clear }; }; diff --git a/packages/paste-core/components/chat-log/stories/components/ChatAttachment.stories.tsx b/packages/paste-core/components/chat-log/stories/components/ChatAttachment.stories.tsx index 2eed9eda4c..59e9765464 100644 --- a/packages/paste-core/components/chat-log/stories/components/ChatAttachment.stories.tsx +++ b/packages/paste-core/components/chat-log/stories/components/ChatAttachment.stories.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {Spinner} from '@twilio-paste/spinner'; -import {Stack} from '@twilio-paste/stack'; -import {DownloadIcon} from '@twilio-paste/icons/esm/DownloadIcon'; -import type {StoryFn} from '@storybook/react'; +import { Spinner } from '@twilio-paste/spinner'; +import { Stack } from '@twilio-paste/stack'; +import { DownloadIcon } from '@twilio-paste/icons/esm/DownloadIcon'; +import type { StoryFn } from '@storybook/react'; import { ChatLog, @@ -95,5 +95,5 @@ export const StatefulComposerAttachmentCard: StoryFn = () => ( ); StatefulComposerAttachmentCard.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, }; diff --git a/packages/paste-core/components/chat-log/stories/components/ChatBookend.stories.tsx b/packages/paste-core/components/chat-log/stories/components/ChatBookend.stories.tsx index 4897268e2c..679ca1887e 100644 --- a/packages/paste-core/components/chat-log/stories/components/ChatBookend.stories.tsx +++ b/packages/paste-core/components/chat-log/stories/components/ChatBookend.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; +import type { StoryFn } from '@storybook/react'; -import {ChatLog, ChatBookend, ChatBookendItem} from '../../src'; +import { ChatLog, ChatBookend, ChatBookendItem } from '../../src'; // eslint-disable-next-line import/no-default-export export default { diff --git a/packages/paste-core/components/chat-log/stories/components/ChatBubble.stories.tsx b/packages/paste-core/components/chat-log/stories/components/ChatBubble.stories.tsx index 86d5c52195..11c9fc0083 100644 --- a/packages/paste-core/components/chat-log/stories/components/ChatBubble.stories.tsx +++ b/packages/paste-core/components/chat-log/stories/components/ChatBubble.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; +import type { StoryFn } from '@storybook/react'; -import {ChatMessage, ChatBubble, ChatLog} from '../../src'; +import { ChatMessage, ChatBubble, ChatLog } from '../../src'; // eslint-disable-next-line import/no-default-export export default { diff --git a/packages/paste-core/components/chat-log/stories/components/ChatEvent.stories.tsx b/packages/paste-core/components/chat-log/stories/components/ChatEvent.stories.tsx index 8b477a2e72..28bf5749ee 100644 --- a/packages/paste-core/components/chat-log/stories/components/ChatEvent.stories.tsx +++ b/packages/paste-core/components/chat-log/stories/components/ChatEvent.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; +import type { StoryFn } from '@storybook/react'; -import {ChatLog, ChatEvent} from '../../src'; +import { ChatLog, ChatEvent } from '../../src'; // eslint-disable-next-line import/no-default-export export default { diff --git a/packages/paste-core/components/chat-log/stories/components/ChatMessageMeta.stories.tsx b/packages/paste-core/components/chat-log/stories/components/ChatMessageMeta.stories.tsx index 36a9f522d4..12fca7c687 100644 --- a/packages/paste-core/components/chat-log/stories/components/ChatMessageMeta.stories.tsx +++ b/packages/paste-core/components/chat-log/stories/components/ChatMessageMeta.stories.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {Avatar} from '@twilio-paste/avatar'; -import type {StoryFn} from '@storybook/react'; +import { Avatar } from '@twilio-paste/avatar'; +import type { StoryFn } from '@storybook/react'; -import {ChatMessage, ChatBubble, ChatMessageMeta, ChatMessageMetaItem, ChatLog} from '../../src'; +import { ChatMessage, ChatBubble, ChatMessageMeta, ChatMessageMetaItem, ChatLog } from '../../src'; // eslint-disable-next-line import/no-default-export export default { diff --git a/packages/paste-core/components/chat-log/stories/components/UseChatLogger.stories.tsx b/packages/paste-core/components/chat-log/stories/components/UseChatLogger.stories.tsx index 4316db23b4..5c80b0eccf 100644 --- a/packages/paste-core/components/chat-log/stories/components/UseChatLogger.stories.tsx +++ b/packages/paste-core/components/chat-log/stories/components/UseChatLogger.stories.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {useUID} from '@twilio-paste/uid-library'; -import {Input} from '@twilio-paste/input'; -import {Box} from '@twilio-paste/box'; -import {Label} from '@twilio-paste/label'; -import {Stack} from '@twilio-paste/stack'; -import {Button} from '@twilio-paste/button'; -import {OrderedList, ListItem} from '@twilio-paste/list'; -import {RadioButtonGroup, RadioButton} from '@twilio-paste/radio-button-group'; +import type { StoryFn } from '@storybook/react'; +import { useUID } from '@twilio-paste/uid-library'; +import { Input } from '@twilio-paste/input'; +import { Box } from '@twilio-paste/box'; +import { Label } from '@twilio-paste/label'; +import { Stack } from '@twilio-paste/stack'; +import { Button } from '@twilio-paste/button'; +import { OrderedList, ListItem } from '@twilio-paste/list'; +import { RadioButtonGroup, RadioButton } from '@twilio-paste/radio-button-group'; -import {ChatLogger, ChatMessage, ChatBubble, useChatLogger} from '../../src'; -import type {MessageVariants} from '../../src'; -import type {PartialIDChat} from '../../src/useChatLogger'; +import { ChatLogger, ChatMessage, ChatBubble, useChatLogger } from '../../src'; +import type { MessageVariants } from '../../src'; +import type { PartialIDChat } from '../../src/useChatLogger'; // eslint-disable-next-line import/no-default-export export default { @@ -24,7 +24,7 @@ export const UseChatLogger: StoryFn = () => { const messageID = useUID(); const variantId = useUID(); - const {chats, push, pop, clear} = useChatLogger( + const { chats, push, pop, clear } = useChatLogger( { variant: 'inbound', content: ( @@ -48,7 +48,7 @@ export const UseChatLogger: StoryFn = () => { Of course! Can you provide more detail? ), - } + }, ); const handlePushSubmit: React.FormEventHandler = (e) => { @@ -130,7 +130,7 @@ export const UseChatLogger: StoryFn = () => { - {chats.map(({id}) => ( + {chats.map(({ id }) => ( {id} diff --git a/packages/paste-core/components/chat-log/stories/customization.stories.tsx b/packages/paste-core/components/chat-log/stories/customization.stories.tsx index be3cddad0d..9137375f6e 100644 --- a/packages/paste-core/components/chat-log/stories/customization.stories.tsx +++ b/packages/paste-core/components/chat-log/stories/customization.stories.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {Avatar} from '@twilio-paste/avatar'; -import {DownloadIcon} from '@twilio-paste/icons/esm/DownloadIcon'; -import {useTheme} from '@twilio-paste/theme'; -import type {StoryFn} from '@storybook/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { Avatar } from '@twilio-paste/avatar'; +import { DownloadIcon } from '@twilio-paste/icons/esm/DownloadIcon'; +import { useTheme } from '@twilio-paste/theme'; +import type { StoryFn } from '@storybook/react'; import { ChatMessage, @@ -31,7 +31,7 @@ export default { }, }; -export const CustomizedMessages: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const CustomizedMessages: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( { +export const CustomizedChatAttachments: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( { +export const CustomizedChatBookend: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( { +export const CustomizedChatEvent: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( ({ - [`${element}_GROUP`]: {padding: 'space60'}, - [`${element}_GROUP_SET`]: {marginLeft: 'space60'}, - [`${element}_GROUP_FIELD`]: {marginBottom: 'space60'}, - [`${element}_GROUP_ERROR_TEXT_WRAPPER`]: {marginBottom: 'space60'}, - [`${element}`]: {padding: 'space30'}, - [`${element}_CONTROL`]: {borderRadius: 'borderRadius20'}, - [`${element}_ICON`]: {color: 'colorTextIconNeutral'}, - [`${element}_LABEL_TEXT`]: {color: 'colorTextNeutral'}, - [`${element}_HELP_TEXT_WRAPPER`]: {marginBottom: 'space60'}, +import { render, fireEvent, screen } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import type { PasteCustomCSS } from '@twilio-paste/customization'; + +import { Checkbox, CheckboxGroup } from '../src'; + +const getCustomizationStyles = (element = 'CHECKBOX'): { [key: string]: PasteCustomCSS } => ({ + [`${element}_GROUP`]: { padding: 'space60' }, + [`${element}_GROUP_SET`]: { marginLeft: 'space60' }, + [`${element}_GROUP_FIELD`]: { marginBottom: 'space60' }, + [`${element}_GROUP_ERROR_TEXT_WRAPPER`]: { marginBottom: 'space60' }, + [`${element}`]: { padding: 'space30' }, + [`${element}_CONTROL`]: { borderRadius: 'borderRadius20' }, + [`${element}_ICON`]: { color: 'colorTextIconNeutral' }, + [`${element}_LABEL_TEXT`]: { color: 'colorTextNeutral' }, + [`${element}_HELP_TEXT_WRAPPER`]: { marginBottom: 'space60' }, }); const NOOP = (): void => {}; @@ -33,7 +33,7 @@ const defaultGroupProps = { describe('Checkbox', () => { it('should render', () => { - const {container} = render(foo); + const { container } = render(foo); const checkbox = screen.getByRole('checkbox'); expect(checkbox).not.toBeNull(); expect(checkbox.id).toBeDefined(); @@ -43,10 +43,10 @@ describe('Checkbox', () => { }); it('should render as invalid', () => { - const {getByRole} = render( + const { getByRole } = render( foo - + , ); expect(getByRole('checkbox').getAttribute('aria-invalid')).toBeTruthy(); }); @@ -55,17 +55,17 @@ describe('Checkbox', () => { render( foo - + , ); const checkbox = screen.getByRole('checkbox'); expect(checkbox.id).toBe('my-id'); }); it('should render as checked when defaultChecked', () => { - const {getByLabelText, container} = render( + const { getByLabelText, container } = render( foo - + , ); expect((getByLabelText('foo') as HTMLInputElement).checked).toBeTruthy(); @@ -74,10 +74,10 @@ describe('Checkbox', () => { }); it('should render as checked when controlled', () => { - const {getByLabelText, container} = render( + const { getByLabelText, container } = render( foo - + , ); expect((getByLabelText('foo') as HTMLInputElement).checked).toBeTruthy(); @@ -89,7 +89,7 @@ describe('Checkbox', () => { render( foo - + , ); const label = screen.getByText('foo'); const requiredDot = label.querySelector('[data-paste-element="REQUIRED_DOT"]'); @@ -98,38 +98,38 @@ describe('Checkbox', () => { }); it('should render as indeterminate', () => { - const {getByLabelText} = render( + const { getByLabelText } = render( foo - + , ); expect(getByLabelText('foo').getAttribute('aria-checked')).toBe('mixed'); }); it('should render as disabled', () => { - const {getByLabelText} = render( + const { getByLabelText } = render( foo - + , ); expect((getByLabelText('foo') as HTMLInputElement).disabled).toBeTruthy(); }); it('should render an id', () => { - const {getByLabelText} = render(foo); + const { getByLabelText } = render(foo); expect(getByLabelText('foo').id).toBe('foo'); }); it('should render a name', () => { - const {getByLabelText} = render(foo); + const { getByLabelText } = render(foo); expect((getByLabelText('foo') as HTMLInputElement).name).toBe('foo'); }); it('should render aria attributes', () => { - const {getByLabelText} = render( + const { getByLabelText } = render( foo - + , ); expect(getByLabelText('foo').getAttribute('aria-label')).toBe('foo'); expect(getByLabelText('foo').getAttribute('aria-labelledby')).toBe('bar'); @@ -138,10 +138,10 @@ describe('Checkbox', () => { it('renders a helpText message when helpText prop is present', () => { const helpText = 'I am a helpText message'; - const {getByText} = render( + const { getByText } = render( foo - + , ); expect(getByText(helpText)).toBeDefined(); }); @@ -149,19 +149,19 @@ describe('Checkbox', () => { describe('Checkbox Group', () => { it('should render', () => { - const {container} = render( + const { container } = render( foo - + , ); expect(container.querySelector('fieldset')).not.toBeNull(); }); it('should render a legend', () => { - const {getByText} = render( + const { getByText } = render( foo - + , ); expect(getByText('This is a group legend')).not.toBeNull(); }); @@ -170,7 +170,7 @@ describe('Checkbox Group', () => { render( foo - + , ); const fieldset = screen.getByRole('group'); @@ -180,41 +180,41 @@ describe('Checkbox Group', () => { }); it('should render a name', () => { - const {getByRole} = render( + const { getByRole } = render( foo - + , ); expect((getByRole('checkbox') as HTMLInputElement).name).toBe(defaultProps.name); }); it('should render a disabled checkbox in the checkbox group', () => { - const {getByRole} = render( + const { getByRole } = render( foo - + , ); expect((getByRole('checkbox') as HTMLInputElement).disabled).toBeTruthy(); }); it('renders a helpText message when helpText prop is present', () => { const helpText = 'I am a helpText message'; - const {getByText} = render( + const { getByText } = render( foo - + , ); expect(getByText(helpText)).toBeDefined(); }); it('renders an errorText message when errorText prop is present', () => { const errorText = 'I am an errorText message'; - const {getByText} = render( + const { getByText } = render( foo - + , ); expect(getByText(errorText)).toBeDefined(); }); @@ -226,7 +226,7 @@ describe('Checkbox event handlers', () => { const onFocusMock: jest.Mock = jest.fn(); const onBlurMock: jest.Mock = jest.fn(); - const {getByTestId} = render( + const { getByTestId } = render( { onBlur={onBlurMock} > foo - + , ); fireEvent.click(getByTestId('checkbox-button')); @@ -251,10 +251,10 @@ describe('Checkbox event handlers', () => { it('Should not call onChange handler when uncontrolled', () => { const onChangeMock: jest.Mock = jest.fn(); - const {getByTestId} = render( + const { getByTestId } = render( foo - + , ); fireEvent.click(getByTestId('checkbox-button')); @@ -279,7 +279,7 @@ describe('Checkbox event handlers', () => { ); }; - const {getByTestId} = render(); + const { getByTestId } = render(); fireEvent.click(getByTestId('checkbox-button')); expect((getByTestId('checkbox-button') as HTMLInputElement).checked).toBe(true); @@ -294,7 +294,7 @@ describe('Checkbox event handlers', () => { ); }; - const {getByTestId} = render(); + const { getByTestId } = render(); fireEvent.click(getByTestId('checkbox-button')); expect((getByTestId('checkbox-button') as HTMLInputElement).checked).toBe(true); @@ -303,12 +303,12 @@ describe('Checkbox event handlers', () => { describe('Customization', () => { it('Should set an element data attribute for Checkbox', (): void => { - const {container} = render( + const { container } = render( foo - + , ); expect(screen.getByTestId('checkbox-group')).toHaveAttribute('data-paste-element', 'CHECKBOX_GROUP'); @@ -322,12 +322,12 @@ describe('Customization', () => { expect(container.querySelector('[data-paste-element="CHECKBOX_HELP_TEXT_WRAPPER"]')).toBeInTheDocument(); }); it('Should set a custom element data attribute on Checkbox', (): void => { - const {container} = render( + const { container } = render( foo - + , ); expect(screen.getByTestId('checkbox-group')).toHaveAttribute('data-paste-element', 'MY_CHECKBOX_GROUP'); @@ -342,43 +342,43 @@ describe('Customization', () => { }); it('should add custom styling to default Checkbox', (): void => { - const {container} = render( + const { container } = render( foo - + , ); expect(screen.getByTestId('checkbox-group')).toHaveStyleRule('padding', '1.25rem'); expect(container.querySelector('[data-paste-element="CHECKBOX_GROUP_SET"]')).toHaveStyleRule( 'margin-left', - '1.25rem' + '1.25rem', ); expect(container.querySelector('[data-paste-element="CHECKBOX_GROUP_FIELD"]')).toHaveStyleRule( 'margin-bottom', - '1.25rem' + '1.25rem', ); expect(container.querySelector('[data-paste-element="CHECKBOX_GROUP_ERROR_TEXT_WRAPPER"]')).toHaveStyleRule( 'margin-bottom', - '1.25rem' + '1.25rem', ); expect(container.querySelector('[data-paste-element="CHECKBOX"]')).toHaveStyleRule('padding', '0.5rem'); expect(container.querySelector('[data-paste-element="CHECKBOX_CONTROL"]')).toHaveStyleRule('border-radius', '4px'); expect(container.querySelector('[data-paste-element="CHECKBOX_ICON"]')).toHaveStyleRule('color', 'rgb(0, 20, 137)'); expect(container.querySelector('[data-paste-element="CHECKBOX_LABEL_TEXT"]')).toHaveStyleRule( 'color', - 'rgb(0, 20, 137)' + 'rgb(0, 20, 137)', ); expect(container.querySelector('[data-paste-element="CHECKBOX_HELP_TEXT_WRAPPER"]')).toHaveStyleRule( 'margin-bottom', - '1.25rem' + '1.25rem', ); }); it('should add custom styling to a custom named Checkbox', (): void => { - const {container} = render( + const { container } = render( { foo - + , ); expect(screen.getByTestId('checkbox-group')).toHaveStyleRule('padding', '1.25rem'); expect(container.querySelector('[data-paste-element="MY_CHECKBOX_GROUP_SET"]')).toHaveStyleRule( 'margin-left', - '1.25rem' + '1.25rem', ); expect(container.querySelector('[data-paste-element="MY_CHECKBOX_GROUP_FIELD"]')).toHaveStyleRule( 'margin-bottom', - '1.25rem' + '1.25rem', ); expect(container.querySelector('[data-paste-element="MY_CHECKBOX_GROUP_ERROR_TEXT_WRAPPER"]')).toHaveStyleRule( 'margin-bottom', - '1.25rem' + '1.25rem', ); expect(container.querySelector('[data-paste-element="MY_CHECKBOX"]')).toHaveStyleRule('padding', '0.5rem'); expect(container.querySelector('[data-paste-element="MY_CHECKBOX_CONTROL"]')).toHaveStyleRule( 'border-radius', - '4px' + '4px', ); expect(container.querySelector('[data-paste-element="MY_CHECKBOX_ICON"]')).toHaveStyleRule( 'color', - 'rgb(0, 20, 137)' + 'rgb(0, 20, 137)', ); expect(container.querySelector('[data-paste-element="MY_CHECKBOX_LABEL_TEXT"]')).toHaveStyleRule( 'color', - 'rgb(0, 20, 137)' + 'rgb(0, 20, 137)', ); expect(container.querySelector('[data-paste-element="MY_CHECKBOX_HELP_TEXT_WRAPPER"]')).toHaveStyleRule( 'margin-bottom', - '1.25rem' + '1.25rem', ); }); }); @@ -430,7 +430,7 @@ describe('i18n', () => { render( foo - + , ); const fieldset = screen.getByRole('group'); @@ -443,7 +443,7 @@ describe('i18n', () => { render( foo - + , ); const fieldset = screen.getByRole('group'); diff --git a/packages/paste-core/components/checkbox/__tests__/checkboxdisclaimer.test.tsx b/packages/paste-core/components/checkbox/__tests__/checkboxdisclaimer.test.tsx index 756aaea705..965797563c 100644 --- a/packages/paste-core/components/checkbox/__tests__/checkboxdisclaimer.test.tsx +++ b/packages/paste-core/components/checkbox/__tests__/checkboxdisclaimer.test.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {render} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {CheckboxDisclaimer} from '../src'; +import { CheckboxDisclaimer } from '../src'; const defaultProps = { id: 'foo', @@ -12,15 +12,15 @@ const defaultProps = { describe('Checkbox Disclaimer', () => { it('should render', () => { - const {getByRole} = render(foo); + const { getByRole } = render(foo); expect(getByRole('checkbox')).not.toBeNull(); }); it('should render a required dot', () => { - const {getByText} = render( + const { getByText } = render( foo - + , ); const label = getByText('foo'); @@ -31,10 +31,10 @@ describe('Checkbox Disclaimer', () => { it('renders a errorText message when errorText prop is present', () => { const errorText = 'This is the error text.'; - const {getByText} = render( + const { getByText } = render( foo - + , ); expect(getByText(errorText)).toBeDefined(); }); @@ -42,74 +42,74 @@ describe('Checkbox Disclaimer', () => { describe('Customization', () => { it('Should set a default element data attribute Checkbox Disclaimer', () => { - const {container} = render( + const { container } = render( foo - + , ); expect(container.querySelector('[data-paste-element="CHECKBOX_DISCLAIMER"]')).toBeInTheDocument(); expect( - container.querySelector('[data-paste-element="CHECKBOX_DISCLAIMER_ERROR_TEXT_WRAPPER"]') + container.querySelector('[data-paste-element="CHECKBOX_DISCLAIMER_ERROR_TEXT_WRAPPER"]'), ).toBeInTheDocument(); }); it('Should set a custom element data attribute for a custom named Checkbox Disclaimer', () => { - const {container} = render( + const { container } = render( foo - + , ); expect(container.querySelector('[data-paste-element="MY_CHECKBOX_DISCLAIMER"]')).toBeInTheDocument(); expect( - container.querySelector('[data-paste-element="MY_CHECKBOX_DISCLAIMER_ERROR_TEXT_WRAPPER"]') + container.querySelector('[data-paste-element="MY_CHECKBOX_DISCLAIMER_ERROR_TEXT_WRAPPER"]'), ).toBeInTheDocument(); }); it('Should add custom styling to a default Checkbox Disclaimer', () => { - const {container} = render( + const { container } = render( foo - + , ); expect(container.querySelector('[data-paste-element="CHECKBOX_DISCLAIMER"]')).toHaveStyleRule( 'background-color', - 'rgb(254, 236, 236)' + 'rgb(254, 236, 236)', ); expect(container.querySelector('[data-paste-element="CHECKBOX_DISCLAIMER_ERROR_TEXT_WRAPPER"]')).toHaveStyleRule( 'margin-top', - '1.25rem' + '1.25rem', ); }); it('Should add custom styling to a custom named Checkbox Disclaimer', () => { - const {container} = render( + const { container } = render( foo - + , ); expect(container.querySelector('[data-paste-element="MY_CHECKBOX_DISCLAIMER"]')).toHaveStyleRule( 'background-color', - 'rgb(254, 236, 236)' + 'rgb(254, 236, 236)', ); expect(container.querySelector('[data-paste-element="MY_CHECKBOX_DISCLAIMER_ERROR_TEXT_WRAPPER"]')).toHaveStyleRule( 'margin-top', - '1.25rem' + '1.25rem', ); }); }); diff --git a/packages/paste-core/components/checkbox/build.js b/packages/paste-core/components/checkbox/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/checkbox/build.js +++ b/packages/paste-core/components/checkbox/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/checkbox/src/Checkbox.tsx b/packages/paste-core/components/checkbox/src/Checkbox.tsx index d509eaffc2..4b2237bc5d 100644 --- a/packages/paste-core/components/checkbox/src/Checkbox.tsx +++ b/packages/paste-core/components/checkbox/src/Checkbox.tsx @@ -1,20 +1,20 @@ import * as React from 'react'; -import {useUID} from '@twilio-paste/uid-library'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import {CheckboxCheckIcon} from '@twilio-paste/icons/esm/CheckboxCheckIcon'; -import {MinusIcon} from '@twilio-paste/icons/esm/MinusIcon'; +import { useUID } from '@twilio-paste/uid-library'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import { CheckboxCheckIcon } from '@twilio-paste/icons/esm/CheckboxCheckIcon'; +import { MinusIcon } from '@twilio-paste/icons/esm/MinusIcon'; import { BaseRadioCheckboxControl, BaseRadioCheckboxLabel, BaseRadioCheckboxLabelText, BaseRadioCheckboxHelpText, } from '@twilio-paste/base-radio-checkbox'; -import {MediaObject, MediaFigure, MediaBody} from '@twilio-paste/media-object'; -import {RequiredDot} from '@twilio-paste/label'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { MediaObject, MediaFigure, MediaBody } from '@twilio-paste/media-object'; +import { RequiredDot } from '@twilio-paste/label'; +import type { HTMLPasteProps } from '@twilio-paste/types'; -import {CheckboxContext} from './CheckboxContext'; +import { CheckboxContext } from './CheckboxContext'; const selectAllStyleProps = { paddingTop: 'space20', @@ -84,7 +84,7 @@ const CheckboxIcon: React.FC<{ indeterminate: boolean | undefined; checked: boolean | undefined; element: BoxProps['element']; -}> = ({checked, element, indeterminate}) => { +}> = ({ checked, element, indeterminate }) => { if (indeterminate) { return ; } @@ -117,11 +117,11 @@ const Checkbox = React.forwardRef( onChange, ...props }, - ref + ref, ) => { if (checked != null && defaultChecked != null) { throw new Error( - `[Paste Checkbox] Do not provide both 'defaultChecked' and 'checked' to Checkbox at the same time. Please consider if you want this component to be controlled or uncontrolled.` + `[Paste Checkbox] Do not provide both 'defaultChecked' and 'checked' to Checkbox at the same time. Please consider if you want this component to be controlled or uncontrolled.`, ); } @@ -150,7 +150,7 @@ const Checkbox = React.forwardRef( checkboxGroupContext.onChange(event); } }, - [onChange, checkboxGroupContext.onChange] + [onChange, checkboxGroupContext.onChange], ); // Prioritizing direct props values over whatever CheckboxGroupContext passes down @@ -215,8 +215,8 @@ const Checkbox = React.forwardRef( )} ); - } + }, ); Checkbox.displayName = 'Checkbox'; -export {Checkbox, HiddenCheckbox, CheckboxIcon}; +export { Checkbox, HiddenCheckbox, CheckboxIcon }; diff --git a/packages/paste-core/components/checkbox/src/CheckboxContext.tsx b/packages/paste-core/components/checkbox/src/CheckboxContext.tsx index 04ec068dbc..ff14ae9f3c 100644 --- a/packages/paste-core/components/checkbox/src/CheckboxContext.tsx +++ b/packages/paste-core/components/checkbox/src/CheckboxContext.tsx @@ -15,4 +15,4 @@ const CheckboxContext = React.createContext({ onChange: () => {}, }); -export {CheckboxContext}; +export { CheckboxContext }; diff --git a/packages/paste-core/components/checkbox/src/CheckboxDisclaimer.tsx b/packages/paste-core/components/checkbox/src/CheckboxDisclaimer.tsx index f02197dabe..8a806d95a0 100644 --- a/packages/paste-core/components/checkbox/src/CheckboxDisclaimer.tsx +++ b/packages/paste-core/components/checkbox/src/CheckboxDisclaimer.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import {HelpText} from '@twilio-paste/help-text'; +import { Box } from '@twilio-paste/box'; +import { HelpText } from '@twilio-paste/help-text'; -import {Checkbox} from './Checkbox'; -import type {CheckboxProps} from './Checkbox'; +import { Checkbox } from './Checkbox'; +import type { CheckboxProps } from './Checkbox'; export interface CheckboxDisclaimerProps extends Omit { @@ -12,7 +12,7 @@ export interface CheckboxDisclaimerProps } const CheckboxDisclaimer = React.forwardRef( - ({children, element = 'CHECKBOX_DISCLAIMER', errorText, ...props}, ref) => { + ({ children, element = 'CHECKBOX_DISCLAIMER', errorText, ...props }, ref) => { return ( <> @@ -27,9 +27,9 @@ const CheckboxDisclaimer = React.forwardRef ); - } + }, ); CheckboxDisclaimer.displayName = 'CheckboxDisclaimer'; -export {CheckboxDisclaimer}; +export { CheckboxDisclaimer }; diff --git a/packages/paste-core/components/checkbox/src/CheckboxGroup.tsx b/packages/paste-core/components/checkbox/src/CheckboxGroup.tsx index 1115a62e7b..95fb6a7721 100644 --- a/packages/paste-core/components/checkbox/src/CheckboxGroup.tsx +++ b/packages/paste-core/components/checkbox/src/CheckboxGroup.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {InlineControlGroup} from '@twilio-paste/inline-control-group'; -import type {InlineControlGroupProps} from '@twilio-paste/inline-control-group'; +import { InlineControlGroup } from '@twilio-paste/inline-control-group'; +import type { InlineControlGroupProps } from '@twilio-paste/inline-control-group'; -import type {CheckboxProps} from './Checkbox'; -import {CheckboxContext} from './CheckboxContext'; +import type { CheckboxProps } from './Checkbox'; +import { CheckboxContext } from './CheckboxContext'; export interface CheckboxGroupProps extends InlineControlGroupProps { isSelectAll?: boolean; @@ -26,7 +26,7 @@ const CheckboxGroup = React.forwardRef( i18nRequiredLabel = '(required)', ...props }, - ref + ref, ) => { const onChangeHandler = React.useCallback( (event: React.ChangeEvent): void => { @@ -34,7 +34,7 @@ const CheckboxGroup = React.forwardRef( onChange(event.target.checked); } }, - [onChange] + [onChange], ); const contextValue = React.useMemo(() => { @@ -69,9 +69,9 @@ const CheckboxGroup = React.forwardRef( ); - } + }, ); CheckboxGroup.displayName = 'CheckboxGroup'; -export {CheckboxGroup}; +export { CheckboxGroup }; diff --git a/packages/paste-core/components/checkbox/stories/checkbox.stories.tsx b/packages/paste-core/components/checkbox/stories/checkbox.stories.tsx index 2f5301588f..6367fd92b8 100644 --- a/packages/paste-core/components/checkbox/stories/checkbox.stories.tsx +++ b/packages/paste-core/components/checkbox/stories/checkbox.stories.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; -import {useUID} from '@twilio-paste/uid-library'; -import {Anchor} from '@twilio-paste/anchor'; -import {Stack} from '@twilio-paste/stack'; -import {Text} from '@twilio-paste/text'; +import { useUID } from '@twilio-paste/uid-library'; +import { Anchor } from '@twilio-paste/anchor'; +import { Stack } from '@twilio-paste/stack'; +import { Text } from '@twilio-paste/text'; -import {Checkbox, CheckboxGroup, CheckboxDisclaimer} from '../src'; +import { Checkbox, CheckboxGroup, CheckboxDisclaimer } from '../src'; // eslint-disable-next-line import/no-default-export export default { title: 'Components/Checkbox', component: Checkbox, - subcomponents: {CheckboxGroup, CheckboxDisclaimer}, + subcomponents: { CheckboxGroup, CheckboxDisclaimer }, }; export const DefaultCheckbox = (): React.ReactNode => { diff --git a/packages/paste-core/components/checkbox/stories/customization.stories.tsx b/packages/paste-core/components/checkbox/stories/customization.stories.tsx index 934d4ccba3..0f8ffafc42 100644 --- a/packages/paste-core/components/checkbox/stories/customization.stories.tsx +++ b/packages/paste-core/components/checkbox/stories/customization.stories.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {useUID} from '@twilio-paste/uid-library'; -import {Anchor} from '@twilio-paste/anchor'; -import {Text} from '@twilio-paste/text'; -import {Paragraph} from '@twilio-paste/paragraph'; -import {useTheme} from '@twilio-paste/theme'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import type { StoryFn } from '@storybook/react'; +import { useUID } from '@twilio-paste/uid-library'; +import { Anchor } from '@twilio-paste/anchor'; +import { Text } from '@twilio-paste/text'; +import { Paragraph } from '@twilio-paste/paragraph'; +import { useTheme } from '@twilio-paste/theme'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {Checkbox, CheckboxGroup, CheckboxDisclaimer} from '../src'; +import { Checkbox, CheckboxGroup, CheckboxDisclaimer } from '../src'; -export const CustomizedCheckboxGroup: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const CustomizedCheckboxGroup: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const [checked1, setChecked1] = React.useState(true); const [checked2, setChecked2] = React.useState(false); const [checked3, setChecked3] = React.useState(false); @@ -23,19 +23,19 @@ export const CustomizedCheckboxGroup: StoryFn = (_args, {parameters: {isTestEnvi disableAnimations={isTestEnvironment} theme={theme} elements={{ - CHECKBOX_GROUP: {padding: 'space30'}, - CHECKBOX_GROUP_SET: {marginLeft: 'space60'}, - CHECKBOX_GROUP_ITEM: {marginBottom: 'space60'}, - CHECKBOX_GROUP_ERROR_TEXT_WRAPPER: {marginBottom: 'space60'}, - CHECKBOX: {padding: 'space30'}, // the whole box - CHECKBOX_CONTROL: {borderRadius: 'borderRadius20'}, - CHECKBOX_LABEL_TEXT: {color: 'colorTextNeutral'}, - MY_CHECKBOX_GROUP: {padding: 'space30'}, - MY_CHECKBOX_GROUP_SET: {marginLeft: 'space60'}, - MY_CHECKBOX_GROUP_ITEM: {marginBottom: 'space60'}, - MY_CHECKBOX: {padding: 'space30'}, // the whole box - MY_CHECKBOX_CONTROL: {borderRadius: 'borderRadius20'}, - MY_CHECKBOX_LABEL_TEXT: {color: 'colorTextNeutral'}, + CHECKBOX_GROUP: { padding: 'space30' }, + CHECKBOX_GROUP_SET: { marginLeft: 'space60' }, + CHECKBOX_GROUP_ITEM: { marginBottom: 'space60' }, + CHECKBOX_GROUP_ERROR_TEXT_WRAPPER: { marginBottom: 'space60' }, + CHECKBOX: { padding: 'space30' }, // the whole box + CHECKBOX_CONTROL: { borderRadius: 'borderRadius20' }, + CHECKBOX_LABEL_TEXT: { color: 'colorTextNeutral' }, + MY_CHECKBOX_GROUP: { padding: 'space30' }, + MY_CHECKBOX_GROUP_SET: { marginLeft: 'space60' }, + MY_CHECKBOX_GROUP_ITEM: { marginBottom: 'space60' }, + MY_CHECKBOX: { padding: 'space30' }, // the whole box + MY_CHECKBOX_CONTROL: { borderRadius: 'borderRadius20' }, + MY_CHECKBOX_LABEL_TEXT: { color: 'colorTextNeutral' }, }} > Using default element name: @@ -146,17 +146,17 @@ export const CustomizedCheckboxGroup: StoryFn = (_args, {parameters: {isTestEnvi ); }; -export const CustomizedCheckboxDisclaimer: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const CustomizedCheckboxDisclaimer: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const theme = useTheme(); return ( Using default element name: diff --git a/packages/paste-core/components/code-block/__tests__/customization.spec.tsx b/packages/paste-core/components/code-block/__tests__/customization.spec.tsx index 34036a90e2..2dee879d24 100644 --- a/packages/paste-core/components/code-block/__tests__/customization.spec.tsx +++ b/packages/paste-core/components/code-block/__tests__/customization.spec.tsx @@ -1,45 +1,52 @@ import * as React from 'react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {render, screen} from '@testing-library/react'; - -import {CodeBlock, CodeBlockWrapper, CodeBlockHeader, CodeBlockTabList, CodeBlockTab, CodeBlockTabPanel} from '../src'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { render, screen } from '@testing-library/react'; + +import { + CodeBlock, + CodeBlockWrapper, + CodeBlockHeader, + CodeBlockTabList, + CodeBlockTab, + CodeBlockTabPanel, +} from '../src'; const jsCode = `(num) => num + 1`; -const CustomizationWrapper: React.FC = ({children}) => ( +const CustomizationWrapper: React.FC = ({ children }) => ( {children} ); -const CustomizationMyWrapper: React.FC = ({children}) => ( +const CustomizationMyWrapper: React.FC = ({ children }) => ( {children} @@ -61,18 +68,18 @@ describe('Customization', () => { , { wrapper: CustomizationWrapper, - } + }, ); const codeBlock = screen.getByTestId('code-block'); const content = codeBlock.querySelector('pre')?.parentElement; - const heading = screen.getByRole('heading', {name: 'My code block'}); + const heading = screen.getByRole('heading', { name: 'My code block' }); const wrapper = heading.parentElement; const tabList = screen.getByRole('tablist'); - const tab = screen.getByRole('tab', {name: 'JavaScript'}); + const tab = screen.getByRole('tab', { name: 'JavaScript' }); const tabPanel = codeBlock.parentElement; - const copyButton = screen.getByRole('button', {name: 'Copy code block'}); - const externalLink = screen.getByRole('link', {name: 'Open code block in new page'}); + const copyButton = screen.getByRole('button', { name: 'Copy code block' }); + const externalLink = screen.getByRole('link', { name: 'Open code block in new page' }); expect(wrapper?.getAttribute('data-paste-element')).toBe('CODE_BLOCK_WRAPPER'); expect(content?.getAttribute('data-paste-element')).toBe('CODE_BLOCK_CONTENT'); @@ -104,18 +111,18 @@ describe('Customization', () => { , { wrapper: CustomizationMyWrapper, - } + }, ); const codeBlock = screen.getByTestId('code-block'); const content = codeBlock.querySelector('pre')?.parentElement; - const heading = screen.getByRole('heading', {name: 'My code block'}); + const heading = screen.getByRole('heading', { name: 'My code block' }); const wrapper = heading.parentElement; const tabList = screen.getByRole('tablist'); - const tab = screen.getByRole('tab', {name: 'JavaScript'}); + const tab = screen.getByRole('tab', { name: 'JavaScript' }); const tabPanel = codeBlock.parentElement; - const copyButton = screen.getByRole('button', {name: 'Copy code block'}); - const externalLink = screen.getByRole('link', {name: 'Open code block in new page'}); + const copyButton = screen.getByRole('button', { name: 'Copy code block' }); + const externalLink = screen.getByRole('link', { name: 'Open code block in new page' }); expect(wrapper?.getAttribute('data-paste-element')).toBe('MY_CODE_BLOCK_WRAPPER'); expect(content?.getAttribute('data-paste-element')).toBe('MY_CODE_BLOCK_CONTENT'); @@ -141,18 +148,18 @@ describe('Customization', () => { , { wrapper: CustomizationWrapper, - } + }, ); const codeBlock = screen.getByTestId('code-block'); const content = codeBlock.querySelector('pre')?.parentElement; - const heading = screen.getByRole('heading', {name: 'My code block'}); + const heading = screen.getByRole('heading', { name: 'My code block' }); const wrapper = heading.parentElement; const tabList = screen.getByRole('tablist'); - const tab = screen.getByRole('tab', {name: 'JavaScript'}); + const tab = screen.getByRole('tab', { name: 'JavaScript' }); const tabPanel = codeBlock.parentElement; - const copyButton = screen.getByRole('button', {name: 'Copy code block'}); - const externalLink = screen.getByRole('link', {name: 'Open code block in new page'}); + const copyButton = screen.getByRole('button', { name: 'Copy code block' }); + const externalLink = screen.getByRole('link', { name: 'Open code block in new page' }); expect(codeBlock).toHaveStyleRule('width', '31.5rem'); expect(content).toHaveStyleRule('width', '31.5rem'); @@ -184,18 +191,18 @@ describe('Customization', () => { , { wrapper: CustomizationMyWrapper, - } + }, ); const codeBlock = screen.getByTestId('code-block'); const content = codeBlock.querySelector('pre')?.parentElement; - const heading = screen.getByRole('heading', {name: 'My code block'}); + const heading = screen.getByRole('heading', { name: 'My code block' }); const wrapper = heading.parentElement; const tabList = screen.getByRole('tablist'); - const tab = screen.getByRole('tab', {name: 'JavaScript'}); + const tab = screen.getByRole('tab', { name: 'JavaScript' }); const tabPanel = codeBlock.parentElement; - const copyButton = screen.getByRole('button', {name: 'Copy code block'}); - const externalLink = screen.getByRole('link', {name: 'Open code block in new page'}); + const copyButton = screen.getByRole('button', { name: 'Copy code block' }); + const externalLink = screen.getByRole('link', { name: 'Open code block in new page' }); expect(codeBlock).toHaveStyleRule('width', '31.5rem'); expect(content).toHaveStyleRule('width', '31.5rem'); diff --git a/packages/paste-core/components/code-block/__tests__/index.spec.tsx b/packages/paste-core/components/code-block/__tests__/index.spec.tsx index 54c85c0c25..eb21ba7a4d 100644 --- a/packages/paste-core/components/code-block/__tests__/index.spec.tsx +++ b/packages/paste-core/components/code-block/__tests__/index.spec.tsx @@ -1,10 +1,17 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import {Theme} from '@twilio-paste/theme'; - -import {CopyButton, getCopyButtonText} from '../src/CopyButton'; -import {ExternalLinkButton} from '../src/ExternalLinkButton'; -import {CodeBlock, CodeBlockWrapper, CodeBlockHeader, CodeBlockTabList, CodeBlockTab, CodeBlockTabPanel} from '../src'; +import { render, screen } from '@testing-library/react'; +import { Theme } from '@twilio-paste/theme'; + +import { CopyButton, getCopyButtonText } from '../src/CopyButton'; +import { ExternalLinkButton } from '../src/ExternalLinkButton'; +import { + CodeBlock, + CodeBlockWrapper, + CodeBlockHeader, + CodeBlockTabList, + CodeBlockTab, + CodeBlockTabPanel, +} from '../src'; const jsCode = `(num) => num + 1`; @@ -32,10 +39,10 @@ describe('CodeBlock', () => { render( - + , ); - const copyButton = screen.getByRole('button', {name: 'Copy code block'}); + const copyButton = screen.getByRole('button', { name: 'Copy code block' }); expect(copyButton).toBeDefined(); const rubyText = screen.getByText('#!/usr/bin/ruby'); @@ -46,13 +53,13 @@ describe('CodeBlock', () => { render( - + , ); - const copyButton = screen.getByRole('button', {name: 'Copy code block'}); + const copyButton = screen.getByRole('button', { name: 'Copy code block' }); expect(copyButton).toBeDefined(); - const link = screen.getByRole('link', {name: 'Open code block in new page'}); + const link = screen.getByRole('link', { name: 'Open code block in new page' }); expect(link).toBeDefined(); }); @@ -68,13 +75,13 @@ describe('CodeBlock', () => { i18nCopyLabelBefore="before" i18nLinkLabel="external link" /> - + , ); - const copyButton = screen.getByRole('button', {name: 'before'}); + const copyButton = screen.getByRole('button', { name: 'before' }); expect(copyButton).toBeDefined(); - const link = screen.getByRole('link', {name: 'external link'}); + const link = screen.getByRole('link', { name: 'external link' }); expect(link).toBeDefined(); }); }); @@ -86,14 +93,14 @@ describe('CodeBlockHeader', () => { <> My code block Another code block - + , ); - const headerLevel3 = screen.getByRole('heading', {name: 'My code block'}); + const headerLevel3 = screen.getByRole('heading', { name: 'My code block' }); expect(headerLevel3).toBeDefined(); expect(headerLevel3.tagName).toBe('H3'); - const headerLevel2 = screen.getByRole('heading', {name: 'Another code block'}); + const headerLevel2 = screen.getByRole('heading', { name: 'Another code block' }); expect(headerLevel2).toBeDefined(); expect(headerLevel2.tagName).toBe('H2'); }); @@ -115,13 +122,13 @@ describe('CodeBlockTabs', () => { - + , ); const tablist = screen.getByRole('tablist'); expect(tablist).toBeDefined(); - const javascriptTab = screen.getByRole('tab', {name: 'JavaScript'}); + const javascriptTab = screen.getByRole('tab', { name: 'JavaScript' }); expect(javascriptTab).toBeDefined(); expect(javascriptTab.getAttribute('aria-selected')).toBe('true'); @@ -130,7 +137,7 @@ describe('CodeBlockTabs', () => { expect(javascriptTab.getAttribute('aria-controls')).toBe(javascriptTabPanel?.id); expect(javascriptTabPanel?.getAttribute('aria-labelledby')).toBe(javascriptTab.id); - const rubyTab = screen.getByRole('tab', {name: 'Ruby'}); + const rubyTab = screen.getByRole('tab', { name: 'Ruby' }); expect(rubyTab).toBeDefined(); expect(rubyTab.getAttribute('aria-selected')).toBe('false'); @@ -146,11 +153,11 @@ describe('CopyButton', () => { render( - + , ); const button = screen.getByRole('button'); - const tooltip = screen.getByRole('tooltip', {hidden: true}); + const tooltip = screen.getByRole('tooltip', { hidden: true }); expect(button).toBeDefined(); expect(tooltip).not.toBeVisible(); @@ -171,11 +178,11 @@ describe('ExternalLinkButton', () => { render( - + , ); const link = screen.getByRole('link'); - const tooltip = screen.getByRole('tooltip', {hidden: true}); + const tooltip = screen.getByRole('tooltip', { hidden: true }); expect(link).toBeDefined(); expect(link.getAttribute('href')).toBe('https://www.google.com'); diff --git a/packages/paste-core/components/code-block/build.js b/packages/paste-core/components/code-block/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/code-block/build.js +++ b/packages/paste-core/components/code-block/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/code-block/src/CodeBlock.tsx b/packages/paste-core/components/code-block/src/CodeBlock.tsx index cdad3ec45e..bcfdd166ef 100644 --- a/packages/paste-core/components/code-block/src/CodeBlock.tsx +++ b/packages/paste-core/components/code-block/src/CodeBlock.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; -import {SyntaxHighlighter} from '@twilio-paste/syntax-highlighter-library'; -import type {SnippetLanguages} from '@twilio-paste/syntax-highlighter-library'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps, BoxStyleProps} from '@twilio-paste/box'; +import { SyntaxHighlighter } from '@twilio-paste/syntax-highlighter-library'; +import type { SnippetLanguages } from '@twilio-paste/syntax-highlighter-library'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps, BoxStyleProps } from '@twilio-paste/box'; -import {getPasteSyntaxTheme} from './CodeBlockTheme'; -import {CopyButton} from './CopyButton'; -import {ExternalLinkButton} from './ExternalLinkButton'; +import { getPasteSyntaxTheme } from './CodeBlockTheme'; +import { CopyButton } from './CopyButton'; +import { ExternalLinkButton } from './ExternalLinkButton'; type CodeBlockVariants = 'multi-line' | 'single-line'; @@ -60,7 +60,7 @@ export const CodeBlock = React.forwardRef( copyTextFormatter, ...props }, - ref + ref, ) => { return ( ( ); - } + }, ); CodeBlock.displayName = 'CodeBlock'; diff --git a/packages/paste-core/components/code-block/src/CodeBlockHeader.tsx b/packages/paste-core/components/code-block/src/CodeBlockHeader.tsx index 75a0618b5f..ed622b27fb 100644 --- a/packages/paste-core/components/code-block/src/CodeBlockHeader.tsx +++ b/packages/paste-core/components/code-block/src/CodeBlockHeader.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import type {asTags} from '@twilio-paste/heading'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import type { asTags } from '@twilio-paste/heading'; export interface CodeBlockHeaderProps extends Partial> { children: string; @@ -10,7 +10,7 @@ export interface CodeBlockHeaderProps extends Partial( - ({children, element = 'CODE_BLOCK_HEADER', as = 'h3', ...props}, ref) => ( + ({ children, element = 'CODE_BLOCK_HEADER', as = 'h3', ...props }, ref) => ( {children} - ) + ), ); CodeBlockHeader.displayName = 'CodeBlockHeader'; diff --git a/packages/paste-core/components/code-block/src/CodeBlockTab.tsx b/packages/paste-core/components/code-block/src/CodeBlockTab.tsx index 59c2c67dc4..ecb272c2e3 100644 --- a/packages/paste-core/components/code-block/src/CodeBlockTab.tsx +++ b/packages/paste-core/components/code-block/src/CodeBlockTab.tsx @@ -1,20 +1,20 @@ import * as React from 'react'; -import type {BoxProps} from '@twilio-paste/box'; -import {Tab} from '@twilio-paste/tabs'; -import type {TabProps} from '@twilio-paste/tabs'; +import type { BoxProps } from '@twilio-paste/box'; +import { Tab } from '@twilio-paste/tabs'; +import type { TabProps } from '@twilio-paste/tabs'; export interface CodeBlockTabProps extends TabProps { element?: BoxProps['element']; } export const CodeBlockTab = React.forwardRef( - ({children, element = 'CODE_BLOCK_TAB', ...props}, ref) => { + ({ children, element = 'CODE_BLOCK_TAB', ...props }, ref) => { return ( {children} ); - } + }, ); CodeBlockTab.displayName = 'CodeBlockTab'; diff --git a/packages/paste-core/components/code-block/src/CodeBlockTabList.tsx b/packages/paste-core/components/code-block/src/CodeBlockTabList.tsx index 3db757dfe5..22189adec9 100644 --- a/packages/paste-core/components/code-block/src/CodeBlockTabList.tsx +++ b/packages/paste-core/components/code-block/src/CodeBlockTabList.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import {TabList} from '@twilio-paste/tabs'; -import type {TabListProps} from '@twilio-paste/tabs'; +import { Box } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import { TabList } from '@twilio-paste/tabs'; +import type { TabListProps } from '@twilio-paste/tabs'; export interface CodeBlockTabListProps extends Omit { element?: BoxProps['element']; } export const CodeBlockTabList = React.forwardRef( - ({children, element = 'CODE_BLOCK_TAB_LIST', ...props}, ref) => { + ({ children, element = 'CODE_BLOCK_TAB_LIST', ...props }, ref) => { return ( @@ -17,7 +17,7 @@ export const CodeBlockTabList = React.forwardRef ); - } + }, ); CodeBlockTabList.displayName = 'CodeBlockTabList'; diff --git a/packages/paste-core/components/code-block/src/CodeBlockTabPanel.tsx b/packages/paste-core/components/code-block/src/CodeBlockTabPanel.tsx index 870fbe423a..76f5058527 100644 --- a/packages/paste-core/components/code-block/src/CodeBlockTabPanel.tsx +++ b/packages/paste-core/components/code-block/src/CodeBlockTabPanel.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import type {BoxProps} from '@twilio-paste/box'; -import {TabPanel} from '@twilio-paste/tabs'; +import type { BoxProps } from '@twilio-paste/box'; +import { TabPanel } from '@twilio-paste/tabs'; export interface CodeBlockTabPanelProps extends Partial> { children?: React.ReactNode; @@ -8,13 +8,13 @@ export interface CodeBlockTabPanelProps extends Partial( - ({children, element = 'CODE_BLOCK_TAB_PANEL', ...props}, ref) => { + ({ children, element = 'CODE_BLOCK_TAB_PANEL', ...props }, ref) => { return ( {children} ); - } + }, ); CodeBlockTabPanel.displayName = 'CodeBlockTabPanel'; diff --git a/packages/paste-core/components/code-block/src/CodeBlockTheme.ts b/packages/paste-core/components/code-block/src/CodeBlockTheme.ts index 9923349655..2085ec76ea 100644 --- a/packages/paste-core/components/code-block/src/CodeBlockTheme.ts +++ b/packages/paste-core/components/code-block/src/CodeBlockTheme.ts @@ -1,6 +1,6 @@ -import {css} from '@twilio-paste/styling-library'; -import type {CSSObject} from '@twilio-paste/styling-library'; -import {useTheme} from '@twilio-paste/theme'; +import { css } from '@twilio-paste/styling-library'; +import type { CSSObject } from '@twilio-paste/styling-library'; +import { useTheme } from '@twilio-paste/theme'; export const getPasteSyntaxTheme = (maxLines?: number): CSSObject => { const theme = useTheme(); diff --git a/packages/paste-core/components/code-block/src/CodeBlockWrapper.tsx b/packages/paste-core/components/code-block/src/CodeBlockWrapper.tsx index df6ba1694a..dc4d3b9167 100644 --- a/packages/paste-core/components/code-block/src/CodeBlockWrapper.tsx +++ b/packages/paste-core/components/code-block/src/CodeBlockWrapper.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import {Tabs} from '@twilio-paste/tabs'; -import type {TabStateReturn} from '@twilio-paste/tabs'; +import { Box } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import { Tabs } from '@twilio-paste/tabs'; +import type { TabStateReturn } from '@twilio-paste/tabs'; export interface CodeBlockTabStateReturn extends TabStateReturn { [key: string]: any; @@ -15,7 +15,7 @@ export interface CodeBlockWrapperProps { } export const CodeBlockWrapper = React.forwardRef( - ({children, state, element = 'CODE_BLOCK_WRAPPER'}, ref) => { + ({ children, state, element = 'CODE_BLOCK_WRAPPER' }, ref) => { return ( ); - } + }, ); CodeBlockWrapper.displayName = 'CodeBlockWrapper'; diff --git a/packages/paste-core/components/code-block/src/CopyButton.tsx b/packages/paste-core/components/code-block/src/CopyButton.tsx index d77756f621..3e0fdc7999 100644 --- a/packages/paste-core/components/code-block/src/CopyButton.tsx +++ b/packages/paste-core/components/code-block/src/CopyButton.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import {Button} from '@twilio-paste/button'; -import {Box} from '@twilio-paste/box'; -import {useClipboard} from '@twilio-paste/clipboard-copy-library'; -import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only'; -import {CopyIcon} from '@twilio-paste/icons/esm/CopyIcon'; -import {Tooltip, useTooltipState} from '@twilio-paste/tooltip'; -import type {BoxProps} from '@twilio-paste/box'; +import { Button } from '@twilio-paste/button'; +import { Box } from '@twilio-paste/box'; +import { useClipboard } from '@twilio-paste/clipboard-copy-library'; +import { ScreenReaderOnly } from '@twilio-paste/screen-reader-only'; +import { CopyIcon } from '@twilio-paste/icons/esm/CopyIcon'; +import { Tooltip, useTooltipState } from '@twilio-paste/tooltip'; +import type { BoxProps } from '@twilio-paste/box'; interface CopyButtonProps { text: string; @@ -37,7 +37,7 @@ export const CopyButton: React.FC> = ({ return getCopyButtonText(i18nCopyLabelBefore, i18nCopyLabelAfter); }, [i18nCopyLabelBefore, i18nCopyLabelAfter]); - const clipboard = useClipboard({copiedTimeout: 1500}); + const clipboard = useClipboard({ copiedTimeout: 1500 }); const handleCopy = React.useCallback(() => { const formattedText = copyTextFormatter ? copyTextFormatter(text) : text; clipboard.copy(formattedText); diff --git a/packages/paste-core/components/code-block/src/ExternalLinkButton.tsx b/packages/paste-core/components/code-block/src/ExternalLinkButton.tsx index 7df531bc1e..cfa05e04a0 100644 --- a/packages/paste-core/components/code-block/src/ExternalLinkButton.tsx +++ b/packages/paste-core/components/code-block/src/ExternalLinkButton.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {Button} from '@twilio-paste/button'; -import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only'; -import {LinkExternalIcon} from '@twilio-paste/icons/esm/LinkExternalIcon'; -import {Tooltip, useTooltipState} from '@twilio-paste/tooltip'; -import type {BoxProps} from '@twilio-paste/box'; +import { Button } from '@twilio-paste/button'; +import { ScreenReaderOnly } from '@twilio-paste/screen-reader-only'; +import { LinkExternalIcon } from '@twilio-paste/icons/esm/LinkExternalIcon'; +import { Tooltip, useTooltipState } from '@twilio-paste/tooltip'; +import type { BoxProps } from '@twilio-paste/box'; interface ExternalLinkButtonProps { href: string; diff --git a/packages/paste-core/components/code-block/stories/customization.stories.tsx b/packages/paste-core/components/code-block/stories/customization.stories.tsx index 64778d230d..056ea4a720 100644 --- a/packages/paste-core/components/code-block/stories/customization.stories.tsx +++ b/packages/paste-core/components/code-block/stories/customization.stories.tsx @@ -1,9 +1,16 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {useTheme} from '@twilio-paste/theme'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import type { StoryFn } from '@storybook/react'; +import { useTheme } from '@twilio-paste/theme'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {CodeBlock, CodeBlockWrapper, CodeBlockHeader, CodeBlockTabList, CodeBlockTab, CodeBlockTabPanel} from '../src'; +import { + CodeBlock, + CodeBlockWrapper, + CodeBlockHeader, + CodeBlockTabList, + CodeBlockTab, + CodeBlockTabPanel, +} from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -59,7 +66,7 @@ $client->messages->create( ) );`; -export const CustomizedCodeBlock: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const CustomizedCodeBlock: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( @@ -95,7 +102,7 @@ export const CustomizedCodeBlock: StoryFn = (_args, {parameters: {isTestEnvironm ); }; -export const CustomizedCodeBlockGroup: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const CustomizedCodeBlockGroup: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( diff --git a/packages/paste-core/components/code-block/stories/index.stories.tsx b/packages/paste-core/components/code-block/stories/index.stories.tsx index c501794987..34cfa078bc 100644 --- a/packages/paste-core/components/code-block/stories/index.stories.tsx +++ b/packages/paste-core/components/code-block/stories/index.stories.tsx @@ -1,8 +1,15 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {Box} from '@twilio-paste/box'; - -import {CodeBlock, CodeBlockWrapper, CodeBlockHeader, CodeBlockTabList, CodeBlockTab, CodeBlockTabPanel} from '../src'; +import type { StoryFn } from '@storybook/react'; +import { Box } from '@twilio-paste/box'; + +import { + CodeBlock, + CodeBlockWrapper, + CodeBlockHeader, + CodeBlockTabList, + CodeBlockTab, + CodeBlockTabPanel, +} from '../src'; // eslint-disable-next-line import/no-default-export export default { diff --git a/packages/paste-core/components/combobox/__tests__/Combobox.spec.tsx b/packages/paste-core/components/combobox/__tests__/Combobox.spec.tsx index 7f53351301..3a18fb0e01 100644 --- a/packages/paste-core/components/combobox/__tests__/Combobox.spec.tsx +++ b/packages/paste-core/components/combobox/__tests__/Combobox.spec.tsx @@ -1,29 +1,29 @@ import * as React from 'react'; import filter from 'lodash/filter'; import uniq from 'lodash/uniq'; -import {render, screen, fireEvent, waitFor} from '@testing-library/react'; +import { render, screen, fireEvent, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import type {RenderOptions} from '@testing-library/react'; -import {Theme} from '@twilio-paste/theme'; -import {Button} from '@twilio-paste/button'; -import {CloseIcon} from '@twilio-paste/icons/esm/CloseIcon'; -import {Box} from '@twilio-paste/box'; -import type {useVirtual as _useVirtual} from 'react-virtual'; +import type { RenderOptions } from '@testing-library/react'; +import { Theme } from '@twilio-paste/theme'; +import { Button } from '@twilio-paste/button'; +import { CloseIcon } from '@twilio-paste/icons/esm/CloseIcon'; +import { Box } from '@twilio-paste/box'; +import type { useVirtual as _useVirtual } from 'react-virtual'; -import {useCombobox, Combobox} from '../src'; -import type {ComboboxProps} from '../src/types'; -import {getIndexedItems, getGroupedItems} from '../src/helpers'; +import { useCombobox, Combobox } from '../src'; +import type { ComboboxProps } from '../src/types'; +import { getIndexedItems, getGroupedItems } from '../src/helpers'; type UseVirtual = typeof _useVirtual; const mockScrollToIndex = jest.fn(); jest.mock('react-virtual', () => { - const {useVirtual} = jest.requireActual('react-virtual'); + const { useVirtual } = jest.requireActual('react-virtual'); return { useVirtual: (config: Parameters) => { - const {scrollToIndex, ...returnValue} = useVirtual(config); + const { scrollToIndex, ...returnValue } = useVirtual(config); return { ...returnValue, scrollToIndex: mockScrollToIndex, @@ -35,43 +35,43 @@ jest.mock('react-virtual', () => { const items = ['Alert', 'Anchor', 'Button', 'Card', 'Heading', 'List', 'Modal', 'Paragraph']; const objectItems = [ - {code: 'AD', label: 'Andorra', phone: '376'}, - {code: 'AE', label: 'United Arab Emirates', phone: '971'}, - {code: 'AF', label: 'Afghanistan', phone: '93'}, - {code: 'AG', label: 'Antigua and Barbuda', phone: '1-268'}, - {code: 'AI', label: 'Anguilla', phone: '1-264'}, - {code: 'AL', label: 'Albania', phone: '355'}, - {code: 'AM', label: 'Armenia', phone: '374'}, - {code: 'AO', label: 'Angola', phone: '244'}, - {code: 'AQ', label: 'Antarctica', phone: '672'}, - {code: 'AR', label: 'Argentina', phone: '54'}, - {code: 'AS', label: 'American Samoa', phone: '1-684'}, - {code: 'AT', label: 'Austria', phone: '43'}, + { code: 'AD', label: 'Andorra', phone: '376' }, + { code: 'AE', label: 'United Arab Emirates', phone: '971' }, + { code: 'AF', label: 'Afghanistan', phone: '93' }, + { code: 'AG', label: 'Antigua and Barbuda', phone: '1-268' }, + { code: 'AI', label: 'Anguilla', phone: '1-264' }, + { code: 'AL', label: 'Albania', phone: '355' }, + { code: 'AM', label: 'Armenia', phone: '374' }, + { code: 'AO', label: 'Angola', phone: '244' }, + { code: 'AQ', label: 'Antarctica', phone: '672' }, + { code: 'AR', label: 'Argentina', phone: '54' }, + { code: 'AS', label: 'American Samoa', phone: '1-684' }, + { code: 'AT', label: 'Austria', phone: '43' }, ]; const groupedItems = [ - {group: 'Components', label: 'Alert'}, - {group: 'Components', label: 'Anchor'}, - {group: 'Components', label: 'Button'}, - {group: 'Components', label: 'Card'}, - {group: 'Components', label: 'Heading'}, - {group: 'Components', label: 'List'}, - {group: 'Components', label: 'Modal'}, - {group: 'Components', label: 'Paragraph'}, - {group: 'Primitives', label: 'Box'}, - {group: 'Primitives', label: 'Text'}, - {group: 'Primitives', label: 'Non-modal dialog'}, - {group: 'Layout', label: 'Grid'}, - {label: 'Design Tokens'}, + { group: 'Components', label: 'Alert' }, + { group: 'Components', label: 'Anchor' }, + { group: 'Components', label: 'Button' }, + { group: 'Components', label: 'Card' }, + { group: 'Components', label: 'Heading' }, + { group: 'Components', label: 'List' }, + { group: 'Components', label: 'Modal' }, + { group: 'Components', label: 'Paragraph' }, + { group: 'Primitives', label: 'Box' }, + { group: 'Primitives', label: 'Text' }, + { group: 'Primitives', label: 'Non-modal dialog' }, + { group: 'Layout', label: 'Grid' }, + { label: 'Design Tokens' }, ]; const smallGroupedItems = [ - {group: 'Components', label: 'Alert'}, - {group: 'Primitives', label: 'Box'}, - {label: 'Design Tokens'}, + { group: 'Components', label: 'Alert' }, + { group: 'Primitives', label: 'Box' }, + { label: 'Design Tokens' }, ]; -const ThemeWrapper: RenderOptions['wrapper'] = ({children}) => ( +const ThemeWrapper: RenderOptions['wrapper'] = ({ children }) => ( {children} ); @@ -102,8 +102,8 @@ const ComboboxMock = (): JSX.Element => { }; const GroupedMockCombobox: React.FC< - React.PropsWithChildren<{groupLabelTemplate?: ComboboxProps['groupLabelTemplate']}> -> = ({groupLabelTemplate}) => { + React.PropsWithChildren<{ groupLabelTemplate?: ComboboxProps['groupLabelTemplate'] }> +> = ({ groupLabelTemplate }) => { return ( { const filteredItems = React.useMemo(() => getFilteredObjectItems(inputValue), [inputValue]); const [selectedItem, setSelectedItem] = React.useState({}); - const {reset, ...state} = useCombobox({ + const { reset, ...state } = useCombobox({ items: filteredItems, itemToString: (item) => (item ? item.label : ''), onSelectedItemChange: (changes) => { @@ -184,24 +184,24 @@ describe('Combobox', () => { describe('Unit tests', () => { it('should return an indexed array of items', () => { expect(getIndexedItems(smallGroupedItems)).toStrictEqual([ - {group: 'Components', index: 0, label: 'Alert'}, - {group: 'Primitives', index: 1, label: 'Box'}, - {index: 2, label: 'Design Tokens'}, + { group: 'Components', index: 0, label: 'Alert' }, + { group: 'Primitives', index: 1, label: 'Box' }, + { index: 2, label: 'Design Tokens' }, ]); }); it('should return grouped object of items with original array index', () => { expect(getGroupedItems(getIndexedItems(smallGroupedItems), 'group')).toStrictEqual({ - Components: [{group: 'Components', index: 0, label: 'Alert'}], - Primitives: [{group: 'Primitives', index: 1, label: 'Box'}], - undefined: [{index: 2, label: 'Design Tokens'}], + Components: [{ group: 'Components', index: 0, label: 'Alert' }], + Primitives: [{ group: 'Primitives', index: 1, label: 'Box' }], + undefined: [{ index: 2, label: 'Design Tokens' }], }); }); }); describe('Render', () => { it('should render a combobox with aria attributes', () => { - render(, {wrapper: ThemeWrapper}); + render(, { wrapper: ThemeWrapper }); const renderedCombobox = screen.getByRole('combobox'); expect(renderedCombobox.getAttribute('aria-haspopup')).toEqual('listbox'); expect(renderedCombobox.getAttribute('aria-owns')).toEqual(screen.getByRole('listbox').id); @@ -209,7 +209,7 @@ describe('Combobox', () => { }); it('should render a textbox with aria attributes', () => { - render(, {wrapper: ThemeWrapper}); + render(, { wrapper: ThemeWrapper }); const renderedCombobox = screen.getByRole('textbox'); expect(renderedCombobox.getAttribute('aria-controls')).toEqual(screen.getByRole('listbox').id); expect(renderedCombobox.getAttribute('aria-labelledby')).toEqual(document.querySelector('label')!.id); @@ -217,13 +217,13 @@ describe('Combobox', () => { }); it('should render a list with aria attributes', () => { - render(, {wrapper: ThemeWrapper}); + render(, { wrapper: ThemeWrapper }); const renderedCombobox = screen.getByRole('listbox'); expect(renderedCombobox.getAttribute('aria-labelledby')).toEqual(document.querySelector('label')!.id); }); it('should render a list with unique option ids', () => { - render(, {wrapper: ThemeWrapper}); + render(, { wrapper: ThemeWrapper }); const renderedOptions = screen.getAllByRole('option'); const optionIDs = renderedOptions.map((option) => option.id); const uniqueIDs = uniq(optionIDs); @@ -232,20 +232,20 @@ describe('Combobox', () => { }); it('should render a label for that matches the input id', () => { - render(, {wrapper: ThemeWrapper}); + render(, { wrapper: ThemeWrapper }); const renderedLabel = document.querySelector('label'); const renderedTextbox = screen.getByRole('textbox'); expect(renderedLabel!.getAttribute('for')).toEqual(renderedTextbox.getAttribute('id')); }); it('should render a required combobox', () => { - render(, {wrapper: ThemeWrapper}); + render(, { wrapper: ThemeWrapper }); const renderedTextbox = screen.getByRole('textbox'); expect(renderedTextbox.getAttribute('required')).toEqual(''); }); it('should set correct aria-activedescendant when highlighted index changes', async () => { - render(, {wrapper: ThemeWrapper}); + render(, { wrapper: ThemeWrapper }); const targetIndex = 1; const target = items[targetIndex]; @@ -253,14 +253,14 @@ describe('Combobox', () => { userEvent.hover(screen.getByText(target)); expect(screen.getByRole('textbox').getAttribute('aria-activedescendant')).toMatch( - /downshift-([1-9]\d\d|[1-9]\d|\d)-item-1/g + /downshift-([1-9]\d\d|[1-9]\d|\d)-item-1/g, ); }); }); describe('Groups', () => { it('should render a group of options', () => { - render(, {wrapper: ThemeWrapper}); + render(, { wrapper: ThemeWrapper }); const renderedGroups = screen.getAllByRole('group'); // check groups, group label and number of options per group expect(renderedGroups[0].getAttribute('aria-label')).toEqual('Components'); @@ -272,19 +272,19 @@ describe('Combobox', () => { }); it('should render any items not identified as part of the group as ungrouped options', () => { - render(, {wrapper: ThemeWrapper}); + render(, { wrapper: ThemeWrapper }); const renderedListbox = screen.getByRole('listbox'); const renderedGroups = screen.getAllByRole('group'); // check we have 3 groups expect(renderedGroups.length).toEqual(3); // check any options that are not nested in groups expect( - renderedListbox.querySelectorAll('[role="listbox"] > [role="presentation"] > [role="option"]').length + renderedListbox.querySelectorAll('[role="listbox"] > [role="presentation"] > [role="option"]').length, ).toEqual(1); }); it('should render a listbox with groups of options that contains no duplicate ids', () => { - render(, {wrapper: ThemeWrapper}); + render(, { wrapper: ThemeWrapper }); const renderedOptions = screen.getAllByRole('option'); const optionIDs = renderedOptions.map((option) => option.id); const uniqueIDs = uniq(optionIDs); @@ -297,32 +297,32 @@ describe('Combobox', () => { }); const renderedGroups = screen.getAllByRole('group'); expect(renderedGroups[0].querySelector('[role="group"] > li[role="presentation"]')!.textContent).toEqual( - 'hi Components' + 'hi Components', ); expect(renderedGroups[1].querySelector('[role="group"] > li[role="presentation"]')!.textContent).toEqual( - 'hi Primitives' + 'hi Primitives', ); expect(renderedGroups[2].querySelector('[role="group"] > li[role="presentation"]')!.textContent).toEqual( - 'hi Layout' + 'hi Layout', ); }); it('should select item using keyboard', () => { - render(, {wrapper: ThemeWrapper}); + render(, { wrapper: ThemeWrapper }); // open the combobox fireEvent.click(screen.getByRole('textbox')); // select the third item using ArrowDown keyDown - fireEvent.keyDown(screen.getByRole('textbox'), {key: 'ArrowDown', code: 'ArrowDown'}); - fireEvent.keyDown(screen.getByRole('textbox'), {key: 'ArrowDown', code: 'ArrowDown'}); - fireEvent.keyDown(screen.getByRole('textbox'), {key: 'ArrowDown', code: 'ArrowDown'}); - fireEvent.keyDown(screen.getByRole('textbox'), {key: 'Enter', code: 'Enter'}); + fireEvent.keyDown(screen.getByRole('textbox'), { key: 'ArrowDown', code: 'ArrowDown' }); + fireEvent.keyDown(screen.getByRole('textbox'), { key: 'ArrowDown', code: 'ArrowDown' }); + fireEvent.keyDown(screen.getByRole('textbox'), { key: 'ArrowDown', code: 'ArrowDown' }); + fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter', code: 'Enter' }); // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore Property 'value' does not exist on type 'HTMLElement' (I get it, but this is right) expect(screen.getByRole('textbox').value).toEqual('Button'); // select the first item using ArrowUp keyDown - fireEvent.keyDown(screen.getByRole('textbox'), {key: 'ArrowUp', code: 'ArrowUp'}); - fireEvent.keyDown(screen.getByRole('textbox'), {key: 'ArrowUp', code: 'ArrowUp'}); - fireEvent.keyDown(screen.getByRole('textbox'), {key: 'Enter', code: 'Enter'}); + fireEvent.keyDown(screen.getByRole('textbox'), { key: 'ArrowUp', code: 'ArrowUp' }); + fireEvent.keyDown(screen.getByRole('textbox'), { key: 'ArrowUp', code: 'ArrowUp' }); + fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter', code: 'Enter' }); // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore Property 'value' does not exist on type 'HTMLElement' (I get it, but this is right) expect(screen.getByRole('textbox').value).toEqual('Alert'); @@ -330,7 +330,7 @@ describe('Combobox', () => { it('should not run react virtual\'s "scroll to" function when "groupItemsBy" is defined as a string', () => { // bc grouped comboboxes are not yet virtualized - render(, {wrapper: ThemeWrapper}); + render(, { wrapper: ThemeWrapper }); const targetIndex = 1; const target = groupedItems[targetIndex]; @@ -338,7 +338,7 @@ describe('Combobox', () => { userEvent.hover(screen.getByText(target.label)); expect(screen.getByRole('textbox').getAttribute('aria-activedescendant')).toMatch( - /downshift-([1-9]\d\d|[1-9]\d|\d)-item-1/g + /downshift-([1-9]\d\d|[1-9]\d|\d)-item-1/g, ); expect(mockScrollToIndex).not.toHaveBeenCalled(); @@ -347,7 +347,7 @@ describe('Combobox', () => { describe('Controlled Combobox', () => { it('should be able to clear a Combobox', () => { - render(, {wrapper: ThemeWrapper}); + render(, { wrapper: ThemeWrapper }); // open the combobox fireEvent.click(screen.getByRole('textbox')); // eslint-disable-next-line @typescript-eslint/ban-ts-comment @@ -361,7 +361,7 @@ describe('Combobox', () => { expect(screen.getByRole('textbox').value).toEqual('Andorra'); expect(screen.getByTestId('input-value-span').textContent).toEqual('"Andorra"'); expect(screen.getByTestId('selected-item-span').textContent).toEqual( - '{"code":"AD","label":"Andorra","phone":"376"}' + '{"code":"AD","label":"Andorra","phone":"376"}', ); // click the clear button fireEvent.click(screen.getByText('Clear')); @@ -373,17 +373,17 @@ describe('Combobox', () => { }); it('should set correct aria-activedescendant when highlighted index changes', async () => { - render(, {wrapper: ThemeWrapper}); + render(, { wrapper: ThemeWrapper }); userEvent.click(screen.getByRole('textbox')); const targetIndex = 1; const target = objectItems[targetIndex]; - userEvent.hover(screen.getByText(target.label, {exact: false})); // text broken up by characters + userEvent.hover(screen.getByText(target.label, { exact: false })); // text broken up by characters expect(screen.getByRole('textbox').getAttribute('aria-activedescendant')).toMatch( - /downshift-([1-9]\d\d|[1-9]\d|\d)-item-1/g + /downshift-([1-9]\d\d|[1-9]\d|\d)-item-1/g, ); }); }); diff --git a/packages/paste-core/components/combobox/__tests__/GrowingInput.spec.tsx b/packages/paste-core/components/combobox/__tests__/GrowingInput.spec.tsx index b16d5dbeb8..c83303d36e 100644 --- a/packages/paste-core/components/combobox/__tests__/GrowingInput.spec.tsx +++ b/packages/paste-core/components/combobox/__tests__/GrowingInput.spec.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {render, screen, fireEvent} from '@testing-library/react'; -import type {RenderOptions} from '@testing-library/react'; -import {Theme} from '@twilio-paste/theme'; +import { render, screen, fireEvent } from '@testing-library/react'; +import type { RenderOptions } from '@testing-library/react'; +import { Theme } from '@twilio-paste/theme'; -import {GrowingInput} from '../src/multiselect/GrowingInput'; +import { GrowingInput } from '../src/multiselect/GrowingInput'; const TEST_ID = 'growing-input-test-id-123'; @@ -12,7 +12,7 @@ describe('GrowingInput component', () => { render( - + , ); const input = screen.getByRole('textbox'); diff --git a/packages/paste-core/components/combobox/__tests__/MultiselectCombobox.spec.tsx b/packages/paste-core/components/combobox/__tests__/MultiselectCombobox.spec.tsx index 1311a97bc5..d1f57146c7 100644 --- a/packages/paste-core/components/combobox/__tests__/MultiselectCombobox.spec.tsx +++ b/packages/paste-core/components/combobox/__tests__/MultiselectCombobox.spec.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import {render, act, screen, fireEvent} from '@testing-library/react'; -import type {RenderOptions} from '@testing-library/react'; -import {Theme} from '@twilio-paste/theme'; -import {Form} from '@twilio-paste/form'; -import {Button} from '@twilio-paste/button'; +import { render, act, screen, fireEvent } from '@testing-library/react'; +import type { RenderOptions } from '@testing-library/react'; +import { Theme } from '@twilio-paste/theme'; +import { Form } from '@twilio-paste/form'; +import { Button } from '@twilio-paste/button'; import filter from 'lodash/filter'; import uniq from 'lodash/uniq'; -import {MultiselectCombobox, useMultiselectCombobox} from '../src'; -import type {MultiselectComboboxProps} from '../src'; +import { MultiselectCombobox, useMultiselectCombobox } from '../src'; +import type { MultiselectComboboxProps } from '../src'; const items = [ 'Alert', @@ -30,7 +30,7 @@ function getFilteredItems(inputValue: string): string[] { }); } -const ThemeWrapper: RenderOptions['wrapper'] = ({children}) => ( +const ThemeWrapper: RenderOptions['wrapper'] = ({ children }) => ( {children} ); @@ -45,7 +45,7 @@ const MultiselectComboboxMock: React.FC> = (pr items={filteredItems} disabledItems={[items[3]]} initialIsOpen - onInputValueChange={({inputValue: newInputValue = ''}) => { + onInputValueChange={({ inputValue: newInputValue = '' }) => { setInputValue(newInputValue); }} onSelectedItemsChange={() => { @@ -63,19 +63,19 @@ interface GroupedItem { label: string; } const groupedItems = [ - {group: 'Components', label: 'Alert'}, - {group: 'Components', label: 'Anchor'}, - {group: 'Components', label: 'Button'}, - {group: 'Components', label: 'Card'}, - {group: 'Components', label: 'Heading'}, - {group: 'Components', label: 'List'}, - {group: 'Components', label: 'Modal'}, - {group: 'Components', label: 'Paragraph'}, - {group: 'Primitives', label: 'Box'}, - {group: 'Primitives', label: 'Text'}, - {group: 'Primitives', label: 'Non-modal dialog'}, - {group: 'Layout', label: 'Grid'}, - {label: 'Design Tokens'}, + { group: 'Components', label: 'Alert' }, + { group: 'Components', label: 'Anchor' }, + { group: 'Components', label: 'Button' }, + { group: 'Components', label: 'Card' }, + { group: 'Components', label: 'Heading' }, + { group: 'Components', label: 'List' }, + { group: 'Components', label: 'Modal' }, + { group: 'Components', label: 'Paragraph' }, + { group: 'Primitives', label: 'Box' }, + { group: 'Primitives', label: 'Text' }, + { group: 'Primitives', label: 'Non-modal dialog' }, + { group: 'Layout', label: 'Grid' }, + { label: 'Design Tokens' }, ]; function getFilteredGroupedItems(inputValue: string): GroupedItem[] { @@ -97,7 +97,7 @@ const GroupedMultiselectComboboxMock: React.FC groupItemsBy="group" items={filteredItems} itemToString={(item: GroupedItem) => (item ? item.label : '')} - onInputValueChange={({inputValue: newInputValue = ''}) => { + onInputValueChange={({ inputValue: newInputValue = '' }) => { setInputValue(newInputValue); }} labelText="Choose a component:" @@ -130,7 +130,7 @@ const StateHookMock: React.FC> = (props) => { items={filteredItems} inputValue={inputValue} itemToString={(item: GroupedItem) => (item ? item.label : '')} - onInputValueChange={({inputValue: newInputValue = ''}) => { + onInputValueChange={({ inputValue: newInputValue = '' }) => { setInputValue(newInputValue); }} onSelectedItemsChange={props.onSelectedItemsChange} @@ -202,7 +202,7 @@ describe('MultiselectCombobox', () => { // Value should be '' expect(renderedTextbox.getAttribute('value')).toEqual(''); // Change the value to 'Al' - fireEvent.change(renderedTextbox, {target: {value: 'Al'}}); + fireEvent.change(renderedTextbox, { target: { value: 'Al' } }); expect(renderedTextbox.getAttribute('value')).toEqual('Al'); // Selecting an option clears the value in the input box @@ -225,7 +225,7 @@ describe('MultiselectCombobox', () => { renderedTextbox.focus(); expect(onKeyDownMock).toHaveBeenCalledTimes(0); - fireEvent.keyDown(renderedTextbox, {key: 'Enter', code: 'Enter'}); + fireEvent.keyDown(renderedTextbox, { key: 'Enter', code: 'Enter' }); expect(onKeyDownMock).toHaveBeenCalledTimes(1); // No form submit @@ -235,7 +235,7 @@ describe('MultiselectCombobox', () => { describe('Groups', () => { it('should render a group of options', () => { - render(, {wrapper: ThemeWrapper}); + render(, { wrapper: ThemeWrapper }); const renderedGroups = screen.getAllByRole('group'); // check groups, group label and number of options per group expect(renderedGroups[0].getAttribute('aria-label')).toEqual('Components'); @@ -247,7 +247,7 @@ describe('MultiselectCombobox', () => { }); it('should render any items not identified as part of the group as ungrouped options', () => { - const {getAllByRole} = render(, {wrapper: ThemeWrapper}); + const { getAllByRole } = render(, { wrapper: ThemeWrapper }); const [pillGroupListbox, dropdownListbox] = getAllByRole('listbox'); const renderedGroups = getAllByRole('group'); @@ -258,12 +258,12 @@ describe('MultiselectCombobox', () => { expect(renderedGroups.length).toEqual(3); // check any options that are not nested in groups expect( - dropdownListbox.querySelectorAll('[role="listbox"] > [role="presentation"] > [role="option"]').length + dropdownListbox.querySelectorAll('[role="listbox"] > [role="presentation"] > [role="option"]').length, ).toEqual(1); }); it('should render a listbox with groups of options that contains no duplicate ids', () => { - render(, {wrapper: ThemeWrapper}); + render(, { wrapper: ThemeWrapper }); const renderedOptions = screen.getAllByRole('option'); const optionIDs = renderedOptions.map((option) => option.id); const uniqueIDs = uniq(optionIDs); @@ -276,13 +276,13 @@ describe('MultiselectCombobox', () => { }); const renderedGroups = screen.getAllByRole('group'); expect(renderedGroups[0].querySelector('[role="group"] > li[role="presentation"]')!.textContent).toEqual( - 'hi Components' + 'hi Components', ); expect(renderedGroups[1].querySelector('[role="group"] > li[role="presentation"]')!.textContent).toEqual( - 'hi Primitives' + 'hi Primitives', ); expect(renderedGroups[2].querySelector('[role="group"] > li[role="presentation"]')!.textContent).toEqual( - 'hi Layout' + 'hi Layout', ); }); @@ -294,26 +294,26 @@ describe('MultiselectCombobox', () => { // open the combobox fireEvent.click(screen.getByRole('textbox')); // select the third item using ArrowDown keyDown - fireEvent.keyDown(screen.getByRole('textbox'), {key: 'ArrowDown', code: 'ArrowDown'}); - fireEvent.keyDown(screen.getByRole('textbox'), {key: 'ArrowDown', code: 'ArrowDown'}); - fireEvent.keyDown(screen.getByRole('textbox'), {key: 'ArrowDown', code: 'ArrowDown'}); - fireEvent.keyDown(screen.getByRole('textbox'), {key: 'Enter', code: 'Enter'}); + fireEvent.keyDown(screen.getByRole('textbox'), { key: 'ArrowDown', code: 'ArrowDown' }); + fireEvent.keyDown(screen.getByRole('textbox'), { key: 'ArrowDown', code: 'ArrowDown' }); + fireEvent.keyDown(screen.getByRole('textbox'), { key: 'ArrowDown', code: 'ArrowDown' }); + fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter', code: 'Enter' }); expect(mockSelectedItemsChangeFn).toHaveBeenCalledTimes(1); - expect(mockSelectedItemsChangeFn.mock.results[0].value).toEqual([{group: 'Components', label: 'Button'}]); + expect(mockSelectedItemsChangeFn.mock.results[0].value).toEqual([{ group: 'Components', label: 'Button' }]); // select the first item using ArrowUp keyDown - fireEvent.keyDown(screen.getByRole('textbox'), {key: 'ArrowUp', code: 'ArrowUp'}); - fireEvent.keyDown(screen.getByRole('textbox'), {key: 'ArrowUp', code: 'ArrowUp'}); - fireEvent.keyDown(screen.getByRole('textbox'), {key: 'Enter', code: 'Enter'}); + fireEvent.keyDown(screen.getByRole('textbox'), { key: 'ArrowUp', code: 'ArrowUp' }); + fireEvent.keyDown(screen.getByRole('textbox'), { key: 'ArrowUp', code: 'ArrowUp' }); + fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter', code: 'Enter' }); expect(mockSelectedItemsChangeFn).toHaveBeenCalledTimes(2); expect(mockSelectedItemsChangeFn.mock.results[1].value).toEqual([ - {group: 'Components', label: 'Button'}, - {group: 'Components', label: 'Alert'}, + { group: 'Components', label: 'Button' }, + { group: 'Components', label: 'Alert' }, ]); - fireEvent.keyDown(screen.getByRole('textbox'), {key: 'Enter', code: 'Enter'}); + fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter', code: 'Enter' }); expect(mockSelectedItemsChangeFn).toHaveBeenCalledTimes(3); - expect(mockSelectedItemsChangeFn.mock.results[2].value).toEqual([{group: 'Components', label: 'Button'}]); + expect(mockSelectedItemsChangeFn.mock.results[2].value).toEqual([{ group: 'Components', label: 'Button' }]); }); }); @@ -328,12 +328,12 @@ describe('MultiselectCombobox', () => { expect(pillGroup?.childNodes.length).toBe(2); act(() => { - screen.getByRole('button', {name: 'Clear'}).click(); + screen.getByRole('button', { name: 'Clear' }).click(); }); expect(pillGroup?.childNodes.length).toBe(0); expect(mockSelectedItemsChangeFn).toHaveBeenCalledTimes(1); - expect(mockSelectedItemsChangeFn.mock.results[0].value).toEqual({activeIndex: -1, selectedItems: [], type: 10}); + expect(mockSelectedItemsChangeFn.mock.results[0].value).toEqual({ activeIndex: -1, selectedItems: [], type: 10 }); }); }); }); diff --git a/packages/paste-core/components/combobox/__tests__/combobox-customization.spec.tsx b/packages/paste-core/components/combobox/__tests__/combobox-customization.spec.tsx index 53d37c8d13..bec7312433 100644 --- a/packages/paste-core/components/combobox/__tests__/combobox-customization.spec.tsx +++ b/packages/paste-core/components/combobox/__tests__/combobox-customization.spec.tsx @@ -1,30 +1,30 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import type {RenderOptions} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import type {PasteCustomCSS} from '@twilio-paste/customization'; -import {InformationIcon} from '@twilio-paste/icons/esm/InformationIcon'; -import {Text} from '@twilio-paste/text'; +import { render, screen } from '@testing-library/react'; +import type { RenderOptions } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import type { PasteCustomCSS } from '@twilio-paste/customization'; +import { InformationIcon } from '@twilio-paste/icons/esm/InformationIcon'; +import { Text } from '@twilio-paste/text'; -import {Combobox} from '../src'; +import { Combobox } from '../src'; -const getStyles = (element = 'COMBOBOX'): {[key: string]: PasteCustomCSS} => ({ - [`${element}_WRAPPER`]: {backgroundColor: 'colorBackgroundStrong', fontFamily: 'fontFamilyCode'}, - [`${element}`]: {backgroundColor: 'colorBackgroundPrimaryWeakest'}, - [`${element}_ELEMENT`]: {cursor: 'pointer'}, - [`${element}_CHEVRON_WRAPPER`]: {backgroundColor: 'colorBackgroundBrandHighlightWeakest'}, - [`${element}_LISTBOX`]: {backgroundColor: 'colorBackgroundPrimaryWeaker'}, - [`${element}_LIST`]: {backgroundColor: 'colorBackgroundPrimaryWeak'}, - [`${element}_GROUPNAME`]: {fontFamily: 'fontFamilyText', cursor: 'help'}, - [`${element}_GROUPNAME_TEXT`]: {fontWeight: 'fontWeightLight'}, - [`${element}_LIST_ITEM`]: {backgroundColor: 'colorBackgroundPrimaryStrong'}, - [`${element}_LIST_ITEM_TEXT`]: {color: 'colorTextWeakest', fontWeight: 'fontWeightBold'}, - [`${element}_PREFIX`]: {backgroundColor: 'colorBackgroundRequired', borderRadius: 'borderRadius20'}, - [`${element}_SUFFIX`]: {backgroundColor: 'colorBackgroundSubaccount', borderRadius: 'borderRadiusCircle'}, +const getStyles = (element = 'COMBOBOX'): { [key: string]: PasteCustomCSS } => ({ + [`${element}_WRAPPER`]: { backgroundColor: 'colorBackgroundStrong', fontFamily: 'fontFamilyCode' }, + [`${element}`]: { backgroundColor: 'colorBackgroundPrimaryWeakest' }, + [`${element}_ELEMENT`]: { cursor: 'pointer' }, + [`${element}_CHEVRON_WRAPPER`]: { backgroundColor: 'colorBackgroundBrandHighlightWeakest' }, + [`${element}_LISTBOX`]: { backgroundColor: 'colorBackgroundPrimaryWeaker' }, + [`${element}_LIST`]: { backgroundColor: 'colorBackgroundPrimaryWeak' }, + [`${element}_GROUPNAME`]: { fontFamily: 'fontFamilyText', cursor: 'help' }, + [`${element}_GROUPNAME_TEXT`]: { fontWeight: 'fontWeightLight' }, + [`${element}_LIST_ITEM`]: { backgroundColor: 'colorBackgroundPrimaryStrong' }, + [`${element}_LIST_ITEM_TEXT`]: { color: 'colorTextWeakest', fontWeight: 'fontWeightBold' }, + [`${element}_PREFIX`]: { backgroundColor: 'colorBackgroundRequired', borderRadius: 'borderRadius20' }, + [`${element}_SUFFIX`]: { backgroundColor: 'colorBackgroundSubaccount', borderRadius: 'borderRadiusCircle' }, }); const initCustomizationWrapper = (elementName?: string | undefined): RenderOptions['wrapper'] => - function Wrapper({children}) { + function Wrapper({ children }) { return ( {children} @@ -32,12 +32,12 @@ const initCustomizationWrapper = (elementName?: string | undefined): RenderOptio ); }; -const ComboboxToTest = ({element = 'COMBOBOX'}): React.ReactElement => ( +const ComboboxToTest = ({ element = 'COMBOBOX' }): React.ReactElement => ( ( describe('Combobox data-paste-element attributes', () => { it('should set the correct attributes on all Combobox components', () => { - const {container} = render(, {wrapper: initCustomizationWrapper()}); + const { container } = render(, { wrapper: initCustomizationWrapper() }); expect(container.querySelector('[data-paste-element="COMBOBOX"]')).toBeInTheDocument(); expect(container.querySelector('[data-paste-element="COMBOBOX_WRAPPER"]')).toBeInTheDocument(); expect(container.querySelector('[data-paste-element="COMBOBOX_ELEMENT"]')).toBeInTheDocument(); @@ -65,13 +65,13 @@ describe('Combobox data-paste-element attributes', () => { expect(screen.getAllByRole('option')).toHaveLength(3); expect(screen.getAllByRole('option')[0].getAttribute('data-paste-element')).toEqual('COMBOBOX_LIST_ITEM'); expect(screen.getByRole('listbox').querySelectorAll('[data-paste-element="COMBOBOX_LIST_ITEM_TEXT"]')).toHaveLength( - 3 + 3, ); expect(container.querySelector('[data-paste-element="COMBOBOX_PREFIX"]')).toBeInTheDocument(); expect(container.querySelector('[data-paste-element="COMBOBOX_SUFFIX"]')).toBeInTheDocument(); }); it('should set the correct attributes on all Combobox components with custom element prop', () => { - const {container} = render(, {wrapper: initCustomizationWrapper()}); + const { container } = render(, { wrapper: initCustomizationWrapper() }); expect(container.querySelector('[data-paste-element="FOO"]')).toBeInTheDocument(); expect(container.querySelector('[data-paste-element="FOO_WRAPPER"]')).toBeInTheDocument(); expect(container.querySelector('[data-paste-element="FOO_ELEMENT"]')).toBeInTheDocument(); @@ -90,19 +90,19 @@ describe('Combobox data-paste-element attributes', () => { describe('Combobox customization', () => { it('should add styles to Combobox', () => { - const {container} = render(, {wrapper: initCustomizationWrapper('COMBOBOX')}); + const { container } = render(, { wrapper: initCustomizationWrapper('COMBOBOX') }); expect(container.querySelector('[data-paste-element="COMBOBOX"]')).toHaveStyleRule( 'background-color', - 'rgb(235, 244, 255)' + 'rgb(235, 244, 255)', ); expect(container.querySelector('[data-paste-element="COMBOBOX_WRAPPER"]')).toHaveStyleRule( 'background-color', - 'rgb(225, 227, 234)' + 'rgb(225, 227, 234)', ); expect(container.querySelector('[data-paste-element="COMBOBOX_ELEMENT"]')).toHaveStyleRule('cursor', 'pointer'); expect(container.querySelector('[data-paste-element="COMBOBOX_CHEVRON_WRAPPER"]')).toHaveStyleRule( 'background-color', - 'rgba(242, 47, 70, 0.1)' + 'rgba(242, 47, 70, 0.1)', ); const listbox = screen.getByRole('listbox'); @@ -110,66 +110,66 @@ describe('Combobox customization', () => { expect(listbox).toHaveStyleRule('background-color', 'rgb(204, 228, 255)'); expect(listbox.querySelector('[data-paste-element="COMBOBOX_LIST"]')).toHaveStyleRule( 'background-color', - 'rgb(153, 205, 255)' + 'rgb(153, 205, 255)', ); expect(listbox.querySelector('[data-paste-element="COMBOBOX_GROUPNAME"]')).toHaveStyleRule('cursor', 'help'); expect(listbox.querySelector('[data-paste-element="COMBOBOX_LIST_ITEM"]')).toHaveStyleRule( 'background-color', - 'rgb(0, 20, 137)' + 'rgb(0, 20, 137)', ); expect(listbox.querySelector('[data-paste-element="COMBOBOX_LIST_ITEM_TEXT"]')).toHaveStyleRule( 'font-weight', - '700' + '700', ); expect(container.querySelector('[data-paste-element="COMBOBOX_PREFIX"]')).toHaveStyleRule( 'background-color', - 'rgb(235, 86, 86)' + 'rgb(235, 86, 86)', ); expect(container.querySelector('[data-paste-element="COMBOBOX_SUFFIX"]')).toHaveStyleRule( 'background-color', - 'rgb(255, 241, 179)' + 'rgb(255, 241, 179)', ); }); it('should add styles to Combobox with custom element attribute', () => { - const {container} = render(, {wrapper: initCustomizationWrapper('FOO')}); + const { container } = render(, { wrapper: initCustomizationWrapper('FOO') }); expect(container.querySelector('[data-paste-element="FOO"]')).toHaveStyleRule( 'background-color', - 'rgb(235, 244, 255)' + 'rgb(235, 244, 255)', ); expect(container.querySelector('[data-paste-element="FOO_WRAPPER"]')).toHaveStyleRule( 'background-color', - 'rgb(225, 227, 234)' + 'rgb(225, 227, 234)', ); expect(container.querySelector('[data-paste-element="FOO_ELEMENT"]')).toHaveStyleRule('cursor', 'pointer'); expect(container.querySelector('[data-paste-element="FOO_CHEVRON_WRAPPER"]')).toHaveStyleRule( 'background-color', - 'rgba(242, 47, 70, 0.1)' + 'rgba(242, 47, 70, 0.1)', ); expect(screen.getByRole('listbox')).toHaveStyleRule('background-color', 'rgb(204, 228, 255)'); expect(screen.getByRole('listbox').querySelector('[data-paste-element="FOO_LIST"]')).toHaveStyleRule( 'background-color', - 'rgb(153, 205, 255)' + 'rgb(153, 205, 255)', ); expect(screen.getByRole('listbox').querySelector('[data-paste-element="FOO_GROUPNAME"]')).toHaveStyleRule( 'cursor', - 'help' + 'help', ); expect(screen.getByRole('listbox').querySelector('[data-paste-element="FOO_LIST_ITEM"]')).toHaveStyleRule( 'background-color', - 'rgb(0, 20, 137)' + 'rgb(0, 20, 137)', ); expect(screen.getByRole('listbox').querySelector('[data-paste-element="FOO_LIST_ITEM_TEXT"]')).toHaveStyleRule( 'font-weight', - '700' + '700', ); expect(container.querySelector('[data-paste-element="FOO_PREFIX"]')).toHaveStyleRule( 'background-color', - 'rgb(235, 86, 86)' + 'rgb(235, 86, 86)', ); expect(container.querySelector('[data-paste-element="FOO_SUFFIX"]')).toHaveStyleRule( 'background-color', - 'rgb(255, 241, 179)' + 'rgb(255, 241, 179)', ); }); }); diff --git a/packages/paste-core/components/combobox/__tests__/multiselect-combobox-customization.spec.tsx b/packages/paste-core/components/combobox/__tests__/multiselect-combobox-customization.spec.tsx index fedc8bbafc..fc348d2e49 100644 --- a/packages/paste-core/components/combobox/__tests__/multiselect-combobox-customization.spec.tsx +++ b/packages/paste-core/components/combobox/__tests__/multiselect-combobox-customization.spec.tsx @@ -1,32 +1,32 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import type {RenderOptions} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import type {PasteCustomCSS} from '@twilio-paste/customization'; -import {InformationIcon} from '@twilio-paste/icons/esm/InformationIcon'; -import {Text} from '@twilio-paste/text'; - -import {MultiselectCombobox} from '../src'; - -const getStyles = (element = 'MULTISELECT_COMBOBOX'): {[key: string]: PasteCustomCSS} => ({ - [`${element}_WRAPPER`]: {backgroundColor: 'colorBackgroundStrong', fontFamily: 'fontFamilyCode'}, - [`${element}`]: {backgroundColor: 'colorBackgroundPrimaryWeakest'}, - [`${element}_PILL_GROUP`]: {backgroundColor: 'colorBackgroundWarning'}, - [`${element}_PILL`]: {backgroundColor: 'colorBackgroundWarningWeakest'}, - [`${element}_ELEMENT`]: {cursor: 'pointer'}, - [`${element}_CHEVRON_WRAPPER`]: {backgroundColor: 'colorBackgroundBrandHighlightWeakest'}, - [`${element}_LISTBOX`]: {backgroundColor: 'colorBackgroundPrimaryWeaker'}, - [`${element}_LIST`]: {backgroundColor: 'colorBackgroundPrimaryWeak'}, - [`${element}_GROUPNAME`]: {fontFamily: 'fontFamilyText', cursor: 'help'}, - [`${element}_GROUPNAME_TEXT`]: {fontWeight: 'fontWeightLight'}, - [`${element}_LIST_ITEM`]: {backgroundColor: 'colorBackgroundPrimaryStrong'}, - [`${element}_LIST_ITEM_TEXT`]: {color: 'colorTextWeakest', fontWeight: 'fontWeightBold'}, - [`${element}_PREFIX`]: {backgroundColor: 'colorBackgroundRequired', borderRadius: 'borderRadius20'}, - [`${element}_SUFFIX`]: {backgroundColor: 'colorBackgroundSubaccount', borderRadius: 'borderRadiusCircle'}, +import { render, screen } from '@testing-library/react'; +import type { RenderOptions } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import type { PasteCustomCSS } from '@twilio-paste/customization'; +import { InformationIcon } from '@twilio-paste/icons/esm/InformationIcon'; +import { Text } from '@twilio-paste/text'; + +import { MultiselectCombobox } from '../src'; + +const getStyles = (element = 'MULTISELECT_COMBOBOX'): { [key: string]: PasteCustomCSS } => ({ + [`${element}_WRAPPER`]: { backgroundColor: 'colorBackgroundStrong', fontFamily: 'fontFamilyCode' }, + [`${element}`]: { backgroundColor: 'colorBackgroundPrimaryWeakest' }, + [`${element}_PILL_GROUP`]: { backgroundColor: 'colorBackgroundWarning' }, + [`${element}_PILL`]: { backgroundColor: 'colorBackgroundWarningWeakest' }, + [`${element}_ELEMENT`]: { cursor: 'pointer' }, + [`${element}_CHEVRON_WRAPPER`]: { backgroundColor: 'colorBackgroundBrandHighlightWeakest' }, + [`${element}_LISTBOX`]: { backgroundColor: 'colorBackgroundPrimaryWeaker' }, + [`${element}_LIST`]: { backgroundColor: 'colorBackgroundPrimaryWeak' }, + [`${element}_GROUPNAME`]: { fontFamily: 'fontFamilyText', cursor: 'help' }, + [`${element}_GROUPNAME_TEXT`]: { fontWeight: 'fontWeightLight' }, + [`${element}_LIST_ITEM`]: { backgroundColor: 'colorBackgroundPrimaryStrong' }, + [`${element}_LIST_ITEM_TEXT`]: { color: 'colorTextWeakest', fontWeight: 'fontWeightBold' }, + [`${element}_PREFIX`]: { backgroundColor: 'colorBackgroundRequired', borderRadius: 'borderRadius20' }, + [`${element}_SUFFIX`]: { backgroundColor: 'colorBackgroundSubaccount', borderRadius: 'borderRadiusCircle' }, }); const initCustomizationWrapper = (elementName?: string | undefined): RenderOptions['wrapper'] => - function Wrapper({children}) { + function Wrapper({ children }) { return ( {children} @@ -35,12 +35,12 @@ const initCustomizationWrapper = (elementName?: string | undefined): RenderOptio }; const items = [ - {letter: 'a', number: 1}, - {letter: 'a', number: 2}, - {letter: 'b', number: 3}, + { letter: 'a', number: 1 }, + { letter: 'a', number: 2 }, + { letter: 'b', number: 3 }, ]; -const MultiselectComboboxToTest = ({element = 'MULTISELECT_COMBOBOX'}): React.ReactElement => ( +const MultiselectComboboxToTest = ({ element = 'MULTISELECT_COMBOBOX' }): React.ReactElement => ( { it('should set the correct attributes on all MultiselectCombobox components', () => { - const {container, getByRole} = render(, {wrapper: initCustomizationWrapper()}); + const { container, getByRole } = render(, { wrapper: initCustomizationWrapper() }); expect(getByRole('textbox').dataset.pasteElement).toEqual('MULTISELECT_COMBOBOX_ELEMENT'); expect(container.querySelector('[data-paste-element="MULTISELECT_COMBOBOX"]')).toBeInTheDocument(); expect(container.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_WRAPPER"]')).toBeInTheDocument(); @@ -67,14 +67,14 @@ describe('MultiselectCombobox data-paste-element attributes', () => { expect(container.querySelectorAll(`[data-paste-element="MULTISELECT_COMBOBOX_PILL"]`).length).toEqual(2); expect( - container.querySelectorAll(`[data-paste-element="MULTISELECT_COMBOBOX_PILL"]`)[0].getAttribute('role') + container.querySelectorAll(`[data-paste-element="MULTISELECT_COMBOBOX_PILL"]`)[0].getAttribute('role'), ).toEqual('option'); - const dropdownlistbox = screen.getByRole('listbox', {name: 'Choose a letter:'}); + const dropdownlistbox = screen.getByRole('listbox', { name: 'Choose a letter:' }); expect(dropdownlistbox.querySelectorAll(`[data-paste-element="MULTISELECT_COMBOBOX_LIST_ITEM"]`).length).toEqual(3); expect( - dropdownlistbox.querySelectorAll(`[data-paste-element="MULTISELECT_COMBOBOX_LIST_ITEM"]`)[0].getAttribute('role') + dropdownlistbox.querySelectorAll(`[data-paste-element="MULTISELECT_COMBOBOX_LIST_ITEM"]`)[0].getAttribute('role'), ).toEqual('option'); const [pillgroupListbox, comboboxListbox] = screen.getAllByRole('listbox'); @@ -83,17 +83,17 @@ describe('MultiselectCombobox data-paste-element attributes', () => { expect(screen.getAllByRole('group')[0].getAttribute('data-paste-element')).toEqual('MULTISELECT_COMBOBOX_LIST'); expect(screen.getAllByRole('presentation')).toHaveLength(2); expect(screen.getAllByRole('presentation')[0].getAttribute('data-paste-element')).toEqual( - 'MULTISELECT_COMBOBOX_GROUPNAME' + 'MULTISELECT_COMBOBOX_GROUPNAME', ); expect(dropdownlistbox.querySelectorAll('[data-paste-element="MULTISELECT_COMBOBOX_LIST_ITEM_TEXT"]')).toHaveLength( - 3 + 3, ); expect(container.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_PREFIX"]')).toBeInTheDocument(); expect(container.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_SUFFIX"]')).toBeInTheDocument(); }); it('should set the correct attributes on all MultiselectCombobox components with custom element prop', () => { - const {container} = render(, {wrapper: initCustomizationWrapper()}); + const { container } = render(, { wrapper: initCustomizationWrapper() }); expect(container.querySelector('[data-paste-element="FOO"]')).toBeInTheDocument(); expect(container.querySelector('[data-paste-element="FOO_WRAPPER"]')).toBeInTheDocument(); expect(container.querySelector('[data-paste-element="FOO_ELEMENT"]')).toBeInTheDocument(); @@ -106,7 +106,7 @@ describe('MultiselectCombobox data-paste-element attributes', () => { expect(comboboxListbox.querySelectorAll(`[data-paste-element="FOO_LIST_ITEM"]`).length).toEqual(3); expect(comboboxListbox.querySelectorAll(`[data-paste-element="FOO_LIST_ITEM"]`)[0].getAttribute('role')).toEqual( - 'option' + 'option', ); expect(pillgroupListbox.getAttribute('data-paste-element')).toEqual('FOO_PILL_GROUP'); @@ -123,94 +123,96 @@ describe('MultiselectCombobox data-paste-element attributes', () => { describe('MultiselectCombobox customization', () => { it('should add styles to MultiselectCombobox', () => { - const {container} = render(, { + const { container } = render(, { wrapper: initCustomizationWrapper('MULTISELECT_COMBOBOX'), }); expect(container.querySelector('[data-paste-element="MULTISELECT_COMBOBOX"]')).toHaveStyleRule( 'background-color', - 'rgb(235, 244, 255)' + 'rgb(235, 244, 255)', ); expect(container.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_WRAPPER"]')).toHaveStyleRule( 'background-color', - 'rgb(225, 227, 234)' + 'rgb(225, 227, 234)', ); expect(container.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_ELEMENT"]')).toHaveStyleRule( 'cursor', - 'pointer' + 'pointer', ); expect(container.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_CHEVRON_WRAPPER"]')).toHaveStyleRule( 'background-color', - 'rgba(242, 47, 70, 0.1)' + 'rgba(242, 47, 70, 0.1)', ); - const dropdownlistbox = screen.getByRole('listbox', {name: 'Choose a letter:'}); + const dropdownlistbox = screen.getByRole('listbox', { name: 'Choose a letter:' }); expect(dropdownlistbox).toHaveStyleRule('background-color', 'rgb(204, 228, 255)'); expect(dropdownlistbox.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_LIST"]')).toHaveStyleRule( 'background-color', - 'rgb(153, 205, 255)' + 'rgb(153, 205, 255)', ); expect(dropdownlistbox.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_GROUPNAME"]')).toHaveStyleRule( 'cursor', - 'help' + 'help', ); expect(dropdownlistbox.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_LIST_ITEM"]')).toHaveStyleRule( 'background-color', - 'rgb(0, 20, 137)' + 'rgb(0, 20, 137)', ); expect(dropdownlistbox.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_LIST_ITEM_TEXT"]')).toHaveStyleRule( 'font-weight', - '700' + '700', ); expect(container.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_PREFIX"]')).toHaveStyleRule( 'background-color', - 'rgb(235, 86, 86)' + 'rgb(235, 86, 86)', ); expect(container.querySelector('[data-paste-element="MULTISELECT_COMBOBOX_SUFFIX"]')).toHaveStyleRule( 'background-color', - 'rgb(255, 241, 179)' + 'rgb(255, 241, 179)', ); }); it('should add styles to MultiselectCombobox with custom element attribute', () => { - const {container} = render(, {wrapper: initCustomizationWrapper('FOO')}); + const { container } = render(, { + wrapper: initCustomizationWrapper('FOO'), + }); expect(container.querySelector('[data-paste-element="FOO"]')).toHaveStyleRule( 'background-color', - 'rgb(235, 244, 255)' + 'rgb(235, 244, 255)', ); expect(container.querySelector('[data-paste-element="FOO_WRAPPER"]')).toHaveStyleRule( 'background-color', - 'rgb(225, 227, 234)' + 'rgb(225, 227, 234)', ); expect(container.querySelector('[data-paste-element="FOO_ELEMENT"]')).toHaveStyleRule('cursor', 'pointer'); expect(container.querySelector('[data-paste-element="FOO_CHEVRON_WRAPPER"]')).toHaveStyleRule( 'background-color', - 'rgba(242, 47, 70, 0.1)' + 'rgba(242, 47, 70, 0.1)', ); - const dropdownlistbox = screen.getByRole('listbox', {name: 'Choose a letter:'}); + const dropdownlistbox = screen.getByRole('listbox', { name: 'Choose a letter:' }); expect(dropdownlistbox).toHaveStyleRule('background-color', 'rgb(204, 228, 255)'); expect(dropdownlistbox.querySelector('[data-paste-element="FOO_LIST"]')).toHaveStyleRule( 'background-color', - 'rgb(153, 205, 255)' + 'rgb(153, 205, 255)', ); expect(dropdownlistbox.querySelector('[data-paste-element="FOO_GROUPNAME"]')).toHaveStyleRule('cursor', 'help'); expect(dropdownlistbox.querySelector('[data-paste-element="FOO_LIST_ITEM"]')).toHaveStyleRule( 'background-color', - 'rgb(0, 20, 137)' + 'rgb(0, 20, 137)', ); expect(dropdownlistbox.querySelector('[data-paste-element="FOO_LIST_ITEM_TEXT"]')).toHaveStyleRule( 'font-weight', - '700' + '700', ); expect(container.querySelector('[data-paste-element="FOO_PREFIX"]')).toHaveStyleRule( 'background-color', - 'rgb(235, 86, 86)' + 'rgb(235, 86, 86)', ); expect(container.querySelector('[data-paste-element="FOO_SUFFIX"]')).toHaveStyleRule( 'background-color', - 'rgb(255, 241, 179)' + 'rgb(255, 241, 179)', ); }); }); diff --git a/packages/paste-core/components/combobox/__tests__/virtualization.spec.tsx b/packages/paste-core/components/combobox/__tests__/virtualization.spec.tsx index f853d1a0a1..0ffd4957cd 100644 --- a/packages/paste-core/components/combobox/__tests__/virtualization.spec.tsx +++ b/packages/paste-core/components/combobox/__tests__/virtualization.spec.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import type {RenderOptions} from '@testing-library/react'; -import {matchers} from '@emotion/jest'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import type {useVirtual as UseVirtual, VirtualItem} from 'react-virtual/types'; +import { render, screen } from '@testing-library/react'; +import type { RenderOptions } from '@testing-library/react'; +import { matchers } from '@emotion/jest'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import type { useVirtual as UseVirtual, VirtualItem } from 'react-virtual/types'; -import {Combobox} from '../src'; +import { Combobox } from '../src'; const mockMeasureRef = jest.fn(); @@ -14,15 +14,15 @@ jest.mock('react-virtual', () => { * mocking this to verify that the measure refs are being invoked --> they are being used * need to test this because it is essential that the virtualization ref is attached to the correct element for the virtual listbox to render correctly */ - const {useVirtual} = jest.requireActual('react-virtual'); + const { useVirtual } = jest.requireActual('react-virtual'); return { useVirtual: (config: Parameters) => { - const {virtualItems, ...returnValue} = useVirtual(config); + const { virtualItems, ...returnValue } = useVirtual(config); return { ...returnValue, - virtualItems: virtualItems.map(({measureRef, ...virtualItem}: VirtualItem) => ({ + virtualItems: virtualItems.map(({ measureRef, ...virtualItem }: VirtualItem) => ({ ...virtualItem, measureRef: mockMeasureRef.mockImplementation((element) => measureRef(element)), })), @@ -33,7 +33,7 @@ jest.mock('react-virtual', () => { expect.extend(matchers); -const CustomizationWrapper: RenderOptions['wrapper'] = ({children}) => ( +const CustomizationWrapper: RenderOptions['wrapper'] = ({ children }) => ( {children} ); @@ -45,7 +45,7 @@ describe('Combobox - Virtualization', () => { wrapper: CustomizationWrapper, }); - const resizedLiElement = screen.getAllByRole('presentation', {hidden: true})[1]; + const resizedLiElement = screen.getAllByRole('presentation', { hidden: true })[1]; expect(resizedLiElement.getAttribute('style')).toEqual('margin: 0px; height: 200px;'); }); @@ -55,7 +55,7 @@ describe('Combobox - Virtualization', () => { wrapper: CustomizationWrapper, }); - const optionElements = screen.getAllByRole('option', {hidden: true}); + const optionElements = screen.getAllByRole('option', { hidden: true }); expect(optionElements.length).toEqual(5); @@ -120,17 +120,17 @@ describe('Combobox - Virtualization', () => { label} - itemToString={({label}) => label} + optionTemplate={({ label }) => label} + itemToString={({ label }) => label} labelText="Choose a letter:" initialIsOpen />, { wrapper: CustomizationWrapper, - } + }, ); - const resizedLiElement = screen.getAllByRole('presentation', {hidden: true})[1]; + const resizedLiElement = screen.getAllByRole('presentation', { hidden: true })[1]; expect(resizedLiElement.getAttribute('style')).toEqual('margin: 0px; height: 200px;'); }); @@ -139,17 +139,17 @@ describe('Combobox - Virtualization', () => { render( label} - itemToString={({label}) => label} + optionTemplate={({ label }) => label} + itemToString={({ label }) => label} labelText="Choose a letter:" initialIsOpen />, { wrapper: CustomizationWrapper, - } + }, ); - const optionElements = screen.getAllByRole('option', {hidden: true}); + const optionElements = screen.getAllByRole('option', { hidden: true }); expect(optionElements.length).toEqual(5); @@ -181,14 +181,14 @@ describe('Combobox - Virtualization', () => { label} - itemToString={({label}) => label} + optionTemplate={({ label }) => label} + itemToString={({ label }) => label} labelText="Choose a letter:" initialIsOpen />, { wrapper: CustomizationWrapper, - } + }, ); expect(mockMeasureRef).toHaveBeenCalled(); diff --git a/packages/paste-core/components/combobox/build.js b/packages/paste-core/components/combobox/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/combobox/build.js +++ b/packages/paste-core/components/combobox/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/combobox/src/ComboboxItems.tsx b/packages/paste-core/components/combobox/src/ComboboxItems.tsx index 895e668ea5..1122a2f94f 100644 --- a/packages/paste-core/components/combobox/src/ComboboxItems.tsx +++ b/packages/paste-core/components/combobox/src/ComboboxItems.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; -import type {VirtualItem} from 'react-virtual'; +import type { VirtualItem } from 'react-virtual'; import find from 'lodash/find'; -import {Box} from '@twilio-paste/box'; +import { Box } from '@twilio-paste/box'; -import {ComboboxListboxOption} from './styles/ComboboxListboxOption'; -import {ComboboxListboxGroup} from './styles/ComboboxListboxGroup'; -import {getIndexedItems, getGroupedItems} from './helpers'; -import type {ComboboxItemsProps} from './types'; +import { ComboboxListboxOption } from './styles/ComboboxListboxOption'; +import { ComboboxListboxGroup } from './styles/ComboboxListboxGroup'; +import { getIndexedItems, getGroupedItems } from './helpers'; +import type { ComboboxItemsProps } from './types'; const ComboboxItems: React.FC< - React.PropsWithChildren & {ref: React.Ref} + React.PropsWithChildren & { ref: React.Ref } > = React.memo( React.forwardRef( ( @@ -27,7 +27,7 @@ const ComboboxItems: React.FC< virtualItems, emptyState: EmptyState, }, - ref + ref, ) => { /* * Use option template if provided @@ -60,13 +60,13 @@ const ComboboxItems: React.FC< return ( -
  • - {virtualItems.map(({measureRef, index: virtualItemIndex, start}: VirtualItem) => { +
  • + {virtualItems.map(({ measureRef, index: virtualItemIndex, start }: VirtualItem) => { const item = templatizedItems[virtualItemIndex]; const disabled = disabledItems != null && disabledItems.includes(items[virtualItemIndex]); return ( - {groupedItems[groupedItemKey].map(({index, ...item}: Record) => { + {groupedItems[groupedItemKey].map(({ index, ...item }: Record) => { const disabled = disabledItems != null && find(disabledItems, item); return ( ); - } - ) + }, + ), ); ComboboxItems.displayName = 'ComboboxItems'; -export {ComboboxItems}; +export { ComboboxItems }; diff --git a/packages/paste-core/components/combobox/src/ListboxPositioner.tsx b/packages/paste-core/components/combobox/src/ListboxPositioner.tsx index dc1ac5055d..b9307f3579 100644 --- a/packages/paste-core/components/combobox/src/ListboxPositioner.tsx +++ b/packages/paste-core/components/combobox/src/ListboxPositioner.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {Box, type BoxStyleProps} from '@twilio-paste/box'; -import {useRect} from '@radix-ui/react-use-rect'; -import {useWindowSize} from '@twilio-paste/utils'; +import { Box, type BoxStyleProps } from '@twilio-paste/box'; +import { useRect } from '@radix-ui/react-use-rect'; +import { useWindowSize } from '@twilio-paste/utils'; interface ListBoxPositionerProps { children: React.ReactNode; @@ -9,8 +9,8 @@ interface ListBoxPositionerProps { dropdownBoxRef: React.RefObject; } -export const ListBoxPositioner: React.FC = ({inputBoxRef, dropdownBoxRef, ...props}) => { - const {height: windowHeight} = useWindowSize(); +export const ListBoxPositioner: React.FC = ({ inputBoxRef, dropdownBoxRef, ...props }) => { + const { height: windowHeight } = useWindowSize(); const inputBoxDimensions = useRect(inputBoxRef.current); const dropdownBoxDimensions = useRect(dropdownBoxRef.current); const dropdownBoxHeight = dropdownBoxDimensions?.height; diff --git a/packages/paste-core/components/combobox/src/helpers.tsx b/packages/paste-core/components/combobox/src/helpers.tsx index 15acaade3b..a6ced2785f 100644 --- a/packages/paste-core/components/combobox/src/helpers.tsx +++ b/packages/paste-core/components/combobox/src/helpers.tsx @@ -1,9 +1,9 @@ -import type {HelpTextVariants} from '@twilio-paste/help-text'; -import type {InputVariants} from '@twilio-paste/input'; +import type { HelpTextVariants } from '@twilio-paste/help-text'; +import type { InputVariants } from '@twilio-paste/input'; import groupBy from 'lodash/groupBy'; -import type {BoxStyleProps} from '@twilio-paste/box'; +import type { BoxStyleProps } from '@twilio-paste/box'; -import type {Item} from './types'; +import type { Item } from './types'; type IndexedItem = Item & { index: number; @@ -17,9 +17,9 @@ type IndexedItem = Item & { export const getIndexedItems = (items: Item[]): IndexedItem[] => { return items.map((item, index) => { if (typeof item === 'string') { - return {label: item, index}; + return { label: item, index }; } - return {...item, index}; + return { ...item, index }; }); }; diff --git a/packages/paste-core/components/combobox/src/index.tsx b/packages/paste-core/components/combobox/src/index.tsx index 56a01ec7c1..679481ef41 100644 --- a/packages/paste-core/components/combobox/src/index.tsx +++ b/packages/paste-core/components/combobox/src/index.tsx @@ -12,4 +12,4 @@ export * from './styles/ComboboxInputWrapper'; export * from './styles/ComboboxListbox'; export * from './styles/ComboboxListboxOption'; export * from './styles/ComboboxListboxGroup'; -export type {MultiselectComboboxProps, ComboboxProps} from './types'; +export type { MultiselectComboboxProps, ComboboxProps } from './types'; diff --git a/packages/paste-core/components/combobox/src/multiselect/GrowingInput.tsx b/packages/paste-core/components/combobox/src/multiselect/GrowingInput.tsx index 528857b928..aa244ef470 100644 --- a/packages/paste-core/components/combobox/src/multiselect/GrowingInput.tsx +++ b/packages/paste-core/components/combobox/src/multiselect/GrowingInput.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import type {BoxProps} from '@twilio-paste/box'; -import {Box} from '@twilio-paste/box'; -import {InputElement} from '@twilio-paste/input'; +import type { BoxProps } from '@twilio-paste/box'; +import { Box } from '@twilio-paste/box'; +import { InputElement } from '@twilio-paste/input'; interface GrowingInputProps { initialValue?: string; @@ -12,7 +12,7 @@ interface GrowingInputProps { } export const GrowingInput = React.forwardRef( - ({element = 'GROWING_INPUT', onChange, initialValue = '', value, ...props}, ref) => { + ({ element = 'GROWING_INPUT', onChange, initialValue = '', value, ...props }, ref) => { const [text, setText] = React.useState(value || initialValue); React.useEffect(() => { @@ -71,6 +71,6 @@ export const GrowingInput = React.forwardRef ); - } + }, ); GrowingInput.displayName = 'GrowingInput'; diff --git a/packages/paste-core/components/combobox/src/multiselect/MultiselectCombobox.tsx b/packages/paste-core/components/combobox/src/multiselect/MultiselectCombobox.tsx index 1e5c1d1b18..1d6bd3db87 100644 --- a/packages/paste-core/components/combobox/src/multiselect/MultiselectCombobox.tsx +++ b/packages/paste-core/components/combobox/src/multiselect/MultiselectCombobox.tsx @@ -1,25 +1,25 @@ import * as React from 'react'; -import {useVirtual} from 'react-virtual'; +import { useVirtual } from 'react-virtual'; import includes from 'lodash/includes'; -import {useWindowSize} from '@twilio-paste/utils'; -import {useUID} from '@twilio-paste/uid-library'; -import {ChevronDownIcon} from '@twilio-paste/icons/esm/ChevronDownIcon'; -import {Box} from '@twilio-paste/box'; -import {Label} from '@twilio-paste/label'; -import {HelpText} from '@twilio-paste/help-text'; -import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only'; -import {FormPillGroup, FormPill, useFormPillState} from '@twilio-paste/form-pill-group'; -import {useComboboxPrimitive} from '@twilio-paste/combobox-primitive'; -import {InputBox, InputChevronWrapper, getInputChevronIconColor} from '@twilio-paste/input-box'; -import {Portal} from '@twilio-paste/reakit-library'; +import { useWindowSize } from '@twilio-paste/utils'; +import { useUID } from '@twilio-paste/uid-library'; +import { ChevronDownIcon } from '@twilio-paste/icons/esm/ChevronDownIcon'; +import { Box } from '@twilio-paste/box'; +import { Label } from '@twilio-paste/label'; +import { HelpText } from '@twilio-paste/help-text'; +import { ScreenReaderOnly } from '@twilio-paste/screen-reader-only'; +import { FormPillGroup, FormPill, useFormPillState } from '@twilio-paste/form-pill-group'; +import { useComboboxPrimitive } from '@twilio-paste/combobox-primitive'; +import { InputBox, InputChevronWrapper, getInputChevronIconColor } from '@twilio-paste/input-box'; +import { Portal } from '@twilio-paste/reakit-library'; -import {GrowingInput} from './GrowingInput'; -import {extractPropsFromState} from './extractPropsFromState'; -import {ListBoxPositioner} from '../ListboxPositioner'; -import {ComboboxItems} from '../ComboboxItems'; -import {ComboboxListbox} from '../styles/ComboboxListbox'; -import type {MultiselectComboboxProps} from '../types'; -import {getHelpTextVariant} from '../helpers'; +import { GrowingInput } from './GrowingInput'; +import { extractPropsFromState } from './extractPropsFromState'; +import { ListBoxPositioner } from '../ListboxPositioner'; +import { ComboboxItems } from '../ComboboxItems'; +import { ComboboxListbox } from '../styles/ComboboxListbox'; +import type { MultiselectComboboxProps } from '../types'; +import { getHelpTextVariant } from '../helpers'; export const MultiselectCombobox = React.forwardRef( ( @@ -53,13 +53,13 @@ export const MultiselectCombobox = React.forwardRef { const a11yLabelId = useUID(); const helpTextId = useUID(); const pillState = useFormPillState(); const parentRef = React.useRef(null); - const {width} = useWindowSize(); + const { width } = useWindowSize(); // gets the dimensions of the inputBox to position the listbox const inputBoxRef = React.useRef(null); @@ -71,7 +71,7 @@ export const MultiselectCombobox = React.forwardRef) => { if (event.code === 'Enter' && required && selectedItems.length === 0) { @@ -264,7 +264,7 @@ export const MultiselectCombobox = React.forwardRef ); - } + }, ); MultiselectCombobox.displayName = 'MultiselectCombobox'; diff --git a/packages/paste-core/components/combobox/src/multiselect/extractPropsFromState.tsx b/packages/paste-core/components/combobox/src/multiselect/extractPropsFromState.tsx index 90ed16cc8c..1c6f8b68ea 100644 --- a/packages/paste-core/components/combobox/src/multiselect/extractPropsFromState.tsx +++ b/packages/paste-core/components/combobox/src/multiselect/extractPropsFromState.tsx @@ -1,8 +1,8 @@ -import {useMultiSelectPrimitive} from '@twilio-paste/combobox-primitive'; -import type {UseMultiSelectPrimitiveReturnValue} from '@twilio-paste/combobox-primitive'; +import { useMultiSelectPrimitive } from '@twilio-paste/combobox-primitive'; +import type { UseMultiSelectPrimitiveReturnValue } from '@twilio-paste/combobox-primitive'; import isEmpty from 'lodash/isEmpty'; -import type {Item, MultiselectComboboxProps} from '../types'; +import type { Item, MultiselectComboboxProps } from '../types'; interface DefaultStateProps { initialSelectedItems: MultiselectComboboxProps['initialSelectedItems']; diff --git a/packages/paste-core/components/combobox/src/singleselect/Combobox.tsx b/packages/paste-core/components/combobox/src/singleselect/Combobox.tsx index a8ed6bb817..11ce2705e2 100644 --- a/packages/paste-core/components/combobox/src/singleselect/Combobox.tsx +++ b/packages/paste-core/components/combobox/src/singleselect/Combobox.tsx @@ -1,24 +1,24 @@ import * as React from 'react'; -import {useVirtual} from 'react-virtual'; -import {useUID} from '@twilio-paste/uid-library'; -import {useWindowSize} from '@twilio-paste/utils'; -import {ChevronDownIcon} from '@twilio-paste/icons/esm/ChevronDownIcon'; -import {Box} from '@twilio-paste/box'; -import {InputBox, InputChevronWrapper, getInputChevronIconColor} from '@twilio-paste/input-box'; -import {Label} from '@twilio-paste/label'; -import {HelpText} from '@twilio-paste/help-text'; -import type {HelpTextVariants} from '@twilio-paste/help-text'; -import type {InputVariants} from '@twilio-paste/input'; -import {Portal} from '@twilio-paste/reakit-library'; +import { useVirtual } from 'react-virtual'; +import { useUID } from '@twilio-paste/uid-library'; +import { useWindowSize } from '@twilio-paste/utils'; +import { ChevronDownIcon } from '@twilio-paste/icons/esm/ChevronDownIcon'; +import { Box } from '@twilio-paste/box'; +import { InputBox, InputChevronWrapper, getInputChevronIconColor } from '@twilio-paste/input-box'; +import { Label } from '@twilio-paste/label'; +import { HelpText } from '@twilio-paste/help-text'; +import type { HelpTextVariants } from '@twilio-paste/help-text'; +import type { InputVariants } from '@twilio-paste/input'; +import { Portal } from '@twilio-paste/reakit-library'; -import {ComboboxInputSelect} from '../styles/ComboboxInputSelect'; -import {ComboboxInputWrapper} from '../styles/ComboboxInputWrapper'; -import {ComboboxListbox} from '../styles/ComboboxListbox'; -import {ComboboxItems} from '../ComboboxItems'; -import type {ComboboxProps} from '../types'; -import {extractPropsFromState} from './extractPropsFromState'; -import {ListBoxPositioner} from '../ListboxPositioner'; -import {visuallyHiddenStyles} from '../helpers'; +import { ComboboxInputSelect } from '../styles/ComboboxInputSelect'; +import { ComboboxInputWrapper } from '../styles/ComboboxInputWrapper'; +import { ComboboxListbox } from '../styles/ComboboxListbox'; +import { ComboboxItems } from '../ComboboxItems'; +import type { ComboboxProps } from '../types'; +import { extractPropsFromState } from './extractPropsFromState'; +import { ListBoxPositioner } from '../ListboxPositioner'; +import { visuallyHiddenStyles } from '../helpers'; const getHelpTextVariant = (variant: InputVariants, hasError: boolean | undefined): HelpTextVariants => { if (hasError && variant === 'inverse') { @@ -67,11 +67,11 @@ const Combobox = React.forwardRef( state, ...props }, - ref + ref, ) => { const parentRef = React.useRef(null); const helpTextId = useUID(); - const {width} = useWindowSize(); + const { width } = useWindowSize(); // gets the dimensions of the inputBox to position the listbox const inputBoxRef = React.useRef(null); @@ -114,7 +114,7 @@ const Combobox = React.forwardRef( isOpen === undefined ) { throw new Error( - '[Combobox]: One of getComboboxProps, getInputProps, getItemProps, getLabelProps, getMenuProps, getToggleButtonProps, highlightedIndex or isOpen is missing from the state object. Please make sure this is provided.' + '[Combobox]: One of getComboboxProps, getInputProps, getItemProps, getLabelProps, getMenuProps, getToggleButtonProps, highlightedIndex or isOpen is missing from the state object. Please make sure this is provided.', ); } @@ -140,12 +140,12 @@ const Combobox = React.forwardRef( rowVirtualizer.scrollToIndex(items.indexOf(internalSelectedItem)); } }, - [items, internalSelectedItem] + [items, internalSelectedItem], ); return ( - + @@ -159,12 +159,12 @@ const Combobox = React.forwardRef( variant={variant} ref={inputBoxRef} > - + event.preventDefault()} : undefined)} + {...getInputProps({ disabled, required, ref, ...props })} + {...(!autocomplete ? { onChange: (event: React.ChangeEvent) => event.preventDefault() } : undefined)} autocomplete={autocomplete} aria-describedby={helpText != null ? helpTextId : null} element={`${element}_ELEMENT`} @@ -182,7 +182,7 @@ const Combobox = React.forwardRef( - ); - } + }, ); Combobox.displayName = 'Combobox'; -export {Combobox}; +export { Combobox }; diff --git a/packages/paste-core/components/combobox/src/singleselect/extractPropsFromState.tsx b/packages/paste-core/components/combobox/src/singleselect/extractPropsFromState.tsx index 669a47f6c0..9bc294cf38 100644 --- a/packages/paste-core/components/combobox/src/singleselect/extractPropsFromState.tsx +++ b/packages/paste-core/components/combobox/src/singleselect/extractPropsFromState.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import {useComboboxPrimitive} from '@twilio-paste/combobox-primitive'; +import { useComboboxPrimitive } from '@twilio-paste/combobox-primitive'; import type { UseComboboxPrimitiveState, UseComboboxPrimitiveStateChange, @@ -8,7 +8,7 @@ import type { } from '@twilio-paste/combobox-primitive'; import isEmpty from 'lodash/isEmpty'; -import type {ComboboxProps} from '../types'; +import type { ComboboxProps } from '../types'; type DefaultStateProps = { onInputValueChange: ComboboxProps['onInputValueChange']; @@ -43,7 +43,7 @@ const getDefaultState = ({ }: DefaultStateProps): Partial> => { const stateReducer = ( state: UseComboboxPrimitiveState, - actionAndChanges: UseComboboxPrimitiveStateChangeOptions + actionAndChanges: UseComboboxPrimitiveStateChangeOptions, ): Partial> => { // If the item to be selected is disabled, return the current state without changes if (disabledItems?.includes(actionAndChanges.changes.selectedItem)) { @@ -63,25 +63,25 @@ const getDefaultState = ({ onHighlightedIndexChange(changes); } }, - [onHighlightedIndexChange] + [onHighlightedIndexChange], ), onInputValueChange, onIsOpenChange, onSelectedItemChange, - ...(itemToString != null && {itemToString}), - ...(initialIsOpen != null && {initialIsOpen}), + ...(itemToString != null && { itemToString }), + ...(initialIsOpen != null && { initialIsOpen }), // We remap inputValue to defaultInputValue because we want downshift to manage the state of controlled inputs - ...(inputValue != null && {defaultInputValue: inputValue}), - ...(selectedItem != null && {selectedItem}), - ...(getA11yStatusMessage != null && {getA11yStatusMessage}), - ...(getA11ySelectionMessage != null && {getA11ySelectionMessage}), + ...(inputValue != null && { defaultInputValue: inputValue }), + ...(selectedItem != null && { selectedItem }), + ...(getA11yStatusMessage != null && { getA11yStatusMessage }), + ...(getA11ySelectionMessage != null && { getA11ySelectionMessage }), }); }; export const extractPropsFromState = ({ state, ...props -}: DefaultStateProps & {state?: Partial>}): Partial< +}: DefaultStateProps & { state?: Partial> }): Partial< UseComboboxPrimitiveReturnValue > => { if (state != null && !isEmpty(state)) { diff --git a/packages/paste-core/components/combobox/src/styles/ComboboxInputSelect.tsx b/packages/paste-core/components/combobox/src/styles/ComboboxInputSelect.tsx index f0a5edab68..892a4a09f3 100644 --- a/packages/paste-core/components/combobox/src/styles/ComboboxInputSelect.tsx +++ b/packages/paste-core/components/combobox/src/styles/ComboboxInputSelect.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {InputElement} from '@twilio-paste/input'; +import { InputElement } from '@twilio-paste/input'; -import type {ComboboxProps} from '../types'; +import type { ComboboxProps } from '../types'; -const ComboboxInputSelect = React.forwardRef(({...props}, ref) => { +const ComboboxInputSelect = React.forwardRef(({ ...props }, ref) => { return ( (({ ComboboxInputSelect.displayName = 'ComboboxInputSelect'; -export {ComboboxInputSelect}; +export { ComboboxInputSelect }; diff --git a/packages/paste-core/components/combobox/src/styles/ComboboxInputWrapper.tsx b/packages/paste-core/components/combobox/src/styles/ComboboxInputWrapper.tsx index 1f4093aaa9..8be198667b 100644 --- a/packages/paste-core/components/combobox/src/styles/ComboboxInputWrapper.tsx +++ b/packages/paste-core/components/combobox/src/styles/ComboboxInputWrapper.tsx @@ -1,20 +1,20 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; export interface ComboboxInputWrapperProps { children: NonNullable; } const ComboboxInputWrapper = React.forwardRef( - ({children, ...props}, ref) => { + ({ children, ...props }, ref) => { return ( {children} ); - } + }, ); ComboboxInputWrapper.displayName = 'ComboboxInputWrapper'; -export {ComboboxInputWrapper}; +export { ComboboxInputWrapper }; diff --git a/packages/paste-core/components/combobox/src/styles/ComboboxListbox.tsx b/packages/paste-core/components/combobox/src/styles/ComboboxListbox.tsx index 42ad1b88bf..a430a21a0d 100644 --- a/packages/paste-core/components/combobox/src/styles/ComboboxListbox.tsx +++ b/packages/paste-core/components/combobox/src/styles/ComboboxListbox.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; export interface ComboboxListboxProps extends Pick { children: NonNullable; @@ -8,7 +8,7 @@ export interface ComboboxListboxProps extends Pick { } const ComboboxListbox = React.forwardRef( - ({children, element = 'COMBOBOX_LISTBOX', hidden, ...props}, ref) => { + ({ children, element = 'COMBOBOX_LISTBOX', hidden, ...props }, ref) => { // Unmount children when hidden if (hidden) { return ; @@ -45,9 +45,9 @@ const ComboboxListbox = React.forwardRef {children} ); - } + }, ); ComboboxListbox.displayName = 'ComboboxListbox'; -export {ComboboxListbox}; +export { ComboboxListbox }; diff --git a/packages/paste-core/components/combobox/src/styles/ComboboxListboxGroup.tsx b/packages/paste-core/components/combobox/src/styles/ComboboxListboxGroup.tsx index 0346bb8fa5..0641d4d029 100644 --- a/packages/paste-core/components/combobox/src/styles/ComboboxListboxGroup.tsx +++ b/packages/paste-core/components/combobox/src/styles/ComboboxListboxGroup.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import {Text} from '@twilio-paste/text'; +import { Box } from '@twilio-paste/box'; +import { Text } from '@twilio-paste/text'; -import type {ComboboxProps} from '../types'; +import type { ComboboxProps } from '../types'; export interface ComboboxListboxGroupProps extends Pick { children: NonNullable; @@ -10,7 +10,7 @@ export interface ComboboxListboxGroupProps extends Pick( - ({children, element = 'COMBOBOX', groupName, groupLabelTemplate}, ref) => { + ({ children, element = 'COMBOBOX', groupName, groupLabelTemplate }, ref) => { return ( ); - } + }, ); ComboboxListboxGroup.displayName = 'ComboboxListboxGroup'; -export {ComboboxListboxGroup}; +export { ComboboxListboxGroup }; diff --git a/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx b/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx index cab1c0ec67..0a20b270bc 100644 --- a/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx +++ b/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import {SelectedIcon} from '@twilio-paste/icons/esm/SelectedIcon'; -import type {BoxProps, BoxStyleProps} from '@twilio-paste/box'; -import {Text} from '@twilio-paste/text'; -import type {PositionOptions} from '@twilio-paste/style-props'; -import type {VirtualItem} from 'react-virtual'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import { SelectedIcon } from '@twilio-paste/icons/esm/SelectedIcon'; +import type { BoxProps, BoxStyleProps } from '@twilio-paste/box'; +import { Text } from '@twilio-paste/text'; +import type { PositionOptions } from '@twilio-paste/style-props'; +import type { VirtualItem } from 'react-virtual'; export interface ComboboxListboxOptionProps extends Pick { children: NonNullable; @@ -15,7 +15,7 @@ export interface ComboboxListboxOptionProps extends Pick { startHeight?: VirtualItem['start']; } -const VariantStyles: {[key in ComboboxListboxOptionProps['variant']]: BoxStyleProps} = { +const VariantStyles: { [key in ComboboxListboxOptionProps['variant']]: BoxStyleProps } = { groupOption: { paddingLeft: 'space90', paddingRight: 'space50', @@ -46,7 +46,7 @@ const ComboboxListboxOption = React.forwardRef { const virtualItemStyles = startHeight != null ? getVirtualStyles(startHeight) : {}; @@ -109,8 +109,8 @@ const ComboboxListboxOption = React.forwardRef ); - } + }, ); ComboboxListboxOption.displayName = 'ComboboxListboxOption'; -export {ComboboxListboxOption}; +export { ComboboxListboxOption }; diff --git a/packages/paste-core/components/combobox/src/types.ts b/packages/paste-core/components/combobox/src/types.ts index f8786d96eb..0872ab48ec 100644 --- a/packages/paste-core/components/combobox/src/types.ts +++ b/packages/paste-core/components/combobox/src/types.ts @@ -1,5 +1,5 @@ import type React from 'react'; -import type {BoxProps, BoxStyleProps} from '@twilio-paste/box'; +import type { BoxProps, BoxStyleProps } from '@twilio-paste/box'; import type { UseComboboxPrimitiveProps, UseComboboxPrimitiveState, @@ -7,8 +7,8 @@ import type { UseMultiSelectPrimitiveReturnValue, UseMultiSelectPrimitiveStateChange, } from '@twilio-paste/combobox-primitive'; -import type {InputVariants, InputProps} from '@twilio-paste/input'; -import type {VirtualItem} from 'react-virtual'; +import type { InputVariants, InputProps } from '@twilio-paste/input'; +import type { VirtualItem } from 'react-virtual'; export type { UseComboboxPrimitiveGetItemPropsOptions, diff --git a/packages/paste-core/components/combobox/stories/Combobox-customization.stories.tsx b/packages/paste-core/components/combobox/stories/Combobox-customization.stories.tsx index 7ffd1e5e83..d32dbfa225 100644 --- a/packages/paste-core/components/combobox/stories/Combobox-customization.stories.tsx +++ b/packages/paste-core/components/combobox/stories/Combobox-customization.stories.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {Stack} from '@twilio-paste/stack'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {Card} from '@twilio-paste/card'; -import {Text} from '@twilio-paste/text'; -import {InformationIcon} from '@twilio-paste/icons/esm/InformationIcon'; -import {useTheme} from '@twilio-paste/theme'; +import type { StoryFn } from '@storybook/react'; +import { Stack } from '@twilio-paste/stack'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { Card } from '@twilio-paste/card'; +import { Text } from '@twilio-paste/text'; +import { InformationIcon } from '@twilio-paste/icons/esm/InformationIcon'; +import { useTheme } from '@twilio-paste/theme'; -import {Combobox} from '../src'; +import { Combobox } from '../src'; const items = ['a', 'b', 'c']; @@ -17,16 +17,16 @@ interface GroupedItem { } const groupedItems = [ - {letter: 'a', number: 1}, - {letter: 'a', number: 2}, - {letter: 'b', number: 3}, - {letter: 'b', number: 4}, - {letter: 'b', number: 5}, - {letter: 'c', number: 6}, - {letter: 'd', number: 7}, + { letter: 'a', number: 1 }, + { letter: 'a', number: 2 }, + { letter: 'b', number: 3 }, + { letter: 'b', number: 4 }, + { letter: 'b', number: 5 }, + { letter: 'c', number: 6 }, + { letter: 'd', number: 7 }, ]; -const ShowCustomization: React.FC> = ({ +const ShowCustomization: React.FC> = ({ isTestEnvironment, children, }): React.ReactElement => { @@ -39,19 +39,19 @@ const ShowCustomization: React.FC {children} @@ -62,29 +62,29 @@ const ShowCustomization: React.FC - {React.cloneElement(children as React.ReactElement, {element: 'FOO'})} + {React.cloneElement(children as React.ReactElement, { element: 'FOO' })} ); }; -export const CustomizedCombobox: StoryFn = (_args, {parameters: {isTestEnvironment}}) => ( +export const CustomizedCombobox: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( @@ -92,7 +92,7 @@ export const CustomizedCombobox: StoryFn = (_args, {parameters: {isTestEnvironme CustomizedCombobox.storyName = 'Combobox - Default'; -export const CustomizedComboboxGroups: StoryFn = (_args, {parameters: {isTestEnvironment}}) => ( +export const CustomizedComboboxGroups: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( ( +export const CustomizedComboboxBeforeAndAfter: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( >( - template: (index?: number | undefined) => TemplateResult + template: (index?: number | undefined) => TemplateResult, ): TemplateResult[] { // eslint-disable-next-line unicorn/prefer-spread return Array.from(new Array(1000), (_empty, index) => template(index)); @@ -42,14 +42,14 @@ interface IconItems { iconLeft?: undefined; } const iconItems = [ - {label: 'Alert', iconRight: true}, - {label: 'Anchor'}, - {label: 'Button', iconLeft: true}, - {label: 'Card', iconRight: true}, - {label: 'Heading'}, - {label: 'List', iconRight: true}, - {label: 'Modal', iconLeft: true}, - {label: 'Paragraph', iconRight: true}, + { label: 'Alert', iconRight: true }, + { label: 'Anchor' }, + { label: 'Button', iconLeft: true }, + { label: 'Card', iconRight: true }, + { label: 'Heading' }, + { label: 'List', iconRight: true }, + { label: 'Modal', iconLeft: true }, + { label: 'Paragraph', iconRight: true }, ]; interface ObjectItem { @@ -58,33 +58,33 @@ interface ObjectItem { phone: string; } const objectItems = [ - {code: 'AD', label: 'Andorra', phone: '376'}, - {code: 'AE', label: 'United Arab Emirates', phone: '971'}, - {code: 'AF', label: 'Afghanistan', phone: '93'}, - {code: 'AG', label: 'Antigua and Barbuda', phone: '1-268'}, - {code: 'AI', label: 'Anguilla', phone: '1-264'}, - {code: 'AL', label: 'Albania', phone: '355'}, - {code: 'AM', label: 'Armenia', phone: '374'}, - {code: 'AO', label: 'Angola', phone: '244'}, - {code: 'AQ', label: 'Antarctica', phone: '672'}, - {code: 'AR', label: 'Argentina', phone: '54'}, - {code: 'AS', label: 'American Samoa', phone: '1-684'}, - {code: 'AT', label: 'Austria', phone: '44'}, - {code: 'BS', label: 'Bahamas', phone: '43'}, - {code: 'BH', label: 'Bahrain', phone: '48'}, - {code: 'BD', label: 'Bangladesh', phone: '50'}, - {code: 'BB', label: 'Barbados', phone: '52'}, - {code: 'BY', label: 'Belarus', phone: '112'}, - {code: 'BE', label: 'Belgium', phone: '56'}, - {code: 'BZ', label: 'Belize', phone: '84'}, - {code: 'BJ', label: 'Benin', phone: '204'}, - {code: 'BM', label: 'Bermuda', phone: '60'}, - {code: 'BT', label: 'Bhutan', phone: '64'}, - {code: 'BO', label: 'Bolivia', phone: '68'}, - {code: 'BW', label: 'Botswana', phone: '72'}, - {code: 'BR', label: 'Brazil', phone: '76'}, - {code: 'KH', label: 'Cambodia', phone: '116'}, - {code: 'CA', label: 'Canada', phone: '124'}, + { code: 'AD', label: 'Andorra', phone: '376' }, + { code: 'AE', label: 'United Arab Emirates', phone: '971' }, + { code: 'AF', label: 'Afghanistan', phone: '93' }, + { code: 'AG', label: 'Antigua and Barbuda', phone: '1-268' }, + { code: 'AI', label: 'Anguilla', phone: '1-264' }, + { code: 'AL', label: 'Albania', phone: '355' }, + { code: 'AM', label: 'Armenia', phone: '374' }, + { code: 'AO', label: 'Angola', phone: '244' }, + { code: 'AQ', label: 'Antarctica', phone: '672' }, + { code: 'AR', label: 'Argentina', phone: '54' }, + { code: 'AS', label: 'American Samoa', phone: '1-684' }, + { code: 'AT', label: 'Austria', phone: '44' }, + { code: 'BS', label: 'Bahamas', phone: '43' }, + { code: 'BH', label: 'Bahrain', phone: '48' }, + { code: 'BD', label: 'Bangladesh', phone: '50' }, + { code: 'BB', label: 'Barbados', phone: '52' }, + { code: 'BY', label: 'Belarus', phone: '112' }, + { code: 'BE', label: 'Belgium', phone: '56' }, + { code: 'BZ', label: 'Belize', phone: '84' }, + { code: 'BJ', label: 'Benin', phone: '204' }, + { code: 'BM', label: 'Bermuda', phone: '60' }, + { code: 'BT', label: 'Bhutan', phone: '64' }, + { code: 'BO', label: 'Bolivia', phone: '68' }, + { code: 'BW', label: 'Botswana', phone: '72' }, + { code: 'BR', label: 'Brazil', phone: '76' }, + { code: 'KH', label: 'Cambodia', phone: '116' }, + { code: 'CA', label: 'Canada', phone: '124' }, ]; interface GroupedItem { @@ -92,19 +92,19 @@ interface GroupedItem { label: string; } const groupedItems = [ - {group: 'Components', label: 'Alert'}, - {group: 'Components', label: 'Anchor'}, - {group: 'Components', label: 'Button'}, - {group: 'Components', label: 'Card'}, - {group: 'Components', label: 'Heading'}, - {group: 'Components', label: 'List'}, - {group: 'Components', label: 'Modal'}, - {group: 'Components', label: 'Paragraph'}, - {group: 'Primitives', label: 'Box'}, - {group: 'Primitives', label: 'Text'}, - {group: 'Primitives', label: 'Non-modal dialog'}, - {group: 'Layout', label: 'Grid'}, - {label: 'Design Tokens'}, + { group: 'Components', label: 'Alert' }, + { group: 'Components', label: 'Anchor' }, + { group: 'Components', label: 'Button' }, + { group: 'Components', label: 'Card' }, + { group: 'Components', label: 'Heading' }, + { group: 'Components', label: 'List' }, + { group: 'Components', label: 'Modal' }, + { group: 'Components', label: 'Paragraph' }, + { group: 'Primitives', label: 'Box' }, + { group: 'Primitives', label: 'Text' }, + { group: 'Primitives', label: 'Non-modal dialog' }, + { group: 'Layout', label: 'Grid' }, + { label: 'Design Tokens' }, ]; // eslint-disable-next-line import/no-default-export @@ -181,10 +181,10 @@ export const BottomOfScreen: StoryFn = () => { }; BottomOfScreen.storyName = 'Bottom of screen'; BottomOfScreen.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, }; -const ItemToString = ({name}: {name: string}): string => name; +const ItemToString = ({ name }: { name: string }): string => name; export const VirtualizedCombobox: StoryFn = () => { const itemsForVirtualCombobox = React.useMemo(() => createLargeArray((index) => (index as number).toString()), []); @@ -210,7 +210,7 @@ export const VirtualizedCombobox1: StoryFn = () => { name: `Item ${index as number}`, subtext: 'Virtualized combobox from Twilio Paste', })), - [] + [], ); return ( @@ -219,7 +219,7 @@ export const VirtualizedCombobox1: StoryFn = () => { initialIsOpen itemToString={ItemToString} items={itemsForVirtualCombobox} - optionTemplate={({name, subtext}: {name: string; subtext: string}): string => `${name} - ${subtext}`} + optionTemplate={({ name, subtext }: { name: string; subtext: string }): string => `${name} - ${subtext}`} labelText="Select a virtualized item" helpText="This large list is virtualized" /> @@ -236,7 +236,7 @@ export const VirtualizedCombobox2: StoryFn = () => { name: `Item ${index as number}`, subtext: 'Virtualized combobox from Twilio Paste', })), - [] + [], ); return ( @@ -244,7 +244,7 @@ export const VirtualizedCombobox2: StoryFn = () => { initialIsOpen items={itemsForVirtualCombobox} itemToString={ItemToString} - optionTemplate={({name, subtext}) => ( + optionTemplate={({ name, subtext }) => ( {name} @@ -299,7 +299,7 @@ export const ComboboxAutocomplete: StoryFn = () => { { + onInputValueChange={({ inputValue }) => { if (inputValue !== undefined) { setInputItems(items.filter((item) => item.toLowerCase().startsWith(inputValue.toLowerCase()))); } @@ -516,10 +516,10 @@ export const ComboboxObject: StoryFn = () => { {item.code} | {item.label} | {item.phone} )} - onInputValueChange={({inputValue}) => { + onInputValueChange={({ inputValue }) => { if (inputValue !== undefined) { setInputItems( - _.filter(objectItems, (item: ObjectItem) => item.label.toLowerCase().startsWith(inputValue.toLowerCase())) + _.filter(objectItems, (item: ObjectItem) => item.label.toLowerCase().startsWith(inputValue.toLowerCase())), ); } }} @@ -540,7 +540,7 @@ export const ComboboxOverflowLongValue: StoryFn = () => { helpText="This is the help text" labelText="Choose a component:" initialSelectedItem={inputItems[5]} - onInputValueChange={({inputValue}) => { + onInputValueChange={({ inputValue }) => { if (inputValue !== undefined) { setInputItems(items.filter((item) => item.toLowerCase().startsWith(inputValue.toLowerCase()))); } @@ -555,7 +555,7 @@ ComboboxOverflowLongValue.storyName = 'Combobox - overflow long value'; export const ComboboxControlled: StoryFn = () => { const [value, setValue] = React.useState('United Arab Emirates'); - const [selectedItem, setSelectedItem] = React.useState({code: 'AE', label: 'United Arab Emirates', phone: '971'}); + const [selectedItem, setSelectedItem] = React.useState({ code: 'AE', label: 'United Arab Emirates', phone: '971' }); const [inputItems, setInputItems] = React.useState(objectItems); return ( <> @@ -578,10 +578,12 @@ export const ComboboxControlled: StoryFn = () => { ); }} - onInputValueChange={({inputValue}) => { + onInputValueChange={({ inputValue }) => { if (inputValue !== undefined) { setInputItems( - _.filter(objectItems, (item: ObjectItem) => item.label.toLowerCase().startsWith(inputValue.toLowerCase())) + _.filter(objectItems, (item: ObjectItem) => + item.label.toLowerCase().startsWith(inputValue.toLowerCase()), + ), ); setValue(inputValue); } @@ -607,7 +609,7 @@ export const ComboboxControlledUsingState: StoryFn = () => { phone: '971', } as ObjectItem); const [inputItems, setInputItems] = React.useState(objectItems as ObjectItem[]); - const {reset, ...state} = useCombobox({ + const { reset, ...state } = useCombobox({ initialInputValue: value, items: inputItems, itemToString: (item) => (item ? item.label : ''), @@ -616,10 +618,10 @@ export const ComboboxControlledUsingState: StoryFn = () => { setSelectedItem(changes.selectedItem); } }, - onInputValueChange: ({inputValue}) => { + onInputValueChange: ({ inputValue }) => { if (inputValue !== undefined) { setInputItems( - _.filter(objectItems, (item: ObjectItem) => item.label.toLowerCase().startsWith(inputValue.toLowerCase())) + _.filter(objectItems, (item: ObjectItem) => item.label.toLowerCase().startsWith(inputValue.toLowerCase())), ); setValue(inputValue); } @@ -634,7 +636,7 @@ export const ComboboxControlledUsingState: StoryFn = () => { Selected item state: {JSON.stringify(selectedItem)} (item ? item.label : '')} @@ -738,10 +740,12 @@ export const ComboboxOptionGroupsAutocomplete: StoryFn = () => { labelText="Choose a component:" helpText="This is the help text" optionTemplate={(item: GroupedItem) =>
    {item.label}
    } - onInputValueChange={({inputValue}) => { + onInputValueChange={({ inputValue }) => { if (inputValue !== undefined) { setInputItems( - _.filter(groupedItems, (item: GroupedItem) => item.label.toLowerCase().startsWith(inputValue.toLowerCase())) + _.filter(groupedItems, (item: GroupedItem) => + item.label.toLowerCase().startsWith(inputValue.toLowerCase()), + ), ); } }} @@ -814,7 +818,7 @@ export const ComboboxEmptyState: StoryFn = () => { autocomplete items={inputItems} inputValue="test123" - onInputValueChange={({inputValue}) => { + onInputValueChange={({ inputValue }) => { if (inputValue !== undefined) { setInputItems(items.filter((item) => item.toLowerCase().startsWith(inputValue.toLowerCase()))); } diff --git a/packages/paste-core/components/combobox/stories/GrowingInput.stories.tsx b/packages/paste-core/components/combobox/stories/GrowingInput.stories.tsx index 342405c511..a04da98e3f 100644 --- a/packages/paste-core/components/combobox/stories/GrowingInput.stories.tsx +++ b/packages/paste-core/components/combobox/stories/GrowingInput.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {Box} from '@twilio-paste/box'; -import {Label} from '@twilio-paste/label'; -import {useUID} from '@twilio-paste/uid-library'; +import type { StoryFn } from '@storybook/react'; +import { Box } from '@twilio-paste/box'; +import { Label } from '@twilio-paste/label'; +import { useUID } from '@twilio-paste/uid-library'; -import {GrowingInput} from '../src/multiselect/GrowingInput'; +import { GrowingInput } from '../src/multiselect/GrowingInput'; export const GrowingInputDemo: StoryFn = () => { const id = useUID(); @@ -24,7 +24,7 @@ export const GrowingInputDemo: StoryFn = () => { GrowingInputDemo.storyName = 'GrowingInput'; GrowingInputDemo.parameters = { // Nothing to VRT. Story for developer experience - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, }; // eslint-disable-next-line import/no-default-export diff --git a/packages/paste-core/components/combobox/stories/MultiselectCombobox-customization.stories.tsx b/packages/paste-core/components/combobox/stories/MultiselectCombobox-customization.stories.tsx index 8592b7fcb3..eb3c9c3591 100644 --- a/packages/paste-core/components/combobox/stories/MultiselectCombobox-customization.stories.tsx +++ b/packages/paste-core/components/combobox/stories/MultiselectCombobox-customization.stories.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {Stack} from '@twilio-paste/stack'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {Card} from '@twilio-paste/card'; -import {Text} from '@twilio-paste/text'; -import {InformationIcon} from '@twilio-paste/icons/esm/InformationIcon'; -import {useTheme} from '@twilio-paste/theme'; +import type { StoryFn } from '@storybook/react'; +import { Stack } from '@twilio-paste/stack'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { Card } from '@twilio-paste/card'; +import { Text } from '@twilio-paste/text'; +import { InformationIcon } from '@twilio-paste/icons/esm/InformationIcon'; +import { useTheme } from '@twilio-paste/theme'; -import {MultiselectCombobox} from '../src'; +import { MultiselectCombobox } from '../src'; const items = ['a', 'b', 'c']; const initialSelectedItems = [items[0], items[1]]; @@ -18,17 +18,17 @@ interface GroupedItem { } const groupedItems = [ - {letter: 'a', number: 1}, - {letter: 'a', number: 2}, - {letter: 'b', number: 3}, - {letter: 'b', number: 4}, - {letter: 'b', number: 5}, - {letter: 'c', number: 6}, - {letter: 'd', number: 7}, + { letter: 'a', number: 1 }, + { letter: 'a', number: 2 }, + { letter: 'b', number: 3 }, + { letter: 'b', number: 4 }, + { letter: 'b', number: 5 }, + { letter: 'c', number: 6 }, + { letter: 'd', number: 7 }, ]; const initialSelectedGroupedItems = [groupedItems[0], groupedItems[1], groupedItems[2]]; -const ShowCustomization: React.FC> = ({ +const ShowCustomization: React.FC> = ({ isTestEnvironment, children, }): React.ReactElement => { @@ -45,19 +45,19 @@ const ShowCustomization: React.FC - {React.cloneElement(children as React.ReactElement, {element: 'FOO'})} + {React.cloneElement(children as React.ReactElement, { element: 'FOO' })} ); }; -export const CustomizedCombobox: StoryFn = (_args, {parameters: {isTestEnvironment}}) => ( +export const CustomizedCombobox: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( ( +export const CustomizedComboboxGroups: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( ( +export const CustomizedComboboxBeforeAndAfter: StoryFn = (_args, { parameters: { isTestEnvironment } }) => ( >( - template: (index?: number | undefined) => TemplateResult + template: (index?: number | undefined) => TemplateResult, ): TemplateResult[] { // eslint-disable-next-line unicorn/prefer-spread return Array.from(new Array(1000), (_empty, index) => template(index)); @@ -54,7 +54,7 @@ export const MultiselectComboboxBasic = (): React.ReactNode => { selectedItemsLabelText="Selected Paste components" helpText="Paste components are the building blocks of your product UI." items={filteredItems} - onInputValueChange={({inputValue: newInputValue = ''}) => { + onInputValueChange={({ inputValue: newInputValue = '' }) => { setInputValue(newInputValue); }} onSelectedItemsChange={(selectedItems) => { @@ -78,7 +78,7 @@ export const BottomOfScreen = (): React.ReactNode => { selectedItemsLabelText="Selected Paste components" helpText="Paste components are the building blocks of your product UI." items={filteredItems} - onInputValueChange={({inputValue: newInputValue = ''}) => { + onInputValueChange={({ inputValue: newInputValue = '' }) => { setInputValue(newInputValue); }} onSelectedItemsChange={(selectedItems) => { @@ -91,7 +91,7 @@ export const BottomOfScreen = (): React.ReactNode => { }; BottomOfScreen.storyName = 'Bottom of screen'; BottomOfScreen.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, }; /* @@ -109,7 +109,7 @@ export const MultiselectComboboxInverse = (): React.ReactNode => { selectedItemsLabelText="Selected Paste components" helpText="Paste components are the building blocks of your product UI." items={filteredItems} - onInputValueChange={({inputValue: newInputValue = ''}) => { + onInputValueChange={({ inputValue: newInputValue = '' }) => { setInputValue(newInputValue); }} onSelectedItemsChange={(selectedItems) => { @@ -137,7 +137,7 @@ export const MultiselectComboboxDisabled = (): React.ReactNode => { selectedItemsLabelText="Selected Paste components" helpText="Paste components are the building blocks of your product UI." items={filteredItems} - onInputValueChange={({inputValue: newInputValue = ''}) => { + onInputValueChange={({ inputValue: newInputValue = '' }) => { setInputValue(newInputValue); }} onSelectedItemsChange={(selectedItems) => { @@ -166,7 +166,7 @@ export const MultiselectComboboxDisabledInverseRequired = (): React.ReactNode => selectedItemsLabelText="Selected Paste components" helpText="Paste components are the building blocks of your product UI." items={filteredItems} - onInputValueChange={({inputValue: newInputValue = ''}) => { + onInputValueChange={({ inputValue: newInputValue = '' }) => { setInputValue(newInputValue); }} onSelectedItemsChange={(selectedItems) => { @@ -195,7 +195,7 @@ export const MultiselectComboboxError = (): React.ReactNode => { items={filteredItems} initialSelectedItems={['Alert', 'Anchor']} initialIsOpen - onInputValueChange={({inputValue: newInputValue = ''}) => { + onInputValueChange={({ inputValue: newInputValue = '' }) => { setInputValue(newInputValue); }} onSelectedItemsChange={(selectedItems) => { @@ -229,7 +229,7 @@ export const MultiselectComboboxRequired = (): React.ReactNode => { helpText="Paste components are the building blocks of your product UI." items={filteredItems} initialSelectedItems={['Alert', 'Anchor']} - onInputValueChange={({inputValue: newInputValue = ''}) => { + onInputValueChange={({ inputValue: newInputValue = '' }) => { setInputValue(newInputValue); }} onSelectedItemsChange={(selectedItems) => { @@ -256,7 +256,7 @@ export const MultiselectComboboxInitialSelectedItems = (): React.ReactNode => { helpText="Paste components are the building blocks of your product UI." items={filteredItems} initialSelectedItems={['Alert', 'Anchor']} - onInputValueChange={({inputValue: newInputValue = ''}) => { + onInputValueChange={({ inputValue: newInputValue = '' }) => { setInputValue(newInputValue); }} onSelectedItemsChange={(selectedItems) => { @@ -314,7 +314,7 @@ export const MultiselectComboboxBeforeAfter = (): React.ReactNode => { } - optionTemplate={({title, author}: Book) => ( + optionTemplate={({ title, author }: Book) => ( {title} @@ -322,7 +322,7 @@ export const MultiselectComboboxBeforeAfter = (): React.ReactNode => { )} - onInputValueChange={({inputValue: newInputValue = ''}) => { + onInputValueChange={({ inputValue: newInputValue = '' }) => { setInputValue(newInputValue); }} onSelectedItemsChange={(selectedItems) => { @@ -360,7 +360,7 @@ export const MultiselectComboboxMaxHeight = (): React.ReactNode => { } - optionTemplate={({title, author}: Book) => ( + optionTemplate={({ title, author }: Book) => ( {title} @@ -368,7 +368,7 @@ export const MultiselectComboboxMaxHeight = (): React.ReactNode => { )} - onInputValueChange={({inputValue: newInputValue = ''}) => { + onInputValueChange={({ inputValue: newInputValue = '' }) => { setInputValue(newInputValue); }} onSelectedItemsChange={(selectedItems) => { @@ -394,7 +394,7 @@ export const MultiselectComboboxOptionTemplate = (): React.ReactNode => { helpText="Reading books can be good for your mental health." items={filteredItems} itemToString={(item: Book) => (item ? `${item.title} - ${item.author}` : '')} - optionTemplate={({title, author}: Book) => ( + optionTemplate={({ title, author }: Book) => ( {title} @@ -402,7 +402,7 @@ export const MultiselectComboboxOptionTemplate = (): React.ReactNode => { )} - onInputValueChange={({inputValue: newInputValue = ''}) => { + onInputValueChange={({ inputValue: newInputValue = '' }) => { setInputValue(newInputValue); }} onSelectedItemsChange={(selectedItems) => { @@ -428,7 +428,7 @@ export const MultiselectComboboxOptionTemplatedisabled = (): React.ReactNode => helpText="Reading books can be good for your mental health." items={filteredItems} itemToString={(item: Book) => (item ? `${item.title} - ${item.author}` : '')} - optionTemplate={({title, author}: Book) => ( + optionTemplate={({ title, author }: Book) => ( {title} @@ -438,7 +438,7 @@ export const MultiselectComboboxOptionTemplatedisabled = (): React.ReactNode => )} disabledItems={filteredItems.slice(2, 8)} initialIsOpen - onInputValueChange={({inputValue: newInputValue = ''}) => { + onInputValueChange={({ inputValue: newInputValue = '' }) => { setInputValue(newInputValue); }} onSelectedItemsChange={(selectedItems) => { @@ -458,19 +458,19 @@ interface GroupedItem { label: string; } const groupedItems = [ - {group: 'Components', label: 'Alert'}, - {group: 'Components', label: 'Anchor'}, - {group: 'Components', label: 'Button'}, - {group: 'Components', label: 'Card'}, - {group: 'Components', label: 'Heading'}, - {group: 'Components', label: 'List'}, - {group: 'Components', label: 'Modal'}, - {group: 'Components', label: 'Paragraph'}, - {group: 'Primitives', label: 'Box'}, - {group: 'Primitives', label: 'Text'}, - {group: 'Primitives', label: 'Non-modal dialog'}, - {group: 'Layout', label: 'Grid'}, - {label: 'Design Tokens'}, + { group: 'Components', label: 'Alert' }, + { group: 'Components', label: 'Anchor' }, + { group: 'Components', label: 'Button' }, + { group: 'Components', label: 'Card' }, + { group: 'Components', label: 'Heading' }, + { group: 'Components', label: 'List' }, + { group: 'Components', label: 'Modal' }, + { group: 'Components', label: 'Paragraph' }, + { group: 'Primitives', label: 'Box' }, + { group: 'Primitives', label: 'Text' }, + { group: 'Primitives', label: 'Non-modal dialog' }, + { group: 'Layout', label: 'Grid' }, + { label: 'Design Tokens' }, ]; function getFilteredGroupedItems(inputValue: string): GroupedItem[] { @@ -487,7 +487,7 @@ export const MultiselectComboboxOptionGroups = (): React.ReactNode => { groupItemsBy="group" items={filteredItems} itemToString={(item: GroupedItem) => (item ? item.label : '')} - onInputValueChange={({inputValue: newInputValue = ''}) => { + onInputValueChange={({ inputValue: newInputValue = '' }) => { setInputValue(newInputValue); }} onSelectedItemsChange={(selectedItems) => { @@ -538,7 +538,7 @@ export const MultiselectComboboxEmptyState = (): React.ReactNode => { emptyState={SampleEmptyState} inputValue={inputValue} itemToString={(item: GroupedItem) => (item ? item.label : '')} - onInputValueChange={({inputValue: newInputValue = ''}) => { + onInputValueChange={({ inputValue: newInputValue = '' }) => { setInputValue(newInputValue); }} onSelectedItemsChange={(selectedItems) => { @@ -597,7 +597,7 @@ export const MultiselectComboboxStateHook = (): React.ReactNode => { emptyState={SampleEmptyState} inputValue={inputValue} itemToString={(item: GroupedItem) => (item ? item.label : '')} - onInputValueChange={({inputValue: newInputValue = ''}) => { + onInputValueChange={({ inputValue: newInputValue = '' }) => { setInputValue(newInputValue); }} onSelectedItemsChange={onSelectedItemsChange} @@ -653,7 +653,7 @@ export const MultiselectComboboxInModal: StoryFn = () => { selectedItemsLabelText="Selected Paste components" helpText="Paste components are the building blocks of your product UI." items={filteredItems} - onInputValueChange={({inputValue: newInputValue = ''}) => { + onInputValueChange={({ inputValue: newInputValue = '' }) => { setInputValue(newInputValue); }} onSelectedItemsChange={(selectedItems) => { diff --git a/packages/paste-core/components/data-grid/__tests__/customization.spec.tsx b/packages/paste-core/components/data-grid/__tests__/customization.spec.tsx index f82ad618a4..0798268b44 100644 --- a/packages/paste-core/components/data-grid/__tests__/customization.spec.tsx +++ b/packages/paste-core/components/data-grid/__tests__/customization.spec.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {render} from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { render } from '@testing-library/react'; -import {PlainDataGrid} from '../stories/components/PlainDataGrid'; -import {customElementStyles} from '../stories/components/CustomizableDataGrid'; +import { PlainDataGrid } from '../stories/components/PlainDataGrid'; +import { customElementStyles } from '../stories/components/CustomizableDataGrid'; describe('Data Grid Customization', () => { it('can be customized generically', () => { - const {getByTestId} = render( + const { getByTestId } = render( - + , ); const datagrid = getByTestId('data-grid'); const datagridHead = getByTestId('data-grid-head'); @@ -44,10 +44,10 @@ describe('Data Grid Customization', () => { }); it('can be customized uniquely', () => { - const {getByTestId} = render( + const { getByTestId } = render( - + , ); const datagrid = getByTestId('data-grid'); diff --git a/packages/paste-core/components/data-grid/__tests__/index.spec.tsx b/packages/paste-core/components/data-grid/__tests__/index.spec.tsx index 97d48c9cc9..9bc8e3d0ff 100644 --- a/packages/paste-core/components/data-grid/__tests__/index.spec.tsx +++ b/packages/paste-core/components/data-grid/__tests__/index.spec.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {Button} from '@twilio-paste/button'; -import {act, render, screen} from '@testing-library/react'; +import { Button } from '@twilio-paste/button'; +import { act, render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import {DataGridCell, DataGridHeaderSort, DataGridHeader} from '../src'; +import { DataGridCell, DataGridHeaderSort, DataGridHeader } from '../src'; import { ColumnSpanDataGrid, ComposableCellsDataGrid, @@ -18,7 +18,7 @@ describe('Data Grid', () => { describe('Semantics', () => { // eslint-disable-next-line jest/expect-expect it('uses table elements in the DOM', () => { - const {getByTestId} = render(); + const { getByTestId } = render(); const dataGrid = getByTestId('data-grid'); checkTagName(dataGrid, 'table'); @@ -38,7 +38,7 @@ describe('Data Grid', () => { }); it('has the correct aria label and role', () => { - const {getByTestId} = render(); + const { getByTestId } = render(); const dataGrid = getByTestId('data-grid'); expect(dataGrid.getAttribute('aria-label')).toBeDefined(); expect(dataGrid.getAttribute('role')).toBe('grid'); @@ -47,7 +47,7 @@ describe('Data Grid', () => { describe('Column Span', () => { it('applies colSpan attribute as expected', () => { - const {getByTestId} = render(); + const { getByTestId } = render(); const th = getByTestId('data-grid-header'); expect(th).toHaveAttribute('colspan', '5'); }); @@ -55,7 +55,7 @@ describe('Data Grid', () => { describe('Composable Cells functionality', () => { it('has proper keyboard navigation behavior', () => { - const {getByTestId} = render(); + const { getByTestId } = render(); const headerCell = getByTestId('header-1'); const firstRowFirstInputCell = getByTestId('input-0-0'); const firstInputCell = firstRowFirstInputCell?.parentElement?.parentElement; @@ -86,7 +86,7 @@ describe('Data Grid', () => { }); it('toggles actionable mode with [enter] and [escape] keys', () => { - const {getByTestId} = render(); + const { getByTestId } = render(); const wrapper = getByTestId('data-grid'); const headerCell = getByTestId('header-1'); const firstRowFirstInputCell = getByTestId('input-0-0'); @@ -113,7 +113,7 @@ describe('Data Grid', () => { }); it('should correctly tab through focusable elements in actionable mode', () => { - const {getByTestId} = render(); + const { getByTestId } = render(); const headerCell = getByTestId('header-1'); const firstRowFirstInputCell = getByTestId('input-0-0'); const firstRowSecondInputCell = getByTestId('input-0-1'); @@ -157,7 +157,7 @@ describe('Data Grid', () => { }); it('has one tab stop in navigational mode and remembers the last focus', async () => { - const {getByTestId} = render( + const { getByTestId } = render(
    -
    + , ); const beforeDataGridButton = getByTestId('before'); @@ -194,13 +194,13 @@ describe('Data Grid', () => { userEvent.tab(); expect(afterDataGridButton).toHaveFocus(); // Return into the DataGrid - userEvent.tab({shift: true}); + userEvent.tab({ shift: true }); expect(firstInputCell).toHaveFocus(); expect(firstInputCell.getAttribute('tabindex')).toBe('0'); }); it('should change the focus correctly when swapping to and from actionable mode', async () => { - const {getByTestId} = render(); + const { getByTestId } = render(); const headerCell = getByTestId('header-1'); const firstRowFirstInputCell = getByTestId('input-0-0'); @@ -225,7 +225,7 @@ describe('Data Grid', () => { describe('Paginated data grid', () => { it('returns the first focused cell to the first cell in the datatable after pagination', async () => { - const {getByTestId} = render(); + const { getByTestId } = render(); const firstThCell = getByTestId('first-cell'); const firstTdCell = getByTestId('cell-0-0'); @@ -244,9 +244,9 @@ describe('Data Grid', () => { userEvent.tab(); userEvent.keyboard('{enter}'); // Bring the focus back to the DataGrid - userEvent.tab({shift: true}); - userEvent.tab({shift: true}); - userEvent.tab({shift: true}); // 3rd one because left arrow appears + userEvent.tab({ shift: true }); + userEvent.tab({ shift: true }); + userEvent.tab({ shift: true }); // 3rd one because left arrow appears // The first cell is focused, rather than the last cell we were on expect(firstThCell).toHaveFocus(); @@ -255,7 +255,7 @@ describe('Data Grid', () => { describe('Sorting', () => { it('should correctly set aria-sort on TH when sorting is enabled', () => { - const {getByTestId} = render(); + const { getByTestId } = render(); const header = getByTestId('header'); const headerSort = getByTestId('header-sort'); @@ -276,37 +276,37 @@ describe('i18n', () => { describe('DataGridHeaderSort', () => { it('should have default ascending label', () => { render(); - const button = screen.getByRole('button', {name: 'Sort ascending'}); + const button = screen.getByRole('button', { name: 'Sort ascending' }); expect(button).toBeDefined(); }); it('should have default descending label', () => { render(); - const button = screen.getByRole('button', {name: 'Sort descending'}); + const button = screen.getByRole('button', { name: 'Sort descending' }); expect(button).toBeDefined(); }); it('should have default unsorted label', () => { render(); - const button = screen.getByRole('button', {name: 'Unsorted'}); + const button = screen.getByRole('button', { name: 'Unsorted' }); expect(button).toBeDefined(); }); it('should use i18nAscendingLabel for the ascending label', () => { render(); - const button = screen.getByRole('button', {name: 'Tri croissant'}); + const button = screen.getByRole('button', { name: 'Tri croissant' }); expect(button).toBeDefined(); }); it('should use i18nDescendingLabel for the descending label', () => { render(); - const button = screen.getByRole('button', {name: 'Tri décroissant'}); + const button = screen.getByRole('button', { name: 'Tri décroissant' }); expect(button).toBeDefined(); }); it('should use i18nUnsortedLabel for the unsorted label', () => { render(); - const button = screen.getByRole('button', {name: 'Non triés'}); + const button = screen.getByRole('button', { name: 'Non triés' }); expect(button).toBeDefined(); }); }); diff --git a/packages/paste-core/components/data-grid/__tests__/reakit-hasFocus.spec.tsx b/packages/paste-core/components/data-grid/__tests__/reakit-hasFocus.spec.tsx index 0c4b49c290..6f58466533 100644 --- a/packages/paste-core/components/data-grid/__tests__/reakit-hasFocus.spec.tsx +++ b/packages/paste-core/components/data-grid/__tests__/reakit-hasFocus.spec.tsx @@ -3,9 +3,9 @@ * https://github.com/reakit/reakit/blob/a211d94da9f3b683182568a56479b91afb1b85ae/packages/reakit-utils/src/__tests__/hasFocus-test.tsx */ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; -import {hasFocus} from '../src/utils/reakit/reakit-hasFocus'; +import { hasFocus } from '../src/utils/reakit/reakit-hasFocus'; const TestComponent = (): JSX.Element => { return ( diff --git a/packages/paste-core/components/data-grid/build.js b/packages/paste-core/components/data-grid/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/data-grid/build.js +++ b/packages/paste-core/components/data-grid/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/data-grid/src/DataGrid.tsx b/packages/paste-core/components/data-grid/src/DataGrid.tsx index ba6c64fe2c..792e0e6d56 100644 --- a/packages/paste-core/components/data-grid/src/DataGrid.tsx +++ b/packages/paste-core/components/data-grid/src/DataGrid.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {useUID} from '@twilio-paste/uid-library'; -import {useCompositeState, Composite} from '@twilio-paste/reakit-library'; -import {Table} from '@twilio-paste/table'; -import type {TableProps} from '@twilio-paste/table'; +import { useUID } from '@twilio-paste/uid-library'; +import { useCompositeState, Composite } from '@twilio-paste/reakit-library'; +import { Table } from '@twilio-paste/table'; +import type { TableProps } from '@twilio-paste/table'; -import {DataGridContext} from './DataGridContext'; +import { DataGridContext } from './DataGridContext'; import { ensureFocus, getActiveElement, @@ -27,10 +27,10 @@ export interface DataGridProps extends TableProps { * @param {string} element - customization element */ export const DataGrid = React.forwardRef( - ({element = 'DATA_GRID', striped = false, ...props}, ref) => { + ({ element = 'DATA_GRID', striped = false, ...props }, ref) => { const dataGridId = `data-grid-${useUID()}`; const lastFocusedElement = React.useRef(null); - const compositeState = useCompositeState({unstable_virtual: false}); + const compositeState = useCompositeState({ unstable_virtual: false }); const [actionable, setActionable] = React.useState(false); /** @@ -73,7 +73,7 @@ export const DataGrid = React.forwardRef( } } }, - [dataGridId] + [dataGridId], ); /** @@ -122,7 +122,7 @@ export const DataGrid = React.forwardRef( break; } }, - [actionable, dataGridId] + [actionable, dataGridId], ); const dataGridState = { @@ -150,7 +150,7 @@ export const DataGrid = React.forwardRef( /> ); - } + }, ); DataGrid.displayName = 'DataGrid'; diff --git a/packages/paste-core/components/data-grid/src/DataGridBody.tsx b/packages/paste-core/components/data-grid/src/DataGridBody.tsx index 54a09fa96e..118c57bfff 100644 --- a/packages/paste-core/components/data-grid/src/DataGridBody.tsx +++ b/packages/paste-core/components/data-grid/src/DataGridBody.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {TBody} from '@twilio-paste/table'; -import type {TBodyProps} from '@twilio-paste/table'; +import { TBody } from '@twilio-paste/table'; +import type { TBodyProps } from '@twilio-paste/table'; /** * DataGrid body wrapper component. @@ -8,8 +8,8 @@ import type {TBodyProps} from '@twilio-paste/table'; * @param {string} element - customization element */ export const DataGridBody = React.forwardRef( - ({element = 'DATA_GRID_BODY', ...props}, ref) => { + ({ element = 'DATA_GRID_BODY', ...props }, ref) => { return ; - } + }, ); DataGridBody.displayName = 'DataGridBody'; diff --git a/packages/paste-core/components/data-grid/src/DataGridCell.tsx b/packages/paste-core/components/data-grid/src/DataGridCell.tsx index d5229762d2..6c516bc282 100644 --- a/packages/paste-core/components/data-grid/src/DataGridCell.tsx +++ b/packages/paste-core/components/data-grid/src/DataGridCell.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import type {BoxElementProps} from '@twilio-paste/box'; -import {CompositeItem} from '@twilio-paste/reakit-library'; -import {useMutationObservable} from '@twilio-paste/utils'; +import type { BoxElementProps } from '@twilio-paste/box'; +import { CompositeItem } from '@twilio-paste/reakit-library'; +import { useMutationObservable } from '@twilio-paste/utils'; import isElement from 'lodash/isElement'; -import {DataGridContext} from './DataGridContext'; -import {updateTabIndexForActionable, isCell, ensureFocus} from './utils'; -import {Td} from './table/Td'; -import {Th} from './table/Th'; -import type {TdProps} from './table/Td'; +import { DataGridContext } from './DataGridContext'; +import { updateTabIndexForActionable, isCell, ensureFocus } from './utils'; +import { Td } from './table/Td'; +import { Th } from './table/Th'; +import type { TdProps } from './table/Td'; // This module can only be referenced with ECMAScript imports/exports by turning on the 'esModuleInterop' flag and referencing its default export @@ -71,7 +71,7 @@ export const DataGridCell: React.FC> } }); }, - [dataGridState.actionable] + [dataGridState.actionable], ); useMutationObservable(cellRef.current, onListMutation); diff --git a/packages/paste-core/components/data-grid/src/DataGridContext.tsx b/packages/paste-core/components/data-grid/src/DataGridContext.tsx index b76421b62c..74a60f1985 100644 --- a/packages/paste-core/components/data-grid/src/DataGridContext.tsx +++ b/packages/paste-core/components/data-grid/src/DataGridContext.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import type {CompositeStateReturn} from '@twilio-paste/reakit-library'; +import type { CompositeStateReturn } from '@twilio-paste/reakit-library'; interface DataGridState extends Partial { actionable: boolean; diff --git a/packages/paste-core/components/data-grid/src/DataGridFoot.tsx b/packages/paste-core/components/data-grid/src/DataGridFoot.tsx index fd16e0fba4..2d190107ea 100644 --- a/packages/paste-core/components/data-grid/src/DataGridFoot.tsx +++ b/packages/paste-core/components/data-grid/src/DataGridFoot.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {TFoot} from '@twilio-paste/table'; -import type {TFootProps} from '@twilio-paste/table'; +import { TFoot } from '@twilio-paste/table'; +import type { TFootProps } from '@twilio-paste/table'; /** * DataGrid foot wrapper component. @@ -8,9 +8,9 @@ import type {TFootProps} from '@twilio-paste/table'; * @param {string} element - customization element */ export const DataGridFoot = React.forwardRef( - ({element = 'DATA_GRID_FOOT', ...props}, ref) => { + ({ element = 'DATA_GRID_FOOT', ...props }, ref) => { return ; - } + }, ); DataGridFoot.displayName = 'DataGridFoot'; diff --git a/packages/paste-core/components/data-grid/src/DataGridHead.tsx b/packages/paste-core/components/data-grid/src/DataGridHead.tsx index cb2caf3e5a..9991790686 100644 --- a/packages/paste-core/components/data-grid/src/DataGridHead.tsx +++ b/packages/paste-core/components/data-grid/src/DataGridHead.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {THead} from '@twilio-paste/table'; -import type {THeadProps} from '@twilio-paste/table'; +import { THead } from '@twilio-paste/table'; +import type { THeadProps } from '@twilio-paste/table'; /** * DataGrid head wrapper component. @@ -8,9 +8,9 @@ import type {THeadProps} from '@twilio-paste/table'; * @param {string} element - customization element */ export const DataGridHead = React.forwardRef( - ({element = 'DATA_GRID_HEAD', ...props}, ref) => { + ({ element = 'DATA_GRID_HEAD', ...props }, ref) => { return ; - } + }, ); DataGridHead.displayName = 'DataGridHead'; diff --git a/packages/paste-core/components/data-grid/src/DataGridHeader.tsx b/packages/paste-core/components/data-grid/src/DataGridHeader.tsx index c85c06a8eb..645895222a 100644 --- a/packages/paste-core/components/data-grid/src/DataGridHeader.tsx +++ b/packages/paste-core/components/data-grid/src/DataGridHeader.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {DataGridCell} from './DataGridCell'; -import type {ThProps} from './table/Th'; +import { DataGridCell } from './DataGridCell'; +import type { ThProps } from './table/Th'; /** * DataGrid header (th) component. diff --git a/packages/paste-core/components/data-grid/src/DataGridHeaderSort.tsx b/packages/paste-core/components/data-grid/src/DataGridHeaderSort.tsx index cba35f0e13..0c93974967 100644 --- a/packages/paste-core/components/data-grid/src/DataGridHeaderSort.tsx +++ b/packages/paste-core/components/data-grid/src/DataGridHeaderSort.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import type {BoxProps} from '@twilio-paste/box'; -import {Button} from '@twilio-paste/button'; -import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only'; -import {ArrowDownIcon} from '@twilio-paste/icons/esm/ArrowDownIcon'; -import {ArrowUpIcon} from '@twilio-paste/icons/esm/ArrowUpIcon'; -import {UnsortedIcon} from '@twilio-paste/icons/esm/UnsortedIcon'; +import type { BoxProps } from '@twilio-paste/box'; +import { Button } from '@twilio-paste/button'; +import { ScreenReaderOnly } from '@twilio-paste/screen-reader-only'; +import { ArrowDownIcon } from '@twilio-paste/icons/esm/ArrowDownIcon'; +import { ArrowUpIcon } from '@twilio-paste/icons/esm/ArrowUpIcon'; +import { UnsortedIcon } from '@twilio-paste/icons/esm/UnsortedIcon'; export type SortDirection = 'ascending' | 'descending' | 'none'; diff --git a/packages/paste-core/components/data-grid/src/DataGridRow.tsx b/packages/paste-core/components/data-grid/src/DataGridRow.tsx index f3fa9dcdd4..5338d2475d 100644 --- a/packages/paste-core/components/data-grid/src/DataGridRow.tsx +++ b/packages/paste-core/components/data-grid/src/DataGridRow.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import type {BoxElementProps} from '@twilio-paste/box'; -import {CompositeGroup} from '@twilio-paste/reakit-library'; +import type { BoxElementProps } from '@twilio-paste/box'; +import { CompositeGroup } from '@twilio-paste/reakit-library'; -import {Tr} from './table/Tr'; -import {DataGridContext} from './DataGridContext'; +import { Tr } from './table/Tr'; +import { DataGridContext } from './DataGridContext'; export interface DataGridRowProps { children: NonNullable; @@ -18,11 +18,11 @@ export interface DataGridRowProps { * @param {string} element - customization element */ export const DataGridRow = React.forwardRef( - ({element = 'DATA_GRID_ROW', ...props}, ref) => { + ({ element = 'DATA_GRID_ROW', ...props }, ref) => { const dataGridState = React.useContext(DataGridContext); return ; - } + }, ); DataGridRow.displayName = 'DataGridRow'; diff --git a/packages/paste-core/components/data-grid/src/table/Td.tsx b/packages/paste-core/components/data-grid/src/table/Td.tsx index c181bce0e9..9e3543b84e 100644 --- a/packages/paste-core/components/data-grid/src/table/Td.tsx +++ b/packages/paste-core/components/data-grid/src/table/Td.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {TdProps as TableTdProps} from '@twilio-paste/table'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { TdProps as TableTdProps } from '@twilio-paste/table'; export interface TdProps extends TableTdProps { onClick?: React.MouseEventHandler; } export const Td = React.forwardRef( - ({textAlign = 'left', element = 'DATA_GRID_TD', ...props}, ref) => { + ({ textAlign = 'left', element = 'DATA_GRID_TD', ...props }, ref) => { return ( ( }} /> ); - } + }, ); Td.displayName = 'Td'; diff --git a/packages/paste-core/components/data-grid/src/table/Th.tsx b/packages/paste-core/components/data-grid/src/table/Th.tsx index a1a7ca3ab4..ac846caadc 100644 --- a/packages/paste-core/components/data-grid/src/table/Th.tsx +++ b/packages/paste-core/components/data-grid/src/table/Th.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {ThProps as TableThProps} from '@twilio-paste/table'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { ThProps as TableThProps } from '@twilio-paste/table'; export interface ThProps extends TableThProps { onClick?: React.MouseEventHandler; } export const Th = React.forwardRef( - ({width, textAlign = 'left', element = 'DATA_GRID_TH', ...props}, ref) => { + ({ width, textAlign = 'left', element = 'DATA_GRID_TH', ...props }, ref) => { return ( ( }} /> ); - } + }, ); Th.displayName = 'Th'; diff --git a/packages/paste-core/components/data-grid/src/table/Tr.tsx b/packages/paste-core/components/data-grid/src/table/Tr.tsx index 40ff0d911e..a8e57ab7bd 100644 --- a/packages/paste-core/components/data-grid/src/table/Tr.tsx +++ b/packages/paste-core/components/data-grid/src/table/Tr.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {styled, css} from '@twilio-paste/styling-library'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {TrProps as TableTrProps} from '@twilio-paste/table'; +import { styled, css } from '@twilio-paste/styling-library'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { TrProps as TableTrProps } from '@twilio-paste/table'; export interface TrProps extends TableTrProps { role: string; @@ -17,11 +17,11 @@ const StyledTr = styled.tr( '&[aria-selected=true] > th': { borderColor: 'colorBorderPrimaryWeaker', }, - }) + }), ); export const Tr = React.forwardRef( - ({element = 'DATA_GRID_TR', striped, ...props}, ref) => { + ({ element = 'DATA_GRID_TR', striped, ...props }, ref) => { return ( ( // @ts-expect-error: we don't have polymorphic box typings yet as={StyledTr} aria-selected={props.selected} - _even={{backgroundColor: striped ? 'colorBackgroundRowStriped' : 'transparent'}} + _even={{ backgroundColor: striped ? 'colorBackgroundRowStriped' : 'transparent' }} _selected={{ backgroundColor: 'colorBackgroundPrimaryWeakest', }} /> ); - } + }, ); Tr.displayName = 'Tr'; diff --git a/packages/paste-core/components/data-grid/src/utils/cell-management.ts b/packages/paste-core/components/data-grid/src/utils/cell-management.ts index 05afbaa36f..2af4c03d8e 100644 --- a/packages/paste-core/components/data-grid/src/utils/cell-management.ts +++ b/packages/paste-core/components/data-grid/src/utils/cell-management.ts @@ -1,4 +1,4 @@ -import {getActiveElement, getAllFocusableIn} from './reakit'; +import { getActiveElement, getAllFocusableIn } from './reakit'; /** * Sets the correct tabindex for elements based on whether actionable diff --git a/packages/paste-core/components/data-grid/src/utils/reakit/index.ts b/packages/paste-core/components/data-grid/src/utils/reakit/index.ts index 77a405180f..375b5c0514 100644 --- a/packages/paste-core/components/data-grid/src/utils/reakit/index.ts +++ b/packages/paste-core/components/data-grid/src/utils/reakit/index.ts @@ -3,6 +3,6 @@ * Search for "CHANGED:" to find modifications in files with the "-modded" suffix. * https://github.com/reakit/reakit/tree/master/packages/reakit-utils/src */ -export {getAllFocusableIn, getFirstFocusableIn} from './reakit-tabbable-modded'; -export {ensureFocus} from './reakit-ensureFocus'; -export {getActiveElement} from './reakit-getActiveElement-modded'; +export { getAllFocusableIn, getFirstFocusableIn } from './reakit-tabbable-modded'; +export { ensureFocus } from './reakit-ensureFocus'; +export { getActiveElement } from './reakit-getActiveElement-modded'; diff --git a/packages/paste-core/components/data-grid/src/utils/reakit/reakit-ensureFocus.ts b/packages/paste-core/components/data-grid/src/utils/reakit/reakit-ensureFocus.ts index a8ec711874..b602e0234d 100644 --- a/packages/paste-core/components/data-grid/src/utils/reakit/reakit-ensureFocus.ts +++ b/packages/paste-core/components/data-grid/src/utils/reakit/reakit-ensureFocus.ts @@ -1,4 +1,4 @@ -import {hasFocus} from './reakit-hasFocus'; +import { hasFocus } from './reakit-hasFocus'; type EnsureFocusOptions = FocusOptions & { isActive?: typeof hasFocus; @@ -27,15 +27,15 @@ type EnsureFocusOptions = FocusOptions & { */ export function ensureFocus( element: HTMLElement, - {preventScroll, isActive = hasFocus}: EnsureFocusOptions = {} + { preventScroll, isActive = hasFocus }: EnsureFocusOptions = {}, ): number { if (isActive(element)) return -1; - element.focus({preventScroll}); + element.focus({ preventScroll }); if (isActive(element)) return -1; return requestAnimationFrame(() => { - element.focus({preventScroll}); + element.focus({ preventScroll }); }); } diff --git a/packages/paste-core/components/data-grid/src/utils/reakit/reakit-getActiveElement-modded.ts b/packages/paste-core/components/data-grid/src/utils/reakit/reakit-getActiveElement-modded.ts index f0fff2b662..2a5b989642 100644 --- a/packages/paste-core/components/data-grid/src/utils/reakit/reakit-getActiveElement-modded.ts +++ b/packages/paste-core/components/data-grid/src/utils/reakit/reakit-getActiveElement-modded.ts @@ -1,11 +1,11 @@ -import {getDocument} from './reakit-getDocument'; +import { getDocument } from './reakit-getDocument'; /** * Returns `element.ownerDocument.activeElement`. */ // CHANGED: added return type export function getActiveElement(element?: Element | Document | null): Element | null { - const {activeElement} = getDocument(element); + const { activeElement } = getDocument(element); if (!activeElement?.nodeName) { /* * In IE11, activeElement might be an empty object if we're interacting diff --git a/packages/paste-core/components/data-grid/src/utils/reakit/reakit-hasFocus.ts b/packages/paste-core/components/data-grid/src/utils/reakit/reakit-hasFocus.ts index ae62fd1f70..34242b2967 100644 --- a/packages/paste-core/components/data-grid/src/utils/reakit/reakit-hasFocus.ts +++ b/packages/paste-core/components/data-grid/src/utils/reakit/reakit-hasFocus.ts @@ -1,4 +1,4 @@ -import {getActiveElement} from './reakit-getActiveElement-modded'; +import { getActiveElement } from './reakit-getActiveElement-modded'; /** * Checks if `element` has focus. Elements that are referenced by diff --git a/packages/paste-core/components/data-grid/src/utils/reakit/reakit-tabbable-modded.ts b/packages/paste-core/components/data-grid/src/utils/reakit/reakit-tabbable-modded.ts index c54327be24..67225dac1b 100644 --- a/packages/paste-core/components/data-grid/src/utils/reakit/reakit-tabbable-modded.ts +++ b/packages/paste-core/components/data-grid/src/utils/reakit/reakit-tabbable-modded.ts @@ -1,4 +1,4 @@ -import {matches} from './reakit-matches'; +import { matches } from './reakit-matches'; const selector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), " + diff --git a/packages/paste-core/components/data-grid/stories/components/ColumnSpanDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/ColumnSpanDataGrid.tsx index 5c71bab586..912aa53916 100644 --- a/packages/paste-core/components/data-grid/stories/components/ColumnSpanDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/ColumnSpanDataGrid.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import type {BoxProps} from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; -import {DataGrid, DataGridHead, DataGridRow, DataGridHeader, DataGridBody, DataGridCell} from '../../src'; -import {TableBodyData} from './constants'; +import { DataGrid, DataGridHead, DataGridRow, DataGridHeader, DataGridBody, DataGridCell } from '../../src'; +import { TableBodyData } from './constants'; -export const ColumnSpanDataGrid: React.FC> = ({ +export const ColumnSpanDataGrid: React.FC> = ({ element = 'DATA_GRID', }) => { return ( diff --git a/packages/paste-core/components/data-grid/stories/components/ComposableCellsDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/ComposableCellsDataGrid.tsx index 6d27e51b24..5102d549d6 100644 --- a/packages/paste-core/components/data-grid/stories/components/ComposableCellsDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/ComposableCellsDataGrid.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import {Input} from '@twilio-paste/input'; -import {Menu, useMenuState, MenuButton, MenuItem, MenuSeparator} from '@twilio-paste/menu'; -import {MoreIcon} from '@twilio-paste/icons/esm/MoreIcon'; -import {Select, Option} from '@twilio-paste/select'; +import { Box } from '@twilio-paste/box'; +import { Input } from '@twilio-paste/input'; +import { Menu, useMenuState, MenuButton, MenuItem, MenuSeparator } from '@twilio-paste/menu'; +import { MoreIcon } from '@twilio-paste/icons/esm/MoreIcon'; +import { Select, Option } from '@twilio-paste/select'; -import {DataGrid, DataGridHead, DataGridRow, DataGridHeader, DataGridBody, DataGridCell} from '../../src'; -import {TableHeaderData, TableBodyData} from './constants'; +import { DataGrid, DataGridHead, DataGridRow, DataGridHeader, DataGridBody, DataGridCell } from '../../src'; +import { TableHeaderData, TableBodyData } from './constants'; const ActionMenu = (): JSX.Element => { const menu = useMenuState(); diff --git a/packages/paste-core/components/data-grid/stories/components/CustomizableDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/CustomizableDataGrid.tsx index fd3c3c9422..c70ca69bd2 100644 --- a/packages/paste-core/components/data-grid/stories/components/CustomizableDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/CustomizableDataGrid.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; -import {Heading} from '@twilio-paste/heading'; -import {Stack} from '@twilio-paste/stack'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {useTheme} from '@twilio-paste/theme'; +import { Heading } from '@twilio-paste/heading'; +import { Stack } from '@twilio-paste/stack'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { useTheme } from '@twilio-paste/theme'; -import {PlainDataGrid} from './PlainDataGrid'; +import { PlainDataGrid } from './PlainDataGrid'; -export const customElementStyles = (prefix = 'DATA_GRID'): {[key: string]: any} => ({ +export const customElementStyles = (prefix = 'DATA_GRID'): { [key: string]: any } => ({ [prefix]: { fontSize: 'fontSize20', borderColor: 'colorBorderStrong', diff --git a/packages/paste-core/components/data-grid/stories/components/DataGridLayouts.tsx b/packages/paste-core/components/data-grid/stories/components/DataGridLayouts.tsx index 0d5bf08aec..0f58af41bf 100644 --- a/packages/paste-core/components/data-grid/stories/components/DataGridLayouts.tsx +++ b/packages/paste-core/components/data-grid/stories/components/DataGridLayouts.tsx @@ -1,13 +1,21 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import {Text} from '@twilio-paste/text'; -import {Stack} from '@twilio-paste/stack'; -import {Heading} from '@twilio-paste/heading'; -import {Anchor} from '@twilio-paste/anchor'; -import {Truncate} from '@twilio-paste/truncate'; -import {Button} from '@twilio-paste/button'; +import { Box } from '@twilio-paste/box'; +import { Text } from '@twilio-paste/text'; +import { Stack } from '@twilio-paste/stack'; +import { Heading } from '@twilio-paste/heading'; +import { Anchor } from '@twilio-paste/anchor'; +import { Truncate } from '@twilio-paste/truncate'; +import { Button } from '@twilio-paste/button'; -import {DataGrid, DataGridHead, DataGridRow, DataGridHeader, DataGridBody, DataGridCell, DataGridFoot} from '../../src'; +import { + DataGrid, + DataGridHead, + DataGridRow, + DataGridHeader, + DataGridBody, + DataGridCell, + DataGridFoot, +} from '../../src'; export const DataGridLayouts = (): React.ReactNode => { return ( diff --git a/packages/paste-core/components/data-grid/stories/components/I18nDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/I18nDataGrid.tsx index d2b03ea143..ab26748150 100644 --- a/packages/paste-core/components/data-grid/stories/components/I18nDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/I18nDataGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; +import { Box } from '@twilio-paste/box'; import { DataGrid, @@ -10,8 +10,8 @@ import { DataGridBody, DataGridCell, } from '../../src'; -import type {SortDirection} from '../../src'; -import {I18nTableHeaderData, I18nTableBodyData} from './constants'; +import type { SortDirection } from '../../src'; +import { I18nTableHeaderData, I18nTableBodyData } from './constants'; // Sorting function const simpleComparator = (a: string[], b: string[], ascending: boolean, columnId: number): number => { @@ -45,7 +45,7 @@ export const I18nDataGrid = (): React.ReactNode => { // Update the table data to be sorted correctly setSortedData( - I18nTableBodyData.sort((a, b) => simpleComparator(a, b, newSortedColumns[columnId] === 'ascending', columnId)) + I18nTableBodyData.sort((a, b) => simpleComparator(a, b, newSortedColumns[columnId] === 'ascending', columnId)), ); }; diff --git a/packages/paste-core/components/data-grid/stories/components/KitchenSinkDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/KitchenSinkDataGrid.tsx index 837f3d26af..3a3fc3694e 100644 --- a/packages/paste-core/components/data-grid/stories/components/KitchenSinkDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/KitchenSinkDataGrid.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import {Input} from '@twilio-paste/input'; -import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only'; -import {CheckboxGroup, Checkbox} from '@twilio-paste/checkbox'; -import {useUID, useUIDSeed} from '@twilio-paste/uid-library'; +import { Box } from '@twilio-paste/box'; +import { Input } from '@twilio-paste/input'; +import { ScreenReaderOnly } from '@twilio-paste/screen-reader-only'; +import { CheckboxGroup, Checkbox } from '@twilio-paste/checkbox'; +import { useUID, useUIDSeed } from '@twilio-paste/uid-library'; import { Pagination, PaginationItems, @@ -13,7 +13,7 @@ import { PaginationEllipsis, } from '@twilio-paste/pagination'; -import type {SortDirection} from '../../src'; +import type { SortDirection } from '../../src'; import { DataGrid, DataGridHead, @@ -23,7 +23,7 @@ import { DataGridBody, DataGridCell, } from '../../src'; -import {TableHeaderData, PaginatedTableBodyData} from './constants'; +import { TableHeaderData, PaginatedTableBodyData } from './constants'; // Sorting function const simpleComparator = (a: string[], b: string[], ascending: boolean, columnId: number): number => { @@ -46,7 +46,7 @@ const initialHeaderData = [...new Array(numColumns)].map((_, index) => { const initialBodyData = PaginatedTableBodyData.map((row) => [false, ...row]).sort( (a, b) => // @ts-expect-error won't be boolean - simpleComparator(a, b, true, 1) // passing 1 instead of 0 to skip checkbox column + simpleComparator(a, b, true, 1), // passing 1 instead of 0 to skip checkbox column ); const getRange = (start: number, end: number): number[] => { @@ -200,7 +200,7 @@ const CheckboxCell: React.FC> = ({ } return undefined; }, - [onClick, checkboxRef] + [onClick, checkboxRef], ); return ( @@ -257,8 +257,8 @@ export const KitchenSinkDataGrid = (): JSX.Element => { setSortedData( initialBodyData.sort((a, b) => // @ts-expect-error won't be boolean - simpleComparator(a, b, newSortedColumns[columnId] === 'ascending', columnId) - ) + simpleComparator(a, b, newSortedColumns[columnId] === 'ascending', columnId), + ), ); }; diff --git a/packages/paste-core/components/data-grid/stories/components/LoadingDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/LoadingDataGrid.tsx index e18389f683..3b12fb36e4 100644 --- a/packages/paste-core/components/data-grid/stories/components/LoadingDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/LoadingDataGrid.tsx @@ -1,8 +1,16 @@ import * as React from 'react'; -import {SkeletonLoader} from '@twilio-paste/skeleton-loader'; +import { SkeletonLoader } from '@twilio-paste/skeleton-loader'; -import {DataGrid, DataGridHead, DataGridRow, DataGridHeader, DataGridBody, DataGridCell, DataGridFoot} from '../../src'; -import {TableHeaderData, TableBodyData} from './constants'; +import { + DataGrid, + DataGridHead, + DataGridRow, + DataGridHeader, + DataGridBody, + DataGridCell, + DataGridFoot, +} from '../../src'; +import { TableHeaderData, TableBodyData } from './constants'; export const LoadingDataGrid = (): JSX.Element => { // Used for random looking column widths diff --git a/packages/paste-core/components/data-grid/stories/components/PaginatedDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/PaginatedDataGrid.tsx index 4c3e1e9a0c..530542b71f 100644 --- a/packages/paste-core/components/data-grid/stories/components/PaginatedDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/PaginatedDataGrid.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only'; -import {CheckboxGroup, Checkbox} from '@twilio-paste/checkbox'; -import {useUID, useUIDSeed} from '@twilio-paste/uid-library'; +import { Box } from '@twilio-paste/box'; +import { ScreenReaderOnly } from '@twilio-paste/screen-reader-only'; +import { CheckboxGroup, Checkbox } from '@twilio-paste/checkbox'; +import { useUID, useUIDSeed } from '@twilio-paste/uid-library'; import { Pagination, PaginationItems, @@ -12,8 +12,8 @@ import { PaginationEllipsis, } from '@twilio-paste/pagination'; -import {DataGrid, DataGridHead, DataGridRow, DataGridHeader, DataGridBody, DataGridCell} from '../../src'; -import {TableHeaderData, PaginatedTableBodyData} from './constants'; +import { DataGrid, DataGridHead, DataGridRow, DataGridHeader, DataGridBody, DataGridCell } from '../../src'; +import { TableHeaderData, PaginatedTableBodyData } from './constants'; const getRange = (start: number, end: number): number[] => { return [...new Array(end - start + 1)].map((_, index) => index + start); @@ -85,7 +85,7 @@ const DataGridPagination: React.FC { onPageChange(pageNumber); }, - [onPageChange] + [onPageChange], ); const paginationState = calculatePaginationState(currentPage, pageCount); @@ -169,7 +169,7 @@ const CheckboxCell: React.FC> = ({ return undefined; }, - [onClick, checkboxRef] + [onClick, checkboxRef], ); return ( diff --git a/packages/paste-core/components/data-grid/stories/components/PlainDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/PlainDataGrid.tsx index 1e2b635461..be0ccef6a0 100644 --- a/packages/paste-core/components/data-grid/stories/components/PlainDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/PlainDataGrid.tsx @@ -1,12 +1,20 @@ import * as React from 'react'; -import {Anchor} from '@twilio-paste/anchor'; -import type {BoxProps} from '@twilio-paste/box'; -import {Paragraph} from '@twilio-paste/paragraph'; +import { Anchor } from '@twilio-paste/anchor'; +import type { BoxProps } from '@twilio-paste/box'; +import { Paragraph } from '@twilio-paste/paragraph'; -import {DataGrid, DataGridHead, DataGridRow, DataGridHeader, DataGridBody, DataGridCell, DataGridFoot} from '../../src'; -import {TableHeaderData, TableBodyData} from './constants'; +import { + DataGrid, + DataGridHead, + DataGridRow, + DataGridHeader, + DataGridBody, + DataGridCell, + DataGridFoot, +} from '../../src'; +import { TableHeaderData, TableBodyData } from './constants'; -export const PlainDataGrid: React.FC> = ({ +export const PlainDataGrid: React.FC> = ({ element = 'DATA_GRID', }) => { /* eslint-disable react/no-array-index-key */ diff --git a/packages/paste-core/components/data-grid/stories/components/SelectableRowsDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/SelectableRowsDataGrid.tsx index c4d840b7d3..0ccd0d67f7 100644 --- a/packages/paste-core/components/data-grid/stories/components/SelectableRowsDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/SelectableRowsDataGrid.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only'; -import {CheckboxGroup, Checkbox} from '@twilio-paste/checkbox'; -import {useUIDSeed} from '@twilio-paste/uid-library'; +import { Box } from '@twilio-paste/box'; +import { ScreenReaderOnly } from '@twilio-paste/screen-reader-only'; +import { CheckboxGroup, Checkbox } from '@twilio-paste/checkbox'; +import { useUIDSeed } from '@twilio-paste/uid-library'; -import {DataGrid, DataGridHead, DataGridRow, DataGridHeader, DataGridBody, DataGridCell} from '../../src'; -import {TableHeaderData, TableBodyData} from './constants'; +import { DataGrid, DataGridHead, DataGridRow, DataGridHeader, DataGridBody, DataGridCell } from '../../src'; +import { TableHeaderData, TableBodyData } from './constants'; interface CheckboxCellProps { onClick: (checked: boolean) => void; @@ -40,7 +40,7 @@ const CheckboxCell: React.FC> = ({ return undefined; }, - [onClick, checkboxRef] + [onClick, checkboxRef], ); return ( diff --git a/packages/paste-core/components/data-grid/stories/components/SortableColumnsDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/SortableColumnsDataGrid.tsx index b2a81862fa..4d3565f0b5 100644 --- a/packages/paste-core/components/data-grid/stories/components/SortableColumnsDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/SortableColumnsDataGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; +import { Box } from '@twilio-paste/box'; import { DataGrid, @@ -11,8 +11,8 @@ import { DataGridCell, DataGridFoot, } from '../../src'; -import type {SortDirection} from '../../src'; -import {TableHeaderData, TableBodyData} from './constants'; +import type { SortDirection } from '../../src'; +import { TableHeaderData, TableBodyData } from './constants'; // Sorting function const simpleComparator = (a: string[], b: string[], ascending: boolean, columnId: number): number => { @@ -46,7 +46,7 @@ export const SortableColumnsDataGrid = (): JSX.Element => { // Update the table data to be sorted correctly setSortedData( - TableBodyData.sort((a, b) => simpleComparator(a, b, newSortedColumns[columnId] === 'ascending', columnId)) + TableBodyData.sort((a, b) => simpleComparator(a, b, newSortedColumns[columnId] === 'ascending', columnId)), ); }; diff --git a/packages/paste-core/components/data-grid/stories/components/StickyHeaderDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/StickyHeaderDataGrid.tsx index 2ea32c1235..4b2f3dd8c8 100644 --- a/packages/paste-core/components/data-grid/stories/components/StickyHeaderDataGrid.tsx +++ b/packages/paste-core/components/data-grid/stories/components/StickyHeaderDataGrid.tsx @@ -1,9 +1,17 @@ import * as React from 'react'; -import type {BoxProps} from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; -import {DataGrid, DataGridHead, DataGridRow, DataGridHeader, DataGridBody, DataGridCell, DataGridFoot} from '../../src'; +import { + DataGrid, + DataGridHead, + DataGridRow, + DataGridHeader, + DataGridBody, + DataGridCell, + DataGridFoot, +} from '../../src'; -export const StickyHeaderDataGrid: React.FC> = ({ +export const StickyHeaderDataGrid: React.FC> = ({ element = 'DATA_GRID', }) => { /* eslint-disable react/no-array-index-key */ diff --git a/packages/paste-core/components/data-grid/stories/customization.stories.tsx b/packages/paste-core/components/data-grid/stories/customization.stories.tsx index fa488433de..41b52a5a78 100644 --- a/packages/paste-core/components/data-grid/stories/customization.stories.tsx +++ b/packages/paste-core/components/data-grid/stories/customization.stories.tsx @@ -1,4 +1,4 @@ -export {CustomizableDataGrid} from './components/CustomizableDataGrid'; +export { CustomizableDataGrid } from './components/CustomizableDataGrid'; // eslint-disable-next-line import/no-default-export export default { diff --git a/packages/paste-core/components/data-grid/stories/index.stories.tsx b/packages/paste-core/components/data-grid/stories/index.stories.tsx index 08a935af77..ad3089e954 100644 --- a/packages/paste-core/components/data-grid/stories/index.stories.tsx +++ b/packages/paste-core/components/data-grid/stories/index.stories.tsx @@ -1,14 +1,14 @@ -export {PlainDataGrid} from './components/PlainDataGrid'; -export {ComposableCellsDataGrid} from './components/ComposableCellsDataGrid'; -export {LoadingDataGrid} from './components/LoadingDataGrid'; -export {SelectableRowsDataGrid} from './components/SelectableRowsDataGrid'; -export {PaginatedDataGrid} from './components/PaginatedDataGrid'; -export {SortableColumnsDataGrid} from './components/SortableColumnsDataGrid'; -export {KitchenSinkDataGrid} from './components/KitchenSinkDataGrid'; -export {I18nDataGrid} from './components/I18nDataGrid'; -export {DataGridLayouts} from './components/DataGridLayouts'; -export {ColumnSpanDataGrid} from './components/ColumnSpanDataGrid'; -export {StickyHeaderDataGrid} from './components/StickyHeaderDataGrid'; +export { PlainDataGrid } from './components/PlainDataGrid'; +export { ComposableCellsDataGrid } from './components/ComposableCellsDataGrid'; +export { LoadingDataGrid } from './components/LoadingDataGrid'; +export { SelectableRowsDataGrid } from './components/SelectableRowsDataGrid'; +export { PaginatedDataGrid } from './components/PaginatedDataGrid'; +export { SortableColumnsDataGrid } from './components/SortableColumnsDataGrid'; +export { KitchenSinkDataGrid } from './components/KitchenSinkDataGrid'; +export { I18nDataGrid } from './components/I18nDataGrid'; +export { DataGridLayouts } from './components/DataGridLayouts'; +export { ColumnSpanDataGrid } from './components/ColumnSpanDataGrid'; +export { StickyHeaderDataGrid } from './components/StickyHeaderDataGrid'; // eslint-disable-next-line import/no-default-export export default { diff --git a/packages/paste-core/components/date-picker/__tests__/index.spec.tsx b/packages/paste-core/components/date-picker/__tests__/index.spec.tsx index 489ce7485b..472479c1c5 100644 --- a/packages/paste-core/components/date-picker/__tests__/index.spec.tsx +++ b/packages/paste-core/components/date-picker/__tests__/index.spec.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {render, screen} from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { render, screen } from '@testing-library/react'; -import {formatReturnDate} from '../src'; +import { formatReturnDate } from '../src'; import { DefaultDatePicker, DisabledDatePicker, @@ -48,7 +48,7 @@ describe('DatePicker', () => { it('should set disabled correctly', () => { expect(InnerDatePicker.getAttribute('disabled')).toEqual(''); - expect(InnerDatePicker).toHaveStyleRule('-webkit-text-fill-color', 'colorTextWeaker', {target: ':disabled'}); + expect(InnerDatePicker).toHaveStyleRule('-webkit-text-fill-color', 'colorTextWeaker', { target: ':disabled' }); }); it('should set readOnly correctly', () => { @@ -89,28 +89,28 @@ describe('DatePicker', () => { 'data-testid': 'datepickerid', }; it('should add the element dom attibute', () => { - const {container} = render(); + const { container } = render(); expect(container.querySelector('[data-paste-element="DATEPICKER"]')).toBeInTheDocument(); expect(screen.getByTestId('datepickerid').getAttribute('data-paste-element')).toEqual('DATEPICKER_ELEMENT'); }); it('should add a custom element dom attibute', () => { - const {container} = render(); + const { container } = render(); expect(container.querySelector('[data-paste-element="CUSTOM_DATE"]')).toBeInTheDocument(); expect(screen.getByTestId('datepickerid').getAttribute('data-paste-element')).toEqual('CUSTOM_DATE_ELEMENT'); }); it('should add custom styles to the DatePicker Component', () => { - const {container} = render( + const { container } = render( - + , ); const renderedDatepicker = container.querySelector('[data-paste-element="DATEPICKER"]'); const renderedDatepickerElement = screen.getByTestId('datepickerid'); @@ -119,17 +119,17 @@ describe('DatePicker', () => { }); it('should add custom styles to the DatePicker Component variant', () => { - const {container} = render( + const { container } = render( - + , ); const renderedDatepicker = container.querySelector('[data-paste-element="DATEPICKER"]'); const renderedDatepickerElement = screen.getByTestId('datepickerid'); @@ -138,17 +138,17 @@ describe('DatePicker', () => { }); it('should add custom styles to a custom DatePicker Component', () => { - const {container} = render( + const { container } = render( - + , ); const renderedDatepicker = container.querySelector('[data-paste-element="CUSTOMDATE"]'); const renderedDatepickerElement = screen.getByTestId('datepickerid'); @@ -157,17 +157,17 @@ describe('DatePicker', () => { }); it('should add custom styles to a custom DatePicker Component variant', () => { - const {container} = render( + const { container } = render( - + , ); const renderedDatepicker = container.querySelector('[data-paste-element="CUSTOMDATE"]'); const renderedDatepickerElement = screen.getByTestId('datepickerid'); diff --git a/packages/paste-core/components/date-picker/build.js b/packages/paste-core/components/date-picker/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/date-picker/build.js +++ b/packages/paste-core/components/date-picker/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/date-picker/src/DatePicker.tsx b/packages/paste-core/components/date-picker/src/DatePicker.tsx index 3d0ab8ee93..c29300a995 100644 --- a/packages/paste-core/components/date-picker/src/DatePicker.tsx +++ b/packages/paste-core/components/date-picker/src/DatePicker.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import type {InputProps} from '@twilio-paste/input'; -import {Input} from '@twilio-paste/input'; +import type { InputProps } from '@twilio-paste/input'; +import { Input } from '@twilio-paste/input'; export type DatePickerProps = Omit; -const DatePicker = React.forwardRef(({element = 'DATEPICKER', ...props}, ref) => { +const DatePicker = React.forwardRef(({ element = 'DATEPICKER', ...props }, ref) => { return ; }); DatePicker.displayName = 'DatePicker'; -export {DatePicker}; +export { DatePicker }; diff --git a/packages/paste-core/components/date-picker/src/utils.ts b/packages/paste-core/components/date-picker/src/utils.ts index 1a9dd426a9..5f309c5d2d 100644 --- a/packages/paste-core/components/date-picker/src/utils.ts +++ b/packages/paste-core/components/date-picker/src/utils.ts @@ -1,4 +1,4 @@ -import {format} from 'date-fns'; +import { format } from 'date-fns'; // https://stackoverflow.com/questions/22061723/regex-date-validation-for-yyyy-mm-dd/22061800 const DATE_REGEX = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/; diff --git a/packages/paste-core/components/date-picker/stories/index.stories.tsx b/packages/paste-core/components/date-picker/stories/index.stories.tsx index 8dde99ed61..c3c4c38a93 100644 --- a/packages/paste-core/components/date-picker/stories/index.stories.tsx +++ b/packages/paste-core/components/date-picker/stories/index.stories.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {useTheme} from '@twilio-paste/theme'; -import {Anchor} from '@twilio-paste/anchor'; -import {Box} from '@twilio-paste/box'; -import {Label} from '@twilio-paste/label'; -import {HelpText} from '@twilio-paste/help-text'; -import {useUID, useUIDSeed} from '@twilio-paste/uid-library'; -import {Combobox} from '@twilio-paste/combobox'; -import {Stack} from '@twilio-paste/stack'; +import type { StoryFn } from '@storybook/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { useTheme } from '@twilio-paste/theme'; +import { Anchor } from '@twilio-paste/anchor'; +import { Box } from '@twilio-paste/box'; +import { Label } from '@twilio-paste/label'; +import { HelpText } from '@twilio-paste/help-text'; +import { useUID, useUIDSeed } from '@twilio-paste/uid-library'; +import { Combobox } from '@twilio-paste/combobox'; +import { Stack } from '@twilio-paste/stack'; -import {DatePicker, formatReturnDate} from '../src'; -import type {DatePickerProps} from '../src'; +import { DatePicker, formatReturnDate } from '../src'; +import type { DatePickerProps } from '../src'; export const DefaultDatePicker: React.FC> = (props) => { const uidDP = useUID(); @@ -215,7 +215,7 @@ export const OnChangeDatePicker: React.FC { + onInputValueChange={({ inputValue }) => { if (inputValue !== undefined) setDateFormat(inputValue); }} /> @@ -324,7 +324,7 @@ export const DatePickerWithMinAndMax: React.FC { +export const CustomizedDatePicker: StoryFn = (_args, { parameters: { isTestEnvironment }, props }) => { const activeTheme = useTheme(); const uidSeed = useUIDSeed(); return ( diff --git a/packages/paste-core/components/description-list/__tests__/index.spec.tsx b/packages/paste-core/components/description-list/__tests__/index.spec.tsx index 0089595477..63eb849df4 100644 --- a/packages/paste-core/components/description-list/__tests__/index.spec.tsx +++ b/packages/paste-core/components/description-list/__tests__/index.spec.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import {Theme} from '@twilio-paste/theme'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render, screen } from '@testing-library/react'; +import { Theme } from '@twilio-paste/theme'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {DescriptionList, DescriptionListSet, DescriptionListTerm, DescriptionListDetails} from '../src'; +import { DescriptionList, DescriptionListSet, DescriptionListTerm, DescriptionListDetails } from '../src'; const FONT_WEIGHT = 'font-weight'; const MARGIN_LEFT = 'margin-left'; @@ -31,7 +31,7 @@ describe('DescriptionList', () => { Three - + , ); const terms = screen.getAllByRole('term'); const details = screen.getAllByRole('definition'); @@ -72,7 +72,7 @@ describe('Customization', () => { 1 - + , ); expect(screen.getByText('A').closest('dl')?.dataset.pasteElement).toBe('DESCRIPTION_LIST'); expect(screen.getByText('A').closest('div')?.dataset.pasteElement).toBe('DESCRIPTION_LIST_SET'); @@ -89,7 +89,7 @@ describe('Customization', () => { 1 - + , ); expect(screen.getByText('A').closest('dl')?.dataset.pasteElement).toBe('FAZ'); expect(screen.getByText('A').closest('div')?.dataset.pasteElement).toBe('BAZ'); @@ -103,10 +103,10 @@ describe('Customization', () => { baseTheme="default" theme={TestTheme} elements={{ - DESCRIPTION_LIST: {color: 'colorTextDecorative40'}, - DESCRIPTION_LIST_SET: {backgroundColor: 'colorBackgroundDecorative30Weakest'}, - DESCRIPTION_LIST_TERM: {fontWeight: 'fontWeightBold'}, - DESCRIPTION_LIST_DETAILS: {marginLeft: 'space10'}, + DESCRIPTION_LIST: { color: 'colorTextDecorative40' }, + DESCRIPTION_LIST_SET: { backgroundColor: 'colorBackgroundDecorative30Weakest' }, + DESCRIPTION_LIST_TERM: { fontWeight: 'fontWeightBold' }, + DESCRIPTION_LIST_DETAILS: { marginLeft: 'space10' }, }} > @@ -115,7 +115,7 @@ describe('Customization', () => { 1 - + , ); expect(screen.getByText('A').closest('dl')).toHaveStyleRule(COLOR, 'rgb(109, 46, 209)'); expect(screen.getByText('A').closest('div')).toHaveStyleRule(BACKGROUND_COLOR, 'rgb(237, 253, 243)'); @@ -129,10 +129,10 @@ describe('Customization', () => { baseTheme="default" theme={TestTheme} elements={{ - FAZ: {color: 'colorTextDecorative40'}, - BAZ: {backgroundColor: 'colorBackgroundDecorative30Weakest'}, - FOO: {fontWeight: 'fontWeightBold'}, - BAR: {marginLeft: 'space10'}, + FAZ: { color: 'colorTextDecorative40' }, + BAZ: { backgroundColor: 'colorBackgroundDecorative30Weakest' }, + FOO: { fontWeight: 'fontWeightBold' }, + BAR: { marginLeft: 'space10' }, }} > @@ -141,7 +141,7 @@ describe('Customization', () => { 1 - + , ); expect(screen.getByText('A').closest('dl')).toHaveStyleRule(COLOR, 'rgb(109, 46, 209)'); expect(screen.getByText('A').closest('div')).toHaveStyleRule(BACKGROUND_COLOR, 'rgb(237, 253, 243)'); diff --git a/packages/paste-core/components/description-list/build.js b/packages/paste-core/components/description-list/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/description-list/build.js +++ b/packages/paste-core/components/description-list/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/description-list/src/DescriptionList.tsx b/packages/paste-core/components/description-list/src/DescriptionList.tsx index f1a7d37c2d..d4941d6a42 100644 --- a/packages/paste-core/components/description-list/src/DescriptionList.tsx +++ b/packages/paste-core/components/description-list/src/DescriptionList.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; export interface DescriptionListProps extends Omit, 'children'> { children?: React.ReactNode; @@ -8,15 +8,15 @@ export interface DescriptionListProps extends Omit( - ({element = 'DESCRIPTION_LIST', children, ...props}, ref) => { + ({ element = 'DESCRIPTION_LIST', children, ...props }, ref) => { return ( {children} ); - } + }, ); DescriptionList.displayName = 'DescriptionList'; -export {DescriptionList}; +export { DescriptionList }; diff --git a/packages/paste-core/components/description-list/src/DescriptionListDetails.tsx b/packages/paste-core/components/description-list/src/DescriptionListDetails.tsx index c7c0413c45..2c2b3621dd 100644 --- a/packages/paste-core/components/description-list/src/DescriptionListDetails.tsx +++ b/packages/paste-core/components/description-list/src/DescriptionListDetails.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; export interface DescriptionListDetailsProps extends Omit, 'children'> { children?: React.ReactNode; @@ -8,7 +8,7 @@ export interface DescriptionListDetailsProps extends Omit( - ({element = 'DESCRIPTION_LIST_DETAILS', children, ...props}, ref) => { + ({ element = 'DESCRIPTION_LIST_DETAILS', children, ...props }, ref) => { return ( ); - } + }, ); DescriptionListDetails.displayName = 'DescriptionListDetails'; -export {DescriptionListDetails}; +export { DescriptionListDetails }; diff --git a/packages/paste-core/components/description-list/src/DescriptionListSet.tsx b/packages/paste-core/components/description-list/src/DescriptionListSet.tsx index 0828b13270..0d7a1388a7 100644 --- a/packages/paste-core/components/description-list/src/DescriptionListSet.tsx +++ b/packages/paste-core/components/description-list/src/DescriptionListSet.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import {styled, css} from '@twilio-paste/styling-library'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import { styled, css } from '@twilio-paste/styling-library'; export const StyledDescriptionListSet = styled.div( css({ @@ -17,7 +17,7 @@ export const StyledDescriptionListSet = styled.div( '& > dt:not(:last-of-type)': { marginBottom: 'space10', }, - }) + }), ); export interface DescriptionSetListProps extends Omit, 'children'> { @@ -26,16 +26,16 @@ export interface DescriptionSetListProps extends Omit( - ({element = 'DESCRIPTION_LIST_SET', children, ...props}, ref) => { + ({ element = 'DESCRIPTION_LIST_SET', children, ...props }, ref) => { return ( // @ts-expect-error Use Box as styled div to apply complex css to the child terms and details {children} ); - } + }, ); DescriptionListSet.displayName = 'DescriptionListSet'; -export {DescriptionListSet}; +export { DescriptionListSet }; diff --git a/packages/paste-core/components/description-list/src/DescriptionListTerm.tsx b/packages/paste-core/components/description-list/src/DescriptionListTerm.tsx index ec9c4bac18..1517f752b7 100644 --- a/packages/paste-core/components/description-list/src/DescriptionListTerm.tsx +++ b/packages/paste-core/components/description-list/src/DescriptionListTerm.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; export interface DescriptionListTermProps extends Omit, 'children'> { children?: React.ReactNode; @@ -8,7 +8,7 @@ export interface DescriptionListTermProps extends Omit( - ({element = 'DESCRIPTION_LIST_TERM', children, ...props}, ref) => { + ({ element = 'DESCRIPTION_LIST_TERM', children, ...props }, ref) => { return ( ); - } + }, ); DescriptionListTerm.displayName = 'DescriptionListTerm'; -export {DescriptionListTerm}; +export { DescriptionListTerm }; diff --git a/packages/paste-core/components/description-list/stories/index.stories.tsx b/packages/paste-core/components/description-list/stories/index.stories.tsx index 59309c7c54..e532407a30 100644 --- a/packages/paste-core/components/description-list/stories/index.stories.tsx +++ b/packages/paste-core/components/description-list/stories/index.stories.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {Box} from '@twilio-paste/box'; -import {useTheme} from '@twilio-paste/theme'; -import {ProcessSuccessIcon} from '@twilio-paste/icons/esm/ProcessSuccessIcon'; -import {Text} from '@twilio-paste/text'; +import type { StoryFn } from '@storybook/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { Box } from '@twilio-paste/box'; +import { useTheme } from '@twilio-paste/theme'; +import { ProcessSuccessIcon } from '@twilio-paste/icons/esm/ProcessSuccessIcon'; +import { Text } from '@twilio-paste/text'; -import {DescriptionList, DescriptionListSet, DescriptionListTerm, DescriptionListDetails} from '../src'; +import { DescriptionList, DescriptionListSet, DescriptionListTerm, DescriptionListDetails } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -143,10 +143,10 @@ export const Customized: StoryFn = () => { diff --git a/packages/paste-core/components/detail-text/__tests__/index.spec.tsx b/packages/paste-core/components/detail-text/__tests__/index.spec.tsx index 774fc40b34..662aeee182 100644 --- a/packages/paste-core/components/detail-text/__tests__/index.spec.tsx +++ b/packages/paste-core/components/detail-text/__tests__/index.spec.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render, screen } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {DetailText} from '../src'; +import { DetailText } from '../src'; describe('DetailText', () => { it('should render', () => { @@ -26,7 +26,7 @@ describe('DetailText', () => { render( test - + , ); expect(screen.getByTestId('detail-text').dataset.pasteElement).toEqual('MY_DETAIL_TEXT'); @@ -44,7 +44,7 @@ describe('DetailText', () => { }} > test - + , ); expect(screen.getByTestId('detail-text')).toHaveStyleRule('color', 'rgb(109, 46, 209)'); }); @@ -63,7 +63,7 @@ describe('DetailText', () => { test - + , ); expect(screen.getByTestId('detail-text')).toHaveStyleRule('color', 'rgb(109, 46, 209)'); diff --git a/packages/paste-core/components/detail-text/build.js b/packages/paste-core/components/detail-text/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/detail-text/build.js +++ b/packages/paste-core/components/detail-text/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/detail-text/src/index.tsx b/packages/paste-core/components/detail-text/src/index.tsx index 13b80f388e..756a44ff65 100644 --- a/packages/paste-core/components/detail-text/src/index.tsx +++ b/packages/paste-core/components/detail-text/src/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; export interface DetailTextProps extends Omit, 'children'> { children?: React.ReactNode; @@ -10,7 +10,7 @@ export interface DetailTextProps extends Omit } export const DetailText = React.forwardRef( - ({element = 'DETAIL_TEXT', as = 'div', children, marginTop = 'space30', ...props}, ref) => { + ({ element = 'DETAIL_TEXT', as = 'div', children, marginTop = 'space30', ...props }, ref) => { return ( ( {children} ); - } + }, ); DetailText.displayName = 'DetailText'; diff --git a/packages/paste-core/components/detail-text/stories/index.stories.tsx b/packages/paste-core/components/detail-text/stories/index.stories.tsx index 4f7d043133..5a2ceea83f 100644 --- a/packages/paste-core/components/detail-text/stories/index.stories.tsx +++ b/packages/paste-core/components/detail-text/stories/index.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {Box} from '@twilio-paste/box'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {useTheme} from '@twilio-paste/theme'; +import type { StoryFn } from '@storybook/react'; +import { Box } from '@twilio-paste/box'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { useTheme } from '@twilio-paste/theme'; -import {DetailText} from '../src'; +import { DetailText } from '../src'; // eslint-disable-next-line import/no-default-export export default { diff --git a/packages/paste-core/components/disclosure/__tests__/disclosure.test.tsx b/packages/paste-core/components/disclosure/__tests__/disclosure.test.tsx index 3b0efb7c07..b7ea05ae0a 100644 --- a/packages/paste-core/components/disclosure/__tests__/disclosure.test.tsx +++ b/packages/paste-core/components/disclosure/__tests__/disclosure.test.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import {render, screen, waitFor} from '@testing-library/react'; +import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import {Theme} from '@twilio-paste/theme'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { Theme } from '@twilio-paste/theme'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {Disclosure, DisclosureContent, DisclosureHeading, useDisclosureState} from '../src'; -import type {DisclosureHeadingProps, DisclosureProps} from '../src'; +import { Disclosure, DisclosureContent, DisclosureHeading, useDisclosureState } from '../src'; +import type { DisclosureHeadingProps, DisclosureProps } from '../src'; const MockDisclosure: React.FC< React.PropsWithChildren<{ @@ -13,7 +13,7 @@ const MockDisclosure: React.FC< disabled?: DisclosureHeadingProps['disabled']; focusable?: DisclosureHeadingProps['focusable']; }> -> = ({visible, disabled, focusable}) => { +> = ({ visible, disabled, focusable }) => { return ( @@ -131,7 +131,7 @@ describe('Disclosure', () => { render( - + , ); const renderedDisclosureHeading = screen.getByTestId('disclosure-heading'); @@ -147,7 +147,7 @@ describe('Disclosure', () => { render( - + , ); const renderedDisclosureHeading = screen.getByTestId('disclosure-heading'); @@ -165,14 +165,14 @@ describe('Disclosure', () => { baseTheme="default" theme={TestTheme} elements={{ - DISCLOSURE: {padding: 'space100'}, - DISCLOSURE_CONTENT: {color: 'colorTextErrorStrong'}, - DISCLOSURE_HEADING: {color: 'colorTextWeakest', backgroundColor: 'colorBackgroundDestructiveStrong'}, - DISCLOSURE_HEADING_ICON: {color: 'colorTextIconError'}, + DISCLOSURE: { padding: 'space100' }, + DISCLOSURE_CONTENT: { color: 'colorTextErrorStrong' }, + DISCLOSURE_HEADING: { color: 'colorTextWeakest', backgroundColor: 'colorBackgroundDestructiveStrong' }, + DISCLOSURE_HEADING_ICON: { color: 'colorTextIconError' }, }} > - + , ); const renderedDisclosureHeading = screen.getByTestId('disclosure-heading'); @@ -193,14 +193,14 @@ describe('Disclosure', () => { baseTheme="default" theme={TestTheme} elements={{ - MY_DISCLOSURE: {padding: 'space100'}, - MY_DISCLOSURE_CONTENT: {color: 'colorTextErrorStrong'}, - MY_DISCLOSURE_HEADING: {color: 'colorTextWeakest', backgroundColor: 'colorBackgroundDestructiveStrong'}, - MY_DISCLOSURE_HEADING_ICON: {color: 'colorTextIconError'}, + MY_DISCLOSURE: { padding: 'space100' }, + MY_DISCLOSURE_CONTENT: { color: 'colorTextErrorStrong' }, + MY_DISCLOSURE_HEADING: { color: 'colorTextWeakest', backgroundColor: 'colorBackgroundDestructiveStrong' }, + MY_DISCLOSURE_HEADING_ICON: { color: 'colorTextIconError' }, }} > - + , ); const renderedDisclosureHeading = screen.getByTestId('disclosure-heading'); const renderedDisclosureHeadingIcon = renderedDisclosureHeading.firstChild; diff --git a/packages/paste-core/components/disclosure/build.js b/packages/paste-core/components/disclosure/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/disclosure/build.js +++ b/packages/paste-core/components/disclosure/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/disclosure/src/Disclosure.tsx b/packages/paste-core/components/disclosure/src/Disclosure.tsx index d122ac1088..14f127a436 100644 --- a/packages/paste-core/components/disclosure/src/Disclosure.tsx +++ b/packages/paste-core/components/disclosure/src/Disclosure.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import {useDisclosurePrimitiveState} from '@twilio-paste/disclosure-primitive'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import type {DisclosurePrimitiveInitialState} from '@twilio-paste/disclosure-primitive'; +import { useDisclosurePrimitiveState } from '@twilio-paste/disclosure-primitive'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import type { DisclosurePrimitiveInitialState } from '@twilio-paste/disclosure-primitive'; -import {DisclosureContext} from './DisclosureContext'; -import type {DisclosureVariants, DisclosureStateReturn} from './types'; +import { DisclosureContext } from './DisclosureContext'; +import type { DisclosureVariants, DisclosureStateReturn } from './types'; export interface DisclosureProps extends DisclosurePrimitiveInitialState, Pick { children: NonNullable; @@ -14,8 +14,8 @@ export interface DisclosureProps extends DisclosurePrimitiveInitialState, Pick( - ({children, element = 'DISCLOSURE', variant = 'default', state, ...props}, ref) => { - const disclosure = state || useDisclosurePrimitiveState({animated: true, ...props}); + ({ children, element = 'DISCLOSURE', variant = 'default', state, ...props }, ref) => { + const disclosure = state || useDisclosurePrimitiveState({ animated: true, ...props }); const [isDisabled, setIsDisabled] = React.useState(false); const [isHeadingHovered, setIsHeadingHovered] = React.useState(false); @@ -35,10 +35,10 @@ const Disclosure = React.forwardRef( ); - } + }, ); Disclosure.displayName = 'Disclosure'; -export {Disclosure}; +export { Disclosure }; -export {useDisclosurePrimitiveState as useDisclosureState}; +export { useDisclosurePrimitiveState as useDisclosureState }; diff --git a/packages/paste-core/components/disclosure/src/DisclosureContent.tsx b/packages/paste-core/components/disclosure/src/DisclosureContent.tsx index 8acf61b22f..07a0686905 100644 --- a/packages/paste-core/components/disclosure/src/DisclosureContent.tsx +++ b/packages/paste-core/components/disclosure/src/DisclosureContent.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import {useSpring, animated} from '@twilio-paste/animation-library'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import {DisclosurePrimitiveContent} from '@twilio-paste/disclosure-primitive'; -import type {BoxProps, BoxStyleProps} from '@twilio-paste/box'; -import type {DisclosurePrimitiveContentProps} from '@twilio-paste/disclosure-primitive'; +import { useSpring, animated } from '@twilio-paste/animation-library'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import { DisclosurePrimitiveContent } from '@twilio-paste/disclosure-primitive'; +import type { BoxProps, BoxStyleProps } from '@twilio-paste/box'; +import type { DisclosurePrimitiveContentProps } from '@twilio-paste/disclosure-primitive'; -import {DisclosureContext} from './DisclosureContext'; +import { DisclosureContext } from './DisclosureContext'; export const AnimatedDisclosureContent = animated(Box); @@ -35,9 +35,9 @@ export interface DisclosureContentProps } const DisclosureContent = React.forwardRef( - ({children, element = 'DISCLOSURE_CONTENT', visible, ...props}, ref) => { - const {disclosure, variant, isHeadingHovered, isDisabled} = React.useContext(DisclosureContext); - const {opacity} = useSpring({ + ({ children, element = 'DISCLOSURE_CONTENT', visible, ...props }, ref) => { + const { disclosure, variant, isHeadingHovered, isDisabled } = React.useContext(DisclosureContext); + const { opacity } = useSpring({ opacity: disclosure.visible ? 1 : 0, onRest: disclosure.stopAnimation, config: { @@ -73,9 +73,9 @@ const DisclosureContent = React.forwardRef ); - } + }, ); DisclosureContent.displayName = 'DisclosureContent'; -export {DisclosureContent}; +export { DisclosureContent }; diff --git a/packages/paste-core/components/disclosure/src/DisclosureContext.tsx b/packages/paste-core/components/disclosure/src/DisclosureContext.tsx index 5503fe3e60..389ee44e4a 100644 --- a/packages/paste-core/components/disclosure/src/DisclosureContext.tsx +++ b/packages/paste-core/components/disclosure/src/DisclosureContext.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import type {DisclosurePrimitveStateReturn} from '@twilio-paste/disclosure-primitive'; +import type { DisclosurePrimitveStateReturn } from '@twilio-paste/disclosure-primitive'; -import type {DisclosureVariants} from './types'; +import type { DisclosureVariants } from './types'; export interface DisclosureContextProps { disclosure: DisclosurePrimitveStateReturn; @@ -14,4 +14,4 @@ export interface DisclosureContextProps { const DisclosureContext = React.createContext({} as any); -export {DisclosureContext}; +export { DisclosureContext }; diff --git a/packages/paste-core/components/disclosure/src/DisclosureHeading.tsx b/packages/paste-core/components/disclosure/src/DisclosureHeading.tsx index e4ca017ab3..218ee1af0c 100644 --- a/packages/paste-core/components/disclosure/src/DisclosureHeading.tsx +++ b/packages/paste-core/components/disclosure/src/DisclosureHeading.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; -import {useTheme} from '@twilio-paste/theme'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import {Heading} from '@twilio-paste/heading'; -import {ChevronDisclosureIcon} from '@twilio-paste/icons/esm/ChevronDisclosureIcon'; -import {DisclosurePrimitive} from '@twilio-paste/disclosure-primitive'; -import type {BoxProps, BoxStyleProps} from '@twilio-paste/box'; -import type {HeadingProps} from '@twilio-paste/heading'; -import type {DisclosurePrimitiveProps} from '@twilio-paste/disclosure-primitive'; - -import {DisclosureContext} from './DisclosureContext'; -import type {DisclosureVariants} from './types'; -import {IconSizeFromHeading} from './constants'; +import { useTheme } from '@twilio-paste/theme'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import { Heading } from '@twilio-paste/heading'; +import { ChevronDisclosureIcon } from '@twilio-paste/icons/esm/ChevronDisclosureIcon'; +import { DisclosurePrimitive } from '@twilio-paste/disclosure-primitive'; +import type { BoxProps, BoxStyleProps } from '@twilio-paste/box'; +import type { HeadingProps } from '@twilio-paste/heading'; +import type { DisclosurePrimitiveProps } from '@twilio-paste/disclosure-primitive'; + +import { DisclosureContext } from './DisclosureContext'; +import type { DisclosureVariants } from './types'; +import { IconSizeFromHeading } from './constants'; const baseContainedStyles: BoxStyleProps = { borderWidth: 'borderWidth10', @@ -57,7 +57,7 @@ const StyledDisclosureHeading = React.forwardRef { const theme = useTheme(); const disabledProp = props['aria-disabled']; @@ -151,7 +151,7 @@ const StyledDisclosureHeading = React.forwardRef ); - } + }, ); StyledDisclosureHeading.displayName = 'StyledDisclosureHeading'; @@ -173,7 +173,7 @@ const DisclosureHeading: React.FC { - const {disclosure, variant, setIsDisabled, setIsHeadingHovered, isHeadingHovered, isDisabled} = + const { disclosure, variant, setIsDisabled, setIsHeadingHovered, isHeadingHovered, isDisabled } = React.useContext(DisclosureContext); return ( { +const useDelayedDisclosureState = ({ + delay, + ...initialState +}: UseDelayedDisclosureStateProps): DisclosureStateReturn => { const disclosure = useDisclosureState(initialState); const [transitioning, setTransitioning] = React.useState(false); return { @@ -72,7 +75,7 @@ export default { decorators: [], excludeStories: ['ExampleDisclosures'], component: Disclosure, - subcomponents: {DisclosureHeading, DisclosureContent}, + subcomponents: { DisclosureHeading, DisclosureContent }, }; export const HeadingVariant10 = (): React.ReactNode => { @@ -275,7 +278,7 @@ export const ContainedMultilineHeading = (): React.ReactNode => { ContainedMultilineHeading.storyName = 'Contained multiline heading'; export const StateHook = (): React.ReactNode => { - const {transitioning, ...disclosure} = useDelayedDisclosureState({ + const { transitioning, ...disclosure } = useDelayedDisclosureState({ delay: 500, }); const clickableHeading = disclosure.visible ? 'Hide with delay' : 'Show with delay'; @@ -299,19 +302,19 @@ export const StateHook = (): React.ReactNode => { StateHook.storyName = 'State hook'; -export const Customization: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const Customization: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( { it('should render as an h1 when passed as="h1', () => { render( test - + , ); - const renderedDisplayHeading = screen.getByRole('heading', {level: 1}); + const renderedDisplayHeading = screen.getByRole('heading', { level: 1 }); expect(renderedDisplayHeading).toBeDefined(); }); it('should render as an h2 when passed as="h2', () => { render( test - + , ); - const renderedDisplayHeading = screen.getByRole('heading', {level: 2}); + const renderedDisplayHeading = screen.getByRole('heading', { level: 2 }); expect(renderedDisplayHeading).toBeDefined(); }); it('should render as an h3 when passed as="h3', () => { render( test - + , ); - const renderedDisplayHeading = screen.getByRole('heading', {level: 3}); + const renderedDisplayHeading = screen.getByRole('heading', { level: 3 }); expect(renderedDisplayHeading).toBeDefined(); }); it('should remove bottom margin when passed margin="space0', () => { @@ -39,9 +39,9 @@ describe('DisplayHeading', () => { test - + , ); - const renderedDisplayHeading = screen.getByRole('heading', {level: 3}); + const renderedDisplayHeading = screen.getByRole('heading', { level: 3 }); expect(renderedDisplayHeading).toHaveStyleRule('margin-bottom', '0'); }); }); @@ -51,18 +51,18 @@ describe('Customization', () => { render( test - + , ); - const renderedDisplayHeading = screen.getByRole('heading', {level: 3}); + const renderedDisplayHeading = screen.getByRole('heading', { level: 3 }); expect(renderedDisplayHeading.getAttribute('data-paste-element')).toEqual('DISPLAY_HEADING'); }); it('should set a custom data paste element attribute on Display Heading', () => { render( test - + , ); - const renderedDisplayHeading = screen.getByRole('heading', {level: 3}); + const renderedDisplayHeading = screen.getByRole('heading', { level: 3 }); expect(renderedDisplayHeading.getAttribute('data-paste-element')).toEqual('foo'); }); it('should add custom styles to Display Heading', () => { @@ -70,25 +70,25 @@ describe('Customization', () => { test - + , ); - const renderedDisplayHeading = screen.getByRole('heading', {level: 1}); + const renderedDisplayHeading = screen.getByRole('heading', { level: 1 }); expect(renderedDisplayHeading).toHaveStyleRule('color', 'rgb(96, 107, 133)'); }); it('should add custom styles to a custom named Display Heading', () => { render( - + test - + , ); - const renderedDisplayHeading = screen.getByRole('heading', {level: 1}); + const renderedDisplayHeading = screen.getByRole('heading', { level: 1 }); expect(renderedDisplayHeading).toHaveStyleRule('color', 'rgb(96, 107, 133)'); }); }); diff --git a/packages/paste-core/components/display-heading/build.js b/packages/paste-core/components/display-heading/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/display-heading/build.js +++ b/packages/paste-core/components/display-heading/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/display-heading/src/index.tsx b/packages/paste-core/components/display-heading/src/index.tsx index 23231385fe..d925146596 100644 --- a/packages/paste-core/components/display-heading/src/index.tsx +++ b/packages/paste-core/components/display-heading/src/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {Text, safelySpreadTextProps} from '@twilio-paste/text'; -import type {TextProps, TextStyleProps} from '@twilio-paste/text'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Text, safelySpreadTextProps } from '@twilio-paste/text'; +import type { TextProps, TextStyleProps } from '@twilio-paste/text'; +import type { HTMLPasteProps } from '@twilio-paste/types'; type DisplayHeadingVariants = 'displayHeading10' | 'displayHeading20' | 'displayHeading30'; type AsTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span' | 'header'; @@ -17,7 +17,7 @@ export interface DisplayHeadingProps const getDisplayHeadingProps = ( displayHeadingVariant?: DisplayHeadingVariants, - marginBottom?: 'space0' + marginBottom?: 'space0', ): TextStyleProps => { switch (displayHeadingVariant) { case 'displayHeading10': @@ -46,7 +46,7 @@ const getDisplayHeadingProps = ( }; const DisplayHeading = React.forwardRef( - ({element = 'DISPLAY_HEADING', as, children, display = 'block', id, marginBottom, variant, ...props}, ref) => { + ({ element = 'DISPLAY_HEADING', as, children, display = 'block', id, marginBottom, variant, ...props }, ref) => { return ( {children} ); - } + }, ); DisplayHeading.displayName = 'DisplayHeading'; -export {DisplayHeading}; +export { DisplayHeading }; diff --git a/packages/paste-core/components/display-heading/stories/index.stories.tsx b/packages/paste-core/components/display-heading/stories/index.stories.tsx index 72393d8b5b..722d49b358 100644 --- a/packages/paste-core/components/display-heading/stories/index.stories.tsx +++ b/packages/paste-core/components/display-heading/stories/index.stories.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {useTheme} from '@twilio-paste/theme'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { useTheme } from '@twilio-paste/theme'; -import {DisplayHeading} from '../src'; +import { DisplayHeading } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -53,7 +53,7 @@ export const DisplayHeading30 = (): React.ReactNode => { export const Customization = (): React.ReactNode => { const theme = useTheme(); return ( - + Display Heading with customization diff --git a/packages/paste-core/components/display-pill-group/__tests__/index.spec.tsx b/packages/paste-core/components/display-pill-group/__tests__/index.spec.tsx index 26a8565c43..1ba0a5b28b 100644 --- a/packages/paste-core/components/display-pill-group/__tests__/index.spec.tsx +++ b/packages/paste-core/components/display-pill-group/__tests__/index.spec.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; -import {render} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {DisplayPillGroup, DisplayPill} from '../src'; -import {Basic} from '../stories/index.stories'; -import {CustomDisplayPillGroup} from '../stories/customization.stories'; +import { DisplayPillGroup, DisplayPill } from '../src'; +import { Basic } from '../stories/index.stories'; +import { CustomDisplayPillGroup } from '../stories/customization.stories'; describe('DisplayPillGroup', () => { // Verifies that the correct aria attributes and semantics are met describe('Rendered shape', () => { it('should render correctly', () => { - const {getByTestId, getByText} = render(); + const { getByTestId, getByText } = render(); expect(getByText('Tennis')).toBeDefined(); const group = getByTestId('display-pill-group'); @@ -31,7 +31,7 @@ describe('DisplayPillGroup', () => { // Verifies the component is fully customizable describe('Customization', () => { it('should set an element data attribute for DisplayPillGroup & DisplayPill', () => { - const {getByTestId} = render(); + const { getByTestId } = render(); const group = getByTestId('display-pill-group'); expect(group.getAttribute('data-paste-element')).toEqual('DISPLAY_PILL_GROUP'); @@ -43,12 +43,12 @@ describe('DisplayPillGroup', () => { }); it('should set a custom element data attribute for DisplayPillGroup & DisplayPill', () => { - const {getByTestId} = render( + const { getByTestId } = render( A - + , ); const group = getByTestId('group'); expect(group.getAttribute('data-paste-element')).toEqual('CUSTOM_GROUP'); @@ -57,7 +57,7 @@ describe('DisplayPillGroup', () => { }); it('should add custom styles to DisplayPillGroup & DisplayPill', () => { - const {getByTestId} = render(); + const { getByTestId } = render(); const group = getByTestId('display-pill-group'); expect(group).toHaveStyleRule('margin', '0.75rem'); @@ -69,7 +69,7 @@ describe('DisplayPillGroup', () => { expect(pillStandard).toHaveStyleRule('background-color', 'rgb(245, 240, 252)'); }); it('should add custom styles to custom element DisplayPillGroup & DisplayPill', () => { - const {getByTestId} = render( + const { getByTestId } = render( { Football - + , ); const group = getByTestId('display-pill-group'); expect(group).toHaveStyleRule('margin', '0.75rem'); diff --git a/packages/paste-core/components/display-pill-group/build.js b/packages/paste-core/components/display-pill-group/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/display-pill-group/build.js +++ b/packages/paste-core/components/display-pill-group/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/display-pill-group/src/DisplayPill.tsx b/packages/paste-core/components/display-pill-group/src/DisplayPill.tsx index 9e4cd84b79..026d721a5d 100644 --- a/packages/paste-core/components/display-pill-group/src/DisplayPill.tsx +++ b/packages/paste-core/components/display-pill-group/src/DisplayPill.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxElementProps} from '@twilio-paste/box'; -import type {HTMLPasteProps} from '@twilio-paste/types'; -import {secureExternalLink} from '@twilio-paste/anchor'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxElementProps } from '@twilio-paste/box'; +import type { HTMLPasteProps } from '@twilio-paste/types'; +import { secureExternalLink } from '@twilio-paste/anchor'; type DisplayPillProps = HTMLPasteProps<'a'> & Pick; @@ -24,7 +24,7 @@ type DisplayPillProps = HTMLPasteProps<'a'> & Pick; * @see https://paste.twilio.design/components/display-pill-group */ export const DisplayPill = React.forwardRef( - ({element = 'DISPLAY_PILL', ...props}, ref) => { + ({ element = 'DISPLAY_PILL', ...props }, ref) => { return ( ); - } + }, ); DisplayPill.displayName = 'DisplayPill'; diff --git a/packages/paste-core/components/display-pill-group/src/DisplayPillGroup.tsx b/packages/paste-core/components/display-pill-group/src/DisplayPillGroup.tsx index a5de1d1219..d73499e026 100644 --- a/packages/paste-core/components/display-pill-group/src/DisplayPillGroup.tsx +++ b/packages/paste-core/components/display-pill-group/src/DisplayPillGroup.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { HTMLPasteProps } from '@twilio-paste/types'; export interface DisplayPillGroupProps extends HTMLPasteProps<'ol'> { 'aria-label': string; @@ -18,7 +18,7 @@ export interface DisplayPillGroupProps extends HTMLPasteProps<'ol'> { * @see https://paste.twilio.design/components/display-pill-group */ export const DisplayPillGroup = React.forwardRef( - ({element = 'DISPLAY_PILL_GROUP', ...props}, ref) => { + ({ element = 'DISPLAY_PILL_GROUP', ...props }, ref) => { return ( ); - } + }, ); DisplayPillGroup.displayName = 'DisplayPillGroup'; diff --git a/packages/paste-core/components/display-pill-group/stories/customization.stories.tsx b/packages/paste-core/components/display-pill-group/stories/customization.stories.tsx index fcf4e732b8..94437d4be2 100644 --- a/packages/paste-core/components/display-pill-group/stories/customization.stories.tsx +++ b/packages/paste-core/components/display-pill-group/stories/customization.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {useTheme} from '@twilio-paste/theme'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {CalendarIcon} from '@twilio-paste/icons/esm/CalendarIcon'; +import { useTheme } from '@twilio-paste/theme'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { CalendarIcon } from '@twilio-paste/icons/esm/CalendarIcon'; -import {DisplayPillGroup} from '../src/DisplayPillGroup'; -import {DisplayPill} from '../src/DisplayPill'; +import { DisplayPillGroup } from '../src/DisplayPillGroup'; +import { DisplayPill } from '../src/DisplayPill'; export const CustomDisplayPillGroup = (): JSX.Element => { const currentTheme = useTheme(); @@ -13,8 +13,8 @@ export const CustomDisplayPillGroup = (): JSX.Element => { disableAnimations={true} theme={{ ...currentTheme, - textColors: {...currentTheme.textColors, colorTextLink: 'red'}, - fonts: {...currentTheme.fonts, fontFamilyText: 'arial'}, + textColors: { ...currentTheme.textColors, colorTextLink: 'red' }, + fonts: { ...currentTheme.fonts, fontFamilyText: 'arial' }, }} elements={{ DISPLAY_PILL_GROUP: { diff --git a/packages/paste-core/components/display-pill-group/stories/index.stories.tsx b/packages/paste-core/components/display-pill-group/stories/index.stories.tsx index e46eb417af..c12e2b7f20 100644 --- a/packages/paste-core/components/display-pill-group/stories/index.stories.tsx +++ b/packages/paste-core/components/display-pill-group/stories/index.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import {CalendarIcon} from '@twilio-paste/icons/esm/CalendarIcon'; -import {Avatar} from '@twilio-paste/avatar'; +import { Box } from '@twilio-paste/box'; +import { CalendarIcon } from '@twilio-paste/icons/esm/CalendarIcon'; +import { Avatar } from '@twilio-paste/avatar'; -import {DisplayPillGroup} from '../src/DisplayPillGroup'; -import {DisplayPill} from '../src/DisplayPill'; +import { DisplayPillGroup } from '../src/DisplayPillGroup'; +import { DisplayPill } from '../src/DisplayPill'; export const Basic = (): JSX.Element => { return ( diff --git a/packages/paste-core/components/editable-code-block/build.js b/packages/paste-core/components/editable-code-block/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/editable-code-block/build.js +++ b/packages/paste-core/components/editable-code-block/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/editable-code-block/src/EditableCodeBlock.tsx b/packages/paste-core/components/editable-code-block/src/EditableCodeBlock.tsx index e1a920e692..349439b8e0 100644 --- a/packages/paste-core/components/editable-code-block/src/EditableCodeBlock.tsx +++ b/packages/paste-core/components/editable-code-block/src/EditableCodeBlock.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {Box, type BoxProps} from '@twilio-paste/box'; -import {useTheme} from '@twilio-paste/theme'; +import { Box, type BoxProps } from '@twilio-paste/box'; +import { useTheme } from '@twilio-paste/theme'; import { CodeEditor, CodeEditorPasteTheme, @@ -10,11 +10,11 @@ import { type IRange, type IMarkdownString, } from '@twilio-paste/code-editor-library'; -import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only'; -import {Spinner} from '@twilio-paste/spinner'; -import {StylingGlobals} from '@twilio-paste/styling-library'; +import { ScreenReaderOnly } from '@twilio-paste/screen-reader-only'; +import { Spinner } from '@twilio-paste/spinner'; +import { StylingGlobals } from '@twilio-paste/styling-library'; -const EditableCodeblockLoadingMessage: React.FC<{i18nLoadingLabel: string}> = ({i18nLoadingLabel}) => ( +const EditableCodeblockLoadingMessage: React.FC<{ i18nLoadingLabel: string }> = ({ i18nLoadingLabel }) => ( <> {i18nLoadingLabel} @@ -22,7 +22,7 @@ const EditableCodeblockLoadingMessage: React.FC<{i18nLoadingLabel: string}> = ({ ); EditableCodeblockLoadingMessage.displayName = 'EditableCodeblockLoadingMessage'; -const InlineErrorStyles: {[key: string]: any} = { +const InlineErrorStyles: { [key: string]: any } = { '.paste-editable-code-editor-margin-error': { ':before': { content: '""', @@ -132,7 +132,7 @@ export const EditableCodeBlock: React.FC = ({ inlineErrorRange.startLineNumber, inlineErrorRange.startColumn, inlineErrorRange.endLineNumber, - inlineErrorRange.endColumn + inlineErrorRange.endColumn, ), // https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IModelDecorationOptions.html options: { @@ -159,7 +159,7 @@ export const EditableCodeBlock: React.FC = ({ */ onMount?.(editor, monaco); }, - [onMount, inlineErrorHoverMessage, inlineErrorRange, inlineErrorIsWholeLine] + [onMount, inlineErrorHoverMessage, inlineErrorRange, inlineErrorIsWholeLine], ); return ( diff --git a/packages/paste-core/components/editable-code-block/src/EditableCodeBlockHeader.tsx b/packages/paste-core/components/editable-code-block/src/EditableCodeBlockHeader.tsx index 93630ce30f..6a03e95200 100644 --- a/packages/paste-core/components/editable-code-block/src/EditableCodeBlockHeader.tsx +++ b/packages/paste-core/components/editable-code-block/src/EditableCodeBlockHeader.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps, type BoxProps} from '@twilio-paste/box'; -import type {asTags} from '@twilio-paste/heading'; +import { Box, safelySpreadBoxProps, type BoxProps } from '@twilio-paste/box'; +import type { asTags } from '@twilio-paste/heading'; export interface EditableCodeBlockHeaderProps extends Partial> { children: string; @@ -9,7 +9,7 @@ export interface EditableCodeBlockHeaderProps extends Partial( - ({children, element = 'EDITABLE_CODE_BLOCK_HEADER', as = 'h3', ...props}, ref) => ( + ({ children, element = 'EDITABLE_CODE_BLOCK_HEADER', as = 'h3', ...props }, ref) => ( {children} - ) + ), ); EditableCodeBlockHeader.displayName = 'EditableCodeBlockHeader'; diff --git a/packages/paste-core/components/editable-code-block/src/EditableCodeBlockWrapper.tsx b/packages/paste-core/components/editable-code-block/src/EditableCodeBlockWrapper.tsx index 975f993d1b..a3f6069ad8 100644 --- a/packages/paste-core/components/editable-code-block/src/EditableCodeBlockWrapper.tsx +++ b/packages/paste-core/components/editable-code-block/src/EditableCodeBlockWrapper.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import {styled, css} from '@twilio-paste/styling-library'; +import { Box } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import { styled, css } from '@twilio-paste/styling-library'; const StyledEditableCodeBlockWrapper = styled(Box)( css({ backgroundColor: 'rgb(1, 22, 39)', // Matches the Night Owl background theme borderRadius: 'borderRadius20', overflow: 'hidden', - }) + }), ); export interface EditableCodeBlockWrapperProps { @@ -17,13 +17,13 @@ export interface EditableCodeBlockWrapperProps { } export const EditableCodeBlockWrapper = React.forwardRef( - ({children, element = 'EDITABLE_CODE_BLOCK_WRAPPER'}, ref) => { + ({ children, element = 'EDITABLE_CODE_BLOCK_WRAPPER' }, ref) => { return ( {children} ); - } + }, ); EditableCodeBlockWrapper.displayName = 'EditableCodeBlockWrapper'; diff --git a/packages/paste-core/components/editable-code-block/stories/index.stories.tsx b/packages/paste-core/components/editable-code-block/stories/index.stories.tsx index 37a4de2eb8..5e2f074f0c 100644 --- a/packages/paste-core/components/editable-code-block/stories/index.stories.tsx +++ b/packages/paste-core/components/editable-code-block/stories/index.stories.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {Stack} from '@twilio-paste/stack'; -import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; -import {RadioButtonGroup, RadioButton} from '@twilio-paste/radio-button-group'; +import { Stack } from '@twilio-paste/stack'; +import { Callout, CalloutHeading, CalloutText } from '@twilio-paste/callout'; +import { RadioButtonGroup, RadioButton } from '@twilio-paste/radio-button-group'; -import {EditableCodeBlockHeader, EditableCodeBlockWrapper, EditableCodeBlock} from '../src'; +import { EditableCodeBlockHeader, EditableCodeBlockWrapper, EditableCodeBlock } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -206,7 +206,7 @@ export const CustomInlineError = (): React.ReactNode => { endColumn: 13, }} inlineErrorIsWholeLine={false} - inlineErrorHoverMessage={{value: '"id" can only be a string type.'}} + inlineErrorHoverMessage={{ value: '"id" can only be a string type.' }} defaultLanguage="typescript" defaultValue={TypeScriptExample} /> diff --git a/packages/paste-core/components/file-picker/__tests__/index.spec.tsx b/packages/paste-core/components/file-picker/__tests__/index.spec.tsx index 5947c06193..0e43413624 100644 --- a/packages/paste-core/components/file-picker/__tests__/index.spec.tsx +++ b/packages/paste-core/components/file-picker/__tests__/index.spec.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; -import {fireEvent, render, screen} from '@testing-library/react'; -import type {RenderOptions} from '@testing-library/react'; -import {Theme} from '@twilio-paste/theme'; +import { fireEvent, render, screen } from '@testing-library/react'; +import type { RenderOptions } from '@testing-library/react'; +import { Theme } from '@twilio-paste/theme'; -import {Default, Disabled, Required, Customized} from '../stories/index.stories'; +import { Default, Disabled, Required, Customized } from '../stories/index.stories'; -const ThemeWrapper: RenderOptions['wrapper'] = ({children}) => ( +const ThemeWrapper: RenderOptions['wrapper'] = ({ children }) => ( {children} ); describe('FilePicker', () => { it('should render', () => { - const {getByText} = render(); + const { getByText } = render(); expect(getByText('Select file')).toBeDefined(); expect(screen.getByTestId('test-file-picker')).toHaveAttribute('type', 'file'); }); @@ -33,7 +33,7 @@ describe('FilePicker', () => { render(); fireEvent.change(screen.getByTestId('test-file-picker'), { target: { - files: [new File([], 'file.png', {type: 'image/png'})], + files: [new File([], 'file.png', { type: 'image/png' })], }, }); expect(MockOnChange).toHaveBeenCalledTimes(1); @@ -46,45 +46,45 @@ describe('FilePicker', () => { describe('FilePicker customization', () => { it('should set an element data attribute on File Picker', () => { - const {container} = render(); + const { container } = render(); expect(container.querySelector('[data-paste-element="FILEPICKER"]')).toBeInTheDocument(); expect(container.querySelector('[data-paste-element="FILEPICKER_BUTTON"]')).toBeInTheDocument(); expect(container.querySelector('[data-paste-element="FILEPICKER_TEXT"]')).toBeInTheDocument(); }); it('should set a custom element data attribute on File Picker', () => { - const {container} = render(); + const { container } = render(); expect(container.querySelector('[data-paste-element="MY_FILEPICKER"]')).toBeInTheDocument(); expect(container.querySelector('[data-paste-element="MY_FILEPICKER_BUTTON"]')).toBeInTheDocument(); expect(container.querySelector('[data-paste-element="MY_FILEPICKER_TEXT"]')).toBeInTheDocument(); }); it('should add custom styling to File Picker', () => { - const {container} = render(, {wrapper: ThemeWrapper}); + const { container } = render(, { wrapper: ThemeWrapper }); expect(container.querySelector('[data-paste-element="FILEPICKER"]')).toHaveStyleRule( 'font-family', - "'TwilioSansMono',Courier,monospace" + "'TwilioSansMono',Courier,monospace", ); expect(container.querySelector('[data-paste-element="FILEPICKER_BUTTON"]')).toHaveStyleRule( 'background-color', - 'rgba(242, 47, 70, 0.1)' + 'rgba(242, 47, 70, 0.1)', ); expect(container.querySelector('[data-paste-element="FILEPICKER_TEXT"]')).toHaveStyleRule( 'margin-left', - '0.125rem' + '0.125rem', ); }); it('should add custom styling to a custom named File Picker', () => { - const {container} = render(); + const { container } = render(); expect(container.querySelector('[data-paste-element="MY_FILEPICKER"]')).toHaveStyleRule( 'font-family', - "'TwilioSansMono',Courier,monospace" + "'TwilioSansMono',Courier,monospace", ); expect(container.querySelector('[data-paste-element="MY_FILEPICKER_BUTTON"]')).toHaveStyleRule( 'background-color', - 'rgba(242, 47, 70, 0.1)' + 'rgba(242, 47, 70, 0.1)', ); expect(container.querySelector('[data-paste-element="MY_FILEPICKER_TEXT"]')).toHaveStyleRule( 'margin-left', - '0.125rem' + '0.125rem', ); }); }); diff --git a/packages/paste-core/components/file-picker/build.js b/packages/paste-core/components/file-picker/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/file-picker/build.js +++ b/packages/paste-core/components/file-picker/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/file-picker/src/FilePicker.tsx b/packages/paste-core/components/file-picker/src/FilePicker.tsx index bcd582d33c..3b3462758c 100644 --- a/packages/paste-core/components/file-picker/src/FilePicker.tsx +++ b/packages/paste-core/components/file-picker/src/FilePicker.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import {Text} from '@twilio-paste/text'; -import {useUID} from '@twilio-paste/uid-library'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import {SiblingBox} from '@twilio-paste/sibling-box'; -import type {TextColor} from '@twilio-paste/style-props'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Text } from '@twilio-paste/text'; +import { useUID } from '@twilio-paste/uid-library'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import { SiblingBox } from '@twilio-paste/sibling-box'; +import type { TextColor } from '@twilio-paste/style-props'; +import type { HTMLPasteProps } from '@twilio-paste/types'; export interface FilePickerProps extends HTMLPasteProps<'input'>, Pick { accept?: string; @@ -37,7 +37,7 @@ const FilePicker = React.forwardRef( onChange, ...props }, - ref + ref, ) => { const [fileDescription, setFileDescription] = React.useState(i18nNoSelectionText); @@ -101,7 +101,7 @@ const FilePicker = React.forwardRef( boxShadow: 'shadowBorderWeaker', }} > - {React.cloneElement(children, {disabled, element: `${element}_BUTTON`})} + {React.cloneElement(children, { disabled, element: `${element}_BUTTON` })} ( ); - } + }, ); FilePicker.displayName = 'FilePicker'; -export {FilePicker}; +export { FilePicker }; diff --git a/packages/paste-core/components/file-picker/src/FilePickerButton.tsx b/packages/paste-core/components/file-picker/src/FilePickerButton.tsx index 8297a8b8d7..6e607f6f98 100644 --- a/packages/paste-core/components/file-picker/src/FilePickerButton.tsx +++ b/packages/paste-core/components/file-picker/src/FilePickerButton.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import type {ButtonProps} from '@twilio-paste/button'; -import {Button} from '@twilio-paste/button'; -import {Box} from '@twilio-paste/box'; +import type { ButtonProps } from '@twilio-paste/button'; +import { Button } from '@twilio-paste/button'; +import { Box } from '@twilio-paste/box'; const FilePickerButton = React.forwardRef( - ({children, element, disabled, ...props}, ref) => { + ({ children, element, disabled, ...props }, ref) => { return ( ); - } + }, ); FilePickerButton.displayName = 'FilePickerButton'; -export {FilePickerButton}; +export { FilePickerButton }; diff --git a/packages/paste-core/components/file-picker/stories/index.stories.tsx b/packages/paste-core/components/file-picker/stories/index.stories.tsx index c3df3b2c78..96b75567f3 100644 --- a/packages/paste-core/components/file-picker/stories/index.stories.tsx +++ b/packages/paste-core/components/file-picker/stories/index.stories.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {useUID} from '@twilio-paste/uid-library'; -import {Label} from '@twilio-paste/label'; -import {HelpText} from '@twilio-paste/help-text'; -import {useTheme} from '@twilio-paste/theme'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {Box} from '@twilio-paste/box'; +import type { StoryFn } from '@storybook/react'; +import { useUID } from '@twilio-paste/uid-library'; +import { Label } from '@twilio-paste/label'; +import { HelpText } from '@twilio-paste/help-text'; +import { useTheme } from '@twilio-paste/theme'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { Box } from '@twilio-paste/box'; -import {FilePicker, FilePickerButton} from '../src'; +import { FilePicker, FilePickerButton } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -15,7 +15,7 @@ export default { component: FilePicker, }; -export const Default: StoryFn = ({...props}) => { +export const Default: StoryFn = ({ ...props }) => { const id = useUID(); const helpText = useUID(); return ( @@ -29,7 +29,7 @@ export const Default: StoryFn = ({...props}) => { ); }; -export const Required: StoryFn = ({...props}) => { +export const Required: StoryFn = ({ ...props }) => { const id = useUID(); return ( <> @@ -100,7 +100,7 @@ export const OnChange: StoryFn = () => { ); }; -export const Customized: StoryFn = ({element = 'FILEPICKER', ...props}) => { +export const Customized: StoryFn = ({ element = 'FILEPICKER', ...props }) => { const id = useUID(); const helpText = useUID(); const theme = useTheme(); @@ -108,9 +108,9 @@ export const Customized: StoryFn = ({element = 'FILEPICKER', ...props}) => { diff --git a/packages/paste-core/components/file-uploader/__tests__/customization.spec.tsx b/packages/paste-core/components/file-uploader/__tests__/customization.spec.tsx index f1ca7f58c3..a021ef543f 100644 --- a/packages/paste-core/components/file-uploader/__tests__/customization.spec.tsx +++ b/packages/paste-core/components/file-uploader/__tests__/customization.spec.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import {Theme} from '@twilio-paste/theme'; -import type {PasteCustomCSS} from '@twilio-paste/customization'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render, screen } from '@testing-library/react'; +import { Theme } from '@twilio-paste/theme'; +import type { PasteCustomCSS } from '@twilio-paste/customization'; +import { CustomizationProvider } from '@twilio-paste/customization'; import { FileUploader, @@ -17,19 +17,19 @@ import { FileUploaderErrorText, } from '../src'; -const getCustomizationStyles = (element = 'FILE_UPLOADER'): {[key: string]: PasteCustomCSS} => ({ - [`${element}`]: {maxWidth: 'size30'}, - [`${element}_DROPZONE_TEXT`]: {fontFamily: 'fontFamilyCode'}, - [`${element}_DROPZONE`]: {borderRadius: 'borderRadius0'}, - [`${element}_HELP_TEXT`]: {marginBottom: 'space10'}, - [`${element}_ERROR_TEXT`]: {marginBottom: 'space10'}, - [`${element}_ITEM_CONTENT`]: {rowGap: 'space30'}, - [`${element}_ITEM_DESCRIPTION`]: {fontSize: 'fontSize40'}, - [`${element}_ITEM_TITLE`]: {fontSize: 'fontSize40'}, - [`${element}_ITEM_BUTTON`]: {padding: 'space10'}, - [`${element}_ITEM`]: {padding: 'space10'}, - [`${element}_ITEMS_LIST`]: {rowGap: 'space10'}, - [`${element}_LABEL`]: {fontWeight: 'fontWeightNormal'}, +const getCustomizationStyles = (element = 'FILE_UPLOADER'): { [key: string]: PasteCustomCSS } => ({ + [`${element}`]: { maxWidth: 'size30' }, + [`${element}_DROPZONE_TEXT`]: { fontFamily: 'fontFamilyCode' }, + [`${element}_DROPZONE`]: { borderRadius: 'borderRadius0' }, + [`${element}_HELP_TEXT`]: { marginBottom: 'space10' }, + [`${element}_ERROR_TEXT`]: { marginBottom: 'space10' }, + [`${element}_ITEM_CONTENT`]: { rowGap: 'space30' }, + [`${element}_ITEM_DESCRIPTION`]: { fontSize: 'fontSize40' }, + [`${element}_ITEM_TITLE`]: { fontSize: 'fontSize40' }, + [`${element}_ITEM_BUTTON`]: { padding: 'space10' }, + [`${element}_ITEM`]: { padding: 'space10' }, + [`${element}_ITEMS_LIST`]: { rowGap: 'space10' }, + [`${element}_LABEL`]: { fontWeight: 'fontWeightNormal' }, }); describe('FileUploader customization', () => { @@ -52,7 +52,7 @@ describe('FileUploader customization', () => { - + , ); const uploader = screen.getByTestId('my-uploader'); @@ -66,7 +66,7 @@ describe('FileUploader customization', () => { const itemTitle = screen.getByText('File1.png'); const itemContent = itemTitle.parentElement; const itemDescription = screen.getByText('Uploading...'); - const itemButton = screen.getAllByRole('button', {name: 'Remove file'})[0]; + const itemButton = screen.getAllByRole('button', { name: 'Remove file' })[0]; expect(uploader.dataset.pasteElement).toBe('FILE_UPLOADER'); expect(label.dataset.pasteElement).toBe('FILE_UPLOADER_LABEL'); @@ -112,7 +112,7 @@ describe('FileUploader customization', () => { - + , ); const uploader = screen.getByTestId('my-uploader'); @@ -126,7 +126,7 @@ describe('FileUploader customization', () => { const itemTitle = screen.getByText('File1.png'); const itemContent = itemTitle.parentElement; const itemDescription = screen.getByText('Uploading...'); - const itemButton = screen.getAllByRole('button', {name: 'Remove file'})[0]; + const itemButton = screen.getAllByRole('button', { name: 'Remove file' })[0]; expect(uploader.dataset.pasteElement).toBe('MY_UPLOADER'); expect(label.dataset.pasteElement).toBe('MY_UPLOADER_LABEL'); @@ -161,7 +161,7 @@ describe('FileUploader customization', () => { - + , ); const uploader = screen.getByTestId('my-uploader'); @@ -175,7 +175,7 @@ describe('FileUploader customization', () => { const itemTitle = screen.getByText('File1.png'); const itemContent = itemTitle.parentElement; const itemDescription = screen.getByText('Uploading...'); - const itemButton = screen.getAllByRole('button', {name: 'Remove file'})[0]; + const itemButton = screen.getAllByRole('button', { name: 'Remove file' })[0]; expect(uploader).toHaveStyleRule('max-width', '18.5rem'); expect(label).toHaveStyleRule('font-weight', '400'); @@ -221,7 +221,7 @@ describe('FileUploader customization', () => { - + , ); const uploader = screen.getByTestId('my-uploader'); @@ -235,7 +235,7 @@ describe('FileUploader customization', () => { const itemTitle = screen.getByText('File1.png'); const itemContent = itemTitle.parentElement; const itemDescription = screen.getByText('Uploading...'); - const itemButton = screen.getAllByRole('button', {name: 'Remove file'})[0]; + const itemButton = screen.getAllByRole('button', { name: 'Remove file' })[0]; expect(uploader).toHaveStyleRule('max-width', '18.5rem'); expect(label).toHaveStyleRule('font-weight', '400'); diff --git a/packages/paste-core/components/file-uploader/__tests__/index.spec.tsx b/packages/paste-core/components/file-uploader/__tests__/index.spec.tsx index de792fe57e..bb50d35934 100644 --- a/packages/paste-core/components/file-uploader/__tests__/index.spec.tsx +++ b/packages/paste-core/components/file-uploader/__tests__/index.spec.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {render, screen, fireEvent} from '@testing-library/react'; -import {Theme} from '@twilio-paste/theme'; +import { render, screen, fireEvent } from '@testing-library/react'; +import { Theme } from '@twilio-paste/theme'; import { FileUploader, @@ -14,7 +14,7 @@ import { FileUploaderHelpText, FileUploaderErrorText, } from '../src'; -import {arrayToCsv} from '../src/utils'; +import { arrayToCsv } from '../src/utils'; const sampleMimeTypes = ['text/css', 'image/jpeg', 'image/png', 'application/pdf']; @@ -44,7 +44,7 @@ describe('FileUploader', () => { - + , ); const input = screen.getByLabelText('Upload files'); @@ -62,7 +62,7 @@ describe('FileUploader', () => { expect(screen.getByRole('list')).toBeDefined(); expect(screen.getAllByRole('listitem')).toHaveLength(1); - expect(screen.getByRole('button', {name: 'Remove file'})).toBeDefined(); + expect(screen.getByRole('button', { name: 'Remove file' })).toBeDefined(); }); it('should render as required when pass the required prop', () => { @@ -74,7 +74,7 @@ describe('FileUploader', () => { Click to browse or drag files here. - + , ); const requiredDot = screen @@ -94,7 +94,7 @@ describe('FileUploader', () => { Click to browse or drag files here. - + , ); expect(screen.getByLabelText('Upload files')).toBeDisabled(); @@ -125,12 +125,12 @@ describe('FileUploader', () => { File1.png - + , ); fireEvent.change(screen.getByLabelText('Upload files'), { target: { - files: [new File([], 'file.png', {type: 'image/png'})], + files: [new File([], 'file.png', { type: 'image/png' })], }, }); expect(onInputChangeMock).toBeCalledTimes(1); @@ -150,7 +150,7 @@ describe('FileUploader', () => { fireEvent.drop(dropzone); expect(onDragLeaveMock).toBeCalledTimes(1); - fireEvent.click(screen.getByRole('button', {name: 'Remove file'})); + fireEvent.click(screen.getByRole('button', { name: 'Remove file' })); expect(onButtonClickMock).toBeCalledTimes(1); }); @@ -173,7 +173,7 @@ describe('FileUploader', () => { Click to browse or drag files here. - + , ); const dropzone = screen.getByTestId('my-dropzone'); @@ -202,10 +202,10 @@ describe('i18n', () => { File1.png File1.png - + , ); - expect(screen.getAllByRole('button', {name: 'Remove file'})).toHaveLength(3); + expect(screen.getAllByRole('button', { name: 'Remove file' })).toHaveLength(3); expect(screen.getByText('(error)')).toBeDefined(); expect(screen.getByText('(uploading file)')).toBeDefined(); }); @@ -221,10 +221,10 @@ describe('i18n', () => { File1.png - + , ); - expect(screen.getByRole('button', {name: 'foo button'})).toBeDefined(); + expect(screen.getByRole('button', { name: 'foo button' })).toBeDefined(); expect(screen.getByText('foo error')).toBeDefined(); expect(screen.getByText('foo loading')).toBeDefined(); }); diff --git a/packages/paste-core/components/file-uploader/build.js b/packages/paste-core/components/file-uploader/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/file-uploader/build.js +++ b/packages/paste-core/components/file-uploader/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/file-uploader/src/FileUploader.tsx b/packages/paste-core/components/file-uploader/src/FileUploader.tsx index 4995e98ec9..b3531c916b 100644 --- a/packages/paste-core/components/file-uploader/src/FileUploader.tsx +++ b/packages/paste-core/components/file-uploader/src/FileUploader.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import {useUID} from '@twilio-paste/uid-library'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import { useUID } from '@twilio-paste/uid-library'; -import {FileUploaderContext} from './FileUploaderContext'; +import { FileUploaderContext } from './FileUploaderContext'; export interface FileUploaderProps extends Omit, 'children' | 'onChange'> { children?: React.ReactNode; @@ -15,17 +15,17 @@ export interface FileUploaderProps extends Omit( - ({element = 'FILE_UPLOADER', disabled, id: idProp, name, required = false, ...props}, ref) => { + ({ element = 'FILE_UPLOADER', disabled, id: idProp, name, required = false, ...props }, ref) => { const id = idProp ? idProp : useUID(); return ( - + {props.children} ); - } + }, ); FileUploader.displayName = 'FileUploader'; diff --git a/packages/paste-core/components/file-uploader/src/FileUploaderDropzone.tsx b/packages/paste-core/components/file-uploader/src/FileUploaderDropzone.tsx index e1d29df587..bcc0155c3b 100644 --- a/packages/paste-core/components/file-uploader/src/FileUploaderDropzone.tsx +++ b/packages/paste-core/components/file-uploader/src/FileUploaderDropzone.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps, BoxStyleProps} from '@twilio-paste/box'; -import {UploadToCloudIcon} from '@twilio-paste/icons/esm/UploadToCloudIcon'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps, BoxStyleProps } from '@twilio-paste/box'; +import { UploadToCloudIcon } from '@twilio-paste/icons/esm/UploadToCloudIcon'; -import {FileUploaderContext} from './FileUploaderContext'; -import {arrayToCsv} from './utils'; +import { FileUploaderContext } from './FileUploaderContext'; +import { arrayToCsv } from './utils'; export interface FileUploaderDropzoneProps extends Omit< @@ -60,9 +60,9 @@ export const FileUploaderDropzone = React.forwardRef { - const {id, disabled, required, name} = React.useContext(FileUploaderContext); + const { id, disabled, required, name } = React.useContext(FileUploaderContext); /** * The underlying DOM element won't accept the same file after it has been @@ -75,7 +75,7 @@ export const FileUploaderDropzone = React.forwardRef): void => { setFileInputKey((prev) => prev + 1); @@ -182,7 +182,7 @@ export const FileUploaderDropzone = React.forwardRef ); - } + }, ); FileUploaderDropzone.displayName = 'FileUploaderDropzone'; diff --git a/packages/paste-core/components/file-uploader/src/FileUploaderDropzoneText.tsx b/packages/paste-core/components/file-uploader/src/FileUploaderDropzoneText.tsx index a5514d777d..8f788d92b6 100644 --- a/packages/paste-core/components/file-uploader/src/FileUploaderDropzoneText.tsx +++ b/packages/paste-core/components/file-uploader/src/FileUploaderDropzoneText.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; -import {FileUploaderContext} from './FileUploaderContext'; +import { FileUploaderContext } from './FileUploaderContext'; export interface FileUploaderDropzoneTextProps extends Omit, 'children'> { children?: React.ReactNode; @@ -10,8 +10,8 @@ export interface FileUploaderDropzoneTextProps extends Omit( - ({children, element = 'FILE_UPLOADER_DROPZONE_TEXT', ...props}, ref) => { - const {id} = React.useContext(FileUploaderContext); + ({ children, element = 'FILE_UPLOADER_DROPZONE_TEXT', ...props }, ref) => { + const { id } = React.useContext(FileUploaderContext); return ( ); - } + }, ); FileUploaderDropzoneText.displayName = 'FileUploaderDropzoneText'; diff --git a/packages/paste-core/components/file-uploader/src/FileUploaderErrorText.tsx b/packages/paste-core/components/file-uploader/src/FileUploaderErrorText.tsx index 82be9eca74..a419e35e8b 100644 --- a/packages/paste-core/components/file-uploader/src/FileUploaderErrorText.tsx +++ b/packages/paste-core/components/file-uploader/src/FileUploaderErrorText.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {HelpText} from '@twilio-paste/help-text'; -import type {HelpTextProps} from '@twilio-paste/help-text'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; +import { HelpText } from '@twilio-paste/help-text'; +import type { HelpTextProps } from '@twilio-paste/help-text'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; -import {FileUploaderContext} from './FileUploaderContext'; +import { FileUploaderContext } from './FileUploaderContext'; export interface FileUploaderErrorTextProps extends Omit, 'children'> { children?: HelpTextProps['children']; @@ -11,8 +11,8 @@ export interface FileUploaderErrorTextProps extends Omit( - ({children, element = 'FILE_UPLOADER_ERROR_TEXT', ...props}, ref) => { - const {id} = React.useContext(FileUploaderContext); + ({ children, element = 'FILE_UPLOADER_ERROR_TEXT', ...props }, ref) => { + const { id } = React.useContext(FileUploaderContext); return ( @@ -21,7 +21,7 @@ export const FileUploaderErrorText = React.forwardRef ); - } + }, ); FileUploaderErrorText.displayName = 'FileUploaderErrorText'; diff --git a/packages/paste-core/components/file-uploader/src/FileUploaderHelpText.tsx b/packages/paste-core/components/file-uploader/src/FileUploaderHelpText.tsx index bec8f23674..2ee7f18a8f 100644 --- a/packages/paste-core/components/file-uploader/src/FileUploaderHelpText.tsx +++ b/packages/paste-core/components/file-uploader/src/FileUploaderHelpText.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {HelpText} from '@twilio-paste/help-text'; -import type {HelpTextProps} from '@twilio-paste/help-text'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; +import { HelpText } from '@twilio-paste/help-text'; +import type { HelpTextProps } from '@twilio-paste/help-text'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; -import {FileUploaderContext} from './FileUploaderContext'; +import { FileUploaderContext } from './FileUploaderContext'; export interface FileUploaderHelpTextProps extends Omit, 'children'> { children?: HelpTextProps['children']; @@ -11,15 +11,15 @@ export interface FileUploaderHelpTextProps extends Omit( - ({children, element = 'FILE_UPLOADER_HELP_TEXT', ...props}, ref) => { - const {id} = React.useContext(FileUploaderContext); + ({ children, element = 'FILE_UPLOADER_HELP_TEXT', ...props }, ref) => { + const { id } = React.useContext(FileUploaderContext); return ( {children} ); - } + }, ); FileUploaderHelpText.displayName = 'FileUploaderHelpText'; diff --git a/packages/paste-core/components/file-uploader/src/FileUploaderItem.tsx b/packages/paste-core/components/file-uploader/src/FileUploaderItem.tsx index 54feaf6bff..9209377db5 100644 --- a/packages/paste-core/components/file-uploader/src/FileUploaderItem.tsx +++ b/packages/paste-core/components/file-uploader/src/FileUploaderItem.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps, BoxStyleProps} from '@twilio-paste/box'; -import {Button} from '@twilio-paste/button'; -import {Spinner} from '@twilio-paste/spinner'; -import {ErrorIcon} from '@twilio-paste/icons/esm/ErrorIcon'; -import {DeleteIcon} from '@twilio-paste/icons/esm/DeleteIcon'; -import {CloseIcon} from '@twilio-paste/icons/esm/CloseIcon'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps, BoxStyleProps } from '@twilio-paste/box'; +import { Button } from '@twilio-paste/button'; +import { Spinner } from '@twilio-paste/spinner'; +import { ErrorIcon } from '@twilio-paste/icons/esm/ErrorIcon'; +import { DeleteIcon } from '@twilio-paste/icons/esm/DeleteIcon'; +import { CloseIcon } from '@twilio-paste/icons/esm/CloseIcon'; -import {FileUploaderItemContext} from './FileUploaderItemContext'; -import type {FileUploaderItemContextProps} from './FileUploaderItemContext'; +import { FileUploaderItemContext } from './FileUploaderItemContext'; +import type { FileUploaderItemContextProps } from './FileUploaderItemContext'; export interface FileUploaderItemProps extends Omit, 'children'> { children?: BoxProps['children']; @@ -61,7 +61,7 @@ export const FileUploaderItem = React.forwardRef { let icon = fileIcon; if (variant === 'error') @@ -75,7 +75,7 @@ export const FileUploaderItem = React.forwardRef + ); - } + }, ); FileUploaderItem.displayName = 'FileUploaderItem'; diff --git a/packages/paste-core/components/file-uploader/src/FileUploaderItemDescription.tsx b/packages/paste-core/components/file-uploader/src/FileUploaderItemDescription.tsx index 72654d8193..9775f35972 100644 --- a/packages/paste-core/components/file-uploader/src/FileUploaderItemDescription.tsx +++ b/packages/paste-core/components/file-uploader/src/FileUploaderItemDescription.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import type {BoxElementProps} from '@twilio-paste/box'; -import {Text, safelySpreadTextProps} from '@twilio-paste/text'; -import type {TextStyleProps} from '@twilio-paste/text'; +import type { BoxElementProps } from '@twilio-paste/box'; +import { Text, safelySpreadTextProps } from '@twilio-paste/text'; +import type { TextStyleProps } from '@twilio-paste/text'; -import {FileUploaderItemContext} from './FileUploaderItemContext'; -import type {FileUploaderItemContextProps} from './FileUploaderItemContext'; +import { FileUploaderItemContext } from './FileUploaderItemContext'; +import type { FileUploaderItemContextProps } from './FileUploaderItemContext'; export interface FileUploaderItemDescriptionProps extends Omit, 'children'> { children: string; @@ -24,8 +24,8 @@ const variantStyles: Record( - ({children, element = 'FILE_UPLOADER_ITEM_DESCRIPTION', ...props}, ref) => { - const {variant} = React.useContext(FileUploaderItemContext); + ({ children, element = 'FILE_UPLOADER_ITEM_DESCRIPTION', ...props }, ref) => { + const { variant } = React.useContext(FileUploaderItemContext); return ( ); - } + }, ); FileUploaderItemDescription.displayName = 'FileUploaderItemDescription'; diff --git a/packages/paste-core/components/file-uploader/src/FileUploaderItemTitle.tsx b/packages/paste-core/components/file-uploader/src/FileUploaderItemTitle.tsx index 2eefc91034..fd68e732a4 100644 --- a/packages/paste-core/components/file-uploader/src/FileUploaderItemTitle.tsx +++ b/packages/paste-core/components/file-uploader/src/FileUploaderItemTitle.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import type {BoxElementProps} from '@twilio-paste/box'; -import {Text, safelySpreadTextProps} from '@twilio-paste/text'; +import type { BoxElementProps } from '@twilio-paste/box'; +import { Text, safelySpreadTextProps } from '@twilio-paste/text'; export interface FileUploaderItemTitleProps extends Omit, 'children'> { children: string; @@ -8,7 +8,7 @@ export interface FileUploaderItemTitleProps extends Omit( - ({children, element = 'FILE_UPLOADER_ITEM_TITLE', ...props}, ref) => { + ({ children, element = 'FILE_UPLOADER_ITEM_TITLE', ...props }, ref) => { return ( ); - } + }, ); FileUploaderItemTitle.displayName = 'FileUploaderItemTitle'; diff --git a/packages/paste-core/components/file-uploader/src/FileUploaderItemsList.tsx b/packages/paste-core/components/file-uploader/src/FileUploaderItemsList.tsx index d03708d547..79ee3e18e1 100644 --- a/packages/paste-core/components/file-uploader/src/FileUploaderItemsList.tsx +++ b/packages/paste-core/components/file-uploader/src/FileUploaderItemsList.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; export interface FileUploaderItemsListProps extends Omit, 'children'> { children?: React.ReactNode; @@ -8,7 +8,7 @@ export interface FileUploaderItemsListProps extends Omit( - ({children, element = 'FILE_UPLOADER_ITEMS_LIST', ...props}, ref) => { + ({ children, element = 'FILE_UPLOADER_ITEMS_LIST', ...props }, ref) => { return ( ); - } + }, ); FileUploaderItemsList.displayName = 'FileUploaderItemsList'; diff --git a/packages/paste-core/components/file-uploader/src/FileUploaderLabel.tsx b/packages/paste-core/components/file-uploader/src/FileUploaderLabel.tsx index 26a973daf2..9533df666b 100644 --- a/packages/paste-core/components/file-uploader/src/FileUploaderLabel.tsx +++ b/packages/paste-core/components/file-uploader/src/FileUploaderLabel.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {Label} from '@twilio-paste/label'; -import type {LabelProps} from '@twilio-paste/label'; +import { Label } from '@twilio-paste/label'; +import type { LabelProps } from '@twilio-paste/label'; -import {FileUploaderContext} from './FileUploaderContext'; +import { FileUploaderContext } from './FileUploaderContext'; export type FileUploaderLabelProps = Omit, 'children'> & { children: LabelProps['children']; @@ -10,15 +10,15 @@ export type FileUploaderLabelProps = Omit, }; export const FileUploaderLabel = React.forwardRef( - ({children, element = 'FILE_UPLOADER_LABEL', ...props}, ref) => { - const {id, disabled, required} = React.useContext(FileUploaderContext); + ({ children, element = 'FILE_UPLOADER_LABEL', ...props }, ref) => { + const { id, disabled, required } = React.useContext(FileUploaderContext); return ( ); - } + }, ); FileUploaderLabel.displayName = 'FileUploaderLabel'; diff --git a/packages/paste-core/components/file-uploader/stories/index.stories.tsx b/packages/paste-core/components/file-uploader/stories/index.stories.tsx index 0e0ca64b43..f698c0caa4 100644 --- a/packages/paste-core/components/file-uploader/stories/index.stories.tsx +++ b/packages/paste-core/components/file-uploader/stories/index.stories.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {DownloadIcon} from '@twilio-paste/icons/esm/DownloadIcon'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {useTheme} from '@twilio-paste/theme'; -import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only'; -import type {StoryFn} from '@storybook/react'; +import { DownloadIcon } from '@twilio-paste/icons/esm/DownloadIcon'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { useTheme } from '@twilio-paste/theme'; +import { ScreenReaderOnly } from '@twilio-paste/screen-reader-only'; +import type { StoryFn } from '@storybook/react'; import snakeCase from 'lodash/snakeCase'; import { @@ -18,7 +18,7 @@ import { FileUploaderHelpText, FileUploaderErrorText, } from '../src'; -import type {FileUploaderItemProps} from '../src'; +import type { FileUploaderItemProps } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -154,11 +154,11 @@ export const DragDropExample: StoryFn = () => { }, [files, setFiles]); const handleInputChange = (event: React.ChangeEvent): void => { - const {files: newFiles} = event.target; + const { files: newFiles } = event.target; let newFilesNames = ''; if (newFiles !== null) { - Array.from(newFiles).forEach(({name}) => { + Array.from(newFiles).forEach(({ name }) => { newFilesNames = `${newFilesNames} ${name}`; setFiles((prev) => { return [ @@ -180,21 +180,21 @@ export const DragDropExample: StoryFn = () => { }; const handleDragEnter = (event: React.DragEvent): void => { - const {items} = event.dataTransfer; + const { items } = event.dataTransfer; setScreenReaderText(`Dragging ${items.length} files`); }; const handleDragLeave = (event: React.DragEvent): void => { - const {items} = event.dataTransfer; + const { items } = event.dataTransfer; setScreenReaderText(`Cancelled dragging ${items.length} files`); }; const handleDrop = (event: React.DragEvent): void => { - const {files: newFiles} = event.dataTransfer; + const { files: newFiles } = event.dataTransfer; setScreenReaderText(`Dropped ${newFiles.length} files`); if (newFiles !== null) { - Array.from(newFiles).forEach(({name}) => { + Array.from(newFiles).forEach(({ name }) => { setFiles((prev) => { return [ ...prev, @@ -226,7 +226,7 @@ export const DragDropExample: StoryFn = () => { Browse files or drag them here - {files.map(({variant, title, description, id}) => ( + {files.map(({ variant, title, description, id }) => ( { }; DragDropExample.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, }; export const ReallyLongText: StoryFn = () => { @@ -287,23 +287,23 @@ export const ReallyLongText: StoryFn = () => { ); }; -export const Customized: StoryFn = ({element = 'FILE_UPLOADER', ...props}) => { +export const Customized: StoryFn = ({ element = 'FILE_UPLOADER', ...props }) => { const theme = useTheme(); return ( diff --git a/packages/paste-core/components/form-pill-group/__tests__/index.spec.tsx b/packages/paste-core/components/form-pill-group/__tests__/index.spec.tsx index 227f388103..4215e7edb3 100644 --- a/packages/paste-core/components/form-pill-group/__tests__/index.spec.tsx +++ b/packages/paste-core/components/form-pill-group/__tests__/index.spec.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {render, fireEvent, screen} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render, fireEvent, screen } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {useFormPillState, FormPillGroup, FormPill} from '../src'; -import {Basic, SelectableAndDismissable} from '../stories/index.stories'; -import {CustomFormPillGroup} from '../stories/customization.stories'; +import { useFormPillState, FormPillGroup, FormPill } from '../src'; +import { Basic, SelectableAndDismissable } from '../stories/index.stories'; +import { CustomFormPillGroup } from '../stories/customization.stories'; const CustomElementFormPillGroup = (): JSX.Element => { const pillState = useFormPillState(); @@ -77,33 +77,33 @@ describe('FormPillGroup', () => { expect(firstPill.getAttribute('aria-selected')).toBe('false'); // Make sure it selects on Enter key - fireEvent.keyDown(firstPill, {key: 'Enter', code: 'Enter'}); + fireEvent.keyDown(firstPill, { key: 'Enter', code: 'Enter' }); expect(firstPill.getAttribute('aria-selected')).toBe('true'); // Make sure it deselects on Enter key - fireEvent.keyDown(firstPill, {key: 'Enter', code: 'Enter'}); + fireEvent.keyDown(firstPill, { key: 'Enter', code: 'Enter' }); expect(firstPill.getAttribute('aria-selected')).toBe('false'); // Make sure we can navigate with right arrow - fireEvent.keyDown(firstPill, {key: 'ArrowRight', code: 'ArrowRight'}); + fireEvent.keyDown(firstPill, { key: 'ArrowRight', code: 'ArrowRight' }); if (document.activeElement == null) { throw new Error('document.activeElement is null'); } expect(document.activeElement.getAttribute('data-testid')).toBe('form-pill-1'); // Move right again and check for selection - fireEvent.keyDown(document.activeElement, {key: 'ArrowRight', code: 'ArrowRight'}); + fireEvent.keyDown(document.activeElement, { key: 'ArrowRight', code: 'ArrowRight' }); expect(document.activeElement.getAttribute('data-testid')).toBe('form-pill-2'); - fireEvent.keyDown(document.activeElement, {key: 'Enter', code: 'Enter'}); + fireEvent.keyDown(document.activeElement, { key: 'Enter', code: 'Enter' }); expect(document.activeElement.getAttribute('aria-selected')).toBe('true'); // Try moving left this time - fireEvent.keyDown(document.activeElement, {key: 'ArrowLeft', code: 'ArrowLeft'}); + fireEvent.keyDown(document.activeElement, { key: 'ArrowLeft', code: 'ArrowLeft' }); expect(document.activeElement.getAttribute('data-testid')).toBe('form-pill-1'); // Loop movement - fireEvent.keyDown(document.activeElement, {key: 'ArrowLeft', code: 'ArrowLeft'}); - fireEvent.keyDown(document.activeElement, {key: 'ArrowLeft', code: 'ArrowLeft'}); + fireEvent.keyDown(document.activeElement, { key: 'ArrowLeft', code: 'ArrowLeft' }); + fireEvent.keyDown(document.activeElement, { key: 'ArrowLeft', code: 'ArrowLeft' }); expect(document.activeElement.getAttribute('data-testid')).toBe('form-pill-5'); }); @@ -111,18 +111,18 @@ describe('FormPillGroup', () => { render(); /* Test click to remove */ - const firstPill = screen.getByRole('option', {name: 'Default pill'}).parentElement; + const firstPill = screen.getByRole('option', { name: 'Default pill' }).parentElement; const firstPillX = firstPill?.querySelector('[data-paste-element="FORM_PILL_CLOSE"]'); fireEvent.click(firstPillX as Element); expect(firstPill).not.toBeInTheDocument(); /* Test keyboard to remove */ - const secondPill = screen.getByRole('option', {name: 'Pill with icon'}); - fireEvent.keyDown(secondPill, {key: 'Delete', code: 'Delete'}); + const secondPill = screen.getByRole('option', { name: 'Pill with icon' }); + fireEvent.keyDown(secondPill, { key: 'Delete', code: 'Delete' }); expect(secondPill).not.toBeInTheDocument(); - const thirdPill = screen.getByRole('option', {name: 'Pill with avatar'}); - fireEvent.keyDown(thirdPill, {key: 'Backspace', code: 'Backspace'}); + const thirdPill = screen.getByRole('option', { name: 'Pill with avatar' }); + fireEvent.keyDown(thirdPill, { key: 'Backspace', code: 'Backspace' }); expect(thirdPill).not.toBeInTheDocument(); }); }); @@ -171,7 +171,7 @@ describe('FormPillGroup', () => { }} > - + , ); const group = screen.getByTestId('form-pill-group'); expect(group).toHaveStyleRule('margin', '0.75rem'); @@ -185,7 +185,7 @@ describe('FormPillGroup', () => { it('should have default keyboard controls text', () => { render(); const keyboardControlsText = screen.getByText( - 'Press Delete or Backspace to remove. Press Enter to toggle selection.' + 'Press Delete or Backspace to remove. Press Enter to toggle selection.', ); expect(keyboardControlsText).toBeDefined(); }); @@ -193,7 +193,7 @@ describe('FormPillGroup', () => { it('should use i18nKeyboardControls for keyboard controls text', () => { render(); const keyboardControlsText = screen.getByText( - 'Appuyez sur Supprimer ou Retour arrière pour supprimer. Appuyez sur Entrée pour basculer la sélection.' + 'Appuyez sur Supprimer ou Retour arrière pour supprimer. Appuyez sur Entrée pour basculer la sélection.', ); expect(keyboardControlsText).toBeDefined(); }); diff --git a/packages/paste-core/components/form-pill-group/build.js b/packages/paste-core/components/form-pill-group/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/form-pill-group/build.js +++ b/packages/paste-core/components/form-pill-group/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/form-pill-group/src/FormPill.styles.ts b/packages/paste-core/components/form-pill-group/src/FormPill.styles.ts index b13038273b..266b5dcd9a 100644 --- a/packages/paste-core/components/form-pill-group/src/FormPill.styles.ts +++ b/packages/paste-core/components/form-pill-group/src/FormPill.styles.ts @@ -1,6 +1,6 @@ -import type {BoxStyleProps} from '@twilio-paste/box'; +import type { BoxStyleProps } from '@twilio-paste/box'; -import type {VariantStyles} from './types'; +import type { VariantStyles } from './types'; /** * Wrapper styles diff --git a/packages/paste-core/components/form-pill-group/src/FormPill.tsx b/packages/paste-core/components/form-pill-group/src/FormPill.tsx index e76c4ca5b4..4dff9a05f7 100644 --- a/packages/paste-core/components/form-pill-group/src/FormPill.tsx +++ b/packages/paste-core/components/form-pill-group/src/FormPill.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import {CompositeItem} from '@twilio-paste/reakit-library'; -import type {CompositeStateReturn} from '@twilio-paste/reakit-library'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import { CompositeItem } from '@twilio-paste/reakit-library'; +import type { CompositeStateReturn } from '@twilio-paste/reakit-library'; -import {PillCloseIcon} from './PillCloseIcon'; -import {FormPillButton} from './FormPillButton'; -import type {PillVariant} from './types'; -import {selectedWrapperStyles, wrapperStyles} from './FormPill.styles'; +import { PillCloseIcon } from './PillCloseIcon'; +import { FormPillButton } from './FormPillButton'; +import type { PillVariant } from './types'; +import { selectedWrapperStyles, wrapperStyles } from './FormPill.styles'; interface FormPillProps extends CompositeStateReturn, Pick { selected?: boolean; @@ -55,7 +55,7 @@ export const FormPill = React.forwardRef( i18nErrorLabel, ...props }, - ref + ref, ) => { if (selected && disabled) { throw new Error('[Paste FormPill] FormPills cannot be selected and disabled at the same time.'); @@ -82,7 +82,7 @@ export const FormPill = React.forwardRef( } } }, - [onDismiss, next] + [onDismiss, next], ); return ( ( ) : null} ); - } + }, ); FormPill.displayName = 'FormPill'; diff --git a/packages/paste-core/components/form-pill-group/src/FormPillButton.tsx b/packages/paste-core/components/form-pill-group/src/FormPillButton.tsx index 503b4e49ea..38d35a61e1 100644 --- a/packages/paste-core/components/form-pill-group/src/FormPillButton.tsx +++ b/packages/paste-core/components/form-pill-group/src/FormPillButton.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxElementProps} from '@twilio-paste/box'; -import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only'; -import {ErrorIcon} from '@twilio-paste/icons/esm/ErrorIcon'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxElementProps } from '@twilio-paste/box'; +import { ScreenReaderOnly } from '@twilio-paste/screen-reader-only'; +import { ErrorIcon } from '@twilio-paste/icons/esm/ErrorIcon'; -import {pillStyles, hoverPillStyles} from './FormPill.styles'; -import type {PillVariant} from './types'; +import { pillStyles, hoverPillStyles } from './FormPill.styles'; +import type { PillVariant } from './types'; interface FormPillStylesProps { variant?: PillVariant; @@ -33,11 +33,11 @@ export const FormPillButton = React.forwardRef i18nErrorLabel = '(error)', ...props }, - ref + ref, ) => { const computedStyles = React.useMemo(() => { const hasHoverStyles = isHoverable && !isDisabled; - return hasHoverStyles ? {...pillStyles[variant], ...hoverPillStyles[variant]} : pillStyles[variant]; + return hasHoverStyles ? { ...pillStyles[variant], ...hoverPillStyles[variant] } : pillStyles[variant]; }, [isHoverable, isDisabled, variant]); return ( @@ -76,7 +76,7 @@ export const FormPillButton = React.forwardRef ); - } + }, ); FormPillButton.displayName = 'FormPillButton'; diff --git a/packages/paste-core/components/form-pill-group/src/FormPillGroup.tsx b/packages/paste-core/components/form-pill-group/src/FormPillGroup.tsx index 843256e2ce..f2f983580f 100644 --- a/packages/paste-core/components/form-pill-group/src/FormPillGroup.tsx +++ b/packages/paste-core/components/form-pill-group/src/FormPillGroup.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxElementProps} from '@twilio-paste/box'; -import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only'; -import {useUID} from '@twilio-paste/uid-library'; -import {Composite} from '@twilio-paste/reakit-library'; -import type {CompositeProps} from '@twilio-paste/reakit-library'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxElementProps } from '@twilio-paste/box'; +import { ScreenReaderOnly } from '@twilio-paste/screen-reader-only'; +import { useUID } from '@twilio-paste/uid-library'; +import { Composite } from '@twilio-paste/reakit-library'; +import type { CompositeProps } from '@twilio-paste/reakit-library'; export interface FormPillGroupProps extends Omit { @@ -16,7 +16,7 @@ export interface FormPillGroupProps } const FormPillGroupStyles = React.forwardRef( - ({element = 'FORM_PILL_GROUP', display = 'flex', ...props}, ref) => ( + ({ element = 'FORM_PILL_GROUP', display = 'flex', ...props }, ref) => ( {props.children} - ) + ), ); FormPillGroupStyles.displayName = 'StyledFormPillGroup'; @@ -48,7 +48,10 @@ FormPillGroupStyles.displayName = 'StyledFormPillGroup'; * @see http://paste.twilio.design/components/form-pill-group */ export const FormPillGroup = React.forwardRef( - ({i18nKeyboardControls = 'Press Delete or Backspace to remove. Press Enter to toggle selection.', ...props}, ref) => { + ( + { i18nKeyboardControls = 'Press Delete or Backspace to remove. Press Enter to toggle selection.', ...props }, + ref, + ) => { const keyboardControlsId = useUID(); return ( <> @@ -58,7 +61,7 @@ export const FormPillGroup = React.forwardRef{i18nKeyboardControls} ); - } + }, ); FormPillGroup.displayName = 'FormPillGroup'; diff --git a/packages/paste-core/components/form-pill-group/src/PillCloseIcon.tsx b/packages/paste-core/components/form-pill-group/src/PillCloseIcon.tsx index c695e0efce..29ce4679f6 100644 --- a/packages/paste-core/components/form-pill-group/src/PillCloseIcon.tsx +++ b/packages/paste-core/components/form-pill-group/src/PillCloseIcon.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import {CloseIcon} from '@twilio-paste/icons/esm/CloseIcon'; +import { Box } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import { CloseIcon } from '@twilio-paste/icons/esm/CloseIcon'; import merge from 'deepmerge'; import { @@ -11,7 +11,7 @@ import { selectedBaseCloseStyles, selectedCloseColorStyles, } from './FormPill.styles'; -import type {PillVariant} from './types'; +import type { PillVariant } from './types'; interface PillCloseIconProps { onClick?: (event: React.MouseEvent) => void; diff --git a/packages/paste-core/components/form-pill-group/src/types.ts b/packages/paste-core/components/form-pill-group/src/types.ts index 80fa6704e5..f8c5319261 100644 --- a/packages/paste-core/components/form-pill-group/src/types.ts +++ b/packages/paste-core/components/form-pill-group/src/types.ts @@ -1,4 +1,4 @@ -import type {BoxStyleProps} from '@twilio-paste/box'; +import type { BoxStyleProps } from '@twilio-paste/box'; export type PillVariant = 'error' | 'default'; export type VariantStyles = Record; diff --git a/packages/paste-core/components/form-pill-group/src/useFormPillState.tsx b/packages/paste-core/components/form-pill-group/src/useFormPillState.tsx index bf7d203385..cc48a769a5 100644 --- a/packages/paste-core/components/form-pill-group/src/useFormPillState.tsx +++ b/packages/paste-core/components/form-pill-group/src/useFormPillState.tsx @@ -1,7 +1,7 @@ -import {useCompositeState} from '@twilio-paste/reakit-library'; -import type {CompositeInitialState, CompositeStateReturn as FormPillStateReturn} from '@twilio-paste/reakit-library'; +import { useCompositeState } from '@twilio-paste/reakit-library'; +import type { CompositeInitialState, CompositeStateReturn as FormPillStateReturn } from '@twilio-paste/reakit-library'; -export type {FormPillStateReturn}; +export type { FormPillStateReturn }; export type FormPillInitialState = Omit; export const useFormPillState = (config: FormPillInitialState = {}): FormPillStateReturn => { diff --git a/packages/paste-core/components/form-pill-group/stories/customization.stories.tsx b/packages/paste-core/components/form-pill-group/stories/customization.stories.tsx index 3b077bce4b..155f1e241f 100644 --- a/packages/paste-core/components/form-pill-group/stories/customization.stories.tsx +++ b/packages/paste-core/components/form-pill-group/stories/customization.stories.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {useTheme} from '@twilio-paste/theme'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {CalendarIcon} from '@twilio-paste/icons/esm/CalendarIcon'; +import { useTheme } from '@twilio-paste/theme'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { CalendarIcon } from '@twilio-paste/icons/esm/CalendarIcon'; -import {useFormPillState, FormPillGroup, FormPill} from '../src'; +import { useFormPillState, FormPillGroup, FormPill } from '../src'; export const CustomFormPillGroup = (): JSX.Element => { const currentTheme = useTheme(); @@ -15,7 +15,7 @@ export const CustomFormPillGroup = (): JSX.Element => { disableAnimations={true} theme={{ ...currentTheme, - fonts: {fontFamilyText: 'arial'}, + fonts: { fontFamilyText: 'arial' }, }} elements={{ FORM_PILL_GROUP: { diff --git a/packages/paste-core/components/form-pill-group/stories/index.stories.tsx b/packages/paste-core/components/form-pill-group/stories/index.stories.tsx index e3e0b20769..eed97978e5 100644 --- a/packages/paste-core/components/form-pill-group/stories/index.stories.tsx +++ b/packages/paste-core/components/form-pill-group/stories/index.stories.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import {Avatar} from '@twilio-paste/avatar'; -import {CalendarIcon} from '@twilio-paste/icons/esm/CalendarIcon'; +import { Box } from '@twilio-paste/box'; +import { Avatar } from '@twilio-paste/avatar'; +import { CalendarIcon } from '@twilio-paste/icons/esm/CalendarIcon'; -import {useFormPillState, FormPillGroup, FormPill} from '../src'; +import { useFormPillState, FormPillGroup, FormPill } from '../src'; const PILL_NAMES = [ 'Default pill', @@ -15,8 +15,8 @@ const PILL_NAMES = [ ]; export const Basic: React.FC< - React.PropsWithChildren<{selected?: boolean; dismissable?: boolean; disabled?: boolean; ariaLabel?: string}> -> = ({selected = false, dismissable = false, disabled = false, ariaLabel = 'Basic pills:'}) => { + React.PropsWithChildren<{ selected?: boolean; dismissable?: boolean; disabled?: boolean; ariaLabel?: string }> +> = ({ selected = false, dismissable = false, disabled = false, ariaLabel = 'Basic pills:' }) => { const pillState = useFormPillState(); return (
    diff --git a/packages/paste-core/components/form/__tests__/index.spec.tsx b/packages/paste-core/components/form/__tests__/index.spec.tsx index f7895e5862..330acb7ef5 100644 --- a/packages/paste-core/components/form/__tests__/index.spec.tsx +++ b/packages/paste-core/components/form/__tests__/index.spec.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render, screen } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; import { Form, @@ -23,7 +23,7 @@ describe('Form', () => { Two column content Control content Actions content -
    + , ); const form = screen.getByRole('form'); @@ -33,7 +33,7 @@ describe('Form', () => { const description = screen.getByTestId('section-desc'); expect(description.id).toBe('foo-section-description'); - const section = screen.getByRole('group', {name: 'Settings'}); + const section = screen.getByRole('group', { name: 'Settings' }); expect(section).toBeDefined(); expect(section).toHaveAttribute('aria-describedby', description.id); @@ -48,12 +48,12 @@ describe('Form', () => { Section Description - + , ); - expect(screen.getByRole('group', {name: 'Section'})).toHaveAttribute( + expect(screen.getByRole('group', { name: 'Section' })).toHaveAttribute( 'aria-describedby', - screen.getByTestId('section-desc').id + screen.getByTestId('section-desc').id, ); }); }); @@ -69,11 +69,11 @@ describe('Form customization', () => { Two column content Control content Actions content - + , ); expect(screen.getByRole('form').dataset.pasteElement).toBe('FORM'); - expect(screen.getByRole('group', {name: 'Settings'}).dataset.pasteElement).toBe('FORM_SECTION'); + expect(screen.getByRole('group', { name: 'Settings' }).dataset.pasteElement).toBe('FORM_SECTION'); expect(screen.getByTestId('section-heading').dataset.pasteElement).toBe('FORM_SECTION_HEADING'); expect(screen.getByText('Two column content').dataset.pasteElement).toBe('FORM_CONTROL_TWO_COLUMN'); expect(screen.getByText('Control content').dataset.pasteElement).toBe('FORM_CONTROL'); @@ -94,11 +94,11 @@ describe('Form customization', () => { Two column content Control content Actions content - + , ); expect(screen.getByRole('form').dataset.pasteElement).toBe('MY_FORM'); - expect(screen.getByRole('group', {name: 'Settings'}).dataset.pasteElement).toBe('MY_FORM_SECTION'); + expect(screen.getByRole('group', { name: 'Settings' }).dataset.pasteElement).toBe('MY_FORM_SECTION'); expect(screen.getByTestId('section-heading').dataset.pasteElement).toBe('MY_FORM_SECTION_HEADING'); expect(screen.getByText('Two column content').dataset.pasteElement).toBe('MY_FORM_CONTROL_TWO_COLUMN'); expect(screen.getByText('Control content').dataset.pasteElement).toBe('MY_FORM_CONTROL'); @@ -110,13 +110,13 @@ describe('Form customization', () => {
    @@ -128,11 +128,11 @@ describe('Form customization', () => { Control content Actions content
    -     + , ); expect(screen.getByRole('form')).toHaveStyleRule('row-gap', '0.25rem'); - expect(screen.getByRole('group', {name: 'Settings'})).toHaveStyleRule('border-style', 'solid'); + expect(screen.getByRole('group', { name: 'Settings' })).toHaveStyleRule('border-style', 'solid'); expect(screen.getByTestId('section-heading')).toHaveStyleRule('background-color', 'rgb(254, 236, 236)'); expect(screen.getByText('Two column content')).toHaveStyleRule('column-gap', '0.25rem'); expect(screen.getByText('Control content')).toHaveStyleRule('flex-grow', 'unset'); @@ -144,13 +144,13 @@ describe('Form customization', () => {
    @@ -166,11 +166,11 @@ describe('Form customization', () => { Control content Actions content
    -     + , ); expect(screen.getByRole('form')).toHaveStyleRule('row-gap', '0.25rem'); - expect(screen.getByRole('group', {name: 'Settings'})).toHaveStyleRule('border-style', 'solid'); + expect(screen.getByRole('group', { name: 'Settings' })).toHaveStyleRule('border-style', 'solid'); expect(screen.getByTestId('section-heading')).toHaveStyleRule('background-color', 'rgb(254, 236, 236)'); expect(screen.getByText('Two column content')).toHaveStyleRule('column-gap', '0.25rem'); expect(screen.getByText('Control content')).toHaveStyleRule('flex-grow', 'unset'); diff --git a/packages/paste-core/components/form/build.js b/packages/paste-core/components/form/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/form/build.js +++ b/packages/paste-core/components/form/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/form/src/Form.tsx b/packages/paste-core/components/form/src/Form.tsx index 62bce7cca4..6082c8dd56 100644 --- a/packages/paste-core/components/form/src/Form.tsx +++ b/packages/paste-core/components/form/src/Form.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps, BoxStyleProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps, BoxStyleProps } from '@twilio-paste/box'; export interface FormProps extends Omit, 'children'> { element?: BoxProps['element']; @@ -9,7 +9,7 @@ export interface FormProps extends Omit, 'ch } export const Form = React.forwardRef( - ({element = 'FORM', maxWidth, children, ...props}, ref) => ( + ({ element = 'FORM', maxWidth, children, ...props }, ref) => ( ( > {children} - ) + ), ); Form.displayName = 'Form'; diff --git a/packages/paste-core/components/form/src/FormActions.tsx b/packages/paste-core/components/form/src/FormActions.tsx index 4f645cff06..08e2199316 100644 --- a/packages/paste-core/components/form/src/FormActions.tsx +++ b/packages/paste-core/components/form/src/FormActions.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; export interface FormActionsProps extends Omit, 'children'> { element?: BoxProps['element']; @@ -8,7 +8,7 @@ export interface FormActionsProps extends Omit( - ({children, element = 'FORM_ACTIONS', ...props}, ref) => ( + ({ children, element = 'FORM_ACTIONS', ...props }, ref) => ( ( > {children} - ) + ), ); FormActions.displayName = 'FormActions'; diff --git a/packages/paste-core/components/form/src/FormControl.tsx b/packages/paste-core/components/form/src/FormControl.tsx index e3b4589c79..d0ca5dd30f 100644 --- a/packages/paste-core/components/form/src/FormControl.tsx +++ b/packages/paste-core/components/form/src/FormControl.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; export interface FormControlProps extends Omit, 'children'> { element?: BoxProps['element']; @@ -8,11 +8,11 @@ export interface FormControlProps extends Omit( - ({children, element = 'FORM_CONTROL', ...props}, ref) => ( + ({ children, element = 'FORM_CONTROL', ...props }, ref) => ( {children} - ) + ), ); FormControl.displayName = 'FormControl'; diff --git a/packages/paste-core/components/form/src/FormControlTwoColumn.tsx b/packages/paste-core/components/form/src/FormControlTwoColumn.tsx index 08b0b2ffa2..1f766ae170 100644 --- a/packages/paste-core/components/form/src/FormControlTwoColumn.tsx +++ b/packages/paste-core/components/form/src/FormControlTwoColumn.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; export interface FormControlTwoColumnProps extends Omit, 'children'> { element?: BoxProps['element']; @@ -8,7 +8,7 @@ export interface FormControlTwoColumnProps extends Omit( - ({children, element = 'FORM_CONTROL_TWO_COLUMN', ...props}, ref) => ( + ({ children, element = 'FORM_CONTROL_TWO_COLUMN', ...props }, ref) => ( {children} - ) + ), ); FormControlTwoColumn.displayName = 'FormControlTwoColumn'; diff --git a/packages/paste-core/components/form/src/FormSection.tsx b/packages/paste-core/components/form/src/FormSection.tsx index 37bafa2d8c..3c1f1e012d 100644 --- a/packages/paste-core/components/form/src/FormSection.tsx +++ b/packages/paste-core/components/form/src/FormSection.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import {useUID} from '@twilio-paste/uid-library'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import { useUID } from '@twilio-paste/uid-library'; -import {FormSectionContext} from './FormSectionContext'; +import { FormSectionContext } from './FormSectionContext'; export interface FormSectionProps extends Omit, 'children'> { element?: BoxProps['element']; @@ -11,11 +11,11 @@ export interface FormSectionProps extends Omit( - ({children, element = 'FORM_SECTION', id: idProp, ...props}, ref) => { + ({ children, element = 'FORM_SECTION', id: idProp, ...props }, ref) => { const id = idProp ? idProp : useUID(); return ( - + ); - } + }, ); FormSection.displayName = 'FormSection'; diff --git a/packages/paste-core/components/form/src/FormSectionDescription.tsx b/packages/paste-core/components/form/src/FormSectionDescription.tsx index b7b67be56f..4305809f17 100644 --- a/packages/paste-core/components/form/src/FormSectionDescription.tsx +++ b/packages/paste-core/components/form/src/FormSectionDescription.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; -import {FormSectionContext} from './FormSectionContext'; +import { FormSectionContext } from './FormSectionContext'; export interface FormSectionDescriptionProps extends Omit, 'children' | 'id'> { element?: BoxProps['element']; @@ -10,8 +10,8 @@ export interface FormSectionDescriptionProps extends Omit( - ({children, element = 'FORM_SECTION_DESCRIPTION', ...props}, ref) => { - const {id: sectionId} = React.useContext(FormSectionContext); + ({ children, element = 'FORM_SECTION_DESCRIPTION', ...props }, ref) => { + const { id: sectionId } = React.useContext(FormSectionContext); return ( ); - } + }, ); FormSectionDescription.displayName = 'FormSectionDescription'; diff --git a/packages/paste-core/components/form/src/FormSectionHeading.tsx b/packages/paste-core/components/form/src/FormSectionHeading.tsx index 1c4aaf54c2..76c760d3be 100644 --- a/packages/paste-core/components/form/src/FormSectionHeading.tsx +++ b/packages/paste-core/components/form/src/FormSectionHeading.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {Heading} from '@twilio-paste/heading'; -import type {HeadingProps} from '@twilio-paste/heading'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; +import { Heading } from '@twilio-paste/heading'; +import type { HeadingProps } from '@twilio-paste/heading'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; export interface FormSectionHeadingProps extends Omit, 'children'> { element?: BoxProps['element']; @@ -11,13 +11,13 @@ export interface FormSectionHeadingProps extends Omit( - ({children, element = 'FORM_SECTION_HEADING', variant = 'heading40', ...props}, ref) => ( + ({ children, element = 'FORM_SECTION_HEADING', variant = 'heading40', ...props }, ref) => ( {children} - ) + ), ); FormSectionHeading.displayName = 'FormSectionHeading'; diff --git a/packages/paste-core/components/form/stories/index.stories.tsx b/packages/paste-core/components/form/stories/index.stories.tsx index 3e5d46fc9c..ec5706e047 100644 --- a/packages/paste-core/components/form/stories/index.stories.tsx +++ b/packages/paste-core/components/form/stories/index.stories.tsx @@ -1,23 +1,23 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/types'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {Box} from '@twilio-paste/box'; -import {Button} from '@twilio-paste/button'; -import {Callout, CalloutHeading, CalloutList, CalloutListItem} from '@twilio-paste/callout'; -import {CheckboxGroup, Checkbox} from '@twilio-paste/checkbox'; -import {Combobox, MultiselectCombobox} from '@twilio-paste/combobox'; -import {Heading} from '@twilio-paste/heading'; -import {HelpText} from '@twilio-paste/help-text'; -import {InformationIcon} from '@twilio-paste/icons/esm/InformationIcon'; -import {Input} from '@twilio-paste/input'; -import {Label} from '@twilio-paste/label'; -import {Paragraph} from '@twilio-paste/paragraph'; -import {RadioGroup, Radio} from '@twilio-paste/radio-group'; -import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only'; -import {Select, Option} from '@twilio-paste/select'; -import {Separator} from '@twilio-paste/separator'; -import {useTheme} from '@twilio-paste/theme'; -import {useUIDSeed, useUID} from '@twilio-paste/uid-library'; +import type { StoryFn } from '@storybook/types'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { Box } from '@twilio-paste/box'; +import { Button } from '@twilio-paste/button'; +import { Callout, CalloutHeading, CalloutList, CalloutListItem } from '@twilio-paste/callout'; +import { CheckboxGroup, Checkbox } from '@twilio-paste/checkbox'; +import { Combobox, MultiselectCombobox } from '@twilio-paste/combobox'; +import { Heading } from '@twilio-paste/heading'; +import { HelpText } from '@twilio-paste/help-text'; +import { InformationIcon } from '@twilio-paste/icons/esm/InformationIcon'; +import { Input } from '@twilio-paste/input'; +import { Label } from '@twilio-paste/label'; +import { Paragraph } from '@twilio-paste/paragraph'; +import { RadioGroup, Radio } from '@twilio-paste/radio-group'; +import { ScreenReaderOnly } from '@twilio-paste/screen-reader-only'; +import { Select, Option } from '@twilio-paste/select'; +import { Separator } from '@twilio-paste/separator'; +import { useTheme } from '@twilio-paste/theme'; +import { useUIDSeed, useUID } from '@twilio-paste/uid-library'; import { Form, @@ -59,22 +59,22 @@ const countriesList = [ ]; const statesList = [ - {value: 'AK', name: 'Alaska'}, - {value: 'AL', name: 'Alabama'}, - {value: 'AZ', name: 'Arizona'}, - {value: 'CA', name: 'California'}, - {value: 'CO', name: 'Colorado'}, - {value: 'CT', name: 'Connecticut'}, - {value: 'ID', name: 'Idaho'}, - {value: 'IL', name: 'Illinois'}, - {value: 'IN', name: 'Indiana'}, - {value: 'KS', name: 'Kansas'}, - {value: 'KY', name: 'Kentucky'}, - {value: 'LA', name: 'Louisiana'}, - {value: 'MN', name: 'Minnesota'}, - {value: 'MO', name: 'Missouri'}, - {value: 'MS', name: 'Mississippi'}, - {value: 'MT', name: 'Montana'}, + { value: 'AK', name: 'Alaska' }, + { value: 'AL', name: 'Alabama' }, + { value: 'AZ', name: 'Arizona' }, + { value: 'CA', name: 'California' }, + { value: 'CO', name: 'Colorado' }, + { value: 'CT', name: 'Connecticut' }, + { value: 'ID', name: 'Idaho' }, + { value: 'IL', name: 'Illinois' }, + { value: 'IN', name: 'Indiana' }, + { value: 'KS', name: 'Kansas' }, + { value: 'KY', name: 'Kentucky' }, + { value: 'LA', name: 'Louisiana' }, + { value: 'MN', name: 'Minnesota' }, + { value: 'MO', name: 'Missouri' }, + { value: 'MS', name: 'Mississippi' }, + { value: 'MT', name: 'Montana' }, ]; const componentsList = [ @@ -103,7 +103,7 @@ export const Default: StoryFn = () => { const [comboboxInputValue, setComboboxInputValue] = React.useState(''); const filteredItems = React.useMemo( () => getMultiselectComboboxFilteredItems(comboboxInputValue), - [comboboxInputValue] + [comboboxInputValue], ); return ( @@ -136,7 +136,7 @@ export const Default: StoryFn = () => { helpText="Paste components are the building blocks of your product UI." items={filteredItems} initialSelectedItems={componentsList.slice(1, 3)} - onInputValueChange={({inputValue: newInputValue = ''}) => { + onInputValueChange={({ inputValue: newInputValue = '' }) => { setComboboxInputValue(newInputValue); }} /> @@ -174,7 +174,7 @@ export const Default: StoryFn = () => { - {statesList.map(({value, name}) => ( + {statesList.map(({ value, name }) => ( @@ -359,7 +359,7 @@ export const FixedWidthForm: StoryFn = () => { - {statesList.map(({value, name}) => ( + {statesList.map(({ value, name }) => ( diff --git a/packages/paste-core/components/heading/__tests__/heading.test.tsx b/packages/paste-core/components/heading/__tests__/heading.test.tsx index f748ca2187..57f74e454b 100644 --- a/packages/paste-core/components/heading/__tests__/heading.test.tsx +++ b/packages/paste-core/components/heading/__tests__/heading.test.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import {Theme} from '@twilio-paste/theme'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render, screen } from '@testing-library/react'; +import { Theme } from '@twilio-paste/theme'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {Heading} from '../src'; +import { Heading } from '../src'; describe('Heading', () => { describe('Render', () => { @@ -13,9 +13,9 @@ describe('Heading', () => { This is an H1 - + , ); - const renderedHeading = screen.getByRole('heading', {level: 1}); + const renderedHeading = screen.getByRole('heading', { level: 1 }); expect(renderedHeading).not.toBeNull(); expect(renderedHeading).toHaveStyleRule('margin-bottom', '1.5rem'); expect(renderedHeading).toHaveStyleRule('font-size', '2rem'); @@ -29,9 +29,9 @@ describe('Heading', () => { This is an H2 - + , ); - const renderedHeading = screen.getByRole('heading', {level: 2}); + const renderedHeading = screen.getByRole('heading', { level: 2 }); expect(renderedHeading).not.toBeNull(); expect(renderedHeading).toHaveStyleRule('margin-bottom', '1.25rem'); expect(renderedHeading).toHaveStyleRule('font-size', '1.5rem'); @@ -45,9 +45,9 @@ describe('Heading', () => { This is an H3 - + , ); - const renderedHeading = screen.getByRole('heading', {level: 3}); + const renderedHeading = screen.getByRole('heading', { level: 3 }); expect(renderedHeading).not.toBeNull(); expect(renderedHeading).toHaveStyleRule('margin-bottom', '1rem'); expect(renderedHeading).toHaveStyleRule('font-size', '1.25rem'); @@ -61,9 +61,9 @@ describe('Heading', () => { This is an H4 - + , ); - const renderedHeading = screen.getByRole('heading', {level: 4}); + const renderedHeading = screen.getByRole('heading', { level: 4 }); expect(renderedHeading).not.toBeNull(); expect(renderedHeading).toHaveStyleRule('margin-bottom', '0.75rem'); expect(renderedHeading).toHaveStyleRule('font-size', '1rem'); @@ -77,9 +77,9 @@ describe('Heading', () => { This is an H5 - + , ); - const renderedHeading = screen.getByRole('heading', {level: 5}); + const renderedHeading = screen.getByRole('heading', { level: 5 }); expect(renderedHeading).not.toBeNull(); expect(renderedHeading).toHaveStyleRule('margin-bottom', '0.5rem'); expect(renderedHeading).toHaveStyleRule('font-size', '0.875rem'); @@ -93,9 +93,9 @@ describe('Heading', () => { This is an H6 - + , ); - const renderedHeading = screen.getByRole('heading', {level: 6}); + const renderedHeading = screen.getByRole('heading', { level: 6 }); expect(renderedHeading).not.toBeNull(); expect(renderedHeading).toHaveStyleRule('margin-bottom', '0.5rem'); expect(renderedHeading).toHaveStyleRule('font-size', '0.75rem'); @@ -109,9 +109,9 @@ describe('Heading', () => { This is an italic H2 - + , ); - const renderedHeading = screen.getByRole('heading', {level: 2}); + const renderedHeading = screen.getByRole('heading', { level: 2 }); const renderedHeadingIdiomatic = screen.getByText('This is an italic H2').closest('i'); expect(renderedHeading).not.toBeNull(); expect(renderedHeadingIdiomatic).not.toBeNull(); @@ -127,9 +127,9 @@ describe('Heading', () => { no margin heading - + , ); - const renderedHeading = screen.getByRole('heading', {level: 2}); + const renderedHeading = screen.getByRole('heading', { level: 2 }); expect(renderedHeading).not.toBeNull(); expect(renderedHeading).toHaveStyleRule('margin-bottom', '0'); }); @@ -140,7 +140,7 @@ describe('Heading', () => { render( heading - + , ); expect(screen.getByRole('heading').getAttribute('data-paste-element')).toEqual('HEADING'); }); @@ -148,7 +148,7 @@ describe('Heading', () => { render( heading - + , ); expect(screen.getByRole('heading').getAttribute('data-paste-element')).toEqual('foo'); }); @@ -160,12 +160,12 @@ describe('Heading', () => { Custom heading - + , ); const renderedHeading = screen.getByRole('heading'); expect(renderedHeading).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); @@ -193,7 +193,7 @@ describe('Heading', () => { Custom heading - + , ); const renderedHeading = screen.getByRole('heading'); expect(renderedHeading).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); @@ -206,12 +206,12 @@ describe('Heading', () => { Custom heading - + , ); const renderedHeading = screen.getByRole('heading'); expect(renderedHeading).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); @@ -239,7 +239,7 @@ describe('Heading', () => { Custom heading - + , ); const renderedHeading = screen.getByRole('heading'); expect(renderedHeading).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); diff --git a/packages/paste-core/components/heading/build.js b/packages/paste-core/components/heading/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/heading/build.js +++ b/packages/paste-core/components/heading/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/heading/src/index.tsx b/packages/paste-core/components/heading/src/index.tsx index baf0f9865a..39c585580d 100644 --- a/packages/paste-core/components/heading/src/index.tsx +++ b/packages/paste-core/components/heading/src/index.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import type {TextStyleProps} from '@twilio-paste/text'; -import {Text, safelySpreadTextProps} from '@twilio-paste/text'; +import type { TextStyleProps } from '@twilio-paste/text'; +import { Text, safelySpreadTextProps } from '@twilio-paste/text'; -import type {HeadingVariants, HeadingProps, AsTags} from './types'; +import type { HeadingVariants, HeadingProps, AsTags } from './types'; function getHeadingProps(headingVariant?: HeadingVariants, marginBottom?: 'space0'): TextStyleProps { switch (headingVariant) { @@ -63,7 +63,7 @@ function getHeadingProps(headingVariant?: HeadingVariants, marginBottom?: 'space } const Heading = React.forwardRef( - ({as, children, display = 'block', element = 'HEADING', id, marginBottom, variant, ...props}, ref) => { + ({ as, children, display = 'block', element = 'HEADING', id, marginBottom, variant, ...props }, ref) => { return ( ( {children} ); - } + }, ); Heading.displayName = 'Heading'; -export type {HeadingProps, HeadingVariants, AsTags as asTags}; -export {Heading}; +export type { HeadingProps, HeadingVariants, AsTags as asTags }; +export { Heading }; diff --git a/packages/paste-core/components/heading/src/types.ts b/packages/paste-core/components/heading/src/types.ts index bddac3a58e..c7416442a5 100644 --- a/packages/paste-core/components/heading/src/types.ts +++ b/packages/paste-core/components/heading/src/types.ts @@ -1,5 +1,5 @@ -import type {TextProps} from '@twilio-paste/text'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import type { TextProps } from '@twilio-paste/text'; +import type { HTMLPasteProps } from '@twilio-paste/types'; export type AsTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'label' | 'span' | 'header'; export type HeadingVariants = 'heading10' | 'heading20' | 'heading30' | 'heading40' | 'heading50' | 'heading60'; diff --git a/packages/paste-core/components/heading/stories/index.stories.tsx b/packages/paste-core/components/heading/stories/index.stories.tsx index a2d4cc5452..e567dbee2a 100644 --- a/packages/paste-core/components/heading/stories/index.stories.tsx +++ b/packages/paste-core/components/heading/stories/index.stories.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {useTheme} from '@twilio-paste/theme'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {Card} from '@twilio-paste/card'; -import {Stack} from '@twilio-paste/stack'; +import type { StoryFn } from '@storybook/react'; +import { useTheme } from '@twilio-paste/theme'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { Card } from '@twilio-paste/card'; +import { Stack } from '@twilio-paste/stack'; -import {Heading} from '../src'; +import { Heading } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -145,7 +145,7 @@ export const Heading60NoMargin = (): React.ReactNode => { Heading60NoMargin.storyName = 'heading60 no margin'; -export const CustomHeading: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const CustomHeading: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( diff --git a/packages/paste-core/components/help-text/__tests__/helptext.test.tsx b/packages/paste-core/components/help-text/__tests__/helptext.test.tsx index 786dd7801d..777ab97c00 100644 --- a/packages/paste-core/components/help-text/__tests__/helptext.test.tsx +++ b/packages/paste-core/components/help-text/__tests__/helptext.test.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {render, screen} from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { render, screen } from '@testing-library/react'; -import {HelpText} from '../src'; +import { HelpText } from '../src'; describe('HelpText marginTop prop', () => { render(); @@ -14,17 +14,17 @@ describe('HelpText marginTop prop', () => { describe('HelpText HTML attributes', () => { it('should set element data attribute for help text', (): void => { - const {container} = render(This is help text.); + const { container } = render(This is help text.); expect(container.querySelector('[data-paste-element="HELP_TEXT"]')).toBeInTheDocument(); expect(screen.getByTestId('help_text').getAttribute('data-paste-element')).toEqual('HELP_TEXT'); }); it('should set custom element data attribute for flex wrapper and help text', (): void => { - const {container} = render( + const { container } = render( This is help text. - + , ); expect(container.querySelector('[data-paste-element="foo"]')).toBeInTheDocument(); @@ -42,7 +42,7 @@ describe('Customization', () => { HELP_TEXT: { color: 'colorTextSuccess', fontWeight: 'fontWeightBold', - variants: {error: {color: 'colorTextWarningStrong'}}, + variants: { error: { color: 'colorTextWarningStrong' } }, }, }} > @@ -50,7 +50,7 @@ describe('Customization', () => { This is error help text. - + , ); expect(screen.getByTestId('help_text')).toHaveStyleRule('font-weight', '700'); expect(screen.getByTestId('help_text')).toHaveStyleRule('color', 'rgb(14, 124, 58)'); @@ -66,7 +66,7 @@ describe('Customization', () => { foo: { color: 'colorTextSuccess', fontWeight: 'fontWeightBold', - variants: {error: {color: 'colorTextWarningStrong'}}, + variants: { error: { color: 'colorTextWarningStrong' } }, }, }} > @@ -76,7 +76,7 @@ describe('Customization', () => { This is error help text. - + , ); expect(screen.getByTestId('help_text')).toHaveStyleRule('font-weight', '700'); expect(screen.getByTestId('help_text')).toHaveStyleRule('color', 'rgb(14, 124, 58)'); diff --git a/packages/paste-core/components/help-text/build.js b/packages/paste-core/components/help-text/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/help-text/build.js +++ b/packages/paste-core/components/help-text/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/help-text/src/HelpText.tsx b/packages/paste-core/components/help-text/src/HelpText.tsx index 9ffc5fe5b4..c9041f9299 100644 --- a/packages/paste-core/components/help-text/src/HelpText.tsx +++ b/packages/paste-core/components/help-text/src/HelpText.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import type {HTMLPasteProps, ValueOf} from '@twilio-paste/types'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import type {TextColor} from '@twilio-paste/style-props'; -import {ErrorIcon} from '@twilio-paste/icons/esm/ErrorIcon'; -import {SuccessIcon} from '@twilio-paste/icons/esm/SuccessIcon'; -import {WarningIcon} from '@twilio-paste/icons/esm/WarningIcon'; +import type { HTMLPasteProps, ValueOf } from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import type { TextColor } from '@twilio-paste/style-props'; +import { ErrorIcon } from '@twilio-paste/icons/esm/ErrorIcon'; +import { SuccessIcon } from '@twilio-paste/icons/esm/SuccessIcon'; +import { WarningIcon } from '@twilio-paste/icons/esm/WarningIcon'; export const HelpTextVariants = { DEFAULT: 'default', @@ -74,8 +74,8 @@ const VariantOptions: VariantOptionsProps = { }; const HelpText = React.forwardRef( - ({marginTop, children, variant = 'default', element = 'HELP_TEXT', ...props}, ref) => { - const {textColor, icon} = VariantOptions[variant]; + ({ marginTop, children, variant = 'default', element = 'HELP_TEXT', ...props }, ref) => { + const { textColor, icon } = VariantOptions[variant]; return ( ( {children} ); - } + }, ); HelpText.displayName = 'HelpText'; -export {HelpText}; +export { HelpText }; diff --git a/packages/paste-core/components/help-text/stories/input.stories.tsx b/packages/paste-core/components/help-text/stories/input.stories.tsx index 7c433e4b39..75c43702e9 100644 --- a/packages/paste-core/components/help-text/stories/input.stories.tsx +++ b/packages/paste-core/components/help-text/stories/input.stories.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {Box} from '@twilio-paste/box'; -import {Paragraph} from '@twilio-paste/paragraph'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {Stack} from '@twilio-paste/stack'; -import {Card} from '@twilio-paste/card'; -import {useTheme} from '@twilio-paste/theme'; +import type { StoryFn } from '@storybook/react'; +import { Box } from '@twilio-paste/box'; +import { Paragraph } from '@twilio-paste/paragraph'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { Stack } from '@twilio-paste/stack'; +import { Card } from '@twilio-paste/card'; +import { useTheme } from '@twilio-paste/theme'; -import {HelpText} from '../src'; +import { HelpText } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -42,7 +42,7 @@ export const Inverse = (): React.ReactNode => { Inverse.storyName = 'Inverse'; -export const Customized: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const Customized: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( <> @@ -67,9 +67,9 @@ export const Customized: StoryFn = (_args, {parameters: {isTestEnvironment}}) => color: 'colorTextSuccess', fontWeight: 'fontWeightBold', variants: { - error: {color: 'colorTextWarningStrong'}, - success: {color: 'colorTextLinkStrong'}, - warning: {color: 'colorTextErrorStronger'}, + error: { color: 'colorTextWarningStrong' }, + success: { color: 'colorTextLinkStrong' }, + warning: { color: 'colorTextErrorStronger' }, }, }, }} @@ -92,9 +92,9 @@ export const Customized: StoryFn = (_args, {parameters: {isTestEnvironment}}) => color: 'colorTextSuccess', fontWeight: 'fontWeightBold', variants: { - error: {color: 'colorTextWarningStrong'}, - success: {color: 'colorTextLinkStrong'}, - warning: {color: 'colorTextErrorStronger'}, + error: { color: 'colorTextWarningStrong' }, + success: { color: 'colorTextLinkStrong' }, + warning: { color: 'colorTextErrorStronger' }, }, }, }} diff --git a/packages/paste-core/components/in-page-navigation/__tests__/index.spec.tsx b/packages/paste-core/components/in-page-navigation/__tests__/index.spec.tsx index ddc8c9b8b5..223faa077d 100644 --- a/packages/paste-core/components/in-page-navigation/__tests__/index.spec.tsx +++ b/packages/paste-core/components/in-page-navigation/__tests__/index.spec.tsx @@ -1,27 +1,27 @@ import * as React from 'react'; -import {render} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {InPageNavigation, InPageNavigationItem} from '../src'; +import { InPageNavigation, InPageNavigationItem } from '../src'; describe('InPageNavigation', () => { it('should render a nav with correct aria-label', () => { - const {getByRole} = render( + const { getByRole } = render( page 1 page 2 - + , ); expect(getByRole('navigation')).toHaveAttribute('aria-label', 'my-nav'); }); it('should render a list with list items and links', () => { - const {getAllByRole} = render( + const { getAllByRole } = render( page 1 page 2 - + , ); expect(getAllByRole('list')).toHaveLength(1); @@ -30,20 +30,20 @@ describe('InPageNavigation', () => { }); it('should use the currentPage prop to apply aria-current', () => { - const {getByText} = render( + const { getByText } = render( page 1 page 2 - + , ); expect(getByText('page 2')).toHaveAttribute('aria-current', 'page'); }); it('should pass props given to InPageNavigationItem onto its child', () => { - const {getByText} = render( + const { getByText } = render( page 1 @@ -51,7 +51,7 @@ describe('InPageNavigation', () => { page 2 - + , ); expect(getByText('page 1')).toHaveAttribute('data-test-id', 'page-1'); @@ -60,10 +60,10 @@ describe('InPageNavigation', () => { describe('Customization', () => { it('should set a default element name', () => { - const {getByRole} = render( + const { getByRole } = render( page 1 - + , ); expect(getByRole('navigation')).toHaveAttribute('data-paste-element', 'IN_PAGE_NAVIGATION'); @@ -73,12 +73,12 @@ describe('Customization', () => { }); it('should set a custom element name when provided', () => { - const {getByRole} = render( + const { getByRole } = render( page 1 - + , ); expect(getByRole('navigation')).toHaveAttribute('data-paste-element', 'MY_IN_PAGE_NAVIGATION'); @@ -88,21 +88,21 @@ describe('Customization', () => { }); it('should add custom styles to default element names', () => { - const {getByRole} = render( + const { getByRole } = render( page 1 - + , ); expect(getByRole('navigation')).toHaveStyleRule('font-weight', '400'); @@ -112,15 +112,15 @@ describe('Customization', () => { }); it('should add custom styles to custom element names', () => { - const {getByRole} = render( + const { getByRole } = render( @@ -128,7 +128,7 @@ describe('Customization', () => { page 1 - + , ); expect(getByRole('navigation')).toHaveStyleRule('font-weight', '400'); diff --git a/packages/paste-core/components/in-page-navigation/build.js b/packages/paste-core/components/in-page-navigation/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/in-page-navigation/build.js +++ b/packages/paste-core/components/in-page-navigation/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/in-page-navigation/src/InPageNavigation.tsx b/packages/paste-core/components/in-page-navigation/src/InPageNavigation.tsx index 2d68f383e9..7c6ee1f6b6 100644 --- a/packages/paste-core/components/in-page-navigation/src/InPageNavigation.tsx +++ b/packages/paste-core/components/in-page-navigation/src/InPageNavigation.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; -import type {Variants} from './types'; -import {InPageNavigationContext} from './InPageNavigationContext'; +import type { Variants } from './types'; +import { InPageNavigationContext } from './InPageNavigationContext'; export interface InPageNavigationProps extends Omit, 'children'> { children?: React.ReactNode; @@ -14,11 +14,11 @@ export interface InPageNavigationProps extends Omit( - ({element = 'IN_PAGE_NAVIGATION', variant = 'default', marginBottom, children, ...props}, ref) => { + ({ element = 'IN_PAGE_NAVIGATION', variant = 'default', marginBottom, children, ...props }, ref) => { const isFullWidth = variant === 'fullWidth' || variant === 'inverse_fullWidth'; return ( - + ); - } + }, ); InPageNavigation.displayName = 'InPageNavigation'; -export {InPageNavigation}; +export { InPageNavigation }; diff --git a/packages/paste-core/components/in-page-navigation/src/InPageNavigationContext.tsx b/packages/paste-core/components/in-page-navigation/src/InPageNavigationContext.tsx index 6b48a7412d..f460d464b1 100644 --- a/packages/paste-core/components/in-page-navigation/src/InPageNavigationContext.tsx +++ b/packages/paste-core/components/in-page-navigation/src/InPageNavigationContext.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import type {Variants} from './types'; +import type { Variants } from './types'; interface InPageNavigationContextValue { variant?: Variants; @@ -10,4 +10,4 @@ const InPageNavigationContext = React.createContext { } const InPageNavigationItem = React.forwardRef( - ({element = 'IN_PAGE_NAVIGATION_ITEM', currentPage = false, href, children, ...props}, ref) => { - const {variant} = React.useContext(InPageNavigationContext); + ({ element = 'IN_PAGE_NAVIGATION_ITEM', currentPage = false, href, children, ...props }, ref) => { + const { variant } = React.useContext(InPageNavigationContext); const isFullWidth = variant === 'fullWidth' || variant === 'inverse_fullWidth'; const isInverse = variant === 'inverse' || variant === 'inverse_fullWidth'; let currentPageStyles = {}; @@ -107,9 +107,9 @@ const InPageNavigationItem = React.forwardRef ); - } + }, ); InPageNavigationItem.displayName = 'InPageNavigationItem'; -export {InPageNavigationItem}; +export { InPageNavigationItem }; diff --git a/packages/paste-core/components/in-page-navigation/stories/index.stories.tsx b/packages/paste-core/components/in-page-navigation/stories/index.stories.tsx index e6379b04ee..b7bc3c191d 100644 --- a/packages/paste-core/components/in-page-navigation/stories/index.stories.tsx +++ b/packages/paste-core/components/in-page-navigation/stories/index.stories.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {useTheme} from '@twilio-paste/theme'; -import {useUID} from '@twilio-paste/uid-library'; -import {Box} from '@twilio-paste/box'; +import type { StoryFn } from '@storybook/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { useTheme } from '@twilio-paste/theme'; +import { useUID } from '@twilio-paste/uid-library'; +import { Box } from '@twilio-paste/box'; -import {InPageNavigation, InPageNavigationItem} from '../src'; +import { InPageNavigation, InPageNavigationItem } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -92,10 +92,10 @@ export const Customized: StoryFn = () => { {/* using UID here to make unique labels for landmarks in Storybook for axe testing */} diff --git a/packages/paste-core/components/inline-code/__tests__/index.spec.tsx b/packages/paste-core/components/inline-code/__tests__/index.spec.tsx index beb135b369..6f4a6922f4 100644 --- a/packages/paste-core/components/inline-code/__tests__/index.spec.tsx +++ b/packages/paste-core/components/inline-code/__tests__/index.spec.tsx @@ -1,30 +1,30 @@ import * as React from 'react'; -import {render} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {Box} from '@twilio-paste/box'; +import { render } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { Box } from '@twilio-paste/box'; -import {InlineCode} from '../src'; +import { InlineCode } from '../src'; describe('InlineCode', () => { it('should render text in a tag', () => { - const {getByTestId} = render( + const { getByTestId } = render( sid - +     , ); expect(getByTestId('inline-code').querySelector('code')).not.toBeNull(); }); it('should have a default element attribute', () => { - const {getByText} = render(sid); + const { getByText } = render(sid); expect(getByText('sid').getAttribute('data-paste-element')).toEqual('INLINE_CODE'); }); it('should have a custom element attribute when set', () => { - const {getByText} = render(sid); + const { getByText } = render(sid); expect(getByText('sid').getAttribute('data-paste-element')).toEqual('MY_INLINE_CODE'); }); it('should set custom styles using the default element attribute', () => { - const {getByText} = render( + const { getByText } = render( { }} > sid - + , ); expect(getByText('sid')).toHaveStyleRule('border-width', '2px'); }); it('should set custom styles using a custom element attribute', () => { - const {getByText} = render( + const { getByText } = render( { }} > sid - + , ); expect(getByText('sid')).toHaveStyleRule('border-width', '2px'); }); diff --git a/packages/paste-core/components/inline-code/build.js b/packages/paste-core/components/inline-code/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/inline-code/build.js +++ b/packages/paste-core/components/inline-code/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/inline-code/src/index.tsx b/packages/paste-core/components/inline-code/src/index.tsx index 8e4eb49148..d524f7221e 100644 --- a/packages/paste-core/components/inline-code/src/index.tsx +++ b/packages/paste-core/components/inline-code/src/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; /** * Inline Code style variants. @@ -23,7 +23,7 @@ export interface InlineCodeProps extends Partial( - ({children, element = 'INLINE_CODE', variant = 'default', ...props}, ref) => { + ({ children, element = 'INLINE_CODE', variant = 'default', ...props }, ref) => { return ( ( {children} ); - } + }, ); InlineCode.displayName = 'InlineCode'; -export {InlineCode}; +export { InlineCode }; diff --git a/packages/paste-core/components/inline-code/stories/index.stories.tsx b/packages/paste-core/components/inline-code/stories/index.stories.tsx index 030a5bb2c3..a72d829cfd 100644 --- a/packages/paste-core/components/inline-code/stories/index.stories.tsx +++ b/packages/paste-core/components/inline-code/stories/index.stories.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {Text} from '@twilio-paste/text'; -import {Box} from '@twilio-paste/box'; -import {Stack} from '@twilio-paste/stack'; -import {useTheme} from '@twilio-paste/theme'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {Heading} from '@twilio-paste/heading'; +import type { StoryFn } from '@storybook/react'; +import { Text } from '@twilio-paste/text'; +import { Box } from '@twilio-paste/box'; +import { Stack } from '@twilio-paste/stack'; +import { useTheme } from '@twilio-paste/theme'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { Heading } from '@twilio-paste/heading'; -import {InlineCode} from '../src'; +import { InlineCode } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -94,7 +94,7 @@ export const DisplayingAPIKey: StoryFn = () => { ); }; -export const Customization: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const Customization: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( { it('should render', () => { - const {container} = testRender( + const { container } = testRender(
    - + , ); expect(container.querySelector('fieldset')).not.toBeNull(); }); it('should render a legend', () => { - const {getByText} = testRender( + const { getByText } = testRender(
    - + , ); expect(getByText('This is a group legend')).not.toBeNull(); }); @@ -33,7 +33,7 @@ describe('InlineControlGroup', () => { testRender(
    - + , ); const fieldset = screen.getByRole('group'); @@ -44,20 +44,20 @@ describe('InlineControlGroup', () => { it('renders a helpText message when helpText prop is present', () => { const helpText = 'I am a helpText message'; - const {getByText} = testRender( + const { getByText } = testRender(
    - + , ); expect(getByText(helpText)).toBeDefined(); }); it('renders an errorText message when errorText prop is present', () => { const errorText = 'I am an errorText message'; - const {getByText} = testRender( + const { getByText } = testRender(
    - + , ); expect(getByText(errorText)).toBeDefined(); }); @@ -65,21 +65,21 @@ describe('InlineControlGroup', () => { describe('Customization', () => { it('Should set a default element data attribute for Inline Control Group', (): void => { - const {container} = testRender( + const { container } = testRender(
    - + , ); expect(screen.getByTestId('inline-control-group')).toHaveAttribute('data-paste-element', 'INLINE_CONTROL_GROUP'); expect(container.querySelector('[data-paste-element="INLINE_CONTROL_GROUP_SET"]')).toBeInTheDocument(); expect(container.querySelector('[data-paste-element="INLINE_CONTROL_GROUP_FIELD"]')).toBeInTheDocument(); expect( - container.querySelector('[data-paste-element="INLINE_CONTROL_GROUP_ERROR_TEXT_WRAPPER"]') + container.querySelector('[data-paste-element="INLINE_CONTROL_GROUP_ERROR_TEXT_WRAPPER"]'), ).toBeInTheDocument(); }); it('Should set a custom element data attribute for custom named Inline Control Group', (): void => { - const {container} = testRender( + const { container } = testRender( { errorText="error" >
    - + , ); expect(screen.getByTestId('inline-control-group')).toHaveAttribute('data-paste-element', 'MY_INLINE_CONTROL_GROUP'); expect(container.querySelector('[data-paste-element="MY_INLINE_CONTROL_GROUP_SET"]')).toBeInTheDocument(); expect(container.querySelector('[data-paste-element="MY_INLINE_CONTROL_GROUP_FIELD"]')).toBeInTheDocument(); expect( - container.querySelector('[data-paste-element="MY_INLINE_CONTROL_GROUP_ERROR_TEXT_WRAPPER"]') + container.querySelector('[data-paste-element="MY_INLINE_CONTROL_GROUP_ERROR_TEXT_WRAPPER"]'), ).toBeInTheDocument(); }); it('Should add custom styling to default Inline Control Group', (): void => { - const {container} = testRender( + const { container } = testRender(
    - + , ); expect(screen.getByTestId('inline-control-group')).toHaveStyleRule('margin', '1.25rem'); expect(container.querySelector('[data-paste-element="INLINE_CONTROL_GROUP_SET"]')).toHaveStyleRule( 'margin-left', - '1.25rem' + '1.25rem', ); expect(container.querySelector('[data-paste-element="INLINE_CONTROL_GROUP_FIELD"]')).toHaveStyleRule( 'color', - 'rgb(14, 124, 58)' + 'rgb(14, 124, 58)', ); expect(container.querySelector('[data-paste-element="INLINE_CONTROL_GROUP_ERROR_TEXT_WRAPPER"]')).toHaveStyleRule( 'margin-top', - '1.25rem' + '1.25rem', ); }); it('Should add custom styling to custom named Inline Control Group', (): void => { - const {container} = testRender( + const { container } = testRender( { >
    - + , ); expect(screen.getByTestId('inline-control-group')).toHaveStyleRule('margin', '1.25rem'); expect(container.querySelector('[data-paste-element="MY_INLINE_CONTROL_GROUP_SET"]')).toHaveStyleRule( 'margin-left', - '1.25rem' + '1.25rem', ); expect(container.querySelector('[data-paste-element="MY_INLINE_CONTROL_GROUP_FIELD"]')).toHaveStyleRule( 'color', - 'rgb(14, 124, 58)' + 'rgb(14, 124, 58)', ); expect( - container.querySelector('[data-paste-element="MY_INLINE_CONTROL_GROUP_ERROR_TEXT_WRAPPER"]') + container.querySelector('[data-paste-element="MY_INLINE_CONTROL_GROUP_ERROR_TEXT_WRAPPER"]'), ).toHaveStyleRule('margin-top', '1.25rem'); }); }); diff --git a/packages/paste-core/components/inline-control-group/build.js b/packages/paste-core/components/inline-control-group/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/inline-control-group/build.js +++ b/packages/paste-core/components/inline-control-group/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/inline-control-group/src/InlineControlGroup.tsx b/packages/paste-core/components/inline-control-group/src/InlineControlGroup.tsx index 3bac2b93db..d9360a9f0d 100644 --- a/packages/paste-core/components/inline-control-group/src/InlineControlGroup.tsx +++ b/packages/paste-core/components/inline-control-group/src/InlineControlGroup.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps, type BoxProps, type BoxStyleProps} from '@twilio-paste/box'; -import {Label} from '@twilio-paste/label'; -import {HelpText} from '@twilio-paste/help-text'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps, type BoxProps, type BoxStyleProps } from '@twilio-paste/box'; +import { Label } from '@twilio-paste/label'; +import { HelpText } from '@twilio-paste/help-text'; +import type { HTMLPasteProps } from '@twilio-paste/types'; export interface InlineControlGroupProps extends Pick, @@ -33,7 +33,7 @@ const InlineControlGroup = React.forwardRef { const isVisualPicker = Boolean(fieldStyleProps); // This prop is only used in Visual Picker @@ -97,9 +97,9 @@ const InlineControlGroup = React.forwardRef ); - } + }, ); InlineControlGroup.displayName = 'InlineControlGroup'; -export {InlineControlGroup}; +export { InlineControlGroup }; diff --git a/packages/paste-core/components/inline-control-group/stories/inline-control-group.stories.tsx b/packages/paste-core/components/inline-control-group/stories/inline-control-group.stories.tsx index 1ac6d402a9..21844e52b2 100644 --- a/packages/paste-core/components/inline-control-group/stories/inline-control-group.stories.tsx +++ b/packages/paste-core/components/inline-control-group/stories/inline-control-group.stories.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {Box} from '@twilio-paste/box'; -import {Grid, Column} from '@twilio-paste/grid'; -import {Paragraph} from '@twilio-paste/paragraph'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {useTheme} from '@twilio-paste/theme'; +import type { StoryFn } from '@storybook/react'; +import { Box } from '@twilio-paste/box'; +import { Grid, Column } from '@twilio-paste/grid'; +import { Paragraph } from '@twilio-paste/paragraph'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { useTheme } from '@twilio-paste/theme'; -import {InlineControlGroup} from '../src'; -import type {InlineControlGroupProps} from '../src'; +import { InlineControlGroup } from '../src'; +import type { InlineControlGroupProps } from '../src'; -const MockChild: React.FC = ({children}) => { +const MockChild: React.FC = ({ children }) => { return {children}; }; @@ -21,7 +21,7 @@ const MockControlGroup: React.FC< element?: string; orientation?: InlineControlGroupProps['orientation']; }> -> = ({showRequired, showHelpText, showErrorText, element, orientation = 'vertical'}) => { +> = ({ showRequired, showHelpText, showErrorText, element, orientation = 'vertical' }) => { return ( { ); }; -export const Customized: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const Customized: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( Using default element name: diff --git a/packages/paste-core/components/input-box/__tests__/input-box.test.tsx b/packages/paste-core/components/input-box/__tests__/input-box.test.tsx index ff26dc30ca..46ef87141c 100644 --- a/packages/paste-core/components/input-box/__tests__/input-box.test.tsx +++ b/packages/paste-core/components/input-box/__tests__/input-box.test.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render, screen } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {InputBox} from '../src'; +import { InputBox } from '../src'; describe('HTML attributes', () => { it('should set a element data attribute for InputBox', () => { @@ -22,11 +22,11 @@ describe('Customization', () => { input-box - + , ); const renderedInputBox = screen.getByText('input-box'); expect(renderedInputBox).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); @@ -50,7 +50,7 @@ describe('Customization', () => { input-box - + , ); const renderedInputBox = screen.getByText('input-box'); expect(renderedInputBox).toHaveStyleRule('background-color', 'rgb(0, 20, 137)'); @@ -61,11 +61,11 @@ describe('Customization', () => { input-box - + , ); const renderedInputBox = screen.getByText('input-box'); expect(renderedInputBox).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); @@ -89,7 +89,7 @@ describe('Customization', () => { input-box - + , ); const renderedInputBox = screen.getByText('input-box'); expect(renderedInputBox).toHaveStyleRule('background-color', 'rgb(0, 20, 137)'); diff --git a/packages/paste-core/components/input-box/__tests__/input-chevron-wrapper.test.tsx b/packages/paste-core/components/input-box/__tests__/input-chevron-wrapper.test.tsx index 6753d44225..7ef52afbad 100644 --- a/packages/paste-core/components/input-box/__tests__/input-chevron-wrapper.test.tsx +++ b/packages/paste-core/components/input-box/__tests__/input-chevron-wrapper.test.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render, screen } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {getInputChevronIconColor, InputChevronWrapper, InputBox} from '../src'; +import { getInputChevronIconColor, InputChevronWrapper, InputBox } from '../src'; describe('HTML attributes', () => { it('should set a element data attribute for InputChevronWrapper', () => { render( input-chevron - + , ); expect(screen.getByText('input-chevron').getAttribute('data-paste-element')).toEqual('INPUT_CHEVRON_WRAPPER'); }); @@ -18,7 +18,7 @@ describe('HTML attributes', () => { render( input-chevron - + , ); expect(screen.getByText('input-chevron').getAttribute('data-paste-element')).toEqual('FOO_CHEVRON_WRAPPER'); }); @@ -49,13 +49,13 @@ describe('Customization', () => { input-chevron - + , ); const renderedInputChevronWrapper = screen.getByText('input-chevron'); expect(renderedInputChevronWrapper).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); @@ -66,13 +66,13 @@ describe('Customization', () => { input-chevron - + , ); const renderedInputChevronWrapper = screen.getByText('input-chevron'); expect(renderedInputChevronWrapper).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); diff --git a/packages/paste-core/components/input-box/__tests__/prefix.test.tsx b/packages/paste-core/components/input-box/__tests__/prefix.test.tsx index f457b4bf0b..445bcf8de5 100644 --- a/packages/paste-core/components/input-box/__tests__/prefix.test.tsx +++ b/packages/paste-core/components/input-box/__tests__/prefix.test.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render, screen } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {Prefix} from '../src'; +import { Prefix } from '../src'; describe('HTML attributes', () => { it('should set a element data attribute for Prefix', () => { @@ -22,11 +22,11 @@ describe('Customization', () => { prefix - + , ); const renderedPrefix = screen.getByText('prefix'); expect(renderedPrefix).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); @@ -50,7 +50,7 @@ describe('Customization', () => { prefix - + , ); const renderedPrefix = screen.getByText('prefix'); expect(renderedPrefix).toHaveStyleRule('background-color', 'rgb(0, 20, 137)'); @@ -61,11 +61,11 @@ describe('Customization', () => { prefix - + , ); const renderedPrefix = screen.getByText('prefix'); expect(renderedPrefix).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); @@ -89,7 +89,7 @@ describe('Customization', () => { prefix - + , ); const renderedPrefix = screen.getByText('prefix'); expect(renderedPrefix).toHaveStyleRule('background-color', 'rgb(0, 20, 137)'); diff --git a/packages/paste-core/components/input-box/__tests__/suffix.test.tsx b/packages/paste-core/components/input-box/__tests__/suffix.test.tsx index 1598a3990d..d23701f4cc 100644 --- a/packages/paste-core/components/input-box/__tests__/suffix.test.tsx +++ b/packages/paste-core/components/input-box/__tests__/suffix.test.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render, screen } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {Suffix} from '../src'; +import { Suffix } from '../src'; describe('HTML attributes', () => { it('should set a element data attribute for Suffix', () => { @@ -23,11 +23,11 @@ describe('Customization', () => { baseTheme="default" theme={TestTheme} elements={{ - INPUT_SUFFIX: {backgroundColor: 'colorBackground'}, + INPUT_SUFFIX: { backgroundColor: 'colorBackground' }, }} > suffix - + , ); const renderedSuffix = screen.getByText('suffix'); expect(renderedSuffix).toHaveStyleRule('background-color', TestTheme.backgroundColors.colorBackground); @@ -52,7 +52,7 @@ describe('Customization', () => { suffix - + , ); const renderedSuffix = screen.getByText('suffix'); expect(renderedSuffix).toHaveStyleRule('background-color', TestTheme.backgroundColors.colorBackgroundBrand); @@ -64,11 +64,11 @@ describe('Customization', () => { baseTheme="default" theme={TestTheme} elements={{ - FOO_SUFFIX: {backgroundColor: 'colorBackground'}, + FOO_SUFFIX: { backgroundColor: 'colorBackground' }, }} > suffix - + , ); const renderedSuffix = screen.getByText('suffix'); expect(renderedSuffix).toHaveStyleRule('background-color', TestTheme.backgroundColors.colorBackground); @@ -93,7 +93,7 @@ describe('Customization', () => { suffix - + , ); const renderedSuffix = screen.getByText('suffix'); expect(renderedSuffix).toHaveStyleRule('background-color', TestTheme.backgroundColors.colorBackgroundBrand); diff --git a/packages/paste-core/components/input-box/build.js b/packages/paste-core/components/input-box/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/input-box/build.js +++ b/packages/paste-core/components/input-box/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/input-box/src/FauxInput/DefaultFauxInput.tsx b/packages/paste-core/components/input-box/src/FauxInput/DefaultFauxInput.tsx index c4a271642e..044b44cc39 100644 --- a/packages/paste-core/components/input-box/src/FauxInput/DefaultFauxInput.tsx +++ b/packages/paste-core/components/input-box/src/FauxInput/DefaultFauxInput.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import type {BoxShadow, BackgroundColor} from '@twilio-paste/style-props'; +import { Box } from '@twilio-paste/box'; +import type { BoxShadow, BackgroundColor } from '@twilio-paste/style-props'; -import type {FauxInputProps} from '../types'; +import type { FauxInputProps } from '../types'; const DefaultFauxInput = React.forwardRef>( - ({disabled, element, hasError, readOnly, children, type, variant}, ref) => { + ({ disabled, element, hasError, readOnly, children, type, variant }, ref) => { let backgroundColor = 'colorBackgroundBody' as BackgroundColor; let boxShadow = 'shadowBorder' as BoxShadow; let boxShadowHover = 'shadowBorderPrimary' as BoxShadow; @@ -53,9 +53,9 @@ const DefaultFauxInput = React.forwardRef ); - } + }, ); DefaultFauxInput.displayName = 'DefaultFauxInput'; -export {DefaultFauxInput}; +export { DefaultFauxInput }; diff --git a/packages/paste-core/components/input-box/src/FauxInput/InverseFauxInput.tsx b/packages/paste-core/components/input-box/src/FauxInput/InverseFauxInput.tsx index f25d0a4a91..f64dd33278 100644 --- a/packages/paste-core/components/input-box/src/FauxInput/InverseFauxInput.tsx +++ b/packages/paste-core/components/input-box/src/FauxInput/InverseFauxInput.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import type {BoxShadow, BackgroundColor} from '@twilio-paste/style-props'; +import { Box } from '@twilio-paste/box'; +import type { BoxShadow, BackgroundColor } from '@twilio-paste/style-props'; -import type {FauxInputProps} from '../types'; +import type { FauxInputProps } from '../types'; const InverseFauxInput = React.forwardRef( - ({disabled, element, hasError, readOnly, children, type, variant}, ref) => { + ({ disabled, element, hasError, readOnly, children, type, variant }, ref) => { let backgroundColor = 'colorBackgroundInverse' as BackgroundColor; let boxShadow = 'shadowBorderInverse' as BoxShadow; let boxShadowHover = 'shadowBorderInverseStrongest' as BoxShadow; @@ -51,9 +51,9 @@ const InverseFauxInput = React.forwardRef( {children} ); - } + }, ); InverseFauxInput.displayName = 'InverseFauxInput'; -export {InverseFauxInput}; +export { InverseFauxInput }; diff --git a/packages/paste-core/components/input-box/src/FauxInput/index.tsx b/packages/paste-core/components/input-box/src/FauxInput/index.tsx index 72a7ac322a..74269f26b8 100644 --- a/packages/paste-core/components/input-box/src/FauxInput/index.tsx +++ b/packages/paste-core/components/input-box/src/FauxInput/index.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {DefaultFauxInput} from './DefaultFauxInput'; -import {InverseFauxInput} from './InverseFauxInput'; -import type {FauxInputProps} from '../types'; +import { DefaultFauxInput } from './DefaultFauxInput'; +import { InverseFauxInput } from './InverseFauxInput'; +import type { FauxInputProps } from '../types'; const FauxInputVariants = { default: DefaultFauxInput, @@ -10,7 +10,7 @@ const FauxInputVariants = { }; const FieldWrapper = React.forwardRef( - ({children, disabled, element, hasError, readOnly, type, variant = 'default'}, ref) => { + ({ children, disabled, element, hasError, readOnly, type, variant = 'default' }, ref) => { const FieldWrapperComponent = FauxInputVariants[variant]; return ( @@ -26,9 +26,9 @@ const FieldWrapper = React.forwardRef( {children} ); - } + }, ); FieldWrapper.displayName = 'FieldWrapper'; -export {FieldWrapper}; +export { FieldWrapper }; diff --git a/packages/paste-core/components/input-box/src/InputBox.tsx b/packages/paste-core/components/input-box/src/InputBox.tsx index c3612ae454..0113fade2b 100644 --- a/packages/paste-core/components/input-box/src/InputBox.tsx +++ b/packages/paste-core/components/input-box/src/InputBox.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import type {BoxProps} from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; -import {FieldWrapper} from './FauxInput'; -import {Prefix} from './Prefix'; -import {Suffix} from './Suffix'; -import type {InputBoxTypes, Variants} from './types'; -import {InputBoxContext} from './InputBoxContext'; +import { FieldWrapper } from './FauxInput'; +import { Prefix } from './Prefix'; +import { Suffix } from './Suffix'; +import type { InputBoxTypes, Variants } from './types'; +import { InputBoxContext } from './InputBoxContext'; export interface InputBoxProps { children: NonNullable; @@ -37,9 +37,9 @@ const InputBox = React.forwardRef ( - + - ) + ), ); InputBox.displayName = 'InputBox'; -export {InputBox}; +export { InputBox }; diff --git a/packages/paste-core/components/input-box/src/InputBoxContext.tsx b/packages/paste-core/components/input-box/src/InputBoxContext.tsx index f4a725dc2d..9dba6fef41 100644 --- a/packages/paste-core/components/input-box/src/InputBoxContext.tsx +++ b/packages/paste-core/components/input-box/src/InputBoxContext.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import type {Variants} from './types'; +import type { Variants } from './types'; interface InputBoxContextData { disabled: boolean; diff --git a/packages/paste-core/components/input-box/src/InputChevronWrapper.tsx b/packages/paste-core/components/input-box/src/InputChevronWrapper.tsx index 1ca113e19d..9c94698ada 100644 --- a/packages/paste-core/components/input-box/src/InputChevronWrapper.tsx +++ b/packages/paste-core/components/input-box/src/InputChevronWrapper.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import type {BackgroundColor, TextColor} from '@twilio-paste/style-props'; +import { Box } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import type { BackgroundColor, TextColor } from '@twilio-paste/style-props'; -import type {Variants} from './types'; -import {useInputBoxContext} from './InputBoxContext'; +import type { Variants } from './types'; +import { useInputBoxContext } from './InputBoxContext'; type StateOptions = 'default' | 'disabled' | 'readOnly'; @@ -12,7 +12,7 @@ const getChevronWrapperState = (disabled: boolean, readOnly: boolean): StateOpti // eslint-disable-next-line unicorn/no-nested-ternary disabled ? 'disabled' : readOnly ? 'readOnly' : 'default'; -const IconColors: {[variant in Variants]: {[key in StateOptions]: TextColor}} = { +const IconColors: { [variant in Variants]: { [key in StateOptions]: TextColor } } = { default: { default: 'colorTextIcon', disabled: 'colorTextWeaker', @@ -36,12 +36,12 @@ const IconColors: {[variant in Variants]: {[key in StateOptions]: TextColor}} = const getInputChevronIconColor = ( variant: Variants | undefined = 'default', disabled: boolean | undefined = false, - readOnly: boolean | undefined = false + readOnly: boolean | undefined = false, ): TextColor => { return IconColors[variant][getChevronWrapperState(disabled, readOnly)]; }; -const BackgroundColorStyles: {[variant: string]: {[key: string]: BackgroundColor}} = { +const BackgroundColorStyles: { [variant: string]: { [key: string]: BackgroundColor } } = { default: { default: 'colorBackground', disabled: 'colorBackground', @@ -64,8 +64,8 @@ export interface InputChevronWrapperProps { } const InputChevronWrapper = React.forwardRef>( - ({children, element = 'CHEVRON_WRAPPER'}, ref) => { - const {disabled, readOnly, variant} = useInputBoxContext(); + ({ children, element = 'CHEVRON_WRAPPER' }, ref) => { + const { disabled, readOnly, variant } = useInputBoxContext(); return ( ); - } + }, ); InputChevronWrapper.displayName = 'InputChevronWrapper'; -export {InputChevronWrapper, getInputChevronIconColor}; +export { InputChevronWrapper, getInputChevronIconColor }; diff --git a/packages/paste-core/components/input-box/src/Prefix.tsx b/packages/paste-core/components/input-box/src/Prefix.tsx index bd7c74944b..d0ae4810b8 100644 --- a/packages/paste-core/components/input-box/src/Prefix.tsx +++ b/packages/paste-core/components/input-box/src/Prefix.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import type {BackgroundColor, BorderColor} from '@twilio-paste/style-props'; +import { Box } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import type { BackgroundColor, BorderColor } from '@twilio-paste/style-props'; -import type {Variants} from './types'; +import type { Variants } from './types'; export interface PrefixProps { children: NonNullable; @@ -17,7 +17,7 @@ export interface PrefixProps { } const Prefix = React.forwardRef( - ({children, disabled, element = 'PREFIX', variant}, ref) => { + ({ children, disabled, element = 'PREFIX', variant }, ref) => { let backgroundColor = 'colorBackgroundWeak' as BackgroundColor; let borderColor = 'colorBorderWeaker' as BorderColor; @@ -52,9 +52,9 @@ const Prefix = React.forwardRef( {children} ); - } + }, ); Prefix.displayName = 'Prefix'; -export {Prefix}; +export { Prefix }; diff --git a/packages/paste-core/components/input-box/src/Suffix.tsx b/packages/paste-core/components/input-box/src/Suffix.tsx index 41350dc73b..d0952b0b3f 100644 --- a/packages/paste-core/components/input-box/src/Suffix.tsx +++ b/packages/paste-core/components/input-box/src/Suffix.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import type {BackgroundColor, BorderColor} from '@twilio-paste/style-props'; +import { Box } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import type { BackgroundColor, BorderColor } from '@twilio-paste/style-props'; -import type {Variants} from './types'; +import type { Variants } from './types'; export interface SuffixProps { children: NonNullable; @@ -17,7 +17,7 @@ export interface SuffixProps { } const Suffix = React.forwardRef( - ({children, disabled, element = 'SUFFIX', variant}, ref) => { + ({ children, disabled, element = 'SUFFIX', variant }, ref) => { let backgroundColor = 'colorBackgroundWeak' as BackgroundColor; let borderColor = 'colorBorderWeaker' as BorderColor; @@ -52,9 +52,9 @@ const Suffix = React.forwardRef( {children} ); - } + }, ); Suffix.displayName = 'Suffix'; -export {Suffix}; +export { Suffix }; diff --git a/packages/paste-core/components/input-box/src/index.tsx b/packages/paste-core/components/input-box/src/index.tsx index 1b4ffdbaac..f2c12c6034 100644 --- a/packages/paste-core/components/input-box/src/index.tsx +++ b/packages/paste-core/components/input-box/src/index.tsx @@ -2,4 +2,4 @@ export * from './InputBox'; export * from './Suffix'; export * from './Prefix'; export * from './InputChevronWrapper'; -export type {InputBoxTypes} from './types'; +export type { InputBoxTypes } from './types'; diff --git a/packages/paste-core/components/input-box/src/types.ts b/packages/paste-core/components/input-box/src/types.ts index dd4b1cef4c..5aa79b450f 100644 --- a/packages/paste-core/components/input-box/src/types.ts +++ b/packages/paste-core/components/input-box/src/types.ts @@ -1,4 +1,4 @@ -import type {BoxProps} from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; export type InputBoxTypes = | 'text' diff --git a/packages/paste-core/components/input-box/stories/inputbox.stories.tsx b/packages/paste-core/components/input-box/stories/inputbox.stories.tsx index f8538deaa9..08c302ad27 100644 --- a/packages/paste-core/components/input-box/stories/inputbox.stories.tsx +++ b/packages/paste-core/components/input-box/stories/inputbox.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import {Stack} from '@twilio-paste/stack'; -import {ChevronDownIcon} from '@twilio-paste/icons/esm/ChevronDownIcon'; +import { Box } from '@twilio-paste/box'; +import { Stack } from '@twilio-paste/stack'; +import { ChevronDownIcon } from '@twilio-paste/icons/esm/ChevronDownIcon'; -import type {InputBoxProps} from '../src'; -import {InputBox, InputChevronWrapper, getInputChevronIconColor} from '../src'; +import type { InputBoxProps } from '../src'; +import { InputBox, InputChevronWrapper, getInputChevronIconColor } from '../src'; const Insert = (): JSX.Element => { return ; @@ -14,7 +14,7 @@ const Input = (): JSX.Element => { return ; }; -const CommonStories: React.FC>> = ({variant, ...props}) => { +const CommonStories: React.FC>> = ({ variant, ...props }) => { return ( diff --git a/packages/paste-core/components/input/__tests__/input.test.tsx b/packages/paste-core/components/input/__tests__/input.test.tsx index c2e2ffb717..ccacfadcf5 100644 --- a/packages/paste-core/components/input/__tests__/input.test.tsx +++ b/packages/paste-core/components/input/__tests__/input.test.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {act, render, screen} from '@testing-library/react'; +import { act, render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {Input} from '../src'; -import type {InputTypes} from '../src'; +import { Input } from '../src'; +import type { InputTypes } from '../src'; const NOOP = (): void => {}; @@ -26,7 +26,7 @@ describe('Input inner input props', () => { placeholder: 'Enter your name', }; - const {getByPlaceholderText} = render(); + const { getByPlaceholderText } = render(); const InnerInput = getByPlaceholderText(initialProps.placeholder); it('should render', () => { @@ -35,7 +35,7 @@ describe('Input inner input props', () => { it('should set disabled correctly', () => { expect(InnerInput.getAttribute('disabled')).toEqual(''); - expect(InnerInput).toHaveStyleRule('-webkit-text-fill-color', 'colorTextWeaker', {target: ':disabled'}); + expect(InnerInput).toHaveStyleRule('-webkit-text-fill-color', 'colorTextWeaker', { target: ':disabled' }); }); it('should set readOnly correctly', () => { @@ -82,12 +82,12 @@ describe('Input insertBefore prop', () => { }; it('should render a prefix', () => { - const {getByText} = render($10.99
    } />); + const { getByText } = render($10.99
    } />); expect(getByText('$10.99')).toBeDefined(); }); it('should render a suffix', () => { - const {getByText} = render($11.99
    } />); + const { getByText } = render($11.99
    } />); expect(getByText('$11.99')).toBeDefined(); }); }); @@ -98,8 +98,8 @@ describe('Input event handlers', () => { const onFocusMock: jest.Mock = jest.fn(); const onBlurMock: jest.Mock = jest.fn(); - const {getByRole} = render( - + const { getByRole } = render( + , ); const RenderedInput = getByRole('textbox'); @@ -152,7 +152,7 @@ describe('HTML attributes', () => { }); it('should set the data attribute for all Input nodes', (): void => { - const {container} = render( + const { container } = render( { onChange={NOOP} insertBefore={<>test before} insertAfter={<>test after} - /> + />, ); expect(container.querySelector('[data-paste-element="INPUT"]')).toBeInTheDocument(); expect(screen.getByRole('textbox').getAttribute('data-paste-element')).toEqual('INPUT_ELEMENT'); @@ -169,7 +169,7 @@ describe('HTML attributes', () => { }); it('should set the custom element data attribute for all Input nodes', (): void => { - const {container} = render( + const { container } = render( { element="foo" insertBefore={<>test before} insertAfter={<>test after} - /> + />, ); expect(container.querySelector('[data-paste-element="foo"]')).toBeInTheDocument(); expect(screen.getByRole('textbox').getAttribute('data-paste-element')).toEqual('foo_ELEMENT'); @@ -189,43 +189,43 @@ describe('HTML attributes', () => { describe('Number Input', () => { it('increases when step up clicked', () => { - const {getByRole} = render(); - userEvent.click(getByRole('button', {name: 'step value up'})); + const { getByRole } = render(); + userEvent.click(getByRole('button', { name: 'step value up' })); expect(getByRole('spinbutton').value).toBe('2'); }); it('decreases when step down clicked', () => { - const {getByRole} = render(); - userEvent.click(getByRole('button', {name: 'step value down'})); + const { getByRole } = render(); + userEvent.click(getByRole('button', { name: 'step value down' })); expect(getByRole('spinbutton').value).toBe('2'); }); it('increases by step when step up clicked', () => { - const {getByRole} = render(); - userEvent.click(getByRole('button', {name: 'step value up'})); + const { getByRole } = render(); + userEvent.click(getByRole('button', { name: 'step value up' })); expect(getByRole('spinbutton').value).toBe('3'); }); it('decreases by step when step down clicked', () => { - const {getByRole} = render(); - userEvent.click(getByRole('button', {name: 'step value down'})); + const { getByRole } = render(); + userEvent.click(getByRole('button', { name: 'step value down' })); expect(getByRole('spinbutton').value).toBe('1'); }); it('does not decrement below min value', () => { - const {getByRole} = render(); - userEvent.click(getByRole('button', {name: 'step value down'})); + const { getByRole } = render(); + userEvent.click(getByRole('button', { name: 'step value down' })); expect(getByRole('spinbutton').value).toBe('1'); }); it('does not increment above max value', () => { - const {getByRole} = render(); - userEvent.click(getByRole('button', {name: 'step value up'})); + const { getByRole } = render(); + userEvent.click(getByRole('button', { name: 'step value up' })); expect(getByRole('spinbutton').value).toBe('5'); }); it('increase button hides when hit max', () => { - const {getByRole} = render(); - const IncreaseButton = getByRole('button', {name: 'step value up'}); + const { getByRole } = render(); + const IncreaseButton = getByRole('button', { name: 'step value up' }); act(() => { userEvent.click(IncreaseButton); }); @@ -237,8 +237,8 @@ describe('Number Input', () => { expect(IncreaseButton).not.toBeInTheDocument(); }); it('decrease button hides when hit min', () => { - const {getByRole} = render(); - const DecreaseButton = getByRole('button', {name: 'step value down'}); + const { getByRole } = render(); + const DecreaseButton = getByRole('button', { name: 'step value down' }); act(() => { userEvent.click(DecreaseButton); }); @@ -249,14 +249,14 @@ describe('Number Input', () => { describe('Customization', () => { it('should add custom styles to Input', (): void => { - const {container} = render( + const { container } = render( { insertBefore={<>test before} insertAfter={<>test after} /> - + , ); const renderedInput = container.querySelector('[data-paste-element="INPUT"]'); const renderedInputElement = screen.getByRole('textbox'); @@ -280,7 +280,7 @@ describe('Customization', () => { }); it('should add custom styles to a Input variant', (): void => { - const {container} = render( + const { container } = render( { insertBefore={<>test before} insertAfter={<>test after} /> - + , ); const renderedInput = container.querySelector('[data-paste-element="INPUT"]'); const renderedInputElement = screen.getByRole('spinbutton'); const renderedInputPrefix = screen.getByText('test before'); const renderedInputSuffix = screen.getByText('test after'); - const renderedIncrement = screen.getByRole('button', {name: 'step value up'}); - const renderedDecrement = screen.getByRole('button', {name: 'step value down'}); + const renderedIncrement = screen.getByRole('button', { name: 'step value up' }); + const renderedDecrement = screen.getByRole('button', { name: 'step value down' }); expect(renderedInput).toHaveStyleRule('background-color', 'rgb(0, 20, 137)'); expect(renderedInputElement).toHaveStyleRule('background-color', 'rgb(0, 20, 137)'); expect(renderedInputPrefix).toHaveStyleRule('background-color', 'rgb(0, 20, 137)'); @@ -350,14 +350,14 @@ describe('Customization', () => { }); it('should add custom styles to Input with a custom element data attribute', (): void => { - const {container} = render( + const { container } = render( { insertBefore={<>test before} insertAfter={<>test after} /> - + , ); const renderedInput = container.querySelector('[data-paste-element="FOO"]'); const renderedInputElement = screen.getByRole('spinbutton'); const renderedInputPrefix = screen.getByText('test before'); const renderedInputSuffix = screen.getByText('test after'); - const renderedIncrement = screen.getByRole('button', {name: 'step value up'}); - const renderedDecrement = screen.getByRole('button', {name: 'step value down'}); + const renderedIncrement = screen.getByRole('button', { name: 'step value up' }); + const renderedDecrement = screen.getByRole('button', { name: 'step value down' }); expect(renderedInput).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); expect(renderedInputElement).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); expect(renderedInputPrefix).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); @@ -392,7 +392,7 @@ describe('Customization', () => { }); it('should add custom styles to a Input variant with a custom element data attribute', (): void => { - const {container} = render( + const { container } = render( { insertBefore={<>test before} insertAfter={<>test after} /> - + , ); const renderedInput = container.querySelector('[data-paste-element="FOO"]'); const renderedInputElement = screen.getByRole('textbox'); diff --git a/packages/paste-core/components/input/build.js b/packages/paste-core/components/input/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/input/build.js +++ b/packages/paste-core/components/input/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/input/src/DecrementButton.tsx b/packages/paste-core/components/input/src/DecrementButton.tsx index 46f2c185aa..fec6d43c13 100644 --- a/packages/paste-core/components/input/src/DecrementButton.tsx +++ b/packages/paste-core/components/input/src/DecrementButton.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import type {BoxProps} from '@twilio-paste/box'; -import {Button, type ButtonProps} from '@twilio-paste/button'; -import {ChevronDownIcon} from '@twilio-paste/icons/esm/ChevronDownIcon'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import type { BoxProps } from '@twilio-paste/box'; +import { Button, type ButtonProps } from '@twilio-paste/button'; +import { ChevronDownIcon } from '@twilio-paste/icons/esm/ChevronDownIcon'; +import type { HTMLPasteProps } from '@twilio-paste/types'; export interface DecrementButtonProps extends HTMLPasteProps<'button'> { i18nStepDownLabel?: string; @@ -12,7 +12,7 @@ export interface DecrementButtonProps extends HTMLPasteProps<'button'> { } export const DecrementButton = React.forwardRef( - ({i18nStepDownLabel = 'step value down', element, ...props}, ref) => { + ({ i18nStepDownLabel = 'step value down', element, ...props }, ref) => { return ( ); - } + }, ); DecrementButton.displayName = 'Decrement'; diff --git a/packages/paste-core/components/input/src/IncrementButton.tsx b/packages/paste-core/components/input/src/IncrementButton.tsx index e93e342da8..473a9d66b9 100644 --- a/packages/paste-core/components/input/src/IncrementButton.tsx +++ b/packages/paste-core/components/input/src/IncrementButton.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import type {BoxProps} from '@twilio-paste/box'; -import {Button, type ButtonProps} from '@twilio-paste/button'; -import {ChevronUpIcon} from '@twilio-paste/icons/esm/ChevronUpIcon'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import type { BoxProps } from '@twilio-paste/box'; +import { Button, type ButtonProps } from '@twilio-paste/button'; +import { ChevronUpIcon } from '@twilio-paste/icons/esm/ChevronUpIcon'; +import type { HTMLPasteProps } from '@twilio-paste/types'; export interface IncrementButtonProps extends HTMLPasteProps<'button'> { i18nStepUpLabel?: string; @@ -12,7 +12,7 @@ export interface IncrementButtonProps extends HTMLPasteProps<'button'> { } export const IncrementButton = React.forwardRef( - ({i18nStepUpLabel = 'step value up', element, ...props}, ref) => { + ({ i18nStepUpLabel = 'step value up', element, ...props }, ref) => { return ( ); - } + }, ); IncrementButton.displayName = 'Increment'; diff --git a/packages/paste-core/components/input/src/Input.tsx b/packages/paste-core/components/input/src/Input.tsx index 98bc562d4e..e007280b00 100644 --- a/packages/paste-core/components/input/src/Input.tsx +++ b/packages/paste-core/components/input/src/Input.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import {useMergeRefs} from '@twilio-paste/utils'; -import {Box} from '@twilio-paste/box'; -import type {BoxProps, BoxStyleProps} from '@twilio-paste/box'; -import {InputBox} from '@twilio-paste/input-box'; -import type {InputBoxTypes} from '@twilio-paste/input-box'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { useMergeRefs } from '@twilio-paste/utils'; +import { Box } from '@twilio-paste/box'; +import type { BoxProps, BoxStyleProps } from '@twilio-paste/box'; +import { InputBox } from '@twilio-paste/input-box'; +import type { InputBoxTypes } from '@twilio-paste/input-box'; +import type { HTMLPasteProps } from '@twilio-paste/types'; -import {safelySpreadFormControlProps} from './utils'; -import {DecrementButton} from './DecrementButton'; -import {IncrementButton} from './IncrementButton'; +import { safelySpreadFormControlProps } from './utils'; +import { DecrementButton } from './DecrementButton'; +import { IncrementButton } from './IncrementButton'; export type InputVariants = 'default' | 'inverse'; @@ -42,7 +42,7 @@ interface TypeProps { pattern?: string | undefined; } -export const InputElement = React.forwardRef(({element, ...props}, ref) => { +export const InputElement = React.forwardRef(({ element, ...props }, ref) => { return ( (({ele display: 'none', margin: 'space0', }} - {...{'-moz-appearance': 'textfield'}} + {...{ '-moz-appearance': 'textfield' }} {...props} /> ); @@ -128,9 +128,9 @@ const Input = React.forwardRef( i18nStepDownLabel, ...props }, - ref + ref, ) => { - const typeProps: TypeProps = {type}; + const typeProps: TypeProps = { type }; const internalRef = React.useRef(); const mergedRef = useMergeRefs(internalRef, ref) as React.Ref; @@ -159,7 +159,7 @@ const Input = React.forwardRef( if ((numMax - numMin) % numStep !== 0) // eslint-disable-next-line no-console console.error( - '[Paste Input]: when using min/max, and step values with a Number Input, please make sure that the min and max are multiples of the step value.' + '[Paste Input]: when using min/max, and step values with a Number Input, please make sure that the min and max are multiples of the step value.', ); if (numVal < numMax && numVal + numStep <= numMax) { setShowIncrement(true); @@ -222,7 +222,7 @@ const Input = React.forwardRef( element={element} onClick={() => { internalRef.current?.stepUp(); - const ev = new Event('change', {bubbles: true}); + const ev = new Event('change', { bubbles: true }); internalRef.current?.dispatchEvent(ev); internalRef.current?.focus(); }} @@ -236,7 +236,7 @@ const Input = React.forwardRef( element={element} onClick={() => { internalRef.current?.stepDown(); - const ev = new Event('change', {bubbles: true}); + const ev = new Event('change', { bubbles: true }); internalRef.current?.dispatchEvent(ev); internalRef.current?.focus(); }} @@ -251,10 +251,10 @@ const Input = React.forwardRef( )} ); - } + }, ); Input.displayName = 'Input'; -export {Input}; -export type {InputBoxTypes as InputTypes}; +export { Input }; +export type { InputBoxTypes as InputTypes }; diff --git a/packages/paste-core/components/input/src/utils.ts b/packages/paste-core/components/input/src/utils.ts index 631dbf16c0..746498b10d 100644 --- a/packages/paste-core/components/input/src/utils.ts +++ b/packages/paste-core/components/input/src/utils.ts @@ -1,6 +1,6 @@ export const PROPS_TO_BLOCK: string[] = ['className', 'style', 'size', 'height', 'width']; -type Props = {[key: string]: any}; +type Props = { [key: string]: any }; export const safelySpreadFormControlProps = (props: Props): Props => { // https://www.measurethat.net/Benchmarks/Show/6642/0/for-in-vs-reduce-vs-pick#latest_results_block diff --git a/packages/paste-core/components/input/stories/input.stories.tsx b/packages/paste-core/components/input/stories/input.stories.tsx index 3a33def806..aa0d784297 100644 --- a/packages/paste-core/components/input/stories/input.stories.tsx +++ b/packages/paste-core/components/input/stories/input.stories.tsx @@ -1,19 +1,19 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {useUID} from '@twilio-paste/uid-library'; -import {action} from '@storybook/addon-actions'; -import {Anchor} from '@twilio-paste/anchor'; -import {Form, FormControl} from '@twilio-paste/form'; -import {useTheme} from '@twilio-paste/theme'; -import {Box} from '@twilio-paste/box'; -import {Text} from '@twilio-paste/text'; -import {InformationIcon} from '@twilio-paste/icons/esm/InformationIcon'; -import {Label} from '@twilio-paste/label'; -import {HelpText} from '@twilio-paste/help-text'; -import {Stack} from '@twilio-paste/stack'; -import {CustomizationProvider} from '@twilio-paste/customization'; - -import {Input} from '../src'; +import type { StoryFn } from '@storybook/react'; +import { useUID } from '@twilio-paste/uid-library'; +import { action } from '@storybook/addon-actions'; +import { Anchor } from '@twilio-paste/anchor'; +import { Form, FormControl } from '@twilio-paste/form'; +import { useTheme } from '@twilio-paste/theme'; +import { Box } from '@twilio-paste/box'; +import { Text } from '@twilio-paste/text'; +import { InformationIcon } from '@twilio-paste/icons/esm/InformationIcon'; +import { Label } from '@twilio-paste/label'; +import { HelpText } from '@twilio-paste/help-text'; +import { Stack } from '@twilio-paste/stack'; +import { CustomizationProvider } from '@twilio-paste/customization'; + +import { Input } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -891,21 +891,21 @@ export const CustomizedNumberInput = (): React.ReactNode => { @@ -954,7 +954,7 @@ MaxNumberInput.storyName = 'Number Input - Max number matched'; CustomizedNumberInput.storyName = 'Number Input - Customized'; -export const CustomInput: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const CustomInput: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const uidOne = useUID(); const uidTwo = useUID(); const uidTwoVariant = useUID(); diff --git a/packages/paste-core/components/label/__tests__/label.test.tsx b/packages/paste-core/components/label/__tests__/label.test.tsx index 8872a9705d..15081a5174 100644 --- a/packages/paste-core/components/label/__tests__/label.test.tsx +++ b/packages/paste-core/components/label/__tests__/label.test.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; -import {Customized} from '../stories/label.stories'; -import {Label, RequiredDot} from '../src'; +import { Customized } from '../stories/label.stories'; +import { Label, RequiredDot } from '../src'; describe('Label for prop', () => { const initialProps = { @@ -13,7 +13,7 @@ describe('Label for prop', () => { render( + , ); expect(screen.getByTestId('test-label').getAttribute('for')).toEqual('input'); }); @@ -29,7 +29,7 @@ describe('Label required prop', () => { render( + , ); const label = screen.getByTestId('test-label'); const requiredDot = label.querySelector('[data-paste-element="REQUIRED_DOT"]'); @@ -39,7 +39,7 @@ describe('Label required prop', () => { }); describe('Customization', () => { - const {getByTestId} = render(); + const { getByTestId } = render(); const label = getByTestId('label_test'); const customLabel = getByTestId('custom_label_test'); const requiredDotWrapper = getByTestId('required_dot'); diff --git a/packages/paste-core/components/label/build.js b/packages/paste-core/components/label/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/label/build.js +++ b/packages/paste-core/components/label/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/label/src/Label.tsx b/packages/paste-core/components/label/src/Label.tsx index f8b818e599..dcaa72d2a6 100644 --- a/packages/paste-core/components/label/src/Label.tsx +++ b/packages/paste-core/components/label/src/Label.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import {MediaObject, MediaFigure, MediaBody} from '@twilio-paste/media-object'; -import type {TextColor} from '@twilio-paste/style-props'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import { MediaObject, MediaFigure, MediaBody } from '@twilio-paste/media-object'; +import type { TextColor } from '@twilio-paste/style-props'; +import type { HTMLPasteProps } from '@twilio-paste/types'; -import {RequiredDot} from './RequiredDot'; +import { RequiredDot } from './RequiredDot'; export type LabelVariants = 'default' | 'inverse'; type LabelBaseProps = Pick & { @@ -53,7 +53,7 @@ const Label = React.forwardRef( i18nRequiredLabel = '', ...props }, - ref + ref, ) => { let textColor = 'colorText' as TextColor; if (disabled && variant === 'inverse') { @@ -103,9 +103,9 @@ const Label = React.forwardRef( ); - } + }, ); Label.displayName = 'Label'; -export {Label}; +export { Label }; diff --git a/packages/paste-core/components/label/src/RequiredDot.tsx b/packages/paste-core/components/label/src/RequiredDot.tsx index bfadcef253..d34d61a76f 100644 --- a/packages/paste-core/components/label/src/RequiredDot.tsx +++ b/packages/paste-core/components/label/src/RequiredDot.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import { ScreenReaderOnly } from '@twilio-paste/screen-reader-only'; export interface RequiredDotProps { element?: BoxProps['element']; diff --git a/packages/paste-core/components/label/stories/label.stories.tsx b/packages/paste-core/components/label/stories/label.stories.tsx index 39b1538e69..5e73ce427d 100644 --- a/packages/paste-core/components/label/stories/label.stories.tsx +++ b/packages/paste-core/components/label/stories/label.stories.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import type {Story} from '@storybook/react'; -import {Box} from '@twilio-paste/box'; -import {Paragraph} from '@twilio-paste/paragraph'; -import {Stack} from '@twilio-paste/stack'; -import {Card} from '@twilio-paste/card'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {useTheme} from '@twilio-paste/theme'; +import type { Story } from '@storybook/react'; +import { Box } from '@twilio-paste/box'; +import { Paragraph } from '@twilio-paste/paragraph'; +import { Stack } from '@twilio-paste/stack'; +import { Card } from '@twilio-paste/card'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { useTheme } from '@twilio-paste/theme'; -import {Label, RequiredDot} from '../src'; +import { Label, RequiredDot } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -87,10 +87,10 @@ export const Customized: Story = () => { disableAnimations={true} theme={currentTheme} elements={{ - LABEL: {color: 'colorTextWarningStrong', fontWeight: 'fontWeightLight'}, - LABEL_REQUIRED_DOT: {backgroundColor: 'colorBackgroundDestructiveStrong'}, - REQUIRED_DOT: {backgroundColor: 'colorBackgroundDestructiveStrong'}, - REQUIRED_DOT_WRAPPER: {cursor: 'help'}, + LABEL: { color: 'colorTextWarningStrong', fontWeight: 'fontWeightLight' }, + LABEL_REQUIRED_DOT: { backgroundColor: 'colorBackgroundDestructiveStrong' }, + REQUIRED_DOT: { backgroundColor: 'colorBackgroundDestructiveStrong' }, + REQUIRED_DOT_WRAPPER: { cursor: 'help' }, }} > @@ -110,10 +110,10 @@ export const Customized: Story = () => { disableAnimations={true} theme={currentTheme} elements={{ - FOO: {color: 'colorTextWarningStrong', fontWeight: 'fontWeightLight'}, - FOO_REQUIRED_DOT: {backgroundColor: 'colorBackgroundDestructiveStrong'}, - BAR: {backgroundColor: 'colorBackgroundDestructiveStrong'}, - BAR_WRAPPER: {cursor: 'help'}, + FOO: { color: 'colorTextWarningStrong', fontWeight: 'fontWeightLight' }, + FOO_REQUIRED_DOT: { backgroundColor: 'colorBackgroundDestructiveStrong' }, + BAR: { backgroundColor: 'colorBackgroundDestructiveStrong' }, + BAR_WRAPPER: { cursor: 'help' }, }} > , ); const renderedList = screen.getByRole('list'); expect(renderedList).not.toBeNull(); @@ -22,7 +22,7 @@ describe('Ordered List', () => { Children - + , ); const renderedList = screen.getByRole('list'); expect(renderedList).toHaveStyleRule('margin-top', '0.75rem'); @@ -34,7 +34,7 @@ describe('Ordered List', () => { Children Children - + , ); const renderedOrderedList = screen.getByTestId('ordered-list'); const renderedUnorderedList = screen.getByTestId('unordered-list'); @@ -78,10 +78,10 @@ describe('Ordered List', () => { Custom ordered list - + , ); const renderedList = screen.getByRole('list'); expect(renderedList).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); @@ -93,10 +93,10 @@ describe('Ordered List', () => { Custom ordered list - + , ); const renderedList = screen.getByRole('list'); expect(renderedList).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); @@ -111,7 +111,7 @@ describe('Unordered List', () => { render( Children - + , ); const renderedList = screen.getByRole('list'); expect(renderedList).not.toBeNull(); @@ -123,7 +123,7 @@ describe('Unordered List', () => { Children - + , ); const renderedList = screen.getByRole('list'); expect(renderedList).toHaveStyleRule('margin-top', '0.75rem'); @@ -166,10 +166,10 @@ describe('Unordered List', () => { Custom unordered list - + , ); const renderedList = screen.getByRole('list'); expect(renderedList).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); @@ -181,10 +181,10 @@ describe('Unordered List', () => { Custom unordered list - + , ); const renderedList = screen.getByRole('list'); expect(renderedList).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); @@ -199,7 +199,7 @@ describe('ListItem', () => { render( Children - + , ); const renderedListItem = screen.getByRole('listitem'); expect(renderedListItem).not.toBeNull(); @@ -241,10 +241,10 @@ describe('ListItem', () => { Custom list item - + , ); const renderedListItem = screen.getByRole('listitem'); expect(renderedListItem).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); @@ -256,10 +256,10 @@ describe('ListItem', () => { Custom list item - + , ); const renderedListItem = screen.getByRole('listitem'); expect(renderedListItem).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); diff --git a/packages/paste-core/components/list/build.js b/packages/paste-core/components/list/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/list/build.js +++ b/packages/paste-core/components/list/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/list/src/List.tsx b/packages/paste-core/components/list/src/List.tsx index c057f7fa1a..54575750fe 100644 --- a/packages/paste-core/components/list/src/List.tsx +++ b/packages/paste-core/components/list/src/List.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {Text} from '@twilio-paste/text'; +import { Text } from '@twilio-paste/text'; -import type {BaseListProps} from './types'; +import type { BaseListProps } from './types'; const List = React.forwardRef( - ({as, children, element = 'LIST', listStyleType = 'disc', ...props}, ref) => { + ({ as, children, element = 'LIST', listStyleType = 'disc', ...props }, ref) => { return ( ); - } + }, ); List.displayName = 'List'; -export {List}; +export { List }; diff --git a/packages/paste-core/components/list/src/ListItem.tsx b/packages/paste-core/components/list/src/ListItem.tsx index 90f3d0624f..ba02f1b088 100644 --- a/packages/paste-core/components/list/src/ListItem.tsx +++ b/packages/paste-core/components/list/src/ListItem.tsx @@ -1,27 +1,29 @@ import * as React from 'react'; -import {Text, safelySpreadTextProps} from '@twilio-paste/text'; +import { Text, safelySpreadTextProps } from '@twilio-paste/text'; -import type {ListItemProps} from './types'; +import type { ListItemProps } from './types'; -const ListItem = React.forwardRef(({children, element = 'LIST_ITEM', ...props}, ref) => { - return ( - - {children} - - ); -}); +const ListItem = React.forwardRef( + ({ children, element = 'LIST_ITEM', ...props }, ref) => { + return ( + + {children} + + ); + }, +); ListItem.displayName = 'ListItem'; -export {ListItem}; +export { ListItem }; diff --git a/packages/paste-core/components/list/src/OrderedList.tsx b/packages/paste-core/components/list/src/OrderedList.tsx index ad2ab5b65b..649a3e5961 100644 --- a/packages/paste-core/components/list/src/OrderedList.tsx +++ b/packages/paste-core/components/list/src/OrderedList.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import {safelySpreadTextProps} from '@twilio-paste/text'; +import { safelySpreadTextProps } from '@twilio-paste/text'; -import {List} from './List'; -import type {OrderedListProps} from './types'; +import { List } from './List'; +import type { OrderedListProps } from './types'; const OrderedList = React.forwardRef( - ({children, element = 'ORDERED_LIST', marginTop, marginBottom = 'space70', ...props}, ref) => { + ({ children, element = 'ORDERED_LIST', marginTop, marginBottom = 'space70', ...props }, ref) => { return ( ( {children} ); - } + }, ); OrderedList.displayName = 'OrderedList'; -export {OrderedList}; +export { OrderedList }; diff --git a/packages/paste-core/components/list/src/UnorderedList.tsx b/packages/paste-core/components/list/src/UnorderedList.tsx index 5265e05e4e..273c32d6de 100644 --- a/packages/paste-core/components/list/src/UnorderedList.tsx +++ b/packages/paste-core/components/list/src/UnorderedList.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import {safelySpreadTextProps} from '@twilio-paste/text'; +import { safelySpreadTextProps } from '@twilio-paste/text'; -import {List} from './List'; -import type {UnorderedListProps} from './types'; +import { List } from './List'; +import type { UnorderedListProps } from './types'; const UnorderedList = React.forwardRef( - ({children, element = 'UNORDERED_LIST', marginTop, marginBottom = 'space70', ...props}, ref) => { + ({ children, element = 'UNORDERED_LIST', marginTop, marginBottom = 'space70', ...props }, ref) => { return ( ( {children} ); - } + }, ); UnorderedList.displayName = 'UnorderedList'; -export {UnorderedList}; +export { UnorderedList }; diff --git a/packages/paste-core/components/list/src/types.ts b/packages/paste-core/components/list/src/types.ts index f7a364eb3e..39289e0aeb 100644 --- a/packages/paste-core/components/list/src/types.ts +++ b/packages/paste-core/components/list/src/types.ts @@ -1,6 +1,6 @@ -import type {TextProps} from '@twilio-paste/text'; -import type {Space} from '@twilio-paste/style-props'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import type { TextProps } from '@twilio-paste/text'; +import type { Space } from '@twilio-paste/style-props'; +import type { HTMLPasteProps } from '@twilio-paste/types'; export type AsTags = 'ol' | 'ul'; diff --git a/packages/paste-core/components/list/stories/index.stories.tsx b/packages/paste-core/components/list/stories/index.stories.tsx index 2436381859..581b1e0d8f 100644 --- a/packages/paste-core/components/list/stories/index.stories.tsx +++ b/packages/paste-core/components/list/stories/index.stories.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {useTheme} from '@twilio-paste/theme'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {Paragraph} from '@twilio-paste/paragraph'; -import {Stack} from '@twilio-paste/stack'; +import type { StoryFn } from '@storybook/react'; +import { useTheme } from '@twilio-paste/theme'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { Paragraph } from '@twilio-paste/paragraph'; +import { Stack } from '@twilio-paste/stack'; -import {OrderedList, UnorderedList, ListItem} from '../src'; +import { OrderedList, UnorderedList, ListItem } from '../src'; // eslint-disable-next-line import/no-default-export export default { title: 'Components/List', component: OrderedList, - subcomponents: {UnorderedList, ListItem}, + subcomponents: { UnorderedList, ListItem }, }; export const DefaultOrderedList = (): React.ReactNode => { @@ -110,7 +110,7 @@ export const NestedUnorderedList = (): React.ReactNode => { ); }; -export const CustomOrderedList: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const CustomOrderedList: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( @@ -192,7 +192,7 @@ CustomOrderedList.parameters = { }, }; -export const CustomUnorderedList: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const CustomUnorderedList: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( diff --git a/packages/paste-core/components/menu/__tests__/customization.spec.tsx b/packages/paste-core/components/menu/__tests__/customization.spec.tsx index 571895edbc..d6b25ef4bd 100644 --- a/packages/paste-core/components/menu/__tests__/customization.spec.tsx +++ b/packages/paste-core/components/menu/__tests__/customization.spec.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import type {RenderOptions} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render, screen } from '@testing-library/react'; +import type { RenderOptions } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {initStyles, BaseMenu} from '../stories/customization.stories'; +import { initStyles, BaseMenu } from '../stories/customization.stories'; const PASTE_ELEMENT = 'data-paste-element'; const initWrapper = (element: string): RenderOptions['wrapper'] => - function Wrapper({children}) { + function Wrapper({ children }) { return ( {children} @@ -89,21 +89,21 @@ describe('Menu Customization', () => { expect(nodeCalledMenuButton).toHaveStyleRule('background-color', 'rgb(2, 99, 224)'); expect(nodeCalledMenuItem).toHaveStyleRule('font-weight', '500'); - expect(nodeCalledMenuItem).toHaveStyleRule('border-left-width', '4px', {target: ':hover'}); - expect(nodeCalledMenuItem).toHaveStyleRule('border-left-style', 'solid', {target: ':hover'}); - expect(nodeCalledMenuItem).toHaveStyleRule('border-left-color', 'rgb(2, 99, 224)', {target: ':hover'}); - expect(nodeCalledMenuItem).toHaveStyleRule('text-decoration', 'none', {target: ':hover'}); - - expect(nodeCalledMenuItem).toHaveStyleRule('border-left-width', '4px', {target: ':focus'}); - expect(nodeCalledMenuItem).toHaveStyleRule('border-left-style', 'solid', {target: ':focus'}); - expect(nodeCalledMenuItem).toHaveStyleRule('border-left-color', 'rgb(2, 99, 224)', {target: ':focus'}); - expect(nodeCalledMenuItem).toHaveStyleRule('text-decoration', 'none', {target: ':focus'}); - expect(nodeCalledMenuItem).toHaveStyleRule('font-weight', '700', {target: ':focus'}); - - expect(nodeCalledSubmenuButton).toHaveStyleRule('border-left-width', '4px', {target: ':hover'}); - expect(nodeCalledSubmenuButton).toHaveStyleRule('border-left-style', 'solid', {target: ':hover'}); - expect(nodeCalledSubmenuButton).toHaveStyleRule('border-left-color', 'rgb(2, 99, 224)', {target: ':hover'}); - expect(nodeCalledSubmenuButton).toHaveStyleRule('text-decoration', 'none', {target: ':hover'}); + expect(nodeCalledMenuItem).toHaveStyleRule('border-left-width', '4px', { target: ':hover' }); + expect(nodeCalledMenuItem).toHaveStyleRule('border-left-style', 'solid', { target: ':hover' }); + expect(nodeCalledMenuItem).toHaveStyleRule('border-left-color', 'rgb(2, 99, 224)', { target: ':hover' }); + expect(nodeCalledMenuItem).toHaveStyleRule('text-decoration', 'none', { target: ':hover' }); + + expect(nodeCalledMenuItem).toHaveStyleRule('border-left-width', '4px', { target: ':focus' }); + expect(nodeCalledMenuItem).toHaveStyleRule('border-left-style', 'solid', { target: ':focus' }); + expect(nodeCalledMenuItem).toHaveStyleRule('border-left-color', 'rgb(2, 99, 224)', { target: ':focus' }); + expect(nodeCalledMenuItem).toHaveStyleRule('text-decoration', 'none', { target: ':focus' }); + expect(nodeCalledMenuItem).toHaveStyleRule('font-weight', '700', { target: ':focus' }); + + expect(nodeCalledSubmenuButton).toHaveStyleRule('border-left-width', '4px', { target: ':hover' }); + expect(nodeCalledSubmenuButton).toHaveStyleRule('border-left-style', 'solid', { target: ':hover' }); + expect(nodeCalledSubmenuButton).toHaveStyleRule('border-left-color', 'rgb(2, 99, 224)', { target: ':hover' }); + expect(nodeCalledSubmenuButton).toHaveStyleRule('text-decoration', 'none', { target: ':hover' }); expect(nodeCalledMenuSeparator).toHaveStyleRule('border-style', 'inset'); expect(nodeCalledMenuSeparator).toHaveStyleRule('opacity', '0.5'); @@ -136,21 +136,21 @@ describe('Menu Customization', () => { expect(nodeCalledMenuButton).toHaveStyleRule('background-color', 'rgb(2, 99, 224)'); expect(nodeCalledMenuItem).toHaveStyleRule('font-weight', '500'); - expect(nodeCalledMenuItem).toHaveStyleRule('border-left-width', '4px', {target: ':hover'}); - expect(nodeCalledMenuItem).toHaveStyleRule('border-left-style', 'solid', {target: ':hover'}); - expect(nodeCalledMenuItem).toHaveStyleRule('border-left-color', 'rgb(2, 99, 224)', {target: ':hover'}); - expect(nodeCalledMenuItem).toHaveStyleRule('text-decoration', 'none', {target: ':hover'}); - - expect(nodeCalledMenuItem).toHaveStyleRule('border-left-width', '4px', {target: ':focus'}); - expect(nodeCalledMenuItem).toHaveStyleRule('border-left-style', 'solid', {target: ':focus'}); - expect(nodeCalledMenuItem).toHaveStyleRule('border-left-color', 'rgb(2, 99, 224)', {target: ':focus'}); - expect(nodeCalledMenuItem).toHaveStyleRule('text-decoration', 'none', {target: ':focus'}); - expect(nodeCalledMenuItem).toHaveStyleRule('font-weight', '700', {target: ':focus'}); - - expect(nodeCalledSubmenuButton).toHaveStyleRule('border-left-width', '4px', {target: ':hover'}); - expect(nodeCalledSubmenuButton).toHaveStyleRule('border-left-style', 'solid', {target: ':hover'}); - expect(nodeCalledSubmenuButton).toHaveStyleRule('border-left-color', 'rgb(2, 99, 224)', {target: ':hover'}); - expect(nodeCalledSubmenuButton).toHaveStyleRule('text-decoration', 'none', {target: ':hover'}); + expect(nodeCalledMenuItem).toHaveStyleRule('border-left-width', '4px', { target: ':hover' }); + expect(nodeCalledMenuItem).toHaveStyleRule('border-left-style', 'solid', { target: ':hover' }); + expect(nodeCalledMenuItem).toHaveStyleRule('border-left-color', 'rgb(2, 99, 224)', { target: ':hover' }); + expect(nodeCalledMenuItem).toHaveStyleRule('text-decoration', 'none', { target: ':hover' }); + + expect(nodeCalledMenuItem).toHaveStyleRule('border-left-width', '4px', { target: ':focus' }); + expect(nodeCalledMenuItem).toHaveStyleRule('border-left-style', 'solid', { target: ':focus' }); + expect(nodeCalledMenuItem).toHaveStyleRule('border-left-color', 'rgb(2, 99, 224)', { target: ':focus' }); + expect(nodeCalledMenuItem).toHaveStyleRule('text-decoration', 'none', { target: ':focus' }); + expect(nodeCalledMenuItem).toHaveStyleRule('font-weight', '700', { target: ':focus' }); + + expect(nodeCalledSubmenuButton).toHaveStyleRule('border-left-width', '4px', { target: ':hover' }); + expect(nodeCalledSubmenuButton).toHaveStyleRule('border-left-style', 'solid', { target: ':hover' }); + expect(nodeCalledSubmenuButton).toHaveStyleRule('border-left-color', 'rgb(2, 99, 224)', { target: ':hover' }); + expect(nodeCalledSubmenuButton).toHaveStyleRule('text-decoration', 'none', { target: ':hover' }); expect(nodeCalledMenuSeparator).toHaveStyleRule('border-style', 'inset'); expect(nodeCalledMenuSeparator).toHaveStyleRule('opacity', '0.5'); @@ -179,12 +179,12 @@ jest.mock('../src/useMenuState', () => { groups: [], hide: NOOP, items: [ - {disabled: false, groupId: undefined, id: 'primary-menu-customization-story-1', ref: {current: 'button'}}, - {disabled: false, groupId: undefined, id: 'primary-menu-customization-story-2', ref: {}}, - {disabled: false, groupId: undefined, id: 'primary-menu-customization-story-3', ref: {}}, - {disabled: false, groupId: undefined, id: 'primary-menu-customization-story-4', ref: {}}, - {disabled: false, groupId: undefined, id: 'primary-menu-customization-story-5', ref: {}}, - {disabled: false, groupId: undefined, id: 'primary-menu-customization-story-6', ref: {}}, + { disabled: false, groupId: undefined, id: 'primary-menu-customization-story-1', ref: { current: 'button' } }, + { disabled: false, groupId: undefined, id: 'primary-menu-customization-story-2', ref: {} }, + { disabled: false, groupId: undefined, id: 'primary-menu-customization-story-3', ref: {} }, + { disabled: false, groupId: undefined, id: 'primary-menu-customization-story-4', ref: {} }, + { disabled: false, groupId: undefined, id: 'primary-menu-customization-story-5', ref: {} }, + { disabled: false, groupId: undefined, id: 'primary-menu-customization-story-6', ref: {} }, ], last: NOOP, loop: false, @@ -216,16 +216,16 @@ jest.mock('../src/useMenuState', () => { toggle: NOOP, unregisterGroup: NOOP, unregisterItem: NOOP, - unstable_arrowRef: {current: null}, + unstable_arrowRef: { current: null }, unstable_arrowStyles: {}, - unstable_disclosureRef: {current: undefined}, + unstable_disclosureRef: { current: undefined }, unstable_hasActiveWidget: false, - unstable_idCountRef: {current: 6}, + unstable_idCountRef: { current: 6 }, unstable_includesBaseElement: false, unstable_moves: 2, unstable_originalPlacement: 'bottom-start', - unstable_popoverRef: {current: undefined}, - unstable_referenceRef: {current: undefined}, + unstable_popoverRef: { current: undefined }, + unstable_referenceRef: { current: undefined }, unstable_setHasActiveWidget: NOOP, unstable_setIncludesBaseElement: NOOP, unstable_setValue: NOOP, diff --git a/packages/paste-core/components/menu/__tests__/index.spec.tsx b/packages/paste-core/components/menu/__tests__/index.spec.tsx index 35d7dedd37..50e9733719 100644 --- a/packages/paste-core/components/menu/__tests__/index.spec.tsx +++ b/packages/paste-core/components/menu/__tests__/index.spec.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {fireEvent, render, screen} from '@testing-library/react'; -import {InformationIcon} from '@twilio-paste/icons/esm/InformationIcon'; +import { fireEvent, render, screen } from '@testing-library/react'; +import { InformationIcon } from '@twilio-paste/icons/esm/InformationIcon'; import { useMenuState, @@ -12,12 +12,12 @@ import { MenuItemCheckbox, MenuItemRadio, } from '../src'; -import type {MenuButtonProps} from '../src'; +import type { MenuButtonProps } from '../src'; const handleClickMock: jest.Mock = jest.fn(); const PreferencesMenu = React.forwardRef(function PreferencesMenu(props, ref) { - const menu = useMenuState({baseId: 'sub-menu'}); + const menu = useMenuState({ baseId: 'sub-menu' }); return ( <> @@ -39,8 +39,8 @@ const PreferencesMenu = React.forwardRef(fun }); const GROUP_LABEL_TEXT = 'Search Options'; -const MenuMock: React.FC}>> = ({groupRef}) => { - const menu = useMenuState({baseId: 'menu-example'}); +const MenuMock: React.FC }>> = ({ groupRef }) => { + const menu = useMenuState({ baseId: 'menu-example' }); return ( <> @@ -134,7 +134,7 @@ describe('Menu', () => { it('should render a menu group', () => { const groupRef = React.createRef(); - const {getByText} = render(); + const { getByText } = render(); expect(groupRef.current).not.toBeNull(); // eslint-disable-next-line @typescript-eslint/ban-ts-comment @@ -178,9 +178,9 @@ describe('Menu', () => { const renderedMenuItem = screen.getByTestId('example-menu-item'); fireEvent.click(renderedMenuItem); expect(handleClickMock).toHaveBeenCalled(); - fireEvent.keyDown(renderedMenuItem, {key: 'Space', code: 'Space'}); + fireEvent.keyDown(renderedMenuItem, { key: 'Space', code: 'Space' }); expect(handleClickMock).toHaveBeenCalled(); - fireEvent.keyDown(renderedMenuItem, {key: 'Enter', code: 'Enter'}); + fireEvent.keyDown(renderedMenuItem, { key: 'Enter', code: 'Enter' }); expect(handleClickMock).toHaveBeenCalled(); }); @@ -189,9 +189,9 @@ describe('Menu', () => { const renderedMenuItem = screen.getByTestId('example-menu-anchor'); fireEvent.click(renderedMenuItem); expect(handleClickMock).toHaveBeenCalled(); - fireEvent.keyDown(renderedMenuItem, {key: 'Space', code: 'Space'}); + fireEvent.keyDown(renderedMenuItem, { key: 'Space', code: 'Space' }); expect(handleClickMock).toHaveBeenCalled(); - fireEvent.keyDown(renderedMenuItem, {key: 'Enter', code: 'Enter'}); + fireEvent.keyDown(renderedMenuItem, { key: 'Enter', code: 'Enter' }); expect(handleClickMock).toHaveBeenCalled(); }); diff --git a/packages/paste-core/components/menu/__tests__/menu-badge-customization.spec.tsx b/packages/paste-core/components/menu/__tests__/menu-badge-customization.spec.tsx index 0956a63120..02f9e667f5 100644 --- a/packages/paste-core/components/menu/__tests__/menu-badge-customization.spec.tsx +++ b/packages/paste-core/components/menu/__tests__/menu-badge-customization.spec.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import type {RenderOptions} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render, screen } from '@testing-library/react'; +import type { RenderOptions } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {initStyles, BaseMenu} from '../stories/menu-badge-customization.stories'; +import { initStyles, BaseMenu } from '../stories/menu-badge-customization.stories'; const PASTE_ELEMENT = 'data-paste-element'; const initWrapper = (element: string): RenderOptions['wrapper'] => - function Wrapper({children}) { + function Wrapper({ children }) { return ( {children} diff --git a/packages/paste-core/components/menu/build.js b/packages/paste-core/components/menu/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/menu/build.js +++ b/packages/paste-core/components/menu/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/menu/src/Menu.tsx b/packages/paste-core/components/menu/src/Menu.tsx index 0f77d402e6..d92eb4e4cf 100644 --- a/packages/paste-core/components/menu/src/Menu.tsx +++ b/packages/paste-core/components/menu/src/Menu.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import type {BoxElementProps} from '@twilio-paste/box'; -import {safelySpreadBoxProps, Box} from '@twilio-paste/box'; -import {MenuPrimitive} from '@twilio-paste/menu-primitive'; +import type { BoxElementProps } from '@twilio-paste/box'; +import { safelySpreadBoxProps, Box } from '@twilio-paste/box'; +import { MenuPrimitive } from '@twilio-paste/menu-primitive'; -import type {MenuProps} from './types'; +import type { MenuProps } from './types'; -const StyledMenu = React.forwardRef(({style, ...props}, ref) => { +const StyledMenu = React.forwardRef(({ style, ...props }, ref) => { return ( (({style, .. minWidth="size20" zIndex="zIndex20" paddingY="space30" - _focus={{outline: 'none'}} + _focus={{ outline: 'none' }} style={style} ref={ref} /> @@ -28,10 +28,10 @@ const StyledMenu = React.forwardRef(({style, .. StyledMenu.displayName = 'StyledMenu'; -const Menu = React.forwardRef(({element = 'MENU', ...props}, ref) => { +const Menu = React.forwardRef(({ element = 'MENU', ...props }, ref) => { return ; }); Menu.displayName = 'Menu'; -export {Menu}; +export { Menu }; diff --git a/packages/paste-core/components/menu/src/MenuBadge.tsx b/packages/paste-core/components/menu/src/MenuBadge.tsx index 6025d887bc..77ce83fe48 100644 --- a/packages/paste-core/components/menu/src/MenuBadge.tsx +++ b/packages/paste-core/components/menu/src/MenuBadge.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only'; -import {Badge} from '@twilio-paste/badge'; -import type {BadgeProps} from '@twilio-paste/badge'; -import {Button} from '@twilio-paste/button'; -import type {ButtonProps} from '@twilio-paste/button'; -import {MenuPrimitiveButton} from '@twilio-paste/menu-primitive'; -import type {MenuPrimitiveButtonProps} from '@twilio-paste/menu-primitive'; -import {ChevronDownIcon} from '@twilio-paste/icons/esm/ChevronDownIcon'; +import { Box } from '@twilio-paste/box'; +import { ScreenReaderOnly } from '@twilio-paste/screen-reader-only'; +import { Badge } from '@twilio-paste/badge'; +import type { BadgeProps } from '@twilio-paste/badge'; +import { Button } from '@twilio-paste/button'; +import type { ButtonProps } from '@twilio-paste/button'; +import { MenuPrimitiveButton } from '@twilio-paste/menu-primitive'; +import type { MenuPrimitiveButtonProps } from '@twilio-paste/menu-primitive'; +import { ChevronDownIcon } from '@twilio-paste/icons/esm/ChevronDownIcon'; export type MenuBadgeProps = MenuPrimitiveButtonProps & Omit & @@ -17,7 +17,7 @@ export type MenuBadgeProps = MenuPrimitiveButtonProps & export type MenuBadgeContentProps = Omit; export const MenuBadgeContent = React.forwardRef( - ({children, element, i18nButtonLabel, ...props}, ref) => { + ({ children, element, i18nButtonLabel, ...props }, ref) => { return ( {children} @@ -34,12 +34,12 @@ export const MenuBadgeContent = React.forwardRef ); - } + }, ); MenuBadgeContent.displayName = 'MenuBadgeContent'; const MenuBadge = React.forwardRef( - ({children, element = 'MENU_BADGE', variant = 'default', i18nButtonLabel, ...props}, ref) => { + ({ children, element = 'MENU_BADGE', variant = 'default', i18nButtonLabel, ...props }, ref) => { return ( @@ -47,9 +47,9 @@ const MenuBadge = React.forwardRef( ); - } + }, ); MenuBadge.displayName = 'MenuBadge'; -export {MenuBadge}; +export { MenuBadge }; diff --git a/packages/paste-core/components/menu/src/MenuButton.tsx b/packages/paste-core/components/menu/src/MenuButton.tsx index aae4db9adc..5d9aa5c60f 100644 --- a/packages/paste-core/components/menu/src/MenuButton.tsx +++ b/packages/paste-core/components/menu/src/MenuButton.tsx @@ -1,18 +1,20 @@ import * as React from 'react'; -import type {MenuPrimitiveButtonProps} from '@twilio-paste/menu-primitive'; -import {MenuPrimitiveButton} from '@twilio-paste/menu-primitive'; -import type {ButtonProps} from '@twilio-paste/button'; -import {Button} from '@twilio-paste/button'; +import type { MenuPrimitiveButtonProps } from '@twilio-paste/menu-primitive'; +import { MenuPrimitiveButton } from '@twilio-paste/menu-primitive'; +import type { ButtonProps } from '@twilio-paste/button'; +import { Button } from '@twilio-paste/button'; export type MenuButtonProps = MenuPrimitiveButtonProps & ButtonProps; -const MenuButton = React.forwardRef(({element = 'MENU_BUTTON', ...props}, ref) => { - return ( - - {props.children} - - ); -}); +const MenuButton = React.forwardRef( + ({ element = 'MENU_BUTTON', ...props }, ref) => { + return ( + + {props.children} + + ); + }, +); MenuButton.displayName = 'MenuButton'; -export {MenuButton}; +export { MenuButton }; diff --git a/packages/paste-core/components/menu/src/MenuGroup.tsx b/packages/paste-core/components/menu/src/MenuGroup.tsx index 7b62facc05..aa845713f3 100644 --- a/packages/paste-core/components/menu/src/MenuGroup.tsx +++ b/packages/paste-core/components/menu/src/MenuGroup.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; -import {safelySpreadBoxProps, Box} from '@twilio-paste/box'; -import type {GenericIconProps} from '@twilio-paste/icons/esm/types'; -import {Text} from '@twilio-paste/text'; +import { safelySpreadBoxProps, Box } from '@twilio-paste/box'; +import type { GenericIconProps } from '@twilio-paste/icons/esm/types'; +import { Text } from '@twilio-paste/text'; -import {MenuItemVariants} from './constants'; -import type {MenuItemVariant, MenuGroupProps} from './types'; +import { MenuItemVariants } from './constants'; +import type { MenuItemVariant, MenuGroupProps } from './types'; export const MenuGroupContext = React.createContext(MenuItemVariants.DEFAULT); const MenuGroup = React.forwardRef( - ({label, icon, children, element = 'MENU_GROUP', ...props}, ref) => { + ({ label, icon, children, element = 'MENU_GROUP', ...props }, ref) => { return ( ( {React.isValidElement(icon) ? ( - {React.cloneElement(icon as React.ReactElement, {color: 'colorTextIcon'})} + {React.cloneElement(icon as React.ReactElement, { color: 'colorTextIcon' })} ) : null} ( ); - } + }, ); MenuGroup.displayName = 'MenuGroup'; -export {MenuGroup}; +export { MenuGroup }; diff --git a/packages/paste-core/components/menu/src/MenuItem.styles.tsx b/packages/paste-core/components/menu/src/MenuItem.styles.tsx index 5131a63a10..3e9c4b6bf5 100644 --- a/packages/paste-core/components/menu/src/MenuItem.styles.tsx +++ b/packages/paste-core/components/menu/src/MenuItem.styles.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import {secureExternalLink} from '@twilio-paste/anchor'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import {SelectedIcon} from '@twilio-paste/icons/esm/SelectedIcon'; +import { secureExternalLink } from '@twilio-paste/anchor'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import { SelectedIcon } from '@twilio-paste/icons/esm/SelectedIcon'; -import type {MenuItemProps, MenuItemVariantStyles, MenuItemVariant} from './types'; -import {MenuItemVariants} from './constants'; +import type { MenuItemProps, MenuItemVariantStyles, MenuItemVariant } from './types'; +import { MenuItemVariants } from './constants'; const baseVariantStyles: MenuItemVariantStyles = { [MenuItemVariants.DEFAULT]: { @@ -72,7 +72,7 @@ export const getComputedVariant = (variant: MenuItemVariant, isGrouped: boolean) }; export const StyledMenuItem = React.forwardRef( - ({element = 'STYLED_MENU_ITEM', href, variant = 'default', tabIndex, children, ...props}, ref) => { + ({ element = 'STYLED_MENU_ITEM', href, variant = 'default', tabIndex, children, ...props }, ref) => { return ( {children} - + ) : ( @@ -120,7 +120,7 @@ export const StyledMenuItem = React.forwardRef ); - } + }, ); StyledMenuItem.displayName = 'StyledMenuItem'; diff --git a/packages/paste-core/components/menu/src/MenuItem.tsx b/packages/paste-core/components/menu/src/MenuItem.tsx index f515ef3366..f284701892 100644 --- a/packages/paste-core/components/menu/src/MenuItem.tsx +++ b/packages/paste-core/components/menu/src/MenuItem.tsx @@ -1,20 +1,20 @@ import * as React from 'react'; -import {MenuPrimitiveItem} from '@twilio-paste/menu-primitive'; +import { MenuPrimitiveItem } from '@twilio-paste/menu-primitive'; -import type {MenuItemProps} from './types'; -import {MenuGroupContext} from './MenuGroup'; -import {MenuItemVariants} from './constants'; -import {StyledMenuItem, getComputedVariant} from './MenuItem.styles'; +import type { MenuItemProps } from './types'; +import { MenuGroupContext } from './MenuGroup'; +import { MenuItemVariants } from './constants'; +import { StyledMenuItem, getComputedVariant } from './MenuItem.styles'; const MenuItem = React.forwardRef( - ({as = StyledMenuItem, variant: _variant, element = 'MENU_ITEM', ...props}, ref) => { + ({ as = StyledMenuItem, variant: _variant, element = 'MENU_ITEM', ...props }, ref) => { const isGrouped = React.useContext(MenuGroupContext) === MenuItemVariants.GROUP_ITEM; const variant = _variant ? getComputedVariant(_variant, isGrouped) : _variant; return ; - } + }, ); MenuItem.displayName = 'MenuItem'; -export {MenuItem}; +export { MenuItem }; diff --git a/packages/paste-core/components/menu/src/MenuItemCheckbox.tsx b/packages/paste-core/components/menu/src/MenuItemCheckbox.tsx index 1f6a62b4e7..da9e46b930 100644 --- a/packages/paste-core/components/menu/src/MenuItemCheckbox.tsx +++ b/packages/paste-core/components/menu/src/MenuItemCheckbox.tsx @@ -1,19 +1,19 @@ import * as React from 'react'; -import {MenuPrimitiveItemCheckbox} from '@twilio-paste/menu-primitive'; +import { MenuPrimitiveItemCheckbox } from '@twilio-paste/menu-primitive'; -import type {MenuItemCheckboxProps} from './types'; -import {MenuGroupContext} from './MenuGroup'; -import {MenuItemVariants} from './constants'; -import {StyledMenuItem, getComputedVariant} from './MenuItem.styles'; +import type { MenuItemCheckboxProps } from './types'; +import { MenuGroupContext } from './MenuGroup'; +import { MenuItemVariants } from './constants'; +import { StyledMenuItem, getComputedVariant } from './MenuItem.styles'; const MenuItemCheckbox = React.forwardRef( - ({as = StyledMenuItem, variant: _variant, element = 'MENU_ITEM_CHECKBOX', ...props}, ref) => { + ({ as = StyledMenuItem, variant: _variant, element = 'MENU_ITEM_CHECKBOX', ...props }, ref) => { const isGrouped = React.useContext(MenuGroupContext) === MenuItemVariants.GROUP_ITEM; const variant = _variant ? getComputedVariant(_variant, isGrouped) : _variant; return ; - } + }, ); MenuItemCheckbox.displayName = 'MenuItemCheckbox'; -export {MenuItemCheckbox}; +export { MenuItemCheckbox }; diff --git a/packages/paste-core/components/menu/src/MenuItemRadio.tsx b/packages/paste-core/components/menu/src/MenuItemRadio.tsx index 2b923a683d..3e052136ba 100644 --- a/packages/paste-core/components/menu/src/MenuItemRadio.tsx +++ b/packages/paste-core/components/menu/src/MenuItemRadio.tsx @@ -1,19 +1,19 @@ import * as React from 'react'; -import {MenuPrimitiveItemRadio} from '@twilio-paste/menu-primitive'; +import { MenuPrimitiveItemRadio } from '@twilio-paste/menu-primitive'; -import type {MenuItemRadioProps} from './types'; -import {MenuGroupContext} from './MenuGroup'; -import {MenuItemVariants} from './constants'; -import {StyledMenuItem, getComputedVariant} from './MenuItem.styles'; +import type { MenuItemRadioProps } from './types'; +import { MenuGroupContext } from './MenuGroup'; +import { MenuItemVariants } from './constants'; +import { StyledMenuItem, getComputedVariant } from './MenuItem.styles'; const MenuItemRadio = React.forwardRef( - ({as = StyledMenuItem, variant: _variant, element = 'MENU_ITEM_RADIO', ...props}, ref) => { + ({ as = StyledMenuItem, variant: _variant, element = 'MENU_ITEM_RADIO', ...props }, ref) => { const isGrouped = React.useContext(MenuGroupContext) === MenuItemVariants.GROUP_ITEM; const variant = _variant ? getComputedVariant(_variant, isGrouped) : _variant; return ; - } + }, ); MenuItemRadio.displayName = 'MenuItemRadio'; -export {MenuItemRadio}; +export { MenuItemRadio }; diff --git a/packages/paste-core/components/menu/src/MenuSeparator.tsx b/packages/paste-core/components/menu/src/MenuSeparator.tsx index e321fef63c..82047856c1 100644 --- a/packages/paste-core/components/menu/src/MenuSeparator.tsx +++ b/packages/paste-core/components/menu/src/MenuSeparator.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {Separator} from '@twilio-paste/separator'; -import type {SeparatorProps} from '@twilio-paste/separator'; -import {MenuPrimitiveSeparator} from '@twilio-paste/menu-primitive'; +import { Separator } from '@twilio-paste/separator'; +import type { SeparatorProps } from '@twilio-paste/separator'; +import { MenuPrimitiveSeparator } from '@twilio-paste/menu-primitive'; -import type {MenuSeparatorProps} from './types'; +import type { MenuSeparatorProps } from './types'; const StyledMenuSeparator = React.forwardRef((props, ref) => { return ; @@ -12,10 +12,10 @@ const StyledMenuSeparator = React.forwardRef((pro StyledMenuSeparator.displayName = 'StyledMenuSeparator'; const MenuSeparator = React.forwardRef( - ({element = 'MENU_SEPARATOR', ...props}, ref) => { + ({ element = 'MENU_SEPARATOR', ...props }, ref) => { // as prop from reakit for some reason only accepts a string of `hr` but accepts components. any prevent type errors return ; - } + }, ); MenuSeparator.displayName = 'MenuSeparator'; -export {MenuSeparator}; +export { MenuSeparator }; diff --git a/packages/paste-core/components/menu/src/SubMenuButton.tsx b/packages/paste-core/components/menu/src/SubMenuButton.tsx index 7de33c9f55..8cfd14e04e 100644 --- a/packages/paste-core/components/menu/src/SubMenuButton.tsx +++ b/packages/paste-core/components/menu/src/SubMenuButton.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; -import type {BoxElementProps} from '@twilio-paste/box'; -import type {MenuPrimitiveButtonProps} from '@twilio-paste/menu-primitive'; -import {MenuPrimitiveButton} from '@twilio-paste/menu-primitive'; -import {MediaObject, MediaBody, MediaFigure} from '@twilio-paste/media-object'; -import {ChevronRightIcon} from '@twilio-paste/icons/esm/ChevronRightIcon'; +import type { BoxElementProps } from '@twilio-paste/box'; +import type { MenuPrimitiveButtonProps } from '@twilio-paste/menu-primitive'; +import { MenuPrimitiveButton } from '@twilio-paste/menu-primitive'; +import { MediaObject, MediaBody, MediaFigure } from '@twilio-paste/media-object'; +import { ChevronRightIcon } from '@twilio-paste/icons/esm/ChevronRightIcon'; -import {StyledMenuItem} from './MenuItem.styles'; +import { StyledMenuItem } from './MenuItem.styles'; -export type SubMenuButtonProps = MenuPrimitiveButtonProps & {element?: BoxElementProps['element']}; +export type SubMenuButtonProps = MenuPrimitiveButtonProps & { element?: BoxElementProps['element'] }; const SubMenuButton = React.forwardRef( - ({element = 'SUBMENU_BUTTON', ...props}, ref) => { + ({ element = 'SUBMENU_BUTTON', ...props }, ref) => { // MenuPrimitiveButton from reakit types `as` as HTML element names, but accepts components. any prevents type errors return ( @@ -26,7 +26,7 @@ const SubMenuButton = React.forwardRef( ); - } + }, ); SubMenuButton.displayName = 'SubMenuButton'; -export {SubMenuButton}; +export { SubMenuButton }; diff --git a/packages/paste-core/components/menu/src/types.ts b/packages/paste-core/components/menu/src/types.ts index e7f6569991..e4963453ce 100644 --- a/packages/paste-core/components/menu/src/types.ts +++ b/packages/paste-core/components/menu/src/types.ts @@ -1,5 +1,5 @@ -import type {ValueOf} from '@twilio-paste/types'; -import type {BoxElementProps, BoxStyleProps} from '@twilio-paste/box'; +import type { ValueOf } from '@twilio-paste/types'; +import type { BoxElementProps, BoxStyleProps } from '@twilio-paste/box'; import type { MenuPrimitiveItemProps, MenuPrimitiveItemCheckboxProps, @@ -8,9 +8,9 @@ import type { MenuPrimitiveSeparatorProps, } from '@twilio-paste/menu-primitive'; -import type {MenuItemVariants} from './constants'; +import type { MenuItemVariants } from './constants'; -export type MenuProps = MenuPrimitiveProps & {'aria-label': string; element?: BoxElementProps['element']}; +export type MenuProps = MenuPrimitiveProps & { 'aria-label': string; element?: BoxElementProps['element'] }; export type MenuItemVariant = ValueOf; @@ -44,4 +44,4 @@ export interface MenuGroupProps { element?: BoxElementProps['element']; } -export type MenuSeparatorProps = MenuPrimitiveSeparatorProps & {element?: BoxElementProps['element']}; +export type MenuSeparatorProps = MenuPrimitiveSeparatorProps & { element?: BoxElementProps['element'] }; diff --git a/packages/paste-core/components/menu/src/useMenuState.ts b/packages/paste-core/components/menu/src/useMenuState.ts index 5c786ce6c8..78c3c174b6 100644 --- a/packages/paste-core/components/menu/src/useMenuState.ts +++ b/packages/paste-core/components/menu/src/useMenuState.ts @@ -1,3 +1,3 @@ -import {useMenuPrimitiveState} from '@twilio-paste/menu-primitive'; +import { useMenuPrimitiveState } from '@twilio-paste/menu-primitive'; -export {useMenuPrimitiveState as useMenuState}; +export { useMenuPrimitiveState as useMenuState }; diff --git a/packages/paste-core/components/menu/stories/customization.stories.tsx b/packages/paste-core/components/menu/stories/customization.stories.tsx index 0704cfae00..58261b0a34 100644 --- a/packages/paste-core/components/menu/stories/customization.stories.tsx +++ b/packages/paste-core/components/menu/stories/customization.stories.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {Box} from '@twilio-paste/box'; -import {useTheme} from '@twilio-paste/theme'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import type {PasteCustomCSS} from '@twilio-paste/customization'; -import {SearchIcon} from '@twilio-paste/icons/esm/SearchIcon'; -import {SupportIcon} from '@twilio-paste/icons/esm/SupportIcon'; -import {ProductSettingsIcon} from '@twilio-paste/icons/esm/ProductSettingsIcon'; -import {ChevronDownIcon} from '@twilio-paste/icons/esm/ChevronDownIcon'; -import {useUID} from '@twilio-paste/uid-library'; -import type {ButtonProps} from '@twilio-paste/button'; +import type { StoryFn } from '@storybook/react'; +import { Box } from '@twilio-paste/box'; +import { useTheme } from '@twilio-paste/theme'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import type { PasteCustomCSS } from '@twilio-paste/customization'; +import { SearchIcon } from '@twilio-paste/icons/esm/SearchIcon'; +import { SupportIcon } from '@twilio-paste/icons/esm/SupportIcon'; +import { ProductSettingsIcon } from '@twilio-paste/icons/esm/ProductSettingsIcon'; +import { ChevronDownIcon } from '@twilio-paste/icons/esm/ChevronDownIcon'; +import { useUID } from '@twilio-paste/uid-library'; +import type { ButtonProps } from '@twilio-paste/button'; import { Menu, @@ -33,10 +33,14 @@ export const initStyles = (element: string): ElementOverrides => ({ }, [`${element}_BUTTON`]: { variants: { - secondary: {color: 'colorText', backgroundColor: 'colorBackgroundNeutralWeakest'}, - destructive: {color: 'colorText', backgroundColor: 'colorBackgroundNeutralWeakest'}, - destructive_secondary: {backgroundColor: 'colorBackgroundNeutralWeakest', color: 'colorTextWarningStrong'}, - link: {padding: 'space40', borderRadius: 'borderRadiusCircle', backgroundColor: 'colorBackgroundNeutralWeakest'}, + secondary: { color: 'colorText', backgroundColor: 'colorBackgroundNeutralWeakest' }, + destructive: { color: 'colorText', backgroundColor: 'colorBackgroundNeutralWeakest' }, + destructive_secondary: { backgroundColor: 'colorBackgroundNeutralWeakest', color: 'colorTextWarningStrong' }, + link: { + padding: 'space40', + borderRadius: 'borderRadiusCircle', + backgroundColor: 'colorBackgroundNeutralWeakest', + }, destructive_link: { padding: 'space40', borderRadius: 'borderRadiusCircle', @@ -111,10 +115,10 @@ const getElementName = (elementName: string | undefined, suffix?: string, prefix export default { title: 'Components/Menu/Customization', component: Menu, - subcomponents: {MenuButton, SubMenuButton, MenuGroup, MenuItem, MenuSeparator}, + subcomponents: { MenuButton, SubMenuButton, MenuGroup, MenuItem, MenuSeparator }, parameters: { // Sets a delay for the component's stories - chromatic: {delay: 3000}, + chromatic: { delay: 3000 }, a11y: { // no need to a11y check customization disable: true, @@ -123,15 +127,15 @@ export default { excludeStories: ['initStyles', 'BaseMenu'], }; -export const BaseMenu: React.FC> = - React.memo(function BaseMenu({menuButtonVariant = 'primary', element}) { +export const BaseMenu: React.FC> = + React.memo(function BaseMenu({ menuButtonVariant = 'primary', element }) { const uniqueBaseID = useUID(); const menu = useMenuState({ visible: true, baseId: `${uniqueBaseID}-${menuButtonVariant}-menu-customization-story`, }); - const subMenu = useMenuState({baseId: `${uniqueBaseID}-${menuButtonVariant}-menu-submenu`}); + const subMenu = useMenuState({ baseId: `${uniqueBaseID}-${menuButtonVariant}-menu-submenu` }); const onClick = React.useCallback(() => { menu.hide(); }, [menu.hide]); @@ -233,7 +237,7 @@ export const BaseMenu: React.FC { +export const WithDefaultElementName: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( @@ -248,7 +252,7 @@ export const WithDefaultElementName: StoryFn = (_args, {parameters: {isTestEnvir ); }; -export const WithCustomElementName: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const WithCustomElementName: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( diff --git a/packages/paste-core/components/menu/stories/index.stories.tsx b/packages/paste-core/components/menu/stories/index.stories.tsx index 37267ff65e..6592ad1337 100644 --- a/packages/paste-core/components/menu/stories/index.stories.tsx +++ b/packages/paste-core/components/menu/stories/index.stories.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import {Stack} from '@twilio-paste/stack'; -import {Text} from '@twilio-paste/text'; -import {MediaObject, MediaBody, MediaFigure} from '@twilio-paste/media-object'; -import {AttachIcon} from '@twilio-paste/icons/esm/AttachIcon'; -import {ProductVoiceIcon} from '@twilio-paste/icons/esm/ProductVoiceIcon'; -import {ChevronDownIcon} from '@twilio-paste/icons/esm/ChevronDownIcon'; -import {MoreIcon} from '@twilio-paste/icons/esm/MoreIcon'; -import {useUID} from '@twilio-paste/uid-library'; +import { Box } from '@twilio-paste/box'; +import { Stack } from '@twilio-paste/stack'; +import { Text } from '@twilio-paste/text'; +import { MediaObject, MediaBody, MediaFigure } from '@twilio-paste/media-object'; +import { AttachIcon } from '@twilio-paste/icons/esm/AttachIcon'; +import { ProductVoiceIcon } from '@twilio-paste/icons/esm/ProductVoiceIcon'; +import { ChevronDownIcon } from '@twilio-paste/icons/esm/ChevronDownIcon'; +import { MoreIcon } from '@twilio-paste/icons/esm/MoreIcon'; +import { useUID } from '@twilio-paste/uid-library'; import { Menu, @@ -54,7 +54,7 @@ const PlainMenu: React.FC> = () => { }; const AutoplacedMenu = (): JSX.Element => { - const menu = useMenuState({visible: true}); + const menu = useMenuState({ visible: true }); return ( <> @@ -223,10 +223,10 @@ const MenuGroups = (): JSX.Element => { export default { title: 'Components/Menu', component: Menu, - subcomponents: {MenuButton, SubMenuButton, MenuGroup, MenuItem, MenuSeparator}, + subcomponents: { MenuButton, SubMenuButton, MenuGroup, MenuItem, MenuSeparator }, parameters: { // Sets a delay for the component's stories - chromatic: {delay: 3000}, + chromatic: { delay: 3000 }, }, }; diff --git a/packages/paste-core/components/menu/stories/menu-badge-customization.stories.tsx b/packages/paste-core/components/menu/stories/menu-badge-customization.stories.tsx index 26276b55bf..37acadbca7 100644 --- a/packages/paste-core/components/menu/stories/menu-badge-customization.stories.tsx +++ b/packages/paste-core/components/menu/stories/menu-badge-customization.stories.tsx @@ -1,23 +1,23 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {Box} from '@twilio-paste/box'; -import {useTheme} from '@twilio-paste/theme'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import type {PasteCustomCSS} from '@twilio-paste/customization'; -import {ProductSettingsIcon} from '@twilio-paste/icons/esm/ProductSettingsIcon'; -import {useUID} from '@twilio-paste/uid-library'; +import type { StoryFn } from '@storybook/react'; +import { Box } from '@twilio-paste/box'; +import { useTheme } from '@twilio-paste/theme'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import type { PasteCustomCSS } from '@twilio-paste/customization'; +import { ProductSettingsIcon } from '@twilio-paste/icons/esm/ProductSettingsIcon'; +import { useUID } from '@twilio-paste/uid-library'; -import {Menu, MenuBadge, SubMenuButton, MenuGroup, MenuItem, MenuSeparator, useMenuState} from '../src'; -import type {MenuBadgeProps} from '../src'; +import { Menu, MenuBadge, SubMenuButton, MenuGroup, MenuItem, MenuSeparator, useMenuState } from '../src'; +import type { MenuBadgeProps } from '../src'; type ElementOverrides = Record; export const initStyles = (element: string): ElementOverrides => ({ [`${element}_BADGE`]: { variants: { - decorative10: {color: 'colorText', backgroundColor: 'colorBackgroundNeutralWeakest'}, - error: {color: 'colorText', backgroundColor: 'colorBackgroundNeutralWeakest'}, - neutral: {backgroundColor: 'colorBackgroundNeutralWeakest', color: 'colorTextWarningStrong'}, + decorative10: { color: 'colorText', backgroundColor: 'colorBackgroundNeutralWeakest' }, + error: { color: 'colorText', backgroundColor: 'colorBackgroundNeutralWeakest' }, + neutral: { backgroundColor: 'colorBackgroundNeutralWeakest', color: 'colorTextWarningStrong' }, subaccount: { padding: 'space40', borderRadius: 'borderRadiusCircle', @@ -32,7 +32,7 @@ export const initStyles = (element: string): ElementOverrides => ({ }, }, }, - [`${element}_BADGE_BUTTON`]: {backgroundColor: 'colorBackgroundErrorStrong'}, + [`${element}_BADGE_BUTTON`]: { backgroundColor: 'colorBackgroundErrorStrong' }, }); const getElementName = (elementName: string | undefined, suffix?: string, prefix?: string): string | undefined => { @@ -45,10 +45,10 @@ const getElementName = (elementName: string | undefined, suffix?: string, prefix export default { title: 'Components/Menu/MenuBadge/Customization', component: Menu, - subcomponents: {MenuBadge, SubMenuButton, MenuGroup, MenuItem, MenuSeparator}, + subcomponents: { MenuBadge, SubMenuButton, MenuGroup, MenuItem, MenuSeparator }, parameters: { // Sets a delay for the component's stories - chromatic: {delay: 3000}, + chromatic: { delay: 3000 }, a11y: { // no need to a11y check customization disable: true, @@ -58,14 +58,14 @@ export default { }; export const BaseMenu: React.FC< - React.PropsWithChildren<{menuBadgeVariant?: MenuBadgeProps['variant']; element?: string}> -> = React.memo(function BaseMenu({menuBadgeVariant = 'decorative10', element}) { + React.PropsWithChildren<{ menuBadgeVariant?: MenuBadgeProps['variant']; element?: string }> +> = React.memo(function BaseMenu({ menuBadgeVariant = 'decorative10', element }) { const uniqueBaseID = useUID(); const menu = useMenuState({ baseId: `${uniqueBaseID}-${menuBadgeVariant}-menu-customization-story`, }); - const subMenu = useMenuState({baseId: `${uniqueBaseID}-${menuBadgeVariant}-menu-submenu`}); + const subMenu = useMenuState({ baseId: `${uniqueBaseID}-${menuBadgeVariant}-menu-submenu` }); const onClick = React.useCallback(() => { menu.hide(); }, [menu]); @@ -109,7 +109,7 @@ export const BaseMenu: React.FC< ); }); -export const WithDefaultElementName: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const WithDefaultElementName: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( @@ -124,7 +124,7 @@ export const WithDefaultElementName: StoryFn = (_args, {parameters: {isTestEnvir ); }; -export const WithCustomElementName: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const WithCustomElementName: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( diff --git a/packages/paste-core/components/menu/stories/menu-badge.stories.tsx b/packages/paste-core/components/menu/stories/menu-badge.stories.tsx index a07ecd9462..bf6802d340 100644 --- a/packages/paste-core/components/menu/stories/menu-badge.stories.tsx +++ b/packages/paste-core/components/menu/stories/menu-badge.stories.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import type {BadgeProps} from '@twilio-paste/badge'; -import {Stack} from '@twilio-paste/stack'; +import type { StoryFn } from '@storybook/react'; +import type { BadgeProps } from '@twilio-paste/badge'; +import { Stack } from '@twilio-paste/stack'; -import {Menu, MenuBadge, MenuItem, MenuSeparator, useMenuState} from '../src'; +import { Menu, MenuBadge, MenuItem, MenuSeparator, useMenuState } from '../src'; -const BadgeMenu: React.FC> = ({variant, children}) => { +const BadgeMenu: React.FC> = ({ variant, children }) => { const menu = useMenuState(); const onClick = (): void => { menu.hide(); @@ -40,10 +40,10 @@ const BadgeMenu: React.FC ( diff --git a/packages/paste-core/components/menu/stories/menu-checkable-items.stories.tsx b/packages/paste-core/components/menu/stories/menu-checkable-items.stories.tsx index 53be2f8c0c..cfd8d3e394 100644 --- a/packages/paste-core/components/menu/stories/menu-checkable-items.stories.tsx +++ b/packages/paste-core/components/menu/stories/menu-checkable-items.stories.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {Box} from '@twilio-paste/box'; -import {ChevronDownIcon} from '@twilio-paste/icons/esm/ChevronDownIcon'; -import {UnorderedListIcon} from '@twilio-paste/icons/esm/UnorderedListIcon'; -import {DataBarChartIcon} from '@twilio-paste/icons/esm/DataBarChartIcon'; -import {DataLineChartIcon} from '@twilio-paste/icons/esm/DataLineChartIcon'; -import {DataPieChartIcon} from '@twilio-paste/icons/esm/DataPieChartIcon'; -import {DataTableIcon} from '@twilio-paste/icons/esm/DataTableIcon'; -import {BoldIcon} from '@twilio-paste/icons/esm/BoldIcon'; -import {UnderlineIcon} from '@twilio-paste/icons/esm/UnderlineIcon'; -import {ItalicIcon} from '@twilio-paste/icons/esm/ItalicIcon'; -import {StrikethroughIcon} from '@twilio-paste/icons/esm/StrikethroughIcon'; +import type { StoryFn } from '@storybook/react'; +import { Box } from '@twilio-paste/box'; +import { ChevronDownIcon } from '@twilio-paste/icons/esm/ChevronDownIcon'; +import { UnorderedListIcon } from '@twilio-paste/icons/esm/UnorderedListIcon'; +import { DataBarChartIcon } from '@twilio-paste/icons/esm/DataBarChartIcon'; +import { DataLineChartIcon } from '@twilio-paste/icons/esm/DataLineChartIcon'; +import { DataPieChartIcon } from '@twilio-paste/icons/esm/DataPieChartIcon'; +import { DataTableIcon } from '@twilio-paste/icons/esm/DataTableIcon'; +import { BoldIcon } from '@twilio-paste/icons/esm/BoldIcon'; +import { UnderlineIcon } from '@twilio-paste/icons/esm/UnderlineIcon'; +import { ItalicIcon } from '@twilio-paste/icons/esm/ItalicIcon'; +import { StrikethroughIcon } from '@twilio-paste/icons/esm/StrikethroughIcon'; import { Menu, @@ -28,10 +28,10 @@ import { export default { title: 'Components/Menu/CheckableItems', component: Menu, - subcomponents: {MenuButton, SubMenuButton, MenuGroup, MenuItem, MenuSeparator}, + subcomponents: { MenuButton, SubMenuButton, MenuGroup, MenuItem, MenuSeparator }, parameters: { // Sets a delay for the component's stories - chromatic: {delay: 3000}, + chromatic: { delay: 3000 }, }, }; diff --git a/packages/paste-core/components/meter/__tests__/index.spec.tsx b/packages/paste-core/components/meter/__tests__/index.spec.tsx index 7a91e382c5..b6a5628088 100644 --- a/packages/paste-core/components/meter/__tests__/index.spec.tsx +++ b/packages/paste-core/components/meter/__tests__/index.spec.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import {Theme} from '@twilio-paste/theme'; -import type {RenderOptions} from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; +import { Theme } from '@twilio-paste/theme'; +import type { RenderOptions } from '@testing-library/react'; -import {Default, AriaLabel, Customized} from '../stories/index.stories'; +import { Default, AriaLabel, Customized } from '../stories/index.stories'; -const ThemeWrapper: RenderOptions['wrapper'] = ({children}) => ( +const ThemeWrapper: RenderOptions['wrapper'] = ({ children }) => ( {children} ); @@ -14,7 +14,7 @@ const elementAttr = 'data-paste-element'; describe('Meter', () => { describe('base usage', () => { it('should render correctly', () => { - render(, {wrapper: ThemeWrapper}); + render(, { wrapper: ThemeWrapper }); const meter = screen.getByRole('meter'); expect(meter).toBeInTheDocument(); expect(meter).toHaveAttribute('aria-valuemin', '0'); @@ -26,7 +26,7 @@ describe('Meter', () => { }); it('should apply aria-label correctly', () => { - render(, {wrapper: ThemeWrapper}); + render(, { wrapper: ThemeWrapper }); const meter = screen.getByRole('meter'); expect(meter).toHaveAttribute('aria-label', 'Storage space'); expect(meter).not.toHaveAttribute('aria-labelledby'); diff --git a/packages/paste-core/components/meter/build.js b/packages/paste-core/components/meter/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/meter/build.js +++ b/packages/paste-core/components/meter/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/meter/src/Meter.tsx b/packages/paste-core/components/meter/src/Meter.tsx index 8b28d2b64e..3bcfb54454 100644 --- a/packages/paste-core/components/meter/src/Meter.tsx +++ b/packages/paste-core/components/meter/src/Meter.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {type BoxProps, Box} from '@twilio-paste/box'; -import {Text} from '@twilio-paste/text'; -import type {HTMLPasteProps} from '@twilio-paste/types'; -import {useMeter} from '@twilio-paste/react-spectrum-library'; +import { type BoxProps, Box } from '@twilio-paste/box'; +import { Text } from '@twilio-paste/text'; +import type { HTMLPasteProps } from '@twilio-paste/types'; +import { useMeter } from '@twilio-paste/react-spectrum-library'; -import {LABEL_SUFFIX} from './constants'; +import { LABEL_SUFFIX } from './constants'; export interface MeterProps extends HTMLPasteProps<'meter'>, Pick { minValue?: number; @@ -19,9 +19,9 @@ export interface MeterProps extends HTMLPasteProps<'meter'>, Pick( - ({element = 'METER', id, minLabel, maxLabel, ...props}, ref) => { - const {value = 0, minValue = 0, maxValue = 100} = props; - const {meterProps} = useMeter(props); + ({ element = 'METER', id, minLabel, maxLabel, ...props }, ref) => { + const { value = 0, minValue = 0, maxValue = 100 } = props; + const { meterProps } = useMeter(props); // Calculate the width of the bar as a percentage const percentage = (value - minValue) / (maxValue - minValue); @@ -102,9 +102,9 @@ const Meter = React.forwardRef( )} ); - } + }, ); Meter.displayName = 'Meter'; -export {Meter}; +export { Meter }; diff --git a/packages/paste-core/components/meter/src/MeterLabel.tsx b/packages/paste-core/components/meter/src/MeterLabel.tsx index 7f8a3cb57b..5f8759e334 100644 --- a/packages/paste-core/components/meter/src/MeterLabel.tsx +++ b/packages/paste-core/components/meter/src/MeterLabel.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {type BoxProps, Box} from '@twilio-paste/box'; -import {Label} from '@twilio-paste/label'; -import {Text} from '@twilio-paste/text'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { type BoxProps, Box } from '@twilio-paste/box'; +import { Label } from '@twilio-paste/label'; +import { Text } from '@twilio-paste/text'; +import type { HTMLPasteProps } from '@twilio-paste/types'; -import {LABEL_SUFFIX} from './constants'; +import { LABEL_SUFFIX } from './constants'; export interface MeterLabelProps extends HTMLPasteProps<'div'>, Pick { children: string; @@ -13,7 +13,7 @@ export interface MeterLabelProps extends HTMLPasteProps<'div'>, Pick( - ({element = 'METER_LABEL', children, htmlFor, valueLabel, ...labelProps}, ref) => { + ({ element = 'METER_LABEL', children, htmlFor, valueLabel, ...labelProps }, ref) => { return ( ( )} ); - } + }, ); MeterLabel.displayName = 'MeterLabel'; -export {MeterLabel}; +export { MeterLabel }; diff --git a/packages/paste-core/components/meter/stories/index.stories.tsx b/packages/paste-core/components/meter/stories/index.stories.tsx index 42dd1fab7e..0270ad536a 100644 --- a/packages/paste-core/components/meter/stories/index.stories.tsx +++ b/packages/paste-core/components/meter/stories/index.stories.tsx @@ -1,11 +1,11 @@ -import {CustomizationProvider} from '@twilio-paste/customization'; -import {useTheme} from '@twilio-paste/theme'; -import {useUID} from '@twilio-paste/uid-library'; -import {HelpText} from '@twilio-paste/help-text'; -import {Box} from '@twilio-paste/box'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { useTheme } from '@twilio-paste/theme'; +import { useUID } from '@twilio-paste/uid-library'; +import { HelpText } from '@twilio-paste/help-text'; +import { Box } from '@twilio-paste/box'; import * as React from 'react'; -import {Meter, MeterLabel} from '../src'; +import { Meter, MeterLabel } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -157,37 +157,37 @@ export const Customized = (): React.ReactElement => { diff --git a/packages/paste-core/components/minimizable-dialog/__tests__/customization.spec.tsx b/packages/paste-core/components/minimizable-dialog/__tests__/customization.spec.tsx index 91583f2b8a..69ea5a1174 100644 --- a/packages/paste-core/components/minimizable-dialog/__tests__/customization.spec.tsx +++ b/packages/paste-core/components/minimizable-dialog/__tests__/customization.spec.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {act, fireEvent, render, screen, waitFor} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; import { MinimizableDialog, @@ -10,7 +10,7 @@ import { MinimizableDialogContent, } from '../src'; -const CustomizationWrapper: React.FC = ({children}) => ( +const CustomizationWrapper: React.FC = ({ children }) => ( = ({children}) => ); -const MyCustomizationWrapper: React.FC = ({children}) => ( +const MyCustomizationWrapper: React.FC = ({ children }) => ( { My custom dialog This is a dialog. - + , ); - const dialogButton = screen.getByRole('button', {name: 'Button'}); - const minimizeButton = screen.getByRole('button', {name: 'minimize', hidden: true}); - const closeButton = screen.getByRole('button', {name: 'close', hidden: true}); - const dialog = screen.getByRole('dialog', {hidden: true}); + const dialogButton = screen.getByRole('button', { name: 'Button' }); + const minimizeButton = screen.getByRole('button', { name: 'minimize', hidden: true }); + const closeButton = screen.getByRole('button', { name: 'close', hidden: true }); + const dialog = screen.getByRole('dialog', { hidden: true }); const dialogContents = screen.getByTestId('dialog-contents'); const dialogHeader = screen.getByTestId('dialog-header'); const dialogHeading = screen.getByText('My custom dialog'); @@ -115,10 +115,10 @@ describe('Customization', () => { expect(dialog.querySelector('[data-paste-element="MINIMIZABLE_DIALOG"]')).toBeInTheDocument(); expect( - minimizeButton.querySelector('[data-paste-element="MINIMIZABLE_DIALOG_HEADER_MINIMIZE_ICON"]') + minimizeButton.querySelector('[data-paste-element="MINIMIZABLE_DIALOG_HEADER_MINIMIZE_ICON"]'), ).toBeInTheDocument(); expect( - closeButton.querySelector('[data-paste-element="MINIMIZABLE_DIALOG_HEADER_CLOSE_ICON"]') + closeButton.querySelector('[data-paste-element="MINIMIZABLE_DIALOG_HEADER_CLOSE_ICON"]'), ).toBeInTheDocument(); }); @@ -131,17 +131,17 @@ describe('Customization', () => { This is a dialog. , - {wrapper: CustomizationWrapper} + { wrapper: CustomizationWrapper }, ); - const dialogButton = screen.getByRole('button', {name: 'Button'}); + const dialogButton = screen.getByRole('button', { name: 'Button' }); await waitFor(() => { fireEvent.click(dialogButton); }); - const minimizeButton = screen.getByRole('button', {name: 'minimize'}); - const closeButton = screen.getByRole('button', {name: 'close'}); + const minimizeButton = screen.getByRole('button', { name: 'minimize' }); + const closeButton = screen.getByRole('button', { name: 'close' }); const dialog = screen.getByRole('dialog').querySelector('[data-paste-element="MINIMIZABLE_DIALOG"]'); const dialogContents = screen.getByTestId('dialog-contents'); const dialogHeader = screen.getByTestId('dialog-header'); @@ -174,13 +174,13 @@ describe('Customization', () => { This is a dialog. - + , ); - const dialogButton = screen.getByRole('button', {name: 'Button'}); - const minimizeButton = screen.getByRole('button', {name: 'minimize', hidden: true}); - const closeButton = screen.getByRole('button', {name: 'close', hidden: true}); - const dialog = screen.getByRole('dialog', {hidden: true}); + const dialogButton = screen.getByRole('button', { name: 'Button' }); + const minimizeButton = screen.getByRole('button', { name: 'minimize', hidden: true }); + const closeButton = screen.getByRole('button', { name: 'close', hidden: true }); + const dialog = screen.getByRole('dialog', { hidden: true }); const dialogContents = screen.getByTestId('dialog-contents'); const dialogHeader = screen.getByTestId('dialog-header'); const dialogHeading = screen.getByText('My custom dialog'); @@ -212,17 +212,17 @@ describe('Customization', () => { , - {wrapper: MyCustomizationWrapper} + { wrapper: MyCustomizationWrapper }, ); - const dialogButton = screen.getByRole('button', {name: 'Button'}); + const dialogButton = screen.getByRole('button', { name: 'Button' }); await waitFor(() => { fireEvent.click(dialogButton); }); - const minimizeButton = screen.getByRole('button', {name: 'minimize'}); - const closeButton = screen.getByRole('button', {name: 'close'}); + const minimizeButton = screen.getByRole('button', { name: 'minimize' }); + const closeButton = screen.getByRole('button', { name: 'close' }); const dialog = screen.getByRole('dialog').querySelector('[data-paste-element="FOO_DIALOG"]'); const dialogContents = screen.getByTestId('dialog-contents'); const dialogHeader = screen.getByTestId('dialog-header'); diff --git a/packages/paste-core/components/minimizable-dialog/__tests__/index.spec.tsx b/packages/paste-core/components/minimizable-dialog/__tests__/index.spec.tsx index c1f16354e7..3ffde671eb 100644 --- a/packages/paste-core/components/minimizable-dialog/__tests__/index.spec.tsx +++ b/packages/paste-core/components/minimizable-dialog/__tests__/index.spec.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import {render, screen, fireEvent, waitFor} from '@testing-library/react'; +import { render, screen, fireEvent, waitFor } from '@testing-library/react'; import { MinimizableDialog, @@ -8,7 +8,7 @@ import { MinimizableDialogContainer, MinimizableDialogContent, } from '../src'; -import {StateHookExample} from '../stories/index.stories'; +import { StateHookExample } from '../stories/index.stories'; describe('MinimizableDialog', () => { describe('Render', () => { @@ -20,11 +20,11 @@ describe('MinimizableDialog', () => { My custom dialog This is a dialog. - + , ); - const dialogButton = screen.getByRole('button', {name: 'Button'}); - const dialog = screen.getByRole('dialog', {hidden: true}); + const dialogButton = screen.getByRole('button', { name: 'Button' }); + const dialog = screen.getByRole('dialog', { hidden: true }); expect(dialogButton.getAttribute('aria-haspopup')).toEqual('dialog'); expect(dialogButton.getAttribute('aria-controls')).toEqual(dialog.id); @@ -40,11 +40,11 @@ describe('MinimizableDialog', () => { it('should render a dialog and toggle visible and minimized with external buttons', async () => { render(); - const showButton = screen.getByRole('button', {name: 'Open dialog'}); - const closeButton = screen.getByRole('button', {name: 'Close dialog'}); - const minimizeButton = screen.getByRole('button', {name: 'Minimize dialog'}); - const expandButton = screen.getByRole('button', {name: 'Expand dialog'}); - const dialog = screen.getByRole('dialog', {hidden: true}); + const showButton = screen.getByRole('button', { name: 'Open dialog' }); + const closeButton = screen.getByRole('button', { name: 'Close dialog' }); + const minimizeButton = screen.getByRole('button', { name: 'Minimize dialog' }); + const expandButton = screen.getByRole('button', { name: 'Expand dialog' }); + const dialog = screen.getByRole('dialog', { hidden: true }); const dialogContents = screen.getByTestId('dialog-contents'); const dialogHeader = screen.getByTestId('dialog-header'); @@ -82,13 +82,13 @@ describe('MinimizableDialog', () => { My custom dialog This is a dialog. - + , ); - const dismissButton = screen.getByRole('button', {name: 'close', hidden: true}); + const dismissButton = screen.getByRole('button', { name: 'close', hidden: true }); expect(dismissButton).toBeDefined(); - const minimizeButton = screen.getByRole('button', {name: 'minimize', hidden: true}); + const minimizeButton = screen.getByRole('button', { name: 'minimize', hidden: true }); expect(minimizeButton).toBeDefined(); }); }); diff --git a/packages/paste-core/components/minimizable-dialog/build.js b/packages/paste-core/components/minimizable-dialog/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/minimizable-dialog/build.js +++ b/packages/paste-core/components/minimizable-dialog/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/minimizable-dialog/src/MinimizableDialog.tsx b/packages/paste-core/components/minimizable-dialog/src/MinimizableDialog.tsx index 74458cfc0e..b236ef4fa2 100644 --- a/packages/paste-core/components/minimizable-dialog/src/MinimizableDialog.tsx +++ b/packages/paste-core/components/minimizable-dialog/src/MinimizableDialog.tsx @@ -1,20 +1,20 @@ import * as React from 'react'; -import type {BoxProps} from '@twilio-paste/box'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import {StyledBase} from '@twilio-paste/theme'; -import {NonModalDialogPrimitive} from '@twilio-paste/non-modal-dialog-primitive'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import type { BoxProps } from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import { StyledBase } from '@twilio-paste/theme'; +import { NonModalDialogPrimitive } from '@twilio-paste/non-modal-dialog-primitive'; +import type { HTMLPasteProps } from '@twilio-paste/types'; -import {MinimizableDialogContext} from './MinimizableDialogContext'; -import type {MinimizableDialogContextProps} from './MinimizableDialogContext'; -import {StyledMinimizableDialog} from './StyledMinimizableDialog'; +import { MinimizableDialogContext } from './MinimizableDialogContext'; +import type { MinimizableDialogContextProps } from './MinimizableDialogContext'; +import { StyledMinimizableDialog } from './StyledMinimizableDialog'; interface StyledMinimizableDialogProps extends BoxProps, MinimizableDialogContextProps { minimized?: boolean; } const StyledMinimizableDialogContainer = React.forwardRef( - ({minimized, style, ...props}, ref) => ( + ({ minimized, style, ...props }, ref) => ( - ) + ), ); StyledMinimizableDialogContainer.displayName = 'StyledMinimizableDialog'; @@ -38,7 +38,7 @@ export interface MinimizableDialogProps extends HTMLPasteProps<'div'> { } export const MinimizableDialog = React.forwardRef( - ({children, element = 'MINIMIZABLE_DIALOG', ...props}, ref) => { + ({ children, element = 'MINIMIZABLE_DIALOG', ...props }, ref) => { const dialog = React.useContext(MinimizableDialogContext); return ( @@ -56,7 +56,7 @@ export const MinimizableDialog = React.forwardRef ); - } + }, ); MinimizableDialog.displayName = 'MinimizableDialog'; diff --git a/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogButton.tsx b/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogButton.tsx index e374922101..4347926efb 100644 --- a/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogButton.tsx +++ b/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogButton.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {Button} from '@twilio-paste/button'; -import {NonModalDialogDisclosurePrimitive} from '@twilio-paste/non-modal-dialog-primitive'; -import type {ButtonProps} from '@twilio-paste/button'; +import { Button } from '@twilio-paste/button'; +import { NonModalDialogDisclosurePrimitive } from '@twilio-paste/non-modal-dialog-primitive'; +import type { ButtonProps } from '@twilio-paste/button'; -import {MinimizableDialogContext} from './MinimizableDialogContext'; +import { MinimizableDialogContext } from './MinimizableDialogContext'; export type MinimizableDialogButtonProps = Omit & { id?: string; @@ -11,7 +11,7 @@ export type MinimizableDialogButtonProps = Omit & { }; const MinimizableDialogButton = React.forwardRef( - ({children, element = 'MINIMIZABLE_DIALOG_BUTTON', ...props}, ref) => { + ({ children, element = 'MINIMIZABLE_DIALOG_BUTTON', ...props }, ref) => { const dialog = React.useContext(MinimizableDialogContext); return ( @@ -19,8 +19,8 @@ const MinimizableDialogButton = React.forwardRef ); - } + }, ); MinimizableDialogButton.displayName = 'MinimizableDialogButton'; -export {MinimizableDialogButton}; +export { MinimizableDialogButton }; diff --git a/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogContainer.tsx b/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogContainer.tsx index 9ec437b05c..2dadffbacd 100644 --- a/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogContainer.tsx +++ b/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogContainer.tsx @@ -3,9 +3,9 @@ import type { NonModalDialogPrimitiveStateReturn, NonModalDialogPrimitivePopoverInitialState, } from '@twilio-paste/non-modal-dialog-primitive'; -import {useNonModalDialogPrimitiveState} from '@twilio-paste/non-modal-dialog-primitive'; +import { useNonModalDialogPrimitiveState } from '@twilio-paste/non-modal-dialog-primitive'; -import {MinimizableDialogContext} from './MinimizableDialogContext'; +import { MinimizableDialogContext } from './MinimizableDialogContext'; export interface MinimizableDialogStateReturn extends NonModalDialogPrimitiveStateReturn { [key: string]: any; @@ -24,9 +24,9 @@ export const useMinimizableDialogState = ({ const expand = (): void => setMinimized(false); const toggleMinimized = (): void => setMinimized((prev) => !prev); - const dialog = useNonModalDialogPrimitiveState({...initialState}); + const dialog = useNonModalDialogPrimitiveState({ ...initialState }); - return {...dialog, minimized, minimize, expand, toggleMinimized}; + return { ...dialog, minimized, minimize, expand, toggleMinimized }; }; export interface MinimizableDialogContainerProps extends NonModalDialogPrimitivePopoverInitialState { @@ -52,11 +52,11 @@ const BaseMinimizableDialogContainer: React.FC{children}; + return {children}; }; BaseMinimizableDialogContainer.displayName = 'BaseMinimizableDialogContainer'; const MinimizableDialogContainer = React.memo(BaseMinimizableDialogContainer); MinimizableDialogContainer.displayName = 'MinimizableDialogContainer'; -export {MinimizableDialogContainer}; +export { MinimizableDialogContainer }; diff --git a/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogContent.tsx b/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogContent.tsx index 309b8fdc7e..34680e343a 100644 --- a/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogContent.tsx +++ b/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogContent.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import type { HTMLPasteProps } from '@twilio-paste/types'; -import {MinimizableDialogContext} from './MinimizableDialogContext'; +import { MinimizableDialogContext } from './MinimizableDialogContext'; export interface MinimizableDialogContentProps extends HTMLPasteProps<'div'> { children?: React.ReactNode; @@ -11,8 +11,8 @@ export interface MinimizableDialogContentProps extends HTMLPasteProps<'div'> { } const MinimizableDialogContent = React.forwardRef( - ({children, element = 'MINIMIZABLE_DIALOG_CONTENT', ...props}, ref) => { - const {minimized} = React.useContext(MinimizableDialogContext); + ({ children, element = 'MINIMIZABLE_DIALOG_CONTENT', ...props }, ref) => { + const { minimized } = React.useContext(MinimizableDialogContext); return ( ); - } + }, ); MinimizableDialogContent.displayName = 'MinimizableDialogContent'; -export {MinimizableDialogContent}; +export { MinimizableDialogContent }; diff --git a/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogContext.tsx b/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogContext.tsx index 0dc9fe1fca..4a50903c97 100644 --- a/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogContext.tsx +++ b/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogContext.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import type {NonModalDialogPrimitiveState} from '@twilio-paste/non-modal-dialog-primitive'; +import type { NonModalDialogPrimitiveState } from '@twilio-paste/non-modal-dialog-primitive'; export type MinimizableDialogContextProps = Partial & { minimized?: boolean; @@ -10,4 +10,4 @@ export type MinimizableDialogContextProps = Partial({}); -export {MinimizableDialogContext}; +export { MinimizableDialogContext }; diff --git a/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogHeader.tsx b/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogHeader.tsx index 35c8b6086c..b5981ac51f 100644 --- a/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogHeader.tsx +++ b/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogHeader.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import {Button} from '@twilio-paste/button'; -import {ChevronUpIcon} from '@twilio-paste/icons/esm/ChevronUpIcon'; -import {CloseIcon} from '@twilio-paste/icons/esm/CloseIcon'; -import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only'; -import type {BoxProps} from '@twilio-paste/box'; -import {MinusIcon} from '@twilio-paste/icons/esm/MinusIcon'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import { Button } from '@twilio-paste/button'; +import { ChevronUpIcon } from '@twilio-paste/icons/esm/ChevronUpIcon'; +import { CloseIcon } from '@twilio-paste/icons/esm/CloseIcon'; +import { ScreenReaderOnly } from '@twilio-paste/screen-reader-only'; +import type { BoxProps } from '@twilio-paste/box'; +import { MinusIcon } from '@twilio-paste/icons/esm/MinusIcon'; +import type { HTMLPasteProps } from '@twilio-paste/types'; -import {MinimizableDialogContext} from './MinimizableDialogContext'; +import { MinimizableDialogContext } from './MinimizableDialogContext'; export interface MinimizableDialogHeaderProps extends HTMLPasteProps<'div'> { children?: React.ReactNode; @@ -26,11 +26,11 @@ const MinimizableDialogHeader = React.forwardRef { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore Property 'hide' does not exist on type 'Partial', but reakit docs suggest using it (https://reakit.io/docs/popover/#initial-focus) - const {hide, minimized, minimize, expand} = React.useContext(MinimizableDialogContext); + const { hide, minimized, minimize, expand } = React.useContext(MinimizableDialogContext); return ( ); - } + }, ); MinimizableDialogHeader.displayName = 'MinimizableDialogHeader'; -export {MinimizableDialogHeader}; +export { MinimizableDialogHeader }; diff --git a/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx b/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx index 3cadf521f6..f72b36e460 100644 --- a/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx +++ b/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; +import { Box } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; export const StyledMinimizableDialog: React.FC>> = ({ element, diff --git a/packages/paste-core/components/minimizable-dialog/stories/customization.stories.tsx b/packages/paste-core/components/minimizable-dialog/stories/customization.stories.tsx index 3374f2289c..a0b7766422 100644 --- a/packages/paste-core/components/minimizable-dialog/stories/customization.stories.tsx +++ b/packages/paste-core/components/minimizable-dialog/stories/customization.stories.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {Paragraph} from '@twilio-paste/paragraph'; -import {useTheme} from '@twilio-paste/theme'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import type { StoryFn } from '@storybook/react'; +import { Paragraph } from '@twilio-paste/paragraph'; +import { useTheme } from '@twilio-paste/theme'; +import { CustomizationProvider } from '@twilio-paste/customization'; import { MinimizableDialog, @@ -24,7 +24,7 @@ export default { }, }; -export const CustomizedDialog: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const CustomizedDialog: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( diff --git a/packages/paste-core/components/minimizable-dialog/stories/index.stories.tsx b/packages/paste-core/components/minimizable-dialog/stories/index.stories.tsx index 524f2d2c86..9425e9dd4e 100644 --- a/packages/paste-core/components/minimizable-dialog/stories/index.stories.tsx +++ b/packages/paste-core/components/minimizable-dialog/stories/index.stories.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {Box} from '@twilio-paste/box'; -import {Button} from '@twilio-paste/button'; -import {ChatIcon} from '@twilio-paste/icons/esm/ChatIcon'; -import {Heading} from '@twilio-paste/heading'; -import {Input} from '@twilio-paste/input'; -import {Label} from '@twilio-paste/label'; -import {Paragraph} from '@twilio-paste/paragraph'; -import {TextArea} from '@twilio-paste/textarea'; -import {useUID} from '@twilio-paste/uid-library'; +import type { StoryFn } from '@storybook/react'; +import { Box } from '@twilio-paste/box'; +import { Button } from '@twilio-paste/button'; +import { ChatIcon } from '@twilio-paste/icons/esm/ChatIcon'; +import { Heading } from '@twilio-paste/heading'; +import { Input } from '@twilio-paste/input'; +import { Label } from '@twilio-paste/label'; +import { Paragraph } from '@twilio-paste/paragraph'; +import { TextArea } from '@twilio-paste/textarea'; +import { useUID } from '@twilio-paste/uid-library'; import { MinimizableDialog, @@ -18,8 +18,8 @@ import { MinimizableDialogContent, useMinimizableDialogState, } from '../src'; -import {MinimizableDialogContext} from '../src/MinimizableDialogContext'; -import {StyledMinimizableDialog} from '../src/StyledMinimizableDialog'; +import { MinimizableDialogContext } from '../src/MinimizableDialogContext'; +import { StyledMinimizableDialog } from '../src/StyledMinimizableDialog'; // eslint-disable-next-line import/no-default-export export default { @@ -27,15 +27,15 @@ export default { component: MinimizableDialog, }; -const DialogExample: React.FC> = ({minimized = false}) => { +const DialogExample: React.FC> = ({ minimized = false }) => { const nameID = useUID(); const emailID = useUID(); const questionID = useUID(); - const dialog = useMinimizableDialogState({minimized, visible: true}); + const dialog = useMinimizableDialogState({ minimized, visible: true }); return ( - + Live chat @@ -80,7 +80,7 @@ export const FloatingButton: StoryFn = () => { const emailID = useUID(); const questionID = useUID(); - const dialog = useMinimizableDialogState({visible: true}); + const dialog = useMinimizableDialogState({ visible: true }); return ( @@ -176,5 +176,5 @@ export const StateHookExample: StoryFn = () => { }; StateHookExample.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, }; diff --git a/packages/paste-core/components/modal/__tests__/customization.spec.tsx b/packages/paste-core/components/modal/__tests__/customization.spec.tsx index 3327a03cf1..dde838bcc5 100644 --- a/packages/paste-core/components/modal/__tests__/customization.spec.tsx +++ b/packages/paste-core/components/modal/__tests__/customization.spec.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render, screen } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {BaseModal, initStyles} from '../stories/customization.stories'; +import { BaseModal, initStyles } from '../stories/customization.stories'; jest.mock('@twilio-paste/modal-dialog-primitive', () => { // Mocking the portal as a div so it renders within the body of the rendered test fragment, rather than using Portal behavior. const actual = jest.requireActual('@twilio-paste/modal-dialog-primitive'); - const {forwardRef: mockForwardRef} = jest.requireActual('react'); + const { forwardRef: mockForwardRef } = jest.requireActual('react'); const MockModalDialogPrimitiveOverlay = mockForwardRef( ( { @@ -15,8 +15,8 @@ jest.mock('@twilio-paste/modal-dialog-primitive', () => { 'data-paste-element': dataPasteElement, style, className, - }: {children: any; 'data-paste-element': string; style: any; className: string}, - ref: any + }: { children: any; 'data-paste-element': string; style: any; className: string }, + ref: any, ) => (
    { > {children}
    - ) + ), ); return { ...actual, @@ -41,7 +41,7 @@ describe('Modal Customization', () => { render(); expect(screen.getByTestId('mock-reach-dialog-overlay').getAttribute('data-paste-element')).toEqual( - 'MODAL_OVERLAY' + 'MODAL_OVERLAY', ); expect(screen.getByTestId('modal-test-id').getAttribute('data-paste-element')).toEqual('MODAL'); expect(screen.getByTestId('modal-header-test-id').getAttribute('data-paste-element')).toEqual('MODAL_HEADER'); @@ -64,17 +64,17 @@ describe('Modal Customization', () => { render(); expect(screen.getByTestId('mock-reach-dialog-overlay').getAttribute('data-paste-element')).toEqual( - 'CUSTOM_TEST_MODAL_OVERLAY' + 'CUSTOM_TEST_MODAL_OVERLAY', ); expect(screen.getByTestId('modal-test-id').getAttribute('data-paste-element')).toEqual('CUSTOM_TEST_MODAL'); expect(screen.getByTestId('modal-header-test-id').getAttribute('data-paste-element')).toEqual( - 'CUSTOM_TEST_MODAL_HEADER' + 'CUSTOM_TEST_MODAL_HEADER', ); expect(screen.getByTestId('modal-heading-test-id').getAttribute('data-paste-element')).toEqual( - 'CUSTOM_TEST_MODAL_HEADING' + 'CUSTOM_TEST_MODAL_HEADING', ); expect(screen.getByTestId('modal-body-test-id').getAttribute('data-paste-element')).toEqual( - 'CUSTOM_TEST_MODAL_BODY' + 'CUSTOM_TEST_MODAL_BODY', ); const modalFooter = screen.getByTestId('modal-footer-test-id'); @@ -85,10 +85,10 @@ describe('Modal Customization', () => { expect(modalFooter.getAttribute('data-paste-element')).toEqual('CUSTOM_TEST_MODAL_FOOTER'); expect(modalFooterActions.getAttribute('data-paste-element')).toEqual('CUSTOM_TEST_MODAL_FOOTER_ACTIONS'); expect(modalFooterActionItemOne.getAttribute('data-paste-element')).toEqual( - 'CUSTOM_TEST_MODAL_FOOTER_ACTIONS_ITEM' + 'CUSTOM_TEST_MODAL_FOOTER_ACTIONS_ITEM', ); expect(modalFooterActionItemTwo.getAttribute('data-paste-element')).toEqual( - 'CUSTOM_TEST_MODAL_FOOTER_ACTIONS_ITEM' + 'CUSTOM_TEST_MODAL_FOOTER_ACTIONS_ITEM', ); }); }); @@ -96,7 +96,7 @@ describe('Modal Customization', () => { describe('Custom styles', () => { it('Should apply correct style rules to normal size variant', () => { render(, { - wrapper: ({children}) => ( + wrapper: ({ children }) => ( {children} @@ -129,7 +129,7 @@ describe('Modal Customization', () => { expect(modalFooterActions).toHaveStyleRule('justify-content', 'flex-start'); - expect(modalFooterActionItemOne).toHaveStyleRule('padding-left', '0', {target: ':first-of-type'}); + expect(modalFooterActionItemOne).toHaveStyleRule('padding-left', '0', { target: ':first-of-type' }); expect(modalFooterActionItemOne).toHaveStyleRule('padding-right', '0.75rem'); expect(modalFooterActionItemTwo).toHaveStyleRule('padding-left', '0.75rem'); @@ -138,7 +138,7 @@ describe('Modal Customization', () => { it('Should apply correct style rules to wide size variant', () => { render(, { - wrapper: ({children}) => ( + wrapper: ({ children }) => ( {children} diff --git a/packages/paste-core/components/modal/__tests__/index.spec.tsx b/packages/paste-core/components/modal/__tests__/index.spec.tsx index 94c62e76a3..695464f1f5 100644 --- a/packages/paste-core/components/modal/__tests__/index.spec.tsx +++ b/packages/paste-core/components/modal/__tests__/index.spec.tsx @@ -1,19 +1,19 @@ import * as React from 'react'; -import {useUID} from '@twilio-paste/uid-library'; -import {render, fireEvent, screen} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {Button} from '@twilio-paste/button'; -import {Box} from '@twilio-paste/box'; -import {Label} from '@twilio-paste/label'; -import {Input} from '@twilio-paste/input'; -import {Heading} from '@twilio-paste/heading'; -import {Paragraph} from '@twilio-paste/paragraph'; +import { useUID } from '@twilio-paste/uid-library'; +import { render, fireEvent, screen } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { Button } from '@twilio-paste/button'; +import { Box } from '@twilio-paste/box'; +import { Label } from '@twilio-paste/label'; +import { Input } from '@twilio-paste/input'; +import { Heading } from '@twilio-paste/heading'; +import { Paragraph } from '@twilio-paste/paragraph'; -import {Modal, ModalBody, ModalFooter, ModalFooterActions, ModalHeader, ModalHeading} from '../src'; +import { Modal, ModalBody, ModalFooter, ModalFooterActions, ModalHeader, ModalHeading } from '../src'; const handleCloseMock: jest.Mock = jest.fn(); -const MockModal: React.FC> = ({children}) => { +const MockModal: React.FC> = ({ children }) => { const modalHeadingID = `modal-${useUID()}`; return ( @@ -113,26 +113,26 @@ const I18nMockModal = (): JSX.Element => { describe('Modal', () => { it('should have the correct accessibility attributes on the container', () => { - const {getByTestId} = render(); + const { getByTestId } = render(); expect(getByTestId('modal').getAttribute('role')).toEqual('dialog'); expect(getByTestId('modal').getAttribute('aria-modal')).toEqual('true'); }); it('should be labelled by the correct heading', () => { - const {getByTestId} = render(); + const { getByTestId } = render(); expect(getByTestId('modal').getAttribute('aria-labelledby')).toEqual( - getByTestId('modal-heading').getAttribute('id') + getByTestId('modal-heading').getAttribute('id'), ); }); it('should be be able to take arbitrary html attributes on the container', () => { - const {getByTestId} = render(); + const { getByTestId } = render(); expect(getByTestId('modal').getAttribute('aria-busy')).toEqual('true'); expect(getByTestId('modal').getAttribute('id')).toEqual('a-new-id'); }); it('should render with focusable elements in the modal content', () => { - const {getByTestId} = render( + const { getByTestId } = render( @@ -145,23 +145,23 @@ describe('Modal', () => { - + , ); expect(getByTestId('modal')).toBeDefined(); }); it('should focus on the first focusable element in the modal, the close button', () => { - const {getByTestId} = render(); + const { getByTestId } = render(); expect(document.activeElement).toEqual(getByTestId('modal-header').querySelector('button')); }); it('should focus on the element provided as the initialFocus element in the modal', () => { - const {getByTestId} = render(); + const { getByTestId } = render(); expect(document.activeElement).toEqual(getByTestId('modal-body').querySelector('input')); }); it('should call the onDismiss function when the close button is clicked', () => { - const {getByTestId} = render(); + const { getByTestId } = render(); fireEvent.click(getByTestId('modal-header').querySelector('button') as HTMLButtonElement); expect(handleCloseMock).toHaveBeenCalled(); }); @@ -171,13 +171,13 @@ describe('i18n', () => { describe('ModalHeading', () => { it('should have default dismiss button text', () => { render(); - const dismissButton = screen.getByRole('button', {name: 'Close modal'}); + const dismissButton = screen.getByRole('button', { name: 'Close modal' }); expect(dismissButton).toBeDefined(); }); it('should use i18nDismissLabel for dismiss button text', () => { render(); - const dismissButton = screen.getByRole('button', {name: 'foo bar'}); + const dismissButton = screen.getByRole('button', { name: 'foo bar' }); expect(dismissButton).toBeDefined(); }); }); diff --git a/packages/paste-core/components/modal/build.js b/packages/paste-core/components/modal/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/modal/build.js +++ b/packages/paste-core/components/modal/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/modal/src/Modal.tsx b/packages/paste-core/components/modal/src/Modal.tsx index e8cad4a237..77a0d11af4 100644 --- a/packages/paste-core/components/modal/src/Modal.tsx +++ b/packages/paste-core/components/modal/src/Modal.tsx @@ -1,19 +1,19 @@ import * as React from 'react'; -import {css, styled} from '@twilio-paste/styling-library'; -import {useTransition, animated} from '@twilio-paste/animation-library'; -import {safelySpreadBoxProps, Box, getCustomElementStyles} from '@twilio-paste/box'; -import type {BoxElementProps} from '@twilio-paste/box'; -import {pasteBaseStyles} from '@twilio-paste/theme'; -import {ModalDialogPrimitiveOverlay, ModalDialogPrimitiveContent} from '@twilio-paste/modal-dialog-primitive'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { css, styled } from '@twilio-paste/styling-library'; +import { useTransition, animated } from '@twilio-paste/animation-library'; +import { safelySpreadBoxProps, Box, getCustomElementStyles } from '@twilio-paste/box'; +import type { BoxElementProps } from '@twilio-paste/box'; +import { pasteBaseStyles } from '@twilio-paste/theme'; +import { ModalDialogPrimitiveOverlay, ModalDialogPrimitiveContent } from '@twilio-paste/modal-dialog-primitive'; +import type { HTMLPasteProps } from '@twilio-paste/types'; -import {ModalContext} from './ModalContext'; +import { ModalContext } from './ModalContext'; type Sizes = 'default' | 'wide'; export const ModalDialogOverlay = animated( // @ts-expect-error Just like in box I can't work out how to stop the styled div color prop from emotion clashing with our color style prop in BoxProps - styled(ModalDialogPrimitiveOverlay)<{variant?: Sizes}>( + styled(ModalDialogPrimitiveOverlay)<{ variant?: Sizes }>( css({ position: 'fixed', top: 0, @@ -36,8 +36,8 @@ export const ModalDialogOverlay = animated( * of paste components in the modal are styled correctly. */ pasteBaseStyles, - getCustomElementStyles - ) + getCustomElementStyles, + ), ); export interface ModalDialogContentProps { @@ -47,7 +47,7 @@ export interface ModalDialogContentProps { } export const ModalDialogContent = animated( - styled(ModalDialogPrimitiveContent)(({size}) => + styled(ModalDialogPrimitiveContent)(({ size }) => css({ width: '100%', maxWidth: size === 'wide' ? 'size80' : 'size60', @@ -61,8 +61,8 @@ export const ModalDialogContent = animated( boxShadow: 'shadow', display: 'flex', flexDirection: 'column', - }) - ) + }), + ), ); export interface ModalProps extends HTMLPasteProps<'div'> { @@ -78,9 +78,9 @@ export interface ModalProps extends HTMLPasteProps<'div'> { // eslint-disable-next-line @typescript-eslint/no-explicit-any const getAnimationStates = (): any => ({ - from: {opacity: 0, transform: `scale(0.675)`}, - enter: {opacity: 1, transform: `scale(1)`}, - leave: {opacity: 0, transform: `scale(0.675)`}, + from: { opacity: 0, transform: `scale(0.675)` }, + enter: { opacity: 1, transform: `scale(1)` }, + leave: { opacity: 0, transform: `scale(0.675)` }, // https://www.react-spring.dev/docs/advanced/config config: { mass: 0.5, @@ -102,12 +102,12 @@ const Modal = React.forwardRef( size, ...props }, - ref + ref, ) => { const transitions = useTransition(isOpen, getAnimationStates()); return ( - + {transitions( (styles, item) => item && ( @@ -115,7 +115,7 @@ const Modal = React.forwardRef( onDismiss={onDismiss} allowPinchZoom={allowPinchZoom} initialFocusRef={initialFocusRef} - style={{opacity: styles.opacity}} + style={{ opacity: styles.opacity }} data-paste-element={`${element}_OVERLAY`} variant={size} > @@ -133,12 +133,12 @@ const Modal = React.forwardRef( {children}     - ) + ), )} ); - } + }, ); Modal.displayName = 'Modal'; -export {Modal}; +export { Modal }; diff --git a/packages/paste-core/components/modal/src/ModalBody.tsx b/packages/paste-core/components/modal/src/ModalBody.tsx index 966152b6af..3eac287356 100644 --- a/packages/paste-core/components/modal/src/ModalBody.tsx +++ b/packages/paste-core/components/modal/src/ModalBody.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxElementProps} from '@twilio-paste/box'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxElementProps } from '@twilio-paste/box'; +import type { HTMLPasteProps } from '@twilio-paste/types'; export interface ModalBodyProps extends HTMLPasteProps<'div'> { children: NonNullable; @@ -9,7 +9,7 @@ export interface ModalBodyProps extends HTMLPasteProps<'div'> { } const ModalBody = React.forwardRef( - ({children, element = 'MODAL_BODY', ...props}, ref) => { + ({ children, element = 'MODAL_BODY', ...props }, ref) => { return ( ( {children} ); - } + }, ); ModalBody.displayName = 'ModalBody'; -export {ModalBody}; +export { ModalBody }; diff --git a/packages/paste-core/components/modal/src/ModalFooter.tsx b/packages/paste-core/components/modal/src/ModalFooter.tsx index 3bbfbc0607..9eef97117d 100644 --- a/packages/paste-core/components/modal/src/ModalFooter.tsx +++ b/packages/paste-core/components/modal/src/ModalFooter.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxElementProps} from '@twilio-paste/box'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxElementProps } from '@twilio-paste/box'; +import type { HTMLPasteProps } from '@twilio-paste/types'; export interface ModalFooterProps extends HTMLPasteProps<'div'> { children: NonNullable; element?: BoxElementProps['element']; } const ModalFooter = React.forwardRef( - ({children, element = 'MODAL_FOOTER', ...props}, ref) => { + ({ children, element = 'MODAL_FOOTER', ...props }, ref) => { return ( ( {children} ); - } + }, ); ModalFooter.displayName = 'ModalFooter'; -export {ModalFooter}; +export { ModalFooter }; diff --git a/packages/paste-core/components/modal/src/ModalFooterActions.tsx b/packages/paste-core/components/modal/src/ModalFooterActions.tsx index 7192b89fdb..90ac194959 100644 --- a/packages/paste-core/components/modal/src/ModalFooterActions.tsx +++ b/packages/paste-core/components/modal/src/ModalFooterActions.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxElementProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxElementProps } from '@twilio-paste/box'; type Justify = 'start' | 'end'; export interface ModalFooterActionsProps { @@ -9,7 +9,7 @@ export interface ModalFooterActionsProps { justify?: Justify; } const ModalFooterActions = React.forwardRef( - ({children, element = 'MODAL_FOOTER_ACTIONS', justify, ...props}, ref) => { + ({ children, element = 'MODAL_FOOTER_ACTIONS', justify, ...props }, ref) => { const count = React.Children.count(children); return ( ); - } + }, ); ModalFooterActions.displayName = 'ModalFooterActions'; -export {ModalFooterActions}; +export { ModalFooterActions }; diff --git a/packages/paste-core/components/modal/src/ModalHeader.tsx b/packages/paste-core/components/modal/src/ModalHeader.tsx index c47c8c8cab..cdc4a01745 100644 --- a/packages/paste-core/components/modal/src/ModalHeader.tsx +++ b/packages/paste-core/components/modal/src/ModalHeader.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxElementProps} from '@twilio-paste/box'; -import {Button} from '@twilio-paste/button'; -import {Flex} from '@twilio-paste/flex'; -import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only'; -import {CloseIcon} from '@twilio-paste/icons/esm/CloseIcon'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxElementProps } from '@twilio-paste/box'; +import { Button } from '@twilio-paste/button'; +import { Flex } from '@twilio-paste/flex'; +import { ScreenReaderOnly } from '@twilio-paste/screen-reader-only'; +import { CloseIcon } from '@twilio-paste/icons/esm/CloseIcon'; +import type { HTMLPasteProps } from '@twilio-paste/types'; -import {useModalContext} from './ModalContext'; +import { useModalContext } from './ModalContext'; export interface ModalHeaderProps extends HTMLPasteProps<'head'> { children: NonNullable; @@ -16,8 +16,8 @@ export interface ModalHeaderProps extends HTMLPasteProps<'head'> { } const ModalHeader = React.forwardRef( - ({children, element = 'MODAL_HEADER', i18nDismissLabel = 'Close modal', ...props}, ref) => { - const {onDismiss} = useModalContext(); + ({ children, element = 'MODAL_HEADER', i18nDismissLabel = 'Close modal', ...props }, ref) => { + const { onDismiss } = useModalContext(); return ( @@ -31,8 +31,8 @@ const ModalHeader = React.forwardRef( ); - } + }, ); ModalHeader.displayName = 'ModalHeader'; -export {ModalHeader}; +export { ModalHeader }; diff --git a/packages/paste-core/components/modal/src/ModalHeading.tsx b/packages/paste-core/components/modal/src/ModalHeading.tsx index 4b52ef6344..b146ce9bcf 100644 --- a/packages/paste-core/components/modal/src/ModalHeading.tsx +++ b/packages/paste-core/components/modal/src/ModalHeading.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {Heading} from '@twilio-paste/heading'; -import type {HeadingProps} from '@twilio-paste/heading'; -import type {BoxElementProps} from '@twilio-paste/box'; +import { Heading } from '@twilio-paste/heading'; +import type { HeadingProps } from '@twilio-paste/heading'; +import type { BoxElementProps } from '@twilio-paste/box'; export interface ModalHeadingProps extends Omit { children: NonNullable; @@ -9,14 +9,14 @@ export interface ModalHeadingProps extends Omit( - ({children, as = 'h2', element = 'MODAL_HEADING', ...props}, ref) => { + ({ children, as = 'h2', element = 'MODAL_HEADING', ...props }, ref) => { return ( {children} ); - } + }, ); ModalHeading.displayName = 'ModalHeading'; -export {ModalHeading}; +export { ModalHeading }; diff --git a/packages/paste-core/components/modal/src/styles.tsx b/packages/paste-core/components/modal/src/styles.tsx index 84c3862948..2dbdd3001e 100644 --- a/packages/paste-core/components/modal/src/styles.tsx +++ b/packages/paste-core/components/modal/src/styles.tsx @@ -1,4 +1,4 @@ -import type {BoxStyleProps} from '@twilio-paste/box'; +import type { BoxStyleProps } from '@twilio-paste/box'; export const modalHeaderStyles = { borderBottomStyle: 'solid', diff --git a/packages/paste-core/components/modal/stories/customization.stories.tsx b/packages/paste-core/components/modal/stories/customization.stories.tsx index 4da6fba367..5a1585605f 100644 --- a/packages/paste-core/components/modal/stories/customization.stories.tsx +++ b/packages/paste-core/components/modal/stories/customization.stories.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {useUID} from '@twilio-paste/uid-library'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import type {PasteCustomCSS} from '@twilio-paste/customization'; -import {useTheme} from '@twilio-paste/theme'; -import {Button} from '@twilio-paste/button'; -import {Heading} from '@twilio-paste/heading'; -import {Paragraph} from '@twilio-paste/paragraph'; +import type { StoryFn } from '@storybook/react'; +import { useUID } from '@twilio-paste/uid-library'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import type { PasteCustomCSS } from '@twilio-paste/customization'; +import { useTheme } from '@twilio-paste/theme'; +import { Button } from '@twilio-paste/button'; +import { Heading } from '@twilio-paste/heading'; +import { Paragraph } from '@twilio-paste/paragraph'; -import type {ModalProps} from '../src'; -import {Modal, ModalBody, ModalFooter, ModalFooterActions, ModalHeader, ModalHeading} from '../src'; +import type { ModalProps } from '../src'; +import { Modal, ModalBody, ModalFooter, ModalFooterActions, ModalHeader, ModalHeading } from '../src'; export const initStyles = (prefix: string): Record => ({ [prefix]: { @@ -63,9 +63,9 @@ const getElementName = (elementName: string | undefined, suffix?: string): strin return elementName != null ? `${elementName}${end}` : undefined; }; -type BaseModalProps = Pick & {element?: string | undefined}; +type BaseModalProps = Pick & { element?: string | undefined }; const NOOP: VoidFunction = () => null; -export const BaseModal: React.FC> = ({size, element}) => { +export const BaseModal: React.FC> = ({ size, element }) => { const modalHeadingId = useUID(); return ( @@ -114,7 +114,7 @@ export const BaseModal: React.FC> = ({si export default { title: 'Components/Modal/Customization', component: Modal, - subcomponents: {ModalBody, ModalFooter, ModalFooterActions, ModalHeader, ModalHeading}, + subcomponents: { ModalBody, ModalFooter, ModalFooterActions, ModalHeader, ModalHeading }, excludeStories: ['initStyles', 'BaseModal'], parameters: { a11y: { @@ -124,7 +124,7 @@ export default { }, }; -export const First: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const First: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( @@ -135,10 +135,10 @@ export const First: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { First.storyName = 'Normal variant - Default element names'; First.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, }; -export const Second: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const Second: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( @@ -149,10 +149,10 @@ export const Second: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { Second.storyName = 'Normal variant - Custom element names'; Second.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, }; -export const Third: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const Third: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( @@ -163,10 +163,10 @@ export const Third: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { Third.storyName = 'Wide variant - Default element names'; Third.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, }; -export const Fourth: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const Fourth: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( @@ -177,5 +177,5 @@ export const Fourth: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { Fourth.storyName = 'Wide variant - Custom element names'; Fourth.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, }; diff --git a/packages/paste-core/components/modal/stories/index.stories.tsx b/packages/paste-core/components/modal/stories/index.stories.tsx index 2e75a6645d..2b8e83f761 100644 --- a/packages/paste-core/components/modal/stories/index.stories.tsx +++ b/packages/paste-core/components/modal/stories/index.stories.tsx @@ -1,19 +1,19 @@ import * as React from 'react'; -import {useUID} from '@twilio-paste/uid-library'; -import {Button} from '@twilio-paste/button'; -import {Heading} from '@twilio-paste/heading'; -import {Paragraph} from '@twilio-paste/paragraph'; -import {Flex} from '@twilio-paste/flex'; -import {Text} from '@twilio-paste/text'; -import {Box} from '@twilio-paste/box'; -import {Select, Option} from '@twilio-paste/select'; -import {Popover, PopoverContainer, PopoverButton} from '@twilio-paste/popover'; -import {Tooltip} from '@twilio-paste/tooltip'; -import {InformationIcon} from '@twilio-paste/icons/esm/InformationIcon'; -import {Label} from '@twilio-paste/label'; -import {Input} from '@twilio-paste/input'; +import { useUID } from '@twilio-paste/uid-library'; +import { Button } from '@twilio-paste/button'; +import { Heading } from '@twilio-paste/heading'; +import { Paragraph } from '@twilio-paste/paragraph'; +import { Flex } from '@twilio-paste/flex'; +import { Text } from '@twilio-paste/text'; +import { Box } from '@twilio-paste/box'; +import { Select, Option } from '@twilio-paste/select'; +import { Popover, PopoverContainer, PopoverButton } from '@twilio-paste/popover'; +import { Tooltip } from '@twilio-paste/tooltip'; +import { InformationIcon } from '@twilio-paste/icons/esm/InformationIcon'; +import { Label } from '@twilio-paste/label'; +import { Input } from '@twilio-paste/input'; -import type {ModalProps} from '../src'; +import type { ModalProps } from '../src'; import { Modal, ModalBody, @@ -27,7 +27,7 @@ import { } from '../src'; type ModalTriggerProps = Pick; -const ModalTrigger: React.FC> = ({size}) => { +const ModalTrigger: React.FC> = ({ size }) => { const [isOpen, setIsOpen] = React.useState(true); const handleOpen = (): void => setIsOpen(true); const handleClose = (): void => setIsOpen(false); @@ -67,7 +67,7 @@ const ModalTrigger: React.FC> = ({siz export default { title: 'Components/Modal', component: Modal, - subcomponents: {ModalBody, ModalFooter, ModalFooterActions, ModalHeader, ModalHeading}, + subcomponents: { ModalBody, ModalFooter, ModalFooterActions, ModalHeader, ModalHeading }, }; export const Default = (): React.ReactNode => { @@ -75,7 +75,7 @@ export const Default = (): React.ReactNode => { }; Default.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, a11y: { // no need to a11y check customization disable: true, @@ -87,7 +87,7 @@ export const Wide = (): React.ReactNode => { }; Wide.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, a11y: { // no need to a11y check customization disable: true, @@ -132,7 +132,7 @@ export const FooterActions = (): React.ReactNode => { FooterActions.storyName = 'Footer actions'; FooterActions.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, a11y: { // no need to a11y check customization disable: true, @@ -177,7 +177,7 @@ export const LeftAlignedFooterActions = (): React.ReactNode => { LeftAlignedFooterActions.storyName = 'Left aligned footer actions'; LeftAlignedFooterActions.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, a11y: { // no need to a11y check customization disable: true, @@ -225,7 +225,7 @@ export const DirectionalFooterActions = (): React.ReactNode => { DirectionalFooterActions.storyName = 'Directional footer actions'; DirectionalFooterActions.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, a11y: { // no need to a11y check customization disable: true, @@ -270,7 +270,7 @@ export const ExtremelyLongHeading = (): React.ReactNode => { ExtremelyLongHeading.storyName = 'Extremely long heading'; ExtremelyLongHeading.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, a11y: { // no need to a11y check customization disable: true, @@ -409,7 +409,7 @@ export const OverflowingBodyContent = (): React.ReactNode => { OverflowingBodyContent.storyName = 'Overflowing body content'; OverflowingBodyContent.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, a11y: { // no need to a11y check customization disable: true, @@ -460,7 +460,7 @@ export const HeaderContent = (): React.ReactNode => { HeaderContent.storyName = 'Header content'; HeaderContent.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, a11y: { // no need to a11y check customization disable: true, @@ -509,7 +509,7 @@ export const i18nProp = (): React.ReactNode => { i18nProp.storyName = 'i18n prop'; i18nProp.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, a11y: { // no need to a11y check customization disable: true, @@ -569,7 +569,7 @@ export const CustomInitialFocusElement = (): React.ReactNode => { CustomInitialFocusElement.storyName = 'Custom initial focus element'; CustomInitialFocusElement.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, a11y: { // no need to a11y check customization disable: true, @@ -615,7 +615,7 @@ export const TooltipInModal = (): React.ReactNode => { TooltipInModal.storyName = 'Tooltip in modal'; TooltipInModal.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, a11y: { // no need to a11y check customization disable: true, @@ -673,7 +673,7 @@ export const PopoverInModal = (): React.ReactNode => { PopoverInModal.storyName = 'Popover in modal'; PopoverInModal.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, a11y: { // no need to a11y check customization disable: true, @@ -697,7 +697,7 @@ export const ModalDialogVRT = (): React.ReactNode => { const modalHeadingID = useUID(); const onDismiss = NOOP; return ( - + @@ -727,7 +727,7 @@ export const WideModalDialogVRT = (): React.ReactNode => { const modalHeadingID = useUID(); const onDismiss = NOOP; return ( - + @@ -758,7 +758,7 @@ export const LeftAlignedFooterActionsVRT = (): React.ReactNode => { const modalHeadingID = useUID(); return ( - + @@ -789,7 +789,7 @@ export const DirectionalFooterActionsVRT = (): React.ReactNode => { const modalHeadingID = useUID(); return ( - + @@ -823,7 +823,7 @@ export const ExtremelyLongHeadingVRT = (): React.ReactNode => { const modalHeadingID = useUID(); return ( - + @@ -855,7 +855,7 @@ export const OverflowingBodyContentVRT = (): React.ReactNode => { return ( - + @@ -981,7 +981,7 @@ export const HeaderContentVRT = (): React.ReactNode => { const modalHeadingID = useUID(); return ( - + @@ -1017,7 +1017,7 @@ export const ModalDialogTooltipVRT = (): React.ReactNode => { const modalHeadingID = useUID(); const onDismiss = NOOP; return ( - + @@ -1048,7 +1048,7 @@ export const ModalDialogPopoverVRT = (): React.ReactNode => { const nameButtonRef: React.RefObject = React.createRef(); const onDismiss = NOOP; return ( - + diff --git a/packages/paste-core/components/pagination/__tests__/customization.spec.tsx b/packages/paste-core/components/pagination/__tests__/customization.spec.tsx index 885e84abf8..9a04300b5b 100644 --- a/packages/paste-core/components/pagination/__tests__/customization.spec.tsx +++ b/packages/paste-core/components/pagination/__tests__/customization.spec.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import {render} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import type {PasteCustomCSS} from '@twilio-paste/customization'; +import { render } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import type { PasteCustomCSS } from '@twilio-paste/customization'; -import {WrapperAndArrows, NumbersAndLabel} from '../stories/customization.stories'; +import { WrapperAndArrows, NumbersAndLabel } from '../stories/customization.stories'; -const paginationStyles = {fontSize: 'fontSize60', fontWeight: 'fontWeightBold'} as PasteCustomCSS; -const getCustomizedStyles = (prefix = 'PAGINATION'): {[key: string]: any} => ({ - [`${prefix}`]: {borderColor: 'colorBorder', borderStyle: 'solid', borderWidth: 'borderWidth10'}, +const paginationStyles = { fontSize: 'fontSize60', fontWeight: 'fontWeightBold' } as PasteCustomCSS; +const getCustomizedStyles = (prefix = 'PAGINATION'): { [key: string]: any } => ({ + [`${prefix}`]: { borderColor: 'colorBorder', borderStyle: 'solid', borderWidth: 'borderWidth10' }, [`${prefix}_ITEMS`]: { borderColor: 'colorBorder', borderStyle: 'solid', @@ -47,7 +47,7 @@ const getCustomizedStyles = (prefix = 'PAGINATION'): {[key: string]: any} => ({ describe('Customization for Pagination wrapper and arrows', () => { it('should set a element data attribute for the Pagination wrapper and arrows', () => { - const {getByTestId} = render(); + const { getByTestId } = render(); const pagination = getByTestId('pagination'); const paginationItems = getByTestId('pagination-items'); const paginationBackArrow = getByTestId('pagination-back-arrow'); @@ -56,7 +56,7 @@ describe('Customization for Pagination wrapper and arrows', () => { expect(paginationItems.getAttribute('data-paste-element')).toEqual('PAGINATION_ITEMS'); expect((paginationItems.firstChild as HTMLElement).getAttribute('data-paste-element')).toEqual( - 'PAGINATION_ITEMS_ITEM' + 'PAGINATION_ITEMS_ITEM', ); expect(paginationBackArrow.getAttribute('data-paste-element')).toEqual('PAGINATION_ARROW_BUTTON'); @@ -67,7 +67,7 @@ describe('Customization for Pagination wrapper and arrows', () => { }); it('should set a custom element data attribute for Pagination wrapper and arrows', () => { - const {getByTestId} = render(); + const { getByTestId } = render(); const pagination = getByTestId('pagination'); const paginationItems = getByTestId('pagination-items'); const paginationBackArrow = getByTestId('pagination-back-arrow'); @@ -85,10 +85,10 @@ describe('Customization for Pagination wrapper and arrows', () => { }); it('should add custom styles to Pagination wrapper and arrows', (): void => { - const {getByTestId} = render( + const { getByTestId } = render( - + , ); const pagination = getByTestId('pagination'); @@ -101,10 +101,10 @@ describe('Customization for Pagination wrapper and arrows', () => { }); it('should add custom styles to Pagination wrapper and arrows when a custom element data attribute is used', (): void => { - const {getByTestId} = render( + const { getByTestId } = render( - + , ); const pagination = getByTestId('pagination'); @@ -119,7 +119,7 @@ describe('Customization for Pagination wrapper and arrows', () => { describe('Customization for Pagination numbers and label', () => { it('should set a element data attribute for the Pagination numbers and label', () => { - const {getByTestId} = render(); + const { getByTestId } = render(); const paginationNumbers = getByTestId('pagination-numbers'); const paginationNumber = getByTestId('pagination-number'); const paginationEllipsis = getByTestId('pagination-ellipsis'); @@ -138,7 +138,7 @@ describe('Customization for Pagination numbers and label', () => { }); it('should set a custom element data attribute for the Pagination numbers and label', () => { - const {getByTestId} = render(); + const { getByTestId } = render(); const paginationNumbers = getByTestId('pagination-numbers'); const paginationNumber = getByTestId('pagination-number'); const paginationEllipsis = getByTestId('pagination-ellipsis'); @@ -157,10 +157,10 @@ describe('Customization for Pagination numbers and label', () => { }); it('should add custom styles to Pagination numbers and label', (): void => { - const {getByTestId} = render( + const { getByTestId } = render( - + , ); const paginationNumbers = getByTestId('pagination-numbers'); @@ -175,10 +175,10 @@ describe('Customization for Pagination numbers and label', () => { }); it('should add custom styles to Pagination numbers and label when a custom element data attribute is used', (): void => { - const {getByTestId} = render( + const { getByTestId } = render( - + , ); const paginationNumbers = getByTestId('pagination-numbers'); diff --git a/packages/paste-core/components/pagination/__tests__/index.spec.tsx b/packages/paste-core/components/pagination/__tests__/index.spec.tsx index 9d6b57950b..770fb206c2 100644 --- a/packages/paste-core/components/pagination/__tests__/index.spec.tsx +++ b/packages/paste-core/components/pagination/__tests__/index.spec.tsx @@ -1,84 +1,86 @@ import * as React from 'react'; -import {render, fireEvent} from '@testing-library/react'; +import { render, fireEvent } from '@testing-library/react'; -import {PaginationArrow, PaginationNumber} from '../src'; -import {ArrowsPageLabelExample, NumbersExample, NumbersPageLabelExample} from '../stories/index.stories'; +import { PaginationArrow, PaginationNumber } from '../src'; +import { ArrowsPageLabelExample, NumbersExample, NumbersPageLabelExample } from '../stories/index.stories'; describe('Pagination', () => { it('should render a list of pagination numbers with a page label', () => { - const {getByText} = render(); + const { getByText } = render(); expect(getByText('Page 5 of 10')).toBeDefined(); }); it('should render pagination arrow with correct previous aria-label', () => { - const {getByTitle} = render(); + const { getByTitle } = render(); expect(getByTitle('Go to previous page')).toBeDefined(); }); it('should render pagination arrow with correct next aria-label', () => { - const {getByTitle} = render(); + const { getByTitle } = render(); expect(getByTitle('Go to next page')).toBeDefined(); }); it('should render pagination arrow with a hidden visible label', () => { - const {getByText} = render(); + const { getByText } = render( + , + ); expect(getByText('Previous')).toBeDefined(); expect(getByText('Previous').getAttribute('aria-hidden')).toBeTruthy(); }); it('should render a hidden pagination arrow', () => { - const {getByRole} = render(); - expect(getByRole('button', {hidden: true}).getAttribute('aria-hidden')).toBeTruthy(); - expect(getByRole('button', {hidden: true})).toHaveStyleRule('visibility', 'hidden'); - expect(getByRole('button', {hidden: true})).toHaveStyleRule('opacity', '0'); + const { getByRole } = render(); + expect(getByRole('button', { hidden: true }).getAttribute('aria-hidden')).toBeTruthy(); + expect(getByRole('button', { hidden: true })).toHaveStyleRule('visibility', 'hidden'); + expect(getByRole('button', { hidden: true })).toHaveStyleRule('opacity', '0'); }); it('should render pagination arrow as a button', () => { - const {getByRole} = render(); + const { getByRole } = render(); expect(getByRole('button')).toBeDefined(); }); it('should render pagination arrow as an anchor', () => { - const {getByRole} = render(); + const { getByRole } = render(); expect(getByRole('link')).toBeDefined(); expect(getByRole('link').getAttribute('href')).toEqual('#'); }); it('should render arrow pagination with correct aria-label', () => { - const {getByRole} = render(); + const { getByRole } = render(); expect(getByRole('navigation').getAttribute('aria-label')).toBe('pagination navigation'); }); it('should render pagination number as a button', () => { - const {getByRole} = render(10); + const { getByRole } = render(10); expect(getByRole('button')).toBeDefined(); }); it('should render pagination number as an anchor', () => { - const {getByRole} = render( + const { getByRole } = render( 10 - + , ); expect(getByRole('link')).toBeDefined(); expect(getByRole('link').getAttribute('href')).toEqual('#'); }); it('should render pagination number with correct aria-label', () => { - const {getByRole} = render(10); + const { getByRole } = render(10); expect(getByRole('button').getAttribute('aria-label')).toBe('Go to page 10'); }); it('should render pagination number with a hidden visible child', () => { - const {getByText} = render(10); + const { getByText } = render(10); expect(getByText('10').getAttribute('aria-hidden')).toBeTruthy(); }); it('should render pagination number with correct aria-current', () => { - const {getByRole} = render( + const { getByRole } = render( 10 - + , ); expect(getByRole('button').getAttribute('aria-current')).toBeTruthy(); }); @@ -93,7 +95,7 @@ describe('Pagination', () => { const onFocusMock: jest.Mock = jest.fn(); const onBlurMock: jest.Mock = jest.fn(); - const {getByTestId} = render( + const { getByTestId } = render( { onBlur={onBlurMock} > Previous - + , ); fireEvent.click(getByTestId('arrow-button')); @@ -137,7 +139,7 @@ describe('Pagination', () => { const onFocusMock: jest.Mock = jest.fn(); const onBlurMock: jest.Mock = jest.fn(); - const {getByTestId} = render( + const { getByTestId } = render( { onBlur={onBlurMock} > 1 - + , ); fireEvent.click(getByTestId('number-button')); diff --git a/packages/paste-core/components/pagination/build.js b/packages/paste-core/components/pagination/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/pagination/build.js +++ b/packages/paste-core/components/pagination/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/pagination/src/Pagination.tsx b/packages/paste-core/components/pagination/src/Pagination.tsx index 1cf943b659..892311ff4a 100644 --- a/packages/paste-core/components/pagination/src/Pagination.tsx +++ b/packages/paste-core/components/pagination/src/Pagination.tsx @@ -1,18 +1,18 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; -import type {PaginationProps} from './types'; +import type { PaginationProps } from './types'; const Pagination = React.forwardRef( - ({children, element = 'PAGINATION', label, ...props}, ref) => { + ({ children, element = 'PAGINATION', label, ...props }, ref) => { return ( {children} ); - } + }, ); Pagination.displayName = 'Pagination'; -export {Pagination}; +export { Pagination }; diff --git a/packages/paste-core/components/pagination/src/PaginationArrow/PaginationArrowButton.tsx b/packages/paste-core/components/pagination/src/PaginationArrow/PaginationArrowButton.tsx index 1c956a2782..fd7b79b035 100644 --- a/packages/paste-core/components/pagination/src/PaginationArrow/PaginationArrowButton.tsx +++ b/packages/paste-core/components/pagination/src/PaginationArrow/PaginationArrowButton.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; -import type {PaginationArrowButtonProps} from '../types'; +import type { PaginationArrowButtonProps } from '../types'; const PaginationArrowButton = React.forwardRef( - ({children, element = 'PAGINATION_ARROW_BUTTON', disabled, visibleLabel, ...props}, ref) => { + ({ children, element = 'PAGINATION_ARROW_BUTTON', disabled, visibleLabel, ...props }, ref) => { return ( {children} ); - } + }, ); PaginationArrowButton.displayName = 'PaginationArrowButton'; -export {PaginationArrowButton}; +export { PaginationArrowButton }; diff --git a/packages/paste-core/components/pagination/src/PaginationArrow/PaginationArrowIconWrapper.tsx b/packages/paste-core/components/pagination/src/PaginationArrow/PaginationArrowIconWrapper.tsx index 742f707312..1bb05000d4 100644 --- a/packages/paste-core/components/pagination/src/PaginationArrow/PaginationArrowIconWrapper.tsx +++ b/packages/paste-core/components/pagination/src/PaginationArrow/PaginationArrowIconWrapper.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; +import { Box } from '@twilio-paste/box'; -import type {PaginationArrowIconWrapperProps} from '../types'; +import type { PaginationArrowIconWrapperProps } from '../types'; const PaginationArrowIconWrapper: React.FC> = ({ children, @@ -29,4 +29,4 @@ const PaginationArrowIconWrapper: React.FC( ( - {as = 'button', element = 'PAGINATION_ARROW', disabled, isFocused, isHovered, label, visibleLabel, ...props}, - ref + { as = 'button', element = 'PAGINATION_ARROW', disabled, isFocused, isHovered, label, visibleLabel, ...props }, + ref, ) => { return ( ); - } + }, ); PaginationBackArrow.displayName = 'PaginationBackArrow'; -export {PaginationBackArrow}; +export { PaginationBackArrow }; diff --git a/packages/paste-core/components/pagination/src/PaginationArrow/PaginationForwardArrow.tsx b/packages/paste-core/components/pagination/src/PaginationArrow/PaginationForwardArrow.tsx index 8edfc4727b..e0098b6ceb 100644 --- a/packages/paste-core/components/pagination/src/PaginationArrow/PaginationForwardArrow.tsx +++ b/packages/paste-core/components/pagination/src/PaginationArrow/PaginationForwardArrow.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; -import {Text} from '@twilio-paste/text'; -import {ArrowForwardIcon} from '@twilio-paste/icons/esm/ArrowForwardIcon'; +import { Text } from '@twilio-paste/text'; +import { ArrowForwardIcon } from '@twilio-paste/icons/esm/ArrowForwardIcon'; -import {PaginationArrowButton} from './PaginationArrowButton'; -import {PaginationArrowIconWrapper} from './PaginationArrowIconWrapper'; -import type {PaginationArrowProps} from '../types'; +import { PaginationArrowButton } from './PaginationArrowButton'; +import { PaginationArrowIconWrapper } from './PaginationArrowIconWrapper'; +import type { PaginationArrowProps } from '../types'; const PaginationForwardArrow = React.forwardRef( ( - {as = 'button', element = 'PAGINATION_ARROW', disabled, isFocused, isHovered, label, visibleLabel, ...props}, - ref + { as = 'button', element = 'PAGINATION_ARROW', disabled, isFocused, isHovered, label, visibleLabel, ...props }, + ref, ) => { return ( ); - } + }, ); PaginationForwardArrow.displayName = 'PaginationForwardArrow'; -export {PaginationForwardArrow}; +export { PaginationForwardArrow }; diff --git a/packages/paste-core/components/pagination/src/PaginationArrow/index.tsx b/packages/paste-core/components/pagination/src/PaginationArrow/index.tsx index 8862b09733..a0e694d1d6 100644 --- a/packages/paste-core/components/pagination/src/PaginationArrow/index.tsx +++ b/packages/paste-core/components/pagination/src/PaginationArrow/index.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {PaginationBackArrow} from './PaginationBackArrow'; -import {PaginationForwardArrow} from './PaginationForwardArrow'; -import type {PaginationArrowProps} from '../types'; -import {handleLinkValidation} from '../utils'; +import { PaginationBackArrow } from './PaginationBackArrow'; +import { PaginationForwardArrow } from './PaginationForwardArrow'; +import type { PaginationArrowProps } from '../types'; +import { handleLinkValidation } from '../utils'; const PaginationArrow = React.forwardRef( ( @@ -18,11 +18,11 @@ const PaginationArrow = React.forwardRef { const [hovered, setHovered] = React.useState(false); const [focused, setFocused] = React.useState(false); - handleLinkValidation({as, href}); + handleLinkValidation({ as, href }); return variant === 'back' ? ( ); - } + }, ); PaginationArrow.displayName = 'PaginationArrow'; -export {PaginationArrow}; +export { PaginationArrow }; diff --git a/packages/paste-core/components/pagination/src/PaginationEllipsis.tsx b/packages/paste-core/components/pagination/src/PaginationEllipsis.tsx index 53b67780bb..f4606ef513 100644 --- a/packages/paste-core/components/pagination/src/PaginationEllipsis.tsx +++ b/packages/paste-core/components/pagination/src/PaginationEllipsis.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {Text, safelySpreadTextProps} from '@twilio-paste/text'; +import { Text, safelySpreadTextProps } from '@twilio-paste/text'; -import type {PaginationEllipsisProps} from './types'; +import type { PaginationEllipsisProps } from './types'; const PaginationEllipsis = React.forwardRef( - ({label, element = 'PAGINATION_ELLIPSIS', ...props}, ref) => { + ({ label, element = 'PAGINATION_ELLIPSIS', ...props }, ref) => { return ( ); - } + }, ); PaginationEllipsis.displayName = 'PaginationEllipsis'; -export {PaginationEllipsis}; +export { PaginationEllipsis }; diff --git a/packages/paste-core/components/pagination/src/PaginationItems.tsx b/packages/paste-core/components/pagination/src/PaginationItems.tsx index 9c68f094bf..b5dbc3daa8 100644 --- a/packages/paste-core/components/pagination/src/PaginationItems.tsx +++ b/packages/paste-core/components/pagination/src/PaginationItems.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; -import {useUIDSeed} from '@twilio-paste/uid-library'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; +import { useUIDSeed } from '@twilio-paste/uid-library'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; -import {ULStyles, LIStyles} from './styles'; -import type {PaginationItemsProps} from './types'; +import { ULStyles, LIStyles } from './styles'; +import type { PaginationItemsProps } from './types'; const PaginationItems = React.forwardRef( - ({children, element = 'PAGINATION_ITEMS', ...props}, ref) => { + ({ children, element = 'PAGINATION_ITEMS', ...props }, ref) => { const [validChildren] = React.useMemo( () => [React.Children.toArray(children).filter((child) => React.isValidElement(child))], - [children] + [children], ); const keySeed = useUIDSeed(); @@ -33,9 +33,9 @@ const PaginationItems = React.forwardRef })} ); - } + }, ); PaginationItems.displayName = 'PaginationItems'; -export {PaginationItems}; +export { PaginationItems }; diff --git a/packages/paste-core/components/pagination/src/PaginationLabel.tsx b/packages/paste-core/components/pagination/src/PaginationLabel.tsx index 030b8212af..bb040ef287 100644 --- a/packages/paste-core/components/pagination/src/PaginationLabel.tsx +++ b/packages/paste-core/components/pagination/src/PaginationLabel.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {Text, safelySpreadTextProps} from '@twilio-paste/text'; +import { Text, safelySpreadTextProps } from '@twilio-paste/text'; -import type {PaginationLabelProps} from './types'; +import type { PaginationLabelProps } from './types'; const PaginationLabel = React.forwardRef( - ({children, element = 'PAGINATION_LABEL', ...props}, ref) => { + ({ children, element = 'PAGINATION_LABEL', ...props }, ref) => { return ( ( {children} ); - } + }, ); PaginationLabel.displayName = 'PaginationLabel'; -export {PaginationLabel}; +export { PaginationLabel }; diff --git a/packages/paste-core/components/pagination/src/PaginationNumber.tsx b/packages/paste-core/components/pagination/src/PaginationNumber.tsx index a553426538..3a1f995fb0 100644 --- a/packages/paste-core/components/pagination/src/PaginationNumber.tsx +++ b/packages/paste-core/components/pagination/src/PaginationNumber.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import {Text} from '@twilio-paste/text'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import { Text } from '@twilio-paste/text'; -import type {PaginationNumberProps} from './types'; -import {handleLinkValidation} from './utils'; +import type { PaginationNumberProps } from './types'; +import { handleLinkValidation } from './utils'; const PaginationNumber = React.forwardRef( - ({as = 'button', element = 'PAGINATION_NUMBER', children, href, isCurrent, label, ...props}, ref) => { - handleLinkValidation({as, href}); + ({ as = 'button', element = 'PAGINATION_NUMBER', children, href, isCurrent, label, ...props }, ref) => { + handleLinkValidation({ as, href }); return ( {children ? (     , ); const renderedParagraph = screen.getByText('Custom paragraph'); expect(renderedParagraph).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); @@ -53,10 +53,10 @@ describe('Customization', () => { render( Custom paragraph - +     , ); const renderedParagraph = screen.getByText('Custom paragraph'); expect(renderedParagraph).toHaveStyleRule('background-color', 'rgb(244, 244, 246)'); diff --git a/packages/paste-core/components/paragraph/build.js b/packages/paste-core/components/paragraph/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/paragraph/build.js +++ b/packages/paste-core/components/paragraph/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/paragraph/src/index.tsx b/packages/paste-core/components/paragraph/src/index.tsx index 25ea87b320..bd65496e1c 100644 --- a/packages/paste-core/components/paragraph/src/index.tsx +++ b/packages/paste-core/components/paragraph/src/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {Text, safelySpreadTextProps} from '@twilio-paste/text'; -import type {TextProps} from '@twilio-paste/text'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Text, safelySpreadTextProps } from '@twilio-paste/text'; +import type { TextProps } from '@twilio-paste/text'; +import type { HTMLPasteProps } from '@twilio-paste/types'; export interface ParagraphProps extends HTMLPasteProps<'p'>, Pick { id?: never; @@ -9,7 +9,7 @@ export interface ParagraphProps extends HTMLPasteProps<'p'>, Pick( - ({children, element = 'PARAGRAPH', marginBottom, ...props}, ref) => { + ({ children, element = 'PARAGRAPH', marginBottom, ...props }, ref) => { return ( ( {children} ); - } + }, ); Paragraph.displayName = 'Paragraph'; -export {Paragraph}; +export { Paragraph }; diff --git a/packages/paste-core/components/paragraph/stories/index.stories.tsx b/packages/paste-core/components/paragraph/stories/index.stories.tsx index 823ff30602..27ac76afdd 100644 --- a/packages/paste-core/components/paragraph/stories/index.stories.tsx +++ b/packages/paste-core/components/paragraph/stories/index.stories.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {Stack} from '@twilio-paste/stack'; -import {useTheme} from '@twilio-paste/theme'; +import type { StoryFn } from '@storybook/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { Stack } from '@twilio-paste/stack'; +import { useTheme } from '@twilio-paste/theme'; -import {Paragraph} from '../src'; +import { Paragraph } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -31,7 +31,7 @@ export const Default = (): React.ReactNode => { ); }; -export const CustomParagraph: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const CustomParagraph: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( diff --git a/packages/paste-core/components/popover/__tests__/index.spec.tsx b/packages/paste-core/components/popover/__tests__/index.spec.tsx index ae5f829e59..ddbe0a5e2d 100644 --- a/packages/paste-core/components/popover/__tests__/index.spec.tsx +++ b/packages/paste-core/components/popover/__tests__/index.spec.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; -import {render, screen, waitFor} from '@testing-library/react'; +import { render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import {Theme} from '@twilio-paste/theme'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {Text} from '@twilio-paste/text'; +import { Theme } from '@twilio-paste/theme'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { Text } from '@twilio-paste/text'; -import {PopoverTop, StateHookExample, BadgePopover, InitialFocus} from '../stories/index.stories'; -import {Popover, PopoverContainer, PopoverButton} from '../src'; +import { PopoverTop, StateHookExample, BadgePopover, InitialFocus } from '../stories/index.stories'; +import { Popover, PopoverContainer, PopoverButton } from '../src'; describe('Popover', () => { describe('Render', () => { @@ -14,7 +14,7 @@ describe('Popover', () => { render( - + , ); const renderedPopoverButton = screen.getByRole('button'); const renderedPopover = screen.getByTestId('top-popover'); @@ -33,7 +33,7 @@ describe('Popover', () => { render( - + , ); const renderedPopover = screen.getByLabelText('Popover'); expect(renderedPopover.getAttribute('role')).toEqual('dialog'); @@ -43,7 +43,7 @@ describe('Popover', () => { render( - + , ); const renderedPopoverButton = screen.getByRole('button'); @@ -52,14 +52,14 @@ describe('Popover', () => { userEvent.click(renderedPopoverButton); }); - expect(document.activeElement).toEqual(screen.getByRole('button', {name: 'Close popover'})); + expect(document.activeElement).toEqual(screen.getByRole('button', { name: 'Close popover' })); }); it('should focus the initialFocusRef when the popver opens', async () => { render( - + , ); const renderedPopoverButton = screen.getByRole('button'); @@ -68,14 +68,14 @@ describe('Popover', () => { userEvent.click(renderedPopoverButton); }); - expect(document.activeElement).toEqual(screen.getByRole('button', {name: 'Click me'})); + expect(document.activeElement).toEqual(screen.getByRole('button', { name: 'Click me' })); }); it('should render a popover and show/hide on external button click', async () => { render( - + , ); const ButtonOne = screen.queryByTestId('show-button'); @@ -114,9 +114,9 @@ describe('Popover', () => { render( - + , ); - const popoverButton = screen.getByRole('button', {name: 'Open popover'}); + const popoverButton = screen.getByRole('button', { name: 'Open popover' }); expect(popoverButton).toHaveAttribute('data-paste-element', 'POPOVER_BADGE'); }); @@ -124,9 +124,9 @@ describe('Popover', () => { render( - + , ); - const renderedPopoverButton = screen.getByRole('button', {name: 'Open popover'}); + const renderedPopoverButton = screen.getByRole('button', { name: 'Open popover' }); const renderedPopover = screen.getByTestId('badge-popover'); expect(renderedPopoverButton.getAttribute('aria-haspopup')).toEqual('dialog'); expect(renderedPopoverButton.getAttribute('aria-controls')).toEqual(renderedPopover.id); @@ -168,7 +168,7 @@ describe('Popover', () => { This is the Twilio styled popover that you can use in all your applications. -     +     , ); const popoverComp = screen.getByTestId('popover'); @@ -183,15 +183,15 @@ describe('Popover', () => { // applied style rules expect(popoverComp.querySelector('[data-paste-element="POPOVER"]')).toHaveStyleRule( 'background-color', - 'rgb(244, 244, 246)' + 'rgb(244, 244, 246)', ); expect(popoverComp.querySelector('[data-paste-element="POPOVER_CLOSE_BUTTON"]')).toHaveStyleRule( 'background-color', - 'rgb(18, 28, 45)' + 'rgb(18, 28, 45)', ); expect(popoverComp.querySelector('[data-paste-element="POPOVER_CLOSE_ICON"]')).toHaveStyleRule( 'color', - 'rgb(255, 255, 255)' + 'rgb(255, 255, 255)', ); expect(popoverButton).toHaveStyleRule('background-color', 'rgb(6, 3, 58)'); }); @@ -223,7 +223,7 @@ describe('Popover', () => { This is the Twilio styled popover that you can use in all your applications. - + , ); const popoverComp = screen.getByTestId('popover'); @@ -231,15 +231,15 @@ describe('Popover', () => { expect(popoverComp.querySelector('[data-paste-element="MYPOPOVER"]')).toHaveStyleRule( 'background-color', - 'rgb(244, 244, 246)' + 'rgb(244, 244, 246)', ); expect(popoverComp.querySelector('[data-paste-element="MYPOPOVER_CLOSE_BUTTON"]')).toHaveStyleRule( 'background-color', - 'rgb(18, 28, 45)' + 'rgb(18, 28, 45)', ); expect(popoverComp.querySelector('[data-paste-element="MYPOPOVER_CLOSE_ICON"]')).toHaveStyleRule( 'color', - 'rgb(255, 255, 255)' + 'rgb(255, 255, 255)', ); expect(popoverButton).toHaveStyleRule('background-color', 'rgb(6, 3, 58)'); @@ -254,7 +254,7 @@ describe('Popover', () => { Open popover Foo - + , ); const popoverButton = screen.getByRole('button'); @@ -262,7 +262,7 @@ describe('Popover', () => { userEvent.click(popoverButton); }); - const dismissButton = screen.getByRole('button', {name: 'Close popover'}); + const dismissButton = screen.getByRole('button', { name: 'Close popover' }); expect(dismissButton).toBeDefined(); }); @@ -275,7 +275,7 @@ describe('Popover', () => { Foo - + , ); const popoverButton = screen.getByRole('button'); @@ -283,7 +283,7 @@ describe('Popover', () => { userEvent.click(popoverButton); }); - const dismissButton = screen.getByRole('button', {name: 'Cerrar popover'}); + const dismissButton = screen.getByRole('button', { name: 'Cerrar popover' }); expect(dismissButton).toBeDefined(); }); }); diff --git a/packages/paste-core/components/popover/build.js b/packages/paste-core/components/popover/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/popover/build.js +++ b/packages/paste-core/components/popover/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/popover/src/Popover.tsx b/packages/paste-core/components/popover/src/Popover.tsx index 8988b8d175..d94bc6ba77 100644 --- a/packages/paste-core/components/popover/src/Popover.tsx +++ b/packages/paste-core/components/popover/src/Popover.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; -import type {BoxProps} from '@twilio-paste/box'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import {Button} from '@twilio-paste/button'; -import {CloseIcon} from '@twilio-paste/icons/esm/CloseIcon'; -import {StyledBase} from '@twilio-paste/theme'; -import {NonModalDialogPrimitive} from '@twilio-paste/non-modal-dialog-primitive'; -import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only'; -import type {ResponsiveValue} from '@twilio-paste/styling-library'; +import type { BoxProps } from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import { Button } from '@twilio-paste/button'; +import { CloseIcon } from '@twilio-paste/icons/esm/CloseIcon'; +import { StyledBase } from '@twilio-paste/theme'; +import { NonModalDialogPrimitive } from '@twilio-paste/non-modal-dialog-primitive'; +import { ScreenReaderOnly } from '@twilio-paste/screen-reader-only'; +import type { ResponsiveValue } from '@twilio-paste/styling-library'; -import {PopoverArrow} from './PopoverArrow'; -import {PopoverContext} from './PopoverContext'; +import { PopoverArrow } from './PopoverArrow'; +import { PopoverContext } from './PopoverContext'; -const StyledPopover = React.forwardRef(({style, width, ...props}, ref) => { +const StyledPopover = React.forwardRef(({ style, width, ...props }, ref) => { return ( (({style, width, boxShadow="shadowLow" maxWidth="size50" zIndex="zIndex80" - _focus={{outline: 'none'}} + _focus={{ outline: 'none' }} style={style} ref={ref} /> @@ -44,7 +44,7 @@ export interface PopoverProps extends Pick { } const Popover = React.forwardRef( - ({children, element = 'POPOVER', i18nDismissLabel = 'Close popover', initialFocusRef, ...props}, ref) => { + ({ children, element = 'POPOVER', i18nDismissLabel = 'Close popover', initialFocusRef, ...props }, ref) => { const popover = React.useContext(PopoverContext); React.useEffect(() => { @@ -77,8 +77,8 @@ const Popover = React.forwardRef( ); - } + }, ); Popover.displayName = 'Popover'; -export {Popover}; +export { Popover }; diff --git a/packages/paste-core/components/popover/src/PopoverArrow.tsx b/packages/paste-core/components/popover/src/PopoverArrow.tsx index d04fd54378..e88f5aee85 100644 --- a/packages/paste-core/components/popover/src/PopoverArrow.tsx +++ b/packages/paste-core/components/popover/src/PopoverArrow.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import type {NonModalDialogArrowPrimitiveProps} from '@twilio-paste/non-modal-dialog-primitive'; -import {NonModalDialogArrowPrimitive} from '@twilio-paste/non-modal-dialog-primitive'; -import {useTheme} from '@twilio-paste/theme'; +import type { NonModalDialogArrowPrimitiveProps } from '@twilio-paste/non-modal-dialog-primitive'; +import { NonModalDialogArrowPrimitive } from '@twilio-paste/non-modal-dialog-primitive'; +import { useTheme } from '@twilio-paste/theme'; export type PopoverArrowProps = NonModalDialogArrowPrimitiveProps; @@ -19,4 +19,4 @@ const PopoverArrow: React.FC> = (prop }; PopoverArrow.displayName = 'PopoverArrow'; -export {PopoverArrow}; +export { PopoverArrow }; diff --git a/packages/paste-core/components/popover/src/PopoverBadgeButton.tsx b/packages/paste-core/components/popover/src/PopoverBadgeButton.tsx index e0723e2872..a264196133 100644 --- a/packages/paste-core/components/popover/src/PopoverBadgeButton.tsx +++ b/packages/paste-core/components/popover/src/PopoverBadgeButton.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import {Badge} from '@twilio-paste/badge'; -import {NonModalDialogDisclosurePrimitive} from '@twilio-paste/non-modal-dialog-primitive'; +import { Badge } from '@twilio-paste/badge'; +import { NonModalDialogDisclosurePrimitive } from '@twilio-paste/non-modal-dialog-primitive'; -import type {PopoverBadgeButtonProps, ButtonBadgeProps} from './types'; -import {PopoverContext} from './PopoverContext'; +import type { PopoverBadgeButtonProps, ButtonBadgeProps } from './types'; +import { PopoverContext } from './PopoverContext'; const ButtonBadge = React.forwardRef(function ButtonBadge( - {children, ...props}, - ref + { children, ...props }, + ref, ) { return ( @@ -19,7 +19,7 @@ const ButtonBadge = React.forwardRef(functi ButtonBadge.displayName = 'ButtonBadge'; const PopoverBadgeButton = React.forwardRef( - ({children, element = 'POPOVER_BADGE', ...popoverButtonProps}, ref) => { + ({ children, element = 'POPOVER_BADGE', ...popoverButtonProps }, ref) => { const popover = React.useContext(PopoverContext); return ( @@ -33,8 +33,8 @@ const PopoverBadgeButton = React.forwardRef ); - } + }, ); PopoverBadgeButton.displayName = 'PopoverBadgeButton'; -export {PopoverBadgeButton}; +export { PopoverBadgeButton }; diff --git a/packages/paste-core/components/popover/src/PopoverButton.tsx b/packages/paste-core/components/popover/src/PopoverButton.tsx index 29f607289b..aaa644eecd 100644 --- a/packages/paste-core/components/popover/src/PopoverButton.tsx +++ b/packages/paste-core/components/popover/src/PopoverButton.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; -import {Button} from '@twilio-paste/button'; -import {NonModalDialogDisclosurePrimitive} from '@twilio-paste/non-modal-dialog-primitive'; +import { Button } from '@twilio-paste/button'; +import { NonModalDialogDisclosurePrimitive } from '@twilio-paste/non-modal-dialog-primitive'; -import type {PopoverButtonProps} from './types'; -import {PopoverContext} from './PopoverContext'; +import type { PopoverButtonProps } from './types'; +import { PopoverContext } from './PopoverContext'; const PopoverButton = React.forwardRef( - ({children, element = 'POPOVER_BUTTON', ...popoverButtonProps}, ref) => { + ({ children, element = 'POPOVER_BUTTON', ...popoverButtonProps }, ref) => { const popover = React.useContext(PopoverContext); return ( @@ -20,8 +20,8 @@ const PopoverButton = React.forwardRef( {children} ); - } + }, ); PopoverButton.displayName = 'PopoverButton'; -export {PopoverButton}; +export { PopoverButton }; diff --git a/packages/paste-core/components/popover/src/PopoverContainer.tsx b/packages/paste-core/components/popover/src/PopoverContainer.tsx index df0163ed47..4f583323a6 100644 --- a/packages/paste-core/components/popover/src/PopoverContainer.tsx +++ b/packages/paste-core/components/popover/src/PopoverContainer.tsx @@ -3,9 +3,9 @@ import type { NonModalDialogPrimitiveStateReturn, NonModalDialogPrimitivePopoverInitialState, } from '@twilio-paste/non-modal-dialog-primitive'; -import {useNonModalDialogPrimitiveState} from '@twilio-paste/non-modal-dialog-primitive'; +import { useNonModalDialogPrimitiveState } from '@twilio-paste/non-modal-dialog-primitive'; -import {PopoverContext} from './PopoverContext'; +import { PopoverContext } from './PopoverContext'; export interface PopoverStateReturn extends NonModalDialogPrimitiveStateReturn { [key: string]: any; @@ -23,7 +23,7 @@ const BasePopoverContainer: React.FC { - const popover = state || useNonModalDialogPrimitiveState({gutter, modal: true, placement, ...initialState}); + const popover = state || useNonModalDialogPrimitiveState({ gutter, modal: true, placement, ...initialState }); return {children}; }; BasePopoverContainer.displayName = 'BasePopoverContainer'; @@ -31,6 +31,6 @@ BasePopoverContainer.displayName = 'BasePopoverContainer'; const PopoverContainer = React.memo(BasePopoverContainer); PopoverContainer.displayName = 'PopoverContainer'; -export {PopoverContainer}; +export { PopoverContainer }; -export {useNonModalDialogPrimitiveState as usePopoverState}; +export { useNonModalDialogPrimitiveState as usePopoverState }; diff --git a/packages/paste-core/components/popover/src/PopoverContext.tsx b/packages/paste-core/components/popover/src/PopoverContext.tsx index 61db832c66..ffb4522421 100644 --- a/packages/paste-core/components/popover/src/PopoverContext.tsx +++ b/packages/paste-core/components/popover/src/PopoverContext.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import type {NonModalDialogPrimitiveState} from '@twilio-paste/non-modal-dialog-primitive'; +import type { NonModalDialogPrimitiveState } from '@twilio-paste/non-modal-dialog-primitive'; const PopoverContext = React.createContext>({}); -export {PopoverContext}; +export { PopoverContext }; diff --git a/packages/paste-core/components/popover/src/index.tsx b/packages/paste-core/components/popover/src/index.tsx index 666c301da8..09bda92f4f 100644 --- a/packages/paste-core/components/popover/src/index.tsx +++ b/packages/paste-core/components/popover/src/index.tsx @@ -2,4 +2,4 @@ export * from './PopoverContainer'; export * from './Popover'; export * from './PopoverButton'; export * from './PopoverBadgeButton'; -export type {PopoverButtonProps, PopoverBadgeButtonProps} from './types'; +export type { PopoverButtonProps, PopoverBadgeButtonProps } from './types'; diff --git a/packages/paste-core/components/popover/src/types.ts b/packages/paste-core/components/popover/src/types.ts index 448f77cebb..5e090f72c1 100644 --- a/packages/paste-core/components/popover/src/types.ts +++ b/packages/paste-core/components/popover/src/types.ts @@ -1,6 +1,6 @@ -import type {BadgeBaseProps, BadgeButtonProps} from '@twilio-paste/badge'; -import type {ButtonProps} from '@twilio-paste/button'; -import type {BoxProps} from '@twilio-paste/box'; +import type { BadgeBaseProps, BadgeButtonProps } from '@twilio-paste/badge'; +import type { ButtonProps } from '@twilio-paste/button'; +import type { BoxProps } from '@twilio-paste/box'; export type ButtonBadgeProps = BadgeBaseProps & Omit & { diff --git a/packages/paste-core/components/popover/stories/index.stories.tsx b/packages/paste-core/components/popover/stories/index.stories.tsx index 4582801391..dc797456a6 100644 --- a/packages/paste-core/components/popover/stories/index.stories.tsx +++ b/packages/paste-core/components/popover/stories/index.stories.tsx @@ -1,27 +1,27 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {useTheme} from '@twilio-paste/theme'; -import {useUID} from '@twilio-paste/uid-library'; -import {Box} from '@twilio-paste/box'; -import {Button} from '@twilio-paste/button'; -import {Label} from '@twilio-paste/label'; -import {Stack} from '@twilio-paste/stack'; -import {Text} from '@twilio-paste/text'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {DatePicker} from '@twilio-paste/date-picker'; -import {TimePicker} from '@twilio-paste/time-picker'; -import {Separator} from '@twilio-paste/separator'; +import type { StoryFn } from '@storybook/react'; +import { useTheme } from '@twilio-paste/theme'; +import { useUID } from '@twilio-paste/uid-library'; +import { Box } from '@twilio-paste/box'; +import { Button } from '@twilio-paste/button'; +import { Label } from '@twilio-paste/label'; +import { Stack } from '@twilio-paste/stack'; +import { Text } from '@twilio-paste/text'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { DatePicker } from '@twilio-paste/date-picker'; +import { TimePicker } from '@twilio-paste/time-picker'; +import { Separator } from '@twilio-paste/separator'; -import {usePopoverState, Popover, PopoverContainer, PopoverButton, PopoverBadgeButton} from '../src'; +import { usePopoverState, Popover, PopoverContainer, PopoverButton, PopoverBadgeButton } from '../src'; // eslint-disable-next-line import/no-default-export export default { title: 'Components/Popover', component: Popover, - subcomponents: {PopoverContainer, PopoverButton}, + subcomponents: { PopoverContainer, PopoverButton }, parameters: { // Sets a delay and diff threshold for the component's stories - chromatic: {delay: 3000, diffThreshold: 0.3}, + chromatic: { delay: 3000, diffThreshold: 0.3 }, }, }; @@ -226,7 +226,7 @@ export const BadgePopover = (): JSX.Element => { export const StateHookExample = (): JSX.Element => { const uniqueBaseID = useUID(); - const popover = usePopoverState({baseId: uniqueBaseID}); + const popover = usePopoverState({ baseId: uniqueBaseID }); return ( @@ -247,7 +247,7 @@ export const StateHookExample = (): JSX.Element => { ); }; -export const Customization: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const Customization: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); const uniqueBaseID = useUID(); return ( diff --git a/packages/paste-core/components/product-switcher/__tests__/ProductSwitcher.spec.tsx b/packages/paste-core/components/product-switcher/__tests__/ProductSwitcher.spec.tsx index 1672dc592d..941e1bbc01 100644 --- a/packages/paste-core/components/product-switcher/__tests__/ProductSwitcher.spec.tsx +++ b/packages/paste-core/components/product-switcher/__tests__/ProductSwitcher.spec.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {render, screen, act} from '@testing-library/react'; +import { render, screen, act } from '@testing-library/react'; -import {ProductSwitcherMenu} from '../stories/ProductSwitcher.stories'; -import {DefaultElementName, CustomElementName} from '../stories/ProductSwitcher.customization.stories'; +import { ProductSwitcherMenu } from '../stories/ProductSwitcher.stories'; +import { DefaultElementName, CustomElementName } from '../stories/ProductSwitcher.customization.stories'; describe('ProductSwitcher', () => { describe('element naming', () => { @@ -10,12 +10,12 @@ describe('ProductSwitcher', () => { await act(async () => { render(); }); - expect(screen.getByRole('button', {name: 'Switch products'}).dataset.pasteElement).toEqual( - 'PRODUCT_SWITCHER_BUTTON' + expect(screen.getByRole('button', { name: 'Switch products' }).dataset.pasteElement).toEqual( + 'PRODUCT_SWITCHER_BUTTON', ); expect(screen.getByRole('menu').dataset.pasteElement).toEqual('PRODUCT_SWITCHER'); - expect(screen.getByRole('menuitemradio', {name: 'Twilio SMS, Voice & Video'}).dataset.pasteElement).toEqual( - 'PRODUCT_SWITCHER_ITEM' + expect(screen.getByRole('menuitemradio', { name: 'Twilio SMS, Voice & Video' }).dataset.pasteElement).toEqual( + 'PRODUCT_SWITCHER_ITEM', ); }); }); @@ -24,10 +24,10 @@ describe('ProductSwitcher', () => { await act(async () => { render(); }); - expect(screen.getByRole('button', {name: 'Switch products'}).dataset.pasteElement).toEqual('FOO'); + expect(screen.getByRole('button', { name: 'Switch products' }).dataset.pasteElement).toEqual('FOO'); expect(screen.getByRole('menu').dataset.pasteElement).toEqual('BAR'); - expect(screen.getByRole('menuitemradio', {name: 'Twilio SMS, Voice & Video'}).dataset.pasteElement).toEqual( - 'BAZ' + expect(screen.getByRole('menuitemradio', { name: 'Twilio SMS, Voice & Video' }).dataset.pasteElement).toEqual( + 'BAZ', ); }); }); @@ -36,14 +36,14 @@ describe('ProductSwitcher', () => { await act(async () => { render(); }); - expect(screen.getByRole('button', {name: 'Switch products'})).toHaveStyleRule( + expect(screen.getByRole('button', { name: 'Switch products' })).toHaveStyleRule( 'background-color', - 'rgb(2, 99, 224)' + 'rgb(2, 99, 224)', ); expect(screen.getByRole('menu')).toHaveStyleRule('border-color', 'rgb(117, 12, 12)'); - expect(screen.getByRole('menuitemradio', {name: 'Twilio SMS, Voice & Video'})).toHaveStyleRule( + expect(screen.getByRole('menuitemradio', { name: 'Twilio SMS, Voice & Video' })).toHaveStyleRule( 'text-decoration', - 'underline' + 'underline', ); }); }); @@ -52,14 +52,14 @@ describe('ProductSwitcher', () => { await act(async () => { render(); }); - expect(screen.getByRole('button', {name: 'Switch products'})).toHaveStyleRule( + expect(screen.getByRole('button', { name: 'Switch products' })).toHaveStyleRule( 'background-color', - 'rgb(2, 99, 224)' + 'rgb(2, 99, 224)', ); expect(screen.getByRole('menu')).toHaveStyleRule('border-color', 'rgb(117, 12, 12)'); - expect(screen.getByRole('menuitemradio', {name: 'Twilio SMS, Voice & Video'})).toHaveStyleRule( + expect(screen.getByRole('menuitemradio', { name: 'Twilio SMS, Voice & Video' })).toHaveStyleRule( 'text-decoration', - 'underline' + 'underline', ); }); }); diff --git a/packages/paste-core/components/product-switcher/build.js b/packages/paste-core/components/product-switcher/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/product-switcher/build.js +++ b/packages/paste-core/components/product-switcher/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/product-switcher/src/ProductSwitcher.tsx b/packages/paste-core/components/product-switcher/src/ProductSwitcher.tsx index 00071a1b87..760903f34b 100644 --- a/packages/paste-core/components/product-switcher/src/ProductSwitcher.tsx +++ b/packages/paste-core/components/product-switcher/src/ProductSwitcher.tsx @@ -1,20 +1,20 @@ import * as React from 'react'; -import {Menu} from '@twilio-paste/menu'; -import type {MenuProps} from '@twilio-paste/menu'; +import { Menu } from '@twilio-paste/menu'; +import type { MenuProps } from '@twilio-paste/menu'; export interface ProductSwitcherProps extends MenuProps { children: NonNullable; } const ProductSwitcher = React.forwardRef( - ({children, element = 'PRODUCT_SWITCHER', ...props}, ref) => { + ({ children, element = 'PRODUCT_SWITCHER', ...props }, ref) => { return ( {children} ); - } + }, ); ProductSwitcher.displayName = 'ProductSwitcher'; -export {ProductSwitcher}; +export { ProductSwitcher }; diff --git a/packages/paste-core/components/product-switcher/src/ProductSwitcherButton.tsx b/packages/paste-core/components/product-switcher/src/ProductSwitcherButton.tsx index a584961e7e..8f0b46087d 100644 --- a/packages/paste-core/components/product-switcher/src/ProductSwitcherButton.tsx +++ b/packages/paste-core/components/product-switcher/src/ProductSwitcherButton.tsx @@ -1,23 +1,23 @@ import * as React from 'react'; -import {MenuButton} from '@twilio-paste/menu'; -import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only'; -import type {MenuButtonProps} from '@twilio-paste/menu'; -import {ProductSwitcherIcon} from '@twilio-paste/icons/esm/ProductSwitcherIcon'; +import { MenuButton } from '@twilio-paste/menu'; +import { ScreenReaderOnly } from '@twilio-paste/screen-reader-only'; +import type { MenuButtonProps } from '@twilio-paste/menu'; +import { ProductSwitcherIcon } from '@twilio-paste/icons/esm/ProductSwitcherIcon'; export interface ProductSwitcherButtonProps extends Omit { i18nButtonLabel: string; } const ProductSwitcherButton = React.forwardRef( - ({element = 'PRODUCT_SWITCHER_BUTTON', i18nButtonLabel, ...props}, ref) => { + ({ element = 'PRODUCT_SWITCHER_BUTTON', i18nButtonLabel, ...props }, ref) => { return ( {i18nButtonLabel} ); - } + }, ); ProductSwitcherButton.displayName = 'ProductSwitcherButton'; -export {ProductSwitcherButton}; +export { ProductSwitcherButton }; diff --git a/packages/paste-core/components/product-switcher/src/ProductSwitcherItem.tsx b/packages/paste-core/components/product-switcher/src/ProductSwitcherItem.tsx index 37a4c4f14d..9cc5e7986c 100644 --- a/packages/paste-core/components/product-switcher/src/ProductSwitcherItem.tsx +++ b/packages/paste-core/components/product-switcher/src/ProductSwitcherItem.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {MenuItemRadio} from '@twilio-paste/menu'; -import type {MenuItemRadioProps} from '@twilio-paste/menu'; -import {Text} from '@twilio-paste/text'; -import {Box} from '@twilio-paste/box'; +import { MenuItemRadio } from '@twilio-paste/menu'; +import type { MenuItemRadioProps } from '@twilio-paste/menu'; +import { Text } from '@twilio-paste/text'; +import { Box } from '@twilio-paste/box'; export interface ProductSwitcherItemProps extends Omit { productName: string; @@ -11,7 +11,7 @@ export interface ProductSwitcherItemProps extends Omit( - ({productName, productStrapline, productIcon, element = 'PRODUCT_SWITCHER_ITEM', ...props}, ref) => { + ({ productName, productStrapline, productIcon, element = 'PRODUCT_SWITCHER_ITEM', ...props }, ref) => { return ( @@ -27,8 +27,8 @@ const ProductSwitcherItem = React.forwardRef ); - } + }, ); ProductSwitcherItem.displayName = 'ProductSwitcherItem'; -export {ProductSwitcherItem}; +export { ProductSwitcherItem }; diff --git a/packages/paste-core/components/product-switcher/src/useProductSwitcher.ts b/packages/paste-core/components/product-switcher/src/useProductSwitcher.ts index 2e3e231fec..15c201a620 100644 --- a/packages/paste-core/components/product-switcher/src/useProductSwitcher.ts +++ b/packages/paste-core/components/product-switcher/src/useProductSwitcher.ts @@ -1 +1 @@ -export {useMenuState as useProductSwitcherState} from '@twilio-paste/menu'; +export { useMenuState as useProductSwitcherState } from '@twilio-paste/menu'; diff --git a/packages/paste-core/components/product-switcher/stories/ProductSwitcher.customization.stories.tsx b/packages/paste-core/components/product-switcher/stories/ProductSwitcher.customization.stories.tsx index aeda60c0c8..92d2b6b822 100644 --- a/packages/paste-core/components/product-switcher/stories/ProductSwitcher.customization.stories.tsx +++ b/packages/paste-core/components/product-switcher/stories/ProductSwitcher.customization.stories.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {ProductSegmentIcon} from '@twilio-paste/icons/esm/ProductSegmentIcon'; -import {ProductFlexIcon} from '@twilio-paste/icons/esm/ProductFlexIcon'; -import {ProductEmailAPIIcon} from '@twilio-paste/icons/esm/ProductEmailAPIIcon'; -import {LogoTwilioIcon} from '@twilio-paste/icons/esm/LogoTwilioIcon'; +import type { StoryFn } from '@storybook/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { ProductSegmentIcon } from '@twilio-paste/icons/esm/ProductSegmentIcon'; +import { ProductFlexIcon } from '@twilio-paste/icons/esm/ProductFlexIcon'; +import { ProductEmailAPIIcon } from '@twilio-paste/icons/esm/ProductEmailAPIIcon'; +import { LogoTwilioIcon } from '@twilio-paste/icons/esm/LogoTwilioIcon'; -import {ProductSwitcher, ProductSwitcherButton, ProductSwitcherItem, useProductSwitcherState} from '../src'; +import { ProductSwitcher, ProductSwitcherButton, ProductSwitcherItem, useProductSwitcherState } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -14,14 +14,14 @@ export default { }; export const DefaultElementName: StoryFn = () => { - const productSwitcher = useProductSwitcherState({visible: true}); + const productSwitcher = useProductSwitcherState({ visible: true }); const [product, setProduct] = React.useState('twilio'); return ( @@ -92,14 +92,14 @@ export const DefaultElementName: StoryFn = () => { }; export const CustomElementName: StoryFn = () => { - const productSwitcher = useProductSwitcherState({visible: true}); + const productSwitcher = useProductSwitcherState({ visible: true }); const [product, setProduct] = React.useState('twilio'); return ( diff --git a/packages/paste-core/components/product-switcher/stories/ProductSwitcher.stories.tsx b/packages/paste-core/components/product-switcher/stories/ProductSwitcher.stories.tsx index 872ff3576b..f4439b94c2 100644 --- a/packages/paste-core/components/product-switcher/stories/ProductSwitcher.stories.tsx +++ b/packages/paste-core/components/product-switcher/stories/ProductSwitcher.stories.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {LogoTwilioIcon} from '@twilio-paste/icons/esm/LogoTwilioIcon'; -import {ProductSegmentIcon} from '@twilio-paste/icons/esm/ProductSegmentIcon'; -import {ProductFlexIcon} from '@twilio-paste/icons/esm/ProductFlexIcon'; -import {ProductEmailAPIIcon} from '@twilio-paste/icons/esm/ProductEmailAPIIcon'; +import type { StoryFn } from '@storybook/react'; +import { LogoTwilioIcon } from '@twilio-paste/icons/esm/LogoTwilioIcon'; +import { ProductSegmentIcon } from '@twilio-paste/icons/esm/ProductSegmentIcon'; +import { ProductFlexIcon } from '@twilio-paste/icons/esm/ProductFlexIcon'; +import { ProductEmailAPIIcon } from '@twilio-paste/icons/esm/ProductEmailAPIIcon'; -import {ProductSwitcher, ProductSwitcherButton, ProductSwitcherItem, useProductSwitcherState} from '../src'; +import { ProductSwitcher, ProductSwitcherButton, ProductSwitcherItem, useProductSwitcherState } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -13,7 +13,7 @@ export default { }; export const ProductSwitcherMenu: StoryFn = () => { - const productSwitcher = useProductSwitcherState({visible: true}); + const productSwitcher = useProductSwitcherState({ visible: true }); const [product, setProduct] = React.useState('twilio'); return ( <> diff --git a/packages/paste-core/components/progress-bar/__tests__/index.spec.tsx b/packages/paste-core/components/progress-bar/__tests__/index.spec.tsx index 56ed09390b..6d10770cf6 100644 --- a/packages/paste-core/components/progress-bar/__tests__/index.spec.tsx +++ b/packages/paste-core/components/progress-bar/__tests__/index.spec.tsx @@ -1,20 +1,20 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import {Theme} from '@twilio-paste/theme'; -import {HelpText} from '@twilio-paste/help-text'; +import { render, screen } from '@testing-library/react'; +import { Theme } from '@twilio-paste/theme'; +import { HelpText } from '@twilio-paste/help-text'; -import {LABEL_SUFFIX} from '../src/constants'; -import {ProgressBar, ProgressBarLabel} from '../src'; +import { LABEL_SUFFIX } from '../src/constants'; +import { ProgressBar, ProgressBarLabel } from '../src'; describe('ProgressBar', () => { describe('base usage', () => { it('should render correctly with all aria attributes', () => { - const {rerender} = render( + const { rerender } = render( Download progress Downloading more ram - + , ); const progressBar = screen.getByRole('progressbar'); @@ -44,7 +44,7 @@ describe('ProgressBar', () => { maxValue={120} /> Downloading more ram - + , ); expect(progressBar).toHaveAttribute('aria-valuenow', '50'); expect(progressBar).toHaveAttribute('aria-valuetext', '42%'); @@ -66,7 +66,7 @@ describe('ProgressBar', () => {
    Download progress
    -     + , ); const progressBar = screen.getByRole('progressbar'); @@ -85,7 +85,7 @@ describe('ProgressBar', () => { value={33} maxValue={120} /> - + , ); const progressBar = screen.getByRole('progressbar'); diff --git a/packages/paste-core/components/progress-bar/build.js b/packages/paste-core/components/progress-bar/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/progress-bar/build.js +++ b/packages/paste-core/components/progress-bar/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/progress-bar/src/ProgressBar.tsx b/packages/paste-core/components/progress-bar/src/ProgressBar.tsx index 1088d20bd7..08ef11c170 100644 --- a/packages/paste-core/components/progress-bar/src/ProgressBar.tsx +++ b/packages/paste-core/components/progress-bar/src/ProgressBar.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import {Box, type BoxProps} from '@twilio-paste/box'; -import type {HTMLPasteProps} from '@twilio-paste/types'; -import {useProgressBar} from '@twilio-paste/react-spectrum-library'; -import {animated, useSpring} from '@twilio-paste/animation-library'; -import {keyframes} from '@twilio-paste/styling-library'; +import { Box, type BoxProps } from '@twilio-paste/box'; +import type { HTMLPasteProps } from '@twilio-paste/types'; +import { useProgressBar } from '@twilio-paste/react-spectrum-library'; +import { animated, useSpring } from '@twilio-paste/animation-library'; +import { keyframes } from '@twilio-paste/styling-library'; -import {LABEL_SUFFIX} from './constants'; +import { LABEL_SUFFIX } from './constants'; const AnimatedBox = animated(Box); const IndeterminateKeyframes = keyframes` @@ -39,7 +39,7 @@ export interface ProgressBarProps extends HTMLPasteProps<'progress'> { } export const ProgressBar = React.forwardRef((props, ref) => { - const {element = 'PROGRESS_BAR', id, value = 0, maxValue = 100, isIndeterminate = false} = props; + const { element = 'PROGRESS_BAR', id, value = 0, maxValue = 100, isIndeterminate = false } = props; /* * Since ProgressBar isn't a form element, we cannot use htmlFor from the regular label * so we create a ProgressBarLabel component that behaves like a regular form Label @@ -50,7 +50,7 @@ export const ProgressBar = React.forwardRef((p labelledBy = `${id}${LABEL_SUFFIX}`; } - const {progressBarProps} = useProgressBar({ + const { progressBarProps } = useProgressBar({ ...props, // Appeases useLabel's internal warning about missing labels because we're doing our own thing 'aria-labelledby': labelledBy, @@ -60,7 +60,7 @@ export const ProgressBar = React.forwardRef((p if (!isIndeterminate) { const clampedValue = Math.min(Math.max(value, 0), maxValue); const percentage = Math.round((clampedValue / maxValue) * 100); - return {width: `${percentage}%`, config: {tension: 280, friction: 60}}; + return { width: `${percentage}%`, config: { tension: 280, friction: 60 } }; } return { diff --git a/packages/paste-core/components/progress-bar/src/ProgressBarLabel.tsx b/packages/paste-core/components/progress-bar/src/ProgressBarLabel.tsx index 3fdfaeb151..b1a73a78a3 100644 --- a/packages/paste-core/components/progress-bar/src/ProgressBarLabel.tsx +++ b/packages/paste-core/components/progress-bar/src/ProgressBarLabel.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {type BoxProps} from '@twilio-paste/box'; -import {Label} from '@twilio-paste/label'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { type BoxProps } from '@twilio-paste/box'; +import { Label } from '@twilio-paste/label'; +import type { HTMLPasteProps } from '@twilio-paste/types'; -import {LABEL_SUFFIX} from './constants'; +import { LABEL_SUFFIX } from './constants'; export interface ProgressBarLabelProps extends HTMLPasteProps<'div'> { element?: BoxProps['element']; @@ -12,13 +12,13 @@ export interface ProgressBarLabelProps extends HTMLPasteProps<'div'> { } export const ProgressBarLabel = React.forwardRef( - ({element = 'PROGRESS_BAR_LABEL', children, htmlFor, ...labelProps}, ref) => { + ({ element = 'PROGRESS_BAR_LABEL', children, htmlFor, ...labelProps }, ref) => { return ( ); - } + }, ); ProgressBarLabel.displayName = 'ProgressBarLabel'; diff --git a/packages/paste-core/components/progress-bar/stories/customization.stories.tsx b/packages/paste-core/components/progress-bar/stories/customization.stories.tsx index 5393c3a91b..112a2b1aa2 100644 --- a/packages/paste-core/components/progress-bar/stories/customization.stories.tsx +++ b/packages/paste-core/components/progress-bar/stories/customization.stories.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import {Label} from '@twilio-paste/label'; -import {HelpText} from '@twilio-paste/help-text'; -import {useUID} from '@twilio-paste/uid-library'; -import {Form, FormControl} from '@twilio-paste/form'; -import {Button} from '@twilio-paste/button'; -import {Box} from '@twilio-paste/box'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { Label } from '@twilio-paste/label'; +import { HelpText } from '@twilio-paste/help-text'; +import { useUID } from '@twilio-paste/uid-library'; +import { Form, FormControl } from '@twilio-paste/form'; +import { Button } from '@twilio-paste/button'; +import { Box } from '@twilio-paste/box'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {ProgressBar, ProgressBarLabel} from '../src'; +import { ProgressBar, ProgressBarLabel } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -16,7 +16,7 @@ export default { const NumberFormatter = new Intl.NumberFormat('en-US'); -export const CustomizationWrapper: React.FC> = ({ +export const CustomizationWrapper: React.FC> = ({ isTestEnvironment, }): React.ReactElement => { const progressBarId = useUID(); diff --git a/packages/paste-core/components/progress-bar/stories/index.stories.tsx b/packages/paste-core/components/progress-bar/stories/index.stories.tsx index 7688b0f047..692225dbe4 100644 --- a/packages/paste-core/components/progress-bar/stories/index.stories.tsx +++ b/packages/paste-core/components/progress-bar/stories/index.stories.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; -import {Label} from '@twilio-paste/label'; -import {HelpText} from '@twilio-paste/help-text'; -import {useUID} from '@twilio-paste/uid-library'; -import {Form, FormControl} from '@twilio-paste/form'; -import {Button} from '@twilio-paste/button'; -import {Box} from '@twilio-paste/box'; +import { Label } from '@twilio-paste/label'; +import { HelpText } from '@twilio-paste/help-text'; +import { useUID } from '@twilio-paste/uid-library'; +import { Form, FormControl } from '@twilio-paste/form'; +import { Button } from '@twilio-paste/button'; +import { Box } from '@twilio-paste/box'; -import {ProgressBar, ProgressBarLabel} from '../src'; +import { ProgressBar, ProgressBarLabel } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -126,7 +126,7 @@ export const CustomValueText = (): React.ReactNode => { value={21} maxValue={30} valueLabel="21 friends accepted" - formatOptions={{maximumFractionDigits: 0, minimumFractionDigits: 0}} + formatOptions={{ maximumFractionDigits: 0, minimumFractionDigits: 0 }} /> diff --git a/packages/paste-core/components/progress-steps/__tests__/index.spec.tsx b/packages/paste-core/components/progress-steps/__tests__/index.spec.tsx index 615397ca34..4764c8613b 100644 --- a/packages/paste-core/components/progress-steps/__tests__/index.spec.tsx +++ b/packages/paste-core/components/progress-steps/__tests__/index.spec.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {render} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; import { ProgressSteps, @@ -10,11 +10,11 @@ import { ProgressStepError, ProgressStepIncomplete, } from '../src'; -import {Divs, Buttons, Anchors} from '../stories/horizontal.stories'; +import { Divs, Buttons, Anchors } from '../stories/horizontal.stories'; describe('ProgressSteps', () => { it('should render divs correctly', () => { - const {queryAllByText, getAllByRole} = render(); + const { queryAllByText, getAllByRole } = render(); const [completeIcon, completeLabel] = queryAllByText('Completed'); const [incompleteIcon, incompleteLabel] = queryAllByText('Incomplete'); const [errorIcon, errorLabel] = queryAllByText('Error'); @@ -40,16 +40,16 @@ describe('ProgressSteps', () => { }); it('should render buttons correctly', () => { - const {getByRole} = render(); - const signupLabel = getByRole('button', {name: 'Completed Sign up'}); + const { getByRole } = render(); + const signupLabel = getByRole('button', { name: 'Completed Sign up' }); expect(signupLabel?.tagName).toEqual('BUTTON'); expect(signupLabel?.getAttribute('type')).toEqual('button'); }); it('should render anchors correctly', () => { - const {getByRole} = render(); - const signupLabel = getByRole('link', {name: 'Completed Sign up'}); + const { getByRole } = render(); + const signupLabel = getByRole('link', { name: 'Completed Sign up' }); expect(signupLabel?.tagName).toEqual('A'); expect(signupLabel?.getAttribute('href')).toEqual('#'); @@ -57,11 +57,11 @@ describe('ProgressSteps', () => { describe('element naming', () => { it('should set all default element names', async () => { - const {getByRole} = render(); - const signupLabel = getByRole('button', {name: 'Completed Sign up'}); - const validateEmail = getByRole('button', {name: 'Error Validate email'}); - const completeProfile = getByRole('button', {name: 'Current Complete profile'}); - const addFriends = getByRole('button', {name: 'Incomplete Add friends'}); + const { getByRole } = render(); + const signupLabel = getByRole('button', { name: 'Completed Sign up' }); + const validateEmail = getByRole('button', { name: 'Error Validate email' }); + const completeProfile = getByRole('button', { name: 'Current Complete profile' }); + const addFriends = getByRole('button', { name: 'Incomplete Add friends' }); const wrapper = getByRole('list'); expect(signupLabel?.dataset.pasteElement).toEqual('PROGRESS_STEP_COMPLETE'); @@ -73,7 +73,7 @@ describe('ProgressSteps', () => { }); describe('custom element naming', () => { it('should set all custom element names', async () => { - const {getByRole} = render( + const { getByRole } = render( { Start event - +     , ); - const signupLabel = getByRole('link', {name: 'Completed Sign up'}); - const validateEmail = getByRole('button', {name: 'Error Validate email'}); - const completeProfile = getByRole('button', {name: 'Current Complete profile'}); - const addFriends = getByRole('button', {name: 'Incomplete Add friends'}); + const signupLabel = getByRole('link', { name: 'Completed Sign up' }); + const validateEmail = getByRole('button', { name: 'Error Validate email' }); + const completeProfile = getByRole('button', { name: 'Current Complete profile' }); + const addFriends = getByRole('button', { name: 'Incomplete Add friends' }); const wrapper = getByRole('list'); expect(signupLabel?.dataset.pasteElement).toEqual('STEP_COMPLETE'); diff --git a/packages/paste-core/components/progress-steps/build.js b/packages/paste-core/components/progress-steps/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/progress-steps/build.js +++ b/packages/paste-core/components/progress-steps/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/progress-steps/src/ProgressStepComplete.tsx b/packages/paste-core/components/progress-steps/src/ProgressStepComplete.tsx index 168f5f4e69..8368518b5b 100644 --- a/packages/paste-core/components/progress-steps/src/ProgressStepComplete.tsx +++ b/packages/paste-core/components/progress-steps/src/ProgressStepComplete.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import {SuccessIcon as ProgressSuccessIcon} from '@twilio-paste/icons/esm/SuccessIcon'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import { SuccessIcon as ProgressSuccessIcon } from '@twilio-paste/icons/esm/SuccessIcon'; -import type {ProgressStepCompleteProps} from './types'; +import type { ProgressStepCompleteProps } from './types'; export const ProgressStepComplete = React.forwardRef( - ({element = 'PROGRESS_STEP_COMPLETE', as = 'div', children, i18nCompleteLabel = 'Completed', ...props}, ref) => { + ({ element = 'PROGRESS_STEP_COMPLETE', as = 'div', children, i18nCompleteLabel = 'Completed', ...props }, ref) => { return (
    @@ -39,6 +39,6 @@ export const ProgressStepComplete = React.forwardRef
    ); - } + }, ); ProgressStepComplete.displayName = 'ProgressStepComplete'; diff --git a/packages/paste-core/components/progress-steps/src/ProgressStepCurrent.tsx b/packages/paste-core/components/progress-steps/src/ProgressStepCurrent.tsx index c110b083d2..b1dd04dd97 100644 --- a/packages/paste-core/components/progress-steps/src/ProgressStepCurrent.tsx +++ b/packages/paste-core/components/progress-steps/src/ProgressStepCurrent.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; -import {ProgressCurrentIcon} from './icons/ProgressCurrentIcon'; -import type {ProgressStepCurrentProps} from './types'; +import { ProgressCurrentIcon } from './icons/ProgressCurrentIcon'; +import type { ProgressStepCurrentProps } from './types'; export const ProgressStepCurrent = React.forwardRef( - ({element = 'PROGRESS_STEP_CURRENT', as = 'div', children, i18nCurrentLabel = 'Current', ...props}, ref) => { + ({ element = 'PROGRESS_STEP_CURRENT', as = 'div', children, i18nCurrentLabel = 'Current', ...props }, ref) => { return (
    @@ -40,6 +40,6 @@ export const ProgressStepCurrent = React.forwardRef
    ); - } + }, ); ProgressStepCurrent.displayName = 'ProgressStepCurrent'; diff --git a/packages/paste-core/components/progress-steps/src/ProgressStepError.tsx b/packages/paste-core/components/progress-steps/src/ProgressStepError.tsx index 2f3af636dc..b2be1d4af9 100644 --- a/packages/paste-core/components/progress-steps/src/ProgressStepError.tsx +++ b/packages/paste-core/components/progress-steps/src/ProgressStepError.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; -import {ProgressErrorIcon} from './icons/ProgressErrorIcon'; -import type {ProgressStepErrorProps} from './types'; +import { ProgressErrorIcon } from './icons/ProgressErrorIcon'; +import type { ProgressStepErrorProps } from './types'; export const ProgressStepError = React.forwardRef( - ({element = 'PROGRESS_STEP_ERROR', as = 'div', children, i18nErrorLabel = 'Error', ...props}, ref) => { + ({ element = 'PROGRESS_STEP_ERROR', as = 'div', children, i18nErrorLabel = 'Error', ...props }, ref) => { return (
    @@ -39,6 +39,6 @@ export const ProgressStepError = React.forwardRef
    ); - } + }, ); ProgressStepError.displayName = 'ProgressStepError'; diff --git a/packages/paste-core/components/progress-steps/src/ProgressStepIncomplete.tsx b/packages/paste-core/components/progress-steps/src/ProgressStepIncomplete.tsx index a9c5d52857..03067802f7 100644 --- a/packages/paste-core/components/progress-steps/src/ProgressStepIncomplete.tsx +++ b/packages/paste-core/components/progress-steps/src/ProgressStepIncomplete.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; -import {ProgressIncompleteIcon} from './icons/ProgressIncompleteIcon'; -import type {ProgressStepIncompleteProps} from './types'; +import { ProgressIncompleteIcon } from './icons/ProgressIncompleteIcon'; +import type { ProgressStepIncompleteProps } from './types'; export const ProgressStepIncomplete = React.forwardRef( ( @@ -14,7 +14,7 @@ export const ProgressStepIncomplete = React.forwardRef { return (
    @@ -40,9 +40,9 @@ export const ProgressStepIncomplete = React.forwardRef @@ -51,6 +51,6 @@ export const ProgressStepIncomplete = React.forwardRef
    ); - } + }, ); ProgressStepIncomplete.displayName = 'ProgressStepIncomplete'; diff --git a/packages/paste-core/components/progress-steps/src/ProgressStepSeparator.tsx b/packages/paste-core/components/progress-steps/src/ProgressStepSeparator.tsx index c3a9317b60..ee11712b13 100644 --- a/packages/paste-core/components/progress-steps/src/ProgressStepSeparator.tsx +++ b/packages/paste-core/components/progress-steps/src/ProgressStepSeparator.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; -import {ProgressStepsContext} from './ProgressStepsContext'; +import { ProgressStepsContext } from './ProgressStepsContext'; const VerticalStyles: BoxProps = { borderLeftWidth: 'borderWidth20', @@ -26,8 +26,8 @@ export interface ProgressStepSeparatorProps { } export const ProgressStepSeparator = React.forwardRef( - ({element = 'PROGRESS_STEP_SEPARATOR', ...props}, ref) => { - const {orientation} = React.useContext(ProgressStepsContext); + ({ element = 'PROGRESS_STEP_SEPARATOR', ...props }, ref) => { + const { orientation } = React.useContext(ProgressStepsContext); return ( ); - } + }, ); ProgressStepSeparator.displayName = 'ProgressStepSeparator'; diff --git a/packages/paste-core/components/progress-steps/src/ProgressSteps.tsx b/packages/paste-core/components/progress-steps/src/ProgressSteps.tsx index 99874eee0a..bfaf9e09f6 100644 --- a/packages/paste-core/components/progress-steps/src/ProgressSteps.tsx +++ b/packages/paste-core/components/progress-steps/src/ProgressSteps.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; -import type {Orientation} from './types'; -import {ProgressStepsContext} from './ProgressStepsContext'; +import type { Orientation } from './types'; +import { ProgressStepsContext } from './ProgressStepsContext'; const VerticalStyles: BoxProps = { flexDirection: 'column', @@ -23,9 +23,9 @@ export interface ProgressStepsProps extends Omit( - ({element = 'PROGRESS_STEPS', orientation = 'horizontal', ...props}, ref) => { + ({ element = 'PROGRESS_STEPS', orientation = 'horizontal', ...props }, ref) => { return ( - + ); - } + }, ); ProgressSteps.displayName = 'ProgressSteps'; diff --git a/packages/paste-core/components/progress-steps/src/ProgressStepsContext.tsx b/packages/paste-core/components/progress-steps/src/ProgressStepsContext.tsx index c3ea2dca5d..515a1b49f9 100644 --- a/packages/paste-core/components/progress-steps/src/ProgressStepsContext.tsx +++ b/packages/paste-core/components/progress-steps/src/ProgressStepsContext.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import type {Orientation} from './types'; +import type { Orientation } from './types'; interface ProgressStepsState { orientation: Orientation; diff --git a/packages/paste-core/components/progress-steps/src/icons/ProgressCurrentIcon.tsx b/packages/paste-core/components/progress-steps/src/icons/ProgressCurrentIcon.tsx index de60ad18d9..744d7456ae 100644 --- a/packages/paste-core/components/progress-steps/src/icons/ProgressCurrentIcon.tsx +++ b/packages/paste-core/components/progress-steps/src/icons/ProgressCurrentIcon.tsx @@ -2,9 +2,9 @@ * This file was automatically generated with @twilio-labs/svg-to-react */ import * as React from 'react'; -import {useUID} from '@twilio-paste/uid-library'; -import {IconWrapper} from '@twilio-paste/icons/esm/helpers/IconWrapper'; -import type {IconWrapperProps} from '@twilio-paste/icons/esm/helpers/IconWrapper'; +import { useUID } from '@twilio-paste/uid-library'; +import { IconWrapper } from '@twilio-paste/icons/esm/helpers/IconWrapper'; +import type { IconWrapperProps } from '@twilio-paste/icons/esm/helpers/IconWrapper'; export interface ProgressCurrentIconProps extends IconWrapperProps { title?: string; @@ -12,7 +12,7 @@ export interface ProgressCurrentIconProps extends IconWrapperProps { } const ProgressCurrentIcon = React.forwardRef( - ({as, display, element = 'ICON', size, color, title, decorative}, ref) => { + ({ as, display, element = 'ICON', size, color, title, decorative }, ref) => { const titleId = `ProgressCurrentIcon-${useUID()}`; if (!decorative && title == null) { @@ -41,8 +41,8 @@ const ProgressCurrentIcon = React.forwardRef ); - } + }, ); ProgressCurrentIcon.displayName = 'ProgressCurrentIcon'; -export {ProgressCurrentIcon}; +export { ProgressCurrentIcon }; diff --git a/packages/paste-core/components/progress-steps/src/icons/ProgressErrorIcon.tsx b/packages/paste-core/components/progress-steps/src/icons/ProgressErrorIcon.tsx index d8c57fb4a3..466189eba5 100644 --- a/packages/paste-core/components/progress-steps/src/icons/ProgressErrorIcon.tsx +++ b/packages/paste-core/components/progress-steps/src/icons/ProgressErrorIcon.tsx @@ -2,9 +2,9 @@ * This file was automatically generated with @twilio-labs/svg-to-react */ import * as React from 'react'; -import {useUID} from '@twilio-paste/uid-library'; -import {IconWrapper} from '@twilio-paste/icons/esm/helpers/IconWrapper'; -import type {IconWrapperProps} from '@twilio-paste/icons/esm/helpers/IconWrapper'; +import { useUID } from '@twilio-paste/uid-library'; +import { IconWrapper } from '@twilio-paste/icons/esm/helpers/IconWrapper'; +import type { IconWrapperProps } from '@twilio-paste/icons/esm/helpers/IconWrapper'; export interface ProgressErrorIconProps extends IconWrapperProps { title?: string; @@ -12,7 +12,7 @@ export interface ProgressErrorIconProps extends IconWrapperProps { } const ProgressErrorIcon = React.forwardRef( - ({as, display, element = 'ICON', size, color, title, decorative}, ref) => { + ({ as, display, element = 'ICON', size, color, title, decorative }, ref) => { const titleId = `ProgressErrorIcon-${useUID()}`; if (!decorative && title == null) { @@ -41,8 +41,8 @@ const ProgressErrorIcon = React.forwardRef( ); - } + }, ); ProgressErrorIcon.displayName = 'ProgressErrorIcon'; -export {ProgressErrorIcon}; +export { ProgressErrorIcon }; diff --git a/packages/paste-core/components/progress-steps/src/icons/ProgressIncompleteIcon.tsx b/packages/paste-core/components/progress-steps/src/icons/ProgressIncompleteIcon.tsx index 74bf0e4e3f..6bb37b6751 100644 --- a/packages/paste-core/components/progress-steps/src/icons/ProgressIncompleteIcon.tsx +++ b/packages/paste-core/components/progress-steps/src/icons/ProgressIncompleteIcon.tsx @@ -2,9 +2,9 @@ * This file was automatically generated with @twilio-labs/svg-to-react */ import * as React from 'react'; -import {useUID} from '@twilio-paste/uid-library'; -import {IconWrapper} from '@twilio-paste/icons/esm/helpers/IconWrapper'; -import type {IconWrapperProps} from '@twilio-paste/icons/esm/helpers/IconWrapper'; +import { useUID } from '@twilio-paste/uid-library'; +import { IconWrapper } from '@twilio-paste/icons/esm/helpers/IconWrapper'; +import type { IconWrapperProps } from '@twilio-paste/icons/esm/helpers/IconWrapper'; export interface ProgressIncompleteIconProps extends IconWrapperProps { title?: string; @@ -12,7 +12,7 @@ export interface ProgressIncompleteIconProps extends IconWrapperProps { } const ProgressIncompleteIcon = React.forwardRef( - ({as, display, element = 'ICON', size, color, title, decorative}, ref) => { + ({ as, display, element = 'ICON', size, color, title, decorative }, ref) => { const titleId = `ProgressIncompleteIcon-${useUID()}`; if (!decorative && title == null) { @@ -41,8 +41,8 @@ const ProgressIncompleteIcon = React.forwardRef ); - } + }, ); ProgressIncompleteIcon.displayName = 'ProgressIncompleteIcon'; -export {ProgressIncompleteIcon}; +export { ProgressIncompleteIcon }; diff --git a/packages/paste-core/components/progress-steps/src/types.ts b/packages/paste-core/components/progress-steps/src/types.ts index 5cc8b574bd..582995f3e3 100644 --- a/packages/paste-core/components/progress-steps/src/types.ts +++ b/packages/paste-core/components/progress-steps/src/types.ts @@ -1,5 +1,5 @@ -import type {BoxProps} from '@twilio-paste/box'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import type { BoxProps } from '@twilio-paste/box'; +import type { HTMLPasteProps } from '@twilio-paste/types'; type BaseStepProps = Pick & { children: NonNullable; diff --git a/packages/paste-core/components/progress-steps/stories/customization.stories.tsx b/packages/paste-core/components/progress-steps/stories/customization.stories.tsx index 26c2697672..560d41eb5b 100644 --- a/packages/paste-core/components/progress-steps/stories/customization.stories.tsx +++ b/packages/paste-core/components/progress-steps/stories/customization.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {useTheme} from '@twilio-paste/theme'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import type { StoryFn } from '@storybook/react'; +import { useTheme } from '@twilio-paste/theme'; +import { CustomizationProvider } from '@twilio-paste/customization'; import { ProgressSteps, @@ -18,7 +18,7 @@ export default { component: ProgressSteps, }; -export const DefaultElementNames: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const DefaultElementNames: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( { +export const CustomElementNames: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( { const renderRadioButton = (props: Partial = {}): ReturnType => @@ -13,7 +13,7 @@ describe('RadioButton', () => { it('assigns attributes as expected', () => { renderRadioButton(); - const radio = screen.getByRole('radio', {name: 'foo'}); + const radio = screen.getByRole('radio', { name: 'foo' }); expect(radio).toHaveAttribute('id'); expect(radio).toHaveAttribute('name', 'foo'); @@ -22,74 +22,74 @@ describe('RadioButton', () => { it('renders children visibly into document as an input label', () => { renderRadioButton(); - const {labels} = screen.getByRole('radio', {name: 'foo'}); + const { labels } = screen.getByRole('radio', { name: 'foo' }); expect(labels).toHaveLength(1); expect(labels?.[0]).toHaveTextContent('foo'); }); it('should assign an id when provided', () => { - renderRadioButton({id: 'foo'}); - const radio = screen.getByRole('radio', {name: 'foo'}); + renderRadioButton({ id: 'foo' }); + const radio = screen.getByRole('radio', { name: 'foo' }); expect(radio).toHaveAttribute('id', 'foo'); }); it('renders as invalid', () => { - renderRadioButton({hasError: true}); - const radio = screen.getByRole('radio', {name: 'foo'}); + renderRadioButton({ hasError: true }); + const radio = screen.getByRole('radio', { name: 'foo' }); expect(radio).toHaveAttribute('aria-invalid', 'true'); }); it('renders as checked (controlled)', () => { - renderRadioButton({checked: true, onChange: () => {}}); - const radio = screen.getByRole('radio', {name: 'foo'}); + renderRadioButton({ checked: true, onChange: () => {} }); + const radio = screen.getByRole('radio', { name: 'foo' }); expect(radio).toBeChecked(); }); it('renders as checked (uncontrolled)', () => { - renderRadioButton({defaultChecked: true}); - const radio = screen.getByRole('radio', {name: 'foo'}); + renderRadioButton({ defaultChecked: true }); + const radio = screen.getByRole('radio', { name: 'foo' }); expect(radio).toBeChecked(); }); it('renders as disabled', () => { - renderRadioButton({disabled: true}); - const radio = screen.getByRole('radio', {name: 'foo'}); + renderRadioButton({ disabled: true }); + const radio = screen.getByRole('radio', { name: 'foo' }); expect(radio).toBeDisabled(); }); describe('customization', () => { it('renders an element data attribute', () => { - const {container} = renderRadioButton(); + const { container } = renderRadioButton(); const styledRadioLabel = container.querySelector('label'); expect(styledRadioLabel).toHaveAttribute('data-paste-element', 'RADIO_BUTTON'); }); it('renders a custom element data attribute', () => { - const {container} = renderRadioButton({element: 'MY_RADIO_BUTTON'}); + const { container } = renderRadioButton({ element: 'MY_RADIO_BUTTON' }); const styledRadioLabel = container.querySelector('label'); expect(styledRadioLabel).toHaveAttribute('data-paste-element', 'MY_RADIO_BUTTON'); }); it('renders custom styling', () => { - const {container} = render( + const { container } = render( foo - + , ); const styledRadioLabel = container.querySelector('label'); @@ -97,17 +97,17 @@ describe('RadioButton', () => { }); it('renders custom styling to a custom element', () => { - const {container} = render( + const { container } = render( foo - + , ); const styledRadioLabel = container.querySelector('label'); @@ -127,7 +127,7 @@ describe('RadioButtonGroup', () => { it('renders a legend visibly into document', () => { render(); - const legend = screen.getByRole('group', {name: /This is some legend text/}).querySelector('legend'); + const legend = screen.getByRole('group', { name: /This is some legend text/ }).querySelector('legend'); expect(legend).toBeVisible(); expect(legend).toBeInstanceOf(HTMLLegendElement); @@ -143,14 +143,14 @@ describe('RadioButtonGroup', () => { it('renders with an assigned value', () => { render(); - const radio = screen.getByRole('radio', {name: 'First'}); + const radio = screen.getByRole('radio', { name: 'First' }); expect(radio).toBeChecked(); }); it('renders with an assigned name', () => { render(); - const radio = screen.getByRole('radio', {name: 'First'}); + const radio = screen.getByRole('radio', { name: 'First' }); expect(radio).toHaveAttribute('name', 'lolwut'); }); @@ -194,8 +194,8 @@ describe('RadioButtonGroup', () => { ['onBlur', 'blur'], ])('assigns the %s event handler as expected', (propName, eventType) => { const spy = jest.fn(); - render(); - const radio = screen.getByRole('radio', {name: 'First'}); + render(); + const radio = screen.getByRole('radio', { name: 'First' }); fireEvent[eventType].call(null, radio); expect(spy).toHaveBeenCalledTimes(1); @@ -226,7 +226,7 @@ describe('RadioButtonGroup', () => { ); }; - const {getByTestId} = render(); + const { getByTestId } = render(); expect((getByTestId('radio-button') as HTMLInputElement).checked).toBe(false); expect((getByTestId('radio-button1') as HTMLInputElement).checked).toBe(true); @@ -255,7 +255,7 @@ describe('RadioButtonGroup', () => { ); }; - const {getByTestId} = render(); + const { getByTestId } = render(); expect((getByTestId('radio-button') as HTMLInputElement).checked).toBe(false); expect((getByTestId('radio-button1') as HTMLInputElement).checked).toBe(true); @@ -288,11 +288,11 @@ describe('RadioButtonGroup', () => { - +     , ); const radioBtnGroup = screen.getByRole('group'); @@ -304,11 +304,11 @@ describe('RadioButtonGroup', () => { - + , ); const radio = screen.getByRole('group'); diff --git a/packages/paste-core/components/radio-button-group/build.js b/packages/paste-core/components/radio-button-group/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/radio-button-group/build.js +++ b/packages/paste-core/components/radio-button-group/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/radio-button-group/src/HiddenRadio.tsx b/packages/paste-core/components/radio-button-group/src/HiddenRadio.tsx index 31a8a32af9..59ae7f666f 100644 --- a/packages/paste-core/components/radio-button-group/src/HiddenRadio.tsx +++ b/packages/paste-core/components/radio-button-group/src/HiddenRadio.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; +import { Box } from '@twilio-paste/box'; -import type {RadioButtonProps} from './RadioButton'; +import type { RadioButtonProps } from './RadioButton'; type HiddenRadioProps = Pick; export const HiddenRadio = React.forwardRef((props, ref) => ( diff --git a/packages/paste-core/components/radio-button-group/src/RadioButton.tsx b/packages/paste-core/components/radio-button-group/src/RadioButton.tsx index 62826a6be6..e18b1f0250 100644 --- a/packages/paste-core/components/radio-button-group/src/RadioButton.tsx +++ b/packages/paste-core/components/radio-button-group/src/RadioButton.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import {useUID} from '@twilio-paste/uid-library'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import {Button} from '@twilio-paste/button'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { useUID } from '@twilio-paste/uid-library'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import { Button } from '@twilio-paste/button'; +import type { HTMLPasteProps } from '@twilio-paste/types'; -import {RadioButtonContext} from './RadioButtonContext'; -import {HiddenRadio} from './HiddenRadio'; -import type {HiddenRadioState} from './HiddenRadio'; -import {StyledRadioButtonLabel} from './StyledRadioButtonLabel'; +import { RadioButtonContext } from './RadioButtonContext'; +import { HiddenRadio } from './HiddenRadio'; +import type { HiddenRadioState } from './HiddenRadio'; +import { StyledRadioButtonLabel } from './StyledRadioButtonLabel'; export interface RadioButtonProps extends HTMLPasteProps<'input'> { id?: string; @@ -48,11 +48,11 @@ const RadioButton = React.forwardRef( children, ...props }, - ref + ref, ) => { if (checked != null && defaultChecked != null) { throw new Error( - `[Paste RadioButton] Do not provide both 'defaultChecked' and 'checked' to RadioButton at the same time. Please consider if you want this component to be controlled or uncontrolled.` + `[Paste RadioButton] Do not provide both 'defaultChecked' and 'checked' to RadioButton at the same time. Please consider if you want this component to be controlled or uncontrolled.`, ); } @@ -69,7 +69,7 @@ const RadioButton = React.forwardRef( radioGroupContext.onChange(event); } }, - [onChange, radioGroupContext.onChange] + [onChange, radioGroupContext.onChange], ); const state: HiddenRadioState = { @@ -115,9 +115,9 @@ const RadioButton = React.forwardRef(     ); - } + }, ); RadioButton.displayName = 'RadioButton'; -export {RadioButton}; +export { RadioButton }; diff --git a/packages/paste-core/components/radio-button-group/src/RadioButtonContext.tsx b/packages/paste-core/components/radio-button-group/src/RadioButtonContext.tsx index 6e0c31497b..4ad680f505 100644 --- a/packages/paste-core/components/radio-button-group/src/RadioButtonContext.tsx +++ b/packages/paste-core/components/radio-button-group/src/RadioButtonContext.tsx @@ -19,4 +19,4 @@ const RadioButtonContext = React.createContext({ attached: false, }); -export {RadioButtonContext}; +export { RadioButtonContext }; diff --git a/packages/paste-core/components/radio-button-group/src/RadioButtonGroup.tsx b/packages/paste-core/components/radio-button-group/src/RadioButtonGroup.tsx index d14f1da089..9385692fb7 100644 --- a/packages/paste-core/components/radio-button-group/src/RadioButtonGroup.tsx +++ b/packages/paste-core/components/radio-button-group/src/RadioButtonGroup.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {InlineControlGroupProps} from '@twilio-paste/inline-control-group'; -import {HelpText} from '@twilio-paste/help-text'; -import {Label} from '@twilio-paste/label'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { InlineControlGroupProps } from '@twilio-paste/inline-control-group'; +import { HelpText } from '@twilio-paste/help-text'; +import { Label } from '@twilio-paste/label'; -import {RadioButtonContext} from './RadioButtonContext'; -import {AttachedRadioButtonGroupWrapper, UnattachedRadioButtonGroupWrapper} from './StyledRadioButtonGroupWrapper'; +import { RadioButtonContext } from './RadioButtonContext'; +import { AttachedRadioButtonGroupWrapper, UnattachedRadioButtonGroupWrapper } from './StyledRadioButtonGroupWrapper'; export interface RadioButtonGroupProps extends InlineControlGroupProps { name: string; @@ -32,7 +32,7 @@ const RadioButtonGroup = React.forwardRef { const onChangeHandler = React.useCallback( (event: React.ChangeEvent): void => { @@ -40,7 +40,7 @@ const RadioButtonGroup = React.forwardRef { @@ -93,9 +93,9 @@ const RadioButtonGroup = React.forwardRef ); - } + }, ); RadioButtonGroup.displayName = 'RadioButtonGroup'; -export {RadioButtonGroup}; +export { RadioButtonGroup }; diff --git a/packages/paste-core/components/radio-button-group/src/StyledRadioButtonGroupWrapper.tsx b/packages/paste-core/components/radio-button-group/src/StyledRadioButtonGroupWrapper.tsx index 14ec24b21d..754ced41cb 100644 --- a/packages/paste-core/components/radio-button-group/src/StyledRadioButtonGroupWrapper.tsx +++ b/packages/paste-core/components/radio-button-group/src/StyledRadioButtonGroupWrapper.tsx @@ -1,4 +1,4 @@ -import {styled, css} from '@twilio-paste/styling-library'; +import { styled, css } from '@twilio-paste/styling-library'; export const AttachedRadioButtonGroupWrapper = styled.span( css({ @@ -31,7 +31,7 @@ export const AttachedRadioButtonGroupWrapper = styled.span( borderBottomLeftRadius: 0, }, }, - }) + }), ); export const UnattachedRadioButtonGroupWrapper = styled.span( @@ -42,5 +42,5 @@ export const UnattachedRadioButtonGroupWrapper = styled.span( '& > label:not(:first-of-type)': { marginLeft: 'space40', }, - }) + }), ); diff --git a/packages/paste-core/components/radio-button-group/src/StyledRadioButtonLabel.tsx b/packages/paste-core/components/radio-button-group/src/StyledRadioButtonLabel.tsx index 31e941d39f..d6909e4ff6 100644 --- a/packages/paste-core/components/radio-button-group/src/StyledRadioButtonLabel.tsx +++ b/packages/paste-core/components/radio-button-group/src/StyledRadioButtonLabel.tsx @@ -1,5 +1,5 @@ -import {styled, css} from '@twilio-paste/styling-library'; -import {ButtonToggleStyles, DestructiveSecondaryButtonToggleStyles} from '@twilio-paste/button'; +import { styled, css } from '@twilio-paste/styling-library'; +import { ButtonToggleStyles, DestructiveSecondaryButtonToggleStyles } from '@twilio-paste/button'; export const StyledRadioButtonLabel = styled.label( css({ @@ -43,5 +43,5 @@ export const StyledRadioButtonLabel = styled.label( ...DestructiveSecondaryButtonToggleStyles._disabled, zIndex: 0, }, - }) + }), ); diff --git a/packages/paste-core/components/radio-button-group/stories/index.stories.tsx b/packages/paste-core/components/radio-button-group/stories/index.stories.tsx index 4e66121638..dba5458650 100644 --- a/packages/paste-core/components/radio-button-group/stories/index.stories.tsx +++ b/packages/paste-core/components/radio-button-group/stories/index.stories.tsx @@ -1,19 +1,19 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {useUID} from '@twilio-paste/uid-library'; -import {Anchor} from '@twilio-paste/anchor'; -import {Text} from '@twilio-paste/text'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {useTheme} from '@twilio-paste/theme'; +import type { StoryFn } from '@storybook/react'; +import { useUID } from '@twilio-paste/uid-library'; +import { Anchor } from '@twilio-paste/anchor'; +import { Text } from '@twilio-paste/text'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { useTheme } from '@twilio-paste/theme'; -import {RadioButton, RadioButtonGroup} from '../src'; -import type {RadioButtonGroupProps} from '../src'; +import { RadioButton, RadioButtonGroup } from '../src'; +import type { RadioButtonGroupProps } from '../src'; // eslint-disable-next-line import/no-default-export export default { title: 'Components/RadioButtonGroup', component: RadioButtonGroup, - subcomponents: {RadioButton}, + subcomponents: { RadioButton }, }; type RadioButtonGroupStoryProps = Partial>; diff --git a/packages/paste-core/components/radio-group/__tests__/radio.test.tsx b/packages/paste-core/components/radio-group/__tests__/radio.test.tsx index f961db65e1..5bdb1ef210 100644 --- a/packages/paste-core/components/radio-group/__tests__/radio.test.tsx +++ b/packages/paste-core/components/radio-group/__tests__/radio.test.tsx @@ -1,23 +1,23 @@ import * as React from 'react'; -import {screen, render, fireEvent} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import type {PasteCustomCSS} from '@twilio-paste/customization'; -import {matchers} from '@emotion/jest'; +import { screen, render, fireEvent } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import type { PasteCustomCSS } from '@twilio-paste/customization'; +import { matchers } from '@emotion/jest'; -import {Radio, RadioGroup} from '../src'; +import { Radio, RadioGroup } from '../src'; expect.extend(matchers); -const getCustomizationStyles = (element = 'RADIO'): {[key: string]: PasteCustomCSS} => ({ - [`${element}_GROUP`]: {padding: 'space60'}, - [`${element}_GROUP_SET`]: {marginLeft: 'space60'}, - [`${element}_GROUP_FIELD`]: {marginBottom: 'space60'}, - [`${element}_GROUP_ERROR_TEXT_WRAPPER`]: {marginBottom: 'space60'}, - [`${element}`]: {padding: 'space30'}, - [`${element}_CONTROL`]: {borderRadius: 'borderRadius20'}, - [`${element}_CONTROL_CIRCLE`]: {color: 'colorText'}, - [`${element}_LABEL_TEXT`]: {color: 'colorTextNeutral'}, - [`${element}_HELP_TEXT_WRAPPER`]: {marginBottom: 'space60'}, +const getCustomizationStyles = (element = 'RADIO'): { [key: string]: PasteCustomCSS } => ({ + [`${element}_GROUP`]: { padding: 'space60' }, + [`${element}_GROUP_SET`]: { marginLeft: 'space60' }, + [`${element}_GROUP_FIELD`]: { marginBottom: 'space60' }, + [`${element}_GROUP_ERROR_TEXT_WRAPPER`]: { marginBottom: 'space60' }, + [`${element}`]: { padding: 'space30' }, + [`${element}_CONTROL`]: { borderRadius: 'borderRadius20' }, + [`${element}_CONTROL_CIRCLE`]: { color: 'colorText' }, + [`${element}_LABEL_TEXT`]: { color: 'colorTextNeutral' }, + [`${element}_HELP_TEXT_WRAPPER`]: { marginBottom: 'space60' }, }); const NOOP = (): void => {}; @@ -41,7 +41,7 @@ describe('Radio', () => { render( foo - + , ); const radio = screen.getByRole('radio'); @@ -57,61 +57,61 @@ describe('Radio', () => { }); it('should render as invalid', () => { - const {getByRole} = render( + const { getByRole } = render( foo - + , ); expect(getByRole('radio').getAttribute('aria-invalid')).toBeTruthy(); }); it('should render as checked (controlled)', () => { - const {getByLabelText} = render( + const { getByLabelText } = render( foo - + , ); expect((getByLabelText('foo') as HTMLInputElement).checked).toBeTruthy(); }); it('should render as checked (uncontrolled)', () => { - const {getByLabelText} = render( + const { getByLabelText } = render( foo - + , ); expect((getByLabelText('foo') as HTMLInputElement).checked).toBeTruthy(); }); it('should render as disabled', () => { - const {getByLabelText} = render( + const { getByLabelText } = render( foo - + , ); expect((getByLabelText('foo') as HTMLInputElement).disabled).toBeTruthy(); }); it('should render an id', () => { - const {getByLabelText} = render(foo); + const { getByLabelText } = render(foo); expect(getByLabelText('foo').id).toBe('foo'); }); it('should render a value', () => { - const {getByLabelText} = render(foo); + const { getByLabelText } = render(foo); expect((getByLabelText('foo') as HTMLInputElement).value).toBe('foo'); }); it('should render a name', () => { - const {getByLabelText} = render(foo); + const { getByLabelText } = render(foo); expect((getByLabelText('foo') as HTMLInputElement).name).toBe('foo'); }); it('should render aria attributes', () => { - const {getByLabelText} = render( + const { getByLabelText } = render( foo - + , ); expect(getByLabelText('foo').getAttribute('aria-label')).toBe('foo'); expect(getByLabelText('foo').getAttribute('aria-labelledby')).toBe('bar'); @@ -120,10 +120,10 @@ describe('Radio', () => { it('renders a helpText message when helpText prop is present', () => { const helpText = 'I am a helpText message'; - const {getByText} = render( + const { getByText } = render( foo - + , ); expect(getByText(helpText)).toBeDefined(); }); @@ -131,19 +131,19 @@ describe('Radio', () => { describe('Radio Group', () => { it('should render', () => { - const {container} = render( + const { container } = render( foo - + , ); expect(container.querySelector('fieldset')).not.toBeNull(); }); it('should render a legend', () => { - const {getByText} = render( + const { getByText } = render( foo - + , ); expect(getByText('This is a group legend')).not.toBeNull(); }); @@ -152,7 +152,7 @@ describe('Radio Group', () => { render( foo - + , ); const fieldset = screen.getByRole('group'); @@ -162,39 +162,39 @@ describe('Radio Group', () => { }); it('should render a value', () => { - const {getByRole} = render( + const { getByRole } = render( foo - + , ); expect((getByRole('radio') as HTMLInputElement).value).toBe('foo'); }); it('should render a name', () => { - const {getByRole} = render( + const { getByRole } = render( foo - + , ); expect((getByRole('radio') as HTMLInputElement).name).toBe(defaultProps.name); }); it('renders a helpText message when helpText prop is present', () => { const helpText = 'I am a helpText message'; - const {getByText} = render( + const { getByText } = render( foo - + , ); expect(getByText(helpText)).toBeDefined(); }); it('renders an errorText message when errorText prop is present', () => { const errorText = 'I am an errorText message'; - const {getByText} = render( + const { getByText } = render( foo - + , ); expect(getByText(errorText)).toBeDefined(); }); @@ -204,7 +204,7 @@ describe('Radio Group', () => { render( foo - + , ); const fieldset = screen.getByRole('group'); @@ -217,7 +217,7 @@ describe('Radio Group', () => { render( foo - + , ); const fieldset = screen.getByRole('group'); @@ -234,7 +234,7 @@ describe('Radio event handlers', () => { const onFocusMock: jest.Mock = jest.fn(); const onBlurMock: jest.Mock = jest.fn(); - const {getByTestId} = render( + const { getByTestId } = render( { onBlur={onBlurMock} > foo - + , ); fireEvent.click(getByTestId('radio-button')); @@ -263,7 +263,7 @@ describe('Radio Group event handlers', () => { const onFocusMock: jest.Mock = jest.fn(); const onBlurMock: jest.Mock = jest.fn(); - const {getByTestId} = render( + const { getByTestId } = render( { bar - + , ); fireEvent.click(getByTestId('radio-button')); @@ -313,7 +313,7 @@ describe('Radio Group event handlers', () => { ); }; - const {getByTestId} = render(); + const { getByTestId } = render(); expect((getByTestId('radio-button') as HTMLInputElement).checked).toBe(false); expect((getByTestId('radio-button1') as HTMLInputElement).checked).toBe(true); @@ -342,7 +342,7 @@ describe('Radio Group event handlers', () => { ); }; - const {getByTestId} = render(); + const { getByTestId } = render(); expect((getByTestId('radio-button') as HTMLInputElement).checked).toBe(false); expect((getByTestId('radio-button1') as HTMLInputElement).checked).toBe(true); @@ -377,7 +377,7 @@ describe('Radio Group event handlers', () => { ); }; - const {getByTestId} = render(); + const { getByTestId } = render(); expect((getByTestId('radio-button') as HTMLInputElement).checked).toBe(false); expect((getByTestId('radio-button1') as HTMLInputElement).checked).toBe(true); @@ -386,12 +386,12 @@ describe('Radio Group event handlers', () => { describe('Customization', () => { it('should add default element attribute to Radio', () => { - const {container} = render( + const { container } = render( foo - + , ); expect(container.querySelector('[data-paste-element="RADIO_GROUP"]')).toBeInTheDocument(); @@ -406,12 +406,12 @@ describe('Customization', () => { }); it('should add custom default element attribute to Radio', () => { - const {container} = render( + const { container } = render( foo - + , ); expect(container.querySelector('[data-paste-element="MY_RADIO_GROUP"]')).toBeInTheDocument(); @@ -426,79 +426,79 @@ describe('Customization', () => { }); it('should add custom styling to a default Radio', () => { - const {container} = render( + const { container } = render( foo - + , ); expect(container.querySelector('[data-paste-element="RADIO_GROUP"]')).toHaveStyleRule('padding', '1.25rem'); expect(container.querySelector('[data-paste-element="RADIO_GROUP_SET"]')).toHaveStyleRule('margin-left', '1.25rem'); expect(container.querySelector('[data-paste-element="RADIO_GROUP_FIELD"]')).toHaveStyleRule( 'margin-bottom', - '1.25rem' + '1.25rem', ); expect(container.querySelector('[data-paste-element="RADIO_GROUP_ERROR_TEXT_WRAPPER"]')).toHaveStyleRule( 'margin-bottom', - '1.25rem' + '1.25rem', ); expect(container.querySelector('[data-paste-element="RADIO"]')).toHaveStyleRule('padding', '0.5rem'); expect(container.querySelector('[data-paste-element="RADIO_CONTROL"]')).toHaveStyleRule('border-radius', '4px'); expect(container.querySelector('[data-paste-element="RADIO_CONTROL_CIRCLE"]')).toHaveStyleRule( 'color', - 'rgb(18, 28, 45)' + 'rgb(18, 28, 45)', ); expect(container.querySelector('[data-paste-element="RADIO_LABEL_TEXT"]')).toHaveStyleRule( 'color', - 'rgb(0, 20, 137)' + 'rgb(0, 20, 137)', ); expect(container.querySelector('[data-paste-element="RADIO_HELP_TEXT_WRAPPER"]')).toHaveStyleRule( 'margin-bottom', - '1.25rem' + '1.25rem', ); }); it('should add custom styling to a custom element Radio', () => { - const {container} = render( + const { container } = render( foo - + , ); expect(container.querySelector('[data-paste-element="MY_RADIO_GROUP"]')).toHaveStyleRule('padding', '1.25rem'); expect(container.querySelector('[data-paste-element="MY_RADIO_GROUP_SET"]')).toHaveStyleRule( 'margin-left', - '1.25rem' + '1.25rem', ); expect(container.querySelector('[data-paste-element="MY_RADIO_GROUP_FIELD"]')).toHaveStyleRule( 'margin-bottom', - '1.25rem' + '1.25rem', ); expect(container.querySelector('[data-paste-element="MY_RADIO_GROUP_ERROR_TEXT_WRAPPER"]')).toHaveStyleRule( 'margin-bottom', - '1.25rem' + '1.25rem', ); expect(container.querySelector('[data-paste-element="MY_RADIO"]')).toHaveStyleRule('padding', '0.5rem'); expect(container.querySelector('[data-paste-element="MY_RADIO_CONTROL"]')).toHaveStyleRule('border-radius', '4px'); expect(container.querySelector('[data-paste-element="MY_RADIO_CONTROL_CIRCLE"]')).toHaveStyleRule( 'color', - 'rgb(18, 28, 45)' + 'rgb(18, 28, 45)', ); expect(container.querySelector('[data-paste-element="MY_RADIO_LABEL_TEXT"]')).toHaveStyleRule( 'color', - 'rgb(0, 20, 137)' + 'rgb(0, 20, 137)', ); expect(container.querySelector('[data-paste-element="MY_RADIO_HELP_TEXT_WRAPPER"]')).toHaveStyleRule( 'margin-bottom', - '1.25rem' + '1.25rem', ); }); }); diff --git a/packages/paste-core/components/radio-group/build.js b/packages/paste-core/components/radio-group/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/radio-group/build.js +++ b/packages/paste-core/components/radio-group/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/radio-group/src/Radio.tsx b/packages/paste-core/components/radio-group/src/Radio.tsx index a2324ce774..37bdd20a23 100644 --- a/packages/paste-core/components/radio-group/src/Radio.tsx +++ b/packages/paste-core/components/radio-group/src/Radio.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; -import {useUID} from '@twilio-paste/uid-library'; -import {Box} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; +import { useUID } from '@twilio-paste/uid-library'; +import { Box } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; import { BaseRadioCheckboxControl, BaseRadioCheckboxLabel, BaseRadioCheckboxLabelText, BaseRadioCheckboxHelpText, } from '@twilio-paste/base-radio-checkbox'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import type { HTMLPasteProps } from '@twilio-paste/types'; -import {RadioContext} from './RadioContext'; +import { RadioContext } from './RadioContext'; export interface RadioProps extends HTMLPasteProps<'input'> { id?: string; @@ -81,11 +81,11 @@ const Radio = React.forwardRef( helpText, ...props }, - ref + ref, ) => { if (checked != null && defaultChecked != null) { throw new Error( - `[Paste Radio] Do not provide both 'defaultChecked' and 'checked' to Radio at the same time. Please consider if you want this component to be controlled or uncontrolled.` + `[Paste Radio] Do not provide both 'defaultChecked' and 'checked' to Radio at the same time. Please consider if you want this component to be controlled or uncontrolled.`, ); } @@ -113,7 +113,7 @@ const Radio = React.forwardRef( setCheckedState(event.target.checked); } }, - [onChange, radioGroupContext, isControlled] + [onChange, radioGroupContext, isControlled], ); const state: HiddenRadioState = { @@ -194,9 +194,9 @@ const Radio = React.forwardRef( )}     ); - } + }, ); Radio.displayName = 'Radio'; -export {Radio, HiddenRadio, type HiddenRadioState}; +export { Radio, HiddenRadio, type HiddenRadioState }; diff --git a/packages/paste-core/components/radio-group/src/RadioContext.tsx b/packages/paste-core/components/radio-group/src/RadioContext.tsx index d88ef7f9d2..1b1c28d49a 100644 --- a/packages/paste-core/components/radio-group/src/RadioContext.tsx +++ b/packages/paste-core/components/radio-group/src/RadioContext.tsx @@ -17,4 +17,4 @@ const RadioContext = React.createContext({ onChange: () => {}, }); -export {RadioContext}; +export { RadioContext }; diff --git a/packages/paste-core/components/radio-group/src/RadioGroup.tsx b/packages/paste-core/components/radio-group/src/RadioGroup.tsx index 49f270efa7..96020474fb 100644 --- a/packages/paste-core/components/radio-group/src/RadioGroup.tsx +++ b/packages/paste-core/components/radio-group/src/RadioGroup.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {InlineControlGroup} from '@twilio-paste/inline-control-group'; -import type {InlineControlGroupProps} from '@twilio-paste/inline-control-group'; +import { InlineControlGroup } from '@twilio-paste/inline-control-group'; +import type { InlineControlGroupProps } from '@twilio-paste/inline-control-group'; -import {RadioContext} from './RadioContext'; +import { RadioContext } from './RadioContext'; export interface RadioGroupProps extends InlineControlGroupProps { name: string; @@ -24,7 +24,7 @@ const RadioGroup = React.forwardRef( i18nRequiredLabel = '(required)', ...props }, - ref + ref, ) => { const onChangeHandler = React.useCallback( (event: React.ChangeEvent): void => { @@ -32,7 +32,7 @@ const RadioGroup = React.forwardRef( onChange(event.target.value); } }, - [onChange] + [onChange], ); const contextValue = React.useMemo(() => { @@ -60,9 +60,9 @@ const RadioGroup = React.forwardRef(     ); - } + }, ); RadioGroup.displayName = 'RadioGroup'; -export {RadioGroup}; +export { RadioGroup }; diff --git a/packages/paste-core/components/radio-group/stories/customization.stories.tsx b/packages/paste-core/components/radio-group/stories/customization.stories.tsx index 7b72782caa..8aa64bf94b 100644 --- a/packages/paste-core/components/radio-group/stories/customization.stories.tsx +++ b/packages/paste-core/components/radio-group/stories/customization.stories.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {useUID} from '@twilio-paste/uid-library'; -import {Anchor} from '@twilio-paste/anchor'; -import {Text} from '@twilio-paste/text'; -import {Paragraph} from '@twilio-paste/paragraph'; -import {useTheme} from '@twilio-paste/theme'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import type { StoryFn } from '@storybook/react'; +import { useUID } from '@twilio-paste/uid-library'; +import { Anchor } from '@twilio-paste/anchor'; +import { Text } from '@twilio-paste/text'; +import { Paragraph } from '@twilio-paste/paragraph'; +import { useTheme } from '@twilio-paste/theme'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {Radio, RadioGroup} from '../src'; +import { Radio, RadioGroup } from '../src'; -export const CustomizedRadioGroup: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const CustomizedRadioGroup: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const theme = useTheme(); const [value, setValue] = React.useState('2'); const [valueSecond, setValueSecond] = React.useState('2'); @@ -18,23 +18,23 @@ export const CustomizedRadioGroup: StoryFn = (_args, {parameters: {isTestEnviron disableAnimations={isTestEnvironment} theme={theme} elements={{ - RADIO_GROUP: {padding: 'space30'}, - RADIO_GROUP_SET: {marginLeft: 'space60'}, - RADIO_GROUP_ITEM: {marginBottom: 'space60'}, - RADIO_GROUP_ERROR_TEXT_WRAPPER: {marginBottom: 'space60'}, - RADIO: {padding: 'space30'}, - RADIO_CONTROL: {borderRadius: 'borderRadius20'}, - RADIO_LABEL_TEXT: {color: 'colorTextNeutral'}, - RADIO_HELP_TEXT_WRAPPER: {marginLeft: 'space20'}, + RADIO_GROUP: { padding: 'space30' }, + RADIO_GROUP_SET: { marginLeft: 'space60' }, + RADIO_GROUP_ITEM: { marginBottom: 'space60' }, + RADIO_GROUP_ERROR_TEXT_WRAPPER: { marginBottom: 'space60' }, + RADIO: { padding: 'space30' }, + RADIO_CONTROL: { borderRadius: 'borderRadius20' }, + RADIO_LABEL_TEXT: { color: 'colorTextNeutral' }, + RADIO_HELP_TEXT_WRAPPER: { marginLeft: 'space20' }, - MY_RADIO_GROUP: {padding: 'space30'}, - MY_RADIO_GROUP_SET: {marginLeft: 'space60'}, - MY_RADIO_GROUP_ITEM: {marginBottom: 'space60'}, - MY_RADIO_GROUP_ERROR_TEXT_WRAPPER: {marginBottom: 'space60'}, - MY_RADIO: {padding: 'space30'}, - MY_RADIO_CONTROL: {borderRadius: 'borderRadius20'}, - MY_RADIO_LABEL_TEXT: {color: 'colorTextNeutral'}, - MY_RADIO_HELP_TEXT_WRAPPER: {marginLeft: 'space20'}, + MY_RADIO_GROUP: { padding: 'space30' }, + MY_RADIO_GROUP_SET: { marginLeft: 'space60' }, + MY_RADIO_GROUP_ITEM: { marginBottom: 'space60' }, + MY_RADIO_GROUP_ERROR_TEXT_WRAPPER: { marginBottom: 'space60' }, + MY_RADIO: { padding: 'space30' }, + MY_RADIO_CONTROL: { borderRadius: 'borderRadius20' }, + MY_RADIO_LABEL_TEXT: { color: 'colorTextNeutral' }, + MY_RADIO_HELP_TEXT_WRAPPER: { marginLeft: 'space20' }, }} > Using default element name: diff --git a/packages/paste-core/components/radio-group/stories/radio-controlled.stories.tsx b/packages/paste-core/components/radio-group/stories/radio-controlled.stories.tsx index 4d4253993f..328a29163d 100644 --- a/packages/paste-core/components/radio-group/stories/radio-controlled.stories.tsx +++ b/packages/paste-core/components/radio-group/stories/radio-controlled.stories.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import {useUID} from '@twilio-paste/uid-library'; -import {Anchor} from '@twilio-paste/anchor'; +import { useUID } from '@twilio-paste/uid-library'; +import { Anchor } from '@twilio-paste/anchor'; -import {Radio, RadioGroup} from '../src'; +import { Radio, RadioGroup } from '../src'; // eslint-disable-next-line import/no-default-export export default { title: 'Components/Radio/Radio (Controlled)', component: Radio, - subcomponents: {RadioGroup}, + subcomponents: { RadioGroup }, }; /** @@ -60,7 +60,7 @@ export const RadioUnchecked = (): React.ReactNode => { RadioUnchecked.storyName = 'Radio - No initial checked'; RadioUnchecked.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, }; /** @@ -112,5 +112,5 @@ export const RadioChecked = (): React.ReactNode => { RadioChecked.storyName = 'Radio - initial checked'; RadioChecked.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, }; diff --git a/packages/paste-core/components/radio-group/stories/radio-uncontrolled.stories.tsx b/packages/paste-core/components/radio-group/stories/radio-uncontrolled.stories.tsx index c5ca357c8b..7901f20beb 100644 --- a/packages/paste-core/components/radio-group/stories/radio-uncontrolled.stories.tsx +++ b/packages/paste-core/components/radio-group/stories/radio-uncontrolled.stories.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import {useUID} from '@twilio-paste/uid-library'; -import {Anchor} from '@twilio-paste/anchor'; +import { useUID } from '@twilio-paste/uid-library'; +import { Anchor } from '@twilio-paste/anchor'; -import {Radio, RadioGroup} from '../src'; +import { Radio, RadioGroup } from '../src'; // eslint-disable-next-line import/no-default-export export default { title: 'Components/Radio/Radio (Uncontrolled)', component: Radio, - subcomponents: {RadioGroup}, + subcomponents: { RadioGroup }, }; /** @@ -32,7 +32,7 @@ export const RadioBasic = (): React.ReactNode => { RadioBasic.storyName = 'Radio - no initial defaultChecked'; RadioBasic.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, }; /** @@ -56,7 +56,7 @@ export const RadioWithNoID = (): React.ReactNode => { RadioWithNoID.storyName = 'Radio - with no ID'; RadioWithNoID.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, }; /** @@ -90,5 +90,5 @@ export const RadioDefaultChecked = (): React.ReactNode => { RadioDefaultChecked.storyName = 'Radio - initial defaultChecked'; RadioDefaultChecked.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, }; diff --git a/packages/paste-core/components/radio-group/stories/radiogroup-controlled.stories.tsx b/packages/paste-core/components/radio-group/stories/radiogroup-controlled.stories.tsx index a7b56f9b0d..9d12d8ee2a 100644 --- a/packages/paste-core/components/radio-group/stories/radiogroup-controlled.stories.tsx +++ b/packages/paste-core/components/radio-group/stories/radiogroup-controlled.stories.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; -import {useUID} from '@twilio-paste/uid-library'; -import {Anchor} from '@twilio-paste/anchor'; -import {Text} from '@twilio-paste/text'; +import { useUID } from '@twilio-paste/uid-library'; +import { Anchor } from '@twilio-paste/anchor'; +import { Text } from '@twilio-paste/text'; -import {Radio, RadioGroup} from '../src'; +import { Radio, RadioGroup } from '../src'; // eslint-disable-next-line import/no-default-export export default { title: 'Components/Radio/Radio Group (Controlled)', component: Radio, - subcomponents: {RadioGroup}, + subcomponents: { RadioGroup }, }; /** @@ -58,7 +58,7 @@ export const ControlledRadioGroupA = (): React.ReactNode => { ControlledRadioGroupA.storyName = 'Controlled RadioGroup with no (default)checked on radios'; ControlledRadioGroupA.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, }; /** @@ -107,7 +107,7 @@ export const ControlledRadioGroupB = (): React.ReactNode => { ControlledRadioGroupB.storyName = 'Controlled RadioGroup with defaultChecked set on different Radio'; ControlledRadioGroupB.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, }; /** @@ -156,7 +156,7 @@ export const ControlledRadioGroupC = (): React.ReactNode => { ControlledRadioGroupC.storyName = 'Controlled RadioGroup with checked set on different Radio'; ControlledRadioGroupC.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, }; /** @@ -207,5 +207,5 @@ export const ControlledRadioGroupD = (): React.ReactNode => { ControlledRadioGroupD.storyName = 'Controlled RadioGroup with checked and defaultChecked set on different Radios'; ControlledRadioGroupD.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, }; diff --git a/packages/paste-core/components/radio-group/stories/radiogroup-uncontrolled.stories.tsx b/packages/paste-core/components/radio-group/stories/radiogroup-uncontrolled.stories.tsx index 7c9a8df90b..68827b2813 100644 --- a/packages/paste-core/components/radio-group/stories/radiogroup-uncontrolled.stories.tsx +++ b/packages/paste-core/components/radio-group/stories/radiogroup-uncontrolled.stories.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; -import {useUID} from '@twilio-paste/uid-library'; -import {Anchor} from '@twilio-paste/anchor'; -import {Text} from '@twilio-paste/text'; +import { useUID } from '@twilio-paste/uid-library'; +import { Anchor } from '@twilio-paste/anchor'; +import { Text } from '@twilio-paste/text'; -import {Radio, RadioGroup} from '../src'; +import { Radio, RadioGroup } from '../src'; // eslint-disable-next-line import/no-default-export export default { title: 'Components/Radio/Radio Group (Uncontrolled)', component: Radio, - subcomponents: {RadioGroup}, + subcomponents: { RadioGroup }, }; /** @@ -42,7 +42,7 @@ export const UncontrolledRadioGroupA = (): React.ReactNode => { UncontrolledRadioGroupA.storyName = 'Uncontrolled RadioGroup with uncontrolled Radios'; UncontrolledRadioGroupA.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, }; /** @@ -104,5 +104,5 @@ export const UncontrolledRadioGroupB = (): React.ReactNode => { UncontrolledRadioGroupB.storyName = 'Uncontrolled RadioGroup with controlled Radios'; UncontrolledRadioGroupB.parameters = { - chromatic: {disableSnapshot: true}, + chromatic: { disableSnapshot: true }, }; diff --git a/packages/paste-core/components/radio-group/stories/radiogroup-vrt.stories.tsx b/packages/paste-core/components/radio-group/stories/radiogroup-vrt.stories.tsx index 19c752cc63..ffc77fa7ab 100644 --- a/packages/paste-core/components/radio-group/stories/radiogroup-vrt.stories.tsx +++ b/packages/paste-core/components/radio-group/stories/radiogroup-vrt.stories.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; -import {useUID} from '@twilio-paste/uid-library'; -import {Anchor} from '@twilio-paste/anchor'; -import {Text} from '@twilio-paste/text'; +import { useUID } from '@twilio-paste/uid-library'; +import { Anchor } from '@twilio-paste/anchor'; +import { Text } from '@twilio-paste/text'; -import {Radio, RadioGroup} from '../src'; +import { Radio, RadioGroup } from '../src'; // eslint-disable-next-line import/no-default-export export default { title: 'Components/Radio', component: Radio, - subcomponents: {RadioGroup}, + subcomponents: { RadioGroup }, }; export const RadioDefault = (): React.ReactNode => { diff --git a/packages/paste-core/components/screen-reader-only/build.js b/packages/paste-core/components/screen-reader-only/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/screen-reader-only/build.js +++ b/packages/paste-core/components/screen-reader-only/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/screen-reader-only/src/index.tsx b/packages/paste-core/components/screen-reader-only/src/index.tsx index b537d18ab6..b8925a207b 100644 --- a/packages/paste-core/components/screen-reader-only/src/index.tsx +++ b/packages/paste-core/components/screen-reader-only/src/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; +import { Box } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; export interface ScreenReaderOnlyProps { children: NonNullable; @@ -9,7 +9,7 @@ export interface ScreenReaderOnlyProps { } const ScreenReaderOnly = React.forwardRef( - ({as = 'span', children, ...props}, ref) => { + ({ as = 'span', children, ...props }, ref) => { return ( ( {children} ); - } + }, ); ScreenReaderOnly.displayName = 'ScreenReaderOnly'; -export {ScreenReaderOnly}; +export { ScreenReaderOnly }; diff --git a/packages/paste-core/components/screen-reader-only/stories/index.stories.tsx b/packages/paste-core/components/screen-reader-only/stories/index.stories.tsx index 2b09d5227e..4a1ef1552a 100644 --- a/packages/paste-core/components/screen-reader-only/stories/index.stories.tsx +++ b/packages/paste-core/components/screen-reader-only/stories/index.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {Text} from '@twilio-paste/text'; +import { Text } from '@twilio-paste/text'; -import {ScreenReaderOnly} from '../src'; +import { ScreenReaderOnly } from '../src'; // eslint-disable-next-line import/no-default-export export default { diff --git a/packages/paste-core/components/select/__tests__/option.test.tsx b/packages/paste-core/components/select/__tests__/option.test.tsx index b234c75afc..85379fd061 100644 --- a/packages/paste-core/components/select/__tests__/option.test.tsx +++ b/packages/paste-core/components/select/__tests__/option.test.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render, screen } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {Option} from '../src'; -import type {OptionProps} from '../src'; -import {createAttributeMap} from '../test-utils'; +import { Option } from '../src'; +import type { OptionProps } from '../src'; +import { createAttributeMap } from '../test-utils'; interface ExampleOptionProps extends OptionProps { suffix?: string; @@ -34,10 +34,10 @@ describe('Option', () => { draggable: true, accessKey: 't e s t', }; - const {getByTestId} = render( + const { getByTestId } = render( Option 1 - + , ); const attributeMap = createAttributeMap(getByTestId('option-test')); @@ -66,10 +66,10 @@ describe('Option', () => { size: 2, selected: true, }; - const {getByTestId} = render( + const { getByTestId } = render( Option 1 - + , ); const attributeMap = createAttributeMap(getByTestId('option-test')); @@ -90,7 +90,7 @@ describe('Option', () => { render( Option 1 - + , ); expect(screen.getByTestId('option-default-data-attribute').getAttribute('data-paste-element')).toEqual('OPTION'); }); @@ -99,11 +99,11 @@ describe('Option', () => { render( Option 1 - + , ); expect(screen.getByTestId('option-unique-data-attribute').getAttribute('data-paste-element')).toEqual( - 'UNIQUE_NAME' + 'UNIQUE_NAME', ); }); }); @@ -125,7 +125,7 @@ describe('Option', () => { Option 1 - + , ); expect(screen.getByTestId('option-custom-styles')).toHaveStyleRule('color', 'rgb(3, 11, 93)'); @@ -147,7 +147,7 @@ describe('Option', () => { Option 1 - + , ); expect(screen.getByTestId('option-custom-styles-unique-name')).toHaveStyleRule('color', 'rgb(2, 99, 224)'); diff --git a/packages/paste-core/components/select/__tests__/optiongroup.test.tsx b/packages/paste-core/components/select/__tests__/optiongroup.test.tsx index 9f0442d246..52a933982a 100644 --- a/packages/paste-core/components/select/__tests__/optiongroup.test.tsx +++ b/packages/paste-core/components/select/__tests__/optiongroup.test.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render, screen } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {OptionGroup, Option} from '../src'; -import type {OptionGroupProps} from '../src'; -import {createAttributeMap} from '../test-utils'; +import { OptionGroup, Option } from '../src'; +import type { OptionGroupProps } from '../src'; +import { createAttributeMap } from '../test-utils'; interface ExampleOptionGroupProps extends Omit { groupSuffix?: string; @@ -33,7 +33,7 @@ describe('OptionGroup', () => { draggable: true, accessKey: 't e s t', }; - const {getByTestId} = render(); + const { getByTestId } = render(); const attributeMap = createAttributeMap(getByTestId('optgroup-1-test')); expect(attributeMap['data-attr']).toEqual('test-attribute'); @@ -53,7 +53,7 @@ describe('OptionGroup', () => { width: '2px', size: 2, }; - const {getByTestId} = render(); + const { getByTestId } = render(); const attributeMap = createAttributeMap(getByTestId('optgroup-1-test')); expect(attributeMap.hasOwnProperty('style')).toBe(false); @@ -68,7 +68,7 @@ describe('OptionGroup', () => { it('should set an element data attribute for Option (default)', () => { render(); expect(screen.getByTestId('optgroup-1-default-data-attribute').getAttribute('data-paste-element')).toEqual( - 'OPTION_GROUP' + 'OPTION_GROUP', ); }); @@ -76,7 +76,7 @@ describe('OptionGroup', () => { render(); expect(screen.getByTestId('optgroup-1-unique-data-attribute').getAttribute('data-paste-element')).toEqual( - 'UNIQUE_NAME' + 'UNIQUE_NAME', ); }); }); @@ -97,7 +97,7 @@ describe('OptionGroup', () => { }} > - + , ); expect(screen.getByTestId('optgroup-1-custom-styles')).toHaveStyleRule('color', 'rgb(14, 124, 58)'); @@ -118,7 +118,7 @@ describe('OptionGroup', () => { }} > - + , ); expect(screen.getByTestId('optgroup-1-custom-styles-unique-name')).toHaveStyleRule('color', 'rgb(2, 99, 224)'); diff --git a/packages/paste-core/components/select/__tests__/select.test.tsx b/packages/paste-core/components/select/__tests__/select.test.tsx index 4cebfb638c..62cf7763f9 100644 --- a/packages/paste-core/components/select/__tests__/select.test.tsx +++ b/packages/paste-core/components/select/__tests__/select.test.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import {render, fireEvent, screen} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {useUID} from '@twilio-paste/uid-library'; -import {Theme} from '@twilio-paste/theme'; -import {Label} from '@twilio-paste/label'; +import { render, fireEvent, screen } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { useUID } from '@twilio-paste/uid-library'; +import { Theme } from '@twilio-paste/theme'; +import { Label } from '@twilio-paste/label'; -import {Select, Option, SelectElement} from '../src'; -import type {SelectProps} from '../src'; -import {createAttributeMap} from '../test-utils'; +import { Select, Option, SelectElement } from '../src'; +import type { SelectProps } from '../src'; +import { createAttributeMap } from '../test-utils'; const onChangeMock: jest.Mock = jest.fn(); @@ -47,7 +47,11 @@ const ExampleSelect: React.FC> = ({ const initTestId = (prefix?: string): string => `${prefix ? `${prefix}-` : ''}select-wrapper`; -const MockWrappedSelect: React.FC> = ({children, dataPrefix, ...props}) => { +const MockWrappedSelect: React.FC> = ({ + children, + dataPrefix, + ...props +}) => { return ( @@ -73,17 +77,17 @@ describe('Select', () => { }; it('should have the correct accessibility attributes on the container', () => { - const {getByTestId} = render( + const { getByTestId } = render( - + , ); expect(getByTestId('select').getAttribute('aria-invalid')).toEqual('false'); - const {getByTestId: getByTestIdWithError} = render( + const { getByTestId: getByTestIdWithError } = render( - + , ); expect(getByTestIdWithError('has-error-select').getAttribute('aria-invalid')).toEqual('true'); }); @@ -100,10 +104,10 @@ describe('Select', () => { draggable: true, accessKey: 't e s t', }; - const {getByTestId} = render( + const { getByTestId } = render( - + , ); const attributeMap = createAttributeMap(getByTestId('select')); @@ -118,10 +122,10 @@ describe('Select', () => { }); it('should filter blocklisted props', () => { - const {getByTestId} = render( + const { getByTestId } = render( - + , ); const selectAttributesMap = createAttributeMap(getByTestId('blocklisted-select')); @@ -136,10 +140,10 @@ describe('Select', () => { ...blockListedPropsMap, multiple: true, }; - const {getByTestId: getByTestIdWithMultiple} = render( + const { getByTestId: getByTestIdWithMultiple } = render( - + , ); const selectMultipleAttributesMap = createAttributeMap(getByTestIdWithMultiple('blocklisted-multiple-select')); @@ -154,30 +158,30 @@ describe('Select', () => { }); it('should call onChange when an option is selected', () => { - const {getByDisplayValue} = render( + const { getByDisplayValue } = render( - + , ); - fireEvent.change(getByDisplayValue('Option 1'), {target: {value: 'option-2'}}); + fireEvent.change(getByDisplayValue('Option 1'), { target: { value: 'option-2' } }); expect(onChangeMock).toHaveBeenCalled(); }); it('should set data-not-selectize="true" on the select element for console bootstrap overrides', () => { - const {getByTestId} = render( + const { getByTestId } = render( - + , ); expect(getByTestId('select').getAttribute('data-not-selectize')).toEqual('true'); }); it('should render with margin: space0', () => { - const {getByTestId} = render(child); + const { getByTestId } = render(child); expect(getByTestId('select-margin')).toHaveStyleRule('margin', 'space0'); }); @@ -186,11 +190,11 @@ describe('Select', () => { render( - + , ); expect(screen.getByTestId('default-data-attribute-select').getAttribute('data-paste-element')).toEqual( - 'SELECT_ELEMENT' + 'SELECT_ELEMENT', ); }); @@ -198,17 +202,17 @@ describe('Select', () => { render( - + , ); expect(screen.getByTestId('unique-data-attribute-select').getAttribute('data-paste-element')).toEqual( - 'UNIQUE_NAME_ELEMENT' + 'UNIQUE_NAME_ELEMENT', ); }); }); describe('Customization', () => { - const CustomizationWrapper: React.FC> = ({children}) => ( + const CustomizationWrapper: React.FC> = ({ children }) => ( {
    - + , ); const nodeNamedSelect = screen.getByTestId('custom-styles-select-wrapper').lastChild as ChildNode; @@ -315,7 +319,7 @@ describe('Select', () => {
    - + , ); const nodeNamedSelect = screen.getByTestId('custom-styles-select-wrapper').lastChild as ChildNode; @@ -345,7 +349,7 @@ describe('Select', () => {
    - + , ); const nodeNamedSelect = screen.getByTestId('custom-styles-unique-name-select-wrapper').lastChild as ChildNode; @@ -375,7 +379,7 @@ describe('Select', () => {
    - + , ); const nodeNamedSelect = screen.getByTestId('custom-styles-unique-name-select-wrapper').lastChild as ChildNode; diff --git a/packages/paste-core/components/select/build.js b/packages/paste-core/components/select/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/select/build.js +++ b/packages/paste-core/components/select/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/select/src/Option.tsx b/packages/paste-core/components/select/src/Option.tsx index b607483645..0f955dc6ba 100644 --- a/packages/paste-core/components/select/src/Option.tsx +++ b/packages/paste-core/components/select/src/Option.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { HTMLPasteProps } from '@twilio-paste/types'; -import type {Element} from './types'; +import type { Element } from './types'; export interface OptionProps extends HTMLPasteProps<'option'> { value: string; @@ -10,7 +10,7 @@ export interface OptionProps extends HTMLPasteProps<'option'> { element?: Element; } -const Option = React.forwardRef(({children, element = 'OPTION', ...props}, ref) => { +const Option = React.forwardRef(({ children, element = 'OPTION', ...props }, ref) => { if (props.selected) { // eslint-disable-next-line no-console console.warn('"selected" is a blocked prop on this component, please use "value" on the select element.'); @@ -39,4 +39,4 @@ const Option = React.forwardRef(({children, elem Option.displayName = 'Option'; -export {Option}; +export { Option }; diff --git a/packages/paste-core/components/select/src/OptionGroup.tsx b/packages/paste-core/components/select/src/OptionGroup.tsx index a289cd93c5..4710c5181d 100644 --- a/packages/paste-core/components/select/src/OptionGroup.tsx +++ b/packages/paste-core/components/select/src/OptionGroup.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { HTMLPasteProps } from '@twilio-paste/types'; -import type {Element} from './types'; +import type { Element } from './types'; export interface OptionGroupProps extends HTMLPasteProps<'optgroup'> { label: string; @@ -11,7 +11,7 @@ export interface OptionGroupProps extends HTMLPasteProps<'optgroup'> { } const OptionGroup = React.forwardRef( - ({label, children, element = 'OPTION_GROUP', ...props}, ref) => ( + ({ label, children, element = 'OPTION_GROUP', ...props }, ref) => ( ( > {children} - ) + ), ); OptionGroup.displayName = 'OptionGroup'; -export {OptionGroup}; +export { OptionGroup }; diff --git a/packages/paste-core/components/select/src/Select.tsx b/packages/paste-core/components/select/src/Select.tsx index 21704f75f0..8ef194af6b 100644 --- a/packages/paste-core/components/select/src/Select.tsx +++ b/packages/paste-core/components/select/src/Select.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import {ChevronDownIcon} from '@twilio-paste/icons/esm/ChevronDownIcon'; -import {InputBox, InputChevronWrapper, getInputChevronIconColor} from '@twilio-paste/input-box'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import { ChevronDownIcon } from '@twilio-paste/icons/esm/ChevronDownIcon'; +import { InputBox, InputChevronWrapper, getInputChevronIconColor } from '@twilio-paste/input-box'; +import type { HTMLPasteProps } from '@twilio-paste/types'; -import type {Variants, Element} from './types'; +import type { Variants, Element } from './types'; export interface SelectProps extends HTMLPasteProps<'select'> { children: NonNullable; @@ -19,7 +19,7 @@ export interface SelectProps extends HTMLPasteProps<'select'> { } export const SelectElement = React.forwardRef( - ({element = 'SELECT_ELEMENT', variant, size, ...props}, ref) => { + ({ element = 'SELECT_ELEMENT', variant, size, ...props }, ref) => { return ( ( variant={variant} /> ); - } + }, ); SelectElement.displayName = 'SelectElement'; @@ -80,7 +80,7 @@ const Select = React.forwardRef( variant = 'default', ...props }, - ref + ref, ) => { const [showOptions, setShowOptions] = React.useState(false); React.useEffect(() => { @@ -124,9 +124,9 @@ const Select = React.forwardRef( ); - } + }, ); Select.displayName = 'Select'; -export {Select}; +export { Select }; diff --git a/packages/paste-core/components/select/src/types.ts b/packages/paste-core/components/select/src/types.ts index 4aaa520328..d3e701c807 100644 --- a/packages/paste-core/components/select/src/types.ts +++ b/packages/paste-core/components/select/src/types.ts @@ -1,4 +1,4 @@ -import type {BoxElementProps} from '@twilio-paste/box'; +import type { BoxElementProps } from '@twilio-paste/box'; export type Element = BoxElementProps['element']; diff --git a/packages/paste-core/components/select/stories/select.stories.tsx b/packages/paste-core/components/select/stories/select.stories.tsx index 1107645f8c..24b30e8747 100644 --- a/packages/paste-core/components/select/stories/select.stories.tsx +++ b/packages/paste-core/components/select/stories/select.stories.tsx @@ -1,23 +1,23 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {useUID, useUIDSeed} from '@twilio-paste/uid-library'; -import {action} from '@storybook/addon-actions'; -import {useTheme} from '@twilio-paste/theme'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {Box} from '@twilio-paste/box'; -import {Text} from '@twilio-paste/text'; -import {Anchor} from '@twilio-paste/anchor'; -import {InformationIcon} from '@twilio-paste/icons/esm/InformationIcon'; -import {Label} from '@twilio-paste/label'; -import {HelpText} from '@twilio-paste/help-text'; - -import {Select, Option, OptionGroup} from '../src'; +import type { StoryFn } from '@storybook/react'; +import { useUID, useUIDSeed } from '@twilio-paste/uid-library'; +import { action } from '@storybook/addon-actions'; +import { useTheme } from '@twilio-paste/theme'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { Box } from '@twilio-paste/box'; +import { Text } from '@twilio-paste/text'; +import { Anchor } from '@twilio-paste/anchor'; +import { InformationIcon } from '@twilio-paste/icons/esm/InformationIcon'; +import { Label } from '@twilio-paste/label'; +import { HelpText } from '@twilio-paste/help-text'; + +import { Select, Option, OptionGroup } from '../src'; // eslint-disable-next-line import/no-default-export export default { title: 'Components/Select', component: Select, - subcomponents: {Option, OptionGroup}, + subcomponents: { Option, OptionGroup }, }; export const DefaultSelect = (): React.ReactNode => { @@ -249,11 +249,11 @@ export const SelectMultiple = (): React.ReactNode => { id={uid} multiple size={2} - onChange={({target: options}) => { + onChange={({ target: options }) => { const update: [] = Object.keys(options).reduce((optionValues: [], key): [] => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore implicit any with key - const {selected, value: optionValue} = options[key]; + const { selected, value: optionValue } = options[key]; if (selected) { return [...optionValues, optionValue] as unknown as []; } @@ -515,11 +515,11 @@ export const SelectOptionGroupsAndMultiple = (): React.ReactNode => { { + onChange={({ target: options }) => { const update: [] = Object.keys(options).reduce((optionValues: [], key): [] => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore implicit any with key - const {selected, value: optionValue} = options[key]; + const { selected, value: optionValue } = options[key]; if (selected) { return [...optionValues, optionValue] as unknown as []; } @@ -625,7 +625,7 @@ export const SelectOverflowLongValue = (): React.ReactNode => { SelectOverflowLongValue.storyName = 'Select - overflow long value'; -export const CustomizedSelect: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const CustomizedSelect: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); const seed = useUIDSeed(); @@ -661,8 +661,8 @@ export const CustomizedSelect: StoryFn = (_args, {parameters: {isTestEnvironment }, SELECT_WRAPPER: { boxShadow: 'shadowBorderPrimary', - ':hover': {boxShadow: 'shadowBorderError'}, - ':focus-within': {boxShadow: 'shadowFocus'}, + ':hover': { boxShadow: 'shadowBorderError' }, + ':focus-within': { boxShadow: 'shadowFocus' }, }, SELECT_CHEVRON_WRAPPER: { transform: 'rotate(90deg) translateX(-50%) translateY(-20%)', diff --git a/packages/paste-core/components/select/test-utils/index.ts b/packages/paste-core/components/select/test-utils/index.ts index 456a68277a..ad13d8f549 100644 --- a/packages/paste-core/components/select/test-utils/index.ts +++ b/packages/paste-core/components/select/test-utils/index.ts @@ -28,7 +28,7 @@ export const createAttributeMap = (element: HTMLElement): AttributesMap => { return Object.keys(attributesNodeList).reduce((attributesMap, key) => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore implicit any on key - const {name, value} = attributesNodeList[key]; - return {...attributesMap, [name]: value}; + const { name, value } = attributesNodeList[key]; + return { ...attributesMap, [name]: value }; }, {}); }; diff --git a/packages/paste-core/components/separator/__tests__/index.spec.tsx b/packages/paste-core/components/separator/__tests__/index.spec.tsx index 544b511bcb..578943b595 100644 --- a/packages/paste-core/components/separator/__tests__/index.spec.tsx +++ b/packages/paste-core/components/separator/__tests__/index.spec.tsx @@ -1,24 +1,24 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; -import {Theme} from '@twilio-paste/theme'; -import {CustomizationProvider} from '@twilio-paste/customization'; +import { render, screen } from '@testing-library/react'; +import { Theme } from '@twilio-paste/theme'; +import { CustomizationProvider } from '@twilio-paste/customization'; -import {Separator} from '../src'; +import { Separator } from '../src'; describe('Separator', () => { describe('Render', () => { it('should render', () => { - const {getByRole} = render(); + const { getByRole } = render(); expect(getByRole('separator')).not.toBeNull(); }); it('should render correctly when the value of orientation prop is horizontal', () => { - const {getByRole} = render(); + const { getByRole } = render(); expect(getByRole('separator').getAttribute('aria-orientation')).toBe('horizontal'); }); it('should render correctly when the value of orientation prop is vertical', () => { - const {getByRole} = render(); + const { getByRole } = render(); expect(getByRole('separator').getAttribute('aria-orientation')).toBe('vertical'); }); @@ -26,7 +26,7 @@ describe('Separator', () => { render( - + , ); expect(screen.getByTestId('separator')).toHaveStyleRule('margin-right', '1rem'); expect(screen.getByTestId('separator')).toHaveStyleRule('margin-left', '1rem'); @@ -36,7 +36,7 @@ describe('Separator', () => { render( - + , ); expect(screen.getByTestId('separator')).toHaveStyleRule('margin-top', '2.25rem'); expect(screen.getByTestId('separator')).toHaveStyleRule('margin-bottom', '2.25rem'); @@ -50,7 +50,7 @@ describe('Separator', () => { orientation="vertical" horizontalSpacing={['space20', 'space100', 'space190']} /> - + , ); expect(screen.getByTestId('separator')).toHaveStyleRule('margin-right', '0.25rem'); expect(screen.getByTestId('separator')).toHaveStyleRule('margin-right', '2.25rem', { @@ -76,7 +76,7 @@ describe('Separator', () => { orientation="horizontal" verticalSpacing={['space20', 'space100', 'space190']} /> - + , ); expect(screen.getByTestId('separator')).toHaveStyleRule('margin-top', '0.25rem'); expect(screen.getByTestId('separator')).toHaveStyleRule('margin-top', '2.25rem', { @@ -112,10 +112,10 @@ describe('Separator', () => { - + , ); const renderedSeparator = screen.getByTestId('custom-separator'); expect(renderedSeparator).toHaveStyleRule('border-color', 'rgb(96, 107, 133)'); @@ -127,10 +127,10 @@ describe('Separator', () => { - + , ); const renderedSeparator = screen.getByTestId('custom-separator'); expect(renderedSeparator).toHaveStyleRule('border-color', 'rgb(96, 107, 133)'); diff --git a/packages/paste-core/components/separator/build.js b/packages/paste-core/components/separator/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/separator/build.js +++ b/packages/paste-core/components/separator/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/separator/src/index.tsx b/packages/paste-core/components/separator/src/index.tsx index 3312d778ae..33906e3bbd 100644 --- a/packages/paste-core/components/separator/src/index.tsx +++ b/packages/paste-core/components/separator/src/index.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import type {Space} from '@twilio-paste/style-props'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import type { Space } from '@twilio-paste/style-props'; +import type { HTMLPasteProps } from '@twilio-paste/types'; type Orientation = 'horizontal' | 'vertical'; @@ -14,7 +14,7 @@ export interface SeparatorProps extends HTMLPasteProps<'hr'>, Pick( - ({element = 'SEPARATOR', orientation, horizontalSpacing, verticalSpacing, ...props}, ref) => { + ({ element = 'SEPARATOR', orientation, horizontalSpacing, verticalSpacing, ...props }, ref) => { return ( ( ref={ref} /> ); - } + }, ); Separator.displayName = 'Separator'; -export {Separator}; +export { Separator }; diff --git a/packages/paste-core/components/separator/stories/index.stories.tsx b/packages/paste-core/components/separator/stories/index.stories.tsx index 3ba4c53263..5f98c7d00d 100644 --- a/packages/paste-core/components/separator/stories/index.stories.tsx +++ b/packages/paste-core/components/separator/stories/index.stories.tsx @@ -1,15 +1,15 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {useTheme} from '@twilio-paste/theme'; -import {Box} from '@twilio-paste/box'; -import {Card} from '@twilio-paste/card'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {Heading} from '@twilio-paste/heading'; -import {Paragraph} from '@twilio-paste/paragraph'; -import {Stack} from '@twilio-paste/stack'; -import {Text} from '@twilio-paste/text'; +import type { StoryFn } from '@storybook/react'; +import { useTheme } from '@twilio-paste/theme'; +import { Box } from '@twilio-paste/box'; +import { Card } from '@twilio-paste/card'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { Heading } from '@twilio-paste/heading'; +import { Paragraph } from '@twilio-paste/paragraph'; +import { Stack } from '@twilio-paste/stack'; +import { Text } from '@twilio-paste/text'; -import {Separator} from '../src'; +import { Separator } from '../src'; // eslint-disable-next-line import/no-default-export export default { @@ -137,7 +137,7 @@ export const Responsive = (): React.ReactNode => { Responsive.storyName = 'responsive'; -export const CustomSeparator: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const CustomSeparator: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( diff --git a/packages/paste-core/components/side-modal/__tests__/customization.spec.tsx b/packages/paste-core/components/side-modal/__tests__/customization.spec.tsx index 774dc370b5..872e0f9f3e 100644 --- a/packages/paste-core/components/side-modal/__tests__/customization.spec.tsx +++ b/packages/paste-core/components/side-modal/__tests__/customization.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {fireEvent, act, render, screen} from '@testing-library/react'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {Button} from '@twilio-paste/button'; +import { fireEvent, act, render, screen } from '@testing-library/react'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { Button } from '@twilio-paste/button'; import { SideModal, @@ -14,7 +14,7 @@ import { SideModalFooterActions, } from '../src'; -const CustomizationWrapper: React.FC = ({children}) => ( +const CustomizationWrapper: React.FC = ({ children }) => ( = ({children}) => ); -const MyCustomizationWrapper: React.FC = ({children}) => ( +const MyCustomizationWrapper: React.FC = ({ children }) => ( { - + , ); - const showButton = screen.getByRole('button', {name: 'Button'}); + const showButton = screen.getByRole('button', { name: 'Button' }); await act(async () => { fireEvent.click(showButton); }); - const closeButton = screen.getByRole('button', {name: 'close', hidden: true}); - const dialog = screen.getByRole('dialog', {hidden: true}); + const closeButton = screen.getByRole('button', { name: 'close', hidden: true }); + const dialog = screen.getByRole('dialog', { hidden: true }); const dialogContents = screen.getByTestId('dialog-contents'); const dialogHeader = screen.getByTestId('dialog-header'); const dialogHeading = screen.getByText('My custom dialog'); @@ -156,14 +156,14 @@ describe('Customization', () => { , - {wrapper: CustomizationWrapper} + { wrapper: CustomizationWrapper }, ); - const showButton = screen.getByRole('button', {name: 'Button'}); + const showButton = screen.getByRole('button', { name: 'Button' }); await act(async () => { fireEvent.click(showButton); }); - const closeButton = screen.getByRole('button', {name: 'close'}); + const closeButton = screen.getByRole('button', { name: 'close' }); const closeIcon = closeButton.querySelector('[data-paste-element="SIDE_MODAL_HEADER_CLOSE_ICON"]'); const dialog = screen.getByRole('dialog'); const dialogContents = screen.getByTestId('dialog-contents'); @@ -179,7 +179,7 @@ describe('Customization', () => { expect(dialog).toHaveStyleRule('width', '400px'); expect(dialog.querySelector('[data-paste-element="SIDE_MODAL"]')).toHaveStyleRule( 'box-shadow', - '0 0 0 4px rgba(2, 99, 224, 0.7)' + '0 0 0 4px rgba(2, 99, 224, 0.7)', ); expect(closeButton).toHaveStyleRule('border-color', 'rgb(202, 205, 216)'); expect(closeIcon).toHaveStyleRule('width', '1.75rem'); @@ -206,16 +206,16 @@ describe('Customization', () => { - + , ); - const showButton = screen.getByRole('button', {name: 'Button'}); + const showButton = screen.getByRole('button', { name: 'Button' }); await act(async () => { fireEvent.click(showButton); }); - const closeButton = screen.getByRole('button', {name: 'close', hidden: true}); - const dialog = screen.getByRole('dialog', {hidden: true}); + const closeButton = screen.getByRole('button', { name: 'close', hidden: true }); + const dialog = screen.getByRole('dialog', { hidden: true }); const dialogContents = screen.getByTestId('dialog-contents'); const dialogHeader = screen.getByTestId('dialog-header'); const dialogHeading = screen.getByText('My custom dialog'); @@ -254,16 +254,16 @@ describe('Customization', () => { , - {wrapper: MyCustomizationWrapper} + { wrapper: MyCustomizationWrapper }, ); - const dialogButton = screen.getByRole('button', {name: 'Button'}); + const dialogButton = screen.getByRole('button', { name: 'Button' }); await act(async () => { fireEvent.click(dialogButton); }); - const closeButton = screen.getByRole('button', {name: 'close'}); + const closeButton = screen.getByRole('button', { name: 'close' }); const closeIcon = closeButton.querySelector('[data-paste-element="FOO_DIALOG_HEADER_CLOSE_ICON"]'); const dialog = screen.getByRole('dialog'); const dialogContents = screen.getByTestId('dialog-contents'); @@ -279,7 +279,7 @@ describe('Customization', () => { expect(dialog).toHaveStyleRule('width', '400px'); expect(dialog.querySelector('[data-paste-element="FOO_DIALOG"]')).toHaveStyleRule( 'box-shadow', - '0 0 0 4px rgba(2, 99, 224, 0.7)' + '0 0 0 4px rgba(2, 99, 224, 0.7)', ); expect(closeButton).toHaveStyleRule('border-color', 'rgb(202, 205, 216)'); expect(closeIcon).toHaveStyleRule('width', '1.75rem'); diff --git a/packages/paste-core/components/side-modal/__tests__/index.spec.tsx b/packages/paste-core/components/side-modal/__tests__/index.spec.tsx index a68a9734a2..b4b25e6acd 100644 --- a/packages/paste-core/components/side-modal/__tests__/index.spec.tsx +++ b/packages/paste-core/components/side-modal/__tests__/index.spec.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import {render, screen, act, fireEvent} from '@testing-library/react'; -import {Button} from '@twilio-paste/button'; +import { render, screen, act, fireEvent } from '@testing-library/react'; +import { Button } from '@twilio-paste/button'; import { SideModal, @@ -12,7 +12,7 @@ import { SideModalFooter, SideModalFooterActions, } from '../src'; -import {StateHookExample} from '../stories/index.stories'; +import { StateHookExample } from '../stories/index.stories'; describe('SideModal', () => { describe('Render', () => { @@ -31,10 +31,10 @@ describe('SideModal', () => { - + , ); - const dialogButton = screen.getByRole('button', {name: 'Button'}); + const dialogButton = screen.getByRole('button', { name: 'Button' }); expect(dialogButton.getAttribute('aria-haspopup')).toEqual('dialog'); expect(dialogButton.getAttribute('aria-expanded')).toEqual('false'); @@ -42,7 +42,7 @@ describe('SideModal', () => { fireEvent.click(dialogButton); }); - const dialog = screen.getByRole('dialog', {hidden: true}); + const dialog = screen.getByRole('dialog', { hidden: true }); expect(dialogButton.getAttribute('aria-controls')).toEqual(dialog.id); expect(dialog).toBeInTheDocument(); }); @@ -50,13 +50,13 @@ describe('SideModal', () => { it('should render a dialog and toggle visible and minimized with external buttons', async () => { render(); - const showButton = screen.getByRole('button', {name: 'Open dialog'}); - const closeButton = screen.getByRole('button', {name: 'Close dialog'}); + const showButton = screen.getByRole('button', { name: 'Open dialog' }); + const closeButton = screen.getByRole('button', { name: 'Close dialog' }); await act(async () => { fireEvent.click(showButton); }); - const dialog = screen.getByRole('dialog', {hidden: true}); + const dialog = screen.getByRole('dialog', { hidden: true }); expect(dialog).toBeInTheDocument(); await act(async () => { @@ -77,17 +77,17 @@ describe('SideModal', () => { This is a dialog. - + , ); - const dialogButton = screen.getByRole('button', {name: 'Button'}); + const dialogButton = screen.getByRole('button', { name: 'Button' }); await act(async () => { fireEvent.click(dialogButton); }); - expect(screen.getByRole('dialog', {hidden: true})).toBeInTheDocument(); + expect(screen.getByRole('dialog', { hidden: true })).toBeInTheDocument(); - const dismissButton = screen.getByRole('button', {name: 'close', hidden: true}); + const dismissButton = screen.getByRole('button', { name: 'close', hidden: true }); expect(dismissButton).toBeDefined(); }); }); diff --git a/packages/paste-core/components/side-modal/build.js b/packages/paste-core/components/side-modal/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/side-modal/build.js +++ b/packages/paste-core/components/side-modal/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/side-modal/src/SideModal.tsx b/packages/paste-core/components/side-modal/src/SideModal.tsx index ccab6ef287..c7406474c6 100644 --- a/packages/paste-core/components/side-modal/src/SideModal.tsx +++ b/packages/paste-core/components/side-modal/src/SideModal.tsx @@ -1,19 +1,19 @@ import * as React from 'react'; -import {useTransition, animated} from '@twilio-paste/animation-library'; -import {Box, safelySpreadBoxProps, type BoxProps} from '@twilio-paste/box'; -import {StyledBase} from '@twilio-paste/theme'; -import {NonModalDialogPrimitive} from '@twilio-paste/non-modal-dialog-primitive'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { useTransition, animated } from '@twilio-paste/animation-library'; +import { Box, safelySpreadBoxProps, type BoxProps } from '@twilio-paste/box'; +import { StyledBase } from '@twilio-paste/theme'; +import { NonModalDialogPrimitive } from '@twilio-paste/non-modal-dialog-primitive'; +import type { HTMLPasteProps } from '@twilio-paste/types'; -import {SideModalContext} from './SideModalContext'; +import { SideModalContext } from './SideModalContext'; export const AnimatedBox = animated(Box); // eslint-disable-next-line @typescript-eslint/no-explicit-any const getAnimationStates = (): any => ({ - from: {opacity: 0, transform: `translateX(100%)`}, - enter: {opacity: 1, transform: `translateX(0%)`}, - leave: {opacity: 0, transform: `translateX(100%)`}, + from: { opacity: 0, transform: `translateX(100%)` }, + enter: { opacity: 1, transform: `translateX(0%)` }, + leave: { opacity: 0, transform: `translateX(100%)` }, // https://www.react-spring.dev/docs/advanced/config config: { mass: 0.5, @@ -30,7 +30,7 @@ export interface SideModalProps extends HTMLPasteProps<'div'> { } export const SideModal = React.forwardRef( - ({children, element = 'SIDE_MODAL', hideOnEsc = true, ...props}, ref) => { + ({ children, element = 'SIDE_MODAL', hideOnEsc = true, ...props }, ref) => { const dialog = React.useContext(SideModalContext); const transitions = useTransition(dialog.visible, getAnimationStates()); @@ -82,7 +82,7 @@ export const SideModal = React.forwardRef( ); - } + }, ); SideModal.displayName = 'SideModal'; diff --git a/packages/paste-core/components/side-modal/src/SideModalBody.tsx b/packages/paste-core/components/side-modal/src/SideModalBody.tsx index 7e91f672bb..3c7113f168 100644 --- a/packages/paste-core/components/side-modal/src/SideModalBody.tsx +++ b/packages/paste-core/components/side-modal/src/SideModalBody.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import type { HTMLPasteProps } from '@twilio-paste/types'; interface SideModalBodyProps extends HTMLPasteProps<'div'> { children?: React.ReactNode; @@ -9,14 +9,14 @@ interface SideModalBodyProps extends HTMLPasteProps<'div'> { } const SideModalBody = React.forwardRef( - ({children, element = 'SIDE_MODAL_BODY', ...props}, ref) => { + ({ children, element = 'SIDE_MODAL_BODY', ...props }, ref) => { return ( {children} ); - } + }, ); SideModalBody.displayName = 'SideModalBody'; -export {SideModalBody}; +export { SideModalBody }; diff --git a/packages/paste-core/components/side-modal/src/SideModalButton.tsx b/packages/paste-core/components/side-modal/src/SideModalButton.tsx index a723f19f94..54ddc5a05d 100644 --- a/packages/paste-core/components/side-modal/src/SideModalButton.tsx +++ b/packages/paste-core/components/side-modal/src/SideModalButton.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; -import {Button} from '@twilio-paste/button'; -import type {ButtonProps} from '@twilio-paste/button'; -import {NonModalDialogDisclosurePrimitive} from '@twilio-paste/non-modal-dialog-primitive'; +import { Button } from '@twilio-paste/button'; +import type { ButtonProps } from '@twilio-paste/button'; +import { NonModalDialogDisclosurePrimitive } from '@twilio-paste/non-modal-dialog-primitive'; -import {SideModalContext} from './SideModalContext'; +import { SideModalContext } from './SideModalContext'; type SideModalButtonProps = Omit & { id?: string; }; const SideModalButton = React.forwardRef( - ({children, element = 'SIDE_MODAL_BUTTON', ...props}, ref) => { + ({ children, element = 'SIDE_MODAL_BUTTON', ...props }, ref) => { const dialog = React.useContext(SideModalContext); return ( @@ -18,8 +18,8 @@ const SideModalButton = React.forwardRef ); - } + }, ); SideModalButton.displayName = 'SideModalButton'; -export {SideModalButton}; +export { SideModalButton }; diff --git a/packages/paste-core/components/side-modal/src/SideModalContainer.tsx b/packages/paste-core/components/side-modal/src/SideModalContainer.tsx index 6bfa3e2e78..357b3f95a9 100644 --- a/packages/paste-core/components/side-modal/src/SideModalContainer.tsx +++ b/packages/paste-core/components/side-modal/src/SideModalContainer.tsx @@ -3,9 +3,9 @@ import type { NonModalDialogPrimitiveStateReturn as SideModalStateReturn, NonModalDialogPrimitivePopoverInitialState, } from '@twilio-paste/non-modal-dialog-primitive'; -import {useNonModalDialogPrimitiveState} from '@twilio-paste/non-modal-dialog-primitive'; +import { useNonModalDialogPrimitiveState } from '@twilio-paste/non-modal-dialog-primitive'; -import {SideModalContext} from './SideModalContext'; +import { SideModalContext } from './SideModalContext'; interface SideModalContainerProps extends NonModalDialogPrimitivePopoverInitialState { children: NonNullable; @@ -28,12 +28,12 @@ const BaseSideModalContainer: React.FC = ({ ...initialState, }); - return {children}; + return {children}; }; BaseSideModalContainer.displayName = 'BaseSideModalContainer'; const SideModalContainer = React.memo(BaseSideModalContainer); SideModalContainer.displayName = 'SideModalContainer'; -export type {SideModalStateReturn, SideModalContainerProps}; -export {SideModalContainer}; +export type { SideModalStateReturn, SideModalContainerProps }; +export { SideModalContainer }; diff --git a/packages/paste-core/components/side-modal/src/SideModalContext.tsx b/packages/paste-core/components/side-modal/src/SideModalContext.tsx index dd21b5d55a..24c5add5c8 100644 --- a/packages/paste-core/components/side-modal/src/SideModalContext.tsx +++ b/packages/paste-core/components/side-modal/src/SideModalContext.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import type {NonModalDialogPrimitiveState} from '@twilio-paste/non-modal-dialog-primitive'; +import type { NonModalDialogPrimitiveState } from '@twilio-paste/non-modal-dialog-primitive'; type SideModalContextProps = Partial; const SideModalContext = React.createContext({}); -export {SideModalContext}; +export { SideModalContext }; diff --git a/packages/paste-core/components/side-modal/src/SideModalFooter.tsx b/packages/paste-core/components/side-modal/src/SideModalFooter.tsx index b92a283373..bda918d84a 100644 --- a/packages/paste-core/components/side-modal/src/SideModalFooter.tsx +++ b/packages/paste-core/components/side-modal/src/SideModalFooter.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxElementProps} from '@twilio-paste/box'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxElementProps } from '@twilio-paste/box'; +import type { HTMLPasteProps } from '@twilio-paste/types'; export interface SideModalFooterProps extends HTMLPasteProps<'div'> { children: NonNullable; element?: BoxElementProps['element']; } const SideModalFooter = React.forwardRef( - ({children, element = 'SIDE_MODAL_FOOTER', ...props}, ref) => { + ({ children, element = 'SIDE_MODAL_FOOTER', ...props }, ref) => { return ( ( {children} ); - } + }, ); SideModalFooter.displayName = 'SideModalFooter'; -export {SideModalFooter}; +export { SideModalFooter }; diff --git a/packages/paste-core/components/side-modal/src/SideModalFooterActions.tsx b/packages/paste-core/components/side-modal/src/SideModalFooterActions.tsx index 43d1bbaa5e..a52503d6d2 100644 --- a/packages/paste-core/components/side-modal/src/SideModalFooterActions.tsx +++ b/packages/paste-core/components/side-modal/src/SideModalFooterActions.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxElementProps} from '@twilio-paste/box'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxElementProps } from '@twilio-paste/box'; +import type { HTMLPasteProps } from '@twilio-paste/types'; type JustifyOptions = 'flex-start' | 'flex-end' | 'space-between'; @@ -12,7 +12,7 @@ export interface SideModalFooterActionsProps extends HTMLPasteProps<'div'> { } const SideModalFooterActions = React.forwardRef( - ({children, element = 'SIDE_MODAL_FOOTER_ACTIONS', justifyContent = 'flex-end', ...props}, ref) => { + ({ children, element = 'SIDE_MODAL_FOOTER_ACTIONS', justifyContent = 'flex-end', ...props }, ref) => { return ( ); - } + }, ); SideModalFooterActions.displayName = 'SideModalFooterActions'; -export {SideModalFooterActions}; +export { SideModalFooterActions }; diff --git a/packages/paste-core/components/side-modal/src/SideModalHeader.tsx b/packages/paste-core/components/side-modal/src/SideModalHeader.tsx index d247ff3655..6497f96b13 100644 --- a/packages/paste-core/components/side-modal/src/SideModalHeader.tsx +++ b/packages/paste-core/components/side-modal/src/SideModalHeader.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import {Button} from '@twilio-paste/button'; -import {CloseIcon} from '@twilio-paste/icons/esm/CloseIcon'; -import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only'; -import type {BoxProps} from '@twilio-paste/box'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import { Button } from '@twilio-paste/button'; +import { CloseIcon } from '@twilio-paste/icons/esm/CloseIcon'; +import { ScreenReaderOnly } from '@twilio-paste/screen-reader-only'; +import type { BoxProps } from '@twilio-paste/box'; +import type { HTMLPasteProps } from '@twilio-paste/types'; -import {SideModalContext} from './SideModalContext'; +import { SideModalContext } from './SideModalContext'; export interface SideModalHeaderProps extends HTMLPasteProps<'div'> { children?: React.ReactNode; @@ -15,10 +15,10 @@ export interface SideModalHeaderProps extends HTMLPasteProps<'div'> { } const SideModalHeader = React.forwardRef( - ({children, element = 'SIDE_MODAL_HEADER', i18nDismissLabel = 'close', ...props}, ref) => { + ({ children, element = 'SIDE_MODAL_HEADER', i18nDismissLabel = 'close', ...props }, ref) => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore Property 'hide' does not exist on type 'Partial', but reakit docs suggest using it (https://reakit.io/docs/popover/#initial-focus) - const {hide} = React.useContext(SideModalContext); + const { hide } = React.useContext(SideModalContext); return ( ( ); - } + }, ); SideModalHeader.displayName = 'SideModalHeader'; -export {SideModalHeader}; +export { SideModalHeader }; diff --git a/packages/paste-core/components/side-modal/src/SideModalHeading.tsx b/packages/paste-core/components/side-modal/src/SideModalHeading.tsx index 196385c39d..117a005b2c 100644 --- a/packages/paste-core/components/side-modal/src/SideModalHeading.tsx +++ b/packages/paste-core/components/side-modal/src/SideModalHeading.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {Heading} from '@twilio-paste/heading'; -import type {HeadingProps} from '@twilio-paste/heading'; -import type {BoxElementProps} from '@twilio-paste/box'; +import { Heading } from '@twilio-paste/heading'; +import type { HeadingProps } from '@twilio-paste/heading'; +import type { BoxElementProps } from '@twilio-paste/box'; export interface SideModalHeadingProps extends Omit { children: NonNullable; @@ -9,14 +9,14 @@ export interface SideModalHeadingProps extends Omit( - ({children, as = 'h2', element = 'SIDE_MODAL_HEADING', ...props}, ref) => { + ({ children, as = 'h2', element = 'SIDE_MODAL_HEADING', ...props }, ref) => { return ( {children} ); - } + }, ); SideModalHeading.displayName = 'SideModalHeading'; -export {SideModalHeading}; +export { SideModalHeading }; diff --git a/packages/paste-core/components/side-modal/src/index.tsx b/packages/paste-core/components/side-modal/src/index.tsx index 3ab48c5eb9..d514b076bb 100644 --- a/packages/paste-core/components/side-modal/src/index.tsx +++ b/packages/paste-core/components/side-modal/src/index.tsx @@ -1,4 +1,4 @@ -export {useNonModalDialogPrimitiveState as useSideModalState} from '@twilio-paste/non-modal-dialog-primitive'; +export { useNonModalDialogPrimitiveState as useSideModalState } from '@twilio-paste/non-modal-dialog-primitive'; export * from './SideModal'; export * from './SideModalButton'; export * from './SideModalHeader'; diff --git a/packages/paste-core/components/side-modal/stories/customization.stories.tsx b/packages/paste-core/components/side-modal/stories/customization.stories.tsx index 53bdc91526..e49662a351 100644 --- a/packages/paste-core/components/side-modal/stories/customization.stories.tsx +++ b/packages/paste-core/components/side-modal/stories/customization.stories.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {Paragraph} from '@twilio-paste/paragraph'; -import {useTheme} from '@twilio-paste/theme'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {Button} from '@twilio-paste/button'; +import type { StoryFn } from '@storybook/react'; +import { Paragraph } from '@twilio-paste/paragraph'; +import { useTheme } from '@twilio-paste/theme'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { Button } from '@twilio-paste/button'; import { SideModal, @@ -27,7 +27,7 @@ export default { }, }; -export const CustomizedDialog: StoryFn = (_args, {parameters: {isTestEnvironment}}) => { +export const CustomizedDialog: StoryFn = (_args, { parameters: { isTestEnvironment } }) => { const currentTheme = useTheme(); return ( diff --git a/packages/paste-core/components/side-modal/stories/index.stories.tsx b/packages/paste-core/components/side-modal/stories/index.stories.tsx index e190e423bb..ae4b32a2a6 100644 --- a/packages/paste-core/components/side-modal/stories/index.stories.tsx +++ b/packages/paste-core/components/side-modal/stories/index.stories.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import type {StoryFn} from '@storybook/react'; -import {Box} from '@twilio-paste/box'; -import {Button} from '@twilio-paste/button'; -import {ChatIcon} from '@twilio-paste/icons/esm/ChatIcon'; -import {Heading} from '@twilio-paste/heading'; -import {Input} from '@twilio-paste/input'; -import {Label} from '@twilio-paste/label'; -import {Paragraph} from '@twilio-paste/paragraph'; -import {TextArea} from '@twilio-paste/textarea'; -import {useUID} from '@twilio-paste/uid-library'; +import type { StoryFn } from '@storybook/react'; +import { Box } from '@twilio-paste/box'; +import { Button } from '@twilio-paste/button'; +import { ChatIcon } from '@twilio-paste/icons/esm/ChatIcon'; +import { Heading } from '@twilio-paste/heading'; +import { Input } from '@twilio-paste/input'; +import { Label } from '@twilio-paste/label'; +import { Paragraph } from '@twilio-paste/paragraph'; +import { TextArea } from '@twilio-paste/textarea'; +import { useUID } from '@twilio-paste/uid-library'; import { SideModal, diff --git a/packages/paste-core/components/sidebar/__tests__/index.spec.tsx b/packages/paste-core/components/sidebar/__tests__/index.spec.tsx index 98d2506f73..934c4e72d8 100644 --- a/packages/paste-core/components/sidebar/__tests__/index.spec.tsx +++ b/packages/paste-core/components/sidebar/__tests__/index.spec.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {render, screen, fireEvent} from '@testing-library/react'; -import {Theme} from '@twilio-paste/theme'; -import {Box} from '@twilio-paste/box'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {ProductFlexIcon} from '@twilio-paste/icons/esm/ProductFlexIcon'; +import { render, screen, fireEvent } from '@testing-library/react'; +import { Theme } from '@twilio-paste/theme'; +import { Box } from '@twilio-paste/box'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { ProductFlexIcon } from '@twilio-paste/icons/esm/ProductFlexIcon'; import { Sidebar, @@ -16,7 +16,7 @@ import { SidebarOverlayContentWrapper, SidebarBetaBadge, } from '../src'; -import type {SidebarProps} from '../src'; +import type { SidebarProps } from '../src'; const MockPushSidebar = ({ collapsed, @@ -186,15 +186,15 @@ describe('Sidebar', () => { render( Beta - + , ); expect(betaBadgeRef?.current?.tagName).toEqual('SPAN'); }); it('should render as button if "as" is "button"', () => { - const {getByRole} = render( + const { getByRole } = render( null}> Button - + , ); expect(getByRole('button')).toBeInTheDocument(); }); @@ -204,17 +204,17 @@ describe('Sidebar', () => { render( {}} ref={betaBadgeRef}> Beta - + , ); expect(betaBadgeRef?.current?.tagName).toEqual('BUTTON'); }); it('should handle onclick event', () => { const onClickMock: jest.Mock = jest.fn(); - const {getByRole} = render( + const { getByRole } = render( Button - + , ); const button = getByRole('button'); fireEvent.click(button); @@ -232,14 +232,14 @@ describe('Sidebar', () => { baseTheme="default" theme={TestTheme} elements={{ - SIDEBAR: {backgroundColor: 'colorBackgroundPrimary', margin: 'space50'}, + SIDEBAR: { backgroundColor: 'colorBackgroundPrimary', margin: 'space50' }, SIDEBAR_COLLAPSE_BUTTON: { padding: 'space40', }, SIDEBAR_FOOTER: { padding: 'space40', }, - SIDEBAR_PUSH_CONTENT_WRAPPER: {backgroundColor: 'colorBackgroundPrimary', margin: 'space50'}, + SIDEBAR_PUSH_CONTENT_WRAPPER: { backgroundColor: 'colorBackgroundPrimary', margin: 'space50' }, SIDEBAR_BETA_BADGE: { backgroundColor: 'colorBackgroundAvailable', }, @@ -263,7 +263,7 @@ describe('Sidebar', () => {
    Content area
     -     + , ); const nav = screen.getByRole('complementary'); expect(nav).toHaveStyleRule('margin', '1rem'); @@ -289,8 +289,8 @@ describe('Sidebar', () => { baseTheme="default" theme={TestTheme} elements={{ - XSIDE: {backgroundColor: 'colorBackgroundPrimary', margin: 'space50'}, - XSIDE_WRAPPER: {backgroundColor: 'colorBackgroundPrimary', margin: 'space50'}, + XSIDE: { backgroundColor: 'colorBackgroundPrimary', margin: 'space50' }, + XSIDE_WRAPPER: { backgroundColor: 'colorBackgroundPrimary', margin: 'space50' }, XSIDE_COLLAPSE_BUTTON: { padding: 'space40', }, @@ -326,7 +326,7 @@ describe('Sidebar', () => {
    Content area
     - + , ); const nav = screen.getByRole('complementary'); expect(nav).toHaveStyleRule('margin', '1rem'); diff --git a/packages/paste-core/components/sidebar/__tests__/sidebarNavigation.spec.tsx b/packages/paste-core/components/sidebar/__tests__/sidebarNavigation.spec.tsx index 5540d2fc0a..a4344debdf 100644 --- a/packages/paste-core/components/sidebar/__tests__/sidebarNavigation.spec.tsx +++ b/packages/paste-core/components/sidebar/__tests__/sidebarNavigation.spec.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import {render, screen, fireEvent} from '@testing-library/react'; -import {Theme} from '@twilio-paste/theme'; -import {CustomizationProvider} from '@twilio-paste/customization'; -import {Box} from '@twilio-paste/box'; -import {Button} from '@twilio-paste/button'; -import {ProductFlexIcon} from '@twilio-paste/icons/esm/ProductFlexIcon'; -import {Menu, MenuButton, MenuItem, MenuSeparator, useMenuState} from '@twilio-paste/menu'; -import {ProductContactCenterTasksIcon} from '@twilio-paste/icons/esm/ProductContactCenterTasksIcon'; -import {MoreIcon} from '@twilio-paste/icons/esm/MoreIcon'; +import { render, screen, fireEvent } from '@testing-library/react'; +import { Theme } from '@twilio-paste/theme'; +import { CustomizationProvider } from '@twilio-paste/customization'; +import { Box } from '@twilio-paste/box'; +import { Button } from '@twilio-paste/button'; +import { ProductFlexIcon } from '@twilio-paste/icons/esm/ProductFlexIcon'; +import { Menu, MenuButton, MenuItem, MenuSeparator, useMenuState } from '@twilio-paste/menu'; +import { ProductContactCenterTasksIcon } from '@twilio-paste/icons/esm/ProductContactCenterTasksIcon'; +import { MoreIcon } from '@twilio-paste/icons/esm/MoreIcon'; import { Sidebar, @@ -222,12 +222,12 @@ describe('SidebarNavigation', () => { baseTheme="default" theme={TestTheme} elements={{ - SIDEBAR_NAVIGATION: {margin: 'space100'}, - SIDEBAR_NAVIGATION_ITEM: {margin: 'space100'}, - SIDEBAR_NAVIGATION_DISCLOSURE: {margin: 'space100'}, - SIDEBAR_NAVIGATION_DISCLOSURE_HEADING_WRAPPER: {margin: 'space100'}, - SIDEBAR_NAVIGATION_DISCLOSURE_HEADING: {margin: 'space100'}, - SIDEBAR_NAVIGATION_DISCLOSURE_CONTENT: {margin: 'space100'}, + SIDEBAR_NAVIGATION: { margin: 'space100' }, + SIDEBAR_NAVIGATION_ITEM: { margin: 'space100' }, + SIDEBAR_NAVIGATION_DISCLOSURE: { margin: 'space100' }, + SIDEBAR_NAVIGATION_DISCLOSURE_HEADING_WRAPPER: { margin: 'space100' }, + SIDEBAR_NAVIGATION_DISCLOSURE_HEADING: { margin: 'space100' }, + SIDEBAR_NAVIGATION_DISCLOSURE_CONTENT: { margin: 'space100' }, }} > { - + , ); const nav = screen.getByRole('navigation'); const disclosure = screen.getByTestId('disclosure'); - const disclosureHeading = screen.getByRole('button', {name: 'Heading'}); + const disclosureHeading = screen.getByRole('button', { name: 'Heading' }); const disclosureHeadingWrapper = disclosureHeading.parentElement; const disclosureContent = screen.getByTestId('disclosure-content'); - const buttonItem = screen.getByRole('link', {name: 'ButtonItem'}); - const anchorItem = screen.getByRole('link', {name: 'AnchorItem'}); + const buttonItem = screen.getByRole('link', { name: 'ButtonItem' }); + const anchorItem = screen.getByRole('link', { name: 'AnchorItem' }); expect(nav).toHaveStyleRule('margin', '2.25rem'); expect(disclosure).toHaveStyleRule('margin', '2.25rem'); @@ -285,14 +285,14 @@ describe('SidebarNavigation', () => { baseTheme="default" theme={TestTheme} elements={{ - NAVIGATION: {margin: 'space100'}, - NAVIGATION_ITEM: {margin: 'space100'}, - NAVIGATION_ITEM_ANCHOR: {margin: 'space100'}, - NAVIGATION_ITEM_BUTTON: {margin: 'space100'}, - NAVIGATION_DISCLOSURE: {margin: 'space100'}, - NAVIGATION_DISCLOSURE_HEADING_WRAPPER: {margin: 'space100'}, - NAVIGATION_DISCLOSURE_HEADING: {margin: 'space100'}, - NAVIGATION_DISCLOSURE_CONTENT: {margin: 'space100'}, + NAVIGATION: { margin: 'space100' }, + NAVIGATION_ITEM: { margin: 'space100' }, + NAVIGATION_ITEM_ANCHOR: { margin: 'space100' }, + NAVIGATION_ITEM_BUTTON: { margin: 'space100' }, + NAVIGATION_DISCLOSURE: { margin: 'space100' }, + NAVIGATION_DISCLOSURE_HEADING_WRAPPER: { margin: 'space100' }, + NAVIGATION_DISCLOSURE_HEADING: { margin: 'space100' }, + NAVIGATION_DISCLOSURE_CONTENT: { margin: 'space100' }, }} > { - + , ); const nav = screen.getByRole('navigation'); const disclosure = screen.getByTestId('disclosure'); - const disclosureHeading = screen.getByRole('button', {name: 'Heading'}); + const disclosureHeading = screen.getByRole('button', { name: 'Heading' }); const disclosureHeadingWrapper = disclosureHeading.parentElement; const disclosureContent = screen.getByTestId('disclosure-content'); - const buttonItem = screen.getByRole('link', {name: 'ButtonItem'}); - const anchorItem = screen.getByRole('link', {name: 'AnchorItem'}); + const buttonItem = screen.getByRole('link', { name: 'ButtonItem' }); + const anchorItem = screen.getByRole('link', { name: 'AnchorItem' }); expect(nav).toHaveStyleRule('margin', '2.25rem'); expect(disclosure).toHaveStyleRule('margin', '2.25rem'); diff --git a/packages/paste-core/components/sidebar/__tests__/skipLinks.spec.tsx b/packages/paste-core/components/sidebar/__tests__/skipLinks.spec.tsx index 29ef16459b..f4e0ddc67b 100644 --- a/packages/paste-core/components/sidebar/__tests__/skipLinks.spec.tsx +++ b/packages/paste-core/components/sidebar/__tests__/skipLinks.spec.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; -import {SidebarSkipLinks} from '../src/SidebarSkipLinks'; +import { SidebarSkipLinks } from '../src/SidebarSkipLinks'; describe('SkipLinks', () => { it('should render three links', () => { @@ -13,9 +13,9 @@ describe('SkipLinks', () => { expect(renderedLinks[0]).toHaveAttribute('href', '#ID1'); expect(renderedLinks[1]).toHaveAttribute('href', '#ID2'); expect(renderedLinks[2]).toHaveAttribute('href', '#ID3'); - expect(screen.getByRole('link', {name: /skip to content/i})).toBeInTheDocument(); - expect(screen.getByRole('link', {name: /skip to navigation/i})).toBeInTheDocument(); - expect(screen.getByRole('link', {name: /skip to topbar/i})).toBeInTheDocument(); + expect(screen.getByRole('link', { name: /skip to content/i })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: /skip to navigation/i })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: /skip to topbar/i })).toBeInTheDocument(); }); it('should render translated links', () => { @@ -27,19 +27,21 @@ describe('SkipLinks', () => { i18nMainContentSkipLinkText="translated main" i18nTopbarSkipLinkText="translated topbar" i18nNavigationSkipLinkText="translated nav" - /> + />, ); - expect(screen.getByRole('link', {name: /translated main/i})).toBeInTheDocument(); - expect(screen.getByRole('link', {name: /translated nav/i})).toBeInTheDocument(); - expect(screen.getByRole('link', {name: /translated topbar/i})).toBeInTheDocument(); + expect(screen.getByRole('link', { name: /translated main/i })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: /translated nav/i })).toBeInTheDocument(); + expect(screen.getByRole('link', { name: /translated topbar/i })).toBeInTheDocument(); }); it('should render default element names', () => { render(); - expect(screen.getByRole('link', {name: /skip to content/i}).dataset.pasteElement).toBe('SIDEBAR_SKIPLINKS_LINK'); - expect(screen.getByRole('link', {name: /skip to navigation/i}).dataset.pasteElement).toBe('SIDEBAR_SKIPLINKS_LINK'); - expect(screen.getByRole('link', {name: /skip to topbar/i}).dataset.pasteElement).toBe('SIDEBAR_SKIPLINKS_LINK'); + expect(screen.getByRole('link', { name: /skip to content/i }).dataset.pasteElement).toBe('SIDEBAR_SKIPLINKS_LINK'); + expect(screen.getByRole('link', { name: /skip to navigation/i }).dataset.pasteElement).toBe( + 'SIDEBAR_SKIPLINKS_LINK', + ); + expect(screen.getByRole('link', { name: /skip to topbar/i }).dataset.pasteElement).toBe('SIDEBAR_SKIPLINKS_LINK'); }); it('should render custom element names', () => { @@ -49,10 +51,10 @@ describe('SkipLinks', () => { sidebarNavigationSkipLinkID="ID2" topbarSkipLinkID="ID3" element="CUSTOMLINKS" - /> + />, ); - expect(screen.getByRole('link', {name: /skip to content/i}).dataset.pasteElement).toBe('CUSTOMLINKS_LINK'); - expect(screen.getByRole('link', {name: /skip to navigation/i}).dataset.pasteElement).toBe('CUSTOMLINKS_LINK'); - expect(screen.getByRole('link', {name: /skip to topbar/i}).dataset.pasteElement).toBe('CUSTOMLINKS_LINK'); + expect(screen.getByRole('link', { name: /skip to content/i }).dataset.pasteElement).toBe('CUSTOMLINKS_LINK'); + expect(screen.getByRole('link', { name: /skip to navigation/i }).dataset.pasteElement).toBe('CUSTOMLINKS_LINK'); + expect(screen.getByRole('link', { name: /skip to topbar/i }).dataset.pasteElement).toBe('CUSTOMLINKS_LINK'); }); }); diff --git a/packages/paste-core/components/sidebar/build.js b/packages/paste-core/components/sidebar/build.js index a4edeab49b..ea3c0482a7 100644 --- a/packages/paste-core/components/sidebar/build.js +++ b/packages/paste-core/components/sidebar/build.js @@ -1,3 +1,3 @@ -const {build} = require('../../../../tools/build/esbuild'); +const { build } = require('../../../../tools/build/esbuild'); build(require('./package.json')); diff --git a/packages/paste-core/components/sidebar/src/Sidebar.tsx b/packages/paste-core/components/sidebar/src/Sidebar.tsx index 87089755a7..cb579a258e 100644 --- a/packages/paste-core/components/sidebar/src/Sidebar.tsx +++ b/packages/paste-core/components/sidebar/src/Sidebar.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps, type BoxProps} from '@twilio-paste/box'; -import {useSpring, animated} from '@twilio-paste/animation-library'; -import {useTheme} from '@twilio-paste/theme'; -import {useWindowSize} from '@twilio-paste/utils'; -import {useUID} from '@twilio-paste/uid-library'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps, type BoxProps } from '@twilio-paste/box'; +import { useSpring, animated } from '@twilio-paste/animation-library'; +import { useTheme } from '@twilio-paste/theme'; +import { useWindowSize } from '@twilio-paste/utils'; +import { useUID } from '@twilio-paste/uid-library'; +import type { HTMLPasteProps } from '@twilio-paste/types'; -import {SidebarContext} from './SidebarContext'; -import type {Variants} from './types'; -import {SidebarSkipLinks, type SidebarSkipLinksProps} from './SidebarSkipLinks'; +import { SidebarContext } from './SidebarContext'; +import type { Variants } from './types'; +import { SidebarSkipLinks, type SidebarSkipLinksProps } from './SidebarSkipLinks'; const StyledSidebar = React.forwardRef((props, ref) => ( ( children, ...props }, - ref + ref, ) => { const sidebarId = useUID(); - const {breakpointIndex} = useWindowSize(); + const { breakpointIndex } = useWindowSize(); const theme = useTheme(); const isMobile = breakpointIndex === 0; @@ -106,7 +106,7 @@ export const Sidebar = React.forwardRef( const styles = useSpring(springConfig); return ( - + ( ); - } + }, ); Sidebar.displayName = 'Sidebar'; diff --git a/packages/paste-core/components/sidebar/src/SidebarBetaBadge.tsx b/packages/paste-core/components/sidebar/src/SidebarBetaBadge.tsx index 7b5ad5ddbc..d73f31a72b 100644 --- a/packages/paste-core/components/sidebar/src/SidebarBetaBadge.tsx +++ b/packages/paste-core/components/sidebar/src/SidebarBetaBadge.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import {badgeBaseStyles, useResizeChildIcons} from '@twilio-paste/badge'; -import type {BadgeProps} from '@twilio-paste/badge'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import { badgeBaseStyles, useResizeChildIcons } from '@twilio-paste/badge'; +import type { BadgeProps } from '@twilio-paste/badge'; const SidebarBetaBadgeSpanStyles: BoxProps = { ...badgeBaseStyles, @@ -17,8 +17,8 @@ const SidebarBetaBadgeButtonStyles: BoxProps = { boxShadow: 'shadowBorderBottomInverseNewWeaker', // The following styles are copied from getBadgeButtonStyles() in the Badge package cursor: 'pointer', - _hover: {top: '1px', boxShadow: 'none'}, - _focus: {top: '1px', boxShadow: 'shadowFocusInverse'}, // shadowFocus in Badge + _hover: { top: '1px', boxShadow: 'none' }, + _focus: { top: '1px', boxShadow: 'shadowFocusInverse' }, // shadowFocus in Badge }; type SidebarBetaBadgeProps = Omit & { @@ -26,7 +26,7 @@ type SidebarBetaBadgeProps = Omit & { }; export const SidebarBetaBadge = React.forwardRef( - ({children, as, element = 'SIDEBAR_BETA_BADGE', onClick, ...props}, ref) => { + ({ children, as, element = 'SIDEBAR_BETA_BADGE', onClick, ...props }, ref) => { const resizedChildren = useResizeChildIcons(children); const styles = as === 'button' ? SidebarBetaBadgeButtonStyles : SidebarBetaBadgeSpanStyles; // We don't want the provided onClick to function if as = span @@ -37,7 +37,7 @@ export const SidebarBetaBadge = React.forwardRef ); - } + }, ); SidebarBetaBadge.displayName = 'SidebarBetaBadge'; diff --git a/packages/paste-core/components/sidebar/src/SidebarBody.tsx b/packages/paste-core/components/sidebar/src/SidebarBody.tsx index 41f6156b17..d227afc384 100644 --- a/packages/paste-core/components/sidebar/src/SidebarBody.tsx +++ b/packages/paste-core/components/sidebar/src/SidebarBody.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import type { HTMLPasteProps } from '@twilio-paste/types'; export interface SidebarBodyProps extends HTMLPasteProps<'div'> { children: React.ReactNode; @@ -9,7 +9,7 @@ export interface SidebarBodyProps extends HTMLPasteProps<'div'> { } export const SidebarBody = React.forwardRef( - ({element = 'SIDEBAR_BODY', children, ...props}, ref) => { + ({ element = 'SIDEBAR_BODY', children, ...props }, ref) => { return ( ( {children} ); - } + }, ); SidebarBody.displayName = 'SidebarBody'; diff --git a/packages/paste-core/components/sidebar/src/SidebarContext.tsx b/packages/paste-core/components/sidebar/src/SidebarContext.tsx index ada77f2acf..e8201c32c9 100644 --- a/packages/paste-core/components/sidebar/src/SidebarContext.tsx +++ b/packages/paste-core/components/sidebar/src/SidebarContext.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import type {Variants} from './types'; +import type { Variants } from './types'; interface SidebarState { sidebarId: string; diff --git a/packages/paste-core/components/sidebar/src/SidebarSkipLinks.tsx b/packages/paste-core/components/sidebar/src/SidebarSkipLinks.tsx index 5d738d0da4..9c4a2cd11a 100644 --- a/packages/paste-core/components/sidebar/src/SidebarSkipLinks.tsx +++ b/packages/paste-core/components/sidebar/src/SidebarSkipLinks.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import {Box} from '@twilio-paste/box'; -import {Anchor} from '@twilio-paste/anchor'; +import { Box } from '@twilio-paste/box'; +import { Anchor } from '@twilio-paste/anchor'; -export const SidebarSkipLinkContainer: React.FC> = ({ +export const SidebarSkipLinkContainer: React.FC> = ({ element, children, }) => { @@ -22,7 +22,7 @@ export const SidebarSkipLinkContainer: React.FC {children} diff --git a/packages/paste-core/components/sidebar/src/content-wrappers/SidebarOverlayContentWrapper.tsx b/packages/paste-core/components/sidebar/src/content-wrappers/SidebarOverlayContentWrapper.tsx index a716a1fd06..90a580a126 100644 --- a/packages/paste-core/components/sidebar/src/content-wrappers/SidebarOverlayContentWrapper.tsx +++ b/packages/paste-core/components/sidebar/src/content-wrappers/SidebarOverlayContentWrapper.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import {useWindowSize} from '@twilio-paste/utils'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import { useWindowSize } from '@twilio-paste/utils'; +import type { HTMLPasteProps } from '@twilio-paste/types'; -import type {Variants} from '../types'; +import type { Variants } from '../types'; export interface SidebarOverlayContentWrapper extends HTMLPasteProps<'div'> { children: React.ReactNode; @@ -14,8 +14,8 @@ export interface SidebarOverlayContentWrapper extends HTMLPasteProps<'div'> { } export const SidebarOverlayContentWrapper = React.forwardRef( - ({variant = 'default', element = 'SIDEBAR_OVERLAY_CONTENT_WRAPPER', children, ...props}, ref) => { - const {breakpointIndex} = useWindowSize(); + ({ variant = 'default', element = 'SIDEBAR_OVERLAY_CONTENT_WRAPPER', children, ...props }, ref) => { + const { breakpointIndex } = useWindowSize(); const isMobile = breakpointIndex === 0; if (!isMobile && variant === 'compact') { @@ -33,6 +33,6 @@ export const SidebarOverlayContentWrapper = React.forwardRef ); - } + }, ); SidebarOverlayContentWrapper.displayName = 'SidebarOverlayContentWrapper'; diff --git a/packages/paste-core/components/sidebar/src/content-wrappers/SidebarPushContentWrapper.tsx b/packages/paste-core/components/sidebar/src/content-wrappers/SidebarPushContentWrapper.tsx index 64e0f93155..2a3fadacf2 100644 --- a/packages/paste-core/components/sidebar/src/content-wrappers/SidebarPushContentWrapper.tsx +++ b/packages/paste-core/components/sidebar/src/content-wrappers/SidebarPushContentWrapper.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import {useSpring, animated} from '@twilio-paste/animation-library'; -import {useTheme} from '@twilio-paste/theme'; -import {useWindowSize} from '@twilio-paste/utils'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import { useSpring, animated } from '@twilio-paste/animation-library'; +import { useTheme } from '@twilio-paste/theme'; +import { useWindowSize } from '@twilio-paste/utils'; +import type { HTMLPasteProps } from '@twilio-paste/types'; -import type {Variants} from '../types'; +import type { Variants } from '../types'; const StyledContentWrapper = React.forwardRef((props, ref) => ( @@ -22,10 +22,10 @@ export interface SidebarPushContentWrapperProps extends HTMLPasteProps<'div'> { } export const SidebarPushContentWrapper = React.forwardRef( - ({collapsed = false, variant = 'default', element = 'SIDEBAR_PUSH_CONTENT_WRAPPER', children, ...props}, ref) => { + ({ collapsed = false, variant = 'default', element = 'SIDEBAR_PUSH_CONTENT_WRAPPER', children, ...props }, ref) => { const theme = useTheme(); const isCompact = variant === 'compact'; - const {breakpointIndex} = useWindowSize(); + const { breakpointIndex } = useWindowSize(); const styles = useSpring({ // eslint-disable-next-line unicorn/no-nested-ternary @@ -49,6 +49,6 @@ export const SidebarPushContentWrapper = React.forwardRef ); - } + }, ); SidebarPushContentWrapper.displayName = 'SidebarPushContentWrapper'; diff --git a/packages/paste-core/components/sidebar/src/footer/SidebarCollapseButton.tsx b/packages/paste-core/components/sidebar/src/footer/SidebarCollapseButton.tsx index 2de0df4b1b..48be1a2082 100644 --- a/packages/paste-core/components/sidebar/src/footer/SidebarCollapseButton.tsx +++ b/packages/paste-core/components/sidebar/src/footer/SidebarCollapseButton.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; -import {Button} from '@twilio-paste/button'; -import {Box, type BoxProps} from '@twilio-paste/box'; -import {ScreenReaderOnly} from '@twilio-paste/screen-reader-only'; -import {ChevronDoubleLeftIcon} from '@twilio-paste/icons/esm/ChevronDoubleLeftIcon'; -import {ChevronDoubleRightIcon} from '@twilio-paste/icons/esm/ChevronDoubleRightIcon'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Button } from '@twilio-paste/button'; +import { Box, type BoxProps } from '@twilio-paste/box'; +import { ScreenReaderOnly } from '@twilio-paste/screen-reader-only'; +import { ChevronDoubleLeftIcon } from '@twilio-paste/icons/esm/ChevronDoubleLeftIcon'; +import { ChevronDoubleRightIcon } from '@twilio-paste/icons/esm/ChevronDoubleRightIcon'; +import type { HTMLPasteProps } from '@twilio-paste/types'; -import {SidebarContext} from '../SidebarContext'; +import { SidebarContext } from '../SidebarContext'; export interface SidebarCollapseButtonProps extends HTMLPasteProps<'button'> { i18nCollapseLabel: string; @@ -16,8 +16,8 @@ export interface SidebarCollapseButtonProps extends HTMLPasteProps<'button'> { } export const SidebarCollapseButton = React.forwardRef( - ({i18nExpandLabel, i18nCollapseLabel, element = 'SIDEBAR_COLLAPSE_BUTTON', ...props}, ref) => { - const {collapsed, sidebarId} = React.useContext(SidebarContext); + ({ i18nExpandLabel, i18nCollapseLabel, element = 'SIDEBAR_COLLAPSE_BUTTON', ...props }, ref) => { + const { collapsed, sidebarId } = React.useContext(SidebarContext); return ( @@ -45,7 +45,7 @@ export const SidebarCollapseButton = React.forwardRef ); - } + }, ); SidebarCollapseButton.displayName = 'SidebarCollapseButton'; diff --git a/packages/paste-core/components/sidebar/src/footer/SidebarFooter.tsx b/packages/paste-core/components/sidebar/src/footer/SidebarFooter.tsx index 32e6b27029..d00f9fda14 100644 --- a/packages/paste-core/components/sidebar/src/footer/SidebarFooter.tsx +++ b/packages/paste-core/components/sidebar/src/footer/SidebarFooter.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; export const SidebarFooter = React.forwardRef( - ({element = 'SIDEBAR_FOOTER', ...props}, ref) => { + ({ element = 'SIDEBAR_FOOTER', ...props }, ref) => { return ( ( element={element} /> ); - } + }, ); SidebarFooter.displayName = 'SidebarFooter'; diff --git a/packages/paste-core/components/sidebar/src/header/SidebarHeader.tsx b/packages/paste-core/components/sidebar/src/header/SidebarHeader.tsx index 4d7b401145..8c6855a717 100644 --- a/packages/paste-core/components/sidebar/src/header/SidebarHeader.tsx +++ b/packages/paste-core/components/sidebar/src/header/SidebarHeader.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; -import type {HTMLPasteProps} from '@twilio-paste/types'; +import { Box, safelySpreadBoxProps } from '@twilio-paste/box'; +import type { BoxProps } from '@twilio-paste/box'; +import type { HTMLPasteProps } from '@twilio-paste/types'; export interface SidebarHeaderProps extends HTMLPasteProps<'button'> { children: React.ReactNode; @@ -9,7 +9,7 @@ export interface SidebarHeaderProps extends HTMLPasteProps<'button'> { } export const SidebarHeader = React.forwardRef( - ({element = 'SIDEBAR_HEADER', children, ...props}, ref) => { + ({ element = 'SIDEBAR_HEADER', children, ...props }, ref) => { return ( ); - } + }, ); SidebarHeader.displayName = 'SidebarHeader'; diff --git a/packages/paste-core/components/sidebar/src/header/SidebarHeaderIconButton.tsx b/packages/paste-core/components/sidebar/src/header/SidebarHeaderIconButton.tsx index 041cfbbe0c..cd2bae984d 100644 --- a/packages/paste-core/components/sidebar/src/header/SidebarHeaderIconButton.tsx +++ b/packages/paste-core/components/sidebar/src/header/SidebarHeaderIconButton.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import {Button} from '@twilio-paste/button'; -import type {ButtonProps} from '@twilio-paste/button'; -import type {BoxProps} from '@twilio-paste/box'; +import { Button } from '@twilio-paste/button'; +import type { ButtonProps } from '@twilio-paste/button'; +import type { BoxProps } from '@twilio-paste/box'; export interface SidebarHeaderIconButtonProps extends Omit { children: NonNullable; @@ -12,9 +12,9 @@ export interface SidebarHeaderIconButtonProps extends Omit( - ({element = 'SIDEBAR_HEADER_ICON_BUTTON', ...props}, ref) => { + ({ element = 'SIDEBAR_HEADER_ICON_BUTTON', ...props }, ref) => { return