├── .eslintrc.json
├── .gitignore
├── README.md
├── __tests__
    ├── test_accordion.js
    ├── test_accordion_multi.js
    ├── test_box.js
    ├── test_box_info.js
    ├── test_box_negative.js
    ├── test_box_positive.js
    ├── test_box_warn.js
    ├── test_data_table.js
    ├── test_dropdown.js
    ├── test_fieldset.js
    ├── test_fieldset_info.js
    ├── test_fieldset_negative.js
    ├── test_fieldset_positive.js
    ├── test_fieldset_warn.js
    ├── test_form_button.js
    ├── test_form_button_examples.js
    ├── test_form_button_link.js
    ├── test_form_checkbox.js
    ├── test_form_checkbox_list.js
    ├── test_form_checkbox_list_inline.js
    ├── test_form_input.js
    ├── test_form_radio.js
    ├── test_form_radio_list.js
    ├── test_form_radio_list_inline.js
    ├── test_form_search.js
    ├── test_form_select.js
    ├── test_form_textarea.js
    ├── test_form_textdiv.js
    ├── test_image.js
    ├── test_image_figure.js
    ├── test_list_clean.js
    ├── test_list_inline.js
    ├── test_list_separator.js
    └── test_tabs.js
├── design_assets
    └── t7-icons.sketch
├── package.json
├── source
    ├── components
    │   ├── accordion
    │   │   ├── README.md
    │   │   ├── index.js
    │   │   ├── template_header.js
    │   │   └── template_panel.js
    │   ├── accordion_multi
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── box
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── box_info
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── box_negative
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── box_positive
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── box_warn
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── data_table
    │   │   ├── README.md
    │   │   ├── index.js
    │   │   ├── template_pagination.js
    │   │   ├── template_td.js
    │   │   ├── template_th.js
    │   │   └── template_tr.js
    │   ├── dropdown
    │   │   ├── README.md
    │   │   ├── index.js
    │   │   └── template_item.js
    │   ├── fieldset
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── fieldset_info
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── fieldset_negative
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── fieldset_positive
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── fieldset_warn
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── form_button
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── form_button_examples
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── form_checkbox
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── form_checkbox_list
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── form_checkbox_list_inline
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── form_input
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── form_radio
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── form_radio_list
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── form_radio_list_inline
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── form_search
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── form_select
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── form_textarea
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── form_textdiv
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── image
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── image_figure
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── list_clean
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── list_inline
    │   │   ├── README.md
    │   │   └── index.js
    │   ├── list_separator
    │   │   ├── README.md
    │   │   └── index.js
    │   └── tabs
    │   │   ├── README.md
    │   │   ├── index.js
    │   │   ├── template_panel.js
    │   │   └── template_tab.js
    ├── components_misc
    │   └── markdown
    │   │   ├── code.js
    │   │   └── text.js
    ├── docs
    │   └── doc_404.md
    ├── fake
    │   ├── _accordion.js
    │   ├── _box.js
    │   ├── _data_table_cols.js
    │   ├── _data_table_rows.js
    │   ├── _list.js
    │   ├── _tabs.js
    │   └── index.js
    ├── index.html
    ├── index.js
    ├── layouts
    │   └── app
    │   │   ├── footer.js
    │   │   ├── header.js
    │   │   ├── index.js
    │   │   ├── main.js
    │   │   └── wrapper.js
    ├── pages
    │   ├── 404
    │   │   └── index.js
    │   ├── accounts
    │   │   └── index.js
    │   └── profile
    │   │   ├── index.js
    │   │   └── states.json
    ├── redux
    │   ├── _types.js
    │   ├── actions
    │   │   ├── accounts_tabs_actions.js
    │   │   ├── checking_table_actions.js
    │   │   ├── faq_accordion_actions.js
    │   │   ├── profile_form_actions.js
    │   │   └── savings_table_actions.js
    │   ├── index.js
    │   └── reducers
    │   │   ├── accounts_tabs_reducer.js
    │   │   ├── checking_table_reducer.js
    │   │   ├── faq_accordion_reducer.js
    │   │   ├── profile_form_reducer.js
    │   │   └── savings_table_reducer.js
    ├── routes.js
    ├── sass
    │   ├── index.scss
    │   └── partials
    │   │   ├── _global.scss
    │   │   ├── _reset.scss
    │   │   ├── _t7-accordion.scss
    │   │   ├── _t7-app.scss
    │   │   ├── _t7-box.scss
    │   │   ├── _t7-data-table.scss
    │   │   ├── _t7-dropdown.scss
    │   │   ├── _t7-figure.scss
    │   │   ├── _t7-form.scss
    │   │   ├── _t7-helper.scss
    │   │   ├── _t7-list-clean.scss
    │   │   ├── _t7-list-inline.scss
    │   │   ├── _t7-list-separator.scss
    │   │   ├── _t7-search-table.scss
    │   │   └── _t7-tabs.scss
    ├── static
    │   ├── README.md
    │   ├── images
    │   │   ├── favicon.png
    │   │   ├── fpo
    │   │   │   ├── fpo_dock.jpg
    │   │   │   ├── fpo_jonathan_rogersonian.jpg
    │   │   │   ├── fpo_matterhorn.jpg
    │   │   │   ├── fpo_phone_booth.jpg
    │   │   │   └── fpo_phone_ocean.jpg
    │   │   ├── t7-app__header__logo.svg
    │   │   ├── t7-box--info--icon.svg
    │   │   ├── t7-box--negative--icon.svg
    │   │   ├── t7-box--positive--icon.svg
    │   │   ├── t7-box--warn--icon.svg
    │   │   ├── t7-box__close.svg
    │   │   ├── t7-data-table__th--sortable.svg
    │   │   ├── t7-data-table__th--sortable[asc].svg
    │   │   ├── t7-data-table__th--sortable[desc].svg
    │   │   ├── t7-dropdown__trigger.svg
    │   │   ├── t7-form__checkbox__fake.svg
    │   │   ├── t7-form__radio__fake.svg
    │   │   └── t7-form__select.svg
    │   └── json
    │   │   └── tree_diagram.json
    └── utils
    │   ├── _ajax.js
    │   ├── _bind.js
    │   ├── _convert_content_editable.js
    │   ├── _convert_content_focus.js
    │   ├── _convert_on_paste.js
    │   ├── _convert_to_markup.js
    │   ├── _convert_to_text.js
    │   ├── _exists.js
    │   ├── _get_data_by_name.js
    │   ├── _log.js
    │   ├── _markdown.js
    │   ├── _navigate.js
    │   ├── _parse_form_data.js
    │   ├── _path.js
    │   ├── _placeholder.js
    │   ├── _regex.js
    │   ├── _save.js
    │   ├── _stop.js
    │   ├── _storage.js
    │   ├── _title.js
    │   ├── _today.js
    │   ├── _trim.js
    │   ├── _unique.js
    │   └── index.js
└── webpack.config.js


/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "standard",
 4 |     "standard-react"
 5 |   ],
 6 |   "rules": {
 7 |     "no-console": [
 8 |       "error",
 9 |       {
10 |         "allow": [
11 |           "warn",
12 |           "error"
13 |         ]
14 |       }
15 |     ],
16 |     "no-var": "error",
17 |     "quote-props": [
18 |       "error",
19 |       "as-needed"
20 |     ]
21 |   }
22 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | build
2 | coverage
3 | node_modules
4 | npm-debug.log
5 | /sass-lint.html
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # T7 React Starter
 2 | 
 3 | This is where we tinker with our approach to React projects.
 4 | 
 5 | Note: Depending on how Node is set up on your machine, you may need to prefix the following commands with `sudo`.
 6 | 
 7 | ---
 8 | 
 9 | To get this project running…
10 | 
11 | 1. Clone this repository.
12 | 2. `cd` into the local directory.
13 | 3. Type `npm install`.
14 | 4. Type `npm start`.
15 | 
16 | It should then be viewable at…
17 | 
18 | http://localhost:8080/
19 | 
20 | ---
21 | 
22 | To run unit tests on the React components…
23 | 
24 | 1. `cd` into the local directory.
25 | 2. Type `npm run test`
26 | 
27 | After the tests run, assuming everything is successful, you can view reports related to JS and CSS here…
28 | 
29 | * JS — `/coverage/lcov-report/index.html`
30 | * CSS — `/sass-lint.html`
31 | 
32 | ---
33 | 
34 | To build the starter app to static files…
35 | 
36 | 1. `cd` into the local directory.
37 | 2. Type `npm start`.
38 | 3. Type `npm run build`.


--------------------------------------------------------------------------------
/__tests__/test_accordion.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import Accordion from '../source/components/accordion'
16 | import AccordionPanel from '../source/components/accordion/template_panel'
17 | 
18 | // Describe `<Component/>` name.
19 | describe('Accordion', function () {
20 |   // First panel selected.
21 |   const selected = {
22 |     0: true
23 |   }
24 | 
25 |   // Insert the component into DOM.
26 |   const el = T.renderIntoDocument(
27 |     <Accordion selected={selected}>
28 |       <AccordionPanel label='Item 1'>
29 |         <p>
30 |           Content for "Item 1"
31 |         </p>
32 |       </AccordionPanel>
33 |       <AccordionPanel label='Item 2'>
34 |         <p>
35 |           Content for "Item 2"
36 |         </p>
37 |       </AccordionPanel>
38 |     </Accordion>
39 |   )
40 | 
41 |   // Get parent element.
42 |   const parent = T.findRenderedDOMComponentWithClass(el, 't7-accordion')
43 | 
44 |   // Get headers and panels.
45 |   const headers = parent.querySelectorAll('dt')
46 |   const panels = parent.querySelectorAll('dd')
47 | 
48 |   // ===================
49 |   // Test for existence.
50 |   // ===================
51 | 
52 |   it('exists in the page', function () {
53 |     expect(T.isCompositeComponent(el)).toBe(true)
54 |   })
55 | 
56 |   // =================
57 |   // Test for headers.
58 |   // =================
59 | 
60 |   it('has child headers', function () {
61 |     expect(headers.length).toBe(2)
62 |   })
63 | 
64 |   // ================
65 |   // Test for panels.
66 |   // ================
67 | 
68 |   it('has child panels', function () {
69 |     expect(panels.length).toBe(2)
70 |   })
71 | 
72 |   // ================
73 |   // Test for events.
74 |   // ================
75 | 
76 |   it('responds to clicks', function () {
77 |     T.Simulate.click(headers[1])
78 | 
79 |     // First panel = off.
80 |     expect(headers[0].getAttribute('aria-selected')).toBe('false')
81 |     expect(panels[0].getAttribute('aria-hidden')).toBe('true')
82 | 
83 |     // Second panel = on.
84 |     expect(headers[1].getAttribute('aria-selected')).toBe('true')
85 |     expect(panels[1].getAttribute('aria-hidden')).toBe('false')
86 |   })
87 | })
88 | 


--------------------------------------------------------------------------------
/__tests__/test_accordion_multi.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import AccordionMulti from '../source/components/accordion_multi'
16 | import AccordionPanel from '../source/components/accordion/template_panel'
17 | 
18 | // Describe `<Component/>` name.
19 | describe('AccordionMulti', function () {
20 |   // Insert the component into DOM.
21 |   const el = T.renderIntoDocument(
22 |     <AccordionMulti>
23 |       <AccordionPanel label='Item 1'>
24 |         <p>
25 |           Content for "Item 1"
26 |         </p>
27 |       </AccordionPanel>
28 |       <AccordionPanel label='Item 2'>
29 |         <p>
30 |           Content for "Item 2"
31 |         </p>
32 |       </AccordionPanel>
33 |     </AccordionMulti>
34 |   )
35 | 
36 |   // Get parent element.
37 |   const parent = T.findRenderedDOMComponentWithClass(el, 't7-accordion')
38 | 
39 |   // Get headers and panels.
40 |   const headers = parent.querySelectorAll('dt')
41 |   const panels = parent.querySelectorAll('dd')
42 | 
43 |   // ===================
44 |   // Test for existence.
45 |   // ===================
46 | 
47 |   it('exists in the page', function () {
48 |     expect(T.isCompositeComponent(el)).toBe(true)
49 |   })
50 | 
51 |   // =================
52 |   // Test for headers.
53 |   // =================
54 | 
55 |   it('has child headers', function () {
56 |     expect(headers.length).toBe(2)
57 |   })
58 | 
59 |   // ================
60 |   // Test for panels.
61 |   // ================
62 | 
63 |   it('has child panels', function () {
64 |     expect(panels.length).toBe(2)
65 |   })
66 | 
67 |   // ================
68 |   // Test for events.
69 |   // ================
70 | 
71 |   it('responds to clicks', function () {
72 |     T.Simulate.click(headers[0])
73 |     T.Simulate.click(headers[1])
74 | 
75 |     // First panel = on.
76 |     expect(headers[0].getAttribute('aria-selected')).toBe('true')
77 |     expect(panels[0].getAttribute('aria-hidden')).toBe('false')
78 | 
79 |     // Second panel = on.
80 |     expect(headers[1].getAttribute('aria-selected')).toBe('true')
81 |     expect(panels[1].getAttribute('aria-hidden')).toBe('false')
82 |   })
83 | })
84 | 


--------------------------------------------------------------------------------
/__tests__/test_box.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import Box from '../source/components/box'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('Box', function () {
19 |   // Insert the component into DOM.
20 |   const el = T.renderIntoDocument(
21 |     <Box>
22 |       <p>
23 |         Lorem ipsum dolor sit amet.
24 |       </p>
25 |       <p>
26 |         Lorem ipsum dolor sit amet.
27 |       </p>
28 |     </Box>
29 |   )
30 | 
31 |   // Get parent element.
32 |   const parent = T.findRenderedDOMComponentWithClass(el, 't7-box')
33 | 
34 |   // Get content.
35 |   const content = parent.querySelectorAll('p')
36 | 
37 |   // ===================
38 |   // Test for existence.
39 |   // ===================
40 | 
41 |   it('exists in the page', function () {
42 |     expect(T.isCompositeComponent(el)).toBe(true)
43 |   })
44 | 
45 |   // =================
46 |   // Test for content.
47 |   // =================
48 | 
49 |   it('has content', function () {
50 |     expect(content.length).toBe(2)
51 |   })
52 | })
53 | 


--------------------------------------------------------------------------------
/__tests__/test_box_info.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import BoxInfo from '../source/components/box_info'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('BoxInfo', function () {
19 |   // Insert the component into DOM.
20 |   const el = T.renderIntoDocument(
21 |     <BoxInfo>
22 |       <p>
23 |         Lorem ipsum dolor sit amet.
24 |       </p>
25 |       <p>
26 |         Lorem ipsum dolor sit amet.
27 |       </p>
28 |     </BoxInfo>
29 |   )
30 | 
31 |   // Get parent element.
32 |   const parent = T.findRenderedDOMComponentWithClass(el, 't7-box--info')
33 | 
34 |   // Get content.
35 |   const content = parent.querySelectorAll('p')
36 | 
37 |   // Get close link.
38 |   const close = parent.querySelector('.t7-box__close')
39 | 
40 |   // ===================
41 |   // Test for existence.
42 |   // ===================
43 | 
44 |   it('exists in the page', function () {
45 |     expect(T.isCompositeComponent(el)).toBe(true)
46 |   })
47 | 
48 |   // =================
49 |   // Test for content.
50 |   // =================
51 | 
52 |   it('has content', function () {
53 |     expect(content.length).toBe(2)
54 |   })
55 | 
56 |   // ===============
57 |   // Test for close.
58 |   // ===============
59 | 
60 |   it('responds to close', function () {
61 |     T.Simulate.click(close)
62 | 
63 |     // Box should be hidden.
64 |     expect(parent.getAttribute('aria-hidden')).toBe('true')
65 |   })
66 | })
67 | 


--------------------------------------------------------------------------------
/__tests__/test_box_negative.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import BoxInfo from '../source/components/box_negative'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('BoxNegative', function () {
19 |   // Insert the component into DOM.
20 |   const el = T.renderIntoDocument(
21 |     <BoxInfo>
22 |       <p>
23 |         Lorem ipsum dolor sit amet.
24 |       </p>
25 |       <p>
26 |         Lorem ipsum dolor sit amet.
27 |       </p>
28 |     </BoxInfo>
29 |   )
30 | 
31 |   // Get parent element.
32 |   const parent = T.findRenderedDOMComponentWithClass(el, 't7-box--negative')
33 | 
34 |   // Get content.
35 |   const content = parent.querySelectorAll('p')
36 | 
37 |   // Get close link.
38 |   const close = parent.querySelector('.t7-box__close')
39 | 
40 |   // ===================
41 |   // Test for existence.
42 |   // ===================
43 | 
44 |   it('exists in the page', function () {
45 |     expect(T.isCompositeComponent(el)).toBe(true)
46 |   })
47 | 
48 |   // =================
49 |   // Test for content.
50 |   // =================
51 | 
52 |   it('has content', function () {
53 |     expect(content.length).toBe(2)
54 |   })
55 | 
56 |   // ===============
57 |   // Test for close.
58 |   // ===============
59 | 
60 |   it('responds to close', function () {
61 |     T.Simulate.click(close)
62 | 
63 |     // Box should be hidden.
64 |     expect(parent.getAttribute('aria-hidden')).toBe('true')
65 |   })
66 | })
67 | 


--------------------------------------------------------------------------------
/__tests__/test_box_positive.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import BoxPositive from '../source/components/box_positive'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('BoxPositive', function () {
19 |   // Insert the component into DOM.
20 |   const el = T.renderIntoDocument(
21 |     <BoxPositive>
22 |       <p>
23 |         Lorem ipsum dolor sit amet.
24 |       </p>
25 |       <p>
26 |         Lorem ipsum dolor sit amet.
27 |       </p>
28 |     </BoxPositive>
29 |   )
30 | 
31 |   // Get parent element.
32 |   const parent = T.findRenderedDOMComponentWithClass(el, 't7-box--positive')
33 | 
34 |   // Get content.
35 |   const content = parent.querySelectorAll('p')
36 | 
37 |   // Get close link.
38 |   const close = parent.querySelector('.t7-box__close')
39 | 
40 |   // ===================
41 |   // Test for existence.
42 |   // ===================
43 | 
44 |   it('exists in the page', function () {
45 |     expect(T.isCompositeComponent(el)).toBe(true)
46 |   })
47 | 
48 |   // =================
49 |   // Test for content.
50 |   // =================
51 | 
52 |   it('has content', function () {
53 |     expect(content.length).toBe(2)
54 |   })
55 | 
56 |   // ===============
57 |   // Test for close.
58 |   // ===============
59 | 
60 |   it('responds to close', function () {
61 |     T.Simulate.click(close)
62 | 
63 |     // Box should be hidden.
64 |     expect(parent.getAttribute('aria-hidden')).toBe('true')
65 |   })
66 | })
67 | 


--------------------------------------------------------------------------------
/__tests__/test_box_warn.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import BoxWarn from '../source/components/box_warn'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('BoxWarn', function () {
19 |   // Insert the component into DOM.
20 |   const el = T.renderIntoDocument(
21 |     <BoxWarn>
22 |       <p>
23 |         Lorem ipsum dolor sit amet.
24 |       </p>
25 |       <p>
26 |         Lorem ipsum dolor sit amet.
27 |       </p>
28 |     </BoxWarn>
29 |   )
30 | 
31 |   // Get parent element.
32 |   const parent = T.findRenderedDOMComponentWithClass(el, 't7-box--warn')
33 | 
34 |   // Get content.
35 |   const content = parent.querySelectorAll('p')
36 | 
37 |   // Get close link.
38 |   const close = parent.querySelector('.t7-box__close')
39 | 
40 |   // ===================
41 |   // Test for existence.
42 |   // ===================
43 | 
44 |   it('exists in the page', function () {
45 |     expect(T.isCompositeComponent(el)).toBe(true)
46 |   })
47 | 
48 |   // =================
49 |   // Test for content.
50 |   // =================
51 | 
52 |   it('has content', function () {
53 |     expect(content.length).toBe(2)
54 |   })
55 | 
56 |   // ===============
57 |   // Test for close.
58 |   // ===============
59 | 
60 |   it('responds to close', function () {
61 |     T.Simulate.click(close)
62 | 
63 |     // Box should be hidden.
64 |     expect(parent.getAttribute('aria-hidden')).toBe('true')
65 |   })
66 | })
67 | 


--------------------------------------------------------------------------------
/__tests__/test_dropdown.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import Dropdown from '../source/components/dropdown'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('Dropdown', function () {
19 |   // Insert the component into DOM.
20 |   const el = T.renderIntoDocument(
21 |     <Dropdown
22 |       menuAlign='right'
23 |       text='dropdown_trigger_text'
24 |       items={[
25 |         {
26 |           'href': 'http://example.com/',
27 |           'text': 'dropdown_item_1'
28 |         },
29 |         {
30 |           'href': 'http://example.net/',
31 |           'text': 'dropdown_item_2'
32 |         }
33 |       ]}
34 |     />
35 |   )
36 | 
37 |   // Get parent element.
38 |   const parent = T.findRenderedDOMComponentWithClass(el, 't7-dropdown')
39 | 
40 |   // Get dropdown children.
41 |   const trigger = parent.querySelector('.t7-dropdown__trigger')
42 |   const menu = parent.querySelector('.t7-dropdown__menu')
43 |   const links = menu.querySelectorAll('.t7-dropdown__menu__link')
44 | 
45 |   // ===================
46 |   // Test for existence.
47 |   // ===================
48 | 
49 |   it('exists in the page', function () {
50 |     expect(T.isCompositeComponent(el)).toBe(true)
51 |   })
52 | 
53 |   // ============================
54 |   // Test for toggle open/closed.
55 |   // ============================
56 | 
57 |   it('responds to toggle', function () {
58 |     expect(menu.getAttribute('aria-hidden')).toBe('true')
59 | 
60 |     T.Simulate.click(trigger)
61 | 
62 |     expect(menu.getAttribute('aria-hidden')).toBe('false')
63 |   })
64 | 
65 |   // ===============
66 |   // Test for links.
67 |   // ===============
68 | 
69 |   it('has correct links', function () {
70 |     expect(links.length).toBe(2)
71 | 
72 |     expect(links[0].href).toMatch('example.com')
73 |     expect(links[1].href).toMatch('example.net')
74 |   })
75 | })
76 | 


--------------------------------------------------------------------------------
/__tests__/test_fieldset.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import Fieldset from '../source/components/fieldset'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('Fieldset', function () {
19 |   // Insert the component into DOM.
20 |   const el = T.renderIntoDocument(
21 |     <Fieldset>
22 |       <p>
23 |         Lorem ipsum dolor sit amet.
24 |       </p>
25 |       <p>
26 |         Lorem ipsum dolor sit amet.
27 |       </p>
28 |     </Fieldset>
29 |   )
30 | 
31 |   // Get parent element.
32 |   const parent = T.findRenderedDOMComponentWithClass(el, 't7-box')
33 | 
34 |   // Get content.
35 |   const content = parent.querySelectorAll('p')
36 | 
37 |   // Get legend.
38 |   const legend = parent.querySelectorAll('legend')
39 | 
40 |   // ===================
41 |   // Test for existence.
42 |   // ===================
43 | 
44 |   it('exists in the page', function () {
45 |     expect(T.isCompositeComponent(el)).toBe(true)
46 |   })
47 | 
48 |   // ==================
49 |   // Test for fieldset.
50 |   // ==================
51 | 
52 |   it('uses a fieldset tag', function () {
53 |     const tag = parent.tagName.toLowerCase()
54 | 
55 |     expect(tag).toBe('fieldset')
56 |   })
57 | 
58 |   // ================
59 |   // Test for legend.
60 |   // ================
61 | 
62 |   it('has a legend', function () {
63 |     expect(legend.length).toBe(1)
64 |   })
65 | 
66 |   // =================
67 |   // Test for content.
68 |   // =================
69 | 
70 |   it('has content', function () {
71 |     expect(content.length).toBe(2)
72 |   })
73 | })
74 | 


--------------------------------------------------------------------------------
/__tests__/test_fieldset_info.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import FieldsetInfo from '../source/components/fieldset_info'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('FieldsetInfo', function () {
19 |   // Insert the component into DOM.
20 |   const el = T.renderIntoDocument(
21 |     <FieldsetInfo>
22 |       <p>
23 |         Lorem ipsum dolor sit amet.
24 |       </p>
25 |       <p>
26 |         Lorem ipsum dolor sit amet.
27 |       </p>
28 |     </FieldsetInfo>
29 |   )
30 | 
31 |   // Get parent element.
32 |   const parent = T.findRenderedDOMComponentWithClass(el, 't7-box--info')
33 | 
34 |   // Get content.
35 |   const content = parent.querySelectorAll('p')
36 | 
37 |   // Get legend.
38 |   const legend = parent.querySelectorAll('legend')
39 | 
40 |   // ===================
41 |   // Test for existence.
42 |   // ===================
43 | 
44 |   it('exists in the page', function () {
45 |     expect(T.isCompositeComponent(el)).toBe(true)
46 |   })
47 | 
48 |   // ==================
49 |   // Test for fieldset.
50 |   // ==================
51 | 
52 |   it('uses a fieldset tag', function () {
53 |     const tag = parent.tagName.toLowerCase()
54 | 
55 |     expect(tag).toBe('fieldset')
56 |   })
57 | 
58 |   // ================
59 |   // Test for legend.
60 |   // ================
61 | 
62 |   it('has a legend', function () {
63 |     expect(legend.length).toBe(1)
64 |   })
65 | 
66 |   // =================
67 |   // Test for content.
68 |   // =================
69 | 
70 |   it('has content', function () {
71 |     expect(content.length).toBe(2)
72 |   })
73 | })
74 | 


--------------------------------------------------------------------------------
/__tests__/test_fieldset_negative.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import FieldsetNegative from '../source/components/fieldset_negative'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('FieldsetNegative', function () {
19 |   // Insert the component into DOM.
20 |   const el = T.renderIntoDocument(
21 |     <FieldsetNegative>
22 |       <p>
23 |         Lorem ipsum dolor sit amet.
24 |       </p>
25 |       <p>
26 |         Lorem ipsum dolor sit amet.
27 |       </p>
28 |     </FieldsetNegative>
29 |   )
30 | 
31 |   // Get parent element.
32 |   const parent = T.findRenderedDOMComponentWithClass(el, 't7-box--negative')
33 | 
34 |   // Get content.
35 |   const content = parent.querySelectorAll('p')
36 | 
37 |   // Get legend.
38 |   const legend = parent.querySelectorAll('legend')
39 | 
40 |   // ===================
41 |   // Test for existence.
42 |   // ===================
43 | 
44 |   it('exists in the page', function () {
45 |     expect(T.isCompositeComponent(el)).toBe(true)
46 |   })
47 | 
48 |   // ==================
49 |   // Test for fieldset.
50 |   // ==================
51 | 
52 |   it('uses a fieldset tag', function () {
53 |     const tag = parent.tagName.toLowerCase()
54 | 
55 |     expect(tag).toBe('fieldset')
56 |   })
57 | 
58 |   // ================
59 |   // Test for legend.
60 |   // ================
61 | 
62 |   it('has a legend', function () {
63 |     expect(legend.length).toBe(1)
64 |   })
65 | 
66 |   // =================
67 |   // Test for content.
68 |   // =================
69 | 
70 |   it('has content', function () {
71 |     expect(content.length).toBe(2)
72 |   })
73 | })
74 | 


--------------------------------------------------------------------------------
/__tests__/test_fieldset_positive.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import FieldsetPositive from '../source/components/fieldset_positive'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('FieldsetPositive', function () {
19 |   // Insert the component into DOM.
20 |   const el = T.renderIntoDocument(
21 |     <FieldsetPositive>
22 |       <p>
23 |         Lorem ipsum dolor sit amet.
24 |       </p>
25 |       <p>
26 |         Lorem ipsum dolor sit amet.
27 |       </p>
28 |     </FieldsetPositive>
29 |   )
30 | 
31 |   // Get parent element.
32 |   const parent = T.findRenderedDOMComponentWithClass(el, 't7-box--positive')
33 | 
34 |   // Get content.
35 |   const content = parent.querySelectorAll('p')
36 | 
37 |   // Get legend.
38 |   const legend = parent.querySelectorAll('legend')
39 | 
40 |   // ===================
41 |   // Test for existence.
42 |   // ===================
43 | 
44 |   it('exists in the page', function () {
45 |     expect(T.isCompositeComponent(el)).toBe(true)
46 |   })
47 | 
48 |   // ==================
49 |   // Test for fieldset.
50 |   // ==================
51 | 
52 |   it('uses a fieldset tag', function () {
53 |     const tag = parent.tagName.toLowerCase()
54 | 
55 |     expect(tag).toBe('fieldset')
56 |   })
57 | 
58 |   // ================
59 |   // Test for legend.
60 |   // ================
61 | 
62 |   it('has a legend', function () {
63 |     expect(legend.length).toBe(1)
64 |   })
65 | 
66 |   // =================
67 |   // Test for content.
68 |   // =================
69 | 
70 |   it('has content', function () {
71 |     expect(content.length).toBe(2)
72 |   })
73 | })
74 | 


--------------------------------------------------------------------------------
/__tests__/test_fieldset_warn.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import FieldsetWarn from '../source/components/fieldset_warn'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('FieldsetWarn', function () {
19 |   // Insert the component into DOM.
20 |   const el = T.renderIntoDocument(
21 |     <FieldsetWarn>
22 |       <p>
23 |         Lorem ipsum dolor sit amet.
24 |       </p>
25 |       <p>
26 |         Lorem ipsum dolor sit amet.
27 |       </p>
28 |     </FieldsetWarn>
29 |   )
30 | 
31 |   // Get parent element.
32 |   const parent = T.findRenderedDOMComponentWithClass(el, 't7-box--warn')
33 | 
34 |   // Get content.
35 |   const content = parent.querySelectorAll('p')
36 | 
37 |   // Get legend.
38 |   const legend = parent.querySelectorAll('legend')
39 | 
40 |   // ===================
41 |   // Test for existence.
42 |   // ===================
43 | 
44 |   it('exists in the page', function () {
45 |     expect(T.isCompositeComponent(el)).toBe(true)
46 |   })
47 | 
48 |   // ==================
49 |   // Test for fieldset.
50 |   // ==================
51 | 
52 |   it('uses a fieldset tag', function () {
53 |     const tag = parent.tagName.toLowerCase()
54 | 
55 |     expect(tag).toBe('fieldset')
56 |   })
57 | 
58 |   // ================
59 |   // Test for legend.
60 |   // ================
61 | 
62 |   it('has a legend', function () {
63 |     expect(legend.length).toBe(1)
64 |   })
65 | 
66 |   // =================
67 |   // Test for content.
68 |   // =================
69 | 
70 |   it('has content', function () {
71 |     expect(content.length).toBe(2)
72 |   })
73 | })
74 | 


