chore: add ui-kit contribution guidelines to storybook (#2896)

* chore: add ui-kit contribution guidelines to storybook

* chore: add missing typescript description

storybook/src/components/index.ts

@@ -2,3 +2,4 @@ export * from './icon-search';
 export * from './token-group';
 export * from './token-key-val';
 export * from './decision-group';
+export * from './submit-issue-button';

storybook/src/components/submit-issue-button.tsx

@@ -0,0 +1,23 @@
+import SecondaryButton from '@commercetools-uikit/secondary-button';
+import { PlusBoldIcon } from '@commercetools-uikit/icons';
+
+type TProps = {
+  /** the issue-button's label */
+  label: string;
+  /** the github template name */
+  template: string;
+};
+
+export const SubmitIssueButton: React.FC<TProps> = ({ label, template }) => {
+  return (
+    <SecondaryButton
+      as="a"
+      iconLeft={<PlusBoldIcon />}
+      label={label}
+      href={`https://github.com/commercetools/ui-kit/issues/new?assignees=&labels=&projects=&template=${template}`}
+      target="_blank"
+      rel="noopener noreferrer"
+      size="20"
+    />
+  );
+};

storybook/src/docs/contributon-guidelines/index.mdx

@@ -0,0 +1,64 @@
+import { Meta, Markdown } from '@storybook/blocks';
+import { SubmitIssueButton } from '@/storybook-helpers';
+import Image1 from './img/improving-the-documentation.png';
+import Image2 from './img/reporting-a-bug.png';
+import Image3 from './img/adding-or-improving-a-component.png';
+
+<Meta title="Home/Contribution Guidelines" />
+
+# Contributing to ui-kit
+
+We welcome and encourage contributions from anyone!
+
+Contributions commonly fall into one of the following categories:
+
+- [Improve the documentation](#improving-the-documentation)
+- [Report a bug](#reporting-a-bug)
+- [Add or improve a component](#adding-or-improving-a-component)
+
+> **Timelines and expectations** The design system pod is a relatively small team that manages several initiatives,
+> so please be patient with us as we work to triage requests and the related work! Whenever possible, we will share
+> our expectations of when contributors can expect PR reviews or alignment on the next phase of the given process.
+
+<br/><br/>
+
+## Improving the documentation
+
+<img src={Image1} style={{float: 'right',  display:'inline-block', marginLeft: '2em', maxWidth: 320}} alt="A flowchart depicting the process for updating documentation." />
+
+1. Fill out our update documentation form(link).
+2. When you submit the form, an issue will be created and triaged by our team to determine if the documentation should be updated as requested.
+3. If there is agreement that the proposed change is valuable, the contributing team will open a PR to be reviewed by the design system pod.
+4. When the work is approved, the PR will be merged, and the updated documentation will be live!
+
+<a href="" className=""></a>
+<SubmitIssueButton label="Submit a documentation issue" template="improve_documentation.md"/>
+
+<div style={{clear: 'both'}}/>
+
+## Reporting a bug
+
+<img src={Image2} style={{float: 'right',  display:'inline-block', marginLeft: '2em', maxWidth: 320}} alt="A flowchart depicting the process for submitting a bug report." />
+
+1. Fill out our bug report form(link) in order to tell us about the bug, in as much detail as possible.
+2. When you submit the form, an issue will be created and triaged by our team to determine if this bug needs a fix, or if it will be fixed by an overlapping or in-flight initiative.
+3. If the bug is likely to be taken care of soon, we’ll update the request, and link to the appropriate issue before closing the request.
+4. If the bug is in need of a fix, we’ll update the request and decide whether the design system pod or the requesting party will create a PR to be reviewed by the team. We will provide an estimated response time for our review and coordinate with the design team where necessary.
+5. Once approved, we will close the issue and the fix will be included in the next release of ui-kit!
+
+<SubmitIssueButton label="Report a bug" template="bug_report.md"/>
+
+<div style={{clear: 'both'}}/>
+
+## Adding or improving a component
+
+<img src={Image3} style={{float: 'right',  display:'inline-block', marginLeft: '2em', maxWidth: 480}} alt="A flowchart depicting the process for adding/updating a component." />
+
+1. Submit our proposal form(link). Given that this work could require a larger effort, we’ll need a bit more information up front, but these details will help us decide on the best path forward.
+2. When you submit the form, an issue will be created and triaged by our team to determine if a new component is needed, if an existing component can be updated to meet additional use cases, or if the proposed change may be completed in another initiative. If the decision is made to proceed with the requested work, we will begin to gather requirements and coordinate a meeting to align on those requirements.
+3. When there is agreement on the requirements, our designer will work with us to identify the impact the proposed changes could have on other components, existing implementations, and other use cases within the design system.
+4. If the proposed change is a new component, the required design work will begin.
+5. When an agreement is reached on the design, we will coordinate an engineering handoff to review the design and decide whether the design system pod or the contributing team will create a PR to be reviewed by the design system pod.
+6. Once the work is completed and the design system pod has signed off, we will add or update the documentation for the component, and the work will be included in the next release of ui-kit!
+
+<SubmitIssueButton label="Request a feature" template="feature_request.md"/>