benivo-ui-library 1.9.75 → 1.9.77

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

@@ -0,0 +1,167 @@
+//
+// Accordion
+//
+// One row: a chevron, a title, and a panel that opens under it.
+//
+//              padding        border          radius
+//   none       —              —               —
+//   stroke     24px top       1px top         —
+//   card       16px all       1px all         12px
+//
+// Only those three lines differ between the looks. Everything else — the 24px
+// gap, the 18/28 title, the 16/24 body, the 8px above the panel — is shared.
+//
+// Figma also carries a Breakpoint property, which is not a variant here: the
+// mobile frames are identical to the desktop ones apart from being narrower, so
+// this reflows rather than switching on a prop.
+//
+//
+// The group holds a set of rows and does nothing else — no border, no padding,
+// no background. It only decides how far apart they sit, and that depends on the
+// divider: a stroke needs clear air either side of its rule, while cards carry
+// their own edges and sit closer.
+//
+//   none     24px
+//   stroke   24px
+//   card     10px
+//
+// `align-items` is left alone so the rows stretch to the group's width. Figma
+// says items-start with w-full on each row, which comes to the same thing without
+// reaching into the children.
+//
+.bnv-accordion-group {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    width: 100%;
+
+    &--card {
+        gap: .625rem;
+    }
+}
+
+.bnv-accordion {
+    box-sizing: border-box;
+    min-width: 320px;
+
+    // Structural only. The row needs to appear in a screen reader's heading list,
+    // but its size comes from __title, not from whichever level is used.
+    &__heading {
+        margin: 0;
+        font: inherit;
+    }
+
+    &__trigger {
+        display: flex;
+        align-items: flex-start;
+        gap: 1.5rem;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        background: none;
+        cursor: pointer;
+        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.
+        &:focus-visible {
+            outline: 2px solid var(--brand-400);
+            outline-offset: 2px;
+        }
+    }
+
+    &__icon {
+        display: inline-flex;
+        flex-shrink: 0;
+        // Figma nudges the 24px chevron 2px down so it reads as centred against
+        // the 28px title line instead of sitting flush with its ascender.
+        padding-top: 2px;
+        color: var(--text-400);
+
+        svg {
+            display: block;
+        }
+    }
+
+    // --- hover -----------------------------------------------------------
+    //
+    // Guarded on a device that genuinely hovers: a touch device latches :hover
+    // after a tap, which would leave the last-tapped row looking permanently
+    // active.
+    //
+    // The hover belongs to the trigger, not the whole row — the panel is not
+    // clickable, so hovering the answer must not suggest that it is. For the card
+    // that means matching on the trigger but colouring the card, hence `:has()`
+    // rather than a plain `:hover` on the root.
+    @media (hover: hover) {
+        .bnv-accordion__trigger:hover .bnv-accordion__icon {
+            color: var(--text-600);
+        }
+
+        &--card:has(.bnv-accordion__trigger:hover) {
+            background: var(--bg-50);
+        }
+    }
+
+    &__title {
+        flex: 1 0 0;
+        min-width: 0;
+        color: var(--black);
+        font-size: 1.125rem;
+        line-height: 1.75rem;
+        font-weight: @font-weight-medium;
+    }
+
+    // No `display` here on purpose: the panel is hidden with the `hidden`
+    // attribute, and a display rule would override the browser's own
+    // `[hidden] { display: none }` and leave the answer on screen when closed.
+    &__panel {
+        margin-top: .5rem;
+        // 24px chevron + 24px gap, so the body lines up under the title rather
+        // than under the icon.
+        padding-left: 3rem;
+        color: var(--text-600);
+        font-size: 1rem;
+        line-height: 1.5rem;
+        font-weight: @font-weight-normal;
+    }
+
+    // --- icon position ---------------------------------------------------
+    // `order` rather than row-reverse: the chevron moves but the DOM does not,
+    // so the title stays first for anything reading the markup.
+    &--icon-right {
+        .bnv-accordion__icon { order: 1; }
+
+        .bnv-accordion__panel {
+            padding-left: 0;
+            padding-right: 3rem;
+        }
+    }
+
+    // --- dividers --------------------------------------------------------
+    //
+    // Both rules are drawn with an inset shadow rather than a border, because
+    // Figma puts its strokes *inside* the frame while a CSS border adds to it.
+    // With a border, stroke came out 1px taller than the design and card 2px
+    // taller AND 2px narrower — which moved where the body copy wraps, so it was
+    // not only a total-height rounding difference. An inset shadow occupies no
+    // space, which is exactly what Figma is doing.
+    //
+    // The rule sits on top of each row, so stacking rows draws the lines between
+    // them without needing a wrapper. The first row gets one too, which is
+    // Figma's.
+    &--stroke {
+        box-shadow: inset 0 1px 0 0 var(--border-200);
+        padding-top: 1.5rem;
+    }
+
+    &--card {
+        background: var(--white);
+        box-shadow: inset 0 0 0 1px var(--border-200);
+        border-radius: 12px;
+        padding: 1rem;
+    }
+}

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;
+    }
+}