agroptima-design-system 0.37.0-beta.8 → 0.37.0

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.0-beta.8",
+  "version": "0.37.0",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Popover/Popover.scss

@@ -3,6 +3,26 @@
 @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;
@@ -18,22 +38,32 @@
     z-index: depth.$z-popover;
 
     &.left {
-      left: 0;
+      @extend %left;
     }
 
     &.right {
-      right: 0;
+      @extend %right;
     }
 
     &.center {
-      left: 50%;
-      transform: translateX(-50%);
+      @extend %center;
     }
 
     &.top {
-      bottom: 42px;
-      margin-top: auto;
-      margin-bottom: config.$space-2x;
+      &-left {
+        @extend %top;
+        @extend %left;
+      }
+
+      &-right {
+        @extend %top;
+        @extend %right;
+      }
+
+      &-center {
+        @extend %top;
+        @extend %center;
+      }
     }
   }
 }

package/src/atoms/Popover/Popover.tsx

@@ -14,7 +14,7 @@ type Actions = {
 
 type Horizontal = 'left' | 'right' | 'center'
 
-type Position = Horizontal | ['top', Horizontal]
+type Position = Horizontal | `top-${Horizontal}`
 
 export interface PopoverProps {
   renderButton: (props: Actions) => React.ReactNode
@@ -42,10 +42,10 @@ function Popover({
       {renderButton({ isOpen, close, open, toggle })}
       <div
         className={classNames('popover-menu-container', position, {
-          top,
           hidden: !isOpen,
         })}
         onClick={close}
+        aria-hidden={!isOpen}
       >
         {children}
       </div>

package/src/icons/index.tsx

@@ -42,6 +42,7 @@ 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'
@@ -102,6 +103,7 @@ export {
   NewView,
   Orders,
   PDF,
+  Picture,
   Product,
   Reason,
   Reports,

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/Changelog.mdx

@@ -12,6 +12,10 @@ import { Meta } from "@storybook/blocks";
 * Add Button to PopoverMenuOption component
 * Add `top` position to Popover component
 
+## 0.36.3
+
+* Add Picture icon
+
 ## 0.36.2
 
 * Add Order icon

package/src/stories/InputWithButton.stories.tsx

@@ -3,13 +3,6 @@ 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,
@@ -30,7 +23,6 @@ const meta = {
           '</ul>',
       },
     },
-    figmaDesign,
   },
   tags: ['autodocs'],
   argTypes: {

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()
   })
 })