From 4e63a6593b42bb0391d0a46d1d7202793bb7fbf7 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 5 Jun 2023 20:19:10 -0700
Subject: [PATCH] Update SegmentedControl component

* Add className and blended properties
* Segment gets flex-grow
---
 components/common/Segment/index.scss          |  1 +
 components/common/SegmentedControl/index.scss |  9 +++++++
 components/common/SegmentedControl/index.tsx  | 27 +++++++++++++++----
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/components/common/Segment/index.scss b/components/common/Segment/index.scss
index fa148d4e..cb0aa7e8 100644
--- a/components/common/Segment/index.scss
+++ b/components/common/Segment/index.scss
@@ -1,6 +1,7 @@
 .Segment {
   color: $grey-55;
   cursor: pointer;
+  flex-grow: 1;
   font-size: 1.4rem;
   font-weight: $normal;
   min-width: 100px;
diff --git a/components/common/SegmentedControl/index.scss b/components/common/SegmentedControl/index.scss
index 5866f6ad..f62e146b 100644
--- a/components/common/SegmentedControl/index.scss
+++ b/components/common/SegmentedControl/index.scss
@@ -16,6 +16,15 @@
     background: var(--card-bg);
   }
 
+  &.Blended {
+    background: var(--input-bound-bg);
+    border-radius: $full-corner;
+
+    .Segment input:checked + label {
+      background: var(--card-bg);
+    }
+  }
+
   &.fire {
     .Segment input:checked + label {
       background: var(--fire-bg);
diff --git a/components/common/SegmentedControl/index.tsx b/components/common/SegmentedControl/index.tsx
index 379f18d2..6e82351b 100644
--- a/components/common/SegmentedControl/index.tsx
+++ b/components/common/SegmentedControl/index.tsx
@@ -1,19 +1,36 @@
 import React from 'react'
-
+import classNames from 'classnames'
 import './index.scss'
 
 interface Props {
+  className?: string
   elementClass?: string
+  blended?: boolean
 }
 
-const SegmentedControl: React.FC<Props> = ({ elementClass, children }) => {
+const SegmentedControl: React.FC<Props> = ({
+  className,
+  elementClass,
+  blended,
+  children,
+}) => {
+  const classes = classNames(
+    {
+      SegmentedControl: true,
+      Blended: blended,
+    },
+    className,
+    elementClass
+  )
   return (
     <div className="SegmentedControlWrapper">
-      <div className={`SegmentedControl ${elementClass ? elementClass : ''}`}>
-        {children}
-      </div>
+      <div className={classes}>{children}</div>
     </div>
   )
 }
 
+SegmentedControl.defaultProps = {
+  blended: false,
+}
+
 export default SegmentedControl