diff --git a/PROJECT_NOTES.md b/PROJECT_NOTES.md index b1ebec2..4ccd111 100644 --- a/PROJECT_NOTES.md +++ b/PROJECT_NOTES.md @@ -160,6 +160,13 @@ - `demo/partials/page-header.html` - `demo/partials/description-list.html` +Добавлены Progress и Steps: + +- `src/scss/components/_loader.scss` расширен progress bar, usage meter и staged progress. +- `src/scss/components/_stepper.scss` +- `demo/partials/progress.html` +- `demo/partials/steps.html` + Публичный JS API: - `GNexusUIKit.Helper` @@ -177,8 +184,6 @@ Ближайшие полезные additions: -- Progress: progress bar, usage meter, staged progress. -- Stepper / Steps: пошаговые сценарии и wizard-flow. - Chip / Tag: selectable/removable метки для фильтров и labels. - Avatar / Identity: initials, icon avatar, image avatar, status marker. - Timeline / Activity Log: история событий, audit log, jobs. @@ -192,7 +197,7 @@ - В `Modals` сохранен явный HTML escape hatch через `bodyHtml` / `bodyMode: "html"` для сложной разметки; для обычных строк использовать `bodyText`. - Закрыт Sass/build debt: стили переведены на `@use` / `@forward`, `map-*` global functions заменены на `sass:map`, `gulp-sass` убран из pipeline в пользу modern `sass.compileAsync`. - Обновлен сборочный стек: Gulp 5, BrowserSync 3, прямые PostCSS/autoprefixer и clean-css. `npm audit --audit-level=low` показывает `0 vulnerabilities`. -- Добавить отдельную demo-секцию для loader/progress states. +- Закрыта отдельная demo-секция для loader/progress states. Проверенные команды: diff --git a/README.md b/README.md index 4aa29cd..e9bb6a3 100644 --- a/README.md +++ b/README.md @@ -133,6 +133,8 @@ - Data Patterns - Page Header - Key-Value / Description List +- Progress +- Steps - Toasts - Cards - Modals @@ -172,6 +174,15 @@ - Description List: read-only пары key-value для деталей сущности. - Compact Description List: плотный вариант для metadata blocks. +### Progress и Steps + +Секции включают: + +- Progress Bar: determinate progress с CSS custom property `--progress-value`. +- Usage Meter: карточка лимита/использования с progress bar. +- Staged Progress: сегментированное состояние операции. +- Steps: горизонтальный и вертикальный wizard-flow. + ## SCSS Базовые файлы: @@ -214,8 +225,6 @@ Ближайшие полезные компоненты: -- Progress: progress bar, usage meter, staged progress. -- Stepper / Steps: пошаговые сценарии и wizard-flow. - Chip / Tag: selectable/removable метки для фильтров и labels. - Avatar / Identity: initials, icon avatar, image avatar, status marker. - Timeline / Activity Log: история событий, audit log, jobs. @@ -225,4 +234,4 @@ Технические задачи: -- Добавить отдельную demo-секцию для loader/progress states. +- На текущий момент технический backlog пуст; дальше расширяем компонентный набор. diff --git a/demo/index.html b/demo/index.html index cf7667c..cdd62b5 100644 --- a/demo/index.html +++ b/demo/index.html @@ -88,6 +88,16 @@
  • + + Progress + +
    • +
  • + + Steps + +
    • +
  • Toasts @@ -120,6 +130,8 @@ @@include("partials/data-patterns.html") @@include("partials/page-header.html") @@include("partials/description-list.html") + @@include("partials/progress.html") + @@include("partials/steps.html") @@include("partials/toasts.html") @@include("partials/cards.html") @@include("partials/modals.html") diff --git a/demo/partials/progress.html b/demo/partials/progress.html new file mode 100644 index 0000000..0bd0a53 --- /dev/null +++ b/demo/partials/progress.html @@ -0,0 +1,111 @@ +
    +

    Progress

    +

    + Progress закрывает загрузку, usage meters и staged progress для операций с понятным состоянием выполнения. +

    + +
    +

    Bars

    + +
    +
    + Build + 64% +
    +
    + +
    +
    +
    + +
    +
    +
    + Sync + 42% +
    +
    + +
    +
    +
    + +
    +
    +

    + Storage + 78% +

    +
    +
    + +
    +
    +

    312 GB used from 400 GB limit.

    +
    +
    + +
    +
    + Queued + Build + Deploy + Verify +
    +
    + +
    +
    + + Loading state +
    +
    + +
    +
    + Progress Bar HTML + +
    + 
    <div class="progress" role="progressbar" aria-label="Build progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="64" style="--progress-value: 64%">
