#1093 Rename widget to component.

Gruntfile.js

@@ -47,15 +47,15 @@ module.exports = function (grunt) {
             },
 
             'js': {
-                'src': ['temp/' + environment + '/core.tmp.js'].concat(files.JS.abilities).concat(files.JS.widgets),
+                'src': ['temp/' + environment + '/core.tmp.js'].concat(files.JS.abilities).concat(files.JS.components),
                 'dest': destination + '/' + environment + '/chico.js'
             },
 
             'css': {
                 'options': {
                     'banner': '<%= banner.full %>'
                 },
-                'src': files.CSS.resetML.concat(files.CSS.core).concat(files.CSS.widgets),
+                'src': files.CSS.resetML.concat(files.CSS.core).concat(files.CSS.components),
                 'dest': destination + '/' + environment + '/chico.css'
             }
         },
@@ -87,7 +87,7 @@ module.exports = function (grunt) {
         'clean': ["temp/**/*.tmp.js"],
 
         'jslint': { // configure the task
-            'files': files.JS.abilities.concat(files.JS.widgets),
+            'files': files.JS.abilities.concat(files.JS.components),
             'directives': {
                 'nomen': true,
                 'todo': true
@@ -101,7 +101,7 @@ module.exports = function (grunt) {
 
         'jsdoc': {
             'dist': {
-                'src': files.JS.core.concat(files.JS.abilities).concat(files.JS.widgets),
+                'src': files.JS.core.concat(files.JS.abilities).concat(files.JS.components),
                 'options': {
                     'template': './libs/doc-template',
                     'destination': './doc/' + environment,

README.md

@@ -1,10 +1,10 @@
 # Chico UI - Get things done, quickly.
 
-Chico UI is a free and open source collection of easy-to-use web tools for designers and developers.
+Chico UI is a free and open source collection of easy-to-use web components for designers and developers.
 
 ## Features
 
-- UI Widgets
+- UI Components
 - Grids
 
 ## Get in touch

extensions/carousel.autoSliding.js

@@ -29,13 +29,13 @@
             this.pause();
         }
 
-        // Stop the automatic movement when the user interacts with the widget
+        // Stop the automatic movement when the user interacts with the component
         this._$el.one(pointertap, function () {
             that.pause();
         });
 
         /**
-         * Interval used to animate the widget autamatically.
+         * Interval used to animate the component autamatically.
          * @private
          * @type {Number}
          */

libs/doc-template/publish.js

@@ -229,7 +229,7 @@ function buildNav(members) {
         });
 
         if (classNav !== '') {
-            nav += '<h2>Widgets</h2><ul>';
+            nav += '<h2>Components</h2><ul>';
             nav += classNav;
             nav += '</ul>';
         }

libs/doc-template/static/css/v5.css

@@ -524,23 +524,23 @@ nav .ch-rightcolumn ul {
 }
 
 /*
-*   CSS Widgets
+*   CSS Components
 */
 
-#heading-widget h1,
-#heading-widget h2,
-#heading-widget h3,
-#heading-widget h4,
-#heading-widget h5,
-#heading-widget h6 {
+#heading-component h1,
+#heading-component h2,
+#heading-component h3,
+#heading-component h4,
+#heading-component h5,
+#heading-component h6 {
     font-family: Arial;
     margin: 1em 0 0.5em 0;
 }
 
-#heading-widget h1 { font-size: 20px; }
-#heading-widget h2 { font-size: 18px; }
-#heading-widget h3 { font-size: 16px; }
-#heading-widget h4 { font-size: 14px; }
+#heading-component h1 { font-size: 20px; }
+#heading-component h2 { font-size: 18px; }
+#heading-component h3 { font-size: 16px; }
+#heading-component h4 { font-size: 14px; }
 section.main h4.ch-form-subtitle { font-size: 13px; }
 
 /* Demo forms */

libs/doc-template/tmpl/container.tmpl

@@ -63,7 +63,7 @@
     var classes = self.find({kind: 'class', memberof: doc.longname});
     if (doc.kind !== 'globalobj' && classes && classes.length) {
 ?>
-    <h2 class="api-title">Widgets</h2>
+    <h2 class="api-title">Components</h2>
 
     <dl><?js classes.forEach(function(c) { ?>
         <dt><?js= self.linkto(c.longname, c.name) ?></dt>

libs/files/mobile.js

@@ -29,10 +29,10 @@ JS.abilities = [
 ];
 
 /*
- * JS: Widgets
+ * JS: Components
  */
-JS.widgets = [
-    "src/shared/js/Widget.js",
+JS.components = [
+    "src/shared/js/Component.js",
     "src/shared/js/Expandable.js",
     "src/shared/js/Menu.js",
     "src/shared/js/Popover.js",
@@ -90,9 +90,9 @@ CSS.core = [
 ];
 
 /*
- * CSS: Widgets
+ * CSS: Components
  */
-CSS.widgets = [
+CSS.components = [
     "src/shared/css/buttons.css",
     "src/mobile/css/buttons.css",
     "src/shared/css/datagrid.css",

libs/files/ui.js

@@ -30,11 +30,11 @@ JS.abilities = [
 ];
 
 /*
- * JS: Widgets
+ * JS: Components
  */
-JS.widgets = [
+JS.components = [
     "src/shared/js/onImagesLoads.js",
-    "src/shared/js/Widget.js",
+    "src/shared/js/Component.js",
     "src/shared/js/Form.js",
     "src/shared/js/Condition.js",
     "src/shared/js/Validation.js",
@@ -98,9 +98,9 @@ CSS.core = [
 ];
 
 /*
- * CSS: Widgets
+ * CSS: Components
  */
-CSS.widgets = [
+CSS.components = [
     "src/shared/css/buttons.css",
     "src/ui/css/buttons.css",
     "src/shared/css/datagrid.css",

libs/jsdoc/conf.json

@@ -8,7 +8,7 @@
 		"../../src/ui/js/ch.support.js",
 		"../../src/ui/js/ch.keyboard.js",
 		"../../src/shared/js/ch.factory.js",
-		"../../src/shared/js/ch.Widget.js",
+		"../../src/shared/js/ch.Component.js",
 		"../../src/shared/js/ch.exports.js",
 		"../../src/ui/js/ch.init.js"
 	],
@@ -20,7 +20,7 @@
 		"../../src/shared/js/ch.events.js",
 		"../../src/mobile/js/ch.events.js",
 		"../../src/shared/js/ch.factory.js",
-		"../../src/shared/js/ch.Widget.js",
+		"../../src/shared/js/ch.Component.js",
 		"../../src/shared/js/ch.exports.js",
 		"../../src/mobile/js/ch.init.js"
 	],

package.json

@@ -1,7 +1,7 @@
 {
   "name": "Chico",
   "version": "1.0.0",
-  "description": "Chico UI is a free and open source collection of easy-to-use web tools for developers and designers.",
+  "description": "Chico UI is a free and open source collection of easy-to-use web components for developers and designers.",
   "author": "<chico@mercadolibre.com>",
   "contributors": [
     {

src/shared/css/Carousel.css

@@ -13,7 +13,7 @@
     margin: 0 50px;
 }
 
-/* Both are the same elements, but it can apply styles before the widget initialization */
+/* Both are the same elements, but it can apply styles before the component initialization */
 .ch-carousel > ul,
 .ch-carousel-list {
     overflow: hidden;
@@ -32,7 +32,7 @@
     transition: none;
 }
 
-/* Both are the same elements, but it can apply styles before the widget initialization */
+/* Both are the same elements, but it can apply styles before the component initialization */
 .ch-carousel > ul > li,
 .ch-carousel-item {
     display: inline-block;

src/shared/js/Autocomplete.js

@@ -2,17 +2,17 @@
     'use strict';
 
     /**
-     * Autocomplete widget shows a list of suggestions for a HTMLInputElement.
+     * Autocomplete Component shows a list of suggestions for a HTMLInputElement.
      * @memberof ch
      * @constructor
-     * @augments ch.Widget
+     * @augments ch.Component
      * @requires ch.Popover
      * @param {(jQuerySelector | ZeptoSelector)} $el A jQuery or Zepto Selector to create an instance of ch.Autocomplete.
      * @param {Object} [options] Options to customize an instance.
      * @param {String} [options.loadingClass] Default: "ch-autocomplete-loading".
      * @param {String} [options.highlightedClass] Default: "ch-autocomplete-highlighted".
      * @param {String} [options.itemClass] Default: "ch-autocomplete-item".
-     * @param {String} [options.addClass] CSS class names that will be added to the container on the widget initialization. Default: "ch-box-lite ch-autocomplete".
+     * @param {String} [options.addClass] CSS class names that will be added to the container on the component initialization. Default: "ch-box-lite ch-autocomplete".
      * @param {Number} [options.keystrokesTime] Default: 150.
      * @param {Boolean} [options.html] Default: false.
      * @param {String} [options.side] The side option where the target element will be positioned. You must use: "left", "right", "top", "bottom" or "center". Default: "bottom".
@@ -37,7 +37,7 @@
         this._init($el, options);
 
         /**
-         * Event emitted when the widget is ready to use.
+         * Event emitted when the component is ready to use.
          * @event ch.Autocomplete#ready
          * @example
          * // Subscribe to "ready" event.
@@ -52,10 +52,10 @@
     }
 
     // Inheritance
-    var parent = ch.util.inherits(Autocomplete, ch.Widget);
+    var parent = ch.util.inherits(Autocomplete, ch.Component);
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @type {String}
      */
     Autocomplete.prototype.name = 'autocomplete';
@@ -378,7 +378,7 @@
             // get the term to be replaced
             term = suggestions[suggestedItem];
 
-            // for the html configured widget doesn't highlight the term matched it must be done by the user
+            // for the html configured component doesn't highlight the term matched it must be done by the user
             if (!that._options.html) {
                 term = term.replace(matchedRegExp, '<strong>$1</strong>');
                 itemTemplate = this._options._itemTemplate.replace('{{suggestedData}}', ' data-suggested="' + suggestions[suggestedItem] + '"');
@@ -415,7 +415,7 @@
     };
 
     /**
-     * Hides widget's container.
+     * Hides component's container.
      * @memberof! ch.Autocomplete.prototype
      * @function
      * @returns {autocomplete}
@@ -446,12 +446,12 @@
     };
 
     /**
-     * Returns a Boolean if the widget's core behavior is shown. That means it will return 'true' if the widget is on and it will return false otherwise.
+     * Returns a Boolean if the component's core behavior is shown. That means it will return 'true' if the component is on and it will return false otherwise.
      * @memberof! ch.Autocomplete.prototype
      * @function
      * @returns {Boolean}
      * @example
-     * // Execute a function if the widget is shown.
+     * // Execute a function if the component is shown.
      * if (autocomplete.isShown()) {
      *     fn();
      * }

src/shared/js/Bubble.js

@@ -5,18 +5,18 @@
      * Bubble is a dialog window with alert/error skin.
      * @memberof ch
      * @constructor
-     * @augments ch.Widget
+     * @augments ch.Component
      * @mixes ch.Collapsible
      * @mixes ch.Content
      * @requires ch.Positioner
      * @param {(jQuerySelector | ZeptoSelector)} $el A jQuery or Zepto Selector to create an instance of ch.Bubble.
      * @param {Object} [options] Options to customize an instance.
-     * @param {String} [options.addClass] CSS class names that will be added to the container on the widget initialization.
+     * @param {String} [options.addClass] CSS class names that will be added to the container on the component initialization.
      * @param {String} [options.fx] Enable or disable UI effects. You must use: "slideDown", "fadeIn" or "none". Default: "fadeIn".
      * @param {String} [options.width] Set a width for the container. Default: "auto".
      * @param {String} [options.height] Set a height for the container. Default: "auto".
      * @param {String} [options.shownby] Determines how to interact with the trigger to show the container. You must use: "pointertap", "pointerenter" or "none". Default: "none".
-     * @param {String} [options.hiddenby] Determines how to hide the widget. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "none".
+     * @param {String} [options.hiddenby] Determines how to hide the component. You must use: "button", "pointers", "pointerleave", "all" or "none". Default: "none".
      * @param {(jQuerySelector | ZeptoSelector)} [options.reference] It's a reference to position and size of element that will be considered to carry out the position. Default: the trigger element.
      * @param {String} [options.side] The side option where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "right".
      * @param {String} [options.align] The align options where the target element will be positioned. Its value can be: "left", "right", "top", "bottom" or "center". Default: "top".
@@ -56,7 +56,7 @@
         this._init($el, options);
 
         /**
-         * Event emitted when the widget is ready to use.
+         * Event emitted when the component is ready to use.
          * @event ch.Bubble#ready
          * @example
          * // Subscribe to "ready" event.
@@ -71,7 +71,7 @@
     var parent = ch.util.inherits(Bubble, ch.Popover);
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @memberof! ch.Bubble.prototype
      * @type {String}
      */

src/shared/js/Calendar.js

@@ -14,7 +14,7 @@
      * Calendar shows months, and lets you move across the months of the year. Calendar lets you set one or many dates as selected.
      * @memberof ch
      * @constructor
-     * @augments ch.Widget
+     * @augments ch.Component
      * @param {(jQuerySelector | ZeptoSelector)} $el A jQuery or Zepto Selector to create an instance of ch.Calendar.
      * @param {Object} [options] Options to customize an instance.
      * @param {String} [options.format] Sets the date format. You must use "DD/MM/YYYY", "MM/DD/YYYY" or "YYYY/MM/DD". Default: "DD/MM/YYYY".
@@ -56,7 +56,7 @@
         this._init($el, options);
 
         /**
-         * Event emitted when the widget is ready to use.
+         * Event emitted when the component is ready to use.
          * @event ch.Calendar#ready
          * @example
          * // Subscribe to "ready" event.
@@ -191,10 +191,10 @@
         },
 
         // Inheritance
-        parent = ch.util.inherits(Calendar, ch.Widget);
+        parent = ch.util.inherits(Calendar, ch.Component);
 
     /**
-     * The name of the widget.
+     * The name of the component.
      * @type {String}
      */
     Calendar.prototype.name = 'calendar';