diff --git a/library/data/dataTableExamples.js b/library/data/dataTableExamples.js new file mode 100644 index 000000000..dfbca3c55 --- /dev/null +++ b/library/data/dataTableExamples.js @@ -0,0 +1,249 @@ +export const DataTable = [ + { + name: 'Leandro Torres', + company: 'nexxtway', + email: 'leandro@gmail.com', + status: 'verified', + id: '1234qwerty', + }, + { + name: 'Jose Torres', + company: 'Google', + email: 'jose@gmail.com', + status: 'verified', + id: '1234asdfgh', + }, + { + name: 'Reinier', + company: 'Nexxtway', + email: 'reinier@gmail.com', + status: 'verified', + id: '1234zxcvbn', + }, + { + name: 'Sara', + company: 'Nexxtway', + email: 'sara@gmail.com', + status: 'verified', + id: '5678qwerty', + }, + { + name: 'Tahimi', + company: 'nexxtway', + email: 'tahimi@gmail.com', + status: 'verified', + id: '5678asdfgh', + }, + { + name: 'Carlos', + company: 'Oracle', + email: 'carlos@gmail.com', + status: 'verified', + id: '5678zxcvbn', + }, + { + name: 'Andy', + company: 'Oracle', + email: 'andy@gmail.com', + status: 'verified', + id: '9012qwerty', + }, + { + name: 'Luis', + company: 'Google', + email: 'luis@gmail.com', + status: 'verified', + id: '9012asdfgh', + }, +]; + +export const DynamicDataTable = [ + { + name: 'Leandro Torres', + company: 'nexxtway', + email: 'leandro@gmail.com', + status: 'verified', + id: '1234qwerty', + link: '#', + }, + { + name: 'Jose Torres', + company: 'Google', + email: 'jose@gmail.com', + status: 'pending', + id: '1234asdfgh', + link: '#', + }, + { + name: 'Reinier', + company: 'nexxtway', + email: 'reinier@gmail.com', + status: 'verified', + id: '1234zxcvbn', + link: '#', + }, + { + name: 'Sara', + company: 'nexxtway', + email: 'sara@gmail.com', + status: 'pending', + id: '5678qwerty', + link: '#', + }, + { + name: 'Tahimi', + company: 'nexxtway', + email: 'tahimi@gmail.com', + status: 'verified', + id: '5678asdfgh', + link: '#', + }, + { + name: 'Leo', + company: 'nexxtway', + email: 'leo@gmail.com', + status: 'verified', + id: '5678zxcvbn', + link: '#', + }, + { + name: 'Tahimi Leon', + company: 'nexxtway', + email: 'leon@nexxtway.com', + status: 'verified', + id: '9012qwerty', + link: '#', + }, + { + name: 'Alejandro', + company: 'Google', + email: 'alejandro@gmail.com', + status: 'pending', + id: '5678zdfgdf', + link: '#', + }, + { + name: 'Carlos', + company: 'Oracle', + email: 'carlos@gmail.com', + status: 'verified', + id: '3434fgfgdf', + link: '#', + }, + { + name: 'Luis', + company: 'Google', + email: 'luis@gmail.com', + status: 'verified', + id: '9012asdfgh', + link: '#', + }, +]; + +export const ActionsDataTable = [ + { + name: 'Leandro Torres', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.', + id: '1234qwerty', + }, + { + name: 'Jose Torres', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.', + id: '1234asdfgh', + }, + { + name: 'Reinier', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.', + id: '1234zxcvbn', + }, + { + name: 'Sara', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.', + id: '5678qwerty', + }, + { + name: 'Tahimi', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.', + id: '5678asdfgh', + }, + { + name: 'Leo', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.', + id: '5678zxcvbn', + }, + { + name: 'Tahimi Leon', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.', + id: '9012qwerty', + }, + { + name: 'Alejandro', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.', + id: '5678zdfgdf', + }, + { + name: 'Carlos', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.', + id: '3434fgfgdf', + }, + { + name: 'Luis', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.', + id: '9012asdfgh', + }, +]; + +export const ListviewDataTable = [ + { + task: 'fix: keyboard navigation on Tree.', + coins: 2, + constributor: 'yvmunayev@gmail.com', + priority: 2, + id: '1234qwerty', + }, + { + task: 'feat: implement Notification Manager', + coins: 4, + constributor: 'yvmunayev@gmail.com', + priority: 2, + id: '1234asdfgh', + }, + { + task: 'test: InternalDropdown.', + coins: 2, + constributor: 'yvmunayev@gmail.com', + priority: 2, + id: '1234zxcvbn', + }, + { + task: 'feat: implement MultiSelect.', + coins: 8, + constributor: 'yvmunayev@gmail.com', + priority: 2, + id: '5678qwerty', + }, + { + task: 'fix: position resolver on InternalOverlay', + coins: 8, + constributor: 'yvmunayev@gmail.com', + priority: 1, + id: '5678asdfgh', + }, + { + task: 'refactor: ButtonMenu component.', + coins: 8, + constributor: 'yvmunayev@gmail.com', + priority: 0, + id: '5278aswegh', + }, +]; diff --git a/library/setup.js b/library/setup.js index a9dc383b7..303f53370 100644 --- a/library/setup.js +++ b/library/setup.js @@ -31,6 +31,12 @@ import SettingsIcon from './exampleComponents/Icons/settings'; import CompanyIcon from './exampleComponents/Icons/company'; import AdvancedSettingsIcon from './exampleComponents/Icons/advancedSettings'; import Users from './data/users'; +import { + DataTable, + DynamicDataTable, + ActionsDataTable, + ListviewDataTable, +} from './data/dataTableExamples'; import GitHubIcon from './exampleComponents/Icons/gitHub'; import LinkedinIcon from './exampleComponents/Icons/linkedin'; import TrashIcon from './exampleComponents/Icons/trash'; @@ -110,6 +116,10 @@ global.SettingsIcon = SettingsIcon; global.CompanyIcon = CompanyIcon; global.AdvancedSettingsIcon = AdvancedSettingsIcon; global.Users = Users; +global.DataTable = DataTable; +global.DynamicDataTable = DynamicDataTable; +global.ActionsDataTable = ActionsDataTable; +global.ListviewDataTable = ListviewDataTable; global.GitHubIcon = GitHubIcon; global.LinkedinIcon = LinkedinIcon; global.TrashIcon = TrashIcon; diff --git a/library/styleguideComponents/ReactComponent/styles.css b/library/styleguideComponents/ReactComponent/styles.css index 948c92051..ac52ca344 100644 --- a/library/styleguideComponents/ReactComponent/styles.css +++ b/library/styleguideComponents/ReactComponent/styles.css @@ -77,3 +77,8 @@ margin: 40px 20px 0 0; min-width: 330px; } + +.rsg--heading1-6{ + font-size: 1.2rem; + color: #061C3F; +} diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js index b2318ab43..cd6b45e27 100644 --- a/src/components/DatePicker/index.js +++ b/src/components/DatePicker/index.js @@ -7,6 +7,10 @@ import useFormatDate from './hooks/useFormatDate'; import DatePickerModal from '../DatePickerModal'; import { StyledContainer, StyledInput } from './styled'; +/** + * The DatePicker is used to select a specific day or a range of days on a calendar. + * @category Form + */ const DatePicker = React.forwardRef((props, ref) => { const { value, diff --git a/src/components/Input/readme.md b/src/components/Input/readme.md index ec2b227e8..0e9bb60c8 100644 --- a/src/components/Input/readme.md +++ b/src/components/Input/readme.md @@ -461,3 +461,29 @@ const inputStyles = { /> ``` +# Input with a set value +##### This example shows an input base with a value controlled through a state and an initial value set by default. + +```js +import React, { useState } from 'react'; +import { Input } from 'react-rainbow-components'; + +const [ value, setValue ] = useState('John Doe'); + +const handleChange = (e) => { + setValue(e.target.value) +} + +const containerStyles = { + maxWidth: 700, +}; + + +``` diff --git a/src/components/Table/readme.md b/src/components/Table/readme.md index 543e6d815..f890fa9fe 100644 --- a/src/components/Table/readme.md +++ b/src/components/Table/readme.md @@ -6,44 +6,6 @@ import { Table, Column, ButtonGroup, ButtonIcon, Badge } from 'react-rainbow-com import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCog, faEllipsisV } from '@fortawesome/free-solid-svg-icons'; -const data = [ - { - name: 'Leandro Torres', - company: 'Nexxtway', - email: 'leandro@gmail.com', - status: 'verified', - id: '1234qwerty', - }, - { - name: 'Jose Torres', - company: 'Google', - email: 'jose@gmail.com', - status: 'verified', - id: '1234asdfgh', - }, - { - name: 'Reinier', - company: 'Nexxtway', - email: 'reinier@gmail.com', - status: 'verified', - id: '1234zxcvbn', - }, - { - name: 'Sara', - company: 'Nexxtway', - email: 'sara@gmail.com', - status: 'verified', - id: '5678qwerty', - }, - { - name: 'Tahimi', - company: 'Nexxtway', - email: 'tahimi@gmail.com', - status: 'verified', - id: '5678asdfgh', - }, -]; - const badgeStyles = { color: '#1de9b6' }; const StatusBadge = ({ value }) => ; @@ -59,7 +21,7 @@ const StatusBadge = ({ value }) => - +
@@ -76,6 +38,7 @@ import { Table, Column, ButtonGroup, ButtonIcon, Badge } from 'react-rainbow-com import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCog, faEllipsisV } from '@fortawesome/free-solid-svg-icons'; + const badgeStyles = { color: '#1de9b6' }; const tableContainerStyles = { height: 300 }; @@ -87,64 +50,7 @@ class TableExample extends React.Component { this.state = { sortedBy: undefined, sortDirection: 'asc', - data: [ - { - name: 'Leandro Torres', - company: 'Nexxtway', - email: 'leandro@gmail.com', - status: 'verified', - id: '1234qwerty', - }, - { - name: 'Reinier', - company: 'Nexxtway', - email: 'reinier@gmail.com', - status: 'verified', - id: '1234asdfgh', - }, - { - name: 'Jose Torres', - company: 'Google', - email: 'jose@gmail.com', - status: 'verified', - id: '1234zxcvbn', - }, - { - name: 'Sara', - company: 'Nexxtway', - email: 'sara@gmail.com', - status: 'verified', - id: '5678qwerty', - }, - { - name: 'Tahimi', - company: 'Nexxtway', - email: 'tahimi@gmail.com', - status: 'verified', - id: '5678asdfgh', - }, - { - name: 'Alejandro', - company: 'Google', - email: 'alejandro@gmail.com', - status: 'verified', - id: '5678zxcvbn', - }, - { - name: 'Carlos', - company: 'Oracle', - email: 'carlos@gmail.com', - status: 'verified', - id: '9012qwerty', - }, - { - name: 'Luis', - company: 'Google', - email: 'luis@gmail.com', - status: 'verified', - id: '9012asdfgh', - }, - ], + data: DataTable, }; this.handleOnSort = this.handleOnSort.bind(this); } @@ -216,57 +122,7 @@ import { faCog, faEllipsisV } from '@fortawesome/free-solid-svg-icons'; const badgeStyles = { color: '#1de9b6' }; const StatusBadge = ({ value }) => ; -const data = [ - { - name: 'Leandro Torres', - company: 'nexxtway', - email: 'leandro@gmail.com', - status: 'verified', - id: '1234qwerty', - }, - { - name: 'Jose Torres', - company: 'Google', - email: 'jose@gmail.com', - status: 'verified', - id: '1234asdfgh', - }, - { - name: 'Reinier', - company: 'Nexxtway', - email: 'reinier@gmail.com', - status: 'verified', - id: '1234zxcvbn', - }, - { - name: 'Sara', - company: 'Nexxtway', - email: 'sara@gmail.com', - status: 'verified', - id: '5678qwerty', - }, - { - name: 'Tahimi', - company: 'nexxtway', - email: 'tahimi@gmail.com', - status: 'verified', - id: '5678asdfgh', - }, - { - name: 'Leo', - company: 'nexxtway', - email: 'leo@gmail.com', - status: 'verified', - id: '5678zxcvbn', - }, - { - name: 'Tahimi Leon', - company: 'nexxtway', - email: 'leon@nexxtway.com', - status: 'verified', - id: '9012qwerty', - }, -]; + class TableExample extends React.Component { constructor(props) { @@ -282,7 +138,7 @@ class TableExample extends React.Component { () => this.setState({ isLoading: false, - data, + data:DataTable, }), 2000, ); @@ -335,58 +191,6 @@ import { Table, Column, ButtonGroup, ButtonIcon, Badge } from 'react-rainbow-com import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCog, faEllipsisV } from '@fortawesome/free-solid-svg-icons'; -const data = [ - { - name: 'Leandro Torres', - company: 'nexxtway', - email: 'leandro@gmail.com', - status: 'verified', - id: '1234qwerty', - }, - { - name: 'Jose Torres', - company: 'Google', - email: 'jose@gmail.com', - status: 'verified', - id: '1234asdfgh', - }, - { - name: 'Reinier', - company: 'Nexxtway', - email: 'reinier@gmail.com', - status: 'verified', - id: '1234zxcvbn', - }, - { - name: 'Sara', - company: 'Nexxtway', - email: 'sara@gmail.com', - status: 'verified', - id: '5678qwerty', - }, - { - name: 'Tahimi', - company: 'nexxtway', - email: 'tahimi@gmail.com', - status: 'verified', - id: '5678asdfgh', - }, - { - name: 'Leo', - company: 'nexxtway', - email: 'leo@gmail.com', - status: 'verified', - id: '5678zxcvbn', - }, - { - name: 'Tahimi Leon', - company: 'nexxtway', - email: 'leon@nexxtway.com', - status: 'verified', - id: '9012qwerty', - }, -]; - const badgeStyles = { color: '#1de9b6' }; const StatusBadge = ({ value }) => ; @@ -406,7 +210,7 @@ const StatusBadge = ({ value }) => console.log(data)} @@ -427,44 +231,6 @@ import { Table, Column, ButtonGroup, ButtonIcon, Badge } from 'react-rainbow-com import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCog, faEllipsisV } from '@fortawesome/free-solid-svg-icons'; -const data = [ - { - name: 'Leandro Torres', - company: 'nexxtway', - email: 'leandro@gmail.com', - status: 'verified', - id: '1234qwerty', - }, - { - name: 'Jose Torres', - company: 'Google', - email: 'jose@gmail.com', - status: 'verified', - id: '1234asdfgh', - }, - { - name: 'Reinier', - company: 'Nexxtway', - email: 'reinier@gmail.com', - status: 'verified', - id: '1234zxcvbn', - }, - { - name: 'Sara', - company: 'Nexxtway', - email: 'sara@gmail.com', - status: 'verified', - id: '5678qwerty', - }, - { - name: 'Tahimi', - company: 'nexxtway', - email: 'tahimi@gmail.com', - status: 'verified', - id: '5678asdfgh', - }, -]; - const badgeStyles = { color: '#1de9b6' }; const StatusBadge = ({ value }) => ; @@ -484,7 +250,7 @@ const StatusBadge = ({ value }) => console.log(data)} > @@ -504,50 +270,6 @@ import { Table, Column, ButtonGroup, ButtonIcon, Badge, MenuItem } from 'react-r import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCog, faEllipsisV } from '@fortawesome/free-solid-svg-icons'; -const data = [ - { - name: 'Leandro Torres', - company: 'nexxtway', - email: 'leandro@gmail.com', - status: 'verified', - id: '1234qwerty', - }, - { - name: 'Jose Torres', - company: 'Google', - email: 'jose@gmail.com', - status: 'verified', - id: '1234asdfgh', - }, - { - name: 'Reinier', - company: 'Nexxtway', - email: 'reinier@gmail.com', - status: 'verified', - id: '1234zxcvbn', - }, - { - name: 'Sara', - company: 'Nexxtway', - email: 'sara@gmail.com', - status: 'verified', - id: '5678qwerty', - }, - { - name: 'Tahimi', - company: 'nexxtway', - email: 'tahimi@gmail.com', - status: 'verified', - id: '5678asdfgh', - }, - { - name: 'Carlos', - company: 'Oracle', - email: 'carlos@gmail.com', - status: 'verified', - id: '5678zxcvbn', - }, -]; const badgeStyles = { color: '#1de9b6' }; @@ -564,7 +286,7 @@ const StatusBadge = ({ value }) => -
+
@@ -577,6 +299,71 @@ const StatusBadge = ({ value }) => ``` +##### Table with dynamic row actions + +```js +import React from 'react'; +import { Table, Column, ButtonMenu, ButtonGroup, ButtonIcon, Badge, MenuItem } from 'react-rainbow-components'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faCog, faEllipsisV } from '@fortawesome/free-solid-svg-icons'; + + +const StatusBadge = ({ value }) => { + if (value === 'verified') { + return ; + } + return ; +}; + +const MenuAction = ({value,name}) => { + if(value === 'verified'){ + return + } + return ( + <> + console.log(`Delete ${name}`)}/> + console.log(`Edit ${name}`)}/> + + ); +}; + +const ButtonAction = (props) => { + const {value, row:{name}}=props; + return ( + } + buttonVariant="base" + > + + + ); + +} + +
+ + + } /> + } + /> + + +
+ + + + + +
+ +``` + ##### Table with enumerates row ```js @@ -585,43 +372,6 @@ import { Table, Column, ButtonGroup, ButtonIcon, Badge } from 'react-rainbow-com import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCog, faEllipsisV } from '@fortawesome/free-solid-svg-icons'; -const data = [ - { - name: 'Leandro Torres', - company: 'Nexxtway', - email: 'leandro@gmail.com', - status: 'verified', - id: '1234qwerty', - }, - { - name: 'Jose Torres', - company: 'Google', - email: 'jose@gmail.com', - status: 'verified', - id: '1234asdfgh', - }, - { - name: 'Reinier', - company: 'Nexxtway', - email: 'reinier@gmail.com', - status: 'verified', - id: '1234zxcvbn', - }, - { - name: 'Sara', - company: 'Nexxtway', - email: 'sara@gmail.com', - status: 'verified', - id: '5678qwerty', - }, - { - name: 'Tahimi', - company: 'Nexxtway', - email: 'tahimi@gmail.com', - status: 'verified', - id: '5678asdfgh', - }, -]; const badgeStyles = { color: '#1de9b6' }; @@ -638,7 +388,7 @@ const StatusBadge = ({ value }) => - +
@@ -736,88 +486,7 @@ const StatusBadge = ({ value }) => { return ; }; -const initialData = [ - { - name: 'Leandro Torres', - company: 'nexxtway', - email: 'leandro@gmail.com', - status: 'verified', - id: '1234qwerty', - link: '#', - }, - { - name: 'Jose Torres', - company: 'Google', - email: 'jose@gmail.com', - status: 'pending', - id: '1234asdfgh', - link: '#', - }, - { - name: 'Reinier', - company: 'nexxtway', - email: 'reinier@gmail.com', - status: 'verified', - id: '1234zxcvbn', - link: '#', - }, - { - name: 'Sara', - company: 'nexxtway', - email: 'sara@gmail.com', - status: 'verified', - id: '5678qwerty', - link: '#', - }, - { - name: 'Tahimi', - company: 'nexxtway', - email: 'tahimi@gmail.com', - status: 'verified', - id: '5678asdfgh', - link: '#', - }, - { - name: 'Leo', - company: 'nexxtway', - email: 'leo@gmail.com', - status: 'verified', - id: '5678zxcvbn', - link: '#', - }, - { - name: 'Tahimi Leon', - company: 'nexxtway', - email: 'leon@nexxtway.com', - status: 'verified', - id: '9012qwerty', - link: '#', - }, - { - name: 'Alejandro', - company: 'Google', - email: 'alejandro@gmail.com', - status: 'verified', - id: '5678zdfgdf', - link: '#', - }, - { - name: 'Carlos', - company: 'Oracle', - email: 'carlos@gmail.com', - status: 'verified', - id: '3434fgfgdf', - link: '#', - }, - { - name: 'Luis', - company: 'Google', - email: 'luis@gmail.com', - status: 'verified', - id: '9012asdfgh', - link: '#', - }, -]; + const Title = styled.h1.attrs(props => props.theme.rainbow)` font-family: 'Lato Light'; @@ -845,7 +514,7 @@ const StyledLink = styled.a.attrs(props => props.theme.rainbow)` const ProfileLink = ({ value, row }) => {value}; function TableExample() { - const [data, setData] = useState(initialData); + const [data, setData] = useState(DynamicDataTable); const [sortedBy, setSortedBy] = useState(); const [sortDirection, setSortDirection] = useState('asc'); const [selection, setSelection] = useState([]); @@ -926,68 +595,6 @@ import { Table, Column, ButtonGroup, ButtonIcon } from 'react-rainbow-components import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faEllipsisV, faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons'; -const initialData = [ - { - name: 'Leandro Torres', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.', - id: '1234qwerty', - }, - { - name: 'Jose Torres', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.', - id: '1234asdfgh', - }, - { - name: 'Reinier', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.', - id: '1234zxcvbn', - }, - { - name: 'Sara', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.', - id: '5678qwerty', - }, - { - name: 'Tahimi', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.', - id: '5678asdfgh', - }, - { - name: 'Leo', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.', - id: '5678zxcvbn', - }, - { - name: 'Tahimi Leon', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.', - id: '9012qwerty', - }, - { - name: 'Alejandro', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.', - id: '5678zdfgdf', - }, - { - name: 'Carlos', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.', - id: '3434fgfgdf', - }, - { - name: 'Luis', - description: - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.', - id: '9012asdfgh', - }, -]; const Title = styled.h1.attrs(props => props.theme.rainbow)` font-family: 'Lato Light'; font-size: 25px; @@ -1022,7 +629,7 @@ const WrapDescription = styled.p` `; function TableCustomAction() { - const [data, setData] = useState(initialData); + const [data, setData] = useState(ActionsDataTable); function handleDeleteElement(id) { const newData = data.filter(e => e.id !== id); @@ -1077,43 +684,6 @@ import { Table, Column, ButtonGroup, ButtonIcon, Badge } from 'react-rainbow-com import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCog, faEllipsisV } from '@fortawesome/free-solid-svg-icons'; -const data = [ - { - name: 'Leandro Torres', - company: 'Nexxtway', - email: 'leandro@gmail.com', - status: 'verified', - id: '1234qwerty', - }, - { - name: 'Jose Torres', - company: 'Google', - email: 'jose@gmail.com', - status: 'verified', - id: '1234asdfgh', - }, - { - name: 'Reinier', - company: 'Nexxtway', - email: 'reinier@gmail.com', - status: 'verified', - id: '1234zxcvbn', - }, - { - name: 'Sara', - company: 'Nexxtway', - email: 'sara@gmail.com', - status: 'verified', - id: '5678qwerty', - }, - { - name: 'Tahimi', - company: 'Nexxtway', - email: 'tahimi@gmail.com', - status: 'verified', - id: '5678asdfgh', - }, -]; const columnsNames = ['name', 'status', 'company', 'email']; @@ -1132,7 +702,7 @@ const StatusBadge = ({ value }) => -
+
{columnsNames.map(item => { if (item === 'status') { return ; @@ -1153,50 +723,6 @@ import { Table, Column, ButtonGroup, ButtonIcon, Avatar } from 'react-rainbow-co import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCog, faEllipsisV } from '@fortawesome/free-solid-svg-icons'; -const initialData = [ - { - task: 'fix: keyboard navigation on Tree.', - coins: 2, - constributor: 'yvmunayev@gmail.com', - priority: 2, - id: '1234qwerty', - }, - { - task: 'feat: implement Notification Manager', - coins: 4, - constributor: 'yvmunayev@gmail.com', - priority: 2, - id: '1234asdfgh', - }, - { - task: 'test: InternalDropdown.', - coins: 2, - constributor: 'yvmunayev@gmail.com', - priority: 2, - id: '1234zxcvbn', - }, - { - task: 'feat: implement MultiSelect.', - coins: 8, - constributor: 'yvmunayev@gmail.com', - priority: 2, - id: '5678qwerty', - }, - { - task: 'fix: position resolver on InternalOverlay', - coins: 8, - constributor: 'yvmunayev@gmail.com', - priority: 1, - id: '5678asdfgh', - }, - { - task: 'refactor: ButtonMenu component.', - coins: 8, - constributor: 'yvmunayev@gmail.com', - priority: 0, - id: '5278aswegh', - }, -]; const Container = styled.div` padding: 0 2rem; @@ -1266,7 +792,7 @@ const Priority = ({ value }) => { }; function TableListView() { - const [data, setData] = useState(initialData); + const [data, setData] = useState(ListviewDataTable); const [sortedBy, setSortedBy] = useState(); const [sortDirection, setSortDirection] = useState('asc'); @@ -1349,50 +875,6 @@ import { Table, Column, ButtonGroup, ButtonIcon, Avatar } from 'react-rainbow-co import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCog, faEllipsisV } from '@fortawesome/free-solid-svg-icons'; -const initialData = [ - { - task: 'fix: keyboard navigation on Tree.', - coins: 2, - constributor: 'yvmunayev@gmail.com', - priority: 2, - id: '1234qwerty', - }, - { - task: 'feat: implement Notification Manager', - coins: 4, - constributor: 'yvmunayev@gmail.com', - priority: 2, - id: '1234asdfgh', - }, - { - task: 'test: InternalDropdown.', - coins: 2, - constributor: 'yvmunayev@gmail.com', - priority: 2, - id: '1234zxcvbn', - }, - { - task: 'feat: implement MultiSelect.', - coins: 8, - constributor: 'yvmunayev@gmail.com', - priority: 2, - id: '5678qwerty', - }, - { - task: 'fix: position resolver on InternalOverlay', - coins: 8, - constributor: 'yvmunayev@gmail.com', - priority: 1, - id: '5678asdfgh', - }, - { - task: 'refactor: ButtonMenu component.', - coins: 8, - constributor: 'yvmunayev@gmail.com', - priority: 0, - id: '5278aswegh', - }, -]; const Container = styled.div` padding: 0 2rem; @@ -1462,7 +944,7 @@ const Priority = ({ value }) => { }; function TableListView() { - const [data, setData] = useState(initialData); + const [data, setData] = useState(ListviewDataTable); const [sortedBy, setSortedBy] = useState(); const [sortDirection, setSortDirection] = useState('asc'); diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js index 562f27fe3..3d0f1ce35 100644 --- a/src/components/Textarea/index.js +++ b/src/components/Textarea/index.js @@ -22,6 +22,10 @@ class Textarea extends Component { this.textareaId = uniqueId('textarea'); this.inlineTextLabelId = uniqueId('inline-text-label'); this.errorMessageId = uniqueId('error-message'); + this.updateFocus = this.updateFocus.bind(this); + this.state = { + isFocused: false, + }; } componentDidMount() { @@ -72,6 +76,13 @@ class Textarea extends Component { this.textareaRef.current.blur(); } + updateFocus(isFocused, handler) { + return (...args) => { + this.setState({ isFocused }); + handler(...args); + }; + } + render() { const { style, @@ -117,6 +128,7 @@ class Textarea extends Component { readOnly={readOnly} disabled={disabled} variant={variant} + isFocused={this.state.isFocused} > {header} props.palette.background.main}; border: solid 1px ${props => props.palette.border.main}; - :focus-within { - background-color: ${props => props.palette.background.main}; - border: solid 2px ${props => props.palette.brand.main}; - box-shadow: ${props => props.shadows.brand}; - } + ${props => + props.isFocused && + ` + background-color: ${props.palette.background.main}; + border: solid 2px ${props.palette.brand.main}; + box-shadow: ${props.shadows.brand}; + `} ${props => props.variant === 'shaded' && `