@beydesign/storybook 0.0.87 → 0.0.90

package/dist/stories/Buttons/MainButton.js

@@ -24,6 +24,10 @@ const StyledButton = styled.button `
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--colors-light-background-bg-button-disabled)';
             return 'var(--colors-light-background-bg-brand)';
+        case ButtonHierarchy.PrimaryLemon:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--colors-light-background-bg-element)';
+            return 'var(--primitives-desktop-primary-brand-lemon-400)';
         case ButtonHierarchy.Secondary:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--colors-light-background-bg-component-disabled)';
@@ -59,6 +63,10 @@ const StyledButton = styled.button `
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--colors-light-text-text-white)';
             return 'var(--colors-light-text-text-white)';
+        case ButtonHierarchy.PrimaryLemon:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--colors-light-text-text-subtle)';
+            return 'var(--colors-light-text-text-title)';
         case ButtonHierarchy.Secondary:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--colors-light-text-text-disabled)';
@@ -95,6 +103,10 @@ const StyledButton = styled.button `
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--colors-light-border-border-component)';
             return 'var(--colors-light-background-bg-brand)';
+        case ButtonHierarchy.PrimaryLemon:
+            if (props.$state === ButtonState.Disabled || props.$disabled)
+                return 'var(--colors-light-border-border-component)';
+            return 'var(--primitives-desktop-primary-brand-lemon-400)';
         case ButtonHierarchy.Secondary:
             if (props.$state === ButtonState.Disabled || props.$disabled)
                 return 'var(--colors-light-border-border-component)';
@@ -141,6 +153,8 @@ const StyledButton = styled.button `
     switch (props.$hierarchy) {
         case ButtonHierarchy.Primary:
             return 'var(--colors-light-background-bg-brand-hover)';
+        case ButtonHierarchy.PrimaryLemon:
+            return 'var(--primitives-desktop-primary-brand-lemon-500)';
         case ButtonHierarchy.Secondary:
             return 'var(--colors-light-background-bg-card-highlight-hover)';
         case ButtonHierarchy.SecondaryColor:
@@ -162,6 +176,8 @@ const StyledButton = styled.button `
     switch (props.$hierarchy) {
         case ButtonHierarchy.Primary:
             return 'var(--colors-light-background-bg-brand-hover)';
+        case ButtonHierarchy.PrimaryLemon:
+            return 'var(--primitives-desktop-primary-brand-lemon-500)';
         case ButtonHierarchy.Secondary:
             return 'var(--colors-light-background-bg-card-highlight-hover)';
         case ButtonHierarchy.SecondaryColor:

package/dist/stories/Buttons/MainButton.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof MainButton>;
 export default meta;
 type Story = StoryObj<typeof MainButton>;
 export declare const Primary: Story;
+export declare const PrimaryLemon: Story;
 export declare const Secondary: Story;
 export declare const SecondaryColor: Story;
 export declare const SecondaryTransparent: Story;

package/dist/stories/Buttons/MainButton.stories.js

@@ -32,6 +32,7 @@ const meta = {
             control: 'select',
             options: [
                 'Primary',
+                'Primary-lemon',
                 'Secondary',
                 'Secondary-color',
                 'Secondary-transparent',
@@ -144,6 +145,12 @@ export const Primary = {
         trailingIcon: 'Circle',
     },
 };
+export const PrimaryLemon = {
+    args: {
+        ...Primary.args,
+        hierarchy: ButtonHierarchy.PrimaryLemon,
+    },
+};
 export const Secondary = {
     args: {
         ...Primary.args,

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

@@ -18,6 +18,7 @@ export declare enum ButtonSize {
  */
 export declare enum ButtonHierarchy {
     Primary = "Primary",
+    PrimaryLemon = "Primary-lemon",
     Secondary = "Secondary",
     SecondaryColor = "Secondary-color",
     SecondaryTransparent = "Secondary-transparent",

package/dist/stories/Buttons/types.js

@@ -16,6 +16,7 @@ export var ButtonSize;
 export var ButtonHierarchy;
 (function (ButtonHierarchy) {
     ButtonHierarchy["Primary"] = "Primary";
+    ButtonHierarchy["PrimaryLemon"] = "Primary-lemon";
     ButtonHierarchy["Secondary"] = "Secondary";
     ButtonHierarchy["SecondaryColor"] = "Secondary-color";
     ButtonHierarchy["SecondaryTransparent"] = "Secondary-transparent";

package/dist/stories/Form/TextInput.js

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { HintBubble, HintBubbleSize } from '../UI';
-export const TextInput = ({ label, value, onChange, placeholder, hintText, errorText, disabled, trailingText, style, hintBubbleText, hintBubbleProps, required, labelTrailingElement, labelContainerStyle, }) => {
+export const TextInput = ({ label, value, onChange, placeholder, type = 'text', hintText, errorText, disabled, trailingText, style, hintBubbleText, hintBubbleProps, required, labelTrailingElement, labelContainerStyle, }) => {
     const [focused, setFocused] = useState(false);
     return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: labelContainerStyle, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, children: label }), labelTrailingElement] })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--colors-light-background-bg-component)', border: errorText
                         ? 'none'
@@ -11,7 +11,7 @@ export const TextInput = ({ label, value, onChange, placeholder, hintText, error
                                 ? '1px solid var(--colors-light-border-border-error)'
                                 : focused
                                     ? '1px solid var(--colors-light-border-border-component-active)'
-                                    : 'transparent'}`, children: _jsx("input", { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, style: {
+                                    : 'transparent'}`, children: _jsx("input", { type: type, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, style: {
                                     border: 'none',
                                     outline: 'none',
                                     width: '100%',

package/dist/stories/Form/TextInput.stories.d.ts

@@ -34,6 +34,16 @@ declare const meta: {
                 };
             };
         };
+        type: {
+            control: "select";
+            description: string;
+            options: string[];
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
         hintText: {
             control: "text";
             description: string;
@@ -128,3 +138,5 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Password: Story;
+export declare const Email: Story;

package/dist/stories/Form/TextInput.stories.js

@@ -28,6 +28,14 @@ const meta = {
                 type: { summary: 'string' },
             },
         },
+        type: {
+            control: 'select',
+            description: 'The type of the text input',
+            options: ['text', 'password', 'email', 'number', 'tel', 'url'],
+            table: {
+                type: { summary: 'string' },
+            },
+        },
         hintText: {
             control: 'text',
             description: 'The hint text of the text input',
@@ -108,3 +116,21 @@ export const Default = {
         hintBubbleText: 'This is a hint bubble',
     },
 };
+export const Password = {
+    args: {
+        label: 'Password',
+        value: 'password',
+        type: 'password',
+        onChange: () => { },
+        hintBubbleText: 'This is a hint bubble',
+    },
+};
+export const Email = {
+    args: {
+        label: 'Email',
+        value: 'email',
+        type: 'email',
+        onChange: () => { },
+        hintBubbleText: 'This is a hint bubble',
+    },
+};

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

@@ -1,6 +1,7 @@
 import { SxProps, Theme } from '@mui/material';
 import { HintBubbleProps } from '../UI';
 import { IconName } from '../../utils';
+import React from 'react';
 /**
  * Text area component props
  */
@@ -52,6 +53,8 @@ export type TextInputProps = {
     onChange: (value: string) => void;
     /** Text input placeholder */
     placeholder?: string;
+    /** Text input type */
+    type?: React.InputHTMLAttributes<HTMLInputElement>['type'];
     /** Text input hint */
     hintText?: string;
     /** Text input error */

package/package.json

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