Update stories

Author: youda97

src/search/search.stories.ts

@@ -11,9 +11,7 @@ storiesOf("Search", module).addDecorator(
 	.addDecorator(withKnobs)
 	.add("Basic", () => ({
 		template: `
-		<div style="width: 250px;">
 			<ibm-search [theme]="theme" [placeholder]="placeholder" [disabled]="disabled" [size]="size"></ibm-search>
-		</div>
 		`,
 		props: {
 			size: select("size", ["lg", "sm"], "lg"),

src/select/select.component.ts

@@ -28,14 +28,16 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 	selector: "ibm-select",
 	template: `
 		<div class="bx--form-item">
+			<label *ngIf="skeleton" [attr.for]="id" class="bx--label bx--skeleton"></label>
 			<div
 				[ngClass]="{
 					'bx--select--inline': display === 'inline',
-					'bx--select--light': theme === 'light'
+					'bx--select--light': theme === 'light',
+					'bx--skeleton': skeleton
 				}"
 				class="bx--select"
 				style="width: 100%">
-				<label [attr.for]="id" class="bx--label">{{label}}</label>
+				<label *ngIf="!skeleton" [attr.for]="id" class="bx--label">{{label}}</label>
 				<select
 					#select
 					[attr.id]="id"
@@ -44,7 +46,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 					class="bx--select-input">
 					<ng-content></ng-content>
 				</select>
-				<svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
+				<svg *ngIf="!skeleton" class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
 				<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
 				</svg>
 			</div>
@@ -80,6 +82,10 @@ export class Select implements ControlValueAccessor {
 	 * Set to true to disable component.
 	 */
 	@Input() disabled = false;
+	/**
+	 * Set to true for a loading select.
+	 */
+	@Input() skeleton = false;
 	/**
 	 * `light` or `dark` select theme
 	 */

src/select/select.stories.ts

@@ -48,4 +48,11 @@ storiesOf("Select", module).addDecorator(
 		props: {
 			model: "default"
 		}
+	}))
+	.add("Skeleton", () => ({
+		template: `
+		<div style="width: 300px">
+			<ibm-select skeleton="true"></ibm-select>
+		</div>
+		`
 	}));

src/structured-list/structured-list.stories.ts

@@ -86,7 +86,7 @@ storiesOf("Structured List", module).addDecorator(
 		`,
 		props: {
 			selected: action("row selected"),
-			border: boolean("border", false),
+			border: boolean("border", true),
 			condensed: boolean("condensed", false),
 			nowrap: boolean("nowrap", false)
 		}
@@ -130,7 +130,7 @@ storiesOf("Structured List", module).addDecorator(
 			<p>{{valueSelected}}</p>
 		`,
 		props: {
-			border: boolean("border", false),
+			border: boolean("border", true),
 			condensed: boolean("condensed", false),
 			nowrap: boolean("nowrap", false)
 		}