1
00:00:01,170 --> 00:00:04,080
‫Welcome to another coding challenge

2
00:00:04,080 --> 00:00:07,620
‫and I hope that you really are finding these useful.

3
00:00:07,620 --> 00:00:08,850
‫And, if you do,

4
00:00:08,850 --> 00:00:11,880
‫then it's now time to build a reusable

5
00:00:11,880 --> 00:00:13,833
‫text expander component.

6
00:00:15,390 --> 00:00:19,770
‫So, here, I have three of these text expander components

7
00:00:19,770 --> 00:00:21,810
‫that we are going to build.

8
00:00:21,810 --> 00:00:24,390
‫So, a text expander is basically

9
00:00:24,390 --> 00:00:27,726
‫when we have some part of a text,

10
00:00:27,726 --> 00:00:29,550
‫and then we have this kind of button here

11
00:00:29,550 --> 00:00:31,110
‫that when we click it

12
00:00:31,110 --> 00:00:34,350
‫will reveal the entirety of the text,

13
00:00:34,350 --> 00:00:36,060
‫and then when we click it again,

14
00:00:36,060 --> 00:00:38,013
‫it will go back to hiding it.

15
00:00:38,880 --> 00:00:41,400
‫So, this one here is basically one

16
00:00:41,400 --> 00:00:43,227
‫of the text expander components

17
00:00:43,227 --> 00:00:45,480
‫and then here we have another one.

18
00:00:45,480 --> 00:00:48,930
‫And, immediately, you see that this one has by default,

19
00:00:48,930 --> 00:00:50,283
‫a lot more text.

20
00:00:51,214 --> 00:00:53,970
‫And, then this button here has some different text

21
00:00:53,970 --> 00:00:55,020
‫than this one

22
00:00:55,020 --> 00:00:57,060
‫and also a different color.

23
00:00:57,060 --> 00:00:58,380
‫But, then when we click it,

24
00:00:58,380 --> 00:01:00,273
‫the behavior is exactly the same.

25
00:01:01,200 --> 00:01:03,990
‫Then, finally, we have another one,

26
00:01:03,990 --> 00:01:07,110
‫and you see that this one has some different styling

27
00:01:07,110 --> 00:01:10,080
‫and also by default it is open.

28
00:01:10,080 --> 00:01:12,933
‫And, so then when we click here, it will close.

29
00:01:13,950 --> 00:01:17,220
‫So, let's go here to the starter code,

30
00:01:17,220 --> 00:01:21,810
‫which as always I have attached as a link to this lecture.

31
00:01:21,810 --> 00:01:23,070
‫And, if for some reason

32
00:01:23,070 --> 00:01:27,000
‫you don't want to build this challenge here on Code Sandbox,

33
00:01:27,000 --> 00:01:29,640
‫just copy paste the code from here

34
00:01:29,640 --> 00:01:32,343
‫and also from the CSS file.

35
00:01:33,480 --> 00:01:35,280
‫So, that's not a lot,

36
00:01:35,280 --> 00:01:38,373
‫but we will still need that.

37
00:01:40,230 --> 00:01:42,570
‫Alright, so, here,

38
00:01:42,570 --> 00:01:47,460
‫I already have the three components included inside the app.

39
00:01:47,460 --> 00:01:52,110
‫And, the component itself right now only renders this to-do,

40
00:01:52,110 --> 00:01:55,080
‫and so, yeah, this here is your to-do,

41
00:01:55,080 --> 00:01:57,543
‫so to build this expander right here.

42
00:01:59,464 --> 00:02:02,250
‫Now, by including these three text expanders here,

43
00:02:02,250 --> 00:02:05,970
‫I'm already giving you a hint into what the public API

44
00:02:05,970 --> 00:02:08,670
‫of this reusable component will look like,

45
00:02:08,670 --> 00:02:12,630
‫because here we already used many of these props.

46
00:02:12,630 --> 00:02:13,620
‫And, so from this,

47
00:02:13,620 --> 00:02:16,770
‫you can kind of imagine what each of them does

48
00:02:16,770 --> 00:02:21,330
‫in order to achieve the three results that we saw here.

49
00:02:21,330 --> 00:02:24,510
‫So, the challenge for you is to now actually go ahead

50
00:02:24,510 --> 00:02:26,880
‫and implement this text expander

