Janus007/PlanTempusApp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
PlanTempusApp/PlanTempus.Application/wwwroot/css/COMPONENT-CATALOG.md
Janus C. H. Knudsen 29f9c79764 CSS optimization
2026-01-14 00:47:06 +01:00

14 KiB
Raw Blame History

SWP Design System - Component Catalog

Reference for alle genbrugelige komponenter. LAV ALDRIG EN NY KOMPONENT HVIS DEN ALLEREDE EKSISTERER HER.

Base Patterns (components.css)

VIGTIGT: Disse base patterns skal ALTID bruges som foundation for nye features.

Grid + Subgrid Table Pattern

Alle tabeller skal bruge dette pattern:

<swp-feature-table>
  <swp-feature-table-header> <!-- extends swp-table-header-base -->
    <swp-feature-cell>Kolonne 1</swp-feature-cell>
  </swp-feature-table-header>
  <swp-feature-table-body> <!-- extends swp-table-body-base -->
    <swp-feature-row> <!-- extends swp-table-row-base -->
      <swp-feature-cell>Data</swp-feature-cell>
    </swp-feature-row>
  </swp-feature-table-body>
</swp-feature-table>

CSS Pattern:

swp-feature-table {
  display: grid;
  grid-template-columns: /* feature-specific */;
}

swp-feature-table-header,
swp-feature-table-body {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

swp-feature-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
}

List Item Pattern

Alle lister (notifikationer, bookinger, attentions) bruger:

<swp-feature-list> <!-- display: contents -->
  <swp-feature-item> <!-- extends swp-list-item-base -->
    <!-- content -->
  </swp-feature-item>
</swp-feature-list>

Icon Container Pattern

Standard icon wrapper (40×40px cirkel):

<swp-icon-container>
  <i class="ph ph-icon"></i>
</swp-icon-container>

Page Structure (page.css)

Element Beskrivelse Eksempel
swp-page-container Hovedcontainer for side <swp-page-container>...</swp-page-container>
swp-page-header Side header med titel og actions Flex, space-between
swp-page-title Titel-wrapper med h1 og p h1 + subtitle
swp-page-actions Action buttons i header Flex gap
swp-card Standard card wrapper Border, padding, rounded
swp-section-label Card section label Uppercase, 11px, border-bottom
swp-section-header Wrapper for label + action Flex, space-between
swp-section-action Action link i section header Teal, clickable
swp-card-content Card indhold Block

Card Header Eksempler

Simpel label (uden action):

<swp-card>
    <swp-section-label>Kontakter</swp-section-label>
    <swp-card-content>...</swp-card-content>
</swp-card>

Label med action:

<swp-card>
    <swp-section-header>
        <swp-section-label>Dagens bookinger</swp-section-label>
        <swp-section-action>Se alle</swp-section-action>
    </swp-section-header>
    <swp-card-content>...</swp-card-content>
</swp-card>

Stats Components (stats.css)

Containers

Element Kolonner Brug
swp-stats-bar 4 kolonner Dashboard stats
swp-stats-grid 4 kolonner Grid layout
swp-stats-row 3 kolonner Feature pages (Employees, etc.)

Stat Card

<swp-stat-card class="[variant]">
    <swp-stat-value>42</swp-stat-value>
    <swp-stat-label>Aktive brugere</swp-stat-label>
</swp-stat-card>

Varianter (class):

  • highlight / teal - Teal farve
  • success - Grøn
  • warning / amber - Amber/orange
  • danger / negative / red - Rød
  • purple - Lilla
  • highlight filled - Filled teal baggrund

VIGTIGT: swp-stat-value bruger font-family: var(--font-mono) automatisk!

Tabs (tabs.css)

<swp-tab-bar>
    <swp-tab class="active" data-tab="users">
        <i class="ph ph-users"></i>
        <span>Brugere</span>
    </swp-tab>
    <swp-tab data-tab="roles">
        <i class="ph ph-shield-check"></i>
        <span>Roller</span>
    </swp-tab>
</swp-tab-bar>

<swp-tab-content data-tab="users" class="active">
    <!-- Content -->
</swp-tab-content>

<swp-tab-content data-tab="roles">
    <!-- Content -->
</swp-tab-content>

VIGTIGT:

  • Aktiv tab: class="active" (IKKE data-active="true")
  • Tab content: class="active" for at vise

Buttons (cash.css)

<swp-btn class="primary">
    <i class="ph ph-plus"></i>
    Tilføj
</swp-btn>

Varianter:

  • primary - Teal baggrund, hvid tekst
  • secondary - Hvid baggrund, border
  • ghost - Transparent

Badges (cash.css)

ALLE badges bruger swp-status-badge - kun farve og indhold ændres.

<swp-status-badge class="[variant]">Tekst</swp-status-badge>

Varianter:

