From f286d5a7ae10da6360eda59dcec5f16bcaa95182 Mon Sep 17 00:00:00 2001 From: Adam DeHaven Date: Wed, 6 Sep 2023 11:28:04 -0400 Subject: [PATCH 01/11] feat(*): lint rules --- .client.eslintrc.js | 18 +- .eslintrc.js | 2 +- .github/workflows/github-pages.yml | 4 +- .github/workflows/pr.yml | 2 + .stylelintrc.js | 52 +++ disallowed-utility-classes.js | 289 +++++++++++++ lefthook.yaml | 14 +- package.json | 9 + src/App.vue | 20 +- src/assets/kongponents-theme.scss | 16 +- src/assets/mixins.scss | 2 +- src/assets/utilities.scss | 42 +- src/assets/variables.scss | 6 - src/components/ActionsDropdown.vue | 8 +- .../ApiDocumentation/DocumentSections.vue | 10 +- .../ApiDocumentation/DocumentTree.vue | 10 +- src/components/AuthCard.vue | 4 +- src/components/Catalog.vue | 6 +- src/components/CatalogItem.vue | 16 +- src/components/CatalogTableList.vue | 6 +- src/components/EmptyState.vue | 4 +- src/components/ErrorWrapper.vue | 2 +- src/components/Nav.vue | 2 +- src/components/PaginationBar.vue | 12 +- src/components/StatusBadge.vue | 4 +- src/components/UserDropdown.vue | 6 +- src/components/ViewSpecModal.vue | 14 +- src/components/ViewSpecRegistrationModal.vue | 4 +- src/components/product/Sidebar.vue | 8 +- src/components/product/sidebar/Section.vue | 2 +- src/components/vitals/AnalyticsEmptyState.vue | 6 +- .../vitals/AnalyticsMetricsCard.vue | 6 +- src/components/vitals/ChartPanel.vue | 13 +- src/main.css | 31 +- src/views/ApiDocumentationPage.vue | 6 +- .../Applications/ApplicationDashboard.vue | 4 +- src/views/Applications/ApplicationForm.vue | 4 +- src/views/Applications/CredentialsList.vue | 6 +- src/views/Forbidden.vue | 12 +- src/views/Login.vue | 2 +- src/views/NotFound.vue | 12 +- src/views/ProductCatalogWrapper.vue | 2 +- src/views/ProductShell.vue | 6 +- src/views/Shell.vue | 2 +- src/views/Spec.vue | 18 +- vite.config.js | 29 +- yarn.lock | 386 +++++++++++++++++- 47 files changed, 943 insertions(+), 196 deletions(-) create mode 100644 .stylelintrc.js create mode 100644 disallowed-utility-classes.js delete mode 100644 src/assets/variables.scss diff --git a/.client.eslintrc.js b/.client.eslintrc.js index 0e69ac2d..5d15ad15 100644 --- a/.client.eslintrc.js +++ b/.client.eslintrc.js @@ -1,3 +1,5 @@ +const deprecatedUtilityClasses = require('./utilities/deprecated-utility-classes') + module.exports = { root: true, env: { @@ -53,6 +55,12 @@ module.exports = { ], curly: 'error', camelcase: 'off', + indent: 'off', + 'semi': ['error', 'never'], + quotes: ['error', 'single', { + avoidEscape: true, + }], + 'comma-dangle': ['error', 'always-multiline'], 'eol-last': 'error', 'no-mixed-operators': 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', @@ -61,11 +69,19 @@ module.exports = { '@typescript-eslint/no-unused-vars': 'error', 'vue/custom-event-name-casing': 'off', 'vue/html-indent': 'error', + '@typescript-eslint/indent': ['error', 2], 'no-trailing-spaces': 'error', 'vue/multiline-html-element-content-newline': ['error', { ignoreWhenEmpty: true, ignores: ['CodeContent', 'pre', 'textarea', 'a'] - }] + }], + 'vue/attributes-order': ['error', { + alphabetical: true, + }], + // Disallow Kongponents utility classes + // TODO: Enable this rule when we remove all Kongponents utility classes + // 'vue/no-restricted-class': ['error', ...disallowedUtilityClasses], + // TODO: Temporary rules that need to be resolved and turned back into errors }, overrides: [ ] diff --git a/.eslintrc.js b/.eslintrc.js index eadc8f93..500588e5 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -4,7 +4,7 @@ module.exports = { 'plugin:portal-vue/all' ], rules: { - 'no-console': ['error', { allow: ['error'] }], + 'no-console': ['error', {allow: ['error']}], 'portal-vue/vue-setup-context': 'error', 'vue/multi-word-component-names': 'off', // Temporary rule that need to be resolved and turned back into errors diff --git a/.github/workflows/github-pages.yml b/.github/workflows/github-pages.yml index c37e7c2f..0bc09957 100644 --- a/.github/workflows/github-pages.yml +++ b/.github/workflows/github-pages.yml @@ -15,7 +15,7 @@ jobs: deploy: # This permission is required on the first run of running the action on a branch # because the branch doesn't exist the workflow needs permission to create it - permissions: + permissions: contents: write if: github.repository == 'kong/konnect-portal' name: deploy build to github-pages @@ -40,6 +40,8 @@ jobs: echo "VITE_PORTAL_API_URL='https://api-konnect-portal.konghq.com/'" >> .env echo "VITE_LOCALE='en'" >> .env echo "VITE_ENABLE_LAUNCH_DARKLY=true" >> .env + - name: Stylelint + run: yarn stylelint - name: Lint run: yarn lint - name: Build diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index d5c9d405..72485012 100644 --- a/.github/workflows/pr.yml +++ b/.github/workflows/pr.yml @@ -24,6 +24,8 @@ jobs: node-version-file: '.nvmrc' - name: Install Dependencies run: yarn install --frozen-lockfile + - name: Stylelint + run: yarn stylelint - name: Lint run: yarn lint - name: Check TypeScript types diff --git a/.stylelintrc.js b/.stylelintrc.js new file mode 100644 index 00000000..b2a8675f --- /dev/null +++ b/.stylelintrc.js @@ -0,0 +1,52 @@ +const allowedCssCustomPropertyPattern = '^(kui-|kong-ui-|text_colors|button_colors|section_colors).+$' +const allowedCssCustomPropertyMessage = "Expected custom property \"%s\" to be sourced from @kong/design-tokens with prefix '--kui-' or to have one of the following prefixes '--kong-ui-', '--text_colors', '--button_colors', '--section_colors'" + +module.exports = { + extends: [ + 'stylelint-config-html', + 'stylelint-config-recommended-scss', + 'stylelint-config-recommended-vue/scss' + ], + plugins: [ + 'stylelint-order', + '@kong/design-tokens/stylelint-plugin' + ], + ignoreFiles: [ + 'cypress/**/*', + 'dist/**/*', + ], + rules: { + 'order/properties-alphabetical-order': true, + '@kong/design-tokens/use-proper-token': true, + // Only allow @kong/design-tokens or `--kong-ui-*` CSS custom properties + // TODO: Enable this rule and remove the override below when all Kongponents utility classes and CSS custom properties have been removed + // 'custom-property-pattern': [ + // allowedCssCustomPropertyPattern, + // { + // message: allowedCssCustomPropertyMessage, + // severity: 'error' + // } + // ], + 'custom-property-no-missing-var-function': true, + // Disable the following rules + 'no-descending-specificity': null, + }, + overrides: [ + // TODO: Remove this override and enable the rule above when all Kongponents utility classes and CSS custom properties have been removed + { + files: [ + // TODO: Add directories here once the utility classes and CSS custom properties have been removed + // './src/components/ApiDocumentation/**/*', + ], + rules: { + 'custom-property-pattern': [ + allowedCssCustomPropertyPattern, + { + message: allowedCssCustomPropertyMessage, + severity: 'error' + } + ], + } + } + ] +} diff --git a/disallowed-utility-classes.js b/disallowed-utility-classes.js new file mode 100644 index 00000000..cd2f55a9 --- /dev/null +++ b/disallowed-utility-classes.js @@ -0,0 +1,289 @@ +// List of disallowed utility classes that are exported from Kongponents +// These classes **must not** be used in this repository +// This is temporary until `konnect-portal` bumps its Kongponents version to the next major release that removes these exported utility classes +module.exports = [ + 'type-xxxl', + 'type-xxl', + 'type-xl', + 'type-lg', + 'type-md', + 'type-sm', + 'type-xs', + 'type-xxs', + 'mono', + 'color-blue-100', + 'color-blue-200', + 'color-blue-300', + 'color-blue-400', + 'color-blue-500', + 'color-blue-600', + 'color-blue-700', + 'color-petrol-100', + 'color-petrol-200', + 'color-purple-100', + 'color-purple-200', + 'color-purple-300', + 'color-purple-400', + 'color-steel-100', + 'color-steel-200', + 'color-steel-300', + 'color-steel-400', + 'color-steel-500', + 'color-steel-600', + 'color-steel-700', + 'color-red-100', + 'color-red-200', + 'color-red-300', + 'color-red-400', + 'color-red-500', + 'color-red-600', + 'color-red-700', + 'color-green-100', + 'color-green-200', + 'color-green-300', + 'color-green-400', + 'color-green-500', + 'color-green-600', + 'color-green-700', + 'color-teal-100', + 'color-teal-200', + 'color-teal-300', + 'color-teal-400', + 'color-teal-500', + 'color-yellow-100', + 'color-yellow-200', + 'color-yellow-300', + 'color-yellow-400', + 'color-yellow-500', + 'color-yellow-600', + 'color-grey-100', + 'color-grey-200', + 'color-grey-300', + 'color-grey-400', + 'color-grey-500', + 'color-grey-600', + 'color-black-85', + 'color-black-70', + 'color-black-45', + 'color-black-25', + 'color-black-10', + 'color-black-100', + 'color-black-200', + 'color-black-300', + 'color-black-400', + 'color-black-500', + 'color-white', + 'style-heading-1', + 'style-heading-2', + 'style-heading-3', + 'style-heading-4', + 'style-body-lg', + 'style-body-lg-bold', + 'style-body-md', + 'style-body-md-bold', + 'style-body-sm', + 'style-body-sm-bold', + 'style-body-tiny', + 'style-body-link', + 'style-body-bc', + 'style-body-code', + 'mx-auto', + 'my-auto', + 'ma-auto', + 'mx-0', + 'my-0', + 'ma-0', + 'px-auto', + 'py-auto', + 'pa-auto', + 'px-0', + 'py-0', + 'pa-0', + 'mt-auto', + 'mt-0', + 'mr-auto', + 'mr-0', + 'mb-auto', + 'mb-0', + 'ml-auto', + 'ml-0', + 'mt-1', + 'mr-1', + 'mb-1', + 'ml-1', + 'mx-1', + 'my-1', + 'ma-1', + 'mt-2', + 'mr-2', + 'mb-2', + 'ml-2', + 'mx-2', + 'my-2', + 'ma-2', + 'mt-3', + 'mr-3', + 'mb-3', + 'ml-3', + 'mx-3', + 'my-3', + 'ma-3', + 'mt-4', + 'mr-4', + 'mb-4', + 'ml-4', + 'mx-4', + 'my-4', + 'ma-4', + 'mt-5', + 'mr-5', + 'mb-5', + 'ml-5', + 'mx-5', + 'my-5', + 'ma-5', + 'mt-6', + 'mr-6', + 'mb-6', + 'ml-6', + 'mx-6', + 'my-6', + 'ma-6', + 'mt-7', + 'mr-7', + 'mb-7', + 'ml-7', + 'mx-7', + 'my-7', + 'ma-7', + 'mt-8', + 'mr-8', + 'mb-8', + 'ml-8', + 'mx-8', + 'my-8', + 'ma-8', + 'pt-0', + 'pr-0', + 'pb-0', + 'pl-0', + 'pt-1', + 'pr-1', + 'pb-1', + 'pl-1', + 'px-1', + 'py-1', + 'pa-1', + 'pt-2', + 'pr-2', + 'pb-2', + 'pl-2', + 'px-2', + 'py-2', + 'pa-2', + 'pt-3', + 'pr-3', + 'pb-3', + 'pl-3', + 'px-3', + 'py-3', + 'pa-3', + 'pt-4', + 'pr-4', + 'pb-4', + 'pl-4', + 'px-4', + 'py-4', + 'pa-4', + 'pt-5', + 'pr-5', + 'pb-5', + 'pl-5', + 'px-5', + 'py-5', + 'pa-5', + 'pt-6', + 'pr-6', + 'pb-6', + 'pl-6', + 'px-6', + 'py-6', + 'pa-6', + 'pt-7', + 'pr-7', + 'pb-7', + 'pl-7', + 'px-7', + 'py-7', + 'pa-7', + 'pt-8', + 'pr-8', + 'pb-8', + 'pl-8', + 'px-8', + 'py-8', + 'pa-8', + 'float-left', + 'float-right', + 'float-none', + 'truncate', + 'multi-line-truncation', + 'truncate-multi', + 'capitalize', + 'lowercase', + 'uppercase', + 'bold-500', + 'bold-600', + 'bold-700', + 'd-none', + 'd-inline', + 'd-inline-block', + 'd-block', + 'd-flex', + 'd-inline-flex', + 'flex-fill', + 'flex-row', + 'flex-column', + 'flex-row-reverse', + 'flex-column-reverse', + 'flex-grow-0', + 'flex-grow-1', + 'justify-content-start', + 'justify-content-end', + 'justify-content-center', + 'justify-content-between', + 'justify-content-around', + 'align-items-start', + 'align-items-end', + 'align-items-center', + 'align-items-baseline', + 'align-items-stretch', + 'align-content-start', + 'align-content-end', + 'align-content-center', + 'align-content-between', + 'align-content-around', + 'align-content-stretch', + 'align-self-auto', + 'align-self-start', + 'align-self-end', + 'align-self-center', + 'align-self-baseline', + 'align-self-stretch', + 'place-self-start', + 'place-self-center', + 'place-self-end', + 'cursor-pointer', + 'overflow-auto', + 'overflow-hidden', + 'w-25', + 'w-50', + 'w-75', + 'w-100', + 'w-auto', + 'h-100', + 'h-auto', + 'h-screen', + 'non-visual-button', + 'k-visually-hidden' +] diff --git a/lefthook.yaml b/lefthook.yaml index fb87e800..f8bd704b 100644 --- a/lefthook.yaml +++ b/lefthook.yaml @@ -1,14 +1,24 @@ -# Refer for explanation to following link: -# https://github.com/evilmartians/lefthook/blob/master/docs/configuration.md +# Refer for explanation to following link: +# https://github.com/evilmartians/lefthook/blob/master/docs/configuration.md pre-push: parallel: true commands: + stylelint: + skip: + - merge + - rebase + run: yarn stylelint eslint: skip: - merge - rebase run: yarn lint + typecheck: + skip: + - merge + - rebase + run: yarn typecheck dependencies: skip: - merge diff --git a/package.json b/package.json index eef12a15..5c2e4d30 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,8 @@ "build:analyze": "BUILD_VISUALIZER=true vite build --mode production", "lint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore src", "lint:fix": "yarn lint --fix", + "stylelint": "stylelint --allow-empty-input './src/**/*.{css,scss,sass,less,styl,vue}'", + "stylelint:fix": "yarn stylelint --fix", "commit": "cz", "build:watch": "vite build --watch", "build:watch:dev": "vite build --watch --mode development --minify false", @@ -47,6 +49,7 @@ "devDependencies": { "@commitlint/cli": "17.7.1", "@commitlint/config-conventional": "17.7.0", + "@kong/design-tokens": "^1.9.1", "@semantic-release/changelog": "6.0.3", "@semantic-release/git": "10.0.1", "@typescript-eslint/eslint-plugin": "5.62.0", @@ -75,9 +78,15 @@ "express": "4.18.2", "lefthook": "1.4.1", "openapi-types": "12.1.3", + "postcss-html": "^1.5.0", "rollup-plugin-visualizer": "5.9.2", "sass": "1.66.1", "semantic-release": "21.1.1", + "stylelint": "^15.10.3", + "stylelint-config-html": "^1.1.0", + "stylelint-config-recommended-scss": "^13.0.0", + "stylelint-config-recommended-vue": "^1.5.0", + "stylelint-order": "^6.0.3", "tailwindcss": "3.3.2", "typescript": "4.9.5", "vite": "4.4", diff --git a/src/App.vue b/src/App.vue index 01b71dcd..9947e6e0 100644 --- a/src/App.vue +++ b/src/App.vue @@ -76,7 +76,7 @@ export default defineComponent({ diff --git a/src/assets/kongponents-theme.scss b/src/assets/kongponents-theme.scss index c2a8d148..3d8f9b4e 100644 --- a/src/assets/kongponents-theme.scss +++ b/src/assets/kongponents-theme.scss @@ -61,8 +61,8 @@ &:hover, &:active, &:hover:not(:disabled) { - border-color: var(--KButtonSecondaryHoverBorder, var(--black-45, rgba(0, 0, 0, .45))) !important; background-color: var(--KButtonSecondaryBase) !important; + border-color: var(--KButtonSecondaryHoverBorder, var(--black-45, rgba(0, 0, 0, .45))) !important; } &:focus { @@ -71,8 +71,8 @@ } .k-button.primary { - color: var(--button_colors-primary-text) !important; background-color: var(--button_colors-primary-fill) !important; + color: var(--button_colors-primary-text) !important; } .k-button.primary:hover { @@ -92,8 +92,8 @@ } .toaster-item .k-alert { - color: var(--text_colors-primary) !important; background-color: var(--section_colors-tertiary) !important; + color: var(--text_colors-primary) !important; svg path { fill: var(--text_colors-primary) !important; @@ -109,10 +109,10 @@ &:disabled, &[disabled] { - opacity: .3; - cursor: not-allowed; - color: var(--button_colors-primary-text) !important; background-color: var(--button_colors-primary-fill) !important; + color: var(--button_colors-primary-text) !important; + cursor: not-allowed; + opacity: .3; &:hover { opacity: .3; @@ -121,9 +121,9 @@ } .kong-card .k-card-content div.k-card-body { + color: inherit; font-size: 16px; line-height: 24px; - color: inherit; } .k-breadcrumbs li.k-breadcrumbs-item a span.k-breadcrumb-text { @@ -142,8 +142,8 @@ } .k-input[type="search"] { - width: 100%; padding-left: 36px !important; + width: 100%; } textarea.k-input { diff --git a/src/assets/mixins.scss b/src/assets/mixins.scss index 39b6ebdc..d98bec18 100644 --- a/src/assets/mixins.scss +++ b/src/assets/mixins.scss @@ -2,7 +2,7 @@ @mixin grid-columns($columns) { display: grid; - grid-template-columns: repeat($columns, 1fr); grid-column-gap: 16px; grid-row-gap: 16px; + grid-template-columns: repeat($columns, 1fr); } \ No newline at end of file diff --git a/src/assets/utilities.scss b/src/assets/utilities.scss index 43fe5252..884a8fb4 100644 --- a/src/assets/utilities.scss +++ b/src/assets/utilities.scss @@ -1,9 +1,9 @@ /* position */ .fixed-top { + left: 0; position: fixed; - top: 0; right: 0; - left: 0; + top: 0; z-index: 1030; } @@ -41,8 +41,8 @@ /* table */ .bold-col-1 tbody { td:nth-of-type(1) { - min-width: 120px; font-weight: 600; + min-width: 120px; } } @@ -57,14 +57,14 @@ /* badges */ .badge { + border-radius: .25rem; display: inline-block; - padding: .25rem .4rem; font-size: 75%; line-height: 1; + padding: .25rem .4rem; text-align: center; - white-space: nowrap; vertical-align: baseline; - border-radius: .25rem; + white-space: nowrap; } .list-badge.k-badge { @@ -77,20 +77,20 @@ } &.badge-white { - color: var(--blue-500); background-color: var(--white); border: 1px solid var(--steel-200); + color: var(--blue-500); } &.badge-grey { - color: var(--black-70); background-color: var(--black-10); + color: var(--black-70); &:hover { background-color: var(--black-25); } } &.badge-blue { - color: var(--blue-500); background-color: var(--blue-200); + color: var(--blue-500); &:hover { background-color: var(--blue-300); } @@ -98,13 +98,13 @@ } .top-border { - padding-top: 1.5rem; border-top: 1px solid var(--black-10); + padding-top: 1.5rem; } .bottom-border { - padding-bottom: 1.5rem; border-bottom: 1px solid var(--black-10); + padding-bottom: 1.5rem; } .text-muted { color: var(--black-45) !important; } @@ -128,26 +128,26 @@ /* Tabs - Bootstrap styling 😢️😩️ */ .nav { display: flex; - padding-left: 0; - margin-bottom: 0; list-style: none; + margin-bottom: 0; + padding-left: 0; &.nav-tabs { border-bottom: 1px solid var(--grey-300); .nav-item { - margin-bottom: -1px; cursor: pointer; + margin-bottom: -1px; } .nav-link { - display: block; - color: var(--black-45); - padding: var(--spacing-xs) var(--spacing-md); border: 1px solid transparent; - border-top-right-radius: 3px; border-top-left-radius: 3px; + border-top-right-radius: 3px; + color: var(--black-45); + display: block; + padding: var(--spacing-xs) var(--spacing-md); &.active { - color: var(--blue-700); - border-color: var(--grey-300) var(--grey-300) #fff; background-color: #fff; + border-color: var(--grey-300) var(--grey-300) #fff; + color: var(--blue-700); &:hover, &:focus { border-color: var(--grey-300) var(--grey-300) #fff; @@ -155,8 +155,8 @@ } &:hover, &:focus { - text-decoration: none; border-color: var(--grey-200) var(--grey-200) var(--grey-300); + text-decoration: none; } } } diff --git a/src/assets/variables.scss b/src/assets/variables.scss deleted file mode 100644 index b4bbb8f4..00000000 --- a/src/assets/variables.scss +++ /dev/null @@ -1,6 +0,0 @@ -// Breakpoints -$viewport-sm: 640px; -$viewport-md: 768px; -$viewport-lg: 1024px; // Mobile layout breakpoint -$viewport-xl: 1280px; -$viewport-2xl: 1536px; diff --git a/src/components/ActionsDropdown.vue b/src/components/ActionsDropdown.vue index 76a53882..bff72f65 100644 --- a/src/components/ActionsDropdown.vue +++ b/src/components/ActionsDropdown.vue @@ -72,17 +72,17 @@ export default defineComponent({ --KBadgePaddingX: var(--spacing-sm); --KBadgeBackground: var(--blue-200); --KBadgeLighterBackground: var(--white-100); + align-items: center; border: 1px solid var(--section_colors-stroke); - height: auto; display: flex; - align-items: center; + height: auto; } .action-dropdown-button { --KButtonOutlineBorder: var(--section_colors-stroke); border: none; - padding: 0 !important; margin: 0; + padding: 0 !important; } @@ -99,8 +99,8 @@ export default defineComponent({ --KPopPaddingX: 0; --KPopBorder: var(--section_colors-stroke); div { - color: var(--text_colors-secondary); background-color: var(--section_colors-tertiary); + color: var(--text_colors-secondary); &:hover { background-color: var(--section_colors-accent); } diff --git a/src/components/ApiDocumentation/DocumentSections.vue b/src/components/ApiDocumentation/DocumentSections.vue index e5131d4a..5866eae8 100644 --- a/src/components/ApiDocumentation/DocumentSections.vue +++ b/src/components/ApiDocumentation/DocumentSections.vue @@ -92,11 +92,11 @@ export default defineComponent({ diff --git a/src/components/CatalogItem.vue b/src/components/CatalogItem.vue index 81b63758..9597598c 100644 --- a/src/components/CatalogItem.vue +++ b/src/components/CatalogItem.vue @@ -136,23 +136,23 @@ export default { diff --git a/src/components/CatalogTableList.vue b/src/components/CatalogTableList.vue index cf28929c..70c76d1e 100644 --- a/src/components/CatalogTableList.vue +++ b/src/components/CatalogTableList.vue @@ -121,14 +121,14 @@ export default defineComponent({ color: var(--text_colors-secondary); &:nth-of-type(1) { - min-width: 120px; color: var(--text_colors-headings); + min-width: 120px; } &:nth-of-type(2) { - width: auto; max-width: 65ch; white-space: normal; + width: auto; } } } @@ -137,9 +137,9 @@ export default defineComponent({ diff --git a/src/components/Nav.vue b/src/components/Nav.vue index d3ce7a74..61b15524 100644 --- a/src/components/Nav.vue +++ b/src/components/Nav.vue @@ -79,9 +79,9 @@ export default defineComponent({ } #site-header { - height: var(--headerHeight); background-color: var(--section_colors-header); border-bottom: 1px solid var(--section_colors-stroke); + height: var(--headerHeight); .links a { color: var(--text_colors-header); diff --git a/src/components/PaginationBar.vue b/src/components/PaginationBar.vue index b8fd79a5..07516da2 100644 --- a/src/components/PaginationBar.vue +++ b/src/components/PaginationBar.vue @@ -150,18 +150,18 @@ export default defineComponent({ diff --git a/src/components/StatusBadge.vue b/src/components/StatusBadge.vue index 3936459a..3084694c 100644 --- a/src/components/StatusBadge.vue +++ b/src/components/StatusBadge.vue @@ -64,9 +64,9 @@ export default defineComponent({ --KBadgePaddingY: 0.1rem; --KBadgePaddingX: var(--spacing-xs); --KBadgeFontSize: var(--type-xs); - width: auto; height: 100%; - vertical-align: middle; text-transform: uppercase; + vertical-align: middle; + width: auto; } diff --git a/src/components/UserDropdown.vue b/src/components/UserDropdown.vue index b1c28c0e..1d9dd40c 100644 --- a/src/components/UserDropdown.vue +++ b/src/components/UserDropdown.vue @@ -77,17 +77,17 @@ export default defineComponent({ .k-button:focus, .k-button:hover, .k-button.is-active { - text-decoration: none !important; - box-shadow: none !important; backdrop-filter: brightness(1.35); + box-shadow: none !important; + text-decoration: none !important; } ul { + background-color: var(--section_colors-tertiary); border: 1px solid var(--section_colors-stroke); border-radius: 3px; left: 50%; transform: translateX(-50%); - background-color: var(--section_colors-tertiary); li { &:last-child { border-top: 1px solid var(--section_colors-stroke); } &:hover { background-color: var(--section_colors-accent); } diff --git a/src/components/ViewSpecModal.vue b/src/components/ViewSpecModal.vue index bad3e7ab..0868600f 100644 --- a/src/components/ViewSpecModal.vue +++ b/src/components/ViewSpecModal.vue @@ -112,15 +112,15 @@ const copySpec = (executeCopy) => { diff --git a/src/components/ViewSpecRegistrationModal.vue b/src/components/ViewSpecRegistrationModal.vue index 357770ef..11e453c3 100644 --- a/src/components/ViewSpecRegistrationModal.vue +++ b/src/components/ViewSpecRegistrationModal.vue @@ -340,10 +340,10 @@ export default defineComponent({ diff --git a/src/components/product/Sidebar.vue b/src/components/product/Sidebar.vue index bff5757a..fff78cd5 100644 --- a/src/components/product/Sidebar.vue +++ b/src/components/product/Sidebar.vue @@ -94,15 +94,15 @@ watch([ diff --git a/src/components/vitals/AnalyticsEmptyState.vue b/src/components/vitals/AnalyticsEmptyState.vue index 1c92bfd0..ec93145a 100644 --- a/src/components/vitals/AnalyticsEmptyState.vue +++ b/src/components/vitals/AnalyticsEmptyState.vue @@ -29,10 +29,10 @@ withDefaults(defineProps<{ diff --git a/src/views/Applications/CredentialsList.vue b/src/views/Applications/CredentialsList.vue index 78442213..f75fddb9 100644 --- a/src/views/Applications/CredentialsList.vue +++ b/src/views/Applications/CredentialsList.vue @@ -429,8 +429,8 @@ export default defineComponent({ .k-input-label { display: block; - text-align: left; font-size: var(--type-md, 16px); + text-align: left; } .display-name-input { @@ -445,9 +445,9 @@ export default defineComponent({ margin-top: 0.5rem !important; .clipboard-button { + font-size: var(--type-md, 16px); padding: 10px 16px; padding-right: 8px; - font-size: var(--type-md, 16px); } } } @@ -458,8 +458,8 @@ export default defineComponent({ --KModalHeaderColor: var(--text_colors-headings); --KModalColor: var(--text_colors-primary); .copy-text { - text-align: left; font-size: var(--type-md, 16px); + text-align: left; &.copy-label { font-weight: 500; diff --git a/src/views/Forbidden.vue b/src/views/Forbidden.vue index 0b94934e..ec903212 100644 --- a/src/views/Forbidden.vue +++ b/src/views/Forbidden.vue @@ -61,19 +61,19 @@ export default defineComponent({ h1, .circle { - opacity: 0; animation: .75s var(--timingFunction) forwards fadeIn; + opacity: 0; } h1 { animation-delay: 1.25s; } - .circle { animation-delay: 1s; } .circle { - padding: 3rem; - margin: 4rem 0; - font-size: 2.5rem; - border-radius: 50%; + animation-delay: 1s; border: 1px solid var(--section_colors-stroke); + border-radius: 50%; + font-size: 2.5rem; + margin: 4rem 0; + padding: 3rem; } .logo { diff --git a/src/views/Login.vue b/src/views/Login.vue index 4f057a21..2cae7d47 100644 --- a/src/views/Login.vue +++ b/src/views/Login.vue @@ -204,8 +204,8 @@ export default defineComponent({ #kong-auth-login-wrapper { [data-testid="kong-auth-login-sso"] { - color: var(--button_colors-primary-text) !important; background-color: var(--button_colors-primary-fill) !important; + color: var(--button_colors-primary-text) !important; svg { path { diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue index e8990241..8b6550ce 100644 --- a/src/views/NotFound.vue +++ b/src/views/NotFound.vue @@ -62,19 +62,19 @@ export default defineComponent({ h1, .circle { - opacity: 0; animation: .75s var(--timingFunction) forwards fadeIn; + opacity: 0; } h1 { animation-delay: 1.25s; } - .circle { animation-delay: 1s; } .circle { - padding: 3rem; - margin: 4rem 0; - font-size: 2.5rem; - border-radius: 50%; + animation-delay: 1s; border: 1px solid var(--section_colors-stroke); + border-radius: 50%; + font-size: 2.5rem; + margin: 4rem 0; + padding: 3rem; } .logo { diff --git a/src/views/ProductCatalogWrapper.vue b/src/views/ProductCatalogWrapper.vue index 3a54f3f0..66dc3e96 100644 --- a/src/views/ProductCatalogWrapper.vue +++ b/src/views/ProductCatalogWrapper.vue @@ -202,8 +202,8 @@ export default defineComponent({ border-bottom: 1px solid var(--section_colors-stroke); .k-input { - fill: var(--text_colors-accent); border-radius: 3px 0 0 3px !important; + fill: var(--text_colors-accent); &::-webkit-input-placeholder { color:var(--text_colors-secondary) !important; } &::-moz-placeholder { color:var(--text_colors-secondary) !important; } &::-ms-placeholder { color:var(--text_colors-secondary) !important; } diff --git a/src/views/ProductShell.vue b/src/views/ProductShell.vue index fb2842dc..13c6f5a9 100644 --- a/src/views/ProductShell.vue +++ b/src/views/ProductShell.vue @@ -263,11 +263,11 @@ watchEffect(() => { } .container.product.page.fixed-position { - position: fixed; bottom: 0; left: 0; - right: 0; max-width: 100%; + position: fixed; + right: 0; } .product { @@ -275,8 +275,8 @@ watchEffect(() => { } .sidebar-wrapper { - flex: 0 0 auto; border-right: 1px solid var(--section_colors-stroke); + flex: 0 0 auto; } .sidebar { diff --git a/src/views/Shell.vue b/src/views/Shell.vue index 4d11a384..d8f24f5a 100644 --- a/src/views/Shell.vue +++ b/src/views/Shell.vue @@ -6,8 +6,8 @@ diff --git a/src/views/Spec.vue b/src/views/Spec.vue index c351adc2..ff54eaca 100644 --- a/src/views/Spec.vue +++ b/src/views/Spec.vue @@ -480,18 +480,18 @@ export default defineComponent({ diff --git a/src/assets/kongponents-theme.scss b/src/assets/kongponents-theme.scss index 3d8f9b4e..c2a8d148 100644 --- a/src/assets/kongponents-theme.scss +++ b/src/assets/kongponents-theme.scss @@ -61,8 +61,8 @@ &:hover, &:active, &:hover:not(:disabled) { - background-color: var(--KButtonSecondaryBase) !important; border-color: var(--KButtonSecondaryHoverBorder, var(--black-45, rgba(0, 0, 0, .45))) !important; + background-color: var(--KButtonSecondaryBase) !important; } &:focus { @@ -71,8 +71,8 @@ } .k-button.primary { - background-color: var(--button_colors-primary-fill) !important; color: var(--button_colors-primary-text) !important; + background-color: var(--button_colors-primary-fill) !important; } .k-button.primary:hover { @@ -92,8 +92,8 @@ } .toaster-item .k-alert { - background-color: var(--section_colors-tertiary) !important; color: var(--text_colors-primary) !important; + background-color: var(--section_colors-tertiary) !important; svg path { fill: var(--text_colors-primary) !important; @@ -109,10 +109,10 @@ &:disabled, &[disabled] { - background-color: var(--button_colors-primary-fill) !important; - color: var(--button_colors-primary-text) !important; - cursor: not-allowed; opacity: .3; + cursor: not-allowed; + color: var(--button_colors-primary-text) !important; + background-color: var(--button_colors-primary-fill) !important; &:hover { opacity: .3; @@ -121,9 +121,9 @@ } .kong-card .k-card-content div.k-card-body { - color: inherit; font-size: 16px; line-height: 24px; + color: inherit; } .k-breadcrumbs li.k-breadcrumbs-item a span.k-breadcrumb-text { @@ -142,8 +142,8 @@ } .k-input[type="search"] { - padding-left: 36px !important; width: 100%; + padding-left: 36px !important; } textarea.k-input { diff --git a/src/assets/mixins.scss b/src/assets/mixins.scss index d98bec18..39b6ebdc 100644 --- a/src/assets/mixins.scss +++ b/src/assets/mixins.scss @@ -2,7 +2,7 @@ @mixin grid-columns($columns) { display: grid; + grid-template-columns: repeat($columns, 1fr); grid-column-gap: 16px; grid-row-gap: 16px; - grid-template-columns: repeat($columns, 1fr); } \ No newline at end of file diff --git a/src/assets/utilities.scss b/src/assets/utilities.scss index 884a8fb4..43fe5252 100644 --- a/src/assets/utilities.scss +++ b/src/assets/utilities.scss @@ -1,9 +1,9 @@ /* position */ .fixed-top { - left: 0; position: fixed; - right: 0; top: 0; + right: 0; + left: 0; z-index: 1030; } @@ -41,8 +41,8 @@ /* table */ .bold-col-1 tbody { td:nth-of-type(1) { - font-weight: 600; min-width: 120px; + font-weight: 600; } } @@ -57,14 +57,14 @@ /* badges */ .badge { - border-radius: .25rem; display: inline-block; + padding: .25rem .4rem; font-size: 75%; line-height: 1; - padding: .25rem .4rem; text-align: center; - vertical-align: baseline; white-space: nowrap; + vertical-align: baseline; + border-radius: .25rem; } .list-badge.k-badge { @@ -77,20 +77,20 @@ } &.badge-white { + color: var(--blue-500); background-color: var(--white); border: 1px solid var(--steel-200); - color: var(--blue-500); } &.badge-grey { - background-color: var(--black-10); color: var(--black-70); + background-color: var(--black-10); &:hover { background-color: var(--black-25); } } &.badge-blue { - background-color: var(--blue-200); color: var(--blue-500); + background-color: var(--blue-200); &:hover { background-color: var(--blue-300); } @@ -98,13 +98,13 @@ } .top-border { - border-top: 1px solid var(--black-10); padding-top: 1.5rem; + border-top: 1px solid var(--black-10); } .bottom-border { - border-bottom: 1px solid var(--black-10); padding-bottom: 1.5rem; + border-bottom: 1px solid var(--black-10); } .text-muted { color: var(--black-45) !important; } @@ -128,26 +128,26 @@ /* Tabs - Bootstrap styling 😢️😩️ */ .nav { display: flex; - list-style: none; - margin-bottom: 0; padding-left: 0; + margin-bottom: 0; + list-style: none; &.nav-tabs { border-bottom: 1px solid var(--grey-300); .nav-item { - cursor: pointer; margin-bottom: -1px; + cursor: pointer; } .nav-link { - border: 1px solid transparent; - border-top-left-radius: 3px; - border-top-right-radius: 3px; - color: var(--black-45); display: block; + color: var(--black-45); padding: var(--spacing-xs) var(--spacing-md); + border: 1px solid transparent; + border-top-right-radius: 3px; + border-top-left-radius: 3px; &.active { - background-color: #fff; - border-color: var(--grey-300) var(--grey-300) #fff; color: var(--blue-700); + border-color: var(--grey-300) var(--grey-300) #fff; + background-color: #fff; &:hover, &:focus { border-color: var(--grey-300) var(--grey-300) #fff; @@ -155,8 +155,8 @@ } &:hover, &:focus { - border-color: var(--grey-200) var(--grey-200) var(--grey-300); text-decoration: none; + border-color: var(--grey-200) var(--grey-200) var(--grey-300); } } } diff --git a/src/components/ActionsDropdown.vue b/src/components/ActionsDropdown.vue index 03c4b0ad..76a53882 100644 --- a/src/components/ActionsDropdown.vue +++ b/src/components/ActionsDropdown.vue @@ -1,14 +1,14 @@ @@ -109,50 +109,50 @@ export default { props: { product: { type: Object as PropType, - default: () => {}, + default: () => {} }, loading: { type: Boolean, - default: false, - }, + default: false + } }, - data() { + data () { const helpText = useI18nStore().state.helpText.catalogItem return { - helpText, + helpText } }, computed: { - version() { + version () { return this.product.latestVersion }, - versionLabel() { + versionLabel () { return this.product.versionCount === 1 ? 'Version: ' : 'Versions: ' - }, - }, + } + } } diff --git a/src/components/CatalogTableList.vue b/src/components/CatalogTableList.vue index 705e10ec..cf28929c 100644 --- a/src/components/CatalogTableList.vue +++ b/src/components/CatalogTableList.vue @@ -1,14 +1,14 @@