Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
32 changes: 16 additions & 16 deletions lib/bitstyles_phoenix/alpine3/dropdown.ex
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do

story(
"Dropdown with alpine",
'''
"""
iex> assigns = %{}
...> render ~H"""
...> render ~H\"""
...> <.ui_js_dropdown>
...> <:button label="Select me"/>
...> <:menu>
Expand All @@ -42,10 +42,10 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
...> </.ui_dropdown_option>
...> </:menu>
...> </.ui_js_dropdown>
...> """
''',
'''
"""
...> \"""
""",
"""
\"""
<div class="u-relative" x-data="{ dropdownOpen: false }">
<button type="button" @click="dropdownOpen = true" class="a-button a-button--secondary">
<span class="a-button__label">
Expand All @@ -69,8 +69,8 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
</li>
</ul>
</div>
"""
''',
\"""
""",
extra_html: """
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.5.1/cdn.min.js" defer></script>
<svg xmlns="http://www.w3.org/2000/svg" hidden aria-hidden="true">
Expand All @@ -84,9 +84,9 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do

story(
"Custom x-data name and icon file",
'''
"""
iex> assigns = %{}
...> render ~H"""
...> render ~H\"""
...> <.ui_js_dropdown x_name="myOwnDropDown">
...> <:button label="Select me" icon_file="assets/icons.svg"/>
...> <:menu>
Expand All @@ -98,10 +98,10 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
...> </.ui_dropdown_option>
...> </:menu>
...> </.ui_js_dropdown>
...> """
''',
'''
"""
...> \"""
""",
"""
\"""
<div class="u-relative" x-data="{ myOwnDropDown: false }">
<button type="button" @click="myOwnDropDown = true" class="a-button a-button--secondary">
<span class="a-button__label">
Expand All @@ -125,8 +125,8 @@ defmodule BitstylesPhoenix.Alpine3.Dropdown do
</li>
</ul>
</div>
"""
''',
\"""
""",
extra_html: """
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.5.1/cdn.min.js" defer></script>
""",
Expand Down
16 changes: 8 additions & 8 deletions lib/bitstyles_phoenix/alpine3/sidebar.ex
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do

story(
"Full example",
'''
"""
iex> assigns = %{}
...> render ~H"""
...> render ~H\"""
...> <.ui_js_sidebar_layout>
...> <:large_sidebar>
...> <a href="#" class="u-padding-l">
Expand Down Expand Up @@ -47,10 +47,10 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
...> </.ui_content>
...> </:main>
...> </.ui_js_sidebar_layout>
...> """
''',
'''
"""
...> \"""
""",
"""
\"""
<div class="u-flex u-height-100vh" x-data="{ sidebarOpen: false }">
<header role="banner" class="u-flex">
<nav class="u-flex">
Expand Down Expand Up @@ -124,8 +124,8 @@ defmodule BitstylesPhoenix.Alpine3.Sidebar do
</div>
</main>
</div>
"""
''',
\"""
""",
width: "100%",
height: "300px",
transparent: false,
Expand Down
64 changes: 32 additions & 32 deletions lib/bitstyles_phoenix/component/avatar.ex
Original file line number Diff line number Diff line change
Expand Up @@ -16,71 +16,71 @@ defmodule BitstylesPhoenix.Component.Avatar do

story(
"Default avatar",
'''
"""
iex> assigns = %{}
...> render ~H"""
...> render ~H\"""
...> <.ui_avatar src="https://placehold.co/100x100" alt="Username’s avatar"/>
...> """
''',
'''
"""
...> \"""
""",
"""
\"""
<div class="u-flex u-items-center">
<div class="a-avatar">
<img height="32" width="32" alt="Username’s avatar" src="https://placehold.co/100x100"/>
</div>
</div>
"""
'''
\"""
"""
)

story(
"With extra class",
'''
"""
iex> assigns = %{}
...> render ~H"""
...> render ~H\"""
...> <.ui_avatar src="https://placehold.co/100x100" class="foo bar" alt="Username’s avatar"/>
...> """
''',
'''
"""
...> \"""
""",
"""
\"""
<div class="u-flex u-items-center">
<div class="a-avatar foo bar">
<img height="32" width="32" alt="Username’s avatar" src="https://placehold.co/100x100"/>
</div>
</div>
"""
'''
\"""
"""
)

story(
"Large avatar",
'''
"""
iex> assigns = %{}
...> render ~H"""
...> render ~H\"""
...> <.ui_avatar size="l" src="https://placehold.co/100x100" alt="Username’s avatar" height="46" width="46"/>
...> """
''',
'''
"""
...> \"""
""",
"""
\"""
<div class="u-flex u-items-center">
<div class="a-avatar a-avatar--l">
<img alt="Username’s avatar" height="46" src="https://placehold.co/100x100" width="46"/>
</div>
</div>
"""
'''
\"""
"""
)

story(
"Avatar with a text",
'''
"""
iex> assigns = %{}
...> render ~H"""
...> render ~H\"""
...> <.ui_avatar src="https://placehold.co/100x100" alt="Username’s avatar"> Username </.ui_avatar>
...> """
''',
'''
"""
...> \"""
""",
"""
\"""
<div class="u-flex u-items-center">
<div class="a-avatar">
<img height="32" width="32" alt="Username’s avatar" src="https://placehold.co/100x100"/>
Expand All @@ -89,8 +89,8 @@ defmodule BitstylesPhoenix.Component.Avatar do
Username
</span>
</div>
"""
'''
\"""
"""
)

def ui_avatar(assigns) do
Expand Down
104 changes: 52 additions & 52 deletions lib/bitstyles_phoenix/component/badge.ex
Original file line number Diff line number Diff line change
Expand Up @@ -20,118 +20,118 @@ defmodule BitstylesPhoenix.Component.Badge do

story(
"Default badge",
'''
"""
iex> assigns = %{}
...> render ~H"""
...> render ~H\"""
...> <.ui_badge>
...> published
...> </.ui_badge>
...> """
''',
"6.0.0": '''
"""
...> \"""
""",
"6.0.0": """
\"""
<span class="a-badge u-h6 u-font-medium" data-theme="grayscale">
published
</span>
"""
''',
"5.0.1": '''
"""
\"""
""",
"5.0.1": """
\"""
<span class="a-badge u-h6 u-font-medium a-badge--text">
published
</span>
"""
''',
"4.3.0": '''
"""
\"""
""",
"4.3.0": """
\"""
<span class="a-badge u-h6 u-font-medium a-badge--gray">
published
</span>
"""
'''
\"""
"""
)

story(
"Badge variant brand-1",
'''
"""
iex> assigns = %{}
...> render ~H"""
...> render ~H\"""
...> <.ui_badge variant="brand-1">
...> new
...> </.ui_badge>
...> """
''',
"6.0.0": '''
"""
...> \"""
""",
"6.0.0": """
\"""
<span class="a-badge u-h6 u-font-medium" data-theme="brand-1">
new
</span>
"""
''',
"5.0.1": '''
"""
\"""
""",
"5.0.1": """
\"""
<span class="a-badge u-h6 u-font-medium a-badge--brand-1">
new
</span>
"""
'''
\"""
"""
)

story(
"Badge variant brand-2",
'''
"""
iex> assigns = %{}
...> render ~H"""
...> render ~H\"""
...> <.ui_badge variant="brand-2">
...> recommended
...> </.ui_badge>
...> """
''',
'''
"""
...> \"""
""",
"""
\"""
<span class="a-badge u-h6 u-font-medium" data-theme="brand-2">
recommended
</span>
"""
'''
\"""
"""
)

story(
"Badge variant danger",
'''
"""
iex> assigns = %{}
...> render ~H"""
...> render ~H\"""
...> <.ui_badge variant="danger">
...> deleted
...> </.ui_badge>
...> """
''',
'''
"""
...> \"""
""",
"""
\"""
<span class="a-badge u-h6 u-font-medium" data-theme="danger">
deleted
</span>
"""
'''
\"""
"""
)

story(
"Extra options and classes",
'''
"""
iex> assigns = %{}
...> render ~H"""
...> render ~H\"""
...> <.ui_badge class="extra-class" data-foo="bar">
...> published
...> </.ui_badge>
...> """
''',
'''
"""
...> \"""
""",
"""
\"""
<span class="a-badge u-h6 u-font-medium extra-class" data-theme="grayscale" data-foo="bar">
published
</span>
"""
'''
\"""
"""
)

def ui_badge(assigns) do
Expand Down
Loading
Loading