Using the APITable in the component pages | Fixes liferay#1111

matuzalemsteles · Sep 3, 2018 · c29e752 · c29e752
1 parent 1c08802
commit c29e752
Show file tree

Hide file tree

Showing 15 changed files with 222 additions and 5 deletions.
diff --git a/clayui.com/content/docs/components/alerts.md b/clayui.com/content/docs/components/alerts.md
@@ -559,4 +559,28 @@ Alerts are used to capture the attention of the user in an intrusive way. Someti
 </div>
 ```
 
+</article>
+
+<article id="clay-alert-api">
+
+### API
+
+#### ClayAlert
+
+<div>
+	[APITable "clay-alert/src/ClayAlert.js"]
+</div>
+
+#### ClayStripe
+
+<div>
+	[APITable "clay-alert/src/ClayStripe.js"]
+</div>
+
+#### ClayToast
+
+<div>
+	[APITable "clay-alert/src/ClayToast.js"]
+</div>
+
 </article>
diff --git a/clayui.com/content/docs/components/badges.md b/clayui.com/content/docs/components/badges.md
@@ -126,4 +126,14 @@ Badges help highlight important information such as notifications or new and unr
 
 <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>
 
+</article>
+
+<article id="clay-badge-api">
+
+### API
+
+<div>
+	[APITable "clay-badge/src/ClayBadge.js"]
+</div>
+
 </article>
diff --git a/clayui.com/content/docs/components/buttons.md b/clayui.com/content/docs/components/buttons.md
@@ -546,4 +546,14 @@ Buttons communicate an action to happen on user interaction.
 </button>
 ```
 
+</article>
+
+<article id="clay-button-api">
+
+### API
+
+<div>
+	[APITable "clay-button/src/ClayButton.js"]
+</div>
+
 </article>
diff --git a/clayui.com/content/docs/components/cards.md b/clayui.com/content/docs/components/cards.md
@@ -621,6 +621,15 @@ Cards are a very specific visual representation of data.
 
 </article>
 
+<article id="clay-image-card-api">
+
+#### API
+
+<div>
+	[APITable "clay-card/src/ClayImageCard.js"]
+</div>
+
+</article>
 
 <article id="clay-user-card">
 
@@ -807,6 +816,16 @@ Cards are a very specific visual representation of data.
 
 </article>
 
+<article id="clay-user-card-api">
+
+#### API
+
+<div>
+	[APITable "clay-card/src/ClayUserCard.js"]
+</div>
+
+</article>
+
 <article id="clay-file-card">
 
 ### File card
@@ -1034,6 +1053,16 @@ Cards are a very specific visual representation of data.
 
 </article>
 
+<article id="clay-file-card-api">
+
+#### API
+
+<div>
+	[APITable "clay-card/src/ClayFileCard.js"]
+</div>
+
+</article>
+
 <article id="clay-folder-card">
 
 ### Folder card
@@ -1209,4 +1238,14 @@ Cards are a very specific visual representation of data.
 </div>
 ```
 
+</article>
+
+<article id="clay-horizontal-card-api">
+
+#### API
+
+<div>
+	[APITable "clay-card/src/ClayHorizontalCard.js"]
+</div>
+
 </article>
diff --git a/clayui.com/content/docs/components/dropdowns.md b/clayui.com/content/docs/components/dropdowns.md
@@ -1265,4 +1265,28 @@ A dropdown is a list of options related to the element that triggers it.
 </div>
 ```
 
+</article>
+
+<article id="clay-dropdowns-api">
+
+### API
+
+#### ClayActionsDropdown
+
+<div>
+	[APITable "clay-dropdown/src/ClayActionsDropdown.js"]
+</div>
+
+#### ClayCreationMenuDropdown
+
+<div>
+	[APITable "clay-dropdown/src/ClayCreationMenuDropdown.js"]
+</div>
+
+#### ClayDropdown
+
+<div>
+	[APITable "clay-dropdown/src/ClayDropdown.js"]
+</div>
+
 </article>
diff --git a/clayui.com/content/docs/components/forms/form-custom.md b/clayui.com/content/docs/components/forms/form-custom.md
@@ -182,6 +182,15 @@ title: "Form Elements (Custom)"
 
 </article>
 
+<article id="clay-checkbox-api">
+
+### API
+
+<div>
+	[APITable "clay-checkbox/src/ClayCheckBox.js"]
+</div>
+
+</article>
 
 <article id="custom-radio">
 <h3 class="component-title">
@@ -259,7 +268,6 @@ title: "Form Elements (Custom)"
 
 </article>
 
-
 <article id="custom-controls-inline">
 <h3 class="component-title">
 	<a href="#custom-controls-inline">Custom Controls Inline</a>
