feat: vertical tab with line (#40)

* feat: vertical tab with line * feat: minor changes * feat: medium font change * feat: updated tabs as per figma * feat: resolved comments Co-authored-by: anshul-pinto0410 <[email protected]>
ClearTax · Nov 10, 2020 · a01046f · a01046f
1 parent ec7ffc5
commit a01046f
Show file tree

Hide file tree

Showing 7 changed files with 183 additions and 11 deletions.
diff --git a/docs/docs/line-tab.md b/docs/docs/line-tab.md
@@ -0,0 +1,114 @@
+---
+id: line-tab
+title: Tabs With Line
+sidebar_label: Tabs With Line
+---
+
+``` html live
+<>
+<div class="lil-flex"> 
+    <div class="lil-w-2/5 sm:lil-hidden">
+        <ul class="lil-vertical-tabs">
+            <li class="lil-vertical-tab lil-vertical-tab-active" onclick="verticalTabsWLine(event,'tab1')">
+                <a class="lil-vertical-tab-container">
+                    <div class="lil-vertical-tab-line"></div>
+                    <div class="lil-vertical-tab-content">
+                        <div class="lil-w-1/6">
+                            <img height="32" width="32" src="https://assets1.cleartax-cdn.com/cleartax/images/1604377557_icon_purple_house.png"/>
+                        </div>
+                        <div class="lil-w-5/6">
+                            <div class="lil-vertical-tab-heading">Prepare </div>
+                        </div>
+                        <div class="lil-vertical-tab-writeup">
+                            File in under 30 seconds with power workflows such as NIL
+                            filing and auto-filed 3B and 9 Forms.
+                        </div>
+                    </div>
+                    <span class="lil-vertical-tab-arrow">&#8594;</span>
+                </a>
+            </li>
+            <li class="lil-vertical-tab" onclick="verticalTabsWLine(event,'tab2')">
+                <a class="lil-vertical-tab-container">
+                    <div class="lil-vertical-tab-line"></div>
+                    <div class="lil-vertical-tab-content">
+                        <div class="lil-w-1/6">
+                            <img height="32" width="32" src="https://assets1.cleartax-cdn.com/cleartax/images/1604377786_icon_pink_individual.png"/>
+                        </div>
+                        <div class="lil-w-5/6">
+                            <div class="lil-vertical-tab-heading">Import </div>
+                        </div>
+                        <div class="lil-vertical-tab-writeup">
+                            File in under 30 seconds with power workflows such as NIL
+                            filing and auto-filed 3B and 9 Forms.
+                        </div>
+                    </div>
+                    <span class="lil-vertical-tab-arrow">&#8594;</span>
+                </a>
+            </li>
+            <li class="lil-vertical-tab" onclick="verticalTabsWLine(event,'tab3')">
+                <a class="lil-vertical-tab-container">
+                    <div class="lil-vertical-tab-line"></div>
+                    <div class="lil-vertical-tab-content">
+                        <div class="lil-w-1/6">
+                            <img height="32" width="32" src="https://assets1.cleartax-cdn.com/cleartax/images/1604380079_icon_blue_briefcase.png"/>
+                        </div>
+                        <div class="lil-w-5/6">
+                            <div class="lil-vertical-tab-heading">Validate </div>
+                        </div>
+                        <div class="lil-vertical-tab-writeup">
+                            File in under 30 seconds with power workflows such as NIL
+                            filing and auto-filed 3B and 9 Forms.
+                        </div>
+                    </div>
+                    <span class="lil-vertical-tab-arrow">&#8594;</span>
+                </a>
+            </li>
+            <li class="lil-vertical-tab" onclick="verticalTabsWLine(event,'tab4')">
+                <a class="lil-vertical-tab-container">
+                    <div class="lil-vertical-tab-line"></div>
+                    <div class="lil-vertical-tab-content">
+                        <div class="lil-w-1/6">
+                            <img height="32" width="32" src="https://assets1.cleartax-cdn.com/cleartax/images/1604380129_icon_green_sme.png"/>
+                        </div>
+                        <div class="lil-w-5/6">
+                            <div class="lil-vertical-tab-heading">File </div>
+                        </div>
+                        <div class="lil-vertical-tab-writeup">
+                            File in under 30 seconds with power workflows such as NIL
+                            filing and auto-filed 3B and 9 Forms.
+                        </div>
+                    </div>
+                    <span class="lil-vertical-tab-arrow">&#8594;</span>
+                </a>
+            </li>
+            <li class="lil-vertical-tab" onclick="verticalTabsWLine(event,'tab5')">
+                <a class="lil-vertical-tab-container">
+                    <div class="lil-vertical-tab-line"></div>
+                    <div class="lil-vertical-tab-content">
+                        <div class="lil-w-1/6">
+                            <img height="32" width="32" src="https://assets1.cleartax-cdn.com/cleartax/images/1604377557_icon_purple_house.png"/>
+                        </div>
+                        <div class="lil-w-5/6">
+                            <div class="lil-vertical-tab-heading">Analyze </div>
+                        </div>
+                        <div class="lil-vertical-tab-writeup">
+                            File in under 30 seconds with power workflows such as NIL
+                            filing and auto-filed 3B and 9 Forms.
+                        </div>
+                    </div>
+                    <span class="lil-vertical-tab-arrow">&#8594;</span>
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div id="vertSlick" class="lil-w-3/5 lil-items-center lil-flex lil-justify-center sm:lil-w-full">
+        <div id="tab1" class="verticalTabsWLineContent lil-w-full lil-outline-none lil-flex lil-items-center lil-justify-center sm:lil-visible sm:lil-flex-col">
+            <h4 class="xl:lil-hidden lg:lil-hidden md:lil-hidden">Don't Get Started</h4>
+            <p class="xl:lil-hidden lg:lil-hidden md:lil-hidden">File in under 30 seconds with power workflows such as NIL
+                filing and auto-filed 3B and 9 Forms.</p>
+            <img src="https://assets1.cleartax-cdn.com/cleartax/images/1604314072_vert_tabs_line_mock.png"/>
+        </div>
+    </div>
+</div>
+</>
+```
diff --git a/docs/sidebars.js b/docs/sidebars.js
@@ -42,6 +42,7 @@ module.exports = {
         label: "Tabs",
         items: [
           "tabs",
+          "line-tab",
           "vertical-promise-tabs"
         ]
       },

diff --git a/src/components/Tabs/lineTab.css b/src/components/Tabs/lineTab.css
@@ -0,0 +1,64 @@
+.lil-vertical-tabs{
+    @apply lil-list-none lil-inline-block lil-overflow-x-auto;
+}
+.lil-vertical-tabs .lil-vertical-tab{
+    min-height:100px;
+    @apply lil-opacity-50 lil-flex lil-whitespace-normal lil-cursor-pointer lil-outline-none;
+}
+.lil-vertical-tab .lil-vertical-tab-container{
+    @apply lil-flex lil-w-full  lil-border-l-xl lil-border-font-200 lil-flex-wrap;
+} 
+.lil-vertical-tab-container .lil-vertical-tab-content{
+    @apply lil-border-b-sm lil-border-font-200 lil-flex lil-items-center lil-h-full lil-justify-between lil-w-10/12 lil-py-5 lil-flex-wrap;
+}
+.lil-vertical-tab-container .lil-vertical-tab-line{
+    border-bottom: none;
+    @apply lil-flex lil-w-1/12 lil-h-full;
+}
+
+.lil-vertical-tab .lil-vertical-tab-heading{
+    @apply lil-text-s-20 lil-text-font-500 lil-w-full;
+}
+
+.lil-vertical-tab .lil-vertical-tab-arrow{
+    @apply lil-text-s-24 lil-text-font-500 lil-h-full lil-flex lil-items-center lil-w-1/12 lil-py-5 lil-border-b-sm lil-border-font-200;
+}
+
+.lil-vertical-tab .lil-vertical-tab-writeup{
+    @apply lil-hidden lil-w-full;
+}
+/*Defining the behaviour for tab when active*/
+.lil-vertical-tabs .lil-vertical-tab-active{
+    @apply lil-opacity-100;
+}
+
+.lil-vertical-tab-active .lil-vertical-tab-heading{
+    @apply lil-text-s-24 lil-font-bold;
+}
+.lil-vertical-tab-active .lil-vertical-tab-container{
+    @apply lil-items-start lil-border-opacity-50;
+}
+.lil-vertical-tab-active .lil-vertical-tab-line{
+    /*These values are to allign the line and give proper height*/
+    margin-left: -4px;
+    height: 80%;
+    @apply lil-border-l-xl lil-border-blue-350;
+}
+
+.lil-vertical-tab-active .lil-vertical-tab-content{
+    @apply lil-border-opacity-50 lil-w-11/12;
+}
+
+.lil-vertical-tab-active .lil-vertical-tab-arrow{
+    @apply lil-hidden;
+}
+
+.lil-vertical-tab-active .lil-vertical-tab-writeup{
+    @apply lil-flex lil-text-base lil-text-font-200 lil-py-3 lil-visible;
+}
+
+@screen md{
+    .lil-vertical-tab-active .lil-vertical-tab-heading{
+        @apply lil-text-s-20;
+    }
+}
diff --git a/src/components/Tabs/tabs.css b/src/components/Tabs/tabs.css
@@ -32,20 +32,11 @@
     }
     .lil-tabs > .lil-tab {
         min-width: 150px;
-        @apply lil-text-base lil-mr-2 lil-rounded-md;
-    }
-    .lil-tabs .lil-tab-active {
-        @apply lil-bg-blue-350;
-    }
-    .lil-tab-active .lil-tab-heading-text {
-        @apply lil-text-white;
+        @apply lil-text-base lil-mr-2;
     }
     .lil-tab > a:first-child {
         @apply lil-py-1;
     }
-    .lil-tab > a:hover, a:active {
-        @apply lil-text-white;
-    }
     .lil-tab .lil-tab-icon {
         @apply lil-w-5 lil-h-5 lil-inline lil-mr-2; 
     }

diff --git a/src/index.css b/src/index.css
@@ -15,3 +15,4 @@
 @import "./components/SideNav/sidenav.css";
 @import "./components/Icons/tick.css";
 @import "./components/Tabs/verticalPromiseTabs.css";
+@import "./components/Tabs/lineTab.css";
diff --git a/src/variables.css b/src/variables.css
@@ -1,5 +1,6 @@
 .lil-root,
 #lil-root {
+    --blue-350: #1678FB;
     --grey-100: #FAFAFA;
     --grey-150: #F5F5F5;
     --grey-175: #F7F8FA;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -9,7 +9,7 @@ module.exports = {
         200: "#8ABBFD",
         250: "#7FB7FE",
         300: "#2F89FC",
-        350: "#1678FB",
+        350: "var(--blue-350, #1678FB)",
         400: "#185EB8",
         450: "#0F54B0",
         500: "#003273",