feat(Join): Add Join Component (#363)

* using dialog element

* fix ModalLegacy story meta

* add glass button & neutral color

* feat(Join): Add Join Component

BREAKING CHANGE:  replaces buttongroup and inputgroup

Author: yoshi6jp

src/Join/Join.stories.tsx

@@ -0,0 +1,98 @@
+import React from 'react'
+import { StoryFn as Story, Meta } from '@storybook/react'
+
+import Join, { JoinProps } from '.'
+import Button from '../Button'
+import Input from '../Input'
+import Select from '../Select'
+import Indicator from '../Indicator'
+import Badge from '../Badge'
+
+export default {
+  title: 'Layout/Join (group items)',
+  component: Join,
+} as Meta
+
+export const Default: Story<JoinProps> = (args) => {
+  return (
+    <Join {...args}>
+      <Button className="join-item">Button</Button>
+      <Button className="join-item">Button</Button>
+      <Button className="join-item">Button</Button>
+    </Join>
+  )
+}
+Default.args = {}
+
+export const Vertically: Story<JoinProps> = (args) => {
+  return (
+    <Join {...args}>
+      <Button className="join-item">Button</Button>
+      <Button className="join-item">Button</Button>
+      <Button className="join-item">Button</Button>
+    </Join>
+  )
+}
+Vertically.args = {
+  vertical: true,
+}
+
+export const ExtraElementsInTheGroup: Story<JoinProps> = (args) => {
+  return (
+    <Join {...args}>
+      <div>
+        <div>
+          <Input className="join-item" placeholder="Search..." />
+        </div>
+      </div>
+      <Select className="join-item">
+        <Select.Option selected disabled>
+          Category
+        </Select.Option>
+        <Select.Option>Sci-fi</Select.Option>
+        <Select.Option>Drama</Select.Option>
+        <Select.Option>Action</Select.Option>
+      </Select>
+      <Indicator item={<Badge color="secondary">new</Badge>}>
+        <Button className="join-item">Search</Button>
+      </Indicator>
+    </Join>
+  )
+}
+ExtraElementsInTheGroup.args = {}
+
+export const CustomBorderRadius: Story<JoinProps> = (args) => {
+  return (
+    <Join {...args}>
+      <Input className="join-item" placeholder="Email" />
+      <Button className="join-item rounded-r-full">Subscribe</Button>
+    </Join>
+  )
+}
+CustomBorderRadius.args = {}
+
+export const RadioInputsWithBtnStyle: Story<JoinProps> = (args) => {
+  return (
+    <Join {...args}>
+      <Input
+        className="join-item btn"
+        type="radio"
+        name="options"
+        aria-label="Radio 1"
+      />
+      <Input
+        className="join-item btn"
+        type="radio"
+        name="options"
+        aria-label="Radio 2"
+      />
+      <Input
+        className="join-item btn"
+        type="radio"
+        name="options"
+        aria-label="Radio 3"
+      />
+    </Join>
+  )
+}
+RadioInputsWithBtnStyle.args = {}

src/Join/Join.tsx

@@ -0,0 +1,47 @@
+import React, { forwardRef, ReactNode } from 'react'
+import clsx from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+import { IComponentBaseProps } from '../types'
+
+export type JoinProps = React.HTMLAttributes<HTMLDivElement> &
+  IComponentBaseProps & {
+    responsive?: boolean
+    vertical?: boolean
+    horizontal?: boolean
+  }
+
+const Join = forwardRef<HTMLDivElement, JoinProps>(
+  (
+    {
+      dataTheme,
+      className,
+      children,
+      responsive,
+      vertical,
+      horizontal,
+      ...props
+    },
+    ref
+  ): JSX.Element => {
+    const classes = twMerge(
+      'join',
+      clsx({
+        'join-vertical': !responsive && vertical,
+        'join-horizontal': !responsive && horizontal,
+        'join-vertical lg:join-horizontal': responsive,
+      }),
+      className
+    )
+
+    return (
+      <div {...props} data-theme={dataTheme} className={classes} ref={ref}>
+        {children}
+      </div>
+    )
+  }
+)
+
+Join.displayName = 'Join'
+
+export default Join

src/Join/index.ts

@@ -0,0 +1,3 @@
+import Join, { JoinProps as TJoinProps } from './Join'
+export type JoinProps = TJoinProps
+export default Join