-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1992 from genesiscommunitysuccess/mw/PTL-0-live-e…
…xample-summary-pages feat: add live example index pages for primitive components PTL-0
- Loading branch information
Showing
23 changed files
with
592 additions
and
114 deletions.
There are no files selected for viewing
126 changes: 126 additions & 0 deletions
126
docs/001_develop/03_client-capabilities/007_forms/forms-index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| import LiveExampleBuilder from '@site/src/components/LiveExampleBuilder'; | ||
| import {useUpdateCSSVariable} from '@site/src/components/Hooks'; | ||
|
|
||
| import ButtonDemo from '/examples/ui/client-capabilities/interaction/button.js'; | ||
| import CheckboxDemo from '/examples/ui/client-capabilities/interaction/checkbox.js'; | ||
| import ComboboxDemo from '/examples/ui/client-capabilities/interaction/combobox.js'; | ||
| import FileUploadDemo from '/examples/ui/client-capabilities/interaction/fileupload.js'; | ||
| import NumberFieldDemo from '/examples/ui/client-capabilities/interaction/number-field.js'; | ||
| import RadioGroupDemo from '/examples/ui/client-capabilities/interaction/radiogroup.js'; | ||
| import RadioDemo from '/examples/ui/client-capabilities/interaction/radio.js'; | ||
| import SelectDemo from '/examples/ui/client-capabilities/interaction/select.js'; | ||
| import SliderDemo from '/examples/ui/client-capabilities/interaction/slider.js'; | ||
| import StepperDemo from '/examples/ui/client-capabilities/interaction/stepper.js'; | ||
| import SwitchDemo from '/examples/ui/client-capabilities/interaction/switch.js'; | ||
| import TextAreaDemo from '/examples/ui/client-capabilities/interaction/text-area.js'; | ||
| import TextFieldDemo from '/examples/ui/client-capabilities/interaction/text-field.js'; | ||
| import ToolbarDemo from '/examples/ui/client-capabilities/interaction/toolbar.js'; | ||
|
|
||
| import CriteriaSegmentedControlDemo from '/examples/ui/client-capabilities/interaction/criteria-segmented-control.js'; | ||
| import SegmentedControlDemo from '/examples/ui/client-capabilities/interaction/segmented-control.js'; | ||
|
|
||
| const cardData = [ | ||
| { | ||
| "heading": "Button", | ||
| "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-button/", | ||
| "text": "Clickable element to indicate action", | ||
| children: <ButtonDemo />, | ||
| }, | ||
| { | ||
| "heading": "Checkbox", | ||
| "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-checkbox/", | ||
| "text": "Control for selecting multiple options", | ||
| children: <CheckboxDemo />, | ||
| }, | ||
| { | ||
| "heading": "Criteria Segmented Control", | ||
| "link": "/develop/client-capabilities/forms/form-layout/client-interaction-criteria-segmented-control/", | ||
| "text": "Generate a criteria based on a selected item", | ||
| children: <CriteriaSegmentedControlDemo />, | ||
| }, | ||
| { | ||
| "heading": "Combobox", | ||
| "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-combobox/", | ||
| "text": "Combination of text input and dropdown list", | ||
| children: <ComboboxDemo />, | ||
| }, | ||
| { | ||
| "heading": "File Upload", | ||
| "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-file-upload/", | ||
| "text": "Control for uploading files", | ||
| children: <FileUploadDemo />, | ||
| }, | ||
| { | ||
| "heading": "Number Field", | ||
| "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-number-field/", | ||
| "text": "Input field for numerical values", | ||
| children: <NumberFieldDemo />, | ||
| }, | ||
| { | ||
| "heading": "Radio Group", | ||
| "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-radio-group/", | ||
| "text": "Group of mutually exclusive options", | ||
| children: <RadioGroupDemo />, | ||
| }, | ||
| { | ||
| "heading": "Radio", | ||
| "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-radio/", | ||
| "text": "Single selection control", | ||
| children: <RadioDemo />, | ||
| }, | ||
| { | ||
| "heading": "Segmented Control", | ||
| "link": "/develop/client-capabilities/forms/form-layout/client-interaction-segmented-control/", | ||
| "text": "Select a value from a set of buttons", | ||
| children: <SegmentedControlDemo />, | ||
| }, | ||
| { | ||
| "heading": "Select", | ||
| "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-select/", | ||
| "text": "Dropdown menu for selecting options", | ||
| children: <SelectDemo />, | ||
| }, | ||
| { | ||
| "heading": "Slider", | ||
| "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-slider/", | ||
| "text": "Control for selecting a value from a range", | ||
| children: <SliderDemo />, | ||
| }, | ||
| { | ||
| "heading": "Stepper", | ||
| "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-stepper/", | ||
| "text": "Increment/decrement control for numbers", | ||
| children: <StepperDemo />, | ||
| }, | ||
| { | ||
| "heading": "Switch", | ||
| "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-switch/", | ||
| "text": "Toggle between two states", | ||
| children: <SwitchDemo />, | ||
| }, | ||
| { | ||
| "heading": "Text Area", | ||
| "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-text-area/", | ||
| "text": "Multi-line text input field", | ||
| children: <TextAreaDemo />, | ||
| }, | ||
| { | ||
| "heading": "Text Field", | ||
| "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-text-field/", | ||
| "text": "Single-line text input field", | ||
| children: <TextFieldDemo />, | ||
| }, | ||
| { | ||
| "heading": "Toolbar", | ||
| "link": "/develop/client-capabilities/forms/form-inputs/client-interaction-toolbar/", | ||
| "text": "Container for grouping related controls", | ||
| children: <ToolbarDemo />, | ||
| }, | ||
| ]; | ||
|
|
||
| export default function FormsIndex() { | ||
| useUpdateCSSVariable('--toc-sidebar-width', '0px') | ||
| return ( | ||
| <LiveExampleBuilder itemData={cardData} /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
97 changes: 97 additions & 0 deletions
97
docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| import LiveExampleBuilder from '@site/src/components/LiveExampleBuilder'; | ||
| import {useUpdateCSSVariable} from '@site/src/components/Hooks'; | ||
|
|
||
| import AccordionDemo from '/examples/ui/client-capabilities/interaction/accordion.js'; | ||
| import AnchorDemo from '/examples/ui/client-capabilities/interaction/anchor.js'; | ||
| import AnchoredRegionDemo from '/examples/ui/client-capabilities/interaction/anchored-region.js'; | ||
| import DialogDemo from '/examples/ui/client-capabilities/interaction/dialog.js'; | ||
| import DropdownMenuDemo from '/examples/ui/client-capabilities/interaction/dropdown-menu.js'; | ||
| import FlipperDemo from '/examples/ui/client-capabilities/interaction/flipper.js'; | ||
| import ListboxDemo from '/examples/ui/client-capabilities/interaction/listbox.js'; | ||
| import MenuDemo from '/examples/ui/client-capabilities/interaction/menu.js'; | ||
| import ModalDemo from '/examples/ui/client-capabilities/interaction/modal.js'; | ||
| import TabsDemo from '/examples/ui/client-capabilities/interaction/tabs.js'; | ||
| import TooltipDemo from '/examples/ui/client-capabilities/interaction/tooltip.js'; | ||
| import TreeViewDemo from '/examples/ui/client-capabilities/interaction/tree-view.js'; | ||
|
|
||
| const cardData = [ | ||
| { | ||
| "heading": "Accordion", | ||
| "link": "/develop/client-capabilities/interaction/client-interaction-accordion/", | ||
| "text": "Expandable and collapsible sections", | ||
| children: <AccordionDemo />, | ||
| }, | ||
| { | ||
| "heading": "Anchor", | ||
| "link": "/develop/client-capabilities/interaction/client-interaction-anchor/", | ||
| "text": "Create linkable document sections", | ||
| children: <AnchorDemo />, | ||
| }, | ||
| { | ||
| "heading": "Anchored Region", | ||
| "link": "/develop/client-capabilities/interaction/client-interaction-anchored-region/", | ||
| "text": "Position content relative to other elements", | ||
| children: <AnchoredRegionDemo />, | ||
| }, | ||
| { | ||
| "heading": "Dialog", | ||
| "link": "/develop/client-capabilities/interaction/client-interaction-dialog/", | ||
| "text": "Modal or non-modal message boxes", | ||
| children: <DialogDemo />, | ||
| }, | ||
| { | ||
| "heading": "Dropdown Menu", | ||
| "link": "/develop/client-capabilities/interaction/client-interaction-dropdown-menu/", | ||
| "text": "Expandable menu with selectable options", | ||
| children: <DropdownMenuDemo />, | ||
| }, | ||
| { | ||
| "heading": "Flipper", | ||
| "link": "/develop/client-capabilities/interaction/client-interaction-flipper/", | ||
| "text": "Navigate through a sequence of items", | ||
| children: <FlipperDemo />, | ||
| }, | ||
| { | ||
| "heading": "Listbox", | ||
| "link": "/develop/client-capabilities/interaction/client-interaction-listbox/", | ||
| "text": "Select one or multiple options from a list", | ||
| children: <ListboxDemo />, | ||
| }, | ||
| { | ||
| "heading": "Menu", | ||
| "link": "/develop/client-capabilities/interaction/client-interaction-menu/", | ||
| "text": "Navigation or command menu", | ||
| children: <MenuDemo />, | ||
| }, | ||
| { | ||
| "heading": "Modal", | ||
| "link": "/develop/client-capabilities/interaction/client-interaction-modal/", | ||
| "text": "Focused overlay content", | ||
| children: <ModalDemo />, | ||
| }, | ||
| { | ||
| "heading": "Tabs", | ||
| "link": "/develop/client-capabilities/interaction/client-interaction-tabs/", | ||
| "text": "Organize content into tabbed sections", | ||
| children: <TabsDemo />, | ||
| }, | ||
| { | ||
| "heading": "Tooltip", | ||
| "link": "/develop/client-capabilities/interaction/client-interaction-tooltip/", | ||
| "text": "Display additional information on hover", | ||
| children: <TooltipDemo />, | ||
| }, | ||
| { | ||
| "heading": "Tree View", | ||
| "link": "/develop/client-capabilities/interaction/client-interaction-tree-view/", | ||
| "text": "Hierarchical list with expandable items", | ||
| children: <TreeViewDemo />, | ||
| } | ||
| ]; | ||
|
|
||
| export default function InteractionIndex() { | ||
| useUpdateCSSVariable('--toc-sidebar-width', '0px') | ||
| return ( | ||
| <LiveExampleBuilder itemData={cardData} /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.