Merge branch 'master' into dependabot/npm_and_yarn/integration/ng16/babel/traverse-7.23.2

Author: Akshat55

.storybook/main.js

@@ -10,7 +10,8 @@ module.exports = {
 				backgrounds: false
 			}
 		},
-		"@storybook/addon-a11y"
+		"@storybook/addon-a11y",
+		"@storybook/addon-storysource"
 	],
 	framework: {
 		name: "@storybook/angular",

.storybook/preview.scss

@@ -6,6 +6,14 @@ html {
 	@include styles.theme(styles.$white);
 }
 
+.innerZoomElementWrapper {
+	min-width: 55rem;
+}
+
+.docblock-argstable {
+	margin-bottom: 10rem;
+}
+
 /*
  * Story batch styling, we are wrapping the storybook decorator function to ensure
  * styles do not leak to other components

integration/ng14/package-lock.json

@@ -86,12 +86,13 @@
     "@commitlint/cli": "17.0.3",
     "@commitlint/config-conventional": "17.0.3",
     "@compodoc/compodoc": "1.1.21",
-    "@storybook/addon-a11y": "7.0.18",
-    "@storybook/addon-actions": "7.0.18",
-    "@storybook/addon-essentials": "7.0.18",
-    "@storybook/addon-links": "7.0.18",
-    "@storybook/angular": "7.0.18",
-    "@storybook/theming": "7.0.18",
+    "@storybook/addon-a11y": "7.6.7",
+    "@storybook/addon-actions": "7.6.7",
+    "@storybook/addon-essentials": "7.6.7",
+    "@storybook/addon-links": "7.6.7",
+    "@storybook/addon-storysource": "7.6.7",
+    "@storybook/angular": "7.6.7",
+    "@storybook/theming": "7.6.7",
     "@types/jasmine": "3.8.0",
     "@types/node": "12.20.55",
 	"@types/resize-observer-browser": "^0.1.7",
@@ -126,7 +127,7 @@
     "sass": "1.57.0",
     "sass-loader": "13.2.0",
     "semantic-release": "17.2.3",
-    "storybook": "7.0.18",
+    "storybook": "7.6.7",
     "ts-helpers": "1.1.2",
     "tslint": "6.1.3",
     "typescript": "4.6.4",

package-lock.json

@@ -8,6 +8,12 @@ import {
 import { AccordionItem } from "./accordion-item.component";
 
 /**
+ * Get started with importing the module:
+ *
+ * ```typescript
+ * import { AccordionModule } from 'carbon-components-angular';
+ * ```
+ *
  * [See demo](../../?path=/story/components-accordion--basic)
  */
 @Component({

package.json

@@ -1,6 +1,6 @@
 /* tslint:disable variable-name */
 
-import { moduleMetadata, Meta, Story  } from "@storybook/angular";
+import { moduleMetadata, Meta } from "@storybook/angular";
 import { DocumentationModule } from "../documentation-component/documentation.module";
 import { AccordionModule, Accordion } from "./";
 
@@ -10,10 +10,11 @@ export default {
 		moduleMetadata({
 			imports: [AccordionModule, DocumentationModule]
 		})
-	]
+	],
+	component: Accordion
 } as Meta;
 
-const Template: Story<Accordion> = (args) => ({
+const Template = (args) => ({
 	props: args,
 	template: `
 		<cds-accordion [align]="align" [size]="size">
@@ -51,7 +52,7 @@ Basic.argTypes = {
 	selected: { action: "Selected" }
 };
 
-const WithTitleTemplate: Story<Accordion> = (args) => ({
+const WithTitleTemplate = (args) => ({
 	props: args,
 	template: `
 		<div style="width: 500px">
@@ -85,7 +86,7 @@ WithTitle.parameters = {
 	}
 };
 
-const WithSkeleton: Story<Accordion> = (args) => ({
+const WithSkeleton = (args) => ({
 	props: args,
 	template: `
 		<div style="width: 500px">

src/accordion/accordion.component.ts

@@ -18,7 +18,13 @@ import { I18n } from "carbon-components-angular/i18n";
 const MINIMUM_OVERFLOW_THRESHOLD = 4;
 
 /**
- *  [See demo](../../?path=/story/components-breadcrumb--basic)
+ * Get started with importing the module:
+ *
+ * ```typescript
+ * import { BreadcrumbModule } from 'carbon-components-angular';
+ * ```
+ *
+ * [See demo](../../?path=/story/components-breadcrumb--basic)
  */
 @Component({
 	selector: "cds-breadcrumb, ibm-breadcrumb",

src/accordion/accordion.stories.ts

@@ -1,6 +1,6 @@
 /* tslint:disable variable-name */
 
-import { moduleMetadata, Meta, Story  } from "@storybook/angular";
+import { moduleMetadata, Meta } from "@storybook/angular";
 import {
 	BreadcrumbModule,
 	Breadcrumb,
@@ -30,22 +30,24 @@ export default {
 			imports: [BreadcrumbModule]
 		})
 	],
+	args: {
+		noTrailingSlash: true,
+		skeleton: false
+	},
 	argTypes: {
 		noTrailingSlash: {
-			type: "boolean",
-			defaultValue: true
+			type: "boolean"
 		},
 		skeleton: {
 			type: "boolean",
-			defaultValue: false,
 			control: false
 		}
 	},
 	component: Breadcrumb,
 	subcomponents: { BreadcrumbItemComponent }
 } as Meta;
 
-const Template: Story<Breadcrumb> = (args) => ({
+const Template = (args) => ({
 	props: args,
 	template: `
 		<cds-breadcrumb [noTrailingSlash]="noTrailingSlash">
@@ -63,7 +65,7 @@ const Template: Story<Breadcrumb> = (args) => ({
 });
 export const Basic = Template.bind({});
 
-const CurrentPageTemplate: Story<Breadcrumb> = (args) => ({
+const CurrentPageTemplate = (args) => ({
 	props: args,
 	template: `
 		<cds-breadcrumb>
@@ -86,7 +88,7 @@ CurrentPage.parameters = {
 	}
 };
 
-const ModelTemplate: Story<Breadcrumb> = (args) => ({
+const ModelTemplate = (args) => ({
 	props: {
 		...args,
 		createBreadcrumbItems
@@ -107,7 +109,7 @@ Model.args = {
 	content: "breadcrumb"
 };
 
-const ModelWTemplate: Story<Breadcrumb> = (args) => ({
+const ModelWTemplate = (args) => ({
 	props: {
 		...args,
 		createBreadcrumbItems,
@@ -132,7 +134,7 @@ ModelWithTemplate.args = {
 	content: "breadcrumb"
 };
 
-const WithSkeleton: Story<Breadcrumb> = (args) => ({
+const WithSkeleton = (args) => ({
 	props: args,
 	template: `
 		<cds-breadcrumb skeleton="true" [noTrailingSlash]="noTrailingSlash">

src/breadcrumb/breadcrumb.component.ts

@@ -1,5 +1,14 @@
 import { Component, HostBinding } from "@angular/core";
 
+/**
+ * Get started with importing the module:
+ *
+ * ```typescript
+ * import { ButtonModule } from 'carbon-components-angular';
+ * ```
+ *
+ * [See demo](../../?path=/story/components-button-button-set--basic)
+ */
 @Component({
 	selector: "cds-button-set, ibm-button-set",
 	template: "<ng-content></ng-content>"