{"action":"created","comment":{"url":"https://api.github.com/repos/Khan/wonder-blocks/pulls/comments/185911474","pull_request_review_id":117394438,"id":185911474,"diff_hunk":"@@ -0,0 +1,271 @@\n+// @flow\n+import React from \"react\";\n+import {StyleSheet, css} from \"aphrodite\";\n+\n+import {LabelLarge} from \"wonder-blocks-typography\";\n+import {processStyleList} from \"../../wonder-blocks-core/util/util.js\";\n+import Color, {mix, fade} from \"wonder-blocks-color\";\n+import type {ValidTints} from \"wonder-blocks-color\";\n+import type {SharedProps} from \"../types.js\";\n+\n+type Props = SharedProps & {\n+    hovered?: boolean,\n+    focused?: boolean,\n+    pressed?: boolean,\n+};\n+\n+export default class ButtonCore extends React.Component<Props> {\n+    render() {\n+        const {\n+            color,\n+            kind,\n+            light,\n+            size,\n+            disabled,\n+            hovered,\n+            focused,\n+            pressed,\n+        } = this.props;\n+\n+        const buttonStyles = _generateStyles(\n+            color || Color.blue,\n+            kind || \"primary\",\n+            !!light,\n+        );\n+\n+        if (disabled) {\n+            return (\n+                <button\n+                    className={css(\n+                        sharedStyles.shared,\n+                        sharedStyles.disabled,\n+                        size === \"small\" && sharedStyles.small,\n+                        buttonStyles.default,\n+                        buttonStyles.disabled,\n+                    )}\n+                    disabled\n+                >\n+                    <LabelLarge>{this.props.children}</LabelLarge>\n+                </button>\n+            );\n+        }\n+        return (\n+            <button\n+                className={css(\n+                    sharedStyles.shared,\n+                    size === \"small\" && sharedStyles.small,\n+                    buttonStyles.default,\n+                    pressed && buttonStyles.active,\n+                    (hovered || focused) && !pressed && buttonStyles.focus,\n+                )}\n+            >\n+                <LabelLarge>{this.props.children}</LabelLarge>\n+            </button>\n+        );\n+    }\n+}\n+\n+const sharedStyles = StyleSheet.create({\n+    shared: {\n+        position: \"relative\",\n+        height: 40,\n+        margin: 0,\n+        paddingLeft: 16,\n+        paddingRight: 16,\n+        border: \"none\",\n+        borderRadius: 4,\n+        cursor: \"pointer\",\n+        outline: \"none\",\n+    },\n+    disabled: {\n+        cursor: \"auto\",\n+    },\n+    focusRing: {\n+        position: \"absolute\",\n+        boxSizing: \"border-box\",\n+        top: -3,\n+        left: -3,\n+        width: \"calc(100% + 6px)\",\n+        height: \"calc(100% + 6px)\",\n+        borderStyle: \"solid\",\n+        borderWidth: 2,\n+        borderColor: Color.blue,\n+        borderRadius: 7,\n+    },\n+    focusRingRed: {\n+        borderColor: Color.red,\n+    },\n+    focusRingLight: {\n+        borderColor: Color.white,\n+    },\n+    small: {\n+        height: 32,\n+    },\n+});\n+\n+const styles = {};\n+\n+const _generateStyles = (color, kind, light) => {\n+    const buttonType = color + kind + light.toString();\n+    if (styles[buttonType]) {\n+        return styles[buttonType];\n+    }\n+\n+    let newStyles = {};\n+\n+    if (kind === \"primary\" && !light) {\n+        newStyles = {\n+            default: {\n+                background: color,\n+                color: Color.white,\n+            },\n+            focus: {\n+                \":before\": {\n+                    content: \"''\",\n+                    position: \"absolute\",\n+                    top: -3,\n+                    left: -3,\n+                    right: -3,\n+                    bottom: -3,\n+                    borderColor: color,\n+                    borderWidth: 2,\n+                    borderStyle: \"solid\",\n+                    borderRadius: 7,\n+                },\n+            },\n+            active: {\n+                background: mix(Color.offBlack32, color),\n+                color: mix(fade(color, 0.32), Color.white),\n+            },\n+            disabled: {\n+                background: Color.offBlack32,\n+                color: Color.white64,\n+            },\n+        };\n+    } else if (kind === \"primary\" && light) {","path":"packages/wonder-blocks-button/components/button-core.js","position":145,"original_position":145,"commit_id":"c68aec653aac1ecf3756f49432e33b8b71f38ace","original_commit_id":"c68aec653aac1ecf3756f49432e33b8b71f38ace","user":{"login":"kevinbarabash","id":1044413,"avatar_url":"https://avatars3.githubusercontent.com/u/1044413?v=4","gravatar_id":"","url":"https://api.github.com/users/kevinbarabash","html_url":"https://github.com/kevinbarabash","followers_url":"https://api.github.com/users/kevinbarabash/followers","following_url":"https://api.github.com/users/kevinbarabash/following{/other_user}","gists_url":"https://api.github.com/users/kevinbarabash/gists{/gist_id}","starred_url":"https://api.github.com/users/kevinbarabash/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kevinbarabash/subscriptions","organizations_url":"https://api.github.com/users/kevinbarabash/orgs","repos_url":"https://api.github.com/users/kevinbarabash/repos","events_url":"https://api.github.com/users/kevinbarabash/events{/privacy}","received_events_url":"https://api.github.com/users/kevinbarabash/received_events","type":"User","site_admin":false},"body":"Should probably keep `primary`, `secondary`, `tertiary` separate though.","created_at":"2018-05-03T19:27:34Z","updated_at":"2018-05-03T19:39:26Z","html_url":"https://github.com/Khan/wonder-blocks/pull/63#discussion_r185911474","pull_request_url":"https://api.github.com/repos/Khan/wonder-blocks/pulls/63","author_association":"OWNER","_links":{"self":{"href":"https://api.github.com/repos/Khan/wonder-blocks/pulls/comments/185911474"},"html":{"href":"https://github.com/Khan/wonder-blocks/pull/63#discussion_r185911474"},"pull_request":{"href":"https://api.github.com/repos/Khan/wonder-blocks/pulls/63"}},"in_reply_to_id":185911303},"pull_request":{"url":"https://api.github.com/repos/Khan/wonder-blocks/pulls/63","id":185499799,"html_url":"https://github.com/Khan/wonder-blocks/pull/63","diff_url":"https://github.com/Khan/wonder-blocks/pull/63.diff","patch_url":"https://github.com/Khan/wonder-blocks/pull/63.patch","issue_url":"https://api.github.com/repos/Khan/wonder-blocks/issues/63","number":63,"state":"open","locked":false,"title":"[Button v1] Create ButtonCore component","user":{"login":"chenyejia","id":10645593,"avatar_url":"https://avatars3.githubusercontent.com/u/10645593?v=4","gravatar_id":"","url":"https://api.github.com/users/chenyejia","html_url":"https://github.com/chenyejia","followers_url":"https://api.github.com/users/chenyejia/followers","following_url":"https://api.github.com/users/chenyejia/following{/other_user}","gists_url":"https://api.github.com/users/chenyejia/gists{/gist_id}","starred_url":"https://api.github.com/users/chenyejia/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chenyejia/subscriptions","organizations_url":"https://api.github.com/users/chenyejia/orgs","repos_url":"https://api.github.com/users/chenyejia/repos","events_url":"https://api.github.com/users/chenyejia/events{/privacy}","received_events_url":"https://api.github.com/users/chenyejia/received_events","type":"User","site_admin":false},"body":"In this change, we create a stateless `ButtonCore` component that will render all the different states of `Button`.\r\n\r\nImplemented:\r\n* Styling for all five states of `Button` (default, disabled, hovered, focused, pressed).\r\n\r\nNot yet implemented:\r\n* Rendering a spinner instead of content\r\n* Rendering `Icon`s\r\n* Custom `style`\r\n* `ButtonBehavior`\r\n\r\nTest Plan:\r\nView on Styleguidist","created_at":"2018-05-02T16:54:25Z","updated_at":"2018-05-03T19:39:26Z","closed_at":null,"merged_at":null,"merge_commit_sha":"4782ced4b1e50677dd11c6d6627e0262c3e0d456","assignee":null,"assignees":[],"requested_reviewers":[],"requested_teams":[],"labels":[],"milestone":null,"commits_url":"https://api.github.com/repos/Khan/wonder-blocks/pulls/63/commits","review_comments_url":"https://api.github.com/repos/Khan/wonder-blocks/pulls/63/comments","review_comment_url":"https://api.github.com/repos/Khan/wonder-blocks/pulls/comments{/number}","comments_url":"https://api.github.com/repos/Khan/wonder-blocks/issues/63/comments","statuses_url":"https://api.github.com/repos/Khan/wonder-blocks/statuses/c68aec653aac1ecf3756f49432e33b8b71f38ace","head":{"label":"Khan:yejia-button","ref":"yejia-button","sha":"c68aec653aac1ecf3756f49432e33b8b71f38ace","user":{"login":"Khan","id":15455,"avatar_url":"https://avatars1.githubusercontent.com/u/15455?v=4","gravatar_id":"","url":"https://api.github.com/users/Khan","html_url":"https://github.com/Khan","followers_url":"https://api.github.com/users/Khan/followers","following_url":"https://api.github.com/users/Khan/following{/other_user}","gists_url":"https://api.github.com/users/Khan/gists{/gist_id}","starred_url":"https://api.github.com/users/Khan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Khan/subscriptions","organizations_url":"https://api.github.com/users/Khan/orgs","repos_url":"https://api.github.com/users/Khan/repos","events_url":"https://api.github.com/users/Khan/events{/privacy}","received_events_url":"https://api.github.com/users/Khan/received_events","type":"Organization","site_admin":false},"repo":{"id":123198469,"name":"wonder-blocks","full_name":"Khan/wonder-blocks","owner":{"login":"Khan","id":15455,"avatar_url":"https://avatars1.githubusercontent.com/u/15455?v=4","gravatar_id":"","url":"https://api.github.com/users/Khan","html_url":"https://github.com/Khan","followers_url":"https://api.github.com/users/Khan/followers","following_url":"https://api.github.com/users/Khan/following{/other_user}","gists_url":"https://api.github.com/users/Khan/gists{/gist_id}","starred_url":"https://api.github.com/users/Khan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Khan/subscriptions","organizations_url":"https://api.github.com/users/Khan/orgs","repos_url":"https://api.github.com/users/Khan/repos","events_url":"https://api.github.com/users/Khan/events{/privacy}","received_events_url":"https://api.github.com/users/Khan/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/Khan/wonder-blocks","description":"React components for Wonder Blocks design system.","fork":false,"url":"https://api.github.com/repos/Khan/wonder-blocks","forks_url":"https://api.github.com/repos/Khan/wonder-blocks/forks","keys_url":"https://api.github.com/repos/Khan/wonder-blocks/keys{/key_id}","collaborators_url":"https://api.github.com/repos/Khan/wonder-blocks/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/Khan/wonder-blocks/teams","hooks_url":"https://api.github.com/repos/Khan/wonder-blocks/hooks","issue_events_url":"https://api.github.com/repos/Khan/wonder-blocks/issues/events{/number}","events_url":"https://api.github.com/repos/Khan/wonder-blocks/events","assignees_url":"https://api.github.com/repos/Khan/wonder-blocks/assignees{/user}","branches_url":"https://api.github.com/repos/Khan/wonder-blocks/branches{/branch}","tags_url":"https://api.github.com/repos/Khan/wonder-blocks/tags","blobs_url":"https://api.github.com/repos/Khan/wonder-blocks/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/Khan/wonder-blocks/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/Khan/wonder-blocks/git/refs{/sha}","trees_url":"https://api.github.com/repos/Khan/wonder-blocks/git/trees{/sha}","statuses_url":"https://api.github.com/repos/Khan/wonder-blocks/statuses/{sha}","languages_url":"https://api.github.com/repos/Khan/wonder-blocks/languages","stargazers_url":"https://api.github.com/repos/Khan/wonder-blocks/stargazers","contributors_url":"https://api.github.com/repos/Khan/wonder-blocks/contributors","subscribers_url":"https://api.github.com/repos/Khan/wonder-blocks/subscribers","subscription_url":"https://api.github.com/repos/Khan/wonder-blocks/subscription","commits_url":"https://api.github.com/repos/Khan/wonder-blocks/commits{/sha}","git_commits_url":"https://api.github.com/repos/Khan/wonder-blocks/git/commits{/sha}","comments_url":"https://api.github.com/repos/Khan/wonder-blocks/comments{/number}","issue_comment_url":"https://api.github.com/repos/Khan/wonder-blocks/issues/comments{/number}","contents_url":"https://api.github.com/repos/Khan/wonder-blocks/contents/{+path}","compare_url":"https://api.github.com/repos/Khan/wonder-blocks/compare/{base}...{head}","merges_url":"https://api.github.com/repos/Khan/wonder-blocks/merges","archive_url":"https://api.github.com/repos/Khan/wonder-blocks/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/Khan/wonder-blocks/downloads","issues_url":"https://api.github.com/repos/Khan/wonder-blocks/issues{/number}","pulls_url":"https://api.github.com/repos/Khan/wonder-blocks/pulls{/number}","milestones_url":"https://api.github.com/repos/Khan/wonder-blocks/milestones{/number}","notifications_url":"https://api.github.com/repos/Khan/wonder-blocks/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/Khan/wonder-blocks/labels{/name}","releases_url":"https://api.github.com/repos/Khan/wonder-blocks/releases{/id}","deployments_url":"https://api.github.com/repos/Khan/wonder-blocks/deployments","created_at":"2018-02-27T22:50:41Z","updated_at":"2018-05-03T19:01:08Z","pushed_at":"2018-05-03T19:01:06Z","git_url":"git://github.com/Khan/wonder-blocks.git","ssh_url":"git@github.com:Khan/wonder-blocks.git","clone_url":"https://github.com/Khan/wonder-blocks.git","svn_url":"https://github.com/Khan/wonder-blocks","homepage":"https://wonder-blocks.netlify.com","size":3366,"stargazers_count":13,"watchers_count":13,"language":"JavaScript","has_issues":false,"has_projects":false,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":0,"mirror_url":null,"archived":false,"open_issues_count":4,"license":null,"forks":0,"open_issues":4,"watchers":13,"default_branch":"master"}},"base":{"label":"Khan:master","ref":"master","sha":"15e19ed55eb3e9ba17478a872bb3155b9b193995","user":{"login":"Khan","id":15455,"avatar_url":"https://avatars1.githubusercontent.com/u/15455?v=4","gravatar_id":"","url":"https://api.github.com/users/Khan","html_url":"https://github.com/Khan","followers_url":"https://api.github.com/users/Khan/followers","following_url":"https://api.github.com/users/Khan/following{/other_user}","gists_url":"https://api.github.com/users/Khan/gists{/gist_id}","starred_url":"https://api.github.com/users/Khan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Khan/subscriptions","organizations_url":"https://api.github.com/users/Khan/orgs","repos_url":"https://api.github.com/users/Khan/repos","events_url":"https://api.github.com/users/Khan/events{/privacy}","received_events_url":"https://api.github.com/users/Khan/received_events","type":"Organization","site_admin":false},"repo":{"id":123198469,"name":"wonder-blocks","full_name":"Khan/wonder-blocks","owner":{"login":"Khan","id":15455,"avatar_url":"https://avatars1.githubusercontent.com/u/15455?v=4","gravatar_id":"","url":"https://api.github.com/users/Khan","html_url":"https://github.com/Khan","followers_url":"https://api.github.com/users/Khan/followers","following_url":"https://api.github.com/users/Khan/following{/other_user}","gists_url":"https://api.github.com/users/Khan/gists{/gist_id}","starred_url":"https://api.github.com/users/Khan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Khan/subscriptions","organizations_url":"https://api.github.com/users/Khan/orgs","repos_url":"https://api.github.com/users/Khan/repos","events_url":"https://api.github.com/users/Khan/events{/privacy}","received_events_url":"https://api.github.com/users/Khan/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/Khan/wonder-blocks","description":"React components for Wonder Blocks design system.","fork":false,"url":"https://api.github.com/repos/Khan/wonder-blocks","forks_url":"https://api.github.com/repos/Khan/wonder-blocks/forks","keys_url":"https://api.github.com/repos/Khan/wonder-blocks/keys{/key_id}","collaborators_url":"https://api.github.com/repos/Khan/wonder-blocks/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/Khan/wonder-blocks/teams","hooks_url":"https://api.github.com/repos/Khan/wonder-blocks/hooks","issue_events_url":"https://api.github.com/repos/Khan/wonder-blocks/issues/events{/number}","events_url":"https://api.github.com/repos/Khan/wonder-blocks/events","assignees_url":"https://api.github.com/repos/Khan/wonder-blocks/assignees{/user}","branches_url":"https://api.github.com/repos/Khan/wonder-blocks/branches{/branch}","tags_url":"https://api.github.com/repos/Khan/wonder-blocks/tags","blobs_url":"https://api.github.com/repos/Khan/wonder-blocks/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/Khan/wonder-blocks/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/Khan/wonder-blocks/git/refs{/sha}","trees_url":"https://api.github.com/repos/Khan/wonder-blocks/git/trees{/sha}","statuses_url":"https://api.github.com/repos/Khan/wonder-blocks/statuses/{sha}","languages_url":"https://api.github.com/repos/Khan/wonder-blocks/languages","stargazers_url":"https://api.github.com/repos/Khan/wonder-blocks/stargazers","contributors_url":"https://api.github.com/repos/Khan/wonder-blocks/contributors","subscribers_url":"https://api.github.com/repos/Khan/wonder-blocks/subscribers","subscription_url":"https://api.github.com/repos/Khan/wonder-blocks/subscription","commits_url":"https://api.github.com/repos/Khan/wonder-blocks/commits{/sha}","git_commits_url":"https://api.github.com/repos/Khan/wonder-blocks/git/commits{/sha}","comments_url":"https://api.github.com/repos/Khan/wonder-blocks/comments{/number}","issue_comment_url":"https://api.github.com/repos/Khan/wonder-blocks/issues/comments{/number}","contents_url":"https://api.github.com/repos/Khan/wonder-blocks/contents/{+path}","compare_url":"https://api.github.com/repos/Khan/wonder-blocks/compare/{base}...{head}","merges_url":"https://api.github.com/repos/Khan/wonder-blocks/merges","archive_url":"https://api.github.com/repos/Khan/wonder-blocks/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/Khan/wonder-blocks/downloads","issues_url":"https://api.github.com/repos/Khan/wonder-blocks/issues{/number}","pulls_url":"https://api.github.com/repos/Khan/wonder-blocks/pulls{/number}","milestones_url":"https://api.github.com/repos/Khan/wonder-blocks/milestones{/number}","notifications_url":"https://api.github.com/repos/Khan/wonder-blocks/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/Khan/wonder-blocks/labels{/name}","releases_url":"https://api.github.com/repos/Khan/wonder-blocks/releases{/id}","deployments_url":"https://api.github.com/repos/Khan/wonder-blocks/deployments","created_at":"2018-02-27T22:50:41Z","updated_at":"2018-05-03T19:01:08Z","pushed_at":"2018-05-03T19:01:06Z","git_url":"git://github.com/Khan/wonder-blocks.git","ssh_url":"git@github.com:Khan/wonder-blocks.git","clone_url":"https://github.com/Khan/wonder-blocks.git","svn_url":"https://github.com/Khan/wonder-blocks","homepage":"https://wonder-blocks.netlify.com","size":3366,"stargazers_count":13,"watchers_count":13,"language":"JavaScript","has_issues":false,"has_projects":false,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":0,"mirror_url":null,"archived":false,"open_issues_count":4,"license":null,"forks":0,"open_issues":4,"watchers":13,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/Khan/wonder-blocks/pulls/63"},"html":{"href":"https://github.com/Khan/wonder-blocks/pull/63"},"issue":{"href":"https://api.github.com/repos/Khan/wonder-blocks/issues/63"},"comments":{"href":"https://api.github.com/repos/Khan/wonder-blocks/issues/63/comments"},"review_comments":{"href":"https://api.github.com/repos/Khan/wonder-blocks/pulls/63/comments"},"review_comment":{"href":"https://api.github.com/repos/Khan/wonder-blocks/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/Khan/wonder-blocks/pulls/63/commits"},"statuses":{"href":"https://api.github.com/repos/Khan/wonder-blocks/statuses/c68aec653aac1ecf3756f49432e33b8b71f38ace"}},"author_association":"CONTRIBUTOR"}}
{"actor":{"display_login":"kevinbarabash"}}