chore(ButtonGroup): rewrite to tailwind

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.",
+  },
+};

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;