agroptima-design-system 0.29.2-beta.5 → 0.29.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.29.2-beta.5",
+  "version": "0.29.2",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Button/Button.tsx

@@ -45,21 +45,20 @@ export function Button({
   disabled,
   variant = 'primary',
   loading = false,
+  className,
   ...props
 }: ButtonProps) {
-  if (loading) {
-    leftIcon = 'Loading'
-  }
-  const cssClasses = classNames(props.className, 'button', variant)
+  const leftIconName = loading ? 'Loading' : leftIcon
+  const cssClasses = classNames(className, 'button', variant)
 
   return (
     <BaseButton
       disabled={loading || disabled}
       aria-label={accessibilityLabel || label}
-      {...props}
       className={cssClasses}
+      {...props}
     >
-      {leftIcon && <Icon name={leftIcon} size="3" />}
+      {leftIconName && <Icon name={leftIconName} size="3" />}
       {label}
       {rightIcon && <Icon name={rightIcon} size="3" />}
     </BaseButton>

package/src/atoms/Button/FloatingButton.tsx

@@ -35,7 +35,7 @@ export function FloatingButton({
 
   return (
     <BaseButton
-      disabled={disabled}
+      disabled={loading || disabled}
       aria-label={accessibilityLabel}
       className={cssClasses}
       {...props}

package/src/atoms/Button/IconButton.tsx

@@ -25,15 +25,16 @@ export function IconButton({
   variant = 'primary',
   loading = false,
   size,
+  className,
   ...props
 }: IconButtonProps) {
   const iconName = loading ? 'Loading' : icon
   return (
     <BaseButton
-      disabled={disabled}
+      disabled={loading || disabled}
       aria-label={accessibilityLabel}
+      className={classNames(className, 'icon-button', variant)}
       {...props}
-      className={classNames(props.className, 'icon-button', variant)}
     >
       <Icon title={accessibilityLabel} name={iconName} size={size} />
     </BaseButton>

package/src/atoms/Select.tsx

@@ -1,4 +1,3 @@
-'use client'
 import './Select.scss'
 import React, { useRef, useState } from 'react'
 import { useOpen } from '../hooks/useOpen'
@@ -161,7 +160,6 @@ function OptionList({
   searchLabel,
 }: OptionListProps) {
   const { findItems, search } = useSearch(options, 'label')
-
   return (
     <div className="select-options">
       {isSearchable && (

package/src/stories/Button.stories.ts

@@ -24,6 +24,7 @@ const meta = {
     },
     loading: {
       description: 'Is the button in loading state?',
+      control: { type: 'boolean', default: false },
     },
     leftIcon: {
       description: 'Button left icon from a list of values',
@@ -39,7 +40,7 @@ const meta = {
     },
     visible: {
       description: 'Is the button visible?',
-      control: { type: 'boolean', default: true },
+      control: { type: 'boolean' },
     },
   },
 }

package/src/stories/FloatingButton.stories.ts

@@ -23,6 +23,10 @@ const meta = {
       description:
         'If a link is provided, the component will be rendered as NextLink, otherwise as button',
     },
+    loading: {
+      description: 'Is the button in loading state?',
+      control: { type: 'boolean' },
+    },
   },
 }
 

package/src/stories/IconButton.stories.ts

@@ -27,6 +27,10 @@ const meta = {
       description:
         'If a link is provided, the component will be rendered as NextLink, otherwise as button',
     },
+    loading: {
+      description: 'Is the button in loading state?',
+      control: { type: 'boolean' },
+    },
   },
 }