@@ -12,6 +12,7 @@ import {
12
12
faExclamationTriangle ,
13
13
faCalendarPlus ,
14
14
faCalendarMinus ,
15
+ faChartLine ,
15
16
} from '@fortawesome/free-solid-svg-icons' ;
16
17
import { Tooltip } from 'components/Tooltip' ;
17
18
import css from './Story.scss' ;
@@ -33,6 +34,7 @@ export type Actions = {
33
34
add_to_google_cal ?: Action ,
34
35
remove_from_google_cal ?: Action ,
35
36
viewers ?: string ,
37
+ visible ?: string ,
36
38
} ;
37
39
38
40
export type Props = {
@@ -47,6 +49,7 @@ const JOIN = 'join';
47
49
const LEAVE = 'leave' ;
48
50
const REPORT = 'report' ;
49
51
const VIEWERS = 'viewers' ;
52
+ const VISIBLE = 'visible' ;
50
53
const ADD_TO_G_CAL = 'add_to_google_cal' ;
51
54
const REMOVE_FROM_G_CAL = 'remove_from_google_cal' ;
52
55
@@ -68,6 +71,14 @@ const classMap = (dark: ?boolean) => {
68
71
aria-label = { I18n . t ( 'shared.viewers.plural' ) }
69
72
/>
70
73
) ,
74
+ visible : (
75
+ < FontAwesomeIcon
76
+ icon = { faChartLine }
77
+ className = { className }
78
+ tabIndex = { 0 }
79
+ aria-label = { I18n . t ( 'shared.stats.visible_in_stats' ) }
80
+ />
81
+ ) ,
71
82
add_to_google_cal : (
72
83
< FontAwesomeIcon icon = { faCalendarPlus } className = { className } />
73
84
) ,
@@ -77,21 +88,23 @@ const classMap = (dark: ?boolean) => {
77
88
} ;
78
89
} ;
79
90
80
- const displayViewers = (
91
+ const displayNonLink = (
81
92
actions : Actions ,
82
93
item : string ,
83
94
hasStory : ?boolean ,
84
95
dark : ?boolean ,
85
- ) => (
86
- < div key = { item } className = "storyActionsViewers" >
87
- < Tooltip
88
- className = "storyActionsViewer"
89
- element = { classMap ( dark ) [ item ] }
90
- text = { actions [ item ] }
91
- right = { ! ! hasStory }
92
- />
93
- </ div >
94
- ) ;
96
+ ) => {
97
+ const capitalizeItem = item . charAt ( 0 ) . toUpperCase ( ) + item . slice ( 1 ) ;
98
+ return (
99
+ < div key = { item } className = { `storyActions${ capitalizeItem } ` } >
100
+ < Tooltip
101
+ element = { classMap ( dark ) [ item ] }
102
+ text = { actions [ item ] }
103
+ right = { ! ! hasStory }
104
+ />
105
+ </ div >
106
+ ) ;
107
+ } ;
95
108
96
109
const titleItem = ( item : string ) => item . charAt ( 0 ) . toUpperCase ( ) + item . slice ( 1 ) ;
97
110
@@ -137,7 +150,7 @@ const displayItem = (
137
150
hasStory : ?boolean ,
138
151
dark : ?boolean ,
139
152
) => {
140
- if ( item === VIEWERS ) return displayViewers ( actions , item , hasStory , dark ) ;
153
+ if ( item === VIEWERS || item === VISIBLE ) return displayNonLink ( actions , item , hasStory , dark ) ;
141
154
return displayLink ( actions , item , hasStory , dark ) ;
142
155
} ;
143
156
@@ -153,6 +166,7 @@ export const StoryActions = (props: Props): Node => {
153
166
LEAVE ,
154
167
DELETE ,
155
168
REPORT ,
169
+ VISIBLE ,
156
170
VIEWERS ,
157
171
] . map ( ( item : string ) => ( actions [ item ] ? displayItem ( actions , item , hasStory , dark ) : null ) ) }
158
172
</ div >
0 commit comments