Feature: Add insights card to RWS panel

data/related_website_sets.json

@@ -0,0 +1,92 @@
+{
+  "sets": [
+    {
+      "contact": "dmarti@raptive.com",
+      "primary": "https://cafemedia.com",
+      "associatedSites": [
+        "https://cardsayings.net",
+        "https://nourishingpursuits.com"
+      ],
+      "rationaleBySite": {
+        "https://cardsayings.net": "Co-branded content site",
+        "https://nourishingpursuits.com": "Co-branded content site"
+      }
+    },
+    {
+      "primary": "https://bild.de",
+      "contact": "robert.blanck@axelspringer.com",
+      "associatedSites": [
+        "https://welt.de",
+        "https://autobild.de",
+        "https://computerbild.de",
+        "https://wieistmeineip.de"
+      ],
+      "serviceSites": [
+        "https://www.asadcdn.com"
+      ],
+      "rationaleBySite": {
+        "https://welt.de": "News Website welt.de",
+        "https://autobild.de": "Special Interest Website Autobild",
+        "https://computerbild.de": "Special Interest Website Computerbild",
+        "https://wieistmeineip.de": "Internet speed Measurement Website of Computerbild",
+        "https://www.asadcdn.com": "CDN for Ad Files - Frequency Capping"
+      }
+    },
+    {
+      "primary": "https://gliadomain.com",
+      "contact": "carlos.paniagua@glia.com",
+      "associatedSites": [
+        "https://salemoveadvisor.com",
+        "https://salemovefinancial.com",
+        "https://salemovetravel.com"
+      ],
+      "rationaleBySite": {
+        "https://salemoveadvisor.com": "The domains are very clear that they are all a part of the SaleMove family of sites. These sites are used as demo sites to show how multiple sites can be linked together for the purpose of live chat linking across multiple domains. A user would expect the sites to be linked as they are all a part of the same demo family of sites to show how it works",
+        "https://salemovefinancial.com": "The domains are very clear that they are all a part of the SaleMove family of sites. These sites are used as demo sites to show how multiple sites can be linked together for the purpose of live chat linking across multiple domains. A user would expect the sites to be linked as they are all a part of the same demo family of sites to show how it works",
+        "https://salemovetravel.com": "The domains are very clear that they are all a part of the SaleMove family of sites. These sites are used as demo sites to show how multiple sites can be linked together for the purpose of live chat linking across multiple domains. A user would expect the sites to be linked as they are all a part of the same demo family of sites to show how it works"
+      }
+    },
+    {
+      "primary": "https://hapara.com",
+      "contact": "support@hapara.com",
+      "associatedSites": [
+        "https://teacherdashboard.com",
+        "https://mystudentdashboard.com"
+      ],
+      "rationaleBySite": {
+        "https://teacherdashboard.com": "Portal for Hapara teachers",
+        "https://mystudentdashboard.com": "Portal for Hapara students"
+      }
+    },
+    {
+      "contact": "support@songstats.com",
+      "primary": "https://songstats.com",
+      "associatedSites": [
+        "https://songshare.com"
+      ],
+      "rationaleBySite": {
+        "https://songshare.com": "Specialized Platform for Music Smart Links"
+      }
+    },
+    {
+      "contact": "prashant.tiwari@htdigital.in",
+      "primary": "https://hindustantimes.com",
+      "associatedSites": [
+        "https://livemint.com"
+      ],
+      "rationaleBySite": {
+        "https://livemint.com": "Specialized Platform for economics"
+      }
+    },
+    {
+      "contact": "alexey@landyrev.com",
+      "primary": "https://landyrev.com",
+      "associatedSites": [
+        "https://landyrev.ru"
+      ],
+      "rationaleBySite": {
+        "https://landyrev.ru": "Same publisher's website in a different region"
+      }
+    }
+  ]
+}

package.json

@@ -17,6 +17,7 @@
 		"lint:js:fix": "eslint --fix .",
 		"prepare": "husky install",
 		"cookie-db:update": "node scripts/update-cookie-db.cjs",
