feat: add stacked layout to odyssey_toggle_button

coladarci · claude · coladarci · commit 3f7b59e78da1 · 2026-04-29T10:04:46.000-07:00
Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2026-04-29]
+
+### Added
+
+- `odyssey_toggle_button` now accepts a `layout` attr (`:inline` default, `:stacked` for vertical radio-style list). In stacked mode, options render as a full-width vertical list — each row has a radio circle SVG (filled blue when selected, outlined when not) with the option name to the right and an optional description beneath it. Options support a `description` key for stacked mode.
+
 ## [2026-04-27]
 
 ### Added
diff --git a/demo/lib/demo_web/live/odyssey_showcase_live.ex b/demo/lib/demo_web/live/odyssey_showcase_live.ex
@@ -32,6 +32,7 @@ defmodule DemoWeb.OdysseyShowcaseLive do
       |> assign(:status_selection, "Active")
       |> assign(:size_selection, "Medium")
       |> assign(:channel_selection, :email)
+      |> assign(:stacked_selection, :pre_tax)
       |> assign(:standalone_select_item, nil)
       |> assign(:form_data, form_data)
       |> assign(:form, to_form(form_data, as: "form"))
@@ -96,6 +97,11 @@ defmodule DemoWeb.OdysseyShowcaseLive do
     {:noreply, socket}
   end
 
+  @impl true
+  def handle_event("change_commission_type", %{"value" => option}, socket) do
+    {:noreply, assign(socket, :stacked_selection, option)}
+  end
+
   @impl true
   def handle_event("validate", %{"form" => form_params}, socket) do
     socket =
@@ -326,6 +332,22 @@ defmodule DemoWeb.OdysseyShowcaseLive do
                 tooltip="Select how often you want to receive reports"
               />
             </div>
+
+            <div>
+              <h3 class="text-lg font-medium mb-2">Stacked Layout</h3>
+              <.odyssey_toggle_button
+                layout={:stacked}
+                options={[
+                  %{label: "Pre Tax Percentage Commission", value: :pre_tax, description: "Commission calculated before taxes are applied"},
+                  %{label: "After Tax Percentage Commission", value: :after_tax, description: "Commission calculated after taxes are applied"},
+                  %{label: "Flat Rate Commission", value: :flat_rate, description: "Fixed dollar amount per booking"},
+                  %{label: "Wholesale Pricing", value: :wholesale}
+                ]}
+                selected={@stacked_selection}
+                on_change="change_commission_type"
+              />
+              <p class="text-sm text-gray-600 mt-4">Selected: <strong>{inspect(@stacked_selection)}</strong></p>
+            </div>
           </div>
         </section>
 
diff --git a/lib/peek_app_sdk/ui/odyssey/toggle_button.ex b/lib/peek_app_sdk/ui/odyssey/toggle_button.ex
@@ -51,6 +51,7 @@ defmodule PeekAppSDK.UI.Odyssey.ToggleButton do
   attr(:tooltip, :string, required: false, doc: "optional tooltip text to display next to the label")
   attr(:tooltip_location, :string, default: "right", doc: "tooltip position: top, bottom, left, right")
   attr(:disabled, :boolean, default: false, doc: "disable the toggle button")
+  attr(:layout, :atom, default: :inline, doc: "layout style: :inline (default) or :stacked (vertical radio-style list)")
   attr(:phx_target, :any, required: false, doc: "optional phx-target for LiveComponent integration")
   attr(:rest, :global)
 
@@ -75,6 +76,7 @@ defmodule PeekAppSDK.UI.Odyssey.ToggleButton do
       |> assign_new(:phx_target, fn -> nil end)
       |> assign_new(:label, fn -> nil end)
       |> assign_new(:tooltip, fn -> nil end)
