Add select on cards form to select the number of columns

app/controllers/admin/widget/cards_controller.rb

@@ -45,6 +45,7 @@ class Admin::Widget::CardsController < Admin::BaseController
 
     params.require(:widget_card).permit(
       :link_url, :button_text, :button_url, :alignment, :header, :site_customization_page_id,
+      :columns,
       translation_params(Widget::Card),
       image_attributes: image_attributes
     )

app/views/admin/widget/cards/_form.html.erb

@@ -20,6 +20,14 @@
     <%= f.text_field :link_url %>
   </div>
 
+  <% unless @card.header? %>
+    <%= f.label :columns %>
+    <p class="help-text"><%= t("admin.site_customization.pages.cards.columns_help") %></p>
+    <div class="small-12 medium-4 large-2">
+      <%= f.select :columns, (1..12), label: false %>
+    </div>
+  <% end %>
+
   <%= f.hidden_field :header, value: @card.header? %>
   <%= f.hidden_field :site_customization_page_id, value: @card.site_customization_page_id %>
 

config/locales/en/activerecord.yml

@@ -301,6 +301,7 @@ en:
         description: Description
         link_text: Link text
         link_url: Link URL
+        columns: Number of columns
       widget/card/translation:
         label: Label (optional)
         title: Title

config/locales/en/admin.yml

@@ -1461,6 +1461,7 @@ en:
           description: Description
           link_text: Link text
           link_url: Link URL
+          columns_help: "Width of the card in number of columns. On mobile screens it's always a width of 100%."
           create:
             notice: "Success"
           update:

config/locales/es/activerecord.yml

@@ -301,6 +301,7 @@ es:
         description: Descripción
         link_text: Texto del enlace
         link_url: URL del enlace
+        columns: Número de columnas
       widget/card/translation:
         label: Etiqueta (opcional)
         title: Título

config/locales/es/admin.yml

@@ -1461,6 +1461,7 @@ es:
           description: Descripción
           link_text: Texto del enlace
           link_url: URL del enlace
+          columns_help: "Ancho de la tarjeta en número de columnas. En pantallas móviles siempre es un ancho del 100%."
     homepage:
       title: Título
       description: Los módulos activos aparecerán en la homepage en el mismo orden que aquí.

spec/features/admin/widgets/cards_spec.rb

@@ -131,7 +131,7 @@ feature 'Cards' do
     end
 
     context "Page card" do
-      let!(:custom_page) { create(:site_customization_page) }
+      let!(:custom_page) { create(:site_customization_page, :published) }
 
       scenario "Create", :js do
         visit admin_site_customization_pages_path
@@ -145,6 +145,20 @@ feature 'Cards' do
         expect(page).to have_content "Card for a custom page"
       end
 
+      scenario "Show" do
+        card_1 = create(:widget_card, page: custom_page, title: "Card large", columns: 8)
+        card_2 = create(:widget_card, page: custom_page, title: "Card medium", columns: 4)
+        card_3 = create(:widget_card, page: custom_page, title: "Card small", columns: 2)
+
+        visit (custom_page).url
+
+        expect(page).to have_css(".card", count: 3)
+
+        expect(page).to have_css("#widget_card_#{card_1.id}.medium-8")
+        expect(page).to have_css("#widget_card_#{card_2.id}.medium-4")
+        expect(page).to have_css("#widget_card_#{card_3.id}.medium-2")
+      end
+
       scenario "Edit", :js do
         create(:widget_card, page: custom_page, title: "Original title")