51
00:02:26,880 --> 00:02:30,600
‫using everything that we have learned up until this point.

52
00:02:30,600 --> 00:02:33,690
‫And, if for some reason this is a bit difficult,

53
00:02:33,690 --> 00:02:36,090
‫then just imagine this as a collaboration

54
00:02:36,090 --> 00:02:38,910
‫between you and me basically.

55
00:02:38,910 --> 00:02:42,060
‫So, you build as much as you can on your own,

56
00:02:42,060 --> 00:02:45,660
‫and then if you can't move on anymore at some point,

57
00:02:45,660 --> 00:02:48,000
‫you simply watch the rest of the video

58
00:02:48,000 --> 00:02:50,280
‫where I will then basically help you

59
00:02:50,280 --> 00:02:52,560
‫completing this component.

60
00:02:52,560 --> 00:02:54,660
‫And, if you want, you can of course

61
00:02:54,660 --> 00:02:56,820
‫also go crazy with this one

62
00:02:56,820 --> 00:02:59,970
‫and include even a lot more props

63
00:02:59,970 --> 00:03:02,430
‫than just the ones that you see here.

64
00:03:02,430 --> 00:03:04,200
‫So, you can...

65
00:03:04,200 --> 00:03:07,380
‫Yeah, really do a lot of customization here if you want.

66
00:03:07,380 --> 00:03:08,310
‫But, of course,

67
00:03:08,310 --> 00:03:12,690
‫it's also more than enough to just do what we have here.

68
00:03:12,690 --> 00:03:14,820
‫So, this is a really nice exercise,

69
00:03:14,820 --> 00:03:18,180
‫which I hope you will complete, or at least part of it,

70
00:03:18,180 --> 00:03:21,543
‫and then I see you back here with my implementation.

71
00:03:23,550 --> 00:03:27,030
‫Okay, and let's get to work.

72
00:03:27,030 --> 00:03:28,830
‫And, I will immediately start

73
00:03:28,830 --> 00:03:31,773
‫by copying all these corrupt names here.

74
00:03:33,420 --> 00:03:37,350
‫So, selecting them one by one, then copy,

75
00:03:37,350 --> 00:03:40,023
‫and then I will just receive them here,

76
00:03:40,920 --> 00:03:43,293
‫then, of course, just some commas,

77
00:03:46,200 --> 00:03:48,810
‫and then we can get to work.

78
00:03:48,810 --> 00:03:51,780
‫And, in fact, we are actually missing one,

79
00:03:51,780 --> 00:03:54,930
‫which is basically just the text here.

80
00:03:54,930 --> 00:03:57,270
‫So, of course, inside of the expander,

81
00:03:57,270 --> 00:03:59,820
‫we need access to the text.

82
00:03:59,820 --> 00:04:03,450
‫Now, this text is between the opening and the closing tag.

83
00:04:03,450 --> 00:04:07,770
‫And, so what that means is that this is the children

84
00:04:07,770 --> 00:04:09,510
‫of this component,

85
00:04:09,510 --> 00:04:12,810
‫so it's gonna be inside the children prop.

86
00:04:12,810 --> 00:04:16,590
‫So, to start, we can actually immediately render that here,

87
00:04:16,590 --> 00:04:20,220
‫just so we see that this works.

88
00:04:20,220 --> 00:04:23,650
‫And, indeed, here we get the three pieces of text

89
00:04:24,570 --> 00:04:26,640
‫that we have right here.

90
00:04:26,640 --> 00:04:30,750
‫Great, so we already have part of the output,

91
00:04:30,750 --> 00:04:33,243
‫but, of course, we also want that button.

92
00:04:34,290 --> 00:04:36,570
‫So, let's do that.

93
00:04:36,570 --> 00:04:39,330
‫And, here, let's immediately allow the user

94
00:04:39,330 --> 00:04:40,953
‫to pass in a class name.

95
00:04:42,180 --> 00:04:43,920
‫So, in this last one here,

96
00:04:43,920 --> 00:04:47,430
‫the user passes in this box class name.

97
00:04:47,430 --> 00:04:49,350
‫And, so here we then accept that.

98
00:04:49,350 --> 00:04:51,633
‫And, so then let's edit right here.

99
00:04:53,370 --> 00:04:58,370
‫So, class name equals class name like this.

