@loja-integrada/admin-components 0.13.1 → 0.15.0

package/src/Components/TableList/TableListItem.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+
+import { Icon } from '../../Icons'
+import { TableListItemProps } from './TableListItem.interface'
+import { TableListItemWrapper } from './TableListItemWrapper'
+
+export const TableListItem: React.FunctionComponent<TableListItemProps> = ({
+  forceBorderDesktop = false,
+  title,
+  description,
+  timestampTime,
+  timestampDate,
+  itemWrapper,
+  itemWrapperProps,
+  withHover = false,
+  isInsideContainer = false,
+  withIcon,
+}) => {
+  return (
+    <div
+      className={`table-item border-primary-bold border-opacity-10 border-t first:border-t-0 ${
+        forceBorderDesktop ? 'lg:first:border-t' : ''
+      }`}
+    >
+      <TableListItemWrapper
+        Wrapper={itemWrapper}
+        props={itemWrapperProps}
+        withHover={withHover}
+        isInsideContainer={isInsideContainer}
+      >
+        {withIcon && (
+          <div className="table-item-icon flex items-center justify-center flex-none mr-4">
+            <div
+              className={`table-item-icon-background h-8 w-8 flex items-center justify-center rounded ${
+                withIcon.class || ''
+              }`}
+            >
+              <Icon icon={withIcon.icon || 'minus'} block size={5} />
+            </div>
+          </div>
+        )}
+        <div className="table-item-content flex flex-col justify-center flex-auto gap-1.5 min-w-0 w-full">
+          <div className="table-item-title text-f6 font-semibold">{title}</div>
+          {description && (
+            <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>
+            {timestampDate && (
+              <div className="table-item-timestamp-date w-full hidden lg:block">
+                {timestampDate}
+              </div>
+            )}
+          </div>
+        )}
+      </TableListItemWrapper>
+    </div>
+  )
+}

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

@@ -0,0 +1,18 @@
+import * as React from "react"
+import { composeStories } from "@storybook/testing-react"
+import { mount } from "@cypress/react"
+import * as stories from "./TableListItemLoading.stories"
+
+const { ItemLoading } = composeStories(stories)
+
+describe('TableListItemLoading tests', () => {
+
+  it('Default', () => {
+    mount(<ItemLoading />)
+    cy.get('.table-item.table-item-loading')
+      .should('exist')
+      .find('.table-item-content .table-item-title .animate-pulse')
+        .should('exist')
+  })
+
+})

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

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+import { withDesign } from 'storybook-addon-designs'
+
+import { TableListItemProps } from './TableListItem.interface'
+import { TableListItemLoading } from './TableListItemLoading'
+
+export default {
+  title: 'Components/TableList',
+  component: TableListItemLoading,
+  decorators: [withDesign],
+  parameters: {
+    layout: 'padded',
+  },
+  args: {
+    forceBorderDesktop: false,
+  },
+} as Meta
+
+const Template: Story<Pick<TableListItemProps, 'forceBorderDesktop'>> = (args) => <TableListItemLoading {...args} />
+
+export const ItemLoading = Template.bind({})

package/src/Components/TableList/TableListItemLoading.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import { LoadingPlaceholder } from '../LoadingPlaceholder'
+import { TableListItemProps } from './TableListItem.interface'
+import { TableListItemWrapper } from './TableListItemWrapper'
+
+export const TableListItemLoading: React.FunctionComponent<
+  Pick<TableListItemProps, 'forceBorderDesktop'>
+> = ({ forceBorderDesktop = false }) => {
+  return (
+    <div
+      className={`table-item table-item-loading border-primary-bold border-opacity-10 border-t first:border-t-0 ${
+        forceBorderDesktop ? 'lg:first:border-t' : ''
+      }`}
+    >
+      <TableListItemWrapper>
+        <div className="table-item-icon flex items-center justify-center flex-none mr-4">
+          <div
+            className={`table-item-icon-background h-8 w-8 flex items-center justify-center rounded`}
+          >
+            <LoadingPlaceholder className="w-full" />
+          </div>
+        </div>
+        <div className="table-item-content flex flex-col justify-center flex-auto gap-1.5 min-w-0 w-full">
+          <div className="table-item-title text-f6 font-semibold">
+            <LoadingPlaceholder className="w-2/3" />
+          </div>
+          <div className="table-item-description">
+            <LoadingPlaceholder className="w-1/3" />
+          </div>
+        </div>
+        <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">
+            <LoadingPlaceholder className="w-16" />
+          </div>
+        </div>
+      </TableListItemWrapper>
+    </div>
+  )
+}

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

