From c9dd49517076792f54f99c0f210204d73933587d Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sat, 16 Oct 2021 00:47:05 +0900
Subject: [PATCH] Update contributor docs

---
 packages/components/CONTRIBUTING.md | 48 +++++++++++++++++++----------
 1 file changed, 31 insertions(+), 17 deletions(-)

diff --git a/packages/components/CONTRIBUTING.md b/packages/components/CONTRIBUTING.md
index 088f56f43d6bb..8dab3b4d50f9b 100644
--- a/packages/components/CONTRIBUTING.md
+++ b/packages/components/CONTRIBUTING.md
@@ -8,17 +8,21 @@ This set of guidelines should apply especially to newly introduced components. I
 
 For an example of a component that follows these requirements, take a look at [`ItemGroup`](/packages/components/src/item-group).
 
-- [Compatibility](#compatibility)
-- [Compound components](#compound-components)
-- [Components & Hooks](#components--hooks)
-- [TypeScript](#typescript)
-- [Styling](#styling)
-- [Context system](#context-system)
-- [Unit tests](#unit-tests)
-- [Storybook](#storybook)
-- [Documentation](#documentation)
-- [README example](#README-example)
-- [Folder structure](#folder-structure)
+- [Contributing](#contributing)
+	- [Compatibility](#compatibility)
+	- [Compound components](#compound-components)
+	- [Components & Hooks](#components--hooks)
+	- [TypeScript](#typescript)
+	- [Styling](#styling)
+	- [Context system](#context-system)
+	- [Unit tests](#unit-tests)
+	- [Storybook](#storybook)
+	- [Documentation](#documentation)
+	- [README example](#readme-example)
+	- [Props](#props)
+		- [`propName`: Typescript style type i.e `string`, `number`, `( nextValue: string ) => void`](#propname-typescript-style-type-ie-string-number--nextvalue-string---void)
+		- [Inherited props](#inherited-props)
+	- [Context](#context)
 
 ## Compatibility
 
@@ -277,14 +281,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)).