dees-catalog/ts_web/elements/00group-layout/dees-label/dees-label.demo.ts

import { html, css, cssManager } from '@design.estate/dees-element';

export const demoFunc = () => html`
  <style>
    ${css`
      .demo-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 24px;
        max-width: 800px;
        margin: 0 auto;
      }

      .demo-section {
        background: ${cssManager.bdTheme('#f8f9fa', '#1a1a1a')};
        border-radius: 8px;
        padding: 24px;
        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
      }

      .demo-section h3 {
        margin-top: 0;
        margin-bottom: 16px;
        color: ${cssManager.bdTheme('#333', '#fff')};
      }

      .demo-section p {
        color: ${cssManager.bdTheme('#666', '#999')};
        margin-bottom: 16px;
        font-size: 13px;
      }

      .label-grid {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

      .label-row {
        display: flex;
        align-items: baseline;
        gap: 16px;
      }

      .label-row .annotation {
        font-size: 12px;
        font-family: monospace;
        color: ${cssManager.bdTheme('#888', '#666')};
        flex-shrink: 0;
        min-width: 200px;
      }
    `}
  </style>

  <div class="demo-container">
    <div class="demo-section">
      <h3>Basic Label</h3>
      <p>A simple text label with no additional indicators.</p>
      <div class="label-grid">
        <div class="label-row">
          <span class="annotation">label="Username"</span>
          <dees-label .label=${'Username'}></dees-label>
        </div>
        <div class="label-row">
          <span class="annotation">label="Email Address"</span>
          <dees-label .label=${'Email Address'}></dees-label>
        </div>
      </div>
    </div>

    <div class="demo-section">
      <h3>Required Indicator</h3>
      <p>When <code>required</code> is set, a red asterisk appears after the label text.</p>
      <div class="label-grid">
        <div class="label-row">
          <span class="annotation">required=${'{true}'}</span>
          <dees-label .label=${'Full Name'} .required=${true}></dees-label>
        </div>
        <div class="label-row">
          <span class="annotation">required=${'{false}'} (default)</span>
          <dees-label .label=${'Nickname'} .required=${false}></dees-label>
        </div>
      </div>
    </div>

    <div class="demo-section">
      <h3>Description (Info Icon)</h3>
      <p>When <code>description</code> is set, an info icon appears next to the label. Hover over it to see the tooltip.</p>
      <div class="label-grid">
        <div class="label-row">
          <span class="annotation">description="..."</span>
          <dees-label .label=${'API Key'} .description=${'Your API key can be found in the developer settings dashboard.'}></dees-label>
        </div>
        <div class="label-row">
          <span class="annotation">short description</span>
          <dees-label .label=${'Region'} .description=${'Select your nearest datacenter.'}></dees-label>
        </div>
      </div>
    </div>

    <div class="demo-section">
      <h3>Required + Description</h3>
      <p>Both indicators can be combined. The asterisk appears first, then the info icon.</p>
      <div class="label-grid">
        <div class="label-row">
          <span class="annotation">required + description</span>
          <dees-label .label=${'Password'} .required=${true} .description=${'Must be at least 8 characters with one uppercase letter and one number.'}></dees-label>
        </div>
        <div class="label-row">
          <span class="annotation">required + description</span>
          <dees-label .label=${'Email Address'} .required=${true} .description=${'We will send a verification link to this address.'}></dees-label>
        </div>
      </div>
    </div>

    <div class="demo-section">
      <h3>Empty Label</h3>
      <p>When <code>label</code> is empty or not set, nothing is rendered. The element below has no label text:</p>
      <div class="label-grid">
        <div class="label-row">
          <span class="annotation">label="" (empty)</span>
          <dees-label .label=${''}></dees-label>
        </div>
      </div>
    </div>
  </div>
`;