From 809a4a28012c6dd54773851854514490da67d5d8 Mon Sep 17 00:00:00 2001
From: Kyle Shike <kyle.s@userinterviews.com>
Date: Fri, 29 Sep 2023 15:58:43 -0400
Subject: [PATCH] migrates tabs to ts and css modules

---
 .../{Tabs.stories.jsx => Tabs.stories.tsx}    |  0
 src/Tabs/Tabs.styles.js                       | 50 -------------------
 src/Tabs/{Tabs.test.jsx => Tabs.test.tsx}     |  0
 src/Tabs/{Tabs.jsx => Tabs.tsx}               | 25 ++++++----
 src/Tabs/tabs.module.scss                     | 36 +++++++++++++
 5 files changed, 52 insertions(+), 59 deletions(-)
 rename src/Tabs/{Tabs.stories.jsx => Tabs.stories.tsx} (100%)
 delete mode 100644 src/Tabs/Tabs.styles.js
 rename src/Tabs/{Tabs.test.jsx => Tabs.test.tsx} (100%)
 rename src/Tabs/{Tabs.jsx => Tabs.tsx} (70%)
 create mode 100644 src/Tabs/tabs.module.scss

diff --git a/src/Tabs/Tabs.stories.jsx b/src/Tabs/Tabs.stories.tsx
similarity index 100%
rename from src/Tabs/Tabs.stories.jsx
rename to src/Tabs/Tabs.stories.tsx
diff --git a/src/Tabs/Tabs.styles.js b/src/Tabs/Tabs.styles.js
deleted file mode 100644
index 7f8acb33..00000000
--- a/src/Tabs/Tabs.styles.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import styled from 'styled-components';
-import colors from '../Styles/colors/palette';
-
-// TODO: Add global theming or a border/font object instead of these variables
-const borderWidth = '0.125rem';
-const fontType30 = '400 0.875rem/1.25rem DM Sans, sans-serif';
-
-export const StyledTabsWrapper = styled.span`
-  ${({ flexWrapUnset }) => flexWrapUnset && `
-    .nav {
-      flex-wrap: nowrap;
-    }
-  `}
-
-  ${({ navItemButtonFullHeight }) => navItemButtonFullHeight && `
-    .nav-item {
-      button {
-        height: calc(100% + ${borderWidth});
-      }
-    }
-  `}
-
-  .nav-tabs {
-    border-bottom: ${borderWidth} solid ${colors.UX_GRAY_400};
-  }
-
-  .nav-tabs .nav-link {
-    color: ${colors.UX_GRAY_800};
-    font: ${fontType30};
-    text-decoration: none;
-    border: none;
-    border-radius: 0;
-    border-bottom: ${borderWidth} solid ${colors.UX_GRAY_400};
-    margin-bottom: -${borderWidth};
-    padding: 0.375rem 0.75rem;
-  }
-
-  .nav-tabs .nav-link.active,
-  .nav-tabs .nav-link:hover,
-  .nav-tabs .nav-link:active,
-  .nav-tabs .nav-link:focus {
-    color: ${colors.UX_BLUE_500};
-    border-bottom: ${borderWidth} solid ${colors.UX_BLUE_500};
-  }
-
-  .nav-tabs .nav-link.disabled {
-    color: ${colors.UX_GRAY_600};
-    border-bottom: ${borderWidth} solid ${colors.UX_GRAY_400};
-  }
-`;
diff --git a/src/Tabs/Tabs.test.jsx b/src/Tabs/Tabs.test.tsx
similarity index 100%
rename from src/Tabs/Tabs.test.jsx
rename to src/Tabs/Tabs.test.tsx
diff --git a/src/Tabs/Tabs.jsx b/src/Tabs/Tabs.tsx
similarity index 70%
rename from src/Tabs/Tabs.jsx
rename to src/Tabs/Tabs.tsx
index 130ce9d6..1394c2d7 100644
--- a/src/Tabs/Tabs.jsx
+++ b/src/Tabs/Tabs.tsx
@@ -1,9 +1,9 @@
 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,
@@ -11,14 +11,21 @@ const Tabs = ({
   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
new file mode 100644
index 00000000..61e045f8
--- /dev/null
+++ 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));
+  }
+}