+		"rws-json:update": "node scripts/update-rws-json.cjs",
 		"storybook": "storybook dev -p 6006",
 		"build-storybook": "storybook build"
 	},

packages/extension/src/view/design-system/components/button/index.tsx

@@ -16,18 +16,35 @@
 /**
  * External dependencies.
  */
+import classNames from 'classnames';
 import React from 'react';
 
 interface ButtonProps {
   text: string;
-  onClick: () => void;
+  onClick?: () => void;
+  loading?: boolean;
+  type?: 'button' | 'submit' | 'reset';
+  variant?: 'primary' | 'secondary' | 'danger';
 }
-const Button = ({ onClick, text }: ButtonProps) => {
+const Button = ({
+  text,
+  onClick = undefined,
+  type = 'button',
+  variant = 'primary',
+}: ButtonProps) => {
   return (
     <button
       data-test-id="button"
-      onClick={onClick}
-      className="py-1 px-2 text-white dark:text-jet-black dark:bg-light-blue bg-dark-blue rounded font-medium"
+      type={type}
+      onClick={onClick ? onClick : undefined}
+      className={classNames('py-1 px-2 rounded font-medium', {
+        'text-white dark:bg-absolute-zero-crayola bg-absolute-zero-crayola hover:bg-ocean-boat-blue':
+          variant === 'primary',
+        'bg-transparent dark:bg-transparent dark:text-bright-gray text-raisin-black':
+          variant === 'secondary',
+        'text-white dark:text-white dark:bg-red-500 bg-red-500':
+          variant === 'danger',
+      })}
     >
       {text}
     </button>

packages/extension/src/view/design-system/components/infoCard/learnMoreDropdown.tsx

@@ -82,7 +82,7 @@ const LearnMoreDropdown = ({
       )}
       <div className="flex items-center justify-start pt-4 border-t border-gray-200 dark:border-gray-500">
         <button
-          className="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700"
+          className="inline-flex items-center px-3 py-2 text-sm font-medium text-center rounded-lg dark:hover:bg-blue-700 text-white dark:bg-absolute-zero-crayola bg-absolute-zero-crayola hover:bg-ocean-boat-blue"
           onClick={() => {
             setIsOpen(!isOpen);
           }}

packages/extension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/index.tsx

@@ -16,26 +16,40 @@
 /**
  * External dependencies.
  */
-import React from 'react';
+import React, { useState } from 'react';
 
 /**
  * Internal dependencies.
  */
 import InfoCard from '../../../../design-system/components/infoCard';
 import { PSInfoKey } from '../../../../../utils/fetchPSInfo';
-import { MessageBox } from '../../../../design-system/components';
+import { Button } from '../../../../design-system/components';
+import Insights from './insights';
 
 const RelatedWebsiteSets = () => {
+  const [showForm, setShowForm] = useState(false);
+
   return (
     <div
       className="w-full h-full overflow-auto"
       data-testid="related-website-sets-content"
     >
-      <InfoCard infoKey={PSInfoKey.RelatedWebsiteSets} />
-      <MessageBox
-        bodyText="Insights and a JSON generator for RWS registration are coming soon..."
-        headerText="🚧 Under Construction"
-      />
+      {showForm ? (
+        <>Placeholder</>
+      ) : (
+        <>
+          <InfoCard infoKey={PSInfoKey.RelatedWebsiteSets} />
+          <div className="text-raisin-black dark:text-bright-gray max-w-2xl dark:bg-davys-grey border border-gray-200 dark:border-quartz rounded-lg shadow p-6 m-3 flex flex-col gap-4 divide-y divide-gray-200 dark:divide-gray-500">
+            <Insights />
+            <div className="pt-3">
+              <Button
+                text="Generate RWS JSON Resources"
+                onClick={() => setShowForm(!showForm)}
+              />
+            </div>
+          </div>
+        </>
+      )}
     </div>
   );
 };