benivo-ui-library 1.9.76 → 1.10.1

package/README.md

@@ -4,6 +4,9 @@
 
 `benivo-ui-library` is a collection of react hooks and components for faster development.
 
+Accessibility is tested automatically with jest-axe — run `npm run a11y:audit` and see
+[docs/accessibility-testing.md](docs/accessibility-testing.md) for the enforcement model.
+
 # Installation
 
 ```sh
@@ -36,3 +39,22 @@ function MyApp() {
   );
 }
 ```
+
+# Publishing
+
+Publishing auth comes from the `NPM_TOKEN` environment variable — never from a token
+committed to this repo. Both `.npmrc` files reference it as `${NPM_TOKEN}`, which npm
+expands at run time.
+
+```bash
+export NPM_TOKEN=<your granular npm publish token for benivo-ui-library>
+npm run publish:lib
+```
+
+`publish:lib` runs `check:npm-token` first and stops with a clear message if `NPM_TOKEN`
+is unset, rather than failing part-way through a publish.
+
+Use a **granular** npm access token scoped to the `benivo-ui-library` package only, with
+publish rights and an expiry — not a classic automation token on the whole `benivo`
+account. Keep it in your own environment or a CI secret. Do not add it to `.npmrc`,
+`.storybook/.npmrc`, or any other tracked file.

package/accordion.less

@@ -64,12 +64,13 @@
         text-align: left;
         font-family: @font-family;
 
-        // Keyboard only, so clicking a row does not leave a ring behind. Written
-        // out rather than sharing the button restyle's variables, which are not on
-        // main yet — worth folding together once that lands.
+        // Keyboard only, so clicking a row does not leave a ring behind. This used to
+        // write the values out because the shared focus variables were not on main yet;
+        // BPO-14843 is the branch that comment was waiting for, so it is folded on now
+        // and a change to the indicator colour reaches this rule too.
         &:focus-visible {
-            outline: 2px solid var(--brand-400);
-            outline-offset: 2px;
+            outline: @focus-outline;
+            outline-offset: @focus-outline-offset;
         }
     }
 

package/activityFeed.less

