From bbdb73d86fa7fa0d91d6d327bab76024df109851 Mon Sep 17 00:00:00 2001 From: Jason Baker Date: Tue, 18 Jun 2024 18:12:30 -0700 Subject: [PATCH] perf(icon): update to use beta of auro-icon with theme support --- demo/api.html | 1 - demo/index.html | 1 - package-lock.json | 128 +++++++----------------------- package.json | 5 +- scripts/version.mjs | 3 + src/auro-input.js | 67 +++++++++++++--- src/base-input.js | 8 -- src/color.scss | 13 +-- src/iconVersion.js | 1 + src/styles/notificationIcons.scss | 24 ++++-- src/tokens.scss | 8 +- test/auro-input.test.js | 2 +- 12 files changed, 116 insertions(+), 145 deletions(-) create mode 100644 scripts/version.mjs create mode 100644 src/iconVersion.js diff --git a/demo/api.html b/demo/api.html index a46a72a..6e2c3f6 100644 --- a/demo/api.html +++ b/demo/api.html @@ -34,7 +34,6 @@ - diff --git a/demo/index.html b/demo/index.html index 4b5c22f..27e73b5 100644 --- a/demo/index.html +++ b/demo/index.html @@ -37,7 +37,6 @@ - diff --git a/package-lock.json b/package-lock.json index 62d180c..694cf7e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "license": "Apache-2.0", "dependencies": { "@aurodesignsystem/auro-formvalidation": "^1.0.3", + "@aurodesignsystem/auro-icon": "^5.0.0-beta.1", "@aurodesignsystem/auro-library": "^2.6.0", "chalk": "^5.2.0", "cleave.js": "^1.6.0", @@ -18,7 +19,6 @@ }, "devDependencies": { "@alaskaairux/icons": "^4.41.1", - "@aurodesignsystem/auro-icon": "^4.3.1", "@aurodesignsystem/design-tokens": "^4.7.0", "@aurodesignsystem/eslint-config": "^1.3.1", "@aurodesignsystem/webcorestylesheets": "^5.1.1", @@ -110,7 +110,6 @@ "version": "4.41.1", "resolved": "https://registry.npmjs.org/@alaskaairux/icons/-/icons-4.41.1.tgz", "integrity": "sha512-XI0bHWM0HGzNoHX1JzGUVlwX3YafqWI3ruEhsugI5DzFyec/zTlgf2/3IA0CBNyhroaU/WyXuPAPlIq1b509aA==", - "dev": true, "hasInstallScript": true, "dependencies": { "chalk": "4.1.2", @@ -124,7 +123,6 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -160,14 +158,13 @@ } }, "node_modules/@aurodesignsystem/auro-icon": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-icon/-/auro-icon-4.3.1.tgz", - "integrity": "sha512-yJNQhFEU82KFPCD7H0pxSKOsAiN7GemYRV1ob6LCIfyMTwzBaGIQAJdAwFFtzfjV86vuzIWISmxmH0oE7XcsNA==", - "dev": true, + "version": "5.0.0-beta.1", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-icon/-/auro-icon-5.0.0-beta.1.tgz", + "integrity": "sha512-E1dth3K8JiViAdMtNb6ZESPZxIj8pQVlAoozsw6LAAIimWtEay4Mo2Mp22RByIWv2oK/ro3KuAwcyqiSotmQgQ==", "hasInstallScript": true, "dependencies": { "chalk": "^5.3.0", - "lit": "^3.1.2" + "lit": "^3.1.3" }, "engines": { "node": "^18.x || ^20.x" @@ -196,7 +193,6 @@ "version": "4.7.0", "resolved": "https://registry.npmjs.org/@aurodesignsystem/design-tokens/-/design-tokens-4.7.0.tgz", "integrity": "sha512-+25gYSsPy1a6CJuuuO3VK9PEbak6WCIwymDzyHPqBnIIeEoIjxmkCr69cMbG+xhwoOKpxVX2aygZ7H4wg4lU5A==", - "dev": true, "hasInstallScript": true, "dependencies": { "chalk": "^5.3.0" @@ -242,7 +238,6 @@ "version": "5.1.1", "resolved": "https://registry.npmjs.org/@aurodesignsystem/webcorestylesheets/-/webcorestylesheets-5.1.1.tgz", "integrity": "sha512-HEwZQTV2/clC9Ty42gpoXfR8rR0VUJjunZNAKJX78X48f0YKVGg4fFX+nVDZH7xklHelb2q+9bPSgc12IVCBPA==", - "dev": true, "hasInstallScript": true, "dependencies": { "chalk": "^5.3.0" @@ -2927,7 +2922,6 @@ "version": "0.2.0", "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==", - "dev": true, "engines": { "node": ">=10.13.0" } @@ -3937,7 +3931,6 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, "dependencies": { "color-convert": "^2.0.1" }, @@ -3958,7 +3951,6 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", - "dev": true, "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -4320,7 +4312,6 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "dev": true, "engines": { "node": ">=8" } @@ -4407,8 +4398,7 @@ "node_modules/boolbase": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", - "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", - "dev": true + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" }, "node_modules/bottleneck": { "version": "2.19.5", @@ -4695,7 +4685,6 @@ "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", - "dev": true, "funding": [ { "type": "individual", @@ -4922,7 +4911,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, "dependencies": { "color-name": "~1.1.4" }, @@ -4933,8 +4921,7 @@ "node_modules/color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, "node_modules/colord": { "version": "2.9.3", @@ -5530,7 +5517,6 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", - "dev": true, "dependencies": { "boolbase": "^1.0.0", "css-what": "^6.1.0", @@ -5546,7 +5532,6 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", - "dev": true, "dependencies": { "mdn-data": "2.0.30", "source-map-js": "^1.0.1" @@ -5559,7 +5544,6 @@ "version": "6.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", - "dev": true, "engines": { "node": ">= 6" }, @@ -5583,7 +5567,6 @@ "version": "5.0.5", "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz", "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", - "dev": true, "dependencies": { "css-tree": "~2.2.0" }, @@ -5596,7 +5579,6 @@ "version": "2.2.1", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz", "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==", - "dev": true, "dependencies": { "mdn-data": "2.0.28", "source-map-js": "^1.0.1" @@ -5609,8 +5591,7 @@ "node_modules/csso/node_modules/mdn-data": { "version": "2.0.28", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz", - "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==", - "dev": true + "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==" }, "node_modules/dargs": { "version": "8.1.0", @@ -5880,7 +5861,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", - "dev": true, "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", @@ -5922,7 +5902,6 @@ "version": "5.0.3", "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", - "dev": true, "dependencies": { "domelementtype": "^2.3.0" }, @@ -5937,7 +5916,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", - "dev": true, "dependencies": { "dom-serializer": "^2.0.0", "domelementtype": "^2.3.0", @@ -6022,7 +6000,6 @@ "version": "4.4.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz", "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==", - "dev": true, "engines": { "node": ">=0.12" }, @@ -7337,7 +7314,6 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -7815,7 +7791,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, "engines": { "node": ">=8" } @@ -8159,8 +8134,7 @@ "node_modules/immutable": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz", - "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==", - "dev": true + "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==" }, "node_modules/import-fresh": { "version": "3.3.0", @@ -8376,7 +8350,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "dev": true, "dependencies": { "binary-extensions": "^2.0.0" }, @@ -9874,8 +9847,7 @@ "node_modules/mdn-data": { "version": "2.0.30", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", - "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", - "dev": true + "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==" }, "node_modules/media-typer": { "version": "0.3.0", @@ -10434,7 +10406,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -13448,7 +13419,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", - "dev": true, "dependencies": { "boolbase": "^1.0.0" }, @@ -13947,8 +13917,7 @@ "node_modules/picocolors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", - "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==", - "dev": true + "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==" }, "node_modules/picomatch": { "version": "2.3.1", @@ -14876,7 +14845,6 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dev": true, "dependencies": { "picomatch": "^2.2.1" }, @@ -15255,7 +15223,6 @@ "version": "1.77.6", "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.6.tgz", "integrity": "sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==", - "dev": true, "dependencies": { "chokidar": ">=3.0.0 <4.0.0", "immutable": "^4.0.0", @@ -15998,7 +15965,6 @@ "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" } @@ -16560,7 +16526,6 @@ "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, "dependencies": { "has-flag": "^4.0.0" }, @@ -16603,7 +16568,6 @@ "version": "3.2.0", "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.2.0.tgz", "integrity": "sha512-4PP6CMW/V7l/GmKRKzsLR8xxjdHTV4IMvhTnpuHwwBazSIlw5W/5SmPjN8Dwyt7lKbSJrRDgp4t9ph0HgChFBQ==", - "dev": true, "dependencies": { "@trysound/sax": "0.2.0", "commander": "^7.2.0", @@ -18166,7 +18130,6 @@ "version": "4.41.1", "resolved": "https://registry.npmjs.org/@alaskaairux/icons/-/icons-4.41.1.tgz", "integrity": "sha512-XI0bHWM0HGzNoHX1JzGUVlwX3YafqWI3ruEhsugI5DzFyec/zTlgf2/3IA0CBNyhroaU/WyXuPAPlIq1b509aA==", - "dev": true, "requires": { "chalk": "4.1.2", "svgo": "^3.2.0" @@ -18176,7 +18139,6 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, "requires": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -18201,13 +18163,12 @@ "integrity": "sha512-diJ5VE64WjVlnSIdSm8Wcj0ouhNPgveXePYrhknWcXwLvepPwt3XZyY+hGFaXTEd1ni9I2VYzypvnTPawkMsOA==" }, "@aurodesignsystem/auro-icon": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-icon/-/auro-icon-4.3.1.tgz", - "integrity": "sha512-yJNQhFEU82KFPCD7H0pxSKOsAiN7GemYRV1ob6LCIfyMTwzBaGIQAJdAwFFtzfjV86vuzIWISmxmH0oE7XcsNA==", - "dev": true, + "version": "5.0.0-beta.1", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-icon/-/auro-icon-5.0.0-beta.1.tgz", + "integrity": "sha512-E1dth3K8JiViAdMtNb6ZESPZxIj8pQVlAoozsw6LAAIimWtEay4Mo2Mp22RByIWv2oK/ro3KuAwcyqiSotmQgQ==", "requires": { "chalk": "^5.3.0", - "lit": "^3.1.2" + "lit": "^3.1.3" } }, "@aurodesignsystem/auro-library": { @@ -18222,7 +18183,6 @@ "version": "4.7.0", "resolved": "https://registry.npmjs.org/@aurodesignsystem/design-tokens/-/design-tokens-4.7.0.tgz", "integrity": "sha512-+25gYSsPy1a6CJuuuO3VK9PEbak6WCIwymDzyHPqBnIIeEoIjxmkCr69cMbG+xhwoOKpxVX2aygZ7H4wg4lU5A==", - "dev": true, "requires": { "chalk": "^5.3.0" } @@ -18256,7 +18216,6 @@ "version": "5.1.1", "resolved": "https://registry.npmjs.org/@aurodesignsystem/webcorestylesheets/-/webcorestylesheets-5.1.1.tgz", "integrity": "sha512-HEwZQTV2/clC9Ty42gpoXfR8rR0VUJjunZNAKJX78X48f0YKVGg4fFX+nVDZH7xklHelb2q+9bPSgc12IVCBPA==", - "dev": true, "requires": { "chalk": "^5.3.0" } @@ -20093,8 +20052,7 @@ "@trysound/sax": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", - "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==", - "dev": true + "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==" }, "@types/accepts": { "version": "1.3.5", @@ -21002,7 +20960,6 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, "requires": { "color-convert": "^2.0.1" } @@ -21017,7 +20974,6 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", - "dev": true, "requires": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -21286,8 +21242,7 @@ "binary-extensions": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", - "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "dev": true + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==" }, "body-parser": { "version": "1.20.2", @@ -21357,8 +21312,7 @@ "boolbase": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", - "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", - "dev": true + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" }, "bottleneck": { "version": "2.19.5", @@ -21535,7 +21489,6 @@ "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", - "dev": true, "requires": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -21704,7 +21657,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, "requires": { "color-name": "~1.1.4" } @@ -21712,8 +21664,7 @@ "color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, "colord": { "version": "2.9.3", @@ -22168,7 +22119,6 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", - "dev": true, "requires": { "boolbase": "^1.0.0", "css-what": "^6.1.0", @@ -22181,7 +22131,6 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", - "dev": true, "requires": { "mdn-data": "2.0.30", "source-map-js": "^1.0.1" @@ -22190,8 +22139,7 @@ "css-what": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", - "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", - "dev": true + "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==" }, "cssesc": { "version": "3.0.0", @@ -22203,7 +22151,6 @@ "version": "5.0.5", "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz", "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", - "dev": true, "requires": { "css-tree": "~2.2.0" }, @@ -22212,7 +22159,6 @@ "version": "2.2.1", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz", "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==", - "dev": true, "requires": { "mdn-data": "2.0.28", "source-map-js": "^1.0.1" @@ -22221,8 +22167,7 @@ "mdn-data": { "version": "2.0.28", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz", - "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==", - "dev": true + "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==" } } }, @@ -22417,7 +22362,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", - "dev": true, "requires": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", @@ -22452,7 +22396,6 @@ "version": "5.0.3", "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", - "dev": true, "requires": { "domelementtype": "^2.3.0" } @@ -22461,7 +22404,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", - "dev": true, "requires": { "dom-serializer": "^2.0.0", "domelementtype": "^2.3.0", @@ -22533,8 +22475,7 @@ "entities": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz", - "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==", - "dev": true + "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==" }, "env-ci": { "version": "11.0.0", @@ -23505,7 +23446,6 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "dev": true, "optional": true }, "function-bind": { @@ -23857,8 +23797,7 @@ "has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" }, "has-property-descriptors": { "version": "1.0.0", @@ -24095,8 +24034,7 @@ "immutable": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz", - "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==", - "dev": true + "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==" }, "import-fresh": { "version": "3.3.0", @@ -24255,7 +24193,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "dev": true, "requires": { "binary-extensions": "^2.0.0" } @@ -25378,8 +25315,7 @@ "mdn-data": { "version": "2.0.30", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", - "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", - "dev": true + "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==" }, "media-typer": { "version": "0.3.0", @@ -25800,8 +25736,7 @@ "normalize-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", - "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==" }, "normalize-range": { "version": "0.1.2", @@ -27846,7 +27781,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", - "dev": true, "requires": { "boolbase": "^1.0.0" } @@ -28211,8 +28145,7 @@ "picocolors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", - "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==", - "dev": true + "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==" }, "picomatch": { "version": "2.3.1", @@ -28843,7 +28776,6 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dev": true, "requires": { "picomatch": "^2.2.1" } @@ -29109,7 +29041,6 @@ "version": "1.77.6", "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.6.tgz", "integrity": "sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==", - "dev": true, "requires": { "chokidar": ">=3.0.0 <4.0.0", "immutable": "^4.0.0", @@ -29651,8 +29582,7 @@ "source-map-js": { "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 + "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==" }, "source-map-support": { "version": "0.5.21", @@ -30070,7 +30000,6 @@ "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, "requires": { "has-flag": "^4.0.0" } @@ -30101,7 +30030,6 @@ "version": "3.2.0", "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.2.0.tgz", "integrity": "sha512-4PP6CMW/V7l/GmKRKzsLR8xxjdHTV4IMvhTnpuHwwBazSIlw5W/5SmPjN8Dwyt7lKbSJrRDgp4t9ph0HgChFBQ==", - "dev": true, "requires": { "@trysound/sax": "0.2.0", "commander": "^7.2.0", diff --git a/package.json b/package.json index 749fbd7..a2f3a8b 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ }, "dependencies": { "@aurodesignsystem/auro-formvalidation": "^1.0.3", + "@aurodesignsystem/auro-icon": "^5.0.0-beta.1", "@aurodesignsystem/auro-library": "^2.6.0", "chalk": "^5.2.0", "cleave.js": "^1.6.0", @@ -33,7 +34,6 @@ }, "devDependencies": { "@alaskaairux/icons": "^4.41.1", - "@aurodesignsystem/auro-icon": "^4.3.1", "@aurodesignsystem/design-tokens": "^4.7.0", "@aurodesignsystem/eslint-config": "^1.3.1", "@aurodesignsystem/webcorestylesheets": "^5.1.1", @@ -156,6 +156,7 @@ "build:docs": "node scripts/generateDocs.mjs", "build:sass": "npm-run-all build:sass:component postCss:component sass:render", "build:sass:component": "for file in src/*.scss; do npx sass --no-source-map \"$file:${file%.scss}.css\"; done", + "build:version": "node scripts/version.mjs", "build:watch": "nodemon -e scss,js --watch src --exec npm run build:dev:assets", "bundler": "rollup -c", "bundler:test": "rollup -c -w", @@ -167,7 +168,7 @@ "demo:update:index": "node ./scripts/prepForBuild", "dev": "concurrently --kill-others 'npm run build:watch' 'npm run serve'", "dist:js": "copyfiles -u 1 -V './src/**/*.js' ./dist", - "esLint": "./node_modules/.bin/eslint src/**/*.js", + "esLint": "./node_modules/.bin/eslint src/**/*.js --ignore-pattern 'src/**/*Version.js'", "linters": "npm-run-all scssLint esLint", "preCommit": "node scripts/pre-commit.mjs", "postCss:component": "node ./scripts/postCss.mjs", diff --git a/scripts/version.mjs b/scripts/version.mjs new file mode 100644 index 0000000..a8dbf6b --- /dev/null +++ b/scripts/version.mjs @@ -0,0 +1,3 @@ +import versionWriter from '@aurodesignsystem/auro-library/scripts/build/versionWriter.js'; + +versionWriter.writeDepVersionFile('@aurodesignsystem/auro-icon'); diff --git a/src/auro-input.js b/src/auro-input.js index 301b3b7..7ec9416 100644 --- a/src/auro-input.js +++ b/src/auro-input.js @@ -3,17 +3,30 @@ // --------------------------------------------------------------------- -/* eslint-disable complexity */ +/* eslint-disable complexity, lit/binding-positions, lit/no-invalid-html */ -import { html } from "lit"; +import { html } from 'lit/static-html.js'; import { repeat } from 'lit/directives/repeat.js'; import { classMap } from 'lit/directives/class-map.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import i18n from './i18n.js'; import BaseInput from './base-input.js'; +import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs'; +import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js'; +import iconVersion from './iconVersion'; + // build the component class export class AuroInput extends BaseInput { + constructor() { + super(); + + /** + * Generate unique names for dependency components. + */ + const versioning = new AuroDependencyVersioning(); + this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon); + } /** * Function to determine if the input is meant to render an icon visualizing the input type. @@ -55,12 +68,25 @@ export class AuroInput extends BaseInput { This should be cleaned up when auro-icon issue #31 is resolved. --> ${this.inputIconName ? repeat([this.inputIconName], (val) => val, (name) => html` - + <${this.iconTag} + class="accentIcon" + category="payment" + name="${name}" + part="accentIcon" + ?disabled="${this.disabled}"> + `) : undefined } ${this.type === 'month-day-year' || this.type === 'month-year' || this.type === 'year-month-day' || this.type === 'month-fullYear' - ? html`` + ? html` + <${this.iconTag} + class="accentIcon" + category="interface" + name="calendar" + part="accentIcon" + ?disabled="${this.disabled}"> + ` : undefined } @@ -100,18 +126,35 @@ export class AuroInput extends BaseInput { ?hasValue="${this.hasValue}"> ${this.validity && this.validity !== 'valid' ? html`
- ${this.alertSvg} + <${this.iconTag} + category="alert" + name="error-stroke" + customSize + error> +
` : undefined} ${this.hasValue ? html` ${this.type === 'password' ? html` -
+
` : undefined} @@ -122,7 +165,13 @@ export class AuroInput extends BaseInput { aria-hidden="true" tabindex="-1" @click="${this.handleClickClear}"> - ${this.readonly ? undefined : this.closeSvg} + ${this.readonly ? undefined : html` + <${this.iconTag} + category="interface" + name="x-lg" + customSize> + + `}
` : undefined} diff --git a/src/base-input.js b/src/base-input.js index a5e91f7..a16597f 100644 --- a/src/base-input.js +++ b/src/base-input.js @@ -15,10 +15,6 @@ import styleCss from "./style-css.js"; import colorCss from "./color-css.js"; import tokensCss from "./tokens-css.js"; -import closelg from '@alaskaairux/icons/dist/icons/interface/x-sm.mjs'; -import viewPassword from '@alaskaairux/icons/dist/icons/interface/view-password.mjs'; -import hidePassword from '@alaskaairux/icons/dist/icons/interface/hide-password.mjs'; -import alert from '@alaskaairux/icons/dist/icons/alert/error.mjs'; import Cleave from 'cleave.js'; import i18n, {notifyOnLangChange, stopNotifyingOnLangChange} from './i18n.js'; import AuroFormValidation from '@aurodesignsystem/auro-formvalidation/src/validation.js'; @@ -107,10 +103,6 @@ export default class BaseInput extends LitElement { */ privateDefaults() { this.validation = new AuroFormValidation(); - this.closeSvg = this.getIconAsHtml(closelg); - this.alertSvg = this.getIconAsHtml(alert); - this.hidePassword = this.getIconAsHtml(hidePassword); - this.viewPassword = this.getIconAsHtml(viewPassword); this.inputIconName = undefined; this.inputMode = ''; this.showPassword = false; diff --git a/src/color.scss b/src/color.scss index b004840..392285d 100644 --- a/src/color.scss +++ b/src/color.scss @@ -28,12 +28,12 @@ input { color: var(--ds-color-input-text-color); &::placeholder { - color: var(--ds-auro-input-placeholder-text-color); + color: transparent; } &:focus { &::placeholder { - --ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default}); + color: var(--ds-auro-input-placeholder-text-color); } } @@ -46,14 +46,6 @@ label { color: var(--ds-auro-input-label-text-color); } -.alertNotification { - color: var(--ds-auro-input-alert-icon-color); -} - -.typeIcon { - color: var(--ds-auro-input-type-icon-color); -} - :host(:not([bordered], [borderless])) { .wrapper { border-bottom-color: var(--ds-auro-input-border-color); @@ -98,6 +90,5 @@ label { :host([disabled]) { --ds-auro-input-border-color: var(--ds-color-border-ui-disabled-default, #{$ds-color-border-ui-disabled-default}); - --ds-auro-input-type-icon-color: var(--ds-color-text-disabled-default, #{$ds-color-text-disabled-default}); --ds-auro-input-label-text-color: var(--ds-color-text-disabled-default, #{$ds-color-text-disabled-default}); } diff --git a/src/iconVersion.js b/src/iconVersion.js new file mode 100644 index 0000000..7a34a78 --- /dev/null +++ b/src/iconVersion.js @@ -0,0 +1 @@ +export default '5.0.0-beta.1' \ No newline at end of file diff --git a/src/styles/notificationIcons.scss b/src/styles/notificationIcons.scss index 2e0b471..5d07934 100644 --- a/src/styles/notificationIcons.scss +++ b/src/styles/notificationIcons.scss @@ -7,7 +7,7 @@ flex-direction: row; align-items: center; - auro-icon { + [auro-icon] { height: var(--ds-size-300, $ds-size-300); width: var(--ds-size-300, $ds-size-300); margin-right: var(--ds-size-100, $ds-size-100); @@ -31,17 +31,27 @@ } .notification { - height: var(--ds-size-300, $ds-size-300); - width: var(--ds-size-300, $ds-size-300); - &:not(:first-of-type) { - margin-left: var(--ds-size-100, $ds-size-100); + margin-left: var(--ds-size-150, $ds-size-150); } } +.alertNotification { + height: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-25, $ds-size-25)); + width: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-25, $ds-size-25)); +} + +.clearBtn { + height: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-25, $ds-size-25)); + width: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-25, $ds-size-25)); +} + +.passwordBtn { + height: calc(var(--ds-size-300, $ds-size-300)); + width: calc(var(--ds-size-300, $ds-size-300)); +} + .notificationBtn { - height: 100%; - width: 100%; padding: 0; border: 0; background: unset; diff --git a/src/tokens.scss b/src/tokens.scss index ba769fa..55cb164 100644 --- a/src/tokens.scss +++ b/src/tokens.scss @@ -1,12 +1,10 @@ -:host { - --ds-auro-input-alert-icon-color: var(--ds-color-alert-error-default, $ds-color-alert-error-default); - --ds-auro-input-background-color: var(--ds-color-background-primary-100-default, $ds-color-background-primary-100-default); +:root { + --ds-auro-input-background-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default); --ds-auro-input-border-color: var(--ds-color-border-secondary-default, $ds-color-border-secondary-default); --ds-auro-input-caret-color: var(--ds-color-text-ui-focus-default, $ds-color-text-ui-focus-default); --ds-auro-input-help-text-color: var(--ds-color-text-tertiary-default, $ds-color-text-tertiary-default); --ds-auro-input-label-text-color: var(--ds-color-text-tertiary-default, $ds-color-text-tertiary-default); --ds-auro-input-notification-icon-color: var(--ds-color-alert-error-default, $ds-color-alert-error-default); - --ds-auro-input-placeholder-text-color: transparent; + --ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default); --ds-auro-input-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default); - --ds-auro-input-type-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default); } diff --git a/test/auro-input.test.js b/test/auro-input.test.js index 8710027..c05150c 100644 --- a/test/auro-input.test.js +++ b/test/auro-input.test.js @@ -76,7 +76,7 @@ describe('auro-input', () => { `); - const toggle = el.shadowRoot.querySelector('.passwordBtn button'); + const toggle = el.shadowRoot.querySelector('.passwordBtn'); const input = el.shadowRoot.querySelector('input'); input.focus();