Skip to content

Commit

Permalink
Switch project tabs to pills that linewrap
Browse files Browse the repository at this point in the history
  • Loading branch information
@oyamauchi
oyamauchi committed Sep 7, 2023
1 parent 6ce4b8c commit 3667236
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 48 deletions.
32 changes: 19 additions & 13 deletions src/projects.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { ItemType } from './api/calculator-types-v1';

const CLOTHES_DRYER_ICON = (
selected: boolean,
w: number = 48,
h: number = 48,
w: number = 20,
h: number = 20,
) =>
selected
? svg`<svg width="${w}" height="${h}" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
Expand All @@ -30,7 +30,7 @@ const CLOTHES_DRYER_ICON = (
<path d="M8.78418 40.0195V42.4536C8.78418 43.0059 9.23189 43.4536 9.78418 43.4536H38.1699C38.7222 43.4536 39.1699 43.0059 39.1699 42.4536V40.0195" stroke="#4A00C3" stroke-width="1.5" stroke-linejoin="round"/>
</svg>`;

const COOKING_ICON = (selected: boolean, w: number = 48, h: number = 48) =>
const COOKING_ICON = (selected: boolean, w: number = 20, h: number = 20) =>
selected
? svg`<svg width="${w}" height="${h}" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="30.8809" cy="15.8267" r="5.99316" fill="#F9D65B"/>
Expand Down Expand Up @@ -61,7 +61,7 @@ const COOKING_ICON = (selected: boolean, w: number = 48, h: number = 48) =>
<path d="M29.7148 37.5476H28.4971" stroke="#4A00C3" stroke-width="1.5" stroke-linecap="round"/>
</svg>`;

