A4A: Add "share details" content to the Connection Card (#36729)

Automattic · Apr 5, 2024 · 9ffe342 · 9ffe342
1 parent b5a0b5b
commit 9ffe342
Show file tree

Hide file tree

Showing 8 changed files with 512 additions and 87 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/...lugins/automattic-for-agencies-client/changelog/add-share-details-info-to-connection-card b/...lugins/automattic-for-agencies-client/changelog/add-share-details-info-to-connection-card
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added details about sharing information with Automattic to the connection card.
diff --git a/projects/plugins/automattic-for-agencies-client/package.json b/projects/plugins/automattic-for-agencies-client/package.json
@@ -33,6 +33,7 @@
 		"@wordpress/date": "4.54.0",
 		"@wordpress/element": "5.31.0",
 		"@wordpress/i18n": "4.54.0",
+		"classnames": "2.3.2",
 		"react": "18.2.0",
 		"react-dom": "18.2.0"
 	},

diff --git a/.../plugins/automattic-for-agencies-client/src/js/components/branded-card/styles.module.scss b/.../plugins/automattic-for-agencies-client/src/js/components/branded-card/styles.module.scss
@@ -3,10 +3,10 @@
 	border-radius: 14px;
 	display: flex;
 	padding: 8px;
-    
-    @media (max-width: 959px) {
-        flex-direction: column;
-    }
+
+	@media ( max-width: 959px ) {
+		flex-direction: column;
+	}
 }
 
 .card__column {
@@ -19,42 +19,44 @@
 	justify-content: space-between;
 	padding: 48px 56px;
 
-    @media (max-width: 959px) {
-        flex-direction: row;
-        justify-content: flex-start;
-        padding: 48px;
-        gap: 16px;
-    }
+	@media ( max-width: 959px ) {
+		flex-direction: row;
+		justify-content: flex-start;
+		padding: 48px;
+		gap: 16px;
+	}
 
-    @media (max-width: 659px) {
-        padding: 24px;
-    }
+	@media ( max-width: 659px ) {
+		padding: 24px;
+	}
 }
 
 .card__column--brand svg {
-    @media (max-width: 959px) {
-        height: 48px;
-        width: auto;
-    }
-
-    @media (max-width: 659px) {
-        height: 32px;
-        width: auto;
-    }
+	@media ( max-width: 959px ) {
+		height: 48px;
+		width: auto;
+	}
+
+	@media ( max-width: 659px ) {
+		height: 32px;
+		width: auto;
+	}
 }
 
 .card__column--content {
-	background-color: #FFFFFF;
+	background-color: #ffffff;
 	border-radius: 8px;
-	padding: 80px 48px;
-	display: flex;
 	flex-basis: 562px;
-
-    @media (max-width: 959px) {
-        padding: 48px;
-    }
-
-    @media (max-width: 659px) {
-        padding: 24px;
-    }
+	height: 612px;
+	overflow: auto;
+
+	@media ( max-width: 959px ) {
+		padding: 48px;
+		height: auto;
+		overflow: unset;
+	}
+
+	@media ( max-width: 659px ) {
+		padding: 24px;
+	}
 }
diff --git a/projects/plugins/automattic-for-agencies-client/src/js/components/close-icon/index.jsx b/projects/plugins/automattic-for-agencies-client/src/js/components/close-icon/index.jsx
@@ -0,0 +1,30 @@
+import { Path, SVG } from '@wordpress/components';
+import React from 'react';
+
+/**
+ * Close icon component
+ *
+ * @param {object} props        - Component props
+ * @param {string} props.color  - Color code for the icon
+ * @returns {React.ReactElement} Component template
+ */
+export default function CloseIcon( { color = '#D63638' } ) {
+	return (
+		<SVG
+			clipRule="evenodd"
+			fillRule="evenodd"
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<Path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M12 13.0607L15.7123 16.773L16.773 15.7123L13.0607 12L16.773 8.28772L15.7123 7.22706L12 10.9394L8.28771 7.22705L7.22705 8.28771L10.9394 12L7.22706 15.7123L8.28772 16.773L12 13.0607Z"
+				fill={ color }
+			/>
+		</SVG>
+	);
+}