agroptima-design-system 0.22.5 → 0.22.6

package/.storybook/main.ts

@@ -10,6 +10,7 @@ function getAbsolutePath(value: string): any {
 }
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
   addons: [
     getAbsolutePath('@storybook/addon-links'),
     getAbsolutePath('@storybook/addon-essentials'),
@@ -17,14 +18,19 @@ const config: StorybookConfig = {
     '@storybook/addon-a11y',
     '@storybook/addon-designs',
     '@storybook/addon-mdx-gfm',
+    '@chromatic-com/storybook'
   ],
+
   framework: {
     name: '@storybook/nextjs',
     options: {},
   },
+
   docs: {},
+
   core: {},
   staticDirs: ['../public'],
+
   webpackFinal: async (config) => {
     const pathToInlineSvg = resolve(__dirname, '../src/icons')
 
@@ -52,5 +58,9 @@ const config: StorybookConfig = {
 
     return config
   },
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
+  }
 }
 export default config

package/.storybook/preview.ts

@@ -26,6 +26,8 @@ const preview: Preview = {
       viewports: INITIAL_VIEWPORTS,
     },
   },
+
+  tags: ['autodocs']
 }
 
 export default preview

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.22.5",
+  "version": "0.22.6",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
@@ -15,22 +15,23 @@
   },
   "dependencies": {
     "@storybook/addon-designs": "^8.0.3",
-    "@storybook/addon-viewport": "^8.2.1",
+    "@storybook/addon-viewport": "^8.2.5",
     "next": "^14.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.69.4"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^8.2.1",
-    "@storybook/addon-essentials": "^8.2.1",
-    "@storybook/addon-interactions": "^8.2.1",
-    "@storybook/addon-links": "^8.2.1",
-    "@storybook/addon-mdx-gfm": "^8.2.1",
-    "@storybook/blocks": "^8.2.1",
-    "@storybook/nextjs": "^8.2.1",
-    "@storybook/react": "^8.2.1",
-    "@storybook/test": "^8.2.1",
+    "@chromatic-com/storybook": "^1.6.1",
+    "@storybook/addon-a11y": "^8.2.5",
+    "@storybook/addon-essentials": "^8.2.5",
+    "@storybook/addon-interactions": "^8.2.5",
+    "@storybook/addon-links": "^8.2.5",
+    "@storybook/addon-mdx-gfm": "^8.2.5",
+    "@storybook/blocks": "^8.2.5",
+    "@storybook/nextjs": "^8.2.5",
+    "@storybook/react": "^8.2.5",
+    "@storybook/test": "^8.2.5",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.2",
@@ -47,7 +48,7 @@
     "jest": "^29.7.0",
     "jest-axe": "^8.0.0",
     "jest-environment-jsdom": "^29.7.0",
-    "storybook": "^8.2.1",
+    "storybook": "^8.2.5",
     "ts-node": "^10.9.2",
     "typescript": "^5"
   },

package/src/atoms/Alert.scss

@@ -37,9 +37,10 @@
       height: 100%;
     }
   }
-
-  .icon-button {
+  button {
     pointer-events: auto;
+  }
+  .icon-button {
     margin-top: 5px;
     .icon {
       width: config.$icon-size-3x;

package/src/atoms/Button/IconButton.tsx

@@ -9,6 +9,7 @@ interface CustomProps {
   icon: IconType
   variant?: Variant
   disabled?: boolean
+  visible?: boolean
   accessibilityLabel: string
 }
 
@@ -18,17 +19,18 @@ export function IconButton({
   accessibilityLabel,
   icon,
   disabled,
+  visible = true,
   variant = 'primary',
   ...props
 }: IconButtonProps) {
-  const cssClasses = classNames(props.className, 'icon-button', variant)
+  if (!visible) return null
 
   return (
     <BaseButton
       disabled={disabled}
       aria-label={accessibilityLabel}
       {...props}
-      className={cssClasses}
+      className={classNames(props.className, 'icon-button', variant)}
     >
       <Icon name={icon} />
     </BaseButton>

package/src/atoms/CardsTable/CardsTable.scss

@@ -175,7 +175,6 @@
   td.actions {
     order: 0;
     justify-content: center;
-    flex: 1;
   }
 
   td:has(.badge) {
@@ -249,7 +248,7 @@
       inset: auto config.$space-3x config.$space-3x auto;
     }
     tr:has(.badge) {
-      padding-bottom: config.$space-9x;
+      padding-bottom: config.$space-10x;
     }
   }
 }

package/src/settings/_config.scss

@@ -1,11 +1,11 @@
 // Pending to clean the non-used agroptima variables and -bodegas from the name
 /* Variables  */
+$space-halfx: 2px;
 $space-1x: 4px;
 $space-2x: 8px;
 $space-3x: 12px;
 $space-4x: 16px;
 $space-5x: 20px;
-$space-halfx: 2px;
 $space-6x: 24px;
 $space-7x: 28px;
 $space-8x: 32px;

package/src/stories/Changelog.mdx

@@ -4,6 +4,11 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+# 0.22.6
+
+* Add property to IconButton component for set the visibility.
+* Fix table actions alignment in CardTable component.
+
 # 0.22.5
 
 * Add more actions to CardTable component.

package/src/stories/IconButton.stories.ts

@@ -19,6 +19,10 @@ const meta = {
       description: 'Icon from a list of values',
       control: { type: 'select' },
     },
+    visible: {
+      description: 'Is the button visible?',
+      control: { type: 'boolean', default: true },
+    },
     href: {
       description:
         'If a link is provided, the component will be rendered as NextLink, otherwise as button',