[DDW-924] Create link component (#1799)

* [DDW-924] Pull react-polymorph from GH repo and test * [DDW-924] Add Link overrides and integration into SystemTimeError component * [DDW-924] Replace all links with icons with RP Link component * [DDW-924] Replace link for WalletRecoveryPhraseStep4Dialog dialog and small style improvements * [DDW-924] Remove RP Link test case and new anchor eslint ignore rule * [DDW-924] Fix eslint issues * [DDW-924] Fix Flow issues * [DDW-924] Code cleanup * [DDW-924] Fix scss alphabetical ordering * [DDW-924] Add RP link theme variables * [DDW-924] Add RP Link for Donwload Logs syncing/connecting notification * [DDW-924] Introduce ButtonLink widget and imlementation into Manual Update overlay * [DDW-924] Add ButtonLink to Incident / Alert overlays * [DDW-924] Add ButtonLink to NewsFeed Item * [DDW-924] Add ButtonLink to Legacy Notification * [DDW-924] Add ButtonLink to Staking Countdown * [DDW-924] Add ButtonLink to Staking Info * [DDW-924] Fix lint and Flow * [DDW-924] Fix yarn.lock * [DDW-924] Button link code improvement and cleanup * [DDW-924] Introduce new React Polymorph version 0.9.1 * [DDW-924] Remove yarn.lock integrity hashes * [DDW-924] CHANGELOG update * [DDW-924] Fixes positioning of link icon in Alerts and Incident Overlays button Co-authored-by: Marcus Hurney <marcushurney@gmail.com>
input-output-hk · Jan 16, 2020 · 5ea5c7e · 5ea5c7e
1 parent 7b6f330
commit 5ea5c7e
Show file tree

Hide file tree

Showing 60 changed files with 746 additions and 761 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -55,7 +55,8 @@
     "react/prefer-stateless-function": 0,
     "react/prop-types": "warn",
     "react/require-default-props": 0,
-    "react/sort-comp": 0
+    "react/sort-comp": 0,
+    "jsx-a11y/anchor-is-valid": 0
   },
   "plugins": [
     "flowtype",

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ Changelog
 
 ### Features
 
+- Implemented React-Polymorph "Link" component ([PR 1799](https://github.com/input-output-hk/daedalus/pull/1799))
 - Implemented Hardware wallets restoration ([PR 1801](https://github.com/input-output-hk/daedalus/pull/1801))
 - Added Yoroi wallets restoration to the "Restore Wallet" dialog ([PR 1740](https://github.com/input-output-hk/daedalus/pull/1740))
 - Implemented new menu shortcuts ([PR 1780](https://github.com/input-output-hk/daedalus/pull/1780))

diff --git a/package.json b/package.json
@@ -178,7 +178,7 @@
     "react-intl": "2.7.2",
     "react-lottie": "1.2.3",
     "react-markdown": "3.1.0",
-    "react-polymorph": "0.9.0-rc.26",
+    "react-polymorph": "0.9.1",
     "react-router": "3.2.1",
     "react-svg-inline": "2.1.0",
     "react-virtualized": "9.21.0",

diff --git a/source/renderer/app/components/loading/manual-update/ManualUpdate.js b/source/renderer/app/components/loading/manual-update/ManualUpdate.js
@@ -1,13 +1,11 @@
 // @flow
 import React, { Component } from 'react';
-import SVGInline from 'react-svg-inline';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
 import ReactModal from 'react-modal';
-import { Button } from 'react-polymorph/lib/components/Button';
 import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
-import linkNewWindow from '../../../assets/images/link-ic.inline.svg';
 import styles from './ManualUpdate.scss';
+import ButtonLink from '../../widgets/ButtonLink';
 
 const messages = defineMessages({
   title: {
@@ -85,28 +83,17 @@ export default class ManualUpdate extends Component<Props> {
             </p>
           </div>
 
-          <div>
-            <Button
-              className={styles.actionButton}
-              label={
-                <p>
-                  <SVGInline
-                    svg={linkNewWindow}
-                    className={styles.linkNewWindow}
-                  />
-                  <span className={styles.btnLabel}>
-                    {formatMessage(messages.actionButtonLabel)}
-                  </span>
-                </p>
-              }
-              onClick={() =>
-                onExternalLinkClick(
-                  formatMessage(messages.manualUpdateButtonUrl)
-                )
-              }
-              skin={ButtonSkin}
-            />
-          </div>
+          <ButtonLink
+            className={styles.actionButton}
+            onClick={() =>
+              onExternalLinkClick(formatMessage(messages.manualUpdateButtonUrl))
+            }
+            skin={ButtonSkin}
+            label={formatMessage(messages.actionButtonLabel)}
+            linkProps={{
+              className: styles.btnLabel,
+            }}
+          />
         </div>
       </ReactModal>
     );

diff --git a/source/renderer/app/components/loading/manual-update/ManualUpdate.scss b/source/renderer/app/components/loading/manual-update/ManualUpdate.scss
@@ -57,41 +57,28 @@
         font-weight: 500;
         line-height: 1.36;
         margin: 0 auto;
-
-        .linkNewWindow {
-          @include link(--theme-manual-update-overlay-button-icon-color);
-          border-bottom: none;
-          margin-right: 12px;
-          svg {
-            margin-left: 0;
-            vertical-align: sub;
-            width: 15px;
-          }
-        }
-
         .btnLabel {
           color: var(--theme-manual-update-overlay-button-label-color);
+          &:before {
+            background-color: var(
+              --theme-manual-update-overlay-button-label-color
+            );
+          }
         }
 
         &:not(.disabled):hover {
           background-color: var(
             --theme-manual-update-overlay-button-background-color-hover
           );
-          border: none;
           color: var(--theme-manual-update-overlay-button-text-color-hover);
 
-          .linkNewWindow {
-            svg {
-              g {
-                stroke: var(
-                  --theme-manual-update-overlay-button-icon-color-hover
-                );
-              }
-            }
-          }
-
           .btnLabel {
             color: var(--theme-manual-update-overlay-button-label-color-hover);
+            &:before {
+              background-color: var(
+                --theme-manual-update-overlay-button-label-color-hover
+              );
+            }
           }
         }
       }

diff --git a/source/renderer/app/components/loading/syncing-connecting/ReportIssue.js b/source/renderer/app/components/loading/syncing-connecting/ReportIssue.js
@@ -5,7 +5,8 @@ import { defineMessages, intlShape } from 'react-intl';
 import classNames from 'classnames';
 import { Button } from 'react-polymorph/lib/components/Button';
 import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
-
+import { Link } from 'react-polymorph/lib/components/Link';
+import { LinkSkin } from 'react-polymorph/lib/skins/simple/LinkSkin';
 import styles from './ReportIssue.scss';
 import externalLinkIcon from '../../../assets/images/link-ic.inline.svg';
 
@@ -108,6 +109,7 @@ export default class ReportIssue extends Component<Props> {
     const downloadLogsButtonClasses = classNames([
       styles.downloadLogsButton,
       !isConnected ? styles.downloadLogsButtonConnecting : null,
+      disableDownloadLogs ? styles.disabled : null,
     ]);
 
     const syncIssueArticleUrl = isIncentivizedTestnet
@@ -157,13 +159,14 @@ export default class ReportIssue extends Component<Props> {
           skin={ButtonSkin}
         />
         <br />
-        <button
+
+        <Link
           className={downloadLogsButtonClasses}
-          onClick={onDownloadLogs}
-          disabled={disableDownloadLogs}
-        >
-          {intl.formatMessage(messages.reportIssueDownloadLogsLinkLabel)}
-        </button>
+          onClick={!disableDownloadLogs ? onDownloadLogs : null}
+          hasIconAfter={false}
+          label={intl.formatMessage(messages.reportIssueDownloadLogsLinkLabel)}
+          skin={LinkSkin}
+        />
       </div>
     );
   }

diff --git a/source/renderer/app/components/loading/syncing-connecting/ReportIssue.scss b/source/renderer/app/components/loading/syncing-connecting/ReportIssue.scss
@@ -18,6 +18,28 @@
       color: var(--theme-report-issue-syncing-text-color);
     }
   }
+
+  .downloadLogsButton {
+    border-color: var(--theme-report-issue-syncing-download-logs-text-color);
+    color: var(--theme-report-issue-syncing-download-logs-text-color);
+    display: inline-block;
+    font-family: var(--font-regular);
+    margin-bottom: 20px;
+    opacity: 0.8;
+    &.downloadLogsButtonConnecting {
+      border-color: var(
+        --theme-report-issue-syncing-download-logs-text-color-connecting
+      );
+      color: var(
+        --theme-report-issue-syncing-download-logs-text-color-connecting
+      );
+    }
+    &.disabled {
+      border-color: transparent;
+      cursor: default;
+      text-decoration: none;
+    }
+  }
 }
 
 .reportIssueText {
@@ -59,26 +81,3 @@
     }
   }
 }
-
-.downloadLogsButton {
-  border-bottom: 1px solid
-    var(--theme-report-issue-syncing-download-logs-text-color);
-  color: var(--theme-report-issue-syncing-download-logs-text-color);
-  cursor: pointer;
-  font-family: var(--font-regular);
-  font-size: 14px;
-  line-height: 1.36;
-  margin-bottom: 20px;
-  opacity: 0.8;
-  &:disabled {
-    border-bottom-color: transparent;
-    cursor: default;
-    text-decoration: none;
-  }
-}
-
-.downloadLogsButtonConnecting {
-  border-bottom: 1px solid
-    var(--theme-report-issue-syncing-download-logs-text-color-connecting);
-  color: var(--theme-report-issue-syncing-download-logs-text-color-connecting);
-}
diff --git a/source/renderer/app/components/loading/system-time-error/SystemTimeError.js b/source/renderer/app/components/loading/system-time-error/SystemTimeError.js
@@ -3,8 +3,10 @@ import React, { Component } from 'react';
 import SVGInline from 'react-svg-inline';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape, FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+import { Link } from 'react-polymorph/lib/components/Link';
+import { LinkSkin } from 'react-polymorph/lib/skins/simple/LinkSkin';
 import attentionIcon from '../../../assets/images/attention-big-light.inline.svg';
-import externalLinkIcon from '../../../assets/images/link-ic.inline.svg';
 import { ALLOWED_TIME_DIFFERENCE } from '../../../config/timingConfig';
 import humanizeDurationByLocale from '../../../utils/humanizeDurationByLocale';
 import styles from './SystemTimeError.scss';
@@ -93,15 +95,14 @@ export default class SystemTimeError extends Component<Props> {
     const supportPortalLinkUrl = intl.formatMessage(
       messages.supportPortalLinkUrl
     );
+
     const supportPortalLink = (
-      <a
-        className={styles.supportPortalLinkUrl}
-        href={supportPortalLinkUrl}
+      <Link
+        className={styles.supportPortalLink}
         onClick={event => onExternalLinkClick(supportPortalLinkUrl, event)}
-      >
-        {intl.formatMessage(messages.supportPortalLink)}
-        <SVGInline svg={externalLinkIcon} />
-      </a>
+        label={intl.formatMessage(messages.supportPortalLink)}
+        skin={LinkSkin}
+      />
     );
 
     const isNTPServiceReachable = !!localTimeDifference;
@@ -134,13 +135,16 @@ export default class SystemTimeError extends Component<Props> {
               />
             </p>
 
-            <button
-              className={styles.checkLink}
+            <Link
+              className={classNames([
+                styles.checkLink,
+                isCheckingSystemTime ? styles.disabled : null,
+              ])}
               onClick={() => onCheckTheTimeAgain()}
-              disabled={isCheckingSystemTime}
-            >
-              {intl.formatMessage(messages.onCheckTheTimeAgainLink)}
-            </button>
+              label={intl.formatMessage(messages.onCheckTheTimeAgainLink)}
+              hasIconAfter={false}
+              skin={LinkSkin}
+            />
           </div>
         ) : (
           <div>
@@ -158,12 +162,15 @@ export default class SystemTimeError extends Component<Props> {
               />
             </p>
 
-            <button
+            <Link
               className={styles.checkLink}
               onClick={() => onContinueWithoutClockSyncCheck()}
-            >
-              {intl.formatMessage(messages.onContinueWithoutClockSyncCheckLink)}
-            </button>
+              label={intl.formatMessage(
+                messages.onContinueWithoutClockSyncCheckLink
+              )}
+              hasIconAfter={false}
+              skin={LinkSkin}
+            />
           </div>
         )}
       </div>

diff --git a/source/renderer/app/components/loading/system-time-error/SystemTimeError.scss b/source/renderer/app/components/loading/system-time-error/SystemTimeError.scss
@@ -55,22 +55,31 @@
     opacity: 0.8;
   }
 
-  a {
-    @include link(--theme-system-error-overlay-support-link-icon-color);
+  .supportPortalLink {
     border-bottom: 1px solid var(--theme-system-error-overlay-text-color);
     color: var(--theme-system-error-overlay-text-color);
+    font-size: 16px;
+    line-height: 1.38;
+
+    &:after {
+      background-color: var(
+        --theme-system-error-overlay-support-link-icon-color
+      );
+    }
   }
 
   .checkLink {
     border-bottom: 1px solid var(--theme-system-error-overlay-text-color);
     color: var(--theme-system-error-overlay-text-color);
     cursor: pointer;
+    display: inline-block;
+    font-family: var(--font-regular);
     font-size: 14px;
     line-height: 1.36;
     margin-top: 30px;
     opacity: 0.8;
 
-    &:disabled {
+    &.disabled {
       cursor: default;
       text-decoration: none;
       @include animated-ellipsis($width: 16px);

diff --git a/source/renderer/app/components/news/AlertsOverlay.js b/source/renderer/app/components/news/AlertsOverlay.js
@@ -4,11 +4,11 @@ import moment from 'moment';
 import { observer } from 'mobx-react';
 import { get } from 'lodash';
 import ReactMarkdown from 'react-markdown';
-import SVGInline from 'react-svg-inline';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
 import News from '../../domains/News';
 import DialogCloseButton from '../widgets/DialogCloseButton';
 import closeCrossThin from '../../assets/images/close-cross-thin.inline.svg';
-import externalLinkIcon from '../../assets/images/link-ic.inline.svg';
+import ButtonLink from '../widgets/ButtonLink';
 import styles from './AlertsOverlay.scss';
 
 type State = {
@@ -68,10 +68,17 @@ export default class AlertsOverlay extends Component<Props, State> {
   renderAction = (action: Object) => {
     if (action && (action.url || action.event)) {
       return (
-        <button className={styles.actionBtn} onClick={this.onProceedNewsAction}>
-          {action.label}
-          {action.url && <SVGInline svg={externalLinkIcon} />}
-        </button>
+        <ButtonLink
+          className={styles.actionBtn}
+          onClick={this.onProceedNewsAction}
+          skin={ButtonSkin}
+          label={action.label}
+          linkProps={{
+            className: styles.externalLink,
+            hasIconBefore: false,
+            hasIconAfter: action.url && true,
+          }}
+        />
       );
     }
     return null;
@@ -114,6 +121,7 @@ export default class AlertsOverlay extends Component<Props, State> {
           >
             <ReactMarkdown escapeHtml={false} source={content} />
           </div>
+
           {this.renderAction(action)}
         </div>
       )