100
00:05:01,020 --> 00:05:03,330
‫And, so this is exactly what we also did

101
00:05:03,330 --> 00:05:08,010
‫in our reusable star rating component, right?

102
00:05:08,010 --> 00:05:08,910
‫Now, in that example,

103
00:05:08,910 --> 00:05:11,250
‫we didn't actually have a class name,

104
00:05:11,250 --> 00:05:12,330
‫but now we have.

105
00:05:12,330 --> 00:05:15,390
‫And, so immediately you see that this third one here

106
00:05:15,390 --> 00:05:17,733
‫got this different styling.

107
00:05:19,350 --> 00:05:24,350
‫Okay, now let's place this text here inside a span,

108
00:05:27,693 --> 00:05:30,603
‫so that then we can add the button.

109
00:05:33,600 --> 00:05:36,240
‫Alright, and now the text of the button

110
00:05:36,240 --> 00:05:38,580
‫can actually be customized.

111
00:05:38,580 --> 00:05:40,680
‫So, that is what we have the prop

112
00:05:40,680 --> 00:05:45,180
‫of the collapse button text for.

113
00:05:45,180 --> 00:05:49,293
‫So, let's get that, place that here,

114
00:05:50,670 --> 00:05:52,830
‫and then we have some error.

115
00:05:52,830 --> 00:05:54,720
‫So, let's see what's happening.

116
00:05:54,720 --> 00:05:56,940
‫Now, we're not closing the span,

117
00:05:56,940 --> 00:05:58,950
‫so that doesn't look too good.

118
00:05:58,950 --> 00:06:03,180
‫And, so here we already have one button.

119
00:06:03,180 --> 00:06:06,630
‫Now, here then we have this like kind of very small button,

120
00:06:06,630 --> 00:06:08,550
‫which doesn't have any text.

121
00:06:08,550 --> 00:06:13,550
‫And, so that's because only this second text expander

122
00:06:13,590 --> 00:06:15,960
‫is actually passing in the text

123
00:06:15,960 --> 00:06:18,960
‫for the collapse button text property.

124
00:06:18,960 --> 00:06:21,450
‫And, so that's because this text here,

125
00:06:21,450 --> 00:06:22,980
‫so this label of the button,

126
00:06:22,980 --> 00:06:25,320
‫is different from the default.

127
00:06:25,320 --> 00:06:26,760
‫So, if we take a look here,

128
00:06:26,760 --> 00:06:28,350
‫then you see that, by default,

129
00:06:28,350 --> 00:06:31,680
‫this one and this one display the text "show more".

130
00:06:31,680 --> 00:06:33,990
‫And, so then this one here is different

131
00:06:33,990 --> 00:06:35,907
‫and it says "show text".

132
00:06:39,270 --> 00:06:41,733
‫So, yeah, this one here is show text.

133
00:06:44,250 --> 00:06:46,413
‫And, here it is actually expand.

134
00:06:48,690 --> 00:06:53,690
‫Okay, so expand button text should be by default show more.

135
00:06:56,400 --> 00:06:58,500
‫And, so now here we have show more,

136
00:06:58,500 --> 00:07:00,630
‫then this one that's different, show text,

137
00:07:00,630 --> 00:07:03,390
‫and then again show more right here.

138
00:07:03,390 --> 00:07:05,910
‫But, now, of course, we want something to happen

139
00:07:05,910 --> 00:07:07,860
‫when we click on this button.

140
00:07:07,860 --> 00:07:11,463
‫So, we want only parts of the text here to be visible.

141
00:07:12,390 --> 00:07:15,813
‫So, we need some state, right?

142
00:07:17,160 --> 00:07:20,920
‫So, let's call this is expanded

143
00:07:22,710 --> 00:07:25,743
‫and set is expanded.

144
00:07:27,240 --> 00:07:29,160
‫Use state.

145
00:07:29,160 --> 00:07:32,433
‫And, then, by default, let's make it false.

146
00:07:33,330 --> 00:07:36,570
‫So, by default, the text should not be expanded,

147
00:07:36,570 --> 00:07:41,570
‫so we only want to see a small piece of the text, alright?

148
00:07:41,760 --> 00:07:42,720
‫And, just make sure

149
00:07:42,720 --> 00:07:45,543
‫that your use date was correctly imported.

