From 6fddbd677667fc987baa35ba6553dbab43e3b677 Mon Sep 17 00:00:00 2001
From: Tristan B <tristan@infi.im>
Date: Thu, 7 Sep 2023 10:52:50 -0600
Subject: [PATCH 01/13] Add `ClimateModeMenu`

---
 .../ui/thermostat/ClimateModeMenu.stories.tsx |  32 +++++
 src/lib/ui/thermostat/ClimateModeMenu.tsx     | 109 +++++++++++++++++
 src/lib/ui/thermostat/FanModeMenu.tsx         |   8 +-
 src/styles/_thermostat.scss                   | 114 ++++++++++--------
 4 files changed, 210 insertions(+), 53 deletions(-)
 create mode 100644 src/lib/ui/thermostat/ClimateModeMenu.stories.tsx
 create mode 100644 src/lib/ui/thermostat/ClimateModeMenu.tsx

diff --git a/src/lib/ui/thermostat/ClimateModeMenu.stories.tsx b/src/lib/ui/thermostat/ClimateModeMenu.stories.tsx
new file mode 100644
index 000000000..d1d700a40
--- /dev/null
+++ b/src/lib/ui/thermostat/ClimateModeMenu.stories.tsx
@@ -0,0 +1,32 @@
+import { Box } from '@mui/material'
+import { useArgs } from '@storybook/preview-api'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { ClimateModeMenu } from './ClimateModeMenu.js'
+
+const meta: Meta<typeof ClimateModeMenu> = {
+  title: 'Library/ClimateModeMenu',
+  tags: ['autodocs'],
+  component: ClimateModeMenu,
+}
+
+type Story = StoryObj<typeof ClimateModeMenu>
+
+export const Content: Story = {
+  render: (props) => {
+    const [, setArgs] = useArgs()
+
+    return (
+      <Box height={190}>
+        <ClimateModeMenu
+          mode={props.mode}
+          onChange={(mode) => {
+            setArgs({ mode })
+          }}
+        />
+      </Box>
+    )
+  },
+}
+
+export default meta
diff --git a/src/lib/ui/thermostat/ClimateModeMenu.tsx b/src/lib/ui/thermostat/ClimateModeMenu.tsx
new file mode 100644
index 000000000..24b589ba3
--- /dev/null
+++ b/src/lib/ui/thermostat/ClimateModeMenu.tsx
@@ -0,0 +1,109 @@
+import { CheckBlackIcon } from 'lib/icons/CheckBlack.js'
+import { ChevronDownIcon } from 'lib/icons/ChevronDown.js'
+import { FanIcon } from 'lib/icons/Fan.js'
+import { FanOutlineIcon } from 'lib/icons/FanOutline.js'
+import { OffIcon } from 'lib/icons/Off.js'
+import { ThermostatCoolIcon } from 'lib/icons/ThermostatCool.js'
+import { ThermostatHeatIcon } from 'lib/icons/ThermostatHeat.js'
+import { ThermostatHeatCoolIcon } from 'lib/icons/ThermostatHeatCool.js'
+import { Menu } from 'lib/ui/Menu/Menu.js'
+import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
+
+type Mode = 'heat' | 'cool' | 'heatcool' | 'off'
+
+interface ClimateModeMenuProps {
+  mode: Mode
+  onChange: (mode: Mode) => void
+}
+
+export function ClimateModeMenu({
+  mode,
+  onChange,
+}: ClimateModeMenuProps): JSX.Element {
+  return (
+    <Menu
+      renderButton={({ onOpen }) => (
+        <button onClick={onOpen} className='seam-climate-mode-menu-button'>
+          <div className='seam-climate-mode-menu-button-icon'>
+            {getModeIcon(mode)}
+          </div>
+          <ChevronDownIcon />
+        </button>
+      )}
+      verticalOffset={-180}
+      horizontalOffset={-32}
+      backgroundProps={{
+        className: 'seam-climate-mode-menu-bg seam-thermo-mode-menu',
+      }}
+    >
+      <Option
+        mode='heat'
+        isSelected={mode === 'heat'}
+        onClick={() => {
+          onChange('heat')
+        }}
+      />
+      <Option
+        mode='cool'
+        isSelected={mode === 'cool'}
+        onClick={() => {
+          onChange('cool')
+        }}
+      />
+      <Option
+        mode='heatcool'
+        isSelected={mode === 'heatcool'}
+        onClick={() => {
+          onChange('heatcool')
+        }}
+      />
+      <Option
+        mode='off'
+        isSelected={mode === 'off'}
+        onClick={() => {
+          onChange('off')
+        }}
+      />
+    </Menu>
+  )
+}
+
+interface OptionProps {
+  mode: Mode
+  onClick: () => void
+  isSelected: boolean
+}
+
+function Option({ mode, isSelected, onClick }: OptionProps): JSX.Element {
+  return (
+    <MenuItem onClick={onClick}>
+      <div className='seam-thermo-mode-menu-item'>
+        <div className='seam-thermo-mode-menu-item-block'>
+          {getModeIcon(mode)}
+          <span>{mode}</span>
+        </div>
+        <div className='seam-thermo-mode-menu-item-block'>
+          {isSelected && <CheckBlackIcon />}
+        </div>
+      </div>
+    </MenuItem>
+  )
+}
+
+function getModeIcon(mode: Mode): JSX.Element {
+  switch (mode) {
+    case 'heat':
+      return <ThermostatHeatIcon />
+    case 'cool':
+      return <ThermostatCoolIcon />
+    case 'heatcool':
+      return <ThermostatHeatCoolIcon />
+    case 'off':
+      return <OffIcon />
+  }
+}
+
+const t = {
+  auto: 'Auto',
+  on: 'On',
+}
diff --git a/src/lib/ui/thermostat/FanModeMenu.tsx b/src/lib/ui/thermostat/FanModeMenu.tsx
index 67ef386e9..79c574cde 100644
--- a/src/lib/ui/thermostat/FanModeMenu.tsx
+++ b/src/lib/ui/thermostat/FanModeMenu.tsx
@@ -29,7 +29,7 @@ export function FanModeMenu({ mode, onChange }: FanModeMenuProps): JSX.Element {
       verticalOffset={-180}
       horizontalOffset={-32}
       backgroundProps={{
-        className: 'seam-fan-mode-menu-bg',
+        className: 'seam-fan-mode-menu-bg seam-thermo-mode-menu',
       }}
     >
       <Option
@@ -59,12 +59,12 @@ interface OptionProps {
 function Option({ mode, isSelected, onClick }: OptionProps): JSX.Element {
   return (
     <MenuItem onClick={onClick}>
-      <div className='seam-fan-mode-menu-item'>
-        <div className='seam-fan-mode-menu-item-block'>
+      <div className='seam-thermo-mode-menu-item'>
+        <div className='seam-thermo-mode-menu-item-block'>
           <FanIcon />
           <span>{mode === 'auto' ? t.auto : t.on}</span>
         </div>
-        <div className='seam-fan-mode-menu-item-block'>
+        <div className='seam-thermo-mode-menu-item-block'>
           {isSelected && <CheckBlackIcon />}
         </div>
       </div>
diff --git a/src/styles/_thermostat.scss b/src/styles/_thermostat.scss
index 834c86b47..027c24ca5 100644
--- a/src/styles/_thermostat.scss
+++ b/src/styles/_thermostat.scss
@@ -1,15 +1,11 @@
 @use './colors';
 
-@mixin temperature-control-thumb-hover(
-  $secondary-color: colors.$thermo-blue-faded
-) {
+@mixin temperature-control-thumb-hover($secondary-color: colors.$thermo-blue-faded) {
   background-color: $secondary-color;
 }
 
-@mixin temperature-control-thumb(
-  $primary-color: colors.$thermo-blue,
-  $secondary-color: colors.$thermo-blue-faded
-) {
+@mixin temperature-control-thumb($primary-color: colors.$thermo-blue,
+  $secondary-color: colors.$thermo-blue-faded) {
   width: var(--thumb-size);
   height: var(--thumb-size);
   border-radius: 1em;
@@ -32,15 +28,13 @@
 
 @mixin temperature-control-ltr-track($primary-color: colors.$thermo-blue) {
   background:
-    linear-gradient($primary-color, $primary-color) 0 / var(--slider-position)
-      100% no-repeat,
+    linear-gradient($primary-color, $primary-color) 0 / var(--slider-position) 100% no-repeat,
     colors.$text-gray-3;
 }
 
 @mixin temperature-control-rtl-track($primary-color: colors.$thermo-blue) {
   background:
-    linear-gradient($primary-color, $primary-color) 100% /
-      calc(var(--slider-position-rtl)) 100% no-repeat,
+    linear-gradient($primary-color, $primary-color) 100% / calc(var(--slider-position-rtl)) 100% no-repeat,
     colors.$text-gray-3;
 }
 
@@ -67,14 +61,8 @@
     --temperature-max: 100;
     --temperature-current: 50;
     --temperature-range: calc(var(--temperature-max) - var(--temperature-min));
-    --temperature-ratio: calc(
-      (var(--temperature-current) - var(--temperature-min)) /
-        var(--temperature-range)
-    );
-    --slider-position: calc(
-      0.5 * var(--thumb-size) + var(--temperature-ratio) *
-        (100% - var(--thumb-size))
-    );
+    --temperature-ratio: calc((var(--temperature-current) - var(--temperature-min)) / var(--temperature-range));
+    --slider-position: calc(0.5 * var(--thumb-size) + var(--temperature-ratio) * (100% - var(--thumb-size)));
     --slider-position-rtl: calc(100% - var(--slider-position));
 
     display: flex;
@@ -121,24 +109,18 @@
 
     &[data-variant='heat'] {
       &::-webkit-slider-thumb {
-        @include temperature-control-thumb(
-          colors.$thermo-orange,
-          colors.$thermo-orange-faded
-        );
+        @include temperature-control-thumb(colors.$thermo-orange,
+          colors.$thermo-orange-faded );
       }
 
       &::-moz-range-thumb {
-        @include temperature-control-thumb(
-          colors.$thermo-orange,
-          colors.$thermo-orange-faded
-        );
+        @include temperature-control-thumb(colors.$thermo-orange,
+          colors.$thermo-orange-faded );
       }
 
       &::-ms-thumb {
-        @include temperature-control-thumb(
-          colors.$thermo-orange,
-          colors.$thermo-orange-faded
-        );
+        @include temperature-control-thumb(colors.$thermo-orange,
+          colors.$thermo-orange-faded );
       }
 
       &:focus {
@@ -177,24 +159,18 @@
 
     &[data-variant='cool'] {
       &::-webkit-slider-thumb {
-        @include temperature-control-thumb(
-          colors.$thermo-blue,
-          colors.$thermo-blue-faded
-        );
+        @include temperature-control-thumb(colors.$thermo-blue,
+          colors.$thermo-blue-faded );
       }
 
       &::-moz-range-thumb {
-        @include temperature-control-thumb(
-          colors.$thermo-blue,
-          colors.$thermo-blue-faded
-        );
+        @include temperature-control-thumb(colors.$thermo-blue,
+          colors.$thermo-blue-faded );
       }
 
       &::-ms-thumb {
-        @include temperature-control-thumb(
-          colors.$thermo-blue,
-          colors.$thermo-blue-faded
-        );
+        @include temperature-control-thumb(colors.$thermo-blue,
+          colors.$thermo-blue-faded );
       }
 
       &:focus {
@@ -559,6 +535,26 @@
   }
 }
 
+@mixin mode-menu-common {
+  .seam-thermo-mode-menu {
+    .seam-thermo-mode-menu-item {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-direction: row;
+    }
+
+    .seam-thermo-mode-menu-item-block {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: row;
+      gap: 12px;
+    }
+  }
+}
+
 @mixin fan-mode-menu {
   .seam-fan-mode-menu-bg {
     .seam-menu-content {
@@ -607,21 +603,39 @@
       line-height: 120%;
     }
   }
+}
 
-  .seam-fan-mode-menu-item {
-    width: 100%;
+@mixin climate-mode-menu {
+  .seam-climate-mode-menu-button {
+    width: 72px;
+    height: 32px;
+    padding: 4px 8px;
+    border-radius: 6px;
+    border: 1px solid colors.$text-gray-3;
+    background: colors.$white;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-direction: row;
+    cursor: pointer;
+    transition: 0.2s ease;
+
+    &:hover {
+      border-color: colors.$text-gray-2;
+    }
+
+    &:active {
+      background-color: colors.$bg-c;
+      border-color: colors.$text-gray-2;
+    }
   }
 
-  .seam-fan-mode-menu-item-block {
+  .seam-climate-mode-menu-button-icon {
+    width: 22px;
+    height: 22px;
     display: flex;
     justify-content: center;
     align-items: center;
-    flex-direction: row;
-    gap: 12px;
   }
 }
 
@@ -629,5 +643,7 @@
   @include temperature-control;
   @include climate-setting-status;
   @include thermostat-card;
+  @include mode-menu-common;
   @include fan-mode-menu;
-}
+  @include climate-mode-menu;
+}
\ No newline at end of file

From efcc4cbeabc381a510b81122142ee512b8b7d965 Mon Sep 17 00:00:00 2001
From: Seam Bot <devops@getseam.com>
Date: Thu, 7 Sep 2023 16:54:24 +0000
Subject: [PATCH 02/13] ci: Format code

---
 src/lib/ui/thermostat/ClimateModeMenu.tsx |  2 -
 src/styles/_thermostat.scss               | 64 ++++++++++++++++-------
 2 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/src/lib/ui/thermostat/ClimateModeMenu.tsx b/src/lib/ui/thermostat/ClimateModeMenu.tsx
index 24b589ba3..786318eac 100644
--- a/src/lib/ui/thermostat/ClimateModeMenu.tsx
+++ b/src/lib/ui/thermostat/ClimateModeMenu.tsx
@@ -1,7 +1,5 @@
 import { CheckBlackIcon } from 'lib/icons/CheckBlack.js'
 import { ChevronDownIcon } from 'lib/icons/ChevronDown.js'
-import { FanIcon } from 'lib/icons/Fan.js'
-import { FanOutlineIcon } from 'lib/icons/FanOutline.js'
 import { OffIcon } from 'lib/icons/Off.js'
 import { ThermostatCoolIcon } from 'lib/icons/ThermostatCool.js'
 import { ThermostatHeatIcon } from 'lib/icons/ThermostatHeat.js'
diff --git a/src/styles/_thermostat.scss b/src/styles/_thermostat.scss
index 027c24ca5..f85e22980 100644
--- a/src/styles/_thermostat.scss
+++ b/src/styles/_thermostat.scss
@@ -1,11 +1,15 @@
 @use './colors';
 
-@mixin temperature-control-thumb-hover($secondary-color: colors.$thermo-blue-faded) {
+@mixin temperature-control-thumb-hover(
+  $secondary-color: colors.$thermo-blue-faded
+) {
   background-color: $secondary-color;
 }
 
-@mixin temperature-control-thumb($primary-color: colors.$thermo-blue,
-  $secondary-color: colors.$thermo-blue-faded) {
+@mixin temperature-control-thumb(
+  $primary-color: colors.$thermo-blue,
+  $secondary-color: colors.$thermo-blue-faded
+) {
   width: var(--thumb-size);
   height: var(--thumb-size);
   border-radius: 1em;
@@ -28,13 +32,15 @@
 
 @mixin temperature-control-ltr-track($primary-color: colors.$thermo-blue) {
   background:
-    linear-gradient($primary-color, $primary-color) 0 / var(--slider-position) 100% no-repeat,
+    linear-gradient($primary-color, $primary-color) 0 / var(--slider-position)
+      100% no-repeat,
     colors.$text-gray-3;
 }
 
 @mixin temperature-control-rtl-track($primary-color: colors.$thermo-blue) {
   background:
-    linear-gradient($primary-color, $primary-color) 100% / calc(var(--slider-position-rtl)) 100% no-repeat,
+    linear-gradient($primary-color, $primary-color) 100% /
+      calc(var(--slider-position-rtl)) 100% no-repeat,
     colors.$text-gray-3;
 }
 
@@ -61,8 +67,14 @@
     --temperature-max: 100;
     --temperature-current: 50;
     --temperature-range: calc(var(--temperature-max) - var(--temperature-min));
-    --temperature-ratio: calc((var(--temperature-current) - var(--temperature-min)) / var(--temperature-range));
-    --slider-position: calc(0.5 * var(--thumb-size) + var(--temperature-ratio) * (100% - var(--thumb-size)));
+    --temperature-ratio: calc(
+      (var(--temperature-current) - var(--temperature-min)) /
+        var(--temperature-range)
+    );
+    --slider-position: calc(
+      0.5 * var(--thumb-size) + var(--temperature-ratio) *
+        (100% - var(--thumb-size))
+    );
     --slider-position-rtl: calc(100% - var(--slider-position));
 
     display: flex;
@@ -109,18 +121,24 @@
 
     &[data-variant='heat'] {
       &::-webkit-slider-thumb {
-        @include temperature-control-thumb(colors.$thermo-orange,
-          colors.$thermo-orange-faded );
+        @include temperature-control-thumb(
+          colors.$thermo-orange,
+          colors.$thermo-orange-faded
+        );
       }
 
       &::-moz-range-thumb {
-        @include temperature-control-thumb(colors.$thermo-orange,
-          colors.$thermo-orange-faded );
+        @include temperature-control-thumb(
+          colors.$thermo-orange,
+          colors.$thermo-orange-faded
+        );
       }
 
       &::-ms-thumb {
-        @include temperature-control-thumb(colors.$thermo-orange,
-          colors.$thermo-orange-faded );
+        @include temperature-control-thumb(
+          colors.$thermo-orange,
+          colors.$thermo-orange-faded
+        );
       }
 
       &:focus {
@@ -159,18 +177,24 @@
 
     &[data-variant='cool'] {
       &::-webkit-slider-thumb {
-        @include temperature-control-thumb(colors.$thermo-blue,
-          colors.$thermo-blue-faded );
+        @include temperature-control-thumb(
+          colors.$thermo-blue,
+          colors.$thermo-blue-faded
+        );
       }
 
       &::-moz-range-thumb {
-        @include temperature-control-thumb(colors.$thermo-blue,
-          colors.$thermo-blue-faded );
+        @include temperature-control-thumb(
+          colors.$thermo-blue,
+          colors.$thermo-blue-faded
+        );
       }
 
       &::-ms-thumb {
-        @include temperature-control-thumb(colors.$thermo-blue,
-          colors.$thermo-blue-faded );
+        @include temperature-control-thumb(
+          colors.$thermo-blue,
+          colors.$thermo-blue-faded
+        );
       }
 
       &:focus {
@@ -646,4 +670,4 @@
   @include mode-menu-common;
   @include fan-mode-menu;
   @include climate-mode-menu;
-}
\ No newline at end of file
+}

From 125e5d34809666b0e2fb986e15d3d3ebb48b924f Mon Sep 17 00:00:00 2001
From: Tristan B <tristan@infi.im>
Date: Thu, 7 Sep 2023 11:12:00 -0600
Subject: [PATCH 03/13] Hook up `t`

---
 src/lib/ui/thermostat/ClimateModeMenu.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/ui/thermostat/ClimateModeMenu.tsx b/src/lib/ui/thermostat/ClimateModeMenu.tsx
index 24b589ba3..005e0b712 100644
--- a/src/lib/ui/thermostat/ClimateModeMenu.tsx
+++ b/src/lib/ui/thermostat/ClimateModeMenu.tsx
@@ -1,7 +1,5 @@
 import { CheckBlackIcon } from 'lib/icons/CheckBlack.js'
 import { ChevronDownIcon } from 'lib/icons/ChevronDown.js'
-import { FanIcon } from 'lib/icons/Fan.js'
-import { FanOutlineIcon } from 'lib/icons/FanOutline.js'
 import { OffIcon } from 'lib/icons/Off.js'
 import { ThermostatCoolIcon } from 'lib/icons/ThermostatCool.js'
 import { ThermostatHeatIcon } from 'lib/icons/ThermostatHeat.js'
@@ -80,7 +78,7 @@ function Option({ mode, isSelected, onClick }: OptionProps): JSX.Element {
       <div className='seam-thermo-mode-menu-item'>
         <div className='seam-thermo-mode-menu-item-block'>
           {getModeIcon(mode)}
-          <span>{mode}</span>
+          <span>{t[mode]}</span>
         </div>
         <div className='seam-thermo-mode-menu-item-block'>
           {isSelected && <CheckBlackIcon />}
@@ -104,6 +102,8 @@ function getModeIcon(mode: Mode): JSX.Element {
 }
 
 const t = {
-  auto: 'Auto',
-  on: 'On',
+  heat: 'Heat',
+  cool: 'Cool',
+  heatcool: 'Heat & Cool',
+  off: 'Off',
 }

From b2d1abaf9b6640571b055ed632645ceedf855dfc Mon Sep 17 00:00:00 2001
From: Tristan B <tristan@infi.im>
Date: Thu, 7 Sep 2023 11:35:46 -0600
Subject: [PATCH 04/13] Map over options

---
 src/lib/ui/thermostat/ClimateModeMenu.tsx | 43 +++++++----------------
 src/styles/_thermostat.scss               | 12 +++++++
 2 files changed, 25 insertions(+), 30 deletions(-)

diff --git a/src/lib/ui/thermostat/ClimateModeMenu.tsx b/src/lib/ui/thermostat/ClimateModeMenu.tsx
index 005e0b712..4c79d8c94 100644
--- a/src/lib/ui/thermostat/ClimateModeMenu.tsx
+++ b/src/lib/ui/thermostat/ClimateModeMenu.tsx
@@ -7,7 +7,8 @@ import { ThermostatHeatCoolIcon } from 'lib/icons/ThermostatHeatCool.js'
 import { Menu } from 'lib/ui/Menu/Menu.js'
 import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
 
-type Mode = 'heat' | 'cool' | 'heatcool' | 'off'
+const modes = ['heat', 'cool', 'heatcool', 'off'] as const
+type Mode = (typeof modes)[number]
 
 interface ClimateModeMenuProps {
   mode: Mode
@@ -34,34 +35,16 @@ export function ClimateModeMenu({
         className: 'seam-climate-mode-menu-bg seam-thermo-mode-menu',
       }}
     >
-      <Option
-        mode='heat'
-        isSelected={mode === 'heat'}
-        onClick={() => {
-          onChange('heat')
-        }}
-      />
-      <Option
-        mode='cool'
-        isSelected={mode === 'cool'}
-        onClick={() => {
-          onChange('cool')
-        }}
-      />
-      <Option
-        mode='heatcool'
-        isSelected={mode === 'heatcool'}
-        onClick={() => {
-          onChange('heatcool')
-        }}
-      />
-      <Option
-        mode='off'
-        isSelected={mode === 'off'}
-        onClick={() => {
-          onChange('off')
-        }}
-      />
+      {modes.map((m) => (
+        <Option
+          key={m}
+          mode={m}
+          isSelected={mode === m}
+          onClick={() => {
+            onChange(m)
+          }}
+        />
+      ))}
     </Menu>
   )
 }
@@ -77,7 +60,7 @@ function Option({ mode, isSelected, onClick }: OptionProps): JSX.Element {
     <MenuItem onClick={onClick}>
       <div className='seam-thermo-mode-menu-item'>
         <div className='seam-thermo-mode-menu-item-block'>
-          {getModeIcon(mode)}
+          <div className='seam-thermo-mode-menu-icon'>{getModeIcon(mode)}</div>
           <span>{t[mode]}</span>
         </div>
         <div className='seam-thermo-mode-menu-item-block'>
diff --git a/src/styles/_thermostat.scss b/src/styles/_thermostat.scss
index f85e22980..813c61cd6 100644
--- a/src/styles/_thermostat.scss
+++ b/src/styles/_thermostat.scss
@@ -577,6 +577,14 @@
       gap: 12px;
     }
   }
+
+  .seam-thermo-mode-menu-icon {
+    width: 18px;
+    height: 18px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
 
 @mixin fan-mode-menu {
@@ -648,6 +656,10 @@
       border-color: colors.$text-gray-2;
     }
 
+    &:focus {
+      outline-color: colors.$text-gray-2;
+    }
+
     &:active {
       background-color: colors.$bg-c;
       border-color: colors.$text-gray-2;

From 6820760128814bc69bd3f6486b7c686bee4c16d1 Mon Sep 17 00:00:00 2001
From: Tristan B <tristan@infi.im>
Date: Thu, 7 Sep 2023 11:55:09 -0600
Subject: [PATCH 05/13] Add `ThermoModeMenuOption`

---
 src/lib/ui/thermostat/ClimateModeMenu.tsx     | 30 ++---------
 src/lib/ui/thermostat/FanModeMenu.tsx         | 53 +++++--------------
 .../ui/thermostat/ThermoModeMenuOption.tsx    | 30 +++++++++++
 src/styles/_thermostat.scss                   | 16 +++---
 4 files changed, 55 insertions(+), 74 deletions(-)
 create mode 100644 src/lib/ui/thermostat/ThermoModeMenuOption.tsx

diff --git a/src/lib/ui/thermostat/ClimateModeMenu.tsx b/src/lib/ui/thermostat/ClimateModeMenu.tsx
index 4c79d8c94..7a20b7382 100644
--- a/src/lib/ui/thermostat/ClimateModeMenu.tsx
+++ b/src/lib/ui/thermostat/ClimateModeMenu.tsx
@@ -1,11 +1,10 @@
-import { CheckBlackIcon } from 'lib/icons/CheckBlack.js'
 import { ChevronDownIcon } from 'lib/icons/ChevronDown.js'
 import { OffIcon } from 'lib/icons/Off.js'
 import { ThermostatCoolIcon } from 'lib/icons/ThermostatCool.js'
 import { ThermostatHeatIcon } from 'lib/icons/ThermostatHeat.js'
 import { ThermostatHeatCoolIcon } from 'lib/icons/ThermostatHeatCool.js'
 import { Menu } from 'lib/ui/Menu/Menu.js'
-import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
+import { ThermoModeMenuOption } from 'lib/ui/thermostat/ThermoModeMenuOption.js'
 
 const modes = ['heat', 'cool', 'heatcool', 'off'] as const
 type Mode = (typeof modes)[number]
@@ -36,9 +35,10 @@ export function ClimateModeMenu({
       }}
     >
       {modes.map((m) => (
-        <Option
+        <ThermoModeMenuOption
           key={m}
-          mode={m}
+          label={t[m]}
+          icon={getModeIcon(m)}
           isSelected={mode === m}
           onClick={() => {
             onChange(m)
@@ -49,28 +49,6 @@ export function ClimateModeMenu({
   )
 }
 
-interface OptionProps {
-  mode: Mode
-  onClick: () => void
-  isSelected: boolean
-}
-
-function Option({ mode, isSelected, onClick }: OptionProps): JSX.Element {
-  return (
-    <MenuItem onClick={onClick}>
-      <div className='seam-thermo-mode-menu-item'>
-        <div className='seam-thermo-mode-menu-item-block'>
-          <div className='seam-thermo-mode-menu-icon'>{getModeIcon(mode)}</div>
-          <span>{t[mode]}</span>
-        </div>
-        <div className='seam-thermo-mode-menu-item-block'>
-          {isSelected && <CheckBlackIcon />}
-        </div>
-      </div>
-    </MenuItem>
-  )
-}
-
 function getModeIcon(mode: Mode): JSX.Element {
   switch (mode) {
     case 'heat':
diff --git a/src/lib/ui/thermostat/FanModeMenu.tsx b/src/lib/ui/thermostat/FanModeMenu.tsx
index 79c574cde..0b8f66ae4 100644
--- a/src/lib/ui/thermostat/FanModeMenu.tsx
+++ b/src/lib/ui/thermostat/FanModeMenu.tsx
@@ -1,11 +1,11 @@
-import { CheckBlackIcon } from 'lib/icons/CheckBlack.js'
 import { ChevronDownIcon } from 'lib/icons/ChevronDown.js'
 import { FanIcon } from 'lib/icons/Fan.js'
 import { FanOutlineIcon } from 'lib/icons/FanOutline.js'
 import { Menu } from 'lib/ui/Menu/Menu.js'
-import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
+import { ThermoModeMenuOption } from 'lib/ui/thermostat/ThermoModeMenuOption.js'
 
-type Mode = 'auto' | 'on'
+const modes = ['auto', 'on'] as const
+type Mode = (typeof modes)[number]
 
 interface FanModeMenuProps {
   mode: Mode
@@ -32,46 +32,21 @@ export function FanModeMenu({ mode, onChange }: FanModeMenuProps): JSX.Element {
         className: 'seam-fan-mode-menu-bg seam-thermo-mode-menu',
       }}
     >
-      <Option
-        mode='auto'
-        isSelected={mode === 'auto'}
-        onClick={() => {
-          onChange('auto')
-        }}
-      />
-      <Option
-        mode='on'
-        isSelected={mode === 'on'}
-        onClick={() => {
-          onChange('on')
-        }}
-      />
+      {modes.map((m) => (
+        <ThermoModeMenuOption
+          key={m}
+          label={t[m]}
+          icon={<FanIcon />}
+          isSelected={mode === m}
+          onClick={() => {
+            onChange(m)
+          }}
+        />
+      ))}
     </Menu>
   )
 }
 
-interface OptionProps {
-  mode: Mode
-  onClick: () => void
-  isSelected: boolean
-}
-
-function Option({ mode, isSelected, onClick }: OptionProps): JSX.Element {
-  return (
-    <MenuItem onClick={onClick}>
-      <div className='seam-thermo-mode-menu-item'>
-        <div className='seam-thermo-mode-menu-item-block'>
-          <FanIcon />
-          <span>{mode === 'auto' ? t.auto : t.on}</span>
-        </div>
-        <div className='seam-thermo-mode-menu-item-block'>
-          {isSelected && <CheckBlackIcon />}
-        </div>
-      </div>
-    </MenuItem>
-  )
-}
-
 const t = {
   auto: 'Auto',
   on: 'On',
diff --git a/src/lib/ui/thermostat/ThermoModeMenuOption.tsx b/src/lib/ui/thermostat/ThermoModeMenuOption.tsx
new file mode 100644
index 000000000..f0bde9918
--- /dev/null
+++ b/src/lib/ui/thermostat/ThermoModeMenuOption.tsx
@@ -0,0 +1,30 @@
+import { CheckBlackIcon } from 'lib/icons/CheckBlack.js'
+import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
+
+interface ThermoModeMenuOptionProps {
+  label: string
+  icon: JSX.Element
+  onClick: () => void
+  isSelected: boolean
+}
+
+export function ThermoModeMenuOption({
+  label,
+  icon,
+  isSelected,
+  onClick,
+}: ThermoModeMenuOptionProps): JSX.Element {
+  return (
+    <MenuItem onClick={onClick}>
+      <div className='seam-thermo-mode-menu-item'>
+        <div className='seam-thermo-mode-menu-item-block'>
+          <div className='seam-thermo-mode-menu-icon'>{icon}</div>
+          <span>{label}</span>
+        </div>
+        <div className='seam-thermo-mode-menu-item-block'>
+          {isSelected && <CheckBlackIcon />}
+        </div>
+      </div>
+    </MenuItem>
+  )
+}
diff --git a/src/styles/_thermostat.scss b/src/styles/_thermostat.scss
index 813c61cd6..21718cf3a 100644
--- a/src/styles/_thermostat.scss
+++ b/src/styles/_thermostat.scss
@@ -561,6 +561,13 @@
 
 @mixin mode-menu-common {
   .seam-thermo-mode-menu {
+    .seam-menu-content {
+      max-width: 180px;
+      box-shadow:
+        0 2px 16px 2px rgb(15 22 28 / 15%),
+        0 0 1px 0 rgb(0 0 0 / 30%);
+    }
+
     .seam-thermo-mode-menu-item {
       width: 100%;
       display: flex;
@@ -588,15 +595,6 @@
 }
 
 @mixin fan-mode-menu {
-  .seam-fan-mode-menu-bg {
-    .seam-menu-content {
-      max-width: 180px;
-      box-shadow:
-        0 2px 16px 2px rgb(15 22 28 / 15%),
-        0 0 1px 0 rgb(0 0 0 / 30%);
-    }
-  }
-
   .seam-fan-mode-menu-button {
     width: 130px;
     height: 32px;

From 6cc60b122b55be8a11b03a9b6ad4fdfdd14176cb Mon Sep 17 00:00:00 2001
From: Tristan B <tristan@infi.im>
Date: Thu, 7 Sep 2023 11:58:33 -0600
Subject: [PATCH 06/13] Remove ref to fan mode menu bg

---
 src/lib/ui/thermostat/FanModeMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/ui/thermostat/FanModeMenu.tsx b/src/lib/ui/thermostat/FanModeMenu.tsx
index 0b8f66ae4..935a04823 100644
--- a/src/lib/ui/thermostat/FanModeMenu.tsx
+++ b/src/lib/ui/thermostat/FanModeMenu.tsx
@@ -29,7 +29,7 @@ export function FanModeMenu({ mode, onChange }: FanModeMenuProps): JSX.Element {
       verticalOffset={-180}
       horizontalOffset={-32}
       backgroundProps={{
-        className: 'seam-fan-mode-menu-bg seam-thermo-mode-menu',
+        className: 'seam-thermo-mode-menu',
       }}
     >
       {modes.map((m) => (

From adf494fae343fdd274d4538f0a47d5c4358210b2 Mon Sep 17 00:00:00 2001
From: Tristan B <tristan@infi.im>
Date: Thu, 7 Sep 2023 11:59:43 -0600
Subject: [PATCH 07/13] Remove ref to climate mode menu bg

---
 src/lib/ui/thermostat/ClimateModeMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/ui/thermostat/ClimateModeMenu.tsx b/src/lib/ui/thermostat/ClimateModeMenu.tsx
index 7a20b7382..9e694753d 100644
--- a/src/lib/ui/thermostat/ClimateModeMenu.tsx
+++ b/src/lib/ui/thermostat/ClimateModeMenu.tsx
@@ -31,7 +31,7 @@ export function ClimateModeMenu({
       verticalOffset={-180}
       horizontalOffset={-32}
       backgroundProps={{
-        className: 'seam-climate-mode-menu-bg seam-thermo-mode-menu',
+        className: 'seam-thermo-mode-menu',
       }}
     >
       {modes.map((m) => (

From 2216e7bcd328bf4854e33118b128a4b52c2a1a31 Mon Sep 17 00:00:00 2001
From: Tristan B <tristan@infi.im>
Date: Thu, 7 Sep 2023 12:26:33 -0600
Subject: [PATCH 08/13] `getModeIcon` -> `ModeIcon`

---
 src/lib/ui/thermostat/ClimateModeMenu.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/ui/thermostat/ClimateModeMenu.tsx b/src/lib/ui/thermostat/ClimateModeMenu.tsx
index 9e694753d..bcbe4763e 100644
--- a/src/lib/ui/thermostat/ClimateModeMenu.tsx
+++ b/src/lib/ui/thermostat/ClimateModeMenu.tsx
@@ -23,7 +23,7 @@ export function ClimateModeMenu({
       renderButton={({ onOpen }) => (
         <button onClick={onOpen} className='seam-climate-mode-menu-button'>
           <div className='seam-climate-mode-menu-button-icon'>
-            {getModeIcon(mode)}
+            {ModeIcon(mode)}
           </div>
           <ChevronDownIcon />
         </button>
@@ -38,7 +38,7 @@ export function ClimateModeMenu({
         <ThermoModeMenuOption
           key={m}
           label={t[m]}
-          icon={getModeIcon(m)}
+          icon={ModeIcon(m)}
           isSelected={mode === m}
           onClick={() => {
             onChange(m)
@@ -49,7 +49,7 @@ export function ClimateModeMenu({
   )
 }
 
-function getModeIcon(mode: Mode): JSX.Element {
+function ModeIcon(mode: Mode): JSX.Element {
   switch (mode) {
     case 'heat':
       return <ThermostatHeatIcon />

From a828325640aad572660d88f0f5dee0517ef72249 Mon Sep 17 00:00:00 2001
From: Tristan B <tristan@infi.im>
Date: Thu, 7 Sep 2023 12:30:52 -0600
Subject: [PATCH 09/13] Use `HvacModeSetting`

---
 src/lib/ui/thermostat/ClimateModeMenu.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/lib/ui/thermostat/ClimateModeMenu.tsx b/src/lib/ui/thermostat/ClimateModeMenu.tsx
index bcbe4763e..cbed84bac 100644
--- a/src/lib/ui/thermostat/ClimateModeMenu.tsx
+++ b/src/lib/ui/thermostat/ClimateModeMenu.tsx
@@ -5,13 +5,13 @@ import { ThermostatHeatIcon } from 'lib/icons/ThermostatHeat.js'
 import { ThermostatHeatCoolIcon } from 'lib/icons/ThermostatHeatCool.js'
 import { Menu } from 'lib/ui/Menu/Menu.js'
 import { ThermoModeMenuOption } from 'lib/ui/thermostat/ThermoModeMenuOption.js'
+import { type HvacModeSetting } from 'seamapi'
 
-const modes = ['heat', 'cool', 'heatcool', 'off'] as const
-type Mode = (typeof modes)[number]
+const modes: HvacModeSetting[] = ['heat', 'cool', 'heat_cool', 'off']
 
 interface ClimateModeMenuProps {
-  mode: Mode
-  onChange: (mode: Mode) => void
+  mode: HvacModeSetting
+  onChange: (mode: HvacModeSetting) => void
 }
 
 export function ClimateModeMenu({
@@ -49,13 +49,13 @@ export function ClimateModeMenu({
   )
 }
 
-function ModeIcon(mode: Mode): JSX.Element {
+function ModeIcon(mode: HvacModeSetting): JSX.Element {
   switch (mode) {
     case 'heat':
       return <ThermostatHeatIcon />
     case 'cool':
       return <ThermostatCoolIcon />
-    case 'heatcool':
+    case 'heat_cool':
       return <ThermostatHeatCoolIcon />
     case 'off':
       return <OffIcon />
@@ -65,6 +65,6 @@ function ModeIcon(mode: Mode): JSX.Element {
 const t = {
   heat: 'Heat',
   cool: 'Cool',
-  heatcool: 'Heat & Cool',
+  heat_cool: 'Heat & Cool',
   off: 'Off',
 }

From 086126a63fb7d9635fcd8d2ec362a1d123071ca8 Mon Sep 17 00:00:00 2001
From: Seam Bot <devops@getseam.com>
Date: Thu, 7 Sep 2023 18:32:32 +0000
Subject: [PATCH 10/13] ci: Format code

---
 src/lib/ui/thermostat/ClimateModeMenu.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/ui/thermostat/ClimateModeMenu.tsx b/src/lib/ui/thermostat/ClimateModeMenu.tsx
index cbed84bac..d8474e196 100644
--- a/src/lib/ui/thermostat/ClimateModeMenu.tsx
+++ b/src/lib/ui/thermostat/ClimateModeMenu.tsx
@@ -1,3 +1,5 @@
+import type { HvacModeSetting } from 'seamapi'
+
 import { ChevronDownIcon } from 'lib/icons/ChevronDown.js'
 import { OffIcon } from 'lib/icons/Off.js'
 import { ThermostatCoolIcon } from 'lib/icons/ThermostatCool.js'
@@ -5,7 +7,6 @@ import { ThermostatHeatIcon } from 'lib/icons/ThermostatHeat.js'
 import { ThermostatHeatCoolIcon } from 'lib/icons/ThermostatHeatCool.js'
 import { Menu } from 'lib/ui/Menu/Menu.js'
 import { ThermoModeMenuOption } from 'lib/ui/thermostat/ThermoModeMenuOption.js'
-import { type HvacModeSetting } from 'seamapi'
 
 const modes: HvacModeSetting[] = ['heat', 'cool', 'heat_cool', 'off']
 

From 6cdcbef431f5ef4cc3b640e9def2a54f24c05b51 Mon Sep 17 00:00:00 2001
From: Tristan B <tristan@infi.im>
Date: Thu, 7 Sep 2023 12:50:26 -0600
Subject: [PATCH 11/13] Add default to story

---
 src/lib/ui/thermostat/ClimateModeMenu.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/ui/thermostat/ClimateModeMenu.stories.tsx b/src/lib/ui/thermostat/ClimateModeMenu.stories.tsx
index d1d700a40..67b7c2422 100644
--- a/src/lib/ui/thermostat/ClimateModeMenu.stories.tsx
+++ b/src/lib/ui/thermostat/ClimateModeMenu.stories.tsx
@@ -19,7 +19,7 @@ export const Content: Story = {
     return (
       <Box height={190}>
         <ClimateModeMenu
-          mode={props.mode}
+          mode={props.mode ?? 'heat'}
           onChange={(mode) => {
             setArgs({ mode })
           }}

From 0c0e45e9a3e084a3e0d49b5d72b24aec28e184ff Mon Sep 17 00:00:00 2001
From: Tristan B <tristan@infi.im>
Date: Thu, 7 Sep 2023 16:07:25 -0600
Subject: [PATCH 12/13] Use `FanModeSetting`

---
 package-lock.json                     | 8 ++++----
 package.json                          | 2 +-
 src/lib/ui/thermostat/FanModeMenu.tsx | 8 ++++----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e3ff4dae4..ba5e81e06 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@tanstack/react-query": "^4.28.0",
         "classnames": "^2.3.2",
         "luxon": "^3.3.0",
-        "seamapi": "^8.10.1",
+        "seamapi": "^8.11.0",
         "uuid": "^9.0.0"
       },
       "devDependencies": {
@@ -21692,9 +21692,9 @@
       }
     },
     "node_modules/seamapi": {
-      "version": "8.10.2",
-      "resolved": "https://registry.npmjs.org/seamapi/-/seamapi-8.10.2.tgz",
-      "integrity": "sha512-r1VJnXEwQ5VPM59iecjnee+oLhTg/1sCK4XgLmkrnSoZvfmWq8QS6CiO+hubhfmfJpBSGI9x1PRP434QN7J+0A==",
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/seamapi/-/seamapi-8.11.0.tgz",
+      "integrity": "sha512-DjG8Cg5aE+Qu2OhqbBkLooANQJ2l+AHGqKLFOiYDFt8iPIpx6c0T9EnL5mbpEFPgGEn8766tT6rMgMH/AkQokg==",
       "dependencies": {
         "axios": "0.25.0",
         "axios-retry": "3.2.5",
diff --git a/package.json b/package.json
index 1ad678d98..8197fb509 100644
--- a/package.json
+++ b/package.json
@@ -123,7 +123,7 @@
     "@tanstack/react-query": "^4.28.0",
     "classnames": "^2.3.2",
     "luxon": "^3.3.0",
-    "seamapi": "^8.10.1",
+    "seamapi": "^8.11.0",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
diff --git a/src/lib/ui/thermostat/FanModeMenu.tsx b/src/lib/ui/thermostat/FanModeMenu.tsx
index 935a04823..e8988e534 100644
--- a/src/lib/ui/thermostat/FanModeMenu.tsx
+++ b/src/lib/ui/thermostat/FanModeMenu.tsx
@@ -3,13 +3,13 @@ import { FanIcon } from 'lib/icons/Fan.js'
 import { FanOutlineIcon } from 'lib/icons/FanOutline.js'
 import { Menu } from 'lib/ui/Menu/Menu.js'
 import { ThermoModeMenuOption } from 'lib/ui/thermostat/ThermoModeMenuOption.js'
+import type { FanModeSetting } from 'seamapi'
 
-const modes = ['auto', 'on'] as const
-type Mode = (typeof modes)[number]
+const modes: FanModeSetting[] = ['auto', 'on']
 
 interface FanModeMenuProps {
-  mode: Mode
-  onChange: (mode: Mode) => void
+  mode: FanModeSetting
+  onChange: (mode: FanModeSetting) => void
 }
 
 export function FanModeMenu({ mode, onChange }: FanModeMenuProps): JSX.Element {

From 11923c83cd4a23edf7acd22f801fdff9327f34da Mon Sep 17 00:00:00 2001
From: Seam Bot <devops@getseam.com>
Date: Thu, 7 Sep 2023 22:09:41 +0000
Subject: [PATCH 13/13] ci: Format code

---
 src/lib/ui/thermostat/FanModeMenu.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/ui/thermostat/FanModeMenu.tsx b/src/lib/ui/thermostat/FanModeMenu.tsx
index e8988e534..2bacbc3a1 100644
--- a/src/lib/ui/thermostat/FanModeMenu.tsx
+++ b/src/lib/ui/thermostat/FanModeMenu.tsx
@@ -1,9 +1,10 @@
+import type { FanModeSetting } from 'seamapi'
+
 import { ChevronDownIcon } from 'lib/icons/ChevronDown.js'
 import { FanIcon } from 'lib/icons/Fan.js'
 import { FanOutlineIcon } from 'lib/icons/FanOutline.js'
 import { Menu } from 'lib/ui/Menu/Menu.js'
 import { ThermoModeMenuOption } from 'lib/ui/thermostat/ThermoModeMenuOption.js'
-import type { FanModeSetting } from 'seamapi'
 
 const modes: FanModeSetting[] = ['auto', 'on']