"""
Progressive disclosure components for better UX
Collapsible sections, tooltips, and conditional displays
"""
class ProgressiveDisclosure:
"""Components that reveal information gradually"""
@staticmethod
def create_collapsible_section(title: str, content: str, initially_open: bool = False,
badge_text: str = "", badge_color: str = "#3b82f6"):
"""Create expandable/collapsible section with optional badge"""
section_id = f"section_{hash(title)}"
badge_html = ""
if badge_text:
badge_html = f"""
{badge_text}
"""
return f"""
{content}
"""
@staticmethod
def create_tooltip(text: str, tooltip_content: str, position: str = "top"):
"""Create text with a hover tooltip"""
position_classes = {
"top": "bottom: 125%; left: 50%; margin-left: -100px;",
"bottom": "top: 125%; left: 50%; margin-left: -100px;",
"left": "top: 50%; right: 125%; margin-top: -15px;",
"right": "top: 50%; left: 125%; margin-top: -15px;"
}
position_css = position_classes.get(position, position_classes["top"])
return f"""
{text}
{tooltip_content}
"""
@staticmethod
def create_progressive_form(steps: list):
"""Create a multi-step form with progressive disclosure"""
steps_html = ""
for i, step in enumerate(steps):
step_id = f"step_{i}"
steps_html += f"""
"""
# Navigation buttons HTML
nav_html = """
"""
# JavaScript for step navigation
js = f"""
"""
return f"""
{steps_html}
{nav_html}
{js}
"""
@staticmethod
def create_accordion(items: list, allow_multiple: bool = False):
"""Create an accordion with multiple collapsible items"""
accordion_id = f"accordion_{hash(str(items))}"
items_html = ""
for i, item in enumerate(items):
item_id = f"{accordion_id}_item_{i}"
items_html += f"""
{item['content']}
"""
return f"""
{items_html}
"""