Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Dropdown component
Browse files Browse the repository at this point in the history
davidalejandroaguilar committed Aug 3, 2024

Verified

This commit was signed with the committer’s verified signature.
snyk-bot Snyk bot
1 parent ae5dc8c commit 12e615b
Showing 3 changed files with 117 additions and 0 deletions.
1 change: 1 addition & 0 deletions lib/phlexy_ui.rb
Original file line number Diff line number Diff line change
@@ -16,6 +16,7 @@ module PhlexyUI
autoload :Card, "phlexy_ui/card"
autoload :Tabs, "phlexy_ui/tabs"
autoload :Drawer, "phlexy_ui/drawer"
autoload :Dropdown, "phlexy_ui/dropdown"
end

loader.eager_load
46 changes: 46 additions & 0 deletions lib/phlexy_ui/dropdown.rb
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
70 changes: 70 additions & 0 deletions spec/lib/phlexy_ui/dropdown_spec.rb
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

0 comments on commit 12e615b

Please sign in to comment.