migrates tabs to ts and css modules

user-interviews · Sep 29, 2023 · 809a4a2 · 809a4a2
1 parent 7779cf4
commit 809a4a2
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 59 deletions.
diff --git a/src/Tabs/Tabs.stories.jsx → src/Tabs/Tabs.stories.tsx b/src/Tabs/Tabs.stories.jsx → src/Tabs/Tabs.stories.tsx
diff --git a/src/Tabs/Tabs.styles.js b/src/Tabs/Tabs.styles.js
diff --git a/src/Tabs/Tabs.test.jsx → src/Tabs/Tabs.test.tsx b/src/Tabs/Tabs.test.jsx → src/Tabs/Tabs.test.tsx
diff --git a/src/Tabs/Tabs.jsx → src/Tabs/Tabs.tsx b/src/Tabs/Tabs.jsx → src/Tabs/Tabs.tsx
@@ -1,24 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 import ReactBootstrapTabs from 'react-bootstrap/Tabs';
-
-import { StyledTabsWrapper } from './Tabs.styles';
+import styles from './tabs.module.scss';
 
 const Tabs = ({
   children,
   flexWrapUnset,
   navItemButtonFullHeight,
   ...props
 }) => (
-  <StyledTabsWrapper
-    flexWrapUnset={flexWrapUnset}
-    navItemButtonFullHeight={navItemButtonFullHeight}
+  <ReactBootstrapTabs
+    className={
+        classNames(
+          styles.tabs,
+          {
+            [styles.flexWrapUnset]: flexWrapUnset,
+            [styles.navItemButtonFullHeight]: navItemButtonFullHeight,
+          },
+        )
+      }
+    variant="tabs"
+    {...props}
   >
-    <ReactBootstrapTabs variant="tabs" {...props}>
-      {children}
-    </ReactBootstrapTabs>
-  </StyledTabsWrapper>
+    {children}
+  </ReactBootstrapTabs>
 );
 
 export default Tabs;

diff --git a/src/Tabs/tabs.module.scss b/src/Tabs/tabs.module.scss
@@ -0,0 +1,36 @@
+@import '../../scss/theme.scss';
+
+.tabs {
+  --border-width: 0.125rem;
+
+  border-bottom: var(--border-width) solid $ux-gray-400;
+
+  :global(.nav-link) {
+    color:$ux-gray-800;
+    font: 400 0.875rem/1.25rem DM Sans, sans-serif;
+    text-decoration: none;
+    border: none;
+    border-radius: 0;
+    border-bottom: var(--border-width) solid $ux-gray-400;
+    margin-bottom: calc(0px - var(--border-width));
+    padding: 0.375rem 0.75rem;
+  }
+
+  :global(.nav-link.active),
+  :global(.nav-link:hover),
+  :global(.nav-link:active),
+  :global(.nav-link:focus) {
+    color: $ux-blue-500;
+    border-bottom: var(--border-width) solid $ux-blue-500;
+  }
+}
+
+.flexWrapUnset {
+  flex-wrap: nowrap;
+}
+
+.navItemButtonFullHeight {
+  :global(.nav-item .button) {
+    height: calc(100% + var(--border-width));
+  }
+}