Storybook: Enable Controls and disable Knobs by default (#35682)

* Storybook: Add Controls

* Disable Knobs by default

* Enable Knobs where currently used

* Update contributor docs

* Revert TOC

package.json

@@ -96,6 +96,7 @@
 		"@octokit/rest": "16.26.0",
 		"@octokit/webhooks": "7.1.0",
 		"@storybook/addon-a11y": "6.3.2",
+		"@storybook/addon-controls": "6.3.12",
 		"@storybook/addon-docs": "6.3.2",
 		"@storybook/addon-knobs": "6.2.9",
 		"@storybook/addon-storysource": "6.3.2",

packages/components/CONTRIBUTING.md

@@ -277,14 +277,24 @@ import Button from '../';
 
 export default { title: 'Components/Button', component: Button };
 
-export const _default = () => <Button>Default Button</Button>;
-
-export const primary = () => <Button variant="primary">Primary Button</Button>;
-
-export const secondary = () => <Button variant="secondary">Secondary Button</Button>;
+const Template = ( args ) => <Button { ...args } />;
+
+export const Default = Template.bind( {} );
+Default.args = {
+	text: 'Default Button',
+	isBusy: false,
+	isSmall: false,
+};
+
+export const Primary = Template.bind( {} );
+Primary.args = {
+	...Default.args,
+	text: 'Primary Button',
+	variant: 'primary',
+};
 ```
 
-A great tool to use when writing stories is the [Storybook Controls addon](https://storybook.js.org/addons/@storybook/addon-controls). Ideally props should be exposed by using this addon, which provides a graphical UI to interact dynamically with the component without needing to write code.
+A great tool to use when writing stories is the [Storybook Controls addon](https://storybook.js.org/addons/@storybook/addon-controls). Ideally props should be exposed by using this addon, which provides a graphical UI to interact dynamically with the component without needing to write code. Avoid using [Knobs](https://storybook.js.org/addons/@storybook/addon-knobs) for new stories, as this addon is deprecated.
 
 The default value of each control should coincide with the default value of the props (i.e. it should be `undefined` if a prop is not required). A story should, therefore, also explicitly show how values from the Context System are applied to (sub)components. A good example of how this may look like is the [`Card` story](https://wordpress.github.io/gutenberg/?path=/story/components-card--default) (code [here](/packages/components/src/card/stories/index.js)).
 

packages/components/src/alignment-matrix-control/stories/index.js

@@ -19,6 +19,9 @@ const alignmentOptions = ALIGNMENTS.reduce( ( options, item ) => {
 export default {
 	title: 'Components/AlignmentMatrixControl',
 	component: AlignmentMatrixControl,
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 export const _default = () => {