@redocly/theme 0.30.2 → 0.30.3-beta.1
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/components/Catalog/useCatalog.js +4 -3
- package/lib/components/Filter/Filter.js +1 -5
- package/lib/components/LastUpdated/LastUpdated.js +2 -1
- package/lib/components/Scorecard/Card.d.ts +3 -1
- package/lib/components/Scorecard/Card.js +4 -2
- package/lib/components/Scorecard/Gauge.d.ts +5 -2
- package/lib/components/Scorecard/Gauge.js +6 -2
- package/lib/components/Scorecard/StatusByLevelWidget.d.ts +1 -0
- package/lib/components/Scorecard/StatusByLevelWidget.js +5 -2
- package/lib/components/Sidebar/styledVariables.js +1 -1
- package/lib/config.d.ts +8 -12
- package/lib/config.js +3 -8
- package/package.json +18 -18
- package/src/components/Catalog/useCatalog.ts +6 -3
- package/src/components/Filter/Filter.tsx +1 -6
- package/src/components/LastUpdated/LastUpdated.tsx +4 -2
- package/src/components/Scorecard/Card.tsx +4 -2
- package/src/components/Scorecard/Gauge.tsx +16 -7
- package/src/components/Scorecard/StatusByLevelWidget.tsx +6 -2
- package/src/components/Sidebar/styledVariables.ts +1 -1
- package/src/config.ts +3 -8
|
@@ -256,9 +256,10 @@ function collectFilterOptions(items, filters) {
|
|
|
256
256
|
}
|
|
257
257
|
}
|
|
258
258
|
}
|
|
259
|
-
const options = Object.entries(usedOptions)
|
|
260
|
-
|
|
261
|
-
.sort((a, b) => b.value.localeCompare(a.value));
|
|
259
|
+
const options = Object.entries(usedOptions).map(([value, count]) => ({ value, count }));
|
|
260
|
+
if (!staticOptions) {
|
|
261
|
+
options.sort((a, b) => b.value.localeCompare(a.value));
|
|
262
|
+
}
|
|
262
263
|
if (othersCount) {
|
|
263
264
|
options.push({
|
|
264
265
|
value: filter.missingCategoryNameTranslationKey || filter.missingCategoryName || 'Others',
|
|
@@ -52,7 +52,7 @@ function Filter({ filter, filterValuesCasing, }) {
|
|
|
52
52
|
return;
|
|
53
53
|
filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { to: formatDateWithNoTimeZone(to) }));
|
|
54
54
|
} })))) : (filter.filteredOptions.map((value) => {
|
|
55
|
-
const id = 'filter--' + filter.property + '--' +
|
|
55
|
+
const id = 'filter--' + filter.property + '--' + value.value;
|
|
56
56
|
return (react_1.default.createElement(FilterOption, { key: id, role: "link", onClick: () => filter.toggleOption(value.value) },
|
|
57
57
|
react_1.default.createElement(icons_1.CheckboxIcon, { checked: filter.selectedOptions.has(value.value) }),
|
|
58
58
|
react_1.default.createElement(FilterOptionLabel, null, changeCasing(translate(value.value), filterValuesCasing)),
|
|
@@ -133,10 +133,6 @@ const StyledSelect = (0, styled_components_1.default)(Select_1.Select) `
|
|
|
133
133
|
margin: var(--filter-select-option-margin);
|
|
134
134
|
}
|
|
135
135
|
`;
|
|
136
|
-
// TODO: import from portal
|
|
137
|
-
function slug(str) {
|
|
138
|
-
return str.replace(/\s/g, '-').toLowerCase();
|
|
139
|
-
}
|
|
140
136
|
const DatePickerWrapper = styled_components_1.default.div `
|
|
141
137
|
color: var(--filter-date-picker-color);
|
|
142
138
|
display: flex;
|
|
@@ -41,12 +41,13 @@ const FORMATS = {
|
|
|
41
41
|
function LastUpdated(props) {
|
|
42
42
|
const { markdown: { lastUpdatedBlock = {} } = {} } = (0, useThemeConfig_1.useThemeConfig)();
|
|
43
43
|
const { translate } = (0, hooks_1.useTranslate)();
|
|
44
|
+
const { currentLocale } = (0, hooks_1.useI18nConfig)();
|
|
44
45
|
if (lastUpdatedBlock === null || lastUpdatedBlock === void 0 ? void 0 : lastUpdatedBlock.hide) {
|
|
45
46
|
return null;
|
|
46
47
|
}
|
|
47
48
|
const lastModified = props.lastModified;
|
|
48
49
|
const format = props.format || lastUpdatedBlock.format || 'timeago';
|
|
49
|
-
const locale = props.locale || lastUpdatedBlock.locale || 'en-US';
|
|
50
|
+
const locale = props.locale || lastUpdatedBlock.locale || currentLocale || 'en-US';
|
|
50
51
|
const isoDate = lastModified.toISOString().split('T')[0];
|
|
51
52
|
const lastUpdatedString = FORMATS[format](lastModified, locale);
|
|
52
53
|
const translationKey = format === 'timeago' ? 'theme.page.lastUpdated.timeago' : 'theme.page.lastUpdated.on';
|
|
@@ -1,2 +1,4 @@
|
|
|
1
|
-
export declare const ScorecardCard: import("styled-components").StyledComponent<"div", any, {
|
|
1
|
+
export declare const ScorecardCard: import("styled-components").StyledComponent<"div", any, {
|
|
2
|
+
'data-component-name': string;
|
|
3
|
+
}, "data-component-name">;
|
|
2
4
|
export declare const ScorecardCardTitle: import("styled-components").StyledComponent<"h3", any, {}, never>;
|
|
@@ -5,9 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.ScorecardCardTitle = exports.ScorecardCard = void 0;
|
|
7
7
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
8
|
-
exports.ScorecardCard = styled_components_1.default.div
|
|
8
|
+
exports.ScorecardCard = styled_components_1.default.div.attrs({
|
|
9
|
+
'data-component-name': 'Scorecard/ScorecardCard',
|
|
10
|
+
}) `
|
|
9
11
|
color: var(--text-primary);
|
|
10
|
-
background-color: var(--
|
|
12
|
+
background-color: var(--bg-raised);
|
|
11
13
|
border-radius: 4px;
|
|
12
14
|
|
|
13
15
|
border: 1px solid var(--border-primary);
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export
|
|
2
|
+
export interface GaugeProps {
|
|
3
3
|
chunks: {
|
|
4
4
|
share: number;
|
|
5
5
|
color: string;
|
|
6
|
+
title?: string;
|
|
6
7
|
}[];
|
|
7
|
-
|
|
8
|
+
className?: string;
|
|
9
|
+
}
|
|
10
|
+
export declare function Gauge({ chunks, className }: GaugeProps): JSX.Element;
|
|
8
11
|
export declare const GaugeValue: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
@@ -29,8 +29,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
29
29
|
exports.GaugeValue = exports.Gauge = void 0;
|
|
30
30
|
const React = __importStar(require("react"));
|
|
31
31
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
32
|
-
function Gauge({ chunks, }) {
|
|
33
|
-
|
|
32
|
+
function Gauge({ chunks, className }) {
|
|
33
|
+
const title = chunks
|
|
34
|
+
.map((chunk) => chunk.title)
|
|
35
|
+
.filter(Boolean)
|
|
36
|
+
.join(', ');
|
|
37
|
+
return (React.createElement(GaugeWrapper, { "data-component-name": "Scorecard/StatusByLevelWidget", className: className, title: title }, chunks.map((chunk, i) => (React.createElement(GaugeChunk, { key: i, share: chunk.share, color: chunk.color })))));
|
|
34
38
|
}
|
|
35
39
|
exports.Gauge = Gauge;
|
|
36
40
|
exports.GaugeValue = styled_components_1.default.span `
|
|
@@ -32,8 +32,8 @@ const styled_components_1 = __importDefault(require("styled-components"));
|
|
|
32
32
|
const Gauge_1 = require("../../components/Scorecard/Gauge");
|
|
33
33
|
const Card_1 = require("../../components/Scorecard/Card");
|
|
34
34
|
function StatusByLevelWidget(props) {
|
|
35
|
-
const { levels, title } = props;
|
|
36
|
-
return (React.createElement(Card_1.ScorecardCard,
|
|
35
|
+
const { levels, title, className } = props;
|
|
36
|
+
return (React.createElement(Card_1.ScorecardCard, { "data-component-name": "Scorecard/StatusByLevelWidget", className: className },
|
|
37
37
|
React.createElement(Card_1.ScorecardCardTitle, null, title),
|
|
38
38
|
React.createElement(CardBody, null, levels.map((level) => {
|
|
39
39
|
const success = level.total - level.errors - level.warnings;
|
|
@@ -43,14 +43,17 @@ function StatusByLevelWidget(props) {
|
|
|
43
43
|
{
|
|
44
44
|
share: (success / level.total) * 100,
|
|
45
45
|
color: 'var(--scorecard-color-success)',
|
|
46
|
+
title: `${success} passed`,
|
|
46
47
|
},
|
|
47
48
|
{
|
|
48
49
|
share: (level.warnings / level.total) * 100,
|
|
49
50
|
color: 'var(--scorecard-color-warning)',
|
|
51
|
+
title: `${level.warnings} ${level.warnings === 1 ? 'warning' : 'warnings'}`,
|
|
50
52
|
},
|
|
51
53
|
{
|
|
52
54
|
share: (level.errors / level.total) * 100,
|
|
53
55
|
color: 'var(--scorecard-color-error)',
|
|
56
|
+
title: `${level.errors} ${level.errors === 1 ? 'error' : 'errors'}`,
|
|
54
57
|
},
|
|
55
58
|
] }),
|
|
56
59
|
React.createElement(Gauge_1.GaugeValue, null,
|
package/lib/config.d.ts
CHANGED
|
@@ -24,7 +24,6 @@ declare const markdownConfigSchema: {
|
|
|
24
24
|
};
|
|
25
25
|
readonly locale: {
|
|
26
26
|
readonly type: "string";
|
|
27
|
-
readonly default: "en-US";
|
|
28
27
|
};
|
|
29
28
|
};
|
|
30
29
|
readonly additionalProperties: false;
|
|
@@ -280,7 +279,7 @@ declare const catalogFilterSchema: {
|
|
|
280
279
|
declare const scorecardConfigSchema: {
|
|
281
280
|
readonly type: "object";
|
|
282
281
|
readonly additionalProperties: true;
|
|
283
|
-
readonly required: readonly [
|
|
282
|
+
readonly required: readonly [];
|
|
284
283
|
readonly properties: {
|
|
285
284
|
readonly ignoreNonCompliant: {
|
|
286
285
|
readonly type: "boolean";
|
|
@@ -309,6 +308,9 @@ declare const scorecardConfigSchema: {
|
|
|
309
308
|
readonly name: {
|
|
310
309
|
readonly type: "string";
|
|
311
310
|
};
|
|
311
|
+
readonly color: {
|
|
312
|
+
readonly type: "string";
|
|
313
|
+
};
|
|
312
314
|
readonly extends: {
|
|
313
315
|
readonly type: "array";
|
|
314
316
|
readonly items: {
|
|
@@ -871,14 +873,6 @@ export declare const themeConfigSchema: {
|
|
|
871
873
|
};
|
|
872
874
|
readonly additionalProperties: false;
|
|
873
875
|
};
|
|
874
|
-
readonly seo: {
|
|
875
|
-
readonly type: "object";
|
|
876
|
-
readonly properties: {
|
|
877
|
-
readonly title: {
|
|
878
|
-
readonly type: "string";
|
|
879
|
-
};
|
|
880
|
-
};
|
|
881
|
-
};
|
|
882
876
|
readonly scripts: {
|
|
883
877
|
readonly type: "object";
|
|
884
878
|
readonly properties: {
|
|
@@ -1315,7 +1309,6 @@ export declare const themeConfigSchema: {
|
|
|
1315
1309
|
};
|
|
1316
1310
|
readonly locale: {
|
|
1317
1311
|
readonly type: "string";
|
|
1318
|
-
readonly default: "en-US";
|
|
1319
1312
|
};
|
|
1320
1313
|
};
|
|
1321
1314
|
readonly additionalProperties: false;
|
|
@@ -1849,7 +1842,7 @@ export declare const themeConfigSchema: {
|
|
|
1849
1842
|
readonly scorecard: {
|
|
1850
1843
|
readonly type: "object";
|
|
1851
1844
|
readonly additionalProperties: true;
|
|
1852
|
-
readonly required: readonly [
|
|
1845
|
+
readonly required: readonly [];
|
|
1853
1846
|
readonly properties: {
|
|
1854
1847
|
readonly ignoreNonCompliant: {
|
|
1855
1848
|
readonly type: "boolean";
|
|
@@ -1878,6 +1871,9 @@ export declare const themeConfigSchema: {
|
|
|
1878
1871
|
readonly name: {
|
|
1879
1872
|
readonly type: "string";
|
|
1880
1873
|
};
|
|
1874
|
+
readonly color: {
|
|
1875
|
+
readonly type: "string";
|
|
1876
|
+
};
|
|
1881
1877
|
readonly extends: {
|
|
1882
1878
|
readonly type: "array";
|
|
1883
1879
|
readonly items: {
|
package/lib/config.js
CHANGED
|
@@ -73,7 +73,7 @@ const markdownConfigSchema = {
|
|
|
73
73
|
type: 'string',
|
|
74
74
|
enum: ['timeago', 'iso', 'long', 'short'],
|
|
75
75
|
default: 'timeago',
|
|
76
|
-
}, locale: { type: 'string'
|
|
76
|
+
}, locale: { type: 'string' } }, hideConfigSchema.properties),
|
|
77
77
|
additionalProperties: false,
|
|
78
78
|
default: {},
|
|
79
79
|
},
|
|
@@ -262,7 +262,7 @@ const catalogFilterSchema = {
|
|
|
262
262
|
const scorecardConfigSchema = {
|
|
263
263
|
type: 'object',
|
|
264
264
|
additionalProperties: true,
|
|
265
|
-
required: [
|
|
265
|
+
required: [],
|
|
266
266
|
properties: {
|
|
267
267
|
ignoreNonCompliant: { type: 'boolean', default: false },
|
|
268
268
|
teamMetadataProperty: {
|
|
@@ -280,6 +280,7 @@ const scorecardConfigSchema = {
|
|
|
280
280
|
required: ['name'],
|
|
281
281
|
properties: {
|
|
282
282
|
name: { type: 'string' },
|
|
283
|
+
color: { type: 'string' },
|
|
283
284
|
extends: { type: 'array', items: { type: 'string' } },
|
|
284
285
|
rules: {
|
|
285
286
|
type: 'object',
|
|
@@ -371,12 +372,6 @@ exports.themeConfigSchema = {
|
|
|
371
372
|
} }, hideConfigSchema.properties),
|
|
372
373
|
additionalProperties: false,
|
|
373
374
|
},
|
|
374
|
-
seo: {
|
|
375
|
-
type: 'object',
|
|
376
|
-
properties: {
|
|
377
|
-
title: { type: 'string' },
|
|
378
|
-
},
|
|
379
|
-
},
|
|
380
375
|
scripts: {
|
|
381
376
|
type: 'object',
|
|
382
377
|
properties: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@redocly/theme",
|
|
3
|
-
"version": "0.30.
|
|
3
|
+
"version": "0.30.3-beta.1",
|
|
4
4
|
"description": "Shared UI components lib",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"theme",
|
|
@@ -28,19 +28,18 @@
|
|
|
28
28
|
"styled-system": "^5.1.5"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
|
-
"@storybook/addon-actions": "^
|
|
32
|
-
"@storybook/addon-essentials": "^
|
|
33
|
-
"@storybook/addon-interactions": "^
|
|
34
|
-
"@storybook/addon-links": "^
|
|
35
|
-
"@storybook/addon-viewport": "^
|
|
36
|
-
"@storybook/addons": "^
|
|
37
|
-
"@storybook/
|
|
38
|
-
"@storybook/
|
|
39
|
-
"@storybook/
|
|
40
|
-
"@storybook/
|
|
41
|
-
"@storybook/
|
|
42
|
-
"@storybook/
|
|
43
|
-
"@storybook/theming": "^6.5.9",
|
|
31
|
+
"@storybook/addon-actions": "^7.4.6",
|
|
32
|
+
"@storybook/addon-essentials": "^7.4.6",
|
|
33
|
+
"@storybook/addon-interactions": "^7.4.6",
|
|
34
|
+
"@storybook/addon-links": "^7.4.6",
|
|
35
|
+
"@storybook/addon-viewport": "^7.4.6",
|
|
36
|
+
"@storybook/addons": "^7.4.6",
|
|
37
|
+
"@storybook/core-common": "^7.4.6",
|
|
38
|
+
"@storybook/node-logger": "^7.4.6",
|
|
39
|
+
"@storybook/react": "^7.4.6",
|
|
40
|
+
"@storybook/react-webpack5": "^7.4.6",
|
|
41
|
+
"@storybook/testing-library": "^0.2.2",
|
|
42
|
+
"@storybook/theming": "^7.4.6",
|
|
44
43
|
"@testing-library/jest-dom": "^5.16.5",
|
|
45
44
|
"@testing-library/react": "^12.1.4",
|
|
46
45
|
"@testing-library/react-hooks": "^8.0.1",
|
|
@@ -69,8 +68,9 @@
|
|
|
69
68
|
"npm-run-all": "^4.1.5",
|
|
70
69
|
"react-refresh": "^0.14.0",
|
|
71
70
|
"react-router-dom": "^6.10.0",
|
|
72
|
-
"storybook
|
|
73
|
-
"storybook-
|
|
71
|
+
"storybook": "^7.4.6",
|
|
72
|
+
"storybook-addon-pseudo-states": "^2.1.2",
|
|
73
|
+
"storybook-design-token": "3.0.0-beta.6",
|
|
74
74
|
"styled-components": "^5.3.7",
|
|
75
75
|
"styled-system": "^5.1.5",
|
|
76
76
|
"ts-jest": "^29.0.3",
|
|
@@ -105,8 +105,8 @@
|
|
|
105
105
|
"test:coverage": "jest --coverage",
|
|
106
106
|
"test:coverage:html": "jest --coverage --coverageReporters html",
|
|
107
107
|
"e2e": "npx chromatic -b storybook:build --auto-accept-changes main --exit-once-uploaded",
|
|
108
|
-
"storybook": "
|
|
109
|
-
"storybook:build": "npm run storybook:tokens && build
|
|
108
|
+
"storybook": "storybook dev -p 6006",
|
|
109
|
+
"storybook:build": "npm run storybook:tokens && storybook build",
|
|
110
110
|
"storybook:tokens": "ts-node scripts/generate-css-tokens.ts",
|
|
111
111
|
"storybook:tokens:watch": "ts-node-dev --respawn scripts/generate-css-tokens.ts",
|
|
112
112
|
"chromatic": "chromatic --exit-zero-on-changes"
|
|
@@ -299,9 +299,12 @@ function collectFilterOptions(
|
|
|
299
299
|
}
|
|
300
300
|
}
|
|
301
301
|
|
|
302
|
-
const options = Object.entries(usedOptions)
|
|
303
|
-
|
|
304
|
-
|
|
302
|
+
const options = Object.entries(usedOptions).map(([value, count]) => ({ value, count }));
|
|
303
|
+
|
|
304
|
+
if (!staticOptions) {
|
|
305
|
+
options.sort((a, b) => b.value.localeCompare(a.value));
|
|
306
|
+
}
|
|
307
|
+
|
|
305
308
|
if (othersCount) {
|
|
306
309
|
options.push({
|
|
307
310
|
value: filter.missingCategoryNameTranslationKey || filter.missingCategoryName || 'Others',
|
|
@@ -109,7 +109,7 @@ export function Filter({
|
|
|
109
109
|
</>
|
|
110
110
|
) : (
|
|
111
111
|
filter.filteredOptions.map((value: any) => {
|
|
112
|
-
const id = 'filter--' + filter.property + '--' +
|
|
112
|
+
const id = 'filter--' + filter.property + '--' + value.value;
|
|
113
113
|
return (
|
|
114
114
|
<FilterOption key={id} role="link" onClick={() => filter.toggleOption(value.value)}>
|
|
115
115
|
<CheckboxIcon checked={filter.selectedOptions.has(value.value)} />
|
|
@@ -210,11 +210,6 @@ const StyledSelect = styled(Select)`
|
|
|
210
210
|
}
|
|
211
211
|
`;
|
|
212
212
|
|
|
213
|
-
// TODO: import from portal
|
|
214
|
-
function slug(str: string): string {
|
|
215
|
-
return str.replace(/\s/g, '-').toLowerCase();
|
|
216
|
-
}
|
|
217
|
-
|
|
218
213
|
const DatePickerWrapper = styled.div`
|
|
219
214
|
color: var(--filter-date-picker-color);
|
|
220
215
|
display: flex;
|
|
@@ -3,7 +3,7 @@ import styled from 'styled-components';
|
|
|
3
3
|
import { format } from 'timeago.js';
|
|
4
4
|
|
|
5
5
|
import { useThemeConfig } from '@theme/hooks/useThemeConfig';
|
|
6
|
-
import { useTranslate } from '@portal/hooks';
|
|
6
|
+
import { useI18nConfig, useTranslate } from '@portal/hooks';
|
|
7
7
|
|
|
8
8
|
const FORMATS = {
|
|
9
9
|
timeago: (date: Date, locale: string) => format(date, locale),
|
|
@@ -24,6 +24,7 @@ export interface LastUpdatedProps {
|
|
|
24
24
|
export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
|
|
25
25
|
const { markdown: { lastUpdatedBlock = {} } = {} } = useThemeConfig();
|
|
26
26
|
const { translate } = useTranslate();
|
|
27
|
+
const { currentLocale } = useI18nConfig();
|
|
27
28
|
|
|
28
29
|
if (lastUpdatedBlock?.hide) {
|
|
29
30
|
return null;
|
|
@@ -31,7 +32,8 @@ export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
|
|
|
31
32
|
|
|
32
33
|
const lastModified = props.lastModified;
|
|
33
34
|
const format = props.format || lastUpdatedBlock.format || 'timeago';
|
|
34
|
-
const locale = props.locale || lastUpdatedBlock.locale || 'en-US';
|
|
35
|
+
const locale = props.locale || lastUpdatedBlock.locale || currentLocale || 'en-US';
|
|
36
|
+
|
|
35
37
|
const isoDate = lastModified.toISOString().split('T')[0];
|
|
36
38
|
|
|
37
39
|
const lastUpdatedString = FORMATS[format as keyof typeof FORMATS](lastModified, locale);
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
2
|
|
|
3
|
-
export const ScorecardCard = styled.div
|
|
3
|
+
export const ScorecardCard = styled.div.attrs({
|
|
4
|
+
'data-component-name': 'Scorecard/ScorecardCard',
|
|
5
|
+
})`
|
|
4
6
|
color: var(--text-primary);
|
|
5
|
-
background-color: var(--
|
|
7
|
+
background-color: var(--bg-raised);
|
|
6
8
|
border-radius: 4px;
|
|
7
9
|
|
|
8
10
|
border: 1px solid var(--border-primary);
|
|
@@ -1,18 +1,27 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
|
-
|
|
4
|
-
export function Gauge({
|
|
5
|
-
chunks,
|
|
6
|
-
}: {
|
|
3
|
+
export interface GaugeProps {
|
|
7
4
|
chunks: {
|
|
8
5
|
share: number;
|
|
9
6
|
color: string;
|
|
7
|
+
title?: string;
|
|
10
8
|
}[];
|
|
11
|
-
|
|
9
|
+
className?: string;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export function Gauge({ chunks, className }: GaugeProps) {
|
|
13
|
+
const title = chunks
|
|
14
|
+
.map((chunk) => chunk.title)
|
|
15
|
+
.filter(Boolean)
|
|
16
|
+
.join(', ');
|
|
12
17
|
return (
|
|
13
|
-
<GaugeWrapper
|
|
18
|
+
<GaugeWrapper
|
|
19
|
+
data-component-name="Scorecard/StatusByLevelWidget"
|
|
20
|
+
className={className}
|
|
21
|
+
title={title}
|
|
22
|
+
>
|
|
14
23
|
{chunks.map((chunk, i) => (
|
|
15
|
-
<GaugeChunk key={i} {
|
|
24
|
+
<GaugeChunk key={i} share={chunk.share} color={chunk.color} />
|
|
16
25
|
))}
|
|
17
26
|
</GaugeWrapper>
|
|
18
27
|
);
|
|
@@ -7,12 +7,13 @@ import { ScorecardCard, ScorecardCardTitle } from '@theme/components/Scorecard/C
|
|
|
7
7
|
export interface StatusByLevelWidgetProps {
|
|
8
8
|
title: string;
|
|
9
9
|
levels: { name: string; errors: number; warnings: number; total: number }[];
|
|
10
|
+
className?: string;
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
export function StatusByLevelWidget(props: StatusByLevelWidgetProps) {
|
|
13
|
-
const { levels, title } = props;
|
|
14
|
+
const { levels, title, className } = props;
|
|
14
15
|
return (
|
|
15
|
-
<ScorecardCard>
|
|
16
|
+
<ScorecardCard data-component-name="Scorecard/StatusByLevelWidget" className={className}>
|
|
16
17
|
<ScorecardCardTitle>{title}</ScorecardCardTitle>
|
|
17
18
|
<CardBody>
|
|
18
19
|
{levels.map((level) => {
|
|
@@ -25,14 +26,17 @@ export function StatusByLevelWidget(props: StatusByLevelWidgetProps) {
|
|
|
25
26
|
{
|
|
26
27
|
share: (success / level.total) * 100,
|
|
27
28
|
color: 'var(--scorecard-color-success)',
|
|
29
|
+
title: `${success} passed`,
|
|
28
30
|
},
|
|
29
31
|
{
|
|
30
32
|
share: (level.warnings / level.total) * 100,
|
|
31
33
|
color: 'var(--scorecard-color-warning)',
|
|
34
|
+
title: `${level.warnings} ${level.warnings === 1 ? 'warning' : 'warnings'}`,
|
|
32
35
|
},
|
|
33
36
|
{
|
|
34
37
|
share: (level.errors / level.total) * 100,
|
|
35
38
|
color: 'var(--scorecard-color-error)',
|
|
39
|
+
title: `${level.errors} ${level.errors === 1 ? 'error' : 'errors'}`,
|
|
36
40
|
},
|
|
37
41
|
]}
|
|
38
42
|
/>
|
package/src/config.ts
CHANGED
|
@@ -80,7 +80,7 @@ const markdownConfigSchema = {
|
|
|
80
80
|
enum: ['timeago', 'iso', 'long', 'short'],
|
|
81
81
|
default: 'timeago',
|
|
82
82
|
},
|
|
83
|
-
locale: { type: 'string'
|
|
83
|
+
locale: { type: 'string' },
|
|
84
84
|
...hideConfigSchema.properties,
|
|
85
85
|
},
|
|
86
86
|
additionalProperties: false,
|
|
@@ -301,7 +301,7 @@ const catalogFilterSchema = {
|
|
|
301
301
|
const scorecardConfigSchema = {
|
|
302
302
|
type: 'object',
|
|
303
303
|
additionalProperties: true,
|
|
304
|
-
required: [
|
|
304
|
+
required: [],
|
|
305
305
|
properties: {
|
|
306
306
|
ignoreNonCompliant: { type: 'boolean', default: false },
|
|
307
307
|
teamMetadataProperty: {
|
|
@@ -319,6 +319,7 @@ const scorecardConfigSchema = {
|
|
|
319
319
|
required: ['name'],
|
|
320
320
|
properties: {
|
|
321
321
|
name: { type: 'string' },
|
|
322
|
+
color: { type: 'string' },
|
|
322
323
|
extends: { type: 'array', items: { type: 'string' } },
|
|
323
324
|
rules: {
|
|
324
325
|
type: 'object',
|
|
@@ -425,12 +426,6 @@ export const themeConfigSchema = {
|
|
|
425
426
|
},
|
|
426
427
|
additionalProperties: false,
|
|
427
428
|
},
|
|
428
|
-
seo: {
|
|
429
|
-
type: 'object',
|
|
430
|
-
properties: {
|
|
431
|
-
title: { type: 'string' },
|
|
432
|
-
},
|
|
433
|
-
},
|
|
434
429
|
scripts: {
|
|
435
430
|
type: 'object',
|
|
436
431
|
properties: {
|