agroptima-design-system 0.27.13 → 0.27.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.27.13",
+  "version": "0.27.14",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Badge.tsx

@@ -39,9 +39,10 @@ export function Badge({
       className={cssClasses}
       role="status"
       aria-label={accessibilityLabel}
+      title={icon && accessibilityLabel}
       {...props}
     >
-      {text || (icon && <Icon name={icon} />)}
+      {text || (icon && <Icon name={icon} title={accessibilityLabel} />)}
     </span>
   )
 }

package/src/stories/Changelog.mdx

@@ -4,165 +4,166 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
-# 0.27.13
+## 0.27.14
 
-* Add Electronic Invoice icon
+* Add `title` to icon on Badge component.
 
+## 0.27.13
 
-# 0.27.11
+* Add Electronic Invoice icon.
+
+## 0.27.11
 
 * Fix Badge with icon position on CardsTable component.
 
-# 0.27.10
+## 0.27.10
 
-* Add Popover component to show and hide PopoverMenu component
-* Add size prop to Icon and IconButton component
+* Add Popover component to show and hide PopoverMenu component.
+* Add `size` prop to Icon and IconButton component.
 
-# 0.27.9
+## 0.27.9
 
 * Add `icon` property and neutral, neutral-outlined variants to Badge component.
-* Replace DeliveryNote icon
-* Add ReturnDeliveryNote icon
+* Replace DeliveryNote icon.
+* Add ReturnDeliveryNote icon.
 
-# 0.27.8
+## 0.27.8
 
-* Add indeterminate property and related styles to Checkbox component
+* Add `indeterminate` property and related styles to Checkbox component.
 
-# 0.27.6
+## 0.27.6
 
-* Add AlertContainer component
-* Add fadeOut prop to Alert component
+* Add AlertContainer component.
+* Add `fadeOut` prop to Alert component.
 
-# 0.27.5
+## 0.27.5
 
-* Add required hint to Select component
+* Add required hint to Select component.
 
-# 0.27.3
+## 0.27.3
 
-* Update dependencies
-* Add SubmitButton component
+* Update dependencies.
+* Add SubmitButton component.
 
-# 0.27.2
+## 0.27.2
 
-* Add * to required input in Quantity component
+* Add * to required input on Quantity component.
 
-# 0.27.1
+## 0.27.1
 
-* Update Card with href prop
+* Update Card with `href` prop.
 
-# 0.27.0
+## 0.27.0
 
 * Add RadioButton component.
 * Add `vertically` prop to CardsTable component in order to display the data vertically both on desktop and mobile.
 * Add `singleLine` prop to DetailItem component in order to display the data on a single line.
 
-# 0.26.10
+## 0.26.10
 
-* Add required property for input
+* Add `required` property for input.
 
-# 0.26.9
+## 0.26.9
 
-* Update Checkbox component to use input and not span
+* Update Checkbox component to use input instead of span.
 
 BREAKING CHANGES
 
-* Checkbox component make label mandatory and accessibilityLabel optional
+* `label` changed to required and `accessibilityLabel` to optional on Checkbox component.
 
-# 0.26.8
+## 0.26.8
 
-* Set check value in CheckableTag
+* Set `checked` value on CheckableTag component.
 
-# 0.26.7
+## 0.26.7
 
-* Fix Collapsible header padding-bottom.
+* Fix `padding-bottom` on Collapsible header component.
 
-# 0.26.6
+## 0.26.6
 
 * Add property `form` to Collapsible component.
 
-# 0.26.5
+## 0.26.5
 
-* New Delivery icon
+* Add Delivery icon.
 
-# 0.26.4
+## 0.26.4
 
-* Make title optional in DetailItem component.
-* Use title as a label in Collapsible component.
+* `title` property changed to optional on DetailItem component.
+* Use title as a label on Collapsible component.
 
-# 0.26.3
+## 0.26.3
 
 * Specify "Show/Hide password" button type on Input component.
 
-# 0.26.2
+## 0.26.2
 
-* Fix import scss button
+* Fix import scss button.
 
-# 0.26.1
+## 0.26.1
 
-* Fix Mixed Declarations in scss files
+* Fix Mixed Declarations in scss files.
 
-# 0.26.0
+## 0.26.0
 
 * Add CheckableTag & CheckableTagGroup components.
 * Add Filter icon.
 * Add Dot option to Badge component.
 * Add Drawer component.
 
