🔥 Simplify Group component

Author: Frontendland

src/components/Group/Group.astro

@@ -7,14 +7,12 @@ interface Props extends GroupProps {}
 
 const {
     withSeparator,
-    outline,
     className
 } = Astro.props
 
 const classes = [
     styles.group,
     withSeparator && styles.separator,
-    outline && styles.outline,
     className
 ]
 ---

src/components/Group/Group.svelte

@@ -6,13 +6,11 @@
     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>

src/components/Group/Group.tsx

@@ -7,14 +7,12 @@ 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
     ])
 

src/components/Group/group.module.scss

@@ -2,6 +2,7 @@
 
 .group {
     @include layout(flex, none);
+    @include visibility(auto);
 
     button,
     span {
@@ -16,17 +17,9 @@
         }
     }
 
-    &.separator button,
-    &.separator span {
-        @include border(1px, primary-70);
-
-        &:first-child {
-            @include border(right, 0);
-        }
-
-        &:last-child {
-            @include border(left, 0);
-        }
+    &.separator button:not(:last-child),
+    &.separator span:not(:last-child) {
+        @include border(1px, right, primary-70);
     }
 
     &.outline button

src/components/Group/group.ts

@@ -1,6 +1,5 @@
 export type GroupProps = {
     withSeparator?: boolean
-    outline?: boolean
     className?: string
 }
 

src/pages/group.astro

@@ -67,7 +67,7 @@ const sections = getSections({
             </ComponentWrapper>
 
             <ComponentWrapper title="Outline buttons">
-                <section.component outline={true}>
+                <section.component>
                     <Button theme="outline">Profile</Button>
                     <Button theme="outline">Preferences</Button>
                     <Button theme="outline">Settings</Button>
@@ -163,7 +163,7 @@ const sections = getSections({
             </ComponentWrapper>
 
             <ComponentWrapper title="Outline badges">
-                <section.component outline={true}>
+                <section.component>
                     <Badge theme="outline" hover={true}>Profile</Badge>
                     <Badge theme="outline" hover={true}>Preferences</Badge>
                     <Badge theme="outline" hover={true}>Settings</Badge>

src/pages/index.astro

@@ -10,6 +10,7 @@ import Badge from '@components/Badge/Badge.astro'
 import Button from '@components/Button/Button.astro'
 import Checkbox from '@components/Checkbox/Checkbox.astro'
 import Collapsible from '@components/Collapsible/Collapsible.astro'
+import Group from '@components/Group/Group.astro'
 import Icon from '@components/Icon/Icon.astro'
 import Input from '@components/Input/Input.astro'
 import List from '@components/List/List.astro'
@@ -113,6 +114,13 @@ const tabItems = [{
                 <Badge slot="on">Expand</Badge>
             </Collapsible>
         </CardWrapper>
+        <CardWrapper title="Group" href="/group">
+            <Group withSeparator={true}>
+                <Button theme="secondary">Profile</Button>
+                <Button theme="secondary">Repos</Button>
+                <Button theme="secondary">Stars</Button>
+            </Group>
+        </CardWrapper>
         <CardWrapper title="Icon" href="/icon">
             <Icon
                 type="github"