ntp: stats feedback

.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 @@
+*

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/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>
+    )
+}