Merge pull request #91 from aiqfome/develop

Develop
aiqfome · Aug 25, 2020 · 49e98d2 · 49e98d2
2 parents 72651e7 + 5abcefa
commit 49e98d2
Show file tree

Hide file tree

Showing 14 changed files with 91 additions and 75 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "aiq-design-system",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "main": "dist/index.js",
   "repository": "[email protected]:aiqfome/aiq-design-system.git",
   "license": "MIT",

diff --git a/src/components/atoms/Checkbox/Checkbox.tsx b/src/components/atoms/Checkbox/Checkbox.tsx
@@ -1,14 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled, { DefaultTheme } from 'styled-components'
-
+import { layout, space } from 'styled-system'
 export interface Props extends DefaultTheme {
   checked?: boolean
   disabled?: boolean
   onClick?: any
 }
 
 const CheckboxStyled = styled.div<Props>`
+  ${layout}
+  ${space}
+  
+  position: relative;
+  width: 21px;
+  height: 21px;
   opacity: ${props => (props.disabled ? 0.5 : 1)};
 
   :hover {
@@ -73,7 +79,11 @@ export const Checkbox: React.FC<Props> = ({
   }
 
   return (
-    <CheckboxStyled disabled={disabled} onClick={handleClickCheckbox}>
+    <CheckboxStyled
+      disabled={disabled}
+      onClick={handleClickCheckbox}
+      {...props}
+    >
       <input type='Checkbox' checked={checked} disabled={disabled} {...props} />
       <span />
     </CheckboxStyled>

diff --git a/src/components/atoms/Input/InputOutlined.tsx b/src/components/atoms/Input/InputOutlined.tsx
@@ -3,14 +3,24 @@ import PropTypes from 'prop-types'
 import { MdVisibility, MdVisibilityOff } from 'react-icons/md'
 
 import styled from 'styled-components'
-import { color, space, layout, fontSize, fontWeight } from 'styled-system'
+import {
+  color,
+  space,
+  SpaceProps,
+  layout,
+  fontSize,
+  fontWeight
+} from 'styled-system'
 
 import { Button } from '../Button'
 import { Text } from '../Text'
+import { Box } from '../Box'
 
 import { InputErrorMessage } from './InputErrorMessage'
 
-export interface Props extends InputHTMLAttributes<HTMLInputElement> {
+export interface Props
+  extends InputHTMLAttributes<HTMLInputElement>,
+    SpaceProps {
   name?: string
   inputRef?: any
   label?: string
@@ -19,9 +29,12 @@ export interface Props extends InputHTMLAttributes<HTMLInputElement> {
   errorMessage?: string
   value?: string
   sufix?: any
+
+  maxWidth?: number | string
+  backgroundColor?: number | string
 }
 
-const Container = styled.div`
+const Container = styled(Box)`
   ${color}
   ${space}
   ${layout}
@@ -146,13 +159,25 @@ export const InputOutlined: React.FC<Props> = ({
   errorMessage,
   sufix,
   value,
+  backgroundColor,
+  maxWidth,
+  marginRight,
+  marginLeft,
+
   ...props
 }) => {
   const [showPassword, setShowPassword] = useState(false)
 
+  const styledContainer = {
+    backgroundColor,
+    maxWidth,
+    marginRight,
+    marginLeft
+  }
+
   if (type === 'password') {
     return (
-      <Container {...props}>
+      <Container {...styledContainer} {...props}>
         <LabelStyled errorForm={errorForm}>
           <input
             {...props}
@@ -183,7 +208,7 @@ export const InputOutlined: React.FC<Props> = ({
 
   if (sufix) {
     return (
-      <Container {...props}>
+      <Container {...styledContainer} {...props}>
         <LabelStyled errorForm={errorForm}>
           <input
             {...props}
@@ -204,7 +229,7 @@ export const InputOutlined: React.FC<Props> = ({
   }
 
   return (
-    <Container {...props}>
+    <Container {...styledContainer} {...props}>
       <LabelStyled errorForm={errorForm}>
         <input
           {...props}
@@ -231,5 +256,10 @@ InputOutlined.propTypes = {
   type: PropTypes.string,
   errorMessage: PropTypes.string,
   sufix: PropTypes.any,
-  value: PropTypes.string
+  value: PropTypes.string,
+
+  backgroundColor: PropTypes.any,
+  maxWidth: PropTypes.any,
+  marginLeft: PropTypes.any,
+  marginRight: PropTypes.any
 }
diff --git a/src/components/atoms/Radio/Radio.tsx b/src/components/atoms/Radio/Radio.tsx
@@ -9,6 +9,7 @@ export interface Props extends MarginProps {
   disabled?: boolean
   checked?: boolean
   onChange?: (event: any) => void
+  onClick?: (event: any) => void
 }
 
 interface RadioStyled extends DefaultTheme, MarginProps {
@@ -50,7 +51,7 @@ const RadioStyled = styled.label<RadioStyled>`
     height: 20px;
     width: 20px;
     border-radius: 50%;
