{ content }
@@ -49,7 +61,9 @@ export default function InfoNotice( { content, dismissLabel, onDismiss } ) {
}
InfoNotice.propTypes = {
+ className: PropTypes.string,
content: PropTypes.string.isRequired,
dismissLabel: PropTypes.string,
+ Icon: PropTypes.elementType,
onDismiss: PropTypes.func,
};
diff --git a/assets/sass/components/analytics-4/audience-segmentation/_googlesitekit-audience-selection-panel.scss b/assets/sass/components/analytics-4/audience-segmentation/_googlesitekit-audience-selection-panel.scss
index b3ead48a895..b0768380e54 100644
--- a/assets/sass/components/analytics-4/audience-segmentation/_googlesitekit-audience-selection-panel.scss
+++ b/assets/sass/components/analytics-4/audience-segmentation/_googlesitekit-audience-selection-panel.scss
@@ -36,5 +36,37 @@
.googlesitekit-selection-panel-footer {
margin: 0;
}
+
+ .googlesitekit-audience-selection-panel__add-group-notice {
+ background-color: $c-surfaces-background;
+ margin: 5px $grid-gap-desktop;
+ padding: $grid-gap-phone 20px;
+
+ @media (max-width: $bp-xsmallOnly) {
+ padding: $grid-gap-phone;
+ }
+
+ .googlesitekit-audience-segmentation-info-notice__body {
+ flex-wrap: nowrap;
+ grid-gap: 0 30px;
+
+ @media (max-width: $bp-xsmallOnly) {
+ flex-wrap: wrap;
+ }
+
+ p {
+ margin: 0;
+ }
+ }
+
+ svg {
+ height: 22px;
+ width: 22px;
+ }
+
+ .googlesitekit-audience-segmentation-info-notice__dismiss {
+ color: $c-surfaces-on-surface;
+ }
+ }
}
}
diff --git a/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_AudienceSelectionPanel_WithOneGroup_0_document_0_small.png b/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_AudienceSelectionPanel_WithOneGroup_0_document_0_small.png
new file mode 100644
index 00000000000..f03f130eeb9
Binary files /dev/null and b/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_AudienceSelectionPanel_WithOneGroup_0_document_0_small.png differ
diff --git a/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_AudienceSelectionPanel_WithOneGroup_0_document_1_medium.png b/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_AudienceSelectionPanel_WithOneGroup_0_document_1_medium.png
new file mode 100644
index 00000000000..1c5e0c1dec0
Binary files /dev/null and b/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_AudienceSelectionPanel_WithOneGroup_0_document_1_medium.png differ
diff --git a/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_AudienceSelectionPanel_WithOneGroup_0_document_2_large.png b/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_AudienceSelectionPanel_WithOneGroup_0_document_2_large.png
new file mode 100644
index 00000000000..593a07ea337
Binary files /dev/null and b/tests/backstop/reference/google-site-kit_Modules_Analytics4_Components_AudienceSegmentation_Dashboard_AudienceSelectionPanel_WithOneGroup_0_document_2_large.png differ