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`.
algolia · Oct 19, 2015 · def831f · def831f
1 parent bf50b8d
commit def831f
Show file tree

Hide file tree

Showing 10 changed files with 79 additions and 76 deletions.
diff --git a/README.md b/README.md
@@ -328,25 +328,18 @@ search.addWidget(
 ```html
 <input class="ais-search-box--input">
 <!-- With poweredBy: true -->
-<div class="ais-search-box--powered-by ais-powered-by">
+<div class="ais-search-box--powered-by">
   Powered by
-  <a class="ais-powered-by--link">
-    <img src="ais-powered-by--image" />
-  </a>
+  <a class="ais-search-box--powered-by-link">Algolia</a>
 </div>
 ```
 
 ```css
-/* With poweredBy; true */
-.ais-powered-by {
-  display: block;
-  font-size: 12px;
-  line-height: 18px;
-  text-align: right;
+.ais-search-box--input {
 }
-.ais-powered-by--image {
-  height: 16px;
-  margin-bottom: 2px;
+.ais-search-box--powered-by {
+}
+.ais-search-box--powered-by-link {
 }
 ```
 ### stats

diff --git a/components/PoweredBy/PoweredBy.js b/components/PoweredBy/PoweredBy.js
@@ -1,29 +1,27 @@
 var React = require('react');
-var bem = require('../../lib/utils').bemHelper('ais-powered-by');
-var cx = require('classnames');
-var logo = require('./algolia-logo');
 
 class PoweredBy extends React.Component {
   render() {
-    var cssClasses = {
-      root: cx(this.props.className, bem(null)),
-      link: bem('link'),
-      image: bem('image')
-    };
-
     return (
-      <div className={cssClasses.root}>
+      <div className={this.props.cssClasses.root}>
         Powered by
-        <a className={cssClasses.link} href="https://www.algolia.com/">
-          <img className={cssClasses.image} src={'data:image/png;base64,' + logo.base64} />
-        </a>
+        <a className={this.props.cssClasses.link} href="https://www.algolia.com/" target="_blank">Algolia</a>
       </div>
     );
   }
 }
 
 PoweredBy.propTypes = {
-  className: React.PropTypes.string
+  cssClasses: React.PropTypes.shape({
+    root: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.arrayOf(React.PropTypes.string)
+    ]),
+    link: React.PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.arrayOf(React.PropTypes.string)
+    ])
+  })
 };
 
 module.exports = PoweredBy;
diff --git a/components/PoweredBy/__tests__/PoweredBy-test.js b/components/PoweredBy/__tests__/PoweredBy-test.js
@@ -8,9 +8,6 @@ import PoweredBy from '../PoweredBy';
 import toEqualJSX from 'expect-to-equal-jsx';
 expect.extend({toEqualJSX});
 
-var bem = require('../../../lib/utils').bemHelper('ais-powered-by');
-var cx = require('classnames');
-
 describe('PoweredBy', () => {
   var renderer;
 
@@ -20,13 +17,16 @@ describe('PoweredBy', () => {
   });
 
   it('should render <PoweredBy className="pb" />', () => {
-    var out = render({className: 'pb'});
+    var out = render({
+      cssClasses: {
+        root: 'pb-root',
+        link: 'pb-link'
+      }
+    });
     expect(out).toEqualJSX(
-    <div className={cx('pb', bem(null))}>
+    <div className="pb-root">
       Powered by
-      <a className={cx(bem('link'))} href="https://www.algolia.com/">
-        <img className={cx(bem('image'))} src={'data:image/png;base64,' + require('../algolia-logo').base64} />
-      </a>
+      <a className="pb-link" href="https://www.algolia.com/" target="_blank">Algolia</a>
     </div>);
   });
 

diff --git a/components/PoweredBy/algolia-logo.js b/components/PoweredBy/algolia-logo.js
diff --git a/components/PoweredBy/powered-by.css b/components/PoweredBy/powered-by.css
diff --git a/example/debug.css b/example/debug.css
@@ -0,0 +1 @@
+../themes/debug.css
diff --git a/example/default.css b/example/default.css
@@ -0,0 +1 @@
+../themes/default/default.css
diff --git a/example/index.html b/example/index.html
@@ -9,6 +9,8 @@
   <!--[if lte IE 9]>
   <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
   <![endif]-->
+  <!-- <link rel="stylesheet" href="./debug.css"> -->
+  <link rel="stylesheet" href="./default.css">
   <link rel="stylesheet" href="./style.css">
 </head>
 <body>

diff --git a/themes/default/default.css b/themes/default/default.css
@@ -0,0 +1,44 @@
+
+/* SEARCH BOX */
+.ais-search-box--input {
+}
+.ais-search-box--powered-by {
+  font-size: 0.8em;
+  text-align: right;
+  margin-top: 2px;
+}
+/*
+ * Image replacement technique used:
+ * http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
+ **/
+.ais-search-box--powered-by-link {
+  display: inline-block;
+  width:45px;
+  height: 16px;
+  text-indent: 101%;
+  overflow: hidden;
+  white-space: nowrap;
+  background-image: url(data:image/png;base64,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);
+  background-repeat: no-repeat;
+  background-size: contain;
+  vertical-align:middle;
+}
+
+/* STATS */
+
+/* INDEX SELECTOR */
+
+/* HITS */
+
+/* PAGINATION */
+
+/* REFINEMENT LIST */
+
+/* MENU */
+
+/* TOGGLE */
+
+/* HIERARCHICAL MENU */
+
+/* RANGE SLIDER */
+
diff --git a/widgets/search-box.js b/widgets/search-box.js
@@ -72,10 +72,13 @@ function searchBox({
         var PoweredBy = require('../components/PoweredBy/PoweredBy.js');
         var poweredByContainer = document.createElement('div');
         input.parentNode.appendChild(poweredByContainer);
-        var poweredByClassName = cx(bem('powered-by'), cssClasses.poweredBy);
+        var poweredByCssClasses = {
+          root: cx(bem('powered-by'), cssClasses.poweredBy),
+          link: bem('powered-by-link')
+        };
         ReactDOM.render(
           <PoweredBy
-            className={poweredByClassName}
+            cssClasses={poweredByCssClasses}
           />,
           poweredByContainer
         );