From aa1896ed2265bec78ed1ddb3a4bb2bed51f27442 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= <matuzalemteles@gmail.com>
Date: Fri, 4 Aug 2023 16:27:50 -0500
Subject: [PATCH] docs(clayui.com): adds compositing examples to Picker

---
 packages/clay-core/docs/picker.js  | 217 ++++++++++++++++++++++++++++-
 packages/clay-core/docs/picker.mdx |  27 +++-
 2 files changed, 241 insertions(+), 3 deletions(-)

diff --git a/packages/clay-core/docs/picker.js b/packages/clay-core/docs/picker.js
index c8a4e7bb69..875ab23f22 100644
--- a/packages/clay-core/docs/picker.js
+++ b/packages/clay-core/docs/picker.js
@@ -4,8 +4,13 @@
  */
 
 import Editor from '$clayui.com/src/components/Editor';
-import {Option, Picker} from '@clayui/core';
+import {Option, Picker, Text} from '@clayui/core';
+import DropDown from '@clayui/drop-down';
 import Form from '@clayui/form';
+import Icon from '@clayui/icon';
+import Label from '@clayui/label';
+import Layout from '@clayui/layout';
+import {useId} from '@clayui/shared';
 import React from 'react';
 
 const exampleImports = `import {Option, Picker} from '@clayui/core';
@@ -53,4 +58,212 @@ const PickerExample = () => {
 	return <Editor code={exampleCode} imports={exampleImports} scope={scope} />;
 };
 
-export {PickerExample};
+const exampleTriggerImports = `import {Option, Picker} from '@clayui/core';
+import Form from '@clayui/form';
+import Icon from '@clayui/icon';
+import React from 'react';`;
+
+const exampleTriggerCode = `const Trigger = React.forwardRef(({children, ...otherProps}, ref) => (
+	<div ref={ref} {...otherProps} tabIndex={0}>
+		<Icon className="mr-2" symbol="user" />
+		{children}
+	</div>
+));
+
+const CustomTrigger = () => {
+	const pickerId = useId();
+	const labelId = useId();
+
+  return (
+    <div style={{width: '150px'}}>
+			<Form.Group>
+				<label htmlFor={pickerId} id={labelId}>
+					Choose a user
+				</label>
+				<Picker
+					aria-labelledby={labelId}
+					as={Trigger}
+					id={pickerId}
+					items={['Liam', 'Noah', 'Oliver']}
+				>
+					{(item) => <Option key={item}>{item}</Option>}
+				</Picker>
+			</Form.Group>
+		</div>
+  );
+};
+
+render(<CustomTrigger />)`;
+
+const PickerTriggerExample = () => {
+	const scope = {Form, Icon, Option, Picker, React, useId};
+
+	return (
+		<Editor
+			code={exampleTriggerCode}
+			imports={exampleTriggerImports}
+			scope={scope}
+		/>
+	);
+};
+
+const exampleOptionsImports = `import {Option, Picker} from '@clayui/core';
+import Form from '@clayui/form';
+import React from 'react';`;
+
+const exampleOptionsCode = `const CustomOptions = () => {
+	const pickerId = useId();
+	const labelId = useId();
+
+  return (
+    <div style={{width: '150px'}}>
+			<Form.Group>
+				<label htmlFor={pickerId} id={labelId}>
+					Choose a user
+				</label>
+				<Picker
+					aria-labelledby={labelId}
+					id={pickerId}
+					items={['Liam', 'Noah', 'Oliver']}
+				>
+					{(item) => (
+						<Option
+							key={item}
+							textValue={item}
+						>
+							<Layout.ContentRow>
+								<Layout.ContentCol expand>
+									<Text
+										size={3}
+										weight="semi-bold"
+									>
+										{item}
+									</Text>
+									<Text
+										aria-hidden
+										color="secondary"
+										size={2}
+									>
+										Description
+									</Text>
+								</Layout.ContentCol>
+								<Layout.ContentCol>
+									<Label
+										aria-hidden
+										displayType="success"
+									>
+										Active
+									</Label>
+								</Layout.ContentCol>
+							</Layout.ContentRow>
+						</Option>
+					)}
+				</Picker>
+			</Form.Group>
+		</div>
+  );
+};
+
+render(<CustomOptions />)`;
+
+const PickerOptionsxample = () => {
+	const scope = {
+		Form,
+		Icon,
+		Label,
+		Layout,
+		Option,
+		Picker,
+		React,
+		Text,
+		useId,
+	};
+
+	return (
+		<Editor
+			code={exampleOptionsCode}
+			imports={exampleOptionsImports}
+			scope={scope}
+		/>
+	);
+};
+
+const exampleGroupImports = `import {Option, Picker} from '@clayui/core';
+import Form from '@clayui/form';
+import Icon from '@clayui/icon';
+import React from 'react';`;
+
+const exampleGroupCode = `const Trigger = React.forwardRef(({children, ...otherProps}, ref) => (
+	<div ref={ref} {...otherProps} tabIndex={0}>
+		<Icon className="mr-2" symbol="user" />
+		{children}
+	</div>
+));
+
+const CustomTrigger = () => {
+	const pickerId = useId();
+	const labelId = useId();
+
+  return (
+    <div style={{width: '150px'}}>
+			<Form.Group>
+				<label htmlFor={pickerId} id={labelId}>
+					Select an option
+				</label>
+				<Picker
+					aria-labelledby={labelId}
+					id={pickerId}
+					items={[
+						{
+							items: [
+								{label: 'Apple', value: '1'},
+								{label: 'Banana', value: '2'},
+								{label: 'Mangos', value: '3'},
+							],
+							label: 'Fruit',
+						},
+						{
+							items: [
+								{label: 'Onions', value: '4'},
+								{label: 'abc', value: '5'},
+								{label: 'def', value: '6'},
+							],
+							label: 'Vegetable',
+						},
+					]}
+				>
+					{(group) => (
+						<DropDown.Group
+							header={group.label}
+							items={group.items}
+						>
+							{(item) => (
+								<Option key={item.value}>{item.label}</Option>
+							)}
+						</DropDown.Group>
+					)}
+				</Picker>
+			</Form.Group>
+		</div>
+  );
+};
+
+render(<CustomTrigger />)`;
+
+const PickerGroupExample = () => {
+	const scope = {DropDown, Form, Option, Picker, React, useId};
+
+	return (
+		<Editor
+			code={exampleGroupCode}
+			imports={exampleGroupImports}
+			scope={scope}
+		/>
+	);
+};
+export {
+	PickerExample,
+	PickerGroupExample,
+	PickerTriggerExample,
+	PickerOptionsxample,
+};
diff --git a/packages/clay-core/docs/picker.mdx b/packages/clay-core/docs/picker.mdx
index 94d3030990..ca7350b096 100644
--- a/packages/clay-core/docs/picker.mdx
+++ b/packages/clay-core/docs/picker.mdx
@@ -6,7 +6,12 @@ packageStatus: 'Beta'
 storybookPath: 'design-system-components-picker'
 ---
 
-import {PickerExample} from '$packages/clay-core/docs/picker';
+import {
+	PickerExample,
+	PickerGroupExample,
+	PickerTriggerExample,
+	PickerOptionsxample,
+} from '$packages/clay-core/docs/picker';
 
 <div class="nav-toc-absolute">
 <div class="nav-toc">
@@ -17,6 +22,10 @@ import {PickerExample} from '$packages/clay-core/docs/picker';
     -   [Static](#static)
     -   [Dynamic](#dynamic)
 -   [Controlled and Uncontrolled component](#controlled-and-uncontrolled-component)
+-   [Composition](#composition)
+    -   [Custom Trigger](#custom-trigger)
+    -   [Custom Options](#custom-options)
+    -   [Group](#group)
 -   [Hybrid component](#hybrid-component)
 
 </div>
@@ -128,6 +137,22 @@ function Example() {
 }
 ```
 
+## Composition
+
+The composition allows you to customize the component or add new features. See some examples:
+
+### Custom Trigger
+
+<PickerTriggerExample />
+
+### Custom Options
+
+<PickerOptionsxample />
+
+### Group
+
+<PickerGroupExample />
+
 ## Hybrid component
 
 Native select for mobile devices offers a better experience compared to Picker in some cases. The Picker offers the possibility to render using the native selector of the browser of the device when it is detected that it is on a mobile device, by default this property is disabled but it can be enabled by setting the `native` property to `true`.