liferay · carloslancha · Nov 13, 2018 · Oct 10, 2018 · Oct 12, 2018 · Oct 12, 2018
diff --git a/.eslintrc b/.eslintrc
@@ -7,6 +7,7 @@
   },
   "parserOptions": {
     "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
       "jsx": true
     }
   },

diff --git a/clayui.com/content/docs/components/alerts.md b/clayui.com/content/docs/components/alerts.md
@@ -4,13 +4,13 @@ title: "Alerts"
 
 ### Description
 
-Alerts are used to capture the attention of the user in an intrusive way. Sometimes just to say that something went right, others to say that something needs to be reviewed.
+Alerts are used to capture the attention of the user in an intrusive way. They can be used just to say that something went right, or perhaps to say that something needs to be reviewed.
 
 <div class="alert alert-info">Check the <a href="https://lexicondesign.io">Lexicon</a> <a href="https://lexicondesign.io/docs/patterns/alerts.html">Alerts Pattern</a> for a more in-depth look at the motivations and proper usage of this component.</div>
 
 ### TOAST
 
-> This type of alert is specific for toast messages. This type of messages appear on the top right corner of the screen. The maximum width of a toast message is 360px and the height can vary depending on the number of rows. It always have a close action.
+> This type of alert is specific for toast messages. These type of messages appear on the top right corner of the screen. The maximum width of a toast message is 360px, and the height can vary depending on the number of rows. It always has a close action.
 
 <div id="claySiteAlertsNotificationsSpacer">
 	<div class="row">
@@ -107,7 +107,7 @@ Alerts are used to capture the attention of the user in an intrusive way. Someti
 
 ### EMBEDDED
 
-> Embedded alerts are thought to be used inside context as forms. Usually you will only need to use the information one. Its width depends on the container with you use it, always respecting the container margins to the content. The close action is not of mandatory use.
+> Embedded alerts are meant for use in forms. Usually you will only need to use the information one. Its width depends on the width of the container it is placed in, always respecting the container margins to the content. The close action is not required for embedded alerts.
 
 <div class="alert alert-danger" role="alert">
 	<span class="alert-indicator">
@@ -241,7 +241,7 @@ Alerts are used to capture the attention of the user in an intrusive way. Someti
 
 ### STRIPE
 
-> Stripe alerts are always placed below the last navigation element, either the header or the navigation bar. This alert appears usually on "Save" action communicating the status of the action once received from the server. The close action is mandatory in this alert type. Its width is always full container width and pushes all the content below it.
+> Stripe alerts are always placed below the last navigation element, either the header or the navigation bar. This alert usually appears on "Save" action, communicating the status of the action once received from the server. The close action is mandatory in this alert type. Its width is always full container width and pushes all the content below it.
 
 <div class="alert alert-danger alert-dismissible alert-fluid" role="alert">
 	<div class="container">
@@ -433,7 +433,7 @@ Alerts are used to capture the attention of the user in an intrusive way. Someti
 
 #### Mixed HTML Content
 
-> All alerts accept html as their content. You can use the following modifiers:
+> All alerts accept HTML as their content. You can use the following modifiers:
 > - `.lead` inside of an alert to make the beginning of your message stand out
 > - `.alert-link` to style a link inside your alert
 

diff --git a/clayui.com/content/docs/components/badges.md b/clayui.com/content/docs/components/badges.md
@@ -4,7 +4,7 @@ title: "Badges"
 
 ### Description
 
-Badges help highlight important information such as notifications or new and unread messages. Badges have circular borders and are only used to specify a number.
+Badges help highlight important information, such as notifications or new and unread messages. Badges have circular borders and are only used to specify a number.
 
 <div class="alert alert-info">Check the <a href="https://lexicondesign.io">Lexicon</a> <a href="https://lexicondesign.io/docs/patterns/badges.html">Badges Pattern</a> for a more in-depth look at the motivations and proper usage of this component.</div>
 
@@ -117,7 +117,7 @@ Badges help highlight important information such as notifications or new and unr
 
 ### Clay Badge Sizes
 
-<div class="alert alert-warning">Badge Sizes have been removed, use the <a href="https://github.com/liferay/clay/blob/master/packages/clay/src/scss/mixins/_badges.scss#L1">clay-badge-size($sassMap) mixin</a> to create custom badges sizes for your app.</div>
+<div class="alert alert-warning">Badge Sizes have been removed. Use the <a href="https://github.com/liferay/clay/blob/master/packages/clay/src/scss/mixins/_badges.scss#L1">clay-badge-size($sassMap) mixin</a> to create custom badge sizes for your app.</div>
 
 ### API
 

diff --git a/clayui.com/content/docs/components/buttons.md b/clayui.com/content/docs/components/buttons.md
@@ -259,7 +259,7 @@ Buttons communicate an action to happen on user interaction.
 
 #### Icon button
 
