1Pass offer

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>
   );
 };

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>
+  );
+}

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;
+`;

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/',

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 = {