Repository: woylie/doggo
Pull request #184 (2023-12-30 08:01:37)

add cluster component

github-actions[bot]: ## Pull Request Test Coverage Report for [Build 57dc531bfe000e3b68779a90625ea5ec0ba8ffef](https://coveralls.io/builds/64805728)


* **0** of **0**   changed or added relevant lines in **0** files are covered.
* No unchanged relevant lines lost coverage.
* Overall coverage increased (+**0.2%**) to **57.937%**

---



|  Totals | [![Coverage Status](https://coveralls.io/builds/64805728/badge)](https://coveralls.io/builds/64805728) |
| :-- | --: |
| Change from base [Build f4ea3851effde6b4ce83ce3b2d9a33928fbe7a82](https://coveralls.io/builds/64805646): |  0.2% |
| Covered Lines: | 365 |
| Relevant Lines: | 630 |

---
##### 💛  - [Coveralls](https://coveralls.io)


Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 98c2f38..2e3a543 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Added
+
+- New component: `Doggo.cluster/1`.
+
 ### Changed
 
 - Significant changes to `Doggo.alert/1` and `Doggo.flash_group/1`.
diff --git a/lib/doggo.ex b/lib/doggo.ex
index 7e91ff9..dd384b6 100644
--- a/lib/doggo.ex
+++ b/lib/doggo.ex
@@ -539,6 +539,36 @@ defmodule Doggo do
     """
   end
 
+  @doc """
+  Use the cluster component to visually group children.
+
+  Common use cases are groups of buttons, or group of tags.
+
+  ## Example
+
+      <Doggo.cluster>
+        <div>some item</div>
+        <div>some other item</div>
+      </Doggo.cluster>
+  """
+  @doc type: :component
+
+  slot :inner_block, required: true
+
+  attr :class, :any,
+    default: [],
+    doc: "Additional CSS classes. Can be a string or a list of strings."
+
+  attr :rest, :global, doc: "Any additional HTML attributes."
+
+  def cluster(assigns) do
+    ~H"""
+    <div class={["cluster" | List.wrap(@class)]} {@rest}>
+      <%= render_slot(@inner_block) %>
+    </div>
+    """
+  end
+
   @doc """
   Renders a `DateTime` or `NaiveDateTime` in a `<time>` tag.
 
diff --git a/priv/storybook/components/cluster.story.exs b/priv/storybook/components/cluster.story.exs
new file mode 100644
index 0000000..698b12d
--- /dev/null
+++ b/priv/storybook/components/cluster.story.exs
@@ -0,0 +1,20 @@
+defmodule Storybook.Components.Cluster do
+  use PhoenixStorybook.Story, :component
+
+  def function, do: &Doggo.cluster/1
+
+  def variations do
+    [
+      %Variation{
+        id: :default,
+        slots: [
+          """
+          <div>Hello!</div>
+          <div>How are you?</div>
+          <div>Goodbye!</div>
+          """
+        ]
+      }
+    ]
+  end
+end


Test patch:
diff --git a/test/doggo_test.exs b/test/doggo_test.exs
index f5e390e..ccb2ebd 100644
--- a/test/doggo_test.exs
+++ b/test/doggo_test.exs
@@ -1130,6 +1130,61 @@ defmodule DoggoTest do
     end
   end
 
+  describe "cluster/1" do
+    test "default" do
+      assigns = %{}
+
+      html =
+        parse_heex(~H"""
+        <Doggo.cluster>Hello</Doggo.cluster>
+        """)
+
+      div = find_one(html, "div")
+
+      assert attribute(div, "class") == "cluster"
+      assert text(div) == "Hello"
+    end
+
+    test "with additional class as string" do
+      assigns = %{}
+
+      html =
+        parse_heex(~H"""
+        <Doggo.cluster class="is-narrow">Hello</Doggo.cluster>
+        """)
+
+      div = find_one(html, "div")
+
+      assert attribute(div, "class") == "cluster is-narrow"
+      assert text(div) == "Hello"
+    end
+
+    test "with additional classes as list" do
+      assigns = %{}
+
+      html =
+        parse_heex(~H"""
+        <Doggo.cluster class={["is-narrow", "is-crisp"]}>Hello</Doggo.cluster>
+        """)
+
+      div = find_one(html, "div")
+
+      assert attribute(div, "class") == "cluster is-narrow is-crisp"
+      assert text(div) == "Hello"
+    end
+
+    test "with global attribute" do
+      assigns = %{}
+
+      html =
+        parse_heex(~H"""
+        <Doggo.cluster data-what="ever">Hello</Doggo.cluster>
+        """)
+
+      assert attribute(html, "div", "data-what") == "ever"
+    end
+  end
+
   describe "date/1" do
     test "with Date" do
       assigns = %{}