Upstream merge for WIP issue branch (#17)

* Documentation Fix: Create the bare minimums (#12)

* Created the readme file

* Update issue templates

Added the default GH templates for bug reports and features

* Added PR templates

* Workaround for GH problem: wont pick multiple PR templates

* Removing workaround to test alternate

GH does not seem to pickup multiple PR templates. This file was added temporarily to validate this issue (indeed it doesn't and by default only picks up `.github/pull_request_template.md`). Looks like the only way to get multiple templates working is by using URL query parameters as discussed (here)[https://help.github.com/en/github/managing-your-work-on-github/about-automation-for-issues-and-pull-requests-with-query-parameters]

* Updated PR templates to remove front matter headings

* Publishing readme content

* Fixed minor markdown defects

* Minor content edits

* Fixes done (#14)

* BugFix: Issue#9 download button not working (#16)

* Upstream merge for WIP bug branch (#15)

* Documentation Fix: Create the bare minimums (#12)

* Created the readme file

* Update issue templates

Added the default GH templates for bug reports and features

* Added PR templates

* Workaround for GH problem: wont pick multiple PR templates

* Removing workaround to test alternate

GH does not seem to pickup multiple PR templates. This file was added temporarily to validate this issue (indeed it doesn't and by default only picks up `.github/pull_request_template.md`). Looks like the only way to get multiple templates working is by using URL query parameters as discussed (here)[https://help.github.com/en/github/managing-your-work-on-github/about-automation-for-issues-and-pull-requests-with-query-parameters]

* Updated PR templates to remove front matter headings

* Publishing readme content

* Fixed minor markdown defects

* Minor content edits

* Fixes done (#14)

* Added new Link comp and associated changes

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/PULL_REQUEST_TEMPLATE/bugfix_changes.md

@@ -0,0 +1,26 @@
+Fixes #.
+
+**Describe the changes proposed**
+Changes proposed in this bugfix PR
+- 
+- 
+- 
+
+
+**User Guide**
+Steps for users to use any new behavior, if applicable:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen. Leave empty if no behviour changes due to this fix.
+
+**Screenshots**
+Add screenshots to evidence testing of the this change.
+
+**Additional context**
+Add any other context about the change here.
+
+@soumik-mukherjee

.github/PULL_REQUEST_TEMPLATE/feature_changes.md

@@ -0,0 +1,26 @@
+Resolves #.
+
+**Describe the changes proposed**
+Changes proposed in this feature PR
+- 
+- 
+- 
+
+
+**User Guide**
+Steps for users to use the new behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to evidence testing of the behaviour this change.
+
+**Additional context**
+Add any other context about the change here.
+
+@soumik-mukherjee

.github/PULL_REQUEST_TEMPLATE/upstream_merge.md

@@ -0,0 +1,7 @@
+**List of expected changes**
+Changes proposed in this feature PR
+- Closed #.
+- Closed #.
+- Closed #.
+
+@soumik-mukherjee

README.md

@@ -0,0 +1,48 @@
+# capturio (pronounced cap-too-ree-ooh)
+
+A PWA for video production - screencasts, voice overs and camera integration. Zero install app (i.e. no admin rights) with a clean UI. No bloats, malwares or ads!
+
+## Install Guide
+
+Just open the app in a browser. PWAs can be installed on the desktop as well, see [this](https://support.google.com/chrome/answer/9658361) support article by Google, on how.
+
+More release channels targetted for future, e.g. windows store etc.
+
+## User's Guide
+
+Simply set the sources using the buttons at the top & center, `Mic`, `Screen` and `Cam` (camera integration coming soon!). Use the `Record` and `Stop` buttons (on the left) to control recording. Once you are done the `Download` button on the right should able to give you the recording as a `webm` file.
+
+## Contributors Guide
+
+### Setting up a dev environment
+
+1. Before anything else, you would need:
+   - Any editor, I use `VS Code`. Highly recommend getting and using the following extensions:
+     - The [Prettier Code Formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+   - `node` and `yarn`
+2. Clone this repo with `git` and `checkout` to the right `branch`
+3. Run the command `yarn` from project root directory to install all dependencies.
+4. You are now ready to run the different projects inside the repo.
+
+### Running projects in this repo
+
+First, please familiarise yourself with the repo structure. This is a `lerna` monorepo, with two projects within:
+
+- A `gatsby+react` web app, located in `packages/webapp`
+- A `react+storybook` UI component library, located in `packages/ui-components`
+
+The `component library` comes bundled with [storybook](https://storybook.js.org/). You can run the storybook server and check live edits to any components that you do.
+
+To run the `storybook` server, execute from the repo root dir
+
+> yarn run:ui-stories
+
+To run the `gatsby` app, execute from the repo root dir
+
+> yarn develop:webapp
+
+### Submitting PRs
+
+Every PR should refer a template (one of 3 in this repo). See this [comment](https://github.com/soumik-mukherjee/capturio/pull/12#issue-403828412) for details on how and which template to use
+
+Happy coding! :+1:

packages/ui-components/src/Buttons/FaIconLink.jsx

@@ -0,0 +1,66 @@
+import React from "react";
+import styled from "styled-components";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const Container = styled.a`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  padding: 0.4rem;
+  margin: 0.4rem;
+  border-radius: 5px;
+  text-decoration: none;
+  border: 2px solid palevioletred;
+  background: white;
+  color: palevioletred;
+  &:hover {
+      background: palevioletred;
+      border: 2px solid palevioletred;
+      color: white;
+  }
+`;
+
+const DisabledContainer = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  padding: 0.4rem;
+  margin: 0.4rem;
+  border-radius: 5px;
+  text-decoration: none;
+  border: 2px solid gray;
+  background: lightgray;
+  color: gray;
+`;
+
+const Label = styled.span`
+  margin: 0 0.4rem 0 0.8rem;
+  line-height: 1.2;
+  &::before {
+    margin: 0 10px;
+  }
+`;
+
+const FaIconLink = props => {
+  const { faIcon, label, isDisabled, href, download } = props;
+
+  if(isDisabled){
+    return (
+      <DisabledContainer>
+        <FontAwesomeIcon icon={faIcon} />
+        <Label>{label}</Label>
+      </DisabledContainer>
+    );
+  }
+  else{
+    return (
+      <Container href={href} download={download}>
+        <FontAwesomeIcon icon={faIcon} />
+        <Label>{label}</Label>
+      </Container>
+    );
+  }
+
+};
+
+export default FaIconLink;

packages/ui-components/src/Recorder/RecorderControls.jsx

@@ -8,7 +8,7 @@ import {
   faMicrophone,
   faCameraRetro,
 } from "@fortawesome/free-solid-svg-icons";
-import { FaIconButton, ToggleButton } from "@project/ui-components";
+import { FaIconButton, ToggleButton, FaIconLink } from "@project/ui-components";
 import { recorderControlsReducer } from "./reducers";
 
 const Container = styled.span`
@@ -94,14 +94,13 @@ const RecorderControls = (props) => {
         isDisabled={state.srcMicButton.isDisabled}
       />
       <ElasticSpacer />
-      <FaIconButton
+      <FaIconLink
         id="download"
-        as="a"
-        href={downloadUrl}
-        download="test.webm"
         faIcon={faDownload}
         label="Download"
         isDisabled={state.downloadButton.isDisabled ^ isDownloadReady}
+        href={downloadUrl}
+        download="recording.webm"
       />
     </Container>
   );

packages/ui-components/src/Stories/button.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { FaIconButton, ToggleButton } from "@project/ui-components";
+import { FaIconButton, ToggleButton, FaIconLink } from "@project/ui-components";
 import {
   faDownload,
   faCircle,
@@ -62,3 +62,15 @@ export const toggleButtonWithIcon = () => (
     />
   </SimpleIconButtonContainer>
 );
+
+export const LinkWithIcon = () => (
+  <SimpleIconButtonContainer>
+    <FaIconLink
+      faIcon={faDownload}
+      label="Download "
+      isDisabled={false}
+      href="https://www.thehindu.com/society/yhmwnu/article26855911.ece/ALTERNATES/FREE_660/hym16fido-dido"
+      download="fido.jpg"
+    />
+  </SimpleIconButtonContainer>
+);

packages/ui-components/src/index.js

@@ -1,5 +1,6 @@
-export { default as CustomConsole } from './CustomConsole';
-export { default as Recorder } from './Recorder';
-export { default as FaIconButton } from './Buttons/FaIconButton';
-export { default as ToggleButton } from './Buttons/ToggleButton';
-export { default as RecorderControls } from './Recorder/RecorderControls';
+export { default as CustomConsole } from "./CustomConsole";
+export { default as Recorder } from "./Recorder";
+export { default as FaIconButton } from "./Buttons/FaIconButton";
+export { default as ToggleButton } from "./Buttons/ToggleButton";
+export { default as RecorderControls } from "./Recorder/RecorderControls";
+export { default as FaIconLink } from "./Buttons/FaIconLink";