@loja-integrada/admin-components 0.16.1 → 0.18.0

package/src/Forms/RadioButton/RadioButton.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+
+const RadioButtonComponent = (
+  {
+    label,
+    id,
+    name,
+    value,
+    className = '',
+    onChange,
+    disabled = false,
+    ...props
+  }: RadioButtonProps,
+  ref: React.ForwardedRef<HTMLInputElement>
+): JSX.Element => {
+  const inputId = id || name
+  const toggleClasses = disabled
+    ? `pointer-events-none border-card-stroke text-on-base-2 font-semibold peer-checked:bg-base-3`
+    : `peer-checked:bg-primary cursor-pointer`
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange && onChange(event)
+  }
+
+  return (
+    <div
+      className={`radioContainer relative inline-flex justify-center items-center text-f6 text-inverted-1 font-semibold mx-2`}
+    >
+      <label
+        className={`${className} relative inline-flex justify-center items-center border border-base-4 rounded-full w-4 h-4 mr-1 m-auto focus-within:border-focus focus-within:border-2
+        }`}
+      >
+        <input
+          ref={ref}
+          className={`absolute peer opacity-0 ${toggleClasses}`}
+          type="radio"
+          name={name}
+          value={value}
+          id={inputId}
+          onChange={handleChange}
+          {...props}
+          disabled={disabled}
+        />
+        <span
+          className={`checkmark rounded-full w-2 h-2 ${toggleClasses} peer-checked:inline-block`}
+        ></span>
+      </label>
+      <label htmlFor={inputId} className={`radioLabel ${toggleClasses}`}>
+        {label}
+      </label>
+    </div>
+  )
+}
+
+const RadioButtonWithForwardRef = React.forwardRef(RadioButtonComponent)
+export const RadioButton = React.memo(RadioButtonWithForwardRef)
+
+export interface RadioButtonProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  /**
+   * Custom class name
+   * */
+  className?: string
+  /**
+   * Custom id
+   * */
+  id?: string
+  /**
+   * Custom name
+   * */
+  name?: string
+  /**
+   * Custom value
+   * */
+  value?: string | number
+  /**
+   * Text label of the radio button
+   * */
+  label?: string | React.ReactNode
+}

package/src/Forms/RadioButton/index.tsx

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

package/src/Forms/ToggleButton/ToggleButton.spec.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { composeStories } from '@storybook/testing-react'
+import { mount } from '@cypress/react'
+import * as stories from './ToggleButton.stories'
+
+const { WithIcon, WithText, Disabled} = composeStories(stories)
+
+describe('Toggle Button tests', () => {
+  it('With Icon', () => {
+    mount(<WithIcon />)
+    cy.get('input[type=radio]:checked').should('have.length', 1)
+    cy.get('ul').children().should('have.lengthOf.above', 0)
+    cy.get('svg').children().should('have.lengthOf.above', 0)
+  })
+
+  it('With Text', () => {
+    mount(<WithText />)
+    cy.get('input[type=radio]:checked').should('have.length', 1)
+    cy.get('ul').children().should('have.lengthOf.above', 0)
+    cy.get('.checkmark').children().should('have.lengthOf.above', 0).contains('span',`Text`)
+  })
+
+  it('Disabled', () => {
+    mount(<Disabled />)
+    cy.get('input[type=radio]:checked').should('have.length', 1)
+    cy.get('.checkmark').should('have.class', 'pointer-events-none')
+  })
+})

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

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+import { Icon } from '../../Icons/Icon'
+import { ToggleButton, ToggleButtonProps } from '.'
+
+export default {
+  title: 'Forms/ToggleButton',
+  component: ToggleButton,
+} as Meta
+
+const Template: Story<ToggleButtonProps> = (args) => <ToggleButton {...args} />
+
+export const WithIcon = Template.bind({})
+WithIcon.args = {  
+  disabled: false,
+  children: [
+    <Icon icon='desktop' key={1} />,
+    <Icon icon='mobile' key={2}/>,
+  ]
+}
+
+export const WithText = Template.bind({})
+WithText.args = {  
+  disabled: false,
+  children: [ 
+    <span key={1}>With Text</span>,
+    <span key={2}>With Text</span>,
+    <span key={3}>With Text</span>,
+  ]
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {  
+  disabled: true,
+  children: [ 
+    <span key={1}>Disabled</span>,
+    <span key={2}>Disabled</span>,
+  ]
+}
+
+export const WithOnChange = Template.bind({})
+WithOnChange.args = {
+  disabled: false,
+  children: [
+    <Icon icon='desktop' key={1} />,
+    <Icon icon='mobile' key={2}/>,
+  ],
+  onChange: (e) => {
+    console.log(e.target.name)
+  },
+}

package/src/Forms/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+
+const ToggleButtonComponent = (
+  {
+    value,
+    className = '',
+    id,
+    children,
+    disabled,
+    defaultCheckedIndex = 0,
+    onChange,
+    ...props
+  }: ToggleButtonProps,
+  ref: React.ForwardedRef<HTMLInputElement>
+) => {
+  const toggleClasses = disabled
+    ? `pointer-events-none bg-base-3 border-card-stroke text-on-base-2`
+    : `peer-checked:bg-primary peer-checked:border-primary peer-checked:text-base-1 text-primary`
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    onChange && onChange(e)
+  }
+
+  const toggleItems = children.map((item, index) => {
+    const borderRadius =
+      index === 0
+        ? 'rounded-l'
+        : children.length - 1 === index
+        ? 'border-r rounded-r'
+        : ''
+    return (
+      <li
+        key={`toggle-btn-[${index}]`}
+        className="inline-flex justify-center items-center h-12"
+      >
+        <label className="relative inline-flex justify-center items-center h-12">
+          <input
+            ref={ref}
+            className="peer absolute top-0 bottom-0 left-0 right-0 cursor-pointer opacity-0 z-20"
+            type="radio"
+            id={id}
+            name="toggleButton"
+            value={value}
+            onChange={handleChange}
+            {...props}
+            defaultChecked={defaultCheckedIndex === index ? true : false}
+            disabled={disabled}
+          />
+          <div
+            className={`${className} checkmark ${toggleClasses} inline-flex justify-center items-center ${borderRadius} py-4 px-6 border-y border-l h-12`}
+          >
+            {item}
+          </div>
+        </label>
+      </li>
+    )
+  })
+
+  return (
+    <div
+      className={`${className} inline-flex justify-center items-center h-12 ${toggleClasses}} rounded text-f6 tracking-4 font-semibold`}
+    >
+      <ul className="list-none inline-flex justify-center items-center h-12">
+        {toggleItems}
+      </ul>
+    </div>
+  )
+}
+
+const ToggleButtonWithForwardRef = React.forwardRef(ToggleButtonComponent)
+export const ToggleButton = React.memo(ToggleButtonWithForwardRef)
+
+export interface ToggleButtonProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  /**
+   * Custom class name
+   * */
+  className?: string
+  /**
+   * Custom id
+   * */
+  id?: string
+  /**
+   * Custom value
+   * */
+  value?: string | number
+  /**
+   * Set icon or an text element to be a children
+   * */
+  children: React.ReactNode[]
+  /**
+   * Set element should be a checked
+   * */
+  defaultCheckedIndex: number
+}

