Feat: Page Builder Featured Pages Component (#389)

* Feat: Page-Builder-Featured-Pages-Component Signed-off-by: Eduardo Borsa <borsa.dado@gmail.com> * published at Signed-off-by: Eduardo Borsa <borsa.dado@gmail.com> * Generic inner block Signed-off-by: Eduardo Borsa <borsa.dado@gmail.com> * Update components.ex --------- Signed-off-by: Eduardo Borsa <borsa.dado@gmail.com>
BeaconCMS · Jan 26, 2024 · f45ef68 · f45ef68
1 parent 9c2b8ef
commit f45ef68
Show file tree

Hide file tree

Showing 2 changed files with 132 additions and 1 deletion.
diff --git a/lib/beacon_web/components/components.ex b/lib/beacon_web/components/components.ex
@@ -52,6 +52,98 @@ defmodule BeaconWeb.Components do
     """
   end
 
+  @doc """
+  Renders the default item for featured_pages.
+
+  ## Examples
+
+      <BeaconWeb.Components.feature_page_item />
+  """
+
+  attr :title, :string, required: true
+  attr :updated_at, :any, required: true
+  attr :page_path, :string, required: true
+
+  def feature_page_item(assigns) do
+    ~H"""
+    <article class="hover:ring-2 hover:ring-gray-200 hover:ring-offset-8 flex relative flex-col rounded-lg xl:hover:ring-offset-[12px] 2xl:hover:ring-offset-[16px] active:ring-gray-200 active:ring-offset-8 xl:active:ring-offset-[12px] 2xl:active:ring-offset-[16px] focus-within:ring-2 focus-within:ring-blue-200 focus-within:ring-offset-8 xl:focus-within:ring-offset-[12px] hover:bg-white active:bg-white trasition-all duration-300">
+      <div class="flex flex-col">
+        <div>
+          <p class="font-bold text-gray-700"></p>
+          <p class="text-eyebrow font-medium text-gray-500 text-sm text-left">
+            <%= Calendar.strftime(@updated_at, "%d %B %Y") %>
+          </p>
+        </div>
+
+        <div class="-order-1 flex gap-x-2 items-center mb-3">
+          <h3 class="font-heading lg:text-xl lg:leading-8 text-lg font-bold leading-7">
+            <a
+              href={@page_path}
+              data-phx-link="redirect"
+              data-phx-link-state="push"
+              class="after:absolute after:inset-0 after:cursor-pointer focus:outline-none"
+            >
+              <%= @title %>
+            </a>
+          </h3>
+        </div>
+      </div>
+    </article>
+    """
+  end
+
+  @doc """
+
+  Renders a feature pages component.
+
+  ## Examples
+
+    Without pages, A.K.A, default behavior:
+      <BeaconWeb.Components.featured_pages />
+
+    With pages:
+      <BeaconWeb.Components.featured_pages :let={page} pages={Beacon.Content.list_pages(...)}>
+        <article >
+          <%= page.title %>
+        </article>
+      </BeaconWeb.Components.featured_pages>
+  """
+
+  attr :pages, :list, default: []
+  slot :inner_block
+
+  def featured_pages(assigns) do
+    assigns =
+      if Enum.empty?(assigns.pages),
+        do: Map.put(assigns, :pages, Beacon.Content.list_pages(Process.get(:__beacon_site__), per_page: 3)),
+        else: assigns
+
+    ~H"""
+    <div class="max-w-7xl mx-auto">
+      <div class="lg:mb-8 xl:mb-10 flex flex-col mb-6 text-center">
+        <h2 class="font-heading lg:text-3xl lg:leading-normal text-2xl font-medium" id="blogs-heading" data-test-article-shelf-heading="">
+          Our Featured Blog Posts
+        </h2>
+        <h3 class="font-heading -order-1 lg:mb-3 lg:text-base text-eyebrow tracking-widestXl text-slate-600 mb-2 font-medium uppercase">
+          Recommended Reading
+        </h3>
+      </div>
+
+      <div class="md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-6 lg:gap-11 md:space-y-0 space-y-10">
+        <%= if Enum.empty?(@inner_block) do %>
+          <div :for={page <- @pages}>
+            <BeaconWeb.Components.feature_page_item title={page.title} updated_at={page.updated_at} page_path={page.path} />
+          </div>
+        <% else %>
+          <%= for page <- @pages do %>
+            <%= render_slot(@inner_block, page) %>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+    """
+  end
+
   @doc """
   Renders a image previously uploaded in Admin Media Library with srcset.
 

diff --git a/test/beacon_web/components/components_test.exs b/test/beacon_web/components/components_test.exs
@@ -10,7 +10,7 @@ defmodule BeaconWeb.ComponentsTest do
     :ok
   end
 
-  describe "image" do
+  describe "reading_time/1" do
     setup context do
       create_page_with_component("""
       <main>
@@ -31,6 +31,45 @@ defmodule BeaconWeb.ComponentsTest do
     end
   end
 
+  describe "featured_pages/1 default" do
+    setup context do
+      create_page_with_component("""
+      <main>
+        <BeaconWeb.Components.featured_pages />
+      </main>
+      """)
+
+      context
+    end
+
+    test "SUCCESS: reading_time should show 1 min to read the page", %{conn: conn} do
+      {:ok, view, _html} = live(conn, "/home")
+
+      assert render(view) =~ "href=\"home\""
+    end
+  end
+
+  describe "featured_pages/1 with Inner Block" do
+    setup context do
+      create_page_with_component("""
+      <main>
+      <BeaconWeb.Components.featured_pages :let={_page} pages={Beacon.Content.list_pages(Process.get(:__beacon_site__), per_page: 3)}>
+          FOO BAR
+      </BeaconWeb.Components.featured_pages>
+      </main>
+      """)
+
+      context
+    end
+
+    test "SUCCESS: reading_time should show 1 min to read the page", %{conn: conn} do
+      {:ok, view, _html} = live(conn, "/home")
+
+      refute render(view) =~ "href=\"home\""
+      assert render(view) =~ "FOO BAR"
+    end
+  end
+
   defp create_page_with_component(template) do
     layout = published_layout_fixture()