Skip to content

Commit 22e4918

Browse files
committed
add descriptions to index page
1 parent b1dedcf commit 22e4918

File tree

1 file changed

+71
-71
lines changed

1 file changed

+71
-71
lines changed

packages/dev/s2-docs/pages/s2/index.mdx

Lines changed: 71 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -17,75 +17,75 @@ export const hideFromSearch = true;
1717
[Getting started](getting-started.html)[GitHub](https://github.com/adobe/react-spectrum)
1818

1919
<ComponentCardView items={[
20-
{id: 'Getting Started', name: 'Getting Started', href: 'getting-started.html'},
21-
{id: 'Styling', name: 'Styling', href: 'styling.html'},
22-
{id: 'Migrating', name: 'Migrating', href: 'migrating.html'},
23-
{id: 'Accordion', name: 'Accordion', href: 'Accordion.html'},
24-
{id: 'ActionBar', name: 'ActionBar', href: 'ActionBar.html'},
25-
{id: 'ActionButton', name: 'ActionButton', href: 'ActionButton.html'},
26-
{id: 'ActionButtonGroup', name: 'ActionButtonGroup', href: 'ActionButtonGroup.html'},
27-
{id: 'ActionMenu', name: 'ActionMenu', href: 'ActionMenu.html'},
28-
{id: 'Avatar', name: 'Avatar', href: 'Avatar.html'},
29-
{id: 'AvatarGroup', name: 'AvatarGroup', href: 'AvatarGroup.html'},
30-
{id: 'Badge', name: 'Badge', href: 'Badge.html'},
31-
{id: 'Breadcrumbs', name: 'Breadcrumbs', href: 'Breadcrumbs.html'},
32-
{id: 'Button', name: 'Button', href: 'Button.html'},
33-
{id: 'ButtonGroup', name: 'ButtonGroup', href: 'ButtonGroup.html'},
34-
{id: 'Calendar', name: 'Calendar', href: 'Calendar.html'},
35-
{id: 'Card', name: 'Card', href: 'Card.html'},
36-
{id: 'CardView', name: 'CardView', href: 'CardView.html'},
37-
{id: 'Checkbox', name: 'Checkbox', href: 'Checkbox.html'},
38-
{id: 'CheckboxGroup', name: 'CheckboxGroup', href: 'CheckboxGroup.html'},
39-
{id: 'ColorArea', name: 'ColorArea', href: 'ColorArea.html'},
40-
{id: 'ColorField', name: 'ColorField', href: 'ColorField.html'},
41-
{id: 'ColorSlider', name: 'ColorSlider', href: 'ColorSlider.html'},
42-
{id: 'ColorSwatch', name: 'ColorSwatch', href: 'ColorSwatch.html'},
43-
{id: 'ColorSwatchPicker', name: 'ColorSwatchPicker', href: 'ColorSwatchPicker.html'},
44-
{id: 'ColorWheel', name: 'ColorWheel', href: 'ColorWheel.html'},
45-
{id: 'ComboBox', name: 'ComboBox', href: 'ComboBox.html'},
46-
{id: 'ContextualHelp', name: 'ContextualHelp', href: 'ContextualHelp.html'},
47-
{id: 'DateField', name: 'DateField', href: 'DateField.html'},
48-
{id: 'DatePicker', name: 'DatePicker', href: 'DatePicker.html'},
49-
{id: 'DateRangePicker', name: 'DateRangePicker', href: 'DateRangePicker.html'},
50-
{id: 'Dialog', name: 'Dialog', href: 'Dialog.html'},
51-
{id: 'Disclosure', name: 'Disclosure', href: 'Disclosure.html'},
52-
{id: 'Divider', name: 'Divider', href: 'Divider.html'},
53-
{id: 'DropZone', name: 'DropZone', href: 'DropZone.html'},
54-
{id: 'Form', name: 'Form', href: 'Form.html'},
55-
{id: 'Icons', name: 'Icons', href: 'icons.html'},
56-
{id: 'IllustratedMessage', name: 'IllustratedMessage', href: 'IllustratedMessage.html'},
57-
{id: 'Illustrations', name: 'Illustrations', href: 'Illustrations.html'},
58-
{id: 'Image', name: 'Image', href: 'Image.html'},
59-
{id: 'InlineAlert', name: 'InlineAlert', href: 'InlineAlert.html'},
60-
{id: 'Link', name: 'Link', href: 'Link.html'},
61-
{id: 'LinkButton', name: 'LinkButton', href: 'LinkButton.html'},
62-
{id: 'Menu', name: 'Menu', href: 'Menu.html'},
63-
{id: 'Meter', name: 'Meter', href: 'Meter.html'},
64-
{id: 'NumberField', name: 'NumberField', href: 'NumberField.html'},
65-
{id: 'Picker', name: 'Picker', href: 'Picker.html'},
66-
{id: 'Popover', name: 'Popover', href: 'Popover.html'},
67-
{id: 'ProgressBar', name: 'ProgressBar', href: 'ProgressBar.html'},
68-
{id: 'ProgressCircle', name: 'ProgressCircle', href: 'ProgressCircle.html'},
69-
{id: 'RadioGroup', name: 'RadioGroup', href: 'RadioGroup.html'},
70-
{id: 'RangeCalendar', name: 'RangeCalendar', href: 'RangeCalendar.html'},
71-
{id: 'RangeSlider', name: 'RangeSlider', href: 'RangeSlider.html'},
72-
{id: 'SearchField', name: 'SearchField', href: 'SearchField.html'},
73-
{id: 'SegmentedControl', name: 'SegmentedControl', href: 'SegmentedControl.html'},
74-
{id: 'SelectBoxGroup', name: 'SelectBoxGroup', href: 'SelectBoxGroup.html'},
75-
{id: 'Skeleton', name: 'Skeleton', href: 'Skeleton.html'},
76-
{id: 'Slider', name: 'Slider', href: 'Slider.html'},
77-
{id: 'StatusLight', name: 'StatusLight', href: 'StatusLight.html'},
78-
{id: 'Switch', name: 'Switch', href: 'Switch.html'},
79-
{id: 'TableView', name: 'TableView', href: 'TableView.html'},
80-
{id: 'Tabs', name: 'Tabs', href: 'Tabs.html'},
81-
{id: 'TagGroup', name: 'TagGroup', href: 'TagGroup.html'},
82-
{id: 'TextArea', name: 'TextArea', href: 'TextArea.html'},
83-
{id: 'TextField', name: 'TextField', href: 'TextField.html'},
84-
{id: 'TimeField', name: 'TimeField', href: 'TimeField.html'},
85-
{id: 'Toast', name: 'Toast', href: 'Toast.html'},
86-
{id: 'ToggleButton', name: 'ToggleButton', href: 'ToggleButton.html'},
87-
{id: 'ToggleButtonGroup', name: 'ToggleButtonGroup', href: 'ToggleButtonGroup.html'},
88-
{id: 'Tooltip', name: 'Tooltip', href: 'Tooltip.html'},
89-
{id: 'TreeView', name: 'TreeView', href: 'TreeView.html'},
90-
{id: 'Release Notes', name: 'Release Notes', href: 'releases/index.html'}
20+
{id: 'Getting Started', name: 'Getting Started', href: 'getting-started.html', description: 'Get started with React Spectrum S2.'},
21+
{id: 'Styling', name: 'Styling', href: 'styling.html', description: 'Learn how to style React Spectrum components.'},
22+
{id: 'Migrating', name: 'Migrating', href: 'migrating.html', description: 'Learn how to migrate from React Spectrum v3 to S2.'},
23+
{id: 'Accordion', name: 'Accordion', href: 'Accordion.html', description: 'An accordion is a grouping of related disclosures.'},
24+
{id: 'ActionBar', name: 'ActionBar', href: 'ActionBar.html', description: 'Used for single and bulk selection patterns when a user needs to perform actions on one or more items at the same time.'},
25+
{id: 'ActionButton', name: 'ActionButton', href: 'ActionButton.html', description: 'An action button allows a user to perform an action.'},
26+
{id: 'ActionButtonGroup', name: 'ActionButtonGroup', href: 'ActionButtonGroup.html', description: 'A grouping of related ActionButtons.'},
27+
{id: 'ActionMenu', name: 'ActionMenu', href: 'ActionMenu.html', description: 'Combines an ActionButton with a Menu for simple "more actions" use cases.'},
28+
{id: 'Avatar', name: 'Avatar', href: 'Avatar.html', description: 'A thumbnail representation of an entity, such as a user or an organization.'},
29+
{id: 'AvatarGroup', name: 'AvatarGroup', href: 'AvatarGroup.html', description: 'A grouping of avatars that are related to each other.'},
30+
{id: 'Badge', name: 'Badge', href: 'Badge.html', description: 'A badge displays color-categorized metadata for an object.'},
31+
{id: 'Breadcrumbs', name: 'Breadcrumbs', href: 'Breadcrumbs.html', description: 'Breadcrumbs display a hierarchy of links to the current page or resource.'},
32+
{id: 'Button', name: 'Button', href: 'Button.html', description: 'A button allows a user to perform an action or to navigate to another page.'},
33+
{id: 'ButtonGroup', name: 'ButtonGroup', href: 'ButtonGroup.html', description: 'A button group is a grouping of buttons whose actions are related to each other.'},
34+
{id: 'Calendar', name: 'Calendar', href: 'Calendar.html', description: 'A calendar allows a user to select a single date from a date grid.'},
35+
{id: 'Card', name: 'Card', href: 'Card.html', description: 'Summarizes an object that a user can select or navigate to.'},
36+
{id: 'CardView', name: 'CardView', href: 'CardView.html', description: 'Displays a group of related objects, with support for selection and bulk actions.'},
37+
{id: 'Checkbox', name: 'Checkbox', href: 'Checkbox.html', description: 'A checkbox allows a user to select an individual option.'},
38+
{id: 'CheckboxGroup', name: 'CheckboxGroup', href: 'CheckboxGroup.html', description: 'A checkbox group allows a user to select one or more items in a list of options.'},
39+
{id: 'ColorArea', name: 'ColorArea', href: 'ColorArea.html', description: 'A color area allows users to adjust two channels of a color value.'},
40+
{id: 'ColorField', name: 'ColorField', href: 'ColorField.html', description: 'A color field allows users to edit a hex color or individual color channel value.'},
41+
{id: 'ColorSlider', name: 'ColorSlider', href: 'ColorSlider.html', description: 'A color slider allows users to adjust an individual channel of a color value.'},
42+
{id: 'ColorSwatch', name: 'ColorSwatch', href: 'ColorSwatch.html', description: 'A color swatch displays a preview of a selected color.'},
43+
{id: 'ColorSwatchPicker', name: 'ColorSwatchPicker', href: 'ColorSwatchPicker.html', description: 'A color swatch picker displays a list of color swatches and allows a user to select one of them.'},
44+
{id: 'ColorWheel', name: 'ColorWheel', href: 'ColorWheel.html', description: 'A color wheel allows users to adjust the hue of a color value on a circular track.'},
45+
{id: 'ComboBox', name: 'ComboBox', href: 'ComboBox.html', description: 'A combobox combines a text input with a listbox, and allows a user to filter a list of options.'},
46+
{id: 'ContextualHelp', name: 'ContextualHelp', href: 'ContextualHelp.html', description: 'Contextual help shows extra information about an adjacent component.'},
47+
{id: 'DateField', name: 'DateField', href: 'DateField.html', description: 'A date field allows a user to enter and edit date values using a keyboard.'},
48+
{id: 'DatePicker', name: 'DatePicker', href: 'DatePicker.html', description: 'A date picker combines a DateField and a Calendar popover.'},
49+
{id: 'DateRangePicker', name: 'DateRangePicker', href: 'DateRangePicker.html', description: 'A date range picker combines two DateFields and a RangeCalendar popover.'},
50+
{id: 'Dialog', name: 'Dialog', href: 'Dialog.html', description: 'A dialog is an overlay shown above other content in an application.'},
51+
{id: 'Disclosure', name: 'Disclosure', href: 'Disclosure.html', description: 'A disclosure is a collapsible section of content.'},
52+
{id: 'Divider', name: 'Divider', href: 'Divider.html', description: 'Brings clarity to a layout by grouping and dividing content in close proximity.'},
53+
{id: 'DropZone', name: 'DropZone', href: 'DropZone.html', description: 'A drop zone is an area into which one or multiple objects can be dragged and dropped.'},
54+
{id: 'Form', name: 'Form', href: 'Form.html', description: 'A form provides layout and alignment for a grouping of fields.'},
55+
{id: 'Icons', name: 'Icons', href: 'icons.html', description: 'A collection of workflow icons that can be imported from @react-spectrum/s2/icons.'},
56+
{id: 'IllustratedMessage', name: 'IllustratedMessage', href: 'IllustratedMessage.html', description: 'Displays an illustration and a message, usually for an empty state or an error page.'},
57+
{id: 'Illustrations', name: 'Illustrations', href: 'Illustrations.html', description: 'A collection of illustrations that can be imported from @react-spectrum/s2/illustrations.'},
58+
{id: 'Image', name: 'Image', href: 'Image.html', description: 'An image with support for skeleton loading and custom error states.'},
59+
{id: 'InlineAlert', name: 'InlineAlert', href: 'InlineAlert.html', description: 'Displays a non-modal message associated with objects in a view.'},
60+
{id: 'Link', name: 'Link', href: 'Link.html', description: 'A link allows a user to navigate to another page.'},
61+
{id: 'LinkButton', name: 'LinkButton', href: 'LinkButton.html', description: 'Combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.'},
62+
{id: 'Menu', name: 'Menu', href: 'Menu.html', description: 'A menu displays a list of actions or options that a user can choose.'},
63+
{id: 'Meter', name: 'Meter', href: 'Meter.html', description: 'A meter represents a quantity within a known range, or a fractional value.'},
64+
{id: 'NumberField', name: 'NumberField', href: 'NumberField.html', description: 'A number field allows a user to enter, increment, or decrement a numeric value.'},
65+
{id: 'Picker', name: 'Picker', href: 'Picker.html', description: 'A picker displays a collapsible list of options, and allows a user to select one of them.'},
66+
{id: 'Popover', name: 'Popover', href: 'Popover.html', description: 'A popover displays interactive content in context with a trigger element.'},
67+
{id: 'ProgressBar', name: 'ProgressBar', href: 'ProgressBar.html', description: 'A progress bar shows progress of an operation over time with a linear representation.'},
68+
{id: 'ProgressCircle', name: 'ProgressCircle', href: 'ProgressCircle.html', description: 'A progress circle shows progress of an operation over time with a circular representation.'},
69+
{id: 'RadioGroup', name: 'RadioGroup', href: 'RadioGroup.html', description: 'A radio group allows a user to select a single item from a list of options.'},
70+
{id: 'RangeCalendar', name: 'RangeCalendar', href: 'RangeCalendar.html', description: 'A range calendar allows a user to select a contiguous range of dates.'},
71+
{id: 'RangeSlider', name: 'RangeSlider', href: 'RangeSlider.html', description: 'A range slider allows a user to select a range of values within a larger range.'},
72+
{id: 'SearchField', name: 'SearchField', href: 'SearchField.html', description: 'A search field allows a user to enter and clear a search query.'},
73+
{id: 'SegmentedControl', name: 'SegmentedControl', href: 'SegmentedControl.html', description: 'A mutually exclusive group of buttons used for view switching.'},
74+
{id: 'SelectBoxGroup', name: 'SelectBoxGroup', href: 'SelectBoxGroup.html', description: 'Allows users to select one or more options from a list.'},
75+
{id: 'Skeleton', name: 'Skeleton', href: 'Skeleton.html', description: 'Wraps around content to render it as a placeholder.'},
76+
{id: 'Slider', name: 'Slider', href: 'Slider.html', description: 'A slider allows a user to select a numeric value within a range.'},
77+
{id: 'StatusLight', name: 'StatusLight', href: 'StatusLight.html', description: 'A status light displays the status or category of an entity.'},
78+
{id: 'Switch', name: 'Switch', href: 'Switch.html', description: 'A switch allows a user to turn a setting on or off.'},
79+
{id: 'TableView', name: 'TableView', href: 'TableView.html', description: 'A table view displays data in rows and columns, with row selection and sorting.'},
80+
{id: 'Tabs', name: 'Tabs', href: 'Tabs.html', description: 'Tabs organize content into multiple sections, and allow a user to view one at a time.'},
81+
{id: 'TagGroup', name: 'TagGroup', href: 'TagGroup.html', description: 'A tag group displays a list of items, with support for keyboard navigation and removal.'},
82+
{id: 'TextArea', name: 'TextArea', href: 'TextArea.html', description: 'A text area allows a user to enter a multi-line text value with a keyboard.'},
83+
{id: 'TextField', name: 'TextField', href: 'TextField.html', description: 'A text field allows a user to enter a plain text value with a keyboard.'},
84+
{id: 'TimeField', name: 'TimeField', href: 'TimeField.html', description: 'A time field allows a user to enter and edit time values using a keyboard.'},
85+
{id: 'Toast', name: 'Toast', href: 'Toast.html', description: 'A toast displays a temporary notification of an action, error, or other event.'},
86+
{id: 'ToggleButton', name: 'ToggleButton', href: 'ToggleButton.html', description: 'A toggle button allows a user to toggle between two states.'},
87+
{id: 'ToggleButtonGroup', name: 'ToggleButtonGroup', href: 'ToggleButtonGroup.html', description: 'A toggle button group allows a user to toggle multiple options, with single or multiple selection.'},
88+
{id: 'Tooltip', name: 'Tooltip', href: 'Tooltip.html', description: 'A tooltip displays a description of an element on hover or focus.'},
89+
{id: 'TreeView', name: 'TreeView', href: 'TreeView.html', description: 'A tree view displays hierarchical data with selection and collapsing.'},
90+
{id: 'Release Notes', name: 'Release Notes', href: 'releases/index.html', description: 'Release notes for React Spectrum.'}
9191
]}/>

0 commit comments

Comments
 (0)