Merge branch 'next' into issue-2498

Author: Akshat55

.github/workflows/check-build.yml

@@ -41,7 +41,7 @@ jobs:
 
     strategy:
       matrix:
-        angular-version: [13, 14, 15]
+        angular-version: [14, 15]
         node-version: [16.x]
 
     steps:

.storybook/main.js

@@ -1,11 +1,7 @@
 const path = require('path');
-
 module.exports = {
 	staticDirs: ["public"],
-	stories: [
-		"../src/**/*.stories.mdx",
-		"../src/**/*.stories.@(js|jsx|ts|tsx)"
-	],
+	stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
 	addons: [
 		"@storybook/addon-links",
 		{
@@ -14,39 +10,16 @@ module.exports = {
 				backgrounds: false
 			}
 		},
-		{
-			name: '@storybook/addon-storysource',
-			options: {
-				rule: {
-					test: [/\.stories\.ts$/, /index\.ts$/],
-					include: [path.resolve(__dirname, '../src')]
-				},
-				loaderOptions: {
-					injectStoryParameters: true,
-					prettierConfig: { printWidth: 80, singleQuote: false }
-				}
-			}
-		},
 		"@storybook/addon-a11y"
 	],
-	framework: "@storybook/angular",
+	framework: {
+		name: "@storybook/angular",
+		options: {}
+	},
 	core: {
-		builder: "webpack5",
 		disableTelemetry: true
 	},
-	webpackFinal: async config => {
-		config.module.rules.push({
-			test: [/\.stories\.ts$/, /index\.ts$/],
-			include: [path.resolve(__dirname, '../src')],
-			use: [
-				{
-					loader: require.resolve('@storybook/source-loader'),
-					options: { parser: 'typescript' }
-				}
-			],
-			enforce: 'pre'
-		});
-
-		return config;
+	docs: {
+		autodocs: true
 	}
-}
+};

.storybook/preview.js

@@ -23,14 +23,19 @@ components = components.map(comp => ({
 		...input,
 		// Storybook does not seem to display deprecated message currently
 		// Bypassing this by updating rawdescription
-		rawdescription: input.deprecated ? `**@Deprecatated**\n\n${input.deprecationMessage}` : input.rawdescription
+		// Using `description` to display formatted code
+		rawdescription: input.deprecated ? `**@Deprecatated**\n\n${input.deprecationMessage}` : input.description
 	})),
 	// Removes properties
 	propertiesClass: [],
 	outputsClass: comp.outputsClass.map((output) => ({
 		...output,
 		// Prevents control type appearing as `string`
-		defaultValue: undefined
+		defaultValue: undefined,
+		// Storybook does not seem to display deprecated message currently
+		// Bypassing this by updating rawdescription
+		// Using `description` to display formatted code
+		rawdescription: output.deprecated ? `**@Deprecatated**\n\n${output.deprecationMessage}` : output.description
 	}))
 }));
 

README.md

@@ -29,13 +29,13 @@ Assuming we're starting with a new @angular/cli project:
 ```shell
 $ npx @angular/cli new my-project --style=scss
 $ cd my-project
-$ npm i --save carbon-components-angular carbon-components
+$ npm i --save carbon-components-angular @carbon/styles
 ```
 
 Then we need to include carbon-components in `src/styles.scss`:
 
 ```scss
-@import "~carbon-components/scss/globals/scss/styles.scss";
+@use "@carbon/styles";
 ```
 
 > *Note:* For offline usage we'll need to set `$font-path: '~carbon-components/src/globals/fonts';` at the very top of our `src/styles.scss`. This will copy the fonts to our `dist` folder upon successful build. If you like the fonts to be a part of your `assets` folder and not pollute the `dist` folder then copy the fonts from `node_modules/carbon-components/src/globals/fonts` into our app's `src/assets/fonts` folder and add `$font-path: '/assets/fonts/';` at the very top of our `src/styles.scss`.
@@ -64,7 +64,7 @@ Angular version support matrix:
 | 10      | ❌ | ✅ | ❌                   |
 | 11      | ❌ | ✅ | ❌                   |
 | 12      | ❌ | ✅ | ❌                   |
-| 13      | ❌ | ✅ | ✅                   |
+| 13      | ❌ | ✅ | ❌                   |
 | 14      | ❌ | ✅ | ✅                   |
 
 Carbon Components Angular version support matrix:

angular.json

@@ -91,7 +91,6 @@
 			}
 		}
 	},
-	"defaultProject": "carbon-components-angular",
 	"schematics": {
 		"@schematics/angular:component": {
 			"prefix": "ibm",