150
00:07:47,100 --> 00:07:51,090
‫Okay, and now let's use this is expanded state

151
00:07:51,090 --> 00:07:54,420
‫in order to calculate or to compute the text

152
00:07:54,420 --> 00:07:56,373
‫that we actually want to display here.

153
00:07:58,980 --> 00:08:01,320
‫So, let's do that in a separate variable

154
00:08:01,320 --> 00:08:05,043
‫and let's call it the display text.

155
00:08:06,450 --> 00:08:09,450
‫So, if it is expanded,

156
00:08:09,450 --> 00:08:11,220
‫so if expanded is true,

157
00:08:11,220 --> 00:08:14,040
‫then we want all the text to be shown.

158
00:08:14,040 --> 00:08:18,060
‫And, so that's then the children, right?

159
00:08:18,060 --> 00:08:20,820
‫So, children is that text.

160
00:08:20,820 --> 00:08:24,300
‫That's why we placed that here in the beginning, right?

161
00:08:24,300 --> 00:08:27,960
‫But, if not, then we want something else.

162
00:08:27,960 --> 00:08:32,640
‫So, let's just write test there just to experiment.

163
00:08:32,640 --> 00:08:34,290
‫And, then we will, of course,

164
00:08:34,290 --> 00:08:38,700
‫replace the children here with that display text.

165
00:08:38,700 --> 00:08:40,140
‫And, so, by default,

166
00:08:40,140 --> 00:08:43,500
‫now all three of them have this test here,

167
00:08:43,500 --> 00:08:45,150
‫which is this part.

168
00:08:45,150 --> 00:08:46,748
‫And, so, again,

169
00:08:46,748 --> 00:08:47,581
‫that's because, by default,

170
00:08:47,581 --> 00:08:50,490
‫this expanded is false.

171
00:08:50,490 --> 00:08:52,410
‫Now, actually, if we take a look

172
00:08:52,410 --> 00:08:54,513
‫at one of these components here,

173
00:08:55,800 --> 00:08:58,830
‫then this last one will have the prop

174
00:08:58,830 --> 00:09:01,230
‫of extended equals true.

175
00:09:01,230 --> 00:09:03,300
‫So, right here, I don't have that.

176
00:09:03,300 --> 00:09:04,710
‫So, I have this one,

177
00:09:04,710 --> 00:09:07,500
‫but in the starter file that you will see,

178
00:09:07,500 --> 00:09:09,570
‫I will not have this one,

179
00:09:09,570 --> 00:09:11,253
‫but instead expanded.

180
00:09:13,770 --> 00:09:17,910
‫Okay, so, again, in the starter file that I had here,

181
00:09:17,910 --> 00:09:19,410
‫I had a mistake.

182
00:09:19,410 --> 00:09:22,110
‫So, we had the wrong prop here,

183
00:09:22,110 --> 00:09:25,200
‫and it's that we want an expanded prop,

184
00:09:25,200 --> 00:09:26,223
‫and not this one.

185
00:09:27,270 --> 00:09:31,680
‫So, here it's not button in line, but expanded.

186
00:09:31,680 --> 00:09:33,480
‫But, in the code that you see,

187
00:09:33,480 --> 00:09:36,090
‫this will already have been fixed.

188
00:09:36,090 --> 00:09:38,910
‫So, the meaning of this expanded prop

189
00:09:38,910 --> 00:09:41,190
‫is that if it is set to true,

190
00:09:41,190 --> 00:09:45,480
‫then, by default, the component here will be expanded.

191
00:09:45,480 --> 00:09:48,723
‫And, so that's exactly this third situation right here.

192
00:09:50,458 --> 00:09:51,630
‫So, if we reload this one here,

193
00:09:51,630 --> 00:09:54,090
‫then you see that the third text expander

194
00:09:54,090 --> 00:09:56,553
‫is by default already expanded.

195
00:09:57,660 --> 00:10:01,353
‫Okay, and so that's because expanded is set to true.

196
00:10:02,520 --> 00:10:05,190
‫So, here, let's now actually not use false,

197
00:10:05,190 --> 00:10:09,663
‫but really get this initial state from expanded.

198
00:10:10,657 --> 00:10:15,060
‫And, so then we can set expanded to false by default.

199
00:10:15,060 --> 00:10:17,670
‫And, so this is very similar what we also did

