@activecollab/components
Version:
ActiveCollab Components
163 lines (159 loc) • 4.24 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SPINE_STEP = void 0;
var _react = _interopRequireDefault(require("react"));
var _Icons = require("../Icons");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** 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. */
var ON_SOLID = "var(--only-white)";
var 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. */
var 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.
*/
var SPINE_STEP = exports.SPINE_STEP = {
done: {
tone: "success",
fill: "solid",
icon: /*#__PURE__*/_react.default.createElement(_Icons.CheckIcon, {
fill: ON_SOLID,
width: GLYPH,
height: GLYPH
})
},
merged: {
tone: "success",
fill: "solid",
icon: /*#__PURE__*/_react.default.createElement(_Icons.GitMergeIcon, {
stroke: ON_SOLID,
width: GLYPH,
height: GLYPH
})
},
committed: {
tone: "success",
fill: "solid",
icon: /*#__PURE__*/_react.default.createElement(_Icons.GitCommitIcon, {
stroke: ON_SOLID,
width: GLYPH,
height: GLYPH
})
},
progress: {
tone: "info",
fill: "solid",
pulse: true
},
review: {
tone: "info",
fill: "solid",
icon: /*#__PURE__*/_react.default.createElement(_Icons.EyeIcon, {
fill: ON_SOLID,
width: GLYPH,
height: GLYPH
})
},
active: {
tone: "info",
fill: "solid",
icon: /*#__PURE__*/_react.default.createElement(_Icons.GitBranchIcon, {
stroke: ON_SOLID,
width: GLYPH,
height: GLYPH
})
},
queued: {
tone: "info",
fill: "outline",
icon: /*#__PURE__*/_react.default.createElement(_Icons.ClockIcon, {
fill: "var(--color-progress-blue)",
width: GLYPH,
height: GLYPH
}),
connectorTone: "neutral"
},
failed: {
tone: "danger",
fill: "solid",
icon: /*#__PURE__*/_react.default.createElement(_Icons.CloseIcon, {
fill: ON_SOLID,
width: GLYPH,
height: GLYPH
})
},
warning: {
tone: "warning",
fill: "solid",
icon: /*#__PURE__*/_react.default.createElement(_Icons.WarningIcon, {
fill: ON_SOLID,
width: GLYPH,
height: GLYPH
})
},
conflict: {
tone: "danger",
fill: "solid",
icon: /*#__PURE__*/_react.default.createElement(_Icons.WarningTriangleIcon, {
fill: ON_SOLID,
width: GLYPH,
height: GLYPH
})
},
skipped: {
tone: "neutral",
fill: "solid",
icon: /*#__PURE__*/_react.default.createElement(_Icons.CircleSlashIcon, {
fill: ON_SOLID,
width: GLYPH,
height: GLYPH
})
},
manual: {
tone: "warning",
fill: "outline",
icon: /*#__PURE__*/_react.default.createElement(_Icons.ClockIcon, {
fill: AMBER,
width: GLYPH,
height: GLYPH
}),
connectorTone: "neutral"
},
locked: {
tone: "warning",
fill: "outline",
icon: /*#__PURE__*/_react.default.createElement(_Icons.LockIcon, {
fill: AMBER,
width: GLYPH,
height: GLYPH
}),
connectorTone: "neutral"
},
draft: {
tone: "neutral",
fill: "dashed",
icon: /*#__PURE__*/_react.default.createElement(_Icons.GitPullRequestIcon, {
stroke: "var(--color-theme-600)",
width: GLYPH,
height: GLYPH
})
},
todo: {
tone: "neutral",
fill: "outline"
}
};
//# sourceMappingURL=SpineStep.js.map