Merge pull request #104 from brainstormforce/radio-doc-changes

Radio doc changes
brainstormforce · Oct 3, 2024 · cca6491 · cca6491
2 parents 1f0ca41 + 4c88703
commit cca6491
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 103 deletions.
diff --git a/src/components/breadcrumb/breadcrumb.jsx b/src/components/breadcrumb/breadcrumb.jsx
@@ -30,14 +30,17 @@ const Breadcrumb = ( { children, size = 'sm' } ) => {
 		</BreadcrumbContext.Provider>
 	);
 };
+Breadcrumb.displayName = 'Breadcrumb';
 
 const BreadcrumbList = ( { children } ) => {
 	return <>{ children }</>;
 };
+BreadcrumbList.displayName = 'Breadcrumb.List';
 
 const BreadcrumbItem = ( { children } ) => {
 	return <li className="m-0 inline-flex items-center gap-2">{ children }</li>;
 };
+BreadcrumbItem.displayName = 'Breadcrumb.Item';
 
 const BreadcrumbLink = ( {
 	href,
@@ -63,6 +66,7 @@ const BreadcrumbLink = ( {
 		</AsElement>
 	);
 };
+BreadcrumbLink.displayName = 'Breadcrumb.Link';
 
 const BreadcrumbSeparator = ( { type } ) => {
 	const { sizes } = useContext( BreadcrumbContext );
@@ -77,6 +81,7 @@ const BreadcrumbSeparator = ( { type } ) => {
 		</span>
 	);
 };
+BreadcrumbSeparator.displayName = 'Breadcrumb.Separator';
 
 const BreadcrumbEllipsis = () => {
 	const { sizes } = useContext( BreadcrumbContext );
@@ -88,6 +93,7 @@ const BreadcrumbEllipsis = () => {
 		/>
 	);
 };
+BreadcrumbEllipsis.displayName = 'Breadcrumb.Ellipsis';
 
 const BreadcrumbPage = ( { children } ) => {
 	const { sizes } = useContext( BreadcrumbContext );
@@ -98,13 +104,13 @@ const BreadcrumbPage = ( { children } ) => {
 		</span>
 	);
 };
+BreadcrumbPage.displayName = 'Breadcrumb.Page';
 
-export {
-	Breadcrumb,
-	BreadcrumbList,
-	BreadcrumbItem,
-	BreadcrumbLink,
-	BreadcrumbSeparator,
-	BreadcrumbEllipsis,
-	BreadcrumbPage,
-};
+export default Object.assign( Breadcrumb, {
+	List: BreadcrumbList,
+	Item: BreadcrumbItem,
+	Link: BreadcrumbLink,
+	Separator: BreadcrumbSeparator,
+	Ellipsis: BreadcrumbEllipsis,
+	Page: BreadcrumbPage,
+} );
diff --git a/src/components/breadcrumb/breadcrumb.stories.js b/src/components/breadcrumb/breadcrumb.stories.js
@@ -1,14 +1,6 @@
 // Breadcrumb.stories.js
 
-import {
-	Breadcrumb,
-	BreadcrumbList,
-	BreadcrumbItem,
-	BreadcrumbLink,
-	BreadcrumbSeparator,
-	BreadcrumbEllipsis,
-	BreadcrumbPage,
-} from './breadcrumb'; // Adjust the import path as needed
+import Breadcrumb from './breadcrumb'; // Adjust the import path as needed
 
 export default {
 	title: 'Atoms/Breadcrumb',
@@ -35,23 +27,23 @@ export default {
 
 const Template = ( args ) => (
 	<Breadcrumb size={ args.size }>
-		<BreadcrumbList>
-			<BreadcrumbItem>
-				<BreadcrumbLink href="#">Home</BreadcrumbLink>
-			</BreadcrumbItem>
-			<BreadcrumbSeparator type={ args.separatorType } />
-			<BreadcrumbItem>
-				<BreadcrumbEllipsis />
-			</BreadcrumbItem>
-			<BreadcrumbSeparator type={ args.separatorType } />
-			<BreadcrumbItem>
-				<BreadcrumbLink href="#">Category</BreadcrumbLink>
-			</BreadcrumbItem>
-			<BreadcrumbSeparator type={ args.separatorType } />
-			<BreadcrumbItem>
-				<BreadcrumbPage>Current Page</BreadcrumbPage>
-			</BreadcrumbItem>
-		</BreadcrumbList>
+		<Breadcrumb.List>
+			<Breadcrumb.Item>
+				<Breadcrumb.Link href="#">Home</Breadcrumb.Link>
+			</Breadcrumb.Item>
+			<Breadcrumb.Separator type={ args.separatorType } />
+			<Breadcrumb.Item>
+				<Breadcrumb.Ellipsis />
+			</Breadcrumb.Item>
+			<Breadcrumb.Separator type={ args.separatorType } />
+			<Breadcrumb.Item>
+				<Breadcrumb.Link href="#">Category</Breadcrumb.Link>
+			</Breadcrumb.Item>
+			<Breadcrumb.Separator type={ args.separatorType } />
+			<Breadcrumb.Item>
+				<Breadcrumb.Page>Current Page</Breadcrumb.Page>
+			</Breadcrumb.Item>
+		</Breadcrumb.List>
 	</Breadcrumb>
 );
 

diff --git a/src/components/breadcrumb/index.js b/src/components/breadcrumb/index.js
@@ -1,9 +1 @@
-export {
-	Breadcrumb,
-	BreadcrumbList,
-	BreadcrumbItem,
-	BreadcrumbLink,
-	BreadcrumbSeparator,
-	BreadcrumbEllipsis,
-	BreadcrumbPage,
-} from './breadcrumb.jsx';
+export { default } from './breadcrumb.jsx';
diff --git a/src/components/breadcrumb/readme.md b/src/components/breadcrumb/readme.md
@@ -12,21 +12,21 @@
 - **default value:** `sm`
 - **description:** The size of the breadcrumb, can be `sm` or `md`.
 
-## `BreadcrumbList` Props
+## `Breadcrumb.List` Props
 - **Description:** Wrapper for the breadcrumb list.  
 
 ### children
 - **type:** `ReactNode`
 - **description:** The child items to be rendered as a list of breadcrumb items.
 
-## `BreadcrumbItem` Props
+## `Breadcrumb.Item` Props
 - **Description:** Represents a single breadcrumb item.  
 
 ### children
 - **type:** `ReactNode`
 - **description:** The content for the breadcrumb item, usually containing a link or static text.
 
-## `BreadcrumbLink` Props
+## `Breadcrumb.Link` Props
 - **Description:** The clickable link within a breadcrumb item.
 
 ### href (required)
@@ -46,7 +46,7 @@
 - **default value:** `a`
 - **description:** Used as a wrapper for breadcrumb links. Defaults to an anchor `('a')`, but can be customized with components like `Link` from React Router.
 
-## `BreadcrumbSeparator` Props
+## `Breadcrumb.Separator` Props
 - **Description:** Separator used between breadcrumb items.
 
 ### type (optional)
@@ -57,7 +57,7 @@
 ## `BreadcrumbEllipsis` Props
 - **Description:** Displays an ellipsis when the breadcrumb list is too long, or represents hidden items.
 
-## `BreadcrumbPage` Props
+## `Breadcrumb.Page` Props
 - **Description:** Represents the current page in the breadcrumb trail, displayed as static text instead of a link.
 
 ### children
@@ -68,15 +68,17 @@
 
 ```jsx
 <Breadcrumb>
-    <BreadcrumbItem>
-        <BreadcrumbLink href="/home">Home</BreadcrumbLink>
-    </BreadcrumbItem>
-    <BreadcrumbSeparator type="slash" />
-    <BreadcrumbItem>
-        <BreadcrumbLink href="/category">Category</BreadcrumbLink>
-    </BreadcrumbItem>
-    <BreadcrumbSeparator />
-    <BreadcrumbItem>
-        <BreadcrumbPage>Current Page</BreadcrumbPage>
-    </BreadcrumbItem>
+	<Breadcrumb.List>
+        <Breadcrumb.Item>
+            <Breadcrumb.Link href="/home">Home</Breadcrumb.Link>
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator type="slash" />
+        <Breadcrumb.Item>
+            <Breadcrumb.Link href="/category">Category</Breadcrumb.Link>
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item>
+            <Breadcrumb.Page>Current Page</Breadcrumb.Page>
+        </Breadcrumb.Item>
+	</Breadcrumb.List>
 </Breadcrumb>
diff --git a/src/components/index.js b/src/components/index.js
@@ -1,7 +1,7 @@
 export { default as Button } from './button/index';
 export { default as Switch } from './switch/index';
 export { default as Checkbox } from './checkbox/index';
-export { RadioButtonGroup, RadioButton } from './radio-button-group/index';
+export { default as RadioButton } from './radio-button-group/index';
 export { default as Badge } from './badge/index';
 export { default as TextArea } from './textarea/index';
 export { default as Avatar } from './avatar/index';
@@ -22,15 +22,7 @@ export { default as ProgressSteps } from './progress-steps/index';
 export { default as Skeleton } from './skeleton/index';
 export { default as Menu } from './menu-item/index';
 export { default as Sidebar } from './sidebar/index';
-export {
-	Breadcrumb,
-	BreadcrumbList,
-	BreadcrumbItem,
-	BreadcrumbLink,
-	BreadcrumbSeparator,
-	BreadcrumbEllipsis,
-	BreadcrumbPage,
-} from './breadcrumb/index';
+export { default as Breadcrumb } from './breadcrumb/index';
 export { default as Dialog } from './dialog/index';
 export { default as Topbar } from './topbar/index';
 export { default as Drawer } from './drawer/index';
diff --git a/src/components/radio-button-group/index.js b/src/components/radio-button-group/index.js
@@ -1 +1 @@
-export { RadioButtonGroup, RadioButton } from './radio-button-group.jsx';
+export { default } from './radio-button-group.jsx';
diff --git a/src/components/radio-button-group/radio-button-group.jsx b/src/components/radio-button-group/radio-button-group.jsx
@@ -140,6 +140,7 @@ const RadioButtonGroup = ( {
 		</>
 	);
 };
+RadioButtonGroup.displayName = 'RadioButton.Group';
 
 const RadioButtonComponent = (
 	{
@@ -363,7 +364,7 @@ const RadioButtonComponent = (
 	);
 };
 const RadioButton = forwardRef( RadioButtonComponent );
-RadioButton.displayName = 'RadioButton';
+RadioButton.displayName = 'RadioButton.Button';
 
 const ButtonGroupItem = ( {
 	id,
@@ -454,4 +455,7 @@ const ButtonGroupItem = ( {
 	);
 };
 
-export { RadioButtonGroup, RadioButton };
+export default Object.assign( RadioButton, {
+	Group: RadioButtonGroup,
+	Button: RadioButton,
+} );
diff --git a/src/components/radio-button-group/radio-button-group.stories.js b/src/components/radio-button-group/radio-button-group.stories.js
@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
-import { RadioButtonGroup, RadioButton } from './radio-button-group.jsx';
+import RadioButton from './radio-button-group.jsx';
 import { Plus, Smile } from 'lucide-react';
 import Badge from '../badge/badge.jsx';
 
 export default {
-	title: 'Atoms/RadioButtonGroup',
-	component: RadioButtonGroup,
+	title: 'Atoms/RadioButton',
+	component: RadioButton.Group,
 	parameters: {
 		layout: 'centered',
 	},
@@ -106,7 +106,7 @@ export default {
 		},
 		label: {
 			description:
-				'`RadioButton` : Object containing heading and description for each RadioButton.',
+				'`RadioButton.Button` : Object containing heading and description for each RadioButton.',
 			control: {
 				type: 'object',
 			},
@@ -122,15 +122,16 @@ export default {
 			},
 		},
 		borderOn: {
-			description: '`RadioButton` : Adds a border around the button.',
+			description:
+				'`RadioButton.Button` : Adds a border around the button.',
 			control: 'boolean',
 			table: {
 				type: { summary: 'boolean' },
 				defaultValue: { summary: 'false' },
 			},
 		},
 		useSwitch: {
-			description: '`RadioButton` :Uses a switch for selection.',
+			description: '`RadioButton.Button` :Uses a switch for selection.',
 			control: 'boolean',
 			table: {
 				type: { summary: 'boolean' },
@@ -139,45 +140,48 @@ export default {
 		},
 		icon: {
 			description:
-				'`RadioButton` :Custom icon component to be displayed.',
+				'`RadioButton.Button` :Custom icon component to be displayed.',
 			control: {
 				type: 'text',
 			},
 			defaultValue: null,
 		},
 		inlineIcon: {
-			description: '`RadioButton` : Positions icon inline to the label.',
+			description:
+				'`RadioButton.Button` : Positions icon inline to the label.',
 			control: 'boolean',
 			table: {
 				type: { summary: 'boolean' },
 				defaultValue: { summary: 'false' },
 			},
 		},
 		hideSelection: {
-			description: '`RadioButton` : Positions icon inline to the label.',
+			description:
+				'`RadioButton.Button` : Positions icon inline to the label.',
 			control: 'boolean',
 			table: {
 				type: { summary: 'boolean' },
 				defaultValue: { summary: 'false' },
 			},
 		},
 		reversePosition: {
-			description: '`RadioButton` : Positions icon inline to the label.',
+			description:
+				'`RadioButton.Button` : Positions icon inline to the label.',
 			control: 'boolean',
 			table: {
 				type: { summary: 'boolean' },
 				defaultValue: { summary: 'false' },
 			},
 		},
 		badgeItem: {
-			description: '`RadioButton` : Badge Item to be displayed.',
+			description: '`RadioButton.Button` : Badge Item to be displayed.',
 			control: {
 				type: 'text',
 			},
 			defaultValue: null,
 		},
 		disabled: {
-			description: '`RadioButton` : Disables radio button.',
+			description: '`RadioButton.Button` : Disables radio button.',
 			control: 'boolean',
 			table: {
 				type: { summary: 'boolean' },
@@ -191,7 +195,7 @@ const Template = ( args ) => {
 	const [ value, setValue ] = useState( args.value || args.defaultValue );
 
 	return (
-		<RadioButtonGroup
+		<RadioButton.Group
 			{ ...args }
 			value={ value }
 			columns={ ( args.columns ?? args.style === 'tile' ) ? 6 : 3 }
@@ -202,15 +206,15 @@ const Template = ( args ) => {
 		>
 			{ [ 1, 2, 3, 4, 5, 6 ].map( ( num ) =>
 				args.style === 'tile' ? (
-					<RadioButton
+					<RadioButton.Button
 						value={ `option${ num }` }
 						key={ num }
 						disabled={ args.disabled }
 					>
 						<Plus />
-					</RadioButton>
+					</RadioButton.Button>
 				) : (
-					<RadioButton
+					<RadioButton.Button
 						key={ num }
 						value={ `option${ num }` }
 						label={
@@ -242,7 +246,7 @@ const Template = ( args ) => {
 					/>
 				)
 			) }
-		</RadioButtonGroup>
+		</RadioButton.Group>
 	);
 };
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { RadioButtonGroup, RadioButton } from './radio-button-group.jsx';
		export { default } from './radio-button-group.jsx';