@@ -0,0 +1,32 @@
+import * as React from "react"
+import { composeStories } from "@storybook/testing-react"
+import { mount } from "@cypress/react"
+import * as stories from "./TableListItemWrapper.stories"
+
+const { ItemWrapper } = composeStories(stories)
+
+describe('TableListItemWrapper tests', () => {
+
+  it('Default', () => {
+    mount(<ItemWrapper withHover={false} isInsideContainer={false} />)
+    cy.get('a.table-item-wrapper')
+      .should('exist')
+      .should('have.attr', 'href', '#a')
+      .should('have.class', 'flex relative')
+      .should('not.have.class', 'hover:bg-base-2 before:hover:block')
+      .contains('Some randon content')
+    
+  })
+
+  it('Without Wrapper', () => {
+    mount(<ItemWrapper Wrapper={undefined} />)
+    cy.get('div.table-item-wrapper').should('exist')
+  })
+
+  it('With Hover', () => {
+    mount(<ItemWrapper withHover={true} isInsideContainer={true} Wrapper={undefined} />)
+    cy.get('.table-item-wrapper').should('have.class', 'hover:bg-base-2 before:hover:block')
+    cy.get('.table-item-wrapper').should('have.class', 'after:hover:block')
+  })
+
+})

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

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+import { withDesign } from 'storybook-addon-designs'
+
+import { TableListItemWrapper, TableListItemWrapperProps } from './TableListItemWrapper'
+
+const CellLink = (props: any) => {
+  const { href = '/', children, ...restProps } = props
+  return (
+    <a href={href} {...restProps}>{children}</a>
+  )
+}
+
+export default {
+  title: 'Components/TableList',
+  component: TableListItemWrapper,
+  decorators: [withDesign],
+  parameters: {
+    layout: 'padded',
+  },
+  args: {
+    Wrapper: CellLink,
+    children: (
+      <div>
+        Some randon content
+      </div>
+    ),
+    props: {
+      href: '#a'
+    },
+    withHover: true,
+    isInsideContainer: true
+  },
+} as Meta
+
+const Template: Story<TableListItemWrapperProps> = (args) => <TableListItemWrapper {...args} />
+
+export const ItemWrapper = Template.bind({})

package/src/Components/TableList/TableListItemWrapper.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import { TableListItemWrapperProp } from './TableListItem.interface'
+
+const ItemWrapperClasses = `flex relative py-6 text-f7 leading-4 break-words no-underline`
+const ItemWrapperClassesContainerHover = `before:hover:block before:hover:absolute before:hover:h-full before:hover:w-8 before:hover:top-0 before:hover:-left-8 before:hover:bg-base-2 after:hover:block after:hover:absolute after:hover:h-full after:hover:w-8 after:hover:top-0 after:hover:-right-8 after:hover:bg-base-2`
+
+const DefaultWrapper = (props: any) => {
+  const { children, ...restProps } = props
+  return <div {...restProps}>{children}</div>
+}
+
+export const TableListItemWrapper = ({
+  Wrapper = DefaultWrapper,
+  props = {},
+  children,
+  withHover = false,
+  isInsideContainer = false,
+}: TableListItemWrapperProps) => (
+  <Wrapper
+    className={`table-item-wrapper ${ItemWrapperClasses} ${
+      withHover
+        ? `hover:bg-base-2 ${
+            isInsideContainer ? ItemWrapperClassesContainerHover : ''
+          }`
+        : ''
+    }`}
+    {...props}
+  >
+    {children}
+  </Wrapper>
+)
+
+export interface TableListItemWrapperProps {
+  Wrapper?: TableListItemWrapperProp
+  children: React.ReactNode
+  props?: { [key: string]: unknown }
+  withHover?: boolean
+  isInsideContainer?: boolean
+}

package/src/Components/TableList/index.tsx

@@ -0,0 +1 @@
+export * from './TableList'

package/src/Components/index.ts

@@ -1,6 +1,7 @@
 export * from './Button'
 export * from './LoadingPlaceholder'
 export * from './Table'
+export * from './TableList'
 export * from './Tabs'
 export * from './Timeline'
 export * from './Modal'

package/src/Indicators/Alert/Alert.tsx

@@ -47,6 +47,7 @@ const AlertComponent = ({
   showClose = false,
   onClose,
   hideIcon = false,
+  customIcon,
 }: AlertProps) => {
   const [alertIsOpen, setAlertIsOpen] = useState(isOpen)
   useEffect(() => {
@@ -67,7 +68,10 @@ const AlertComponent = ({
         <div
           className={`alert-icon hidden sm:block flex-shrink-0 mr-3 ${alertTypes[type].iconClass}`}
         >
-          <Icon icon={alertTypes[type].icon} size={6} />
+          <Icon
+            icon={customIcon ? customIcon : alertTypes[type].icon}
+            size={6}
+          />
         </div>
       )}
       <div className="flex-grow flex flex-col sm:flex-row items-start sm:items-center justify-between min-w-0">
@@ -126,6 +130,10 @@ export interface AlertProps {
    * @default false
    */
   hideIcon?: boolean
+  /**
+   * Custom icon
+   */
+  customIcon?: IconProps['icon']
   /**
    * Action for the alert, like button and hiperlinks
    * */

package/src/Navigation/Breadcrumb/Breadcrumb.spec.tsx

@@ -55,8 +55,20 @@ describe('Breadcrumb tests', () => {
   it('WithActions', () => {
     mount(<WithActions />)
     cy.get('.header-navigation .header-navigation-content').within(() => {
+      cy.get('.header-navigation-actions').should('have.class', 'flex')
       cy.get('.header-navigation-actions button').should('exist')
     })
   })
 
+  it('WithActionsDisplay', () => {
+    mount(<WithActions actionsDisplay="desktop" />)
+    cy.get('.header-navigation .header-navigation-content').within(() => {
+      cy.get('.header-navigation-actions').should('have.class', 'hidden lg:flex')
+    })
+    mount(<WithActions actionsDisplay="mobile" />)
+    cy.get('.header-navigation .header-navigation-content').within(() => {
+      cy.get('.header-navigation-actions').should('have.class', 'flex lg:hidden')
+    })
+  })
+
 })

package/src/Navigation/Breadcrumb/index.tsx

@@ -1,6 +1,12 @@
 import React from 'react'
 import { Icon } from '../../Icons/Icon'
 
+const actionsDisplayClass = {
+  both: 'flex',
+  desktop: 'hidden lg:flex',
+  mobile: 'flex lg:hidden',
+}
+
 export const Breadcrumb: React.FC<BreadcrumbProps> = React.memo(
   ({
     Link,
@@ -10,6 +16,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = React.memo(
     mobileAlign = 'left',
     help,
     actions,
+    actionsDisplay = 'both',
     className = '',
   }) => {
     const renderPrevTitle = (
@@ -102,7 +109,11 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = React.memo(
             )}
           </div>
           {actions && (
-            <div className="header-navigation-actions flex items-center gap-5">
+            <div
+              className={`header-navigation-actions items-center gap-5 ${
+                actionsDisplayClass[actionsDisplay] || ''
+              }`}
+            >
               {actions}
             </div>
           )}
@@ -134,8 +145,7 @@ export interface BreadcrumbProps {
    * Example: `const Link = (props: any) => { return  <a href="https://www.google.com" target="_blank" className={`underline ` + props.className}>{props.children}</a> }`
    * */
   Link?: React.ElementType
-  /**
-   * Aligment of `currentTitle` at mobile
+  /** Aligment of `currentTitle` at mobile
    * @default 'left'
    * */
   mobileAlign?: 'left' | 'center'
@@ -151,4 +161,8 @@ export interface BreadcrumbProps {
    * Custom actions and buttons
    * */
   actions?: React.ReactNode
+  /** Should show actions only at one resolution or always
+   * @default 'both'
+   * */
+  actionsDisplay?: 'desktop' | 'mobile' | 'both'
 }