@eocrm/design-system 0.0.0-stage → 0.6.17

package/src/components/PasswordStrengthMeter/PasswordStrengthMeter.module.scss

@@ -0,0 +1,80 @@
+@use './PasswordStrengthMeter.tokens';
+
+.meter {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--password-strength-meter-gap);
+  width: 100%;
+}
+
+.segments {
+  display: flex;
+  flex: 1 1 auto;
+  gap: var(--password-strength-meter-segments-gap);
+  min-width: 0;
+}
+
+// Rule 4 note: `flex: 1` on .segments is internal layout of the meter
+// component — the public box is .meter; .segments is its child.
+.segment {
+  flex: 1 1 0;
+  height: var(--password-strength-meter-segment-height);
+  background: var(--password-strength-meter-segment-bg);
+  border-radius: var(--password-strength-meter-segment-radius);
+  transition: background var(--transition-fast);
+}
+
+.label {
+  flex-shrink: 0;
+  font-size: var(--password-strength-meter-label-font-size);
+  color: var(--password-strength-meter-label-fg);
+}
+
+// Per-score fill colors. `.filled` only applies to filled segments
+// (n < score). Score 0 → no segments filled.
+.score-1 .segment.filled {
+  background: var(--password-strength-meter-segment-bg-score-1);
+}
+
+.score-1 .label {
+  color: var(--password-strength-meter-label-fg-score-1);
+}
+
+.score-2 .segment.filled {
+  background: var(--password-strength-meter-segment-bg-score-2);
+}
+
+.score-2 .label {
+  color: var(--password-strength-meter-label-fg-score-2);
+}
+
+.score-3 .segment.filled {
+  background: var(--password-strength-meter-segment-bg-score-3);
+}
+
+.score-3 .label {
+  color: var(--password-strength-meter-label-fg-score-3);
+}
+
+.score-4 .segment.filled {
+  background: var(--password-strength-meter-segment-bg-score-4);
+}
+
+.score-4 .label {
+  color: var(--password-strength-meter-label-fg-score-4);
+}
+
+// Visually-hidden recipe for the live region.
+// stylelint-disable property-disallowed-list -- visually-hidden recipe.
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+// stylelint-enable property-disallowed-list

package/src/components/PasswordStrengthMeter/PasswordStrengthMeter.tokens.scss

@@ -0,0 +1,40 @@
+// PasswordStrengthMeter.tokens.scss — component-scoped tokens for <PasswordStrengthMeter>. Each score (1-4) has its own filled-segment + label color.
+:root {
+  // Meter layout
+  --password-strength-meter-gap: var(--space-2);
+  --password-strength-meter-segments-gap: var(--space-1);
+
+  // Segment (single bar)
+  --password-strength-meter-segment-height: var(--space-1);
+  --password-strength-meter-segment-bg: var(--color-bg-sunken);
+  --password-strength-meter-segment-radius: var(--radius-sm);
+
+  // Label (text next to bar)
+  --password-strength-meter-label-font-size: var(--font-size-sm);
+  --password-strength-meter-label-fg: var(--color-fg-muted);
+
+  // Score 1 — danger
+  --password-strength-meter-segment-bg-score-1: var(--color-danger);
+  --password-strength-meter-label-fg-score-1: var(--color-danger);
+
+  // Score 2 — warning
+  --password-strength-meter-segment-bg-score-2: var(--color-warning-strong);
+
+  // warning uses --color-warning-strong throughout: the label text measured
+  // @contrast --color-warning on --color-bg-sunken = 1.81:1 light
+  // @contrast --color-warning-strong on --color-bg-sunken = 5.04:1 light
+  // @contrast --color-warning on --color-bg = 2.14:1 light
+  // @contrast --color-warning-strong on --color-bg = 5.95:1 light
+  // 2.14:1 on the page background and the filled segment 1.81:1 on the sunken
+  // track. Both, not just the label — fixing one leaves the meter painting a
+  // single score in two different colours. See #481.
+  --password-strength-meter-label-fg-score-2: var(--color-warning-strong);
+
+  // Score 3 — warning
+  --password-strength-meter-segment-bg-score-3: var(--color-warning-strong);
+  --password-strength-meter-label-fg-score-3: var(--color-warning-strong);
+
+  // Score 4 — success
+  --password-strength-meter-segment-bg-score-4: var(--color-success);
+  --password-strength-meter-label-fg-score-4: var(--color-success);
+}

package/src/components/PasswordStrengthMeter/PasswordStrengthMeter.tsx

