Code Coverage
 
Lines
Functions and Methods
Classes and Traits
Total
0.00%
0 / 80
0.00%
0 / 1
 CRAP
n/a
0 / 0
wpcom_display_callout
0.00%
0 / 80
0.00%
0 / 1
 6
1<?php
2/**
3 * Utils to display information callouts to users.
4 *
5 * @package automattic/jetpack-mu-wpcom
6 */
7
8/**
9 * Displays a callout box in wp-admin.
10 *
11 * @param string $icon The Dashicons icon class to use within the callout.
12 * @param string $title The title text to display in the callout.
13 * @param array  $description List of paragraphs to display as description.
14 * @param string $button_link URL of the CTA button.
15 * @param string $button_text Text of the CTA button.
16 * @param string $image The path of the image to include within the callout.
17 */
18function wpcom_display_callout( $icon, $title, $description, $button_link, $button_text, $image ) {
19    ?>
20    <style>
21        .wpcom-callout-container {
22            height: max( calc( 100vh - 32px ), 400px );
23            display: flex;
24            justify-content: center;
25            align-items: center;
26        }
27
28        .wpcom-callout {
29            padding: 24px;
30            margin-left: auto;
31            margin-right: auto;
32            max-width: 600px;
33            box-sizing: border-box;
34            display: flex;
35            background-color: #fff;
36            box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px;
37            border-radius: 7px;
38            gap: 24px;
39        }
40
41        .wpcom-callout > * {
42            width: 50%;
43        }
44
45        .wpcom-callout-content {
46            display: flex;
47            flex-direction: column;
48            gap: 16px;
49            align-items: flex-start;
50        }
51
52        .wpcom-callout-content > * {
53            margin: 0;
54        }
55
56        .wpcom-callout-title {
57            color: #1e1e1e;
58            font-size: 15px;
59            font-weight: 500;
60            line-height: 20px;
61        }
62
63        .wpcom-callout-description {
64            color: rgb(117, 117, 117);
65            line-height: 1.4;
66            text-wrap: pretty;
67            font-size: 13px;
68        }
69
70        .wpcom-callout-image {
71            position: relative;
72        }
73
74        .wpcom-callout-image > img {
75            position: absolute;
76            width: 100%;
77            height: 100%;
78            object-fit: cover;
79            border-radius: 7px;
80        }
81
82        .wpcom-callout .button.button-primary {
83            border-radius: 2px;
84        }
85
86        @media (max-width: 620px) {
87            .wpcom-callout-container {
88                align-items: flex-start;
89            }
90
91            .wpcom-callout {
92                margin-top: 10px;
93            }
94
95            .wpcom-callout-content {
96                width: 100%;
97            }
98
99            .wpcom-callout-image {
100                display: none;
101            }
102        }
103    </style>
104    <div class="wpcom-callout-container">
105        <div class="wpcom-callout">
106            <div class="wpcom-callout-content">
107                <div class="wpcom-callout-icon"><span class="dashicons <?php echo esc_attr( $icon ); ?>"></span></div>
108                <h2 class="wpcom-callout-title"><?php echo esc_html( $title ); ?></h2>
109                <?php foreach ( $description as $paragraph ) : ?>
110                    <p class="wpcom-callout-description"><?php echo esc_html( $paragraph ); ?></p>
111                <?php endforeach; ?>
112                <a class="button button-primary" href="<?php echo esc_url( $button_link ); ?>" data-target="wpcom-help-center"><?php echo esc_html( $button_text ); ?></a>
113            </div>
114            <div class="wpcom-callout-image"><img src="<?php echo esc_url( $image ); ?>"></div>
115        </div>
116    </div>
117    <?php
118}