Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#48 - Add component: Navbar #114

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

#48 - Add component: Navbar #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c1f72b7
Add Nav Component
bluemoonecho Jun 29, 2023
83660d4
nav bar refinements
bluemoonecho Jun 30, 2023
43a7ca5
format file
bluemoonecho Jun 30, 2023
6e1d295
add width
bluemoonecho Jun 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
# Changelog

## v6.0.0 - 2023-06-28
- Add `Nav` component

## v2.3.0 - 2023-05-15
- Add `Modal` component

Expand Down
1 change: 1 addition & 0 deletions lib/bitstyles_phoenix.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
166 changes: 166 additions & 0 deletions lib/bitstyles_phoenix/component/nav.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
defmodule BitstylesPhoenix.Component.Nav do
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shall be call it Navbar to match Sidebar and the name in bitsyles?

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")></.ui_nav>
...> """
"""
<div class="u-bg-gray-80 u-width-full u-padding-s2-top u-padding-s2-bottom u-relative">
<div class="u-padding-m-x u-flex u-justify-between u-items-center u-flex-wrap">
<div class="u-flex-shrink-1 u-flex u-items-center">
<img src="https://placekitten.com/150/50" width="150" height="50" alt="Company logo" class="u-flex-shrink-0 u-margin-l2-right u-hidden u-block@l" />
<img src="https://placekitten.com/50/50" width="50" height="50" alt="Company logo" class="u-flex-shrink-0 u-margin-l2-right u-hidden@l" />
</div>
</div>
</div>
"""
''',
width: "100%"
)

story(
"Navbar with list of buttons",
'''
iex> assigns = %{}
...> render ~H"""
...> <.ui_nav(logo_url: "https://placekitten.com/100/100")>
...> <:inner_block>
...> <div class="u-hidden u-block@l u-flex-shrink-1 u-overflow-x-auto">
...> <ul class="u-flex u-list-none">
...> <li class="u-margin-m-right">
...> <a href="/" class="a-button a-button--transparent" aria-current="page">Team</a>
...> </li>
...> <li class="u-margin-m-right">
...> <a href="/" class="a-button a-button--transparent">Projects</a>
...> </li>
...> <li class="u-margin-m-right">
...> <a href="/" class="a-button a-button--transparent">Dashboard</a>
...> </li>
...> </ul>
...> </div>
...> </:inner_block>
...> </.ui_nav>
...> """
"""
<div class="u-bg-gray-80 u-width-full u-padding-s2-top u-padding-s2-bottom u-relative">
<div class="u-padding-m-x u-flex u-justify-between u-items-center u-flex-wrap">
<div class="u-flex-shrink-1 u-flex u-items-center">
<img src="https://placekitten.com/150/50" width="150" height="50" alt="Company logo" class="u-flex-shrink-0 u-margin-l2-right u-hidden u-block@l" />
<img src="https://placekitten.com/50/50" width="50" height="50" alt="Company logo" class="u-flex-shrink-0 u-margin-l2-right u-hidden@l" />
</div>
<div class="u-flex-shrink-1 u-overflow-x-auto">
<ul class="u-flex u-list-none">
<li class="u-margin-m-right">
<a href="/" class="a-button a-button--transparent" aria-current="page">Team</a>
</li>
<li class="u-margin-m-right">
<a href="/" class="a-button a-button--transparent">Projects</a>
</li>
<li class="u-margin-m-right">
<a href="/" class="a-button a-button--transparent">Dashboard</a>
</li>
</ul>
</div>
</div>
</div>
</div>
"""
''',
width: "100%"
)

story(
"Navbar with left block",
'''
iex> assigns = %{}
...> render ~H"""
...> <.ui_nav(logo_url: "https://placekitten.com/100/100")>
...> <:left_block>
...> Content
...> </:left_block>
...> </.ui_nav>
...> """
"""
<div class="u-bg-gray-80 u-width-full u-padding-s2-top u-padding-s2-bottom u-relative">
<div class="u-padding-m-x u-flex u-justify-between u-items-center u-flex-wrap">
<div class="u-flex-shrink-1 u-flex u-items-center">
<img src="https://placekitten.com/150/50" width="150" height="50" alt="Company logo" class="u-flex-shrink-0 u-margin-l2-right u-hidden u-block@l" />
<img src="https://placekitten.com/50/50" width="50" height="50" alt="Company logo" class="u-flex-shrink-0 u-margin-l2-right u-hidden@l" />
</div>
<div class="u-fg-white u-margin-s-left items-end">
<p class="">Left Block</p>
</div>
</div>
</div>
"""
''',
width: "100%"
)

def ui_nav(assigns) do
class =
classnames([
"u-bg-gray-80 u-padding-s2-top u-padding-s2-bottom u-width-full u-relative",
assigns[: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]
])

assigns =
assign(assigns,
class: class,
inner_block_class: inner_block_class,
left_block_class: left_block_class
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

instead of this, I would forward the assigns on the left and inner slots and add the class there. You can find examples for how to do that in the sidebar component or in most of the other places that work with single slots (see assigns_from_single_slot)

)

~H"""
<nav class={@class}>
<div class={classnames("u-padding-m-x u-flex u-justify-between u-items-center u-flex-wrap")}>
<div class={classnames("u-flex-shrink-1 u-flex u-items-center")}>
<%= if assigns[:logo_url] do %>
<img src={assigns[:logo_url]} width="150" height="50" alt="Company logo" class="u-flex-shrink-0 u-margin-l2-right u-hidden u-block@l" />
<img src={assigns[:logo_url]} width="50" height="50" alt="Company logo" class="u-flex-shrink-0 u-margin-l2-right u-hidden@l" />
<% end %>
<%= if assigns[:inner_block] do %>
<div class={@inner_block_class}>
<%= render_slot(@inner_block) %>
</div>
<% end %>
<%= if assigns[:left_block] do %>
<div class={@left_block_class}>
<%= render_slot(@left_block) %>
</div>
<% end %>
</div>
</div>
</nav>
"""
end
end
2 changes: 1 addition & 1 deletion mix.exs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ defmodule BitstylesPhoenix.MixProject do
def project do
[
app: :bitstyles_phoenix,
version: "2.3.0",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why 6?
If the goal is to somehow match this to the bitstyles version then that is not needed. One can configure the bitstyles version used (also the default assumption) and there is no need for the versions to align.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We also usually bump the version as part of the hex release.

version: "6.0.0",
elixir: "~> 1.11",
elixirc_paths: elixirc_paths(Mix.env()),
start_permanent: Mix.env() == :prod,
Expand Down