chore: update design system docs

website/content/components/checkbox-group.md

@@ -44,7 +44,7 @@ The components we provide use wrap checkbox groups in a fieldset. In this contex
 When using with Rails we recommend using the form builder method provided by `CitizensAdviceComponents::FormBuilder`.
 
 ```rb
-cads_collection_checkboxes(attribute, collection:, value_method:, text_method:, options = {})
+cads_collection_checkboxes(attribute, collection, value_method, text_method, options = {}, html_options = {})
 ```
 
 The method works similarly to the default [`collection_checkboxes` helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-collection_checkboxes).
@@ -53,15 +53,15 @@ The method works similarly to the default [`collection_checkboxes` helper](https
 <%%= form_with model: @model, url: "/" do |form| %>
   <%%= form.cads_collection_checkboxes(
     :example,
-    collection: [
+    [
       ["option_1", "Option 1"],
       ["option_2", "Option 2"],
       ["option_3", "Option 3"],
       ["option_4", "Option 4"],
       ["option_5", "Option 5"],
     ],
-    text_method: :first,
-    value_method: :last,
+    :id,
+    :name,
     hint: "Example hint text",
     required: true
   ) %>
@@ -74,16 +74,14 @@ But this can also work with any collection:
 <%%= form_with model: @model, url: "/" do |form| %>
   <%%= form.cads_collection_checkboxes(
     :example,
-    collection: Locations.all,
-    text_method: :id,
-    value_method: :name,
+    Locations.all,
+    :id,
+    :name,
     hint: "Example hint text"
   ) %>
 <%% end %>
 ```
 
-The `:value_method` and `:text_method` parameters are methods to be called on each member of `collection`. The return values are used as the value attribute and contents of each checkbox.
-
 The method accepts an `options` hash with the following optional parameters:
 
 - `:label` - The text for the label associated with the input. Defaults to using translations.

website/content/components/radio-group.md

@@ -56,7 +56,7 @@ The components we provide use wrap radio groups in a fieldset. In this context t
 When using with Rails we recommend using the form builder method provided by `CitizensAdviceComponents::FormBuilder`.
 
 ```rb
-cads_collection_radio_buttons(attribute, collection:, value_method:, text_method:, options = {})
+cads_collection_radio_buttons(attribute, collection, value_method, text_method, options = {}, html_options = {})
 ```
 
 The method works similarly to the default [`collection_radio_buttons` helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-collection_radio_buttons).
@@ -65,15 +65,15 @@ The method works similarly to the default [`collection_radio_buttons` helper](ht
 <%%= form_with model: @model, url: "/" do |form| %>
   <%%= form.cads_collection_radio_buttons(
     :example,
-    collection: [
+    [
       ["option_1", "Option 1"],
       ["option_2", "Option 2"],
       ["option_3", "Option 3"],
       ["option_4", "Option 4"],
       ["option_5", "Option 5"],
     ],
-    text_method: :first,
-    value_method: :last,
+    :id,
+    :name,
     hint: "Example hint text",
     required: true
   ) %>
@@ -86,16 +86,14 @@ But this can also work with any collection:
 <%%= form_with model: @model, url: "/" do |form| %>
   <%%= form.cads_collection_radio_buttons(
     :example,
-    collection: Locations.all,
-    text_method: :id,
-    value_method: :name,
+    Locations.all,
+    :id,
+    :name,
     hint: "Example hint text"
   ) %>
 <%% end %>
 ```
 
-The `:value_method` and `:text_method` parameters are methods to be called on each member of `collection`. The return values are used as the value attribute and contents of each `<option>` tag, respectively.
-
 The method accepts an `options` hash with the following optional parameters:
 
 - `:label` - The text for the label associated with the input. Defaults to using translations.

website/content/components/select.md

@@ -28,7 +28,7 @@ In those cases an alternative could be the [radio group](/components/radio-group
 When using with Rails we recommend using the form builder method provided by `CitizensAdviceComponents::FormBuilder`.
 
 ```rb
-cads_collection_select(attribute, collection:, value_method:, text_method:, options = {})
+cads_collection_select(attribute, collection, value_method, text_method, options = {}, html_options = {})
 ```
 
 The method works similarly to the default [`collection_select` helper](https://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-collection_select).
@@ -37,15 +37,15 @@ The method works similarly to the default [`collection_select` helper](https://a
 <%%= form_with model: @model, url: "/" do |form| %>
   <%%= form.cads_collection_select(
     :example,
-    collection: [
+    [
       ["option_1", "Option 1"],
       ["option_2", "Option 2"],
       ["option_3", "Option 3"],
       ["option_4", "Option 4"],
       ["option_5", "Option 5"],
     ],
-    text_method: :first,
-    value_method: :last,
+    :id,
+    :name,
     hint: "Example hint text",
     required: true
   ) %>
@@ -58,16 +58,14 @@ But this can also work with any collection:
 <%%= form_with model: @model, url: "/" do |form| %>
   <%%= form.cads_collection_select(
     :example,
-    collection: Locations.all,
-    text_method: :id,
-    value_method: :name,
+    Locations.all,
+    :id,
+    :name,
     hint: "Example hint text"
   ) %>
 <%% end %>
 ```
 
-The `:value_method` and `:text_method` parameters are methods to be called on each member of `collection`. The return values are used as the value attribute and contents of each `<option>` tag, respectively.
-
 The method accepts an `options` hash with the following optional parameters:
 
 - `:label` - The text for the label associated with the input. Defaults to using translations.

website/content/components/text-input.md

@@ -70,7 +70,7 @@ With options:
     hint: "Example hint",
     required: true,
     width: :sixteen_chars,
-    additional_attributes: { "data-testid": "example" }
+    "data-testid": "example"
   ) %>
 <%% end %>
 ```
@@ -83,7 +83,7 @@ The method accepts the following optional parameters:
 - `:type` - Input type. Defaults to `:text`
 - `:width` - Predefined width, one of: `:two_char`, `:four_char`, `:eight_char`, `:sixteen_char`
 - `:page_heading` - Wraps the `<label>` in a `<h1>`
-- `:additional_attributes` - Hash of additional attributes rendered onto the input, e.g. `{ autocomplete: "name" }`
+- additional attributes can be added directly after the other attributes e.g. `autocomplete: "name"`
 
 ### View component version
 

website/content/components/textarea.md

@@ -49,7 +49,7 @@ With options:
     hint: "Example hint",
     required: true,
     rows: 5,
-    additional_attributes: { "data-testid": "example" }
+    "data-testid": "example"
   ) %>
 <%% end %>
 ```
@@ -61,7 +61,7 @@ The method accepts the following optional parameters:
 - `:required` - Boolean indicating the field is optional (i.e. not required)
 - `:rows` - The number of rows for the textarea. Defaults to `8`
 - `:page_heading` - Wraps the `<label>` in a `<h1>`
-- `:additional_attributes` - Hash of additional attributes rendered onto the input, e.g. `{ autocomplete: "name" }`
+- additional attributes can be added directly after the other attributes e.g. `autocomplete: "name"`
 
 ### View component version
 

website/content/examples/checkbox_group/default.html.erb

@@ -7,8 +7,8 @@ form: true
 <%= form_with model: @model, url: "/" do |form| %>
   <%= form.cads_collection_checkboxes(
     :checkbox_group,
-    collection: @model.options,
-    text_method: :name,
-    value_method: :id
+    @model.options,
+    :id,
+    :name
   ) %>
 <% end %>

website/content/examples/checkbox_group/error_message.html.erb

@@ -7,9 +7,9 @@ form: true
 <%= form_with model: @model, url: "/" do |form| %>
   <%= form.cads_collection_checkboxes(
     :checkbox_group_required,
-    collection: @model.options,
-    text_method: :name,
-    value_method: :id,
+    @model.options,
+    :id,
+    :name,
     required: true
   ) %>
 <% end %>

website/content/examples/checkbox_group/hint.html.erb

@@ -7,9 +7,9 @@ form: true
 <%= form_with model: @model, url: "/" do |form| %>
   <%= form.cads_collection_checkboxes(
     :checkbox_group_hint,
-    collection: @model.options,
-    text_method: :name,
-    value_method: :id,
+    @model.options,
+    :id,
+    :name,
     hint: "Example hint text"
   ) %>
 <% end %>

website/content/examples/checkbox_group/page_heading.html.erb

@@ -7,9 +7,9 @@ form: true
 <%= form_with model: @model, url: "/" do |form| %>
   <%= form.cads_collection_checkboxes(
     :checkbox_group,
-    collection: @model.options,
-    text_method: :name,
-    value_method: :id,
+    @model.options,
+    :id,
+    :name,
     page_heading: true
   ) %>
 <% end %>

website/content/examples/radio_group/default.html.erb

@@ -6,8 +6,8 @@ title: Default
 <%= form_with model: @model, url: "/" do |form| %>
   <%= form.cads_collection_radio_buttons(
     :radios,
-    collection: @model.options,
-    text_method: :name,
-    value_method: :id
+    @model.options,
+    :id,
+    :name
   ) %>
 <% end %>

website/content/examples/radio_group/error_message.html.erb

@@ -6,8 +6,8 @@ title: With error message
 <%= form_with model: @model, url: "/" do |form| %>
   <%= form.cads_collection_radio_buttons(
     :radios_required,
-    collection: @model.options,
-    text_method: :name,
-    value_method: :id
+    @model.options,
+    :id,
+    :name
   ) %>
 <% end %>

website/content/examples/radio_group/hint.html.erb

@@ -6,9 +6,9 @@ title: With hint
 <%= form_with model: @model, url: "/" do |form| %>
   <%= form.cads_collection_radio_buttons(
     :radios_hint,
-    collection: @model.options,
-    text_method: :name,
-    value_method: :id,
+    @model.options,
+    :id,
+    :name,
     hint: "Example hint text"
   ) %>
 <% end %>

website/content/examples/radio_group/inline.html.erb

@@ -6,9 +6,9 @@ title: Inline
 <%= form_with model: @model, url: "/" do |form| %>
   <%= form.cads_collection_radio_buttons(
     :radios_inline,
-    collection: @model.options.take(2),
-    text_method: :name,
-    value_method: :id,
+    @model.options.take(2),
+    :id,
+    :name,
     layout: :inline
   ) %>
 <% end %>

website/content/examples/radio_group/page_heading.html.erb

@@ -6,9 +6,9 @@ title: With page heading
 <%= form_with model: @model, url: "/" do |form| %>
   <%= form.cads_collection_radio_buttons(
     :radios_page_heading,
-    collection: @model.options,
-    text_method: :name,
-    value_method: :id,
+    @model.options,
+    :id,
+    :name,
     page_heading: true
   ) %>
 <% end %>

website/content/examples/radio_group/small.html.erb

@@ -6,9 +6,9 @@ title: Small
 <%= form_with model: @model, url: "/" do |form| %>
   <%= form.cads_collection_radio_buttons(
     :radios_small,
-    collection: @model.options,
-    text_method: :name,
-    value_method: :id,
+    @model.options,
+    :id,
+    :name,
     size: :small
   ) %>
 <% end %>

website/content/examples/select/default.html.erb

@@ -7,8 +7,8 @@ form: true
 <%= form_with model: @model, url: "/" do |form| %>
   <%= form.cads_collection_select(
     :select,
-    collection: @model.select_options,
-    text_method: :name,
-    value_method: :id
+    @model.select_options,
+    :id,
+    :name
   ) %>
 <% end %>

website/content/examples/select/with_error.html.erb

@@ -6,8 +6,8 @@ title: with error
 <%= form_with model: @model, url: "/" do |form| %>
   <%= form.cads_collection_select(
     :select_required,
-    collection: @model.select_options,
-    text_method: :name,
-    value_method: :id
+    @model.select_options,
+    :id,
+    :name
   ) %>
 <% end %>

website/content/examples/select/with_hint_text.html.erb

@@ -6,9 +6,9 @@ title: with hint
 <%= form_with model: @model, url: "/" do |form| %>
   <%= form.cads_collection_select(
     :select_hint,
-    collection: @model.select_options,
-    text_method: :name,
-    value_method: :id,
+    @model.select_options,
+    :id,
+    :name,
     hint: "Example hint text"
   ) %>
 <% end %>

website/content/guides/rails-form-builder.md

@@ -204,14 +204,14 @@ From here you can use the available form helpers to render each field:
 
 <%%= f.cads_collection_select(
   :currency,
-  collection: [
+  [
     ["Choose an option", ""],
     ["GBP", "GBP"],
     ["EUR", "EUR"],
     ["USD", "USD"]
   ],
-  text_method: :first,
-  value_method: :last,
+  :id,
+  :name,
   required: true
 )%>
 
@@ -226,9 +226,9 @@ From here you can use the available form helpers to render each field:
 
 <%%= f.cads_collection_radio_buttons(
   :contacted_trader,
-  collection: [["Yes", "yes"], ["No", "no"]],
-  text_method: :first,
-  value_method: :last,
+  [["Yes", "yes"], ["No", "no"]],
+  :id,
+  :name,
   required: true
 )%>
 
@@ -245,4 +245,4 @@ Putting this all together this should look something like this:
 
 - Experiment with different options to each of the form helpers. You can find more detail on the options available in the [component guides](/components).
 - Try defining some additional validations and seeing how that corresponds to the locale file
-- Look at the additonal examples in the demo app
+- Look at the additional examples in the demo app