IndicatorPlacement (value, names=None, module=None, qualname=None, type=None, start=1, boundary=None)
*str(object=’’) -> str str(bytes_or_buffer[, encoding[, errors]]) -> str
Create a new string object from the given object. If encoding or errors is specified, then the object must expose a data buffer that will be decoded using the given encoding and error handler. Otherwise, returns the result of object.__str__() (if defined) or repr(object). encoding defaults to sys.getdefaultencoding(). errors defaults to ‘strict’.*
test_indicator_basic_examples ()
Test basic indicator utilities.
def test_indicator_basic_examples():
"""Test basic indicator utilities."""
assert str(indicator) == "indicator"
assert str(indicator_item) == "indicator-item"
# With modifiers
assert str(indicator.hover) == "hover:indicator"
assert str(indicator_item.md) == "md:indicator-item"
# Run the tests
test_indicator_basic_examples()test_indicator_placement_examples ()
Test indicator placement options.
def test_indicator_placement_examples():
"""Test indicator placement options."""
# Horizontal alignment
assert str(indicator_placement.start) == "indicator-start"
assert str(indicator_placement.center) == "indicator-center"
assert str(indicator_placement.end) == "indicator-end"
# Vertical position
assert str(indicator_placement.top) == "indicator-top"
assert str(indicator_placement.middle) == "indicator-middle"
assert str(indicator_placement.bottom) == "indicator-bottom"
# Run the tests
test_indicator_placement_examples()test_indicator_basic_fasthtml_examples ()
Test basic indicator examples from daisyUI v5 documentation.
def test_indicator_basic_fasthtml_examples():
"""Test basic indicator examples from daisyUI v5 documentation."""
from fasthtml.common import Div, Span, Button
from cjm_fasthtml_tailwind.utilities.sizing import h, w
from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import place_items, grid_display
from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
from cjm_fasthtml_daisyui.components.data_display.badge import badge, badge_colors
from cjm_fasthtml_daisyui.components.data_display.status import status, status_colors
from cjm_fasthtml_tailwind.utilities.layout import display_tw
# Status Indicator
status_indicator = Div(
Span(cls=combine_classes(indicator_item, status, status_colors.success)),
Div(
"content",
cls=combine_classes(bg_dui.base_300, grid_display, h._32, w._32, place_items.center)
),
cls=str(indicator)
)
# Verify status indicator structure
assert "indicator" in status_indicator.attrs['class']
assert status_indicator.children[0].tag == "span"
assert "indicator-item" in status_indicator.children[0].attrs['class']
assert "status" in status_indicator.children[0].attrs['class']
assert "status-success" in status_indicator.children[0].attrs['class']
assert status_indicator.children[1].tag == "div"
assert "bg-base-300" in status_indicator.children[1].attrs['class']
assert "grid" in status_indicator.children[1].attrs['class']
assert "h-32" in status_indicator.children[1].attrs['class']
assert "w-32" in status_indicator.children[1].attrs['class']
assert "place-items-center" in status_indicator.children[1].attrs['class']
assert status_indicator.children[1].children[0] == "content"
# Badge as indicator
badge_indicator = Div(
Span("New", cls=combine_classes(indicator_item, badge, badge_colors.primary)),
Div(
"content",
cls=combine_classes(bg_dui.base_300, grid_display, h._32, w._32, place_items.center)
),
cls=str(indicator)
)
# Verify badge indicator structure
assert "indicator" in badge_indicator.attrs['class']
assert badge_indicator.children[0].tag == "span"
assert "indicator-item" in badge_indicator.children[0].attrs['class']
assert "badge" in badge_indicator.children[0].attrs['class']
assert "badge-primary" in badge_indicator.children[0].attrs['class']
assert badge_indicator.children[0].children[0] == "New"
assert badge_indicator.children[1].children[0] == "content"
return Div(status_indicator, badge_indicator)
# Run the tests
test_indicator_basic_fasthtml_examples()<div>
<div class="indicator">
<span class="indicator-item status status-success"></span> <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="indicator">
<span class="indicator-item badge badge-primary">New</span> <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
</div>test_indicator_for_components_fasthtml_examples ()
Test indicator with various components from daisyUI v5 documentation.
def test_indicator_for_components_fasthtml_examples():
"""Test indicator with various components from daisyUI v5 documentation."""
from fasthtml.common import Div, Span, Button, A, Img, Input
from cjm_fasthtml_tailwind.utilities.sizing import h, w
from cjm_fasthtml_tailwind.utilities.borders import rounded
from cjm_fasthtml_daisyui.components.actions.button import btn
from cjm_fasthtml_daisyui.components.data_display.badge import badge, badge_colors
from cjm_fasthtml_daisyui.components.navigation.tabs import tabs, tabs_styles, tab, tab_modifiers
from cjm_fasthtml_daisyui.components.data_display.avatar import avatar
from cjm_fasthtml_daisyui.components.data_input.text_input import text_input, text_input_styles
from cjm_fasthtml_daisyui.components.layout.divider import divider
# For button
button_indicator = Div(
Span("12", cls=combine_classes(indicator_item, badge, badge_colors.secondary)),
Button("inbox", cls=str(btn)),
cls=str(indicator)
)
# Verify button indicator
assert "indicator" in button_indicator.attrs['class']
assert button_indicator.children[0].tag == "span"
assert "indicator-item" in button_indicator.children[0].attrs['class']
assert "badge" in button_indicator.children[0].attrs['class']
assert "badge-secondary" in button_indicator.children[0].attrs['class']
assert button_indicator.children[0].children[0] == "12"
assert button_indicator.children[1].tag == "button"
assert "btn" in button_indicator.children[1].attrs['class']
assert button_indicator.children[1].children[0] == "inbox"
# For tab
tab_indicator = Div(
A("Messages", cls=str(tab)),
A(
"Notifications",
Span("8", cls=combine_classes(indicator_item, badge)),
cls=combine_classes(indicator, tab, tab_modifiers.active)
),
A("Requests", cls=str(tab)),
cls=combine_classes(tabs, tabs_styles.lift)
)
# Verify tab indicator
assert "tabs" in tab_indicator.attrs['class']
assert "tabs-lift" in tab_indicator.attrs['class']
assert tab_indicator.children[0].tag == "a"
assert "tab" in tab_indicator.children[0].attrs['class']
assert tab_indicator.children[0].children[0] == "Messages"
assert tab_indicator.children[1].tag == "a"
assert "indicator" in tab_indicator.children[1].attrs['class']
assert "tab" in tab_indicator.children[1].attrs['class']
assert "tab-active" in tab_indicator.children[1].attrs['class']
assert tab_indicator.children[1].children[0] == "Notifications"
assert tab_indicator.children[1].children[1].tag == "span"
assert "indicator-item" in tab_indicator.children[1].children[1].attrs['class']
assert "badge" in tab_indicator.children[1].children[1].attrs['class']
assert tab_indicator.children[1].children[1].children[0] == "8"
# For avatar
avatar_indicator = Div(
Span("Justice", cls=combine_classes(indicator_item, badge, badge_colors.secondary)),
Div(
Img(
alt="Tailwind CSS examples",
src="https://img.daisyui.com/images/profile/demo/[email protected]"
),
cls=combine_classes(h._20, w._20, rounded.lg)
),
cls=combine_classes(avatar, indicator)
)
# Verify avatar indicator
assert "avatar" in avatar_indicator.attrs['class']
assert "indicator" in avatar_indicator.attrs['class']
assert avatar_indicator.children[0].tag == "span"
assert "indicator-item" in avatar_indicator.children[0].attrs['class']
assert "badge" in avatar_indicator.children[0].attrs['class']
assert "badge-secondary" in avatar_indicator.children[0].attrs['class']
assert avatar_indicator.children[0].children[0] == "Justice"
assert avatar_indicator.children[1].tag == "div"
assert "h-20" in avatar_indicator.children[1].attrs['class']
assert "w-20" in avatar_indicator.children[1].attrs['class']
assert "rounded-lg" in avatar_indicator.children[1].attrs['class']
assert avatar_indicator.children[1].children[0].tag == "img"
# For an input
input_indicator = Div(
Span("Required", cls=combine_classes(indicator_item, badge)),
Input(
type="text",
placeholder="Your email address",
cls=combine_classes(text_input)
),
cls=str(indicator)
)
# Verify input indicator
assert "indicator" in input_indicator.attrs['class']
assert input_indicator.children[0].tag == "span"
assert "indicator-item" in input_indicator.children[0].attrs['class']
assert "badge" in input_indicator.children[0].attrs['class']
assert input_indicator.children[0].children[0] == "Required"
assert input_indicator.children[1].tag == "input"
assert input_indicator.children[1].attrs['type'] == "text"
assert input_indicator.children[1].attrs['placeholder'] == "Your email address"
assert "input" in input_indicator.children[1].attrs['class']
return Div(
button_indicator,
Div(cls=str(divider)),
tab_indicator,
Div(cls=str(divider)),
avatar_indicator,
Div(cls=str(divider)),
input_indicator
)
# Run the tests
test_indicator_for_components_fasthtml_examples()<div>
<div class="indicator">
<span class="indicator-item badge badge-secondary">12</span><button class="btn">inbox</button> </div>
<div class="divider"></div>
<div class="tabs tabs-lift">
<a href="#" class="tab">Messages</a><a href="#" class="indicator tab tab-active">Notifications<span class="indicator-item badge">8</span></a><a href="#" class="tab">Requests</a> </div>
<div class="divider"></div>
<div class="avatar indicator">
<span class="indicator-item badge badge-secondary">Justice</span> <div class="h-20 w-20 rounded-lg">
<img alt="Tailwind CSS examples" src="https://img.daisyui.com/images/profile/demo/[email protected]"> </div>
</div>
<div class="divider"></div>
<div class="indicator">
<span class="indicator-item badge">Required</span> <input type="text" placeholder="Your email address" class="input">
</div>
</div>test_indicator_card_fasthtml_examples ()
Test button as indicator for card from daisyUI v5 documentation.
def test_indicator_card_fasthtml_examples():
"""Test button as indicator for card from daisyUI v5 documentation."""
from fasthtml.common import Div, Button, H2, P
from cjm_fasthtml_tailwind.utilities.effects import shadow
from cjm_fasthtml_tailwind.utilities.borders import border
from cjm_fasthtml_daisyui.components.actions.button import btn, btn_colors
from cjm_fasthtml_daisyui.components.data_display.card import card, card_body, card_title
from cjm_fasthtml_daisyui.utilities.semantic_colors import border_dui
# A button as an indicator for a card
card_with_indicator = Div(
Div(
Button("Apply", cls=combine_classes(btn, btn_colors.primary)),
cls=combine_classes(indicator_item, indicator_placement.bottom)
),
Div(
Div(
H2("Job Title", cls=str(card_title)),
P("Rerum reiciendis beatae tenetur excepturi"),
cls=str(card_body)
),
cls=combine_classes(card, border_dui.base_300, border, shadow.sm)
),
cls=str(indicator)
)
# Verify structure
assert "indicator" in card_with_indicator.attrs['class']
# Verify indicator item (button container)
indicator_item_div = card_with_indicator.children[0]
assert "indicator-item" in indicator_item_div.attrs['class']
assert "indicator-bottom" in indicator_item_div.attrs['class']
# Verify button
apply_button = indicator_item_div.children[0]
assert apply_button.tag == "button"
assert "btn" in apply_button.attrs['class']
assert "btn-primary" in apply_button.attrs['class']
assert apply_button.children[0] == "Apply"
# Verify card
card_div = card_with_indicator.children[1]
assert "card" in card_div.attrs['class']
assert "border-base-300" in card_div.attrs['class']
assert "border" in card_div.attrs['class']
assert "shadow-sm" in card_div.attrs['class']
# Verify card body
card_body_div = card_div.children[0]
assert "card-body" in card_body_div.attrs['class']
# Verify card title
title_element = card_body_div.children[0]
assert title_element.tag == "h2"
assert "card-title" in title_element.attrs['class']
assert title_element.children[0] == "Job Title"
# Verify card description
desc_element = card_body_div.children[1]
assert desc_element.tag == "p"
assert desc_element.children[0] == "Rerum reiciendis beatae tenetur excepturi"
return Div(card_with_indicator)
# Run the tests
test_indicator_card_fasthtml_examples()<div>
<div class="indicator">
<div class="indicator-item indicator-bottom">
<button class="btn btn-primary">Apply</button> </div>
<div class="card border-base-300 <cjm_fasthtml_tailwind.utilities.borders.BorderWidthFactory object at 0x7f16dc28abd0> shadow-sm">
<div class="card-body">
<h2 class="card-title">Job Title</h2>
<p>Rerum reiciendis beatae tenetur excepturi</p>
</div>
</div>
</div>
</div>test_indicator_image_overlay_fasthtml_examples ()
Test indicator in center of image from daisyUI v5 documentation.
def test_indicator_image_overlay_fasthtml_examples():
"""Test indicator in center of image from daisyUI v5 documentation."""
from fasthtml.common import Div, Span, Img
# In center of an image
image_overlay_indicator = Div(
Span(
"Only available for Pro users",
cls=combine_classes(
indicator_item,
indicator_placement.center,
indicator_placement.middle
)
),
Img(
alt="Tailwind CSS examples",
src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
),
cls=str(indicator)
)
# Verify structure
assert "indicator" in image_overlay_indicator.attrs['class']
# Verify indicator item
indicator_span = image_overlay_indicator.children[0]
assert indicator_span.tag == "span"
assert "indicator-item" in indicator_span.attrs['class']
assert "indicator-center" in indicator_span.attrs['class']
assert "indicator-middle" in indicator_span.attrs['class']
assert indicator_span.children[0] == "Only available for Pro users"
# Verify image
img_element = image_overlay_indicator.children[1]
assert img_element.tag == "img"
assert img_element.attrs['alt'] == "Tailwind CSS examples"
assert img_element.attrs['src'] == "https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
return Div(image_overlay_indicator)
# Run the tests
test_indicator_image_overlay_fasthtml_examples()test_indicator_positions_fasthtml_examples ()
Test all indicator position combinations from daisyUI v5 documentation.
def test_indicator_positions_fasthtml_examples():
"""Test all indicator position combinations from daisyUI v5 documentation."""
from fasthtml.common import Div, Span
from cjm_fasthtml_tailwind.utilities.sizing import h, w
from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import place_items, grid_display
from cjm_fasthtml_tailwind.utilities.layout import display_tw
from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
from cjm_fasthtml_daisyui.components.data_display.badge import badge, badge_colors
from cjm_fasthtml_daisyui.components.layout.divider import divider, divider_directions
# Helper function to create indicator box
def create_indicator_box(*position_classes):
return Div(
Span(cls=combine_classes(indicator_item, *position_classes, badge, badge_colors.secondary)),
Div(
"content",
cls=combine_classes(bg_dui.base_300, grid_display, h._32, w._32, place_items.center)
),
cls=str(indicator)
)
# indicator-top (default) indicator-start
top_start = create_indicator_box(indicator_placement.start)
assert "indicator" in top_start.attrs['class']
assert "indicator-start" in top_start.children[0].attrs['class']
assert "badge-secondary" in top_start.children[0].attrs['class']
# indicator-top (default) indicator-center
top_center = create_indicator_box(indicator_placement.center)
assert "indicator-center" in top_center.children[0].attrs['class']
# indicator-top (default) indicator-end (default)
top_end = create_indicator_box()
assert "indicator-item" in top_end.children[0].attrs['class']
assert "badge" in top_end.children[0].attrs['class']
# indicator-middle indicator-start
middle_start = create_indicator_box(indicator_placement.middle, indicator_placement.start)
assert "indicator-middle" in middle_start.children[0].attrs['class']
assert "indicator-start" in middle_start.children[0].attrs['class']
# indicator-middle indicator-center
middle_center = create_indicator_box(indicator_placement.middle, indicator_placement.center)
assert "indicator-middle" in middle_center.children[0].attrs['class']
assert "indicator-center" in middle_center.children[0].attrs['class']
# indicator-middle indicator-end (default)
middle_end = create_indicator_box(indicator_placement.middle)
assert "indicator-middle" in middle_end.children[0].attrs['class']
# indicator-bottom indicator-start
bottom_start = create_indicator_box(indicator_placement.bottom, indicator_placement.start)
assert "indicator-bottom" in bottom_start.children[0].attrs['class']
assert "indicator-start" in bottom_start.children[0].attrs['class']
# indicator-bottom indicator-center
bottom_center = create_indicator_box(indicator_placement.bottom, indicator_placement.center)
assert "indicator-bottom" in bottom_center.children[0].attrs['class']
assert "indicator-center" in bottom_center.children[0].attrs['class']
# indicator-bottom indicator-end (default)
bottom_end = create_indicator_box(indicator_placement.bottom)
assert "indicator-bottom" in bottom_end.children[0].attrs['class']
return Div(
top_start,
top_center,
top_end,
middle_start,
middle_center,
middle_end,
bottom_start,
bottom_center,
bottom_end,
cls=combine_classes(divider, h._48)
)
# Run the tests
test_indicator_positions_fasthtml_examples()<div class="divider h-48">
<div class="indicator">
<span class="indicator-item indicator-start badge badge-secondary"></span> <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="indicator">
<span class="indicator-item indicator-center badge badge-secondary"></span> <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="indicator">
<span class="indicator-item badge badge-secondary"></span> <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="indicator">
<span class="indicator-item indicator-middle indicator-start badge badge-secondary"></span> <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="indicator">
<span class="indicator-item indicator-middle indicator-center badge badge-secondary"></span> <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="indicator">
<span class="indicator-item indicator-middle badge badge-secondary"></span> <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="indicator">
<span class="indicator-item indicator-bottom indicator-start badge badge-secondary"></span> <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="indicator">
<span class="indicator-item indicator-bottom indicator-center badge badge-secondary"></span> <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="indicator">
<span class="indicator-item indicator-bottom badge badge-secondary"></span> <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
</div>test_indicator_multiple_fasthtml_examples ()
Test multiple indicators from daisyUI v5 documentation.
def test_indicator_multiple_fasthtml_examples():
"""Test multiple indicators from daisyUI v5 documentation."""
from fasthtml.common import Div, Span
from cjm_fasthtml_tailwind.utilities.sizing import h, w
from cjm_fasthtml_tailwind.utilities.layout import display_tw
from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import place_items, grid_display
from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
from cjm_fasthtml_daisyui.components.data_display.badge import badge
# Multiple indicators
multiple_indicators = Div(
Span("↖︎", cls=combine_classes(indicator_item, indicator_placement.top, indicator_placement.start, badge)),
Span("↑", cls=combine_classes(indicator_item, indicator_placement.top, indicator_placement.center, badge)),
Span("↗︎", cls=combine_classes(indicator_item, indicator_placement.top, indicator_placement.end, badge)),
Span("←", cls=combine_classes(indicator_item, indicator_placement.middle, indicator_placement.start, badge)),
Span("●", cls=combine_classes(indicator_item, indicator_placement.middle, indicator_placement.center, badge)),
Span("→", cls=combine_classes(indicator_item, indicator_placement.middle, indicator_placement.end, badge)),
Span("↙︎", cls=combine_classes(indicator_item, indicator_placement.bottom, indicator_placement.start, badge)),
Span("↓", cls=combine_classes(indicator_item, indicator_placement.bottom, indicator_placement.center, badge)),
Span("↘︎", cls=combine_classes(indicator_item, indicator_placement.bottom, indicator_placement.end, badge)),
Div(
"Box",
cls=combine_classes(bg_dui.base_300, grid_display, h._32, w._60, place_items.center)
),
cls=str(indicator)
)
# Verify structure
assert "indicator" in multiple_indicators.attrs['class']
# Verify all 9 indicators
assert len(multiple_indicators.children) == 10 # 9 indicators + 1 content box
# Top row indicators
assert multiple_indicators.children[0].children[0] == "↖︎"
assert "indicator-top" in multiple_indicators.children[0].attrs['class']
assert "indicator-start" in multiple_indicators.children[0].attrs['class']
assert multiple_indicators.children[1].children[0] == "↑"
assert "indicator-top" in multiple_indicators.children[1].attrs['class']
assert "indicator-center" in multiple_indicators.children[1].attrs['class']
assert multiple_indicators.children[2].children[0] == "↗︎"
assert "indicator-top" in multiple_indicators.children[2].attrs['class']
assert "indicator-end" in multiple_indicators.children[2].attrs['class']
# Middle row indicators
assert multiple_indicators.children[3].children[0] == "←"
assert "indicator-middle" in multiple_indicators.children[3].attrs['class']
assert "indicator-start" in multiple_indicators.children[3].attrs['class']
assert multiple_indicators.children[4].children[0] == "●"
assert "indicator-middle" in multiple_indicators.children[4].attrs['class']
assert "indicator-center" in multiple_indicators.children[4].attrs['class']
assert multiple_indicators.children[5].children[0] == "→"
assert "indicator-middle" in multiple_indicators.children[5].attrs['class']
assert "indicator-end" in multiple_indicators.children[5].attrs['class']
# Bottom row indicators
assert multiple_indicators.children[6].children[0] == "↙︎"
assert "indicator-bottom" in multiple_indicators.children[6].attrs['class']
assert "indicator-start" in multiple_indicators.children[6].attrs['class']
assert multiple_indicators.children[7].children[0] == "↓"
assert "indicator-bottom" in multiple_indicators.children[7].attrs['class']
assert "indicator-center" in multiple_indicators.children[7].attrs['class']
assert multiple_indicators.children[8].children[0] == "↘︎"
assert "indicator-bottom" in multiple_indicators.children[8].attrs['class']
assert "indicator-end" in multiple_indicators.children[8].attrs['class']
# Verify content box
content_box = multiple_indicators.children[9]
assert content_box.tag == "div"
assert "bg-base-300" in content_box.attrs['class']
assert "h-32" in content_box.attrs['class']
assert "w-60" in content_box.attrs['class']
assert "place-items-center" in content_box.attrs['class']
assert content_box.children[0] == "Box"
return Div(multiple_indicators)
# Run the tests
test_indicator_multiple_fasthtml_examples()<div>
<div class="indicator">
<span class="indicator-item indicator-top indicator-start badge">↖︎</span><span class="indicator-item indicator-top indicator-center badge">↑</span><span class="indicator-item indicator-top indicator-end badge">↗︎</span><span class="indicator-item indicator-middle indicator-start badge">←</span><span class="indicator-item indicator-middle indicator-center badge">●</span><span class="indicator-item indicator-middle indicator-end badge">→</span><span class="indicator-item indicator-bottom indicator-start badge">↙︎</span><span class="indicator-item indicator-bottom indicator-center badge">↓</span><span class="indicator-item indicator-bottom indicator-end badge">↘︎</span> <div class="bg-base-300 grid h-32 w-60 place-items-center">Box</div>
</div>
</div>test_indicator_responsive_fasthtml_examples ()
Test responsive indicator from daisyUI v5 documentation.
def test_indicator_responsive_fasthtml_examples():
"""Test responsive indicator from daisyUI v5 documentation."""
from fasthtml.common import Div, Span
from cjm_fasthtml_tailwind.utilities.sizing import h, w
from cjm_fasthtml_tailwind.utilities.layout import display_tw
from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import place_items, grid_display
from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
from cjm_fasthtml_daisyui.components.data_display.badge import badge, badge_colors
# Responsive indicator
responsive_indicator = Div(
Span(
cls=combine_classes(
indicator_item,
indicator_placement.start,
indicator_placement.middle.sm,
indicator_placement.bottom.md,
indicator_placement.center.lg,
indicator_placement.end.xl,
badge,
badge_colors.secondary
)
),
Div(
"content",
cls=combine_classes(bg_dui.base_300, grid_display, h._32, w._32, place_items.center)
),
cls=str(indicator)
)
# Verify structure
assert "indicator" in responsive_indicator.attrs['class']
# Verify indicator item with responsive classes
indicator_span = responsive_indicator.children[0]
assert indicator_span.tag == "span"
assert "indicator-item" in indicator_span.attrs['class']
assert "indicator-start" in indicator_span.attrs['class']
assert "sm:indicator-middle" in indicator_span.attrs['class']
assert "md:indicator-bottom" in indicator_span.attrs['class']
assert "lg:indicator-center" in indicator_span.attrs['class']
assert "xl:indicator-end" in indicator_span.attrs['class']
assert "badge" in indicator_span.attrs['class']
assert "badge-secondary" in indicator_span.attrs['class']
# Verify content box
content_box = responsive_indicator.children[1]
assert content_box.tag == "div"
assert "bg-base-300" in content_box.attrs['class']
assert "grid" in content_box.attrs['class']
assert "h-32" in content_box.attrs['class']
assert "w-32" in content_box.attrs['class']
assert "place-items-center" in content_box.attrs['class']
assert content_box.children[0] == "content"
return Div(responsive_indicator)
# Run the tests
test_indicator_responsive_fasthtml_examples()