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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.36.2",
+  "version": "0.37.0-beta.10",
   "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, > .popover-container:first-child > .button {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  > .button:last-child, > .popover-container:last-child > .button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  > .button:not(:first-child):not(:last-child), > .popover-container: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/atoms/Popover/Popover.scss

@@ -3,26 +3,64 @@
 @use '../../settings/config';
 @use '../../settings/depth';
 
+
+%top {
+  bottom: 42px;
+  margin-top: auto;
+  margin-bottom: config.$space-2x;
+}
+
+%left {
+  left: 0;
+}
+
+%right {
+  right: 0;
+}
+
+%center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
 .popover-container {
   pointer-events: none;
   position: relative;
+
   > * {
     pointer-events: auto;
   }
+
   .popover-menu-container {
     position: absolute;
     white-space: nowrap;
     margin-top: config.$space-2x;
     z-index: depth.$z-popover;
+
     &.left {
-      left: 0;
+      @extend %left;
     }
+
     &.right {
-      right: 0;
+      @extend %right;
     }
+
     &.center {
-      left: 50%;
-      transform: translateX(-50%);
+      @extend %center;
+    }
+
+    &.top {
+      &-left {
+        @extend %top %left;
+      }
+
+      &-right {
+        @extend %top %right;
+      }
+
+      &-center {
+        @extend %top %center;
+      }
     }
   }
 }
