feat: Add top app bar element.

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
 

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.
 

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

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",

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';

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