-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
Add Dropdown component
1 parent
ae5dc8c
commit 12e615b
Showing
3 changed files
with
117 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
# frozen_string_literal: true | ||
|
||
module PhlexyUI | ||
class Dropdown < Base | ||
def initialize(*, as: :section, **) | ||
super(*, **) | ||
@as = as | ||
end | ||
|
||
def view_template(&) | ||
generate_classes!( | ||
component_html_class: :dropdown, | ||
modifiers_map: DROPDOWN_MODIFIERS_MAP, | ||
base_modifiers:, | ||
options: | ||
).then do |classes| | ||
div(class: classes, **options, &) | ||
end | ||
end | ||
|
||
def button(*, **, &) | ||
render Button.new(*, tabindex: 0, **, &) | ||
end | ||
|
||
def content(as: :div, **options, &) | ||
generate_classes!( | ||
component_html_class: :"dropdown-content", | ||
options: | ||
).then do |classes| | ||
public_send(as, tabindex: 0, class: classes, **options, &) | ||
end | ||
end | ||
|
||
private | ||
|
||
DROPDOWN_MODIFIERS_MAP = { | ||
end: "dropdown-end", | ||
top: "dropdown-top", | ||
bottom: "dropdown-bottom", | ||
left: "dropdown-left", | ||
right: "dropdown-right", | ||
hover: "dropdown-hover", | ||
open: "dropdown-open" | ||
}.freeze | ||
end | ||
end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
require "spec_helper" | ||
|
||
describe PhlexyUI::Dropdown do | ||
subject(:output) { render described_class.new } | ||
|
||
describe "conditions" do | ||
{ | ||
end: "dropdown-end", | ||
top: "dropdown-top", | ||
bottom: "dropdown-bottom", | ||
left: "dropdown-left", | ||
right: "dropdown-right", | ||
hover: "dropdown-hover", | ||
open: "dropdown-open" | ||
}.each do |condition, css| | ||
context "when given :#{condition} condition" do | ||
subject(:output) { render described_class.new(condition) } | ||
|
||
it "renders it apart from the main class" do | ||
expected_html = html <<~HTML | ||
<div class="dropdown #{css}"></div> | ||
HTML | ||
|
||
expect(output).to eq(expected_html) | ||
end | ||
end | ||
end | ||
end | ||
|
||
describe "rendering a full dropdown" do | ||
let(:component) do | ||
Class.new(Phlex::HTML) do | ||
def view_template(&) | ||
render PhlexyUI::Dropdown.new(:top) do |dropdown| | ||
dropdown.button(:active, class: "my-button", data: {my: "buttons"}) do | ||
"Click" | ||
end | ||
|
||
dropdown.content(as: :ul) do |content| | ||
li do | ||
a do | ||
"Item 1" | ||
end | ||
end | ||
end | ||
end | ||
end | ||
end | ||
end | ||
|
||
subject(:output) do | ||
render component.new | ||
end | ||
|
||
it "is expected to match the formatted HTML" do | ||
expected_html = html <<~HTML | ||
<div class="dropdown dropdown-top"> | ||
<button class="btn btn-active my-button" tabindex="0" data-my="buttons">Click</button> | ||
<ul tabindex="0" class="dropdown-content"> | ||
<li> | ||
<a>Item 1</a> | ||
</li> | ||
</ul> | ||
</div> | ||
HTML | ||
|
||
is_expected.to eq(expected_html) | ||
end | ||
end | ||
end |