const EV_ICON = (selected: boolean, w: number = 48, h: number = 48) =>
const EV_ICON = (selected: boolean, w: number = 20, h: number = 20) =>
selected
? svg`<svg width="${w}" height="${h}" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M36.9531 27.5291H31.2773" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
Expand Down Expand Up @@ -104,8 +104,8 @@ const EV_ICON = (selected: boolean, w: number = 48, h: number = 48) =>

const ELECTRICAL_WIRING_ICON = (
selected: boolean,
w: number = 48,
h: number = 48,
w: number = 20,
h: number = 20,
) =>
selected
? svg`<svg width="${w}" height="${h}" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
Expand Down Expand Up @@ -149,7 +149,7 @@ const ELECTRICAL_WIRING_ICON = (
<path d="M29.3486 39.6902L29.3486 45.415" stroke="#4A00C3" stroke-width="1.5" stroke-linecap="round"/>
</svg>`;

const HVAC_ICON = (selected: boolean, w: number = 48, h: number = 48) =>
const HVAC_ICON = (selected: boolean, w: number = 20, h: number = 20) =>
selected
? svg`<svg width="${w}" height="${h}" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.23251 27.5454H9.64975C9.70498 27.5454 9.74975 27.5901 9.74975 27.6454V42.8233C9.74975 42.8786 9.79452 42.9233 9.84975 42.9233H38.6664C38.7217 42.9233 38.7664 42.8786 38.7664 42.8233V27.6454C38.7664 27.5901 38.8112 27.5454 38.8664 27.5454H45.4233C45.511 27.5454 45.5562 27.4405 45.496 27.3767L24.4351 5.07685C24.3957 5.03512 24.3293 5.03506 24.2898 5.07673L3.15993 27.3766C3.09954 27.4403 3.14472 27.5454 3.23251 27.5454Z" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
Expand Down Expand Up @@ -178,7 +178,7 @@ const HVAC_ICON = (selected: boolean, w: number = 48, h: number = 48) =>
</svg>
`;

const RENEWABLES_ICON = (selected: boolean, w: number = 48, h: number = 48) =>
const RENEWABLES_ICON = (selected: boolean, w: number = 20, h: number = 20) =>
selected
? svg`<svg width="${w}" height="${h}" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M27.8267 17.6152H19.4862C19.2325 17.6152 19.019 17.8052 18.9896 18.0572L17.9099 27.2954C17.8752 27.5925 18.1074 27.8534 18.4066 27.8534H28.3525C28.6398 27.8534 28.868 27.6118 28.8517 27.325L28.3259 18.0868C28.3108 17.8221 28.0918 17.6152 27.8267 17.6152Z" fill="#F9D65B"/>
Expand All @@ -197,7 +197,7 @@ const RENEWABLES_ICON = (selected: boolean, w: number = 48, h: number = 48) =>
<path d="M9.09961 27.8999L38.4996 27.8999" stroke="#4A00C3" stroke-width="1.5" stroke-linecap="round"/>
</svg>`;

const WATER_HEATER_ICON = (selected: boolean, w: number = 48, h: number = 48) =>
const WATER_HEATER_ICON = (selected: boolean, w: number = 20, h: number = 20) =>
selected
? svg`<svg width="${w}" height="${h}" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17 5C17 3.34315 18.3431 2 20 2H30C31.6569 2 33 3.34315 33 5V18H17V5Z" fill="#F9D65B"/>
Expand Down Expand Up @@ -229,7 +229,8 @@ export type Project =
| 'heat_pump_clothes_dryer'
| 'hvac'
| 'ev'
| 'renewables'
| 'solar'
| 'battery'
| 'heat_pump_water_heater'
| 'cooking'
| 'wiring';
Expand Down Expand Up @@ -259,9 +260,14 @@ export const PROJECTS: Record<Project, ProjectInfo> = {
shortLabel: 'EV',
icon: EV_ICON,
},
renewables: {
items: ['rooftop_solar_installation', 'battery_storage_installation'],
label: 'Renewables',
solar: {
items: ['rooftop_solar_installation'],
label: 'Solar',
icon: RENEWABLES_ICON,
},
battery: {
items: ['battery_storage_installation'],
label: 'Battery storage',
icon: RENEWABLES_ICON,
},
heat_pump_water_heater: {
Expand Down
54 changes: 19 additions & 35 deletions src/state-incentive-details.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,68 +158,52 @@ export const cardStyles = css`
export const iconTabStyles = css`
.icon-tab-bar {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
/*
* Center the tabs horizontally, and let them scroll horizontally if
* they're wider than the container
*/
justify-content: start;
width: min-content;
max-width: 100%;
overflow-x: auto;
margin: 0 auto 1.5rem auto;
width: 100%;
margin-bottom: 1.5rem;
}
button.icon-tab {
/* Override default button styles */
background-color: transparent;
border: 0;
font-family: inherit;
padding: 0;
cursor: pointer;
min-width: 6rem;
height: 3rem;
border: 1px solid #9b9b9b;
border-radius: 1.5rem;
padding: 0.75rem 1rem;
/* Manage the gap between the icon and the caption */
display: flex;
flex-direction: column;
flex-direction: row;
gap: 0.5rem;
align-items: center;
justify-content: center;
& .background {
/* Get the icon centered in the rounded box */
display: flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
border-radius: 0.75rem;
background: #fff;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.08);
}
& .caption {
color: #846f24;
text-align: center;
font-size: 0.6875rem;
color: var(--color-purple-500, #4a00c3);
font-size: 1rem;
font-weight: 500;
line-height: 125%;
letter-spacing: 0.03438rem;
text-transform: uppercase;
white-space: nowrap;
}
}
button.icon-tab--selected {
cursor: default;
& .background {
background: var(--color-purple-500, #4a00c3);
}
background: var(--color-purple-500, #4a00c3);
border-color: var(--color-purple-500, #4a00c3);
& .caption {
color: var(--color-purple-500, #4a00c3);
font-weight: 700;
color: white;
}
}
`;
Expand Down Expand Up @@ -384,7 +368,7 @@ export const gridTemplate = (
class="icon-tab ${selectedClass}"
@click=${() => onTabSelected(project)}
>
<div class="background">${PROJECTS[project].icon(isSelected)}</div>
${PROJECTS[project].icon(isSelected)}
<div class="caption">${shortLabel(project)}</div>
</button>
`;
Expand Down

0 comments on commit 3667236

Please sign in to comment.