@loja-integrada/admin-components 0.15.0 → 0.15.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loja-integrada/admin-components",
-  "version": "0.15.0",
+  "version": "0.15.3",
   "author": "Loja Integrada Front-End Team",
   "license": "MIT",
   "main": "dist/index.js",
@@ -65,19 +65,20 @@
   "devDependencies": {
     "@babel/core": "^7.13.10",
     "@babel/preset-typescript": "^7.13.0",
-    "@cypress/react": "^5.9.0",
-    "@cypress/webpack-dev-server": "^1.3.1",
+    "@cypress/react": "^5.12.4",
+    "@cypress/webpack-dev-server": "^1.8.4",
     "@fullhuman/postcss-purgecss": "^4.0.3",
-    "@size-limit/preset-small-lib": "^4.10.1",
-    "@storybook/addon-a11y": "^6.4.19",
-    "@storybook/addon-essentials": "^6.4.19",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.4.19",
+    "@size-limit/preset-small-lib": "^7.0.8",
+    "@storybook/addon-a11y": "^6.4.22",
+    "@storybook/addon-essentials": "^6.4.22",
+    "@storybook/addon-links": "^6.4.22",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addons": "^6.4.19",
-    "@storybook/react": "^6.4.19",
-    "@storybook/storybook-deployer": "^2.8.10",
-    "@storybook/testing-react": "^1.2.3",
+    "@storybook/addons": "^6.4.22",
+    "@storybook/client-api": "^6.4.22",
+    "@storybook/preview-web": "^6.4.22",
+    "@storybook/react": "^6.4.22",
+    "@storybook/storybook-deployer": "^2.8.11",
+    "@storybook/testing-react": "^1.2.4",
     "@testing-library/react": "^11.2.7",
     "@types/node": "^15.12.0",
     "@types/react": "^17.0.3",
@@ -89,23 +90,25 @@
     "autoprefixer": "^10.4.4",
     "babel-loader": "^8.2.2",
     "babel-plugin-module-name-mapper": "^1.2.0",
-    "chromatic": "^5.9.2",
-    "cypress": "^7.4.0",
+    "chromatic": "^6.5.4",
+    "cypress": "^9.6.0",
     "eslint-plugin-prettier": "^3.4.0",
+    "html-webpack-plugin": "^5.5.0",
     "husky": "^5.1.3",
     "identity-obj-proxy": "^3.0.0",
-    "list-selectors": "^2.0.0",
     "postcss": "^8.4.12",
     "postcss-loader": "^4.2.0",
-    "react-is": "^17.0.1",
-    "rollup-plugin-postcss": "^4.0.0",
-    "size-limit": "^4.11.0",
+    "prettier": "^2.6.2",
+    "react-is": "^18.1.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "size-limit": "^7.0.8",
     "storybook-addon-designs": "^6.2.1",
     "tailwindcss": "^3.0.23",
     "tsdx": "^0.14.1",
-    "tslib": "^2.1.0",
-    "typescript": "^4.2.3",
-    "webpack-dev-server": "^3.11.2"
+    "tslib": "^2.4.0",
+    "typescript": "^4.6.4",
+    "webpack": "^5.72.0",
+    "webpack-dev-server": "^4.9.0"
   },
   "peerDependency": {
     "@loja-integrada/tailwindcss-config": ">=1.5.0",

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/Components/Timeline/TimelineItem.tsx

@@ -47,7 +47,7 @@ export const TimelineItem = ({ item }: TimelineItemProps) => {
         )}
         {item.description && (
           <div
-            className={`timeline-description overflow-hidden text-sm tracking-4 text-inverted-1 break-words transition-max-height ${
+            className={`timeline-description mt-1 overflow-hidden text-sm tracking-4 text-inverted-1 break-words transition-max-height ${
               isOpen ? 'max-h-96' : 'max-h-0'
             }`}
           >

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,

package/src/Indicators/Badge/Badge.spec.tsx

@@ -16,7 +16,7 @@ describe('Badge tests', () => {
 
   it('Small', () => {
     mount(<Small />)
-    cy.get(badgeClass).should('have.class', 'px-1')
+    cy.get(badgeClass).should('have.class', 'px-1.5')
   })
 
   it('Expanded', () => {

package/src/Indicators/Badge/Badge.tsx

@@ -9,8 +9,8 @@ const badgeTypes = {
 }
 
 const badgeSizes = {
-  default: 'px-2 py-0.5',
-  small: 'px-1',
+  default: 'px-2 py-0.5 text-xs',
+  small: 'px-1.5 text-[0.70rem]',
 }
 
 const BadgeComponent = ({
@@ -25,9 +25,7 @@ const BadgeComponent = ({
         badgeTypes[type]
       } ${badgeSizes[size]} ${expanded ? 'flex w-full' : 'inline-flex'}`}
     >
-      <span className={`text-xs tracking-4 font-semibold text-base-1`}>
-        {text}
-      </span>
+      <span className={`tracking-4 font-semibold text-base-1`}>{text}</span>
     </div>
   )
 }

package/src/Navigation/Breadcrumb/index.tsx

@@ -62,7 +62,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = React.memo(
           className={`header-navigation-breadcrumb max-w-full truncate w-full`}
         >
           <div className="w-full inline-flex self-center items-center font-semibold tracking-5 text-f5 sm:text-f4 lg:text-f3">
-            {(previousTitle || previousHref) && (
+            {(previousTitle || previousHref || Link) && (
               <span className="header-navigation-previous inline-flex items-center text-on-base-2 text-xl -mr-px truncate">
                 {renderPrevLink()}
                 {previousTitle && (
@@ -131,11 +131,11 @@ export interface BreadcrumbProps {
   /**
    * Current page title
    * */
-  currentTitle: string
+  currentTitle: string | React.ReactNode
   /**
    * Previous page title
    * */
-  previousTitle?: string
+  previousTitle?: string | React.ReactNode
   /**
    * Previous page href
    * */