benivo-ui-library 1.9.76 → 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/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/benivo-ui-lib.less

@@ -1,13 +1,17 @@
 @import '../components/input/input.less';
 @import '../components/tooltip/tooltip.less';
 @import '../components/button/button.less';
+@import '../components/closeButton/closeButton.less';
 @import '../components/spinner/spinner.less';
 @import '../components/fantasyButton/fantasyButton.less';
+@import '../components/miButton/miButton.less';
 @import '../components/checkbox/checkbox.less';
 @import '../components/radiobutton/radiobutton.less';
+@import '../components/checkboxGroup/checkboxGroup.less';
 @import '../components/slider/slider.less';
 @import '../components/progress/progress.less';
 @import '../icons/featuredIcon/featuredIcon.less';
+@import '../icons/flagFeatureIcon/flagFeatureIcon.less';
 @import '../icons/starIcon/starIcon.less';
 @import '../icons/checkIcon/checkIcon.less';
 @import '../components/checkItem/checkItem.less';
@@ -15,11 +19,16 @@
 @import '../icons/folderIcon/folderIcon.less';
 @import '../icons/fileTypeIcon/fileTypeIcon.less';
 @import '../components/badge/badge.less';
+@import '../components/activityFeed/activityFeed.less';
 @import '../components/notificationCard/notificationCard.less';
 @import '../components/alertBanner/alertBanner.less';
 @import '../components/alert/alert.less';
 @import '../icons/pageHeaderIcon/pageHeaderIcon.less';
 @import '../components/breadcrumbs/breadcrumbs.less';
+@import '../components/pageIndicator/pageIndicator.less';
+@import '../components/fileUpload/fileUpload.less';
+@import '../components/pagination/pagination.less';
+@import '../components/shared/optionList.less';
 @import '../components/select/select.less';
 @import '../components/datePicker/datePicker.less';
 @import '../components/navigation/navigation.less';
@@ -28,6 +37,9 @@
 @import '../components/copyInput/copyInput.less';
 @import '../components/currencyInput/currencyInput.less';
 @import '../components/phoneNumber/phoneNumber.less';
+@import '../components/emptyState/emptyState.less';
+@import '../components/emptyState/illustration/illustration.less';
+@import '../components/menu/menu.less';
 @import '../components/heroInput/heroInput.less';
 @import '../components/formSection/formSection.less';
 @import '../components/verificationCode/verificationCode.less';
@@ -39,6 +51,8 @@
 @import '../components/countryFlag/countryFlag.less';
 @import '../components/flag/flag.less';
 @import '../components/textarea/textarea.less';
+@import '../components/modal/modal.less';
+@import '../components/fileCard/fileCard.less';
 @import './forms.less';
 @import './spacing.less';
 @import './typography.less';

package/button.less

@@ -1,6 +1,13 @@
 //
 // Buttons
 //
+// WCAG 1.4.3 (BPO-14588, EPApp sheet row 110322 "Update button in the profile page has
+// insufficient contrast ratio"): all eight disabled variants below coloured their label
+// var(--text-400) = #98A2B3. Measured on the profile page's Update button, which opens in its
+// disabled state, that is 2.464:1 against the button's own background - the label is there but
+// cannot be read. SC 1.4.3 does exempt "inactive user interface components", so this is fixed
+// because an unreadable label is a defect either way, not because the criterion forces it.
+// var(--text-500) measures 4.6:1 on --bg-100 and 4.8:1 on --bg-50.
 .client-hub {
     .dropdown .btn {
         &:first-child {
@@ -344,7 +351,7 @@
             opacity: 1;
             background: var(--bg-100);
             border-color: var(--bg-200);
-            color: var(--text-400);
+            color: var(--text-500);
         }
     }
 
@@ -372,7 +379,7 @@
             opacity: 1;
             background: var(--bg-100);
             border-color: var(--bg-200);
-            color: var(--text-400);
+            color: var(--text-500);
         }
 
         .bn-spinner div {
@@ -414,7 +421,7 @@
             opacity: 1;
             background: var(--white);
             border-color: var(--bg-200);
-            color: var(--text-400);
+            color: var(--text-500);
         }
 
         .bn-spinner div {
@@ -445,7 +452,7 @@
         &[disabled] {
             opacity: 1;
             background: transparent;
-            color: var(--text-400);
+            color: var(--text-500);
         }
 
         .bn-spinner div {
@@ -477,7 +484,7 @@
         &[disabled] {
             opacity: 1;
             background: transparent;
-            color: var(--text-400);
+            color: var(--text-500);
         }
 
         .bn-spinner div {
@@ -527,7 +534,7 @@
             opacity: 1;
             background: var(--bg-100);
             border-color: var(--bg-200);
-            color: var(--text-400);
+            color: var(--text-500);
         }
     }
 
@@ -556,7 +563,7 @@
             opacity: 1;
             background: var(--white);
             border-color: var(--bg-200);
-            color: var(--text-400);
+            color: var(--text-500);
         }
 
         .bn-spinner div {
@@ -587,7 +594,7 @@
         &[disabled] {
             opacity: 1;
             background: transparent;
-            color: var(--text-400);
+            color: var(--text-500);
         }
 
         .bn-spinner div {
@@ -632,4 +639,23 @@
     &.has-error {
         border-color: var(--error-main) !important;
     }
-}
+}
+
+// =====================================================================================
+// SC 1.4.11 (BPO-14588, sheet rows 110087 / 110150): a button "appearing as normal text"
+// in the Aquatic / Desert contrast themes.
+//
+// A contrast theme forces every background to Canvas, so a variant whose whole button-ness
+// is its fill has nothing left. Most variants here also set border-color, which survives -
+// but btn-color-link sets `border: none`, and any button carrying a variant class this
+// stylesheet does not define falls back to the base rule and depends on the consumer having
+// overridden @btn-border. Giving every .btn a ButtonText edge in forced colours costs
+// nothing in normal rendering and makes the shape independent of which variant is in play -
+// which matters most for CMS-authored buttons, whose class list is not in any repo.
+// =====================================================================================
+@media (forced-colors: active) {
+
+    .btn {
+        border: 1px solid ButtonText;
+    }
+}