Skip to content

Commit

Permalink
Merge pull request #2431 from Teradata/knapsack/2egZzFVGTn
Browse files Browse the repository at this point in the history 
knapsack/2egZzFVGTn by B
  • Loading branch information
@knapsack-cloud
knapsack-cloud[bot] authored Feb 18, 2025
2 parents 0ca5750 + c2b695a commit 5b0fd7f
Showing 1 changed file with 35 additions and 136 deletions.
171 changes: 35 additions & 136 deletions apps/knapsack/data/blocks/block.5LwhbAGNc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,16 +33,7 @@
},
"content": [
{
"text": "Header: ",
"type": "text",
"marks": [
{
"type": "bold"
}
]
},
{
"text": "Establishes context for the task list and introduces the purpose of the cards. The header uses semantic markup to support accessibility and screen readers.",
"text": "Provides context and introduces the onboarding or task sequence using a title or message to succinctly communicate the overarching goal or status of the tasks.",
"type": "text"
}
]
Expand All @@ -59,16 +50,7 @@
},
"content": [
{
"text": "Progress:",
"type": "text",
"marks": [
{
"type": "bold"
}
]
},
{
"text": " Displays task progress, helping users track completion in a visual and numerical format. The purpose is to encourage user engagement by showing the remaining tasks.",
"text": "Wraps the onboarding cards in a collapsible format, which can be expanded or collapsed to show or hide the cards, helping manage screen real estate and focus.",
"type": "text"
}
]
Expand All @@ -85,103 +67,30 @@
},
"content": [
{
"text": "Section card:",
"type": "text",
"marks": [
{
"type": "bold"
}
]
},
{
"text": " Cards are structured within a flexible, reusable container for consistency with each containing the following:",
"text": "Visual indicator showing the user's progression through the onboarding steps, typically represented as \"X/Y Complete,\" which helps motivate and guide users through the setup process.",
"type": "text"
}
]
},
}
]
},
{
"type": "listItem",
"content": [
{
"type": "bulletList",
"type": "paragraph",
"attrs": {
"textAlign": "left"
},
"content": [
{
"type": "listItem",
"content": [
{
"type": "paragraph",
"attrs": {
"textAlign": "left"
},
"content": [
{
"text": "Icon: Provides a visual representation of the task",
"type": "text"
}
]
}
]
},
{
"type": "listItem",
"content": [
{
"type": "paragraph",
"attrs": {
"textAlign": "left"
},
"content": [
{
"text": "Title: Clear action-based task description",
"type": "text"
}
]
}
]
},
{
"type": "listItem",
"content": [
{
"type": "paragraph",
"attrs": {
"textAlign": "left"
},
"content": [
{
"text": "Description: Concise summary of the task’s purpose",
"type": "text"
}
]
}
]
},
{
"type": "listItem",
"content": [
{
"type": "paragraph",
"attrs": {
"textAlign": "left"
},
"content": [
{
"text": "Call-to-Action (CTA): triggers next steps in the workflow",
"type": "text"
}
]
}
]
"text": "Positioned prominently to allow users to bypass the entire onboarding process or task list, enabling those familiar with the system to quickly move past introductory tasks.",
"type": "text"
}
]
}
]
}
]
},
{
"type": "orderedList",
"attrs": {
"start": 1
},
"content": [
},
{
"type": "listItem",
"content": [
Expand All @@ -192,16 +101,7 @@
},
"content": [
{
"text": "Navigation:",
"type": "text",
"marks": [
{
"type": "bold"
}
]
},
{
"text": " Houses secondary controls, such as \"Skip All\", allowing users to bypass tasks. Supports efficient task management while preserving workflow control.",
"text": "An icon button that changes state (e.g., up/down arrow) to control the expansion or collapse of the accordion container, indicating whether the accordion is open or closed.",
"type": "text"
}
]
Expand All @@ -218,16 +118,7 @@
},
"content": [
{
"text": "Button: ",
"type": "text",
"marks": [
{
"type": "bold"
}
]
},
{
"text": "Primary interactive elements directing users toward task completion. Uses ARIA roles to enhance accessibility and usability.",
"text": "Positioned at the edges of the card carousel, these buttons allow users to view additional cards by navigating left or right through the onboarding card carousel.",
"type": "text"
}
]
Expand All @@ -244,16 +135,24 @@
},
"content": [
{
"text": "Icon button:",
"type": "text",
"marks": [
{
"type": "bold"
}
]
},
"text": "Individual containers for each task or step in the onboarding process, which include icons, titles, descriptions, and a call-to-action(CTA) button specific to each task, providing a clear and actionable path for users.",
"type": "text"
}
]
}
]
},
{
"type": "listItem",
"content": [
{
"type": "paragraph",
"attrs": {
"textAlign": "left"
},
"content": [
{
"text": " Small, action-driven elements enabling secondary interactions, such as expanding or skipping content. Provides progressive disclosure to maintain a clean UI",
"text": "Dots or other markers that indicate the current slide within the carousel and the total number of slides, with the currently active card highlighted in a darker shade to clearly show the user's position within the sequence.",
"type": "text"
}
]
Expand Down

0 comments on commit 5b0fd7f

Please sign in to comment.