- fix a11y warning on review_card

- add no_margin to p tags
- add tests and a11y checks

lib/petal_components/card.ex

@@ -88,7 +88,7 @@ defmodule PetalComponents.Card do
         <.avatar src={@img} alt={@name} size="md" />
         <div class="pc-review-meta">
           <figcaption>
-            <.h5 no_margin class="text-sm pc-review-name"><%= @name %></.h5>
+            <.p no_margin class="text-sm pc-review-name"><%= @name %></.p>
           </figcaption>
           <p class="pc-review-username"><%= @username %></p>
         </div>

lib/petal_components/marquee.ex

@@ -6,7 +6,7 @@ defmodule PetalComponents.Marquee do
     doc: "Pause the marquee when the user hovers over the cards"
   )
 
-  attr(:repeat, :integer, default: 1, doc: "Number of times to repeat the content")
+  attr(:repeat, :integer, default: 4, doc: "Number of times to repeat the content")
   attr(:vertical, :boolean, default: false, doc: "Display the marquee vertically")
   attr(:reverse, :boolean, default: false, doc: "Reverse the direction of the marquee")
   attr(:duration, :string, default: "30s", doc: "Animation duration")

lib/petal_components/typography.ex

@@ -100,12 +100,20 @@ defmodule PetalComponents.Typography do
   end
 
   attr(:class, :any, default: nil, doc: "CSS class")
+  attr(:no_margin, :boolean, default: nil, doc: "removes margin from paragraph")
   attr(:rest, :global)
   slot(:inner_block, required: false)
 
   def p(assigns) do
     ~H"""
-    <p class={["pc-text", "pc-p--margin", @class]} {@rest}>
+    <p
+      class={[
+        "pc-text",
+        !@no_margin && "pc-p--margin",
+        @class
+      ]}
+      {@rest}
+    >
       <%= render_slot(@inner_block) %>
     </p>
     """

lib/petal_components_web/a11y_live.ex

@@ -219,6 +219,36 @@ defmodule PetalComponentsWeb.A11yLive do
         title={@sidebar_title}
       />
 
+      <.marquee pause_on_hover repeat={3}>
+        <%= for review <- [
+    %{
+      name: "Anne",
+      username: "@anne",
+      body: "I've never seen anything like this before. It's amazing.",
+      img: "https://res.cloudinary.com/wickedsites/image/upload/v1604268092/unnamed_sagz0l.jpg"
+    },
+    %{
+      name: "Jill",
+      username: "@jill",
+      body: "I don't know what to say. I'm speechless. This is amazing.",
+      img: "https://res.cloudinary.com/wickedsites/image/upload/v1636595188/dummy_data/avatar_1_lc8plf.png"
+    },
+    %{
+      name: "John",
+      username: "@john",
+      body: "I'm at a loss for words. This is amazing. I love it.",
+      img: "https://res.cloudinary.com/wickedsites/image/upload/v1636595188/dummy_data/avatar_2_jhs6ww.png"
+    }
+    ] do %>
+          <.review_card
+            name={review.name}
+            username={review.username}
+            body={review.body}
+            img={review.img}
+          />
+        <% end %>
+      </.marquee>
+
       <.modal max_width="sm" title="Modal">
         <div class="gap-5 text-sm">
           <.form_label label="Add some text here." />

test/petal/card_test.exs

@@ -136,4 +136,183 @@ defmodule PetalComponents.CardTest do
 
     assert html =~ "footer-class"
   end