@@ -334,3 +342,13 @@ title: "Form Elements (Custom)"
 ```
 
 </article>
+
+<article id="clay-radio-api">
+
+### API
+
+<div>
+	[APITable "clay-radio/src/ClayRadio.js"]
+</div>
+
+</article>
diff --git a/clayui.com/content/docs/components/labels.md b/clayui.com/content/docs/components/labels.md
@@ -195,3 +195,13 @@ Labels are a mechanism to categorize information providing quick recognition.
 ```
 
 </article>
+
+<article id="clay-labels-api">
+
+### API
+
+<div>
+	[APITable "clay-label/src/ClayLabel.js"]
+</div>
+
+</article>
diff --git a/clayui.com/content/docs/components/list.md b/clayui.com/content/docs/components/list.md
@@ -1278,9 +1278,17 @@ List is a visual representation of a dataset that provides more flexibility for
 
 </article>
 
+<article id="clay-list-api">
+
+### API
+
+<div>
+	[APITable "clay-list/src/ClayList.js"]
+</div>
+
+</article>
 
 <script>
-{literal}
 $(function() {
 	$('.list-group .list-group-item input[type="checkbox"]').on(
 		'click',
@@ -1289,5 +1297,4 @@ $(function() {
 		}
 	);
 });
-{/literal}
 </script>
diff --git a/clayui.com/content/docs/components/modals.md b/clayui.com/content/docs/components/modals.md
@@ -1436,3 +1436,13 @@ A modal is a box with content displayed on top of the page to capture the user
 > Use classes `modal-item-first`, `modal-item`, and `modal-item-last` inside `modal-footer` to align content left, middle, and right.
 
 </article>
+
+<article id="clay-modal-api">
+
+### API
+
+<div>
+	[APITable "clay-modal/src/ClayModal.js"]
+</div>
+
+</article>
diff --git a/clayui.com/content/docs/components/navigation/navbar.md b/clayui.com/content/docs/components/navigation/navbar.md
@@ -313,3 +313,13 @@ A navigation bar, navbar, is an horizontal bar that provides several access poin
 ```
 
 </article>
+
+<article id="clay-navigation-bar-api">
+
+### API
+
+<div>
+	[APITable "clay-navigation-bar/src/ClayNavigationBar.js"]
+</div>
+
+</article>
diff --git a/clayui.com/content/docs/components/pagination.md b/clayui.com/content/docs/components/pagination.md
@@ -225,4 +225,22 @@ title: "Pagination"
 </div>
 ```
 
+</article>
+
+<article id="clay-pagination-api">
+
+### API
+
+#### ClayPagination
+
+<div>
+	[APITable "clay-pagination/src/ClayPagination.js"]
+</div>
+
+#### ClayPaginationBar
+
+<div>
+	[APITable "clay-pagination-bar/src/ClayPaginationBar.js"]
+</div>
+
 </article>
diff --git a/clayui.com/content/docs/components/progress-bars.md b/clayui.com/content/docs/components/progress-bars.md
@@ -109,3 +109,13 @@ Progress bar is a progress indicator used to show the completion percentage of a
 ```
 
 </article>
+
+<article id="clay-progress-bar-api">
+
+### API
+
+<div>
+	[APITable "clay-progress-bar/src/ClayProgressBar.js"]
+</div>
+
+</article>
diff --git a/clayui.com/content/docs/components/stickers.md b/clayui.com/content/docs/components/stickers.md
@@ -352,3 +352,13 @@ Stickers are a visual way to quickly identify content in a different way than ba
 ```
 
 </article>
+
+<article id="clay-stickers-api">
+
+### API
+
+<div>
+	[APITable "clay-sticker/src/ClaySticker.js"]
+</div>
+
+</article>
diff --git a/clayui.com/content/docs/components/table.md b/clayui.com/content/docs/components/table.md
@@ -1221,14 +1221,21 @@ A table is a specific pattern for comparing datasets in a very direct an analyti
 
 </article>
 
+<article id="clay-table-api">
+
+### API
+
+<div>
+	[APITable "clay-table/src/ClayTable.js"]
+</div>
+
+</article>
 
 <script>
-{literal}
 $(function() {
 	$('.table').on('click', 'input[type="checkbox"]', function(event) {
 		var $this = $(this);
 		$this.closest('tr').toggleClass('table-active');
 	});
 });
-{/literal}
 </script>
diff --git a/clayui.com/content/docs/components/toolbars/management-toolbar.md b/clayui.com/content/docs/components/toolbars/management-toolbar.md
@@ -619,3 +619,13 @@ Management toolbar is an extension of Toolbar. A combination of different compon
 ```
 
 </article>
+
+<article id="clay-management-toolbar-api">
+
+### API
+
+<div>
+	[APITable "clay-management-toolbar/src/ClayManagementToolbar.js"]
+</div>
+
+</article>