Repository: woylie/doggo (elixir)

Issue:
disclosure

Pull request:
disclosure button
- update example
- add disclosure button
- update changelog

resolves #168 

Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index ac601da..215cb5d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### Added
 
+- New component: `Doggo.disclosure_button/`.
 - New component: `Doggo.radio_group/1`.
 - New component: `Doggo.tabs/1`.
 - New component: `Doggo.tree/1`.
diff --git a/lib/doggo.ex b/lib/doggo.ex
index 908f401..20b4cfd 100644
--- a/lib/doggo.ex
+++ b/lib/doggo.ex
@@ -559,7 +559,7 @@ defmodule Doggo do
   `aria-busy` attribute:
 
   ```heex
-  <Doggo.button aria-label="Saving..." aria-busy={true}>
+  <Doggo.button aria-label="Saving..." aria-busy>
     click me
   </Doggo.button>
   ```
@@ -1034,6 +1034,46 @@ defmodule Doggo do
   defp to_time(%NaiveDateTime{} = dt), do: NaiveDateTime.to_time(dt)
   defp to_time(nil), do: nil
 
+  @doc """
+  Renders a button that toggles the visibility of another element.
+
+  For a button that toggles other states, use `toggle_button/1` instead.
+
+  > #### Not ready {: .warning}
+  >
+  > Doggo does not ship with JavaScript yet. The necessary JavaScript to
+  > toggle the element and the aria attribute will be added in a future version.
+
+  ## Examples
+
+  ```heex
+  <Doggo.disclosure_button controls="data-table">
+    Data Table
+  </Doggo.disclosure_button>
+
+  <table id="data-table" hidden></table>
+  ```
+  """
+  @doc type: :component
+
+  attr :controls, :string,
+    required: true,
+    doc: """
+    The DOM ID of the element that this button controls.
+    """
+
+  attr :rest, :global
+
+  slot :inner_block, required: true
+
+  def disclosure_button(assigns) do
+    ~H"""
+    <button type="button" aria-expanded="false" aria-controls={@controls} {@rest}>
+      <%= render_slot(@inner_block) %>
+    </button>
+    """
+  end
+
   @doc """
   Renders a drawer with a `brand`, `top`, and `bottom` slot.
 
diff --git a/priv/storybook/components/disclosure_button.story.exs b/priv/storybook/components/disclosure_button.story.exs
new file mode 100644
index 0000000..2862667
--- /dev/null
+++ b/priv/storybook/components/disclosure_button.story.exs
@@ -0,0 +1,17 @@
+defmodule Storybook.Components.DisclosureButton do
+  use PhoenixStorybook.Story, :component
+
+  def function, do: &Doggo.disclosure_button/1
+
+  def variations do
+    [
+      %Variation{
+        id: :default,
+        attributes: %{
+          controls: "data-table"
+        },
+        slots: ["Data Table"]
+      }
+    ]
+  end
+end


Test patch:
diff --git a/test/doggo_test.exs b/test/doggo_test.exs
index 5ff0a18..35d4911 100644
--- a/test/doggo_test.exs
+++ b/test/doggo_test.exs
@@ -1645,6 +1645,25 @@ defmodule DoggoTest do
     end
   end
 
+  describe "disclosure_button/1" do
+    test "default" do
+      assigns = %{}
+
+      html =
+        parse_heex(~H"""
+        <Doggo.disclosure_button controls="data-table">
+          Data Table
+        </Doggo.disclosure_button>
+        """)
+
+      button = find_one(html, "button:root")
+      assert attribute(button, "type") == "button"
+      assert attribute(button, "aria-expanded") == "false"
+      assert attribute(button, "aria-controls") == "data-table"
+      assert text(button) == "Data Table"
+    end
+  end
+
   describe "drawer/1" do
     test "default" do
       assigns = %{}