@myelmut/design-system 0.1.50 → 0.1.52

package/dist/types/index.d.ts

@@ -871,13 +871,14 @@ declare interface WizardDropdownProps {
     searchable?: boolean;
 }
 
-export declare const WizardNavbar: ({ variant, totalSteps, currentStep, className }: WizardNavbarProps) => JSX.Element;
+export declare const WizardNavbar: ({ variant, totalSteps, currentStep, className, backToPreviousStep }: WizardNavbarProps) => JSX.Element;
 
 declare type WizardNavbarProps = {
     variant: 'default' | 'form' | 'payment';
     totalSteps?: number;
     currentStep?: number;
     className?: string;
+    backToPreviousStep?: () => void;
 };
 
 export declare const WizardTextInput: ({ placeholder, name, disabled, className, hasError, error, ...props }: WizardTextInputProps) => JSX.Element;
@@ -885,7 +886,7 @@ export declare const WizardTextInput: ({ placeholder, name, disabled, className,
 declare interface WizardTextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     placeholder: string;
     name: string;
-    disabled: boolean;
+    disabled?: boolean;
     error: string;
     hasError: boolean;
     className?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myelmut/design-system",
-  "version": "0.1.50",
+  "version": "0.1.52",
   "description": "Design system for Elmut project",
   "repository": {
     "type": "git",

package/src/components/Base/Text/Text.tsx

@@ -31,6 +31,7 @@ export const Text = ({ variant = 'p', size = 'md', children, className = '', ...
                             br: <br />,
                             b: <b />,
                             i: <i />,
+                            u: <u />,
                         }}
                     />
                 ) : (
@@ -49,6 +50,7 @@ export const Text = ({ variant = 'p', size = 'md', children, className = '', ...
                             br: <br />,
                             b: <b />,
                             i: <i />,
+                            u: <u />,
                         }}
                     />
                 ) : (

package/src/components/Base/Title/Title.tsx

@@ -42,6 +42,7 @@ export const Title = forwardRef<HTMLElement, TitleProps>(({ variant = 'h1', size
                 b: <b />,
                 i: <i />,
                 highlight: <span className="text-lavender-blue-light italic" />,
+                u: <u />,
             }}
         />
     ) : (

package/src/components/Inputs/WizardTextInput/WizardTextInput.tsx

@@ -5,7 +5,7 @@ import { ErrorMessage } from '../ErrorMessage/ErrorMessage';
 export interface WizardTextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     placeholder: string;
     name: string;
-    disabled: boolean;
+    disabled?: boolean;
     error: string;
     hasError: boolean;
     className?: string;

package/src/components/Navigation/Tabs/Tabs.tsx

@@ -27,7 +27,8 @@ export interface TabsProps {
 export const Tabs = ({ tabs, defaultActiveTab, onTabChange, className = '', tabClassName = '', activeTabClassName = '', contentClassName = '', variant = 'default' }: TabsProps) => {
     const [activeTab, setActiveTab] = useState(defaultActiveTab || tabs[0]?.id);
 
-    const handleTabClick = (tabId: string) => {
+    const handleTabClick = (e: React.MouseEvent<HTMLButtonElement>, tabId: string) => {
+        e.preventDefault();
         if (tabs.find((tab) => tab.id === tabId)?.disabled) return;
 
         setActiveTab(tabId);
@@ -61,7 +62,7 @@ export const Tabs = ({ tabs, defaultActiveTab, onTabChange, className = '', tabC
                     return (
                         <button
                             key={tab.id}
-                            onClick={() => handleTabClick(tab.id)}
+                            onClick={(e) => handleTabClick(e, tab.id)}
                             disabled={isDisabled}
                             className={clsx(
                                 "w-full",

package/src/components/Navigation/WizardNavbar/WizardNavbar.tsx

@@ -10,6 +10,7 @@ export type WizardNavbarProps = {
     totalSteps?: number;
     currentStep?: number;
     className?: string;
+    backToPreviousStep?: () => void;
 };
 
 const variantStyles = {
@@ -59,20 +60,22 @@ const TagMobile = ({ variant, totalSteps, currentStep, className }: { variant: W
 };
 
 //todo update button actions or links
-export const WizardNavbar = ({ variant = 'default', totalSteps = 8, currentStep = 1, className }: WizardNavbarProps) => {
+export const WizardNavbar = ({ variant = 'default', totalSteps = 8, currentStep = 1, className, backToPreviousStep = () => {} }: WizardNavbarProps) => {
     const { t } = useTranslation('design');
 
     return (
-        <nav className={clsx('fixed top-0 right-0 left-0 z-10', variantStyles[variant], className)}>
-            <div className={clsx('container mx-auto flex items-center', containerStyles[variant])}>
-                <Button as="a" href="/" variant="terciary" color={variant === 'payment' ? 'light' : 'dark'} className={clsx(variant === 'default' && 'hidden')}>
+        <nav className={clsx('fixed top-0 right-0 left-0 z-20', variantStyles[variant], className)}>
+            <div className={clsx('container flex items-center', containerStyles[variant])}>
+                <Button onClick={backToPreviousStep} as="button" variant="terciary" color={variant === 'payment' ? 'light' : 'dark'} className={clsx(variant === 'default' && 'hidden')}>
                     {t('navigation.back')}
                 </Button>
-                <Logo variant={variant === 'payment' ? 'secondary' : 'primary'} className="mx-auto w-28" />
+                <a href="/" className="mx-auto w-28">
+                    <Logo variant={variant === 'payment' ? 'secondary' : 'primary'} />
+                </a>
                 {variant != 'default' && <TagDesktop variant={variant} totalSteps={totalSteps} currentStep={currentStep} />}
             </div>
             {variant != 'default' && (
-                <div className="container mx-auto px-6 pb-5 md:px-0">
+                <div className="container">
                     <TagMobile variant={variant} totalSteps={totalSteps} currentStep={currentStep} />
                     {variant === 'form' && <Stepper totalSteps={totalSteps} currentStep={currentStep} className="mx-auto mt-6 w-full md:mt-3.5 md:w-3/4" />}
                 </div>