Fixes liferay#1111 - Update the section title of the pages and replac…

…e buttons the Modal page

clayui.com/content/docs/components/forms/multi-step-form-simplified.md

@@ -9,9 +9,8 @@ Multi step form simplified is used as a progressive disclosure method to guide t
 <div class="alert alert-info">Check the <a href="https://lexicondesign.io">Lexicon</a> <a href="https://lexicondesign.io/docs/patterns/Forms/multiStepFormSimplified.html">Multi Step Form Simplified Pattern</a> for a more in-depth look at the motivations and proper usage of this component.</div>
 
 <article id="subnav-tbar-light">
-<h3 class="component-title">
-	<a href="#subnav-tbar-light">Subnav Tbar Light</a>
-</h3>
+
+### Subnav Tbar Light
 
 <div class="tbar subnav-tbar subnav-tbar-light">
 	<div class="container-fluid container-fluid-max-xl">

clayui.com/content/docs/components/modals.md

@@ -16,7 +16,7 @@ A modal is a box with content displayed on top of the page to capture the user
 
 > 300px wide modal window, expands full width of screen at 575px and below.
 
-<button class="btn btn-info" data-target="#claySmallModal" data-toggle="modal" type="button">Small Modal</button>
+<button class="btn btn-primary" data-target="#claySmallModal" data-toggle="modal" type="button">Small Modal</button>
 <div aria-labelledby="claySmallModalLabel" class="fade modal" id="claySmallModal" role="dialog" tabindex="-1">
 	<div class="modal-dialog modal-sm">
 		<div class="modal-content">
@@ -69,7 +69,7 @@ A modal is a box with content displayed on top of the page to capture the user
 </clay-modal>
 ```
 ```html
-<button class="btn btn-info" data-target="#claySmallModal" data-toggle="modal" type="button">Small Modal</button>
+<button class="btn btn-primary" data-target="#claySmallModal" data-toggle="modal" type="button">Small Modal</button>
 <div aria-labelledby="claySmallModalLabel" class="fade modal" id="claySmallModal" role="dialog" tabindex="-1">
 	<div class="modal-dialog modal-sm">
 		<div class="modal-content">
@@ -105,7 +105,7 @@ A modal is a box with content displayed on top of the page to capture the user
 
 > 500px wide modal window, expands full width of screen at 575px and below.
 
-<button class="btn btn-info" data-target="#clayDefaultModal" data-toggle="modal" type="button">Default Modal</button>
+<button class="btn btn-primary" data-target="#clayDefaultModal" data-toggle="modal" type="button">Default Modal</button>
 <div aria-labelledby="clayDefaultModalLabel" class="fade modal" id="clayDefaultModal" role="dialog" tabindex="-1">
 	<div class="modal-dialog">
 		<div class="modal-content">
@@ -156,7 +156,7 @@ A modal is a box with content displayed on top of the page to capture the user
 </clay-modal>
 ```
 ```html
-<button class="btn btn-info" data-target="#clayDefaultModal" data-toggle="modal" type="button">Default Modal</button>
+<button class="btn btn-primary" data-target="#clayDefaultModal" data-toggle="modal" type="button">Default Modal</button>
 <div aria-labelledby="clayDefaultModalLabel" class="fade modal" id="clayDefaultModal" role="dialog" tabindex="-1">
 	<div class="modal-dialog">
 		<div class="modal-content">
@@ -194,7 +194,7 @@ A modal is a box with content displayed on top of the page to capture the user
 > 500px wide modal in window sizes between 576px and 991px.
 > Full width of screen at 575px and below.
 
-<button class="btn btn-info" data-target="#clayLargeModal" data-toggle="modal" type="button">Large Modal</button>
+<button class="btn btn-primary" data-target="#clayLargeModal" data-toggle="modal" type="button">Large Modal</button>
 <div aria-labelledby="clayLargeModalLabel" class="fade modal" id="clayLargeModal" role="dialog" tabindex="-1">
 	<div class="modal-dialog modal-lg">
 		<div class="modal-content">
