benivo-ui-library 1.9.74 → 1.9.76

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/alert.less

@@ -0,0 +1,278 @@
+//
+// Alert
+//
+// Two sizes:
+//   floating    bordered card, icon + text stacked with actions beneath
+//   full-width  spans the viewport with a single bottom rule; title and
+//               supporting text sit inline and the actions move to the right
+//
+// Six colours. Every colour but `default` uses a tinted FeaturedIcon; `default`
+// is a white, bordered container instead.
+//
+@alert-radius: 0.75rem;         // 12px
+@alert-pad: 16px;
+@alert-gap: 16px;
+@alert-shadow: 0 1px 1px rgba(16, 24, 40, 0.05);
+@alert-icon-plain: 40px;
+@alert-full-max: 1280px;
+
+.bnv-alert {
+    font-family: @font-family;
+    background-color: var(--white);
+    // --border-300 arrives with the Input PR; until then this falls back to the
+    // identical colour under its other name, so the border is right either way.
+    border: 1px solid var(--border-300, var(--text-300));
+    color: var(--black);
+
+    &__container {
+        display: flex;
+        align-items: flex-start;
+        gap: @alert-gap;
+        position: relative;
+    }
+
+    // ---------- leading icon ----------
+    &__icon {
+        flex-shrink: 0;
+    }
+
+    // `default` has no tint: a white box with a border and the same shadow as
+    // the alert itself.
+    &__icon--plain {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        width: @alert-icon-plain;
+        height: @alert-icon-plain;
+        background-color: var(--white);
+        border: 1px solid var(--bg-200);
+        border-radius: 0.5rem;
+        box-shadow: @alert-shadow;
+        color: var(--text-600);
+
+        svg {
+            width: 20px;
+            height: 20px;
+            display: block;
+        }
+    }
+
+    // ---------- text ----------
+    &__content {
+        display: flex;
+        flex: 1 0 0;
+        min-width: 0;
+        flex-direction: column;
+        gap: 12px;
+    }
+
+    &__text {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        min-width: 0;
+    }
+
+    &__title,
+    &__supporting {
+        margin: 0;
+        font-size: @font-size;
+        line-height: 24px;
+    }
+
+    &__title {
+        font-weight: @font-weight-semibold;
+        color: var(--black);
+    }
+
+    &__supporting {
+        font-weight: @font-weight-normal;
+        color: var(--text-600);
+    }
+
+    // ---------- actions ----------
+    &__actions {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-shrink: 0;
+    }
+
+    &__action {
+        font-family: inherit;
+        font-weight: @font-weight-semibold;
+        cursor: pointer;
+        border: 0;
+        background: none;
+        padding: 0;
+
+        &:focus-visible {
+            outline: 2px solid var(--primary);
+            outline-offset: 2px;
+            border-radius: 0.25rem;
+        }
+    }
+
+    // ---------- close ----------
+    &__close {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        width: 36px;
+        height: 36px;
+        padding: 8px;
+        border: 0;
+        background: none;
+        border-radius: 0.5rem;
+        color: var(--text-400);
+        cursor: pointer;
+
+        svg {
+            width: 20px;
+            height: 20px;
+            display: block;
+        }
+
+        &:hover {
+            background-color: var(--bg-100);
+            color: var(--text-600);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--primary);
+            outline-offset: 2px;
+        }
+    }
+
+    // ---------- floating ----------
+    &--floating {
+        position: relative;
+        padding: @alert-pad;
+        border-radius: @alert-radius;
+        box-shadow: @alert-shadow;
+
+        // the close X is placed against the card, not the padded content, so
+        // it can sit 7px from the alert's own edge as Figma draws it
+        .bnv-alert__container {
+            position: static;
+        }
+
+        // the title clears the absolutely-positioned close button
+        .bnv-alert__text {
+            padding-right: 32px;
+        }
+
+        .bnv-alert__action {
+            font-size: @font-size-sm;
+            line-height: 20px;
+        }
+
+        .bnv-alert__action--secondary {
+            color: var(--black);
+        }
+
+        .bnv-alert__action--primary {
+            color: var(--brand-700);
+        }
+
+        .bnv-alert__close {
+            position: absolute;
+            top: 7px;
+            right: 7px;
+        }
+
+        @media @md-max {
+            .bnv-alert__container {
+                gap: 12px;
+            }
+        }
+    }
+
+    // ---------- full-width ----------
+    // A page-level bar: no radius, no shadow, a single rule underneath.
+    &--full-width {
+        border-width: 0 0 1px;
+        border-radius: 0;
+        box-shadow: none;
+
+        .bnv-alert__container {
+            align-items: center;
+            gap: 12px;
+            max-width: @alert-full-max;
+            margin: 0 auto;
+            padding: 12px 32px;
+        }
+
+        .bnv-alert__content {
+            flex-direction: row;
+            align-items: center;
+            gap: 16px;
+        }
+
+        // title and supporting text run inline here, wrapping as one block
+        .bnv-alert__text {
+            flex: 1 0 0;
+            flex-direction: row;
+            flex-wrap: wrap;
+            align-items: baseline;
+            gap: 2px 6px;
+        }
+
+        // Link actions, not buttons — a page-level bar shouldn't carry a CTA
+        // that competes with the page's own primary action.
+        .bnv-alert__action {
+            font-size: @font-size-sm;
+            line-height: 20px;
+        }
+
+        .bnv-alert__action--secondary {
+            color: var(--black);
+        }
+
+        .bnv-alert__action--primary {
+            color: var(--brand-700);
+        }
+
+        @media @md-max {
+            position: relative;
+
+            // everything stacks: the actions are a sibling of the content here,
+            // so it is the container that has to turn, not the content
+            .bnv-alert__container {
+                flex-direction: column;
+                align-items: stretch;
+                gap: 16px;
+                padding: 16px;
+            }
+
+            // Figma drops the leading icon on mobile — the message carries itself
+            .bnv-alert__icon {
+                display: none;
+            }
+
+            .bnv-alert__content {
+                flex-direction: column;
+            }
+
+            // title and supporting text stop running inline
+            .bnv-alert__text {
+                flex-direction: column;
+                gap: 4px;
+                padding-right: 32px; // clears the close X
+            }
+
+            // links stay inline on mobile too — there is no button to stack
+            .bnv-alert__actions {
+                gap: 12px;
+            }
+
+            .bnv-alert__close {
+                position: absolute;
+                top: 7px;
+                right: 7px;
+            }
+        }
+    }
+}

