@loja-integrada/admin-components 0.18.24 → 0.18.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loja-integrada/admin-components",
-  "version": "0.18.24",
+  "version": "0.18.25",
   "author": "Loja Integrada Front-End Team",
   "license": "MIT",
   "repository": {

package/src/Forms/Checkbox/Checkbox.tsx

@@ -87,13 +87,13 @@ const CheckboxComponent = (
         htmlFor={inputId}
         className={`inline-flex ${alignOptions[boxAlign]} cursor-pointer`}
       >
-        <span className="relative rounded z-50 flex items-center justify-center focus-within:ring-2 ring-focus">
+        <span className="relative rounded z-10 flex items-center justify-center focus-within:ring-2 ring-focus">
           <input
             ref={ref || inputRef}
             type="checkbox"
             id={inputId}
             name={name}
-            className="opacity-0 absolute h-4 w-4 z-50 cursor-pointer"
+            className="opacity-0 absolute h-4 w-4 z-10 cursor-pointer"
             checked={isChecked}
             onChange={handleChange}
             disabled={!!disabled}

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

@@ -0,0 +1,22 @@
+import React from 'react'
+
+export const Rocket = () => (
+  <>
+    <path
+      fillRule="evenodd"
+      d="M16.784.869a.75.75 0 0 1 .546.545l.29 1.157a8.942 8.942 0 0 1-2.353 8.492l-.26.26a10.78 10.78 0 0 1-1.644 1.348l-3.416 2.277a.75.75 0 0 1-.946-.094L3.344 9.198a.75.75 0 0 1-.094-.947l2.278-3.416c.394-.59.845-1.141 1.347-1.643l.26-.26A8.942 8.942 0 0 1 15.627.579l1.157.29Zm-.8 1.346-.72-.18a7.442 7.442 0 0 0-7.068 1.957l-.26.26c-.433.433-.821.907-1.16 1.415L4.84 8.572l4.787 4.787 2.904-1.936a9.29 9.29 0 0 0 1.415-1.16l.26-.26a7.442 7.442 0 0 0 1.958-7.068l-.18-.72Z"
+      clipRule="evenodd"
+    />
+    <path
+      fillRule="evenodd"
+      d="M13.49 8.597a2.75 2.75 0 1 1-3.889-3.889 2.75 2.75 0 0 1 3.89 3.89ZM10.769 7.43a1.1 1.1 0 1 0 1.556-1.555 1.1 1.1 0 0 0-1.556 1.555Z"
+      clipRule="evenodd"
+    />
+    <path d="M2.063 13.661a.5.5 0 0 1 .707 0l.353.354a.5.5 0 0 1 0 .707l-.425.425a.5.5 0 0 1-.707 0l-.353-.354a.5.5 0 0 1 0-.707l.425-.425ZM3.477 15.075a.5.5 0 0 1 .707 0l.353.354a.5.5 0 0 1 0 .707l-1.3 1.3a.5.5 0 0 1-.706 0l-.354-.354a.5.5 0 0 1 0-.707l1.3-1.3Z" />
+    <path
+      fillRule="evenodd"
+      d="m4.475 11.602.884-.883-1.061-1.061-1.06 1.06a1.25 1.25 0 0 0 0 1.768l2.474 2.475a1.25 1.25 0 0 0 1.768 0l1.06-1.06-1.06-1.061-.884.884-2.121-2.122ZM12.456 14.228l-.56-1.681 1.422-.475.707 2.122a.75.75 0 0 1-.18.767l-2.122 2.121a.75.75 0 0 1-1.22-.235l-1.06-2.474 1.378-.591.624 1.457 1.01-1.01ZM3.97 5.743l1.682.56.474-1.423-2.121-.707a.75.75 0 0 0-.768.182l-2.12 2.12a.75.75 0 0 0 .234 1.22l2.475 1.061.59-1.379-1.456-.624 1.01-1.01Z"
+      clipRule="evenodd"
+    />
+  </>
+)

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

@@ -71,6 +71,7 @@ import { WhatsApp } from './WhatsApp'
 import { IconSolidLI } from './IconSolidLI'
 import { ThinAngleRight } from './ThinAngleRight'
 import { EyeSlash } from './EyeSlash'
+import { Rocket } from './Rocket'
 
 export const icons = {
   adjust: Adjust,
@@ -147,4 +148,5 @@ export const icons = {
   iconSolidLI: IconSolidLI,
   thinAngleRight: ThinAngleRight,
   eyeSlash: EyeSlash,
+  rocket: Rocket,
 }

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

@@ -2,6 +2,7 @@ import * as React from "react"
 import { composeStories } from "@storybook/testing-react"
 import { mount } from "@cypress/react"
 import * as stories from "./Badge.stories"
+import { Badge } from "./Badge"
 
 const { Default, Small, Expanded } = composeStories(stories)
 const badgeClass = '.badge'
@@ -21,6 +22,26 @@ describe(specTitle('Badge tests'), () => {
     cy.get(badgeClass).should('have.class', 'px-1.5')
   })
 
+  it('Size XSmall', () => {
+    mount(<Badge size="xsmall" text="Example text" />)
+    cy.get(badgeClass).should('have.class', 'text-f8')
+  })
+
+  it('Rounded Small', () => {
+    mount(<Badge rounded="small" text="Example text" />)
+    cy.get(badgeClass).should('have.class', 'rounded')
+  })
+
+  it('Rounded None', () => {
+    mount(<Badge rounded="none" text="Example text" />)
+    cy.get(badgeClass).should('have.class', 'rounded-none')
+  })
+
+  it('Rounded Full', () => {
+    mount(<Badge rounded="full" text="Example text" />)
+    cy.get(badgeClass).should('have.class', 'rounded-full')
+  })
+
   it('Expanded', () => {
     mount(<Expanded />)
     cy.get(badgeClass).should('have.class', 'w-full')

package/src/Indicators/Badge/Badge.tsx

@@ -10,9 +10,22 @@ const badgeTypes = {
   focus: 'bg-focus',
 }
 
+const badgeRounded = {
+  full: 'rounded-full',
+  small: 'rounded',
+  none: 'rounded-none',
+}
+
 const badgeSizes = {
-  default: 'px-2 py-0.5 text-xs',
-  small: 'px-1.5 text-[0.70rem]',
+  default: 'text-xs',
+  small: 'text-[0.70rem]',
+  xsmall: 'text-f8',
+}
+
+const badgeClasses = {
+  default: 'px-2 py-0.5',
+  small: 'px-1.5',
+  xsmall: 'px-0.5 py-px',
 }
 
 const BadgeComponent = ({
@@ -20,12 +33,15 @@ const BadgeComponent = ({
   text,
   size = 'default',
   expanded = false,
+  rounded = 'full',
 }: BadgeProps) => {
   return (
     <div
-      className={`badge items-center justify-center rounded-full ${
-        badgeTypes[type]
-      } ${badgeSizes[size]} ${expanded ? 'flex w-full' : 'inline-flex'}`}
+      className={`badge items-center justify-center ${badgeRounded[rounded]} ${
+        badgeClasses[size]
+      } ${badgeTypes[type]} ${badgeSizes[size]} ${
+        expanded ? 'flex w-full' : 'inline-flex'
+      }`}
     >
       <span
         className={`badgeText tracking-4 font-semibold ${
@@ -57,4 +73,8 @@ export interface BadgeProps {
    * Enlarge width of the badge
    * */
   expanded?: boolean
+  /**
+   * Style of rounded corners
+   * */
+  rounded?: keyof typeof badgeRounded
 }

package/src/Layout/ListActions/ListActions.spec.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { composeStories } from '@storybook/testing-react'
+import { mount } from '@cypress/react'
+import * as stories from './ListActions.stories'
+
+const { Default } = composeStories(stories)
+
+const specTitle = require('cypress-sonarqube-reporter/specTitle')
+
+describe(specTitle('ListActions tests'), () => {
+  it('Default', () => {
+    mount(<Default />)
+    cy.get('.list-actions').should('have.class', 'opacity-100')
+    cy.get('.list-actions__button').should('exist')
+    cy.get('.remove-selected').should('have.class', 'lg:text-danger-dark')
+
+    let alerted = ''
+    cy.on('window:alert', (msg) => (alerted = msg))
+    cy.get('.remove-selected')
+      .click()
+      .then(() => expect(alerted).to.match(/Remove/))
+  })
+})

package/src/Layout/ListActions/ListActions.stories.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+
+import { ListActions, ListActionsProps } from '.'
+
+export default {
+  component: ListActions,
+  title: 'Layout/ListActions',
+} as Meta
+
+const Template: Story<ListActionsProps> = (args) => <ListActions {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  actions: [
+    {
+      buttons: [
+        {
+          className: 'edit-selected hidden lg:flex',
+          icon: 'blog',
+          text: (
+            <>
+              Editar em <br />
+              massa
+            </>
+          ),
+          tagType: 'sign',
+        },
+      ],
+    },
+    {
+      buttons: [
+        {
+          className: 'enable-selected',
+          icon: 'checkCircle',
+          text: (
+            <>
+              Ativar <span className="hidden lg:inline">selecionados</span>
+            </>
+          ),
+        },
+        {
+          className: 'disable-selected',
+          icon: 'ban',
+          text: (
+            <>
+              Inativar <span className="hidden lg:inline">selecionados</span>
+            </>
+          ),
+          tagType: 'new',
+          id: 'disable-selected',
+        },
+      ],
+    },
+    {
+      buttons: [
+        {
+          className: 'remove-selected',
+          variant: 'danger',
+          icon: 'trash',
+          text: (
+            <>
+              Remover <span className="hidden lg:inline">selecionados</span>
+            </>
+          ),
+          onClick: () => alert('Remove'),
+        },
+      ],
+    },
+  ],
+}

package/src/Layout/ListActions/ListActions.tsx

@@ -0,0 +1,149 @@
+import React, { ButtonHTMLAttributes, useEffect } from 'react'
+import { Icon, IconProps } from '../../Icons'
+import { Badge } from '../../Indicators'
+
+export interface ListActionsTagProps {
+  type: ListActionButtonProps['tagType']
+  text?: string
+}
+
+const Tag = ({ type, text }: ListActionsTagProps) => {
+  const commonClasses = 'hidden lg:block absolute'
+  if (type === 'sign') {
+    return (
+      <span
+        className={`-mb-1 -mr-3 bottom-0 right-0 text-primary-dark ${commonClasses}`}
+      >
+        <Icon icon="rocket" size={3} />
+      </span>
+    )
+  }
+
+  return (
+    <span
+      className={`top-3 left-3 px-0.5 py-px rounded-sm text-f8 font-semibold leading-3 text-base-1 ${commonClasses}`}
+    >
+      <Badge
+        size="xsmall"
+        type="primary"
+        rounded="small"
+        text={text ? text : 'NOVO'}
+      />
+    </span>
+  )
+}
+
+const ListActionButton = ({
+  className,
+  tagType,
+  tagText,
+  icon,
+  text,
+  variant = 'default',
+  type = 'button',
+  ...props
+}: ListActionButtonProps) => {
+  const variantClasses = {
+    default: 'lg:text-inverted-2',
+    danger: 'lg:text-danger-dark',
+  }
+
+  return (
+    <button
+      {...props}
+      type={type}
+      className={`list-actions__button rounded relative flex items-center justify-center flex-col gap-y-px lg:gap-y-1 px-3 lg:p-2 lg:border border-transparent text-base-1 transition-colors duration-200 lg:hover:bg-base-3 lg:hover:border-card-stroke ${
+        variant ? variantClasses[variant] : ''
+      } ${className ? className : ''}`}
+    >
+      <span className="relative">
+        <Icon icon={icon} size={5} className="p-px" />
+        {tagType || tagText ? <Tag type={tagType} text={tagText} /> : null}
+      </span>
+      <p className="lg:w-24 text-f8 lg:text-f7 font-semibold tracking-4 text-center select-none leading-tight">
+        {text}
+      </p>
+    </button>
+  )
+}
+
+const ListActionsComponent = ({
+  actions,
+  isVisible = true,
+}: ListActionsProps) => {
+  useEffect(() => {
+    const botbar =
+      window?.parent?.document?.querySelector<HTMLElement>('.botbar')
+    if (botbar) botbar.style.display = 'none'
+
+    return () => {
+      if (botbar) botbar.style.display = ''
+    }
+  }, [])
+
+  return (
+    <div
+      className={`list-actions w-full z-50 h-12 lg:h-auto pb-0-safe fixed right-0 bottom-0 flex justify-center items-center lg:gap-x-8 shadow bg-inverted-1 lg:bg-base-2 transition-all px-4 lg:py-2 ${
+        isVisible
+          ? 'opacity-100 pointer-events-auto translate-y-0'
+          : 'opacity-0 pointer-events-none translate-y-2'
+      }`}
+    >
+      {actions.map((columns) =>
+        Object.values(columns).map(
+          (buttons: ListActionButtonProps[], index) => (
+            <div
+              key={index}
+              className="relative flex lg:after:absolute after:-right-4 after:w-px after:h-full after:bg-base-4 last:after:hidden"
+            >
+              {buttons.map((button) => (
+                <ListActionButton key={button.icon} {...button} />
+              ))}
+            </div>
+          )
+        )
+      )}
+    </div>
+  )
+}
+
+export const ListActions = React.memo(ListActionsComponent)
+
+export interface ListActionsButtons {
+  buttons: ListActionButtonProps[]
+}
+
+export interface ListActionsProps {
+  /**
+   * Actions of list
+   */
+  actions: ListActionsButtons[]
+  /**
+   * Visibility of component
+   */
+  isVisible?: boolean
+}
+
+export interface ListActionButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Button tag
+   */
+  tagType?: 'new' | 'sign'
+  /**
+   * Button tag text
+   */
+  tagText?: string
+  /**
+   * Button icon
+   */
+  icon: IconProps['icon']
+  /**
+   * Button text
+   */
+  text: string | React.ReactNode
+  /**
+   * Button type
+   */
+  variant?: 'default' | 'danger'
+}

package/src/Layout/ListActions/index.tsx

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

package/src/Layout/index.ts

@@ -2,4 +2,5 @@ export * from './Box'
 export * from './Sidebar'
 export * from './Topbar'
 export * from './ActionBar'
+export * from './ListActions'
 export * from './Container'