From c0b49ba6badfb70178ed9695d2e2080f6d225e34 Mon Sep 17 00:00:00 2001
From: oreqizer <oreqizer@gmail.com>
Date: Thu, 21 Sep 2023 12:57:51 +0200
Subject: [PATCH] chore(ButtonGroup): rewrite to tailwind

---
 .../ButtonGroup/ButtonGroup.stories.tsx       | 66 +++++++++++++++++++
 .../src/tmp-tailwind/ButtonGroup/index.tsx    | 14 ++++
 2 files changed, 80 insertions(+)
 create mode 100644 packages/orbit-components/src/tmp-tailwind/ButtonGroup/ButtonGroup.stories.tsx
 create mode 100644 packages/orbit-components/src/tmp-tailwind/ButtonGroup/index.tsx

diff --git a/packages/orbit-components/src/tmp-tailwind/ButtonGroup/ButtonGroup.stories.tsx b/packages/orbit-components/src/tmp-tailwind/ButtonGroup/ButtonGroup.stories.tsx
new file mode 100644
index 0000000000..987ac4abf3
--- /dev/null
+++ b/packages/orbit-components/src/tmp-tailwind/ButtonGroup/ButtonGroup.stories.tsx
@@ -0,0 +1,66 @@
+import * as React from "react";
+import { text } from "@storybook/addon-knobs";
+
+import * as Icons from "../../icons";
+import Button from "../../Button";
+import ButtonLink from "../../ButtonLink";
+import RenderInRtl from "../../utils/rtl/RenderInRtl";
+
+import ButtonGroup from ".";
+
+export default {
+  title: "tailwind/ButtonGroup",
+};
+
+export const WithButtons = () => {
+  const dataTest = text("dataTest", "test");
+  return (
+    <ButtonGroup dataTest={dataTest}>
+      <Button iconLeft={<Icons.Airplane />}>Button</Button>
+      <Button iconLeft={<Icons.ChevronDown />} title="Show more" />
+    </ButtonGroup>
+  );
+};
+
+WithButtons.story = {
+  parameters: {
+    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+  },
+};
+
+export const WithButtonLinks = () => {
+  const dataTest = text("dataTest", "test");
+  return (
+    <ButtonGroup dataTest={dataTest}>
+      <ButtonLink type="secondary" iconLeft={<Icons.Airplane />}>
+        Button
+      </ButtonLink>
+      <ButtonLink type="secondary" iconLeft={<Icons.ChevronDown />} title="Show more" />
+    </ButtonGroup>
+  );
+};
+
+WithButtonLinks.story = {
+  name: "With ButtonLinks",
+
+  parameters: {
+    info: "You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
+  },
+};
+
+export const Rtl = () => (
+  <RenderInRtl>
+    <ButtonGroup>
+      <Button iconLeft={<Icons.Airplane />}>Button</Button>
+      <Button iconLeft={<Icons.ChevronDown />} title="Show more" />
+    </ButtonGroup>
+  </RenderInRtl>
+);
+
+Rtl.story = {
+  name: "RTL",
+
+  parameters: {
+    info: "This is a preview of this component in RTL setup.",
+  },
+};
diff --git a/packages/orbit-components/src/tmp-tailwind/ButtonGroup/index.tsx b/packages/orbit-components/src/tmp-tailwind/ButtonGroup/index.tsx
new file mode 100644
index 0000000000..5b1cb31f5d
--- /dev/null
+++ b/packages/orbit-components/src/tmp-tailwind/ButtonGroup/index.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+
+import type { Props } from "../../ButtonGroup/types";
+
+const ButtonGroup = ({ children, dataTest }: Props) => (
+  <div
+    data-test={dataTest}
+    className="tb:first:[&>.orbit-button-primitive]:rounded-s-normal tb:last:[&>.orbit-button-primitive]:rounded-e-normal flex space-x-px rtl:space-x-reverse [&>.orbit-button-primitive]:rounded-none first:[&>.orbit-button-primitive]:rounded-s-[6px] last:[&>.orbit-button-primitive]:rounded-e-[6px]"
+  >
+    {children}
+  </div>
+);
+
+export default ButtonGroup;