Merge pull request #99 from aiqfome/develop

Develop

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aiq-design-system",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "main": "dist/index.js",
   "repository": "[email protected]:aiqfome/aiq-design-system.git",
   "license": "MIT",

src/components/atoms/Input/Input.stories.tsx

@@ -52,6 +52,27 @@ export const Outlined: React.FC = () => (
   </Flex>
 )
 
+export const Disabled: React.FC = () => (
+  <Flex variant='fullCentralized'>
+    <Input
+      value={text('value', '')}
+      errorForm={boolean('errorForm', false)}
+      errorMessage={text('errorMessage', 'message error')}
+      label={text('label', 'aiqfome')}
+      placeholder={text('placeholder', 'duas pizzas é muito')}
+      disabled
+      variant={select(
+        'Variant',
+        {
+          Outlined: 'outlined',
+          Default: 'default'
+        },
+        'outlined'
+      )}
+    />
+  </Flex>
+)
+
 export const Password: React.FC = () => (
   <Flex variant='fullCentralized'>
     <Input label='Aiqfome' type='password' />

src/components/atoms/Input/InputOutlined.tsx

@@ -2,7 +2,7 @@ import React, { useState, InputHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import { MdVisibility, MdVisibilityOff } from 'react-icons/md'
 
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import {
   color,
   space,
@@ -63,11 +63,11 @@ const LabelStyled = styled.label<Props>`
     color: ${({ theme }) => theme.colors.almostBlack};
     width: 100%;
     height: inherit;
-    background-color: transparent;
     box-shadow: none;
     line-height: inherit;
     transition: border 0.2s, box-shadow 0.2s;
-    background: white;
+    background: ${({ theme, disabled }) =>
+      disabled ? theme.colors.error : theme.colors.lightGrey};
 
     &:not(:focus):placeholder-shown {
       border-top-color: ${({ theme, errorForm }) =>

src/components/molecules/Multistep/Multistep.tsx

@@ -52,14 +52,14 @@ export const Multistep: React.FC<Props> = ({
 
   return (
     <Flex width='100%' alignItems='center' flexDirection='column' {...props}>
-      <Flex width='100%' maxWidth='800px'>
+      <Flex width='100%'>
         {steps.map((step, index) => (
           <Flex
             key={index}
             marginBottom='32px'
             flexDirection='row'
             alignItems='center'
-            width='100%'
+            width={index === steps.length - 1 ? '80px' : '100%'}
           >
             <StepButton type='button' onClick={() => handleClickStep(index)}>
               <Flex
@@ -92,6 +92,7 @@ export const Multistep: React.FC<Props> = ({
                 {step.name}
               </Text>
             </StepButton>
+
             {steps.length - 1 > index && (
               <Divider
                 color={