+  <div class="progress-header">
+    <span>Build</span>
+    <span class="progress-value">64%</span>
+  </div>
+  <div class="progress-track">
+    <span class="progress-bar"></span>
+  </div>
+</div>
    +
    + +
    +
    + Usage Meter HTML + +
    + 
    <div class="usage-meter">
+  <h3 class="usage-meter-title">
+    Storage
+    <span class="usage-meter-value">78%</span>
+  </h3>
+  <div class="progress progress-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="78" style="--progress-value: 78%">
+    <div class="progress-track">
+      <span class="progress-bar"></span>
+    </div>
+  </div>
+  <p class="usage-meter-meta">312 GB used from 400 GB limit.</p>
+</div>
    +
    + +
    +
    + Staged Progress HTML + +
    + 
    <div class="progress-stages" aria-label="Deploy stages">
+  <span class="progress-stage progress-stage-complete">Queued</span>
+  <span class="progress-stage progress-stage-complete">Build</span>
+  <span class="progress-stage progress-stage-current">Deploy</span>
+  <span class="progress-stage">Verify</span>
+</div>
    +
    +
    diff --git a/demo/partials/steps.html b/demo/partials/steps.html new file mode 100644 index 0000000..81ae22e --- /dev/null +++ b/demo/partials/steps.html @@ -0,0 +1,94 @@ +
    +

    Steps

    +

    + Steps описывает wizard-flow, onboarding и последовательные процессы с текущим, завершенным и недоступным шагом. +

    + +
    +
      +
    1. + +

      Account

      +

      Basic profile data is ready.

      +
      2. +
    2. + +

      Plan

      +

      Billing plan is selected.

      +
      3. +
    3. + 3 +

      Confirm

      +

      Review settings before launch.

      +
      4. +
    4. + 4 +

      Launch

      +

      Available after confirmation.

      +
      5. +
    +
    + +
    +
      +
    1. + +

      Queued

      +

      Job accepted and waiting for worker slot.

      +
      2. +
    2. + 2 +

      Running

      +

      Current task is processing input data.

      +
      3. +
    3. + 3 +

      Report

      +

      Final summary appears after completion.

      +
      4. +
    +
    + +
    +
    + Steps HTML + +
    + 
    <ol class="steps">
+  <li class="step step-complete">
+    <span class="step-marker"><i class="ph ph-check"></i></span>
+    <h3 class="step-title">Account</h3>
+    <p class="step-text">Basic profile data is ready.</p>
+  </li>
+  <li class="step step-current" aria-current="step">
+    <span class="step-marker">2</span>
+    <h3 class="step-title">Confirm</h3>
+    <p class="step-text">Review settings before launch.</p>
+  </li>
+  <li class="step step-disabled">
+    <span class="step-marker">3</span>
+    <h3 class="step-title">Launch</h3>
+    <p class="step-text">Available after confirmation.</p>
+  </li>
+</ol>
    +
    + +
    +
    + Vertical Steps HTML + +
    + 
    <ol class="steps steps-vertical">
