From dec6be006ee7676508bffd1d264a4c9f7b0b3471 Mon Sep 17 00:00:00 2001 From: Adam DeHaven <adam.dehaven@konghq.com> Date: Wed, 13 Sep 2023 11:43:40 -0400 Subject: [PATCH 1/9] feat(style): remove usage of kongponents css custom props [KHCP-8877] Remove the usage and import of the kongponents css custom properties. --- package.json | 2 +- sandbox/elements/ElementsApp.vue | 2 +- src/assets/styles/app.scss | 8 ++++---- vite.config.ts | 15 +++++++++++++++ yarn.lock | 9 +++++---- 5 files changed, 26 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 3e710a0ca..6cd3c9e4f 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1", "@evilmartians/lefthook": "^1.4.10", "@kong/design-tokens": "^1.10.2", - "@kong/kongponents": "^8.123.6", + "@kong/kongponents": "^9.0.0-pr.1725.1d9bb913.0", "@rushstack/eslint-patch": "^1.3.3", "@semantic-release/changelog": "^6.0.3", "@semantic-release/git": "^10.0.1", diff --git a/sandbox/elements/ElementsApp.vue b/sandbox/elements/ElementsApp.vue index e8abc17bb..bbed230c4 100644 --- a/sandbox/elements/ElementsApp.vue +++ b/sandbox/elements/ElementsApp.vue @@ -8,7 +8,7 @@ <kong-auth-login .basic-auth-login-enabled="true" .idp-login-enabled="true" - idp-login-return-to="https://hydrogen.ephemeral.konnect-dev.konghq.com/" + idp-login-return-to="https://cloud.konghq.tech/" instruction-text="This is the instruction text" show-forgot-password-link wrapper-id="kong-auth-login-wrapper" diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss index 80115f431..cdae880aa 100644 --- a/src/assets/styles/app.scss +++ b/src/assets/styles/app.scss @@ -1,14 +1,14 @@ /*! KONG_AUTH_INJECT_STYLES */ -@use "sass:meta"; +// @use "sass:meta"; // Import Kong Design Tokens -@import "@kong/design-tokens/tokens/scss/_variables"; +// @import "@kong/design-tokens/tokens/scss/_variables"; // Import Kongponents Sass variables -@import "@kong/kongponents/dist/_variables"; +// @import "@kong/kongponents/dist/_variables"; .kong-auth-element { // Include and Scope Kongponents CSS Variables - @include kongponents-css-variables; + // @include kongponents-css-variables; // Import Kongponents styles @include meta.load-css("@kong/kongponents/dist/style.css"); // Import kong-auth-element styles diff --git a/vite.config.ts b/vite.config.ts index cddf81214..e7f39113e 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -92,6 +92,21 @@ export default ({ mode }) => { }, }), ], + css: { + devSourcemap: true, + preprocessorOptions: { + scss: { + // We inject `@use "sass:meta" here as it is needed in the `src/assets/styles/app.scss` file before any other style rules. + // ----- + // Inject the @kong/design-tokens SCSS variables to make them available for all components. + // This is not needed in host applications. + additionalData: ` + @use "sass:meta"; + @import "@kong/design-tokens/tokens/scss/variables"; + `, + }, + }, + }, resolve: { alias: { // Alias to the /src directory diff --git a/yarn.lock b/yarn.lock index 26540c091..cb23271e3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -577,11 +577,12 @@ resolved "https://registry.yarnpkg.com/@kong/icons/-/icons-1.4.3.tgz#1686da86dd13b6cb6995933067dfcc2675a6e023" integrity sha512-MymjAY044yG633C/tsxtdITk92g+EiRFhloTNBkrg+d5LFaBjz6Zw7YGStAAy+4Spy8jGmrGlJPmWiavOU1+Bg== -"@kong/kongponents@^8.123.6": - version "8.123.6" - resolved "https://registry.yarnpkg.com/@kong/kongponents/-/kongponents-8.123.6.tgz#71b3d358ceac9756015ce204c1edffdace6e5fb6" - integrity sha512-+Vni1ax3+6qqgNVS9Drj8fHv+z35FMt2lDzkGi9cFrfZn2LVMjuAh4xZ72R6shES+a7REnWTMuyx6s9fAxDAew== +"@kong/kongponents@^9.0.0-pr.1725.1d9bb913.0": + version "9.0.0-pr.1725.1d9bb913.0" + resolved "https://registry.yarnpkg.com/@kong/kongponents/-/kongponents-9.0.0-pr.1725.1d9bb913.0.tgz#4e6cf839effa6d73d5b4c033e7f38cf8e5335566" + integrity sha512-mG7DV0EF25o2p2u1hDQPdJMa4oHl+L5K1wLAKCBdseLl03nZa8RV7dvIId5jOAWQkGXGOeVXjIDCFcQopQ+ypQ== dependencies: + "@kong/icons" "^1.4.3" axios "^0.27.2" date-fns "^2.30.0" date-fns-tz "^2.0.0" From 1d6c7988423651ab67bdc04cc77cb377ef951474 Mon Sep 17 00:00:00 2001 From: Adam DeHaven <adam.dehaven@konghq.com> Date: Wed, 13 Sep 2023 11:49:06 -0400 Subject: [PATCH 2/9] fix: remove css props --- README.md | 22 ++-------------------- src/assets/styles/app.scss | 10 +--------- 2 files changed, 3 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index 934106086..b48909227 100644 --- a/README.md +++ b/README.md @@ -338,31 +338,13 @@ document.querySelector('kong-auth-login').addEventListener('login-success', func ### Theming with CSS Variables -Several custom CSS variables are available to impact the styling of custom elements, shown below - -| Variable | Purpose | -| :--------------------- | :--------------------------------------------- | -| `--KongAuthFontFamily` | Default font family | -| `--KongAuthFontWeight` | Default font weight when not set by Kongponent | - -Simply define values for the variables in your consuming application to make them available to the custom elements - -```css -<style> -:root { - --KongAuthFontFamily: 'Roboto'; - --KongAuthFontWeight: 400; -} -</style> -``` - -You may also utilize any CSS variables included in the [Kongponents component library](https://beta.kongponents.konghq.com/guide/theming.html). +You may utilize any CSS variables included in the [Kongponents component library](https://kongponents.konghq.com). In order to override the built-in CSS variables, you will need to scope your custom values to the `.kong-auth-element` selector as shown here ```css .kong-auth-element { - --KButtonPrimaryBase: #007ac1; /* set .k-button.primary to a custom color */ + --kui-color-text-primary: green; } ``` diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss index cdae880aa..450922bfe 100644 --- a/src/assets/styles/app.scss +++ b/src/assets/styles/app.scss @@ -1,14 +1,6 @@ /*! KONG_AUTH_INJECT_STYLES */ -// @use "sass:meta"; -// Import Kong Design Tokens -// @import "@kong/design-tokens/tokens/scss/_variables"; -// Import Kongponents Sass variables -// @import "@kong/kongponents/dist/_variables"; - .kong-auth-element { - // Include and Scope Kongponents CSS Variables - // @include kongponents-css-variables; // Import Kongponents styles @include meta.load-css("@kong/kongponents/dist/style.css"); // Import kong-auth-element styles @@ -17,6 +9,6 @@ font-family: var(--kui-font-family-text, $kui-font-family-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - font-weight: var(--KongAuthFontWeight, var(--kui-font-weight-regular, $kui-font-weight-regular)); + font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular); position: relative; } From 6b3d6a97d880f260ea8ed8062b37f315e9db07bd Mon Sep 17 00:00:00 2001 From: Adam DeHaven <adam.dehaven@konghq.com> Date: Wed, 13 Sep 2023 11:51:09 -0400 Subject: [PATCH 3/9] fix: linting --- package.json | 6 +++--- src/composables/useI18n.ts | 2 +- src/elements/kong-auth-login/KongAuthLogin.spec.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 6cd3c9e4f..08dee7f8d 100644 --- a/package.json +++ b/package.json @@ -17,9 +17,9 @@ "dev:elements": "cross-env SANDBOX=elements vite", "typecheck": "vue-tsc --noEmit", "lint": "eslint '**/*.{js,ts,vue}'", - "lint:fix": "eslint '**/*.{js,ts,vue}' --fix", - "stylelint": "stylelint './src/**/*.{css,scss,sass,less,styl,vue}'", - "stylelint:fix": "stylelint './src/**/*.{css,scss,sass,less,styl,vue}' --fix", + "lint:fix": "yarn lint --fix", + "stylelint": "stylelint './src/**/*.{css,scss,sass,vue}'", + "stylelint:fix": "yarn stylelint --fix", "test": "cypress run --component -b chrome", "test:open": "cypress open --component -b chrome", "test:spec": "cypress run --component -b chrome --spec", diff --git a/src/composables/useI18n.ts b/src/composables/useI18n.ts index d6eb4f714..1c01f2a01 100644 --- a/src/composables/useI18n.ts +++ b/src/composables/useI18n.ts @@ -11,7 +11,7 @@ export default function useI18n(lang: SupportedLanguages = 'en') { let messages const languages: MessageLanguages = { - en: en, + en, } // If lang exists, set to use provided language diff --git a/src/elements/kong-auth-login/KongAuthLogin.spec.ts b/src/elements/kong-auth-login/KongAuthLogin.spec.ts index b8178a8ec..56940d011 100644 --- a/src/elements/kong-auth-login/KongAuthLogin.spec.ts +++ b/src/elements/kong-auth-login/KongAuthLogin.spec.ts @@ -552,7 +552,7 @@ describe('KongAuthLogin.ce.vue', () => { const portalId = '12345-67890' cy.stub(getConfigOptions, 'userEntity').returns('developer') cy.stub(getConfigOptions, 'developerConfig').returns({ - portalId: portalId, + portalId, }) cy.stub(win, 'getLocationPathname').returns('/login/sso') cy.stub(win, 'setLocationHref').as('set-location') From ba5a94dd55ae706ee7f90272a4530c7c5e430852 Mon Sep 17 00:00:00 2001 From: Adam DeHaven <adam.dehaven@konghq.com> Date: Wed, 13 Sep 2023 12:22:02 -0400 Subject: [PATCH 4/9] fix: sass imports --- src/assets/styles/app.scss | 4 ++++ vite.config.ts | 12 ------------ 2 files changed, 4 insertions(+), 12 deletions(-) diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss index 450922bfe..2db33313c 100644 --- a/src/assets/styles/app.scss +++ b/src/assets/styles/app.scss @@ -1,5 +1,9 @@ /*! KONG_AUTH_INJECT_STYLES */ +@use "sass:meta"; +// Import Kong Design Tokens - has to be done here afer `sass:meta` +@import "@kong/design-tokens/tokens/scss/_variables"; + .kong-auth-element { // Import Kongponents styles @include meta.load-css("@kong/kongponents/dist/style.css"); diff --git a/vite.config.ts b/vite.config.ts index e7f39113e..c7cbbaa19 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -94,18 +94,6 @@ export default ({ mode }) => { ], css: { devSourcemap: true, - preprocessorOptions: { - scss: { - // We inject `@use "sass:meta" here as it is needed in the `src/assets/styles/app.scss` file before any other style rules. - // ----- - // Inject the @kong/design-tokens SCSS variables to make them available for all components. - // This is not needed in host applications. - additionalData: ` - @use "sass:meta"; - @import "@kong/design-tokens/tokens/scss/variables"; - `, - }, - }, }, resolve: { alias: { From ecdae987c81001416820c9240b963f0fa2450688 Mon Sep 17 00:00:00 2001 From: Adam DeHaven <adam.dehaven@konghq.com> Date: Wed, 13 Sep 2023 13:47:49 -0400 Subject: [PATCH 5/9] ci: verify no pr preview packages --- .github/workflows/pr-preview-packages.yaml | 16 ++++++++++++++++ README.md | 4 ++-- 2 files changed, 18 insertions(+), 2 deletions(-) create mode 100644 .github/workflows/pr-preview-packages.yaml diff --git a/.github/workflows/pr-preview-packages.yaml b/.github/workflows/pr-preview-packages.yaml new file mode 100644 index 000000000..bb61088eb --- /dev/null +++ b/.github/workflows/pr-preview-packages.yaml @@ -0,0 +1,16 @@ +name: Verify PR does not utilize package previews +on: + pull_request: + branches: + - main + +jobs: + check-packages: + name: No PR preview references + runs-on: ubuntu-latest + steps: + - name: Checkout code + uses: actions/checkout@v3 + + - name: No PR preview references + uses: Kong/public-shared-actions/pr-previews/validate@main diff --git a/README.md b/README.md index b48909227..da1192d8b 100644 --- a/README.md +++ b/README.md @@ -156,7 +156,7 @@ const options: KongAuthElementsOptions = { apiBaseUrl: 'https://us.api.konghq.com/kauth', userEntity: 'user', shadowDom: true, - injectCss: ['.kong-auth-login-form .k-input#email { background-color: var(--red-400, #ff0000) }'], + injectCss: ['.kong-auth-login-form .k-input#email { background-color: #ff0000 }'], lang: 'en', // Exclude to default to English } @@ -276,7 +276,7 @@ const pluginOptions: KongAuthElementsOptions = { apiBaseUrl: 'https://us.api.konghq.com/kauth', userEntity: 'user', injectCss: [ - '.kong-auth-login-form .k-input#email { background-color: var(--red-400, #ff0000) }', + '.kong-auth-login-form .k-input#email { background-color: #ff0000 }', ` .kong-auth-register-form .k-input { width: 50%; From c0dae711aafa29de105d50bfc04980cddc0deb74 Mon Sep 17 00:00:00 2001 From: Adam DeHaven <adam.dehaven@konghq.com> Date: Wed, 13 Sep 2023 13:48:54 -0400 Subject: [PATCH 6/9] chore: rename job --- .github/workflows/pr-preview-packages.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/pr-preview-packages.yaml b/.github/workflows/pr-preview-packages.yaml index bb61088eb..ffe99234b 100644 --- a/.github/workflows/pr-preview-packages.yaml +++ b/.github/workflows/pr-preview-packages.yaml @@ -6,7 +6,7 @@ on: jobs: check-packages: - name: No PR preview references + name: No PR preview packages runs-on: ubuntu-latest steps: - name: Checkout code From 3f2ef05965215a53183a9dff92bfb7a026ddd137 Mon Sep 17 00:00:00 2001 From: Adam DeHaven <adam.dehaven@konghq.com> Date: Wed, 13 Sep 2023 13:51:18 -0400 Subject: [PATCH 7/9] chore(deps): update kongponents --- package.json | 2 +- yarn.lock | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 08dee7f8d..7e857dc1d 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1", "@evilmartians/lefthook": "^1.4.10", "@kong/design-tokens": "^1.10.2", - "@kong/kongponents": "^9.0.0-pr.1725.1d9bb913.0", + "@kong/kongponents": "^8.123.7", "@rushstack/eslint-patch": "^1.3.3", "@semantic-release/changelog": "^6.0.3", "@semantic-release/git": "^10.0.1", diff --git a/yarn.lock b/yarn.lock index cb23271e3..8732dab04 100644 --- a/yarn.lock +++ b/yarn.lock @@ -577,12 +577,11 @@ resolved "https://registry.yarnpkg.com/@kong/icons/-/icons-1.4.3.tgz#1686da86dd13b6cb6995933067dfcc2675a6e023" integrity sha512-MymjAY044yG633C/tsxtdITk92g+EiRFhloTNBkrg+d5LFaBjz6Zw7YGStAAy+4Spy8jGmrGlJPmWiavOU1+Bg== -"@kong/kongponents@^9.0.0-pr.1725.1d9bb913.0": - version "9.0.0-pr.1725.1d9bb913.0" - resolved "https://registry.yarnpkg.com/@kong/kongponents/-/kongponents-9.0.0-pr.1725.1d9bb913.0.tgz#4e6cf839effa6d73d5b4c033e7f38cf8e5335566" - integrity sha512-mG7DV0EF25o2p2u1hDQPdJMa4oHl+L5K1wLAKCBdseLl03nZa8RV7dvIId5jOAWQkGXGOeVXjIDCFcQopQ+ypQ== +"@kong/kongponents@^8.123.7": + version "8.123.7" + resolved "https://registry.yarnpkg.com/@kong/kongponents/-/kongponents-8.123.7.tgz#1229f1fc906fa355e96b0bba7e50c16e66fe5a2d" + integrity sha512-QYKAFzpxvK7zFt/t9YaEiic87+q/IEFdyFZzC4LwuzKFeFjatg3NSoQJXTj9C87LEWpxhvlI1qyruwAY1DxRMw== dependencies: - "@kong/icons" "^1.4.3" axios "^0.27.2" date-fns "^2.30.0" date-fns-tz "^2.0.0" From 64671c5e2bbf18455c7518b08a9c910938e0a7e3 Mon Sep 17 00:00:00 2001 From: Adam DeHaven <adam.dehaven@konghq.com> Date: Wed, 13 Sep 2023 13:53:50 -0400 Subject: [PATCH 8/9] chore: add stylelint plugin --- .stylelintrc.cjs | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs index 4da05a6d0..b7ca342e8 100644 --- a/.stylelintrc.cjs +++ b/.stylelintrc.cjs @@ -14,13 +14,27 @@ module.exports = { 'unit-disallowed-list': [ ['rem', 'em'], ], + // Only allow @kong/design-tokens CSS custom properties + 'custom-property-pattern': [ + "^(kui).+$", + { + message: "Expected custom property \"%s\" to be sourced from @kong/design-tokens with prefix '--kui-'", + } + ], + 'custom-property-no-missing-var-function': true, // Disable the following rules - 'custom-property-no-missing-var-function': null, 'no-descending-specificity': null, - 'scss/at-import-no-partial-leading-underscore': null + 'scss/at-import-no-partial-leading-underscore': null, + 'no-extra-semicolons': null } } ], - plugins: [ 'stylelint-order' ], - rules: { 'order/properties-alphabetical-order': true } + plugins: [ + 'stylelint-order', + '@kong/design-tokens/stylelint-plugin' + ], + rules: { + 'order/properties-alphabetical-order': true, + '@kong/design-tokens/use-proper-token': [true, {disableFix: true}] + } } From 8fb32aada430a630ef2eaeb1f60d0ae342d7e0ec Mon Sep 17 00:00:00 2001 From: Adam DeHaven <adam.dehaven@konghq.com> Date: Wed, 13 Sep 2023 13:54:29 -0400 Subject: [PATCH 9/9] ci: stylelint --- .github/workflows/test.yaml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml index 25bd4aa48..2291989c7 100644 --- a/.github/workflows/test.yaml +++ b/.github/workflows/test.yaml @@ -53,6 +53,9 @@ jobs: - name: Install dependencies run: yarn install --frozen-lockfile + - name: Stylelint + run: yarn stylelint + - name: Lint run: yarn lint