@loja-integrada/admin-components 0.15.2 → 0.15.3

package/package.json

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

package/src/Components/TableList/TableList.tsx

@@ -108,6 +108,7 @@ const TableListComponent = ({
                       itemWrapper={itemWrapper}
                       itemWrapperProps={item.itemWrapperProps}
                       withIcon={item.withIcon}
+                      append={item.append}
                       withHover={withHover}
                       isInsideContainer={isInsideContainer}
                     />

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

@@ -21,6 +21,10 @@ export interface TableListItemProps {
    * Timestamp of the item, usually in dd/mm/yyyy
    */
   timestampDate?: string
+  /**
+   * Addittional content at item
+   */
+  append?: string | React.ReactNode
   /**
    * Icon to show at item
    */

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

@@ -29,10 +29,10 @@ describe('TableListItem tests', () => {
       .find('.table-item-description')
         .should('exist')
         .contains('Cartão')
-    cy.get('.table-item .table-item-timestamp .table-item-timestamp-time')
+    cy.get('.table-item .table-item-timestamp-time')
       .should('exist')
       .contains('19:45')
-    cy.get('.table-item .table-item-timestamp .table-item-timestamp-date')
+    cy.get('.table-item .table-item-timestamp-date')
       .should('exist')
       .contains('dezembro')
   })
@@ -43,6 +43,13 @@ describe('TableListItem tests', () => {
       .should('have.class', 'lg:first:border-t')
   })
 
+  it('Append', () => {
+    mount(<Item append={'External'} />)
+    cy.get('.table-item .table-item-append')
+      .should('exist')
+      .contains('External')
+  })
+
   it('Without', () => {
     mount(<Item withIcon={undefined} />)
     cy.get('.table-item .table-item-icon')
@@ -59,6 +66,10 @@ describe('TableListItem tests', () => {
     mount(<Item timestampTime={undefined} />)
     cy.get('.table-item .table-item-timestamp-time')
       .should('not.exist')
+
+    mount(<Item append={undefined} />)
+    cy.get('.table-item .table-item-append')
+      .should('not.exist')
   })
 
 })

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

@@ -24,6 +24,7 @@ export default {
     description: '#29102 - Daniela Cabral via Cartão de crédito',
     timestampTime: '19:45',
     timestampDate: '10 de dezembro',
+    append: <span className="cursor hover:underline text-primary font-semibold">Ver mais</span>,
     itemWrapperProps: {
       href: '#a'
     },

package/src/Components/TableList/TableListItem.tsx

@@ -15,6 +15,7 @@ export const TableListItem: React.FunctionComponent<TableListItemProps> = ({
   withHover = false,
   isInsideContainer = false,
   withIcon,
+  append,
 }) => {
   return (
     <div
@@ -45,16 +46,19 @@ export const TableListItem: React.FunctionComponent<TableListItemProps> = ({
             <div className="table-item-description">{description}</div>
           )}
         </div>
-        {timestampTime && (
-          <div className="table-item-timestamp flex flex-col justify-center items-end shrink-0 gap-1.5 ml-4 min-w-0 max-w-[50%] text-right">
-            <div className="table-item-timestamp-time w-full">
-              {timestampTime}
-            </div>
+        {(timestampTime || timestampDate || append) && (
+          <div className="table-item-timestamp-append flex flex-col justify-center items-end shrink-0 gap-1.5 ml-4 min-w-0 max-w-[50%] text-right">
+            {timestampTime && (
+              <div className="table-item-timestamp-time w-full">
+                {timestampTime}
+              </div>
+            )}
             {timestampDate && (
               <div className="table-item-timestamp-date w-full hidden lg:block">
                 {timestampDate}
               </div>
             )}
+            {append && <div className="table-item-append w-full">{append}</div>}
           </div>
         )}
       </TableListItemWrapper>

package/src/Components/TableList/index.tsx

@@ -1 +1,4 @@
 export * from './TableList'
+export * from './TableListItem'
+export * from './TableListItem.interface'
+export * from './TableListItemLoading'

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const Blog = () => (
+  <path
+    fillRule="evenodd"
+    d="M4 13v1h3.57c-.041-.159-.07-.323-.07-.495V13H4Zm10.5 2c0 .827-.673 1.5-1.5 1.5H3c-.827 0-1.5-.673-1.5-1.5V3c0-.827.673-1.5 1.5-1.5h10c.827 0 1.5.673 1.5 1.5v.872c.387-.238.831-.372 1.296-.372.069 0 .137.008.204.014V3c0-1.657-1.343-3-3-3H3C1.343 0 0 1.343 0 3v12c0 1.657 1.343 3 3 3h10c1.657 0 3-1.343 3-3v-3.265l-1.5 1.5V15Zm-6.416-4.819L8.265 10H4v1h3.599c.094-.305.253-.588.485-.819ZM4 5h8V4H4v1Zm7.265 2H4v1h6.265l1-1Zm6.445.904-5.951 5.95c-.093.094-.219.146-.35.146H9.495C9.222 14 9 13.778 9 13.505v-1.914c0-.131.052-.257.145-.35l5.951-5.951c.193-.193.447-.29.7-.29.254 0 .507.097.701.29l1.213 1.213c.387.387.387 1.015 0 1.401Z"
+    clipRule="evenodd"
+  />
+)

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

@@ -8,6 +8,7 @@ import { Back } from './Back'
 import { Ban } from './Ban'
 import { BarcodeRead } from './BarcodeRead'
 import { Bell } from './Bell'
+import { Blog } from './Blog'
 import { Bullhorn } from './Bullhorn'
 import { CalendarAlt } from './CalendarAlt'
 import { Cog } from './Cog'
@@ -68,6 +69,7 @@ export const icons = {
   ban: Ban,
   barcodeRead: BarcodeRead,
   bell: Bell,
+  blog: Blog,
   bullhorn: Bullhorn,
   calendarAlt: CalendarAlt,
   check: Check,