As a developer
I want to be able use a Blockquote component
so that I can easily add a blockquote
The component should contain:
[x] embedded className called dcx-blockquote
[x] relevant classes for shared / reusable styling
[x] the ability to specify the value of the label
[x] the ability to specify other props (...props)
Blockquote behind the scenes is a blockquote tag:
<blockquote>
<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
<footer>From WWF's website</footer>
</blockquote>
<blockquote class="blockquote-reverse">
<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
<footer>From WWF's website</footer>
</blockquote>
The final user will use in this way:
<Blockquote
class="blockquote-reverse"
text="For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally."
footer="From WWF's websit"
/>
and the outcome will be something like this:
<blockquote class="blockquote-reverse">
<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
<footer>From WWF's website</footer>
</blockquote>
Tasks:
[x] Add unit tests
[x] Add Application code with commented props
[x] Add the ability to specify other props (...props)
[x] Add Demo use of component
[x] Add to storybook documentation file with examples (.mdx) in a section called Typography
daniele-zurico
commented
1 year ago
As a developer I want to be able use a
Blockquotecomponent so that I can easily add a blockquoteThe component should contain:
dcx-blockquoteBlockquote behind the scenes is a
blockquotetag:The final user will use in this way:
and the outcome will be something like this:
Tasks:
Please follow the below to create your branch