Merge pull request #2166 from Teradata/alert-overview-add

Add initial Alert overview document - Adam

apps/knapsack/data/blocks/block.0rZ0OosspG.json

@@ -0,0 +1,11 @@
+{
+  "id": "0rZ0OosspG",
+  "data": {
+    "md": [
+      "# Anatomy\nAn alert is composed of (up to) four elements:\n- Status icon\n- Title\n- Description (optional)\n- Call to action button\n- Icon"
+    ],
+    "columns": 1
+  },
+  "blockType": "markdown-block",
+  "size": "medium"
+}

apps/knapsack/data/blocks/block.0zquFzGyBA.json

@@ -0,0 +1,36 @@
+{
+  "id": "0zquFzGyBA",
+  "data": {
+    "content": {
+      "type": "doc",
+      "content": [
+        {
+          "type": "heading",
+          "attrs": {
+            "level": 2,
+            "textAlign": "left"
+          },
+          "content": [
+            {
+              "text": "Caution alerts",
+              "type": "text"
+            }
+          ]
+        },
+        {
+          "type": "paragraph",
+          "attrs": {
+            "textAlign": "left"
+          },
+          "content": [
+            {
+              "text": "Use to indicate that a non-critical error has occurred",
+              "type": "text"
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "blockType": "text-editor"
+}

apps/knapsack/data/blocks/block.1951-ccxBh.json

@@ -0,0 +1,10 @@
+{
+  "id": "1951-ccxBh",
+  "data": {
+    "md": [
+      "## Negative alerts\nUse to indicate that a critical or blocking error has occurred"
+    ],
+    "columns": 1
+  },
+  "blockType": "markdown-block"
+}

apps/knapsack/data/blocks/block.3pS1ljDoD.json

@@ -0,0 +1,10 @@
+{
+  "id": "3pS1ljDoD",
+  "data": {
+    "md": [
+      "# Responsive design\nWhen expanding vertically, the elements within remain positioned as they were before expansion. They do not vertically center."
+    ],
+    "columns": 1
+  },
+  "blockType": "markdown-block"
+}

apps/knapsack/data/blocks/block.A9-fak7l-z.json

@@ -0,0 +1,8 @@
+{
+  "id": "A9-fak7l-z",
+  "data": {
+    "md": ["## Informational alerts\nUse for general informational messages"],
+    "columns": 1
+  },
+  "blockType": "markdown-block"
+}

apps/knapsack/data/blocks/block.Bv0qhKCDXY.json

@@ -0,0 +1,10 @@
+{
+  "id": "Bv0qhKCDXY",
+  "data": {
+    "md": [
+      "## Positive alerts\nUse to indicate that a task or process has completed successfully"
+    ],
+    "columns": 1
+  },
+  "blockType": "markdown-block"
+}

apps/knapsack/data/blocks/block.ChOAoD1GAW.json

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

apps/knapsack/data/blocks/block.DWYhXPGy7X.json

@@ -0,0 +1,10 @@
+{
+  "id": "DWYhXPGy7X",
+  "data": {
+    "md": [
+      "## Negative alerts\nUse to indicate that a critical or blocking error has occurred"
+    ],
+    "columns": 1
+  },
+  "blockType": "markdown-block"
+}

apps/knapsack/data/blocks/block.Eu7gLbvJd.json

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

apps/knapsack/data/blocks/block.FUvMTxdOh8.json

@@ -0,0 +1,36 @@
+{
+  "id": "FUvMTxdOh8",
+  "data": {
+    "content": {
+      "type": "doc",
+      "content": [
+        {
+          "type": "heading",
+          "attrs": {
+            "level": 2,
+            "textAlign": "left"
+          },
+          "content": [
+            {
+              "text": "Caution alerts",
+              "type": "text"
+            }
+          ]
+        },
+        {
+          "type": "paragraph",
+          "attrs": {
+            "textAlign": "left"
+          },
+          "content": [
+            {
+              "text": "Use to indicate that a non-critical error has occurred",
+              "type": "text"
+            }
+          ]
+        }
+      ]
+    }
+  },
+  "blockType": "text-editor"
+}

apps/knapsack/data/blocks/block.GkA7GAw-cW.json

@@ -0,0 +1,20 @@
+{
+  "id": "GkA7GAw-cW",
+  "data": {
+    "demoId": "s8Ci4Cd08W",
+    "demoSize": "landscape",
+    "patternId": "alert",
+    "templateId": "web-components-4qjJYWsUZi",
+    "hideControls": true,
+    "playgroundUi": {
+      "demoSize": "landscape",
+      "allowResizing": false,
+      "showSchemaForm": true,
+      "showCodeSnippet": false
+    },
+    "allowResizing": false,
+    "showSchemaForm": true,
+    "showCodeSnippet": false
+  },
+  "blockType": "pattern-template-block"
+}

apps/knapsack/data/blocks/block.HVzaIUeLad.json

@@ -0,0 +1,20 @@
+{
+  "id": "HVzaIUeLad",
+  "data": {
+    "demoId": "vmDFzhOhSn",
+    "templateId": "web-components-4qjJYWsUZi",
+    "hideControls": true,
+    "playgroundUi": {
+      "allowResizing": false,
+      "showSchemaForm": true,
+      "showCodeSnippet": false,
+      "demoSize": "landscape"
+    },
+    "allowResizing": false,
+    "showCodeSnippet": false,
+    "showSchemaForm": true,
+    "demoSize": "landscape",
+    "patternId": "alert"
+  },
+  "blockType": "pattern-template-block"
+}

apps/knapsack/data/blocks/block.Irv3QXCNsU.json

@@ -0,0 +1,8 @@
+{
+  "id": "Irv3QXCNsU",
+  "data": {
+    "md": ["## Informational alerts\nUse for general informational messages"],
+    "columns": 1
+  },
+  "blockType": "markdown-block"
+}

apps/knapsack/data/blocks/block.KB3Coqs2h.json

@@ -0,0 +1,20 @@
+{
+  "id": "KB3Coqs2h",
+  "data": {
+    "demoId": "CE5x5TaMa2",
+    "demoSize": "landscape",
+    "patternId": "alert",
+    "templateId": "web-components-4qjJYWsUZi",
+    "hideControls": true,
+    "playgroundUi": {
+      "demoSize": "landscape",
+      "allowResizing": false,
+      "showSchemaForm": true,
+      "showCodeSnippet": false
+    },
+    "allowResizing": false,
+    "showSchemaForm": true,
+    "showCodeSnippet": false
+  },
+  "blockType": "pattern-template-block"
+}

apps/knapsack/data/blocks/block.LBE3NyBRxu.json

@@ -0,0 +1,52 @@
+{
+  "id": "LBE3NyBRxu",
+  "data": {
+    "guidelines": [
+      {
+        "id": "UL7Eim7XGc",
+        "type": "do",
+        "image": {
+          "src": "https://knapsack.imgix.net/site/covalent/alert-common-mistakes-overusing-title-correct-motenhycg7png",
+          "title": "Correct"
+        },
+        "content": {
+          "type": "doc",
+          "content": [
+            {
+              "type": "paragraph",
+              "content": [
+                {
+                  "text": "Lead with a short explanation of what's going on, and use the description to elaborate.",
+                  "type": "text"
+                }
+              ]
+            }
+          ]
+        }
+      },
+      {
+        "id": "WaI0kcOUfY",
+        "type": "dont",
+        "image": {
+          "src": "https://knapsack.imgix.net/site/covalent/alert-common-mistakes-overusing-title-incorrect-edr3hzulecpng",
+          "title": "Incorrect"
+        },
+        "content": {
+          "type": "doc",
+          "content": [
+            {
+              "type": "paragraph",
+              "content": [
+                {
+                  "text": "Don't write a description in place of the title.",
+                  "type": "text"
+                }
+              ]
+            }
+          ]
+        }
+      }
+    ]
+  },
+  "blockType": "guidelines"
+}

apps/knapsack/data/blocks/block.NNtso0urVj.json

@@ -0,0 +1,20 @@
+{
+  "id": "NNtso0urVj",
+  "data": {
+    "demoId": "LATgTeg21H",
+    "demoSize": "landscape",
+    "patternId": "alert",
+    "templateId": "web-components-4qjJYWsUZi",
+    "hideControls": true,
+    "playgroundUi": {
+      "demoSize": "landscape",
+      "allowResizing": false,
+      "showSchemaForm": true,
+      "showCodeSnippet": false
+    },
+    "allowResizing": false,
+    "showSchemaForm": true,
+    "showCodeSnippet": false
+  },
+  "blockType": "pattern-template-block"
+}

apps/knapsack/data/blocks/block.Tg6b4c0IqE.json

@@ -0,0 +1,20 @@
+{
+  "id": "Tg6b4c0IqE",
+  "data": {
+    "demoId": "yf2q5F2Jyk",
+    "demoSize": "landscape",
+    "patternId": "alert",
+    "templateId": "web-components-4qjJYWsUZi",
+    "hideControls": true,
+    "playgroundUi": {
+      "demoSize": "landscape",
+      "allowResizing": false,
+      "showSchemaForm": true,
+      "showCodeSnippet": false
+    },
+    "allowResizing": false,
+    "showSchemaForm": true,
+    "showCodeSnippet": false
+  },
+  "blockType": "pattern-template-block"
+}

apps/knapsack/data/blocks/block.YlQCN5mV4X.json

@@ -0,0 +1,10 @@
+{
+  "id": "YlQCN5mV4X",
+  "data": {
+    "md": [
+      "# Page-level alerts\n- Use these for page-wide messaging\n- Provide a short alert title that describes the situation clearly and succinctly\n- If a longer message is required, it can be included within the alert description\n- Use an icon and color to indicate severity of the alert\n- A single-action text button or close icon can be placed inside of an alert"
+    ],
+    "columns": 1
+  },
+  "blockType": "markdown-block"
+}

apps/knapsack/data/blocks/block.a6InsrLwTc.json

@@ -0,0 +1,52 @@
+{
+  "id": "a6InsrLwTc",
+  "data": {
+    "guidelines": [
+      {
+        "id": "Xcd9B06M9R",
+        "type": "do",
+        "image": {
+          "src": "https://knapsack.imgix.net/site/covalent/alerts-responsive-design-correct-jthr4pynpng",
+          "title": "Correct"
+        },
+        "content": {
+          "type": "doc",
+          "content": [
+            {
+              "type": "paragraph",
+              "content": [
+                {
+                  "text": "Icon and buttons maintain their position relative to the top of the alert even if the content expands.",
+                  "type": "text"
+                }
+              ]
+            }
+          ]
+        }
+      },
+      {
+        "id": "VJaLpVps9",
+        "type": "dont",
+        "image": {
+          "src": "https://knapsack.imgix.net/site/covalent/alerts-responsive-design-incorrect-8gsix3x5hpng",
+          "title": "Incorrect"
+        },
+        "content": {
+          "type": "doc",
+          "content": [
+            {
+              "type": "paragraph",
+              "content": [
+                {
+                  "text": "The icon and buttons should not vertically center when the alert grows in height.",
+                  "type": "text"
+                }
+              ]
+            }
+          ]
+        }
+      }
+    ]
+  },
+  "blockType": "guidelines"
+}

apps/knapsack/data/blocks/block.bKlWE2O54.json

@@ -0,0 +1,14 @@
+{
+  "id": "bKlWE2O54",
+  "data": {
+    "images": [
+      {
+        "src": "https://knapsack.imgix.net/site/covalent/alerts-anatomy-qzq-esibbdpng",
+        "caption": "alerts--anatomy.png"
+      }
+    ],
+    "imageSize": "full"
+  },
+  "blockType": "image-block",
+  "size": "medium"
+}