@@ -0,0 +1,394 @@
+//
+// Activity feed
+//
+// A timeline / message log built from FeedItems, matching the DS "Feed item base"
+// and "Activity feed" (Figma page 253-14231). The container owns spacing and
+// separators; the item owns its anatomy and the connector rail.
+//
+// Colours are tokens only (see scripts/check-tokens.sh): text on --black /
+// --text-400 / --text-600, links and the "new" dot on --brand-700, rail and
+// separators on --border-200, the date band on --bg-100.
+//
+
+@feed-bubble-shadow: 0 1px 1px rgba(16, 24, 40, 0.05);
+@feed-gap: 32px;   // spacing between items (Figma: 32px in every divider mode)
+
+.bnv-feed {
+    display: flex;
+    flex-direction: column;
+    font-family: @font-family;
+
+    // ---- spacing per divider style ----
+    // none: 32px between items.
+    &--divider-none {
+        gap: @feed-gap;
+    }
+
+    // line: a full-width 1px separator sits in a 16px gap either side (~32px total).
+    &--divider-line {
+        gap: 16px;
+    }
+
+    // connector: the rail is a flex segment inside the item, so the item carries
+    // its own bottom spacing (Figma: content pb 32). No container gap.
+    &--divider-connector {
+        gap: 0;
+
+        .bnv-feed-item:last-child .bnv-feed-item__body {
+            padding-bottom: 0;
+        }
+    }
+
+    // With a 32px container gap, the date's own 12px block margin would make the
+    // date↔item spacing 44px, which reads as disconnected. Drop it here so it is a
+    // clean 32px, uniform with the item spacing. (Line mode keeps the 12px → 28px.)
+    &--divider-none &__date,
+    &--divider-connector &__date {
+        margin: 0;
+    }
+
+    // ---- separators ----
+    &__separator {
+        height: 1px;
+        background-color: var(--border-200);
+        border: 0;
+        flex-shrink: 0;
+    }
+
+    // ---- day / date grouping header ----
+    // A pill (bg-100) with a calendar glyph and a bold date. The 12px block
+    // padding sits on top of the container gap, matching Figma's date frame.
+    &__date {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        box-sizing: border-box;
+        width: 100%;
+        margin: 12px 0;
+        padding: 8px 12px;
+        background-color: var(--bg-100);
+        border-radius: 0.5rem;
+    }
+
+    &__date-icon {
+        flex-shrink: 0;
+        color: var(--text-600);
+    }
+
+    &__date-label {
+        font-size: @font-size;         // 16px
+        line-height: 24px;
+        font-weight: @font-weight-semibold;
+        color: var(--black);
+        white-space: nowrap;
+    }
+}
+
+// ------------------------------------------------------------------ FeedItem
+.bnv-feed-item {
+    --fi-avatar: 48px;
+    position: relative;
+    display: flex;
+    gap: 12px;
+    align-items: flex-start;
+    box-sizing: border-box;
+    font-size: @font-size;         // 16px
+    line-height: 24px;
+    color: var(--text-600);
+
+    &--sm {
+        --fi-avatar: 32px;
+    }
+
+    // ---------- leading column + rail ----------
+    &__leading {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex-shrink: 0;
+        width: var(--fi-avatar);
+    }
+
+    &--connector &__leading {
+        align-self: stretch;
+        gap: 4px;
+        padding-bottom: 4px;
+    }
+
+    &__avatar {
+        display: inline-flex;
+        flex-shrink: 0;
+    }
+
+    // Fallback marker when there is no avatar/icon.
+    &__marker {
+        width: 10px;
+        height: 10px;
+        margin-top: 7px;
+        border-radius: 50%;
+        background-color: var(--text-300);
+        flex-shrink: 0;
+    }
+
+    // Decorative timeline rail — grows to fill the column below the avatar.
+    &__rail {
+        flex: 1 0 0;
+        width: 2px;
+        min-height: 8px;
+        border-radius: 2px;
+        background-color: var(--border-200);
+    }
+
+    // ---------- body ----------
+    &__body {
+        flex: 1 1 0;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+    }
+
+    &--connector &__body {
+        padding-bottom: @feed-gap;
+    }
+
+    // Header + action line sit tight together; 12px separates them from supporting.
+    &__text-block {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__heading {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+    }
+
+    &__meta {
+        display: flex;
+        align-items: baseline;
+        flex-wrap: wrap;
+        gap: 8px;
+        min-width: 0;
+    }
+
+    &__actor {
+        font-weight: @font-weight-semibold;
+        color: var(--black);
+    }
+
+    &__timestamp {
+        font-weight: @font-weight-normal;
+        color: var(--text-400);
+        white-space: nowrap;
+    }
+
+    // @handle sub-line (messages).
+    &__handle {
+        font-size: @font-size-sm;
+        line-height: 20px;
+        color: var(--text-400);
+    }
+
+    // Status pill sits below the action line, left-aligned.
+    &__status {
+        display: flex;
+    }
+
+    // Edit/delete sit top-right, right of the name. Absolute + centred on the name
+    // row (24px) so taller buttons never push the description down.
+    &__trailing {
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    &__actions {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+    }
+
+    // Row actions use the DS Button (icon-only). It carries its own styling — this
+    // class is only a hook for context tweaks if ever needed.
+    &__action-btn {
+        flex-shrink: 0;
+    }
+
+    // Visually-hidden label (e.g. "Unread") — exposed to assistive tech only.
+    &__sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        border: 0;
+        overflow: hidden;
+        clip: rect(0 0 0 0);
+        clip-path: inset(50%);
+        white-space: nowrap;
+    }
+
+    // Unread indicator.
+    &__new-dot {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background-color: var(--brand-700);
+        flex-shrink: 0;
+    }
+
+    // ---------- action line ----------
+    // Kept uniformly 16px/24px across every variant so the name→description gap is
+    // identical whether the item has a file, labels, text or nothing.
+    &__action {
+        color: var(--text-600);
+
+        a,
+        .bnv-feed-item__link {
+            color: var(--brand-700);
+            font-weight: @font-weight-medium;
+            text-decoration: none;
+
+            &:hover { text-decoration: underline; }
+
+            &:focus-visible {
+                outline: 2px solid var(--primary);
+                outline-offset: 2px;
+                border-radius: 0.125rem;
+            }
+        }
+    }
+
+    // ---------- supporting: file ----------
+    // The file is its own hoverable target — download/delete belong to the document,
+    // so they sit on its right and reveal on hover/focus. A "card" outline is drawn
+    // just outside the content so nothing shifts when it appears.
+    &__file {
+        position: relative;
+        display: flex;
+        gap: 12px;
+        align-items: flex-start;
+        width: 100%;
+        min-width: 0;
+
+        &::before {
+            content: '';
+            position: absolute;
+            inset: -8px -12px;
+            border: 1px solid transparent;
+            border-radius: 0.5rem;
+            pointer-events: none;
+        }
+
+        &:hover::before,
+        &:focus-within::before {
+            border-color: var(--border-200);
+            background-color: var(--white);
+        }
+
+        > * { position: relative; }   // keep content above the ::before card
+    }
+
+    &__file-icon {
+        flex-shrink: 0;
+        width: 32px;
+        height: 40px;
+    }
+
+    &__file-text {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        min-width: 0;
+    }
+
+    &__file-name {
+        color: var(--black);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__file-size {
+        font-size: @font-size-sm;
+        line-height: 20px;
+        color: var(--text-600);
+    }
+
+    // Actions on the right of the file row — hidden until hover/focus.
+    &__file-actions {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+        flex-shrink: 0;
+        align-self: center;
+        opacity: 0;
+        transition: opacity 0.12s ease;
+    }
+
+    &__file:hover &__file-actions,
+    &__file:focus-within &__file-actions {
+        opacity: 1;
+    }
+
+    // Touch devices have no hover — keep the actions visible there.
+    @media (hover: none) {
+        &__file-actions { opacity: 1; }
+    }
+
+    // ---------- supporting: labels ----------
+    &__labels {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+    }
+
+    // ---------- supporting: text (message bubble) ----------
+    &__bubble {
+        box-sizing: border-box;
+        width: 100%;
+        padding: 12px;
+        background-color: var(--white);
+        border: 1px solid var(--border-200);
+        // Speech-bubble: square top-left, rounded elsewhere.
+        border-radius: 0 8px 8px 8px;
+        box-shadow: @feed-bubble-shadow;
+    }
+
+    &__text {
+        color: var(--black);
+        white-space: pre-wrap;
+        overflow-wrap: anywhere;
+
+        &.is-clamped {
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 4;   // overridden inline via clampLines
+            overflow: hidden;
+            position: relative;
+        }
+
+        // Fade the last visible line while clamped and actually overflowing.
+        &.is-clamped.is-overflowing::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            height: 1.4em;
+            background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--white));
+            pointer-events: none;
+        }
+    }
+
+    // The toggle is the DS Button (text/link). Only position it below the text.
+    &__toggle {
+        align-self: flex-start;
+        margin-top: 8px;
+    }
+}

