{"action":"created","comment":{"url":"https://api.github.com/repos/BBC-News/simorgh/pulls/comments/230029928","pull_request_review_id":170669020,"id":230029928,"node_id":"MDI0OlB1bGxSZXF1ZXN0UmV2aWV3Q29tbWVudDIzMDAyOTkyOA==","diff_hunk":"@@ -0,0 +1,126 @@\n+# How to create a new component\n+There are a lot of moving parts to Simorgh. We use the [Presentational & Container pattern](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) for our components, which we build in a few stages.\n+\n+## Part 1: Create the presentational component\n+Run the storybook (`npm run storybook`) and visit http://localhost:9001.\n+\n+Add your component in `src/app/components/[Component Name]/`. You will need:\n+\n+* index.jsx - defines the component\n+* index.stories.jsx - defines variations of the component.\n+\n+Work locally within these two files - the Storybook pattern library will be updated automatically with hot module reloading - to create the component front-end you need.\n+\n+Once done, make a PR - this first step will need code review and UX QA.\n+\n+Example implementations below:\n+\n+### index.jsx\n+```js\n+import styled from 'styled-components';\n+\n+const Blockquote = styled.blockquote`\n+  background: #f9f9f9;\n+`;\n+\n+export default Blockquote;\n+```\n+\n+### index.stories.jsx\n+```js\n+import React from 'react';\n+import { storiesOf } from '@storybook/react'; // eslint-disable-line import/no-extraneous-dependencies\n+import Blockquote from './index';\n+\n+storiesOf('Blockquote', module).add('default - quote only', () => <Blockquote>To be or not to be, that is the question</Blockquote>);\n+storiesOf('Blockquote', module).add('quote with cite', () => (\n+    <Blockquote cite=\"William Shakespeare\">To be or not to be, that is the question</Blockquote>\n+));\n+```\n+\n+## Part 2: Create the container component\n+Once your component front-end is merged, you'll need to integrate it into the renderer. Let's work from the lowest level to the highest level:\n+\n+### Add a test\n+In your component subdirectory, add a `index.test.jsx` to take a \"snapshot\" so that we can protect against regressions to the component. If the structure of the component changes, the unit test suite will fail.\n+\n+```js\n+import React from 'react';\n+import { shouldMatchSnapshot } from '../../helpers/tests/testHelpers';\n+import Blockquote from './index';\n+\n+describe('Blockquote', () => {\n+  shouldMatchSnapshot(\n+    'should render correctly',\n+    <Blockquote>To be or not to be, that is the question</Blockquote>,\n+  );\n+});\n+```\n+\n+### Update the schema\n+data/schema.yaml describes the Article API definition for web and apps. We need to make it aware of our new component.","path":"docs/Creating-Components.md","position":61,"original_position":61,"commit_id":"bc093aa2c529c98c222103df15bd35e64afa3106","original_commit_id":"bc093aa2c529c98c222103df15bd35e64afa3106","user":{"login":"pjlee11","id":7791726,"node_id":"MDQ6VXNlcjc3OTE3MjY=","avatar_url":"https://avatars1.githubusercontent.com/u/7791726?v=4","gravatar_id":"","url":"https://api.github.com/users/pjlee11","html_url":"https://github.com/pjlee11","followers_url":"https://api.github.com/users/pjlee11/followers","following_url":"https://api.github.com/users/pjlee11/following{/other_user}","gists_url":"https://api.github.com/users/pjlee11/gists{/gist_id}","starred_url":"https://api.github.com/users/pjlee11/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pjlee11/subscriptions","organizations_url":"https://api.github.com/users/pjlee11/orgs","repos_url":"https://api.github.com/users/pjlee11/repos","events_url":"https://api.github.com/users/pjlee11/events{/privacy}","received_events_url":"https://api.github.com/users/pjlee11/received_events","type":"User","site_admin":false},"body":"```suggestion\r\ndata/schema.yaml describes the Article API definition for web. We need to make it aware of our new component.\r\n```\r\n\r\nCurrently apps are not using this schema ","created_at":"2018-11-01T12:46:14Z","updated_at":"2018-11-01T12:46:14Z","html_url":"https://github.com/BBC-News/simorgh/pull/875#discussion_r230029928","pull_request_url":"https://api.github.com/repos/BBC-News/simorgh/pulls/875","author_association":"CONTRIBUTOR","_links":{"self":{"href":"https://api.github.com/repos/BBC-News/simorgh/pulls/comments/230029928"},"html":{"href":"https://github.com/BBC-News/simorgh/pull/875#discussion_r230029928"},"pull_request":{"href":"https://api.github.com/repos/BBC-News/simorgh/pulls/875"}}},"pull_request":{"url":"https://api.github.com/repos/BBC-News/simorgh/pulls/875","id":227215591,"node_id":"MDExOlB1bGxSZXF1ZXN0MjI3MjE1NTkx","html_url":"https://github.com/BBC-News/simorgh/pull/875","diff_url":"https://github.com/BBC-News/simorgh/pull/875.diff","patch_url":"https://github.com/BBC-News/simorgh/pull/875.patch","issue_url":"https://api.github.com/repos/BBC-News/simorgh/issues/875","number":875,"state":"open","locked":false,"title":"adds \"How to create component\" page","user":{"login":"ChrisBAshton","id":5111927,"node_id":"MDQ6VXNlcjUxMTE5Mjc=","avatar_url":"https://avatars2.githubusercontent.com/u/5111927?v=4","gravatar_id":"","url":"https://api.github.com/users/ChrisBAshton","html_url":"https://github.com/ChrisBAshton","followers_url":"https://api.github.com/users/ChrisBAshton/followers","following_url":"https://api.github.com/users/ChrisBAshton/following{/other_user}","gists_url":"https://api.github.com/users/ChrisBAshton/gists{/gist_id}","starred_url":"https://api.github.com/users/ChrisBAshton/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ChrisBAshton/subscriptions","organizations_url":"https://api.github.com/users/ChrisBAshton/orgs","repos_url":"https://api.github.com/users/ChrisBAshton/repos","events_url":"https://api.github.com/users/ChrisBAshton/events{/privacy}","received_events_url":"https://api.github.com/users/ChrisBAshton/received_events","type":"User","site_admin":false},"body":"Copying across https://github.com/BBC-News/simorgh/wiki/How-to-create-a-new-component\r\n\r\nAfter merge, let's delete the Wiki page.\r\n","created_at":"2018-10-31T09:36:52Z","updated_at":"2018-11-01T12:46:14Z","closed_at":null,"merged_at":null,"merge_commit_sha":"1b19f84eb1010d7d098451476354694a2cc1bca8","assignee":null,"assignees":[],"requested_reviewers":[],"requested_teams":[],"labels":[{"id":978998727,"node_id":"MDU6TGFiZWw5Nzg5OTg3Mjc=","url":"https://api.github.com/repos/BBC-News/simorgh/labels/Documentation","name":"Documentation","color":"d339d1","default":false}],"milestone":{"url":"https://api.github.com/repos/BBC-News/simorgh/milestones/1","html_url":"https://github.com/BBC-News/simorgh/milestone/1","labels_url":"https://api.github.com/repos/BBC-News/simorgh/milestones/1/labels","id":3471505,"node_id":"MDk6TWlsZXN0b25lMzQ3MTUwNQ==","number":1,"title":"00. Application Setup","description":"Technical proofs of concept: \r\nWAF Envelope Rendering. Described here: https://wildlyinaccurate.com/how-we-assemble-web-pages-at-bbc-news/\r\nSSR\r\nClient-side data fetching and CSR\r\n\r\n","creator":{"login":"benjaminhobbs","id":15235276,"node_id":"MDQ6VXNlcjE1MjM1Mjc2","avatar_url":"https://avatars0.githubusercontent.com/u/15235276?v=4","gravatar_id":"","url":"https://api.github.com/users/benjaminhobbs","html_url":"https://github.com/benjaminhobbs","followers_url":"https://api.github.com/users/benjaminhobbs/followers","following_url":"https://api.github.com/users/benjaminhobbs/following{/other_user}","gists_url":"https://api.github.com/users/benjaminhobbs/gists{/gist_id}","starred_url":"https://api.github.com/users/benjaminhobbs/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/benjaminhobbs/subscriptions","organizations_url":"https://api.github.com/users/benjaminhobbs/orgs","repos_url":"https://api.github.com/users/benjaminhobbs/repos","events_url":"https://api.github.com/users/benjaminhobbs/events{/privacy}","received_events_url":"https://api.github.com/users/benjaminhobbs/received_events","type":"User","site_admin":false},"open_issues":36,"closed_issues":167,"state":"open","created_at":"2018-07-03T21:16:58Z","updated_at":"2018-11-01T08:26:28Z","due_on":null,"closed_at":null},"commits_url":"https://api.github.com/repos/BBC-News/simorgh/pulls/875/commits","review_comments_url":"https://api.github.com/repos/BBC-News/simorgh/pulls/875/comments","review_comment_url":"https://api.github.com/repos/BBC-News/simorgh/pulls/comments{/number}","comments_url":"https://api.github.com/repos/BBC-News/simorgh/issues/875/comments","statuses_url":"https://api.github.com/repos/BBC-News/simorgh/statuses/bc093aa2c529c98c222103df15bd35e64afa3106","head":{"label":"BBC-News:new-component-docs","ref":"new-component-docs","sha":"bc093aa2c529c98c222103df15bd35e64afa3106","user":{"login":"BBC-News","id":1401475,"node_id":"MDEyOk9yZ2FuaXphdGlvbjE0MDE0NzU=","avatar_url":"https://avatars0.githubusercontent.com/u/1401475?v=4","gravatar_id":"","url":"https://api.github.com/users/BBC-News","html_url":"https://github.com/BBC-News","followers_url":"https://api.github.com/users/BBC-News/followers","following_url":"https://api.github.com/users/BBC-News/following{/other_user}","gists_url":"https://api.github.com/users/BBC-News/gists{/gist_id}","starred_url":"https://api.github.com/users/BBC-News/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/BBC-News/subscriptions","organizations_url":"https://api.github.com/users/BBC-News/orgs","repos_url":"https://api.github.com/users/BBC-News/repos","events_url":"https://api.github.com/users/BBC-News/events{/privacy}","received_events_url":"https://api.github.com/users/BBC-News/received_events","type":"Organization","site_admin":false},"repo":{"id":133968906,"node_id":"MDEwOlJlcG9zaXRvcnkxMzM5Njg5MDY=","name":"simorgh","full_name":"BBC-News/simorgh","private":false,"owner":{"login":"BBC-News","id":1401475,"node_id":"MDEyOk9yZ2FuaXphdGlvbjE0MDE0NzU=","avatar_url":"https://avatars0.githubusercontent.com/u/1401475?v=4","gravatar_id":"","url":"https://api.github.com/users/BBC-News","html_url":"https://github.com/BBC-News","followers_url":"https://api.github.com/users/BBC-News/followers","following_url":"https://api.github.com/users/BBC-News/following{/other_user}","gists_url":"https://api.github.com/users/BBC-News/gists{/gist_id}","starred_url":"https://api.github.com/users/BBC-News/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/BBC-News/subscriptions","organizations_url":"https://api.github.com/users/BBC-News/orgs","repos_url":"https://api.github.com/users/BBC-News/repos","events_url":"https://api.github.com/users/BBC-News/events{/privacy}","received_events_url":"https://api.github.com/users/BBC-News/received_events","type":"Organization","site_admin":false},"html_url":"https://github.com/BBC-News/simorgh","description":"The BBC's new article (soon... we hope)","fork":false,"url":"https://api.github.com/repos/BBC-News/simorgh","forks_url":"https://api.github.com/repos/BBC-News/simorgh/forks","keys_url":"https://api.github.com/repos/BBC-News/simorgh/keys{/key_id}","collaborators_url":"https://api.github.com/repos/BBC-News/simorgh/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/BBC-News/simorgh/teams","hooks_url":"https://api.github.com/repos/BBC-News/simorgh/hooks","issue_events_url":"https://api.github.com/repos/BBC-News/simorgh/issues/events{/number}","events_url":"https://api.github.com/repos/BBC-News/simorgh/events","assignees_url":"https://api.github.com/repos/BBC-News/simorgh/assignees{/user}","branches_url":"https://api.github.com/repos/BBC-News/simorgh/branches{/branch}","tags_url":"https://api.github.com/repos/BBC-News/simorgh/tags","blobs_url":"https://api.github.com/repos/BBC-News/simorgh/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/BBC-News/simorgh/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/BBC-News/simorgh/git/refs{/sha}","trees_url":"https://api.github.com/repos/BBC-News/simorgh/git/trees{/sha}","statuses_url":"https://api.github.com/repos/BBC-News/simorgh/statuses/{sha}","languages_url":"https://api.github.com/repos/BBC-News/simorgh/languages","stargazers_url":"https://api.github.com/repos/BBC-News/simorgh/stargazers","contributors_url":"https://api.github.com/repos/BBC-News/simorgh/contributors","subscribers_url":"https://api.github.com/repos/BBC-News/simorgh/subscribers","subscription_url":"https://api.github.com/repos/BBC-News/simorgh/subscription","commits_url":"https://api.github.com/repos/BBC-News/simorgh/commits{/sha}","git_commits_url":"https://api.github.com/repos/BBC-News/simorgh/git/commits{/sha}","comments_url":"https://api.github.com/repos/BBC-News/simorgh/comments{/number}","issue_comment_url":"https://api.github.com/repos/BBC-News/simorgh/issues/comments{/number}","contents_url":"https://api.github.com/repos/BBC-News/simorgh/contents/{+path}","compare_url":"https://api.github.com/repos/BBC-News/simorgh/compare/{base}...{head}","merges_url":"https://api.github.com/repos/BBC-News/simorgh/merges","archive_url":"https://api.github.com/repos/BBC-News/simorgh/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/BBC-News/simorgh/downloads","issues_url":"https://api.github.com/repos/BBC-News/simorgh/issues{/number}","pulls_url":"https://api.github.com/repos/BBC-News/simorgh/pulls{/number}","milestones_url":"https://api.github.com/repos/BBC-News/simorgh/milestones{/number}","notifications_url":"https://api.github.com/repos/BBC-News/simorgh/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/BBC-News/simorgh/labels{/name}","releases_url":"https://api.github.com/repos/BBC-News/simorgh/releases{/id}","deployments_url":"https://api.github.com/repos/BBC-News/simorgh/deployments","created_at":"2018-05-18T14:59:42Z","updated_at":"2018-11-01T10:49:15Z","pushed_at":"2018-11-01T12:41:19Z","git_url":"git://github.com/BBC-News/simorgh.git","ssh_url":"git@github.com:BBC-News/simorgh.git","clone_url":"https://github.com/BBC-News/simorgh.git","svn_url":"https://github.com/BBC-News/simorgh","homepage":"https://www.bbc.com","size":25422,"stargazers_count":18,"watchers_count":18,"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":131,"license":{"key":"apache-2.0","name":"Apache License 2.0","spdx_id":"Apache-2.0","url":"https://api.github.com/licenses/apache-2.0","node_id":"MDc6TGljZW5zZTI="},"forks":12,"open_issues":131,"watchers":18,"default_branch":"latest"}},"base":{"label":"BBC-News:latest","ref":"latest","sha":"19b596b427f05572d42a50c672770ad2e079bd78","user":{"login":"BBC-News","id":1401475,"node_id":"MDEyOk9yZ2FuaXphdGlvbjE0MDE0NzU=","avatar_url":"https://avatars0.githubusercontent.com/u/1401475?v=4","gravatar_id":"","url":"https://api.github.com/users/BBC-News","html_url":"https://github.com/BBC-News","followers_url":"https://api.github.com/users/BBC-News/followers","following_url":"https://api.github.com/users/BBC-News/following{/other_user}","gists_url":"https://api.github.com/users/BBC-News/gists{/gist_id}","starred_url":"https://api.github.com/users/BBC-News/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/BBC-News/subscriptions","organizations_url":"https://api.github.com/users/BBC-News/orgs","repos_url":"https://api.github.com/users/BBC-News/repos","events_url":"https://api.github.com/users/BBC-News/events{/privacy}","received_events_url":"https://api.github.com/users/BBC-News/received_events","type":"Organization","site_admin":false},"repo":{"id":133968906,"node_id":"MDEwOlJlcG9zaXRvcnkxMzM5Njg5MDY=","name":"simorgh","full_name":"BBC-News/simorgh","private":false,"owner":{"login":"BBC-News","id":1401475,"node_id":"MDEyOk9yZ2FuaXphdGlvbjE0MDE0NzU=","avatar_url":"https://avatars0.githubusercontent.com/u/1401475?v=4","gravatar_id":"","url":"https://api.github.com/users/BBC-News","html_url":"https://github.com/BBC-News","followers_url":"https://api.github.com/users/BBC-News/followers","following_url":"https://api.github.com/users/BBC-News/following{/other_user}","gists_url":"https://api.github.com/users/BBC-News/gists{/gist_id}","starred_url":"https://api.github.com/users/BBC-News/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/BBC-News/subscriptions","organizations_url":"https://api.github.com/users/BBC-News/orgs","repos_url":"https://api.github.com/users/BBC-News/repos","events_url":"https://api.github.com/users/BBC-News/events{/privacy}","received_events_url":"https://api.github.com/users/BBC-News/received_events","type":"Organization","site_admin":false},"html_url":"https://github.com/BBC-News/simorgh","description":"The BBC's new article (soon... we hope)","fork":false,"url":"https://api.github.com/repos/BBC-News/simorgh","forks_url":"https://api.github.com/repos/BBC-News/simorgh/forks","keys_url":"https://api.github.com/repos/BBC-News/simorgh/keys{/key_id}","collaborators_url":"https://api.github.com/repos/BBC-News/simorgh/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/BBC-News/simorgh/teams","hooks_url":"https://api.github.com/repos/BBC-News/simorgh/hooks","issue_events_url":"https://api.github.com/repos/BBC-News/simorgh/issues/events{/number}","events_url":"https://api.github.com/repos/BBC-News/simorgh/events","assignees_url":"https://api.github.com/repos/BBC-News/simorgh/assignees{/user}","branches_url":"https://api.github.com/repos/BBC-News/simorgh/branches{/branch}","tags_url":"https://api.github.com/repos/BBC-News/simorgh/tags","blobs_url":"https://api.github.com/repos/BBC-News/simorgh/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/BBC-News/simorgh/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/BBC-News/simorgh/git/refs{/sha}","trees_url":"https://api.github.com/repos/BBC-News/simorgh/git/trees{/sha}","statuses_url":"https://api.github.com/repos/BBC-News/simorgh/statuses/{sha}","languages_url":"https://api.github.com/repos/BBC-News/simorgh/languages","stargazers_url":"https://api.github.com/repos/BBC-News/simorgh/stargazers","contributors_url":"https://api.github.com/repos/BBC-News/simorgh/contributors","subscribers_url":"https://api.github.com/repos/BBC-News/simorgh/subscribers","subscription_url":"https://api.github.com/repos/BBC-News/simorgh/subscription","commits_url":"https://api.github.com/repos/BBC-News/simorgh/commits{/sha}","git_commits_url":"https://api.github.com/repos/BBC-News/simorgh/git/commits{/sha}","comments_url":"https://api.github.com/repos/BBC-News/simorgh/comments{/number}","issue_comment_url":"https://api.github.com/repos/BBC-News/simorgh/issues/comments{/number}","contents_url":"https://api.github.com/repos/BBC-News/simorgh/contents/{+path}","compare_url":"https://api.github.com/repos/BBC-News/simorgh/compare/{base}...{head}","merges_url":"https://api.github.com/repos/BBC-News/simorgh/merges","archive_url":"https://api.github.com/repos/BBC-News/simorgh/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/BBC-News/simorgh/downloads","issues_url":"https://api.github.com/repos/BBC-News/simorgh/issues{/number}","pulls_url":"https://api.github.com/repos/BBC-News/simorgh/pulls{/number}","milestones_url":"https://api.github.com/repos/BBC-News/simorgh/milestones{/number}","notifications_url":"https://api.github.com/repos/BBC-News/simorgh/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/BBC-News/simorgh/labels{/name}","releases_url":"https://api.github.com/repos/BBC-News/simorgh/releases{/id}","deployments_url":"https://api.github.com/repos/BBC-News/simorgh/deployments","created_at":"2018-05-18T14:59:42Z","updated_at":"2018-11-01T10:49:15Z","pushed_at":"2018-11-01T12:41:19Z","git_url":"git://github.com/BBC-News/simorgh.git","ssh_url":"git@github.com:BBC-News/simorgh.git","clone_url":"https://github.com/BBC-News/simorgh.git","svn_url":"https://github.com/BBC-News/simorgh","homepage":"https://www.bbc.com","size":25422,"stargazers_count":18,"watchers_count":18,"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":131,"license":{"key":"apache-2.0","name":"Apache License 2.0","spdx_id":"Apache-2.0","url":"https://api.github.com/licenses/apache-2.0","node_id":"MDc6TGljZW5zZTI="},"forks":12,"open_issues":131,"watchers":18,"default_branch":"latest"}},"_links":{"self":{"href":"https://api.github.com/repos/BBC-News/simorgh/pulls/875"},"html":{"href":"https://github.com/BBC-News/simorgh/pull/875"},"issue":{"href":"https://api.github.com/repos/BBC-News/simorgh/issues/875"},"comments":{"href":"https://api.github.com/repos/BBC-News/simorgh/issues/875/comments"},"review_comments":{"href":"https://api.github.com/repos/BBC-News/simorgh/pulls/875/comments"},"review_comment":{"href":"https://api.github.com/repos/BBC-News/simorgh/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/BBC-News/simorgh/pulls/875/commits"},"statuses":{"href":"https://api.github.com/repos/BBC-News/simorgh/statuses/bc093aa2c529c98c222103df15bd35e64afa3106"}},"author_association":"NONE"}}
{"actor":{"display_login":"pjlee11"}}