-# 0.25.8
-
-* Remove focus style for file Input component
-* Download and Upload icons
-* Add visible prop to buttons
+## 0.25.8
 
-# 0.25.7
+* Remove focus style from file Input component.
+* Add Download and Upload icons.
+* Add `visible` prop to Button components.
 
-* Add styles for file Input component
+## 0.25.7
 
-# 0.25.6
+* Add styles for file Input component.
 
-* Align Form Action buttons horizontally
+## 0.25.6
 
-# 0.25.5
+* Align Form Action buttons horizontally.
 
-* Call onChange after clearing Select and Multiselect components
+## 0.25.5
 
+* Call onChange after clearing Select and Multiselect components.
 
-# 0.25.3
+## 0.25.3
 
-* Add clear button to Select commponent
-* Add clear button to Multiselect component
+* Add clear button to Select commponent.
+* Add clear button to Multiselect component.
 
-# 0.25.2
+## 0.25.2
 
-* Add onChange prop to Multiselect component
-* Add max height to Multiselect component
+* Add `onChange` prop to Multiselect component.
+* Add max height to Multiselect component.
 
-# 0.25.1
+## 0.25.1
 
-* Replace selected prop by defaultValue in Multiselect component
-* No wrap input suffix in Input component
+* Replace `selected` prop by `defaultValue` on Multiselect component.
+* No wrap input suffix on Input component.
 
-# 0.25.0
+## 0.25.0
 
 * Add PopoverMenu and PopoverMenuOption components.
 * Add UserMenu icon.
 
-# 0.24.5
+## 0.24.5
 
 * Add tests to all components.
 
-# 0.24.4
+## 0.24.4
 
 * Remove margin from Alert component.
 
-# 0.24.4
+## 0.24.4
 
 * Details Modal component height has been changed to 100%.
 * Details Modal component footer has been changed to fixed.
 * Collapsible component accepts a new property `noHorizontalPadding`.
 
-
-# 0.24.2
+## 0.24.2
 
 * Fix margin in Alert component.
 * Ensure 100% width on Modal content.
@@ -173,183 +174,184 @@ BREAKING CHANGES
 * Modal maximum width & mobile version properties have been updated.
 * IconButton has updated title value with `accessibilityLabel`.
 
-# 0.24.1
+## 0.24.1
 
-* PDF icon
+* Add PDF icon.
 
-# 0.24.0
+## 0.24.0
 
 * Add Form and Actions components.
 
-# 0.23.0
+## 0.23.0
 
 * Add Details variant to Modal component.
 * Add DetailItem component.
 * On CardsTable component, align Badge correctly on mobile and fix Actions misalignment.
 * On Alert component, add margin.
 
-# 0.22.6
+## 0.22.6
 
-* Add property to IconButton component for set the visibility.
-* Fix table actions alignment in CardTable component.
+* Add property to IconButton component for setting the visibility.
+* Fix table actions alignment on CardTable component.
 
-# 0.22.5
+## 0.22.5
 
 * Add more actions to CardTable component.
-* Fix badge alignment in CardTable component.
+* Fix badge alignment on CardTable component.
 
-# 0.22.4
+## 0.22.4
 
 BREAKING CHANGES
 
 * EmptyState text and button props have been removed and children elements can be passed to the component.
 
-# 0.22.3
+## 0.22.3
 
-* Add Delivery Note icon
+* Add Delivery Note icon.
 
-# 0.22.2
+## 0.22.2
 
-* Add IconButton secondary variant
+* Add IconButton secondary variant.
 
 ## 0.22.1
 
 * Add suffix to Input component
-* Update styles for Input, TextArea and QuantitySelector components
-* Update styles for action button in Alert components
+* Update styles for Input, TextArea and QuantitySelector components.
+* Update styles for action button on Alert components.
 
 ## 0.22.0
 
-* Add a max height to Select component
-* Center on top icon in Modal and Alert componets
+* Add max height to Select component.
+* Center on top icon on Modal and Alert components.
 
 BREAKING CHANGES
 
-* Replace selected prop by defaultValue in Select component
-* Change the way to put the classname in Input component
+* Replace `selected` prop by `defaultValue` on Select component.
+* Change the way to put the classname on Input component.
 
 ## 0.21.5
