Merge pull request #250 from youda97/light-inline-codesnippet

feat(code-snippet): Add inline light style

Author: zvonimirfras

src/code-snippet/code-snippet.component.ts

@@ -96,6 +96,13 @@ export class CodeSnippet {
 	@Input() display: SnippetType = SnippetType.single;
 	@Input() translations = this.i18n.get().CODE_SNIPPET;
 
+	/**
+	 * Set to `"light"` to apply the light style on the code snippet.
+	 * @type {"light" | "dark"}
+	 * @memberof CodeSnippet
+	 */
+	@Input() theme: "light" | "dark" = "dark";
+
 	/**
 	 * Text displayed in the tooltip when user clicks button to copy code.
 	 *
@@ -122,6 +129,9 @@ export class CodeSnippet {
 	@HostBinding("class.bx--snippet--inline") get snippetInlineClass() {
 		return this.display === SnippetType.inline;
 	}
+	@HostBinding("class.bx--snippet--light") get snippetInlineLightClass() {
+		return this.display === SnippetType.inline && this.theme === "light";
+	}
 	@HostBinding("class.bx--btn--copy") get btnCopyClass() {
 		return this.display === SnippetType.inline;
 	}

src/code-snippet/code-snippet.stories.ts

@@ -66,4 +66,10 @@ storiesOf("CodeSnippet", module).addDecorator(
 		props: {
 			inlineCode
 		}
+	}))
+	.add("Inline Light", () => ({
+		template: `Here is some <ibm-code-snippet display="inline" theme="light">{{inlineCode}}</ibm-code-snippet> for you.`,
+		props: {
+			inlineCode
+		}
 	}));