Merge pull request #6048 from thejonroberts/contact-form-refactor

Case Contact Form Overhaul

app/assets/stylesheets/base/variables.scss

@@ -7,7 +7,20 @@ $sidebar-active: #365CF5;
 $sidebar-dark: #1A2142;
 
 :root {
- --dark: #262d3f; 
+ --casa-red: #D50100;
+ --casa-primary-blue: #4A6CF7;
+
+ --gunmetal: #262D3F;
+ --dark-gunmetal: #212529;
+ --dark: #262d3f;
+ --dark-electric-blue: #5D657B;
  --gray: #5d657b;
+ --dark-gray: #AAAAAA;
+ --gray-80: #CCCCCC;
  --silver: #D9D9D9;
+
+ --inactive: #9AA4CA;
+
+ --input-placeholder-text: var(--gray);
+ --input-border-color: var(--gray-80);
 }

app/assets/stylesheets/pages/case_contacts.scss

@@ -1,16 +1,7 @@
-
-fieldset {
- border: 1px double #CCC;
-}
-
 .slide-container {
  padding: 0rem 1rem;
 }
 
-legend {
- font-size: small;
-}
-
 .slider {
  display: inline;
 }
@@ -90,7 +81,7 @@ legend {
  }
  }
  }
- 
+
 .other-expenses li {
  margin-bottom: .2rem;
 }
@@ -118,7 +109,7 @@ legend {
  display: flex;
  align-items: center;
  }
