Merge pull request #1195 from matuzalemsteles/issue-1111

Organize the Lexicon Core Components session according to the proposal in clayui.com | Fixes #1111
liferay · Sep 25, 2018 · 00113ef · 00113ef
2 parents efcdcd7 + 546eb2b
commit 00113ef
Show file tree

Hide file tree

Showing 44 changed files with 5,192 additions and 2,684 deletions.
diff --git a/clayui.com/content/docs/components/buttons.md b/clayui.com/content/docs/components/buttons.md
@@ -8,7 +8,66 @@ Buttons communicate an action to happen on user interaction.
 
 <div class="alert alert-info">Check the <a href="https://lexicondesign.io">Lexicon</a> <a href="https://lexicondesign.io/docs/patterns/buttons.html">Buttons Pattern</a> for a more in-depth look at the motivations and proper usage of this component.</div>
 
-<article id="clay-button">
+<article id="types">
+
+### Types
+
+#### Primary
+
+<button class="btn btn-primary" type="button">Primary</button>
+
+```soy
+{call ClayButton.render}
+	{param label: 'Primary' /}
+	{param type: 'button' /}
+{/call}
+```
+```html
+<clay-button label="Primary" type="button"></clay-button>
+```
+```html
+<button class="btn btn-primary" type="button">Primary</button>
+```
+
+#### Secondary
+
+<button class="btn btn-secondary" type="button">Secondary</button>
+
+```soy
+{call ClayButton.render}
+	{param label: 'Secondary' /}
+	{param style: 'secondary' /}
+	{param type: 'button' /}
+{/call}
+```
+```html
+<clay-button label="Secondary" style="secondary" type="button"></clay-button>
+```
+```html
+<button class="btn btn-secondary" type="button">Secondary</button>
+```
+
+#### Link
+
+<button class="btn btn-link" type="button">Link</button>
+
+```soy
+{call ClayButton.render}
+	{param label: 'Link' /}
+	{param style: 'link' /}
+	{param type: 'button' /}
+{/call}
+```
+```html
+<clay-button label="Link" style="link" type="button"></clay-button>
+```
+```html
+<button class="btn btn-link" type="button">Link</button>
+```
+
+</article>
+
+<article id="states">
 
 ### States
 
@@ -171,28 +230,39 @@ Buttons communicate an action to happen on user interaction.
 
 ### Sizes
 
+#### Small
+
 <button class="btn btn-primary btn-sm" type="button">Small</button>
-<button class="btn btn-primary" type="button">Default</button>
 
 ```soy
 {call ClayButton.render}
 	{param label: 'Small' /}
 	{param size: 'sm' /}
 {/call}
+```
+```html
+<clay-button label="Small" size="sm"></clay-button>
+```
+```html
+<button class="btn btn-secondary btn-sm" type="button">Small</button>
+
+<button class="btn btn-secondary" type="button">Default</button>
+```
+
+#### Default
 
+<button class="btn btn-primary" type="button">Default</button>
+
+```soy
 {call ClayButton.render}
 	{param label: 'Default' /}
 {/call}
 ```
 ```html
-<clay-button label="Small" size="sm"></clay-button>
-
 <clay-button label="Default"></clay-button>
 ```
 ```html
-<button class="btn btn-secondary btn-sm" type="button">Small</button>
-
-<button class="btn btn-secondary" type="button">Default</button>
+<button class="btn btn-primary" type="button">Default</button>
 ```
 
 </article>

diff --git a/clayui.com/content/docs/components/cards.md b/clayui.com/content/docs/components/cards.md
@@ -1248,4 +1248,8 @@ Cards are a very specific visual representation of data.
 	[APITable "clay-card/src/ClayHorizontalCard.js"]
 </div>
 
+</article>
+
+<article id="more-examples">
+	More examples can be found in <a href="/docs/components/dataset-display.html">dataset template</a>.
 </article>
diff --git a/clayui.com/content/docs/components/dataset-display.md b/clayui.com/content/docs/components/dataset-display.md
diff --git a/clayui.com/content/docs/components/dropdowns.md b/clayui.com/content/docs/components/dropdowns.md
@@ -272,78 +272,6 @@ A dropdown is a list of options related to the element that triggers it.
 </div>
 ```
 
-#### Dropdown with Other Form Elements
-
-<div class="clay-site-dropdown-menu-container">
-	<ul aria-labelledby="theDropdownToggleId" class="dropdown-menu">
-		<li class="dropdown-section form-group">
-			<label for="basicInputTypeText1">
-				Text 1
-			</label>
-			<input class="form-control form-control-sm" id="basicInputTypeText1" placeholder="Placeholder" type="text">
-		</li>
-		<li class="dropdown-subheader">Form Section</li>
-		<li class="dropdown-section">
-			<div class="form-group">
-				<label for="basicInputTypeText2">
-					Text 2
-				</label>
-				<input class="form-control form-control-sm" id="basicInputTypeText2" placeholder="Placeholder" type="text">
-			</div>
-		</li>
-		<li class="dropdown-section">
-			<div class="form-group">
-				<label for="basicInputTypeText3">
-					Text 3
-				</label>
-				<input class="form-control form-control-sm" id="basicInputTypeText3" placeholder="Placeholder" type="text">
-			</div>
-			<div class="form-group">
-				<label for="basicInputTypeTextarea">Textarea</label>
-				<textarea class="form-control form-control-sm" id="basicInputTypeTextarea" placeholder="Placeholder"></textarea>
-			</div>
-		</li>
-		<li class="dropdown-subheader">Order by</li>
-		<li><a class="active dropdown-item" href="#1">Author</a></li>
-		<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Title Entry</a></li>
-	</ul>
-</div>
-
-```html
-<ul aria-labelledby="theDropdownToggleId" class="dropdown-menu">
-	<li class="dropdown-section form-group">
-		<label for="basicInputTypeText1">
-			Text 1
-		</label>
-		<input class="form-control form-control-sm" id="basicInputTypeText1" placeholder="Placeholder" type="text">
-	</li>
-	<li class="dropdown-subheader">Form Section</li>
-	<li class="dropdown-section">
-		<div class="form-group">
-			<label for="basicInputTypeText2">
-				Text 2
-			</label>
-			<input class="form-control form-control-sm" id="basicInputTypeText2" placeholder="Placeholder" type="text">
-		</div>
-	</li>
-	<li class="dropdown-section">
-		<div class="form-group">
-			<label for="basicInputTypeText3">
-				Text 3
-			</label>
-			<input class="form-control form-control-sm" id="basicInputTypeText3" placeholder="Placeholder" type="text">
-		</div>
-		<div class="form-group">
-			<label for="basicInputTypeTextarea">Textarea</label>
-			<textarea class="form-control form-control-sm" id="basicInputTypeTextarea" placeholder="Placeholder"></textarea>
-		</div>
-	</li>
-	<li class="dropdown-subheader">Order by</li>
-	<li><a class="active dropdown-item" href="#1">Author</a></li>
-	<li><a class="disabled dropdown-item" href="#1" tabindex="-1">Title Entry</a></li>
-</ul>
-```
-
 #### Dropdown with search field
 
 > Sometimes action menus face problems with the number of elements they contain. This dropdown menu variation helps in those contexts where the set of options is large and a search mechanism helps to reduce the search time and task complexity.