From a263c1633e40e586e6eeb344475caa4572a3b4ea Mon Sep 17 00:00:00 2001
From: Erica Norris <enorris@pinterest.com>
Date: Thu, 17 Dec 2020 11:31:19 -0800
Subject: [PATCH 1/5] update Callout primary/secondaryLink to be
 primary/secondaryButton

---
 docs/src/Callout.doc.js         | 123 ++++++++++++++++++++++++++++++--
 packages/gestalt/src/Callout.js |  85 ++++++++++++++--------
 2 files changed, 173 insertions(+), 35 deletions(-)

diff --git a/docs/src/Callout.doc.js b/docs/src/Callout.doc.js
index b525c6fb09..db9a683c4b 100644
--- a/docs/src/Callout.doc.js
+++ b/docs/src/Callout.doc.js
@@ -52,9 +52,9 @@ card(
         href: '',
       },
       {
-        name: 'primaryLink',
+        name: 'primaryButton',
         type:
-          '{| accessibilityLabel?: string , href: string, label: string, onClick?: ({ event: SyntheticMouseEvent<HTMLAnchorElement> | SyntheticKeyboardEvent<HTMLAnchorElement | SyntheticMouseEvent<HTMLButtonElement> | SyntheticKeyboardEvent<HTMLButtonElement> }) => void |}',
+          '{| accessibilityLabel?: string , href: string, label: string, role: "link" | "button", onClick?: ({ event: SyntheticMouseEvent<HTMLAnchorElement> | SyntheticKeyboardEvent<HTMLAnchorElement | SyntheticMouseEvent<HTMLButtonElement> | SyntheticKeyboardEvent<HTMLButtonElement> }) => void |}',
         required: false,
         defaultValue: null,
         description: [
@@ -67,9 +67,9 @@ card(
         href: '',
       },
       {
-        name: 'secondaryLink',
+        name: 'secondaryButton',
         type:
-          '{| accessibilityLabel?: string , href: string, label: string, onClick?: ({ event: SyntheticMouseEvent<HTMLAnchorElement> | SyntheticKeyboardEvent<HTMLAnchorElement | SyntheticMouseEvent<HTMLButtonElement> | SyntheticKeyboardEvent<HTMLButtonElement> }) => void |}',
+          '{| accessibilityLabel?: string , href: string, label: string, role: "link" | "button", onClick?: ({ event: SyntheticMouseEvent<HTMLAnchorElement> | SyntheticKeyboardEvent<HTMLAnchorElement | SyntheticMouseEvent<HTMLButtonElement> | SyntheticKeyboardEvent<HTMLButtonElement> }) => void |}',
         required: false,
         defaultValue: null,
         description: [
@@ -117,8 +117,8 @@ card(
   iconAccessibilityLabel="Info icon"
   title="Your business account was created!"
   message="Apply to the Verified Merchant Program!"
-  primaryLink={{href: "https://pinterest.com", label:"Get started"}}
-  secondaryLink={{href: "https://pinterest.com", label:"Learn more"}}
+  primaryButton={{href: "https://pinterest.com", label:"Get started", role: "link"}}
+  secondaryButton={{href: "https://pinterest.com", label:"Learn more", role: "link"}}
   dismissButton={{
     accessibilityLabel: 'Dismiss banner',
     onDismiss: ()=>{},
@@ -136,7 +136,7 @@ card(
   type="warning"
   iconAccessibilityLabel="Warning icon"
   message="This feature will be removed in two weeks."
-  primaryLink={{href: "https://pinterest.com", label:"Learn more"}}
+  primaryButton={{href: "https://pinterest.com", label:"Learn more", role: "link"}}
   dismissButton={{
     accessibilityLabel: 'Dismiss banner',
     onDismiss: ()=>{},
@@ -159,4 +159,113 @@ card(
   />
 );
 
+card(
+  <Example
+    name='Example with role="button"'
+    description={`
+      You can use \`role="button"\` with the button props if you would like primaryButton to behave like a button rather than a link.
+    `}
+    defaultCode={`
+function Example(props) {
+  const [showModal, setShowModal] = React.useState(false);
+
+  return (
+    <Box marginLeft={-1} marginRight={-1}>
+      <Callout
+        type="info"
+        iconAccessibilityLabel="Info icon"
+        title="Your board was created!"
+        message="You can edit your board at anytime!"
+        primaryButton={{
+          href: "https://pinterest.com",
+          label:"Edit board", role: "button",
+          onClick: () => { setShowModal(!showModal) }
+        }}
+        dismissButton={{
+          accessibilityLabel: 'Dismiss banner',
+          onDismiss: ()=>{},
+        }}
+      />
+      {showModal && (
+        <Layer>
+          <Modal
+            accessibilityModalLabel="Edit Julia's board"
+            heading="Edit your board"
+            onDismiss={() => { setShowModal(!showModal) }}
+            footer={
+              <Box
+                justifyContent="between"
+                display="flex"
+                direction="row"
+                marginLeft={-1}
+                marginRight={-1}
+              >
+                <Box column={12} smColumn={6} paddingX={1}>
+                  <Button text="Delete Board" inline size="lg" />
+                </Box>
+                <Box column={12} smColumn={6} paddingX={1}>
+                  <Box
+                    display="flex"
+                    justifyContent="end"
+                  >
+                    <ButtonGroup>
+                      <Button text="Cancel" inline onClick={() => { setShowModal(!showModal) }} size="lg" />
+                      <Button color="red" inline text="Save" size="lg" />
+                    </ButtonGroup>
+                  </Box>
+                </Box>
+              </Box>
+            }
+            size="md"
+          >
+            <Box display="flex" direction="row" position="relative">
+              <Column span={12}>
+                <Box paddingY={2} paddingX={8} display="flex">
+                  <Column span={4}>
+                    <Label htmlFor="name">
+                      <Text align="left" weight="bold">
+                        Name
+                      </Text>
+                    </Label>
+                  </Column>
+                  <Column span={8}>
+                    <TextField id="name" onChange={() => undefined} />
+                  </Column>
+                </Box>
+                <Box paddingY={2} paddingX={8} display="flex">
+                  <Column span={4}>
+                    <Label htmlFor="desc">
+                      <Text align="left" weight="bold">
+                        Description
+                      </Text>
+                    </Label>
+                  </Column>
+                  <Column span={8}>
+                    <TextArea id="desc" onChange={() => undefined} />
+                  </Column>
+                </Box>
+                <Box paddingY={2} paddingX={8} display="flex">
+                  <Column span={4}>
+                    <Label htmlFor="notifications">
+                      <Text align="left" weight="bold">
+                        Email Notifications
+                      </Text>
+                    </Label>
+                  </Column>
+                  <Column span={8}>
+                    <Switch id="notifications" onChange={() => undefined} switched />
+                  </Column>
+                </Box>
+              </Column>
+            </Box>
+          </Modal>
+        </Layer>
+      )}
+    </Box>
+  );
+}
+`}
+  />
+);
+
 export default cards;
diff --git a/packages/gestalt/src/Callout.js b/packages/gestalt/src/Callout.js
index 31da9f0801..ae1752b230 100644
--- a/packages/gestalt/src/Callout.js
+++ b/packages/gestalt/src/Callout.js
@@ -17,6 +17,19 @@ type LinkData = {|
   accessibilityLabel?: string,
   href: string,
   label: string,
+  role: 'link',
+  onClick?: AbstractEventHandler<
+    | SyntheticMouseEvent<HTMLButtonElement>
+    | SyntheticMouseEvent<HTMLAnchorElement>
+    | SyntheticKeyboardEvent<HTMLAnchorElement>
+    | SyntheticKeyboardEvent<HTMLButtonElement>
+  >,
+|};
+
+type ButtonData = {|
+  accessibilityLabel?: string,
+  label: string,
+  role: 'button',
   onClick?: AbstractEventHandler<
     | SyntheticMouseEvent<HTMLButtonElement>
     | SyntheticMouseEvent<HTMLAnchorElement>
@@ -32,8 +45,8 @@ type Props = {|
   |},
   iconAccessibilityLabel: string,
   message: string,
-  primaryLink?: LinkData,
-  secondaryLink?: LinkData,
+  primaryButton?: ButtonData | LinkData,
+  secondaryButton?: ButtonData | LinkData,
   type: 'error' | 'info' | 'warning',
   title?: string,
 |};
@@ -56,12 +69,12 @@ const CALLOUT_TYPE_ATTRIBUTES = {
   },
 };
 
-const CalloutLink = ({
+const CalloutButton = ({
   data,
   stacked,
   type,
 }: {|
-  data: LinkData,
+  data: ButtonData | LinkData,
   stacked?: boolean,
   type: string,
 |}): Node => {
@@ -71,7 +84,8 @@ const CalloutLink = ({
   if (isDarkMode && type === 'secondary') {
     color = 'transparentWhiteText';
   }
-  const { accessibilityLabel, href, label, onClick } = data;
+  const { accessibilityLabel, label, onClick, role } = data;
+  const isLink = role === 'link';
 
   return (
     <Box
@@ -84,15 +98,27 @@ const CalloutLink = ({
       smMarginTop="auto"
       smMarginBottom="auto"
     >
-      <Button
-        accessibilityLabel={accessibilityLabel}
-        color={color}
-        href={href}
-        onClick={onClick}
-        role="link"
-        size="lg"
-        text={label}
-      />
+      {isLink && (
+        <Button
+          accessibilityLabel={accessibilityLabel}
+          color={color}
+          href={data.href}
+          onClick={onClick}
+          role="link"
+          size="lg"
+          text={label}
+        />
+      )}
+      {!isLink && (
+        <Button
+          accessibilityLabel={accessibilityLabel}
+          color={color}
+          onClick={onClick}
+          role="button"
+          size="lg"
+          text={label}
+        />
+      )}
     </Box>
   );
 };
@@ -101,8 +127,8 @@ export default function Callout({
   dismissButton,
   iconAccessibilityLabel,
   message,
-  primaryLink,
-  secondaryLink,
+  primaryButton,
+  secondaryButton,
   type,
   title,
 }: Props): Node {
@@ -140,8 +166,8 @@ export default function Callout({
           smDirection="row"
           justifyContent="center"
           alignItems="center"
-          marginBottom={primaryLink || secondaryLink ? 4 : undefined}
-          smMarginBottom={primaryLink || secondaryLink ? 0 : undefined}
+          marginBottom={primaryButton || secondaryButton ? 4 : undefined}
+          smMarginBottom={primaryButton || secondaryButton ? 0 : undefined}
           smPaddingY={3}
         >
           <Box
@@ -183,15 +209,17 @@ export default function Callout({
           </Box>
         </Box>
         <Box smDisplay="flex" marginStart="auto" smMarginEnd={4} smPaddingY={3}>
-          {secondaryLink && responsiveMinWidth !== 'xs' && (
-            <CalloutLink type="secondary" data={secondaryLink} />
+          {secondaryButton && responsiveMinWidth !== 'xs' && (
+            <CalloutButton type="secondary" data={secondaryButton} />
+          )}
+          {primaryButton && (
+            <CalloutButton type="primary" data={primaryButton} />
           )}
-          {primaryLink && <CalloutLink type="primary" data={primaryLink} />}
-          {secondaryLink && responsiveMinWidth === 'xs' && (
-            <CalloutLink
+          {secondaryButton && responsiveMinWidth === 'xs' && (
+            <CalloutButton
               type="secondary"
-              data={secondaryLink}
-              stacked={!!secondaryLink}
+              data={secondaryButton}
+              stacked={!!secondaryButton}
             />
           )}
         </Box>
@@ -222,14 +250,15 @@ Callout.propTypes = {
   iconAccessibilityLabel: PropTypes.string.isRequired,
   message: PropTypes.string.isRequired,
   // $FlowFixMe[signature-verification-failure] flow 0.135.0 upgrade
-  primaryLink: PropTypes.shape({
-    href: PropTypes.string.isRequired,
+  primaryButton: PropTypes.shape({
+    href: PropTypes.string,
     label: PropTypes.string.isRequired,
     onClick: PropTypes.func,
     accessibilityLabel: PropTypes.string,
+    role: PropTypes.oneOf(['button', 'link']),
   }),
   // $FlowFixMe[signature-verification-failure] flow 0.135.0 upgrade
-  secondaryLink: PropTypes.shape({
+  secondaryButton: PropTypes.shape({
     href: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
     onClick: PropTypes.func,

From b261a4adb1af5996889cab09c91d435450b60ee0 Mon Sep 17 00:00:00 2001
From: Erica Norris <enorris@pinterest.com>
Date: Thu, 17 Dec 2020 22:59:37 -0800
Subject: [PATCH 2/5] updated per PR feedback and add changes to Upsell

---
 docs/src/Callout.doc.js                       |  27 ++--
 docs/src/Upsell.doc.js                        | 121 ++++++++++++++----
 packages/gestalt/src/Callout.js               |  66 ++++------
 packages/gestalt/src/Callout.test.js          |  27 +++-
 packages/gestalt/src/Upsell.js                |  73 ++++++-----
 packages/gestalt/src/Upsell.test.js           |  29 +++--
 .../src/__snapshots__/Callout.test.js.snap    | 103 ++++++++++++++-
 .../src/__snapshots__/Upsell.test.js.snap     |  83 +++++++++++-
 8 files changed, 398 insertions(+), 131 deletions(-)

diff --git a/docs/src/Callout.doc.js b/docs/src/Callout.doc.js
index db9a683c4b..fbff470a40 100644
--- a/docs/src/Callout.doc.js
+++ b/docs/src/Callout.doc.js
@@ -52,13 +52,14 @@ card(
         href: '',
       },
       {
-        name: 'primaryButton',
+        name: 'primaryAction',
         type:
-          '{| accessibilityLabel?: string , href: string, label: string, role: "link" | "button", onClick?: ({ event: SyntheticMouseEvent<HTMLAnchorElement> | SyntheticKeyboardEvent<HTMLAnchorElement | SyntheticMouseEvent<HTMLButtonElement> | SyntheticKeyboardEvent<HTMLButtonElement> }) => void |}',
+          '{| accessibilityLabel?: string , href: string, label: string, onClick?: ({ event: SyntheticMouseEvent<HTMLAnchorElement> | SyntheticKeyboardEvent<HTMLAnchorElement | SyntheticMouseEvent<HTMLButtonElement> | SyntheticKeyboardEvent<HTMLButtonElement> }) => void |}',
         required: false,
         defaultValue: null,
         description: [
-          'Link-role button to render inside the callout as the main call-to-action to the user. The label text has a fixed size.',
+          'Button to render inside the callout as the main call-to-action to the user. The label text has a fixed size.',
+          '- href: If href is supplied, the action will serve as a link, while if no href is supplied, the action will be a button',
           '- label: Text to render inside the button to convey the function and purpose of the button. The button text has a fixed size.',
           '- accessibilityLabel: Supply a short, descriptive label for screen-readers to replace button texts that do not provide sufficient context about the button component behavior. Texts like `Click Here,` `Follow,` or `Read More` can be confusing when a screen reader reads them out of context. In those cases, we must pass an alternative text to replace the button text.',
           '- onClick: Callback fired when the button component is clicked (pressed and released) with a mouse or keyboard.',
@@ -67,13 +68,14 @@ card(
         href: '',
       },
       {
-        name: 'secondaryButton',
+        name: 'secondaryAction',
         type:
-          '{| accessibilityLabel?: string , href: string, label: string, role: "link" | "button", onClick?: ({ event: SyntheticMouseEvent<HTMLAnchorElement> | SyntheticKeyboardEvent<HTMLAnchorElement | SyntheticMouseEvent<HTMLButtonElement> | SyntheticKeyboardEvent<HTMLButtonElement> }) => void |}',
+          '{| accessibilityLabel?: string , href: string, label: string, onClick?: ({ event: SyntheticMouseEvent<HTMLAnchorElement> | SyntheticKeyboardEvent<HTMLAnchorElement | SyntheticMouseEvent<HTMLButtonElement> | SyntheticKeyboardEvent<HTMLButtonElement> }) => void |}',
         required: false,
         defaultValue: null,
         description: [
-          'Link-role button to render inside the callout as a secondary call-to-action to the user.',
+          'Button to render inside the callout as the secondary call-to-action to the user. The label text has a fixed size.',
+          '- href: If href is supplied, the action will serve as a link, while if no href is supplied, the action will be a button',
           '- label: Text to render inside the button to convey the function and purpose of the button. The button text has a fixed size.',
           '- accessibilityLabel: Supply a short, descriptive label for screen-readers to replace button texts that do not provide sufficient context about the button component behavior. Texts like `Click Here,` `Follow,` or `Read More` can be confusing when a screen reader reads them out of context. In those cases, we must pass an alternative text to replace the button text.',
           '- onClick: Callback fired when the button component is clicked (pressed and released) with a mouse or keyboard.',
@@ -117,8 +119,8 @@ card(
   iconAccessibilityLabel="Info icon"
   title="Your business account was created!"
   message="Apply to the Verified Merchant Program!"
-  primaryButton={{href: "https://pinterest.com", label:"Get started", role: "link"}}
-  secondaryButton={{href: "https://pinterest.com", label:"Learn more", role: "link"}}
+  primaryAction={{href: "https://pinterest.com", label:"Get started"}}
+  secondaryAction={{href: "https://pinterest.com", label:"Learn more"}}
   dismissButton={{
     accessibilityLabel: 'Dismiss banner',
     onDismiss: ()=>{},
@@ -136,7 +138,7 @@ card(
   type="warning"
   iconAccessibilityLabel="Warning icon"
   message="This feature will be removed in two weeks."
-  primaryButton={{href: "https://pinterest.com", label:"Learn more", role: "link"}}
+  primaryAction={{href: "https://pinterest.com", label:"Learn more"}}
   dismissButton={{
     accessibilityLabel: 'Dismiss banner',
     onDismiss: ()=>{},
@@ -161,9 +163,9 @@ card(
 
 card(
   <Example
-    name='Example with role="button"'
+    name="Example with button call-to-action"
     description={`
-      You can use \`role="button"\` with the button props if you would like primaryButton to behave like a button rather than a link.
+      \`primaryAction\` and \`secondaryAction\` can be used as buttons when no \`href\` is supplied.
     `}
     defaultCode={`
 function Example(props) {
@@ -176,8 +178,7 @@ function Example(props) {
         iconAccessibilityLabel="Info icon"
         title="Your board was created!"
         message="You can edit your board at anytime!"
-        primaryButton={{
-          href: "https://pinterest.com",
+        primaryAction={{
           label:"Edit board", role: "button",
           onClick: () => { setShowModal(!showModal) }
         }}
diff --git a/docs/src/Upsell.doc.js b/docs/src/Upsell.doc.js
index 0c34ff803c..347d342053 100644
--- a/docs/src/Upsell.doc.js
+++ b/docs/src/Upsell.doc.js
@@ -51,13 +51,14 @@ card(
         href: 'Image',
       },
       {
-        name: 'primaryLink',
+        name: 'primaryAction',
         type:
           '{| accessibilityLabel?: string , href: string, label: string, onClick?: ({ event: SyntheticMouseEvent<HTMLAnchorElement> | SyntheticKeyboardEvent<HTMLAnchorElement | SyntheticMouseEvent<HTMLButtonElement> | SyntheticKeyboardEvent<HTMLButtonElement> }) => void |}',
         required: false,
         defaultValue: null,
         description: [
-          'Link-role button to render inside the Upsell as the main call-to-action to the user. The label text has a fixed size.',
+          'Button to render inside the callout as the main call-to-action to the user. The label text has a fixed size.',
+          '- href: If href is supplied, the action will serve as a link, while if no href is supplied, the action will be a button',
           '- label: Text to render inside the button to convey the function and purpose of the button. The button text has a fixed size.',
           '- accessibilityLabel: Supply a short, descriptive label for screen-readers to replace button texts that do not provide sufficient context about the button component behavior. Texts like `Click Here,` `Follow,` or `Read More` can be confusing when a screen reader reads them out of context. In those cases, we must pass an alternative text to replace the button text.',
           '- onClick: Callback fired when the button component is clicked (pressed and released) with a mouse or keyboard.',
@@ -66,13 +67,14 @@ card(
         href: '',
       },
       {
-        name: 'secondaryLink',
+        name: 'secondaryAction',
         type:
           '{| accessibilityLabel?: string , href: string, label: string, onClick?: ({ event: SyntheticMouseEvent<HTMLAnchorElement> | SyntheticKeyboardEvent<HTMLAnchorElement | SyntheticMouseEvent<HTMLButtonElement> | SyntheticKeyboardEvent<HTMLButtonElement> }) => void |}',
         required: false,
         defaultValue: null,
         description: [
-          'Link-role button to render inside the Upsell as a secondary call-to-action to the user.',
+          'Button to render inside the callout as the secondary call-to-action to the user. The label text has a fixed size.',
+          '- href: If href is supplied, the action will serve as a link, while if no href is supplied, the action will be a button',
           '- label: Text to render inside the button to convey the function and purpose of the button. The button text has a fixed size.',
           '- accessibilityLabel: Supply a short, descriptive label for screen-readers to replace button texts that do not provide sufficient context about the button component behavior. Texts like `Click Here,` `Follow,` or `Read More` can be confusing when a screen reader reads them out of context. In those cases, we must pass an alternative text to replace the button text.',
           '- onClick: Callback fired when the button component is clicked (pressed and released) with a mouse or keyboard.',
@@ -94,24 +96,6 @@ card(
   />
 );
 
-card(
-  <Example
-    name="Call to Actions and Title"
-    defaultCode={`
-<Upsell
-  title="Join the Verified Merchant Program"
-  message="Apply to the Verified Merchant Program—it’s free"
-  primaryLink={{href: "https://pinterest.com", label:"Apply now"}}
-  secondaryLink={{href: "https://pinterest.com", label:"Learn more"}}
-  dismissButton={{
-    accessibilityLabel: 'Dismiss banner',
-    onDismiss: ()=>{},
-  }}
-/>
-`}
-  />
-);
-
 card(
   <Example
     name="Simple message"
@@ -134,7 +118,7 @@ card(
 <Upsell
   title="Give $30, get $60 in ads credit"
   message="Earn $60 of ads credit, and give $30 of ads credit to a friend"
-  primaryLink={{href: "https://pinterest.com", label:"Send invite"}}
+  primaryAction={{href: "https://pinterest.com", label:"Send invite"}}
   dismissButton={{
     accessibilityLabel: 'Dismiss banner',
     onDismiss: ()=>{},
@@ -154,7 +138,7 @@ card(
 <Upsell
   title="Stay healthy and safe"
   message="Check out our resources for adapting to these times."
-  primaryLink={{href: "https://pinterest.com", label:"Visit"}}
+  primaryAction={{href: "https://pinterest.com", label:"Visit"}}
   dismissButton={{
     accessibilityLabel: 'Dismiss banner',
     onDismiss: ()=>{},
@@ -176,4 +160,93 @@ card(
   />
 );
 
+card(
+  <Example
+    name="Link Call to Actions"
+    description={`
+      When \`href\` is supplied to \`primaryAction\` and \`secondaryAction\` the action button defaults to a link-role button.
+    `}
+    defaultCode={`
+<Upsell
+  title="Join the Verified Merchant Program"
+  message="Apply to the Verified Merchant Program—it’s free"
+  primaryAction={{href: "https://pinterest.com", label:"Apply now"}}
+  secondaryAction={{href: "https://pinterest.com", label:"Learn more"}}
+  dismissButton={{
+    accessibilityLabel: 'Dismiss banner',
+    onDismiss: ()=>{},
+  }}
+/>
+`}
+  />
+);
+
+card(
+  <Example
+    name="Button Call to Actions"
+    description={`
+      \`primaryAction\` and \`secondaryAction\` can be used as buttons when no \`href\` is supplied.
+    `}
+    defaultCode={`
+function Example(props) {
+  const [showModal, setShowModal] = React.useState(false);
+
+  return (
+    <Box marginLeft={-1} marginRight={-1}>
+      <Upsell
+        title="Give $30, get $60 in ads credit"
+        message="Earn $60 of ads credit, and give $30 of ads credit to a friend"
+        primaryAction={{onClick: () => { setShowModal(!showModal) }, label:"Send invite"}}
+        dismissButton={{
+          accessibilityLabel: 'Dismiss banner',
+          onDismiss: ()=>{},
+        }}
+        imageData={{
+          component: <Icon icon="pinterest" accessibilityLabel="Pin" color="darkGray" size={32}/>
+        }}
+      />
+      {showModal && (
+        <Layer>
+          <Modal
+            accessibilityModalLabel="Would you like to sign up"
+            heading="Invite Friends?"
+            onDismiss={() => { setShowModal(!showModal) }}
+            footer={
+              <Box
+                display="flex"
+                justifyContent="center"
+              >
+                <ButtonGroup>
+                  <Button
+                    size="lg"
+                    text="Cancel"
+                    onClick={() => { setShowModal(!showModal) }}
+                  />
+                  <Button
+                    size="lg"
+                    color="red"
+                    text="Sign up"
+                    onClick={() => { setShowModal(!showModal) }}
+                  />
+                </ButtonGroup>
+              </Box>
+            }
+            role="alertdialog"
+            size="sm"
+          >
+            <Box paddingX={8}>
+              <Text align="center">
+                When your friend spends their first $30 on ads, you’ll earn $60 of ads credit, and they’ll get $30 of ads credit, too
+              </Text>
+            </Box>
+          </Modal>
+        </Layer>
+      )}
+    </Box>
+  );
+}
+`}
+  />
+);
+
 export default cards;
diff --git a/packages/gestalt/src/Callout.js b/packages/gestalt/src/Callout.js
index ae1752b230..2e894218bd 100644
--- a/packages/gestalt/src/Callout.js
+++ b/packages/gestalt/src/Callout.js
@@ -13,23 +13,10 @@ import { type AbstractEventHandler } from './AbstractEventHandler.js';
 import styles from './Callout.css';
 import useResponsiveMinWidth from './useResponsiveMinWidth.js';
 
-type LinkData = {|
+type ActionData = {|
   accessibilityLabel?: string,
-  href: string,
+  href?: string,
   label: string,
-  role: 'link',
-  onClick?: AbstractEventHandler<
-    | SyntheticMouseEvent<HTMLButtonElement>
-    | SyntheticMouseEvent<HTMLAnchorElement>
-    | SyntheticKeyboardEvent<HTMLAnchorElement>
-    | SyntheticKeyboardEvent<HTMLButtonElement>
-  >,
-|};
-
-type ButtonData = {|
-  accessibilityLabel?: string,
-  label: string,
-  role: 'button',
   onClick?: AbstractEventHandler<
     | SyntheticMouseEvent<HTMLButtonElement>
     | SyntheticMouseEvent<HTMLAnchorElement>
@@ -45,8 +32,8 @@ type Props = {|
   |},
   iconAccessibilityLabel: string,
   message: string,
-  primaryButton?: ButtonData | LinkData,
-  secondaryButton?: ButtonData | LinkData,
+  primaryAction?: ActionData,
+  secondaryAction?: ActionData,
   type: 'error' | 'info' | 'warning',
   title?: string,
 |};
@@ -69,12 +56,12 @@ const CALLOUT_TYPE_ATTRIBUTES = {
   },
 };
 
-const CalloutButton = ({
+const CalloutAction = ({
   data,
   stacked,
   type,
 }: {|
-  data: ButtonData | LinkData,
+  data: ActionData,
   stacked?: boolean,
   type: string,
 |}): Node => {
@@ -84,8 +71,7 @@ const CalloutButton = ({
   if (isDarkMode && type === 'secondary') {
     color = 'transparentWhiteText';
   }
-  const { accessibilityLabel, label, onClick, role } = data;
-  const isLink = role === 'link';
+  const { accessibilityLabel, label, onClick, href } = data;
 
   return (
     <Box
@@ -98,18 +84,17 @@ const CalloutButton = ({
       smMarginTop="auto"
       smMarginBottom="auto"
     >
-      {isLink && (
+      {href ? (
         <Button
           accessibilityLabel={accessibilityLabel}
           color={color}
-          href={data.href}
+          href={href}
           onClick={onClick}
           role="link"
           size="lg"
           text={label}
         />
-      )}
-      {!isLink && (
+      ) : (
         <Button
           accessibilityLabel={accessibilityLabel}
           color={color}
@@ -127,8 +112,8 @@ export default function Callout({
   dismissButton,
   iconAccessibilityLabel,
   message,
-  primaryButton,
-  secondaryButton,
+  primaryAction,
+  secondaryAction,
   type,
   title,
 }: Props): Node {
@@ -166,8 +151,8 @@ export default function Callout({
           smDirection="row"
           justifyContent="center"
           alignItems="center"
-          marginBottom={primaryButton || secondaryButton ? 4 : undefined}
-          smMarginBottom={primaryButton || secondaryButton ? 0 : undefined}
+          marginBottom={primaryAction || secondaryAction ? 4 : undefined}
+          smMarginBottom={primaryAction || secondaryAction ? 0 : undefined}
           smPaddingY={3}
         >
           <Box
@@ -209,17 +194,17 @@ export default function Callout({
           </Box>
         </Box>
         <Box smDisplay="flex" marginStart="auto" smMarginEnd={4} smPaddingY={3}>
-          {secondaryButton && responsiveMinWidth !== 'xs' && (
-            <CalloutButton type="secondary" data={secondaryButton} />
+          {secondaryAction && responsiveMinWidth !== 'xs' && (
+            <CalloutAction type="secondary" data={secondaryAction} />
           )}
-          {primaryButton && (
-            <CalloutButton type="primary" data={primaryButton} />
+          {primaryAction && (
+            <CalloutAction type="primary" data={primaryAction} />
           )}
-          {secondaryButton && responsiveMinWidth === 'xs' && (
-            <CalloutButton
+          {secondaryAction && responsiveMinWidth === 'xs' && (
+            <CalloutAction
               type="secondary"
-              data={secondaryButton}
-              stacked={!!secondaryButton}
+              data={secondaryAction}
+              stacked={!!secondaryAction}
             />
           )}
         </Box>
@@ -250,16 +235,15 @@ Callout.propTypes = {
   iconAccessibilityLabel: PropTypes.string.isRequired,
   message: PropTypes.string.isRequired,
   // $FlowFixMe[signature-verification-failure] flow 0.135.0 upgrade
-  primaryButton: PropTypes.shape({
+  primaryAction: PropTypes.shape({
     href: PropTypes.string,
     label: PropTypes.string.isRequired,
     onClick: PropTypes.func,
     accessibilityLabel: PropTypes.string,
-    role: PropTypes.oneOf(['button', 'link']),
   }),
   // $FlowFixMe[signature-verification-failure] flow 0.135.0 upgrade
-  secondaryButton: PropTypes.shape({
-    href: PropTypes.string.isRequired,
+  secondaryAction: PropTypes.shape({
+    href: PropTypes.string,
     label: PropTypes.string.isRequired,
     onClick: PropTypes.func,
     accessibilityLabel: PropTypes.string,
diff --git a/packages/gestalt/src/Callout.test.js b/packages/gestalt/src/Callout.test.js
index 9a772da345..7a794056f3 100644
--- a/packages/gestalt/src/Callout.test.js
+++ b/packages/gestalt/src/Callout.test.js
@@ -49,12 +49,12 @@ describe('<Callout />', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  test('message + title + primaryLink', () => {
+  test('message + title + primaryAction with href', () => {
     const tree = create(
       <Callout
         message="Insert a clever info callout message here"
         iconAccessibilityLabel="info"
-        primaryLink={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+        primaryAction={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
         type="info"
         title="A Title"
       />
@@ -62,13 +62,12 @@ describe('<Callout />', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  test('message + title + primaryLink + secondaryLink', () => {
+  test('message + title + primaryAction without href', () => {
     const tree = create(
       <Callout
         message="Insert a clever info callout message here"
         iconAccessibilityLabel="info"
-        primaryLink={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
-        secondaryLink={{ href: 'pinterest.com/help', label: 'Learn more' }}
+        primaryAction={{ label: 'Visit Pinterest' }}
         type="info"
         title="A Title"
       />
@@ -76,12 +75,26 @@ describe('<Callout />', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  test('message + title + primaryLink + dismissButton', () => {
+  test('message + title + primaryAction + secondaryAction', () => {
     const tree = create(
       <Callout
         message="Insert a clever info callout message here"
         iconAccessibilityLabel="info"
-        primaryLink={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+        primaryAction={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+        secondaryAction={{ href: 'pinterest.com/help', label: 'Learn more' }}
+        type="info"
+        title="A Title"
+      />
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('message + title + primaryAction + dismissButton', () => {
+    const tree = create(
+      <Callout
+        message="Insert a clever info callout message here"
+        iconAccessibilityLabel="info"
+        primaryAction={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
         dismissButton={{
           accessibilityLabel: 'Dismiss banner',
           onDismiss: () => {},
diff --git a/packages/gestalt/src/Upsell.js b/packages/gestalt/src/Upsell.js
index c71851ee5a..988084edb8 100644
--- a/packages/gestalt/src/Upsell.js
+++ b/packages/gestalt/src/Upsell.js
@@ -14,9 +14,9 @@ import { type AbstractEventHandler } from './AbstractEventHandler.js';
 import styles from './Upsell.css';
 import useResponsiveMinWidth from './useResponsiveMinWidth.js';
 
-type LinkData = {|
+type ActionData = {|
   accessibilityLabel?: string,
-  href: string,
+  href?: string,
   label: string,
   onClick?: AbstractEventHandler<
     | SyntheticMouseEvent<HTMLButtonElement>
@@ -40,17 +40,17 @@ type Props = {|
     width?: number,
   |},
   message: string,
-  primaryLink?: LinkData,
-  secondaryLink?: LinkData,
+  primaryAction?: ActionData,
+  secondaryAction?: ActionData,
   title?: string,
 |};
 
-const UpsellLink = ({
+const UpsellAction = ({
   data,
   stacked,
   type,
 }: {|
-  data: LinkData,
+  data: ActionData,
   stacked?: boolean,
   type: string,
 |}): Node => {
@@ -68,15 +68,26 @@ const UpsellLink = ({
       smMarginTop="auto"
       smMarginBottom="auto"
     >
-      <Button
-        accessibilityLabel={accessibilityLabel}
-        color={color}
-        href={href}
-        onClick={onClick}
-        role="link"
-        size="lg"
-        text={label}
-      />
+      {href ? (
+        <Button
+          accessibilityLabel={accessibilityLabel}
+          color={color}
+          href={href}
+          onClick={onClick}
+          role="link"
+          size="lg"
+          text={label}
+        />
+      ) : (
+        <Button
+          accessibilityLabel={accessibilityLabel}
+          color={color}
+          onClick={onClick}
+          role="button"
+          size="lg"
+          text={label}
+        />
+      )}
     </Box>
   );
 };
@@ -85,8 +96,8 @@ export default function Upsell({
   dismissButton,
   imageData,
   message,
-  primaryLink,
-  secondaryLink,
+  primaryAction,
+  secondaryAction,
   title,
 }: Props): Node {
   const isImage = imageData?.component && imageData.component.type === Image;
@@ -116,8 +127,8 @@ export default function Upsell({
           smDirection="row"
           justifyContent="center"
           alignItems="center"
-          marginBottom={primaryLink || secondaryLink ? 4 : undefined}
-          smMarginBottom={primaryLink || secondaryLink ? 0 : undefined}
+          marginBottom={primaryAction || secondaryAction ? 4 : undefined}
+          smMarginBottom={primaryAction || secondaryAction ? 0 : undefined}
           smPaddingY={3}
         >
           {imageData && (
@@ -167,15 +178,17 @@ export default function Upsell({
           </Box>
         </Box>
         <Box smDisplay="flex" marginStart="auto" smMarginEnd={4} smPaddingY={3}>
-          {secondaryLink && responsiveMinWidth !== 'xs' && (
-            <UpsellLink type="secondary" data={secondaryLink} />
+          {secondaryAction && responsiveMinWidth !== 'xs' && (
+            <UpsellAction type="secondary" data={secondaryAction} />
+          )}
+          {primaryAction && (
+            <UpsellAction type="primary" data={primaryAction} />
           )}
-          {primaryLink && <UpsellLink type="primary" data={primaryLink} />}
-          {secondaryLink && responsiveMinWidth === 'xs' && (
-            <UpsellLink
+          {secondaryAction && responsiveMinWidth === 'xs' && (
+            <UpsellAction
               type="secondary"
-              data={secondaryLink}
-              stacked={!!secondaryLink}
+              data={secondaryAction}
+              stacked={!!secondaryAction}
             />
           )}
         </Box>
@@ -213,15 +226,15 @@ Upsell.propTypes = {
   }),
   message: PropTypes.string.isRequired,
   // $FlowFixMe[signature-verification-failure] flow 0.135.0 upgrade
-  primaryLink: PropTypes.shape({
-    href: PropTypes.string.isRequired,
+  primaryAction: PropTypes.shape({
+    href: PropTypes.string,
     label: PropTypes.string.isRequired,
     onClick: PropTypes.func,
     accessibilityLabel: PropTypes.string,
   }),
   // $FlowFixMe[signature-verification-failure] flow 0.135.0 upgrade
-  secondaryLink: PropTypes.shape({
-    href: PropTypes.string.isRequired,
+  secondaryAction: PropTypes.shape({
+    href: PropTypes.string,
     label: PropTypes.string.isRequired,
     onClick: PropTypes.func,
     accessibilityLabel: PropTypes.string,
diff --git a/packages/gestalt/src/Upsell.test.js b/packages/gestalt/src/Upsell.test.js
index 3e08c3fa6c..e5766308de 100644
--- a/packages/gestalt/src/Upsell.test.js
+++ b/packages/gestalt/src/Upsell.test.js
@@ -19,34 +19,45 @@ describe('<Upsell />', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  test('message + title + primaryLink', () => {
+  test('message + title + primaryAction with href', () => {
     const tree = create(
       <Upsell
         message="Insert a clever upsell message here"
-        primaryLink={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+        primaryAction={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
         title="A Title"
       />
     ).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
-  test('message + title + primaryLink + secondaryLink', () => {
+  test('message + title + primaryAction without href', () => {
     const tree = create(
       <Upsell
         message="Insert a clever upsell message here"
-        primaryLink={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
-        secondaryLink={{ href: 'pinterest.com/help', label: 'Learn more' }}
+        primaryAction={{ label: 'Visit Pinterest' }}
         title="A Title"
       />
     ).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
-  test('message + title + primaryLink + dismissButton', () => {
+  test('message + title + primaryAction + secondaryAction', () => {
     const tree = create(
       <Upsell
         message="Insert a clever upsell message here"
-        primaryLink={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+        primaryAction={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+        secondaryAction={{ href: 'pinterest.com/help', label: 'Learn more' }}
+        title="A Title"
+      />
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('message + title + primaryAction + dismissButton', () => {
+    const tree = create(
+      <Upsell
+        message="Insert a clever upsell message here"
+        primaryAction={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
         dismissButton={{
           accessibilityLabel: 'Dismiss banner',
           onDismiss: () => {},
@@ -57,11 +68,11 @@ describe('<Upsell />', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  test('message + title + primaryLink + dismissButton + image', () => {
+  test('message + title + primaryAction + dismissButton + image', () => {
     const tree = create(
       <Upsell
         message="Insert a clever upsell message here"
-        primaryLink={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+        primaryAction={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
         dismissButton={{
           accessibilityLabel: 'Dismiss banner',
           onDismiss: () => {},
diff --git a/packages/gestalt/src/__snapshots__/Callout.test.js.snap b/packages/gestalt/src/__snapshots__/Callout.test.js.snap
index 493b8079e6..685f2bae80 100644
--- a/packages/gestalt/src/__snapshots__/Callout.test.js.snap
+++ b/packages/gestalt/src/__snapshots__/Callout.test.js.snap
@@ -189,7 +189,7 @@ exports[`<Callout /> Warning Callout 1`] = `
 </div>
 `;
 
-exports[`<Callout /> message + title + primaryLink + dismissButton 1`] = `
+exports[`<Callout /> message + title + primaryAction + dismissButton 1`] = `
 <div
   className="box paddingX6 paddingY6 relative rounding4 smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
   style={
@@ -337,7 +337,7 @@ exports[`<Callout /> message + title + primaryLink + dismissButton 1`] = `
 </div>
 `;
 
-exports[`<Callout /> message + title + primaryLink + secondaryLink 1`] = `
+exports[`<Callout /> message + title + primaryAction + secondaryAction 1`] = `
 <div
   className="box paddingX6 paddingY6 relative rounding4 smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
   style={
@@ -470,7 +470,7 @@ exports[`<Callout /> message + title + primaryLink + secondaryLink 1`] = `
 </div>
 `;
 
-exports[`<Callout /> message + title + primaryLink 1`] = `
+exports[`<Callout /> message + title + primaryAction with href 1`] = `
 <div
   className="box paddingX6 paddingY6 relative rounding4 smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
   style={
@@ -573,6 +573,103 @@ exports[`<Callout /> message + title + primaryLink 1`] = `
 </div>
 `;
 
+exports[`<Callout /> message + title + primaryAction without href 1`] = `
+<div
+  className="box paddingX6 paddingY6 relative rounding4 smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
+  style={
+    Object {
+      "backgroundColor": "#EBF4FE",
+    }
+  }
+>
+  <div
+    className="box flexWrap smDisplayFlex smMarginBottomN3 smMarginTopN3"
+    style={
+      Object {
+        "width": "100%",
+      }
+    }
+  >
+    <div
+      className="box itemsCenter justifyCenter marginBottom4 smDirectionRow smMarginBottom0 smPaddingY3 xsDirectionColumn xsDisplayFlex"
+    >
+      <div
+        className="box marginBottom4 marginTop0 smMarginBottomAuto smMarginTopAuto"
+      >
+        <svg
+          aria-hidden={null}
+          aria-label="info"
+          className="icon blue iconBlock"
+          height={32}
+          role="img"
+          viewBox="0 0 24 24"
+          width={32}
+        >
+          <path
+            d="test-file-stub"
+          />
+        </svg>
+      </div>
+      <div
+        className="box marginBottomAuto marginTopAuto paddingX6"
+        style={
+          Object {
+            "maxWidth": 648,
+          }
+        }
+      >
+        <div
+          className="box itemsCenter marginBottomAuto marginTopAuto smDisplayBlock xsDirectionColumn xsDisplayFlex"
+        >
+          <div
+            className="box marginBottom2"
+          >
+            <h3
+              className="Heading fontSize1 darkGray alignLeft breakWord"
+            >
+              A Title
+            </h3>
+          </div>
+          <div
+            className="Text fontSize3 darkGray alignLeft breakWord fontWeightNormal"
+          >
+            Insert a clever info callout message here
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="box marginStartAuto smDisplayFlex smMarginEnd4 smPaddingY3"
+    >
+      <div
+        className="box itemsCenter justifyCenter paddingX1 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock"
+      >
+        <button
+          className="button hideOutline tapTransition lg white enabled block accessibilityOutline"
+          disabled={false}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          onTouchCancel={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          tabIndex={0}
+          type="button"
+        >
+          <div
+            className="Text fontSize3 darkGray alignCenter fontWeightBold"
+          >
+            Visit Pinterest
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<Callout /> message + title 1`] = `
 <div
   className="box paddingX6 paddingY6 relative rounding4 smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
diff --git a/packages/gestalt/src/__snapshots__/Upsell.test.js.snap b/packages/gestalt/src/__snapshots__/Upsell.test.js.snap
index 5266379c94..57938e96f6 100644
--- a/packages/gestalt/src/__snapshots__/Upsell.test.js.snap
+++ b/packages/gestalt/src/__snapshots__/Upsell.test.js.snap
@@ -41,7 +41,7 @@ exports[`<Upsell /> Basic Upsell 1`] = `
 </div>
 `;
 
-exports[`<Upsell /> message + title + primaryLink + dismissButton + image 1`] = `
+exports[`<Upsell /> message + title + primaryAction + dismissButton + image 1`] = `
 <div
   className="box paddingX6 paddingY6 relative rounding4 shadow smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
 >
@@ -199,7 +199,7 @@ exports[`<Upsell /> message + title + primaryLink + dismissButton + image 1`] =
 </div>
 `;
 
-exports[`<Upsell /> message + title + primaryLink + dismissButton 1`] = `
+exports[`<Upsell /> message + title + primaryAction + dismissButton 1`] = `
 <div
   className="box paddingX6 paddingY6 relative rounding4 shadow smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
 >
@@ -325,7 +325,7 @@ exports[`<Upsell /> message + title + primaryLink + dismissButton 1`] = `
 </div>
 `;
 
-exports[`<Upsell /> message + title + primaryLink + secondaryLink 1`] = `
+exports[`<Upsell /> message + title + primaryAction + secondaryAction 1`] = `
 <div
   className="box paddingX6 paddingY6 relative rounding4 shadow smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
 >
@@ -436,7 +436,7 @@ exports[`<Upsell /> message + title + primaryLink + secondaryLink 1`] = `
 </div>
 `;
 
-exports[`<Upsell /> message + title + primaryLink 1`] = `
+exports[`<Upsell /> message + title + primaryAction with href 1`] = `
 <div
   className="box paddingX6 paddingY6 relative rounding4 shadow smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
 >
@@ -517,6 +517,81 @@ exports[`<Upsell /> message + title + primaryLink 1`] = `
 </div>
 `;
 
+exports[`<Upsell /> message + title + primaryAction without href 1`] = `
+<div
+  className="box paddingX6 paddingY6 relative rounding4 shadow smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"
+>
+  <div
+    className="box flexWrap smDisplayFlex smMarginBottomN3 smMarginTopN3"
+    style={
+      Object {
+        "width": "100%",
+      }
+    }
+  >
+    <div
+      className="box itemsCenter justifyCenter marginBottom4 smDirectionRow smMarginBottom0 smPaddingY3 xsDirectionColumn xsDisplayFlex"
+    >
+      <div
+        className="box"
+        style={
+          Object {
+            "maxWidth": 648,
+          }
+        }
+      >
+        <div
+          className="box itemsCenter marginBottomAuto marginEnd0 marginStart0 marginTopAuto smDisplayBlock smMarginEnd6 smMarginStart0 xsDirectionColumn xsDisplayFlex"
+        >
+          <div
+            className="box marginBottom2"
+          >
+            <h3
+              className="Heading fontSize1 darkGray alignLeft breakWord"
+            >
+              A Title
+            </h3>
+          </div>
+          <div
+            className="Text fontSize3 darkGray alignLeft breakWord fontWeightNormal"
+          >
+            Insert a clever upsell message here
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="box marginStartAuto smDisplayFlex smMarginEnd4 smPaddingY3"
+    >
+      <div
+        className="box itemsCenter justifyCenter paddingX1 smDisplayFlex smMarginBottomAuto smMarginTopAuto xsDisplayBlock"
+      >
+        <button
+          className="button hideOutline tapTransition lg red enabled block accessibilityOutline"
+          disabled={false}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onMouseDown={[Function]}
+          onMouseUp={[Function]}
+          onTouchCancel={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          tabIndex={0}
+          type="button"
+        >
+          <div
+            className="Text fontSize3 white alignCenter fontWeightBold"
+          >
+            Visit Pinterest
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<Upsell /> message + title 1`] = `
 <div
   className="box paddingX6 paddingY6 relative rounding4 shadow smDirectionRow smPaddingX8 smPaddingY8 xsDirectionColumn xsDisplayFlex"

From 4f36c11137ec15265d4e08b54c65ffa0f1314fea Mon Sep 17 00:00:00 2001
From: Erica Norris <enorris@pinterest.com>
Date: Fri, 18 Dec 2020 11:46:04 -0800
Subject: [PATCH 3/5] add codemod

---
 ...on-replace-primary-secondary-link.input.js | 16 +++++
 ...n-replace-primary-secondary-link.output.js | 16 +++++
 ...on-replace-primary-secondary-link.input.js | 14 +++++
 ...n-replace-primary-secondary-link.output.js | 14 +++++
 ...ion-replace-primary-secondary-link.test.js | 28 +++++++++
 ...ion-replace-primary-secondary-link.test.js | 28 +++++++++
 ...y-action-replace-primary-secondary-link.js | 63 +++++++++++++++++++
 ...y-action-replace-primary-secondary-link.js | 63 +++++++++++++++++++
 packages/gestalt/src/Callout.js               |  1 +
 packages/gestalt/src/Upsell.js                |  1 +
 .../src/__snapshots__/Callout.test.js.snap    | 16 ++---
 .../src/__snapshots__/Upsell.test.js.snap     | 20 +++---
 12 files changed, 262 insertions(+), 18 deletions(-)
 create mode 100644 packages/gestalt-codemods/16.0.0/__testfixtures__/callout-primary-secondary-action-replace-primary-secondary-link.input.js
 create mode 100644 packages/gestalt-codemods/16.0.0/__testfixtures__/callout-primary-secondary-action-replace-primary-secondary-link.output.js
 create mode 100644 packages/gestalt-codemods/16.0.0/__testfixtures__/upsell-primary-secondary-action-replace-primary-secondary-link.input.js
 create mode 100644 packages/gestalt-codemods/16.0.0/__testfixtures__/upsell-primary-secondary-action-replace-primary-secondary-link.output.js
 create mode 100644 packages/gestalt-codemods/16.0.0/__tests__/callout-primary-secondary-action-replace-primary-secondary-link.test.js
 create mode 100644 packages/gestalt-codemods/16.0.0/__tests__/upsell-primary-secondary-action-replace-primary-secondary-link.test.js
 create mode 100644 packages/gestalt-codemods/16.0.0/callout-primary-secondary-action-replace-primary-secondary-link.js
 create mode 100644 packages/gestalt-codemods/16.0.0/upsell-primary-secondary-action-replace-primary-secondary-link.js

diff --git a/packages/gestalt-codemods/16.0.0/__testfixtures__/callout-primary-secondary-action-replace-primary-secondary-link.input.js b/packages/gestalt-codemods/16.0.0/__testfixtures__/callout-primary-secondary-action-replace-primary-secondary-link.input.js
new file mode 100644
index 0000000000..7c0b94efd3
--- /dev/null
+++ b/packages/gestalt-codemods/16.0.0/__testfixtures__/callout-primary-secondary-action-replace-primary-secondary-link.input.js
@@ -0,0 +1,16 @@
+// @flow strict
+import React from 'react';
+import { Callout } from 'gestalt';
+
+export default function TestBox() {
+  return (
+    <Callout
+      message="Insert a clever info callout message here"
+      iconAccessibilityLabel="info"
+      primaryLink={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+      secondaryLink={{ href: 'pinterest.com/help', label: 'Learn more' }}
+      type="info"
+      title="A Title"
+    />
+  );
+}
diff --git a/packages/gestalt-codemods/16.0.0/__testfixtures__/callout-primary-secondary-action-replace-primary-secondary-link.output.js b/packages/gestalt-codemods/16.0.0/__testfixtures__/callout-primary-secondary-action-replace-primary-secondary-link.output.js
new file mode 100644
index 0000000000..69179b519f
--- /dev/null
+++ b/packages/gestalt-codemods/16.0.0/__testfixtures__/callout-primary-secondary-action-replace-primary-secondary-link.output.js
@@ -0,0 +1,16 @@
+// @flow strict
+import React from 'react';
+import { Callout } from 'gestalt';
+
+export default function TestBox() {
+  return (
+    <Callout
+      message="Insert a clever info callout message here"
+      iconAccessibilityLabel="info"
+      primaryAction={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+      secondaryAction={{ href: 'pinterest.com/help', label: 'Learn more' }}
+      type="info"
+      title="A Title"
+    />
+  );
+}
diff --git a/packages/gestalt-codemods/16.0.0/__testfixtures__/upsell-primary-secondary-action-replace-primary-secondary-link.input.js b/packages/gestalt-codemods/16.0.0/__testfixtures__/upsell-primary-secondary-action-replace-primary-secondary-link.input.js
new file mode 100644
index 0000000000..ebaf577756
--- /dev/null
+++ b/packages/gestalt-codemods/16.0.0/__testfixtures__/upsell-primary-secondary-action-replace-primary-secondary-link.input.js
@@ -0,0 +1,14 @@
+// @flow strict
+import React from 'react';
+import { Upsell } from 'gestalt';
+
+export default function TestBox() {
+  return (
+    <Upsell
+        message="Insert a clever upsell message here"
+        primaryLink={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+        secondaryLink={{ href: 'pinterest.com/help', label: 'Learn more' }}
+        title="A Title"
+      />
+  );
+}
diff --git a/packages/gestalt-codemods/16.0.0/__testfixtures__/upsell-primary-secondary-action-replace-primary-secondary-link.output.js b/packages/gestalt-codemods/16.0.0/__testfixtures__/upsell-primary-secondary-action-replace-primary-secondary-link.output.js
new file mode 100644
index 0000000000..c6fb8cb85c
--- /dev/null
+++ b/packages/gestalt-codemods/16.0.0/__testfixtures__/upsell-primary-secondary-action-replace-primary-secondary-link.output.js
@@ -0,0 +1,14 @@
+// @flow strict
+import React from 'react';
+import { Upsell } from 'gestalt';
+
+export default function TestBox() {
+  return (
+    <Upsell
+        message="Insert a clever upsell message here"
+        primaryAction={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+        secondaryAction={{ href: 'pinterest.com/help', label: 'Learn more' }}
+        title="A Title"
+      />
+  );
+}
diff --git a/packages/gestalt-codemods/16.0.0/__tests__/callout-primary-secondary-action-replace-primary-secondary-link.test.js b/packages/gestalt-codemods/16.0.0/__tests__/callout-primary-secondary-action-replace-primary-secondary-link.test.js
new file mode 100644
index 0000000000..5c61164e5f
--- /dev/null
+++ b/packages/gestalt-codemods/16.0.0/__tests__/callout-primary-secondary-action-replace-primary-secondary-link.test.js
@@ -0,0 +1,28 @@
+import { defineTest } from 'jscodeshift/dist/testUtils.js';
+
+jest.mock(
+  '../callout-primary-secondary-action-replace-primary-secondary-link',
+  () => {
+    return Object.assign(
+      jest.requireActual(
+        '../callout-primary-secondary-action-replace-primary-secondary-link'
+      ),
+      {
+        parser: 'flow',
+      }
+    );
+  }
+);
+
+describe('callout-primary-secondary-action-replace-primary-secondary-link', () => {
+  ['callout-primary-secondary-action-replace-primary-secondary-link'].forEach(
+    (test) => {
+      defineTest(
+        __dirname,
+        'callout-primary-secondary-action-replace-primary-secondary-link',
+        { quote: 'single' },
+        test
+      );
+    }
+  );
+});
diff --git a/packages/gestalt-codemods/16.0.0/__tests__/upsell-primary-secondary-action-replace-primary-secondary-link.test.js b/packages/gestalt-codemods/16.0.0/__tests__/upsell-primary-secondary-action-replace-primary-secondary-link.test.js
new file mode 100644
index 0000000000..956ce2adf1
--- /dev/null
+++ b/packages/gestalt-codemods/16.0.0/__tests__/upsell-primary-secondary-action-replace-primary-secondary-link.test.js
@@ -0,0 +1,28 @@
+import { defineTest } from 'jscodeshift/dist/testUtils.js';
+
+jest.mock(
+  '../upsell-primary-secondary-action-replace-primary-secondary-link',
+  () => {
+    return Object.assign(
+      jest.requireActual(
+        '../upsell-primary-secondary-action-replace-primary-secondary-link'
+      ),
+      {
+        parser: 'flow',
+      }
+    );
+  }
+);
+
+describe('upsell-primary-secondary-action-replace-primary-secondary-link', () => {
+  ['upsell-primary-secondary-action-replace-primary-secondary-link'].forEach(
+    (test) => {
+      defineTest(
+        __dirname,
+        'upsell-primary-secondary-action-replace-primary-secondary-link',
+        { quote: 'single' },
+        test
+      );
+    }
+  );
+});
diff --git a/packages/gestalt-codemods/16.0.0/callout-primary-secondary-action-replace-primary-secondary-link.js b/packages/gestalt-codemods/16.0.0/callout-primary-secondary-action-replace-primary-secondary-link.js
new file mode 100644
index 0000000000..94671066e8
--- /dev/null
+++ b/packages/gestalt-codemods/16.0.0/callout-primary-secondary-action-replace-primary-secondary-link.js
@@ -0,0 +1,63 @@
+/*
+ * Converts
+ *  <Callout primaryLink={...} secondaryLink={...} /> to <Callout primaryAction={...} secondaryAction={...} />
+ */
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const src = j(file.source);
+  let localIdentifierName;
+  let fileHasModifications = false;
+
+  src.find(j.ImportDeclaration).forEach((path) => {
+    const decl = path.node;
+    if (decl.source.value !== 'gestalt') {
+      return null;
+    }
+
+    localIdentifierName = decl.specifiers
+      .filter((node) => node.imported.name === 'Callout')
+      .map((node) => node.local.name);
+    return null;
+  });
+
+  if (!localIdentifierName) {
+    return null;
+  }
+
+  const transform = src
+    .find(j.JSXElement)
+    .forEach((jsxElement) => {
+      const { node } = jsxElement;
+
+      if (!localIdentifierName.includes(node.openingElement.name.name)) {
+        return null;
+      }
+
+      const attrs = node.openingElement.attributes;
+
+      const newAppendAttr = [];
+      const newAttrs = attrs
+        .map((attr) => {
+          if (attr?.name?.name && attr.name.name === 'primaryLink') {
+            const renamedAttr = { ...attr };
+            renamedAttr.name.name = 'primaryAction';
+            return renamedAttr;
+          }
+          if (attr?.name?.name && attr.name.name === 'secondaryLink') {
+            const renamedAttr = { ...attr };
+            renamedAttr.name.name = 'secondaryAction';
+            return renamedAttr;
+          }
+          return attr;
+        })
+        .filter(Boolean);
+
+      fileHasModifications = true;
+      node.openingElement.attributes = [...newAppendAttr, ...newAttrs];
+      return null;
+    })
+    .toSource();
+
+  return fileHasModifications ? transform : null;
+}
diff --git a/packages/gestalt-codemods/16.0.0/upsell-primary-secondary-action-replace-primary-secondary-link.js b/packages/gestalt-codemods/16.0.0/upsell-primary-secondary-action-replace-primary-secondary-link.js
new file mode 100644
index 0000000000..4a4255de88
--- /dev/null
+++ b/packages/gestalt-codemods/16.0.0/upsell-primary-secondary-action-replace-primary-secondary-link.js
@@ -0,0 +1,63 @@
+/*
+ * Converts
+ *  <Upsell primaryLink={...} secondaryLink={...} /> to <Upsell primaryAction={...} secondaryAction={...} />
+ */
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const src = j(file.source);
+  let localIdentifierName;
+  let fileHasModifications = false;
+
+  src.find(j.ImportDeclaration).forEach((path) => {
+    const decl = path.node;
+    if (decl.source.value !== 'gestalt') {
+      return null;
+    }
+
+    localIdentifierName = decl.specifiers
+      .filter((node) => node.imported.name === 'Upsell')
+      .map((node) => node.local.name);
+    return null;
+  });
+
+  if (!localIdentifierName) {
+    return null;
+  }
+
+  const transform = src
+    .find(j.JSXElement)
+    .forEach((jsxElement) => {
+      const { node } = jsxElement;
+
+      if (!localIdentifierName.includes(node.openingElement.name.name)) {
+        return null;
+      }
+
+      const attrs = node.openingElement.attributes;
+
+      const newAppendAttr = [];
+      const newAttrs = attrs
+        .map((attr) => {
+          if (attr?.name?.name && attr.name.name === 'primaryLink') {
+            const renamedAttr = { ...attr };
+            renamedAttr.name.name = 'primaryAction';
+            return renamedAttr;
+          }
+          if (attr?.name?.name && attr.name.name === 'secondaryLink') {
+            const renamedAttr = { ...attr };
+            renamedAttr.name.name = 'secondaryAction';
+            return renamedAttr;
+          }
+          return attr;
+        })
+        .filter(Boolean);
+
+      fileHasModifications = true;
+      node.openingElement.attributes = [...newAppendAttr, ...newAttrs];
+      return null;
+    })
+    .toSource();
+
+  return fileHasModifications ? transform : null;
+}
diff --git a/packages/gestalt/src/Callout.js b/packages/gestalt/src/Callout.js
index 2e894218bd..4585a7e797 100644
--- a/packages/gestalt/src/Callout.js
+++ b/packages/gestalt/src/Callout.js
@@ -92,6 +92,7 @@ const CalloutAction = ({
           onClick={onClick}
           role="link"
           size="lg"
+          target="blank"
           text={label}
         />
       ) : (
diff --git a/packages/gestalt/src/Upsell.js b/packages/gestalt/src/Upsell.js
index 988084edb8..913747b4d0 100644
--- a/packages/gestalt/src/Upsell.js
+++ b/packages/gestalt/src/Upsell.js
@@ -76,6 +76,7 @@ const UpsellAction = ({
           onClick={onClick}
           role="link"
           size="lg"
+          target="blank"
           text={label}
         />
       ) : (
diff --git a/packages/gestalt/src/__snapshots__/Callout.test.js.snap b/packages/gestalt/src/__snapshots__/Callout.test.js.snap
index 685f2bae80..b03643cf7b 100644
--- a/packages/gestalt/src/__snapshots__/Callout.test.js.snap
+++ b/packages/gestalt/src/__snapshots__/Callout.test.js.snap
@@ -276,9 +276,9 @@ exports[`<Callout /> message + title + primaryAction + dismissButton 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
-          rel=""
+          rel="noopener noreferrer"
           tabIndex={0}
-          target={null}
+          target="_blank"
         >
           <div
             className="Text fontSize3 darkGray alignCenter fontWeightBold"
@@ -424,9 +424,9 @@ exports[`<Callout /> message + title + primaryAction + secondaryAction 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
-          rel=""
+          rel="noopener noreferrer"
           tabIndex={0}
-          target={null}
+          target="_blank"
         >
           <div
             className="Text fontSize3 darkGray alignCenter fontWeightBold"
@@ -454,9 +454,9 @@ exports[`<Callout /> message + title + primaryAction + secondaryAction 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
-          rel=""
+          rel="noopener noreferrer"
           tabIndex={0}
-          target={null}
+          target="_blank"
         >
           <div
             className="Text fontSize3 darkGray alignCenter fontWeightBold"
@@ -557,9 +557,9 @@ exports[`<Callout /> message + title + primaryAction with href 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
-          rel=""
+          rel="noopener noreferrer"
           tabIndex={0}
-          target={null}
+          target="_blank"
         >
           <div
             className="Text fontSize3 darkGray alignCenter fontWeightBold"
diff --git a/packages/gestalt/src/__snapshots__/Upsell.test.js.snap b/packages/gestalt/src/__snapshots__/Upsell.test.js.snap
index 57938e96f6..5d136d60ec 100644
--- a/packages/gestalt/src/__snapshots__/Upsell.test.js.snap
+++ b/packages/gestalt/src/__snapshots__/Upsell.test.js.snap
@@ -138,9 +138,9 @@ exports[`<Upsell /> message + title + primaryAction + dismissButton + image 1`]
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
-          rel=""
+          rel="noopener noreferrer"
           tabIndex={0}
-          target={null}
+          target="_blank"
         >
           <div
             className="Text fontSize3 white alignCenter fontWeightBold"
@@ -264,9 +264,9 @@ exports[`<Upsell /> message + title + primaryAction + dismissButton 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
-          rel=""
+          rel="noopener noreferrer"
           tabIndex={0}
-          target={null}
+          target="_blank"
         >
           <div
             className="Text fontSize3 white alignCenter fontWeightBold"
@@ -390,9 +390,9 @@ exports[`<Upsell /> message + title + primaryAction + secondaryAction 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
-          rel=""
+          rel="noopener noreferrer"
           tabIndex={0}
-          target={null}
+          target="_blank"
         >
           <div
             className="Text fontSize3 darkGray alignCenter fontWeightBold"
@@ -420,9 +420,9 @@ exports[`<Upsell /> message + title + primaryAction + secondaryAction 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
-          rel=""
+          rel="noopener noreferrer"
           tabIndex={0}
-          target={null}
+          target="_blank"
         >
           <div
             className="Text fontSize3 white alignCenter fontWeightBold"
@@ -501,9 +501,9 @@ exports[`<Upsell /> message + title + primaryAction with href 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
-          rel=""
+          rel="noopener noreferrer"
           tabIndex={0}
-          target={null}
+          target="_blank"
         >
           <div
             className="Text fontSize3 white alignCenter fontWeightBold"

From 32f7e138da029a4ce19cab1a4931bd683c0b5662 Mon Sep 17 00:00:00 2001
From: Erica Norris <enorris@pinterest.com>
Date: Fri, 18 Dec 2020 12:03:58 -0800
Subject: [PATCH 4/5] combine callout and upsell codemods to single function

---
 ...on-replace-primary-secondary-link.input.js | 16 -----
 ...n-replace-primary-secondary-link.output.js | 16 -----
 ...on-replace-primary-secondary-link.input.js | 24 +++++++
 ...n-replace-primary-secondary-link.output.js | 24 +++++++
 ...on-replace-primary-secondary-link.input.js | 14 -----
 ...n-replace-primary-secondary-link.output.js | 14 -----
 ...ion-replace-primary-secondary-link.test.js | 28 ---------
 ...ion-replace-primary-secondary-link.test.js | 28 +++++++++
 ...ion-replace-primary-secondary-link.test.js | 28 ---------
 ...-action-replace-primary-secondary-link.js} |  3 +-
 ...y-action-replace-primary-secondary-link.js | 63 -------------------
 11 files changed, 78 insertions(+), 180 deletions(-)
 delete mode 100644 packages/gestalt-codemods/16.0.0/__testfixtures__/callout-primary-secondary-action-replace-primary-secondary-link.input.js
 delete mode 100644 packages/gestalt-codemods/16.0.0/__testfixtures__/callout-primary-secondary-action-replace-primary-secondary-link.output.js
 create mode 100644 packages/gestalt-codemods/16.0.0/__testfixtures__/callout-upsell-primary-secondary-action-replace-primary-secondary-link.input.js
 create mode 100644 packages/gestalt-codemods/16.0.0/__testfixtures__/callout-upsell-primary-secondary-action-replace-primary-secondary-link.output.js
 delete mode 100644 packages/gestalt-codemods/16.0.0/__testfixtures__/upsell-primary-secondary-action-replace-primary-secondary-link.input.js
 delete mode 100644 packages/gestalt-codemods/16.0.0/__testfixtures__/upsell-primary-secondary-action-replace-primary-secondary-link.output.js
 delete mode 100644 packages/gestalt-codemods/16.0.0/__tests__/callout-primary-secondary-action-replace-primary-secondary-link.test.js
 create mode 100644 packages/gestalt-codemods/16.0.0/__tests__/callout-upsell-primary-secondary-action-replace-primary-secondary-link.test.js
 delete mode 100644 packages/gestalt-codemods/16.0.0/__tests__/upsell-primary-secondary-action-replace-primary-secondary-link.test.js
 rename packages/gestalt-codemods/16.0.0/{callout-primary-secondary-action-replace-primary-secondary-link.js => callout-upsell-primary-secondary-action-replace-primary-secondary-link.js} (89%)
 delete mode 100644 packages/gestalt-codemods/16.0.0/upsell-primary-secondary-action-replace-primary-secondary-link.js

diff --git a/packages/gestalt-codemods/16.0.0/__testfixtures__/callout-primary-secondary-action-replace-primary-secondary-link.input.js b/packages/gestalt-codemods/16.0.0/__testfixtures__/callout-primary-secondary-action-replace-primary-secondary-link.input.js
deleted file mode 100644
index 7c0b94efd3..0000000000
--- a/packages/gestalt-codemods/16.0.0/__testfixtures__/callout-primary-secondary-action-replace-primary-secondary-link.input.js
+++ /dev/null
@@ -1,16 +0,0 @@
-// @flow strict
-import React from 'react';
-import { Callout } from 'gestalt';
-
-export default function TestBox() {
-  return (
-    <Callout
-      message="Insert a clever info callout message here"
-      iconAccessibilityLabel="info"
-      primaryLink={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
-      secondaryLink={{ href: 'pinterest.com/help', label: 'Learn more' }}
-      type="info"
-      title="A Title"
-    />
-  );
-}
diff --git a/packages/gestalt-codemods/16.0.0/__testfixtures__/callout-primary-secondary-action-replace-primary-secondary-link.output.js b/packages/gestalt-codemods/16.0.0/__testfixtures__/callout-primary-secondary-action-replace-primary-secondary-link.output.js
deleted file mode 100644
index 69179b519f..0000000000
--- a/packages/gestalt-codemods/16.0.0/__testfixtures__/callout-primary-secondary-action-replace-primary-secondary-link.output.js
+++ /dev/null
@@ -1,16 +0,0 @@
-// @flow strict
-import React from 'react';
-import { Callout } from 'gestalt';
-
-export default function TestBox() {
-  return (
-    <Callout
-      message="Insert a clever info callout message here"
-      iconAccessibilityLabel="info"
-      primaryAction={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
-      secondaryAction={{ href: 'pinterest.com/help', label: 'Learn more' }}
-      type="info"
-      title="A Title"
-    />
-  );
-}
diff --git a/packages/gestalt-codemods/16.0.0/__testfixtures__/callout-upsell-primary-secondary-action-replace-primary-secondary-link.input.js b/packages/gestalt-codemods/16.0.0/__testfixtures__/callout-upsell-primary-secondary-action-replace-primary-secondary-link.input.js
new file mode 100644
index 0000000000..e00d059d52
--- /dev/null
+++ b/packages/gestalt-codemods/16.0.0/__testfixtures__/callout-upsell-primary-secondary-action-replace-primary-secondary-link.input.js
@@ -0,0 +1,24 @@
+// @flow strict
+import React from 'react';
+import { Box, Callout, Upsell } from 'gestalt';
+
+export default function TestBox() {
+  return (
+    <Box>
+      <Callout
+        message="Insert a clever info callout message here"
+        iconAccessibilityLabel="info"
+        primaryLink={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+        secondaryLink={{ href: 'pinterest.com/help', label: 'Learn more' }}
+        type="info"
+        title="A Title"
+      />
+      <Upsell
+        message="Insert a clever upsell message here"
+        primaryLink={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+        secondaryLink={{ href: 'pinterest.com/help', label: 'Learn more' }}
+        title="A Title"
+      />
+    </Box>
+  );
+}
diff --git a/packages/gestalt-codemods/16.0.0/__testfixtures__/callout-upsell-primary-secondary-action-replace-primary-secondary-link.output.js b/packages/gestalt-codemods/16.0.0/__testfixtures__/callout-upsell-primary-secondary-action-replace-primary-secondary-link.output.js
new file mode 100644
index 0000000000..7dd130e5a8
--- /dev/null
+++ b/packages/gestalt-codemods/16.0.0/__testfixtures__/callout-upsell-primary-secondary-action-replace-primary-secondary-link.output.js
@@ -0,0 +1,24 @@
+// @flow strict
+import React from 'react';
+import { Box, Callout, Upsell } from 'gestalt';
+
+export default function TestBox() {
+  return (
+    <Box>
+      <Callout
+        message="Insert a clever info callout message here"
+        iconAccessibilityLabel="info"
+        primaryAction={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+        secondaryAction={{ href: 'pinterest.com/help', label: 'Learn more' }}
+        type="info"
+        title="A Title"
+      />
+      <Upsell
+        message="Insert a clever upsell message here"
+        primaryAction={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
+        secondaryAction={{ href: 'pinterest.com/help', label: 'Learn more' }}
+        title="A Title"
+      />
+    </Box>
+  );
+}
diff --git a/packages/gestalt-codemods/16.0.0/__testfixtures__/upsell-primary-secondary-action-replace-primary-secondary-link.input.js b/packages/gestalt-codemods/16.0.0/__testfixtures__/upsell-primary-secondary-action-replace-primary-secondary-link.input.js
deleted file mode 100644
index ebaf577756..0000000000
--- a/packages/gestalt-codemods/16.0.0/__testfixtures__/upsell-primary-secondary-action-replace-primary-secondary-link.input.js
+++ /dev/null
@@ -1,14 +0,0 @@
-// @flow strict
-import React from 'react';
-import { Upsell } from 'gestalt';
-
-export default function TestBox() {
-  return (
-    <Upsell
-        message="Insert a clever upsell message here"
-        primaryLink={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
-        secondaryLink={{ href: 'pinterest.com/help', label: 'Learn more' }}
-        title="A Title"
-      />
-  );
-}
diff --git a/packages/gestalt-codemods/16.0.0/__testfixtures__/upsell-primary-secondary-action-replace-primary-secondary-link.output.js b/packages/gestalt-codemods/16.0.0/__testfixtures__/upsell-primary-secondary-action-replace-primary-secondary-link.output.js
deleted file mode 100644
index c6fb8cb85c..0000000000
--- a/packages/gestalt-codemods/16.0.0/__testfixtures__/upsell-primary-secondary-action-replace-primary-secondary-link.output.js
+++ /dev/null
@@ -1,14 +0,0 @@
-// @flow strict
-import React from 'react';
-import { Upsell } from 'gestalt';
-
-export default function TestBox() {
-  return (
-    <Upsell
-        message="Insert a clever upsell message here"
-        primaryAction={{ href: 'pinterest.com', label: 'Visit Pinterest' }}
-        secondaryAction={{ href: 'pinterest.com/help', label: 'Learn more' }}
-        title="A Title"
-      />
-  );
-}
diff --git a/packages/gestalt-codemods/16.0.0/__tests__/callout-primary-secondary-action-replace-primary-secondary-link.test.js b/packages/gestalt-codemods/16.0.0/__tests__/callout-primary-secondary-action-replace-primary-secondary-link.test.js
deleted file mode 100644
index 5c61164e5f..0000000000
--- a/packages/gestalt-codemods/16.0.0/__tests__/callout-primary-secondary-action-replace-primary-secondary-link.test.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { defineTest } from 'jscodeshift/dist/testUtils.js';
-
-jest.mock(
-  '../callout-primary-secondary-action-replace-primary-secondary-link',
-  () => {
-    return Object.assign(
-      jest.requireActual(
-        '../callout-primary-secondary-action-replace-primary-secondary-link'
-      ),
-      {
-        parser: 'flow',
-      }
-    );
-  }
-);
-
-describe('callout-primary-secondary-action-replace-primary-secondary-link', () => {
-  ['callout-primary-secondary-action-replace-primary-secondary-link'].forEach(
-    (test) => {
-      defineTest(
-        __dirname,
-        'callout-primary-secondary-action-replace-primary-secondary-link',
-        { quote: 'single' },
-        test
-      );
-    }
-  );
-});
diff --git a/packages/gestalt-codemods/16.0.0/__tests__/callout-upsell-primary-secondary-action-replace-primary-secondary-link.test.js b/packages/gestalt-codemods/16.0.0/__tests__/callout-upsell-primary-secondary-action-replace-primary-secondary-link.test.js
new file mode 100644
index 0000000000..59ba41950b
--- /dev/null
+++ b/packages/gestalt-codemods/16.0.0/__tests__/callout-upsell-primary-secondary-action-replace-primary-secondary-link.test.js
@@ -0,0 +1,28 @@
+import { defineTest } from 'jscodeshift/dist/testUtils.js';
+
+jest.mock(
+  '../callout-upsell-primary-secondary-action-replace-primary-secondary-link',
+  () => {
+    return Object.assign(
+      jest.requireActual(
+        '../callout-upsell-primary-secondary-action-replace-primary-secondary-link'
+      ),
+      {
+        parser: 'flow',
+      }
+    );
+  }
+);
+
+describe('callout-upsell-primary-secondary-action-replace-primary-secondary-link', () => {
+  [
+    'callout-upsell-primary-secondary-action-replace-primary-secondary-link',
+  ].forEach((test) => {
+    defineTest(
+      __dirname,
+      'callout-upsell-primary-secondary-action-replace-primary-secondary-link',
+      { quote: 'single' },
+      test
+    );
+  });
+});
diff --git a/packages/gestalt-codemods/16.0.0/__tests__/upsell-primary-secondary-action-replace-primary-secondary-link.test.js b/packages/gestalt-codemods/16.0.0/__tests__/upsell-primary-secondary-action-replace-primary-secondary-link.test.js
deleted file mode 100644
index 956ce2adf1..0000000000
--- a/packages/gestalt-codemods/16.0.0/__tests__/upsell-primary-secondary-action-replace-primary-secondary-link.test.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { defineTest } from 'jscodeshift/dist/testUtils.js';
-
-jest.mock(
-  '../upsell-primary-secondary-action-replace-primary-secondary-link',
-  () => {
-    return Object.assign(
-      jest.requireActual(
-        '../upsell-primary-secondary-action-replace-primary-secondary-link'
-      ),
-      {
-        parser: 'flow',
-      }
-    );
-  }
-);
-
-describe('upsell-primary-secondary-action-replace-primary-secondary-link', () => {
-  ['upsell-primary-secondary-action-replace-primary-secondary-link'].forEach(
-    (test) => {
-      defineTest(
-        __dirname,
-        'upsell-primary-secondary-action-replace-primary-secondary-link',
-        { quote: 'single' },
-        test
-      );
-    }
-  );
-});
diff --git a/packages/gestalt-codemods/16.0.0/callout-primary-secondary-action-replace-primary-secondary-link.js b/packages/gestalt-codemods/16.0.0/callout-upsell-primary-secondary-action-replace-primary-secondary-link.js
similarity index 89%
rename from packages/gestalt-codemods/16.0.0/callout-primary-secondary-action-replace-primary-secondary-link.js
rename to packages/gestalt-codemods/16.0.0/callout-upsell-primary-secondary-action-replace-primary-secondary-link.js
index 94671066e8..0aabeab483 100644
--- a/packages/gestalt-codemods/16.0.0/callout-primary-secondary-action-replace-primary-secondary-link.js
+++ b/packages/gestalt-codemods/16.0.0/callout-upsell-primary-secondary-action-replace-primary-secondary-link.js
@@ -1,6 +1,7 @@
 /*
  * Converts
  *  <Callout primaryLink={...} secondaryLink={...} /> to <Callout primaryAction={...} secondaryAction={...} />
+ *  <Upsell primaryLink={...} secondaryLink={...} /> to <Upsell primaryAction={...} secondaryAction={...} />
  */
 
 export default function transformer(file, api) {
@@ -16,7 +17,7 @@ export default function transformer(file, api) {
     }
 
     localIdentifierName = decl.specifiers
-      .filter((node) => node.imported.name === 'Callout')
+      .filter((node) => ['Upsell', 'Callout'].includes(node.imported.name))
       .map((node) => node.local.name);
     return null;
   });
diff --git a/packages/gestalt-codemods/16.0.0/upsell-primary-secondary-action-replace-primary-secondary-link.js b/packages/gestalt-codemods/16.0.0/upsell-primary-secondary-action-replace-primary-secondary-link.js
deleted file mode 100644
index 4a4255de88..0000000000
--- a/packages/gestalt-codemods/16.0.0/upsell-primary-secondary-action-replace-primary-secondary-link.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- * Converts
- *  <Upsell primaryLink={...} secondaryLink={...} /> to <Upsell primaryAction={...} secondaryAction={...} />
- */
-
-export default function transformer(file, api) {
-  const j = api.jscodeshift;
-  const src = j(file.source);
-  let localIdentifierName;
-  let fileHasModifications = false;
-
-  src.find(j.ImportDeclaration).forEach((path) => {
-    const decl = path.node;
-    if (decl.source.value !== 'gestalt') {
-      return null;
-    }
-
-    localIdentifierName = decl.specifiers
-      .filter((node) => node.imported.name === 'Upsell')
-      .map((node) => node.local.name);
-    return null;
-  });
-
-  if (!localIdentifierName) {
-    return null;
-  }
-
-  const transform = src
-    .find(j.JSXElement)
-    .forEach((jsxElement) => {
-      const { node } = jsxElement;
-
-      if (!localIdentifierName.includes(node.openingElement.name.name)) {
-        return null;
-      }
-
-      const attrs = node.openingElement.attributes;
-
-      const newAppendAttr = [];
-      const newAttrs = attrs
-        .map((attr) => {
-          if (attr?.name?.name && attr.name.name === 'primaryLink') {
-            const renamedAttr = { ...attr };
-            renamedAttr.name.name = 'primaryAction';
-            return renamedAttr;
-          }
-          if (attr?.name?.name && attr.name.name === 'secondaryLink') {
-            const renamedAttr = { ...attr };
-            renamedAttr.name.name = 'secondaryAction';
-            return renamedAttr;
-          }
-          return attr;
-        })
-        .filter(Boolean);
-
-      fileHasModifications = true;
-      node.openingElement.attributes = [...newAppendAttr, ...newAttrs];
-      return null;
-    })
-    .toSource();
-
-  return fileHasModifications ? transform : null;
-}

From 4ab68e0d9b8cc0bd04dc9c705a1d8e6e451700e5 Mon Sep 17 00:00:00 2001
From: Erica Norris <enorris@pinterest.com>
Date: Fri, 18 Dec 2020 12:23:23 -0800
Subject: [PATCH 5/5] removed target so behavior matches current behavior

---
 packages/gestalt/src/Callout.js               |  1 -
 packages/gestalt/src/Upsell.js                |  1 -
 .../src/__snapshots__/Callout.test.js.snap    | 16 +++++++--------
 .../src/__snapshots__/Upsell.test.js.snap     | 20 +++++++++----------
 4 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/packages/gestalt/src/Callout.js b/packages/gestalt/src/Callout.js
index 4585a7e797..2e894218bd 100644
--- a/packages/gestalt/src/Callout.js
+++ b/packages/gestalt/src/Callout.js
@@ -92,7 +92,6 @@ const CalloutAction = ({
           onClick={onClick}
           role="link"
           size="lg"
-          target="blank"
           text={label}
         />
       ) : (
diff --git a/packages/gestalt/src/Upsell.js b/packages/gestalt/src/Upsell.js
index 913747b4d0..988084edb8 100644
--- a/packages/gestalt/src/Upsell.js
+++ b/packages/gestalt/src/Upsell.js
@@ -76,7 +76,6 @@ const UpsellAction = ({
           onClick={onClick}
           role="link"
           size="lg"
-          target="blank"
           text={label}
         />
       ) : (
diff --git a/packages/gestalt/src/__snapshots__/Callout.test.js.snap b/packages/gestalt/src/__snapshots__/Callout.test.js.snap
index b03643cf7b..685f2bae80 100644
--- a/packages/gestalt/src/__snapshots__/Callout.test.js.snap
+++ b/packages/gestalt/src/__snapshots__/Callout.test.js.snap
@@ -276,9 +276,9 @@ exports[`<Callout /> message + title + primaryAction + dismissButton 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
-          rel="noopener noreferrer"
+          rel=""
           tabIndex={0}
-          target="_blank"
+          target={null}
         >
           <div
             className="Text fontSize3 darkGray alignCenter fontWeightBold"
@@ -424,9 +424,9 @@ exports[`<Callout /> message + title + primaryAction + secondaryAction 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
-          rel="noopener noreferrer"
+          rel=""
           tabIndex={0}
-          target="_blank"
+          target={null}
         >
           <div
             className="Text fontSize3 darkGray alignCenter fontWeightBold"
@@ -454,9 +454,9 @@ exports[`<Callout /> message + title + primaryAction + secondaryAction 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
-          rel="noopener noreferrer"
+          rel=""
           tabIndex={0}
-          target="_blank"
+          target={null}
         >
           <div
             className="Text fontSize3 darkGray alignCenter fontWeightBold"
@@ -557,9 +557,9 @@ exports[`<Callout /> message + title + primaryAction with href 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
-          rel="noopener noreferrer"
+          rel=""
           tabIndex={0}
-          target="_blank"
+          target={null}
         >
           <div
             className="Text fontSize3 darkGray alignCenter fontWeightBold"
diff --git a/packages/gestalt/src/__snapshots__/Upsell.test.js.snap b/packages/gestalt/src/__snapshots__/Upsell.test.js.snap
index 5d136d60ec..57938e96f6 100644
--- a/packages/gestalt/src/__snapshots__/Upsell.test.js.snap
+++ b/packages/gestalt/src/__snapshots__/Upsell.test.js.snap
@@ -138,9 +138,9 @@ exports[`<Upsell /> message + title + primaryAction + dismissButton + image 1`]
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
-          rel="noopener noreferrer"
+          rel=""
           tabIndex={0}
-          target="_blank"
+          target={null}
         >
           <div
             className="Text fontSize3 white alignCenter fontWeightBold"
@@ -264,9 +264,9 @@ exports[`<Upsell /> message + title + primaryAction + dismissButton 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
-          rel="noopener noreferrer"
+          rel=""
           tabIndex={0}
-          target="_blank"
+          target={null}
         >
           <div
             className="Text fontSize3 white alignCenter fontWeightBold"
@@ -390,9 +390,9 @@ exports[`<Upsell /> message + title + primaryAction + secondaryAction 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
-          rel="noopener noreferrer"
+          rel=""
           tabIndex={0}
-          target="_blank"
+          target={null}
         >
           <div
             className="Text fontSize3 darkGray alignCenter fontWeightBold"
@@ -420,9 +420,9 @@ exports[`<Upsell /> message + title + primaryAction + secondaryAction 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
-          rel="noopener noreferrer"
+          rel=""
           tabIndex={0}
-          target="_blank"
+          target={null}
         >
           <div
             className="Text fontSize3 white alignCenter fontWeightBold"
@@ -501,9 +501,9 @@ exports[`<Upsell /> message + title + primaryAction with href 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
-          rel="noopener noreferrer"
+          rel=""
           tabIndex={0}
-          target="_blank"
+          target={null}
         >
           <div
             className="Text fontSize3 white alignCenter fontWeightBold"