package/src/Forms/ToggleButton/index.tsx

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

package/src/Forms/index.ts

@@ -1,9 +1,14 @@
 export * from './Input'
 export * from './InputMask'
+export * from './RadioButton'
 export * from './InputCurrency'
 export * from './InputLabel'
 export * from './InputHelpText'
 export * from './Select'
 export * from './Toggle'
+export * from './ToggleButton'
 export * from './Dropdown'
 export * from './Checkbox'
+export * from './FloatingLabelInput'
+export * from './FloatingLabelInputMask'
+export * from './FloatingLabelInputCurrency'

package/src/Icons/Icon.stories.tsx

@@ -14,16 +14,16 @@ Example.args = { icon: 'cog' }
 export const IconsList = () => {
   return (
     <>
-      <div className="text-center">
+      <div className="text-center mb-6">
         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 => (
-          <li key={key} className="flex items-center py-4 min-w-0">
-            <div className="shrink-0">
+          <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="pl-2 overflow-hidden text-ellipsis min-w-0">{key}</div>
+            <div className="ml-4 overflow-hidden text-ellipsis min-w-0 text-f6">{key}</div>
           </li>
         ))}
       </ul>

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const AngleDown = () => (
+  <path
+    fillRule="evenodd"
+    d="M9 12.25c-.286 0-.558-.123-.748-.336l-4-4.5a1 1 0 0 1 1.495-1.329L9 9.745l3.252-3.66a1 1 0 1 1 1.495 1.33l-4 4.5a1 1 0 0 1-.747.334Z"
+    clipRule="evenodd"
+  />
+)

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

