@beydesign/storybook 0.0.6 → 0.0.8

package/dist/stories/Button.js

@@ -141,8 +141,6 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
     const getButtonSize = () => {
         const sizes = {
             [ButtonSize.xl]: {
-                width: displayIconMode === ButtonDisplayMode.Only ? '3.25rem' : '12.75rem',
-                height: '3.25rem',
                 padding: displayIconMode === ButtonDisplayMode.Only
                     ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
                     : 'var(--spacing-tokens-size-in-px-spacing-spacing-lg) var(--spacing-tokens-size-in-px-spacing-spacing-3xl)',
@@ -150,8 +148,6 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
                 gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
             },
             [ButtonSize.lg]: {
-                width: displayIconMode === ButtonDisplayMode.Only ? '3rem' : '11.75rem',
-                height: '3rem',
                 padding: displayIconMode === ButtonDisplayMode.Only
                     ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
                     : 'var(--spacing-tokens-size-in-px-spacing-spacing-lg) var(--spacing-tokens-size-in-px-spacing-spacing-2xl)',
@@ -159,8 +155,6 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
                 gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
             },
             [ButtonSize.md]: {
-                width: displayIconMode === ButtonDisplayMode.Only ? '2.75rem' : '10.75rem',
-                height: '2.75rem',
                 padding: displayIconMode === ButtonDisplayMode.Only
                     ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
                     : 'var(--spacing-tokens-size-in-px-spacing-spacing-md) var(--spacing-tokens-size-in-px-spacing-spacing-xl)',
@@ -168,8 +162,6 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
                 gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
             },
             [ButtonSize.sm]: {
-                width: displayIconMode === ButtonDisplayMode.Only ? '2.5rem' : '9.75rem',
-                height: '2.5rem',
                 padding: displayIconMode === ButtonDisplayMode.Only
                     ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
                     : 'var(--spacing-tokens-size-in-px-spacing-spacing-md) var(--spacing-tokens-size-in-px-spacing-spacing-xl)',
@@ -177,8 +169,6 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
                 gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
             },
             [ButtonSize.xs]: {
-                width: displayIconMode === ButtonDisplayMode.Only ? '2.25rem' : '8.75rem',
-                height: '2.25rem',
                 padding: displayIconMode === ButtonDisplayMode.Only
                     ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
                     : 'var(--spacing-tokens-size-in-px-spacing-spacing-md) var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
@@ -186,8 +176,6 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
                 gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
             },
             [ButtonSize.xxs]: {
-                width: displayIconMode === ButtonDisplayMode.Only ? '2rem' : '7.75rem',
-                height: '2rem',
                 padding: displayIconMode === ButtonDisplayMode.Only
                     ? 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)'
                     : 'var(--spacing-tokens-size-in-px-spacing-spacing-sm) var(--spacing-tokens-size-in-px-spacing-spacing-md)',

package/dist/stories/ToggleButton.d.ts

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

package/dist/stories/ToggleButton.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ToggleButtonSize, } from './types/toggle-button';
+import { Box } from '@mui/material';
+import { MainButton } from './Button';
+import { ButtonHierarchy, ButtonSize, ButtonType, } from './types/button';
+export const ToggleButton = ({ onChange, options, selectedOption, disabled, size = ToggleButtonSize.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 ToggleButtonSize.sm:
+                return ButtonSize.sm;
+            case ToggleButtonSize.md:
+                return ButtonSize.md;
+            case ToggleButtonSize.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(ToggleButton, { options: ['Option 1', 'Option 2', 'Option 3'], selectedOption: "Option 1", onChange: () => { } }) })] }));
+};

package/dist/stories/ToggleButton.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ToggleButton } from './ToggleButton';
+declare const meta: Meta<typeof ToggleButton>;
+export default meta;
+type Story = StoryObj<typeof ToggleButton>;
+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/ToggleButton.stories.js

@@ -0,0 +1,78 @@
+import { ToggleButton } from './ToggleButton';
+import { ToggleButtonSize } from './types/toggle-button';
+const meta = {
+    title: 'Design System/Components/ToggleButton',
+    component: ToggleButton,
+    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(ToggleButtonSize),
+            description: 'Size of the toggle button',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: ToggleButtonSize.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: ToggleButtonSize.sm,
+    },
+};
+export const Size_MD = {
+    args: {
+        options: ['Option 1', 'Option 2', 'Option 3'],
+        selectedOption: 'Option 1',
+        onChange: () => { },
+        size: ToggleButtonSize.md,
+    },
+};
+export const Size_LG = {
+    args: {
+        options: ['Option 1', 'Option 2', 'Option 3'],
+        selectedOption: 'Option 1',
+        onChange: () => { },
+        size: ToggleButtonSize.lg,
+    },
+};

package/dist/stories/types/button.d.ts

@@ -56,8 +56,6 @@ export declare enum ButtonType {
  * Size configuration for a button
  */
 export interface ButtonSizeConfig {
-    width: string;
-    height: string;
     padding: string;
     fontSize: string;
     gap: string;

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

@@ -0,0 +1,35 @@
+/**
+ * Toggle button size variants
+ */
+export declare enum ToggleButtonSize {
+    lg = "lg",
+    md = "md",
+    sm = "sm"
+}
+/**
+ * Toggle button style variants
+ */
+export declare enum ToggleButtonStyle {
+    Outline = "Outline",
+    Filled = "Filled"
+}
+/**
+ * Toggle button component props
+ */
+export type ToggleButtonProps = {
+    /** Size variant of the toggle button */
+    size?: ToggleButtonSize;
+    /** 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.js

@@ -0,0 +1,17 @@
+/**
+ * Toggle button size variants
+ */
+export var ToggleButtonSize;
+(function (ToggleButtonSize) {
+    ToggleButtonSize["lg"] = "lg";
+    ToggleButtonSize["md"] = "md";
+    ToggleButtonSize["sm"] = "sm";
+})(ToggleButtonSize || (ToggleButtonSize = {}));
+/**
+ * Toggle button style variants
+ */
+export var ToggleButtonStyle;
+(function (ToggleButtonStyle) {
+    ToggleButtonStyle["Outline"] = "Outline";
+    ToggleButtonStyle["Filled"] = "Filled";
+})(ToggleButtonStyle || (ToggleButtonStyle = {}));

package/package.json

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