feat: add live example index pages for primitive components PTL-0

docs/001_develop/03_client-capabilities/007_forms/forms-index.js

@@ -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} />
+  );
+}

docs/001_develop/03_client-capabilities/007_forms/index.mdx

@@ -12,6 +12,6 @@ sidebar_position: 7
 pagination_prev: develop/client-capabilities/charts/chart-html-api
 ---
 
-Coming soon...
+import FormsIndex from './forms-index.js'
 
-Brief overview of what a form is used for
+<FormsIndex />

docs/001_develop/03_client-capabilities/008_interaction/index.mdx

@@ -11,28 +11,6 @@ tags:
 sidebar_position: 8
 ---
 
-Coming soon...
+import InteractionIndex from './interaction-index.jsx'
 
-Accordion 
-
-Anchor 
-
-Anchored Region 
-
-Dialog 
-
-Dropdown Menu 
-
-Flipper 
-
-ListBox 
-
-Menu 
-
-Modal 
-
-Tab 
-
-Tooltip 
-
-Tree View 
+<InteractionIndex />

docs/001_develop/03_client-capabilities/008_interaction/interaction-index.jsx

@@ -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} />
+  );
+}

docs/001_develop/03_client-capabilities/009_presentation/examples/banner.js

@@ -23,7 +23,7 @@ export default function BannerDemo({ children, color }) {
 	return (
 		<CodeSection>
 			<div style={{ color: 'var(--neutral-foreground-rest)', width: '100%'}}>
-				<div style={{ display: 'flex', flexWrap: 'wrap', height: '75px', width: '100%', flexDirection: 'column', }}>
+				<div style={{ display: 'flex', flexWrap: 'wrap', height: '130px', width: '100%', flexDirection: 'column', }}>
 					<rapid-banner ref={bannerRef} onClick={dismissBanner}>
 						<div slot="content">
 							A banner for displaying information... Click to dismiss!

docs/001_develop/03_client-capabilities/009_presentation/examples/breadcrumb.js

@@ -16,8 +16,8 @@ export default function BreadcrumbDemo({ children, color }) {
 
 	return (
 		<CodeSection>
-			<div style={{ color: 'var(--neutral-foreground-rest)', width: '100%'}}>
-				<div style={{ display: 'flex', flexWrap: 'wrap', height: '45px', width: '100%', flexDirection: 'column', }}>
+			<div style={{ color: 'var(--neutral-foreground-rest)', width: 'width: 100%'}}>
+				<div style={{ display: 'flex', flexWrap: 'wrap', height: '55px', width: '100%', flexDirection: 'column', }}>
 					<rapid-breadcrumb>
 						<rapid-breadcrumb-item href="#">Breadcrumb item 1</rapid-breadcrumb-item>
 						<rapid-breadcrumb-item href="#">Breadcrumb item 2</rapid-breadcrumb-item>

docs/001_develop/03_client-capabilities/009_presentation/examples/horizontal-scroll.js

@@ -11,7 +11,7 @@ function setup() {
 	}
 }
 
-export default function HorizontalScrollDemo({ children, color }) {
+export default function HorizontalScrollDemo({ inIndex = false }) {
 	setup();
 	return (
 		<CodeSection>
@@ -30,7 +30,8 @@ export default function HorizontalScrollDemo({ children, color }) {
 							Card number 3
 							<rapid-button>A button</rapid-button>
 						</rapid-card>
-						<rapid-card>
+						{!inIndex ?
+						(<><rapid-card>
 							Card number 4
 							<rapid-button>A button</rapid-button>
 						</rapid-card>
@@ -65,7 +66,7 @@ export default function HorizontalScrollDemo({ children, color }) {
 						<rapid-card>
 							Card number 12
 							<rapid-button>A button</rapid-button>
-						</rapid-card>
+						</rapid-card></>) : null}
 					</rapid-horizontal-scroll>
 				</div>
 			</div>

docs/001_develop/03_client-capabilities/009_presentation/index.mdx

@@ -10,34 +10,7 @@ tags:
 sidebar_position: 9
 ---
 
-Coming soon...
+import PresentationDemo from './presentation-index.js';
 
-Avatar 
+<PresentationDemo />
 
-Badge 
-
-Banner 
-
-Breadcrumb 
-
-Basic Data Grid 
-
-Card   
-
-Chart 
-
-Connection Indicator 
-
-Disclosure 
-
-Divider 
-
-Horizontal Scroll 
-
-Icon 
-
-Progress Ring 
-
-Progress 
-
-Skeleton