Unlock 30% off on Manual Testing Annual Plans this Holiday Season. 
Use Code: LCMYEARENDEXCL30
Use Code: LCMYEARENDEXCL30Check icon
Copied to Clipboard!
How to use btn method in storybook-root
Best JavaScript code snippet using storybook-root
SocialButtons.js
Source:SocialButtons.js 
1import React, { Component } from 'react';2class SocialButtons extends Component {3 render() {4 return (5 <div className="animated fadeIn">6 <div className="row">7 <div className="col-12">8 <div className="card">9 <div className="card-header">10 <strong>Social Media Button</strong> <small>Usage ex.</small><code style={{textTransform: 'lowercase'}}><button className="btn btn-facebook"><span>Facebook</span></button></code>11 </div>12 <div className="card-block">13 <h6>Size Small <small>Add this class <code>.btn-sm</code></small></h6>14 <p>15 <button type="button" className="btn btn-sm btn-facebook"><span>Facebook</span></button>16 <button type="button" className="btn btn-sm btn-twitter"><span>Twitter</span></button>17 <button type="button" className="btn btn-sm btn-linkedin"><span>LinkedIn</span></button>18 <button type="button" className="btn btn-sm btn-flickr"><span>Flickr</span></button>19 <button type="button" className="btn btn-sm btn-tumblr"><span>Tumblr</span></button>20 <button type="button" className="btn btn-sm btn-xing"><span>Xing</span></button>21 <button type="button" className="btn btn-sm btn-github"><span>Github</span></button>22 <button type="button" className="btn btn-sm btn-html5"><span>HTML5</span></button>23 <button type="button" className="btn btn-sm btn-openid"><span>OpenID</span></button>24 <button type="button" className="btn btn-sm btn-stack-overflow"><span>StackOverflow</span></button>25 <button type="button" className="btn btn-sm btn-css3"><span>CSS3</span></button>26 <button type="button" className="btn btn-sm btn-youtube"><span>YouTube</span></button>27 <button type="button" className="btn btn-sm btn-dribbble"><span>Dribbble</span></button>28 <button type="button" className="btn btn-sm btn-google-plus"><span>Google+</span></button>29 <button type="button" className="btn btn-sm btn-instagram"><span>Instagram</span></button>30 <button type="button" className="btn btn-sm btn-pinterest"><span>Pinterest</span></button>31 <button type="button" className="btn btn-sm btn-vk"><span>VK</span></button>32 <button type="button" className="btn btn-sm btn-yahoo"><span>Yahoo</span></button>33 <button type="button" className="btn btn-sm btn-behance"><span>Behance</span></button>34 <button type="button" className="btn btn-sm btn-dropbox"><span>Dropbox</span></button>35 <button type="button" className="btn btn-sm btn-reddit"><span>Reddit</span></button>36 <button type="button" className="btn btn-sm btn-spotify"><span>Spotify</span></button>37 <button type="button" className="btn btn-sm btn-vine"><span>Vine</span></button>38 <button type="button" className="btn btn-sm btn-foursquare"><span>Forsquare</span></button>39 <button type="button" className="btn btn-sm btn-vimeo"><span>Vimeo</span></button>40 </p>41 <h6>Size Normal</h6>42 <p>43 <button type="button" className="btn btn-facebook"><span>Facebook</span></button>44 <button type="button" className="btn btn-twitter"><span>Twitter</span></button>45 <button type="button" className="btn btn-linkedin"><span>LinkedIn</span></button>46 <button type="button" className="btn btn-flickr"><span>Flickr</span></button>47 <button type="button" className="btn btn-tumblr"><span>Tumblr</span></button>48 <button type="button" className="btn btn-xing"><span>Xing</span></button>49 <button type="button" className="btn btn-github"><span>Github</span></button>50 <button type="button" className="btn btn-html5"><span>HTML5</span></button>51 <button type="button" className="btn btn-openid"><span>OpenID</span></button>52 <button type="button" className="btn btn-stack-overflow"><span>StackOverflow</span></button>53 <button type="button" className="btn btn-css3"><span>CSS3</span></button>54 <button type="button" className="btn btn-youtube"><span>YouTube</span></button>55 <button type="button" className="btn btn-dribbble"><span>Dribbble</span></button>56 <button type="button" className="btn btn-google-plus"><span>Google+</span></button>57 <button type="button" className="btn btn-instagram"><span>Instagram</span></button>58 <button type="button" className="btn btn-pinterest"><span>Pinterest</span></button>59 <button type="button" className="btn btn-vk"><span>VK</span></button>60 <button type="button" className="btn btn-yahoo"><span>Yahoo</span></button>61 <button type="button" className="btn btn-behance"><span>Behance</span></button>62 <button type="button" className="btn btn-dropbox"><span>Dropbox</span></button>63 <button type="button" className="btn btn-reddit"><span>Reddit</span></button>64 <button type="button" className="btn btn-spotify"><span>Spotify</span></button>65 <button type="button" className="btn btn-vine"><span>Vine</span></button>66 <button type="button" className="btn btn-foursquare"><span>Forsquare</span></button>67 <button type="button" className="btn btn-vimeo"><span>Vimeo</span></button>68 </p>69 <h6>Size Large <small>Add this class <code>.btn-lg</code></small></h6>70 <p>71 <button type="button" className="btn btn-lg btn-facebook"><span>Facebook</span></button>72 <button type="button" className="btn btn-lg btn-twitter"><span>Twitter</span></button>73 <button type="button" className="btn btn-lg btn-linkedin"><span>LinkedIn</span></button>74 <button type="button" className="btn btn-lg btn-flickr"><span>Flickr</span></button>75 <button type="button" className="btn btn-lg btn-tumblr"><span>Tumblr</span></button>76 <button type="button" className="btn btn-lg btn-xing"><span>Xing</span></button>77 <button type="button" className="btn btn-lg btn-github"><span>Github</span></button>78 <button type="button" className="btn btn-lg btn-html5"><span>HTML5</span></button>79 <button type="button" className="btn btn-lg btn-openid"><span>OpenID</span></button>80 <button type="button" className="btn btn-lg btn-stack-overflow"><span>StackOverflow</span></button>81 <button type="button" className="btn btn-lg btn-css3"><span>CSS3</span></button>82 <button type="button" className="btn btn-lg btn-youtube"><span>YouTube</span></button>83 <button type="button" className="btn btn-lg btn-dribbble"><span>Dribbble</span></button>84 <button type="button" className="btn btn-lg btn-google-plus"><span>Google+</span></button>85 <button type="button" className="btn btn-lg btn-instagram"><span>Instagram</span></button>86 <button type="button" className="btn btn-lg btn-pinterest"><span>Pinterest</span></button>87 <button type="button" className="btn btn-lg btn-vk"><span>VK</span></button>88 <button type="button" className="btn btn-lg btn-yahoo"><span>Yahoo</span></button>89 <button type="button" className="btn btn-lg btn-behance"><span>Behance</span></button>90 <button type="button" className="btn btn-lg btn-dropbox"><span>Dropbox</span></button>91 <button type="button" className="btn btn-lg btn-reddit"><span>Reddit</span></button>92 <button type="button" className="btn btn-lg btn-spotify"><span>Spotify</span></button>93 <button type="button" className="btn btn-lg btn-vine"><span>Vine</span></button>94 <button type="button" className="btn btn-lg btn-foursquare"><span>Forsquare</span></button>95 <button type="button" className="btn btn-lg btn-vimeo"><span>Vimeo</span></button>96 </p>97 </div>98 </div>99 </div>100 <div className="col-12">101 <div className="card">102 <div className="card-header">103 <strong>Social Media Button</strong> <small>Only icons. Usage ex.</small> <code style={{textTransform: 'lowercase'}}><button className="btn btn-facebook icon"><span>Facebook</span></button></code>104 </div>105 <div className="card-block">106 <h6>Size Small <small>Add this class <code>.btn-sm</code></small></h6>107 <p>108 <button type="button" className="btn btn-sm btn-facebook icon"><span>Facebook</span></button>109 <button type="button" className="btn btn-sm btn-twitter icon"><span>Twitter</span></button>110 <button type="button" className="btn btn-sm btn-linkedin icon"><span>LinkedIn</span></button>111 <button type="button" className="btn btn-sm btn-flickr icon"><span>Flickr</span></button>112 <button type="button" className="btn btn-sm btn-tumblr icon"><span>Tumblr</span></button>113 <button type="button" className="btn btn-sm btn-xing icon"><span>Xing</span></button>114 <button type="button" className="btn btn-sm btn-github icon"><span>Github</span></button>115 <button type="button" className="btn btn-sm btn-html5 icon"><span>HTML5</span></button>116 <button type="button" className="btn btn-sm btn-openid icon"><span>OpenID</span></button>117 <button type="button" className="btn btn-sm btn-stack-overflow icon"><span>StackOverflow</span></button>118 <button type="button" className="btn btn-sm btn-css3 icon"><span>CSS3</span></button>119 <button type="button" className="btn btn-sm btn-youtube icon"><span>YouTube</span></button>120 <button type="button" className="btn btn-sm btn-dribbble icon"><span>Dribbble</span></button>121 <button type="button" className="btn btn-sm btn-google-plus icon"><span>Google+</span></button>122 <button type="button" className="btn btn-sm btn-instagram icon"><span>Instagram</span></button>123 <button type="button" className="btn btn-sm btn-pinterest icon"><span>Pinterest</span></button>124 <button type="button" className="btn btn-sm btn-vk icon"><span>VK</span></button>125 <button type="button" className="btn btn-sm btn-yahoo icon"><span>Yahoo</span></button>126 <button type="button" className="btn btn-sm btn-behance icon"><span>Behance</span></button>127 <button type="button" className="btn btn-sm btn-dropbox icon"><span>Dropbox</span></button>128 <button type="button" className="btn btn-sm btn-reddit icon"><span>Reddit</span></button>129 <button type="button" className="btn btn-sm btn-spotify icon"><span>Spotify</span></button>130 <button type="button" className="btn btn-sm btn-vine icon"><span>Vine</span></button>131 <button type="button" className="btn btn-sm btn-foursquare icon"><span>Forsquare</span></button>132 <button type="button" className="btn btn-sm btn-vimeo icon"><span>Vimeo</span></button>133 </p>134 <h6>Size Normal</h6>135 <p>136 <button type="button" className="btn btn-facebook icon"><span>Facebook</span></button>137 <button type="button" className="btn btn-twitter icon"><span>Twitter</span></button>138 <button type="button" className="btn btn-linkedin icon"><span>LinkedIn</span></button>139 <button type="button" className="btn btn-flickr icon"><span>Flickr</span></button>140 <button type="button" className="btn btn-tumblr icon"><span>Tumblr</span></button>141 <button type="button" className="btn btn-xing icon"><span>Xing</span></button>142 <button type="button" className="btn btn-github icon"><span>Github</span></button>143 <button type="button" className="btn btn-html5 icon"><span>HTML5</span></button>144 <button type="button" className="btn btn-openid icon"><span>OpenID</span></button>145 <button type="button" className="btn btn-stack-overflow icon"><span>StackOverflow</span></button>146 <button type="button" className="btn btn-css3 icon"><span>CSS3</span></button>147 <button type="button" className="btn btn-youtube icon"><span>YouTube</span></button>148 <button type="button" className="btn btn-dribbble icon"><span>Dribbble</span></button>149 <button type="button" className="btn btn-google-plus icon"><span>Google+</span></button>150 <button type="button" className="btn btn-instagram icon"><span>Instagram</span></button>151 <button type="button" className="btn btn-pinterest icon"><span>Pinterest</span></button>152 <button type="button" className="btn btn-vk icon"><span>VK</span></button>153 <button type="button" className="btn btn-yahoo icon"><span>Yahoo</span></button>154 <button type="button" className="btn btn-behance icon"><span>Behance</span></button>155 <button type="button" className="btn btn-dropbox icon"><span>Dropbox</span></button>156 <button type="button" className="btn btn-reddit icon"><span>Reddit</span></button>157 <button type="button" className="btn btn-spotify icon"><span>Spotify</span></button>158 <button type="button" className="btn btn-vine icon"><span>Vine</span></button>159 <button type="button" className="btn btn-foursquare icon"><span>Forsquare</span></button>160 <button type="button" className="btn btn-vimeo icon"><span>Vimeo</span></button>161 </p>162 <h6>Size Large <small>Add this class <code>.btn-lg</code></small></h6>163 <p>164 <button type="button" className="btn btn-lg btn-facebook icon"><span>Facebook</span></button>165 <button type="button" className="btn btn-lg btn-twitter icon"><span>Twitter</span></button>166 <button type="button" className="btn btn-lg btn-linkedin icon"><span>LinkedIn</span></button>167 <button type="button" className="btn btn-lg btn-flickr icon"><span>Flickr</span></button>168 <button type="button" className="btn btn-lg btn-tumblr icon"><span>Tumblr</span></button>169 <button type="button" className="btn btn-lg btn-xing icon"><span>Xing</span></button>170 <button type="button" className="btn btn-lg btn-github icon"><span>Github</span></button>171 <button type="button" className="btn btn-lg btn-html5 icon"><span>HTML5</span></button>172 <button type="button" className="btn btn-lg btn-openid icon"><span>OpenID</span></button>173 <button type="button" className="btn btn-lg btn-stack-overflow icon"><span>StackOverflow</span></button>174 <button type="button" className="btn btn-lg btn-css3 icon"><span>CSS3</span></button>175 <button type="button" className="btn btn-lg btn-youtube icon"><span>YouTube</span></button>176 <button type="button" className="btn btn-lg btn-dribbble icon"><span>Dribbble</span></button>177 <button type="button" className="btn btn-lg btn-google-plus icon"><span>Google+</span></button>178 <button type="button" className="btn btn-lg btn-instagram icon"><span>Instagram</span></button>179 <button type="button" className="btn btn-lg btn-pinterest icon"><span>Pinterest</span></button>180 <button type="button" className="btn btn-lg btn-vk icon"><span>VK</span></button>181 <button type="button" className="btn btn-lg btn-yahoo icon"><span>Yahoo</span></button>182 <button type="button" className="btn btn-lg btn-behance icon"><span>Behance</span></button>183 <button type="button" className="btn btn-lg btn-dropbox icon"><span>Dropbox</span></button>184 <button type="button" className="btn btn-lg btn-reddit icon"><span>Reddit</span></button>185 <button type="button" className="btn btn-lg btn-spotify icon"><span>Spotify</span></button>186 <button type="button" className="btn btn-lg btn-vine icon"><span>Vine</span></button>187 <button type="button" className="btn btn-lg btn-foursquare icon"><span>Forsquare</span></button>188 <button type="button" className="btn btn-lg btn-vimeo icon"><span>Vimeo</span></button>189 </p>190 </div>191 </div>192 </div>193 <div className="col-12">194 <div className="card">195 <div className="card-header">196 <strong>Social Media Button</strong> <small>Only text. Usage ex.</small> <code style={{textTransform: 'lowercase'}}><button className="btn btn-facebook text"><span>Facebook</span></button></code>197 </div>198 <div className="card-block">199 <h6>Size Small <small>Add this class <code>.btn-sm</code></small></h6>200 <p>201 <button type="button" className="btn btn-sm btn-facebook text"><span>Facebook</span></button>202 <button type="button" className="btn btn-sm btn-twitter text"><span>Twitter</span></button>203 <button type="button" className="btn btn-sm btn-linkedin text"><span>LinkedIn</span></button>204 <button type="button" className="btn btn-sm btn-flickr text"><span>Flickr</span></button>205 <button type="button" className="btn btn-sm btn-tumblr text"><span>Tumblr</span></button>206 <button type="button" className="btn btn-sm btn-xing text"><span>Xing</span></button>207 <button type="button" className="btn btn-sm btn-github text"><span>Github</span></button>208 <button type="button" className="btn btn-sm btn-html5 text"><span>HTML5</span></button>209 <button type="button" className="btn btn-sm btn-openid text"><span>OpenID</span></button>210 <button type="button" className="btn btn-sm btn-stack-overflow text"><span>StackOverflow</span></button>211 <button type="button" className="btn btn-sm btn-css3 text"><span>CSS3</span></button>212 <button type="button" className="btn btn-sm btn-youtube text"><span>YouTube</span></button>213 <button type="button" className="btn btn-sm btn-dribbble text"><span>Dribbble</span></button>214 <button type="button" className="btn btn-sm btn-google-plus text"><span>Google+</span></button>215 <button type="button" className="btn btn-sm btn-instagram text"><span>Instagram</span></button>216 <button type="button" className="btn btn-sm btn-pinterest text"><span>Pinterest</span></button>217 <button type="button" className="btn btn-sm btn-vk text"><span>VK</span></button>218 <button type="button" className="btn btn-sm btn-yahoo text"><span>Yahoo</span></button>219 <button type="button" className="btn btn-sm btn-behance text"><span>Behance</span></button>220 <button type="button" className="btn btn-sm btn-dropbox text"><span>Dropbox</span></button>221 <button type="button" className="btn btn-sm btn-reddit text"><span>Reddit</span></button>222 <button type="button" className="btn btn-sm btn-spotify text"><span>Spotify</span></button>223 <button type="button" className="btn btn-sm btn-vine text"><span>Vine</span></button>224 <button type="button" className="btn btn-sm btn-foursquare text"><span>Forsquare</span></button>225 <button type="button" className="btn btn-sm btn-vimeo text"><span>Vimeo</span></button>226 </p>227 <h6>Size Normal</h6>228 <p>229 <button type="button" className="btn btn-facebook text"><span>Facebook</span></button>230 <button type="button" className="btn btn-twitter text"><span>Twitter</span></button>231 <button type="button" className="btn btn-linkedin text"><span>LinkedIn</span></button>232 <button type="button" className="btn btn-flickr text"><span>Flickr</span></button>233 <button type="button" className="btn btn-tumblr text"><span>Tumblr</span></button>234 <button type="button" className="btn btn-xing text"><span>Xing</span></button>235 <button type="button" className="btn btn-github text"><span>Github</span></button>236 <button type="button" className="btn btn-html5 text"><span>HTML5</span></button>237 <button type="button" className="btn btn-openid text"><span>OpenID</span></button>238 <button type="button" className="btn btn-stack-overflow text"><span>StackOverflow</span></button>239 <button type="button" className="btn btn-css3 text"><span>CSS3</span></button>240 <button type="button" className="btn btn-youtube text"><span>YouTube</span></button>241 <button type="button" className="btn btn-dribbble text"><span>Dribbble</span></button>242 <button type="button" className="btn btn-google-plus text"><span>Google+</span></button>243 <button type="button" className="btn btn-instagram text"><span>Instagram</span></button>244 <button type="button" className="btn btn-pinterest text"><span>Pinterest</span></button>245 <button type="button" className="btn btn-vk text"><span>VK</span></button>246 <button type="button" className="btn btn-yahoo text"><span>Yahoo</span></button>247 <button type="button" className="btn btn-behance text"><span>Behance</span></button>248 <button type="button" className="btn btn-dropbox text"><span>Dropbox</span></button>249 <button type="button" className="btn btn-reddit text"><span>Reddit</span></button>250 <button type="button" className="btn btn-spotify text"><span>Spotify</span></button>251 <button type="button" className="btn btn-vine text"><span>Vine</span></button>252 <button type="button" className="btn btn-foursquare text"><span>Forsquare</span></button>253 <button type="button" className="btn btn-vimeo text"><span>Vimeo</span></button>254 </p>255 <h6>Size Large <small>Add this class <code>.btn-lg</code></small></h6>256 <p>257 <button type="button" className="btn btn-lg btn-facebook text"><span>Facebook</span></button>258 <button type="button" className="btn btn-lg btn-twitter text"><span>Twitter</span></button>259 <button type="button" className="btn btn-lg btn-linkedin text"><span>LinkedIn</span></button>260 <button type="button" className="btn btn-lg btn-flickr text"><span>Flickr</span></button>261 <button type="button" className="btn btn-lg btn-tumblr text"><span>Tumblr</span></button>262 <button type="button" className="btn btn-lg btn-xing text"><span>Xing</span></button>263 <button type="button" className="btn btn-lg btn-github text"><span>Github</span></button>264 <button type="button" className="btn btn-lg btn-html5 text"><span>HTML5</span></button>265 <button type="button" className="btn btn-lg btn-openid text"><span>OpenID</span></button>266 <button type="button" className="btn btn-lg btn-stack-overflow text"><span>StackOverflow</span></button>267 <button type="button" className="btn btn-lg btn-css3 text"><span>CSS3</span></button>268 <button type="button" className="btn btn-lg btn-youtube text"><span>YouTube</span></button>269 <button type="button" className="btn btn-lg btn-dribbble text"><span>Dribbble</span></button>270 <button type="button" className="btn btn-lg btn-google-plus text"><span>Google+</span></button>271 <button type="button" className="btn btn-lg btn-instagram text"><span>Instagram</span></button>272 <button type="button" className="btn btn-lg btn-pinterest text"><span>Pinterest</span></button>273 <button type="button" className="btn btn-lg btn-vk text"><span>VK</span></button>274 <button type="button" className="btn btn-lg btn-yahoo text"><span>Yahoo</span></button>275 <button type="button" className="btn btn-lg btn-behance text"><span>Behance</span></button>276 <button type="button" className="btn btn-lg btn-dropbox text"><span>Dropbox</span></button>277 <button type="button" className="btn btn-lg btn-reddit text"><span>Reddit</span></button>278 <button type="button" className="btn btn-lg btn-spotify text"><span>Spotify</span></button>279 <button type="button" className="btn btn-lg btn-vine text"><span>Vine</span></button>280 <button type="button" className="btn btn-lg btn-foursquare text"><span>Forsquare</span></button>281 <button type="button" className="btn btn-lg btn-vimeo text"><span>Vimeo</span></button>282 </p>283 </div>284 </div>285 </div>286 </div>287 </div>288 )289 }290}...
generator.js
Source:generator.js
1function filterHTML(strInput){2 strInput = strInput.replace(new RegExp(['<'],"g"), "<");3 strInput = strInput.replace(new RegExp(['>'],"g"), ">");4 return strInput;5}6$(function(){7 $(".button-text").keyup(function(){8 var btnText = $(this).val();9 if($("#result a.btn, #result button.btn").length){10 if($("#result a.btn span, #result button.btn span").length){11 var iconCode = $("#result a.btn span, #result button.btn span").clone();12 innerCode = btnText;13 $("#result .btn").html(filterHTML(btnText));14 $("#result .btn").prepend(" ");15 $("#result .btn").prepend(iconCode);16 var btnHTML = $("#result").html();17 $(".button-html").html(filterHTML(btnHTML));18 }19 else{20 $("#result .btn").html(filterHTML(btnText));21 var btnHTML = $("#result").html();22 $(".button-html").html(filterHTML(btnHTML));23 }24 }25 else if($("#result input.btn").length){26 $("#result .btn").attr("value", filterHTML(btnText));27 var btnHTML = $("#result").html();28 $(".button-html").html(filterHTML(btnHTML));29 }30 });31 $(".button-color label").click(function(){32 var btnColor = $(this).children("input").attr("value");33 var btnSize = $(".button-size label.active").children("input").attr("value");34 var btnState = $(".button-state label.active").children("input").attr("value");35 var btnWidth = $(".button-width label.active").children("input").attr("value");36 if(btnState == "active" || btnState == "disabled"){37 var className = btnColor + " " + btnSize + " " + btnState;38 if(btnWidth.length){39 var className = btnColor + " " + btnSize + " " + btnState + " " + btnWidth;40 }41 $("#result .btn").attr("class", className);42 var btnHTML = $("#result").html();43 $(".button-html").html(filterHTML(btnHTML));44 }45 if(btnState == "normal"){46 var className = btnColor + " " + btnSize;47 if(btnWidth.length){48 var className = btnColor + " " + btnSize + " " + btnWidth;49 }50 $("#result .btn").attr("class", className);51 var btnHTML = $("#result").html();52 $(".button-html").html(filterHTML(btnHTML));53 }54 });55 $(".button-size label").click(function(){56 var btnSize = $(this).children("input").attr("value");57 var btnColor = $(".button-color label.active").children("input").attr("value");58 var btnState = $(".button-state label.active").children("input").attr("value");59 var btnWidth = $(".button-width label.active").children("input").attr("value");60 if(btnSize.length){61 if(btnState == "active" || btnState == "disabled"){62 var className = btnColor + " " + btnSize + " " + btnState;63 if(btnWidth.length){64 var className = btnColor + " " + btnSize + " " + btnState + " " + btnWidth;65 }66 $("#result .btn").attr("class", className);67 var btnHTML = $("#result").html();68 $(".button-html").html(filterHTML(btnHTML));69 }70 if(btnState == "normal"){71 var className = btnColor + " " + btnSize;72 if(btnWidth.length){73 var className = btnColor + " " + btnSize + " " + btnWidth;74 }75 $("#result .btn").attr("class", className);76 var btnHTML = $("#result").html();77 $(".button-html").html(filterHTML(btnHTML));78 }79 }80 else{81 if(btnState == "active" || btnState == "disabled"){82 var className = btnColor + " " + btnState;83 if(btnWidth.length){84 var className = btnColor + " " + btnState + " " + btnWidth;85 }86 $("#result .btn").attr("class", className);87 var btnHTML = $("#result").html();88 $(".button-html").html(filterHTML(btnHTML));89 }90 if(btnState == "normal"){91 var className = btnColor;92 if(btnWidth.length){93 var className = btnColor + " " + btnWidth;94 }95 $("#result .btn").attr("class", className);96 var btnHTML = $("#result").html();97 $(".button-html").html(filterHTML(btnHTML));98 }99 }100 $("#result .btn").attr("class", className);101 var btnHTML = $("#result").html();102 $(".button-html").html(filterHTML(btnHTML));103 });104 $(".element-type label").click(function(){105 var iconCode = "";106 var currentClass = $("#result .btn").attr("class");107 if($("#result a.btn span").length){108 var iconCode = $("#result a.btn span, #result button.btn span").clone();109 }110 if($("#result a.btn span").length === 0 && $('.include-icon label.active input').val() == 1){111 var iconName = $(".the-icons li.active span").attr("class");112 iconCode = '<span class="'+iconName+ '"></span>';113 }114 if($("#result a.btn, #result button.btn").length){115 var btnStr = $("#result .btn").text();116 var btnText = $.trim(btnStr);117 }118 else if($("#result input.btn").length){119 var btnStr = $("#result .btn").attr("value");120 var btnText = $.trim(btnStr);121 }122 if($(this).children("input").attr("value")=="a"){123 $("#result").empty();124 var btnCode = '<a href="#"' + " " + 'class="' + currentClass + '">' + btnText + '</a>';125 $("#result a").remove();126 $("#result").append(btnCode);127 if(iconCode.length){128 if($('.fa-position label.active input').val() == "left"){129 $("#result .btn").prepend(" ");130 $("#result .btn").prepend(iconCode);131 }132 if($('.fa-position label.active input').val() == "right"){133 $("#result .btn").append(" ");134 $("#result .btn").append(iconCode);135 }136 }137 var btnHTML = $("#result").html();138 $(".button-html").html(filterHTML(btnHTML));139 if($(".include-icon label.active").children("input").attr("value")=="1"){140 $(".toggle").add("#iconOption").show();141 }142 if($(".include-icon label.active").children("input").attr("value")=="0"){143 $("#iconOption").show();144 }145 }146 else if($(this).children("input").attr("value")=="button"){147 $("#result").empty();148 var btnCode = '<button type="button"' + " " + 'class="' + currentClass + '">' + btnText + '</button>';149 $("#result button").remove();150 $("#result").append(btnCode);151 if(iconCode.length){152 if($('.fa-position label.active input').val() == "left"){153 $("#result .btn").prepend(" ");154 $("#result .btn").prepend(iconCode);155 }156 if($('.fa-position label.active input').val() == "right"){157 $("#result .btn").append(" ");158 $("#result .btn").append(iconCode);159 }160 }161 var btnHTML = $("#result").html();162 $(".button-html").html(filterHTML(btnHTML));163 if($(".include-icon label.active").children("input").attr("value")=="1"){164 $(".toggle").add("#iconOption").show();165 }166 if($(".include-icon label.active").children("input").attr("value")=="0"){167 $("#iconOption").show();168 }169 }170 else if($(this).children("input").attr("value")=="input"){171 $("#result").empty();172 var btnCode = '<input type="button"' + " " + 'class="' + currentClass + '" value="' + btnText + '">';173 $("#result button").remove();174 $("#result").append(btnCode);175 // Only applicable for input case176 $(".button-html").html(filterHTML(btnCode));177 $(".toggle").add("#iconOption").hide();178 }179 else if($(this).children("input").attr("value")=="submit"){180 $("#result").empty();181 var btnCode = '<input type="submit"' + " " + 'class="' + currentClass + '" value="' + btnText + '">';182 $("#result button").remove();183 $("#result").append(btnCode);184 var btnHTML = $("#result").html();185 $(".button-html").html(filterHTML(btnHTML));186 }187 });188 $(".button-state label").click(function(){189 if($(this).children("input").attr("value")=="active"){190 if($("#result a.btn").length){191 if($("#result a.disabled").length){192 $("#result a.btn").removeClass("disabled");193 $("#result a.btn").addClass("active");194 var btnHTML = $("#result").html();195 $(".button-html").html(filterHTML(btnHTML));196 }197 else{198 $("#result a.btn").addClass("active");199 var btnHTML = $("#result").html();200 $(".button-html").html(filterHTML(btnHTML));201 }202 }203 if($("#result button.btn, #result input.btn").length){204 if($("#result button.disabled, #result input.disabled").length){205 $("#result button.btn, #result input.btn").removeClass("disabled");206 //$("#result button.btn, #result input.btn").removeAttr("disabled");207 $("#result button.btn, #result input.btn").addClass("active");208 var btnHTML = $("#result").html();209 $(".button-html").html(filterHTML(btnHTML));210 }211 else{212 $("#result button.btn, #result input.btn").addClass("active");213 var btnHTML = $("#result").html();214 $(".button-html").html(filterHTML(btnHTML));215 }216 }217 }218 if($(this).children("input").attr("value")=="disabled"){219 if($("#result a.btn").length){220 if($("#result a.active").length){221 $("#result a.btn").removeClass("active");222 $("#result a.btn").addClass("disabled");223 var btnHTML = $("#result").html();224 $(".button-html").html(filterHTML(btnHTML));225 }226 else{227 $("#result a.btn").addClass("disabled");228 var btnHTML = $("#result").html();229 $(".button-html").html(filterHTML(btnHTML));230 }231 }232 if($("#result button.btn, #result input.btn")){233 if($("#result button.active, #result input.active").length){234 $("#result button.btn, #result input.btn").removeClass("active");235 $("#result button.btn, #result input.btn").addClass("disabled");236 //$("#result button.btn, #result input.btn").attr("disabled","disabled");237 var btnHTML = $("#result").html();238 $(".button-html").html(filterHTML(btnHTML));239 }240 else{241 $("#result button.btn, #result input.btn").addClass("disabled");242 //$("#result button.btn, #result input.btn").attr("disabled","disabled");243 var btnHTML = $("#result").html();244 $(".button-html").html(filterHTML(btnHTML));245 }246 }247 }248 if($(this).children("input").attr("value")=="normal"){249 if($("#result .btn.active").length){250 $("#result .btn").removeClass("active");251 var btnHTML = $("#result").html();252 $(".button-html").html(filterHTML(btnHTML));253 }254 if($("#result .btn.disabled").length){255 $("#result .btn").removeClass("disabled");256 //$("#result .btn").removeAttr("disabled");257 var btnHTML = $("#result").html();258 $(".button-html").html(filterHTML(btnHTML));259 }260 }261 });262 $(".button-width label").click(function(){263 if($(this).children("input").attr("value")==""){264 if($("#result .btn").hasClass("btn-block")){265 $("#result .btn").removeClass("btn-block");266 var btnHTML = $("#result").html();267 $(".button-html").html(filterHTML(btnHTML));268 }269 }270 if($(this).children("input").attr("value")=="btn-block"){271 if(!$("#result .btn").hasClass("btn-block")){272 $("#result .btn").addClass("btn-block");273 var btnHTML = $("#result").html();274 $(".button-html").html(filterHTML(btnHTML));275 }276 }277 });278 $(".the-icons li").click(function(){279 $(".the-icons li").removeClass("active");280 $(this).addClass("active");281 if($('.include-icon label.active input').val() == 1){282 if($("#result .btn span").length){283 var iconClass = $(this).children("span").attr("class");284 iconCode = ' <span class="'+iconClass+'"></span> ';285 //alert(iconCode);286 $("#result .btn span").remove();287 if($('.fa-position label.active input').val() == "left"){288 $("#result .btn").prepend(iconCode);289 }290 if($('.fa-position label.active input').val() == "right"){291 $("#result .btn").append(iconCode);292 }293 var btnHTML = $("#result").html();294 $(".button-html").html(filterHTML(btnHTML));295 }296 }297 });298 $('.include-icon label').click(function(){299 if($(this).children("input").attr("value") == 0){300 if($("#result .btn span").length){301 var btnStr = $("#result .btn").text();302 var btnText = $.trim(btnStr);303 $("#result .btn").html(btnText);304 var btnHTML = $("#result").html();305 $(".button-html").html(filterHTML(btnHTML));306 }307 $(".toggle").hide();308 }309 if($(this).children("input").attr("value") == 1){310 $(".toggle").show();311 var iconName = $(".the-icons li.active span").attr("class");312 iconCode = '<span class="'+iconName+ '"></span>';313 if(iconCode.length){314 if($('.fa-position label.active input').val() == "left"){315 $("#result .btn").prepend(" ");316 $("#result .btn").prepend(iconCode);317 }318 if($('.fa-position label.active input').val() == "right"){319 $("#result .btn").append(" ");320 $("#result .btn").append(iconCode);321 }322 var btnHTML = $("#result").html();323 $(".button-html").html(filterHTML(btnHTML));324 }325 }326327 });328 $(".fa-position label").click(function(){329 if($(this).children("input").attr("value") == "left"){330 if($("#result .btn span").length){331 var iconCode = $("#result .btn span").clone();332 var btnStr = $("#result .btn").text();333 var btnText = $.trim(btnStr);334 $("#result .btn").html(iconCode);335 $("#result .btn").append(" ");336 $("#result .btn").append(btnText);337 var btnHTML = $("#result").html();338 $(".button-html").html(filterHTML(btnHTML));339 }340341 }342 if($(this).children("input").attr("value") == "right"){343 if($("#result .btn span").length){344 var iconCode = $("#result .btn span").clone();345 var btnStr = $("#result .btn").text();346 var btnText = $.trim(btnStr);347 $("#result .btn").html(iconCode);348 $("#result .btn").prepend(" ");349 $("#result .btn").prepend(btnText);350 var btnHTML = $("#result").html();351 $(".button-html").html(filterHTML(btnHTML));352 }353 }354355 });356 $(".the-icons li").each(function(){357 var iconName = $(this).text().trim();358 $(this).attr("title",iconName);359 });360 $(".the-icons li").tooltip();361362 //Print Button HTML363 $(".print-html").click(function(){364 var btnHTML = $("#result").html();365 alert(filterHTML(btnHTML));366 $(".button-html").html(filterHTML(btnHTML));367 });
...
Using AI Code Generation
1const btn = document.querySelector('storybook-root');2btn.addEventListener('click', () => {3 btn.btn();4});5export const parameters = {6 actions: { argTypesRegex: "^on[A-Z].*" },7};8 (Story) => {9 const story = document.createElement('storybook-root');10 story.btn = () => {11 console.log('btn clicked');12 };13 story.appendChild(Story());14 return story;15 },16];17module.exports = {18 {19 options: {20 tsDocgenLoaderOptions: {},21 },22 },23};24module.exports = ({ config }) => {25 config.module.rules.push({26 {27 options: {28 },29 },30 include: path.resolve(__dirname, '../'),31 });32 return config;33};34module.exports = ({ config }) => {35 config.module.rules.push({36 include: path.resolve(__dirname, '../'),37 });38 return config;39};40module.exports = ({ config }) => {41 config.module.rules.push({42 include: path.resolve(__dirname, '../'),43 });44 return config;45};46module.exports = ({ config }) => {47 config.module.rules.push({48 test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,49 {50 options: {51 },52 },53 });54 return config;55};56module.exports = ({ config }) => {
Using AI Code Generation
1import { btn } from 'storybook-root';2btn.click();3import { configure } from '@storybook/react';4import { setAddon, addDecorator } from '@storybook/react';5import { withKnobs, boolean } from '@storybook/addon-knobs';6import JSXAddon from 'storybook-addon-jsx';7import { withTests } from '@storybook/addon-jest';8import results from '../.jest-test-results.json';9configure(require.context('../stories', true, /\.stories\.js$/), module);10setAddon(JSXAddon);11addDecorator(withKnobs);12addDecorator(13 withTests({14 filesExt: '((\\.specs?)|(\\.tests?))?(\\.js)?$'15 })16);17import JSXAddon from 'storybook-addon-jsx';18setAddon(JSXAddon);19import { withKnobs, boolean } from '@storybook/addon-knobs';20addDecorator(withKnobs);21import { withTests } from '@storybook/addon-jest';22import results from '../.jest-test-results.json';23addDecorator(24 withTests({25 filesExt: '((\\.specs?)|(\\.tests?))?(\\.js)?$'26 })27);28import { action } from '@storybook/addon-actions';29addDecorator(action('clicked'));30import { withInfo } from '@storybook/addon-info';31addDecorator(32 withInfo({33 })34);35import { setOptions } from '@storybook/addon-options';
Using AI Code Generation
1import root from 'storybook-root'2root.btn('click me')3#### `root.btn(label, [options])`4- `label` (string) - Button label5- `options` (object) - Button options6 - `id` (string) - Button id7 - `className` (string) - Button class name8 - `onClick` (function) - Button click event handler9#### `root.addBtn(label, [options])`10- `label` (string) - Button label11- `options` (object) - Button options12 - `id` (string) - Button id13 - `className` (string) - Button class name14 - `onClick` (function) - Button click event handler15#### `root.addBtns([buttons])`16- `buttons` (array) - Array of buttons17 - `label` (string) - Button label18 - `options` (object) - Button options19 - `id` (string) - Button id20 - `className` (string) - Button class name21 - `onClick` (function) - Button click event handler22#### `root.removeBtn(id)`23- `id` (string) - Button id24#### `root.removeBtns([ids])`25- `ids` (array) - Array of button ids26#### `root.removeAllBtns()`27#### `root.getBtn(id)`28- `id` (string) - Button id29#### `root.getBtns([ids])`
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run storybook-root automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