Class Farve Brug
approved Grøn Godkendt status
active Grøn Aktiv status
paid Grøn Betalt status
draft Amber Kladde status
invited Amber Invitation sendt
pending Amber Afventer status
owner Teal Ejer rolle
admin Purple Admin rolle
leader Blue Leder rolle
employee Grå Medarbejder rolle

Automatisk dot via ::before pseudo-element.

Tables - Grid + Subgrid Pattern

Struktur (ALTID følg dette mønster)

<swp-[feature]-table>
    <swp-[feature]-table-header>
        <swp-[feature]-cell>Kolonne 1</swp-[feature]-cell>
        <swp-[feature]-cell>Kolonne 2</swp-[feature]-cell>
    </swp-[feature]-table-header>
    <swp-[feature]-table-body>
        <swp-[feature]-row>
            <swp-[feature]-cell>Data 1</swp-[feature]-cell>
            <swp-[feature]-cell>Data 2</swp-[feature]-cell>
        </swp-[feature]-row>
    </swp-[feature]-table-body>
</swp-[feature]-table>

CSS Pattern

swp-[feature]-table {
  display: grid;
  grid-template-columns: /* definer kolonner her */;
}

swp-[feature]-table-header,
swp-[feature]-table-body {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

swp-[feature]-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
}

Eksisterende tabeller

Feature Container Row CSS fil
Cash swp-cash-table swp-cash-table-row cash.css
Employees swp-employee-table swp-employee-row employees.css
Salary swp-salary-table swp-salary-table-row employees.css
Data (generisk) swp-data-table swp-data-table-row components.css
Bookings (dashboard) swp-booking-list swp-booking-item bookings.css
Notifications swp-notification-list swp-notification-item notifications.css
Attentions swp-attention-list swp-attention-item attentions.css

Table Cells - Standard Styling

/* Header cells */
swp-[feature]-table-header swp-[feature]-cell {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary);
}

/* Body cells */
swp-[feature]-cell {
  padding: var(--spacing-5);
  font-size: var(--font-size-base);  /* ALTID base, ikke sm */
  color: var(--color-text);
}

Icon Buttons (employees.css)

<swp-table-actions>
    <swp-icon-btn title="Rediger">
        <i class="ph ph-pencil"></i>
    </swp-icon-btn>
    <swp-icon-btn class="danger" title="Slet">
        <i class="ph ph-trash"></i>
    </swp-icon-btn>
</swp-table-actions>

Edit Forms (employees.css)

Key-value display med valgfri redigering. Bruger Grid + Subgrid for alignment.

Basis struktur

<swp-edit-section>
    <swp-edit-row>
        <swp-edit-label>Label tekst</swp-edit-label>
        <swp-edit-value>Værdi</swp-edit-value>
    </swp-edit-row>
    <swp-edit-row>
        <swp-edit-label>Med redigering</swp-edit-label>
        <swp-edit-value contenteditable="true">Redigerbar værdi</swp-edit-value>
    </swp-edit-row>
</swp-edit-section>

Med select dropdown

<swp-edit-section>
    <swp-edit-row>
        <swp-edit-label>Vælg type</swp-edit-label>
        <swp-edit-select>
            <select>
                <option>Option 1</option>
                <option>Option 2</option>
            </select>
        </swp-edit-select>
    </swp-edit-row>
</swp-edit-section>

Mono-font for tal

<swp-edit-value class="mono">131,49 kr</swp-edit-value>

User Info Pattern (employees.css)

<swp-user-info>
    <swp-user-avatar class="[color]">MJ</swp-user-avatar>
    <swp-user-details>
        <swp-user-name>Maria Jensen</swp-user-name>
        <swp-user-email>maria@example.com</swp-user-email>
    </swp-user-details>
</swp-user-info>

Avatar farver: (ingen class = teal), purple, blue, amber

Document List (employees.css)

Genbruges til dokumenter, certificeringer, kurser og lignende lister.

<swp-document-list>
    <swp-document-item>
        <i class="ph ph-file-pdf"></i>
        <swp-document-info>
            <swp-document-name>Ansættelseskontrakt.pdf</swp-document-name>
            <swp-document-meta>Uploadet 1. aug 2019</swp-document-meta>
        </swp-document-info>
        <swp-document-actions>
            <swp-btn class="secondary sm">Vis</swp-btn>
        </swp-document-actions>
    </swp-document-item>
</swp-document-list>

Med badge i stedet for knap:

<swp-document-item>
    <i class="ph ph-certificate"></i>
    <swp-document-info>
        <swp-document-name>Balayage Specialist</swp-document-name>
        <swp-document-meta>Udløber: 15. juni 2026</swp-document-meta>
    </swp-document-info>
    <swp-document-actions>
        <swp-status-badge class="valid">Gyldig</swp-status-badge>
    </swp-document-actions>
</swp-document-item>

Subsection (employees.css)

Til gruppering af lister (f.eks. "Gennemførte kurser" / "Planlagte kurser").

