diff --git a/README.md b/README.md index 69f59c8..a46c694 100644 --- a/README.md +++ b/README.md @@ -264,6 +264,75 @@ export class AppComponent { } ``` +### Card Components + +**Selectors:** `ui-card`, `ui-card-title`, `ui-card-menu`, `ui-card-footer` +**Description:** Zestaw komponentów do tworzenia kart z opcjonalnym nagłówkiem, menu i stopką. + +**CardComponent (`ui-card`) Properties:** +- `title?: string` - Tytuł karty wyświetlany w nagłówku +- `margin: 0.5rem` - Domyślny margin karty +- Kolory jak ui-menu (--ui-color-menu-bg, --ui-color-menu-text) + +**Standalone Components:** +- `ui-card-title` - Tytuł karty z własnymi stylami +- `ui-card-menu` - Menu/przyciski w nagłówku +- `ui-card-footer` - Stopka karty z własnymi stylami + +**Usage:** +```html + + +

Zawartość karty

+ + + + + + + + + +
+
+ 123 + Użytkownicy +
+
+ + + Ostatnia aktualizacja: dziś + + + + + + +
+ + Raporty sprzedaży +
+ + + + +12% + + +
+ +
+ +``` + +**CSS Variables:** +- `--ui-color-card-bg` - tło karty +- `--ui-color-card-border` - kolor obramowania +- `--ui-color-card-title` - kolor tytułu +- `--ui-color-card-text` - kolor tekstu +- `--ui-color-card-footer-bg` - tło stopki +- `--ui-shadow-card` - standardowy cień karty +- `--ui-shadow-card-hover` - cień przy hover + ## Development ### Building diff --git a/src/lib/components/card/README.md b/src/lib/components/card/README.md new file mode 100644 index 0000000..73b46ee --- /dev/null +++ b/src/lib/components/card/README.md @@ -0,0 +1,186 @@ +# Card Components + +Zestaw komponentów do tworzenia kart z opcjonalnym nagłówkiem, menu i stopką. + +## Komponenty + +- `ui-card` - główny kontener karty +- `ui-card-title` - tytuł karty (standalone komponent) +- `ui-card-menu` - menu/przyciski w nagłówku (standalone komponent) +- `ui-card-footer` - stopka karty (standalone komponent) + +## Użycie + +### Podstawowe użycie z tytułem jako Input + +```html + +

Zawartość karty

+ +``` + +### Użycie z komponentem ui-card-title + +```html + + +

Niestandardowy tytuł

+ Nowy + +

Zawartość karty

