chore(deps): update eslint (minor) (#1628)

* chore(deps): update eslint

* fix: style imports and lint

* fix: readme and obsolete vscode recs

* fix: try fixing lint for conditions

* fix: missed instances of import in scss

* fix: darken to color.adjust

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: tehkai <[email protected]>

Author: renovate[bot]

.vscode/extensions.json

@@ -5,8 +5,6 @@
     "stylelint.vscode-stylelint",
     "mrmlnc.vscode-scss",
     "Vue.volar",
-    "Vue.vscode-typescript-vue-plugin",
-    "mrmlnc.vscode-scss"
   ],
   "unwantedRecommendations": []
 }

README.md

@@ -53,7 +53,7 @@
     "@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1",
     "@evilmartians/lefthook": "^1.11.3",
     "@kong/design-tokens": "^1.17.3",
-    "@kong/eslint-config-kong-ui": "^1.1.3",
+    "@kong/eslint-config-kong-ui": "^1.2.4",
     "@kong/kongponents": "^9.24.2",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
@@ -64,7 +64,7 @@
     "cross-env": "^7.0.3",
     "cypress": "^14.1.0",
     "cz-conventional-changelog": "3.3.0",
-    "eslint": "^9.17.0",
+    "eslint": "^9.19.0",
     "postcss-custom-properties": "^14.0.4",
     "postcss-html": "^1.8.0",
     "rollup-plugin-visualizer": "^5.14.0",

package.json

@@ -30,14 +30,16 @@ const route = useRoute()
 </script>
 
 <style lang="scss">
