New Scroller Component Design - Jake Love

data/blocks/block.6rcxMfOjLf.json

@@ -0,0 +1,5 @@
+{
+  "id": "6rcxMfOjLf",
+  "data": {},
+  "blockType": "divider-block"
+}

data/blocks/block.7Y7v_lnZJh.json

@@ -59,5 +59,6 @@
       "type": "doc"
     }
   },
-  "id": "7Y7v_lnZJh"
+  "id": "7Y7v_lnZJh",
+  "size": "small"
 }

data/blocks/block.8hDmMCnitI.json

@@ -0,0 +1,9 @@
+{
+  "id": "8hDmMCnitI",
+  "data": {
+    "contents": ["variants"],
+    "fileId": "H3Jj1cltfXiGWijrYOaGBi",
+    "componentId": "2:18"
+  },
+  "blockType": "design-src-component"
+}

data/blocks/block.CeLsnlf4EO.json

@@ -0,0 +1,64 @@
+{
+  "id": "CeLsnlf4EO",
+  "data": {
+    "content": {
+      "type": "doc",
+      "content": [
+        {
+          "type": "heading",
+          "attrs": {
+            "level": 1
+          },
+          "content": [
+            {
+              "text": "About Us",
+              "type": "text"
+            }
+          ]
+        },
+        {
+          "type": "paragraph",
+          "content": [
+            {
+              "text": "We're a passionate group of designers, engineers, and former design system consultants. Our team has helped some of the largest companies build and implement design systems that solve their unique challenges. Our mission is to simplify the design system experience so teams can spend more time creating and less time rebuilding or struggling to keep their design and code in sync.",
+              "type": "text"
+            }
+          ]
+        },
+        {
+          "type": "paragraph",
+          "content": [
+            {
+              "text": "We're backed by Google, Slack, and other world-class investors who see our vision for the future.",
+              "type": "text"
+            }
+          ]
+        },
+        {
+          "type": "paragraph",
+          "content": [
+            {
+              "text": "Our focus is modernizing digital production through collaborative tooling and workflows that ",
+              "type": "text"
+            },
+            {
+              "text": "make it easy to reuse code",
+              "type": "text",
+              "marks": [
+                {
+                  "type": "bold"
+                }
+              ]
+            },
+            {
+              "text": ".",
+              "type": "text"
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "blockType": "text-editor",
+  "size": "small"
+}

data/blocks/block.EKuYF4nu7n.json

@@ -0,0 +1,9 @@
+{
+  "id": "EKuYF4nu7n",
+  "data": {
+    "demoId": "color-swatch",
+    "groupIds": ["color.base"],
+    "tokenType": "color"
+  },
+  "blockType": "design-tokens"
+}

data/blocks/block.fa6SHvpyTs.json

@@ -0,0 +1,10 @@
+{
+  "id": "fa6SHvpyTs",
+  "data": {
+    "patternId": "button",
+    "templateId": "react",
+    "demoId": "2ysfvm4ShE",
+    "variationId": "size"
+  },
+  "blockType": "pattern-variations"
+}

data/blocks/block.wXDwLyAXJ5.json

@@ -0,0 +1,65 @@
+{
+  "id": "wXDwLyAXJ5",
+  "data": {
+    "content": {
+      "type": "doc",
+      "content": [
+        {
+          "type": "heading",
+          "attrs": {
+            "level": 1
+          },
+          "content": [
+            {
+              "text": "About Us",
+              "type": "text"
+            }
+          ]
+        },
+        {
+          "type": "paragraph",
+          "content": [
+            {
+              "text": "We're a passionate group of designers, engineers, and former design system consultants. Our team has helped some of the largest companies build and implement design systems that solve their unique challenges. Our mission is to simplify the design system experience so teams can spend more time creating and less time rebuilding or struggling to keep their design and code in sync.",
+              "type": "text"
+            }
+          ]
+        },
+        {
+          "type": "paragraph",
+          "content": [
+            {
+              "text": "We're backed by Google, Slack, and other world-class investors who see our vision for the future.",
+              "type": "text"
+            }
+          ]
+        },
+        {
+          "type": "paragraph",
+          "content": [
+            {
+              "text": "Our focus is modernizing digital production through collaborative tooling and workflows that ",
+              "type": "text"
+            },
+            {
+              "text": "make it easy to reuse code",
+              "type": "text",
+              "marks": [
+                {
+                  "type": "bold"
+                }
+              ]
+            },
+            {
+              "text": ".",
+              "type": "text"
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "size": "small",
+  "blockType": "text-editor",
+  "spacing": "medium"
+}

data/blocks/block.yd8u8-JyGI.json

@@ -0,0 +1,32 @@
+{
+  "id": "yd8u8-JyGI",
+  "data": {
+    "shortcuts": [
+      {
+        "id": "b2HzcpMFIl",
+        "link": {
+          "name": "Adding Design Tokens",
+          "path": "/pages/adding-design-tokens"
+        },
+        "title": "Adding Design Tokens"
+      },
+      {
+        "id": "GkKHD1d5Ag",
+        "link": {
+          "name": "Animation",
+          "path": "/pages/Animation"
+        },
+        "title": "Animation"
+      }
+    ],
+    "gridStyles": {
+      "columns": "2",
+      "gapSize": 50
+    },
+    "tileStyles": {
+      "rounded": false,
+      "outlined": false
+    }
+  },
+  "blockType": "shortcut-tiles"
+}

data/knapsack.custom-page.demo-page.yml

@@ -0,0 +1,15 @@
+id: demo-page
+title: Demo Page
+blockIds: []
+description: Add a fun description here
+settings:
+  pageHeader:
+    backgroundColor:
+      type: design-token
+      tokenName: color.brand.primary
+    textColorTitle:
+      type: design-token
+      tokenName: color.brand.white
+    textColorDescription:
+      type: design-token
+      tokenName: color.brand.white

data/knapsack.custom-page.welcome-to-knapsack.yml

@@ -18,3 +18,10 @@ blockIds:
   - tY2rt92bob
   - oa-y7sAwqr
   - 7Y7v_lnZJh
+  - CeLsnlf4EO
+  - wXDwLyAXJ5
+  - 6rcxMfOjLf
+  - yd8u8-JyGI
+  - 8hDmMCnitI
+  - fa6SHvpyTs
+  - EKuYF4nu7n

data/knapsack.design-tokens.json

@@ -359,7 +359,7 @@
           "$value": "#ffffff"
         },
         "light": {
-          "$value": "#7b58cf"
+          "$value": "#59cfa8"
         },
         "$type": "color",
         "$extensions": {

data/knapsack.navs.yml

@@ -121,6 +121,11 @@ byId:
     name: Customizing the Workspace
     parentId: guidance
     path: /pages/customizing-the-workspace
+  demo-page:
+    id: demo-page
+    name: Demo Page
+    parentId: getting-started
+    path: /pages/demo-page
   footer:
     id: footer
     name: Footer
@@ -197,6 +202,11 @@ byId:
     name: Proposed Patterns
     parentId: Components-aPh3G1bbrX
     path: ''
+  scroller:
+    id: scroller
+    name: Scroller
+    parentId: Components-Overview
+    path: /pattern/scroller
   spacing:
     id: spacing
     name: Spacing
@@ -255,3 +265,5 @@ order:
   - Private-Pages
   - new-component-in-progress
   - mobile-breakpoints
+  - demo-page
+  - scroller

data/knapsack.pattern.button.json

@@ -78,6 +78,11 @@
         "nNbC3Xwyf",
         "gDKFoMRalO"
       ]
+    },
+    {
+      "id": "TWHP92oqii",
+      "title": "ToDo",
+      "blockIds": []
     }
   ],
   "tabs": [
@@ -108,11 +113,15 @@
     {
       "id": "t8PlLMPbv",
       "type": "subPage"
+    },
+    {
+      "id": "TWHP92oqii",
+      "type": "subPage"
     }
   ],
   "statuses": {
-    "design": "needs-updated",
-    "react": "ready",
+    "design": "ready",
+    "react": "needs-updated",
     "twig": "ready",
     "handlebars": "ready",
     "web-components": "needs-dev"

data/knapsack.pattern.scroller.json

@@ -0,0 +1,37 @@
+{
+  "id": "scroller",
+  "tabs": [
+    {
+      "id": "aSbcr4aXH1",
+      "type": "designSrc"
+    },
+    {
+      "id": "n0Dj4Rc5YX",
+      "type": "subPage"
+    }
+  ],
+  "title": "Scroller",
+  "statuses": {
+    "design": "ready",
+    "react": "needs-dev",
+    "web-components": "needs-dev",
+    "qEBpl8oPtd": "BAwEpqi4W"
+  },
+  "subPages": [
+    {
+      "id": "n0Dj4Rc5YX",
+      "title": "Overview",
+      "blockIds": []
+    }
+  ],
+  "templates": [],
+  "description": "",
+  "designSrcComponentsById": {
+    "aSbcr4aXH1": {
+      "id": "aSbcr4aXH1",
+      "title": "Figma Component",
+      "fileId": "H3Jj1cltfXiGWijrYOaGBi",
+      "componentId": "834:161"
+    }
+  }
+}