@@ -2,8 +2,8 @@ import React from 'react'
 
 export const Bell = () => (
   <path
-    clipRule="evenodd"
-    d="M14.6667 11.5556C14.6667 11.8 14.4667 12 14.2222 12H1.77778C1.53333 12 1.33333 11.8 1.33333 11.5556V11.2284C1.33333 11.0738 1.416 10.9271 1.54844 10.848L1.64533 10.7902C2.76533 10.1182 3.55644 9.05067 3.87289 7.78311L4.32533 5.97245C4.74667 4.288 6.25422 3.11111 7.99022 3.11111H8.00978C9.74578 3.11111 11.2533 4.288 11.6747 5.97245L12.1271 7.78311C12.4436 9.05067 13.2347 10.1182 14.3547 10.7902L14.4507 10.848C14.584 10.9271 14.6667 11.0738 14.6667 11.2284V11.5556ZM9.33333 13.3333C9.33333 14.0684 8.73511 14.6667 8 14.6667C7.26489 14.6667 6.66667 14.0684 6.66667 13.3333H9.33333ZM15.1369 9.704L15.0409 9.64711C14.232 9.16178 13.6489 8.37511 13.4204 7.46044L12.968 5.64889C12.4978 3.76711 11.0169 2.35289 9.192 1.91911C9.27911 1.74133 9.33333 1.54489 9.33333 1.33333C9.33333 0.596444 8.73689 0 8 0C7.26311 0 6.66667 0.596444 6.66667 1.33333C6.66667 1.54489 6.72089 1.74133 6.808 1.91911C4.98311 2.35289 3.50222 3.76711 3.032 5.64889L2.57956 7.46044C2.35111 8.37511 1.768 9.16178 0.959111 9.64711L0.863111 9.704C0.328 10.0258 0 10.6044 0 11.2284V11.5556C0 12.5369 0.796444 13.3333 1.77778 13.3333H5.33333C5.33333 14.8062 6.52711 16 8 16C9.47289 16 10.6667 14.8062 10.6667 13.3333H14.2222C15.2036 13.3333 16 12.5369 16 11.5556V11.2284C16 10.6044 15.672 10.0258 15.1369 9.704Z"
     fillRule="evenodd"
+    d="M16.5 13c0 .275-.225.5-.5.5H2c-.275 0-.5-.225-.5-.5v-.368c0-.174.093-.339.242-.428l.109-.065c1.26-.756 2.15-1.957 2.506-3.383l.509-2.037C5.34 4.824 7.036 3.5 8.989 3.5h.022c1.953 0 3.649 1.324 4.123 3.219l.509 2.037c.356 1.426 1.246 2.627 2.506 3.383l.108.065c.15.089.243.254.243.428V13Zm-6 2c0 .827-.673 1.5-1.5 1.5s-1.5-.673-1.5-1.5h3Zm6.529-4.083-.108-.064c-.91-.546-1.566-1.431-1.823-2.46l-.509-2.038c-.529-2.117-2.195-3.708-4.248-4.196.098-.2.159-.421.159-.659C10.5.671 9.829 0 9 0S7.5.671 7.5 1.5c0 .238.061.459.159.659-2.053.488-3.719 2.079-4.248 4.196l-.509 2.038c-.257 1.029-.913 1.914-1.823 2.46l-.108.064C.369 11.279 0 11.93 0 12.632V13c0 1.104.896 2 2 2h4c0 1.657 1.343 3 3 3s3-1.343 3-3h4c1.104 0 2-.896 2-2v-.368c0-.702-.369-1.353-.971-1.715Z"
+    clipRule="evenodd"
   />
 )

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const Calculator = () => (
+  <path
+    fillRule="evenodd"
+    d="M15.6248 14.6389V2.36111C15.6248 1.05683 14.5679 0 13.2636-1e-7L4.76365-5e-7C3.45937-5e-7 2.40253 1.05683 2.40253 2.36111V14.6389C2.40253 15.9422 3.45937 17 4.76365 17h8.49995c1.3043 0 2.3612-1.0578 2.3612-2.3611Zm-1.4167 0c0 .5204-.4231.9444-.9445.9444H4.76364c-.52133 0-.94444-.424-.94444-.9444V2.36111c0-.52133.42311-.94444.94445-.94444h8.49995c.5214 0 .9445.42311.9445.94444V14.6389ZM5.9442 2.71528c-.4564 0-.82639.36998-.82639.82639v1.41666c0 .4564.36999.82639.82639.82639h6.1389c.4564 0 .8264-.36998.8264-.82639V3.54167c0-.4564-.37-.82639-.8264-.82639H5.9442Zm.35417 1.88889v-.70834h5.43053v.70834H6.29837ZM5.9442 7.08333h.47222c.3912 0 .70834.31714.70834.70834v.47222c0 .3912-.31714.70833-.70834.70833H5.9442c-.3912 0-.70833-.31713-.70833-.70833v-.47222c0-.3912.31713-.70834.70833-.70834Zm.47222 2.83334H5.9442c-.3912 0-.70833.31713-.70833.70833v.4722c0 .3912.31713.7084.70833.7084h.47222c.39121 0 .70834-.3172.70834-.7084v-.4722c0-.3912-.31714-.70833-.70834-.70833Zm0 2.83333H5.9442c-.3912 0-.70833.3171-.70833.7083v.4723c0 .3912.31713.7083.70833.7083h.47222c.39121 0 .70834-.3171.70834-.7083v-.4723c0-.3912-.31713-.7083-.70834-.7083Zm2.83334-5.66667h-.47223c-.3912 0-.70833.31714-.70833.70834v.47222c0 .3912.31713.70833.70833.70833h.47223c.3912 0 .70833-.31713.70833-.70833v-.47222c0-.3912-.31713-.70834-.70833-.70834Zm0 2.83334h-.47223c-.3912 0-.70833.31713-.70833.70833v.4722c0 .3912.31713.7084.70833.7084h.47223c.3912 0 .70833-.3172.70833-.7084v-.4722c0-.3912-.31713-.70833-.70833-.70833Zm0 2.83333h-.47223c-.3912 0-.70833.3171-.70833.7083v.4723c0 .3912.31713.7083.70833.7083h.47223c.3912 0 .70833-.3171.70833-.7083v-.4723c0-.3912-.31713-.7083-.70833-.7083Zm2.83334-5.66667h-.4722c-.3912 0-.7084.31713-.7084.70834v.47222c0 .3912.3172.70833.7084.70833h.4722c.3912 0 .7083-.31713.7083-.70833v-.47222c0-.39121-.3171-.70834-.7083-.70834Zm0 2.83334h-.4722c-.3912 0-.7084.31713-.7084.70833v3.3056c0 .3912.3172.7083.7084.7083h.4722c.3912 0 .7083-.3171.7083-.7083V10.625c0-.3912-.3171-.70833-.7083-.70833Z"
+    clipRule="evenodd"
+  />
+)

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const Camera = () => (
+  <path
+    fillRule="evenodd"
+    d="M7.75 1C6.7835 1 6 1.7835 6 2.75V3.75H7.5V2.75C7.5 2.61193 7.61193 2.5 7.75 2.5H10.25C10.3881 2.5 10.5 2.61193 10.5 2.75C10.5 3.7165 11.2835 4.5 12.25 4.5H14.5C15.466 4.5 16.25 5.28341 16.25 6.25V13.25C16.25 14.2166 15.466 15 14.5 15H3.5C2.53321 15 1.75 14.2168 1.75 13.25V7.25H0.25V13.25C0.25 15.0452 1.70479 16.5 3.5 16.5H14.5C16.294 16.5 17.75 15.0454 17.75 13.25V6.25C17.75 4.45459 16.294 3 14.5 3H12.25C12.1119 3 12 2.88807 12 2.75C12 1.7835 11.2165 1 10.25 1H7.75ZM5.5 9.75C5.5 11.683 7.067 13.25 9 13.25C10.933 13.25 12.5 11.683 12.5 9.75C12.5 7.817 10.933 6.25 9 6.25C7.067 6.25 5.5 7.817 5.5 9.75ZM7 9.75C7 8.64543 7.89543 7.75 9 7.75C10.1046 7.75 11 8.64543 11 9.75C11 10.8546 10.1046 11.75 9 11.75C7.89543 11.75 7 10.8546 7 9.75ZM12 6.5C12 6.08579 12.3358 5.75 12.75 5.75H14.25C14.6642 5.75 15 6.08579 15 6.5C15 6.91421 14.6642 7.25 14.25 7.25H12.75C12.3358 7.25 12 6.91421 12 6.5ZM3.24 2.5C3.24 2.08579 2.90421 1.75 2.49 1.75C2.07579 1.75 1.74 2.08579 1.74 2.5V3.5H0.75C0.335786 3.5 0 3.83579 0 4.25C0 4.66421 0.335786 5 0.75 5H1.74V6C1.74 6.41421 2.07579 6.75 2.49 6.75C2.90421 6.75 3.24 6.41421 3.24 6V5H4.25C4.66421 5 5 4.66421 5 4.25C5 3.83579 4.66421 3.5 4.25 3.5H3.24V2.5Z"
+    clipRule="evenodd"
+  />
+)

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