@@ -31,10 +69,9 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  box-shadow:
-    0px 3px 6px -4px rgba(0, 0, 0, 0.12),
-    0px 6px 16px 0px rgba(0, 0, 0, 0.08),
-    0px 9px 28px 8px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+  0px 6px 16px 0px rgba(0, 0, 0, 0.08),
+  0px 9px 28px 8px rgba(0, 0, 0, 0.05);
 
   .popover-menu-option {
     @include typography.body-regular-primary;
@@ -44,6 +81,7 @@
     border-radius: config.$corner-radius-xxs;
     text-decoration: none;
     cursor: default;
+    border: none;
 
     &:hover {
       text-decoration: none;

package/src/atoms/Popover/Popover.tsx

@@ -5,34 +5,49 @@ import { useOpen } from '../../hooks/useOpen'
 import { useOutsideClick } from '../../hooks/useOutsideClick'
 import { classNames } from '../../utils/classNames'
 
+type Actions = {
+  isOpen: boolean
+  close: () => void
+  open: () => void
+  toggle: () => void
+}
+
+type Horizontal = 'left' | 'right' | 'center'
+
+type Position = Horizontal | `top-${Horizontal}`
+
 export interface PopoverProps {
-  renderButton: (props: {
-    isOpen: boolean
-    close: () => void
-    open: () => void
-    toggle: () => void
-  }) => React.ReactNode
-  position?: 'left' | 'right' | 'center'
+  renderButton: (props: Actions) => React.ReactNode
+  position?: Position
+  className?: string
   children: React.ReactNode
 }
 
-function Popover({ renderButton, position = 'left', children }: PopoverProps) {
+function Popover({
+  renderButton,
+  position = 'left',
+  className,
+  children,
+}: PopoverProps) {
   const { isOpen, close, open, toggle } = useOpen()
 
   const popoverRef = useRef(null)
   useOutsideClick(popoverRef, close)
 
   return (
-    <div className="popover-container" ref={popoverRef}>
+    <div
+      className={classNames('popover-container', className)}
+      ref={popoverRef}
+    >
       {renderButton({ isOpen, close, open, toggle })}
-      {isOpen && (
-        <div
-          className={classNames('popover-menu-container', position)}
-          onClick={close}
-        >
-          {children}
-        </div>
-      )}
+      <div
+        className={classNames('popover-menu-container', position, {
+          hidden: !isOpen,
+        })}
+        onClick={close}
+      >
+        {children}
+      </div>
     </div>
   )
 }

package/src/atoms/Popover/PopoverMenu.tsx

@@ -1,4 +1,5 @@
 import './Popover.scss'
+import React from 'react'
 import { classNames } from '../../utils/classNames'
 
 export interface PopoverMenuProps

package/src/atoms/Popover/PopoverMenuOption.tsx

@@ -1,26 +1,24 @@
 import './Popover.scss'
-import type { LinkProps as NextLinkProps } from 'next/link'
-import Link from 'next/link'
-import React, { type AnchorHTMLAttributes } from 'react'
+import React from 'react'
 import { classNames } from '../../utils/classNames'
+import { BaseButton, type BaseButtonProps } from '../Button'
 
 export type Variant = 'primary'
 
-type LinkProps = NextLinkProps & AnchorHTMLAttributes<HTMLAnchorElement>
-export interface PopoverMenuOptionProps extends LinkProps {
+export interface CustomProps {
   variant?: Variant
   title: string
   disabled?: boolean
-  href: string
   active?: boolean
 }
 
+export type PopoverMenuOptionProps = CustomProps & BaseButtonProps
+
 export function PopoverMenuOption({
   variant = 'primary',
   className,
   title,
   disabled,
-  href,
   active,
   prefetch = false,
   ...props
@@ -29,17 +27,14 @@ export function PopoverMenuOption({
     disabled,
     active,
   })
-
   return (
-    <Link
+    <BaseButton
       role="menuitem"
       className={cssClasses}
-      href={disabled ? '#' : href}
       aria-disabled={disabled}
-      prefetch={prefetch}
       {...props}
     >
-      <span className="title">{title}</span>
-    </Link>
+      {title}
+    </BaseButton>
   )
 }

package/src/icons/index.tsx

@@ -38,6 +38,7 @@ import Invoice from './invoice.svg'
 import Loading from './loading.svg'
 import Logout from './logout.svg'
 import Minus from './minus.svg'
+import More from './more.svg'
 import NewView from './new-view.svg'
 import Orders from './orders.svg'
 import PDF from './pdf.svg'
@@ -97,6 +98,7 @@ export {
   Loading,
   Logout,
   Minus,
+  More,
   NewView,
   Orders,
   PDF,

package/src/icons/more.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<g>
+	<g id="keyboard-control">
+		<path d="M20,4c0-2.2-1.8-4-4-4s-4,1.8-4,4s1.8,4,4,4S20,6.2,20,4z M20,28c0-2.2-1.8-4-4-4s-4,1.8-4,4s1.8,4,4,4S20,30.2,20,28z
+			 M20,16c0-2.2-1.8-4-4-4s-4,1.8-4,4s1.8,4,4,4S20,18.2,20,16z"/>
+	</g>
+</g>
+</svg>

package/src/stories/Alert.stories.ts

@@ -8,7 +8,15 @@ const meta = {
     docs: {
       description: {
         component:
-          "<h2>Usage guidelines</h2><ul><li>Make Alerts actionable and including a close button</li><li>Be aware of color and semantic meaning</li><li>Include only one action per Alert</li><li>Place Alerts at the top</li><li>Don't place Alerts over navigation</li><li>Persist errors to maintain visibility</li></ul>",
+          '<h2>Usage guidelines</h2>' +
+          '<ul>' +
+          ' <li>Make Alerts actionable and including a close button</li>' +
+          ' <li>Be aware of color and semantic meaning</li>' +
+          ' <li>Include only one action per Alert</li>' +
+          ' <li>Place Alerts at the top</li>' +
+          " <li>Don't place Alerts over navigation</li>" +
+          ' <li>Persist errors to maintain visibility</li>' +
+          '</ul>',
       },
     },
   },

package/src/stories/{AlertContainer.stories.js → AlertContainer.stories.tsx}

@@ -1,3 +1,4 @@
+import type { StoryObj } from '@storybook/react'
 import React from 'react'
 import { Alert, AlertContainer } from '../atoms/Alert'
 
@@ -17,8 +18,9 @@ const meta = {
 }
 
 export default meta
+type Story = StoryObj<typeof meta>
 
-export const Primary = {
+export const Primary: Story = {
   render: () => (
     <AlertContainer>
       <Alert variant="success" id="success" text="This is a success alert" />

package/src/stories/Badge.stories.ts

@@ -8,7 +8,8 @@ const meta = {
     docs: {
       description: {
         component:
-          '<h2>Usage guidelines</h2><p>Use Badge component when content is mapped to multiple categories and the user needs a way to differentiate between them such as labeling or read-only situations.</p>',
+          '<h2>Usage guidelines</h2>' +
+          '<p>Use Badge component when content is mapped to multiple categories and the user needs a way to differentiate between them such as labeling or read-only situations.</p>',
       },
     },
   },

package/src/stories/Button.stories.ts

@@ -8,7 +8,14 @@ const meta = {
     docs: {
       description: {
         component:
-          '<h2>Usage guidelines</h2><ul><li>Button can be used as an action trigger or as a navigational component</li><li>Use icons at the page first level actions such as Create, Edit, Delete or mass actions</li><li>Display a popover when featuring subsequent options</li><li>Be aware of color and semantic meaning</li><li>Write labels as verbs</li></ul>',
+          '<h2>Usage guidelines</h2>' +
+          '<ul>' +
+          ' <li>Button can be used as an action trigger or as a navigational component</li>' +
+          ' <li>Use icons at the page first level actions such as Create, Edit, Delete or mass actions</li>' +
+          ' <li>Display a popover when featuring subsequent options</li>' +
+          ' <li>Be aware of color and semantic meaning</li>' +
+          ' <li>Write labels as verbs</li>' +
+          '</ul>',
       },
     },
   },
@@ -42,6 +49,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',