{"action":"created","comment":{"url":"https://api.github.com/repos/Automattic/wp-calypso/pulls/comments/189161456","pull_request_review_id":121287454,"id":189161456,"diff_hunk":"@@ -7,20 +7,43 @@\n import classNames from 'classnames';\n import PropTypes from 'prop-types';\n import React from 'react';\n+import { keys } from 'lodash';\n+\n+const ALT_TEXT = {\n+\talipay: 'Alipay',\n+\tamex: 'American Express',\n+\tbancontact: 'Bancontact',\n+\tdiners: 'Diners Club',\n+\tdiscover: 'Discover',\n+\teps: 'eps',\n+\tgiropay: 'Giropay',\n+\tideal: 'iDEAL',\n+\tjcb: 'JCB',\n+\tmastercard: 'MasterCard',\n+\tp24: 'Przelewy24',\n+\tpaypal: 'PayPal',\n+\tplaceholder: '',\n+\tunionpay: 'UnionPay',\n+\tvisa: 'VISA',\n+};\n+\n+const POSSIBLE_TYPES = keys( ALT_TEXT );\n \n class PaymentLogo extends React.Component {\n \tstatic propTypes = {\n-\t\ttype: PropTypes.string.isRequired,\n-\t\taltText: PropTypes.string.isRequired,\n+\t\ttype: PropTypes.oneOf( POSSIBLE_TYPES ),\n+\t\taltText: PropTypes.string,\n \t\tisCompact: PropTypes.bool,\n \t};\n \n \trender() {\n-\t\tconst classes = classNames( 'payment-logo', `is-${ this.props.type }`, {\n-\t\t\t'is-compact': this.props.isCompact,\n+\t\tconst { altText, isCompact, type } = this.props;\n+\n+\t\tconst classes = classNames( 'payment-logo', `is-${ type }`, {\n+\t\t\t'is-compact': isCompact,\n \t\t} );\n \n-\t\treturn <div className={ classes } aria-label={ this.props.altText } />;\n+\t\treturn <div className={ classes } aria-label={ altText || ALT_TEXT[ type ] || '' } />;","path":"client/components/payment-logo/index.jsx","position":null,"original_position":45,"commit_id":"797689c882c94b4da15ca6250b4fdd6d4d582343","original_commit_id":"b544811d04320550c0d80f3d3860b2376d15fb0f","user":{"login":"jsliang","id":681110,"avatar_url":"https://avatars3.githubusercontent.com/u/681110?v=4","gravatar_id":"","url":"https://api.github.com/users/jsliang","html_url":"https://github.com/jsliang","followers_url":"https://api.github.com/users/jsliang/followers","following_url":"https://api.github.com/users/jsliang/following{/other_user}","gists_url":"https://api.github.com/users/jsliang/gists{/gist_id}","starred_url":"https://api.github.com/users/jsliang/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jsliang/subscriptions","organizations_url":"https://api.github.com/users/jsliang/orgs","repos_url":"https://api.github.com/users/jsliang/repos","events_url":"https://api.github.com/users/jsliang/events{/privacy}","received_events_url":"https://api.github.com/users/jsliang/received_events","type":"User","site_admin":false},"body":"Hi @jsnmoon ,  I'm a little concerned about the use of `{ ...this.props }`. I'd rather specify a finite list of props that can be consumed by PaymentLogo for ease of maintenance. If consumers pass down props that are not documented, would that causes hassles if we want to refactor this component at some time in the future?","created_at":"2018-05-18T04:35:20Z","updated_at":"2018-05-18T04:35:20Z","html_url":"https://github.com/Automattic/wp-calypso/pull/24769#discussion_r189161456","pull_request_url":"https://api.github.com/repos/Automattic/wp-calypso/pulls/24769","author_association":"CONTRIBUTOR","_links":{"self":{"href":"https://api.github.com/repos/Automattic/wp-calypso/pulls/comments/189161456"},"html":{"href":"https://github.com/Automattic/wp-calypso/pull/24769#discussion_r189161456"},"pull_request":{"href":"https://api.github.com/repos/Automattic/wp-calypso/pulls/24769"}},"in_reply_to_id":189114652},"pull_request":{"url":"https://api.github.com/repos/Automattic/wp-calypso/pulls/24769","id":186991172,"html_url":"https://github.com/Automattic/wp-calypso/pull/24769","diff_url":"https://github.com/Automattic/wp-calypso/pull/24769.diff","patch_url":"https://github.com/Automattic/wp-calypso/pull/24769.patch","issue_url":"https://api.github.com/repos/Automattic/wp-calypso/issues/24769","number":24769,"state":"open","locked":false,"title":"Components & DevDocs: dont make the `altText` a required prop for PaymentLogo","user":{"login":"jsliang","id":681110,"avatar_url":"https://avatars3.githubusercontent.com/u/681110?v=4","gravatar_id":"","url":"https://api.github.com/users/jsliang","html_url":"https://github.com/jsliang","followers_url":"https://api.github.com/users/jsliang/followers","following_url":"https://api.github.com/users/jsliang/following{/other_user}","gists_url":"https://api.github.com/users/jsliang/gists{/gist_id}","starred_url":"https://api.github.com/users/jsliang/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jsliang/subscriptions","organizations_url":"https://api.github.com/users/jsliang/orgs","repos_url":"https://api.github.com/users/jsliang/repos","events_url":"https://api.github.com/users/jsliang/events{/privacy}","received_events_url":"https://api.github.com/users/jsliang/received_events","type":"User","site_admin":false},"body":"When visiting the README of PaymentLogo (http://calypso.localhost:3000/devdocs/design/payment-logo), I saw the following warning in dev console:\r\n\r\n```\r\nindex.jsx:101 Warning: Failed prop type: The prop `altText` is marked as required in `PaymentLogo`, but its value is `undefined`.\r\n    in PaymentLogo (created by PaymentLogo)\r\n    in PaymentLogo (created by DesignAssets)\r\n    in span (created by DocsExampleWrapper)\r\n    in div (created by DocsExampleWrapper)\r\n    in div (created by DocsExampleWrapper)\r\n    in DocsExampleWrapper (created by Collection)\r\n    in div (created by Collection)\r\n    in div (created by LazilyRender)\r\n    in LazilyRender (created by Collection)\r\n    in div (created by Collection)\r\n    in Collection (created by DesignAssets)\r\n    in main (created by Main)\r\n    in Main (created by DesignAssets)\r\n    in DesignAssets (created by AsyncLoad)\r\n    in AsyncLoad (created by DevdocsAsyncLoad)\r\n    in DevdocsAsyncLoad\r\n    in div (created by Layout)\r\n    in div (created by Layout)\r\n    in div (created by Layout)\r\n    in Layout (created by Connect(Layout))\r\n    in Connect(Layout) (created by ReduxWrappedLayout)\r\n    in Provider (created by ReduxWrappedLayout)\r\n    in ReduxWrappedLayout\r\n```\r\n\r\nI searched through the whole repository and found that most of the usages of `PaymentLogo` do not pass anything to the `altText` prop. Since the possible values of the `type` prop are limited (according to the README of `PaymentLogo`), I think it makes sense to infer `PaymentLogo`'s `altText` from its `type` when `altText` is not given. We can achieve this by maintaining a mapping from `type` to `altText`. \r\n\r\nIn addition, I found that the possible values of `type` in `PaymentLogo` are far more than those documented on README when I looked into `PaymentLogo`'s `style.scss`. I've updated README and examples accordingly.\r\n\r\nFixes #24775.","created_at":"2018-05-09T17:39:10Z","updated_at":"2018-05-18T04:35:20Z","closed_at":null,"merged_at":null,"merge_commit_sha":"d606b7ffd9d4469b76dfdff786c198a7dabff34b","assignee":null,"assignees":[],"requested_reviewers":[{"login":"yoavf","id":844866,"avatar_url":"https://avatars3.githubusercontent.com/u/844866?v=4","gravatar_id":"","url":"https://api.github.com/users/yoavf","html_url":"https://github.com/yoavf","followers_url":"https://api.github.com/users/yoavf/followers","following_url":"https://api.github.com/users/yoavf/following{/other_user}","gists_url":"https://api.github.com/users/yoavf/gists{/gist_id}","starred_url":"https://api.github.com/users/yoavf/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yoavf/subscriptions","organizations_url":"https://api.github.com/users/yoavf/orgs","repos_url":"https://api.github.com/users/yoavf/repos","events_url":"https://api.github.com/users/yoavf/events{/privacy}","received_events_url":"https://api.github.com/users/yoavf/received_events","type":"User","site_admin":false}],"requested_teams":[],"labels":[{"id":285010033,"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/DevDocs","name":"DevDocs","color":"bfdadc","default":false},{"id":301697869,"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/OSS%20Citizen","name":"OSS Citizen","color":"5319e7","default":false},{"id":430028306,"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/Payment%20Methods","name":"Payment Methods","color":"006b75","default":false},{"id":285010023,"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Status]%20Needs%20Design%20Review","name":"[Status] Needs Design Review","color":"13CDF7","default":false},{"id":285010018,"url":"https://api.github.com/repos/Automattic/wp-calypso/labels/[Status]%20Needs%20Review","name":"[Status] Needs Review","color":"fbca04","default":false}],"milestone":null,"commits_url":"https://api.github.com/repos/Automattic/wp-calypso/pulls/24769/commits","review_comments_url":"https://api.github.com/repos/Automattic/wp-calypso/pulls/24769/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/24769/comments","statuses_url":"https://api.github.com/repos/Automattic/wp-calypso/statuses/797689c882c94b4da15ca6250b4fdd6d4d582343","head":{"label":"jsliang:try/paymentlogo-dont-require-alttext","ref":"try/paymentlogo-dont-require-alttext","sha":"797689c882c94b4da15ca6250b4fdd6d4d582343","user":{"login":"jsliang","id":681110,"avatar_url":"https://avatars3.githubusercontent.com/u/681110?v=4","gravatar_id":"","url":"https://api.github.com/users/jsliang","html_url":"https://github.com/jsliang","followers_url":"https://api.github.com/users/jsliang/followers","following_url":"https://api.github.com/users/jsliang/following{/other_user}","gists_url":"https://api.github.com/users/jsliang/gists{/gist_id}","starred_url":"https://api.github.com/users/jsliang/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jsliang/subscriptions","organizations_url":"https://api.github.com/users/jsliang/orgs","repos_url":"https://api.github.com/users/jsliang/repos","events_url":"https://api.github.com/users/jsliang/events{/privacy}","received_events_url":"https://api.github.com/users/jsliang/received_events","type":"User","site_admin":false},"repo":{"id":127600665,"name":"wp-calypso","full_name":"jsliang/wp-calypso","owner":{"login":"jsliang","id":681110,"avatar_url":"https://avatars3.githubusercontent.com/u/681110?v=4","gravatar_id":"","url":"https://api.github.com/users/jsliang","html_url":"https://github.com/jsliang","followers_url":"https://api.github.com/users/jsliang/followers","following_url":"https://api.github.com/users/jsliang/following{/other_user}","gists_url":"https://api.github.com/users/jsliang/gists{/gist_id}","starred_url":"https://api.github.com/users/jsliang/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jsliang/subscriptions","organizations_url":"https://api.github.com/users/jsliang/orgs","repos_url":"https://api.github.com/users/jsliang/repos","events_url":"https://api.github.com/users/jsliang/events{/privacy}","received_events_url":"https://api.github.com/users/jsliang/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/jsliang/wp-calypso","description":"The JavaScript and API powered WordPress.com","fork":true,"url":"https://api.github.com/repos/jsliang/wp-calypso","forks_url":"https://api.github.com/repos/jsliang/wp-calypso/forks","keys_url":"https://api.github.com/repos/jsliang/wp-calypso/keys{/key_id}","collaborators_url":"https://api.github.com/repos/jsliang/wp-calypso/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/jsliang/wp-calypso/teams","hooks_url":"https://api.github.com/repos/jsliang/wp-calypso/hooks","issue_events_url":"https://api.github.com/repos/jsliang/wp-calypso/issues/events{/number}","events_url":"https://api.github.com/repos/jsliang/wp-calypso/events","assignees_url":"https://api.github.com/repos/jsliang/wp-calypso/assignees{/user}","branches_url":"https://api.github.com/repos/jsliang/wp-calypso/branches{/branch}","tags_url":"https://api.github.com/repos/jsliang/wp-calypso/tags","blobs_url":"https://api.github.com/repos/jsliang/wp-calypso/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/jsliang/wp-calypso/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/jsliang/wp-calypso/git/refs{/sha}","trees_url":"https://api.github.com/repos/jsliang/wp-calypso/git/trees{/sha}","statuses_url":"https://api.github.com/repos/jsliang/wp-calypso/statuses/{sha}","languages_url":"https://api.github.com/repos/jsliang/wp-calypso/languages","stargazers_url":"https://api.github.com/repos/jsliang/wp-calypso/stargazers","contributors_url":"https://api.github.com/repos/jsliang/wp-calypso/contributors","subscribers_url":"https://api.github.com/repos/jsliang/wp-calypso/subscribers","subscription_url":"https://api.github.com/repos/jsliang/wp-calypso/subscription","commits_url":"https://api.github.com/repos/jsliang/wp-calypso/commits{/sha}","git_commits_url":"https://api.github.com/repos/jsliang/wp-calypso/git/commits{/sha}","comments_url":"https://api.github.com/repos/jsliang/wp-calypso/comments{/number}","issue_comment_url":"https://api.github.com/repos/jsliang/wp-calypso/issues/comments{/number}","contents_url":"https://api.github.com/repos/jsliang/wp-calypso/contents/{+path}","compare_url":"https://api.github.com/repos/jsliang/wp-calypso/compare/{base}...{head}","merges_url":"https://api.github.com/repos/jsliang/wp-calypso/merges","archive_url":"https://api.github.com/repos/jsliang/wp-calypso/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/jsliang/wp-calypso/downloads","issues_url":"https://api.github.com/repos/jsliang/wp-calypso/issues{/number}","pulls_url":"https://api.github.com/repos/jsliang/wp-calypso/pulls{/number}","milestones_url":"https://api.github.com/repos/jsliang/wp-calypso/milestones{/number}","notifications_url":"https://api.github.com/repos/jsliang/wp-calypso/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/jsliang/wp-calypso/labels{/name}","releases_url":"https://api.github.com/repos/jsliang/wp-calypso/releases{/id}","deployments_url":"https://api.github.com/repos/jsliang/wp-calypso/deployments","created_at":"2018-04-01T05:37:40Z","updated_at":"2018-05-15T17:56:16Z","pushed_at":"2018-05-18T04:23:07Z","git_url":"git://github.com/jsliang/wp-calypso.git","ssh_url":"git@github.com:jsliang/wp-calypso.git","clone_url":"https://github.com/jsliang/wp-calypso.git","svn_url":"https://github.com/jsliang/wp-calypso","homepage":"https://developer.wordpress.com/calypso/","size":89298,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":false,"has_projects":true,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":0,"mirror_url":null,"archived":false,"open_issues_count":0,"license":{"key":"gpl-2.0","name":"GNU General Public License v2.0","spdx_id":"GPL-2.0","url":"https://api.github.com/licenses/gpl-2.0"},"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"Automattic:master","ref":"master","sha":"78ed3f14334c8df9a3f2557dd8ad70408ca0b6a8","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 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":"2018-05-18T02:07:18Z","pushed_at":"2018-05-18T04:23:10Z","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":88777,"stargazers_count":9960,"watchers_count":9960,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":1400,"mirror_url":null,"archived":false,"open_issues_count":1533,"license":{"key":"gpl-2.0","name":"GNU General Public License v2.0","spdx_id":"GPL-2.0","url":"https://api.github.com/licenses/gpl-2.0"},"forks":1400,"open_issues":1533,"watchers":9960,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/Automattic/wp-calypso/pulls/24769"},"html":{"href":"https://github.com/Automattic/wp-calypso/pull/24769"},"issue":{"href":"https://api.github.com/repos/Automattic/wp-calypso/issues/24769"},"comments":{"href":"https://api.github.com/repos/Automattic/wp-calypso/issues/24769/comments"},"review_comments":{"href":"https://api.github.com/repos/Automattic/wp-calypso/pulls/24769/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/24769/commits"},"statuses":{"href":"https://api.github.com/repos/Automattic/wp-calypso/statuses/797689c882c94b4da15ca6250b4fdd6d4d582343"}},"author_association":"CONTRIBUTOR"}}
{"actor":{"display_login":"jsliang"}}