@@ -3,7 +3,7 @@ import React from 'react'
 export const Copy = () => (
   <path
     fillRule="evenodd"
-    d="M10 15.5h1.5v.5a2 2 0 01-2 2h-7a2 2 0 01-2-2V6a2 2 0 012-2H3v1.5h-.5A.5.5 0 002 6v10a.5.5 0 00.5.5h7a.5.5 0 00.5-.5v-.5zm3.5-3h-7A.501.501 0 016 12V2c0-.275.225-.5.5-.5h3.9v2c0 1.158.942 2.1 2.1 2.1H14V12c0 .275-.225.5-.5.5zm.354-8.775a.503.503 0 01.146.353V4.4h-1.5a.901.901 0 01-.9-.9V1.535a.517.517 0 01.175.111l2.079 2.079zm1.06-1.061L12.836.586A2 2 0 0011.422 0H6.5a2 2 0 00-2 2v10a2 2 0 002 2h7a2 2 0 002-2V4.078a2 2 0 00-.586-1.414z"
+    d="M11 15.5h1.5v.5c0 1.104-.896 2-2 2h-7c-1.104 0-2-.896-2-2V6c0-1.104.896-2 2-2H4v1.5h-.5c-.276 0-.5.225-.5.5v10c0 .275.224.5.5.5h7c.276 0 .5-.225.5-.5v-.5Zm3.5-3h-7c-.275 0-.5-.225-.5-.5V2c0-.275.225-.5.5-.5h3.9v2c0 1.158.942 2.1 2.1 2.1H15V12c0 .275-.225.5-.5.5Zm.354-8.775c.093.093.146.222.146.353V4.4h-1.5c-.496 0-.9-.404-.9-.9V1.535c.065.026.126.062.175.111l2.079 2.079Zm1.06-1.061L13.836.586C13.461.211 12.952 0 12.422 0H7.5c-1.104 0-2 .896-2 2v10c0 1.104.896 2 2 2h7c1.104 0 2-.896 2-2V4.078c0-.53-.211-1.039-.586-1.414Z"
     clipRule="evenodd"
   />
 )

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const Desktop = () => (
+  <path
+    fillRule="evenodd"
+    d="M16.5 11c0 .275-.225.5-.5.5H2a.501.501 0 0 1-.5-.5V2c0-.275.225-.5.5-.5h14c.275 0 .5.225.5.5v9Zm-6.009 5.5H7.509l1.05-3.5h.882l1.05 3.5ZM16 0H2a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h4.991l-1.05 3.5H2.5V18h13v-1.5h-3.441l-1.05-3.5H16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Z"
+    clipRule="evenodd"
+  />
+)

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

@@ -3,7 +3,7 @@ import React from 'react'
 export const Image = () => (
   <path
     fillRule="evenodd"
-    d="M10.5 5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm5.5 7.5H2a.5.5 0 0 1-.5-.5v-.937L5.176 8.39a2.247 2.247 0 0 1 2.647 0l2.188 1.59a3.759 3.759 0 0 0 4.027.246L16.5 8.857V12a.5.5 0 0 1-.5.5ZM2 1.5h14a.5.5 0 0 1 .5.5v5.261a.704.704 0 0 0-.364.084l-2.827 1.57a2.258 2.258 0 0 1-2.416-.147L8.706 7.177a3.743 3.743 0 0 0-4.412 0L1.5 9.209V2a.5.5 0 0 1 .5-.5ZM16 0H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Z"
+    d="M10.5 7c0-.828.671-1.5 1.5-1.5s1.5.672 1.5 1.5-.671 1.5-1.5 1.5-1.5-.672-1.5-1.5Zm5.5 7.5H2c-.276 0-.5-.225-.5-.5v-.937l3.676-2.673c.792-.575 1.856-.575 2.647 0l2.188 1.59c1.176.857 2.758.952 4.027.246l2.462-1.369V14c0 .275-.224.5-.5.5ZM2 3.5h14c.276 0 .5.225.5.5v5.261c-.124-.001-.249.018-.364.084l-2.827 1.57c-.762.424-1.711.365-2.416-.147L8.706 9.177c-1.32-.959-3.092-.959-4.412 0L1.5 11.209V4c0-.275.224-.5.5-.5ZM16 2H2C.896 2 0 2.896 0 4v10c0 1.104.896 2 2 2h14c1.104 0 2-.896 2-2V4c0-1.104-.896-2-2-2Z"
     clipRule="evenodd"
   />
 )

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const Lightbulb = () => (
+  <path
+    fillRule="evenodd"
+    d="M14.5 6.255C14.5 7.693 14.014 9.11 13.131 10.246L12.183 11.465C11.931 11.788 11.725 12.139 11.54 12.5H6.46C6.275 12.139 6.069 11.788 5.817 11.465L4.869 10.246C3.986 9.11 3.5 7.693 3.5 6.255V6C3.5 3.519 5.519 1.5 8 1.5H10C12.481 1.5 14.5 3.519 14.5 6V6.255ZM4.75 6.5001H6.25C6.25 5.2601 7.259 4.2501 8.5 4.2501V2.7501C6.432 2.7501 4.75 4.4331 4.75 6.5001ZM10.707 16.055C10.679 16.309 10.465 16.5 10.21 16.5H7.79C7.535 16.5 7.321 16.309 7.293 16.056L7.146 14.737C7.119 14.488 7.069 14.243 7.013 14H10.987C10.931 14.243 10.881 14.488 10.853 14.737L10.707 16.055ZM10 0H8C4.687 0 2 2.687 2 6V6.255C2 8.034 2.593 9.763 3.686 11.167L4.633 12.386C5.2 13.114 5.554 13.985 5.656 14.903L5.802 16.221C5.915 17.234 6.771 18 7.79 18H10.21C11.229 18 12.085 17.234 12.198 16.221L12.344 14.903C12.446 13.985 12.8 13.114 13.367 12.386L14.314 11.167C15.407 9.763 16 8.034 16 6.255V6C16 2.687 13.313 0 10 0Z"
+    clipRule="evenodd"
+  />
+)

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const Mobile = () => (
+  <path
+    fillRule="evenodd"
+    d="M9 13c-.553 0-1 .447-1 1 0 .553.447 1 1 1 .553 0 1-.447 1-1 0-.553-.447-1-1-1Zm3.5-13h-7c-1.104 0-2 .896-2 2v14c0 1.104.896 2 2 2h7c1.104 0 2-.896 2-2V2c0-1.104-.896-2-2-2Zm0 1.5c.275 0 .5.225.5.5v14c0 .275-.225.5-.5.5h-7c-.275 0-.5-.225-.5-.5V2c0-.275.225-.5.5-.5h7Z"
+    clipRule="evenodd"
+  />
+)

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