-    border: 2px solid #eb2f96;
+    border: 2px solid ${({ theme }) => theme.colors.primary};
   }
 
   input:checked ~ span {
@@ -73,7 +74,7 @@ const RadioStyled = styled.label<RadioStyled>`
     width: 10px;
     height: 10px;
     border-radius: 50%;
-    background-color: #eb2f96;
+    background-color: ${({ theme }) => theme.colors.primary};
   }
 `
 
@@ -85,6 +86,9 @@ export const Radio: React.FC<Props> = ({
   onChange = () => {
     // do nothing.
   },
+  onClick = () => {
+    // do nothing.
+  },
   ...props
 }) => {
   const [isChecked, setIsChecked] = useState(checked)
@@ -101,6 +105,7 @@ export const Radio: React.FC<Props> = ({
         disabled={disabled}
         name={name}
         onChange={handleRadioOnChange}
+        onClick={onClick}
         checked={isChecked}
         value={value}
         {...props}
@@ -116,6 +121,7 @@ Radio.propTypes = {
   disabled: PropTypes.bool,
   checked: PropTypes.bool,
   onChange: PropTypes.func,
+  onClick: PropTypes.func,
   mx: PropTypes.number,
   my: PropTypes.number,
   m: PropTypes.number

diff --git a/src/components/atoms/Select/Select.tsx b/src/components/atoms/Select/Select.tsx
@@ -6,7 +6,7 @@ import { IoIosArrowDown } from 'react-icons/io'
 
 import { Box } from '../Box'
 import { Input } from '../Input'
-import { Button } from '../Button'
+import { Button, Props as ButtonProps } from '../Button'
 
 export interface Props {
   label?: string
@@ -50,9 +50,14 @@ const Container = styled(Box)<Props>`
   }
 `
 
-const ButtonStyled = styled(Button)<Props>`
+interface ButtonStyledProps extends ButtonProps {
+  variantSelect?: any
+}
+
+const ButtonStyled = styled(Button)<ButtonStyledProps>`
   position: absolute;
-  top: ${({ variant }) => (variant === 'outlined' ? '24px' : '12px')};
+  top: ${({ variantSelect }) =>
+    variantSelect === 'outlined' ? '18px' : '12px'};
   right: 14px;
 `
 
@@ -133,6 +138,7 @@ export const Select: React.FC<Props> = ({
           <ButtonStyled
             palette='primary'
             mr={5}
+            variantSelect={variant}
             refButton={getToggleButtonProps().ref}
             onClick={getToggleButtonProps().onClick}
             aria-label='toggle menu'

diff --git a/src/components/molecules/Container/Container.tsx b/src/components/molecules/Container/Container.tsx
@@ -35,7 +35,7 @@ export const Container: React.FC<Props> = ({
   if (title) {
     return (
       <StyledContainer {...props}>
-        <Text color='almostBlack' fontSize='xxlarge' p={10}>
+        <Text color='almostBlack' fontWeight='medium' fontSize='xxlarge' p={10}>
           {title}
         </Text>
 

diff --git a/src/components/molecules/Modal/Modal.tsx b/src/components/molecules/Modal/Modal.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import styled, { DefaultTheme, css } from 'styled-components'
-
+import { layout } from 'styled-system'
 import { Flex, Props as FlexProps } from '../../atoms/Flex'
 import { Button } from '../../atoms/Button'
 import { Text } from '../../atoms/Text'
@@ -114,6 +114,8 @@ const ModalStyled = styled(Flex)<ModalStyledProps>`
 
   ${({ variantModal }) => modalVariants[variantModal || 'medium']}
 
+  ${layout}
+
   &.hide {
     z-index: -1;
     opacity: 0;
@@ -218,7 +220,7 @@ export const Modal: React.FC<Props> = ({
           color='primary'
           fontSize='xlarge'
           fontWeight='semiBold'
-          marginBottom={variant !== 'alert' ? '44px' : '15px'}
+          marginBottom={variant !== 'alert' ? '30px' : '15px'}
         >
           {title}
         </Text>
@@ -233,7 +235,7 @@ export const Modal: React.FC<Props> = ({
                 fontWeight='medium'
                 onClick={handleCancel}
                 palette='primary'
-                variant='contained'
+                variant='outlined'
               >
                 {cancelButton.label}
               </Button>
@@ -243,7 +245,7 @@ export const Modal: React.FC<Props> = ({
                 onClick={handleOk}
                 fontWeight='medium'
                 palette='primary'
-                variant='outlined'
+                variant='contained'
               >
                 {okButton.label}
               </Button>

diff --git a/src/components/molecules/Table/Table.stories.tsx b/src/components/molecules/Table/Table.stories.tsx
@@ -5,7 +5,6 @@ import { TableHead } from './TableHead'
 import { TableRow } from './TableRow'
 import { TableCell } from './TableCell'
 import { TableBody } from './TableBody'
-import { TableCellHead } from './TableCellHead'
 
 import { Flex } from '../../atoms/Flex'
 import { Container } from '../Container'
@@ -63,9 +62,9 @@ export const Basic: React.FC = () => {
     <Flex variant='fullCentralized' backgroundColor='#F5F5F5'>
       <Table>
         <TableHead>
-          <TableCellHead>cód </TableCellHead>
-          <TableCellHead flex={1}>item</TableCellHead>
-          <TableCellHead>preço min.</TableCellHead>
+          <TableCell>cód </TableCell>
+          <TableCell flex={1}>item</TableCell>
+          <TableCell>preço min.</TableCell>
         </TableHead>
         <TableBody>
           {itens.map(item => (
@@ -87,9 +86,9 @@ export const WithScrollbar: React.FC = () => {
       <Table>
         <TableHead>
           <TableRow>
-            <TableCellHead>cód </TableCellHead>
-            <TableCellHead>item</TableCellHead>
-            <TableCellHead>preço min.</TableCellHead>
+            <TableCell>cód </TableCell>
+            <TableCell>item</TableCell>
+            <TableCell>preço min.</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -112,9 +111,9 @@ export const WithContainer: React.FC = () => {
       <Table>
         <TableHead>
           <TableRow>
-            <TableCellHead>cód </TableCellHead>
-            <TableCellHead>item</TableCellHead>
-            <TableCellHead>preço min.</TableCellHead>
+            <TableCell>cód </TableCell>
+            <TableCell>item</TableCell>
+            <TableCell>preço min.</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -137,9 +136,9 @@ export const OnlyTable: React.FC = () => {
       <Table>
         <TableHead>
           <TableRow>
-            <TableCellHead>cód </TableCellHead>
-            <TableCellHead>item</TableCellHead>
-            <TableCellHead>preço min.</TableCellHead>
+            <TableCell>cód </TableCell>
+            <TableCell>item</TableCell>
+            <TableCell>preço min.</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>

diff --git a/src/components/molecules/Table/Table.test.tsx b/src/components/molecules/Table/Table.test.tsx
@@ -7,7 +7,6 @@ import { TableHead } from './TableHead'
 import { TableRow } from './TableRow'
 import { TableCell } from './TableCell'
 import { TableBody } from './TableBody'
-import { TableCellHead } from './TableCellHead'
 
 import { Flex } from '../../atoms/Flex'
 
@@ -61,9 +60,9 @@ describe('must match with the previous snapshot', () => {
         <Table>
           <TableHead>
             <TableRow>
-              <TableCellHead>cód </TableCellHead>
-              <TableCellHead>item</TableCellHead>
-              <TableCellHead>preço min.</TableCellHead>
+              <TableCell>cód </TableCell>
+              <TableCell>item</TableCell>
+              <TableCell>preço min.</TableCell>
             </TableRow>
           </TableHead>
           <TableBody>

diff --git a/src/components/molecules/Table/TableCell.tsx b/src/components/molecules/Table/TableCell.tsx
@@ -13,7 +13,6 @@ export interface TableCellProps {
 const TableCellStyled = styled(Flex)`
   padding: 0 10px;
   font-size: medium;
-  justify-content: start;
 `
 
 export const TableCell: React.FC<TableCellProps> = ({