From d27be565c6e3606f90f5a2d4e3d0025a879ddfff Mon Sep 17 00:00:00 2001
From: Brian Lovin <briandlovin@gmail.com>
Date: Mon, 14 Jan 2019 10:12:41 -0800
Subject: [PATCH] 1Pass offer

---
 components/ChecklistItem/App.js   |  2 ++
 components/ChecklistItem/Offer.js | 19 +++++++++++++
 components/ChecklistItem/style.js | 44 +++++++++++++++++++++++++++++++
 config/passwordManager.js         |  4 +++
 types/index.js                    |  6 +++++
 5 files changed, 75 insertions(+)
 create mode 100644 components/ChecklistItem/Offer.js

diff --git a/components/ChecklistItem/App.js b/components/ChecklistItem/App.js
index 91707c4..901a659 100644
--- a/components/ChecklistItem/App.js
+++ b/components/ChecklistItem/App.js
@@ -10,6 +10,7 @@ import {
   AppSourcesListItem,
   AppSourcesLabel,
 } from './style';
+import Offer from './Offer';
 import Icon from '../Icon';
 
 type Props = {
@@ -78,6 +79,7 @@ export const AppRow = ({ app }: Props) => {
       {sourcesKeys && (
         <AppSourcesList>{sourcesKeys.map(renderSourceIcon)}</AppSourcesList>
       )}
+      {app.offer && <Offer offer={app.offer} />}
     </AppRowContainer>
   );
 };
diff --git a/components/ChecklistItem/Offer.js b/components/ChecklistItem/Offer.js
new file mode 100644
index 0000000..30f40bb
--- /dev/null
+++ b/components/ChecklistItem/Offer.js
@@ -0,0 +1,19 @@
+// @flow
+import React from 'react';
+import type { Offer } from '../../types';
+import Icon from '../Icon';
+import { OfferContainer, LeftBorder } from './style';
+
+type Props = {
+  offer: Offer,
+};
+
+export default function AppOffer({ offer }: Props) {
+  return (
+    <OfferContainer href={offer.url} target="_blank" rel="noopener noreferrer">
+      <LeftBorder />
+      <Icon glyph="link" size={20} />
+      {offer.label}
+    </OfferContainer>
+  );
+}
diff --git a/components/ChecklistItem/style.js b/components/ChecklistItem/style.js
index 3ef11c8..2672d48 100644
--- a/components/ChecklistItem/style.js
+++ b/components/ChecklistItem/style.js
@@ -343,3 +343,47 @@ export const Uncollapse = styled.span`
     background: ${tint(theme.bg.wash, -4)};
   }
 `;
+
+export const OfferContainer = styled.a`
+  display: flex;
+  align-items: center;
+  width: calc(100% - 8px);
+  box-shadow: inset 0 0 1px ${theme.border.active};
+  border-radius: 4px;
+  background: ${theme.bg.default};
+  padding: 8px 16px;
+  position: relative;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: ${theme.text.tertiary};
+  overflow: hidden;
+
+  .icon {
+    margin-right: 4px;
+  }
+
+  @media (max-width: 768px) {
+    align-items: flex-start;
+
+    .icon {
+      top: 2px;
+    }
+  }
+
+  &:hover {
+    color: ${theme.text.secondary};
+  }
+`;
+
+export const LeftBorder = styled.div`
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  height: 100px;
+  width: 4px;
+  background-image: linear-gradient(to bottom, #a913de, #6ac9ff);
+  border-radius: 6px 0 0 6px;
+`;
diff --git a/config/passwordManager.js b/config/passwordManager.js
index ad0e89c..38b6a6d 100644
--- a/config/passwordManager.js
+++ b/config/passwordManager.js
@@ -10,6 +10,10 @@ export default {
       name: '1Password',
       image: '/static/img/1password.jpg',
       url: 'https://1password.com/',
+      offer: {
+        label: 'Sign up with Security Checklist to get 3 months free',
+        url: 'https://start.1password.com/sign-up/family?c=SECURELIST-FJN7FIKQ',
+      },
       sources: {
         windows: 'https://1password.com/downloads/windows/',
         macos: 'https://1password.com/downloads/mac/',
diff --git a/types/index.js b/types/index.js
index dc9e790..f2e0eaf 100644
--- a/types/index.js
+++ b/types/index.js
@@ -25,11 +25,17 @@ export type AppSource = {
   website?: string,
 };
 
+export type Offer = {
+  label: string,
+  url: string,
+};
+
 export type App = {
   name: string,
   image: string,
   sources: AppSource,
   url: string,
+  offer: Offer,
 };
 
 export type ChecklistResource = {