@mittwald/flow-react-components 0.2.0-alpha.370 → 0.2.0-alpha.372
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/CHANGELOG.md +10 -0
- package/dist/assets/doc-properties.json +3033 -3033
- package/dist/js/components/src/components/ProgressBar/components/ProgressBarBar.mjs +3 -2
- package/dist/js/components/src/components/ProgressBar/components/ProgressBarBar.mjs.map +1 -1
- package/dist/js/components/src/components/ProgressBar/components/ProgressBarLegend.mjs +2 -1
- package/dist/js/components/src/components/ProgressBar/components/ProgressBarLegend.mjs.map +1 -1
- package/dist/types/components/ProgressBar/components/ProgressBarBar.d.ts.map +1 -1
- package/dist/types/components/ProgressBar/components/ProgressBarLegend.d.ts.map +1 -1
- package/dist/types/components/ProgressBar/stories/EdgeCases.stories.d.ts +1 -0
- package/dist/types/components/ProgressBar/stories/EdgeCases.stories.d.ts.map +1 -1
- package/package.json +4 -4
|
@@ -7,7 +7,7 @@ import { getCategoricalColorByIndex } from '../../../lib/tokens/getCategoricalCo
|
|
|
7
7
|
|
|
8
8
|
const ProgressBarBar = (props) => {
|
|
9
9
|
const { segments, segmentsTotalValue, percentage } = props;
|
|
10
|
-
|
|
10
|
+
const segmentFill = segmentsTotalValue && segments && segments?.length > 0 ? segments.map((s, i) => /* @__PURE__ */ jsx(
|
|
11
11
|
"div",
|
|
12
12
|
{
|
|
13
13
|
"aria-hidden": true,
|
|
@@ -18,7 +18,8 @@ const ProgressBarBar = (props) => {
|
|
|
18
18
|
}
|
|
19
19
|
},
|
|
20
20
|
s.title
|
|
21
|
-
))
|
|
21
|
+
)) : null;
|
|
22
|
+
return /* @__PURE__ */ jsx("div", { className: styles.bar, children: /* @__PURE__ */ jsx("div", { className: styles.fill, style: { width: percentage + "%" }, children: segmentFill }) });
|
|
22
23
|
};
|
|
23
24
|
|
|
24
25
|
export { ProgressBarBar };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBarBar.mjs","sources":["../../../../../../../src/components/ProgressBar/components/ProgressBarBar.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport React, { type FC } from \"react\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\n\ninterface Props extends Pick<ProgressBarProps, \"segments\"> {\n percentage?: number;\n segmentsTotalValue?: number;\n}\n\nexport const ProgressBarBar: FC<Props> = (props) => {\n const { segments, segmentsTotalValue, percentage } = props;\n\n
|
|
1
|
+
{"version":3,"file":"ProgressBarBar.mjs","sources":["../../../../../../../src/components/ProgressBar/components/ProgressBarBar.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport React, { type FC } from \"react\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\n\ninterface Props extends Pick<ProgressBarProps, \"segments\"> {\n percentage?: number;\n segmentsTotalValue?: number;\n}\n\nexport const ProgressBarBar: FC<Props> = (props) => {\n const { segments, segmentsTotalValue, percentage } = props;\n\n const segmentFill =\n segmentsTotalValue && segments && segments?.length > 0\n ? segments.map((s, i) => (\n <div\n key={s.title}\n aria-hidden\n style={{\n backgroundColor: `var(--color--categorical--${s.color ?? getCategoricalColorByIndex(i)})`,\n width: (100 / segmentsTotalValue) * s.value + \"%\",\n height: \"100%\",\n }}\n />\n ))\n : null;\n\n return (\n <div className={styles.bar}>\n <div className={styles.fill} style={{ width: percentage + \"%\" }}>\n {segmentFill}\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;AAUa,MAAA,cAAA,GAA4B,CAAC,KAAU,KAAA;AAClD,EAAA,MAAM,EAAE,QAAA,EAAU,kBAAoB,EAAA,UAAA,EAAe,GAAA,KAAA;AAErD,EAAM,MAAA,WAAA,GACJ,kBAAsB,IAAA,QAAA,IAAY,QAAU,EAAA,MAAA,GAAS,IACjD,QAAS,CAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CACf,qBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAEC,aAAW,EAAA,IAAA;AAAA,MACX,KAAO,EAAA;AAAA,QACL,iBAAiB,CAA6B,0BAAA,EAAA,CAAA,CAAE,KAAS,IAAA,0BAAA,CAA2B,CAAC,CAAC,CAAA,CAAA,CAAA;AAAA,QACtF,KAAQ,EAAA,GAAA,GAAM,kBAAsB,GAAA,CAAA,CAAE,KAAQ,GAAA,GAAA;AAAA,QAC9C,MAAQ,EAAA;AAAA;AACV,KAAA;AAAA,IANK,CAAE,CAAA;AAAA,GAQV,CACD,GAAA,IAAA;AAEN,EAAA,2BACG,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,GAAA,EACrB,8BAAC,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,IAAA,EAAM,OAAO,EAAE,KAAA,EAAO,aAAa,GAAI,EAAA,EAC3D,uBACH,CACF,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBarLegend.mjs","sources":["../../../../../../../src/components/ProgressBar/components/ProgressBarLegend.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport React, { type FC } from \"react\";\nimport { useNumberFormatter } from \"react-aria\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { Legend, LegendItem } from \"@/components/Legend\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\n\ntype Props = Pick<\n ProgressBarProps,\n \"segments\" | \"showLegend\" | \"formatOptions\"\n>;\n\nexport const ProgressBarLegend: FC<Props> = (props) => {\n const { segments, showLegend, formatOptions } = props;\n\n const formatter = useNumberFormatter(formatOptions);\n\n if (!segments || !showLegend) {\n return null;\n }\n\n return (\n <Legend className={styles.legend}>\n {segments.map((s, i) => (\n <LegendItem\n color={s.color ?? getCategoricalColorByIndex(i)}\n >{`${s.title} (${s.valueText ?? (formatOptions ? formatter.format(s.value) : `${s.value} %`)})`}</LegendItem>\n ))}\n </Legend>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AAYa,MAAA,iBAAA,GAA+B,CAAC,KAAU,KAAA;AACrD,EAAA,MAAM,EAAE,QAAA,EAAU,UAAY,EAAA,aAAA,EAAkB,GAAA,KAAA;AAEhD,EAAM,MAAA,SAAA,GAAY,mBAAmB,aAAa,CAAA;AAElD,EAAI,IAAA,CAAC,QAAY,IAAA,CAAC,UAAY,EAAA;AAC5B,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,GAAA,CAAC,UAAO,SAAW,EAAA,MAAA,CAAO,QACvB,QAAS,EAAA,QAAA,CAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CAChB,qBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"ProgressBarLegend.mjs","sources":["../../../../../../../src/components/ProgressBar/components/ProgressBarLegend.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport React, { type FC } from \"react\";\nimport { useNumberFormatter } from \"react-aria\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { Legend, LegendItem } from \"@/components/Legend\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\n\ntype Props = Pick<\n ProgressBarProps,\n \"segments\" | \"showLegend\" | \"formatOptions\"\n>;\n\nexport const ProgressBarLegend: FC<Props> = (props) => {\n const { segments, showLegend, formatOptions } = props;\n\n const formatter = useNumberFormatter(formatOptions);\n\n if (!segments || !showLegend) {\n return null;\n }\n\n return (\n <Legend className={styles.legend}>\n {segments.map((s, i) => (\n <LegendItem\n key={s.title}\n color={s.color ?? getCategoricalColorByIndex(i)}\n >{`${s.title} (${s.valueText ?? (formatOptions ? formatter.format(s.value) : `${s.value} %`)})`}</LegendItem>\n ))}\n </Legend>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AAYa,MAAA,iBAAA,GAA+B,CAAC,KAAU,KAAA;AACrD,EAAA,MAAM,EAAE,QAAA,EAAU,UAAY,EAAA,aAAA,EAAkB,GAAA,KAAA;AAEhD,EAAM,MAAA,SAAA,GAAY,mBAAmB,aAAa,CAAA;AAElD,EAAI,IAAA,CAAC,QAAY,IAAA,CAAC,UAAY,EAAA;AAC5B,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,GAAA,CAAC,UAAO,SAAW,EAAA,MAAA,CAAO,QACvB,QAAS,EAAA,QAAA,CAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CAChB,qBAAA,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MAEC,KAAO,EAAA,CAAA,CAAE,KAAS,IAAA,0BAAA,CAA2B,CAAC,CAAA;AAAA,MAC9C,QAAG,EAAA,CAAA,EAAA,CAAA,CAAE,KAAK,CAAA,EAAA,EAAK,EAAE,SAAc,KAAA,aAAA,GAAgB,SAAU,CAAA,MAAA,CAAO,EAAE,KAAK,CAAA,GAAI,CAAG,EAAA,CAAA,CAAE,KAAK,CAAK,EAAA,CAAA,CAAA,CAAA,CAAA;AAAA,KAAA;AAAA,IAFrF,CAAE,CAAA;AAAA,GAGV,CACH,EAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBarBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/components/ProgressBarBar.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAGjE,UAAU,KAAM,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IACxD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"ProgressBarBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/components/ProgressBarBar.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAGjE,UAAU,KAAM,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IACxD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,KAAK,CAyBpC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBarLegend.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/components/ProgressBarLegend.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAIjE,KAAK,KAAK,GAAG,IAAI,CACf,gBAAgB,EAChB,UAAU,GAAG,YAAY,GAAG,eAAe,CAC5C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"ProgressBarLegend.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/components/ProgressBarLegend.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAIjE,KAAK,KAAK,GAAG,IAAI,CACf,gBAAgB,EAChB,UAAU,GAAG,YAAY,GAAG,eAAe,CAC5C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,KAAK,CAmBvC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EdgeCases.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/stories/EdgeCases.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAMzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAGlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAqB9B,CAAC"}
|
|
1
|
+
{"version":3,"file":"EdgeCases.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/ProgressBar/stories/EdgeCases.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAMzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAGlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,QAAQ,EAAE,KAatB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAqB9B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAYnC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "0.2.0-alpha.
|
|
3
|
+
"version": "0.2.0-alpha.372",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"@chakra-ui/live-region": "^2.1.0",
|
|
59
59
|
"@internationalized/string-compiler": "^3.2.6",
|
|
60
60
|
"@mittwald/password-tools-js": "^2.1.6",
|
|
61
|
-
"@mittwald/react-tunnel": "0.2.0-alpha.
|
|
61
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.372",
|
|
62
62
|
"@mittwald/react-use-promise": "^3.0.4",
|
|
63
63
|
"@react-aria/form": "^3.1.0",
|
|
64
64
|
"@react-aria/utils": "^3.30.0",
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
"@faker-js/faker": "^9.9.0",
|
|
100
100
|
"@internationalized/date": "^3.8.2",
|
|
101
101
|
"@mittwald/flow-core": "",
|
|
102
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
102
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.372",
|
|
103
103
|
"@mittwald/react-use-promise": "^3.0.4",
|
|
104
104
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.3",
|
|
105
105
|
"@mittwald/typescript-config": "",
|
|
@@ -172,5 +172,5 @@
|
|
|
172
172
|
"optional": true
|
|
173
173
|
}
|
|
174
174
|
},
|
|
175
|
-
"gitHead": "
|
|
175
|
+
"gitHead": "0d600fd5159e59ffb7572b65f598a8846db5e666"
|
|
176
176
|
}
|