@activecollab/components 2.0.385 → 2.0.386
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/StepSequence/StepSequence.js +13 -22
- package/dist/cjs/components/StepSequence/StepSequence.js.map +1 -1
- package/dist/cjs/components/StepSequence/Styles.js +2 -1
- package/dist/cjs/components/StepSequence/Styles.js.map +1 -1
- package/dist/cjs/presentation/shared/SourceCodeSection.js +32 -3
- package/dist/cjs/presentation/shared/SourceCodeSection.js.map +1 -1
- package/dist/esm/components/StepSequence/StepSequence.d.ts +15 -4
- package/dist/esm/components/StepSequence/StepSequence.d.ts.map +1 -1
- package/dist/esm/components/StepSequence/StepSequence.js +14 -20
- package/dist/esm/components/StepSequence/StepSequence.js.map +1 -1
- package/dist/esm/components/StepSequence/Styles.d.ts.map +1 -1
- package/dist/esm/components/StepSequence/Styles.js +3 -2
- package/dist/esm/components/StepSequence/Styles.js.map +1 -1
- package/dist/esm/presentation/shared/SourceCodeSection.d.ts.map +1 -1
- package/dist/esm/presentation/shared/SourceCodeSection.js +31 -2
- package/dist/esm/presentation/shared/SourceCodeSection.js.map +1 -1
- package/dist/index.js +15 -22
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -7,14 +7,13 @@ exports.StepSequence = void 0;
|
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
9
9
|
var _Styles = require("./Styles");
|
|
10
|
-
var _Icons = require("../Icons");
|
|
11
10
|
var _Tooltip = require("../Tooltip");
|
|
12
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
12
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
14
|
-
/**
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
/** Token colour role a step and its connector are painted with */
|
|
14
|
+
|
|
15
|
+
/** Ring style of a step: filled, toned outline or dashed outline */
|
|
16
|
+
|
|
18
17
|
var StepSequence = exports.StepSequence = function StepSequence(_ref) {
|
|
19
18
|
var steps = _ref.steps,
|
|
20
19
|
onClick = _ref.onClick,
|
|
@@ -24,29 +23,21 @@ var StepSequence = exports.StepSequence = function StepSequence(_ref) {
|
|
|
24
23
|
return null;
|
|
25
24
|
}
|
|
26
25
|
var content = steps.map(function (step, index) {
|
|
27
|
-
var _step$key, _step$tooltip;
|
|
26
|
+
var _step$key, _step$connectorTone, _step$tooltip, _step$icon;
|
|
28
27
|
return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
|
|
29
28
|
key: (_step$key = step.key) !== null && _step$key !== void 0 ? _step$key : "step-".concat(index)
|
|
30
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
29
|
+
}, index > 0 && /*#__PURE__*/_react.default.createElement("span", {
|
|
30
|
+
className: (0, _classnames.default)("c-step-sequence__connector", "c-step-sequence__connector--".concat((_step$connectorTone = step.connectorTone) !== null && _step$connectorTone !== void 0 ? _step$connectorTone : step.tone))
|
|
31
|
+
}), /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
|
|
31
32
|
title: (_step$tooltip = step.tooltip) !== null && _step$tooltip !== void 0 ? _step$tooltip : "",
|
|
32
33
|
disable: !step.tooltip
|
|
33
34
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
34
|
-
className: (0, _classnames.default)("c-step-sequence__step", "c-step-sequence__step--".concat(step.
|
|
35
|
-
|
|
36
|
-
fill: "#fff",
|
|
37
|
-
width: 14,
|
|
38
|
-
height: 14
|
|
39
|
-
}), step.state === "failed" && /*#__PURE__*/_react.default.createElement(_Icons.CloseIcon, {
|
|
40
|
-
fill: "#fff",
|
|
41
|
-
width: 12,
|
|
42
|
-
height: 12
|
|
43
|
-
}), (step.state === "progress" || step.state === "todo") && /*#__PURE__*/_react.default.createElement("span", {
|
|
44
|
-
className: (0, _classnames.default)("c-step-sequence__dot", "c-step-sequence__dot--".concat(step.state))
|
|
45
|
-
}))), index < steps.length - 1 && /*#__PURE__*/_react.default.createElement("span", {
|
|
46
|
-
className: (0, _classnames.default)("c-step-sequence__connector", {
|
|
47
|
-
"c-step-sequence__connector--on": isReached(steps[index + 1].state)
|
|
35
|
+
className: (0, _classnames.default)("c-step-sequence__step", "c-step-sequence__step--".concat(step.tone), "c-step-sequence__step--".concat(step.fill), {
|
|
36
|
+
"c-step-sequence__step--pulse": step.pulse
|
|
48
37
|
})
|
|
49
|
-
})
|
|
38
|
+
}, (_step$icon = step.icon) !== null && _step$icon !== void 0 ? _step$icon : /*#__PURE__*/_react.default.createElement("span", {
|
|
39
|
+
className: "c-step-sequence__dot"
|
|
40
|
+
}))));
|
|
50
41
|
});
|
|
51
42
|
if (onClick) {
|
|
52
43
|
return /*#__PURE__*/_react.default.createElement(_Styles.StyledStepSequenceTrigger, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepSequence.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","
|
|
1
|
+
{"version":3,"file":"StepSequence.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Styles","_Tooltip","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StepSequence","exports","_ref","steps","onClick","ariaLabel","className","length","content","map","step","index","_step$key","_step$connectorTone","_step$tooltip","_step$icon","createElement","Fragment","key","concat","classnames","connectorTone","tone","Tooltip","title","tooltip","disable","fill","pulse","icon","StyledStepSequenceTrigger","StyledStepSequence","displayName"],"sources":["../../../../src/components/StepSequence/StepSequence.tsx"],"sourcesContent":["import React, {\n FC,\n Fragment,\n MouseEventHandler,\n ReactElement,\n ReactNode,\n} from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledStepSequence, StyledStepSequenceTrigger } from \"./Styles\";\nimport { Tooltip } from \"../Tooltip\";\n\n/** Token colour role a step and its connector are painted with */\nexport type StepSequenceTone =\n | \"success\"\n | \"info\"\n | \"warning\"\n | \"danger\"\n | \"neutral\";\n\n/** Ring style of a step: filled, toned outline or dashed outline */\nexport type StepSequenceFill = \"solid\" | \"outline\" | \"dashed\";\n\nexport interface IStepSequenceStep {\n /** Colour role of the step, resolved to theme tokens */\n tone: StepSequenceTone;\n /** How the step's ring is drawn */\n fill: StepSequenceFill;\n /** Glyph rendered inside the step; a plain dot when omitted */\n icon?: ReactNode;\n /** Animates the glyph, marking a step as the one currently running */\n pulse?: boolean;\n /** Tooltip content shown when the step is hovered; no tooltip when omitted */\n tooltip?: ReactElement | string;\n /** Tone of the connector leading into this step; the step's own tone when omitted */\n connectorTone?: StepSequenceTone;\n /** Stable key for the step; falls back to the step index */\n key?: string;\n}\n\nexport interface IStepSequenceProps {\n /** Steps, rendered left to right and joined by connector lines */\n steps: IStepSequenceStep[];\n /** When provided the whole sequence is a single interactive button */\n onClick?: MouseEventHandler<HTMLButtonElement>;\n /** Accessible label, announced when the sequence is interactive */\n ariaLabel?: string;\n /** Class for the wrapper element */\n className?: string;\n}\n\nexport const StepSequence: FC<IStepSequenceProps> = ({\n steps,\n onClick,\n ariaLabel,\n className,\n}) => {\n if (!steps.length) {\n return null;\n }\n\n const content = steps.map((step, index) => (\n <Fragment key={step.key ?? `step-${index}`}>\n {index > 0 && (\n <span\n className={classnames(\n \"c-step-sequence__connector\",\n `c-step-sequence__connector--${step.connectorTone ?? step.tone}`\n )}\n />\n )}\n <Tooltip title={step.tooltip ?? \"\"} disable={!step.tooltip}>\n <span\n className={classnames(\n \"c-step-sequence__step\",\n `c-step-sequence__step--${step.tone}`,\n `c-step-sequence__step--${step.fill}`,\n { \"c-step-sequence__step--pulse\": step.pulse }\n )}\n >\n {step.icon ?? <span className=\"c-step-sequence__dot\" />}\n </span>\n </Tooltip>\n </Fragment>\n ));\n\n if (onClick) {\n return (\n <StyledStepSequenceTrigger\n className={classnames(\"c-step-sequence\", className)}\n onClick={onClick}\n aria-label={ariaLabel}\n >\n {content}\n </StyledStepSequenceTrigger>\n );\n }\n\n return (\n <StyledStepSequence\n className={classnames(\"c-step-sequence\", className)}\n aria-label={ariaLabel}\n >\n {content}\n </StyledStepSequence>\n );\n};\n\nStepSequence.displayName = \"StepSequence\";\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -8,7 +8,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
|
8
8
|
var _BoxSizingStyle = require("../BoxSizingStyle");
|
|
9
9
|
var _Trigger = require("../Trigger");
|
|
10
10
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
11
|
-
var
|
|
11
|
+
var StepPulse = (0, _styledComponents.keyframes)(["0%,100%{opacity:1;}50%{opacity:0.35;}"]);
|
|
12
|
+
var StepSequenceStyle = (0, _styledComponents.css)(["", " display:inline-flex;align-items:center;padding:6px 8px;.c-step-sequence__step--success,.c-step-sequence__connector--success{--step-sequence-surface:var(--color-sucess-green);--step-sequence-ring:var(--color-sucess-green);--step-sequence-line:var(--color-sucess-green);}.c-step-sequence__step--info,.c-step-sequence__connector--info{--step-sequence-surface:var(--color-progress-blue);--step-sequence-ring:var(--color-progress-blue);--step-sequence-line:var(--color-progress-blue);}.c-step-sequence__step--warning,.c-step-sequence__connector--warning{--step-sequence-surface:var(--color-orange);--step-sequence-ring:var(--color-orange);--step-sequence-line:var(--color-orange);}.c-step-sequence__step--danger,.c-step-sequence__connector--danger{--step-sequence-surface:var(--red-alert);--step-sequence-ring:var(--red-alert);--step-sequence-line:var(--red-alert);}.c-step-sequence__step--neutral,.c-step-sequence__connector--neutral{--step-sequence-surface:var(--color-theme-500);--step-sequence-ring:var(--color-theme-400);--step-sequence-line:var(--color-theme-400);}.c-step-sequence__step{width:22px;height:22px;border-radius:50%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex-shrink:0;svg{display:block;}}.c-step-sequence__step--solid{background:var(--step-sequence-surface);}.c-step-sequence__step--outline{background:transparent;border:2px solid var(--step-sequence-ring);}.c-step-sequence__step--dashed{background:transparent;border:2px dashed var(--step-sequence-ring);}.c-step-sequence__step--pulse > *{animation:", " 1.4s ease-in-out infinite;}.c-step-sequence__dot{width:6px;height:6px;border-radius:50%;background:var(--step-sequence-surface);}.c-step-sequence__step--solid .c-step-sequence__dot{width:7px;height:7px;background:var(--only-white);}.c-step-sequence__connector{width:13px;height:2px;flex-shrink:0;background:var(--step-sequence-line);}"], _BoxSizingStyle.BoxSizingStyle, StepPulse);
|
|
12
13
|
var StyledStepSequenceTrigger = exports.StyledStepSequenceTrigger = (0, _styledComponents.default)(_Trigger.Trigger).withConfig({
|
|
13
14
|
displayName: "Styles__StyledStepSequenceTrigger",
|
|
14
15
|
componentId: "sc-hp7ywn-0"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_Trigger","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StepSequenceStyle","css","BoxSizingStyle","StyledStepSequenceTrigger","exports","styled","Trigger","withConfig","displayName","componentId","StyledStepSequence","div"],"sources":["../../../../src/components/StepSequence/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { Trigger } from \"../Trigger\";\n\nconst StepSequenceStyle = css`\n ${BoxSizingStyle}\n\n display: inline-flex;\n align-items: center;\n padding: 6px 8px;\n\n .c-step-sequence__step {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_Trigger","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StepPulse","keyframes","StepSequenceStyle","css","BoxSizingStyle","StyledStepSequenceTrigger","exports","styled","Trigger","withConfig","displayName","componentId","StyledStepSequence","div"],"sources":["../../../../src/components/StepSequence/Styles.ts"],"sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { Trigger } from \"../Trigger\";\n\nconst StepPulse = keyframes`\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.35;\n }\n`;\n\nconst StepSequenceStyle = css`\n ${BoxSizingStyle}\n\n display: inline-flex;\n align-items: center;\n padding: 6px 8px;\n\n /* A tone resolves to three roles: the surface a solid step is filled with,\n the ring an outlined step is drawn with and the connector line. Only\n neutral needs them to differ — its line stays the faint, unreached grey. */\n .c-step-sequence__step--success,\n .c-step-sequence__connector--success {\n --step-sequence-surface: var(--color-sucess-green);\n --step-sequence-ring: var(--color-sucess-green);\n --step-sequence-line: var(--color-sucess-green);\n }\n .c-step-sequence__step--info,\n .c-step-sequence__connector--info {\n --step-sequence-surface: var(--color-progress-blue);\n --step-sequence-ring: var(--color-progress-blue);\n --step-sequence-line: var(--color-progress-blue);\n }\n .c-step-sequence__step--warning,\n .c-step-sequence__connector--warning {\n --step-sequence-surface: var(--color-orange);\n --step-sequence-ring: var(--color-orange);\n --step-sequence-line: var(--color-orange);\n }\n .c-step-sequence__step--danger,\n .c-step-sequence__connector--danger {\n --step-sequence-surface: var(--red-alert);\n --step-sequence-ring: var(--red-alert);\n --step-sequence-line: var(--red-alert);\n }\n .c-step-sequence__step--neutral,\n .c-step-sequence__connector--neutral {\n --step-sequence-surface: var(--color-theme-500);\n --step-sequence-ring: var(--color-theme-400);\n --step-sequence-line: var(--color-theme-400);\n }\n\n .c-step-sequence__step {\n width: 22px;\n height: 22px;\n border-radius: 50%;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n\n svg {\n display: block;\n }\n }\n\n .c-step-sequence__step--solid {\n background: var(--step-sequence-surface);\n }\n .c-step-sequence__step--outline {\n background: transparent;\n border: 2px solid var(--step-sequence-ring);\n }\n .c-step-sequence__step--dashed {\n background: transparent;\n border: 2px dashed var(--step-sequence-ring);\n }\n\n .c-step-sequence__step--pulse > * {\n animation: ${StepPulse} 1.4s ease-in-out infinite;\n }\n\n .c-step-sequence__dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--step-sequence-surface);\n }\n .c-step-sequence__step--solid .c-step-sequence__dot {\n width: 7px;\n height: 7px;\n background: var(--only-white);\n }\n\n .c-step-sequence__connector {\n width: 13px;\n height: 2px;\n flex-shrink: 0;\n background: var(--step-sequence-line);\n }\n`;\n\nexport const StyledStepSequenceTrigger = styled(Trigger)`\n ${StepSequenceStyle}\n\n border-radius: 8px;\n transition: background-color 200ms ease;\n\n &:hover {\n background-color: var(--color-theme-200);\n }\n &:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 1px;\n }\n`;\nStyledStepSequenceTrigger.displayName = \"StyledStepSequenceTrigger\";\n\nexport const StyledStepSequence = styled.div`\n ${StepSequenceStyle}\n`;\nStyledStepSequence.displayName = \"StyledStepSequence\";\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AAAqC,SAAAD,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,wBAAAI,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,cAAAM,EAAA,IAAAd,CAAA,gBAAAc,EAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,EAAA,OAAAP,CAAA,IAAAD,CAAA,GAAAW,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAc,EAAA,OAAAP,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAM,EAAA,EAAAP,CAAA,IAAAC,CAAA,CAAAM,EAAA,IAAAd,CAAA,CAAAc,EAAA,WAAAN,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAErC,IAAMmB,SAAS,OAAGC,2BAAS,4CAQ1B;AAED,IAAMC,iBAAiB,OAAGC,qBAAG,k3DACzBC,8BAAc,EAoEDJ,SAAS,CAqBzB;AAEM,IAAMK,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,IAAAE,yBAAM,EAACC,gBAAO,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mMACpDT,iBAAiB,CAYpB;AACDG,yBAAyB,CAACK,WAAW,GAAG,2BAA2B;AAE5D,IAAME,kBAAkB,GAAAN,OAAA,CAAAM,kBAAA,GAAGL,yBAAM,CAACM,GAAG,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACxCT,iBAAiB,CACpB;AACDU,kBAAkB,CAACF,WAAW,GAAG,oBAAoB","ignoreList":[]}
|
|
@@ -820,6 +820,36 @@ var StyledSpineSequence = (0, _styledComponents.default)(_StepSequence.StepSeque
|
|
|
820
820
|
displayName: "SourceCodeSection__StyledSpineSequence",
|
|
821
821
|
componentId: "sc-rvqbh5-0"
|
|
822
822
|
})(["align-self:center;flex-shrink:0;"]);
|
|
823
|
+
|
|
824
|
+
/** Stage state → the generic look `StepSequence` renders it with. */
|
|
825
|
+
var STAGE_STEP = {
|
|
826
|
+
done: {
|
|
827
|
+
tone: "success",
|
|
828
|
+
fill: "solid",
|
|
829
|
+
icon: /*#__PURE__*/_react.default.createElement(_Icons.CheckIcon, {
|
|
830
|
+
fill: "var(--only-white)",
|
|
831
|
+
width: 14,
|
|
832
|
+
height: 14
|
|
833
|
+
})
|
|
834
|
+
},
|
|
835
|
+
progress: {
|
|
836
|
+
tone: "info",
|
|
837
|
+
fill: "solid"
|
|
838
|
+
},
|
|
839
|
+
failed: {
|
|
840
|
+
tone: "danger",
|
|
841
|
+
fill: "solid",
|
|
842
|
+
icon: /*#__PURE__*/_react.default.createElement(_Icons.CloseIcon, {
|
|
843
|
+
fill: "var(--only-white)",
|
|
844
|
+
width: 12,
|
|
845
|
+
height: 12
|
|
846
|
+
})
|
|
847
|
+
},
|
|
848
|
+
todo: {
|
|
849
|
+
tone: "neutral",
|
|
850
|
+
fill: "outline"
|
|
851
|
+
}
|
|
852
|
+
};
|
|
823
853
|
var Spine = exports.Spine = function Spine(_ref3) {
|
|
824
854
|
var items = _ref3.items,
|
|
825
855
|
onClick = _ref3.onClick;
|
|
@@ -827,11 +857,10 @@ var Spine = exports.Spine = function Spine(_ref3) {
|
|
|
827
857
|
ariaLabel: "Open source code history",
|
|
828
858
|
onClick: onClick,
|
|
829
859
|
steps: items.map(function (s) {
|
|
830
|
-
return {
|
|
860
|
+
return _objectSpread(_objectSpread({}, STAGE_STEP[s.state]), {}, {
|
|
831
861
|
key: s.name,
|
|
832
|
-
state: s.state,
|
|
833
862
|
tooltip: /*#__PURE__*/_react.default.createElement(StageTip, s)
|
|
834
|
-
};
|
|
863
|
+
});
|
|
835
864
|
})
|
|
836
865
|
});
|
|
837
866
|
};
|