feat: button component (#38)

* feat: button component

* fix:code quality

* fix:tests

* fix:tests

* feat: add primary brand color to theme

* fix: resolve conflicts

Author: EdroCode

assets/css/app.css

@@ -10,6 +10,12 @@
    The heroicons installation itself is managed by your mix.exs */
 @plugin "../vendor/heroicons";
 
+
+@theme {
+  --color-primary: #ee7749;
+}
+
+
 /* Add variants based on LiveView classes */
 @custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &);
 @custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &);

lib/yearbook_web/components/core_components.ex

@@ -89,32 +89,35 @@ defmodule YearbookWeb.CoreComponents do
       <.button phx-click="go" variant="primary">Send!</.button>
       <.button navigate={~p"/"}>Home</.button>
   """
-  attr :rest, :global, include: ~w(href navigate patch method download name value disabled)
-  attr :class, :string
-  attr :variant, :string, values: ~w(primary)
+  attr :type, :string, default: "button"
+  attr :class, :string, default: ""
+  attr :variant, :string, default: "primary", values: ~w(primary secondary)
+  attr :rest, :global, include: ~w(disabled form name value)
+
   slot :inner_block, required: true
 
-  def button(%{rest: rest} = assigns) do
-    variants = %{"primary" => "btn-primary", nil => "btn-primary btn-soft"}
+  def button(assigns) do
+    ~H"""
+    <button
+      type={@type}
+      class={[
+        @class,
+        variant_classes(@variant)
+      ]}
+      {@rest}
+    >
+      {render_slot(@inner_block)}
+    </button>
+    """
+  end
 
-    assigns =
-      assign_new(assigns, :class, fn ->
-        ["btn", Map.fetch!(variants, assigns[:variant])]
-      end)
+  # Variant classes
+  defp variant_classes("primary") do
+    "rounded-xl bg-primary p-4 font-semibold tracking-wider text-white cursor-pointer"
+  end
 
-    if rest[:href] || rest[:navigate] || rest[:patch] do
-      ~H"""
-      <.link class={@class} {@rest}>
-        {render_slot(@inner_block)}
-      </.link>
-      """
-    else
-      ~H"""
-      <button class={@class} {@rest}>
-        {render_slot(@inner_block)}
-      </button>
-      """
-    end
+  defp variant_classes("secondary") do
+    "rounded-4xl bg-white p-4 font-semibold tracking-wider text-primary cursor-pointer"
   end
 
   @doc """

lib/yearbook_web/live/page_live.ex

@@ -9,9 +9,7 @@ defmodule YearbookWeb.PageLive do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="">
-      Hello World
-    </div>
+    Hello World
     """
   end
 end