<swp-subsection>
    <swp-subsection-title>Gennemførte kurser</swp-subsection-title>
    <swp-document-list>
        <!-- items -->
    </swp-document-list>
</swp-subsection>

Simple List (employees.css)

Simpel liste med tekst + badge (f.eks. planlagt fravær).

<swp-simple-list>
    <swp-simple-item>
        <swp-simple-item-text>23. dec – 2. jan 2026</swp-simple-item-text>
        <swp-status-badge class="ferie">Ferie</swp-status-badge>
    </swp-simple-item>
</swp-simple-list>

Salary Table (employees.css)

Bruger Grid + Subgrid mønsteret.

<swp-salary-table>
    <swp-salary-table-header>
        <swp-salary-table-cell>Periode</swp-salary-table-cell>
        <swp-salary-table-cell>Bruttoløn</swp-salary-table-cell>
        <swp-salary-table-cell></swp-salary-table-cell>
    </swp-salary-table-header>
    <swp-salary-table-body>
        <swp-salary-table-row>
            <swp-salary-table-cell>Januar 2026</swp-salary-table-cell>
            <swp-salary-table-cell class="mono">34.063,50 kr</swp-salary-table-cell>
            <swp-salary-table-cell><i class="ph ph-caret-right"></i></swp-salary-table-cell>
        </swp-salary-table-row>
    </swp-salary-table-body>
</swp-salary-table>

Rækker har hover-effekt og chevron bliver teal ved hover.

Data Table - Generisk (components.css)

Generisk tabel med Grid + Subgrid.

Struktur:

  • swp-data-table = grid (kolonner i feature CSS)
  • swp-data-table-header = subgrid (celler direkte i)
  • swp-data-table-row = subgrid
  • swp-data-table-cell = celler

Brug: Wrap i container med klasse der definerer kolonner.

/* I feature CSS (f.eks. employees.css) */
.stats-bookings swp-data-table {
  grid-template-columns: 90px 60px 1fr 1fr 80px 100px 100px;
}

/* Kolonne-specifik styling med nth-child */
.stats-bookings swp-data-table-row swp-data-table-cell:nth-child(1),
.stats-bookings swp-data-table-row swp-data-table-cell:nth-child(2) {
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
}

<swp-card class="stats-bookings">
    <swp-data-table>
        <swp-data-table-header>
            <swp-data-table-cell>Kolonne 1</swp-data-table-cell>
            <swp-data-table-cell>Kolonne 2</swp-data-table-cell>
        </swp-data-table-header>
        <swp-data-table-row>
            <swp-data-table-cell>Data 1</swp-data-table-cell>
            <swp-data-table-cell>Data 2</swp-data-table-cell>
        </swp-data-table-row>
    </swp-data-table>
</swp-card>

Kolonne-styling: Brug nth-child() i feature CSS frem for klasser på celler.

Add Button (components.css)

Dashed border knap til tilføjelse af elementer.

<swp-add-button>+ Upload dokument</swp-add-button>
<swp-add-button>+ Tilføj certificering</swp-add-button>

Styling: Dashed border, centreret, hover → teal border og tekst.

Design Tokens (design-tokens.css)

Farver

Token Brug
--color-teal Primary brand, success
--color-green Success, positive
--color-amber Warning, pending
--color-red Error, danger
--color-purple Special, AI
--color-blue Info

Spacing

--spacing-1: 2px;
--spacing-2: 4px;
--spacing-3: 6px;
--spacing-4: 8px;
--spacing-5: 10px;
--spacing-6: 12px;
--spacing-7: 14px;
--spacing-8: 16px;
--spacing-10: 20px;
--spacing-12: 24px;

Font Sizes

--font-size-xs: 11px;
--font-size-sm: 12px;
--font-size-md: 13px;
--font-size-base: 14px;  /* Standard body text */
--font-size-lg: 16px;
--font-size-xl: 18px;
--font-size-2xl: 20px;
--font-size-3xl: 22px;

Font Families

--font-family: 'Poppins', sans-serif;
--font-mono: 'JetBrains Mono', monospace;  /* Til tal/værdier */

Checklist for Ny Side

  1. Læs denne fil
  2. List UI elementer der skal bruges
  3. Match hver element med eksisterende komponent
  4. Dokumenter kun NYE elementer der skal oprettes
  5. Opret feature CSS med header der angiver genbrugte komponenter
  6. Brug var(--font-size-base) for body text
  7. Brug var(--font-mono) kun for tal/værdier

Fil Reference

Fil Indhold
design-tokens.css Farver, spacing, fonts, shadows
design-system.css Base resets, typography
page.css Page structure
components.css Buttons, badges, cards, section-label, add-button, avatars, icon-btn, data-table
stats.css Stat cards, stat rows
tabs.css Tab bar, tab content
employees.css Employee table, user info, edit forms, document lists, salary table
bookings.css Booking list items
notifications.css Notification items
attentions.css Attention items