Merge pull request #159 from PublicHealthEngland/development

New features and essential updates

No conflict detected.

Author: xenatisch

README.md

@@ -1,4 +1,7 @@
-![Build test for pull and push requests](https://github.com/PublicHealthEngland/coronavirus-dashboard/workflows/Build%20test%20for%20pull%20and%20push%20requests/badge.svg)
+# Coronavirus (COVID-19) in the UK
+
+![Build test for pull and push requests](https://github.com/PublicHealthEngland/coronavirus-dashboard/workflows/Build%20test%20for%20pull%20and%20push%20requests/badge.svg) ![GitHub release (latest by date)](https://img.shields.io/github/v/release/publichealthengland/coronavirus-dashboard) ![GitHub package.json version (branch)](https://img.shields.io/github/package-json/v/publichealthengland/coronavirus-dashboard/development) ![GitHub commit activity](https://img.shields.io/github/commit-activity/y/publichealthengland/coronavirus-dashboard)
+
 
 
 This is the source code for the [Coronavirus Dashboard](https://coronavirus.data.gov.uk) service.
@@ -8,7 +11,9 @@ This is the source code for the [Coronavirus Dashboard](https://coronavirus.data
 We welcome contributions by everyone. Please read the [contributions guide](https://github.com/PublicHealthEngland/coronavirus-dashboard/blob/master/CONTRIBUTING.md) for additional information.
 
 ### How can I help?
-We have a [public project management board](https://github.com/orgs/PublicHealthEngland/projects/1) that shows outstanding issues to which everyone can contribute. Pick a ticket, assign it to yourself and move it to the **Doing** column, and you will be all set to start. Let us know if you need additional information. We are ready to help.
+We have a [public project management board](https://github.com/orgs/PublicHealthEngland/projects/1) that shows outstanding issues to which everyone can contribute. Pick a ticket, assign it to yourself and move it to the **Doing** column, and you will be all set to start. There is also the [outstanding issues](https://github.com/PublicHealthEngland/coronavirus-dashboard/issues) from which you can choose, but let us know that you are working on it so that multiple people don't end. up doing the same task.
+
+No contribution is too small. We welcome help from everyone. Get in touch if you need additional information. We are here to help. 
 
 ## Cloning the code for re-deployment
 
@@ -28,5 +33,13 @@ You should also use the brand logo and font of your organisation.
 
 Please consult the [GOV.UK Service Manual](https://www.gov.uk/service-manual/design/making-your-service-look-like-govuk#if-your-service-isnt-on-govuk) for additional information.
 
+### If you are re-deploying the website as a service
+
+Please only clone our `master` branch for redeployment. All other contents, data, and branches that are either outside of the `master` branch or not otherwise used as a part of it - i.e. the associating assets - are copyrighted materials and therefore excluded from the MIT license until they receieve the necessary approvals to be merged.
+
+Please note that other branches may contain experimental development contents and prototypes. We routinely create such materials so that they can be discussed, improved, and be put forward for approval purposes. 
+
+You are welcome to use the `development` branch as describeed in the [Contributors' Guide](https://github.com/PublicHealthEngland/coronavirus-dashboard/blob/master/CONTRIBUTING.md) to help us improve the service and make a contribution.
+
 ## Credits
 This service is developed and maintained by [NHSX](https://www.nhsx.nhs.uk/) and [Public Health England](https://www.gov.uk/government/organisations/public-health-england).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "covid-public",
-  "version": "1.5.5",
+  "version": "1.6.0",
   "private": true,
   "homepage": "https://coronavirus.data.gov.uk/",
   "dependencies": {

src/App.js

@@ -44,8 +44,8 @@ const FooterContents = () => {
 }; // FooterContents
 
 
-const F = props => <Footer
-    { ...props }
+const F = () => <Footer
+
     meta={ {
         children: <FooterContents/>,
         items: [
@@ -61,7 +61,7 @@ const F = props => <Footer
 const App = () => {
 
     return (
-        <>
+        <Fragment>
             <CookieBanner/>
             <Header
                 // containerClassName="govuk-header__container--full-width"
@@ -76,8 +76,8 @@ const App = () => {
             <Switch>
                 {/* These back-to-top links are the 'overlay' style that stays
                     on screen as we scroll. */}
-                <Route path="/about" exact render={()=>(<BackToTop mode="overlay"/>)} />
-                <Route path="/" exact render={()=>(<BackToTop mode="overlay"/>)} />
+                <Route path="/about" exact render={ () => <BackToTop mode={ "overlay" }/> } />
+                <Route path="/" exact render={ () => <BackToTop mode={ "overlay" }/> } />
             </Switch>
 
             <Switch>
@@ -94,18 +94,19 @@ const App = () => {
             <Switch>
                 {/* These back-to-top links are the 'inline' style that sits
                     statically between the end of the content and the footer. */}
-                <Route path="/about" exact render={()=>(<BackToTop mode="inline"/>)} />
-                <Route path="/" exact render={()=>(<BackToTop mode="inline"/>)} />
+                <Route path="/about" exact render={ props => <BackToTop {...props} mode="inline"/> } />
+                <Route path="/" exact render={ props => <BackToTop {...props} mode="inline"/>  } />
             </Switch>
 
             <Switch>
+                <Route path="/region" component={ F }/>
                 <Route path="/" exact component={ F }/>
                 <Route path="/about" exact component={ F }/>
                 <Route path="/accessibility" exact component={ F }/>
                 <Route path="/cookies" exact component={ F }/>
                 <Route path="/archive" exact component={ F }/>
             </Switch>
-        </>
+        </Fragment>
     );
 }
 

src/components/BackToTop/BackToTop.js

@@ -8,17 +8,39 @@ import * as Styles from './BackToTop.styles';
 
 import useBackToTopOverlayVisible from 'hooks/useBackToTopOverlayVisible';
 
+
+const backToTopClickHandler = event => {
+
+    event.preventDefault();
+
+    window.scrollTo(0, 0);
+
+}; // backToTopClickHandler
+
+
 const BackToTopLink: ComponentType<Props> = () => {
-  return (
-    <div class="govuk-width-container">
-      <a class="govuk-link govuk-link--no-visited-state" href="#top">
-        <svg role="presentation" focusable="false" class="back-to-top" xmlns="http://www.w3.org/2000/svg" width="13" height="17" viewBox="0 0 13 17">
-          <path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"></path>
-        </svg>Back to top
-      </a>
+
+    return <div className={ "govuk-width-container" }>
+        <Styles.Link className={ "govuk-link govuk-link--no-visited-state" }
+                     role={ "button" }
+                     href={ "" }
+                     onClick={ backToTopClickHandler }>
+            <svg role={ "presentation" }
+                 focusable={ "false" }
+                 className={ "back-to-top" }
+                 xmlns={ "http://www.w3.org/2000/svg" }
+                 width={ "13" }
+                 height={ "17" }
+                 viewBox={ "0 0 13 17" }>
+                <path fill={ "currentColor" }
+                      d={ "M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z" }/>
+            </svg>
+            Back to top
+        </Styles.Link>
     </div>
-  );
-};
+
+}; // BackToTopLink
+
 
 /**
  * A govuk style back-to-top link component.
@@ -31,20 +53,24 @@ const BackToTopLink: ComponentType<Props> = () => {
  * display this component.
  */
 const BackToTop: ComponentType<Props> = ({ mode }: Props) => {
-  const visible = useBackToTopOverlayVisible('footer');
-  if (mode === 'overlay'){
-      return (
-        <Styles.OverlayContainer  style={{opacity: visible ? 1 : 0}}>
-          <BackToTopLink />
+
+    const visible = useBackToTopOverlayVisible('footer');
+
+    if ( mode === 'overlay' ) {
+
+        return<Styles.OverlayContainer style={ { opacity: visible ? 1 : 0 } }>
+            <BackToTopLink/>
         </Styles.OverlayContainer>
-      );
-  } else {
-      return (
-        <Styles.InlineContainer style={{opacity: visible ? 0 : 1}}>
-          <BackToTopLink />
+
+    } else {
+
+        return <Styles.InlineContainer style={ { opacity: visible ? 0 : 1 } }>
+            <BackToTopLink/>
         </Styles.InlineContainer>
-      );  
+
     }
-};
+
+}; // BackToTop
+
 
 export default BackToTop;

src/components/BackToTop/BackToTop.styles.js

@@ -23,3 +23,11 @@ export const InlineContainer: ComponentType<*> = (() => {
   margin-bottom: 40px;
   `;
 })();
+
+
+export const Link: ComponentType<*> = (() => {
+  return styled.a`
+  background: rgba(255, 255, 255, .8); 
+  padding: .5em .5em 2em .5em; 
+  `;
+})();

src/components/BigNumber/BigNumber.js

@@ -1,20 +1,31 @@
 // @flow
 
-import React from 'react';
-import type { ComponentType } from 'react';
+import React, { Component } from 'react';
 import numeral from 'numeral';
 
 import type { Props } from './BigNumber.types.js';
 import * as Styles from './BigNumber.styles.js';
 
-const BigNumber: ComponentType<Props> = ({ caption, number, description, asterisk }: Props) => {
-  return (
-    <Styles.Container>
-      <Styles.Caption className="govuk-heading-m">{caption}</Styles.Caption>
-      <Styles.Number className="govuk-heading-l">{numeral(number).format('0,0')}{asterisk ? '*' : ''}</Styles.Number>
-      <Styles.Caption className="govuk-body govuk-!-font-size-16 govuk-!-margin-bottom-1">{description}</Styles.Caption>
-    </Styles.Container>
-  );
-};
 
-export default BigNumber;
+export const BigNumberContainer: Component<Props> = ({ children }) => {
+
+    return <Styles.MainContainer>
+        <Styles.Children>{ children }</Styles.Children>
+    </Styles.MainContainer>
+
+}; // SmallNumberContainer
+
+
+export const BigNumber: Component<Props> = ({ caption, number, description }: Props) => {
+    return (
+        <Styles.Container>
+            <Styles.Caption className="govuk-caption-l">{ caption }</Styles.Caption>
+            <Styles.Number
+                className="govuk-heading-l">{ numeral(number).format('0,0') }</Styles.Number>
+            <Styles.Description
+                className="govuk-body govuk-!-font-size-16 govuk-!-margin-bottom-1">
+                { description }
+            </Styles.Description>
+        </Styles.Container>
+    );
+};

src/components/BigNumber/BigNumber.styles.js

@@ -6,46 +6,85 @@ import type { ComponentType } from 'react';
 import addIECss from 'addIECss';
 
 export const Container: ComponentType<*> = (() => {
-  return styled.div`
+    return styled.div`
     display: flex;
     flex-direction: column;
     border-top: 1px solid #b1b4b6;
     padding-top: 20px;
-    grid-column: span 3;
-
-    ${addIECss(css`
-      width: 48%;
-    `)}
+    grid-column: span 1;
+    margin-bottom: 2rem;
+    
+    @media only screen and (max-width: 768px) {
+        &:nth-child(n+1) {
+            margin-right: 0; 
+        }
+    }
+    
+    ${ addIECss(css`
+      width: 100%;
+    `) }
   `;
 })();
 
+
 export const Caption: ComponentType<*> = (() => {
-  return styled.div`
-    height: 2.75rem;
-    font-size: 1.19rem;
+    return styled.h2`
     margin-bottom: 5px;
+    color: black;
+    font-size: 20px;
+    font-weight: bold;
   `;
 })();
 
+
+export const Description: ComponentType<*> = (() => {
+    return styled.p`
+    margin: 0;
+    color: #626a6e;
+  `;
+})();
+
+
 export const Number: ComponentType<*> = (() => {
-  return styled.div`
-    font-size: 2.25rem;
+    return styled.span`
     margin-bottom: 10px;
     color: #367E93;
   `;
 })();
 
-export const PercentageChange: ComponentType<*> = (() => {
-  return styled.span`
-    margin-bottom: 0;
-    font-size: 18px;
-  `;
-})();
 
-export const Triangle: ComponentType<*> = (() => {
-  return styled.div``;
+export const MainContainer: ComponentType<*> = (() => {
+
+    return styled.section`
+    grid-column: 1/-1;
+    
+    ${ addIECss(css`
+      width: 100%;
+    `) }
+    `
+
 })();
 
-export const Subtext: ComponentType<*> = (() => {
-  return styled.span``;
+
+export const Children: ComponentType<*> = (() => {
+  return styled.div`
+    grid-column: 1/-1;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    &>* {
+        width: 48%;
+    }
+  
+    @media only screen and (max-width: 768px) {
+        align-items: stretch;
+        flex-direction: column;
+        
+        &>* {
+            width: 100%;
+        }
+    }
+  `;
 })();

src/components/BigNumber/index.js

@@ -1 +1 @@
-export { default } from './BigNumber';
+export { BigNumberContainer, BigNumber } from './BigNumber';