agroptima-design-system 0.37.1-beta.9 → 0.37.3

package/.github/workflows/run-linters.yml

@@ -8,7 +8,7 @@ on:
       - synchronize
 
 jobs:
-  build:
+  run-linters:
     runs-on: ubuntu-latest
 
     steps:

package/.github/workflows/run-tests.yml

@@ -8,7 +8,7 @@ on:
       - synchronize
 
 jobs:
-  build:
+  run-tests:
     runs-on: ubuntu-latest
 
     steps:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.37.1-beta.9",
+  "version": "0.37.3",
   "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/Checkbox.tsx

@@ -46,7 +46,7 @@ export function Checkbox({
         type="checkbox"
         className="checkbox"
         disabled={disabled}
-        aria-label={accessibilityLabel}
+        aria-label={accessibilityLabel || `${name} checkbox`}
         {...props}
       />
       <Label
@@ -54,8 +54,9 @@ export function Checkbox({
         required={props.required}
         disabled={disabled}
         className={classNames({ 'visually-hidden': hideLabel })}
+        aria-labelledby={identifier}
       >
-        {children || accessibilityLabel}
+        {children}
       </Label>
     </div>
   )

package/src/atoms/Divider.tsx

@@ -7,7 +7,7 @@ import { Icon } from './Icon'
 type DividerIconTypes = IconType | 'Line'
 
 export interface DividerProps extends ComponentPropsWithoutRef<'div'> {
-  title: string
+  title?: string
   variant?: string
   icon?: DividerIconTypes
   iconButton?: IconType
@@ -28,12 +28,14 @@ export function Divider({
 
   return (
     <div role="separator" className={cssClasses}>
-      <div className="divider-title">
-        <DividerIcon icon={icon} />
-        <span onClick={onClick} className={classNames({ link: hasAction })}>
-          {title}
-        </span>
-      </div>
+      {title && (
+        <div className="divider-title">
+          <DividerIcon icon={icon} />
+          <span onClick={onClick} className={classNames({ link: hasAction })}>
+            {title}
+          </span>
+        </div>
+      )}
       <div className="long line"></div>
       {children}
     </div>

package/src/atoms/Popover/Popover.scss

@@ -3,26 +3,67 @@
 @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;
+        @extend %left;
+      }
+
+      &-right {
+        @extend %top;
+        @extend %right;
+      }
+
+      &-center {
+        @extend %top;
+        @extend %center;
+      }
     }
   }
 }
@@ -31,10 +72,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 +84,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,50 @@ 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}
+        aria-hidden={!isOpen}
+      >
+        {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/atoms/Select/Select.scss

@@ -141,11 +141,7 @@ $elements-space: config.$space-2x;
         margin: 0;
         padding: 0;
       }
-      .loader {
-        height: 50px;
-        opacity: 0.5;
-        background-color: green;
-      }
+
       .option {
         display: flex;
         align-items: center;

package/src/atoms/Select/Select.tsx

@@ -30,10 +30,6 @@ export interface SelectProps extends InputPropsWithoutOnChange {
   isSearchable?: boolean
   searchLabel?: string
   fullWidth?: boolean
-  infiniteScroll?: boolean
-  onLoadMore?: () => void
-  hasMore?: boolean
-  loading?: boolean
 }
 
 const EMPTY_OPTION = { id: '', label: '' }
@@ -56,10 +52,6 @@ export function Select({
   isSearchable = false,
   searchLabel = 'Search',
   fullWidth = false,
-  infiniteScroll = false,
-  onLoadMore,
-  hasMore,
-  loading,
   ...props
 }: SelectProps): React.JSX.Element {
   const { isOpen, close, toggle } = useOpen()
@@ -129,10 +121,6 @@ export function Select({
           isSearchable={isSearchable}
           searchLabel={searchLabel}
           onClose={handleClose}
-          infiniteScroll={infiniteScroll}
-          onLoadMore={onLoadMore}
-          hasMore={hasMore}
-          loading={loading}
         />
       )}
       <HelpText helpText={helpText} errors={errors} />

package/src/atoms/Select/SelectItems.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect } from 'react'
 import { useSearch } from '../../hooks/useSearch'
 import { Input } from '../Input'
 import type { Option } from './Select'
@@ -14,10 +14,6 @@ interface OptionListProps {
   isSearchable: boolean
   searchLabel: string
   onClose: () => void
-  infiniteScroll?: boolean
-  onLoadMore?: () => void
-  hasMore?: boolean
-  loading?: boolean
 }
 
 const ESCAPE_KEY = 'Escape'
@@ -32,41 +28,8 @@ export function SelectItems({
   isSearchable,
   searchLabel,
   onClose,
-  infiniteScroll = false,
-  onLoadMore,
-  hasMore,
-  loading,
 }: OptionListProps) {
-  const scrollRef = React.useRef<HTMLDivElement>(null)
-  const loaderRef = React.useRef<HTMLDivElement>(null)
-  const [items, setItems] = useState<Option[]>(options)
-  const { findItems, search } = useSearch(items, 'label')
-
-  useEffect(() => {
-    if (!infiniteScroll || !hasMore || !loaderRef.current) return
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting && !loading) {
-          onLoadMore?.()
-        }
-      },
-      { root: scrollRef.current, threshold: 0.1 },
-    )
-
-    const current = loaderRef.current
-    observer.observe(current)
-
-    return () => {
-      if (current) observer.unobserve(current)
-    }
-  }, [infiniteScroll, hasMore, loading, onLoadMore])
-
-  useEffect(() => {
-    console.log('Options updated:', options)
-    setItems(options)
-  }, [options])
-
+  const { findItems, search } = useSearch(options, 'label')
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === ESCAPE_KEY) {
@@ -81,7 +44,7 @@ export function SelectItems({
 
   return (
     <div className="select-options-container">
-      <div className="select-options" id={id} ref={scrollRef}>
+      <div className="select-options" id={id}>
         {isSearchable && (
           <Input
             autoFocus
@@ -105,19 +68,7 @@ export function SelectItems({
             />
           ))}
         </ul>
-        <LoaderSentinel loaderRef={loaderRef} />
       </div>
     </div>
   )
 }
-
-function LoaderSentinel({
-  loaderRef,
-}: {
-  loaderRef?: React.RefObject<HTMLDivElement | null>
-}) {
-  if (!loaderRef) {
-    return null
-  }
-  return <div ref={loaderRef} className="loader" />
-}

package/src/icons/index.tsx

@@ -38,9 +38,11 @@ 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'
+import Picture from './picture.svg'
 import Product from './product.svg'
 import Reason from './reason.svg'
 import Reports from './reports.svg'
@@ -97,9 +99,11 @@ export {
   Loading,
   Logout,
   Minus,
+  More,
   NewView,
   Orders,
   PDF,
+  Picture,
   Product,
   Reason,
   Reports,

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/icons/picture.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#picture__a)"><path d="M2.222 20a2.14 2.14 0 0 1-1.57-.653A2.14 2.14 0 0 1 0 17.777V2.223c0-.61.218-1.134.653-1.57A2.14 2.14 0 0 1 2.223 0h15.555a2.14 2.14 0 0 1 1.57.653c.434.435.652.958.652 1.57v15.555a2.14 2.14 0 0 1-.653 1.57 2.14 2.14 0 0 1-1.57.652H2.223Zm0-2.222h15.556V2.222H2.222v15.556Zm1.111-2.222h13.334L12.5 10l-3.333 4.444-2.5-3.333-3.334 4.445Z"/></g><defs><clipPath id="picture__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/src/stories/Button.stories.ts

@@ -49,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',

package/src/stories/ButtonGroup.stories.tsx

@@ -0,0 +1,115 @@
+import type { StoryObj } from '@storybook/react'
+import { Button } from '../atoms/Button'
+import { ButtonGroup } from '../atoms/ButtonGroup'
+import { Popover, PopoverMenu, PopoverMenuOption } from '../atoms/Popover'
+
+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"
+        />
+      </>
+    ),
+  },
+}
+
+export const withPopover: Story = {
+  args: {
+    children: (
+      <>
+        <Button type="button" label="Button" className="button" />
+        <Popover
+          renderButton={({ toggle }) => (
+            <Button label="More options" icon="More" onClick={toggle} />
+          )}
+        >
+          <PopoverMenu>
+            <PopoverMenuOption
+              active
+              href="#"
+              title="Profile"
+              variant="primary"
+            />
+            <PopoverMenuOption
+              href="#"
+              title="Change password"
+              variant="primary"
+            />
+            <PopoverMenuOption
+              disabled
+              href="#"
+              title="Logout"
+              variant="primary"
+            />
+          </PopoverMenu>
+        </Popover>
+      </>
+    ),
+  },
+}

package/src/stories/Changelog.mdx

@@ -4,9 +4,25 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
-## 0.37.1
+## 0.37.3
 
-* Add inifinite scroll options to Select component
+* Fix Checkbox accessibilityLabel wrong use
+
+## 0.37.2
+
+* Add Divider version without title
+
+## 0.37.0
+
+* Add ButtonGroup component
+* Add `icon` property to Button component
+* Add More icon
+* Add Button to PopoverMenuOption component
+* Add `top` position to Popover component
+
+## 0.36.3
+
+* Add Picture icon
 
 ## 0.36.2
 

package/src/stories/Divider.stories.tsx

@@ -89,3 +89,7 @@ export const NoIcon: Story = {
   },
   parameters: figmaPrimaryDesign,
 }
