diff --git a/opentech/static_src/src/app/src/components/SubmissionLink/index.js b/opentech/static_src/src/app/src/components/SubmissionLink/index.js new file mode 100644 index 0000000000000000000000000000000000000000..ca098fe2935423f1647fb9806a0a3501edda9376 --- /dev/null +++ b/opentech/static_src/src/app/src/components/SubmissionLink/index.js @@ -0,0 +1,23 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import './styles.scss'; + +const SubmissionLink = ({ submissionID }) => { + const submissionLink = `/apply/submissions/${submissionID}/`; + + return ( + <div className="submission-link"> + <a target="_blank" rel="noopener noreferrer" href={submissionLink}> + Open in new tab + <svg><use xlinkHref="#open-in-new-tab"></use></svg> + </a> + </div> + ) +} + +SubmissionLink.propTypes = { + submissionID: PropTypes.number, +} + +export default SubmissionLink; diff --git a/opentech/static_src/src/app/src/components/SubmissionLink/styles.scss b/opentech/static_src/src/app/src/components/SubmissionLink/styles.scss new file mode 100644 index 0000000000000000000000000000000000000000..7fa5ae5836bbf552865a7a01e1d2a117d18b04a9 --- /dev/null +++ b/opentech/static_src/src/app/src/components/SubmissionLink/styles.scss @@ -0,0 +1,25 @@ +.submission-link { + border-top: 1px solid $color--light-mid-grey; + margin: 0 20px; + padding: 20px 0; + + a { + display: inline-flex; + align-items: center; + font-weight: $weight--semibold; + transition: border $transition; + border-bottom: 1px solid transparent; + + &:focus, + &:hover { + border-bottom: 1px solid $color--primary; + } + } + + svg { + width: 18px; + height: 18px; + margin-left: 5px; + fill: $color--primary; + } +} diff --git a/opentech/static_src/src/app/src/containers/DisplayPanel/index.js b/opentech/static_src/src/app/src/containers/DisplayPanel/index.js index 40db81bc6b1b170ce5e4fefccaf7a11ce56ffade..291aaff84d61973de9509cfdf1b515129447698f 100644 --- a/opentech/static_src/src/app/src/containers/DisplayPanel/index.js +++ b/opentech/static_src/src/app/src/containers/DisplayPanel/index.js @@ -15,6 +15,7 @@ import AddNoteForm from '@containers/AddNoteForm'; import NoteListing from '@containers/NoteListing'; import StatusActions from '@containers/StatusActions'; import Tabber, {Tab} from '@components/Tabber' +import SubmissionLink from '@components/SubmissionLink'; import './style.scss'; class DisplayPanel extends React.Component { @@ -26,11 +27,8 @@ class DisplayPanel extends React.Component { }; render() { - const { windowSize: {windowWidth: width}, submissionID } = this.props; - const { clearSubmission } = this.props; - + const { windowSize: { windowWidth: width }, submissionID, clearSubmission } = this.props; const isMobile = width < 1024; - const submissionLink = "/apply/submissions/" + submissionID + "/"; const submission = <CurrentSubmissionDisplay /> @@ -42,6 +40,7 @@ class DisplayPanel extends React.Component { <Tab button="Status" key="status"> <StatusActions submissionID={submissionID} /> <ReviewInformation submissionID={submissionID} /> + <SubmissionLink submissionID={submissionID} /> </Tab> ] @@ -61,7 +60,6 @@ class DisplayPanel extends React.Component { <div className="display-panel__column"> <div className="display-panel__header display-panel__header--spacer"></div> <div className="display-panel__body display-panel__body--center"> - <a target="_blank" rel="noopener noreferrer" href={ submissionLink }>Open in new tab</a> { submission } </div> </div>