@loja-integrada/admin-components 0.18.13 → 0.18.15

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@loja-integrada/admin-components",
-  "version": "0.18.13",
+  "version": "0.18.15",
   "author": "Loja Integrada Front-End Team",
   "license": "MIT",
+  "repository": {
+    "url": "lojaintegrada/admin-components",
+    "directory": "styleguide"
+  },
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "files": [

package/src/Components/SidebarFixed/SidebarFixed.tsx

@@ -6,7 +6,7 @@ const backgroundShadowEffect = [
   '[background-size:100%_15px,100%_15px,100%_5px,100%_5px]',
   '[background-attachment:local,local,scroll,scroll]',
   '[background-repeat:no-repeat]',
-  '[background-color:theme(colors.base-1/100]',
+  '[background-color:theme(colors.base-1/100)]',
   '[&_.form-group_.bg-base-1]:bg-transparent',
 ]
 

package/src/Forms/ToggleButton/ToggleButton.stories.tsx

@@ -11,7 +11,7 @@ export default {
 const Template: Story<ToggleButtonProps> = (args) => <ToggleButton {...args} />
 
 export const WithIcon = Template.bind({})
-WithIcon.args = {  
+WithIcon.args = {
   disabled: false,
   children: [
     <Icon icon='desktop' key={1} />,
@@ -20,9 +20,9 @@ WithIcon.args = {
 }
 
 export const WithText = Template.bind({})
-WithText.args = {  
+WithText.args = {
   disabled: false,
-  children: [ 
+  children: [
     <span key={1}>With Text</span>,
     <span key={2}>With Text</span>,
     <span key={3}>With Text</span>,
@@ -30,9 +30,9 @@ WithText.args = {
 }
 
 export const Disabled = Template.bind({})
-Disabled.args = {  
+Disabled.args = {
   disabled: true,
-  children: [ 
+  children: [
     <span key={1}>Disabled</span>,
     <span key={2}>Disabled</span>,
   ]

package/src/Icons/Icon/Icon.stories.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Meta } from '@storybook/react'
+import { Icon as IconComponent } from './Icon'
+
+export default {
+  title: 'Icons/Icon',
+  component: IconComponent,
+  tags: ['autodocs'],
+} as Meta
+
+export const Example = (args: any) => <IconComponent {...args} />
+Example.args = { icon: 'cog' }

package/src/Icons/{Icon.tsx → Icon/Icon.tsx}

@@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react'
-import { icons } from './icons-path'
+import { icons } from '../icons-path'
 
 const iconSizes = {
   1: 'h-1 w-1',
@@ -22,7 +22,7 @@ export const Icon: FunctionComponent<IconProps> = React.memo(
     if (className) classes += className
 
     const Path = icons[icon] || icons['minus']
-    const viewBox = '0 0 18 18'
+    const viewBox = icon === 'exclamation' ? '0 0 6 30' : '0 0 18 18'
 
     return (
       <svg

package/src/Icons/Icon/index.ts

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

package/src/Icons/IconCircular/IconCircular.spec.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { composeStories } from "@storybook/testing-react"
+import { mount } from "@cypress/react"
+import * as stories from "./IconCircular.stories"
+
+const { Default } = composeStories(stories)
+
+const specTitle = require('cypress-sonarqube-reporter/specTitle');
+describe(specTitle('IconCircular tests'), () => {
+
+  it('Default', () => {
+    mount(<Default variant="success" />)
+    cy.get('.icon-circular').should('have.class', 'bg-primary')
+    cy.get('svg path')
+    cy.get('svg').should('have.class', 'icon-check')
+  })
+
+  it('CustomIconAndBackground', () => {
+    mount(<Default icon="camera" bgClass="bg-[#d380ec]" />)
+    cy.get('.icon-circular').should('have.class', 'bg-[#d380ec]')
+    cy.get('svg path')
+    cy.get('svg').should('have.class', 'icon-camera')
+  })
+})

package/src/Icons/IconCircular/IconCircular.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+import { IconCircular as IconCircularComponent, IconCircularProps } from './IconCircular'
+
+export default {
+  title: 'Icons/IconCircular',
+  component: IconCircularComponent,
+} as Meta
+
+const Template: Story<IconCircularProps> = args => <IconCircularComponent {...args} />
+
+export const Default = Template.bind({})
+
+export const CustomIcon = Template.bind({})
+CustomIcon.args = {
+  icon: 'camera',
+  variant: 'danger'
+}
+
+export const CustomIconAndBackground = Template.bind({})
+CustomIconAndBackground.args = {
+  icon: 'camera',
+  bgClass: 'bg-[#d380ec]',
+}

package/src/Icons/IconCircular/IconCircular.tsx

@@ -0,0 +1,67 @@
+import React, { FunctionComponent } from 'react'
+import { Icon, IconProps } from '../Icon/Icon'
+
+type variantType = 'success' | 'warning' | 'danger'
+const variantsStyles: {
+  [key in variantType]: {
+    bgClass: string
+    icon: IconProps['icon']
+  }
+} = {
+  success: {
+    bgClass: 'bg-primary',
+    icon: 'check',
+  },
+  warning: {
+    bgClass: 'bg-warning',
+    icon: 'exclamation',
+  },
+  danger: {
+    bgClass: 'bg-danger',
+    icon: 'times',
+  },
+}
+
+export const IconCircular: FunctionComponent<IconCircularProps> = React.memo(
+  ({
+    variant = 'success',
+    icon: customIcon,
+    bgClass: customBgClass,
+  }: IconCircularProps) => {
+    const icon = customIcon
+      ? customIcon
+      : variantsStyles[variant].icon || 'check'
+    const bgClass = customBgClass
+      ? customBgClass
+      : variantsStyles[variant].bgClass || 'bg-primary'
+
+    return (
+      <>
+        <div
+          className={`icon-circular flex w-20 h-20 mx-auto rounded-full items-center justify-center bg-opacity-20 ${bgClass}`}
+        >
+          <div
+            className={`flex w-14 h-14 rounded-full items-center justify-center ${bgClass}`}
+          >
+            <Icon icon={icon} className="text-base-1" size={7} block />
+          </div>
+        </div>
+      </>
+    )
+  }
+)
+
+export interface IconCircularProps {
+  /** Icon circular variant
+   * @default success
+   * */
+  variant?: variantType
+  /**
+   * Icon variation
+   */
+  icon?: IconProps['icon']
+  /**
+   * Custom class for background
+   */
+  bgClass?: string
+}

package/src/Icons/IconCircular/index.ts

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

package/src/Icons/{Icon.stories.tsx → IconList.tsx}

@@ -1,32 +1,27 @@
 import React from 'react'
-import { Meta } from '@storybook/react'
 import { Icon as IconComponent } from './Icon'
 import { icons } from './icons-path'
 
-export default {
-  title: 'Icons',
-  component: IconComponent,
-} as Meta
-
-export const Example = (args: any) => <IconComponent {...args} />
-Example.args = { icon: 'cog' }
-
-export const IconsList = () => {
+const IconsList = () => {
   return (
     <>
-      <div className="text-center mb-6">
+      <div className="text-f6 mb-10">
         There are {Object.keys(icons).length} icons
       </div>
       <ul className="grid grid-cols-6 gap-4 list-none">
-        {(Object.keys(icons) as Array<keyof typeof icons>).map(key => (
+        {(Object.keys(icons) as Array<keyof typeof icons>).map((key) => (
           <li key={key} className="flex items-center min-w-0 group">
             <div className="shrink-0 border border-transparent group-hover:border-card-stroke rounded flex">
               <IconComponent icon={key} />
             </div>
-            <div className="ml-4 overflow-hidden text-ellipsis min-w-0 text-f6">{key}</div>
+            <div className="ml-4 overflow-hidden text-ellipsis min-w-0 text-f6">
+              {key}
+            </div>
           </li>
         ))}
       </ul>
     </>
   )
 }
+
+export default IconsList

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

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export const Exclamation = () => (
+  <>
+    <path
+      fillRule="evenodd"
+      d="M3 0a3 3 0 0 1 3 3v14a3 3 0 1 1-6 0V3a3 3 0 0 1 3-3Z"
+      clipRule="evenodd"
+    />
+    <path d="M6 27a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+    <path
+      fillRule="evenodd"
+      d="M3 29a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
+      clipRule="evenodd"
+    />
+  </>
+)

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const Filter = () => (
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M15.5698 0H2.43384C0.145842 0 -0.844158 2.897 0.964842 4.298L5.70784 7.969C6.19784 8.348 6.48384 8.933 6.48384 9.552L6.47884 14.895C6.47884 15.653 6.90584 16.346 7.58484 16.685L9.92784 17.857C10.0898 17.937 10.2568 17.975 10.4198 17.975C10.9968 17.975 11.5198 17.511 11.5208 16.874L11.5248 9.55C11.5258 8.932 11.8118 8.349 12.2998 7.97L17.0398 4.297C18.8478 2.896 17.8568 0 15.5698 0ZM15.5698 1.5C16.1508 1.5 16.3588 1.926 16.4218 2.109C16.4838 2.292 16.5798 2.756 16.1208 3.111L11.3818 6.784C10.5198 7.452 10.0258 8.459 10.0248 9.549L10.0208 16.226L8.25584 15.343C8.08484 15.258 7.97884 15.086 7.97884 14.896L7.98384 9.553C7.98484 8.477 7.47684 7.441 6.62584 6.783L1.88284 3.112C1.42384 2.756 1.51984 2.292 1.58184 2.109C1.64484 1.926 1.85284 1.5 2.43384 1.5H15.5698Z"
+  />
+)

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

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export const IconSolidLI = () => (
+  <>
+    <path d="M14.637 6.84a2.67 2.67 0 1 0 0-5.34 2.67 2.67 0 0 0 0 5.34Z" />
+    <path
+      d="M5.97 9.987a3.134 3.134 0 0 0 6.124-.94v-.102a.73.73 0 0 1 .73-.73h3.625a.73.73 0 0 1 .73.73v.09a8.213 8.213 0 0 1-8.047 8.213C4.514 17.34.75 13.542.75 8.921V5.44a2.538 2.538 0 1 1 5.076 0v3.608c0 .319.049.636.144.94Z"
+      fillRule="evenodd"
+      clipRule="evenodd"
+    />
+  </>
+)

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

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export const ThinAngleRight = () => (
+  <path
+    d="M6.75 4.5L11.25 9L6.75 13.5"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.4"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  />
+)

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const WhatsApp = () => (
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M1.68502 9.00599C1.68402 10.288 2.01902 11.539 2.65602 12.642L1.62402 16.412L5.48002 15.401C6.54202 15.98 7.73802 16.286 8.95602 16.286H8.95902C12.968 16.286 16.232 13.022 16.233 9.01199C16.234 7.06899 15.477 5.23999 14.105 3.86499C12.731 2.48999 10.904 1.73199 8.95902 1.73199C4.94902 1.73199 1.68602 4.99499 1.68502 9.00599ZM3.98102 12.452L3.83702 12.224C3.23202 11.262 2.91202 10.148 2.91202 9.00599C2.91402 5.67299 5.62702 2.96099 8.96102 2.96099C10.576 2.96099 12.093 3.59099 13.235 4.73299C14.377 5.87699 15.006 7.39499 15.005 9.01099C15.004 12.344 12.291 15.058 8.95902 15.058H8.95702C7.87102 15.057 6.80802 14.765 5.88002 14.215L5.65802 14.083L3.37002 14.684L3.98102 12.452ZM5.89902 5.87399C5.73202 6.05599 5.26202 6.49599 5.26202 7.39099C5.26202 8.28499 5.91402 9.14899 6.00502 9.27099C6.09602 9.39099 7.28602 11.227 9.11002 12.015C9.54402 12.202 9.88202 12.315 10.147 12.398C10.581 12.536 10.977 12.516 11.291 12.469C11.64 12.418 12.366 12.03 12.517 11.605C12.669 11.181 12.669 10.817 12.624 10.742C12.578 10.666 12.457 10.62 12.275 10.529C12.093 10.438 11.201 9.99799 11.033 9.93799C10.867 9.87699 10.745 9.84699 10.624 10.029C10.503 10.21 10.156 10.62 10.049 10.742C9.94302 10.862 9.83702 10.878 9.65502 10.787C9.47302 10.697 8.88702 10.504 8.19402 9.88499C7.65402 9.40199 7.28802 8.80699 7.18202 8.62599C7.07602 8.44399 7.17102 8.34599 7.26202 8.25499C7.34402 8.17299 7.44402 8.04199 7.53502 7.93599C7.62602 7.82999 7.65502 7.75299 7.71702 7.63299C7.77702 7.51099 7.74602 7.40499 7.70102 7.31399C7.65502 7.22299 7.29302 6.32899 7.14102 5.96499C7.01002 5.65199 6.87802 5.65299 6.77302 5.65399C6.75802 5.65399 6.74502 5.65399 6.73202 5.65299C6.62602 5.64799 6.50502 5.64699 6.38402 5.64699C6.26202 5.64699 6.06502 5.69299 5.89902 5.87399Z"
+  />
+)

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

@@ -27,9 +27,11 @@ import { Product } from './Product'
 import { Edit } from './Edit'
 import { Exchange } from './Exchange'
 import { Eye } from './Eye'
+import { Exclamation } from './Exclamation'
 import { ExclamationCircle } from './ExclamationCircle'
 import { ExclamationTriangle } from './ExclamationTriangle'
 import { ExternalLink } from './ExternalLink'
+import { Filter } from './Filter'
 import { HalfBack } from './HalfBack'
 import { Home } from './Home'
 import { Image } from './Image'
@@ -65,6 +67,9 @@ import { Lightbulb } from './Lightbulb'
 import { Camera } from './Camera'
 import { Nav } from './Nav'
 import { ShoppingCart } from './ShoppingCart'
+import { WhatsApp } from './WhatsApp'
+import { IconSolidLI } from './IconSolidLI'
+import { ThinAngleRight } from './ThinAngleRight'
 
 export const icons = {
   adjust: Adjust,
@@ -100,9 +105,11 @@ export const icons = {
   edit: Edit,
   exchange: Exchange,
   eye: Eye,
+  exclamation: Exclamation,
   exclamationCircle: ExclamationCircle,
   exclamationTriangle: ExclamationTriangle,
   externalLink: ExternalLink,
+  filter: Filter,
   halfBack: HalfBack,
   home: Home,
   image: Image,
@@ -135,4 +142,7 @@ export const icons = {
   questionCircle: QuestionCircle,
   sync: Sync,
   user: User,
+  whatsapp: WhatsApp,
+  iconSolidLI: IconSolidLI,
+  thinAngleRight: ThinAngleRight,
 }

package/src/Icons/index.ts

@@ -1 +1,2 @@
 export * from './Icon'
+export * from './IconCircular'

package/src/Indicators/Tooltip/style.scss

@@ -58,7 +58,7 @@
   }
 
   .tippy-arrow {
-    @apply text-inverted-1 w-4 h-4 text-inverted-1;
+    @apply text-inverted-1 w-4 h-4;
   }
 
   .tippy-arrow:before {