@seamapi/react 1.47.0 → 1.48.0

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

@@ -23,16 +23,16 @@ export function ClimateSettingStatus({
       )}
       <Content
         mode={climateSetting.hvac_mode_setting}
-        coolingSetPoint={
+        coolingSetPoint={formatTemperatureValue(
           temperatureUnit === 'fahrenheit'
             ? climateSetting.cooling_set_point_fahrenheit
             : climateSetting.cooling_set_point_celsius
-        }
-        heatingSetPoint={
+        )}
+        heatingSetPoint={formatTemperatureValue(
           temperatureUnit === 'fahrenheit'
             ? climateSetting.heating_set_point_fahrenheit
             : climateSetting.heating_set_point_celsius
-        }
+        )}
         temperatureUnit={temperatureUnit}
       />
       {iconPlacement === 'right' && (
@@ -59,12 +59,8 @@ function ClimateSettingIcon(props: {
 
 function Content(props: {
   mode: ClimateSetting['hvac_mode_setting']
-  coolingSetPoint:
-    | ClimateSetting['cooling_set_point_fahrenheit']
-    | ClimateSetting['cooling_set_point_celsius']
-  heatingSetPoint:
-    | ClimateSetting['heating_set_point_fahrenheit']
-    | ClimateSetting['heating_set_point_celsius']
+  coolingSetPoint: string
+  heatingSetPoint: string
   temperatureUnit: 'fahrenheit' | 'celsius'
 }): JSX.Element | null {
   const { mode, coolingSetPoint, heatingSetPoint, temperatureUnit } = props
@@ -89,6 +85,12 @@ function Content(props: {
   return null
 }
 
+const formatTemperatureValue = (value: number | undefined): string => {
+  if (value == null) return '0'
+  if (Number.isInteger(value)) return value.toFixed()
+  return value.toFixed(1)
+}
+
 const t = {
   degreeFahrenheit: '°F',
   degreeCelsius: '°C',

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.47.0'
+const seamapiReactVersion = '1.48.0'
 
 export default seamapiReactVersion

package/src/styles/_main.scss

@@ -18,6 +18,7 @@
 @use './radio-field';
 @use './checkbox';
 @use './thermostat';
+@use './tooltip';
 @use './seam-table';
 
 .seam-components {
@@ -36,6 +37,7 @@
   @include menus.all;
   @include checkbox.all;
   @include radio-field.all;
+  @include tooltip.all;
 
   // Components
   @include device-details.all;

package/src/styles/_tooltip.scss

@@ -0,0 +1,83 @@
+@use './colors';
+
+@mixin all {
+  .seam-tooltip {
+    position: relative;
+
+    .seam-tooltip-button {
+      appearance: none;
+      width: 18px;
+      height: 18px;
+      border: none;
+      box-shadow: none;
+      background: none;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 90px;
+      cursor: pointer;
+
+      & .seam-tooltip-button-icon {
+        position: absolute;
+        transition: opacity 0.15s ease-in-out;
+      }
+
+      .seam-tooltip-button-icon-hover {
+        opacity: 0;
+      }
+
+      &:hover,
+      &:focus {
+        .seam-tooltip-button-icon-default {
+          opacity: 0;
+        }
+
+        .seam-tooltip-button-icon-hover {
+          opacity: 1;
+        }
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .seam-tooltip-popover {
+      width: 230px;
+      padding: 10px;
+      gap: 10px;
+      position: absolute;
+      bottom: 28px;
+      left: 2px;
+      display: flex;
+      border-radius: 8px;
+      background: colors.$white;
+      box-shadow:
+        0 2px 16px 2px rgb(15 22 28 / 15%),
+        0 0 1px 0 rgb(0 0 0 / 30%);
+      transform-origin: bottom left;
+      transition: 0.1s ease-in-out;
+      opacity: 0;
+      transform: scale(0.9);
+      visibility: hidden;
+      pointer-events: none;
+      z-index: -1;
+
+      &[aria-expanded='true'] {
+        opacity: 1;
+        transform: scale(1);
+        visibility: visible;
+        pointer-events: auto;
+        z-index: 9;
+      }
+    }
+
+    .seam-tooltip-text {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 134%;
+    }
+  }
+}