--------------------------------------------------------------------------------
/__tests__/test_form_button.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import Button from '../source/components/form_button'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('Button', function () {
19 |   const ariaControls = 'example_id'
20 |   const disabled = true
21 |   const text = 'GO'
22 |   const title = 'Example Title'
23 |   const type = 'submit'
24 | 
25 |   // Insert the component into DOM.
26 |   const el = T.renderIntoDocument(
27 |     <Button
28 |       ariaControls={ariaControls}
29 |       disabled={disabled}
30 |       text={text}
31 |       title={title}
32 |       type={type}
33 |     />
34 |   )
35 | 
36 |   // Get button.
37 |   const button = T.findRenderedDOMComponentWithClass(el, 't7-form__button')
38 | 
39 |   // ===================
40 |   // Test for existence.
41 |   // ===================
42 | 
43 |   it('exists in the page', function () {
44 |     expect(T.isCompositeComponent(el)).toBe(true)
45 |   })
46 | 
47 |   // ==============
48 |   // Test for ARIA.
49 |   // ==============
50 | 
51 |   it('has correct ARIA', function () {
52 |     const x = button.getAttribute('aria-controls')
53 | 
54 |     expect(x).toBe('example_id')
55 |   })
56 | 
57 |   // ====================
58 |   // Test disabled state.
59 |   // ====================
60 | 
61 |   it('has correct state', function () {
62 |     const x = button.disabled
63 | 
64 |     expect(x).toBe(true)
65 |   })
66 | 
67 |   // ==============
68 |   // Test for text.
69 |   // ==============
70 | 
71 |   it('has correct text', function () {
72 |     const x = button.innerHTML
73 | 
74 |     expect(x).toBe('GO')
75 |   })
76 | 
77 |   // ===============
78 |   // Test for title.
79 |   // ===============
80 | 
81 |   it('has correct title', function () {
82 |     const x = button.getAttribute('title')
83 | 
84 |     expect(x).toBe('Example Title')
85 |   })
86 | 
87 |   // ==============
88 |   // Test for type.
89 |   // ==============
90 | 
91 |   it('has correct type', function () {
92 |     const x = button.getAttribute('type')
93 | 
94 |     expect(x).toBe('submit')
95 |   })
96 | })
97 | 


--------------------------------------------------------------------------------
/__tests__/test_form_button_examples.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import ButtonExamples from '../source/components/form_button_examples'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('ButtonExamples', function () {
19 |   // Insert the component into DOM.
20 |   const el = T.renderIntoDocument(
21 |     <ButtonExamples />
22 |   )
23 | 
24 |   // Get wrapper `<div>`.
25 |   const parent = T.findRenderedDOMComponentWithTag(el, 'div')
26 | 
27 |   // ====================
28 |   // Get buttons by size.
29 |   // ====================
30 | 
31 |   const sizeSmall =
32 |   parent.querySelectorAll('.t7-form__button--small')
33 | 
34 |   const sizeBig =
35 |   parent.querySelectorAll('.t7-form__button--big')
36 | 
37 |   const sizeNormal =
38 |   parent.querySelectorAll([
39 |     '.t7-form__button',
40 |     ':not(.t7-form__button--small)',
41 |     ':not(.t7-form__button--big)'
42 |   ].join(''))
43 | 
44 |   // ====================
45 |   // Get buttons by mode.
46 |   // ====================
47 | 
48 |   const modeDefault =
49 |   parent.querySelectorAll('.t7-form__button--default')
50 | 
51 |   const modePrimary =
52 |   parent.querySelectorAll('.t7-form__button--primary')
53 | 
54 |   const modePositive =
55 |   parent.querySelectorAll('.t7-form__button--positive')
56 | 
57 |   const modeNegative =
58 |   parent.querySelectorAll('.t7-form__button--negative')
59 | 
60 |   const modeWarn =
61 |   parent.querySelectorAll('.t7-form__button--warn')
62 | 
63 |   // ===================
64 |   // Test for existence.
65 |   // ===================
66 | 
67 |   it('exists in the page', function () {
68 |     expect(T.isCompositeComponent(el)).toBe(true)
69 |   })
70 | 
71 |   // ===============
72 |   // Test for sizes.
73 |   // ===============
74 | 
75 |   it('has correct sizes', function () {
76 |     expect(sizeSmall.length).toBe(5)
77 |     expect(sizeBig.length).toBe(5)
78 |     expect(sizeNormal.length).toBe(5)
79 |   })
80 | 
81 |   // ===============
82 |   // Test for modes.
83 |   // ===============
84 | 
85 |   it('has correct modes', function () {
86 |     expect(modeDefault.length).toBe(3)
87 |     expect(modePrimary.length).toBe(3)
88 |     expect(modePositive.length).toBe(3)
89 |     expect(modeNegative.length).toBe(3)
90 |     expect(modeWarn.length).toBe(3)
91 |   })
92 | })
93 | 


--------------------------------------------------------------------------------
/__tests__/test_form_button_link.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import Button from '../source/components/form_button'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('Button', function () {
19 |   const href = 'http://example.com/'
20 |   const target = '_blank'
21 |   const text = 'GO'
22 |   const title = 'Example Title'
23 | 
24 |   // Insert the component into DOM.
25 |   const el = T.renderIntoDocument(
26 |     <Button
27 |       href={href}
28 |       target={target}
29 |       text={text}
30 |       title={title}
31 |     />
32 |   )
33 | 
34 |   // Get button.
35 |   const button = T.findRenderedDOMComponentWithClass(el, 't7-form__button')
36 | 
37 |   // ===================
38 |   // Test for existence.
39 |   // ===================
40 | 
41 |   it('exists in the page', function () {
42 |     expect(T.isCompositeComponent(el)).toBe(true)
43 |   })
44 | 
45 |   // =============
46 |   // Test for tag.
47 |   // =============
48 | 
49 |   it('is a link tag', function () {
50 |     const x = button.tagName.toLowerCase()
51 | 
52 |     expect(x).toBe('a')
53 |   })
54 | 
55 |   // ==============
56 |   // Test for href.
57 |   // ==============
58 | 
59 |   it('has correct href', function () {
60 |     const x = button.getAttribute('href')
61 | 
62 |     expect(x).toBe('http://example.com/')
63 |   })
64 | 
65 |   // ================
66 |   // Test for target.
67 |   // ================
68 | 
69 |   it('is a link tag', function () {
70 |     const x = button.getAttribute('target')
71 | 
72 |     expect(x).toBe('_blank')
73 |   })
74 | 
75 |   // ==============
76 |   // Test for text.
77 |   // ==============
78 | 
79 |   it('has correct text', function () {
80 |     const x = button.innerHTML
81 | 
82 |     expect(x).toBe('GO')
83 |   })
84 | 
85 |   // ===============
86 |   // Test for title.
87 |   // ===============
88 | 
89 |   it('has correct title', function () {
90 |     const x = button.getAttribute('title')
91 | 
92 |     expect(x).toBe('Example Title')
93 |   })
94 | })
95 | 


--------------------------------------------------------------------------------
/__tests__/test_form_checkbox.js:
--------------------------------------------------------------------------------
  1 | /*global
  2 | describe
  3 | expect
  4 | it
  5 | jest
  6 | */
  7 | 
  8 | jest.disableAutomock()
  9 | 
 10 | // Dependencies.
 11 | import React from 'react'
 12 | import T from 'react-addons-test-utils'
 13 | 
 14 | // UI components.
 15 | import Checkbox from '../source/components/form_checkbox'
 16 | 
 17 | // Describe `<Component/>` name.
 18 | describe('Checkbox', function () {
 19 |   const disabled = true
 20 |   const id = 'example_id'
 21 |   const label = 'example_label'
 22 |   const name = 'example_name'
 23 |   const required = true
 24 |   const value = 'example_value'
 25 | 
 26 |   // Called from `it responds to clicks`.
 27 |   function handleChange (e, value, checked) {
 28 |     expect(checked).toBe(true)
 29 |   }
 30 | 
 31 |   // Insert the component into DOM.
 32 |   const el = T.renderIntoDocument(
 33 |     <Checkbox
 34 |       disabled={disabled}
 35 |       id={id}
 36 |       label={label}
 37 |       name={name}
 38 |       required={required}
 39 |       value={value}
 40 | 
 41 |       handleChange={handleChange}
 42 |     />
 43 |   )
 44 | 
 45 |   // Get parent label.
 46 |   const parent = T.findRenderedDOMComponentWithTag(el, 'label')
 47 | 
 48 |   // Get checkbox.
 49 |   const checkbox = parent.querySelector('input[type="checkbox"]')
 50 | 
 51 |   // ===================
 52 |   // Test for existence.
 53 |   // ===================
 54 | 
 55 |   it('exists in the page', function () {
 56 |     expect(T.isCompositeComponent(el)).toBe(true)
 57 |   })
 58 | 
 59 |   // ===============
 60 |   // Test for label.
 61 |   // ===============
 62 | 
 63 |   it('has associated label', function () {
 64 |     expect(parent.htmlFor).toBe(checkbox.id)
 65 |     expect(parent.textContent.trim()).toBe('example_label')
 66 |   })
 67 | 
 68 |   // ==================
 69 |   // Test for checkbox.
 70 |   // ==================
 71 | 
 72 |   it('is not checked', function () {
 73 |     expect(checkbox.checked).toBe(false)
 74 |   })
 75 | 
 76 |   it('is disabled', function () {
 77 |     expect(checkbox.disabled).toBe(true)
 78 |   })
 79 | 
 80 |   it('has correct ID', function () {
 81 |     expect(checkbox.id).toBe('example_id')
 82 |   })
 83 | 
 84 |   it('has correct name', function () {
 85 |     expect(checkbox.name).toBe('example_name')
 86 |   })
 87 | 
 88 |   it('has correct value', function () {
 89 |     expect(checkbox.value).toBe('example_value')
 90 |   })
 91 | 
 92 |   it('is required', function () {
 93 |     expect(checkbox.hasAttribute('required')).toBe(true)
 94 |   })
 95 | 
 96 |   it('responds to clicks', function () {
 97 |     // Fake click to check.
 98 |     T.Simulate.change(checkbox, {
 99 |       target: {
100 |         checked: true
101 |       }
102 |     })
103 |   })
104 | })
105 | 


--------------------------------------------------------------------------------
/__tests__/test_form_checkbox_list.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import CheckboxList from '../source/components/form_checkbox_list'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('CheckboxListInline', function () {
19 |   const options = [
20 |     {
21 |       label: 'example_label_0'
22 |     },
23 |     {
24 |       label: 'example_label_1'
25 |     }
26 |   ]
27 | 
28 |   // Insert the component into DOM.
29 |   const el = T.renderIntoDocument(
30 |     <CheckboxList options={options} />
31 |   )
32 | 
33 |   // Get parent element.
34 |   const parent = T.findRenderedDOMComponentWithClass(el, 't7-list-clean')
35 | 
36 |   // Get items.
37 |   const items = parent.querySelectorAll('li')
38 | 
39 |   // Get checkboxes.
40 |   const checkboxes = parent.querySelectorAll('input[type="checkbox"]')
41 | 
42 |   // ===================
43 |   // Test for existence.
44 |   // ===================
45 | 
46 |   it('exists in the page', function () {
47 |     expect(T.isCompositeComponent(el)).toBe(true)
48 |   })
49 | 
50 |   // ====================
51 |   // Test for list items.
52 |   // ====================
53 | 
54 |   it('has list items', function () {
55 |     expect(items.length).toBe(2)
56 |   })
57 | 
58 |   // ====================
59 |   // Test for checkboxes.
60 |   // ====================
61 | 
62 |   it('has checkboxes', function () {
63 |     expect(checkboxes.length).toBe(2)
64 |   })
65 | })
66 | 


--------------------------------------------------------------------------------
/__tests__/test_form_checkbox_list_inline.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import CheckboxListInline from '../source/components/form_checkbox_list_inline'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('CheckboxListInline', function () {
19 |   const options = [
20 |     {
21 |       label: 'example_label_0'
22 |     },
23 |     {
24 |       label: 'example_label_1'
25 |     }
26 |   ]
27 | 
28 |   // Insert the component into DOM.
29 |   const el = T.renderIntoDocument(
30 |     <CheckboxListInline options={options} />
31 |   )
32 | 
33 |   // Get parent element.
34 |   const parent = T.findRenderedDOMComponentWithClass(el, 't7-list-inline')
35 | 
36 |   // Get items.
37 |   const items = parent.querySelectorAll('li')
38 | 
39 |   // Get checkboxes.
40 |   const checkboxes = parent.querySelectorAll('input[type="checkbox"]')
41 | 
42 |   // ===================
43 |   // Test for existence.
44 |   // ===================
45 | 
46 |   it('exists in the page', function () {
47 |     expect(T.isCompositeComponent(el)).toBe(true)
48 |   })
49 | 
50 |   // ====================
51 |   // Test for list items.
52 |   // ====================
53 | 
54 |   it('has list items', function () {
55 |     expect(items.length).toBe(2)
56 |   })
57 | 
58 |   // ====================
59 |   // Test for checkboxes.
60 |   // ====================
61 | 
62 |   it('has checkboxes', function () {
63 |     expect(checkboxes.length).toBe(2)
64 |   })
65 | })
66 | 


--------------------------------------------------------------------------------
/__tests__/test_form_input.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import Input from '../source/components/form_input'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('Input', function () {
19 |   const disabled = true
20 |   const id = 'example_id'
21 |   const name = 'example_name'
22 |   const placeholder = 'example_placeholder'
23 |   const required = true
24 |   const type = 'search'
25 | 
26 |   // Must have `auto` width, to use `size`.
27 |   const size = '10'
28 |   const width = 'auto'
29 | 
30 |   // Insert the component into DOM.
31 |   const el = T.renderIntoDocument(
32 |     <Input
33 |       disabled={disabled}
34 |       id={id}
35 |       name={name}
36 |       placeholder={placeholder}
37 |       required={required}
38 |       type={type}
39 | 
40 |       size={size}
41 |       width={width}
42 |     />
43 |   )
44 | 
45 |   // Get input.
46 |   const input = T.findRenderedDOMComponentWithTag(el, 'input')
47 | 
48 |   // ===================
49 |   // Test for existence.
50 |   // ===================
51 | 
52 |   it('exists in the page', function () {
53 |     expect(T.isCompositeComponent(el)).toBe(true)
54 |   })
55 | 
56 |   // ===============
57 |   // Test for input.
58 |   // ===============
59 | 
60 |   it('is disabled', function () {
61 |     expect(input.disabled).toBe(true)
62 |   })
63 | 
64 |   it('has correct ID', function () {
65 |     expect(input.id).toBe('example_id')
66 |   })
67 | 
68 |   it('has correct name', function () {
69 |     expect(input.name).toBe('example_name')
70 |   })
71 | 
72 |   it('has placeholer', function () {
73 |     expect(input.getAttribute('placeholder')).toBe('example_placeholder')
74 |   })
75 | 
76 |   it('is required', function () {
77 |     expect(input.hasAttribute('required')).toBe(true)
78 |   })
79 | 
80 |   it('has correct type', function () {
81 |     expect(input.type).toBe('search')
82 |   })
83 | 
84 |   it('has correct size', function () {
85 |     expect(input.size).toBe(10)
86 |   })
87 | 
88 |   it('has auto width', function () {
89 |     expect(input.className).toMatch('t7-form__input--width-auto')
90 |   })
91 | })
92 | 


--------------------------------------------------------------------------------
/__tests__/test_form_radio.js:
--------------------------------------------------------------------------------
  1 | /*global
  2 | describe
  3 | expect
  4 | it
  5 | jest
  6 | */
  7 | 
  8 | jest.disableAutomock()
  9 | 
 10 | // Dependencies.
 11 | import React from 'react'
 12 | import T from 'react-addons-test-utils'
 13 | 
 14 | // UI components.
 15 | import Radio from '../source/components/form_radio'
 16 | 
 17 | // Describe `<Component/>` name.
 18 | describe('Radio', function () {
 19 |   const disabled = true
 20 |   const id = 'example_id'
 21 |   const label = 'example_label'
 22 |   const name = 'example_name'
 23 |   const required = true
 24 |   const value = 'example_value'
 25 | 
 26 |   // Called from `it responds to clicks`.
 27 |   function handleChange (e, value, checked) {
 28 |     expect(checked).toBe(true)
 29 |   }
 30 | 
 31 |   // Insert the component into DOM.
 32 |   const el = T.renderIntoDocument(
 33 |     <Radio
 34 |       disabled={disabled}
 35 |       id={id}
 36 |       label={label}
 37 |       name={name}
 38 |       required={required}
 39 |       value={value}
 40 | 
 41 |       handleChange={handleChange}
 42 |     />
 43 |   )
 44 | 
 45 |   // Get parent label.
 46 |   const parent = T.findRenderedDOMComponentWithTag(el, 'label')
 47 | 
 48 |   // Get radio.
 49 |   const radio = parent.querySelector('input[type="radio"]')
 50 | 
 51 |   // ===================
 52 |   // Test for existence.
 53 |   // ===================
 54 | 
 55 |   it('exists in the page', function () {
 56 |     expect(T.isCompositeComponent(el)).toBe(true)
 57 |   })
 58 | 
 59 |   // ===============
 60 |   // Test for label.
 61 |   // ===============
 62 | 
 63 |   it('has associated label', function () {
 64 |     expect(parent.htmlFor).toBe(radio.id)
 65 |     expect(parent.textContent.trim()).toBe('example_label')
 66 |   })
 67 | 
 68 |   // ===============
 69 |   // Test for radio.
 70 |   // ===============
 71 | 
 72 |   it('is not checked', function () {
 73 |     expect(radio.checked).toBe(false)
 74 |   })
 75 | 
 76 |   it('is disabled', function () {
 77 |     expect(radio.disabled).toBe(true)
 78 |   })
 79 | 
 80 |   it('has correct ID', function () {
 81 |     expect(radio.id).toBe('example_id')
 82 |   })
 83 | 
 84 |   it('has correct name', function () {
 85 |     expect(radio.name).toBe('example_name')
 86 |   })
 87 | 
 88 |   it('has correct value', function () {
 89 |     expect(radio.value).toBe('example_value')
 90 |   })
 91 | 
 92 |   it('is required', function () {
 93 |     expect(radio.hasAttribute('required')).toBe(true)
 94 |   })
 95 | 
 96 |   it('responds to clicks', function () {
 97 |     // Fake click to check.
 98 |     T.Simulate.change(radio, {
 99 |       target: {
100 |         checked: true
101 |       }
102 |     })
103 |   })
104 | })
105 | 


--------------------------------------------------------------------------------
/__tests__/test_form_radio_list.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import RadioList from '../source/components/form_radio_list'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('RadioList', function () {
19 |   const options = [
20 |     {
21 |       label: 'example_label_0'
22 |     },
23 |     {
24 |       label: 'example_label_1'
25 |     }
26 |   ]
27 | 
28 |   // Insert the component into DOM.
29 |   const el = T.renderIntoDocument(
30 |     <RadioList options={options} />
31 |   )
32 | 
33 |   // Get parent element.
34 |   const parent = T.findRenderedDOMComponentWithClass(el, 't7-list-clean')
35 | 
36 |   // Get items.
37 |   const items = parent.querySelectorAll('li')
38 | 
39 |   // Get radios.
40 |   const radio = parent.querySelectorAll('input[type="radio"]')
41 | 
42 |   // ===================
43 |   // Test for existence.
44 |   // ===================
45 | 
46 |   it('exists in the page', function () {
47 |     expect(T.isCompositeComponent(el)).toBe(true)
48 |   })
49 | 
50 |   // ====================
51 |   // Test for list items.
52 |   // ====================
53 | 
54 |   it('has list items', function () {
55 |     expect(items.length).toBe(2)
56 |   })
57 | 
58 |   // ================
59 |   // Test for radios.
60 |   // ================
61 | 
62 |   it('has radios', function () {
63 |     expect(radio.length).toBe(2)
64 |   })
65 | 
66 |   it('has shared name', function () {
67 |     expect(radio[0].name).toBe(radio[1].name)
68 |   })
69 | })
70 | 


--------------------------------------------------------------------------------
/__tests__/test_form_radio_list_inline.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import RadioListInline from '../source/components/form_radio_list_inline'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('RadioListInline', function () {
19 |   const options = [
20 |     {
21 |       label: 'example_label_0'
22 |     },
23 |     {
24 |       label: 'example_label_1'
25 |     }
26 |   ]
27 | 
28 |   // Insert the component into DOM.
29 |   const el = T.renderIntoDocument(
30 |     <RadioListInline options={options} />
31 |   )
32 | 
33 |   // Get parent element.
34 |   const parent = T.findRenderedDOMComponentWithClass(el, 't7-list-inline')
35 | 
36 |   // Get items.
37 |   const items = parent.querySelectorAll('li')
38 | 
39 |   // Get radios.
40 |   const radio = parent.querySelectorAll('input[type="radio"]')
41 | 
42 |   // ===================
43 |   // Test for existence.
44 |   // ===================
45 | 
46 |   it('exists in the page', function () {
47 |     expect(T.isCompositeComponent(el)).toBe(true)
48 |   })
49 | 
50 |   // ====================
51 |   // Test for list items.
52 |   // ====================
53 | 
54 |   it('has list items', function () {
55 |     expect(items.length).toBe(2)
56 |   })
57 | 
58 |   // ================
59 |   // Test for radios.
60 |   // ================
61 | 
62 |   it('has radios', function () {
63 |     expect(radio.length).toBe(2)
64 |   })
65 | 
66 |   it('has shared name', function () {
67 |     expect(radio[0].name).toBe(radio[1].name)
68 |   })
69 | })
70 | 


--------------------------------------------------------------------------------
/__tests__/test_form_search.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import Search from '../source/components/form_search'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('Search', function () {
19 |   const buttonText = 'example_text'
20 |   const defaultValue = 'example_value'
21 |   const placeholder = 'example_placeholder'
22 | 
23 |   // Called from `responds to submit`.
24 |   function handleSubmit (e, value) {
25 |     expect(value).toBe(defaultValue)
26 |   }
27 | 
28 |   // Insert the component into DOM.
29 |   const el = T.renderIntoDocument(
30 |     <Search
31 |       buttonText={buttonText}
32 |       defaultValue={defaultValue}
33 |       placeholder={placeholder}
34 | 
35 |       handleSubmit={handleSubmit}
36 |     />
37 |   )
38 | 
39 |   // Get parent `<form>`.
40 |   const form = T.findRenderedDOMComponentWithTag(el, 'form')
41 | 
42 |   // Get input.
43 |   const input = form.querySelector('input')
44 | 
45 |   // Get button.
46 |   const button = form.querySelector('button')
47 | 
48 |   // ===================
49 |   // Test for existence.
50 |   // ===================
51 | 
52 |   it('exists in the page', function () {
53 |     expect(T.isCompositeComponent(el)).toBe(true)
54 |   })
55 | 
56 |   // ================
57 |   // Test for search.
58 |   // ================
59 | 
60 |   it('has correct text', function () {
61 |     const x = button.textContent
62 | 
63 |     expect(x).toBe('example_text')
64 |   })
65 | 
66 |   it('has correct placeholder', function () {
67 |     const x = input.getAttribute('placeholder')
68 | 
69 |     expect(x).toBe('example_placeholder')
70 |   })
71 | 
72 |   // ================
73 |   // Test for submit.
74 |   // ================
75 | 
76 |   it('responds to submit', function () {
77 |     T.Simulate.submit(form)
78 |   })
79 | })
80 | 


--------------------------------------------------------------------------------
/__tests__/test_form_select.js:
--------------------------------------------------------------------------------
  1 | /*global
  2 | describe
  3 | expect
  4 | it
  5 | jest
  6 | */
  7 | 
  8 | jest.disableAutomock()
  9 | 
 10 | // Dependencies.
 11 | import React from 'react'
 12 | import T from 'react-addons-test-utils'
 13 | 
 14 | // UI components.
 15 | import Select from '../source/components/form_select'
 16 | 
 17 | // Describe `<Component/>` name.
 18 | describe('Select', function () {
 19 |   const options = [
 20 |     {
 21 |       value: 'value_0',
 22 |       name: 'name_0'
 23 |     },
 24 |     {
 25 |       value: 'value_1',
 26 |       name: 'name_1'
 27 |     }
 28 |   ]
 29 | 
 30 |   const ariaControls = 'example_aria'
 31 |   const disabled = true
 32 |   const id = 'example_id'
 33 |   const name = 'example_name'
 34 |   const required = true
 35 |   const defaultValue = 'value_1'
 36 | 
 37 |   // Called from `responds to change`.
 38 |   function handleChange (e, value) {
 39 |     expect(value).toBe('value_0')
 40 |   }
 41 | 
 42 |   // Insert the component into DOM.
 43 |   const el = T.renderIntoDocument(
 44 |     <Select
 45 |       ariaControls={ariaControls}
 46 |       disabled={disabled}
 47 |       id={id}
 48 |       name={name}
 49 |       options={options}
 50 |       required={required}
 51 | 
 52 |       defaultValue={defaultValue}
 53 | 
 54 |       handleChange={handleChange}
 55 |     />
 56 |   )
 57 | 
 58 |   // Get the `<select>`.
 59 |   const select = T.findRenderedDOMComponentWithTag(el, 'select')
 60 | 
 61 |   // Get options.
 62 |   const _options = select.querySelectorAll('option')
 63 | 
 64 |   // ===================
 65 |   // Test for existence.
 66 |   // ===================
 67 | 
 68 |   it('exists in the page', function () {
 69 |     expect(T.isCompositeComponent(el)).toBe(true)
 70 |   })
 71 | 
 72 |   // =================
 73 |   // Test for options.
 74 |   // =================
 75 | 
 76 |   it('has correct options', function () {
 77 |     expect(_options.length).toBe(2)
 78 | 
 79 |     // First option.
 80 |     expect(_options[0].value).toBe('value_0')
 81 |     expect(_options[0].innerHTML).toBe('name_0')
 82 | 
 83 |     // Second option.
 84 |     expect(_options[1].value).toBe('value_1')
 85 |     expect(_options[1].innerHTML).toBe('name_1')
 86 |   })
 87 | 
 88 |   // ================
 89 |   // Test for select.
 90 |   // ================
 91 | 
 92 |   it('has correct ARIA', function () {
 93 |     const x = select.getAttribute('aria-controls')
 94 | 
 95 |     expect(x).toBe('example_aria')
 96 |   })
 97 | 
 98 |   it('has correct value', function () {
 99 |     expect(select.value).toBe('value_1')
100 |   })
101 | 
102 |   it('is disabled', function () {
103 |     expect(select.disabled).toBe(true)
104 |   })
105 | 
106 |   it('has correct ID', function () {
107 |     expect(select.id).toBe('example_id')
108 |   })
109 | 
110 |   it('has correct name', function () {
111 |     expect(select.name).toBe('example_name')
112 |   })
113 | 
114 |   it('is required', function () {
115 |     expect(select.hasAttribute('required')).toBe(true)
116 |   })
117 | 
118 |   it('responds to change', function () {
119 |     T.Simulate.change(select, {
120 |       target: {
121 |         value: 'value_0'
122 |       }
123 |     })
124 |   })
125 | })
126 | 


--------------------------------------------------------------------------------
/__tests__/test_form_textarea.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import Textarea from '../source/components/form_textarea'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('Textarea', function () {
19 |   // Event callback.
20 |   function handleChange (e, value) {
21 |     expect(value).toBe('new_value')
22 |   }
23 | 
24 |   const disabled = true
25 |   const id = 'example_id'
26 |   const name = 'example_name'
27 |   const placeholder = 'example_placeholder'
28 |   const required = true
29 | 
30 |   // Determine pre-filled text.
31 |   const defaultValue = 'example_value'
32 | 
33 |   // Insert the component into DOM.
34 |   const el = T.renderIntoDocument(
35 |     <Textarea
36 |       disabled={disabled}
37 |       id={id}
38 |       name={name}
39 |       placeholder={placeholder}
40 |       required={required}
41 | 
42 |       defaultValue={defaultValue}
43 | 
44 |       handleChange={handleChange}
45 |     />
46 |   )
47 | 
48 |   // Get the `<textarea>`.
49 |   const textarea = T.findRenderedDOMComponentWithTag(el, 'textarea')
50 | 
51 |   // ===================
52 |   // Test for existence.
53 |   // ===================
54 | 
55 |   it('exists in the page', function () {
56 |     expect(T.isCompositeComponent(el)).toBe(true)
57 |   })
58 | 
59 |   // ==================
60 |   // Test for textarea.
61 |   // ==================
62 | 
63 |   it('is disabled', function () {
64 |     expect(textarea.disabled).toBe(true)
65 |   })
66 | 
67 |   it('has correct ID', function () {
68 |     expect(textarea.id).toBe('example_id')
69 |   })
70 | 
71 |   it('has correct name', function () {
72 |     expect(textarea.name).toBe('example_name')
73 |   })
74 | 
75 |   it('has correct placeholder', function () {
76 |     const x = textarea.getAttribute('placeholder')
77 | 
78 |     expect(x).toBe('example_placeholder')
79 |   })
80 | 
81 |   it('is required', function () {
82 |     expect(textarea.hasAttribute('required')).toBe(true)
83 |   })
84 | 
85 |   it('has correct value', function () {
86 |     expect(textarea.value).toBe('example_value')
87 |   })
88 | 
89 |   it('responds to change', function () {
90 |     T.Simulate.change(textarea, {
91 |       target: {
92 |         value: 'new_value'
93 |       }
94 |     })
95 |   })
96 | })
97 | 


