@eocrm/design-system 0.0.0-stage → 0.6.18

package/src/components/SlotGrid/SlotGrid.tokens.scss

@@ -0,0 +1,21 @@
+// SlotGrid.tokens.scss — component tokens. Tile colors default to Button's.
+@use '../Button/Button.tokens';
+
+:root {
+  --slot-grid-group-gap: var(--space-5);
+  --slot-grid-legend-gap: var(--space-2);
+  --slot-grid-gap: var(--space-2);
+  --slot-grid-tile-height: var(--button-height-md);
+  --slot-grid-tile-font-size: var(--button-font-size-md);
+  --slot-grid-tile-font-weight: var(--button-font-weight);
+  --slot-grid-tile-radius: var(--button-radius);
+  --slot-grid-tile-bg: var(--button-bg-secondary);
+  --slot-grid-tile-bg-hover: var(--button-bg-secondary-hover);
+  --slot-grid-tile-fg: var(--button-fg-secondary);
+  --slot-grid-tile-border: var(--button-border-color-secondary);
+  --slot-grid-tile-bg-checked: var(--button-bg);
+  --slot-grid-tile-bg-checked-hover: var(--button-bg-hover);
+  --slot-grid-tile-fg-checked: var(--button-fg);
+  --slot-grid-tile-ring: var(--button-ring);
+  --slot-grid-tile-opacity-disabled: var(--button-opacity-disabled);
+}

package/src/components/SlotGrid/SlotGrid.tsx

@@ -0,0 +1,111 @@
+import { forwardRef, useId, type HTMLAttributes, type ReactNode } from 'react';
+import clsx from 'clsx';
+import { Text } from '../Text';
+import { Title, type TitleOrder } from '../Title';
+import { useTranslation } from '../../i18n/useTranslation';
+import styles from './SlotGrid.module.scss';
+
+/** One selectable time. */
+export interface SlotGridSlot {
+  /** Stable id passed to `onChange` and matched against `value`. */
+  key: string;
+  /** Visible text and accessible name, already formatted in the business's timezone (e.g. "9:30"). */
+  label: string;
+}
+
+/** A part of the day ("Morning", "Afternoon") and its slots. */
+export interface SlotGridGroup {
+  /** Visible heading; also names the group for assistive tech. */
+  label: string;
+  /** Slots in display order. A group with none is not rendered. */
+  slots: SlotGridSlot[];
+}
+
+export interface SlotGridProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /** Groups in display order. */
+  groups: SlotGridGroup[];
+  /** Selected slot `key`, or `null`. A key not in `groups` checks nothing. */
+  value: string | null;
+  /** Called with the chosen slot's `key`. Controlled — update `value` yourself. */
+  onChange: (key: string) => void;
+  /** Shown when no group has any slot. Default: the localized "No available times". */
+  empty?: ReactNode;
+  /** Heading level of each group label. Default `3`. */
+  titleOrder?: TitleOrder;
+  /** Radio group `name` (also submitted with a form). Default: a generated id. */
+  name?: string;
+  /** Marks the group `aria-invalid` (the radios themselves do not support it). Field / SettingRow inject it. @default false */
+  invalid?: boolean;
+  /**
+   * Native `required` on the radios (the group then fails form validation
+   * until one is chosen). Field / SettingRow inject it; it used to land on the
+   * root as a stray attribute (#568).
+   */
+  required?: boolean;
+}
+
+/**
+ * Selectable time-slot tiles grouped by part of the day, with an empty state.
+ * @see docs/components/SlotGrid.md
+ */
+export const SlotGrid = forwardRef<HTMLDivElement, SlotGridProps>(function SlotGrid(
+  {
+    groups,
+    value,
+    onChange,
+    empty,
+    titleOrder = 3,
+    name,
+    invalid = false,
+    required = false,
+    className,
+    ...props
+  },
+  ref,
+) {
+  const t = useTranslation();
+  const generatedName = useId();
+  const groupName = name ?? generatedName;
+  const visible = groups.filter((g) => g.slots.length > 0);
+
+  return (
+    // role="group" so a wrapping Field / SettingRow's injected aria-labelledby
+    // / aria-describedby / aria-invalid actually apply — on a generic div
+    // they are ignored and the radios lost the row label and error (#568).
+    <div
+      ref={ref}
+      role="group"
+      aria-invalid={invalid || undefined}
+      className={clsx(styles.root, className)}
+      {...props}
+    >
+      {visible.length === 0
+        ? (empty ?? <Text tone="muted">{t('slotGrid.empty')}</Text>)
+        : visible.map((group, i) => (
+            <fieldset key={`${i}-${group.label}`} className={styles.group}>
+              <legend className={styles.legend}>
+                <Title order={titleOrder} size="sm">
+                  {group.label}
+                </Title>
+              </legend>
+              <div className={styles.tiles}>
+                {group.slots.map((slot) => (
+                  <label key={slot.key} className={styles.tile}>
+                    <input
+                      type="radio"
+                      required={required}
+                      className={styles.input}
+                      name={groupName}
+                      value={slot.key}
+                      checked={value === slot.key}
+                      onChange={() => onChange(slot.key)}
+                    />
+                    {slot.label}
+                  </label>
+                ))}
+              </div>
+            </fieldset>
+          ))}
+    </div>
+  );
+});