package/asideSummaryCard.less

@@ -1,12 +1,30 @@
+//
+// AsideSummaryCard — new Figma "Summary card". BPO-15015. Node 10995:49133.
+//
+// Contract-preserving restyle: the card stays fluid (a sidebar sizes it, not the
+// Figma fixed 376px) and keeps its `.summary-card*` classes. The card itself
+// carries NO horizontal padding — each block (title, header, section) is inset
+// 32px, so a section's divider can run full width while its text sits inset,
+// exactly as Figma draws it. Blocks are spaced by a 20px column gap.
+//
 .summary-card {
     background: var(--white);
-    padding: 24px;
     border: 1px solid var(--border-200);
-    .border-radius(@border-radius);
+    .border-radius(16px);
+    padding: 26px 0;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
 
     &__title {
-        font-size: @font-size;
-        margin-bottom: 20px;
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0 32px;
+        font-size: @font-size; // 16
+        line-height: 1.5rem; // 24
+        color: var(--black);
         font-weight: @font-weight-semibold;
     }
 
@@ -16,4 +34,49 @@
             padding-left: 15px;
         }
     }
-}
+
+    // ---- Opt-in: summary header (Figma "Summary header") -----------------
+    // Type=Assignment composes FlagFeatureIcon; Type=Feature icon composes
+    // FeaturedIcon; Type=Text passes no icon. The icon is a node either way.
+    &__header {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0 32px;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+
+        &-icon {
+            flex-shrink: 0;
+            display: inline-flex;
+        }
+
+        &-text {
+            display: flex;
+            flex-direction: column;
+            min-width: 0; // let long titles/meta ellipsis rather than push width
+        }
+
+        &-title {
+            font-size: @h4-font-size; // 18 — DS has no dedicated 18px text token; h4 carries 18/28
+            line-height: @h4-line-height; // 28
+            color: var(--black);
+            font-weight: @font-weight-semibold;
+        }
+
+        &-meta {
+            font-size: @font-size; // 16
+            line-height: 1.5rem; // 24
+            color: var(--text-600);
+        }
+    }
+
+    // ---- Opt-in: empty state ---------------------------------------------
+    &__empty {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 6px 32px;
+        display: flex;
+        justify-content: center;
+    }
+}