-> Buttons can icons instead of text and for that icons need to be monospaced inside the button. Lexicon do not use buttons with text and icon, or text and loading indicator. Icon buttons are used intensively in management bars. This button variation can be primary, secondary or borderless type.
+> Buttons can display icons instead of text. The icons, however, must be monospaced inside the button. Lexicon doesn't use buttons with text and icons or text and loading indicators. Icon buttons are used primarily in management bars. This button variation can be primary, secondary, or borderless type.
 
 <button class="btn btn-monospaced btn-primary" type="button">
 	<svg aria-hidden="true" class="lexicon-icon lexicon-icon-blogs">
@@ -306,7 +306,7 @@ Buttons communicate an action to happen on user interaction.
 
 #### Icon and text button
 
-> This button type is used only in sites and not in administration. The icon emphasizes and helps to understand the action. The label must be the same icon purpose.
+> This button type is only used in sites, outside of administration. The icon emphasizes and helps communicate the action. The label must match the icon's purpose.
 
 <button class="btn btn-secondary" type="button">
 	<span class="inline-item inline-item-before">
@@ -346,7 +346,7 @@ Buttons communicate an action to happen on user interaction.
 
 #### Block level button
 
-> All buttons can also be configured at block level. Use this configuration in those cases that you need the user to realize there is an important action to be done. It could be used as a load more action below a list, as an example. Please do not use it in forms. Be always careful with the type button to use, primary is not always the best choice neither the only configuration.
+> Buttons can also be configured at block level. Use this configuration when you need to communicate an important action is required for the user. For example, it can be used as a load more action below a list. Please do not use it in forms. Choose the button type carefully. Primary is not always the best choice, nor is it the only configuration.
 
 <button class="btn btn-block btn-secondary btn-sm" type="button">Small Block Level Button</button>
 <button class="btn btn-block btn-secondary" type="button">Normal Block Level Button</button>
@@ -376,7 +376,7 @@ Buttons communicate an action to happen on user interaction.
 
 #### Dropdown button
 
-> Dropdown buttons are always used together with a dropdown menu. This button variation can be secondary or borderless type.
+> Dropdown buttons are always used with a dropdown menu. This button variation can be secondary or borderless type.
 
 <div class="btn-group">
 	<button aria-expanded="false" aria-haspopup="true" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button">
@@ -465,7 +465,7 @@ Buttons communicate an action to happen on user interaction.
 
 #### Split button
 
-> Split buttons are used in those cases where you need to offer the user a quick main action but also secondary actions.
+> Split buttons are used when you need to offer the user a quick main action along with secondary actions.
 
 <div class="btn-group dropdown" role="group">
 	<button class="btn btn-primary" type="button">Primary</button>
@@ -525,7 +525,7 @@ Buttons communicate an action to happen on user interaction.
 
 #### Button group
 
-> Button groups are used to switch between complementary views for example, but they must never be used for complementary actions and "Change and Cancel" or "Save and Cancel". In those cases the use of single buttons is the correct solution.
+> Button groups are used to switch between complementary views for example, but they must never be used for complementary actions, "Change and Cancel" actions, or "Save and Cancel" actions. In those cases, single buttons are the correct solution.
 
 <div class="btn-group" role="group">
 	<button class="btn btn-secondary" type="button">Day</button>
@@ -545,7 +545,7 @@ Buttons communicate an action to happen on user interaction.
 
 #### Plus button
 
-> Normally placed in toolbars, allows to have adding actions over a dataset. The kind of elements to add with this button are of the same nature and folders. Sometimes it only has a unique action, some others it has more. Visit Dropdown menu > Sorting actions to know more.
+> Plus buttons provide add actions for a dataset and are normally placed in toolbars. The add button lets you add entities, such as a blog post for a blog, a message board thread for a message board, or a folder. It can have one action or multiple. Visit Dropdown menu > Sorting actions to learn more.
 
 <button class="btn btn-monospaced btn-sm btn-primary" type="button">
 	<svg aria-hidden="true" class="lexicon-icon lexicon-icon-blogs">
@@ -574,7 +574,7 @@ Buttons communicate an action to happen on user interaction.
 
 #### Action button
 
-> It is used when a set of contextual actions are needed over an element or a dataset. This button displays a set of actions inside a dropdown menu. The actions must be sorted in an specific way, please visit Dropdown menu > Sorting actions to know more.
+> Action buttons are used when a set of contextual actions are needed for an element or a dataset. This button displays a set of actions inside a dropdown menu. The actions must be sorted in a specific way. please visit Dropdown menu > Sorting actions to learn more.
 
 <button class="btn btn-monospaced btn-sm btn-unstyled" type="button">
 	<svg aria-hidden="true" class="lexicon-icon lexicon-icon-ellipsis-v">

diff --git a/clayui.com/content/docs/components/cards.md b/clayui.com/content/docs/components/cards.md
@@ -10,7 +10,7 @@ Cards are a very specific visual representation of data.
 
 ### Image card
 
-> Used in image/document galleries.
+> Image cards are used in image/document galleries.
 
 #### Default
 
@@ -419,7 +419,7 @@ Cards are a very specific visual representation of data.
 
 #### IMAGE WITH DIFFERENT RATIOS
 
-> It is important to highlight that images can have different sizes. To provide the end user with that relevant data about the image Lexicon incorporates cards that allow this feature.
+> It is important to highlight that images can have different sizes. To provide the end user with that relevant data about the image, Lexicon incorporates cards that allow this feature.
 
 <div class="row">
 	<div class="col-md-4">
