From 79951df18cdec3bc01bacae778fd37bd6febc486 Mon Sep 17 00:00:00 2001 From: Tyler Krys Date: Wed, 20 Mar 2024 16:11:26 -0700 Subject: [PATCH 1/6] Bump devDependencies to latest --- packages/react-components/package-lock.json | 425 +------------------- packages/react-components/package.json | 4 +- 2 files changed, 20 insertions(+), 409 deletions(-) diff --git a/packages/react-components/package-lock.json b/packages/react-components/package-lock.json index 6a3f60bb..0719a1f8 100644 --- a/packages/react-components/package-lock.json +++ b/packages/react-components/package-lock.json @@ -41,8 +41,8 @@ "rollup-plugin-postcss": "^4.0.2", "storybook": "^8.0.2", "tslib": "^2.6.2", - "typescript": "^5.4.2", - "vite": "^5.1.6" + "typescript": "^5.4.3", + "vite": "^5.2.2" }, "peerDependencies": { "@bcgov/bc-sans": "^2.1.0", @@ -12585,9 +12585,9 @@ } }, "node_modules/postcss": { - "version": "8.4.35", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz", - "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==", + "version": "8.4.37", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.37.tgz", + "integrity": "sha512-7iB/v/r7Woof0glKLH8b1SPHrsX7uhdO+Geb41QpF/+mWZHU3uxxSlN+UXGVit1PawOYDToO+AbZzhBzWRDwbQ==", "dev": true, "funding": [ { @@ -12606,7 +12606,7 @@ "dependencies": { "nanoid": "^3.3.7", "picocolors": "^1.0.0", - "source-map-js": "^1.0.2" + "source-map-js": "^1.2.0" }, "engines": { "node": "^10 || ^12 || >=14" @@ -14427,9 +14427,9 @@ } }, "node_modules/source-map-js": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", - "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", + "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", "dev": true, "engines": { "node": ">=0.10.0" @@ -15081,9 +15081,9 @@ } }, "node_modules/typescript": { - "version": "5.4.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz", - "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==", + "version": "5.4.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.3.tgz", + "integrity": "sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==", "dev": true, "bin": { "tsc": "bin/tsc", @@ -15362,14 +15362,14 @@ } }, "node_modules/vite": { - "version": "5.1.6", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.6.tgz", - "integrity": "sha512-yYIAZs9nVfRJ/AiOLCA91zzhjsHUgMjB+EigzFb6W2XTLO8JixBCKCjvhKZaye+NKYHCrkv3Oh50dH9EdLU2RA==", + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.2.tgz", + "integrity": "sha512-FWZbz0oSdLq5snUI0b6sULbz58iXFXdvkZfZWR/F0ZJuKTSPO7v72QPXt6KqYeMFb0yytNp6kZosxJ96Nr/wDQ==", "dev": true, "dependencies": { - "esbuild": "^0.19.3", - "postcss": "^8.4.35", - "rollup": "^4.2.0" + "esbuild": "^0.20.1", + "postcss": "^8.4.36", + "rollup": "^4.13.0" }, "bin": { "vite": "bin/vite.js" @@ -15416,395 +15416,6 @@ } } }, - "node_modules/vite/node_modules/@esbuild/android-arm": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.8.tgz", - "integrity": "sha512-31E2lxlGM1KEfivQl8Yf5aYU/mflz9g06H6S15ITUFQueMFtFjESRMoDSkvMo8thYvLBax+VKTPlpnx+sPicOA==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/android-arm64": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.8.tgz", - "integrity": "sha512-B8JbS61bEunhfx8kasogFENgQfr/dIp+ggYXwTqdbMAgGDhRa3AaPpQMuQU0rNxDLECj6FhDzk1cF9WHMVwrtA==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/android-x64": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.8.tgz", - "integrity": "sha512-rdqqYfRIn4jWOp+lzQttYMa2Xar3OK9Yt2fhOhzFXqg0rVWEfSclJvZq5fZslnz6ypHvVf3CT7qyf0A5pM682A==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/darwin-arm64": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.8.tgz", - "integrity": "sha512-RQw9DemMbIq35Bprbboyf8SmOr4UXsRVxJ97LgB55VKKeJOOdvsIPy0nFyF2l8U+h4PtBx/1kRf0BelOYCiQcw==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/darwin-x64": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.8.tgz", - "integrity": "sha512-3sur80OT9YdeZwIVgERAysAbwncom7b4bCI2XKLjMfPymTud7e/oY4y+ci1XVp5TfQp/bppn7xLw1n/oSQY3/Q==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/freebsd-arm64": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.8.tgz", - "integrity": "sha512-WAnPJSDattvS/XtPCTj1tPoTxERjcTpH6HsMr6ujTT+X6rylVe8ggxk8pVxzf5U1wh5sPODpawNicF5ta/9Tmw==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/freebsd-x64": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.8.tgz", - "integrity": "sha512-ICvZyOplIjmmhjd6mxi+zxSdpPTKFfyPPQMQTK/w+8eNK6WV01AjIztJALDtwNNfFhfZLux0tZLC+U9nSyA5Zg==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-arm": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.8.tgz", - "integrity": "sha512-H4vmI5PYqSvosPaTJuEppU9oz1dq2A7Mr2vyg5TF9Ga+3+MGgBdGzcyBP7qK9MrwFQZlvNyJrvz6GuCaj3OukQ==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-arm64": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.8.tgz", - "integrity": "sha512-z1zMZivxDLHWnyGOctT9JP70h0beY54xDDDJt4VpTX+iwA77IFsE1vCXWmprajJGa+ZYSqkSbRQ4eyLCpCmiCQ==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-ia32": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.8.tgz", - "integrity": "sha512-1a8suQiFJmZz1khm/rDglOc8lavtzEMRo0v6WhPgxkrjcU0LkHj+TwBrALwoz/OtMExvsqbbMI0ChyelKabSvQ==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-loong64": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.8.tgz", - "integrity": "sha512-fHZWS2JJxnXt1uYJsDv9+b60WCc2RlvVAy1F76qOLtXRO+H4mjt3Tr6MJ5l7Q78X8KgCFudnTuiQRBhULUyBKQ==", - "cpu": [ - "loong64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-mips64el": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.8.tgz", - "integrity": "sha512-Wy/z0EL5qZYLX66dVnEg9riiwls5IYnziwuju2oUiuxVc+/edvqXa04qNtbrs0Ukatg5HEzqT94Zs7J207dN5Q==", - "cpu": [ - "mips64el" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-ppc64": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.8.tgz", - "integrity": "sha512-ETaW6245wK23YIEufhMQ3HSeHO7NgsLx8gygBVldRHKhOlD1oNeNy/P67mIh1zPn2Hr2HLieQrt6tWrVwuqrxg==", - "cpu": [ - "ppc64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-riscv64": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.8.tgz", - "integrity": "sha512-T2DRQk55SgoleTP+DtPlMrxi/5r9AeFgkhkZ/B0ap99zmxtxdOixOMI570VjdRCs9pE4Wdkz7JYrsPvsl7eESg==", - "cpu": [ - "riscv64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-s390x": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.8.tgz", - "integrity": "sha512-NPxbdmmo3Bk7mbNeHmcCd7R7fptJaczPYBaELk6NcXxy7HLNyWwCyDJ/Xx+/YcNH7Im5dHdx9gZ5xIwyliQCbg==", - "cpu": [ - "s390x" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/linux-x64": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.8.tgz", - "integrity": "sha512-lytMAVOM3b1gPypL2TRmZ5rnXl7+6IIk8uB3eLsV1JwcizuolblXRrc5ShPrO9ls/b+RTp+E6gbsuLWHWi2zGg==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/netbsd-x64": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.8.tgz", - "integrity": "sha512-hvWVo2VsXz/8NVt1UhLzxwAfo5sioj92uo0bCfLibB0xlOmimU/DeAEsQILlBQvkhrGjamP0/el5HU76HAitGw==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "netbsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/openbsd-x64": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.8.tgz", - "integrity": "sha512-/7Y7u77rdvmGTxR83PgaSvSBJCC2L3Kb1M/+dmSIvRvQPXXCuC97QAwMugBNG0yGcbEGfFBH7ojPzAOxfGNkwQ==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "openbsd" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/sunos-x64": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.8.tgz", - "integrity": "sha512-9Lc4s7Oi98GqFA4HzA/W2JHIYfnXbUYgekUP/Sm4BG9sfLjyv6GKKHKKVs83SMicBF2JwAX6A1PuOLMqpD001w==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "sunos" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/win32-arm64": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.8.tgz", - "integrity": "sha512-rq6WzBGjSzihI9deW3fC2Gqiak68+b7qo5/3kmB6Gvbh/NYPA0sJhrnp7wgV4bNwjqM+R2AApXGxMO7ZoGhIJg==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/win32-ia32": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.8.tgz", - "integrity": "sha512-AIAbverbg5jMvJznYiGhrd3sumfwWs8572mIJL5NQjJa06P8KfCPWZQ0NwZbPQnbQi9OWSZhFVSUWjjIrn4hSw==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/@esbuild/win32-x64": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.8.tgz", - "integrity": "sha512-bfZ0cQ1uZs2PqpulNL5j/3w+GDhP36k1K5c38QdQg+Swy51jFZWWeIkteNsufkQxp986wnqRRsb/bHbY1WQ7TA==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">=12" - } - }, - "node_modules/vite/node_modules/esbuild": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.8.tgz", - "integrity": "sha512-l7iffQpT2OrZfH2rXIp7/FkmaeZM0vxbxN9KfiCwGYuZqzMg/JdvX26R31Zxn/Pxvsrg3Y9N6XTcnknqDyyv4w==", - "dev": true, - "hasInstallScript": true, - "bin": { - "esbuild": "bin/esbuild" - }, - "engines": { - "node": ">=12" - }, - "optionalDependencies": { - "@esbuild/android-arm": "0.19.8", - "@esbuild/android-arm64": "0.19.8", - "@esbuild/android-x64": "0.19.8", - "@esbuild/darwin-arm64": "0.19.8", - "@esbuild/darwin-x64": "0.19.8", - "@esbuild/freebsd-arm64": "0.19.8", - "@esbuild/freebsd-x64": "0.19.8", - "@esbuild/linux-arm": "0.19.8", - "@esbuild/linux-arm64": "0.19.8", - "@esbuild/linux-ia32": "0.19.8", - "@esbuild/linux-loong64": "0.19.8", - "@esbuild/linux-mips64el": "0.19.8", - "@esbuild/linux-ppc64": "0.19.8", - "@esbuild/linux-riscv64": "0.19.8", - "@esbuild/linux-s390x": "0.19.8", - "@esbuild/linux-x64": "0.19.8", - "@esbuild/netbsd-x64": "0.19.8", - "@esbuild/openbsd-x64": "0.19.8", - "@esbuild/sunos-x64": "0.19.8", - "@esbuild/win32-arm64": "0.19.8", - "@esbuild/win32-ia32": "0.19.8", - "@esbuild/win32-x64": "0.19.8" - } - }, "node_modules/watchpack": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz", diff --git a/packages/react-components/package.json b/packages/react-components/package.json index 58658437..4ee8371a 100644 --- a/packages/react-components/package.json +++ b/packages/react-components/package.json @@ -55,8 +55,8 @@ "rollup-plugin-postcss": "^4.0.2", "storybook": "^8.0.2", "tslib": "^2.6.2", - "typescript": "^5.4.2", - "vite": "^5.1.6" + "typescript": "^5.4.3", + "vite": "^5.2.2" }, "author": "Tyler Krys ", "license": "Apache-2.0", From 40fa08c6c7064b37e229363f337a6a0a7220c4fa Mon Sep 17 00:00:00 2001 From: Tyler Krys Date: Wed, 20 Mar 2024 16:15:04 -0700 Subject: [PATCH 2/6] Add Tooltip and TooltipTrigger components --- .../src/assets/tooltip-arrow-up.svg | 3 + .../src/components/Tooltip/Tooltip.css | 80 +++++++++++++++++++ .../src/components/Tooltip/Tooltip.tsx | 44 ++++++++++ .../src/components/Tooltip/index.ts | 2 + .../react-components/src/components/index.ts | 1 + 5 files changed, 130 insertions(+) create mode 100644 packages/react-components/src/assets/tooltip-arrow-up.svg create mode 100644 packages/react-components/src/components/Tooltip/Tooltip.css create mode 100644 packages/react-components/src/components/Tooltip/Tooltip.tsx create mode 100644 packages/react-components/src/components/Tooltip/index.ts diff --git a/packages/react-components/src/assets/tooltip-arrow-up.svg b/packages/react-components/src/assets/tooltip-arrow-up.svg new file mode 100644 index 00000000..fba2d5aa --- /dev/null +++ b/packages/react-components/src/assets/tooltip-arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/react-components/src/components/Tooltip/Tooltip.css b/packages/react-components/src/components/Tooltip/Tooltip.css new file mode 100644 index 00000000..61282070 --- /dev/null +++ b/packages/react-components/src/components/Tooltip/Tooltip.css @@ -0,0 +1,80 @@ +.bcds-react-aria-Tooltip { + background-color: var(--surface-brand-gray-110); + border-radius: var(--surface-border-radius-medium); + box-shadow: var(--surface-shadow-small); + color: var(--typography-color-primary-invert); + font: var(--typography-regular-label); + padding: var(--layout-padding-xsmall) var(--layout-padding-small); + transform: translate3d(0, 0, 0); +} + +.bcds-react-aria-Tooltip > .bcds-react-aria-OverlayArrow { + color: var(--surface-brand-gray-110); +} + +.bcds-react-aria-Tooltip[data-placement="top"] > .bcds-react-aria-OverlayArrow, +.bcds-react-aria-Tooltip[data-placement="bottom"] + > .bcds-react-aria-OverlayArrow { + height: 9px; + width: 19px; +} + +.bcds-react-aria-Tooltip[data-placement="right"] + > .bcds-react-aria-OverlayArrow, +.bcds-react-aria-Tooltip[data-placement="left"] + > .bcds-react-aria-OverlayArrow { + height: 19px; + width: 9px; +} + +/* Top placement */ +.bcds-react-aria-Tooltip[data-placement="top"] { + margin-bottom: 10px; /* Offset is equal to the depth of the OverlayArrow */ +} +.bcds-react-aria-Tooltip[data-placement="top"] > .bcds-react-aria-OverlayArrow { + margin-top: -7.5px; +} +.bcds-react-aria-Tooltip[data-placement="top"] + > .bcds-react-aria-OverlayArrow + > svg { + transform: rotate(180deg); +} + +/* Right placement */ +.bcds-react-aria-Tooltip[data-placement="right"] { + margin-left: 10px; +} +.bcds-react-aria-Tooltip[data-placement="right"] + > .bcds-react-aria-OverlayArrow { + margin-top: -2px; + margin-right: 4.5px; +} +.bcds-react-aria-Tooltip[data-placement="right"] + > .bcds-react-aria-OverlayArrow + > svg { + transform: rotate(-90deg); +} + +/* Bottom placement */ +.bcds-react-aria-Tooltip[data-placement="bottom"] { + margin-top: 9px; +} +.bcds-react-aria-Tooltip[data-placement="bottom"] + > .bcds-react-aria-OverlayArrow { + margin-bottom: 6.5px; +} + +/* Left placement */ +.bcds-react-aria-Tooltip[data-placement="left"] { + margin-right: 10px; +} +.bcds-react-aria-Tooltip[data-placement="left"] + > .bcds-react-aria-OverlayArrow { + margin-top: -2px; + margin-left: -5.5px; +} +.bcds-react-aria-Tooltip[data-placement="left"] + > .bcds-react-aria-OverlayArrow + > svg { + transform: rotate(90deg); +} diff --git a/packages/react-components/src/components/Tooltip/Tooltip.tsx b/packages/react-components/src/components/Tooltip/Tooltip.tsx new file mode 100644 index 00000000..98e67cd9 --- /dev/null +++ b/packages/react-components/src/components/Tooltip/Tooltip.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import { + OverlayArrow, + Tooltip as ReactAriaTooltip, + TooltipProps, + TooltipTrigger, +} from "react-aria-components"; + +import "./Tooltip.css"; + +// This tooltip arrow is available as a plain SVG at src/assets/tooltip-arrow-up.svg +function SvgTooltipArrowUp() { + return ( + + + + ); +} + +export default function Tooltip({ + children, + ...props +}: React.PropsWithChildren) { + return ( + + + {/* Up arrow gets rotated by CSS depending on `data-placement` attribute */} + + + {children} + + ); +} + +export { TooltipTrigger }; diff --git a/packages/react-components/src/components/Tooltip/index.ts b/packages/react-components/src/components/Tooltip/index.ts new file mode 100644 index 00000000..97176603 --- /dev/null +++ b/packages/react-components/src/components/Tooltip/index.ts @@ -0,0 +1,2 @@ +export { default, TooltipTrigger } from "./Tooltip"; +export type { TooltipProps } from "./Tooltip"; diff --git a/packages/react-components/src/components/index.ts b/packages/react-components/src/components/index.ts index 347ce958..d5e36eaf 100644 --- a/packages/react-components/src/components/index.ts +++ b/packages/react-components/src/components/index.ts @@ -8,3 +8,4 @@ export { default as SvgBcLogo } from "./SvgBcLogo"; export { default as Tag } from "./Tag"; export { default as TagGroup } from "./TagGroup"; export { default as TagList } from "./TagList"; +export { default as Tooltip, TooltipTrigger } from "./Tooltip"; From 17e5871e510bc08fa3c9ea05e0bcea16ce81fc5f Mon Sep 17 00:00:00 2001 From: Tyler Krys Date: Wed, 20 Mar 2024 16:17:28 -0700 Subject: [PATCH 3/6] Add Storybook stories for Tooltip component --- .../react-components/src/stories/Tooltip.mdx | 64 ++++++++++++++ .../src/stories/Tooltip.stories.tsx | 83 +++++++++++++++++++ 2 files changed, 147 insertions(+) create mode 100644 packages/react-components/src/stories/Tooltip.mdx create mode 100644 packages/react-components/src/stories/Tooltip.stories.tsx diff --git a/packages/react-components/src/stories/Tooltip.mdx b/packages/react-components/src/stories/Tooltip.mdx new file mode 100644 index 00000000..e7e22312 --- /dev/null +++ b/packages/react-components/src/stories/Tooltip.mdx @@ -0,0 +1,64 @@ +{/* Tooltip.mdx */} + +import { Canvas, Controls, Meta, Story } from "@storybook/blocks"; + +import * as TooltipStories from "./Tooltip.stories"; + + + +# Tooltip + +A Tooltip displays a description of an element on hover or focus. It is built using the [React Aria Tooltip](https://react-spectrum.adobe.com/react-aria/Tooltip.html). + + + +## Tooltip sits inside a TooltipTrigger + +To make a Tooltip appear, it must sit inside of a `TooltipTrigger`, as a sibling of an element that is hover-able or focus-able. + +```jsx + + + + This text appears when the button is hovered or focused. + + +``` + +## `children` + +Use the `children` prop for the descriptive text within the Tooltip. + +## Placement + +The optional `placement` prop determines where the Tooltip displays in relation to the trigger element within `TooltipTrigger`. + +See the React Aria Components [Tooltip props documentation](https://react-spectrum.adobe.com/react-aria/Tooltip.html#tooltip-1) for all options. + +### Top + + + +### Right + + + +### Bottom + + + +### Left + + + +## Delay + +You can control the pop-in `delay` and pop-out `closeDelay` props on the `TooltipTrigger` parent element. See React Aria Components [TooltipTrigger props documentation](https://react-spectrum.adobe.com/react-aria/Tooltip.html#tooltip-1). + + + +## Accessibility + +An active Tooltip can be dismissed by pressing the Escape key, in addition to a blur or mouse-out event. + +Learn more about the [ARIA tooltip role at MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role). diff --git a/packages/react-components/src/stories/Tooltip.stories.tsx b/packages/react-components/src/stories/Tooltip.stories.tsx new file mode 100644 index 00000000..5074e03b --- /dev/null +++ b/packages/react-components/src/stories/Tooltip.stories.tsx @@ -0,0 +1,83 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import Button from "../components/Button"; +import Tooltip, { TooltipProps, TooltipTrigger } from "../components/Tooltip"; + +const meta = { + title: "Components/Tooltip/Tooltip", + component: Tooltip, + parameters: { + layout: "centered", + }, + argTypes: { + placement: { + options: ["top", "right", "bottom", "left"], + control: { type: "radio" }, + description: + "Where the Tooltip gets placed in relation to the TooltipTrigger", + }, + children: { + control: { type: "text" }, + description: "Appears in the body of the Tooltip", + }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const TooltipTemplate: Story = { + args: { + children: "Tooltip text", + }, + render: ({ ...args }: TooltipProps) => ( + + + + + ), +}; + +export const TopPlacement: Story = { + ...TooltipTemplate, + args: { + children: "Top placement example", + placement: "top", + }, +}; + +export const RightPlacement: Story = { + ...TooltipTemplate, + args: { + children: "Right placement example", + placement: "right", + }, +}; + +export const BottomPlacement: Story = { + ...TooltipTemplate, + args: { + children: "Bottom placement example", + placement: "bottom", + }, +}; + +export const LeftPlacement: Story = { + ...TooltipTemplate, + args: { + children: "Left placement example", + placement: "left", + }, +}; + +export const Delay: Story = { + args: { + children: "Enters immediately, exits after 3 seconds", + }, + render: ({ ...args }) => ( + + + + + ), +}; From f8528becd48da1cbcdb2b76169d022288e7d8145 Mon Sep 17 00:00:00 2001 From: Tyler Krys Date: Wed, 20 Mar 2024 16:18:19 -0700 Subject: [PATCH 4/6] Add Tooltip example to Vite kitchen sink app --- packages/react-components/src/App.tsx | 3 +- .../src/pages/Tooltip/Tooltip.tsx | 68 +++++++++++++++++++ .../src/pages/Tooltip/index.ts | 3 + packages/react-components/src/pages/index.ts | 3 +- 4 files changed, 75 insertions(+), 2 deletions(-) create mode 100644 packages/react-components/src/pages/Tooltip/Tooltip.tsx create mode 100644 packages/react-components/src/pages/Tooltip/index.ts diff --git a/packages/react-components/src/App.tsx b/packages/react-components/src/App.tsx index 2cc8112b..da69245e 100644 --- a/packages/react-components/src/App.tsx +++ b/packages/react-components/src/App.tsx @@ -6,7 +6,7 @@ import "@bcgov/bc-sans/css/BC_Sans.css"; import { Button, Footer, FooterLinks, Header } from "@/components"; import useWindowDimensions from "@/hooks/useWindowDimensions"; -import { ButtonPage, SelectPage, TagGroupPage } from "@/pages"; +import { ButtonPage, SelectPage, TagGroupPage, TooltipPage } from "@/pages"; // This icon is available as a plain SVG at src/assets/icon-menu.svg function SvgMenuIcon() { @@ -117,6 +117,7 @@ function App() { +