+ +``` + +### Pełne użycie z wszystkimi komponentami + +```html + + + + + + +
+
+ 123 + Użytkownicy +
+
+ 456 + Zamówienia +
+
+ + + Ostatnia aktualizacja: dziś + + +``` + +### Użycie z komponentami ui-card-title i ui-card-menu + +```html + + +
+ + Raporty sprzedaży +
+ + + +
+ +12% +
+ + + +
+ +
+ + +
+ Okres: ostatnie 30 dni + Zobacz więcej +
+ + +``` + +## API + +### CardComponent (`ui-card`) + +**Inputs:** +| Właściwość | Typ | Domyślna | Opis | +|------------|-----|----------|------| +| `title` | `string` | `undefined` | Tytuł karty wyświetlany w nagłówku | + +**Content Projection:** +| Selektor | Opis | +|----------|------| +| `ui-card-title` | Komponent tytułu karty | +| `ui-card-menu` | Komponent menu w nagłówku | +| (default) | Główna zawartość karty | +| `ui-card-footer` | Komponent stopki karty | + +### CardTitleComponent (`ui-card-title`) + +**Opis:** Standalone komponent do wyświetlania tytułu karty z własnymi stylami. + +### CardMenuComponent (`ui-card-menu`) + +**Opis:** Standalone komponent do wyświetlania menu/przycisków w nagłówku karty. + +### CardFooterComponent (`ui-card-footer`) + +**Opis:** Standalone komponent do wyświetlania stopki karty z własnymi stylami. + +## Zmienne CSS + +Komponent używa następujących zmiennych CSS z systemu motywów: + +### Kolory +- `--ui-color-card-bg` - tło karty +- `--ui-color-card-border` - kolor obramowania +- `--ui-color-card-title` - kolor tytułu +- `--ui-color-card-text` - kolor tekstu +- `--ui-color-card-footer-bg` - tło stopki + +### Spacing +- `--ui-spacing-xs` (4px) - małe odstępy +- `--ui-spacing-sm` (8px) - średnie odstępy +- `--ui-spacing-md` (16px) - standardowe padding +- `--ui-spacing-lg` (24px) - duże odstępy + +### Layout +- `--ui-border-radius` (8px) - zaokrąglenie rogów +- `--ui-font-size-lg` (18px) - rozmiar czcionki tytułu +- `--ui-font-weight-semibold` (600) - grubość czcionki tytułu +- `--ui-card-header-min-height` (40px) - minimalna wysokość nagłówka + +### Cienie +- `--ui-shadow-card` - standardowy cień karty +- `--ui-shadow-card-hover` - cień przy hover + +## Responsywność + +Na urządzeniach mobilnych (max-width: 768px): +- Nagłówek karty zmienia się na układ kolumnowy +- Menu wyrównuje się do prawej strony +- Zachowane są wszystkie funkcjonalności + +## Przykłady stylizacji + +### Karta z kolorowym nagłówkiem + +```scss +.custom-card { + .ui-card-header { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + margin: -16px -16px 0; + padding: 16px; + } + + .ui-card-title { + color: white; + } +} +``` + +### Karta z ikoną + +```html + + +
+ + Ustawienia +
+ + + + +``` diff --git a/src/lib/components/card/card-footer/card-footer.component.scss b/src/lib/components/card/card-footer/card-footer.component.scss new file mode 100644 index 0000000..74fcf37 --- /dev/null +++ b/src/lib/components/card/card-footer/card-footer.component.scss @@ -0,0 +1,11 @@ +:host { + display: block; + padding: 0 var(--ui-spacing-md, 16px) var(--ui-spacing-md, 16px); + border-top: 1px solid var(--ui-color-menu-border, #d0d0d0); + background: var(--ui-color-menu-active, rgba(0, 0, 0, 0.1)); + color: var(--ui-color-menu-text, #ffffff); + + &:empty { + display: none; + } +} \ No newline at end of file diff --git a/src/lib/components/card/card-footer/card-footer.component.ts b/src/lib/components/card/card-footer/card-footer.component.ts new file mode 100644 index 0000000..774a523 --- /dev/null +++ b/src/lib/components/card/card-footer/card-footer.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ui-card-footer', + standalone: true, + imports: [], + template: '', + styleUrl: './card-footer.component.scss' +}) +export class CardFooterComponent { + +} diff --git a/src/lib/components/card/card-menu/card-menu.component.scss b/src/lib/components/card/card-menu/card-menu.component.scss new file mode 100644 index 0000000..6d2116a --- /dev/null +++ b/src/lib/components/card/card-menu/card-menu.component.scss @@ -0,0 +1,7 @@ +:host { + display: flex; + gap: var(--ui-spacing-sm, 8px); + align-items: flex-start; + flex-shrink: 0; + padding: 1rem; +} diff --git a/src/lib/components/card/card-menu/card-menu.component.ts b/src/lib/components/card/card-menu/card-menu.component.ts new file mode 100644 index 0000000..a1b8508 --- /dev/null +++ b/src/lib/components/card/card-menu/card-menu.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ui-card-menu', + standalone: true, + imports: [], + template: '', + styleUrl: './card-menu.component.scss' +}) +export class CardMenuComponent { + +} diff --git a/src/lib/components/card/card-title/card-title.component.scss b/src/lib/components/card/card-title/card-title.component.scss new file mode 100644 index 0000000..f86a8a5 --- /dev/null +++ b/src/lib/components/card/card-title/card-title.component.scss @@ -0,0 +1,9 @@ +:host { + display: block; + margin: 0; + font-size: var(--ui-font-size-lg, 18px); + font-weight: var(--ui-font-weight-semibold, 600); + color: var(--ui-color-menu-text, #ffffff); + line-height: 1.2; + padding: 1rem; +} diff --git a/src/lib/components/card/card-title/card-title.component.ts b/src/lib/components/card/card-title/card-title.component.ts new file mode 100644 index 0000000..ce9a928 --- /dev/null +++ b/src/lib/components/card/card-title/card-title.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ui-card-title', + standalone: true, + imports: [], + template: ``, + styleUrl: './card-title.component.scss' +}) +export class CardTitleComponent { + +} diff --git a/src/lib/components/card/card.component.html b/src/lib/components/card/card.component.html index f2fda25..dc2607b 100644 --- a/src/lib/components/card/card.component.html +++ b/src/lib/components/card/card.component.html @@ -1 +1,15 @@ -

card works!

+
+ @if (title) { +
{{ title }}
+ } @else { + + } + + +
+ +
+ +
+ + diff --git a/src/lib/components/card/card.component.scss b/src/lib/components/card/card.component.scss index e69de29..344988a 100644 --- a/src/lib/components/card/card.component.scss +++ b/src/lib/components/card/card.component.scss @@ -0,0 +1,23 @@ +:host { + display: block; + margin: var(--ui-spacing-sm, 0.5rem); + background: var(--ui-color-menu-bg, #343a40); + border: 1px solid var(--ui-color-menu-border, #d0d0d0); + border-radius: var(--ui-border-radius, 8px); + box-shadow: var(--ui-shadow-card, 0 2px 4px rgba(0, 0, 0, 0.1)); + overflow: hidden; + transition: box-shadow 0.2s ease; +} + +.content { + padding: var(--ui-spacing-md, 16px); + color: var(--ui-color-menu-text, #ffffff); + line-height: 1.5; +} +.header{ + display: flex; + .title, + ::ng-deep ui-card-title{ + flex-grow: 1; + } +} diff --git a/src/lib/components/card/card.component.ts b/src/lib/components/card/card.component.ts index 2d4f2e6..f04a8b1 100644 --- a/src/lib/components/card/card.component.ts +++ b/src/lib/components/card/card.component.ts @@ -1,11 +1,13 @@ -import { Component } from '@angular/core'; +import { Component, Input } from '@angular/core'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'ui-card', - imports: [], + standalone: true, + imports: [CommonModule], templateUrl: './card.component.html', styleUrl: './card.component.scss' }) export class CardComponent { - + @Input() title?: string; } diff --git a/src/lib/styles/_theme-mixins.scss b/src/lib/styles/_theme-mixins.scss index ff7ce50..aaa2ea9 100644 --- a/src/lib/styles/_theme-mixins.scss +++ b/src/lib/styles/_theme-mixins.scss @@ -41,6 +41,27 @@ --ui-color-icon-primary: #{$primary}; --ui-color-icon-secondary: #{$secondary}; --ui-color-icon-muted: color-mix(in srgb, #{$text} 60%, transparent 40%); + + /* Card component variables */ + --ui-color-card-bg: #{if($background == #343a40, #ffffff, color-mix(in srgb, #{$background} 95%, white 5%))}; + --ui-color-card-border: #{$border}; + --ui-color-card-title: #{$primary}; + --ui-color-card-text: #{if($text == #ffffff, #333333, $text)}; + --ui-color-card-footer-bg: #{if($background == #343a40, #f8f9fa, color-mix(in srgb, #{$background} 90%, white 10%))}; + + /* Card spacing and layout variables */ + --ui-spacing-xs: 4px; + --ui-spacing-sm: 8px; + --ui-spacing-md: 16px; + --ui-spacing-lg: 24px; + --ui-border-radius: 8px; + --ui-font-size-lg: 18px; + --ui-font-weight-semibold: 600; + --ui-card-header-min-height: 40px; + + /* Card shadows */ + --ui-shadow-card: 0 2px 4px rgba(0, 0, 0, 0.1); + --ui-shadow-card-hover: 0 4px 8px rgba(0, 0, 0, 0.15); } /** @@ -83,4 +104,31 @@ } } +/** + * Mixin that applies theme-aware styles to card components + */ +@mixin ui-card-theme() { + background: var(--ui-color-card-bg); + border: 1px solid var(--ui-color-card-border); + border-radius: var(--ui-border-radius); + box-shadow: var(--ui-shadow-card); + + &:hover { + box-shadow: var(--ui-shadow-card-hover); + } + + .ui-card-title { + color: var(--ui-color-card-title); + } + + .ui-card-content { + color: var(--ui-color-card-text); + } + + .ui-card-footer { + background: var(--ui-color-card-footer-bg); + border-top-color: var(--ui-color-card-border); + } +} + diff --git a/src/public-api.ts b/src/public-api.ts index 0d7c441..42b5eb7 100644 --- a/src/public-api.ts +++ b/src/public-api.ts @@ -17,3 +17,6 @@ export * from './lib/modules/form/components/input/input.component'; // Components export * from './lib/components/button/button.component'; export * from './lib/components/card/card.component'; +export * from './lib/components/card/card-title/card-title.component'; +export * from './lib/components/card/card-menu/card-menu.component'; +export * from './lib/components/card/card-footer/card-footer.component';