package/src/components/SlotGrid/index.ts

@@ -0,0 +1,2 @@
+export { SlotGrid } from './SlotGrid';
+export type { SlotGridProps, SlotGridGroup, SlotGridSlot } from './SlotGrid';

package/src/components/SocialButton/SocialButton.module.scss

@@ -0,0 +1,4 @@
+// SocialButton has no styles of its own — it composes <Button> (the chrome) and
+// <BrandIcon> (the provider mark), each of which brings its own styling. This
+// file exists only to satisfy the four-file component-structure convention; it
+// is intentionally not imported.

package/src/components/SocialButton/SocialButton.tsx

@@ -0,0 +1,40 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from '../Button';
+import { BrandIcon, type BrandName } from '../BrandIcon';
+
+const ICON_SIZE: Record<ButtonSize, number> = { xs: 14, sm: 16, md: 18, lg: 20 };
+
+export interface SocialButtonProps extends Omit<
+  ButtonProps,
+  'children' | 'iconOnly' | 'selected' | 'color'
+> {
+  /**
+   * Which provider's brand mark to show. Tied to `<BrandIcon>`'s set, so it
+   * grows as BrandIcon does (today: `'google'` / `'yandex'`).
+   */
+  provider: BrandName;
+  /** The button text — e.g. `"Continue with Google"`. Required (consumer-supplied). */
+  label: ReactNode;
+  /**
+   * Button variant; the values are Button's. Defaults to `secondary`, not
+   * Button's `primary`.
+   * @default 'secondary'
+   */
+  variant?: ButtonVariant;
+}
+
+/**
+ * A provider sign-in button: a `<Button>` with the provider brand mark and a label.
+ * @see docs/components/SocialButton.md
+ */
+export const SocialButton = forwardRef<HTMLButtonElement, SocialButtonProps>(function SocialButton(
+  { provider, label, variant = 'secondary', size = 'md', ...props },
+  ref,
+) {
+  return (
+    <Button ref={ref} variant={variant} size={size} {...props}>
+      <BrandIcon name={provider} size={ICON_SIZE[size]} />
+      {label}
+    </Button>
+  );
+});

package/src/components/SocialButton/index.ts

@@ -0,0 +1,2 @@
+export { SocialButton } from './SocialButton';
+export type { SocialButtonProps } from './SocialButton';

package/src/components/Sortable/Sortable.module.scss

