@beydesign/storybook 0.0.7 → 0.0.9

package/dist/stories/ToggleButtonGroup.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ComponentsProps, ToggleButtonGroupProps } from './types/toggle-button-group';
+export declare const ToggleButtonGroup: React.FC<ToggleButtonGroupProps>;
+export declare const Components: React.FC<ComponentsProps>;

package/dist/stories/ToggleButtonGroup.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ToggleButtonGroupSize, } from './types/toggle-button-group';
+import { Box } from '@mui/material';
+import { MainButton } from './Button';
+import { ButtonHierarchy, ButtonSize, ButtonType, } from './types/button';
+export const ToggleButtonGroup = ({ onChange, options, selectedOption, disabled, size = ToggleButtonGroupSize.lg, }) => {
+    const selectedOptionStyle = {
+        backgroundColor: 'var(--colors-light-background-bg-card-highlight-hover)',
+        color: 'var(--colors-light-text-text-accent)',
+    };
+    const unselectedOptionStyle = {
+        backgroundColor: 'transparent',
+    };
+    const getButtonSize = () => {
+        switch (size) {
+            case ToggleButtonGroupSize.sm:
+                return ButtonSize.sm;
+            case ToggleButtonGroupSize.md:
+                return ButtonSize.md;
+            case ToggleButtonGroupSize.lg:
+                return ButtonSize.lg;
+            default:
+                return ButtonSize.md;
+        }
+    };
+    return (_jsx(Box, { display: "flex", flexDirection: "row", sx: {
+            borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)',
+            overflow: 'hidden',
+            backgroundColor: 'var(--colors-light-background-bg-component)',
+        }, gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `1px solid var(--colors-light-border-border-component)`, children: options.map((option) => {
+            const isSelected = option === selectedOption;
+            return (_jsx(MainButton, { text: option, onClick: () => onChange(option), size: getButtonSize(), hierarchy: ButtonHierarchy.Tetriary, type: ButtonType.Button, style: isSelected ? selectedOptionStyle : unselectedOptionStyle, disabled: disabled }, option));
+        }) }));
+};
+export const Components = () => {
+    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Toggle Buttons" }), _jsx("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' }, children: _jsx(ToggleButtonGroup, { options: ['Option 1', 'Option 2', 'Option 3'], selectedOption: "Option 1", onChange: () => { } }) })] }));
+};

package/dist/stories/ToggleButtonGroup.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ToggleButtonGroup } from './ToggleButtonGroup';
+declare const meta: Meta<typeof ToggleButtonGroup>;
+export default meta;
+type Story = StoryObj<typeof ToggleButtonGroup>;
+export declare const Default: Story;
+export declare const Size_SM: Story;
+export declare const Size_MD: Story;
+export declare const Size_LG: Story;

package/dist/stories/ToggleButtonGroup.stories.js

@@ -0,0 +1,78 @@
+import { ToggleButtonGroup } from './ToggleButtonGroup';
+import { ToggleButtonGroupSize } from './types/toggle-button-group';
+const meta = {
+    title: 'Design System/Components/ToggleButtonGroup',
+    component: ToggleButtonGroup,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: '',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        options: {
+            control: 'radio',
+            description: 'Options for the toggle button',
+            table: {
+                type: { summary: 'string[]' },
+            },
+        },
+        selectedOption: {
+            control: 'text',
+            description: 'Selected option for the toggle button',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the toggle button is disabled',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        size: {
+            control: 'select',
+            options: Object.values(ToggleButtonGroupSize),
+            description: 'Size of the toggle button',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: ToggleButtonGroupSize.md },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        options: ['Option 1', 'Option 2', 'Option 3'],
+        selectedOption: 'Option 1',
+        onChange: () => { },
+    },
+};
+export const Size_SM = {
+    args: {
+        options: ['Option 1', 'Option 2', 'Option 3'],
+        selectedOption: 'Option 1',
+        onChange: () => { },
+        size: ToggleButtonGroupSize.sm,
+    },
+};
+export const Size_MD = {
+    args: {
+        options: ['Option 1', 'Option 2', 'Option 3'],
+        selectedOption: 'Option 1',
+        onChange: () => { },
+        size: ToggleButtonGroupSize.md,
+    },
+};
+export const Size_LG = {
+    args: {
+        options: ['Option 1', 'Option 2', 'Option 3'],
+        selectedOption: 'Option 1',
+        onChange: () => { },
+        size: ToggleButtonGroupSize.lg,
+    },
+};

package/dist/stories/types/toggle-button-group.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Toggle button size variants
+ */
+export declare enum ToggleButtonGroupSize {
+    lg = "lg",
+    md = "md",
+    sm = "sm"
+}
+/**
+ * Toggle button component props
+ */
+export type ToggleButtonGroupProps = {
+    /** Size variant of the toggle button */
+    size?: ToggleButtonGroupSize;
+    /** Selected option of the toggle button */
+    selectedOption: string;
+    /** Options of the toggle button */
+    options: string[];
+    /** Whether the toggle button is disabled */
+    disabled?: boolean;
+    /** Callback function when the toggle button is selected */
+    onChange: (option: string) => void;
+};
+/**
+ * Props for the Components wrapper
+ */
+export interface ComponentsProps {
+}

package/dist/stories/types/toggle-button-group.js

@@ -0,0 +1,9 @@
+/**
+ * Toggle button size variants
+ */
+export var ToggleButtonGroupSize;
+(function (ToggleButtonGroupSize) {
+    ToggleButtonGroupSize["lg"] = "lg";
+    ToggleButtonGroupSize["md"] = "md";
+    ToggleButtonGroupSize["sm"] = "sm";
+})(ToggleButtonGroupSize || (ToggleButtonGroupSize = {}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",