Skip to content

Commit 850df65

Browse files
visualfanaticvisualfanatic
committed
Refactor rest of the code
1 parent 0ba21f5 commit 850df65

21 files changed

+122
-97
lines changed

‎src/components/Calendar/Calendar.react.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@ export default class Calendar extends React.Component {
4949
renderMonth() {
5050
return (
5151
<div className={styles.month}>
52-
<a href='javascript:;' role='button' onClick={this.handlePrev.bind(this)} />
53-
<a href='javascript:;' role='button' onClick={this.handleNext.bind(this)} />
52+
<button type='button' onClick={this.handlePrev.bind(this)} />
53+
<button type='button' onClick={this.handleNext.bind(this)} />
5454
<div>{getMonth(this.state.currentMonth.getMonth()) + ' ' + this.state.currentMonth.getFullYear()}</div>
5555
</div>
5656
);
@@ -86,7 +86,7 @@ export default class Calendar extends React.Component {
8686
new Date(Date.UTC(this.state.currentMonth.getFullYear(), this.state.currentMonth.getMonth(), i))
8787
);
8888
labels.push(
89-
<a href='javascript:;' role='button' key={'day' + i} className={className} onClick={onChange}>{i}</a>
89+
<button type='button' key={'day' + i} className={className} onClick={onChange}>{i}</button>
9090
);
9191
}
9292
let classes = [styles.days];

‎src/components/Calendar/Calendar.scss

+6-6
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,13 @@
1717
.month {
1818
margin-bottom: 10px;
1919

20-
a {
20+
button {
21+
@include buttonReset($border: 1px solid $blue);
2122
position: relative;
2223
display: inline-block;
2324
width: 14px;
2425
height: 14px;
2526
border-radius: 100%;
26-
border: 1px solid $blue;
2727
opacity: 0.5;
2828
margin: 0 6px;
2929

@@ -94,8 +94,8 @@
9494
}
9595

9696
.days {
97-
span, a {
98-
@include DosisFont;
97+
span, button {
98+
@include buttonReset;
9999
display: inline-block;
100100
vertical-align: bottom;
101101
width: 26px;
@@ -122,13 +122,13 @@
122122
background: $darkBlue;
123123
}
124124

125-
.selected ~ a {
125+
.selected ~ button {
126126
background: white;
127127
}
128128
}
129129

130130
.shadeAfter {
131-
.selected ~ a {
131+
.selected ~ button {
132132
background: #efeff1;
133133
}
134134
}

‎src/components/CascadingView/CascadingView.react.js

+4-5
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,11 @@ export default class CascadingView extends React.Component {
2020

2121
render() {
2222
let { content, className, children, style } = this.props;
23-
let expander = <a
24-
href='javascript:;'
25-
role='button'
26-
className={styles.right}>
23+
let expander = <button
24+
type='button'
25+
className={[styles.arrow, styles.right].join(' ')}>
2726
<div className={[center, this.state.expanded ? styles.expanded : styles.collapsed].join(' ') } />
28-
</a>;
27+
</button>;
2928
let childrenContainer = this.state.expanded ? (<div className={styles.childrenContainer}>
3029
<div className={styles.children}>{children}</div>
3130
</div>) : null;

‎src/components/CascadingView/CascadingView.scss

+4
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ $arrowColor: #343445;
2727
padding: 0;
2828
}
2929

30+
.arrow {
31+
@include buttonReset;
32+
}
33+
3034
.expanded {
3135
@include arrow('down', 12px, 10px, $arrowColor);
3236
content: '';

‎src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js

+3-4
Original file line numberDiff line numberDiff line change
@@ -74,13 +74,12 @@ export default class DataBrowserHeaderBar extends React.Component {
7474
elements.push(
7575
readonly || preventSchemaEdits ? null : (
7676
<div key='add' className={styles.addColumn} style={finalStyle}>
77-
<a
78-
href='javascript:;'
79-
role='button'
77+
<button
78+
type='button'
8079
className={styles.addColumnButton}
8180
onClick={onAddColumn}>
8281
Add a new column
83-
</a>
82+
</button>
8483
</div>
8584
)
8685
);

‎src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss

+1-2
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,8 @@
3333
}
3434

3535
.addColumnButton {
36-
@include DosisFont;
36+
@include buttonReset($bg: #343445);
3737
display: inline-block;
38-
background: #343445;
3938
height: 20px;
4039
width: 130px;
4140
text-align: center;

‎src/components/Dropdown/Dropdown.react.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export default class Dropdown extends React.Component {
6868
<SliderWrap direction={Directions.DOWN} expanded={true}>
6969
<div style={{ width }} className={styles.menu}>
7070
{React.Children.map(this.props.children, c => (
71-
<a href='javascript:;' onClick={this.select.bind(this, c.props.value)}>{c}</a>
71+
<button type='button' onClick={this.select.bind(this, c.props.value)}>{c}</button>
7272
))}
7373
</div>
7474
</SliderWrap>

‎src/components/Dropdown/Dropdown.scss

+6
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,12 @@
2828
background: white;
2929
overflow: auto;
3030

31+
button {
32+
@include buttonReset;
33+
display: block;
34+
width: 100%;
35+
}
36+
3137
.option {
3238
color: $blue;
3339
border-bottom: 1px solid $borderGrey;

‎src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js

+58-49
Original file line numberDiff line numberDiff line change
@@ -278,13 +278,14 @@ export default class ExplorerQueryComposer extends React.Component {
278278
let deleteButton = null;
279279
if (!this.props.isTimeSeries || index !== 0 ) {
280280
deleteButton = (
281-
<a
282-
href='javascript:;'
283-
role='button'
284-
className={styles.del}
285-
onClick={this.removeAdditionalQuery.bind(this, 'aggregates', index)}>
286-
&times;
287-
</a>
281+
<div className={styles.delWrapper}>
282+
<button
283+
type='button'
284+
className={styles.del}
285+
onClick={this.removeAdditionalQuery.bind(this, 'aggregates', index)}>
286+
&times;
287+
</button>
288+
</div>
288289
);
289290
}
290291

@@ -340,13 +341,14 @@ export default class ExplorerQueryComposer extends React.Component {
340341
let specialGroup = this.props.isTimeSeries && index === 0;
341342
if (!specialGroup) {
342343
deleteButton = (
343-
<a
344-
href='javascript:;'
345-
role='button'
346-
className={styles.del}
347-
onClick={this.removeAdditionalQuery.bind(this, 'groups', index)}>
348-
&times;
349-
</a>
344+
<div className={styles.delWrapper}>
345+
<button
346+
type='button'
347+
className={styles.del}
348+
onClick={this.removeAdditionalQuery.bind(this, 'groups', index)}>
349+
&times;
350+
</button>
351+
</div>
350352
);
351353
}
352354

@@ -519,14 +521,15 @@ export default class ExplorerQueryComposer extends React.Component {
519521

520522
{constraintView}
521523

522-
<a
523-
href='javascript:;'
524-
role='button'
525-
className={styles.del}
526-
onClick={this.removeAdditionalQuery.bind(this, 'filters', index)}>
527-
&times;
528-
</a>
524+
<div className={styles.delWrapper}>
525+
<button
526+
type='button'
527+
className={styles.del}
528+
onClick={this.removeAdditionalQuery.bind(this, 'filters', index)}>
529+
&times;
530+
</button>
529531
</div>
532+
</div>
530533
);
531534
}
532535

@@ -563,13 +566,14 @@ export default class ExplorerQueryComposer extends React.Component {
563566
color='blue'
564567
width='100%' />
565568

566-
<a
567-
href='javascript:;'
568-
role='button'
569-
className={styles.del}
570-
onClick={this.removeAdditionalQuery.bind(this, 'orders', index)}>
571-
&times;
572-
</a>
569+
<div className={styles.delWrapper}>
570+
<button
571+
type='button'
572+
className={styles.del}
573+
onClick={this.removeAdditionalQuery.bind(this, 'orders', index)}>
574+
&times;
575+
</button>
576+
</div>
573577
</div>
574578
</div>
575579
);
@@ -613,33 +617,38 @@ export default class ExplorerQueryComposer extends React.Component {
613617
value={this.state.newName}
614618
onChange={this.handleNameChange.bind(this)}
615619
placeholder={'Give your query a name'} />
616-
<a
617-
href='javascript:;'
618-
role='button'
619-
className={styles.headerButton}
620-
onClick={this.handleSave.bind(this)}>
621-
{ this.state.isSaved ? 'Rename' : 'Save' }
622-
</a>
623-
<a
624-
href='javascript:;'
625-
role='button'
626-
className={[styles.headerButton, styles.secondaryColor].join(' ')}
627-
onClick={this.toggleEditing.bind(this)}>
628-
Cancel
629-
</a>
620+
<div className={styles.headerButtonCell}>
621+
<button
622+
type='button'
623+
className={styles.headerButton}
624+
onClick={this.handleSave.bind(this)}>
625+
{ this.state.isSaved ? 'Rename' : 'Save' }
626+
</button>
627+
</div>
628+
<div className={styles.headerButtonCell}>
629+
<button
630+
type='button'
631+
className={[styles.headerButton, styles.secondaryColor].join(' ')}
632+
onClick={this.toggleEditing.bind(this)}>
633+
Cancel
634+
</button>
635+
</div>
630636
</div>
631637
);
632638
} else {
633639
headerView = (
634640
<div className={[base.center, styles.headerView].join(' ')}>
635641
<h3 className={styles.headerLabel}>{ this.state.name || 'Build a custom query' }</h3>
636-
{ isNew ? null : <a
637-
href='javascript:;'
638-
role='button'
639-
className={[styles.headerButton, styles.secondaryColor].join(' ')}
640-
onClick={this.toggleEditing.bind(this)}>
641-
{ this.state.isSaved ? 'Rename' : 'Save' }
642-
</a> }
642+
{ isNew ? null : (
643+
<div className={styles.headerButtonCell}>
644+
<button
645+
type='button'
646+
className={[styles.headerButton, styles.secondaryColor].join(' ')}
647+
onClick={this.toggleEditing.bind(this)}>
648+
{ this.state.isSaved ? 'Rename' : 'Save' }
649+
</button>
650+
</div>
651+
)}
643652
</div>
644653
);
645654
}

‎src/components/ExplorerQueryComposer/ExplorerQueryComposer.scss

+10-2
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,14 @@ $placeholderColor: rgba(255, 255, 255, 0.5);
6363
}
6464
}
6565

66-
.headerButton {
66+
.headerButtonCell {
6767
display: table-cell;
6868
width: 40px;
6969
padding-left: 30px;
70+
}
71+
72+
.headerButton {
73+
@include buttonReset;
7074
color: white;
7175

7276
&.secondaryColor {
@@ -104,11 +108,15 @@ $placeholderColor: rgba(255, 255, 255, 0.5);
104108
}
105109
}
106110

107-
.del {
111+
.delWrapper {
108112
display: table-cell;
109113
vertical-align: middle;
110114
width: 24px;
111115
padding-left: 10px;
116+
}
117+
118+
.del {
119+
@include buttonReset;
112120
color: #d8d8d8;
113121
font-size: 18px;
114122
line-height: 18px;

‎src/components/ExplorerQueryPicker/ExplorerQueryPicker.react.js

+6-8
Original file line numberDiff line numberDiff line change
@@ -27,20 +27,18 @@ let ExplorerQueryPicker = ({ queries, onCompose, onSelect, onDelete }) => {
2727
<div
2828
className={styles.queryItem}
2929
key={`query_${j}`}>
30-
<a
31-
href='javascript:;'
32-
role='button'
30+
<button
31+
type='button'
3332
onClick={() => onSelect(query)}
3433
className={styles.queryLabel}>
3534
{query.name}
36-
</a>
37-
{query.preset ? null : <a
38-
href='javascript:;'
39-
role='button'
35+
</button>
36+
{query.preset ? null : <button
37+
type='button'
4038
onClick={() => onDelete(query)}
4139
className={styles.del}>
4240
&times;
43-
</a>}
41+
</button>}
4442
</div>
4543
);
4644
});

‎src/components/ExplorerQueryPicker/ExplorerQueryPicker.scss

+2
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,13 @@
2929
}
3030

3131
.queryLabel {
32+
@include buttonReset;
3233
color: $mainTextColor;
3334
}
3435
}
3536

3637
.del {
38+
@include buttonReset;
3739
position: absolute;
3840
right: 24px;
3941
color: #d8d8d8;

‎src/components/FormTable/FormTable.react.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ let Row = ({
2121
<div className={styles.header}>
2222
<span className={[styles.indicator, styles[color]].join(' ')} />
2323
<span className={styles.title}>{title}</span>
24-
{typeof onDelete === 'function' ? <a href='javascript:;' role='button' className={styles.del} onClick={onDelete}>&times;</a> : null}
24+
{typeof onDelete === 'function' ? <button type='button' className={styles.del} onClick={onDelete}>&times;</button> : null}
2525
</div>
2626
{notes.map(({ key, keyColor = '', value, strong }, index) => {
2727
return <div key={index.toString()} className={styles.info}>

‎src/components/FormTable/FormTable.scss

+1
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
}
6565

6666
.del {
67+
@include buttonReset;
6768
position: absolute;
6869
top: 7px;
6970
right: 7px;

‎src/components/FourOhFour/FourOhFour.react.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export default class FourOhFour extends React.Component {
5151
<div className={styles.message}>Oh no, we can't find that page!</div>
5252

5353
<div className={styles.back}>
54-
<a href='javascript:;' role='button' onClick={() => history.goBack()}>Go back</a>
54+
<button type='button' onClick={() => history.goBack()}>Go back</button>
5555
</div>
5656
</div>
5757
</div>

‎src/components/FourOhFour/FourOhFour.scss

+5
Original file line numberDiff line numberDiff line change
@@ -44,4 +44,9 @@
4444

4545
.back {
4646
margin-top: 40px;
47+
48+
button {
49+
@include buttonReset;
50+
color: #fff;
51+
}
4752
}

0 commit comments

Comments
 (0)