+@use "sass:color";
+
 $blue: #1155cb;
 $green: #07a88d;
 
 .app-nav {
+  border: 1px solid color.adjust($blue, $lightness: -20%);
   display: flex;
   justify-content: center;
   width: 100%;
-  border: 1px solid darken($blue, 20%);
 
   ul {
     display: flex;
@@ -48,26 +50,26 @@ $green: #07a88d;
     width: 100%;
 
     li {
-      border-bottom: 1px solid darken($blue, 20%);
+      border-bottom: 1px solid color.adjust($blue, $lightness: -20%);
       font-size: 16px;
 
       &:last-of-type {
         border-bottom: 0;
       }
 
       a {
+        align-items: center;
+        background-color: $blue;
         border-bottom: 1px solid transparent;
         color: #fff;
-        background-color: $blue;
         display: flex;
-        align-items: center;
         justify-content: space-between;
         padding: 8px 16px;
         text-decoration: none;
         transition: all .2s ease-in-out;
 
         &:hover {
-          background-color: darken($blue, 10%);
+          background-color: color.adjust($blue, $lightness: -10%);
         }
 
         &.router-link-active {

sandbox/shared/AppNav.vue

@@ -1,5 +1,5 @@
 // Import Kong Design Tokens
-@import "@kong/design-tokens/tokens/scss/variables";
+@use "@kong/design-tokens/tokens/scss/variables" as *;
 
 // REGISTER
 .kong-auth-register-form {

src/assets/styles/_elements.scss

@@ -2,7 +2,7 @@
 
 @use "sass:meta";
 // Import Kong Design Tokens - has to be done here afer `sass:meta`
-@import "@kong/design-tokens/tokens/scss/variables";
+@use "@kong/design-tokens/tokens/scss/variables" as *;
 
 .kong-auth-element {
   // Import Kongponents styles

src/assets/styles/app.scss

@@ -261,5 +261,5 @@ onMounted(async () => {
 <style lang="scss" scoped>
 /*! KONG_AUTH_INJECT_STYLES */
 // No styles should be added to this component; add styles to the /assets/styles/_elements.scss partial
-@import "@/assets/styles/elements";
+@use "@/assets/styles/elements" as *;
 </style>

src/components/AcceptInvitationForm.vue

@@ -27,5 +27,5 @@ const { injectedStyles } = useInjectStyles()
 
 // Import custom app styles from a single entrypoint
 // (since this is wrapping all custom elements)
-@import "@/assets/styles/app";
+@use "@/assets/styles/app" as *;
 </style>

src/components/BaseCustomElement.vue

@@ -304,5 +304,5 @@ const submitForm = async (): Promise<void> => {
 <style lang="scss" scoped>
 /*! KONG_AUTH_INJECT_STYLES */
 // No styles should be added to this component; add styles to the /assets/styles/_elements.scss partial
-@import "@/assets/styles/elements";
+@use "@/assets/styles/elements" as *;
 </style>

src/components/ChangePasswordForm.vue

@@ -116,5 +116,5 @@ onMounted(() => {
 <style lang="scss" scoped>
 /*! KONG_AUTH_INJECT_STYLES */
 // No styles should be added to this component; add styles to the /assets/styles/_elements.scss partial
-@import "@/assets/styles/elements";
+@use "@/assets/styles/elements" as *;
 </style>

src/components/ErrorMessage.vue

@@ -232,5 +232,5 @@ const submitForm = async (): Promise<void> => {
 <style lang="scss" scoped>
 /*! KONG_AUTH_INJECT_STYLES */
 // No styles should be added to this component; add styles to the /assets/styles/_elements.scss partial
-@import "@/assets/styles/elements";
+@use "@/assets/styles/elements" as *;
 </style>

src/components/ForgotPasswordForm.vue

@@ -529,5 +529,5 @@ onMounted(async () => {
 <style lang="scss" scoped>
 /*! KONG_AUTH_INJECT_STYLES */
 // No styles should be added to this component; add styles to the /assets/styles/_elements.scss partial
-@import "@/assets/styles/elements";
+@use "@/assets/styles/elements" as *;
 </style>

src/components/LoginForm.vue

@@ -341,7 +341,7 @@ const processRecaptchaAndSubmit = () => {
     } else {
       submitForm()
     }
-  } catch (err) {
+  } catch {
     // Fallback to just submitting the form
     submitForm(true)
   }
@@ -462,5 +462,5 @@ onMounted(() => {
 <style lang="scss" scoped>
 /*! KONG_AUTH_INJECT_STYLES */
 // No styles should be added to this component; add styles to the /assets/styles/_elements.scss partial
-@import "@/assets/styles/elements";
+@use "@/assets/styles/elements" as *;
 </style>

src/components/RegisterForm.vue

@@ -152,8 +152,8 @@ const btnDisabled = computed((): boolean => {
 const { axiosInstance: axiosInstanceV1 } = useAxios({}, 'v1')
 
 const resetPassword = async (credentials: {
-  password: string,
-  token: string,
+  password: string
+  token: string
 }) => {
   if (userEntity === 'developer') {
     return await axiosInstanceV1.post('/api/v2/developer/reset-password', credentials)
@@ -249,5 +249,5 @@ onMounted(() => {
 <style lang="scss" scoped>
 /*! KONG_AUTH_INJECT_STYLES */
 // No styles should be added to this component; add styles to the /assets/styles/_elements.scss partial
-@import "@/assets/styles/elements";
+@use "@/assets/styles/elements" as *;
 </style>

src/components/ResetPasswordForm.vue

@@ -109,7 +109,7 @@ export default function useIdentityProvider(
 
       // Encode for query string param
       returnToParam = `returnTo=${encodeURIComponent(returnToUrl.href)}`
-    } catch (_) {
+    } catch {
       idpIsLoading.value = false
       // Console warning references the element prop name instead of local variable
 
@@ -127,7 +127,7 @@ export default function useIdentityProvider(
 
       // Encode for query string param
       callbackUrlParam = `callback_url=${encodeURIComponent(oidcCallbackUrl.href)}`
-    } catch (_) {
+    } catch {
       idpIsLoading.value = false
       // Console warning references the element prop name instead of local variable
 
@@ -188,7 +188,7 @@ export default function useIdentityProvider(
       // Create new URL from returnTo, wrapped in try/catch to construct the URL object
       const currentUrl = new URL(win.getLocationHref())
       oidcQueryParams.value = new URLSearchParams(currentUrl.search)
-    } catch (_) {
+    } catch {
       oidcQueryParams.value = null
       console.error(
         "'shouldTriggerIdpAuthentication' could not extract the required OIDC query parameters",

src/composables/useIdentityProvider.ts

@@ -31,7 +31,9 @@ defineEmits(acceptInvitationEmits)
 
 // Message props: These provided values default to useI18n() message text so
 // they must be provided in this format so the default value can be set in the child component.
-props.subheaderText && provide('invite-subheader-text', computed((): string => props.subheaderText))
+if (props.subheaderText) {
+  provide('invite-subheader-text', computed((): string => props.subheaderText))
+}
 </script>
 
 <style lang="scss">

src/elements/kong-auth-accept-invitation/KongAuthAcceptInvitation.ce.vue

@@ -44,7 +44,9 @@ provide(
 )
 // Message props: These provided values default to useI18n() message text so
 // they must be provided in this format so the default value can be set in the child component.
-props.changePasswordButtonText && provide('change-password-button-text', computed((): string => props.changePasswordButtonText))
+if (props.changePasswordButtonText) {
+  provide('change-password-button-text', computed((): string => props.changePasswordButtonText))
+}
 </script>
 
 <style lang="scss" scoped>

src/elements/kong-auth-change-password/KongAuthChangePassword.ce.vue

@@ -76,8 +76,13 @@ provide(
 
 // Message props: These provided values default to useI18n() message text so
 // they must be provided in this format so the default value can be set in the child component.
-props.loginLinkText && provide('login-link-text', computed((): string => props.loginLinkText))
-props.successText && provide('success-text', computed((): string => props.successText))
+if (props.loginLinkText) {
+  provide('login-link-text', computed((): string => props.loginLinkText))
+}
+
+if (props.successText) {
+  provide('success-text', computed((): string => props.successText))
+}
 </script>
 
 <style lang="scss" scoped>

src/elements/kong-auth-forgot-password/KongAuthForgotPassword.ce.vue

@@ -143,12 +143,29 @@ provide(
 
 // Message props: These provided values default to useI18n() message text so
 // they must be provided in this format so the default value can be set in the child component.
-props.forgotPasswordLinkText && provide('forgot-password-link-text', computed((): string => props.forgotPasswordLinkText))
-props.registerLinkHelpText && provide('register-link-help-text', computed((): string => props.registerLinkHelpText))
-props.registerLinkText && provide('register-link-text', computed((): string => props.registerLinkText))
-props.registerSuccessText && provide('register-success-text', computed((): string => props.registerSuccessText))
-props.loginSsoButtonText && provide('login-sso-button-text', computed((): string => props.loginSsoButtonText))
-props.loginButtonText && provide('login-button-text', computed((): string => props.loginButtonText))
+if (props.forgotPasswordLinkText) {
+  provide('forgot-password-link-text', computed((): string => props.forgotPasswordLinkText))
+}
+
+if (props.registerLinkHelpText) {
+  provide('register-link-help-text', computed((): string => props.registerLinkHelpText))
+}
+
+if (props.registerLinkText) {
+  provide('register-link-text', computed((): string => props.registerLinkText))
+}
+
+if (props.registerSuccessText) {
+  provide('register-success-text', computed((): string => props.registerSuccessText))
+}
+
+if (props.loginSsoButtonText) {
+  provide('login-sso-button-text', computed((): string => props.loginSsoButtonText))
+}
+
+if (props.loginButtonText) {
+  provide('login-button-text', computed((): string => props.loginButtonText))
+}
 </script>
 
 <style lang="scss">

src/elements/kong-auth-login/KongAuthLogin.ce.vue

@@ -78,7 +78,9 @@ provide(
 
 // Message props: These provided values default to useI18n() message text so
 // they must be provided in this format so the default value can be set in the child component.
-props.registerButtonText && provide('register-button-text', computed((): string => props.registerButtonText))
+if (props.registerButtonText) {
+  provide('register-button-text', computed((): string => props.registerButtonText))
+}
 </script>
 
 <style lang="scss">