+      |> assign_new(:layout, fn -> :inline end)
 
     ~H"""
     <%= if @label do %>
@@ -100,6 +102,58 @@ defmodule PeekAppSDK.UI.Odyssey.ToggleButton do
   end
 
   # Private function component for the button group to avoid duplication
+  defp do_odyssey_toggle_button(%{layout: :stacked} = assigns) do
+    assigns = assign_new(assigns, :disabled, fn -> false end)
+
+    ~H"""
+    <div class="flex flex-col space-y-4" role="group">
+      <button
+        :for={option <- @options}
+        type="button"
+        disabled={@disabled}
+        value={to_string(option_value(option))}
+        phx-click={
+          if @disabled || to_string(@selected) == to_string(option_value(option)),
+            do: nil,
+            else: @on_change
+        }
+        phx-target={@phx_target}
+        class={[
+          "flex items-start gap-4 text-left w-full",
+          @disabled && "opacity-50 cursor-not-allowed",
+          !@disabled && to_string(@selected) != to_string(option_value(option)) && "cursor-pointer"
+        ]}
+        {@rest}
+      >
+        <%= if to_string(@selected) == to_string(option_value(option)) do %>
+          <svg class="mt-0.5 shrink-0" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="0.5" y="0.5" width="27" height="27" rx="13.5" fill="#F2F3FA"/>
+            <rect x="0.5" y="0.5" width="27" height="27" rx="13.5" stroke="#DADCE7"/>
+            <path d="M14.0058 22C12.9047 22 11.8681 21.7917 10.8958 21.375C9.92361 20.9583 9.07292 20.3854 8.34375 19.6562C7.61458 18.9271 7.04167 18.0767 6.625 17.105C6.20833 16.1334 6 15.0952 6 13.9905C6 12.8857 6.20833 11.8507 6.625 10.8854C7.04167 9.92014 7.61458 9.07292 8.34375 8.34375C9.07292 7.61458 9.92332 7.04167 10.895 6.625C11.8666 6.20833 12.9048 6 14.0095 6C15.1143 6 16.1493 6.20833 17.1146 6.625C18.0799 7.04167 18.9271 7.61458 19.6562 8.34375C20.3854 9.07292 20.9583 9.92169 21.375 10.8901C21.7917 11.8585 22 12.8932 22 13.9943C22 15.0953 21.7917 16.1319 21.375 17.1042C20.9583 18.0764 20.3854 18.9271 19.6562 19.6562C18.9271 20.3854 18.0783 20.9583 17.1099 21.375C16.1415 21.7917 15.1068 22 14.0058 22Z" fill="#3957EA"/>
+          </svg>
+        <% else %>
+          <svg class="mt-0.5 shrink-0" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="0.5" y="0.5" width="27" height="27" rx="13.5" fill="#F2F3FA"/>
+            <rect x="0.5" y="0.5" width="27" height="27" rx="13.5" stroke="#DADCE7"/>
+          </svg>
+        <% end %>
+        <div class="flex flex-col">
+          <span class={[
+            "font-medium text-base",
+            to_string(@selected) == to_string(option_value(option)) && "text-gray-900",
+            to_string(@selected) != to_string(option_value(option)) && "text-gray-700"
+          ]}>
+            {option_text(option)}
+          </span>
+          <span :if={option_description(option)} class="text-sm text-gray-500 mt-0.5">
+            {option_description(option)}
+          </span>
+        </div>
+      </button>
+    </div>
+    """
+  end
+
   defp do_odyssey_toggle_button(assigns) do
     assigns = assign_new(assigns, :disabled, fn -> false end)
 
@@ -148,4 +202,7 @@ defmodule PeekAppSDK.UI.Odyssey.ToggleButton do
 
   def option_icon(%{icon: icon}), do: icon
   def option_icon(_option), do: nil
+
+  def option_description(%{description: description}), do: description
+  def option_description(_option), do: nil
 end
diff --git a/lib/peek_app_sdk/ui/odyssey/toggle_button_input_component.ex b/lib/peek_app_sdk/ui/odyssey/toggle_button_input_component.ex
@@ -72,6 +72,7 @@ defmodule PeekAppSDK.UI.Odyssey.ToggleButtonInputComponent do
         tooltip={assigns[:tooltip]}
         tooltip_location={assigns[:tooltip_location] || "right"}
         disabled={assigns[:disabled] || false}
+        layout={assigns[:layout] || :inline}
         {@rest}
       />
     </div>
