@activecollab/components/dist/esm/components/StepSequence/SpineStep.js

ActiveCollab Components

import React from "react";
import { CheckIcon, CircleSlashIcon, ClockIcon, CloseIcon, EyeIcon, GitBranchIcon, GitCommitIcon, GitMergeIcon, GitPullRequestIcon, LockIcon, WarningIcon, WarningTriangleIcon } from "../Icons";

/** The fifteen states a source-code spine node can be in */

/* Glyph colours: light on a filled step, the step's own tone on an outlined
   one — the component paints rings and lines, the caller paints glyphs. */
const ON_SOLID = "var(--only-white)";
const AMBER = "var(--color-orange)";

/* Glyphs render at an even 12px: a 13px glyph in the 22px solid circle (or
   the 18px content box of an outlined one) leaves half-pixel margins, so the
   browser snaps it visibly off-centre — 12px keeps every margin a whole pixel
   and renders the 2-unit strokes of the 24-grid icons at exactly 1px. */
const GLYPH = 12;

/**
 * The fifteen spine states as generic `StepSequence` steps — the single
 * source both the Spine State Explorer story and the app's source-code
 * spine render from.
 *
 * A connector takes the tone of the step it points into, so `connectorTone`
 * is only spelled out for a stage that has not been reached yet (queued /
 * manual / locked) — there the line stays the faint neutral grey.
 */
export const SPINE_STEP = {
  done: {
    tone: "success",
    fill: "solid",
    icon: /*#__PURE__*/React.createElement(CheckIcon, {
      fill: ON_SOLID,
      width: GLYPH,
      height: GLYPH
    })
  },
  merged: {
    tone: "success",
    fill: "solid",
    icon: /*#__PURE__*/React.createElement(GitMergeIcon, {
      stroke: ON_SOLID,
      width: GLYPH,
      height: GLYPH
    })
  },
  committed: {
    tone: "success",
    fill: "solid",
    icon: /*#__PURE__*/React.createElement(GitCommitIcon, {
      stroke: ON_SOLID,
      width: GLYPH,
      height: GLYPH
    })
  },
  progress: {
    tone: "info",
    fill: "solid",
    pulse: true
  },
  review: {
    tone: "info",
    fill: "solid",
    icon: /*#__PURE__*/React.createElement(EyeIcon, {
      fill: ON_SOLID,
      width: GLYPH,
      height: GLYPH
    })
  },
  active: {
    tone: "info",
    fill: "solid",
    icon: /*#__PURE__*/React.createElement(GitBranchIcon, {
      stroke: ON_SOLID,
      width: GLYPH,
      height: GLYPH
    })
  },
  queued: {
    tone: "info",
    fill: "outline",
    icon: /*#__PURE__*/React.createElement(ClockIcon, {
      fill: "var(--color-progress-blue)",
      width: GLYPH,
      height: GLYPH
    }),
    connectorTone: "neutral"
  },
  failed: {
    tone: "danger",
    fill: "solid",
    icon: /*#__PURE__*/React.createElement(CloseIcon, {
      fill: ON_SOLID,
      width: GLYPH,
      height: GLYPH
    })
  },
  warning: {
    tone: "warning",
    fill: "solid",
    icon: /*#__PURE__*/React.createElement(WarningIcon, {
      fill: ON_SOLID,
      width: GLYPH,
      height: GLYPH
    })
  },
  conflict: {
    tone: "danger",
    fill: "solid",
    icon: /*#__PURE__*/React.createElement(WarningTriangleIcon, {
      fill: ON_SOLID,
      width: GLYPH,
      height: GLYPH
    })
  },
  skipped: {
    tone: "neutral",
    fill: "solid",
    icon: /*#__PURE__*/React.createElement(CircleSlashIcon, {
      fill: ON_SOLID,
      width: GLYPH,
      height: GLYPH
    })
  },
  manual: {
    tone: "warning",
    fill: "outline",
    icon: /*#__PURE__*/React.createElement(ClockIcon, {
      fill: AMBER,
      width: GLYPH,
      height: GLYPH
    }),
    connectorTone: "neutral"
  },
  locked: {
    tone: "warning",
    fill: "outline",
    icon: /*#__PURE__*/React.createElement(LockIcon, {
      fill: AMBER,
      width: GLYPH,
      height: GLYPH
    }),
    connectorTone: "neutral"
  },
  draft: {
    tone: "neutral",
    fill: "dashed",
    icon: /*#__PURE__*/React.createElement(GitPullRequestIcon, {
      stroke: "var(--color-theme-600)",
      width: GLYPH,
      height: GLYPH
    })
  },
  todo: {
    tone: "neutral",
    fill: "outline"
  }
};
//# sourceMappingURL=SpineStep.js.map