package/alertBanner.less

@@ -0,0 +1,145 @@
+//
+// Alert banner
+//
+// A short inline message in a tinted pill — smaller than Alert, with no title
+// and no actions. Four colours, and the text sits centred or left.
+//
+// Namespaced `bnv-` deliberately: MPApp and VPApp both ship a local
+// `.alert-banner` class, and this LESS is global.
+//
+@alert-banner-radius: 0.75rem;  // 12px
+@alert-banner-pad-y: 8px;
+@alert-banner-pad-x: 12px;
+@alert-banner-gap: 8px;
+@alert-banner-icon: 20px;
+
+.bnv-alert-banner {
+    display: flex;
+    align-items: center;
+    gap: @alert-banner-gap;
+    width: 100%;
+    box-sizing: border-box;
+    padding: @alert-banner-pad-y @alert-banner-pad-x;
+    border-radius: @alert-banner-radius;
+    font-family: @font-family;
+
+    &__slot {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+
+    // An empty slot collapses by default, so it never indents left-aligned text.
+    &__slot:empty {
+        display: none;
+    }
+
+    &__icon {
+        display: inline-flex;
+        flex-shrink: 0;
+
+        svg {
+            width: @alert-banner-icon;
+            height: @alert-banner-icon;
+            display: block;
+        }
+    }
+
+    // The text takes the remaining width, so `align` decides where a short
+    // message sits rather than the flexbox packing.
+    &__text {
+        flex: 1 0 0;
+        min-width: 0;
+        margin: 0;
+        font-size: @font-size-sm;
+        line-height: 20px;
+        font-weight: @font-weight-semibold;
+        word-break: break-word;
+    }
+
+    // Centred text only sits true if both sides reserve the same width, so here
+    // the slots hold their size even when empty. Without it a lone icon drags
+    // the text ~14px off centre. Left-aligned text needs no such balancing.
+    &--center &__slot,
+    &--center &__slot:empty {
+        display: flex;
+        width: @alert-banner-icon;
+        height: @alert-banner-icon;
+    }
+
+    &--center &__text {
+        text-align: center;
+    }
+
+    &--left &__text {
+        text-align: left;
+    }
+
+    // The same control as the Badge's dismiss — Figma calls it "_Badge close X"
+    // in both components, so the hover and focus treatment matches: a 16% tint
+    // of whatever colour the X is already carrying.
+    //
+    // Blending keeps the resting X sitting inside the banner tint; hover and
+    // focus turn it off so the fill renders predictably.
+    &__close {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        padding: 2px;
+        border: 0;
+        background-color: transparent;
+        border-radius: 3px;
+        cursor: pointer;
+        color: inherit;
+        mix-blend-mode: darken;
+        .transition(background-color .15s ease);
+
+        svg {
+            width: 12px;
+            height: 12px;
+            display: block;
+        }
+
+        &:hover {
+            mix-blend-mode: normal;
+            background-color: color-mix(in srgb, currentColor 16%, transparent);
+        }
+
+        &:focus-visible {
+            mix-blend-mode: normal;
+            background-color: color-mix(in srgb, currentColor 16%, transparent);
+            outline: 2px solid currentColor;
+            outline-offset: -1px;
+        }
+    }
+
+    // ---------- colours ----------
+    // Tint carries the fill, and the text and icon share one colour.
+    &--grey {
+        background-color: var(--bg-100);
+        color: var(--text-600);
+    }
+
+    &--success {
+        background-color: var(--success-light);
+        color: var(--success-main);
+    }
+
+    &--warning {
+        background-color: var(--warning-light);
+        color: var(--warning-main);
+    }
+
+    &--error {
+        background-color: var(--error-light);
+        color: var(--error-main);
+
+        // The only colour whose X is not the text colour — Figma softens it to
+        // rose-400 so the dismiss control doesn't shout as loudly as the message.
+        .bnv-alert-banner__close {
+            color: var(--rose-400);
+        }
+    }
+}