{"action":"created","issue":{"url":"https://api.github.com/repos/Automattic/wp-calypso/issues/4468","repository_url":"https://api.github.com/repos/Automattic/wp-calypso","labels_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/4468/labels{/name}","comments_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/4468/comments","events_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/4468/events","html_url":"https://github.com/Automattic/wp-calypso/pull/4468","id":145162030,"number":4468,"title":"GuidesTours: add step formatting","user":{"login":"lsinger","id":23619,"avatar_url":"https://avatars.githubusercontent.com/u/23619?v=3","gravatar_id":"","url":"https://api.github.com/users/lsinger","html_url":"https://github.com/lsinger","followers_url":"https://api.github.com/users/lsinger/followers","following_url":"https://api.github.com/users/lsinger/following{/other_user}","gists_url":"https://api.github.com/users/lsinger/gists{/gist_id}","starred_url":"https://api.github.com/users/lsinger/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lsinger/subscriptions","organizations_url":"https://api.github.com/users/lsinger/orgs","repos_url":"https://api.github.com/users/lsinger/repos","events_url":"https://api.github.com/users/lsinger/events{/privacy}","received_events_url":"https://api.github.com/users/lsinger/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/GuidesTours","name":"GuidesTours","color":"006b75"},{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Status]%20Needs%20Design%20Review","name":"[Status] Needs Design Review","color":"009800"},{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Status]%20Needs%20Review","name":"[Status] Needs Review","color":"fbca04"},{"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Type]%20Enhancement","name":"[Type] Enhancement","color":"c7def8"}],"state":"open","locked":false,"assignee":{"login":"lsinger","id":23619,"avatar_url":"https://avatars.githubusercontent.com/u/23619?v=3","gravatar_id":"","url":"https://api.github.com/users/lsinger","html_url":"https://github.com/lsinger","followers_url":"https://api.github.com/users/lsinger/followers","following_url":"https://api.github.com/users/lsinger/following{/other_user}","gists_url":"https://api.github.com/users/lsinger/gists{/gist_id}","starred_url":"https://api.github.com/users/lsinger/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lsinger/subscriptions","organizations_url":"https://api.github.com/users/lsinger/orgs","repos_url":"https://api.github.com/users/lsinger/repos","events_url":"https://api.github.com/users/lsinger/events{/privacy}","received_events_url":"https://api.github.com/users/lsinger/received_events","type":"User","site_admin":false},"milestone":{"url":"https://api.github.com/repos/Automattic/wp-calypso/milestones/72","html_url":"https://github.com/Automattic/wp-calypso/milestones/GuidesTours%20MVP","labels_url":"https://api.github.com/repos/Automattic/wp-calypso/milestones/72/labels","id":1671375,"number":72,"title":"GuidesTours MVP","description":"","creator":{"login":"ehg","id":215074,"avatar_url":"https://avatars.githubusercontent.com/u/215074?v=3","gravatar_id":"","url":"https://api.github.com/users/ehg","html_url":"https://github.com/ehg","followers_url":"https://api.github.com/users/ehg/followers","following_url":"https://api.github.com/users/ehg/following{/other_user}","gists_url":"https://api.github.com/users/ehg/gists{/gist_id}","starred_url":"https://api.github.com/users/ehg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ehg/subscriptions","organizations_url":"https://api.github.com/users/ehg/orgs","repos_url":"https://api.github.com/users/ehg/repos","events_url":"https://api.github.com/users/ehg/events{/privacy}","received_events_url":"https://api.github.com/users/ehg/received_events","type":"User","site_admin":false},"open_issues":9,"closed_issues":3,"state":"open","created_at":"2016-03-29T09:08:40Z","updated_at":"2016-04-05T15:29:14Z","due_on":null,"closed_at":null},"comments":4,"created_at":"2016-04-01T12:00:43Z","updated_at":"2016-04-05T19:54:47Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/Automattic/wp-calypso/pulls/4468","html_url":"https://github.com/Automattic/wp-calypso/pull/4468","diff_url":"https://github.com/Automattic/wp-calypso/pull/4468.diff","patch_url":"https://github.com/Automattic/wp-calypso/pull/4468.patch"},"body":"Closes #4379.\r\n\r\nThis PR adds a few additional step types to GuidesTours:\r\n\r\n- `GuidesFirstStep`, for the initial step of a tour;\r\n- `GuidesActionStep`, requiring the user to click a target element;\r\n- `GuidesLinkStep`, which provides a link in an \"extra\" area below; and\r\n- `GuidesFinishStep`, for the final step of a tour.\r\n\r\nThis isn't the last word on GuidesTours architecture, but a first improvement. We'll keep iterating on it. \r\n\r\nTexts in the GuidesTours configuration file now use i18n.translate. This has the added benefit that we can easily inject styling or even React components into our messages.\r\n\r\nSince we needed a \"secondary\" button type for the first step of a tour, this PR also adds one to the Button component. It has a light gray background that doesn't really come out in the GIF below. \r\n\r\nThis is what it should look like:\r\n\r\n![additional-step-types](https://cloud.githubusercontent.com/assets/23619/14285228/012b529e-fb4b-11e5-9b30-121281d4be66.gif)\r\n\r\nTo test:\r\n\r\n- check out this branch\r\n- run Calypso like so: `ENABLE_FEATURES=guidestours make run`\r\n- open (e.g.) http://calypso.localhost:3000/me\r\n- check whether the light gray background of the \"secondary\" button in the initial tour step is discernible from white\r\n- check that the steps in the GIF above work in different browsers and on different devices (mobile support is forthcoming)\r\n"},"comment":{"url":"https://api.github.com/repos/Automattic/wp-calypso/issues/comments/205967442","html_url":"https://github.com/Automattic/wp-calypso/pull/4468#issuecomment-205967442","issue_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/4468","id":205967442,"user":{"login":"lsinger","id":23619,"avatar_url":"https://avatars.githubusercontent.com/u/23619?v=3","gravatar_id":"","url":"https://api.github.com/users/lsinger","html_url":"https://github.com/lsinger","followers_url":"https://api.github.com/users/lsinger/followers","following_url":"https://api.github.com/users/lsinger/following{/other_user}","gists_url":"https://api.github.com/users/lsinger/gists{/gist_id}","starred_url":"https://api.github.com/users/lsinger/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lsinger/subscriptions","organizations_url":"https://api.github.com/users/lsinger/orgs","repos_url":"https://api.github.com/users/lsinger/repos","events_url":"https://api.github.com/users/lsinger/events{/privacy}","received_events_url":"https://api.github.com/users/lsinger/received_events","type":"User","site_admin":false},"created_at":"2016-04-05T19:54:47Z","updated_at":"2016-04-05T19:54:47Z","body":"@shaunandrews since you tweaked the wording already, maybe it's time to determine what the first tour will be exactly. \r\n\r\n- we can't point to things in the sidebar yet, so it'll likely exclusively be items in the masterbar plus centered steps. \r\n- the current posts / pages step is just there to demo the step with an added link, it feels weird in the flow. also the copy is just a placeholder. \r\n- I don't understand how I'd get more help by going to \"Me\" — can we change or clarify? \r\n\r\nI'd love to hear your thoughts on what initial, minimal set of steps we could use. "}}