mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-07-30 03:09:50 +08:00
113 lines
4.2 KiB
YAML
113 lines
4.2 KiB
YAML
name: Trial Bar
|
|
description: A persistent notification banner that informs users about trial status, subscription expiration, or upgrade opportunities,
|
|
typically displayed at the top of the interface.
|
|
category: Feedback
|
|
slds_classes:
|
|
root: slds-trial-header
|
|
elements: []
|
|
modifiers: []
|
|
states:
|
|
- class: slds-is-open
|
|
description: Visible trial bar state
|
|
trigger: Applied when trial bar is displayed
|
|
- class: slds-is-closed
|
|
description: Hidden trial bar state
|
|
trigger: Applied when trial bar is dismissed
|
|
variants:
|
|
- name: Base
|
|
description: Standard trial notification bar
|
|
classes:
|
|
- slds-trial-header
|
|
usage_context: Default implementation for trial notifications
|
|
differences: Basic informational styling for trial status
|
|
- name: Warning
|
|
description: Warning trial bar for expiring trials
|
|
classes:
|
|
- slds-trial-header
|
|
usage_context: When trial is expiring soon
|
|
differences: Warning styling with urgency indicators
|
|
- name: Expired
|
|
description: Expired trial notification
|
|
classes:
|
|
- slds-trial-header
|
|
usage_context: When trial has expired
|
|
differences: Error styling for expired trial state
|
|
lightning_component:
|
|
name: No direct component
|
|
url: https://developer.salesforce.com/docs/component-library/overview/components
|
|
mapping_notes: No direct Lightning Base Component equivalent - typically implemented using custom components or lightning-notification
|
|
accessibility:
|
|
keyboard_support:
|
|
- Tab navigation to action buttons
|
|
- Enter/Space to activate actions
|
|
- Escape to dismiss if dismissible
|
|
screen_reader:
|
|
- Trial status and urgency announced
|
|
- Action options clearly described
|
|
- Dismissal capability communicated
|
|
aria_attributes:
|
|
- role='banner' for trial notification
|
|
- aria-label describing trial status
|
|
- aria-live for dynamic updates
|
|
- aria-hidden when dismissed
|
|
usage_guidelines:
|
|
when_to_use:
|
|
- For trial period notifications
|
|
- When subscription status needs attention
|
|
- For upgrade or renewal prompts
|
|
- To communicate time-sensitive offers
|
|
when_not_to_use:
|
|
- For general system notifications (use toast)
|
|
- For error messages (use alert)
|
|
- For one-time announcements
|
|
best_practices:
|
|
- Keep message concise and actionable
|
|
- Use appropriate urgency styling
|
|
- Provide clear call-to-action
|
|
- Allow dismissal when appropriate
|
|
- Update content based on trial status
|
|
common_mistakes:
|
|
- Overly aggressive or persistent notifications
|
|
- Unclear trial status or next steps
|
|
- Missing dismissal options
|
|
- Poor visual hierarchy
|
|
code_examples:
|
|
- title: Basic Trial Bar
|
|
description: Expired trial notification with limited access message
|
|
code: "<div class=\"slds-trial-header slds-is-open\" role=\"banner\" aria-label=\"Trial expired notification\">\n <div\
|
|
\ class=\"\">\n <div class=\"\">\n <span class=\"\">\n <svg class=\"slds-icon slds-icon_x-small\"\
|
|
\ aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#error\"></use>\n\
|
|
\ </svg>\n </span>\n <span class=\"slds-text-body_regular\">\n <strong>Your trial\
|
|
\ has expired.</strong>\\ \n You now have limited access. Subscribe to restore full functionality.\n \
|
|
\ </span>\n </div>\n <div class=\"\">\n <button class=\"slds-button slds-button_brand slds-button_small\"\
|
|
>\n Subscribe Now\n </button>\n </div>\n </div>\n </div>\n"
|
|
dependencies:
|
|
css_files:
|
|
- trial-header.css
|
|
- button.css
|
|
- notification.css
|
|
javascript:
|
|
- trial-header.js
|
|
icons:
|
|
- utility-sprite.svg
|
|
other_components:
|
|
- button
|
|
- notification
|
|
related_components:
|
|
- name: Toast
|
|
relationship: alternative
|
|
description: Alternative for temporary notifications
|
|
- name: Alert
|
|
relationship: similar
|
|
description: Similar notification concept
|
|
- name: Global Header
|
|
relationship: container
|
|
description: Often positioned near global header
|
|
references:
|
|
official_docs: https://v1.lightningdesignsystem.com/components/trial-bar/
|
|
metadata:
|
|
version: 1.0.0
|
|
last_updated: '2025-11-12'
|
|
review_status: complete
|
|
notes: ' Cleaned invalid classes and CSS variables on 2025-11-12 using slds-plus.css as source of truth.'
|