@visns-studio/visns-components 6.20.1 → 6.21.0

package/src/components/styles/TabStrip.module.scss

@@ -0,0 +1,96 @@
+@use 'surface' as *;
+
+/**
+ * TabStrip — the underline tabs.
+ *
+ * The visual language GenericIndex draws, as a component that can be used on its
+ * own. Three bespoke screens had rebuilt it by hand, each with the note "the
+ * library's tabs are wired to their own state machine, so what is shared is the
+ * LOOK, not the code" — which was true, and is the reason this exists: the look
+ * belongs in the library even when the state machine does not.
+ *
+ * The full-width rule is on the STRIP rather than on each tab, and the active
+ * tab pulls itself down over it by a pixel, so its underline sits ON that line
+ * instead of floating above it.
+ */
+
+.strip {
+    @include surface-tokens;
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-md, 1rem);
+    border-bottom: 1px solid var(--pr-line);
+}
+
+.tab {
+    display: inline-flex;
+    gap: 0.4rem;
+    align-items: center;
+    padding: 0.6rem 0.15rem;
+    /* Sits over the strip's own rule. */
+    margin-bottom: -1px;
+    color: var(--pr-muted);
+    font-family: inherit;
+    font-size: var(--font-size-sm, 0.8125rem);
+    font-weight: var(--font-weight-semibold, 600);
+    white-space: nowrap;
+    background: none;
+    border: 0;
+    /* Drawn transparent rather than added on activation, so a tab does not shift
+       by 2px the moment it is selected. */
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    transition:
+        color var(--speed, 160ms) var(--ease, ease),
+        border-color var(--speed, 160ms) var(--ease, ease);
+
+    &:hover:not(:disabled) {
+        color: var(--pr-heading);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--pr-accent);
+        outline-offset: 2px;
+    }
+
+    &:disabled {
+        cursor: default;
+        opacity: 0.5;
+    }
+}
+
+.active {
+    color: var(--pr-heading);
+    border-bottom-color: var(--pr-accent);
+}
+
+/* -------------------------------------------------------------------------- */
+/* the count on a tab                                                         */
+/* -------------------------------------------------------------------------- */
+
+/* A count rides along where a tab has one worth pre-empting — it is the
+   difference between "go and look at Service health" and "go and look at Service
+   health, there are 21 things wrong".
+ *
+ * Two tones, and the distinction matters: `quiet` is HOW MANY (four tickets on
+ * this contact), `danger` is HOW MANY ARE WRONG (twenty-one devices offline). A
+ * red pill on a plain count is an alarm about nothing. */
+.badge {
+    padding: 0.05rem 0.35rem;
+    font-size: var(--font-size-xs, 0.75rem);
+    font-variant-numeric: tabular-nums;
+    border-radius: var(--radius-pill, 999px);
+}
+
+.badgeQuiet {
+    color: var(--pr-muted);
+    background: var(--pr-quiet);
+    border: 1px solid var(--pr-line);
+}
+
+.badgeDanger {
+    color: #fff;
+    background: var(--pr-danger);
+    border: 1px solid transparent;
+}

package/src/components/styles/_surface.scss

