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'}}>&lt;button className="btn btn-facebook"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;</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'}}>&lt;button className="btn btn-facebook icon"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;</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'}}>&lt;button className="btn btn-facebook text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/button&gt;</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"), "&lt;");3    strInput = strInput.replace(new RegExp(['>'],"g"), "&gt;");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.