agroptima-design-system 0.36.2 → 0.37.0-beta.1

package/package.json

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

package/src/atoms/Button/Button.scss

@@ -9,6 +9,7 @@
   > .icon {
     > svg {
       fill: $secondary-color;
+
       path {
         fill: $secondary-color;
       }
@@ -36,38 +37,33 @@
   border: 1px solid transparent;
 
   > .icon {
-    margin-top: 2px;
-    width: config.$icon-size-3x;
-    height: config.$icon-size-3x;
-    > svg {
-      width: 100%;
-      height: 100%;
-    }
+    margin: 6px 2px;
   }
 
   &.primary {
     @include button-style(
-      color_alias.$primary-color-600,
-      color_alias.$neutral-white,
-      color_alias.$primary-color-800
+                    color_alias.$primary-color-600,
+                    color_alias.$neutral-white,
+                    color_alias.$primary-color-800
     );
   }
 
   &.primary-outlined {
     border: 1px solid color_alias.$primary-color-600;
     @include button-style(
-      color_alias.$neutral-white,
-      color_alias.$primary-color-600,
-      color_alias.$primary-color-50
+                    color_alias.$neutral-white,
+                    color_alias.$primary-color-600,
+                    color_alias.$primary-color-50
     );
   }
 
   &.primary-ghost {
     @include button-style(
-      color_alias.$neutral-white,
-      color_alias.$primary-color-600,
-      transparent
+                    color_alias.$neutral-white,
+                    color_alias.$primary-color-600,
+                    transparent
     );
+
     &:not(:disabled):hover,
     &:not(:disabled):active {
       border: 1px solid color_alias.$primary-color-600;
@@ -76,16 +72,19 @@
 
   &.error {
     @include button-style(
-      color_alias.$error-color-1000,
-      color_alias.$neutral-color-1000,
-      color_alias.$error-color-700
+                    color_alias.$error-color-1000,
+                    color_alias.$neutral-color-1000,
+                    color_alias.$error-color-700
     );
+
     &:not(:disabled):hover,
     &:not(:disabled):active {
       color: color_alias.$neutral-white;
+
       > .icon {
         > svg {
           fill: color_alias.$neutral-white;
+
           path {
             fill: color_alias.$neutral-white;
           }
@@ -97,18 +96,19 @@
   &.error-outlined {
     border: 1px solid color_alias.$error-color-600;
     @include button-style(
-      color_alias.$neutral-white,
-      color_alias.$error-color-600,
-      color_alias.$error-color-50
+                    color_alias.$neutral-white,
+                    color_alias.$error-color-600,
+                    color_alias.$error-color-50
     );
   }
 
   &.error-ghost {
     @include button-style(
-      color_alias.$neutral-white,
-      color_alias.$error-color-600,
-      transparent
+                    color_alias.$neutral-white,
+                    color_alias.$error-color-600,
+                    transparent
     );
+
     &:not(:disabled):hover,
     &:not(:disabled):active {
       border: 1px solid color_alias.$error-color-600;
@@ -117,16 +117,19 @@
 
   &.success {
     @include button-style(
-      color_alias.$success-color-1000,
-      color_alias.$neutral-color-900,
-      color_alias.$success-color-700
+                    color_alias.$success-color-1000,
+                    color_alias.$neutral-color-900,
+                    color_alias.$success-color-700
     );
+
     &:not(:disabled):hover,
     &:not(:disabled):active {
       color: color_alias.$neutral-white;
+
       > .icon {
         > svg {
           fill: color_alias.$neutral-white;
+
           path {
             fill: color_alias.$neutral-white;
           }
@@ -139,18 +142,19 @@
     border: 1px solid color_alias.$success-color-1000;
 
     @include button-style(
-      color_alias.$neutral-white,
-      color_alias.$neutral-color-900,
-      color_alias.$success-color-50
+                    color_alias.$neutral-white,
+                    color_alias.$neutral-color-900,
+                    color_alias.$success-color-50
     );
   }
 
   &.success-ghost {
     @include button-style(
-      color_alias.$neutral-white,
-      color_alias.$success-color-1000,
-      transparent
+                    color_alias.$neutral-white,
+                    color_alias.$success-color-1000,
+                    transparent
     );
+
     &:not(:disabled):hover,
     &:not(:disabled):active {
       border: 1px solid color_alias.$success-color-1000;
@@ -159,16 +163,19 @@
 
   &.warning {
     @include button-style(
-      color_alias.$warning-color-1000,
-      color_alias.$neutral-color-900,
-      color_alias.$warning-color-700
+                    color_alias.$warning-color-1000,
+                    color_alias.$neutral-color-900,
+                    color_alias.$warning-color-700
     );
+
     &:not(:disabled):hover,
     &:not(:disabled):active {
       color: color_alias.$neutral-white;
+
       > .icon {
         > svg {
           fill: color_alias.$neutral-white;
+
           path {
             fill: color_alias.$neutral-white;
           }
@@ -180,18 +187,19 @@
   &.warning-outlined {
     border: 1px solid color_alias.$warning-color-1000;
     @include button-style(
-      color_alias.$neutral-white,
-      color_alias.$neutral-color-900,
-      color_alias.$warning-color-50
+                    color_alias.$neutral-white,
+                    color_alias.$neutral-color-900,
+                    color_alias.$warning-color-50
     );
   }
 
   &.warning-ghost {
     @include button-style(
-      color_alias.$neutral-white,
-      color_alias.$warning-color-1000,
-      transparent
+                    color_alias.$neutral-white,
+                    color_alias.$warning-color-1000,
+                    transparent
     );
+
     &:not(:disabled):hover,
     &:not(:disabled):active {
       border: 1px solid color_alias.$warning-color-1000;
@@ -200,27 +208,28 @@
 
   &.info {
     @include button-style(
-      color_alias.$info-color-600,
-      color_alias.$neutral-white,
-      color_alias.$info-color-900
+                    color_alias.$info-color-600,
+                    color_alias.$neutral-white,
+                    color_alias.$info-color-900
     );
   }
 
   &.info-outlined {
     border: 1px solid color_alias.$info-color-600;
     @include button-style(
-      color_alias.$neutral-white,
-      color_alias.$info-color-600,
-      color_alias.$info-color-50
+                    color_alias.$neutral-white,
+                    color_alias.$info-color-600,
+                    color_alias.$info-color-50
     );
   }
 
   &.info-ghost {
     @include button-style(
-      color_alias.$neutral-white,
-      color_alias.$info-color-600,
-      transparent
+                    color_alias.$neutral-white,
+                    color_alias.$info-color-600,
+                    transparent
     );
+
     &:not(:disabled):hover,
     &:not(:disabled):active {
       border: 1px solid color_alias.$info-color-600;
@@ -229,27 +238,28 @@
 
   &.neutral {
     @include button-style(
-      color_alias.$neutral-color-100,
-      color_alias.$neutral-color-1000,
-      color_alias.$neutral-color-300
+                    color_alias.$neutral-color-100,
+                    color_alias.$neutral-color-1000,
+                    color_alias.$neutral-color-300
     );
   }
 
   &.neutral-outlined {
     border: 1px solid color_alias.$neutral-color-100;
     @include button-style(
-      color_alias.$neutral-white,
-      color_alias.$neutral-color-1000,
-      color_alias.$neutral-color-50
+                    color_alias.$neutral-white,
+                    color_alias.$neutral-color-1000,
+                    color_alias.$neutral-color-50
     );
   }
 
   &.neutral-ghost {
     @include button-style(
-      color_alias.$neutral-white,
-      color_alias.$neutral-color-1000,
-      transparent
+                    color_alias.$neutral-white,
+                    color_alias.$neutral-color-1000,
+                    transparent
     );
+
     &:not(:disabled):hover,
     &:not(:disabled):active {
       border: 1px solid color_alias.$neutral-color-100;
@@ -258,9 +268,11 @@
 
   &:disabled {
     color: color_alias.$neutral-color-400;
+
     > .icon {
       > svg {
         fill: color_alias.$neutral-color-400;
+
         path {
           fill: color_alias.$neutral-color-400;
         }

package/src/atoms/Button/Button.tsx

@@ -7,6 +7,7 @@ import { BaseButton } from './BaseButton'
 
 interface CustomProps {
   label: string
+  icon?: IconType
   accessibilityLabel?: string
   leftIcon?: IconType
   rightIcon?: IconType
@@ -40,6 +41,7 @@ export type ButtonVariant =
 
 export function Button({
   label,
+  icon,
   accessibilityLabel,
   leftIcon,
   rightIcon,
@@ -63,7 +65,7 @@ export function Button({
       {...props}
     >
       {leftIconName && <Icon name={leftIconName} size="3" />}
-      {label}
+      {icon ? <Icon name={icon} size="3" /> : label}
       {rightIcon && <Icon name={rightIcon} size="3" />}
     </BaseButton>
   )

package/src/atoms/ButtonGroup/ButtonGroup.scss

@@ -0,0 +1,20 @@
+.button-group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1px;
+
+  > .button:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  > .button:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  > .button:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+}

package/src/atoms/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,10 @@
+import './ButtonGroup.scss'
+import React from 'react'
+import { classNames } from '../../utils/classNames'
+
+export interface ButtonGroupProps
+  extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function ButtonGroup({ className, children }: ButtonGroupProps) {
+  return <div className={classNames('button-group', className)}>{children}</div>
+}

package/src/atoms/ButtonGroup/index.ts

@@ -0,0 +1,3 @@
+import { ButtonGroup } from './ButtonGroup'
+
+export { ButtonGroup }

package/src/stories/Button.stories.ts

@@ -42,6 +42,10 @@ const meta = {
       description: 'Button right icon from a list of values',
       control: { type: 'select' },
     },
+    icon: {
+      description: 'Replaces the label for a icon',
+      control: { type: 'select' },
+    },
     href: {
       description:
         'If a link is provided, the component will be rendered as NextLink, otherwise as button',

package/src/stories/ButtonGroup.stories.tsx

@@ -0,0 +1,79 @@
+import type { StoryObj } from '@storybook/react'
+import { Button } from '../atoms/Button'
+import { ButtonGroup } from '../atoms/ButtonGroup'
+
+const figmaDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/design/DN2ova21vWqCRvPspBXgI1/Design-System?node-id=4279-942&t=06AFHQVmeQz1JClF-0',
+  },
+}
+
+const meta = {
+  title: 'Design System/Atoms/ButtonGroup',
+  component: ButtonGroup,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '<h2>Usage guidelines</h2>' +
+          '<p>The <code>ButtonGroup</code> component is used to visually group two or more buttons on a single horizontal line. This helps indicate related actions and maintain consistent UI alignment.</p>' +
+          '<ul>' +
+          '  <li>Use to group related actions that should be presented together</li>' +
+          '  <li>Use for things like filter options, segmented controls, or inline actions</li>' +
+          '  <li>Ensure all buttons in the group are accessible and clearly labeled</li>' +
+          '  <li>Pass buttons through the <code>children</code> prop as an array or fragment</li>' +
+          '  <li>Do not include unrelated controls like inputs or toggles in the same group</li>' +
+          '</ul>',
+      },
+    },
+    figmaDesign,
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    children: {
+      description: 'prop is used to pass buttons components.',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const TwoButtons: Story = {
+  args: {
+    children: (
+      <>
+        <Button type="button" label="Button" className="button" />
+        <Button
+          icon="AngleDown"
+          type="button"
+          label="Button"
+          className="button"
+        />
+      </>
+    ),
+  },
+}
+
+export const ThreeButtons: Story = {
+  args: {
+    children: (
+      <>
+        <Button
+          icon="AngleLeft"
+          type="button"
+          label="Button"
+          className="button"
+        />
+        <Button type="button" label="Button" className="button" />
+        <Button
+          icon="AngleRight"
+          type="button"
+          label="Button"
+          className="button"
+        />
+      </>
+    ),
+  },
+}

package/src/stories/Changelog.mdx

@@ -4,6 +4,11 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+## 0.37.0
+
+* Add ButtonGroup component
+* Add `icon` property to Button component
+
 ## 0.36.2
 
 * Add Order icon

package/src/stories/InputWithButton.stories.tsx

@@ -3,6 +3,13 @@ import { Button } from '../atoms/Button'
 import { Input } from '../atoms/Input'
 import { InputWithButton } from '../atoms/InputWithButton'
 
+const figmaDesign = {
+  design: {
+    type: 'figma',
+    url: '',
+  },
+}
+
 const meta = {
   title: 'Design System/Atoms/InputWithButton',
   component: InputWithButton,
@@ -23,6 +30,7 @@ const meta = {
           '</ul>',
       },
     },
+    figmaDesign,
   },
   tags: ['autodocs'],
   argTypes: {