From 5f421a2d32c7ba9d8db7fa7334846b882de943e7 Mon Sep 17 00:00:00 2001 From: Juliano Sirtori Date: Tue, 25 Aug 2020 11:29:17 -0300 Subject: [PATCH 1/9] fix modal --- src/components/molecules/Modal/Modal.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/molecules/Modal/Modal.tsx b/src/components/molecules/Modal/Modal.tsx index c1e83d88..3d786f23 100644 --- 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)` ${({ variantModal }) => modalVariants[variantModal || 'medium']} + ${layout} + &.hide { z-index: -1; opacity: 0; @@ -218,7 +220,7 @@ export const Modal: React.FC = ({ color='primary' fontSize='xlarge' fontWeight='semiBold' - marginBottom={variant !== 'alert' ? '44px' : '15px'} + marginBottom={variant !== 'alert' ? '30px' : '15px'} > {title} @@ -233,7 +235,7 @@ export const Modal: React.FC = ({ fontWeight='medium' onClick={handleCancel} palette='primary' - variant='contained' + variant='outlined' > {cancelButton.label} @@ -243,7 +245,7 @@ export const Modal: React.FC = ({ onClick={handleOk} fontWeight='medium' palette='primary' - variant='outlined' + variant='contained' > {okButton.label} From a67a615303257756b5e4caefb980d5511fc7f8e7 Mon Sep 17 00:00:00 2001 From: Juliano Sirtori Date: Tue, 25 Aug 2020 11:29:32 -0300 Subject: [PATCH 2/9] fix title container --- src/components/molecules/Container/Container.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/molecules/Container/Container.tsx b/src/components/molecules/Container/Container.tsx index c311946a..f0ef9340 100644 --- a/src/components/molecules/Container/Container.tsx +++ b/src/components/molecules/Container/Container.tsx @@ -35,7 +35,7 @@ export const Container: React.FC = ({ if (title) { return ( - + {title} From 26344cf43ea0557373974d737ede12062576836a Mon Sep 17 00:00:00 2001 From: Juliano Sirtori Date: Tue, 25 Aug 2020 11:37:51 -0300 Subject: [PATCH 3/9] fix color radio --- src/components/atoms/Radio/Radio.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/atoms/Radio/Radio.tsx b/src/components/atoms/Radio/Radio.tsx index 3a3ea0cf..d400de59 100644 --- a/src/components/atoms/Radio/Radio.tsx +++ b/src/components/atoms/Radio/Radio.tsx @@ -50,7 +50,7 @@ const RadioStyled = styled.label` height: 20px; width: 20px; border-radius: 50%; - border: 2px solid #eb2f96; + border: 2px solid ${({ theme }) => theme.colors.primary}; } input:checked ~ span { @@ -73,7 +73,7 @@ const RadioStyled = styled.label` width: 10px; height: 10px; border-radius: 50%; - background-color: #eb2f96; + background-color: ${({ theme }) => theme.colors.primary}; } ` From 033756b86bcab4be4c42dea8df1c7c0765a5e413 Mon Sep 17 00:00:00 2001 From: Juliano Sirtori Date: Tue, 25 Aug 2020 11:38:09 -0300 Subject: [PATCH 4/9] fix position button when outlined --- src/components/atoms/Select/Select.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/atoms/Select/Select.tsx b/src/components/atoms/Select/Select.tsx index 44711356..18abd579 100644 --- 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)` } ` -const ButtonStyled = styled(Button)` +interface ButtonStyledProps extends ButtonProps { + variantSelect?: any +} + +const ButtonStyled = styled(Button)` 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 = ({ Date: Tue, 25 Aug 2020 11:38:45 -0300 Subject: [PATCH 5/9] fix checkbox --- src/components/atoms/Checkbox/Checkbox.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/atoms/Checkbox/Checkbox.tsx b/src/components/atoms/Checkbox/Checkbox.tsx index 5132e240..04a92ac2 100644 --- a/src/components/atoms/Checkbox/Checkbox.tsx +++ b/src/components/atoms/Checkbox/Checkbox.tsx @@ -1,7 +1,7 @@ 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 @@ -9,6 +9,12 @@ export interface Props extends DefaultTheme { } const CheckboxStyled = styled.div` + ${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 = ({ } return ( - + From 07dc4f502da7ed8b577b0930b7b591f6c792101a Mon Sep 17 00:00:00 2001 From: Juliano Sirtori Date: Tue, 25 Aug 2020 13:24:06 -0300 Subject: [PATCH 6/9] add prop onClick on Radio component --- src/components/atoms/Radio/Radio.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/atoms/Radio/Radio.tsx b/src/components/atoms/Radio/Radio.tsx index d400de59..4828b017 100644 --- 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 { @@ -85,6 +86,9 @@ export const Radio: React.FC = ({ onChange = () => { // do nothing. }, + onClick = () => { + // do nothing. + }, ...props }) => { const [isChecked, setIsChecked] = useState(checked) @@ -101,6 +105,7 @@ export const Radio: React.FC = ({ 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 From e24da567f6d782ab37782603a554f2c9796ace4a Mon Sep 17 00:00:00 2001 From: Felipe Maccari Date: Tue, 25 Aug 2020 14:39:58 -0300 Subject: [PATCH 7/9] fix(aiq-design-system): fix table cells --- .../molecules/Table/Table.stories.tsx | 25 +++++++------- src/components/molecules/Table/Table.test.tsx | 7 ++-- src/components/molecules/Table/TableCell.tsx | 1 - .../molecules/Table/TableCellHead.tsx | 34 ------------------- src/components/molecules/Table/TableRow.tsx | 1 + src/components/molecules/Table/index.tsx | 1 - src/index.tsx | 3 +- 7 files changed, 17 insertions(+), 55 deletions(-) delete mode 100644 src/components/molecules/Table/TableCellHead.tsx diff --git a/src/components/molecules/Table/Table.stories.tsx b/src/components/molecules/Table/Table.stories.tsx index 5be5e685..b5716d43 100644 --- 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 = () => { - cód - item - preço min. + cód + item + preço min. {itens.map(item => ( @@ -87,9 +86,9 @@ export const WithScrollbar: React.FC = () => {
- cód - item - preço min. + cód + item + preço min. @@ -112,9 +111,9 @@ export const WithContainer: React.FC = () => {
- cód - item - preço min. + cód + item + preço min. @@ -137,9 +136,9 @@ export const OnlyTable: React.FC = () => {
- cód - item - preço min. + cód + item + preço min. diff --git a/src/components/molecules/Table/Table.test.tsx b/src/components/molecules/Table/Table.test.tsx index 0416791d..76589959 100644 --- 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', () => {
- cód - item - preço min. + cód + item + preço min. diff --git a/src/components/molecules/Table/TableCell.tsx b/src/components/molecules/Table/TableCell.tsx index 15f56539..c9da2dc7 100644 --- 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 = ({ diff --git a/src/components/molecules/Table/TableCellHead.tsx b/src/components/molecules/Table/TableCellHead.tsx deleted file mode 100644 index 48369ac3..00000000 --- a/src/components/molecules/Table/TableCellHead.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React, { ReactNode } from 'react' -import PropTypes from 'prop-types' - -import styled from 'styled-components' - -import { Flex } from '../../atoms/Flex' - -export interface TableCellHeadProps { - flex?: number - children: ReactNode -} - -const TableCellHeadStyled = styled(Flex)` - padding: 0 10px; - color: grey; - font-size: small; -` - -export const TableCellHead: React.FC = ({ - children, - flex, - ...props -}) => { - return ( - - {children} - - ) -} - -TableCellHead.propTypes = { - children: PropTypes.node, - flex: PropTypes.number -} diff --git a/src/components/molecules/Table/TableRow.tsx b/src/components/molecules/Table/TableRow.tsx index 6206e15a..b304421e 100644 --- a/src/components/molecules/Table/TableRow.tsx +++ b/src/components/molecules/Table/TableRow.tsx @@ -15,6 +15,7 @@ const TableRowStyled = styled(Flex)` padding: 20px 0; cursor: pointer; border-bottom: 1px solid ${({ theme }) => theme.colors.mediumGrey}; + flex: 1; &:last-child { border-bottom: none; diff --git a/src/components/molecules/Table/index.tsx b/src/components/molecules/Table/index.tsx index 1167f6ef..73cb3821 100644 --- a/src/components/molecules/Table/index.tsx +++ b/src/components/molecules/Table/index.tsx @@ -1,6 +1,5 @@ export * from './Table' export * from './TableBody' export * from './TableCell' -export * from './TableCellHead' export * from './TableHead' export * from './TableRow' diff --git a/src/index.tsx b/src/index.tsx index 3df0b2ff..405b5e33 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -16,7 +16,7 @@ export { Select } from './components/atoms/Select' export { Switch } from './components/atoms/Switch' export { Text } from './components/atoms/Text' -export { Breadcrumb } from './components/molecules/Breadcrumb' +export { Breadcrumb, BreadcrumbItem } from './components/molecules/Breadcrumb' export { Container } from './components/molecules/Container' export { DatePickerRange } from './components/molecules/DatePickerRange' export { DatePickerSingle } from './components/molecules/DatePickerSingle' @@ -32,7 +32,6 @@ export { TableBody, TableHead, TableRow, - TableCellHead, TableCell } from './components/molecules/Table' From 177ef23b8ebb100eb8daf433a381794075437213 Mon Sep 17 00:00:00 2001 From: Juliano Sirtori Date: Tue, 25 Aug 2020 17:26:29 -0300 Subject: [PATCH 8/9] fix props input --- src/components/atoms/Input/InputOutlined.tsx | 44 ++++++++++++++++---- 1 file changed, 37 insertions(+), 7 deletions(-) diff --git a/src/components/atoms/Input/InputOutlined.tsx b/src/components/atoms/Input/InputOutlined.tsx index 8d0f4dc0..7f124542 100644 --- 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 { +export interface Props + extends InputHTMLAttributes, + SpaceProps { name?: string inputRef?: any label?: string @@ -19,9 +29,12 @@ export interface Props extends InputHTMLAttributes { 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 = ({ errorMessage, sufix, value, + backgroundColor, + maxWidth, + marginRight, + marginLeft, + ...props }) => { const [showPassword, setShowPassword] = useState(false) + const styledContainer = { + backgroundColor, + maxWidth, + marginRight, + marginLeft + } + if (type === 'password') { return ( - + = ({ if (sufix) { return ( - + = ({ } return ( - + Date: Tue, 25 Aug 2020 18:57:33 -0300 Subject: [PATCH 9/9] up version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 03f98176..49b5beaf 100644 --- 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": "git@github.com:aiqfome/aiq-design-system.git", "license": "MIT",