{"action":"created","issue":{"url":"https://api.github.com/repos/TechnologyAdvice/stardust/issues/335","repository_url":"https://api.github.com/repos/TechnologyAdvice/stardust","labels_url":"https://api.github.com/repos/TechnologyAdvice/stardust/issues/335/labels{/name}","comments_url":"https://api.github.com/repos/TechnologyAdvice/stardust/issues/335/comments","events_url":"https://api.github.com/repos/TechnologyAdvice/stardust/issues/335/events","html_url":"https://github.com/TechnologyAdvice/stardust/pull/335","id":165808953,"number":335,"title":"Add Step component","user":{"login":"layershifter","id":14183168,"avatar_url":"https://avatars.githubusercontent.com/u/14183168?v=3","gravatar_id":"","url":"https://api.github.com/users/layershifter","html_url":"https://github.com/layershifter","followers_url":"https://api.github.com/users/layershifter/followers","following_url":"https://api.github.com/users/layershifter/following{/other_user}","gists_url":"https://api.github.com/users/layershifter/gists{/gist_id}","starred_url":"https://api.github.com/users/layershifter/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/layershifter/subscriptions","organizations_url":"https://api.github.com/users/layershifter/orgs","repos_url":"https://api.github.com/users/layershifter/repos","events_url":"https://api.github.com/users/layershifter/events{/privacy}","received_events_url":"https://api.github.com/users/layershifter/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":10,"created_at":"2016-07-15T15:07:29Z","updated_at":"2016-07-22T15:56:41Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/TechnologyAdvice/stardust/pulls/335","html_url":"https://github.com/TechnologyAdvice/stardust/pull/335","diff_url":"https://github.com/TechnologyAdvice/stardust/pull/335.diff","patch_url":"https://github.com/TechnologyAdvice/stardust/pull/335.patch"},"body":"# API\r\n\r\n## Types\r\n\r\n### Step\r\nA single step\r\n\r\n```html\r\n<div class=\"ui steps\">\r\n  <div class=\"step\">\r\n    Shipping\r\n  </div>\r\n</div>\r\n```\r\n\r\n```js\r\n<Step.Group>\r\n  <Step>Shipping</Step>\r\n</Step.Group>\r\n// or\r\nconst items = [\r\n  {text: 'Shipping'}\r\n];\r\n\r\n<Step.Group steps={items}>\r\n```\r\n\r\n## Groups\r\n\r\n### Steps\r\nA set of steps\r\n\r\n```html\r\n<div class=\"ui steps\">\r\n  <div class=\"step\">\r\n    <i class=\"truck icon\"></i>\r\n    <div class=\"content\">\r\n      <div class=\"title\">Shipping</div>\r\n      <div class=\"description\">Choose your shipping options</div>\r\n    </div>\r\n  </div>\r\n  <div class=\"active step\">\r\n    <i class=\"payment icon\"></i>\r\n    <div class=\"content\">\r\n      <div class=\"title\">Billing</div>\r\n      <div class=\"description\">Enter billing information</div>\r\n    </div>\r\n  </div>\r\n  <div class=\"disabled step\">\r\n    <i class=\"info icon\"></i>\r\n    <div class=\"content\">\r\n      <div class=\"title\">Confirm Order</div>\r\n    </div>\r\n  </div>\r\n</div>\r\n```\r\n\r\n```js\r\n<Step.Group>\r\n  <Step icon='truck'>\r\n    <Step.Title>Shipping</Step.Title>\r\n    <Step.Description>Shipping</Step.Description>\r\n  </Step>\r\n  <Step active icon='payment'>\r\n    <Step.Title>Billing</Step.Title>\r\n    <Step.Description>Confirm Order</Step.Description>\r\n  </Step>\r\n  <Step disabled icon='info' title='Confirm Order' />\r\n</Step.Group>\r\n// or\r\nconst items = [\r\n  {icon: 'truck', title: 'Shipping', description: 'Shipping'},\r\n  {active: true, icon: 'payment', title: 'Billing', description: 'Confirm Order'},\r\n  {disabled: true, icon: 'info', title: 'Confirm Order'},\r\n];\r\n\r\n<Step.Group steps={items}>\r\n```\r\n\r\n### Ordered\r\nA step can show a ordered sequence of steps\r\n\r\n```html\r\n<div class=\"ui ordered steps\">\r\n  <div class=\"completed step\">\r\n    <div class=\"content\">\r\n      <div class=\"title\">Shipping</div>\r\n      <div class=\"description\">Choose your shipping options</div>\r\n    </div>\r\n  </div>\r\n...\r\n</div>\r\n```\r\n\r\n```js\r\n<Step.Group ordered>\r\n  <Step completed>\r\n    <Step.Title>Shipping</Step.Title>\r\n    <Step.Description>Shipping</Step.Description>\r\n  </Step>\r\n</Step.Group>\r\n// or\r\nconst items = [\r\n  {completed: true, title: 'Billing', description: 'Confirm Order'},\r\n];\r\n\r\n<Step.Group ordered steps={items}>\r\n```\r\n\r\n### Vertical\r\nA step can be displayed stacked vertically\r\n\r\n```html\r\n<div class=\"ui vertical steps\">...</div>\r\n```\r\n```js\r\n<Step.Group vertical>...</Step.Group>\r\n<Step.Group vertical steps={items}>\r\n```\r\n\r\n## Content\r\n\r\n### Description\r\nA step can contain a description\r\n\r\n_Already described_\r\n\r\n### Icon\r\nA step can contain an icon\r\n\r\n_Already described_\r\n\r\n### Link\r\nA step can link\r\n\r\n```html\r\n// Case 1\r\n<div class=\"link step\"></div>\r\n// Case 2\r\n<a class=\"active step\">...</a>\r\n```\r\n\r\n```js\r\n// Case 1\r\n<Step link>...</Step>\r\n\r\n// Case 2\r\n<Step active href='http://google.com'>...</Step>\r\n<Step active onClick={handler}>...</Step>\r\n```\r\n\r\n## States\r\n\r\n### Active\r\nA step can be highlighted as active\r\n\r\n_Already described_\r\n\r\n### Completed\r\nA step can show that a user has completed it\r\n\r\n_Already described_\r\n\r\n### Disabled\r\nA step can show that it cannot be selected\r\n\r\n```html\r\n<div class=\"disabled step\"></div>\r\n```\r\n\r\n```js\r\n<Step disabled>...</Step>\r\n```\r\n\r\n## Variations\r\n\r\n### Stackable\r\nA step can stack vertically only on smaller screens\r\n\r\n### Vertical\r\nA step can be displayed stacked vertically\r\n\r\n```html\r\n<div class=\"ui tablet stackable steps\">...</div>\r\n```\r\n```js\r\n<Step.Group stackable='tablet'>...</Step.Group>\r\n<Step.Group stackable='tablet' steps={items}>\r\n```\r\n\r\n### Fluid\r\nA fluid step takes up the width of its container\r\n\r\n```html\r\n<div class=\"ui fluid steps\">...</div>\r\n```\r\n```js\r\n<Step.Group fluid>...</Step.Group>\r\n```\r\n\r\n### Attached\r\nSteps can be attached to other elements\r\n\r\n```html\r\n<div class=\"ui top attached steps\">...</div>\r\n```\r\n```js\r\n<Step.Group attached='top'>...</Step.Group>\r\n```\r\n\r\n### Evenly Divided\r\nSteps can be divided evenly inside their parent\r\n\r\n```html\r\n<div class=\"ui two steps\"></div>\r\n```\r\n\r\n#### Equal Width\r\n\r\n```jsx\r\n<Step.Group widths='equal'>\r\n  <Step />\r\n  <Step />\r\n</Step.Group>\r\n<div class=\"ui two steps\">\r\n  <div class=\"step\"></div>\r\n  <div class=\"step\"></div>\r\n</div>\r\n```\r\n\r\n#### Explicit Widths\r\n\r\n```jsx\r\n<Step.Group widths={2}> // or widths='two'\r\n  <Step />\r\n  <Step />\r\n</Step.Group>\r\n<div class=\"ui two steps\">\r\n  <div class=\"step\"></div>\r\n  <div class=\"step\"></div>\r\n</div>\r\n```\r\n\r\n### Size\r\nSteps can have different sizes\r\n\r\n```html\r\n<div class=\"ui mini steps\">...</div>\r\n```\r\n```js\r\n<Step.Group size='mini'>...</Step.Group>\r\n```\r\n\r\nFixes #183 "},"comment":{"url":"https://api.github.com/repos/TechnologyAdvice/stardust/issues/comments/234582837","html_url":"https://github.com/TechnologyAdvice/stardust/pull/335#issuecomment-234582837","issue_url":"https://api.github.com/repos/TechnologyAdvice/stardust/issues/335","id":234582837,"user":{"login":"layershifter","id":14183168,"avatar_url":"https://avatars.githubusercontent.com/u/14183168?v=3","gravatar_id":"","url":"https://api.github.com/users/layershifter","html_url":"https://github.com/layershifter","followers_url":"https://api.github.com/users/layershifter/followers","following_url":"https://api.github.com/users/layershifter/following{/other_user}","gists_url":"https://api.github.com/users/layershifter/gists{/gist_id}","starred_url":"https://api.github.com/users/layershifter/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/layershifter/subscriptions","organizations_url":"https://api.github.com/users/layershifter/orgs","repos_url":"https://api.github.com/users/layershifter/repos","events_url":"https://api.github.com/users/layershifter/events{/privacy}","received_events_url":"https://api.github.com/users/layershifter/received_events","type":"User","site_admin":false},"created_at":"2016-07-22T15:56:41Z","updated_at":"2016-07-22T15:56:41Z","body":">Let's not implement reusable component parts until a verdict is reached in that PR.\r\n\r\nOK, wait for pull, I will update components"}}
{"actor":{"display_login":"layershifter"}}