diff --git a/PROJECT_NOTES.md b/PROJECT_NOTES.md index d74e51f..b1ebec2 100644 --- a/PROJECT_NOTES.md +++ b/PROJECT_NOTES.md @@ -153,6 +153,13 @@ `Navigation & Overlays` включает tabs, dropdown, tooltip, popover. `Data Patterns` включает toolbar, search field, input group, pagination, empty state, skeleton. +Добавлены Page Header и Key-Value / Description List: + +- `src/scss/components/_page-header.scss` +- `src/scss/components/_description-list.scss` +- `demo/partials/page-header.html` +- `demo/partials/description-list.html` + Публичный JS API: - `GNexusUIKit.Helper` @@ -170,8 +177,6 @@ Ближайшие полезные additions: -- Page Header: заголовок страницы, subtitle, actions, status. -- Key-Value / Description List: компактный read-only блок для деталей сущности. - Progress: progress bar, usage meter, staged progress. - Stepper / Steps: пошаговые сценарии и wizard-flow. - Chip / Tag: selectable/removable метки для фильтров и labels. diff --git a/README.md b/README.md index 9215947..4aa29cd 100644 --- a/README.md +++ b/README.md @@ -131,6 +131,8 @@ - Alerts - Tables - Data Patterns +- Page Header +- Key-Value / Description List - Toasts - Cards - Modals @@ -161,6 +163,15 @@ JS-модуль: `src/js/components/input-patterns.js` добавляет поведение для `data-input-clear`. +### Page Header и Key-Value + +Секции включают: + +- Page Header: заголовок экрана, subtitle, status/meta и actions. +- Compact Page Header: плотный вариант для внутренних экранов и настроек. +- Description List: read-only пары key-value для деталей сущности. +- Compact Description List: плотный вариант для metadata blocks. + ## SCSS Базовые файлы: @@ -203,8 +214,6 @@ Ближайшие полезные компоненты: -- Page Header: заголовок страницы, subtitle, actions, status. -- Key-Value / Description List: компактный read-only блок для деталей сущности. - Progress: progress bar, usage meter, staged progress. - Stepper / Steps: пошаговые сценарии и wizard-flow. - Chip / Tag: selectable/removable метки для фильтров и labels. diff --git a/demo/index.html b/demo/index.html index 0823764..cf7667c 100644 --- a/demo/index.html +++ b/demo/index.html @@ -78,6 +78,16 @@
  • + + Page Header + +
    • +
  • + + Key-Value + +
    • +
  • Toasts @@ -108,6 +118,8 @@ @@include("partials/alerts.html") @@include("partials/tables.html") @@include("partials/data-patterns.html") + @@include("partials/page-header.html") + @@include("partials/description-list.html") @@include("partials/toasts.html") @@include("partials/cards.html") @@include("partials/modals.html") diff --git a/demo/partials/description-list.html b/demo/partials/description-list.html new file mode 100644 index 0000000..0ea4501 --- /dev/null +++ b/demo/partials/description-list.html @@ -0,0 +1,90 @@ +
    +

    Key-Value

    +

    + Description List подходит для read-only деталей сущности: ID, владельцы, статусы, даты и короткие metadata values. +

    + +
    +
    +
    +
    Project
    +
    Website Redesign
    +
    +
    +
    Status
    +
    + Online + All checks passed +
    +
    +
    +
    Owner
    +
    + @design +
    +
    +
    +
    Updated
    +
    2026-04-11 22:12
    +
    +
    +
    + +
    +
    +
    +
    Run ID
    +
    + run_1048 +
    +
    +
    +
    Runtime
    +
    18s
    +
    +
    +
    Result
    +
    + Queued +
    +
    +
    +
    + +
    +
    + Description List HTML + +
    + 
    <dl class="description-list">
+  <div class="description-list-row">
+    <dt class="description-list-term">Project</dt>
+    <dd class="description-list-value">Website Redesign</dd>
+  </div>
+  <div class="description-list-row">
+    <dt class="description-list-term">Status</dt>
+    <dd class="description-list-value">
+      <span class="badge badge-success">Online</span>
+      <span class="description-list-value-muted">All checks passed</span>
+    </dd>
+  </div>
+</dl>
    +
    + +
    +
    + Compact List HTML + +
    + 
    <dl class="description-list description-list-compact">
+  <div class="description-list-row">
+    <dt class="description-list-term">Run ID</dt>
+    <dd class="description-list-value"><code class="code">run_1048</code></dd>
+  </div>
+  <div class="description-list-row">
+    <dt class="description-list-term">Runtime</dt>
+    <dd class="description-list-value">18s</dd>
+  </div>
+</dl>
    +
    +
    diff --git a/demo/partials/page-header.html b/demo/partials/page-header.html new file mode 100644 index 0000000..24555f4 --- /dev/null +++ b/demo/partials/page-header.html @@ -0,0 +1,93 @@ +
    +

    Page Header

    +

    + Page Header собирает заголовок экрана, короткое описание, статусные метки и основные действия. +

    + +
    +
    +
    + Workspace +

    Projects overview

    +

    + Track active work, review critical states, and open the next action without leaving the page. +

    +
    + Healthy + Updated 2 min ago +
    +
    + +
    + + +
    +
    +
    + +
    +
    +
    +

    Billing settings

    +
    + Pending + 3 changes waiting +
    +
    + +
    + + +
    +
    +
    + +
    +
    + Page Header HTML + +
    + 
    <header class="page-header">
