feat(sw): viewer header logo menu and file list; simplify SW Storybook

SW Viewer Header (approved optional props, public export names unchanged at 170):
- SWViewerHeader: logoMenu, documents, activeDocumentId, onDocumentSelect,
  onDocumentOpen, documentOpenLabel; measured responsive toggles (full ->
  icons -> More) with the SWHeader More / file-list styling.
- SW AI guides, ExampleH, viewer/text-weight/theme-inheritance tests and the
  logo-document-menu tests with their QA record.

SW Storybook cleanup (Story IDs and test fixtures kept):
- Sidebar: Overview -> "SW Header" (first), 전체 Footer -> "SW Footer",
  Footer/Viewer responsive pages -> "Responsive More", Viewer content-variants
  -> "Settings Popup" (merges the settings popup page).
- Hidden by the verification tag (direct URL kept): Header Dropdown,
  Document Open, Interactive States, Document Dropdown, Hidden Sub Controls,
  Home Menu standalone; Footer tool groups / custom content / parts;
  SW/Theme; Viewer menu groups / item states / variable size / settings
  panel / Header + Dropdown.
- Removed demo UI: Overview size and callback output (demo data and
  selection only with &verification), Home Menu Figma node table and width
  demo, Header Responsive More reduced to 1440 / 768 / 390, Popup reopen
  button, property-panel comparison captions, Viewer context-menu demo
  (&verification only).
- Tests: storybook-inventory records the hidden and renamed Stories;
  overview / range-cross-browser / viewer open the demo controls with
  &verification; integrated-popup reloads the Story instead of the reopen
  button; dropdown-consolidation asserts Dropdown is hidden from the sidebar
  and still opens by its direct URL.
This commit is contained in:
shkim4 committed 2026-10-21 14:52:46 +09:00
1 parent 46119eacb5
commit 23d522c136
57 files changed
+2623 -333

No files matched your search

+32
View File
@@ -48,6 +48,10 @@
--hm-sw-header-document-menu-inset-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.4);
--hm-sw-header-document-menu-divider-color: rgba(194, 217, 210, 0.2);
--hm-sw-header-document-list-max-height: 320px;
/* Document list scrollbar (2026-10-21): the Storybook sidebar scrollbar (.storybook/manager.css, #BDDFD4 thumb at
50% / 80% on hover, 6px, round, transparent track). */
--hm-sw-header-document-scrollbar-thumb: rgba(189, 223, 212, 0.5);
--hm-sw-header-document-scrollbar-thumb-hover: rgba(189, 223, 212, 0.8);
--hm-sw-header-document-action-background: rgba(182, 208, 201, 0.2);
--hm-sw-header-document-action-color: rgba(0, 0, 0, 0.7);
/* Figma hover variants: list 26:10680, + New 26:10762, Open 26:10805 */
@@ -422,6 +426,18 @@
overflow-y: auto;
box-shadow: var(--hm-sw-header-document-menu-inset-shadow);
}
/* Scrollbar (2026-10-21): like the Storybook sidebar — 6px, round thumb, transparent track 3px in from top and bottom,
thumb 50% (80% on the thumb). Shown whenever the list scrolls: Chromium does not repaint a custom scrollbar on the
list's own :hover, so a hover-only thumb could stay hidden. Chromium / Safari draw it with ::-webkit-scrollbar;
Firefox, which has no such pseudo-elements, uses the SW standard thin scrollbar with the same colors. Only the
scrollbar changes: list size, rows and scrolling stay as they are. */
@supports not selector(::-webkit-scrollbar) {
.hm-sw-header__document-list { scrollbar-width: thin; scrollbar-color: var(--hm-sw-header-document-scrollbar-thumb) transparent; }
}
.hm-sw-header__document-list::-webkit-scrollbar { width: 6px; background: transparent; }
.hm-sw-header__document-list::-webkit-scrollbar-track { margin: 3px 0; background: transparent; }
.hm-sw-header__document-list::-webkit-scrollbar-thumb { border-radius: 9px; background: var(--hm-sw-header-document-scrollbar-thumb); }
.hm-sw-header__document-list::-webkit-scrollbar-thumb:hover { background: var(--hm-sw-header-document-scrollbar-thumb-hover); }
/* Row = select button + optional Close Document button (siblings). Hover and the current
document are styled on the row so the overlay stays while the pointer is on the X button. */
.hm-sw-header__document-row {
@@ -1310,6 +1326,22 @@ div.hm-sw-header__menu-row { justify-content: space-between; gap: 8px; padding-l
.hm-sw-header__more-item[role="menuitemcheckbox"]::after { content: ""; width: 14px; text-align: center; }
.hm-sw-header__more-item[aria-checked="true"]::after { content: "✓"; }
.hm-sw-header__more-value { font-size: var(--hm-sw-header-label-size); opacity: 0.8; }
/* Optional title and item icons (SWViewerHeader logo menu, 2026-10-21). The title is rendered only with at least one
item and has no divider (title + items are one group); the `...` menu of SWHeader passes neither and is unchanged. */
.hm-sw-header__more-title {
display: flex;
align-items: center;
min-height: 32px;
padding: 0 10px;
font-weight: 700;
white-space: nowrap;
opacity: 0.8;
}
.hm-sw-header__more-item:has(> .hm-sw-header__more-icon) { justify-content: flex-start; }
.hm-sw-header__more-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 16px; width: 16px; height: 16px; }
.hm-sw-header__more-icon > svg { width: 16px; height: 16px; }
.hm-sw-header__more-item:has(> .hm-sw-header__more-icon) > .hm-sw-header__more-value { margin-left: auto; }
.hm-sw-header__more-menu[data-align="start"] { right: auto; left: 0; }
/* Window area: print / guide pill, window move, minimize, close. */
.hm-sw-header__window {