+
+  @sample_review %{
+    name: "John Doe",
+    username: "@johndoe",
+    img: "https://example.com/avatar.jpg",
+    body: "This is an amazing product!"
+  }
+
+  describe "basic rendering" do
+    test "renders with all required attributes" do
+      assigns = @sample_review
+
+      html =
+        rendered_to_string(~H"""
+        <.review_card name={@name} username={@username} img={@img} body={@body} />
+        """)
+
+      assert html =~ "pc-review-card"
+      assert html =~ "John Doe"
+      assert html =~ "@johndoe"
+      assert html =~ "This is an amazing product!"
+      assert html =~ "https://example.com/avatar.jpg"
+    end
+
+    test "renders with proper semantic elements" do
+      assigns = @sample_review
+
+      html =
+        rendered_to_string(~H"""
+        <.review_card name={@name} username={@username} img={@img} body={@body} />
+        """)
+
+      assert html =~ "<figure"
+      assert html =~ "<figcaption"
+      assert html =~ "<blockquote"
+    end
+  end
+
+  describe "component structure" do
+    test "includes all necessary sections" do
+      assigns = @sample_review
+
+      html =
+        rendered_to_string(~H"""
+        <.review_card name={@name} username={@username} img={@img} body={@body} />
+        """)
+
+      assert html =~ "pc-review-header"
+      assert html =~ "pc-review-meta"
+      assert html =~ "pc-review-name"
+      assert html =~ "pc-review-username"
+      assert html =~ "pc-review-body"
+    end
+
+    test "renders avatar component" do
+      assigns = @sample_review
+
+      html =
+        rendered_to_string(~H"""
+        <.review_card name={@name} username={@username} img={@img} body={@body} />
+        """)
+
+      assert html =~ "pc-avatar"
+      assert html =~ ~s(src="https://example.com/avatar.jpg")
+    end
+  end
+
+  describe "customization" do
+    test "applies custom classes" do
+      assigns = Map.put(@sample_review, :custom_class, "my-custom-class")
+
+      html =
+        rendered_to_string(~H"""
+        <.review_card name={@name} username={@username} img={@img} body={@body} class={@custom_class} />
+        """)
+
+      assert html =~ "my-custom-class"
+    end
+
+    test "passes through rest attributes" do
+      assigns = @sample_review
+
+      html =
+        rendered_to_string(~H"""
+        <.review_card
+          name={@name}
+          username={@username}
+          img={@img}
+          body={@body}
+          data-test="review-card"
+          aria-label="Review"
+        />
+        """)
+
+      assert html =~ ~s(data-test="review-card")
+      assert html =~ ~s(aria-label="Review")
+    end
+  end
+
+  describe "typography components" do
+    test "uses typography components with correct classes" do
+      assigns = @sample_review
+
+      html =
+        rendered_to_string(~H"""
+        <.review_card name={@name} username={@username} img={@img} body={@body} />
+        """)
+
+      assert html =~ "text-sm"
+      assert html =~ "pc-text"
+    end
+  end
+
+  describe "validation" do
+    test "raises error when required attributes are missing" do
+      base_assigns = %{rest: %{}, __changed__: nil, class: "", __given__: %{__changed__: nil}}
+
+      message = "key :img not found in: " <> inspect(base_assigns, pretty: true)
+
+      assert_raise KeyError, message, fn ->
+        assigns = %{}
+
+        rendered_to_string(~H"""
+        <.review_card />
+        """)
+      end
+
+      assigns_with_name =
+        Map.merge(base_assigns, %{
+          name: "John",
+          __given__: %{name: "John", __changed__: nil}
+        })
+
+      message = "key :img not found in: " <> inspect(assigns_with_name, pretty: true)
+
+      assert_raise KeyError, message, fn ->
+        assigns = %{name: "John"}
+
+        rendered_to_string(~H"""
+        <.review_card name={@name} />
+        """)
+      end
+
+      assigns_with_username =
+        Map.merge(base_assigns, %{
+          name: "John",
+          username: "@john",
+          __given__: %{name: "John", username: "@john", __changed__: nil}
+        })
+
+      message = "key :img not found in: " <> inspect(assigns_with_username, pretty: true)
+
+      assert_raise KeyError, message, fn ->
+        assigns = %{name: "John", username: "@john"}
+
+        rendered_to_string(~H"""
+        <.review_card name={@name} username={@username} />
+        """)
+      end
+
+      assigns_with_img =
+        Map.merge(base_assigns, %{
+          name: "John",
+          username: "@john",
+          img: "test.jpg",
+          __given__: %{name: "John", username: "@john", img: "test.jpg", __changed__: nil}
+        })
+
+      message = "key :body not found in: " <> inspect(assigns_with_img, pretty: true)
+
+      assert_raise KeyError, message, fn ->
+        assigns = %{name: "John", username: "@john", img: "test.jpg"}
+
+        rendered_to_string(~H"""
+        <.review_card name={@name} username={@username} img={@img} />
+        """)
+      end
+    end
+  end
 end