{"action":"created","issue":{"url":"https://api.github.com/repos/punchcard-cms/punchcard/issues/613","repository_url":"https://api.github.com/repos/punchcard-cms/punchcard","labels_url":"https://api.github.com/repos/punchcard-cms/punchcard/issues/613/labels{/name}","comments_url":"https://api.github.com/repos/punchcard-cms/punchcard/issues/613/comments","events_url":"https://api.github.com/repos/punchcard-cms/punchcard/issues/613/events","html_url":"https://github.com/punchcard-cms/punchcard/issues/613","id":195014892,"number":613,"title":"Core Developer: Base style guide routing","user":{"login":"ineedsubstance","id":3981381,"avatar_url":"https://avatars.githubusercontent.com/u/3981381?v=3","gravatar_id":"","url":"https://api.github.com/users/ineedsubstance","html_url":"https://github.com/ineedsubstance","followers_url":"https://api.github.com/users/ineedsubstance/followers","following_url":"https://api.github.com/users/ineedsubstance/following{/other_user}","gists_url":"https://api.github.com/users/ineedsubstance/gists{/gist_id}","starred_url":"https://api.github.com/users/ineedsubstance/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ineedsubstance/subscriptions","organizations_url":"https://api.github.com/users/ineedsubstance/orgs","repos_url":"https://api.github.com/users/ineedsubstance/repos","events_url":"https://api.github.com/users/ineedsubstance/events{/privacy}","received_events_url":"https://api.github.com/users/ineedsubstance/received_events","type":"User","site_admin":false},"labels":[{"id":422186925,"url":"https://api.github.com/repos/punchcard-cms/punchcard/labels/stub","name":"stub","color":"db2780","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-12-12T16:12:09Z","updated_at":"2016-12-12T16:16:47Z","closed_at":null,"body":"Style Guide Routing \r\n\r\n```gherkin\r\nFeature: Style Guide Data\r\n  As a core developer\r\n  I want to have data from the style guide rendered\r\n  So that I can apply Punchcard styling\r\n\r\n  Scenario: Data for Color Swatches\r\n    Given that, I need data to render the color section of the style guide\r\n     When I navigate to that section\r\n      Then I will see a short description describing the color palette we are using\r\n      And I will see swatches that are the core colors making up the color palette for Punchcard\r\n      And I will see all the available shades of blue\r\n      And I will see all the available shades of purple\r\n      And I will see all the available shades of grey and black and white\r\n      And I will see the name of each color\r\n      And I will see the hex value of each color\r\n      And I will see all the RGB value of each color\r\n \r\n  Scenario: Data for Typography\r\n    Given that, I need data to render the typography section of the style guide\r\n     When I navigate to that section\r\n     Then I should include the text \"Heading 1\" for h1\r\n      And I should include the text \"Heading 2\" for h2\r\n      And I should include the text \"Heading 3\" for h3\r\n      And I should include the text \"Heading 4\" for h4\r\n      And I should include the text \"Heading 5\" for h5\r\n      And I should include the text \"Heading 6\" for h6\r\n      And I should include a paragraph of text of 3 sentences\r\n      And I should include two paragraphs of text for the blockquote\r\n      And I should include an author's name for the author text\r\n      And the link should link to anywhere\r\n      And I should include a short title for the first title of the definition list title\r\n      And I should include a paragraph of text for the first definition list definition\r\n      And I should include a longer title for the second definition list title\r\n      And I should include an unordered list of 3 short items for the second definition list definition\r\n      And I should include 3 short list items for the unordered list\r\n      And I should include 3 short list items for the ordered list\r\n      \r\nScenario: Data for Table\r\n    Given that, I need data to render the table section of the style guide\r\n     When I navigate to that section\r\n      Then I should include a table\r\n      And that table will have 5 columns\r\n      And that table will have a row of table headers\r\n      And those table headers all 5 with varying size content\r\n      And that table will have 4 rows\r\n      And each cell within those rows will have varying sizes of content\r\n\r\nScenario: Data for Code\r\n    Given that, I need data to render the code section of the style guide\r\n     When I navigate to that section\r\n      Then I should include a few words in the keyboard input\r\n      And I should include a few words for inline code\r\n      And I should include a short sentence for sample input\r\n      And I should include a grid of characters for pre-formatted text\r\n\r\nScenario: Data for Inline Elements\r\n    Given that, I need data to render the inline elements section of the style guide\r\n     When I navigate to that section\r\n      Then I should include a few words for a rendered text link\r\n      And I should include a short sentence for strong text\r\n      And I should include a short sentence for emphasized text\r\n      And I should include a short sentence for bolded but only a few words are bolded\r\n      And I should include a short sentence for italicized but only a few words are italicized\r\n      And I should include a short sentence for underline but only a few words are underlined\r\n      And I should include a short sentence for deleted but only a few words are deleted\r\n      And I should include a short sentence for strikethrough\r\n      And I should include a few words for superscript that include a superscripted R at the end\r\n      And I should include the text \"H20\" with the \"2\" being subscripted\r\n      And I should include a short sentence for small text\r\n      And I should include a short sentence for abbreviation with one word being abbreviated\r\n      And I should include a short sentence for a quotation\r\n      And I should include a short sentence for a citation\r\n      And I should include a short sentence for definition with a few words being defined\r\n      And I should include a short sentence for mark with a few words being marked\r\n      And I should include a short sentence for variable with a few words in the variable\r\n      And I should include a short sentence for time with a few words in the time element\r\n\r\nScenario: Data for Form Elements - Input Fields\r\n    Given that, I need data to render the input fields section of the style guide\r\n     When I navigate to that group of form elements\r\n      Then I should include a text legend labeled \"Input fields\"\r\n      And I should include a text input field\r\n      And it will have the placeholder text \"Text input\"\r\n      And it should include a text label \"Input field\"\r\n      And it should include a short sentence of text as a description below it\r\n      And I should include a disabled input field\r\n      And it will have the placeholder text \"Text input\"\r\n      And it should include a text label \"Disabled input\"\r\n      And it should include a short sentence of text as a description below it\r\n      And I should include a password input field\r\n      And it will have the placeholder text \"Type your password\"\r\n      And it should include a text label \"Password\"\r\n      And I should include a URL input field\r\n      And it will have the placeholder text \"http://yoursite.com\"\r\n      And it should include a text label \"Web address\"\r\n      And I should include an email input field\r\n      And it will have the placeholder text \"name@email.com\"\r\n      And it should include a text label \"Email address\"\r\n      And I should include a phone input field\r\n      And it will have the placeholder text \"(999) 999-9999\"\r\n      And it should include a text label `Phone number`\r\n      And I should include a search input field\r\n      And it will have the placeholder text \"Enter search term\"\r\n      And it should include a text label `Search`\r\n      And I should include a number input field\r\n      And it will have the placeholder text \"Enter a number\"\r\n      And it should include a text label `Number input`\r\n\r\nScenario: Data for Form Elements - Select Dropdown\r\n    Given that, I need data to render the select fields section of the style guide\r\n     When I navigate to that group of form elements\r\n      Then I should include a text legend labeled `Select dropdown`\r\n      And I should include a selection dropdown with 5 options\r\n      And each option will be 2-3 words\r\n      And that select should include a text label \"Select\"\r\n\r\nScenario: Data for Form Elements - Checkboxes\r\n    Given that, I need data to render the checkboxes section of the style guide\r\n     When I navigate to that group of form elements\r\n      Then I should include a text legend labeled \"Checkboxes\"\r\n      And I should include a checkbox group with 3 options\r\n      And each option will be 2-3 words\r\n\r\nScenario: Data for Form Elements - Radio buttons\r\n    Given that, I need data to render the radio buttons section of the style guide\r\n     When I navigate to that group of form elements\r\n      Then I should include a text legend labeled \"Radio buttons\"\r\n      And I should include a radio button group with 3 options\r\n      And each option will be 2-3 words\r\n\r\nScenario: Data for Form Elements - Textarea\r\n    Given that, I need data to render the textarea section of the style guide\r\n     When I navigate to that group of form elements\r\n      Then I should include a text legend labeled \"Textarea\"\r\n      And I should include a textarea\r\n      And it will have 8 rows and 48 columns\r\n      And it will have the placeholder text \"Enter your message here\"\r\n\r\nScenario: Data for Form Elements - HTML5 Inputs\r\n    Given that, I need data to render the HTML5 inputs section of the style guide\r\n     When I navigate to that group of form elements\r\n      Then I should include a text legend labeled \"HTML5 inputs\"\r\n      And I should include a color input\r\n      And it should include a text label \"Color input\"\r\n      And I should include a number input\r\n      And it will have the value of \"5\"\r\n      And it should include a text label \"Number input\"\r\n      And I should include a range input\r\n      And it should include a text label \"Range input\"\r\n      And I should include a date input\r\n      And it will have the value of \"01/01/1970\"\r\n      And it should include a text label \"Date input\"\r\n      And I should include a month input\r\n      And it will have the value of \"January 1970\"\r\n      And it should include a text label \"Month input\"\r\n      And I should include a week input\r\n      And it will have the value of \"Week 01, 1970\"\r\n      And it should include a text label \"Week input\"\r\n      And I should include a date/time input\r\n      And it will have the value of \"1970-01-01T00:00:00Z\"\r\n      And it should include a text label \"Datetime input\"\r\n      And I should include a datetime-local input\r\n      And it will have the value of \"01/01/1970, 12:00AM\"\r\n      And it should include a text label \"Datetime-local input\"\r\n\r\nScenario: Data for Form Elements - Buttons\r\n    Given that, I need data to render the buttons section of the style guide\r\n     When I navigate to that group of form elements\r\n      Then I should include a submit button\r\n      And it should include the text \"Button type = submit\"\r\n      And I should include a button button\r\n      And it should include the text \"Button type = button\"\r\n      And I should include a reset button\r\n      And it should include the text \"Button type = reset\"\r\n      And I should include a text link\r\n      And it should include the text \"Link type = cancel\"\r\n\r\nScenario: Data for Styled Components\r\n    Given I am on the style guide page\r\n     When I am looking at the components section\r\n      Then I will see a section containing the currently styled components\r\n      And all these components will already have data associated with each of them\r\n\r\nScenario: Embedded SVG\r\n    Given that I need data to render the embedded SVG section of the style guide\r\n     When I navigate to that section of the style guide\r\n     Then I will see a code block of the SVG code from the Conversation SVG pictogram\r\n      And I will also see a visually rendered version of the conversation pictogram\r\n      And the pictogram will be filled with purple 50\r\n      And the background will be transparent\r\n\r\n```\r\n---\r\n**Style Guide Routing**\r\n- [ ] Color data\r\n- [ ] Typography data\r\n- [ ] Table data\r\n- [ ] Code data\r\n- [ ] Inline Elements data\r\n- [ ] Form elements data\r\n- [ ] Components data\r\n- [ ] Embedded SVG data"},"comment":{"url":"https://api.github.com/repos/punchcard-cms/punchcard/issues/comments/266473725","html_url":"https://github.com/punchcard-cms/punchcard/issues/613#issuecomment-266473725","issue_url":"https://api.github.com/repos/punchcard-cms/punchcard/issues/613","id":266473725,"user":{"login":"ineedsubstance","id":3981381,"avatar_url":"https://avatars.githubusercontent.com/u/3981381?v=3","gravatar_id":"","url":"https://api.github.com/users/ineedsubstance","html_url":"https://github.com/ineedsubstance","followers_url":"https://api.github.com/users/ineedsubstance/followers","following_url":"https://api.github.com/users/ineedsubstance/following{/other_user}","gists_url":"https://api.github.com/users/ineedsubstance/gists{/gist_id}","starred_url":"https://api.github.com/users/ineedsubstance/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ineedsubstance/subscriptions","organizations_url":"https://api.github.com/users/ineedsubstance/orgs","repos_url":"https://api.github.com/users/ineedsubstance/repos","events_url":"https://api.github.com/users/ineedsubstance/events{/privacy}","received_events_url":"https://api.github.com/users/ineedsubstance/received_events","type":"User","site_admin":false},"created_at":"2016-12-12T16:16:47Z","updated_at":"2016-12-12T16:16:47Z","body":"@poofichu - copied this over from what you already did on WOX-UI. I did remove the `table data` section since we already have a separate component for that already [here](https://github.com/punchcard-cms/punchcard/pull/555)."}}
{"actor":{"display_login":"ineedsubstance"}}