@@ -0,0 +1,177 @@
+@use '../../styles/mixins' as *;
+@use './Sortable.tokens';
+@use '../_internal/collapse' as bp;
+
+.list {
+  // UA reset — <ol> ships with default browser margin and padding.
+  // stylelint-disable-next-line property-disallowed-list -- UA reset for <ol> default margin
+  margin: 0;
+  // stylelint-disable-next-line property-disallowed-list -- UA reset for <ol> default padding (bullet gutter)
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sortable-list-gap);
+}
+
+// Grid arrangement (arrangement="grid"). The <ol> owns the track template;
+// the column count is injected inline as --sortable-columns (default 12).
+// `align-items: stretch` (the grid default, stated for intent) makes every
+// item in a row match its tallest sibling — equal-height cells, consistent
+// with <Grid>. Per-cell spans ride on `.item`'s grid-column below.
+.grid {
+  // stylelint-disable-next-line property-disallowed-list -- UA reset for <ol> default margin
+  margin: 0;
+  // stylelint-disable-next-line property-disallowed-list -- UA reset for <ol> default padding (bullet gutter)
+  padding: 0;
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(var(--sortable-columns, 12), minmax(0, 1fr));
+  gap: var(--sortable-grid-gap);
+  align-items: stretch;
+}
+
+.item {
+  position: relative;
+
+  // Per-cell column span for the grid arrangement — resolved in Sortable.tsx
+  // and injected inline as --sortable-item-span (span N / 1 / -1 / auto).
+  // Inert on a flex child (list mode), active when the parent <ol> is .grid.
+  // stylelint-disable-next-line property-disallowed-list -- Sortable's sanctioned grid-arrangement placement, mirrors Grid.Item (see Sortable.tsx)
+  grid-column: var(--sortable-item-span, auto);
+
+  // Required for no-Handle whole-item drag on mobile. dnd-kit's PointerSensor
+  // can't initiate drag if the browser claims the touch gesture for scroll.
+  // Harmless on Items with a Handle (the Item itself isn't the activator).
+  touch-action: none;
+}
+
+.item[data-dragging='true'] {
+  // The in-list dragged item is an invisible placeholder (opacity 0, set inline)
+  // — the lifted visual lives on .overlayItem in the DragOverlay (#165).
+  cursor: grabbing;
+}
+
+.overlayItem {
+  box-shadow: var(--sortable-item-shadow-dragging);
+  cursor: grabbing;
+}
+
+.handle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--sortable-handle-bg);
+  border: var(--border-width) solid transparent;
+  border-radius: var(--sortable-handle-radius);
+  color: var(--sortable-handle-fg);
+  cursor: grab;
+  padding: var(--sortable-handle-padding);
+  touch-action: none;
+
+  &:hover {
+    color: var(--sortable-handle-fg-hover);
+    background: var(--sortable-handle-bg-hover);
+  }
+
+  &:focus-visible {
+    border-color: var(--sortable-handle-border-color-focus);
+
+    @include focus-ring(var(--sortable-handle-ring-focus));
+  }
+}
+
+.item[data-dragging='true'] .handle {
+  cursor: grabbing;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .item {
+    // dnd-kit applies an inline `transition` for smooth slide animations;
+    // we override it under reduced motion. !important is the canonical way
+    // to override inline styles with the same property at higher specificity.
+    transition: none !important; // stylelint-disable-line declaration-no-important -- override dnd-kit's inline transition
+  }
+}
+
+// --- collapseBelow (grid arrangement) ----------------------------------
+// Mirrors Grid's collapseBelow: only STRING-form lists become size containers
+// themselves (their rules query `> *`, a descendant), so existing lists get
+// zero containment changes.
+.collapsible {
+  container-type: inline-size;
+}
+
+// Map form: the step rules re-template the <ol> itself, and a container query
+// never matches its own container — so Sortable.tsx wraps the <ol> in this
+// zero-styling container. Mirrors Grid's `.stepContainer`.
+// `display: grid` so the wrapper stays geometrically transparent — its single
+// child stretches in both axes, keeping the <ol>'s height in a stretch context
+// (a block wrapper would take the stretch itself). Mirrors Grid.
+.stepContainer {
+  display: grid;
+  container-type: inline-size;
+}
+
+// Binary (string) collapse — below the threshold every item spans the full
+// row. Double class gives specificity (0,2,0) so the collapse beats any
+// single-class consumer grid-column rule; vs `.item` it wins by source order.
+@container (max-width: #{bp.$collapse-sm}) {
+  .collapsible.collapseSm > * {
+    // stylelint-disable-next-line property-disallowed-list -- collapse override is Sortable's own placement mechanism, mirrors Grid
+    grid-column: 1 / -1;
+  }
+}
+
+@container (max-width: #{bp.$collapse-md}) {
+  .collapsible.collapseMd > * {
+    // stylelint-disable-next-line property-disallowed-list -- collapse override is Sortable's own placement mechanism, mirrors Grid
+    grid-column: 1 / -1;
+  }
+}
+
+@container (max-width: #{bp.$collapse-lg}) {
+  .collapsible.collapseLg > * {
+    // stylelint-disable-next-line property-disallowed-list -- collapse override is Sortable's own placement mechanism, mirrors Grid
+    grid-column: 1 / -1;
+  }
+}
+
+// Graduated (map) collapse — step templates + per-item clamped spans are
+// computed in Sortable.tsx and injected inline (--sortable-columns-<bp>,
+// --sortable-item-span-<bp>). Declared lg → md → sm so the smallest matching
+// breakpoint wins by source order (equal specificity). Queried against
+// `.stepContainer`, the wrapper above; `.grid.stepXx` keeps the same (0,2,0)
+// specificity the old `.collapsible.stepXx` pair had.
+@container (max-width: #{bp.$collapse-lg}) {
+  .grid.stepLg {
+    grid-template-columns: var(--sortable-columns-lg, none);
+
+    > .item {
+      // stylelint-disable-next-line property-disallowed-list -- graduated collapse override is Sortable's own placement mechanism, mirrors Grid
+      grid-column: var(--sortable-item-span-lg, auto);
+    }
+  }
+}
+
+@container (max-width: #{bp.$collapse-md}) {
+  .grid.stepMd {
+    grid-template-columns: var(--sortable-columns-md, none);
+
+    > .item {
+      // stylelint-disable-next-line property-disallowed-list -- graduated collapse override is Sortable's own placement mechanism, mirrors Grid
+      grid-column: var(--sortable-item-span-md, auto);
+    }
+  }
+}
+
+@container (max-width: #{bp.$collapse-sm}) {
+  .grid.stepSm {
+    grid-template-columns: var(--sortable-columns-sm, none);
+
+    > .item {
+      // stylelint-disable-next-line property-disallowed-list -- graduated collapse override is Sortable's own placement mechanism, mirrors Grid
+      grid-column: var(--sortable-item-span-sm, auto);
+    }
+  }
+}

package/src/components/Sortable/Sortable.tokens.scss

@@ -0,0 +1,27 @@
+// Sortable.tokens.scss — component-scoped tokens for <Sortable> (list + item + drag handle). Defaults preserve byte-identical visuals.
+:root {
+  // List
+  --sortable-list-gap: var(--space-2);
+
+  // Grid arrangement — gap between grid cells. Defaults to the list gap so the
+  // two arrangements match out of the box; overridable independently (a
+  // dashboard grid often wants a roomier gutter than a dense list).
+  --sortable-grid-gap: var(--sortable-list-gap);
+
+  // Item (dragging state)
+  --sortable-item-shadow-dragging: var(--shadow-lg);
+
+  // Handle
+  --sortable-handle-bg: transparent;
+  --sortable-handle-radius: var(--radius-sm);
+  --sortable-handle-fg: var(--color-fg-subtle);
+  --sortable-handle-padding: var(--space-1);
+
+  // Handle — hover
+  --sortable-handle-fg-hover: var(--color-fg);
+  --sortable-handle-bg-hover: var(--color-bg-subtle);
+
+  // Handle — focus
+  --sortable-handle-border-color-focus: var(--color-accent);
+  --sortable-handle-ring-focus: var(--ring-accent);
+}