= form_with(method: :get) do |form|
.row
.col-xs-6
= form.label "Label", for: :medium_email
= form.text_field :medium_email, placeholder: "Your email"
.col-xs-6
= form.label "Label", for: :medium_email_disabled
= form.text_field :medium_email_disabled, placeholder: "Your disabled email", disabled: true
.col-xs-6
= form.label "Label", for: :medium_email_error
= form.text_field :medium_email_error, placeholder: "Your email in error", class: "error"
.col-xs-6
= form.label :medium_email_readonly do
i.ph-lock-bold
| Label
= form.text_field :medium_email_readonly, placeholder: "Your read-only email", readonly: true
.col-xs-6
= form.label "Label", for: :medium_conso
= render Forms::NumberWithUnitComponent.new(name: :medium_conso, placeholder: "Consommation", input_unit: "kWh", value: 1337)
.col-xs-6
= form.label "Label", for: :medium_email_disabled
= render Forms::NumberWithUnitComponent.new(name: :medium_conso_disabled, placeholder: "Consommation", input_unit: "kWh", value: 1337, disabled: true)
.col-xs-6
= form.label "Label", for: :medium_conso_error
= render Forms::NumberWithUnitComponent.new(name: :medium_conso_error, placeholder: "Consommation", input_unit: "kWh", value: 1337, error: true)
.col-xs-6
= form.label :medium_conso_readonly do
i.ph-lock-bold
| Label
= render Forms::NumberWithUnitComponent.new(name: :medium_conso_readonly, placeholder: "Consommation", input_unit: "kWh", value: 1337, readonly: true)
.col-xs-12
= form.label "Label", for: :medium_search
.input-with-icon
= form.text_field :medium_search, placeholder: "Rechercher PDL, Nom de site"
i.ph-magnifying-glass
.col-xs-12
= form.label "Label", for: :medium_collection
= form.collection_select :medium_collection, StoryBookController::COMPONENTS, :first, :last
.col-xs-6
= form.label "Label", for: :medium_number_spinner
= render Forms::SpinnerComponent.new do |spinner|
- spinner.with_input_number_with_unit(name: :surface, placeholder: "Surface", input_unit: "m²")
.col-xs-6
= form.label "Label", for: :medium_number_spinner_disabled
= render Forms::SpinnerComponent.new do |spinner|
- spinner.with_input_number_with_unit(name: :surface, placeholder: "Surface", input_unit: "m²", disabled: true)
.col-xs-6
= form.label "Label", for: :medium_number_spinner_error
= render Forms::SpinnerComponent.new do |spinner|
- spinner.with_input_number_with_unit(name: :surface, placeholder: "Surface", input_unit: "m²", error: true)
.col-xs-6
= form.label :medium_number_spinner_readonly do
i.ph-lock-bold
| Label
= render Forms::SpinnerComponent.new do |spinner|
- spinner.with_input_number_with_unit(name: :surface, placeholder: "Surface", input_unit: "m²", readonly: true)
.col-xs-12 data-controller="update-unit"
= form.label "Thème vert + centré", for: :medium_number_spinner_updatable
= render Forms::SpinnerComponent.new(theme: :vert) do |spinner|
- spinner.with_input_centered_number_with_unit(\
name: "subscription[shares]",
value: 0,
placeholder: "nombre de",
input_data: { action: "update-unit#updateUnit" },
input_unit: "part pour 0 €",
input_unit_data: { "update-unit-target": "unit" },
)
.col-xs-12
= form.label "Thème par défaut", for: :medium_number_spinner_theme_default
= render Forms::SpinnerComponent.new do |spinner|
- spinner.with_input_number_with_unit(name: :medium_number_spinner_theme_default, placeholder: "conso.", input_unit: "kWh", value: 42)
.col-xs-6
= form.label "Thème bleu", for: :medium_number_spinner_theme_bleu
= render Forms::SpinnerComponent.new(theme: :bleu) do |spinner|
- spinner.with_input_number_with_unit(name: :medium_number_spinner_theme_bleu, placeholder: "conso.", input_unit: "kWh", value: 42)
.col-xs-6
= form.label "Thème brun", for: :medium_number_spinner_theme_brun
= render Forms::SpinnerComponent.new(theme: :brun) do |spinner|
- spinner.with_input_number_with_unit(name: :medium_number_spinner_theme_brun, placeholder: "conso.", input_unit: "kWh", value: 42)
.col-xs-6
= form.label "Thème jaune", for: :medium_number_spinner_theme_jaune
= render Forms::SpinnerComponent.new(theme: :jaune) do |spinner|
- spinner.with_input_number_with_unit(name: :medium_number_spinner_theme_jaune, placeholder: "conso.", input_unit: "kWh", value: 42)
.col-xs-6
= form.label "Thème rouge", for: :medium_number_spinner_theme_rouge
= render Forms::SpinnerComponent.new(theme: :rouge) do |spinner|
- spinner.with_input_number_with_unit(name: :medium_number_spinner_theme_rouge, placeholder: "conso.", input_unit: "kWh", value: 42)
.col-xs-6
= form.label "Thème turquoise", for: :medium_number_spinner_theme_turquoise
= render Forms::SpinnerComponent.new(theme: :turquoise) do |spinner|
- spinner.with_input_number_with_unit(name: :medium_number_spinner_theme_turquoise, placeholder: "conso.", input_unit: "kWh", value: 42)
.col-xs-6
= form.label "Thème vert", for: :medium_number_spinner_theme_vert
= render Forms::SpinnerComponent.new(theme: :vert) do |spinner|
- spinner.with_input_number_with_unit(name: :medium_number_spinner_theme_vert, placeholder: "conso.", input_unit: "kWh", value: 42)
.col-xs-6.bg-bleu.pv-1
= form.label "Thème beige", for: :medium_number_spinner_theme_beige, class: "text-beige"
= render Forms::SpinnerComponent.new(theme: :beige) do |spinner|
- spinner.with_input_number_with_unit(name: :medium_number_spinner_theme_beige, placeholder: "conso.", input_unit: "kWh", value: 42)
.col-xs-6.bg-bleu.pv-1
= form.label "Thème blanc", for: :medium_number_spinner_theme_blanc, class: "text-blanc"
= render Forms::SpinnerComponent.new(theme: :blanc) do |spinner|
- spinner.with_input_number_with_unit(name: :medium_number_spinner_theme_blanc, placeholder: "conso.", input_unit: "kWh", value: 42)
.col-xs-12.mt-2.mb-2
.checkbox
= form.check_box :medium_authorize_halfhour
= form.label :medium_authorize_halfhour do
| J’autorise l’enregistrement des données de consommation par demi-heure sur mon compteur communiquant
.checkbox
= form.check_box :medium_authorize_enedis
= form.label :medium_authorize_enedis do
| J'autorise Enedis à collecter mes données de consommation par demi-heure et à les transmettre à Enercoop
.col-xs-6
= form.label "Label", for: :medium_birthday
= form.date_field :medium_birthday
.col-xs-6
= form.label "Label", for: :medium_today_disabled
= form.date_field :medium_today_disabled, value: Time.zone.today, disabled: true
.col-xs-6
= form.label "Label", for: :medium_birthday_error
= form.date_field :medium_birthday_error, class: "error"
.col-xs-6
= form.label :medium_today_readonly do
i.ph-lock-bold
| Label
= form.date_field :medium_today_readonly, value: Time.zone.today, readonly: true
.col-xs-6.mt-2
.radio_button
= form.radio_button :medium_unit, :euro
= form.label "Euro", for: :medium_unit_euro
= form.radio_button :medium_unit, :kva
= form.label "kVA", for: :medium_unit_kva
.col-xs-6.mt-2
.radio_button
= form.radio_button :medium_unit_disabled, :euro, disabled: true
= form.label "Euro", for: :medium_unit_disabled_euro
= form.radio_button :medium_unit_disabled, :kva, disabled: true
= form.label "kVA", for: :medium_unit_disabled_kva
.col-xs-6.mt-2
/ NOTE: error styling is not supported yet.
/ .radio_button
/ = form.radio_button :medium_unit_error, :euro, class: "error"
/ = form.label "Euro", for: :medium_unit_error_euro
/ = form.radio_button :medium_unit_error, :kva, class: "error"
/ = form.label "kVA", for: :medium_unit_error_kva
.col-xs-6.mt-2
/ NOTE: readonly is a nonsens for radio buttons, just use disabled instead.
.radio_button
= form.radio_button :medium_unit_readonly, :euro, disabled: true
= form.label :medium_unit_readonly_euro do
i.ph-lock-bold
| Euro
= form.radio_button :medium_unit_readonly, :kva, checked: true, disabled: true
= form.label :medium_unit_readonly_kva do
i.ph-lock-bold
| kVA
.col-xs-12
= render Forms::TitleComponent.new(icon: "lock-bold", title: "Titre de formulaire")
.col-xs-12
= render Forms::TitleComponent.new(icon: "lock-bold", title: "Titre de formulaire", subtitle: "(avec un soustitre)")
.col-xs-12
= render Forms::CardComponent.new do |component|
= component.with_title(icon: "identification-badge", title: "Co-titulaire du contrat", subtitle: "(Louise Michel)")
= component.with_body do
= form.label "Label", for: :medium_email
= form.text_field :medium_email, placeholder: "Your email"
= form.submit "Ajouter", class: "add-form-card"
= form_with(method: :get) do |form|
.row
.col-xs-6
= form.label "Label", for: :small_email
= form.text_field :small_email, placeholder: "Your email", class: "input-small"
.col-xs-6
= form.label "Label", for: :small_email_disabled
= form.text_field :small_email_disabled, placeholder: "Your disabled email", disabled: true, class: "input-small"
.col-xs-6
= form.label "Label", for: :small_email_error
= form.text_field :small_email_error, placeholder: "Your email in error", class: "error input-small"
.col-xs-6
= form.label :small_email_readonly do
i.ph-lock-bold
| Label
= form.text_field :small_email_readonly, placeholder: "Your read-only email", readonly: true, class: "input-small"
.col-xs-6
= form.label "Label", for: :small_conso
= render Forms::NumberWithUnitComponent.new(name: :small_conso, placeholder: "Consommation", input_class: "input-small", input_unit: "kWh", value: 1337)
.col-xs-6
= form.label "Label", for: :small_email_disabled
= render Forms::NumberWithUnitComponent.new(name: :small_conso_disabled, placeholder: "Consommation", input_class: "input-small", input_unit: "kWh", value: 1337, disabled: true)
.col-xs-6
= form.label "Label", for: :small_conso_error
= render Forms::NumberWithUnitComponent.new(name: :small_conso_error, placeholder: "Consommation", input_class: "input-small", input_unit: "kWh", value: 1337, error: true)
.col-xs-6
= form.label :small_conso_readonly do
i.ph-lock-bold
| Label
= render Forms::NumberWithUnitComponent.new(name: :small_conso_readonly, placeholder: "Consommation", input_class: "input-small", input_unit: "kWh", value: 1337, readonly: true)
.col-xs-12
= form.label "Label", for: :small_search
.input-with-icon
= form.text_field :small_search, placeholder: "Rechercher PDL, Nom de site", class: "input-small"
i.ph-magnifying-glass
.col-xs-12
= form.label "Label", for: :small_collection
= form.collection_select :small_collection, StoryBookController::COMPONENTS, :first, :last,
{}, { class: "input-small" }
.col-xs-6
= form.label "Label", for: :small_number_spinner
= render Forms::SpinnerComponent.new do |spinner|
- spinner.with_input_number_with_unit(name: "surface", placeholder: "Surface", input_unit: "m²", input_class: "input-small")
.col-xs-6
= form.label "Label", for: :small_number_spinner_disabled
= render Forms::SpinnerComponent.new do |spinner|
- spinner.with_input_number_with_unit(name: "surface", placeholder: "Surface", input_unit: "m²", input_class: "input-small", disabled: true)
.col-xs-6
= form.label "Label", for: :small_number_spinner_error
= render Forms::SpinnerComponent.new do |spinner|
- spinner.with_input_number_with_unit(name: "surface", placeholder: "Surface", input_unit: "m²", input_class: "input-small", error: true)
.col-xs-6
= form.label :small_number_spinner_readonly do
i.ph-lock-bold
| Label
= render Forms::SpinnerComponent.new do |spinner|
- spinner.with_input_number_with_unit(name: "surface", placeholder: "Surface", input_unit: "m²", input_class: "input-small", readonly: true)
.col-xs-12.mt-2.mb-2
.checkbox
= form.check_box :small_authorize_halfhour, class: "input-small"
= form.label :small_authorize_halfhour do
| J’autorise l’enregistrement des données par demi-heure sur mon compteur communiquant
.checkbox
= form.check_box :small_authorize_enedis, class: "input-small"
= form.label :small_authorize_enedis do
| J'autorise Enedis à collecter mes données de consommation par demi-heure et à les transmettre à Enercoop
.col-xs-6
= form.label "Label", for: :small_birthday
= form.date_field :small_birthday, class: "input-small"
.col-xs-6
= form.label "Label", for: :small_today_disabled
= form.date_field :small_today_disabled, value: Time.zone.today, class: "input-small", disabled: true
.col-xs-6
= form.label "Label", for: :small_birthday_error
= form.date_field :small_birthday_error, class: "input-small error"
.col-xs-6
= form.label :small_today_readonly do
i.ph-lock-bold
| Label
= form.date_field :small_today_readonly, value: Time.zone.today, class: "input-small", readonly: true
.col-xs-6.mt-2
.radio_button
= form.radio_button :small_unit, :euro, class: "input-small"
= form.label "Euro", for: :small_unit_euro
= form.radio_button :small_unit, :kva, class: "input-small"
= form.label "kVA", for: :small_unit_kva
.col-xs-6.mt-2
.radio_button
= form.radio_button :small_unit_disabled, :euro, class: "input-small", disabled: true
= form.label "Euro", for: :small_unit_disabled_euro
= form.radio_button :small_unit_disabled, :kva, class: "input-small", disabled: true
= form.label "kVA", for: :small_unit_disabled_kva
.col-xs-6.mt-2
/ NOTE: error styling is not supported yet.
/ .radio_button
/ = form.radio_button :small_unit_error, :euro, class: "input-small error"
/ = form.label "Euro", for: :small_unit_error_euro
/ = form.radio_button :small_unit_error, :kva, class: "input-small error"
/ = form.label "kVA", for: :small_unit_error_kva
.col-xs-6.mt-2
/ NOTE: readonly is a nonsens for radio buttons, just use disabled instead.
.radio_button
= form.radio_button :small_unit_readonly, :euro, class: "input-small", disabled: true
= form.label :small_unit_readonly_euro do
i.ph-lock-bold
| Euro
= form.radio_button :small_unit_readonly, :kva, class: "input-small", checked: true, disabled: true
= form.label :small_unit_readonly_kva do
i.ph-lock-bold
| kVA
= form_with(method: :get) do
h3.h6-size J'habite
= render GridTileComponent.new(grid_class: "mb-3") do |grid|
- grid.with_tile(icon_class: "habitation-appartement-enercoop") do |tile|
- tile.with_input_radio(name: :property_type, value: "flat")
- grid.with_tile(icon_class: "habitation-maison-enercoop") do |tile|
- tile.with_input_radio(name: :property_type, value: "house")
- grid.with_tile(icon_class: "habitation-autres-enercoop") do |tile|
- tile.with_input_radio(name: :property_type, value: "other", checked: true)
h3.h6-size Ma maison possède
= render GridTileComponent.new(grid_class: "mb-3") do |grid|
- grid.with_tile(icon_class: "habitation-comble-enercoop", theme: :vert) do |tile|
- tile.with_input_checkbox(name: :facilities, value: "converted_attics")
- grid.with_tile(icon_class: "habitation-etages-enercoop", theme: :jaune) do |tile|
- tile.with_input_checkbox(name: :facilities, value: "multiple_floors_house", checked: true)
- grid.with_tile(icon_class: "habitation-veranda-enercoop", theme: :rouge) do |tile|
- tile.with_input_checkbox(name: :facilities, value: "conservatory")
- grid.with_tile(icon_class: "habitation-garage-enercoop", theme: :turquoise) do |tile|
- tile.with_input_checkbox(name: :facilities, value: "uninsulated_garage", checked: true)
- grid.with_tile(icon_class: "habitation-mitoyen-enercoop", theme: :brun) do |tile|
- tile.with_input_checkbox(name: :facilities, value: "adjoining_wall_house")
- grid.with_tile(icon_class: "habitation-cheminee-enercoop", theme: :brun) do |tile|
- tile.with_input_checkbox(name: :facilities, value: "one_or_more_chimneys_house")
//
// WARN: Obsolete style, please use GridTileComponent instead of `.grid` class and isolated TileComponents
//
h3.h6-size Mon thermostat est réglé
.grid
= render Forms::TileComponent.new(icon_class: "thermometer-simple", tile_class: "grid-1 mb-3", enumerable: false) do |tile|
= tile.with_input_spinner do |spinner|
- spinner.with_input_number_with_unit(\
name: :thermostat_living,
placeholder: "T",
input_unit: "°C",
input_data: { "forms--tile-component-target": "tileInput" },
)
= render Forms::TileComponent.new(icon_class: "thermometer-simple", tile_class: "grid-2 mb-3", enumerable: false, theme: :vert) do |tile|
= tile.with_input_spinner do |spinner|
- spinner.with_input_number_with_unit(\
name: :thermostat_living,
placeholder: "T",
input_unit: "°C",
input_data: { "forms--tile-component-target": "tileInput" },
)
= form_with(method: :get) do |_form|
= render Forms::LeftLabelWithInputComponent.new do |component|
- component.with_label(:hc, "Heures Creuses", sub_label: "12h-16h")
- component.with_input do
= render Forms::NumberWithUnitComponent.new(name: :hc, placeholder: "Consommation", input_unit: "kWh", value: 1337)
= form_with(method: :get) do |form|
= render Forms::InputGroupComponent.new do |group|
- group.with_input do
= form.text_field :code_promo, placeholder: "Code promo"
- group.with_button do
= form.submit "Continuer", class: "btn-secondary"
= render Forms::InputGroupComponent.new do |group|
- group.with_input do
= form.text_field :code_promo, placeholder: "Code promo"
- group.with_button do
= form.submit "Continuer", class: "btn-primary"
= render Forms::InputGroupComponent.new do |group|
- group.with_input do
= form.select :code_promo, placeholder: "Code promo"
- group.with_button do
= form.submit "Continuer", class: "btn-primary"
= render Forms::InputGroupComponent.new do |group|
- group.with_input do
= form.text_field :code_promo, placeholder: "Code promo"
- group.with_button do
= form.submit "OK", class: "btn-primary"