refactor: remove tailwind utility from components

Kong · Sep 8, 2023 · 63e91c0 · 63e91c0
1 parent 32ab48a
commit 63e91c0
Show file tree

Hide file tree

Showing 22 changed files with 330 additions and 77 deletions.
diff --git a/src/assets/utilities.scss b/src/assets/utilities.scss
@@ -195,4 +195,28 @@
 .uuid-icon-wrapper {
   display: flex;
   margin-left: 4px;
+}
+
+.responsive-container {
+  width: 100% ;
+
+  @media (min-width: $kui-breakpoint-mobile) {
+    max-width: $kui-breakpoint-mobile !important;
+  }
+
+  @media (min-width: $kui-breakpoint-phablet) {
+    max-width: $kui-breakpoint-phablet !important;
+  }
+
+  @media (min-width: $kui-breakpoint-tablet) {
+    max-width: $kui-breakpoint-tablet !important;
+  }
+
+  @media (min-width: $kui-breakpoint-laptop) {
+    max-width: $kui-breakpoint-laptop !important;
+  }
+
+  @media (min-width: $kui-breakpoint-desktop) {
+    max-width: $kui-breakpoint-desktop !important;
+  }
 }
diff --git a/src/components/ActionsDropdown.vue b/src/components/ActionsDropdown.vue
@@ -3,7 +3,7 @@
     ref="popRef"
     :popover-timeout="0"
     popover-classes="mt-1 action-dropdown"
-    class="float-right"
+    class="popover"
     placement="bottomEnd"
     width="150"
     hide-caret
@@ -18,7 +18,7 @@
         <KBadge
           data-testid="action-badge"
           :class="[
-            'cursor-pointer actions-badge',
+            'actions-badge',
             { opened: isOpened }
           ]"
         >