--------------------------------------------------------------------------------
/__tests__/test_form_textdiv.js:
--------------------------------------------------------------------------------
  1 | /*global
  2 | describe
  3 | expect
  4 | it
  5 | jest
  6 | */
  7 | 
  8 | jest.disableAutomock()
  9 | 
 10 | // Dependencies.
 11 | import React from 'react'
 12 | import T from 'react-addons-test-utils'
 13 | 
 14 | // UI components.
 15 | import Textdiv from '../source/components/form_textdiv'
 16 | 
 17 | // Describe `<Component/>` name.
 18 | describe('Textdiv', function () {
 19 |   // Event callback.
 20 |   function handleChange (e, value) {
 21 |     expect(value).toBe('new_value')
 22 |   }
 23 | 
 24 |   const disabled = true
 25 |   const id = 'example_id'
 26 |   const name = 'example_name'
 27 |   const placeholder = 'example_placeholder'
 28 |   const required = true
 29 | 
 30 |   // Determine pre-filled text.
 31 |   const defaultValue = 'example_value'
 32 | 
 33 |   // Insert the component into DOM.
 34 |   const el = T.renderIntoDocument(
 35 |     <Textdiv
 36 |       disabled={disabled}
 37 |       id={id}
 38 |       name={name}
 39 |       placeholder={placeholder}
 40 |       required={required}
 41 | 
 42 |       defaultValue={defaultValue}
 43 | 
 44 |       handleChange={handleChange}
 45 |     />
 46 |   )
 47 | 
 48 |   // Get the `<div>`.
 49 |   const textdiv = T.findRenderedDOMComponentWithTag(el, 'div')
 50 | 
 51 |   // ===================
 52 |   // Test for existence.
 53 |   // ===================
 54 | 
 55 |   it('exists in the page', function () {
 56 |     expect(T.isCompositeComponent(el)).toBe(true)
 57 |   })
 58 | 
 59 |   // =================
 60 |   // Test for textdiv.
 61 |   // =================
 62 | 
 63 |   it('is disabled', function () {
 64 |     expect(textdiv.hasAttribute('disabled')).toBe(true)
 65 |   })
 66 | 
 67 |   it('editing is off', function () {
 68 |     expect(textdiv.getAttribute('contenteditable')).toBe('false')
 69 |   })
 70 | 
 71 |   it('has correct ID', function () {
 72 |     expect(textdiv.id).toBe('example_id')
 73 |   })
 74 | 
 75 |   it('has correct name', function () {
 76 |     expect(textdiv.getAttribute('name')).toBe('example_name')
 77 |   })
 78 | 
 79 |   it('has correct placeholder', function () {
 80 |     const x = textdiv.getAttribute('placeholder')
 81 | 
 82 |     expect(x).toBe('example_placeholder')
 83 |   })
 84 | 
 85 |   it('is required', function () {
 86 |     expect(textdiv.hasAttribute('required')).toBe(true)
 87 |   })
 88 | 
 89 |   it('has correct value', function () {
 90 |     expect(textdiv.innerHTML).toBe('example_value')
 91 |   })
 92 | 
 93 |   it('responds to change', function () {
 94 |     T.Simulate.input(textdiv, {
 95 |       target: {
 96 |         innerHTML: 'new_value'
 97 |       }
 98 |     })
 99 |   })
100 | })
101 | 


--------------------------------------------------------------------------------
/__tests__/test_image.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import Image from '../source/components/image'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('Image', function () {
19 |   const alt = 'example_alt'
20 |   const border = '#999'
21 |   const src = 'photo.jpg'
22 |   const width = '100'
23 |   const height = '50'
24 | 
25 |   // Insert the component into DOM.
26 |   const el = T.renderIntoDocument(
27 |     <Image
28 |       alt={alt}
29 |       border={border}
30 |       src={src}
31 |       width={width}
32 |       height={height}
33 |     />
34 |   )
35 | 
36 |   // Get the `<img/>`.
37 |   const image = T.findRenderedDOMComponentWithTag(el, 'img')
38 | 
39 |   // ===================
40 |   // Test for existence.
41 |   // ===================
42 | 
43 |   it('exists in the page', function () {
44 |     expect(T.isCompositeComponent(el)).toBe(true)
45 |   })
46 | 
47 |   // ===============
48 |   // Test for image.
49 |   // ===============
50 | 
51 |   it('has alt text', function () {
52 |     expect(image.getAttribute('alt')).toBe('example_alt')
53 |   })
54 | 
55 |   it('has a border', function () {
56 |     expect(image.getAttribute('style')).toContain('1px solid #999')
57 |   })
58 | 
59 |   it('has correct source', function () {
60 |     expect(image.getAttribute('src')).toBe('photo.jpg')
61 |   })
62 | 
63 |   it('has correct width', function () {
64 |     expect(image.getAttribute('width')).toBe('100')
65 |   })
66 | 
67 |   it('has correct height', function () {
68 |     expect(image.getAttribute('height')).toBe('50')
69 |   })
70 | })
71 | 


--------------------------------------------------------------------------------
/__tests__/test_image_figure.js:
--------------------------------------------------------------------------------
  1 | /*global
  2 | describe
  3 | expect
  4 | it
  5 | jest
  6 | */
  7 | 
  8 | jest.disableAutomock()
  9 | 
 10 | // Dependencies.
 11 | import React from 'react'
 12 | import T from 'react-addons-test-utils'
 13 | 
 14 | // UI components.
 15 | import ImageFigure from '../source/components/image_figure'
 16 | 
 17 | // Describe `<Component/>` name.
 18 | describe('ImageFigure', function () {
 19 |   const alt = 'example_alt'
 20 |   const border = '#999'
 21 |   const caption = 'example_caption'
 22 |   const captionTop = true
 23 |   const href = 'http://example.com/'
 24 |   const src = 'photo.jpg'
 25 |   const target = '_blank'
 26 |   const width = '100'
 27 |   const height = '50'
 28 | 
 29 |   // Insert the component into DOM.
 30 |   const el = T.renderIntoDocument(
 31 |     <ImageFigure
 32 |       alt={alt}
 33 |       border={border}
 34 |       caption={caption}
 35 |       captionTop={captionTop}
 36 |       href={href}
 37 |       src={src}
 38 |       target={target}
 39 |       width={width}
 40 |       height={height}
 41 |     />
 42 |   )
 43 | 
 44 |   // Get parent `<figure>`.
 45 |   const parent = T.findRenderedDOMComponentWithTag(el, 'figure')
 46 | 
 47 |   // Get the `<a>`.
 48 |   const link = parent.querySelector('a')
 49 | 
 50 |   // Get the `<img/>`.
 51 |   const image = parent.querySelector('img')
 52 | 
 53 |   // Get the `<figcaption>`.
 54 |   const figcaption = parent.querySelector('figcaption')
 55 | 
 56 |   // ===================
 57 |   // Test for existence.
 58 |   // ===================
 59 | 
 60 |   it('exists in the page', function () {
 61 |     expect(T.isCompositeComponent(el)).toBe(true)
 62 |   })
 63 | 
 64 |   // ===============
 65 |   // Test for image.
 66 |   // ===============
 67 | 
 68 |   it('has alt text', function () {
 69 |     expect(image.getAttribute('alt')).toBe('example_alt')
 70 |   })
 71 | 
 72 |   it('has a border', function () {
 73 |     expect(image.getAttribute('style')).toContain('1px solid #999')
 74 |   })
 75 | 
 76 |   it('has correct source', function () {
 77 |     expect(image.getAttribute('src')).toBe('photo.jpg')
 78 |   })
 79 | 
 80 |   it('has correct width', function () {
 81 |     expect(image.getAttribute('width')).toBe('100')
 82 |   })
 83 | 
 84 |   it('has correct height', function () {
 85 |     expect(image.getAttribute('height')).toBe('50')
 86 |   })
 87 | 
 88 |   // ===============
 89 |   // Test for image.
 90 |   // ===============
 91 | 
 92 |   it('has correct href', function () {
 93 |     expect(link.getAttribute('href')).toBe('http://example.com/')
 94 |   })
 95 | 
 96 |   it('has correct target', function () {
 97 |     expect(link.getAttribute('target')).toBe('_blank')
 98 |   })
 99 | 
100 |   // =================
101 |   // Test for caption.
102 |   // =================
103 | 
104 |   it('has correct caption text', function () {
105 |     expect(figcaption.innerHTML).toBe('example_caption')
106 |   })
107 | 
108 |   it('has correct caption position', function () {
109 |     const x = parent.querySelectorAll('figcaption + a > img').length
110 | 
111 |     expect(x).toBe(1)
112 |   })
113 | })
114 | 


--------------------------------------------------------------------------------
/__tests__/test_list_clean.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import ListClean from '../source/components/list_clean'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('ListClean', function () {
19 |   // Insert the component into DOM.
20 |   const el = T.renderIntoDocument(
21 |     <ListClean>
22 |       <li>
23 |         list_item_0
24 |       </li>
25 |       <li>
26 |         list_item_1
27 |       </li>
28 |     </ListClean>
29 |   )
30 | 
31 |   // Get the `<ul>`.
32 |   const ul = T.findRenderedDOMComponentWithClass(el, 't7-list-clean')
33 | 
34 |   // Get the `<li>`.
35 |   const li = ul.querySelectorAll('li')
36 | 
37 |   // ===================
38 |   // Test for existence.
39 |   // ===================
40 | 
41 |   it('exists in the page', function () {
42 |     expect(T.isCompositeComponent(el)).toBe(true)
43 |   })
44 | 
45 |   // ==============
46 |   // Test for list.
47 |   // ==============
48 | 
49 |   it('has list items', function () {
50 |     expect(li.length).toBe(2)
51 |     expect(li[0].innerHTML).toBe('list_item_0')
52 |     expect(li[1].innerHTML).toBe('list_item_1')
53 |   })
54 | })
55 | 


--------------------------------------------------------------------------------
/__tests__/test_list_inline.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import ListInline from '../source/components/list_inline'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('ListInline', function () {
19 |   // Insert the component into DOM.
20 |   const el = T.renderIntoDocument(
21 |     <ListInline>
22 |       <li>
23 |         list_item_0
24 |       </li>
25 |       <li>
26 |         list_item_1
27 |       </li>
28 |     </ListInline>
29 |   )
30 | 
31 |   // Get the `<ul>`.
32 |   const ul = T.findRenderedDOMComponentWithClass(el, 't7-list-inline')
33 | 
34 |   // Get the `<li>`.
35 |   const li = ul.querySelectorAll('li')
36 | 
37 |   // ===================
38 |   // Test for existence.
39 |   // ===================
40 | 
41 |   it('exists in the page', function () {
42 |     expect(T.isCompositeComponent(el)).toBe(true)
43 |   })
44 | 
45 |   // ==============
46 |   // Test for list.
47 |   // ==============
48 | 
49 |   it('has list items', function () {
50 |     expect(li.length).toBe(2)
51 |     expect(li[0].innerHTML).toBe('list_item_0')
52 |     expect(li[1].innerHTML).toBe('list_item_1')
53 |   })
54 | })
55 | 


--------------------------------------------------------------------------------
/__tests__/test_list_separator.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import ListSeparator from '../source/components/list_separator'
16 | 
17 | // Describe `<Component/>` name.
18 | describe('ListSeparator', function () {
19 |   // Insert the component into DOM.
20 |   const el = T.renderIntoDocument(
21 |     <ListSeparator>
22 |       <li>
23 |         list_item_0
24 |       </li>
25 |       <li>
26 |         list_item_1
27 |       </li>
28 |     </ListSeparator>
29 |   )
30 | 
31 |   // Get the `<ul>`.
32 |   const ul = T.findRenderedDOMComponentWithClass(el, 't7-list-separator')
33 | 
34 |   // Get the `<li>`.
35 |   const li = ul.querySelectorAll('li')
36 | 
37 |   // ===================
38 |   // Test for existence.
39 |   // ===================
40 | 
41 |   it('exists in the page', function () {
42 |     expect(T.isCompositeComponent(el)).toBe(true)
43 |   })
44 | 
45 |   // ==============
46 |   // Test for list.
47 |   // ==============
48 | 
49 |   it('has list items', function () {
50 |     expect(li.length).toBe(2)
51 |     expect(li[0].innerHTML).toBe('list_item_0')
52 |     expect(li[1].innerHTML).toBe('list_item_1')
53 |   })
54 | })
55 | 


--------------------------------------------------------------------------------
/__tests__/test_tabs.js:
--------------------------------------------------------------------------------
 1 | /*global
 2 | describe
 3 | expect
 4 | it
 5 | jest
 6 | */
 7 | 
 8 | jest.disableAutomock()
 9 | 
10 | // Dependencies.
11 | import React from 'react'
12 | import T from 'react-addons-test-utils'
13 | 
14 | // UI components.
15 | import Tabs from '../source/components/tabs'
16 | import TabPanel from '../source/components/tabs/template_panel'
17 | 
18 | // Describe `<Component/>` name.
19 | describe('Tabs', function () {
20 |   // Insert the component into DOM.
21 |   const el = T.renderIntoDocument(
22 |     <Tabs selected={0}>
23 |       <TabPanel label='Tab 1'>
24 |         <p>
25 |           Tab content for "Tab 1"
26 |         </p>
27 |       </TabPanel>
28 |       <TabPanel label='Tab 2'>
29 |         <p>
30 |           Tab content for "Tab 2"
31 |         </p>
32 |       </TabPanel>
33 |     </Tabs>
34 |   )
35 | 
36 |   // Get parent element.
37 |   const parent = T.findRenderedDOMComponentWithClass(el, 't7-tabs')
38 | 
39 |   // Get headers and panels.
40 |   const tabs = parent.querySelectorAll('.t7-tabs__item')
41 |   const panels = parent.querySelectorAll('.t7-tabs__panel')
42 | 
43 |   // ===================
44 |   // Test for existence.
45 |   // ===================
46 | 
47 |   it('exists in the page', function () {
48 |     expect(T.isCompositeComponent(el)).toBe(true)
49 |   })
50 | 
51 |   // ==============
52 |   // Test for tabs.
53 |   // ==============
54 | 
55 |   it('has child tabs', function () {
56 |     expect(tabs.length).toBe(2)
57 |   })
58 | 
59 |   // ================
60 |   // Test for panels.
61 |   // ================
62 | 
63 |   it('has child panels', function () {
64 |     expect(panels.length).toBe(2)
65 |   })
66 | 
67 |   // ================
68 |   // Test for events.
69 |   // ================
70 | 
71 |   it('responds to clicks', function () {
72 |     T.Simulate.click(tabs[1])
73 | 
74 |     // First panel = off.
75 |     expect(tabs[0].getAttribute('aria-selected')).toBe('false')
76 |     expect(panels[0].getAttribute('aria-hidden')).toBe('true')
77 | 
78 |     // Second panel = on.
79 |     expect(tabs[1].getAttribute('aria-selected')).toBe('true')
80 |     expect(panels[1].getAttribute('aria-hidden')).toBe('false')
81 |   })
82 | })
83 | 


--------------------------------------------------------------------------------
/design_assets/t7-icons.sketch:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/t7/react-starter/486dff426449a1711c8aca14d2ca592e7b3777fb/design_assets/t7-icons.sketch


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "description": "T7 React starter project",
 3 |   "license": "MIT",
 4 |   "repository": {
 5 |     "type": "git",
 6 |     "url": "git+https://github.com/t7/react-starter.git"
 7 |   },
 8 |   "babel": {
 9 |     "presets": [
10 |       "react",
11 |       "es2015"
12 |     ],
13 |     "plugins": [
14 |       "transform-runtime"
15 |     ],
16 |     "env": {
17 |       "test": {
18 |         "sourceMaps": "inline"
19 |       }
20 |     }
21 |   },
22 |   "jest": {
23 |     "unmockedModulePathPatterns": [
24 |       "<rootDir>"
25 |     ],
26 |     "moduleFileExtensions": [
27 |       "js"
28 |     ],
29 |     "testFileExtensions": [
30 |       "js"
31 |     ]
32 |   },
33 |   "scripts": {
34 |     "build": "npm run test && rimraf build/* && cross-env BABEL_ENV=production webpack",
35 |     "start": "cross-env BABEL_ENV=development webpack-dev-server --hot --inline --progress --content-base source",
36 |     "pretest": "npm run lint",
37 |     "test": "jest --coverage",
38 |     "lint": "npm run lint:js && npm run lint:css",
39 |     "lint:js": "eslint 'source/**/*.js'",
40 |     "lint:css": "sass-lint source/scss/**/*.scss -q -v -f html -o sass-lint.html",
41 |     "prepush": "npm test",
42 |     "postmerge": "npm install"
43 |   },
44 |   "devDependencies": {
45 |     "accounting": "0.4.1",
46 |     "autoprefixer": "6.5.2",
47 |     "babel-core": "6.18.2",
48 |     "babel-jest": "11.0.2",
49 |     "babel-loader": "6.2.7",
50 |     "babel-plugin-transform-runtime": "6.15.0",
51 |     "babel-preset-es2015": "6.18.0",
52 |     "babel-preset-react": "6.16.0",
53 |     "babel-runtime": "6.18.0",
54 |     "copy-webpack-plugin": "2.1.6",
55 |     "cross-env": "1.0.8",
56 |     "css-loader": "0.23.1",
57 |     "es6-promise": "3.3.1",
58 |     "eslint": "3.9.1",
59 |     "eslint-config-standard": "6.2.1",
60 |     "eslint-config-standard-jsx": "3.2.0",
61 |     "eslint-config-standard-react": "4.2.0",
62 |     "eslint-plugin-promise": "3.3.1",
63 |     "eslint-plugin-react": "6.6.0",
64 |     "eslint-plugin-standard": "2.0.1",
65 |     "exports-loader": "0.6.3",
66 |     "extract-text-webpack-plugin": "1.0.1",
67 |     "history": "2.1.2",
68 |     "html-webpack-plugin": "2.24.1",
69 |     "husky": "0.11.9",
70 |     "imports-loader": "0.6.5",
71 |     "jest-cli": "11.0.1",
72 |     "json-loader": "0.5.4",
73 |     "lodash": "4.16.6",
74 |     "marked": "0.3.6",
75 |     "moment": "2.15.2",
76 |     "node-sass": "3.11.2",
77 |     "npm": "3.10.10",
78 |     "postcss": "5.2.5",
79 |     "postcss-loader": "0.8.2",
80 |     "raw-loader": "0.5.1",
81 |     "react": "15.3.2",
82 |     "react-addons-test-utils": "15.3.2",
83 |     "react-dom": "15.0.2",
84 |     "react-hot-loader": "1.3.0",
85 |     "react-redux": "4.4.5",
86 |     "react-router": "2.8.1",
87 |     "redux": "3.6.0",
88 |     "rimraf": "2.5.2",
89 |     "sass-lint": "1.10.1",
90 |     "sass-loader": "3.2.3",
91 |     "style-loader": "0.13.1",
92 |     "unsemantic": "1.1.3",
93 |     "webpack": "1.13.3",
94 |     "webpack-dev-server": "1.16.2",
95 |     "whatwg-fetch": "0.11.1"
96 |   }
97 | }
98 | 


--------------------------------------------------------------------------------
/source/components/accordion/README.md:
--------------------------------------------------------------------------------
 1 | This component functions similarly to `<AccordionMulti/>` except that it only allows for one area to be expanded at a time.
 2 | 
 3 | By default, accordion areas are collapsed. To render an area open, pass an object with the corresponding index set to `true`.
 4 | 
 5 | ```js
 6 | const selected = {
 7 |   0: true
 8 | }
 9 | 
10 | function handleClick (e, index, label, selected) {
11 |   /*
12 |     `e` is the event.
13 | 
14 |     `index` is the numeric position.
15 | 
16 |     `label` is the text itself.
17 | 
18 |     `selected` is the state object.
19 |   */
20 | }
21 | ```
22 | 
23 | ```xml
24 | <Accordion selected={selected} handleClick={handleClick}>
25 |   <AccordionPanel label='Item 1'>
26 |     <p>
27 |       Content for "Item 1"
28 |     </p>
29 |   </AccordionPanel>
30 |   <AccordionPanel label='Item 2'>
31 |     <p>
32 |       Content for "Item 2"
33 |     </p>
34 |   </AccordionPanel>
35 |   <AccordionPanel label='Item 3'>
36 |     <p>
37 |       Content for "Item 3"
38 |     </p>
39 |   </AccordionPanel>
40 | </Accordion>
41 | ```


--------------------------------------------------------------------------------
/source/components/accordion/template_header.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // Utility methods.
 5 | import utils from '../../utils'
 6 | 
 7 | // Define class.
 8 | class AccordionHeader extends React.Component {
 9 |   constructor (props) {
10 |     // Pass `props` into scope.
11 |     super(props)
12 | 
13 |     // Bind context.
14 |     utils.bind(this)
15 |   }
16 | 
17 |   // Click handler.
18 |   handleClick (e) {
19 |     const keyPress = e.keyCode
20 |     const keyEnter = keyPress === 13
21 | 
22 |     // Exit, if not "Enter" key.
23 |     if (keyPress && !keyEnter) {
24 |       return
25 |     }
26 | 
27 |     const handleClick = this.props.handleClick
28 | 
29 |     if (typeof handleClick !== 'function') {
30 |       return
31 |     }
32 | 
33 |     const index = this.props.index
34 |     const label = this.props.label
35 | 
36 |     handleClick(e, index, label)
37 |   }
38 | 
39 |   // Render method.
40 |   render () {
41 |     const ariaControls = this.props.ariaControls
42 |     const ariaExpanded = this.props.ariaExpanded
43 |     const ariaSelected = this.props.ariaSelected
44 | 
45 |     const className = this.props.className
46 |     const id = this.props.id
47 |     const label = this.props.label
48 | 
49 |     const handleClick = this.handleClick
50 | 
51 |     return (
52 |       <dt
53 |         aria-controls={ariaControls}
54 |         aria-expanded={ariaExpanded}
55 |         aria-selected={ariaSelected}
56 |         className={className}
57 |         id={id}
58 |         key={id}
59 |         role='tab'
60 |         tabIndex='0'
61 | 
62 |         onClick={handleClick}
63 |         onKeyDown={handleClick}
64 |       >
65 |         <span
66 |           aria-hidden='true'
67 |           className='t7-accordion__header__icon'
68 |         />
69 |         {label}
70 |       </dt>
71 |     )
72 |   }
73 | }
74 | 
75 | // Validation.
76 | AccordionHeader.propTypes = {
77 |   ariaControls: React.PropTypes.string,
78 |   ariaExpanded: React.PropTypes.bool,
79 |   ariaSelected: React.PropTypes.bool,
80 | 
81 |   className: React.PropTypes.string,
82 |   id: React.PropTypes.string,
83 |   index: React.PropTypes.number,
84 |   label: React.PropTypes.string,
85 | 
86 |   handleClick: React.PropTypes.func
87 | }
88 | 
89 | // Defaults.
90 | AccordionHeader.defaultProps = {
91 |   ariaExpanded: false,
92 |   ariaSelected: false
93 | }
94 | 
95 | // Export.
96 | export default AccordionHeader
97 | 


--------------------------------------------------------------------------------
/source/components/accordion/template_panel.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // Define class.
 5 | class AccordionPanel extends React.Component {
 6 | }
 7 | 
 8 | // Validation.
 9 | AccordionPanel.propTypes = {
10 |   children: React.PropTypes.node,
11 |   label: React.PropTypes.string
12 | }
13 | 
14 | // Export.
15 | export default AccordionPanel
16 | 


--------------------------------------------------------------------------------
/source/components/accordion_multi/README.md:
--------------------------------------------------------------------------------
 1 | This component functions similarly to `<Accordion/>` except that it allows for multiple areas to be expanded at a time.
 2 | 
 3 | By default, accordion areas are collapsed. To render an area open, pass an object with the corresponding index set to `true`.
 4 | 
 5 | ```js
 6 | const selected = {
 7 |   0: true,
 8 |   1: true,
 9 |   2: true
10 | }
11 | 
12 | function handleClick (e, index, label, selected) {
13 |   /*
14 |     `e` is the event.
15 | 
16 |     `index` is the numeric position.
17 | 
18 |     `label` is the text itself.
19 | 
20 |     `selected` is the state object.
21 |   */
22 | }
23 | ```
24 | 
25 | ```xml
26 | <AccordionMulti selected={selected} handleClick={handleClick}>
27 |   <AccordionPanel label='Item 1'>
28 |     <p>
29 |       Content for "Item 1"
30 |     </p>
31 |   </AccordionPanel>
32 |   <AccordionPanel label='Item 2'>
33 |     <p>
34 |       Content for "Item 2"
35 |     </p>
36 |   </AccordionPanel>
37 |   <AccordionPanel label='Item 3'>
38 |     <p>
39 |       Content for "Item 3"
40 |     </p>
41 |   </AccordionPanel>
42 | </AccordionMulti>
43 | ```


--------------------------------------------------------------------------------
/source/components/accordion_multi/index.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // Utility methods.
 5 | import fake from '../../fake'
 6 | 
 7 | // UI components.
 8 | import Accordion from '../accordion'
 9 | 
10 | // Define class.
11 | class AccordionMulti extends React.Component {
12 |   // Render method.
13 |   render () {
14 |     return (
15 |       <Accordion {...this.props} multi />
16 |     )
17 |   }
18 | }
19 | 
20 | // Validation.
21 | AccordionMulti.propTypes = {
22 |   children: React.PropTypes.node,
23 |   id: React.PropTypes.string,
24 |   selected: React.PropTypes.object
25 | }
26 | 
27 | // Defaults.
28 | AccordionMulti.defaultProps = {
29 |   children: fake.accordion()
30 | }
31 | 
32 | // Export.
33 | export default AccordionMulti
34 | 


--------------------------------------------------------------------------------
/source/components/box/README.md:
--------------------------------------------------------------------------------
1 | This component can be used like so.
2 | 
3 | ```xml
4 | <Box>
5 |   <p>
6 |     Lorem ipsum dolor sit amet...
7 |   </p>
8 | </Box>
9 | ```


--------------------------------------------------------------------------------
/source/components/box_info/README.md:
--------------------------------------------------------------------------------
1 | This component can be used like so.
2 | 
3 | ```xml
4 | <BoxInfo>
5 |   <p>
6 |     Lorem ipsum dolor sit amet...
7 |   </p>
8 | </BoxInfo>
9 | ```


--------------------------------------------------------------------------------
/source/components/box_info/index.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // UI components.
 5 | import Box from '../box'
 6 | 
 7 | // Define class.
 8 | class BoxInfo extends React.Component {
 9 |   // Render method.
10 |   render () {
11 |     return (
12 |       <Box {...this.props} mode='info' />
13 |     )
14 |   }
15 | }
16 | 
17 | // Defaults.
18 | BoxInfo.defaultProps = {
19 |   children: 'Something happened, yo.',
20 |   close: true,
21 |   icon: true
22 | }
23 | 
24 | // Export.
25 | export default BoxInfo
26 | 


--------------------------------------------------------------------------------
/source/components/box_negative/README.md:
--------------------------------------------------------------------------------
1 | This component can be used like so.
2 | 
3 | ```xml
4 | <BoxNegative>
5 |   <p>
6 |     Lorem ipsum dolor sit amet...
7 |   </p>
8 | </BoxNegative>
9 | ```


--------------------------------------------------------------------------------
/source/components/box_negative/index.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // UI components.
 5 | import Box from '../box'
 6 | 
 7 | // Define class.
 8 | class BoxNegative extends React.Component {
 9 |   // Render method.
10 |   render () {
11 |     return (
12 |       <Box {...this.props} mode='negative' />
13 |     )
14 |   }
15 | }
16 | 
17 | // Defaults.
18 | BoxNegative.defaultProps = {
19 |   children: 'Something bad happened, yo.',
20 |   close: true,
21 |   icon: true
22 | }
23 | 
24 | // Export.
25 | export default BoxNegative
26 | 


--------------------------------------------------------------------------------
/source/components/box_positive/README.md:
--------------------------------------------------------------------------------
1 | This component can be used like so.
2 | 
3 | ```xml
4 | <BoxPositive>
5 |   <p>
6 |     Lorem ipsum dolor sit amet...
7 |   </p>
8 | </BoxPositive>
9 | ```


--------------------------------------------------------------------------------
/source/components/box_positive/index.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // UI components.
 5 | import Box from '../box'
 6 | 
 7 | // Define class.
 8 | class BoxWarn extends React.Component {
 9 |   // Render method.
10 |   render () {
11 |     return (
12 |       <Box {...this.props} mode='positive' />
13 |     )
14 |   }
15 | }
16 | 
17 | // Defaults.
18 | BoxWarn.defaultProps = {
19 |   children: 'Something good happened, yo.',
20 |   close: true,
21 |   icon: true
22 | }
23 | 
24 | // Export.
25 | export default BoxWarn
26 | 


--------------------------------------------------------------------------------
/source/components/box_warn/README.md:
--------------------------------------------------------------------------------
1 | This component can be used like so.
2 | 
3 | ```xml
4 | <BoxWarn>
5 |   <p>
6 |     Lorem ipsum dolor sit amet...
7 |   </p>
8 | </BoxWarn>
9 | ```


--------------------------------------------------------------------------------
/source/components/box_warn/index.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // UI components.
 5 | import Box from '../box'
 6 | 
 7 | // Define class.
 8 | class BoxWarn extends React.Component {
 9 |   // Render method.
10 |   render () {
11 |     return (
12 |       <Box {...this.props} mode='warn' />
13 |     )
14 |   }
15 | }
16 | 
17 | // Defaults.
18 | BoxWarn.defaultProps = {
19 |   children: 'Something "meh" happened, yo.',
20 |   close: true,
21 |   icon: true
22 | }
23 | 
24 | // Export.
25 | export default BoxWarn
26 | 


--------------------------------------------------------------------------------
/source/components/data_table/README.md:
--------------------------------------------------------------------------------
 1 | This component can be used like so.
 2 | 
 3 | ```js
 4 | /*
 5 |   You would likely get this data from an API,
 6 |   but for this example, these are hard-coded
 7 |   arrays for the columns and data (rows).
 8 | */
 9 | 
10 | const columns = [
11 |   {
12 |     title: 'Date',
13 |     type: 'date',
14 |     field: 'date',
15 |     sortable: true
16 |   },
17 |   {
18 |     title: 'Description',
19 |     field: 'description',
20 |     sortable: true
21 |   },
22 |   {
23 |     title: 'Category',
24 |     field: 'category',
25 |     sortable: true
26 |   },
27 |   {
28 |     title: 'Amount',
29 |     type: 'currency',
30 |     field: 'amount',
31 |     sortable: true
32 |   },
33 |   {
34 |     title: 'Balance',
35 |     field: 'balance',
36 |     type: 'currency'
37 |   }
38 | ]
39 | 
40 | const data = [
41 |   {
42 |     date: 1444338711008,
43 |     description: "Lorem ipsum dolor sit amet...",
44 |     category: "Expense",
45 |     amount: -657.8544315416366,
46 |     balance: 19342.145568458363
47 |   },
48 |   {
49 |     date: 1444252311008,
50 |     description: "Ut enim ad minim veniam...",
51 |     category: "Revenue",
52 |     amount: 225.9504753164947,
53 |     balance: 19568.096043774858
54 |   }
55 | ]
56 | ```
57 | 
58 | To use the component, pass these props.
59 | 
60 | **Note:** The following example shows the defaults for each prop. Meaning, `pageTop` is default. If you want pagination on the bottom, you could set `pageTop={false}` and `pageBottom={true}`.
61 | 
62 | ```xml
63 | <DataTable
64 |   columns={columns}
65 |   data={data}
66 | 
67 |   pageTop={true}
68 |   pageBottom={false}
69 |   pageSize={20}
70 |   sortIndex={0}
71 |   sortDirection='desc'
72 | />
73 | ```


