dees-catalog/ts_web/elements/dees-input-fileupload/demo.ts

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

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

        .demo-grid {
          display: grid;
          gap: 24px;
        }

        @media (min-width: 960px) {
          .demo-grid--two {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }
        }

        .demo-stack {
          display: flex;
          flex-direction: column;
          gap: 18px;
        }

        .demo-note {
          margin-top: 16px;
          padding: 16px;
          border-radius: 12px;
          border: 1px solid ${cssManager.bdTheme('hsl(217 91% 90%)', 'hsl(215 20% 26%)')};
          background: ${cssManager.bdTheme('hsl(213 100% 97%)', 'hsl(215 20% 12%)')};
          color: ${cssManager.bdTheme('hsl(215 25% 32%)', 'hsl(215 20% 82%)')};
          font-size: 13px;
          line-height: 1.55;
        }

        .demo-note strong {
          color: ${cssManager.bdTheme('hsl(217 91% 45%)', 'hsl(213 93% 68%)')};
          font-weight: 600;
        }
      `}
    </style>

    <div class="demo-shell">
      <dees-panel
        .title=${'Modern file uploader'}
        .subtitle=${'Shadcn-inspired layout with drag & drop, previews and validation'}
      >
        <div class="demo-grid demo-grid--two">
          <div class="demo-stack">
            <dees-input-fileupload
              .label=${'Attachments'}
              .description=${'Upload supporting documents for your request'}
              .accept=${'image/*,.pdf,.zip'}
              .maxSize=${10 * 1024 * 1024}
            ></dees-input-fileupload>

            <dees-input-fileupload
              .label=${'Brand assets'}
              .description=${'Upload high-resolution imagery (JPG/PNG)'}
              .accept=${'image/jpeg,image/png'}
              .multiple=${false}
              .maxSize=${5 * 1024 * 1024}
              .buttonText=${'Select cover image'}
            ></dees-input-fileupload>
          </div>

          <div class="demo-stack">
            <dees-input-fileupload
              .label=${'Audio uploads'}
              .description=${'Share podcast drafts (MP3/WAV, max 25MB each)'}
              .accept=${'audio/*'}
              .maxSize=${25 * 1024 * 1024}
            ></dees-input-fileupload>

            <dees-input-fileupload
              .label=${'Disabled example'}
              .description=${'Uploader is disabled while moderation is pending'}
              .disabled=${true}
            ></dees-input-fileupload>
          </div>
        </div>
      </dees-panel>

      <dees-panel
        .title=${'Form integration'}
        .subtitle=${'Combine file uploads with the rest of the DEES form ecosystem'}
      >
        <div class="demo-grid">
          <dees-form>
            <div class="demo-stack">
              <dees-input-text
                .label=${'Project name'}
                .description=${'How should we refer to this project internally?'}
                .required=${true}
                .key=${'projectName'}
              ></dees-input-text>

              <dees-input-text
                .label=${'Contact email'}
                .inputType=${'email'}
                .required=${true}
                .key=${'contactEmail'}
              ></dees-input-text>

              <dees-input-fileupload
                .label=${'Statement of work'}
                .description=${'Upload a signed statement of work (PDF, max 15MB)'}
                .required=${true}
                .accept=${'application/pdf'}
                .maxSize=${15 * 1024 * 1024}
                .multiple=${false}
                .key=${'sow'}
              ></dees-input-fileupload>

              <dees-input-fileupload
                .label=${'Creative references'}
                .description=${'Optional. Upload up to five visual references'}
                .accept=${'image/*'}
                .maxFiles=${5}
                .maxSize=${8 * 1024 * 1024}
                .key=${'references'}
              ></dees-input-fileupload>

              <dees-input-text
                .label=${'Notes'}
                .description=${'Add optional context for reviewers'}
                .inputType=${'textarea'}
                .key=${'notes'}
              ></dees-input-text>

              <dees-form-submit .text=${'Submit briefing'}></dees-form-submit>
            </div>
          </dees-form>

          <div class="demo-note">
            <strong>Good to know:</strong>
            <ul>
              <li>Drag & drop highlights the dropzone and supports keyboard activation.</li>
              <li>Accepted file types are summarised automatically from the <code>accept</code> attribute.</li>
              <li>Image uploads show live previews generated via <code>URL.createObjectURL</code>.</li>
              <li>File size and file-count limits surface inline validation messages.</li>
              <li>The component stays compatible with <code>dees-form</code> value accessors.</li>
            </ul>
          </div>
        </div>
      </dees-panel>
    </div>
  </dees-demowrapper>
`;