feat: Add missing functionality to code-snippet

src/fragment-components/a-code-snippet.tsx

@@ -1,5 +1,10 @@
 import React, { useState } from 'react';
-import { Dropdown, TextInput, CodeSnippet } from 'carbon-components-react';
+import {
+	Dropdown,
+	TextInput,
+	CodeSnippet,
+	Checkbox
+} from 'carbon-components-react';
 import { AComponent } from './a-component';
 import { css } from 'emotion';
 import { ComponentInfo } from '.';
@@ -25,6 +30,15 @@ export const ACodeSnippetSettingsUI = ({ selectedComponent, setComponent }: any)
 	const [codeLanguage, setCodeLanguage] = useState('text');
 
 	return <>
+		<Checkbox
+			labelText='Light theme'
+			id='theme-select'
+			checked={selectedComponent.light}
+			onChange={(checked: any) => setComponent({
+				...selectedComponent,
+				light: checked
+		})} />
+
 		<Dropdown
 			label='Code language selector'
 			titleText='Code language selector'
@@ -33,17 +47,19 @@ export const ACodeSnippetSettingsUI = ({ selectedComponent, setComponent }: any)
 			selectedItem={languages.find(item => item.id === codeLanguage)}
 			itemToString={(item: any) => (item ? item.text : '')}
 			onChange={(event: any) => setCodeLanguage(event.selectedItem.id)} />
+
 		<label className='bx--label'>Code</label>
 		<ControlledEditor
 			language={codeLanguage} height="10rem"
 			value={selectedComponent.code}
 			options= {{ quickSuggestions: false }}
 			onChange= {(_, value: any) => {
 				setComponent({
-					...selectedComponent,
-					code: value
-				});
-			}} />
+				...selectedComponent,
+				code: value
+			});
+		}} />
+
 		<Dropdown
 			label='Variant selector'
 			titleText='Variant selector'
@@ -80,6 +96,7 @@ export const ACodeSnippet = ({
 		rejectDrop={true}
 		{...rest}>
 			<CodeSnippet
+			light={componentObj.light}
 			type={componentObj.variant}
 			className={componentObj.cssClasses?.map((cc: any) => cc.id).join(' ')}>
 				{componentObj.code}
@@ -98,17 +115,20 @@ export const componentInfo: ComponentInfo = {
 	defaultComponentObj: {
 		type: 'code-snippet',
 		variant: 'single',
-		code: ''
+		code: '',
+		light: false
 	},
 	image,
 	codeExport: {
 		angular: {
 			inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Type = "${json.variant}"
+			@Input() ${nameStringToVariableString(json.codeContext?.name)}Theme = "${json.light ? 'light' : 'dark'}"
 				@Input() ${nameStringToVariableString(json.codeContext?.name)}Code = \`${json.code}\``,
 			outputs: () => '',
 			imports: ['CodeSnippetModule'],
 			code: ({ json }) => {
 				return `<ibm-code-snippet
+					[theme]="${nameStringToVariableString(json.codeContext?.name)}Theme"
 					display={{${nameStringToVariableString(json.codeContext?.name)}Type}}>{{
 						${nameStringToVariableString(json.codeContext?.name)}Code
 					}}</ibm-code-snippet>`;
@@ -118,6 +138,7 @@ export const componentInfo: ComponentInfo = {
 			imports: ['CodeSnippet'],
 			code: ({ json }) => {
 				return `<CodeSnippet
+					light={${json.light}}
 					type="${json.variant}">{\`${json.code}\`}
 				</CodeSnippet>`;
 			}

src/routes/edit/share-options/exports/frameworks/angular-fragment.ts

@@ -314,8 +314,8 @@ export const createAngularApp = (fragment: any, fragments: any[]) => {
 			'tslib': '2.3.0',
 			'sass': '1.45.0',
 			'zone.js': '0.11.4',
-			'carbon-components-angular': '4.56.3',
-			'carbon-components': '10.50.0'
+			'carbon-components-angular': '4.63.0',
+			'carbon-components': '10.58.0'
 		}
 	};
 

src/routes/edit/share-options/exports/frameworks/react-fragment.ts

@@ -233,7 +233,7 @@ ReactDOM.render(<App />, document.getElementById('root'));
 `;
 	const packageJson = {
 		dependencies: {
-			'carbon-components': '10.50.0',
+			'carbon-components': '10.58.0',
 			'carbon-icons': '7.0.7',
 			'@carbon/icons-react': '10.15.0',
 			'carbon-components-react': '7.50.0',

src/ui-fragment/src/components/ui-code-snippet.tsx

@@ -8,6 +8,7 @@ export interface CodeSnippetState {
 	code: string;
 	id: string | number;
 	cssClasses?: CssClasses[];
+	light: boolean;
 	codeContext?: {
 		name: string;
 	};
@@ -24,6 +25,7 @@ export const UICodeSnippet = ({ state }: {
 	}
 
 	return <CodeSnippet
+	light={state.light}
 	type={state.variant}
 	className={state.cssClasses?.map((cc: any) => cc.id).join(' ')}>
 		{state.code}