@@ -78,6 +78,10 @@ export default defineComponent({
   align-items: center;
 }
 
+.popover {
+  float: right;
+}
+
 .action-dropdown-button {
   --KButtonOutlineBorder: var(--section_colors-stroke);
   border: none;

diff --git a/src/components/ApiDocumentation/DocumentSections.vue b/src/components/ApiDocumentation/DocumentSections.vue
@@ -10,9 +10,8 @@
         :key="item.slug"
         :class="{
           active: activeHeading === item.slug,
-          'mt-4':true,
-          'pl-4': true,
-          ['ml-'+(item.level-1)*4]: true
+          'document-section': true,
+          ['indent-level-'+(item.level-1)]: true
         }"
       >
         <a
@@ -97,6 +96,21 @@ export default defineComponent({
     max-height: calc(100vh - var(--headerHeight));
     padding: 2rem 0;
     overflow-x: auto;
+
+    .document-section {
+      margin-top: $kui-space-60;
+      padding-left: $kui-space-60;
+    }
+
+    .indent-level {
+      &-0 {
+        margin-left: $kui-space-0;
+      }
+
+      &-1 {
+        margin-left: $kui-space-60;
+      }
+    }
   }
 
   p {

diff --git a/src/components/AuthCard.vue b/src/components/AuthCard.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="auth h-screen d-flex align-items-center justify-content-center flex-column">
+  <div class="auth">
     <KCard
       has-shadow
       data-testid="auth-form"
-      class="auth-card col-10 col-md-6"
+      class="auth-card"
     >
       <template #body>
-        <div class="d-flex flex-column justify-content-center align-items-center mb-5 card-header">
+        <div class="card-header">
           <router-link :to="headerRouteLink">
             <img
               class="logo"
@@ -56,6 +56,12 @@ export default defineComponent({
   --KCardBorder: 1px solid var(--section_colors-stroke);
   --KButtonPaddingY: 1rem;
 
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+
   background-color: var(--section_colors-body);
   .auth-card {
     width: 528px;
@@ -64,10 +70,14 @@ export default defineComponent({
     }
     .card-header {
       height: 6rem;
-      margin: calc(var(--KCardPaddingY) * -1) calc(var(--KCardPaddingY) * -1) 0;
+      margin: calc(var(--KCardPaddingY) * -1) calc(var(--KCardPaddingY) * -1) $kui-space-80;
       padding: 2rem;
       border-radius: 3px 3px 0 0;
       background-color: var(--section_colors-hero);
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
     }
   }
 }

diff --git a/src/components/Catalog.vue b/src/components/Catalog.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="products-content px-5">
-    <div class="container max-w-screen-2xl mx-auto mt-6 mb-5 flex justify-between">
+  <div class="products-content">
+    <div class="products-container responsive-container">
       <span class="products-label">{{ catalogTitle }}</span>
       <KViewSwitcher
         data-testid="view-switcher"
@@ -13,9 +13,9 @@
       v-if="!catalogItems.length"
       class="product-catalog-empty-state"
     >
-      <div class="product-catalog-no-products type-lg color-text_colors-secondary">
+      <div class="product-catalog-no-products color-text_colors-secondary">
         <template v-if="!loading">
-          <EmptyState class="mb-2 mx-auto" />
+          <EmptyState class="empty-products" />
           {{ noResultsMessage }}
         </template>
         <div
@@ -123,13 +123,20 @@ export default defineComponent({
 <style lang="scss" scoped>
 .products-content {
   --grey-500: var(--button_colors-primary-fill);
+  padding: 0 $kui-space-80;
 
   .products-label {
     color: var(--text_colors-primary);
     font-size: var(--type-xl);
     font-weight: normal;
   }
 
+  .products-container {
+    display: flex;
+    justify-content: space-between;
+    margin: $kui-space-90 auto $kui-space-80 auto;
+  }
+
   .view-switch-button {
     --grey-500: var(--text_colors-primary);
     --spacing-xs: 6px;
@@ -156,5 +163,10 @@ export default defineComponent({
 .product-catalog-no-products {
   text-align: center;
   padding: 20px var(--spacing-xs);
+  font-size: $kui-font-size-50;
+
+  .empty-products {
+    margin: 0 auto $kui-space-40 auto;
+  }
 }
 </style>
diff --git a/src/components/CatalogCardList.vue b/src/components/CatalogCardList.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="container max-w-screen-2xl mx-auto catalog-card-view">
-    <div class="w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5">
+  <div class="responsive-container catalog-card-view">
+    <div class="card-grid">
       <CatalogItem
         v-for="(product, index) in products"
         :key="product.id + index"
@@ -11,7 +11,7 @@
       />
     </div>
     <PaginationBar
-      class="catalog-pagination mt-4"
+      class="catalog-pagination"
       :page-size="pageSize"
       :total-count="totalCount"
       :search-triggered="searchTriggered"
@@ -62,3 +62,28 @@ export default {
   }
 }
 </script>
+
+<style scoped lang="scss">
+.catalog-card-view {
+  margin: 0 auto;
+
+  .card-grid {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: $kui-space-70;
+
+    @media (min-width: $kui-breakpoint-phablet){
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    @media (min-width: $kui-breakpoint-tablet){
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  .catalog-pagination {
+    margin-top: $kui-space-60;
+  }
+}
+</style>
diff --git a/src/components/CatalogItem.vue b/src/components/CatalogItem.vue
@@ -11,7 +11,7 @@
         v-else
         :to="`/spec/${product.id}`"
       >
-        <p class="products-card-title truncate">
+        <p class="products-card-title truncate-text">
           {{ product.title }}
         </p>
       </router-link>
@@ -29,19 +29,19 @@
           {{ product.description }}
         </template>
       </p>
-      <ul class="mt-auto pt1">
+      <ul class="link-container">
         <li class="details-item">
           <span
             v-if="version"
-            class="my-2 color-text_colors-secondary"
+            class="name-span color-text_colors-secondary"
           >
             <template
               v-if="loading"
             >
               <KSkeletonBox width="2" />
             </template>
             <template v-else>
-              <span class="mr-2">{{ helpText.latestVersion }}</span>
+              <span class="latest-version">{{ helpText.latestVersion }}</span>
               <KBadge
                 color="var(--text_colors-secondary)"
                 background-color="var(--section_colors-accent)"
@@ -141,6 +141,12 @@ export default {
     padding: 1.5rem 1rem;
     border-bottom: 1px solid var(--section_colors-stroke);
     width: 100%;
+
+    &.truncate-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 
   .description {
@@ -159,6 +165,18 @@ export default {
     padding: 0.25rem 0;
   }
 
+  .name-span {
+    margin: $kui-space-40 0;
+
+    .latest-version {
+      margin-right: $kui-space-40;
+    }
+  }
+
+  .link-container {
+    margin-top: auto;
+  }
+
   .link {
     display: inline-flex;
     align-items: center;

diff --git a/src/components/CatalogTableList.vue b/src/components/CatalogTableList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="max-w-screen-2xl mx-auto">
+  <div class="responsive-container table-container">
     <KTable
       :fetcher="fetcher"
       :fetcher-cache-key="fetcherCacheKey"
@@ -136,6 +136,10 @@ export default defineComponent({
 }
 </style>
 <style lang="scss" scoped>
+.table-container {
+  margin: 0 auto;
+}
+
 .link {
   display: inline-block;
   margin: 0 0.25rem;

diff --git a/src/components/Content.vue b/src/components/Content.vue
@@ -1,5 +1,14 @@
 <template>
-  <div class="container mx-auto max-w-screen-2xl pt-6 px-5 md:px-0">
+  <div class="responsive-container content-container">
     <slot />
   </div>
 </template>
+
+<style lang="scss" scoped>
+  .content-container {
+    margin: 0 auto;
+    padding-top: $kui-space-90;
+    padding-left: $kui-space-80;
+    padding-right: $kui-space-80;
+  }
+</style>
diff --git a/src/components/CopyButton.vue b/src/components/CopyButton.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="my-4"
+    class="copy-button-container"
   >
     <KTooltip
       :label="helpText.clickToCopy"
@@ -9,12 +9,12 @@
         <KButton
           :is-rounded="false"
           :aria-label="helpText.ariaLabel"
-          class="clipboard-button w-100 justify-content-between"
+          class="clipboard-button"
           data-testid="copy-button"
           appearance="secondary"
           @click="copyTokenToClipboard(copyToClipboard)"
         >
-          <span class="truncate">{{ label }} {{ textToCopy }}</span>
+          <span class="truncate-text">{{ label }} {{ textToCopy }}</span>
           <KIcon
             :title="helpText.copyToClipboard"
             icon="copy"
@@ -68,8 +68,23 @@ export default defineComponent({
 })
 </script>
 
+<style lang="scss" scoped>
+.copy-button-container {
+  margin: $kui-space-60 0;
+}
+
+.truncate-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
+
 <style lang="scss">
 .clipboard-button {
   --KButtonFontSize: 12px;
+
+  width: 100%;
+  justify-content: space-between;
 }
 </style>