{"action":"created","comment":{"url":"https://api.github.com/repos/penx/govuk-react/pulls/comments/177851216","pull_request_review_id":107802083,"id":177851216,"diff_hunk":"@@ -0,0 +1,95 @@\n+import React from 'react';\n+import ReactDOM from 'react-dom';\n+import { storiesOf } from '@storybook/react';\n+import { withKnobs, text, number, boolean } from '@storybook/addon-knobs/react';\n+import Header from '@govuk-react/header';\n+import InputField from '@govuk-react/input-field';\n+import Button from '@govuk-react/button';\n+import LabelText from '@govuk-react/label-text';\n+import Radio from '@govuk-react/radio';\n+import PhaseBanner from '@govuk-react/phase-banner';\n+import { asAnchor } from '@govuk-react/hoc';\n+\n+import LoadingBox from '.';\n+\n+const stories = storiesOf('LoadingBox', module);\n+const AnchorLink = asAnchor('a');\n+const spacer = <p style={{ marginTop: 0 }}>&nbsp;</p>;\n+stories.addDecorator(withKnobs);\n+\n+stories.add('LoadingBox default', () => (\n+  <LoadingBox\n+    loading={boolean('loading', false)}\n+    backgroundColor={text('backgroundColor', '#fff')}\n+    timeIn={number('timeIn', 300)}\n+    timeOut={number('timeOut', 800)}\n+    backgroundColorOpacity={number('backgroundColorOpacity', 0.5)}\n+    spinnerColor={text('spinnerColor', '#000')}\n+  >\n+    <div style={{ padding: '0 12px' }}>\n+      <PhaseBanner level=\"alpha\">\n+      This part of GOV.UK is being rebuilt &#8211;{' '}\n+        <AnchorLink href=\"https://example.com\">find out what that means</AnchorLink>\n+      </PhaseBanner>\n+      {spacer}\n+      <Header level={2}>Toggle loading settings under `knobs`</Header>\n+      <InputField\n+        name=\"group1\"\n+      >\n+      Email address\n+      </InputField>\n+      {spacer}\n+      <Button start>Continue</Button>\n+    </div>\n+  </LoadingBox>\n+));\n+\n+stories.add('LoadingBox (long)', () => (\n+  <LoadingBox\n+    loading={boolean('loading', false)}\n+    backgroundColor={text('backgroundColor', '#fff')}\n+    timeIn={number('timeIn', 300)}","path":"components/loading-box/src/stories.js","position":51,"original_position":51,"commit_id":"8514261d6a3023685fbc6eaa629fd72497180d2a","original_commit_id":"8514261d6a3023685fbc6eaa629fd72497180d2a","user":{"login":"penx","id":1027024,"avatar_url":"https://avatars3.githubusercontent.com/u/1027024?v=4","gravatar_id":"","url":"https://api.github.com/users/penx","html_url":"https://github.com/penx","followers_url":"https://api.github.com/users/penx/followers","following_url":"https://api.github.com/users/penx/following{/other_user}","gists_url":"https://api.github.com/users/penx/gists{/gist_id}","starred_url":"https://api.github.com/users/penx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/penx/subscriptions","organizations_url":"https://api.github.com/users/penx/orgs","repos_url":"https://api.github.com/users/penx/repos","events_url":"https://api.github.com/users/penx/events{/privacy}","received_events_url":"https://api.github.com/users/penx/received_events","type":"User","site_admin":false},"body":"if this is:\r\n\r\n```\r\n    timeIn={number('timeIn', undefined)}\r\n    timeOut={number('timeOut', undefined)}\r\n```\r\n\r\nWill it default to the defaultProps for these numbers? If so can you do that? If not, can you set the defaults to be the same as the default props? See previous comments on default timeIn being longer than default timeOut","created_at":"2018-03-28T18:41:26Z","updated_at":"2018-03-28T18:41:26Z","html_url":"https://github.com/penx/govuk-react/pull/179#discussion_r177851216","pull_request_url":"https://api.github.com/repos/penx/govuk-react/pulls/179","author_association":"OWNER","_links":{"self":{"href":"https://api.github.com/repos/penx/govuk-react/pulls/comments/177851216"},"html":{"href":"https://github.com/penx/govuk-react/pull/179#discussion_r177851216"},"pull_request":{"href":"https://api.github.com/repos/penx/govuk-react/pulls/179"}}},"pull_request":{"url":"https://api.github.com/repos/penx/govuk-react/pulls/179","id":178010039,"html_url":"https://github.com/penx/govuk-react/pull/179","diff_url":"https://github.com/penx/govuk-react/pull/179.diff","patch_url":"https://github.com/penx/govuk-react/pull/179.patch","issue_url":"https://api.github.com/repos/penx/govuk-react/issues/179","number":179,"state":"open","locked":false,"title":"Loading box component","user":{"login":"marksy","id":1695055,"avatar_url":"https://avatars0.githubusercontent.com/u/1695055?v=4","gravatar_id":"","url":"https://api.github.com/users/marksy","html_url":"https://github.com/marksy","followers_url":"https://api.github.com/users/marksy/followers","following_url":"https://api.github.com/users/marksy/following{/other_user}","gists_url":"https://api.github.com/users/marksy/gists{/gist_id}","starred_url":"https://api.github.com/users/marksy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/marksy/subscriptions","organizations_url":"https://api.github.com/users/marksy/orgs","repos_url":"https://api.github.com/users/marksy/repos","events_url":"https://api.github.com/users/marksy/events{/privacy}","received_events_url":"https://api.github.com/users/marksy/received_events","type":"User","site_admin":false},"body":"- new loading-box\r\n- unit tests\r\n\r\n**Fixed sized loaders**\r\nCreate a component called Spinner that could be used as follows:\r\n```\r\n<Placeholder\r\nfallback={<Spinner size=\"large\" />}\r\n>\r\n<SomeContent />\r\n</Placeholder>\r\n```\r\n\r\nThis is likely the existing just the loading icon but at 3 preset sizes: small, medium, large. The sizes of small, medium and large loaders need to be decided by the team. A small loader should be appropriately sized to fit in a button. A large loader could be used to show an entire page is loading. A medium loader would be used e.g. to show a 500px x 500px area of a page is loading.\r\n\r\n**LoadingBox**\r\nCreate a LoadingBox component that can be used like this\r\n```\r\n<LoadingBox loading={true} color=\"rgba(4,3,2,1)\" timeIn={1000} timeOut={1000}>\r\n  <AnyReactNodes />\r\n  <AnyReactNodes />\r\n</LoadingBox >\r\n```\r\n\r\nWhen the component mounts and loading is true:\r\n* children are rendered\r\n* all children should be covered by a 50% grey at 50% opacity (colour is configurable prop)\r\n* anything positioned outside this area is hidden (overflow hidden)\r\n* a large loading spinner is positioned with its centre point in the vertical and horizontal centre of the container (component to use is a configurable prop)\r\n* if the height of the container is greater than half height of the viewport then the centre of the loader icon is positioned at a quarter of the viewport height from the top of the container (max-viewport-percentage is a configurable prop defaults to 0.25)\r\n\r\nWhen the component mounts and loading is false (default)\r\n* the ValidatedContent does nothing, just shows children\r\n\r\nWhen component has previously mounted and loading switches from true to false\r\nthe loading icon and grey area fade out over 0.3 seconds (time-out is configurable prop)\r\n`overflow: hidden` is disabled after animation is completed\r\n\r\nWhen component has previously mounted and loading switches from false to true\r\n* the loading icon and grey area fade in over 0.3 seconds (time-in is configurable prop)\r\n* overflow hidden is set as soon as animation starts\r\n\r\n","created_at":"2018-03-28T11:36:16Z","updated_at":"2018-03-28T18:41:26Z","closed_at":null,"merged_at":null,"merge_commit_sha":"8beccd4e9cddd57923ac1443e6f38054be62a14b","assignee":null,"assignees":[],"requested_reviewers":[{"login":"stevesims","id":5545,"avatar_url":"https://avatars0.githubusercontent.com/u/5545?v=4","gravatar_id":"","url":"https://api.github.com/users/stevesims","html_url":"https://github.com/stevesims","followers_url":"https://api.github.com/users/stevesims/followers","following_url":"https://api.github.com/users/stevesims/following{/other_user}","gists_url":"https://api.github.com/users/stevesims/gists{/gist_id}","starred_url":"https://api.github.com/users/stevesims/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/stevesims/subscriptions","organizations_url":"https://api.github.com/users/stevesims/orgs","repos_url":"https://api.github.com/users/stevesims/repos","events_url":"https://api.github.com/users/stevesims/events{/privacy}","received_events_url":"https://api.github.com/users/stevesims/received_events","type":"User","site_admin":false}],"requested_teams":[],"labels":[],"milestone":null,"commits_url":"https://api.github.com/repos/penx/govuk-react/pulls/179/commits","review_comments_url":"https://api.github.com/repos/penx/govuk-react/pulls/179/comments","review_comment_url":"https://api.github.com/repos/penx/govuk-react/pulls/comments{/number}","comments_url":"https://api.github.com/repos/penx/govuk-react/issues/179/comments","statuses_url":"https://api.github.com/repos/penx/govuk-react/statuses/8514261d6a3023685fbc6eaa629fd72497180d2a","head":{"label":"penx:feature/loadingBox","ref":"feature/loadingBox","sha":"8514261d6a3023685fbc6eaa629fd72497180d2a","user":{"login":"penx","id":1027024,"avatar_url":"https://avatars3.githubusercontent.com/u/1027024?v=4","gravatar_id":"","url":"https://api.github.com/users/penx","html_url":"https://github.com/penx","followers_url":"https://api.github.com/users/penx/followers","following_url":"https://api.github.com/users/penx/following{/other_user}","gists_url":"https://api.github.com/users/penx/gists{/gist_id}","starred_url":"https://api.github.com/users/penx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/penx/subscriptions","organizations_url":"https://api.github.com/users/penx/orgs","repos_url":"https://api.github.com/users/penx/repos","events_url":"https://api.github.com/users/penx/events{/privacy}","received_events_url":"https://api.github.com/users/penx/received_events","type":"User","site_admin":false},"repo":{"id":108299752,"name":"govuk-react","full_name":"penx/govuk-react","owner":{"login":"penx","id":1027024,"avatar_url":"https://avatars3.githubusercontent.com/u/1027024?v=4","gravatar_id":"","url":"https://api.github.com/users/penx","html_url":"https://github.com/penx","followers_url":"https://api.github.com/users/penx/followers","following_url":"https://api.github.com/users/penx/following{/other_user}","gists_url":"https://api.github.com/users/penx/gists{/gist_id}","starred_url":"https://api.github.com/users/penx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/penx/subscriptions","organizations_url":"https://api.github.com/users/penx/orgs","repos_url":"https://api.github.com/users/penx/repos","events_url":"https://api.github.com/users/penx/events{/privacy}","received_events_url":"https://api.github.com/users/penx/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/penx/govuk-react","description":"A port of the govuk-frontend components for React using Glamorous.","fork":false,"url":"https://api.github.com/repos/penx/govuk-react","forks_url":"https://api.github.com/repos/penx/govuk-react/forks","keys_url":"https://api.github.com/repos/penx/govuk-react/keys{/key_id}","collaborators_url":"https://api.github.com/repos/penx/govuk-react/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/penx/govuk-react/teams","hooks_url":"https://api.github.com/repos/penx/govuk-react/hooks","issue_events_url":"https://api.github.com/repos/penx/govuk-react/issues/events{/number}","events_url":"https://api.github.com/repos/penx/govuk-react/events","assignees_url":"https://api.github.com/repos/penx/govuk-react/assignees{/user}","branches_url":"https://api.github.com/repos/penx/govuk-react/branches{/branch}","tags_url":"https://api.github.com/repos/penx/govuk-react/tags","blobs_url":"https://api.github.com/repos/penx/govuk-react/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/penx/govuk-react/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/penx/govuk-react/git/refs{/sha}","trees_url":"https://api.github.com/repos/penx/govuk-react/git/trees{/sha}","statuses_url":"https://api.github.com/repos/penx/govuk-react/statuses/{sha}","languages_url":"https://api.github.com/repos/penx/govuk-react/languages","stargazers_url":"https://api.github.com/repos/penx/govuk-react/stargazers","contributors_url":"https://api.github.com/repos/penx/govuk-react/contributors","subscribers_url":"https://api.github.com/repos/penx/govuk-react/subscribers","subscription_url":"https://api.github.com/repos/penx/govuk-react/subscription","commits_url":"https://api.github.com/repos/penx/govuk-react/commits{/sha}","git_commits_url":"https://api.github.com/repos/penx/govuk-react/git/commits{/sha}","comments_url":"https://api.github.com/repos/penx/govuk-react/comments{/number}","issue_comment_url":"https://api.github.com/repos/penx/govuk-react/issues/comments{/number}","contents_url":"https://api.github.com/repos/penx/govuk-react/contents/{+path}","compare_url":"https://api.github.com/repos/penx/govuk-react/compare/{base}...{head}","merges_url":"https://api.github.com/repos/penx/govuk-react/merges","archive_url":"https://api.github.com/repos/penx/govuk-react/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/penx/govuk-react/downloads","issues_url":"https://api.github.com/repos/penx/govuk-react/issues{/number}","pulls_url":"https://api.github.com/repos/penx/govuk-react/pulls{/number}","milestones_url":"https://api.github.com/repos/penx/govuk-react/milestones{/number}","notifications_url":"https://api.github.com/repos/penx/govuk-react/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/penx/govuk-react/labels{/name}","releases_url":"https://api.github.com/repos/penx/govuk-react/releases{/id}","deployments_url":"https://api.github.com/repos/penx/govuk-react/deployments","created_at":"2017-10-25T17:01:59Z","updated_at":"2018-03-27T11:59:18Z","pushed_at":"2018-03-28T15:10:13Z","git_url":"git://github.com/penx/govuk-react.git","ssh_url":"git@github.com:penx/govuk-react.git","clone_url":"https://github.com/penx/govuk-react.git","svn_url":"https://github.com/penx/govuk-react","homepage":"http://penx.github.io/govuk-react/","size":7445,"stargazers_count":8,"watchers_count":8,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":2,"mirror_url":null,"archived":false,"open_issues_count":28,"license":{"key":"mit","name":"MIT License","spdx_id":"MIT","url":"https://api.github.com/licenses/mit"},"forks":2,"open_issues":28,"watchers":8,"default_branch":"master"}},"base":{"label":"penx:master","ref":"master","sha":"94cdf3fd905ec8f291c33f4875e23596b34d6096","user":{"login":"penx","id":1027024,"avatar_url":"https://avatars3.githubusercontent.com/u/1027024?v=4","gravatar_id":"","url":"https://api.github.com/users/penx","html_url":"https://github.com/penx","followers_url":"https://api.github.com/users/penx/followers","following_url":"https://api.github.com/users/penx/following{/other_user}","gists_url":"https://api.github.com/users/penx/gists{/gist_id}","starred_url":"https://api.github.com/users/penx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/penx/subscriptions","organizations_url":"https://api.github.com/users/penx/orgs","repos_url":"https://api.github.com/users/penx/repos","events_url":"https://api.github.com/users/penx/events{/privacy}","received_events_url":"https://api.github.com/users/penx/received_events","type":"User","site_admin":false},"repo":{"id":108299752,"name":"govuk-react","full_name":"penx/govuk-react","owner":{"login":"penx","id":1027024,"avatar_url":"https://avatars3.githubusercontent.com/u/1027024?v=4","gravatar_id":"","url":"https://api.github.com/users/penx","html_url":"https://github.com/penx","followers_url":"https://api.github.com/users/penx/followers","following_url":"https://api.github.com/users/penx/following{/other_user}","gists_url":"https://api.github.com/users/penx/gists{/gist_id}","starred_url":"https://api.github.com/users/penx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/penx/subscriptions","organizations_url":"https://api.github.com/users/penx/orgs","repos_url":"https://api.github.com/users/penx/repos","events_url":"https://api.github.com/users/penx/events{/privacy}","received_events_url":"https://api.github.com/users/penx/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/penx/govuk-react","description":"A port of the govuk-frontend components for React using Glamorous.","fork":false,"url":"https://api.github.com/repos/penx/govuk-react","forks_url":"https://api.github.com/repos/penx/govuk-react/forks","keys_url":"https://api.github.com/repos/penx/govuk-react/keys{/key_id}","collaborators_url":"https://api.github.com/repos/penx/govuk-react/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/penx/govuk-react/teams","hooks_url":"https://api.github.com/repos/penx/govuk-react/hooks","issue_events_url":"https://api.github.com/repos/penx/govuk-react/issues/events{/number}","events_url":"https://api.github.com/repos/penx/govuk-react/events","assignees_url":"https://api.github.com/repos/penx/govuk-react/assignees{/user}","branches_url":"https://api.github.com/repos/penx/govuk-react/branches{/branch}","tags_url":"https://api.github.com/repos/penx/govuk-react/tags","blobs_url":"https://api.github.com/repos/penx/govuk-react/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/penx/govuk-react/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/penx/govuk-react/git/refs{/sha}","trees_url":"https://api.github.com/repos/penx/govuk-react/git/trees{/sha}","statuses_url":"https://api.github.com/repos/penx/govuk-react/statuses/{sha}","languages_url":"https://api.github.com/repos/penx/govuk-react/languages","stargazers_url":"https://api.github.com/repos/penx/govuk-react/stargazers","contributors_url":"https://api.github.com/repos/penx/govuk-react/contributors","subscribers_url":"https://api.github.com/repos/penx/govuk-react/subscribers","subscription_url":"https://api.github.com/repos/penx/govuk-react/subscription","commits_url":"https://api.github.com/repos/penx/govuk-react/commits{/sha}","git_commits_url":"https://api.github.com/repos/penx/govuk-react/git/commits{/sha}","comments_url":"https://api.github.com/repos/penx/govuk-react/comments{/number}","issue_comment_url":"https://api.github.com/repos/penx/govuk-react/issues/comments{/number}","contents_url":"https://api.github.com/repos/penx/govuk-react/contents/{+path}","compare_url":"https://api.github.com/repos/penx/govuk-react/compare/{base}...{head}","merges_url":"https://api.github.com/repos/penx/govuk-react/merges","archive_url":"https://api.github.com/repos/penx/govuk-react/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/penx/govuk-react/downloads","issues_url":"https://api.github.com/repos/penx/govuk-react/issues{/number}","pulls_url":"https://api.github.com/repos/penx/govuk-react/pulls{/number}","milestones_url":"https://api.github.com/repos/penx/govuk-react/milestones{/number}","notifications_url":"https://api.github.com/repos/penx/govuk-react/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/penx/govuk-react/labels{/name}","releases_url":"https://api.github.com/repos/penx/govuk-react/releases{/id}","deployments_url":"https://api.github.com/repos/penx/govuk-react/deployments","created_at":"2017-10-25T17:01:59Z","updated_at":"2018-03-27T11:59:18Z","pushed_at":"2018-03-28T15:10:13Z","git_url":"git://github.com/penx/govuk-react.git","ssh_url":"git@github.com:penx/govuk-react.git","clone_url":"https://github.com/penx/govuk-react.git","svn_url":"https://github.com/penx/govuk-react","homepage":"http://penx.github.io/govuk-react/","size":7445,"stargazers_count":8,"watchers_count":8,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":2,"mirror_url":null,"archived":false,"open_issues_count":28,"license":{"key":"mit","name":"MIT License","spdx_id":"MIT","url":"https://api.github.com/licenses/mit"},"forks":2,"open_issues":28,"watchers":8,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/penx/govuk-react/pulls/179"},"html":{"href":"https://github.com/penx/govuk-react/pull/179"},"issue":{"href":"https://api.github.com/repos/penx/govuk-react/issues/179"},"comments":{"href":"https://api.github.com/repos/penx/govuk-react/issues/179/comments"},"review_comments":{"href":"https://api.github.com/repos/penx/govuk-react/pulls/179/comments"},"review_comment":{"href":"https://api.github.com/repos/penx/govuk-react/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/penx/govuk-react/pulls/179/commits"},"statuses":{"href":"https://api.github.com/repos/penx/govuk-react/statuses/8514261d6a3023685fbc6eaa629fd72497180d2a"}},"author_association":"COLLABORATOR"}}
{"actor":{"display_login":"penx"}}