@@ -3,7 +3,7 @@ import React from 'react'
 export const MoneyBill = () => (
   <path
     fillRule="evenodd"
-    d="M3.245 12.2h11.51a1.995 1.995 0 0 1 1.945-1.945v-6.51A1.995 1.995 0 0 1 14.755 1.8H3.245A1.995 1.995 0 0 1 1.3 3.745v6.51A1.995 1.995 0 0 1 3.245 12.2ZM18 2v10a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 0 12V2A1.5 1.5 0 0 1 1.5.5h15A1.5 1.5 0 0 1 18 2Zm-6.5 5c0 2-1 3-2.5 3S6.5 9 6.5 7s1-3 2.5-3 2.5 1 2.5 3Z"
+    d="M3.245 14.2h11.51c.027-1.064.881-1.918 1.945-1.945v-6.51c-1.064-.027-1.918-.881-1.945-1.945H3.245C3.218 4.864 2.364 5.718 1.3 5.745v6.51c1.064.027 1.918.881 1.945 1.945ZM18 4v10c0 .828-.672 1.5-1.5 1.5h-15C.672 15.5 0 14.828 0 14V4c0-.828.672-1.5 1.5-1.5h15c.828 0 1.5.672 1.5 1.5Zm-6.5 5c0 2-1 3-2.5 3s-2.5-1-2.5-3 1-3 2.5-3 2.5 1 2.5 3Z"
     clipRule="evenodd"
   />
 )

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

@@ -3,7 +3,7 @@ import React from 'react'
 export const Move = () => (
   <path
     fillRule="evenodd"
-    d="M9.5 14c0-.828-.672-1.5-1.5-1.5s-1.5.672-1.5 1.5.672 1.5 1.5 1.5 1.5-.672 1.5-1.5zm-6 0c0-.828-.671-1.5-1.5-1.5S.5 13.172.5 14s.671 1.5 1.5 1.5 1.5-.672 1.5-1.5zm6-12C9.5 1.172 8.828.5 8 .5S6.5 1.172 6.5 2 7.172 3.5 8 3.5 9.5 2.828 9.5 2zm-6 0C3.5 1.172 2.829.5 2 .5S.5 1.172.5 2 1.171 3.5 2 3.5 3.5 2.828 3.5 2zm6 6c0-.828-.672-1.5-1.5-1.5S6.5 7.172 6.5 8 7.172 9.5 8 9.5 9.5 8.828 9.5 8zM2 9.5C1.171 9.5.5 8.828.5 8S1.171 6.5 2 6.5s1.5.672 1.5 1.5S2.829 9.5 2 9.5z"
+    d="M13.5 15c0-.828-.672-1.5-1.5-1.5s-1.5.672-1.5 1.5.672 1.5 1.5 1.5 1.5-.672 1.5-1.5Zm-6 0c0-.828-.671-1.5-1.5-1.5s-1.5.672-1.5 1.5.671 1.5 1.5 1.5 1.5-.672 1.5-1.5Zm6-12c0-.828-.672-1.5-1.5-1.5s-1.5.672-1.5 1.5.672 1.5 1.5 1.5 1.5-.672 1.5-1.5Zm-6 0c0-.828-.671-1.5-1.5-1.5S4.5 2.172 4.5 3 5.171 4.5 6 4.5 7.5 3.828 7.5 3Zm6 6c0-.828-.672-1.5-1.5-1.5s-1.5.672-1.5 1.5.672 1.5 1.5 1.5 1.5-.672 1.5-1.5ZM6 10.5c-.829 0-1.5-.672-1.5-1.5S5.171 7.5 6 7.5s1.5.672 1.5 1.5-.671 1.5-1.5 1.5Z"
     clipRule="evenodd"
   />
 )

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

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export const Nav = () => (
+  <>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M16.5 15.5V14.5C16.5 14.224 16.276 14 16 14H2C1.724 14 1.5 14.224 1.5 14.5V15.5C1.5 15.776 1.724 16 2 16H16C16.276 16 16.5 15.776 16.5 15.5ZM16.5 3.5V2.5C16.5 2.224 16.276 2 16 2H2C1.724 2 1.5 2.224 1.5 2.5V3.5C1.5 3.776 1.724 4 2 4H16C16.276 4 16.5 3.776 16.5 3.5ZM16 10H2C1.724 10 1.5 9.776 1.5 9.5V8.5C1.5 8.224 1.724 8 2 8H16C16.276 8 16.5 8.224 16.5 8.5V9.5C16.5 9.776 16.276 10 16 10Z"
+    />
+  </>
+)

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

