{"action":"created","issue":{"url":"https://api.github.com/repos/woocommerce/wc-admin/issues/237","repository_url":"https://api.github.com/repos/woocommerce/wc-admin","labels_url":"https://api.github.com/repos/woocommerce/wc-admin/issues/237/labels{/name}","comments_url":"https://api.github.com/repos/woocommerce/wc-admin/issues/237/comments","events_url":"https://api.github.com/repos/woocommerce/wc-admin/issues/237/events","html_url":"https://github.com/woocommerce/wc-admin/pull/237","id":344180593,"node_id":"MDExOlB1bGxSZXF1ZXN0MjAzNjM2ODgw","number":237,"title":"SummaryNumber Component: Update to latest hifi design","user":{"login":"ryelle","id":541093,"node_id":"MDQ6VXNlcjU0MTA5Mw==","avatar_url":"https://avatars1.githubusercontent.com/u/541093?v=4","gravatar_id":"","url":"https://api.github.com/users/ryelle","html_url":"https://github.com/ryelle","followers_url":"https://api.github.com/users/ryelle/followers","following_url":"https://api.github.com/users/ryelle/following{/other_user}","gists_url":"https://api.github.com/users/ryelle/gists{/gist_id}","starred_url":"https://api.github.com/users/ryelle/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ryelle/subscriptions","organizations_url":"https://api.github.com/users/ryelle/orgs","repos_url":"https://api.github.com/users/ryelle/repos","events_url":"https://api.github.com/users/ryelle/events{/privacy}","received_events_url":"https://api.github.com/users/ryelle/received_events","type":"User","site_admin":false},"labels":[{"id":921901163,"node_id":"MDU6TGFiZWw5MjE5MDExNjM=","url":"https://api.github.com/repos/woocommerce/wc-admin/labels/Analytics","name":"Analytics","color":"80f7d3","default":false},{"id":921783988,"node_id":"MDU6TGFiZWw5MjE3ODM5ODg=","url":"https://api.github.com/repos/woocommerce/wc-admin/labels/[Status]%20Needs%20Design%20Review","name":"[Status] Needs Design Review","color":"13CDF7","default":false},{"id":921782814,"node_id":"MDU6TGFiZWw5MjE3ODI4MTQ=","url":"https://api.github.com/repos/woocommerce/wc-admin/labels/[Status]%20Needs%20Review","name":"[Status] Needs Review","color":"fbca04","default":false}],"state":"open","locked":false,"assignee":{"login":"ryelle","id":541093,"node_id":"MDQ6VXNlcjU0MTA5Mw==","avatar_url":"https://avatars1.githubusercontent.com/u/541093?v=4","gravatar_id":"","url":"https://api.github.com/users/ryelle","html_url":"https://github.com/ryelle","followers_url":"https://api.github.com/users/ryelle/followers","following_url":"https://api.github.com/users/ryelle/following{/other_user}","gists_url":"https://api.github.com/users/ryelle/gists{/gist_id}","starred_url":"https://api.github.com/users/ryelle/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ryelle/subscriptions","organizations_url":"https://api.github.com/users/ryelle/orgs","repos_url":"https://api.github.com/users/ryelle/repos","events_url":"https://api.github.com/users/ryelle/events{/privacy}","received_events_url":"https://api.github.com/users/ryelle/received_events","type":"User","site_admin":false},"assignees":[{"login":"ryelle","id":541093,"node_id":"MDQ6VXNlcjU0MTA5Mw==","avatar_url":"https://avatars1.githubusercontent.com/u/541093?v=4","gravatar_id":"","url":"https://api.github.com/users/ryelle","html_url":"https://github.com/ryelle","followers_url":"https://api.github.com/users/ryelle/followers","following_url":"https://api.github.com/users/ryelle/following{/other_user}","gists_url":"https://api.github.com/users/ryelle/gists{/gist_id}","starred_url":"https://api.github.com/users/ryelle/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ryelle/subscriptions","organizations_url":"https://api.github.com/users/ryelle/orgs","repos_url":"https://api.github.com/users/ryelle/repos","events_url":"https://api.github.com/users/ryelle/events{/privacy}","received_events_url":"https://api.github.com/users/ryelle/received_events","type":"User","site_admin":false}],"milestone":null,"comments":0,"created_at":"2018-07-24T19:55:03Z","updated_at":"2018-07-25T18:57:59Z","closed_at":null,"author_association":"MEMBER","pull_request":{"url":"https://api.github.com/repos/woocommerce/wc-admin/pulls/237","html_url":"https://github.com/woocommerce/wc-admin/pull/237","diff_url":"https://github.com/woocommerce/wc-admin/pull/237.diff","patch_url":"https://github.com/woocommerce/wc-admin/pull/237.patch"},"body":"See #131 - this PR adds a previous value/label to each SummaryNumber, and updates the design to match the updated hifi designs. This also adds in the ability to link off to a report by adding a required `href` prop to the SummaryNumber.\r\n\r\nThe smaller screen dropdown functionality will come in a later PR, as that will be much more complex.\r\n\r\n**Demo on 1440px wide:**\r\n\r\n<img width=\"572\" alt=\"large-screen-one\" src=\"https://user-images.githubusercontent.com/541093/43209619-1972bac6-8ffb-11e8-9ba4-3f02d271ec13.png\">\r\n<img width=\"948\" alt=\"large-screen-two\" src=\"https://user-images.githubusercontent.com/541093/43209620-19837cda-8ffb-11e8-833f-a4cdd5ac5879.png\">\r\n\r\n**Demo on 1024px wide:**\r\n\r\n<img width=\"629\" alt=\"med-screen-two\" src=\"https://user-images.githubusercontent.com/541093/43209626-1d7f31bc-8ffb-11e8-9961-5865a2b4c12d.png\">\r\n\r\n**Demo in a card**\r\n\r\n<img width=\"844\" alt=\"screen shot 2018-07-25 at 11 09 03 am\" src=\"https://user-images.githubusercontent.com/541093/43209650-2da87684-8ffb-11e8-9818-273243ad68a2.png\">\r\n\r\n**Demo of interactive states**\r\n\r\n(top left is active/pressed, middle is selected, top right is hovered, bottom left is unselected + focused)\r\n<img width=\"791\" alt=\"screen shot 2018-07-25 at 1 30 50 pm\" src=\"https://user-images.githubusercontent.com/541093/43217250-1d832e34-900f-11e8-956d-647cd111f901.png\">\r\n\r\n(right is a selected + focused item)\r\n<img width=\"790\" alt=\"screen shot 2018-07-25 at 1 31 04 pm\" src=\"https://user-images.githubusercontent.com/541093/43217251-1d8ed928-900f-11e8-8a3b-9445db51efc2.png\">\r\n\r\nDon't be scared off by the `+676 lines`, 374 of that is creating an extensive demo page with lots of different number combos 😁\r\n\r\nTo test:\r\n\r\n- Look at the example report `/wp-admin/admin.php?page=wc-admin#/analytics/test`\r\n- Check that all SummaryNumbers appear as expected on screens larger than 783px (have not addressed the dropdowns yet)\r\n- Specific \"edge cases\":\r\n  - The 2nd item in most cases is \"selected\", the exception is in \"Ten or More Data Points\" where it's the 5th item to show selection on the second line.\r\n  - The 3rd item in most cases has a delta of 0\r\n  - In \"Four Data Points\", the 3rd item has no previous value or delta\r\n  - In \"Ten or More Data Points\", the 8th item has a ridiculously large previous value\r\n- Mouse or keyboard over them to check on the interactive states\r\n- Check the same for the SummaryNumber card on the dashboard\r\n- Try using VoiceOver to interact with the SummaryNumbers – I've called this a navigation menu, since they link off to specific reports/charts. You should be able to target and click on a summary number\r\n\r\n**Note** All the summary numbers go to a default link of `/analytics`, because a) I don't know what these should link to, and b) I really didn't want to update every single demo `SummaryNumber` 😆"},"comment":{"url":"https://api.github.com/repos/woocommerce/wc-admin/issues/comments/407860081","html_url":"https://github.com/woocommerce/wc-admin/pull/237#issuecomment-407860081","issue_url":"https://api.github.com/repos/woocommerce/wc-admin/issues/237","id":407860081,"node_id":"MDEyOklzc3VlQ29tbWVudDQwNzg2MDA4MQ==","user":{"login":"ryelle","id":541093,"node_id":"MDQ6VXNlcjU0MTA5Mw==","avatar_url":"https://avatars1.githubusercontent.com/u/541093?v=4","gravatar_id":"","url":"https://api.github.com/users/ryelle","html_url":"https://github.com/ryelle","followers_url":"https://api.github.com/users/ryelle/followers","following_url":"https://api.github.com/users/ryelle/following{/other_user}","gists_url":"https://api.github.com/users/ryelle/gists{/gist_id}","starred_url":"https://api.github.com/users/ryelle/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ryelle/subscriptions","organizations_url":"https://api.github.com/users/ryelle/orgs","repos_url":"https://api.github.com/users/ryelle/repos","events_url":"https://api.github.com/users/ryelle/events{/privacy}","received_events_url":"https://api.github.com/users/ryelle/received_events","type":"User","site_admin":false},"created_at":"2018-07-25T18:57:59Z","updated_at":"2018-07-25T18:57:59Z","author_association":"MEMBER","body":"> How does a number get 'selected' with the purple treatment?\r\n\r\nI assumed it was the \"currently displaying data point\", so it's based on a prop set by the parent component (the report). In the designs it's called \"active\" state, but I'm pretty sure it's meant to be this selected state, and \"pressed\" is the design for `:active`. I could also use a designer's 👍 / 👎 to confirm though 🙂 "}}
{"actor":{"display_login":"ryelle"}}