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

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

@@ -6,9 +6,9 @@ import {
   faStopCircle,
   faTv,
   faMicrophone,
-  faCameraRetro
+  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`
@@ -31,31 +31,31 @@ const InitialState = {
   srcMicButton: { isDisabled: false },
   srcCamButton: { isDisabled: false },
   srcScreenButton: { isDisabled: false },
-  downloadButton: { isDisabled: true }
+  downloadButton: { isDisabled: true },
 };
-const RecorderControls = props => {
+const RecorderControls = (props) => {
   const {
     onStartRecorder,
     onStopRecorder,
     downloadUrl,
     isDownloadReady,
     onToggleMic,
     onToggleScreen,
-    onToggleCam
+    onToggleCam,
   } = props;
 
   const [state, dispatch] = useReducer(recorderControlsReducer, InitialState);
 
   const handleClick_RecordOn = () => {
     dispatch({
-      type: "RECORD_ON"
+      type: "RECORD_ON",
     });
     onStartRecorder();
   };
 
   const handleClick_RecordOff = () => {
     dispatch({
-      type: "RECORD_OFF"
+      type: "RECORD_OFF",
     });
     onStopRecorder();
   };
@@ -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";