-* Update open state in Collapsible component
+* Update open state in Collapsible component.
 
 ## 0.21.5
-* Update the way in which we import the source
-* Alignment correction in Cards and CardsTable components
-* Add css class helpers and common styles
+* Update the way in which we import the source.
+* Alignment correction in Cards and CardsTable components.
+* Add css class helpers and common styles.
 
 ## 0.21.4
 
-* Add border top to CardMenuOption component for first element
-* Add margin top to second element row in CardsTable component
-* CardsTable needs to specify a withTitle property to add title to first column
+* Add border top to CardMenuOption component for first element.
+* Add margin top to second element row on CardsTable component
+* CardsTable needs to specify a `withTitle` property to add a title to the first column.
 
 ## 0.21.3
 
-* Add display flex to IconButton component for centering the icon
-* Remove border bottom from CardMenuOption component when the next is active
-* Remove default MenuOption apparence in Safari
-* Add more space between modal content and actions
+* Add display flex to IconButton component for centering the icon.
+* Remove border bottom from CardMenuOption component when the next element is active.
+* Remove default MenuOption styles on Safari.
+* Add more space between modal content and actions.
 
 ## 0.21.2
 
-* Update Card with error state
-* Update styles for component CardMenuOption
-* Add width 100% for input date component in safari mobile
+* Update Card with error state.
+* Update styles for CardMenuOption component.
+* Add input date component 100% width on Safari Mobile.
 
 ## 0.21.1
 
-* Create Typography examples page
+* Create Typography examples page.
 
 ## 0.21.0
 
-* Update typography styles
+* Update typography styles.
 
 ## 0.20.0
 
-* Update colors
-* Update Colors documentation with the final colors
-* Update Button Ghost & Outlined transparent background to white. On disabled case, background has been changed to neutral-color-50
+* Update colors.
+* Update Colors documentation with the final colors.
+* Update Button Ghost & Outlined transparent background to white. On disabled case, background has been changed to neutral-color-50.
 
 ## 0.19.0
 
-* Add Pagination, Ellipsis, PaginationArrow and PaginationNumber components
-* Add explicit margin-bottom to Empty State button component
+* Add Pagination, Ellipsis, PaginationArrow and PaginationNumber components.
+* Add explicit margin-bottom to Empty State button component.
 
 ## 0.18.4 / 0.18.5
 
-* Add series icon
+* Add series icon.
 
 ## 0.18.3
-* Update docs
+
+* Update docs.
 
 ## 0.18.2
 
-* Add link to CardMenuOption component
-* Add active and error state to CardMenuOption component
-* Add active state to Card component
-* Update QuantitySelector component props
-* Add active and action state to CardsTableRow component
+* Add link to CardMenuOption component.
+* Add active and error state to CardMenuOption component.
+* Add active state to Card component.
+* Update QuantitySelector component props.
+* Add active and action state to CardsTableRow component.
 
 ## 0.18.0
 
-* Added Collapsible component to Storybook
+* Add Collapsible component to Storybook.
 
 ## 0.17.0
 
-* Added QuantitySelector component to Storybook
+* Add QuantitySelector component to Storybook.
 
 ## 0.16.2
 
-* Fixed some icons missing ViewBox
+* Fix some icons missing ViewBox.
 
 ## 0.16.1
 
-* Updated Oultined Button background color
-* Added new icons
-* Added fix to Alert component button
-* Fixed responsive glitch bug on CardsTable components
+* Update Oultined Button background color.
+* Add new icons.
+* Add fix to Alert component button.
+* Fix responsive glitch bug on CardsTable components.
 
 ## 0.16.0
 
-* Added new shape for FloatingButton component
+* Add new shape for FloatingButton component.
 
 ## 0.15.0
 
-* Added FloatingButton component to Storybook
+* Add FloatingButton component to Storybook.
 
 BREAKING CHANGES
 
-* All button components have been moved to a common folder
+* All button components have been moved to a common folder.
 
 ## 0.14.1
 
-* Added MenuLink and MenuDropdown components to Storybook and remove MenuOption component.
+* Add MenuLink and MenuDropdown components to Storybook and remove MenuOption component.
 
 ## 0.14.0
 
-* Added Menu component to Storybook.
+* Add Menu component to Storybook.
 
 ## 0.13.0
 