--------------------------------------------------------------------------------
/source/components/data_table/template_td.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | import accounting from 'accounting'
 4 | import moment from 'moment'
 5 | 
 6 | // Define class.
 7 | class DataTableCell extends React.Component {
 8 |   constructor (props) {
 9 |     // Pass `props` into scope.
10 |     super(props)
11 | 
12 |     // Money formatting.
13 |     accounting.settings.currency.format = {
14 |       pos: this.props.numberFormat,
15 |       neg: this.props.numberFormatNegative
16 |     }
17 |   }
18 | 
19 |   // Render method.
20 |   render () {
21 |     const dateFormat = this.props.dateFormat
22 |     const index = this.props.index
23 |     const nowrap = this.props.nowrap
24 |     const type = this.props.type
25 | 
26 |     const isCurrency = type === 'currency'
27 |     const isDate = type === 'date'
28 | 
29 |     let value = this.props.value
30 |     const isNegative = value < 0
31 | 
32 |     // Default class="…".
33 |     let className = ['t7-data-table__td']
34 | 
35 |     // Nowrap?
36 |     if (nowrap) {
37 |       className.push('t7-data-table__td--nowrap')
38 |     }
39 | 
40 |     // Currency value?
41 |     if (isCurrency) {
42 |       className.push('t7-data-table__td--currency')
43 | 
44 |       // Negative?
45 |       if (isNegative) {
46 |         className.push('t7-data-table__td--negative')
47 |       }
48 | 
49 |       value = accounting.formatMoney(value)
50 | 
51 |     // Date value?
52 |     } else if (isDate && moment(value).isValid()) {
53 |       value = moment(value).format(dateFormat)
54 |     }
55 | 
56 |     // Convert to string.
57 |     className = className.join(' ')
58 | 
59 |     // Expose `<td>`.
60 |     return (
61 |       <td
62 |         key={index}
63 |         className={className}
64 |         role='gridcell'
65 |       >
66 |         {value}
67 |       </td>
68 |     )
69 |   }
70 | }
71 | 
72 | // Validation.
73 | DataTableCell.propTypes = {
74 |   dateFormat: React.PropTypes.string,
75 |   numberFormat: React.PropTypes.string,
76 |   numberFormatNegative: React.PropTypes.string,
77 | 
78 |   index: React.PropTypes.number,
79 |   nowrap: React.PropTypes.bool,
80 |   type: React.PropTypes.string,
81 | 
82 |   value: React.PropTypes.oneOfType([
83 |     React.PropTypes.string,
84 |     React.PropTypes.number
85 |   ])
86 | }
87 | 
88 | // Defaults.
89 | DataTableCell.defaultProps = {
90 |   dateFormat: 'MMM D, YYYY',
91 |   numberFormat: '%s%v',
92 |   numberFormatNegative: '(%s%v)'
93 | }
94 | 
95 | // Export.
96 | export default DataTableCell
97 | 


--------------------------------------------------------------------------------
/source/components/data_table/template_th.js:
--------------------------------------------------------------------------------
  1 | // Dependencies.
  2 | import React from 'react'
  3 | 
  4 | // Utility methods.
  5 | import utils from '../../utils'
  6 | 
  7 | // Define class.
  8 | class DataTableHeader extends React.Component {
  9 |   constructor (props) {
 10 |     // Pass `props` into scope.
 11 |     super(props)
 12 | 
 13 |     // Bind context.
 14 |     utils.bind(this)
 15 |   }
 16 | 
 17 |   handleSort (e) {
 18 |     const keyPress = e.keyCode
 19 |     const keyEnter = keyPress === 13
 20 | 
 21 |     // Exit, if not "Enter" key.
 22 |     if (keyPress && !keyEnter) {
 23 |       return
 24 |     }
 25 | 
 26 |     const index = this.props.index
 27 |     const sortDirection = this.props.sortDirection
 28 |     const handleSort = this.props.handleSort
 29 | 
 30 |     if (typeof handleSort !== 'function') {
 31 |       return
 32 |     }
 33 | 
 34 |     handleSort(e, index, sortDirection)
 35 |   }
 36 | 
 37 |   // Render method.
 38 |   render () {
 39 |     const index = this.props.index
 40 |     const title = this.props.title
 41 |     const sortable = this.props.sortable
 42 |     const sortDirection = this.props.sortDirection
 43 |     const sortIndex = this.props.sortIndex
 44 |     const handleSort = sortable ? this.handleSort : null
 45 | 
 46 |     let ariaSort
 47 | 
 48 |     if (index === sortIndex) {
 49 |       if (sortDirection === 'desc') {
 50 |         ariaSort = 'descending'
 51 |       } else if (sortDirection === 'asc') {
 52 |         ariaSort = 'ascending'
 53 |       }
 54 |     }
 55 | 
 56 |     // Default class="…".
 57 |     let className = ['t7-data-table__th']
 58 | 
 59 |     if (sortable) {
 60 |       className.push('t7-data-table__th--sortable')
 61 |     }
 62 | 
 63 |     // Convert to string.
 64 |     className = className.join(' ')
 65 | 
 66 |     return (
 67 |       <th
 68 |         aria-sort={ariaSort}
 69 |         className={className}
 70 |         role='columnheader'
 71 |         scope='col'
 72 |         tabIndex={sortable ? 0 : null}
 73 | 
 74 |         onClick={handleSort}
 75 |         onKeyDown={handleSort}
 76 |       >
 77 |         {title}
 78 |       </th>
 79 |     )
 80 |   }
 81 | }
 82 | 
 83 | // Validation.
 84 | DataTableHeader.propTypes = {
 85 |   // Required.
 86 |   title: React.PropTypes.string.isRequired,
 87 |   index: React.PropTypes.number.isRequired,
 88 | 
 89 |   // Optional.
 90 |   sortIndex: React.PropTypes.number,
 91 |   sortDirection: React.PropTypes.string,
 92 |   sortable: React.PropTypes.bool,
 93 | 
 94 |   // Events.
 95 |   handleSort: React.PropTypes.func
 96 | }
 97 | 
 98 | // Export.
 99 | export default DataTableHeader
100 | 


--------------------------------------------------------------------------------
/source/components/data_table/template_tr.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // Utility methods.
 5 | import utils from '../../utils'
 6 | 
 7 | // UI components.
 8 | import DataTableCell from './template_td'
 9 | 
10 | // Define class.
11 | class DataTableRow extends React.Component {
12 |   // Render method.
13 |   render () {
14 |     const columns = this.props.columns
15 |     const data = this.props.data
16 |     const dateFormat = this.props.dateFormat
17 |     const numberFormat = this.props.numberFormat
18 |     const numberFormatNegative = this.props.numberFormatNegative
19 | 
20 |     // Events.
21 |     const handleRowClick = this.props.handleRowClick
22 | 
23 |     // Build cells.
24 |     const cells = columns.map(function (column, i) {
25 |       if (utils.exists(data[column.field])) {
26 |         return (
27 |           <DataTableCell
28 |             dateFormat={dateFormat}
29 |             numberFormat={numberFormat}
30 |             numberFormatNegative={numberFormatNegative}
31 | 
32 |             key={i}
33 |             index={i}
34 |             nowrap={column.nowrap}
35 |             type={column.type}
36 |             value={data[column.field]}
37 |           />
38 |         )
39 |       }
40 |     })
41 | 
42 |     // Make row focusable?
43 |     const tabIndex =
44 |       this.props.rowIsClickable
45 |       ? '0'
46 |       : null
47 | 
48 |     // Expose UI.
49 |     return (
50 |       <tr
51 |         role='row'
52 |         tabIndex={tabIndex}
53 |         onClick={handleRowClick}
54 |         onKeyDown={handleRowClick}
55 |       >
56 |         {cells}
57 |       </tr>
58 |     )
59 |   }
60 | }
61 | 
62 | // Validation.
63 | DataTableRow.propTypes = {
64 |   columns: React.PropTypes.array,
65 |   data: React.PropTypes.object,
66 |   dateFormat: React.PropTypes.string,
67 |   numberFormat: React.PropTypes.string,
68 |   numberFormatNegative: React.PropTypes.string,
69 | 
70 |   // Events.
71 |   handleRowClick: React.PropTypes.func,
72 |   rowIsClickable: React.PropTypes.bool
73 | }
74 | 
75 | // Export.
76 | export default DataTableRow
77 | 


--------------------------------------------------------------------------------
/source/components/dropdown/README.md:
--------------------------------------------------------------------------------
 1 | This component can be used like so.
 2 | 
 3 | ```js
 4 | const menuAlign = 'right' // Default: "left".
 5 | const target = '_blank' // Default: null.
 6 | const text = 'Dropdown Trigger Text'
 7 | 
 8 | const items = [
 9 |   {
10 |     text: 'Dropdown Item Text #1'
11 |   },
12 |   {
13 |     text: 'Dropdown Item Text #2'
14 |   }
15 | ]
16 | 
17 | function handleClick (e, text) {
18 |   /*
19 |     `e` is the event.
20 | 
21 |     `text` is from the item clicked.
22 |   */
23 | }
24 | ```
25 | 
26 | ```xml
27 | <DropDown
28 |   menuAlign='right'
29 |   target={target}
30 |   text={text}
31 |   items={items}
32 | 
33 |   handleClick={handleClick}
34 | />
35 | ```


--------------------------------------------------------------------------------
/source/components/dropdown/template_item.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // Utility methods.
 5 | import utils from '../../utils'
 6 | 
 7 | // Define class.
 8 | class DropDownItem extends React.Component {
 9 |   constructor (props) {
10 |     // Pass `props` into scope.
11 |     super(props)
12 | 
13 |     // Bind context.
14 |     utils.bind(this)
15 |   }
16 | 
17 |   // Click handler.
18 |   handleClick (e) {
19 |     const keyPress = e.keyCode
20 |     const keyEnter = keyPress === 13
21 | 
22 |     // Exit, if not "Enter" key.
23 |     if (keyPress && !keyEnter) {
24 |       return
25 |     }
26 | 
27 |     const handleClick = this.props.handleClick
28 | 
29 |     if (typeof handleClick !== 'function') {
30 |       return
31 |     }
32 | 
33 |     const text = this.props.text
34 | 
35 |     handleClick(e, text)
36 |   }
37 | 
38 |   // Render method.
39 |   render () {
40 |     const href = this.props.href
41 |     const text = this.props.text
42 | 
43 |     const handleClick = this.handleClick
44 | 
45 |     // Expose UI.
46 |     return (
47 |       <li
48 |         role='menuitem'
49 |         className='t7-dropdown__menu__item'
50 |       >
51 |         <a
52 |           className='t7-dropdown__menu__link'
53 | 
54 |           href={href}
55 |           tabIndex='0'
56 | 
57 |           onClick={handleClick}
58 |           onKeyDown={handleClick}
59 |         >
60 |           {text}
61 |         </a>
62 |       </li>
63 |     )
64 |   }
65 | 
66 | }
67 | 
68 | // Validation.
69 | DropDownItem.propTypes = {
70 |   href: React.PropTypes.string,
71 |   text: React.PropTypes.string,
72 |   handleClick: React.PropTypes.func
73 | }
74 | 
75 | // Export
76 | export default DropDownItem
77 | 


--------------------------------------------------------------------------------
/source/components/fieldset/README.md:
--------------------------------------------------------------------------------
1 | This component can be used like so.
2 | 
3 | ```xml
4 | <Fieldset legend='Fieldset Legend'>
5 |   <p>
6 |     (Form elements would go here.)
7 |   </p>
8 | </Fieldset>
9 | ```


--------------------------------------------------------------------------------
/source/components/fieldset/index.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // UI components.
 5 | import Box from '../box'
 6 | 
 7 | // Define class.
 8 | class Fieldset extends React.Component {
 9 |   // Render method.
10 |   render () {
11 |     const legend = this.props.legend
12 | 
13 |     return (
14 |       <Box {...this.props} legend={legend} />
15 |     )
16 |   }
17 | }
18 | 
19 | // Validation.
20 | Fieldset.propTypes = {
21 |   legend: React.PropTypes.string
22 | }
23 | 
24 | // Defaults.
25 | Fieldset.defaultProps = {
26 |   legend: 'Fieldset Legend',
27 |   children: '(Form elements would go here.)',
28 |   close: false,
29 |   icon: false
30 | }
31 | 
32 | // Export.
33 | export default Fieldset
34 | 


--------------------------------------------------------------------------------
/source/components/fieldset_info/README.md:
--------------------------------------------------------------------------------
1 | This component can be used like so.
2 | 
3 | ```xml
4 | <FieldsetInfo legend='Fieldset Legend'>
5 |   <p>
6 |     (Form elements would go here.)
7 |   </p>
8 | </FieldsetInfo>
9 | ```


--------------------------------------------------------------------------------
/source/components/fieldset_info/index.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // UI components.
 5 | import Box from '../box'
 6 | 
 7 | // Define class.
 8 | class FieldsetInfo extends React.Component {
 9 |   // Render method.
10 |   render () {
11 |     const legend = this.props.legend
12 | 
13 |     return (
14 |       <Box {...this.props} legend={legend} mode='info' />
15 |     )
16 |   }
17 | }
18 | 
19 | // Validation.
20 | FieldsetInfo.propTypes = {
21 |   legend: React.PropTypes.string
22 | }
23 | 
24 | // Defaults.
25 | FieldsetInfo.defaultProps = {
26 |   legend: 'Fieldset Legend',
27 |   children: '(Form elements would go here.)',
28 |   close: false,
29 |   icon: false
30 | }
31 | 
32 | // Export.
33 | export default FieldsetInfo
34 | 


--------------------------------------------------------------------------------
/source/components/fieldset_negative/README.md:
--------------------------------------------------------------------------------
1 | This component can be used like so.
2 | 
3 | ```xml
4 | <FieldsetNegative legend='Fieldset Legend'>
5 |   <p>
6 |     (Form elements would go here.)
7 |   </p>
8 | </FieldsetNegative>
9 | ```


--------------------------------------------------------------------------------
/source/components/fieldset_negative/index.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // UI components.
 5 | import Box from '../box'
 6 | 
 7 | // Define class.
 8 | class FieldsetNegative extends React.Component {
 9 |   // Render method.
10 |   render () {
11 |     const legend = this.props.legend
12 | 
13 |     return (
14 |       <Box {...this.props} legend={legend} mode='negative' />
15 |     )
16 |   }
17 | }
18 | 
19 | // Validation.
20 | FieldsetNegative.propTypes = {
21 |   legend: React.PropTypes.string
22 | }
23 | 
24 | // Defaults.
25 | FieldsetNegative.defaultProps = {
26 |   legend: 'Fieldset Legend',
27 |   children: '(Form elements would go here.)',
28 |   close: false,
29 |   icon: false
30 | }
31 | 
32 | // Export.
33 | export default FieldsetNegative
34 | 


--------------------------------------------------------------------------------
/source/components/fieldset_positive/README.md:
--------------------------------------------------------------------------------
1 | This component can be used like so.
2 | 
3 | ```xml
4 | <FieldsetPositive legend='Fieldset Legend'>
5 |   <p>
6 |     (Form elements would go here.)
7 |   </p>
8 | </FieldsetPositive>
9 | ```


--------------------------------------------------------------------------------
/source/components/fieldset_positive/index.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // UI components.
 5 | import Box from '../box'
 6 | 
 7 | // Define class.
 8 | class FieldsetPositive extends React.Component {
 9 |   // Render method.
10 |   render () {
11 |     const legend = this.props.legend
12 | 
13 |     return (
14 |       <Box {...this.props} legend={legend} mode='positive' />
15 |     )
16 |   }
17 | }
18 | 
19 | // Validation.
20 | FieldsetPositive.propTypes = {
21 |   legend: React.PropTypes.string
22 | }
23 | 
24 | // Defaults.
25 | FieldsetPositive.defaultProps = {
26 |   legend: 'Fieldset Legend',
27 |   children: '(Form elements would go here.)',
28 |   close: false,
29 |   icon: false
30 | }
31 | 
32 | // Export.
33 | export default FieldsetPositive
34 | 


--------------------------------------------------------------------------------
/source/components/fieldset_warn/README.md:
--------------------------------------------------------------------------------
1 | This component can be used like so.
2 | 
3 | ```xml
4 | <FieldsetWarn legend='Fieldset Legend'>
5 |   <p>
6 |     (Form elements would go here.)
7 |   </p>
8 | </FieldsetWarn>
9 | ```


--------------------------------------------------------------------------------
/source/components/fieldset_warn/index.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // UI components.
 5 | import Box from '../box'
 6 | 
 7 | // Define class.
 8 | class FieldsetWarn extends React.Component {
 9 |   // Render method.
10 |   render () {
11 |     const legend = this.props.legend
12 | 
13 |     return (
14 |       <Box {...this.props} legend={legend} mode='warn' />
15 |     )
16 |   }
17 | }
18 | 
19 | // Validation.
20 | FieldsetWarn.propTypes = {
21 |   legend: React.PropTypes.string
22 | }
23 | 
24 | // Defaults.
25 | FieldsetWarn.defaultProps = {
26 |   legend: 'Fieldset Legend',
27 |   children: '(Form elements would go here.)',
28 |   close: false,
29 |   icon: false
30 | }
31 | 
32 | // Export.
33 | export default FieldsetWarn
34 | 


--------------------------------------------------------------------------------
/source/components/form_button/README.md:
--------------------------------------------------------------------------------
 1 | The `<Button/>` component can be used as a form input (the typical use case) or as a link.
 2 | 
 3 | Below is an example of all the props that it can use, though some are mutually exclusive. For instance, you could specify the `type` of button as `submit`, but wouldn't set the `type` of a link.
 4 | 
 5 | By passing `href`, the component will be used as an `<a>` link, otherwise a `<button>` tag will be generated.
 6 | 
 7 | ```js
 8 | // Event callback.
 9 | function handleClick (e, buttonData) {
10 |   /*
11 |     `e` is the event.
12 | 
13 |     `buttonData` is whatever you have defined.
14 | 
15 |     If nothing is set, then it will just be
16 |     the string of "Button Data" passed back.
17 |   */
18 | }
19 | 
20 | const ariaControls = '...' // Default: null.
21 | const disabled = true // Default: false.
22 | const href = 'http://example.com/' // Default: null.
23 | const mode = 'info | negative | positive | warn' // Default: "default".
24 | const size = 'small | big' // Default: null.
25 | const text = 'Button Text'
26 | const target = '_blank | ...' // Default: null.
27 | const title = '...' // Default: null.
28 | const type = 'submit | reset' // Default: "button".
29 | 
30 | /*
31 |   Data you might want to associate
32 |   to the button, to be reported via
33 |   callback when/if it is clicked.
34 | */
35 | const buttonData = {
36 |   foo: 'bar'
37 | }
38 | ```
39 | 
40 | To use the component, pass these props.
41 | 
42 | ```jsx
43 | // Link.
44 | <Button
45 |   href={href}
46 |   mode={mode}
47 |   size={size}
48 |   text={text}
49 |   target={target}
50 |   title={title}
51 | />
52 | 
53 | // Button.
54 | <Button
55 |   ariaControls={ariaControls}
56 |   buttonData={buttonData}
57 |   disabled={disabled}
58 |   mode={mode}
59 |   size={size}
60 |   text={text}
61 |   title={title}
62 |   type={type}
63 | 
64 |   handleClick={handleClick}
65 | />
66 | ```


--------------------------------------------------------------------------------
/source/components/form_button_examples/README.md:
--------------------------------------------------------------------------------
 1 | The `<Button/>` component has several variations, in both `size` and `mode`.
 2 | 
 3 | **Small:**
 4 | 
 5 | ```xml
 6 | <Button size='small' text='Default' />
 7 | 
 8 | <Button size='small' mode='primary' text='Primary' />
 9 | 
10 | <Button size='small' mode='positive' text='Positive' />
11 | 
12 | <Button size='small' mode='negative' text='Negative' />
13 | 
14 | <Button size='small' mode='warn' text='Warn' />
15 | ```
16 | 
17 | **Normal:**
18 | 
19 | ```xml
20 | <Button text='Default' />
21 | 
22 | <Button mode='primary' text='Primary' />
23 | 
24 | <Button mode='positive' text='Positive' />
25 | 
26 | <Button mode='negative' text='Negative' />
27 | 
28 | <Button mode='warn' text='Warn' />
29 | ```
30 | 
31 | **Big:**
32 | 
33 | ```xml
34 | <Button size='big' text='Default' />
35 | 
36 | <Button size='big' mode='primary' text='Primary' />
37 | 
38 | <Button size='big' mode='positive' text='Positive' />
39 | 
40 | <Button size='big' mode='negative' text='Negative' />
41 | 
42 | <Button size='big' mode='warn' text='Warn' />
43 | ```


--------------------------------------------------------------------------------
/source/components/form_button_examples/index.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // UI components.
 5 | import Button from '../form_button'
 6 | import ListInline from '../list_inline'
 7 | 
 8 | // Define class.
 9 | class ButtonExample extends React.Component {
10 |   // Render method.
11 |   render () {
12 |     return (
13 |       <div>
14 | 
15 |         <ListInline>
16 |           <li>
17 |             <Button size='small' text='Default' />
18 |           </li>
19 |           <li>
20 |             <Button size='small' mode='primary' text='Primary' />
21 |           </li>
22 |           <li>
23 |             <Button size='small' mode='positive' text='Positive' />
24 |           </li>
25 |           <li>
26 |             <Button size='small' mode='negative' text='Negative' />
27 |           </li>
28 |           <li>
29 |             <Button size='small' mode='warn' text='Warn' />
30 |           </li>
31 |         </ListInline>
32 | 
33 |         <ListInline>
34 |           <li>
35 |             <Button text='Default' />
36 |           </li>
37 |           <li>
38 |             <Button mode='primary' text='Primary' />
39 |           </li>
40 |           <li>
41 |             <Button mode='positive' text='Positive' />
42 |           </li>
43 |           <li>
44 |             <Button mode='negative' text='Negative' />
45 |           </li>
46 |           <li>
47 |             <Button mode='warn' text='Warn' />
48 |           </li>
49 |         </ListInline>
50 | 
51 |         <ListInline>
52 |           <li>
53 |             <Button size='big' text='Default' />
54 |           </li>
55 |           <li>
56 |             <Button size='big' mode='primary' text='Primary' />
57 |           </li>
58 |           <li>
59 |             <Button size='big' mode='positive' text='Positive' />
60 |           </li>
61 |           <li>
62 |             <Button size='big' mode='negative' text='Negative' />
63 |           </li>
64 |           <li>
65 |             <Button size='big' mode='warn' text='Warn' />
66 |           </li>
67 |         </ListInline>
68 | 
69 |       </div>
70 |     )
71 |   }
72 | }
73 | 
74 | // Export.
75 | export default ButtonExample
76 | 


