Skip to content

Commit 9b91c29

Browse files
MateoWartelleMateoWartelle
authored
feat: Blockquote Component (#997)
* feat: blockquote Component * docs: fix missing table of contents, theme & references * docs: fix sizing for alignment and sizes in table of contents to match * docs: move into typography dropdown to match flowbite /docs/typography/* * docs: blockquote new badge
1 parent 8ae697e commit 9b91c29

File tree

15 files changed

+426
-8
lines changed

15 files changed

+426
-8
lines changed

‎app/data/components.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -376,14 +376,14 @@ export const COMPONENTS_DATA: Component[] = [
376376
// link: `/docs/typography/paragraphs`,
377377
// classes: 'w-64'
378378
// },
379-
// {
380-
// id: '48',
381-
// name: 'Blockquote',
382-
// image: '/images/components/blockquote.svg',
383-
// imageDark: '/images/components/blockquote-dark.svg',
384-
// link: `/docs/typography/blockquote`,
385-
// classes: 'w-64'
386-
// },
379+
{
380+
id: '48',
381+
name: 'Blockquote',
382+
image: '/images/components/blockquote.svg',
383+
imageDark: '/images/components/blockquote-dark.svg',
384+
link: `/docs/typography/blockquote`,
385+
classes: 'w-64',
386+
},
387387
// {
388388
// id: '49',
389389
// name: 'Image',

‎app/docs/layout.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -262,6 +262,7 @@ const DocsSidebar: FC<DocsLayoutState> = ({ isCollapsed, setCollapsed }) => {
262262
</Badge>
263263
</span>
264264
</SidebarLink>
265+
<SidebarLink href="/docs/components/blockquote">Blockquote</SidebarLink>
265266
<SidebarLink href="/docs/components/breadcrumb">Breadcrumb</SidebarLink>
266267
<SidebarLink href="/docs/components/button">Button</SidebarLink>
267268
<SidebarLink href="/docs/components/button-group">Button group</SidebarLink>
@@ -335,6 +336,37 @@ const DocsSidebar: FC<DocsLayoutState> = ({ isCollapsed, setCollapsed }) => {
335336
</Accordion.Panel>
336337
</Accordion>
337338

339+
<Accordion collapseAll={!pathname.includes('/docs/typography/')} flush className="border-none">
340+
<Accordion.Panel>
341+
<Accordion.Title
342+
theme={{
343+
open: {
344+
on: 'mb-2 text-primary-700 hover:text-primary-700 dark:text-primary-500 dark:hover:text-primary-500',
345+
off: 'mb-1 text-gray-900 dark:text-white hover:text-primary-700 dark:hover:text-primary-500',
346+
},
347+
}}
348+
className={twMerge(
349+
'flex w-full items-center justify-between bg-transparent p-0 text-sm font-semibold uppercase tracking-wide',
350+
pathname.includes('/docs/typography/') &&
351+
'text-primary-700 hover:text-primary-700 dark:text-primary-500 dark:hover:text-primary-500',
352+
)}
353+
>
354+
Typography
355+
</Accordion.Title>
356+
<Accordion.Content className="mb-2 space-y-0.5 border-none p-0">
357+
<Sidebar.ItemGroup className="border-none">
358+
<SidebarLink href="/docs/typography/blockquote">
359+
<span className="flex items-center gap-2">
360+
Blockquote{' '}
361+
<Badge color="cyan" className="px-2">
362+
New
363+
</Badge>
364+
</span>
365+
</SidebarLink>
366+
</Sidebar.ItemGroup>
367+
</Accordion.Content>
368+
</Accordion.Panel>
369+
</Accordion>
338370
<span className="h-64">&nbsp;</span>
339371
</Sidebar.Items>
340372
</Sidebar>

‎app/docs/typography/blockquote/blockquote.mdx

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
import { CodePreview } from '~/app/components/code-preview';
2+
import { Blockquote, Avatar, Rating, theme } from '~/src';
3+
4+
Get started with a collection of blockquote components when quoting external sources such as quotes inside an article, user reviews, and testimonials based on multiple examples of layouts, styles, and contexts.
5+
6+
The main `<Blockquote>` component can be used together with the `<cite>` tag or attribute to also mention the source of the quote content.
7+
8+
To start using the component make sure that you have imported it from Flowbite React:
9+
10+
```jsx
11+
'use client';
12+
13+
import { Blockquote } from 'flowbite-react';
14+
```
15+
16+
## Table of Contents
17+
18+
## Default blockquote
19+
20+
Use this example to quote an external source inside a `<Blockquote>` component.
21+
22+
<CodePreview importFlowbiteReact="Blockquote" title="Default Blockquote">
23+
<Blockquote>
24+
"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to
25+
complex dashboard. Perfect choice for your next SaaS application."
26+
</Blockquote>
27+
</CodePreview>
28+
29+
## Solid background
30+
31+
This example can be used as an alternative style to the default one by applying a solid background color.
32+
33+
<CodePreview importFlowbiteReact="Blockquote" title="Solid background Blockquote">
34+
<p className="text-gray-500 dark:text-gray-400">
35+
Does your user know how to exit out of screens? Can they follow your intended user journey and buy something from
36+
the site you’ve designed? By running a usability test, you’ll be able to see how users will interact with your
37+
design once it’s live.
38+
</p>
39+
<Blockquote className="my-4 border-l-4 border-gray-300 bg-gray-50 p-4 dark:border-gray-500 dark:bg-gray-800">
40+
"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to
41+
complex dashboard. Perfect choice for your next SaaS application."
42+
</Blockquote>
43+
First of all you need to understand how Flowbite works. This library is not another framework. Rather, it is a set of
44+
components based on Tailwind CSS that you can just copy-paste from the documentation.
45+
</CodePreview>
46+
47+
## Blockquote icon
48+
49+
Use this example to show an icon above the blockquote text content.
50+
51+
<CodePreview importFlowbiteReact="Blockquote" title="Blockquote icon">
52+
<Blockquote>
53+
<svg
54+
className="mb-4 h-8 w-8 text-gray-400 dark:text-gray-600"
55+
aria-hidden="true"
56+
xmlns="http://www.w3.org/2000/svg"
57+
fill="currentColor"
58+
viewBox="0 0 18 14"
59+
>
60+
<path d="M6 0H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3H2a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Zm10 0h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3h-1a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Z" />
61+
</svg>
62+
"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex
63+
dashboard. Perfect choice for your next SaaS application."
64+
</Blockquote>
65+
</CodePreview>
66+
67+
## Paragraph context
68+
69+
Use this example to show a `<Blockquote>` component between multiple paragraph elements.
70+
71+
<CodePreview importFlowbiteReact="Blockquote" title="Paragraph context Blockquote">
72+
<p className="mb-3 text-gray-500 dark:text-gray-400">
73+
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data
74+
from other software development tools, so your IT support and operations teams have richer contextual information to
75+
rapidly respond to requests, incidents, and changes.
76+
</p>
77+
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-6">
78+
<p className="mb-3 text-gray-500 dark:text-gray-400">
79+
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data
80+
from other software development tools, so your IT support and operations teams have richer contextual information
81+
to rapidly respond to requests, incidents, and changes.
82+
</p>
83+
<Blockquote className="mb-3">
84+
<p className="text-xl font-semibold italic text-gray-900 dark:text-white">
85+
" Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to
86+
complex dashboard. Perfect choice for your next SaaS application. "
87+
</p>
88+
</Blockquote>
89+
</div>
90+
<p className="mb-3 text-gray-500 dark:text-gray-400">
91+
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical
92+
development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.
93+
</p>
94+
</CodePreview>
95+
96+
## User testimonial
97+
98+
This example can be used for user testimonials by mentioning the author and occupation of the author.
99+
100+
<CodePreview importFlowbiteReact="Blockquote, Avatar" title="User testimonial Blockquote">
101+
<figure className="mx-auto max-w-screen-md text-center">
102+
<svg
103+
className="mx-auto mb-3 h-10 w-10 text-gray-400 dark:text-gray-600"
104+
aria-hidden="true"
105+
xmlns="http://www.w3.org/2000/svg"
106+
fill="currentColor"
107+
viewBox="0 0 18 14"
108+
>
109+
<path d="M6 0H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3H2a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Zm10 0h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3h-1a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Z" />
110+
</svg>
111+
<blockquote>
112+
<p className="text-2xl font-medium italic text-gray-900 dark:text-white">
113+
"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to
114+
complex dashboard. Perfect choice for your next SaaS application."
115+
</p>
116+
</blockquote>
117+
<figcaption className="mt-6 flex items-center justify-center space-x-3">
118+
<Avatar rounded size="xs" img="/images/people/profile-picture-5.jpg" alt="profile picture" />
119+
<div className="flex items-center divide-x-2 divide-gray-500 dark:divide-gray-700">
120+
<cite className="pr-3 font-medium text-gray-900 dark:text-white">Micheal Gough</cite>
121+
<cite className="pl-3 text-sm text-gray-500 dark:text-gray-400">CEO at Google</cite>
122+
</div>
123+
</figcaption>
124+
</figure>
125+
</CodePreview>
126+
127+
## User Review
128+
129+
Use this example to show a user review with rating stars and the name and occupation of the author.
130+
131+
<CodePreview importFlowbiteReact="Blockquote, Avatar, Rating" title="User Review Blockquote">
132+
<figure className="max-w-screen-md">
133+
<div className="mb-4 flex items-center">
134+
<Rating size="md">
135+
<Rating.Star />
136+
<Rating.Star />
137+
<Rating.Star />
138+
<Rating.Star />
139+
<Rating.Star />
140+
</Rating>
141+
</div>
142+
<Blockquote>
143+
<p className="text-2xl font-semibold text-gray-900 dark:text-white">
144+
"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to
145+
complex dashboard. Perfect choice for your next SaaS application."
146+
</p>
147+
</Blockquote>
148+
<figcaption className="mt-6 flex items-center space-x-3">
149+
<Avatar rounded size="xs" img="/images/people/profile-picture-3.jpg" alt="profile picture" />
150+
<div className="flex items-center divide-x-2 divide-gray-300 dark:divide-gray-700">
151+
<cite className="pr-3 font-medium text-gray-900 dark:text-white">Bonnie Green</cite>
152+
<cite className="pl-3 text-sm text-gray-500 dark:text-gray-400">CTO at Flowbite</cite>
153+
</div>
154+
</figcaption>
155+
</figure>
156+
</CodePreview>
157+
158+
## Alignment
159+
160+
Choose from the following examples the blockquote text alignment from starting from left, center to right based on the utility classes from Tailwind CSS.
161+
162+
### Left
163+
164+
The default alignment of the blockquote text content is the left side of the document.
165+
166+
<CodePreview importFlowbiteReact="Blockquote" title="Left Blockquote">
167+
<Blockquote>
168+
"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to
169+
complex dashboard. Perfect choice for your next SaaS application."
170+
</Blockquote>
171+
</CodePreview>
172+
173+
### Center
174+
175+
Use the text-center class from Tailwind CSS to align the text content inside the blockquote to the center.
176+
177+
<CodePreview importFlowbiteReact="Blockquote" title="Center Blockquote">
178+
<Blockquote className="text-center">
179+
"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to
180+
complex dashboard. Perfect choice for your next SaaS application."
181+
</Blockquote>
182+
</CodePreview>
183+
184+
### Right
185+
186+
Use the text-right utility class from Tailwind CSS to align the blockquote text content to the right side of the page.
187+
188+
<CodePreview importFlowbiteReact="Blockquote" title="Right Blockquote">
189+
<Blockquote className="text-right">
190+
"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to
191+
complex dashboard. Perfect choice for your next SaaS application."
192+
</Blockquote>
193+
</CodePreview>
194+
195+
## Sizes
196+
197+
Choose from one of the multiple sizes for the default blockquote component based on the surrounding elements and sizes.
198+
199+
### Small
200+
201+
Use the text-lg font size class from Tailwind CSS to apply the small size for the blockquote component.
202+
203+
<CodePreview importFlowbiteReact="Blockquote" title="Small Blockquote">
204+
<Blockquote className="text-lg">
205+
"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to
206+
complex dashboard. Perfect choice for your next SaaS application."
207+
</Blockquote>
208+
</CodePreview>
209+
210+
### Medium
211+
212+
Use the text-xl utility class to set the default size for the blockquote element.
213+
214+
<CodePreview importFlowbiteReact="Blockquote" title="Medium Blockquote">
215+
<Blockquote className="text-xl">
216+
"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to
217+
complex dashboard. Perfect choice for your next SaaS application."
218+
</Blockquote>
219+
</CodePreview>
220+
221+
### Large
222+
223+
The text-2xl class can be used to set a large size for the blockquote component.
224+
225+
<CodePreview importFlowbiteReact="Blockquote" title="Large Blockquote">
226+
<Blockquote className="text-2xl">
227+
"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to
228+
complex dashboard. Perfect choice for your next SaaS application."
229+
</Blockquote>
230+
</CodePreview>
231+
232+
## Theme
233+
234+
To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
235+
236+
<pre className="language-tsx">
237+
<code>{JSON.stringify(theme.blockquote, null, 2)}</code>
238+
</pre>
239+
240+
## References
241+
242+
- [Flowbite Blockquote](https://flowbite.com/docs/typography/blockquote/)

‎app/docs/typography/blockquote/index.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
'use client';
2+
3+
import type { FC } from 'react';
4+
import { DocsContentLayout } from '~/app/components/docs-content-layout';
5+
import BlockquoteDocs from './blockquote.mdx';
6+
7+
const FormsPageContent: FC = () => {
8+
return (
9+
<DocsContentLayout
10+
title="React Blockquote - Flowbite"
11+
description="The blockquote component can be used to quote text content from an external source that can be used for testimonials, reviews, and quotes inside an article"
12+
>
13+
<BlockquoteDocs />
14+
</DocsContentLayout>
15+
);
16+
};
17+
18+
export default FormsPageContent;

‎app/docs/typography/blockquote/page.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type { Metadata, NextPage } from 'next';
2+
import BlockquotePageContent from '.';
3+
4+
export const metadata: Metadata = {
5+
description:
6+
'The blockquote component can be used to quote text content from an external source that can be used for testimonials, reviews, and quotes inside an article',
7+
title: 'React Blockquote - Flowbite',
8+
};
9+
10+
const BlockquotePage: NextPage = () => {
11+
return <BlockquotePageContent />;
12+
};
13+
14+
export default BlockquotePage;

‎public/images/components/blockquote-dark.svg

Lines changed: 8 additions & 0 deletions
Loading

‎public/images/components/blockquote.svg

Lines changed: 8 additions & 0 deletions
Loading

‎src/components/Blockquote/Blockquote.spec.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { render, screen } from '@testing-library/react';
2+
import { describe, expect, it } from 'vitest';
3+
import { Flowbite } from '../../';
4+
import { Blockquote } from './Blockquote';
5+
6+
describe('Components / Blockquote', () => {
7+
describe('Theme', () => {
8+
it('should use custom `base` classes', () => {
9+
const theme = {
10+
blockquote: {
11+
root: {
12+
base: 'bg-yellow-400 dark:bg-yellow-40',
13+
},
14+
},
15+
};
16+
render(
17+
<Flowbite theme={{ theme }}>
18+
<Blockquote />
19+
</Flowbite>,
20+
);
21+
expect(blockquote()).toBeInTheDocument();
22+
expect(blockquote()).toHaveClass('bg-yellow-400 dark:bg-yellow-40');
23+
});
24+
});
25+
describe('Rendering', () => {
26+
it('should render when `children={0}`', () => {
27+
render(<Blockquote>0</Blockquote>);
28+
expect(blockquote()).toHaveTextContent('0');
29+
});
30+
});
31+
});
32+
33+
const blockquote = () => screen.getByTestId('flowbite-blockquote');

0 commit comments

Comments
 (0)