diff --git a/PROJECT_NOTES.md b/PROJECT_NOTES.md index 7d29b38..d7bf5c9 100644 --- a/PROJECT_NOTES.md +++ b/PROJECT_NOTES.md @@ -174,6 +174,13 @@ - `demo/partials/chips.html` - `demo/partials/avatar.html` +Добавлены Timeline и Accordion / Disclosure: + +- `src/scss/components/_timeline.scss` +- `src/scss/components/_accordion.scss` +- `demo/partials/timeline.html` +- `demo/partials/accordion.html` + Публичный JS API: - `GNexusUIKit.Helper` @@ -191,8 +198,6 @@ Ближайшие полезные additions: -- Timeline / Activity Log: история событий, audit log, jobs. -- Accordion / Disclosure: раскрываемые группы настроек и деталей. - Drawer / Side Panel: контекстные детали и quick edit без полной модалки. - Confirm Dialog docs: `confirm-popup.js` уже есть, но его нужно вывести в demo/docs. diff --git a/README.md b/README.md index 71d191d..9689fd4 100644 --- a/README.md +++ b/README.md @@ -137,6 +137,8 @@ - Steps - Chips - Avatar / Identity +- Timeline / Activity Log +- Accordion / Disclosure - Toasts - Cards - Modals @@ -194,6 +196,15 @@ - Identity: avatar + title/meta row. - Avatar Stack: компактное отображение группы. +### Timeline и Accordion + +Секции включают: + +- Timeline: вертикальная история событий со state variants. +- Activity Log: компактный audit/job log. +- Accordion: группы на native `
` / ``. +- Disclosure: компактная одиночная раскрываемая группа. + ## SCSS Базовые файлы: @@ -236,8 +247,6 @@ Ближайшие полезные компоненты: -- Timeline / Activity Log: история событий, audit log, jobs. -- Accordion / Disclosure: раскрываемые группы настроек и деталей. - Drawer / Side Panel: контекстные детали и quick edit без полной модалки. - Confirm Dialog docs: `confirm-popup.js` уже есть в JS, но его нужно вынести в demo/docs. diff --git a/demo/index.html b/demo/index.html index 27cce58..89d51d2 100644 --- a/demo/index.html +++ b/demo/index.html @@ -108,6 +108,16 @@
  • + + Timeline + +
    • +
  • + + Accordion + +
    • +
  • Toasts @@ -144,6 +154,8 @@ @@include("partials/steps.html") @@include("partials/chips.html") @@include("partials/avatar.html") + @@include("partials/timeline.html") + @@include("partials/accordion.html") @@include("partials/toasts.html") @@include("partials/cards.html") @@include("partials/modals.html") diff --git a/demo/partials/accordion.html b/demo/partials/accordion.html new file mode 100644 index 0000000..c922cb2 --- /dev/null +++ b/demo/partials/accordion.html @@ -0,0 +1,96 @@ +
    +

    Accordion

    +

    + Accordion и Disclosure используют native <details> / <summary>, поэтому раскрытие работает без JS. +

    + +
    +
    +
    + + + + Release checklist + + + +
    +

    Check component states, copy examples, keyboard focus, and responsive layout before release.

    +
    +
    +
    + + + + Documentation notes + + + +
    +

    Keep component copy short and include code examples for the smallest useful markup.

    +
    +
    +
    + + + + Runtime behavior + + + +
    +

    Use native disclosure behavior when the component does not need custom animation or async content.

    +
    +
    +
    +
    + +
    +
    + + Compact disclosure + + +
    +

    Use this variant for a single expandable group inside forms or metadata blocks.

    +
    +
    +
    + +
    +
    + Accordion HTML + +
    + 
    <div class="accordion">
+  <details class="accordion-item" open>
+    <summary class="accordion-summary">
+      <span class="accordion-summary-content">
+        <i class="ph ph-list-checks"></i>
+        Release checklist
+      </span>
+      <i class="ph ph-caret-down accordion-icon"></i>
+    </summary>
+    <div class="accordion-panel">
+      <p>Check component states, copy examples, keyboard focus, and responsive layout.</p>
+    </div>
+  </details>
+</div>
    +
    + +
    +
    + Disclosure HTML + +
    + 
    <details class="disclosure">
+  <summary class="accordion-summary">
+    <span class="accordion-summary-content">Compact disclosure</span>
+    <i class="ph ph-caret-down accordion-icon"></i>
+  </summary>
+  <div class="accordion-panel">
+    <p>Use this variant for a single expandable group.</p>
+  </div>
+</details>
    +
    +
    diff --git a/demo/partials/timeline.html b/demo/partials/timeline.html new file mode 100644 index 0000000..faf11f6 --- /dev/null +++ b/demo/partials/timeline.html @@ -0,0 +1,109 @@ +
    +

    Timeline

    +

    + Timeline и Activity Log показывают историю событий, audit trail, job updates и системные изменения. +

    + +
    +
      +
    1. + +
      +
      +
      +

      Build completed

      + +
      +

      Production bundle finished without warnings.

      +
      + Done + CI +
      +
      +
      +
      2. +
    2. + +
      +
      +
      +

      Review requested

      + +
      +

      Design tokens changed and need one visual pass before release.

      +
      + Review +
      +
      +
      +
      3. +
    3. + +
      +
      +
      +

      Commit pushed

      + +
      +

      Component documentation and demo examples were updated.

      +
      +
      +
      4. +
    +
    + +
    +
    +
    + + Build completed + Done +
    +
    + + Review requested + Pending +
    +
    + + Commit pushed + Info +
    +
    +
    + +
    +
    + Timeline HTML + +
    + 
    <ol class="timeline">
+  <li class="timeline-item timeline-item-success">
+    <span class="timeline-marker"><i class="ph ph-check-circle"></i></span>
+    <div class="timeline-content">
+      <article class="timeline-card">
+        <div class="timeline-header">
+          <h3 class="timeline-title">Build completed</h3>
+          <time class="timeline-time" datetime="2026-04-11T22:24:00">22:24</time>
+        </div>
+        <p class="timeline-text">Production bundle finished without warnings.</p>
+      </article>
+    </div>
+  </li>
+</ol>
    +
    + +
    +
    + Activity Log HTML + +
    + 
    <div class="activity-log">
+  <div class="activity-log-row">
+    <time class="activity-log-time" datetime="2026-04-11T22:24:00">22:24</time>
+    <span class="activity-log-title">Build completed</span>
+    <span class="badge badge-success">Done</span>
+  </div>
+</div>
    +
    +
    diff --git a/src/scss/components/_accordion.scss b/src/scss/components/_accordion.scss new file mode 100644 index 0000000..7b70061 --- /dev/null +++ b/src/scss/components/_accordion.scss @@ -0,0 +1,109 @@ +@use "../kit-deps" as *; +@use "typography" as *; + +.accordion { + display: grid; + width: 100%; + max-width: 760px; + border: $border-width-base solid $border-color-muted; + border-left-width: $border-width-accent; + background: $surface-panel-muted; +} + +.accordion-item { + border-bottom: $border-width-base solid rgba($color-text-light, 0.08); + + &:last-child { + border-bottom: 0; + } + + &[open] { + .accordion-summary { + color: $color-black; + background: $color-primary; + } + + .accordion-icon { + transform: rotate(180deg); + } + } +} + +.accordion-summary { + display: flex; + align-items: center; + justify-content: space-between; + gap: $space-3; + min-height: $control-height-md; + padding: $space-3 $space-4; + color: $color-text-light; + cursor: pointer; + font-size: $font-size-sm; + font-weight: $font-weight-bold; + line-height: $line-height-base; + text-transform: uppercase; + transition-duration: $motion-base; + transition-timing-function: $motion-ease; + transition-property: color, background; + + &::-webkit-details-marker { + display: none; + } + + &::marker { + content: ""; + } + + &:focus-visible { + @include focus_ring; + } + + @include hover_touch { + color: $color-black; + background: $color-secondary; + } +} + +.accordion-summary-content { + display: flex; + align-items: center; + gap: $space-2; + min-width: 0; +} + +.accordion-icon { + flex: 0 0 auto; + font-size: $icon-size-sm; + transition-duration: $motion-base; + transition-property: transform; +} + +.accordion-panel { + padding: $space-4; + color: $color-text-medium; + font-size: $font-size-sm; + line-height: $line-height-relaxed; + + p { + margin-top: 0; + } + + p:last-child { + margin-bottom: 0; + } +} + +.disclosure { + max-width: 520px; + border: $border-width-base solid $border-color-muted; + background: $surface-panel-muted; + + .accordion-summary { + min-height: $control-height-sm; + padding: $space-2 $space-3; + } + + .accordion-panel { + padding: $space-3; + } +} diff --git a/src/scss/components/_timeline.scss b/src/scss/components/_timeline.scss new file mode 100644 index 0000000..60825b9 --- /dev/null +++ b/src/scss/components/_timeline.scss @@ -0,0 +1,179 @@ +@use "../kit-deps" as *; +@use "typography" as *; + +.timeline { + display: grid; + gap: 0; + width: 100%; + max-width: 760px; + margin: 0; + padding: 0; + list-style: none; + + .timeline-item { + position: relative; + display: grid; + grid-template-columns: $control-height-md minmax(0, 1fr); + gap: $space-3; + min-height: 88px; + } + + .timeline-item::before { + content: ""; + position: absolute; + top: $control-height-md; + bottom: 0; + left: calc($control-height-md / 2 - 1px); + width: $border-width-base; + background: $border-color-muted; + } + + .timeline-item:last-child::before { + display: none; + } + + .timeline-marker { + position: relative; + z-index: 1; + display: inline-flex; + align-items: center; + justify-content: center; + width: $control-height-md; + height: $control-height-md; + border: $border-width-base solid $border-color-muted; + color: $color-text-medium; + background: $surface-page; + font-size: $icon-size-sm; + } + + .timeline-content { + min-width: 0; + padding: 0 0 $space-5; + } + + .timeline-card { + padding: $space-4; + border: $border-width-base solid $border-color-muted; + border-left-width: $border-width-accent; + background: $surface-panel-muted; + } + + .timeline-header { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: $space-2; + margin-bottom: $space-2; + } + + .timeline-title { + margin: 0; + font-size: $font-size-md; + font-weight: $font-weight-bold; + line-height: $line-height-snug; + text-transform: uppercase; + } + + .timeline-time { + color: $color-text-dark; + font-size: $font-size-xs; + font-family: $font-family-code; + line-height: $line-height-normal; + } + + .timeline-text { + margin: 0; + color: $color-text-medium; + font-size: $font-size-sm; + line-height: $line-height-normal; + } + + .timeline-meta { + display: flex; + flex-wrap: wrap; + gap: $space-2; + margin-top: $space-3; + } + + .timeline-item-success { + .timeline-marker, + .timeline-card { + border-color: $color-success; + } + + .timeline-marker { + color: $color-black; + background: $color-success; + } + } + + .timeline-item-warning { + .timeline-marker, + .timeline-card { + border-color: $color-warning; + } + + .timeline-marker { + color: $color-black; + background: $color-warning; + } + } + + .timeline-item-danger, + .timeline-item-error { + .timeline-marker, + .timeline-card { + border-color: $color-error; + } + + .timeline-marker { + color: $color-black; + background: $color-error; + } + } +} + +.activity-log { + display: grid; + width: 100%; + max-width: 720px; + border: $border-width-base solid $border-color-muted; + border-left-width: $border-width-accent; + background: $surface-panel-muted; + + .activity-log-row { + display: grid; + grid-template-columns: minmax(120px, 0.24fr) minmax(0, 1fr) auto; + gap: $space-3; + align-items: center; + padding: $space-3 $space-4; + border-bottom: $border-width-base solid rgba($color-text-light, 0.08); + + &:last-child { + border-bottom: 0; + } + } + + .activity-log-time { + color: $color-text-dark; + font-family: $font-family-code; + font-size: $font-size-xs; + } + + .activity-log-title { + color: $color-text-light; + font-size: $font-size-sm; + font-weight: $font-weight-semibold; + line-height: $line-height-normal; + } +} + +@include media_down("sm") { + .activity-log { + .activity-log-row { + grid-template-columns: 1fr; + gap: $space-2; + } + } +} diff --git a/src/scss/kit.scss b/src/scss/kit.scss index 859d9d7..8ca068f 100644 --- a/src/scss/kit.scss +++ b/src/scss/kit.scss @@ -15,6 +15,8 @@ @use "components/page-header"; @use "components/description-list"; @use "components/stepper"; +@use "components/timeline"; +@use "components/accordion"; @use "components/toasts"; @use "components/cards"; @use "components/modals";