Refactors design system documentation and layout
Updates design system documentation with comprehensive component overview Enhances UI layout across multiple pages with consistent styling and new components Adds support for charts, pagination, and responsive design elements Improves overall system documentation and visual consistency
This commit is contained in:
Janus C. H. Knudsen
parent
35b15294e3
commit
fac7754d7a
14 changed files with 3492 additions and 281 deletions
221
docs/design-system.md
Normal file
221
docs/design-system.md
Normal file
|
|
@ -0,0 +1,221 @@
|
|||
# SWP Design System - UI/UX Dokumentation
|
||||
|
||||
## Oversigt
|
||||
|
||||
Dette dokument beskriver det komponent-baserede design system udviklet til Salon OS SaaS platformen gennem POC-udvikling. Systemet består af **150+ custom HTML elementer** med `swp-` prefix.
|
||||
|
||||
---
|
||||
|
||||
## Design Principper
|
||||
|
||||
- **Custom Elements**: Alle komponenter bruger semantiske `swp-*` tags
|
||||
- **CSS Variables**: Theming via `--color-*` variabler (light/dark mode)
|
||||
- **Responsive**: Mobile-first med grid breakpoints
|
||||
- **Konsistent spacing**: 4px base unit (4, 8, 12, 16, 20, 24px)
|
||||
|
||||
---
|
||||
|
||||
## Farvepalette (CSS Variables)
|
||||
|
||||
```css
|
||||
--color-surface: #fff / #1e1e1e
|
||||
--color-background: #f5f5f5 / #121212
|
||||
--color-border: #e0e0e0 / #333
|
||||
--color-text: #333 / #e0e0e0
|
||||
--color-text-secondary: #666 / #999
|
||||
--color-teal: #00897b (primary)
|
||||
--color-blue: #1976d2
|
||||
--color-green: #43a047 (success)
|
||||
--color-amber: #f59e0b (warning)
|
||||
--color-red: #e53935 (error)
|
||||
--color-purple: #8b5cf6
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Typografi
|
||||
|
||||
```css
|
||||
--font-family: 'Poppins', sans-serif
|
||||
--font-mono: 'JetBrains Mono', monospace
|
||||
```
|
||||
|
||||
| Størrelse | Brug |
|
||||
|-----------|------|
|
||||
| 22px | Stat values |
|
||||
| 16px | Page titles |
|
||||
| 14px | Body text |
|
||||
| 13px | Table cells, inputs |
|
||||
| 12px | Labels, hints |
|
||||
| 11px | Table headers (uppercase) |
|
||||
|
||||
---
|
||||
|
||||
## Komponent-katalog
|
||||
|
||||
### 1. Layout & Container
|
||||
|
||||
| Element | Beskrivelse |
|
||||
|---------|-------------|
|
||||
| `swp-page` | Hovedpage wrapper |
|
||||
| `swp-page-container` | Max-width container (1400px) |
|
||||
| `swp-card` | Kortkomponent med border og shadow |
|
||||
| `swp-card-header` | Kortheader med titel |
|
||||
| `swp-drawer` | Slide-in panel fra højre |
|
||||
| `swp-drawer-overlay` | Mørk overlay bag drawer |
|
||||
| `swp-two-columns` | To-kolonne layout |
|
||||
|
||||
### 2. Navigation
|
||||
|
||||
| Element | Beskrivelse |
|
||||
|---------|-------------|
|
||||
| `swp-topbar` | Sticky header bar |
|
||||
| `swp-topbar-left/right` | Flex containers i topbar |
|
||||
| `swp-page-title` | Sidetitel i topbar |
|
||||
| `swp-back-link` | Tilbage-navigation med ikon |
|
||||
| `swp-tabs` | Tab navigation |
|
||||
| `swp-tab` | Enkelt tab |
|
||||
|
||||
### 3. Formularer
|
||||
|
||||
| Element | Beskrivelse |
|
||||
|---------|-------------|
|
||||
| `swp-form-field` | Wrapper for label + input |
|
||||
| `swp-form-label` | Form label |
|
||||
| `swp-form-input` | Input wrapper |
|
||||
| `swp-form-row` | Horisontal gruppe af felter |
|
||||
| `swp-form-hint` | Hjælpetekst under felt |
|
||||
| `swp-toggle-slider` | On/off toggle |
|
||||
| `swp-edit-section` | Redigerbar sektion |
|
||||
| `swp-edit-row` | Label + værdi row |
|
||||
|
||||
### 4. Tabeller
|
||||
|
||||
| Element | Beskrivelse |
|
||||
|---------|-------------|
|
||||
| `swp-table` | Hovedtabel container |
|
||||
| `swp-table-header` | Header row (grid) |
|
||||
| `swp-table-body` | Body container |
|
||||
| `swp-table-row` | Data row (grid) |
|
||||
| `swp-th` | Header cell |
|
||||
| `swp-td` | Data cell |
|
||||
| `swp-table-footer` | Footer med pagination |
|
||||
| `swp-row-arrow` | Klik-indikator pil |
|
||||
|
||||
### 5. Statistik
|
||||
|
||||
| Element | Beskrivelse |
|
||||
|---------|-------------|
|
||||
| `swp-stats-bar` | Grid af stat cards |
|
||||
| `swp-stat-card` | Enkelt statistik kort |
|
||||
| `swp-stat-value` | Stor tal (mono font) |
|
||||
| `swp-stat-label` | Beskrivelse under tal |
|
||||
| `swp-stat-change` | Ændring indikator (+/-) |
|
||||
|
||||
### 6. Søgning & Filtrering
|
||||
|
||||
| Element | Beskrivelse |
|
||||
|---------|-------------|
|
||||
| `swp-filter-bar` | Filterpanel |
|
||||
| `swp-search-input` | Søgefelt med ikon |
|
||||
| `swp-filter-group` | Label + select/input |
|
||||
| `swp-filter-label` | Filter label |
|
||||
|
||||
### 7. Badges & Status
|
||||
|
||||
| Element | Beskrivelse | Klasser |
|
||||
|---------|-------------|---------|
|
||||
| `swp-status-badge` | Status indikator | `.paid`, `.pending`, `.credited` |
|
||||
| `swp-payment-badge` | Betalingsmetode | `.card`, `.cash`, `.mobilepay` |
|
||||
| `swp-tag` | Inline tag | `.vip`, `.new` |
|
||||
|
||||
### 8. Buttons
|
||||
|
||||
| Element | Beskrivelse | Klasser |
|
||||
|---------|-------------|---------|
|
||||
| `swp-btn` | Standard button | `.primary`, `.secondary`, `.danger` |
|
||||
|
||||
### 9. Charts (swp-charting)
|
||||
|
||||
| Element | Beskrivelse |
|
||||
|---------|-------------|
|
||||
| `swp-chart-card` | Chart wrapper kort |
|
||||
| `swp-chart-header` | Titel + hint |
|
||||
| `swp-chart-container` | Canvas container |
|
||||
|
||||
### 10. Specialiserede Komponenter
|
||||
|
||||
#### Kunde
|
||||
- `swp-customer-avatar` - Rund avatar
|
||||
- `swp-customer-cell` - Navn + telefon
|
||||
- `swp-customer-header` - Profil header
|
||||
|
||||
#### Medarbejder
|
||||
- `swp-employee-avatar` - Medarbejder billede
|
||||
- `swp-employee-name` - Navn display
|
||||
|
||||
#### Faktura
|
||||
- `swp-invoice-cell` - Fakturanummer
|
||||
- `swp-datetime-cell` - Dato + tid
|
||||
- `swp-amount-cell` - Beløb (højre-justeret)
|
||||
|
||||
#### Produkt
|
||||
- `swp-variants-table` - Variant liste
|
||||
- `swp-stock-display` - Lagerstatus
|
||||
- `swp-margin-display` - Avance visning
|
||||
|
||||
#### Booking/AI
|
||||
- `swp-gap-card` - Ledigt hul kort
|
||||
- `swp-suggestion-item` - AI forslag
|
||||
- `swp-optimization-score` - Score cirkel
|
||||
|
||||
---
|
||||
|
||||
## Pagination
|
||||
|
||||
```html
|
||||
<swp-pagination>
|
||||
<swp-page-btn><i class="ph ph-caret-left"></i></swp-page-btn>
|
||||
<swp-page-btn class="active">1</swp-page-btn>
|
||||
<swp-page-btn>2</swp-page-btn>
|
||||
<swp-page-btn>...</swp-page-btn>
|
||||
<swp-page-btn><i class="ph ph-caret-right"></i></swp-page-btn>
|
||||
</swp-pagination>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Ikoner
|
||||
|
||||
Bruger **Phosphor Icons** via CDN:
|
||||
```html
|
||||
<script src="https://unpkg.com/@phosphor-icons/web@2.1.1"></script>
|
||||
<i class="ph ph-magnifying-glass"></i>
|
||||
<i class="ph ph-caret-right"></i>
|
||||
<i class="ph ph-credit-card"></i>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## POC Filer (Reference)
|
||||
|
||||
| Fil | Domæne |
|
||||
|-----|--------|
|
||||
| `poc-salg.html` | Salgsoversigt, fakturaer |
|
||||
| `poc-customer-list.html` | Kundeliste |
|
||||
| `poc-customer-detail.html` | Kundeprofil |
|
||||
| `poc-employee.html` | Medarbejderprofil |
|
||||
| `poc-produkt.html` | Produktdetaljer |
|
||||
| `poc-gavekort.html` | Fordelskort |
|
||||
| `poc-kasseafstemninger.html` | Kasseafstemning |
|
||||
| `poc-rapport.html` | Rapporter |
|
||||
| `poc-indstillinger.html` | Indstillinger |
|
||||
|
||||
---
|
||||
|
||||
## Næste Skridt: .NET Core Implementation
|
||||
|
||||
Når design systemet er dokumenteret, er næste fase at implementere:
|
||||
1. Backend API endpoints
|
||||
2. Database modeller
|
||||
3. Razor/Blazor komponenter baseret på swp-* elementer
|
||||
Loading…
Add table
Add a link
Reference in a new issue