[CalloutCard] add Iconable actions & allows Button variant for secondary action (#11530)

Trying to make sure we can get this design going, like we already have
for [Search and
Discovery](https://github.com/Shopify/discovery-app/blob/main/app/ui/components/FeedbackCard/FeedbackCard.tsx)
without needing to build custom components.

We'll need that now on Email too and if this is approved, we could just
have standard code everywhere for collecting feedback.

<img width="749" alt="Screenshot 2024-01-30 at 2 25 36 PM"
src="https://github.com/Shopify/polaris/assets/642737/e3629130-a6af-49d9-8b67-5da642b4c4b0">


### WHY are these changes introduced and WHAT is this pull request
doing?

Currently we don't allow `primaryAction` to be null, which would allow
us to achieve the same results by using `content`. I figured we could
just enhance the API slightly making it backwards compatible and
allowing more customization.

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [x] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

---------

Co-authored-by: Kyle Durand <[email protected]>

Author: arthurgouveia

.changeset/popular-birds-refuse.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+---
+
+[CalloutCard] Added IconableAction to primaryAction and secondaryAction
+[CalloutCard] Added variant prop to secondaryAction

polaris-react/src/components/CalloutCard/CalloutCard.stories.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import type {ComponentMeta} from '@storybook/react';
-import {Badge, CalloutCard, Text} from '@shopify/polaris';
+import type {Meta} from '@storybook/react';
+import {Badge, CalloutCard} from '@shopify/polaris';
+import {SmileyHappyIcon, SmileySadIcon} from '@shopify/polaris-icons';
 
 export default {
   component: CalloutCard,
-} as ComponentMeta<typeof CalloutCard>;
+} as Meta<typeof CalloutCard>;
 
 export function Default() {
   return (
@@ -65,3 +66,23 @@ export function WithCustomTitle() {
     </CalloutCard>
   );
 }
+
+export function WithIconableActions() {
+  return (
+    <CalloutCard
+      title="Tell us how we're doing"
+      illustration="https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg"
+      primaryAction={{
+        content: 'Good',
+        icon: SmileyHappyIcon,
+      }}
+      secondaryAction={{
+        content: 'Bad',
+        icon: SmileySadIcon,
+        variant: 'secondary',
+      }}
+    >
+      <p>How do you like our app?</p>
+    </CalloutCard>
+  );
+}

polaris-react/src/components/CalloutCard/CalloutCard.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import {XSmallIcon} from '@shopify/polaris-icons';
 
 import {classNames} from '../../utilities/css';
-import type {Action} from '../../types';
+import type {IconableAction} from '../../types';
 // eslint-disable-next-line import/no-deprecated
 import {LegacyCard} from '../LegacyCard';
-// eslint-disable-next-line import/no-deprecated
-import {TextContainer} from '../TextContainer';
+import {BlockStack} from '../BlockStack';
 import {ButtonGroup} from '../ButtonGroup';
 import {Button, buttonFrom} from '../Button';
+import type {ButtonProps} from '../Button';
 import {Text} from '../Text';
 import {Image} from '../Image';
 
@@ -22,9 +22,9 @@ export interface CalloutCardProps {
   /** URL to the card illustration */
   illustration: string;
   /** Primary action for the card */
-  primaryAction: Action;
+  primaryAction: IconableAction;
   /** Secondary action for the card */
-  secondaryAction?: Action;
+  secondaryAction?: IconableAction & Pick<ButtonProps, 'variant'>;
   /** Callback when banner is dismissed */
   onDismiss?(): void;
 }
@@ -40,7 +40,7 @@ export function CalloutCard({
   const primaryActionMarkup = buttonFrom(primaryAction);
   const secondaryActionMarkup = secondaryAction
     ? buttonFrom(secondaryAction, {
-        variant: 'tertiary',
+        variant: secondaryAction.variant ?? 'tertiary',
       })
     : null;
 
@@ -86,7 +86,7 @@ export function CalloutCard({
                   {title}
                 </Text>
               </div>
-              <TextContainer>{children}</TextContainer>
+              <BlockStack>{children}</BlockStack>
               <div className={styles.Buttons}>{buttonMarkup}</div>
             </div>