From c935c6e5bec5ccd10cbac5986519b2296ee8ddb7 Mon Sep 17 00:00:00 2001 From: Tahimi Date: Sun, 27 Sep 2020 23:46:22 -0500 Subject: [PATCH 1/4] fix: focus on textarea (#1868) --- src/components/Textarea/index.js | 16 ++++++++++++++-- .../Textarea/styled/textareaContainer.js | 12 +++++++----- 2 files changed, 21 insertions(+), 7 deletions(-) diff --git a/src/components/Textarea/index.js b/src/components/Textarea/index.js index 953cfad29..f37f40282 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, @@ -115,6 +126,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' && ` From 0ccd76f635897899330e9fbd141a598208dabfad Mon Sep 17 00:00:00 2001 From: Andy Montalvo <59586600+amontalvof@users.noreply.github.com> Date: Mon, 28 Sep 2020 09:17:44 -0500 Subject: [PATCH 2/4] docs: add example with an initial value set in the input component (#1840) * docs: add example with an initial value set in the input component * docs: updated description of input example with an initial value * docs: added title and description on example with an initial value set * docs: added the styles to the title of the example Co-authored-by: Jose Leandro Torres --- .../ReactComponent/styles.css | 5 ++++ src/components/Input/readme.md | 26 +++++++++++++++++++ 2 files changed, 31 insertions(+) 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/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, +}; + + +``` From 258c417b8fd479e8dda906469762089d0ef20d62 Mon Sep 17 00:00:00 2001 From: Andy Montalvo <59586600+amontalvof@users.noreply.github.com> Date: Mon, 28 Sep 2020 11:27:31 -0500 Subject: [PATCH 3/4] docs: example of dynamic row action in table component (#1852) * docs: example of dynamic row action in table component * docs: added exapledata.js * docs: moved data examples to library/data Co-authored-by: Jose Leandro Torres --- library/data/dataTableExamples.js | 249 +++++++++++ library/setup.js | 10 + src/components/Table/readme.md | 678 ++++-------------------------- 3 files changed, 339 insertions(+), 598 deletions(-) create mode 100644 library/data/dataTableExamples.js 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/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'); From bb885605d2d38f328ebb17d451584b163a11c8a1 Mon Sep 17 00:00:00 2001 From: gtallesb <32268206+gtallesb@users.noreply.github.com> Date: Sat, 3 Oct 2020 17:56:04 -0400 Subject: [PATCH 4/4] fix: add category to the DatePicker component to be displayed under Form section (#1875) --- src/components/DatePicker/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/DatePicker/index.js b/src/components/DatePicker/index.js index 5f7e72f28..4f45998eb 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,