@@ -625,7 +625,7 @@ Cards are a very specific visual representation of data.
 
 ### User card
 
-> User card is used to represent users. The user can be represented by its user image or up to two initials extracted from the uses name or name + surname.
+> User cards represent users. The user can be represented by their user image or up to two initials extracted from their user name or name + surname.
 
 <div class="row">
 	<div class="col-md-4">
@@ -813,7 +813,7 @@ Cards are a very specific visual representation of data.
 
 ### File card
 
-> File card is used to represent files different to images.
+> File cards represent files other than images.
 
 <div class="row">
 	<div class="col-md-4">
@@ -1042,7 +1042,7 @@ Cards are a very specific visual representation of data.
 
 ### Folder card
 
-> This card variation is meant to have horizontal representations of information. This card has the same amount of elements as the previous explained. The main purpose of this card is to represent folders, therefore we allow to remove the image in this card type. In this case, only the checkbox is used to select.
+> Folder cards display horizontal representations of information. They have the same amount of elements as the other cards previously explained on this page. The main purpose of this card is to represent folders, therefore the image is removed in this card type. In this case, only the checkbox is used to select.
 
 <div class="row">
 	<div class="col-md-4">
@@ -1219,4 +1219,4 @@ Cards are a very specific visual representation of data.
 	[APITable "clay-card/src/ClayHorizontalCard.js"]
 </div>
 
-More examples can be found in <a href="/docs/components/dataset-display.html">dataset template</a>.
+See <a href="/docs/components/dataset-display.html">dataset template</a> for more examples.
diff --git a/clayui.com/content/docs/components/dataset-display.md b/clayui.com/content/docs/components/dataset-display.md
@@ -2,7 +2,7 @@
 title: "Dataset Display"
 ---
 
-A dataset display is the combination of a <a href="/docs/components/toolbars/management-toolbar.html">management bar</a> with one or many data visualization types and a possible mechanism of pagination. The most common visualization types used are <a href="/docs/components/table/table.html">table</a>, <a href="/docs/components/list.html">list</a> and <a href="/docs/components/card.html">card</a>.
+A dataset display is the combination of a <a href="/docs/components/toolbars/management-toolbar.html">management bar</a> with one or multiple data visualization types and a possible mechanism of pagination. The most common visualization types used are <a href="/docs/components/table/table.html">table</a>, <a href="/docs/components/list.html">list</a>, and <a href="/docs/components/card.html">card</a>.
 
 <div class="alert alert-info">Check the <a href="https://lexicondesign.io">Lexicon</a> <a href="https://lexicondesign.io/docs/components/dataset-display.html">Dataset Display Pattern</a> for a more in-depth look at the motivations and proper usage of this component.</div>
 
@@ -183,7 +183,7 @@ A dataset display is the combination of a <a href="/docs/components/toolbars/man
                             </td>
                             <td><span class="text-truncate">U.S.A</span></td>
                             <td class="text-right">10 min.</td>
-                            <td><span class="label label-success"><span class="label-item label-item-expand">No Spicy</span></span></td>
+                            <td><span class="label label-success"><span class="label-item label-item-expand">Not Spicy</span></span></td>
                             <td><button class="btn btn-sm btn-secondary" type="button">Download</button></td>
                             <td>
                                 <div class="progress-group progress-info">
@@ -223,7 +223,7 @@ A dataset display is the combination of a <a href="/docs/components/toolbars/man
                             </td>
                             <td><span class="text-truncate">Spain</span></td>
                             <td class="text-right">90 min.</td>
-                            <td><span class="label label-success"><span class="label-item label-item-expand">No Spicy</span></span></td>
+                            <td><span class="label label-success"><span class="label-item label-item-expand">Not Spicy</span></span></td>
                             <td><button class="btn btn-sm btn-secondary" type="button">Download</button></td>
                             <td>
                                 <div class="progress-group progress-info">
@@ -243,7 +243,7 @@ A dataset display is the combination of a <a href="/docs/components/toolbars/man
                             </td>
                             <td><span class="text-truncate">Italy</span></td>
                             <td class="text-right">30 min.</td>
-                            <td><span class="label label-success"><span class="label-item label-item-expand">No Spicy</span></span></td>
+                            <td><span class="label label-success"><span class="label-item label-item-expand">Not Spicy</span></span></td>
                             <td><button class="btn btn-sm btn-secondary" type="button">Download</button></td>
                             <td>
                                 <div class="progress-group progress-info">
@@ -572,7 +572,7 @@ A dataset display is the combination of a <a href="/docs/components/toolbars/man
                             </td>
                             <td><span class="text-truncate">U.S.A</span></td>
                             <td class="text-right">10 min.</td>
-                            <td><span class="label label-success"><span class="label-item label-item-expand">No Spicy</span></span></td>
+                            <td><span class="label label-success"><span class="label-item label-item-expand">Not Spicy</span></span></td>
                             <td><button class="btn btn-sm btn-secondary" type="button">Download</button></td>
                             <td>
                                 <div class="progress-group progress-info">