@@ -0,0 +1,49 @@
+/**
+ * The surface language the page primitives are drawn in.
+ *
+ * StatStrip, FactsBand, BandedList, PageHeader and TabStrip were extracted from
+ * five hand-rolled CRM screens that each declared their own `--sb-*` / `--c-*` /
+ * `--zd-*` namespace on the page root and inherited it down. The values were
+ * not identical between them — one page's hairline was `--border-color`, the
+ * next mixed 12% of the body ink — so a primitive that read the app tokens
+ * directly would have redrawn half of those screens the moment it landed.
+ *
+ * Hence two levels. Each local `--pr-*` alias resolves a PUBLIC `--vs-*`
+ * override first and falls back to the app's own token, so:
+ *
+ *   - a project that defines nothing gets a plain, working component;
+ *   - a page that already has a palette sets `--vs-line`, `--vs-surface` and
+ *     the rest ONCE on its own root and every primitive inside it follows.
+ *
+ * The mixin is applied to each component's ROOT class rather than to a shared
+ * `:root` block: CSS-module scoping means there is no shared block to write to,
+ * and a Stat rendered outside a StatStrip must still resolve its colours.
+ *
+ * A local alias may not be declared and read on the same element by an override
+ * — that is why the override is `var(--vs-*)` inside the alias rather than the
+ * alias being redeclared: an inherited custom property loses to a declaration
+ * on the element itself.
+ */
+
+@mixin surface-tokens {
+    --pr-surface: var(--vs-surface, var(--background-color, #fff));
+    // The ground the page sits on, which is NOT the card surface — needed by
+    // anything that has to become opaque against the page itself, a sticky
+    // heading with no card behind it being the case that forced it.
+    --pr-page: var(--vs-page, var(--bg-color, #fff));
+    --pr-ink: var(--vs-ink, var(--paragraph-color, #2b2b2b));
+    --pr-heading: var(--vs-heading, var(--primary-color, #1b3933));
+    --pr-muted: var(--vs-muted, var(--muted-color, rgba(43 43 43 / 68%)));
+    --pr-line: var(--vs-line, var(--border-color, #e1e1e1));
+    --pr-quiet: var(
+        --vs-quiet,
+        color-mix(in srgb, var(--pr-ink) 4%, var(--pr-surface))
+    );
+    --pr-accent: var(--vs-accent, var(--highlight-color, #3cbf7d));
+    // There is no amber in the house palette — it is a green and a red — so the
+    // "worth a look, not yet wrong" step is named here once.
+    --pr-warn: var(--vs-warn, #c8811b);
+    --pr-danger: var(--vs-danger, var(--danger-color, #be3e3e));
+    --pr-radius: var(--vs-radius, var(--card-radius, 10px));
+    --pr-shadow: var(--vs-shadow, none);
+}

package/src/index.js

@@ -178,6 +178,7 @@ import {
     clientRecipient,
     conversationCountLabel,
     describeTransport,
+    displayNumber,
     fillTemplate,
     groupMessagesByDay,
     initialsFor,
@@ -189,7 +190,9 @@ import {
     pickInitialThread,
     relativeTime,
     segmentCount,
+    smsHref,
     splitPersonName,
+    telHref,
     threadDisplayName,
     toE164,
 } from './components/sms/smsHelpers';
@@ -247,6 +250,30 @@ import SectionTypeSelector from './components/proposal/SectionTypeSelector';
 import VariableInserter from './components/proposal/VariableInserter';
 import ProposalTemplatePreview from './components/proposal/ProposalTemplatePreview';
 
+/**
+ * Page primitives.
+ *
+ * The scaffolding a bespoke screen is built out of — the strip of figures over a
+ * list, the underline tabs, the urgency bands, the header row and the band of
+ * facts under a record's title. Every one of them was written by hand on three
+ * or more CRM screens first, and had already drifted between them; see
+ * `styles/_surface.scss` for the two-level token scheme that lets a page with an
+ * existing palette adopt them without redrawing itself.
+ */
+import AnchoredMenu from './components/layout/AnchoredMenu';
+import BandedList, { Band } from './components/layout/BandedList';
+import FactsBand, { Fact } from './components/layout/FactsBand';
+import PageHeader from './components/layout/PageHeader';
+import ScrollRegion from './components/layout/ScrollRegion';
+import StatStrip, { Stat } from './components/layout/StatStrip';
+import useContainedHeight from './components/layout/useContainedHeight';
+import TabStrip from './components/navigation/TabStrip';
+
+// Copying, and what to do when the browser will not. Named for the vault
+// because that is where it was written; nothing in it is vault-specific, and
+// every screen with a copy button was otherwise restating it.
+import { canCopy, copyText } from './components/vault/vaultClipboard';
+
 /** OAuth Components */
 import OAuthManager from './components/oauth/OAuthManager';
 import OAuthProviderCard from './components/oauth/OAuthProviderCard';
@@ -339,6 +366,26 @@ export {
     useSmsLive,
     UniversalSearch,
     useSmsThreads,
+    // Phone numbers, for display and for dialling. Beside the SMS module's own
+    // normaliser because that is the formatter they are built on.
+    displayNumber,
+    smsHref,
+    telHref,
+    // Page primitives.
+    AnchoredMenu,
+    Band,
+    BandedList,
+    Fact,
+    FactsBand,
+    PageHeader,
+    ScrollRegion,
+    Stat,
+    StatStrip,
+    TabStrip,
+    useContainedHeight,
+    // Clipboard.
+    canCopy,
+    copyText,
     CameraPlacement,
     CellWithTooltip,
     clampOtp,