+
+export const NoTitle: Story = {
+  parameters: figmaPrimaryDesign,
+}

package/src/stories/Popover.stories.tsx

@@ -2,6 +2,7 @@ import type { StoryObj } from '@storybook/react'
 import React from 'react'
 import { Button } from '../atoms/Button'
 import { Popover, PopoverMenu, PopoverMenuOption } from '../atoms/Popover'
+import type { PopoverProps } from '../atoms/Popover/Popover'
 
 const figmaPrimaryDesign = {
   design: {
@@ -20,9 +21,12 @@ const meta = {
     },
     position: {
       description: 'Position of the popover',
-      options: ['right', 'left', 'center'],
       control: { type: 'select' },
     },
+    top: {
+      description: 'Show menu on top of the popover',
+      control: { type: 'boolean' },
+    },
   },
   parameters: {
     docs: {
@@ -42,15 +46,11 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-interface Position {
-  position?: 'left' | 'right' | 'center'
-}
-
 export const Menu: Story = {
-  render: ({ position }: Position) => (
+  render: (props: PopoverProps) => (
     <div style={{ display: 'flex', justifyContent: 'center' }}>
       <Popover
-        position={position}
+        {...props}
         renderButton={({ toggle }) => (
           <Button
             variant="primary-outlined"
@@ -82,3 +82,36 @@ export const Menu: Story = {
     </div>
   ),
 } as unknown as Story
+
+export const MenuWithButtons: Story = {
+  args: {
+    renderButton: ({ toggle }) => (
+      <Button
+        variant="primary-outlined"
+        label="Open popover"
+        onClick={toggle}
+      />
+    ),
+    children: (
+      <PopoverMenu>
+        <PopoverMenuOption
+          active
+          onClick={() => alert('Profile')}
+          variant="primary"
+          title="Profile"
+        />
+        <PopoverMenuOption
+          onClick={() => alert('Change password')}
+          variant="primary"
+          title="Change password"
+        />
+        <PopoverMenuOption
+          disabled
+          onClick={() => alert('Logout')}
+          variant="primary"
+          title="Logout"
+        />
+      </PopoverMenu>
+    ),
+  },
+}

package/tests/Divider.spec.tsx

@@ -4,7 +4,7 @@ import { IconButton } from '../src/atoms/Button'
 import { Divider } from '../src/atoms/Divider'
 
 describe('Divider', () => {
-  it('renders', () => {
+  it('renders with title', () => {
     const { getByRole, getByText, container } = render(
       <Divider title="A title divider" icon="Line" />,
     )
@@ -44,4 +44,10 @@ describe('Divider', () => {
     expect(getByText('A title divider with button')).toBeInTheDocument()
     expect(handleClick).toHaveBeenCalledTimes(1)
   })
+
+  it('renders without title nor icon', () => {
+    const { getByRole, container } = render(<Divider />)
+    expect(getByRole('separator')).toHaveClass('divider primary')
+    expect(container.querySelector('.long.line')).toBeInTheDocument()
+  })
 })

package/tests/Popover.spec.tsx

@@ -52,6 +52,10 @@ describe('PopoverMenu', () => {
   })
 
   it('hides when click outside of the menu', async () => {
+    document.head.insertAdjacentHTML(
+      'beforeend',
+      `<style>.hidden { display: none !important; }</style>`,
+    )
     const user = userEvent.setup()
     const { getByText, queryByText } = render(
       <>
@@ -77,6 +81,6 @@ describe('PopoverMenu', () => {
     expect(getByText(/Profile/i)).toBeInTheDocument()
     await user.click(getByText(/Outside/i))
 
-    expect(queryByText(/Profile/i)).not.toBeInTheDocument()
+    expect(queryByText(/Profile/i)).not.toBeVisible()
   })
 })