Skip to content

Commit f2bff14

Browse files
tofumatttofumatt
authored
Merge pull request #12695 from google/enhancement/12424-site-goals-intro-modal-followup
Enhancement/12424 Site goals intro modal followup
2 parents 5bab33f + ac52587 commit f2bff14

12 files changed

Lines changed: 74 additions & 20 deletions

‎assets/js/components/BannerModal/index.tsx‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
/**
2020
* External dependencies
2121
*/
22+
import classnames from 'classnames';
2223
import { FC, MouseEvent, ReactNode } from 'react';
2324

2425
/**
@@ -36,9 +37,12 @@ import P from '@/js/components/Typography/P';
3637
import Typography from '@/js/components/Typography';
3738
import { GraphicContainerWithIntersectionObserver } from './GraphicContainer';
3839
import CloseIcon from '@/svg/icons/close.svg';
40+
import NewBadge from '@/js/components/NewBadge';
3941

4042
export interface BannerModalProps {
43+
className?: string;
4144
Graphic: FC;
45+
newBadge?: boolean;
4246
onView: () => void;
4347
onClose: () => void;
4448
title: ReactNode;
@@ -65,17 +69,21 @@ export interface BannerModalProps {
6569
* @since n.e.x.t
6670
*
6771
* @param props Component props.
72+
* @param props.className Additional CSS class name(s) to apply to the root Dialog element.
6873
* @param props.Graphic SVG graphic component to render in the modal header.
6974
* @param props.onView Callback invoked when the modal content scrolls into view, used for tracking purposes.
7075
* @param props.onClose Callback invoked when the modal is closed.
7176
* @param props.title Modal title text.
7277
* @param props.description Modal description content (string or element).
78+
* @param props.newBadge Whether to display a "New" badge in the modal.
7379
* @param props.ctaButton Configuration object for the primary CTA button.
7480
* @param props.dismissButton Configuration object for the dismiss button.
7581
* @return BannerModal component.
7682
*/
7783
const BannerModal: FC< BannerModalProps > = ( {
84+
className,
7885
Graphic,
86+
newBadge = false,
7987
onView,
8088
onClose,
8189
title,
@@ -85,7 +93,12 @@ const BannerModal: FC< BannerModalProps > = ( {
8593
} ) => {
8694
return (
8795
<Dialog
88-
className="googlesitekit-dialog googlesitekit-dialog--with-mobile-margins googlesitekit-banner-modal"
96+
className={ classnames(
97+
'googlesitekit-dialog',
98+
'googlesitekit-dialog--with-mobile-margins',
99+
'googlesitekit-banner-modal',
100+
className
101+
) }
89102
onClose={ onClose }
90103
open
91104
>
@@ -110,6 +123,8 @@ const BannerModal: FC< BannerModalProps > = ( {
110123
</GraphicContainerWithIntersectionObserver>
111124

112125
<div className="googlesitekit-banner-modal__text">
126+
{ newBadge && <NewBadge hasNoSpacing /> }
127+
113128
<Typography
114129
as="h1"
115130
className="googlesitekit-banner-modal__title"

‎assets/js/components/WelcomeModal.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -348,6 +348,7 @@ export default function WelcomeModal() {
348348

349349
return (
350350
<BannerModal
351+
className="googlesitekit-banner-modal--welcome-modal"
351352
Graphic={ Graphic }
352353
onView={ handleView }
353354
onClose={ handleClose }

‎assets/js/components/__snapshots__/WelcomeModal.test.tsx.snap‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ exports[`WelcomeModal should show the data available variant when Analytics is c
55
<div
66
aria-describedby="mdc-dialog-content"
77
aria-modal="true"
8-
class="mdc-dialog mdc-dialog--opening mdc-dialog--open googlesitekit-dialog googlesitekit-dialog--with-mobile-margins googlesitekit-banner-modal"
8+
class="mdc-dialog mdc-dialog--opening mdc-dialog--open googlesitekit-dialog googlesitekit-dialog--with-mobile-margins googlesitekit-banner-modal googlesitekit-banner-modal--welcome-modal"
99
id="mdc-dialog"
1010
role="alertdialog"
1111
>
@@ -84,7 +84,7 @@ exports[`WelcomeModal should show the data available variant when Analytics is n
8484
<div
8585
aria-describedby="mdc-dialog-content"
8686
aria-modal="true"
87-
class="mdc-dialog mdc-dialog--opening mdc-dialog--open googlesitekit-dialog googlesitekit-dialog--with-mobile-margins googlesitekit-banner-modal"
87+
class="mdc-dialog mdc-dialog--opening mdc-dialog--open googlesitekit-dialog googlesitekit-dialog--with-mobile-margins googlesitekit-banner-modal googlesitekit-banner-modal--welcome-modal"
8888
id="mdc-dialog"
8989
role="alertdialog"
9090
>
@@ -163,7 +163,7 @@ exports[`WelcomeModal should show the data gathering complete variant when Analy
163163
<div
164164
aria-describedby="mdc-dialog-content"
165165
aria-modal="true"
166-
class="mdc-dialog mdc-dialog--opening mdc-dialog--open googlesitekit-dialog googlesitekit-dialog--with-mobile-margins googlesitekit-banner-modal"
166+
class="mdc-dialog mdc-dialog--opening mdc-dialog--open googlesitekit-dialog googlesitekit-dialog--with-mobile-margins googlesitekit-banner-modal googlesitekit-banner-modal--welcome-modal"
167167
id="mdc-dialog"
168168
role="alertdialog"
169169
>
@@ -242,7 +242,7 @@ exports[`WelcomeModal should show the data gathering complete variant when Analy
242242
<div
243243
aria-describedby="mdc-dialog-content"
244244
aria-modal="true"
245-
class="mdc-dialog mdc-dialog--opening mdc-dialog--open googlesitekit-dialog googlesitekit-dialog--with-mobile-margins googlesitekit-banner-modal"
245+
class="mdc-dialog mdc-dialog--opening mdc-dialog--open googlesitekit-dialog googlesitekit-dialog--with-mobile-margins googlesitekit-banner-modal googlesitekit-banner-modal--welcome-modal"
246246
id="mdc-dialog"
247247
role="alertdialog"
248248
>
@@ -321,7 +321,7 @@ exports[`WelcomeModal should show the gathering data variant when Analytics is c
321321
<div
322322
aria-describedby="mdc-dialog-content"
323323
aria-modal="true"
324-
class="mdc-dialog mdc-dialog--opening mdc-dialog--open googlesitekit-dialog googlesitekit-dialog--with-mobile-margins googlesitekit-banner-modal"
324+
class="mdc-dialog mdc-dialog--opening mdc-dialog--open googlesitekit-dialog googlesitekit-dialog--with-mobile-margins googlesitekit-banner-modal googlesitekit-banner-modal--welcome-modal"
325325
id="mdc-dialog"
326326
role="alertdialog"
327327
>
@@ -392,7 +392,7 @@ exports[`WelcomeModal should show the gathering data variant when Analytics is n
392392
<div
393393
aria-describedby="mdc-dialog-content"
394394
aria-modal="true"
395-
class="mdc-dialog mdc-dialog--opening mdc-dialog--open googlesitekit-dialog googlesitekit-dialog--with-mobile-margins googlesitekit-banner-modal"
395+
class="mdc-dialog mdc-dialog--opening mdc-dialog--open googlesitekit-dialog googlesitekit-dialog--with-mobile-margins googlesitekit-banner-modal googlesitekit-banner-modal--welcome-modal"
396396
id="mdc-dialog"
397397
role="alertdialog"
398398
>

‎assets/js/googlesitekit/widgets/register-defaults.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ export function registerDefaults( widgetsAPI ) {
184184
widgetsAPI.registerWidgetArea(
185185
AREA_MAIN_DASHBOARD_SITE_GOALS_PRIMARY,
186186
{
187-
title: __( 'Site Goals', 'google-site-kit' ),
187+
title: __( 'Site goals', 'google-site-kit' ),
188188
subtitle: __(
189189
'See how your site is helping you reach your business objectives',
190190
'google-site-kit'

‎assets/js/modules/analytics-4/components/site-goals/notifications/IntroModalBanner/IntroModalEcommerce.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ const IntroModalEcommerce: FC< IntroModalVariantProps > = ( {
4343
} ) => {
4444
return (
4545
<BannerModal
46+
className="googlesitekit-banner-modal--site-goals-intro"
4647
Graphic={ SiteGoalsIntroModalEcommerceGraphic }
4748
onView={ onView }
4849
onClose={ onDismiss }
@@ -75,6 +76,7 @@ const IntroModalEcommerce: FC< IntroModalVariantProps > = ( {
7576
dismissButton={ {
7677
onClick: onDismiss,
7778
} }
79+
newBadge
7880
/>
7981
);
8082
};

‎assets/js/modules/analytics-4/components/site-goals/notifications/IntroModalBanner/IntroModalEcommerceAndLead.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ const IntroModalEcommerceAndLead: FC< IntroModalVariantProps > = ( {
4343
} ) => {
4444
return (
4545
<BannerModal
46+
className="googlesitekit-banner-modal--site-goals-intro"
4647
Graphic={ SiteGoalsIntroModalGraphic }
4748
onView={ onView }
4849
onClose={ onDismiss }
@@ -76,6 +77,7 @@ const IntroModalEcommerceAndLead: FC< IntroModalVariantProps > = ( {
7677
dismissButton={ {
7778
onClick: onDismiss,
7879
} }
80+
newBadge
7981
/>
8082
);
8183
};

‎assets/js/modules/analytics-4/components/site-goals/notifications/IntroModalBanner/IntroModalLead.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ const IntroModalLead: FC< IntroModalVariantProps > = ( {
4343
} ) => {
4444
return (
4545
<BannerModal
46+
className="googlesitekit-banner-modal--site-goals-intro"
4647
Graphic={ SiteGoalsIntroModalLeadGraphic }
4748
onView={ onView }
4849
onClose={ onDismiss }
@@ -75,6 +76,7 @@ const IntroModalLead: FC< IntroModalVariantProps > = ( {
7576
dismissButton={ {
7677
onClick: onDismiss,
7778
} }
79+
newBadge
7880
/>
7981
);
8082
};

‎assets/js/modules/analytics-4/components/site-goals/notifications/IntroModalBanner/__snapshots__/index.test.js.snap‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ exports[`IntroModal renders ecommerce-and-lead variant when both conversion even
55
<div
66
aria-describedby="mdc-dialog-content"
77
aria-modal="true"
8-
class="mdc-dialog mdc-dialog--opening googlesitekit-dialog googlesitekit-dialog--with-mobile-margins googlesitekit-banner-modal"
8+
class="mdc-dialog mdc-dialog--opening googlesitekit-dialog googlesitekit-dialog--with-mobile-margins googlesitekit-banner-modal googlesitekit-banner-modal--site-goals-intro"
99
id="mdc-dialog"
1010
role="alertdialog"
1111
>
@@ -34,6 +34,11 @@ exports[`IntroModal renders ecommerce-and-lead variant when both conversion even
3434
<div
3535
class="googlesitekit-banner-modal__text"
3636
>
37+
<span
38+
class="googlesitekit-badge googlesitekit-new-badge googlesitekit-new-badge--has-no-spacing"
39+
>
40+
New
41+
</span>
3742
<h1
3843
class="googlesitekit-typography googlesitekit-banner-modal__title googlesitekit-typography--headline googlesitekit-typography--large"
3944
>
@@ -105,7 +110,7 @@ exports[`IntroModal renders ecommerce-only variant when only ecommerce conversio
105110
<div
106111
aria-describedby="mdc-dialog-content"
107112
aria-modal="true"
108-
class="mdc-dialog mdc-dialog--opening googlesitekit-dialog googlesitekit-dialog--with-mobile-margins googlesitekit-banner-modal"
113+
class="mdc-dialog mdc-dialog--opening googlesitekit-dialog googlesitekit-dialog--with-mobile-margins googlesitekit-banner-modal googlesitekit-banner-modal--site-goals-intro"
109114
id="mdc-dialog"
110115
role="alertdialog"
111116
>
@@ -134,6 +139,11 @@ exports[`IntroModal renders ecommerce-only variant when only ecommerce conversio
134139
<div
135140
class="googlesitekit-banner-modal__text"
136141
>
142+
<span
143+
class="googlesitekit-badge googlesitekit-new-badge googlesitekit-new-badge--has-no-spacing"
144+
>
145+
New
146+
</span>
137147
<h1
138148
class="googlesitekit-typography googlesitekit-banner-modal__title googlesitekit-typography--headline googlesitekit-typography--large"
139149
>
@@ -197,7 +207,7 @@ exports[`IntroModal renders lead-only variant when only lead conversion events e
197207
<div
198208
aria-describedby="mdc-dialog-content"
199209
aria-modal="true"
200-
class="mdc-dialog mdc-dialog--opening googlesitekit-dialog googlesitekit-dialog--with-mobile-margins googlesitekit-banner-modal"
210+
class="mdc-dialog mdc-dialog--opening googlesitekit-dialog googlesitekit-dialog--with-mobile-margins googlesitekit-banner-modal googlesitekit-banner-modal--site-goals-intro"
201211
id="mdc-dialog"
202212
role="alertdialog"
203213
>
@@ -226,6 +236,11 @@ exports[`IntroModal renders lead-only variant when only lead conversion events e
226236
<div
227237
class="googlesitekit-banner-modal__text"
228238
>
239+
<span
240+
class="googlesitekit-badge googlesitekit-new-badge googlesitekit-new-badge--has-no-spacing"
241+
>
242+
New
243+
</span>
229244
<h1
230245
class="googlesitekit-typography googlesitekit-banner-modal__title googlesitekit-typography--headline googlesitekit-typography--large"
231246
>

‎assets/sass/components/banner-modal/_googlesitekit-banner-modal.scss‎

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,20 +22,12 @@
2222
.mdc-dialog__surface {
2323
overflow: hidden;
2424
}
25-
26-
.mdc-dialog__container {
27-
max-width: 491px;
28-
}
2925
}
3026

3127
.googlesitekit-banner-modal__graphic {
3228
background-image: linear-gradient(to bottom, $c-site-kit-sk-50, $c-white);
3329
max-height: 200px;
3430
position: relative;
35-
36-
> svg {
37-
max-width: 491px;
38-
}
3931
}
4032

4133
.googlesitekit-banner-modal__close-button {
@@ -85,15 +77,20 @@
8577
}
8678

8779
.googlesitekit-banner-modal__text {
80+
margin: 25px 0 0;
8881
padding: 0 $grid-gap-phone;
8982

9083
@media (min-width: $bp-tablet) {
9184
padding: 0 $grid-gap-desktop;
9285
}
86+
87+
.googlesitekit-new-badge {
88+
margin-bottom: 8px;
89+
}
9390
}
9491

9592
.googlesitekit-banner-modal__title {
96-
margin: 25px 0 0;
93+
margin: 0;
9794
}
9895

9996
.googlesitekit-banner-modal__description {
@@ -123,4 +120,24 @@
123120
margin-top: 16px;
124121
}
125122
}
123+
124+
.googlesitekit-banner-modal--welcome-modal {
125+
.mdc-dialog__container {
126+
max-width: 491px;
127+
}
128+
129+
.googlesitekit-banner-modal__graphic > svg {
130+
max-width: 491px;
131+
}
132+
}
133+
134+
.googlesitekit-banner-modal--site-goals-intro {
135+
.mdc-dialog__container {
136+
max-width: 650px;
137+
}
138+
139+
.googlesitekit-banner-modal__graphic > svg {
140+
max-width: 650px;
141+
}
142+
}
126143
}

‎tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_Site_Goals_Notifications_IntroModal_Ecommerce_And_Lead_0_document_0_small.png‎

905 Bytes
Loading

0 commit comments

Comments
 (0)