@@ -2,8 +2,8 @@ import React from 'react'
 
 export const PaperList = () => (
   <path
-    clipRule="evenodd"
-    d="M16 3C16 1.343 14.657 0 13 0H3C1.343 0 0 1.343 0 3V15C0 16.657 1.343 18 3 18H13C14.657 18 16 16.657 16 15V3ZM13 16.5C13.827 16.5 14.5 15.827 14.5 15V3C14.5 2.173 13.827 1.5 13 1.5H3C2.173 1.5 1.5 2.173 1.5 3V15C1.5 15.827 2.173 16.5 3 16.5H13ZM4 5H12V4H4V5ZM4 8H12V7H4V8ZM4 11H12V10H4V11ZM4 14H12V13H4V14Z"
     fillRule="evenodd"
+    d="M17 3c0-1.657-1.343-3-3-3H4C2.343 0 1 1.343 1 3v12c0 1.657 1.343 3 3 3h10c1.657 0 3-1.343 3-3V3Zm-3 13.5c.827 0 1.5-.673 1.5-1.5V3c0-.827-.673-1.5-1.5-1.5H4c-.827 0-1.5.673-1.5 1.5v12c0 .827.673 1.5 1.5 1.5h10ZM5 5h8V4H5v1Zm0 3h8V7H5v1Zm0 3h8v-1H5v1Zm0 3h8v-1H5v1Z"
+    clipRule="evenodd"
   />
 )

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

