{"action":"opened","number":20175,"pull_request":{"url":"https://api.github.com/repos/Automattic/wp-calypso/pulls/20175","id":154449891,"html_url":"https://github.com/Automattic/wp-calypso/pull/20175","diff_url":"https://github.com/Automattic/wp-calypso/pull/20175.diff","patch_url":"https://github.com/Automattic/wp-calypso/pull/20175.patch","issue_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/20175","number":20175,"state":"open","locked":false,"title":"Add Theme Showcase Banner","user":{"login":"mendezcode","id":5881557,"avatar_url":"https://avatars3.githubusercontent.com/u/5881557?v=4","gravatar_id":"","url":"https://api.github.com/users/mendezcode","html_url":"https://github.com/mendezcode","followers_url":"https://api.github.com/users/mendezcode/followers","following_url":"https://api.github.com/users/mendezcode/following{/other_user}","gists_url":"https://api.github.com/users/mendezcode/gists{/gist_id}","starred_url":"https://api.github.com/users/mendezcode/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mendezcode/subscriptions","organizations_url":"https://api.github.com/users/mendezcode/orgs","repos_url":"https://api.github.com/users/mendezcode/repos","events_url":"https://api.github.com/users/mendezcode/events{/privacy}","received_events_url":"https://api.github.com/users/mendezcode/received_events","type":"User","site_admin":false},"body":"Adds a banner component to Calypso. The banner is intended to be used initially on the theme showcase, as it's shown in the following screenshot:\r\n\r\n![screen shot 2017-11-23 at 5 42 35 pm](https://user-images.githubusercontent.com/5881557/33189073-bc4bc5bc-d075-11e7-8df5-2589109a3d74.png)\r\n\r\nThe Banner component is `<ThemesBanner />`, and it receives `items`, which is an array of objects, each with this signature:\r\n\r\n```js\r\n{\r\n  title,\r\n  description,\r\n  buttonLabel,\r\n  buttonType,\r\n  buttonAction,\r\n  backgroundImage,\r\n  backgroundColor,\r\n  textColor,\r\n  textShadowColor,\r\n}\r\n```\r\n\r\n_NOTE: This is a rough PR of the actual implementation. There are still some things to take care of, which will be sorted out after we go over the first round of review. More info on the NOTES section._\r\n\r\n- - -\r\n\r\n### Testing Instructions\r\n\r\nAdd something like this on the `render()` method of `theme-showcase.jsx`:\r\n\r\n```js\r\nconst bannerItems = [\r\n\t{\r\n\t\ttitle: \"Are you a small business?\",\r\n\t\tdescription: \"We understand your time contraints, and that's why we created this easy-to-set-up Premium theme called Small Business.\",\r\n\t\tbuttonLabel: \"Learn about this theme\",\r\n\t\tbuttonType: \"primary\",\r\n\t\tbackgroundImage: \"/calypso/images/theme-banners/banner-bg.jpg\",\r\n\t\tbuttonAction: this.helloWorld,\r\n\t}\r\n];\r\n```\r\n\r\nThen, add the following JSX above `<ThemesSearchCard ... />`:\r\n\r\n```jsx\r\n<ThemesBanner items={ bannerItems } />\r\n```\r\n\r\nThe image used is [here](https://user-images.githubusercontent.com/5881557/33189130-55035d7e-d076-11e7-9cad-6283e87cedbf.jpg).\r\n\r\n### NOTES\r\n\r\nNot sure how this will be handled in detail, but maybe for v1 we can show the banner items randomly on load, or we can add a scrolling mechanism that scrolls the banner items dynamically too.\r\n\r\nRight now, banner items will be rendered one on top of the other, until a proper behavior has been discussed here. CC @mapk \r\n\r\n- - -\r\n\r\nAny design suggestions from the review can be forwarded to @mapk for discussion.\r\n\r\n@mapk Feel free to play around with the parameters to see if the implementation has enough flexibility to create good looking and professional advertising banners. Color parameters can be any valid CSS color.\r\n\r\n@ockham Let me know if you think the approach I used is okay... I tried also adding an extra component called `<ThemesBannerItem />`, but then didn't like all the JSX required to add several banner items. At least this gets the ball rolling for discussion, a better implementation may surface from the review.\r\n\r\n---\r\n\r\nThanks both, for your review time!","created_at":"2017-11-23T22:01:41Z","updated_at":"2017-11-23T22:01:41Z","closed_at":null,"merged_at":null,"merge_commit_sha":null,"assignee":{"login":"mendezcode","id":5881557,"avatar_url":"https://avatars3.githubusercontent.com/u/5881557?v=4","gravatar_id":"","url":"https://api.github.com/users/mendezcode","html_url":"https://github.com/mendezcode","followers_url":"https://api.github.com/users/mendezcode/followers","following_url":"https://api.github.com/users/mendezcode/following{/other_user}","gists_url":"https://api.github.com/users/mendezcode/gists{/gist_id}","starred_url":"https://api.github.com/users/mendezcode/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mendezcode/subscriptions","organizations_url":"https://api.github.com/users/mendezcode/orgs","repos_url":"https://api.github.com/users/mendezcode/repos","events_url":"https://api.github.com/users/mendezcode/events{/privacy}","received_events_url":"https://api.github.com/users/mendezcode/received_events","type":"User","site_admin":false},"assignees":[{"login":"mendezcode","id":5881557,"avatar_url":"https://avatars3.githubusercontent.com/u/5881557?v=4","gravatar_id":"","url":"https://api.github.com/users/mendezcode","html_url":"https://github.com/mendezcode","followers_url":"https://api.github.com/users/mendezcode/followers","following_url":"https://api.github.com/users/mendezcode/following{/other_user}","gists_url":"https://api.github.com/users/mendezcode/gists{/gist_id}","starred_url":"https://api.github.com/users/mendezcode/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mendezcode/subscriptions","organizations_url":"https://api.github.com/users/mendezcode/orgs","repos_url":"https://api.github.com/users/mendezcode/repos","events_url":"https://api.github.com/users/mendezcode/events{/privacy}","received_events_url":"https://api.github.com/users/mendezcode/received_events","type":"User","site_admin":false}],"requested_reviewers":[{"login":"ockham","id":96308,"avatar_url":"https://avatars2.githubusercontent.com/u/96308?v=4","gravatar_id":"","url":"https://api.github.com/users/ockham","html_url":"https://github.com/ockham","followers_url":"https://api.github.com/users/ockham/followers","following_url":"https://api.github.com/users/ockham/following{/other_user}","gists_url":"https://api.github.com/users/ockham/gists{/gist_id}","starred_url":"https://api.github.com/users/ockham/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ockham/subscriptions","organizations_url":"https://api.github.com/users/ockham/orgs","repos_url":"https://api.github.com/users/ockham/repos","events_url":"https://api.github.com/users/ockham/events{/privacy}","received_events_url":"https://api.github.com/users/ockham/received_events","type":"User","site_admin":false},{"login":"mapk","id":617986,"avatar_url":"https://avatars0.githubusercontent.com/u/617986?v=4","gravatar_id":"","url":"https://api.github.com/users/mapk","html_url":"https://github.com/mapk","followers_url":"https://api.github.com/users/mapk/followers","following_url":"https://api.github.com/users/mapk/following{/other_user}","gists_url":"https://api.github.com/users/mapk/gists{/gist_id}","starred_url":"https://api.github.com/users/mapk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mapk/subscriptions","organizations_url":"https://api.github.com/users/mapk/orgs","repos_url":"https://api.github.com/users/mapk/repos","events_url":"https://api.github.com/users/mapk/events{/privacy}","received_events_url":"https://api.github.com/users/mapk/received_events","type":"User","site_admin":false}],"milestone":null,"commits_url":"https://api.github.com/repos/Automattic/wp-calypso/pulls/20175/commits","review_comments_url":"https://api.github.com/repos/Automattic/wp-calypso/pulls/20175/comments","review_comment_url":"https://api.github.com/repos/Automattic/wp-calypso/pulls/comments{/number}","comments_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/20175/comments","statuses_url":"https://api.github.com/repos/Automattic/wp-calypso/statuses/6e6984248cec36d0b61d0a9d4130c7a848f7defd","head":{"label":"Automattic:add/theme-showcase-banner","ref":"add/theme-showcase-banner","sha":"6e6984248cec36d0b61d0a9d4130c7a848f7defd","user":{"login":"Automattic","id":887802,"avatar_url":"https://avatars1.githubusercontent.com/u/887802?v=4","gravatar_id":"","url":"https://api.github.com/users/Automattic","html_url":"https://github.com/Automattic","followers_url":"https://api.github.com/users/Automattic/followers","following_url":"https://api.github.com/users/Automattic/following{/other_user}","gists_url":"https://api.github.com/users/Automattic/gists{/gist_id}","starred_url":"https://api.github.com/users/Automattic/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Automattic/subscriptions","organizations_url":"https://api.github.com/users/Automattic/orgs","repos_url":"https://api.github.com/users/Automattic/repos","events_url":"https://api.github.com/users/Automattic/events{/privacy}","received_events_url":"https://api.github.com/users/Automattic/received_events","type":"Organization","site_admin":false},"repo":{"id":45936895,"name":"wp-calypso","full_name":"Automattic/wp-calypso","owner":{"login":"Automattic","id":887802,"avatar_url":"https://avatars1.githubusercontent.com/u/887802?v=4","gravatar_id":"","url":"https://api.github.com/users/Automattic","html_url":"https://github.com/Automattic","followers_url":"https://api.github.com/users/Automattic/followers","following_url":"https://api.github.com/users/Automattic/following{/other_user}","gists_url":"https://api.github.com/users/Automattic/gists{/gist_id}","starred_url":"https://api.github.com/users/Automattic/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Automattic/subscriptions","organizations_url":"https://api.github.com/users/Automattic/orgs","repos_url":"https://api.github.com/users/Automattic/repos","events_url":"https://api.github.com/users/Automattic/events{/privacy}","received_events_url":"https://api.github.com/users/Automattic/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/Automattic/wp-calypso","description":"The new JavaScript- and API-powered WordPress.com","fork":false,"url":"https://api.github.com/repos/Automattic/wp-calypso","forks_url":"https://api.github.com/repos/Automattic/wp-calypso/forks","keys_url":"https://api.github.com/repos/Automattic/wp-calypso/keys{/key_id}","collaborators_url":"https://api.github.com/repos/Automattic/wp-calypso/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/Automattic/wp-calypso/teams","hooks_url":"https://api.github.com/repos/Automattic/wp-calypso/hooks","issue_events_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/events{/number}","events_url":"https://api.github.com/repos/Automattic/wp-calypso/events","assignees_url":"https://api.github.com/repos/Automattic/wp-calypso/assignees{/user}","branches_url":"https://api.github.com/repos/Automattic/wp-calypso/branches{/branch}","tags_url":"https://api.github.com/repos/Automattic/wp-calypso/tags","blobs_url":"https://api.github.com/repos/Automattic/wp-calypso/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/Automattic/wp-calypso/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/Automattic/wp-calypso/git/refs{/sha}","trees_url":"https://api.github.com/repos/Automattic/wp-calypso/git/trees{/sha}","statuses_url":"https://api.github.com/repos/Automattic/wp-calypso/statuses/{sha}","languages_url":"https://api.github.com/repos/Automattic/wp-calypso/languages","stargazers_url":"https://api.github.com/repos/Automattic/wp-calypso/stargazers","contributors_url":"https://api.github.com/repos/Automattic/wp-calypso/contributors","subscribers_url":"https://api.github.com/repos/Automattic/wp-calypso/subscribers","subscription_url":"https://api.github.com/repos/Automattic/wp-calypso/subscription","commits_url":"https://api.github.com/repos/Automattic/wp-calypso/commits{/sha}","git_commits_url":"https://api.github.com/repos/Automattic/wp-calypso/git/commits{/sha}","comments_url":"https://api.github.com/repos/Automattic/wp-calypso/comments{/number}","issue_comment_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/comments{/number}","contents_url":"https://api.github.com/repos/Automattic/wp-calypso/contents/{+path}","compare_url":"https://api.github.com/repos/Automattic/wp-calypso/compare/{base}...{head}","merges_url":"https://api.github.com/repos/Automattic/wp-calypso/merges","archive_url":"https://api.github.com/repos/Automattic/wp-calypso/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/Automattic/wp-calypso/downloads","issues_url":"https://api.github.com/repos/Automattic/wp-calypso/issues{/number}","pulls_url":"https://api.github.com/repos/Automattic/wp-calypso/pulls{/number}","milestones_url":"https://api.github.com/repos/Automattic/wp-calypso/milestones{/number}","notifications_url":"https://api.github.com/repos/Automattic/wp-calypso/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/Automattic/wp-calypso/labels{/name}","releases_url":"https://api.github.com/repos/Automattic/wp-calypso/releases{/id}","deployments_url":"https://api.github.com/repos/Automattic/wp-calypso/deployments","created_at":"2015-11-10T20:00:16Z","updated_at":"2017-11-23T19:22:21Z","pushed_at":"2017-11-23T21:46:17Z","git_url":"git://github.com/Automattic/wp-calypso.git","ssh_url":"git@github.com:Automattic/wp-calypso.git","clone_url":"https://github.com/Automattic/wp-calypso.git","svn_url":"https://github.com/Automattic/wp-calypso","homepage":"https://developer.wordpress.com/calypso/","size":71187,"stargazers_count":9437,"watchers_count":9437,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":1296,"mirror_url":null,"archived":false,"open_issues_count":2262,"forks":1296,"open_issues":2262,"watchers":9437,"default_branch":"master"}},"base":{"label":"Automattic:master","ref":"master","sha":"915ff8f85947b8175920c53130168540d8c895cf","user":{"login":"Automattic","id":887802,"avatar_url":"https://avatars1.githubusercontent.com/u/887802?v=4","gravatar_id":"","url":"https://api.github.com/users/Automattic","html_url":"https://github.com/Automattic","followers_url":"https://api.github.com/users/Automattic/followers","following_url":"https://api.github.com/users/Automattic/following{/other_user}","gists_url":"https://api.github.com/users/Automattic/gists{/gist_id}","starred_url":"https://api.github.com/users/Automattic/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Automattic/subscriptions","organizations_url":"https://api.github.com/users/Automattic/orgs","repos_url":"https://api.github.com/users/Automattic/repos","events_url":"https://api.github.com/users/Automattic/events{/privacy}","received_events_url":"https://api.github.com/users/Automattic/received_events","type":"Organization","site_admin":false},"repo":{"id":45936895,"name":"wp-calypso","full_name":"Automattic/wp-calypso","owner":{"login":"Automattic","id":887802,"avatar_url":"https://avatars1.githubusercontent.com/u/887802?v=4","gravatar_id":"","url":"https://api.github.com/users/Automattic","html_url":"https://github.com/Automattic","followers_url":"https://api.github.com/users/Automattic/followers","following_url":"https://api.github.com/users/Automattic/following{/other_user}","gists_url":"https://api.github.com/users/Automattic/gists{/gist_id}","starred_url":"https://api.github.com/users/Automattic/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Automattic/subscriptions","organizations_url":"https://api.github.com/users/Automattic/orgs","repos_url":"https://api.github.com/users/Automattic/repos","events_url":"https://api.github.com/users/Automattic/events{/privacy}","received_events_url":"https://api.github.com/users/Automattic/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/Automattic/wp-calypso","description":"The new JavaScript- and API-powered WordPress.com","fork":false,"url":"https://api.github.com/repos/Automattic/wp-calypso","forks_url":"https://api.github.com/repos/Automattic/wp-calypso/forks","keys_url":"https://api.github.com/repos/Automattic/wp-calypso/keys{/key_id}","collaborators_url":"https://api.github.com/repos/Automattic/wp-calypso/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/Automattic/wp-calypso/teams","hooks_url":"https://api.github.com/repos/Automattic/wp-calypso/hooks","issue_events_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/events{/number}","events_url":"https://api.github.com/repos/Automattic/wp-calypso/events","assignees_url":"https://api.github.com/repos/Automattic/wp-calypso/assignees{/user}","branches_url":"https://api.github.com/repos/Automattic/wp-calypso/branches{/branch}","tags_url":"https://api.github.com/repos/Automattic/wp-calypso/tags","blobs_url":"https://api.github.com/repos/Automattic/wp-calypso/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/Automattic/wp-calypso/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/Automattic/wp-calypso/git/refs{/sha}","trees_url":"https://api.github.com/repos/Automattic/wp-calypso/git/trees{/sha}","statuses_url":"https://api.github.com/repos/Automattic/wp-calypso/statuses/{sha}","languages_url":"https://api.github.com/repos/Automattic/wp-calypso/languages","stargazers_url":"https://api.github.com/repos/Automattic/wp-calypso/stargazers","contributors_url":"https://api.github.com/repos/Automattic/wp-calypso/contributors","subscribers_url":"https://api.github.com/repos/Automattic/wp-calypso/subscribers","subscription_url":"https://api.github.com/repos/Automattic/wp-calypso/subscription","commits_url":"https://api.github.com/repos/Automattic/wp-calypso/commits{/sha}","git_commits_url":"https://api.github.com/repos/Automattic/wp-calypso/git/commits{/sha}","comments_url":"https://api.github.com/repos/Automattic/wp-calypso/comments{/number}","issue_comment_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/comments{/number}","contents_url":"https://api.github.com/repos/Automattic/wp-calypso/contents/{+path}","compare_url":"https://api.github.com/repos/Automattic/wp-calypso/compare/{base}...{head}","merges_url":"https://api.github.com/repos/Automattic/wp-calypso/merges","archive_url":"https://api.github.com/repos/Automattic/wp-calypso/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/Automattic/wp-calypso/downloads","issues_url":"https://api.github.com/repos/Automattic/wp-calypso/issues{/number}","pulls_url":"https://api.github.com/repos/Automattic/wp-calypso/pulls{/number}","milestones_url":"https://api.github.com/repos/Automattic/wp-calypso/milestones{/number}","notifications_url":"https://api.github.com/repos/Automattic/wp-calypso/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/Automattic/wp-calypso/labels{/name}","releases_url":"https://api.github.com/repos/Automattic/wp-calypso/releases{/id}","deployments_url":"https://api.github.com/repos/Automattic/wp-calypso/deployments","created_at":"2015-11-10T20:00:16Z","updated_at":"2017-11-23T19:22:21Z","pushed_at":"2017-11-23T21:46:17Z","git_url":"git://github.com/Automattic/wp-calypso.git","ssh_url":"git@github.com:Automattic/wp-calypso.git","clone_url":"https://github.com/Automattic/wp-calypso.git","svn_url":"https://github.com/Automattic/wp-calypso","homepage":"https://developer.wordpress.com/calypso/","size":71187,"stargazers_count":9437,"watchers_count":9437,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":1296,"mirror_url":null,"archived":false,"open_issues_count":2262,"forks":1296,"open_issues":2262,"watchers":9437,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/Automattic/wp-calypso/pulls/20175"},"html":{"href":"https://github.com/Automattic/wp-calypso/pull/20175"},"issue":{"href":"https://api.github.com/repos/Automattic/wp-calypso/issues/20175"},"comments":{"href":"https://api.github.com/repos/Automattic/wp-calypso/issues/20175/comments"},"review_comments":{"href":"https://api.github.com/repos/Automattic/wp-calypso/pulls/20175/comments"},"review_comment":{"href":"https://api.github.com/repos/Automattic/wp-calypso/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/Automattic/wp-calypso/pulls/20175/commits"},"statuses":{"href":"https://api.github.com/repos/Automattic/wp-calypso/statuses/6e6984248cec36d0b61d0a9d4130c7a848f7defd"}},"author_association":"MEMBER","merged":false,"mergeable":null,"rebaseable":null,"mergeable_state":"unknown","merged_by":null,"comments":0,"review_comments":0,"maintainer_can_modify":false,"commits":2,"additions":114,"deletions":0,"changed_files":3}}
{"actor":{"display_login":"mendezcode"}}