✨ Add Group component

Author: Frontendland

README.md

@@ -203,6 +203,7 @@ import { Accordion } from 'webcoreui/react'
 - [Checkbox](https://github.com/Frontendland/webcoreui/tree/main/src/components/Checkbox)
 - [Collapsible](https://github.com/Frontendland/webcoreui/tree/main/src/components/Collapsible)
 - [ConditionalWrapper](https://github.com/Frontendland/webcoreui/tree/main/src/components/ConditionalWrapper)
+- [Group](https://github.com/Frontendland/webcoreui/tree/main/src/components/Group)
 - [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon)
 - [Input](https://github.com/Frontendland/webcoreui/tree/main/src/components/Input)
 - [List](https://github.com/Frontendland/webcoreui/tree/main/src/components/List)

scripts/createComponent.js

@@ -24,6 +24,7 @@ const templates = {
     astro: `
         ---
         import type { ${component}Props } from './${lowerCaseComponent}'
+
         import styles from './${lowerCaseComponent}.module.scss'
 
         interface Props extends ${component}Props {}
@@ -89,8 +90,8 @@ const templates = {
     `,
     page: `
         ---
-        import Layout from '@static/Layout.astro'
         import ComponentWrapper from '@static/ComponentWrapper.astro'
+        import Layout from '@static/Layout.astro'
 
         import Astro${component} from '@components/${component}/${component}.astro'
         import Svelte${component} from '@components/${component}/${component}.svelte'

src/components/Button/button.ts

@@ -18,5 +18,5 @@ export type SvelteButtonProps = {
 
 export type ReactButtonProps = {
     onClick?: () => any
-    children?: React.ReactNode
+    children: React.ReactNode
 } & ButtonProps

src/components/Group/Group.astro

@@ -0,0 +1,24 @@
+---
+import type { GroupProps } from './group'
+
+import styles from './group.module.scss'
+
+interface Props extends GroupProps {}
+
+const {
+    withSeparator,
+    outline,
+    className
+} = Astro.props
+
+const classes = [
+    styles.group,
+    withSeparator && styles.separator,
+    outline && styles.outline,
+    className
+]
+---
+
+<div class:list={classes}>
+    <slot />
+</div>

src/components/Group/Group.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import type { GroupProps } from './group'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './group.module.scss'
+
+    export let withSeparator: GroupProps['withSeparator'] = false
+    export let outline: GroupProps['outline'] = false
+    export let className: GroupProps['className'] = ''
+
+    const classes = classNames([
+        styles.group,
+        withSeparator && styles.separator,
+        outline && styles.outline,
+        className
+    ])
+</script>
+
+<div class={classes}>
+    <slot />
+</div>

src/components/Group/Group.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import type { ReactGroupProps } from './group'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './group.module.scss'
+
+const Group = ({
+    withSeparator,
+    outline,
+    className,
+    children
+}: ReactGroupProps) => {
+    const classes = classNames([
+        styles.group,
+        withSeparator && styles.separator,
+        outline && styles.outline,
+        className
+    ])
+
+    return <div className={classes}>{children}</div>
+}
+
+export default Group

src/components/Group/group.module.scss

@@ -0,0 +1,50 @@
+@import '../../scss/config.scss';
+
+.group {
+    @include layout(flex, none);
+
+    button,
+    span {
+        @include border-radius(none);
+
+        &:first-child {
+            @include border-radius(left, md);
+        }
+
+        &:last-child {
+            @include border-radius(right, md);
+        }
+    }
+
+    &.separator button,
+    &.separator span {
+        @include border(1px, primary-70);
+
+        &:first-child {
+            @include border(right, 0);
+        }
+
+        &:last-child {
+            @include border(left, 0);
+        }
+    }
+
+    &.outline button
+    &.outline span {
+        @include border(1px, primary-20);
+        box-shadow: none;
+
+        &:hover {
+            @include border(1px, primary);
+            box-shadow: none;
+        }
+
+        &:first-child {
+            @include border(right, 0);
+        }
+
+        &:last-child {
+            @include border(left, 0);
+        }
+    }
+}

src/components/Group/group.ts

@@ -0,0 +1,9 @@
+export type GroupProps = {
+    withSeparator?: boolean
+    outline?: boolean
+    className?: string
+}
+
+export type ReactGroupProps = {
+    children: React.ReactNode
+} & GroupProps