[M1466] Offline Toggle Components (with test) + Refresh project (UI only)

package.json

@@ -12,10 +12,12 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "prop-types": "^15.7.2",
+    "raw.macro": "^0.4.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.2",
+    "react-toggle": "^4.1.1",
     "styled-components": "^5.2.1",
     "web-vitals": "^0.2.4",
     "workbox-background-sync": "^5.1.3",

src/components/Footer/Footer.js

@@ -1,18 +1,26 @@
 import React from 'react'
+import styled from 'styled-components'
 import { Link } from 'react-router-dom'
 import { RowSpaceBetween, RowRight, RowLeft } from '../generic/positioning'
+import OfflineToggle from '../OfflineToggle'
+import { IconRefresh } from '../icons'
 
 /**
  * Describe your component
  */
+const IconStyleWrapper = styled.div`
+  color: grey;
+`
 
 const Footer = () => {
   return (
     <RowSpaceBetween>
       <RowLeft>
         <div>© 2021 Mermaid Version v1.0.0</div>
-        <div>Offline Toggle</div>
-        <div>Refresh</div>
+        <OfflineToggle />
+        <IconStyleWrapper>
+          <IconRefresh />
+        </IconStyleWrapper>
       </RowLeft>
       <RowRight as="nav">
         <Link to="/#">Help</Link>

src/components/OfflineToggle/OfflineToggle.js

@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types'
+import raw from 'raw.macro'
+import React from 'react'
+import styled from 'styled-components/macro'
+import Toggle from 'react-toggle'
+
+const ToggleCss = raw('react-toggle/style.css')
+
+const ToggleWrapper = styled.div`
+  ${ToggleCss}
+  & .react-toggle-track {
+    height: 16px;
+    width: 32px;
+  }
+  .react-toggle-thumb {
+    top: 0px;
+    left: 0px;
+    height: 16px;
+    width: 16px;
+  }
+  .react-toggle--checked .react-toggle-track {
+    background-color: red;
+  }
+  .react-toggle--checked .react-toggle-thumb {
+    left: 16px;
+    border-color: red;
+  }
+  .react-toggle--checked:hover:not(.react-toggle--disabled)
+    .react-toggle-track {
+    background-color: darkred;
+  }
+`
+
+const OfflineToggle = ({ onChange }) => {
+  const handleChange = (event) => {
+    onChange(event.target.checked)
+  }
+
+  return (
+    <ToggleWrapper>
+      <Toggle
+        id="offline-toggle-switch"
+        aria-label="offline-toggle-switch"
+        onChange={handleChange}
+        icons={false}
+      />
+    </ToggleWrapper>
+  )
+}
+
+OfflineToggle.propTypes = { onChange: PropTypes.func }
+OfflineToggle.defaultProps = { onChange: () => {} }
+
+export default OfflineToggle

src/components/OfflineToggle/OfflineToggle.stories.js

@@ -0,0 +1,10 @@
+import { action } from '@storybook/addon-actions'
+import React from 'react'
+
+import OfflineToggle from '.'
+
+export default {
+  title: 'OfflineToggle',
+  component: OfflineToggle,
+}
+export const basic = () => <OfflineToggle onChange={action('toggle changed')} />

src/components/OfflineToggle/index.js

@@ -0,0 +1,3 @@
+import OfflineToggle from './OfflineToggle'
+
+export default OfflineToggle

src/components/icons.js

@@ -13,6 +13,7 @@ import {
   faSortAmountDownAlt,
   faSortAmountUpAlt,
   faUsers,
+  faSyncAlt,
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
@@ -34,3 +35,4 @@ export const IconSortDown = () => <FontAwesomeIcon icon={faSortAmountDownAlt} />
 export const IconSortUp = () => <FontAwesomeIcon icon={faSortAmountUpAlt} />
 export const IconUp = () => <FontAwesomeIcon icon={faCaretUp} />
 export const IconUsers = () => <FontAwesomeIcon icon={faUsers} />
+export const IconRefresh = () => <FontAwesomeIcon icon={faSyncAlt} />

yarn.lock

@@ -12243,6 +12243,13 @@ raw-loader@^4.0.1:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
+raw.macro@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/raw.macro/-/raw.macro-0.4.2.tgz#1954f9a36465d9400a76b8b68438e4ec8582acd6"
+  integrity sha512-Z+zKtCweyJ3lGYdUNq/BQwfzqQE2wrXjz0RNEes5nDniPpjvBw64sKYFXStJSfmZUmiBxv4DsN1lto982UAhFQ==
+  dependencies:
+    babel-plugin-macros "^2.8.0"
+
 react-app-polyfill@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-2.0.0.tgz#a0bea50f078b8a082970a9d853dc34b6dcc6a3cf"
@@ -12582,6 +12589,13 @@ react-textarea-autosize@^8.1.1:
     use-composed-ref "^1.0.0"
     use-latest "^1.0.0"
 
+react-toggle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/react-toggle/-/react-toggle-4.1.1.tgz#2317f67bf918ea3508a96b09dd383efd9da572af"
+  integrity sha512-+wXlMcSpg8SmnIXauMaZiKpR+r2wp2gMUteroejp2UTSqGTVvZLN+m9EhMzFARBKEw7KpQOwzCyfzeHeAndQGw==
+  dependencies:
+    classnames "^2.2.5"
+
 react@^17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"