@loja-integrada/admin-components 0.12.8 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loja-integrada/admin-components",
-  "version": "0.12.8",
+  "version": "0.14.0",
   "author": "Loja Integrada Front-End Team",
   "license": "MIT",
   "main": "dist/index.js",
@@ -86,7 +86,7 @@
     "@types/react-table": "^7.7.1",
     "@types/react-text-mask": "^5.4.8",
     "@types/styled-components": "^5.1.14",
-    "autoprefixer": "^9",
+    "autoprefixer": "^10.4.4",
     "babel-loader": "^8.2.2",
     "babel-plugin-module-name-mapper": "^1.2.0",
     "chromatic": "^5.9.2",
@@ -95,26 +95,30 @@
     "husky": "^5.1.3",
     "identity-obj-proxy": "^3.0.0",
     "list-selectors": "^2.0.0",
-    "postcss": "^8",
+    "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",
     "storybook-addon-designs": "^6.2.1",
-    "tailwindcss": "^2.2.4",
+    "tailwindcss": "^3.0.23",
     "tsdx": "^0.14.1",
     "tslib": "^2.1.0",
     "typescript": "^4.2.3",
     "webpack-dev-server": "^3.11.2"
   },
   "peerDependency": {
+    "@loja-integrada/tailwindcss-config": ">=1.5.0",
     "react": ">=17.0.1",
-    "react-dom": ">=17.0.1"
+    "react-dom": ">=17.0.1",
+    "tailwindcss": ">=3.0.0"
   },
   "dependencies": {
-    "@loja-integrada/tailwindcss-config": "^1.4.1",
+    "@loja-integrada/tailwindcss-config": "^1.5.0",
     "@tippyjs/react": "^4.2.5",
     "@types/react-select": "^4.0.17",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-modal": "^3.14.3",
     "react-select": "^4.3.1",
     "react-table": "^7.7.0",

package/src/Components/Button/Button.spec.tsx

@@ -47,6 +47,10 @@ describe('Button tests', () => {
   it('WithIcon', () => {
     mount(<Default icon="edit" />)
     cy.get('button svg').should('have.class', 'icon-edit')
+    cy.get('button svg').should('have.class', 'ml-3')
+
+    mount(<Default icon="edit" iconPosition="left" />)
+    cy.get('button svg').should('have.class', 'mr-2')
   })
 
   it('Variants', () => {

package/src/Components/Button/Button.stories.tsx

@@ -55,3 +55,9 @@ WithLink.args = {
   href: "https://google.com",
   target: "_blank"
 }
+
+export const WithIcon = Template.bind({})
+WithIcon.args = {
+  icon: 'app',
+  children: 'With Icon',
+}

package/src/Components/Button/Button.tsx

@@ -96,6 +96,7 @@ const ButtonComponent = (
     className,
     onClick,
     size = 'default',
+    iconPosition = 'right',
     ...props
   }: ButtonProps,
   ref: React.ForwardedRef<HTMLButtonAnchorElement>
@@ -129,9 +130,20 @@ const ButtonComponent = (
       onClick={handleClick}
       {...props}
     >
+      {currentIcon && iconPosition === 'left' && (
+        <Icon
+          icon={currentIcon}
+          size={size === 'small' ? 3 : 4}
+          className="mr-2 inline-block"
+        />
+      )}
       {children}
-      {currentIcon && (
-        <Icon icon={currentIcon} size={4} className="ml-3 inline-block" />
+      {currentIcon && iconPosition === 'right' && (
+        <Icon
+          icon={currentIcon}
+          size={size === 'small' ? 3 : 4}
+          className="ml-3 inline-block"
+        />
       )}
     </ButtonType>
   )
@@ -178,6 +190,11 @@ export interface ButtonProps extends ButtonAnchorProps {
    * Icon of the button
    */
   icon?: IconProps['icon']
+  /**
+   * Icon of the button
+   * @default 'right'
+   */
+  iconPosition?: 'left' | 'right'
   /**
    * React children
    * Also support render prop

package/src/Components/LoadingPlaceholder/LoadingPlaceholder.stories.tsx

@@ -9,6 +9,6 @@ export default {
   args: {},
 } as Meta
 
-const Template: Story<LoadingPlaceholderProps> = args => <LoadingPlaceholder {...args} />
+const Template: Story<LoadingPlaceholderProps> = args => <div className="w-40"><LoadingPlaceholder {...args} /></div>
 
 export const Default = Template.bind({})

package/src/Icons/Icon.stories.tsx

@@ -17,11 +17,13 @@ export const IconsList = () => {
       <div className="text-center">
         There are {Object.keys(icons).length} icons
       </div>
-      <ul className="grid grid-cols-7 gap-4 list-none">
+      <ul className="grid grid-cols-6 gap-4 list-none">
         {(Object.keys(icons) as Array<keyof typeof icons>).map(key => (
-          <li key={key} className="flex items-center py-4">
-            <IconComponent icon={key} />
-            <div className="pl-2">{key}</div>
+          <li key={key} className="flex items-center py-4 min-w-0">
+            <div className="shrink-0">
+              <IconComponent icon={key} />
+            </div>
+            <div className="pl-2 overflow-hidden text-ellipsis min-w-0">{key}</div>
           </li>
         ))}
       </ul>

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

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export const Back = () => (
+  <path d="M5.5495 4.26c.282-.303.265-.777-.039-1.06-.304-.281-.778-.264-1.061.039l-3.25 3.5c-.266.289-.266.734 0 1.021l3.25 3.5c.149.159.349.24.55.24.183 0 .366-.066.511-.2.304-.282.321-.757.039-1.061L3.4695 8H13V6.5H3.4695l2.08-2.24ZM13 6.5V8c.5926-.00007 1.1679.22038 1.6206.60807.4916.42109.8001 1.01704.8599 1.66163.0599.6445-.1335 1.2871-.5393 1.7915-.4057.5044-.9918.8311-1.6342.9108l.1858 1.4976c1.0316-.1281 1.9728-.6526 2.6243-1.4626.6515-.81.9621-1.8418.866-2.8769-.0962-1.03499-.5914-1.99196-1.3809-2.66814C14.8753 6.83943 13.9516 6.49992 13 6.5Z" />
+)

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

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export const HalfBack = () => (
+  <>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="m15.8384 13.3186-.0174-.0196-.9881-1.1119c.0374-.0406.0735-.0826.1083-.1259.4058-.5044.5992-1.1469.5393-1.7915-.0598-.64458-.3683-1.24053-.8599-1.66162-.4527-.38769-1.028-.60814-1.6206-.60807h-1.8884l-1.33319-1.5H13c.9516-.00008 1.8753.33943 2.6022.96196.7895.67618 1.2847 1.63314 1.3809 2.66823.0961 1.035-.2145 2.0668-.866 2.8768-.0878.1091-.1808.2131-.2787.3116Zm-1.2441.85c-.3479.1512-.7185.2534-1.1015.301l-.1858-1.4976c.0657-.0081.1308-.0188.1951-.0321l1.0922 1.2287ZM9.11111 8.00001l-1.33333-1.5H3.4695l2.08-2.24c.04231-.04545.07788-.09476.10677-.14669l-.9404-1.05796c-.0981.03985-.18931.10115-.26637.18365l-3.25 3.5c-.266.289-.266.734 0 1.021l3.25 3.49999c.149.159.349.24.55.24.183 0 .366-.066.511-.2.304-.282.321-.757.039-1.061l-2.08-2.23899h5.64161Z"
+    />
+    <path d="m14.366 13.912-.545-.613-2.476-2.786-5.289-5.951-2.028-2.281L2 0H0l2.02756 2.281L16 18h2l-3.634-4.088Z" />
+  </>
+)

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const User = () => (
+  <path
+    fillRule="evenodd"
+    d="M10.707 0H7.293C5.803 0 4.644 1.295 4.809 2.776L5.253 6.776C5.394 8.042 6.464 9 7.737 9H10.263C11.536 9 12.606 8.042 12.747 6.776L13.191 2.776C13.356 1.295 12.196 0 10.707 0M10.707 1.5C11.096 1.5 11.341 1.709 11.452 1.833C11.563 1.958 11.743 2.224 11.701 2.61L11.256 6.61C11.2 7.118 10.772 7.5 10.263 7.5H7.737C7.228 7.5 6.8 7.118 6.743 6.61L6.299 2.61C6.256 2.224 6.436 1.958 6.548 1.833C6.659 1.709 6.904 1.5 7.293 1.5H10.707M14.012 11.5H3.988C1.658 11.5 0 13.228 0 15.807C0 17.578 0.783 18 2.02 18H15.979C17.43 18 18 17.152 18 15.807C18 13.231 16.342 11.5 14.012 11.5M14.012 13C14.716 13 15.367 13.285 15.846 13.801C16.324 14.318 16.504 14.84 16.504 15.692C16.504 16.158 16.384 16.5 15.979 16.5H2.02C1.723 16.5 1.496 16.267 1.496 15.692C1.496 14.974 1.675 14.318 2.154 13.801C2.633 13.285 3.284 13 3.988 13H14.012"
+    clipRule="evenodd"
+  />
+)

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

@@ -4,6 +4,7 @@ import { App } from './App'
 import { ArrowLeft } from './ArrowLeft'
 import { SortDown } from './SortDown'
 import { ArrowRight } from './ArrowRight'
+import { Back } from './Back'
 import { Ban } from './Ban'
 import { BarcodeRead } from './BarcodeRead'
 import { Bell } from './Bell'
@@ -24,6 +25,7 @@ import { Eye } from './Eye'
 import { ExclamationCircle } from './ExclamationCircle'
 import { ExclamationTriangle } from './ExclamationTriangle'
 import { ExternalLink } from './ExternalLink'
+import { HalfBack } from './HalfBack'
 import { Home } from './Home'
 import { Image } from './Image'
 import { MoneyBill } from './MoneyBill'
@@ -50,6 +52,7 @@ import { Sync } from './Sync'
 import { AngleDiagonal } from './AngleDiagonal'
 import { AngleHeight } from './AngleHeight'
 import { AngleWidth } from './AngleWidth'
+import { User } from './User'
 
 export const icons = {
   angleLeft: AngleLeft,
@@ -61,6 +64,7 @@ export const icons = {
   arrowLeft: ArrowLeft,
   arrowRight: ArrowRight,
   sortDown: SortDown,
+  back: Back,
   ban: Ban,
   barcodeRead: BarcodeRead,
   bell: Bell,
@@ -81,6 +85,7 @@ export const icons = {
   exclamationCircle: ExclamationCircle,
   exclamationTriangle: ExclamationTriangle,
   externalLink: ExternalLink,
+  halfBack: HalfBack,
   home: Home,
   image: Image,
   moneyBill: MoneyBill,
@@ -105,4 +110,5 @@ export const icons = {
   usdCircle: UsdCircle,
   questionCircle: QuestionCircle,
   sync: Sync,
+  user: User,
 }

package/src/Layout/Sidebar/Sidebar.tsx

@@ -16,13 +16,13 @@ export const Sidebar = React.memo(
         className="sidebar-mode-toggle hidden lg:flex items-center justify-center h-6 w-6 bg-base-3 absolute top-3 -right-3 z-10 border-4 border-base-2 rounded-md transition-all hover:bg-base-4"
         href=""
       >
-        <Icon icon="angleLeft" className="w-3 h-3 transform transition-all" />
+        <Icon icon="angleLeft" size={3} className="transform transition-all" />
       </a>
       <a
         className="sidebar-mobile-close hidden items-center justify-center h-6 w-6 bg-base-3 absolute top-3 -right-3 z-10 border-4 border-base-2 rounded-md transition-all hover:bg-base-4"
         href=""
       >
-        <Icon icon="angleLeft" className="w-3 h-3 transform transition-all" />
+        <Icon icon="angleLeft" size={3} className="transform transition-all" />
       </a> */}
         <nav className={`sidebar-content ${sidebarContentClasses}`}>
           {children}

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

@@ -3,7 +3,7 @@ import { composeStories } from "@storybook/testing-react"
 import { mount } from "@cypress/react"
 import * as stories from "./Breadcrumb.stories"
 
-const { Default, NoPrevious, WithPrevious, WithPreviousCustom } = composeStories(stories)
+const { Default, NoPrevious, WithPrevious, WithPreviousCustom, WithMobileCenter, WithHelp, WithActions } = composeStories(stories)
 
 describe('Breadcrumb tests', () => {
 
@@ -37,4 +37,26 @@ describe('Breadcrumb tests', () => {
     })
   })
 
+  it('WithMobileCenter', () => {
+    mount(<WithMobileCenter />)
+    cy.get('.header-navigation .header-navigation-breadcrumb').within(() => {
+      cy.get('.header-navigation-current').should('have.class', 'w-full lg:w-auto text-center lg:text-left')
+    })
+  })
+
+  it('WithHelp', () => {
+    mount(<WithHelp />)
+    cy.get('.header-navigation .header-navigation-content').within(() => {
+      cy.get('.header-navigation-help a').contains('Saiba mais')
+      cy.get('.header-navigation-help a svg').should('have.class', 'icon-questionCircle')
+    })
+  })
+
+  it('WithActions', () => {
+    mount(<WithActions />)
+    cy.get('.header-navigation .header-navigation-content').within(() => {
+      cy.get('.header-navigation-actions button').should('exist')
+    })
+  })
+
 })

package/src/Navigation/Breadcrumb/Breadcrumb.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { Story, Meta } from '@storybook/react'
 
 import { Breadcrumb, BreadcrumbProps } from '.'
+import { Button } from '../../Components/Button'
 
 export default {
   title: 'Navigation/Breadcrumb',
@@ -38,3 +39,41 @@ WithPreviousCustom.args = {
   previousTitle: 'Página anterior',
   Link: Link
 }
+
+export const WithoutPreviousTitle = Template.bind({})
+WithoutPreviousTitle.args = {
+  currentTitle: 'Página atual',
+  previousHref: 'https://www.google.com'
+}
+
+export const WithMobileCenter = Template.bind({})
+WithMobileCenter.args = {
+  currentTitle: 'Página atual',
+  previousTitle: 'Página anterior',
+  previousHref: 'https://www.google.com',
+  mobileAlign: 'center'
+}
+
+export const WithHelp = Template.bind({})
+WithHelp.args = {
+  currentTitle: 'Página atual',
+  previousHref: 'https://www.google.com',
+  mobileAlign: 'center',
+  help: {
+    title: 'Saiba mais',
+    href: 'https://www.google.com'
+  }
+}
+
+export const WithActions = Template.bind({})
+WithActions.args = {
+  currentTitle: 'Página atual',
+  previousHref: 'https://www.google.com',
+  mobileAlign: 'center',
+  actions: (
+    <>
+      <Button variant="outline" className="hidden lg:block">Cancelar</Button>
+      <Button variant="outline" icon="app" iconPosition="left">Salvar</Button>
+    </>
+  )
+}

package/src/Navigation/Breadcrumb/index.tsx

@@ -2,12 +2,26 @@ import React from 'react'
 import { Icon } from '../../Icons/Icon'
 
 export const Breadcrumb: React.FC<BreadcrumbProps> = React.memo(
-  ({ Link, currentTitle, previousTitle, previousHref, className = '' }) => {
+  ({
+    Link,
+    currentTitle,
+    previousTitle,
+    previousHref,
+    mobileAlign = 'left',
+    help,
+    actions,
+    className = '',
+  }) => {
     const renderPrevTitle = (
-      <span className="hidden lg:inline">{previousTitle}</span>
+      <span className="hidden lg:inline truncate">{previousTitle}</span>
     )
     const renderPrevIcon = (
-      <Icon icon="arrowLeft" className="w-4 h-4 inline-flex mr-3 lg:-mt-1" />
+      <Icon
+        icon="arrowLeft"
+        size={4}
+        className="inline-flex mr-3 -mt-1"
+        block
+      />
     )
     const renderPrevLink = () => {
       if (!previousHref && !Link) {
@@ -35,28 +49,63 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = React.memo(
     return (
       <div
         aria-label="breadcrumbs"
-        className={`header-navigation flex flex-wrap items-center justify-between mb-4 lg:mb-7 ${className}`}
+        className={`header-navigation flex items-center justify-between mb-4 lg:mb-7 ${className}`}
       >
-        <div className="header-navigation-breadcrumb max-w-full truncate">
-          <div className="inline-flex self-center items-center font-semibold tracking-5 text-f5 sm:text-f4 lg:text-f3">
-            {previousTitle && (
-              <span className="header-navigation-previous inline-flex items-center text-on-base-2 text-xl -mr-px">
+        <div
+          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) && (
+              <span className="header-navigation-previous inline-flex items-center text-on-base-2 text-xl -mr-px truncate">
                 {renderPrevLink()}
-                <span className="hidden lg:inline px-2 -ml-px"> / </span>
+                {previousTitle && (
+                  <span className="hidden lg:inline px-2 -ml-px"> / </span>
+                )}
               </span>
             )}
-            <span className="header-navigation-current text-on-base">
+            <span
+              className={`header-navigation-current text-on-base truncate ${
+                mobileAlign === 'center'
+                  ? 'w-full lg:w-auto text-center lg:text-left'
+                  : ''
+              }`}
+            >
               {currentTitle}
             </span>
           </div>
         </div>
-        <div className="header-navigation-content flex items-center flex-grow justify-end">
+        <div className="header-navigation-content flex shrink-0 max-w-1/2 items-center flex-grow justify-end gap-5 ml-2 whitespace-nowrap">
           <div className="header-navigation-help help flex items-center">
-            {/* NOT IMPLEMENTED */}
-          </div>
-          <div className="header-navigation-actions flex items-center">
-            {/* NOT IMPLEMENTED */}
+            {help && (
+              <a
+                href={help.href}
+                target="_blank"
+                rel="noreferrer"
+                className={`flex p-1 pr-0 text-on-base-2 hover:text-on-base duration-200 transition-colors items-center`}
+              >
+                <Icon
+                  icon="questionCircle"
+                  size={4}
+                  className="shrink-0"
+                  block
+                />
+                {help.title && (
+                  <span
+                    className={`text-f6 font-semibold tracking-4 leading-6 ml-2 ${
+                      !help.mobileText ? 'hidden md:inline' : ''
+                    }`}
+                  >
+                    {help.title}
+                  </span>
+                )}
+              </a>
+            )}
           </div>
+          {actions && (
+            <div className="header-navigation-actions flex items-center gap-5">
+              {actions}
+            </div>
+          )}
         </div>
       </div>
     )
@@ -85,4 +134,21 @@ 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
+   * @default 'left'
+   * */
+  mobileAlign?: 'left' | 'center'
+  /**
+   * Help link (external page)
+   * */
+  help?: {
+    title?: string
+    href: string
+    mobileText?: boolean
+  }
+  /**
+   * Custom actions and buttons
+   * */
+  actions?: React.ReactNode
 }

package/src/Components/Button/Button.test.tsx

@@ -1,31 +0,0 @@
-import { expect } from '@jest/globals'
-
-import React from 'react'
-import { render } from '@testing-library/react'
-
-import { Button } from './Button'
-
-describe('Button tests', () => {
-  it('should have overridable styles', () => {
-    const { container } = render(
-      <Button data-testid="button">Black Button</Button>
-    )
-
-    expect(container).toBeDefined()
-  })
-
-  it('should not have a11y violations', async () => {
-    const { container } = render(
-      <>
-        <Button>Button</Button>
-        <Button>Button</Button>
-        <Button variant="secondary">Button</Button>
-        <Button variant="tertiary">Button</Button>
-        <Button size="small">Button</Button>
-        <Button variant="danger">Button</Button>
-      </>
-    )
-
-    expect(container).toBeDefined()
-  })
-})