200
00:10:17,670 --> 00:10:20,040
‫in our star rating component.

201
00:10:20,040 --> 00:10:22,530
‫So, there we also set the initial state

202
00:10:22,530 --> 00:10:25,203
‫based on one of the props, right?

203
00:10:26,730 --> 00:10:29,130
‫So, by default, we now have this last one here

204
00:10:29,130 --> 00:10:30,240
‫already opened.

205
00:10:30,240 --> 00:10:32,850
‫And, so this one shows the entire text,

206
00:10:32,850 --> 00:10:36,123
‫while these ones here for now only show test.

207
00:10:37,170 --> 00:10:38,910
‫Now, another thing is that,

208
00:10:38,910 --> 00:10:41,670
‫in this case that the text is expanded,

209
00:10:41,670 --> 00:10:43,080
‫here, the text,

210
00:10:43,080 --> 00:10:45,630
‫so the label of this button should be different.

211
00:10:45,630 --> 00:10:49,050
‫So, it should be show less by default.

212
00:10:49,050 --> 00:10:53,103
‫And, so let's do that here again as a default prop.

213
00:10:55,530 --> 00:10:56,643
‫So, show less.

214
00:10:57,660 --> 00:10:58,500
‫And, so, then here,

215
00:10:58,500 --> 00:11:01,023
‫let's conditionally display that text.

216
00:11:02,100 --> 00:11:04,023
‫So if is expanded,

217
00:11:07,830 --> 00:11:10,470
‫then show the collapse button text,

218
00:11:10,470 --> 00:11:13,890
‫and, if not, then show the expand button text.

219
00:11:13,890 --> 00:11:16,293
‫And, so now it says show less.

220
00:11:17,940 --> 00:11:20,700
‫And, so this other component here

221
00:11:20,700 --> 00:11:25,140
‫will then show collapse text instead of show less.

222
00:11:25,140 --> 00:11:28,230
‫So, because it passes in this special prop

223
00:11:28,230 --> 00:11:29,703
‫that we have defined here.

224
00:11:30,660 --> 00:11:32,910
‫And, if all of these props here

225
00:11:32,910 --> 00:11:35,220
‫and all these default values here

226
00:11:35,220 --> 00:11:37,170
‫look very confusing to you,

227
00:11:37,170 --> 00:11:39,540
‫well, that's just because we are really trying

228
00:11:39,540 --> 00:11:43,740
‫to make this component here very flexible and reusable,

229
00:11:43,740 --> 00:11:47,100
‫so just like we did with our star rating component

230
00:11:47,100 --> 00:11:50,250
‫When we build our normal components in applications,

231
00:11:50,250 --> 00:11:52,830
‫we will not do this, right?

232
00:11:52,830 --> 00:11:56,640
‫We will then usually have the text directly in here,

233
00:11:56,640 --> 00:11:59,640
‫for example, instead of relying on the props

234
00:11:59,640 --> 00:12:02,640
‫and on default values of those props.

235
00:12:02,640 --> 00:12:06,603
‫But, again, here we are striving for maximum reusability.

236
00:12:07,440 --> 00:12:10,020
‫But, anyway, let's now finally actually

237
00:12:10,020 --> 00:12:11,913
‫make this button work.

238
00:12:13,352 --> 00:12:17,313
‫So, specifying the on click prop.

239
00:12:20,790 --> 00:12:22,860
‫Here, we just need a function,

240
00:12:22,860 --> 00:12:26,943
‫and then let's say set is expanded,

241
00:12:27,900 --> 00:12:30,900
‫and then the new state will be based on the current state,

242
00:12:30,900 --> 00:12:34,830
‫so we use the callback function here,

243
00:12:34,830 --> 00:12:38,340
‫and, instead of writing the entire word,

244
00:12:38,340 --> 00:12:41,313
‫let's just say exp, which stands for expanded,

245
00:12:42,522 --> 00:12:44,670
‫and then we just toggle that here.

246
00:12:44,670 --> 00:12:46,110
‫Now, that's it.

247
00:12:46,110 --> 00:12:47,640
‫So, let's see.

248
00:12:47,640 --> 00:12:50,820
‫And, indeed, as we click there, the text is now hidden.

249
00:12:50,820 --> 00:12:53,040
‫And, if we click on one of these,

