feat: add box and button group stories

Signed-off-by: Kunaldeep singh <[email protected]>
layer5io · Aug 30, 2023 · 0229cea · 0229cea
1 parent 40ccdeb
commit 0229cea
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 0 deletions.
diff --git a/packages/design-system/src/stories/Box.stories.tsx b/packages/design-system/src/stories/Box.stories.tsx
@@ -0,0 +1,24 @@
+import { Box } from '@layer5/sistent-components/src';
+import React from 'react';
+
+export default {
+  title: 'Example/Box',
+  component: Box,
+  tags: ['autodocs']
+};
+
+export function SxProp() {
+  return (
+    <Box
+      sx={{
+        width: 300,
+        height: 300,
+        backgroundColor: 'primary.dark',
+        '&:hover': {
+          backgroundColor: 'primary.main',
+          opacity: [0.9, 0.8, 0.7]
+        }
+      }}
+    />
+  );
+}
diff --git a/packages/design-system/src/stories/ButtonGrup.stories.tsx b/packages/design-system/src/stories/ButtonGrup.stories.tsx
@@ -0,0 +1,87 @@
+import { BaseButton, ButtonGroup, Stack, Paper } from '@layer5/sistent-components/src';
+import React from 'react';
+
+export default {
+  title: 'Example/ButtonGroup',
+  component: ButtonGroup,
+  tags: ['autodocs']
+};
+
+const buttons = [
+  <BaseButton>One</BaseButton>,
+  <BaseButton>Two</BaseButton>,
+  <BaseButton>Three</BaseButton>
+];
+
+export function Basic() {
+  return (
+    <ButtonGroup variant="contained" aria-label="outlined primary button group">
+      {buttons}
+    </ButtonGroup>
+  );
+}
+
+export function Variants() {
+  return (
+    <Stack direction="row" spacing={2}>
+      <ButtonGroup variant="outlined" color="info" aria-label="outlined primary button group">
+        {buttons}
+      </ButtonGroup>
+
+      <ButtonGroup variant="text" color="secondary" aria-label="outlined primary button group">
+        {buttons}
+      </ButtonGroup>
+    </Stack>
+  );
+}
+
+export function SizesAndColors() {
+  return (
+    <Stack direction="column" spacing={2}>
+      <ButtonGroup size="small" aria-label="small button group">
+        {buttons}
+      </ButtonGroup>
+      <ButtonGroup color="secondary" aria-label="medium secondary button group">
+        {buttons}
+      </ButtonGroup>
+      <ButtonGroup size="large" color="warning" aria-label="large button group">
+        {buttons}
+      </ButtonGroup>
+    </Stack>
+  );
+}
+
+export function VerticalGroup() {
+  return (
+    <Stack direction="row" spacing={2}>
+      <ButtonGroup size="small" aria-label="small button group" orientation="vertical">
+        {buttons}
+      </ButtonGroup>
+      <ButtonGroup
+        color="secondary"
+        aria-label="medium secondary button group"
+        orientation="vertical">
+        {buttons}
+      </ButtonGroup>
+      <ButtonGroup
+        size="large"
+        color="warning"
+        aria-label="large button group"
+        orientation="vertical">
+        {buttons}
+      </ButtonGroup>
+    </Stack>
+  );
+}
+
+export function DisabledElevation() {
+  return (
+    <ButtonGroup
+      disableElevation
+      variant="contained"
+      color="error"
+      aria-label="Disabled elevation buttons">
+      {buttons}
+    </ButtonGroup>
+  );
+}