@@ -0,0 +1,96 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from '../../i18n/useTranslation';
+import styles from './PasswordStrengthMeter.module.scss';
+
+/** Numeric strength score, 0 (empty) – 4 (strong). */
+export type PasswordStrengthScore = 0 | 1 | 2 | 3 | 4;
+
+export interface PasswordStrengthMeterProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * The password to evaluate. Required UNLESS `score` is provided. Evaluated
+   * via the default scoring heuristic or a consumer-supplied `scoreFn`.
+   */
+  value?: string;
+  /**
+   * Pre-computed score (0–4). Wins over `value` + `scoreFn` when both are
+   * present. Use this when scoring is done by zxcvbn or server-side.
+   */
+  score?: PasswordStrengthScore;
+  /**
+   * Custom scoring fn. Receives the password, returns 0–4. Defaults to a
+   * length + character-class heuristic — fine for prototypes, NOT a
+   * security control. Production should pass a real scorer via `score`.
+   */
+  scoreFn?: (value: string) => PasswordStrengthScore;
+  /** Render the textual label next to the segments. Defaults to `true`. */
+  showLabel?: boolean;
+}
+
+/**
+ * Default heuristic — DO NOT TREAT AS A SECURITY CONTROL.
+ *
+ * Length gates everything: passwords under 8 characters always score 1
+ * ("Weak") regardless of character variety, because a 4-char "Ab1!"
+ * with mixed case + digit + special is still trivially brute-forced.
+ * Bonuses kick in only once the password reaches the 8-char floor.
+ */
+function defaultScoreFn(pw: string): PasswordStrengthScore {
+  if (!pw) return 0;
+  // Length floor — anything shorter than 8 chars caps at 1.
+  if (pw.length < 8) return 1;
+  let score = 1; // starts at 1 since length >= 8
+  if (pw.length >= 12) score++;
+  if (/[A-Z]/.test(pw) && /[a-z]/.test(pw)) score++;
+  if (/\d/.test(pw) && /[^A-Za-z0-9]/.test(pw)) score++;
+  return Math.min(score, 4) as PasswordStrengthScore;
+}
+
+type MessageKeyForScore =
+  | 'passwordStrengthMeter.weak'
+  | 'passwordStrengthMeter.fair'
+  | 'passwordStrengthMeter.strong'
+  | 'passwordStrengthMeter.veryStrong';
+
+/** Maps each non-empty score to its i18n key. Score 0 returns no label. */
+const MESSAGE_KEY_FOR_SCORE: Record<1 | 2 | 3 | 4, MessageKeyForScore> = {
+  1: 'passwordStrengthMeter.weak',
+  2: 'passwordStrengthMeter.fair',
+  3: 'passwordStrengthMeter.strong',
+  4: 'passwordStrengthMeter.veryStrong',
+};
+
+/**
+ * Visual 4-segment password-strength meter with pluggable scoring; the default heuristic is a UX hint only.
+ * @see docs/components/PasswordStrengthMeter.md
+ */
+export const PasswordStrengthMeter = forwardRef<HTMLDivElement, PasswordStrengthMeterProps>(
+  function PasswordStrengthMeter(
+    { value, score, scoreFn = defaultScoreFn, showLabel = true, className, ...props },
+    ref,
+  ) {
+    const t = useTranslation();
+    const resolved: PasswordStrengthScore = score ?? (value !== undefined ? scoreFn(value) : 0);
+    const labelText = resolved === 0 ? '' : t(MESSAGE_KEY_FOR_SCORE[resolved]);
+
+    return (
+      <div
+        ref={ref}
+        className={clsx(styles.meter, styles[`score-${resolved}`], className)}
+        {...props}
+      >
+        <div className={styles.segments} aria-hidden="true">
+          {[0, 1, 2, 3].map((i) => (
+            <span key={i} className={clsx(styles.segment, i < resolved && styles.filled)} />
+          ))}
+        </div>
+        {showLabel && <span className={styles.label}>{labelText}</span>}
+        {/* Polite live region — announces label changes ("Weak" → "Fair") so
+            screen-reader users hear progress as they type. */}
+        <span role="status" aria-live="polite" className={styles.srOnly}>
+          {labelText}
+        </span>
+      </div>
+    );
+  },
+);

package/src/components/PasswordStrengthMeter/index.ts

@@ -0,0 +1,2 @@
+export { PasswordStrengthMeter } from './PasswordStrengthMeter';
+export type { PasswordStrengthMeterProps, PasswordStrengthScore } from './PasswordStrengthMeter';

package/src/components/PersonDisplay/PersonDisplay.module.scss