250
00:12:53,040 --> 00:12:54,393
‫then it will show the text.

251
00:12:56,160 --> 00:12:58,890
‫And, again, it will then hide it.

252
00:12:58,890 --> 00:13:00,690
‫Great, now, next up,

253
00:13:00,690 --> 00:13:04,740
‫let's take care of not displaying the test here,

254
00:13:04,740 --> 00:13:09,600
‫but instead displaying some actual part of the text.

255
00:13:09,600 --> 00:13:12,750
‫Now, notice how here we have this prop,

256
00:13:12,750 --> 00:13:15,570
‫which says collapsed number of words.

257
00:13:15,570 --> 00:13:18,510
‫And, so here let's again specify a default,

258
00:13:18,510 --> 00:13:20,310
‫which is 20.

259
00:13:20,310 --> 00:13:24,390
‫But, of course, it could also be any other value.

260
00:13:24,390 --> 00:13:27,030
‫So, the idea here is that, by default,

261
00:13:27,030 --> 00:13:28,830
‫when the text is collapsed,

262
00:13:28,830 --> 00:13:32,310
‫it will only display exactly this number of words.

263
00:13:32,310 --> 00:13:34,080
‫So, only 20 words.

264
00:13:34,080 --> 00:13:35,910
‫But, then you have, for example,

265
00:13:35,910 --> 00:13:37,020
‫this component here,

266
00:13:37,020 --> 00:13:39,150
‫which shows more words.

267
00:13:39,150 --> 00:13:43,590
‫So, 20, this one should then actually be 10,

268
00:13:43,590 --> 00:13:46,923
‫so that this one here shows in fact more words.

269
00:13:47,940 --> 00:13:51,363
‫So, by default, only 10 words should be displayed.

270
00:13:52,260 --> 00:13:53,763
‫So, let's do that.

271
00:13:55,110 --> 00:13:58,800
‫So, this is just some standard string

272
00:13:58,800 --> 00:14:01,080
‫and array manipulation.

273
00:14:01,080 --> 00:14:06,080
‫So, we can simply split this string by the empty space,

274
00:14:06,750 --> 00:14:08,403
‫which will then give us an array,

275
00:14:09,330 --> 00:14:10,980
‫and then we can slice,

276
00:14:10,980 --> 00:14:15,240
‫or, in other words, we can take all the elements from zero

277
00:14:15,240 --> 00:14:18,870
‫all the way to collapsed number of words.

278
00:14:18,870 --> 00:14:21,960
‫So, by default, we take the first 10 words,

279
00:14:21,960 --> 00:14:23,343
‫so from zero to 10,

280
00:14:24,270 --> 00:14:26,070
‫and now this is still an array,

281
00:14:26,070 --> 00:14:30,213
‫and so we need to put it back to being a string.

282
00:14:31,230 --> 00:14:36,230
‫And, then, we also want to add at the end these three dots.

283
00:14:37,170 --> 00:14:41,550
‫Okay, and we could have used a template literal for this,

284
00:14:41,550 --> 00:14:45,780
‫but we can also just add them here at the end like this.

285
00:14:45,780 --> 00:14:47,880
‫So, that works the same way.

286
00:14:47,880 --> 00:14:51,870
‫And, so, as we click here, it shows all of them them,

287
00:14:51,870 --> 00:14:55,380
‫and otherwise it just shows exactly one, two, three, four,

288
00:14:55,380 --> 00:14:58,590
‫five, six, seven, eight, nine, 10 words,

289
00:14:58,590 --> 00:15:01,080
‫plus these three dots.

290
00:15:01,080 --> 00:15:02,520
‫Beautiful.

291
00:15:02,520 --> 00:15:04,530
‫So, that is already working.

292
00:15:04,530 --> 00:15:06,990
‫Now, all we have to do is to take care

293
00:15:06,990 --> 00:15:09,213
‫of the styling of this button.

294
00:15:10,170 --> 00:15:13,623
‫So, let's again specify an object here.

295
00:15:16,200 --> 00:15:18,093
‫Let's say button style.

296
00:15:19,860 --> 00:15:23,927
‫And, then, background, set it to none,

297
00:15:28,080 --> 00:15:29,523
‫also no border.

298
00:15:32,850 --> 00:15:34,380
‫And, again, this is necessary,

299
00:15:34,380 --> 00:15:37,260
‫because we want this component here