- 
+
 .dollar-sign .other-expense-amount {
  position: relative;
  padding-left: 32px;
@@ -135,7 +126,7 @@ legend {
  left: 28px;
  z-index: 100;
 }
- 
+
 .pr-7 {
  padding-right: 1.5rem !important;
  padding-left: 2.5rem !important;

app/assets/stylesheets/pages/case_contacts_form.scss

@@ -1,31 +1,151 @@
 @use "../base/breakpoints.scss" as screen-sizes;
 
-.case-contacts-form {
- &-buttons {
- display: flex;
- justify-content: flex-end;
- gap: 10px;
+#case-contact-form {
+ color: var(--gunmetal);
 
- @media only screen and (max-width: screen-sizes.$mobile) {
- & > a, & > button {
- flex-grow: 1;
+ & section {
+ background: var(--white, #FFFFFF);
+ border: 1px solid var(--form-element-stroke, #E5E5E5);
+ border-radius: 10px;
+ box-shadow: 0px 0px 5px 0px #1A252F0D;
+ margin-bottom: 30px;
+ padding: 30px 20px;
+ }
+
+ & h2 {
+ font-size: 28px;
+ margin-bottom: 24px;
+ }
+
+ & h3 {
+ font-size: 16px;
+ }
+
+ & legend {
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 19px;
+ color: var(--dark-electric-blue);
+ }
+
+ & label {
+ font-size: 16px;
+ font-weight: 500;
+ line-height: 19px;
+ }
+
+ & input,
+ textarea,
+ select {
+ border: 1px solid var(--input-border-color);
+
+ &::placeholder {
+ color: var(--input-placeholder-text);
+ opacity: 1;
+ }
+ }
+
+ & input[type="text"],
+ input[type="date"],
+ input[type="number"],
+ textarea,
+ select {
+ padding: 16px;
+ }
+
+ & .form-check {
+ margin-left: 0px;
+ padding-left: 0px;
+
+ & input {
+ width: 20px;
+ height: 20px;
+ margin-left: 0px;
+ margin-right: 3px;
+ float: none;
+
+ &:checked {
+ background-color: var(--casa-primary-blue);
+ border-color: var(--casa-primary-blue);
+ }
+
+ &[type="checkbox"] + label {
+ padding-top: 5px;
+ font-weight: 300;
  }
+
+ &[type="radio"] + label {
+ padding-top: 1px;
+ font-size: 16px;
+ font-weight: 300;
+ line-height: 25px;
+ color: var(--dark-electric-blue)
+ }
+ }
+
+ label {
+ font-size: 16px;
+ font-weight: 600;
  }
  }
 
- &-checkbox {
- border-color: #757575;
+ & button {
+ --bs-link-color: var(--casa-primary-blue);
+
+ &.btn-link {
+ text-decoration: none;
+ padding: 0px;
+ }
  }
 
- &-title {
- @media only screen and (max-width: screen-sizes.$mobile) {
- font-size: 28px;
- } 
+ & .row {
+ --bs-gutter-x: .5rem;
+ }
+
+ & #contact-form-types {
+ --group-width: 250px;
+
+ columns: var(--group-width);
+
+ & fieldset {
+ display: inline-block;
+ width: var(--group-width);
+ margin-bottom: .25rem;
+
+ & .form-check {
+ & label {
+ display: inline;
+ color: var(--dark);
+ font-weight: 400;
+ color: var(--dark-gunmetal);
+ }
+
+ & small {
+ display: block;
+ margin-left: 28px;
+ font-style: italic;
+ font-weight: 300;
+ color: var(--dark-electric-blue);
+ }
+ }
+ }
+ }
+
+ & .input-group-text {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
  }
 
- &-subtitle {
+ & #contact-form-action-buttons {
+ display: flex;
+ justify-content: flex-end;
+ gap: 10px;
+
  @media only screen and (max-width: screen-sizes.$mobile) {
- font-size: 24px;
- } 
+ & > a, & > button {
+ flex-grow: 1;
+ }
+ }
  }
-}
+}
+

app/assets/stylesheets/shared/form.scss

@@ -33,9 +33,3 @@ form {
  display: initial;
 }
 
-.details__topics-label {
- span {
- display: initial;
- }
-
-}

app/components/form/hour_minute_duration_component.html.erb

@@ -1,20 +1,18 @@
-<div class="d-flex flex-column flex-lg-row gap-2">
- <div class="col input-style-1">
+<div class="row input-style-1">
+ <div class="col-12 col-md">
  <%= @form.label :duration_hours, "Hour(s)" %>
  <%= @form.number_field :duration_hours,
  min: 0,
  class: "form-control",
- size: "10",
  style: "background:white",
  value: @hour_value,
  required: true %>
  </div>
- <div class="col input-style-1">
+ <div class="col-12 col-md">
  <%= @form.label :duration_minutes, "Minute(s)" %>
  <%= @form.number_field :duration_minutes,
  min: 0,
  class: "form-control",
- size: "10",
  style: "background:white",
  value: @minute_value,
  required: true %>

app/components/form/multiple_select_component.html.erb

@@ -2,6 +2,7 @@
  data-controller="multiple-select"
  data-multiple-select-options-value="<%= @options %>"
  data-multiple-select-selected-items-value="<%= @selected_items %>"
+ data-multiple-select-placeholder-term-value="<%= @placeholder_term %>"
  data-multiple-select-with-options-value="true">
 
  <template data-multiple-select-target="option">

app/components/form/multiple_select_component.rb

@@ -1,11 +1,12 @@
 # frozen_string_literal: true
 
 class Form::MultipleSelectComponent < ViewComponent::Base
- def initialize(form:, name:, options:, selected_items:, render_option_subtext: false)
+ def initialize(form:, name:, options:, selected_items:, render_option_subtext: false, placeholder_term: nil)
  @form = form
  @name = name
  @options = options.to_json
  @selected_items = selected_items
  @render_option_subtext = render_option_subtext
+ @placeholder_term = placeholder_term
  end
 end

app/controllers/additional_expenses_controller.rb

@@ -0,0 +1,30 @@
+class AdditionalExpensesController < ApplicationController
+ before_action :force_json_format
+
+ def create
+ @additional_expense = AdditionalExpense.new(additional_expense_params)
+ authorize @additional_expense
+
+ if @additional_expense.save
+ render json: @additional_expense.as_json, status: :created
+ else
+ render json: @additional_expense.errors.as_json, status: :unprocessable_entity
+ end
+ end
+
+ def destroy
+ @additional_expense = AdditionalExpense.find(params[:id])
+ authorize @additional_expense
+
+ @additional_expense.destroy!
+
+ head :no_content
+ end
+
+ private
+
+ def additional_expense_params
+ params.require(:additional_expense)
+ .permit(:case_contact_id, :other_expense_amount, :other_expenses_describe)
+ end
+end