rift-ds 1.0.0

package/components/Timeline/Timeline.css

@@ -0,0 +1,366 @@
+/* ============================================
+   TIMELINE COMPONENT
+   Ordered steps/events with connected markers.
+   Vertical timeline or horizontal stepper.
+   ============================================ */
+
+.ds-timeline {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+.ds-timeline__item {
+  position: relative;
+  display: flex;
+}
+
+/* ============================================
+   MARKERS
+   Dot by default; badge (circle) when numbered;
+   bare floating icon when carrying an icon.
+   ============================================ */
+
+.ds-timeline__marker {
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  border-radius: var(--radius-pill);
+  background-color: var(--color-bg-container-tertiary);
+}
+
+.ds-timeline__marker--badge {
+  width: 28px;
+  height: 28px;
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  color: var(--color-text-secondary);
+}
+
+/* Icon markers float bare — same 28px box as the badge
+   so connector geometry is shared, but no circle */
+.ds-timeline__marker--icon {
+  width: 28px;
+  height: 28px;
+  background-color: transparent;
+}
+
+.ds-timeline__marker-icon {
+  --icon-size: var(--icon-size-600);
+  line-height: 1;
+  color: var(--color-icon-primary);
+}
+
+/* ============================================
+   CONTENT
+   ============================================ */
+
+.ds-timeline__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-050);
+  min-width: 0;
+}
+
+.ds-timeline__meta {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-tertiary);
+}
+
+.ds-timeline__title {
+  font-family: var(--font-heading-3-family);
+  font-size: var(--font-heading-3-size);
+  font-weight: var(--font-heading-3-weight);
+  line-height: var(--font-heading-3-line-height);
+  letter-spacing: var(--font-heading-3-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-timeline__description {
+  margin-top: var(--gap-200);
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  letter-spacing: var(--font-paragraph-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+/* ============================================
+   VERTICAL (default) — markers on the left,
+   connector line running down between them
+   ============================================ */
+
+.ds-timeline--vertical {
+  flex-direction: column;
+  gap: var(--gap-500);
+}
+
+.ds-timeline--vertical .ds-timeline__item {
+  gap: var(--gap-400);
+  align-items: flex-start;
+}
+
+/* Align dot markers with the title's line box */
+.ds-timeline--vertical .ds-timeline__marker {
+  margin-top: 6px;
+}
+
+.ds-timeline--vertical .ds-timeline__marker--badge,
+.ds-timeline--vertical .ds-timeline__marker--icon {
+  margin-top: 0;
+}
+
+/* Connector line — from this marker down to the next item */
+.ds-timeline--vertical .ds-timeline__item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: calc(-1 * var(--gap-500));
+  left: 5px; /* centre of the 12px dot */
+  width: var(--border-050);
+  background-color: var(--color-divider);
+}
+
+.ds-timeline--vertical.ds-timeline--numbered .ds-timeline__item::before,
+.ds-timeline--vertical .ds-timeline__item:has(.ds-timeline__marker--badge)::before,
+.ds-timeline--vertical .ds-timeline__item:has(.ds-timeline__marker--icon)::before {
+  left: 13px; /* centre of the 28px badge/icon box */
+}
+
+/* Bare icons have no opaque fill to cover the line —
+   start it just below the icon box instead */
+.ds-timeline--vertical .ds-timeline__item:has(.ds-timeline__marker--icon)::before {
+  top: 32px;
+}
+
+.ds-timeline--vertical .ds-timeline__item:last-child::before {
+  display: none;
+}
+
+/* ============================================
+   HORIZONTAL — stepper: markers on top,
+   connector line running across
+   ============================================ */
+
+.ds-timeline--horizontal {
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.ds-timeline--horizontal .ds-timeline__item {
+  flex: 1;
+  flex-direction: column;
+  gap: var(--gap-200);
+  min-width: 0;
+  padding-right: var(--padding-400);
+}
+
+/* Connector line — from this marker across to the next */
+.ds-timeline--horizontal .ds-timeline__item::before {
+  content: '';
+  position: absolute;
+  top: 5px; /* centre of the 12px dot */
+  left: 0;
+  right: 0;
+  height: var(--border-050);
+  background-color: var(--color-divider);
+}
+
+.ds-timeline--horizontal.ds-timeline--numbered .ds-timeline__item::before,
+.ds-timeline--horizontal .ds-timeline__item:has(.ds-timeline__marker--badge)::before,
+.ds-timeline--horizontal .ds-timeline__item:has(.ds-timeline__marker--icon)::before {
+  top: 13px; /* centre of the 28px badge/icon box */
+}
+
+/* Bare icons have no opaque fill to cover the line —
+   start it just after the icon box instead */
+.ds-timeline--horizontal .ds-timeline__item:has(.ds-timeline__marker--icon)::before {
+  left: 32px;
+}
+
+.ds-timeline--horizontal .ds-timeline__item:last-child::before {
+  display: none;
+}
+
+/* ============================================
+   COMPANY VARIANT — a logo marker per entry,
+   a company/tool name, and one or more nested
+   roles. A segmented bar runs down each entry
+   (résumé / pipeline histories).
+   ============================================ */
+
+/* 32px logo marker — bare, transparent box; the image keeps its own shape.
+   Reset the base marker's circular clip so logos are never cropped. */
+.ds-timeline__marker--logo {
+  width: 32px;
+  height: 32px;
+  background-color: transparent;
+  border-radius: 0;
+  overflow: visible;
+}
+
+/* Logos display in their natural aspect ratio, capped at the 32px box */
+.ds-timeline__marker--logo :where(img, svg) {
+  max-width: 32px;
+  max-height: 32px;
+  object-fit: contain;
+}
+
+/* Logo sits at the top of the entry, aligned with the company name */
+.ds-timeline--company .ds-timeline__marker--logo {
+  margin-top: 0;
+}
+
+.ds-timeline--company .ds-timeline__content {
+  gap: var(--gap-200);
+}
+
+.ds-timeline__company-name {
+  font-family: var(--font-title-body-family);
+  font-size: var(--font-title-body-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-title-body-line-height);
+  color: var(--color-text-primary);
+  /* centre the name against the 32px logo */
+  display: flex;
+  align-items: center;
+  min-height: 32px;
+}
+
+.ds-timeline__roles {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-500);
+}
+
+.ds-timeline__role {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200);
+}
+
+.ds-timeline__role-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-400);
+}
+
+.ds-timeline__role-title {
+  margin: 0;
+  flex: 1;
+  min-width: 0;
+  font-family: var(--font-heading-3-family);
+  font-size: var(--font-heading-3-size);
+  font-weight: var(--font-heading-3-weight);
+  line-height: var(--font-heading-3-line-height);
+  letter-spacing: var(--font-heading-3-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+.ds-timeline__role-dates {
+  flex-shrink: 0;
+  white-space: nowrap;
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  color: var(--color-text-tertiary);
+}
+
+.ds-timeline__present {
+  color: var(--color-status-positive-text);
+}
+
+.ds-timeline__role-subtitle {
+  margin: 0;
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  letter-spacing: var(--font-paragraph-letter-spacing);
+  color: var(--color-text-secondary);
+}
+
+/* The title and its subtitle read as one header block, so whatever follows
+   needs a wider break than the role's own 8px rhythm to separate from it. */
+.ds-timeline__role-subtitle + .ds-timeline__role-description,
+.ds-timeline__role-subtitle + .ds-timeline__role-bullets {
+  margin-top: var(--gap-200);
+}
+
+.ds-timeline__role-description {
+  margin: 0;
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  letter-spacing: var(--font-paragraph-letter-spacing);
+  color: var(--color-text-secondary);
+}
+
+.ds-timeline__role-bullets {
+  margin: 0;
+  padding-left: 20px;
+  list-style: disc;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200);
+}
+
+.ds-timeline__role-bullets li {
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  color: var(--color-text-secondary);
+}
+
+.ds-timeline__role-bullets a {
+  color: var(--color-action-primary-bg);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  transition: text-decoration-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-timeline__role-bullets a:hover {
+  text-decoration-color: currentColor;
+}
+
+/* Connector — centred under the 32px logo, with an even 8px break above and
+   below every logo: it starts 8px below this logo and runs down to 8px above
+   the next one (extending into the inter-entry gap). */
+.ds-timeline--company .ds-timeline__item::before {
+  left: 16px; /* centre of the 32px logo */
+  top: 40px; /* 32px logo + 8px break */
+  bottom: calc(8px - var(--gap-500)); /* stop 8px above the next logo */
+}
+
+/* Last entry has no following logo — the bar runs to its own content's end
+   and fades out: the hairline treatment (1px, dissolving to the transparent
+   container colour) that marks the end of the timeline. */
+.ds-timeline--company .ds-timeline__item:last-child::before {
+  display: block;
+  bottom: 0;
+  width: var(--border-025);
+  background: linear-gradient(
+    to bottom,
+    var(--color-divider),
+    var(--color-bg-container-primary-transparent)
+  );
+}

package/components/Timeline/Timeline.d.ts

@@ -0,0 +1,67 @@
+import { default as React } from 'react';
+export interface TimelineItem {
+    /** Step or event title */
+    title: string;
+    /** Small line above the title, e.g. a date range or stage tag */
+    meta?: string;
+    /** Body content under the title */
+    description?: React.ReactNode;
+    /** Icon shown in the marker (overrides dot/number) — Material Symbol name (string) or custom element (ReactNode) */
+    icon?: string | React.ReactNode;
+}
+/** A single role/position within a company entry (`company` variant). */
+export interface TimelineRole {
+    /** Role or position title */
+    title: string;
+    /** Secondary line under the title, e.g. the team, org, or product the role sat in */
+    subtitle?: React.ReactNode;
+    /** Start of the date range, e.g. "May 2024" (omit for entries with no dates) */
+    start?: string;
+    /** End of the date range, e.g. "Jan 2026" (ignored when `present` is set) */
+    end?: string;
+    /** Renders a green "Present" in place of `end` for current roles */
+    present?: boolean;
+    /** Optional summary paragraph under the role header */
+    description?: React.ReactNode;
+    /** Optional bullet points; each entry is rendered as an `<li>` */
+    bullets?: React.ReactNode[];
+}
+/** A company/tool entry grouping one or more roles under a logo (`company` variant). */
+export interface TimelineCompany {
+    /** Company or tool name shown beside the logo */
+    name: string;
+    /** Image node used as the marker (e.g. an `<img>` / framework image element) */
+    logo?: React.ReactNode;
+    /** One or more roles nested under this entry */
+    roles: TimelineRole[];
+}
+/** Default variant — a flat sequence of steps/events with dot, badge, or icon markers. */
+export interface TimelineDefaultProps {
+    /** Selects the flat step/event layout — the default when omitted */
+    variant?: 'default';
+    /** Ordered list of steps/events */
+    items: TimelineItem[];
+    /** `vertical` timeline (default) or `horizontal` stepper */
+    orientation?: 'vertical' | 'horizontal';
+    /** Number the markers 1..n instead of dots */
+    numbered?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/** Company variant — grouped roles under a logo, for résumé/pipeline histories. */
+export interface TimelineCompanyProps {
+    /** Selects the grouped layout: roles nested under a company logo */
+    variant: 'company';
+    /** Ordered list of company/tool entries */
+    items: TimelineCompany[];
+    /** Additional CSS classes */
+    className?: string;
+}
+export type TimelineProps = TimelineDefaultProps | TimelineCompanyProps;
+/**
+ * Timeline component — an ordered sequence of steps or events with
+ * connected markers. Vertical for histories and process narratives,
+ * horizontal for compact steppers. The `company` variant groups one or
+ * more roles under a logo marker for résumé/pipeline histories.
+ */
+export declare const Timeline: (props: TimelineProps) => React.JSX.Element;

package/components/Timeline/Timeline.js

@@ -0,0 +1,73 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import "./Timeline.css";
+import "../../fonts/material-symbols.css";
+const BASE_CLASS = "ds-timeline";
+const renderRoleDates = (role) => {
+  if (!role.start) return null;
+  return /* @__PURE__ */ jsxs("span", { className: `${BASE_CLASS}__role-dates`, children: [
+    role.start,
+    " –",
+    " ",
+    role.present ? /* @__PURE__ */ jsx("span", { className: `${BASE_CLASS}__present`, children: "Present" }) : role.end
+  ] });
+};
+const CompanyTimeline = ({ items, className = "" }) => {
+  const classes = [BASE_CLASS, `${BASE_CLASS}--vertical`, `${BASE_CLASS}--company`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("ol", { className: classes, children: items.map((company, index) => /* @__PURE__ */ jsxs("li", { className: `${BASE_CLASS}__item`, children: [
+    /* @__PURE__ */ jsx("span", { className: `${BASE_CLASS}__marker ${BASE_CLASS}__marker--logo`, "aria-hidden": "true", children: company.logo }),
+    /* @__PURE__ */ jsxs("div", { className: `${BASE_CLASS}__content`, children: [
+      /* @__PURE__ */ jsx("span", { className: `${BASE_CLASS}__company-name`, children: company.name }),
+      /* @__PURE__ */ jsx("div", { className: `${BASE_CLASS}__roles`, children: company.roles.map((role, roleIndex) => /* @__PURE__ */ jsxs("div", { className: `${BASE_CLASS}__role`, children: [
+        /* @__PURE__ */ jsxs("div", { className: `${BASE_CLASS}__role-header`, children: [
+          /* @__PURE__ */ jsx("h3", { className: `${BASE_CLASS}__role-title`, children: role.title }),
+          renderRoleDates(role)
+        ] }),
+        role.subtitle && /* @__PURE__ */ jsx("p", { className: `${BASE_CLASS}__role-subtitle`, children: role.subtitle }),
+        role.description && /* @__PURE__ */ jsx("p", { className: `${BASE_CLASS}__role-description`, children: role.description }),
+        role.bullets && role.bullets.length > 0 && /* @__PURE__ */ jsx("ul", { className: `${BASE_CLASS}__role-bullets`, children: role.bullets.map((bullet, bulletIndex) => /* @__PURE__ */ jsx("li", { children: bullet }, bulletIndex)) })
+      ] }, `${role.title}-${roleIndex}`)) })
+    ] })
+  ] }, `${company.name}-${index}`)) });
+};
+const Timeline = (props) => {
+  if (props.variant === "company") {
+    return /* @__PURE__ */ jsx(CompanyTimeline, { ...props });
+  }
+  const { items, orientation = "vertical", numbered = false, className = "" } = props;
+  const classes = [
+    BASE_CLASS,
+    `${BASE_CLASS}--${orientation}`,
+    numbered && `${BASE_CLASS}--numbered`,
+    className
+  ].filter(Boolean).join(" ");
+  const renderMarker = (item, index) => {
+    if (item.icon) {
+      if (typeof item.icon === "string") {
+        return /* @__PURE__ */ jsx("span", { className: `material-symbols-rounded ${BASE_CLASS}__marker-icon`, "aria-hidden": "true", children: item.icon });
+      }
+      return /* @__PURE__ */ jsx("span", { className: `${BASE_CLASS}__marker-icon`, "aria-hidden": "true", children: item.icon });
+    }
+    if (numbered) {
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: index + 1 });
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsx("ol", { className: classes, children: items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: `${BASE_CLASS}__item`, children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `${BASE_CLASS}__marker${item.icon ? ` ${BASE_CLASS}__marker--icon` : numbered ? ` ${BASE_CLASS}__marker--badge` : ""}`,
+        children: renderMarker(item, index)
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: `${BASE_CLASS}__content`, children: [
+      item.meta && /* @__PURE__ */ jsx("span", { className: `${BASE_CLASS}__meta`, children: item.meta }),
+      /* @__PURE__ */ jsx("span", { className: `${BASE_CLASS}__title`, children: item.title }),
+      item.description && /* @__PURE__ */ jsx("div", { className: `${BASE_CLASS}__description`, children: item.description })
+    ] })
+  ] }, `${item.title}-${index}`)) });
+};
+export {
+  Timeline
+};