docbrown/app/views/admin/settings/forms/_user_experience.html.erb

<%= form_for(Settings::UserExperience.new,
             url: admin_settings_user_experiences_path,
             html: { data: { action: "submit->config#updateConfigurationSettings" } }) do |f| %>
  <details class="crayons-card">
    <summary class="crayons-subtitle-2 p-6">User Experience and Brand</summary>
    <div class="p-6 pt-0">
      <fieldset class="grid gap-4">
        <div class="crayons-field">
          <%= admin_config_label :feed_style, model: Settings::UserExperience %>
          <%= admin_config_description Constants::Settings::UserExperience.details[:feed_style][:description] %>
          <%= select_tag "settings_user_experience[feed_style]",
                         options_for_select(Settings::UserExperience::FEED_STYLES, Settings::UserExperience.feed_style),
                         multiple: false,
                         class: "crayons-select" %>
        </div>
        <div class="crayons-field">
          <%= admin_config_label :feed_strategy, model: Settings::UserExperience %>
          <%= admin_config_description Constants::Settings::UserExperience.details[:feed_strategy][:description] %>
          <%= select_tag "settings_user_experience[feed_strategy]",
                         options_for_select(Settings::UserExperience::FEED_STRATEGIES, Settings::UserExperience.feed_strategy),
                         multiple: false,
                         class: "crayons-select" %>
        </div>
        <div class="crayons-field">
          <%= admin_config_label :cover_image_height, model: Settings::UserExperience %>
          <%= admin_config_description Constants::Settings::UserExperience.details[:cover_image_height][:description] %>
          <%= f.number_field :cover_image_height,
                             class: "crayons-textfield",
                             value: Settings::UserExperience.cover_image_height,
                             placeholder: Constants::Settings::UserExperience.details[:cover_image_height][:placeholder] %>
        </div>
        <div class="crayons-field">
          <%= admin_config_label :cover_image_fit, model: Settings::UserExperience %>
          <%= admin_config_description Constants::Settings::UserExperience.details[:cover_image_fit][:description] %>
          <%= select_tag "settings_user_experience[cover_image_fit]",
                         options_for_select(Settings::UserExperience::COVER_IMAGE_FITS, Settings::UserExperience.cover_image_fit),
                         multiple: false,
                         class: "crayons-select" %>
        </div>
        <div class="crayons-field">
          <%= admin_config_label :tag_feed_minimum_score, model: Settings::UserExperience %>
          <%= admin_config_description Constants::Settings::UserExperience.details[:tag_feed_minimum_score][:description] %>
          <%= f.number_field :tag_feed_minimum_score,
                             class: "crayons-textfield",
                             value: Settings::UserExperience.tag_feed_minimum_score,
                             placeholder: Constants::Settings::UserExperience.details[:tag_feed_minimum_score][:placeholder] %>
        </div>
        <div class="crayons-field">
          <%= admin_config_label :home_feed_minimum_score, model: Settings::UserExperience %>
          <%= admin_config_description Constants::Settings::UserExperience.details[:home_feed_minimum_score][:description] %>
          <%= f.number_field :home_feed_minimum_score,
                             class: "crayons-textfield",
                             value: Settings::UserExperience.home_feed_minimum_score,
                             placeholder: Constants::Settings::UserExperience.details[:home_feed_minimum_score][:placeholder] %>
        </div>
        <div class="crayons-field">
          <%= admin_config_label :index_minimum_score, model: Settings::UserExperience %>
          <%= admin_config_description Constants::Settings::UserExperience.details[:index_minimum_score][:description] %>
          <%= f.number_field :index_minimum_score,
                             class: "crayons-textfield",
                             value: Settings::UserExperience.index_minimum_score,
                             placeholder: Constants::Settings::UserExperience.details[:index_minimum_score][:placeholder] %>
        </div>
       <div class="crayons-field">
          <%= admin_config_label :index_minimum_date, model: Settings::UserExperience %>
          <%= admin_config_description Constants::Settings::UserExperience.details[:index_minimum_date][:description] %>
          <%= f.number_field :index_minimum_date,
                             class: "crayons-textfield",
                             value: Settings::UserExperience.index_minimum_date,
                             placeholder: Constants::Settings::UserExperience.details[:index_minimum_date][:placeholder] %>
        </div>
        <div class="crayons-field">
          <%= admin_config_label :default_font, model: Settings::UserExperience %>
          <%= admin_config_description Constants::Settings::UserExperience.details[:default_font][:description] %>
          <%= select_tag "settings_user_experience[default_font]",
                         options_for_select(
                           [%w[sans-serif sans_serif], %w[serif serif], %w[open-dyslexic open_dyslexic]],
                           Settings::UserExperience.default_font,
                         ),
                         multiple: false,
                         class: "crayons-select" %>
        </div>
        <div class="crayons-field">
          <%= admin_config_label :default_locale, model: Settings::UserExperience %>
          <%= admin_config_description Constants::Settings::UserExperience.details[:default_locale][:description] %>
          <%= select_tag "settings_user_experience[default_locale]",
                         options_for_select(
                           [%w[English en], %w[Français fr]],
                           Settings::UserExperience.default_locale,
                         ),
                         multiple: false,
                         class: "crayons-select" %>
        </div>
        <div class="crayons-field">
          <%= admin_config_label :primary_brand_color_hex, model: Settings::UserExperience %>
          <%= admin_config_description Constants::Settings::UserExperience.details[:primary_brand_color_hex][:description], id: "brand-color-description" %>
          <%= f.text_field :primary_brand_color_hex, class: "crayons-textfield", value: Settings::UserExperience.primary_brand_color_hex, placeholder: Constants::Settings::UserExperience.details[:primary_brand_color_hex][:placeholder], pattern: "^#+([a-fA-F0-9]{6})$",
                                                     data: { color_picker: true, label_text: "Primary brand color hex" }, aria: { describedby: "brand-color-description" } %>
        </div>
        <div class="crayons-field crayons-field--checkbox">
          <%= f.check_box :public, checked: Settings::UserExperience.public, class: "crayons-checkbox" %>
          <div class="mt-0">
            <%= admin_config_label :public, model: Settings::UserExperience %>
            <p class="crayons-field__description">
            Are most of the site pages (e.g. posts, profiles) public? <strong>Please take precaution when changing this setting.</strong>
            </p>
          </div>
        </div>
        <div class="crayons-field crayons-field--checkbox">
          <%= f.check_box :display_in_directory, checked: Settings::UserExperience.display_in_directory, class: "crayons-checkbox" %>
          <div class="mt-0">
            <%= admin_config_label :display_in_directory, model: Settings::UserExperience %>
            <p class="crayons-field__description">
              Do you want this Forem to be displayed in the <a href="https://discover.forem.com" target="_blank">Forem Directory</a>?
            </p>
          </div>
        </div>
      </fieldset>
      <%= render "update_setting_button", f: f %>
    </div>
  </details>
<% end %>
</div>
<%= javascript_packs_with_chunks_tag "enhanceColorPickers", defer: true %>