@loja-integrada/admin-components 0.8.9 → 0.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loja-integrada/admin-components",
-  "version": "0.8.9",
+  "version": "0.9.3",
   "author": "Loja Integrada Front-End Team",
   "license": "MIT",
   "main": "dist/index.js",

package/src/Components/Modal/Modal.tsx

@@ -4,7 +4,7 @@ import ReactModal from 'react-modal'
 import { Icon } from '../../Icons'
 
 const sizeClasses = {
-  small: 'sm:max-w-xl',
+  small: 'sm:max-w-[600px]',
   default: 'sm:max-w-4xl',
   large: 'sm:max-w-6xl',
 }

package/src/Icons/icons-path/Image.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const Image = () => (
+  <path
+    fillRule="evenodd"
+    d="M10.5 5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm5.5 7.5H2a.5.5 0 0 1-.5-.5v-.937L5.176 8.39a2.247 2.247 0 0 1 2.647 0l2.188 1.59a3.759 3.759 0 0 0 4.027.246L16.5 8.857V12a.5.5 0 0 1-.5.5ZM2 1.5h14a.5.5 0 0 1 .5.5v5.261a.704.704 0 0 0-.364.084l-2.827 1.57a2.258 2.258 0 0 1-2.416-.147L8.706 7.177a3.743 3.743 0 0 0-4.412 0L1.5 9.209V2a.5.5 0 0 1 .5-.5ZM16 0H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Z"
+    clipRule="evenodd"
+  />
+)

package/src/Icons/icons-path/Move.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const Move = () => (
+  <path
+    fillRule="evenodd"
+    d="M9.5 14c0-.828-.672-1.5-1.5-1.5s-1.5.672-1.5 1.5.672 1.5 1.5 1.5 1.5-.672 1.5-1.5zm-6 0c0-.828-.671-1.5-1.5-1.5S.5 13.172.5 14s.671 1.5 1.5 1.5 1.5-.672 1.5-1.5zm6-12C9.5 1.172 8.828.5 8 .5S6.5 1.172 6.5 2 7.172 3.5 8 3.5 9.5 2.828 9.5 2zm-6 0C3.5 1.172 2.829.5 2 .5S.5 1.172.5 2 1.171 3.5 2 3.5 3.5 2.828 3.5 2zm6 6c0-.828-.672-1.5-1.5-1.5S6.5 7.172 6.5 8 7.172 9.5 8 9.5 9.5 8.828 9.5 8zM2 9.5C1.171 9.5.5 8.828.5 8S1.171 6.5 2 6.5s1.5.672 1.5 1.5S2.829 9.5 2 9.5z"
+    clipRule="evenodd"
+  />
+)

package/src/Icons/icons-path/Sync.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const Sync = () => (
+  <path
+    fillRule="evenodd"
+    d="M15.228 1.731 14.12 2.938C12.175.9 10.174 0 7.64 0 3.935 0 0 2.667 0 7.556h1.347c0-4 3.165-6.173 6.292-6.173 2.182 0 3.86.762 5.56 2.561l-1.405 1.534a.444.444 0 0 0 .327.745h3.435c.245 0 .444-.2.444-.445V2.031a.444.444 0 0 0-.772-.3Zm-.574 6.714H16C16 13.334 12.064 16 8.36 16c-2.534 0-4.535-.9-6.482-2.938L.772 14.268a.444.444 0 0 1-.772-.3v-3.745c0-.247.199-.445.445-.445h3.432c.386 0 .588.46.328.745L2.8 12.055c1.702 1.8 3.379 2.562 5.56 2.562 3.127 0 6.294-2.172 6.294-6.172Z"
+    clipRule="evenodd"
+  />
+)

package/src/Icons/icons-path/index.ts

@@ -23,6 +23,8 @@ import { Eye } from './Eye'
 import { ExclamationTriangle } from './ExclamationTriangle'
 import { ExternalLink } from './ExternalLink'
 import { Home } from './Home'
+import { Image } from './Image'
+import { Move } from './Move'
 import { Order } from './Order'
 import { Pagali } from './Pagali'
 import { PaperList } from './PaperList'
@@ -40,6 +42,7 @@ import { Truck } from './Truck'
 import { UsdCircle } from './UsdCircle'
 import { QuestionCircle } from './QuestionCircle'
 import { Search } from './Search'
+import { Sync } from './Sync'
 import { AngleDiagonal } from './AngleDiagonal'
 import { AngleHeight } from './AngleHeight'
 import { AngleWidth } from './AngleWidth'
@@ -73,6 +76,8 @@ export const icons = {
   exclamationTriangle: ExclamationTriangle,
   externalLink: ExternalLink,
   home: Home,
+  image: Image,
+  move: Move,
   order: Order,
   pagali: Pagali,
   paperList: PaperList,
@@ -91,4 +96,5 @@ export const icons = {
   truck: Truck,
   usdCircle: UsdCircle,
   questionCircle: QuestionCircle,
+  sync: Sync,
 }

package/src/Layout/ActionBar/ActionBar.stories.tsx

@@ -6,10 +6,10 @@ import { Button } from '../../Components/Button'
 
 export default {
   component: ActionBar,
-  title: 'Layout/ActionBar'
+  title: 'Layout/ActionBar',
 } as Meta
 
-const Template: Story<ActionBarProps> = args => <ActionBar {...args} />
+const Template: Story<ActionBarProps> = (args) => <ActionBar {...args} />
 
 export const Default = Template.bind({})
 Default.args = {
@@ -20,8 +20,8 @@ Default.args = {
     <Button variant="primary" icon="checkCircle" onClick={() => {}}>
       <span className="hidden lg:block">Criar novo registro</span>
       <span className="block lg:hidden">Criar</span>
-    </Button>
-  ]
+    </Button>,
+  ],
 }
 
 export const OnlyMobile = Template.bind({})
@@ -34,8 +34,9 @@ OnlyMobile.args = {
     <Button icon="checkCircle" onClick={() => {}}>
       Ativar
     </Button>,
+    <></>,
     <Button icon="ban" onClick={() => {}}>
       Inativar
-    </Button>
-  ]
-}
+    </Button>,
+  ],
+}

package/src/Layout/ActionBar/ActionBar.tsx

@@ -50,22 +50,25 @@ const ActionBarComponent = ({ onlyMobile, children }: ActionBarProps) => {
           </div>
         )}
         <div className="lg:hidden">
-          {React.Children.map(children, ({ props }) => (
-            <button
-              className={
-                'px-4 py-1 text-base-1' +
-                (props?.loading ? ' pointer-events-none' : '')
-              }
-              onClick={props?.onClick}
-            >
-              {props?.loading ? (
-                <Icon icon="loading" className="p-px" />
-              ) : (
-                props?.icon && <Icon icon={props?.icon} className="p-px" />
-              )}
-              <span className="block text-f8">{props.children}</span>
-            </button>
-          ))}
+          {React.Children.map(children, ({ props }) => {
+            if (!props.children) return
+            return (
+              <button
+                className={
+                  'px-4 py-1 text-base-1' +
+                  (props?.loading ? ' pointer-events-none' : '')
+                }
+                onClick={props?.onClick}
+              >
+                {props?.loading ? (
+                  <Icon icon="loading" className="p-px" />
+                ) : (
+                  props?.icon && <Icon icon={props?.icon} className="p-px" />
+                )}
+                <span className="block text-f8">{props.children}</span>
+              </button>
+            )
+          })}
         </div>
       </div>
     </div>