@seamapi/react 4.6.0 → 4.8.0

package/src/lib/ui/thermostat/ThermostatCard.tsx

@@ -12,12 +12,17 @@ import { Temperature } from 'lib/ui/thermostat/Temperature.js'
 interface ThermostatCardProps {
   device: ThermostatDevice
   onEditName?: (newName: string) => void
+  onTemperatureUnitChange?: (temperatureUnit: 'fahrenheit' | 'celsius') => void
 }
 
 export function ThermostatCard(props: ThermostatCardProps): JSX.Element {
   return (
     <div className='seam-thermostat-card'>
-      <Content device={props.device} onEditName={props.onEditName} />
+      <Content
+        device={props.device}
+        onEditName={props.onEditName}
+        onTemperatureUnitChange={props.onTemperatureUnitChange}
+      />
     </div>
   )
 }
@@ -30,9 +35,10 @@ function Content(props: ThermostatCardProps): JSX.Element | null {
   >('fahrenheit')
 
   const toggleTemperatureUnit = (): void => {
-    setTemperatureUnit(
-      temperatureUnit === 'fahrenheit' ? 'celsius' : 'fahrenheit'
-    )
+    const newUnit = temperatureUnit === 'fahrenheit' ? 'celsius' : 'fahrenheit'
+
+    setTemperatureUnit(newUnit)
+    props.onTemperatureUnitChange?.(newUnit)
   }
 
   const {

package/src/lib/ui/types.ts

@@ -1,5 +1,5 @@
-import type { HTMLAttributes, HtmlHTMLAttributes } from 'react'
+import type { ButtonHTMLAttributes, HTMLAttributes } from 'react'
 
 export type DivProps = HTMLAttributes<HTMLDivElement>
-export type ButtonProps = HtmlHTMLAttributes<HTMLButtonElement>
-export type SpanProps = HtmlHTMLAttributes<HTMLSpanElement>
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement>
+export type SpanProps = HTMLAttributes<HTMLSpanElement>

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '4.6.0'
+const seamapiReactVersion = '4.8.0'
 
 export default seamapiReactVersion

package/src/styles/_buttons.scss

@@ -1,10 +1,11 @@
 @use './typography';
 @use './colors';
+@use 'sass:color';
 
 @mixin icon-button {
   .seam-icon-btn {
     border-radius: 6px;
-    border: 1px solid rgb(0 122 252 / 50%);
+    border: 1px solid rgba(colors.$primary, 50%);
     cursor: pointer;
     background: colors.$white;
     padding: 2px;
@@ -19,7 +20,19 @@
     }
 
     &:hover {
-      background: rgb(0 122 252 / 8%);
+      background: rgba(colors.$primary, 0.08);
+    }
+
+    &.seam-icon-btn-disabled,
+    &:disabled {
+      color: colors.$text-gray-2-5;
+      border-color: colors.$text-gray-3;
+      background: colors.$white;
+      cursor: not-allowed;
+
+      path {
+        fill: colors.$text-gray-2-5;
+      }
     }
   }
 }
@@ -101,6 +114,23 @@
     }
   }
 
+  &.seam-btn-danger {
+    color: colors.$status-red;
+    border: 1px solid colors.$status-red;
+    background: transparent;
+
+    &:hover {
+      color: color.scale(colors.$status-red, $lightness: 30%);
+      border-color: color.scale(colors.$status-red, $lightness: 30%);
+    }
+
+    &.seam-btn-disabled,
+    &:disabled {
+      color: colors.$text-gray-2-5;
+      border-color: colors.$text-gray-2-5;
+    }
+  }
+
   &.seam-btn-neutral {
     color: colors.$text-gray-1;
     border: 1px solid colors.$text-gray-2-5;
@@ -125,6 +155,7 @@
     @include button-size;
     @include button-variant;
 
+    position: relative;
     font-weight: 600;
     cursor: pointer;
 
@@ -132,6 +163,29 @@
     &:disabled {
       cursor: not-allowed;
     }
+
+    .seam-btn-loading {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      --spinner-color: currentcolor;
+    }
+
+    .seam-btn-content {
+      display: contents;
+    }
+
+    &.seam-btn-loading {
+      .seam-btn-content {
+        visibility: hidden;
+      }
+    }
   }
 }
 

package/src/styles/_main.scss

@@ -30,6 +30,7 @@
 @use './tab-set';
 @use './noise-sensor';
 @use './seam-editable-device-name';
+@use './popover';
 
 .seam-components {
   // Reset
@@ -68,4 +69,5 @@
   @include thermostat.all;
   @include seam-table.all;
   @include noise-sensor.all;
+  @include popover.all;
 }

package/src/styles/_popover.scss

@@ -0,0 +1,46 @@
+@use './colors';
+
+@mixin popover {
+  .seam-popover {
+    display: inline-block;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 10px -2px rgb(0 0 0 / 20%);
+    background-color: colors.$bg-a;
+    border: 1px solid colors.$bg-c;
+  }
+}
+
+@mixin popover-content-prompt {
+  .seam-popover-content-prompt {
+    display: inline-flex;
+    flex-flow: column nowrap;
+    padding: 12px;
+    gap: 12px;
+    background-color: colors.$bg-a;
+  }
+
+  .seam-popover-content-prompt-text {
+    font-weight: 600;
+    text-align: center;
+  }
+
+  .seam-popover-content-prompt-description {
+    font-weight: 400;
+    text-align: center;
+    color: colors.$text-gray-2;
+    font-size: 12px;
+  }
+
+  .seam-popover-content-prompt-buttons {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: 6px;
+    justify-content: flex-end;
+  }
+}
+
+@mixin all {
+  @include popover;
+  @include popover-content-prompt;
+}