+  <li class="step step-complete">
+    <span class="step-marker"><i class="ph ph-check"></i></span>
+    <h3 class="step-title">Queued</h3>
+    <p class="step-text">Job accepted and waiting for worker slot.</p>
+  </li>
+  <li class="step step-current" aria-current="step">
+    <span class="step-marker">2</span>
+    <h3 class="step-title">Running</h3>
+    <p class="step-text">Current task is processing input data.</p>
+  </li>
+</ol>
    +
    +
    diff --git a/src/scss/components/_loader.scss b/src/scss/components/_loader.scss index 8e3e6bb..b298f3b 100644 --- a/src/scss/components/_loader.scss +++ b/src/scss/components/_loader.scss @@ -36,3 +36,176 @@ animation: icon_spin 1.2s linear infinite; } } + +.progress { + display: flex; + flex-direction: column; + gap: $space-2; + width: 100%; + max-width: 640px; + + .progress-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: $space-3; + color: $color-text-medium; + font-size: $font-size-sm; + font-weight: $font-weight-semibold; + text-transform: uppercase; + } + + .progress-value { + color: $color-text-light; + font-family: $font-family-code; + } + + .progress-track { + position: relative; + width: 100%; + height: 18px; + overflow: hidden; + border: $border-width-base solid $border-color-muted; + background: $surface-panel-muted; + } + + .progress-bar { + display: block; + position: relative; + overflow: hidden; + width: var(--progress-value, 0%); + height: 100%; + background: $color-secondary; + transition: width $motion-slow $motion-ease; + } + + &.progress-success .progress-bar { + background: $color-success; + } + + &.progress-warning .progress-bar { + background: $color-warning; + } + + &.progress-danger, + &.progress-error { + .progress-bar { + background: $color-error; + } + } + + &.progress-striped .progress-bar { + background-image: repeating-linear-gradient( + 90deg, + transparent 0, + transparent 14px, + rgba($color-black, 0.2) 14px, + rgba($color-black, 0.2) 16px + ); + } + + &.progress-animated .progress-bar::after { + content: ""; + position: absolute; + inset: 0; + width: 48%; + background: linear-gradient( + 90deg, + transparent, + rgba($color-text-light, 0.28), + transparent + ); + transform: translateX(-120%); + animation: progress_scan 1.4s $motion-ease infinite; + } +} + +.usage-meter { + display: grid; + gap: $space-3; + width: 100%; + max-width: 420px; + padding: $space-4; + border: $border-width-base solid $border-color-muted; + border-left-width: $border-width-accent; + background: $surface-panel-muted; + + .usage-meter-title { + display: flex; + align-items: center; + justify-content: space-between; + gap: $space-3; + margin: 0; + font-size: $font-size-lg; + font-weight: $font-weight-bold; + line-height: $line-height-base; + text-transform: uppercase; + } + + .usage-meter-value { + color: $color-secondary; + font-family: $font-family-code; + font-size: $font-size-sm; + } + + .usage-meter-meta { + margin: 0; + color: $color-text-medium; + font-size: $font-size-sm; + line-height: $line-height-normal; + } +} + +.progress-stages { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: $space-2; + width: 100%; + max-width: 720px; + + .progress-stage { + min-height: 42px; + padding: $space-2 $space-3; + border: $border-width-base solid $border-color-muted; + color: $color-text-dark; + background: $surface-panel-muted; + font-size: $font-size-sm; + font-weight: $font-weight-semibold; + line-height: $line-height-normal; + text-transform: uppercase; + } + + .progress-stage-complete { + color: $color-black; + background: $color-success; + border-color: $color-success; + } + + .progress-stage-current { + color: $color-black; + background: $color-warning; + border-color: $color-warning; + } +} + +@include media_down("md") { + .progress-stages { + grid-template-columns: 1fr 1fr; + } +} + +@include media_down("sm") { + .progress-stages { + grid-template-columns: 1fr; + } +} + +@keyframes progress_scan { + from { + transform: translateX(-120%); + } + + to { + transform: translateX(220%); + } +} diff --git a/src/scss/components/_stepper.scss b/src/scss/components/_stepper.scss new file mode 100644 index 0000000..06c1608 --- /dev/null +++ b/src/scss/components/_stepper.scss @@ -0,0 +1,104 @@ +@use "../kit-deps" as *; +@use "typography" as *; + +.steps { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: $space-3; + width: 100%; + max-width: 900px; + margin: 0; + padding: 0; + list-style: none; + + .step { + position: relative; + display: flex; + flex-direction: column; + gap: $space-2; + min-height: 120px; + padding: $space-4; + border: $border-width-base solid $border-color-muted; + border-left-width: $border-width-accent; + background: $surface-panel-muted; + } + + .step-marker { + display: inline-flex; + align-items: center; + justify-content: center; + width: $control-height-sm; + height: $control-height-sm; + color: $color-text-light; + border: $border-width-base solid $border-color-muted; + font-size: $font-size-sm; + font-weight: $font-weight-bold; + line-height: $line-height-base; + } + + .step-title { + margin: 0; + font-size: $font-size-md; + font-weight: $font-weight-bold; + line-height: $line-height-snug; + text-transform: uppercase; + } + + .step-text { + margin: 0; + color: $color-text-medium; + font-size: $font-size-sm; + line-height: $line-height-normal; + } + + .step-complete { + border-color: $color-success; + + .step-marker { + color: $color-black; + background: $color-success; + border-color: $color-success; + } + } + + .step-current { + border-color: $color-secondary; + + .step-marker { + color: $color-black; + background: $color-secondary; + border-color: $color-secondary; + } + } + + .step-disabled { + opacity: 0.62; + } + + &.steps-vertical { + grid-template-columns: 1fr; + max-width: 520px; + gap: 0; + + .step { + min-height: auto; + border-bottom-width: 0; + + &:last-child { + border-bottom-width: $border-width-base; + } + } + } +} + +@include media_down("lg") { + .steps { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@include media_down("sm") { + .steps { + grid-template-columns: 1fr; + } +} diff --git a/src/scss/kit.scss b/src/scss/kit.scss index 0b0feca..f95ec1b 100644 --- a/src/scss/kit.scss +++ b/src/scss/kit.scss @@ -12,6 +12,7 @@ @use "components/data-patterns"; @use "components/page-header"; @use "components/description-list"; +@use "components/stepper"; @use "components/toasts"; @use "components/cards"; @use "components/modals";