diff --git a/apps/knapsack/data/blocks/block.1-RLsl7Jhv.json b/apps/knapsack/data/blocks/block.1-RLsl7Jhv.json index 75b71e519..3b25a9838 100644 --- a/apps/knapsack/data/blocks/block.1-RLsl7Jhv.json +++ b/apps/knapsack/data/blocks/block.1-RLsl7Jhv.json @@ -18,7 +18,7 @@ "type": "paragraph", "content": [ { - "text": "Use modals sparingly to avoid disrupting user flow.", + "text": "Use modals only when the user's greatly inconvenienced in a high-severity situation.", "type": "text" } ] @@ -32,7 +32,7 @@ "type": "paragraph", "content": [ { - "text": "Include clear actions like “Retry” or “Close” buttons.", + "text": "Make modals accessible for keyboard and screen reader users.", "type": "text" } ] @@ -46,7 +46,7 @@ "type": "paragraph", "content": [ { - "text": "Make modals accessible for keyboard and screen reader users.", + "text": "Ensure the modal is centered, with focus trapped within it until resolved.", "type": "text" } ] diff --git a/apps/knapsack/data/blocks/block.5uPAVOsUif.json b/apps/knapsack/data/blocks/block.5uPAVOsUif.json deleted file mode 100644 index 4b271dd95..000000000 --- a/apps/knapsack/data/blocks/block.5uPAVOsUif.json +++ /dev/null @@ -1,32 +0,0 @@ -{ - "id": "5uPAVOsUif", - "data": { - "content": { - "type": "doc", - "content": [ - { - "type": "paragraph", - "attrs": { - "textAlign": "left" - }, - "content": [ - { - "text": "Be scalable.", - "type": "text", - "marks": [ - { - "type": "bold" - } - ] - }, - { - "text": " Gain leverage by designing cohesive interfaces that can grow with our uses, within our ecosystem, and with our industry. There should be no isolated features, functionality, or experiences.", - "type": "text" - } - ] - } - ] - } - }, - "blockType": "text-editor" -} diff --git a/apps/knapsack/data/blocks/block.7jaO5sktdd.json b/apps/knapsack/data/blocks/block.7jaO5sktdd.json index 852cacaa3..939648f8f 100644 --- a/apps/knapsack/data/blocks/block.7jaO5sktdd.json +++ b/apps/knapsack/data/blocks/block.7jaO5sktdd.json @@ -12,7 +12,33 @@ "type": "paragraph", "content": [ { - "text": "“Your session has timed out. Please log in again.”", + "text": "Consider communicating ", + "type": "text" + }, + { + "text": "what happened", + "type": "text", + "marks": [ + { + "type": "bold" + } + ] + }, + { + "text": " and ", + "type": "text" + }, + { + "text": "how to fix it", + "type": "text", + "marks": [ + { + "type": "bold" + } + ] + }, + { + "text": " in the header. It allows you to include the most important information on the top and to cover more details in the supporting text if needed. ", "type": "text" } ] @@ -30,7 +56,7 @@ "type": "paragraph", "content": [ { - "text": "“Error detected.”", + "text": "Don't be wordy. For example, use a link and succinct text to keep the entire message to 2 lines (including the header). ", "type": "text" } ] @@ -40,7 +66,7 @@ } ], "tileStyles": { - "imageSize": "xsmall", + "imageSize": "none", "headerBeforeImage": true } }, diff --git a/apps/knapsack/data/blocks/block.UxEjaaxIkz.json b/apps/knapsack/data/blocks/block.UxEjaaxIkz.json index 6a607971b..3d7710e67 100644 --- a/apps/knapsack/data/blocks/block.UxEjaaxIkz.json +++ b/apps/knapsack/data/blocks/block.UxEjaaxIkz.json @@ -24,25 +24,49 @@ }, "content": [ { - "text": "Modal errors are used for critical issues that require the user’s immediate attention. They are ideal for interruptive events where further action is not possible until the issue is addressed. See ", + "text": "Dialog-style error patterns communicate critical issues that require the user’s immediate attention. Before they can move on, the user needs to spend a considerable amount of time or effort to resolve the error. In these high-severity situations, we find it necessary to catch the user’s attention, hence the need to display a modal dialog that interrupts the user workflows. ", + "type": "text" + } + ] + }, + { + "type": "paragraph", + "attrs": { + "textAlign": "left" + }, + "content": [ + { + "text": "Accessibility", + "type": "text", + "marks": [ + { + "type": "bold" + } + ] + } + ] + }, + { + "type": "paragraph", + "attrs": { + "textAlign": "left" + }, + "content": [ + { + "text": "Support Escape key dismissal, logical Tab order, and ARIA roles (", "type": "text" }, { - "text": "Modal Design Principles", + "text": "role=\"dialog\"", "type": "text", "marks": [ { - "type": "link", - "attrs": { - "rel": "noopener", - "href": "#", - "class": null - } + "type": "code" } ] }, { - "text": " for more details.", + "text": ")", "type": "text" } ] @@ -54,183 +78,65 @@ }, "content": [ { - "text": "Categorization", + "text": "Supportive, neutral tone", "type": "text", "marks": [ { "type": "bold" } ] - }, + } + ] + }, + { + "type": "paragraph", + "attrs": { + "textAlign": "left" + }, + "content": [ { - "text": ": Modals fall under ", + "text": "Focus on communicating how the user can fix the error. Avoid using emotionally charging words such as \"fail,\" \"oops,\" \"sorry,\" and \"please\" in these already-tense situations. Learn more in ", "type": "text" }, { - "text": "critical and interruptive errors", + "text": "Content", "type": "text", "marks": [ { - "type": "bold" + "type": "link", + "attrs": { + "rel": "noopener noreferrer nofollow", + "href": "/site/covalent/OWOrjRQqam/pages/error-messages", + "class": null, + "target": "_self" + } } ] }, { - "text": ", designed to stop user workflows until the problem is acknowledged or resolved.", + "text": ".", "type": "text" } ] }, { - "type": "bulletList", + "type": "paragraph", + "attrs": { + "textAlign": "left" + }, "content": [ { - "type": "listItem", - "content": [ - { - "type": "paragraph", - "attrs": { - "textAlign": "left" - }, - "content": [ - { - "text": "Guidelines", - "type": "text", - "marks": [ - { - "type": "bold" - } - ] - }, - { - "text": ":", - "type": "text" - } - ] - }, + "text": "Elaborate and structured", + "type": "text", + "marks": [ { - "type": "bulletList", - "content": [ - { - "type": "listItem", - "content": [ - { - "type": "paragraph", - "attrs": { - "textAlign": "left" - }, - "content": [ - { - "text": "Tone", - "type": "text", - "marks": [ - { - "type": "bold" - } - ] - }, - { - "text": ": Reassuring and direct, while offering clear recovery steps (e.g., “Your session has expired. Please log in again to continue.”).", - "type": "text" - } - ] - } - ] - }, - { - "type": "listItem", - "content": [ - { - "type": "paragraph", - "attrs": { - "textAlign": "left" - }, - "content": [ - { - "text": "Clarity", - "type": "text", - "marks": [ - { - "type": "bold" - } - ] - }, - { - "text": ": Provide actionable steps and avoid vague or overly technical language.", - "type": "text" - } - ] - } - ] - }, - { - "type": "listItem", - "content": [ - { - "type": "paragraph", - "attrs": { - "textAlign": "left" - }, - "content": [ - { - "text": "Placement", - "type": "text", - "marks": [ - { - "type": "bold" - } - ] - }, - { - "text": ": Ensure the modal is centered, with focus trapped within it until resolved.", - "type": "text" - } - ] - } - ] - }, - { - "type": "listItem", - "content": [ - { - "type": "paragraph", - "attrs": { - "textAlign": "left" - }, - "content": [ - { - "text": "Accessibility", - "type": "text", - "marks": [ - { - "type": "bold" - } - ] - }, - { - "text": ": Support Escape key dismissal, logical Tab order, and ARIA roles (", - "type": "text" - }, - { - "text": "role=\"dialog\"", - "type": "text", - "marks": [ - { - "type": "code" - } - ] - }, - { - "text": ").", - "type": "text" - } - ] - } - ] - } - ] + "type": "bold" } ] + }, + { + "text": " ", + "type": "text" } ] }, @@ -238,7 +144,13 @@ "type": "paragraph", "attrs": { "textAlign": "left" - } + }, + "content": [ + { + "text": "Error messages often don’t provide enough right details to help the user get unstuck. We aim to be honest and easy to understand. Take advantage of the space in this pattern to identify the most helpful information and communicate it clearly and simply.", + "type": "text" + } + ] } ] } diff --git a/apps/knapsack/data/blocks/block.aV5phaJ18f.json b/apps/knapsack/data/blocks/block.WvuoP66qc.json similarity index 50% rename from apps/knapsack/data/blocks/block.aV5phaJ18f.json rename to apps/knapsack/data/blocks/block.WvuoP66qc.json index 1c097955b..a98675411 100644 --- a/apps/knapsack/data/blocks/block.aV5phaJ18f.json +++ b/apps/knapsack/data/blocks/block.WvuoP66qc.json @@ -1,5 +1,5 @@ { - "id": "aV5phaJ18f", + "id": "WvuoP66qc", "data": { "content": { "type": "doc", @@ -11,16 +11,7 @@ }, "content": [ { - "text": "Be informed.", - "type": "text", - "marks": [ - { - "type": "bold" - } - ] - }, - { - "text": " Design continuous learning from user interactions and behaviors in mind.", + "text": "Learn how to write for dialog-style errors:", "type": "text" } ] diff --git a/apps/knapsack/data/blocks/block.awyLfn39GO.json b/apps/knapsack/data/blocks/block.awyLfn39GO.json new file mode 100644 index 000000000..70e2bf01a --- /dev/null +++ b/apps/knapsack/data/blocks/block.awyLfn39GO.json @@ -0,0 +1,22 @@ +{ + "id": "awyLfn39GO", + "data": { + "items": [ + { + "fileId": "KvXVAmYdCVAS7hzkOa73Em", + "nodeId": "14922:6178" + }, + { + "fileId": "KvXVAmYdCVAS7hzkOa73Em", + "nodeId": "14922:6323" + } + ], + "imageStyles": { + "fit": "fill", + "size": "auto", + "seamless": true + }, + "columns": "2" + }, + "blockType": "design-src-tiles" +} diff --git a/apps/knapsack/data/blocks/block.dPn29XKOdv.json b/apps/knapsack/data/blocks/block.dPn29XKOdv.json index 73796ad19..b0a3091bf 100644 --- a/apps/knapsack/data/blocks/block.dPn29XKOdv.json +++ b/apps/knapsack/data/blocks/block.dPn29XKOdv.json @@ -24,25 +24,49 @@ }, "content": [ { - "text": "Page banner errors communicate system-wide issues or errors affecting multiple elements. They ensure users are aware of overarching problems while offering solutions or next steps. For a deeper dive, check ", + "text": "Alert-style error patterns communicate typically system-wide issues such as network outage or permission denials. The user may need to spend some amount of time or effort to fix an error. ", + "type": "text" + } + ] + }, + { + "type": "paragraph", + "attrs": { + "textAlign": "left" + }, + "content": [ + { + "text": "Accessibility", + "type": "text", + "marks": [ + { + "type": "bold" + } + ] + } + ] + }, + { + "type": "paragraph", + "attrs": { + "textAlign": "left" + }, + "content": [ + { + "text": "Use ARIA attributes like ", "type": "text" }, { - "text": "System-Wide Error Design", + "text": "aria-live=\"assertive\"", "type": "text", "marks": [ { - "type": "link", - "attrs": { - "rel": "noopener", - "href": "#", - "class": null - } + "type": "code" } ] }, { - "text": ".", + "text": " to announce critical errors.", "type": "text" } ] @@ -54,181 +78,58 @@ }, "content": [ { - "text": "Pattern Categorization", + "text": "Supportive, neutral tone", "type": "text", "marks": [ { "type": "bold" } ] - }, + } + ] + }, + { + "type": "paragraph", + "attrs": { + "textAlign": "left" + }, + "content": [ { - "text": ": Page banners are classified as ", + "text": "Focus on communicating how the user can fix the error. Avoid using emotionally charging words such as \"fail,\" \"oops,\" \"sorry,\" and \"please\" in these already-tense situations. Learn more in ", "type": "text" }, { - "text": "global errors", + "text": "Content", "type": "text", "marks": [ { - "type": "bold" + "type": "link", + "attrs": { + "rel": "noopener noreferrer nofollow", + "href": "/pages/error-messages", + "class": null + } } ] }, { - "text": ", suitable for system or application-wide issues, such as network outages or permission denials.", + "text": ".", "type": "text" } ] }, { - "type": "bulletList", + "type": "paragraph", + "attrs": { + "textAlign": "left" + }, "content": [ { - "type": "listItem", - "content": [ - { - "type": "paragraph", - "attrs": { - "textAlign": "left" - }, - "content": [ - { - "text": "Guidelines", - "type": "text", - "marks": [ - { - "type": "bold" - } - ] - }, - { - "text": ":", - "type": "text" - } - ] - }, + "text": "Brevity", + "type": "text", + "marks": [ { - "type": "bulletList", - "content": [ - { - "type": "listItem", - "content": [ - { - "type": "paragraph", - "attrs": { - "textAlign": "left" - }, - "content": [ - { - "text": "Tone", - "type": "text", - "marks": [ - { - "type": "bold" - } - ] - }, - { - "text": ": Be concise, action-oriented, and non-alarming (example: “We’re experiencing an issue. Please try again later.”).", - "type": "text" - } - ] - } - ] - }, - { - "type": "listItem", - "content": [ - { - "type": "paragraph", - "attrs": { - "textAlign": "left" - }, - "content": [ - { - "text": "Clarity", - "type": "text", - "marks": [ - { - "type": "bold" - } - ] - }, - { - "text": ": Clearly state what happened and any steps users can take.", - "type": "text" - } - ] - } - ] - }, - { - "type": "listItem", - "content": [ - { - "type": "paragraph", - "attrs": { - "textAlign": "left" - }, - "content": [ - { - "text": "Placement", - "type": "text", - "marks": [ - { - "type": "bold" - } - ] - }, - { - "text": ": Always position banners at the top of the page.", - "type": "text" - } - ] - } - ] - }, - { - "type": "listItem", - "content": [ - { - "type": "paragraph", - "attrs": { - "textAlign": "left" - }, - "content": [ - { - "text": "Accessibility", - "type": "text", - "marks": [ - { - "type": "bold" - } - ] - }, - { - "text": ": Use ARIA attributes like ", - "type": "text" - }, - { - "text": "aria-live=\"assertive\"", - "type": "text", - "marks": [ - { - "type": "code" - } - ] - }, - { - "text": " to announce critical errors.", - "type": "text" - } - ] - } - ] - } - ] + "type": "bold" } ] } @@ -238,7 +139,25 @@ "type": "paragraph", "attrs": { "textAlign": "left" - } + }, + "content": [ + { + "text": "An alert error is designed to display across a page or a container such as cards and dialogs. Use the header and supporting text to communicate briefly and clearly what happened and how to fix it.   ", + "type": "text" + } + ] + }, + { + "type": "paragraph", + "attrs": { + "textAlign": "left" + }, + "content": [ + { + "text": "Learn how to write for brevity in alert-style errors:", + "type": "text" + } + ] } ] } diff --git a/apps/knapsack/data/blocks/block.eK9pq4IRd.json b/apps/knapsack/data/blocks/block.eK9pq4IRd.json deleted file mode 100644 index c6ecabd37..000000000 --- a/apps/knapsack/data/blocks/block.eK9pq4IRd.json +++ /dev/null @@ -1,32 +0,0 @@ -{ - "id": "eK9pq4IRd", - "data": { - "content": { - "type": "doc", - "content": [ - { - "type": "paragraph", - "attrs": { - "textAlign": "left" - }, - "content": [ - { - "text": "Be delightful.", - "type": "text", - "marks": [ - { - "type": "bold" - } - ] - }, - { - "text": " Encourage bold and creative solutions in the design and implementation of the UX.", - "type": "text" - } - ] - } - ] - } - }, - "blockType": "text-editor" -} diff --git a/apps/knapsack/data/blocks/block.hPN8ajQHOR.json b/apps/knapsack/data/blocks/block.hPN8ajQHOR.json new file mode 100644 index 000000000..61395b8ed --- /dev/null +++ b/apps/knapsack/data/blocks/block.hPN8ajQHOR.json @@ -0,0 +1,334 @@ +{ + "id": "hPN8ajQHOR", + "data": { + "content": { + "type": "doc", + "content": [ + { + "type": "table", + "attrs": { + "equalColumns": true + }, + "content": [ + { + "type": "tableRow", + "content": [ + { + "type": "tableHeader", + "attrs": { + "colspan": 1, + "rowspan": 1, + "colwidth": null + }, + "content": [ + { + "type": "paragraph", + "attrs": { + "textAlign": "left" + }, + "content": [ + { + "text": "Be easy", + "type": "text", + "marks": [ + { + "type": "bold" + } + ] + } + ] + } + ] + }, + { + "type": "tableHeader", + "attrs": { + "colspan": 1, + "rowspan": 1, + "colwidth": null + }, + "content": [ + { + "type": "paragraph", + "attrs": { + "textAlign": "left" + }, + "content": [ + { + "text": "Be scalable", + "type": "text", + "marks": [ + { + "type": "bold" + } + ] + } + ] + } + ] + }, + { + "type": "tableHeader", + "attrs": { + "colspan": 1, + "rowspan": 1, + "colwidth": null + }, + "content": [ + { + "type": "paragraph", + "attrs": { + "textAlign": "left" + }, + "content": [ + { + "text": "Be trustworthy", + "type": "text", + "marks": [ + { + "type": "bold" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "tableRow", + "content": [ + { + "type": "tableCell", + "attrs": { + "colspan": 1, + "rowspan": 1, + "colwidth": null + }, + "content": [ + { + "type": "paragraph", + "attrs": { + "textAlign": "left" + }, + "content": [ + { + "text": "Simplify content and interactions and enable collaboration between AI and humans by focusing on usability and guiding users through the easiest paths to get a job done. ", + "type": "text" + } + ] + } + ] + }, + { + "type": "tableCell", + "attrs": { + "colspan": 1, + "rowspan": 1, + "colwidth": null + }, + "content": [ + { + "type": "paragraph", + "attrs": { + "textAlign": "left" + }, + "content": [ + { + "text": "Gain leverage by designing cohesive interfaces that can grow with our uses, within our ecosystem, and with our industry. There should be no isolated features, functionality, or experiences.", + "type": "text" + } + ] + } + ] + }, + { + "type": "tableCell", + "attrs": { + "colspan": 1, + "rowspan": 1, + "colwidth": null + }, + "content": [ + { + "type": "paragraph", + "attrs": { + "textAlign": "left" + }, + "content": [ + { + "text": "Promote clarity, inclusivity and accessibility to foster trust and transparency in decision making. ", + "type": "text" + } + ] + } + ] + } + ] + }, + { + "type": "tableRow", + "content": [ + { + "type": "tableHeader", + "attrs": { + "colspan": 1, + "rowspan": 1, + "colwidth": null + }, + "content": [ + { + "type": "paragraph", + "attrs": { + "textAlign": "left" + }, + "content": [ + { + "text": "Be delightful", + "type": "text", + "marks": [ + { + "type": "bold" + } + ] + } + ] + } + ] + }, + { + "type": "tableHeader", + "attrs": { + "colspan": 1, + "rowspan": 1, + "colwidth": null + }, + "content": [ + { + "type": "paragraph", + "attrs": { + "textAlign": "left" + }, + "content": [ + { + "text": "Be informed", + "type": "text", + "marks": [ + { + "type": "bold" + } + ] + } + ] + } + ] + }, + { + "type": "tableHeader", + "attrs": { + "colspan": 1, + "rowspan": 1, + "colwidth": null + }, + "content": [ + { + "type": "paragraph", + "attrs": { + "textAlign": "left" + }, + "content": [ + { + "text": "Be open and connected", + "type": "text", + "marks": [ + { + "type": "bold" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "tableRow", + "content": [ + { + "type": "tableCell", + "attrs": { + "colspan": 1, + "rowspan": 1, + "colwidth": null + }, + "content": [ + { + "type": "paragraph", + "attrs": { + "textAlign": "left" + }, + "content": [ + { + "text": "Encourage bold and creative solutions in the design and implementation of the UX.", + "type": "text" + } + ] + } + ] + }, + { + "type": "tableCell", + "attrs": { + "colspan": 1, + "rowspan": 1, + "colwidth": null + }, + "content": [ + { + "type": "paragraph", + "attrs": { + "textAlign": "left" + }, + "content": [ + { + "text": "Design continuous learning from user interactions and behaviors in mind.", + "type": "text" + } + ] + } + ] + }, + { + "type": "tableCell", + "attrs": { + "colspan": 1, + "rowspan": 1, + "colwidth": null + }, + "content": [ + { + "type": "paragraph", + "attrs": { + "textAlign": "left" + }, + "content": [ + { + "text": "Design with interoperability and integration in mind.", + "type": "text" + } + ] + } + ] + } + ] + } + ] + } + ] + } + }, + "spacing": "medium", + "blockType": "table" +} diff --git a/apps/knapsack/data/blocks/block.6uCPA0GBmb.json b/apps/knapsack/data/blocks/block.m6bffEZjDn.json similarity index 52% rename from apps/knapsack/data/blocks/block.6uCPA0GBmb.json rename to apps/knapsack/data/blocks/block.m6bffEZjDn.json index 9edefec1a..f780a6bb2 100644 --- a/apps/knapsack/data/blocks/block.6uCPA0GBmb.json +++ b/apps/knapsack/data/blocks/block.m6bffEZjDn.json @@ -1,16 +1,20 @@ { - "id": "6uCPA0GBmb", + "id": "m6bffEZjDn", "data": { "items": [ { "fileId": "KvXVAmYdCVAS7hzkOa73Em", - "nodeId": "14798:34543" + "nodeId": "14995:6253" + }, + { + "fileId": "KvXVAmYdCVAS7hzkOa73Em", + "nodeId": "14958:5931" } ], - "columns": "1", + "columns": "2", "imageStyles": { "fit": "fill", - "size": "large", + "size": "auto", "seamless": true } }, diff --git a/apps/knapsack/data/blocks/block.nHHM8ZY1t.json b/apps/knapsack/data/blocks/block.nHHM8ZY1t.json index 50f069e83..f69ebca7e 100644 --- a/apps/knapsack/data/blocks/block.nHHM8ZY1t.json +++ b/apps/knapsack/data/blocks/block.nHHM8ZY1t.json @@ -167,7 +167,7 @@ }, "content": [ { - "text": "Learn how to write for brevity in these errors:", + "text": "Learn how to write for brevity in the in-line errors:", "type": "text" } ] diff --git a/apps/knapsack/data/blocks/block.3kH6S7G1B.json b/apps/knapsack/data/blocks/block.tNlAQ5fw8.json similarity index 51% rename from apps/knapsack/data/blocks/block.3kH6S7G1B.json rename to apps/knapsack/data/blocks/block.tNlAQ5fw8.json index b9fc898e2..d1a328215 100644 --- a/apps/knapsack/data/blocks/block.3kH6S7G1B.json +++ b/apps/knapsack/data/blocks/block.tNlAQ5fw8.json @@ -1,5 +1,5 @@ { - "id": "3kH6S7G1B", + "id": "tNlAQ5fw8", "data": { "content": { "type": "doc", @@ -11,16 +11,25 @@ }, "content": [ { - "text": "Be easy.", + "text": "See more error message examples in ", + "type": "text" + }, + { + "text": "Content", "type": "text", "marks": [ { - "type": "bold" + "type": "link", + "attrs": { + "rel": "noopener noreferrer nofollow", + "href": "/pages/error-messages", + "class": null + } } ] }, { - "text": " Simplify content and interactions and enable collaboration between AI and humans by focusing on usability and guiding users through the easiest paths to get a job done. ", + "text": ". ", "type": "text" } ] diff --git a/apps/knapsack/data/blocks/block.uJcFZb7sP.json b/apps/knapsack/data/blocks/block.uJcFZb7sP.json deleted file mode 100644 index aa7548429..000000000 --- a/apps/knapsack/data/blocks/block.uJcFZb7sP.json +++ /dev/null @@ -1,32 +0,0 @@ -{ - "id": "uJcFZb7sP", - "data": { - "content": { - "type": "doc", - "content": [ - { - "type": "paragraph", - "attrs": { - "textAlign": "left" - }, - "content": [ - { - "text": "Be trustworthy:", - "type": "text", - "marks": [ - { - "type": "bold" - } - ] - }, - { - "text": " Promote clarity, inclusivity and accessibility to foster trust and transparency in decision making. ", - "type": "text" - } - ] - } - ] - } - }, - "blockType": "text-editor" -} diff --git a/apps/knapsack/data/blocks/block.xAJ2NvEab.json b/apps/knapsack/data/blocks/block.xAJ2NvEab.json deleted file mode 100644 index b2c5b9b19..000000000 --- a/apps/knapsack/data/blocks/block.xAJ2NvEab.json +++ /dev/null @@ -1,33 +0,0 @@ -{ - "id": "xAJ2NvEab", - "data": { - "content": { - "type": "doc", - "content": [ - { - "type": "paragraph", - "attrs": { - "textAlign": "left" - }, - "content": [ - { - "text": "Be open and connected.", - "type": "text", - "marks": [ - { - "type": "bold" - } - ] - }, - { - "text": " Design with interoperability and integration in mind.", - "type": "text" - } - ] - } - ] - } - }, - "blockType": "text-editor", - "spacing": "large" -} diff --git a/apps/knapsack/data/blocks/block.zX0mNiwTGt.json b/apps/knapsack/data/blocks/block.zX0mNiwTGt.json index 9ce76b5b4..388be9262 100644 --- a/apps/knapsack/data/blocks/block.zX0mNiwTGt.json +++ b/apps/knapsack/data/blocks/block.zX0mNiwTGt.json @@ -9,11 +9,172 @@ "type": "doc", "content": [ { - "type": "paragraph", + "type": "orderedList", + "attrs": { + "start": 1 + }, "content": [ { - "text": "“Your changes couldn’t be saved due to a network error. Please check your connection and try again.”", - "type": "text" + "type": "listItem", + "content": [ + { + "type": "paragraph", + "content": [ + { + "text": "Structure details of the message by: ", + "type": "text" + } + ] + }, + { + "type": "bulletList", + "content": [ + { + "type": "listItem", + "content": [ + { + "type": "paragraph", + "content": [ + { + "text": "Primary information:", + "type": "text" + } + ] + }, + { + "type": "bulletList", + "content": [ + { + "type": "listItem", + "content": [ + { + "type": "paragraph", + "content": [ + { + "text": "What happened", + "type": "text", + "marks": [ + { + "type": "bold" + } + ] + }, + { + "text": " (header)", + "type": "text" + } + ] + } + ] + }, + { + "type": "listItem", + "content": [ + { + "type": "paragraph", + "content": [ + { + "text": "Underlying issue", + "type": "text", + "marks": [ + { + "type": "bold" + } + ] + }, + { + "text": " if known and helpful to include (first paragraph)", + "type": "text" + } + ] + } + ] + }, + { + "type": "listItem", + "content": [ + { + "type": "paragraph", + "content": [ + { + "text": "How to fix it", + "type": "text", + "marks": [ + { + "type": "bold" + } + ] + }, + { + "text": " (second paragraph)", + "type": "text" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "listItem", + "content": [ + { + "type": "paragraph", + "content": [ + { + "text": "Secondary information: Work with your engineering partner to provide ", + "type": "text" + }, + { + "text": "error details", + "type": "text", + "marks": [ + { + "type": "bold" + } + ] + }, + { + "text": " that users can provide when they contact Support.", + "type": "text" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "listItem", + "content": [ + { + "type": "paragraph", + "content": [ + { + "text": "Speak of the solution clearly and simply in the \"how to fix\" portion of the message. ", + "type": "text" + } + ] + } + ] + }, + { + "type": "listItem", + "content": [ + { + "type": "paragraph", + "content": [ + { + "text": "Provide a simple and actionable CTA in response to the recommended fix. ", + "type": "text" + } + ] + } + ] } ] } @@ -30,17 +191,64 @@ "type": "paragraph", "content": [ { - "text": "“System failure.”", + "text": "Don't say:", "type": "text" } ] + }, + { + "type": "bulletList", + "content": [ + { + "type": "listItem", + "content": [ + { + "type": "paragraph", + "content": [ + { + "text": "\"Unable.\" Instead use \"Couldn't.\" Which is inclusive without the \"able-\" language and accurate as it means someone tried doing something but couldn't. ", + "type": "text" + } + ] + } + ] + }, + { + "type": "listItem", + "content": [ + { + "type": "paragraph", + "content": [ + { + "text": "\"There's a problem.\" Sweat the details to get the most helpful information.", + "type": "text" + } + ] + } + ] + }, + { + "type": "listItem", + "content": [ + { + "type": "paragraph", + "content": [ + { + "text": "\"Done.\" Instead use a verb-led phrase to provide an actionable path forward. ", + "type": "text" + } + ] + } + ] + } + ] } ] } } ], "tileStyles": { - "imageSize": "xsmall", + "imageSize": "none", "headerBeforeImage": true } }, diff --git a/apps/knapsack/data/db.yml b/apps/knapsack/data/db.yml index cb529967b..89eb81b53 100644 --- a/apps/knapsack/data/db.yml +++ b/apps/knapsack/data/db.yml @@ -22,10 +22,10 @@ settings: files: - fileId: KvXVAmYdCVAS7hzkOa73Em name: Covalent principles - priorVersion: '2171352255511550622' + priorVersion: '2173589512068571830' type: figma - url: https://www.figma.com/file/KvXVAmYdCVAS7hzkOa73Em?version-id=2173155024554587405 - version: '2173155024554587405' + url: https://www.figma.com/file/KvXVAmYdCVAS7hzkOa73Em?version-id=2173636163435614104 + version: '2173636163435614104' favicon: https://knapsack.imgix.net/site/covalent/t-favicon-6zimud2smwpng hideTitleInNavigation: true logoUrl: https://knapsack.imgix.net/site/covalent/td-covalent-wordmark-sgyys2jeuwpng diff --git a/apps/knapsack/data/knapsack.custom-page.design-principles.yml b/apps/knapsack/data/knapsack.custom-page.design-principles.yml index 1811f2330..e5dbd360f 100644 --- a/apps/knapsack/data/knapsack.custom-page.design-principles.yml +++ b/apps/knapsack/data/knapsack.custom-page.design-principles.yml @@ -1,13 +1,7 @@ id: design-principles title: Design principles blockIds: - - 6uCPA0GBmb - - 3kH6S7G1B - - 5uPAVOsUif - - uJcFZb7sP - - eK9pq4IRd - - aV5phaJ18f - - xAJ2NvEab + - hPN8ajQHOR - fv1M89R1zW - TFWW6KgbAw - 89oXBq5btk diff --git a/apps/knapsack/data/knapsack.pattern.errors.json b/apps/knapsack/data/knapsack.pattern.errors.json index d8faa8735..074fc36fa 100644 --- a/apps/knapsack/data/knapsack.pattern.errors.json +++ b/apps/knapsack/data/knapsack.pattern.errors.json @@ -48,7 +48,9 @@ "Y8HzdS7gPp", "s3qKyUsCT6", "dPn29XKOdv", + "m6bffEZjDn", "7jaO5sktdd", + "tNlAQ5fw8", "v5QzDxTnwZ", "XR3LF00yVM", "932llFVJGi", @@ -64,6 +66,8 @@ "q-igZuXadc", "gwdmBDCoI", "UxEjaaxIkz", + "WvuoP66qc", + "awyLfn39GO", "zX0mNiwTGt", "RSU0NhIsTj", "mOhFCMFtD8",