Skip to content

Commit e4f2df0

Browse files
segunadebayosegunadebayo
committedJun 3, 2024·
feat: add prose component
·
@chakra-ui/utils@3.0.0-next.23@chakra-ui/charts@3.15.0
1 parent 2f6e405 commit e4f2df0

File tree

5 files changed

+412
-7
lines changed

5 files changed

+412
-7
lines changed
 

‎.changeset/unlucky-apples-sing.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@chakra-ui/react": minor
3+
---
4+
5+
Add `Prose` component to help style markdown content.

‎packages/react/__stories__/prose.stories.tsx

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import { Prose } from "../src"
2+
3+
export default {
4+
title: "Typography / Prose",
5+
}
6+
7+
const code = `
8+
<h1>Title Heading 1</h1>
9+
<h2>Title Heading 2</h2>
10+
<h3>Title Heading 3</h3>
11+
<h4>Title Heading 4</h4>
12+
13+
<h4>Title Heading 4 <code>testing</code></h4>
14+
15+
<p>
16+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at dolor
17+
nec ex rutrum semper. Praesent ultricies purus eget lectus tristique
18+
egestas ac in lacus. Nulla eleifend lorem risus, sit amet dictum nisi
19+
gravida eget. Suspendisse odio sem, scelerisque congue luctus nec,
20+
scelerisque ultrices orci. Praesent tincidunt, risus ut commodo cursus,
21+
ligula orci tristique justo, vitae sollicitudin lacus risus dictum orci.
22+
23+
Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy
24+
</p>
25+
26+
<p>
27+
Vivamus vel enim at lorem ultricies faucibus. Cras vitae ipsum ut quam
28+
varius dignissim a ac tellus. Aliquam maximus mauris eget tincidunt
29+
interdum. Fusce vitae massa non risus congue tincidunt. Pellentesque
30+
maximus elit quis eros lobortis dictum.
31+
</p>
32+
33+
<hr />
34+
35+
<p>
36+
Fusce placerat ipsum vel sollicitudin imperdiet. Morbi vulputate non
37+
diam at consequat. Donec vitae sem eu arcu auctor scelerisque vel in
38+
turpis. Pellentesque dapibus justo dui, quis egestas sapien porttitor
39+
in.
40+
</p>
41+
42+
<h3>Blockquotes</h3>
43+
<blockquote>This is a good looking blockquote!</blockquote>
44+
<p>And it can span into multiple lines:</p>
45+
<blockquote>
46+
Fusce placerat ipsum vel sollicitudin imperdiet. Morbi vulputate non
47+
diam at consequat. Donec vitae sem eu arcu auctor scelerisque vel in
48+
turpis. Pellentesque dapibus justo dui, quis egestas sapien porttitor
49+
in.
50+
</blockquote>
51+
<p>
52+
There&apos;s also <strong>strong</strong>, <b>b</b>, <em>em</em> support
53+
as well! But, let&apos;s display some code!
54+
</p>
55+
<h3>Code</h3>
56+
<pre><code>&lt;article&gt;
57+
&lt;h4&gt;Title Heading 4&lt;/h4&gt;
58+
&lt;p&gt;
59+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at dolor nec ex rutrum semper. Praesent ultricies purus eget lectus
60+
tristique egestas ac in lacus. Nulla eleifend lorem risus, sit amet dictum nisi gravida eget. Suspendisse odio sem, scelerisque congue
61+
luctus nec, scelerisque ultrices orci. Praesent tincidunt, risus ut commodo cursus, ligula orci tristique justo, vitae sollicitudin lacus risus dictum orci.
62+
&lt;/p&gt;
63+
&lt;/article&gt;</code></pre>
64+
<p>
65+
Sometimes you&apos;d want to use <code>console.log</code>, and that
66+
would be just fine!
67+
</p>
68+
<h3>Links</h3>
69+
<p>
70+
If you want to learn more,
71+
<a href="https://chakra-ui.com">check out our docsite</a>!
72+
</p>
73+
<h3>Figure</h3>
74+
<p>
75+
Fusce placerat ipsum vel sollicitudin imperdiet. Morbi vulputate non
76+
diam at consequat. Donec vitae sem eu arcu auctor scelerisque vel in
77+
turpis. Pellentesque dapibus justo dui, quis egestas sapien porttitor
78+
in.
79+
</p>
80+
<figure>
81+
<img
82+
alt="Lagos, Nigeria"
83+
src="https://images.unsplash.com/photo-1593717191400-84f38ee95485?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2048&q=100"
84+
/>
85+
<figcaption>Lagos, Nigeria</figcaption>
86+
</figure>
87+
<p>
88+
Fusce placerat ipsum vel sollicitudin imperdiet. Morbi vulputate non
89+
diam at consequat. Donec vitae sem eu arcu auctor scelerisque vel in
90+
turpis. Pellentesque dapibus justo dui, quis egestas sapien porttitor
91+
in.
92+
</p>
93+
<h3>Lists</h3>
94+
<p>Let's look at some unordered lists. Things to buy:</p>
95+
<ul>
96+
<li>Milk</li>
97+
<li>Eggs</li>
98+
<li>Bread</li>
99+
<li>Chakra UI Pro license</li>
100+
</ul>
101+
<p>And some ordered lists. Things to do:</p>
102+
<ol>
103+
<li>Pay the bills</li>
104+
<li>Walk the dog</li>
105+
<li>Take out trash</li>
106+
</ol>
107+
<h3>Tables</h3>
108+
<table>
109+
<thead>
110+
<tr>
111+
<th>Name</th>
112+
<th>Role</th>
113+
<th>GitHub Profile</th>
114+
</tr>
115+
</thead>
116+
<tbody>
117+
<tr>
118+
<td>Segun</td>
119+
<td>Creator</td>
120+
<td>segunadebayo</td>
121+
</tr>
122+
<tr>
123+
<td>Chris</td>
124+
<td>Ark Wizard</td>
125+
<td>grizzlycodes</td>
126+
</tr>
127+
<tr>
128+
<td>Abraham</td>
129+
<td>Trouble maker</td>
130+
<td>anubra266</td>
131+
</tr>
132+
<tr>
133+
<td>Esther</td>
134+
<td>Developer Advocate</td>
135+
<td>estheragbaje</td>
136+
</tr>
137+
</tbody>
138+
</table>`
139+
140+
export const Demo = () => {
141+
return <Prose mx="auto" dangerouslySetInnerHTML={{ __html: code }} />
142+
}

‎packages/react/src/components/typography/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,5 @@ export type { StrongProps } from "./strong"
1212

1313
export { Mark } from "./mark"
1414
export type { MarkProps } from "./mark"
15+
16+
export { Prose } from "./prose"

0 commit comments

Comments
 (0)
Please sign in to comment.