+  <div class="page-header-content">
+    <span class="page-header-kicker">Workspace</span>
+    <h1 class="page-header-title">Projects overview</h1>
+    <p class="page-header-subtitle">
+      Track active work and open the next action without leaving the page.
+    </p>
+    <div class="page-header-meta">
+      <span class="badge badge-success">Healthy</span>
+      <span>Updated 2 min ago</span>
+    </div>
+  </div>
+
+  <div class="page-header-actions">
+    <button class="btn btn-secondary btn-small" type="button">Export</button>
+    <button class="btn btn-accent btn-small" type="button">Create</button>
+  </div>
+</header>
    +
    + +
    +
    + Compact Header HTML + +
    + 
    <header class="page-header page-header-compact page-header-accent">
+  <div class="page-header-content">
+    <h2 class="page-header-title">Billing settings</h2>
+    <div class="page-header-meta">
+      <span class="badge badge-warning">Pending</span>
+      <span>3 changes waiting</span>
+    </div>
+  </div>
+
+  <div class="page-header-actions">
+    <button class="btn btn-primary btn-small" type="button">Review</button>
+    <button class="btn btn-danger btn-small" type="button">Discard</button>
+  </div>
+</header>
    +
    +
    diff --git a/gulpfile.js b/gulpfile.js index 3df573d..f878d2c 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -101,7 +101,7 @@ } function assets() { - return gulp.src(paths.assets.src) + return gulp.src(paths.assets.src, { encoding: false }) .pipe(gulp.dest(paths.assets.dest)); } diff --git a/src/scss/components/_description-list.scss b/src/scss/components/_description-list.scss new file mode 100644 index 0000000..42f4b80 --- /dev/null +++ b/src/scss/components/_description-list.scss @@ -0,0 +1,73 @@ +@use "../kit-deps" as *; +@use "typography" as *; + +.description-list { + display: grid; + width: 100%; + max-width: 760px; + margin: 0; + border: $border-width-base solid $border-color-muted; + border-left-width: $border-width-accent; + background: $surface-panel-muted; + + .description-list-row { + display: grid; + grid-template-columns: minmax(140px, 0.36fr) minmax(0, 1fr); + gap: $space-4; + padding: $space-3 $space-4; + border-bottom: $border-width-base solid rgba($color-text-light, 0.08); + + &:last-child { + border-bottom: 0; + } + } + + .description-list-term { + margin: 0; + color: $color-text-dark; + font-size: $font-size-sm; + font-weight: $font-weight-semibold; + line-height: $line-height-normal; + text-transform: uppercase; + } + + .description-list-value { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: $space-2; + min-width: 0; + margin: 0; + color: $color-text-light; + font-size: $font-size-base; + line-height: $line-height-normal; + } + + .description-list-value-muted { + color: $color-text-medium; + } + + &.description-list-compact { + max-width: 520px; + + .description-list-row { + grid-template-columns: minmax(112px, 0.42fr) minmax(0, 1fr); + gap: $space-3; + padding: $space-2 $space-3; + } + + .description-list-term, + .description-list-value { + font-size: $font-size-sm; + } + } +} + +@include media_down("sm") { + .description-list { + .description-list-row { + grid-template-columns: 1fr; + gap: $space-1; + } + } +} diff --git a/src/scss/components/_page-header.scss b/src/scss/components/_page-header.scss new file mode 100644 index 0000000..c8d2f06 --- /dev/null +++ b/src/scss/components/_page-header.scss @@ -0,0 +1,77 @@ +@use "../kit-deps" as *; +@use "typography" as *; + +.page-header { + display: flex; + flex-wrap: wrap; + align-items: flex-end; + justify-content: space-between; + gap: $space-5; + width: 100%; + padding: $space-5; + border: $border-width-base solid $border-color-muted; + border-left-width: $border-width-accent; + background: $surface-panel-muted; + + .page-header-content { + display: flex; + flex-direction: column; + gap: $space-2; + min-width: min(100%, 320px); + } + + .page-header-kicker { + color: $color-secondary; + font-size: $font-size-sm; + font-weight: $font-weight-bold; + line-height: $line-height-base; + text-transform: uppercase; + } + + .page-header-title { + margin: 0; + color: $color-text-light; + font-size: $font-size-h2; + font-weight: $font-weight-bold; + line-height: $line-height-tight; + } + + .page-header-subtitle { + max-width: 720px; + margin: 0; + color: $color-text-medium; + font-size: $font-size-base; + line-height: $line-height-relaxed; + } + + .page-header-meta { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: $space-2; + color: $color-text-dark; + font-size: $font-size-sm; + } + + .page-header-actions { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: flex-end; + gap: $space-2; + } + + &.page-header-compact { + align-items: center; + padding: $space-4; + + .page-header-title { + font-size: $font-size-h4; + } + } + + &.page-header-accent { + border-color: $color-secondary; + background: rgba($color-secondary, 0.055); + } +} diff --git a/src/scss/kit.scss b/src/scss/kit.scss index 3b2a4c0..0b0feca 100644 --- a/src/scss/kit.scss +++ b/src/scss/kit.scss @@ -10,6 +10,8 @@ @use "components/badges"; @use "components/tables"; @use "components/data-patterns"; +@use "components/page-header"; +@use "components/description-list"; @use "components/toasts"; @use "components/cards"; @use "components/modals";