diff --git a/apps/rhc-templates/src/app/collage/page.tsx b/apps/rhc-templates/src/app/collage/page.tsx index 68e9269ff..f6755cdba 100644 --- a/apps/rhc-templates/src/app/collage/page.tsx +++ b/apps/rhc-templates/src/app/collage/page.tsx @@ -1,6 +1,7 @@ 'use client'; -import { AccordionProvider, Link, Paragraph } from '@rijkshuisstijl-community/components-react'; + +import { AccordionProvider, Blockquote, Link, Paragraph } from '@rijkshuisstijl-community/components-react'; import { Avatar, Pagination } from '@amsterdam/design-system-react'; import { IconAlertTriangle, @@ -13,7 +14,6 @@ import { import { Alert, BadgeCounter, - Blockquote, BreadcrumbNav, BreadcrumbNavLink, Button, @@ -112,9 +112,7 @@ export default function Collage() { In het NL Design System verzamelen we principes, handvatten, elementen, patronen en richtlijnen. -
-
Ik heb het nog nooit gedaan dus ik denk dat ik het wel kan
-
+
Ik heb het nog nooit gedaan dus ik denk dat ik het wel kan
diff --git a/apps/rhc-templates/src/app/page/page.tsx b/apps/rhc-templates/src/app/page/page.tsx index ab61563a7..3b4d2fefb 100644 --- a/apps/rhc-templates/src/app/page/page.tsx +++ b/apps/rhc-templates/src/app/page/page.tsx @@ -1,7 +1,6 @@ 'use client'; import { - Blockquote, Button, ButtonLink, Heading, @@ -30,7 +29,7 @@ import { Figure, FigureCaption, } from '@utrecht/component-library-react/dist/css-module'; -import { ActionGroup, Link, Logo, Paragraph } from '@rijkshuisstijl-community/components-react'; +import { ActionGroup, Blockquote, Link, Logo, Paragraph } from '@rijkshuisstijl-community/components-react'; import { HeadingGroup } from '@utrecht/component-library-react'; export default function Page() { @@ -161,11 +160,9 @@ export default function Page() { officia deserunt mollit anim id est laborum. Dit is een normale link -
-
- Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod * -
-
+
+ Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod * +
Dit is een H5
diff --git a/packages/components-css/blockquote/index.scss b/packages/components-css/blockquote/index.scss new file mode 100644 index 000000000..67815f7c8 --- /dev/null +++ b/packages/components-css/blockquote/index.scss @@ -0,0 +1,15 @@ +@import "../node_modules/@utrecht/components/blockquote/src/"; + +.utrecht-blockquote { + color: var(--utrecht-blockquote-content-color, inherit); + display: flex; + flex-direction: column; + font-family: var(--utrecht-blockquote-content-font-family, inherit); + font-size: var(--utrecht-blockquote-content-font-size, inherit); + row-gap: var(--utrecht-blockquote-row-gap); +} + +.utrecht-blockquote__attribution { + color: var(--utrecht-blockquote-attribution-color, inherit); + font-family: var(--utrecht-blockquote-attribution-font-family, inherit); +} diff --git a/packages/components-css/index.scss b/packages/components-css/index.scss index aeea1fce0..f11549745 100644 --- a/packages/components-css/index.scss +++ b/packages/components-css/index.scss @@ -4,6 +4,7 @@ */ @import "accordion/index"; +@import "blockquote/index"; @import "alert/index"; @import "link/index"; @import "logo/index"; diff --git a/packages/components-react/src/Blockquote.test.tsx b/packages/components-react/src/Blockquote.test.tsx new file mode 100644 index 000000000..f07b75d42 --- /dev/null +++ b/packages/components-react/src/Blockquote.test.tsx @@ -0,0 +1,125 @@ +import { render } from '@testing-library/react'; +import { createRef } from 'react'; +import { Blockquote } from './Blockquote'; +import '@testing-library/jest-dom'; + +describe('Blockquote', () => { + it('renders an HTML blockquote element', () => { + const { container } = render(
); + + const blockquote = container.querySelector('blockquote:only-child'); + + expect(blockquote).toBeInTheDocument(); + }); + + it('renders a block element', () => { + const { container } = render(
); + + const paragraph = container.querySelector(':only-child'); + + expect(paragraph).toHaveStyle({ display: 'block' }); + }); + + it('renders a design system BEM class name: utrecht-blockquote', () => { + const { container } = render(
); + + const paragraph = container.querySelector(':only-child'); + + expect(paragraph).toHaveClass('utrecht-blockquote'); + }); + + it('renders rich text content', () => { + const { container } = render( +
+ Hello, world +
, + ); + + const blockquote = container.querySelector(':only-child'); + + const richText = blockquote?.querySelector('code'); + + expect(richText).toBeInTheDocument(); + }); + + // Make sure Blockquote isn't implemented as `

` element, + // because then it would be impossible to render `

` children. + it('can render multiple paragraph of rich text content', () => { + const { container } = render( +

+

Hello...

+

...world

+
, + ); + + const blockquote = container.querySelector(':only-child'); + + const richText = blockquote?.querySelector('p + p'); + + expect(richText).toBeInTheDocument(); + }); + + it('can be hidden', () => { + const { container } = render(