@loja-integrada/admin-components 0.12.3 → 0.12.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loja-integrada/admin-components",
-  "version": "0.12.3",
+  "version": "0.12.6",
   "author": "Loja Integrada Front-End Team",
   "license": "MIT",
   "main": "dist/index.js",
@@ -69,15 +69,15 @@
     "@cypress/webpack-dev-server": "^1.3.1",
     "@fullhuman/postcss-purgecss": "^4.0.3",
     "@size-limit/preset-small-lib": "^4.10.1",
-    "@storybook/addon-a11y": "^6.3.7",
-    "@storybook/addon-essentials": "^6.3.7",
+    "@storybook/addon-a11y": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.3.7",
+    "@storybook/addon-links": "^6.4.19",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addons": "^6.3.7",
-    "@storybook/react": "^6.3.7",
+    "@storybook/addons": "^6.4.19",
+    "@storybook/react": "^6.4.19",
     "@storybook/storybook-deployer": "^2.8.10",
-    "@storybook/testing-react": "^0.0.21",
+    "@storybook/testing-react": "^1.2.3",
     "@testing-library/react": "^11.2.7",
     "@types/node": "^15.12.0",
     "@types/react": "^17.0.3",
@@ -100,7 +100,7 @@
     "react-is": "^17.0.1",
     "rollup-plugin-postcss": "^4.0.0",
     "size-limit": "^4.11.0",
-    "storybook-addon-designs": "^6.0.1",
+    "storybook-addon-designs": "^6.2.1",
     "tailwindcss": "^2.2.4",
     "tsdx": "^0.14.1",
     "tslib": "^2.1.0",

package/src/Components/Table/Table.tsx

@@ -65,13 +65,8 @@ const TableComponent = ({
     [columnsProps]
   )
 
-  const {
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
-    rows,
-    prepareRow,
-  } = useTable({ columns, data: rowsPropsMemoized })
+  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
+    useTable({ columns, data: rowsPropsMemoized })
 
   const handleSelect = React.useCallback(
     (newSelectedRows: number[]) => {
@@ -160,10 +155,8 @@ const TableComponent = ({
       >
         <thead className={`text-left`}>
           {headerGroups.map((headerGroup) => {
-            const {
-              key,
-              ...restHeaderGroupProps
-            } = headerGroup.getHeaderGroupProps()
+            const { key, ...restHeaderGroupProps } =
+              headerGroup.getHeaderGroupProps()
             return (
               <tr key={key} {...restHeaderGroupProps} className="bg-base-2">
                 {selectable && (

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/Forms/Input/Input.stories.tsx

@@ -146,10 +146,25 @@ WithBothWithoutBorder.args = {
   name: 'valor',
 }
 
-export const WithComplement = Template.bind({})
-WithComplement.args = {
+export const WithLabelComplement = Template.bind({})
+WithLabelComplement.args = {
   label: 'Label',
   labelComplement: <Icon icon="infoCircle" size={4} block />,
   required: true,
   name: 'nome',
 }
+
+export const Search = Template.bind({})
+Search.args = {
+  type: "search",
+  sufix: (
+    <button
+      type="submit"
+      className="w-full h-full flex items-center justify-center text-tertiary hover:text-primary"
+    >
+      <Icon icon="search" block />
+    </button>
+  ),
+  sufixBorder: false,
+  name: 'search',
+}

package/src/Forms/Input/Input.tsx

@@ -63,8 +63,8 @@ const InputComponent = (
     hasErrorState ? errorBorderClasses : defaultBorderClasses
   } ${prefix && prefixBorder ? 'border-l' : ''}  ${
     sufix && sufixBorder ? 'border-r' : ''
-  } ${prefix && !prefixBorder ? 'pl-0 -ml-2' : ''} ${
-    sufix && !sufixBorder ? 'pr-0 -mr-2' : ''
+  } ${prefix && !prefixBorder ? 'pl-0' : ''} ${
+    sufix && !sufixBorder ? 'pr-0' : ''
   }`
 
   const LabelComponent = (

package/src/Forms/InputCurrency/InputCurrency.tsx

@@ -100,9 +100,8 @@ export const InputCurrencyComponent = (
       setMaskedValue(calculatedMaskedValue)
       return [calculatedValue, calculatedMaskedValue]
     } else {
-      const [maxCalculatedValue, maxCalculatedMaskedValue] = calculateValues(
-        max
-      )
+      const [maxCalculatedValue, maxCalculatedMaskedValue] =
+        calculateValues(max)
       setMaskedValue(maxCalculatedMaskedValue)
       return [maxCalculatedValue, maxCalculatedMaskedValue]
     }

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

@@ -3,7 +3,7 @@ import { composeStories } from "@storybook/testing-react"
 import { mount } from "@cypress/react"
 import * as stories from "./Badge.stories"
 
-const { Default, Small } = composeStories(stories)
+const { Default, Small, Expanded } = composeStories(stories)
 const badgeClass = '.badge'
 
 describe('Badge tests', () => {
@@ -19,6 +19,11 @@ describe('Badge tests', () => {
     cy.get(badgeClass).should('have.class', 'px-1')
   })
 
+  it('Expanded', () => {
+    mount(<Expanded />)
+    cy.get(badgeClass).should('have.class', 'w-full')
+  })
+
   it('Variants', () => {
     mount(<Default type="neutral" />)
     cy.get(badgeClass).should('have.class', 'bg-inverted-2')

package/src/Indicators/Badge/Badge.stories.tsx

@@ -21,10 +21,19 @@ export default {
   },
 } as Meta
 
-const Template: Story<BadgeProps> = args => <Badge {...args} />
+const Template: Story<BadgeProps> = args => (
+  <div className="w-48 flex justify-center items-center">
+    <Badge {...args} />
+  </div>
+)
 
 export const Default = Template.bind({})
 
+export const Expanded = Template.bind({})
+Expanded.args = {
+  expanded: true,
+}
+
 export const Small = Template.bind({})
 Small.args = {
   size: 'small',

package/src/Indicators/Badge/Badge.tsx

@@ -17,10 +17,13 @@ const BadgeComponent = ({
   type = 'neutral',
   text,
   size = 'default',
+  expanded = false,
 }: BadgeProps) => {
   return (
     <div
-      className={`badge inline-flex items-center justify-center rounded-full ${badgeTypes[type]} ${badgeSizes[size]}`}
+      className={`badge items-center justify-center rounded-full ${
+        badgeTypes[type]
+      } ${badgeSizes[size]} ${expanded ? 'flex w-full' : 'inline-flex'}`}
     >
       <span className={`text-xs tracking-4 font-semibold text-base-1`}>
         {text}
@@ -44,4 +47,8 @@ export interface BadgeProps {
    * @default default
    * */
   size?: keyof typeof badgeSizes
+  /**
+   * Enlarge width of the badge
+   * */
+  expanded?: boolean
 }

package/src/Layout/ActionBar/ActionBar.tsx

@@ -8,9 +8,8 @@ const ActionBarComponent = ({ onlyMobile, children }: ActionBarProps) => {
   const [containerExpanded, setContainerExpanded] = React.useState(true)
   useEffect(() => {
     const botbar = window.parent.document.querySelector<HTMLElement>('.botbar')
-    const container = window.document.querySelector<HTMLElement>(
-      '.page-container'
-    )
+    const container =
+      window.document.querySelector<HTMLElement>('.page-container')
 
     if (botbar) botbar.style.display = 'none'
     if (container) {