@myelmut/design-system 0.1.69 → 0.1.71

package/dist/types/index.d.ts

@@ -375,7 +375,7 @@ export { HomeHeroShapeSmall }
 
 export declare const IllustratedCard: ForwardRefExoticComponent<IllustratedCardProps & RefAttributes<HTMLDivElement>>;
 
-export declare const IllustratedCardButton: ({ label, layout, description, illustration, disabled, className, ...props }: IllustratedCardButtonProps) => JSX.Element;
+export declare const IllustratedCardButton: ({ label, layout, description, illustration, disabled, className, isActive, illustrationClassName, ...props }: IllustratedCardButtonProps) => JSX.Element;
 
 declare type IllustratedCardButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     label: string;
@@ -383,6 +383,8 @@ declare type IllustratedCardButtonProps = React.ButtonHTMLAttributes<HTMLButtonE
     description: string;
     layout?: 'vertical' | 'horizontal';
     className?: string;
+    isActive?: boolean;
+    illustrationClassName?: string;
 };
 
 declare interface IllustratedCardProps {

package/package.json

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

package/src/components/Buttons/IllustratedCardButton/IllustratedCardButton.stories.tsx

@@ -37,6 +37,14 @@ const meta = {
             control: 'text',
             description: 'Additional class name',
         },
+        isActive: {
+            control: 'boolean',
+            description: 'Whether the button is active',
+        },
+        illustrationClassName: {
+            control: 'text',
+            description: 'Additional class name for the illustration',
+        },
     },
     globals: {
         backgrounds: {

package/src/components/Buttons/IllustratedCardButton/IllustratedCardButton.tsx

@@ -6,6 +6,8 @@ export type IllustratedCardButtonProps = React.ButtonHTMLAttributes<HTMLButtonEl
     description: string;
     layout?: 'vertical' | 'horizontal';
     className?: string;
+    isActive?: boolean;
+    illustrationClassName?: string;
 };
 
 const layoutStyles = {
@@ -20,25 +22,28 @@ const textLayoutStyles = {
 
 const illustrationLayoutStyles = {
     vertical: 'mb-2 w-18',
-    horizontal: 'w-15',
+    horizontal: 'w-16.5',
 };
 
-export const IllustratedCardButton = ({ label, layout = 'vertical', description, illustration, disabled, className = '', ...props }: IllustratedCardButtonProps) => {
+export const IllustratedCardButton = ({ label, layout = 'vertical', description, illustration, disabled, className = '', isActive = false, illustrationClassName = '', ...props }: IllustratedCardButtonProps) => {
     // prettier-ignore
     const buttonClasses = clsx(
-        "relative md:px-5 md:py-6 flex md:flex-col items-center overflow-hidden rounded-input bg-beige-dark text-claret-violet-dark transition-all duration-300 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50", 
+        "relative md:px-5 md:py-6 flex md:flex-col items-center md:justify-center overflow-hidden rounded-input bg-beige-dark text-claret-violet-dark transition-all duration-300 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50", 
         "after:absolute after:content-[''] after:border after:rounded-input after:border-beige-ultra-dark after:inset-0 after:z-0 hover:after:border-claret-violet-dark after:transition-colors after:duration-300 focus-visible:after:border-claret-violet-dark",
         "md:rounded-card md:after:rounded-card gap-3 md:p-6 justify-center md:aspect-5/6 md:w-70.5",
+        isActive && "after:border-claret-violet-dark",
         layoutStyles[layout],
         className,
     );
 
     return (
         <button className={buttonClasses} disabled={disabled} {...props} tabIndex={disabled ? -1 : 0}>
-            <img src={illustration} alt={label} className={clsx('md:mb-6 md:w-25', illustrationLayoutStyles[layout])} loading="lazy" decoding="async" />
+            <div className={clsx('md:mb-6 md:h-25 md:w-auto', illustrationLayoutStyles[layout], illustrationClassName)}>
+                <img src={illustration} alt={label} className="h-full object-contain" loading="lazy" decoding="async" />
+            </div>
             <span className={clsx('flex flex-col gap-2.5', textLayoutStyles[layout])}>
-                <span className="text-sm-mobile w-full font-semibold md:text-xl">{label}</span>
-                <span className="text-sm-mobile md:text-md w-full">{description}</span>
+                <span className="text-md-mobile w-full font-semibold md:text-xl">{label}</span>
+                <span className="text-md-mobile md:text-md w-full">{description}</span>
             </span>
         </button>
     );