package/asideSummaryCardSection.less

@@ -1,33 +1,66 @@
+//
+// AsideSummaryCardSection — new Figma "Summary card" section + rows.
+// BPO-15015. Nodes 10995:49049 (section) / 10995:49013 (input).
+//
+// Contract-preserving restyle: every `.summary-card-section*` class is kept, so
+// consumers inherit the new look with no code change. Content is inset 32px; the
+// section title's divider runs full width. Rows STACK (label 16/24 Text/600 over
+// value 16/24 black, 4px apart) — the only layout. Blocks are spaced by a 20px
+// column gap.
+//
 .summary-card-section {
-    font-size: @font-size-xs;
-    margin-bottom: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    width: 100%;
+    font-size: @font-size; // 16
+    line-height: 1.5rem; // 24
 
     &__title {
-        font-size: @font-size-xs;
+        box-sizing: border-box;
+        padding: 0 32px 12px;
         border-bottom: 1px solid var(--border-200);
-        padding-bottom: 6px;
-        margin-bottom: 20px;
+        font-size: @font-size; // 16
+        line-height: 1.5rem; // 24
+        color: var(--black);
         font-weight: @font-weight-semibold;
     }
 
+    &__content {
+        box-sizing: border-box;
+        padding: 0 32px;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+
+        // Intro copy and step lists are supporting text — Text/600, not black.
+        p,
+        ol,
+        ul {
+            color: var(--text-600);
+        }
+    }
+
+    // Full-width "View more" toggle (DS Button carries no fullWidth prop).
+    &__more {
+        width: 100%;
+    }
+
+    // Stacked rows — the new default. Label above value, 4px apart.
+    // `!important` intentionally overrides the legacy inline `display` some
+    // consumers set on hand-written `__detail` rows, so the new stacked layout
+    // wins without touching their markup.
     &__detail {
         display: flex !important;
-        justify-content: space-between;
-        margin-bottom: 20px;
+        flex-direction: column;
+        gap: 4px;
 
         &__label {
-            display: inline-block;
             color: var(--text-600);
-            flex-basis: 50%;
-            padding-right: 10px;
         }
 
         &__value {
-            display: inline-block;
-            text-align: right;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+            color: var(--black);
 
             i {
                 font-size: @font-size-xs;
@@ -35,4 +68,50 @@
             }
         }
     }
-}
+
+    // ---- Opt-in: avatar / user row (Figma "Summary input" Type=User) -----
+    &__user {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        &-label {
+            color: var(--text-600);
+        }
+
+        &-row {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        &-info {
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+        }
+
+        &-name {
+            font-size: @font-size-sm; // 14
+            line-height: 1.25rem; // 20
+            color: var(--black);
+            font-weight: @font-weight-semibold;
+        }
+
+        &-email {
+            font-size: @font-size-sm; // 14
+            line-height: 1.25rem; // 20
+            color: var(--text-600);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    // ---- Opt-in: tag chips (Figma "Summary tags") ------------------------
+    &__tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+}

package/avatar.less

@@ -144,11 +144,12 @@
     }
     &:focus-visible {
         // Figma spec used a faint grey ring (rgba(152,162,179,0.14)) that fails
-        // WCAG 1.4.11/2.4.7 (~1.1:1) and diverges from DS focus rule. Use the
-        // DS-standard focus ring; the transparent outline keeps it visible in
-        // Windows High-Contrast / forced-colors mode (box-shadow is dropped there).
-        outline: 2px solid transparent;
-        outline-offset: 2px;
+        // WCAG 1.4.11/2.4.7 (~1.1:1) and diverges from DS focus rule. The DS halo
+        // is no better on its own at 1.37:1, so @focus-outline (--brand-500,
+        // 3.23:1) is the indicator; it also survives Windows High-Contrast /
+        // forced-colors mode, where the box-shadow is dropped.
+        outline: @focus-outline;
+        outline-offset: @focus-outline-offset;
         box-shadow: @form-focus-box-shadow;
     }
     &:disabled {