first commit

calcom/packages/ui/components/buttonGroup/ButtonGroup.tsx

@@ -0,0 +1,30 @@
+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 rtl:space-x-reverse"
+          : "ltr:[&>*:first-child]:ml-0 ltr:[&>*:first-child]:rounded-l-md ltr:[&>*:first-child]:border-l rtl:[&>*:first-child]:rounded-r-md rtl:[&>*:first-child]:border-r ltr:[&>*:last-child]:rounded-r-md rtl:[&>*:last-child]:rounded-l-md [&>a]:-ml-[1px] hover:[&>a]:z-[1] [&>button]:-ml-[1px] hover:[&>button]:z-[1] [&_a]:rounded-none [&_button]:rounded-none",
+        containerProps?.className
+      )}>
+      {children}
+    </div>
+  );
+}

calcom/packages/ui/components/buttonGroup/buttongroup.stories.mdx

@@ -0,0 +1,124 @@
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+
+import {
+  Examples,
+  Example,
+  Note,
+  Title,
+  CustomArgsTable,
+  VariantsTable,
+  VariantRow,
+} from "@calcom/storybook/components";
+
+import { Icon } from "../..";
+import { Button } from "../button/Button";
+import { ButtonGroup } from "./ButtonGroup";
+
+<Meta title="UI/Button Group" component={ButtonGroup} />
+
+<Title title="Button Group" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
+
+## Definition
+
+Button group enables multiple buttons to be combined into a single unit. It offers users access to frequently performed, related actions.
+
+## Structure
+
+<CustomArgsTable of={ButtonGroup} />
+
+<Examples
+  title="Breadcrumb style"
+  footNote={
+    <ul>
+      <li>
+        Seperated: In general, seperated button group style can be included in container such as card, modal,
+        and page.
+      </li>
+      <li>Combined: Combined button group can be used standalone e.g. mini toggles for calendars</li>
+    </ul>
+  }>
+  <Example title="Default">
+    <ButtonGroup>
+      <Button StartIcon="trash" variant="icon" color="secondary" />
+      <Button StartIcon="navigation" variant="icon" color="secondary" />
+      <Button StartIcon="clipboard" variant="icon" color="secondary" />
+    </ButtonGroup>
+  </Example>
+  <Example title="Combined">
+    <ButtonGroup combined>
+      <Button StartIcon="trash" variant="icon" color="secondary" />
+      <Button StartIcon="navigation" variant="icon" color="secondary" />
+      <Button StartIcon="clipboard" variant="icon" color="secondary" />
+    </ButtonGroup>
+  </Example>
+</Examples>
+
+<Canvas>
+  <Story name="All Variants">
+    <VariantsTable titles={["Default", "Secondary", "Minimal"]} columnMinWidth={150}>
+      <VariantRow variant="Default">
+        <ButtonGroup>
+          <Button StartIcon="trash" variant="icon" />
+          <Button StartIcon="navigation" variant="icon" />
+          <Button StartIcon="clipboard" variant="icon" />
+        </ButtonGroup>
+        <ButtonGroup>
+          <Button StartIcon="trash" variant="icon" color="secondary" />
+          <Button StartIcon="navigation" variant="icon" color="secondary" />
+          <Button StartIcon="clipboard" variant="icon" color="secondary" />
+        </ButtonGroup>
+        <ButtonGroup>
+          <Button StartIcon="trash" variant="icon" color="minimal" />
+          <Button StartIcon="navigation" variant="icon" color="minimal" />
+          <Button StartIcon="clipboard" variant="icon" color="minimal" />
+        </ButtonGroup>
+      </VariantRow>
+      <VariantRow variant="Combined">
+        <ButtonGroup combined>
+          <Button StartIcon="trash" variant="icon" />
+          <Button StartIcon="navigation" variant="icon" />
+          <Button StartIcon="clipboard" variant="icon" />
+        </ButtonGroup>
+        <ButtonGroup combined>
+          <Button StartIcon="trash" variant="icon" color="secondary" />
+          <Button StartIcon="navigation" variant="icon" color="secondary" />
+          <Button StartIcon="clipboard" variant="icon" color="secondary" />
+        </ButtonGroup>
+      </VariantRow>
+    </VariantsTable>
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="ButtonGroup Playground"
+    args={{
+      color: "secondary",
+      combined: false,
+    }}
+    argTypes={{
+      color: {
+        control: {
+          type: "select",
+          options: ["primary", "secondary", "minimal"],
+        },
+      },
+      combined: {
+        control: {
+          type: "boolean",
+        },
+      },
+    }}>
+    {({ color, combined }) => (
+      <VariantsTable titles={[`${color}`]} columnMinWidth={150}>
+        <VariantRow variant="">
+          <ButtonGroup combined={combined}>
+            <Button StartIcon="trash" variant="icon" color={color} />
+            <Button StartIcon="navigation" variant="icon" color={color} />
+            <Button StartIcon="clipboard" variant="icon" color={color} />
+          </ButtonGroup>
+        </VariantRow>
+      </VariantsTable>
+    )}
+  </Story>
+</Canvas>

calcom/packages/ui/components/buttonGroup/index.ts

@@ -0,0 +1 @@
+export { ButtonGroup } from "./ButtonGroup";