@loja-integrada/admin-components 0.12.5 → 0.12.8

package/package.json

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

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

@@ -3,7 +3,7 @@ import { composeStories } from "@storybook/testing-react"
 import { mount } from "@cypress/react"
 import * as stories from "./Timeline.stories"
 
-const { Default, Loading, Empty } = composeStories(stories)
+const { Default, WithoutToggle, Loading, Empty } = composeStories(stories)
 
 describe('Timeline tests', () => {
 
@@ -20,6 +20,18 @@ describe('Timeline tests', () => {
       })
   })
 
+  it('Without Toggle', () => {
+    mount(<WithoutToggle />)
+    cy.get('.timeline .timeline-item')
+      .should('have.length', 4)
+      .first().within(() => {
+        cy.get('.timeline-title').contains('Venda criada')
+        cy.get('.timeline-timestamp').contains('11/11/2011')
+        cy.get('.timeline-description').should('be.visible')
+        cy.get('.timeline-title button').should('not.exist')
+      })
+  })
+
   it('Loading', () => {
     mount(<Loading />)
     cy.get('.timeline .timeline-item')

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

@@ -22,9 +22,10 @@ export default {
         title: 'Venda criada',
       },
       {
-        title: 'Vendacriadadacriadadacriadadacriadadacriadadacriadadacriadadacriadadacriadadacriadadacriadadacriada',
+        title: 'Venda criada sem toggle',
         iconBackgroundColor: 'bg-danger',
         description: 'Status change: from Cancelling to Cancelled',
+        toggle: false,
       },
       {
         title: 'Venda criada',
@@ -39,6 +40,11 @@ const Template: Story<TimelineProps> = args => <Timeline {...args} />
 
 export const Default = Template.bind({})
 
+export const WithoutToggle = Template.bind({})
+WithoutToggle.args = {
+  toggleItems: false,
+}
+
 export const Loading = Template.bind({})
 Loading.args = {
   isLoading: true,

package/src/Components/Timeline/Timeline.tsx

@@ -8,6 +8,7 @@ const TimelineComponent = ({
   className = '',
   items,
   isLoading = false,
+  toggleItems = true,
   emptyTitle = 'Nenhum registro encontrado',
 }: TimelineProps) => {
   if (!isLoading && (!items || !Array.isArray(items))) return null
@@ -37,7 +38,10 @@ const TimelineComponent = ({
           />
         ) : (
           items?.map((item, index) => (
-            <TimelineItem key={`timeline-item-${index}`} item={item} />
+            <TimelineItem
+              key={`timeline-item-${index}`}
+              item={{ ...item, toggle: item.toggle ?? toggleItems }}
+            />
           ))
         )}
       </ul>
@@ -64,4 +68,8 @@ export interface TimelineProps {
    * @default 'Nenhum registro encontrado'
    */
   emptyTitle?: string
+  /** Timeline item show toggle
+   * @default true
+   */
+  toggleItems?: boolean
 }

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

@@ -21,4 +21,8 @@ export interface TimelineItemInterface {
    * Background of the current icon (className)
    */
   iconBackgroundColor?: string
+  /**
+   * Toggle item description
+   */
+  toggle?: boolean
 }

package/src/Components/Timeline/TimelineItem.tsx

@@ -4,9 +4,10 @@ import { Icon } from '../../Icons/Icon'
 import { TimelineItemInterface } from './TimelineItem.interface'
 
 export const TimelineItem = ({ item }: TimelineItemProps) => {
-  const [isOpen, setIsOpen] = useState(false)
+  const [isOpen, setIsOpen] = useState(!item.toggle)
   const iconBackgroundColor = item.iconBackgroundColor || `bg-inverted-2`
   const icon = item.icon || 'minus'
+  const showToggle = item.toggle && item.description
 
   return (
     <li className={`timeline-item relative mb-10 last:mb-0`}>
@@ -17,12 +18,12 @@ export const TimelineItem = ({ item }: TimelineItemProps) => {
       </div>
       <div className="ml-7 pt-px">
         <div
-          className={`timeline-title group mb-1 py-1 text-sm text-inverted-1 font-semibold break-words ${
-            item.description ? 'cursor-pointer' : ''
+          className={`timeline-title group py-1 text-f6 leading-6 tracking-4 text-inverted-1 font-semibold break-words ${
+            showToggle ? 'cursor-pointer' : ''
           }`}
-          onClick={() => item.description && setIsOpen((isOpen) => !isOpen)}
+          onClick={() => showToggle && setIsOpen((isOpen) => !isOpen)}
         >
-          {item.description && (
+          {showToggle && (
             <button
               className={`float-right p-1 -mt-px text-inverted-2 group-hover:text-inverted-1 focus:outline-none`}
             >
@@ -39,13 +40,14 @@ export const TimelineItem = ({ item }: TimelineItemProps) => {
           <span className="inline break-words">{item.title}</span>
         </div>
         {item.timestamp && (
-          <div className="timeline-timestamp mb-1 text-xs text-inverted-2 break-words">
+          <div className="timeline-timestamp mb-1 inline-flex items-center text-xs tracking-4 text-inverted-2 break-words">
+            <Icon icon="clock" size={3} className="mr-1" />
             {item.timestamp}
           </div>
         )}
         {item.description && (
           <div
-            className={`timeline-description overflow-hidden text-sm text-inverted-1 break-words transition-max-height ${
+            className={`timeline-description 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/MoneyBill.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const MoneyBill = () => (
+  <path
+    fillRule="evenodd"
+    d="M3.245 12.2h11.51a1.995 1.995 0 0 1 1.945-1.945v-6.51A1.995 1.995 0 0 1 14.755 1.8H3.245A1.995 1.995 0 0 1 1.3 3.745v6.51A1.995 1.995 0 0 1 3.245 12.2ZM18 2v10a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 0 12V2A1.5 1.5 0 0 1 1.5.5h15A1.5 1.5 0 0 1 18 2Zm-6.5 5c0 2-1 3-2.5 3S6.5 9 6.5 7s1-3 2.5-3 2.5 1 2.5 3Z"
+    clipRule="evenodd"
+  />
+)

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

@@ -26,6 +26,7 @@ import { ExclamationTriangle } from './ExclamationTriangle'
 import { ExternalLink } from './ExternalLink'
 import { Home } from './Home'
 import { Image } from './Image'
+import { MoneyBill } from './MoneyBill'
 import { Move } from './Move'
 import { Order } from './Order'
 import { Pagali } from './Pagali'
@@ -82,6 +83,7 @@ export const icons = {
   externalLink: ExternalLink,
   home: Home,
   image: Image,
+  moneyBill: MoneyBill,
   move: Move,
   order: Order,
   pagali: Pagali,

package/src/Layout/Box/Box.tsx

@@ -26,6 +26,7 @@ export class Box extends React.PureComponent<BoxProps, BoxState> {
       className = '',
       variant = 'default',
       isToggle = false,
+      id,
     } = this.props
     const toggleContent = (value?: boolean) =>
       this.setState({ isOpen: value ?? !this.state.isOpen })
@@ -43,6 +44,7 @@ export class Box extends React.PureComponent<BoxProps, BoxState> {
         <div
           className={`box w-full flex flex-col bg-base-1 border border-card-stroke rounded ${className}`}
           data-opened={isOpen}
+          id={id}
         >
           {children}
         </div>
@@ -56,6 +58,10 @@ export interface BoxProps extends Partial<SharedContextProps> {
    * Custom class name
    * */
   className?: string
+  /**
+   * Box ID
+   * */
+  id?: string
   /**
    * Box Header and Content
    */
@@ -69,6 +75,7 @@ export interface BoxProps extends Partial<SharedContextProps> {
    * */
   isOpen?: boolean
 }
+
 interface BoxState {
   isOpen: boolean
 }

package/src/Navigation/Pagination/PaginationNav.tsx

@@ -62,6 +62,7 @@ const PaginationNavComponent = ({
         </span>{' '}
         /{' '}
         <button
+          type="button"
           id="btnPaginationLastPage"
           className="pagination-nav-total focus:outline-none"
           onClick={() => {
@@ -73,6 +74,7 @@ const PaginationNavComponent = ({
       </div>
       <div className="text-inverted-2 ml-5 flex items-center">
         <button
+          type="button"
           id="btnPaginationPrev"
           className={`pagination-nav-previous mr-3 duration-200 outline-none ${
             hasPrev ? 'hover:text-inverted-1' : ''
@@ -85,6 +87,7 @@ const PaginationNavComponent = ({
           <Icon icon="arrowLeft" block size={4} />
         </button>
         <button
+          type="button"
           id="btnPaginationNext"
           className={`pagination-nav-next duration-200 outline-none ${
             hasNext ? 'hover:text-inverted-1' : ''