@@ -0,0 +1,180 @@
+@use './PersonDisplay.tokens';
+
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--person-display-gap);
+
+  // An inline-flex box is sized shrink-to-fit, whose floor is its MIN-CONTENT
+  // width — and a Description that declares `white-space: nowrap` (below) has a
+  // min-content width of the whole unbroken line. So a long email made this box
+  // 426px wide inside a 209px column and painted straight out of a DataTable
+  // stacked card (#527). Clamping to the container is the only place the chain
+  // can be bounded: `overflow` does not reduce an intrinsic contribution, and
+  // `min-width: 0` on the inner column does not either. `.shrink` below already
+  // carried this for the case it names; every PersonDisplay needs it.
+  max-width: 100%;
+
+  // The other half of that clamp, for a PersonDisplay that is itself a FLEX
+  // ITEM (an activity row: IconTile + PersonDisplay + timestamp in a nowrap
+  // Cluster). A flex item's automatic minimum is its min-content width — the
+  // whole nowrap agent row — so `max-width` alone never got a chance: measured
+  // in Chromium at 360px, a long agent + member overflowed by 36px and crushed
+  // the IconTile to 0px. Intrinsic sizing like `max-width`, not placement.
+  min-width: 0;
+
+  // Size-keyed gap — descriptive text doesn't need to crowd the avatar.
+  // sm tightens; md and lg share the same outer gap.
+  &[data-size='sm'] {
+    gap: var(--person-display-gap-sm);
+  }
+
+  // One line tall (inline Avatar = 1lh, bare Name), so top-aligning to the
+  // line box fills it without growing it when the row sits inside text;
+  // the default baseline is the avatar's and pushed it off the line.
+  &[data-size='inline'] {
+    gap: var(--person-display-gap-sm);
+    vertical-align: top;
+  }
+}
+
+// Opt-in shrink-wrap (the `shrink` prop). The root is `inline-flex`, but as a child
+// of a STRETCHING flex/grid container CSS blockifies it and the parent's
+// `align-items: stretch` / `justify-self: stretch` stretches it to the full column
+// width — so a Popover/Tooltip cloned onto it anchors to that wide box and centers on
+// the empty column instead of the avatar+name (issue #219). `width: fit-content`
+// forces the box back to its content width in BOTH flex and grid (an explicit,
+// non-`auto` width opts out of the stretch), re-anchoring the overlay. This sizes the
+// element's OWN box (it doesn't place itself in the parent's layout, so it's not the
+// Rule-4 `align-self`/`justify-self` smell), and is opt-in only. `max-width: 100%`
+// keeps a long name from overflowing a narrow column.
+.shrink {
+  width: fit-content;
+  max-width: 100%;
+}
+
+// The inner column that holds Name + Descriptions stacked vertically.
+.column {
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.name {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+// Name + OnBehalfOf on one line; rendered only when an OnBehalfOf is present.
+// OnBehalfOf is `display: contents`, so the row's items are Name, the prefix
+// and the member. The member shrinks first (100:1) down to a few characters,
+// the prefix never shrinks, then the Name gives way — in every locale. (A
+// nested flex wrapper can't do this: its min-content floor is the member's
+// whole nowrap text, so it refused to shrink and the Name collapsed — seen in
+// Chromium.) Text truncates in BLOCK containers: a flex container does not
+// paint `text-overflow` (see `.description`). Inline axis only, `clip
+// visible`, for the same focus-ring reason as `.description`; reserving ring
+// room on the block axis would need padding + a compensating negative
+// `margin`, which stylelint's property-disallowed-list bans in component
+// modules. A Name `href` is its own clip box, so its ring is outside the clip;
+// a Link in the member box is flush with both clip edges, so that box pads
+// both inline ends by the ring's extent (see `.onBehalfOfMember`).
+// No row `gap`: it would ADD to the member's start padding, leaving 8px after
+// "for" and 4px before it. The prefix pads the gap before itself, and the
+// member's start padding is the gap after it (never less than the ring room).
+.agentRow {
+  display: flex;
+  align-items: baseline;
+  min-width: 0;
+}
+
+.agentRow > .name {
+  display: block;
+  flex-shrink: 1;
+  min-width: 0;
+  overflow: clip visible;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.onBehalfOf {
+  display: contents;
+}
+
+.onBehalfOfPrefix {
+  flex-shrink: 0;
+  padding-inline-start: var(--person-display-agent-row-gap);
+  white-space: nowrap;
+}
+
+// The floor sits on the element holding the text, so `ch` is the member
+// text's own; the ring padding (both ends) is added on top so border-box
+// can't eat it. A Link here is flush with both clip edges: measured in
+// Chromium, end-only padding clipped its whole 4px start band. With both ends
+// padded an untruncated Link keeps its full ring. A TRUNCATED Link still loses
+// its end band — the Link itself runs past the clip, so no padding can reach
+// its far edge; the start, top and bottom bands stay whole.
+.onBehalfOfMember {
+  display: block;
+  flex-shrink: 100;
+  min-width: calc(
+    var(--person-display-on-behalf-of-member-min-width) + var(--person-display-member-padding-x)
+  );
+  padding-inline-start: var(--person-display-member-padding-start);
+  padding-inline-end: var(--person-display-ring-room);
+  overflow: clip visible;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.description {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--person-display-description-gap);
+  min-width: 0;
+
+  // Each Description is a single metadata line by design — use additional
+  // Descriptions for additional lines. `nowrap` keeps atomic inline children
+  // (e.g., a Badge inside the audit "impersonating Sarah Lin" marker) on the
+  // same row as their surrounding text, even when the cell is narrow.
+  // A line that declares its own `nowrap` must also contain itself: nothing
+  // outside can make it wrap, so a container that does not clip — a DataTable
+  // stacked card — wears the overflow instead (#527). The root's `max-width`
+  // bounds the box; this clips what is too long for it. Both are required:
+  // measured in Chromium, either one alone still overflows the card by ~204px.
+  // No `text-overflow: ellipsis`: this is a flex container, where the UA does
+  // not paint one (verified against a screenshot — identical with `clip`). The
+  // wide table already hard-clipped this line for the same reason, so nothing
+  // regresses; an ellipsis would need the text in a block container.
+  // ONE AXIS, and `clip` rather than `hidden`. #527 is a HORIZONTAL escape — a
+  // long unbroken email — so clipping the block axis too bought nothing and
+  // cost something: `description` takes arbitrary ReactNode, and every
+  // clipping ancestor shaves a descendant's focus ring (#524's failure mode,
+  // and the reason the DataTable stacked card deliberately does not clip).
+  // `clip visible` is legal (x then y) and the block axis really does stay
+  // visible: the rule that turns `visible` into `auto` applies opposite
+  // `scroll`/`auto`/`hidden`, not opposite `clip` — verified in Chromium 151,
+  // where the shorthand written the other way round silently clips the wrong
+  // axis. `clip` over `hidden` on the inline axis so this line never
+  // becomes a scroll container for a string nobody can scroll.
+  // WHAT THIS DOES NOT FIX, stated rather than left for the next reader to
+  // measure: a control flush with the line's left or right edge still loses
+  // those two ring bands, and the two `/components/person-display` entries in
+  // `tests/focus-ring-geometry.baseline.json` are exactly that, kept measured
+  // rather than hidden. Neither remedy survived measurement.
+  // `overflow-clip-margin` would be the right tool — it widens the CLIP RECT
+  // without contributing to the scrollable overflow #527 measured — but
+  // Chromium 151 computes EVERY `calc()` form of it to `0px` (`calc(2px + 2px)`
+  // included), so it cannot be expressed in `--ring-width` + `--ring-offset`,
+  // and a raw length here breaks the tokens rule. Insetting the ring from
+  // outside (`.description :focus-visible { outline-offset: … }`) ties Link's
+  // own `.link:focus-visible` at (0,2,0) and wins only on bundle order — a
+  // specificity race over a consumer's own focus style.
+  // So: put a control in `PersonDisplay.Name`, which does not clip — except in
+  // the agent row (with an OnBehalfOf), where Name clips its inline axis too;
+  // there use `Name href` (its own ring is outside its own clip) or a Link in
+  // `OnBehalfOf` (its member box reserves ring room at the inline end).
+  overflow: clip visible;
+  white-space: nowrap;
+}

package/src/components/PersonDisplay/PersonDisplay.tokens.scss

@@ -0,0 +1,35 @@
+// PersonDisplay.tokens.scss — Component-scoped tokens for <PersonDisplay>.
+// Size context (sm/md/lg) is driven by a [data-size] attribute selector on
+// the root in PersonDisplay.module.scss; that mechanism stays. Tokenizes the
+// outer gap per size and the inner Description-line gap.
+:root {
+  // Outer row gap — sm tightens, md and lg share the same gap.
+  --person-display-gap: var(--space-3);
+  --person-display-gap-sm: var(--space-2);
+
+  // Inner description (single metadata line) gap between atoms.
+  --person-display-description-gap: var(--space-1);
+
+  // Agent row (Name, OnBehalfOf prefix, member) gap; and the member's floor
+  // (in the member text's own `ch`) it shrinks to, after the full prefix,
+  // before the Name ellipsises.
+  --person-display-agent-row-gap: var(--space-1);
+  --person-display-on-behalf-of-member-min-width: 6ch;
+
+  // A focus ring's full extent past its element's border box: the member box
+  // pads each inline end by it so a Link inside keeps its ring.
+  --person-display-ring-room: calc(var(--ring-width) + var(--ring-offset));
+
+  // The member's start padding is also the gap after the prefix: the row gap,
+  // or the ring room a Link inside needs, whichever is larger — so "for" sits
+  // evenly between the Name and the member.
+  --person-display-member-padding-start: max(
+    var(--person-display-agent-row-gap),
+    var(--person-display-ring-room)
+  );
+
+  // Both inline paddings together, which the member's floor adds on top of its ch.
+  --person-display-member-padding-x: calc(
+    var(--person-display-member-padding-start) + var(--person-display-ring-room)
+  );
+}