fix: converting to functional component and fixing style

nexxtway · Oct 31, 2022 · 971f6d9 · 971f6d9
1 parent eaf8d39
commit 971f6d9
Showing 1 changed file with 38 additions and 31 deletions.
diff --git a/src/components/ButtonGroup/readme.md b/src/components/ButtonGroup/readme.md
@@ -349,6 +349,7 @@ const HeadingContent = styled.div`
         flex-direction: column;
         :nth-child(1) { text-align: center; }
     }
+    flex-direction: column;
 `;
 
 const SubTitle = styled.span.attrs(props => {
@@ -362,35 +363,41 @@ const Container = styled.div`
     margin: auto;
 `;
 
-    <Container>
-        <HeadingContent className="rainbow-p-top_large rainbow-align-content_space-between rainbow-m-horizontal_medium rainbow-flex">
-            <div className="rainbow-m-bottom_medium">
-                <SubTitle>Button group with border radius square.</SubTitle>
-            </div>
-            <ButtonGroup className="rainbow-m-bottom_medium" borderRadius="square">
-                <Button label="New" variant="neutral" />
-                <Button label="Edit" variant="neutral" />
-                <Button label="Remove" variant="neutral" />
-            </ButtonGroup>
-
-            <div className="rainbow-m-bottom_medium">
-                <SubTitle>Button group with border radius semi-rounded.</SubTitle>
-            </div>
-
-            <ButtonGroup className="rainbow-m-bottom_medium" borderRadius="semi-rounded">
-                <Button label="New" variant="neutral" />
-                <Button label="Edit" variant="neutral" />
-                <Button label="Remove" variant="neutral" />
-            </ButtonGroup>
-            <div className="rainbow-m-bottom_medium">
-                <SubTitle>Button group with border radius rounded.</SubTitle>
-            </div>
-
-            <ButtonGroup className="rainbow-m-bottom_medium" borderRadius="rounded">
-                <Button label="New" variant="neutral" />
-                <Button label="Edit" variant="neutral" />
-                <Button label="Remove" variant="neutral" />
-            </ButtonGroup>
-        </HeadingContent>
-    </Container>
+    const ButtonGroupExample = () => {
+        return (
+            <Container>
+                <HeadingContent className="rainbow-p-top_large rainbow-align-content_space-between rainbow-m-horizontal_medium rainbow-flex">
+                    <div className="rainbow-m-bottom_medium">
+                        <SubTitle>Button group with border radius square.</SubTitle>
+                    </div>
+                    <ButtonGroup className="rainbow-m-bottom_medium" borderRadius="square">
+                        <Button label="New" variant="neutral" />
+                        <Button label="Edit" variant="neutral" />
+                        <Button label="Remove" variant="neutral" />
+                    </ButtonGroup>
+
+                    <div className="rainbow-m-bottom_medium">
+                        <SubTitle>Button group with border radius semi-rounded.</SubTitle>
+                    </div>
+
+                    <ButtonGroup className="rainbow-m-bottom_medium" borderRadius="semi-rounded">
+                        <Button label="New" variant="neutral" />
+                        <Button label="Edit" variant="neutral" />
+                        <Button label="Remove" variant="neutral" />
+                    </ButtonGroup>
+                    <div className="rainbow-m-bottom_medium">
+                        <SubTitle>Button group with border radius rounded.</SubTitle>
+                    </div>
+
+                    <ButtonGroup className="rainbow-m-bottom_medium" borderRadius="rounded">
+                        <Button label="New" variant="neutral" />
+                        <Button label="Edit" variant="neutral" />
+                        <Button label="Remove" variant="neutral" />
+                    </ButtonGroup>
+                </HeadingContent>
+            </Container>
+        );
+    };
+
+        <ButtonGroupExample />;
 ```