@@ -3,7 +3,6 @@ import React from 'react'
 export const Pix = () => (
   <path
     fillRule="evenodd"
-    d="M3.71455 3.77848l-.4728.47279.4728-.00001c.40012 0 .78508.09931 1.12661.28623.19426.10633.37448.241.53543.40188l2.40858 2.40901c.17347.17354.4567.17419.63059-.0002l2.39984-2.40003c.1284-.1284.2692-.24011.4195-.33404.3692-.23064.7964-.35407 1.2425-.35407h.2891L9.71865 1.21195c-.94935-.949268-2.48837-.949268-3.43757 0L3.71455 3.77848zm5.06128-1.62373c-.4287-.42861-1.12347-.42849-1.55191-.00002l-1.4153 1.4153c.18102.12536.35193.26776.51055.4263l1.78122 1.78154 1.77234-1.77249c.12705-.12699.26227-.2439.40397-.34971L8.77583 2.15475zM9.87289 12.9946L8.1006 11.2222l-1.78105 1.7812c-.15864.1585-.32982.3012-.51087.4265l1.41533 1.4153c.42846.4285 1.12329.4286 1.55189.0001l1.5009-1.501c-.1417-.1058-.27685-.2227-.40391-.3497zm1.36241-.6088c.3692.2307.7964.3541 1.2425.3541h.289l-3.04808 3.0482c-.94927.9492-2.48831.9492-3.43751 0l-3.03946-3.0394h.47294c.40008 0 .78501-.0993 1.12651-.2862.19431-.1064.37455-.241.53553-.4019l2.40858-2.4087c.16843-.16843.46209-.16893.63059 0l2.3998 2.3999c.1285.1284.2692.2401.4196.334zm1.2425-.3515c-.433 0-.8568-.1756-1.1628-.4817L8.91529 9.15296c-.21748-.21768-.51595-.32648-.81448-.32648-.2985.00001-.59704.10879-.8147.32627L4.87752 11.5613c-.30595.3062-.7298.4818-1.16277.4818H2.68497c-.04393 0-.08498.0103-.12379.0249L.711953 10.2188c-.949271-.9493-.949271-2.48826 0-3.43753l1.849297-1.8493c.03875.01459.07979.02494.12372.02494h1.02978c.43297 0 .85682.17555 1.16277.48179l2.40881 2.4088c.2245.22436.51938.33672.81448.33672.29481 0 .5899-.11236.81448-.33694L11.315 5.44747c.306-.30617.7298-.48179 1.1628-.48179h.8375c.0464 0 .0903-.01014.1308-.02638l1.842 1.84197c.9492.94926.9492 2.48822 0 3.43753l-1.842 1.8419c-.0405-.0162-.0844-.0264-.1308-.0264h-.8375zm-.22-1.4246l-2.1097-2.10959 2.1101-2.11016c.0558-.05583.1403-.09094.2196-.09094h.4424l1.4251 1.42507c.4285.42858.4285 1.12334 0 1.55191L12.9202 10.701h-.4424c-.0793 0-.1642-.0355-.22-.0913zM3.93472 6.38151l2.11851 2.1185-2.11885 2.11889c-.05568.0557-.14017.0908-.21963.0908h-.62623L1.65476 9.27596c-.42857-.42857-.42857-1.12331 0-1.55189l1.43383-1.43382h.62616c.07945 0 .16432.03556.21997.09126z"
-    clipRule="evenodd"
+    d="m4.179688 3.6875-.53125.53125h.53125c.449218 0 .882812.113281 1.265624.324219.21875.117187.421876.269531.601563.453125l2.710937 2.707031c.195313.195313.515626.195313.710938 0l2.699219-2.699219c.144531-.144531.300781-.269531.472656-.375.414063-.261718.894531-.398437 1.398437-.398437h.324219L10.933594.800781c-1.066406-1.066406-2.800782-1.066406-3.867188 0Zm5.691406-1.824219c-.480469-.484375-1.261719-.484375-1.746094 0L6.535156 3.453125c.203125.140625.394532.300781.574219.480469L9.113281 5.9375l1.992188-1.992188c.144531-.144531.296875-.277343.457031-.394531Zm1.234375 12.191407L9.113281 12.0625l-2.003906 2.003906c-.179687.179688-.371094.339844-.574219.480469l1.59375 1.589844c.480469.484375 1.261719.484375 1.742188 0l1.691406-1.6875c-.160156-.117188-.3125-.25-.457031-.394531Zm1.535156-.683594c.414063.261718.894531.398437 1.398437.398437h.324219l-3.429687 3.429688c-1.066406 1.066406-2.800782 1.066406-3.867188 0L3.648438 13.78125h.53125c.449218 0 .882812-.113281 1.265624-.324219.21875-.117187.421876-.269531.601563-.453125l2.710937-2.707031c.191407-.191406.519532-.191406.710938 0l2.699219 2.699219c.144531.144531.300781.269531.472656.375Zm1.398437-.394532c-.488281 0-.964843-.199218-1.308593-.542968L10.03125 9.734375c-.246094-.246094-.582031-.367187-.917969-.367187-.335937 0-.671875.121093-.917969.367187l-2.707031 2.710937c-.34375.34375-.820312.539063-1.308593.539063H3.019531c-.046875 0-.09375.011719-.136719.03125L.800781 10.933594c-1.066406-1.066406-1.066406-2.800782 0-3.867188l2.082031-2.082031c.042969.019531.089844.03125.136719.03125h1.160157c.488281 0 .964843.195313 1.308593.539063l2.707031 2.710937c.253907.253906.585938.378906.917969.378906.332031 0 .664063-.125.917969-.378906l2.699219-2.699219c.34375-.34375.820312-.542968 1.308593-.542968h.941407c.050781 0 .101562-.011719.144531-.027344l2.074219 2.070312c1.066406 1.066406 1.066406 2.800782 0 3.867188L15.125 13.003906c-.042969-.015625-.09375-.027344-.144531-.027344Zm-.25-1.601562L11.417969 9l2.371093-2.375c.0625-.0625.160157-.101562.25-.101562h.496094l1.601563 1.605468c.484375.480469.484375 1.261719 0 1.742188l-1.601563 1.605468h-.496094c-.089843 0-.1875-.039062-.25-.101562ZM4.425781 6.617188 6.808594 9l-2.382813 2.382812c-.0625.0625-.15625.101563-.246093.101563h-.707032L1.863281 9.871094c-.484375-.480469-.484375-1.261719 0-1.742188l1.613281-1.613281h.703126c.089843 0 .183593.039063.246093.101563Zm0 0"
   />
 )

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

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const Plus = () => (
+  <path
+    fillRule="evenodd"
+    d="M16.5 7.75h-6.25V1.5h-2.5v6.25H1.5v2.5h6.25v6.25h2.5v-6.25h6.25v-2.5Z"
+    clipRule="evenodd"
+  />
+)

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

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export const ShoppingCart = () => (
+  <>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M14.25 13.5C13.008 13.5 12 14.507 12 15.75C12 16.993 13.008 18 14.25 18C15.492 18 16.5 16.993 16.5 15.75C16.5 14.507 15.492 13.5 14.25 13.5ZM14.25 14.8C14.773 14.8 15.2 15.226 15.2 15.75C15.2 16.274 14.773 16.7 14.25 16.7C13.727 16.7 13.3 16.274 13.3 15.75C13.3 15.226 13.727 14.8 14.25 14.8ZM6.25 13.5C5.008 13.5 4 14.507 4 15.75C4 16.993 5.008 18 6.25 18C7.492 18 8.5 16.993 8.5 15.75C8.5 14.507 7.492 13.5 6.25 13.5ZM6.25 14.8C6.773 14.8 7.2 15.226 7.2 15.75C7.2 16.274 6.773 16.7 6.25 16.7C5.727 16.7 5.3 16.274 5.3 15.75C5.3 15.226 5.727 14.8 6.25 14.8ZM4.478 4.75L5.582 10.547C5.604 10.665 5.707 10.75 5.827 10.75H14.765C14.884 10.75 14.986 10.666 15.01 10.549L16.17 4.75H4.478ZM14.765 12.25H5.827C4.988 12.25 4.266 11.651 4.108 10.827L2.379 1.5H0V0H3.621L4.191 3.25H18L16.48 10.843C16.318 11.658 15.597 12.25 14.765 12.25Z"
+    />
+  </>
+)

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