300
00:15:37,260 --> 00:15:41,070
‫to be 100% reusable and standalone.

301
00:15:41,070 --> 00:15:44,583
‫So, it cannot depend on any external styles.

302
00:15:46,380 --> 00:15:50,673
‫So, let's also set a cursor to pointer.

303
00:15:56,100 --> 00:16:00,510
‫Let's give it some margin on the left side of four pixels

304
00:16:02,430 --> 00:16:03,573
‫or let's say six.

305
00:16:04,980 --> 00:16:09,033
‫And, finally, we also want to give it a text color.

306
00:16:10,170 --> 00:16:13,260
‫And, so this is where this button color prop

307
00:16:13,260 --> 00:16:14,253
‫comes into play.

308
00:16:15,120 --> 00:16:18,513
‫So, let's grab that and place that here.

309
00:16:19,530 --> 00:16:23,640
‫And, now, all we have to do is to assign this here

310
00:16:23,640 --> 00:16:25,830
‫to the style prop.

311
00:16:25,830 --> 00:16:28,203
‫So, style, button style,

312
00:16:31,140 --> 00:16:32,250
‫give it a save,

313
00:16:32,250 --> 00:16:33,813
‫and beautiful.

314
00:16:34,770 --> 00:16:38,100
‫So, now this button looks more like text,

315
00:16:38,100 --> 00:16:40,530
‫but it is still missing some color.

316
00:16:40,530 --> 00:16:44,910
‫So, let's by default add some blue color here,

317
00:16:44,910 --> 00:16:46,503
‫which is 1F09cd.

318
00:16:50,700 --> 00:16:53,940
‫Alright, and there we go.

319
00:16:53,940 --> 00:16:57,300
‫So, the second one again is personalizing

320
00:16:57,300 --> 00:16:59,940
‫not only these two texts here on the button,

321
00:16:59,940 --> 00:17:02,820
‫but also the color and the number of words.

322
00:17:02,820 --> 00:17:06,000
‫And, so that's why this one here looks quite different.

323
00:17:06,000 --> 00:17:07,509
‫And, then, again,

324
00:17:07,509 --> 00:17:09,750
‫this one here has this special styling here

325
00:17:09,750 --> 00:17:12,690
‫that's coming right from our CSS file

326
00:17:12,690 --> 00:17:15,120
‫in the form of this box class.

327
00:17:15,120 --> 00:17:16,860
‫Great, so this is working,

328
00:17:16,860 --> 00:17:19,653
‫and, in fact we are now basically finished.

329
00:17:20,580 --> 00:17:25,050
‫So, this text expander component is now highly reusability

330
00:17:25,050 --> 00:17:28,560
‫and it hides all the complexity from the user,

331
00:17:28,560 --> 00:17:31,590
‫so from the consumer of this component,

332
00:17:31,590 --> 00:17:34,530
‫which again is really nice and really important.

333
00:17:34,530 --> 00:17:36,780
‫So, as the developer of this component,

334
00:17:36,780 --> 00:17:40,170
‫then we chose the public API, basically,

335
00:17:40,170 --> 00:17:42,570
‫and therefore allowed the user

336
00:17:42,570 --> 00:17:45,150
‫to customize it to their needs.

337
00:17:45,150 --> 00:17:49,020
‫And, as always, we could have gone really crazy here,

338
00:17:49,020 --> 00:17:51,300
‫and, for example, allow the user

339
00:17:51,300 --> 00:17:54,900
‫to place this button here in different places

340
00:17:54,900 --> 00:17:57,750
‫like below, or on the left side,

341
00:17:57,750 --> 00:17:59,640
‫or, here, right at the very beginning.

342
00:17:59,640 --> 00:18:02,460
‫We could have allowed some more styling here

343
00:18:02,460 --> 00:18:04,230
‫of the entire component.

344
00:18:04,230 --> 00:18:06,990
‫Or, we could also allow the user to specify

345
00:18:06,990 --> 00:18:10,620
‫whether they want to see these three dots here or not.

346
00:18:10,620 --> 00:18:13,140
‫But, again, that's just not necessary,

347
00:18:13,140 --> 00:18:15,870
‫because, with this, we found a nice balance.

348
00:18:15,870 --> 00:18:18,243
‫So, this is the interface that we chose.