Skip to content

Commit d8e6045

Browse files
AndrewjeskaAndrewjeska
authored
ClimateSettingStatus
2 parents d87513a + b89ad6c commit d8e6045

File tree

4 files changed

+258
-0
lines changed

4 files changed

+258
-0
lines changed

‎src/lib/ui/thermostat/ClimateSettingStatus.stories.tsx

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
import { Box } from '@mui/material'
2+
import type { Meta, StoryObj } from '@storybook/react'
3+
4+
import { ClimateSettingStatus } from './ClimateSettingStatus.js'
5+
6+
const meta: Meta<typeof ClimateSettingStatus> = {
7+
title: 'Library/ClimateSettingStatus',
8+
tags: ['autodocs'],
9+
component: ClimateSettingStatus,
10+
}
11+
12+
type Story = StoryObj<typeof ClimateSettingStatus>
13+
14+
export const Content: Story = {
15+
render: () => {
16+
return (
17+
<Box display='grid' gap={4} gridTemplateColumns='repeat(4, min-content)'>
18+
<ClimateSettingStatus
19+
climateSetting={{
20+
hvac_mode_setting: 'cool',
21+
cooling_set_point_fahrenheit: 70,
22+
manual_override_allowed: true,
23+
}}
24+
/>
25+
26+
<ClimateSettingStatus
27+
climateSetting={{
28+
hvac_mode_setting: 'cool',
29+
cooling_set_point_fahrenheit: 70,
30+
manual_override_allowed: true,
31+
}}
32+
iconPlacement='right'
33+
/>
34+
35+
<ClimateSettingStatus
36+
climateSetting={{
37+
hvac_mode_setting: 'cool',
38+
cooling_set_point_fahrenheit: 70,
39+
manual_override_allowed: true,
40+
}}
41+
temperatureUnit='celsius'
42+
/>
43+
44+
<ClimateSettingStatus
45+
climateSetting={{
46+
hvac_mode_setting: 'cool',
47+
cooling_set_point_fahrenheit: 70,
48+
manual_override_allowed: true,
49+
}}
50+
iconPlacement='right'
51+
temperatureUnit='celsius'
52+
/>
53+
54+
<ClimateSettingStatus
55+
climateSetting={{
56+
hvac_mode_setting: 'heat',
57+
heating_set_point_fahrenheit: 70,
58+
manual_override_allowed: true,
59+
}}
60+
/>
61+
<ClimateSettingStatus
62+
climateSetting={{
63+
hvac_mode_setting: 'heat',
64+
heating_set_point_fahrenheit: 70,
65+
manual_override_allowed: true,
66+
}}
67+
iconPlacement='right'
68+
/>
69+
70+
<ClimateSettingStatus
71+
climateSetting={{
72+
hvac_mode_setting: 'heat',
73+
heating_set_point_fahrenheit: 70,
74+
manual_override_allowed: true,
75+
}}
76+
temperatureUnit='celsius'
77+
/>
78+
<ClimateSettingStatus
79+
climateSetting={{
80+
hvac_mode_setting: 'heat',
81+
heating_set_point_fahrenheit: 70,
82+
manual_override_allowed: true,
83+
}}
84+
iconPlacement='right'
85+
temperatureUnit='celsius'
86+
/>
87+
88+
<ClimateSettingStatus
89+
climateSetting={{
90+
hvac_mode_setting: 'heatcool',
91+
cooling_set_point_fahrenheit: 70,
92+
heating_set_point_fahrenheit: 60,
93+
manual_override_allowed: true,
94+
}}
95+
/>
96+
97+
<ClimateSettingStatus
98+
climateSetting={{
99+
hvac_mode_setting: 'heatcool',
100+
cooling_set_point_fahrenheit: 70,
101+
heating_set_point_fahrenheit: 60,
102+
manual_override_allowed: true,
103+
}}
104+
iconPlacement='right'
105+
/>
106+
107+
<ClimateSettingStatus
108+
climateSetting={{
109+
hvac_mode_setting: 'heatcool',
110+
cooling_set_point_fahrenheit: 70,
111+
heating_set_point_fahrenheit: 60,
112+
manual_override_allowed: true,
113+
}}
114+
temperatureUnit='celsius'
115+
/>
116+
117+
<ClimateSettingStatus
118+
climateSetting={{
119+
hvac_mode_setting: 'heatcool',
120+
cooling_set_point_fahrenheit: 70,
121+
heating_set_point_fahrenheit: 60,
122+
manual_override_allowed: true,
123+
}}
124+
iconPlacement='right'
125+
temperatureUnit='celsius'
126+
/>
127+
128+
<ClimateSettingStatus
129+
climateSetting={{
130+
hvac_mode_setting: 'off',
131+
manual_override_allowed: false,
132+
}}
133+
/>
134+
135+
<ClimateSettingStatus
136+
climateSetting={{
137+
hvac_mode_setting: 'off',
138+
manual_override_allowed: false,
139+
}}
140+
iconPlacement='right'
141+
/>
142+
</Box>
143+
)
144+
},
145+
}
146+
147+
export default meta

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

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import type { ClimateSetting } from 'seamapi'
2+
3+
import { ThermostatCoolIcon } from 'lib/icons/ThermostatCool.js'
4+
import { ThermostatHeatIcon } from 'lib/icons/ThermostatHeat.js'
5+
import { ThermostatHeatCoolIcon } from 'lib/icons/ThermostatHeatCool.js'
6+
import { ThermostatOffIcon } from 'lib/icons/ThermostatOff.js'
7+
8+
interface ClimateSettingStatusProps {
9+
climateSetting: ClimateSetting
10+
temperatureUnit?: 'fahrenheit' | 'celsius'
11+
iconPlacement?: 'left' | 'right'
12+
}
13+
14+
export function ClimateSettingStatus({
15+
climateSetting,
16+
temperatureUnit = 'fahrenheit',
17+
iconPlacement = 'left',
18+
}: ClimateSettingStatusProps): JSX.Element {
19+
return (
20+
<div className='seam-climate-setting-status'>
21+
{iconPlacement === 'left' && (
22+
<ClimateSettingIcon mode={climateSetting.hvac_mode_setting} />
23+
)}
24+
<Content
25+
mode={climateSetting.hvac_mode_setting}
26+
coolingSetPoint={climateSetting.cooling_set_point_fahrenheit}
27+
heatingSetPoint={climateSetting.heating_set_point_fahrenheit}
28+
temperatureUnit={temperatureUnit}
29+
/>
30+
{iconPlacement === 'right' && (
31+
<ClimateSettingIcon mode={climateSetting.hvac_mode_setting} />
32+
)}
33+
</div>
34+
)
35+
}
36+
37+
function ClimateSettingIcon(props: {
38+
mode: ClimateSetting['hvac_mode_setting']
39+
}): JSX.Element | null {
40+
const { mode } = props
41+
42+
return (
43+
<div className='seam-climate-setting-status-icon'>
44+
{mode === 'cool' && <ThermostatCoolIcon />}
45+
{mode === 'heat' && <ThermostatHeatIcon />}
46+
{mode === 'heatcool' && <ThermostatHeatCoolIcon />}
47+
{mode === 'off' && <ThermostatOffIcon />}
48+
</div>
49+
)
50+
}
51+
52+
function Content(props: {
53+
mode: ClimateSetting['hvac_mode_setting']
54+
coolingSetPoint:
55+
| ClimateSetting['cooling_set_point_fahrenheit']
56+
| ClimateSetting['cooling_set_point_celsius']
57+
heatingSetPoint:
58+
| ClimateSetting['heating_set_point_fahrenheit']
59+
| ClimateSetting['heating_set_point_celsius']
60+
temperatureUnit: 'fahrenheit' | 'celsius'
61+
}): JSX.Element | null {
62+
const { mode, coolingSetPoint, heatingSetPoint, temperatureUnit } = props
63+
const hasCoolingSetPoint = coolingSetPoint !== undefined
64+
const hasHeatingSetPoint = heatingSetPoint !== undefined
65+
const unit =
66+
temperatureUnit === 'fahrenheit' ? t.degreeFahrenheit : t.degreeCelsius
67+
68+
if (mode === 'cool' && hasCoolingSetPoint)
69+
return <span>{`${coolingSetPoint}${unit}`}</span>
70+
71+
if (mode === 'heat' && hasHeatingSetPoint)
72+
return <span>{`${heatingSetPoint}${unit}`}</span>
73+
74+
if (mode === 'heatcool' && hasHeatingSetPoint && hasCoolingSetPoint)
75+
return (
76+
<span>{`${heatingSetPoint}${unit} - ${coolingSetPoint}${unit}`}</span>
77+
)
78+
79+
if (mode === 'off') return <span>{t.off}</span>
80+
81+
return null
82+
}
83+
84+
const t = {
85+
degreeFahrenheit: '°F',
86+
degreeCelsius: '°C',
87+
off: 'Off',
88+
}

‎src/styles/_main.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
@use './form-field';
1919
@use './radio-field';
2020
@use './checkbox';
21+
@use './thermostat';
2122

2223
.seam-components {
2324
// Reset
@@ -44,4 +45,5 @@
4445
@include access-code-form.all;
4546
@include alert.all;
4647
@include supported-device-table.all;
48+
@include thermostat.all;
4749
}

‎src/styles/_thermostat.scss

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@use './colors';
2+
3+
@mixin all {
4+
.seam-climate-setting-status {
5+
display: flex;
6+
align-items: center;
7+
gap: 4px;
8+
color: colors.$text-gray-1;
9+
font-size: 14px;
10+
line-height: 118%;
11+
white-space: nowrap;
12+
}
13+
14+
.seam-climate-setting-status-icon {
15+
width: 20px;
16+
height: 20px;
17+
display: flex;
18+
justify-content: center;
19+
align-items: center;
20+
}
21+
}

0 commit comments

Comments
 (0)