UNPKG

@wix/design-system

Version:

@wix/design-system

www.wixdesignsystem.com

98 lines (95 loc) • 2.65 kB
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
### dataHook - type: string - description: Applied as data-hook HTML attribute that can be used in the tests ### className - type: string - description: Specifies a CSS class name to be appended to the component’s root element. - internal ### title - type: string - description: Text for the title ### titleTooltip - type: string - description: Text for title tooltip ### value - type: string - description: Text value ### valueTooltip - type: string - description: Text for value tooltip ### trend - type: number - description: A number to be displayed as the trend, a positive number will be green with an arrow facing up and a negative number will be red with an arrow facing down ### invertedTrend - type: boolean - description: Invert color and arrow direction of Trend. ### isTrendVisible - type: boolean - description: Show/Hide trend - default: false ### isLoading - type: boolean - description: Whether component is loading - default: false ### ctaButton - type: ReactNode - description: CTA button React Node - default: null ### onCTAClick - type: (event: MouseEvent<HTMLDivElement, MouseEvent>) => void - description: Fires when CTA button is clicked ### alwaysShowCTA - type: boolean - description: Always show CTA button - default: false ### onClick - type: (event: MouseEvent<HTMLDivElement, MouseEvent>) => void - description: Card would be clickable ### onChartHover - type: (index: number) => void - description: Fires when chart is hovered - default: noop ### chartHighlightedStartingIndex - type: number - description: Indicates the starting index of the highlighted area of the chart ### chartWidth - type: number - description: Chart width - default: 69 ### chartData - type: { label: Date; value: number; }[] - description: Chart data ### getChartTooltipContent - type: (index: number) => ReactNode - description: Chart tooltip content ### chartColorHex - type: string - description: Sets the color of the chart ### chartAnimationDuration - type: number - description: Chart animation duration - default: 300 ### footer - type: ReactNode - description: Footer - node - default: null ### border - type: boolean - description: Adds a border and corner radius - default: false ### horizontalPadding - type: "small" | "medium" | "large" - description: Controls spacing size from left and right sides - default: large ### disabled - type: boolean - description: No description ### onFocus - type: (event: FocusEvent, triggers: Triggers) => void - description: No description ### onBlur - type: (event: FocusEvent, triggers: Triggers) => void - description: No description ### ref - type: RefObject - description: No description