@@ -247,7 +247,7 @@ A modal is a box with content displayed on top of the page to capture the user
 </clay-modal>
 ```
 ```html
-<button class="btn btn-info" data-target="#clayLargeModal" data-toggle="modal" type="button">Large Modal</button>
+<button class="btn btn-primary" data-target="#clayLargeModal" data-toggle="modal" type="button">Large Modal</button>
 <div aria-labelledby="clayLargeModalLabel" class="fade modal" id="clayLargeModal" role="dialog" tabindex="-1">
 	<div class="modal-dialog modal-lg">
 		<div class="modal-content">
@@ -283,7 +283,7 @@ A modal is a box with content displayed on top of the page to capture the user
 
 > A modal that stretches to fit the browser window with 45px spacing on every side, expands to fill the screen at screen sizes 767px and below.
 
-<button class="btn btn-info" data-target="#clayFullScreenModal" data-toggle="modal" type="button">Full Screen Modal</button>
+<button class="btn btn-primary" data-target="#clayFullScreenModal" data-toggle="modal" type="button">Full Screen Modal</button>
 <div aria-labelledby="clayLargeModalLabel" class="fade modal" id="clayFullScreenModal" role="dialog" tabindex="-1">
 	<div class="modal-dialog modal-full-screen">
 		<div class="modal-content">
@@ -496,7 +496,7 @@ A modal is a box with content displayed on top of the page to capture the user
 </clay-modal>
 ```
 ```html
-<button class="btn btn-info" data-target="#clayFullScreenModal" data-toggle="modal" type="button">Full Screen Modal</button>
+<button class="btn btn-primary" data-target="#clayFullScreenModal" data-toggle="modal" type="button">Full Screen Modal</button>
 <div aria-labelledby="clayLargeModalLabel" class="fade modal" id="clayFullScreenModal" role="dialog" tabindex="-1">
 	<div class="modal-dialog modal-full-screen">
 		<div class="modal-content">
@@ -612,7 +612,7 @@ A modal is a box with content displayed on top of the page to capture the user
 
 > Add `modal-full-screen-sm-down` to any `modal-dialog` to stretch to fit the browser window at screen widths 767px and below.
 
-<button class="btn btn-info" data-target="#clayModalFullScreenSmDown" data-toggle="modal" type="button">Modal Full Screen Sm Down</button>
+<button class="btn btn-primary" data-target="#clayModalFullScreenSmDown" data-toggle="modal" type="button">Modal Full Screen Sm Down</button>
 <div aria-labelledby="clayModalFullScreenSmDownLabel" class="fade modal" id="clayModalFullScreenSmDown" role="dialog" tabindex="-1">
 	<div class="modal-dialog modal-full-screen-sm-down">
 		<div class="modal-content">
