chore: Add heading example

[saideepesh000]

Hai @diegohaz , I want to contribute to this project.

This PR adds heading example for #939

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

ariakit – ./

🔍 Inspect: https://vercel.com/ariakit/ariakit/BgxckM5TFiTRa4EXYUyMbHzPJV8b
✅ Preview: https://ariakit-git-fork-saideepesh000-example-heading-ariakit.vercel.app

reakit – ./

🔍 Inspect: https://vercel.com/ariakit/reakit/EromTBpZtyyyV6C6netAFBc6hBDk
✅ Preview: Canceled

[Deployment for e73f329 canceled]

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[codecov]

Codecov Report

Merging #946 (e73f329) into v2 (99e0377) will increase coverage by 0.37%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##               v2     #946      +/-   ##
==========================================
+ Coverage   33.02%   33.39%   +0.37%     
==========================================
  Files         145      146       +1     
  Lines        4061     4063       +2     
  Branches     1153     1153              
==========================================
+ Hits         1341     1357      +16     
+ Misses       2719     2705      -14     
  Partials        1        1              

Impacted Files	Coverage Δ
...ariakit/src/heading/__examples__/heading/index.tsx	100.00% <100.00%> (ø)
packages/ariakit/src/heading/heading.ts	100.00% <0.00%> (+100.00%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 99e0377...e73f329. Read the comment docs.

[diegohaz]

Nice! heading-container is not a valid role though.

Suggested change

	<HeadingLevel>
	<div role="heading-container" className="headingContainer">
	<Heading>Lacus Et Semper Turpis Massa Commodo Cum</Heading>
	<p>Torquent penatibus ipsum nascetur cursus primis lobortis</p>
	<HeadingLevel>
	<Heading>Ac Nullam</Heading>
	<p>Volutpat metus id purus dignissim fusce Tellus egestas.</p>
	</HeadingLevel>
	<HeadingLevel>
	<Heading>Quis Placerat</Heading>
	<p>Platea justo lectus. Praesent. Et sodales pellentesque</p>
	</HeadingLevel>
	</div>
	</HeadingLevel>
	<div className="wrapper">
	<HeadingLevel>
	<Heading>Lacus Et Semper Turpis Massa Commodo Cum</Heading>
	<p>Torquent penatibus ipsum nascetur cursus primis lobortis</p>
	<HeadingLevel>
	<Heading>Ac Nullam</Heading>
	<p>Volutpat metus id purus dignissim fusce Tellus egestas.</p>
	</HeadingLevel>
	<HeadingLevel>
	<Heading>Quis Placerat</Heading>
	<p>Platea justo lectus. Praesent. Et sodales pellentesque</p>
	</HeadingLevel>
	</HeadingLevel>
	</div>

[diegohaz]

Updating the wrapper class and some formatting. It would be awesome if prettier worked on CSS files.

Suggested change

	.headingContainer{
	@apply flex flex-col
	}
	h1{
	@apply text-xl
	}
	h2{
	@apply text-lg mt-4
	}
	h3{
	@apply text-base mt-4
	}
	.wrapper {
	@apply flex flex-col
	}
	h1 {
	@apply text-xl
	}
	h2 {
	@apply text-lg mt-4
	}
	h3 {
	@apply text-base mt-4
	}

[diegohaz]

Suggested change

	render(<Example />);
	expect(getByRole("heading-container")).toMatchInlineSnapshot(`
	const { container } = render(<Example />);
	expect(container).toMatchInlineSnapshot(`

[saideepesh000]

Thanks for your suggestions @diegohaz , made all the changes, one final time(hopefully :))

[diegohaz]

This looks good! Thank you @saideepesh000!

[ariakit-bot]

Thanks a lot for contributing!

Based on our community guidelines, every person who has a PR of any kind merged is offered an invitation to the Reakit organization.

Should you accept, you'll get write access to the main repository and a fancy Reakit logo on your GitHub profile. You'll be able to label and close issues, create new branches etc. Make sure to read our contribution and community guidelines, which explains all of this in more detail.

If you have any questions, let me know!