@cdx-ui/components 0.0.1-beta.21 → 0.0.1-beta.23
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/lib/commonjs/components/Icon/index.js +1 -2
- package/lib/commonjs/components/Icon/index.js.map +1 -1
- package/lib/commonjs/components/ProgressSegmented/index.js +22 -10
- package/lib/commonjs/components/ProgressSegmented/index.js.map +1 -1
- package/lib/commonjs/figma/ProgressSegmented.figma.js +39 -0
- package/lib/commonjs/figma/ProgressSegmented.figma.js.map +1 -0
- package/lib/module/components/Icon/index.js +1 -2
- package/lib/module/components/Icon/index.js.map +1 -1
- package/lib/module/components/ProgressSegmented/index.js +23 -11
- package/lib/module/components/ProgressSegmented/index.js.map +1 -1
- package/lib/module/figma/ProgressSegmented.figma.js +33 -0
- package/lib/module/figma/ProgressSegmented.figma.js.map +1 -0
- package/lib/typescript/components/Icon/index.d.ts.map +1 -1
- package/lib/typescript/components/ProgressSegmented/index.d.ts +14 -3
- package/lib/typescript/components/ProgressSegmented/index.d.ts.map +1 -1
- package/lib/typescript/figma/ProgressSegmented.figma.d.ts +8 -0
- package/lib/typescript/figma/ProgressSegmented.figma.d.ts.map +1 -0
- package/package.json +4 -4
- package/src/components/Icon/index.tsx +1 -2
- package/src/components/ProgressSegmented/index.tsx +49 -14
|
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.Icon = Icon;
|
|
7
7
|
var _uniwind = require("uniwind");
|
|
8
8
|
var _utils = require("@cdx-ui/utils");
|
|
9
|
-
var _primitives = require("../../styles/primitives");
|
|
10
9
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
10
|
function IconImpl({
|
|
12
11
|
as: IconComponent,
|
|
@@ -54,7 +53,7 @@ function Icon({
|
|
|
54
53
|
}) {
|
|
55
54
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledIcon, {
|
|
56
55
|
as: IconComponent,
|
|
57
|
-
className: (0, _utils.cn)(
|
|
56
|
+
className: (0, _utils.cn)('text-content-primary size-5', className),
|
|
58
57
|
...props
|
|
59
58
|
});
|
|
60
59
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_uniwind","require","_utils","
|
|
1
|
+
{"version":3,"names":["_uniwind","require","_utils","_jsxRuntime","IconImpl","as","IconComponent","props","jsx","StyledIcon","withUniwind","size","fromClassName","styleProperty","color","Icon","className","cn"],"sourceRoot":"../../../../src","sources":["components/Icon/index.tsx"],"mappings":";;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAAmC,IAAAE,WAAA,GAAAF,OAAA;AAQnC,SAASG,QAAQA,CAAC;EAAEC,EAAE,EAAEC,aAAa;EAAE,GAAGC;AAAiB,CAAC,EAAE;EAC5D,oBAAO,IAAAJ,WAAA,CAAAK,GAAA,EAACF,aAAa;IAAA,GAAKC;EAAK,CAAG,CAAC;AACrC;AAEA,MAAME,UAAU,GAAG,IAAAC,oBAAW,EAACN,QAAQ,EAAE;EACvCO,IAAI,EAAE;IACJC,aAAa,EAAE,WAAW;IAC1BC,aAAa,EAAE;EACjB,CAAC;EACDC,KAAK,EAAE;IACLF,aAAa,EAAE,WAAW;IAC1BC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,IAAIA,CAAC;EAAEV,EAAE,EAAEC,aAAa;EAAEU,SAAS;EAAE,GAAGT;AAAiB,CAAC,EAAE;EAC1E,oBACE,IAAAJ,WAAA,CAAAK,GAAA,EAACC,UAAU;IACTJ,EAAE,EAAEC,aAAc;IAClBU,SAAS,EAAE,IAAAC,SAAE,EAAC,6BAA6B,EAAED,SAAS,CAAE;IAAA,GACpDT;EAAK,CACV,CAAC;AAEN","ignoreList":[]}
|
|
@@ -9,19 +9,29 @@ var _reactNative = require("react-native");
|
|
|
9
9
|
var _utils = require("@cdx-ui/utils");
|
|
10
10
|
var _styles = require("./styles");
|
|
11
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
|
+
/* `ProgressSegmentedProps.total` remains in the public API until the next major release. */
|
|
13
|
+
/* eslint-disable @typescript-eslint/no-deprecated */
|
|
14
|
+
|
|
12
15
|
const ProgressSegmented = exports.ProgressSegmented = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
13
16
|
step,
|
|
14
|
-
|
|
17
|
+
segments,
|
|
18
|
+
total,
|
|
15
19
|
isStepComplete = false,
|
|
16
20
|
getAccessibilityText,
|
|
17
21
|
className,
|
|
18
22
|
accessibilityLabel = 'Progress',
|
|
19
23
|
...props
|
|
20
24
|
}, ref) => {
|
|
21
|
-
const
|
|
22
|
-
|
|
25
|
+
const segmentCount = segments ?? total ?? 5;
|
|
26
|
+
(0, _react.useEffect)(() => {
|
|
27
|
+
if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && total !== undefined && segments === undefined) {
|
|
28
|
+
console.warn('[ProgressSegmented] The `total` prop is deprecated and will be removed in a future major release. Use `segments` instead.');
|
|
29
|
+
}
|
|
30
|
+
}, [total, segments]);
|
|
31
|
+
const clampedStep = Math.max(0, Math.min(step, segmentCount));
|
|
32
|
+
const segmentStates = (0, _react.useMemo)(() => {
|
|
23
33
|
return Array.from({
|
|
24
|
-
length:
|
|
34
|
+
length: segmentCount
|
|
25
35
|
}, (_, index) => {
|
|
26
36
|
const segmentIndex = index + 1;
|
|
27
37
|
let state = 'incomplete';
|
|
@@ -32,12 +42,12 @@ const ProgressSegmented = exports.ProgressSegmented = /*#__PURE__*/(0, _react.fo
|
|
|
32
42
|
}
|
|
33
43
|
return state;
|
|
34
44
|
});
|
|
35
|
-
}, [
|
|
36
|
-
let accessibilityText = `Step ${String(clampedStep)} of ${String(
|
|
45
|
+
}, [segmentCount, clampedStep, isStepComplete]);
|
|
46
|
+
let accessibilityText = `Step ${String(clampedStep)} of ${String(segmentCount)}`;
|
|
37
47
|
if (getAccessibilityText) {
|
|
38
|
-
accessibilityText = getAccessibilityText(clampedStep,
|
|
48
|
+
accessibilityText = getAccessibilityText(clampedStep, segmentCount, isStepComplete);
|
|
39
49
|
} else if (isStepComplete) {
|
|
40
|
-
accessibilityText = `Step ${String(clampedStep)} of ${String(
|
|
50
|
+
accessibilityText = `Step ${String(clampedStep)} of ${String(segmentCount)}, completed`;
|
|
41
51
|
}
|
|
42
52
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
43
53
|
ref: ref,
|
|
@@ -45,13 +55,13 @@ const ProgressSegmented = exports.ProgressSegmented = /*#__PURE__*/(0, _react.fo
|
|
|
45
55
|
accessibilityLabel: accessibilityLabel,
|
|
46
56
|
accessibilityValue: {
|
|
47
57
|
min: 0,
|
|
48
|
-
max:
|
|
58
|
+
max: segmentCount,
|
|
49
59
|
now: clampedStep,
|
|
50
60
|
text: accessibilityText
|
|
51
61
|
},
|
|
52
62
|
className: (0, _utils.cn)((0, _styles.progressSegmentedVariants)(), className),
|
|
53
63
|
...props,
|
|
54
|
-
children:
|
|
64
|
+
children: segmentStates.map((state, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
55
65
|
className: (0, _utils.cn)((0, _styles.segmentVariants)({
|
|
56
66
|
state
|
|
57
67
|
}))
|
|
@@ -59,4 +69,6 @@ const ProgressSegmented = exports.ProgressSegmented = /*#__PURE__*/(0, _react.fo
|
|
|
59
69
|
});
|
|
60
70
|
});
|
|
61
71
|
ProgressSegmented.displayName = 'ProgressSegmented';
|
|
72
|
+
|
|
73
|
+
/* eslint-enable @typescript-eslint/no-deprecated */
|
|
62
74
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNative","_utils","_styles","_jsxRuntime","ProgressSegmented","exports","forwardRef","step","total","isStepComplete","getAccessibilityText","className","accessibilityLabel","props","ref","clampedStep","Math","max","min","
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_utils","_styles","_jsxRuntime","ProgressSegmented","exports","forwardRef","step","segments","total","isStepComplete","getAccessibilityText","className","accessibilityLabel","props","ref","segmentCount","useEffect","process","env","NODE_ENV","undefined","console","warn","clampedStep","Math","max","min","segmentStates","useMemo","Array","from","length","_","index","segmentIndex","state","accessibilityText","String","jsx","View","accessibilityRole","accessibilityValue","now","text","cn","progressSegmentedVariants","children","map","segmentVariants","displayName"],"sourceRoot":"../../../../src","sources":["components/ProgressSegmented/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _figma = _interopRequireDefault(require("figma"));
|
|
8
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=449-449
|
|
10
|
+
// source=packages/components/src/components/ProgressSegmented/index.tsx
|
|
11
|
+
// component=ProgressSegmented
|
|
12
|
+
|
|
13
|
+
const instance = _figma.default.selectedInstance;
|
|
14
|
+
const segmentsCount = instance.getEnum('segments', {
|
|
15
|
+
'2': 2,
|
|
16
|
+
'3': 3,
|
|
17
|
+
'4': 4,
|
|
18
|
+
'5': 5,
|
|
19
|
+
'6': 6
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
// Figma `step=complete` maps to `isStepComplete` on the last step (all segments filled).
|
|
23
|
+
const stepRaw = instance.getEnum('step', {
|
|
24
|
+
'1': '1',
|
|
25
|
+
'2': '2',
|
|
26
|
+
'3': '3',
|
|
27
|
+
'4': '4',
|
|
28
|
+
'5': '5',
|
|
29
|
+
'6': '6',
|
|
30
|
+
complete: 'complete'
|
|
31
|
+
});
|
|
32
|
+
const isStepComplete = stepRaw === 'complete';
|
|
33
|
+
const step = isStepComplete ? segmentsCount : Number(stepRaw);
|
|
34
|
+
var _default = exports.default = {
|
|
35
|
+
id: 'progress-segmented',
|
|
36
|
+
imports: ["import { ProgressSegmented } from '@cdx-ui/components'"],
|
|
37
|
+
example: _figma.default.code`<ProgressSegmented segments={${segmentsCount}} step={${step}}${isStepComplete ? _figma.default.code` isStepComplete` : _figma.default.code``} />`
|
|
38
|
+
};
|
|
39
|
+
//# sourceMappingURL=ProgressSegmented.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_figma","_interopRequireDefault","require","e","__esModule","default","instance","figma","selectedInstance","segmentsCount","getEnum","stepRaw","complete","isStepComplete","step","Number","_default","exports","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/ProgressSegmented.figma.ts"],"mappings":";;;;;;AAGA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA0B,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAH1B;AACA;AACA;;AAGA,MAAMG,QAAQ,GAAGC,cAAK,CAACC,gBAAgB;AAEvC,MAAMC,aAAa,GAAGH,QAAQ,CAACI,OAAO,CAAC,UAAU,EAAE;EACjD,GAAG,EAAE,CAAC;EACN,GAAG,EAAE,CAAC;EACN,GAAG,EAAE,CAAC;EACN,GAAG,EAAE,CAAC;EACN,GAAG,EAAE;AACP,CAAC,CAAC;;AAEF;AACA,MAAMC,OAAO,GAAGL,QAAQ,CAACI,OAAO,CAAC,MAAM,EAAE;EACvC,GAAG,EAAE,GAAG;EACR,GAAG,EAAE,GAAG;EACR,GAAG,EAAE,GAAG;EACR,GAAG,EAAE,GAAG;EACR,GAAG,EAAE,GAAG;EACR,GAAG,EAAE,GAAG;EACRE,QAAQ,EAAE;AACZ,CAAC,CAAC;AAEF,MAAMC,cAAc,GAAGF,OAAO,KAAK,UAAU;AAC7C,MAAMG,IAAI,GAAGD,cAAc,GAAGJ,aAAa,GAAGM,MAAM,CAACJ,OAAO,CAAC;AAAC,IAAAK,QAAA,GAAAC,OAAA,CAAAZ,OAAA,GAE/C;EACba,EAAE,EAAE,oBAAoB;EACxBC,OAAO,EAAE,CAAC,wDAAwD,CAAC;EACnEC,OAAO,EAAEb,cAAK,CAACc,IAAI,gCAAgCZ,aAAa,WAAWK,IAAI,IAC7ED,cAAc,GAAGN,cAAK,CAACc,IAAI,iBAAiB,GAAGd,cAAK,CAACc,IAAI,EAAE;AAE/D,CAAC","ignoreList":[]}
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
import { withUniwind } from 'uniwind';
|
|
4
4
|
import { cn } from '@cdx-ui/utils';
|
|
5
|
-
import { COLOR_TEXT_PRIMARY } from '../../styles/primitives';
|
|
6
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
6
|
function IconImpl({
|
|
8
7
|
as: IconComponent,
|
|
@@ -50,7 +49,7 @@ export function Icon({
|
|
|
50
49
|
}) {
|
|
51
50
|
return /*#__PURE__*/_jsx(StyledIcon, {
|
|
52
51
|
as: IconComponent,
|
|
53
|
-
className: cn(
|
|
52
|
+
className: cn('text-content-primary size-5', className),
|
|
54
53
|
...props
|
|
55
54
|
});
|
|
56
55
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["withUniwind","cn","
|
|
1
|
+
{"version":3,"names":["withUniwind","cn","jsx","_jsx","IconImpl","as","IconComponent","props","StyledIcon","size","fromClassName","styleProperty","color","Icon","className"],"sourceRoot":"../../../../src","sources":["components/Icon/index.tsx"],"mappings":";;AAAA,SAASA,WAAW,QAAQ,SAAS;AACrC,SAASC,EAAE,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQnC,SAASC,QAAQA,CAAC;EAAEC,EAAE,EAAEC,aAAa;EAAE,GAAGC;AAAiB,CAAC,EAAE;EAC5D,oBAAOJ,IAAA,CAACG,aAAa;IAAA,GAAKC;EAAK,CAAG,CAAC;AACrC;AAEA,MAAMC,UAAU,GAAGR,WAAW,CAACI,QAAQ,EAAE;EACvCK,IAAI,EAAE;IACJC,aAAa,EAAE,WAAW;IAC1BC,aAAa,EAAE;EACjB,CAAC;EACDC,KAAK,EAAE;IACLF,aAAa,EAAE,WAAW;IAC1BC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,IAAIA,CAAC;EAAER,EAAE,EAAEC,aAAa;EAAEQ,SAAS;EAAE,GAAGP;AAAiB,CAAC,EAAE;EAC1E,oBACEJ,IAAA,CAACK,UAAU;IACTH,EAAE,EAAEC,aAAc;IAClBQ,SAAS,EAAEb,EAAE,CAAC,6BAA6B,EAAEa,SAAS,CAAE;IAAA,GACpDP;EAAK,CACV,CAAC;AAEN","ignoreList":[]}
|
|
@@ -1,23 +1,33 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import { forwardRef, useMemo } from 'react';
|
|
3
|
+
import { forwardRef, useEffect, useMemo } from 'react';
|
|
4
4
|
import { View } from 'react-native';
|
|
5
5
|
import { cn } from '@cdx-ui/utils';
|
|
6
6
|
import { progressSegmentedVariants, segmentVariants } from './styles';
|
|
7
|
+
|
|
8
|
+
/* `ProgressSegmentedProps.total` remains in the public API until the next major release. */
|
|
9
|
+
/* eslint-disable @typescript-eslint/no-deprecated */
|
|
7
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
11
|
export const ProgressSegmented = /*#__PURE__*/forwardRef(({
|
|
9
12
|
step,
|
|
10
|
-
|
|
13
|
+
segments,
|
|
14
|
+
total,
|
|
11
15
|
isStepComplete = false,
|
|
12
16
|
getAccessibilityText,
|
|
13
17
|
className,
|
|
14
18
|
accessibilityLabel = 'Progress',
|
|
15
19
|
...props
|
|
16
20
|
}, ref) => {
|
|
17
|
-
const
|
|
18
|
-
|
|
21
|
+
const segmentCount = segments ?? total ?? 5;
|
|
22
|
+
useEffect(() => {
|
|
23
|
+
if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && total !== undefined && segments === undefined) {
|
|
24
|
+
console.warn('[ProgressSegmented] The `total` prop is deprecated and will be removed in a future major release. Use `segments` instead.');
|
|
25
|
+
}
|
|
26
|
+
}, [total, segments]);
|
|
27
|
+
const clampedStep = Math.max(0, Math.min(step, segmentCount));
|
|
28
|
+
const segmentStates = useMemo(() => {
|
|
19
29
|
return Array.from({
|
|
20
|
-
length:
|
|
30
|
+
length: segmentCount
|
|
21
31
|
}, (_, index) => {
|
|
22
32
|
const segmentIndex = index + 1;
|
|
23
33
|
let state = 'incomplete';
|
|
@@ -28,12 +38,12 @@ export const ProgressSegmented = /*#__PURE__*/forwardRef(({
|
|
|
28
38
|
}
|
|
29
39
|
return state;
|
|
30
40
|
});
|
|
31
|
-
}, [
|
|
32
|
-
let accessibilityText = `Step ${String(clampedStep)} of ${String(
|
|
41
|
+
}, [segmentCount, clampedStep, isStepComplete]);
|
|
42
|
+
let accessibilityText = `Step ${String(clampedStep)} of ${String(segmentCount)}`;
|
|
33
43
|
if (getAccessibilityText) {
|
|
34
|
-
accessibilityText = getAccessibilityText(clampedStep,
|
|
44
|
+
accessibilityText = getAccessibilityText(clampedStep, segmentCount, isStepComplete);
|
|
35
45
|
} else if (isStepComplete) {
|
|
36
|
-
accessibilityText = `Step ${String(clampedStep)} of ${String(
|
|
46
|
+
accessibilityText = `Step ${String(clampedStep)} of ${String(segmentCount)}, completed`;
|
|
37
47
|
}
|
|
38
48
|
return /*#__PURE__*/_jsx(View, {
|
|
39
49
|
ref: ref,
|
|
@@ -41,13 +51,13 @@ export const ProgressSegmented = /*#__PURE__*/forwardRef(({
|
|
|
41
51
|
accessibilityLabel: accessibilityLabel,
|
|
42
52
|
accessibilityValue: {
|
|
43
53
|
min: 0,
|
|
44
|
-
max:
|
|
54
|
+
max: segmentCount,
|
|
45
55
|
now: clampedStep,
|
|
46
56
|
text: accessibilityText
|
|
47
57
|
},
|
|
48
58
|
className: cn(progressSegmentedVariants(), className),
|
|
49
59
|
...props,
|
|
50
|
-
children:
|
|
60
|
+
children: segmentStates.map((state, index) => /*#__PURE__*/_jsx(View, {
|
|
51
61
|
className: cn(segmentVariants({
|
|
52
62
|
state
|
|
53
63
|
}))
|
|
@@ -55,4 +65,6 @@ export const ProgressSegmented = /*#__PURE__*/forwardRef(({
|
|
|
55
65
|
});
|
|
56
66
|
});
|
|
57
67
|
ProgressSegmented.displayName = 'ProgressSegmented';
|
|
68
|
+
|
|
69
|
+
/* eslint-enable @typescript-eslint/no-deprecated */
|
|
58
70
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["forwardRef","useMemo","View","cn","progressSegmentedVariants","segmentVariants","jsx","_jsx","ProgressSegmented","step","total","isStepComplete","getAccessibilityText","className","accessibilityLabel","props","ref","clampedStep","Math","max","min","
|
|
1
|
+
{"version":3,"names":["forwardRef","useEffect","useMemo","View","cn","progressSegmentedVariants","segmentVariants","jsx","_jsx","ProgressSegmented","step","segments","total","isStepComplete","getAccessibilityText","className","accessibilityLabel","props","ref","segmentCount","process","env","NODE_ENV","undefined","console","warn","clampedStep","Math","max","min","segmentStates","Array","from","length","_","index","segmentIndex","state","accessibilityText","String","accessibilityRole","accessibilityValue","now","text","children","map","displayName"],"sourceRoot":"../../../../src","sources":["components/ProgressSegmented/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=449-449
|
|
4
|
+
// source=packages/components/src/components/ProgressSegmented/index.tsx
|
|
5
|
+
// component=ProgressSegmented
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
const segmentsCount = instance.getEnum('segments', {
|
|
9
|
+
'2': 2,
|
|
10
|
+
'3': 3,
|
|
11
|
+
'4': 4,
|
|
12
|
+
'5': 5,
|
|
13
|
+
'6': 6
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
// Figma `step=complete` maps to `isStepComplete` on the last step (all segments filled).
|
|
17
|
+
const stepRaw = instance.getEnum('step', {
|
|
18
|
+
'1': '1',
|
|
19
|
+
'2': '2',
|
|
20
|
+
'3': '3',
|
|
21
|
+
'4': '4',
|
|
22
|
+
'5': '5',
|
|
23
|
+
'6': '6',
|
|
24
|
+
complete: 'complete'
|
|
25
|
+
});
|
|
26
|
+
const isStepComplete = stepRaw === 'complete';
|
|
27
|
+
const step = isStepComplete ? segmentsCount : Number(stepRaw);
|
|
28
|
+
export default {
|
|
29
|
+
id: 'progress-segmented',
|
|
30
|
+
imports: ["import { ProgressSegmented } from '@cdx-ui/components'"],
|
|
31
|
+
example: figma.code`<ProgressSegmented segments={${segmentsCount}} step={${step}}${isStepComplete ? figma.code` isStepComplete` : figma.code``} />`
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=ProgressSegmented.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","segmentsCount","getEnum","stepRaw","complete","isStepComplete","step","Number","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/ProgressSegmented.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,aAAa,GAAGF,QAAQ,CAACG,OAAO,CAAC,UAAU,EAAE;EACjD,GAAG,EAAE,CAAC;EACN,GAAG,EAAE,CAAC;EACN,GAAG,EAAE,CAAC;EACN,GAAG,EAAE,CAAC;EACN,GAAG,EAAE;AACP,CAAC,CAAC;;AAEF;AACA,MAAMC,OAAO,GAAGJ,QAAQ,CAACG,OAAO,CAAC,MAAM,EAAE;EACvC,GAAG,EAAE,GAAG;EACR,GAAG,EAAE,GAAG;EACR,GAAG,EAAE,GAAG;EACR,GAAG,EAAE,GAAG;EACR,GAAG,EAAE,GAAG;EACR,GAAG,EAAE,GAAG;EACRE,QAAQ,EAAE;AACZ,CAAC,CAAC;AAEF,MAAMC,cAAc,GAAGF,OAAO,KAAK,UAAU;AAC7C,MAAMG,IAAI,GAAGD,cAAc,GAAGJ,aAAa,GAAGM,MAAM,CAACJ,OAAO,CAAC;AAE7D,eAAe;EACbK,EAAE,EAAE,oBAAoB;EACxBC,OAAO,EAAE,CAAC,wDAAwD,CAAC;EACnEC,OAAO,EAAEZ,KAAK,CAACa,IAAI,gCAAgCV,aAAa,WAAWK,IAAI,IAC7ED,cAAc,GAAGP,KAAK,CAACa,IAAI,iBAAiB,GAAGb,KAAK,CAACa,IAAI,EAAE;AAE/D,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE3D,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,OAAO,CAAC;CACb,CAAC;AAiBF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,IAAI,CAAC,EAAE,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAQzE"}
|
|
@@ -3,12 +3,23 @@ import { type ProgressSegmentedVariants } from './styles';
|
|
|
3
3
|
export interface ProgressSegmentedProps extends ViewProps, ProgressSegmentedVariants {
|
|
4
4
|
/** Current step (1-based index into the segment count) */
|
|
5
5
|
readonly step: number;
|
|
6
|
-
/**
|
|
6
|
+
/**
|
|
7
|
+
* Number of segments in the bar. Matches the Figma `segments` variant (2–6 in the design
|
|
8
|
+
* system file); the prop accepts any positive integer for backward compatibility.
|
|
9
|
+
*/
|
|
10
|
+
readonly segments?: number;
|
|
11
|
+
/**
|
|
12
|
+
* @deprecated Use {@link ProgressSegmentedProps.segments} instead. This alias will be removed
|
|
13
|
+
* in a future major release.
|
|
14
|
+
*/
|
|
7
15
|
readonly total?: number;
|
|
8
16
|
/** When true, the current step segment is marked as complete rather than in-progress */
|
|
9
17
|
readonly isStepComplete?: boolean;
|
|
10
|
-
/**
|
|
11
|
-
|
|
18
|
+
/**
|
|
19
|
+
* Returns the accessibility value text announced by screen readers. Receives the clamped
|
|
20
|
+
* step, segment count, and whether the step is complete.
|
|
21
|
+
*/
|
|
22
|
+
readonly getAccessibilityText?: (step: number, segmentCount: number, isStepComplete: boolean) => string;
|
|
12
23
|
readonly className?: string;
|
|
13
24
|
}
|
|
14
25
|
export declare const ProgressSegmented: import("react").ForwardRefExoticComponent<ProgressSegmentedProps & import("react").RefAttributes<View>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressSegmented/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAGL,KAAK,yBAAyB,EAC/B,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressSegmented/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAGL,KAAK,yBAAyB,EAC/B,MAAM,UAAU,CAAC;AAIlB,MAAM,WAAW,sBAAuB,SAAQ,SAAS,EAAE,yBAAyB;IAClF,0DAA0D;IAC1D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,wFAAwF;IACxF,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,oBAAoB,CAAC,EAAE,CAC9B,IAAI,EAAE,MAAM,EACZ,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,OAAO,KACpB,MAAM,CAAC;IACZ,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,iBAAiB,yGAyE7B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProgressSegmented.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/ProgressSegmented.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AA0B1B,wBAME"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdx-ui/components",
|
|
3
|
-
"version": "0.0.1-beta.
|
|
3
|
+
"version": "0.0.1-beta.23",
|
|
4
4
|
"main": "lib/commonjs/index.js",
|
|
5
5
|
"module": "lib/module/index.js",
|
|
6
6
|
"react-native": "src/index.ts",
|
|
@@ -67,9 +67,9 @@
|
|
|
67
67
|
"@gorhom/bottom-sheet": "^5.2.6",
|
|
68
68
|
"class-variance-authority": "^0.7.1",
|
|
69
69
|
"uniwind": "1.6.1",
|
|
70
|
-
"@cdx-ui/primitives": "0.0.1-beta.
|
|
71
|
-
"@cdx-ui/utils": "0.0.1-beta.
|
|
72
|
-
"@cdx-ui/icons": "0.0.1-beta.
|
|
70
|
+
"@cdx-ui/primitives": "0.0.1-beta.23",
|
|
71
|
+
"@cdx-ui/utils": "0.0.1-beta.23",
|
|
72
|
+
"@cdx-ui/icons": "0.0.1-beta.23"
|
|
73
73
|
},
|
|
74
74
|
"devDependencies": {
|
|
75
75
|
"@types/react": "*",
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { withUniwind } from 'uniwind';
|
|
2
2
|
import { cn } from '@cdx-ui/utils';
|
|
3
3
|
import type { CdxIcon, CdxIconProps } from '@cdx-ui/icons';
|
|
4
|
-
import { COLOR_TEXT_PRIMARY } from '../../styles/primitives';
|
|
5
4
|
|
|
6
5
|
export type IconProps = CdxIconProps & {
|
|
7
6
|
className?: string; // TODO: Why does this need to specified manually?
|
|
@@ -47,7 +46,7 @@ export function Icon({ as: IconComponent, className, ...props }: IconProps) {
|
|
|
47
46
|
return (
|
|
48
47
|
<StyledIcon
|
|
49
48
|
as={IconComponent}
|
|
50
|
-
className={cn(
|
|
49
|
+
className={cn('text-content-primary size-5', className)}
|
|
51
50
|
{...props}
|
|
52
51
|
/>
|
|
53
52
|
);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { forwardRef, useMemo } from 'react';
|
|
1
|
+
import { forwardRef, useEffect, useMemo } from 'react';
|
|
2
2
|
import { View, type ViewProps } from 'react-native';
|
|
3
3
|
import { cn } from '@cdx-ui/utils';
|
|
4
4
|
import {
|
|
@@ -7,15 +7,32 @@ import {
|
|
|
7
7
|
type ProgressSegmentedVariants,
|
|
8
8
|
} from './styles';
|
|
9
9
|
|
|
10
|
+
/* `ProgressSegmentedProps.total` remains in the public API until the next major release. */
|
|
11
|
+
/* eslint-disable @typescript-eslint/no-deprecated */
|
|
10
12
|
export interface ProgressSegmentedProps extends ViewProps, ProgressSegmentedVariants {
|
|
11
13
|
/** Current step (1-based index into the segment count) */
|
|
12
14
|
readonly step: number;
|
|
13
|
-
/**
|
|
15
|
+
/**
|
|
16
|
+
* Number of segments in the bar. Matches the Figma `segments` variant (2–6 in the design
|
|
17
|
+
* system file); the prop accepts any positive integer for backward compatibility.
|
|
18
|
+
*/
|
|
19
|
+
readonly segments?: number;
|
|
20
|
+
/**
|
|
21
|
+
* @deprecated Use {@link ProgressSegmentedProps.segments} instead. This alias will be removed
|
|
22
|
+
* in a future major release.
|
|
23
|
+
*/
|
|
14
24
|
readonly total?: number;
|
|
15
25
|
/** When true, the current step segment is marked as complete rather than in-progress */
|
|
16
26
|
readonly isStepComplete?: boolean;
|
|
17
|
-
/**
|
|
18
|
-
|
|
27
|
+
/**
|
|
28
|
+
* Returns the accessibility value text announced by screen readers. Receives the clamped
|
|
29
|
+
* step, segment count, and whether the step is complete.
|
|
30
|
+
*/
|
|
31
|
+
readonly getAccessibilityText?: (
|
|
32
|
+
step: number,
|
|
33
|
+
segmentCount: number,
|
|
34
|
+
isStepComplete: boolean,
|
|
35
|
+
) => string;
|
|
19
36
|
readonly className?: string;
|
|
20
37
|
}
|
|
21
38
|
|
|
@@ -23,7 +40,8 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
|
|
|
23
40
|
(
|
|
24
41
|
{
|
|
25
42
|
step,
|
|
26
|
-
|
|
43
|
+
segments,
|
|
44
|
+
total,
|
|
27
45
|
isStepComplete = false,
|
|
28
46
|
getAccessibilityText,
|
|
29
47
|
className,
|
|
@@ -32,10 +50,25 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
|
|
|
32
50
|
},
|
|
33
51
|
ref,
|
|
34
52
|
) => {
|
|
35
|
-
const
|
|
53
|
+
const segmentCount = segments ?? total ?? 5;
|
|
36
54
|
|
|
37
|
-
|
|
38
|
-
|
|
55
|
+
useEffect(() => {
|
|
56
|
+
if (
|
|
57
|
+
typeof process !== 'undefined' &&
|
|
58
|
+
process.env.NODE_ENV !== 'production' &&
|
|
59
|
+
total !== undefined &&
|
|
60
|
+
segments === undefined
|
|
61
|
+
) {
|
|
62
|
+
console.warn(
|
|
63
|
+
'[ProgressSegmented] The `total` prop is deprecated and will be removed in a future major release. Use `segments` instead.',
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
}, [total, segments]);
|
|
67
|
+
|
|
68
|
+
const clampedStep = Math.max(0, Math.min(step, segmentCount));
|
|
69
|
+
|
|
70
|
+
const segmentStates = useMemo(() => {
|
|
71
|
+
return Array.from({ length: segmentCount }, (_, index) => {
|
|
39
72
|
const segmentIndex = index + 1;
|
|
40
73
|
let state: 'complete' | 'incomplete' | 'inprogress' = 'incomplete';
|
|
41
74
|
|
|
@@ -47,13 +80,13 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
|
|
|
47
80
|
|
|
48
81
|
return state;
|
|
49
82
|
});
|
|
50
|
-
}, [
|
|
83
|
+
}, [segmentCount, clampedStep, isStepComplete]);
|
|
51
84
|
|
|
52
|
-
let accessibilityText = `Step ${String(clampedStep)} of ${String(
|
|
85
|
+
let accessibilityText = `Step ${String(clampedStep)} of ${String(segmentCount)}`;
|
|
53
86
|
if (getAccessibilityText) {
|
|
54
|
-
accessibilityText = getAccessibilityText(clampedStep,
|
|
87
|
+
accessibilityText = getAccessibilityText(clampedStep, segmentCount, isStepComplete);
|
|
55
88
|
} else if (isStepComplete) {
|
|
56
|
-
accessibilityText = `Step ${String(clampedStep)} of ${String(
|
|
89
|
+
accessibilityText = `Step ${String(clampedStep)} of ${String(segmentCount)}, completed`;
|
|
57
90
|
}
|
|
58
91
|
|
|
59
92
|
return (
|
|
@@ -63,14 +96,14 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
|
|
|
63
96
|
accessibilityLabel={accessibilityLabel}
|
|
64
97
|
accessibilityValue={{
|
|
65
98
|
min: 0,
|
|
66
|
-
max:
|
|
99
|
+
max: segmentCount,
|
|
67
100
|
now: clampedStep,
|
|
68
101
|
text: accessibilityText,
|
|
69
102
|
}}
|
|
70
103
|
className={cn(progressSegmentedVariants(), className)}
|
|
71
104
|
{...props}
|
|
72
105
|
>
|
|
73
|
-
{
|
|
106
|
+
{segmentStates.map((state, index) => (
|
|
74
107
|
<View key={index} className={cn(segmentVariants({ state }))} />
|
|
75
108
|
))}
|
|
76
109
|
</View>
|
|
@@ -79,3 +112,5 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
|
|
|
79
112
|
);
|
|
80
113
|
|
|
81
114
|
ProgressSegmented.displayName = 'ProgressSegmented';
|
|
115
|
+
|
|
116
|
+
/* eslint-enable @typescript-eslint/no-deprecated */
|