ntp: stats feedback (#1098)

* ntp: stats feedback

* deps

* move esbuild dependency into special-pages

---------

Co-authored-by: Shane Osbourne <sosbourne@duckduckgo.com>

.gitignore

@@ -10,6 +10,7 @@ test-results/
 playwright-report/
 Sources/ContentScopeScripts/dist/
 test-results
+!Sources/ContentScopeScripts/dist/pages/.gitignore
 
 # Local Netlify folder
 .netlify

Package.swift

@@ -1,4 +1,4 @@
-// swift-tools-version:5.3
+// swift-tools-version:5.5
 // The swift-tools-version declares the minimum version of Swift required to build this package.
 
 import PackageDescription

Sources/ContentScopeScripts/dist/pages/.gitignore

@@ -0,0 +1 @@
+*

package.json

@@ -32,7 +32,6 @@
   "dependencies": {},
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.9.1",
-    "esbuild": "^0.19.5",
     "eslint": "^8.57.1",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.31.0",

special-pages/messages/new-tab/examples/stats.js

@@ -13,9 +13,17 @@ const privacyStatsData = {
 /**
  * @type {import("../../../types/new-tab").StatsConfig}
  */
-const statsConfig = {
+const minimumConfig = {
     expansion: "expanded"
 }
 
+/**
+ * @type {import("../../../types/new-tab").StatsConfig}
+ */
+const withAnimation = {
+    expansion: "expanded",
+    animation: { kind: "view-transitions" }
+}
+
 export {}
 

special-pages/messages/new-tab/types/animation.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "Animation",
+  "description": "Generic Animation configuration",
+  "oneOf": [
+    {
+      "title": "None",
+      "type": "object",
+      "required": ["kind"],
+      "properties": {
+        "kind": {
+          "const": "none"
+        }
+      }
+    },
+    {
+      "title": "View Transitions",
+      "description": "Use CSS view transitions where available",
+      "type": "object",
+      "required": ["kind"],
+      "properties": {
+        "kind": {
+          "const": "view-transitions"
+        }
+      }
+    },
+    {
+      "title": "Auto",
+      "description": "Use the auto-animate library to provide default animation styles",
+      "type": "object",
+      "required": ["kind"],
+      "properties": {
+        "kind": {
+          "const": "auto-animate"
+        }
+      }
+    }
+  ]
+}

special-pages/messages/new-tab/types/stats-config.json

@@ -4,6 +4,7 @@
   "type": "object",
   "required": ["expansion"],
   "properties": {
-    "expansion": {"$ref":  "./expansion.json"}
+    "expansion": {"$ref":  "./expansion.json"},
+    "animation": {"$ref":  "./animation.json"}
   }
 }

special-pages/package.json

@@ -25,13 +25,14 @@
   "license": "ISC",
   "devDependencies": {
     "@duckduckgo/messaging": "*",
+    "esbuild": "^0.19.5",
     "@playwright/test": "^1.40.1",
     "http-server": "^14.1.1",
     "web-resource-inliner": "^6.0.1",
     "fast-check": "^3.22.0"
   },
   "dependencies": {
-    "preact": "^10.19.3",
+    "preact": "^10.24.3",
     "classnames": "^2.3.2",
     "@formkit/auto-animate": "^0.8.0",
     "@rive-app/canvas-single": "^2.21.5"

special-pages/pages/new-tab/app/components/App.module.css

@@ -8,6 +8,8 @@ body {
     font-size: var(--body-font-size);
     font-weight: var(--body-font-weight);
     line-height: var(--body-line-height);
+    padding-left: var(--sp-6);
+    padding-right: var(--sp-6);
 }
 
 .layout {

special-pages/pages/new-tab/app/components/Chevron.js

@@ -0,0 +1,11 @@
+import { h } from 'preact'
+
+export function Chevron () {
+    return (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13.5 10L8 4.5L2.5 10" stroke="currentColor" stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"/>
+        </svg>
+    )
+}