Skip to content

Commit def831f

Browse files
pixelasticpixelastic
committed
feat(theme): Add searchBox widget to default theme
- Set styling of the `poweredBy` as part of the `search-box` widget - Move appropriate styling to `default.css` - Update readme - Use image replacement technique and base64 in the theme file - Placeholder in theme file for other widgets to come BREAKING CHANGE: "Powered by" styles are now `ais-search-box--powered-by` and `ais-search-box--powered-by-link`.
1 parent bf50b8d commit def831f

File tree

10 files changed

+79
-76
lines changed

10 files changed

+79
-76
lines changed

‎README.md

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -328,25 +328,18 @@ search.addWidget(
328328
```html
329329
<input class="ais-search-box--input">
330330
<!-- With poweredBy: true -->
331-
<div class="ais-search-box--powered-by ais-powered-by">
331+
<div class="ais-search-box--powered-by">
332332
Powered by
333-
<a class="ais-powered-by--link">
334-
<img src="ais-powered-by--image" />
335-
</a>
333+
<a class="ais-search-box--powered-by-link">Algolia</a>
336334
</div>
337335
```
338336

339337
```css
340-
/* With poweredBy; true */
341-
.ais-powered-by {
342-
display: block;
343-
font-size: 12px;
344-
line-height: 18px;
345-
text-align: right;
338+
.ais-search-box--input {
346339
}
347-
.ais-powered-by--image {
348-
height: 16px;
349-
margin-bottom: 2px;
340+
.ais-search-box--powered-by {
341+
}
342+
.ais-search-box--powered-by-link {
350343
}
351344
```
352345
### stats

‎components/PoweredBy/PoweredBy.js

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,27 @@
11
var React = require('react');
2-
var bem = require('../../lib/utils').bemHelper('ais-powered-by');
3-
var cx = require('classnames');
4-
var logo = require('./algolia-logo');
52

63
class PoweredBy extends React.Component {
74
render() {
8-
var cssClasses = {
9-
root: cx(this.props.className, bem(null)),
10-
link: bem('link'),
11-
image: bem('image')
12-
};
13-
145
return (
15-
<div className={cssClasses.root}>
6+
<div className={this.props.cssClasses.root}>
167
Powered by
17-
<a className={cssClasses.link} href="https://www.algolia.com/">
18-
<img className={cssClasses.image} src={'data:image/png;base64,' + logo.base64} />
19-
</a>
8+
<a className={this.props.cssClasses.link} href="https://www.algolia.com/" target="_blank">Algolia</a>
209
</div>
2110
);
2211
}
2312
}
2413

2514
PoweredBy.propTypes = {
26-
className: React.PropTypes.string
15+
cssClasses: React.PropTypes.shape({
16+
root: React.PropTypes.oneOfType([
17+
React.PropTypes.string,
18+
React.PropTypes.arrayOf(React.PropTypes.string)
19+
]),
20+
link: React.PropTypes.oneOfType([
21+
React.PropTypes.string,
22+
React.PropTypes.arrayOf(React.PropTypes.string)
23+
])
24+
})
2725
};
2826

2927
module.exports = PoweredBy;

‎components/PoweredBy/__tests__/PoweredBy-test.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,6 @@ import PoweredBy from '../PoweredBy';
88
import toEqualJSX from 'expect-to-equal-jsx';
99
expect.extend({toEqualJSX});
1010

11-
var bem = require('../../../lib/utils').bemHelper('ais-powered-by');
12-
var cx = require('classnames');
13-
1411
describe('PoweredBy', () => {
1512
var renderer;
1613

@@ -20,13 +17,16 @@ describe('PoweredBy', () => {
2017
});
2118

2219
it('should render <PoweredBy className="pb" />', () => {
23-
var out = render({className: 'pb'});
20+
var out = render({
21+
cssClasses: {
22+
root: 'pb-root',
23+
link: 'pb-link'
24+
}
25+
});
2426
expect(out).toEqualJSX(
25-
<div className={cx('pb', bem(null))}>
27+
<div className="pb-root">
2628
Powered by
27-
<a className={cx(bem('link'))} href="https://www.algolia.com/">
28-
<img className={cx(bem('image'))} src={'data:image/png;base64,' + require('../algolia-logo').base64} />
29-
</a>
29+
<a className="pb-link" href="https://www.algolia.com/" target="_blank">Algolia</a>
3030
</div>);
3131
});
3232

‎components/PoweredBy/algolia-logo.js

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎components/PoweredBy/powered-by.css

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎example/debug.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../themes/debug.css

‎example/default.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../themes/default/default.css

‎example/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
<!--[if lte IE 9]>
1010
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
1111
<![endif]-->
12+
<!-- <link rel="stylesheet" href="./debug.css"> -->
13+
<link rel="stylesheet" href="./default.css">
1214
<link rel="stylesheet" href="./style.css">
1315
</head>
1416
<body>

‎themes/default/default.css

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
2+
/* SEARCH BOX */
3+
.ais-search-box--input {
4+
}
5+
.ais-search-box--powered-by {
6+
font-size: 0.8em;
7+
text-align: right;
8+
margin-top: 2px;
9+
}
10+
/*
11+
* Image replacement technique used:
12+
* http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
13+
**/
14+
.ais-search-box--powered-by-link {
15+
display: inline-block;
16+
width:45px;
17+
height: 16px;
18+
text-indent: 101%;
19+
overflow: hidden;
20+
white-space: nowrap;
21+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF0AAAAgCAYAAABwzXTcAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGHRFWHRTb2Z0d2FyZQBwYWludC5uZXQgNC4wLjVlhTJlAAAIJElEQVRoQ+1Za2xURRTugqJVEBAlhICBRFEQeRfodssqiDZaS8vu3dsXVlAbxReJwVfAoqJ/sBqE3S1IgqgBrY9EQ6KJiUAokUfpvQUKogIBlKbyEEUolNL6ndkzw9129+72YaFJv+Rk737nzMyZ756dmXs3oQtd6EJ7oaioqJvX603kr1cl8vPzb+TLzo3MzMx+Xk0r03y+0x5Ne4vpqwoohjeQ4yHYcaYiwcGfVz+ysrIGQfBGsqtWdE37lvLz+nwnmVLIyMjoBd9GxPwL/wKmOw4zCgr6YPBNSGILEviYaVt0dtHxK/DK/BFXq2lad3Z1DJDUqzIBYZrmYldUdLToI4r29HCWmLozUPmEK2AUOgOmRysttRXKTnSPxzMWfD37q0B13DJTUFBwPQatlgKKJJAsu6Oio0VPDlQsTgmajWEWMOaxOyLsRCdQccGez87OHshUxwAJzZbiIYFKkaSmXdJ1fRiHRERHi+4MGk+mBMwXnSVGPj7nQPS3qeLZHRGxRL9ScCAxk8Ur92Rnj5VCItHlHBMRrRDdQRXl8/nG4eaOp5uKz57sC8OkoDEkOWCO5K8CtJRgabnT6TfuS/ZXOKet2duPXVHRDqI7svLz+yPnJCxH07ANuGFDiQ+5WwF0NkWJrOuziEOCm5n7Jy8v7yYRGAHxio4kEyHuK+j3oIyXRr8o2G/wrUXMGIonQbFe18Kq3Ms39By/orw3KnsxKr06fHkxLjkDxubkEuNhMVAE2Ikuni98vsMYtwafQaYVwLvQ9qg1X2mI/xXzyuXQlgGNP+NO/kxLS7tOcOhMda7rz4rACIhH9Ky8vEGY+G4ZZ2ua9hi1gbhvQvBDScu3DUC1j8X1YSV0wDgLsX9m7tJl3lw9onRPDzGoBTFFp1NLyL+WaQUU5GSZG+IuIeYCrhskJ3ivN6o+EYFJDuCOaNBipuXGepI73gMq4k8pluh0E5GsXLoo8U1IMgPLyhDYYExqNL6/Lv1S9FT/7sHOkp0TXCvNYbgBp0hUfB6A2D6rsKn+7YMh9nvOoHkxJL6xLiGhMSzXtoiOfHqDn41ch5MmFC+O1ihEtDnP7c5QHDeJDTSQx8QGTH4E0wLwLWVfo0fXU5kOQyzR0ecL0o/EvoI1O95ZlzcpugAmiKVjKwu+1f2+0Yc9As5VZb3gX4JfQn9XwEyH+HUi1m/kc4hAW0S3A3J9TeaNOWQybQ8aEA0O8IDbmFagM6zsFP5PmA5DTNF5WUH7c7QZMR2GaKK7Ssw0FvyMe2XlIKYVUkrMR4Q/YB6b4t85HKIv5Pj9CY2Xq/3/Ep2qX+aN4prPtD0w2ftlI0z2GaatsJ5qztLPinkFO9Fzc3P7ghfrH/r5nulmiCY6qnhVSEQz4gkKIvvJD2sQS8yqfb3wifWeuN2jOazdRIewibQszszJuYO0yMnJuUXmjbZFHGYPTHAdN7iQOWtWxKMXfPNkx5FujJ3oEHOk9KGfpUw3QzTRsWHuCAloZDFlQaMDN+Ugqrocy8tUJulG/Mg34lGm2iR6YWHhteDnIq8diLmo8gwV0zH5HTGxRcddu1kOhg6PotGCKKbWdVg5N1eIIfpo1VbT3mW6GWxE30cCulbscjOlkLRsb7+UQGUuVOvGlABu0JdC9IChCqS1olNlg9+ocqOY0PG2FrHi1YHi4xJd15+2NorTaLO9h7sQsBOdTieqLX5VTDdD9OXFLCMBm26MdqANV7QpMXWm2iK69VS1AXmm0AmGfOIX4PUmS398omPjFME0oKZtsTPEqDM22qljJcFOdLTtDv4E+2vkM0BT2FR6sRAwaJQyZYuJ2Gyx5NSj2htSPzDpiVGg1aLzfga+mqqeaQX6L0HmjRh70a27Lib5KdNRgZjelsSq3W73NewKEx1xYaITwJVY/IuYDkM00Scv2zGOBETF1+MkM4npqIDga8RNwhMqUwKtFt3n+13wmlbGVBhaJDom9o4MxoQfYtoW6PQLNYDXqx65cX2r4n2+j5hWoN0e/BmOoeUpgDFH0qsFXA+FPQ5/lezDKjoBoq8Ta3TQ/MPl3zWK6XBAOMQtCglu1qcsN8NeScvcIV5d01cadqIjF9o8qd0p+rODaYW4RedBjnBwjbVq7QChPJYBPmda9Ef9sO88fC/NnDnzLnYL4MFqBvk4xt6aiO5ebfSBoLu5gmtxXZzsr0hyBXb1xRFxYHKwwivXfrJkv/EyN1VAn4tk/8hvPebyIK3J5ItR6Qssee1Ageh4drkbn7dT4fC8ZL/RRUeDqZZA2zeIVqAd7eSnud05JKEee3GtnsyEYUlhlwK4MWi3HiZeOVjsF/g+VN+biE6gN4nOYOV3UtiIhvO5028+xU3CgD5vg7B/yzFwXSf3FzvR6Y9s+Lar3GwMbW1Ex7kbHW0iw12bwHRcQPILVVtdn8Y0wYF+52LwChhV+3PMN8N0TARVQu9bJtKLMFAO5HGvSh7VFIpsikaHeNQPGt9A5JMkNG2asP2wJfSuhgMjwpOdPQp5fY0xTiD/vUxL0X8Q88JphWkF8Q5K1+dj7hVoby2Yi+Bq0G4nPkvRdjo36XiI5aaF/zNiUur9DN0Mpu3gmFx8JHH8inKxRLQUcmlpKWhesN4Zc+b0aukcrwSivuynR2lUkHjHjqo53lpBumABKjcRolbBluJ6FpaWKVTNWJ4eQLXQXnD5DwJ852ZdaAsgsvoTwM5wU1Z3hp9spwCqeigELcbS8RPE/QvX9M6iAd/rcH0YtrbJptyFdoYD1dwjPT39hnifD7rQhTiRkPAfxnOcWpCmnRwAAAAASUVORK5CYII=);
22+
background-repeat: no-repeat;
23+
background-size: contain;
24+
vertical-align:middle;
25+
}
26+
27+
/* STATS */
28+
29+
/* INDEX SELECTOR */
30+
31+
/* HITS */
32+
33+
/* PAGINATION */
34+
35+
/* REFINEMENT LIST */
36+
37+
/* MENU */
38+
39+
/* TOGGLE */
40+
41+
/* HIERARCHICAL MENU */
42+
43+
/* RANGE SLIDER */
44+

‎widgets/search-box.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,10 +72,13 @@ function searchBox({
7272
var PoweredBy = require('../components/PoweredBy/PoweredBy.js');
7373
var poweredByContainer = document.createElement('div');
7474
input.parentNode.appendChild(poweredByContainer);
75-
var poweredByClassName = cx(bem('powered-by'), cssClasses.poweredBy);
75+
var poweredByCssClasses = {
76+
root: cx(bem('powered-by'), cssClasses.poweredBy),
77+
link: bem('powered-by-link')
78+
};
7679
ReactDOM.render(
7780
<PoweredBy
78-
className={poweredByClassName}
81+
cssClasses={poweredByCssClasses}
7982
/>,
8083
poweredByContainer
8184
);

0 commit comments

Comments
 (0)