package/src/styles/_spinner.scss

@@ -17,7 +17,7 @@
   .seam-spinner {
     width: $default-size;
     height: $default-size;
-    border: $default-border-width solid colors.$primary;
+    border: $default-border-width solid var(--spinner-color, colors.$primary);
     border-top: $default-border-width solid transparent;
     display: inline-block;
     border-radius: 50%;

package/src/styles/_thermostat.scss

@@ -1,4 +1,6 @@
 @use './colors';
+@use 'sass:color';
+@use './access-code-form' as acf;
 
 @mixin climate-setting-control-group {
   .seam-climate-setting-control-group {
@@ -542,7 +544,6 @@
 @mixin fan-mode-menu {
   .seam-fan-mode-menu-button {
     width: 130px;
-    height: 32px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -554,6 +555,14 @@
     cursor: pointer;
     transition: 0.2s ease;
 
+    &.seam-fan-mode-menu-button-size-regular {
+      height: 32px;
+    }
+
+    &.seam-fan-mode-menu-button-size-large {
+      height: 48px;
+    }
+
     svg {
       font-size: 20px;
     }
@@ -579,6 +588,10 @@
       }
     }
 
+    &.seam-fan-mode-menu-button-block-sized {
+      width: 100%;
+    }
+
     .seam-fan-mode-menu-button-text {
       color: colors.$text-gray-1;
       font-size: 16px;
@@ -597,12 +610,23 @@
     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;
 
+    &.seam-climate-mode-menu-button-regular {
+      height: 32px;
+    }
+
+    &.seam-climate-mode-menu-button-large {
+      height: 48px;
+    }
+
+    &.seam-climate-mode-menu-button-block {
+      width: 100%;
+    }
+
     &:hover {
       border-color: colors.$text-gray-2;
     }
@@ -618,6 +642,12 @@
 
     .seam-climate-mode-menu-button-chevron {
       font-size: 20px;
+      margin-left: auto;
+    }
+
+    .seam-climate-mode-menu-button-text {
+      font-size: 14px;
+      margin-left: 6px;
     }
   }
 
@@ -656,6 +686,126 @@
   }
 }
 
+@mixin climate-presets {
+  .seam-thermostat-climate-presets-body {
+    margin: 0 24px 24px;
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 10px;
+    justify-content: center;
+  }
+
+  .seam-thermostat-climate-presets-cards {
+    display: flex;
+    flex-flow: row wrap;
+    gap: 10px;
+    justify-content: center;
+  }
+
+  .seam-climate-presets-add-button {
+    margin: 0 auto;
+    display: inline-flex !important;
+    align-items: center;
+    gap: 6px;
+
+    svg {
+      font-size: 20px;
+    }
+
+    svg,
+    path {
+      fill: currentcolor;
+    }
+  }
+
+  .seam-thermostat-climate-presets-card {
+    border-radius: 12px;
+    background-color: colors.$bg-a;
+    width: 100%;
+    max-width: 250px;
+    overflow: hidden;
+
+    .seam-thermostat-climate-presets-card-top {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      justify-content: space-between;
+      border-bottom: 1px solid color.scale(colors.$bg-a, $lightness: -5%);
+      padding: 8px;
+      background-color: colors.$bg-b;
+
+      .seam-thermostat-climate-presets-card-name {
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 118%;
+        white-space: nowrap;
+      }
+
+      .seam-thermostat-climate-presets-card-name-key {
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 118%;
+        white-space: nowrap;
+        color: colors.$text-gray-2;
+      }
+
+      .seam-thermostat-climate-presets-card-buttons {
+        display: flex;
+        flex-flow: row nowrap;
+        gap: 4px;
+        justify-content: flex-end;
+      }
+    }
+
+    .seam-thermostat-climate-presets-card-body {
+      display: flex;
+      flex-flow: row wrap;
+      align-items: center;
+      gap: 10px;
+      width: 100%;
+      padding: 8px;
+      justify-content: space-around;
+    }
+
+    .seam-thermostat-climate-preset-chip {
+      display: inline-flex;
+      flex-flow: row nowrap;
+      gap: 4px;
+      align-items: center;
+      justify-content: space-between;
+      width: max-content;
+
+      .seam-thermostat-climate-preset-chip-icon {
+        color: colors.$text-gray-1;
+        font-weight: 600;
+
+        svg {
+          position: relative;
+          top: 2px;
+        }
+      }
+
+      .seam-thermostat-climate-preset-chip-value {
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+@mixin climate-preset {
+  .seam-thermostat-climate-preset {
+    @include acf.main;
+
+    .seam-climate-preset-buttons {
+      display: flex;
+      flex-flow: row nowrap;
+      gap: 8px;
+    }
+  }
+}
+
 @mixin all {
   @include climate-setting-control-group;
   @include temperature-control-group;
@@ -666,4 +816,6 @@
   @include fan-mode-menu;
   @include climate-mode-menu;
   @include status;
+  @include climate-presets;
+  @include climate-preset;
 }