elements
9 | *
10 | * Required props:
11 | * - label: string. Sets the text for the input's label
12 | * - children: node. Series of );
85 | }
86 |
87 | return (
88 |
89 |
90 |
91 | {errorMessage}
92 |
93 |
101 |
102 | );
103 | }
104 | }
105 |
106 | Dropdown.propTypes = {
107 | id: PropTypes.string,
108 | label: PropTypes.string.isRequired,
109 | children: PropTypes.node.isRequired,
110 | required: PropTypes.bool,
111 | hasError: PropTypes.bool,
112 | errorMessage: PropTypes.string,
113 | value: PropTypes.string
114 | };
115 |
116 | Dropdown.defaultProps = {
117 | required: false,
118 | hasError: false
119 | };
120 |
--------------------------------------------------------------------------------
/styleguide/containers/ButtonsContainer.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Label from '../../lib/components/Label';
3 | import { DocsPage, DocsSection, DocsExample, DocsPreview } from './Docs.jsx';
4 | import Highlight from 'react-highlight';
5 | import { Table, TableRow, TableHeaderCell, TableCell } from '../../lib/components/Tables';
6 | import PrimaryButton from "../../lib/components/PrimaryButton";
7 |
8 | /**
9 | * Buttons content
10 | * @returns {node} node
11 | */
12 | export default function ButtonsContainer () {
13 | return (
14 |
15 |
16 | {/* Importing */}
17 |
18 |
19 | {`import PrimaryButton from "../lib/components/PrimaryButton";`}
20 |
21 |
22 |
23 | {/* Props */}
24 |
25 |
26 |
27 | text
28 | string
29 |
30 | ...
31 |
32 |
33 | disabled
34 | bool
35 | false
36 | If true, makes button disabled
37 |
38 |
39 | onClick
40 | func
41 |
42 | ...
43 |
44 |
45 | size
46 | oneOf ['', 'PrimaryButton.SIZE_BIG']
47 | ''
48 | ...
49 |
50 |
51 | status
52 | oneOf [''', PrimaryButton.STATUS_ACTIVE, PrimaryButton.STATUS_HOVER']
53 | ''
54 | ...
55 |
56 |
57 |
58 |
59 | {/* Usage */}
60 |
61 |
62 |
63 | Primary Buttons
64 |
69 | Disabled Button
70 |
73 | Big Button
74 |
77 |
78 |
79 | {`Primary Buttons
80 |
85 | Disabled Button
86 |
89 | Big Button
90 | `}
93 |
94 |
95 |
96 |
97 | );
98 | }
99 |
--------------------------------------------------------------------------------
/lib/components/OfficialSiteBanner.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | /**
4 | * Renders the standard official site banner indicating that this site is an
5 | * official government site.
6 | *
7 | * This component is usually rendered in the common {@link Header}. You should
8 | * only need to add this manually if you are implementing your own header.
9 | * In that case, this should be the element that is at the very top of the
10 | * window.
11 | *
12 | * For more information, please consult the
13 | * [U.S. Web Design Standards](https://standards.usa.gov).
14 | */
15 | export default class OfficialSiteBanner extends React.Component
16 | {
17 | /**
18 | * Constructor.
19 | *
20 | * @param {Object} props The props that will be applied to this component.
21 | */
22 | constructor(props)
23 | {
24 | super(props);
25 | this.state = {
26 | contentVisible: false
27 | };
28 | }
29 |
30 | /**
31 | * Toggles the visiblity of the content section.
32 | */
33 | toggleDetails()
34 | {
35 | this.setState({ contentVisible: !this.state.contentVisible });
36 | }
37 |
38 | /**
39 | * Renders the content of the accordion that expands when the user clicks
40 | * on the "Here's how you know" link.
41 | *
42 | * @returns {Node|String} The rendered DOM node or an empty string.
43 | */
44 | renderContent()
45 | {
46 | if (!this.state.contentVisible) {
47 | return "";
48 | }
49 | return (
50 |
51 |
52 |
53 |
54 |
55 | The .gov means it's official.
56 |
57 | Federal government websites always use a .gov or .mil domain.
58 | Before sharing sensitive information online, make sure you’re
59 | on a .gov or .mil site by inspecting your browser’s address
60 | (or “location”) bar.
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 | This site is also protected by an SSL (Secure Sockets Layer)
69 | certificate that’s been signed by the U.S. government.
70 | The https:// means all transmitted data is
71 | encrypted — in other words, any information or browsing
72 | history that you provide is transmitted securely.
73 |
74 |
75 |
76 |
89 |
90 |
101 | {this.renderContent()}
102 |
103 |
elements
40 | */
41 | _renderHeaders() {
42 | // Loop over the props.columns array
43 | return this.props.columns.map((column, index) => {
44 | // if each item in the array is a string, then use that inside the |
45 | if (typeof column === 'string') {
46 | return {column};
47 | // else expect an object.
48 | // Use object.displayName for the | text or colId is displayName is not provided
49 | } else {
50 | let {colId, displayName} = column;
51 | return {displayName || colId};
52 | }
53 | });
54 | }
55 |
56 | /**
57 | * Renders the table rows if data is passed in
58 | * @param {array} data from props.data
59 | * @returns {node} rendered DOM node ( | | ... |
)
60 | */
61 | _renderRows(data) {
62 | // Loop over the data array
63 | return data.map((datum, rowKey) => {
64 | // Loop over columns array to get the colIds
65 | const cells = this.props.columns.map(({colId}, key) => {
66 | // if it's the first cell in the row, make it a
67 | if (key === 0) {
68 | return (
69 |
70 | {datum[colId]}
71 |
72 | );
73 | // else make it a |
74 | } else {
75 | return (
76 |
77 | {datum[colId]}
78 |
79 | );
80 | }
81 | });
82 | // return a row with all the cells for each item in columns array
83 | return {cells};
84 | });
85 | }
86 |
87 | /**
88 | * @returns {node} DOM node (table)
89 | */
90 | render() {
91 | return (
92 |
93 | {/* If a caption was provided, render it */}
94 | {this.props.caption
95 | ? {this.props.caption}
96 | : null}
97 |
98 |
99 | {this._renderHeaders()}
100 |
101 |
102 |
103 | {/* If data was passed, use it to render rows. Else use children */}
104 | {this.props.data
105 | ? this._renderRows(this.props.data)
106 | : this.props.children}
107 |
108 |
109 | );
110 | }
111 | }
112 |
113 | /**
114 | * A table row element
115 | *
116 | * @returns {node} the rendered DOM node
117 | * @param {object} props The children
118 | */
119 | export function TableRow (props) {
120 | let {children, ...otherProps} = props;
121 | return (
122 | |
123 | {children}
124 |
125 | );
126 | }
127 |
128 | TableRow.propTypes = {
129 | children: PropTypes.node.isRequired
130 | };
131 |
132 |
133 | /**
134 | * A table header cell element
135 | *
136 | * @returns {node} the rendered DOM node
137 | * @param {object} children The children
138 | */
139 | export function TableHeaderCell ({children, ...otherProps}) {
140 | return (
141 |
142 | {children}
143 | |
144 | );
145 | }
146 |
147 | TableHeaderCell.propTypes = {
148 | scope: PropTypes.oneOf([
149 | 'col',
150 | 'row'
151 | ]).isRequired,
152 | children: PropTypes.node.isRequired
153 | };
154 |
155 | TableHeaderCell.defaultProps = {
156 | scope: 'row'
157 | };
158 |
159 |
160 | /**
161 | * A table cell element
162 | *
163 | * @returns {node} the rendered DOM node
164 | * @param {object} props The props
165 | */
166 | export function TableCell (props) {
167 | let {children, ...otherProps} = props;
168 | return (
169 |
170 | {children}
171 | |
172 | );
173 | }
174 |
175 | TableCell.propTypes = {
176 | children: PropTypes.node.isRequired
177 | };
178 |
--------------------------------------------------------------------------------
/lib/components/TextArea.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import InputLabel from './InputLabel';
3 | import Utilities from '../helpers/utilities';
4 |
5 | /**
6 | * Class representing a label and a textarea element
7 | *
8 | * Required props:
9 | * - label: Sets the text for the input's label
10 | *
11 | * Optional props:
12 | * - id: sets the id attribute for the input and the