From c1f72b7a1daf7a0fa287d67106981c00f537410e Mon Sep 17 00:00:00 2001 From: Sabine Holler Date: Thu, 29 Jun 2023 11:03:49 +0200 Subject: [PATCH 1/4] Add Nav Component --- CHANGELOG.md | 3 + lib/bitstyles_phoenix.ex | 1 + lib/bitstyles_phoenix/component/nav.ex | 149 +++++++++++++++++++++++++ mix.exs | 2 +- 4 files changed, 154 insertions(+), 1 deletion(-) create mode 100644 lib/bitstyles_phoenix/component/nav.ex diff --git a/CHANGELOG.md b/CHANGELOG.md index ed7088a..481785c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ # Changelog +## v6.0.0 - 2023-06-28 +- Add `Nav` component + ## v2.3.0 - 2023-05-15 - Add `Modal` component diff --git a/lib/bitstyles_phoenix.ex b/lib/bitstyles_phoenix.ex index 1f24932..3f62bbf 100644 --- a/lib/bitstyles_phoenix.ex +++ b/lib/bitstyles_phoenix.ex @@ -145,6 +145,7 @@ defmodule BitstylesPhoenix do import BitstylesPhoenix.Component.Heading import BitstylesPhoenix.Component.Icon import BitstylesPhoenix.Component.Modal + import BitstylesPhoenix.Component.Nav import BitstylesPhoenix.Component.Sidebar import BitstylesPhoenix.Component.Tabs import BitstylesPhoenix.Component.UseSVG diff --git a/lib/bitstyles_phoenix/component/nav.ex b/lib/bitstyles_phoenix/component/nav.ex new file mode 100644 index 0000000..6717213 --- /dev/null +++ b/lib/bitstyles_phoenix/component/nav.ex @@ -0,0 +1,149 @@ +defmodule BitstylesPhoenix.Component.Nav do + use BitstylesPhoenix.Component + + @moduledoc """ + A Nav component. + """ + + @doc ~S""" + Renders a nav component. + + A top-level navigation container, with two sections separated to the left & right. + The left-hand side is commonly used for a logo and links, the right-hand side for user account menu and global search. + + See the [bitstyles nav docs](https://bitcrowd.github.io/bitstyles/?path=/docs/ui-navigation-navbar--navbar) for further info. + """ + + story("Default navbar", ''' + iex> assigns = %{} + ...> render ~H""" + ...> <.ui_nav(logo_url: "https://placekitten.com/100/100")> + ...> """ + """ +
+
+
+ Company logo + Company logo +
+
+
+ """ + ''') + + +story( + "Navbar with list of buttons", + ''' + iex> assigns = %{} + ...> render ~H""" + ...> <.ui_nav(logo_url: "https://placekitten.com/100/100")> + ...> <:inner_block class="bar" foo="bar"> + ...>
+ ...> + ...>
+ ...> + ...> + ...> """ + """ +
+
+
+ Company logo + Company logo +
+
+ +
+
+
+ + """ +''') + + story( + "Navbar with left block", + ''' + iex> assigns = %{} + ...> render ~H""" + ...> <.ui_nav(logo_url: "https://placekitten.com/100/100")> + ...> <:left_block> + ...> Content + ...> + ...> + ...> """ + """ +
+
+
+ Company logo + Company logo +
+
+

Left Block

+
+
+
+ """ +''') + + + + def ui_nav(assigns) do + # class = + # classnames([ + # "u-bg-grayscale-dark-2 u-padding-s2-top u-padding-s2-bottom u-relative", + + # assigns[:class] + # ]) + + extra = + assigns + |> assigns_to_attributes([:class, :size]) + + # assigns = assign(assigns, extra: extra, class: class) + + ~H""" + + """ + end +end diff --git a/mix.exs b/mix.exs index bef95c5..0eeaad9 100644 --- a/mix.exs +++ b/mix.exs @@ -4,7 +4,7 @@ defmodule BitstylesPhoenix.MixProject do def project do [ app: :bitstyles_phoenix, - version: "2.3.0", + version: "6.0.0", elixir: "~> 1.11", elixirc_paths: elixirc_paths(Mix.env()), start_permanent: Mix.env() == :prod, From 83660d420615487efb6a54ff30af4f73987310be Mon Sep 17 00:00:00 2001 From: Sabine Holler Date: Fri, 30 Jun 2023 14:38:28 +0200 Subject: [PATCH 2/4] nav bar refinements --- lib/bitstyles_phoenix/component/nav.ex | 36 ++++++++++++++------------ 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/lib/bitstyles_phoenix/component/nav.ex b/lib/bitstyles_phoenix/component/nav.ex index 6717213..05967da 100644 --- a/lib/bitstyles_phoenix/component/nav.ex +++ b/lib/bitstyles_phoenix/component/nav.ex @@ -38,12 +38,12 @@ story( iex> assigns = %{} ...> render ~H""" ...> <.ui_nav(logo_url: "https://placekitten.com/100/100")> - ...> <:inner_block class="bar" foo="bar"> + ...> <:inner_block> ...>
...>
    ...>
  • ...> Team - ...>
    • + ...> ...>
  • ...> Projects ...>
    • @@ -99,7 +99,7 @@ story( Company logo Company logo
-
+

Left Block

@@ -110,21 +110,25 @@ story( def ui_nav(assigns) do - # class = - # classnames([ - # "u-bg-grayscale-dark-2 u-padding-s2-top u-padding-s2-bottom u-relative", - - # assigns[:class] - # ]) - extra = - assigns - |> assigns_to_attributes([:class, :size]) + class= classnames([ + "u-bg-gray-80 u-padding-s2-top u-padding-s2-bottom u-width-full u-relative", + assigns[:class] + ]) - # assigns = assign(assigns, extra: extra, class: class) + inner_block_class = + classnames([ + "u-margin-s-left", + assigns[:inner_block_class] + ]) + left_block_class = + classnames([ + "u-margin-s-left items-end", + assigns[:left_block_class] + ]) ~H""" -