@loja-integrada/admin-components 0.18.0 → 0.18.2

package/package.json

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

package/src/Components/TableList/TableList.stories.tsx

@@ -13,7 +13,7 @@ const exampleItems = [
     timestampTime: '11:18',
     timestampDate: '11 de abril',
     itemWrapperProps: { href: '#link' },
-    withIcon: { class: 'bg-danger-light text-danger-dark', icon: 'close' }
+    withIcon: { class: 'bg-danger-light text-danger-dark', icon: 'close', tooltip: {placement: 'right', message: 'I am a tooltip!'} }
   },
   {
     title: 'R$ 3.599,99 cancelada',

package/src/Components/TableList/TableListItem.interface.ts

@@ -1,3 +1,4 @@
+import { TippyProps } from '@tippyjs/react'
 import { IconProps } from '../../Icons'
 
 export type TableListItemWrapperProp =
@@ -37,6 +38,13 @@ export interface TableListItemProps {
      * Icon to use
      */
     icon?: IconProps['icon']
+    /**
+     * Tooltip to use
+     */
+    tooltip?: {
+      message: string
+      placement?: TippyProps['placement']
+    }
   }
   /** Force border top at desktop even if is first item
    * @default false

package/src/Components/TableList/TableListItem.spec.tsx

@@ -71,5 +71,4 @@ describe('TableListItem tests', () => {
     cy.get('.table-item .table-item-append')
       .should('not.exist')
   })
-
 })

package/src/Components/TableList/TableListItem.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { Icon } from '../../Icons'
+import { Tooltip } from '../../Indicators'
 import { TableListItemProps } from './TableListItem.interface'
 import { TableListItemWrapper } from './TableListItemWrapper'
 
@@ -36,7 +37,18 @@ export const TableListItem: React.FunctionComponent<TableListItemProps> = ({
                 withIcon.class || ''
               }`}
             >
-              <Icon icon={withIcon.icon || 'minus'} block size={5} />
+              {withIcon.tooltip ? (
+                <Tooltip
+                  content={withIcon.tooltip.message}
+                  placement={withIcon.tooltip.placement}
+                >
+                  <span>
+                    <Icon icon={withIcon.icon || 'minus'} block size={5} />
+                  </span>
+                </Tooltip>
+              ) : (
+                <Icon icon={withIcon.icon || 'minus'} block size={5} />
+              )}
             </div>
           </div>
         )}

package/src/Components/Timeline/Timeline.spec.tsx

@@ -48,4 +48,18 @@ describe('Timeline tests', () => {
     cy.get('.timeline .timeline-item .timeline-badge svg').should('have.class', 'icon-ban')
   })
 
+  it('With colors properties on icons', () => {
+    mount(<Default/>)
+    cy.get('.timeline .timeline-item')
+      .should('have.length', 4)
+    cy.get('.timeline .timeline-item')
+      .last()
+      .find('.timeline-badge')
+      .should('have.class', 'bg-danger-light')
+    cy.get('.timeline .timeline-item')
+      .last()
+      .find('.timeline-badge svg')
+      .should('have.class', 'text-danger')
+  })
+
 })

package/src/Components/Timeline/Timeline.stories.tsx

@@ -16,7 +16,7 @@ export default {
         timestamp: '11/11/2011 às 10:10:10',
         icon: 'eye',
         iconBackgroundColor: 'bg-primary',
-        description: 'Status change: from Cancelling to CancelledStatus change: from Cancelling to CancelledStatus change: from Cancelling to Cancelled',
+        description: 'Status change: from Cancelling to CancelledStatus change: from Cancelling to CancelledStatus change: from Cancelling to Cancelled',        
       },
       {
         title: 'Venda criada',
@@ -31,6 +31,8 @@ export default {
         title: 'Venda criada',
         timestamp: '11/11/2011 às 10:10:10',
         icon: 'cog',
+        iconColor: 'text-danger',
+        iconBackgroundColor: 'bg-danger-light',
       },
     ]
   },
@@ -53,4 +55,4 @@ Loading.args = {
 export const Empty = Template.bind({})
 Empty.args = {
   items: [],
-}
+}

package/src/Components/Timeline/TimelineItem.interface.ts

@@ -21,6 +21,10 @@ export interface TimelineItemInterface {
    * Background of the current icon (className)
    */
   iconBackgroundColor?: string
+  /**
+   * Color of the current icon (className)
+   */
+  iconColor?: string
   /**
    * Toggle item description
    */

package/src/Components/Timeline/TimelineItem.tsx

@@ -6,15 +6,16 @@ import { TimelineItemInterface } from './TimelineItem.interface'
 export const TimelineItem = ({ item }: TimelineItemProps) => {
   const [isOpen, setIsOpen] = useState(!item.toggle)
   const iconBackgroundColor = item.iconBackgroundColor || `bg-inverted-2`
+  const iconColor = item.iconColor || `text-base-1`
   const icon = item.icon || 'minus'
   const showToggle = item.toggle && item.description
 
   return (
     <li className={`timeline-item relative mb-10 last:mb-0`}>
       <div
-        className={`timeline-badge absolute top-0 left-0 flex items-center justify-center text-base-1 w-8 h-8 -ml-3 rounded-full ${iconBackgroundColor}`}
+        className={`timeline-badge absolute top-0 left-0 flex items-center justify-center w-8 h-8 -ml-3 rounded-full ${iconBackgroundColor}`}
       >
-        <Icon icon={icon} size={4} />
+        <Icon icon={icon} size={4} className={iconColor} />
       </div>
       <div className="ml-7 pt-px">
         <div

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

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export const Arrow = () => (
+  <>
+    <path
+      fillRule="evenodd"
+      d="m17.808 8.498-2.25-2.5a.75.75 0 1 0-1.115 1.004L15.61 8.3H9.7V2.389l1.296 1.169a.756.756 0 0 0 1.06-.056.752.752 0 0 0-.056-1.06l-2.5-2.25a.75.75 0 0 0-1.003 0l-2.5 2.25a.752.752 0 0 0-.055 1.06.749.749 0 0 0 1.059.056L8.3 2.389V8.3H2.39l1.168-1.298a.751.751 0 0 0-1.115-1.004l-2.25 2.5a.75.75 0 0 0 0 1.004l2.25 2.5a.748.748 0 0 0 1.059.056.751.751 0 0 0 .056-1.06L2.39 9.7H8.3v5.911l-1.298-1.169a.75.75 0 0 0-1.004 1.116l2.5 2.25a.752.752 0 0 0 1.004 0l2.5-2.25a.752.752 0 0 0-1.004-1.116L9.7 15.611V9.7h5.91l-1.168 1.298a.752.752 0 0 0 .556 1.252.75.75 0 0 0 .558-.248l2.25-2.5a.75.75 0 0 0 0-1.004Z"
+      clipRule="evenodd"
+    />
+  </>
+)

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

@@ -3,6 +3,7 @@ import { AngleLeft } from './AngleLeft'
 import { AngleRight } from './AngleRight'
 import { AngleDown } from './AngleDown'
 import { App } from './App'
+import { Arrow } from './Arrow'
 import { ArrowLeft } from './ArrowLeft'
 import { SortDown } from './SortDown'
 import { ArrowRight } from './ArrowRight'
@@ -74,6 +75,7 @@ export const icons = {
   angleHeight: AngleHeight,
   angleWidth: AngleWidth,
   app: App,
+  arrow: Arrow,
   arrowLeft: ArrowLeft,
   arrowRight: ArrowRight,
   sortDown: SortDown,