diff --git a/browser/package-lock.json b/browser/package-lock.json index e9ef98c0c9..3aae5f1550 100644 --- a/browser/package-lock.json +++ b/browser/package-lock.json @@ -53,6 +53,7 @@ "@babel/plugin-proposal-private-property-in-object": "~7.21.11", "@babel/plugin-transform-class-static-block": "^7.26.0", "@babel/plugin-transform-private-property-in-object": "^7.25.9", + "@tailwindcss/vite": "^4.3.3", "@types/gulp": "^4.0.6", "@types/jest": "^29.2.0", "@types/node": "^24.7.1", @@ -91,6 +92,7 @@ "remark-frontmatter": "^2.0.0", "run-sequence": "^2.2.1", "sass": "^1.97.3", + "tailwindcss": "^4.3.3", "ts-loader": "^9.5.4", "ts-node": "^10.9.2", "typescript": "^4.8.4", @@ -2186,6 +2188,344 @@ "dev": true, "license": "MIT" }, + "node_modules/@tailwindcss/node": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.3.tgz", + "integrity": "sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/remapping": "^2.3.5", + "enhanced-resolve": "^5.24.1", + "jiti": "^2.7.0", + "lightningcss": "1.32.0", + "magic-string": "^0.30.21", + "source-map-js": "^1.2.1", + "tailwindcss": "4.3.3" + } + }, + "node_modules/@tailwindcss/oxide": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.3.tgz", + "integrity": "sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 20" + }, + "optionalDependencies": { + "@tailwindcss/oxide-android-arm64": "4.3.3", + "@tailwindcss/oxide-darwin-arm64": "4.3.3", + "@tailwindcss/oxide-darwin-x64": "4.3.3", + "@tailwindcss/oxide-freebsd-x64": "4.3.3", + "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.3", + "@tailwindcss/oxide-linux-arm64-gnu": "4.3.3", + "@tailwindcss/oxide-linux-arm64-musl": "4.3.3", + "@tailwindcss/oxide-linux-x64-gnu": "4.3.3", + "@tailwindcss/oxide-linux-x64-musl": "4.3.3", + "@tailwindcss/oxide-wasm32-wasi": "4.3.3", + "@tailwindcss/oxide-win32-arm64-msvc": "4.3.3", + "@tailwindcss/oxide-win32-x64-msvc": "4.3.3" + } + }, + "node_modules/@tailwindcss/oxide-android-arm64": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.3.tgz", + "integrity": "sha512-Y85A2gmPSkl5Ve5qR86GL4HT509cFqQh1aes9p3sSkyTPwt0Pppf3GkwGe4JPACcRYjgJIEhQgM6dBClnr0NYw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-darwin-arm64": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.3.tgz", + "integrity": "sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-darwin-x64": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.3.tgz", + "integrity": "sha512-fAeUqfV5ndhxRwai8cXGzdLvul9utWOmeTkv69unv4ZXixjn61Z+p9lCWdwOwA3TYboG3BwdVuN/RDjhBRl0mw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-freebsd-x64": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.3.tgz", + "integrity": "sha512-iyf5bV6+wnAlflVeEy7R25dupxTNECZN5QMI0qNT6eT+EgaGdZcKhGkr5SdoaWiLJ3spLqIY9VCeSGrwmtg4kw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.3.tgz", + "integrity": "sha512-aAYUprJAJQWWbRrPvtjdroZ56Md+JM8pMiopS6xGEwDfLhqj+2ver2p4nU4Mb3CRqcMmNBjo8KkUgcxhkzVQGQ==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-arm64-gnu": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.3.tgz", + "integrity": "sha512-nDxldcEENOxZRzC2uu9jrutZdAAQtb+8WWDCSnWL1zvBk1+FN+x6MtDViPB5AJMfttVCUhehGWus3XBPgatM/w==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-arm64-musl": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.3.tgz", + "integrity": "sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-x64-gnu": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.3.tgz", + "integrity": "sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-x64-musl": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.3.tgz", + "integrity": "sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.3.tgz", + "integrity": "sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ==", + "bundleDependencies": [ + "@napi-rs/wasm-runtime", + "@emnapi/core", + "@emnapi/runtime", + "@tybys/wasm-util", + "@emnapi/wasi-threads", + "tslib" + ], + "cpu": [ + "wasm32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@emnapi/core": "^1.11.1", + "@emnapi/runtime": "^1.11.1", + "@emnapi/wasi-threads": "^1.2.2", + "@napi-rs/wasm-runtime": "^1.1.4", + "@tybys/wasm-util": "^0.10.2", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": { + "version": "1.11.1", + "dev": true, + "inBundle": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@emnapi/wasi-threads": "1.2.2", + "tslib": "^2.4.0" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": { + "version": "1.11.1", + "dev": true, + "inBundle": true, + "license": "MIT", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": { + "version": "1.2.2", + "dev": true, + "inBundle": true, + "license": "MIT", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": { + "version": "1.1.4", + "dev": true, + "inBundle": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@tybys/wasm-util": "^0.10.1" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/Brooooooklyn" + }, + "peerDependencies": { + "@emnapi/core": "^1.7.1", + "@emnapi/runtime": "^1.7.1" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": { + "version": "0.10.2", + "dev": true, + "inBundle": true, + "license": "MIT", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": { + "version": "2.8.1", + "dev": true, + "inBundle": true, + "license": "0BSD", + "optional": true + }, + "node_modules/@tailwindcss/oxide-win32-arm64-msvc": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.3.tgz", + "integrity": "sha512-3rc292Ca2ceK6Ulcc/bAVnTs/3nDtoPhyEKlgPv+yQJQi/JS/AMJlqzxvlDacL1nekbrcf6bTqp/jV4qgnPxNQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-win32-x64-msvc": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.3.tgz", + "integrity": "sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/vite": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.3.3.tgz", + "integrity": "sha512-yYU8cogLeSh/ms2jh8Fj7jaba/EWa7Ja6GoUqYZaraEuCI5YS6ms6ObZgjjedm+jm6XZjdNRWBpPP6Z86oOxcw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@tailwindcss/node": "4.3.3", + "@tailwindcss/oxide": "4.3.3", + "tailwindcss": "4.3.3" + }, + "peerDependencies": { + "vite": "^5.2.0 || ^6 || ^7 || ^8" + } + }, "node_modules/@testing-library/dom": { "version": "10.4.1", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz", @@ -5910,23 +6250,23 @@ } }, "node_modules/enhanced-resolve": { - "version": "5.20.0", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.20.0.tgz", - "integrity": "sha512-/ce7+jQ1PQ6rVXwe+jKEg5hW5ciicHwIQUagZkp6IufBoY3YDgdTTY1azVs0qoRgVmvsNB+rbjLJxDAeHHtwsQ==", + "version": "5.24.5", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.24.5.tgz", + "integrity": "sha512-L1l8TNvomm6UVW5B253AGxQagSQr+vGwhMlrrfRS2qmhx46AMpMVJKQYLvWYbysTMY8VoicOvzHzoHMbyzB+4A==", "dev": true, "license": "MIT", "dependencies": { "graceful-fs": "^4.2.4", - "tapable": "^2.3.0" + "tapable": "^2.3.3" }, "engines": { "node": ">=10.13.0" } }, "node_modules/enhanced-resolve/node_modules/tapable": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz", - "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==", + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz", + "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==", "dev": true, "license": "MIT", "engines": { @@ -10691,6 +11031,16 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, + "node_modules/jiti": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz", + "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==", + "dev": true, + "license": "MIT", + "bin": { + "jiti": "lib/jiti-cli.mjs" + } + }, "node_modules/jose": { "version": "6.1.3", "resolved": "https://registry.npmjs.org/jose/-/jose-6.1.3.tgz", @@ -10987,6 +11337,267 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/lightningcss": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz", + "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==", + "dev": true, + "license": "MPL-2.0", + "dependencies": { + "detect-libc": "^2.0.3" + }, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "lightningcss-android-arm64": "1.32.0", + "lightningcss-darwin-arm64": "1.32.0", + "lightningcss-darwin-x64": "1.32.0", + "lightningcss-freebsd-x64": "1.32.0", + "lightningcss-linux-arm-gnueabihf": "1.32.0", + "lightningcss-linux-arm64-gnu": "1.32.0", + "lightningcss-linux-arm64-musl": "1.32.0", + "lightningcss-linux-x64-gnu": "1.32.0", + "lightningcss-linux-x64-musl": "1.32.0", + "lightningcss-win32-arm64-msvc": "1.32.0", + "lightningcss-win32-x64-msvc": "1.32.0" + } + }, + "node_modules/lightningcss-android-arm64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz", + "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-arm64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz", + "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-x64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz", + "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-freebsd-x64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz", + "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm-gnueabihf": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz", + "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-gnu": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz", + "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-musl": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz", + "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-gnu": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz", + "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-musl": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz", + "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-arm64-msvc": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz", + "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-x64-msvc": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz", + "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, "node_modules/limiter": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/limiter/-/limiter-1.1.5.tgz", @@ -16916,6 +17527,13 @@ "node": ">=16.0.0" } }, + "node_modules/tailwindcss": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.3.tgz", + "integrity": "sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ==", + "dev": true, + "license": "MIT" + }, "node_modules/tapable": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz", diff --git a/browser/package.json b/browser/package.json index 7138143a65..3e837e82e4 100644 --- a/browser/package.json +++ b/browser/package.json @@ -61,6 +61,7 @@ "@babel/plugin-proposal-private-property-in-object": "~7.21.11", "@babel/plugin-transform-class-static-block": "^7.26.0", "@babel/plugin-transform-private-property-in-object": "^7.25.9", + "@tailwindcss/vite": "^4.3.3", "@types/gulp": "^4.0.6", "@types/jest": "^29.2.0", "@types/node": "^24.7.1", @@ -99,6 +100,7 @@ "remark-frontmatter": "^2.0.0", "run-sequence": "^2.2.1", "sass": "^1.97.3", + "tailwindcss": "^4.3.3", "ts-loader": "^9.5.4", "ts-node": "^10.9.2", "typescript": "^4.8.4", diff --git a/browser/public/meta.json b/browser/public/meta.json index 4d9f02110e..717bce6e87 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-06-16 16:54:44","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-05 23:55:42","note":"this file is auto-generated"} \ No newline at end of file diff --git a/browser/src/index.css b/browser/src/index.css index 65ceb68061..68ba452275 100644 --- a/browser/src/index.css +++ b/browser/src/index.css @@ -1,3 +1,10 @@ +#root, +html, +body, +main { + background: transparent; +} + .igx-grid__td img[src*="dl.infragistics.com/x/img/people"] { width: 62px; height: 62px; diff --git a/browser/src/index.tsx b/browser/src/index.tsx index 8448fe8ebb..36e80a84fe 100644 --- a/browser/src/index.tsx +++ b/browser/src/index.tsx @@ -5,6 +5,7 @@ import { BrowserRouter } from "react-router-dom"; import SamplesBrowser from "./navigation/SamplesBrowser"; import RegisterServiceWorker from './serviceWorker'; import { createRoot } from 'react-dom/client'; +import { initSampleSizeReporter } from './sample-size-reporter'; import './index.css'; // styles shared between all samples @@ -21,6 +22,10 @@ import './index.css'; // styles shared between all samples // ); // }); +// Lets docs samples embedded with size their iframe to +// their content. Dormant unless the docs host asks for it. +initSampleSizeReporter(); + const container = document.getElementById('root'); const root = createRoot(container); root.render( diff --git a/browser/src/navigation/SamplesBrowser.json b/browser/src/navigation/SamplesBrowser.json index 4d9f02110e..717bce6e87 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-06-16 16:54:44","note":"this file is auto-generated"} \ No newline at end of file +{"version":"23.2.915","date":"2026-08-05 23:55:42","note":"this file is auto-generated"} \ No newline at end of file diff --git a/browser/src/sample-size-reporter.ts b/browser/src/sample-size-reporter.ts new file mode 100644 index 0000000000..493678e20c --- /dev/null +++ b/browser/src/sample-size-reporter.ts @@ -0,0 +1,86 @@ +/** + * Demo-side half of the docs contract + * (astro-components/src/scripts/sample-widget.ts). + * + * The docs host posts { type: 'igd-sample-fit', width?: boolean } into the + * iframe when it loads. In response we neutralize the viewport-bound sizing + * this app inherits (shared.v8.css pins #root/html/body/main to height: 100%, + * and the samples browser chrome plus the shared .container/.sample wrappers + * chain another height: 100% on top — all of which can only echo the iframe's + * own height back) and report the content's size with + * { type: 'igd-sample-height', height, width? } immediately and on every + * resize. Demos embedded at a fixed height never receive the enable message, + * so this stays dormant for them and their percentage layouts are untouched. + */ +const FIT_ENABLE = 'igd-sample-fit'; +const FIT_REPORT = 'igd-sample-height'; + +export function initSampleSizeReporter(): void { + if (typeof window === 'undefined' || window.parent === window) { + return; + } + + let reportWidth = false; + let observer: ResizeObserver | null = null; + let styled = false; + // Captured from the host's enable message so replies go back to that exact + // origin instead of being broadcast to any window that happens to listen. + let hostOrigin = '*'; + + // Right-most element edge, mirroring the host's same-origin measurement: + // block-level content stretches to the viewport width, so the intrinsic + // width has to come from the element boxes, not the body itself. + const measureWidth = (): number | undefined => { + const body = document.body; + const left = body.getBoundingClientRect().left; + let right = left; + body.querySelectorAll('*').forEach(el => { + right = Math.max(right, el.getBoundingClientRect().right); + }); + if (right <= left) { + return undefined; + } + const cs = getComputedStyle(body); + return right - left + parseFloat(cs.paddingRight || '0') + parseFloat(cs.borderRightWidth || '0'); + }; + + const report = () => { + const height = Math.max( + document.documentElement.offsetHeight, + document.body.offsetHeight, + document.body.scrollHeight, + ); + window.parent.postMessage( + { type: FIT_REPORT, height, width: reportWidth ? measureWidth() : undefined }, + hostOrigin, + ); + }; + + window.addEventListener('message', (e: MessageEvent) => { + if (!e.data || e.data.type !== FIT_ENABLE) { + return; + } + reportWidth = Boolean(e.data.width); + hostOrigin = e.origin || '*'; + + if (!styled) { + styled = true; + const style = document.createElement('style'); + // Every link in the height: 100% chain has to be released, otherwise + // the first one left pinned re-anchors everything below it to the + // iframe height. !important also beats SamplesBrowser's inline + // height: 100% on .sbSwitch. + style.textContent = + 'html, body, #root, main { height: auto !important; overflow: visible !important; }' + + '.sbRoot, .sbContent, .sbSwitch { height: auto !important; overflow: visible !important; }' + + '.container, .sample { height: auto !important; overflow: visible !important; }'; + document.head.appendChild(style); + } + + report(); + if ('ResizeObserver' in window && !observer) { + observer = new ResizeObserver(report); + observer.observe(document.body); + } + }); +} diff --git a/browser/tasks/Transformer.ts b/browser/tasks/Transformer.ts index e037fe3109..a94b443bfd 100644 --- a/browser/tasks/Transformer.ts +++ b/browser/tasks/Transformer.ts @@ -454,6 +454,15 @@ class Transformer { return ".." + sampleFullPath; } + // the repository was cloned into a folder that is not named after it, + // so fall back to the repository root, which is the parent of ./browser + let repositoryRoot = pathModule.dirname(process.cwd()); + if (sampleFullPath.indexOf(repositoryRoot) === 0) { + let relativePath = sampleFullPath.substring(repositoryRoot.length); + relativePath = relativePath.split(pathModule.sep).join(process.env.PATH_SEP || '/'); + return ".." + relativePath; + } + console.log("failed on getRelative " + sampleFullPath); return sampleFullPath; } diff --git a/browser/vite.config.js b/browser/vite.config.js index 6545f1e9dc..7767f85ff9 100644 --- a/browser/vite.config.js +++ b/browser/vite.config.js @@ -1,5 +1,6 @@ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; +import tailwindcss from '@tailwindcss/vite'; import tsconfigPaths from 'vite-tsconfig-paths'; import path, { resolve } from 'path'; @@ -8,6 +9,7 @@ const jszipShimPath = path.resolve(__dirname, 'src/jszip-shim.js'); export default defineConfig(({ mode }) => ({ plugins: [ react(), + tailwindcss(), tsconfigPaths() ], base: mode === 'production' ? '/react-demos/' : '/', diff --git a/samples/inputs/badge/dot/src/index.css b/samples/inputs/badge/dot/src/index.css index 1f53b8aa05..086ae8114d 100644 --- a/samples/inputs/badge/dot/src/index.css +++ b/samples/inputs/badge/dot/src/index.css @@ -1,2 +1,144 @@ /* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-badge { + --ig-size: var(--ig-size-small); + --ig-badge-dot-size: 0.5rem; +} + +igc-avatar { + --size: 40px; +} + +.icon-example igc-badge, +.avatar-example igc-badge, +.nav-icon igc-badge { + position: absolute; +} + +.icon-example igc-badge { + inset-block-start: 0; + inset-inline-end: 2px; +} + +.avatar-example igc-badge { + inset-block-start: -0.25rem; + inset-inline-end: -2px; +} + +.nav-icon igc-badge { + inset-block-start: -2px; + inset-inline-end: -6px; +} + +.badge-dot { + display: flex; + align-items: center; + justify-content: center; + gap: 40px; + min-height: 7rem; +} + +.dot-example { + position: relative; +} + +.icon-example, +.avatar-example, +.icon-circle { + display: flex; + align-items: center; + width: 36px; + height: 36px; +} + +.icon-circle { + justify-content: center; + border-radius: 50%; + background: var(--ig-gray-200); + color: var(--ig-gray-800); +} + +.notifications-card, +.nav-card { + background: var(--ig-surface-500); + border-radius: 4px; + box-shadow: 0 1px 3px hsl(from var(--ig-gray-900) h s l / 0.12); +} + +.notifications-card { + min-width: 272px; + padding: 8px 0; +} + +.notification-row { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + font-size: 14px; + color: var(--ig-gray-900); +} + +.row-indicator { + display: inline-flex; + justify-content: center; + width: 12px; +} + +.row-indicator igc-badge, +.nav-icon igc-badge { + --ig-badge-background-color: #0057A9; +} + +.row-indicator igc-badge::part(base), +.nav-icon igc-badge::part(base) { + background-color: #0057A9; +} + +.row-title { + flex: 1; +} + +.row-time { + font-size: 13px; + color: var(--ig-gray-900); +} + +.row-time.unread { + color: #0057A9; + font-weight: 600; +} + +.row-chevron { + --ig-size: 1; + + color: var(--ig-gray-600); + font-size: 18px; +} + +.nav-card { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; +} + +.nav-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + min-width: 56px; + color: var(--ig-gray-700); + font-size: 12px; +} + +.nav-item.active { + color: #0075D2; +} + +.nav-icon { + position: relative; + display: inline-flex; +} diff --git a/samples/inputs/badge/dot/src/index.tsx b/samples/inputs/badge/dot/src/index.tsx index 45a07a4218..551a61e7b7 100644 --- a/samples/inputs/badge/dot/src/index.tsx +++ b/samples/inputs/badge/dot/src/index.tsx @@ -1,20 +1,81 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; -import { IgrBadge } from 'igniteui-react'; +import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; +import './index.css'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class BadgeDot extends React.Component { - constructor(props: any) { - super(props); - } +const notificationsIcon = + ''; +const chevronRightIcon = + ''; +const homeIcon = + ''; +const personIcon = + ''; +const facebookMessengerIcon = + ''; - public render(): JSX.Element { - return ( -
- +const notifications = [ + { title: 'Contract renewal', time: '09:12', unread: true }, + { title: 'Weekly digest', time: 'Yesterday', unread: false } +]; + +const tabs = [ + { label: 'Home', icon: 'home', active: true, hasUpdates: false }, + { label: 'Chat', icon: 'facebookMessenger', active: false, hasUpdates: true }, + { label: 'Profile', icon: 'person', active: false, hasUpdates: false } +]; + +export default function BadgeDot(): JSX.Element { + useEffect(() => { + registerIconFromText('notifications', notificationsIcon, 'material'); + registerIconFromText('chevron_right', chevronRightIcon, 'material'); + registerIconFromText('home', homeIcon, 'material'); + registerIconFromText('person', personIcon, 'material'); + registerIconFromText('facebookMessenger', facebookMessengerIcon, 'material'); + }, []); + + return ( +
+
+
+ +
+ +
+
+ {notifications.map((item) => ( +
+ + {item.unread && } + + {item.title} + {item.time} + +
+ ))} +
+
+ + +
+
+ {tabs.map((tab) => ( +
+ + + {tab.hasUpdates && } + + {tab.label} +
+ ))}
- ); - } +
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/badge/icon/.devcontainer/devcontainer.json b/samples/inputs/badge/icon/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/badge/icon/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/inputs/badge/icon/.eslintrc.js b/samples/inputs/badge/icon/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/badge/icon/.eslintrc.js @@ -0,0 +1,75 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; \ No newline at end of file diff --git a/samples/inputs/badge/icon/README.md b/samples/inputs/badge/icon/README.md new file mode 100644 index 0000000000..90696beccc --- /dev/null +++ b/samples/inputs/badge/icon/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Icon feature using [Badge](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/inputs/badge/icon +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/inputs/badge/icon/index.html b/samples/inputs/badge/icon/index.html new file mode 100644 index 0000000000..1d6ac94067 --- /dev/null +++ b/samples/inputs/badge/icon/index.html @@ -0,0 +1,11 @@ + + + + BadgeIcon + + + +
+ + + diff --git a/samples/inputs/badge/icon/package.json b/samples/inputs/badge/icon/package.json new file mode 100644 index 0000000000..11098b7706 --- /dev/null +++ b/samples/inputs/badge/icon/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-badge-icon", + "description": "This project provides example of Badge Icon using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "vite --port 4200", + "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build", + "preview": "vite preview", + "test": "vitest" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.7.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.2.1", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^24.7.1", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^5.0.4", + "@vitest/browser": "^3.2.4", + "typescript": "^4.8.4", + "vite": "^7.1.9", + "vitest": "^3.2.4", + "vitest-canvas-mock": "^0.3.3", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/inputs/badge/icon/sandbox.config.json b/samples/inputs/badge/icon/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/badge/icon/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/badge/icon/src/index.css b/samples/inputs/badge/icon/src/index.css new file mode 100644 index 0000000000..7996181645 --- /dev/null +++ b/samples/inputs/badge/icon/src/index.css @@ -0,0 +1,85 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-avatar { + --size: 40px; + --ig-avatar-background: var(--ig-gray-700); + --ig-avatar-color: var(--ig-gray-50); +} + +igc-badge[variant="info"] { + --ig-badge-background-color: #0057A9; +} + +igc-badge[variant="info"]::part(base) { + background-color: #0057A9; +} + +igc-badge igc-icon { + color: var(--ig-gray-50); +} + +.badge-star igc-icon { + color: var(--ig-gray-900); +} + +.icon-wrapper > igc-badge { + --ig-size: var(--ig-size-medium); + display: inline-flex; + align-items: center; + justify-content: center; + text-align: center; +} + +.avatar-wrapper igc-badge { + --ig-size: var(--ig-size-small); + position: absolute; + inset-block-start: -4px; + inset-inline-end: -6px; +} + +.icon-wrapper { + display: flex; + align-items: flex-end; + justify-content: center; + width: 40px; + height: 40px; +} + +.badge-settings { + --ig-badge-background-color: #0070BA; +} + +.badge-settings::part(base) { + background-color: #0070BA; +} + +.badge-icon { + display: flex; + align-items: center; + justify-content: center; + gap: 40px; + min-height: 7rem; +} + +.badge-icon-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + min-width: 56px; +} + +.badge-icon-item span { + color: var(--ig-gray-700); + font-size: 12px; + transform: translateY(4px); +} + +.avatar-wrapper { + position: relative; + display: flex; + align-items: center; + justify-content: center; + height: 40px; +} diff --git a/samples/inputs/badge/icon/src/index.tsx b/samples/inputs/badge/icon/src/index.tsx new file mode 100644 index 0000000000..bd4f68d39b --- /dev/null +++ b/samples/inputs/badge/icon/src/index.tsx @@ -0,0 +1,65 @@ +import React, { useEffect } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const checkIcon = + ''; +const favoriteBorderIcon = + ''; +const notificationsIcon = + ''; +const starBorderIcon = + ''; +const settingsIcon = + ''; +const closeIcon = + ''; + +const badges = [ + { icon: 'check', variant: 'success', label: 'check' }, + { icon: 'favorite_border', variant: 'danger', label: 'favorite' }, + { icon: 'notifications', variant: 'info', label: 'notification' }, + { icon: 'star_border', variant: 'warning', label: 'star' }, + { icon: 'settings', variant: 'info', label: 'settings' } +]; + +export default function BadgeIcon(): JSX.Element { + useEffect(() => { + registerIconFromText('check', checkIcon, 'material'); + registerIconFromText('favorite_border', favoriteBorderIcon, 'material'); + registerIconFromText('notifications', notificationsIcon, 'material'); + registerIconFromText('star_border', starBorderIcon, 'material'); + registerIconFromText('settings', settingsIcon, 'material'); + registerIconFromText('close', closeIcon, 'material'); + }, []); + + return ( +
+ {badges.map((item) => ( +
+
+ + + +
+ {item.label} +
+ ))} +
+
+ + + + +
+ on avatar +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/badge/icon/tsconfig.json b/samples/inputs/badge/icon/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/badge/icon/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/inputs/badge/icon/vite.config.js b/samples/inputs/badge/icon/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/inputs/badge/icon/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/inputs/badge/outlined/src/index.css b/samples/inputs/badge/outlined/src/index.css index 151d518c9a..20a8a4688a 100644 --- a/samples/inputs/badge/outlined/src/index.css +++ b/samples/inputs/badge/outlined/src/index.css @@ -1,35 +1,139 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -.wrapper { +igc-badge { + --ig-size: var(--ig-size-small); +} + +igc-avatar { + --size: 40px; + --ig-avatar-background: var(--ig-gray-700); + --ig-avatar-color: var(--ig-gray-50); +} + +.outlined-example igc-avatar igc-icon { + color: var(--ig-gray-50); +} + +.outlined-example:nth-child(2) igc-badge { + inset-block-start: auto; + inset-block-end: -6px; + inset-inline-end: -6px; +} + +.step-marker igc-badge { + position: absolute; + inset-block-start: -1px; + inset-inline-end: -2px; +} + +.outlined-example igc-badge { + position: absolute; + inset-block-start: -6px; + inset-inline-end: -10px; +} + +.icon-circle igc-icon { + font-size: 20px; +} + +.badge-outlined { + display: flex; + align-items: center; + justify-content: center; + gap: 60px; + min-height: 7rem; +} + +.outlined-example { position: relative; display: flex; - width: fit-content; +} + +.icon-circle, +.step-circle { + display: flex; align-items: center; - margin-block: 1rem; - gap: 0.5rem; - padding: 0.5rem; - border: 1px solid var(--ig-gray-300); - border-radius: .25rem; + justify-content: center; + border-radius: 50%; } -igc-avatar { - @container style(--ig-theme: indigo) { - --ig-size: var(--ig-size-large); - } +.icon-circle { + width: 36px; + height: 36px; + background: var(--ig-gray-200); + color: var(--ig-gray-800); +} - anchor-name: --avatar; +.badge-info-blue { + --ig-badge-background-color: #0057A9; } -igc-badge { - --size: .75rem; +.badge-info-blue::part(base) { + background-color: #0057A9; +} - position: absolute; - inset-block-end: anchor(--avatar bottom); - inset-inline-end: anchor(--avatar right); +.payment-dot-blue { + --ig-badge-background-color: #0057A9; + --ig-badge-dot-size: 0.5rem; +} + +.payment-dot-blue::part(base) { + background-color: #0057A9; +} + +igc-badge::part(base), +igc-badge igc-icon { + color: var(--ig-gray-50); +} + +igc-badge igc-icon { + fill: var(--ig-gray-50); +} + +.steps { + display: flex; + align-items: flex-start; + gap: 8px; +} + +.step { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; +} + +.step-marker { + position: relative; + display: flex; +} + +.step-circle { + width: 26px; + height: 26px; + background: var(--ig-gray-900); + color: var(--ig-gray-50); + font-size: 12px; +} + +.step-circle.pending { + background: var(--ig-gray-200); + color: var(--ig-gray-800); +} + +.step-connector { + width: 56px; + margin-block-start: 13px; + border-block-start: 1px solid var(--ig-gray-900); +} + +.step-connector.pending { + border-block-start-style: dashed; + border-block-start-color: var(--ig-gray-400); } -span { - display: block; - font-weight: 600; +.step-label { + color: var(--ig-gray-700); + font-size: 13px; } diff --git a/samples/inputs/badge/outlined/src/index.tsx b/samples/inputs/badge/outlined/src/index.tsx index 4e78560b1d..a110275e9b 100644 --- a/samples/inputs/badge/outlined/src/index.tsx +++ b/samples/inputs/badge/outlined/src/index.tsx @@ -1,25 +1,62 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrBadge, IgrAvatar } from 'igniteui-react'; +import { IgrBadge, IgrAvatar, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class BadgeOutlined extends React.Component { - constructor(props: any) { - super(props); - } +const favoriteBorderIcon = + ''; +const closeIcon = + ''; - public render(): JSX.Element { - return ( -
-
- - -
- Terrance Orta -
- ); - } +const steps = [ + { index: 1, label: 'Orders', current: false, pending: false }, + { index: 2, label: 'Payment', current: true, pending: false }, + { index: 3, label: 'Shipping', current: false, pending: true } +]; + +export default function BadgeOutlined(): JSX.Element { + useEffect(() => { + registerIconFromText('favorite_border', favoriteBorderIcon, 'material'); + registerIconFromText('close', closeIcon, 'material'); + }, []); + + return ( +
+
+
+ +
+ 23 +
+
+ + + + +
+
+ {steps.map((step, i) => ( + + {i > 0 && ( + + )} +
+
+ + {step.index} + + {step.current && ( + + )} +
+ {step.label} +
+ + ))} +
+
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/badge/overview/src/index.css b/samples/inputs/badge/overview/src/index.css index 2ea157a65b..6a1e390d1f 100644 --- a/samples/inputs/badge/overview/src/index.css +++ b/samples/inputs/badge/overview/src/index.css @@ -1,13 +1,90 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ +igc-avatar { + --size: 40px; +} + +igc-icon { + color: var(--ig-gray-700); + font-size: 1.5rem; +} + igc-badge { - --size: 18px; + --ig-size: var(--ig-size-small); + position: absolute; + inset-block-start: -0.15rem; + inset-inline-end: -0.15rem; +} + +.avatar-example igc-badge { + inset-block-start: auto; + inset-block-end: -0.15rem; + inset-inline-end: -0.15rem; +} +.avatar-example igc-icon { + color: var(--ig-gray-50); + fill: var(--ig-gray-50); +} + +.event-example igc-chip { + --ig-size: var(--ig-size-large); +} + +.event-example igc-chip::part(base) { + background-color: #E0E0E0; + border-radius: 999px; +} + +.event-example igc-badge { + inset-block-start: 0; + inset-inline-end: -0.8rem; +} + +.event-example igc-badge::part(base) { + background-color: #0057A9; + color: var(--ig-gray-50); +} + +.icon-example igc-badge { + inset-block-start: 0; + inset-inline-end: 0; +} + +.icon-example igc-badge::part(base) { + color: var(--ig-gray-50); +} + +.notification-example igc-badge { + inset-block-start: 0.5rem; + inset-inline-end: 0.5rem; + width: 0.5rem; +} + +.event-example { + min-width: auto; +} + +.badge-overview { + display: flex; + align-items: center; + justify-content: center; + gap: 60px; + min-height: 7rem; +} + +.badge-example { position: relative; - right: 10px; + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 2.5rem; + min-height: 2.5rem; } -igc-avatar { - margin-top: 6px; +.icon-example, +.notification-example { + width: 2.5rem; + height: 2.5rem; } diff --git a/samples/inputs/badge/overview/src/index.tsx b/samples/inputs/badge/overview/src/index.tsx index f44bcee40b..46b6333d63 100644 --- a/samples/inputs/badge/overview/src/index.tsx +++ b/samples/inputs/badge/overview/src/index.tsx @@ -1,22 +1,53 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrBadge, IgrAvatar } from 'igniteui-react'; +import { IgrAvatar, IgrBadge, IgrChip, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class BadgeOverview extends React.Component { - constructor(props: any) { - super(props); - } +const checkIcon = + ''; +const mailIcon = + ''; +const notificationsIcon = + ''; - public render(): JSX.Element { - return ( -
- - +export default function BadgeOverview(): JSX.Element { + useEffect(() => { + registerIconFromText('check', checkIcon, 'material'); + registerIconFromText('mail', mailIcon, 'material'); + registerIconFromText('notifications', notificationsIcon, 'material'); + }, []); + + return ( +
+
+ + + + +
+
+ + + 2 + +
+
+ Events + + new + +
+
+ +
- ); - } +
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/badge/shape/src/index.css b/samples/inputs/badge/shape/src/index.css index 1f53b8aa05..cf9906aea1 100644 --- a/samples/inputs/badge/shape/src/index.css +++ b/samples/inputs/badge/shape/src/index.css @@ -1,2 +1,46 @@ /* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.badge-shape { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 40px; + min-height: 7rem; +} + +.badge-shape-row { + display: grid; + grid-template-columns: 80px 40px 40px 40px; + align-items: center; + justify-items: center; + gap: 8px; +} + +.row-label { + justify-self: end; + color: var(--ig-gray-700); + font-size: 14px; +} + +.badge-small { + --ig-size: var(--ig-size-small); +} + +.badge-info-blue { + --ig-badge-background-color: #0057A9; +} + +.badge-info-blue::part(base) { + background-color: #0057A9; +} + +igc-badge::part(base), +igc-badge igc-icon { + color: var(--ig-gray-50); +} + +igc-badge igc-icon { + fill: var(--ig-gray-50); +} diff --git a/samples/inputs/badge/shape/src/index.tsx b/samples/inputs/badge/shape/src/index.tsx index abe11d2fd9..fe423f3edf 100644 --- a/samples/inputs/badge/shape/src/index.tsx +++ b/samples/inputs/badge/shape/src/index.tsx @@ -1,22 +1,41 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrBadge } from 'igniteui-react'; +import { IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class BadgeShape extends React.Component { +const checkIcon = + ''; - constructor(props: any) { - super(props); - } +export default function BadgeShape(): JSX.Element { + useEffect(() => { + registerIconFromText('check', checkIcon, 'material'); + }, []); - public render(): JSX.Element { - return ( -
- + return ( +
+
+ Rounded + + + + 2 + + +
- ); - } +
+ Square + + + + 2 + + + +
+
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/badge/size/.devcontainer/devcontainer.json b/samples/inputs/badge/size/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/badge/size/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/badge/size/.eslintrc.js b/samples/inputs/badge/size/.eslintrc.js new file mode 100644 index 0000000000..d3ed87885e --- /dev/null +++ b/samples/inputs/badge/size/.eslintrc.js @@ -0,0 +1,25 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", + parserOptions: { + ecmaVersion: 2020, + sourceType: "module", + ecmaFeatures: { jsx: true } + }, + settings: { + react: { version: "999.999.999" } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", + "plugin:@typescript-eslint/recommended" + ], + rules: { + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "react/react-in-jsx-scope": "off" + } +}; diff --git a/samples/inputs/badge/size/README.md b/samples/inputs/badge/size/README.md new file mode 100644 index 0000000000..43bc5c8900 --- /dev/null +++ b/samples/inputs/badge/size/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Size feature using [Badge](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/inputs/badge/size +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/inputs/badge/size/index.html b/samples/inputs/badge/size/index.html new file mode 100644 index 0000000000..c4eae48c06 --- /dev/null +++ b/samples/inputs/badge/size/index.html @@ -0,0 +1,11 @@ + + + + BadgeSize + + + +
+ + + diff --git a/samples/inputs/badge/size/package.json b/samples/inputs/badge/size/package.json new file mode 100644 index 0000000000..3a1ccaa183 --- /dev/null +++ b/samples/inputs/badge/size/package.json @@ -0,0 +1,42 @@ +{ + "name": "react-badge-size", + "description": "This project provides example of Badge Size using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "vite --port 4200", + "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build", + "preview": "vite preview", + "test": "vitest" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.7.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.2.1", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^24.7.1", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^5.0.4", + "@vitest/browser": "^3.2.4", + "typescript": "^4.8.4", + "vite": "^7.1.9", + "vitest": "^3.2.4", + "vitest-canvas-mock": "^0.3.3", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/inputs/badge/size/sandbox.config.json b/samples/inputs/badge/size/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/badge/size/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/badge/size/src/index.css b/samples/inputs/badge/size/src/index.css new file mode 100644 index 0000000000..4b15b3dd4b --- /dev/null +++ b/samples/inputs/badge/size/src/index.css @@ -0,0 +1,47 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.badge-size { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 40px; + padding: 32px; + min-height: 7rem; +} + +.badge-size-row { + display: grid; + grid-template-columns: 80px 32px 40px 40px; + align-items: center; + justify-items: center; + gap: 8px; +} + +.row-label { + justify-self: end; + color: var(--ig-gray-700); + font-size: 14px; +} + +.badge-info-blue { + --ig-badge-background-color: #0057A9; +} + +.badge-info-blue::part(base) { + background-color: #0057A9; +} + +igc-badge::part(base), +igc-badge igc-icon { + color: var(--ig-gray-50); +} + +igc-badge igc-icon { + fill: var(--ig-gray-50); +} + +.badge-large { --ig-size: var(--ig-size-large); } +.badge-medium { --ig-size: var(--ig-size-medium); } +.badge-small { --ig-size: var(--ig-size-small); } diff --git a/samples/inputs/badge/size/src/index.tsx b/samples/inputs/badge/size/src/index.tsx new file mode 100644 index 0000000000..0a997231d4 --- /dev/null +++ b/samples/inputs/badge/size/src/index.tsx @@ -0,0 +1,46 @@ +import React, { useEffect } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const checkIcon = + ''; + +export default function BadgeSize(): JSX.Element { + useEffect(() => { + registerIconFromText('check', checkIcon, 'material'); + }, []); + + return ( +
+
+ Small + + 2 + + + +
+
+ Medium + + 2 + + + +
+
+ Large + + 2 + + + +
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/badge/size/tsconfig.json b/samples/inputs/badge/size/tsconfig.json new file mode 100644 index 0000000000..8423942b50 --- /dev/null +++ b/samples/inputs/badge/size/tsconfig.json @@ -0,0 +1,29 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": ["es6", "dom"], + "sourceMap": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": ["node_modules", "build"], + "include": ["src"] +} diff --git a/samples/inputs/badge/size/vite.config.js b/samples/inputs/badge/size/vite.config.js new file mode 100644 index 0000000000..342e2b8e11 --- /dev/null +++ b/samples/inputs/badge/size/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { outDir: 'build' }, + server: { open: false }, +}); diff --git a/samples/inputs/badge/styling/src/index.css b/samples/inputs/badge/styling/src/index.css index 516c162995..d6d6fca0d4 100644 --- a/samples/inputs/badge/styling/src/index.css +++ b/samples/inputs/badge/styling/src/index.css @@ -1,7 +1,83 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -igc-badge::part(base) { - --background-color: var(--ig-error-A100); - --border-radius: 2px; -} \ No newline at end of file +igc-badge { + --ig-size: var(--ig-size-small); +} + +.badge-teal { + --ig-badge-background-color: var(--ig-success-700); + --ig-badge-border-radius: 50%; +} + +.badge-amber { + --ig-badge-background-color: #C97C00; + --ig-badge-border-radius: 50%; +} + +.badge-magenta { + --ig-badge-background-color: #9C27B0; + --ig-badge-text-color: var(--ig-gray-50); + --ig-badge-border-radius: 50%; +} + +.badge-lime { + --ig-badge-background-color: var(--ig-success-700); + --ig-badge-border-radius: 50%; + --ig-badge-dot-size: 0.5rem; +} + +.badge-teal igc-icon, +.badge-amber igc-icon, +.styling-item.pink igc-avatar igc-icon { + color: var(--ig-gray-50); +} + +.badge-teal igc-icon { + position: relative; +} + +.badge-teal igc-icon::after { + content: ""; + position: absolute; + inset: 50% auto auto 50%; + width: 4px; + height: 4px; + border-radius: 50%; + background: var(--ig-success-700); + transform: translate(-50%, -50%); +} + +.styling-item igc-avatar { + --size: 40px; +} + +.styling-item.green igc-avatar { + --icon-color: #248436; + --ig-avatar-background: #A9CEB0; + --ig-avatar-color: #248436; +} + +.styling-item.pink igc-avatar { + --ig-avatar-background: #DA64FF; + --ig-avatar-color: var(--ig-gray-50); +} + +.styling-item igc-badge { + position: absolute; + inset-block-end: -2px; + inset-inline-end: -2px; +} + +.badge-styling { + display: flex; + align-items: center; + justify-content: center; + gap: 60px; + min-height: 7rem; +} + +.styling-item { + position: relative; + display: flex; +} diff --git a/samples/inputs/badge/styling/src/index.tsx b/samples/inputs/badge/styling/src/index.tsx index a1ef9955ab..ca4ee2ae91 100644 --- a/samples/inputs/badge/styling/src/index.tsx +++ b/samples/inputs/badge/styling/src/index.tsx @@ -1,22 +1,60 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrBadge } from 'igniteui-react'; +import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class BadgeStyling extends React.Component { +const personIcon = + ''; +const photoCameraIcon = + ''; +const starBorderIcon = + ''; +const favoriteBorderIcon = + ''; - constructor(props: any) { - super(props); - } +export default function BadgeStyling(): JSX.Element { + useEffect(() => { + registerIconFromText('person', personIcon, 'material'); + registerIconFromText('photo_camera', photoCameraIcon, 'material'); + registerIconFromText('star_border', starBorderIcon, 'material'); + registerIconFromText('favorite_border', favoriteBorderIcon, 'material'); + }, []); - public render(): JSX.Element { - return ( -
- + return ( +
+
+ + + + + +
- ); - } +
+ + + + +
+
+ + + + 2 +
+
+ + +
+
+ ); } // rendering above class to the React DOM diff --git a/samples/inputs/badge/tailwind-styling/.devcontainer/devcontainer.json b/samples/inputs/badge/tailwind-styling/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/inputs/badge/tailwind-styling/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/inputs/badge/tailwind-styling/.eslintrc.js b/samples/inputs/badge/tailwind-styling/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/inputs/badge/tailwind-styling/.eslintrc.js @@ -0,0 +1,75 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; \ No newline at end of file diff --git a/samples/inputs/badge/tailwind-styling/README.md b/samples/inputs/badge/tailwind-styling/README.md new file mode 100644 index 0000000000..91b2086a6b --- /dev/null +++ b/samples/inputs/badge/tailwind-styling/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Tailwind Styling feature using [Badge](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/inputs/badge/tailwind-styling +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/inputs/badge/tailwind-styling/index.html b/samples/inputs/badge/tailwind-styling/index.html new file mode 100644 index 0000000000..ce249e4444 --- /dev/null +++ b/samples/inputs/badge/tailwind-styling/index.html @@ -0,0 +1,11 @@ + + + + BadgeTailwindStyling + + + +
+ + + diff --git a/samples/inputs/badge/tailwind-styling/package.json b/samples/inputs/badge/tailwind-styling/package.json new file mode 100644 index 0000000000..a4300fd58d --- /dev/null +++ b/samples/inputs/badge/tailwind-styling/package.json @@ -0,0 +1,44 @@ +{ + "name": "react-badge-tailwind-styling", + "description": "This project provides example of Badge Tailwind Styling using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "vite --port 4200", + "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build", + "preview": "vite preview", + "test": "vitest" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.7.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.2.1", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@tailwindcss/vite": "^4.1.14", + "@types/jest": "^29.2.0", + "@types/node": "^24.7.1", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^5.0.4", + "@vitest/browser": "^3.2.4", + "tailwindcss": "^4.1.14", + "typescript": "^4.8.4", + "vite": "^7.1.9", + "vitest": "^3.2.4", + "vitest-canvas-mock": "^0.3.3", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/inputs/badge/tailwind-styling/sandbox.config.json b/samples/inputs/badge/tailwind-styling/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/inputs/badge/tailwind-styling/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/inputs/badge/tailwind-styling/src/index.css b/samples/inputs/badge/tailwind-styling/src/index.css new file mode 100644 index 0000000000..101b4607d2 --- /dev/null +++ b/samples/inputs/badge/tailwind-styling/src/index.css @@ -0,0 +1,74 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +@layer theme, base, components, utilities; +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/utilities.css" layer(utilities); + +igc-badge { + --ig-size: var(--ig-size-small); +} + +igc-avatar { + --size: 40px; + --ig-avatar-background: var(--ig-gray-700); + --ig-avatar-color: var(--ig-gray-50); +} + +igc-avatar igc-icon { + color: var(--ig-gray-50); +} + +.badge-close { + --ig-badge-background-color: var(--ig-error-500); +} + +.badge-close::part(base) { + background-color: var(--ig-error-500); +} + +.badge-volume { + --ig-badge-background-color: #8B5BB1; +} + +.badge-volume::part(base) { + background-color: #8B5BB1; +} + +.badge-remove { + --ig-badge-background-color: var(--ig-gray-900); +} + +.badge-remove::part(base) { + background-color: var(--ig-gray-900); +} + +.badge-check { + --ig-badge-background-color: var(--ig-success-600); +} + +.badge-check::part(base) { + background-color: var(--ig-success-600); +} + +.badge-style { + position: absolute; + inset-block-end: -4px; + inset-inline-end: -4px; +} + +.badge-style::part(base) { + border-radius: 50%; +} + +.badge-style igc-icon { + color: var(--ig-gray-50); +} + +.badge-parent { + display: flex; + align-items: center; + justify-content: center; + gap: 3rem; + min-height: 7rem; +} diff --git a/samples/inputs/badge/tailwind-styling/src/index.tsx b/samples/inputs/badge/tailwind-styling/src/index.tsx new file mode 100644 index 0000000000..a34c17722e --- /dev/null +++ b/samples/inputs/badge/tailwind-styling/src/index.tsx @@ -0,0 +1,63 @@ +import React, { useEffect } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const personIcon = + ''; +const closeIcon = + ''; +const volumeOffIcon = + ''; +const removeIcon = + ''; +const checkIcon = + ''; + +export default function BadgeTailwindStyling(): JSX.Element { + useEffect(() => { + registerIconFromText('person', personIcon, 'material'); + registerIconFromText('close', closeIcon, 'material'); + registerIconFromText('volume_off', volumeOffIcon, 'material'); + registerIconFromText('remove', removeIcon, 'material'); + registerIconFromText('check', checkIcon, 'material'); + }, []); + + return ( +
+
+ + + + +
+
+ + + + + + +
+
+ + + + +
+
+ + + + + + +
+
+ ); +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/badge/tailwind-styling/tsconfig.json b/samples/inputs/badge/tailwind-styling/tsconfig.json new file mode 100644 index 0000000000..e7db8a94f5 --- /dev/null +++ b/samples/inputs/badge/tailwind-styling/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/inputs/badge/tailwind-styling/vite.config.js b/samples/inputs/badge/tailwind-styling/vite.config.js new file mode 100644 index 0000000000..663868e022 --- /dev/null +++ b/samples/inputs/badge/tailwind-styling/vite.config.js @@ -0,0 +1,13 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import tailwindcss from '@tailwindcss/vite'; + +export default defineConfig({ + plugins: [react(), tailwindcss()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/inputs/badge/type/.devcontainer/devcontainer.json b/samples/inputs/badge/type/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..ff434ecd44 --- /dev/null +++ b/samples/inputs/badge/type/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} diff --git a/samples/inputs/badge/type/.eslintrc.js b/samples/inputs/badge/type/.eslintrc.js new file mode 100644 index 0000000000..c2cac9dd96 --- /dev/null +++ b/samples/inputs/badge/type/.eslintrc.js @@ -0,0 +1,11 @@ +module.exports = { + parser: "@typescript-eslint/parser", + parserOptions: { ecmaVersion: 2020, sourceType: "module", ecmaFeatures: { jsx: true } }, + settings: { react: { version: "999.999.999" } }, + extends: ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended"], + rules: { + "default-case": "off", "no-undef": "off", "no-unused-vars": "off", + "@typescript-eslint/no-unused-vars": "off", "@typescript-eslint/no-explicit-any": "off", + "react/react-in-jsx-scope": "off" + } +}; diff --git a/samples/inputs/badge/type/README.md b/samples/inputs/badge/type/README.md new file mode 100644 index 0000000000..9daca45c43 --- /dev/null +++ b/samples/inputs/badge/type/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Type feature using [Badge](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/inputs/badge/type +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/inputs/badge/type/index.html b/samples/inputs/badge/type/index.html new file mode 100644 index 0000000000..e6e3aa5702 --- /dev/null +++ b/samples/inputs/badge/type/index.html @@ -0,0 +1,11 @@ + + + + BadgeType + + + +
+ + + diff --git a/samples/inputs/badge/type/package.json b/samples/inputs/badge/type/package.json new file mode 100644 index 0000000000..15f063ec29 --- /dev/null +++ b/samples/inputs/badge/type/package.json @@ -0,0 +1,37 @@ +{ + "name": "react-badge-type", + "description": "This project provides example of Badge Type using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "vite --port 4200", + "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build", + "preview": "vite preview", + "test": "vitest" + }, + "dependencies": { + "igniteui-dockmanager": "^1.17.0", + "igniteui-react": "19.7.0", + "igniteui-react-core": "19.6.0", + "igniteui-webcomponents": "^7.2.1", + "react": "^19.2.0", + "react-dom": "^19.2.0", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^24.7.1", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "@vitejs/plugin-react": "^5.0.4", + "@vitest/browser": "^3.2.4", + "typescript": "^4.8.4", + "vite": "^7.1.9", + "vitest": "^3.2.4", + "vitest-canvas-mock": "^0.3.3", + "worker-loader": "^3.0.8" + }, + "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"] +} diff --git a/samples/inputs/badge/type/sandbox.config.json b/samples/inputs/badge/type/sandbox.config.json new file mode 100644 index 0000000000..49a80d1d8b --- /dev/null +++ b/samples/inputs/badge/type/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} diff --git a/samples/inputs/badge/type/src/index.css b/samples/inputs/badge/type/src/index.css new file mode 100644 index 0000000000..521f3f4dcc --- /dev/null +++ b/samples/inputs/badge/type/src/index.css @@ -0,0 +1,57 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-avatar { + --size: 40px; +} + +igc-badge { + --ig-size: var(--ig-size-small); + position: absolute; + inset-block-end: -6px; + inset-inline-end: -4px; +} + +.badge-type igc-badge::part(base), +.badge-type igc-badge igc-icon { + color: var(--ig-gray-50); +} + +.badge-type igc-badge igc-icon { + fill: var(--ig-gray-50); +} + +.badge-type { + display: flex; + align-items: center; + justify-content: center; + gap: 60px; + min-height: 7rem; +} + +.badge-type-item { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 16px; + min-width: 56px; + min-height: 72px; +} + +.avatar-wrapper { + position: relative; + display: flex; +} + +.dot-badge { + inset-block-end: 0; + inset-inline-end: 0; + --ig-badge-dot-size: 0.5rem; +} + +.badge-type-item span { + color: var(--ig-gray-700); + font-size: 12px; + line-height: 16px; +} diff --git a/samples/inputs/badge/type/src/index.tsx b/samples/inputs/badge/type/src/index.tsx new file mode 100644 index 0000000000..e5b881c715 --- /dev/null +++ b/samples/inputs/badge/type/src/index.tsx @@ -0,0 +1,59 @@ +import React, { useEffect } from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const checkIcon = + ''; + +export default function BadgeType(): JSX.Element { + useEffect(() => { + registerIconFromText('check', checkIcon, 'material'); + }, []); + + return ( +
+
+
+ + +
+ Dot +
+
+
+ + + + +
+ Icon +
+
+
+ + + 2 + +
+ Text +
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/inputs/badge/type/tsconfig.json b/samples/inputs/badge/type/tsconfig.json new file mode 100644 index 0000000000..7dfd761170 --- /dev/null +++ b/samples/inputs/badge/type/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, "esModuleInterop": true, "baseUrl": ".", "outDir": "build/dist", + "module": "esnext", "target": "es5", "lib": ["es6", "dom"], "sourceMap": true, + "allowJs": true, "jsx": "react", "moduleResolution": "node", "rootDir": "src", + "forceConsistentCasingInFileNames": true, "noImplicitReturns": true, "noImplicitThis": true, + "noImplicitAny": true, "noUnusedLocals": false, "importHelpers": true, + "allowSyntheticDefaultImports": true, "skipLibCheck": true, "strict": false, + "isolatedModules": true, "noEmit": true + }, + "exclude": ["node_modules", "build"], + "include": ["src"] +} diff --git a/samples/inputs/badge/type/vite.config.js b/samples/inputs/badge/type/vite.config.js new file mode 100644 index 0000000000..342e2b8e11 --- /dev/null +++ b/samples/inputs/badge/type/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { outDir: 'build' }, + server: { open: false }, +}); diff --git a/samples/inputs/badge/variants/src/index.css b/samples/inputs/badge/variants/src/index.css index 1f53b8aa05..f983e17588 100644 --- a/samples/inputs/badge/variants/src/index.css +++ b/samples/inputs/badge/variants/src/index.css @@ -1,2 +1,76 @@ /* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ \ No newline at end of file +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-badge { + --ig-size: var(--ig-size-small); + position: absolute; + inset-block-end: -4px; + inset-inline-end: -4px; +} + +igc-avatar { + --ig-size: var(--ig-size-small); + --ig-avatar-background: var(--ig-gray-700); + --ig-avatar-color: var(--ig-gray-50); +} + +.variant-item:first-child igc-avatar igc-icon, +.variant-item:nth-child(4) igc-avatar igc-icon { + color: var(--ig-gray-50); +} + +.badge-variants { + display: flex; + align-items: center; + justify-content: center; + gap: 40px; + min-height: 7rem; +} + +.variant-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + min-width: 56px; +} + +.variant-item span { + color: var(--ig-gray-700); + font-size: 13px; +} + +.avatar-wrapper { + position: relative; + display: flex; +} + +.badge-info-blue { + --ig-badge-background-color: #0057A9; +} + +.badge-info-blue::part(base) { + background-color: #0057A9; +} + +.badge-primary-blue { + --ig-badge-background-color: #0070BA; +} + +.badge-primary-blue::part(base) { + background-color: #0070BA; +} + +.badge-warning-black::part(base) { + background-color: #FAA419; + color: #000; +} + +igc-badge::part(base), +igc-badge igc-icon { + color: var(--ig-gray-50); +} + +igc-badge igc-icon { + fill: var(--ig-gray-50); +} diff --git a/samples/inputs/badge/variants/src/index.tsx b/samples/inputs/badge/variants/src/index.tsx index b036427cbc..47cfdd62e8 100644 --- a/samples/inputs/badge/variants/src/index.tsx +++ b/samples/inputs/badge/variants/src/index.tsx @@ -1,24 +1,83 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrBadge } from 'igniteui-react'; +import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class BadgeVariants extends React.Component { +const checkIcon = + ''; +const closeIcon = + ''; +const mailIcon = + ''; +const notificationsIcon = + ''; - constructor(props: any) { - super(props); - } +export default function BadgeVariants(): JSX.Element { + useEffect(() => { + registerIconFromText('check', checkIcon, 'material'); + registerIconFromText('close', closeIcon, 'material'); + registerIconFromText('mail', mailIcon, 'material'); + registerIconFromText('notifications', notificationsIcon, 'material'); + }, []); - public render(): JSX.Element { - return ( -
- + return ( +
+
+
+ + + + 2 +
+ Primary
- ); - } +
+
+ + + + +
+ Info +
+
+
+ + + + +
+ Success +
+
+
+ + + + 2 +
+ Warn +
+
+
+ + + + +
+ Error +
+
+ ); } // rendering above class to the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +root.render();