Merge branch 'master' into labelAlignment-prop-on-all-inputable-compo…

…nents
nexxtway · Oct 4, 2020 · 9d3b83b · 9d3b83b
2 parents 5c26166 + bb88560
commit 9d3b83b
Show file tree

Hide file tree

Showing 8 changed files with 395 additions and 605 deletions.
diff --git a/library/data/dataTableExamples.js 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
@@ -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
@@ -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
@@ -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
@@ -461,3 +461,29 @@ const inputStyles = {
     />
 </div>
 ```
+# 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,
+};
+
+<Input
+    label="Input Label"
+    placeholder="Placeholder text"
+    style={containerStyles}
+    className="rainbow-m-vertical_x-large rainbow-p-horizontal_medium rainbow-m_auto"
+    value={value}
+    onChange={handleChange}
+/>
+```