forked from storybookjs/storybook
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Rules.tsx
99 lines (89 loc) 路 2.26 KB
/
Rules.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import type { FC } from 'react';
import React from 'react';
import { styled } from '@storybook/theming';
import { Badge } from '@storybook/components';
import type { CheckResult } from 'axe-core';
import { useResizeDetector } from 'react-resize-detector';
const List = styled.div({
display: 'flex',
flexDirection: 'column',
paddingBottom: 4,
paddingRight: 4,
paddingTop: 4,
fontWeight: 400,
});
const Item = styled.div<{ elementWidth: number }>(({ elementWidth }) => {
const maxWidthBeforeBreak = 407;
return {
flexDirection: elementWidth > maxWidthBeforeBreak ? 'row' : 'inherit',
marginBottom: elementWidth > maxWidthBeforeBreak ? 6 : 12,
display: elementWidth > maxWidthBeforeBreak ? 'flex' : 'block',
};
});
const StyledBadge = styled(Badge)({
padding: '2px 8px',
marginBottom: 3,
minWidth: 65,
maxWidth: 'fit-content',
width: '100%',
textAlign: 'center',
});
const Message = styled.div({
paddingLeft: 6,
paddingRight: 23,
});
export enum ImpactValue {
MINOR = 'minor',
MODERATE = 'moderate',
SERIOUS = 'serious',
CRITICAL = 'critical',
}
interface RuleProps {
rule: CheckResult;
}
const formatSeverityText = (severity: string) => {
return severity.charAt(0).toUpperCase().concat(severity.slice(1));
};
const Rule: FC<RuleProps> = ({ rule }) => {
const { ref, width } = useResizeDetector({
refreshMode: 'debounce',
handleHeight: false,
handleWidth: true,
});
let badgeType: any = null;
switch (rule.impact) {
case ImpactValue.CRITICAL:
badgeType = 'critical';
break;
case ImpactValue.SERIOUS:
badgeType = 'negative';
break;
case ImpactValue.MODERATE:
badgeType = 'warning';
break;
case ImpactValue.MINOR:
badgeType = 'neutral';
break;
default:
break;
}
return (
<Item ref={ref} elementWidth={width || 0}>
<StyledBadge status={badgeType}>{formatSeverityText(rule.impact)}</StyledBadge>
<Message>{rule.message}</Message>
</Item>
);
};
interface RulesProps {
rules: CheckResult[];
}
export const Rules: FC<RulesProps> = ({ rules }) => {
return (
<List>
{rules.map((rule, index) => (
// eslint-disable-next-line react/no-array-index-key
<Rule rule={rule} key={index} />
))}
</List>
);
};