Merge pull request #2328 from MoizMasud/issue#2322

feat: Add switcher size

Author: zvonimirfras

src/content-switcher/content-switcher.component.ts

@@ -34,7 +34,12 @@ import { isFocusInLastItem, isFocusInFirstItem } from "carbon-components-angular
 		<div
 			[attr.aria-label]="ariaLabel"
 			class="bx--content-switcher"
-			[class.bx--content-switcher--light]="theme === 'light'"
+			[ngClass]="{
+				'bx--content-switcher--light': theme === 'light',
+				'bx--content-switcher--sm': size === 'sm',
+				'bx--content-switcher--md': size === 'md',
+				'bx--content-switcher--lg': size === 'lg'
+			}"
 			role="tablist">
 			<ng-content></ng-content>
 		</div>
@@ -47,6 +52,11 @@ export class ContentSwitcher implements AfterViewInit {
 	 */
 	@Input() theme: "light" | "dark" = "dark";
 
+	/**
+	 * Set content switcher size
+	 */
+	@Input() size: "sm" | "md" | "lg" = "md";
+
 	/**
 	 * Emits the activated `ContentSwitcherOption`
 	 */

src/content-switcher/content-switcher.stories.ts

@@ -17,15 +17,19 @@ storiesOf("Components|Content Switcher", module)
 	.addDecorator(withKnobs)
 	.add("Basic", () => ({
 		template: `
-			<ibm-content-switcher (selected)="selected($event)" [theme]="theme">
+			<ibm-content-switcher 
+				(selected)="selected($event)"
+				[theme]="theme"
+				[size]="size">
 				<button ibmContentOption name="First">First section</button>
 				<button ibmContentOption name="Second">Second section</button>
 				<button ibmContentOption name="Third">Third section</button>
 			</ibm-content-switcher>
 		`,
 		props: {
 			selected: action("selection changed"),
-			theme: select("theme", ["dark", "light"], "dark")
+			theme: select("theme", ["dark", "light"], "dark"),
+			size: select("size", ["sm", "md", "lg"], "md")
 		}
 	}))
 	.add("Documentation", () => ({