b5b41da183
* storybook v2 init * Merge config into storybook vite build * Remove path * Storybook config tweaks * Added styles and settings for storybook v2, and started working on button documentation and examples. * Badges + flex wrap on mobile * Breadcrumbs+button+avatar * Checkbox * Input + moving files around * WIP table * WIP table grid * Replaced imports for new components. * Added first steps for varianttable. * Small alignment fix. * Custom Args Table - With scrollbar * Adding table to components that need it + darkmode * Add intro * Fix types * Remove V1 storybook and replace with V2 * Fix badge type error * Fixed storybook dependencies * Added cover image to storybook * Remove vita from ts config, we dont use vite. * Fixed button import. * Explained postcss pseudo plugin. * Fixed badge import. * Add Avatar Stories * ButtonGroup Stories * Fixed imports * Add checkbox stories * Add exports for differnt types of inputs * Fix form and text area input * Fix mass import errors Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl> Co-authored-by: Alex van Andel <me@alexvanandel.com>
31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
import React from "react";
|
|
|
|
import classNames from "@calcom/lib/classNames";
|
|
|
|
type Props = { children: React.ReactNode; combined?: boolean; containerProps?: JSX.IntrinsicElements["div"] };
|
|
|
|
/**
|
|
* Breakdown of Tailwind Magic below
|
|
* [&_button]:border-l-0 [&_a]:border-l-0 -> Selects all buttons/a tags and applies a border left of 0
|
|
* [&>*:first-child]:rounded-l-md [&>*:first-child]:border-l -> Selects the first child of the content
|
|
* ounds the left side
|
|
* [&>*:last-child]:rounded-r-md -> Selects the last child of the content and rounds the right side
|
|
* We dont need to add border to the right as we never remove it
|
|
*/
|
|
|
|
export function ButtonGroup({ children, combined = false, containerProps }: Props) {
|
|
return (
|
|
<div
|
|
{...containerProps}
|
|
className={classNames(
|
|
"flex",
|
|
!combined
|
|
? "space-x-2"
|
|
: "[&_button]:rounded-none [&_button]:border-l-0 [&>*:first-child]:rounded-l-md [&>*:first-child]:border-l [&_a]:rounded-none [&_a]:border-l-0 [&>*:last-child]:rounded-r-md",
|
|
containerProps?.className
|
|
)}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|