kris/afv-library
1
0
Fork 0
mirror of https://github.com/forcedotcom/afv-library.git synced 2026-07-30 03:09:50 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
2c6aefabd7
afv-library/skills/design-systems-slds-apply/assets/blueprints/components/setup-assistant.yaml

153 lines
8.8 KiB
YAML
Raw Blame History

name: Setup Assistant
description: A guided setup component that helps users complete onboarding or configuration tasks. Displays a list of steps
with progress indicators and expandable details for each step.
category: Complex Components
slds_classes:
root: slds-setup-assistant
elements:
- class: slds-setup-assistant__item
description: Individual setup item in the list
purpose: Wraps each setup step
- class: slds-setup-assistant__step-summary
description: Summary portion of setup step
purpose: Displays step title and status
- class: slds-setup-assistant__step-summary-content
description: Content area of step summary
purpose: Contains step text and description
modifiers: []
states: []
variants:
- name: Base
description: Standard setup assistant with steps
classes:
- slds-setup-assistant
usage_context: Default guided setup implementation
differences: List of setup steps with expand/collapse
lightning_component:
name: ''
url: https://developer.salesforce.com/docs/component-library/overview/components
mapping_notes: No direct Lightning Base Component - typically built with custom components and lightning-accordion
accessibility:
keyboard_support:
- Tab to navigate between steps
- Enter or Space to expand/collapse steps
- Arrow keys to move through steps
screen_reader:
- List structure announced
- Step count announced
- Completion status announced
- Expanded/collapsed state announced
aria_attributes:
- role='list' on assistant container
- role='listitem' on steps
- aria-expanded on expandable steps
- aria-label describing setup purpose
- Progress indicators accessible
usage_guidelines:
when_to_use:
- For onboarding new users
- For setup and configuration wizards
- When guiding through multi-step processes
- For progressive disclosure of setup tasks
when_not_to_use:
- For simple single-step processes
- When steps don't have logical sequence
- For navigation (use tabs or menu)
- When all information should be visible at once
best_practices:
- Show progress clearly (steps completed/total)
- Allow non-linear completion when possible
- Mark completed steps visually
- Provide clear next action for each step
- Keep step descriptions concise
- Allow users to skip optional steps
common_mistakes:
- Forcing linear progression when unnecessary
- Unclear completion status
- Too many steps overwhelming users
- Missing progress indication
- No way to skip optional steps
code_examples:
- title: Basic Setup Assistant
code: "<div class=\"slds-setup-assistant\" role=\"list\" aria-label=\"Setup steps\">\n <ul class=\"\">\n <li\
\ class=\"slds-setup-assistant__item\" role=\"listitem\">\n <article class=\"\">\n <div class=\"slds-setup-assistant__step-summary\"\
\ role=\"button\" aria-expanded=\"false\" aria-controls=\"step-1-details\">\n <div class=\"slds-media\">\n\
\ <div class=\"slds-media__figure\">\n <span class=\"slds-icon_container slds-icon-utility-success\"\
\ title=\"Complete\">\n <svg class=\"slds-icon slds-icon_small slds-icon-text-success\" aria-hidden=\"\
true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#success\"></use>\n \
\ </svg>\n <span class=\"slds-assistive-text\">Complete</span>\n </span>\n\
\ </div>\n <div class=\"slds-media__body\">\n <div class=\"slds-setup-assistant__step-summary-content\"\
>\n <h3 class=\"slds-setup-assistant__step-summary-title slds-text-heading_small\">\n \
\ Verify Your Email\n </h3>\n <p>Check your inbox and click the verification\
\ link.</p>\n </div>\n </div>\n </div>\n </div>\n <div\
\ class=\"slds-setup-assistant__step-detail slds-hide\" id=\"step-1-details\">\n <div class=\"slds-text-longform\"\
>\n <p>You've successfully verified your email address!</p>\n </div>\n </div>\n\
\ </article>\n </li>\n <li class=\"slds-setup-assistant__item\" role=\"listitem\">\n <article\
\ class=\"\">\n <div class=\"slds-setup-assistant__step-summary\" role=\"button\" aria-expanded=\"true\" aria-controls=\"\
step-2-details\">\n <div class=\"slds-media\">\n <div class=\"slds-media__figure\">\n \
\ <span class=\"slds-icon_container slds-icon-utility-info\" title=\"In Progress\">\n \
\ <svg class=\"slds-icon slds-icon_small slds-icon-text-default\" aria-hidden=\"true\">\n <use xlink:href=\"\
/assets/icons/utility-sprite/svg/symbols.svg#info\"></use>\n </svg>\n <span class=\"\
slds-assistive-text\">In Progress</span>\n </span>\n </div>\n <div class=\"\
slds-media__body\">\n <div class=\"slds-setup-assistant__step-summary-content\">\n \
\ <h3 class=\"slds-setup-assistant__step-summary-title slds-text-heading_small\">\n Complete Your\
\ Profile\n </h3>\n <p>Add your name, photo, and contact information.</p>\n \
\ </div>\n </div>\n </div>\n </div>\n <div class=\"slds-setup-assistant__step-detail\"\
\ id=\"step-2-details\">\n <div class=\"slds-text-longform\">\n <p>Complete your profile to\
\ personalize your experience.</p>\n <button class=\"slds-button slds-button_brand slds-m-top_medium\"\
>\n Edit Profile\n </button>\n </div>\n </div>\n </article>\n\
\ </li>\n <li class=\"slds-setup-assistant__item\" role=\"listitem\">\n <article class=\"\">\n\
\ <div class=\"slds-setup-assistant__step-summary\" role=\"button\" aria-expanded=\"false\" aria-controls=\"\
step-3-details\">\n <div class=\"slds-media\">\n <div class=\"slds-media__figure\">\n \
\ <span class=\"slds-icon_container\" title=\"Not Started\">\n <svg class=\"slds-icon\
\ slds-icon_small slds-icon-text-default\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#check\"\
></use>\n </svg>\n <span class=\"slds-assistive-text\">Not Started</span>\n \
\ </span>\n </div>\n <div class=\"slds-media__body\">\n <div\
\ class=\"slds-setup-assistant__step-summary-content\">\n <h3 class=\"slds-setup-assistant__step-summary-title\
\ slds-text-heading_small\">\n Connect Your Accounts\n </h3>\n \
\ <p>Link your social media and other accounts.</p>\n </div>\n </div>\n \
\ </div>\n </div>\n <div class=\"slds-setup-assistant__step-detail slds-hide\" id=\"step-3-details\"\
>\n <div class=\"slds-text-longform\">\n <p>Connect your accounts to import contacts and share\
\ content.</p>\n <button class=\"slds-button slds-button_neutral slds-m-top_medium\">\n \
\ Connect Accounts\n </button>\n </div>\n </div>\n </article>\n \
\ </li>\n </ul>\n </div>\n"
styling_hooks: []
dependencies:
css_files:
- setup-assistant.css
- media-object.css
- icon.css
javascript:
- Step expand/collapse
- Progress tracking
- Step completion management
icons:
- utility:success
- utility:info
- utility:check
other_components:
- media-object
- icon
- button
related_components:
- name: Accordion
relationship: similar
description: Similar expand/collapse pattern
- name: Progress Indicator
relationship: complementary
description: Alternative progress display
- name: Path
relationship: similar
description: Alternative guided process pattern
references:
official_docs: https://v1.lightningdesignsystem.com/components/setup-assistant/
metadata:
version: 1.0.0
last_updated: '2025-11-12'
author: SLDS Documentation Team
slds_version: 2.27.2
review_status: complete
source: official-slds
notes: Created from official SLDS documentation and design-system-internal source code Cleaned invalid classes and CSS variables
on 2025-11-12 using slds-plus.css as source of truth.
Reference in New Issue View Git Blame Copy Permalink