{"action":"created","comment":{"url":"https://api.github.com/repos/rackerlabs/design-system/pulls/comments/167593568","pull_request_review_id":95833607,"id":167593568,"diff_hunk":"@@ -4,31 +4,254 @@ parent: Content Areas\n layout: component\n category: Components\n usage: >\n-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et purus nec dui scelerisque viverra non at enim. Maecenas consequat nisi in rhoncus molestie.\n+  Vertical steppers progressively disclose form inputs through a set of sequentially numbered steps. The design of the vertical stepper pattern lend it for use during complex or difficult workflows.\n preview-image: preview-images/vertical-stepper.svg\n-resource: false\n+resource: true\n status: in-progress\n-last-modified: 2017-08-17\n+last-modified: 2018-01-30\n ---\n \n {% include toc.html %}\n \n <section class=\"static-section\" markdown=\"1\">\n \n-## Step 1\n+## Introduction\n \n-{% figure [caption:\"\"] [class:\"image bg-light border\"] %}\n-![]({{site.cdn_url}}/img/components/stepper-1.svg){:width=\"100%\"}\n+<div class=\"hxRow\"  markdown=\"1\">\n+\n+{% column left:\"hxCol-4 hxCol-xs-12 hxCol-sm-12 hxCol-md-4 hxCol-lg-4\" %}\n+\n+### When to use\n+\n+- The stepper pattern is used for complex workflows that require multiple inputs from a user to complete. The complex workflow is segmented or chunked into thematic steps and then progressively revealed to the user via the stepper pattern. Vertical steppers fulfill the same need as a horizontal stepper, however the orientation yields itself to work within all screen sizes.\n+\n+### Best practices\n+\n+- Ensure a stepper has at minimum 3 steps and at maximum 5 steps.\n+- Name each step thematically based on the inputs contained within a step. For example, a step dealing with inputs Username, First name, Address, etc. could be labeled Account Info or User Details. This ensures users are primed for the type of information that will be presented in a step when first skimming a stepper form.","path":"_component_design/vertical-stepper.md","position":34,"original_position":34,"commit_id":"552e06672e8ab8c920e824647f25196e127e08c0","original_commit_id":"552e06672e8ab8c920e824647f25196e127e08c0","user":{"login":"technabors","id":586682,"avatar_url":"https://avatars3.githubusercontent.com/u/586682?v=4","gravatar_id":"","url":"https://api.github.com/users/technabors","html_url":"https://github.com/technabors","followers_url":"https://api.github.com/users/technabors/followers","following_url":"https://api.github.com/users/technabors/following{/other_user}","gists_url":"https://api.github.com/users/technabors/gists{/gist_id}","starred_url":"https://api.github.com/users/technabors/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/technabors/subscriptions","organizations_url":"https://api.github.com/users/technabors/orgs","repos_url":"https://api.github.com/users/technabors/repos","events_url":"https://api.github.com/users/technabors/events{/privacy}","received_events_url":"https://api.github.com/users/technabors/received_events","type":"User","site_admin":false},"body":"updated.","created_at":"2018-02-12T15:42:09Z","updated_at":"2018-02-12T15:42:09Z","html_url":"https://github.com/rackerlabs/design-system/pull/434#discussion_r167593568","pull_request_url":"https://api.github.com/repos/rackerlabs/design-system/pulls/434","author_association":"COLLABORATOR","_links":{"self":{"href":"https://api.github.com/repos/rackerlabs/design-system/pulls/comments/167593568"},"html":{"href":"https://github.com/rackerlabs/design-system/pull/434#discussion_r167593568"},"pull_request":{"href":"https://api.github.com/repos/rackerlabs/design-system/pulls/434"}},"in_reply_to_id":164863525},"pull_request":{"url":"https://api.github.com/repos/rackerlabs/design-system/pulls/434","id":166009405,"html_url":"https://github.com/rackerlabs/design-system/pull/434","diff_url":"https://github.com/rackerlabs/design-system/pull/434.diff","patch_url":"https://github.com/rackerlabs/design-system/pull/434.patch","issue_url":"https://api.github.com/repos/rackerlabs/design-system/issues/434","number":434,"state":"open","locked":false,"title":"docs(stepper): add in-progress vert-stepper docs","user":{"login":"technabors","id":586682,"avatar_url":"https://avatars3.githubusercontent.com/u/586682?v=4","gravatar_id":"","url":"https://api.github.com/users/technabors","html_url":"https://github.com/technabors","followers_url":"https://api.github.com/users/technabors/followers","following_url":"https://api.github.com/users/technabors/following{/other_user}","gists_url":"https://api.github.com/users/technabors/gists{/gist_id}","starred_url":"https://api.github.com/users/technabors/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/technabors/subscriptions","organizations_url":"https://api.github.com/users/technabors/orgs","repos_url":"https://api.github.com/users/technabors/repos","events_url":"https://api.github.com/users/technabors/events{/privacy}","received_events_url":"https://api.github.com/users/technabors/received_events","type":"User","site_admin":false},"body":"This PR adds the Vertical stepper component documentation with the 'in-progress' status.\r\n\r\n- Docs converted from sketch to HTML\r\n- New zoom hero image created\r\n- Images created @ 2x png size from doc.","created_at":"2018-01-30T15:16:56Z","updated_at":"2018-02-12T15:42:09Z","closed_at":null,"merged_at":null,"merge_commit_sha":"d6e3c08ed0cd6cf0344d1290e7ad52c90a24a597","assignee":null,"assignees":[],"requested_reviewers":[{"login":"araiford","id":933210,"avatar_url":"https://avatars3.githubusercontent.com/u/933210?v=4","gravatar_id":"","url":"https://api.github.com/users/araiford","html_url":"https://github.com/araiford","followers_url":"https://api.github.com/users/araiford/followers","following_url":"https://api.github.com/users/araiford/following{/other_user}","gists_url":"https://api.github.com/users/araiford/gists{/gist_id}","starred_url":"https://api.github.com/users/araiford/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/araiford/subscriptions","organizations_url":"https://api.github.com/users/araiford/orgs","repos_url":"https://api.github.com/users/araiford/repos","events_url":"https://api.github.com/users/araiford/events{/privacy}","received_events_url":"https://api.github.com/users/araiford/received_events","type":"User","site_admin":false}],"requested_teams":[],"labels":[{"id":674944869,"url":"https://api.github.com/repos/rackerlabs/design-system/labels/status-needs-review","name":"status-needs-review","color":"f9d0c4","default":false},{"id":674937922,"url":"https://api.github.com/repos/rackerlabs/design-system/labels/type-documentation","name":"type-documentation","color":"d4c5f9","default":false}],"milestone":null,"commits_url":"https://api.github.com/repos/rackerlabs/design-system/pulls/434/commits","review_comments_url":"https://api.github.com/repos/rackerlabs/design-system/pulls/434/comments","review_comment_url":"https://api.github.com/repos/rackerlabs/design-system/pulls/comments{/number}","comments_url":"https://api.github.com/repos/rackerlabs/design-system/issues/434/comments","statuses_url":"https://api.github.com/repos/rackerlabs/design-system/statuses/552e06672e8ab8c920e824647f25196e127e08c0","head":{"label":"rackerlabs:stepper-en","ref":"stepper-en","sha":"552e06672e8ab8c920e824647f25196e127e08c0","user":{"login":"rackerlabs","id":84293,"avatar_url":"https://avatars1.githubusercontent.com/u/84293?v=4","gravatar_id":"","url":"https://api.github.com/users/rackerlabs","html_url":"https://github.com/rackerlabs","followers_url":"https://api.github.com/users/rackerlabs/followers","following_url":"https://api.github.com/users/rackerlabs/following{/other_user}","gists_url":"https://api.github.com/users/rackerlabs/gists{/gist_id}","starred_url":"https://api.github.com/users/rackerlabs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rackerlabs/subscriptions","organizations_url":"https://api.github.com/users/rackerlabs/orgs","repos_url":"https://api.github.com/users/rackerlabs/repos","events_url":"https://api.github.com/users/rackerlabs/events{/privacy}","received_events_url":"https://api.github.com/users/rackerlabs/received_events","type":"Organization","site_admin":false},"repo":{"id":63092460,"name":"design-system","full_name":"rackerlabs/design-system","owner":{"login":"rackerlabs","id":84293,"avatar_url":"https://avatars1.githubusercontent.com/u/84293?v=4","gravatar_id":"","url":"https://api.github.com/users/rackerlabs","html_url":"https://github.com/rackerlabs","followers_url":"https://api.github.com/users/rackerlabs/followers","following_url":"https://api.github.com/users/rackerlabs/following{/other_user}","gists_url":"https://api.github.com/users/rackerlabs/gists{/gist_id}","starred_url":"https://api.github.com/users/rackerlabs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rackerlabs/subscriptions","organizations_url":"https://api.github.com/users/rackerlabs/orgs","repos_url":"https://api.github.com/users/rackerlabs/repos","events_url":"https://api.github.com/users/rackerlabs/events{/privacy}","received_events_url":"https://api.github.com/users/rackerlabs/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/rackerlabs/design-system","description":"A prototype of the Design System created by Rackspace Experience Design","fork":false,"url":"https://api.github.com/repos/rackerlabs/design-system","forks_url":"https://api.github.com/repos/rackerlabs/design-system/forks","keys_url":"https://api.github.com/repos/rackerlabs/design-system/keys{/key_id}","collaborators_url":"https://api.github.com/repos/rackerlabs/design-system/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/rackerlabs/design-system/teams","hooks_url":"https://api.github.com/repos/rackerlabs/design-system/hooks","issue_events_url":"https://api.github.com/repos/rackerlabs/design-system/issues/events{/number}","events_url":"https://api.github.com/repos/rackerlabs/design-system/events","assignees_url":"https://api.github.com/repos/rackerlabs/design-system/assignees{/user}","branches_url":"https://api.github.com/repos/rackerlabs/design-system/branches{/branch}","tags_url":"https://api.github.com/repos/rackerlabs/design-system/tags","blobs_url":"https://api.github.com/repos/rackerlabs/design-system/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/rackerlabs/design-system/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/rackerlabs/design-system/git/refs{/sha}","trees_url":"https://api.github.com/repos/rackerlabs/design-system/git/trees{/sha}","statuses_url":"https://api.github.com/repos/rackerlabs/design-system/statuses/{sha}","languages_url":"https://api.github.com/repos/rackerlabs/design-system/languages","stargazers_url":"https://api.github.com/repos/rackerlabs/design-system/stargazers","contributors_url":"https://api.github.com/repos/rackerlabs/design-system/contributors","subscribers_url":"https://api.github.com/repos/rackerlabs/design-system/subscribers","subscription_url":"https://api.github.com/repos/rackerlabs/design-system/subscription","commits_url":"https://api.github.com/repos/rackerlabs/design-system/commits{/sha}","git_commits_url":"https://api.github.com/repos/rackerlabs/design-system/git/commits{/sha}","comments_url":"https://api.github.com/repos/rackerlabs/design-system/comments{/number}","issue_comment_url":"https://api.github.com/repos/rackerlabs/design-system/issues/comments{/number}","contents_url":"https://api.github.com/repos/rackerlabs/design-system/contents/{+path}","compare_url":"https://api.github.com/repos/rackerlabs/design-system/compare/{base}...{head}","merges_url":"https://api.github.com/repos/rackerlabs/design-system/merges","archive_url":"https://api.github.com/repos/rackerlabs/design-system/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/rackerlabs/design-system/downloads","issues_url":"https://api.github.com/repos/rackerlabs/design-system/issues{/number}","pulls_url":"https://api.github.com/repos/rackerlabs/design-system/pulls{/number}","milestones_url":"https://api.github.com/repos/rackerlabs/design-system/milestones{/number}","notifications_url":"https://api.github.com/repos/rackerlabs/design-system/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/rackerlabs/design-system/labels{/name}","releases_url":"https://api.github.com/repos/rackerlabs/design-system/releases{/id}","deployments_url":"https://api.github.com/repos/rackerlabs/design-system/deployments","created_at":"2016-07-11T18:33:13Z","updated_at":"2018-01-22T07:45:00Z","pushed_at":"2018-02-09T16:04:36Z","git_url":"git://github.com/rackerlabs/design-system.git","ssh_url":"git@github.com:rackerlabs/design-system.git","clone_url":"https://github.com/rackerlabs/design-system.git","svn_url":"https://github.com/rackerlabs/design-system","homepage":"","size":254881,"stargazers_count":9,"watchers_count":9,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":12,"mirror_url":null,"archived":false,"open_issues_count":35,"license":null,"forks":12,"open_issues":35,"watchers":9,"default_branch":"staging"}},"base":{"label":"rackerlabs:staging","ref":"staging","sha":"e29ea8c805b8a612711407e596ae025ae369687d","user":{"login":"rackerlabs","id":84293,"avatar_url":"https://avatars1.githubusercontent.com/u/84293?v=4","gravatar_id":"","url":"https://api.github.com/users/rackerlabs","html_url":"https://github.com/rackerlabs","followers_url":"https://api.github.com/users/rackerlabs/followers","following_url":"https://api.github.com/users/rackerlabs/following{/other_user}","gists_url":"https://api.github.com/users/rackerlabs/gists{/gist_id}","starred_url":"https://api.github.com/users/rackerlabs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rackerlabs/subscriptions","organizations_url":"https://api.github.com/users/rackerlabs/orgs","repos_url":"https://api.github.com/users/rackerlabs/repos","events_url":"https://api.github.com/users/rackerlabs/events{/privacy}","received_events_url":"https://api.github.com/users/rackerlabs/received_events","type":"Organization","site_admin":false},"repo":{"id":63092460,"name":"design-system","full_name":"rackerlabs/design-system","owner":{"login":"rackerlabs","id":84293,"avatar_url":"https://avatars1.githubusercontent.com/u/84293?v=4","gravatar_id":"","url":"https://api.github.com/users/rackerlabs","html_url":"https://github.com/rackerlabs","followers_url":"https://api.github.com/users/rackerlabs/followers","following_url":"https://api.github.com/users/rackerlabs/following{/other_user}","gists_url":"https://api.github.com/users/rackerlabs/gists{/gist_id}","starred_url":"https://api.github.com/users/rackerlabs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rackerlabs/subscriptions","organizations_url":"https://api.github.com/users/rackerlabs/orgs","repos_url":"https://api.github.com/users/rackerlabs/repos","events_url":"https://api.github.com/users/rackerlabs/events{/privacy}","received_events_url":"https://api.github.com/users/rackerlabs/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/rackerlabs/design-system","description":"A prototype of the Design System created by Rackspace Experience Design","fork":false,"url":"https://api.github.com/repos/rackerlabs/design-system","forks_url":"https://api.github.com/repos/rackerlabs/design-system/forks","keys_url":"https://api.github.com/repos/rackerlabs/design-system/keys{/key_id}","collaborators_url":"https://api.github.com/repos/rackerlabs/design-system/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/rackerlabs/design-system/teams","hooks_url":"https://api.github.com/repos/rackerlabs/design-system/hooks","issue_events_url":"https://api.github.com/repos/rackerlabs/design-system/issues/events{/number}","events_url":"https://api.github.com/repos/rackerlabs/design-system/events","assignees_url":"https://api.github.com/repos/rackerlabs/design-system/assignees{/user}","branches_url":"https://api.github.com/repos/rackerlabs/design-system/branches{/branch}","tags_url":"https://api.github.com/repos/rackerlabs/design-system/tags","blobs_url":"https://api.github.com/repos/rackerlabs/design-system/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/rackerlabs/design-system/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/rackerlabs/design-system/git/refs{/sha}","trees_url":"https://api.github.com/repos/rackerlabs/design-system/git/trees{/sha}","statuses_url":"https://api.github.com/repos/rackerlabs/design-system/statuses/{sha}","languages_url":"https://api.github.com/repos/rackerlabs/design-system/languages","stargazers_url":"https://api.github.com/repos/rackerlabs/design-system/stargazers","contributors_url":"https://api.github.com/repos/rackerlabs/design-system/contributors","subscribers_url":"https://api.github.com/repos/rackerlabs/design-system/subscribers","subscription_url":"https://api.github.com/repos/rackerlabs/design-system/subscription","commits_url":"https://api.github.com/repos/rackerlabs/design-system/commits{/sha}","git_commits_url":"https://api.github.com/repos/rackerlabs/design-system/git/commits{/sha}","comments_url":"https://api.github.com/repos/rackerlabs/design-system/comments{/number}","issue_comment_url":"https://api.github.com/repos/rackerlabs/design-system/issues/comments{/number}","contents_url":"https://api.github.com/repos/rackerlabs/design-system/contents/{+path}","compare_url":"https://api.github.com/repos/rackerlabs/design-system/compare/{base}...{head}","merges_url":"https://api.github.com/repos/rackerlabs/design-system/merges","archive_url":"https://api.github.com/repos/rackerlabs/design-system/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/rackerlabs/design-system/downloads","issues_url":"https://api.github.com/repos/rackerlabs/design-system/issues{/number}","pulls_url":"https://api.github.com/repos/rackerlabs/design-system/pulls{/number}","milestones_url":"https://api.github.com/repos/rackerlabs/design-system/milestones{/number}","notifications_url":"https://api.github.com/repos/rackerlabs/design-system/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/rackerlabs/design-system/labels{/name}","releases_url":"https://api.github.com/repos/rackerlabs/design-system/releases{/id}","deployments_url":"https://api.github.com/repos/rackerlabs/design-system/deployments","created_at":"2016-07-11T18:33:13Z","updated_at":"2018-01-22T07:45:00Z","pushed_at":"2018-02-09T16:04:36Z","git_url":"git://github.com/rackerlabs/design-system.git","ssh_url":"git@github.com:rackerlabs/design-system.git","clone_url":"https://github.com/rackerlabs/design-system.git","svn_url":"https://github.com/rackerlabs/design-system","homepage":"","size":254881,"stargazers_count":9,"watchers_count":9,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":12,"mirror_url":null,"archived":false,"open_issues_count":35,"license":null,"forks":12,"open_issues":35,"watchers":9,"default_branch":"staging"}},"_links":{"self":{"href":"https://api.github.com/repos/rackerlabs/design-system/pulls/434"},"html":{"href":"https://github.com/rackerlabs/design-system/pull/434"},"issue":{"href":"https://api.github.com/repos/rackerlabs/design-system/issues/434"},"comments":{"href":"https://api.github.com/repos/rackerlabs/design-system/issues/434/comments"},"review_comments":{"href":"https://api.github.com/repos/rackerlabs/design-system/pulls/434/comments"},"review_comment":{"href":"https://api.github.com/repos/rackerlabs/design-system/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/rackerlabs/design-system/pulls/434/commits"},"statuses":{"href":"https://api.github.com/repos/rackerlabs/design-system/statuses/552e06672e8ab8c920e824647f25196e127e08c0"}},"author_association":"COLLABORATOR"}}
{"actor":{"display_login":"technabors"}}