--------------------------------------------------------------------------------
/source/components/form_checkbox/README.md:
--------------------------------------------------------------------------------
 1 | This component can be used like so.
 2 | 
 3 | ```js
 4 | // Event callback.
 5 | function handleChange (e, value, checked) {
 6 |   /*
 7 |     `e` is the event.
 8 | 
 9 |     `value` is the *.value of the checkbox.
10 | 
11 |     `checked` is a boolean.
12 |   */
13 | }
14 | 
15 | const autofocus = true // Default: false.
16 | const disabled = true // Default: false.
17 | const id = '...' // Ensured unique, if blank.
18 | const label = 'Individual checkbox label' // Accompanying text.
19 | const name = '...' // Uses id, if blank.
20 | const required = true // Default: false.
21 | const value = '...' // Uses label, if blank.
22 | 
23 | // Checked state.
24 | const checked = true // Default: false.
25 | const defaultChecked = true // Default: false.
26 | ```
27 | 
28 | **Note:** There is a difference between `checked` and `defaultChecked`. For more info, see the React documentation for…
29 | 
30 | * [Controlled Components](https://facebook.github.io/react/docs/forms.html#controlled-components)
31 | * [Uncontrolled Components](https://facebook.github.io/react/docs/forms.html#uncontrolled-components)
32 | 
33 | To use the component, pass these props.
34 | 
35 | ```xml
36 | <Checkbox
37 |   autofocus={autofocus}
38 |   checked={checked}
39 |   defaultChecked={defaultChecked}
40 |   disabled={disabled}
41 |   id={id}
42 |   label={label}
43 |   name={name}
44 |   required={required}
45 |   value={value}
46 | 
47 |   handleChange={handleChange}
48 | />
49 | ```


--------------------------------------------------------------------------------
/source/components/form_checkbox_list/README.md:
--------------------------------------------------------------------------------
1 | **Note:** This uses the same props as the `<CheckboxListInline/>` component, but has a different tag name. Functionally, they are identical other than their layout.
2 | 
3 | ```xml
4 | <CheckboxList
5 |   options={options}
6 | 
7 |   handleChange={handleChange}
8 | />
9 | ```


--------------------------------------------------------------------------------
/source/components/form_checkbox_list/index.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // UI components.
 5 | import Checkbox from '../form_checkbox'
 6 | import ListClean from '../list_clean'
 7 | import ListInline from '../list_inline'
 8 | 
 9 | // Define class.
10 | class CheckboxList extends React.Component {
11 |   // Render method.
12 |   render () {
13 |     const inline = this.props.inline
14 |     const options = this.props.options
15 | 
16 |     // Used in conditional.
17 |     let List = ListClean
18 | 
19 |     if (inline) {
20 |       List = ListInline
21 |     }
22 | 
23 |     // Events.
24 |     const handleChange = this.props.handleChange
25 | 
26 |     // Build list.
27 |     const listItems = options.map(function (o, i) {
28 |       const autofocus = o.autofocus
29 |       const checked = o.checked
30 |       const defaultChecked = o.defaultChecked
31 |       const disabled = o.disabled
32 |       const id = o.id
33 |       const label = o.label
34 |       const name = o.name
35 |       const required = o.required
36 |       const value = o.value
37 | 
38 |       return (
39 |         <li key={i}>
40 |           <Checkbox
41 |             autofocus={autofocus}
42 |             disabled={disabled}
43 |             id={id}
44 |             label={label}
45 |             name={name}
46 |             required={required}
47 |             value={value}
48 | 
49 |             checked={checked}
50 |             defaultChecked={defaultChecked}
51 | 
52 |             handleChange={handleChange}
53 |           />
54 |         </li>
55 |       )
56 |     })
57 | 
58 |     // Expose UI.
59 |     return (
60 |       <List>
61 |         {listItems}
62 |       </List>
63 |     )
64 |   }
65 | }
66 | 
67 | // Validation.
68 | CheckboxList.propTypes = {
69 |   inline: React.PropTypes.bool,
70 |   options: React.PropTypes.array,
71 | 
72 |   // Events.
73 |   handleChange: React.PropTypes.func
74 | }
75 | 
76 | // Export.
77 | export default CheckboxList
78 | 


--------------------------------------------------------------------------------
/source/components/form_checkbox_list_inline/README.md:
--------------------------------------------------------------------------------
 1 | This component can be used like so.
 2 | 
 3 | ```js
 4 | // Event callback.
 5 | function handleChange (e, value, checked) {
 6 |   /*
 7 |     `e` is the event.
 8 | 
 9 |     `value` is the *.value of the checkbox.
10 | 
11 |     `checked` is a boolean.
12 |   */
13 | }
14 | 
15 | const options = [
16 |   {
17 |     autofocus: true, // Default: false.
18 |     checked: true, // Default: false.
19 |     defaultChecked: true, // Default: false.
20 |     disabled: true, // Default: false.
21 |     id: '...', // Ensured unique, if blank.
22 |     name: '...', // Uses id, if blank.
23 |     label: 'Checkbox list inline - label 01',
24 |     required: true, // Default: false.
25 |     value: '...', // Uses label, if blank.
26 | 
27 |     // Will be called when (un-)checked.
28 |     handleChange: handleChange
29 |   },
30 |   {
31 |     label: 'Checkbox list inline - label 02'
32 |   }
33 | 
34 |   // Etc.
35 | ]
36 | ```
37 | 
38 | To use the component, pass these props.
39 | 
40 | ```xml
41 | <CheckboxListInline
42 |   options={options}
43 | 
44 |   handleChange={handleChange}
45 | />
46 | ```


--------------------------------------------------------------------------------
/source/components/form_checkbox_list_inline/index.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // UI components.
 5 | import CheckboxList from '../form_checkbox_list'
 6 | 
 7 | // Define class.
 8 | class CheckboxListInline extends React.Component {
 9 |   // Render method.
10 |   render () {
11 |     return (
12 |       <CheckboxList {...this.props} />
13 |     )
14 |   }
15 | }
16 | 
17 | // Prop defaults.
18 | CheckboxListInline.defaultProps = {
19 |   inline: true,
20 |   options: [
21 |     {
22 |       defaultChecked: true,
23 |       label: 'Checkbox list inline - label 01'
24 |     },
25 |     {
26 |       label: 'Checkbox list inline - label 02'
27 |     },
28 |     {
29 |       disabled: true,
30 |       label: '(Checkbox disabled)'
31 |     }
32 |   ]
33 | }
34 | 
35 | // Export.
36 | export default CheckboxListInline
37 | 


--------------------------------------------------------------------------------
/source/components/form_input/README.md:
--------------------------------------------------------------------------------
 1 | This component can be used like so.
 2 | 
 3 | ```js
 4 | // Event callback.
 5 | function handleChange (e, value) {
 6 |   /*
 7 |     `e` is the event.
 8 | 
 9 |     `value` is the *.value of the input.
10 |   */
11 | }
12 | 
13 | const autofocus = true // Default: false.
14 | const disabled = true // Default: false.
15 | const id = '...' // Ensured unique, if blank.
16 | const name = '...' // Uses id, if blank.
17 | const placeholder = '...' // Default: null.
18 | const required = true // Default: false.
19 | const type = 'text' // Default: "text".
20 | 
21 | /*
22 |   Note: If you want to set an input to
23 |   a particular character width, you must
24 |   pass `width = 'auto'` and the size.
25 | */
26 | const size = '10' // Default: null.
27 | const width = 'auto' // Default: 100%.
28 | ```
29 | 
30 | To use the component, pass these props.
31 | 
32 | ```xml
33 | <Input
34 |   autofocus={autofocus}
35 |   disabled={disabled}
36 |   id={id}
37 |   name={name}
38 |   placeholder={placeholder}
39 |   required={required}
40 |   type={type}
41 | 
42 |   size={size}
43 |   width={width}
44 | 
45 |   handleChange={handleChange}
46 | />
47 | ```


--------------------------------------------------------------------------------
/source/components/form_radio/README.md:
--------------------------------------------------------------------------------
 1 | This component can be used like so.
 2 | 
 3 | ```js
 4 | // Event callback.
 5 | function handleChange (e, value, checked) {
 6 |   /*
 7 |     `e` is the event.
 8 | 
 9 |     `value` is the *.value of the checkbox.
10 | 
11 |     `checked` is a boolean.
12 |   */
13 | }
14 | 
15 | const autofocus = true // Default: false.
16 | const disabled = true // Default: false.
17 | const id = '...' // Ensured unique, if blank.
18 | const label = 'Individual radio label' // Accompanying text.
19 | const name = '...' // Uses id, if blank.
20 | const required = true // Default: false.
21 | const value = '...' // Uses label, if blank.
22 | 
23 | // Checked state.
24 | const checked = true // Default: false.
25 | const defaultChecked = true // Default: false.
26 | ```
27 | 
28 | **Note:** There is a difference between `checked` and `defaultChecked`. For more info, see the React documentation for…
29 | 
30 | * [Controlled Components](https://facebook.github.io/react/docs/forms.html#controlled-components)
31 | * [Uncontrolled Components](https://facebook.github.io/react/docs/forms.html#uncontrolled-components)
32 | 
33 | To use the component, pass these props.
34 | 
35 | ```xml
36 | <Radio
37 |   autofocus={autofocus}
38 |   checked={checked}
39 |   defaultChecked={defaultChecked}
40 |   disabled={disabled}
41 |   id={id}
42 |   label={label}
43 |   name={name}
44 |   required={required}
45 |   value={value}
46 | 
47 |   handleChange={handleChange}
48 | />
49 | ```


--------------------------------------------------------------------------------
/source/components/form_radio_list/README.md:
--------------------------------------------------------------------------------
1 | **Note:** This uses the same props as the `<RadioListInline/>` component, but has a different tag name. Functionally, they are identical other than their layout.
2 | 
3 | ```xml
4 | <RadioList
5 |   options={options}
6 | 
7 |   handleChange={handleChange}
8 | />
9 | ```


--------------------------------------------------------------------------------
/source/components/form_radio_list_inline/README.md:
--------------------------------------------------------------------------------
 1 | This component can be used like so.
 2 | 
 3 | ```js
 4 | // Event callback.
 5 | function handleChange (e, value, checked) {
 6 |   /*
 7 |     `e` is the event.
 8 | 
 9 |     `value` is the *.value of the radio.
10 | 
11 |     `checked` is a boolean.
12 |   */
13 | }
14 | 
15 | /*
16 |   For radio `name="..."` attributes.
17 | 
18 |   Can define at the individual `options`
19 |   level, or just define once for the list.
20 | */
21 | const listName = '...'
22 | 
23 | const options = [
24 |   {
25 |     autofocus: true, // Default: false.
26 |     checked: true, // Default: false.
27 |     defaultChecked: true, // Default: false.
28 |     disabled: true, // Default: false.
29 |     id: '...', // Ensured unique, if blank.
30 |     label: 'Radio list - label 01',
31 |     name: '...', // Uses `listName`, if blank,
32 |     required: true, // Default: false,
33 |     value: '...', // Uses label, if blank.
34 | 
35 |     // Will be called when (un-)checked.
36 |     handleChange: handleChange
37 |   },
38 |   {
39 |     label: 'Radio list - label 02'
40 |   }
41 | 
42 |   // Etc.
43 | ]
44 | ```
45 | 
46 | To use the component, pass these props.
47 | 
48 | ```xml
49 | <RadioListInline
50 |   listName={listName}
51 |   options={options}
52 | 
53 |   handleChange={handleChange}
54 | />
55 | ```


--------------------------------------------------------------------------------
/source/components/form_radio_list_inline/index.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // UI components.
 5 | import RadioList from '../form_radio_list'
 6 | 
 7 | // Define class.
 8 | class RadioListInline extends React.Component {
 9 |   // Render method.
10 |   render () {
11 |     return (
12 |       <RadioList {...this.props} />
13 |     )
14 |   }
15 | }
16 | 
17 | // Prop defaults.
18 | RadioListInline.defaultProps = {
19 |   inline: true,
20 |   options: [
21 |     {
22 |       defaultChecked: true,
23 |       label: 'Radio list inline - label 01'
24 |     },
25 |     {
26 |       label: 'Radio list inline - label 02'
27 |     },
28 |     {
29 |       disabled: true,
30 |       label: '(Radio disabled)'
31 |     }
32 |   ]
33 | }
34 | 
35 | // Export.
36 | export default RadioListInline
37 | 


--------------------------------------------------------------------------------
/source/components/form_search/README.md:
--------------------------------------------------------------------------------
 1 | This component can be used like so.
 2 | 
 3 | ```js
 4 | // Event callback.
 5 | function handleSubmit (e, value) {
 6 |   /*
 7 |     `e` is the event.
 8 | 
 9 |     `value` is the *.value of the input.
10 |   */
11 | }
12 | 
13 | const buttonText = 'GO'
14 | const placeholder = 'Search...'
15 | ```
16 | 
17 | To use the component, pass these props.
18 | 
19 | ```xml
20 | <Search
21 |   buttonText={buttonText}
22 |   placeholder={placeholder}
23 | 
24 |   handleSubmit={handleSubmit}
25 | />
26 | ```


--------------------------------------------------------------------------------
/source/components/form_search/index.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // Utility methods.
 5 | import utils from '../../utils'
 6 | 
 7 | // UI components.
 8 | import Button from '../form_button'
 9 | import Input from '../form_input'
10 | 
11 | // Define class.
12 | class Search extends React.Component {
13 |   constructor (props) {
14 |     // Pass `props` into scope.
15 |     super(props)
16 | 
17 |     // Bind context.
18 |     utils.bind(this)
19 |   }
20 | 
21 |   // Submit event.
22 |   handleSubmit (e) {
23 |     utils.stop(e)
24 | 
25 |     const handleSubmit = this.props.handleSubmit
26 | 
27 |     // Exit, if no callback.
28 |     if (typeof handleSubmit !== 'function') {
29 |       return
30 |     }
31 | 
32 |     const el = e.target
33 |     const input = el.querySelector('input[type="search"]')
34 | 
35 |     let value = input.value
36 |     value = value.trim().replace(/\s+/g, ' ')
37 | 
38 |     handleSubmit(e, value)
39 |   }
40 | 
41 |   // Render method.
42 |   render () {
43 |     const buttonText = this.props.buttonText
44 |     const defaultValue = this.props.defaultValue
45 |     const placeholder = this.props.placeholder
46 | 
47 |     // Events.
48 |     const handleSubmit = this.handleSubmit
49 | 
50 |     return (
51 |       <form onSubmit={handleSubmit}>
52 |         <table role='presentation' className='t7-search-table'>
53 |           <tbody>
54 |             <tr>
55 |               <td>
56 |                 <Input
57 |                   defaultValue={defaultValue}
58 |                   placeholder={placeholder}
59 |                   type='search'
60 |                 />
61 |               </td>
62 |               <td>
63 |                 <Button
64 |                   mode='primary'
65 |                   text={buttonText}
66 |                   type='submit'
67 |                 />
68 |               </td>
69 |             </tr>
70 |           </tbody>
71 |         </table>
72 |       </form>
73 |     )
74 |   }
75 | }
76 | 
77 | // Validation.
78 | Search.propTypes = {
79 |   buttonText: React.PropTypes.string,
80 |   defaultValue: React.PropTypes.string,
81 |   placeholder: React.PropTypes.string,
82 | 
83 |   // Events.
84 |   handleSubmit: React.PropTypes.func
85 | }
86 | 
87 | // Prop defaults.
88 | Search.defaultProps = {
89 |   buttonText: 'GO',
90 |   placeholder: 'Search...'
91 | }
92 | 
93 | // Export.
94 | export default Search
95 | 


--------------------------------------------------------------------------------
/source/components/form_select/README.md:
--------------------------------------------------------------------------------
 1 | This component can be used like so.
 2 | 
 3 | ```js
 4 | // Event callback.
 5 | function handleChange (e, value) {
 6 |   /*
 7 |     `e` is the event.
 8 | 
 9 |     `value` is the *.value of the select.
10 |   */
11 | }
12 | 
13 | const ariaControls = '...' // Default: null.
14 | const autofocus = true // Default: false.
15 | const disabled = true // Default: false.
16 | const id = '...' // Ensured unique, if blank.
17 | const name = '...' // Uses id, if blank.
18 | const required = true // Default: false.
19 | const width = 'auto' // Default: 100%.
20 | 
21 | // Determines selected option.
22 | const defaultValue = '...' // Default: null.
23 | const value = '...' // Default: null.
24 | 
25 | const options = [
26 |   {
27 |     value: '',
28 |     name: 'Select...'
29 |   },
30 |   {
31 |     value: '1',
32 |     name: 'Uno'
33 |   },
34 |   {
35 |     value: '2',
36 |     name: 'Dos'
37 |   },
38 |   {
39 |     value: '3',
40 |     name: 'Tres'
41 |   }
42 | ]
43 | ```
44 | 
45 | **Note:** There is a difference between `value` and `defaultValue`. For more info, see the React documentation for…
46 | 
47 | * [Controlled Components](https://facebook.github.io/react/docs/forms.html#controlled-components)
48 | * [Uncontrolled Components](https://facebook.github.io/react/docs/forms.html#uncontrolled-components)
49 | 
50 | To use the component, pass these props.
51 | 
52 | ```xml
53 | <Select
54 |   ariaControls={ariaControls}
55 |   autofocus={autofocus}
56 |   disabled={disabled}
57 |   id={id}
58 |   name={name}
59 |   options={options}
60 |   required={required}
61 | 
62 |   defaultValue={defaultValue}
63 |   value={value}
64 | 
65 |   handleChange={handleChange}
66 | />
67 | ```


--------------------------------------------------------------------------------
/source/components/form_textarea/README.md:
--------------------------------------------------------------------------------
 1 | This component can be used like so.
 2 | 
 3 | ```js
 4 | // Event callback.
 5 | function handleChange (e, value) {
 6 |   /*
 7 |     `e` is the event.
 8 | 
 9 |     `value` is the *.value of the textarea.
10 |   */
11 | }
12 | 
13 | const autofocus = true // Default: false.
14 | const disabled = true // Default: false.
15 | const id = '...' // Ensured unique, if blank.
16 | const name = '...' // Uses id, if blank.
17 | const placeholder = '...' // Default: null.
18 | const required = true // Default: false.
19 | 
20 | // Determine pre-filled text.
21 | const defaultValue = '...' // Default: null.
22 | const value = '...' // Default: null.
23 | ```
24 | 
25 | **Note:** There is a difference between `value` and `defaultValue`. For more info, see the React documentation for…
26 | 
27 | * [Controlled Components](https://facebook.github.io/react/docs/forms.html#controlled-components)
28 | * [Uncontrolled Components](https://facebook.github.io/react/docs/forms.html#uncontrolled-components)
29 | 
30 | To use the component, pass these props.
31 | 
32 | ```xml
33 | <Textarea
34 |   autofocus={autofocus}
35 |   disabled={disabled}
36 |   id={id}
37 |   name={name}
38 |   placeholder={placeholder}
39 |   required={required}
40 | 
41 |   defaultValue={defaultValue}
42 |   value={value}
43 | 
44 |   handleChange={handleChange}
45 | />
46 | ```


--------------------------------------------------------------------------------
/source/components/form_textarea/index.js:
--------------------------------------------------------------------------------
  1 | // Dependencies.
  2 | import React from 'react'
  3 | 
  4 | // Utility methods.
  5 | import utils from '../../utils'
  6 | 
  7 | // Define class.
  8 | class Textarea extends React.Component {
  9 |   constructor (props) {
 10 |     // Pass `props` into scope.
 11 |     super(props)
 12 | 
 13 |     // Bind context.
 14 |     utils.bind(this)
 15 | 
 16 |     // Get default state.
 17 |     this.defaultState()
 18 |   }
 19 | 
 20 |   // Set default state.
 21 |   defaultState () {
 22 |     this.state = {
 23 |       id: this.props.id || utils.unique()
 24 |     }
 25 |   }
 26 | 
 27 |   // Automatically called after `render`.
 28 |   componentDidMount () {
 29 |     document.body.setAttribute('spellcheck', false)
 30 |   }
 31 | 
 32 |   handleChange (e) {
 33 |     const handleChange = this.props.handleChange
 34 | 
 35 |     // Exit, if no callback.
 36 |     if (typeof handleChange !== 'function') {
 37 |       return
 38 |     }
 39 | 
 40 |     const el = e.target
 41 |     const value = utils.trim(el.value)
 42 | 
 43 |     handleChange(e, value)
 44 |   }
 45 | 
 46 |   // Render method.
 47 |   render () {
 48 |     // State driven.
 49 |     const id = this.state.id
 50 | 
 51 |     // Props driven.
 52 |     const autofocus = this.props.autofocus
 53 |     const disabled = this.props.disabled
 54 |     const name = this.props.name || id
 55 |     const placeholder = this.props.placeholder
 56 |     const required = this.props.required
 57 | 
 58 |     // Control text value.
 59 |     const defaultValue = this.props.defaultValue
 60 |     const value = this.props.value
 61 | 
 62 |     // Events.
 63 |     const handleChange = this.handleChange
 64 | 
 65 |     return (
 66 |       <textarea
 67 |         autoFocus={autofocus}
 68 |         className='t7-form__textarea'
 69 |         disabled={disabled}
 70 |         id={id}
 71 |         name={name}
 72 |         placeholder={placeholder}
 73 |         required={required}
 74 | 
 75 |         defaultValue={defaultValue}
 76 |         value={value}
 77 | 
 78 |         onChange={handleChange}
 79 |       />
 80 |     )
 81 |   }
 82 | }
 83 | 
 84 | // Validation.
 85 | Textarea.propTypes = {
 86 |   autofocus: React.PropTypes.bool,
 87 |   disabled: React.PropTypes.bool,
 88 |   id: React.PropTypes.string,
 89 |   name: React.PropTypes.string,
 90 |   placeholder: React.PropTypes.string,
 91 |   required: React.PropTypes.bool,
 92 | 
 93 |   // Default value.
 94 |   defaultValue: React.PropTypes.oneOfType([
 95 |     React.PropTypes.string,
 96 |     React.PropTypes.number
 97 |   ]),
 98 | 
 99 |   // Forced value.
100 |   value: React.PropTypes.oneOfType([
101 |     React.PropTypes.string,
102 |     React.PropTypes.number
103 |   ]),
104 | 
105 |   // Events.
106 |   handleChange: React.PropTypes.func
107 | }
108 | 
109 | // Export.
110 | export default Textarea
111 | 


--------------------------------------------------------------------------------
/source/components/form_textdiv/README.md:
--------------------------------------------------------------------------------
 1 | **Note:** This uses the same props as `<Textarea/>`, but has a different tag name.
 2 | 
 3 | While they are functionally similar, there is quite a bit going on "under the hood" of `<Textdiv/>`.
 4 | 
 5 | Its output is a `<div>` with `contenteditable="true"`, that converts anything pasted or typed into it to plain text, much like a default HTML `<texarea>` would.
 6 | 
 7 | The benefit of using a `<Textdiv/>` component is that it grows with its content, without necessitating a JS grow-by-pixel approach, which is how one might handle a `<textarea>`.
 8 | 
 9 | ```xml
10 | <Textdiv
11 |   autofocus={autofocus}
12 |   disabled={disabled}
13 |   id={id}
14 |   name={name}
15 |   placeholder={placeholder}
16 |   required={required}
17 | 
18 |   defaultValue={defaultValue}
19 |   value={value}
20 | 
21 |   handleChange={handleChange}
22 | />
23 | ```


--------------------------------------------------------------------------------
/source/components/image/README.md:
--------------------------------------------------------------------------------
 1 | This component can be used like so.
 2 | 
 3 | ```js
 4 | const alt = '...' // Default: "".
 5 | const border = '#999' // Default: null.
 6 | const href = 'http://example.com/' // Default: null.
 7 | const src = 'photo.jpg' // Default: Placehold.it
 8 | const target = '_blank' // Default: null.
 9 | const width = '200' // Default: null.
10 | const height = '100' // Defualt: null.
11 | 
12 | // Event callback.
13 | function handleClick (e) {
14 |   /*
15 |     `e` is the event.
16 |   */
17 | }
18 | ```
19 | 
20 | This component adds a bit of logic to figure out whether it should employ a placeholder from [Placehold.it](http://placehold.it/) or not. Namely, if a `src` is present, it will use that. If not, it will create a dummy image using the `width` and `height` that were passed in. If none are present, it will default to a `200` &times; `100` image.
21 | 
22 | Occasionally, one might use an image that has a light background, necessitating visual separation from the page. If so, you can pass a hex color as `border`, which will create a `1px` line on each side.
23 | 
24 | To use the component, pass these props.
25 | 
26 | ```xml
27 | <Image
28 |   alt={alt}
29 |   border={border}
30 |   src={src}
31 |   width={width}
32 |   height={height}
33 | 
34 |   handleClick={handleClick}
35 | />
36 | ```


--------------------------------------------------------------------------------
/source/components/image_figure/README.md:
--------------------------------------------------------------------------------
 1 | This component can be used like so.
 2 | 
 3 | ```js
 4 | const alt = '...' // Default: "".
 5 | const border = '#999' // Default: null.
 6 | const caption = 'Image Caption Here'
 7 | const captionTop = true // Default: false.
 8 | const href = 'http://example.com/' // Default: null.
 9 | const src = 'photo.jpg' // Default: Placehold.it
10 | const target = '_blank' // Default: null.
11 | const width = '1000' // Default: null.
12 | const height = '300' // Default: null.
13 | 
14 | // Event callback.
15 | function handleClick (e) {
16 |   /*
17 |     `e` is the event.
18 |   */
19 | }
20 | ```
21 | 
22 | This component works similarly to `<Image/>` in that it will pull from the [Placehold.it](http://placehold.it/) service if no `src` is passed. It differs in that the `<ImageFigure/>` always stretches to fill `100%` of its parent, using `width` and `height` to determine its proportions.
23 | 
24 | To use the component, pass these props.
25 | 
26 | ```xml
27 | <ImageFigure
28 |   alt={alt}
29 |   border={border}
30 |   caption={caption}
31 |   captionTop={captionTop}
32 |   href={href}
33 |   src={src}
34 |   target={target}
35 |   width={width}
36 |   height={height}
37 | 
38 |   handleClick={handleClick}
39 | />
40 | ```


--------------------------------------------------------------------------------
/source/components/image_figure/index.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // UI components.
 5 | import Image from '../image'
 6 | 
 7 | // Define class.
 8 | class ImageFigure extends React.Component {
 9 |   // Render method.
10 |   render () {
11 |     const alt = this.props.alt
12 |     const border = this.props.border
13 |     const caption = this.props.caption
14 |     const captionTop = this.props.captionTop
15 |     const href = this.props.href
16 |     const src = this.props.src
17 |     const target = this.props.target
18 | 
19 |     // Click event.
20 |     const handleClick = this.props.handleClick
21 | 
22 |     let width = this.props.width
23 |     let height = this.props.height
24 | 
25 |     if (!src && !width) {
26 |       width = '1000'
27 |     }
28 | 
29 |     if (!src && !height) {
30 |       height = '300'
31 |     }
32 | 
33 |     // Markup for caption.
34 |     const figcaption = (
35 |       <figcaption>
36 |         {caption}
37 |       </figcaption>
38 |     )
39 | 
40 |     // Used in conditional.
41 |     let figcaptionTop
42 |     let figcaptionBottom
43 | 
44 |     // Determine caption position.
45 |     if (captionTop) {
46 |       figcaptionTop = figcaption
47 |     } else {
48 |       figcaptionBottom = figcaption
49 |     }
50 | 
51 |     // Expose the UI.
52 |     return (
53 |       <figure className='t7-figure'>
54 |         {figcaptionTop}
55 |         <Image
56 |           alt={alt}
57 |           border={border}
58 |           href={href}
59 |           src={src}
60 |           width={width}
61 |           height={height}
62 |           target={target}
63 | 
64 |           handleClick={handleClick}
65 |         />
66 |         {figcaptionBottom}
67 |       </figure>
68 |     )
69 |   }
70 | }
71 | 
72 | // Validation.
73 | ImageFigure.propTypes = {
74 |   alt: React.PropTypes.string,
75 |   border: React.PropTypes.string,
76 |   caption: React.PropTypes.string,
77 |   captionTop: React.PropTypes.bool,
78 |   handleClick: React.PropTypes.func,
79 |   href: React.PropTypes.string,
80 |   src: React.PropTypes.string,
81 |   target: React.PropTypes.string,
82 |   width: React.PropTypes.string,
83 |   height: React.PropTypes.string
84 | }
85 | 
86 | // Defaults.
87 | ImageFigure.defaultProps = {
88 |   alt: '',
89 |   caption: 'Image Caption Here'
90 | }
91 | 
92 | // Export.
93 | export default ImageFigure
94 | 


--------------------------------------------------------------------------------
/source/components/list_clean/README.md:
--------------------------------------------------------------------------------
 1 | This component is a simple wrapper around `<li>` elements that returns an list with slightly increased spacing, and no bullets.
 2 | 
 3 | ```xml
 4 | <ListClean>
 5 |   <li>
 6 |     List Item 1
 7 |   </li>
 8 |   <li>
 9 |     List Item 2
10 |   </li>
11 |   <li>
12 |     List Item 3
13 |   </li>
14 | </ListClean>
15 | ```


--------------------------------------------------------------------------------
/source/components/list_clean/index.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // Utility methods.
 5 | import fake from '../../fake'
 6 | 
 7 | // Define class.
 8 | class ListClean extends React.Component {
 9 |   // Render method.
10 |   render () {
11 |     return (
12 |       <ul className='t7-list-clean'>
13 |         {this.props.children}
14 |       </ul>
15 |     )
16 |   }
17 | }
18 | 
19 | // Validation.
20 | ListClean.propTypes = {
21 |   children: React.PropTypes.node
22 | }
23 | 
24 | // Defaults.
25 | ListClean.defaultProps = {
26 |   children: fake.list()
27 | }
28 | 
29 | // Export.
30 | export default ListClean
31 | 


--------------------------------------------------------------------------------
/source/components/list_inline/README.md:
--------------------------------------------------------------------------------
 1 | This component is a simple wrapper around `<li>` elements that are set to `display: inline`.
 2 | 
 3 | ```xml
 4 | <ListInline>
 5 |   <li>
 6 |     List Item 1
 7 |   </li>
 8 |   <li>
 9 |     List Item 2
10 |   </li>
11 |   <li>
12 |     List Item 3
13 |   </li>
14 | </ListInline>
15 | ```


--------------------------------------------------------------------------------
/source/components/list_inline/index.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // Utility methods.
 5 | import fake from '../../fake'
 6 | 
 7 | // Define class.
 8 | class ListInline extends React.Component {
 9 |   // Render method.
10 |   render () {
11 |     return (
12 |       <ul className='t7-list-inline'>
13 |         {this.props.children}
14 |       </ul>
15 |     )
16 |   }
17 | }
18 | 
19 | // Validation.
20 | ListInline.propTypes = {
21 |   children: React.PropTypes.node
22 | }
23 | 
24 | // Defaults.
25 | ListInline.defaultProps = {
26 |   children: fake.list()
27 | }
28 | 
29 | // Export.
30 | export default ListInline
31 | 


--------------------------------------------------------------------------------
/source/components/list_separator/README.md:
--------------------------------------------------------------------------------
 1 | This component is a simple wrapper around `<li>` elements that are set to `display: inline`, and have visual separators between them.
 2 | 
 3 | ```xml
 4 | <ListSeparator>
 5 |   <li>
 6 |     List Item 1
 7 |   </li>
 8 |   <li>
 9 |     List Item 2
10 |   </li>
11 |   <li>
12 |     List Item 3
13 |   </li>
14 | </ListSeparator>
15 | ```


--------------------------------------------------------------------------------
/source/components/list_separator/index.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // Utility methods.
 5 | import fake from '../../fake'
 6 | 
 7 | // Define class.
 8 | class ListSeparator extends React.Component {
 9 |   // Render method.
10 |   render () {
11 |     return (
12 |       <ul className='t7-list-separator'>
13 |         {this.props.children}
14 |       </ul>
15 |     )
16 |   }
17 | }
18 | 
19 | // Validation.
20 | ListSeparator.propTypes = {
21 |   children: React.PropTypes.node
22 | }
23 | 
24 | // Defaults.
25 | ListSeparator.defaultProps = {
26 |   children: fake.list()
27 | }
28 | 
29 | // Export.
30 | export default ListSeparator
31 | 


--------------------------------------------------------------------------------
/source/components/tabs/README.md:
--------------------------------------------------------------------------------
 1 | This component can be used like so.
 2 | 
 3 | ```js
 4 | function handleClick (e, label) {
 5 |   /*
 6 |     `e` is the event.
 7 | 
 8 |     `label` is the text itself.
 9 |   */
10 | }
11 | ```
12 | 
13 | ```xml
14 | <Tabs selected={0} handleClick={handleClick}>
15 |   <TabPanel label='Tab 1'>
16 |     <p>
17 |       Tab content for "Tab 1"
18 |     </p>
19 |   </TabPanel>
20 |   <TabPanel label='Tab 2'>
21 |     <p>
22 |       Tab content for "Tab 2"
23 |     </p>
24 |   </TabPanel>
25 |   <TabPanel label='Tab 3'>
26 |     <p>
27 |       Tab content for "Tab 3"
28 |     </p>
29 |   </TabPanel>
30 | </Tabs>
31 | ```


--------------------------------------------------------------------------------
/source/components/tabs/template_panel.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // Define class.
 5 | class TabPanel extends React.Component {
 6 | }
 7 | 
 8 | // Validation.
 9 | TabPanel.propTypes = {
10 |   children: React.PropTypes.node,
11 |   label: React.PropTypes.string
12 | }
13 | 
14 | // Export.
15 | export default TabPanel
16 | 


--------------------------------------------------------------------------------
/source/components/tabs/template_tab.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // Utility methods.
 5 | import utils from '../../utils'
 6 | 
 7 | // Define class.
 8 | class Tab extends React.Component {
 9 |   constructor (props) {
10 |     // Pass `props` into scope.
11 |     super(props)
12 | 
13 |     // Bind context.
14 |     utils.bind(this)
15 |   }
16 | 
17 |   // Click handler.
18 |   handleClick (e) {
19 |     const keyPress = e.keyCode
20 |     const keyEnter = keyPress === 13
21 | 
22 |     // Exit, if not "Enter" key.
23 |     if (keyPress && !keyEnter) {
24 |       return
25 |     }
26 | 
27 |     const handleClick = this.props.handleClick
28 | 
29 |     if (typeof handleClick !== 'function') {
30 |       return
31 |     }
32 | 
33 |     const index = this.props.index
34 |     const label = this.props.label
35 | 
36 |     handleClick(e, index, label)
37 |   }
38 | 
39 |   // Render method.
40 |   render () {
41 |     const ariaControls = this.props.ariaControls
42 |     const ariaExpanded = this.props.ariaExpanded
43 |     const ariaSelected = this.props.ariaSelected
44 | 
45 |     const className = this.props.className
46 |     const id = this.props.id
47 |     const label = this.props.label
48 | 
49 |     const handleClick = this.handleClick
50 | 
51 |     return (
52 |       <li
53 |         aria-controls={ariaControls}
54 |         aria-expanded={ariaExpanded}
55 |         aria-selected={ariaSelected}
56 |         className={className}
57 |         id={id}
58 |         key={id}
59 |         role='tab'
60 |         tabIndex='0'
61 | 
62 |         onClick={handleClick}
63 |         onKeyDown={handleClick}
64 |       >
65 |         {label}
66 |       </li>
67 |     )
68 |   }
69 | }
70 | 
71 | // Validation.
72 | Tab.propTypes = {
73 |   ariaControls: React.PropTypes.string,
74 |   ariaExpanded: React.PropTypes.bool,
75 |   ariaSelected: React.PropTypes.bool,
76 | 
77 |   className: React.PropTypes.string,
78 |   id: React.PropTypes.string,
79 |   index: React.PropTypes.number,
80 |   label: React.PropTypes.string,
81 | 
82 |   handleClick: React.PropTypes.func
83 | }
84 | 
85 | // Defaults.
86 | Tab.defaultProps = {
87 |   ariaExpanded: false,
88 |   ariaSelected: false
89 | }
90 | 
91 | // Export.
92 | export default Tab
93 | 


--------------------------------------------------------------------------------
/source/components_misc/markdown/code.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // Utility methods.
 5 | import utils from '../../utils'
 6 | 
 7 | // Define class.
 8 | class Code extends React.Component {
 9 |   // Render method.
10 |   render () {
11 |     return (
12 |       <div
13 |         dangerouslySetInnerHTML={
14 |           utils.markdown(
15 |             '```\n' +
16 |             require(
17 |               'raw!../../docs_code/' +
18 |               this.props.file.split('.')[0] +
19 |               '.md'
20 |             ) +
21 |             '\n```'
22 |           )
23 |         }
24 |       />
25 |     )
26 |   }
27 | }
28 | 
29 | // Validation.
30 | Code.propTypes = {
31 |   file: React.PropTypes.string
32 | }
33 | 
34 | // Export.
35 | export default Code
36 | 


--------------------------------------------------------------------------------
/source/components_misc/markdown/text.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // Utility methods.
 5 | import utils from '../../utils'
 6 | 
 7 | // Define class.
 8 | class Markdown extends React.Component {
 9 |   // Render method.
10 |   render () {
11 |     return (
12 |       <div
13 |         dangerouslySetInnerHTML={
14 |           utils.markdown(
15 |             require(
16 |               'raw!../../docs/' +
17 |               this.props.file.split('.')[0] +
18 |               '.md'
19 |             )
20 |           )
21 |         }
22 |       />
23 |     )
24 |   }
25 | }
26 | 
27 | // Validation.
28 | Markdown.propTypes = {
29 |   file: React.PropTypes.string
30 | }
31 | 
32 | // Export.
33 | export default Markdown
34 | 


--------------------------------------------------------------------------------
/source/docs/doc_404.md:
--------------------------------------------------------------------------------
1 | # Page Not Found :(
2 | 
3 | ---
4 | 
5 | Sorry, but we couldn't find that page.
6 | 
7 | Please start again at the "[Accounts](/)" page.


--------------------------------------------------------------------------------
/source/fake/_accordion.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | import AccordionPanel from '../components/accordion/template_panel'
 4 | 
 5 | // Generate dummy tab content.
 6 | export default function (count) {
 7 |   count = count || 3
 8 | 
 9 |   let panels = []
10 | 
11 |   for (let i = 0; i < count; i++) {
12 |     let label = 'Item ' + (i + 1)
13 | 
14 |     panels.push(
15 |       <AccordionPanel label={label}>
16 |         <p>
17 |           Content for "{label}"
18 |         </p>
19 |       </AccordionPanel>
20 |     )
21 |   }
22 | 
23 |   return panels
24 | }
25 | 


--------------------------------------------------------------------------------
/source/fake/_box.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // Filler text for `<div class="box">`.
 5 | export default function (count) {
 6 |   count = count || 1
 7 | 
 8 |   const children = []
 9 | 
10 |   for (let i = 0; i < count; i++) {
11 |     children.push(
12 |       <p key={i}>
13 |         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.
14 |       </p>
15 |     )
16 |   }
17 | 
18 |   return children
19 | }
20 | 


--------------------------------------------------------------------------------
/source/fake/_data_table_cols.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | 
 3 | //======================================
 4 | // Generates fake data in this format...
 5 | //======================================
 6 | 
 7 | [
 8 |   {
 9 |     title: 'Date',
10 |     type: 'date',
11 |     field: 'date',
12 |     sortable: true
13 |   },
14 |   {
15 |     title: 'Description',
16 |     field: 'description',
17 |     sortable: true
18 |   },
19 |   {
20 |     title: 'Category',
21 |     field: 'category',
22 |     sortable: true
23 |   },
24 |   {
25 |     title: 'Amount',
26 |     type: 'currency',
27 |     field: 'amount',
28 |     sortable: true
29 |   },
30 |   {
31 |     title: 'Balance',
32 |     field: 'balance',
33 |     type: 'currency'
34 |   }
35 | ]
36 | 
37 | */
38 | 
39 | export default function () {
40 |   // Columns.
41 |   const columns = [
42 |     {
43 |       title: 'Date',
44 |       type: 'date',
45 |       field: 'date',
46 |       sortable: true
47 |     },
48 |     {
49 |       title: 'Description',
50 |       field: 'description',
51 |       sortable: true
52 |     },
53 |     {
54 |       title: 'Category',
55 |       field: 'category',
56 |       sortable: true
57 |     },
58 |     {
59 |       title: 'Amount',
60 |       type: 'currency',
61 |       field: 'amount',
62 |       sortable: true
63 |     },
64 |     {
65 |       title: 'Balance',
66 |       field: 'balance',
67 |       type: 'currency'
68 |     }
69 |   ]
70 | 
71 |   // Expose object.
72 |   return columns
73 | }
74 | 


--------------------------------------------------------------------------------
/source/fake/_data_table_rows.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import utils from '../utils'
 3 | 
 4 | /*
 5 | 
 6 | //======================================
 7 | // Generates fake data in this format...
 8 | //======================================
 9 | 
10 | [
11 |   {
12 |     date: 1444338711008,
13 |     description: "Lorem ipsum dolor sit amet...",
14 |     category: "Expense",
15 |     amount: -657.8544315416366,
16 |     balance: 19342.145568458363
17 |   },
18 |   {
19 |     date: 1444252311008,
20 |     description: "Ut enim ad minim veniam...",
21 |     category: "Revenue",
22 |     amount: 225.9504753164947,
23 |     balance: 19568.096043774858
24 |   }
25 | 
26 |   // Etc.
27 | ]
28 | 
29 | */
30 | 
31 | export default function (count, balance) {
32 |   // Number of rows to generate.
33 |   count = count || 60
34 | 
35 |   // Starting balance.
36 |   balance = balance || 20000
37 | 
38 |   // Random currency.
39 |   function generateCurrency (negative) {
40 |     let modifier = 1
41 | 
42 |     if (negative) {
43 |       modifier = -1
44 |     }
45 | 
46 |     let num = Math.random()
47 |     num = num * 100
48 |     num = num * modifier
49 | 
50 |     return num
51 |   }
52 | 
53 |   // Generate row.
54 |   function generateRow (i) {
55 |     const x = i % 2 === 0
56 |     const amount = generateCurrency(x)
57 | 
58 |     const description = x
59 |       ? 'Lorem ipsum dolor sit amet...'
60 |       : 'Ut enim ad minim veniam...'
61 | 
62 |     const category = x
63 |       ? 'Withdrawl'
64 |       : 'Deposit'
65 | 
66 |     balance += amount
67 | 
68 |     return {
69 |       date: utils.today(-i),
70 |       description: description,
71 |       category: category,
72 |       amount: amount,
73 |       balance: balance
74 |     }
75 |   }
76 | 
77 |   // Used in loop.
78 |   let data = []
79 | 
80 |   // Build data.
81 |   for (let i = 0; i < count; i++) {
82 |     let row = generateRow(i)
83 |     data.push(row)
84 |   }
85 | 
86 |   // Expose object.
87 |   return data
88 | }
89 | 


--------------------------------------------------------------------------------
/source/fake/_list.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // Generates dummy list items.
 5 | export default function (count) {
 6 |   count = count || 3
 7 | 
 8 |   const children = []
 9 | 
10 |   for (let i = 0; i < count; i++) {
11 |     children.push(
12 |       <li key={i}>
13 |         List Item {i + 1}
14 |       </li>
15 |     )
16 |   }
17 | 
18 |   return children
19 | }
20 | 


--------------------------------------------------------------------------------
/source/fake/_tabs.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | import TabPanel from '../components/tabs/template_panel'
 4 | 
 5 | // Generate dummy tab content.
 6 | export default function (count) {
 7 |   count = count || 3
 8 | 
 9 |   let panels = []
10 | 
11 |   for (let i = 0; i < count; i++) {
12 |     let label = 'Tab ' + (i + 1)
13 | 
14 |     panels.push(
15 |       <TabPanel label={label}>
16 |         <p>
17 |           Tab content for "{label}"
18 |         </p>
19 |       </TabPanel>
20 |     )
21 |   }
22 | 
23 |   return panels
24 | }
25 | 


--------------------------------------------------------------------------------
/source/fake/index.js:
--------------------------------------------------------------------------------
 1 | // Import individual files.
 2 | import accordion from './_accordion'
 3 | import box from './_box'
 4 | import dataTableCols from './_data_table_cols'
 5 | import dataTableRows from './_data_table_rows'
 6 | import list from './_list'
 7 | import tabs from './_tabs'
 8 | 
 9 | // Export object.
10 | export default {
11 |   accordion: accordion,
12 |   box: box,
13 |   dataTableCols: dataTableCols,
14 |   dataTableRows: dataTableRows,
15 |   list: list,
16 |   tabs: tabs
17 | }
18 | 


--------------------------------------------------------------------------------
/source/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 | <meta charset="utf-8" />
 5 | <meta http-equiv="x-ua-compatible" content="ie=edge" />
 6 | <meta
 7 | name='viewport'
 8 | content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1'
 9 | />
10 | <link
11 | rel="shortcut icon"
12 | type="image/x-icon"
13 | href="./static/images/favicon.png"
14 | />
15 | <title data-suffix="ACME Corp"></title>
16 | </head>
17 | <body>
18 | <div id="app"></div>
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/source/index.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | import ReactDOM from 'react-dom'
 4 | import { Provider } from 'react-redux'
 5 | import { createStore } from 'redux'
 6 | 
 7 | // CSS.
 8 | import './sass/index.scss'
 9 | 
10 | // Routes.
11 | import routes from './routes'
12 | 
13 | // Redux root reducer.
14 | import rootReducer from './redux'
15 | 
16 | // Redux store.
17 | const store = createStore(rootReducer)
18 | 
19 | // Redux provicer.
20 | const template = (
21 |   <Provider store={store}>
22 |     {routes}
23 |   </Provider>
24 | )
25 | 
26 | // Insertion point.
27 | const el = document.getElementById('app')
28 | 
29 | // Render the app.
30 | ReactDOM.render(template, el)
31 | 


--------------------------------------------------------------------------------
/source/layouts/app/header.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | import { Link } from 'react-router'
 4 | import { Grid, GridContainer } from 'unsemantic'
 5 | 
 6 | // UI components.
 7 | import ListSeparator from '../../components/list_separator'
 8 | import Search from '../../components/form_search'
 9 | 
10 | // Define class.
11 | class AppHeader extends React.Component {
12 |   // Render method.
13 |   render () {
14 |     // Expose UI.
15 |     return (
16 |       <header
17 |         className='t7-app__header'
18 |         role='banner'
19 |       >
20 | 
21 |         <GridContainer>
22 | 
23 |           <Grid
24 |             desktop='25'
25 |             tablet='25'
26 |           >
27 | 
28 |             <Link to='/' className='t7-app__header__logo'>
29 |               ACME
30 |             </Link>
31 | 
32 |           </Grid>
33 | 
34 |           <Grid
35 |             desktop='50'
36 |             tablet='50'
37 |           >
38 | 
39 |             <ListSeparator>
40 | 
41 |               <li>
42 |                 <Link to='/'>Accounts</Link>
43 |               </li>
44 | 
45 |               <li>
46 |                 <Link to='/profile'>Profile</Link>
47 |               </li>
48 | 
49 |               <li>
50 |                 <a href='https://github.com/t7/react-starter'>GitHub</a>
51 |               </li>
52 | 
53 |             </ListSeparator>
54 | 
55 |           </Grid>
56 | 
57 |           <Grid
58 |             desktop='25'
59 |             tablet='25'
60 |           >
61 | 
62 |             <Search />
63 | 
64 |           </Grid>
65 | 
66 |         </GridContainer>
67 | 
68 |       </header>
69 |     )
70 |   }
71 | }
72 | 
73 | // Export.
74 | export default AppHeader
75 | 


--------------------------------------------------------------------------------
/source/layouts/app/index.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // UI components.
 5 | import AppWrapper from './wrapper'
 6 | import AppHeader from './header'
 7 | import AppMain from './main'
 8 | import AppFooter from './footer'
 9 | 
10 | // Define class.
11 | class App extends React.Component {
12 |   // Render method.
13 |   render () {
14 |     return (
15 |       <div className='t7-app'>
16 |         <AppWrapper>
17 |           <AppHeader />
18 |           <AppMain>
19 |             {this.props.children}
20 |           </AppMain>
21 |         </AppWrapper>
22 |         <AppFooter />
23 |       </div>
24 |     )
25 |   }
26 | }
27 | 
28 | // Validation.
29 | App.propTypes = {
30 |   children: React.PropTypes.node
31 | }
32 | 
33 | // Export.
34 | export default App
35 | 


--------------------------------------------------------------------------------
/source/layouts/app/main.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // Define class.
 5 | class AppMain extends React.Component {
 6 |   // Render method.
 7 |   render () {
 8 |     // Expose UI.
 9 |     return (
10 |       <main role='main' className='t7-app__main'>
11 |         {this.props.children}
12 |       </main>
13 |     )
14 |   }
15 | }
16 | 
17 | // Validation.
18 | AppMain.propTypes = {
19 |   children: React.PropTypes.node
20 | }
21 | 
22 | // Export.
23 | export default AppMain
24 | 


--------------------------------------------------------------------------------
/source/layouts/app/wrapper.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | 
 4 | // Define class.
 5 | class AppWrapper extends React.Component {
 6 |   // Render method.
 7 |   render () {
 8 |     // Expose UI.
 9 |     return (
10 |       <div className='t7-app__wrapper'>
11 |         {this.props.children}
12 |       </div>
13 |     )
14 |   }
15 | }
16 | 
17 | // Validation.
18 | AppWrapper.propTypes = {
19 |   children: React.PropTypes.node
20 | }
21 | 
22 | // Export.
23 | export default AppWrapper
24 | 


--------------------------------------------------------------------------------
/source/pages/404/index.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | import { Grid, GridContainer } from 'unsemantic'
 4 | 
 5 | // Utility methods.
 6 | import utils from '../../utils'
 7 | 
 8 | // Layout components.
 9 | import App from '../../layouts/app'
10 | 
11 | // Misc components.
12 | import Markdown from '../../components_misc/markdown/text'
13 | 
14 | // Define class.
15 | class Page extends React.Component {
16 |   constructor (props) {
17 |     // Pass `props` into scope.
18 |     super(props)
19 | 
20 |     // Set page title.
21 |     utils.title(props)
22 |   }
23 | 
24 |   // Render method.
25 |   render () {
26 |     // Expose UI.
27 |     return (
28 |       <App>
29 | 
30 |         <GridContainer>
31 | 
32 |           <Grid desktop='100'>
33 | 
34 |             <Markdown file='doc_404.md' />
35 | 
36 |           </Grid>
37 | 
38 |         </GridContainer>
39 | 
40 |       </App>
41 |     )
42 |   }
43 | }
44 | 
45 | // Export.
46 | export default Page
47 | 


--------------------------------------------------------------------------------
/source/redux/_types.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |   We're assigning each action type to
 3 |   a constant, to ensure uniqueness.
 4 | */
 5 | 
 6 | export const UPDATE_SAVINGS_TABLE = 'UPDATE_SAVINGS_TABLE'
 7 | 
 8 | export const UPDATE_CHECKING_TABLE = 'UPDATE_CHECKING_TABLE'
 9 | 
10 | export const UPDATE_ACCOUNTS_TABS = 'UPDATE_ACCOUNTS_TABS'
11 | 
12 | export const UPDATE_FAQ_ACCORDION = 'UPDATE_FAQ_ACCORDION'
13 | 
14 | export const UPDATE_PROFILE_FORM = 'UPDATE_PROFILE_FORM'
15 | 


--------------------------------------------------------------------------------
/source/redux/actions/accounts_tabs_actions.js:
--------------------------------------------------------------------------------
 1 | // Action types.
 2 | import * as types from '../_types'
 3 | 
 4 | export function updateAccountsTabsAction (payload) {
 5 |   return {
 6 |     type: types.UPDATE_ACCOUNTS_TABS,
 7 |     payload: payload
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/source/redux/actions/checking_table_actions.js:
--------------------------------------------------------------------------------
 1 | // Action types.
 2 | import * as types from '../_types'
 3 | 
 4 | export function updateCheckingTableAction (payload) {
 5 |   return {
 6 |     type: types.UPDATE_CHECKING_TABLE,
 7 |     payload: payload
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/source/redux/actions/faq_accordion_actions.js:
--------------------------------------------------------------------------------
 1 | // Action types.
 2 | import * as types from '../_types'
 3 | 
 4 | export function updateFaqAccordionAction (payload) {
 5 |   return {
 6 |     type: types.UPDATE_FAQ_ACCORDION,
 7 |     payload: payload
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/source/redux/actions/profile_form_actions.js:
--------------------------------------------------------------------------------
 1 | // Action types.
 2 | import * as types from '../_types'
 3 | 
 4 | export function updateProfileFormAction (payload) {
 5 |   return {
 6 |     type: types.UPDATE_PROFILE_FORM,
 7 |     payload: payload
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/source/redux/actions/savings_table_actions.js:
--------------------------------------------------------------------------------
 1 | // Action types.
 2 | import * as types from '../_types'
 3 | 
 4 | export function updateSavingsTableAction (payload) {
 5 |   return {
 6 |     type: types.UPDATE_SAVINGS_TABLE,
 7 |     payload: payload
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/source/redux/index.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import { combineReducers } from 'redux'
 3 | 
 4 | // Child reducers.
 5 | import accountsTabsReducer from './reducers/accounts_tabs_reducer'
 6 | import checkingTableReducer from './reducers/checking_table_reducer'
 7 | import faqAccordionReducer from './reducers/faq_accordion_reducer'
 8 | import profileFormReducer from './reducers/profile_form_reducer'
 9 | import savingsTableReducer from './reducers/savings_table_reducer'
10 | 
11 | // Bundle into root.
12 | const rootReducer = combineReducers({
13 |   accountsTabsReducer,
14 |   checkingTableReducer,
15 |   faqAccordionReducer,
16 |   profileFormReducer,
17 |   savingsTableReducer
18 | })
19 | 
20 | // Export.
21 | export default rootReducer
22 | 


--------------------------------------------------------------------------------
/source/redux/reducers/accounts_tabs_reducer.js:
--------------------------------------------------------------------------------
 1 | // Utility methods.
 2 | import utils from '../../utils'
 3 | 
 4 | // Action types.
 5 | import * as types from '../_types'
 6 | 
 7 | // Default.
 8 | let defaultState = utils.storage.get('accountsTabsReducer')
 9 | 
10 | // Default.
11 | if (!defaultState) {
12 |   defaultState = {
13 |     selected: 0
14 |   }
15 | }
16 | 
17 | // Define reducer.
18 | function accountsTabsReducer (state, action) {
19 |   state = state || defaultState
20 | 
21 |   // Pivot on action type.
22 |   switch (action.type) {
23 |     case types.UPDATE_ACCOUNTS_TABS:
24 |       state = Object.assign({}, state, action.payload)
25 |   }
26 | 
27 |   // Set cache.
28 |   utils.storage.set('accountsTabsReducer', state)
29 | 
30 |   // Expose state.
31 |   return state
32 | }
33 | 
34 | // Export.
35 | export default accountsTabsReducer
36 | 


--------------------------------------------------------------------------------
/source/redux/reducers/checking_table_reducer.js:
--------------------------------------------------------------------------------
 1 | // Utility methods.
 2 | import utils from '../../utils'
 3 | 
 4 | // Fake data.
 5 | import fake from '../../fake'
 6 | 
 7 | // Action types.
 8 | import * as types from '../_types'
 9 | 
10 | // Default.
11 | let defaultState = utils.storage.get('checkingTableReducer')
12 | 
13 | // Default.
14 | if (!defaultState) {
15 |   defaultState = {
16 |     columns: fake.dataTableCols(),
17 |     data: fake.dataTableRows(70, 9000),
18 |     pageCurrent: 0,
19 |     pageSize: 15,
20 |     sortDirection: null,
21 |     sortIndex: null
22 |   }
23 | }
24 | 
25 | // Define reducer.
26 | function checkingTableReducer (state, action) {
27 |   state = state || defaultState
28 | 
29 |   // Pivot on action type.
30 |   switch (action.type) {
31 |     case types.UPDATE_CHECKING_TABLE:
32 |       state = Object.assign({}, state, action.payload)
33 |   }
34 | 
35 |   // Set cache.
36 |   utils.storage.set('checkingTableReducer', state)
37 | 
38 |   // Expose state.
39 |   return state
40 | }
41 | 
42 | // Export.
43 | export default checkingTableReducer
44 | 


--------------------------------------------------------------------------------
/source/redux/reducers/faq_accordion_reducer.js:
--------------------------------------------------------------------------------
 1 | // Utility methods.
 2 | import utils from '../../utils'
 3 | 
 4 | // Action types.
 5 | import * as types from '../_types'
 6 | 
 7 | // Default.
 8 | let defaultState = utils.storage.get('faqAccordionReducer')
 9 | 
10 | // Default.
11 | if (!defaultState) {
12 |   defaultState = {}
13 | }
14 | 
15 | // Define reducer.
16 | function faqAccordionReducer (state, action) {
17 |   state = state || defaultState
18 | 
19 |   // Pivot on action type.
20 |   switch (action.type) {
21 |     case types.UPDATE_FAQ_ACCORDION:
22 |       state = Object.assign({}, state, action.payload)
23 |   }
24 | 
25 |   // Set cache.
26 |   utils.storage.set('faqAccordionReducer', state)
27 | 
28 |   // Expose state.
29 |   return state
30 | }
31 | 
32 | // Export.
33 | export default faqAccordionReducer
34 | 


--------------------------------------------------------------------------------
/source/redux/reducers/profile_form_reducer.js:
--------------------------------------------------------------------------------
  1 | // Utility methods.
  2 | import utils from '../../utils'
  3 | 
  4 | // Action types.
  5 | import * as types from '../_types'
  6 | 
  7 | // Get cache..
  8 | let defaultState = utils.storage.get('profileFormReducer')
  9 | 
 10 | // Default.
 11 | if (!defaultState) {
 12 |   defaultState = {
 13 |     data: [
 14 |       {
 15 |         name: 'inputFirstName',
 16 |         value: 'Jonathan'
 17 |       },
 18 |       {
 19 |         name: 'inputMiddleInitial',
 20 |         value: 'W'
 21 |       },
 22 |       {
 23 |         name: 'inputLastName',
 24 |         value: 'Rogersonian'
 25 |       },
 26 |       {
 27 |         name: 'inputBirthDate',
 28 |         value: '02/10/1990'
 29 |       },
 30 |       {
 31 |         name: 'inputSsn',
 32 |         value: '007-50-1337'
 33 |       },
 34 |       {
 35 |         name: 'inputEmail',
 36 |         value: 'jwr@example.com'
 37 |       },
 38 |       {
 39 |         name: 'inputPhone',
 40 |         value: '555-867-5309'
 41 |       },
 42 |       {
 43 |         name: 'inputAddress1',
 44 |         value: '1234 Fifth Street'
 45 |       },
 46 |       {
 47 |         name: 'inputAddress2',
 48 |         value: 'Apartment B'
 49 |       },
 50 |       {
 51 |         name: 'inputCity',
 52 |         value: 'Beverly Hills'
 53 |       },
 54 |       {
 55 |         name: 'inputState',
 56 |         value: 'CA'
 57 |       },
 58 |       {
 59 |         name: 'inputZip',
 60 |         value: '90210'
 61 |       },
 62 |       {
 63 |         name: 'inputAllergies',
 64 |         value: 'No food allergies, but I am deathly allergic to cats.'
 65 |       },
 66 |       {
 67 |         name: 'inputCombatTraining',
 68 |         value: 'yes',
 69 |         checked: true
 70 |       },
 71 |       {
 72 |         name: 'inputCombatTraining',
 73 |         value: 'no',
 74 |         checked: false
 75 |       },
 76 |       {
 77 |         name: 'inputLicenseToKill',
 78 |         value: 'yes',
 79 |         checked: true
 80 |       },
 81 |       {
 82 |         name: 'inputLicenseToKill',
 83 |         value: 'no',
 84 |         checked: false
 85 |       },
 86 |       {
 87 |         name: 'inputFarewell',
 88 |         value: 'Tell the commander that it *was* me who set fire to his car. Sorry! :)'
 89 |       },
 90 |       {
 91 |         name: 'inputAgreeToTerms',
 92 |         value: 'I agree to these terms.',
 93 |         checked: false
 94 |       }
 95 |     ]
 96 |   }
 97 | }
 98 | 
 99 | // Define reducer.
100 | function profileFormReducer (state, action) {
101 |   state = state || defaultState
102 | 
103 |   // Pivot on action type.
104 |   switch (action.type) {
105 |     case types.UPDATE_PROFILE_FORM:
106 |       state = Object.assign({}, state, action.payload)
107 |   }
108 | 
109 |   // Set cache.
110 |   utils.storage.set('profileFormReducer', state)
111 | 
112 |   // Expose state.
113 |   return state
114 | }
115 | 
116 | // Export.
117 | export default profileFormReducer
118 | 


--------------------------------------------------------------------------------
/source/redux/reducers/savings_table_reducer.js:
--------------------------------------------------------------------------------
 1 | // Utility methods.
 2 | import utils from '../../utils'
 3 | 
 4 | // Fake data.
 5 | import fake from '../../fake'
 6 | 
 7 | // Action types.
 8 | import * as types from '../_types'
 9 | 
10 | // Get cache..
11 | let defaultState = utils.storage.get('savingsTableReducer')
12 | 
13 | // Default.
14 | if (!defaultState) {
15 |   defaultState = {
16 |     columns: fake.dataTableCols(),
17 |     data: fake.dataTableRows(70, 9000),
18 |     pageCurrent: 0,
19 |     pageSize: 15,
20 |     sortDirection: null,
21 |     sortIndex: null
22 |   }
23 | }
24 | 
25 | // Define reducer.
26 | function savingsTableReducer (state, action) {
27 |   state = state || defaultState
28 | 
29 |   // Pivot on action type.
30 |   switch (action.type) {
31 |     case types.UPDATE_SAVINGS_TABLE:
32 |       state = Object.assign({}, state, action.payload)
33 |   }
34 | 
35 |   // Set cache.
36 |   utils.storage.set('savingsTableReducer', state)
37 | 
38 |   // Expose state.
39 |   return state
40 | }
41 | 
42 | // Export.
43 | export default savingsTableReducer
44 | 


--------------------------------------------------------------------------------
/source/routes.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import React from 'react'
 3 | import { Router, Route, useRouterHistory } from 'react-router'
 4 | import { createHashHistory } from 'history'
 5 | 
 6 | // Pages.
 7 | import Accounts from './pages/accounts'
 8 | import Profile from './pages/profile'
 9 | import NotFound from './pages/404'
10 | 
11 | // History tracking.
12 | const history =
13 | useRouterHistory(createHashHistory)({queryKey: false})
14 | 
15 | // Match routes to pages.
16 | const routes = (
17 |   <Router history={history}>
18 | 
19 |     <Route
20 |       path='/'
21 |       component={Accounts}
22 |       title='Bank Accounts'
23 |     />
24 | 
25 |     <Route
26 |       path='/profile'
27 |       component={Profile}
28 |       title='User Profile'
29 |     />
30 | 
31 |     <Route
32 |       path='*'
33 |       component={NotFound}
34 |       title='Page Not Found'
35 |     />
36 | 
37 |   </Router>
38 | )
39 | 
40 | // Expose routes.
41 | export default routes
42 | 


--------------------------------------------------------------------------------
/source/sass/index.scss:
--------------------------------------------------------------------------------
 1 | // Reset & Global styles.
 2 | //==================================================
 3 | 
 4 | @import "./partials/reset";
 5 | @import "./partials/global";
 6 | 
 7 | // Grid.
 8 | //==================================================
 9 | 
10 | @import "../../node_modules/unsemantic/grid";
11 | 
12 | // Layout.
13 | //==================================================
14 | 
15 | @import "./partials/t7-app";
16 | 
17 | // UI components.
18 | //==================================================
19 | 
20 | @import "./partials/t7-accordion";
21 | @import "./partials/t7-box";
22 | @import "./partials/t7-data-table";
23 | @import "./partials/t7-dropdown";
24 | @import "./partials/t7-figure";
25 | @import "./partials/t7-form";
26 | @import "./partials/t7-helper";
27 | @import "./partials/t7-list-clean";
28 | @import "./partials/t7-list-inline";
29 | @import "./partials/t7-list-separator";
30 | @import "./partials/t7-search-table";
31 | @import "./partials/t7-tabs";


--------------------------------------------------------------------------------
/source/sass/partials/_global.scss:
--------------------------------------------------------------------------------
  1 | /*
  2 | Basic HTML
  3 | ============================================================
  4 | */
  5 | 
  6 | body {
  7 |   background: #fff;
  8 |   color: #333;
  9 | 
 10 |   font-family: "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
 11 | 
 12 |   font-size: 13px;
 13 |   line-height: 1.5;
 14 | }
 15 | 
 16 | hr {
 17 |   border-top: 1px solid #ddd;
 18 |   clear: both;
 19 |   height: 0;
 20 | }
 21 | 
 22 | a {
 23 |   cursor: pointer;
 24 | }
 25 | 
 26 | small {
 27 |   font-size: 11px;
 28 | }
 29 | 
 30 | /*
 31 | Abbreviations in labels.
 32 | ============================================================
 33 | */
 34 | 
 35 | abbr[title] {
 36 |   border: 0;
 37 |   text-decoration: none;
 38 | }
 39 | 
 40 | label abbr[title="Required"] {
 41 |   color: #c96;
 42 |   font-family: "Courier New", monospace;
 43 |   font-size: 16px;
 44 |   font-weight: bold;
 45 |   line-height: 0;
 46 | 
 47 |   padding-left: 2px;
 48 | }
 49 | 
 50 | /*
 51 | Images.
 52 | ============================================================
 53 | */
 54 | 
 55 | img {
 56 |   display: inline-block;
 57 |   max-width: 100%;
 58 | }
 59 | 
 60 | br + img,
 61 | br + figure {
 62 |   margin-top: 5px;
 63 | }
 64 | 
 65 | /*
 66 | Code blocks.
 67 | ============================================================
 68 | */
 69 | 
 70 | pre,
 71 | code {
 72 |   font-family: "DejaVu Sans Mono", Menlo, Consolas, monospace;
 73 | }
 74 | 
 75 | /*
 76 | Headings
 77 | ============================================================
 78 | */
 79 | 
 80 | h1 {
 81 |   font-size: 25px;
 82 | }
 83 | 
 84 | h2 {
 85 |   font-size: 23px;
 86 | }
 87 | 
 88 | h3 {
 89 |   font-size: 21px;
 90 | }
 91 | 
 92 | h4 {
 93 |   font-size: 19px;
 94 | }
 95 | 
 96 | h5 {
 97 |   font-size: 17px;
 98 | }
 99 | 
100 | h6 {
101 |   font-size: 15px;
102 | }
103 | 
104 | h1 small,
105 | h2 small {
106 |   color: #999;
107 |   font-size: 13px;
108 |   font-weight: normal;
109 | }
110 | 
111 | @media (max-width: 767px) {
112 |   h1 small {
113 |     display: block;
114 |     padding-top: 10px;
115 |   }
116 | }
117 | 
118 | @media (min-width: 768px) {
119 |   h1 small {
120 |     padding-left: 10px;
121 |   }
122 | }
123 | 
124 | /*
125 | Spacing
126 | ============================================================
127 | */
128 | 
129 | ol {
130 |   list-style: decimal;
131 | }
132 | 
133 | ul {
134 |   list-style: disc;
135 | }
136 | 
137 | li {
138 |   margin-left: 30px;
139 | }
140 | 
141 | p,
142 | dl,
143 | hr,
144 | h1,
145 | h2,
146 | h3,
147 | h4,
148 | h5,
149 | h6,
150 | ol,
151 | ul,
152 | pre,
153 | table,
154 | address,
155 | fieldset,
156 | figure {
157 |   margin-bottom: 20px;
158 | }


--------------------------------------------------------------------------------
/source/sass/partials/_reset.scss:
--------------------------------------------------------------------------------
  1 | /*
  2 | Reset.
  3 | ============================================================
  4 | */
  5 | 
  6 | *,
  7 | *:before,
  8 | *:after {
  9 |   box-sizing: inherit;
 10 |   font-family: inherit;
 11 |   font-size: 100%;
 12 |   text-rendering: inherit;
 13 | }
 14 | 
 15 | a,
 16 | abbr,
 17 | acronym,
 18 | address,
 19 | applet,
 20 | article,
 21 | aside,
 22 | audio,
 23 | b,
 24 | big,
 25 | blockquote,
 26 | body,
 27 | canvas,
 28 | caption,
 29 | center,
 30 | cite,
 31 | code,
 32 | dd,
 33 | del,
 34 | details,
 35 | dfn,
 36 | dialog,
 37 | div,
 38 | dl,
 39 | dt,
 40 | em,
 41 | embed,
 42 | fieldset,
 43 | figcaption,
 44 | figure,
 45 | font,
 46 | footer,
 47 | form,
 48 | h1,
 49 | h2,
 50 | h3,
 51 | h4,
 52 | h5,
 53 | h6,
 54 | header,
 55 | hgroup,
 56 | hr,
 57 | html,
 58 | i,
 59 | iframe,
 60 | img,
 61 | ins,
 62 | kbd,
 63 | label,
 64 | legend,
 65 | li,
 66 | main,
 67 | mark,
 68 | menu,
 69 | meter,
 70 | nav,
 71 | object,
 72 | ol,
 73 | output,
 74 | p,
 75 | pre,
 76 | progress,
 77 | q,
 78 | rp,
 79 | rt,
 80 | ruby,
 81 | s,
 82 | samp,
 83 | section,
 84 | small,
 85 | span,
 86 | strike,
 87 | strong,
 88 | sub,
 89 | summary,
 90 | sup,
 91 | table,
 92 | tbody,
 93 | td,
 94 | tfoot,
 95 | th,
 96 | thead,
 97 | time,
 98 | tr,
 99 | tt,
100 | u,
101 | ul,
102 | var,
103 | video,
104 | xmp {
105 |   border: 0;
106 |   margin: 0;
107 |   padding: 0;
108 | }
109 | 
110 | html,
111 | body {
112 |   height: 100%;
113 | }
114 | 
115 | html {
116 |   box-sizing: border-box;
117 |   text-rendering: optimizeSpeed;
118 | }
119 | 
120 | b,
121 | strong {
122 |   /*
123 |     Makes browsers agree.
124 |     IE + Opera = font-weight: bold.
125 |     Gecko + WebKit = font-weight: bolder.
126 |   */
127 |   font-weight: bold;
128 | }
129 | 
130 | img {
131 |   color: transparent;
132 |   font-size: 0;
133 |   vertical-align: middle;
134 |   /*
135 |     For IE.
136 |     http://css-tricks.com/ie-fix-bicubic-scaling-for-images
137 |   */
138 |   -ms-interpolation-mode: bicubic;
139 | }
140 | 
141 | li {
142 |   /*
143 |     For IE6 + IE7:
144 |     "display: list-item" keeps bullets from
145 |     disappearing if hasLayout is triggered.
146 |   */
147 |   display: list-item;
148 | }
149 | 
150 | article,
151 | aside,
152 | details,
153 | figcaption,
154 | figure,
155 | footer,
156 | header,
157 | main,
158 | menu,
159 | nav,
160 | section,
161 | summary {
162 |   /*
163 |     Block level HTML5 tags.
164 |   */
165 |   display: block;
166 | }
167 | 
168 | table {
169 |   border-collapse: collapse;
170 |   border-spacing: 0;
171 | }
172 | 
173 | th,
174 | td,
175 | caption {
176 |   font-weight: normal;
177 |   vertical-align: top;
178 |   text-align: left;
179 | }
180 | 
181 | q {
182 |   quotes: none;
183 | }
184 | 
185 | q:before,
186 | q:after {
187 |   content: "";
188 |   content: none;
189 | }
190 | 
191 | sub,
192 | sup,
193 | small {
194 |   font-size: 75%;
195 | }
196 | 
197 | sub,
198 | sup {
199 |   line-height: 0;
200 |   position: relative;
201 |   vertical-align: baseline;
202 | }
203 | 
204 | sub {
205 |   bottom: -0.25em;
206 | }
207 | 
208 | sup {
209 |   top: -0.5em;
210 | }
211 | 
212 | svg {
213 |   /*
214 |     For IE9. Without, occasionally draws shapes
215 |     outside the boundaries of <svg> rectangle.
216 |   */
217 |   overflow: hidden;
218 | }


--------------------------------------------------------------------------------
/source/sass/partials/_t7-accordion.scss:
--------------------------------------------------------------------------------
  1 | /*
  2 | Accordion.
  3 | ============================================================
  4 | */
  5 | 
  6 | .t7-accordion {
  7 |   background: #f6f6f6;
  8 |   border: 1px solid #ddd;
  9 |   border-radius: 3px;
 10 | }
 11 | 
 12 | /*
 13 | Accordion header.
 14 | ============================================================
 15 | */
 16 | 
 17 | .t7-accordion__header {
 18 |   -moz-user-select: -moz-none;
 19 |   -webkit-user-select: none;
 20 |   -khtml-user-select: none;
 21 |   user-select: none;
 22 | 
 23 |   background: #f6f6f6;
 24 |   border-top: 1px solid #ddd;
 25 |   cursor: pointer;
 26 |   font-weight: bold;
 27 | 
 28 |   outline: 0;
 29 | 
 30 |   padding: 5px 10px;
 31 |   padding-left: 30px;
 32 |   position: relative;
 33 | }
 34 | 
 35 | .t7-accordion__header:first-child {
 36 |   border-top-left-radius: 3px;
 37 |   border-top-right-radius: 3px;
 38 |   border-top: 0;
 39 | }
 40 | 
 41 | .t7-accordion__header[aria-expanded="false"]:last-of-type {
 42 |   border-bottom-left-radius: 3px;
 43 |   border-bottom-right-radius: 3px;
 44 | }
 45 | 
 46 | .t7-accordion__header:hover {
 47 |   background: #ffd;
 48 | }
 49 | 
 50 | .t7-accordion__header:focus {
 51 |   box-shadow: #39f 0 0 2px 1px;
 52 |   position: relative;
 53 |   z-index: 1;
 54 | }
 55 | 
 56 | /*
 57 | Expand/Collapse icon.
 58 | ============================================================
 59 | */
 60 | 
 61 | .t7-accordion__header__icon {
 62 |   background: #fff;
 63 |   border: 1px solid #999;
 64 |   border-radius: 2px;
 65 | 
 66 |   overflow: hidden;
 67 |   width: 12px;
 68 |   height: 12px;
 69 | 
 70 |   margin-top: -6px;
 71 |   position: absolute;
 72 |   top: 50%;
 73 |   left: 10px;
 74 | }
 75 | 
 76 | .t7-accordion__header__icon:before,
 77 | .t7-accordion__header__icon:after {
 78 |   content: "";
 79 | 
 80 |   background: #666;
 81 | 
 82 |   color: transparent;
 83 |   font-size: 0;
 84 |   line-height: 0;
 85 |   overflow: hidden;
 86 |   text-indent: -99999px;
 87 | 
 88 |   position: absolute;
 89 |   top: auto;
 90 |   left: auto;
 91 |   right: auto;
 92 |   bottom: auto;
 93 | }
 94 | 
 95 | .t7-accordion__header__icon:before {
 96 |   top: 1px;
 97 |   left: 50%;
 98 |   bottom: 1px;
 99 | 
100 |   margin-left: -1px;
101 |   width: 2px;
102 | }
103 | 
104 | .t7-accordion__header__icon:after {
105 |   top: 50%;
106 |   left: 1px;
107 |   right: 1px;
108 | 
109 |   margin-top: -1px;
110 |   height: 2px;
111 | }
112 | 
113 | /*
114 |   Active & Selected state.
115 | */
116 | 
117 | *:focus > .t7-accordion__header__icon {
118 |   border-color: #39f;
119 | }
120 | 
121 | *:focus > .t7-accordion__header__icon:before,
122 | *:focus > .t7-accordion__header__icon:after {
123 |   background: #39f;
124 | }
125 | 
126 | *[aria-selected="true"] > .t7-accordion__header__icon:before {
127 |   display: none;
128 | }
129 | 
130 | /*
131 | Accordion panel.
132 | ============================================================
133 | */
134 | 
135 | .t7-accordion__panel {
136 |   background: #fff;
137 |   overflow: hidden;
138 | 
139 |   padding-top: 20px;
140 |   padding-left: 20px;
141 |   padding-right: 20px;
142 | }
143 | 
144 | .t7-accordion__panel[aria-hidden="true"] {
145 |   display: none;
146 | }


--------------------------------------------------------------------------------
/source/sass/partials/_t7-app.scss:
--------------------------------------------------------------------------------
  1 | /*
  2 | App shell.
  3 | ============================================================
  4 | */
  5 | 
  6 | .t7-app a {
  7 |   color: #69c;
  8 |   text-decoration: none;
  9 | }
 10 | 
 11 | .t7-app a:hover {
 12 |   color: #c96;
 13 | }
 14 | 
 15 | /*
 16 | Wrapper. Used for "sticky footer" approach.
 17 | ============================================================
 18 | */
 19 | 
 20 | @media (min-width: 768px) {
 21 |   html:not([data-mode="phantom"]),
 22 |   html:not([data-mode="phantom"]) body {
 23 |     overflow: hidden;
 24 |   }
 25 | 
 26 |   html:not([data-mode="phantom"]) .t7-app {
 27 |     overflow-x: hidden;
 28 |     overflow-y: scroll;
 29 | 
 30 |     position: absolute;
 31 |     top: 0;
 32 |     left: 0;
 33 |     right: 0;
 34 |     bottom: 0;
 35 |   }
 36 | 
 37 |   html:not([data-mode="phantom"]) .t7-app__wrapper {
 38 |     min-height: 100%;
 39 |   }
 40 | }
 41 | 
 42 | /*
 43 | Header.
 44 | ============================================================
 45 | */
 46 | 
 47 | .t7-app__header {
 48 |   background: #f6f6f6;
 49 |   border-bottom: 1px solid #ddd;
 50 |   border-top: 5px solid #69c;
 51 | }
 52 | 
 53 | .t7-app__header__logo {
 54 |   background-image: url("./static/images/t7-app__header__logo.svg");
 55 |   background-repeat: no-repeat;
 56 |   background-size: 100% 100%;
 57 | 
 58 |   color: transparent;
 59 |   display: inline-block;
 60 |   overflow: hidden;
 61 |   text-indent: -99999px;
 62 |   vertical-align: middle;
 63 | 
 64 |   width: 150px;
 65 |   height: 25px;
 66 | }
 67 | 
 68 | .t7-app__header ul {
 69 |   margin-bottom: 0;
 70 | }
 71 | 
 72 | .t7-app__header li {
 73 |   vertical-align: middle;
 74 | }
 75 | 
 76 | @media (max-width: 767px) {
 77 |   .t7-app__header {
 78 |     padding-top: 20px;
 79 |     padding-bottom: 20px;
 80 |   }
 81 | 
 82 |   .t7-app__header ul {
 83 |     padding-top: 20px;
 84 |     padding-bottom: 20px;
 85 |   }
 86 | }
 87 | 
 88 | @media (min-width: 768px) {
 89 |   .t7-app__header {
 90 |     line-height: 50px;
 91 |   }
 92 | }
 93 | 
 94 | /*
 95 | Main.
 96 | ============================================================
 97 | */
 98 | 
 99 | .t7-app__main {
100 |   padding-top: 20px;
101 |   padding-bottom: 10px;
102 | }
103 | 
104 | @media (min-width: 768px) {
105 |   .t7-app__main {
106 |     /*
107 |       Footer height +10px.
108 |     */
109 |     padding-bottom: 210px;
110 |   }
111 | }
112 | 
113 | /*
114 | Footer.
115 | ============================================================
116 | */
117 | 
118 | .t7-app__footer {
119 |   background: #eee;
120 |   border-top: 5px solid #69c;
121 |   color: #aaa;
122 | 
123 |   font-size: 12px;
124 |   line-height: 2;
125 |   padding-top: 15px;
126 | 
127 |   white-space: nowrap;
128 | }
129 | 
130 | @media (min-width: 768px) {
131 |   .t7-app__footer {
132 |     margin-top: -200px;
133 |     height: 200px;
134 |   }
135 | }
136 | 
137 | .t7-app__footer a {
138 |   color: #777;
139 | }
140 | 
141 | .t7-app__footer a:hover {
142 |   color: #000;
143 | }
144 | 
145 | .t7-app__footer dt {
146 |   font-size: 150%;
147 |   margin-bottom: 5px;
148 | }


--------------------------------------------------------------------------------
/source/sass/partials/_t7-data-table.scss:
--------------------------------------------------------------------------------
  1 | /*
  2 | Data table.
  3 | ============================================================
  4 | */
  5 | 
  6 | .t7-data-table {
  7 |   border: 1px solid #ddd;
  8 |   width: 100%;
  9 | }
 10 | 
 11 | .t7-data-table__wrapper {
 12 |   margin-bottom: 20px;
 13 |   overflow-x: auto;
 14 |   overflow-y: hidden;
 15 | }
 16 | 
 17 | .t7-data-table__wrapper table {
 18 |   margin-bottom: 0;
 19 | }
 20 | 
 21 | /*
 22 | Pagination.
 23 | ============================================================
 24 | */
 25 | 
 26 | .t7-data-table__pagination {
 27 |   padding-top: 5px;
 28 |   padding-bottom: 5px;
 29 |   line-height: 25px;
 30 |   overflow: hidden;
 31 |   white-space: nowrap;
 32 | }
 33 | 
 34 | .t7-data-table__pagination--hidden {
 35 |   display: none;
 36 | }
 37 | 
 38 | .t7-data-table__pagination + .t7-data-table,
 39 | .t7-data-table + .t7-data-table__pagination {
 40 |   margin-top: 5px;
 41 | }
 42 | 
 43 | .t7-data-table__pagination__label {
 44 |   color: #999;
 45 |   float: right;
 46 | }
 47 | 
 48 | @media (max-width: 480px) {
 49 |   .t7-data-table__pagination__label {
 50 |     display: none;
 51 |   }
 52 | }
 53 | 
 54 | /*
 55 | Header and cells.
 56 | ============================================================
 57 | */
 58 | 
 59 | .t7-data-table__th,
 60 | .t7-data-table__td {
 61 |   padding: 5px;
 62 | }
 63 | 
 64 | .t7-data-table__th + .t7-data-table__th,
 65 | .t7-data-table__td + .t7-data-table__td {
 66 |   border-left: 1px solid #ddd;
 67 | }
 68 | 
 69 | /*
 70 | Headers
 71 | ============================================================
 72 | */
 73 | 
 74 | .t7-data-table__th {
 75 |   background: #f6f6f6;
 76 |   border-bottom: 1px solid #ddd;
 77 |   cursor: default;
 78 |   white-space: nowrap;
 79 | 
 80 |   -moz-user-select: -moz-none;
 81 |   -webkit-user-select: none;
 82 |   -khtml-user-select: none;
 83 |   user-select: none;
 84 | }
 85 | 
 86 | .t7-data-table__th--sortable {
 87 |   cursor: pointer;
 88 | }
 89 | 
 90 | .t7-data-table__th--sortable:hover {
 91 |   background: #ffe;
 92 | }
 93 | 
 94 | .t7-data-table__th--sortable:focus {
 95 |   border: 1px solid #39f;
 96 |   outline: 0;
 97 | }
 98 | 
 99 | .t7-data-table__th--sortable:before {
100 |   content: "";
101 | 
102 |   background-image: url("./static/images/t7-data-table__th--sortable.svg");
103 |   background-repeat: no-repeat;
104 |   background-position: center center;
105 |   background-size: 7px 11px;
106 | 
107 |   display: inline-block;
108 |   margin-right: 5px;
109 |   vertical-align: baseline;
110 | 
111 |   width: 7px;
112 |   height: 11px;
113 | 
114 |   position: relative;
115 |   top: 1px;
116 | }
117 | 
118 | .t7-data-table__th--sortable[aria-sort="ascending"]:before {
119 |   background-image: url("./static/images/t7-data-table__th--sortable[asc].svg");
120 | }
121 | 
122 | .t7-data-table__th--sortable[aria-sort="descending"]:before {
123 |   background-image: url("./static/images/t7-data-table__th--sortable[desc].svg");
124 | }
125 | 
126 | /*
127 | Cells.
128 | ============================================================
129 | */
130 | 
131 | .t7-data-table tbody tr:nth-child(even) .t7-data-table__td {
132 |   background: #f6f9fc;
133 | }
134 | 
135 | .t7-data-table__td--currency {
136 |   text-align: right;
137 | }
138 | 
139 | .t7-data-table__td--negative {
140 |   color: #c33;
141 | }


--------------------------------------------------------------------------------
/source/sass/partials/_t7-dropdown.scss:
--------------------------------------------------------------------------------
  1 | /*
  2 | ============================================================
  3 | Dropdown.
  4 | ============================================================
  5 | */
  6 | 
  7 | .t7-dropdown {
  8 |   -moz-user-select: -moz-none;
  9 |   -webkit-user-select: none;
 10 |   -khtml-user-select: none;
 11 |   user-select: none;
 12 | 
 13 |   display: inline-block;
 14 |   position: relative;
 15 | }
 16 | 
 17 | /*
 18 | ============================================================
 19 | Dropdown: Trigger.
 20 | ============================================================
 21 | */
 22 | 
 23 | .t7-dropdown__trigger[class] {
 24 |   background-image: url("./static/images/t7-dropdown__trigger.svg");
 25 |   background-size: 11px auto;
 26 |   background-repeat: no-repeat;
 27 |   background-position: right center;
 28 | 
 29 |   display: inline-block;
 30 |   text-decoration: none;
 31 | 
 32 |   padding-right: 16px;
 33 | }
 34 | 
 35 | .t7-dropdown__trigger[class],
 36 | .t7-dropdown__trigger[class]:hover {
 37 |   color: #333;
 38 | }
 39 | 
 40 | /*
 41 | ============================================================
 42 | Dropdown: Menu.
 43 | ============================================================
 44 | */
 45 | 
 46 | .t7-dropdown__menu,
 47 | .t7-dropdown__menu__item {
 48 |   list-style: none;
 49 |   margin: 0;
 50 |   padding: 0;
 51 | }
 52 | 
 53 | .t7-dropdown__menu {
 54 |   background: #fff;
 55 |   border: 1px solid #000;
 56 |   border-radius: 4px;
 57 | 
 58 |   margin-left: -11px;
 59 |   margin-right: -11px;
 60 | 
 61 |   min-width: calc(100% + 22px);
 62 |   overflow: hidden;
 63 |   white-space: nowrap;
 64 | 
 65 |   position: absolute;
 66 |   top: 100%;
 67 |   left: auto;
 68 |   right: auto;
 69 |   bottom: auto;
 70 | 
 71 |   z-index: 1;
 72 | }
 73 | 
 74 | *[data-menu-align="left"] > .t7-dropdown__menu {
 75 |   left: 0;
 76 | }
 77 | 
 78 | *[data-menu-align="right"] > .t7-dropdown__menu {
 79 |   right: 0;
 80 | }
 81 | 
 82 | .t7-dropdown__menu[aria-hidden='true'] {
 83 |   display: none;
 84 | }
 85 | 
 86 | .t7-dropdown__menu__item {
 87 |   padding: 5px 10px;
 88 | }
 89 | 
 90 | .t7-dropdown__menu__link[class] {
 91 |   color: #333;
 92 |   display: block;
 93 | 
 94 |   margin: -5px -10px;
 95 |   padding: 5px 10px;
 96 | 
 97 |   outline: 0;
 98 |   text-decoration: none;
 99 | }
100 | 
101 | .t7-dropdown__menu__link[class]:hover {
102 |   background: #ffd;
103 |   color: #000;
104 | }
105 | 
106 | .t7-dropdown__menu__link[class]:focus,
107 | .t7-dropdown__menu__link[class]:active {
108 |   box-shadow: inset #39f 0 0 2px 1px;
109 | }
110 | 
111 | .t7-dropdown__menu__item:not(:first-child) .t7-dropdown__menu__link[class] {
112 |   border-top: 1px solid #ddd;
113 | }
114 | 
115 | /*
116 | ============================================================
117 | End caps for first/last links.
118 | ============================================================
119 | */
120 | 
121 | .t7-dropdown__menu__item:first-child .t7-dropdown__menu__link[class] {
122 |   border-top-left-radius: 3px;
123 |   border-top-right-radius: 3px;
124 | }
125 | 
126 | .t7-dropdown__menu__item:last-child .t7-dropdown__menu__link[class] {
127 |   border-bottom-left-radius: 3px;
128 |   border-bottom-right-radius: 3px;
129 | }


--------------------------------------------------------------------------------
/source/sass/partials/_t7-figure.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 | Image figure.
 3 | ============================================================
 4 | */
 5 | 
 6 | .t7-figure {
 7 |   border: 1px solid #ddd;
 8 |   border-radius: 4px;
 9 |   padding: 2px;
10 | }
11 | 
12 | .t7-figure figcaption {
13 |   background: #f6f6f6;
14 |   padding: 2px 5px;
15 | }
16 | 
17 | .t7-figure figcaption:first-child {
18 |   border-top-left-radius: 3px;
19 |   border-top-right-radius: 3px;
20 |   margin-bottom: 2px;
21 | }
22 | 
23 | .t7-figure figcaption:last-child {
24 |   border-bottom-left-radius: 3px;
25 |   border-bottom-right-radius: 3px;
26 |   margin-top: 2px;
27 | }
28 | 
29 | .t7-figure img {
30 |   width: 100%;
31 |   height: auto;
32 | }
33 | 
34 | .t7-figure > img:first-child,
35 | .t7-figure > a:first-child img {
36 |   border-top-left-radius: 3px;
37 |   border-top-right-radius: 3px;
38 | }
39 | 
40 | .t7-figure > img:last-child,
41 | .t7-figure > a:last-child img {
42 |   border-bottom-left-radius: 3px;
43 |   border-bottom-right-radius: 3px;
44 | }


--------------------------------------------------------------------------------
/source/sass/partials/_t7-list-clean.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 | No bullets.
 3 | ============================================================
 4 | */
 5 | 
 6 | .t7-list-clean {
 7 |   margin-bottom: 10px;
 8 | }
 9 | 
10 | .t7-list-clean > li {
11 |   list-style: none;
12 |   margin-left: 0;
13 |   padding-bottom: 10px;
14 | }


--------------------------------------------------------------------------------
/source/sass/partials/_t7-list-inline.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 | Inline list.
 3 | ============================================================
 4 | */
 5 | 
 6 | .t7-list-inline {
 7 |   font-size: 0;
 8 | 
 9 |   margin-top: -10px;
10 |   margin-left: -20px;
11 | }
12 | 
13 | .t7-list-inline > li {
14 |   font-size: 13px;
15 | 
16 |   display: inline-block;
17 |   list-style: none;
18 |   margin-left: 0;
19 | 
20 |   padding-top: 10px;
21 |   padding-left: 20px;
22 | }


--------------------------------------------------------------------------------
/source/sass/partials/_t7-list-separator.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 | List with separators.
 3 | ============================================================
 4 | */
 5 | 
 6 | .t7-list-separator {
 7 |   font-size: 0;
 8 | 
 9 |   margin-top: -10px;
10 |   margin-left: -10px;
11 | }
12 | 
13 | .t7-list-separator li {
14 |   font-size: 13px;
15 | 
16 |   display: inline-block;
17 |   list-style: none;
18 |   margin-left: 0;
19 | 
20 |   padding-top: 10px;
21 |   padding-left: 10px;
22 | }
23 | 
24 | .t7-list-separator li + li:before {
25 |   content: "";
26 |   border-left: 1px solid #ccc;
27 |   padding-left: 10px;
28 | }


--------------------------------------------------------------------------------
/source/sass/partials/_t7-search-table.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 | Search form table.
 3 | ============================================================
 4 | */
 5 | 
 6 | .t7-search-table {
 7 |   margin: 0;
 8 |   width: 100%;
 9 | }
10 | 
11 | .t7-search-table td + td {
12 |   padding-left: 10px;
13 |   width: 1%;
14 | }


--------------------------------------------------------------------------------
/source/sass/partials/_t7-tabs.scss:
--------------------------------------------------------------------------------
  1 | /*
  2 | Tabs group.
  3 | ============================================================
  4 | */
  5 | 
  6 | .t7-tabs {
  7 |   clear: both;
  8 |   margin-bottom: 20px;
  9 | }
 10 | 
 11 | /*
 12 | Tab list.
 13 | ============================================================
 14 | */
 15 | 
 16 | .t7-tabs__item,
 17 | .t7-tabs__list {
 18 |   list-style: none;
 19 |   margin: 0;
 20 | }
 21 | 
 22 | .t7-tabs__list {
 23 |   font-size: 0;
 24 |   margin-bottom: -1px;
 25 |   padding-left: 15px;
 26 |   padding-right: 20px;
 27 |   white-space: nowrap;
 28 |   position: relative;
 29 |   z-index: 1;
 30 | }
 31 | 
 32 | .t7-tabs__item {
 33 |   -moz-user-select: -moz-none;
 34 |   -webkit-user-select: none;
 35 |   -khtml-user-select: none;
 36 |   user-select: none;
 37 | 
 38 |   background: #f6f6f6;
 39 |   border: 1px solid #ddd;
 40 |   border-top-left-radius: 3px;
 41 |   border-top-right-radius: 3px;
 42 |   cursor: pointer;
 43 |   display: inline-block;
 44 |   font-size: 13px;
 45 |   margin-left: 5px;
 46 |   padding: 5px 10px;
 47 |   outline: 0;
 48 | }
 49 | 
 50 | .t7-tabs__item:hover {
 51 |   background: #ffd;
 52 | }
 53 | 
 54 | .t7-tabs__item[aria-selected="true"] {
 55 |   background: #fff;
 56 |   border-bottom-color: #fff;
 57 | }
 58 | 
 59 | .t7-tabs__item:focus {
 60 |   border-color: #39f;
 61 |   box-shadow: #39f 0 0 2px 0;
 62 | }
 63 | 
 64 | /*
 65 | Tab panel.
 66 | ============================================================
 67 | */
 68 | 
 69 | .t7-tabs__panel {
 70 |   border: 1px solid #ddd;
 71 |   border-radius: 3px;
 72 | 
 73 |   padding-top: 20px;
 74 |   padding-left: 20px;
 75 |   padding-right: 20px;
 76 | 
 77 |   z-index: 0;
 78 | }
 79 | 
 80 | .t7-tabs__panel[aria-hidden="true"] {
 81 |   display: none;
 82 | }
 83 | 
 84 | /*
 85 | Clear floated content.
 86 | */
 87 | 
 88 | .t7-tabs__panel:before,
 89 | .t7-tabs__panel:after {
 90 |   content: ".";
 91 |   display: block;
 92 |   overflow: hidden;
 93 |   visibility: hidden;
 94 |   font-size: 0;
 95 |   line-height: 0;
 96 |   width: 0;
 97 |   height: 0;
 98 | }
 99 | 
100 | .t7-tabs__panel:after {
101 |   clear: both;
102 | }


--------------------------------------------------------------------------------
/source/static/README.md:
--------------------------------------------------------------------------------
 1 | # Static Assets
 2 | 
 3 | This directory is meant for any static assets,
 4 | images to be used as foreground `<img/>`. etc.
 5 | 
 6 | ---
 7 | 
 8 | ## Avatar Credit
 9 | 
10 | Used with permission from Anthony Garand.
11 | 
12 | https://twitter.com/garand/status/656122631507288064
13 | 
14 | http://uifaces.com/garand
15 | 
16 | ---
17 | 
18 | ## Stock Photo Credits
19 | 
20 | * https://unsplash.com/photos/ZMcLVBi9xx4
21 | * https://unsplash.com/photos/GKR1tBkmW3M
22 | * https://unsplash.com/photos/1eWaod96d3k
23 | * https://unsplash.com/photos/7P_2hzKryQEf
24 | * https://unsplash.com/photos/1eWaod96d3k


--------------------------------------------------------------------------------
/source/static/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/t7/react-starter/486dff426449a1711c8aca14d2ca592e7b3777fb/source/static/images/favicon.png


--------------------------------------------------------------------------------
/source/static/images/fpo/fpo_dock.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/t7/react-starter/486dff426449a1711c8aca14d2ca592e7b3777fb/source/static/images/fpo/fpo_dock.jpg


--------------------------------------------------------------------------------
/source/static/images/fpo/fpo_jonathan_rogersonian.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/t7/react-starter/486dff426449a1711c8aca14d2ca592e7b3777fb/source/static/images/fpo/fpo_jonathan_rogersonian.jpg


--------------------------------------------------------------------------------
/source/static/images/fpo/fpo_matterhorn.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/t7/react-starter/486dff426449a1711c8aca14d2ca592e7b3777fb/source/static/images/fpo/fpo_matterhorn.jpg


--------------------------------------------------------------------------------
/source/static/images/fpo/fpo_phone_booth.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/t7/react-starter/486dff426449a1711c8aca14d2ca592e7b3777fb/source/static/images/fpo/fpo_phone_booth.jpg


--------------------------------------------------------------------------------
/source/static/images/fpo/fpo_phone_ocean.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/t7/react-starter/486dff426449a1711c8aca14d2ca592e7b3777fb/source/static/images/fpo/fpo_phone_ocean.jpg


--------------------------------------------------------------------------------
/source/static/images/t7-box--info--icon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100"><g fill="none" fill-rule="evenodd"><path fill="#69C" d="M50,100 C77.6142375,100 100,77.6142375 100,50 C100,22.3857625 77.6142375,0 50,0 C22.3857625,0 0,22.3857625 0,50 C0,77.6142375 22.3857625,100 50,100 Z"/><path fill="#FFF" d="M50.2,37.5 C45.7,37.5 42.5,39.4 42.5,42.2 L42.5,80.3 C42.5,82.7 45.7,85.1 50.2,85.1 C54.5,85.1 58,82.7 58,80.3 L58,42.2 C58,39.4 54.5,37.5 50.2,37.5 L50.2,37.5 L50.2,37.5 Z M50.2,14 C45.6,14 42,17.3 42,21.1 C42,24.9 45.6,28.3 50.2,28.3 C54.7,28.3 58.3,24.9 58.3,21.1 C58.3,17.3 54.7,14 50.2,14 L50.2,14 L50.2,14 Z"/></g></svg>


--------------------------------------------------------------------------------
/source/static/images/t7-box--negative--icon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100"><g fill="none" fill-rule="evenodd"><circle cx="50" cy="50" r="50" fill="#C66"/><path fill="#FFF" d="M50.2,37.5 C45.7,37.5 42.5,39.4 42.5,42.2 L42.5,80.3 C42.5,82.7 45.7,85.1 50.2,85.1 C54.5,85.1 58,82.7 58,80.3 L58,42.2 C58,39.4 54.5,37.5 50.2,37.5 L50.2,37.5 L50.2,37.5 Z M50.2,14 C45.6,14 42,17.3 42,21.1 C42,24.9 45.6,28.3 50.2,28.3 C54.7,28.3 58.3,24.9 58.3,21.1 C58.3,17.3 54.7,14 50.2,14 L50.2,14 L50.2,14 Z"/></g></svg>


--------------------------------------------------------------------------------
/source/static/images/t7-box--positive--icon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100"><g fill="none" fill-rule="evenodd"><circle cx="50" cy="50" r="50" fill="#693"/><path fill="#FFF" d="M50.2,37.5 C45.7,37.5 42.5,39.4 42.5,42.2 L42.5,80.3 C42.5,82.7 45.7,85.1 50.2,85.1 C54.5,85.1 58,82.7 58,80.3 L58,42.2 C58,39.4 54.5,37.5 50.2,37.5 L50.2,37.5 L50.2,37.5 Z M50.2,14 C45.6,14 42,17.3 42,21.1 C42,24.9 45.6,28.3 50.2,28.3 C54.7,28.3 58.3,24.9 58.3,21.1 C58.3,17.3 54.7,14 50.2,14 L50.2,14 L50.2,14 Z"/></g></svg>


--------------------------------------------------------------------------------
/source/static/images/t7-box--warn--icon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100"><g fill="none" fill-rule="evenodd"><circle cx="50" cy="50" r="50" fill="#C93"/><path fill="#FFF" d="M50.2,37.5 C45.7,37.5 42.5,39.4 42.5,42.2 L42.5,80.3 C42.5,82.7 45.7,85.1 50.2,85.1 C54.5,85.1 58,82.7 58,80.3 L58,42.2 C58,39.4 54.5,37.5 50.2,37.5 L50.2,37.5 L50.2,37.5 Z M50.2,14 C45.6,14 42,17.3 42,21.1 C42,24.9 45.6,28.3 50.2,28.3 C54.7,28.3 58.3,24.9 58.3,21.1 C58.3,17.3 54.7,14 50.2,14 L50.2,14 L50.2,14 Z"/></g></svg>


--------------------------------------------------------------------------------
/source/static/images/t7-box__close.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100"><polygon fill="#FFF" fill-rule="evenodd" points="50 65 85 100 100 100 100 85 65 50 100 15 100 0 85 0 50 35 15 0 0 0 0 15 35 50 0 85 0 100 15 100"/></svg>


--------------------------------------------------------------------------------
/source/static/images/t7-data-table__th--sortable.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="64px" height="100px" viewBox="0 0 64 100"><g fill="#999" fill-rule="evenodd"><polygon points="33 64 64 100 0 100" transform="matrix(1 0 0 -1 0 164)"/><polygon points="33 0 64 36 0 36"/></g></svg>


--------------------------------------------------------------------------------
/source/static/images/t7-data-table__th--sortable[asc].svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="64px" height="100px" viewBox="0 0 64 100"><g fill="none" fill-rule="evenodd"><polygon fill="#000" points="33 64 64 100 0 100" transform="matrix(1 0 0 -1 0 164)"/><polygon fill="#999" points="33 0 64 36 0 36"/></g></svg>


--------------------------------------------------------------------------------
/source/static/images/t7-data-table__th--sortable[desc].svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="64px" height="100px" viewBox="0 0 64 100"><g fill="none" fill-rule="evenodd"><polygon fill="#999" points="33 64 64 100 0 100" transform="matrix(1 0 0 -1 0 164)"/><polygon fill="#000" points="33 0 64 36 0 36"/></g></svg>


--------------------------------------------------------------------------------
/source/static/images/t7-dropdown__trigger.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="30px" height="15px" viewBox="0 0 30 15"><polygon fill="#333" fill-rule="evenodd" points="0 0 30 0 15 15.036"/></svg>


--------------------------------------------------------------------------------
/source/static/images/t7-form__checkbox__fake.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="75px" viewBox="0 0 100 75"><polygon fill="#333" fill-rule="evenodd" points="35.714 74.393 0 38.679 10.107 28.571 35.714 54.179 89.893 0 100 10.107"/></svg>


--------------------------------------------------------------------------------
/source/static/images/t7-form__radio__fake.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="#666" fill-rule="evenodd"/></svg>


--------------------------------------------------------------------------------
/source/static/images/t7-form__select.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="50px" height="80px" viewBox="0 0 50 80"><g fill="none" fill-rule="evenodd"><rect width="50" height="80" fill="#FFF" fill-opacity="0"/><polygon fill="#333" points="0 34 30 34 15 49.036"/></g></svg>


--------------------------------------------------------------------------------
/source/utils/_bind.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |   This method auto-binds `this` context,
 3 |   so that you don't always have to type:
 4 | 
 5 |   ```
 6 |   const foo = this.foo.bind(this)
 7 |   ```
 8 | 
 9 |   You would call this function from within a
10 |   React class `constructor` method, like so:
11 | 
12 |   ```
13 |   import React from 'react'
14 |   import utils from './utils'
15 | 
16 |   class Foo extends React.Component {
17 |     constructor (props) {
18 |       super(props)
19 |       utils.bind(this)
20 |     }
21 |   }
22 |   ```
23 | */
24 | 
25 | function bind (_this) {
26 |   // Build an array of methods.
27 |   const methods = (
28 |     Object.getOwnPropertyNames(
29 |       Object.getPrototypeOf(_this)
30 |     )
31 |   )
32 | 
33 |   // Bind `setState`.
34 |   _this.setState =
35 |   _this.setState.bind(_this)
36 | 
37 |   // Loop through method names.
38 |   methods.forEach(function (method) {
39 |     // Ignore these.
40 |     const ignore = {
41 |       componentDidMount: true,
42 |       componentDidUpdate: true,
43 |       componentWillMount: true,
44 |       componentWillReceiveProps: true,
45 |       componentWillUnmount: true,
46 |       componentWillUpdate: true,
47 |       constructor: true,
48 |       render: true,
49 |       shouldComponentUpdate: true
50 |     }
51 | 
52 |     // Bundle up conditions.
53 |     const isValid = (
54 |       // Skip auto-called methods.
55 |       !ignore[method] &&
56 | 
57 |       // Ensure it's a function.
58 |       typeof _this[method] === 'function' &&
59 | 
60 |       /*
61 |         Some methods injected by Webpack are
62 |         prefixed by double underscores "__".
63 |       */
64 |       !method.match(/^__/)
65 |     )
66 | 
67 |     // Set `this` context.
68 |     if (isValid) {
69 |       _this[method] =
70 |       _this[method].bind(_this)
71 |     }
72 |   })
73 | }
74 | 
75 | // Export.
76 | export default bind
77 | 


--------------------------------------------------------------------------------
/source/utils/_convert_content_editable.js:
--------------------------------------------------------------------------------
 1 | // Utility methods.
 2 | import utils from './index'
 3 | 
 4 | function convertContentEditable (e) {
 5 |   const el = e.target
 6 | 
 7 |   // Check <tag> name.
 8 |   const tagName = el.tagName.toLowerCase()
 9 |   const isSpan = tagName === 'span'
10 |   const isDiv = tagName === 'div'
11 | 
12 |   // Get placeholder.
13 |   let placeholder = el.getAttribute('placeholder')
14 |   placeholder = placeholder.trim()
15 |   placeholder = placeholder.replace(/\s+/g, ' ')
16 | 
17 |   // Used in conditional.
18 |   let value
19 | 
20 |   if (isSpan) {
21 |     value = el.innerText
22 |     value = value.trim()
23 |     value = value.replace(/\s+/g, ' ')
24 |   } else if (isDiv) {
25 |     value = el.innerHTML
26 |     value = value.trim()
27 |     value = utils.convertToText(value)
28 |   }
29 | 
30 |   // Check event and key.
31 |   const isBlur = e.type === 'blur'
32 |   const isEnter = e.keyCode === 13
33 | 
34 |   // Flag for replacement.
35 |   const doReplaceInline = isSpan && (isBlur || isEnter)
36 |   const doReplaceBlock = isDiv && isBlur
37 | 
38 |   // Use placeholder, if no value.
39 |   value = value || placeholder
40 | 
41 |   // Replace, if need be.
42 |   if (doReplaceInline) {
43 |     el.innerHTML = value
44 |   } else if (doReplaceBlock) {
45 |     value = utils.convertToMarkup(value)
46 | 
47 |     el.innerHTML = value
48 |   }
49 | }
50 | 
51 | // Expose function.
52 | export default convertContentEditable
53 | 


--------------------------------------------------------------------------------
/source/utils/_convert_content_focus.js:
--------------------------------------------------------------------------------
 1 | // Utility methods.
 2 | import utils from '../utils'
 3 | 
 4 | // Convert text, when "content editable" is focused.
 5 | function convertContentFocus (e) {
 6 |   const el = e.target
 7 | 
 8 |   // Get placeholder.
 9 |   let placeholder = el.getAttribute('placeholder')
10 |   placeholder = utils.trim(placeholder)
11 |   placeholder = placeholder.replace(/\s+/g, ' ')
12 | 
13 |   // Get value.
14 |   let value = el.innerHTML
15 |   value = utils.trim(value)
16 |   value = value.replace(/\s+/g, ' ')
17 | 
18 |   // Is the value the placeholder?
19 |   if (value === placeholder) {
20 |     el.innerHTML = ''
21 |   }
22 | }
23 | 
24 | // Expose function.
25 | export default convertContentFocus
26 | 


--------------------------------------------------------------------------------
/source/utils/_convert_on_paste.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |   You would call this when a user pastes from
 3 |   the clipboard into a `contenteditable` area.
 4 | */
 5 | 
 6 | function convertOnPaste (e) {
 7 |   // Prevent paste.
 8 |   e.preventDefault()
 9 | 
10 |   /*
11 |     Used if the browser doesn't allow us
12 |     to intercept the `on paste` event.
13 |   */
14 |   function fallback (e) {
15 |     window.setTimeout(function () {
16 |       const el = e.target
17 | 
18 |       let value
19 |       value = el.innerText
20 |       value = value.trim()
21 |       value = value.replace(/\s+/g, ' ')
22 | 
23 |       el.innerText = value
24 |     }, 16)
25 |   }
26 | 
27 |   // Used in conditional.
28 |   let value
29 | 
30 |   // For IE.
31 |   if (window.clipboardData) {
32 |     value = window.clipboardData.getData('text')
33 |   } else {
34 |     // Other browsers.
35 |     value = e.clipboardData.getData('text/plain')
36 |   }
37 | 
38 |   // No value?
39 |   if (!value) {
40 |     // Use fallback.
41 |     fallback(e)
42 | 
43 |     // Exit.
44 |     return
45 |   }
46 | 
47 |   // Insert into temp `<textarea>`, read back out.
48 |   const textarea = document.createElement('textarea')
49 |   textarea.innerHTML = value
50 |   value = textarea.innerText
51 | 
52 |   // Literal spaces.
53 |   value = value.trim()
54 |   value = value.replace(/[ ]+/g, ' ')
55 | 
56 |   // Mix of newlines, spaces.
57 |   value = value.replace(/\n+\s+\n+/g, '\n\n')
58 | 
59 |   // Double newlines.
60 |   value = value.replace(/\n\n+/g, '\n\n')
61 | 
62 |   // For IE.
63 |   if (document.selection) {
64 |     // For IE8.
65 |     if (document.documentMode === 8) {
66 |       value = value.replace(/\n/g, '<br>')
67 |     }
68 | 
69 |     document.selection.createRange().pasteHTML(value)
70 |   } else {
71 |     // Other browsers.
72 |     document.execCommand('insertText', false, value)
73 |   }
74 | }
75 | 
76 | // Expose function.
77 | export default convertOnPaste
78 | 


--------------------------------------------------------------------------------
/source/utils/_convert_to_markup.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |   You would call this when receiving a plain text
 3 |   value back from an API, and before inserting the
 4 |   text into the `contenteditable` area on a page.
 5 | */
 6 | 
 7 | function convertToMarkup (value) {
 8 |   value = value.trim()
 9 |   value = value.replace(/>/g, '&gt;')
10 |   value = value.replace(/</g, '&lt;')
11 |   value = value.replace(/\n+\s+\n+/g, '\n\n')
12 |   value = value.replace(/\n\n+/g, '\n\n')
13 |   value = value.replace(/\n/g, '<br>')
14 |   value = value.replace(/\s+/g, ' ')
15 | 
16 |   return value
17 | }
18 | 
19 | // Expose function.
20 | export default convertToMarkup
21 | 


--------------------------------------------------------------------------------
/source/utils/_convert_to_text.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |   You would call this after getting an element's
 3 |   `.innerHTML` value, while the user is typing.
 4 | */
 5 | 
 6 | function convertToText (value) {
 7 |   // Convert `&amp` to `&`.
 8 |   value = value.replace(/&amp/gi, '&')
 9 | 
10 |   // Replace spaces.
11 |   value = value.replace(/&nbsp;/gi, ' ')
12 |   value = value.replace(/\s+/g, ' ')
13 | 
14 |   // Remove "<b>".
15 |   value = value.replace(/<b>/gi, '')
16 |   value = value.replace(/<\/b>/gi, '')
17 | 
18 |   // Remove "<strong>".
19 |   value = value.replace(/<strong>/gi, '')
20 |   value = value.replace(/<\/strong>/gi, '')
21 | 
22 |   // Remove "<i>".
23 |   value = value.replace(/<i>/gi, '')
24 |   value = value.replace(/<\/i>/gi, '')
25 | 
26 |   // Remove "<em>".
27 |   value = value.replace(/<em>/gi, '')
28 |   value = value.replace(/<\/em>/gi, '')
29 | 
30 |   // Remove "<u>".
31 |   value = value.replace(/<u>/gi, '')
32 |   value = value.replace(/<\/u>/gi, '')
33 | 
34 |   // Tighten up "<" and ">".
35 |   value = value.replace(/>\s+/g, '>')
36 |   value = value.replace(/\s+</g, '<')
37 | 
38 |   // Replace "<br>".
39 |   value = value.replace(/<br>/gi, '\n')
40 | 
41 |   // Replace "<div>" (from Chrome).
42 |   value = value.replace(/<div>/gi, '\n')
43 |   value = value.replace(/<\/div>/gi, '')
44 | 
45 |   // Replace "<p>" (from IE).
46 |   value = value.replace(/<p>/gi, '\n')
47 |   value = value.replace(/<\/p>/gi, '')
48 | 
49 |   // No more than 2x newline, per "paragraph".
50 |   value = value.replace(/\n\n+/g, '\n\n')
51 | 
52 |   // Whitespace before/after.
53 |   value = value.trim()
54 | 
55 |   return value
56 | }
57 | 
58 | // Expose function.
59 | export default convertToText
60 | 


--------------------------------------------------------------------------------
/source/utils/_exists.js:
--------------------------------------------------------------------------------
1 | // Helper for checking existence.
2 | function exists (x) {
3 |   return typeof x !== 'undefined' && x !== null
4 | }
5 | 
6 | // Expose function.
7 | export default exists
8 | 


--------------------------------------------------------------------------------
/source/utils/_get_data_by_name.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |   Loops through an array, and returns
 3 |   child object with matching `*.name`.
 4 | */
 5 | function getDataByName (data, name) {
 6 |   // Drill through data.
 7 |   let o = data.filter(function (item) {
 8 |     return item.name === name
 9 |   })
10 | 
11 |   // Single item?
12 |   if (o.length === 1) {
13 |     o = o[0]
14 | 
15 |   // No items?
16 |   } else if (!o.length) {
17 |     o = undefined
18 |   }
19 | 
20 |   // Expose result.
21 |   return o || {}
22 | }
23 | 
24 | // Export.
25 | export default getDataByName
26 | 


--------------------------------------------------------------------------------
/source/utils/_log.js:
--------------------------------------------------------------------------------
 1 | // Helper for console.log
 2 | function log () {
 3 |   const localhost = window.location.hostname === 'localhost'
 4 |   const isValid = localhost && window.console && window.console.log
 5 | 
 6 |   if (isValid) {
 7 |     Array.prototype.forEach.call(arguments, function (x) {
 8 |       window.console.log(x)
 9 |     })
10 |   }
11 | }
12 | 
13 | // Expose function.
14 | export default log
15 | 


--------------------------------------------------------------------------------
/source/utils/_markdown.js:
--------------------------------------------------------------------------------
 1 | // Dependencies.
 2 | import marked from 'marked'
 3 | 
 4 | // Convert Markdown to HTML.
 5 | function markdown (str) {
 6 |   return {
 7 |     __html: marked(str, {
 8 |       sanitize: true
 9 |     })
10 |   }
11 | }
12 | 
13 | // Expose function.
14 | export default markdown
15 | 


--------------------------------------------------------------------------------
/source/utils/_navigate.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |   // Utilty method for navigating React routes.
 3 | 
 4 |   // Used like so...
 5 | 
 6 |   utils.navigate([
 7 |     'users',
 8 |     userId,
 9 |     'items',
10 |     itemId
11 |   ])
12 | 
13 |   // Which goes to...
14 | 
15 |   '#/users/123/items/456'
16 | */
17 | 
18 | // Dependencies.
19 | import { isArray } from 'lodash'
20 | 
21 | // Utility methods.
22 | import utils from '../utils'
23 | 
24 | // Helper for page navigation.
25 | function navigate (x) {
26 |   if (!utils.exists(x)) {
27 |     return
28 |   }
29 | 
30 |   if (arguments.length > 1) {
31 |     // Convert to array.
32 |     x = Array.prototype.slice.call(arguments)
33 |   }
34 | 
35 |   if (isArray(x)) {
36 |     // Convert to string.
37 |     x = x.join('/')
38 |   }
39 | 
40 |   x = '' + x
41 |   x = x.replace(/#/g, '')
42 |   x = '#/' + x
43 |   x = x.replace(/\/+/g, '/')
44 | 
45 |   window.location.hash = x
46 | }
47 | 
48 | // Expose function.
49 | export default navigate
50 | 


--------------------------------------------------------------------------------
/source/utils/_parse_form_data.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |   Parses all inputs in a `<form>`,
 3 |   and returns a formatted object.
 4 | */
 5 | 
 6 | // Utility methods.
 7 | import utils from '../utils'
 8 | 
 9 | function parseFormData (form) {
10 |   // Get the key/values.
11 |   const str = 'input, select, textarea, [contenteditable="true"]'
12 |   const list = form.querySelectorAll(str)
13 | 
14 |   // Build in a loop.
15 |   const data = []
16 | 
17 |   // Loop through.
18 |   Array.prototype.map.call(list, function (el) {
19 |     // Check if it's disabled.
20 |     const isDisabled = el.disabled || el.hasAttribute('disabled')
21 | 
22 |     // Exit if disabled.
23 |     if (isDisabled) {
24 |       return
25 |     }
26 | 
27 |     const name = el.getAttribute('name')
28 |     const type = el.type
29 |     const isTextdiv = el.getAttribute('contenteditable')
30 | 
31 |     // Set in conditional.
32 |     let value
33 | 
34 |     // If it's a <Textdiv>, treat differently.
35 |     if (isTextdiv) {
36 |       value = utils.convertToText(el.innerHTML)
37 | 
38 |       let placeholder = el.getAttribute('placeholder')
39 | 
40 |       if (value === placeholder) {
41 |         value = ''
42 |       }
43 | 
44 |     // Else, typical form element.
45 |     } else {
46 |       value = el.value
47 |     }
48 | 
49 |     const item = {
50 |       name: name,
51 |       value: value
52 |     }
53 | 
54 |     // Pass `checked`?
55 |     if (type === 'radio' || type === 'checkbox') {
56 |       item.checked = el.checked
57 |     }
58 | 
59 |     // Add to data.
60 |     data.push(item)
61 |   })
62 | 
63 |   // Send back object.
64 |   return data
65 | }
66 | 
67 | // Expose function.
68 | export default parseFormData
69 | 


--------------------------------------------------------------------------------
/source/utils/_path.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |   // Utilty method for generating React routes.
 3 | 
 4 |   // Used like so...
 5 | 
 6 |   const url = utils.path([
 7 |     'users',
 8 |     userId,
 9 |     'items',
10 |     itemId
11 |   ])
12 | 
13 |   // Which yields...
14 | 
15 |   '#/users/123/items/456'
16 | */
17 | 
18 | // Dependencies.
19 | import { isArray } from 'lodash'
20 | 
21 | // Utility methods.
22 | import utils from '../utils'
23 | 
24 | // Helper to generate "#" URL.
25 | function path (x) {
26 |   if (!utils.exists(x)) {
27 |     // Remove cache buster.
28 |     return window.location.hash.split('?')[0]
29 |   }
30 | 
31 |   if (arguments.length > 1) {
32 |     // Convert to array.
33 |     x = Array.prototype.slice.call(arguments)
34 |   }
35 | 
36 |   if (isArray(x)) {
37 |     // Convert to string.
38 |     x = x.join('/')
39 |   }
40 | 
41 |   x = '' + x
42 |   x = x.replace(/#/g, '')
43 |   x = '#/' + x
44 |   x = x.replace(/\/+/g, '/')
45 | 
46 |   return x
47 | }
48 | 
49 | // Expose function.
50 | export default path
51 | 


--------------------------------------------------------------------------------
/source/utils/_placeholder.js:
--------------------------------------------------------------------------------
 1 | // Faux `placeholder="…"` handler.
 2 | function placeholder (e) {
 3 |   const el = e.target
 4 | 
 5 |   // Get placeholder.
 6 |   let placeholder = el.getAttribute('placeholder')
 7 |   placeholder = placeholder.trim()
 8 |   placeholder = placeholder.replace(/\s+/g, ' ')
 9 | 
10 |   // Get value.
11 |   let value = el.innerHTML
12 |   value = value.trim()
13 |   value = value.replace(/\s+/g, ' ')
14 | 
15 |   // Is the value the placeholder?
16 |   if (value === placeholder) {
17 |     el.innerHTML = ''
18 |   }
19 | }
20 | 
21 | // Expose function.
22 | export default placeholder
23 | 


--------------------------------------------------------------------------------
/source/utils/_regex.js:
--------------------------------------------------------------------------------
 1 | // Helper for regular expressions.
 2 | function regex (x) {
 3 |   // Escape the string.
 4 |   function esc (str) {
 5 |     return str.replace(/[-*+?.^$|{}()/[\]\\]/g, '\\$&')
 6 |   }
 7 | 
 8 |   // Used later.
 9 |   let arr
10 |   let value
11 | 
12 |   // Is it an array?
13 |   const isArray = typeof x === 'object' && x.length
14 | 
15 |   // Is it an array?
16 |   if (isArray) {
17 |     arr = []
18 |     let i = x.length
19 | 
20 |     while (i--) {
21 |       arr.push(esc(x[i]))
22 |     }
23 | 
24 |     arr = arr.reverse()
25 |     arr = arr.join('|')
26 | 
27 |     value = new RegExp(arr, 'g')
28 |   } else {
29 |     // Assume individual string.
30 |     value = new RegExp(esc(x), 'g')
31 |   }
32 | 
33 |   // Expose value.
34 |   return value
35 | }
36 | 
37 | // Expose function.
38 | export default regex
39 | 


--------------------------------------------------------------------------------
/source/utils/_save.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | 
 3 |   This method allows you to save data as a `console.json`
 4 |   file, when perusing a large JSON object via console.log
 5 |   would be too time consuming and/or laborious. Enjoy! :)
 6 | 
 7 |   // Called like so…
 8 | 
 9 |   utils.save(json, 'my_file_name.json')
10 | 
11 | */
12 | function save (data, filename) {
13 |   // File blob.
14 |   const Blob = window.Blob
15 | 
16 |   // For comparison.
17 |   const f = 'function'
18 |   const o = 'object'
19 | 
20 |   /*
21 |     Check to ensure we're not overwriting
22 |     a future, native console.save method.
23 | 
24 |     Also, ensure all of the featuers are
25 |     available to actually create a file.
26 |   */
27 |   const bool = typeof Blob === f &&
28 |     typeof window.URL === f &&
29 |     typeof document.createEvent === f
30 | 
31 |   // If unsupported, exit.
32 |   if (!bool) {
33 |     return
34 |   }
35 | 
36 |   // If no data, throw an error.
37 |   if (!data) {
38 |     throw new Error('utils.save: NO DATA')
39 |   }
40 | 
41 |   // Default filename.
42 |   if (!filename) {
43 |     filename = 'console.json'
44 |   }
45 | 
46 |   // Format nicely.
47 |   if (typeof data === o) {
48 |     data = JSON.stringify(data, undefined, 2)
49 |   }
50 | 
51 |   const type = 'text/json'
52 |   const blob = new Blob([data], {type: type})
53 |   const e = document.createEvent('MouseEvents')
54 |   const a = document.createElement('a')
55 | 
56 |   e.initMouseEvent(
57 |     'click',
58 |     true,
59 |     false,
60 |     window,
61 |     0,
62 |     0,
63 |     0,
64 |     0,
65 |     0,
66 |     false,
67 |     false,
68 |     false,
69 |     false,
70 |     0,
71 |     null
72 |   )
73 | 
74 |   a.download = filename
75 |   a.href = window.URL.createObjectURL(blob)
76 |   a.dataset.downloadurl = [type, a.download, a.href].join(':')
77 |   a.dispatchEvent(e)
78 | }
79 | 
80 | // Expose function.
81 | export default save
82 | 


--------------------------------------------------------------------------------
/source/utils/_stop.js:
--------------------------------------------------------------------------------
1 | // Helper to cancel events.
2 | function stop (e) {
3 |   e.preventDefault()
4 |   e.stopPropagation()
5 | }
6 | 
7 | // Expose function.
8 | export default stop
9 | 


--------------------------------------------------------------------------------
/source/utils/_storage.js:
--------------------------------------------------------------------------------
  1 | // ================================
  2 | // Flag for `localStorage` support.
  3 | // ================================
  4 | 
  5 | const flag = (function () {
  6 |   // Assume no support.
  7 |   let bool = false
  8 | 
  9 |   // Used in the `try`.
 10 |   let key = 'TEST_KEY'
 11 |   let val = 'TEST_VAL'
 12 | 
 13 |   // Rigorously test for support.
 14 |   try {
 15 |     // Set the key/value.
 16 |     window.localStorage.setItem(key, val)
 17 | 
 18 |     // Are we able to read it?
 19 |     bool = window.localStorage.getItem(key) === val
 20 | 
 21 |     // Delete the key/value.
 22 |     window.localStorage.removeItem(key)
 23 |   } catch (e) {}
 24 | 
 25 |   // Return the boolean.
 26 |   return bool
 27 | })()
 28 | 
 29 | // =======================
 30 | // Cache: Alias to object.
 31 | // =======================
 32 | 
 33 | const cacheFallback = {
 34 |   clear: function () {
 35 |     for (let k in cache) {
 36 |       if (cache.hasOwnProperty(k) && k !== 'clear') {
 37 |         delete cache[k]
 38 |       }
 39 |     }
 40 |   }
 41 | }
 42 | 
 43 | const cache = flag ? window.localStorage : cacheFallback
 44 | 
 45 | // =======================
 46 | // Cache: Clear key/value.
 47 | // =======================
 48 | 
 49 | function clear (key) {
 50 |   cache.clear()
 51 | }
 52 | 
 53 | // ==============
 54 | // Cache: Getter.
 55 | // ==============
 56 | 
 57 | function get (key) {
 58 |   let data = cache[key]
 59 | 
 60 |   // Exit, if no data.
 61 |   if (!data) {
 62 |     return
 63 |   }
 64 | 
 65 |   try {
 66 |     // Attempt to parse.
 67 |     data = JSON.parse(data)
 68 |   } catch (e) {
 69 |     // Set to original.
 70 |     data = cache[key]
 71 |   }
 72 | 
 73 |   return data
 74 | }
 75 | 
 76 | // ==============
 77 | // Cache: Setter.
 78 | // ==============
 79 | 
 80 | function set (key, data) {
 81 |   if (
 82 |     key === 'clear' ||
 83 |     key === 'getItem' ||
 84 |     key === 'setItem'
 85 |   ) {
 86 |     throw new Error(
 87 |       'Cannot overwrite method: window.localStorage.' + key
 88 |     )
 89 |   }
 90 | 
 91 |   if (typeof data === 'object') {
 92 |     data = JSON.stringify(data)
 93 |   }
 94 | 
 95 |   cache[key] = data
 96 | }
 97 | 
 98 | // ==========================
 99 | // Cache: Remove single item.
100 | // ==========================
101 | 
102 | function remove (key) {
103 |   delete cache[key]
104 | }
105 | 
106 | // ==============
107 | // Export object.
108 | // ==============
109 | 
110 | const storage = {
111 |   clear: clear,
112 |   get: get,
113 |   remove: remove,
114 |   set: set
115 | }
116 | 
117 | // Expose methods.
118 | export default storage
119 | 


--------------------------------------------------------------------------------
/source/utils/_title.js:
--------------------------------------------------------------------------------
 1 | // Set the page `<title>`.
 2 | function title (props) {
 3 |   // Fallback site title.
 4 |   const suffix =
 5 |     document
 6 |     .querySelector('title')
 7 |     .getAttribute('data-suffix') ||
 8 |     ''
 9 | 
10 |   // Used in conditional.
11 |   let title = props.route.title
12 | 
13 |   // Is there a title?
14 |   if (title) {
15 |     title = title + ' | ' + suffix
16 | 
17 |   // If no title exists.
18 |   } else {
19 |     title = suffix
20 |   }
21 | 
22 |   // Set title.
23 |   document.title = title
24 | }
25 | 
26 | // Expose function.
27 | export default title
28 | 


--------------------------------------------------------------------------------
/source/utils/_today.js:
--------------------------------------------------------------------------------
 1 | // Returns 1 day, in milliseconds.
 2 | function today (offset) {
 3 |   const isValid = !isNaN(offset)
 4 | 
 5 |   let day = new Date().getTime()
 6 | 
 7 |   if (isValid) {
 8 |     day = day + (offset * 86400000)
 9 |   }
10 | 
11 |   return day
12 | }
13 | 
14 | // Expose function.
15 | export default today
16 | 


--------------------------------------------------------------------------------
/source/utils/_trim.js:
--------------------------------------------------------------------------------
 1 | // Utility methods.
 2 | import utils from '../utils'
 3 | 
 4 | // Clean up strings.
 5 | function trim (value) {
 6 |   if (!utils.exists(value)) {
 7 |     return
 8 |   }
 9 | 
10 |   value = '' + value
11 |   value = value.trim()
12 |   value = value.replace(/\s+/g, ' ')
13 | 
14 |   return value
15 | }
16 | 
17 | // Expose function.
18 | export default trim
19 | 


--------------------------------------------------------------------------------
/source/utils/_unique.js:
--------------------------------------------------------------------------------
 1 | // Helper for returning a unique string.
 2 | function unique () {
 3 |   let x = new Date().getTime()
 4 |   x = x + '_'
 5 |   x = x + Math.random()
 6 |   x = x.replace('0.', '')
 7 | 
 8 |   return x
 9 | }
10 | 
11 | // Expose function.
12 | export default unique
13 | 


--------------------------------------------------------------------------------
/source/utils/index.js:
--------------------------------------------------------------------------------
 1 | // Import individual files.
 2 | import ajax from './_ajax'
 3 | import bind from './_bind'
 4 | import convertContentEditable from './_convert_content_editable'
 5 | import convertContentFocus from './_convert_content_focus'
 6 | import convertOnPaste from './_convert_on_paste'
 7 | import convertToMarkup from './_convert_to_markup'
 8 | import convertToText from './_convert_to_text'
 9 | import exists from './_exists'
10 | import getDataByName from './_get_data_by_name'
11 | import log from './_log'
12 | import markdown from './_markdown'
13 | import navigate from './_navigate'
14 | import parseFormData from './_parse_form_data'
15 | import path from './_path'
16 | import placeholder from './_placeholder'
17 | import regex from './_regex'
18 | import save from './_save'
19 | import stop from './_stop'
20 | import storage from './_storage'
21 | import title from './_title'
22 | import today from './_today'
23 | import trim from './_trim'
24 | import unique from './_unique'
25 | 
26 | // Bundle up methods.
27 | const utils = {
28 |   ajax,
29 |   bind,
30 |   convertContentEditable,
31 |   convertContentFocus,
32 |   convertOnPaste,
33 |   convertToMarkup,
34 |   convertToText,
35 |   exists,
36 |   getDataByName,
37 |   log,
38 |   markdown,
39 |   navigate,
40 |   parseFormData,
41 |   path,
42 |   placeholder,
43 |   regex,
44 |   save,
45 |   stop,
46 |   storage,
47 |   title,
48 |   today,
49 |   trim,
50 |   unique
51 | }
52 | 
53 | // Expose object.
54 | export default utils
55 | 


--------------------------------------------------------------------------------