-* Added CardMenuOption component to Storybook.
+* Add CardMenuOption component to Storybook.
 
 ## 0.12.0
 
-* Card component is added to Storybook.
+* Add Card component to Storybook.
 
 ## 0.11.1
 
 * Input and Checkbox components `id` prop now it's optional.
-* Fixed TextArea export component.
+* Fix TextArea export component.
 
 ## 0.11.0
 
-* Added TextArea component to Storybook.
+* Add TextArea component to Storybook.
 * Input, Checkbox and TextArea components `id` prop now is obtained from `id` or `name`.
 
 ## 0.10.0
 
 * Cards Table components now are responsive.
-* Added Link style to Typography.
+* Add Link style to Typography.
 
 ## 0.9.3
 
@@ -366,31 +368,31 @@ BREAKING CHANGES
 
 ## 0.9.0
 
-* Alert component is added to Storybook.
+* Add Alert component to Storybook.
 
 ## 0.8.0
 
-* Badge component is added to Storybook.
+* Add Badge component to Storybook.
 * IconButton and Button have the default cursor on both link and button versions.
 
 ## 0.7.0
 
-* Modal component is added to Storybook.
-* Typography styles are added to Storybook.
+* Add Modal component to Storybook.
+* Add Typography styles to Storybook.
 
 ## 0.6.1
 
-* Fixed error type in onChange select props.
-* Added check types to CI.
+* Fix error type on onChange select props.
+* Add check types to CI.
 
 ## 0.6.0
 
-Checkbox component is added to Storybook.
+* Add Checkbox component to Storybook.
 
 ## 0.5.0
 
-* IconButton component is added to Storybook.
-* Edit and Delete icons have been added.
+* Add IconButton component to Storybook.
+* Add Edit and Delete icons.
 * Button outlined disabled styles have been changed to make them look the same as the filled disabled styles.
 * `accessibilityLabel` specific prop has been added as optional to Button, Input, Select and Multiselect components.
 * Select and Multiselect can be closed too when losing focus.
@@ -403,7 +405,7 @@ BREAKING CHANGES
 
 ## 0.4.0
 
-* CardsTable component suitable to create custom tables is added to Storybook.
+* Add CardsTable component to Storybook, suitable to create custom tables.
 * Cell `align` property has been added to CardsTableCell component.
 * Cell `noWrap` property has been added to CardsTableCell component.
 * Button component can be rendered as NextLink if the `href` prop is provided.
@@ -411,13 +413,13 @@ BREAKING CHANGES
 
 ## 0.3.2
 
-* Updated show and show-off icons.
+* Update show and show-off icons.
 
 ## 0.3.1
 
-* Fixed input height not matching other components'.
-* Updated input's icons positions due to the input height change.
-* Fixed button height to not fill the whole available space.
+* Fix input height not matching other components.
+* Update input's icons positions due to the input height change.
+* Fix button height to not fill the whole available space.
 
 ## 0.3.0
 
@@ -440,11 +442,11 @@ BREAKING CHANGES
 BREAKING CHANGES
 
 * `columnId` prop is required from this version.
-* rows `data` prop has been renamed to `columns`.
+* Rows `data` prop has been renamed to `columns`.
 
 ## 0.1.3
 
-Update left padding on the cells from CardsTableList component
+* Update left padding on the cells from CardsTableList component
 
 ## 0.1.2
 

package/tests/Badge.spec.tsx

@@ -1,6 +1,6 @@
 import type { Variant } from '../src/atoms/Badge'
 import React from 'react'
-import { getByTitle, render, screen } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { Badge } from '../src/atoms/Badge'
 
 describe('Badge', () => {
@@ -36,7 +36,7 @@ describe('Badge', () => {
     const icon = 'PDF'
     const accessibilityLabel = `${variant} badge label`
 
-    const { getByRole, getByText } = render(
+    const { getByRole } = render(
       <Badge
         id={`${variant}-badge`}
         accessibilityLabel={accessibilityLabel}
@@ -44,7 +44,7 @@ describe('Badge', () => {
         variant={variant as Variant}
       />,
     )
-    expect(screen.getByTitle(icon)).toBeInTheDocument()
+    expect(screen.getAllByTitle(accessibilityLabel)[1]).toBeInTheDocument()
     expect(getByRole('status')).toHaveClass(`badge ${variant}`)
   })
 })