Merge pull request #43 from linked-planet/dev

added options  for data-props to accordion, collapsible and button group

Author: marcus-wishes

library/src/components/Accordion.tsx

@@ -34,10 +34,13 @@ type AccordionMultipleProps = Pick<
 type AccordionContainerProps = (
 	| AccordionSingleProps
 	| AccordionMultipleProps
-) & { testId?: string }
+) & { 
+	"data-testid"?: string
+	"data-id"?: string
+}
 
-const Container = ({ testId, ...props }: AccordionContainerProps) => {
-	return <RAccordion.Root data-testid={testId} {...props} />
+const Container = (props: AccordionContainerProps) => {
+	return <RAccordion.Root {...props} />
 }
 
 type AccordionItemProps = Pick<
@@ -51,11 +54,12 @@ const AccordionItem = React.forwardRef(
 		forwardedRef: Ref<HTMLDivElement>,
 	) => (
 		<RAccordion.Item
+			{...props}
 			className={twMerge(
 				"border-border overflow-hidden  border-b-2 first:rounded-t last:rounded-b last:border-b-0 focus-within:relative focus-within:z-10",
 				className,
 			)}
-			{...props}
+			
 			ref={forwardedRef}
 		>
 			{children}

library/src/components/Button.tsx

@@ -1,5 +1,5 @@
 import type React from "react"
-import { type CSSProperties, forwardRef, useMemo } from "react"
+import { type CSSProperties, forwardRef, type HTMLProps, useMemo } from "react"
 import { twJoin, twMerge } from "tailwind-merge"
 import { LoadingSpinner } from "./LoadingSpinner"
 
@@ -211,15 +211,14 @@ export const ButtonGroup = ({
 	children,
 	className,
 	style,
-}: {
-	children: React.ReactNode
-	className?: string
-	style?: CSSProperties
-}) => {
+	...props
+}: HTMLProps<HTMLDivElement>) => {
 	return (
 		<div
+			{...props}
 			className={twMerge("inline-flex flex-wrap gap-2 p-2", className)} //gap-2 and p-2 are because of the button outlines on focus
 			style={style}
+
 		>
 			{children}
 		</div>

library/src/components/Collapsible.tsx

@@ -2,7 +2,7 @@ import ChevronDownIcon from "@atlaskit/icon/glyph/chevron-down"
 import ChevronRightIcon from "@atlaskit/icon/glyph/chevron-right"
 import ChevronUpIcon from "@atlaskit/icon/glyph/chevron-up"
 import * as CollapsibleRUI from "@radix-ui/react-collapsible"
-import { forwardRef, useCallback, useState } from "react"
+import { forwardRef, type HTMLProps, useCallback, useState } from "react"
 import { twMerge } from "tailwind-merge"
 
 type CollapsibleProps = {
@@ -22,7 +22,7 @@ type CollapsibleProps = {
 	openButtonPosition?: "left" | "right" | "hidden"
 	id?: string
 	testId?: string
-}
+} & HTMLProps<HTMLDivElement>
 
 export const Collapsible = forwardRef(
 	(
@@ -43,6 +43,7 @@ export const Collapsible = forwardRef(
 			children,
 			id,
 			testId,
+			...props
 		}: CollapsibleProps,
 		ref: React.ForwardedRef<HTMLDivElement>,
 	) => {
@@ -76,6 +77,7 @@ export const Collapsible = forwardRef(
 
 		return (
 			<CollapsibleRUI.Root
+				{...props}
 				open={open}
 				defaultOpen={defaultOpen}
 				onOpenChange={openCB}
@@ -84,6 +86,7 @@ export const Collapsible = forwardRef(
 				data-testid={testId}
 				id={id}
 				ref={ref}
+				
 			>
 				<CollapsibleRUI.Trigger
 					className={twMerge(

library/src/layouting/AppLayout.tsx

@@ -50,7 +50,7 @@ function Container({
 	return (
 		<div
 			className={twMerge(
-				"relative m-0 box-border grid h-full min-h-dvh w-full",
+				"relative m-0 box-border grid h-dvh w-full",
 				className,
 			)}
 			data-layout-container="true"