Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add help icon opening dialog containing help content #76

Merged
merged 2 commits into from
Jul 31, 2024
Merged

feat: Add help icon opening dialog containing help content #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fdb6810
refactor: Make it simpler to add new help dialogs
ptbrowne Jul 31, 2024
f4bbfc2
feat: Add help icon opening dialog containing help content
ptbrowne Jul 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 34 additions & 18 deletions src/components/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,26 +59,23 @@ export const Footer = () => {
const locale = useLocale();
const [{ period }] = useQueryStateSingle();

const {
isOpen: isHelpCalculationOpen,
open: openHelpCalculation,
close: closeHelpCalculation,
} = useDisclosure();

const {
isOpen: isHelpCsvDownloadOpen,
open: openHelpCsvDownload,
close: closeHelpCsvDownload,
} = useDisclosure();
const helpCalculationDisclosure = useDisclosure();
const helpCsvDisclosure = useDisclosure();
const helpMunicipalitiesInfoDisclosure = useDisclosure();

const handleOpenCalculation = (ev: React.MouseEvent<HTMLElement>) => {
ev.preventDefault();
openHelpCalculation();
helpCalculationDisclosure.open();
};

const handleOpenCsvDownload = (ev: React.MouseEvent<HTMLElement>) => {
ev.preventDefault();
openHelpCsvDownload();
helpCsvDisclosure.open();
};

const handleOpenMunicipalitiesInfo = (ev: React.MouseEvent<HTMLElement>) => {
ev.preventDefault();
helpMunicipalitiesInfoDisclosure.open();
};

return (
Expand Down Expand Up @@ -119,23 +116,32 @@ export const Footer = () => {
</FooterLink>

<HelpDialog
close={closeHelpCalculation}
close={helpCalculationDisclosure.close}
label={t({
id: "help.calculation",
message: `Berechnungsgrundlage`,
})}
open={isHelpCalculationOpen}
open={helpCalculationDisclosure.isOpen}
slug="help-calculation"
/>
<HelpDialog
close={closeHelpCsvDownload}
close={helpCsvDisclosure.close}
label={t({
id: "help.csv-download",
message: `Daten als .csv`,
})}
open={isHelpCsvDownloadOpen}
open={helpCsvDisclosure.isOpen}
slug="help-download-raw-data"
/>
<HelpDialog
close={helpMunicipalitiesInfoDisclosure.close}
label={t({
id: "help.municipalities-info",
message: `Municipalities and grid operators information`,
})}
open={helpMunicipalitiesInfoDisclosure.isOpen}
slug="help-municipalities-and-grid-operators-info"
/>
<FooterLink
target="_blank"
href={t({
Expand Down Expand Up @@ -192,7 +198,17 @@ export const Footer = () => {
</FooterLink>
<FooterLink
href={`/api/municipalities-data.csv?period=${period}`}
icon={<IconDownload />}
icon={
<Box sx={{ display: "flex", flexShrink: 0, gap: "1rem" }}>
<IconButton
sx={{ p: 0, width: 24, height: 24, cursor: "pointer" }}
onClick={handleOpenMunicipalitiesInfo}
>
<IconInfo />
</IconButton>
<IconDownload />
</Box>
}
>
{t({
id: "footer.municipalities-and-grid-operators",
Expand Down
40 changes: 22 additions & 18 deletions src/locales/de/messages.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,78 +145,82 @@ msgstr "Produkt"
msgid "filters.year"
msgstr "Jahr"

#: src/components/footer.tsx:115
#: src/components/footer.tsx:112
msgid "footer.calculation-basics"
msgstr "Berechnungsgrundlagen"

#: src/components/footer.tsx:225
#: src/components/footer.tsx:241
msgid "footer.create-data-visualizations"
msgstr "Datenvisualierungen mit den ElCom-Daten erstellen"

#: src/components/footer.tsx:219
#: src/components/footer.tsx:235
msgid "footer.create-data-visualizations.link"
msgstr "https://www.elcom.admin.ch/elcom/de/home/themen/strompreise/tarif-rohdaten-verteilnetzbetreiber.html"

#: src/components/footer.tsx:191
#: src/components/footer.tsx:197
msgid "footer.data-as-csv"
msgstr "Daten als .csv"

#: src/components/footer.tsx:211
#: src/components/footer.tsx:227
msgid "footer.data-on-opendata-swiss"
msgstr "Daten auf opendata.swiss"

#: src/components/footer.tsx:205
#: src/components/footer.tsx:221
msgid "footer.data-on-opendata-swiss.link"
msgstr "https://opendata.swiss/de/group/ener?organization=elcom"

#: src/components/footer.tsx:172
#: src/components/footer.tsx:178
msgid "footer.download-visualize-data"
msgstr "Daten herunterladen / visualisieren"

#: src/components/footer.tsx:256
#: src/components/footer.tsx:272
msgid "footer.institution.name"
msgstr "Eidgenössische Elektrizitätskommission ElCom"

#: src/components/footer.tsx:269
#: src/components/footer.tsx:285
msgid "footer.legal-framework"
msgstr "Rechtliches"

#: src/components/footer.tsx:264
#: src/components/footer.tsx:280
msgid "footer.legal-framework.link"
msgstr "https://www.admin.ch/gov/de/start/rechtliches.html"

#: src/components/footer.tsx:104
#: src/components/footer.tsx:101
msgid "footer.more-information"
msgstr "Weiterführende Informationen"

#: src/components/footer.tsx:148
#: src/components/footer.tsx:154
msgid "footer.more-tariffs-information"
msgstr "Weitere Informationen zu den Tarifen in der Schweiz"

#: src/components/footer.tsx:141
#: src/components/footer.tsx:147
msgid "footer.more-tariffs-information.link"
msgstr "https://www.elcom.admin.ch/elcom/de/home/themen/strompreise.html"

#: src/components/footer.tsx:197
#: src/components/footer.tsx:213
msgid "footer.municipalities-and-grid-operators"
msgstr "Schweizerische Gemeinden und zuständige Stromnetzbetreiber"

#: src/components/footer.tsx:163
#: src/components/footer.tsx:169
msgid "footer.transmission-grid-tariff"
msgstr "Tarifkomponenten Übertragungsnetz - Swissgrid"

#: src/components/footer.tsx:156
#: src/components/footer.tsx:162
msgid "footer.transmission-grid-tariff.link"
msgstr "https://www.swissgrid.ch/dam/swissgrid/customers/topics/tariffs/Tabelle-Tarife-de.pdf"

#: src/components/footer.tsx:123
#: src/components/footer.tsx:120
msgid "help.calculation"
msgstr "Berechnungsgrundlagen"

#: src/components/footer.tsx:132
#: src/components/footer.tsx:129
msgid "help.csv-download"
msgstr "Daten als .csv"

#: src/components/footer.tsx:138
msgid "help.municipalities-info"
msgstr "Municipalities and grid operators information"

#: src/components/price-color-legend.tsx:77
msgid "help.price-comparison"
msgstr "Tarifvergleich"
Expand Down
40 changes: 22 additions & 18 deletions src/locales/fr/messages.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,78 +145,82 @@ msgstr "Produit"
msgid "filters.year"
msgstr "Année"

#: src/components/footer.tsx:115
#: src/components/footer.tsx:112
msgid "footer.calculation-basics"
msgstr "Bases de calcul"

#: src/components/footer.tsx:225
#: src/components/footer.tsx:241
msgid "footer.create-data-visualizations"
msgstr "Créer des visualisations de données avec les données ElCom"

#: src/components/footer.tsx:219
#: src/components/footer.tsx:235
msgid "footer.create-data-visualizations.link"
msgstr "https://www.elcom.admin.ch/elcom/fr/home/themes/prix-de-l_electricite/donnees-brutes-des-gestionnaires-suisses-de-reseau-de-distributi.html"

#: src/components/footer.tsx:191
#: src/components/footer.tsx:197
msgid "footer.data-as-csv"
msgstr "Données au format .csv"

#: src/components/footer.tsx:211
#: src/components/footer.tsx:227
msgid "footer.data-on-opendata-swiss"
msgstr "Données sur opendata.swiss"

#: src/components/footer.tsx:205
#: src/components/footer.tsx:221
msgid "footer.data-on-opendata-swiss.link"
msgstr "https://opendata.swiss/fr/group/ener?organization=elcom"

#: src/components/footer.tsx:172
#: src/components/footer.tsx:178
msgid "footer.download-visualize-data"
msgstr "Télécharger / visualiser les données"

#: src/components/footer.tsx:256
#: src/components/footer.tsx:272
msgid "footer.institution.name"
msgstr "Commission fédérale de l'électricité ElCom"

#: src/components/footer.tsx:269
#: src/components/footer.tsx:285
msgid "footer.legal-framework"
msgstr "Conditions d'utilisation"

#: src/components/footer.tsx:264
#: src/components/footer.tsx:280
msgid "footer.legal-framework.link"
msgstr "https://www.admin.ch/gov/fr/accueil/conditions-utilisation.html"

#: src/components/footer.tsx:104
#: src/components/footer.tsx:101
msgid "footer.more-information"
msgstr "Informations complémentaires"

#: src/components/footer.tsx:148
#: src/components/footer.tsx:154
msgid "footer.more-tariffs-information"
msgstr "Plus d'informations sur les tarifs en Suisse"

#: src/components/footer.tsx:141
#: src/components/footer.tsx:147
msgid "footer.more-tariffs-information.link"
msgstr "https://www.elcom.admin.ch/elcom/fr/home/themes/prix-de-l_electricite.html"

#: src/components/footer.tsx:197
#: src/components/footer.tsx:213
msgid "footer.municipalities-and-grid-operators"
msgstr "Communes suisses et exploitants de réseaux électriques responsables"

#: src/components/footer.tsx:163
#: src/components/footer.tsx:169
msgid "footer.transmission-grid-tariff"
msgstr "Tarifs du réseau de transport suisse - prestations de Swissgrid"

#: src/components/footer.tsx:156
#: src/components/footer.tsx:162
msgid "footer.transmission-grid-tariff.link"
msgstr "https://www.swissgrid.ch/dam/swissgrid/customers/topics/tariffs/Tabelle-Tarife-fr.pdf"

#: src/components/footer.tsx:123
#: src/components/footer.tsx:120
msgid "help.calculation"
msgstr "Base de calcul"

#: src/components/footer.tsx:132
#: src/components/footer.tsx:129
msgid "help.csv-download"
msgstr "Données au format .csv"

#: src/components/footer.tsx:138
msgid "help.municipalities-info"
msgstr "Informations sur les communes et les exploitants de réseaux"

#: src/components/price-color-legend.tsx:77
msgid "help.price-comparison"
msgstr "Comparaison des tarifs"
Expand Down
40 changes: 22 additions & 18 deletions src/locales/it/messages.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,78 +145,82 @@ msgstr "Prodotto"
msgid "filters.year"
msgstr "Anno"

#: src/components/footer.tsx:115
#: src/components/footer.tsx:112
msgid "footer.calculation-basics"
msgstr "Basi di calcolo"

#: src/components/footer.tsx:225
#: src/components/footer.tsx:241
msgid "footer.create-data-visualizations"
msgstr "Creare visualizzazioni dei dati con i dati di ElCom"

#: src/components/footer.tsx:219
#: src/components/footer.tsx:235
msgid "footer.create-data-visualizations.link"
msgstr "https://www.elcom.admin.ch/elcom/it/home/temi/prezzi-dell-energia-elettrica/dati-grezzi-tariffe-dei-gestori-delle-reti-di-distribuzione-sviz.html"

#: src/components/footer.tsx:191
#: src/components/footer.tsx:197
msgid "footer.data-as-csv"
msgstr "Dati in formato .csv"

#: src/components/footer.tsx:211
#: src/components/footer.tsx:227
msgid "footer.data-on-opendata-swiss"
msgstr "Dati su opendata.swiss"

#: src/components/footer.tsx:205
#: src/components/footer.tsx:221
msgid "footer.data-on-opendata-swiss.link"
msgstr "https://opendata.swiss/it/group/ener?organization=elcom"

#: src/components/footer.tsx:172
#: src/components/footer.tsx:178
msgid "footer.download-visualize-data"
msgstr "Scarica / visualizza i dati"

#: src/components/footer.tsx:256
#: src/components/footer.tsx:272
msgid "footer.institution.name"
msgstr "Commissione federale dell'energia elettrica Elcom"

#: src/components/footer.tsx:269
#: src/components/footer.tsx:285
msgid "footer.legal-framework"
msgstr "Basi legali"

#: src/components/footer.tsx:264
#: src/components/footer.tsx:280
msgid "footer.legal-framework.link"
msgstr "https://www.admin.ch/gov/it/pagina-iniziale/basi-legali.html"

#: src/components/footer.tsx:104
#: src/components/footer.tsx:101
msgid "footer.more-information"
msgstr "Per maggiori informazioni"

#: src/components/footer.tsx:148
#: src/components/footer.tsx:154
msgid "footer.more-tariffs-information"
msgstr "Ulteriori informazioni sulle tariffe in Svizzera"

#: src/components/footer.tsx:141
#: src/components/footer.tsx:147
msgid "footer.more-tariffs-information.link"
msgstr "https://www.elcom.admin.ch/elcom/it/home/temi/prezzi-dell-energia-elettrica.html"

#: src/components/footer.tsx:197
#: src/components/footer.tsx:213
msgid "footer.municipalities-and-grid-operators"
msgstr "Comuni svizzeri e gestori di rete elettrica responsabili"

#: src/components/footer.tsx:163
#: src/components/footer.tsx:169
msgid "footer.transmission-grid-tariff"
msgstr "Tariffe per la rete svizzera di trasmissione - le prestazioni di Swissgrid"

#: src/components/footer.tsx:156
#: src/components/footer.tsx:162
msgid "footer.transmission-grid-tariff.link"
msgstr "https://www.swissgrid.ch/dam/swissgrid/customers/topics/tariffs/Tabelle-Tarife-it.pdf"

#: src/components/footer.tsx:123
#: src/components/footer.tsx:120
msgid "help.calculation"
msgstr "Base di calcolo"

#: src/components/footer.tsx:132
#: src/components/footer.tsx:129
msgid "help.csv-download"
msgstr "Dati in formato .csv"

#: src/components/footer.tsx:138
msgid "help.municipalities-info"
msgstr "Informazioni sui comuni e sugli operatori di rete"

#: src/components/price-color-legend.tsx:77
msgid "help.price-comparison"
msgstr "Confronto tariffe"
Expand Down
Loading