@@ -654,7 +654,7 @@ A modal is a box with content displayed on top of the page to capture the user
 </div>
 
 ```html
-<button class="btn btn-info" data-target="#clayModalFullScreenSmDown" data-toggle="modal" type="button">Modal Full Screen Sm Down</button>
+<button class="btn btn-primary" data-target="#clayModalFullScreenSmDown" data-toggle="modal" type="button">Modal Full Screen Sm Down</button>
 <div aria-labelledby="clayModalFullScreenSmDownLabel" class="fade modal" id="clayModalFullScreenSmDown" role="dialog" tabindex="-1">
 	<div class="modal-dialog modal-full-screen-sm-down">
 		<div class="modal-content">
@@ -715,7 +715,7 @@ A modal is a box with content displayed on top of the page to capture the user
 
 > This is the classic composition of a modal window with its three main parts: header, body and footer.
 
-<button class="btn btn-info" data-target="#clayDefaultModal" data-toggle="modal" type="button">Default Modal</button>
+<button class="btn btn-primary" data-target="#clayDefaultModal" data-toggle="modal" type="button">Default Modal</button>
 <div aria-labelledby="clayDefaultModalLabel" class="fade modal" id="clayDefaultModal" role="dialog" tabindex="-1">
 	<div class="modal-dialog">
 		<div class="modal-content">
@@ -766,7 +766,7 @@ A modal is a box with content displayed on top of the page to capture the user
 </clay-modal>
 ```
 ```html
-<button class="btn btn-info" data-target="#clayDefaultModal" data-toggle="modal" type="button">Default Modal</button>
+<button class="btn btn-primary" data-target="#clayDefaultModal" data-toggle="modal" type="button">Default Modal</button>
 <div aria-labelledby="clayDefaultModalLabel" class="fade modal" id="clayDefaultModal" role="dialog" tabindex="-1">
 	<div class="modal-dialog">
 		<div class="modal-content">
@@ -802,7 +802,7 @@ A modal is a box with content displayed on top of the page to capture the user
 
 > This is the case when you don't need a footer bar to place your icons.
 
-<button class="btn btn-info" data-target="#clayDefaultModal" data-toggle="modal" type="button">Default Modal</button>
+<button class="btn btn-primary" data-target="#clayDefaultModal" data-toggle="modal" type="button">Default Modal</button>
 <div aria-labelledby="clayDefaultModalLabel" class="fade modal" id="clayDefaultModal" role="dialog" tabindex="-1">
 	<div class="modal-dialog">
 		<div class="modal-content">
@@ -839,7 +839,7 @@ A modal is a box with content displayed on top of the page to capture the user
 </clay-modal>
 ```
 ```html
-<button class="btn btn-info" data-target="#clayDefaultModal" data-toggle="modal" type="button">Default Modal</button>
+<button class="btn btn-primary" data-target="#clayDefaultModal" data-toggle="modal" type="button">Default Modal</button>
 <div aria-labelledby="clayDefaultModalLabel" class="fade modal" id="clayDefaultModal" role="dialog" tabindex="-1">
 	<div class="modal-dialog">
 		<div class="modal-content">
@@ -863,7 +863,7 @@ A modal is a box with content displayed on top of the page to capture the user
 
 > This case is thought for those cases where you need to just show text and buttons to agree or cancel.
 
-<button class="btn btn-info" data-target="#clayDefaultModal" data-toggle="modal" type="button">Default Modal</button>
+<button class="btn btn-primary" data-target="#clayDefaultModal" data-toggle="modal" type="button">Default Modal</button>
 <div aria-labelledby="clayDefaultModalLabel" class="fade modal" id="clayDefaultModal" role="dialog" tabindex="-1">
 	<div class="modal-dialog">
 		<div class="modal-content">
@@ -904,7 +904,7 @@ A modal is a box with content displayed on top of the page to capture the user
 </clay-modal>
 ```
 ```html
-<button class="btn btn-info" data-target="#clayDefaultModal" data-toggle="modal" type="button">Default Modal</button>
+<button class="btn btn-primary" data-target="#clayDefaultModal" data-toggle="modal" type="button">Default Modal</button>
 <div aria-labelledby="clayDefaultModalLabel" class="fade modal" id="clayDefaultModal" role="dialog" tabindex="-1">
 	<div class="modal-dialog">
 		<div class="modal-content">
@@ -936,7 +936,7 @@ A modal is a box with content displayed on top of the page to capture the user
 
 <div class="alert alert-warning">In mobile safari (iOS 8.3), any content inside an iframe that triggers a browser reflow will cause the iframe to scroll to the top.</div>
 
-<button class="btn btn-info" data-target="#clayFullScreenModalIframe" data-toggle="modal" type="button">Full Screen Modal Iframe</button>
+<button class="btn btn-primary" data-target="#clayFullScreenModalIframe" data-toggle="modal" type="button">Full Screen Modal Iframe</button>
 <div aria-labelledby="clayFullScreenModalIframeLabel" class="fade modal" id="clayFullScreenModalIframe" role="dialog" tabindex="-1">
 	<div class="modal-dialog modal-full-screen modal-full-screen-sm-down">
 		<div class="modal-content">
@@ -985,7 +985,7 @@ A modal is a box with content displayed on top of the page to capture the user
 </clay-modal>
 ```
 ```html
-<button class="btn btn-info" data-target="#clayFullScreenModalIframe" data-toggle="modal" type="button">Full Screen Modal Iframe</button>
+<button class="btn btn-primary" data-target="#clayFullScreenModalIframe" data-toggle="modal" type="button">Full Screen Modal Iframe</button>
 <div aria-labelledby="clayFullScreenModalIframeLabel" class="fade modal" id="clayFullScreenModalIframe" role="dialog" tabindex="-1">
 	<div class="modal-dialog modal-full-screen modal-full-screen-sm-down">
 		<div class="modal-content">
@@ -1057,7 +1057,7 @@ A modal is a box with content displayed on top of the page to capture the user
 		</div>
 	</div>
 </div>
-<button class="btn btn-info" data-target="#clayModalInfo" data-toggle="modal" type="button">Modal Info</button>
+<button class="btn btn-primary" data-target="#clayModalInfo" data-toggle="modal" type="button">Modal Info</button>
 <div aria-labelledby="clayModalInfoLabel" class="fade modal" id="clayModalInfo" role="dialog" tabindex="-1">
 	<div class="modal-info modal-dialog modal-full-screen-sm-down">
 		<div class="modal-content">

clayui.com/content/docs/components/navigation/vertical-navigation.md

@@ -9,9 +9,8 @@ Vertical navigation allows the navigation between the different pages.
 <div class="alert alert-info">Check the <a href="https://lexicondesign.io">Lexicon</a> <a href="https://lexicondesign.io/docs/patterns/Navigation/verticalNav.html">Vertical Navigation Pattern</a> for a more in-depth look at the motivations and proper usage of this component.</div>
 
 <article id="menubar-vertical-expand-lg">
-<h3 class="component-title">
-	<a href="#menubar-vertical-expand-lg">Menubar Vertical Expand Lg</a>
-</h3>
+
+### Menubar Vertical Expand Lg
 
 > A pattern for collapsing vertical navigations, collapses at 991px. For vertical navigations that don't collapse use <a href="nav.html#nav-stacked">Nav Stacked</a> or <a href="nav.html#nav-nested">Nav Nested</a>.
 
@@ -228,9 +227,8 @@ Vertical navigation allows the navigation between the different pages.
 </article>
 
 <article id="menubar-vertical-expand-md">
-<h3 class="component-title">
-	<a href="#menubar-vertical-expand-md">Menubar Vertical Expand Md</a>
-</h3>
+
+### Menubar Vertical Expand Md
 
 > A pattern for collapsing vertical navigations, collapses at 767px. For vertical navigations that don't collapse use <a href="nav.html#nav-stacked">Nav Stacked</a> or <a href="nav.html#nav-nested">Nav Nested</a>.
 

clayui.com/content/docs/components/table/table.md

@@ -8,12 +8,9 @@ A table is a specific pattern for comparing datasets in a very direct an analyti
 
 <div class="alert alert-info">Check the <a href="https://lexicondesign.io">Lexicon</a> <a href="https://lexicondesign.io/docs/patterns/Table/table.html">Table Pattern</a> for a more in-depth look at the motivations and proper usage of this component.</div>
 
-When a table is used together with management bar, the table entries must include the checkbox, as the selection and actions are reflected in the management bar. You can find these examples in <a href="/docs/components/dataset-display.html">dataset display</a>.
-
 <article id="table-list">
-<h3 class="component-title">
-	<a href="#table-list">Table List</a>
-</h3>
+
+### Table List
 
 > A table styled like a list. The active state can be invoked by adding class `table-active` to the ````<tr></tr>```` element.
 
@@ -610,9 +607,8 @@ When a table is used together with management bar, the table entries must includ
 </article>
 
 <article id="table-in-forms-hierarchy-example">
-<h3 class="component-title">
-	<a href="#table-in-forms-hierarchy-example">Table in Forms Hierarchy Example</a>
-</h3>
+
+### Table in Forms Hierarchy Example
 
 <div class="sheet">
 	<div class="sheet-header">