KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta 
How to use story3 method in storybook-root
Best JavaScript code snippet using storybook-root
Introduction.js
Source:Introduction.js 
1import React, { useState } from 'react';2import '../styles/Introduction.css';3import '../styles/Story1_alignment.css';4import '../styles/Story2_alignment.css';5import '../styles/Story3_alignment.css';6const Introduction = () => {7 const [initiate, setInintiate] = useState("fun");8 const storytime = () => { 9 if (initiate === 'fun') {10 let story1_person1 = fetch("https://api.randomuser.me/");11 story1_person1.then(res => res.json())12 .then(data => {13 document.getElementById("story1_country1").innerHTML = data.results[0].location.country;14 document.getElementById("story1_first1a").innerHTML = data.results[0].name.first;15 document.getElementById("story1_first1b").innerHTML = data.results[0].name.first;16 document.getElementById("story1_first1c").innerHTML = data.results[0].name.first;17 document.getElementById("story1_first1d").innerHTML = data.results[0].name.first;18 document.getElementById("story1_first1e").innerHTML = data.results[0].name.first;19 document.getElementById("story1_first1f").innerHTML = data.results[0].name.first;20 document.getElementById("story1_first1g").innerHTML = data.results[0].name.first;21 document.getElementById("story1_last1").innerHTML = data.results[0].name.last;22 document.getElementById("story1_gender1a").innerHTML = data.results[0].gender;23 document.getElementById("story1_city1").innerHTML = data.results[0].location.city;24 document.getElementById("story1_number1").innerHTML = data.results[0].location.street.number;25 document.getElementById("story1_name1").innerHTML = data.results[0].location.street.name;26 document.getElementById("story1_username1").innerHTML = data.results[0].login.username;27 document.getElementById("story1_password1").innerHTML = data.results[0].login.password;28 document.getElementById("story1_age1").innerHTML = data.results[0].dob.age;29 if (data.results[0].gender === "male") {30 document.getElementById("story1_gender1b").innerHTML = "he";31 document.getElementById("story1_gender1c").innerHTML = "he";32 } else {33 document.getElementById("story1_gender1b").innerHTML = "she";34 document.getElementById("story1_gender1c").innerHTML = "she";35 }36 });37 let story1_person2 = fetch("https://api.randomuser.me/");38 story1_person2.then(res => res.json())39 .then(data => {40 document.getElementById("story1_title2").innerHTML = data.results[0].name.title; 41 document.getElementById("story1_first2").innerHTML = data.results[0].name.first;42 document.getElementById("story1_last2").innerHTML = data.results[0].name.last;43 });44 let story1_person3 = fetch("https://api.randomuser.me/");45 story1_person3.then(res => res.json())46 .then(data => {47 document.getElementById("story1_username3a").innerHTML = data.results[0].login.username;48 document.getElementById("story1_username3b").innerHTML = data.results[0].login.username;49 document.getElementById("story1_first3").innerHTML = data.results[0].name.first;50 document.getElementById("story1_last3").innerHTML = data.results[0].name.last;51 document.getElementById("story1_country3").innerHTML = data.results[0].location.country;52 });53 document.getElementById("story_1").style.display = "none";54 document.getElementById("message").style.display = "block";55 setTimeout(() => {56 document.getElementById("story_2").style.display = "none";57 document.getElementById("story_3").style.display = "none";58 document.getElementById("message").style.display = "none";59 document.getElementById("story_1").style.display = "block";60 }, 1000)61 }62 else if (initiate === 'adventure') {63 let story2_person1 = fetch("https://api.randomuser.me/");64 story2_person1.then(res => res.json())65 .then(data => {66 document.getElementById("story2_first1a").innerHTML = data.results[0].name.first;67 document.getElementById("story2_first1b").innerHTML = data.results[0].name.first;68 document.getElementById("story2_first1c").innerHTML = data.results[0].name.first;69 document.getElementById("story2_first1d").innerHTML = data.results[0].name.first;70 document.getElementById("story2_first1e").innerHTML = data.results[0].name.first;71 document.getElementById("story2_first1f").innerHTML = data.results[0].name.first;72 document.getElementById("story2_first1g").innerHTML = data.results[0].name.first;73 document.getElementById("story2_last1").innerHTML = data.results[0].name.last;74 document.getElementById("story2_gender1a").innerHTML = data.results[0].gender;75 document.getElementById("story2_country1").innerHTML = data.results[0].location.country;76 document.getElementById("story2_age1").innerHTML = data.results[0].dob.age;77 if (data.results[0].gender === "male") {78 document.getElementById("story2_gender1b").innerHTML = "his";79 document.getElementById("story2_gender1c").innerHTML = "his";80 document.getElementById("story2_gender1d").innerHTML = "he";81 document.getElementById("story2_gender1e").innerHTML = "his";82 document.getElementById("story2_gender1f").innerHTML = "he";83 document.getElementById("story2_gender1g").innerHTML = "his";84 } else {85 document.getElementById("story2_gender1b").innerHTML = "her";86 document.getElementById("story2_gender1c").innerHTML = "her";87 document.getElementById("story2_gender1d").innerHTML = "she";88 document.getElementById("story2_gender1e").innerHTML = "her";89 document.getElementById("story2_gender1f").innerHTML = "she";90 document.getElementById("story2_gender1g").innerHTML = "her";91 }92 });93 let story2_person2 = fetch("https://api.randomuser.me/");94 story2_person2.then(res => res.json())95 .then(data => { 96 document.getElementById("story2_first2a").innerHTML = data.results[0].name.first;97 document.getElementById("story2_first2b").innerHTML = data.results[0].name.first;98 document.getElementById("story2_first2c").innerHTML = data.results[0].name.first;99 if (data.results[0].gender === "male") {100 document.getElementById("story2_gender2").innerHTML = "he";101 } else {102 document.getElementById("story2_gender2").innerHTML = "she";103 }104 });105 let story2_person3 = fetch("https://api.randomuser.me/");106 story2_person3.then(res => res.json())107 .then(data => {108 document.getElementById("story2_first3a").innerHTML = data.results[0].name.first;109 document.getElementById("story2_first3b").innerHTML = data.results[0].name.first;110 });111 let story2_person4 = fetch("https://api.randomuser.me/");112 story2_person4.then(res => res.json())113 .then(data => {114 document.getElementById("story2_country4").innerHTML = data.results[0].location.country;115 document.getElementById("story2_first4").innerHTML = data.results[0].name.first;116 });117 document.getElementById("story_2").style.display = "none"; 118 document.getElementById("message").style.display = "block";119 setTimeout(() => {120 document.getElementById("story_1").style.display = "none";121 document.getElementById("story_3").style.display = "none";122 document.getElementById("message").style.display = "none";123 document.getElementById("story_2").style.display = "block"; 124 }, 1000) 125 }126 else if (initiate === 'detective') {127 let story3_person1 = fetch("https://api.randomuser.me/");128 story3_person1.then(res => res.json())129 .then(data => {130 document.getElementById("story3_city1").innerHTML = data.results[0].location.city;131 document.getElementById("story3_country1").innerHTML = data.results[0].location.country;132 document.getElementById("story3_first1a").innerHTML = data.results[0].name.first;133 document.getElementById("story3_first1b").innerHTML = data.results[0].name.first;134 document.getElementById("story3_first1c").innerHTML = data.results[0].name.first;135 document.getElementById("story3_last1").innerHTML = data.results[0].name.last;136 document.getElementById("story3_age1").innerHTML = data.results[0].dob.age;137 document.getElementById("story3_gender1").innerHTML = data.results[0].gender;138 });139 let story3_person2 = fetch("https://api.randomuser.me/");140 story3_person2.then(res => res.json())141 .then(data => {142 document.getElementById("story3_title2").innerHTML = data.results[0].name.title;143 document.getElementById("story3_first2a").innerHTML = data.results[0].name.first; 144 document.getElementById("story3_first2b").innerHTML = data.results[0].name.first;145 document.getElementById("story3_last2").innerHTML = data.results[0].name.last;146 });147 let story3_person3 = fetch("https://api.randomuser.me/");148 story3_person3.then(res => res.json())149 .then(data => {150 document.getElementById("story3_title3").innerHTML = data.results[0].name.title;151 document.getElementById("story3_first3a").innerHTML = data.results[0].name.first;152 document.getElementById("story3_first3b").innerHTML = data.results[0].name.first;153 document.getElementById("story3_first3c").innerHTML = data.results[0].name.first;154 document.getElementById("story3_first3d").innerHTML = data.results[0].name.first;155 document.getElementById("story3_first3e").innerHTML = data.results[0].name.first;156 document.getElementById("story3_first3f").innerHTML = data.results[0].name.first;157 document.getElementById("story3_first3g").innerHTML = data.results[0].name.first;158 document.getElementById("story3_first3h").innerHTML = data.results[0].name.first;159 document.getElementById("story3_last3").innerHTML = data.results[0].name.last;160 document.getElementById("story3_gender3a").innerHTML = data.results[0].gender;161 document.getElementById("story3_country3").innerHTML = data.results[0].location.country;162 if (data.results[0].gender === "male") {163 document.getElementById("story3_gender3a").innerHTML = "he";164 document.getElementById("story3_gender3b").innerHTML = "his";165 document.getElementById("story3_gender3c").innerHTML = "he";166 document.getElementById("story3_gender3d").innerHTML = "he";167 document.getElementById("story3_gender3e").innerHTML = "he";168 document.getElementById("story3_gender3f").innerHTML = "he";169 } else {170 document.getElementById("story3_gender3a").innerHTML = "she";171 document.getElementById("story3_gender3b").innerHTML = "her";172 document.getElementById("story3_gender3c").innerHTML = "she";173 document.getElementById("story3_gender3d").innerHTML = "she";174 document.getElementById("story3_gender3e").innerHTML = "she";175 document.getElementById("story3_gender3f").innerHTML = "she";176 }177 });178 let story3_person4 = fetch("https://api.randomuser.me/");179 story3_person4.then(res => res.json())180 .then(data => {181 document.getElementById("story3_first4a").innerHTML = data.results[0].name.first; 182 document.getElementById("story3_first4b").innerHTML = data.results[0].name.first;183 document.getElementById("story3_first4c").innerHTML = data.results[0].name.first;184 document.getElementById("story3_first4d").innerHTML = data.results[0].name.first; 185 document.getElementById("story3_first4e").innerHTML = data.results[0].name.first; 186 document.getElementById("story3_last4").innerHTML = data.results[0].name.last;187 document.getElementById("story3_email4").innerHTML = data.results[0].email;188 document.getElementById("story3_name4").innerHTML = data.results[0].location.street.name;189 });190 document.getElementById("story_3").style.display = "none";191 document.getElementById("message").style.display = "block";192 setTimeout(() => {193 document.getElementById("story_1").style.display = "none";194 document.getElementById("story_2").style.display = "none";195 document.getElementById("message").style.display = "none";196 document.getElementById("story_3").style.display = "block";197 }, 1000)198 }199 }200 return (201 <div>202 <div className="generator_box">203 <h1>Welcome to the random story generator</h1>204 <h2>This generator will display randomly generated nouns at the touch of a button.<br/>205 You can randomly generate one of three different stories. After selecting the type of 206 story you wish to hear press the generate button to display the story.207 </h2>208 <div className="generator_box_attributes">209 <label htmlFor="stories">What type of story would you like to hear?</label>210 <select className="story_selector" value={initiate} onChange={(e) => {211 const selection = e.target.value;212 setInintiate(selection);213 }}>214 <option value="fun">Fun story</option>215 <option value="adventure">Adventurous story</option>216 <option value="detective">Crime solving story</option>217 </select>218 <div><button className="generator_button" onClick={storytime}>Generate</button></div>219 </div>220 <div id="message">loading...</div> 221 </div>222 <div id="story_1">It was a bright and warm Saturday afternoon in <div id="story1_country1"></div>, and <div id="story1_first1a"></div> <div id="story1_last1"></div>, 223a <div id="story1_gender1a"></div> in <div id="story1_city1"></div>, decided to go out for a jog. During the jog, <div id="story1_first1b"></div> took a quick break to buy some 224ice cream at <div id="story1_title2"></div>. <div id="story1_first2"></div> <div id="story1_last2"></div>'s ice cream stand. After some ice cream, <div id="story1_first1c"></div> would 225jog for a half-hour longer then head home at <div id="story1_number1"></div>, <div id="story1_name1"></div>. With some free time, <div id="story1_first1d"></div> thought 226it was a good time to watch some YouTube videos. After <div id="story1_first1e"></div> logged in with the username <div id="story1_username1"></div> and expertly thought 227out password "<div id="story1_password1"></div>", <div id="story1_gender1b"></div> saw that <div id="story1_username3a"></div> had uploaded a new video. <div id="story1_username3b"></div>, 228aka <div id="story1_first3"></div> <div id="story1_last3"></div>, is a famous YouTuber in <div id="story1_country3"></div>, and <div id="story1_first1f"></div>'s favorite. After 229watching the video, <div id="story1_first1g"></div>, being at the crisp age of <div id="story1_age1"></div>, was fully refreshed and ready to go on another jog, and <div id="story1_gender1c"></div> lived 230happily ever after...I think...</div>231 <div id="story_2">It was a partly cloudy morning on Saturday and <div id="story2_first1a"></div> <div id="story2_last1"></div>, a <div id="story2_gender1a"></div> in <div id="story2_country1"></div> was ready to 232go mountain climbing with <div id="story2_gender1b"></div> friends, <div id="story2_first2a"></div> and <div id="story2_first3a"></div>. <div id="story2_first1b"></div>, at the ripe age of <div id="story2_age1"></div>, 233was getting way ahead of <div id="story2_gender1c"></div> friends, telling them to hurry up. <div id="story2_first3b"></div> told <div id="story2_first1c"></div> to 234be patient, because this was <div id="story2_first2b"></div>'s first time mountain climbing and that <div id="story2_gender2"></div> was still slightly 235afraid. While <div id="story2_first1d"></div> was waiting, <div id="story2_gender1d"></div> was texting <div id="story2_gender1e"></div> friend 236from <div id="story2_country4"></div>, <div id="story2_first4"></div>. Once <div id="story2_first1e"></div>'s friends caught up, they decided to take a small break. 237While <div id="story2_first1f"></div> was bored and looking around, <div id="story2_gender1f"></div> noticed what looked like a sort of opening. 238After pulling some large rocks out of the way, <div id="story2_first1g"></div> discovered that it was a cave. After showing <div id="story2_gender1g"></div> friends, 239they decided to go in to see what was in there. Then they saw what appearred to be a treasure chest of some sort. <div id="story2_first2c"></div> picked the container up, and upon 240opening the container, it was shortly after they realized that they only stumbled upon a geocache241with a rubber ball, two pennies, a worn out sticker, a couple pieces of gum, and someone advertising for 242their instagram account. Maybe it wasn't exactly treasure, but they realized that the joy is in the journey 243and to slow down every once in a while to enjoy life.</div>244 <div id="story_3">It was a rainy Saturday morning in <div id="story3_city1"></div>, <div id="story3_country1"></div>, and a crime had recently been reported: the victim 245was <div id="story3_first1a"></div> <div id="story3_last1"></div>, a <div id="story3_age1"></div> year-old <div id="story3_gender1"></div> who appears to have been murdered. After thorough 246investigation, they found no leads, no wittnesses; nothing. The cheif of police, <div id="story3_title2"></div>. <div id="story3_first2a"></div> <div id="story3_last2"></div>, 247decided to call in Private Investigator <div id="story3_title3"></div>. <div id="story3_first3a"></div> <div id="story3_last3"></div> in the hopes of finding 248something. When PI <div id="story3_first3b"></div> had arrived on the scene, <div id="story3_gender3a"></div> decided to take 249a quick look in all the rooms. After this, <div id="story3_first3c"></div> took a look at a list of possible suspects. Finally, <div id="story3_first3d"></div> would 250take some quiet time to carefully gather <div id="story3_gender3b"></div> thoughts then proceed to search more thoroughly. After some time and 251investigation, <div id="story3_gender3c"></div> had figured it out. The culprit was one of the victim's friends, <div id="story3_first4a"></div> <div id="story3_last4"></div>. 252First off, the victim, <div id="story3_first1b"></div>, had died due to a blow to the head from an unidentified object from behind. The way <div id="story3_first1c"></div> was 253hit from behnid, <div id="story3_first3e"></div> knew that this was the work of an individual who was left-handed. Moreso, an angry 254message in the form of an E-mail was sent to the victim; the E-mail was: <div id="story3_email4"></div>, which was <div id="story3_first4b"></div>'s 255E-mail. <div id="story3_first3f"></div> also noticed some lightly imprinted muddy footprints in the living room, heading towards <div id="story3_name4"></div>, 256the street where <div id="story3_first4c"></div> lives. The large gap in the footprints indicated that the person was257running. Also, the size of the footprints looked about the same size shoe that <div id="story3_first4d"></div> would wear. Finally, <div id="story3_first4e"></div> had 258no alibi. With a combination of all these clues <div id="story3_first3g"></div> was certain <div id="story3_gender3d"></div> came to the right 259conclusion. <div id="story3_first2b"></div> was stunned and couldn't believe how quickly <div id="story3_gender3e"></div> came to such a conclusion. 260In the end, PI <div id="story3_first3h"></div> turned out to be correct and <div id="story3_gender3f"></div> decided to take a two-week vacation 261at <div id="story3_country3"></div> and take a break for a while.</div>262 </div>263 )264}...
ThreeStoryDialog.js
Source:ThreeStoryDialog.js
1import React from "react";2import Button from "@material-ui/core/Button";3import TextField from "@material-ui/core/TextField";4import Dialog from "@material-ui/core/Dialog";5import DialogActions from "@material-ui/core/DialogActions";6import DialogContent from "@material-ui/core/DialogContent";7import DialogContentText from "@material-ui/core/DialogContentText";8import DialogTitle from "@material-ui/core/DialogTitle";9import Visibility from "@material-ui/icons/Visibility";10export default class ThreeStoryDialog extends React.Component {11 constructor(props) {12 super(props);13 this.state = {14 open: false,15 error: "",16 story1_ImgSRC: "",17 story1_ImgAlt: "",18 story1_Link: "",19 story1_CTA: "",20 story1_Headline_Text: "",21 story1_Paragraph_Text: "",22 story2_ImgSRC: "",23 story2_ImgAlt: "",24 story2_Link: "",25 story2_CTA: "",26 story2_Headline_Text: "",27 story2_Paragraph_Text: "",28 story3_ImgSRC: "",29 story3_ImgAlt: "",30 story3_Link: "",31 story3_CTA: "",32 story3_Headline_Text: "",33 story3_Paragraph_Text: ""34 };35 this.ErrorCheck = this.ErrorCheck.bind(this);36 this.sendStoryInfo = this.sendStoryInfo.bind(this);37 this.handleCancel = this.handleCancel.bind(this);38 }39 componentWillMount() {40 if (this.props.originalStory.length > 0) {41 const story1 = this.props.originalStory.filter(42 (story) => Object.keys(story)[0] === "Story_1"43 )[0].Story_1;44 const story2 = this.props.originalStory.filter(45 (story) => Object.keys(story)[0] === "Story_2"46 )[0].Story_2;47 const story3 = this.props.originalStory.filter(48 (story) => Object.keys(story)[0] === "Story_3"49 )[0].Story_3;50 this.setState({51 story1_ImgSRC: story1.story1_ImgSRC,52 story1_ImgAlt: story1.story1_ImgAlt,53 story1_Link: story1.story1_Link,54 story1_CTA: story1.story1_CTA,55 story1_Headline_Text: story1.story1_Headline_Text,56 story1_Paragraph_Text: story1.story1_Paragraph_Text,57 story2_ImgSRC: story2.story2_ImgSRC,58 story2_ImgAlt: story2.story2_ImgAlt,59 story2_Link: story2.story2_Link,60 story2_CTA: story2.story2_CTA,61 story2_Headline_Text: story2.story2_Headline_Text,62 story2_Paragraph_Text: story2.story2_Paragraph_Text,63 story3_ImgSRC: story3.story3_ImgSRC,64 story3_ImgAlt: story3.story3_ImgAlt,65 story3_Link: story3.story3_Link,66 story3_CTA: story3.story3_CTA,67 story3_Headline_Text: story3.story3_Headline_Text,68 story3_Paragraph_Text: story3.story3_Paragraph_Text69 });70 }71 }72 handleClickOpen = () => {73 this.setState({ open: true });74 };75 ErrorCheck = () => {76 if (this.props.storyType === "Story_1") {77 if (!this.state.story1_ImgSRC) {78 this.setState({79 error: "Story1's Img SRC is required*"80 });81 console.log(this.state.error, "ERROR");82 } else if (!this.state.story1_ImgAlt) {83 this.setState({84 error: "Story1's Img Alt Tag Text is required*"85 });86 } else if (!this.state.story1_Link) {87 this.setState({88 error: "Story1's Link is required*"89 });90 } else if (!this.state.story1_CTA) {91 this.setState({92 error: "Story1's CTA is required*"93 });94 } else if (!this.state.story1_Headline_Text) {95 this.setState({96 error: "Story1's Headline is required*"97 });98 } else if (!this.state.story1_Paragraph_Text) {99 this.setState({100 error: "Story1's Paragraph is required*"101 });102 } else {103 this.setState({104 error: ""105 });106 this.sendStoryInfo();107 }108 }109 if (this.props.storyType === "Story_2") {110 if (!this.state.story2_ImgSRC) {111 this.setState({112 error: "Story2's Img SRC is required*"113 });114 } else if (!this.state.story2_ImgAlt) {115 this.setState({116 error: "Story2's Img Alt Tag Text is required*"117 });118 } else if (!this.state.story2_Link) {119 this.setState({120 error: "Story2's Link is required*"121 });122 } else if (!this.state.story2_CTA) {123 this.setState({124 error: "Story2's CTA is required*"125 });126 } else if (!this.state.story2_Headline_Text) {127 this.setState({128 error: "Story2's Headline is required*"129 });130 } else if (!this.state.story2_Paragraph_Text) {131 this.setState({132 error: "Story2's Paragraph is required*"133 });134 } else {135 this.setState({136 error: ""137 });138 this.sendStoryInfo();139 }140 }141 if (this.props.storyType === "Story_3") {142 if (!this.state.story3_ImgSRC) {143 this.setState({144 error: "Story3's Img SRC is required*"145 });146 } else if (!this.state.story3_ImgAlt) {147 this.setState({148 error: "Story3's Img Alt Tag Text is required*"149 });150 } else if (!this.state.story3_Link) {151 this.setState({152 error: "Story3's Link is required*"153 });154 } else if (!this.state.story3_CTA) {155 this.setState({156 error: "Story3's CTA is required*"157 });158 } else if (!this.state.story3_Headline_Text) {159 this.setState({160 error: "Story3's Headline is required*"161 });162 } else if (!this.state.story3_Paragraph_Text) {163 this.setState({164 error: "Story3's Paragraph is required*"165 });166 } else {167 this.setState({168 error: ""169 });170 this.sendStoryInfo();171 }172 }173 };174 handleClose = () => {175 this.ErrorCheck();176 };177 handleCancel = () => {178 this.setState({179 open: false180 });181 };182 sendStoryInfo = () => {183 if (this.props.storyType === "Story_1") {184 let Story_1 = {185 story1_ImgSRC: this.state.story1_ImgSRC,186 story1_ImgAlt: this.state.story1_ImgAlt,187 story1_Link: this.state.story1_Link,188 story1_CTA: this.state.story1_CTA,189 story1_Headline_Text: this.state.story1_Headline_Text,190 story1_Paragraph_Text: this.state.story1_Paragraph_Text191 };192 this.props.retrieveStoryFormInput({ Story_1 });193 this.setState({194 open: false195 });196 }197 if (this.props.storyType === "Story_2") {198 let Story_2 = {199 story2_ImgSRC: this.state.story2_ImgSRC,200 story2_ImgAlt: this.state.story2_ImgAlt,201 story2_Link: this.state.story2_Link,202 story2_CTA: this.state.story2_CTA,203 story2_Headline_Text: this.state.story2_Headline_Text,204 story2_Paragraph_Text: this.state.story2_Paragraph_Text205 };206 this.props.retrieveStoryFormInput({ Story_2 });207 this.setState({208 open: false209 });210 }211 if (this.props.storyType === "Story_3") {212 let Story_3 = {213 story3_ImgSRC: this.state.story3_ImgSRC,214 story3_ImgAlt: this.state.story3_ImgAlt,215 story3_Link: this.state.story3_Link,216 story3_CTA: this.state.story3_CTA,217 story3_Headline_Text: this.state.story3_Headline_Text,218 story3_Paragraph_Text: this.state.story3_Paragraph_Text219 };220 this.props.retrieveStoryFormInput({ Story_3 });221 this.setState({222 open: false223 });224 }225 };226 handleChange = (name) => (event) => {227 this.setState({228 [name]: event.target.value229 });230 };231 render() {232 let storyType = this.props.storyType;233 return (234 <div>235 <Button236 color="secondary"237 onClick={this.handleClickOpen}>238 <Visibility/>239 </Button>240 <Dialog241 open={this.state.open}242 onClose={this.handleClose}243 aria-labelledby="form-dialog-title">244 <DialogTitle id="form-dialog-title">245 {this.props.storyType}246 </DialogTitle>247 <DialogContent>248 <DialogContentText>249 <div>250 Please enter all of the information for {this.props.storyType}251 <br />252 <span className="error_text">{this.state.error}</span>253 </div>254 </DialogContentText>255 <TextField256 autoFocus257 margin="dense"258 id="name"259 value={260 storyType === "Story_1"261 ? this.state.story1_ImgSRC262 : storyType === "Story_2"263 ? this.state.story2_ImgSRC264 : storyType === "Story_3"265 ? this.state.story3_ImgSRC266 : null267 }268 label={269 storyType === "Story_1"270 ? "Story1 Image SRC"271 : storyType === "Story_2"272 ? "Story2_Image SRC"273 : storyType === "Story_3"274 ? "Story3_Image SRC"275 : null276 }277 helperText={278 storyType === "Story_1"279 ? "Example : Story_Image_Platdform_Launch.jpg?$staticlink$"280 : storyType === "Story_2"281 ? "Example: Story_Image_Crocs_Cares_Traidsls.jpg?$staticlink$"282 : "Example : Story_Imwerage_Crocs_Mobile_Truck.jpg?$staticlink$"283 }284 type="image source"285 fullWidth286 onChange={287 storyType === "Story_1"288 ? this.handleChange("story1_ImgSRC")289 : storyType === "Story_2"290 ? this.handleChange("story2_ImgSRC")291 : storyType === "Story_3"292 ? this.handleChange("story3_ImgSRC")293 : null294 }295 />296 <TextField297 autoFocus298 margin="dense"299 id="alt"300 value={301 storyType === "Story_1"302 ? this.state.story1_ImgAlt303 : storyType === "Story_2"304 ? this.state.story2_ImgAlt305 : storyType === "Story_3"306 ? this.state.story3_ImgAlt307 : null308 }309 helperText={310 storyType === "Story_1"311 ? "Example : Crocband Platform Clog "312 : storyType === "Story_2"313 ? "Example : Crocs Cares"314 : "Example : Crocs Cares Mobile Store"315 }316 label={317 storyType === "Story_1"318 ? "Story1 Image Alt"319 : storyType === "Story_2"320 ? "Story2 Image Alt"321 : storyType === "Story_3"322 ? "Story3 Image Alt"323 : null324 }325 fullWidth326 onChange={327 storyType === "Story_1"328 ? this.handleChange("story1_ImgAlt")329 : storyType === "Story_2"330 ? this.handleChange("story2_ImgAlt")331 : storyType === "Story_3"332 ? this.handleChange("story3_ImgAlt")333 : null334 }335 />336 <TextField337 autoFocus338 margin="dense"339 helperText={340 storyType === "Story_1"341 ? "Example : $httpUrl('Page-Show','cid','crocs-launches-platform-clogs')$"342 : storyType === "Story_2"343 ? "Example : $httpUrl('Page-Show','cid','crocs-cares-rebuilding-trails-in-colorado')$"344 : "Example : $httpUrl('Page-Show','cid','crocs-mobile-store')$"345 }346 value={347 storyType === "Story_1"348 ? this.state.story1_Link349 : storyType === "Story_2"350 ? this.state.story2_Link351 : storyType === "Story_3"352 ? this.state.story3_Link353 : null354 }355 id="link"356 label={357 storyType === "Story_1"358 ? "Story1 Link"359 : storyType === "Story_2"360 ? "Story 2 Link"361 : storyType === "Story_3"362 ? "Story 3 Link"363 : null364 }365 fullWidth366 onChange={367 storyType === "Story_1"368 ? this.handleChange("story1_Link")369 : storyType === "Story_2"370 ? this.handleChange("story2_Link")371 : storyType === "Story_3"372 ? this.handleChange("story3_Link")373 : null374 }375 />376 <TextField377 autoFocus378 margin="dense"379 id="CTA"380 value={381 storyType === "Story_1"382 ? this.state.story1_CTA383 : storyType === "Story_2"384 ? this.state.story2_CTA385 : storyType === "Story_3"386 ? this.state.story3_CTA387 : null388 }389 helperText={"Read More"}390 label={391 storyType === "Story_1"392 ? "Story1 CTA"393 : storyType === "Story_2"394 ? "Story 2 CTA"395 : storyType === "Story_3"396 ? "Story 3 CTA"397 : null398 }399 fullWidth400 onChange={401 storyType === "Story_1"402 ? this.handleChange("story1_CTA")403 : storyType === "Story_2"404 ? this.handleChange("story2_CTA")405 : storyType === "Story_3"406 ? this.handleChange("story3_CTA")407 : null408 }409 />410 <TextField411 autoFocus412 margin="dense"413 id="headline"414 value={415 storyType === "Story_1"416 ? this.state.story1_Headline_Text417 : storyType === "Story_2"418 ? this.state.story2_Headline_Text419 : storyType === "Story_3"420 ? this.state.story3_Headline_Text421 : null422 }423 label={424 storyType === "Story_1"425 ? "Story1 Headline Text"426 : storyType === "Story_2"427 ? "Story 2 Headline Text"428 : storyType === "Story_3"429 ? "Story 3 Headline Text"430 : null431 }432 helperText={433 storyType === "Story_1"434 ? "Example : Crocs Launches Crocband⢠Platform Clog"435 : storyType === "Story_2"436 ? "Example : Crocs Cares, Building Trails"437 : "Example : The Crocs Mobile Store"438 }439 fullWidth440 onChange={441 storyType === "Story_1"442 ? this.handleChange("story1_Headline_Text")443 : storyType === "Story_2"444 ? this.handleChange("story2_Headline_Text")445 : storyType === "Story_3"446 ? this.handleChange("story3_Headline_Text")447 : null448 }449 />450 <TextField451 autoFocus452 margin="dense"453 id="name"454 label={455 storyType === "Story_1"456 ? "Story1 Paragraph Text"457 : storyType === "Story_2"458 ? "Story 2 Paragraph Text"459 : storyType === "Story_3"460 ? "Story 3 Paragraph Text"461 : null462 }463 helperText={464 storyType === "Story_1"465 ? "Example : On August 1, 2018, Crocs launched the Crocband⢠Platform Clog, an exciting new way for Crocs fans to elevate their style."466 : storyType === "Story_2"467 ? "Example : Volunteers from Crocs gathered at Heil Valley Ranch in Boulder County to assist in cutting new trails."468 : "Example : The Mobile Store travels within and outside Colorado to help everyone be comfortable in their own shoes, no matter their location."469 }470 value={471 storyType === "Story_1"472 ? this.state.story1_Paragraph_Text473 : storyType === "Story_2"474 ? this.state.story2_Paragraph_Text475 : storyType === "Story_3"476 ? this.state.story3_Paragraph_Text477 : null478 }479 fullWidth480 onChange={481 storyType === "Story_1"482 ? this.handleChange("story1_Paragraph_Text")483 : storyType === "Story_2"484 ? this.handleChange("story2_Paragraph_Text")485 : storyType === "Story_3"486 ? this.handleChange("story3_Paragraph_Text")487 : null488 }489 />490 </DialogContent>491 <DialogActions>492 <Button onClick={this.handleCancel} color="primary">493 Cancel494 </Button>495 <Button onClick={this.ErrorCheck} color="primary">496 Subscribe497 </Button>498 </DialogActions>499 </Dialog>500 </div>501 );502 }...
Three_StoriesPreview.js
Source:Three_StoriesPreview.js
1import React, { Component } from "react";2class Three_StoriesPreview extends Component {3 render() {4 console.log(this.props, "NO PROPS>");5 let Story1 = this.props.modulePreview.stories.filter(6 (story) => Object.keys(story)[0] === "Story_1"7 )[0].Story_1;8 let Story2 = this.props.modulePreview.stories.filter(9 (story) => Object.keys(story)[0] === "Story_2"10 )[0].Story_2;11 let Story3 = this.props.modulePreview.stories.filter(12 (story) => Object.keys(story)[0] === "Story_3"13 )[0].Story_3;14 const Story1_IMG =15 "http://staging-na-crox.demandware.net/on/demandware.static/-/Sites-crocs_us-Library/default/" +16 Story1.story1_ImgSRC.replace("?$staticlink$", "");17 const Story2_IMG =18 "http://staging-na-crox.demandware.net/on/demandware.static/-/Sites-crocs_us-Library/default/" +19 Story2.story2_ImgSRC.replace("?$staticlink$", "");20 const Story3_IMG =21 "http://staging-na-crox.demandware.net/on/demandware.static/-/Sites-crocs_us-Library/default/" +22 Story3.story3_ImgSRC.replace("?$staticlink$", "");23 return (24 <div style={{ width: "100%" }} className= "flex_box_row">25 <div className="story1 col-xs-12 col-md-4 flex_box_column">26 <a href={Story1.story1_Link} className="full-width">27 <img28 className="img-responsive mobile_image_full_screen"29 alt={Story1.story1_ImgAlt}30 src={Story1_IMG}31 />32 </a>33 <div className="story_text">34 <h335 className="cx-heavy-brand-font text-left"36 style={{ fontSize: "20px" }}>37 {Story1.story1_Headline_Text}38 </h3>39 <p className="cx-brand-font text-left paragraph_text">40 {Story1.story1_Paragraph_Text}41 </p>42 <div className="text-left">43 <a44 href={Story1.story1_Link}45 className="cta_text cx-brand-font text-left">46 {Story1.story1_CTA}47 </a>48 </div>49 </div>50 </div>51 <div className="story2 col-xs-12 col-md-4 flex_box_column">52 <a href={Story2.story2_Link} className= "full-width">53 <img54 className="img-responsive"55 alt={Story2.story2_ImgAlt}56 src={Story2_IMG}57 />58 </a>59 <div className="story_text">60 <h361 className="cx-heavy-brand-font text-left"62 style={{ fontSize: "20px" }}>63 {Story2.story2_Headline_Text}64 </h3>65 <p className="cx-brand-font text-left paragraph_text">66 {Story2.story2_Paragraph_Text}67 </p>68 <div className="text-left">69 <a href={Story2.story2_Link} className="cta_text cx-brand-font">70 {Story2.story2_CTA}71 </a>72 </div>73 </div>74 </div>75 <div className="story3 col-xs-12 col-md-4 flex_box_column">76 <a href={Story3.story3_Link} className="full-width">77 <img78 className="img-responsive mobile_image_full_screen"79 alt={Story3.story3_ImgAlt}80 src={Story3_IMG}81 />82 </a>83 <div className="story_text">84 <h385 className="cx-heavy-brand-font text-left"86 style={{ fontSize: "20px" }}>87 {Story3.story3_Headline_Text}88 </h3>89 <p className="cx-brand-font text-left paragraph_text">90 {Story3.story3_Paragraph_Text}91 </p>92 <div className="text-left">93 <a href={Story3.story3_Link} className="cta_text cx-brand-font">94 {Story3.story3_CTA}95 </a>96 </div>97 </div>98 </div>99 </div>100 );101 }102}...
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?
