From 6133c66b509315acc648dd496082c9bd89f2d890 Mon Sep 17 00:00:00 2001
From: Jonathan Gao <gsmlg.com@gmail.com>
Date: Sat, 16 Apr 2022 23:35:40 +0800
Subject: [PATCH] feat: Add top app bar element.

---
 lib/phoenix_webcomponent.ex                   |  1 +
 lib/phoenix_webcomponent/form_helper.ex       |  2 +
 lib/phoenix_webcomponent/top_app_bar.ex       | 45 +++++++++++++++++++
 package.json                                  |  5 ++-
 priv/src/phoenix_webcomponent.js              |  3 ++
 .../phoenix_webcomponent/top_app_bar_test.exs | 21 +++++++++
 6 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 lib/phoenix_webcomponent/top_app_bar.ex
 create mode 100644 test/phoenix_webcomponent/top_app_bar_test.exs

diff --git a/lib/phoenix_webcomponent.ex b/lib/phoenix_webcomponent.ex
index f996f3fa..3d18d9aa 100644
--- a/lib/phoenix_webcomponent.ex
+++ b/lib/phoenix_webcomponent.ex
@@ -28,6 +28,7 @@ defmodule Phoenix.WebComponent do
       import Phoenix.WebComponent.FormHelper
       import Phoenix.WebComponent.Link
       import Phoenix.WebComponent.Markdown
+      import Phoenix.WebComponent.TopAppBar
     end
   end
 
diff --git a/lib/phoenix_webcomponent/form_helper.ex b/lib/phoenix_webcomponent/form_helper.ex
index 49769bbc..54f7853c 100644
--- a/lib/phoenix_webcomponent/form_helper.ex
+++ b/lib/phoenix_webcomponent/form_helper.ex
@@ -156,6 +156,8 @@ defmodule Phoenix.WebComponent.FormHelper do
     generic_input(:email, form, field, opts)
   end
 
+  @spec wc_number_input(atom | Phoenix.HTML.Form.t(), atom | binary, keyword) ::
+          {:safe, [binary | list | 60 | 62, ...]}
   @doc """
   Generates a number input.
 
diff --git a/lib/phoenix_webcomponent/top_app_bar.ex b/lib/phoenix_webcomponent/top_app_bar.ex
new file mode 100644
index 00000000..7489ffee
--- /dev/null
+++ b/lib/phoenix_webcomponent/top_app_bar.ex
@@ -0,0 +1,45 @@
+defmodule Phoenix.WebComponent.TopAppBar do
+  @moduledoc """
+  Conveniences for create top app bar.
+  """
+
+  import Phoenix.HTML.Tag
+
+  @doc """
+  Generates a top app bar.
+
+  ## Examples
+
+      wc_link("hello", to: "/world")
+      #=> <a href="/world"><mwc-button>hello</mwc-button></a>
+
+  ## Options
+
+  ### Slots
+
+  | Name | Description
+  | ---- | -----------
+  | `actionItems` | A number of `<mwc-icon-button>` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-web/tree/master/packages/top-app-bar).
+  | `navigationIcon` | One `<mwc-icon-button>` element to use for the left icon.
+  | `title` | A `<div>` or `<span>` that will be used as the title text.
+  | _default_ | Scrollable content to display under the bar. This may be the entire application.
+
+  ### Properties/Attributes
+
+  | Name | Type | Default | Description
+  | ---- | ---- | ------- | -----------
+  | `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.
+  | `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.
+  | `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.
+  | `scrollTarget` | `HTMLElement` \| `Window` | `window` | Element used to listen for `scroll` events.
+
+  """
+  def wc_top_app_bar(opts, do: contents) when is_list(opts) do
+    {fixed, opts} = Keyword.pop(opts, :fixed, false)
+    app_bar_tag = if fixed, do: :"mwc-top-app-bar-fixed", else: :"mwc-top-app-bar"
+
+    content_tag(app_bar_tag, opts) do
+      contents
+    end
+  end
+end
diff --git a/package.json b/package.json
index 84ab41a1..093bbacc 100644
--- a/package.json
+++ b/package.json
@@ -17,11 +17,14 @@
     "@gsmlg/lit": "^1.14.0",
     "@material/mwc-button": "^0.25.3",
     "@material/mwc-checkbox": "^0.25.3",
+    "@material/mwc-icon-button": "^0.25.3",
     "@material/mwc-radio": "^0.25.3",
     "@material/mwc-select": "^0.25.3",
     "@material/mwc-switch": "^0.25.3",
     "@material/mwc-textarea": "^0.25.3",
-    "@material/mwc-textfield": "^0.25.3"
+    "@material/mwc-textfield": "^0.25.3",
+    "@material/mwc-top-app-bar": "^0.25.3",
+    "@material/mwc-top-app-bar-fixed": "^0.25.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.6",
diff --git a/priv/src/phoenix_webcomponent.js b/priv/src/phoenix_webcomponent.js
index db1c0c28..e2a12a6b 100644
--- a/priv/src/phoenix_webcomponent.js
+++ b/priv/src/phoenix_webcomponent.js
@@ -5,5 +5,8 @@ import '@material/mwc-radio';
 import '@material/mwc-checkbox';
 import '@material/mwc-select';
 import '@material/mwc-switch';
+import '@material/mwc-top-app-bar';
+import '@material/mwc-top-app-bar-fixed';
+import '@material/mwc-icon-button';
 
 import '@gsmlg/lit';
\ No newline at end of file
diff --git a/test/phoenix_webcomponent/top_app_bar_test.exs b/test/phoenix_webcomponent/top_app_bar_test.exs
new file mode 100644
index 00000000..394546b4
--- /dev/null
+++ b/test/phoenix_webcomponent/top_app_bar_test.exs
@@ -0,0 +1,21 @@
+defmodule Phoenix.WebComponent.TopAppBarTest do
+  use ExUnit.Case, async: true
+
+  import Phoenix.HTML
+  import Phoenix.HTML.Tag
+  import Phoenix.WebComponent.TopAppBar
+
+  test "wc_top_app_bar empty" do
+    assert safe_to_string(wc_top_app_bar([], do: "")) ==
+             ~s[<mwc-top-app-bar></mwc-top-app-bar>]
+  end
+
+  test "wc_top_app_bar fixed with slots" do
+    assert safe_to_string(
+             wc_top_app_bar(fixed: true) do
+               content_tag(:"mwc-icon-button", "", icon: "menu", slot: "navigationIcon")
+             end
+           ) ==
+             ~s[<mwc-top-app-bar-fixed><mwc-icon-button icon="menu" slot="navigationIcon"></mwc-icon-button></mwc-top-app-bar-fixed>]
+  end
+end