@@ -3,7 +3,7 @@ import React from 'react'
 export const Sync = () => (
   <path
     fillRule="evenodd"
-    d="M15.228 1.731 14.12 2.938C12.175.9 10.174 0 7.64 0 3.935 0 0 2.667 0 7.556h1.347c0-4 3.165-6.173 6.292-6.173 2.182 0 3.86.762 5.56 2.561l-1.405 1.534a.444.444 0 0 0 .327.745h3.435c.245 0 .444-.2.444-.445V2.031a.444.444 0 0 0-.772-.3Zm-.574 6.714H16C16 13.334 12.064 16 8.36 16c-2.534 0-4.535-.9-6.482-2.938L.772 14.268a.444.444 0 0 1-.772-.3v-3.745c0-.247.199-.445.445-.445h3.432c.386 0 .588.46.328.745L2.8 12.055c1.702 1.8 3.379 2.562 5.56 2.562 3.127 0 6.294-2.172 6.294-6.172Z"
+    d="m17.1315 1.947-1.245 1.358C13.6965 1.011 11.4455 0 8.59449 0 4.42749 0 .0004883 3 .0004883 8.5H1.51549c0-4.5 3.561-6.945 7.079-6.945 2.45401 0 4.34101.858 6.25401 2.882l-1.58 1.725c-.294.32-.067.838.368.838h3.864c.276 0 .5-.224.5-.5V2.285c0-.456-.561-.674-.869-.338Zm-.646 7.553h1.515c0 5.5-4.428 8.5-8.59501 8.5-2.851 0-5.102-1.012-7.293-3.306L.868488 16.051c-.103.114-.235.164-.364.164-.257 0-.5039997-.198-.5039997-.501V11.5c0-.277.2229997-.5.4999997-.5H4.36149c.435 0 .662.517.369.838l-1.58 1.723c1.914 2.025 3.801 2.883 6.255 2.883 3.51801 0 7.08001-2.444 7.08001-6.944Z"
     clipRule="evenodd"
   />
 )

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

@@ -1,6 +1,7 @@
 import { Adjust } from './Adjust'
 import { AngleLeft } from './AngleLeft'
 import { AngleRight } from './AngleRight'
+import { AngleDown } from './AngleDown'
 import { App } from './App'
 import { ArrowLeft } from './ArrowLeft'
 import { SortDown } from './SortDown'
@@ -11,6 +12,7 @@ import { BarcodeRead } from './BarcodeRead'
 import { Bell } from './Bell'
 import { Blog } from './Blog'
 import { Bullhorn } from './Bullhorn'
+import { Calculator } from './Calculator'
 import { CalendarAlt } from './CalendarAlt'
 import { Cog } from './Cog'
 import { Copy } from './Copy'
@@ -36,6 +38,7 @@ import { Order } from './Order'
 import { Pagali } from './Pagali'
 import { PaperList } from './PaperList'
 import { PieChart } from './PieChart'
+import { Plus } from './Plus'
 import { PlusCircle } from './PlusCircle'
 import { Print } from './Print'
 import { InfoCircle } from './InfoCircle'
@@ -46,6 +49,8 @@ import { Trash } from './Trash'
 import { TimesCircle } from './TimesCircle'
 import { Minus } from './Minus'
 import { Tv } from './Tv'
+import { Desktop } from './Desktop'
+import { Mobile } from './Mobile'
 import { Truck } from './Truck'
 import { UsdCircle } from './UsdCircle'
 import { QuestionCircle } from './QuestionCircle'
@@ -55,11 +60,16 @@ import { AngleDiagonal } from './AngleDiagonal'
 import { AngleHeight } from './AngleHeight'
 import { AngleWidth } from './AngleWidth'
 import { User } from './User'
+import { Lightbulb } from './Lightbulb'
+import { Camera } from './Camera'
+import { Nav } from './Nav'
+import { ShoppingCart } from './ShoppingCart'
 
 export const icons = {
   adjust: Adjust,
   angleLeft: AngleLeft,
   angleRight: AngleRight,
+  angleDown: AngleDown,
   angleDiagonal: AngleDiagonal,
   angleHeight: AngleHeight,
   angleWidth: AngleWidth,
@@ -73,7 +83,9 @@ export const icons = {
   bell: Bell,
   blog: Blog,
   bullhorn: Bullhorn,
+  calculator: Calculator,
   calendarAlt: CalendarAlt,
+  camera: Camera,
   check: Check,
   cog: Cog,
   copy: Copy,
@@ -92,14 +104,18 @@ export const icons = {
   halfBack: HalfBack,
   home: Home,
   image: Image,
+  lightbulb: Lightbulb,
   moneyBill: MoneyBill,
   move: Move,
+  nav: Nav,
   order: Order,
   pagali: Pagali,
   paperList: PaperList,
   pieChart: PieChart,
+  plus: Plus,
   plusCircle: PlusCircle,
   print: Print,
+  shoppingCart: ShoppingCart,
   infoCircle: InfoCircle,
   link: Link,
   loading: Loading,
@@ -110,6 +126,8 @@ export const icons = {
   timesCircle: TimesCircle,
   minus: Minus,
   tv: Tv,
+  desktop: Desktop,
+  mobile: Mobile,
   truck: Truck,
   usdCircle: UsdCircle,
   questionCircle: QuestionCircle,

package/src/Indicators/InformationBox/InformationBox.spec.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { composeStories } from '@storybook/testing-react'
+import { mount } from '@cypress/react'
+import * as stories from './InformationBoxt.stories'
+
+const { Default } = composeStories(stories)
+
+describe('InformationBox tests', () => {
+  it('Default', () => {
+    mount(<Default />)
+    cy.get('.InformationBox-title').last().contains('Dica!')
+  })
+
+  it('Variants', () => {
+    mount(<Default type="tip" />)
+    cy.get('.InformationBox-icon').should('have.class', 'icon-lightbulb')
+    cy.get('.InformationBox').should('have.class', 'bg-success-light')
+
+    mount(<Default type="warning" />)
+    cy.get('.InformationBox-icon').should('have.class', 'icon-exclamationTriangle')
+    cy.get('.InformationBox').should('have.class', 'bg-warning-light')
+
+    mount(<Default type="danger" />)
+    cy.get('.InformationBox-icon').should('have.class', 'icon-ban')
+    cy.get('.InformationBox').should('have.class', 'bg-danger-light')
+  })
+})