Skip to content

Blockquote #499

@Ibabalola

Description

@Ibabalola

As a developer
I want to be able use a Blockquote component
so that I can easily add a blockquote

The component should contain:

  • embedded className called dcx-blockquote
  • relevant classes for shared / reusable styling
  • the ability to specify the value of the label
  • 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:

  • Add unit tests
  • Add Application code with commented props
  • Add the ability to specify other props (...props)
  • Add Demo use of component
  • Add to storybook documentation file with examples (.mdx) in a section called Typography
  • Add to live demo

Please follow the below to create your branch

git checkout release/0.8
git pull
git checkout -b 'feature/blockquote'

Metadata

Metadata

Assignees

Labels

typographyCreate components for typography e.g. title

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions